@xpert-ai/chatkit-ui 0.4.8 → 0.4.10

package/dist/index.cjs

@@ -1775,7 +1775,7 @@ function collectLiveTaskSummary({
     (message) => extractPlan(message) ?? []
   );
   const agentRuns = messages.flatMap(
-    (message) => (message.agentRuns ?? []).map((run) => ({
+    (message) => (message.agentRuns ?? []).filter((run) => Boolean(run.parentId)).map((run) => ({
       id: run.id,
       parentId: run.parentId,
       level: agentRunLevel(run, messages),
@@ -1834,7 +1834,9 @@ function mergeTaskSummary(history, live, historySections) {
     ...live.sources
   ]);
   const agents = mergeAgents([
-    ...historySections?.agents ?? history?.agents.items ?? [],
+    ...(historySections?.agents ?? history?.agents.items ?? []).filter(
+      (agent) => Boolean(agent.parentId)
+    ),
     ...live.agents
   ]);
   const pending = mergePending([
@@ -2203,6 +2205,9 @@ var en_US_default = {
   history: {
     threadHistory: "Thread history",
     title: "Threads",
+    refresh: "Refresh threads",
+    updatedAt: "Updated {{time}}",
+    deleteThread: "Delete {{title}}",
     newThread: "New Thread",
     empty: "No threads yet",
     newThreadTitle: "New thread",
@@ -2644,6 +2649,9 @@ var zh_CN_default = {
   history: {
     threadHistory: "\u7EBF\u7A0B\u5386\u53F2",
     title: "\u7EBF\u7A0B",
+    refresh: "\u5237\u65B0\u7EBF\u7A0B",
+    updatedAt: "\u66F4\u65B0\u4E8E {{time}}",
+    deleteThread: "\u5220\u9664 {{title}}",
     newThread: "\u65B0\u7EBF\u7A0B",
     empty: "\u6682\u65E0\u7EBF\u7A0B",
     newThreadTitle: "\u65B0\u7EBF\u7A0B",
@@ -4758,10 +4766,10 @@ var ScrollArea = React11.forwardRef(({ className, children, ...props }, ref) =>
   ScrollAreaPrimitive.Root,
   {
     ref,
-    className: cn("relative overflow-hidden", className),
+    className: cn("relative min-w-0 overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full min-w-0 max-w-full rounded-[inherit] [&>div]:!block [&>div]:!w-full", children }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScrollBar, {}),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScrollAreaPrimitive.Corner, {})
     ]
@@ -4796,6 +4804,9 @@ function Sheet({ ...props }) {
 function SheetTrigger({ ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SheetPrimitive.Trigger, { ...props });
 }
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SheetPrimitive.Close, { ...props });
+}
 function SheetPortal({ ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SheetPrimitive.Portal, { ...props });
 }
@@ -4816,6 +4827,7 @@ function SheetOverlay({
 }
 function SheetContent({
   side = "right",
+  showCloseButton = true,
   className,
   children,
   ...props
@@ -4840,7 +4852,7 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.X, { size: 16 }),
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sr-only", children: t("sheet.close") })
           ] })
@@ -4879,17 +4891,51 @@ function SheetTitle({
 
 // src/components/history/HistorySidebar.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var formatThreadUpdatedAt = (value, formatters, now = /* @__PURE__ */ new Date()) => {
+  if (Number.isNaN(value.getTime())) return null;
+  const isSameYear = value.getFullYear() === now.getFullYear();
+  const isSameDay = isSameYear && value.getMonth() === now.getMonth() && value.getDate() === now.getDate();
+  return {
+    compact: isSameDay ? formatters.time.format(value) : isSameYear ? formatters.date.format(value) : formatters.dateWithYear.format(value),
+    full: formatters.full.format(value)
+  };
+};
 function HistorySidebar({
   threads = [],
   currentThreadId,
   onNewThread,
+  onRefresh,
   onSelectThread,
   onDeleteThread,
+  isRefreshing = false,
   showDelete = true,
   disabled = false
 }) {
-  const { t } = useChatkitTranslation();
+  const { t, i18n: i18n2 } = useChatkitTranslation();
   const [open, setOpen] = React13.useState(false);
+  const language = i18n2.resolvedLanguage ?? i18n2.language;
+  const threadTimeFormatters = React13.useMemo(
+    () => ({
+      time: new Intl.DateTimeFormat(language, {
+        hour: "2-digit",
+        minute: "2-digit"
+      }),
+      date: new Intl.DateTimeFormat(language, {
+        month: "numeric",
+        day: "numeric"
+      }),
+      dateWithYear: new Intl.DateTimeFormat(language, {
+        year: "numeric",
+        month: "numeric",
+        day: "numeric"
+      }),
+      full: new Intl.DateTimeFormat(language, {
+        dateStyle: "medium",
+        timeStyle: "short"
+      })
+    }),
+    [language]
+  );
   const handleNewThread = () => {
     onNewThread?.();
     setOpen(false);
@@ -4916,49 +4962,118 @@ function HistorySidebar({
       ) }) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipContent, { side: "bottom", children: t("history.threadHistory") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(SheetContent, { side: "right", className: "w-80 p-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SheetHeader, { className: "border-b p-4", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SheetTitle, { children: t("history.title") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-        Button,
-        {
-          onClick: handleNewThread,
-          className: "w-full justify-start gap-2",
-          variant: "secondary",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.PlusCircle, { size: 16 }),
-            t("history.newThread")
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ScrollArea, { className: "h-[calc(100vh-140px)]", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "px-4 pb-4", children: threads.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "py-8 text-center text-sm text-muted-foreground", children: t("history.empty") }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "space-y-1", children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-        "div",
-        {
-          className: cn(
-            "group flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors",
-            "hover:bg-muted cursor-pointer",
-            currentThreadId === thread.id && "bg-muted"
-          ),
-          onClick: () => handleSelectThread(thread.id),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.MessageSquare, { size: 16 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "flex-1 truncate", children: thread.title }),
-            showDelete && onDeleteThread && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              "button",
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      SheetContent,
+      {
+        side: "right",
+        className: "w-80 p-0",
+        showCloseButton: false,
+        "aria-describedby": void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(SheetHeader, { className: "grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center space-y-0 border-b px-3 py-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SheetTitle, { className: "col-start-2 text-center", children: t("history.title") }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "col-start-3 row-start-1 flex min-w-max items-center gap-1 justify-self-end", children: [
+              onRefresh && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Tooltip, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon-sm",
+                    onClick: () => void onRefresh(),
+                    disabled: disabled || isRefreshing,
+                    className: "cursor-pointer text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                    "aria-label": t("history.refresh"),
+                    "aria-busy": isRefreshing,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      import_lucide_react7.RefreshCw,
+                      {
+                        size: 16,
+                        className: cn(isRefreshing && "animate-spin")
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipContent, { side: "bottom", children: t("history.refresh") })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SheetClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  className: "cursor-pointer text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                  "aria-label": t("sheet.close"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.X, { size: 16 })
+                }
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            Button,
+            {
+              onClick: handleNewThread,
+              className: "w-full justify-start gap-2",
+              variant: "secondary",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.PlusCircle, { size: 16 }),
+                t("history.newThread")
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ScrollArea, { className: "h-[calc(100vh-140px)]", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "px-4 pb-4", children: threads.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "py-8 text-center text-sm text-muted-foreground", children: t("history.empty") }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: threads.map((thread) => {
+            const updatedAt = thread.lastMessageAt ? formatThreadUpdatedAt(
+              thread.lastMessageAt,
+              threadTimeFormatters
+            ) : null;
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              "div",
               {
-                type: "button",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onDeleteThread(thread.id);
-                },
-                className: "opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-destructive/10 hover:text-destructive transition-all",
-                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.Trash2, { size: 14 })
-              }
-            )
-          ]
-        },
-        thread.id
-      )) }) }) })
-    ] })
+                "data-active": currentThreadId === thread.id,
+                className: cn(
+                  "group flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors",
+                  "cursor-pointer hover:bg-accent hover:text-accent-foreground",
+                  "data-[active=true]:bg-accent data-[active=true]:text-accent-foreground"
+                ),
+                onClick: () => handleSelectThread(thread.id),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "shrink-0 text-muted-foreground transition-colors group-hover:text-accent-foreground group-data-[active=true]:text-accent-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.MessageSquare, { size: 16 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "min-w-0 flex-1 truncate", children: thread.title }),
+                  updatedAt && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    "time",
+                    {
+                      dateTime: thread.lastMessageAt?.toISOString(),
+                      title: updatedAt.full,
+                      "aria-label": t("history.updatedAt", {
+                        time: updatedAt.full
+                      }),
+                      className: "hidden shrink-0 whitespace-nowrap text-xs text-muted-foreground transition-colors group-hover:inline group-hover:text-accent-foreground group-focus-within:inline group-data-[active=true]:text-accent-foreground",
+                      children: updatedAt.compact
+                    }
+                  ),
+                  showDelete && onDeleteThread && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onDeleteThread(thread.id);
+                      },
+                      className: "shrink-0 rounded p-1 opacity-0 transition-all hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100 group-focus-within:opacity-100",
+                      "aria-label": t("history.deleteThread", {
+                        title: thread.title
+                      }),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.Trash2, { size: 14 })
+                    }
+                  )
+                ]
+              },
+              thread.id
+            );
+          }) }) }) })
+        ]
+      }
+    )
   ] });
 }
 
@@ -7595,6 +7710,59 @@ var UploadDroppedFiles = React23.forwardRef(function UploadDroppedFiles2({
   );
 });
 
+// src/components/chat/message-files.ts
+function addIdentity(identities, value) {
+  const identity = value?.trim();
+  if (identity) {
+    identities.add(identity);
+  }
+}
+function getAttachmentIdentities(file) {
+  const identities = /* @__PURE__ */ new Set();
+  addIdentity(identities, file.id);
+  addIdentity(identities, file.fileId);
+  addIdentity(identities, file.storageFileId);
+  addIdentity(identities, file.url);
+  addIdentity(identities, file.fileUrl);
+  addIdentity(identities, file.thumbUrl);
+  return identities;
+}
+function getImageReferenceIdentities(references) {
+  const identities = /* @__PURE__ */ new Set();
+  references.forEach((reference) => {
+    if (reference.type !== "image") {
+      return;
+    }
+    addIdentity(identities, reference.id);
+    addIdentity(identities, reference.fileId);
+    addIdentity(identities, reference.url);
+  });
+  return identities;
+}
+function getVisibleHumanAttachments(attachments, references) {
+  const imageReferenceIdentities = getImageReferenceIdentities(references);
+  const visibleAttachmentIdentities = /* @__PURE__ */ new Set();
+  return attachments.filter((attachment) => {
+    const identities = getAttachmentIdentities(attachment);
+    const isImageReference = [...identities].some(
+      (identity) => imageReferenceIdentities.has(identity)
+    );
+    if (isImageReference) {
+      return false;
+    }
+    const isDuplicate = [...identities].some(
+      (identity) => visibleAttachmentIdentities.has(identity)
+    );
+    if (isDuplicate) {
+      return false;
+    }
+    identities.forEach(
+      (identity) => visibleAttachmentIdentities.add(identity)
+    );
+    return true;
+  });
+}
+
 // src/components/chat/usePetAutoState.ts
 var React24 = __toESM(require("react"), 1);
 function usePetAutoState({
@@ -17406,8 +17574,6 @@ function TaskSummaryContent({
       SummarySection,
       {
         title: t("taskSummary.sections.outputs"),
-        actionLabel: t("taskSummary.addOutput"),
-        onAction: onFocusComposer,
         children: [
           summary.outputs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SummaryPrompt, { onClick: onFocusComposer, children: t("taskSummary.createOutput") }) : sectionItems("outputs", summary.outputs).map((item) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             SummaryButton,
@@ -17428,8 +17594,6 @@ function TaskSummaryContent({
       SummarySection,
       {
         title: t("taskSummary.sections.sources"),
-        actionLabel: t("taskSummary.addSource"),
-        onAction: onFocusComposer,
         children: [
           sectionItems("sources", summary.sources).map((item) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             SummaryButton,
@@ -17517,26 +17681,10 @@ function TaskSummaryContent({
 }
 function SummarySection({
   title,
-  actionLabel,
-  onAction,
   children
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("section", { "aria-label": title, className: "px-4 py-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex min-h-7 items-center justify-between gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h3", { className: "text-sm font-medium text-muted-foreground", children: title }),
-      onAction && actionLabel && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon-xs",
-          className: "size-7 rounded-lg bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground",
-          "aria-label": actionLabel,
-          onClick: onAction,
-          children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react30.Plus, { className: "size-4" })
-        }
-      )
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex min-h-7 items-center justify-between gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h3", { className: "text-sm font-medium text-muted-foreground", children: title }) }),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "mt-1 space-y-0.5", children })
   ] });
 }
@@ -19738,8 +19886,10 @@ function Chat({
                             threads,
                             currentThreadId: stream.threadId ?? void 0,
                             onNewThread: handleNewThread,
+                            onRefresh: refreshThreads,
                             onSelectThread: handleSelectThread,
                             onDeleteThread: handleDeleteThread,
+                            isRefreshing: isThreadsLoading,
                             showDelete: history?.showDelete !== false,
                             disabled: missingConfig || isThreadsLoading || isHistoryLoading
                           }
@@ -19816,10 +19966,13 @@ function Chat({
                         const hasPlainRenderableContent = messageContent.trim().length > 0;
                         const humanMessage = message;
                         const humanReferences = humanMessage.references ?? [];
-                        const humanAttachments = [
-                          ...humanMessage.fileAssets ?? [],
-                          ...humanMessage.attachments ?? []
-                        ];
+                        const humanAttachments = getVisibleHumanAttachments(
+                          [
+                            ...humanMessage.fileAssets ?? [],
+                            ...humanMessage.attachments ?? []
+                          ],
+                          humanReferences
+                        );
                         const humanRuntimeCapabilityOptions = message.type === "human" ? humanMessage.runtimeCapabilityOptions ?? getRuntimeCapabilityOptionsForSelection(
                           getRecommendedRuntimeCapabilitiesSelection(
                             humanMessage.runtimeCapabilities