@copilotz/chat-ui 0.9.1 → 0.9.3

package/dist/index.js

@@ -84,7 +84,7 @@ var defaultChatConfig = {
     addTag: "Add tag",
     removeTag: "Remove tag",
     tagNamePlaceholder: "Tag name",
-    untagged: "Untagged",
+    untagged: "No tag",
     groupBy: "Group by",
     groupByDate: "Date",
     groupByTag: "Tag",
@@ -1367,6 +1367,12 @@ function Input({ className, type, ...props }) {
   );
 }
 
+// src/components/ui/collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+
 // src/components/ui/sidebar.tsx
 import * as React6 from "react";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
@@ -2230,12 +2236,13 @@ function DropdownMenuSeparator({
 import {
   Archive,
   Bot,
+  ChevronRight as ChevronRight2,
   Edit2,
   Filter,
-  Tag,
   MoreHorizontal,
   Plus,
   Search,
+  Tag,
   Trash2,
   X as X2
 } from "lucide-react";
@@ -2452,8 +2459,16 @@ var CreateThreadDialog = ({ config, onCreateThread, trigger }) => {
 };
 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 });
+  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 });
 };
+var TAG_COLOR_CLASSES = [
+  "bg-sky-500",
+  "bg-emerald-500",
+  "bg-violet-500",
+  "bg-amber-500",
+  "bg-rose-500",
+  "bg-cyan-500"
+];
 function slugTagName(name) {
   const slug = name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 48);
   return slug || "tag";
@@ -2485,6 +2500,31 @@ function collectThreadTags(threads) {
   }
   return tags.sort((a, b) => a.name.localeCompare(b.name));
 }
+function tagColorIndex(tag) {
+  let hash = 0;
+  for (const char of tag.id || tag.name) {
+    hash = hash * 31 + char.charCodeAt(0) >>> 0;
+  }
+  return hash % TAG_COLOR_CLASSES.length;
+}
+var TagDot = ({ tag }) => /* @__PURE__ */ jsx18(
+  "span",
+  {
+    "aria-hidden": "true",
+    className: `h-2 w-2 shrink-0 rounded-full ${TAG_COLOR_CLASSES[tagColorIndex(tag)]}`
+  }
+);
+var ThreadTagBadge = ({ tag }) => /* @__PURE__ */ jsxs11(
+  Badge,
+  {
+    variant: "secondary",
+    className: "h-4 max-w-24 gap-1 rounded px-1.5 py-0 text-[10px] font-normal text-muted-foreground",
+    children: [
+      /* @__PURE__ */ jsx18(TagDot, { tag }),
+      /* @__PURE__ */ jsx18("span", { className: "truncate", children: tag.name })
+    ]
+  }
+);
 var Sidebar2 = ({
   threads,
   currentThreadId,
@@ -2515,6 +2555,7 @@ var Sidebar2 = ({
   const [newTagName, setNewTagName] = useState5("");
   const [draggingThreadId, setDraggingThreadId] = useState5(null);
   const [dragOverTagId, setDragOverTagId] = useState5(null);
+  const [collapsedGroups, setCollapsedGroups] = useState5({});
   const inputRef = useRef4(null);
   const threadTagsConfig = config.features?.threadTags;
   const tagsEnabled = !!threadTagsConfig?.enabled;
@@ -2553,8 +2594,9 @@ var Sidebar2 = ({
       if (untagged.length > 0) {
         groups2.push({
           key: "untagged",
-          label: config.labels?.untagged || "Untagged",
-          threads: untagged
+          label: config.labels?.untagged || "No tag",
+          threads: untagged,
+          muted: true
         });
       }
       return groups2;
@@ -2597,6 +2639,12 @@ var Sidebar2 = ({
     tagsEnabled
   ]);
   const tagDialogThread = tagDialogThreadId ? threads.find((thread) => thread.id === tagDialogThreadId) ?? null : null;
+  const toggleGroup = (groupKey, open) => {
+    setCollapsedGroups((current) => ({
+      ...current,
+      [groupKey]: !open
+    }));
+  };
   const handleDeleteThread = (threadId) => {
     onDeleteThread?.(threadId);
     setDeleteThreadId(null);
@@ -2711,175 +2759,206 @@ var Sidebar2 = ({
           ]
         }
       ) }),
-      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,
-            {
-              variant: groupBy === "date" ? "secondary" : "ghost",
-              size: "sm",
-              onClick: () => setGroupBy("date"),
-              className: "h-6 px-2 text-xs",
-              children: config.labels?.groupByDate || "Date"
-            }
-          ),
-          /* @__PURE__ */ jsx18(
-            Button,
-            {
-              variant: groupBy === "tag" ? "secondary" : "ghost",
-              size: "sm",
-              onClick: () => setGroupBy("tag"),
-              className: "h-6 px-2 text-xs",
-              children: config.labels?.groupByTag || "Tag"
-            }
-          )
-        ] })
+      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: [
+        /* @__PURE__ */ jsx18(
+          Button,
+          {
+            variant: groupBy === "date" ? "secondary" : "ghost",
+            size: "sm",
+            onClick: () => setGroupBy("date"),
+            className: "h-7 px-2 text-xs",
+            children: config.labels?.groupByDate || "Date"
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          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__ */ 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(
-              SidebarGroupLabel,
+      ] }) : threadGroups.map((group) => {
+        const isOpen = !collapsedGroups[group.key];
+        return /* @__PURE__ */ jsx18(
+          Collapsible,
+          {
+            open: isOpen,
+            onOpenChange: (open) => toggleGroup(group.key, open),
+            children: /* @__PURE__ */ jsxs11(
+              SidebarGroup,
               {
-                className: `group-data-[collapsible=icon]:hidden ${dragOverTagId === group.tag?.id ? "rounded-md bg-sidebar-accent text-sidebar-accent-foreground" : ""}`,
+                className: "mt-1 py-1",
+                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: [
-                  group.tag && /* @__PURE__ */ jsx18(Tag, { className: "mr-1 h-3 w-3" }),
-                  group.label
-                ]
-              }
-            ),
-            /* @__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();
+                  /* @__PURE__ */ jsx18(
+                    SidebarGroupLabel,
+                    {
+                      asChild: true,
+                      className: `h-7 group-data-[collapsible=icon]:hidden ${dragOverTagId === group.tag?.id ? "bg-sidebar-accent text-sidebar-accent-foreground" : ""}`,
+                      children: /* @__PURE__ */ jsxs11(CollapsibleTrigger2, { className: "group/trigger w-full", children: [
+                        /* @__PURE__ */ jsx18(
+                          ChevronRight2,
+                          {
+                            className: `mr-1 h-3.5 w-3.5 transition-transform ${isOpen ? "rotate-90" : ""}`
+                          }
+                        ),
+                        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,
+                        /* @__PURE__ */ jsx18(
+                          "span",
+                          {
+                            className: `min-w-0 flex-1 truncate ${group.muted ? "text-muted-foreground" : ""}`,
+                            children: group.label
+                          }
+                        ),
+                        /* @__PURE__ */ jsx18("span", { className: "ml-auto rounded px-1.5 text-[10px] text-muted-foreground", children: group.threads.length })
+                      ] })
                     }
-                  },
-                  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,
+                  ),
+                  /* @__PURE__ */ jsx18(CollapsibleContent2, { children: /* @__PURE__ */ jsx18(SidebarGroupContent, { children: /* @__PURE__ */ jsx18(SidebarMenu, { children: group.threads.map((thread) => {
+                    const visibleTags = tagsEnabled ? (thread.tags ?? []).filter((tag) => tag.id !== group.tag?.id).slice(0, 2) : [];
+                    return /* @__PURE__ */ jsxs11(SidebarMenuItem, { children: [
+                      editingThreadId === thread.id ? /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-1 px-2 py-1", children: /* @__PURE__ */ jsx18(
+                        Input,
                         {
-                          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" })
-                          ]
+                          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"
                         }
-                      ),
-                      canUpdateTags && /* @__PURE__ */ jsxs11(
-                        DropdownMenuItem,
+                      ) }) : /* @__PURE__ */ jsxs11(
+                        SidebarMenuButton,
                         {
-                          onClick: () => {
-                            setTagDialogThreadId(thread.id);
-                            setNewTagName("");
+                          isActive: currentThreadId === thread.id,
+                          onClick: () => onSelectThread?.(thread.id),
+                          tooltip: thread.title,
+                          draggable: canDragTags,
+                          className: "h-auto min-h-9 items-start py-1.5",
+                          onDragStart: () => setDraggingThreadId(thread.id),
+                          onDragEnd: () => {
+                            setDraggingThreadId(null);
+                            setDragOverTagId(null);
                           },
                           children: [
-                            /* @__PURE__ */ jsx18(Tag, { className: "mr-2 h-4 w-4" }),
-                            /* @__PURE__ */ jsx18("span", { children: config.labels?.manageTags || "Manage tags" })
+                            /* @__PURE__ */ jsx18(
+                              ThreadInitialsIcon,
+                              {
+                                title: thread.title || "?"
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 flex-col items-start gap-1 group-data-[collapsible=icon]:hidden", children: [
+                              /* @__PURE__ */ jsx18("span", { className: "w-full truncate leading-5", children: thread.title || "New Chat" }),
+                              visibleTags.length > 0 && /* @__PURE__ */ jsx18("span", { className: "flex max-w-full flex-wrap gap-1", children: visibleTags.map((tag) => /* @__PURE__ */ jsx18(
+                                ThreadTagBadge,
+                                {
+                                  tag
+                                },
+                                tag.id
+                              )) })
+                            ] }),
+                            thread.isArchived && /* @__PURE__ */ jsx18(Archive, { className: "ml-auto mt-1 h-3 w-3 opacity-50 group-data-[collapsible=icon]:hidden" })
                           ]
                         }
                       ),
-                      /* @__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
-      ))
+                      !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,
@@ -2913,16 +2992,18 @@ var Sidebar2 = ({
             /* @__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",
+                Badge,
                 {
-                  className: "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-sm",
+                  variant: "secondary",
+                  className: "gap-1 rounded-md py-1 text-sm font-normal",
                   children: [
+                    /* @__PURE__ */ jsx18(TagDot, { tag }),
                     tag.name,
                     /* @__PURE__ */ jsx18(
                       "button",
                       {
                         type: "button",
-                        className: "rounded hover:bg-background",
+                        className: "rounded-sm hover:bg-background/80",
                         onClick: () => removeTagFromThread(tagDialogThread, tag.id),
                         "aria-label": config.labels?.removeTag || "Remove tag",
                         children: /* @__PURE__ */ jsx18(X2, { className: "h-3 w-3" })
@@ -6140,6 +6221,9 @@ var ChatUI = ({
     );
   }) });
   const isMultiAgentMode = config.agentSelector?.mode === "multi";
+  const customPanelWidth = config.customComponent?.panelWidth ?? 320;
+  const customPanelMinWidth = Math.min(customPanelWidth, 320);
+  const customPanelResponsiveWidth = `clamp(${customPanelMinWidth}px, 30vw, ${customPanelWidth}px)`;
   const messageProps = useMemo6(
     () => ({
       userAvatar: user?.avatar,
@@ -6220,7 +6304,7 @@ var ChatUI = ({
             userMenuAdditionalItems
           }
         ),
-        /* @__PURE__ */ jsx28(SidebarInset, { children: /* @__PURE__ */ jsxs18("div", { className: "flex flex-col h-full min-h-0", children: [
+        /* @__PURE__ */ jsx28(SidebarInset, { className: "min-w-0 overflow-hidden", children: /* @__PURE__ */ jsxs18("div", { className: "flex flex-col h-full min-h-0 min-w-0", children: [
           /* @__PURE__ */ jsx28(
             ChatHeader,
             {
@@ -6239,8 +6323,8 @@ var ChatUI = ({
               onParticipantsChange
             }
           ),
-          /* @__PURE__ */ jsxs18("div", { className: "flex flex-1 flex-row min-h-0 overflow-hidden", children: [
-            /* @__PURE__ */ jsxs18("div", { className: "flex-1 flex flex-col min-h-0", children: [
+          /* @__PURE__ */ jsxs18("div", { className: "flex flex-1 flex-row min-h-0 min-w-0 overflow-hidden", children: [
+            /* @__PURE__ */ jsxs18("div", { className: "flex-1 flex flex-col min-h-0 min-w-0", children: [
               /* @__PURE__ */ jsx28(
                 ScrollArea,
                 {
@@ -6360,17 +6444,14 @@ var ChatUI = ({
             config?.customComponent?.component && !isMobile && /* @__PURE__ */ jsx28(
               "div",
               {
-                className: "h-full transition-all duration-300 ease-in-out overflow-hidden",
+                className: "h-full shrink-0 transition-all duration-300 ease-in-out overflow-hidden",
                 style: {
-                  width: state.showSidebar ? config.customComponent.panelWidth ?? 320 : 0
+                  width: state.showSidebar ? customPanelResponsiveWidth : 0
                 },
                 children: state.showSidebar && /* @__PURE__ */ jsx28(
                   "div",
                   {
                     className: "h-full overflow-hidden border-l bg-background animate-in slide-in-from-right-4 duration-300",
-                    style: {
-                      width: config.customComponent.panelWidth ?? 320
-                    },
                     children: renderCustomComponent()
                   }
                 )