@cratis/showrunner.usher.react 0.0.0-bootstrap.0

package/Buttons/MyIssuesButton.tsx

@@ -0,0 +1,78 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Button, IconButton } from '@cratis/components/Common';
+import { Badge } from '@cratis/components/Display';
+import { MyIssues } from '@cratis/showrunner.usher';
+import { InboxIcon } from '../Icons.js';
+import { waitingCount } from '../Issues/MyIssuesList.js';
+import { UsherBoundary } from '../Provider/UsherBoundary.js';
+import { useUsher } from '../Provider/useUsher.js';
+import { myIssuesButtonModel, UsherButtonSize } from './buttonModels.js';
+
+/**
+ * Props for {@link MyIssuesButton}.
+ */
+export interface MyIssuesButtonProps {
+    /** `large` shows the icon and the text; `small` shows the icon, with the text as tooltip and accessible name. Defaults to `large`. */
+    size?: UsherButtonSize;
+
+    /** Additional class name for the button. */
+    className?: string;
+}
+
+/**
+ * Opens the my issues side sheet. A badge counts the issues support waits for the user on, and the accessible name
+ * says how many.
+ */
+export const MyIssuesButton = (props: MyIssuesButtonProps) => {
+    const usher = useUsher();
+
+    return (
+        <UsherBoundary>
+            <MyIssuesButtonContent {...props} onOpen={usher.showMyIssues} />
+        </UsherBoundary>
+    );
+};
+
+const MyIssuesButtonContent = ({ size = 'large', className, onOpen }: MyIssuesButtonProps & { onOpen: () => void }) => {
+    const usher = useUsher();
+    const [result] = MyIssues.use();
+
+    return <MyIssuesButtonView size={size} className={className} waiting={waitingCount(result.data ?? [])} labels={usher.labels} onOpen={onOpen} />;
+};
+
+/**
+ * Props for {@link MyIssuesButtonView}.
+ */
+export interface MyIssuesButtonViewProps extends MyIssuesButtonProps {
+    /** How many issues support waits for the user on. */
+    waiting: number;
+
+    /** The labels to show. */
+    labels: ReturnType<typeof useUsher>['labels'];
+
+    /** Opens the my issues side sheet. */
+    onOpen: () => void;
+}
+
+/**
+ * Renders the my issues button for a given number of issues support waits for the user on.
+ */
+export const MyIssuesButtonView = ({ size = 'large', className, waiting, labels, onOpen }: MyIssuesButtonViewProps) => {
+    const model = myIssuesButtonModel(size, waiting, labels);
+    const badge = waiting > 0 && (
+        <span className='usher-my-issues-button__badge' aria-hidden='true'>
+            <Badge value={waiting} severity='warn' size='small' />
+        </span>
+    );
+
+    return (
+        <span className={['usher-my-issues-button', className].filter(Boolean).join(' ')} data-size={size}>
+            {size === 'small'
+                ? <IconButton variant='ghost' icon={<InboxIcon />} aria-label={model.accessibleName} tooltip={model.tooltip} onClick={onOpen} />
+                : <Button variant='outline' icon={<InboxIcon />} label={model.text} aria-label={model.accessibleName} onClick={onOpen} />}
+            {badge}
+        </span>
+    );
+};

package/Buttons/ReportButton.tsx

@@ -0,0 +1,51 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Button, IconButton } from '@cratis/components/Common';
+import { BugIcon } from '../Icons.js';
+import { useUsher } from '../Provider/useUsher.js';
+import { reportButtonModel, UsherButtonSize } from './buttonModels.js';
+
+/**
+ * Props for {@link ReportButton}.
+ */
+export interface ReportButtonProps {
+    /** `large` shows the icon and the text; `small` shows the icon, with the text as tooltip and accessible name. Defaults to `large`. */
+    size?: UsherButtonSize;
+
+    /** The error to report: `ErrorDetails` from `@cratis/showrunner.usher`, or anything thrown. The button reports a problem described by hand when not given. */
+    error?: unknown;
+
+    /** Additional class name for the button. */
+    className?: string;
+}
+
+/**
+ * Opens the report a problem dialog, or the report this error dialog when given an error, with where in the
+ * application the button is.
+ */
+export const ReportButton = ({ size = 'large', error, className }: ReportButtonProps) => {
+    const usher = useUsher();
+    const reportsError = error !== undefined;
+    const model = reportButtonModel(size, reportsError, usher.labels);
+    const report = () => reportsError ? usher.reportError(error) : usher.reportIssue();
+
+    return size === 'small'
+        ? (
+            <IconButton
+                className={className}
+                variant='ghost'
+                icon={<BugIcon />}
+                aria-label={model.accessibleName}
+                tooltip={model.tooltip}
+                onClick={report} />
+        )
+        : (
+            <Button
+                className={className}
+                variant='outline'
+                icon={<BugIcon />}
+                label={model.text}
+                onClick={report} />
+        );
+};

package/Buttons/buttonModels.ts

@@ -0,0 +1,55 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { format, UsherLabels } from '../Labels/index.js';
+
+/**
+ * The sizes of the Usher buttons: `large` shows the icon and the text; `small` shows the icon, with the text as the
+ * tooltip and the accessible name.
+ */
+export type UsherButtonSize = 'large' | 'small';
+
+/**
+ * What an Usher button shows and announces.
+ */
+export interface ButtonModel {
+    /** The visible text; empty for a small button. */
+    readonly text: string;
+
+    /** The accessible name. */
+    readonly accessibleName: string;
+
+    /** The tooltip; empty for a large button, whose text says it all. */
+    readonly tooltip: string;
+}
+
+/**
+ * Gets what the report button shows and announces.
+ * @param size The {@link UsherButtonSize}.
+ * @param reportsError Whether the button reports an error rather than a problem described by hand.
+ * @param labels The labels to show.
+ * @returns The {@link ButtonModel}.
+ */
+export function reportButtonModel(size: UsherButtonSize, reportsError: boolean, labels: UsherLabels): ButtonModel {
+    const label = reportsError ? labels.reportButton.reportError : labels.reportButton.reportProblem;
+    return modelFor(size, label, label);
+}
+
+/**
+ * Gets what the my issues button shows and announces.
+ * @param size The {@link UsherButtonSize}.
+ * @param waiting How many issues support waits for the user on.
+ * @param labels The labels to show.
+ * @returns The {@link ButtonModel}.
+ */
+export function myIssuesButtonModel(size: UsherButtonSize, waiting: number, labels: UsherLabels): ButtonModel {
+    const label = labels.myIssuesButton.label;
+    const accessibleName = waiting > 0 ? `${label}, ${format(labels.myIssuesButton.waiting, { count: waiting })}` : label;
+    return modelFor(size, label, accessibleName);
+}
+
+function modelFor(size: UsherButtonSize, label: string, accessibleName: string): ButtonModel {
+    return size === 'small'
+        ? { text: '', accessibleName, tooltip: accessibleName }
+        : { text: label, accessibleName, tooltip: '' };
+}

package/Buttons/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './buttonModels.js';
+export * from './MyIssuesButton.js';
+export * from './ReportButton.js';

package/Correlation/CorrelationTracker.ts

@@ -0,0 +1,51 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Guid } from '@cratis/fundamentals';
+
+/**
+ * Keeps the correlation ids of the last few Arc commands and queries, so a report can carry them.
+ */
+export class CorrelationTracker {
+    private _correlationIds: Guid[] = [];
+
+    /**
+     * Initializes a new instance of {@link CorrelationTracker}.
+     * @param capacity How many correlation ids to keep; the oldest is dropped when one more is tracked.
+     */
+    constructor(readonly capacity: number = 5) {
+    }
+
+    /**
+     * Gets the correlation ids kept, oldest first.
+     */
+    get correlationIds(): Guid[] {
+        return [...this._correlationIds];
+    }
+
+    /**
+     * Tracks a correlation id. A correlation id already kept moves to the end instead of being kept twice; an
+     * empty one is ignored.
+     * @param correlationId The correlation id, as a {@link Guid} or its string form.
+     */
+    track(correlationId: Guid | string): void {
+        const parsed = typeof correlationId === 'string' ? parseGuid(correlationId) : correlationId;
+        if (!parsed || parsed.equals(Guid.empty)) {
+            return;
+        }
+
+        this._correlationIds = [...this._correlationIds.filter(existing => !existing.equals(parsed)), parsed]
+            .slice(-Math.max(this.capacity, 0));
+    }
+
+    /**
+     * Forgets every correlation id kept.
+     */
+    clear(): void {
+        this._correlationIds = [];
+    }
+}
+
+function parseGuid(value: string): Guid | undefined {
+    return Guid.isGuid(value) ? Guid.parse(value) : undefined;
+}

package/Correlation/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './CorrelationTracker.js';
+export * from './withCorrelationIdHeader.js';

package/Correlation/withCorrelationIdHeader.ts

@@ -0,0 +1,44 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { GetHttpHeaders } from '@cratis/arc';
+import { Guid } from '@cratis/fundamentals';
+import { CorrelationTracker } from './CorrelationTracker.js';
+
+/**
+ * The HTTP header Arc reads the correlation id of a command or query from, unless the backend configures another.
+ */
+export const defaultCorrelationIdHeader = 'X-Correlation-ID';
+
+/**
+ * Wraps the HTTP headers callback Arc calls for every command and query request, so each request carries a
+ * correlation id the tracker knows.
+ * @remarks
+ * Arc uses the correlation id a request carries in its correlation id header, so the id tracked is the id the
+ * backend records for the command or query. A correlation id the headers already carry is kept and tracked;
+ * otherwise a new one is added.
+ * @param headersCallback The callback to wrap; nothing for none.
+ * @param tracker The {@link CorrelationTracker} to track the correlation ids in.
+ * @param header The name of the correlation id header.
+ * @param createCorrelationId Creates a new correlation id.
+ * @returns The wrapping callback.
+ */
+export function withCorrelationIdHeader(
+    headersCallback: GetHttpHeaders | undefined,
+    tracker: CorrelationTracker,
+    header: string = defaultCorrelationIdHeader,
+    createCorrelationId: () => Guid = () => Guid.create()): GetHttpHeaders {
+    return () => {
+        const headers = new Headers(headersCallback?.() ?? {});
+        const existing = headers.get(header);
+        const correlationId = existing && Guid.isGuid(existing) ? existing : createCorrelationId().toString();
+        headers.set(header, correlationId);
+        tracker.track(correlationId);
+
+        const record: Record<string, string> = {};
+        headers.forEach((value, name) => {
+            record[name] = value;
+        });
+        return record;
+    };
+}

package/Icons.tsx

@@ -0,0 +1,29 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * The bug icon of the report button. Decorative: the button carries the accessible name.
+ */
+export const BugIcon = () => (
+    <svg className='usher-icon' viewBox='0 0 24 24' width='1em' height='1em' aria-hidden='true' focusable='false'>
+        <path fill='currentColor' d='M20 8h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z' />
+    </svg>
+);
+
+/**
+ * The inbox icon of the my issues button. Decorative: the button carries the accessible name.
+ */
+export const InboxIcon = () => (
+    <svg className='usher-icon' viewBox='0 0 24 24' width='1em' height='1em' aria-hidden='true' focusable='false'>
+        <path fill='currentColor' d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12h-4a3 3 0 0 1-6 0H5V5h14v10z' />
+    </svg>
+);
+
+/**
+ * The back arrow of the issue view. Decorative: the button carries the accessible name.
+ */
+export const BackIcon = () => (
+    <svg className='usher-icon' viewBox='0 0 24 24' width='1em' height='1em' aria-hidden='true' focusable='false'>
+        <path fill='currentColor' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' />
+    </svg>
+);

package/Issues/IssueView/AccessPanel.tsx

@@ -0,0 +1,85 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DialogButtons, DialogResult, useConfirmationDialog, useDialog } from '@cratis/arc.react/dialogs';
+import { Button } from '@cratis/components/Common';
+import { toastCommandResult } from '@cratis/components/Notifications';
+import { IssueConversation, IssueState, RevokeAccess } from '@cratis/showrunner.usher';
+import { useId, useState } from 'react';
+import { format } from '../../Labels/index.js';
+import { useUsherContext } from '../../Provider/UsherContext.js';
+import { formatTime } from '../../Reporting/AccessChoice.js';
+import { AccessStatus } from '../accessStatus.js';
+import { useAccessStatus } from '../useAccessStatus.js';
+import { GrantAccessDialog } from './GrantAccessDialog.js';
+import { SupportSessions } from './SupportSessions.js';
+
+/**
+ * Props for {@link AccessPanel}.
+ */
+export interface AccessPanelProps {
+    /** The issue. */
+    issue: IssueConversation;
+}
+
+/**
+ * Shows whether support may sign in as the reporter, lets them grant or revoke it, highlights support's pending
+ * request, and lists the sessions in which support signed in.
+ */
+export const AccessPanel = ({ issue }: AccessPanelProps) => {
+    const { labels, locale } = useUsherContext();
+    const headingId = useId();
+    const [GrantDialog, showGrantDialog] = useDialog(GrantAccessDialog);
+    const [confirm] = useConfirmationDialog();
+    const [revokeAccess] = RevokeAccess.use();
+    const [requestDismissed, setRequestDismissed] = useState(false);
+    const [status] = useAccessStatus(issue.access);
+    const isWithdrawn = issue.state === IssueState.withdrawn;
+    const showsRequest = status === AccessStatus.requested && !requestDismissed && !isWithdrawn;
+    const validUntil = issue.access?.validUntil instanceof Date ? issue.access.validUntil : new Date(issue.access?.validUntil);
+
+    const heading = status === AccessStatus.granted
+        ? labels.accessPanel.grantedHeading
+        : showsRequest ? labels.accessPanel.requestedHeading : labels.accessPanel.notGrantedHeading;
+
+    const revoke = async () => {
+        const answer = await confirm(labels.accessPanel.revokeTitle, labels.accessPanel.revokeMessage, DialogButtons.YesNo);
+        if (answer !== DialogResult.Yes) {
+            return;
+        }
+
+        revokeAccess.issueId = issue.id;
+        toastCommandResult(await revokeAccess.execute(), { showSuccess: false });
+    };
+
+    const grant = () => void showGrantDialog({ issueId: issue.id });
+
+    return (
+        <section className='usher-panel' data-highlighted={showsRequest || undefined} aria-labelledby={headingId}>
+            <h4 id={headingId} className='usher-panel__heading'>{heading}</h4>
+            {status === AccessStatus.granted && (
+                <>
+                    <p className='usher-panel__text'>{format(labels.accessPanel.grantedUntil, { time: formatTime(validUntil, locale) })}</p>
+                    <Button variant='outline' tone='critical' size='small' label={labels.accessPanel.revoke} onClick={() => void revoke()} />
+                </>
+            )}
+            {showsRequest && (
+                <>
+                    <p className='usher-panel__text'>{format(labels.accessPanel.requestReason, { reason: issue.access.request.reason })}</p>
+                    <div className='usher-panel__actions'>
+                        <Button variant='solid' tone='accent' size='small' label={labels.accessPanel.grant} onClick={grant} />
+                        <Button variant='ghost' size='small' label={labels.accessPanel.notNow} onClick={() => setRequestDismissed(true)} />
+                    </div>
+                </>
+            )}
+            {status !== AccessStatus.granted && !showsRequest && (
+                <>
+                    <p className='usher-panel__text'>{labels.accessPanel.notGranted}</p>
+                    {!isWithdrawn && <Button variant='outline' size='small' label={labels.accessPanel.grant} onClick={grant} />}
+                </>
+            )}
+            <SupportSessions sessions={issue.access?.sessions ?? []} entries={issue.entries ?? []} />
+            <GrantDialog />
+        </section>
+    );
+};

package/Issues/IssueView/GrantAccessDialog.tsx

@@ -0,0 +1,56 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { DropdownField } from '@cratis/components/CommandForm';
+import { DialogInitialFocus } from '@cratis/components/Dialogs';
+import { Guid } from '@cratis/fundamentals';
+import { AccessDuration, GrantAccess } from '@cratis/showrunner.usher';
+import { useId, useState } from 'react';
+import { useUsherLabels } from '../../Provider/UsherContext.js';
+import { AccessNotice } from '../../Reporting/AccessNotice.js';
+import { durationOptions } from '../../Reporting/durationOptions.js';
+
+/**
+ * Props for {@link GrantAccessDialog}.
+ */
+export interface GrantAccessDialogProps {
+    /** The issue. */
+    issueId: Guid;
+}
+
+/**
+ * Lets the reporter grant support access to sign in as them on an issue for a while, stating until when.
+ */
+export const GrantAccessDialog = ({ issueId }: GrantAccessDialogProps) => {
+    const labels = useUsherLabels();
+    const noticeId = useId();
+    const [duration, setDuration] = useState(AccessDuration.oneDay);
+
+    return (
+        <CommandDialog<GrantAccess>
+            command={GrantAccess}
+            title={labels.accessPanel.grantTitle}
+            okLabel={labels.accessPanel.grantConfirm}
+            cancelLabel={labels.common.cancel}
+            closeAriaLabel={labels.common.close}
+            initialFocus={DialogInitialFocus.Content}
+            initialValues={{ issueId, accessDuration: AccessDuration.oneDay }}
+            onFieldChange={(_command, fieldName, _oldValue, newValue) => {
+                if (fieldName === 'accessDuration') {
+                    setDuration(Number(newValue) as AccessDuration);
+                }
+            }}>
+            <div className='usher-report-form'>
+                <DropdownField<GrantAccess>
+                    value={command => command.accessDuration}
+                    title={labels.access.duration}
+                    aria-describedby={noticeId}
+                    options={durationOptions(labels)}
+                    optionValue='value'
+                    optionLabel='label' />
+                <AccessNotice id={noticeId} duration={duration} />
+            </div>
+        </CommandDialog>
+    );
+};

package/Issues/IssueView/IdentityPanel.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useDialog } from '@cratis/arc.react/dialogs';
+import { Button } from '@cratis/components/Common';
+import { IssueConversation, IssueState } from '@cratis/showrunner.usher';
+import { useId } from 'react';
+import { useUsherLabels } from '../../Provider/UsherContext.js';
+import { ShareIdentityDialog } from './ShareIdentityDialog.js';
+
+/**
+ * Props for {@link IdentityPanel}.
+ */
+export interface IdentityPanelProps {
+    /** The issue. */
+    issue: IssueConversation;
+}
+
+/**
+ * Shows whether support knows who the reporter is, and lets them share it when it does not.
+ */
+export const IdentityPanel = ({ issue }: IdentityPanelProps) => {
+    const labels = useUsherLabels();
+    const headingId = useId();
+    const [ShareDialog, showShareDialog] = useDialog(ShareIdentityDialog);
+    const canShare = !issue.identityShared && issue.state !== IssueState.withdrawn;
+
+    return (
+        <section className='usher-panel' aria-labelledby={headingId}>
+            <h4 id={headingId} className='usher-panel__heading'>{labels.identity.heading}</h4>
+            <p className='usher-panel__text'>{issue.identityShared ? labels.identity.known : labels.identity.unknown}</p>
+            {canShare && (
+                <Button variant='outline' size='small' label={labels.identity.share} onClick={() => void showShareDialog({ issueId: issue.id })} />
+            )}
+            <ShareDialog />
+        </section>
+    );
+};

package/Issues/IssueView/IssueActions.tsx

@@ -0,0 +1,52 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DialogButtons, DialogResult, useConfirmationDialog, useDialog } from '@cratis/arc.react/dialogs';
+import { Button } from '@cratis/components/Common';
+import { toastCommandResult } from '@cratis/components/Notifications';
+import { IssueConversation, IssueState, WithdrawIssue } from '@cratis/showrunner.usher';
+import { useUsherLabels } from '../../Provider/UsherContext.js';
+import { isClosed } from '../issueStates.js';
+import { ReopenIssueDialog } from './ReopenIssueDialog.js';
+
+/**
+ * Props for {@link IssueActions}.
+ */
+export interface IssueActionsProps {
+    /** The issue. */
+    issue: IssueConversation;
+}
+
+/**
+ * What the reporter can do with an issue: reopen it once resolved, and withdraw it while it is open.
+ */
+export const IssueActions = ({ issue }: IssueActionsProps) => {
+    const labels = useUsherLabels();
+    const [ReopenDialog, showReopenDialog] = useDialog(ReopenIssueDialog);
+    const [confirm] = useConfirmationDialog();
+    const [withdrawIssue] = WithdrawIssue.use();
+    const canReopen = issue.state === IssueState.resolved;
+    const canWithdraw = !isClosed(issue.state);
+
+    const withdraw = async () => {
+        const answer = await confirm(labels.actions.withdrawTitle, labels.actions.withdrawMessage, DialogButtons.YesNo);
+        if (answer !== DialogResult.Yes) {
+            return;
+        }
+
+        withdrawIssue.issueId = issue.id;
+        toastCommandResult(await withdrawIssue.execute(), { showSuccess: false });
+    };
+
+    if (!canReopen && !canWithdraw) {
+        return null;
+    }
+
+    return (
+        <div className='usher-issue-actions'>
+            {canReopen && <Button variant='outline' size='small' label={labels.actions.reopen} onClick={() => void showReopenDialog({ issueId: issue.id })} />}
+            {canWithdraw && <Button variant='ghost' tone='critical' size='small' label={labels.actions.withdraw} onClick={() => void withdraw()} />}
+            <ReopenDialog />
+        </div>
+    );
+};

package/Issues/IssueView/IssueConversationPanel.tsx

@@ -0,0 +1,89 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ChatConversation } from '@cratis/components/Chat';
+import { Message, Tag } from '@cratis/components/Display';
+import { toastCommandResult } from '@cratis/components/Notifications';
+import { AddDetails, AnswerQuestion, ConversationEntryKind, IssueConversation, IssueState } from '@cratis/showrunner.usher';
+import { useMemo } from 'react';
+import { useUsherLabels } from '../../Provider/UsherContext.js';
+import { authorOf, ConversationMessage, conversationMessages, isOpenQuestion } from '../conversationMessages.js';
+
+/**
+ * Props for {@link IssueConversationPanel}.
+ */
+export interface IssueConversationPanelProps {
+    /** The issue. */
+    issue: IssueConversation;
+}
+
+/**
+ * The conversation on an issue. A message the reporter sends answers support's open question, or adds details when
+ * there is none. Once the reporter withdrew the issue, the composer is disabled: nothing more can be added to it.
+ */
+export const IssueConversationPanel = ({ issue }: IssueConversationPanelProps) => {
+    const labels = useUsherLabels();
+    const [addDetails] = AddDetails.use();
+    const [answerQuestion] = AnswerQuestion.use();
+    const messages = useMemo(() => conversationMessages(issue.id, issue.entries ?? [], labels), [issue.id, issue.entries, labels]);
+    const openQuestionId = issue.openQuestion?.questionId;
+    const isWithdrawn = issue.state === IssueState.withdrawn;
+
+    const send = async (body: string) => {
+        if (isWithdrawn) {
+            return;
+        }
+
+        if (isOpenQuestion(openQuestionId)) {
+            answerQuestion.issueId = issue.id;
+            answerQuestion.questionId = openQuestionId;
+            answerQuestion.answer = body;
+            toastCommandResult(await answerQuestion.execute(), { showSuccess: false });
+            return;
+        }
+
+        addDetails.issueId = issue.id;
+        addDetails.details = body;
+        toastCommandResult(await addDetails.execute(), { showSuccess: false });
+    };
+
+    const renderMessageExtra = (message: ConversationMessage) => {
+        if (message.kind !== ConversationEntryKind.questionAsked) {
+            return undefined;
+        }
+
+        const isOpen = isOpenQuestion(openQuestionId) && openQuestionId.equals(message.questionId);
+        return (
+            <span className='usher-conversation__question-state'>
+                <Tag value={isOpen ? labels.issue.waitingForAnswer : labels.issue.answered} severity={isOpen ? 'warn' : 'success'} />
+            </span>
+        );
+    };
+
+    return (
+        <section className='usher-conversation' data-closed={isWithdrawn || undefined} aria-label={issue.title}>
+            <fieldset className='usher-conversation__fieldset' disabled={isWithdrawn}>
+                <ChatConversation<ConversationMessage>
+                    messages={messages}
+                    onSendMessage={body => void send(body)}
+                    authorOf={authorId => authorOf(authorId, labels)}
+                    renderMessageExtra={renderMessageExtra}
+                    quickReply={false}
+                    labels={{
+                        empty: labels.conversation.empty,
+                        timestamps: {
+                            justNow: labels.conversation.justNow,
+                            minutesAgo: labels.conversation.minutesAgo,
+                            hoursAgo: labels.conversation.hoursAgo
+                        },
+                        composer: {
+                            placeholder: isWithdrawn ? labels.issue.withdrawnPlaceholder : labels.issue.composerPlaceholder,
+                            send: labels.conversation.send,
+                            sendMessage: labels.conversation.send
+                        }
+                    }} />
+            </fieldset>
+            {isWithdrawn && <Message severity='secondary' text={labels.issue.withdrawnNotice} live={false} />}
+        </section>
+    );
+};