@copilotz/chat-ui 0.9.8 → 0.9.10

package/dist/index.cjs

@@ -2707,25 +2707,32 @@ var Sidebar2 = ({
       inputRef.current.select();
     }
   }, [editingThreadId]);
+  const normalizedSearchQuery = searchQuery.trim().toLowerCase();
+  const threadMatchesTitle = (thread) => !normalizedSearchQuery || (thread.title ?? "").toString().toLowerCase().includes(
+    normalizedSearchQuery
+  );
+  const tagMatchesSearch = (tag) => !normalizedSearchQuery || tag.name.toLowerCase().includes(normalizedSearchQuery) || tag.id.toLowerCase().includes(normalizedSearchQuery);
+  const threadMatchesSearch = (thread) => threadMatchesTitle(thread) || (thread.tags ?? []).some(tagMatchesSearch);
   const filteredThreads = threads.filter((thread) => {
-    const title = (thread.title ?? "").toString();
-    const matchesSearch = title.toLowerCase().includes(searchQuery.toLowerCase());
     const matchesArchiveFilter = showArchived || !thread.isArchived;
-    return matchesSearch && matchesArchiveFilter;
+    return threadMatchesSearch(thread) && matchesArchiveFilter;
   });
   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 groups2 = allTags.map((tag) => {
+        const tagMatches = tagMatchesSearch(tag);
+        return {
+          key: tag.id,
+          label: tag.name,
+          tag,
+          threads: filteredThreads.filter(
+            (thread) => (thread.tags ?? []).some((threadTag) => threadTag.id === tag.id) && (tagMatches || threadMatchesTitle(thread))
+          )
+        };
+      }).filter((group) => group.threads.length > 0);
       const untagged = filteredThreads.filter(
-        (thread) => (thread.tags ?? []).length === 0
+        (thread) => (thread.tags ?? []).length === 0 && threadMatchesTitle(thread)
       );
       if (untagged.length > 0) {
         groups2.push({
@@ -2772,6 +2779,7 @@ var Sidebar2 = ({
     config.labels?.yesterday,
     filteredThreads,
     groupBy,
+    normalizedSearchQuery,
     tagsEnabled
   ]);
   const tagDialogThread = tagDialogThreadId ? threads.find((thread) => thread.id === tagDialogThreadId) ?? null : null;
@@ -2822,7 +2830,7 @@ var Sidebar2 = ({
     setEditingThreadId(null);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Sidebar, { collapsible: "icon", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SidebarHeader, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SidebarHeader, { className: "gap-3 p-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-3 px-2 py-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center shrink-0", children: config.branding?.logo || /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Avatar, { className: "h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AvatarFallback, { className: "bg-primary text-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Bot, { className: "h-4 w-4" }) }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col min-w-0 group-data-[collapsible=icon]:hidden", children: [
@@ -2830,56 +2838,78 @@ var Sidebar2 = ({
           config.branding?.subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xs text-muted-foreground truncate", children: config.branding.subtitle })
         ] })
       ] }),
-      onCreateThread && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        CreateThreadDialog,
-        {
-          config,
-          onCreateThread,
-          trigger: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-            SidebarMenuButton,
-            {
-              size: "lg",
-              className: "w-full justify-start gap-2 border border-sidebar-border shadow-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:justify-center",
-              tooltip: config.labels?.newChat || "New Chat",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Plus, { className: "size-4" }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "group-data-[collapsible=icon]:hidden", children: config.labels?.newChat || "New Chat" })
-              ]
-            }
-          ) }) })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "px-2 py-1 mt-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative group-data-[collapsible=icon]:hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2 rounded-2xl border border-sidebar-border/70 bg-sidebar-accent/45 p-2 shadow-sm", children: [
+        onCreateThread && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          CreateThreadDialog,
+          {
+            config,
+            onCreateThread,
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              SidebarMenuButton,
+              {
+                size: "lg",
+                className: "h-11 w-full justify-start gap-2 rounded-xl border border-sidebar-border/80 bg-sidebar text-sidebar-foreground shadow-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:justify-center",
+                tooltip: config.labels?.newChat || "New Chat",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Plus, { className: "size-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "group-data-[collapsible=icon]:hidden", children: config.labels?.newChat || "New Chat" })
+                ]
+              }
+            ) }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             import_lucide_react8.Search,
             {
               "aria-hidden": "true",
-              className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 select-none opacity-50"
+              className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 select-none text-sidebar-foreground/45"
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Input,
             {
-              className: "h-8 pl-3 pr-10 bg-sidebar-accent/50 border-sidebar-border focus-visible:ring-1 focus-visible:ring-sidebar-ring",
+              className: "h-9 rounded-xl border-sidebar-border/80 bg-sidebar pl-3 pr-10 text-sidebar-foreground shadow-sm placeholder:text-sidebar-foreground/50 focus-visible:ring-1 focus-visible:ring-sidebar-ring",
               placeholder: config.labels?.search || "Search...",
               value: searchQuery,
               onChange: (e) => setSearchQuery(e.target.value)
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hidden group-data-[collapsible=icon]:flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            className: "h-7 w-7",
-            onClick: () => setOpen(true),
-            title: config.labels?.search || "Search",
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Search, { className: "h-4 w-4" })
-          }
-        ) })
-      ] })
+        tagsEnabled && threadTagsConfig?.groupingEnabled !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "grid grid-cols-2 gap-1 rounded-xl border border-sidebar-border/60 bg-sidebar-accent/70 p-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setGroupBy("date"),
+              className: `h-8 rounded-lg px-2 text-xs font-semibold transition-colors ${groupBy === "date" ? "border border-sidebar-border bg-sidebar text-sidebar-foreground shadow-sm hover:bg-sidebar" : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground"}`,
+              children: config.labels?.groupByDate || "Date"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setGroupBy("tag"),
+              className: `h-8 rounded-lg px-2 text-xs font-semibold transition-colors ${groupBy === "tag" ? "border border-sidebar-border bg-sidebar text-sidebar-foreground shadow-sm hover:bg-sidebar" : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground"}`,
+              children: config.labels?.groupByTag || "Tag"
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hidden group-data-[collapsible=icon]:flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8",
+          onClick: () => setOpen(true),
+          title: config.labels?.search || "Search",
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Search, { className: "h-4 w-4" })
+        }
+      ) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SidebarContent, { children: [
       threads.some((t) => t.isArchived) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-4 py-2 mt-2 group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
@@ -2895,28 +2925,6 @@ var Sidebar2 = ({
           ]
         }
       ) }),
-      tagsEnabled && threadTagsConfig?.groupingEnabled !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2 py-2 group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "grid grid-cols-2 gap-1 rounded-md bg-sidebar-accent/50 p-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          Button,
-          {
-            variant: groupBy === "date" ? "secondary" : "ghost",
-            size: "sm",
-            onClick: () => setGroupBy("date"),
-            className: "h-7 px-2 text-xs",
-            children: config.labels?.groupByDate || "Date"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          Button,
-          {
-            variant: groupBy === "tag" ? "secondary" : "ghost",
-            size: "sm",
-            onClick: () => setGroupBy("tag"),
-            className: "h-7 px-2 text-xs",
-            children: config.labels?.groupByTag || "Tag"
-          }
-        )
-      ] }) }),
       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" })
@@ -3096,7 +3104,7 @@ var Sidebar2 = ({
         );
       })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarFooter, { className: "border-t border-sidebar-border/70 px-3 pb-[calc(env(safe-area-inset-bottom)+1rem)] pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       UserMenu,
       {
         user,