@sentry/junior-dashboard 0.274.0 → 0.276.0

package/src/client/conversations/ConversationPage.tsx

@@ -1,5 +1,4 @@
 import {
-  memo,
   useCallback,
   useEffect,
   useMemo,
@@ -11,39 +10,35 @@ import { useSearchParams } from "react-router";
 import type {
   ConversationDetailReport,
   ConversationFeed,
-  ConversationPendingMessagesReport,
-  InputImage,
 } from "@sentry/junior/api/schema";
 
 import {
-  useAppendConversationMessage,
   useArchiveConversation,
-  useCancelConversationPendingMessages,
-  useSteerConversationPendingMessages,
   useConversationData,
-  useStopConversationTurn,
   type PendingArchiveConversationUpdate,
 } from "./queries";
 import { conversationIsResponding } from "./transcript";
-import type { ConversationMailboxMessage } from "./conversationOutbox";
 import { buildConversationMarkdown } from "../markdownExport";
 import { CopyButton } from "../components/CopyButton";
-import { ConversationBrief } from "./ConversationBrief";
 import {
   CONVERSATION_EVENT_PARAM,
+  CONVERSATION_REVIEW_OPEN,
+  CONVERSATION_REVIEW_PARAM,
   CONVERSATION_TURN_PARAM,
   parseConversationEventSeq,
   turnStartedEventSeq,
 } from "./conversationRoutes";
-import {
-  ConversationComposer,
-  restoreStoredDraftText,
-  type ConversationComposerHandle,
-} from "./ConversationComposer";
-import { readStoredComposerImages } from "./ComposerImages";
-import { useDashboardCoreData } from "../api";
 import { ConversationHeader } from "./ConversationHeader";
+import { ConversationReplyFooter } from "./ConversationReplyFooter";
 import { ConversationDetails } from "./ConversationDetails";
+import { turnPrompts } from "./ConversationMemories";
+import {
+  ConversationMemoryContext,
+  memoryAnchorKey,
+  useConversationMemories,
+  type ConversationMemoryState,
+  type OpenMemoryPopover,
+} from "./conversationMemory";
 import { ConversationEventDetails } from "./ConversationEventDetails";
 import { ConversationEventLogLoading } from "./ConversationEventLog";
 import {
@@ -60,21 +55,20 @@ import {
 import { cn } from "../styles";
 import { ConversationForkLinks } from "./ConversationForkLinks";
 import { ConversationAgentTree } from "./ConversationAgentTree";
-import { ConversationHeaderMeta } from "./ConversationHeaderMeta";
 import { conversationLinks } from "./ConversationLinkedWork";
 import {
   ConversationAnnotations,
+  conversationCost,
+  conversationLocation,
   ConversationPrivacyChip,
   ConversationStats,
   hasConversationAnnotations,
   hasConversationStats,
-  PendingAuthorization,
 } from "./ConversationMeta";
 import {
   ConversationUsageBreakdown,
   hasConversationUsageBreakdown,
 } from "./ConversationUsageBreakdown";
-import { PendingMailboxStack } from "./PendingMailboxStack";
 import {
   buildConversations,
   conversationDetailTitle,
@@ -89,14 +83,12 @@ import {
   ParticipantAvatarStack,
 } from "../components/ParticipantAvatarStack";
 import { ChatLayout } from "./ChatLayout";
-import { ComposerDock } from "./ComposerDock";
-import { ConversationReviewBar } from "../review-desk/ConversationReviewBar";
-import { useReviewItemData } from "../review-desk/queries";
 import {
-  latestReviewItemId,
-  reviewItemWaitsForAnswer,
-} from "../review-desk/reviewItemFormat";
-import { useConfirmUnsentAnswers } from "../review-desk/UnsentAnswers";
+  QuickQuestionPanel,
+  QuickQuestionSelectionButton,
+  useQuickQuestionThread,
+} from "./QuickQuestion";
+import { latestReviewItemId } from "../review-desk/reviewItemFormat";
 import { Transcript } from "./TranscriptView";
 import {
   readConversationStartPosition,
@@ -156,9 +148,45 @@ export function ConversationPage(props: {
   const [detailsChoice, setDetailsChoice] = useState<boolean | undefined>(() =>
     eventOpen ? false : undefined,
   );
-  const detailsOpen = detailsChoice ?? detailsDefaultOpen;
+  // A sidebar review chip links here with the review param. It opens
+  // details at Needs you, even below the width where details open alone.
+  const reviewOpen =
+    searchParams.get(CONVERSATION_REVIEW_PARAM) === CONVERSATION_REVIEW_OPEN;
+  useEffect(() => {
+    if (reviewOpen) setDetailsChoice(true);
+  }, [reviewOpen]);
+  const detailsOpen = detailsChoice ?? (reviewOpen || detailsDefaultOpen);
+  const closeDetails = useCallback(() => {
+    setDetailsChoice(false);
+    setSearchParams(
+      (current) => {
+        if (!current.has(CONVERSATION_REVIEW_PARAM)) return current;
+        const next = new URLSearchParams(current);
+        next.delete(CONVERSATION_REVIEW_PARAM);
+        return next;
+      },
+      { replace: true },
+    );
+  }, [setSearchParams]);
   const [turnContext, setTurnContext] = useState<TurnContextSelection>();
-  const showDetails = detailsOpen && !eventOpen && !turnContext;
+  const [memoryPopover, setMemoryPopover] = useState<OpenMemoryPopover>();
+  // A memory chosen in details waits here until its transcript row renders.
+  const [memoryJump, setMemoryJump] = useState<OpenMemoryPopover>();
+  // The page stays mounted across Conversations. Memory state belongs to one.
+  const [memoryConversationId, setMemoryConversationId] = useState(
+    props.conversationId,
+  );
+  if (memoryConversationId !== props.conversationId) {
+    setMemoryConversationId(props.conversationId);
+    setMemoryPopover(undefined);
+    setMemoryJump(undefined);
+  }
+  const quickQuestion = useQuickQuestionThread(props.conversationId);
+  // Event details and turn context also show over a Quick question.
+  const showQuickQuestion =
+    Boolean(quickQuestion.thread) && !eventOpen && !turnContext;
+  const showDetails =
+    detailsOpen && !eventOpen && !turnContext && !quickQuestion.thread;
   const [viewState, setView] = useState<TranscriptViewMode>(() =>
     eventOpen ? "raw" : "rich",
   );
@@ -170,6 +198,15 @@ export function ConversationPage(props: {
   const summaries = props.data?.conversations.conversations ?? [];
   const conversations = buildConversations(summaries);
   const detail = useConversationData(conversationId);
+  const memoryList = useConversationMemories(conversationId).data;
+  const memoryState = useMemo<ConversationMemoryState>(
+    () => ({
+      list: memoryList,
+      open: memoryPopover,
+      setOpen: setMemoryPopover,
+    }),
+    [memoryList, memoryPopover],
+  );
   const archive = useArchiveConversation(conversationId);
   const markRead = useMarkConversationRead(conversationId);
   const readAtOpen = useReadPositionAtOpen(detail.data, detail.fetchedDetail);
@@ -291,6 +328,38 @@ export function ConversationPage(props: {
     if (linkedTurnSeq !== undefined) setSelectedEventSeq(linkedTurnSeq);
     else if (linkedTurnNotFound) setSelectedEventSeq(undefined);
   }, [linkedTurnNotFound, linkedTurnSeq, setSelectedEventSeq]);
+  // Show a chosen memory at its transcript row. Wait for the first page, then
+  // load earlier pages until the row renders, or stop when history ends.
+  const memoryPrompts = useMemo(
+    () => turnPrompts(transcript?.events),
+    [transcript?.events],
+  );
+  useEffect(() => {
+    if (!memoryJump || !transcript) return;
+    const anchor = pageRef.current?.querySelector(
+      `[data-memory-anchor="${CSS.escape(memoryAnchorKey(memoryJump))}"]`,
+    );
+    if (anchor) {
+      anchor.scrollIntoView({ block: "center" });
+      setMemoryPopover(memoryJump);
+      setMemoryJump(undefined);
+    } else if (
+      detail.hasPreviousPage &&
+      !detail.isLoadingPreviousPage &&
+      !detail.historyError
+    ) {
+      loadPreviousPageRef.current();
+    } else if (!detail.isLoadingPreviousPage) {
+      setMemoryJump(undefined);
+    }
+  }, [
+    detail.hasPreviousPage,
+    detail.historyError,
+    detail.isLoadingPreviousPage,
+    memoryJump,
+    transcript,
+    view,
+  ]);
   // Keep the panel while the transcript or a linked event loads, and for the
   // render before a found Turn link becomes an event link.
   const eventLoading =
@@ -365,7 +434,7 @@ export function ConversationPage(props: {
       ref={pageRef}
       className={cn(
         "grid h-full min-h-0 min-w-0",
-        (showDetails || showEvent || turnContext) &&
+        (showDetails || showEvent || turnContext || showQuickQuestion) &&
           "xl:grid-cols-[minmax(0,1fr)_25rem]",
       )}
     >
@@ -376,11 +445,14 @@ export function ConversationPage(props: {
               agentTree ? <ConversationAgentTree nodes={agentTree} /> : null
             }
             conversationId={conversationId}
+            cost={conversationCost(conversation, detail.data, "below")}
             detailsOpen={showDetails}
             onDetailsClick={() => {
               if (eventOpen) setSelectedEventSeq(undefined);
               setTurnContext(undefined);
-              setDetailsChoice(!showDetails);
+              quickQuestion.close();
+              if (showDetails) closeDetails();
+              else setDetailsChoice(true);
             }}
             forks={
               detail.data?.forkedFromConversationId ||
@@ -399,6 +471,7 @@ export function ConversationPage(props: {
                 label="Copy as Markdown"
                 copyingLabel="Preparing Markdown"
                 key={conversationDetail?.conversationId ?? "loading"}
+                layout="menu"
                 getText={
                   conversationDetail
                     ? async () =>
@@ -427,30 +500,14 @@ export function ConversationPage(props: {
               pending: archive.isPending,
             }}
             live={live}
-            meta={
-              <ConversationHeaderMeta
-                identity={identity}
-                stats={
-                  hasConversationStats({
-                    conversation,
-                    detail: detail.data,
-                    variant: "compact",
-                  }) ? (
-                    <ConversationStats
-                      conversation={conversation}
-                      detail={detail.data}
-                      variant="compact"
-                    />
-                  ) : null
-                }
-              />
-            }
+            location={conversationLocation(conversation, detail.data)}
             onSearchChange={setSearch}
             onViewChange={onViewChange}
             privacy={
               <ConversationPrivacyChip visibility={conversation?.visibility} />
             }
             search={search}
+            sentryConversationUrl={detail.data?.sentryConversationUrl}
             title={title}
             view={view}
           />
@@ -487,31 +544,35 @@ export function ConversationPage(props: {
                       data.
                     </div>
                   ) : null}
-                  <Transcript
-                    hasPreviousPage={detail.hasPreviousPage}
-                    historyError={detail.historyError}
-                    historyVersion={detail.historyVersion}
-                    lastReadSeq={readAtOpen.lastReadSeq}
-                    live={live}
-                    loadingPreviousPage={detail.isLoadingPreviousPage}
-                    onLoadPreviousPage={detail.loadPreviousPage}
-                    onRead={markRead}
-                    onSelectedEventSeqChange={setSelectedEventSeq}
-                    pendingMessages={detail.inlineMessages}
-                    pinRequestVersion={pinRequestVersion}
-                    responding={
-                      !detail.error && conversationIsResponding(transcript)
-                    }
-                    onOpenSubagentTranscript={onOpenSubagentTranscript}
-                    search={search}
-                    onSearchChange={setSearch}
-                    selectedEventSeq={selectedEventSeq}
-                    startAtUnread={readConversationStartPosition() === "unread"}
-                    transcript={transcript}
-                    turnContextPanel={turnContextPanel}
-                    unread={readAtOpen.unread}
-                    view={view}
-                  />
+                  <ConversationMemoryContext value={memoryState}>
+                    <Transcript
+                      hasPreviousPage={detail.hasPreviousPage}
+                      historyError={detail.historyError}
+                      historyVersion={detail.historyVersion}
+                      lastReadSeq={readAtOpen.lastReadSeq}
+                      live={live}
+                      loadingPreviousPage={detail.isLoadingPreviousPage}
+                      onLoadPreviousPage={detail.loadPreviousPage}
+                      onRead={markRead}
+                      onSelectedEventSeqChange={setSelectedEventSeq}
+                      pendingMessages={detail.inlineMessages}
+                      pinRequestVersion={pinRequestVersion}
+                      responding={
+                        !detail.error && conversationIsResponding(transcript)
+                      }
+                      onOpenSubagentTranscript={onOpenSubagentTranscript}
+                      search={search}
+                      onSearchChange={setSearch}
+                      selectedEventSeq={selectedEventSeq}
+                      startAtUnread={
+                        readConversationStartPosition() === "unread"
+                      }
+                      transcript={transcript}
+                      turnContextPanel={turnContextPanel}
+                      unread={readAtOpen.unread}
+                      view={view}
+                    />
+                  </ConversationMemoryContext>
                 </>
               )}
             </div>
@@ -549,41 +610,51 @@ export function ConversationPage(props: {
         }
       />
       {showDetails ? (
-        <ConversationDetails
-          conversationId={conversationId}
-          identity={identity}
-          sentryConversationUrl={detail.data?.sentryConversationUrl}
-          onClose={() => setDetailsChoice(false)}
-          onOpenSubagent={setSubagentTarget}
-          links={conversationLinks(detail.data)}
-          brief={
-            detail.data?.brief ? (
-              <ConversationBrief brief={detail.data.brief} variant="summary" />
-            ) : null
-          }
-          overview={
-            hasConversationStats({
-              conversation,
-              detail: detail.data,
-            }) ? (
-              <ConversationStats
-                conversation={conversation}
-                detail={detail.data}
-              />
-            ) : null
-          }
-          usage={
-            hasConversationUsageBreakdown({
-              conversation,
-              detail: detail.data,
-            }) ? (
-              <ConversationUsageBreakdown
-                conversation={conversation}
-                detail={detail.data}
-              />
-            ) : null
-          }
-        />
+        <ConversationMemoryContext value={memoryState}>
+          <ConversationDetails
+            brief={detail.data?.brief}
+            conversationId={conversationId}
+            highlightReview={reviewOpen}
+            identity={identity}
+            onClose={closeDetails}
+            onOpenSubagent={setSubagentTarget}
+            memoryPrompts={memoryPrompts}
+            onSelectMemory={(entry) => {
+              // Memory rows show only in the Conversation view, and search
+              // can hide them.
+              if (view !== "rich") onViewChange("rich");
+              setSearch("");
+              setMemoryJump({
+                memoryId: entry.memory.id,
+                source: entry.source,
+                turnId: entry.turnId,
+              });
+            }}
+            links={conversationLinks(detail.data)}
+            overview={
+              hasConversationStats({
+                conversation,
+                detail: detail.data,
+              }) ? (
+                <ConversationStats
+                  conversation={conversation}
+                  detail={detail.data}
+                />
+              ) : null
+            }
+            usage={
+              hasConversationUsageBreakdown({
+                conversation,
+                detail: detail.data,
+              }) ? (
+                <ConversationUsageBreakdown
+                  conversation={conversation}
+                  detail={detail.data}
+                />
+              ) : null
+            }
+          />
+        </ConversationMemoryContext>
       ) : null}
       {showEvent ? (
         <ConversationEventDetails
@@ -605,6 +676,24 @@ export function ConversationPage(props: {
           />
         </TranscriptSearchProvider>
       ) : null}
+      {showQuickQuestion && quickQuestion.thread ? (
+        <QuickQuestionPanel
+          conversationId={conversationId}
+          error={quickQuestion.error}
+          onClose={quickQuestion.close}
+          onSubmit={quickQuestion.submit}
+          pending={quickQuestion.pending}
+          thread={quickQuestion.thread}
+        />
+      ) : null}
+      <QuickQuestionSelectionButton
+        onAsk={(selection) => {
+          if (eventOpen) setSelectedEventSeq(undefined);
+          setTurnContext(undefined);
+          quickQuestion.open(selection);
+        }}
+        rootRef={pageRef}
+      />
       <SubagentTranscriptDrawer
         onClose={() => setSubagentTarget(undefined)}
         target={subagentTarget}
@@ -613,320 +702,6 @@ export function ConversationPage(props: {
   );
 }
 
-/**
- * Own mutation state and mailbox chrome outside the page tree that re-renders
- * on every live transcript poll. Keeps composer props stable while typing.
- *
- * Memoized so metadata-only polls that keep mailbox identity stable skip the
- * footer tree. Fast chat UIs isolate the composer the same way.
- */
-const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
-  authors?: ConversationDetailReport["authors"];
-  committedMessageIds: readonly string[];
-  conversationId: string;
-  onPinRequest: () => void;
-  pendingAuthorization?: ConversationPendingMessagesReport["authorization"];
-  pendingGeneratedAtRef: { current: string | undefined };
-  pendingMessages: readonly ConversationMailboxMessage[];
-  /** The last Review item that Junior added in the transcript. */
-  reviewItemId?: string;
-  /**
-   * True when history is live and no Turn has started, so the next Turn will
-   * read a new send at once.
-   */
-  sendsInline: boolean;
-  /** True while the conversation has a Turn that a stop can end. */
-  stoppable: boolean;
-}) {
-  const appendMessage = useAppendConversationMessage(props.conversationId);
-  // A message closes the review items that it answers. Ask before it drops
-  // answers that the reader did not send.
-  const unsentAnswers = useConfirmUnsentAnswers();
-  const stopTurn = useStopConversationTurn(props.conversationId);
-  const stopTurnRef = useRef(stopTurn);
-  stopTurnRef.current = stopTurn;
-  const cancelPendingMessages = useCancelConversationPendingMessages(
-    props.conversationId,
-  );
-  const [editTargetInboundMessageId, setEditTargetInboundMessageId] =
-    useState<string>();
-  const [queueActionError, setQueueActionError] = useState<string>();
-  // While Junior waits for an answer, hide the message box, the review bar,
-  // and the queued messages, so the reader answers in the question and does
-  // not type the answer as a new message.
-  // Dismiss on the question closes the item and shows the message box again.
-  // The message box stays mounted, so its text and images stay, and it does
-  // not hide while it has focus.
-  const reviewItem = useReviewItemData(props.reviewItemId).data;
-  const [composerShownForItemId, setComposerShownForItemId] =
-    useState<string>();
-  const [composerFocused, setComposerFocused] = useState(false);
-  const question =
-    reviewItem &&
-    !props.stoppable &&
-    !composerFocused &&
-    reviewItemWaitsForAnswer(reviewItem) &&
-    composerShownForItemId !== reviewItem.id
-      ? reviewItem
-      : undefined;
-  // The message box can show only because it has focus. Using the review bar
-  // or queued messages moves focus out of it, so keep them shown for this item.
-  const keepComposerShown = () => {
-    if (composerFocused && reviewItem && reviewItemWaitsForAnswer(reviewItem)) {
-      setComposerShownForItemId(reviewItem.id);
-    }
-  };
-  // Keep submit identity stable across mutation status flips so the memoized
-  // composer does not re-render while the reader is still typing.
-  const appendMessageRef = useRef(appendMessage);
-  appendMessageRef.current = appendMessage;
-  const cancelPendingMessagesRef = useRef(cancelPendingMessages);
-  cancelPendingMessagesRef.current = cancelPendingMessages;
-  const onPinRequestRef = useRef(props.onPinRequest);
-  onPinRequestRef.current = props.onPinRequest;
-  const pendingMessageVersion = props.pendingMessages
-    .map((message) =>
-      [
-        message.inboundMessageId,
-        message.messageId,
-        message.clientStatus,
-        message.delivery,
-      ].join(":"),
-    )
-    .join("|");
-  const pendingMessageVersionRef = useRef(pendingMessageVersion);
-  useEffect(() => {
-    if (pendingMessageVersionRef.current === pendingMessageVersion) return;
-    pendingMessageVersionRef.current = pendingMessageVersion;
-    if (!window.matchMedia("(max-width: 767px)").matches) return;
-    onPinRequestRef.current();
-  }, [pendingMessageVersion]);
-  // No Turn runs and nothing waits in the queue, so the next send would
-  // leave the queue almost at once. Show it in the transcript instead. A
-  // conversation can be active before its Turn starts; that still counts.
-  const committedIds = new Set(props.committedMessageIds);
-  const sendInlineRef = useRef(false);
-  sendInlineRef.current =
-    props.sendsInline &&
-    !props.pendingMessages.some(
-      (message) => !committedIds.has(message.messageId),
-    );
-  const onSubmit = useCallback(
-    async (message: string, idempotencyKey: string, images?: InputImage[]) => {
-      await appendMessageRef.current.mutateAsync({
-        idempotencyKey,
-        inline: sendInlineRef.current,
-        message,
-        images,
-      });
-    },
-    [],
-  );
-  const onRetry = useCallback((message: ConversationMailboxMessage) => {
-    if (!message.idempotencyKey || (!message.text && !message.images?.length))
-      return;
-    void appendMessageRef.current.mutateAsync({
-      idempotencyKey: message.idempotencyKey,
-      message: message.text ?? "",
-      images: message.images,
-    });
-  }, []);
-  const onSubmitStart = useCallback(() => {
-    // Keep an in-flight remove intact so optimistic cache rollback stays coherent.
-    if (!cancelPendingMessagesRef.current.isPending) {
-      cancelPendingMessagesRef.current.reset();
-    }
-    if (!stopTurnRef.current.isPending) stopTurnRef.current.reset();
-    setQueueActionError(undefined);
-    onPinRequestRef.current();
-  }, []);
-  const cancellableMessageIds = props.pendingMessages
-    .filter((message) => message.clientStatus === undefined)
-    .map((message) => message.inboundMessageId);
-  const onCancelMessage = useCallback(
-    (message: ConversationMailboxMessage) => {
-      const receivedBefore = props.pendingGeneratedAtRef.current;
-      if (!receivedBefore) return;
-      cancelPendingMessagesRef.current.mutate({
-        inboundMessageIds: [message.inboundMessageId],
-        receivedBefore,
-      });
-    },
-    [props.pendingGeneratedAtRef],
-  );
-  const cancelTargetInboundMessageId =
-    cancelPendingMessages.variables?.inboundMessageIds[0];
-  const cancelError = Boolean(
-    cancelPendingMessages.error &&
-    cancelPendingMessages.variables?.inboundMessageIds.some((id) =>
-      cancellableMessageIds.includes(id),
-    ),
-  );
-
-  // Edit uses its own cancel mutation so remove errors stay on remove.
-  const editCancel = useCancelConversationPendingMessages(props.conversationId);
-  const editCancelRef = useRef(editCancel);
-  editCancelRef.current = editCancel;
-  const editingRef = useRef(false);
-  const composerRef = useRef<ConversationComposerHandle>(null);
-  const viewerEmail = useDashboardCoreData().data?.me.user.email;
-  const onEditMessage = useCallback(
-    async (message: ConversationMailboxMessage) => {
-      const receivedBefore = props.pendingGeneratedAtRef.current;
-      // The image read runs before the cancel starts, so isPending alone does
-      // not stop a second click.
-      if (!receivedBefore || editingRef.current) return;
-      editingRef.current = true;
-      const inboundMessageId = message.inboundMessageId;
-      setEditTargetInboundMessageId(inboundMessageId);
-      setQueueActionError(undefined);
-      try {
-        // Read images first. A failed read must leave the message queued.
-        const images = await readStoredComposerImages(
-          props.conversationId,
-          message.attachments,
-        );
-        // The reader left during the read. Keep the message in the queue.
-        if (!composerRef.current) return;
-        // Check before the cancel. After it, images that do not fit are lost.
-        if (!composerRef.current.canRestoreImages(images)) {
-          setQueueActionError("Remove some draft images to edit that message.");
-          return;
-        }
-        const result = await editCancelRef.current.mutateAsync({
-          inboundMessageIds: [inboundMessageId],
-          receivedBefore,
-        });
-        // Junior can read the message before the cancel lands. Then it is
-        // already in the Conversation and there is nothing to edit.
-        if (!result.cancelledInboundMessageIds.includes(inboundMessageId)) {
-          setQueueActionError("Junior already read that message.");
-          return;
-        }
-        const restored = { images, text: message.text ?? "" };
-        if (composerRef.current) {
-          composerRef.current.restoreMessage(restored);
-        } else {
-          // The reader left during the cancel. Keep the text in the saved
-          // draft so it is there when they come back.
-          restoreStoredDraftText(props.conversationId, restored.text);
-        }
-      } catch {
-        setQueueActionError("Could not edit the queued message. Try again.");
-      } finally {
-        editingRef.current = false;
-        setEditTargetInboundMessageId(undefined);
-      }
-    },
-    [props.conversationId, props.pendingGeneratedAtRef],
-  );
-
-  const steerPendingMessages = useSteerConversationPendingMessages(
-    props.conversationId,
-  );
-  const steerPendingMessagesRef = useRef(steerPendingMessages);
-  steerPendingMessagesRef.current = steerPendingMessages;
-  const onSteerMessage = useCallback((message: ConversationMailboxMessage) => {
-    if (steerPendingMessagesRef.current.isPending) return;
-    setQueueActionError(undefined);
-    steerPendingMessagesRef.current.mutate(
-      { inboundMessageIds: [message.inboundMessageId] },
-      {
-        onError: () =>
-          setQueueActionError(
-            "Could not send the queued message now. Try again.",
-          ),
-      },
-    );
-  }, []);
-  const steerTargetInboundMessageId = steerPendingMessages.isPending
-    ? steerPendingMessages.variables?.inboundMessageIds[0]
-    : undefined;
-
-  const onStop = useCallback(async () => {
-    const result = await stopTurnRef.current.mutateAsync();
-    const restored = result.stoppedMessages.map((message) => message.text);
-    return restored.length ? restored.join("\n") : undefined;
-  }, []);
-
-  const onMailboxLayoutChange = useCallback(() => {
-    if (!window.matchMedia("(max-width: 767px)").matches) return;
-    onPinRequestRef.current();
-  }, []);
-  // Mobile keyboard open shrinks the transcript. Focus must re-pin the latest
-  // message so the reader does not stay stuck above the docked composer.
-  const onComposerFocus = useCallback(() => {
-    if (!window.matchMedia("(max-width: 767px)").matches) return;
-    onPinRequestRef.current();
-  }, []);
-
-  return (
-    <ComposerDock
-      above={
-        <>
-          {props.pendingAuthorization ? (
-            <PendingAuthorization authorization={props.pendingAuthorization} />
-          ) : null}
-          {/* The review bar and queued messages hide with the message box, so
-              the question is the last thing above the dock. */}
-          <div
-            hidden={Boolean(question)}
-            onFocus={keepComposerShown}
-            onPointerDown={keepComposerShown}
-          >
-            <ConversationReviewBar conversationId={props.conversationId} />
-            <PendingMailboxStack
-              authors={props.authors}
-              cancelError={cancelError}
-              cancelPending={cancelPendingMessages.isPending}
-              cancelTargetInboundMessageId={cancelTargetInboundMessageId}
-              committedMessageIds={props.committedMessageIds}
-              conversationId={props.conversationId}
-              editTargetInboundMessageId={editTargetInboundMessageId}
-              messages={props.pendingMessages}
-              onCancelMessage={onCancelMessage}
-              onEditMessage={onEditMessage}
-              onLayoutChange={onMailboxLayoutChange}
-              onRetry={onRetry}
-              onSteerMessage={props.stoppable ? onSteerMessage : undefined}
-              steerTargetInboundMessageId={steerTargetInboundMessageId}
-              viewerEmail={viewerEmail}
-            />
-          </div>
-          {unsentAnswers.dialog}
-        </>
-      }
-    >
-      <div
-        hidden={Boolean(question)}
-        onBlur={(event) => {
-          if (!event.currentTarget.contains(event.relatedTarget)) {
-            setComposerFocused(false);
-          }
-        }}
-        onFocus={() => setComposerFocused(true)}
-      >
-        <ConversationComposer
-          confirmSubmit={unsentAnswers.confirmSubmit}
-          draftId={props.conversationId}
-          error={
-            queueActionError ??
-            (stopTurn.error ? "Could not stop Junior. Try again." : undefined)
-          }
-          ref={composerRef}
-          label="Continue this conversation"
-          submitLabel="Send"
-          onFocus={onComposerFocus}
-          onStop={props.stoppable ? onStop : undefined}
-          stopPending={stopTurn.isPending}
-          onSubmitStart={onSubmitStart}
-          onSubmit={onSubmit}
-        />
-      </div>
-    </ComposerDock>
-  );
-});
-
 function applyPendingArchiveUpdate(
   conversation: Conversation | undefined,
   update: PendingArchiveConversationUpdate | undefined,