@copilotz/chat-ui 0.9.1 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +241 -161
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +243 -162
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.css +44 -13
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -84,7 +84,7 @@ var defaultChatConfig = {
84
84
  addTag: "Add tag",
85
85
  removeTag: "Remove tag",
86
86
  tagNamePlaceholder: "Tag name",
87
- untagged: "Untagged",
87
+ untagged: "No tag",
88
88
  groupBy: "Group by",
89
89
  groupByDate: "Date",
90
90
  groupByTag: "Tag",
@@ -1367,6 +1367,12 @@ function Input({ className, type, ...props }) {
1367
1367
  );
1368
1368
  }
1369
1369
 
1370
+ // src/components/ui/collapsible.tsx
1371
+ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
1372
+ var Collapsible = CollapsiblePrimitive.Root;
1373
+ var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
1374
+ var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
1375
+
1370
1376
  // src/components/ui/sidebar.tsx
1371
1377
  import * as React6 from "react";
1372
1378
  import { Slot as Slot3 } from "@radix-ui/react-slot";
@@ -2230,12 +2236,13 @@ function DropdownMenuSeparator({
2230
2236
  import {
2231
2237
  Archive,
2232
2238
  Bot,
2239
+ ChevronRight as ChevronRight2,
2233
2240
  Edit2,
2234
2241
  Filter,
2235
- Tag,
2236
2242
  MoreHorizontal,
2237
2243
  Plus,
2238
2244
  Search,
2245
+ Tag,
2239
2246
  Trash2,
2240
2247
  X as X2
2241
2248
  } from "lucide-react";
@@ -2452,8 +2459,16 @@ var CreateThreadDialog = ({ config, onCreateThread, trigger }) => {
2452
2459
  };
2453
2460
  var ThreadInitialsIcon = ({ title }) => {
2454
2461
  const initials = title?.split(" ").map((n) => n[0]).slice(0, 2).join("").toUpperCase() || "?";
2455
- return /* @__PURE__ */ jsx18("div", { className: "flex shrink-0 items-center justify-center rounded bg-muted text-[10px] font-medium", children: initials });
2462
+ return /* @__PURE__ */ jsx18("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted text-[10px] font-medium text-muted-foreground", children: initials });
2456
2463
  };
2464
+ var TAG_COLOR_CLASSES = [
2465
+ "bg-sky-500",
2466
+ "bg-emerald-500",
2467
+ "bg-violet-500",
2468
+ "bg-amber-500",
2469
+ "bg-rose-500",
2470
+ "bg-cyan-500"
2471
+ ];
2457
2472
  function slugTagName(name) {
2458
2473
  const slug = name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 48);
2459
2474
  return slug || "tag";
@@ -2485,6 +2500,31 @@ function collectThreadTags(threads) {
2485
2500
  }
2486
2501
  return tags.sort((a, b) => a.name.localeCompare(b.name));
2487
2502
  }
2503
+ function tagColorIndex(tag) {
2504
+ let hash = 0;
2505
+ for (const char of tag.id || tag.name) {
2506
+ hash = hash * 31 + char.charCodeAt(0) >>> 0;
2507
+ }
2508
+ return hash % TAG_COLOR_CLASSES.length;
2509
+ }
2510
+ var TagDot = ({ tag }) => /* @__PURE__ */ jsx18(
2511
+ "span",
2512
+ {
2513
+ "aria-hidden": "true",
2514
+ className: `h-2 w-2 shrink-0 rounded-full ${TAG_COLOR_CLASSES[tagColorIndex(tag)]}`
2515
+ }
2516
+ );
2517
+ var ThreadTagBadge = ({ tag }) => /* @__PURE__ */ jsxs11(
2518
+ Badge,
2519
+ {
2520
+ variant: "secondary",
2521
+ className: "h-4 max-w-24 gap-1 rounded px-1.5 py-0 text-[10px] font-normal text-muted-foreground",
2522
+ children: [
2523
+ /* @__PURE__ */ jsx18(TagDot, { tag }),
2524
+ /* @__PURE__ */ jsx18("span", { className: "truncate", children: tag.name })
2525
+ ]
2526
+ }
2527
+ );
2488
2528
  var Sidebar2 = ({
2489
2529
  threads,
2490
2530
  currentThreadId,
@@ -2515,6 +2555,7 @@ var Sidebar2 = ({
2515
2555
  const [newTagName, setNewTagName] = useState5("");
2516
2556
  const [draggingThreadId, setDraggingThreadId] = useState5(null);
2517
2557
  const [dragOverTagId, setDragOverTagId] = useState5(null);
2558
+ const [collapsedGroups, setCollapsedGroups] = useState5({});
2518
2559
  const inputRef = useRef4(null);
2519
2560
  const threadTagsConfig = config.features?.threadTags;
2520
2561
  const tagsEnabled = !!threadTagsConfig?.enabled;
@@ -2553,8 +2594,9 @@ var Sidebar2 = ({
2553
2594
  if (untagged.length > 0) {
2554
2595
  groups2.push({
2555
2596
  key: "untagged",
2556
- label: config.labels?.untagged || "Untagged",
2557
- threads: untagged
2597
+ label: config.labels?.untagged || "No tag",
2598
+ threads: untagged,
2599
+ muted: true
2558
2600
  });
2559
2601
  }
2560
2602
  return groups2;
@@ -2597,6 +2639,12 @@ var Sidebar2 = ({
2597
2639
  tagsEnabled
2598
2640
  ]);
2599
2641
  const tagDialogThread = tagDialogThreadId ? threads.find((thread) => thread.id === tagDialogThreadId) ?? null : null;
2642
+ const toggleGroup = (groupKey, open) => {
2643
+ setCollapsedGroups((current) => ({
2644
+ ...current,
2645
+ [groupKey]: !open
2646
+ }));
2647
+ };
2600
2648
  const handleDeleteThread = (threadId) => {
2601
2649
  onDeleteThread?.(threadId);
2602
2650
  setDeleteThreadId(null);
@@ -2711,175 +2759,206 @@ var Sidebar2 = ({
2711
2759
  ]
2712
2760
  }
2713
2761
  ) }),
2714
- 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: [
2715
- /* @__PURE__ */ jsx18("span", { className: "px-2 text-[11px] text-muted-foreground", children: config.labels?.groupBy || "Group by" }),
2716
- /* @__PURE__ */ jsxs11("div", { className: "flex gap-1", children: [
2717
- /* @__PURE__ */ jsx18(
2718
- Button,
2719
- {
2720
- variant: groupBy === "date" ? "secondary" : "ghost",
2721
- size: "sm",
2722
- onClick: () => setGroupBy("date"),
2723
- className: "h-6 px-2 text-xs",
2724
- children: config.labels?.groupByDate || "Date"
2725
- }
2726
- ),
2727
- /* @__PURE__ */ jsx18(
2728
- Button,
2729
- {
2730
- variant: groupBy === "tag" ? "secondary" : "ghost",
2731
- size: "sm",
2732
- onClick: () => setGroupBy("tag"),
2733
- className: "h-6 px-2 text-xs",
2734
- children: config.labels?.groupByTag || "Tag"
2735
- }
2736
- )
2737
- ] })
2762
+ tagsEnabled && threadTagsConfig?.groupingEnabled !== false && /* @__PURE__ */ jsx18("div", { className: "px-2 py-2 group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-1 rounded-md bg-sidebar-accent/50 p-1", children: [
2763
+ /* @__PURE__ */ jsx18(
2764
+ Button,
2765
+ {
2766
+ variant: groupBy === "date" ? "secondary" : "ghost",
2767
+ size: "sm",
2768
+ onClick: () => setGroupBy("date"),
2769
+ className: "h-7 px-2 text-xs",
2770
+ children: config.labels?.groupByDate || "Date"
2771
+ }
2772
+ ),
2773
+ /* @__PURE__ */ jsx18(
2774
+ Button,
2775
+ {
2776
+ variant: groupBy === "tag" ? "secondary" : "ghost",
2777
+ size: "sm",
2778
+ onClick: () => setGroupBy("tag"),
2779
+ className: "h-7 px-2 text-xs",
2780
+ children: config.labels?.groupByTag || "Tag"
2781
+ }
2782
+ )
2738
2783
  ] }) }),
2739
2784
  threadGroups.length === 0 ? /* @__PURE__ */ jsxs11("div", { className: "px-4 py-8 text-center text-muted-foreground group-data-[collapsible=icon]:hidden", children: [
2740
2785
  /* @__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" }) }),
2741
2786
  /* @__PURE__ */ jsx18("p", { className: "text-xs", children: searchQuery ? config.labels?.noThreadsFound || "No conversations found" : config.labels?.noThreadsYet || "No conversations yet" })
2742
- ] }) : threadGroups.map((group) => /* @__PURE__ */ jsxs11(
2743
- SidebarGroup,
2744
- {
2745
- className: "mt-2",
2746
- onDragOver: (event) => {
2747
- if (!canDragTags || !group.tag) return;
2748
- event.preventDefault();
2749
- setDragOverTagId(group.tag.id);
2750
- },
2751
- onDragLeave: () => {
2752
- if (dragOverTagId === group.tag?.id) setDragOverTagId(null);
2753
- },
2754
- onDrop: (event) => {
2755
- if (!canDragTags || !group.tag) return;
2756
- event.preventDefault();
2757
- handleDropOnTag(group.tag);
2758
- },
2759
- children: [
2760
- /* @__PURE__ */ jsxs11(
2761
- SidebarGroupLabel,
2787
+ ] }) : threadGroups.map((group) => {
2788
+ const isOpen = !collapsedGroups[group.key];
2789
+ return /* @__PURE__ */ jsx18(
2790
+ Collapsible,
2791
+ {
2792
+ open: isOpen,
2793
+ onOpenChange: (open) => toggleGroup(group.key, open),
2794
+ children: /* @__PURE__ */ jsxs11(
2795
+ SidebarGroup,
2762
2796
  {
2763
- className: `group-data-[collapsible=icon]:hidden ${dragOverTagId === group.tag?.id ? "rounded-md bg-sidebar-accent text-sidebar-accent-foreground" : ""}`,
2797
+ className: "mt-1 py-1",
2798
+ onDragOver: (event) => {
2799
+ if (!canDragTags || !group.tag) return;
2800
+ event.preventDefault();
2801
+ setDragOverTagId(group.tag.id);
2802
+ },
2803
+ onDragLeave: () => {
2804
+ if (dragOverTagId === group.tag?.id) {
2805
+ setDragOverTagId(null);
2806
+ }
2807
+ },
2808
+ onDrop: (event) => {
2809
+ if (!canDragTags || !group.tag) return;
2810
+ event.preventDefault();
2811
+ handleDropOnTag(group.tag);
2812
+ },
2764
2813
  children: [
2765
- group.tag && /* @__PURE__ */ jsx18(Tag, { className: "mr-1 h-3 w-3" }),
2766
- group.label
2767
- ]
2768
- }
2769
- ),
2770
- /* @__PURE__ */ jsx18(SidebarGroupContent, { children: /* @__PURE__ */ jsx18(SidebarMenu, { children: group.threads.map((thread) => /* @__PURE__ */ jsxs11(SidebarMenuItem, { children: [
2771
- editingThreadId === thread.id ? /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-1 px-2 py-1", children: /* @__PURE__ */ jsx18(
2772
- Input,
2773
- {
2774
- ref: inputRef,
2775
- value: editTitle,
2776
- onChange: (e) => setEditTitle(e.target.value),
2777
- onKeyDown: (e) => {
2778
- if (e.key === "Enter") {
2779
- saveEdit();
2780
- }
2781
- if (e.key === "Escape") {
2782
- cancelEdit();
2814
+ /* @__PURE__ */ jsx18(
2815
+ SidebarGroupLabel,
2816
+ {
2817
+ asChild: true,
2818
+ className: `h-7 group-data-[collapsible=icon]:hidden ${dragOverTagId === group.tag?.id ? "bg-sidebar-accent text-sidebar-accent-foreground" : ""}`,
2819
+ children: /* @__PURE__ */ jsxs11(CollapsibleTrigger2, { className: "group/trigger w-full", children: [
2820
+ /* @__PURE__ */ jsx18(
2821
+ ChevronRight2,
2822
+ {
2823
+ className: `mr-1 h-3.5 w-3.5 transition-transform ${isOpen ? "rotate-90" : ""}`
2824
+ }
2825
+ ),
2826
+ group.tag ? /* @__PURE__ */ jsx18(TagDot, { tag: group.tag }) : group.muted ? /* @__PURE__ */ jsx18(Tag, { className: "mr-1 h-3.5 w-3.5 opacity-50" }) : null,
2827
+ /* @__PURE__ */ jsx18(
2828
+ "span",
2829
+ {
2830
+ className: `min-w-0 flex-1 truncate ${group.muted ? "text-muted-foreground" : ""}`,
2831
+ children: group.label
2832
+ }
2833
+ ),
2834
+ /* @__PURE__ */ jsx18("span", { className: "ml-auto rounded px-1.5 text-[10px] text-muted-foreground", children: group.threads.length })
2835
+ ] })
2783
2836
  }
2784
- },
2785
- onBlur: saveEdit,
2786
- className: "h-7 text-sm"
2787
- }
2788
- ) }) : /* @__PURE__ */ jsxs11(
2789
- SidebarMenuButton,
2790
- {
2791
- isActive: currentThreadId === thread.id,
2792
- onClick: () => onSelectThread?.(thread.id),
2793
- tooltip: thread.title,
2794
- draggable: canDragTags,
2795
- onDragStart: () => setDraggingThreadId(thread.id),
2796
- onDragEnd: () => {
2797
- setDraggingThreadId(null);
2798
- setDragOverTagId(null);
2799
- },
2800
- children: [
2801
- /* @__PURE__ */ jsx18(ThreadInitialsIcon, { title: thread.title || "?" }),
2802
- /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-start gap-0.5 flex-1 min-w-0 group-data-[collapsible=icon]:hidden", children: [
2803
- /* @__PURE__ */ jsx18("span", { className: "truncate w-full", children: thread.title || "New Chat" }),
2804
- 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(
2805
- "span",
2806
- {
2807
- className: "max-w-20 truncate rounded bg-sidebar-accent px-1.5 py-0.5 text-[10px] text-muted-foreground",
2808
- children: tag.name
2809
- },
2810
- tag.id
2811
- )) })
2812
- ] }),
2813
- thread.isArchived && /* @__PURE__ */ jsx18(Archive, { className: "ml-auto h-3 w-3 opacity-50 group-data-[collapsible=icon]:hidden" })
2814
- ]
2815
- }
2816
- ),
2817
- !editingThreadId && /* @__PURE__ */ jsxs11(DropdownMenu, { children: [
2818
- /* @__PURE__ */ jsx18(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(SidebarMenuAction, { showOnHover: true, children: [
2819
- /* @__PURE__ */ jsx18(MoreHorizontal, {}),
2820
- /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "More" })
2821
- ] }) }),
2822
- /* @__PURE__ */ jsxs11(
2823
- DropdownMenuContent,
2824
- {
2825
- className: "w-48",
2826
- side: "right",
2827
- align: "start",
2828
- children: [
2829
- /* @__PURE__ */ jsxs11(
2830
- DropdownMenuItem,
2831
- {
2832
- onClick: () => startEditing(thread),
2833
- children: [
2834
- /* @__PURE__ */ jsx18(Edit2, { className: "mr-2 h-4 w-4" }),
2835
- /* @__PURE__ */ jsx18("span", { children: config.labels?.renameThread || "Rename" })
2836
- ]
2837
- }
2838
- ),
2839
- /* @__PURE__ */ jsxs11(
2840
- DropdownMenuItem,
2837
+ ),
2838
+ /* @__PURE__ */ jsx18(CollapsibleContent2, { children: /* @__PURE__ */ jsx18(SidebarGroupContent, { children: /* @__PURE__ */ jsx18(SidebarMenu, { children: group.threads.map((thread) => {
2839
+ const visibleTags = tagsEnabled ? (thread.tags ?? []).filter((tag) => tag.id !== group.tag?.id).slice(0, 2) : [];
2840
+ return /* @__PURE__ */ jsxs11(SidebarMenuItem, { children: [
2841
+ editingThreadId === thread.id ? /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-1 px-2 py-1", children: /* @__PURE__ */ jsx18(
2842
+ Input,
2841
2843
  {
2842
- onClick: () => onArchiveThread?.(thread.id),
2843
- children: [
2844
- /* @__PURE__ */ jsx18(Archive, { className: "mr-2 h-4 w-4" }),
2845
- /* @__PURE__ */ jsx18("span", { children: thread.isArchived ? config.labels?.unarchiveThread || "Unarchive" : config.labels?.archiveThread || "Archive" })
2846
- ]
2844
+ ref: inputRef,
2845
+ value: editTitle,
2846
+ onChange: (e) => setEditTitle(e.target.value),
2847
+ onKeyDown: (e) => {
2848
+ if (e.key === "Enter") {
2849
+ saveEdit();
2850
+ }
2851
+ if (e.key === "Escape") {
2852
+ cancelEdit();
2853
+ }
2854
+ },
2855
+ onBlur: saveEdit,
2856
+ className: "h-7 text-sm"
2847
2857
  }
2848
- ),
2849
- canUpdateTags && /* @__PURE__ */ jsxs11(
2850
- DropdownMenuItem,
2858
+ ) }) : /* @__PURE__ */ jsxs11(
2859
+ SidebarMenuButton,
2851
2860
  {
2852
- onClick: () => {
2853
- setTagDialogThreadId(thread.id);
2854
- setNewTagName("");
2861
+ isActive: currentThreadId === thread.id,
2862
+ onClick: () => onSelectThread?.(thread.id),
2863
+ tooltip: thread.title,
2864
+ draggable: canDragTags,
2865
+ className: "h-auto min-h-9 items-start py-1.5",
2866
+ onDragStart: () => setDraggingThreadId(thread.id),
2867
+ onDragEnd: () => {
2868
+ setDraggingThreadId(null);
2869
+ setDragOverTagId(null);
2855
2870
  },
2856
2871
  children: [
2857
- /* @__PURE__ */ jsx18(Tag, { className: "mr-2 h-4 w-4" }),
2858
- /* @__PURE__ */ jsx18("span", { children: config.labels?.manageTags || "Manage tags" })
2872
+ /* @__PURE__ */ jsx18(
2873
+ ThreadInitialsIcon,
2874
+ {
2875
+ title: thread.title || "?"
2876
+ }
2877
+ ),
2878
+ /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 flex-col items-start gap-1 group-data-[collapsible=icon]:hidden", children: [
2879
+ /* @__PURE__ */ jsx18("span", { className: "w-full truncate leading-5", children: thread.title || "New Chat" }),
2880
+ visibleTags.length > 0 && /* @__PURE__ */ jsx18("span", { className: "flex max-w-full flex-wrap gap-1", children: visibleTags.map((tag) => /* @__PURE__ */ jsx18(
2881
+ ThreadTagBadge,
2882
+ {
2883
+ tag
2884
+ },
2885
+ tag.id
2886
+ )) })
2887
+ ] }),
2888
+ thread.isArchived && /* @__PURE__ */ jsx18(Archive, { className: "ml-auto mt-1 h-3 w-3 opacity-50 group-data-[collapsible=icon]:hidden" })
2859
2889
  ]
2860
2890
  }
2861
2891
  ),
2862
- /* @__PURE__ */ jsx18(DropdownMenuSeparator, {}),
2863
- /* @__PURE__ */ jsxs11(
2864
- DropdownMenuItem,
2865
- {
2866
- onClick: () => setDeleteThreadId(thread.id),
2867
- className: "text-destructive focus:text-destructive",
2868
- children: [
2869
- /* @__PURE__ */ jsx18(Trash2, { className: "mr-2 h-4 w-4" }),
2870
- /* @__PURE__ */ jsx18("span", { children: config.labels?.deleteThread || "Delete" })
2871
- ]
2872
- }
2873
- )
2874
- ]
2875
- }
2876
- )
2877
- ] })
2878
- ] }, thread.id)) }) })
2879
- ]
2880
- },
2881
- group.key
2882
- ))
2892
+ !editingThreadId && /* @__PURE__ */ jsxs11(DropdownMenu, { children: [
2893
+ /* @__PURE__ */ jsx18(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(SidebarMenuAction, { showOnHover: true, children: [
2894
+ /* @__PURE__ */ jsx18(MoreHorizontal, {}),
2895
+ /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "More" })
2896
+ ] }) }),
2897
+ /* @__PURE__ */ jsxs11(
2898
+ DropdownMenuContent,
2899
+ {
2900
+ className: "w-48",
2901
+ side: "right",
2902
+ align: "start",
2903
+ children: [
2904
+ /* @__PURE__ */ jsxs11(
2905
+ DropdownMenuItem,
2906
+ {
2907
+ onClick: () => startEditing(thread),
2908
+ children: [
2909
+ /* @__PURE__ */ jsx18(Edit2, { className: "mr-2 h-4 w-4" }),
2910
+ /* @__PURE__ */ jsx18("span", { children: config.labels?.renameThread || "Rename" })
2911
+ ]
2912
+ }
2913
+ ),
2914
+ /* @__PURE__ */ jsxs11(
2915
+ DropdownMenuItem,
2916
+ {
2917
+ onClick: () => onArchiveThread?.(thread.id),
2918
+ children: [
2919
+ /* @__PURE__ */ jsx18(Archive, { className: "mr-2 h-4 w-4" }),
2920
+ /* @__PURE__ */ jsx18("span", { children: thread.isArchived ? config.labels?.unarchiveThread || "Unarchive" : config.labels?.archiveThread || "Archive" })
2921
+ ]
2922
+ }
2923
+ ),
2924
+ canUpdateTags && /* @__PURE__ */ jsxs11(
2925
+ DropdownMenuItem,
2926
+ {
2927
+ onClick: () => {
2928
+ setTagDialogThreadId(thread.id);
2929
+ setNewTagName("");
2930
+ },
2931
+ children: [
2932
+ /* @__PURE__ */ jsx18(Tag, { className: "mr-2 h-4 w-4" }),
2933
+ /* @__PURE__ */ jsx18("span", { children: config.labels?.manageTags || "Manage tags" })
2934
+ ]
2935
+ }
2936
+ ),
2937
+ /* @__PURE__ */ jsx18(DropdownMenuSeparator, {}),
2938
+ /* @__PURE__ */ jsxs11(
2939
+ DropdownMenuItem,
2940
+ {
2941
+ onClick: () => setDeleteThreadId(thread.id),
2942
+ className: "text-destructive focus:text-destructive",
2943
+ children: [
2944
+ /* @__PURE__ */ jsx18(Trash2, { className: "mr-2 h-4 w-4" }),
2945
+ /* @__PURE__ */ jsx18("span", { children: config.labels?.deleteThread || "Delete" })
2946
+ ]
2947
+ }
2948
+ )
2949
+ ]
2950
+ }
2951
+ )
2952
+ ] })
2953
+ ] }, thread.id);
2954
+ }) }) }) })
2955
+ ]
2956
+ }
2957
+ )
2958
+ },
2959
+ group.key
2960
+ );
2961
+ })
2883
2962
  ] }),
2884
2963
  /* @__PURE__ */ jsx18(SidebarFooter, { children: /* @__PURE__ */ jsx18(
2885
2964
  UserMenu,
@@ -2913,16 +2992,18 @@ var Sidebar2 = ({
2913
2992
  /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
2914
2993
  /* @__PURE__ */ jsx18("div", { className: "text-sm font-medium", children: config.labels?.tags || "Tags" }),
2915
2994
  (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(
2916
- "span",
2995
+ Badge,
2917
2996
  {
2918
- className: "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-sm",
2997
+ variant: "secondary",
2998
+ className: "gap-1 rounded-md py-1 text-sm font-normal",
2919
2999
  children: [
3000
+ /* @__PURE__ */ jsx18(TagDot, { tag }),
2920
3001
  tag.name,
2921
3002
  /* @__PURE__ */ jsx18(
2922
3003
  "button",
2923
3004
  {
2924
3005
  type: "button",
2925
- className: "rounded hover:bg-background",
3006
+ className: "rounded-sm hover:bg-background/80",
2926
3007
  onClick: () => removeTagFromThread(tagDialogThread, tag.id),
2927
3008
  "aria-label": config.labels?.removeTag || "Remove tag",
2928
3009
  children: /* @__PURE__ */ jsx18(X2, { className: "h-3 w-3" })