@copilotz/chat-ui 0.6.6 → 0.6.7

package/dist/index.js

@@ -1,5 +1,11 @@
 // src/components/chat/ChatUI.tsx
-import { useState as useState9, useEffect as useEffect11, useRef as useRef6, useCallback as useCallback4, useMemo as useMemo6 } from "react";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect11,
+  useMemo as useMemo6,
+  useRef as useRef6,
+  useState as useState9
+} from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/config/chatConfig.ts
@@ -1130,7 +1136,7 @@ var Message = memo2(({
 }, arePropsEqual);
 
 // src/components/chat/Sidebar.tsx
-import { useState as useState5, useRef as useRef4, useEffect as useEffect8 } from "react";
+import { useEffect as useEffect8, useRef as useRef4, useState as useState5 } from "react";
 
 // src/components/ui/input.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
@@ -2157,25 +2163,27 @@ function DropdownMenuSeparator({
 
 // src/components/chat/Sidebar.tsx
 import {
-  Plus,
-  MoreHorizontal,
-  Edit2,
-  Trash2,
   Archive,
-  Search,
+  Bot,
+  Edit2,
   Filter,
-  Bot
+  MoreHorizontal,
+  Plus,
+  Search,
+  Trash2
 } from "lucide-react";
 
 // src/components/chat/UserMenu.tsx
+import React8 from "react";
 import {
-  User,
-  Settings,
-  LogOut,
+  Check as Check2,
   ChevronsUpDown,
+  LogOut,
   Moon,
+  Palette,
+  Settings,
   Sun,
-  Palette
+  User
 } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var getInitials = (name, email) => {
@@ -2197,6 +2205,7 @@ var UserMenu = ({
   callbacks,
   currentTheme = "system",
   showThemeOptions = true,
+  sections = [],
   additionalItems
 }) => {
   const { isMobile } = useSidebar();
@@ -2260,6 +2269,27 @@ var UserMenu = ({
             /* @__PURE__ */ jsx17("span", { children: labels.settings })
           ] }),
           additionalItems,
+          sections.map((section) => /* @__PURE__ */ jsxs9(React8.Fragment, { children: [
+            /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
+            section.label && /* @__PURE__ */ jsx17(DropdownMenuLabel, { className: "px-2 py-2", children: section.label }),
+            section.items.map((item) => /* @__PURE__ */ jsxs9(
+              DropdownMenuItem,
+              {
+                onClick: item.onSelect,
+                disabled: item.disabled,
+                className: [
+                  item.checked ? "bg-accent/60" : "",
+                  item.variant === "destructive" ? "text-destructive focus:text-destructive focus:bg-destructive/10" : ""
+                ].filter(Boolean).join(" "),
+                children: [
+                  item.icon && /* @__PURE__ */ jsx17("span", { className: "mr-2 h-4 w-4 shrink-0", children: item.icon }),
+                  /* @__PURE__ */ jsx17("span", { className: "flex-1", children: item.label }),
+                  item.checked && /* @__PURE__ */ jsx17(Check2, { className: "ml-2 h-4 w-4 text-primary" })
+                ]
+              },
+              item.id
+            ))
+          ] }, section.id)),
           showThemeOptions && callbacks?.onThemeChange && /* @__PURE__ */ jsxs9(Fragment2, { children: [
             /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
             /* @__PURE__ */ jsxs9(
@@ -2371,6 +2401,7 @@ var Sidebar2 = ({
   userMenuCallbacks,
   currentTheme,
   showThemeOptions = true,
+  userMenuSections,
   userMenuAdditionalItems,
   ...props
 }) => {
@@ -2389,7 +2420,9 @@ 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;
   });
@@ -2513,8 +2546,12 @@ var Sidebar2 = ({
               value: editTitle,
               onChange: (e) => setEditTitle(e.target.value),
               onKeyDown: (e) => {
-                if (e.key === "Enter") saveEdit();
-                if (e.key === "Escape") cancelEdit();
+                if (e.key === "Enter") {
+                  saveEdit();
+                }
+                if (e.key === "Escape") {
+                  cancelEdit();
+                }
               },
               onBlur: saveEdit,
               className: "h-7 text-sm"
@@ -2537,28 +2574,48 @@ var Sidebar2 = ({
               /* @__PURE__ */ jsx18(MoreHorizontal, {}),
               /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "More" })
             ] }) }),
-            /* @__PURE__ */ jsxs10(DropdownMenuContent, { className: "w-48", side: "right", align: "start", children: [
-              /* @__PURE__ */ jsxs10(DropdownMenuItem, { onClick: () => startEditing(thread), children: [
-                /* @__PURE__ */ jsx18(Edit2, { className: "mr-2 h-4 w-4" }),
-                /* @__PURE__ */ jsx18("span", { children: config.labels?.renameThread || "Rename" })
-              ] }),
-              /* @__PURE__ */ jsxs10(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__ */ jsxs10(
-                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" })
-                  ]
-                }
-              )
-            ] })
+            /* @__PURE__ */ jsxs10(
+              DropdownMenuContent,
+              {
+                className: "w-48",
+                side: "right",
+                align: "start",
+                children: [
+                  /* @__PURE__ */ jsxs10(
+                    DropdownMenuItem,
+                    {
+                      onClick: () => startEditing(thread),
+                      children: [
+                        /* @__PURE__ */ jsx18(Edit2, { className: "mr-2 h-4 w-4" }),
+                        /* @__PURE__ */ jsx18("span", { children: config.labels?.renameThread || "Rename" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs10(
+                    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__ */ jsxs10(
+                    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))
@@ -2571,32 +2628,40 @@ var Sidebar2 = ({
         callbacks: userMenuCallbacks,
         currentTheme,
         showThemeOptions,
+        sections: userMenuSections,
         additionalItems: userMenuAdditionalItems
       }
     ) }),
     /* @__PURE__ */ jsx18(SidebarRail, {}),
-    deleteThreadId && /* @__PURE__ */ jsx18(AlertDialog, { open: !!deleteThreadId, onOpenChange: () => setDeleteThreadId(null), children: /* @__PURE__ */ jsxs10(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs10(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx18(AlertDialogTitle, { children: config.labels?.deleteConfirmTitle || "Delete Conversation" }),
-        /* @__PURE__ */ jsx18(AlertDialogDescription, { children: config.labels?.deleteConfirmDescription || "Are you sure you want to delete this conversation? This action cannot be undone." })
-      ] }),
-      /* @__PURE__ */ jsxs10(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx18(AlertDialogCancel, { children: config.labels?.cancel || "Cancel" }),
-        /* @__PURE__ */ jsx18(
-          AlertDialogAction,
-          {
-            onClick: () => deleteThreadId && handleDeleteThread(deleteThreadId),
-            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-            children: config.labels?.deleteThread || "Delete"
-          }
-        )
-      ] })
-    ] }) })
+    deleteThreadId && /* @__PURE__ */ jsx18(
+      AlertDialog,
+      {
+        open: !!deleteThreadId,
+        onOpenChange: () => setDeleteThreadId(null),
+        children: /* @__PURE__ */ jsxs10(AlertDialogContent, { children: [
+          /* @__PURE__ */ jsxs10(AlertDialogHeader, { children: [
+            /* @__PURE__ */ jsx18(AlertDialogTitle, { children: config.labels?.deleteConfirmTitle || "Delete Conversation" }),
+            /* @__PURE__ */ jsx18(AlertDialogDescription, { children: config.labels?.deleteConfirmDescription || "Are you sure you want to delete this conversation? This action cannot be undone." })
+          ] }),
+          /* @__PURE__ */ jsxs10(AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsx18(AlertDialogCancel, { children: config.labels?.cancel || "Cancel" }),
+            /* @__PURE__ */ jsx18(
+              AlertDialogAction,
+              {
+                onClick: () => deleteThreadId && handleDeleteThread(deleteThreadId),
+                className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                children: config.labels?.deleteThread || "Delete"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
   ] });
 };
 
 // src/components/chat/ChatHeader.tsx
-import React10 from "react";
+import React11 from "react";
 import {
   Bot as Bot2,
   MoreVertical,
@@ -2608,12 +2673,12 @@ import {
   Moon as Moon2,
   Sun as Sun2,
   ChevronDown as ChevronDown3,
-  Check as Check3
+  Check as Check4
 } from "lucide-react";
 
 // src/components/chat/AgentSelectors.tsx
 import { memo as memo3, useMemo as useMemo4 } from "react";
-import { Check as Check2, ChevronDown as ChevronDown2, Users, AtSign, X as X2 } from "lucide-react";
+import { Check as Check3, ChevronDown as ChevronDown2, Users, AtSign, X as X2 } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var ParticipantsSelector = memo3(({
   agents,
@@ -2703,7 +2768,7 @@ var ParticipantsSelector = memo3(({
                 /* @__PURE__ */ jsx19("div", { className: "font-medium text-sm truncate", children: agent.name }),
                 agent.description && /* @__PURE__ */ jsx19("div", { className: "text-xs text-muted-foreground truncate", children: agent.description })
               ] }),
-              isSelected && /* @__PURE__ */ jsx19(Check2, { className: "h-4 w-4 text-primary shrink-0" })
+              isSelected && /* @__PURE__ */ jsx19(Check3, { className: "h-4 w-4 text-primary shrink-0" })
             ]
           },
           agent.id
@@ -2778,7 +2843,7 @@ var TargetAgentSelector = memo3(({
               /* @__PURE__ */ jsxs11("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsx19("span", { className: "font-medium text-sm", children: agent.name }),
-                  isSelected && /* @__PURE__ */ jsx19(Check2, { className: "h-4 w-4 text-primary shrink-0" })
+                  isSelected && /* @__PURE__ */ jsx19(Check3, { className: "h-4 w-4 text-primary shrink-0" })
                 ] }),
                 agent.description && /* @__PURE__ */ jsx19("p", { className: "text-xs text-muted-foreground mt-0.5 line-clamp-2", children: agent.description })
               ] })
@@ -2860,11 +2925,11 @@ var ChatHeader = ({
   onParticipantsChange,
   className = ""
 }) => {
-  const [isDarkMode, setIsDarkMode] = React10.useState(() => {
+  const [isDarkMode, setIsDarkMode] = React11.useState(() => {
     if (typeof window === "undefined") return false;
     return document.documentElement.classList.contains("dark");
   });
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     const observer = new MutationObserver(() => {
       setIsDarkMode(document.documentElement.classList.contains("dark"));
     });
@@ -2961,7 +3026,7 @@ var ChatHeader = ({
                     /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0", children: [
                       /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
                         /* @__PURE__ */ jsx20("span", { className: "font-medium text-sm", children: agent.name }),
-                        isSelected && /* @__PURE__ */ jsx20(Check3, { className: "h-4 w-4 text-primary shrink-0" })
+                        isSelected && /* @__PURE__ */ jsx20(Check4, { className: "h-4 w-4 text-primary shrink-0" })
                       ] }),
                       agent.description && /* @__PURE__ */ jsx20("p", { className: "text-xs text-muted-foreground mt-0.5 line-clamp-2", children: agent.description })
                     ] })
@@ -3038,7 +3103,7 @@ var ChatHeader = ({
 };
 
 // src/components/chat/ChatInput.tsx
-import React12, { useState as useState7, useRef as useRef5, useCallback as useCallback3, useEffect as useEffect10, memo as memo4 } from "react";
+import React13, { useState as useState7, useRef as useRef5, useCallback as useCallback3, useEffect as useEffect10, memo as memo4 } from "react";
 
 // src/components/chat/UserContext.tsx
 import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect9, useMemo as useMemo5, useState as useState6 } from "react";
@@ -3905,7 +3970,7 @@ var ChatInput = memo4(function ChatInput2({
   const voiceDraftRef = useRef5(null);
   const voiceAppendBaseRef = useRef5(null);
   const voiceAppendBaseDurationRef = useRef5(0);
-  const filteredMentionAgents = React12.useMemo(() => {
+  const filteredMentionAgents = React13.useMemo(() => {
     if (!activeMention || mentionAgents.length === 0) return [];
     const query = activeMention.query.trim().toLowerCase();
     const rank = (agent) => {
@@ -4605,10 +4670,10 @@ var ChatInput = memo4(function ChatInput2({
 import { useState as useState8 } from "react";
 
 // src/components/ui/scroll-area.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
-var ScrollArea = React13.forwardRef(({ className, children, viewportClassName, onScroll, onScrollCapture, ...props }, ref) => {
+var ScrollArea = React14.forwardRef(({ className, children, viewportClassName, onScroll, onScrollCapture, ...props }, ref) => {
   return /* @__PURE__ */ jsxs15(
     ScrollAreaPrimitive.Root,
     {
@@ -4690,7 +4755,7 @@ import {
   Heart,
   Bot as Bot3,
   Pencil,
-  Check as Check4,
+  Check as Check5,
   X as X5
 } from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -5004,7 +5069,7 @@ var UserProfile = ({
                               onClick: handleSaveEdit,
                               disabled: !editingMemoryContent.trim(),
                               children: [
-                                /* @__PURE__ */ jsx26(Check4, { className: "h-3.5 w-3.5 mr-1" }),
+                                /* @__PURE__ */ jsx26(Check5, { className: "h-3.5 w-3.5 mr-1" }),
                                 "Salvar"
                               ]
                             }
@@ -5067,7 +5132,14 @@ var UserProfile = ({
 };
 
 // src/components/chat/ChatUI.tsx
-import { Sparkles as Sparkles2, ArrowRight, MessageSquare, Lightbulb as Lightbulb2, Zap, HelpCircle } from "lucide-react";
+import {
+  ArrowRight,
+  HelpCircle,
+  Lightbulb as Lightbulb2,
+  MessageSquare,
+  Sparkles as Sparkles2,
+  Zap
+} from "lucide-react";
 import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 function getMessageSpeakerKey(message) {
   if (!message) return null;
@@ -5081,7 +5153,9 @@ function getMessageSpeakerKey(message) {
 }
 function getAssistantSpeakerTokens(message) {
   if (!message || message.role !== "assistant") return [];
-  const rawTokens = [message.senderAgentId, message.senderName].filter((value) => typeof value === "string" && value.trim().length > 0).map((value) => value.trim().toLowerCase());
+  const rawTokens = [message.senderAgentId, message.senderName].filter(
+    (value) => typeof value === "string" && value.trim().length > 0
+  ).map((value) => value.trim().toLowerCase());
   if (rawTokens.length > 0) {
     return Array.from(new Set(rawTokens));
   }
@@ -5115,7 +5189,9 @@ var mergeReasoning = (activities) => {
   return segments.filter((segment, index) => index === 0 || segment !== segments[index - 1]).join("\n\n");
 };
 var mergeGroupActivity = (messages) => {
-  const activities = messages.map((message) => message.activity).filter((activity) => Boolean(activity));
+  const activities = messages.map((message) => message.activity).filter(
+    (activity) => Boolean(activity)
+  );
   if (activities.length === 0) return void 0;
   const lastActivity = activities[activities.length - 1];
   const mergedReasoning = mergeReasoning(activities);
@@ -5179,6 +5255,7 @@ var ChatUI = ({
   currentThreadId = null,
   config: userConfig,
   sidebar: _sidebar,
+  userMenuSections,
   userMenuAdditionalItems,
   isGenerating = false,
   isMessagesLoading = false,
@@ -5267,7 +5344,9 @@ var ChatUI = ({
   }, [attachments]);
   const [isCustomMounted, setIsCustomMounted] = useState9(false);
   const [isCustomVisible, setIsCustomVisible] = useState9(false);
-  const groupedMessages = useMemo6(() => groupMessagesForRender(messages), [messages]);
+  const groupedMessages = useMemo6(() => groupMessagesForRender(messages), [
+    messages
+  ]);
   const virtualizer = useVirtualizer({
     count: groupedMessages.length,
     getScrollElement: () => scrollAreaRef.current,
@@ -5320,7 +5399,9 @@ var ChatUI = ({
     if (wasEmpty) {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          virtualizer.scrollToIndex(groupedMessages.length - 1, { align: "end" });
+          virtualizer.scrollToIndex(groupedMessages.length - 1, {
+            align: "end"
+          });
         });
       });
       return;
@@ -5378,12 +5459,19 @@ var ChatUI = ({
       messageCount: groupedMessages.length
     } : null;
     onLoadOlderMessages();
-  }, [groupedMessages, hasMoreMessagesBefore, isLoadingOlderMessages, onLoadOlderMessages]);
+  }, [
+    groupedMessages,
+    hasMoreMessagesBefore,
+    isLoadingOlderMessages,
+    onLoadOlderMessages
+  ]);
   useEffect11(() => {
     const validMessageIds = new Set(groupedMessages.map((group) => group.id));
     setExpandedMessageIds((prev) => {
       const activeIds = Object.keys(prev);
-      const staleIds = activeIds.filter((messageId) => !validMessageIds.has(messageId));
+      const staleIds = activeIds.filter(
+        (messageId) => !validMessageIds.has(messageId)
+      );
       if (staleIds.length === 0) {
         return prev;
       }
@@ -5408,7 +5496,11 @@ var ChatUI = ({
   }, [hasMoreMessagesBefore, isLoadingOlderMessages, requestOlderMessages]);
   const handleSendMessage = useCallback4((content, messageAttachments = []) => {
     if (!content.trim() && messageAttachments.length === 0) return;
-    callbacks.onSendMessage?.(content, messageAttachments, createStateCallback());
+    callbacks.onSendMessage?.(
+      content,
+      messageAttachments,
+      createStateCallback()
+    );
     if (initialInputApplied.current && !initialInputConsumedRef.current) {
       initialInputConsumedRef.current = true;
       onInitialInputConsumed?.();
@@ -5420,7 +5512,11 @@ var ChatUI = ({
     const { action, messageId, content } = event;
     switch (action) {
       case "copy":
-        callbacks.onCopyMessage?.(messageId, content || "", createStateCallback());
+        callbacks.onCopyMessage?.(
+          messageId,
+          content || "",
+          createStateCallback()
+        );
         break;
       case "edit":
         if (content) {
@@ -5454,9 +5550,12 @@ var ChatUI = ({
   const handleSelectThread = useCallback4((threadId) => {
     callbacks.onSelectThread?.(threadId, createStateCallback());
   }, [callbacks, createStateCallback]);
-  const handleRenameThread = useCallback4((threadId, newTitle) => {
-    callbacks.onRenameThread?.(threadId, newTitle, 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]);
@@ -5484,7 +5583,12 @@ var ChatUI = ({
     onOpenSettings: callbacks.onOpenSettings,
     onThemeChange: callbacks.onThemeChange,
     onLogout: callbacks.onLogout
-  }), [handleViewProfile, callbacks.onOpenSettings, callbacks.onThemeChange, callbacks.onLogout]);
+  }), [
+    handleViewProfile,
+    callbacks.onOpenSettings,
+    callbacks.onThemeChange,
+    callbacks.onLogout
+  ]);
   const renderCustomComponent = useCallback4(() => {
     const component = config?.customComponent?.component;
     if (!component) return null;
@@ -5525,19 +5629,25 @@ var ChatUI = ({
     const items = messageSuggestions?.[messageId];
     if (!items || items.length === 0) return null;
     const inlineSuggestionOffsetClass = config.ui.showAvatars ? config.ui.compactMode ? "ml-9" : "ml-11" : "";
-    return /* @__PURE__ */ jsx27("div", { className: `flex flex-wrap gap-2 mt-2 ${inlineSuggestionOffsetClass}`, children: items.map((suggestion, index) => /* @__PURE__ */ jsxs17(
-      "button",
+    return /* @__PURE__ */ jsx27(
+      "div",
       {
-        type: "button",
-        onClick: () => handleSendMessage(suggestion),
-        className: "group inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border border-border bg-background hover:bg-accent hover:border-accent-foreground/20 transition-all duration-150 text-foreground/80 hover:text-foreground",
-        children: [
-          /* @__PURE__ */ jsx27(Sparkles2, { className: "h-3 w-3 text-primary opacity-70 group-hover:opacity-100" }),
-          /* @__PURE__ */ jsx27("span", { className: "max-w-[200px] truncate", children: suggestion })
-        ]
-      },
-      `${messageId}-suggestion-${index}`
-    )) });
+        className: `flex flex-wrap gap-2 mt-2 ${inlineSuggestionOffsetClass}`,
+        children: items.map((suggestion, index) => /* @__PURE__ */ jsxs17(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleSendMessage(suggestion),
+            className: "group inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border border-border bg-background hover:bg-accent hover:border-accent-foreground/20 transition-all duration-150 text-foreground/80 hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx27(Sparkles2, { className: "h-3 w-3 text-primary opacity-70 group-hover:opacity-100" }),
+              /* @__PURE__ */ jsx27("span", { className: "max-w-[200px] truncate", children: suggestion })
+            ]
+          },
+          `${messageId}-suggestion-${index}`
+        ))
+      }
+    );
   };
   const renderMessageLoadingSkeleton = () => /* @__PURE__ */ jsx27("div", { className: "space-y-6 py-2", children: [0, 1, 2, 3].map((index) => {
     const isUserRow = index % 2 === 1;
@@ -5612,202 +5722,229 @@ var ChatUI = ({
   const shouldShowAgentSelector = Boolean(
     config.agentSelector?.enabled && agentOptions.length > 0 && (!config.agentSelector?.hideIfSingle || agentOptions.length > 1) && (isMultiAgentMode ? onParticipantsChange : onSelectAgent)
   );
-  return /* @__PURE__ */ jsx27(TooltipProvider, { children: /* @__PURE__ */ jsx27(SidebarProvider, { defaultOpen: true, children: /* @__PURE__ */ jsxs17("div", { className: `flex h-[100svh] md:h-screen bg-background w-full overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsx27(
-      Sidebar2,
-      {
-        threads,
-        currentThreadId: state.selectedThreadId,
-        config,
-        onCreateThread: handleCreateThread,
-        onSelectThread: handleSelectThread,
-        onRenameThread: handleRenameThread,
-        onDeleteThread: handleDeleteThread,
-        onArchiveThread: handleArchiveThread,
-        user: sidebarUser,
-        userMenuCallbacks: sidebarUserMenuCallbacks,
-        currentTheme: config.ui.theme === "auto" ? "system" : config.ui.theme,
-        showThemeOptions: !!callbacks.onThemeChange,
-        userMenuAdditionalItems
-      }
-    ),
-    /* @__PURE__ */ jsx27(SidebarInset, { children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col h-full min-h-0", children: [
-      /* @__PURE__ */ jsx27(
-        ChatHeader,
-        {
-          config,
-          currentThreadTitle: threads.find((t) => t.id === state.selectedThreadId)?.title,
-          isMobile,
-          onCustomComponentToggle: handleCustomComponentToggle,
-          onNewThread: handleCreateThread,
-          showCustomComponentButton: !!config?.customComponent?.component,
-          showAgentSelector: shouldShowAgentSelector,
-          isMultiAgentMode,
-          agentOptions,
-          selectedAgentId,
-          onSelectAgent,
-          participantIds,
-          onParticipantsChange
-        }
-      ),
-      /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-row min-h-0 overflow-hidden", children: [
-        /* @__PURE__ */ jsxs17("div", { className: "flex-1 flex flex-col min-h-0", children: [
+  return /* @__PURE__ */ jsx27(TooltipProvider, { children: /* @__PURE__ */ jsx27(SidebarProvider, { defaultOpen: true, children: /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      className: `flex h-[100svh] md:h-screen bg-background w-full overflow-hidden ${className}`,
+      children: [
+        /* @__PURE__ */ jsx27(
+          Sidebar2,
+          {
+            threads,
+            currentThreadId: state.selectedThreadId,
+            config,
+            onCreateThread: handleCreateThread,
+            onSelectThread: handleSelectThread,
+            onRenameThread: handleRenameThread,
+            onDeleteThread: handleDeleteThread,
+            onArchiveThread: handleArchiveThread,
+            user: sidebarUser,
+            userMenuCallbacks: sidebarUserMenuCallbacks,
+            currentTheme: config.ui.theme === "auto" ? "system" : config.ui.theme,
+            showThemeOptions: !!callbacks.onThemeChange,
+            userMenuSections,
+            userMenuAdditionalItems
+          }
+        ),
+        /* @__PURE__ */ jsx27(SidebarInset, { children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col h-full min-h-0", children: [
           /* @__PURE__ */ jsx27(
-            ScrollArea,
+            ChatHeader,
             {
-              ref: scrollAreaRef,
-              className: "flex-1 min-h-0",
-              viewportClassName: "p-4 overscroll-contain",
-              onScrollCapture: handleScroll,
-              style: { contain: "strict" },
-              children: /* @__PURE__ */ jsxs17("div", { className: "max-w-4xl mx-auto pb-4", children: [
-                groupedMessages.length > 0 && /* @__PURE__ */ jsx27("div", { className: "flex justify-center py-2", children: isLoadingOlderMessages ? /* @__PURE__ */ jsx27("span", { className: "text-xs text-muted-foreground", children: config.labels.loadingOlderMessages }) : hasMoreMessagesBefore ? /* @__PURE__ */ jsx27(
-                  "button",
+              config,
+              currentThreadTitle: threads.find(
+                (t) => t.id === state.selectedThreadId
+              )?.title,
+              isMobile,
+              onCustomComponentToggle: handleCustomComponentToggle,
+              onNewThread: handleCreateThread,
+              showCustomComponentButton: !!config?.customComponent?.component,
+              showAgentSelector: shouldShowAgentSelector,
+              isMultiAgentMode,
+              agentOptions,
+              selectedAgentId,
+              onSelectAgent,
+              participantIds,
+              onParticipantsChange
+            }
+          ),
+          /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-row min-h-0 overflow-hidden", children: [
+            /* @__PURE__ */ jsxs17("div", { className: "flex-1 flex flex-col min-h-0", children: [
+              /* @__PURE__ */ jsx27(
+                ScrollArea,
+                {
+                  ref: scrollAreaRef,
+                  className: "flex-1 min-h-0",
+                  viewportClassName: "p-4 overscroll-contain",
+                  onScrollCapture: handleScroll,
+                  style: { contain: "strict" },
+                  children: /* @__PURE__ */ jsxs17("div", { className: "max-w-4xl mx-auto pb-4", children: [
+                    groupedMessages.length > 0 && /* @__PURE__ */ jsx27("div", { className: "flex justify-center py-2", children: isLoadingOlderMessages ? /* @__PURE__ */ jsx27("span", { className: "text-xs text-muted-foreground", children: config.labels.loadingOlderMessages }) : hasMoreMessagesBefore ? /* @__PURE__ */ jsx27(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: requestOlderMessages,
+                        className: "text-xs text-muted-foreground transition-colors hover:text-foreground",
+                        children: config.labels.loadOlderMessages
+                      }
+                    ) : null }),
+                    isMessagesLoading ? renderMessageLoadingSkeleton() : groupedMessages.length === 0 ? renderSuggestions() : /* @__PURE__ */ jsx27(
+                      "div",
+                      {
+                        style: {
+                          height: `${virtualizer.getTotalSize()}px`,
+                          width: "100%",
+                          position: "relative"
+                        },
+                        children: virtualizer.getVirtualItems().map((virtualRow) => {
+                          const group = groupedMessages[virtualRow.index];
+                          const message = group.message;
+                          return /* @__PURE__ */ jsx27(
+                            "div",
+                            {
+                              "data-index": virtualRow.index,
+                              ref: virtualizer.measureElement,
+                              style: {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                transform: `translateY(${virtualRow.start}px)`
+                              },
+                              children: /* @__PURE__ */ jsxs17(
+                                "div",
+                                {
+                                  className: virtualRow.index === 0 ? "" : "pt-4",
+                                  children: [
+                                    /* @__PURE__ */ jsx27(
+                                      Message,
+                                      {
+                                        message,
+                                        ...messageProps,
+                                        isExpanded: Boolean(
+                                          expandedMessageIds[message.id]
+                                        )
+                                      }
+                                    ),
+                                    message.role === "assistant" && renderInlineSuggestions(
+                                      group.suggestionMessageId
+                                    )
+                                  ]
+                                }
+                              )
+                            },
+                            group.id
+                          );
+                        })
+                      }
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs17("div", { className: "bg-background pb-[env(safe-area-inset-bottom)]", children: [
+                isMultiAgentMode && shouldShowAgentSelector && onTargetAgentChange && /* @__PURE__ */ jsx27("div", { className: "px-4 pt-1", children: /* @__PURE__ */ jsx27(
+                  TargetAgentSelector,
                   {
-                    type: "button",
-                    onClick: requestOlderMessages,
-                    className: "text-xs text-muted-foreground transition-colors hover:text-foreground",
-                    children: config.labels.loadOlderMessages
+                    agents: participantIds && participantIds.length > 0 ? agentOptions.filter(
+                      (a) => participantIds.includes(a.id)
+                    ) : agentOptions,
+                    targetAgentId,
+                    onTargetChange: onTargetAgentChange,
+                    placeholder: config.agentSelector?.label || "Select agent",
+                    disabled: isGenerating
                   }
-                ) : null }),
-                isMessagesLoading ? renderMessageLoadingSkeleton() : groupedMessages.length === 0 ? renderSuggestions() : /* @__PURE__ */ jsx27(
-                  "div",
+                ) }),
+                /* @__PURE__ */ jsx27(
+                  ChatInput,
                   {
-                    style: {
-                      height: `${virtualizer.getTotalSize()}px`,
-                      width: "100%",
-                      position: "relative"
+                    value: inputValue,
+                    onChange: (value) => {
+                      setInputValue(value);
+                      if (initialInputApplied.current && !initialInputConsumedRef.current) {
+                        initialInputConsumedRef.current = true;
+                        onInitialInputConsumed?.();
+                      }
                     },
-                    children: virtualizer.getVirtualItems().map((virtualRow) => {
-                      const group = groupedMessages[virtualRow.index];
-                      const message = group.message;
-                      return /* @__PURE__ */ jsx27(
-                        "div",
-                        {
-                          "data-index": virtualRow.index,
-                          ref: virtualizer.measureElement,
-                          style: {
-                            position: "absolute",
-                            top: 0,
-                            left: 0,
-                            width: "100%",
-                            transform: `translateY(${virtualRow.start}px)`
-                          },
-                          children: /* @__PURE__ */ jsxs17("div", { className: virtualRow.index === 0 ? "" : "pt-4", children: [
-                            /* @__PURE__ */ jsx27(
-                              Message,
-                              {
-                                message,
-                                ...messageProps,
-                                isExpanded: Boolean(expandedMessageIds[message.id])
-                              }
-                            ),
-                            message.role === "assistant" && renderInlineSuggestions(group.suggestionMessageId)
-                          ] })
-                        },
-                        group.id
-                      );
-                    })
+                    onSubmit: handleSendMessage,
+                    attachments,
+                    onAttachmentsChange: setAttachments,
+                    placeholder: config.labels.inputPlaceholder,
+                    disabled: false,
+                    isGenerating,
+                    onStopGeneration: callbacks.onStopGeneration,
+                    enableFileUpload: config.features.enableFileUpload,
+                    enableAudioRecording: config.features.enableAudioRecording,
+                    maxAttachments: config.features.maxAttachments,
+                    maxFileSize: config.features.maxFileSize,
+                    config,
+                    mentionAgents: participantIds && participantIds.length > 0 ? agentOptions.filter(
+                      (a) => participantIds.includes(a.id)
+                    ) : agentOptions,
+                    onTargetAgentChange
                   }
                 )
               ] })
-            }
-          ),
-          /* @__PURE__ */ jsxs17("div", { className: "bg-background pb-[env(safe-area-inset-bottom)]", children: [
-            isMultiAgentMode && shouldShowAgentSelector && onTargetAgentChange && /* @__PURE__ */ jsx27("div", { className: "px-4 pt-1", children: /* @__PURE__ */ jsx27(
-              TargetAgentSelector,
-              {
-                agents: participantIds && participantIds.length > 0 ? agentOptions.filter((a) => participantIds.includes(a.id)) : agentOptions,
-                targetAgentId,
-                onTargetChange: onTargetAgentChange,
-                placeholder: config.agentSelector?.label || "Select agent",
-                disabled: isGenerating
-              }
-            ) }),
-            /* @__PURE__ */ jsx27(
-              ChatInput,
+            ] }),
+            config?.customComponent?.component && !isMobile && /* @__PURE__ */ jsx27(
+              "div",
               {
-                value: inputValue,
-                onChange: (value) => {
-                  setInputValue(value);
-                  if (initialInputApplied.current && !initialInputConsumedRef.current) {
-                    initialInputConsumedRef.current = true;
-                    onInitialInputConsumed?.();
-                  }
+                className: "h-full transition-all duration-300 ease-in-out overflow-hidden",
+                style: {
+                  width: state.showSidebar ? config.customComponent.panelWidth ?? 320 : 0
                 },
-                onSubmit: handleSendMessage,
-                attachments,
-                onAttachmentsChange: setAttachments,
-                placeholder: config.labels.inputPlaceholder,
-                disabled: false,
-                isGenerating,
-                onStopGeneration: callbacks.onStopGeneration,
-                enableFileUpload: config.features.enableFileUpload,
-                enableAudioRecording: config.features.enableAudioRecording,
-                maxAttachments: config.features.maxAttachments,
-                maxFileSize: config.features.maxFileSize,
-                config,
-                mentionAgents: participantIds && participantIds.length > 0 ? agentOptions.filter((a) => participantIds.includes(a.id)) : agentOptions,
-                onTargetAgentChange
+                children: state.showSidebar && /* @__PURE__ */ jsx27(
+                  "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()
+                  }
+                )
               }
             )
           ] })
+        ] }) }),
+        isCustomMounted && config.customComponent?.component && isMobile && /* @__PURE__ */ jsxs17("div", { className: "fixed inset-0 z-50", children: [
+          /* @__PURE__ */ jsx27(
+            "div",
+            {
+              className: `absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out ${isCustomVisible ? "opacity-100" : "opacity-0"}`,
+              style: { willChange: "opacity" },
+              onClick: closeSidebar
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            "div",
+            {
+              className: `absolute top-0 right-0 h-full w-full bg-background transform-gpu transition-transform duration-200 ease-out ${isCustomVisible ? "translate-x-0" : "translate-x-full"}`,
+              style: { willChange: "transform" },
+              children: /* @__PURE__ */ jsx27("div", { className: "h-full overflow-hidden", children: renderCustomComponent() })
+            }
+          )
         ] }),
-        config?.customComponent?.component && !isMobile && /* @__PURE__ */ jsx27(
-          "div",
+        isUserProfileOpen && /* @__PURE__ */ jsx27(
+          UserProfile,
           {
-            className: "h-full transition-all duration-300 ease-in-out overflow-hidden",
-            style: { width: state.showSidebar ? config.customComponent.panelWidth ?? 320 : 0 },
-            children: state.showSidebar && /* @__PURE__ */ jsx27(
-              "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()
-              }
-            )
+            isOpen: isUserProfileOpen,
+            onClose: () => setIsUserProfileOpen(false),
+            user: user ? {
+              id: user.id,
+              name: user.name,
+              email: user.email,
+              avatar: user.avatar
+            } : null,
+            customFields: userContext?.customFields,
+            memories: userContext?.memories?.items,
+            onLogout: callbacks.onLogout,
+            onAddMemory,
+            onUpdateMemory,
+            onDeleteMemory
           }
         )
-      ] })
-    ] }) }),
-    isCustomMounted && config.customComponent?.component && isMobile && /* @__PURE__ */ jsxs17("div", { className: "fixed inset-0 z-50", children: [
-      /* @__PURE__ */ jsx27(
-        "div",
-        {
-          className: `absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out ${isCustomVisible ? "opacity-100" : "opacity-0"}`,
-          style: { willChange: "opacity" },
-          onClick: closeSidebar
-        }
-      ),
-      /* @__PURE__ */ jsx27(
-        "div",
-        {
-          className: `absolute top-0 right-0 h-full w-full bg-background transform-gpu transition-transform duration-200 ease-out ${isCustomVisible ? "translate-x-0" : "translate-x-full"}`,
-          style: { willChange: "transform" },
-          children: /* @__PURE__ */ jsx27("div", { className: "h-full overflow-hidden", children: renderCustomComponent() })
-        }
-      )
-    ] }),
-    isUserProfileOpen && /* @__PURE__ */ jsx27(
-      UserProfile,
-      {
-        isOpen: isUserProfileOpen,
-        onClose: () => setIsUserProfileOpen(false),
-        user: user ? {
-          id: user.id,
-          name: user.name,
-          email: user.email,
-          avatar: user.avatar
-        } : null,
-        customFields: userContext?.customFields,
-        memories: userContext?.memories?.items,
-        onLogout: callbacks.onLogout,
-        onAddMemory,
-        onUpdateMemory,
-        onDeleteMemory
-      }
-    )
-  ] }) }) });
+      ]
+    }
+  ) }) });
 };
 export {
   AssistantActivity,