@xinghunm/ai-chat 0.2.1 → 0.2.2

package/dist/index.js

@@ -45,7 +45,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/ai-chat/index.tsx
-var import_styled18 = __toESM(require("@emotion/styled"));
+var import_styled17 = __toESM(require("@emotion/styled"));
 var import_compass_ui4 = require("@xinghunm/compass-ui");
 
 // src/components/ai-chat-provider/index.tsx
@@ -636,8 +636,8 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-var import_react11 = require("react");
-var import_styled10 = __toESM(require("@emotion/styled"));
+var import_react10 = require("react");
+var import_styled9 = __toESM(require("@emotion/styled"));
 
 // src/context/use-chat-context.ts
 var import_react3 = require("react");
@@ -655,22 +655,6 @@ var useChatStore = (selector) => {
 
 // src/components/chat-thread/lib/chat-thread.ts
 var CHAT_THREAD_SCROLL_TOP_GAP = 16;
-var findLatestUserMessageId = (historyMessages) => {
-  for (let index = historyMessages.length - 1; index >= 0; index -= 1) {
-    if (historyMessages[index]?.role === "user") {
-      return historyMessages[index]?.id;
-    }
-  }
-  return void 0;
-};
-var calculateChatThreadScrollSpacerHeight = ({
-  containerClientHeight,
-  containerScrollHeight,
-  targetOffsetTop
-}) => Math.max(
-  0,
-  targetOffsetTop - CHAT_THREAD_SCROLL_TOP_GAP - (containerScrollHeight - containerClientHeight)
-);
 
 // src/components/chat-thread/components/chat-message-item.tsx
 var import_react8 = require("react");
@@ -902,11 +886,21 @@ var useChatMessageReveal = (message) => {
   }, [batchedTargetUnitCount, displayedUnitCount, isAssistantStreaming, message.role]);
   const settledContent = isFreshBlockActive ? contentBlocks.slice(0, -1).join("\n\n") : displayedContent;
   const freshContent = isFreshBlockActive ? contentBlocks[contentBlocks.length - 1] ?? "" : "";
+  const displayedBlocks = isAssistantStreaming && contentBlocks.length > 1 ? contentBlocks.map((content, index) => ({
+    content,
+    tone: isFreshBlockActive && index === contentBlocks.length - 1 ? "fresh" : "settled"
+  })) : [
+    {
+      content: displayedContent,
+      tone: "settled"
+    }
+  ];
   return {
     isAssistantStreaming,
     displayedContent,
     settledContent,
-    freshContent
+    freshContent,
+    displayedBlocks
   };
 };
 
@@ -1854,7 +1848,7 @@ var ChatMessageItemView = ({
 }) => {
   const { labels } = useChatContext();
   const [activeImage, setActiveImage] = (0, import_react8.useState)(void 0);
-  const { displayedContent, freshContent, isAssistantStreaming, settledContent } = useChatMessageReveal(message);
+  const { displayedBlocks, displayedContent, freshContent, isAssistantStreaming, settledContent } = useChatMessageReveal(message);
   const isStoppedAssistant = message.role === "assistant" && message.status === "stopped";
   const attachments = message.attachments ?? [];
   const blocks = message.blocks ?? [];
@@ -1923,9 +1917,17 @@ var ChatMessageItemView = ({
     }
   };
   const renderTextContent = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    settledContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(settledContent) }) : null,
-    freshContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentBlock, { "data-testid": "chat-message-fresh-block", "data-block-tone": "fresh", children: renderMarkdownContent(freshContent) }) : null,
-    !settledContent && !freshContent && hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(displayedContent) }) : null
+    displayedBlocks.filter((block) => block.content).map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ContentBlock,
+      {
+        "data-testid": block.tone === "fresh" ? "chat-message-fresh-block" : "chat-message-settled-block",
+        "data-block-tone": block.tone,
+        "data-block-index": index,
+        children: renderMarkdownContent(block.content)
+      },
+      `${block.tone}-${index}`
+    )),
+    !displayedBlocks.some((block) => block.content) && !settledContent && !freshContent && hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(displayedContent) }) : null
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Bubble, { "data-role": message.role, "data-status": message.status ?? "done", children: [
@@ -2189,65 +2191,21 @@ var StreamingCaret = import_styled7.default.span`
   animation: ${caretBlink} 0.9s steps(1) infinite;
 `;
 
-// src/components/chat-thread/components/chat-thread-history-list.tsx
-var import_react10 = require("react");
+// src/components/chat-thread/components/chat-thread-empty-state.tsx
 var import_styled8 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
-var ChatThreadHistoryList = (0, import_react10.memo)(
-  ({
-    mode,
-    historyMessages,
-    latestUserMessageId,
-    latestUserMessageRef,
-    onConfirmationSubmit,
-    onQuestionnaireSubmit,
-    renderMessageBlock
-  }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HistoryGroup, { "data-testid": "chat-thread-history", children: historyMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    MessageSlot,
-    {
-      ref: message.id === latestUserMessageId ? latestUserMessageRef : null,
-      "data-testid": message.id === latestUserMessageId ? "chat-latest-user-anchor" : void 0,
-      style: message.id === latestUserMessageId ? {
-        scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px`
-      } : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        ChatMessageItem,
-        {
-          mode,
-          message,
-          onConfirmationSubmit,
-          onQuestionnaireSubmit,
-          renderMessageBlock
-        }
-      )
-    },
-    message.id
-  )) })
-);
-ChatThreadHistoryList.displayName = "ChatThreadHistoryList";
-var HistoryGroup = import_styled8.default.div`
-  display: contents;
-`;
-var MessageSlot = import_styled8.default.div`
-  display: flex;
-  align-items: flex-start;
-`;
-
-// src/components/chat-thread/components/chat-thread-empty-state.tsx
-var import_styled9 = __toESM(require("@emotion/styled"));
-var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
 var ChatThreadEmptyState = () => {
   const { labels } = useChatContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(EmptyShell, { "data-testid": "chat-empty-hero", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(HeroMark, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HeroOrbit, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HeroCore, { children: "AI" })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(EmptyShell, { "data-testid": "chat-empty-hero", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(HeroMark, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeroOrbit, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeroCore, { children: "AI" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HeroTitle, { children: labels.emptyStateTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HeroSubtitle, { children: labels.emptyStateSubtitle })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeroTitle, { children: labels.emptyStateTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeroSubtitle, { children: labels.emptyStateSubtitle })
   ] });
 };
-var EmptyShell = import_styled9.default.div`
+var EmptyShell = import_styled8.default.div`
   flex: 1;
   min-height: 0;
   display: flex;
@@ -2257,7 +2215,7 @@ var EmptyShell = import_styled9.default.div`
   gap: 16px;
   padding: 48px 24px 24px;
 `;
-var HeroMark = import_styled9.default.div`
+var HeroMark = import_styled8.default.div`
   position: relative;
   width: 108px;
   height: 108px;
@@ -2265,7 +2223,7 @@ var HeroMark = import_styled9.default.div`
   display: grid;
   place-items: center;
 `;
-var HeroOrbit = import_styled9.default.div`
+var HeroOrbit = import_styled8.default.div`
   position: absolute;
   inset: 20px;
   border-radius: 50%;
@@ -2288,7 +2246,7 @@ var HeroOrbit = import_styled9.default.div`
     transform: rotate(-22deg);
   }
 `;
-var HeroCore = import_styled9.default.div`
+var HeroCore = import_styled8.default.div`
   position: relative;
   z-index: 1;
   font-size: 28px;
@@ -2298,13 +2256,13 @@ var HeroCore = import_styled9.default.div`
   color: rgba(242, 244, 255, 0.96);
   text-shadow: 0 0 16px rgba(98, 116, 255, 0.65);
 `;
-var HeroTitle = import_styled9.default.p`
+var HeroTitle = import_styled8.default.p`
   margin: 0;
   color: rgba(255, 255, 255, 0.88);
   font-size: 16px;
   line-height: 24px;
 `;
-var HeroSubtitle = import_styled9.default.p`
+var HeroSubtitle = import_styled8.default.p`
   margin: 0;
   color: rgba(255, 255, 255, 0.72);
   font-size: 14px;
@@ -2312,7 +2270,74 @@ var HeroSubtitle = import_styled9.default.p`
 `;
 
 // src/components/chat-thread/index.tsx
-var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
+var renderChatMessage = ({
+  message,
+  mode,
+  onConfirmationSubmit,
+  onQuestionnaireSubmit,
+  renderMessageBlock
+}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  ChatMessageItem,
+  {
+    mode,
+    message,
+    onConfirmationSubmit,
+    onQuestionnaireSubmit,
+    renderMessageBlock
+  }
+);
+var renderErrorState = ({
+  error,
+  onRetry,
+  retryButtonLabel
+}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ErrorState, { "data-testid": "chat-thread-error-state", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ErrorText, { children: error }),
+  onRetry ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ErrorActions, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RetryButton, { type: "button", "data-testid": "chat-thread-retry", onClick: onRetry, children: retryButtonLabel }) }) : null
+] });
+var groupConversationTurns = (historyMessages, streamingMessage) => {
+  const turns = [];
+  let currentTurn = null;
+  historyMessages.forEach((message) => {
+    if (message.role === "user") {
+      currentTurn = {
+        id: message.id,
+        userMessage: message,
+        responseMessages: []
+      };
+      turns.push(currentTurn);
+      return;
+    }
+    if (!currentTurn) {
+      currentTurn = {
+        id: `assistant-turn-${message.id}`,
+        responseMessages: [message]
+      };
+      turns.push(currentTurn);
+      return;
+    }
+    currentTurn.responseMessages.push(message);
+  });
+  if (!streamingMessage) {
+    return turns;
+  }
+  const lastTurn = turns[turns.length - 1];
+  if (lastTurn) {
+    return [
+      ...turns.slice(0, -1),
+      {
+        ...lastTurn,
+        responseMessages: [...lastTurn.responseMessages, streamingMessage]
+      }
+    ];
+  }
+  return [
+    {
+      id: `assistant-turn-${streamingMessage.id}`,
+      responseMessages: [streamingMessage]
+    }
+  ];
+};
 var ChatThreadView = ({
   activeSessionMode = DEFAULT_CHAT_AGENT_MODE,
   historyMessages,
@@ -2324,45 +2349,56 @@ var ChatThreadView = ({
   onQuestionnaireSubmit,
   renderMessageBlock
 }) => {
-  const containerRef = (0, import_react11.useRef)(null);
-  const latestUserMessageId = (0, import_react11.useMemo)(
-    () => findLatestUserMessageId(historyMessages),
-    [historyMessages]
+  const containerRef = (0, import_react10.useRef)(null);
+  const conversationTurns = (0, import_react10.useMemo)(
+    () => groupConversationTurns(historyMessages, streamingMessage),
+    [historyMessages, streamingMessage]
   );
-  const latestUserMessageRef = (0, import_react11.useRef)(null);
-  const pendingScrollUserMessageIdRef = (0, import_react11.useRef)(void 0);
-  const reservedSpaceFrameRef = (0, import_react11.useRef)(null);
-  const [latestUserMessageReservedSpace, setLatestUserMessageReservedSpace] = (0, import_react11.useState)({ messageId: void 0, value: 0 });
-  const reservedPaddingBottom = 24 + (latestUserMessageReservedSpace.messageId === latestUserMessageId ? latestUserMessageReservedSpace.value : 0);
-  const measureLatestUserMessageReservedSpace = (0, import_react11.useCallback)((messageId) => {
+  const latestTurn = conversationTurns[conversationTurns.length - 1];
+  const previousTurns = conversationTurns.slice(0, -1);
+  const latestUserMessageId = latestTurn?.userMessage?.id;
+  const latestUserMessageRef = (0, import_react10.useRef)(null);
+  const reservedSpaceFrameRef = (0, import_react10.useRef)(null);
+  const [latestTurnMinHeight, setLatestTurnMinHeight] = (0, import_react10.useState)(0);
+  const measureLatestTurnMinHeight = (0, import_react10.useCallback)(() => {
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const computedStyle = window.getComputedStyle(container);
+    const paddingTop = Number.parseFloat(computedStyle.paddingTop || "0") || 0;
+    const paddingBottom = Number.parseFloat(computedStyle.paddingBottom || "0") || 0;
+    const nextMinHeight = Math.max(0, container.clientHeight - paddingTop - paddingBottom);
+    setLatestTurnMinHeight((current) => current === nextMinHeight ? current : nextMinHeight);
+  }, []);
+  const scrollLatestUserMessageToTop = (0, import_react10.useCallback)(() => {
     const container = containerRef.current;
     const target = latestUserMessageRef.current;
     if (!container || !target)
       return;
-    const reservedHeight = calculateChatThreadScrollSpacerHeight({
-      containerClientHeight: container.clientHeight,
-      containerScrollHeight: container.scrollHeight,
-      targetOffsetTop: target.offsetTop
-    });
-    setLatestUserMessageReservedSpace((current) => {
-      const next = reservedHeight > 0 ? reservedHeight : 0;
-      if (current.messageId === messageId && current.value === next)
-        return current;
-      return { messageId, value: next };
-    });
+    const containerRect = container.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    const nextScrollTop = Math.max(
+      0,
+      container.scrollTop + (targetRect.top - containerRect.top) - CHAT_THREAD_SCROLL_TOP_GAP
+    );
+    if (typeof container.scrollTo === "function") {
+      container.scrollTo({
+        top: nextScrollTop,
+        behavior: "auto"
+      });
+      return;
+    }
+    container.scrollTop = nextScrollTop;
   }, []);
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react10.useLayoutEffect)(() => {
     if (reservedSpaceFrameRef.current !== null) {
       window.cancelAnimationFrame(reservedSpaceFrameRef.current);
       reservedSpaceFrameRef.current = null;
     }
     if (!latestUserMessageId) {
-      pendingScrollUserMessageIdRef.current = void 0;
       reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
         reservedSpaceFrameRef.current = null;
-        setLatestUserMessageReservedSpace(
-          (current) => current.messageId === void 0 && current.value === 0 ? current : { messageId: void 0, value: 0 }
-        );
+        setLatestTurnMinHeight((current) => current === 0 ? current : 0);
       });
       return () => {
         if (reservedSpaceFrameRef.current !== null) {
@@ -2371,10 +2407,10 @@ var ChatThreadView = ({
         }
       };
     }
-    pendingScrollUserMessageIdRef.current = latestUserMessageId;
     reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
       reservedSpaceFrameRef.current = null;
-      measureLatestUserMessageReservedSpace(latestUserMessageId);
+      measureLatestTurnMinHeight();
+      scrollLatestUserMessageToTop();
     });
     return () => {
       if (reservedSpaceFrameRef.current !== null) {
@@ -2382,51 +2418,79 @@ var ChatThreadView = ({
         reservedSpaceFrameRef.current = null;
       }
     };
-  }, [latestUserMessageId, measureLatestUserMessageReservedSpace]);
-  (0, import_react11.useLayoutEffect)(() => {
-    if (!latestUserMessageId || pendingScrollUserMessageIdRef.current !== latestUserMessageId)
+  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
+  (0, import_react10.useLayoutEffect)(() => {
+    if (!latestUserMessageId)
       return;
-    if (latestUserMessageReservedSpace.messageId !== latestUserMessageId)
-      return;
-    latestUserMessageRef.current?.scrollIntoView({ block: "start", behavior: "smooth" });
-    pendingScrollUserMessageIdRef.current = void 0;
-  }, [latestUserMessageId, latestUserMessageReservedSpace]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    Container,
-    {
-      ref: containerRef,
-      "data-testid": "chat-thread",
-      style: { paddingBottom: `${reservedPaddingBottom}px` },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          ChatThreadHistoryList,
-          {
-            mode: activeSessionMode,
-            historyMessages,
-            latestUserMessageId,
-            latestUserMessageRef,
-            onConfirmationSubmit,
-            onQuestionnaireSubmit,
-            renderMessageBlock
-          }
-        ),
-        streamingMessage ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StreamingGroup, { "data-testid": "chat-thread-streaming", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MessageSlot2, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          ChatMessageItem,
-          {
+    const handleResize = () => {
+      measureLatestTurnMinHeight();
+      scrollLatestUserMessageToTop();
+    };
+    const container = containerRef.current;
+    let resizeObserver = null;
+    if (container && typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        handleResize();
+      });
+      resizeObserver.observe(container);
+    }
+    window.addEventListener("resize", handleResize);
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Container, { ref: containerRef, "data-testid": "chat-thread", children: [
+    previousTurns.map((turn) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
+      turn.userMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
+        message: turn.userMessage,
+        mode: activeSessionMode,
+        onConfirmationSubmit,
+        onQuestionnaireSubmit,
+        renderMessageBlock
+      }) }) : null,
+      turn.responseMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
+        message,
+        mode: activeSessionMode,
+        onConfirmationSubmit,
+        onQuestionnaireSubmit,
+        renderMessageBlock
+      }) }, message.id))
+    ] }, turn.id)),
+    latestTurn ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      ConversationTurn,
+      {
+        "data-testid": "chat-thread-latest-turn",
+        style: latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
+        children: [
+          latestTurn.userMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            MessageSlot,
+            {
+              ref: latestUserMessageRef,
+              "data-testid": "chat-latest-user-anchor",
+              style: { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` },
+              children: renderChatMessage({
+                message: latestTurn.userMessage,
+                mode: activeSessionMode,
+                onConfirmationSubmit,
+                onQuestionnaireSubmit,
+                renderMessageBlock
+              })
+            }
+          ) : null,
+          latestTurn.responseMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
+            message,
             mode: activeSessionMode,
-            message: streamingMessage,
             onConfirmationSubmit,
             onQuestionnaireSubmit,
             renderMessageBlock
-          }
-        ) }) }) : null,
-        error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ErrorState, { "data-testid": "chat-thread-error-state", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ErrorText, { children: error }),
-          onRetry ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ErrorActions, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RetryButton, { type: "button", "data-testid": "chat-thread-retry", onClick: onRetry, children: retryButtonLabel }) }) : null
-        ] }) : null
-      ]
-    }
-  );
+          }) }, message.id)),
+          error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+        ]
+      }
+    ) : null,
+    !latestTurn && error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+  ] });
 };
 var EMPTY_MESSAGES = [];
 var ChatThread = () => {
@@ -2443,13 +2507,13 @@ var ChatThread = () => {
   const updateQA = useChatStore((s) => s.updateQuestionnaireAnswers);
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const { sendRef, retryRef, renderMessageBlock, labels } = useChatContext();
-  const handleRetry = (0, import_react11.useCallback)(() => {
+  const handleRetry = (0, import_react10.useCallback)(() => {
     if (!activeSessionId)
       return;
     clearSessionError(activeSessionId);
     void retryRef.current();
   }, [activeSessionId, clearSessionError, retryRef]);
-  const handleQuestionnaireSubmit = (0, import_react11.useCallback)(
+  const handleQuestionnaireSubmit = (0, import_react10.useCallback)(
     (submission) => {
       if (activeSessionId && submission.sourceMessageId) {
         updateQA(
@@ -2463,16 +2527,16 @@ var ChatThread = () => {
     },
     [activeSessionId, updateQA, sendRef]
   );
-  const handleConfirmationSubmit = (0, import_react11.useCallback)(
+  const handleConfirmationSubmit = (0, import_react10.useCallback)(
     (submission) => {
       void sendRef.current(submission.content);
     },
     [sendRef]
   );
   if (!hasSessions || messages.length === 0 && !streamingMessage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChatThreadEmptyState, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatThreadEmptyState, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     ChatThreadView,
     {
       activeSessionMode,
@@ -2487,7 +2551,7 @@ var ChatThread = () => {
     }
   );
 };
-var Container = import_styled10.default.div`
+var Container = import_styled9.default.div`
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -2510,27 +2574,29 @@ var Container = import_styled10.default.div`
     background: transparent;
   }
 `;
-var MessageSlot2 = import_styled10.default.div`
+var MessageSlot = import_styled9.default.div`
   display: flex;
 `;
-var StreamingGroup = import_styled10.default.div`
-  display: contents;
+var ConversationTurn = import_styled9.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 `;
-var ErrorText = import_styled10.default.div`
+var ErrorText = import_styled9.default.div`
   color: #ff7b72;
   font-size: 14px;
 `;
-var ErrorState = import_styled10.default.div`
+var ErrorState = import_styled9.default.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
 `;
-var ErrorActions = import_styled10.default.div`
+var ErrorActions = import_styled9.default.div`
   display: flex;
   align-items: center;
 `;
-var RetryButton = import_styled10.default.button`
+var RetryButton = import_styled9.default.button`
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.04);
@@ -2546,8 +2612,8 @@ var RetryButton = import_styled10.default.button`
 `;
 
 // src/components/chat-composer/index.tsx
-var import_react15 = require("react");
-var import_styled15 = __toESM(require("@emotion/styled"));
+var import_react14 = require("react");
+var import_styled14 = __toESM(require("@emotion/styled"));
 
 // src/components/chat-composer/lib/chat-composer.ts
 var DRAFT_CHAT_SESSION_ID_PREFIX = "draft-session-";
@@ -2658,10 +2724,10 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-var import_react13 = require("react");
+var import_react12 = require("react");
 
 // src/components/chat-composer/hooks/use-composer-attachments.ts
-var import_react12 = require("react");
+var import_react11 = require("react");
 var SUPPORTED_IMAGE_MIME_TYPES = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/webp"]);
 var MAX_COMPOSER_ATTACHMENTS = 10;
 var createObjectUrl = (file) => typeof URL !== "undefined" && typeof URL.createObjectURL === "function" ? URL.createObjectURL(file) : "";
@@ -2675,12 +2741,12 @@ var releaseComposerAttachments = (attachments) => {
   attachments.forEach((attachment) => revokeObjectUrl(attachment.previewUrl));
 };
 var useComposerAttachments = () => {
-  const [attachments, setAttachments] = (0, import_react12.useState)([]);
-  const attachmentsRef = (0, import_react12.useRef)([]);
-  (0, import_react12.useEffect)(() => {
+  const [attachments, setAttachments] = (0, import_react11.useState)([]);
+  const attachmentsRef = (0, import_react11.useRef)([]);
+  (0, import_react11.useEffect)(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
-  (0, import_react12.useEffect)(
+  (0, import_react11.useEffect)(
     () => () => {
       releaseComposerAttachments(attachmentsRef.current);
     },
@@ -2793,10 +2859,10 @@ var useChatComposer = () => {
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const setPreferredMode = useChatStore((s) => s.setPreferredMode);
   const setSessionMode = useChatStore((s) => s.setSessionMode);
-  const [availableModels, setAvailableModels] = (0, import_react13.useState)([]);
-  const [isModelsLoading, setIsModelsLoading] = (0, import_react13.useState)(true);
-  const [isModelsError, setIsModelsError] = (0, import_react13.useState)(false);
-  const fetchModels = (0, import_react13.useCallback)(async () => {
+  const [availableModels, setAvailableModels] = (0, import_react12.useState)([]);
+  const [isModelsLoading, setIsModelsLoading] = (0, import_react12.useState)(true);
+  const [isModelsError, setIsModelsError] = (0, import_react12.useState)(false);
+  const fetchModels = (0, import_react12.useCallback)(async () => {
     setIsModelsLoading(true);
     setIsModelsError(false);
     try {
@@ -2808,31 +2874,31 @@ var useChatComposer = () => {
       setIsModelsLoading(false);
     }
   }, [transport]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     void fetchModels();
   }, [fetchModels]);
   const hasModels = availableModels.length > 0;
-  const [value, setValue] = (0, import_react13.useState)("");
-  const [selectedModel, setSelectedModel] = (0, import_react13.useState)("");
-  const [selectedMode, setSelectedModeLocal] = (0, import_react13.useState)(DEFAULT_CHAT_AGENT_MODE);
-  const [attachmentNotice, setAttachmentNotice] = (0, import_react13.useState)(null);
+  const [value, setValue] = (0, import_react12.useState)("");
+  const [selectedModel, setSelectedModel] = (0, import_react12.useState)("");
+  const [selectedMode, setSelectedModeLocal] = (0, import_react12.useState)(DEFAULT_CHAT_AGENT_MODE);
+  const [attachmentNotice, setAttachmentNotice] = (0, import_react12.useState)(null);
   const { attachments, appendFiles, removeAttachment, takeMessageAttachments } = useComposerAttachments();
-  const abortControllerRef = (0, import_react13.useRef)(null);
-  const stopRequestRef = (0, import_react13.useRef)(null);
-  const lastRequestRef = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
+  const abortControllerRef = (0, import_react12.useRef)(null);
+  const stopRequestRef = (0, import_react12.useRef)(null);
+  const lastRequestRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     setSelectedModel(
       (current) => resolveSelectedChatModel({ currentModel: current, availableModels, isModelsLoading })
     );
   }, [availableModels, isModelsLoading]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (activeSession) {
       setSelectedModeLocal(activeSession.mode ?? DEFAULT_CHAT_AGENT_MODE);
       return;
     }
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
   }, [activeSession, preferredMode]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!attachmentNotice)
       return;
     const timeoutId = window.setTimeout(
@@ -2851,7 +2917,7 @@ var useChatComposer = () => {
       stopRequestRef.current.timeoutId = null;
     }
   };
-  const clearStopRequest = (0, import_react13.useCallback)((sessionId) => {
+  const clearStopRequest = (0, import_react12.useCallback)((sessionId) => {
     if (!stopRequestRef.current)
       return;
     if (sessionId && stopRequestRef.current.sessionId !== sessionId)
@@ -2859,7 +2925,7 @@ var useChatComposer = () => {
     clearStopTimeout(sessionId);
     stopRequestRef.current = null;
   }, []);
-  const finalizeStop = (0, import_react13.useCallback)(
+  const finalizeStop = (0, import_react12.useCallback)(
     (sessionId) => {
       if (stopRequestRef.current?.sessionId === sessionId) {
         if (stopRequestRef.current.finalized)
@@ -2874,7 +2940,7 @@ var useChatComposer = () => {
     },
     [clearStopRequest, finalizeStoppedStreamingMessage]
   );
-  const runStream = (0, import_react13.useCallback)(
+  const runStream = (0, import_react12.useCallback)(
     async ({
       localSessionId,
       sessionId,
@@ -2963,7 +3029,7 @@ var useChatComposer = () => {
       setSessionError
     ]
   );
-  const send = (0, import_react13.useCallback)(
+  const send = (0, import_react12.useCallback)(
     async (contentOverride) => {
       const content = (contentOverride ?? value).trim();
       const hasText = Boolean(content);
@@ -3111,29 +3177,29 @@ var useChatComposer = () => {
 };
 
 // src/components/chat-composer/components/chat-composer-attachment-list.tsx
-var import_react14 = require("react");
-var import_styled11 = __toESM(require("@emotion/styled"));
-var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
+var import_react13 = require("react");
+var import_styled10 = __toESM(require("@emotion/styled"));
+var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
 var ChatComposerAttachmentList = ({
   attachments,
   onRemoveAttachment
 }) => {
-  const [activeImage, setActiveImage] = (0, import_react14.useState)(null);
+  const [activeImage, setActiveImage] = (0, import_react13.useState)(null);
   if (!attachments.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AttachmentList, { "data-testid": "chat-composer-attachment-list", children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AttachmentCard, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AttachmentList, { "data-testid": "chat-composer-attachment-list", children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(AttachmentCard, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         AttachmentPreviewButton,
         {
           type: "button",
           "aria-label": `${attachment.name} preview`,
           onClick: () => setActiveImage(attachment),
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AttachmentThumb, { src: attachment.previewUrl, alt: attachment.name })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AttachmentThumb, { src: attachment.previewUrl, alt: attachment.name })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         AttachmentRemoveButton,
         {
           type: "button",
@@ -3142,11 +3208,11 @@ var ChatComposerAttachmentList = ({
             event.stopPropagation();
             onRemoveAttachment(attachment.id);
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseGlyph, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseGlyph, { "aria-hidden": "true" })
         }
       )
     ] }, attachment.id)) }),
-    activeImage ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    activeImage ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ImageViewer,
       {
         src: activeImage.previewUrl,
@@ -3156,7 +3222,7 @@ var ChatComposerAttachmentList = ({
     ) : null
   ] });
 };
-var AttachmentList = import_styled11.default.div`
+var AttachmentList = import_styled10.default.div`
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
@@ -3178,7 +3244,7 @@ var AttachmentList = import_styled11.default.div`
     background: transparent;
   }
 `;
-var AttachmentCard = import_styled11.default.div`
+var AttachmentCard = import_styled10.default.div`
   position: relative;
   width: 108px;
   height: 72px;
@@ -3187,7 +3253,7 @@ var AttachmentCard = import_styled11.default.div`
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.04);
 `;
-var AttachmentPreviewButton = import_styled11.default.button`
+var AttachmentPreviewButton = import_styled10.default.button`
   width: 100%;
   height: 100%;
   padding: 0;
@@ -3195,13 +3261,13 @@ var AttachmentPreviewButton = import_styled11.default.button`
   background: transparent;
   cursor: zoom-in;
 `;
-var AttachmentThumb = import_styled11.default.img`
+var AttachmentThumb = import_styled10.default.img`
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 `;
-var AttachmentRemoveButton = import_styled11.default.button`
+var AttachmentRemoveButton = import_styled10.default.button`
   position: absolute;
   top: 6px;
   right: 6px;
@@ -3239,7 +3305,7 @@ var AttachmentRemoveButton = import_styled11.default.button`
     background: rgba(30, 30, 35, 0.98);
   }
 `;
-var CloseGlyph = import_styled11.default.span`
+var CloseGlyph = import_styled10.default.span`
   position: relative;
   width: 11px;
   height: 11px;
@@ -3268,9 +3334,9 @@ var CloseGlyph = import_styled11.default.span`
 `;
 
 // src/components/chat-composer/components/chat-model-control.tsx
-var import_styled12 = __toESM(require("@emotion/styled"));
+var import_styled11 = __toESM(require("@emotion/styled"));
 var import_compass_ui = require("@xinghunm/compass-ui");
-var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
 var ChatModelControl = ({
   selectedModel,
   availableModels,
@@ -3281,7 +3347,7 @@ var ChatModelControl = ({
   onReloadModels
 }) => {
   if (isModelsError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       ModelReloadButton,
       {
         type: "button",
@@ -3289,8 +3355,8 @@ var ChatModelControl = ({
         "aria-label": "Reload",
         onClick: onReloadModels,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Failed to load models" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Failed to load models" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             ReloadIcon,
             {
               "data-testid": "chat-model-reload-icon",
@@ -3301,8 +3367,8 @@ var ChatModelControl = ({
               fill: "currentColor",
               xmlns: "http://www.w3.org/2000/svg",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M895.469672 511.745197c0-146.498562-82.099856-273.805016-202.788589-338.470805l22.072715-46.630017c-4.50664-12.609179-18.382673-19.176758-30.991852-14.670118l-92.436272 33.040511c-12.609179 4.50664-19.176758 18.382673-14.670118 30.991852l33.040511 92.436272c4.50664 12.609179 18.382673 19.176758 30.991852 14.670118l24.581861-51.92972c99.069343 54.335513 166.240185 159.596881 166.240185 280.561907 0 165.56685-125.817544 301.747415-287.057855 318.14692l0 0.022513c-17.730826 0-32.105209 14.374382-32.105209 32.105209 0 17.730826 14.374382 32.105209 32.105209 32.105209 2.098801 0 4.149507-0.207731 6.135744-0.592494C744.270041 874.039593 895.469672 710.564381 895.469672 511.745197z" }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M480.616222 129.23948c-0.041956 0-0.082888 0.00307-0.124843 0.00307l0-0.00307c-0.01535 0.001023-0.031722 0.00307-0.047072 0.004093-1.892093 0.010233-3.744277 0.189312-5.545296 0.5137-194.674794 18.529005-346.957083 182.459588-346.957083 381.987924 0 147.431817 83.146699 275.42798 205.097168 339.700819l-24.814152 52.419883c4.50664 12.609179 18.382673 19.176758 30.991852 14.670118l92.436272-33.040511c12.609179-4.50664 19.176758-18.382673 14.670118-30.991852l-33.040511-92.436272c-4.50664-12.609179-18.382673-19.176758-30.991852-14.670118l-21.853727 46.167482c-100.326986-53.964052-168.535461-159.920246-168.535461-281.81955 0-166.089759 126.616746-302.591643 288.588721-318.284043l0-0.014326c0.041956 0 0.082888 0.00307 0.124843 0.00307 17.730826 0 32.105209-14.374382 32.105209-32.105209C512.721431 143.613862 498.347049 129.23948 480.616222 129.23948z" })
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M895.469672 511.745197c0-146.498562-82.099856-273.805016-202.788589-338.470805l22.072715-46.630017c-4.50664-12.609179-18.382673-19.176758-30.991852-14.670118l-92.436272 33.040511c-12.609179 4.50664-19.176758 18.382673-14.670118 30.991852l33.040511 92.436272c4.50664 12.609179 18.382673 19.176758 30.991852 14.670118l24.581861-51.92972c99.069343 54.335513 166.240185 159.596881 166.240185 280.561907 0 165.56685-125.817544 301.747415-287.057855 318.14692l0 0.022513c-17.730826 0-32.105209 14.374382-32.105209 32.105209 0 17.730826 14.374382 32.105209 32.105209 32.105209 2.098801 0 4.149507-0.207731 6.135744-0.592494C744.270041 874.039593 895.469672 710.564381 895.469672 511.745197z" }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M480.616222 129.23948c-0.041956 0-0.082888 0.00307-0.124843 0.00307l0-0.00307c-0.01535 0.001023-0.031722 0.00307-0.047072 0.004093-1.892093 0.010233-3.744277 0.189312-5.545296 0.5137-194.674794 18.529005-346.957083 182.459588-346.957083 381.987924 0 147.431817 83.146699 275.42798 205.097168 339.700819l-24.814152 52.419883c4.50664 12.609179 18.382673 19.176758 30.991852 14.670118l92.436272-33.040511c12.609179-4.50664 19.176758-18.382673 14.670118-30.991852l-33.040511-92.436272c-4.50664-12.609179-18.382673-19.176758-30.991852-14.670118l-21.853727 46.167482c-100.326986-53.964052-168.535461-159.920246-168.535461-281.81955 0-166.089759 126.616746-302.591643 288.588721-318.284043l0-0.014326c0.041956 0 0.082888 0.00307 0.124843 0.00307 17.730826 0 32.105209-14.374382 32.105209-32.105209C512.721431 143.613862 498.347049 129.23948 480.616222 129.23948z" })
               ]
             }
           )
@@ -3311,11 +3377,11 @@ var ChatModelControl = ({
     );
   }
   if (isModelsLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: "Loading models..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModelBadge, { children: "Loading models..." });
   }
   if (hasModels && selectedModel) {
     if (availableModels.length > 1) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         ModelSelect,
         {
           "data-testid": "chat-model-select",
@@ -3329,11 +3395,11 @@ var ChatModelControl = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: selectedModel });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModelBadge, { children: selectedModel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: "No model available" });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModelBadge, { children: "No model available" });
 };
-var ModelBadge = import_styled12.default.span`
+var ModelBadge = import_styled11.default.span`
   border-radius: 999px;
   border: 1px solid var(--border-hover);
   padding: 5px 12px;
@@ -3342,7 +3408,7 @@ var ModelBadge = import_styled12.default.span`
   color: var(--text-secondary);
   line-height: 12px;
 `;
-var ModelReloadButton = import_styled12.default.button`
+var ModelReloadButton = import_styled11.default.button`
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -3367,10 +3433,10 @@ var ModelReloadButton = import_styled12.default.button`
     color: rgba(255, 255, 255, 0.88);
   }
 `;
-var ReloadIcon = import_styled12.default.svg`
+var ReloadIcon = import_styled11.default.svg`
   flex-shrink: 0;
 `;
-var ModelSelect = (0, import_styled12.default)(import_compass_ui.Select)`
+var ModelSelect = (0, import_styled11.default)(import_compass_ui.Select)`
   && {
     width: auto;
     min-width: 0;
@@ -3390,16 +3456,16 @@ var ModelSelect = (0, import_styled12.default)(import_compass_ui.Select)`
 `;
 
 // src/components/chat-composer/components/chat-mode-control.tsx
-var import_styled13 = __toESM(require("@emotion/styled"));
+var import_styled12 = __toESM(require("@emotion/styled"));
 var import_compass_ui2 = require("@xinghunm/compass-ui");
-var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
 var ChatModeControl = ({
   value,
   disabled = false,
   labels,
   onChange
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     ModeSelect,
     {
       "data-testid": "chat-mode-select",
@@ -3414,7 +3480,7 @@ var ChatModeControl = ({
     }
   );
 };
-var ModeSelect = (0, import_styled13.default)(import_compass_ui2.Select)`
+var ModeSelect = (0, import_styled12.default)(import_compass_ui2.Select)`
   && {
     flex: 0 1 auto;
     width: auto;
@@ -3435,10 +3501,10 @@ var ModeSelect = (0, import_styled13.default)(import_compass_ui2.Select)`
 `;
 
 // src/components/chat-composer/components/chat-send-actions.tsx
-var import_styled14 = __toESM(require("@emotion/styled"));
+var import_styled13 = __toESM(require("@emotion/styled"));
 var import_compass_ui3 = require("@xinghunm/compass-ui");
-var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
-var ArrowUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
+var ArrowUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "svg",
   {
     "aria-hidden": "true",
@@ -3447,7 +3513,7 @@ var ArrowUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     viewBox: "0 0 12 12",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "path",
       {
         d: "M6 10V2M6 2L2 6M6 2L10 6",
@@ -3465,7 +3531,7 @@ var ChatSendActions = ({
   isStopping,
   onStop,
   onSend
-}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   StopButton,
   {
     type: "button",
@@ -3475,14 +3541,14 @@ var ChatSendActions = ({
     disabled: isStopping,
     shape: "circle",
     onClick: () => void onStop(),
-    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StopGlyph, { "aria-hidden": "true" })
+    children: isStopping ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StopSpinner, { "aria-hidden": "true", "data-testid": "chat-composer-stop-spinner" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StopGlyph, { "aria-hidden": "true", "data-testid": "chat-composer-stop-glyph" })
   }
-) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   PrimaryButton,
   {
     $canSend: canSend,
     type: "button",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrowUpIcon, {}),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ArrowUpIcon, {}),
     "aria-label": "Send",
     "data-testid": "chat-composer-send",
     disabled: !canSend,
@@ -3490,7 +3556,7 @@ var ChatSendActions = ({
     onClick: () => void onSend()
   }
 ) });
-var PrimaryButton = (0, import_styled14.default)(import_compass_ui3.Button)`
+var PrimaryButton = (0, import_styled13.default)(import_compass_ui3.Button)`
   && {
     min-width: 24px;
     width: 24px;
@@ -3516,7 +3582,7 @@ var PrimaryButton = (0, import_styled14.default)(import_compass_ui3.Button)`
     }
   }
 `;
-var StopButton = (0, import_styled14.default)(import_compass_ui3.Button)`
+var StopButton = (0, import_styled13.default)(import_compass_ui3.Button)`
   && {
     min-width: 24px;
     width: 24px;
@@ -3544,17 +3610,35 @@ var StopButton = (0, import_styled14.default)(import_compass_ui3.Button)`
     }
   }
 `;
-var StopGlyph = import_styled14.default.span`
+var StopGlyph = import_styled13.default.span`
   width: 8px;
   height: 8px;
   border-radius: 2px;
   background: #1b1b1b;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
 `;
+var StopSpinner = import_styled13.default.span`
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  border: 1.5px solid rgba(27, 27, 27, 0.2);
+  border-top-color: #1b1b1b;
+  animation: chat-composer-stop-spin 0.7s linear infinite;
+
+  @keyframes chat-composer-stop-spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
 
 // src/components/chat-composer/index.tsx
-var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
-var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
+var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "svg",
   {
     "aria-hidden": "true",
@@ -3563,7 +3647,7 @@ var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
   }
 );
 var ChatComposerView = ({
@@ -3592,7 +3676,7 @@ var ChatComposerView = ({
   onStop,
   onSend
 }) => {
-  const imageInputRef = (0, import_react15.useRef)(null);
+  const imageInputRef = (0, import_react14.useRef)(null);
   const canSend = canSendChatMessage({
     value,
     attachmentCount: attachments.length,
@@ -3623,8 +3707,8 @@ var ChatComposerView = ({
     event.preventDefault();
     onPasteImages(imageFiles);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Container2, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Surface, { "data-testid": "chat-composer-surface", children: [
-    enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Container2, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Surface, { "data-testid": "chat-composer-surface", children: [
+    enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "input",
       {
         ref: imageInputRef,
@@ -3636,15 +3720,15 @@ var ChatComposerView = ({
         onChange: handlePickImages
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       ChatComposerAttachmentList,
       {
         attachments,
         onRemoveAttachment
       }
     ),
-    attachmentNotice === "limit_reached" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    attachmentNotice === "limit_reached" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Input,
       {
         "data-testid": "chat-composer-input",
@@ -3655,18 +3739,18 @@ var ChatComposerView = ({
         placeholder
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Actions2, { "data-testid": "chat-composer-actions", children: [
-      enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Actions2, { "data-testid": "chat-composer-actions", children: [
+      enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         AttachButton,
         {
           type: "button",
           "data-testid": "chat-composer-attach-image",
           "aria-label": "Attach image",
           onClick: () => imageInputRef.current?.click(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PlusIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PlusIcon, {})
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         ChatModeControl,
         {
           value: selectedMode,
@@ -3675,7 +3759,7 @@ var ChatComposerView = ({
           onChange: onSelectedModeChange
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         ChatModelControl,
         {
           selectedModel,
@@ -3687,7 +3771,7 @@ var ChatComposerView = ({
           onReloadModels
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         ChatSendActions,
         {
           canSend,
@@ -3704,7 +3788,7 @@ var ChatComposer = () => {
   const { labels, sendRef, retryRef, enableImageAttachments } = useChatContext();
   const { state, actions } = useChatComposer();
   const { send, retry } = actions;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     sendRef.current = send;
     retryRef.current = async () => {
       retry();
@@ -3715,7 +3799,7 @@ var ChatComposer = () => {
     plan: labels.modeLabelPlan,
     agent: labels.modeLabelAgent
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     ChatComposerView,
     {
       value: state.value,
@@ -3745,10 +3829,10 @@ var ChatComposer = () => {
     }
   );
 };
-var Container2 = import_styled15.default.div`
+var Container2 = import_styled14.default.div`
   padding: 0 16px 16px;
 `;
-var Surface = import_styled15.default.div`
+var Surface = import_styled14.default.div`
   background: var(--border-color);
   border-radius: 20px;
   border: 1px solid var(--border-hover);
@@ -3757,7 +3841,7 @@ var Surface = import_styled15.default.div`
     0 12px 36px rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(10px);
 `;
-var AttachmentNotice = import_styled15.default.div`
+var AttachmentNotice = import_styled14.default.div`
   margin: 10px 12px 0;
   padding: 8px 10px;
   border-radius: 10px;
@@ -3767,7 +3851,7 @@ var AttachmentNotice = import_styled15.default.div`
   font-size: 12px;
   line-height: 1.4;
 `;
-var Input = import_styled15.default.textarea`
+var Input = import_styled14.default.textarea`
   width: 100%;
   min-height: 96px;
   resize: none;
@@ -3789,14 +3873,14 @@ var Input = import_styled15.default.textarea`
     display: none;
   }
 `;
-var Footer = import_styled15.default.div`
+var Footer = import_styled14.default.div`
   display: flex;
   align-items: flex-end;
   justify-content: stretch;
   gap: 16px;
   padding: 0 14px 14px;
 `;
-var Actions2 = import_styled15.default.div`
+var Actions2 = import_styled14.default.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -3805,7 +3889,7 @@ var Actions2 = import_styled15.default.div`
   justify-content: flex-end;
   gap: 8px;
 `;
-var AttachButton = import_styled15.default.button`
+var AttachButton = import_styled14.default.button`
   width: 28px;
   height: 28px;
   display: grid;
@@ -3822,42 +3906,42 @@ var AttachButton = import_styled15.default.button`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-var import_styled17 = __toESM(require("@emotion/styled"));
+var import_styled16 = __toESM(require("@emotion/styled"));
 
 // src/components/chat-conversation-list/components/chat-session-item.tsx
-var import_react16 = require("react");
-var import_styled16 = __toESM(require("@emotion/styled"));
-var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
-var ChatSessionItem = (0, import_react16.memo)(
+var import_react15 = require("react");
+var import_styled15 = __toESM(require("@emotion/styled"));
+var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
+var ChatSessionItem = (0, import_react15.memo)(
   ({ session, isActive, modeLabel, onClick }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       SessionButton,
       {
         type: "button",
         "data-active": isActive,
         onClick: () => onClick(session.sessionId),
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SessionMeta, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SessionTitle, { children: session.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModeBadge, { children: modeLabel })
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(SessionMeta, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SessionTitle, { children: session.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ModeBadge, { children: modeLabel })
         ] })
       }
     );
   }
 );
 ChatSessionItem.displayName = "ChatSessionItem";
-var SessionMeta = import_styled16.default.div`
+var SessionMeta = import_styled15.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
 `;
-var SessionTitle = import_styled16.default.span`
+var SessionTitle = import_styled15.default.span`
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var SessionButton = import_styled16.default.button`
+var SessionButton = import_styled15.default.button`
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 12px;
@@ -3871,7 +3955,7 @@ var SessionButton = import_styled16.default.button`
     background: rgba(255, 255, 255, 0.08);
   }
 `;
-var ModeBadge = import_styled16.default.span`
+var ModeBadge = import_styled15.default.span`
   flex-shrink: 0;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -3883,7 +3967,7 @@ var ModeBadge = import_styled16.default.span`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
 var ChatConversationList = () => {
   const { labels } = useChatContext();
   const sessions = useChatStore((s) => s.sessions);
@@ -3906,12 +3990,12 @@ var ChatConversationList = () => {
     });
     createSession(session);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Container3, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Toolbar, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title4, { children: "Sessions" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: handleCreateSession, children: labels.newChat })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Container3, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Toolbar, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Title4, { children: "Sessions" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: handleCreateSession, children: labels.newChat })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       ChatSessionItem,
       {
         session,
@@ -3923,7 +4007,7 @@ var ChatConversationList = () => {
     )) })
   ] });
 };
-var Container3 = import_styled17.default.aside`
+var Container3 = import_styled16.default.aside`
   width: 280px;
   min-width: 280px;
   border-right: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
@@ -3931,18 +4015,18 @@ var Container3 = import_styled17.default.aside`
   flex-direction: column;
   background: rgba(255, 255, 255, 0.02);
 `;
-var Toolbar = import_styled17.default.div`
+var Toolbar = import_styled16.default.div`
   padding: 20px 16px 12px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 `;
-var Title4 = import_styled17.default.h2`
+var Title4 = import_styled16.default.h2`
   margin: 0;
   font-size: 14px;
   color: var(--text-secondary);
 `;
-var CreateButton = import_styled17.default.button`
+var CreateButton = import_styled16.default.button`
   border: none;
   border-radius: 12px;
   padding: 12px 14px;
@@ -3951,7 +4035,7 @@ var CreateButton = import_styled17.default.button`
   text-align: left;
   cursor: pointer;
 `;
-var List2 = import_styled17.default.div`
+var List2 = import_styled16.default.div`
   padding: 0 12px 16px;
   display: flex;
   flex-direction: column;
@@ -3960,8 +4044,8 @@ var List2 = import_styled17.default.div`
 `;
 
 // src/components/ai-chat/index.tsx
-var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
-var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
+var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   import_compass_ui4.ConfigProvider,
   {
     theme: {
@@ -3996,23 +4080,23 @@ var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE_
         }
       }
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Root, { "data-testid": "ai-chat", children: [
-      showConversationList ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatConversationList, {}) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Workspace, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatThread, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatComposer, {})
+    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Root, { "data-testid": "ai-chat", children: [
+      showConversationList ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatConversationList, {}) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Workspace, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatThread, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatComposer, {})
       ] })
     ] }) })
   }
 );
-var Root = import_styled18.default.div`
+var Root = import_styled17.default.div`
   display: flex;
   width: 100%;
   height: 100%;
   min-height: 0;
   overflow: hidden;
 `;
-var Workspace = import_styled18.default.section`
+var Workspace = import_styled17.default.section`
   flex: 1;
   display: flex;
   flex-direction: column;