@xinghunm/ai-chat 1.4.4 → 1.6.0

package/dist/index.mjs

@@ -1,10 +1,17 @@
 // src/components/ai-chat/index.tsx
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect12 } from "react";
 import styled17 from "@emotion/styled";
 import { ConfigProvider } from "@xinghunm/compass-ui";
 
 // src/components/ai-chat-provider/index.tsx
-import { useRef, useMemo, useState, useEffect, useLayoutEffect } from "react";
+import {
+  useCallback,
+  useRef,
+  useMemo,
+  useState,
+  useEffect,
+  useLayoutEffect
+} from "react";
 import axios2 from "axios";
 
 // src/context/chat-context.ts
@@ -49,6 +56,7 @@ var DEFAULT_AI_CHAT_LABELS = {
   questionnaireMultiSelectHint: "Multiple choice",
   questionnaireOtherOptionLabel: "Other",
   questionnaireOtherPlaceholder: "Other",
+  questionnaireExpired: "Selection expired.",
   modelLoading: "Loading models...",
   modelLoadFailed: "Failed to load models",
   modelUnavailable: "No model available",
@@ -57,7 +65,9 @@ var DEFAULT_AI_CHAT_LABELS = {
   removeSkillAriaLabel: "Remove skill",
   sessionHistoryLoading: "Loading conversations...",
   sessionHistoryLoadFailed: "Failed to load conversations",
-  sessionHistoryEmpty: "No conversations yet"
+  sessionHistoryEmpty: "No conversations yet",
+  questionnaireTitle: "Plan Options",
+  questionnaireConfirmInTime: "Please confirm within {{seconds}} seconds"
 };
 
 // src/lib/chat-session.ts
@@ -97,6 +107,42 @@ var mergeOlderHistoryMessages = (sessionId, olderMessages, currentMessages) => {
   );
   return [...uniqueOlderMessages, ...currentMessages];
 };
+var mergeLocalQuestionnaireState = (localMessages, incomingMessages) => {
+  if (!localMessages?.length)
+    return incomingMessages;
+  return incomingMessages.map((incomingMsg) => {
+    const localMsg = localMessages.find((lm) => lm.id === incomingMsg.id);
+    if (!localMsg)
+      return incomingMsg;
+    if (localMsg.blocks && !incomingMsg.blocks) {
+      return {
+        ...incomingMsg,
+        blocks: localMsg.blocks
+      };
+    }
+    if (localMsg.blocks && incomingMsg.blocks) {
+      const nextBlocks = incomingMsg.blocks.map((incomingBlock, index3) => {
+        const localBlock = localMsg.blocks?.[index3];
+        const isSameQuestionnaire = incomingBlock.type === "questionnaire" && localBlock?.type === "questionnaire" && (localBlock.questionnaire.questionnaireId === incomingBlock.questionnaire.questionnaireId || Boolean(localBlock.questionnaire.blockKey) && localBlock.questionnaire.blockKey === incomingBlock.questionnaire.blockKey);
+        if (isSameQuestionnaire) {
+          return {
+            ...incomingBlock,
+            questionnaire: {
+              ...incomingBlock.questionnaire,
+              questionnaireId: localBlock.questionnaire.questionnaireId ?? incomingBlock.questionnaire.questionnaireId,
+              answers: localBlock.questionnaire.answers ?? incomingBlock.questionnaire.answers,
+              status: localBlock.questionnaire.status ?? incomingBlock.questionnaire.status,
+              statusMessage: localBlock.questionnaire.statusMessage ?? incomingBlock.questionnaire.statusMessage
+            }
+          };
+        }
+        return incomingBlock;
+      });
+      return { ...incomingMsg, blocks: nextBlocks };
+    }
+    return incomingMsg;
+  });
+};
 var resolveSessionTitleFromMessage = (message) => {
   const trimmedContent = message.content.trim();
   if (trimmedContent) {
@@ -479,10 +525,12 @@ var createChatStore = (initialState) => createStore((set, get) => ({
   },
   hydrateHistorySessionMessages: (sessionId, messages) => {
     const state = get();
+    const localMessages = state.messagesBySession[sessionId] ?? [];
+    const nextMessages = mergeLocalQuestionnaireState(localMessages, messages);
     set({
       messagesBySession: {
         ...state.messagesBySession,
-        [sessionId]: normalizeHistoryMessages(sessionId, messages)
+        [sessionId]: normalizeHistoryMessages(sessionId, nextMessages)
       },
       sessionMessageLoadStatusBySession: {
         ...state.sessionMessageLoadStatusBySession,
@@ -500,10 +548,12 @@ var createChatStore = (initialState) => createStore((set, get) => ({
   },
   hydrateHistorySessionMessagesPage: (sessionId, page) => {
     const state = get();
+    const localMessages = state.messagesBySession[sessionId] ?? [];
+    const nextMessages = mergeLocalQuestionnaireState(localMessages, page.messages);
     set({
       messagesBySession: {
         ...state.messagesBySession,
-        [sessionId]: normalizeHistoryMessages(sessionId, page.messages)
+        [sessionId]: normalizeHistoryMessages(sessionId, nextMessages)
       },
       sessionMessageLoadStatusBySession: {
         ...state.sessionMessageLoadStatusBySession,
@@ -662,7 +712,11 @@ var createChatStore = (initialState) => createStore((set, get) => ({
         hasUpdatedBlock = true;
         return {
           ...block,
-          questionnaire: { ...block.questionnaire, answers: { ...answers } }
+          questionnaire: {
+            ...block.questionnaire,
+            answers: { ...answers },
+            status: "submitted"
+          }
         };
       });
       if (!hasUpdatedBlock)
@@ -1031,6 +1085,7 @@ var AiChatProvider = (props) => {
     onLoadMoreSessions,
     onSelectHistorySession,
     onLoadMoreHistoryMessages,
+    renderSessionItemActions,
     enableImageAttachments = true,
     children
   } = props;
@@ -1043,6 +1098,17 @@ var AiChatProvider = (props) => {
   });
   const stopRef = useRef(async (_sessionId) => {
   });
+  const [stopSession, setStopSession] = useState(
+    () => async (_sessionId) => {
+    }
+  );
+  const registerStopSession = useCallback(
+    (handler) => {
+      stopRef.current = handler;
+      setStopSession(() => handler);
+    },
+    []
+  );
   const defaultApiBaseUrl = "apiBaseUrl" in props ? props.apiBaseUrl : void 0;
   const defaultAuthToken = "authToken" in props ? props.authToken : void 0;
   const defaultTransformStreamPacket = "transformStreamPacket" in props ? props.transformStreamPacket : void 0;
@@ -1102,6 +1168,8 @@ var AiChatProvider = (props) => {
       sendRef,
       retryRef,
       stopRef,
+      stopSession,
+      registerStopSession,
       renderMessageBlock,
       handleQuestionnaireSubmit,
       handleConfirmationSubmit,
@@ -1111,7 +1179,8 @@ var AiChatProvider = (props) => {
       historySessionList,
       onLoadMoreSessions,
       onSelectHistorySession,
-      onLoadMoreHistoryMessages
+      onLoadMoreHistoryMessages,
+      renderSessionItemActions
     }),
     [
       axiosInstance,
@@ -1127,10 +1196,13 @@ var AiChatProvider = (props) => {
       onLoadMoreSessions,
       onLoadMoreHistoryMessages,
       onSelectHistorySession,
+      renderSessionItemActions,
       renderMessageBlock,
       sendRef,
       retryRef,
       stopRef,
+      stopSession,
+      registerStopSession,
       store,
       transport
     ]
@@ -1139,7 +1211,7 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback4, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
 import styled9 from "@emotion/styled";
 
 // src/context/use-chat-context.ts
@@ -1160,7 +1232,7 @@ var useChatStore = (selector) => {
 var CHAT_THREAD_SCROLL_TOP_GAP = 16;
 
 // src/components/chat-thread/components/chat-message-item.tsx
-import { Fragment, memo, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useState as useState3 } from "react";
+import { Fragment, memo, useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useState as useState4 } from "react";
 import styled7 from "@emotion/styled";
 import { keyframes } from "@emotion/react";
 import ReactMarkdown from "react-markdown";
@@ -1169,7 +1241,7 @@ import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 
 // src/components/chat-thread/hooks/use-chat-message-reveal.ts
-import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useReducer, useRef as useRef2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useReducer, useRef as useRef2 } from "react";
 
 // src/components/chat-thread/lib/message-reveal.ts
 var STREAM_REVEAL_TICK_MS = 36;
@@ -1216,11 +1288,23 @@ 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 revealedStreamingMessages = /* @__PURE__ */ new Set();
+var markMessageAsRevealed = (id) => {
+  if (revealedStreamingMessages.size > 500) {
+    const firstKey = revealedStreamingMessages.keys().next().value;
+    if (firstKey !== void 0) {
+      revealedStreamingMessages.delete(firstKey);
+    }
+  }
+  revealedStreamingMessages.add(id);
+};
 var createRevealState = ({
   isAssistantStreaming,
-  targetUnitCount
+  targetUnitCount,
+  messageId
 }) => {
-  const initialDisplayedUnitCount = isAssistantStreaming ? 0 : targetUnitCount;
+  const hasBeenRevealed = revealedStreamingMessages.has(messageId);
+  const initialDisplayedUnitCount = isAssistantStreaming && !hasBeenRevealed ? 0 : targetUnitCount;
   return {
     batchedTargetUnitCount: initialDisplayedUnitCount,
     displayedUnitCount: initialDisplayedUnitCount,
@@ -1230,7 +1314,11 @@ var createRevealState = ({
 var revealReducer = (state, action) => {
   switch (action.type) {
     case "reset-message":
-      return createRevealState(action);
+      return createRevealState({
+        isAssistantStreaming: action.isAssistantStreaming,
+        targetUnitCount: action.targetUnitCount,
+        messageId: action.messageId
+      });
     case "commit-batched-target": {
       const nextDisplayedUnitCount = action.role === "assistant" ? getNextDisplayedUnitCount({
         currentUnits: state.displayedUnitCount,
@@ -1287,12 +1375,13 @@ var useChatMessageReveal = (message) => {
     revealReducer,
     {
       isAssistantStreaming,
-      targetUnitCount: targetUnits.length
+      targetUnitCount: targetUnits.length,
+      messageId: message.id
     },
     createRevealState
   );
   const { batchedTargetUnitCount, displayedUnitCount, isFreshBlockActive } = state;
-  const commitBatchedTargetUnitCount = useCallback(
+  const commitBatchedTargetUnitCount = useCallback2(
     (nextTargetUnitCount) => {
       batchedTargetUnitCountRef.current = nextTargetUnitCount;
       dispatch({
@@ -1319,7 +1408,8 @@ var useChatMessageReveal = (message) => {
     dispatch({
       type: "reset-message",
       isAssistantStreaming,
-      targetUnitCount: targetUnits.length
+      targetUnitCount: targetUnits.length,
+      messageId: message.id
     });
   }, [isAssistantStreaming, message.id, targetUnits.length]);
   useEffect2(() => {
@@ -1398,6 +1488,11 @@ var useChatMessageReveal = (message) => {
       tone: "settled"
     }
   ];
+  useEffect2(() => {
+    if (isAssistantStreaming && displayedUnitCount > 0) {
+      markMessageAsRevealed(message.id);
+    }
+  }, [isAssistantStreaming, displayedUnitCount, message.id]);
   return {
     isAssistantStreaming,
     isFreshBlockActive,
@@ -1989,12 +2084,99 @@ var Value = styled3.span`
 
 // src/components/chat-thread/components/questionnaire-card.tsx
 import {
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useRef as useRef3,
-  useState as useState2
+  useState as useState3
 } from "react";
 import styled4 from "@emotion/styled";
 
+// src/components/chat-thread/components/use-countdown-seconds.ts
+import { useEffect as useEffect4, useState as useState2 } from "react";
+var countdownDeadlineByKey = /* @__PURE__ */ new Map();
+var countdownCleanupTimerByKey = /* @__PURE__ */ new Map();
+var countdownMountCountByKey = /* @__PURE__ */ new Map();
+var clearCountdownEntry = (storageKey) => {
+  const cleanupTimerId = countdownCleanupTimerByKey.get(storageKey);
+  if (cleanupTimerId !== void 0) {
+    window.clearTimeout(cleanupTimerId);
+    countdownCleanupTimerByKey.delete(storageKey);
+  }
+  countdownDeadlineByKey.delete(storageKey);
+};
+var scheduleCountdownCleanup = (storageKey, deadline) => {
+  const existingCleanupTimerId = countdownCleanupTimerByKey.get(storageKey);
+  if (existingCleanupTimerId !== void 0) {
+    return;
+  }
+  const delayMs = Math.max(0, deadline - Date.now());
+  const cleanupTimerId = window.setTimeout(() => {
+    if ((countdownMountCountByKey.get(storageKey) ?? 0) > 0) {
+      countdownCleanupTimerByKey.delete(storageKey);
+      return;
+    }
+    clearCountdownEntry(storageKey);
+  }, delayMs);
+  countdownCleanupTimerByKey.set(storageKey, cleanupTimerId);
+};
+var getCountdownDeadline = (storageKey, initialSeconds) => {
+  const existingDeadline = countdownDeadlineByKey.get(storageKey);
+  if (existingDeadline !== void 0) {
+    return existingDeadline;
+  }
+  const nextDeadline = Date.now() + Math.max(0, initialSeconds) * 1e3;
+  countdownDeadlineByKey.set(storageKey, nextDeadline);
+  scheduleCountdownCleanup(storageKey, nextDeadline);
+  return nextDeadline;
+};
+var getRemainingSeconds = (deadline) => Math.max(0, Math.ceil((deadline - Date.now()) / 1e3));
+var useCountdownSeconds = ({
+  storageKey,
+  initialSeconds,
+  active
+}) => {
+  const [remainingSeconds, setRemainingSeconds] = useState2(
+    () => getRemainingSeconds(getCountdownDeadline(storageKey, initialSeconds))
+  );
+  useEffect4(() => {
+    countdownMountCountByKey.set(storageKey, (countdownMountCountByKey.get(storageKey) ?? 0) + 1);
+    return () => {
+      const nextCount = (countdownMountCountByKey.get(storageKey) ?? 1) - 1;
+      if (nextCount <= 0) {
+        countdownMountCountByKey.delete(storageKey);
+        return;
+      }
+      countdownMountCountByKey.set(storageKey, nextCount);
+    };
+  }, [storageKey]);
+  useEffect4(() => {
+    setRemainingSeconds(getRemainingSeconds(getCountdownDeadline(storageKey, initialSeconds)));
+  }, [initialSeconds, storageKey]);
+  useEffect4(() => {
+    if (active) {
+      return;
+    }
+    clearCountdownEntry(storageKey);
+  }, [active, storageKey]);
+  useEffect4(() => {
+    if (remainingSeconds > 0) {
+      return;
+    }
+    clearCountdownEntry(storageKey);
+  }, [remainingSeconds, storageKey]);
+  useEffect4(() => {
+    if (!active || remainingSeconds <= 0) {
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      setRemainingSeconds(getRemainingSeconds(getCountdownDeadline(storageKey, initialSeconds)));
+    }, 1e3);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [active, initialSeconds, remainingSeconds, storageKey]);
+  return remainingSeconds;
+};
+
 // src/components/chat-thread/components/questionnaire-card-helpers.ts
 var OTHER_OPTION_VALUE = "__other__";
 var getQuestionnaireQuestion = (questionnaire) => questionnaire.question;
@@ -2301,7 +2483,10 @@ var DEFAULT_QUESTIONNAIRE_CARD_LABELS = {
   submitFailed: "Failed to submit. Please try again.",
   multiSelectHint: "Multiple choice",
   otherOptionLabel: "Other",
-  otherPlaceholder: "Other"
+  otherPlaceholder: "Other",
+  expired: "Selection expired.",
+  questionnaireTitle: "Plan Options",
+  questionnaireConfirmInTime: "Please confirm within {{seconds}} seconds"
 };
 var stopInputClickPropagation = (event) => {
   event.stopPropagation();
@@ -2363,30 +2548,39 @@ var QuestionnaireCardInner = ({
 }) => {
   const questionnaireRef = useRef3(questionnaire);
   const otherInputRefs = useRef3({});
-  const [answers, setAnswers] = useState2(
+  const [answers, setAnswers] = useState3(
     () => createInitialAnswers(questionnaire)
   );
-  const [otherDrafts, setOtherDrafts] = useState2(
+  const [otherDrafts, setOtherDrafts] = useState3(
     () => createInitialOtherDrafts(questionnaire)
   );
-  const [errorMessage, setErrorMessage] = useState2(null);
-  const [isSubmitting, setIsSubmitting] = useState2(false);
-  const [isSubmitted, setIsSubmitted] = useState2(false);
-  const [pendingFocusQuestionId, setPendingFocusQuestionId] = useState2(null);
+  const [errorMessage, setErrorMessage] = useState3(null);
+  const [isSubmitting, setIsSubmitting] = useState3(false);
+  const [isSubmitted, setIsSubmitted] = useState3(() => questionnaire.status === "submitted");
+  const [pendingFocusQuestionId, setPendingFocusQuestionId] = useState3(null);
   const resolvedLabels = {
     ...DEFAULT_QUESTIONNAIRE_CARD_LABELS,
     ...labels
   };
-  const hasExternalFailureStatus = questionnaire.status === "expired" || questionnaire.status === "failed";
+  const remainingSeconds = useCountdownSeconds({
+    storageKey: questionnaire.blockKey ?? `questionnaire:${questionnaire.questionnaireId}`,
+    initialSeconds: questionnaire.timeoutSec ?? 0,
+    active: questionnaire.timeoutSec !== void 0 && questionnaire.timeoutSec > 0 && !isSubmitted && questionnaire.status !== "expired" && questionnaire.status !== "failed" && interactive
+  });
+  const isExpired = questionnaire.status === "expired" || questionnaire.timeoutSec !== void 0 && questionnaire.timeoutSec > 0 && remainingSeconds <= 0;
+  const hasExternalFailureStatus = isExpired || questionnaire.status === "failed";
   const question = getQuestionnaireQuestion(questionnaire);
-  const visibleErrorMessage = questionnaire.statusMessage ?? errorMessage;
-  const isInteractionLocked = !interactive || isSubmitting || isSubmitted || hasExternalFailureStatus;
+  const visibleErrorMessage = questionnaire.statusMessage ?? (isExpired ? null : errorMessage);
+  const isInteractionLocked = !interactive || isSubmitting || isSubmitted || hasExternalFailureStatus || questionnaire.status === "submitted";
   questionnaireRef.current = questionnaire;
-  useEffect4(() => {
+  useEffect5(() => {
     setAnswers(createInitialAnswers(questionnaireRef.current));
     setOtherDrafts(createInitialOtherDrafts(questionnaireRef.current));
-  }, [questionnaire.answers]);
-  useEffect4(() => {
+    if (questionnaireRef.current.status === "submitted") {
+      setIsSubmitted(true);
+    }
+  }, [questionnaire.answers, questionnaire.status]);
+  useEffect5(() => {
     if (!pendingFocusQuestionId || isInteractionLocked) {
       return;
     }
@@ -2636,42 +2830,69 @@ var QuestionnaireCardInner = ({
     }
   };
   return /* @__PURE__ */ jsxs3(Card4, { "data-testid": "questionnaire-card", children: [
-    questionnaire.description ? /* @__PURE__ */ jsx5(Description, { children: questionnaire.description }) : null,
-    /* @__PURE__ */ jsx5(QuestionList, { children: /* @__PURE__ */ jsxs3(QuestionCard, { children: [
-      /* @__PURE__ */ jsxs3(QuestionLabel, { children: [
-        question.label,
-        question.required ? /* @__PURE__ */ jsx5(Required, { children: "*" }) : null
-      ] }),
-      question.kind === "multi_select" ? /* @__PURE__ */ jsx5(QuestionHint, { children: resolvedLabels.multiSelectHint }) : null,
-      renderQuestion(question)
-    ] }, question.id) }),
-    visibleErrorMessage ? /* @__PURE__ */ jsx5(ErrorMessage, { "data-testid": "questionnaire-error", children: visibleErrorMessage }) : null,
-    isSubmitted ? /* @__PURE__ */ jsx5(SuccessMessage, { "data-testid": "questionnaire-success", children: resolvedLabels.submitted }) : interactive && !hasExternalFailureStatus ? /* @__PURE__ */ jsx5(
-      SubmitButton,
-      {
-        type: "button",
-        "data-testid": "questionnaire-submit",
-        disabled: isInteractionLocked,
-        onClick: () => {
-          void handleSubmit();
-        },
-        children: isSubmitting ? resolvedLabels.submitting : questionnaire.submitLabel ?? "Submit"
-      }
-    ) : null
+    /* @__PURE__ */ jsx5(Header2, { children: /* @__PURE__ */ jsx5(Eyebrow2, { children: resolvedLabels.questionnaireTitle }) }),
+    /* @__PURE__ */ jsxs3(Content, { children: [
+      questionnaire.description ? /* @__PURE__ */ jsx5(Description, { children: questionnaire.description }) : null,
+      /* @__PURE__ */ jsx5(QuestionList, { children: /* @__PURE__ */ jsxs3(QuestionCard, { children: [
+        /* @__PURE__ */ jsxs3(QuestionLabel, { children: [
+          question.label,
+          question.required ? /* @__PURE__ */ jsx5(Required, { children: "*" }) : null
+        ] }),
+        question.kind === "multi_select" ? /* @__PURE__ */ jsx5(QuestionHint, { children: resolvedLabels.multiSelectHint }) : null,
+        renderQuestion(question)
+      ] }, question.id) }),
+      visibleErrorMessage ? /* @__PURE__ */ jsx5(ErrorMessage, { "data-testid": "questionnaire-error", children: visibleErrorMessage }) : null,
+      /* @__PURE__ */ jsx5(Footer, { children: isSubmitted ? /* @__PURE__ */ jsx5(SuccessMessage, { "data-testid": "questionnaire-success", children: resolvedLabels.submitted }) : isExpired ? /* @__PURE__ */ jsx5(ExpiredTag, { "data-testid": "questionnaire-expired", children: resolvedLabels.expired }) : interactive ? /* @__PURE__ */ jsxs3(FooterActionRow, { "data-testid": "questionnaire-card-actions", children: [
+        remainingSeconds > 0 && /* @__PURE__ */ jsx5(MetaText, { "data-testid": "questionnaire-countdown", children: resolvedLabels.questionnaireConfirmInTime?.replace(
+          "{{seconds}}",
+          String(remainingSeconds)
+        ) ?? `\u8BF7\u5728 ${remainingSeconds} \u79D2\u5185\u786E\u8BA4` }),
+        /* @__PURE__ */ jsx5(
+          SubmitButton,
+          {
+            type: "button",
+            "data-testid": "questionnaire-submit",
+            disabled: isInteractionLocked,
+            onClick: () => {
+              void handleSubmit();
+            },
+            children: isSubmitting ? resolvedLabels.submitting : questionnaire.submitLabel ?? "Submit"
+          }
+        )
+      ] }) : null })
+    ] })
   ] });
 };
 var QuestionnaireCard = (props) => /* @__PURE__ */ jsx5(QuestionnaireCardInner, { ...props }, getQuestionnaireStateKey(props.questionnaire));
 var Card4 = styled4.section`
-  display: grid;
-  gap: 14px;
-  padding: 16px;
-  border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  overflow: hidden;
+  background: var(--bg-primary);
+  border-radius: 16px;
+  border: 1px solid var(--border-hover);
+`;
+var Header2 = styled4.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  padding: 22px 12px 16px;
+  border-bottom: 1px solid var(--border-hover);
+`;
+var Eyebrow2 = styled4.div`
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--text-primary);
+  line-height: 22px;
+`;
+var Content = styled4.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 12px;
 `;
 var Description = styled4.p`
   margin: 0;
-  color: rgba(255, 255, 255, 0.72);
+  color: var(--text-secondary);
   font-size: 13px;
 `;
 var QuestionList = styled4.div`
@@ -2682,11 +2903,11 @@ var QuestionCard = styled4.div`
   display: grid;
   gap: 10px;
   padding: 12px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.04);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.02);
 `;
 var QuestionLabel = styled4.div`
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   font-size: 14px;
   font-weight: 600;
 `;
@@ -2713,11 +2934,11 @@ var OptionChoiceItem = styled4.div`
   gap: 12px;
   width: 100%;
   text-align: left;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-hover);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.02);
   padding: 2px 12px;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   cursor: pointer;
   transition:
     border-color 140ms ease,
@@ -2726,8 +2947,8 @@ var OptionChoiceItem = styled4.div`
   outline: none;
 
   &[data-selected='true'] {
-    border-color: rgba(126, 160, 255, 0.42);
-    background: linear-gradient(180deg, rgba(82, 114, 255, 0.18) 0%, rgba(82, 114, 255, 0.1) 100%);
+    border-color: rgba(51, 133, 255, 0.42);
+    background: linear-gradient(180deg, rgba(51, 133, 255, 0.18) 0%, rgba(51, 133, 255, 0.1) 100%);
     transform: translateY(-1px);
   }
 
@@ -2736,8 +2957,8 @@ var OptionChoiceItem = styled4.div`
   }
 
   &:focus-visible {
-    border-color: rgba(126, 160, 255, 0.52);
-    box-shadow: 0 0 0 1px rgba(126, 160, 255, 0.18);
+    border-color: rgba(51, 133, 255, 0.52);
+    box-shadow: 0 0 0 1px rgba(51, 133, 255, 0.18);
   }
 
   &[tabindex='-1'] {
@@ -2754,16 +2975,16 @@ var OptionChoiceMarker = styled4.span`
   width: 28px;
   height: 28px;
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.04);
-  color: rgba(255, 255, 255, 0.65);
+  border: 1px solid var(--border-hover);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--text-secondary);
   font-size: 12px;
   font-weight: 700;
 
   &[data-selected='true'] {
-    border-color: rgba(126, 160, 255, 0.38);
-    background: rgba(126, 160, 255, 0.2);
-    color: rgba(255, 255, 255, 0.96);
+    border-color: rgba(51, 133, 255, 0.38);
+    background: rgba(51, 133, 255, 0.2);
+    color: var(--text-primary);
   }
 `;
 var OptionChoiceContent = styled4.span`
@@ -2783,47 +3004,41 @@ var OptionChoiceLabel = styled4.span`
 `;
 var TextInput = styled4.input`
   width: 100%;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
+  border: 1px solid var(--border-hover);
+  border-radius: 8px;
   background: rgba(13, 15, 21, 0.55);
-  color: rgba(255, 255, 255, 0.92);
+  color: var(--text-primary);
   font-size: 13px;
   padding: 10px 12px;
 
   &::placeholder {
-    color: rgba(255, 255, 255, 0.34);
+    color: var(--text-secondary);
+    opacity: 0.5;
   }
 `;
 var InlineOtherInput = styled4.input`
   width: 100%;
-  margin-top: 0;
-
-  .compass-input-wrapper {
-    min-height: 30px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-    background: rgba(13, 15, 21, 0.55);
-    box-shadow: none;
-    padding: 2px 9px;
-  }
-
-  .compass-input-wrapper:hover {
-    border-color: rgba(126, 160, 255, 0.28);
-  }
+  border: 1px solid var(--border-hover);
+  border-radius: 6px;
+  background: rgba(13, 15, 21, 0.45);
+  color: var(--text-primary);
+  font-size: 13px;
+  padding: 6px 10px;
+  outline: none;
+  transition: border-color 140ms ease;
 
-  .compass-input-wrapper:focus-within {
-    border-color: rgba(126, 160, 255, 0.42);
-    box-shadow: 0 0 0 1px rgba(126, 160, 255, 0.14);
+  &:hover {
+    border-color: rgba(51, 133, 255, 0.28);
   }
 
-  .compass-input-input {
-    color: rgba(255, 255, 255, 0.92);
-    font-size: 13px;
-    line-height: 1.2;
+  &:focus {
+    border-color: rgba(51, 133, 255, 0.42);
+    box-shadow: 0 0 0 1px rgba(51, 133, 255, 0.14);
   }
 
-  .compass-input-input::placeholder {
-    color: rgba(255, 255, 255, 0.34);
+  &::placeholder {
+    color: var(--text-secondary);
+    opacity: 0.5;
   }
 `;
 var NumberInputRow = styled4.div`
@@ -2832,32 +3047,80 @@ var NumberInputRow = styled4.div`
   gap: 10px;
 `;
 var Unit = styled4.span`
-  color: rgba(255, 255, 255, 0.58);
+  color: var(--text-secondary);
   font-size: 12px;
   white-space: nowrap;
 `;
 var ErrorMessage = styled4.div`
-  color: rgba(255, 145, 145, 0.96);
+  font-size: 13px;
+  line-height: 1.5;
+  color: rgba(255, 207, 207, 0.92);
+`;
+var Footer = styled4.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+`;
+var FooterActionRow = styled4.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-left: auto;
+  justify-content: flex-end;
+`;
+var MetaText = styled4.span`
+  font-weight: 500;
   font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 17px;
+`;
+var ExpiredTag = styled4.span`
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(214, 224, 236, 0.9);
 `;
 var SuccessMessage = styled4.div`
-  color: rgba(164, 255, 210, 0.96);
-  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  background: rgba(190, 246, 202, 0.14);
+  border: 1px solid rgba(190, 246, 202, 0.24);
+  color: rgba(227, 255, 233, 0.94);
 `;
 var SubmitButton = styled4.button`
-  justify-self: flex-start;
-  border: none;
-  border-radius: 999px;
-  background: linear-gradient(180deg, #7ea0ff 0%, #4a6fff 100%);
-  color: #081127;
-  font-size: 12px;
-  font-weight: 700;
-  padding: 10px 14px;
+  padding: 9px 16px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  font-weight: 500;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.96);
+  background: linear-gradient(180deg, #3385ff 0%, #1f6ef2 100%);
+  line-height: 14px;
   cursor: pointer;
+  transition:
+    transform 160ms ease,
+    opacity 160ms ease;
 
   &:disabled {
-    cursor: default;
-    opacity: 0.72;
+    cursor: progress;
+    opacity: 0.68;
+    transform: none;
+  }
+
+  &:not(:disabled):hover {
+    transform: translateY(-1px);
   }
 `;
 
@@ -2865,7 +3128,7 @@ var SubmitButton = styled4.button`
 import styled5 from "@emotion/styled";
 import { jsx as jsx6, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
 var ResultSummaryCard = ({ summary }) => /* @__PURE__ */ jsxs4(Card5, { "data-testid": "result-summary-card", "data-status": summary.status, children: [
-  /* @__PURE__ */ jsx6(Eyebrow2, { children: summary.status }),
+  /* @__PURE__ */ jsx6(Eyebrow3, { children: summary.status }),
   /* @__PURE__ */ jsx6(Headline, { children: summary.headline }),
   /* @__PURE__ */ jsx6(Details, { children: summary.details.map((detail) => /* @__PURE__ */ jsx6(Detail, { children: detail }, detail)) })
 ] });
@@ -2885,7 +3148,7 @@ var Card5 = styled5.section`
     border-color: rgba(255, 122, 122, 0.24);
   }
 `;
-var Eyebrow2 = styled5.span`
+var Eyebrow3 = styled5.span`
   color: rgba(255, 255, 255, 0.58);
   font-size: 11px;
   font-weight: 700;
@@ -2910,7 +3173,7 @@ var Detail = styled5.li`
 
 // src/components/chat-thread/components/image-viewer.tsx
 import styled6 from "@emotion/styled";
-import { useEffect as useEffect5, useRef as useRef4 } from "react";
+import { useEffect as useEffect6, useRef as useRef4 } from "react";
 import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
 var Overlay = styled6.div`
   position: fixed;
@@ -2930,7 +3193,7 @@ var Img = styled6.img`
 `;
 var ImageViewer = ({ src, alt, onClose }) => {
   const overlayRef = useRef4(null);
-  useEffect5(() => {
+  useEffect6(() => {
     const handleKey = (e) => {
       if (e.key === "Escape")
         onClose();
@@ -2938,7 +3201,7 @@ var ImageViewer = ({ src, alt, onClose }) => {
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [onClose]);
-  useEffect5(() => {
+  useEffect6(() => {
     overlayRef.current?.focus();
   }, []);
   const stopPropagation = (e) => e.stopPropagation();
@@ -3004,10 +3267,10 @@ var useUserMessageCollapse = ({
   freshContent,
   settledContent
 }) => {
-  const [isCollapsible, setIsCollapsible] = useState3(false);
-  const [isExpanded, setIsExpanded] = useState3(false);
-  const [bodyStackElement, setBodyStackElement] = useState3(null);
-  const syncCollapseState = useCallback2(
+  const [isCollapsible, setIsCollapsible] = useState4(false);
+  const [isExpanded, setIsExpanded] = useState4(false);
+  const [bodyStackElement, setBodyStackElement] = useState4(null);
+  const syncCollapseState = useCallback3(
     (element) => {
       const nextCollapsible = enabled && (element?.scrollHeight ?? 0) > USER_MESSAGE_COLLAPSE_HEIGHT_PX;
       setIsCollapsible(nextCollapsible);
@@ -3017,7 +3280,7 @@ var useUserMessageCollapse = ({
     },
     [enabled]
   );
-  const bodyStackRef = useCallback2(
+  const bodyStackRef = useCallback3(
     (node) => {
       setBodyStackElement(node);
       syncCollapseState(node);
@@ -3192,7 +3455,7 @@ var ChatMessageItemView = ({
   renderMessageBlock
 }) => {
   const { labels, messageRenderOrder = "blocks-first" } = useChatContext();
-  const [activeImage, setActiveImage] = useState3(void 0);
+  const [activeImage, setActiveImage] = useState4(void 0);
   const {
     displayedBlocks,
     displayedContent,
@@ -3209,8 +3472,9 @@ var ChatMessageItemView = ({
   const hasMarkdownOnlyBlocks = hasStructuredBlocks && blocks.every((block) => block.type === "markdown");
   const hasTextContent = Boolean(settledContent || freshContent || displayedContent);
   const shouldRenderStructuredBlocks = hasStructuredBlocks && !(isAssistantStreaming && hasMarkdownOnlyBlocks && hasTextContent);
-  const canSubmitConfirmation = typeof onConfirmationSubmit === "function";
-  const canSubmitQuestionnaire = typeof onQuestionnaireSubmit === "function";
+  const isInteractionDisabled = message.status === "stopped" || message.status === "error";
+  const canSubmitConfirmation = typeof onConfirmationSubmit === "function" && !isInteractionDisabled;
+  const canSubmitQuestionnaire = typeof onQuestionnaireSubmit === "function" && !isInteractionDisabled;
   const shouldShowStreamingCaret = isAssistantStreaming && (!shouldRenderStructuredBlocks || hasTextContent);
   const isUserMessage = message.role === "user";
   const messageRenderMode = isUserMessage ? "plain-text" : "markdown";
@@ -3291,7 +3555,10 @@ var ChatMessageItemView = ({
               submitFailed: labels.questionnaireSubmitFailed,
               multiSelectHint: labels.questionnaireMultiSelectHint,
               otherOptionLabel: labels.questionnaireOtherOptionLabel,
-              otherPlaceholder: labels.questionnaireOtherPlaceholder
+              otherPlaceholder: labels.questionnaireOtherPlaceholder,
+              expired: labels.questionnaireExpired,
+              questionnaireTitle: labels.questionnaireTitle,
+              questionnaireConfirmInTime: labels.questionnaireConfirmInTime
             },
             onSubmit: canSubmitQuestionnaire ? (submission) => onQuestionnaireSubmit({
               ...submission,
@@ -3394,7 +3661,7 @@ var ChatMessageItemView = ({
   })();
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsxs5(Bubble, { "data-role": message.role, "data-status": message.status ?? "done", children: [
-      shouldRenderHeader ? /* @__PURE__ */ jsxs5(Header2, { children: [
+      shouldRenderHeader ? /* @__PURE__ */ jsxs5(Header3, { children: [
         isAssistantStreaming ? /* @__PURE__ */ jsxs5(
           StreamingIndicator,
           {
@@ -3419,7 +3686,7 @@ var ChatMessageItemView = ({
         ) : null,
         isStoppedAssistant ? /* @__PURE__ */ jsx8(StatusTag, { "data-testid": "chat-message-stopped-tag", children: labels.stoppedResponse }) : null
       ] }) : null,
-      /* @__PURE__ */ jsxs5(Content, { "data-testid": "chat-message-content", children: [
+      /* @__PURE__ */ jsxs5(Content2, { "data-testid": "chat-message-content", children: [
         skills.length ? /* @__PURE__ */ jsx8(SkillTagList, { "data-testid": "chat-message-skill-tags", children: skills.map((skill) => /* @__PURE__ */ jsx8(SkillTag, { children: skill }, skill)) }) : null,
         shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ jsx8(
           ContentStack,
@@ -3499,7 +3766,7 @@ var Bubble = styled7.article`
     border-radius: 16px;
   }
 `;
-var Header2 = styled7.div`
+var Header3 = styled7.div`
   display: flex;
   align-items: center;
   gap: 10px;
@@ -3541,7 +3808,7 @@ var CollapseToggle = styled7.button`
     color: rgba(255, 255, 255, 0.92);
   }
 `;
-var Content = styled7.div`
+var Content2 = styled7.div`
   color: rgba(255, 255, 255, 0.92);
   font-size: 14px;
   line-height: 1.6;
@@ -3927,10 +4194,10 @@ var ChatThreadView = ({
   const isPinnedRef = useRef5(true);
   const lastHistoryMessageIdRef = useRef5(latestHistoryMessage?.id);
   const lastStreamingMessageIdRef = useRef5(streamingMessage?.id);
-  const [latestTurnMinHeight, setLatestTurnMinHeight] = useState4(0);
-  const [isDetached, setIsDetached] = useState4(false);
-  const [pendingNewMessageCount, setPendingNewMessageCount] = useState4(0);
-  const measureLatestTurnMinHeight = useCallback3(() => {
+  const [latestTurnMinHeight, setLatestTurnMinHeight] = useState5(0);
+  const [isDetached, setIsDetached] = useState5(false);
+  const [pendingNewMessageCount, setPendingNewMessageCount] = useState5(0);
+  const measureLatestTurnMinHeight = useCallback4(() => {
     const container = containerRef.current;
     if (!container)
       return;
@@ -3940,7 +4207,7 @@ var ChatThreadView = ({
     const nextMinHeight = Math.max(0, container.clientHeight - paddingTop - paddingBottom);
     setLatestTurnMinHeight((current) => current === nextMinHeight ? current : nextMinHeight);
   }, []);
-  const scrollToBottom = useCallback3((force = false) => {
+  const scrollToBottom = useCallback4((force = false) => {
     const container = containerRef.current;
     if (!container)
       return false;
@@ -3956,12 +4223,12 @@ var ChatThreadView = ({
     }
     return true;
   }, []);
-  const markThreadPinned = useCallback3(() => {
+  const markThreadPinned = useCallback4(() => {
     isPinnedRef.current = true;
     setIsDetached(false);
     setPendingNewMessageCount(0);
   }, []);
-  const scrollToBottomAndPin = useCallback3(
+  const scrollToBottomAndPin = useCallback4(
     (force = false) => {
       const didScroll = scrollToBottom(force);
       if (!didScroll)
@@ -3970,7 +4237,7 @@ var ChatThreadView = ({
     },
     [markThreadPinned, scrollToBottom]
   );
-  const handleLoadPreviousMessages = useCallback3(async () => {
+  const handleLoadPreviousMessages = useCallback4(async () => {
     const container = containerRef.current;
     if (!container || !onLoadPreviousMessages || isLoadingPreviousMessages) {
       return;
@@ -3995,7 +4262,7 @@ var ChatThreadView = ({
       nextContainer.scrollTop = nextContainer.scrollHeight - previousScrollHeight + previousScrollTop;
     });
   }, [isLoadingPreviousMessages, onLoadPreviousMessages]);
-  const handleContainerScroll = useCallback3(() => {
+  const handleContainerScroll = useCallback4(() => {
     const container = containerRef.current;
     if (!container)
       return;
@@ -4224,13 +4491,13 @@ var ChatThread = () => {
     onLoadMoreHistoryMessages,
     labels
   } = useChatContext();
-  const handleRetry = useCallback3(() => {
+  const handleRetry = useCallback4(() => {
     if (!activeSessionId)
       return;
     clearSessionError(activeSessionId);
     void retryRef.current(activeSessionId);
   }, [activeSessionId, clearSessionError, retryRef]);
-  const handleQuestionnaireSubmit = useCallback3(
+  const handleQuestionnaireSubmit = useCallback4(
     async (submission) => {
       const sourceSessionId = activeSessionId;
       if (customQuestionnaireSubmit) {
@@ -4265,7 +4532,7 @@ var ChatThread = () => {
     },
     [activeSessionId, customQuestionnaireSubmit, preferredMode, sendRef, updateQA]
   );
-  const handleConfirmation = useCallback3(
+  const handleConfirmation = useCallback4(
     async (submission) => {
       const sourceSessionId = activeSessionId;
       if (customConfirmationSubmit) {
@@ -4284,7 +4551,7 @@ var ChatThread = () => {
     },
     [activeSessionId, customConfirmationSubmit, preferredMode, sendRef]
   );
-  const handleLoadPreviousMessages = useCallback3(async () => {
+  const handleLoadPreviousMessages = useCallback4(async () => {
     if (!activeSession || !onLoadMoreHistoryMessages || !historyMessagePagination?.hasMorePrevious || !historyMessagePagination.previousCursor || historyMessagePagination.isLoadingPrevious) {
       return;
     }
@@ -4323,13 +4590,14 @@ var ChatThread = () => {
   if (!hasSessions || messages.length === 0 && !streamingMessage) {
     return /* @__PURE__ */ jsx10(ChatThreadEmptyState, {});
   }
+  const displayError = error2 && !(error2.toLowerCase().includes("plan option timeout") || error2.toLowerCase().includes("plan_option_timeout") || error2.toLowerCase().includes("selection expired") || labels.questionnaireExpired && error2.includes(labels.questionnaireExpired)) ? error2 : void 0;
   return /* @__PURE__ */ jsx10(
     ChatThreadView,
     {
       activeMode: preferredMode,
       historyMessages: messages,
       streamingMessage,
-      error: error2,
+      error: displayError,
       isLoadingPreviousMessages: historyMessagePagination?.isLoadingPrevious,
       previousMessagesError: historyMessagePagination?.error,
       retryButtonLabel: labels.retryButton,
@@ -4478,7 +4746,7 @@ var ScrollToLatestBadge = styled9.span`
 `;
 
 // src/components/chat-composer/index.tsx
-import { useCallback as useCallback8, useEffect as useEffect9, useLayoutEffect as useLayoutEffect6, useRef as useRef11, useState as useState10 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect10, useLayoutEffect as useLayoutEffect6, useRef as useRef11, useState as useState11 } from "react";
 import styled14 from "@emotion/styled";
 
 // ../../node_modules/.pnpm/@floating-ui+react@0.27.16_react-dom@18.3.1_react@18.3.1/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
@@ -7076,10 +7344,10 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef10, useState as useState8 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect9, useRef as useRef10, useState as useState9 } from "react";
 
 // src/components/chat-composer/hooks/use-composer-attachments.ts
-import { useEffect as useEffect7, useRef as useRef9, useState as useState7 } from "react";
+import { useEffect as useEffect8, useRef as useRef9, useState as useState8 } 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) : "";
@@ -7093,12 +7361,12 @@ var releaseComposerAttachments = (attachments) => {
   attachments.forEach((attachment) => revokeObjectUrl(attachment.previewUrl));
 };
 var useComposerAttachments = () => {
-  const [attachments, setAttachments] = useState7([]);
+  const [attachments, setAttachments] = useState8([]);
   const attachmentsRef = useRef9([]);
-  useEffect7(() => {
+  useEffect8(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
-  useEffect7(
+  useEffect8(
     () => () => {
       releaseComposerAttachments(attachmentsRef.current);
     },
@@ -7246,16 +7514,16 @@ var useChatComposer = () => {
   const setSessionError = useChatStore((s) => s.setSessionError);
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const setPreferredMode = useChatStore((s) => s.setPreferredMode);
-  const [availableModels, setAvailableModels] = useState8([]);
-  const [isModelsLoading, setIsModelsLoading] = useState8(true);
-  const [isModelsError, setIsModelsError] = useState8(false);
-  const [availableSkills, setAvailableSkills] = useState8(
+  const [availableModels, setAvailableModels] = useState9([]);
+  const [isModelsLoading, setIsModelsLoading] = useState9(true);
+  const [isModelsError, setIsModelsError] = useState9(false);
+  const [availableSkills, setAvailableSkills] = useState9(
     () => getCachedSkills(skillsLoader).skills
   );
-  const [isSkillsLoading, setIsSkillsLoading] = useState8(
+  const [isSkillsLoading, setIsSkillsLoading] = useState9(
     () => Boolean(skillsLoader) && !getCachedSkills(skillsLoader).resolved
   );
-  const fetchModels = useCallback7(async () => {
+  const fetchModels = useCallback8(async () => {
     setIsModelsLoading(true);
     setIsModelsError(false);
     try {
@@ -7267,16 +7535,16 @@ var useChatComposer = () => {
       setIsModelsLoading(false);
     }
   }, [modelsLoader]);
-  useEffect8(() => {
+  useEffect9(() => {
     void fetchModels();
   }, [fetchModels]);
-  useEffect8(() => {
+  useEffect9(() => {
     activeSkillsLoaderRef.current = skillsLoader;
     const cachedSkills = getCachedSkills(skillsLoader);
     setAvailableSkills(cachedSkills.skills);
     setIsSkillsLoading(Boolean(skillsLoader) && !cachedSkills.resolved);
   }, [skillsLoader]);
-  const fetchSkills = useCallback7(async () => {
+  const fetchSkills = useCallback8(async () => {
     if (!skillsLoader) {
       setAvailableSkills([]);
       setIsSkillsLoading(false);
@@ -7306,35 +7574,35 @@ var useChatComposer = () => {
       }
     }
   }, [skillsLoader]);
-  useEffect8(() => {
+  useEffect9(() => {
     void fetchSkills();
   }, [fetchSkills]);
   const hasModels = availableModels.length > 0;
-  const [value, setValue] = useState8("");
-  const [selectedModel, setSelectedModel] = useState8("");
-  const [selectedMode, setSelectedModeLocal] = useState8(DEFAULT_CHAT_AGENT_MODE);
-  const [selectedSkills, setSelectedSkills] = useState8([]);
-  const [attachmentNotice, setAttachmentNotice] = useState8(null);
+  const [value, setValue] = useState9("");
+  const [selectedModel, setSelectedModel] = useState9("");
+  const [selectedMode, setSelectedModeLocal] = useState9(DEFAULT_CHAT_AGENT_MODE);
+  const [selectedSkills, setSelectedSkills] = useState9([]);
+  const [attachmentNotice, setAttachmentNotice] = useState9(null);
   const { attachments, appendFiles, removeAttachment, takeMessageAttachments } = useComposerAttachments();
   const abortControllerBySessionRef = useRef10(/* @__PURE__ */ new Map());
   const stopRequestBySessionRef = useRef10(/* @__PURE__ */ new Map());
   const lastRequestBySessionRef = useRef10(/* @__PURE__ */ new Map());
   const previousActiveSessionIdRef = useRef10(activeSessionId);
-  useEffect8(() => {
+  useEffect9(() => {
     setSelectedModel(
       (current) => resolveSelectedChatModel({ currentModel: current, availableModels, isModelsLoading })
     );
   }, [availableModels, isModelsLoading]);
-  useEffect8(() => {
+  useEffect9(() => {
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
   }, [preferredMode]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (previousActiveSessionIdRef.current !== activeSessionId) {
       setSelectedSkills([]);
       previousActiveSessionIdRef.current = activeSessionId;
     }
   }, [activeSessionId]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!attachmentNotice)
       return;
     const timeoutId = window.setTimeout(
@@ -7351,11 +7619,11 @@ var useChatComposer = () => {
     window.clearTimeout(stopRequest.timeoutId);
     stopRequest.timeoutId = null;
   };
-  const clearStopRequest = useCallback7((sessionId) => {
+  const clearStopRequest = useCallback8((sessionId) => {
     clearStopTimeout(sessionId);
     stopRequestBySessionRef.current.delete(sessionId);
   }, []);
-  const moveSessionRuntimeState = useCallback7(
+  const moveSessionRuntimeState = useCallback8(
     (previousSessionId, nextSessionId) => {
       if (previousSessionId === nextSessionId) {
         return;
@@ -7373,7 +7641,7 @@ var useChatComposer = () => {
     },
     []
   );
-  const finalizeStop = useCallback7(
+  const finalizeStop = useCallback8(
     (sessionId) => {
       const stopRequest = stopRequestBySessionRef.current.get(sessionId);
       if (stopRequest) {
@@ -7390,7 +7658,7 @@ var useChatComposer = () => {
     },
     [clearStopRequest, finalizeStoppedStreamingMessage]
   );
-  const runStream = useCallback7(
+  const runStream = useCallback8(
     async ({
       localSessionId,
       sessionId,
@@ -7515,7 +7783,7 @@ var useChatComposer = () => {
       store
     ]
   );
-  const send = useCallback7(
+  const send = useCallback8(
     async (contentOverride, options) => {
       const content = (contentOverride ?? value).trim();
       const includeComposerAttachments = options?.includeComposerAttachments ?? true;
@@ -7595,7 +7863,7 @@ var useChatComposer = () => {
       store
     ]
   );
-  const openSkillPicker = useCallback7(() => {
+  const openSkillPicker = useCallback8(() => {
     setValue((current) => {
       const matchedSkillQuery = current.match(/(^|\s)\/([^\s/]*)$/);
       if (matchedSkillQuery && matchedSkillQuery.index !== void 0) {
@@ -7608,7 +7876,7 @@ var useChatComposer = () => {
       return /\s$/.test(current) ? `${current}/` : `${current} /`;
     });
   }, []);
-  const stopSession = useCallback7(
+  const stopSession = useCallback8(
     async (sessionId) => {
       const storeState = store.getState();
       const isSessionStreaming = storeState.isStreamingBySession[sessionId] ?? false;
@@ -7718,14 +7986,14 @@ var useChatComposer = () => {
 };
 
 // src/components/chat-composer/components/chat-composer-attachment-list.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import styled10 from "@emotion/styled";
 import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
 var ChatComposerAttachmentList = ({
   attachments,
   onRemoveAttachment
 }) => {
-  const [activeImage, setActiveImage] = useState9(null);
+  const [activeImage, setActiveImage] = useState10(null);
   if (!attachments.length) {
     return null;
   }
@@ -8391,6 +8659,7 @@ var ChatComposerView = ({
   modelLoadingLabel,
   modelLoadFailedLabel,
   modelUnavailableLabel,
+  modeAccessory,
   onValueChange,
   onPickImages,
   onPasteImages,
@@ -8406,9 +8675,9 @@ var ChatComposerView = ({
 }) => {
   const imageInputRef = useRef11(null);
   const inputRef = useRef11(null);
-  const [isComposerExpandable, setIsComposerExpandable] = useState10(false);
-  const [isComposerExpanded, setIsComposerExpanded] = useState10(false);
-  const [activeSkillNavigation, setActiveSkillNavigation] = useState10({
+  const [isComposerExpandable, setIsComposerExpandable] = useState11(false);
+  const [isComposerExpanded, setIsComposerExpanded] = useState11(false);
+  const [activeSkillNavigation, setActiveSkillNavigation] = useState11({
     queryKey: "",
     index: 0
   });
@@ -8451,13 +8720,13 @@ var ChatComposerView = ({
     ],
     whileElementsMounted: autoUpdate
   });
-  const setSkillMenuReference = useCallback8(
+  const setSkillMenuReference = useCallback9(
     (element) => {
       refs.setReference(element);
     },
     [refs]
   );
-  const setSkillMenuFloating = useCallback8(
+  const setSkillMenuFloating = useCallback9(
     (element) => {
       refs.setFloating(element);
     },
@@ -8614,7 +8883,7 @@ var ChatComposerView = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs11(Footer, { children: [
+      /* @__PURE__ */ jsxs11(Footer2, { children: [
         /* @__PURE__ */ jsxs11(LeadingActions, { "data-testid": "chat-composer-leading-actions", children: [
           enableImageAttachments ? /* @__PURE__ */ jsx16(
             AttachButton,
@@ -8644,7 +8913,8 @@ var ChatComposerView = ({
               labels: modeLabels,
               onChange: onSelectedModeChange
             }
-          )
+          ),
+          modeAccessory
         ] }),
         /* @__PURE__ */ jsxs11(TrailingActions, { "data-testid": "chat-composer-trailing-actions", children: [
           /* @__PURE__ */ jsx16(
@@ -8702,22 +8972,35 @@ var ChatComposerView = ({
     ) }) : null
   ] });
 };
-var ChatComposer = () => {
-  const { labels, sendRef, retryRef, stopRef, enableImageAttachments } = useChatContext();
+var ChatComposer = ({
+  renderModeAccessory
+} = {}) => {
+  const {
+    labels,
+    sendRef,
+    retryRef,
+    registerStopSession = () => {
+    },
+    enableImageAttachments
+  } = useChatContext();
   const { state, actions } = useChatComposer();
   const { send, retry } = actions;
-  useEffect9(() => {
+  useEffect10(() => {
     sendRef.current = send;
     retryRef.current = async (sessionId) => {
       retry(sessionId);
     };
-    stopRef.current = actions.stopSession;
-  }, [actions.stopSession, retry, retryRef, send, sendRef, stopRef]);
+    registerStopSession(actions.stopSession);
+  }, [actions.stopSession, registerStopSession, retry, retryRef, send, sendRef]);
   const modeLabels = {
     ask: labels.modeLabelAsk,
     plan: labels.modeLabelPlan,
     agent: labels.modeLabelAgent
   };
+  const modeAccessory = renderModeAccessory?.({
+    selectedMode: state.selectedMode,
+    disabled: state.isStreaming
+  });
   return /* @__PURE__ */ jsx16(
     ChatComposerView,
     {
@@ -8747,6 +9030,7 @@ var ChatComposer = () => {
       modelLoadingLabel: labels.modelLoading,
       modelLoadFailedLabel: labels.modelLoadFailed,
       modelUnavailableLabel: labels.modelUnavailable,
+      modeAccessory,
       onValueChange: actions.setValue,
       onPickImages: actions.pickImages,
       onPasteImages: actions.pasteImages,
@@ -8954,7 +9238,7 @@ var ComposerExpandButton = styled14.button`
     color: rgba(255, 255, 255, 0.92);
   }
 `;
-var Footer = styled14.div`
+var Footer2 = styled14.div`
   grid-area: footer;
   display: flex;
   align-items: center;
@@ -9035,26 +9319,37 @@ var SkillButton = styled14.button`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-import { useEffect as useEffect10, useRef as useRef12 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect11, useRef as useRef12 } from "react";
 import styled16 from "@emotion/styled";
 
 // src/components/chat-conversation-list/components/chat-session-item.tsx
 import { memo as memo2 } from "react";
 import styled15 from "@emotion/styled";
-import { jsx as jsx17 } from "@emotion/react/jsx-runtime";
-var ChatSessionItem = memo2(({ session, isActive, onClick }) => {
-  return /* @__PURE__ */ jsx17(
-    SessionButton,
-    {
-      type: "button",
-      "data-active": isActive,
-      "data-testid": `chat-session-item-${session.sessionId}`,
-      onClick: () => onClick(session.sessionId),
-      children: /* @__PURE__ */ jsx17(SessionTitle, { children: session.title })
-    }
-  );
-});
+import { jsx as jsx17, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+var ChatSessionItem = memo2(
+  ({ session, isActive, onClick, actions }) => {
+    return /* @__PURE__ */ jsxs12(SessionRow, { "data-active": isActive, children: [
+      /* @__PURE__ */ jsx17(
+        SessionButton,
+        {
+          type: "button",
+          "data-active": isActive,
+          "data-testid": `chat-session-item-${session.sessionId}`,
+          onClick: () => onClick(session.sessionId),
+          children: /* @__PURE__ */ jsx17(SessionTitle, { children: session.title })
+        }
+      ),
+      actions ? /* @__PURE__ */ jsx17(SessionActions, { "data-testid": `chat-session-item-actions-${session.sessionId}`, children: actions }) : null
+    ] });
+  }
+);
 ChatSessionItem.displayName = "ChatSessionItem";
+var SessionRow = styled15.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+`;
 var SessionTitle = styled15.span`
   display: block;
   min-width: 0;
@@ -9063,6 +9358,8 @@ var SessionTitle = styled15.span`
   white-space: nowrap;
 `;
 var SessionButton = styled15.button`
+  flex: 1;
+  min-width: 0;
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 12px;
@@ -9095,6 +9392,12 @@ var SessionButton = styled15.button`
     background: rgba(255, 255, 255, 0.08);
   }
 `;
+var SessionActions = styled15.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+`;
 
 // src/components/chat-conversation-list/lib/history-session-selection.ts
 var shouldLoadHistorySessionMessages = ({
@@ -9115,7 +9418,7 @@ var shouldLoadHistorySessionMessages = ({
 };
 
 // src/components/chat-conversation-list/index.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
 var SCROLL_LOAD_MORE_THRESHOLD_PX = 80;
 var shouldLoadMoreSessions = ({
   scrollTop,
@@ -9124,12 +9427,37 @@ var shouldLoadMoreSessions = ({
   threshold = SCROLL_LOAD_MORE_THRESHOLD_PX
 }) => scrollHeight - scrollTop - clientHeight <= threshold;
 var isHistorySessionMessagesPage = (value) => typeof value === "object" && value !== null && Array.isArray(value.messages);
+var matchesHydratedHistorySessions = (renderedHistorySessionIds, historySessionIds) => {
+  if (renderedHistorySessionIds.length === historySessionIds.length) {
+    return renderedHistorySessionIds.every(
+      (sessionId, index3) => sessionId === historySessionIds[index3]
+    );
+  }
+  if (renderedHistorySessionIds.length !== historySessionIds.length + 1) {
+    return false;
+  }
+  const matchesWithoutLeadingExtra = renderedHistorySessionIds.slice(1).every((sessionId, index3) => sessionId === historySessionIds[index3]);
+  if (matchesWithoutLeadingExtra) {
+    return true;
+  }
+  return renderedHistorySessionIds.slice(0, -1).every((sessionId, index3) => sessionId === historySessionIds[index3]);
+};
 var ChatConversationList = () => {
-  const { labels, historySessionList, onLoadMoreSessions, onSelectHistorySession, store } = useChatContext();
+  const {
+    labels,
+    historySessionList,
+    onLoadMoreSessions,
+    onSelectHistorySession,
+    renderSessionItemActions,
+    stopSession = async (_sessionId) => {
+    },
+    store
+  } = useChatContext();
   const localSessions = useChatStore((s) => s.sessions);
   const activeSessionId = useChatStore((s) => s.activeSessionId);
   const startNewChat = useChatStore((s) => s.startNewChat);
   const setActiveSession = useChatStore((s) => s.setActiveSession);
+  const isStreamingBySession = useChatStore((s) => s.isStreamingBySession);
   const hydrateHistorySessions = useChatStore((s) => s.hydrateHistorySessions);
   const hydrateHistorySessionMessages = useChatStore((s) => s.hydrateHistorySessionMessages);
   const hydrateHistorySessionMessagesPage = useChatStore((s) => s.hydrateHistorySessionMessagesPage);
@@ -9138,12 +9466,13 @@ var ChatConversationList = () => {
   );
   const isLoadingMoreRef = useRef12(false);
   const hasSeenLoadingMoreRef = useRef12(false);
-  useEffect10(() => {
+  const listRef = useRef12(null);
+  useEffect11(() => {
     if (!historySessionList)
       return;
     hydrateHistorySessions(historySessionList.sessions);
   }, [historySessionList, hydrateHistorySessions]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (historySessionList?.isLoading) {
       hasSeenLoadingMoreRef.current = true;
       return;
@@ -9153,28 +9482,55 @@ var ChatConversationList = () => {
       isLoadingMoreRef.current = false;
     }
   }, [historySessionList?.isLoading]);
-  useEffect10(() => {
+  useEffect11(() => {
     isLoadingMoreRef.current = false;
     hasSeenLoadingMoreRef.current = false;
   }, [historySessionList?.sessions.length, historySessionList?.hasMore]);
   const sessions = localSessions;
-  const handleSessionListScroll = (event) => {
-    if (!historySessionList?.hasMore || historySessionList.isLoading || !onLoadMoreSessions || isLoadingMoreRef.current) {
+  const hasMoreSessions = historySessionList?.hasMore ?? false;
+  const isHistorySessionListLoading = historySessionList?.isLoading ?? false;
+  const renderedHistorySessionIds = sessions.filter((session) => !isDraftChatSessionId(session.sessionId)).map((session) => session.sessionId);
+  const isHistorySessionListHydrated = !historySessionList || matchesHydratedHistorySessions(
+    renderedHistorySessionIds,
+    historySessionList.sessions.map((session) => session.sessionId)
+  );
+  const requestLoadMoreSessions = useCallback10(() => {
+    if (!hasMoreSessions || isHistorySessionListLoading || !onLoadMoreSessions || isLoadingMoreRef.current) {
       return;
     }
-    const target = event.currentTarget;
-    if (shouldLoadMoreSessions({
-      scrollTop: target.scrollTop,
-      clientHeight: target.clientHeight,
-      scrollHeight: target.scrollHeight
-    })) {
-      isLoadingMoreRef.current = true;
-      void Promise.resolve(onLoadMoreSessions()).catch(() => {
-        isLoadingMoreRef.current = false;
-        hasSeenLoadingMoreRef.current = false;
-      });
+    isLoadingMoreRef.current = true;
+    void Promise.resolve(onLoadMoreSessions()).catch(() => {
+      isLoadingMoreRef.current = false;
+      hasSeenLoadingMoreRef.current = false;
+    });
+  }, [hasMoreSessions, isHistorySessionListLoading, onLoadMoreSessions]);
+  const maybeLoadMoreSessions = useCallback10(
+    (target) => {
+      if (target.clientHeight <= 0 || target.scrollHeight <= 0) {
+        return;
+      }
+      if (shouldLoadMoreSessions({
+        scrollTop: target.scrollTop,
+        clientHeight: target.clientHeight,
+        scrollHeight: target.scrollHeight
+      })) {
+        requestLoadMoreSessions();
+      }
+    },
+    [requestLoadMoreSessions]
+  );
+  useEffect11(() => {
+    if (!listRef.current || !isHistorySessionListHydrated) {
+      return;
     }
-  };
+    maybeLoadMoreSessions(listRef.current);
+  }, [isHistorySessionListHydrated, hasMoreSessions, localSessions.length, maybeLoadMoreSessions]);
+  const handleSessionListScroll = useCallback10(
+    (event) => {
+      maybeLoadMoreSessions(event.currentTarget);
+    },
+    [maybeLoadMoreSessions]
+  );
   const handleSelectSession = async (sessionId) => {
     setActiveSession(sessionId);
     const session = sessions.find((item) => item.sessionId === sessionId);
@@ -9211,18 +9567,26 @@ var ChatConversationList = () => {
       );
     }
   };
-  return /* @__PURE__ */ jsxs12(Container3, { children: [
-    /* @__PURE__ */ jsxs12(Toolbar, { children: [
+  return /* @__PURE__ */ jsxs13(Container3, { children: [
+    /* @__PURE__ */ jsxs13(Toolbar, { children: [
       /* @__PURE__ */ jsx18(Title3, { children: labels.sessionsTitle }),
       /* @__PURE__ */ jsx18(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: startNewChat, children: labels.newChat })
     ] }),
-    /* @__PURE__ */ jsxs12(List2, { "data-testid": "chat-session-list", onScroll: handleSessionListScroll, children: [
+    /* @__PURE__ */ jsxs13(List2, { ref: listRef, "data-testid": "chat-session-list", onScroll: handleSessionListScroll, children: [
       sessions.map((session) => /* @__PURE__ */ jsx18(
         ChatSessionItem,
         {
           session,
           isActive: activeSessionId === session.sessionId,
-          onClick: (sessionId) => void handleSelectSession(sessionId)
+          onClick: (sessionId) => void handleSelectSession(sessionId),
+          actions: isDraftChatSessionId(session.sessionId) ? void 0 : renderSessionItemActions?.({
+            session,
+            isActive: activeSessionId === session.sessionId,
+            isStreaming: isStreamingBySession[session.sessionId] ?? false,
+            selectSession: () => handleSelectSession(session.sessionId),
+            startNewChat,
+            stopSession: () => stopSession(session.sessionId)
+          })
         },
         session.sessionId
       )),
@@ -9235,6 +9599,7 @@ var ChatConversationList = () => {
 var Container3 = styled16.aside`
   width: 280px;
   min-width: 280px;
+  min-height: 0;
   border-right: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
   display: flex;
   flex-direction: column;
@@ -9280,6 +9645,8 @@ var CreateButton = styled16.button`
   }
 `;
 var List2 = styled16.div`
+  flex: 1 1 0;
+  min-height: 0;
   padding: 0 12px 16px;
   display: flex;
   flex-direction: column;
@@ -9293,7 +9660,7 @@ var StateRow = styled16.div`
 `;
 
 // src/components/ai-chat/index.tsx
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
 var NewTalkIcon = () => /* @__PURE__ */ jsx19(
   "svg",
   {
@@ -9304,7 +9671,7 @@ var NewTalkIcon = () => /* @__PURE__ */ jsx19(
     fill: "none",
     style: { display: "block" },
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsxs13(
+    children: /* @__PURE__ */ jsxs14(
       "g",
       {
         transform: "translate(1.8909 2.0364)",
@@ -9313,7 +9680,7 @@ var NewTalkIcon = () => /* @__PURE__ */ jsx19(
         strokeLinejoin: "round",
         strokeWidth: "1.36533333",
         children: [
-          /* @__PURE__ */ jsxs13("g", { transform: "translate(9.8909 2.3273) rotate(-315) translate(-9.8909 -2.3273) translate(8.2909 0.7273)", children: [
+          /* @__PURE__ */ jsxs14("g", { transform: "translate(9.8909 2.3273) rotate(-315) translate(-9.8909 -2.3273) translate(8.2909 0.7273)", children: [
             /* @__PURE__ */ jsx19("path", { d: "M0 0C0 0 1.06666667 1.06666667 3.2 3.2" }),
             /* @__PURE__ */ jsx19("path", { d: "M3.2 0C3.2 0 2.13333333 1.06666667 0 3.2" })
           ] }),
@@ -9341,7 +9708,8 @@ var AiChatWorkspaceContent = ({
   showNewChatButton,
   renderNewChatTrigger,
   showComposerOnlyBeforeFirstMessage = false,
-  onConversationStartedChange
+  onConversationStartedChange,
+  renderComposerModeAccessory
 }) => {
   const isConversationStarted = useChatStore(
     (state) => hasStartedConversation({
@@ -9352,20 +9720,21 @@ var AiChatWorkspaceContent = ({
     })
   );
   const shouldShowComposerOnly = showComposerOnlyBeforeFirstMessage && !showConversationList && !isConversationStarted;
-  useEffect11(() => {
+  useEffect12(() => {
     onConversationStartedChange?.(isConversationStarted);
   }, [isConversationStarted, onConversationStartedChange]);
-  return /* @__PURE__ */ jsxs13(Root, { "data-testid": "ai-chat", children: [
+  return /* @__PURE__ */ jsxs14(Root, { "data-testid": "ai-chat", children: [
     showConversationList ? /* @__PURE__ */ jsx19(ChatConversationList, {}) : null,
-    /* @__PURE__ */ jsxs13(Workspace, { children: [
+    /* @__PURE__ */ jsxs14(Workspace, { children: [
       showNewChatButton && !showConversationList && !shouldShowComposerOnly ? /* @__PURE__ */ jsx19(QuickActions, { renderNewChatTrigger }) : null,
       shouldShowComposerOnly ? null : /* @__PURE__ */ jsx19(ChatThread, {}),
-      /* @__PURE__ */ jsx19(ChatComposer, {})
+      /* @__PURE__ */ jsx19(ChatComposer, { renderModeAccessory: renderComposerModeAccessory })
     ] })
   ] });
 };
 var QuickActions = ({ renderNewChatTrigger }) => {
-  const { labels, stopRef, store } = useChatContext();
+  const { labels, stopSession = async (_sessionId) => {
+  }, store } = useChatContext();
   const startNewChat = useChatStore((state) => state.startNewChat);
   const activeSessionId = useChatStore((state) => state.activeSessionId);
   const isActiveSessionStreaming = useChatStore(
@@ -9384,14 +9753,14 @@ var QuickActions = ({ renderNewChatTrigger }) => {
     if (!currentSessionId || !isCurrentSessionStreaming) {
       return;
     }
-    await stopRef.current(currentSessionId);
+    await stopSession(currentSessionId);
   };
   const handleStartNewChat = async () => {
     const currentState = store.getState();
     const currentSessionId = currentState.activeSessionId;
     const isCurrentSessionStreaming = currentSessionId ? currentState.isStreamingBySession[currentSessionId] ?? false : false;
     if (currentSessionId && isCurrentSessionStreaming) {
-      void stopRef.current(currentSessionId);
+      void stopSession(currentSessionId);
     }
     createNewSession();
   };
@@ -9435,6 +9804,7 @@ var AiChat = ({
   renderNewChatTrigger,
   showComposerOnlyBeforeFirstMessage = false,
   onConversationStartedChange,
+  renderComposerModeAccessory,
   ...providerProps
 }) => /* @__PURE__ */ jsx19(
   ConfigProvider,
@@ -9478,7 +9848,8 @@ var AiChat = ({
         showNewChatButton,
         renderNewChatTrigger,
         showComposerOnlyBeforeFirstMessage,
-        onConversationStartedChange
+        onConversationStartedChange,
+        renderComposerModeAccessory
       }
     ) })
   }