@xpert-ai/chatkit-ui 0.4.9 → 0.4.10

package/dist/index.js

@@ -14,7 +14,7 @@ import {
   Settings as Settings2,
   Target as Target3,
   Trash2 as Trash23,
-  X as X7
+  X as X8
 } from "lucide-react";
 import { CHATKIT_TASK_SUMMARY_OPEN_RESOURCE_EFFECT } from "@xpert-ai/chatkit-types";
 
@@ -2205,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",
@@ -2646,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,7 +4764,14 @@ function SlashPalette({
 
 // src/components/history/HistorySidebar.tsx
 import * as React13 from "react";
-import { History, MessageSquare, PlusCircle, Trash2 } from "lucide-react";
+import {
+  History,
+  MessageSquare,
+  PlusCircle,
+  RefreshCw,
+  Trash2,
+  X as X3
+} from "lucide-react";
 
 // src/components/ui/scroll-area.tsx
 import * as React11 from "react";
@@ -4768,10 +4781,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__ */ jsx14(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx14(ScrollAreaPrimitive.Viewport, { className: "h-full w-full min-w-0 max-w-full rounded-[inherit] [&>div]:!block [&>div]:!w-full", children }),
       /* @__PURE__ */ jsx14(ScrollBar, {}),
       /* @__PURE__ */ jsx14(ScrollAreaPrimitive.Corner, {})
     ]
@@ -4806,6 +4819,9 @@ function Sheet({ ...props }) {
 function SheetTrigger({ ...props }) {
   return /* @__PURE__ */ jsx15(SheetPrimitive.Trigger, { ...props });
 }
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ jsx15(SheetPrimitive.Close, { ...props });
+}
 function SheetPortal({ ...props }) {
   return /* @__PURE__ */ jsx15(SheetPrimitive.Portal, { ...props });
 }
@@ -4826,6 +4842,7 @@ function SheetOverlay({
 }
 function SheetContent({
   side = "right",
+  showCloseButton = true,
   className,
   children,
   ...props
@@ -4850,7 +4867,7 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs8(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__ */ jsxs8(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__ */ jsx15(X2, { size: 16 }),
             /* @__PURE__ */ jsx15("span", { className: "sr-only", children: t("sheet.close") })
           ] })
@@ -4889,17 +4906,51 @@ function SheetTitle({
 
 // src/components/history/HistorySidebar.tsx
 import { jsx as jsx16, jsxs as jsxs9 } from "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);
@@ -4926,49 +4977,118 @@ function HistorySidebar({
       ) }) }) }),
       /* @__PURE__ */ jsx16(TooltipContent, { side: "bottom", children: t("history.threadHistory") })
     ] }),
-    /* @__PURE__ */ jsxs9(SheetContent, { side: "right", className: "w-80 p-0", children: [
-      /* @__PURE__ */ jsx16(SheetHeader, { className: "border-b p-4", children: /* @__PURE__ */ jsx16(SheetTitle, { children: t("history.title") }) }),
-      /* @__PURE__ */ jsx16("div", { className: "p-4", children: /* @__PURE__ */ jsxs9(
-        Button,
-        {
-          onClick: handleNewThread,
-          className: "w-full justify-start gap-2",
-          variant: "secondary",
-          children: [
-            /* @__PURE__ */ jsx16(PlusCircle, { size: 16 }),
-            t("history.newThread")
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx16(ScrollArea, { className: "h-[calc(100vh-140px)]", children: /* @__PURE__ */ jsx16("div", { className: "px-4 pb-4", children: threads.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "py-8 text-center text-sm text-muted-foreground", children: t("history.empty") }) : /* @__PURE__ */ jsx16("div", { className: "space-y-1", children: threads.map((thread) => /* @__PURE__ */ jsxs9(
-        "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__ */ jsx16("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx16(MessageSquare, { size: 16 }) }),
-            /* @__PURE__ */ jsx16("span", { className: "flex-1 truncate", children: thread.title }),
-            showDelete && onDeleteThread && /* @__PURE__ */ jsx16(
-              "button",
+    /* @__PURE__ */ jsxs9(
+      SheetContent,
+      {
+        side: "right",
+        className: "w-80 p-0",
+        showCloseButton: false,
+        "aria-describedby": void 0,
+        children: [
+          /* @__PURE__ */ jsxs9(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__ */ jsx16(SheetTitle, { className: "col-start-2 text-center", children: t("history.title") }),
+            /* @__PURE__ */ jsxs9("div", { className: "col-start-3 row-start-1 flex min-w-max items-center gap-1 justify-self-end", children: [
+              onRefresh && /* @__PURE__ */ jsxs9(Tooltip, { children: [
+                /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx16(
+                  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__ */ jsx16(
+                      RefreshCw,
+                      {
+                        size: 16,
+                        className: cn(isRefreshing && "animate-spin")
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ jsx16(TooltipContent, { side: "bottom", children: t("history.refresh") })
+              ] }),
+              /* @__PURE__ */ jsx16(SheetClose, { asChild: true, children: /* @__PURE__ */ jsx16(
+                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__ */ jsx16(X3, { size: 16 })
+                }
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx16("div", { className: "p-4", children: /* @__PURE__ */ jsxs9(
+            Button,
+            {
+              onClick: handleNewThread,
+              className: "w-full justify-start gap-2",
+              variant: "secondary",
+              children: [
+                /* @__PURE__ */ jsx16(PlusCircle, { size: 16 }),
+                t("history.newThread")
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx16(ScrollArea, { className: "h-[calc(100vh-140px)]", children: /* @__PURE__ */ jsx16("div", { className: "px-4 pb-4", children: threads.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "py-8 text-center text-sm text-muted-foreground", children: t("history.empty") }) : /* @__PURE__ */ jsx16("div", { children: threads.map((thread) => {
+            const updatedAt = thread.lastMessageAt ? formatThreadUpdatedAt(
+              thread.lastMessageAt,
+              threadTimeFormatters
+            ) : null;
+            return /* @__PURE__ */ jsxs9(
+              "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__ */ jsx16(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__ */ jsx16("span", { className: "shrink-0 text-muted-foreground transition-colors group-hover:text-accent-foreground group-data-[active=true]:text-accent-foreground", children: /* @__PURE__ */ jsx16(MessageSquare, { size: 16 }) }),
+                  /* @__PURE__ */ jsx16("span", { className: "min-w-0 flex-1 truncate", children: thread.title }),
+                  updatedAt && /* @__PURE__ */ jsx16(
+                    "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__ */ jsx16(
+                    "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__ */ jsx16(Trash2, { size: 14 })
+                    }
+                  )
+                ]
+              },
+              thread.id
+            );
+          }) }) }) })
+        ]
+      }
+    )
   ] });
 }
 
@@ -5513,7 +5633,7 @@ import {
   MessageSquare as MessageSquare2,
   Pencil as Pencil2,
   ShieldCheck,
-  X as X3
+  X as X4
 } from "lucide-react";
 
 // src/components/thread/json-tree-view.tsx
@@ -5708,7 +5828,7 @@ var decisionOrder = [
 var decisionMeta = {
   approve: { icon: Check, labelKey: "composer.hitl.approve" },
   edit: { icon: Pencil2, labelKey: "composer.hitl.edit" },
-  reject: { icon: X3, labelKey: "composer.hitl.reject" },
+  reject: { icon: X4, labelKey: "composer.hitl.reject" },
   respond: { icon: MessageSquare2, labelKey: "composer.hitl.respond" }
 };
 var emptyActions = [];
@@ -7084,7 +7204,7 @@ function useConversationSummaryEvent({
 
 // src/components/chat/attachments.tsx
 import * as React22 from "react";
-import { FileText as FileText2, Loader2 as Loader22, RefreshCw, X as X4 } from "lucide-react";
+import { FileText as FileText2, Loader2 as Loader22, RefreshCw as RefreshCw2, X as X5 } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var ACTIVE_PARSE_STATUSES = /* @__PURE__ */ new Set([
   "uploaded",
@@ -7426,7 +7546,7 @@ var ChatAttachments = React22.forwardRef(function ChatAttachments2({
                 onClick: () => retryUpload(item.localId),
                 className: "ml-1 rounded-full p-0.5 text-destructive hover:bg-destructive/20",
                 title: retryUploadLabel,
-                children: /* @__PURE__ */ jsx24(RefreshCw, { size: 12 })
+                children: /* @__PURE__ */ jsx24(RefreshCw2, { size: 12 })
               }
             ),
             /* @__PURE__ */ jsx24(
@@ -7438,7 +7558,7 @@ var ChatAttachments = React22.forwardRef(function ChatAttachments2({
                   "ml-1 rounded-full p-0.5",
                   item.status === "error" ? "text-destructive hover:bg-destructive/20" : "hover:bg-muted-foreground/20"
                 ),
-                children: /* @__PURE__ */ jsx24(X4, { size: 12 })
+                children: /* @__PURE__ */ jsx24(X5, { size: 12 })
               }
             )
           ]
@@ -9203,7 +9323,7 @@ import {
   ExpandIcon,
   Loader2 as Loader23,
   TriangleAlert,
-  X as X5
+  X as X6
 } from "lucide-react";
 import * as React30 from "react";
 
@@ -9491,7 +9611,7 @@ function MermaidPreviewDialog({
             type: "button",
             className: "inline-flex size-10 items-center justify-center rounded-full border border-border bg-card text-muted-foreground transition-colors hover:text-foreground",
             children: [
-              /* @__PURE__ */ jsx32(X5, { className: "size-4" }),
+              /* @__PURE__ */ jsx32(X6, { className: "size-4" }),
               /* @__PURE__ */ jsx32("span", { className: "sr-only", children: closeLabel })
             ]
           }
@@ -12351,7 +12471,7 @@ function RequestUserInputResultCard({
 }
 
 // src/components/thread/messages/widget.tsx
-import { useEffect as useEffect17, useMemo as useMemo11, useState as useState18 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo12, useState as useState18 } from "react";
 import {
   A2UIRenderer,
   SurfaceRenderer,
@@ -12395,7 +12515,7 @@ function FlatWidgetSurface({
 }) {
   const { processMessages } = useA2UI();
   const [renderError, setRenderError] = useState18(false);
-  const normalizedMessages = useMemo11(
+  const normalizedMessages = useMemo12(
     () => normalizeFlatWidgetMessages(messages, surfaceId),
     [messages, surfaceId]
   );
@@ -14378,7 +14498,7 @@ function MessageNavigator({
 
 // src/components/thread/MessageActions.tsx
 import * as React39 from "react";
-import { Check as Check5, Copy as Copy3, RefreshCw as RefreshCw2 } from "lucide-react";
+import { Check as Check5, Copy as Copy3, RefreshCw as RefreshCw3 } from "lucide-react";
 import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 function MessageActions({
   content,
@@ -14429,7 +14549,7 @@ function MessageActions({
             onClick: onRetry,
             className: "p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
             title: t("messageActions.regenerate"),
-            children: /* @__PURE__ */ jsx45(RefreshCw2, { size: 14 })
+            children: /* @__PURE__ */ jsx45(RefreshCw3, { size: 14 })
           }
         )
       ]
@@ -16419,7 +16539,7 @@ function findDomPointForComposerOffset(root, offset) {
 
 // src/components/chat/runtime-capabilities.tsx
 import * as React51 from "react";
-import { X as X6 } from "lucide-react";
+import { X as X7 } from "lucide-react";
 import { jsx as jsx56, jsxs as jsxs38 } from "react/jsx-runtime";
 function createComposerCapabilityInsertionParts(options) {
   return options.flatMap((option) => [
@@ -17025,7 +17145,7 @@ function DetachedRunRuntimeCapabilities({
                 className: "rounded-full p-0.5 hover:bg-primary/15",
                 title: removeLabel,
                 "aria-label": removeLabel,
-                children: /* @__PURE__ */ jsx56(X6, { size: 11 })
+                children: /* @__PURE__ */ jsx56(X7, { size: 11 })
               }
             )
           ]
@@ -17914,7 +18034,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ jsx58(X7, { size: 12 })
+            children: /* @__PURE__ */ jsx58(X8, { size: 12 })
           }
         )
       ]
@@ -19902,8 +20022,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
                           }
@@ -20490,7 +20612,7 @@ function Chat({
                                         type: "button",
                                         onClick: () => setSelectedTool(null),
                                         className: "shrink-0 rounded-full p-0.5 text-primary/70 hover:bg-primary/10 hover:text-primary",
-                                        children: /* @__PURE__ */ jsx58(X7, { size: 12 })
+                                        children: /* @__PURE__ */ jsx58(X8, { size: 12 })
                                       }
                                     )
                                   ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpert-ai/chatkit-ui",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "ChatKit UI.",
   "type": "module",
   "sideEffects": false,
@@ -60,8 +60,8 @@
     "uuid": "^11.1.0",
     "zod": "^4.1.12",
     "@xpert-ai/a2ui-react": "~0.1.0",
-    "@xpert-ai/chatkit-web-shared": "~0.4.1",
-    "@xpert-ai/chatkit-types": "~0.4.6"
+    "@xpert-ai/chatkit-types": "~0.4.6",
+    "@xpert-ai/chatkit-web-shared": "~0.4.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/dist/app/assets/channel-DqqmKvlV.js

@@ -1 +0,0 @@
-import{aq as o,ar as n}from"./index-tsW7eKsE.js";const t=(r,a)=>o.lang.round(n.parse(r)[a]);export{t as c};

package/dist/app/assets/classDiagram-6PBFFD2Q-DDmxiqHK.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-B9VoBVJp.js";import{_ as i}from"./index-tsW7eKsE.js";import"./chunk-FMBD7UC4-DDGTq6jI.js";import"./chunk-YZCP3GAM-CDlHGJHz.js";import"./chunk-55IACEB6-N4Q-mlk6.js";import"./chunk-EDXVE4YY-D-MWM76q.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/app/assets/classDiagram-v2-HSJHXN6E-DDmxiqHK.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-B9VoBVJp.js";import{_ as i}from"./index-tsW7eKsE.js";import"./chunk-FMBD7UC4-DDGTq6jI.js";import"./chunk-YZCP3GAM-CDlHGJHz.js";import"./chunk-55IACEB6-N4Q-mlk6.js";import"./chunk-EDXVE4YY-D-MWM76q.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/app/assets/clone-DzAFCb4d.js

@@ -1 +0,0 @@
-import{b as r}from"./graph-Cf1KoQrp.js";var e=4;function a(o){return r(o,e)}export{a as c};