@xpert-ai/chatkit-ui 0.0.9 → 0.0.11

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/chat.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { FileText as FileText2, Loader2 as Loader22, Pencil as Pencil3, RefreshCw as RefreshCw2, X as X2 } from "lucide-react";
 
 // src/lib/utils.ts
@@ -338,7 +338,7 @@ var buttonVariants = cva(
 function Button({
   className,
   variant = "default",
-  size = "default",
+  size: size2 = "default",
   asChild = false,
   ...props
 }) {
@@ -348,8 +348,8 @@ function Button({
     {
       "data-slot": "button",
       "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
+      "data-size": size2,
+      className: cn(buttonVariants({ variant, size: size2, className })),
       ...props
     }
   );
@@ -414,6 +414,11 @@ var en_US_default = {
       loadMessages: "Failed to load thread messages",
       createThread: "Failed to create thread",
       deleteThread: "Failed to delete thread"
+    },
+    contextUsage: {
+      label: "Context window",
+      full: "{{usedPercent}}% used ({{remainingPercent}}% left)",
+      tokensUsed: "{{used}} / {{max}} tokens used"
     }
   },
   history: {
@@ -467,6 +472,11 @@ var zh_CN_default = {
       loadMessages: "\u52A0\u8F7D\u7EBF\u7A0B\u6D88\u606F\u5931\u8D25",
       createThread: "\u521B\u5EFA\u7EBF\u7A0B\u5931\u8D25",
       deleteThread: "\u5220\u9664\u7EBF\u7A0B\u5931\u8D25"
+    },
+    contextUsage: {
+      label: "\u4E0A\u4E0B\u6587\u7A97\u53E3",
+      full: "\u5DF2\u4F7F\u7528 {{usedPercent}}%\uFF08\u5269\u4F59 {{remainingPercent}}%\uFF09",
+      tokensUsed: "\u5DF2\u4F7F\u7528 {{used}} / {{max}} tokens"
     }
   },
   history: {
@@ -1683,7 +1693,7 @@ var defaultComponents = {
   ol: ({ className, ...props }) => /* @__PURE__ */ jsx17(
     "ol",
     {
-      className: cn("my-5 list-outside list-decimal pl-7 [&>li]:mt-2", className),
+      className: cn("my-5 list-outside list-decimal pl-8 [&>li]:mt-2", className),
       ...props
     }
   ),
@@ -1745,7 +1755,7 @@ var defaultComponents = {
     "pre",
     {
       className: cn(
-        "max-w-4xl overflow-x-auto rounded-lg bg-black text-white",
+        "max-w-4xl overflow-x-auto rounded-lg text-sm bg-black text-white dark:bg-zinc-800 ",
         className
       ),
       ...props
@@ -2146,6 +2156,8 @@ var toThreadItem = (threadRecord) => ({
   id: threadRecord.threadId ?? threadRecord.id,
   recordId: threadRecord.id,
   title: getThreadTitle(threadRecord),
+  status: threadRecord.status || "idle",
+  error: threadRecord.error,
   lastMessageAt: toDate(threadRecord.updatedAt)
 });
 var sortThreadRecords = (threadRecords) => {
@@ -2156,7 +2168,13 @@ var sortThreadRecords = (threadRecords) => {
   });
 };
 function useThreads(limit = DEFAULT_LIMIT) {
-  const { client, threadId, assistantId, isReady } = useStreamContext();
+  const {
+    client,
+    threadId,
+    assistantId,
+    isReady,
+    isLoading: isStreamLoading
+  } = useStreamContext();
   const [threadRecords, setThreadRecords] = React16.useState([]);
   const [isLoading, setIsLoading] = React16.useState(false);
   const [error, setError] = React16.useState(null);
@@ -2218,16 +2236,39 @@ function useThreads(limit = DEFAULT_LIMIT) {
     void refreshThreads();
   }, [refreshThreads, isReady]);
   React16.useEffect(() => {
-    if (!isReady) return;
-    if (!threadId) return;
-    if (threadRecords.some((item) => item.threadId === threadId)) return;
+    if (!threadId || !isStreamLoading) return;
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    setThreadRecords((prev) => {
+      let changed = false;
+      const next = prev.map((item) => {
+        const isCurrentThread = item.threadId === threadId || item.id === threadId;
+        if (!isCurrentThread) return item;
+        if (item.status === "busy" && !item.error) return item;
+        changed = true;
+        return {
+          ...item,
+          status: "busy",
+          error: void 0,
+          updatedAt: now
+        };
+      });
+      return changed ? sortThreadRecords(next) : prev;
+    });
+  }, [threadId, isStreamLoading]);
+  React16.useEffect(() => {
+    if (!isReady || !threadId || isStreamLoading) return;
+    let cancelled = false;
     void client.conversations.search({ where: { threadId }, limit: 1 }).then((result) => {
+      if (cancelled) return;
       const found = result.items?.[0];
       if (found) upsertThreadRecord(found);
     }).catch((err) => {
-      setError(err);
+      if (!cancelled) setError(err);
     });
-  }, [client, threadId, threadRecords, upsertThreadRecord, isReady]);
+    return () => {
+      cancelled = true;
+    };
+  }, [client, threadId, upsertThreadRecord, isReady, isStreamLoading]);
   const threads = React16.useMemo(
     () => threadRecords.map((threadRecord) => toThreadItem(threadRecord)),
     [threadRecords]
@@ -2244,8 +2285,201 @@ function useThreads(limit = DEFAULT_LIMIT) {
   };
 }
 
+// src/components/thread/context-usage-indicator.tsx
+import * as React17 from "react";
+
+// src/components/ui/progress-circle.tsx
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+function clamp(input, a, b) {
+  return Math.max(Math.min(input, Math.max(a, b)), Math.min(a, b));
+}
+var size = 24;
+var strokeWidth = 4;
+var total = 100;
+var ProgressCircle = ({ value, className, ...restSvgProps }) => {
+  const normalizedValue = clamp(value, 0, total);
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const progress = normalizedValue / total * circumference;
+  const halfSize = size / 2;
+  const commonParams = {
+    cx: halfSize,
+    cy: halfSize,
+    r: radius,
+    fill: "none",
+    strokeWidth
+  };
+  return (
+    // 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)
+    /* @__PURE__ */ jsxs11(
+      "svg",
+      {
+        role: "progressbar",
+        viewBox: `0 0 ${size} ${size}`,
+        className: cn("size-6", className),
+        "aria-valuenow": normalizedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        ...restSvgProps,
+        children: [
+          /* @__PURE__ */ jsx22("circle", { ...commonParams, className: "stroke-current/25" }),
+          /* @__PURE__ */ jsx22(
+            "circle",
+            {
+              ...commonParams,
+              stroke: "currentColor",
+              strokeDasharray: circumference,
+              strokeDashoffset: circumference - progress,
+              strokeLinecap: "round",
+              transform: `rotate(-90 ${halfSize} ${halfSize})`,
+              className: "stroke-current"
+            }
+          )
+        ]
+      }
+    )
+  );
+};
+
+// src/components/thread/context-usage-indicator.tsx
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+var kNumberFormatter = new Intl.NumberFormat("en-US", {
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1
+});
+function normalizeContextSize(value) {
+  if (typeof value === "number" && Number.isFinite(value) && value >= 0) {
+    return Math.floor(value);
+  }
+  if (typeof value === "string") {
+    const parsed = Number.parseInt(value, 10);
+    if (Number.isFinite(parsed) && parsed >= 0) {
+      return parsed;
+    }
+  }
+  return null;
+}
+function normalizeAgentKey(value) {
+  if (typeof value !== "string") {
+    return null;
+  }
+  const normalized = value.trim();
+  return normalized ? normalized : null;
+}
+function resolveAssistantContextSize(assistant) {
+  return normalizeContextSize(assistant.metadata?.context_size) ?? normalizeContextSize(assistant.config?.configurable?.context_size);
+}
+function resolveAssistantAgentKey(assistant) {
+  return normalizeAgentKey(assistant.metadata?.agent_key) ?? normalizeAgentKey(assistant.config?.configurable?.agentKey);
+}
+function clampUsage(value, max) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+    return 0;
+  }
+  return Math.min(Math.floor(value), max);
+}
+function formatCountInK(value) {
+  return `${kNumberFormatter.format(value / 1e3)}k`;
+}
+function ContextUsageIndicator({
+  label,
+  className
+}) {
+  const { t } = useChatkitTranslation();
+  const stream = useStreamContext();
+  const [maxContextSize, setMaxContextSize] = React17.useState(null);
+  const [usedContextSize, setUsedContextSize] = React17.useState(null);
+  const [assistantAgentKey, setAssistantAgentKey] = React17.useState(null);
+  React17.useEffect(() => {
+    if (!stream.client || !stream.assistantId) {
+      setMaxContextSize(null);
+      setAssistantAgentKey(null);
+      return;
+    }
+    let cancelled = false;
+    stream.client.assistants.get(stream.assistantId).then((assistant) => {
+      if (cancelled || !assistant) return;
+      setMaxContextSize(resolveAssistantContextSize(assistant));
+      setAssistantAgentKey(resolveAssistantAgentKey(assistant));
+    }).catch((err) => {
+      if (cancelled) return;
+      console.warn("[Chat] Failed to load assistant context size:", err);
+      setAssistantAgentKey(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [stream.client, stream.assistantId]);
+  React17.useEffect(() => {
+    if (!stream.client) {
+      setUsedContextSize(null);
+      return;
+    }
+    if (!stream.threadId) {
+      setUsedContextSize(0);
+      return;
+    }
+    if (stream.isLoading) return;
+    let cancelled = false;
+    stream.client.threads.getContextUsage(
+      stream.threadId,
+      assistantAgentKey ? { agentKey: assistantAgentKey } : void 0
+    ).then((result) => normalizeContextSize(result?.usage?.context_tokens)).then((result) => {
+      if (cancelled) return;
+      setUsedContextSize(result ?? 0);
+    }).catch((err) => {
+      if (cancelled) return;
+      console.warn("[Chat] Failed to load thread context usage:", err);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [assistantAgentKey, stream.apiKey, stream.apiUrl, stream.client, stream.threadId, stream.isLoading]);
+  if (typeof maxContextSize !== "number" || !Number.isFinite(maxContextSize) || maxContextSize <= 0) {
+    return null;
+  }
+  const max = Math.floor(maxContextSize);
+  const used = clampUsage(usedContextSize, max);
+  const percent = Math.max(0, Math.min(100, used / max * 100));
+  const roundedPercent = Math.round(percent);
+  const remainingPercent = Math.max(0, 100 - roundedPercent);
+  const formattedUsed = formatCountInK(used);
+  const formattedMax = formatCountInK(max);
+  const usageLabel = label ?? t("chat.contextUsage.label");
+  const usageFullLabel = t("chat.contextUsage.full", {
+    usedPercent: roundedPercent,
+    remainingPercent
+  });
+  const usageTokensLabel = t("chat.contextUsage.tokensUsed", {
+    used: formattedUsed,
+    max: formattedMax
+  });
+  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__ */ jsxs12(Tooltip, { children: [
+    /* @__PURE__ */ jsx23(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx23(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "inline-flex items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background",
+          className
+        ),
+        "aria-label": `${usageLabelWithSuffix} ${usageFullLabel}. ${usageTokensLabel}`,
+        children: /* @__PURE__ */ jsx23(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs12(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
+      /* @__PURE__ */ jsx23("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
+      /* @__PURE__ */ jsx23("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
+      /* @__PURE__ */ jsx23("div", { className: "text-sm font-semibold", children: usageTokensLabel })
+    ] })
+  ] });
+}
+
 // src/components/chat.tsx
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var defaultApiUrl2 = import.meta.env.VITE_XPERTAI_API_URL;
 function formatMessageContent(content) {
   if (typeof content === "string") {
@@ -2284,16 +2518,16 @@ function Chat({
   const apiUrl = options?.api?.apiUrl || defaultApiUrl2;
   const { setStream } = useStreamManager();
   const stream = useStreamContext();
-  const [isHistoryLoading, setIsHistoryLoading] = React17.useState(false);
-  const [historyError, setHistoryError] = React17.useState(null);
-  const [assistantName, setAssistantName] = React17.useState(null);
+  const [isHistoryLoading, setIsHistoryLoading] = React18.useState(false);
+  const [historyError, setHistoryError] = React18.useState(null);
+  const [assistantName, setAssistantName] = React18.useState(null);
   const LOADING_DOTS_MIN_DURATION = 800;
-  const [showLoadingDots, setShowLoadingDots] = React17.useState(false);
-  const loadingStartTimeRef = React17.useRef(null);
-  React17.useEffect(() => {
+  const [showLoadingDots, setShowLoadingDots] = React18.useState(false);
+  const loadingStartTimeRef = React18.useRef(null);
+  React18.useEffect(() => {
     setStream(stream);
   }, [setStream, stream]);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (stream.isLoading) {
       if (!loadingStartTimeRef.current) {
         loadingStartTimeRef.current = Date.now();
@@ -2316,23 +2550,23 @@ function Chat({
       }
     }
   }, [stream.isLoading]);
-  const [draft, setDraft] = React17.useState("");
-  const [selectedTool, setSelectedTool] = React17.useState(null);
-  const [attachments, setAttachments] = React17.useState([]);
+  const [draft, setDraft] = React18.useState("");
+  const [selectedTool, setSelectedTool] = React18.useState(null);
+  const [attachments, setAttachments] = React18.useState([]);
   const {
     threads,
     deleteThread,
     refreshThreads,
     isLoading: isThreadsLoading
   } = useThreads();
-  const viewportRef = React17.useRef(null);
-  const fileInputRef = React17.useRef(null);
+  const viewportRef = React18.useRef(null);
+  const fileInputRef = React18.useRef(null);
   const resolvedTitle = title ?? t("chat.title");
   const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
   const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
   const messages = stream.messages ?? [];
   const trimmedDraft = draft.trim();
-  const scrollToBottom = React17.useCallback((smooth = false) => {
+  const scrollToBottom = React18.useCallback((smooth = false) => {
     requestAnimationFrame(() => {
       const viewport = viewportRef.current;
       if (viewport) {
@@ -2343,10 +2577,10 @@ function Chat({
       }
     });
   }, []);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     scrollToBottom();
   }, [messages.length, scrollToBottom]);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (stream.isLoading) {
       scrollToBottom();
     }
@@ -2357,11 +2591,11 @@ function Chat({
   const showMissingConfig = !isClientSecretInitializing && missingConfig;
   const hasUploadingFiles = attachments.some((a) => a.status === "uploading");
   const isSendDisabled = !trimmedDraft || stream.isLoading || missingConfig || isHistoryLoading || hasUploadingFiles;
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (missingConfig) return;
     void refreshThreads();
   }, [missingConfig, refreshThreads]);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (missingConfig || !stream.client || !stream.assistantId) return;
     stream.client.assistants.get(stream.assistantId).then((assistant) => {
       if (assistant) {
@@ -2414,7 +2648,7 @@ function Chat({
   const handleAttachmentClick = () => {
     fileInputRef.current?.click();
   };
-  const uploadFile = React17.useCallback(async (localId, file) => {
+  const uploadFile = React18.useCallback(async (localId, file) => {
     try {
       const result = await stream.client.contexts.uploadFile(file);
       setAttachments(
@@ -2434,7 +2668,7 @@ function Chat({
       );
     }
   }, [stream.client]);
-  const handleRetryUpload = React17.useCallback((localId) => {
+  const handleRetryUpload = React18.useCallback((localId) => {
     const attachment = attachments.find((a) => a.localId === localId);
     if (!attachment || attachment.status !== "error") return;
     setAttachments(
@@ -2509,7 +2743,7 @@ function Chat({
     );
     scrollToBottom(true);
   };
-  const loadConversationMessages = React17.useCallback(
+  const loadConversationMessages = React18.useCallback(
     async (recordId) => {
       if (missingConfig) {
         setHistoryError(t("chat.missingConfigShort"));
@@ -2590,8 +2824,17 @@ 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 = React18.useMemo(
+    () => threads.find((item) => item.id === stream.threadId),
+    [threads, stream.threadId]
+  );
   const errorMessage = stream.error instanceof Error ? stream.error.message : void 0;
-  return /* @__PURE__ */ jsxs11(
+  const threadErrorMessage = React18.useMemo(() => {
+    if (currentThread?.status !== "error") return void 0;
+    const message = currentThread.error?.trim();
+    return message || t("thread.errorToast");
+  }, [currentThread, t]);
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       ref: viewportRef,
@@ -2600,16 +2843,16 @@ function Chat({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between border-b px-4 py-2 sticky top-0 z-10 bg-background", children: [
-          /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx22("div", { className: "h-2 w-2 rounded-full bg-green-500" }),
-            /* @__PURE__ */ jsxs11("div", { children: [
-              /* @__PURE__ */ jsx22("h2", { className: "text-lg font-semibold", children: assistantName || resolvedTitle }),
-              /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between border-b px-4 py-2 sticky top-0 z-10 bg-background", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx24("div", { className: "h-2 w-2 rounded-full bg-green-500" }),
+            /* @__PURE__ */ jsxs13("div", { children: [
+              /* @__PURE__ */ jsx24("h2", { className: "text-lg font-semibold", children: assistantName || resolvedTitle }),
+              /* @__PURE__ */ jsx24("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
             ] })
           ] }),
-          history?.enabled !== false && /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx22(
+          history?.enabled !== false && /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 type: "button",
@@ -2622,10 +2865,10 @@ function Chat({
                   "disabled:opacity-50 disabled:cursor-not-allowed"
                 ),
                 title: t("history.newThread"),
-                children: /* @__PURE__ */ jsx22(Pencil3, { size: 16 })
+                children: /* @__PURE__ */ jsx24(Pencil3, { size: 16 })
               }
             ),
-            /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsx24(
               HistorySidebar,
               {
                 threads,
@@ -2639,23 +2882,23 @@ function Chat({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs11("div", { className: "flex-1 p-4", children: [
-          errorMessage && /* @__PURE__ */ jsx22("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__ */ jsx22("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__ */ jsx22("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__ */ jsx22("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__ */ jsx22(
+        /* @__PURE__ */ jsxs13("div", { className: "flex-1 p-4", children: [
+          errorMessage && /* @__PURE__ */ jsx24("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__ */ jsx24("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__ */ jsx24("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__ */ jsx24("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__ */ jsx24(
             StartScreen,
             {
               startScreen,
               onPromptClick: handlePromptClick
             }
-          ) : /* @__PURE__ */ jsxs11("div", { className: "space-y-4", children: [
+          ) : /* @__PURE__ */ jsxs13("div", { className: "space-y-4", children: [
             messages.map((message, index) => {
               const messageType = String(message.type);
               const isAssistantMessage = messageType === "assistant" || messageType === "ai";
               const messageContent = typeof message.content === "string" ? message.content : Array.isArray(message.content) ? message.content.map((part) => formatMessageContent(part)).join("") : formatMessageContent(message.content);
-              return /* @__PURE__ */ jsx22(
+              return /* @__PURE__ */ jsx24(
                 "div",
                 {
                   className: cn(
@@ -2663,8 +2906,8 @@ function Chat({
                     message.type === "human" ? "justify-end" : "justify-start -ml-1"
                     // AI messages: slightly closer to left
                   ),
-                  children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col px-2 overflow-visible", children: [
-                    /* @__PURE__ */ jsx22(
+                  children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col px-3 overflow-hidden", children: [
+                    /* @__PURE__ */ jsx24(
                       "div",
                       {
                         className: cn(
@@ -2672,7 +2915,7 @@ function Chat({
                           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__ */ jsx22(
+                        children: isAssistantMessage ? /* @__PURE__ */ jsx24(
                           AssistantMessage,
                           {
                             message: {
@@ -2681,30 +2924,30 @@ function Chat({
                             },
                             isStreaming: stream.isLoading && index === messages.length - 1
                           }
-                        ) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
-                          message.type === "human" && message.attachments?.length > 0 && /* @__PURE__ */ jsx22("div", { className: "flex flex-wrap gap-1.5 mb-2", children: message.attachments.map((file, fileIndex) => /* @__PURE__ */ jsxs11(
+                        ) : /* @__PURE__ */ jsxs13(Fragment3, { children: [
+                          message.type === "human" && message.attachments?.length > 0 && /* @__PURE__ */ jsx24("div", { className: "flex flex-wrap gap-1.5 mb-2", children: message.attachments.map((file, fileIndex) => /* @__PURE__ */ jsxs13(
                             "div",
                             {
                               className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
                               children: [
-                                /* @__PURE__ */ jsx22(FileText2, { size: 12 }),
-                                /* @__PURE__ */ jsx22("span", { className: "max-w-[100px] truncate", children: file.originalName })
+                                /* @__PURE__ */ jsx24(FileText2, { size: 12 }),
+                                /* @__PURE__ */ jsx24("span", { className: "max-w-[100px] truncate", children: file.originalName })
                               ]
                             },
                             fileIndex
                           )) }),
-                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ jsx22(
+                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ jsx24(
                             "p",
                             {
                               className: "wrap-break-word text-sm leading-relaxed",
                               children: formatMessageContent(part)
                             },
                             `${part.type}-${partIndex}`
-                          )) : /* @__PURE__ */ jsx22("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                          )) : /* @__PURE__ */ jsx24("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
                         ] })
                       }
                     ),
-                    /* @__PURE__ */ jsx22(
+                    /* @__PURE__ */ jsx24(
                       MessageActions,
                       {
                         content: messageContent,
@@ -2725,16 +2968,17 @@ function Chat({
               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__ */ jsx22("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ jsx22("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ jsxs11("div", { className: "flex gap-1.5", children: [
-                /* @__PURE__ */ jsx22("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.3s]" }),
-                /* @__PURE__ */ jsx22("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.15s]" }),
-                /* @__PURE__ */ jsx22("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60" })
+              return /* @__PURE__ */ jsx24("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ jsx24("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ jsxs13("div", { className: "flex gap-1.5", children: [
+                /* @__PURE__ */ jsx24("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.3s]" }),
+                /* @__PURE__ */ jsx24("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.15s]" }),
+                /* @__PURE__ */ jsx24("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60" })
               ] }) }) });
             })()
           ] })
         ] }),
-        /* @__PURE__ */ jsxs11("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
-          /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsxs13("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
+          threadErrorMessage && /* @__PURE__ */ jsx24("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: threadErrorMessage }),
+          /* @__PURE__ */ jsx24(
             "input",
             {
               ref: fileInputRef,
@@ -2745,7 +2989,7 @@ function Chat({
               className: "hidden"
             }
           ),
-          attachments.length > 0 && /* @__PURE__ */ jsx22("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ jsxs11(
+          attachments.length > 0 && /* @__PURE__ */ jsx24("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ jsxs13(
             "div",
             {
               className: cn(
@@ -2753,24 +2997,24 @@ function Chat({
                 item.status === "error" ? "bg-destructive/10 border border-destructive/30" : "bg-muted"
               ),
               children: [
-                item.status === "uploading" && /* @__PURE__ */ jsx22(Loader22, { size: 14, className: "animate-spin text-muted-foreground" }),
-                item.status === "success" && /* @__PURE__ */ jsx22(FileText2, { size: 14, className: "text-muted-foreground" }),
-                item.status === "error" && /* @__PURE__ */ jsx22(FileText2, { size: 14, className: "text-destructive" }),
-                /* @__PURE__ */ jsx22("span", { className: cn(
+                item.status === "uploading" && /* @__PURE__ */ jsx24(Loader22, { size: 14, className: "animate-spin text-muted-foreground" }),
+                item.status === "success" && /* @__PURE__ */ jsx24(FileText2, { size: 14, className: "text-muted-foreground" }),
+                item.status === "error" && /* @__PURE__ */ jsx24(FileText2, { size: 14, className: "text-destructive" }),
+                /* @__PURE__ */ jsx24("span", { className: cn(
                   "max-w-30 truncate",
                   item.status === "error" && "text-destructive"
                 ), children: item.file.name }),
-                item.status === "error" && /* @__PURE__ */ jsx22(
+                item.status === "error" && /* @__PURE__ */ jsx24(
                   "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__ */ jsx22(RefreshCw2, { size: 12 })
+                    children: /* @__PURE__ */ jsx24(RefreshCw2, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx24(
                   "button",
                   {
                     type: "button",
@@ -2779,26 +3023,26 @@ 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__ */ jsx22(X2, { size: 12 })
+                    children: /* @__PURE__ */ jsx24(X2, { size: 12 })
                   }
                 )
               ]
             },
             item.localId
           )) }),
-          selectedTool && /* @__PURE__ */ jsxs11("div", { className: "mb-2 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx22("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", children: selectedTool.shortLabel ?? selectedTool.label }),
-            /* @__PURE__ */ jsx22(
+          selectedTool && /* @__PURE__ */ jsxs13("div", { className: "mb-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx24("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", children: selectedTool.shortLabel ?? selectedTool.label }),
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 type: "button",
                 onClick: () => setSelectedTool(null),
                 className: "rounded-full p-0.5 text-muted-foreground hover:bg-muted",
-                children: /* @__PURE__ */ jsx22(X2, { size: 12 })
+                children: /* @__PURE__ */ jsx24(X2, { size: 12 })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx22("form", { className: "flex items-center", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsx24("form", { className: "flex items-center", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs13(
             "div",
             {
               className: cn(
@@ -2809,7 +3053,7 @@ function Chat({
                 "transition-shadow duration-200"
               ),
               children: [
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx24(
                   ComposerMenu,
                   {
                     composer,
@@ -2819,7 +3063,7 @@ function Chat({
                     disabled: stream.isLoading || missingConfig || isHistoryLoading
                   }
                 ),
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx24(
                   "input",
                   {
                     type: "text",
@@ -2835,7 +3079,7 @@ function Chat({
                     autoComplete: "off"
                   }
                 ),
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx24(
                   SendButton,
                   {
                     disabled: isSendDisabled,
@@ -2848,7 +3092,7 @@ function Chat({
               ]
             }
           ) }),
-          disclaimer?.text && /* @__PURE__ */ jsx22(
+          disclaimer?.text && /* @__PURE__ */ jsx24(
             "p",
             {
               className: cn(
@@ -2858,7 +3102,10 @@ function Chat({
               children: disclaimer.text
             }
           ),
-          /* @__PURE__ */ jsx22("p", { className: "mt-2 text-center text-xs text-muted-foreground", children: t("chat.poweredBy") })
+          /* @__PURE__ */ jsxs13("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx24("span", { children: t("chat.poweredBy") }),
+            /* @__PURE__ */ jsx24(ContextUsageIndicator, { className: "absolute right-4" })
+          ] })
         ] })
       ]
     }
@@ -2866,11 +3113,11 @@ function Chat({
 }
 
 // src/components/ui/input.tsx
-import * as React18 from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var Input = React18.forwardRef(
+import * as React19 from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var Input = React19.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx25(
       "input",
       {
         ref,
@@ -2887,10 +3134,10 @@ var Input = React18.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/avatar.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var Avatar = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+import { jsx as jsx26 } from "react/jsx-runtime";
+var Avatar = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   AvatarPrimitive.Root,
   {
     ref,
@@ -2902,7 +3149,7 @@ var Avatar = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var AvatarImage = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   AvatarPrimitive.Image,
   {
     ref,
@@ -2911,7 +3158,7 @@ var AvatarImage = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var AvatarFallback = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -2925,10 +3172,10 @@ var AvatarFallback = React19.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/ui/separator.tsx
-import * as React20 from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var Separator = React20.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx25(
+import * as React21 from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var Separator = React21.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx27(
     "div",
     {
       ref,