@xpert-ai/chatkit-ui 0.4.9 → 0.4.10

package/dist/index.cjs

@@ -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",
@@ -4760,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, {})
     ]
@@ -4798,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 });
 }
@@ -4818,6 +4827,7 @@ function SheetOverlay({
 }
 function SheetContent({
   side = "right",
+  showCloseButton = true,
   className,
   children,
   ...props
@@ -4842,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") })
           ] })
@@ -4881,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);
@@ -4918,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
+            );
+          }) }) }) })
+        ]
+      }
+    )
   ] });
 }
 
@@ -19773,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
                           }