@copilotz/chat-ui 0.8.5 → 0.8.6

package/dist/index.js

@@ -2,7 +2,7 @@
 import {
   useCallback as useCallback4,
   useEffect as useEffect10,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useRef as useRef6,
   useState as useState9
 } from "react";
@@ -79,6 +79,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",
@@ -112,6 +121,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
@@ -144,7 +160,8 @@ var defaultChatConfig = {
     createProvider: void 0
   },
   customComponent: {},
-  headerActions: null
+  headerActions: null,
+  headerMenuItems: []
 };
 function mergeConfig(_baseConfig, userConfig) {
   if (!userConfig) return defaultChatConfig;
@@ -178,7 +195,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
   };
 }
 
@@ -1328,7 +1346,7 @@ var Message = memo2(({
 }, arePropsEqual);
 
 // src/components/chat/Sidebar.tsx
-import { useEffect as useEffect7, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
 
 // src/components/ui/input.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -2214,10 +2232,12 @@ import {
   Bot,
   Edit2,
   Filter,
+  Tag,
   MoreHorizontal,
   Plus,
   Search,
-  Trash2
+  Trash2,
+  X as X2
 } from "lucide-react";
 
 // src/components/chat/UserMenu.tsx
@@ -2434,6 +2454,37 @@ var ThreadInitialsIcon = ({ title }) => {
   const initials = title?.split(" ").map((n) => n[0]).slice(0, 2).join("").toUpperCase() || "?";
   return /* @__PURE__ */ jsx18("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,
@@ -2443,6 +2494,7 @@ var Sidebar2 = ({
   onRenameThread,
   onDeleteThread,
   onArchiveThread,
+  onUpdateThreadTags,
   // User menu props
   user,
   userMenuCallbacks,
@@ -2457,7 +2509,20 @@ var Sidebar2 = ({
   const [deleteThreadId, setDeleteThreadId] = useState5(null);
   const [editingThreadId, setEditingThreadId] = useState5(null);
   const [editTitle, setEditTitle] = useState5("");
+  const [tagDialogThreadId, setTagDialogThreadId] = useState5(
+    null
+  );
+  const [newTagName, setNewTagName] = useState5("");
+  const [draggingThreadId, setDraggingThreadId] = useState5(null);
+  const [dragOverTagId, setDragOverTagId] = useState5(null);
   const inputRef = useRef4(null);
+  const threadTagsConfig = config.features?.threadTags;
+  const tagsEnabled = !!threadTagsConfig?.enabled;
+  const canUpdateTags = tagsEnabled && !!onUpdateThreadTags;
+  const canDragTags = canUpdateTags && threadTagsConfig?.allowDrag !== false;
+  const [groupBy, setGroupBy] = useState5(
+    threadTagsConfig?.defaultGroupBy === "tag" ? "tag" : "date"
+  );
   const { setOpen } = useSidebar();
   useEffect7(() => {
     if (editingThreadId && inputRef.current) {
@@ -2467,38 +2532,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 = useMemo3(() => collectThreadTags(threads), [threads]);
+  const threadGroups = useMemo3(() => {
+    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 || "");
@@ -2586,92 +2711,175 @@ var Sidebar2 = ({
           ]
         }
       ) }),
-      Object.keys(groupedThreads).length === 0 ? /* @__PURE__ */ jsxs11("div", { className: "px-4 py-8 text-center text-muted-foreground group-data-[collapsible=icon]:hidden", children: [
-        /* @__PURE__ */ jsx18("div", { className: "mx-auto h-8 w-8 mb-2 flex items-center justify-center rounded-full bg-muted/50", children: /* @__PURE__ */ jsx18(Plus, { className: "h-4 w-4 opacity-50" }) }),
-        /* @__PURE__ */ jsx18("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__ */ jsxs11(SidebarGroup, { className: "mt-2", children: [
-        /* @__PURE__ */ jsx18(SidebarGroupLabel, { className: "group-data-[collapsible=icon]:hidden", children: group }),
-        /* @__PURE__ */ jsx18(SidebarGroupContent, { children: /* @__PURE__ */ jsx18(SidebarMenu, { children: groupThreads.map((thread) => /* @__PURE__ */ jsxs11(SidebarMenuItem, { children: [
-          editingThreadId === thread.id ? /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-1 px-2 py-1", children: /* @__PURE__ */ jsx18(
-            Input,
+      tagsEnabled && threadTagsConfig?.groupingEnabled !== false && /* @__PURE__ */ jsx18("div", { className: "px-4 py-2 group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between rounded-md border border-sidebar-border bg-sidebar-accent/40 p-1", children: [
+        /* @__PURE__ */ jsx18("span", { className: "px-2 text-[11px] text-muted-foreground", children: config.labels?.groupBy || "Group by" }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx18(
+            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__ */ jsxs11(
-            SidebarMenuButton,
+          ),
+          /* @__PURE__ */ jsx18(
+            Button,
             {
-              isActive: currentThreadId === thread.id,
-              onClick: () => onSelectThread?.(thread.id),
-              tooltip: thread.title,
-              children: [
-                /* @__PURE__ */ jsx18(ThreadInitialsIcon, { title: thread.title || "?" }),
-                /* @__PURE__ */ jsx18("div", { className: "flex flex-col items-start gap-0.5 flex-1 min-w-0 group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ jsx18("span", { className: "truncate w-full", children: thread.title || "New Chat" }) }),
-                thread.isArchived && /* @__PURE__ */ jsx18(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__ */ jsxs11(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx18(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(SidebarMenuAction, { showOnHover: true, children: [
-              /* @__PURE__ */ jsx18(MoreHorizontal, {}),
-              /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "More" })
-            ] }) }),
+          )
+        ] })
+      ] }) }),
+      threadGroups.length === 0 ? /* @__PURE__ */ jsxs11("div", { className: "px-4 py-8 text-center text-muted-foreground group-data-[collapsible=icon]:hidden", children: [
+        /* @__PURE__ */ jsx18("div", { className: "mx-auto h-8 w-8 mb-2 flex items-center justify-center rounded-full bg-muted/50", children: /* @__PURE__ */ jsx18(Plus, { className: "h-4 w-4 opacity-50" }) }),
+        /* @__PURE__ */ jsx18("p", { className: "text-xs", children: searchQuery ? config.labels?.noThreadsFound || "No conversations found" : config.labels?.noThreadsYet || "No conversations yet" })
+      ] }) : threadGroups.map((group) => /* @__PURE__ */ jsxs11(
+        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__ */ jsxs11(
-              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__ */ jsxs11(
-                    DropdownMenuItem,
-                    {
-                      onClick: () => startEditing(thread),
-                      children: [
-                        /* @__PURE__ */ jsx18(Edit2, { className: "mr-2 h-4 w-4" }),
-                        /* @__PURE__ */ jsx18("span", { children: config.labels?.renameThread || "Rename" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs11(
-                    DropdownMenuItem,
-                    {
-                      onClick: () => onArchiveThread?.(thread.id),
-                      children: [
-                        /* @__PURE__ */ jsx18(Archive, { className: "mr-2 h-4 w-4" }),
-                        /* @__PURE__ */ jsx18("span", { children: thread.isArchived ? config.labels?.unarchiveThread || "Unarchive" : config.labels?.archiveThread || "Archive" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx18(DropdownMenuSeparator, {}),
-                  /* @__PURE__ */ jsxs11(
-                    DropdownMenuItem,
-                    {
-                      onClick: () => setDeleteThreadId(thread.id),
-                      className: "text-destructive focus:text-destructive",
-                      children: [
-                        /* @__PURE__ */ jsx18(Trash2, { className: "mr-2 h-4 w-4" }),
-                        /* @__PURE__ */ jsx18("span", { children: config.labels?.deleteThread || "Delete" })
-                      ]
-                    }
-                  )
+                  group.tag && /* @__PURE__ */ jsx18(Tag, { className: "mr-1 h-3 w-3" }),
+                  group.label
                 ]
               }
-            )
-          ] })
-        ] }, thread.id)) }) })
-      ] }, group))
+            ),
+            /* @__PURE__ */ jsx18(SidebarGroupContent, { children: /* @__PURE__ */ jsx18(SidebarMenu, { children: group.threads.map((thread) => /* @__PURE__ */ jsxs11(SidebarMenuItem, { children: [
+              editingThreadId === thread.id ? /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-1 px-2 py-1", children: /* @__PURE__ */ jsx18(
+                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__ */ jsxs11(
+                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__ */ jsx18(ThreadInitialsIcon, { title: thread.title || "?" }),
+                    /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-start gap-0.5 flex-1 min-w-0 group-data-[collapsible=icon]:hidden", children: [
+                      /* @__PURE__ */ jsx18("span", { className: "truncate w-full", children: thread.title || "New Chat" }),
+                      tagsEnabled && (thread.tags ?? []).length > 0 && /* @__PURE__ */ jsx18("span", { className: "flex max-w-full flex-wrap gap-1", children: (thread.tags ?? []).slice(0, 2).map((tag) => /* @__PURE__ */ jsx18(
+                        "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__ */ jsx18(Archive, { className: "ml-auto h-3 w-3 opacity-50 group-data-[collapsible=icon]:hidden" })
+                  ]
+                }
+              ),
+              !editingThreadId && /* @__PURE__ */ jsxs11(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx18(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(SidebarMenuAction, { showOnHover: true, children: [
+                  /* @__PURE__ */ jsx18(MoreHorizontal, {}),
+                  /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "More" })
+                ] }) }),
+                /* @__PURE__ */ jsxs11(
+                  DropdownMenuContent,
+                  {
+                    className: "w-48",
+                    side: "right",
+                    align: "start",
+                    children: [
+                      /* @__PURE__ */ jsxs11(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => startEditing(thread),
+                          children: [
+                            /* @__PURE__ */ jsx18(Edit2, { className: "mr-2 h-4 w-4" }),
+                            /* @__PURE__ */ jsx18("span", { children: config.labels?.renameThread || "Rename" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs11(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => onArchiveThread?.(thread.id),
+                          children: [
+                            /* @__PURE__ */ jsx18(Archive, { className: "mr-2 h-4 w-4" }),
+                            /* @__PURE__ */ jsx18("span", { children: thread.isArchived ? config.labels?.unarchiveThread || "Unarchive" : config.labels?.archiveThread || "Archive" })
+                          ]
+                        }
+                      ),
+                      canUpdateTags && /* @__PURE__ */ jsxs11(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => {
+                            setTagDialogThreadId(thread.id);
+                            setNewTagName("");
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx18(Tag, { className: "mr-2 h-4 w-4" }),
+                            /* @__PURE__ */ jsx18("span", { children: config.labels?.manageTags || "Manage tags" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx18(DropdownMenuSeparator, {}),
+                      /* @__PURE__ */ jsxs11(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => setDeleteThreadId(thread.id),
+                          className: "text-destructive focus:text-destructive",
+                          children: [
+                            /* @__PURE__ */ jsx18(Trash2, { className: "mr-2 h-4 w-4" }),
+                            /* @__PURE__ */ jsx18("span", { children: config.labels?.deleteThread || "Delete" })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ] }, thread.id)) }) })
+          ]
+        },
+        group.key
+      ))
     ] }),
     /* @__PURE__ */ jsx18(SidebarFooter, { children: /* @__PURE__ */ jsx18(
       UserMenu,
@@ -2686,6 +2894,94 @@ var Sidebar2 = ({
       }
     ) }),
     /* @__PURE__ */ jsx18(SidebarRail, {}),
+    tagDialogThread && /* @__PURE__ */ jsx18(
+      Dialog,
+      {
+        open: !!tagDialogThread,
+        onOpenChange: (open) => {
+          if (!open) {
+            setTagDialogThreadId(null);
+            setNewTagName("");
+          }
+        },
+        children: /* @__PURE__ */ jsxs11(DialogContent, { children: [
+          /* @__PURE__ */ jsxs11(DialogHeader, { children: [
+            /* @__PURE__ */ jsx18(DialogTitle, { children: config.labels?.manageTags || "Manage tags" }),
+            /* @__PURE__ */ jsx18(DialogDescription, { children: tagDialogThread.title || "New Chat" })
+          ] }),
+          /* @__PURE__ */ jsxs11("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx18("div", { className: "text-sm font-medium", children: config.labels?.tags || "Tags" }),
+              (tagDialogThread.tags ?? []).length === 0 ? /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: config.labels?.untagged || "Untagged" }) : /* @__PURE__ */ jsx18("div", { className: "flex flex-wrap gap-2", children: (tagDialogThread.tags ?? []).map((tag) => /* @__PURE__ */ jsxs11(
+                "span",
+                {
+                  className: "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-sm",
+                  children: [
+                    tag.name,
+                    /* @__PURE__ */ jsx18(
+                      "button",
+                      {
+                        type: "button",
+                        className: "rounded hover:bg-background",
+                        onClick: () => removeTagFromThread(tagDialogThread, tag.id),
+                        "aria-label": config.labels?.removeTag || "Remove tag",
+                        children: /* @__PURE__ */ jsx18(X2, { className: "h-3 w-3" })
+                      }
+                    )
+                  ]
+                },
+                tag.id
+              )) })
+            ] }),
+            allTags.length > 0 && /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx18("div", { className: "text-sm font-medium", children: config.labels?.addTag || "Add tag" }),
+              /* @__PURE__ */ jsx18("div", { className: "flex flex-wrap gap-2", children: allTags.map((tag) => {
+                const assigned = (tagDialogThread.tags ?? []).some(
+                  (threadTag) => threadTag.id === tag.id
+                );
+                return /* @__PURE__ */ jsx18(
+                  Button,
+                  {
+                    type: "button",
+                    variant: assigned ? "secondary" : "outline",
+                    size: "sm",
+                    disabled: assigned,
+                    onClick: () => addTagToThread(tagDialogThread, tag),
+                    children: tag.name
+                  },
+                  tag.id
+                );
+              }) })
+            ] }),
+            threadTagsConfig?.allowCreate !== false && /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx18(
+                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__ */ jsx18(
+                Button,
+                {
+                  type: "button",
+                  onClick: handleCreateTag,
+                  disabled: !newTagName.trim(),
+                  children: config.labels?.addTag || "Add tag"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    ),
     deleteThreadId && /* @__PURE__ */ jsx18(
       AlertDialog,
       {
@@ -2771,8 +3067,8 @@ import {
 } from "lucide-react";
 
 // src/components/chat/AgentSelectors.tsx
-import { memo as memo3, useMemo as useMemo3 } from "react";
-import { Check as Check3, ChevronDown as ChevronDown2, Users, AtSign, X as X2 } from "lucide-react";
+import { memo as memo3, useMemo as useMemo4 } from "react";
+import { Check as Check3, ChevronDown as ChevronDown2, Users, AtSign, X as X3 } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 var ParticipantsSelector = memo3(({
   agents,
@@ -2782,8 +3078,8 @@ var ParticipantsSelector = memo3(({
   maxVisible = 3,
   disabled = false
 }) => {
-  const agentsWithColors = useMemo3(() => assignAgentColors(agents), [agents]);
-  const selectedAgents = useMemo3(
+  const agentsWithColors = useMemo4(() => assignAgentColors(agents), [agents]);
+  const selectedAgents = useMemo4(
     () => agentsWithColors.filter((a) => participantIds.includes(a.id)),
     [agentsWithColors, participantIds]
   );
@@ -2880,8 +3176,8 @@ var TargetAgentSelector = memo3(({
   placeholder = "Select agent",
   disabled = false
 }) => {
-  const agentsWithColors = useMemo3(() => assignAgentColors(agents), [agents]);
-  const selectedAgent = useMemo3(
+  const agentsWithColors = useMemo4(() => assignAgentColors(agents), [agents]);
+  const selectedAgent = useMemo4(
     () => agentsWithColors.find((a) => a.id === targetAgentId),
     [agentsWithColors, targetAgentId]
   );
@@ -2988,7 +3284,7 @@ var AgentBadge = memo3(({
               e.stopPropagation();
               onRemove();
             },
-            children: /* @__PURE__ */ jsx20(X2, { className: "h-3 w-3" })
+            children: /* @__PURE__ */ jsx20(X3, { className: "h-3 w-3" })
           }
         )
       ]
@@ -3158,6 +3454,20 @@ var ChatHeader = ({
                 ] }),
                 /* @__PURE__ */ jsx21(DropdownMenuSeparator, {})
               ] }),
+              config.headerMenuItems?.map((item) => /* @__PURE__ */ jsxs13(
+                DropdownMenuItem,
+                {
+                  onClick: item.onSelect,
+                  disabled: item.disabled,
+                  variant: item.variant,
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsx21("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__ */ jsx21(DropdownMenuSeparator, {}),
               onExportData && /* @__PURE__ */ jsxs13(DropdownMenuItem, { onClick: onExportData, children: [
                 /* @__PURE__ */ jsx21(Download2, { className: "h-4 w-4 mr-2" }),
                 config.labels?.exportData || "Export Data"
@@ -3200,7 +3510,7 @@ var ChatHeader = ({
 import React13, { useState as useState7, useRef as useRef5, useCallback as useCallback3, useEffect as useEffect9, memo as memo4 } from "react";
 
 // src/components/chat/UserContext.tsx
-import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo4, useState as useState6 } from "react";
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo5, useState as useState6 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var Ctx = createContext2(void 0);
 var ChatUserContextProvider = ({ children, initial }) => {
@@ -3223,7 +3533,7 @@ var ChatUserContextProvider = ({ children, initial }) => {
       return { ...prev, ...partial, updatedAt: Date.now() };
     });
   }, []);
-  const value = useMemo4(() => ({
+  const value = useMemo5(() => ({
     context: ctx,
     setContext: setPartial,
     resetContext: () => setCtx({ updatedAt: Date.now() })
@@ -3590,7 +3900,7 @@ function Progress({
 }
 
 // src/components/chat/VoiceComposer.tsx
-import { Keyboard, Loader2, Mic, Send, Square, Trash2 as Trash23, X as X3 } from "lucide-react";
+import { Keyboard, Loader2, Mic, Send, Square, Trash2 as Trash23, X as X4 } from "lucide-react";
 import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var formatDuration = (durationMs) => {
   const totalSeconds = Math.max(0, Math.floor(durationMs / 1e3));
@@ -3776,7 +4086,7 @@ var VoiceComposer = ({
       isAutoSendActive && autoSendDelayMs > 0 && /* @__PURE__ */ jsx24("div", { className: "mt-3 flex justify-center", children: /* @__PURE__ */ jsx24("div", { className: "inline-flex items-center rounded-full border bg-background px-3 py-1 text-xs text-muted-foreground", children: interpolateSeconds(labels?.voiceAutoSendIn, countdownSeconds) }) }),
       /* @__PURE__ */ jsxs14("div", { className: "mt-4 grid grid-cols-1 gap-2 sm:flex sm:items-center sm:justify-end", children: [
         isAutoSendActive && /* @__PURE__ */ jsxs14(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancelAutoSend, disabled, className: "w-full sm:w-auto", children: [
-          /* @__PURE__ */ jsx24(X3, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx24(X4, { className: "h-4 w-4" }),
           labels?.voiceCancel || "Cancel"
         ] }),
         /* @__PURE__ */ jsxs14(Button, { type: "button", size: "sm", onClick: onSendNow, disabled, className: "w-full sm:w-auto", children: [
@@ -3797,7 +4107,7 @@ import {
   Image as Image2,
   Video,
   FileText as FileText2,
-  X as X4,
+  X as X5,
   Square as Square2,
   Play,
   Pause,
@@ -3881,7 +4191,7 @@ var FileUploadItem = memo4(function FileUploadItem2({ file, progress, onCancel }
         size: "icon",
         className: "h-6 w-6",
         onClick: onCancel,
-        children: /* @__PURE__ */ jsx25(X4, { className: "h-3 w-3" })
+        children: /* @__PURE__ */ jsx25(X5, { className: "h-3 w-3" })
       }
     )
   ] }) }) });
@@ -3938,7 +4248,7 @@ var AttachmentPreview = memo4(function AttachmentPreview2({ attachment, onRemove
           size: "icon",
           className: "h-6 w-6",
           onClick: onRemove,
-          children: /* @__PURE__ */ jsx25(X4, { className: "h-3 w-3" })
+          children: /* @__PURE__ */ jsx25(X5, { className: "h-3 w-3" })
         }
       ) })
     ] }),
@@ -3959,7 +4269,7 @@ var AttachmentPreview = memo4(function AttachmentPreview2({ attachment, onRemove
           size: "icon",
           className: "h-6 w-6",
           onClick: onRemove,
-          children: /* @__PURE__ */ jsx25(X4, { className: "h-3 w-3" })
+          children: /* @__PURE__ */ jsx25(X5, { className: "h-3 w-3" })
         }
       ) }),
       /* @__PURE__ */ jsx25(Badge, { className: "absolute bottom-1 right-1 text-xs", children: formatDuration2(attachment.durationMs) })
@@ -3997,7 +4307,7 @@ var AttachmentPreview = memo4(function AttachmentPreview2({ attachment, onRemove
           size: "icon",
           className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
           onClick: onRemove,
-          children: /* @__PURE__ */ jsx25(X4, { className: "h-3 w-3" })
+          children: /* @__PURE__ */ jsx25(X5, { className: "h-3 w-3" })
         }
       )
     ] }),
@@ -4014,7 +4324,7 @@ var AttachmentPreview = memo4(function AttachmentPreview2({ attachment, onRemove
           size: "icon",
           className: "h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100",
           onClick: onRemove,
-          children: /* @__PURE__ */ jsx25(X4, { className: "h-3 w-3" })
+          children: /* @__PURE__ */ jsx25(X5, { className: "h-3 w-3" })
         }
       )
     ] }),
@@ -4867,7 +5177,7 @@ import {
   Bot as Bot3,
   Pencil,
   Check as Check5,
-  X as X5
+  X as X6
 } from "lucide-react";
 import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var getInitials2 = (name, email) => {
@@ -5167,7 +5477,7 @@ var UserProfile = ({
                               className: "h-7 px-2",
                               onClick: handleCancelEdit,
                               children: [
-                                /* @__PURE__ */ jsx27(X5, { className: "h-3.5 w-3.5 mr-1" }),
+                                /* @__PURE__ */ jsx27(X6, { className: "h-3.5 w-3.5 mr-1" }),
                                 "Cancelar"
                               ]
                             }
@@ -5377,7 +5687,7 @@ var ChatUI = ({
   initialInput,
   onInitialInputConsumed
 }) => {
-  const config = useMemo5(
+  const config = useMemo6(
     () => mergeConfig(defaultChatConfig, userConfig),
     [userConfig]
   );
@@ -5440,9 +5750,10 @@ var ChatUI = ({
   }, [attachments]);
   const [isCustomMounted, setIsCustomMounted] = useState9(false);
   const [isCustomVisible, setIsCustomVisible] = useState9(false);
-  const groupedMessages = useMemo5(() => groupMessagesForRender(messages), [
-    messages
-  ]);
+  const groupedMessages = useMemo6(
+    () => groupMessagesForRender(messages),
+    [messages]
+  );
   const virtualizer = useVirtualizer({
     count: groupedMessages.length,
     getScrollElement: () => scrollAreaRef.current,
@@ -5568,7 +5879,8 @@ var ChatUI = ({
     });
   }, [groupedMessages, isLoadingOlderMessages, virtualizer]);
   const requestOlderMessages = useCallback4(() => {
-    if (!onLoadOlderMessages || !hasMoreMessagesBefore || isLoadingOlderMessages) return;
+    if (!onLoadOlderMessages || !hasMoreMessagesBefore || isLoadingOlderMessages)
+      return;
     const viewport = scrollAreaRef.current;
     prependSnapshotRef.current = viewport ? {
       scrollHeight: viewport.scrollHeight,
@@ -5600,55 +5912,68 @@ var ChatUI = ({
       return next;
     });
   }, [groupedMessages]);
-  const handleScroll = useCallback4((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 = useCallback4((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 = useCallback4((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 = useCallback4(
+    (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 = useCallback4(
+    (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 = useCallback4(
+    (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 = useCallback4((messageId) => {
     setExpandedMessageIds((prev) => {
       if (prev[messageId]) {
@@ -5662,51 +5987,79 @@ var ChatUI = ({
       };
     });
   }, []);
-  const handleCreateThread = useCallback4((title) => {
-    callbacks.onCreateThread?.(title, createStateCallback());
-  }, [callbacks, createStateCallback]);
-  const handleSelectThread = useCallback4((threadId) => {
-    callbacks.onSelectThread?.(threadId, createStateCallback());
-  }, [callbacks, createStateCallback]);
+  const handleCreateThread = useCallback4(
+    (title) => {
+      callbacks.onCreateThread?.(title, createStateCallback());
+    },
+    [callbacks, createStateCallback]
+  );
+  const handleSelectThread = useCallback4(
+    (threadId) => {
+      callbacks.onSelectThread?.(threadId, createStateCallback());
+    },
+    [callbacks, createStateCallback]
+  );
   const handleRenameThread = useCallback4(
     (threadId, newTitle) => {
       callbacks.onRenameThread?.(threadId, newTitle, createStateCallback());
     },
     [callbacks, createStateCallback]
   );
-  const handleDeleteThread = useCallback4((threadId) => {
-    callbacks.onDeleteThread?.(threadId, createStateCallback());
-  }, [callbacks, createStateCallback]);
-  const handleArchiveThread = useCallback4((threadId) => {
-    callbacks.onArchiveThread?.(threadId, createStateCallback());
-  }, [callbacks, createStateCallback]);
+  const handleDeleteThread = useCallback4(
+    (threadId) => {
+      callbacks.onDeleteThread?.(threadId, createStateCallback());
+    },
+    [callbacks, createStateCallback]
+  );
+  const handleArchiveThread = useCallback4(
+    (threadId) => {
+      callbacks.onArchiveThread?.(threadId, createStateCallback());
+    },
+    [callbacks, createStateCallback]
+  );
+  const handleUpdateThreadTags = useCallback4(
+    (threadId, tags) => {
+      callbacks.onUpdateThreadTags?.(
+        threadId,
+        tags ?? [],
+        createStateCallback()
+      );
+    },
+    [callbacks, createStateCallback]
+  );
   const closeSidebar = useCallback4(() => {
     setState((prev) => ({ ...prev, showSidebar: false }));
   }, []);
   const handleCustomComponentToggle = useCallback4(() => {
     setState((prev) => ({ ...prev, showSidebar: !prev.showSidebar }));
   }, []);
-  const sidebarUser = useMemo5(() => user ? {
-    id: user.id,
-    name: user.name,
-    email: user.email,
-    avatar: user.avatar
-  } : null, [user?.id, user?.name, user?.email, user?.avatar]);
+  const sidebarUser = useMemo6(
+    () => user ? {
+      id: user.id,
+      name: user.name,
+      email: user.email,
+      avatar: user.avatar
+    } : null,
+    [user?.id, user?.name, user?.email, user?.avatar]
+  );
   const handleViewProfile = useCallback4(() => {
     setIsUserProfileOpen(true);
     callbacks.onViewProfile?.();
   }, [callbacks.onViewProfile]);
-  const sidebarUserMenuCallbacks = useMemo5(() => ({
-    onViewProfile: handleViewProfile,
-    onOpenSettings: callbacks.onOpenSettings,
-    onThemeChange: callbacks.onThemeChange,
-    onLogout: callbacks.onLogout
-  }), [
-    handleViewProfile,
-    callbacks.onOpenSettings,
-    callbacks.onThemeChange,
-    callbacks.onLogout
-  ]);
+  const sidebarUserMenuCallbacks = useMemo6(
+    () => ({
+      onViewProfile: handleViewProfile,
+      onOpenSettings: callbacks.onOpenSettings,
+      onThemeChange: callbacks.onThemeChange,
+      onLogout: callbacks.onLogout
+    }),
+    [
+      handleViewProfile,
+      callbacks.onOpenSettings,
+      callbacks.onThemeChange,
+      callbacks.onLogout
+    ]
+  );
   const renderCustomComponent = useCallback4(() => {
     const component = config?.customComponent?.component;
     if (!component) return null;
@@ -5787,55 +6140,58 @@ var ChatUI = ({
     );
   }) });
   const isMultiAgentMode = config.agentSelector?.mode === "multi";
-  const messageProps = useMemo5(() => ({
-    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 = useMemo6(
+    () => ({
+      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)
   );
@@ -5855,6 +6211,7 @@ var ChatUI = ({
             onRenameThread: handleRenameThread,
             onDeleteThread: handleDeleteThread,
             onArchiveThread: handleArchiveThread,
+            onUpdateThreadTags: handleUpdateThreadTags,
             user: sidebarUser,
             userMenuCallbacks: sidebarUserMenuCallbacks,
             currentTheme: config.ui.theme === "auto" ? "system" : config.ui.theme,
@@ -5868,9 +6225,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,