@xpert-ai/chatkit-ui 0.0.20 → 0.1.0

package/dist/index.cjs

@@ -66,8 +66,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/chat.tsx
-var React20 = __toESM(require("react"), 1);
-var import_lucide_react9 = require("lucide-react");
+var React21 = __toESM(require("react"), 1);
+var import_lucide_react10 = require("lucide-react");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -88,6 +88,64 @@ function createMessageId() {
   return globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
 }
 
+// src/lib/message.ts
+var import_lodash_es = require("lodash-es");
+var ASSISTANT_STREAM_IDLE_TO_THINKING_MS = 2e3;
+function hasRenderableReasoning(reasoning) {
+  return Array.isArray(reasoning) && reasoning.some((item) => item.text?.trim());
+}
+function hasRenderableMessageContent(content) {
+  if (typeof content === "string") {
+    return content.trim().length > 0;
+  }
+  if (!Array.isArray(content) || content.length === 0) {
+    return false;
+  }
+  const items = content;
+  return items.some((item) => {
+    if (typeof item === "string") {
+      return item.trim().length > 0;
+    }
+    if (!item || typeof item !== "object") {
+      return false;
+    }
+    if (item.type === "text") {
+      return Boolean(item.text?.trim());
+    }
+    if (item.type === "reasoning") {
+      return Boolean(item.text?.trim());
+    }
+    return true;
+  });
+}
+function hasRenderableAssistantMessage(message) {
+  return hasRenderableMessageContent(message.content) || hasRenderableReasoning(message.reasoning);
+}
+function getAssistantStreamingStatus(message, isStreaming, options) {
+  if (!isStreaming) {
+    return null;
+  }
+  const now = options?.now ?? Date.now();
+  const lastStreamOutputAt = typeof message.lastStreamOutputAt === "number" ? message.lastStreamOutputAt : null;
+  const isIdle = lastStreamOutputAt !== null && now - lastStreamOutputAt >= ASSISTANT_STREAM_IDLE_TO_THINKING_MS;
+  if (message.status === "reasoning") {
+    return "thinking";
+  }
+  if (message.status === "answering") {
+    if (isIdle) {
+      return "thinking";
+    }
+    return "answering";
+  }
+  if (hasRenderableReasoning(message.reasoning)) {
+    return "thinking";
+  }
+  if (isIdle) {
+    return "thinking";
+  }
+  return "loading";
+}
+
 // src/lib/scroll.ts
 var BOTTOM_FOLLOW_THRESHOLD_PX = 48;
 function getDistanceFromBottom(element) {
@@ -104,6 +162,25 @@ var import_xpert_sdk = require("@xpert-ai/xpert-sdk");
 var import_tool = require("@langchain/core/messages/tool");
 var import_chatkit_types3 = require("@xpert-ai/chatkit-types");
 
+// src/lib/api-config.ts
+function hasConfiguredValue(value) {
+  return typeof value === "string" && value.trim().length > 0;
+}
+function getMissingApiConfigurationKind({
+  apiUrl,
+  clientSecret
+}) {
+  const hasApiUrl = hasConfiguredValue(apiUrl);
+  const hasClientSecret = hasConfiguredValue(clientSecret);
+  if (hasApiUrl && hasClientSecret) {
+    return null;
+  }
+  if (!hasApiUrl && !hasClientSecret) {
+    return "apiUrlAndClientSecret";
+  }
+  return hasApiUrl ? "clientSecret" : "apiUrl";
+}
+
 // src/lib/request-options.ts
 var import_chatkit_types = require("@xpert-ai/chatkit-types");
 function isRecord(value) {
@@ -199,6 +276,189 @@ function useStreamManager() {
   };
 }
 
+// src/lib/references.ts
+function isObjectLike(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isNonEmptyString(value) {
+  return typeof value === "string" && value.trim().length > 0;
+}
+function toOptionalString(value) {
+  return isNonEmptyString(value) ? value.trim() : void 0;
+}
+function toReferenceText(value) {
+  return typeof value === "string" && value.trim().length > 0 ? value : null;
+}
+function toLineNumber(value) {
+  if (typeof value === "number" && Number.isInteger(value) && value > 0) {
+    return value;
+  }
+  return null;
+}
+function normalizeCodeReference(candidate) {
+  const path = toOptionalString(candidate.path);
+  const text = toReferenceText(candidate.text);
+  const startLine = toLineNumber(candidate.startLine);
+  const endLine = toLineNumber(candidate.endLine);
+  if (!path || !text || startLine === null || endLine === null) {
+    return null;
+  }
+  return {
+    type: "code",
+    ...toOptionalString(candidate.id) ? { id: toOptionalString(candidate.id) } : {},
+    ...toOptionalString(candidate.label) ? { label: toOptionalString(candidate.label) } : {},
+    path,
+    startLine,
+    endLine,
+    text,
+    ...toOptionalString(candidate.language) ? { language: toOptionalString(candidate.language) } : {},
+    ...toOptionalString(candidate.taskId) ? { taskId: toOptionalString(candidate.taskId) } : {}
+  };
+}
+function normalizeQuoteReference(candidate) {
+  const text = toReferenceText(candidate.text);
+  if (!text) {
+    return null;
+  }
+  return {
+    type: "quote",
+    ...toOptionalString(candidate.id) ? { id: toOptionalString(candidate.id) } : {},
+    ...toOptionalString(candidate.label) ? { label: toOptionalString(candidate.label) } : {},
+    text,
+    ...toOptionalString(candidate.messageId) ? { messageId: toOptionalString(candidate.messageId) } : {},
+    ...toOptionalString(candidate.source) ? { source: toOptionalString(candidate.source) } : {}
+  };
+}
+function isLegacyCodeReference(candidate) {
+  return isNonEmptyString(candidate.path) && toLineNumber(candidate.startLine) !== null && toLineNumber(candidate.endLine) !== null && toReferenceText(candidate.text) !== null;
+}
+function normalizeReference(value) {
+  if (!isObjectLike(value)) {
+    return null;
+  }
+  const candidate = value;
+  const type = toOptionalString(candidate.type);
+  if (type === "code") {
+    return normalizeCodeReference(candidate);
+  }
+  if (type === "quote") {
+    return normalizeQuoteReference(candidate);
+  }
+  if (type === void 0 && isLegacyCodeReference(candidate)) {
+    return normalizeCodeReference(candidate);
+  }
+  return null;
+}
+function normalizeReferences(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.map((item) => normalizeReference(item)).filter((item) => item !== null);
+}
+function getCodeReferenceRange(reference) {
+  return reference.startLine === reference.endLine ? `${reference.startLine}` : `${reference.startLine}-${reference.endLine}`;
+}
+function getQuoteExcerpt(reference) {
+  const normalized = reference.text.replace(/\s+/g, " ").trim();
+  if (normalized.length <= 32) {
+    return normalized;
+  }
+  return `${normalized.slice(0, 29)}...`;
+}
+function getCodeReferenceLocation(reference) {
+  return `${reference.path}:${getCodeReferenceRange(reference)}`;
+}
+function getReferenceKey(reference) {
+  if (reference.id && reference.id.trim()) {
+    return reference.id.trim();
+  }
+  if (reference.type === "code") {
+    return [
+      reference.type,
+      reference.path,
+      reference.startLine,
+      reference.endLine,
+      reference.text
+    ].join(":");
+  }
+  return [
+    reference.type,
+    reference.messageId ?? "",
+    reference.source ?? "",
+    reference.text
+  ].join(":");
+}
+function mergeReferences(current, incoming) {
+  const merged = [...current];
+  const seen = new Set(current.map(getReferenceKey));
+  incoming.forEach((reference) => {
+    const key = getReferenceKey(reference);
+    if (seen.has(key)) {
+      return;
+    }
+    seen.add(key);
+    merged.push(reference);
+  });
+  return merged;
+}
+function getReferenceLabel(reference) {
+  if (reference.label && reference.label.trim()) {
+    return reference.label.trim();
+  }
+  if (reference.type === "code") {
+    const segments = reference.path.split("/");
+    const fileName = segments[segments.length - 1] || reference.path;
+    return `${fileName} ${getCodeReferenceRange(reference)}`;
+  }
+  if (reference.source && reference.source.trim()) {
+    return reference.source.trim();
+  }
+  return getQuoteExcerpt(reference);
+}
+function getReferenceMetaLine(reference) {
+  if (reference.type === "code") {
+    return getCodeReferenceLocation(reference);
+  }
+  if (reference.source && reference.source.trim()) {
+    return getQuoteExcerpt(reference);
+  }
+  if (reference.messageId && reference.messageId.trim()) {
+    return `Message ${reference.messageId.trim()}`;
+  }
+  return null;
+}
+function getReferenceTitle(reference) {
+  if (reference.type === "code") {
+    return `${getCodeReferenceLocation(reference)}
+
+${reference.text}`;
+  }
+  const header = reference.label?.trim() || reference.source?.trim() || "Quoted text";
+  return `${header}
+
+${reference.text}`;
+}
+function buildHumanMessageInputPayload(source) {
+  const references = normalizeReferences(source.references);
+  const nextReferenceComposition = source.referenceComposition ?? (references.length > 0 && typeof source.submittedInput !== "string" ? "compose" : void 0);
+  if (typeof source.submittedInput === "string") {
+    return {
+      input: source.submittedInput.trim(),
+      ...references.length > 0 ? { references } : {},
+      ...nextReferenceComposition ? { referenceComposition: nextReferenceComposition } : {}
+    };
+  }
+  const input = typeof source.content === "string" ? source.content.trim() : "";
+  if (!input && references.length === 0) {
+    return null;
+  }
+  return {
+    input,
+    ...references.length > 0 ? { references } : {},
+    ...nextReferenceComposition ? { referenceComposition: nextReferenceComposition } : {}
+  };
+}
+
 // src/providers/ParentMessenger.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var handledSendUserMessageNonces = /* @__PURE__ */ new Set();
@@ -227,6 +487,10 @@ function ParentMessengerProvider({
     /* @__PURE__ */ new Map()
   );
   const onSetOptionsHandlersRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+  const onSetComposerValueHandlersRef = (0, import_react.useRef)(
+    /* @__PURE__ */ new Set()
+  );
+  const onFocusComposerHandlersRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
   const latestOptionsRef = (0, import_react.useRef)(null);
   const isParentAvailable = (0, import_react.useMemo)(() => {
     return typeof window !== "undefined" && window.parent !== window;
@@ -240,6 +504,24 @@ function ParentMessengerProvider({
       onSetOptionsHandlersRef.current.delete(handler);
     };
   }, []);
+  const registerOnSetComposerValue = (0, import_react.useCallback)(
+    (handler) => {
+      onSetComposerValueHandlersRef.current.add(handler);
+      return () => {
+        onSetComposerValueHandlersRef.current.delete(handler);
+      };
+    },
+    []
+  );
+  const registerOnFocusComposer = (0, import_react.useCallback)(
+    (handler) => {
+      onFocusComposerHandlersRef.current.add(handler);
+      return () => {
+        onFocusComposerHandlersRef.current.delete(handler);
+      };
+    },
+    []
+  );
   (0, import_react.useEffect)(() => {
     if (!isParentAvailable) return;
     const sendResponse = (nonce, response, error) => {
@@ -260,7 +542,7 @@ function ParentMessengerProvider({
       }
       const payload = event.data;
       if (payload.__xpaiChatKit !== true) return;
-      if (payload.type == "command" && payload.command === "onSendUserMessage") {
+      if (payload.type === "command" && payload.command === "onSendUserMessage") {
         const nonce = typeof payload.nonce === "string" ? payload.nonce : null;
         if (nonce) {
           if (handledSendUserMessageNonces.has(nonce)) return;
@@ -270,34 +552,53 @@ function ParentMessengerProvider({
           handledSendUserMessageEvents.add(event);
         }
         const params = payload.data;
-        const prompt = (params.text ?? params.state?.[import_chatkit_types2.STATE_VARIABLE_HUMAN]?.input ?? "").trim();
+        const prompt = typeof params.text === "string" ? params.text.trim() : typeof params.state?.[import_chatkit_types2.STATE_VARIABLE_HUMAN]?.input === "string" ? params.state[import_chatkit_types2.STATE_VARIABLE_HUMAN].input.trim() : "";
+        const references = normalizeReferences(
+          params.references ?? params.state?.[import_chatkit_types2.STATE_VARIABLE_HUMAN]?.references
+        );
+        const referenceComposition = params.referenceComposition ?? params.state?.[import_chatkit_types2.STATE_VARIABLE_HUMAN]?.referenceComposition;
+        const humanInput = buildHumanMessageInputPayload({
+          content: prompt,
+          references,
+          referenceComposition
+        });
+        if (!humanInput) {
+          if (payload.nonce) {
+            sendResponse(payload.nonce, { ok: true });
+          }
+          return;
+        }
         const newMessage = {
           id: createMessageId(),
           type: "human",
-          content: prompt
+          content: prompt,
+          submittedInput: humanInput.input,
+          ...humanInput.referenceComposition ? { referenceComposition: humanInput.referenceComposition } : {},
+          ...references.length > 0 ? { references } : {}
         };
+        const stream = streamRef2.current;
+        const activeFollowUpMode = stream?.isLoading ? params.followUpMode && params.followUpMode !== "default" ? params.followUpMode : stream.followUpBehavior ?? "queue" : void 0;
         const requestOptions = buildInjectedRequestOptions({
           defaults: latestOptionsRef.current?.request,
           state: params.state,
-          humanInput: {
-            input: prompt
-          }
+          humanInput
         });
-        streamRef2.current?.submit(
+        stream?.submit(
           {
-            input: {
-              input: prompt
-            },
+            input: humanInput,
             ...requestOptions.state ? { state: requestOptions.state } : {}
           },
           {
             newThread: params.newThread,
+            ...activeFollowUpMode ? { followUpMode: activeFollowUpMode } : {},
             ...requestOptions.context ? { context: requestOptions.context } : {},
             ...requestOptions.config ? { config: requestOptions.config } : {},
-            optimisticValues: (prev) => {
-              const prevMessages = prev?.messages ?? [];
-              return { ...prev, messages: [...prevMessages, newMessage] };
-            }
+            ...!activeFollowUpMode ? {
+              optimisticValues: (prev) => {
+                const prevMessages = prev?.messages ?? [];
+                return { ...prev, messages: [...prevMessages, newMessage] };
+              }
+            } : {}
           }
         );
         if (payload.nonce) {
@@ -305,7 +606,28 @@ function ParentMessengerProvider({
         }
         return;
       }
-      if (payload.type == "command" && payload.command === "onSetOptions") {
+      if (payload.type === "command" && payload.command === "onSetComposerValue") {
+        const nextPayload = payload.data ?? null;
+        const normalizedPayload = nextPayload && Array.isArray(nextPayload.references) ? {
+          ...nextPayload,
+          references: normalizeReferences(nextPayload.references)
+        } : nextPayload;
+        void Promise.all(
+          [...onSetComposerValueHandlersRef.current].map(
+            (handler2) => Promise.resolve(handler2(normalizedPayload))
+          )
+        ).then(() => {
+          if (payload.nonce) {
+            sendResponse(payload.nonce, { ok: true });
+          }
+        }).catch((error) => {
+          if (payload.nonce) {
+            sendResponse(payload.nonce, void 0, error);
+          }
+        });
+        return;
+      }
+      if (payload.type === "command" && payload.command === "onSetOptions") {
         latestOptionsRef.current = payload.data ?? null;
         if (onSetOptionsHandlersRef.current.size > 0) {
           onSetOptionsHandlersRef.current.forEach((handler2) => {
@@ -317,16 +639,41 @@ function ParentMessengerProvider({
         }
         return;
       }
-      if (payload.type == "command" && payload.command === "onSetThreadId") {
+      if (payload.type === "command" && payload.command === "onFocusComposer") {
+        void Promise.all(
+          [...onFocusComposerHandlersRef.current].map(
+            (handler2) => Promise.resolve(handler2())
+          )
+        ).then(() => {
+          if (payload.nonce) {
+            sendResponse(payload.nonce, { ok: true });
+          }
+        }).catch((error) => {
+          if (payload.nonce) {
+            sendResponse(payload.nonce, void 0, error);
+          }
+        });
+        return;
+      }
+      if (payload.type === "command" && payload.command === "onSetThreadId") {
         const data = payload.data;
         const nextThreadId = data?.threadId ?? null;
         const stream = streamRef2.current;
+        if (stream?.threadId === nextThreadId) {
+          if (payload.nonce) {
+            sendResponse(payload.nonce, { ok: true });
+          }
+          return;
+        }
         stream?.reset(nextThreadId, void 0, { suppressThreadChange: true });
         if (stream && nextThreadId) {
           stream.loadThread(nextThreadId).catch((err) => {
             console.warn("Failed to load thread messages", err);
           });
         }
+        if (payload.nonce) {
+          sendResponse(payload.nonce, { ok: true });
+        }
         return;
       }
       if (payload.type !== "response") return;
@@ -387,25 +734,55 @@ function ParentMessengerProvider({
       isParentAvailable,
       sendCommand,
       sendEvent,
-      registerOnSetOptions
+      registerOnSetOptions,
+      registerOnSetComposerValue,
+      registerOnFocusComposer
     }),
-    [isParentAvailable, sendCommand, sendEvent, registerOnSetOptions]
+    [
+      isParentAvailable,
+      sendCommand,
+      sendEvent,
+      registerOnSetOptions,
+      registerOnSetComposerValue,
+      registerOnFocusComposer
+    ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParentMessengerContext.Provider, { value, children });
 }
 
 // src/hooks/useParentMessenger.tsx
-function useParentMessenger({ onSetOptions } = {}) {
+function useParentMessenger({
+  onSetOptions,
+  onSetComposerValue,
+  onFocusComposer
+} = {}) {
   const context = (0, import_react2.useContext)(ParentMessengerContext);
   if (!context) {
-    throw new Error("useParentMessenger must be used within a ParentMessengerProvider");
+    throw new Error(
+      "useParentMessenger must be used within a ParentMessengerProvider"
+    );
   }
-  const { registerOnSetOptions, ...messenger } = context;
+  const {
+    registerOnSetOptions,
+    registerOnSetComposerValue,
+    registerOnFocusComposer,
+    ...messenger
+  } = context;
   const onSetOptionsRef = (0, import_react2.useRef)(onSetOptions);
+  const onSetComposerValueRef = (0, import_react2.useRef)(onSetComposerValue);
+  const onFocusComposerRef = (0, import_react2.useRef)(onFocusComposer);
   (0, import_react2.useEffect)(() => {
     onSetOptionsRef.current = onSetOptions;
   }, [onSetOptions]);
+  (0, import_react2.useEffect)(() => {
+    onSetComposerValueRef.current = onSetComposerValue;
+  }, [onSetComposerValue]);
+  (0, import_react2.useEffect)(() => {
+    onFocusComposerRef.current = onFocusComposer;
+  }, [onFocusComposer]);
   const hasOnSetOptions = Boolean(onSetOptions);
+  const hasOnSetComposerValue = Boolean(onSetComposerValue);
+  const hasOnFocusComposer = Boolean(onFocusComposer);
   (0, import_react2.useEffect)(() => {
     if (!hasOnSetOptions) return;
     const handler = (options) => {
@@ -413,6 +790,20 @@ function useParentMessenger({ onSetOptions } = {}) {
     };
     return registerOnSetOptions(handler);
   }, [hasOnSetOptions, registerOnSetOptions]);
+  (0, import_react2.useEffect)(() => {
+    if (!hasOnSetComposerValue) return;
+    const handler = (payload) => {
+      onSetComposerValueRef.current?.(payload);
+    };
+    return registerOnSetComposerValue(handler);
+  }, [hasOnSetComposerValue, registerOnSetComposerValue]);
+  (0, import_react2.useEffect)(() => {
+    if (!hasOnFocusComposer) return;
+    const handler = () => {
+      onFocusComposerRef.current?.();
+    };
+    return registerOnFocusComposer(handler);
+  }, [hasOnFocusComposer, registerOnFocusComposer]);
   return messenger;
 }
 
@@ -567,12 +958,39 @@ var en_US_default = {
     statusOnline: "Online",
     missingConfigShort: "Missing ChatKit configuration.",
     missingConfigDetail: "Missing ChatKit configuration. Check `VITE_XPERTAI_API_URL`, and the `clientSecret` prop.",
+    missingApiUrlShort: "Missing ChatKit API URL.",
+    missingApiUrlDetail: "Missing ChatKit API URL. Check `VITE_XPERTAI_API_URL` or `options.api.apiUrl`.",
+    missingClientSecretShort: "Missing ChatKit client secret.",
+    missingClientSecretDetail: "Missing ChatKit client secret. Check the `clientSecret` prop or `api.getClientSecret` integration.",
+    missingApiUrlAndClientSecretShort: "Missing ChatKit API URL and client secret.",
+    missingApiUrlAndClientSecretDetail: "Missing ChatKit API URL and client secret. Check `VITE_XPERTAI_API_URL`, `options.api.apiUrl`, and your client secret integration.",
     loadingThread: "Loading thread...",
     stop: "Stop",
     send: "Send message",
+    referencedContentOnly: "Referenced content",
+    youLabel: "You",
     scrollToBottom: "Scroll to bottom",
     retryUpload: "Retry upload",
     poweredBy: "Powered by Xpert AI",
+    followUps: {
+      label: "Follow-up behavior",
+      settings: "Settings",
+      idleHint: "Used when you send while a run is active.",
+      activeHint: "This message will use the selected busy-run behavior.",
+      pending: "Pending follow-ups",
+      queue: "Queue",
+      steer: "Steer",
+      steerAction: "Steer",
+      promoteToSteer: "Steer now",
+      sendNow: "Send now",
+      remove: "Remove pending follow-up",
+      more: "More actions",
+      edit: "Edit message",
+      turnOffQueueing: "Turn off queueing",
+      queueHint: "Starts after the current run finishes",
+      manualQueueHint: "Ready to send as a new run",
+      steerHint: "Injects after the current tool call"
+    },
     errors: {
       loadMessages: "Failed to load thread messages",
       createThread: "Failed to create thread",
@@ -603,7 +1021,9 @@ var en_US_default = {
   },
   composer: {
     openMenu: "Open menu",
-    addAttachment: "Add attachment"
+    addAttachment: "Add attachment",
+    removeReference: "Remove reference",
+    quoteSelection: "Quote selection"
   },
   sheet: {
     close: "Close"
@@ -618,7 +1038,10 @@ var en_US_default = {
   },
   message: {
     answer: "Answer",
-    reasoning: "Reasoning"
+    reasoning: "Reasoning",
+    loading: "Loading",
+    thinking: "Thinking",
+    answering: "Answering"
   }
 };
 
@@ -630,12 +1053,39 @@ var zh_CN_default = {
     statusOnline: "\u5728\u7EBF",
     missingConfigShort: "\u7F3A\u5C11 ChatKit \u914D\u7F6E\u3002",
     missingConfigDetail: "\u7F3A\u5C11 ChatKit \u914D\u7F6E\u3002\u8BF7\u68C0\u67E5 `VITE_XPERTAI_API_URL` \u548C `clientSecret` \u53C2\u6570\u3002",
+    missingApiUrlShort: "\u7F3A\u5C11 ChatKit API URL\u3002",
+    missingApiUrlDetail: "\u7F3A\u5C11 ChatKit API URL\u3002\u8BF7\u68C0\u67E5 `VITE_XPERTAI_API_URL` \u6216 `options.api.apiUrl`\u3002",
+    missingClientSecretShort: "\u7F3A\u5C11 ChatKit client secret\u3002",
+    missingClientSecretDetail: "\u7F3A\u5C11 ChatKit client secret\u3002\u8BF7\u68C0\u67E5 `clientSecret` \u53C2\u6570\u6216 `api.getClientSecret` \u96C6\u6210\u3002",
+    missingApiUrlAndClientSecretShort: "\u7F3A\u5C11 ChatKit API URL \u548C client secret\u3002",
+    missingApiUrlAndClientSecretDetail: "\u7F3A\u5C11 ChatKit API URL \u548C client secret\u3002\u8BF7\u68C0\u67E5 `VITE_XPERTAI_API_URL`\u3001`options.api.apiUrl` \u4EE5\u53CA client secret \u96C6\u6210\u3002",
     loadingThread: "\u6B63\u5728\u52A0\u8F7D\u7EBF\u7A0B...",
     stop: "\u505C\u6B62",
     send: "\u53D1\u9001\u6D88\u606F",
+    referencedContentOnly: "\u5DF2\u5F15\u7528\u5185\u5BB9",
+    youLabel: "\u4F60",
     scrollToBottom: "\u56DE\u5230\u5E95\u90E8",
     retryUpload: "\u91CD\u65B0\u4E0A\u4F20",
     poweredBy: "\u7531 Xpert AI \u9A71\u52A8",
+    followUps: {
+      label: "Follow-up \u6A21\u5F0F",
+      settings: "\u8BBE\u7F6E",
+      idleHint: "\u4EC5\u5728\u8FD0\u884C\u4E2D\u53D1\u9001\u6D88\u606F\u65F6\u751F\u6548\u3002",
+      activeHint: "\u5F53\u524D\u6D88\u606F\u4F1A\u6309\u6240\u9009\u7684\u8FD0\u884C\u4E2D\u884C\u4E3A\u5904\u7406\u3002",
+      pending: "\u5F85\u5904\u7406 Follow-up",
+      queue: "\u6392\u961F",
+      steer: "\u5F15\u5BFC",
+      steerAction: "Steer",
+      promoteToSteer: "\u8F6C\u4E3A\u5F15\u5BFC",
+      sendNow: "\u7ACB\u5373\u53D1\u9001",
+      remove: "\u79FB\u9664\u6B64\u5F85\u5904\u7406 Follow-up",
+      more: "\u66F4\u591A\u64CD\u4F5C",
+      edit: "\u7F16\u8F91\u6D88\u606F",
+      turnOffQueueing: "\u5173\u95ED\u6392\u961F",
+      queueHint: "\u5F53\u524D\u8FD0\u884C\u7ED3\u675F\u540E\u5F00\u542F\u4E0B\u4E00\u8F6E",
+      manualQueueHint: "\u4FDD\u7559\u4E3A\u5F85\u53D1\u9001\uFF0C\u53EF\u624B\u52A8\u5F00\u542F\u65B0\u4E00\u8F6E",
+      steerHint: "\u5F53\u524D\u5DE5\u5177\u8C03\u7528\u5B8C\u6210\u540E\u6CE8\u5165"
+    },
     errors: {
       loadMessages: "\u52A0\u8F7D\u7EBF\u7A0B\u6D88\u606F\u5931\u8D25",
       createThread: "\u521B\u5EFA\u7EBF\u7A0B\u5931\u8D25",
@@ -666,7 +1116,9 @@ var zh_CN_default = {
   },
   composer: {
     openMenu: "\u6253\u5F00\u83DC\u5355",
-    addAttachment: "\u6DFB\u52A0\u9644\u4EF6"
+    addAttachment: "\u6DFB\u52A0\u9644\u4EF6",
+    removeReference: "\u79FB\u9664\u5F15\u7528",
+    quoteSelection: "\u5F15\u7528\u9009\u4E2D\u5185\u5BB9"
   },
   sheet: {
     close: "\u5173\u95ED"
@@ -681,7 +1133,10 @@ var zh_CN_default = {
   },
   message: {
     answer: "\u56DE\u7B54",
-    reasoning: "\u63A8\u7406"
+    reasoning: "\u63A8\u7406",
+    loading: "\u6B63\u5728\u52A0\u8F7D",
+    thinking: "\u6B63\u5728\u601D\u8003",
+    answering: "\u6B63\u5728\u751F\u6210"
   }
 };
 
@@ -1206,13 +1661,14 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 function SendButton({
   disabled = false,
   isLoading = false,
+  showStop = isLoading,
   onStop,
   stopLabel = "Stop",
   sendLabel = "Send"
 }) {
   const { theme } = useTheme();
   const roundedClass = getRoundedClass(theme.radius);
-  if (isLoading) {
+  if (showStop) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
@@ -1461,103 +1917,464 @@ function HistorySidebar({
   ] });
 }
 
-// src/components/thread/messages/ai.tsx
-var React13 = __toESM(require("react"), 1);
-var import_lucide_react6 = require("lucide-react");
+// src/components/composer/pending-follow-ups.tsx
+var React10 = __toESM(require("react"), 1);
+var import_lucide_react5 = require("lucide-react");
 
-// src/components/ui/badge.tsx
-var React9 = __toESM(require("react"), 1);
+// src/components/ui/tooltip.tsx
+var React9 = require("react");
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var base = "inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background";
-var variants = {
-  default: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  outline: "border-input text-foreground"
-};
-var Badge = React9.forwardRef(
-  ({ className, variant = "default", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { ref, className: cn(base, variants[variant], className), ...props });
-  }
-);
-Badge.displayName = "Badge";
-
-// src/components/ui/card.tsx
-var React10 = __toESM(require("react"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Card = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    "div",
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    TooltipPrimitive.Provider,
     {
-      ref,
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    TooltipPrimitive.Root,
+    {
+      "data-slot": "tooltip",
+      ...props
+    }
+  ) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    TooltipPrimitive.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      ...props
+    }
+  );
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
       className: cn(
-        "rounded-xl border bg-background/80 text-foreground shadow-[0_14px_40px_-30px_rgba(15,23,42,0.5)] backdrop-blur",
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
     }
-  )
-);
-Card.displayName = "Card";
-var CardHeader = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref, className: cn("flex flex-col gap-1.5 px-6 pt-6", className), ...props })
-);
-CardHeader.displayName = "CardHeader";
-var CardTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { ref, className: cn("text-lg font-semibold leading-tight", className), ...props }));
-CardTitle.displayName = "CardTitle";
-var CardDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
-CardDescription.displayName = "CardDescription";
-var CardContent = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref, className: cn("px-6 pb-6", className), ...props })
-);
-CardContent.displayName = "CardContent";
-var CardFooter = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref, className: cn("flex items-center px-6 pb-6", className), ...props })
-);
-CardFooter.displayName = "CardFooter";
-var CardAction = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref, className: cn("ml-auto flex items-center", className), ...props })
-);
-CardAction.displayName = "CardAction";
+  ) });
+}
 
-// src/components/ui/tabs.tsx
-var React11 = __toESM(require("react"), 1);
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var TabsContext = React11.createContext(null);
-function Tabs({ className, defaultValue, value, onValueChange, ...props }) {
-  const [internalValue, setInternalValue] = React11.useState(defaultValue ?? "");
-  const activeValue = value ?? internalValue;
-  const setValue = React11.useCallback(
-    (nextValue) => {
-      if (value === void 0) setInternalValue(nextValue);
-      onValueChange?.(nextValue);
-    },
-    [onValueChange, value]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TabsContext.Provider, { value: { value: activeValue, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("w-full", className), ...props }) });
+// src/components/composer/pending-follow-ups.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function getPendingFollowUpText(item, referencedContentFallback) {
+  const text = item.request?.input?.input?.trim() ?? "";
+  if (text) {
+    return text;
+  }
+  const references = normalizeReferences(item.request?.input?.references);
+  if (references.length === 0) {
+    return referencedContentFallback;
+  }
+  const firstReferenceLabel = getReferenceLabel(references[0]);
+  if (references.length === 1) {
+    return firstReferenceLabel;
+  }
+  return `${firstReferenceLabel} +${references.length - 1}`;
+}
+function useRoundedClasses() {
+  const { theme } = useTheme();
+  return {
+    top: theme.radius ? {
+      pill: "rounded-t-full",
+      round: "rounded-t-xl",
+      soft: "rounded-t-lg",
+      sharp: "rounded-t-none"
+    }[theme.radius] : "rounded-t-lg",
+    panel: getRoundedClass(theme.radius, "rounded-lg"),
+    control: getRoundedClass(theme.radius, "rounded-md")
+  };
 }
-var TabsList = React11.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+function PendingFollowUps({
+  items,
+  isLoading,
+  followUpBehavior,
+  onBehaviorChange,
+  onPromoteToSteer,
+  canSendNow,
+  onSendNow,
+  onEdit,
+  onRemove,
+  className
+}) {
+  const { t } = useChatkitTranslation();
+  const rounded = useRoundedClasses();
+  const referencedContentFallback = t("chat.referencedContentOnly");
+  const [isSettingsOpen, setIsSettingsOpen] = React10.useState(false);
+  const [openMenuId, setOpenMenuId] = React10.useState(null);
+  React10.useEffect(() => {
+    if (items.length === 0 && isSettingsOpen) {
+      setIsSettingsOpen(false);
+    }
+    if (items.every((item) => item.id !== openMenuId)) {
+      setOpenMenuId(null);
+    }
+  }, [isSettingsOpen, items, openMenuId]);
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
-      ref,
       className: cn(
-        "inline-flex h-11 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        "space-y-2 mx-2 p-2 border border-border border-b-0",
+        rounded.top,
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-xs font-medium text-foreground", children: t("chat.followUps.pending") }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsSettingsOpen((prev) => !prev),
+                className: cn(
+                  "inline-flex h-6 w-6 items-center justify-center transition-colors",
+                  isSettingsOpen ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+                  rounded.control
+                ),
+                "aria-label": t("chat.followUps.settings"),
+                "aria-expanded": isSettingsOpen,
+                "aria-controls": "follow-ups-settings-panel",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: t("chat.followUps.settings") })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipContent, { side: "top", children: t("chat.followUps.settings") })
+          ] })
+        ] }),
+        isSettingsOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            id: "follow-ups-settings-panel",
+            className: cn(
+              "border border-border/70 bg-muted/20 px-3 py-2",
+              rounded.panel
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-xs font-medium text-foreground", children: t("chat.followUps.label") }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-[11px] text-muted-foreground", children: isLoading ? t("chat.followUps.activeHint") : t("chat.followUps.idleHint") })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "inline-flex shrink-0 border border-border bg-background p-1",
+                    rounded.control
+                  ),
+                  children: ["queue", "steer"].map((behavior) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          onBehaviorChange(behavior);
+                          setIsSettingsOpen(false);
+                        },
+                        className: cn(
+                          "px-3 py-1 text-xs font-medium transition-colors",
+                          rounded.control,
+                          followUpBehavior === behavior ? "bg-primary text-background" : "text-muted-foreground hover:text-foreground"
+                        ),
+                        children: behavior === "queue" ? t("chat.followUps.queue") : t("chat.followUps.steer")
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipContent, { side: "top", children: behavior === "queue" ? t("chat.followUps.queueHint") : t("chat.followUps.steerHint") })
+                  ] }, behavior))
+                }
+              )
+            ] })
+          }
+        ),
+        items.map((item) => {
+          const canSendItemNow = item.mode === "queue" && canSendNow(item.id);
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "div",
+            {
+              className: cn(
+                "border border-border/50 bg-muted/15 px-2 py-1",
+                rounded.panel
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.CornerDownLeft, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      "div",
+                      {
+                        className: "truncate text-[13px] leading-5 text-foreground",
+                        title: getPendingFollowUpText(
+                          item,
+                          referencedContentFallback
+                        ),
+                        children: getPendingFollowUpText(
+                          item,
+                          referencedContentFallback
+                        )
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
+                      item.mode === "queue" && isLoading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => void onPromoteToSteer(item.id),
+                          className: cn(
+                            "inline-flex h-6 items-center border border-primary/20 bg-primary/5 px-2 text-[11px] font-medium text-primary transition-colors hover:bg-primary/10",
+                            rounded.control
+                          ),
+                          "aria-label": t("chat.followUps.steerAction"),
+                          title: t("chat.followUps.steerAction"),
+                          children: t("chat.followUps.steerAction")
+                        }
+                      ),
+                      canSendItemNow && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => void onSendNow(item.id),
+                          className: cn(
+                            "inline-flex h-6 items-center border border-primary/20 bg-primary/5 px-2 text-[11px] font-medium text-primary transition-colors hover:bg-primary/10",
+                            rounded.control
+                          ),
+                          "aria-label": t("chat.followUps.sendNow"),
+                          title: t("chat.followUps.sendNow"),
+                          children: t("chat.followUps.sendNow")
+                        }
+                      ),
+                      item.mode === "queue" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => onRemove(item.id),
+                          className: cn(
+                            "inline-flex h-6 w-6 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                            rounded.control
+                          ),
+                          "aria-label": t("chat.followUps.remove"),
+                          title: t("chat.followUps.remove"),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Trash2, { size: 13 })
+                        }
+                      ),
+                      item.mode === "queue" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                        Popover,
+                        {
+                          open: openMenuId === item.id,
+                          onOpenChange: (open) => setOpenMenuId(open ? item.id : null),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                              "button",
+                              {
+                                type: "button",
+                                className: cn(
+                                  "inline-flex h-6 w-6 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                                  rounded.control
+                                ),
+                                "aria-label": t("chat.followUps.more"),
+                                title: t("chat.followUps.more"),
+                                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Ellipsis, { size: 13 })
+                              }
+                            ) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                              PopoverContent,
+                              {
+                                align: "end",
+                                side: "bottom",
+                                className: cn(
+                                  "w-52 border-border/70 bg-background p-1.5",
+                                  rounded.panel
+                                ),
+                                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      onClick: () => {
+                                        setOpenMenuId(null);
+                                        onEdit(item.id);
+                                      },
+                                      className: cn(
+                                        "flex items-center gap-2 px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-muted",
+                                        rounded.control
+                                      ),
+                                      children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.PencilLine, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: t("chat.followUps.edit") })
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      onClick: () => {
+                                        setOpenMenuId(null);
+                                        onBehaviorChange("steer");
+                                      },
+                                      className: cn(
+                                        "flex items-center gap-2 px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-muted",
+                                        rounded.control
+                                      ),
+                                      children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.CornerDownLeft, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: t("chat.followUps.turnOffQueueing") })
+                                      ]
+                                    }
+                                  )
+                                ] })
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1.5 text-[10px] leading-4 text-muted-foreground", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Info, { className: "h-3 w-3 shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate", children: item.mode === "queue" ? canSendItemNow ? t("chat.followUps.manualQueueHint") : t("chat.followUps.queueHint") : t("chat.followUps.steerHint") })
+                  ] })
+                ] })
+              ] })
+            },
+            item.id
+          );
+        })
+      ] })
+    }
+  );
+}
+
+// src/components/thread/messages/ai.tsx
+var React14 = __toESM(require("react"), 1);
+var import_lucide_react7 = require("lucide-react");
+
+// src/components/ui/badge.tsx
+var React11 = __toESM(require("react"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var base = "inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background";
+var variants = {
+  default: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  outline: "border-input text-foreground"
+};
+var Badge = React11.forwardRef(
+  ({ className, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { ref, className: cn(base, variants[variant], className), ...props });
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/ui/card.tsx
+var React12 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Card = React12.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-xl border bg-background/80 text-foreground shadow-[0_14px_40px_-30px_rgba(15,23,42,0.5)] backdrop-blur",
         className
       ),
-      role: "tablist",
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React12.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("flex flex-col gap-1.5 px-6 pt-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { ref, className: cn("text-lg font-semibold leading-tight", className), ...props }));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React12.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("px-6 pb-6", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React12.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("flex items-center px-6 pb-6", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+var CardAction = React12.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("ml-auto flex items-center", className), ...props })
+);
+CardAction.displayName = "CardAction";
+
+// src/components/ui/tabs.tsx
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var TabsContext = React13.createContext(null);
+function Tabs({ className, defaultValue, value, onValueChange, ...props }) {
+  const [internalValue, setInternalValue] = React13.useState(defaultValue ?? "");
+  const activeValue = value ?? internalValue;
+  const setValue = React13.useCallback(
+    (nextValue) => {
+      if (value === void 0) setInternalValue(nextValue);
+      onValueChange?.(nextValue);
+    },
+    [onValueChange, value]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TabsContext.Provider, { value: { value: activeValue, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("w-full", className), ...props }) });
+}
+var TabsList = React13.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex h-11 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        className
+      ),
+      role: "tablist",
       ...props
     }
   )
 );
 TabsList.displayName = "TabsList";
-var TabsTrigger = React11.forwardRef(
+var TabsTrigger = React13.forwardRef(
   ({ className, value, onClick, ...props }, ref) => {
-    const context = React11.useContext(TabsContext);
+    const context = React13.useContext(TabsContext);
     if (!context) {
       throw new Error("TabsTrigger must be used within Tabs");
     }
     const isActive = context.value === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         ref,
@@ -1579,14 +2396,14 @@ var TabsTrigger = React11.forwardRef(
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React11.forwardRef(
+var TabsContent = React13.forwardRef(
   ({ className, value, ...props }, ref) => {
-    const context = React11.useContext(TabsContext);
+    const context = React13.useContext(TabsContext);
     if (!context) {
       throw new Error("TabsContent must be used within Tabs");
     }
     if (context.value !== value) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         ref,
@@ -1608,7 +2425,7 @@ var import_remark_gfm = __toESM(require("remark-gfm"), 1);
 var import_rehype_katex = __toESM(require("rehype-katex"), 1);
 var import_remark_math = __toESM(require("remark-math"), 1);
 var import_react6 = require("react");
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 
 // src/components/thread/syntax-highlighter.tsx
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
@@ -1616,7 +2433,7 @@ var import_tsx = __toESM(require("react-syntax-highlighter/dist/esm/languages/pr
 var import_python = __toESM(require("react-syntax-highlighter/dist/esm/languages/prism/python"), 1);
 var import_prism = require("react-syntax-highlighter/dist/cjs/styles/prism");
 var import_react4 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 import_react_syntax_highlighter.PrismAsyncLight.registerLanguage("js", import_tsx.default);
 import_react_syntax_highlighter.PrismAsyncLight.registerLanguage("jsx", import_tsx.default);
 import_react_syntax_highlighter.PrismAsyncLight.registerLanguage("ts", import_tsx.default);
@@ -1627,7 +2444,7 @@ var SyntaxHighlighter = ({
   language,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_react_syntax_highlighter.PrismAsyncLight,
     {
       language,
@@ -1646,75 +2463,10 @@ var SyntaxHighlighter = ({
 
 // src/components/thread/tooltip-icon-button.tsx
 var import_react5 = require("react");
-
-// src/components/ui/tooltip.tsx
-var React12 = require("react");
-var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    TooltipPrimitive.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
-}
-function Tooltip({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    TooltipPrimitive.Root,
-    {
-      "data-slot": "tooltip",
-      ...props
-    }
-  ) });
-}
-function TooltipTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    TooltipPrimitive.Trigger,
-    {
-      "data-slot": "tooltip-trigger",
-      ...props
-    }
-  );
-}
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-    TooltipPrimitive.Content,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
-      ]
-    }
-  ) });
-}
-
-// src/components/thread/tooltip-icon-button.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TooltipIconButton = (0, import_react5.forwardRef)(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       Button,
       {
         variant: "ghost",
@@ -1724,18 +2476,18 @@ var TooltipIconButton = (0, import_react5.forwardRef)(({ children, tooltip, side
         ref,
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sr-only", children: tooltip })
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "sr-only", children: tooltip })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipContent, { side, children: tooltip })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipContent, { side, children: tooltip })
   ] }) });
 });
 TooltipIconButton.displayName = "TooltipIconButton";
 
 // src/components/thread/markdown-text.tsx
 var import_katex_min = require("katex/dist/katex.min.css");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var getTextContent = (children) => import_react6.Children.toArray(children).map((child) => {
   if (typeof child === "string" || typeof child === "number") {
     return String(child);
@@ -1762,23 +2514,23 @@ var CodeHeader = ({ language, code }) => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "lowercase [&>span]:text-xs", children: language }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "lowercase [&>span]:text-xs", children: language }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       TooltipIconButton,
       {
         tooltip: t("markdown.copy"),
         onClick: onCopy,
         children: [
-          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.CopyIcon, {}),
-          isCopied && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.CheckIcon, {})
+          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.CopyIcon, {}),
+          isCopied && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.CheckIcon, {})
         ]
       }
     )
   ] });
 };
 var defaultComponents = {
-  h1: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  h1: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "h1",
     {
       className: cn(
@@ -1788,7 +2540,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h2: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  h2: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "h2",
     {
       className: cn(
@@ -1798,7 +2550,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h3: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  h3: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "h3",
     {
       className: cn(
@@ -1808,7 +2560,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h4: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  h4: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "h4",
     {
       className: cn(
@@ -1818,7 +2570,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h5: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  h5: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "h5",
     {
       className: cn(
@@ -1828,21 +2580,21 @@ var defaultComponents = {
       ...props
     }
   ),
-  h6: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  h6: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "h6",
     {
       className: cn("my-4 font-semibold first:mt-0 last:mb-0", className),
       ...props
     }
   ),
-  p: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  p: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "p",
     {
       className: cn("mt-5 mb-5 leading-7 first:mt-0 last:mb-0", className),
       ...props
     }
   ),
-  a: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  a: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "a",
     {
       className: cn(
@@ -1858,7 +2610,7 @@ var defaultComponents = {
     className,
     node: _node,
     ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "blockquote",
     {
       className: cn(
@@ -1868,21 +2620,21 @@ var defaultComponents = {
       ...props
     }
   ),
-  ul: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  ul: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "ul",
     {
       className: cn("my-5 list-outside list-disc pl-6 [&>li]:mt-2", className),
       ...props
     }
   ),
-  ol: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  ol: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "ol",
     {
       className: cn("my-5 list-outside list-decimal pl-8 [&>li]:mt-2", className),
       ...props
     }
   ),
-  hr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  hr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "hr",
     {
       className: cn("my-5 border-b", className),
@@ -1893,7 +2645,7 @@ var defaultComponents = {
     className,
     node: _node,
     ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "table",
     {
       className: cn(
@@ -1903,7 +2655,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  th: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  th: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "th",
     {
       className: cn(
@@ -1913,7 +2665,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  td: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  td: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "td",
     {
       className: cn(
@@ -1923,7 +2675,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  tr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  tr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "tr",
     {
       className: cn(
@@ -1933,14 +2685,14 @@ var defaultComponents = {
       ...props
     }
   ),
-  sup: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  sup: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "sup",
     {
       className: cn("[&>a]:text-xs [&>a]:no-underline", className),
       ...props
     }
   ),
-  pre: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  pre: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       className: cn(
@@ -1962,15 +2714,15 @@ var defaultComponents = {
     if (match) {
       const language = match[1];
       const normalizedCode = code.replace(/\n$/, "");
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           CodeHeader,
           {
             language,
             code: normalizedCode
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           SyntaxHighlighter,
           {
             language,
@@ -1981,7 +2733,7 @@ var defaultComponents = {
       ] });
     }
     if (isBlockCode) {
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "code",
         {
           className: cn(
@@ -1993,7 +2745,7 @@ var defaultComponents = {
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "code",
       {
         className: cn(
@@ -2007,7 +2759,7 @@ var defaultComponents = {
   }
 };
 var MarkdownTextImpl = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "markdown-content", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "markdown-content", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_react_markdown.default,
     {
       remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
@@ -2021,18 +2773,18 @@ var MarkdownText = (0, import_react6.memo)(MarkdownTextImpl);
 
 // src/components/thread/messages/widget.tsx
 var import_a2ui_react = require("@xpert-ai/a2ui-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function WidgetMessage({ messageId, data }) {
   const widgets = Array.isArray(data.widgets) ? data.widgets : [];
   if (widgets.length === 0) return null;
   const baseSurfaceId = `widget-${messageId}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "space-y-3", children: widgets.map((widget, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "space-y-3", children: widgets.map((widget, index) => {
     const config = widget?.config;
     if (!config || typeof config !== "object") {
       return null;
     }
     const surfaceId = widgets.length > 1 ? `${baseSurfaceId}-${index}` : baseSurfaceId;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_a2ui_react.SurfaceRenderer,
       {
         surfaceId,
@@ -2044,7 +2796,7 @@ function WidgetMessage({ messageId, data }) {
 }
 
 // src/components/thread/messages/ai.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function isTextContent(content) {
   return content.type === "text";
 }
@@ -2060,15 +2812,15 @@ function isComponentContent(content) {
 var statusConfig = {
   success: {
     iconClass: "border-green-500 text-green-700",
-    icon: import_lucide_react6.CheckCircle2
+    icon: import_lucide_react7.CheckCircle2
   },
   fail: {
     iconClass: "border-red-500 text-red-700",
-    icon: import_lucide_react6.XCircle
+    icon: import_lucide_react7.XCircle
   },
   running: {
     iconClass: "border-blue-500 text-blue-700",
-    icon: import_lucide_react6.Loader2
+    icon: import_lucide_react7.Loader2
   }
 };
 function isWidgetComponent(content) {
@@ -2088,11 +2840,11 @@ function safeJson(value) {
 function ReasoningBlock({ reasoning }) {
   const blocks = reasoning.filter((item) => item.text?.trim());
   if (blocks.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       className: "rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground",
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
     },
     item.id ?? `reasoning-${index}`
   )) });
@@ -2100,27 +2852,27 @@ function ReasoningBlock({ reasoning }) {
 function ImageBlock({ content }) {
   const imageUrl = typeof content.image_url === "string" ? content.image_url : typeof content.image_url?.url === "string" ? content.image_url.url : null;
   if (!imageUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Card, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardTitle, { className: "text-sm", children: "Image" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: safeJson(content) })
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardTitle, { className: "text-sm", children: "Image" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: safeJson(content) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
 }
 function MemoryBlock({ content }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardTitle, { className: "text-sm", children: "Memory" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Badge, { variant: "secondary", children: "Memory" })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardTitle, { className: "text-sm", children: "Memory" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Badge, { variant: "secondary", children: "Memory" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson(content.data ?? []) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson(content.data ?? []) }) })
   ] });
 }
 function ComponentBlock({ content }) {
-  const [isExpanded, setIsExpanded] = React13.useState(false);
-  const contentRef = React13.useRef(null);
-  const shouldAutoScrollRef = React13.useRef(true);
-  const previousScrollTopRef = React13.useRef(0);
+  const [isExpanded, setIsExpanded] = React14.useState(false);
+  const contentRef = React14.useRef(null);
+  const shouldAutoScrollRef = React14.useRef(true);
+  const previousScrollTopRef = React14.useRef(0);
   const data = content.data ?? {};
   const category = data.category ?? "Component";
   const title = data.tool && category === "Tool" ? data.tool : data.title ?? data.type ?? "Component";
@@ -2130,10 +2882,10 @@ function ComponentBlock({ content }) {
   const error = data.error ?? null;
   const fallback = message ?? output ?? safeJson(data.data ?? data);
   const hasOutput = message !== null || output !== null;
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     if (status === "running" && output !== null) setIsExpanded(true);
   }, [status, output]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     const element = contentRef.current;
     if (!element) return;
     previousScrollTopRef.current = element.scrollTop;
@@ -2153,7 +2905,7 @@ function ComponentBlock({ content }) {
       element.removeEventListener("scroll", updateAutoScrollState);
     };
   }, [isExpanded]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     if (status !== "running") {
       shouldAutoScrollRef.current = true;
       return;
@@ -2166,21 +2918,21 @@ function ComponentBlock({ content }) {
   }, [isExpanded, output, status]);
   const config = status ? statusConfig[status] : null;
   const StatusIcon = config?.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2 px-2 py-1 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
-        status && StatusIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StatusIcon, { className: cn("h-4 w-4", config?.iconClass, status === "running" && "animate-spin") }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardTitle, { className: "text-sm truncate", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2 px-2 py-1 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
+        status && StatusIcon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StatusIcon, { className: cn("h-4 w-4", config?.iconClass, status === "running" && "animate-spin") }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardTitle, { className: "text-sm truncate", children: title })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "button",
           {
             className: "text-muted-foreground hover:text-foreground transition-colors",
             "aria-label": isExpanded ? "Collapse" : "Expand",
-            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_lucide_react6.ChevronDown,
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_lucide_react7.ChevronDown,
               {
                 className: cn("h-4 w-4 transition-transform", isExpanded && "rotate-180")
               }
@@ -2189,89 +2941,128 @@ function ComponentBlock({ content }) {
         )
       ] })
     ] }),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CardContent, { ref: contentRef, className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
-      data.input && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: JSON.stringify(data.input, null, 2) }),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: typeof error === "string" ? error : safeJson(error) }) : hasOutput && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: fallback })
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardContent, { ref: contentRef, className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
+      data.input && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: JSON.stringify(data.input, null, 2) }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: typeof error === "string" ? error : safeJson(error) }) : hasOutput && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: fallback })
     ] })
   ] });
 }
 function UnknownBlock({ content }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardTitle, { className: "text-sm", children: "Assistant Content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Badge, { variant: "outline", children: content.type ?? "unknown" })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardTitle, { className: "text-sm", children: "Assistant Content" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Badge, { variant: "outline", children: content.type ?? "unknown" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("pre", { className: "whitespace-pre-wrap break-words", children: safeJson(content) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { className: "whitespace-pre-wrap break-words", children: safeJson(content) }) })
   ] });
 }
 function renderContentItem(content, index, messageId) {
   if (typeof content === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MarkdownText, { children: content }),
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MarkdownText, { children: content }),
       ";"
     ] }, `text-${index}`);
   }
   if (isTextContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
   }
   if (isReasoningContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
   }
   if (isImageContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ImageBlock, { content }) }, content.id ?? `image-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ImageBlock, { content }) }, content.id ?? `image-${index}`);
   }
   if (isComponentContent(content)) {
     if (isWidgetComponent(content)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
   }
   if (isMemoryContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
 }
 function renderContent(content, messageId) {
   if (typeof content === "string") {
     if (!content.trim()) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MarkdownText, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MarkdownText, { children: content });
   }
   if (!Array.isArray(content) || content.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "space-y-3", children: content.map((item, index) => renderContentItem(item, index, messageId)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "space-y-3", children: content.map((item, index) => renderContentItem(item, index, messageId)) });
 }
-function AssistantMessage({ message, className, isStreaming = false }) {
+function AssistantStreamingIndicator({
+  status,
+  className
+}) {
   const { t } = useChatkitTranslation();
-  const content = message.content;
-  const hasContent = content != null && !(typeof content === "string" && content.trim() === "" || Array.isArray(message.content) && message.content.length === 0);
-  const hasReasoning = Array.isArray(message.reasoning) && message.reasoning.some((item) => item.text?.trim());
+  const labelMap = {
+    loading: t("message.loading"),
+    thinking: t("message.thinking"),
+    answering: t("message.answering")
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex items-center gap-2 text-xs text-muted-foreground", className), children: [
+    status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+    status === "thinking" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
+    ] }),
+    status === "answering" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: labelMap[status] })
+  ] });
+}
+function AssistantMessage({
+  message,
+  className,
+  isStreaming = false,
+  streamingStatus
+}) {
+  const { t } = useChatkitTranslation();
+  const hasContent = hasRenderableMessageContent(message.content);
+  const hasReasoning = hasRenderableReasoning(message.reasoning);
+  const resolvedStreamingStatus = streamingStatus ?? getAssistantStreamingStatus(message, isStreaming);
   const answerNode = renderContent(message.content, message.id);
-  const reasoningNode = hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ReasoningBlock, { reasoning: message.reasoning ?? [] }) : null;
-  if (!hasContent && !hasReasoning) return null;
+  const reasoningNode = hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ReasoningBlock, { reasoning: message.reasoning ?? [] }) : null;
+  if (!hasRenderableAssistantMessage(message) && !resolvedStreamingStatus) return null;
   const streamingClass = isStreaming ? "streaming-active" : "";
+  if (!hasRenderableAssistantMessage(message) && resolvedStreamingStatus) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
+  }
   if (hasContent && hasReasoning) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-      Tabs,
-      {
-        defaultValue: message.status === "reasoning" ? "reasoning" : "answer",
-        className: "w-full",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TabsList, { className: "h-9", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsTrigger, { value: "answer", children: t("message.answer") }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
-        ]
-      }
-    ) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        Tabs,
+        {
+          defaultValue: message.status === "reasoning" ? "reasoning" : "answer",
+          className: "w-full",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TabsList, { className: "h-9", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabsTrigger, { value: "answer", children: t("message.answer") }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
+          ]
+        }
+      ),
+      resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+    ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("space-y-3", streamingClass, className), children: hasReasoning ? reasoningNode : answerNode });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
+    hasReasoning ? reasoningNode : answerNode,
+    resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+  ] });
 }
 
 // src/components/thread/MessageActions.tsx
-var React14 = __toESM(require("react"), 1);
-var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var React15 = __toESM(require("react"), 1);
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function MessageActions({
   content,
   isAssistant = false,
@@ -2280,7 +3071,7 @@ function MessageActions({
   className
 }) {
   const { t } = useChatkitTranslation();
-  const [copied, setCopied] = React14.useState(false);
+  const [copied, setCopied] = React15.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(content);
@@ -2293,7 +3084,7 @@ function MessageActions({
   if (isStreaming) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       className: cn(
@@ -2301,7 +3092,7 @@ function MessageActions({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
           {
             type: "button",
@@ -2311,17 +3102,17 @@ function MessageActions({
               copied && "text-green-500"
             ),
             title: copied ? t("messageActions.copied") : t("messageActions.copy"),
-            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.Copy, { size: 14 })
+            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Copy, { size: 14 })
           }
         ),
-        isAssistant && onRetry && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        isAssistant && onRetry && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
           {
             type: "button",
             onClick: onRetry,
             className: "p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
             title: t("messageActions.regenerate"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.RefreshCw, { size: 14 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.RefreshCw, { size: 14 })
           }
         )
       ]
@@ -2330,20 +3121,20 @@ function MessageActions({
 }
 
 // src/components/thread/StartScreen.tsx
-var React15 = require("react");
-var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var React16 = require("react");
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function getIconComponent2(icon) {
   const iconMap = {
-    "circle-question": /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.HelpCircle, { size: 20 }),
-    "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Lightbulb, { size: 20 }),
-    "sparkle": /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Sparkles, { size: 20 }),
-    "write": /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Pencil, { size: 20 }),
-    "search": /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Search, { size: 20 }),
-    "globe": /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Globe, { size: 20 }),
-    "book-open": /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.BookOpen, { size: 20 }),
-    "compass": /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Compass, { size: 20 }),
-    "bolt": /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Zap, { size: 20 })
+    "circle-question": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.HelpCircle, { size: 20 }),
+    "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Lightbulb, { size: 20 }),
+    "sparkle": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Sparkles, { size: 20 }),
+    "write": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Pencil, { size: 20 }),
+    "search": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Search, { size: 20 }),
+    "globe": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Globe, { size: 20 }),
+    "book-open": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.BookOpen, { size: 20 }),
+    "compass": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Compass, { size: 20 }),
+    "bolt": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Zap, { size: 20 })
   };
   return icon ? iconMap[icon] || iconMap["sparkle"] : iconMap["sparkle"];
 }
@@ -2351,9 +3142,9 @@ function StartScreen({ startScreen, onPromptClick, className }) {
   const { t } = useChatkitTranslation();
   const greeting = startScreen?.greeting ?? t("startScreen.greeting");
   const prompts = startScreen?.prompts ?? [];
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
-    prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
+    prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "button",
       {
         type: "button",
@@ -2364,8 +3155,8 @@ function StartScreen({ startScreen, onPromptClick, className }) {
           "focus:outline-none focus:ring-2 focus:ring-primary/20"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
         ]
       },
       `prompt-${index}`
@@ -2374,13 +3165,13 @@ function StartScreen({ startScreen, onPromptClick, className }) {
 }
 
 // src/components/ui/chatkit-avatar.tsx
-var React17 = require("react");
+var React18 = require("react");
 
 // src/components/ui/avatar.tsx
-var React16 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Avatar = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Avatar = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -2392,7 +3183,7 @@ var Avatar = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var AvatarImage = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -2401,7 +3192,7 @@ var AvatarImage = React16.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var AvatarFallback = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -2415,7 +3206,7 @@ var AvatarFallback = React16.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/ui/chatkit-avatar.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function asRecord(value) {
   return value && typeof value === "object" ? value : null;
 }
@@ -2488,21 +3279,21 @@ function ChatkitAvatar({
   const fallbackStyle = {
     ...avatar?.background ? { background: avatar.background } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Avatar, { className: cn(roundedClass, className), style, ...props, children: [
-    avatar?.url ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AvatarImage, { className: imageClassName, src: avatar.url, alt: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Avatar, { className: cn(roundedClass, className), style, ...props, children: [
+    avatar?.url ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AvatarImage, { className: imageClassName, src: avatar.url, alt: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       AvatarFallback,
       {
         className: cn(roundedClass, "text-sm font-medium text-foreground", fallbackClassName),
         style: fallbackStyle,
-        children: emojiCharacter ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[1.1em] leading-none", style: emojiStyle, children: emojiCharacter }) : fallbackText
+        children: emojiCharacter ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-[1.1em] leading-none", style: emojiStyle, children: emojiCharacter }) : fallbackText
       }
     )
   ] });
 }
 
 // src/hooks/useThreads.ts
-var React18 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 var DEFAULT_LIMIT = 50;
 var getThreadTitle = (threadRecord) => {
   const title = threadRecord.title?.trim();
@@ -2540,16 +3331,16 @@ function useThreads(limit = DEFAULT_LIMIT) {
     isReady,
     isLoading: isStreamLoading
   } = useStreamContext();
-  const [threadRecords, setThreadRecords] = React18.useState([]);
-  const [isLoading, setIsLoading] = React18.useState(false);
-  const [error, setError] = React18.useState(null);
-  const upsertThreadRecord = React18.useCallback((threadRecord) => {
+  const [threadRecords, setThreadRecords] = React19.useState([]);
+  const [isLoading, setIsLoading] = React19.useState(false);
+  const [error, setError] = React19.useState(null);
+  const upsertThreadRecord = React19.useCallback((threadRecord) => {
     setThreadRecords((prev) => {
       const next = prev.filter((item) => item.id !== threadRecord.id);
       return sortThreadRecords([threadRecord, ...next]);
     });
   }, []);
-  const refreshThreads = React18.useCallback(async () => {
+  const refreshThreads = React19.useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -2565,7 +3356,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       setIsLoading(false);
     }
   }, [client, limit, assistantId]);
-  const createThread = React18.useCallback(
+  const createThread = React19.useCallback(
     async (input) => {
       setError(null);
       const payload = {};
@@ -2579,7 +3370,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const updateThread = React18.useCallback(
+  const updateThread = React19.useCallback(
     async (recordId, payload) => {
       setError(null);
       const updated = await client.conversations.update(recordId, payload);
@@ -2588,7 +3379,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const deleteThread = React18.useCallback(
+  const deleteThread = React19.useCallback(
     async (recordId) => {
       setError(null);
       await client.conversations.delete(recordId);
@@ -2596,11 +3387,11 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client]
   );
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (!isReady) return;
     void refreshThreads();
   }, [refreshThreads, isReady]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (!threadId || !isStreamLoading) return;
     const now = (/* @__PURE__ */ new Date()).toISOString();
     setThreadRecords((prev) => {
@@ -2620,7 +3411,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       return changed ? sortThreadRecords(next) : prev;
     });
   }, [threadId, isStreamLoading]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (!isReady || !threadId || isStreamLoading) return;
     let cancelled = false;
     void client.conversations.search({ where: { threadId }, limit: 1 }).then((result) => {
@@ -2634,7 +3425,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       cancelled = true;
     };
   }, [client, threadId, upsertThreadRecord, isReady, isStreamLoading]);
-  const threads = React18.useMemo(
+  const threads = React19.useMemo(
     () => threadRecords.map((threadRecord) => toThreadItem(threadRecord)),
     [threadRecords]
   );
@@ -2651,10 +3442,10 @@ function useThreads(limit = DEFAULT_LIMIT) {
 }
 
 // src/components/thread/context-usage-indicator.tsx
-var React19 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 
 // src/components/ui/progress-circle.tsx
-var import_jsx_runtime24 = (
+var import_jsx_runtime25 = (
   // biome-ignore lint/a11y/useFocusableInteractive: false positive (progress + progressbar are not focusable interactives)
   // biome-ignore lint/nursery/useAriaPropsSupportedByRole: biome rule at odds with mdn docs (presumed nursary bug with rule)
   require("react/jsx-runtime")
@@ -2678,7 +3469,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
     fill: "none",
     strokeWidth
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "svg",
     {
       role: "progressbar",
@@ -2689,8 +3480,8 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
       "aria-valuemax": 100,
       ...restSvgProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "circle",
           {
             ...commonParams,
@@ -2708,7 +3499,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
 };
 
 // src/components/thread/context-usage-indicator.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var kNumberFormatter = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 0,
   maximumFractionDigits: 1
@@ -2741,20 +3532,20 @@ function ContextUsageIndicator({
 }) {
   const { t } = useChatkitTranslation();
   const stream = useStreamContext();
-  const [maxContextSize, setMaxContextSize] = React19.useState(null);
-  const [usedContextSize, setUsedContextSize] = React19.useState(null);
-  const [assistantAgentKey, setAssistantAgentKey] = React19.useState(null);
-  const latestRealtimeUsageRef = React19.useRef({
+  const [maxContextSize, setMaxContextSize] = React20.useState(null);
+  const [usedContextSize, setUsedContextSize] = React20.useState(null);
+  const [assistantAgentKey, setAssistantAgentKey] = React20.useState(null);
+  const latestRealtimeUsageRef = React20.useRef({
     threadId: null,
     agentKey: null,
     usedTokens: null
   });
-  const realtimeUsage = React19.useMemo(
+  const realtimeUsage = React20.useMemo(
     () => getThreadContextUsage(stream.contextUsageByAgentKey, assistantAgentKey),
     [assistantAgentKey, stream.contextUsageByAgentKey]
   );
   const realtimeUsedContextSize = getThreadContextUsageTotalTokens(realtimeUsage);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!stream.client || !stream.assistantId) {
       setMaxContextSize(null);
       setAssistantAgentKey(null);
@@ -2774,18 +3565,18 @@ function ContextUsageIndicator({
       cancelled = true;
     };
   }, [stream.client, stream.assistantId]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     latestRealtimeUsageRef.current = {
       threadId: stream.threadId ?? null,
       agentKey: assistantAgentKey,
       usedTokens: realtimeUsedContextSize
     };
   }, [assistantAgentKey, realtimeUsedContextSize, stream.threadId]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (realtimeUsedContextSize == null) return;
     setUsedContextSize(realtimeUsedContextSize);
   }, [realtimeUsedContextSize]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!stream.client) {
       setUsedContextSize(null);
       return;
@@ -2850,8 +3641,8 @@ function ContextUsageIndicator({
   });
   const usageLabelWithSuffix = usageLabel.endsWith(":") ? usageLabel : `${usageLabel}:`;
   const progressClassName = percent >= 90 ? "text-destructive" : percent >= 75 ? "text-amber-500" : "text-primary dark:text-zinc-300";
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "button",
       {
         type: "button",
@@ -2860,21 +3651,22 @@ function ContextUsageIndicator({
           className
         ),
         "aria-label": `${usageLabelWithSuffix} ${usageFullLabel}. ${usageTokensLabel}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
     ] })
   ] });
 }
 
 // src/components/chat.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var import_meta2 = {};
 var defaultApiUrl2 = import_meta2.env.VITE_XPERTAI_API_URL;
+var COMPOSER_INPUT_MAX_HEIGHT = 128;
 function formatMessageContent(content) {
   if (typeof content === "string") {
     return content;
@@ -2896,6 +3688,81 @@ function formatMessageContent(content) {
   }
   return "";
 }
+function getClosestQuoteContainer(node) {
+  if (!node) {
+    return null;
+  }
+  const element = node instanceof HTMLElement ? node : node instanceof Text ? node.parentElement : null;
+  return element?.closest("[data-quote-message-id]") ?? null;
+}
+function ReferenceChip({
+  reference,
+  variant,
+  onRemove,
+  removeLabel
+}) {
+  const metaLine = getReferenceMetaLine(reference);
+  const isComposer = variant === "composer";
+  const Icon = reference.type === "quote" ? import_lucide_react10.Quote : import_lucide_react10.FileText;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex items-start gap-2 rounded-md px-2 py-1",
+        isComposer ? "bg-muted text-foreground" : "bg-primary-foreground/20"
+      ),
+      title: getReferenceTitle(reference),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          Icon,
+          {
+            size: isComposer ? 14 : 12,
+            className: cn(
+              "mt-0.5 shrink-0",
+              isComposer ? "text-muted-foreground" : "text-primary-foreground/80"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            "div",
+            {
+              className: cn(
+                "truncate",
+                isComposer ? "text-sm" : "text-xs font-medium"
+              ),
+              children: getReferenceLabel(reference)
+            }
+          ),
+          metaLine && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            "div",
+            {
+              className: cn(
+                "truncate",
+                isComposer ? "text-xs text-muted-foreground" : "text-[10px] text-primary-foreground/75"
+              ),
+              children: metaLine
+            }
+          )
+        ] }),
+        onRemove && removeLabel && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            className: cn(
+              "ml-1 rounded-full p-0.5",
+              isComposer ? "hover:bg-muted-foreground/20" : "hover:bg-primary-foreground/20"
+            ),
+            title: removeLabel,
+            "aria-label": removeLabel,
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.X, { size: 12 })
+          }
+        )
+      ]
+    }
+  );
+}
 function Chat({
   className,
   options,
@@ -2912,17 +3779,21 @@ function Chat({
   const apiUrl = options?.api?.apiUrl || defaultApiUrl2;
   const { setStream } = useStreamManager();
   const stream = useStreamContext();
-  const [isHistoryLoading, setIsHistoryLoading] = React20.useState(false);
-  const [historyError, setHistoryError] = React20.useState(null);
-  const [assistantName, setAssistantName] = React20.useState(null);
-  const [assistantAvatar, setAssistantAvatar] = React20.useState(null);
+  const { theme } = useTheme();
+  const [isHistoryLoading, setIsHistoryLoading] = React21.useState(false);
+  const [historyError, setHistoryError] = React21.useState(null);
+  const [assistantName, setAssistantName] = React21.useState(null);
+  const [assistantAvatar, setAssistantAvatar] = React21.useState(null);
   const LOADING_DOTS_MIN_DURATION = 800;
-  const [showLoadingDots, setShowLoadingDots] = React20.useState(false);
-  const loadingStartTimeRef = React20.useRef(null);
-  React20.useEffect(() => {
+  const STREAMING_STATUS_REFRESH_MS = 250;
+  const [showLoadingDots, setShowLoadingDots] = React21.useState(false);
+  const [streamingNow, setStreamingNow] = React21.useState(() => Date.now());
+  const loadingStartTimeRef = React21.useRef(null);
+  const lastStreamOutputAtRef = React21.useRef(null);
+  React21.useEffect(() => {
     setStream(stream);
   }, [setStream, stream]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (stream.isLoading) {
       if (!loadingStartTimeRef.current) {
         loadingStartTimeRef.current = Date.now();
@@ -2945,67 +3816,180 @@ function Chat({
       }
     }
   }, [stream.isLoading]);
-  const [draft, setDraft] = React20.useState("");
-  const [selectedTool, setSelectedTool] = React20.useState(null);
-  const [attachments, setAttachments] = React20.useState([]);
-  const [isAtBottom, setIsAtBottom] = React20.useState(true);
-  const [hasUpdatesBelow, setHasUpdatesBelow] = React20.useState(false);
+  React21.useEffect(() => {
+    if (!stream.isLoading) {
+      lastStreamOutputAtRef.current = null;
+      setStreamingNow(Date.now());
+      return;
+    }
+    const now = Date.now();
+    lastStreamOutputAtRef.current = now;
+    setStreamingNow(now);
+  }, [stream.messages, stream.isLoading]);
+  React21.useEffect(() => {
+    if (!stream.isLoading) {
+      return;
+    }
+    const timer = window.setInterval(() => {
+      setStreamingNow(Date.now());
+    }, STREAMING_STATUS_REFRESH_MS);
+    return () => window.clearInterval(timer);
+  }, [stream.isLoading]);
+  const [draft, setDraft] = React21.useState("");
+  const [selectedTool, setSelectedTool] = React21.useState(
+    null
+  );
+  const [attachments, setAttachments] = React21.useState([]);
+  const [references, setReferences] = React21.useState([]);
+  const [quoteSelection, setQuoteSelection] = React21.useState(null);
+  const [isAtBottom, setIsAtBottom] = React21.useState(true);
+  const [hasUpdatesBelow, setHasUpdatesBelow] = React21.useState(false);
   const {
     threads,
     deleteThread,
     refreshThreads,
     isLoading: isThreadsLoading
   } = useThreads();
-  const viewportRef = React20.useRef(null);
-  const fileInputRef = React20.useRef(null);
-  const shouldAutoScrollRef = React20.useRef(true);
-  const forceFollowRef = React20.useRef(false);
-  const previousMessageCountRef = React20.useRef(0);
-  const previousScrollTopRef = React20.useRef(0);
-  const autoScrollFrameRef = React20.useRef(null);
-  const isPointerDownRef = React20.useRef(false);
-  const lastTouchYRef = React20.useRef(null);
+  const viewportRef = React21.useRef(null);
+  const fileInputRef = React21.useRef(null);
+  const composerInputRef = React21.useRef(null);
+  const shouldAutoScrollRef = React21.useRef(true);
+  const forceFollowRef = React21.useRef(false);
+  const previousMessageCountRef = React21.useRef(0);
+  const previousScrollTopRef = React21.useRef(0);
+  const autoScrollFrameRef = React21.useRef(null);
+  const isPointerDownRef = React21.useRef(false);
+  const lastTouchYRef = React21.useRef(null);
   const resolvedTitle = title ?? t("chat.title");
   const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
   const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
-  const messages = React20.useMemo(() => stream.messages ?? [], [stream.messages]);
+  const messages = React21.useMemo(
+    () => stream.messages ?? [],
+    [stream.messages]
+  );
   const trimmedDraft = draft.trim();
-  const cancelPendingAutoScroll = React20.useCallback(() => {
+  const hasReferences = references.length > 0;
+  const pendingFollowUps = React21.useMemo(
+    () => [...stream.pendingFollowUps ?? []].sort(
+      (a, b) => a.createdAt - b.createdAt
+    ),
+    [stream.pendingFollowUps]
+  );
+  const clearQuoteSelection = React21.useCallback(() => {
+    setQuoteSelection(null);
+  }, []);
+  useParentMessenger({
+    onSetComposerValue: React21.useCallback(
+      (payload) => {
+        if (!payload) {
+          return;
+        }
+        if (typeof payload.text === "string") {
+          setDraft(payload.text);
+        }
+        if (Array.isArray(payload.references)) {
+          const nextReferences = normalizeReferences(payload.references);
+          setReferences(
+            (previous) => payload.appendReferences ? mergeReferences(previous, nextReferences) : nextReferences
+          );
+        }
+        if (payload.selectedToolId !== void 0) {
+          const nextTool = payload.selectedToolId === null ? null : (composer?.tools ?? []).find(
+            (tool) => tool.id === payload.selectedToolId
+          ) ?? null;
+          setSelectedTool(nextTool);
+        }
+      },
+      [composer?.tools]
+    ),
+    onFocusComposer: React21.useCallback(() => {
+      composerInputRef.current?.focus();
+    }, [])
+  });
+  const syncQuoteSelection = React21.useCallback(() => {
+    if (typeof window === "undefined") {
+      clearQuoteSelection();
+      return;
+    }
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+      clearQuoteSelection();
+      return;
+    }
+    const text = selection.toString().trim();
+    if (!text) {
+      clearQuoteSelection();
+      return;
+    }
+    const anchorContainer = getClosestQuoteContainer(selection.anchorNode);
+    const focusContainer = getClosestQuoteContainer(selection.focusNode);
+    if (!anchorContainer || !focusContainer || anchorContainer !== focusContainer || !viewportRef.current?.contains(anchorContainer)) {
+      clearQuoteSelection();
+      return;
+    }
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      clearQuoteSelection();
+      return;
+    }
+    const top = rect.bottom + 8 > window.innerHeight - 48 ? Math.max(12, rect.top - 44) : rect.bottom + 8;
+    const left = Math.min(
+      Math.max(24, rect.left + rect.width / 2),
+      window.innerWidth - 24
+    );
+    const source = anchorContainer.dataset.quoteSource?.trim() || void 0;
+    const messageId = anchorContainer.dataset.quoteMessageId?.trim() || void 0;
+    setQuoteSelection({
+      reference: {
+        type: "quote",
+        text,
+        ...messageId ? { messageId } : {},
+        ...source ? { source, label: source } : {}
+      },
+      top,
+      left
+    });
+  }, [clearQuoteSelection]);
+  const cancelPendingAutoScroll = React21.useCallback(() => {
     if (autoScrollFrameRef.current !== null) {
       cancelAnimationFrame(autoScrollFrameRef.current);
       autoScrollFrameRef.current = null;
     }
   }, []);
-  const disableAutoFollow = React20.useCallback(() => {
+  const disableAutoFollow = React21.useCallback(() => {
     forceFollowRef.current = false;
     shouldAutoScrollRef.current = false;
     cancelPendingAutoScroll();
   }, [cancelPendingAutoScroll]);
-  const enableAutoFollow = React20.useCallback(() => {
+  const enableAutoFollow = React21.useCallback(() => {
     forceFollowRef.current = true;
     shouldAutoScrollRef.current = true;
     setHasUpdatesBelow(false);
   }, []);
-  const scrollToBottom = React20.useCallback((smooth = false, force = false) => {
-    if (force) {
-      enableAutoFollow();
-    }
-    cancelPendingAutoScroll();
-    autoScrollFrameRef.current = requestAnimationFrame(() => {
-      autoScrollFrameRef.current = null;
-      const viewport = viewportRef.current;
-      if (viewport) {
-        if (!force && !shouldAutoScrollRef.current) {
-          return;
-        }
-        viewport.scrollTo({
-          top: viewport.scrollHeight,
-          behavior: smooth ? "smooth" : "instant"
-        });
+  const scrollToBottom = React21.useCallback(
+    (smooth = false, force = false) => {
+      if (force) {
+        enableAutoFollow();
       }
-    });
-  }, [cancelPendingAutoScroll, enableAutoFollow]);
-  React20.useEffect(() => {
+      cancelPendingAutoScroll();
+      autoScrollFrameRef.current = requestAnimationFrame(() => {
+        autoScrollFrameRef.current = null;
+        const viewport = viewportRef.current;
+        if (viewport) {
+          if (!force && !shouldAutoScrollRef.current) {
+            return;
+          }
+          viewport.scrollTo({
+            top: viewport.scrollHeight,
+            behavior: smooth ? "smooth" : "instant"
+          });
+        }
+      });
+    },
+    [cancelPendingAutoScroll, enableAutoFollow]
+  );
+  React21.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     previousScrollTopRef.current = viewport.scrollTop;
@@ -3057,13 +4041,23 @@ function Chat({
     };
     updateAutoScrollState();
     viewport.addEventListener("wheel", handleWheel, { passive: true });
-    viewport.addEventListener("pointerdown", handlePointerDown, { passive: true });
-    viewport.addEventListener("scroll", updateAutoScrollState, { passive: true });
-    viewport.addEventListener("touchstart", handleTouchStart, { passive: true });
+    viewport.addEventListener("pointerdown", handlePointerDown, {
+      passive: true
+    });
+    viewport.addEventListener("scroll", updateAutoScrollState, {
+      passive: true
+    });
+    viewport.addEventListener("touchstart", handleTouchStart, {
+      passive: true
+    });
     viewport.addEventListener("touchmove", handleTouchMove, { passive: true });
     viewport.addEventListener("touchend", handleTouchEnd, { passive: true });
-    window.addEventListener("pointerup", stopPointerTracking, { passive: true });
-    window.addEventListener("pointercancel", stopPointerTracking, { passive: true });
+    window.addEventListener("pointerup", stopPointerTracking, {
+      passive: true
+    });
+    window.addEventListener("pointercancel", stopPointerTracking, {
+      passive: true
+    });
     return () => {
       cancelPendingAutoScroll();
       viewport.removeEventListener("wheel", handleWheel);
@@ -3076,14 +4070,14 @@ function Chat({
       window.removeEventListener("pointercancel", stopPointerTracking);
     };
   }, [cancelPendingAutoScroll, disableAutoFollow]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     shouldAutoScrollRef.current = true;
     forceFollowRef.current = false;
     previousScrollTopRef.current = 0;
     setIsAtBottom(true);
     setHasUpdatesBelow(false);
   }, [stream.threadId]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const messageCountChanged = messages.length !== previousMessageCountRef.current;
     previousMessageCountRef.current = messages.length;
     if (!shouldAutoScrollRef.current) {
@@ -3097,16 +4091,85 @@ function Chat({
     }
   }, [stream.isLoading, messages, scrollToBottom]);
   const effectiveClientSecret = stream.apiKey?.trim() ? stream.apiKey : clientSecret;
-  const hasApiKey = Boolean(effectiveClientSecret.trim());
-  const missingConfig = !apiUrl || !hasApiKey;
+  const missingConfigKind = getMissingApiConfigurationKind({
+    apiUrl,
+    clientSecret: effectiveClientSecret
+  });
+  const missingConfig = Boolean(missingConfigKind);
+  const missingConfigShortMessage = React21.useMemo(() => {
+    switch (missingConfigKind) {
+      case "apiUrl":
+        return t("chat.missingApiUrlShort");
+      case "clientSecret":
+        return t("chat.missingClientSecretShort");
+      case "apiUrlAndClientSecret":
+        return t("chat.missingApiUrlAndClientSecretShort");
+      default:
+        return t("chat.missingConfigShort");
+    }
+  }, [missingConfigKind, t]);
+  const missingConfigDetailMessage = React21.useMemo(() => {
+    switch (missingConfigKind) {
+      case "apiUrl":
+        return t("chat.missingApiUrlDetail");
+      case "clientSecret":
+        return t("chat.missingClientSecretDetail");
+      case "apiUrlAndClientSecret":
+        return t("chat.missingApiUrlAndClientSecretDetail");
+      default:
+        return t("chat.missingConfigDetail");
+    }
+  }, [missingConfigKind, t]);
   const showMissingConfig = !isClientSecretInitializing && missingConfig;
   const hasUploadingFiles = attachments.some((a) => a.status === "uploading");
-  const isSendDisabled = !trimmedDraft || stream.isLoading || missingConfig || isHistoryLoading || hasUploadingFiles;
-  React20.useEffect(() => {
+  const isSendDisabled = !trimmedDraft && !hasReferences || missingConfig || isHistoryLoading || hasUploadingFiles;
+  const resizeComposerInput = React21.useCallback(() => {
+    const textarea = composerInputRef.current;
+    if (!textarea) {
+      return;
+    }
+    textarea.style.height = "auto";
+    const nextHeight = Math.min(
+      textarea.scrollHeight,
+      COMPOSER_INPUT_MAX_HEIGHT
+    );
+    textarea.style.height = `${nextHeight}px`;
+    textarea.style.overflowY = textarea.scrollHeight > COMPOSER_INPUT_MAX_HEIGHT ? "auto" : "hidden";
+  }, []);
+  React21.useEffect(() => {
+    resizeComposerInput();
+  }, [draft, resizeComposerInput]);
+  React21.useEffect(() => {
+    document.addEventListener("selectionchange", syncQuoteSelection);
+    return () => {
+      document.removeEventListener("selectionchange", syncQuoteSelection);
+    };
+  }, [syncQuoteSelection]);
+  React21.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) {
+      return;
+    }
+    const handleViewportScroll = () => {
+      clearQuoteSelection();
+    };
+    viewport.addEventListener("scroll", handleViewportScroll, {
+      passive: true
+    });
+    window.addEventListener("resize", handleViewportScroll, { passive: true });
+    return () => {
+      viewport.removeEventListener("scroll", handleViewportScroll);
+      window.removeEventListener("resize", handleViewportScroll);
+    };
+  }, [clearQuoteSelection]);
+  React21.useEffect(() => {
+    clearQuoteSelection();
+  }, [messages.length, stream.threadId, clearQuoteSelection]);
+  React21.useEffect(() => {
     if (missingConfig) return;
     void refreshThreads();
   }, [missingConfig, refreshThreads]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (missingConfig || !stream.client || !stream.assistantId) {
       setAssistantName(null);
       setAssistantAvatar(null);
@@ -3137,80 +4200,186 @@ function Chat({
     mimetype: a.storageFile?.mimetype ?? a.file.type,
     size: a.storageFile?.size ?? a.file.size
   }));
+  const submitDraft = React21.useCallback(
+    (followUpOverride) => {
+      if (isSendDisabled) return;
+      const filesToSend = uploadedFiles.length > 0 ? [...uploadedFiles] : void 0;
+      const referencesToSend = references.length > 0 ? [...references] : void 0;
+      const nextFollowUpMode = stream.isLoading ? followUpOverride ?? stream.followUpBehavior : void 0;
+      const humanInput = buildHumanMessageInputPayload({
+        content: trimmedDraft,
+        references: referencesToSend
+      });
+      if (!humanInput) {
+        return;
+      }
+      const displayContent = trimmedDraft || (referencesToSend ? t("chat.referencedContentOnly") : "");
+      const newMessage = {
+        id: createMessageId(),
+        type: "human",
+        content: displayContent,
+        submittedInput: humanInput.input,
+        ...humanInput.referenceComposition ? { referenceComposition: humanInput.referenceComposition } : {},
+        ...filesToSend ? { attachments: filesToSend } : {},
+        ...referencesToSend ? { references: referencesToSend } : {}
+      };
+      setDraft("");
+      const inputPayload = {
+        ...humanInput
+      };
+      if (filesToSend) {
+        inputPayload.files = filesToSend;
+      }
+      const requestOptions = buildInjectedRequestOptions({
+        defaults: options?.request,
+        humanInput: inputPayload
+      });
+      stream.submit(
+        {
+          input: inputPayload,
+          ...requestOptions.state ? { state: requestOptions.state } : {}
+        },
+        {
+          ...nextFollowUpMode ? { followUpMode: nextFollowUpMode } : {},
+          ...requestOptions.context ? { context: requestOptions.context } : {},
+          ...requestOptions.config ? { config: requestOptions.config } : {},
+          ...!nextFollowUpMode ? {
+            optimisticValues: (prev) => {
+              const prevMessages = prev?.messages ?? [];
+              return { ...prev, messages: [...prevMessages, newMessage] };
+            }
+          } : {}
+        }
+      );
+      scrollToBottom(true, true);
+      if (selectedTool && !selectedTool.pinned) {
+        setSelectedTool(null);
+      }
+      setAttachments([]);
+      setReferences([]);
+    },
+    [
+      isSendDisabled,
+      options?.request,
+      references,
+      scrollToBottom,
+      selectedTool,
+      stream,
+      trimmedDraft,
+      uploadedFiles,
+      t
+    ]
+  );
   const handleSubmit = (event) => {
     event.preventDefault();
-    if (isSendDisabled) return;
-    const filesToSend = uploadedFiles.length > 0 ? [...uploadedFiles] : void 0;
-    const newMessage = {
-      id: createMessageId(),
-      type: "human",
-      content: trimmedDraft,
-      ...filesToSend ? { attachments: filesToSend } : {}
-    };
-    setDraft("");
-    const inputPayload = {
-      input: trimmedDraft
-    };
-    if (filesToSend) {
-      inputPayload.files = filesToSend;
-    }
-    const requestOptions = buildInjectedRequestOptions({
-      defaults: options?.request,
-      humanInput: inputPayload
-    });
-    stream.submit(
-      {
-        input: inputPayload,
-        ...requestOptions.state ? { state: requestOptions.state } : {}
-      },
-      {
-        ...requestOptions.context ? { context: requestOptions.context } : {},
-        ...requestOptions.config ? { config: requestOptions.config } : {},
-        optimisticValues: (prev) => {
-          const prevMessages = prev?.messages ?? [];
-          return { ...prev, messages: [...prevMessages, newMessage] };
-        }
+    submitDraft();
+  };
+  const handleEditPendingFollowUp = React21.useCallback(
+    (id) => {
+      const item = pendingFollowUps.find(
+        (entry) => entry.id === id && entry.mode === "queue"
+      );
+      if (!item) {
+        return;
       }
+      const text = item.request?.input?.input?.trim() ?? "";
+      const nextReferences = normalizeReferences(
+        item.request?.input?.references
+      );
+      stream.removePendingFollowUp(id);
+      setDraft(text);
+      setReferences(nextReferences);
+      requestAnimationFrame(() => {
+        const input = composerInputRef.current;
+        if (!input) {
+          return;
+        }
+        input.focus();
+        const position = text.length;
+        input.setSelectionRange(position, position);
+      });
+    },
+    [pendingFollowUps, stream]
+  );
+  const handleQuoteSelection = React21.useCallback(() => {
+    if (!quoteSelection) {
+      return;
+    }
+    setReferences(
+      (previous) => mergeReferences(previous, [quoteSelection.reference])
     );
-    scrollToBottom(true, true);
-    if (selectedTool && !selectedTool.pinned) {
-      setSelectedTool(null);
+    clearQuoteSelection();
+    if (typeof window !== "undefined") {
+      window.getSelection()?.removeAllRanges();
     }
-    setAttachments([]);
-  };
+    composerInputRef.current?.focus();
+  }, [clearQuoteSelection, quoteSelection]);
   const handleAttachmentClick = () => {
     fileInputRef.current?.click();
   };
-  const uploadFile = React20.useCallback(async (localId, file) => {
-    try {
-      const result = await stream.client.contexts.uploadFile(file);
-      setAttachments(
-        (prev) => prev.map(
-          (item) => item.localId === localId ? { ...item, status: "success", storageFile: result } : item
-        )
-      );
-    } catch (error) {
+  const handleComposerKeyDown = (event) => {
+    if (event.key !== "Enter") {
+      return;
+    }
+    if (event.shiftKey && (event.metaKey || event.ctrlKey)) {
+      if (event.nativeEvent.isComposing) {
+        return;
+      }
+      event.preventDefault();
+      if (isSendDisabled) {
+        return;
+      }
+      submitDraft(stream.followUpBehavior === "queue" ? "steer" : "queue");
+      return;
+    }
+    if (event.shiftKey) {
+      return;
+    }
+    if (event.nativeEvent.isComposing) {
+      return;
+    }
+    event.preventDefault();
+    if (isSendDisabled) {
+      return;
+    }
+    submitDraft();
+  };
+  const uploadFile = React21.useCallback(
+    async (localId, file) => {
+      try {
+        const result = await stream.client.contexts.uploadFile(file);
+        setAttachments(
+          (prev) => prev.map(
+            (item) => item.localId === localId ? { ...item, status: "success", storageFile: result } : item
+          )
+        );
+      } catch (error) {
+        setAttachments(
+          (prev) => prev.map(
+            (item) => item.localId === localId ? {
+              ...item,
+              status: "error",
+              error: error instanceof Error ? error.message : "Upload failed"
+            } : item
+          )
+        );
+      }
+    },
+    [stream.client]
+  );
+  const handleRetryUpload = React21.useCallback(
+    (localId) => {
+      const attachment = attachments.find((a) => a.localId === localId);
+      if (!attachment || attachment.status !== "error") return;
       setAttachments(
         (prev) => prev.map(
-          (item) => item.localId === localId ? {
-            ...item,
-            status: "error",
-            error: error instanceof Error ? error.message : "Upload failed"
-          } : item
+          (item) => item.localId === localId ? { ...item, status: "uploading", error: void 0 } : item
         )
       );
-    }
-  }, [stream.client]);
-  const handleRetryUpload = React20.useCallback((localId) => {
-    const attachment = attachments.find((a) => a.localId === localId);
-    if (!attachment || attachment.status !== "error") return;
-    setAttachments(
-      (prev) => prev.map(
-        (item) => item.localId === localId ? { ...item, status: "uploading", error: void 0 } : item
-      )
-    );
-    void uploadFile(localId, attachment.file);
-  }, [attachments, uploadFile]);
+      void uploadFile(localId, attachment.file);
+    },
+    [attachments, uploadFile]
+  );
   const handleFileChange = (event) => {
     const files = event.target.files;
     if (!files || files.length === 0) return;
@@ -3244,12 +4413,15 @@ function Chat({
     if (!attachment) return;
     if (attachment.status === "success" && attachment.storageFile?.id) {
       try {
-        await fetch(`${stream.apiUrl}/contexts/file/${attachment.storageFile.id}`, {
-          method: "DELETE",
-          headers: {
-            "Authorization": `Bearer ${effectiveClientSecret}`
+        await fetch(
+          `${stream.apiUrl}/contexts/file/${attachment.storageFile.id}`,
+          {
+            method: "DELETE",
+            headers: {
+              Authorization: `Bearer ${effectiveClientSecret}`
+            }
           }
-        });
+        );
       } catch {
       }
     }
@@ -3259,27 +4431,31 @@ function Chat({
     setSelectedTool((prev) => prev?.id === tool.id ? null : tool);
   };
   const handlePromptClick = (prompt) => {
-    if (missingConfig || stream.isLoading || isHistoryLoading) return;
+    if (missingConfig || isHistoryLoading) return;
     const newMessage = {
       id: createMessageId(),
       type: "human",
       content: prompt
     };
+    const nextFollowUpMode = stream.isLoading ? stream.followUpBehavior : void 0;
     stream.submit(
       { input: { input: prompt } },
       {
-        optimisticValues: (prev) => {
-          const prevMessages = prev?.messages ?? [];
-          return { ...prev, messages: [...prevMessages, newMessage] };
-        }
+        ...nextFollowUpMode ? { followUpMode: nextFollowUpMode } : {},
+        ...!nextFollowUpMode ? {
+          optimisticValues: (prev) => {
+            const prevMessages = prev?.messages ?? [];
+            return { ...prev, messages: [...prevMessages, newMessage] };
+          }
+        } : {}
       }
     );
     scrollToBottom(true, true);
   };
-  const loadConversationMessages = React20.useCallback(
+  const loadConversationMessages = React21.useCallback(
     async (recordId) => {
       if (missingConfig) {
-        setHistoryError(t("chat.missingConfigShort"));
+        setHistoryError(missingConfigShortMessage);
         return;
       }
       setHistoryError(null);
@@ -3295,7 +4471,7 @@ function Chat({
         setIsHistoryLoading(false);
       }
     },
-    [missingConfig, stream, t]
+    [missingConfig, missingConfigShortMessage, stream, t]
   );
   const handleNewThread = async () => {
     if (missingConfig || isHistoryLoading) return;
@@ -3338,12 +4514,16 @@ function Chat({
   };
   const handleRetry = (messageIndex) => {
     const messagesUpToIndex = messages.slice(0, messageIndex);
-    const lastHumanMessage = [...messagesUpToIndex].reverse().find(
-      (m) => String(m.type) === "human"
-    );
-    if (lastHumanMessage && typeof lastHumanMessage.content === "string") {
+    const lastHumanMessage = [...messagesUpToIndex].reverse().find((m) => String(m.type) === "human");
+    const humanInput = buildHumanMessageInputPayload({
+      content: lastHumanMessage && typeof lastHumanMessage.content === "string" ? lastHumanMessage.content : "",
+      submittedInput: lastHumanMessage?.submittedInput,
+      references: lastHumanMessage?.references,
+      referenceComposition: lastHumanMessage?.referenceComposition
+    });
+    if (humanInput) {
       stream.submit(
-        { input: { input: lastHumanMessage.content } },
+        { input: humanInput },
         {
           optimisticValues: (prev) => {
             const prevMessages = prev?.messages ?? [];
@@ -3358,18 +4538,18 @@ function Chat({
     }
   };
   const acceptMimes = composer?.attachments?.accept ? Object.entries(composer.attachments.accept).map(([mime, exts]) => [mime, ...exts.map((e) => `.${e}`)].join(",")).join(",") : void 0;
-  const currentThread = React20.useMemo(
+  const currentThread = React21.useMemo(
     () => threads.find((item) => item.id === stream.threadId),
     [threads, stream.threadId]
   );
   const errorMessage = stream.error instanceof Error ? stream.error.message : void 0;
-  const threadErrorMessage = React20.useMemo(() => {
+  const threadErrorMessage = React21.useMemo(() => {
     if (currentThread?.status !== "error") return void 0;
     const message = currentThread.error?.trim();
     return message || t("thread.errorToast");
   }, [currentThread, t]);
   const assistantTitle = assistantName || resolvedTitle;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       ref: viewportRef,
@@ -3378,10 +4558,10 @@ function Chat({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "relative shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 ChatkitAvatar,
                 {
                   avatar: assistantAvatar,
@@ -3389,15 +4569,22 @@ function Chat({
                   label: assistantTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "truncate", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "text-lg font-semibold truncate", title: assistantTitle, children: assistantTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "truncate", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                "h2",
+                {
+                  className: "text-lg font-semibold truncate",
+                  title: assistantTitle,
+                  children: assistantTitle
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
             ] })
           ] }),
-          history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -3410,10 +4597,10 @@ function Chat({
                   "disabled:opacity-50 disabled:cursor-not-allowed"
                 ),
                 title: t("history.newThread"),
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Pencil, { size: 16 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.Pencil, { size: 16 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               HistorySidebar,
               {
                 threads,
@@ -3427,23 +4614,45 @@ function Chat({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex-1 p-4", children: [
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
-          historyError && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
-          showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: t("chat.missingConfigDetail") }),
-          isHistoryLoading && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
-          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 p-4", children: [
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
+          historyError && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
+          showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
+          isHistoryLoading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
+          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             StartScreen,
             {
               startScreen,
               onPromptClick: handlePromptClick
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "space-y-4", children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "space-y-4", children: [
             messages.map((message, index) => {
               const messageType = String(message.type);
               const isAssistantMessage = messageType === "assistant" || messageType === "ai";
+              const isStreamingMessage = stream.isLoading && index === messages.length - 1;
+              const streamingStatus = isAssistantMessage ? getAssistantStreamingStatus(
+                {
+                  ...message,
+                  lastStreamOutputAt: lastStreamOutputAtRef.current
+                },
+                isStreamingMessage,
+                { now: streamingNow }
+              ) : null;
+              if (isAssistantMessage && !hasRenderableAssistantMessage(message) && !streamingStatus) {
+                return null;
+              }
               const messageContent = typeof message.content === "string" ? message.content : Array.isArray(message.content) ? message.content.map((part) => formatMessageContent(part)).join("") : formatMessageContent(message.content);
-              return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              const hasPlainRenderableContent = messageContent.trim().length > 0;
+              const humanMessage = message;
+              const humanReferences = humanMessage.references ?? [];
+              const humanAttachments = humanMessage.attachments ?? [];
+              const hasHumanAttachments = message.type === "human" && humanAttachments.length > 0;
+              const canQuoteMessage = message.type === "human" || isAssistantMessage;
+              const quoteSource = message.type === "human" ? t("chat.youLabel") : assistantTitle;
+              if (!isAssistantMessage && !hasPlainRenderableContent && !hasHumanAttachments && humanReferences.length === 0) {
+                return null;
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "div",
                 {
                   className: cn(
@@ -3451,53 +4660,66 @@ function Chat({
                     message.type === "human" ? "justify-end" : "justify-start -ml-1"
                     // AI messages: slightly closer to left
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col px-3 overflow-hidden", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col px-3 overflow-hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "div",
                       {
+                        ...canQuoteMessage ? {
+                          "data-quote-message-id": message.id,
+                          "data-quote-source": quoteSource
+                        } : {},
                         className: cn(
                           "max-w-full rounded-2xl",
                           message.type === "human" ? "bg-primary text-primary-foreground px-4 py-2.5" : message.type === "system" ? "bg-muted text-muted-foreground text-xs px-4 py-2.5" : "py-1 text-chat-foreground"
                           // AI messages: use chat-specific foreground color
                         ),
-                        children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                        children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                           AssistantMessage,
                           {
                             message: {
                               ...message,
                               type: "assistant"
                             },
-                            isStreaming: stream.isLoading && index === messages.length - 1
+                            isStreaming: isStreamingMessage,
+                            streamingStatus
                           }
-                        ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-                          message.type === "human" && message.attachments?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: message.attachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+                          message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                            ReferenceChip,
+                            {
+                              reference,
+                              variant: "message"
+                            },
+                            getReferenceKey(reference)
+                          )) }),
+                          message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                             "div",
                             {
                               className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.FileText, { size: 12 }),
-                                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName })
+                                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.FileText, { size: 12 }),
+                                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName })
                               ]
                             },
                             fileIndex
                           )) }),
-                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                             "p",
                             {
                               className: "wrap-break-word text-sm leading-relaxed",
                               children: formatMessageContent(part)
                             },
                             `${part.type}-${partIndex}`
-                          )) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                          )) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
                         ] })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       MessageActions,
                       {
                         content: messageContent,
                         isAssistant: isAssistantMessage,
-                        isStreaming: stream.isLoading && index === messages.length - 1,
+                        isStreaming: isStreamingMessage,
                         onRetry: isAssistantMessage && !stream.isLoading && index === messages.length - 1 ? () => handleRetry(index) : void 0
                       }
                     )
@@ -3510,18 +4732,34 @@ function Chat({
               const lastMessage = messages[messages.length - 1];
               const lastMessageType = lastMessage ? String(lastMessage.type) : "";
               const isLastMessageFromAI = lastMessageType === "ai" || lastMessageType === "assistant";
-              const lastMsgContent = lastMessage?.content;
-              const hasSubstantialContent = isLastMessageFromAI && (typeof lastMsgContent === "string" && lastMsgContent.length > 10 || Array.isArray(lastMsgContent) && lastMsgContent.length > 0);
-              if (hasSubstantialContent) return null;
-              return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.3s]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.15s]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60" })
-              ] }) }) });
+              const lastAssistantStatus = isLastMessageFromAI ? getAssistantStreamingStatus(
+                {
+                  ...lastMessage,
+                  lastStreamOutputAt: lastStreamOutputAtRef.current
+                },
+                stream.isLoading,
+                { now: streamingNow }
+              ) : null;
+              if (lastAssistantStatus) return null;
+              const fallbackStreamingStatus = getAssistantStreamingStatus(
+                {
+                  status: void 0,
+                  reasoning: void 0,
+                  lastStreamOutputAt: lastStreamOutputAtRef.current
+                },
+                stream.isLoading,
+                { now: streamingNow }
+              );
+              return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                AssistantStreamingIndicator,
+                {
+                  status: fallbackStreamingStatus ?? "loading"
+                }
+              ) }) });
             })()
           ] })
         ] }),
-        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           Button,
           {
             type: "button",
@@ -3534,12 +4772,40 @@ function Chat({
             onClick: () => scrollToBottom(true, true),
             "aria-label": t("chat.scrollToBottom"),
             title: t("chat.scrollToBottom"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.ArrowDown, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.ArrowDown, { size: 16 })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
-          threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: threadErrorMessage }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        quoteSelection && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          "div",
+          {
+            className: "pointer-events-none fixed z-50",
+            style: {
+              top: `${quoteSelection.top}px`,
+              left: `${quoteSelection.left}px`,
+              transform: "translateX(-50%)"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: "secondary",
+                className: "pointer-events-auto shadow-lg",
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: handleQuoteSelection,
+                "aria-label": t("composer.quoteSelection"),
+                title: t("composer.quoteSelection"),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.Quote, { size: 14 }),
+                  t("composer.quoteSelection")
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
+          threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -3550,7 +4816,7 @@ function Chat({
               className: "hidden"
             }
           ),
-          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
             "div",
             {
               className: cn(
@@ -3558,24 +4824,36 @@ function Chat({
                 item.status === "error" ? "bg-destructive/10 border border-destructive/30" : "bg-muted"
               ),
               children: [
-                item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Loader2, { size: 14, className: "animate-spin text-muted-foreground" }),
-                item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.FileText, { size: 14, className: "text-muted-foreground" }),
-                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.FileText, { size: 14, className: "text-destructive" }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: cn(
-                  "max-w-30 truncate",
-                  item.status === "error" && "text-destructive"
-                ), children: item.file.name }),
-                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_lucide_react10.Loader2,
+                  {
+                    size: 14,
+                    className: "animate-spin text-muted-foreground"
+                  }
+                ),
+                item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.FileText, { size: 14, className: "text-muted-foreground" }),
+                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.FileText, { size: 14, className: "text-destructive" }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "max-w-30 truncate",
+                      item.status === "error" && "text-destructive"
+                    ),
+                    children: item.file.name
+                  }
+                ),
+                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleRetryUpload(item.localId),
                     className: "ml-1 rounded-full p-0.5 text-destructive hover:bg-destructive/20",
                     title: t("chat.retryUpload"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.RefreshCw, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.RefreshCw, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3584,67 +4862,98 @@ function Chat({
                       "ml-1 rounded-full p-0.5",
                       item.status === "error" ? "text-destructive hover:bg-destructive/20" : "hover:bg-muted-foreground/20"
                     ),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.X, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.X, { size: 12 })
                   }
                 )
               ]
             },
             item.localId
           )) }),
-          selectedTool && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mb-2 flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", children: selectedTool.shortLabel ?? selectedTool.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            ReferenceChip,
+            {
+              reference,
+              variant: "composer",
+              onRemove: () => setReferences(
+                (previous) => previous.filter(
+                  (item) => getReferenceKey(item) !== getReferenceKey(reference)
+                )
+              ),
+              removeLabel: t("composer.removeReference")
+            },
+            getReferenceKey(reference)
+          )) }),
+          selectedTool && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mb-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", children: selectedTool.shortLabel ?? selectedTool.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => setSelectedTool(null),
                 className: "rounded-full p-0.5 text-muted-foreground hover:bg-muted",
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.X, { size: 12 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.X, { size: 12 })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("form", { className: "flex items-center", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            PendingFollowUps,
+            {
+              items: pendingFollowUps,
+              isLoading: stream.isLoading,
+              followUpBehavior: stream.followUpBehavior,
+              onBehaviorChange: stream.setFollowUpBehavior,
+              onPromoteToSteer: (id) => stream.promotePendingFollowUpToSteer(id),
+              canSendNow: stream.canSendPendingFollowUpNow,
+              onSendNow: (id) => stream.sendPendingFollowUpNow(id),
+              onEdit: handleEditPendingFollowUp,
+              onRemove: stream.removePendingFollowUp
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
             "div",
             {
               className: cn(
-                "flex flex-1 items-center gap-1 rounded-xl",
+                "flex flex-1 items-end gap-1 rounded-xl",
                 "bg-background border border-border shadow-sm",
                 "pl-1.5 pr-1.5 py-1",
                 "focus-within:border-muted-foreground/30 focus-within:shadow-md",
-                "transition-shadow duration-200"
+                "transition-shadow duration-200",
+                getRoundedClass(theme.radius)
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   ComposerMenu,
                   {
                     composer,
                     onAttachmentClick: handleAttachmentClick,
                     onToolSelect: handleToolSelect,
                     selectedTool,
-                    disabled: stream.isLoading || missingConfig || isHistoryLoading
+                    disabled: missingConfig || isHistoryLoading
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  "input",
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "textarea",
                   {
-                    type: "text",
+                    ref: composerInputRef,
                     value: draft,
                     onChange: (event) => setDraft(event.target.value),
+                    onKeyDown: handleComposerKeyDown,
+                    rows: 1,
                     placeholder: inputPlaceholder,
-                    disabled: stream.isLoading || missingConfig || isHistoryLoading,
+                    disabled: missingConfig || isHistoryLoading,
                     className: cn(
-                      "flex-1 bg-transparent text-sm text-foreground outline-none pr-2",
+                      "min-h-8 max-h-32 flex-1 resize-none bg-transparent py-1 pr-2 text-sm leading-5 text-foreground outline-none",
                       "placeholder:text-muted-foreground",
                       "disabled:cursor-not-allowed disabled:opacity-50"
-                    ),
-                    autoComplete: "off"
+                    )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   SendButton,
                   {
                     disabled: isSendDisabled,
                     isLoading: stream.isLoading,
+                    showStop: stream.isLoading && !trimmedDraft,
                     onStop: () => stream.stop(),
                     stopLabel: t("chat.stop"),
                     sendLabel: t("chat.send")
@@ -3653,7 +4962,7 @@ function Chat({
               ]
             }
           ) }),
-          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "p",
             {
               className: cn(
@@ -3663,9 +4972,9 @@ function Chat({
               children: disclaimer.text
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: t("chat.poweredBy") }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: t("chat.poweredBy") }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
           ] })
         ] })
       ]
@@ -3674,11 +4983,11 @@ function Chat({
 }
 
 // src/components/ui/input.tsx
-var React21 = __toESM(require("react"), 1);
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Input = React21.forwardRef(
+var React22 = __toESM(require("react"), 1);
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Input = React22.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "input",
       {
         ref,
@@ -3695,10 +5004,10 @@ var Input = React21.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/separator.tsx
-var React22 = __toESM(require("react"), 1);
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Separator = React22.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var React23 = __toESM(require("react"), 1);
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Separator = React23.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       ref,