@xpert-ai/chatkit-ui 0.5.13 → 0.5.14

package/dist/index.cjs

@@ -68,7 +68,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/chat.tsx
 var React65 = __toESM(require("react"), 1);
-var import_lucide_react41 = require("lucide-react");
+var import_lucide_react42 = require("lucide-react");
 var import_chatkit_types16 = require("@xpert-ai/chatkit-types");
 
 // src/lib/utils.ts
@@ -113,6 +113,16 @@ var import_lodash_es = require("lodash-es");
 
 // src/lib/thread-context-usage.ts
 var THREAD_CONTEXT_USAGE_EVENT_TYPE = "thread_context_usage";
+function readStoredContextUsage(result) {
+  const usedTokens = normalizeContextUsageNumber(result.usage.context_tokens);
+  if ("status" in result && result.status === "unavailable" || usedTokens == null || usedTokens === 0) {
+    return { usedTokens: null, status: "unavailable" };
+  }
+  return {
+    usedTokens,
+    status: "status" in result && result.status === "stale" ? "stale" : "current"
+  };
+}
 function isRecord(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
@@ -146,15 +156,6 @@ function getThreadContextUsage(state, agentKey) {
 function getThreadContextUsageTotalTokens(event) {
   return normalizeContextUsageNumber(event?.usage?.totalTokens);
 }
-function resolveUsedContextSize(options) {
-  const realtimeUsedTokens = getThreadContextUsageTotalTokens(
-    options.realtimeUsage
-  );
-  if (realtimeUsedTokens != null) {
-    return realtimeUsedTokens;
-  }
-  return normalizeContextUsageNumber(options.fallbackUsedTokens) ?? 0;
-}
 
 // src/lib/message.ts
 var ASSISTANT_STREAM_IDLE_TO_THINKING_MS = 2e3;
@@ -2706,7 +2707,9 @@ var en_US_default = {
     contextUsage: {
       label: "Context window",
       full: "{{usedPercent}}% used ({{remainingPercent}}% left)",
-      tokensUsed: "{{used}} / {{max}} tokens used"
+      tokensUsed: "{{used}} / {{max}} tokens used",
+      stale: "Last valid usage (not updated by the latest call)",
+      unavailable: "No valid usage available"
     },
     goal: {
       label: "Goal",
@@ -3306,7 +3309,9 @@ var zh_CN_default = {
     contextUsage: {
       label: "\u4E0A\u4E0B\u6587\u7A97\u53E3",
       full: "\u5DF2\u4F7F\u7528 {{usedPercent}}%\uFF08\u5269\u4F59 {{remainingPercent}}%\uFF09",
-      tokensUsed: "\u5DF2\u4F7F\u7528 {{used}} / {{max}} tokens"
+      tokensUsed: "\u5DF2\u4F7F\u7528 {{used}} / {{max}} tokens",
+      stale: "\u4E0A\u6B21\u6709\u6548\u7528\u91CF\uFF08\u672C\u6B21\u8C03\u7528\u672A\u66F4\u65B0\uFF09",
+      unavailable: "\u6682\u65E0\u6709\u6548\u7528\u91CF"
     },
     goal: {
       label: "\u76EE\u6807",
@@ -18762,6 +18767,7 @@ function useThreads(limit = DEFAULT_LIMIT, enabled = true) {
 
 // src/components/thread/context-usage-indicator.tsx
 var React52 = __toESM(require("react"), 1);
+var import_lucide_react36 = require("lucide-react");
 
 // src/components/ui/progress-circle.tsx
 var import_jsx_runtime59 = (
@@ -18851,102 +18857,115 @@ function ContextUsageIndicator({
 }) {
   const { t } = useChatkitTranslation();
   const stream = useStreamContext();
-  const [maxContextSize, setMaxContextSize] = React52.useState(
-    null
-  );
-  const [usedContextSize, setUsedContextSize] = React52.useState(
-    null
-  );
-  const [assistantAgentKey, setAssistantAgentKey] = React52.useState(null);
-  const latestRealtimeUsageRef = React52.useRef({
-    threadId: null,
-    agentKey: null,
-    usedTokens: null
-  });
-  const realtimeUsage = React52.useMemo(
-    () => getThreadContextUsage(stream.contextUsageByAgentKey, assistantAgentKey),
-    [assistantAgentKey, stream.contextUsageByAgentKey]
+  const [assistantContext, setAssistantContext] = React52.useState(null);
+  const assistantReady = assistantContext?.assistantId === stream.assistantId;
+  const assistantAgentKey = assistantReady ? assistantContext?.agentKey ?? null : null;
+  const maxContextSize = assistantReady ? assistantContext?.maxContextSize ?? null : null;
+  const scope = React52.useMemo(
+    () => ({
+      threadId: stream.threadId ?? null,
+      assistantId: stream.assistantId,
+      agentKey: assistantAgentKey
+    }),
+    [stream.threadId, stream.assistantId, assistantAgentKey]
   );
+  const [measurement, setMeasurement] = React52.useState(null);
+  const realtimeUsage = React52.useMemo(() => {
+    const usage = getThreadContextUsage(
+      stream.contextUsageByAgentKey,
+      assistantAgentKey
+    );
+    return usage?.threadId === scope.threadId ? usage : null;
+  }, [assistantAgentKey, scope.threadId, stream.contextUsageByAgentKey]);
   const realtimeUsedContextSize = getThreadContextUsageTotalTokens(realtimeUsage);
+  const latestRealtimeUsageRef = React52.useRef(realtimeUsage);
   const hasApiConfiguration = Boolean(
     stream.apiUrl?.trim() && stream.apiKey?.trim()
   );
   React52.useEffect(() => {
     if (!hasApiConfiguration || !stream.client || !stream.assistantId) {
-      setMaxContextSize(null);
-      setAssistantAgentKey(null);
+      setAssistantContext(null);
       return;
     }
     let cancelled = false;
     stream.client.assistants.get(stream.assistantId).then((assistant) => {
       if (cancelled || !assistant) return;
-      setMaxContextSize(resolveAssistantContextSize(assistant));
-      setAssistantAgentKey(resolveAssistantAgentKey(assistant));
+      setAssistantContext({
+        assistantId: stream.assistantId,
+        maxContextSize: resolveAssistantContextSize(assistant),
+        agentKey: resolveAssistantAgentKey(assistant)
+      });
     }).catch((err) => {
       if (cancelled) return;
       console.warn("[Chat] Failed to load assistant context size:", err);
-      setAssistantAgentKey(null);
+      setAssistantContext(null);
     });
     return () => {
       cancelled = true;
     };
   }, [hasApiConfiguration, stream.client, stream.assistantId]);
   React52.useEffect(() => {
-    latestRealtimeUsageRef.current = {
-      threadId: stream.threadId ?? null,
-      agentKey: assistantAgentKey,
-      usedTokens: realtimeUsedContextSize
-    };
-  }, [assistantAgentKey, realtimeUsedContextSize, stream.threadId]);
-  React52.useEffect(() => {
-    if (realtimeUsedContextSize == null) return;
-    setUsedContextSize(realtimeUsedContextSize);
-  }, [realtimeUsedContextSize]);
+    latestRealtimeUsageRef.current = realtimeUsage;
+    if (realtimeUsedContextSize == null || realtimeUsedContextSize === 0)
+      return;
+    setMeasurement({
+      scope,
+      usedTokens: realtimeUsedContextSize,
+      status: "current"
+    });
+  }, [scope, realtimeUsage, realtimeUsedContextSize]);
   React52.useEffect(() => {
-    if (!hasApiConfiguration || !stream.client) {
-      setUsedContextSize(null);
+    if (!hasApiConfiguration || !stream.client || !assistantReady) {
       return;
     }
-    if (!stream.threadId) {
-      setUsedContextSize(0);
+    if (!scope.threadId) {
+      setMeasurement({ scope, usedTokens: 0, status: "current" });
       return;
     }
-    if (realtimeUsedContextSize != null) return;
     if (stream.isLoading) return;
     let cancelled = false;
-    const requestThreadId = stream.threadId;
-    const requestAgentKey = assistantAgentKey;
+    const realtimeAtRequest = latestRealtimeUsageRef.current;
     stream.client.threads.getContextUsage(
-      requestThreadId,
-      requestAgentKey ? { agentKey: requestAgentKey } : void 0
-    ).then(
-      (result) => normalizeContextUsageNumber(result?.usage?.context_tokens)
+      scope.threadId,
+      scope.agentKey ? { agentKey: scope.agentKey } : void 0
     ).then((result) => {
-      if (cancelled) return;
-      const latestRealtimeUsage = latestRealtimeUsageRef.current;
-      if (latestRealtimeUsage.usedTokens != null && latestRealtimeUsage.threadId === requestThreadId && latestRealtimeUsage.agentKey === requestAgentKey) {
+      if (cancelled || latestRealtimeUsageRef.current !== realtimeAtRequest)
         return;
-      }
-      setUsedContextSize(
-        resolveUsedContextSize({
-          fallbackUsedTokens: result
-        })
-      );
+      const stored = readStoredContextUsage(result);
+      const realtimeTokens = getThreadContextUsageTotalTokens(realtimeAtRequest);
+      const sameRun = realtimeAtRequest && (!result.run_id || result.run_id === realtimeAtRequest.runId);
+      setMeasurement((previous) => {
+        const previousTokens = previous?.scope === scope ? previous.usedTokens : null;
+        const usedTokens = stored.usedTokens == null ? previousTokens : sameRun && realtimeTokens != null && realtimeTokens > 0 ? realtimeTokens : stored.usedTokens;
+        return {
+          scope,
+          usedTokens,
+          status: stored.status === "unavailable" && usedTokens != null ? "stale" : stored.status
+        };
+      });
     }).catch((err) => {
-      if (cancelled) return;
+      if (cancelled || latestRealtimeUsageRef.current !== realtimeAtRequest)
+        return;
       console.warn("[Chat] Failed to load thread context usage:", err);
+      setMeasurement((previous) => {
+        const usedTokens = previous?.scope === scope ? previous.usedTokens : null;
+        return {
+          scope,
+          usedTokens,
+          status: usedTokens == null ? "unavailable" : "stale"
+        };
+      });
     });
     return () => {
       cancelled = true;
     };
   }, [
-    assistantAgentKey,
+    assistantReady,
     hasApiConfiguration,
-    realtimeUsedContextSize,
+    scope,
     stream.apiKey,
     stream.apiUrl,
     stream.client,
-    stream.threadId,
     stream.isLoading
   ]);
   const effectiveMaxContextSize = realtimeUsage?.effectiveModel?.contextWindow ?? maxContextSize;
@@ -18954,6 +18973,9 @@ function ContextUsageIndicator({
     return null;
   }
   const max = Math.floor(effectiveMaxContextSize);
+  const usedContextSize = measurement?.scope === scope ? measurement.usedTokens : null;
+  const usageStatus = measurement?.scope === scope ? measurement.status : "unavailable";
+  const hasMeasurement = usedContextSize != null;
   const used = clampUsage(usedContextSize, max);
   const percent = Math.max(0, Math.min(100, used / max * 100));
   const roundedPercent = Math.round(percent);
@@ -18970,6 +18992,7 @@ function ContextUsageIndicator({
     max: formattedMax
   });
   const usageLabelWithSuffix = usageLabel.endsWith(":") ? usageLabel : `${usageLabel}:`;
+  const statusLabel = usageStatus === "stale" ? t("chat.contextUsage.stale") : !hasMeasurement ? t("chat.contextUsage.unavailable") : null;
   const progressClassName = percent >= 90 ? "text-destructive" : percent >= 75 ? "text-amber-500" : "text-primary dark:text-zinc-300";
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
@@ -18980,13 +19003,19 @@ function ContextUsageIndicator({
           "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_runtime60.jsx)(
+        "aria-label": `${usageLabelWithSuffix} ${hasMeasurement ? `${usageFullLabel}. ${usageTokensLabel}` : ""}${statusLabel ? ` ${statusLabel}` : ""}`,
+        children: hasMeasurement ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           ProgressCircle,
           {
             value: percent,
             className: cn("size-5", progressClassName)
           }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          import_lucide_react36.CircleHelp,
+          {
+            className: "size-5 text-muted-foreground",
+            "aria-hidden": "true"
+          }
         )
       }
     ) }),
@@ -18998,8 +19027,11 @@ function ContextUsageIndicator({
         className: "space-y-0.5 px-3 py-2 text-center",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
+          hasMeasurement && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
+          ] }),
+          !hasMeasurement && statusLabel && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-sm", children: statusLabel })
         ]
       }
     )
@@ -19035,7 +19067,7 @@ function normalizeModelOptions(models) {
 }
 
 // src/components/composer/ComposerCapabilityChip.tsx
-var import_lucide_react36 = require("lucide-react");
+var import_lucide_react37 = require("lucide-react");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function ComposerCapabilityChip({
   option,
@@ -19073,7 +19105,7 @@ ${option.description}` : option.label,
               name: option.label
             }),
             className: "flex size-5 shrink-0 items-center justify-center rounded-full hover:bg-primary/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50",
-            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react36.X, { className: "size-3" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react37.X, { className: "size-3" })
           }
         )
       ]
@@ -19494,12 +19526,12 @@ function PetBridge({ pet, state }) {
 
 // src/components/settings/SettingsSheet.tsx
 var React60 = __toESM(require("react"), 1);
-var import_lucide_react38 = require("lucide-react");
+var import_lucide_react39 = require("lucide-react");
 
 // src/components/ui/select.tsx
 var React55 = require("react");
 var import_radix_ui2 = require("radix-ui");
-var import_lucide_react37 = require("lucide-react");
+var import_lucide_react38 = require("lucide-react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 function Select({
   ...props
@@ -19542,7 +19574,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_radix_ui2.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react37.ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_radix_ui2.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react38.ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })
       ]
     }
   );
@@ -19596,7 +19628,7 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_radix_ui2.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react37.CheckIcon, { className: "pointer-events-none" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_radix_ui2.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react38.CheckIcon, { className: "pointer-events-none" }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_radix_ui2.Select.ItemText, { children })
       ]
     }
@@ -19616,7 +19648,7 @@ function SelectScrollUpButton({
       ),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-        import_lucide_react37.ChevronUpIcon,
+        import_lucide_react38.ChevronUpIcon,
         {}
       )
     }
@@ -19636,7 +19668,7 @@ function SelectScrollDownButton({
       ),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-        import_lucide_react37.ChevronDownIcon,
+        import_lucide_react38.ChevronDownIcon,
         {}
       )
     }
@@ -20097,13 +20129,13 @@ function SettingsSheet({
   );
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Sheet, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(SheetContent, { side: "right", className: "w-[min(92vw,26rem)] overflow-y-auto", children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SheetHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react38.Settings, { size: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react39.Settings, { size: 16 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SheetTitle, { children: t("settings.title") })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("form", { className: "mt-6 space-y-5", onSubmit: handleSubmit, children: [
       /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("section", { className: "space-y-5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react38.PawPrint, { size: 15 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react39.PawPrint, { size: 15 }) }),
           /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h3", { className: "text-sm font-semibold", children: t("pet.settings.title") })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "flex items-center justify-between gap-4 rounded-md border border-border px-3 py-2", children: [
@@ -20465,7 +20497,7 @@ function createXpertThreadGoalAdapter(client, scope) {
 
 // src/workbench/context.tsx
 var React61 = __toESM(require("react"), 1);
-var import_lucide_react39 = require("lucide-react");
+var import_lucide_react40 = require("lucide-react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var WorkbenchContext = React61.createContext({
   enabled: false,
@@ -20499,7 +20531,7 @@ function WorkbenchToggleButton() {
         ),
         "aria-label": label,
         "aria-expanded": false,
-        children: workbench.loading ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react39.Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react39.PanelRight, { size: 16 })
+        children: workbench.loading ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react40.Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react40.PanelRight, { size: 16 })
       }
     ) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TooltipContent, { side: "bottom", children: tooltip })
@@ -21481,7 +21513,7 @@ function useTaskSummary({
 
 // src/components/task-summary/TaskSummary.tsx
 var React64 = __toESM(require("react"), 1);
-var import_lucide_react40 = require("lucide-react");
+var import_lucide_react41 = require("lucide-react");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var PREVIEW_SIZE = 3;
 function TaskSummaryTrigger({
@@ -21510,7 +21542,7 @@ function TaskSummaryTrigger({
       "aria-label": t("taskSummary.open"),
       "aria-expanded": open,
       onClick: displayMode === "docked" ? () => setOpen(!open) : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.ListChecks, { size: 16 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.ListChecks, { size: 16 })
     }
   );
   if (displayMode === "docked") {
@@ -21613,8 +21645,8 @@ function TaskSummaryContent({
         disabled: loading,
         onClick: () => canLoadMore ? void onLoadSection(section) : toggleSection(section),
         children: [
-          loading && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.Loader2, { className: "size-3 animate-spin" }),
-          !loading && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.ListChecks, { className: "size-3.5" }),
+          loading && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.Loader2, { className: "size-3 animate-spin" }),
+          !loading && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.ListChecks, { className: "size-3.5" }),
           canLoadMore ? t("taskSummary.loadMore") : expanded[section] ? t("taskSummary.collapse") : t("taskSummary.viewAll", { count: total2 })
         ]
       }
@@ -21633,7 +21665,7 @@ function TaskSummaryContent({
           [section]: !isExpanded
         })),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.ListChecks, { className: "size-3.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.ListChecks, { className: "size-3.5" }),
           isExpanded ? t("taskSummary.collapse") : t("taskSummary.viewAll", { count: total2 })
         ]
       }
@@ -21649,7 +21681,7 @@ function TaskSummaryContent({
           className: "inline-flex shrink-0 items-center gap-1 font-medium hover:underline",
           onClick: onRetryHistory,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.RotateCcw, { className: "size-3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.RotateCcw, { className: "size-3" }),
             t("taskSummary.retry")
           ]
         }
@@ -21662,8 +21694,8 @@ function TaskSummaryContent({
           title: item.title,
           metadata: localizedStatus(item.status),
           description: item.description,
-          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.FileOutput, { className: "size-4" }),
-          trailing: item.resource && item.resource.type !== "message" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.ExternalLink, { className: "size-3.5" }) : void 0,
+          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.FileOutput, { className: "size-4" }),
+          trailing: item.resource && item.resource.type !== "message" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.ExternalLink, { className: "size-3.5" }) : void 0,
           onClick: () => openSummaryItem(item.resource, item.messageId, item.title)
         },
         item.id
@@ -21676,8 +21708,8 @@ function TaskSummaryContent({
         {
           title: item.title,
           description: item.description,
-          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.BookOpen, { className: "size-4" }),
-          trailing: item.resource && item.resource.type !== "message" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.ExternalLink, { className: "size-3.5" }) : void 0,
+          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.BookOpen, { className: "size-4" }),
+          trailing: item.resource && item.resource.type !== "message" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.ExternalLink, { className: "size-3.5" }) : void 0,
           onClick: () => openSummaryItem(item.resource, item.messageId, item.title)
         },
         item.id
@@ -21690,7 +21722,7 @@ function TaskSummaryContent({
         {
           title: summary.goal.objective,
           metadata: localizedStatus(summary.goal.status),
-          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.Target, { className: "size-4" }),
+          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.Target, { className: "size-4" }),
           onClick: onFocusComposer
         }
       ),
@@ -21699,7 +21731,7 @@ function TaskSummaryContent({
         {
           title: summary.plan.title,
           description: summary.plan.excerpt,
-          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.ListChecks, { className: "size-4" }),
+          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.ListChecks, { className: "size-4" }),
           onClick: () => summary.plan?.messageId ? onNavigateMessage(summary.plan.messageId) : onFocusComposer()
         }
       ),
@@ -21709,7 +21741,7 @@ function TaskSummaryContent({
           {
             title: todo.content,
             metadata: localizedStatus(todo.status),
-            leading: todo.status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.CheckCircle2, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.CircleEllipsis, { className: "size-4 text-muted-foreground" }),
+            leading: todo.status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.CheckCircle2, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.CircleEllipsis, { className: "size-4 text-muted-foreground" }),
             onClick: () => summary.todos?.messageId ? onNavigateMessage(summary.todos.messageId) : onFocusComposer()
           },
           todo.id
@@ -21724,8 +21756,8 @@ function TaskSummaryContent({
           title: item.title,
           metadata: localizedStatus(item.status),
           description: item.description,
-          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.PlayCircle, { className: "size-4" }),
-          trailing: item.resource ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.ExternalLink, { className: "size-3.5" }) : void 0,
+          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.PlayCircle, { className: "size-4" }),
+          trailing: item.resource ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.ExternalLink, { className: "size-3.5" }) : void 0,
           onClick: () => item.resource && onOpenResource(item.resource, void 0, item.title)
         },
         item.id
@@ -21742,7 +21774,7 @@ function TaskSummaryContent({
             formatElapsed(item.elapsedTime)
           ].filter(Boolean).join(" \xB7 "),
           description: item.error,
-          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.Bot, { className: "size-4" }),
+          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.Bot, { className: "size-4" }),
           onClick: () => item.messageId ? onNavigateMessage(item.messageId) : onFocusComposer()
         },
         item.id
@@ -21755,7 +21787,7 @@ function TaskSummaryContent({
         {
           title: item.title,
           description: item.description,
-          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react40.CircleEllipsis, { className: "size-4" }),
+          leading: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react41.CircleEllipsis, { className: "size-4" }),
           onClick: () => item.messageId ? onNavigateMessage(item.messageId) : onFocusComposer()
         },
         item.id
@@ -21966,7 +21998,7 @@ function ReferenceChip({
 }) {
   const metaLine = getReferenceMetaLine(reference);
   const isComposer = variant === "composer";
-  const Icon = reference.type === "quote" ? import_lucide_react41.Quote : reference.type === "image" ? import_lucide_react41.ImageIcon : import_lucide_react41.FileText;
+  const Icon = reference.type === "quote" ? import_lucide_react42.Quote : reference.type === "image" ? import_lucide_react42.ImageIcon : import_lucide_react42.FileText;
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     "div",
     {
@@ -22019,7 +22051,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.X, { size: 12 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.X, { size: 12 })
           }
         )
       ]
@@ -22040,7 +22072,7 @@ function WorkspaceFileChip({
       className: "flex min-w-0 items-start gap-2 rounded-md bg-muted px-2 py-1 text-foreground",
       title: label,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.FileText, { className: "mt-0.5 size-3.5 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.FileText, { className: "mt-0.5 size-3.5 shrink-0 text-muted-foreground" }),
         /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "truncate text-sm", children: label }),
           meta ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
@@ -22053,7 +22085,7 @@ function WorkspaceFileChip({
             className: "ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20",
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.X, { size: 12 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.X, { size: 12 })
           }
         )
       ]
@@ -23068,6 +23100,10 @@ function Chat({
   const isSubmissionBlocked = hasPendingInteractiveRequest || missingConfig || isHistoryUnavailable || hasUploadingFiles || isUploadingReferenceImages;
   const isSendDisabled = !trimmedDraft && !hasReferences || isSubmissionBlocked;
   const isPromptEditDisabled = hasPendingInteractiveRequest || missingConfig || isHistoryLoading;
+  const canUploadAttachments = composer?.attachments?.enabled === true && !isPromptEditDisabled;
+  const queueAttachmentFiles = React65.useCallback((files) => {
+    return attachmentsRef.current?.queueFiles(files) ?? false;
+  }, []);
   React65.useLayoutEffect(() => {
     composerPartsRef.current = composerParts;
     const caretOffset = pendingComposerCaretOffsetRef.current;
@@ -23950,9 +23986,18 @@ function Chat({
       if (!clipboardData) {
         return;
       }
-      const imageFiles = Array.from(clipboardData.items).filter(
-        (item) => item.kind === "file" && item.type.startsWith("image/")
-      ).map((item) => item.getAsFile()).filter((item) => Boolean(item));
+      const clipboardFiles = Array.from(clipboardData.files ?? []);
+      const pastedFiles = clipboardFiles.length ? clipboardFiles : Array.from(clipboardData.items ?? []).filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((item) => Boolean(item));
+      const attachmentFiles = pastedFiles.filter(
+        (file) => !file.type.startsWith("image/")
+      );
+      if (attachmentFiles.length > 0) {
+        event.preventDefault();
+        if (canUploadAttachments) queueAttachmentFiles(attachmentFiles);
+      }
+      const imageFiles = pastedFiles.filter(
+        (file) => file.type.startsWith("image/")
+      );
       if (imageFiles.length > 0) {
         event.preventDefault();
         const maxCount = composer?.attachments?.maxCount ?? 10;
@@ -24000,6 +24045,7 @@ function Chat({
         });
         return;
       }
+      if (attachmentFiles.length > 0) return;
       const pastedText = clipboardData.getData("text/plain");
       if (pastedText.trim().length <= LONG_TEXT_REFERENCE_THRESHOLD) {
         if (!pastedText) {
@@ -24035,9 +24081,11 @@ function Chat({
       composerInputRef.current?.focus();
     },
     [
+      canUploadAttachments,
       composer?.attachments?.maxCount,
       composer?.attachments?.maxSize,
       commitComposerParts,
+      queueAttachmentFiles,
       references,
       updateRuntimeCapabilityPalette,
       uploadContextFile
@@ -24194,10 +24242,6 @@ 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 canUploadDroppedFiles = composer?.attachments?.enabled === true && !missingConfig && !isHistoryLoading && !hasPendingInteractiveRequest;
-  const handleDroppedFiles = React65.useCallback((files) => {
-    return attachmentsRef.current?.queueFiles(files) ?? false;
-  }, []);
   const currentThread = React65.useMemo(
     () => threads.find((item) => item.id === stream.threadId),
     [threads, stream.threadId]
@@ -24332,11 +24376,11 @@ function Chat({
           {
             ref: viewportRef,
             "data-chatkit-root": "",
-            enabled: canUploadDroppedFiles,
+            enabled: canUploadAttachments,
             dropTitle: t("chat.dropFilesTitle"),
             dropHint: t("chat.dropFilesHint"),
             activeClassName: "ring-2 ring-primary/40 ring-inset",
-            onFiles: handleDroppedFiles,
+            onFiles: queueAttachmentFiles,
             className: cn(
               "relative flex h-full w-full min-w-0 flex-col flex-1 overflow-x-hidden overflow-y-auto bg-background shadow-sm transition-[box-shadow] duration-150",
               className
@@ -24404,7 +24448,7 @@ function Chat({
                               "transition-colors duration-150"
                             ),
                             "aria-label": t("chat.minimizeToPet"),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.Minus, { size: 16 })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.Minus, { size: 16 })
                           }
                         ) }) }),
                         /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TooltipContent, { side: "bottom", children: t("chat.minimizeToPet") })
@@ -24421,7 +24465,7 @@ function Chat({
                               "transition-colors duration-150"
                             ),
                             "aria-label": t("settings.open"),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.Settings, { size: 16 })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.Settings, { size: 16 })
                           }
                         ) }) }),
                         /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TooltipContent, { side: "bottom", children: t("settings.open") })
@@ -24441,7 +24485,7 @@ function Chat({
                                 "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
                               ),
                               "aria-label": t("history.newThread"),
-                              children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.Pencil, { size: 16 })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.Pencil, { size: 16 })
                             }
                           ) }) }),
                           /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TooltipContent, { side: "bottom", children: t("history.newThread") })
@@ -24639,7 +24683,7 @@ function Chat({
                                           {
                                             className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
                                             children: [
-                                              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.FileText, { size: 12 }),
+                                              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.FileText, { size: 12 }),
                                               /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName ?? file.id })
                                             ]
                                           },
@@ -24728,7 +24772,7 @@ function Chat({
                           "aria-label": t("composer.quoteSelection"),
                           title: t("composer.quoteSelection"),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.Quote, { size: 14 }),
+                            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.Quote, { size: 14 }),
                             t("composer.quoteSelection")
                           ]
                         }
@@ -24746,7 +24790,7 @@ function Chat({
                           "aria-label": t("composer.askInSideChat"),
                           title: t("composer.askInSideChat"),
                           children: [
-                            isOpeningSideChat ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.Loader2, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.MessageSquarePlus, { size: 14 }),
+                            isOpeningSideChat ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.Loader2, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.MessageSquarePlus, { size: 14 }),
                             t("composer.askInSideChat")
                           ]
                         }
@@ -24785,56 +24829,12 @@ function Chat({
                             onClick: () => scrollToBottom(true, true),
                             "aria-label": t("chat.scrollToBottom"),
                             title: t("chat.scrollToBottom"),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.ArrowDown, { size: 16 })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.ArrowDown, { size: 16 })
                           }
                         )
                       }
                     ),
                     threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime71.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_runtime71.jsx)(
-                      ChatAttachments,
-                      {
-                        ref: attachmentsRef,
-                        accept: acceptMimes,
-                        maxCount: composer?.attachments?.maxCount ?? 10,
-                        maxSize: composer?.attachments?.maxSize ?? 100 * 1024 * 1024,
-                        retryUploadLabel: t("chat.retryUpload"),
-                        uploadFile: uploadContextFile,
-                        deleteFile: deleteContextFile,
-                        getFileStatus: getContextFileStatus,
-                        onStateChange: setAttachmentState
-                      }
-                    ),
-                    references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-                      ReferenceChip,
-                      {
-                        reference,
-                        variant: "composer",
-                        onRemove: () => setReferences(
-                          (previous) => previous.filter(
-                            (item) => getReferenceKey(item) !== getReferenceKey(reference)
-                          )
-                        ),
-                        removeLabel: t("composer.removeReference")
-                      },
-                      getReferenceKey(reference)
-                    )) }),
-                    referencedWorkspaceFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: referencedWorkspaceFiles.map((file) => {
-                      const id = file.workspacePath ?? file.filePath ?? file.fileAssetId ?? file.fileId ?? file.id;
-                      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-                        WorkspaceFileChip,
-                        {
-                          file,
-                          onRemove: () => setReferencedWorkspaceFiles(
-                            (current) => current.filter(
-                              (item) => (item.workspacePath ?? item.filePath ?? item.fileAssetId ?? item.fileId ?? item.id) !== id
-                            )
-                          ),
-                          removeLabel: t("composer.fileMentions.remove")
-                        },
-                        id
-                      );
-                    }) }),
                     showGoalStatus && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
                       "div",
                       {
@@ -24844,7 +24844,7 @@ function Chat({
                         ),
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-                            import_lucide_react41.Target,
+                            import_lucide_react42.Target,
                             {
                               className: cn(
                                 "size-4 shrink-0 text-muted-foreground",
@@ -24856,7 +24856,7 @@ function Chat({
                             /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
                               /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "font-medium", children: t("chat.goal.label") }),
                               threadGoal && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: t(`chat.goal.status.${threadGoal.status}`) }),
-                              isGoalLoading && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.Loader2, { className: "size-3 animate-spin text-muted-foreground" })
+                              isGoalLoading && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.Loader2, { className: "size-3 animate-spin text-muted-foreground" })
                             ] }),
                             /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
                               "div",
@@ -24885,7 +24885,7 @@ function Chat({
                                     const prefix = "/goal edit ";
                                     setComposerText(`${prefix}${threadGoal.objective}`);
                                   },
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.Pencil, { className: "size-3" })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.Pencil, { className: "size-3" })
                                 }
                               ) }),
                               /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TooltipContent, { children: t("chat.goal.edit") })
@@ -24907,7 +24907,7 @@ function Chat({
                                       executionType: "insert_invocation"
                                     }
                                   }),
-                                  children: threadGoal.status === "paused" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.Play, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.Pause, { className: "size-3" })
+                                  children: threadGoal.status === "paused" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.Play, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.Pause, { className: "size-3" })
                                 }
                               ) }),
                               /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TooltipContent, { children: threadGoal.status === "paused" ? t("chat.goal.resume") : t("chat.goal.pause") })
@@ -24929,7 +24929,7 @@ function Chat({
                                       executionType: "insert_invocation"
                                     }
                                   }),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.Trash2, { className: "size-3" })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.Trash2, { className: "size-3" })
                                 }
                               ) }),
                               /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TooltipContent, { children: t("chat.goal.clear") })
@@ -24945,7 +24945,7 @@ function Chat({
                                   "aria-label": isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective"),
                                   onClick: () => setIsGoalObjectiveExpanded((expanded) => !expanded),
                                   children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-                                    import_lucide_react41.ChevronDown,
+                                    import_lucide_react42.ChevronDown,
                                     {
                                       className: cn(
                                         "size-3 transition-transform",
@@ -25023,6 +25023,50 @@ function Chat({
                         onBack: promptWorkflow.showPrompts
                       }
                     ),
+                    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                      ChatAttachments,
+                      {
+                        ref: attachmentsRef,
+                        accept: acceptMimes,
+                        maxCount: composer?.attachments?.maxCount ?? 10,
+                        maxSize: composer?.attachments?.maxSize ?? 100 * 1024 * 1024,
+                        retryUploadLabel: t("chat.retryUpload"),
+                        uploadFile: uploadContextFile,
+                        deleteFile: deleteContextFile,
+                        getFileStatus: getContextFileStatus,
+                        onStateChange: setAttachmentState
+                      }
+                    ),
+                    references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                      ReferenceChip,
+                      {
+                        reference,
+                        variant: "composer",
+                        onRemove: () => setReferences(
+                          (previous) => previous.filter(
+                            (item) => getReferenceKey(item) !== getReferenceKey(reference)
+                          )
+                        ),
+                        removeLabel: t("composer.removeReference")
+                      },
+                      getReferenceKey(reference)
+                    )) }),
+                    referencedWorkspaceFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: referencedWorkspaceFiles.map((file) => {
+                      const id = file.workspacePath ?? file.filePath ?? file.fileAssetId ?? file.fileId ?? file.id;
+                      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                        WorkspaceFileChip,
+                        {
+                          file,
+                          onRemove: () => setReferencedWorkspaceFiles(
+                            (current) => current.filter(
+                              (item) => (item.workspacePath ?? item.filePath ?? item.fileAssetId ?? item.fileId ?? item.id) !== id
+                            )
+                          ),
+                          removeLabel: t("composer.fileMentions.remove")
+                        },
+                        id
+                      );
+                    }) }),
                     workspaceFileMention && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
                       WorkspaceFileMentionPalette,
                       {
@@ -25206,7 +25250,7 @@ function Chat({
                                                     "focus-visible:pointer-events-auto focus-visible:ml-1 focus-visible:w-4 focus-visible:opacity-100",
                                                     "hover:bg-primary/10 hover:text-primary focus-visible:bg-primary/10 focus-visible:text-primary"
                                                   ),
-                                                  children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react41.X, { className: "size-3 shrink-0" })
+                                                  children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react42.X, { className: "size-3 shrink-0" })
                                                 }
                                               )
                                             ]