@xinghunm/ai-chat 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/ai-chat/index.tsx
-import styled18 from "@emotion/styled";
+import styled17 from "@emotion/styled";
 import { ConfigProvider } from "@xinghunm/compass-ui";
 
 // src/components/ai-chat-provider/index.tsx
@@ -590,8 +590,8 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-import { useCallback as useCallback2, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
-import styled10 from "@emotion/styled";
+import { useCallback as useCallback2, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
+import styled9 from "@emotion/styled";
 
 // src/context/use-chat-context.ts
 import { useContext } from "react";
@@ -609,25 +609,9 @@ 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
-import { Fragment, memo, useState as useState4 } from "react";
+import { Fragment, memo, useState as useState3 } from "react";
 import styled7 from "@emotion/styled";
 import { keyframes } from "@emotion/react";
 import ReactMarkdown from "react-markdown";
@@ -636,7 +620,7 @@ import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 
 // src/components/chat-thread/hooks/use-chat-message-reveal.ts
-import { useCallback, useEffect, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback, useEffect, useMemo as useMemo2, useReducer, useRef as useRef2 } from "react";
 
 // src/components/chat-thread/lib/message-reveal.ts
 var STREAM_REVEAL_TICK_MS = 36;
@@ -683,6 +667,64 @@ var getNextDisplayedUnitCount = ({
 var splitMarkdownBlocks = (content) => content.split(/\n{2,}/).map((block) => block.trim()).filter(Boolean);
 
 // src/components/chat-thread/hooks/use-chat-message-reveal.ts
+var createRevealState = ({
+  isAssistantStreaming,
+  targetUnitCount
+}) => {
+  const initialDisplayedUnitCount = isAssistantStreaming ? 0 : targetUnitCount;
+  return {
+    batchedTargetUnitCount: initialDisplayedUnitCount,
+    displayedUnitCount: initialDisplayedUnitCount,
+    isFreshBlockActive: false
+  };
+};
+var revealReducer = (state, action) => {
+  switch (action.type) {
+    case "reset-message":
+      return createRevealState(action);
+    case "commit-batched-target": {
+      const nextDisplayedUnitCount = action.role === "assistant" ? getNextDisplayedUnitCount({
+        currentUnits: state.displayedUnitCount,
+        targetUnits: action.nextTargetUnitCount,
+        isStreaming: action.isAssistantStreaming,
+        minimumStep: state.displayedUnitCount > 0 && action.isAssistantStreaming ? 2 : 1
+      }) : action.nextTargetUnitCount;
+      return {
+        ...state,
+        batchedTargetUnitCount: action.nextTargetUnitCount,
+        displayedUnitCount: nextDisplayedUnitCount
+      };
+    }
+    case "set-fresh-block-active":
+      return state.isFreshBlockActive === action.isActive ? state : {
+        ...state,
+        isFreshBlockActive: action.isActive
+      };
+    case "sync-displayed-target":
+      return state.displayedUnitCount === state.batchedTargetUnitCount ? state : {
+        ...state,
+        displayedUnitCount: state.batchedTargetUnitCount
+      };
+    case "advance-reveal": {
+      if (state.displayedUnitCount >= state.batchedTargetUnitCount) {
+        return state;
+      }
+      return {
+        ...state,
+        displayedUnitCount: Math.min(
+          state.batchedTargetUnitCount,
+          getNextDisplayedUnitCount({
+            currentUnits: state.displayedUnitCount,
+            targetUnits: state.batchedTargetUnitCount,
+            isStreaming: action.isAssistantStreaming
+          })
+        )
+      };
+    }
+    default:
+      return state;
+  }
+};
 var useChatMessageReveal = (message) => {
   const isAssistantStreaming = message.role === "assistant" && message.status === "streaming";
   const targetContent = message.content || "";
@@ -690,41 +732,47 @@ var useChatMessageReveal = (message) => {
   const pendingTargetUnitCountRef = useRef2(targetUnits.length);
   const batchedTargetUnitCountRef = useRef2(isAssistantStreaming ? 0 : targetUnits.length);
   const inputBatchTimeoutRef = useRef2(null);
-  const [batchedTargetUnitCount, setBatchedTargetUnitCount] = useState2(
-    () => isAssistantStreaming ? 0 : targetUnits.length
-  );
   const lastDisplayedBlockCountRef = useRef2(0);
-  const [displayedUnitCount, setDisplayedUnitCount] = useState2(
-    () => isAssistantStreaming ? 0 : targetUnits.length
+  const previousMessageIdRef = useRef2(message.id);
+  const [state, dispatch] = useReducer(
+    revealReducer,
+    {
+      isAssistantStreaming,
+      targetUnitCount: targetUnits.length
+    },
+    createRevealState
   );
-  const [isFreshBlockActive, setIsFreshBlockActive] = useState2(false);
+  const { batchedTargetUnitCount, displayedUnitCount, isFreshBlockActive } = state;
   const commitBatchedTargetUnitCount = useCallback(
     (nextTargetUnitCount) => {
       batchedTargetUnitCountRef.current = nextTargetUnitCount;
-      setBatchedTargetUnitCount(nextTargetUnitCount);
-      setDisplayedUnitCount(
-        (current) => message.role === "assistant" ? getNextDisplayedUnitCount({
-          currentUnits: current,
-          targetUnits: nextTargetUnitCount,
-          isStreaming: isAssistantStreaming,
-          minimumStep: current > 0 && isAssistantStreaming ? 2 : 1
-        }) : nextTargetUnitCount
-      );
+      dispatch({
+        type: "commit-batched-target",
+        isAssistantStreaming,
+        nextTargetUnitCount,
+        role: message.role
+      });
     },
     [isAssistantStreaming, message.role]
   );
   useEffect(() => {
+    if (previousMessageIdRef.current === message.id) {
+      return;
+    }
+    previousMessageIdRef.current = message.id;
     pendingTargetUnitCountRef.current = targetUnits.length;
     batchedTargetUnitCountRef.current = isAssistantStreaming ? 0 : targetUnits.length;
-    setBatchedTargetUnitCount(batchedTargetUnitCountRef.current);
-    setDisplayedUnitCount(isAssistantStreaming ? 0 : targetUnits.length);
     lastDisplayedBlockCountRef.current = 0;
     if (inputBatchTimeoutRef.current !== null) {
       window.clearTimeout(inputBatchTimeoutRef.current);
       inputBatchTimeoutRef.current = null;
     }
-    setIsFreshBlockActive(false);
-  }, [message.id, isAssistantStreaming, targetUnits.length]);
+    dispatch({
+      type: "reset-message",
+      isAssistantStreaming,
+      targetUnitCount: targetUnits.length
+    });
+  }, [isAssistantStreaming, message.id, targetUnits.length]);
   useEffect(() => {
     pendingTargetUnitCountRef.current = targetUnits.length;
     if (message.role !== "assistant" || !isAssistantStreaming) {
@@ -767,9 +815,9 @@ var useChatMessageReveal = (message) => {
     if (!hasNewDisplayedBlock) {
       return;
     }
-    setIsFreshBlockActive(true);
+    dispatch({ type: "set-fresh-block-active", isActive: true });
     const timer = window.setTimeout(() => {
-      setIsFreshBlockActive(false);
+      dispatch({ type: "set-fresh-block-active", isActive: false });
     }, STREAM_FRESH_BLOCK_SETTLE_MS);
     return () => {
       window.clearTimeout(timer);
@@ -779,37 +827,34 @@ var useChatMessageReveal = (message) => {
     const shouldAnimateReveal = message.role === "assistant" && displayedUnitCount < batchedTargetUnitCount && (isAssistantStreaming || displayedUnitCount > 0);
     if (!shouldAnimateReveal) {
       if (displayedUnitCount !== batchedTargetUnitCount) {
-        setDisplayedUnitCount(batchedTargetUnitCount);
+        dispatch({ type: "sync-displayed-target" });
       }
       return;
     }
     const timer = window.setInterval(() => {
-      setDisplayedUnitCount((current) => {
-        if (current >= batchedTargetUnitCount) {
-          window.clearInterval(timer);
-          return current;
-        }
-        return Math.min(
-          batchedTargetUnitCount,
-          getNextDisplayedUnitCount({
-            currentUnits: current,
-            targetUnits: batchedTargetUnitCount,
-            isStreaming: isAssistantStreaming
-          })
-        );
-      });
+      dispatch({ type: "advance-reveal", isAssistantStreaming });
     }, STREAM_REVEAL_TICK_MS);
     return () => {
       window.clearInterval(timer);
     };
   }, [batchedTargetUnitCount, displayedUnitCount, isAssistantStreaming, message.role]);
   const settledContent = isFreshBlockActive ? contentBlocks.slice(0, -1).join("\n\n") : displayedContent;
-  const freshContent = isFreshBlockActive ? contentBlocks.at(-1) ?? "" : "";
+  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
   };
 };
 
@@ -1023,7 +1068,7 @@ var Value = styled3.span`
 `;
 
 // src/components/chat-thread/components/pde-ai-questionnaire-card.tsx
-import { useState as useState3 } from "react";
+import { useState as useState2 } from "react";
 import styled4 from "@emotion/styled";
 import { jsx as jsx5, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var OTHER_OPTION_VALUE = "__other__";
@@ -1125,10 +1170,10 @@ var PDEAIQuestionnaireCardInner = ({
   interactive = false,
   onSubmit
 }) => {
-  const [answers, setAnswers] = useState3(
+  const [answers, setAnswers] = useState2(
     () => createInitialAnswers(questionnaire)
   );
-  const [errorMessage, setErrorMessage] = useState3(null);
+  const [errorMessage, setErrorMessage] = useState2(null);
   const handleSubmit = () => {
     const missingQuestions = questionnaire.questions.filter(
       (question) => question.required && isMissingRequiredAnswer(question, answers)
@@ -1756,17 +1801,19 @@ var ChatMessageItemView = ({
   renderMessageBlock
 }) => {
   const { labels } = useChatContext();
-  const [activeImage, setActiveImage] = useState4(void 0);
-  const { displayedContent, freshContent, isAssistantStreaming, settledContent } = useChatMessageReveal(message);
+  const [activeImage, setActiveImage] = useState3(void 0);
+  const { displayedBlocks, displayedContent, freshContent, isAssistantStreaming, settledContent } = useChatMessageReveal(message);
   const isStoppedAssistant = message.role === "assistant" && message.status === "stopped";
   const attachments = message.attachments ?? [];
   const blocks = message.blocks ?? [];
   const hasStructuredBlocks = blocks.length > 0;
+  const hasMarkdownOnlyBlocks = hasStructuredBlocks && blocks.every((block) => block.type === "markdown");
   const hasTextContent = Boolean(settledContent || freshContent || displayedContent);
+  const shouldRenderStructuredBlocks = hasStructuredBlocks && !(isAssistantStreaming && hasMarkdownOnlyBlocks && hasTextContent);
   const isPlanMode = mode === "plan";
   const canSubmitConfirmation = isPlanMode && typeof onConfirmationSubmit === "function";
   const canSubmitQuestionnaire = isPlanMode && typeof onQuestionnaireSubmit === "function";
-  const shouldShowStreamingCaret = isAssistantStreaming && (!hasStructuredBlocks || hasTextContent);
+  const shouldShowStreamingCaret = isAssistantStreaming && (!shouldRenderStructuredBlocks || hasTextContent);
   const renderChatMessageBlock = (block, index) => {
     switch (block.type) {
       case "markdown":
@@ -1824,9 +1871,17 @@ var ChatMessageItemView = ({
     }
   };
   const renderTextContent = () => /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    settledContent ? /* @__PURE__ */ jsx8(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(settledContent) }) : null,
-    freshContent ? /* @__PURE__ */ jsx8(ContentBlock, { "data-testid": "chat-message-fresh-block", "data-block-tone": "fresh", children: renderMarkdownContent(freshContent) }) : null,
-    !settledContent && !freshContent && hasTextContent ? /* @__PURE__ */ jsx8(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(displayedContent) }) : null
+    displayedBlocks.filter((block) => block.content).map((block, index) => /* @__PURE__ */ jsx8(
+      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__ */ jsx8(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(displayedContent) }) : null
   ] });
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsxs5(Bubble, { "data-role": message.role, "data-status": message.status ?? "done", children: [
@@ -1846,8 +1901,8 @@ var ChatMessageItemView = ({
         isStoppedAssistant ? /* @__PURE__ */ jsx8(StatusTag, { "data-testid": "chat-message-stopped-tag", children: labels.stoppedResponse }) : null
       ] }),
       /* @__PURE__ */ jsxs5(Content, { "data-testid": "chat-message-content", children: [
-        hasStructuredBlocks || hasTextContent ? /* @__PURE__ */ jsxs5(ContentStack, { "data-testid": "chat-message-body-stack", children: [
-          hasStructuredBlocks ? blocks.map((block, index) => /* @__PURE__ */ jsx8(
+        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ jsxs5(ContentStack, { "data-testid": "chat-message-body-stack", children: [
+          shouldRenderStructuredBlocks ? blocks.map((block, index) => /* @__PURE__ */ jsx8(
             ContentSegment,
             {
               "data-testid": "chat-message-content-segment",
@@ -2090,65 +2145,21 @@ var StreamingCaret = styled7.span`
   animation: ${caretBlink} 0.9s steps(1) infinite;
 `;
 
-// src/components/chat-thread/components/chat-thread-history-list.tsx
-import { memo as memo2 } from "react";
-import styled8 from "@emotion/styled";
-import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
-var ChatThreadHistoryList = memo2(
-  ({
-    mode,
-    historyMessages,
-    latestUserMessageId,
-    latestUserMessageRef,
-    onConfirmationSubmit,
-    onQuestionnaireSubmit,
-    renderMessageBlock
-  }) => /* @__PURE__ */ jsx9(HistoryGroup, { "data-testid": "chat-thread-history", children: historyMessages.map((message) => /* @__PURE__ */ jsx9(
-    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__ */ jsx9(
-        ChatMessageItem,
-        {
-          mode,
-          message,
-          onConfirmationSubmit,
-          onQuestionnaireSubmit,
-          renderMessageBlock
-        }
-      )
-    },
-    message.id
-  )) })
-);
-ChatThreadHistoryList.displayName = "ChatThreadHistoryList";
-var HistoryGroup = styled8.div`
-  display: contents;
-`;
-var MessageSlot = styled8.div`
-  display: flex;
-  align-items: flex-start;
-`;
-
 // src/components/chat-thread/components/chat-thread-empty-state.tsx
-import styled9 from "@emotion/styled";
-import { jsx as jsx10, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+import styled8 from "@emotion/styled";
+import { jsx as jsx9, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
 var ChatThreadEmptyState = () => {
   const { labels } = useChatContext();
   return /* @__PURE__ */ jsxs6(EmptyShell, { "data-testid": "chat-empty-hero", children: [
     /* @__PURE__ */ jsxs6(HeroMark, { children: [
-      /* @__PURE__ */ jsx10(HeroOrbit, {}),
-      /* @__PURE__ */ jsx10(HeroCore, { children: "AI" })
+      /* @__PURE__ */ jsx9(HeroOrbit, {}),
+      /* @__PURE__ */ jsx9(HeroCore, { children: "AI" })
     ] }),
-    /* @__PURE__ */ jsx10(HeroTitle, { children: labels.emptyStateTitle }),
-    /* @__PURE__ */ jsx10(HeroSubtitle, { children: labels.emptyStateSubtitle })
+    /* @__PURE__ */ jsx9(HeroTitle, { children: labels.emptyStateTitle }),
+    /* @__PURE__ */ jsx9(HeroSubtitle, { children: labels.emptyStateSubtitle })
   ] });
 };
-var EmptyShell = styled9.div`
+var EmptyShell = styled8.div`
   flex: 1;
   min-height: 0;
   display: flex;
@@ -2158,7 +2169,7 @@ var EmptyShell = styled9.div`
   gap: 16px;
   padding: 48px 24px 24px;
 `;
-var HeroMark = styled9.div`
+var HeroMark = styled8.div`
   position: relative;
   width: 108px;
   height: 108px;
@@ -2166,7 +2177,7 @@ var HeroMark = styled9.div`
   display: grid;
   place-items: center;
 `;
-var HeroOrbit = styled9.div`
+var HeroOrbit = styled8.div`
   position: absolute;
   inset: 20px;
   border-radius: 50%;
@@ -2189,7 +2200,7 @@ var HeroOrbit = styled9.div`
     transform: rotate(-22deg);
   }
 `;
-var HeroCore = styled9.div`
+var HeroCore = styled8.div`
   position: relative;
   z-index: 1;
   font-size: 28px;
@@ -2199,13 +2210,13 @@ var HeroCore = styled9.div`
   color: rgba(242, 244, 255, 0.96);
   text-shadow: 0 0 16px rgba(98, 116, 255, 0.65);
 `;
-var HeroTitle = styled9.p`
+var HeroTitle = styled8.p`
   margin: 0;
   color: rgba(255, 255, 255, 0.88);
   font-size: 16px;
   line-height: 24px;
 `;
-var HeroSubtitle = styled9.p`
+var HeroSubtitle = styled8.p`
   margin: 0;
   color: rgba(255, 255, 255, 0.72);
   font-size: 14px;
@@ -2213,7 +2224,74 @@ var HeroSubtitle = styled9.p`
 `;
 
 // src/components/chat-thread/index.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+var renderChatMessage = ({
+  message,
+  mode,
+  onConfirmationSubmit,
+  onQuestionnaireSubmit,
+  renderMessageBlock
+}) => /* @__PURE__ */ jsx10(
+  ChatMessageItem,
+  {
+    mode,
+    message,
+    onConfirmationSubmit,
+    onQuestionnaireSubmit,
+    renderMessageBlock
+  }
+);
+var renderErrorState = ({
+  error,
+  onRetry,
+  retryButtonLabel
+}) => /* @__PURE__ */ jsxs7(ErrorState, { "data-testid": "chat-thread-error-state", children: [
+  /* @__PURE__ */ jsx10(ErrorText, { children: error }),
+  onRetry ? /* @__PURE__ */ jsx10(ErrorActions, { children: /* @__PURE__ */ jsx10(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,
@@ -2226,31 +2304,45 @@ var ChatThreadView = ({
   renderMessageBlock
 }) => {
   const containerRef = useRef4(null);
-  const latestUserMessageId = useMemo3(
-    () => findLatestUserMessageId(historyMessages),
-    [historyMessages]
+  const conversationTurns = useMemo3(
+    () => groupConversationTurns(historyMessages, streamingMessage),
+    [historyMessages, streamingMessage]
   );
+  const latestTurn = conversationTurns[conversationTurns.length - 1];
+  const previousTurns = conversationTurns.slice(0, -1);
+  const latestUserMessageId = latestTurn?.userMessage?.id;
   const latestUserMessageRef = useRef4(null);
-  const pendingScrollUserMessageIdRef = useRef4(void 0);
   const reservedSpaceFrameRef = useRef4(null);
-  const [latestUserMessageReservedSpace, setLatestUserMessageReservedSpace] = useState5({ messageId: void 0, value: 0 });
-  const reservedPaddingBottom = 24 + (latestUserMessageReservedSpace.messageId === latestUserMessageId ? latestUserMessageReservedSpace.value : 0);
-  const measureLatestUserMessageReservedSpace = useCallback2((messageId) => {
+  const [latestTurnMinHeight, setLatestTurnMinHeight] = useState4(0);
+  const measureLatestTurnMinHeight = useCallback2(() => {
+    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 = useCallback2(() => {
     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;
   }, []);
   useLayoutEffect(() => {
     if (reservedSpaceFrameRef.current !== null) {
@@ -2258,12 +2350,9 @@ var ChatThreadView = ({
       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) {
@@ -2272,10 +2361,10 @@ var ChatThreadView = ({
         }
       };
     }
-    pendingScrollUserMessageIdRef.current = latestUserMessageId;
     reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
       reservedSpaceFrameRef.current = null;
-      measureLatestUserMessageReservedSpace(latestUserMessageId);
+      measureLatestTurnMinHeight();
+      scrollLatestUserMessageToTop();
     });
     return () => {
       if (reservedSpaceFrameRef.current !== null) {
@@ -2283,51 +2372,79 @@ var ChatThreadView = ({
         reservedSpaceFrameRef.current = null;
       }
     };
-  }, [latestUserMessageId, measureLatestUserMessageReservedSpace]);
+  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
   useLayoutEffect(() => {
-    if (!latestUserMessageId || pendingScrollUserMessageIdRef.current !== latestUserMessageId)
-      return;
-    if (latestUserMessageReservedSpace.messageId !== latestUserMessageId)
+    if (!latestUserMessageId)
       return;
-    latestUserMessageRef.current?.scrollIntoView({ block: "start", behavior: "smooth" });
-    pendingScrollUserMessageIdRef.current = void 0;
-  }, [latestUserMessageId, latestUserMessageReservedSpace]);
-  return /* @__PURE__ */ jsxs7(
-    Container,
-    {
-      ref: containerRef,
-      "data-testid": "chat-thread",
-      style: { paddingBottom: `${reservedPaddingBottom}px` },
-      children: [
-        /* @__PURE__ */ jsx11(
-          ChatThreadHistoryList,
-          {
-            mode: activeSessionMode,
-            historyMessages,
-            latestUserMessageId,
-            latestUserMessageRef,
-            onConfirmationSubmit,
-            onQuestionnaireSubmit,
-            renderMessageBlock
-          }
-        ),
-        streamingMessage ? /* @__PURE__ */ jsx11(StreamingGroup, { "data-testid": "chat-thread-streaming", children: /* @__PURE__ */ jsx11(MessageSlot2, { children: /* @__PURE__ */ jsx11(
-          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__ */ jsxs7(Container, { ref: containerRef, "data-testid": "chat-thread", children: [
+    previousTurns.map((turn) => /* @__PURE__ */ jsxs7(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
+      turn.userMessage ? /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
+        message: turn.userMessage,
+        mode: activeSessionMode,
+        onConfirmationSubmit,
+        onQuestionnaireSubmit,
+        renderMessageBlock
+      }) }) : null,
+      turn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
+        message,
+        mode: activeSessionMode,
+        onConfirmationSubmit,
+        onQuestionnaireSubmit,
+        renderMessageBlock
+      }) }, message.id))
+    ] }, turn.id)),
+    latestTurn ? /* @__PURE__ */ jsxs7(
+      ConversationTurn,
+      {
+        "data-testid": "chat-thread-latest-turn",
+        style: latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
+        children: [
+          latestTurn.userMessage ? /* @__PURE__ */ jsx10(
+            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__ */ jsx10(MessageSlot, { children: renderChatMessage({
+            message,
             mode: activeSessionMode,
-            message: streamingMessage,
             onConfirmationSubmit,
             onQuestionnaireSubmit,
             renderMessageBlock
-          }
-        ) }) }) : null,
-        error ? /* @__PURE__ */ jsxs7(ErrorState, { "data-testid": "chat-thread-error-state", children: [
-          /* @__PURE__ */ jsx11(ErrorText, { children: error }),
-          onRetry ? /* @__PURE__ */ jsx11(ErrorActions, { children: /* @__PURE__ */ jsx11(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 = () => {
@@ -2371,9 +2488,9 @@ var ChatThread = () => {
     [sendRef]
   );
   if (!hasSessions || messages.length === 0 && !streamingMessage) {
-    return /* @__PURE__ */ jsx11(ChatThreadEmptyState, {});
+    return /* @__PURE__ */ jsx10(ChatThreadEmptyState, {});
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10(
     ChatThreadView,
     {
       activeSessionMode,
@@ -2388,7 +2505,7 @@ var ChatThread = () => {
     }
   );
 };
-var Container = styled10.div`
+var Container = styled9.div`
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -2411,27 +2528,29 @@ var Container = styled10.div`
     background: transparent;
   }
 `;
-var MessageSlot2 = styled10.div`
+var MessageSlot = styled9.div`
   display: flex;
 `;
-var StreamingGroup = styled10.div`
-  display: contents;
+var ConversationTurn = styled9.div`
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 `;
-var ErrorText = styled10.div`
+var ErrorText = styled9.div`
   color: #ff7b72;
   font-size: 14px;
 `;
-var ErrorState = styled10.div`
+var ErrorState = styled9.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
 `;
-var ErrorActions = styled10.div`
+var ErrorActions = styled9.div`
   display: flex;
   align-items: center;
 `;
-var RetryButton = styled10.button`
+var RetryButton = styled9.button`
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.04);
@@ -2448,7 +2567,7 @@ var RetryButton = styled10.button`
 
 // src/components/chat-composer/index.tsx
 import { useEffect as useEffect5, useRef as useRef7 } from "react";
-import styled15 from "@emotion/styled";
+import styled14 from "@emotion/styled";
 
 // src/components/chat-composer/lib/chat-composer.ts
 var DRAFT_CHAT_SESSION_ID_PREFIX = "draft-session-";
@@ -2559,10 +2678,10 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef6, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef6, useState as useState6 } from "react";
 
 // src/components/chat-composer/hooks/use-composer-attachments.ts
-import { useEffect as useEffect3, useRef as useRef5, useState as useState6 } from "react";
+import { useEffect as useEffect3, useRef as useRef5, useState as useState5 } from "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) : "";
@@ -2576,7 +2695,7 @@ var releaseComposerAttachments = (attachments) => {
   attachments.forEach((attachment) => revokeObjectUrl(attachment.previewUrl));
 };
 var useComposerAttachments = () => {
-  const [attachments, setAttachments] = useState6([]);
+  const [attachments, setAttachments] = useState5([]);
   const attachmentsRef = useRef5([]);
   useEffect3(() => {
     attachmentsRef.current = attachments;
@@ -2694,9 +2813,9 @@ var useChatComposer = () => {
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const setPreferredMode = useChatStore((s) => s.setPreferredMode);
   const setSessionMode = useChatStore((s) => s.setSessionMode);
-  const [availableModels, setAvailableModels] = useState7([]);
-  const [isModelsLoading, setIsModelsLoading] = useState7(true);
-  const [isModelsError, setIsModelsError] = useState7(false);
+  const [availableModels, setAvailableModels] = useState6([]);
+  const [isModelsLoading, setIsModelsLoading] = useState6(true);
+  const [isModelsError, setIsModelsError] = useState6(false);
   const fetchModels = useCallback3(async () => {
     setIsModelsLoading(true);
     setIsModelsError(false);
@@ -2713,10 +2832,10 @@ var useChatComposer = () => {
     void fetchModels();
   }, [fetchModels]);
   const hasModels = availableModels.length > 0;
-  const [value, setValue] = useState7("");
-  const [selectedModel, setSelectedModel] = useState7("");
-  const [selectedMode, setSelectedModeLocal] = useState7(DEFAULT_CHAT_AGENT_MODE);
-  const [attachmentNotice, setAttachmentNotice] = useState7(null);
+  const [value, setValue] = useState6("");
+  const [selectedModel, setSelectedModel] = useState6("");
+  const [selectedMode, setSelectedModeLocal] = useState6(DEFAULT_CHAT_AGENT_MODE);
+  const [attachmentNotice, setAttachmentNotice] = useState6(null);
   const { attachments, appendFiles, removeAttachment, takeMessageAttachments } = useComposerAttachments();
   const abortControllerRef = useRef6(null);
   const stopRequestRef = useRef6(null);
@@ -3012,29 +3131,29 @@ var useChatComposer = () => {
 };
 
 // src/components/chat-composer/components/chat-composer-attachment-list.tsx
-import { useState as useState8 } from "react";
-import styled11 from "@emotion/styled";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
+import { useState as useState7 } from "react";
+import styled10 from "@emotion/styled";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var ChatComposerAttachmentList = ({
   attachments,
   onRemoveAttachment
 }) => {
-  const [activeImage, setActiveImage] = useState8(null);
+  const [activeImage, setActiveImage] = useState7(null);
   if (!attachments.length) {
     return null;
   }
   return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    /* @__PURE__ */ jsx12(AttachmentList, { "data-testid": "chat-composer-attachment-list", children: attachments.map((attachment) => /* @__PURE__ */ jsxs8(AttachmentCard, { children: [
-      /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx11(AttachmentList, { "data-testid": "chat-composer-attachment-list", children: attachments.map((attachment) => /* @__PURE__ */ jsxs8(AttachmentCard, { children: [
+      /* @__PURE__ */ jsx11(
         AttachmentPreviewButton,
         {
           type: "button",
           "aria-label": `${attachment.name} preview`,
           onClick: () => setActiveImage(attachment),
-          children: /* @__PURE__ */ jsx12(AttachmentThumb, { src: attachment.previewUrl, alt: attachment.name })
+          children: /* @__PURE__ */ jsx11(AttachmentThumb, { src: attachment.previewUrl, alt: attachment.name })
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx11(
         AttachmentRemoveButton,
         {
           type: "button",
@@ -3043,11 +3162,11 @@ var ChatComposerAttachmentList = ({
             event.stopPropagation();
             onRemoveAttachment(attachment.id);
           },
-          children: /* @__PURE__ */ jsx12(CloseGlyph, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx11(CloseGlyph, { "aria-hidden": "true" })
         }
       )
     ] }, attachment.id)) }),
-    activeImage ? /* @__PURE__ */ jsx12(
+    activeImage ? /* @__PURE__ */ jsx11(
       ImageViewer,
       {
         src: activeImage.previewUrl,
@@ -3057,7 +3176,7 @@ var ChatComposerAttachmentList = ({
     ) : null
   ] });
 };
-var AttachmentList = styled11.div`
+var AttachmentList = styled10.div`
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
@@ -3079,7 +3198,7 @@ var AttachmentList = styled11.div`
     background: transparent;
   }
 `;
-var AttachmentCard = styled11.div`
+var AttachmentCard = styled10.div`
   position: relative;
   width: 108px;
   height: 72px;
@@ -3088,7 +3207,7 @@ var AttachmentCard = styled11.div`
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.04);
 `;
-var AttachmentPreviewButton = styled11.button`
+var AttachmentPreviewButton = styled10.button`
   width: 100%;
   height: 100%;
   padding: 0;
@@ -3096,13 +3215,13 @@ var AttachmentPreviewButton = styled11.button`
   background: transparent;
   cursor: zoom-in;
 `;
-var AttachmentThumb = styled11.img`
+var AttachmentThumb = styled10.img`
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 `;
-var AttachmentRemoveButton = styled11.button`
+var AttachmentRemoveButton = styled10.button`
   position: absolute;
   top: 6px;
   right: 6px;
@@ -3140,7 +3259,7 @@ var AttachmentRemoveButton = styled11.button`
     background: rgba(30, 30, 35, 0.98);
   }
 `;
-var CloseGlyph = styled11.span`
+var CloseGlyph = styled10.span`
   position: relative;
   width: 11px;
   height: 11px;
@@ -3169,9 +3288,9 @@ var CloseGlyph = styled11.span`
 `;
 
 // src/components/chat-composer/components/chat-model-control.tsx
-import styled12 from "@emotion/styled";
+import styled11 from "@emotion/styled";
 import { Select } from "@xinghunm/compass-ui";
-import { jsx as jsx13, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
 var ChatModelControl = ({
   selectedModel,
   availableModels,
@@ -3190,7 +3309,7 @@ var ChatModelControl = ({
         "aria-label": "Reload",
         onClick: onReloadModels,
         children: [
-          /* @__PURE__ */ jsx13("span", { children: "Failed to load models" }),
+          /* @__PURE__ */ jsx12("span", { children: "Failed to load models" }),
           /* @__PURE__ */ jsxs9(
             ReloadIcon,
             {
@@ -3202,8 +3321,8 @@ var ChatModelControl = ({
               fill: "currentColor",
               xmlns: "http://www.w3.org/2000/svg",
               children: [
-                /* @__PURE__ */ jsx13("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__ */ jsx13("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__ */ jsx12("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__ */ jsx12("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" })
               ]
             }
           )
@@ -3212,11 +3331,11 @@ var ChatModelControl = ({
     );
   }
   if (isModelsLoading) {
-    return /* @__PURE__ */ jsx13(ModelBadge, { children: "Loading models..." });
+    return /* @__PURE__ */ jsx12(ModelBadge, { children: "Loading models..." });
   }
   if (hasModels && selectedModel) {
     if (availableModels.length > 1) {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx12(
         ModelSelect,
         {
           "data-testid": "chat-model-select",
@@ -3230,11 +3349,11 @@ var ChatModelControl = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx13(ModelBadge, { children: selectedModel });
+    return /* @__PURE__ */ jsx12(ModelBadge, { children: selectedModel });
   }
-  return /* @__PURE__ */ jsx13(ModelBadge, { children: "No model available" });
+  return /* @__PURE__ */ jsx12(ModelBadge, { children: "No model available" });
 };
-var ModelBadge = styled12.span`
+var ModelBadge = styled11.span`
   border-radius: 999px;
   border: 1px solid var(--border-hover);
   padding: 5px 12px;
@@ -3243,7 +3362,7 @@ var ModelBadge = styled12.span`
   color: var(--text-secondary);
   line-height: 12px;
 `;
-var ModelReloadButton = styled12.button`
+var ModelReloadButton = styled11.button`
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -3268,10 +3387,10 @@ var ModelReloadButton = styled12.button`
     color: rgba(255, 255, 255, 0.88);
   }
 `;
-var ReloadIcon = styled12.svg`
+var ReloadIcon = styled11.svg`
   flex-shrink: 0;
 `;
-var ModelSelect = styled12(Select)`
+var ModelSelect = styled11(Select)`
   && {
     width: auto;
     min-width: 0;
@@ -3291,16 +3410,16 @@ var ModelSelect = styled12(Select)`
 `;
 
 // src/components/chat-composer/components/chat-mode-control.tsx
-import styled13 from "@emotion/styled";
+import styled12 from "@emotion/styled";
 import { Select as Select2 } from "@xinghunm/compass-ui";
-import { jsx as jsx14 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx13 } from "@emotion/react/jsx-runtime";
 var ChatModeControl = ({
   value,
   disabled = false,
   labels,
   onChange
 }) => {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx13(
     ModeSelect,
     {
       "data-testid": "chat-mode-select",
@@ -3315,7 +3434,7 @@ var ChatModeControl = ({
     }
   );
 };
-var ModeSelect = styled13(Select2)`
+var ModeSelect = styled12(Select2)`
   && {
     flex: 0 1 auto;
     width: auto;
@@ -3336,10 +3455,10 @@ var ModeSelect = styled13(Select2)`
 `;
 
 // src/components/chat-composer/components/chat-send-actions.tsx
-import styled14 from "@emotion/styled";
+import styled13 from "@emotion/styled";
 import { Button } from "@xinghunm/compass-ui";
-import { Fragment as Fragment4, jsx as jsx15 } from "@emotion/react/jsx-runtime";
-var ArrowUpIcon = () => /* @__PURE__ */ jsx15(
+import { Fragment as Fragment4, jsx as jsx14 } from "@emotion/react/jsx-runtime";
+var ArrowUpIcon = () => /* @__PURE__ */ jsx14(
   "svg",
   {
     "aria-hidden": "true",
@@ -3348,7 +3467,7 @@ var ArrowUpIcon = () => /* @__PURE__ */ jsx15(
     viewBox: "0 0 12 12",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx15(
+    children: /* @__PURE__ */ jsx14(
       "path",
       {
         d: "M6 10V2M6 2L2 6M6 2L10 6",
@@ -3366,7 +3485,7 @@ var ChatSendActions = ({
   isStopping,
   onStop,
   onSend
-}) => /* @__PURE__ */ jsx15(Fragment4, { children: isStreaming ? /* @__PURE__ */ jsx15(
+}) => /* @__PURE__ */ jsx14(Fragment4, { children: isStreaming ? /* @__PURE__ */ jsx14(
   StopButton,
   {
     type: "button",
@@ -3376,14 +3495,14 @@ var ChatSendActions = ({
     disabled: isStopping,
     shape: "circle",
     onClick: () => void onStop(),
-    children: /* @__PURE__ */ jsx15(StopGlyph, { "aria-hidden": "true" })
+    children: isStopping ? /* @__PURE__ */ jsx14(StopSpinner, { "aria-hidden": "true", "data-testid": "chat-composer-stop-spinner" }) : /* @__PURE__ */ jsx14(StopGlyph, { "aria-hidden": "true", "data-testid": "chat-composer-stop-glyph" })
   }
-) : /* @__PURE__ */ jsx15(
+) : /* @__PURE__ */ jsx14(
   PrimaryButton,
   {
     $canSend: canSend,
     type: "button",
-    icon: /* @__PURE__ */ jsx15(ArrowUpIcon, {}),
+    icon: /* @__PURE__ */ jsx14(ArrowUpIcon, {}),
     "aria-label": "Send",
     "data-testid": "chat-composer-send",
     disabled: !canSend,
@@ -3391,7 +3510,7 @@ var ChatSendActions = ({
     onClick: () => void onSend()
   }
 ) });
-var PrimaryButton = styled14(Button)`
+var PrimaryButton = styled13(Button)`
   && {
     min-width: 24px;
     width: 24px;
@@ -3417,7 +3536,7 @@ var PrimaryButton = styled14(Button)`
     }
   }
 `;
-var StopButton = styled14(Button)`
+var StopButton = styled13(Button)`
   && {
     min-width: 24px;
     width: 24px;
@@ -3445,17 +3564,35 @@ var StopButton = styled14(Button)`
     }
   }
 `;
-var StopGlyph = styled14.span`
+var StopGlyph = styled13.span`
   width: 8px;
   height: 8px;
   border-radius: 2px;
   background: #1b1b1b;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
 `;
+var StopSpinner = styled13.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
-import { jsx as jsx16, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
-var PlusIcon = () => /* @__PURE__ */ jsx16(
+import { jsx as jsx15, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+var PlusIcon = () => /* @__PURE__ */ jsx15(
   "svg",
   {
     "aria-hidden": "true",
@@ -3464,7 +3601,7 @@ var PlusIcon = () => /* @__PURE__ */ jsx16(
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx16("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
+    children: /* @__PURE__ */ jsx15("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
   }
 );
 var ChatComposerView = ({
@@ -3524,8 +3661,8 @@ var ChatComposerView = ({
     event.preventDefault();
     onPasteImages(imageFiles);
   };
-  return /* @__PURE__ */ jsx16(Container2, { children: /* @__PURE__ */ jsxs10(Surface, { "data-testid": "chat-composer-surface", children: [
-    enableImageAttachments ? /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx15(Container2, { children: /* @__PURE__ */ jsxs10(Surface, { "data-testid": "chat-composer-surface", children: [
+    enableImageAttachments ? /* @__PURE__ */ jsx15(
       "input",
       {
         ref: imageInputRef,
@@ -3537,15 +3674,15 @@ var ChatComposerView = ({
         onChange: handlePickImages
       }
     ) : null,
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx15(
       ChatComposerAttachmentList,
       {
         attachments,
         onRemoveAttachment
       }
     ),
-    attachmentNotice === "limit_reached" ? /* @__PURE__ */ jsx16(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
-    /* @__PURE__ */ jsx16(
+    attachmentNotice === "limit_reached" ? /* @__PURE__ */ jsx15(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
+    /* @__PURE__ */ jsx15(
       Input,
       {
         "data-testid": "chat-composer-input",
@@ -3556,18 +3693,18 @@ var ChatComposerView = ({
         placeholder
       }
     ),
-    /* @__PURE__ */ jsx16(Footer, { children: /* @__PURE__ */ jsxs10(Actions2, { "data-testid": "chat-composer-actions", children: [
-      enableImageAttachments ? /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx15(Footer, { children: /* @__PURE__ */ jsxs10(Actions2, { "data-testid": "chat-composer-actions", children: [
+      enableImageAttachments ? /* @__PURE__ */ jsx15(
         AttachButton,
         {
           type: "button",
           "data-testid": "chat-composer-attach-image",
           "aria-label": "Attach image",
           onClick: () => imageInputRef.current?.click(),
-          children: /* @__PURE__ */ jsx16(PlusIcon, {})
+          children: /* @__PURE__ */ jsx15(PlusIcon, {})
         }
       ) : null,
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx15(
         ChatModeControl,
         {
           value: selectedMode,
@@ -3576,7 +3713,7 @@ var ChatComposerView = ({
           onChange: onSelectedModeChange
         }
       ),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx15(
         ChatModelControl,
         {
           selectedModel,
@@ -3588,7 +3725,7 @@ var ChatComposerView = ({
           onReloadModels
         }
       ),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx15(
         ChatSendActions,
         {
           canSend,
@@ -3616,7 +3753,7 @@ var ChatComposer = () => {
     plan: labels.modeLabelPlan,
     agent: labels.modeLabelAgent
   };
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx15(
     ChatComposerView,
     {
       value: state.value,
@@ -3646,10 +3783,10 @@ var ChatComposer = () => {
     }
   );
 };
-var Container2 = styled15.div`
+var Container2 = styled14.div`
   padding: 0 16px 16px;
 `;
-var Surface = styled15.div`
+var Surface = styled14.div`
   background: var(--border-color);
   border-radius: 20px;
   border: 1px solid var(--border-hover);
@@ -3658,7 +3795,7 @@ var Surface = styled15.div`
     0 12px 36px rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(10px);
 `;
-var AttachmentNotice = styled15.div`
+var AttachmentNotice = styled14.div`
   margin: 10px 12px 0;
   padding: 8px 10px;
   border-radius: 10px;
@@ -3668,7 +3805,7 @@ var AttachmentNotice = styled15.div`
   font-size: 12px;
   line-height: 1.4;
 `;
-var Input = styled15.textarea`
+var Input = styled14.textarea`
   width: 100%;
   min-height: 96px;
   resize: none;
@@ -3690,14 +3827,14 @@ var Input = styled15.textarea`
     display: none;
   }
 `;
-var Footer = styled15.div`
+var Footer = styled14.div`
   display: flex;
   align-items: flex-end;
   justify-content: stretch;
   gap: 16px;
   padding: 0 14px 14px;
 `;
-var Actions2 = styled15.div`
+var Actions2 = styled14.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -3706,7 +3843,7 @@ var Actions2 = styled15.div`
   justify-content: flex-end;
   gap: 8px;
 `;
-var AttachButton = styled15.button`
+var AttachButton = styled14.button`
   width: 28px;
   height: 28px;
   display: grid;
@@ -3723,42 +3860,42 @@ var AttachButton = styled15.button`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-import styled17 from "@emotion/styled";
+import styled16 from "@emotion/styled";
 
 // src/components/chat-conversation-list/components/chat-session-item.tsx
-import { memo as memo3 } from "react";
-import styled16 from "@emotion/styled";
-import { jsx as jsx17, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
-var ChatSessionItem = memo3(
+import { memo as memo2 } from "react";
+import styled15 from "@emotion/styled";
+import { jsx as jsx16, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
+var ChatSessionItem = memo2(
   ({ session, isActive, modeLabel, onClick }) => {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx16(
       SessionButton,
       {
         type: "button",
         "data-active": isActive,
         onClick: () => onClick(session.sessionId),
         children: /* @__PURE__ */ jsxs11(SessionMeta, { children: [
-          /* @__PURE__ */ jsx17(SessionTitle, { children: session.title }),
-          /* @__PURE__ */ jsx17(ModeBadge, { children: modeLabel })
+          /* @__PURE__ */ jsx16(SessionTitle, { children: session.title }),
+          /* @__PURE__ */ jsx16(ModeBadge, { children: modeLabel })
         ] })
       }
     );
   }
 );
 ChatSessionItem.displayName = "ChatSessionItem";
-var SessionMeta = styled16.div`
+var SessionMeta = styled15.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
 `;
-var SessionTitle = styled16.span`
+var SessionTitle = styled15.span`
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var SessionButton = styled16.button`
+var SessionButton = styled15.button`
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 12px;
@@ -3772,7 +3909,7 @@ var SessionButton = styled16.button`
     background: rgba(255, 255, 255, 0.08);
   }
 `;
-var ModeBadge = styled16.span`
+var ModeBadge = styled15.span`
   flex-shrink: 0;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -3784,7 +3921,7 @@ var ModeBadge = styled16.span`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
 var ChatConversationList = () => {
   const { labels } = useChatContext();
   const sessions = useChatStore((s) => s.sessions);
@@ -3809,10 +3946,10 @@ var ChatConversationList = () => {
   };
   return /* @__PURE__ */ jsxs12(Container3, { children: [
     /* @__PURE__ */ jsxs12(Toolbar, { children: [
-      /* @__PURE__ */ jsx18(Title4, { children: "Sessions" }),
-      /* @__PURE__ */ jsx18(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: handleCreateSession, children: labels.newChat })
+      /* @__PURE__ */ jsx17(Title4, { children: "Sessions" }),
+      /* @__PURE__ */ jsx17(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: handleCreateSession, children: labels.newChat })
     ] }),
-    /* @__PURE__ */ jsx18(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx17(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ jsx17(
       ChatSessionItem,
       {
         session,
@@ -3824,7 +3961,7 @@ var ChatConversationList = () => {
     )) })
   ] });
 };
-var Container3 = styled17.aside`
+var Container3 = styled16.aside`
   width: 280px;
   min-width: 280px;
   border-right: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
@@ -3832,18 +3969,18 @@ var Container3 = styled17.aside`
   flex-direction: column;
   background: rgba(255, 255, 255, 0.02);
 `;
-var Toolbar = styled17.div`
+var Toolbar = styled16.div`
   padding: 20px 16px 12px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 `;
-var Title4 = styled17.h2`
+var Title4 = styled16.h2`
   margin: 0;
   font-size: 14px;
   color: var(--text-secondary);
 `;
-var CreateButton = styled17.button`
+var CreateButton = styled16.button`
   border: none;
   border-radius: 12px;
   padding: 12px 14px;
@@ -3852,7 +3989,7 @@ var CreateButton = styled17.button`
   text-align: left;
   cursor: pointer;
 `;
-var List2 = styled17.div`
+var List2 = styled16.div`
   padding: 0 12px 16px;
   display: flex;
   flex-direction: column;
@@ -3861,8 +3998,8 @@ var List2 = styled17.div`
 `;
 
 // src/components/ai-chat/index.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
-var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE__ */ jsx19(
+import { jsx as jsx18, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE__ */ jsx18(
   ConfigProvider,
   {
     theme: {
@@ -3897,23 +4034,23 @@ var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE_
         }
       }
     },
-    children: /* @__PURE__ */ jsx19(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ jsxs13(Root, { "data-testid": "ai-chat", children: [
-      showConversationList ? /* @__PURE__ */ jsx19(ChatConversationList, {}) : null,
+    children: /* @__PURE__ */ jsx18(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ jsxs13(Root, { "data-testid": "ai-chat", children: [
+      showConversationList ? /* @__PURE__ */ jsx18(ChatConversationList, {}) : null,
       /* @__PURE__ */ jsxs13(Workspace, { children: [
-        /* @__PURE__ */ jsx19(ChatThread, {}),
-        /* @__PURE__ */ jsx19(ChatComposer, {})
+        /* @__PURE__ */ jsx18(ChatThread, {}),
+        /* @__PURE__ */ jsx18(ChatComposer, {})
       ] })
     ] }) })
   }
 );
-var Root = styled18.div`
+var Root = styled17.div`
   display: flex;
   width: 100%;
   height: 100%;
   min-height: 0;
   overflow: hidden;
 `;
-var Workspace = styled18.section`
+var Workspace = styled17.section`
   flex: 1;
   display: flex;
   flex-direction: column;