@sentry/junior-dashboard 0.273.0 → 0.275.0

package/src/client/conversations/ConversationPage.tsx

@@ -1,5 +1,4 @@
 import {
-  memo,
   useCallback,
   useEffect,
   useMemo,
@@ -11,38 +10,26 @@ 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 { ConversationEventDetails } from "./ConversationEventDetails";
 import { ConversationEventLogLoading } from "./ConversationEventLog";
@@ -60,21 +47,19 @@ import {
 import { cn } from "../styles";
 import { ConversationForkLinks } from "./ConversationForkLinks";
 import { ConversationAgentTree } from "./ConversationAgentTree";
-import { ConversationHeaderMeta } from "./ConversationHeaderMeta";
 import { conversationLinks } from "./ConversationLinkedWork";
 import {
   ConversationAnnotations,
+  conversationLocation,
   ConversationPrivacyChip,
   ConversationStats,
   hasConversationAnnotations,
   hasConversationStats,
-  PendingAuthorization,
 } from "./ConversationMeta";
 import {
   ConversationUsageBreakdown,
   hasConversationUsageBreakdown,
 } from "./ConversationUsageBreakdown";
-import { PendingMailboxStack } from "./PendingMailboxStack";
 import {
   buildConversations,
   conversationDetailTitle,
@@ -89,14 +74,7 @@ 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";
+import { latestReviewItemId } from "../review-desk/reviewItemFormat";
 import { Transcript } from "./TranscriptView";
 import {
   readConversationStartPosition,
@@ -156,7 +134,26 @@ 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 [viewState, setView] = useState<TranscriptViewMode>(() =>
@@ -380,7 +377,8 @@ export function ConversationPage(props: {
             onDetailsClick={() => {
               if (eventOpen) setSelectedEventSeq(undefined);
               setTurnContext(undefined);
-              setDetailsChoice(!showDetails);
+              if (showDetails) closeDetails();
+              else setDetailsChoice(true);
             }}
             forks={
               detail.data?.forkedFromConversationId ||
@@ -399,6 +397,7 @@ export function ConversationPage(props: {
                 label="Copy as Markdown"
                 copyingLabel="Preparing Markdown"
                 key={conversationDetail?.conversationId ?? "loading"}
+                layout="menu"
                 getText={
                   conversationDetail
                     ? async () =>
@@ -427,30 +426,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}
           />
@@ -550,17 +533,13 @@ export function ConversationPage(props: {
       />
       {showDetails ? (
         <ConversationDetails
+          brief={detail.data?.brief}
           conversationId={conversationId}
+          highlightReview={reviewOpen}
           identity={identity}
-          sentryConversationUrl={detail.data?.sentryConversationUrl}
-          onClose={() => setDetailsChoice(false)}
+          onClose={closeDetails}
           onOpenSubagent={setSubagentTarget}
           links={conversationLinks(detail.data)}
-          brief={
-            detail.data?.brief ? (
-              <ConversationBrief brief={detail.data.brief} variant="summary" />
-            ) : null
-          }
           overview={
             hasConversationStats({
               conversation,
@@ -613,320 +592,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,