@copilotz/chat-ui 0.8.4 → 0.8.6

package/dist/index.cjs

@@ -118,6 +118,15 @@ var defaultChatConfig = {
     renameThread: "Rename",
     archiveThread: "Archive",
     unarchiveThread: "Unarchive",
+    manageTags: "Manage tags",
+    tags: "Tags",
+    addTag: "Add tag",
+    removeTag: "Remove tag",
+    tagNamePlaceholder: "Tag name",
+    untagged: "Untagged",
+    groupBy: "Group by",
+    groupByDate: "Date",
+    groupByTag: "Tag",
     today: "Today",
     yesterday: "Yesterday",
     createNewThread: "Create New Conversation",
@@ -151,6 +160,13 @@ var defaultChatConfig = {
     enableRegeneration: true,
     showActivity: true,
     showActivityDetails: true,
+    threadTags: {
+      enabled: false,
+      groupingEnabled: true,
+      defaultGroupBy: "date",
+      allowCreate: true,
+      allowDrag: true
+    },
     maxAttachments: 4,
     maxFileSize: 10 * 1024 * 1024
     // 10MB
@@ -183,7 +199,8 @@ var defaultChatConfig = {
     createProvider: void 0
   },
   customComponent: {},
-  headerActions: null
+  headerActions: null,
+  headerMenuItems: []
 };
 function mergeConfig(_baseConfig, userConfig) {
   if (!userConfig) return defaultChatConfig;
@@ -217,7 +234,8 @@ function mergeConfig(_baseConfig, userConfig) {
       ...userConfig.agentSelector
     },
     customComponent: userConfig.customComponent || defaultChatConfig.customComponent,
-    headerActions: userConfig.headerActions || defaultChatConfig.headerActions
+    headerActions: userConfig.headerActions || defaultChatConfig.headerActions,
+    headerMenuItems: userConfig.headerMenuItems || defaultChatConfig.headerMenuItems
   };
 }
 
@@ -2442,6 +2460,37 @@ var ThreadInitialsIcon = ({ title }) => {
   const initials = title?.split(" ").map((n) => n[0]).slice(0, 2).join("").toUpperCase() || "?";
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex shrink-0 items-center justify-center rounded bg-muted text-[10px] font-medium", children: initials });
 };
+function slugTagName(name) {
+  const slug = name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 48);
+  return slug || "tag";
+}
+function createThreadTag(name) {
+  return {
+    id: `tag_${slugTagName(name)}`,
+    name: name.trim()
+  };
+}
+function mergeThreadTags(tags, tag) {
+  const nameKey = tag.name.trim().toLowerCase();
+  if (!nameKey) return tags;
+  if (tags.some(
+    (existing) => existing.id === tag.id || existing.name.trim().toLowerCase() === nameKey
+  )) {
+    return tags;
+  }
+  return [...tags, tag];
+}
+function collectThreadTags(threads) {
+  const tags = [];
+  for (const thread of threads) {
+    for (const tag of thread.tags ?? []) {
+      if (!tags.some((existing) => existing.id === tag.id)) {
+        tags.push(tag);
+      }
+    }
+  }
+  return tags.sort((a, b) => a.name.localeCompare(b.name));
+}
 var Sidebar2 = ({
   threads,
   currentThreadId,
@@ -2451,6 +2500,7 @@ var Sidebar2 = ({
   onRenameThread,
   onDeleteThread,
   onArchiveThread,
+  onUpdateThreadTags,
   // User menu props
   user,
   userMenuCallbacks,
@@ -2465,7 +2515,20 @@ var Sidebar2 = ({
   const [deleteThreadId, setDeleteThreadId] = (0, import_react4.useState)(null);
   const [editingThreadId, setEditingThreadId] = (0, import_react4.useState)(null);
   const [editTitle, setEditTitle] = (0, import_react4.useState)("");
+  const [tagDialogThreadId, setTagDialogThreadId] = (0, import_react4.useState)(
+    null
+  );
+  const [newTagName, setNewTagName] = (0, import_react4.useState)("");
+  const [draggingThreadId, setDraggingThreadId] = (0, import_react4.useState)(null);
+  const [dragOverTagId, setDragOverTagId] = (0, import_react4.useState)(null);
   const inputRef = (0, import_react4.useRef)(null);
+  const threadTagsConfig = config.features?.threadTags;
+  const tagsEnabled = !!threadTagsConfig?.enabled;
+  const canUpdateTags = tagsEnabled && !!onUpdateThreadTags;
+  const canDragTags = canUpdateTags && threadTagsConfig?.allowDrag !== false;
+  const [groupBy, setGroupBy] = (0, import_react4.useState)(
+    threadTagsConfig?.defaultGroupBy === "tag" ? "tag" : "date"
+  );
   const { setOpen } = useSidebar();
   (0, import_react4.useEffect)(() => {
     if (editingThreadId && inputRef.current) {
@@ -2475,38 +2538,98 @@ var Sidebar2 = ({
   }, [editingThreadId]);
   const filteredThreads = threads.filter((thread) => {
     const title = (thread.title ?? "").toString();
-    const matchesSearch = title.toLowerCase().includes(
-      searchQuery.toLowerCase()
-    );
+    const matchesSearch = title.toLowerCase().includes(searchQuery.toLowerCase());
     const matchesArchiveFilter = showArchived || !thread.isArchived;
     return matchesSearch && matchesArchiveFilter;
   });
-  const groupedThreads = filteredThreads.reduce((groups, thread) => {
-    const date = new Date(thread.updatedAt);
-    const today = /* @__PURE__ */ new Date();
-    const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1e3);
-    let groupKey;
-    if (date.toDateString() === today.toDateString()) {
-      groupKey = config.labels?.today || "Today";
-    } else if (date.toDateString() === yesterday.toDateString()) {
-      groupKey = config.labels?.yesterday || "Yesterday";
-    } else {
-      groupKey = date.toLocaleDateString("en-US", {
-        weekday: "long",
-        day: "2-digit",
-        month: "long"
-      });
-    }
-    if (!groups[groupKey]) {
-      groups[groupKey] = [];
+  const allTags = (0, import_react4.useMemo)(() => collectThreadTags(threads), [threads]);
+  const threadGroups = (0, import_react4.useMemo)(() => {
+    if (tagsEnabled && groupBy === "tag") {
+      const groups2 = allTags.map((tag) => ({
+        key: tag.id,
+        label: tag.name,
+        tag,
+        threads: filteredThreads.filter(
+          (thread) => (thread.tags ?? []).some((threadTag) => threadTag.id === tag.id)
+        )
+      })).filter((group) => group.threads.length > 0);
+      const untagged = filteredThreads.filter(
+        (thread) => (thread.tags ?? []).length === 0
+      );
+      if (untagged.length > 0) {
+        groups2.push({
+          key: "untagged",
+          label: config.labels?.untagged || "Untagged",
+          threads: untagged
+        });
+      }
+      return groups2;
+    }
+    const groups = [];
+    const groupMap = /* @__PURE__ */ new Map();
+    for (const thread of filteredThreads) {
+      const date = new Date(thread.updatedAt);
+      const today = /* @__PURE__ */ new Date();
+      const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1e3);
+      let groupKey;
+      if (date.toDateString() === today.toDateString()) {
+        groupKey = config.labels?.today || "Today";
+      } else if (date.toDateString() === yesterday.toDateString()) {
+        groupKey = config.labels?.yesterday || "Yesterday";
+      } else {
+        groupKey = date.toLocaleDateString("en-US", {
+          weekday: "long",
+          day: "2-digit",
+          month: "long"
+        });
+      }
+      const existing = groupMap.get(groupKey);
+      if (existing) {
+        existing.threads.push(thread);
+      } else {
+        const group = { key: groupKey, label: groupKey, threads: [thread] };
+        groupMap.set(groupKey, group);
+        groups.push(group);
+      }
     }
-    groups[groupKey].push(thread);
     return groups;
-  }, {});
+  }, [
+    allTags,
+    config.labels?.today,
+    config.labels?.untagged,
+    config.labels?.yesterday,
+    filteredThreads,
+    groupBy,
+    tagsEnabled
+  ]);
+  const tagDialogThread = tagDialogThreadId ? threads.find((thread) => thread.id === tagDialogThreadId) ?? null : null;
   const handleDeleteThread = (threadId) => {
     onDeleteThread?.(threadId);
     setDeleteThreadId(null);
   };
+  const updateThreadTags = (thread, tags) => {
+    onUpdateThreadTags?.(thread.id, tags);
+  };
+  const addTagToThread = (thread, tag) => {
+    updateThreadTags(thread, mergeThreadTags(thread.tags ?? [], tag));
+  };
+  const removeTagFromThread = (thread, tagId) => {
+    updateThreadTags(
+      thread,
+      (thread.tags ?? []).filter((tag) => tag.id !== tagId)
+    );
+  };
+  const handleCreateTag = () => {
+    if (!tagDialogThread || !newTagName.trim()) return;
+    addTagToThread(tagDialogThread, createThreadTag(newTagName));
+    setNewTagName("");
+  };
+  const handleDropOnTag = (tag) => {
+    const thread = draggingThreadId ? threads.find((candidate) => candidate.id === draggingThreadId) : null;
+    if (thread) addTagToThread(thread, tag);
+    setDraggingThreadId(null);
+    setDragOverTagId(null);
+  };
   const startEditing = (thread) => {
     setEditingThreadId(thread.id);
     setEditTitle(thread.title || "");
@@ -2594,92 +2717,175 @@ var Sidebar2 = ({
           ]
         }
       ) }),
-      Object.keys(groupedThreads).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "px-4 py-8 text-center text-muted-foreground group-data-[collapsible=icon]:hidden", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mx-auto h-8 w-8 mb-2 flex items-center justify-center rounded-full bg-muted/50", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Plus, { className: "h-4 w-4 opacity-50" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-xs", children: searchQuery ? config.labels?.noThreadsFound || "No conversations found" : config.labels?.noThreadsYet || "No conversations yet" })
-      ] }) : Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SidebarGroup, { className: "mt-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarGroupLabel, { className: "group-data-[collapsible=icon]:hidden", children: group }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarGroupContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarMenu, { children: groupThreads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SidebarMenuItem, { children: [
-          editingThreadId === thread.id ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center gap-1 px-2 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            Input,
+      tagsEnabled && threadTagsConfig?.groupingEnabled !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-4 py-2 group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between rounded-md border border-sidebar-border bg-sidebar-accent/40 p-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "px-2 text-[11px] text-muted-foreground", children: config.labels?.groupBy || "Group by" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Button,
             {
-              ref: inputRef,
-              value: editTitle,
-              onChange: (e) => setEditTitle(e.target.value),
-              onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                  saveEdit();
-                }
-                if (e.key === "Escape") {
-                  cancelEdit();
-                }
-              },
-              onBlur: saveEdit,
-              className: "h-7 text-sm"
+              variant: groupBy === "date" ? "secondary" : "ghost",
+              size: "sm",
+              onClick: () => setGroupBy("date"),
+              className: "h-6 px-2 text-xs",
+              children: config.labels?.groupByDate || "Date"
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-            SidebarMenuButton,
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Button,
             {
-              isActive: currentThreadId === thread.id,
-              onClick: () => onSelectThread?.(thread.id),
-              tooltip: thread.title,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ThreadInitialsIcon, { title: thread.title || "?" }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col items-start gap-0.5 flex-1 min-w-0 group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate w-full", children: thread.title || "New Chat" }) }),
-                thread.isArchived && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Archive, { className: "ml-auto h-3 w-3 opacity-50 group-data-[collapsible=icon]:hidden" })
-              ]
+              variant: groupBy === "tag" ? "secondary" : "ghost",
+              size: "sm",
+              onClick: () => setGroupBy("tag"),
+              className: "h-6 px-2 text-xs",
+              children: config.labels?.groupByTag || "Tag"
             }
-          ),
-          !editingThreadId && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenu, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SidebarMenuAction, { showOnHover: true, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.MoreHorizontal, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sr-only", children: "More" })
-            ] }) }),
+          )
+        ] })
+      ] }) }),
+      threadGroups.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "px-4 py-8 text-center text-muted-foreground group-data-[collapsible=icon]:hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mx-auto h-8 w-8 mb-2 flex items-center justify-center rounded-full bg-muted/50", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Plus, { className: "h-4 w-4 opacity-50" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-xs", children: searchQuery ? config.labels?.noThreadsFound || "No conversations found" : config.labels?.noThreadsYet || "No conversations yet" })
+      ] }) : threadGroups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        SidebarGroup,
+        {
+          className: "mt-2",
+          onDragOver: (event) => {
+            if (!canDragTags || !group.tag) return;
+            event.preventDefault();
+            setDragOverTagId(group.tag.id);
+          },
+          onDragLeave: () => {
+            if (dragOverTagId === group.tag?.id) setDragOverTagId(null);
+          },
+          onDrop: (event) => {
+            if (!canDragTags || !group.tag) return;
+            event.preventDefault();
+            handleDropOnTag(group.tag);
+          },
+          children: [
             /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-              DropdownMenuContent,
+              SidebarGroupLabel,
               {
-                className: "w-48",
-                side: "right",
-                align: "start",
+                className: `group-data-[collapsible=icon]:hidden ${dragOverTagId === group.tag?.id ? "rounded-md bg-sidebar-accent text-sidebar-accent-foreground" : ""}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                    DropdownMenuItem,
-                    {
-                      onClick: () => startEditing(thread),
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Edit2, { className: "mr-2 h-4 w-4" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: config.labels?.renameThread || "Rename" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                    DropdownMenuItem,
-                    {
-                      onClick: () => onArchiveThread?.(thread.id),
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Archive, { className: "mr-2 h-4 w-4" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: thread.isArchived ? config.labels?.unarchiveThread || "Unarchive" : config.labels?.archiveThread || "Archive" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuSeparator, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                    DropdownMenuItem,
-                    {
-                      onClick: () => setDeleteThreadId(thread.id),
-                      className: "text-destructive focus:text-destructive",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Trash2, { className: "mr-2 h-4 w-4" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: config.labels?.deleteThread || "Delete" })
-                      ]
-                    }
-                  )
+                  group.tag && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Tag, { className: "mr-1 h-3 w-3" }),
+                  group.label
                 ]
               }
-            )
-          ] })
-        ] }, thread.id)) }) })
-      ] }, group))
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarGroupContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarMenu, { children: group.threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SidebarMenuItem, { children: [
+              editingThreadId === thread.id ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center gap-1 px-2 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                Input,
+                {
+                  ref: inputRef,
+                  value: editTitle,
+                  onChange: (e) => setEditTitle(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                      saveEdit();
+                    }
+                    if (e.key === "Escape") {
+                      cancelEdit();
+                    }
+                  },
+                  onBlur: saveEdit,
+                  className: "h-7 text-sm"
+                }
+              ) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                SidebarMenuButton,
+                {
+                  isActive: currentThreadId === thread.id,
+                  onClick: () => onSelectThread?.(thread.id),
+                  tooltip: thread.title,
+                  draggable: canDragTags,
+                  onDragStart: () => setDraggingThreadId(thread.id),
+                  onDragEnd: () => {
+                    setDraggingThreadId(null);
+                    setDragOverTagId(null);
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ThreadInitialsIcon, { title: thread.title || "?" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-start gap-0.5 flex-1 min-w-0 group-data-[collapsible=icon]:hidden", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate w-full", children: thread.title || "New Chat" }),
+                      tagsEnabled && (thread.tags ?? []).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "flex max-w-full flex-wrap gap-1", children: (thread.tags ?? []).slice(0, 2).map((tag) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                        "span",
+                        {
+                          className: "max-w-20 truncate rounded bg-sidebar-accent px-1.5 py-0.5 text-[10px] text-muted-foreground",
+                          children: tag.name
+                        },
+                        tag.id
+                      )) })
+                    ] }),
+                    thread.isArchived && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Archive, { className: "ml-auto h-3 w-3 opacity-50 group-data-[collapsible=icon]:hidden" })
+                  ]
+                }
+              ),
+              !editingThreadId && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenu, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SidebarMenuAction, { showOnHover: true, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.MoreHorizontal, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sr-only", children: "More" })
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                  DropdownMenuContent,
+                  {
+                    className: "w-48",
+                    side: "right",
+                    align: "start",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => startEditing(thread),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Edit2, { className: "mr-2 h-4 w-4" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: config.labels?.renameThread || "Rename" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => onArchiveThread?.(thread.id),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Archive, { className: "mr-2 h-4 w-4" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: thread.isArchived ? config.labels?.unarchiveThread || "Unarchive" : config.labels?.archiveThread || "Archive" })
+                          ]
+                        }
+                      ),
+                      canUpdateTags && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => {
+                            setTagDialogThreadId(thread.id);
+                            setNewTagName("");
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Tag, { className: "mr-2 h-4 w-4" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: config.labels?.manageTags || "Manage tags" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuSeparator, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => setDeleteThreadId(thread.id),
+                          className: "text-destructive focus:text-destructive",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Trash2, { className: "mr-2 h-4 w-4" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: config.labels?.deleteThread || "Delete" })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ] }, thread.id)) }) })
+          ]
+        },
+        group.key
+      ))
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       UserMenu,
@@ -2694,6 +2900,94 @@ var Sidebar2 = ({
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarRail, {}),
+    tagDialogThread && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Dialog,
+      {
+        open: !!tagDialogThread,
+        onOpenChange: (open) => {
+          if (!open) {
+            setTagDialogThreadId(null);
+            setNewTagName("");
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DialogContent, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DialogHeader, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DialogTitle, { children: config.labels?.manageTags || "Manage tags" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DialogDescription, { children: tagDialogThread.title || "New Chat" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm font-medium", children: config.labels?.tags || "Tags" }),
+              (tagDialogThread.tags ?? []).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-muted-foreground", children: config.labels?.untagged || "Untagged" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-wrap gap-2", children: (tagDialogThread.tags ?? []).map((tag) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                "span",
+                {
+                  className: "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-sm",
+                  children: [
+                    tag.name,
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "rounded hover:bg-background",
+                        onClick: () => removeTagFromThread(tagDialogThread, tag.id),
+                        "aria-label": config.labels?.removeTag || "Remove tag",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.X, { className: "h-3 w-3" })
+                      }
+                    )
+                  ]
+                },
+                tag.id
+              )) })
+            ] }),
+            allTags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm font-medium", children: config.labels?.addTag || "Add tag" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-wrap gap-2", children: allTags.map((tag) => {
+                const assigned = (tagDialogThread.tags ?? []).some(
+                  (threadTag) => threadTag.id === tag.id
+                );
+                return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  Button,
+                  {
+                    type: "button",
+                    variant: assigned ? "secondary" : "outline",
+                    size: "sm",
+                    disabled: assigned,
+                    onClick: () => addTagToThread(tagDialogThread, tag),
+                    children: tag.name
+                  },
+                  tag.id
+                );
+              }) })
+            ] }),
+            threadTagsConfig?.allowCreate !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                Input,
+                {
+                  value: newTagName,
+                  onChange: (event) => setNewTagName(event.target.value),
+                  placeholder: config.labels?.tagNamePlaceholder || "Tag name",
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      handleCreateTag();
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                Button,
+                {
+                  type: "button",
+                  onClick: handleCreateTag,
+                  disabled: !newTagName.trim(),
+                  children: config.labels?.addTag || "Add tag"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    ),
     deleteThreadId && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       AlertDialog,
       {
@@ -3154,6 +3448,20 @@ var ChatHeader = ({
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuSeparator, {})
               ] }),
+              config.headerMenuItems?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                DropdownMenuItem,
+                {
+                  onClick: item.onSelect,
+                  disabled: item.disabled,
+                  variant: item.variant,
+                  children: [
+                    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "h-4 w-4 mr-2 flex items-center justify-center", children: item.icon }) : null,
+                    item.label
+                  ]
+                },
+                item.id
+              )),
+              config.headerMenuItems && config.headerMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuSeparator, {}),
               onExportData && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuItem, { onClick: onExportData, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.Download, { className: "h-4 w-4 mr-2" }),
                 config.labels?.exportData || "Export Data"
@@ -5391,9 +5699,10 @@ var ChatUI = ({
   }, [attachments]);
   const [isCustomMounted, setIsCustomMounted] = (0, import_react10.useState)(false);
   const [isCustomVisible, setIsCustomVisible] = (0, import_react10.useState)(false);
-  const groupedMessages = (0, import_react10.useMemo)(() => groupMessagesForRender(messages), [
-    messages
-  ]);
+  const groupedMessages = (0, import_react10.useMemo)(
+    () => groupMessagesForRender(messages),
+    [messages]
+  );
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
     count: groupedMessages.length,
     getScrollElement: () => scrollAreaRef.current,
@@ -5519,7 +5828,8 @@ var ChatUI = ({
     });
   }, [groupedMessages, isLoadingOlderMessages, virtualizer]);
   const requestOlderMessages = (0, import_react10.useCallback)(() => {
-    if (!onLoadOlderMessages || !hasMoreMessagesBefore || isLoadingOlderMessages) return;
+    if (!onLoadOlderMessages || !hasMoreMessagesBefore || isLoadingOlderMessages)
+      return;
     const viewport = scrollAreaRef.current;
     prependSnapshotRef.current = viewport ? {
       scrollHeight: viewport.scrollHeight,
@@ -5551,55 +5861,68 @@ var ChatUI = ({
       return next;
     });
   }, [groupedMessages]);
-  const handleScroll = (0, import_react10.useCallback)((e) => {
-    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-    const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
-    const isNearTop = scrollTop < 120;
-    if (isNearTop && hasMoreMessagesBefore && !isLoadingOlderMessages) {
-      requestOlderMessages();
-    }
-    setState((prev) => {
-      if (prev.isAtBottom === isAtBottom) return prev;
-      return { ...prev, isAtBottom };
-    });
-  }, [hasMoreMessagesBefore, isLoadingOlderMessages, requestOlderMessages]);
-  const handleSendMessage = (0, import_react10.useCallback)((content, messageAttachments = []) => {
-    if (!content.trim() && messageAttachments.length === 0) return;
-    callbacks.onSendMessage?.(
-      content,
-      messageAttachments,
-      createStateCallback()
-    );
-    if (initialInputApplied.current && !initialInputConsumedRef.current) {
-      initialInputConsumedRef.current = true;
-      onInitialInputConsumed?.();
-    }
-    setInputValue("");
-    setAttachments([]);
-  }, [callbacks, createStateCallback, onInitialInputConsumed]);
-  const handleMessageAction = (0, import_react10.useCallback)((event) => {
-    const { action, messageId, content } = event;
-    switch (action) {
-      case "copy":
-        callbacks.onCopyMessage?.(
-          messageId,
-          content || "",
-          createStateCallback()
-        );
-        break;
-      case "edit":
-        if (content) {
-          callbacks.onEditMessage?.(messageId, content, createStateCallback());
-        }
-        break;
-      case "regenerate":
-        callbacks.onRegenerateMessage?.(messageId, createStateCallback());
-        break;
-      case "delete":
-        callbacks.onDeleteMessage?.(messageId, createStateCallback());
-        break;
-    }
-  }, [callbacks, createStateCallback]);
+  const handleScroll = (0, import_react10.useCallback)(
+    (e) => {
+      const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+      const isNearTop = scrollTop < 120;
+      if (isNearTop && hasMoreMessagesBefore && !isLoadingOlderMessages) {
+        requestOlderMessages();
+      }
+      setState((prev) => {
+        if (prev.isAtBottom === isAtBottom) return prev;
+        return { ...prev, isAtBottom };
+      });
+    },
+    [hasMoreMessagesBefore, isLoadingOlderMessages, requestOlderMessages]
+  );
+  const handleSendMessage = (0, import_react10.useCallback)(
+    (content, messageAttachments = []) => {
+      if (!content.trim() && messageAttachments.length === 0) return;
+      callbacks.onSendMessage?.(
+        content,
+        messageAttachments,
+        createStateCallback()
+      );
+      if (initialInputApplied.current && !initialInputConsumedRef.current) {
+        initialInputConsumedRef.current = true;
+        onInitialInputConsumed?.();
+      }
+      setInputValue("");
+      setAttachments([]);
+    },
+    [callbacks, createStateCallback, onInitialInputConsumed]
+  );
+  const handleMessageAction = (0, import_react10.useCallback)(
+    (event) => {
+      const { action, messageId, content } = event;
+      switch (action) {
+        case "copy":
+          callbacks.onCopyMessage?.(
+            messageId,
+            content || "",
+            createStateCallback()
+          );
+          break;
+        case "edit":
+          if (content) {
+            callbacks.onEditMessage?.(
+              messageId,
+              content,
+              createStateCallback()
+            );
+          }
+          break;
+        case "regenerate":
+          callbacks.onRegenerateMessage?.(messageId, createStateCallback());
+          break;
+        case "delete":
+          callbacks.onDeleteMessage?.(messageId, createStateCallback());
+          break;
+      }
+    },
+    [callbacks, createStateCallback]
+  );
   const handleToggleMessageExpansion = (0, import_react10.useCallback)((messageId) => {
     setExpandedMessageIds((prev) => {
       if (prev[messageId]) {
@@ -5613,51 +5936,79 @@ var ChatUI = ({
       };
     });
   }, []);
-  const handleCreateThread = (0, import_react10.useCallback)((title) => {
-    callbacks.onCreateThread?.(title, createStateCallback());
-  }, [callbacks, createStateCallback]);
-  const handleSelectThread = (0, import_react10.useCallback)((threadId) => {
-    callbacks.onSelectThread?.(threadId, createStateCallback());
-  }, [callbacks, createStateCallback]);
+  const handleCreateThread = (0, import_react10.useCallback)(
+    (title) => {
+      callbacks.onCreateThread?.(title, createStateCallback());
+    },
+    [callbacks, createStateCallback]
+  );
+  const handleSelectThread = (0, import_react10.useCallback)(
+    (threadId) => {
+      callbacks.onSelectThread?.(threadId, createStateCallback());
+    },
+    [callbacks, createStateCallback]
+  );
   const handleRenameThread = (0, import_react10.useCallback)(
     (threadId, newTitle) => {
       callbacks.onRenameThread?.(threadId, newTitle, createStateCallback());
     },
     [callbacks, createStateCallback]
   );
-  const handleDeleteThread = (0, import_react10.useCallback)((threadId) => {
-    callbacks.onDeleteThread?.(threadId, createStateCallback());
-  }, [callbacks, createStateCallback]);
-  const handleArchiveThread = (0, import_react10.useCallback)((threadId) => {
-    callbacks.onArchiveThread?.(threadId, createStateCallback());
-  }, [callbacks, createStateCallback]);
+  const handleDeleteThread = (0, import_react10.useCallback)(
+    (threadId) => {
+      callbacks.onDeleteThread?.(threadId, createStateCallback());
+    },
+    [callbacks, createStateCallback]
+  );
+  const handleArchiveThread = (0, import_react10.useCallback)(
+    (threadId) => {
+      callbacks.onArchiveThread?.(threadId, createStateCallback());
+    },
+    [callbacks, createStateCallback]
+  );
+  const handleUpdateThreadTags = (0, import_react10.useCallback)(
+    (threadId, tags) => {
+      callbacks.onUpdateThreadTags?.(
+        threadId,
+        tags ?? [],
+        createStateCallback()
+      );
+    },
+    [callbacks, createStateCallback]
+  );
   const closeSidebar = (0, import_react10.useCallback)(() => {
     setState((prev) => ({ ...prev, showSidebar: false }));
   }, []);
   const handleCustomComponentToggle = (0, import_react10.useCallback)(() => {
     setState((prev) => ({ ...prev, showSidebar: !prev.showSidebar }));
   }, []);
-  const sidebarUser = (0, import_react10.useMemo)(() => user ? {
-    id: user.id,
-    name: user.name,
-    email: user.email,
-    avatar: user.avatar
-  } : null, [user?.id, user?.name, user?.email, user?.avatar]);
+  const sidebarUser = (0, import_react10.useMemo)(
+    () => user ? {
+      id: user.id,
+      name: user.name,
+      email: user.email,
+      avatar: user.avatar
+    } : null,
+    [user?.id, user?.name, user?.email, user?.avatar]
+  );
   const handleViewProfile = (0, import_react10.useCallback)(() => {
     setIsUserProfileOpen(true);
     callbacks.onViewProfile?.();
   }, [callbacks.onViewProfile]);
-  const sidebarUserMenuCallbacks = (0, import_react10.useMemo)(() => ({
-    onViewProfile: handleViewProfile,
-    onOpenSettings: callbacks.onOpenSettings,
-    onThemeChange: callbacks.onThemeChange,
-    onLogout: callbacks.onLogout
-  }), [
-    handleViewProfile,
-    callbacks.onOpenSettings,
-    callbacks.onThemeChange,
-    callbacks.onLogout
-  ]);
+  const sidebarUserMenuCallbacks = (0, import_react10.useMemo)(
+    () => ({
+      onViewProfile: handleViewProfile,
+      onOpenSettings: callbacks.onOpenSettings,
+      onThemeChange: callbacks.onThemeChange,
+      onLogout: callbacks.onLogout
+    }),
+    [
+      handleViewProfile,
+      callbacks.onOpenSettings,
+      callbacks.onThemeChange,
+      callbacks.onLogout
+    ]
+  );
   const renderCustomComponent = (0, import_react10.useCallback)(() => {
     const component = config?.customComponent?.component;
     if (!component) return null;
@@ -5738,55 +6089,58 @@ var ChatUI = ({
     );
   }) });
   const isMultiAgentMode = config.agentSelector?.mode === "multi";
-  const messageProps = (0, import_react10.useMemo)(() => ({
-    userAvatar: user?.avatar,
-    userName: user?.name,
-    assistantAvatar: assistant?.avatar,
-    assistantName: assistant?.name,
-    showTimestamp: config.ui.showTimestamps,
-    showAvatar: config.ui.showAvatars,
-    enableCopy: config.features.enableMessageCopy,
-    enableEdit: config.features.enableMessageEditing,
-    enableRegenerate: config.features.enableRegeneration,
-    showActivity: config.features.showActivity,
-    showActivityDetails: config.features.showActivityDetails,
-    compactMode: config.ui.compactMode,
-    onAction: handleMessageAction,
-    labels: config.labels,
-    showMoreLabel: config.labels.showMoreMessage,
-    showLessLabel: config.labels.showLessMessage,
-    collapseLongMessages: config.ui.collapseLongMessages,
-    collapseLongMessagesForUserOnly: config.ui.collapseLongMessagesForUserOnly,
-    longMessagePreviewChars: config.ui.longMessagePreviewChars,
-    longMessageChunkChars: config.ui.longMessageChunkChars,
-    renderUserMarkdown: config.ui.renderUserMarkdown,
-    markdown: config.markdown,
-    onToggleExpanded: handleToggleMessageExpansion
-  }), [
-    user?.avatar,
-    user?.name,
-    assistant?.avatar,
-    assistant?.name,
-    config.ui.showTimestamps,
-    config.ui.showAvatars,
-    config.ui.compactMode,
-    config.features.enableMessageCopy,
-    config.features.enableMessageEditing,
-    config.features.enableRegeneration,
-    config.features.showActivity,
-    config.features.showActivityDetails,
-    config.labels,
-    config.labels.showMoreMessage,
-    config.labels.showLessMessage,
-    config.ui.collapseLongMessages,
-    config.ui.collapseLongMessagesForUserOnly,
-    config.ui.longMessagePreviewChars,
-    config.ui.longMessageChunkChars,
-    config.ui.renderUserMarkdown,
-    config.markdown,
-    handleMessageAction,
-    handleToggleMessageExpansion
-  ]);
+  const messageProps = (0, import_react10.useMemo)(
+    () => ({
+      userAvatar: user?.avatar,
+      userName: user?.name,
+      assistantAvatar: assistant?.avatar,
+      assistantName: assistant?.name,
+      showTimestamp: config.ui.showTimestamps,
+      showAvatar: config.ui.showAvatars,
+      enableCopy: config.features.enableMessageCopy,
+      enableEdit: config.features.enableMessageEditing,
+      enableRegenerate: config.features.enableRegeneration,
+      showActivity: config.features.showActivity,
+      showActivityDetails: config.features.showActivityDetails,
+      compactMode: config.ui.compactMode,
+      onAction: handleMessageAction,
+      labels: config.labels,
+      showMoreLabel: config.labels.showMoreMessage,
+      showLessLabel: config.labels.showLessMessage,
+      collapseLongMessages: config.ui.collapseLongMessages,
+      collapseLongMessagesForUserOnly: config.ui.collapseLongMessagesForUserOnly,
+      longMessagePreviewChars: config.ui.longMessagePreviewChars,
+      longMessageChunkChars: config.ui.longMessageChunkChars,
+      renderUserMarkdown: config.ui.renderUserMarkdown,
+      markdown: config.markdown,
+      onToggleExpanded: handleToggleMessageExpansion
+    }),
+    [
+      user?.avatar,
+      user?.name,
+      assistant?.avatar,
+      assistant?.name,
+      config.ui.showTimestamps,
+      config.ui.showAvatars,
+      config.ui.compactMode,
+      config.features.enableMessageCopy,
+      config.features.enableMessageEditing,
+      config.features.enableRegeneration,
+      config.features.showActivity,
+      config.features.showActivityDetails,
+      config.labels,
+      config.labels.showMoreMessage,
+      config.labels.showLessMessage,
+      config.ui.collapseLongMessages,
+      config.ui.collapseLongMessagesForUserOnly,
+      config.ui.longMessagePreviewChars,
+      config.ui.longMessageChunkChars,
+      config.ui.renderUserMarkdown,
+      config.markdown,
+      handleMessageAction,
+      handleToggleMessageExpansion
+    ]
+  );
   const shouldShowAgentSelector = Boolean(
     config.agentSelector?.enabled && agentOptions.length > 0 && (!config.agentSelector?.hideIfSingle || agentOptions.length > 1) && (isMultiAgentMode ? onParticipantsChange : onSelectAgent)
   );
@@ -5806,6 +6160,7 @@ var ChatUI = ({
             onRenameThread: handleRenameThread,
             onDeleteThread: handleDeleteThread,
             onArchiveThread: handleArchiveThread,
+            onUpdateThreadTags: handleUpdateThreadTags,
             user: sidebarUser,
             userMenuCallbacks: sidebarUserMenuCallbacks,
             currentTheme: config.ui.theme === "auto" ? "system" : config.ui.theme,
@@ -5819,9 +6174,7 @@ var ChatUI = ({
             ChatHeader,
             {
               config,
-              currentThreadTitle: threads.find(
-                (t) => t.id === state.selectedThreadId
-              )?.title,
+              currentThreadTitle: threads.find((t) => t.id === state.selectedThreadId)?.title,
               isMobile,
               onCustomComponentToggle: handleCustomComponentToggle,
               onNewThread: handleCreateThread,