@xinghunm/ai-chat 1.4.3 → 1.5.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // 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";
 
@@ -49,6 +49,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 +58,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 +100,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) {
@@ -215,6 +254,7 @@ var createChatStore = (initialState) => createStore((set, get) => ({
   sessionMessageLoadErrorBySession: {},
   historyMessagePaginationBySession: {},
   timelineAnchorStateBySession: {},
+  newlyCreatedSessionIds: [],
   // ---- Session management ------------------------------------------------
   createSession: (session) => {
     const state = get();
@@ -346,6 +386,7 @@ var createChatStore = (initialState) => createStore((set, get) => ({
       delete nextTimelineAnchorStateBySession[previousSessionId];
     }
     const nextActiveSessionId = state.activeSessionId === previousSessionId ? nextSessionId : state.activeSessionId;
+    const nextNewlyCreatedSessionIds = state.newlyCreatedSessionIds.includes(nextSessionId) ? state.newlyCreatedSessionIds : [...state.newlyCreatedSessionIds.filter((id) => id !== previousSessionId), nextSessionId];
     set({
       sessions: nextSessions,
       messagesBySession: nextMessagesBySession,
@@ -357,7 +398,8 @@ var createChatStore = (initialState) => createStore((set, get) => ({
       sessionMessageLoadErrorBySession: nextSessionMessageLoadErrorBySession,
       historyMessagePaginationBySession: nextHistoryMessagePaginationBySession,
       timelineAnchorStateBySession: nextTimelineAnchorStateBySession,
-      activeSessionId: nextActiveSessionId
+      activeSessionId: nextActiveSessionId,
+      newlyCreatedSessionIds: nextNewlyCreatedSessionIds
     });
   },
   setPreferredMode: (mode) => {
@@ -374,15 +416,28 @@ var createChatStore = (initialState) => createStore((set, get) => ({
     const hasActiveInIncoming = sessions.some(
       (session) => session.sessionId === state.activeSessionId
     );
-    const keepActiveSession = activePersistedSession && !hasActiveInIncoming ? [activePersistedSession] : [];
+    let prependActiveSession = [];
+    let appendActiveSession = [];
+    if (activePersistedSession && !hasActiveInIncoming) {
+      const isNewlyCreated = state.newlyCreatedSessionIds.includes(
+        activePersistedSession.sessionId
+      );
+      if (isNewlyCreated) {
+        prependActiveSession = [activePersistedSession];
+      } else {
+        appendActiveSession = [activePersistedSession];
+      }
+    }
     const excludeIds = /* @__PURE__ */ new Set([
       ...draftSessions.map((s) => s.sessionId),
-      ...keepActiveSession.map((s) => s.sessionId)
+      ...prependActiveSession.map((s) => s.sessionId),
+      ...appendActiveSession.map((s) => s.sessionId)
     ]);
     const nextSessions = [
       ...draftSessions,
+      ...prependActiveSession,
       ...sessions.filter((session) => !excludeIds.has(session.sessionId)),
-      ...keepActiveSession
+      ...appendActiveSession
     ];
     const nextMessagesBySession = { ...state.messagesBySession };
     const nextErrorBySession = { ...state.errorBySession };
@@ -418,6 +473,10 @@ var createChatStore = (initialState) => createStore((set, get) => ({
         nextHistoryMessagePaginationBySession[sid] = createHistoryMessagePaginationState();
       }
     });
+    const incomingSessionIds = new Set(sessions.map((s) => s.sessionId));
+    const nextNewlyCreatedSessionIds = state.newlyCreatedSessionIds.filter(
+      (id) => !incomingSessionIds.has(id)
+    );
     set({
       sessions: nextSessions,
       messagesBySession: nextMessagesBySession,
@@ -427,7 +486,8 @@ var createChatStore = (initialState) => createStore((set, get) => ({
       sessionMessageLoadStatusBySession: nextSessionMessageLoadStatusBySession,
       sessionMessageLoadErrorBySession: nextSessionMessageLoadErrorBySession,
       historyMessagePaginationBySession: nextHistoryMessagePaginationBySession,
-      timelineAnchorStateBySession: nextTimelineAnchorStateBySession
+      timelineAnchorStateBySession: nextTimelineAnchorStateBySession,
+      newlyCreatedSessionIds: nextNewlyCreatedSessionIds
     });
   },
   // ---- Message operations ------------------------------------------------
@@ -458,10 +518,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,
@@ -479,10 +541,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,
@@ -641,7 +705,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)
@@ -1118,7 +1186,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 useCallback3, 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
@@ -1139,7 +1207,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 useCallback2, useLayoutEffect as useLayoutEffect2, useState as useState4 } from "react";
 import styled7 from "@emotion/styled";
 import { keyframes } from "@emotion/react";
 import ReactMarkdown from "react-markdown";
@@ -1195,11 +1263,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,
@@ -1209,7 +1289,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,
@@ -1266,7 +1350,8 @@ var useChatMessageReveal = (message) => {
     revealReducer,
     {
       isAssistantStreaming,
-      targetUnitCount: targetUnits.length
+      targetUnitCount: targetUnits.length,
+      messageId: message.id
     },
     createRevealState
   );
@@ -1298,7 +1383,8 @@ var useChatMessageReveal = (message) => {
     dispatch({
       type: "reset-message",
       isAssistantStreaming,
-      targetUnitCount: targetUnits.length
+      targetUnitCount: targetUnits.length,
+      messageId: message.id
     });
   }, [isAssistantStreaming, message.id, targetUnits.length]);
   useEffect2(() => {
@@ -1377,6 +1463,11 @@ var useChatMessageReveal = (message) => {
       tone: "settled"
     }
   ];
+  useEffect2(() => {
+    if (isAssistantStreaming && displayedUnitCount > 0) {
+      markMessageAsRevealed(message.id);
+    }
+  }, [isAssistantStreaming, displayedUnitCount, message.id]);
   return {
     isAssistantStreaming,
     isFreshBlockActive,
@@ -1968,12 +2059,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;
@@ -2280,7 +2458,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();
@@ -2342,30 +2523,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;
     }
@@ -2615,42 +2805,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`
@@ -2661,11 +2878,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;
 `;
@@ -2692,11 +2909,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,
@@ -2705,8 +2922,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);
   }
 
@@ -2715,8 +2932,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'] {
@@ -2733,16 +2950,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`
@@ -2762,47 +2979,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`
@@ -2811,32 +3022,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);
   }
 `;
 
@@ -2844,7 +3103,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)) })
 ] });
@@ -2864,7 +3123,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;
@@ -2889,7 +3148,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;
@@ -2909,7 +3168,7 @@ var Img = styled6.img`
 `;
 var ImageViewer = ({ src, alt, onClose }) => {
   const overlayRef = useRef4(null);
-  useEffect5(() => {
+  useEffect6(() => {
     const handleKey = (e) => {
       if (e.key === "Escape")
         onClose();
@@ -2917,7 +3176,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();
@@ -2983,9 +3242,9 @@ var useUserMessageCollapse = ({
   freshContent,
   settledContent
 }) => {
-  const [isCollapsible, setIsCollapsible] = useState3(false);
-  const [isExpanded, setIsExpanded] = useState3(false);
-  const [bodyStackElement, setBodyStackElement] = useState3(null);
+  const [isCollapsible, setIsCollapsible] = useState4(false);
+  const [isExpanded, setIsExpanded] = useState4(false);
+  const [bodyStackElement, setBodyStackElement] = useState4(null);
   const syncCollapseState = useCallback2(
     (element) => {
       const nextCollapsible = enabled && (element?.scrollHeight ?? 0) > USER_MESSAGE_COLLAPSE_HEIGHT_PX;
@@ -3171,7 +3430,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,
@@ -3188,8 +3447,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";
@@ -3270,7 +3530,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,
@@ -3373,7 +3636,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,
           {
@@ -3398,7 +3661,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,
@@ -3478,7 +3741,7 @@ var Bubble = styled7.article`
     border-radius: 16px;
   }
 `;
-var Header2 = styled7.div`
+var Header3 = styled7.div`
   display: flex;
   align-items: center;
   gap: 10px;
@@ -3520,7 +3783,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;
@@ -3906,9 +4169,9 @@ 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 [latestTurnMinHeight, setLatestTurnMinHeight] = useState5(0);
+  const [isDetached, setIsDetached] = useState5(false);
+  const [pendingNewMessageCount, setPendingNewMessageCount] = useState5(0);
   const measureLatestTurnMinHeight = useCallback3(() => {
     const container = containerRef.current;
     if (!container)
@@ -4302,13 +4565,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,
@@ -4457,7 +4721,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 useCallback8, 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
@@ -7055,10 +7319,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 useCallback7, 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) : "";
@@ -7072,12 +7336,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);
     },
@@ -7225,13 +7489,13 @@ 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 () => {
@@ -7246,10 +7510,10 @@ var useChatComposer = () => {
       setIsModelsLoading(false);
     }
   }, [modelsLoader]);
-  useEffect8(() => {
+  useEffect9(() => {
     void fetchModels();
   }, [fetchModels]);
-  useEffect8(() => {
+  useEffect9(() => {
     activeSkillsLoaderRef.current = skillsLoader;
     const cachedSkills = getCachedSkills(skillsLoader);
     setAvailableSkills(cachedSkills.skills);
@@ -7285,35 +7549,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(
@@ -7697,14 +7961,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;
   }
@@ -8385,9 +8649,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
   });
@@ -8593,7 +8857,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,
@@ -8685,7 +8949,7 @@ var ChatComposer = () => {
   const { labels, sendRef, retryRef, stopRef, enableImageAttachments } = useChatContext();
   const { state, actions } = useChatComposer();
   const { send, retry } = actions;
-  useEffect9(() => {
+  useEffect10(() => {
     sendRef.current = send;
     retryRef.current = async (sessionId) => {
       retry(sessionId);
@@ -8933,7 +9197,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;
@@ -9014,7 +9278,7 @@ var SkillButton = styled14.button`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-import { useEffect as useEffect10, useRef as useRef12 } from "react";
+import { useEffect as useEffect11, useRef as useRef12 } from "react";
 import styled16 from "@emotion/styled";
 
 // src/components/chat-conversation-list/components/chat-session-item.tsx
@@ -9117,12 +9381,12 @@ var ChatConversationList = () => {
   );
   const isLoadingMoreRef = useRef12(false);
   const hasSeenLoadingMoreRef = useRef12(false);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!historySessionList)
       return;
     hydrateHistorySessions(historySessionList.sessions);
   }, [historySessionList, hydrateHistorySessions]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (historySessionList?.isLoading) {
       hasSeenLoadingMoreRef.current = true;
       return;
@@ -9132,7 +9396,7 @@ var ChatConversationList = () => {
       isLoadingMoreRef.current = false;
     }
   }, [historySessionList?.isLoading]);
-  useEffect10(() => {
+  useEffect11(() => {
     isLoadingMoreRef.current = false;
     hasSeenLoadingMoreRef.current = false;
   }, [historySessionList?.sessions.length, historySessionList?.hasMore]);
@@ -9331,7 +9595,7 @@ var AiChatWorkspaceContent = ({
     })
   );
   const shouldShowComposerOnly = showComposerOnlyBeforeFirstMessage && !showConversationList && !isConversationStarted;
-  useEffect11(() => {
+  useEffect12(() => {
     onConversationStartedChange?.(isConversationStarted);
   }, [isConversationStarted, onConversationStartedChange]);
   return /* @__PURE__ */ jsxs13(Root, { "data-testid": "ai-chat", children: [