@xpert-ai/chatkit-ui 0.0.10 → 0.0.15

package/dist/index.cjs

@@ -62,7 +62,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/chat.tsx
-var React17 = __toESM(require("react"), 1);
+var React18 = __toESM(require("react"), 1);
 var import_lucide_react9 = require("lucide-react");
 
 // src/lib/utils.ts
@@ -381,7 +381,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
 function Button({
   className,
   variant = "default",
-  size = "default",
+  size: size2 = "default",
   asChild = false,
   ...props
 }) {
@@ -391,8 +391,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
     }
   );
@@ -457,6 +457,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: {
@@ -510,6 +515,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: {
@@ -1943,14 +1953,24 @@ function MemoryBlock({ content }) {
 }
 function ComponentBlock({ content }) {
   const [isExpanded, setIsExpanded] = React13.useState(false);
+  const contentRef = React13.useRef(null);
   const data = content.data ?? {};
-  const title = typeof data.title === "string" ? data.title : typeof data.type === "string" ? data.type : "Component";
-  const category = typeof data.category === "string" ? data.category : "Component";
-  const status = typeof data.status === "string" ? data.status : null;
-  const message = typeof data.message === "string" ? data.message : null;
-  const output = typeof data.output === "string" ? data.output : null;
-  const error = data.error || null;
+  const category = data.category ?? "Component";
+  const title = data.tool && category === "Tool" ? data.tool : data.title ?? data.type ?? "Component";
+  const status = data.status ?? null;
+  const message = data.message ?? null;
+  const output = data.output ?? null;
+  const error = data.error ?? null;
   const fallback = message ?? output ?? safeJson(data.data ?? data);
+  const hasOutput = message !== null || output !== null;
+  React13.useEffect(() => {
+    if (status === "running" && output !== null) setIsExpanded(true);
+  }, [status, output]);
+  React13.useEffect(() => {
+    if (status === "running" && contentRef.current) {
+      contentRef.current.scrollTop = contentRef.current.scrollHeight;
+    }
+  }, [status, output]);
   const config = status ? statusConfig[status] : null;
   const StatusIcon = config?.icon;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Card, { children: [
@@ -1976,9 +1996,9 @@ function ComponentBlock({ content }) {
         )
       ] })
     ] }),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CardContent, { className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
+    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) }) : output && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: fallback })
+      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 })
     ] })
   ] });
 }
@@ -2179,6 +2199,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) => {
@@ -2189,7 +2211,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);
@@ -2251,16 +2279,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]
@@ -2277,8 +2328,201 @@ function useThreads(limit = DEFAULT_LIMIT) {
   };
 }
 
+// src/components/thread/context-usage-indicator.tsx
+var React17 = __toESM(require("react"), 1);
+
+// src/components/ui/progress-circle.tsx
+var import_jsx_runtime22 = (
+  // 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")
+);
+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 /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "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__ */ (0, import_jsx_runtime22.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "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
+var import_jsx_runtime23 = require("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__ */ (0, import_jsx_runtime23.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "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__ */ (0, import_jsx_runtime23.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
+    ] })
+  ] });
+}
+
 // src/components/chat.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var import_meta2 = {};
 var defaultApiUrl2 = import_meta2.env.VITE_XPERTAI_API_URL;
 function formatMessageContent(content) {
@@ -2318,16 +2562,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();
@@ -2350,23 +2594,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) {
@@ -2377,10 +2621,10 @@ function Chat({
       }
     });
   }, []);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     scrollToBottom();
   }, [messages.length, scrollToBottom]);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (stream.isLoading) {
       scrollToBottom();
     }
@@ -2391,11 +2635,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) {
@@ -2448,7 +2692,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(
@@ -2468,7 +2712,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(
@@ -2543,7 +2787,7 @@ function Chat({
     );
     scrollToBottom(true);
   };
-  const loadConversationMessages = React17.useCallback(
+  const loadConversationMessages = React18.useCallback(
     async (recordId) => {
       if (missingConfig) {
         setHistoryError(t("chat.missingConfigShort"));
@@ -2624,8 +2868,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__ */ (0, import_jsx_runtime22.jsxs)(
+  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__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       ref: viewportRef,
@@ -2634,16 +2887,16 @@ function Chat({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between border-b px-4 py-2 sticky top-0 z-10 bg-background", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "text-lg font-semibold", children: assistantName || resolvedTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-between border-b px-4 py-2 sticky top-0 z-10 bg-background", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { className: "text-lg font-semibold", children: assistantName || resolvedTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
             ] })
           ] }),
-          history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "button",
               {
                 type: "button",
@@ -2656,10 +2909,10 @@ function Chat({
                   "disabled:opacity-50 disabled:cursor-not-allowed"
                 ),
                 title: t("history.newThread"),
-                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Pencil, { size: 16 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.Pencil, { size: 16 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               HistorySidebar,
               {
                 threads,
@@ -2673,23 +2926,23 @@ function Chat({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex-1 p-4", children: [
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.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_runtime22.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_runtime22.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_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex-1 p-4", children: [
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.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_runtime24.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_runtime24.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_runtime24.jsx)(
             StartScreen,
             {
               startScreen,
               onPromptClick: handlePromptClick
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-4", children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("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__ */ (0, import_jsx_runtime22.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "div",
                 {
                   className: cn(
@@ -2697,8 +2950,8 @@ function Chat({
                     message.type === "human" ? "justify-end" : "justify-start -ml-1"
                     // AI messages: slightly closer to left
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col px-3 overflow-hidden", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col px-3 overflow-hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "div",
                       {
                         className: cn(
@@ -2706,7 +2959,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__ */ (0, import_jsx_runtime22.jsx)(
+                        children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                           AssistantMessage,
                           {
                             message: {
@@ -2715,30 +2968,30 @@ function Chat({
                             },
                             isStreaming: stream.isLoading && index === messages.length - 1
                           }
-                        ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-                          message.type === "human" && message.attachments?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: message.attachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+                          message.type === "human" && message.attachments?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: message.attachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime22.jsx)(import_lucide_react9.FileText, { size: 12 }),
-                                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName })
+                                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.FileText, { size: 12 }),
+                                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName })
                               ]
                             },
                             fileIndex
                           )) }),
-                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             "p",
                             {
                               className: "wrap-break-word text-sm leading-relaxed",
                               children: formatMessageContent(part)
                             },
                             `${part.type}-${partIndex}`
-                          )) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                          )) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
                         ] })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       MessageActions,
                       {
                         content: messageContent,
@@ -2759,16 +3012,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__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.3s]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.15s]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60" })
+              return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.3s]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.15s]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60" })
               ] }) }) });
             })()
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
+          threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -2779,7 +3033,7 @@ function Chat({
               className: "hidden"
             }
           ),
-          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
               className: cn(
@@ -2787,24 +3041,24 @@ function Chat({
                 item.status === "error" ? "bg-destructive/10 border border-destructive/30" : "bg-muted"
               ),
               children: [
-                item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Loader2, { size: 14, className: "animate-spin text-muted-foreground" }),
-                item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.FileText, { size: 14, className: "text-muted-foreground" }),
-                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.FileText, { size: 14, className: "text-destructive" }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cn(
+                item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.Loader2, { size: 14, className: "animate-spin text-muted-foreground" }),
+                item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.FileText, { size: 14, className: "text-muted-foreground" }),
+                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.FileText, { size: 14, className: "text-destructive" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: cn(
                   "max-w-30 truncate",
                   item.status === "error" && "text-destructive"
                 ), children: item.file.name }),
-                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime22.jsx)(import_lucide_react9.RefreshCw, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.RefreshCw, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2813,26 +3067,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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.X, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.X, { size: 12 })
                   }
                 )
               ]
             },
             item.localId
           )) }),
-          selectedTool && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "mb-2 flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsx)(
+          selectedTool && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mb-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => setSelectedTool(null),
                 className: "rounded-full p-0.5 text-muted-foreground hover:bg-muted",
-                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.X, { size: 12 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.X, { size: 12 })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("form", { className: "flex items-center", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("form", { className: "flex items-center", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
               className: cn(
@@ -2843,7 +3097,7 @@ function Chat({
                 "transition-shadow duration-200"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   ComposerMenu,
                   {
                     composer,
@@ -2853,7 +3107,7 @@ function Chat({
                     disabled: stream.isLoading || missingConfig || isHistoryLoading
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "input",
                   {
                     type: "text",
@@ -2869,7 +3123,7 @@ function Chat({
                     autoComplete: "off"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   SendButton,
                   {
                     disabled: isSendDisabled,
@@ -2882,7 +3136,7 @@ function Chat({
               ]
             }
           ) }),
-          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "p",
             {
               className: cn(
@@ -2892,7 +3146,10 @@ function Chat({
               children: disclaimer.text
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-2 text-center text-xs text-muted-foreground", children: t("chat.poweredBy") })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: t("chat.poweredBy") }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
+          ] })
         ] })
       ]
     }
@@ -2900,11 +3157,11 @@ function Chat({
 }
 
 // src/components/ui/input.tsx
-var React18 = __toESM(require("react"), 1);
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Input = React18.forwardRef(
+var React19 = __toESM(require("react"), 1);
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Input = React19.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "input",
       {
         ref,
@@ -2921,10 +3178,10 @@ var Input = React18.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/avatar.tsx
-var React19 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Avatar = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Avatar = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -2936,7 +3193,7 @@ var Avatar = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var AvatarImage = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -2945,7 +3202,7 @@ var AvatarImage = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var AvatarFallback = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -2959,10 +3216,10 @@ var AvatarFallback = React19.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/ui/separator.tsx
-var React20 = __toESM(require("react"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Separator = React20.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var React21 = __toESM(require("react"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Separator = React21.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       ref,