@copilotz/chat-ui 0.6.6 → 0.6.8

package/dist/index.cjs

@@ -40,7 +40,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/chat/ChatUI.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/config/chatConfig.ts
@@ -786,8 +786,7 @@ var StreamingText = (0, import_react2.memo)(function StreamingText2({
   className = "",
   renderMarkdown = true,
   markdown,
-  plainTextChunkChars = 12e3,
-  contentStyle
+  plainTextChunkChars = 12e3
 }) {
   const hasContent = content.trim().length > 0;
   const enableSyntaxHighlight = renderMarkdown && !isStreaming && hasCodeBlocks(content);
@@ -817,7 +816,6 @@ var StreamingText = (0, import_react2.memo)(function StreamingText2({
       LongContentShell,
       {
         className: `prose prose-sm max-w-none dark:prose-invert break-words ${className}`.trim(),
-        style: contentStyle,
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           import_react_markdown.default,
           {
@@ -833,8 +831,7 @@ var StreamingText = (0, import_react2.memo)(function StreamingText2({
       {
         content,
         className,
-        chunkSize: plainTextChunkChars,
-        style: contentStyle
+        chunkSize: plainTextChunkChars
       }
     ) : null,
     isStreaming && hasContent && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inline-block w-2 h-4 bg-primary animate-pulse ml-1" })
@@ -984,11 +981,6 @@ var Message = (0, import_react2.memo)(({
   const isCollapsed = canCollapseMessage && !isExpanded;
   const contentToRender = isCollapsed ? getCollapsedPreview(message.content, normalizedPreviewChars, previewOverride) : message.content;
   const shouldRenderMarkdown = !isCollapsed && (!messageIsUser || renderUserMarkdown);
-  const shouldApplyLargeContentContainment = !isCollapsed && message.content.length > normalizedChunkChars;
-  const contentStyle = shouldApplyLargeContentContainment ? {
-    contentVisibility: "auto",
-    containIntrinsicSize: "1px 400px"
-  } : void 0;
   const horizontalOffsetClass = showAvatar ? messageIsUser ? compactMode ? "mr-9" : "mr-11" : compactMode ? "ml-9" : "ml-11" : "";
   const handleCopy = async () => {
     try {
@@ -1099,8 +1091,7 @@ var Message = (0, import_react2.memo)(({
                 isStreaming: message.isStreaming,
                 renderMarkdown: shouldRenderMarkdown,
                 markdown,
-                plainTextChunkChars: normalizedChunkChars,
-                contentStyle
+                plainTextChunkChars: normalizedChunkChars
               }
             ),
             canCollapseMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1165,7 +1156,7 @@ var Message = (0, import_react2.memo)(({
 }, arePropsEqual);
 
 // src/components/chat/Sidebar.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/components/ui/input.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -2194,6 +2185,7 @@ function DropdownMenuSeparator({
 var import_lucide_react8 = require("lucide-react");
 
 // src/components/chat/UserMenu.tsx
+var import_react3 = __toESM(require("react"), 1);
 var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var getInitials = (name, email) => {
@@ -2215,6 +2207,7 @@ var UserMenu = ({
   callbacks,
   currentTheme = "system",
   showThemeOptions = true,
+  sections = [],
   additionalItems
 }) => {
   const { isMobile } = useSidebar();
@@ -2278,6 +2271,27 @@ var UserMenu = ({
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: labels.settings })
           ] }),
           additionalItems,
+          sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react3.default.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuSeparator, {}),
+            section.label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuLabel, { className: "px-2 py-2", children: section.label }),
+            section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              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__ */ (0, import_jsx_runtime17.jsx)("span", { className: "mr-2 h-4 w-4 shrink-0", children: item.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "flex-1", children: item.label }),
+                  item.checked && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Check, { className: "ml-2 h-4 w-4 text-primary" })
+                ]
+              },
+              item.id
+            ))
+          ] }, section.id)),
           showThemeOptions && callbacks?.onThemeChange && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuSeparator, {}),
             /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
@@ -2337,8 +2351,8 @@ var UserMenu = ({
 // src/components/chat/Sidebar.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var CreateThreadDialog = ({ config, onCreateThread, trigger }) => {
-  const [title, setTitle] = (0, import_react3.useState)("");
-  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const [title, setTitle] = (0, import_react4.useState)("");
+  const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
   const handleCreate = () => {
     onCreateThread(title.trim() || void 0);
     setTitle("");
@@ -2389,17 +2403,18 @@ var Sidebar2 = ({
   userMenuCallbacks,
   currentTheme,
   showThemeOptions = true,
+  userMenuSections,
   userMenuAdditionalItems,
   ...props
 }) => {
-  const [searchQuery, setSearchQuery] = (0, import_react3.useState)("");
-  const [showArchived, setShowArchived] = (0, import_react3.useState)(false);
-  const [deleteThreadId, setDeleteThreadId] = (0, import_react3.useState)(null);
-  const [editingThreadId, setEditingThreadId] = (0, import_react3.useState)(null);
-  const [editTitle, setEditTitle] = (0, import_react3.useState)("");
-  const inputRef = (0, import_react3.useRef)(null);
+  const [searchQuery, setSearchQuery] = (0, import_react4.useState)("");
+  const [showArchived, setShowArchived] = (0, import_react4.useState)(false);
+  const [deleteThreadId, setDeleteThreadId] = (0, import_react4.useState)(null);
+  const [editingThreadId, setEditingThreadId] = (0, import_react4.useState)(null);
+  const [editTitle, setEditTitle] = (0, import_react4.useState)("");
+  const inputRef = (0, import_react4.useRef)(null);
   const { setOpen } = useSidebar();
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (editingThreadId && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -2407,7 +2422,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;
   });
@@ -2531,8 +2548,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"
@@ -2555,28 +2576,48 @@ var Sidebar2 = ({
               /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.MoreHorizontal, {}),
               /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sr-only", children: "More" })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenuContent, { className: "w-48", side: "right", align: "start", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenuItem, { onClick: () => startEditing(thread), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Edit2, { className: "mr-2 h-4 w-4" }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: config.labels?.renameThread || "Rename" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenuItem, { onClick: () => onArchiveThread?.(thread.id), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Archive, { className: "mr-2 h-4 w-4" }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: thread.isArchived ? config.labels?.unarchiveThread || "Unarchive" : config.labels?.archiveThread || "Archive" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                DropdownMenuItem,
-                {
-                  onClick: () => setDeleteThreadId(thread.id),
-                  className: "text-destructive focus:text-destructive",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Trash2, { className: "mr-2 h-4 w-4" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: config.labels?.deleteThread || "Delete" })
-                  ]
-                }
-              )
-            ] })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              DropdownMenuContent,
+              {
+                className: "w-48",
+                side: "right",
+                align: "start",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                    DropdownMenuItem,
+                    {
+                      onClick: () => startEditing(thread),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Edit2, { className: "mr-2 h-4 w-4" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: config.labels?.renameThread || "Rename" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                    DropdownMenuItem,
+                    {
+                      onClick: () => onArchiveThread?.(thread.id),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Archive, { className: "mr-2 h-4 w-4" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: thread.isArchived ? config.labels?.unarchiveThread || "Unarchive" : config.labels?.archiveThread || "Archive" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuSeparator, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                    DropdownMenuItem,
+                    {
+                      onClick: () => setDeleteThreadId(thread.id),
+                      className: "text-destructive focus:text-destructive",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Trash2, { className: "mr-2 h-4 w-4" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: config.labels?.deleteThread || "Delete" })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
           ] })
         ] }, thread.id)) }) })
       ] }, group))
@@ -2589,39 +2630,47 @@ var Sidebar2 = ({
         callbacks: userMenuCallbacks,
         currentTheme,
         showThemeOptions,
+        sections: userMenuSections,
         additionalItems: userMenuAdditionalItems
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarRail, {}),
-    deleteThreadId && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialog, { open: !!deleteThreadId, onOpenChange: () => setDeleteThreadId(null), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogTitle, { children: config.labels?.deleteConfirmTitle || "Delete Conversation" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogDescription, { children: config.labels?.deleteConfirmDescription || "Are you sure you want to delete this conversation? This action cannot be undone." })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogFooter, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogCancel, { children: config.labels?.cancel || "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          AlertDialogAction,
-          {
-            onClick: () => deleteThreadId && handleDeleteThread(deleteThreadId),
-            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-            children: config.labels?.deleteThread || "Delete"
-          }
-        )
-      ] })
-    ] }) })
+    deleteThreadId && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      AlertDialog,
+      {
+        open: !!deleteThreadId,
+        onOpenChange: () => setDeleteThreadId(null),
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogContent, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogHeader, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogTitle, { children: config.labels?.deleteConfirmTitle || "Delete Conversation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogDescription, { children: config.labels?.deleteConfirmDescription || "Are you sure you want to delete this conversation? This action cannot be undone." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogFooter, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogCancel, { children: config.labels?.cancel || "Cancel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              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
-var import_react5 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 var import_lucide_react10 = require("lucide-react");
 
 // src/components/chat/AgentSelectors.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var ParticipantsSelector = (0, import_react4.memo)(({
+var ParticipantsSelector = (0, import_react5.memo)(({
   agents,
   participantIds,
   onParticipantsChange,
@@ -2629,8 +2678,8 @@ var ParticipantsSelector = (0, import_react4.memo)(({
   maxVisible = 3,
   disabled = false
 }) => {
-  const agentsWithColors = (0, import_react4.useMemo)(() => assignAgentColors(agents), [agents]);
-  const selectedAgents = (0, import_react4.useMemo)(
+  const agentsWithColors = (0, import_react5.useMemo)(() => assignAgentColors(agents), [agents]);
+  const selectedAgents = (0, import_react5.useMemo)(
     () => agentsWithColors.filter((a) => participantIds.includes(a.id)),
     [agentsWithColors, participantIds]
   );
@@ -2719,7 +2768,7 @@ var ParticipantsSelector = (0, import_react4.memo)(({
   ] });
 });
 ParticipantsSelector.displayName = "ParticipantsSelector";
-var TargetAgentSelector = (0, import_react4.memo)(({
+var TargetAgentSelector = (0, import_react5.memo)(({
   agents,
   targetAgentId,
   onTargetChange,
@@ -2727,8 +2776,8 @@ var TargetAgentSelector = (0, import_react4.memo)(({
   placeholder = "Select agent",
   disabled = false
 }) => {
-  const agentsWithColors = (0, import_react4.useMemo)(() => assignAgentColors(agents), [agents]);
-  const selectedAgent = (0, import_react4.useMemo)(
+  const agentsWithColors = (0, import_react5.useMemo)(() => assignAgentColors(agents), [agents]);
+  const selectedAgent = (0, import_react5.useMemo)(
     () => agentsWithColors.find((a) => a.id === targetAgentId),
     [agentsWithColors, targetAgentId]
   );
@@ -2797,7 +2846,7 @@ var TargetAgentSelector = (0, import_react4.memo)(({
   ] });
 });
 TargetAgentSelector.displayName = "TargetAgentSelector";
-var AgentBadge = (0, import_react4.memo)(({
+var AgentBadge = (0, import_react5.memo)(({
   agent,
   onRemove,
   showRemove = false,
@@ -2866,11 +2915,11 @@ var ChatHeader = ({
   onParticipantsChange,
   className = ""
 }) => {
-  const [isDarkMode, setIsDarkMode] = import_react5.default.useState(() => {
+  const [isDarkMode, setIsDarkMode] = import_react6.default.useState(() => {
     if (typeof window === "undefined") return false;
     return document.documentElement.classList.contains("dark");
   });
-  import_react5.default.useEffect(() => {
+  import_react6.default.useEffect(() => {
     const observer = new MutationObserver(() => {
       setIsDarkMode(document.documentElement.classList.contains("dark"));
     });
@@ -3044,18 +3093,18 @@ var ChatHeader = ({
 };
 
 // src/components/chat/ChatInput.tsx
-var import_react7 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
 
 // src/components/chat/UserContext.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var Ctx = (0, import_react6.createContext)(void 0);
+var Ctx = (0, import_react7.createContext)(void 0);
 var ChatUserContextProvider = ({ children, initial }) => {
-  const [ctx, setCtx] = (0, import_react6.useState)(() => ({
+  const [ctx, setCtx] = (0, import_react7.useState)(() => ({
     updatedAt: Date.now(),
     ...initial ?? {}
   }));
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!initial) return;
     setCtx((prev) => {
       const keys = Object.keys(initial);
@@ -3064,13 +3113,13 @@ var ChatUserContextProvider = ({ children, initial }) => {
       return { ...prev, ...initial, updatedAt: Date.now() };
     });
   }, [initial]);
-  const setPartial = (0, import_react6.useCallback)((next) => {
+  const setPartial = (0, import_react7.useCallback)((next) => {
     setCtx((prev) => {
       const partial = typeof next === "function" ? next(prev) : next;
       return { ...prev, ...partial, updatedAt: Date.now() };
     });
   }, []);
-  const value = (0, import_react6.useMemo)(() => ({
+  const value = (0, import_react7.useMemo)(() => ({
     context: ctx,
     setContext: setPartial,
     resetContext: () => setCtx({ updatedAt: Date.now() })
@@ -3078,7 +3127,7 @@ var ChatUserContextProvider = ({ children, initial }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Ctx.Provider, { value, children });
 };
 function useChatUserContext() {
-  const v = (0, import_react6.useContext)(Ctx);
+  const v = (0, import_react7.useContext)(Ctx);
   if (!v) throw new Error("useChatUserContext must be used within ChatUserContextProvider");
   return v;
 }
@@ -3662,7 +3711,7 @@ function resolveTargetFromMentions(value, agents) {
   }
   return null;
 }
-var FileUploadItem = (0, import_react7.memo)(function FileUploadItem2({ file, progress, onCancel }) {
+var FileUploadItem = (0, import_react8.memo)(function FileUploadItem2({ file, progress, onCancel }) {
   const guessTypeFromName = (name) => {
     const ext = (name || "").split(".").pop()?.toLowerCase();
     switch (ext) {
@@ -3721,11 +3770,11 @@ var FileUploadItem = (0, import_react7.memo)(function FileUploadItem2({ file, pr
     )
   ] }) }) });
 });
-var AttachmentPreview = (0, import_react7.memo)(function AttachmentPreview2({ attachment, onRemove }) {
-  const [isPlaying, setIsPlaying] = (0, import_react7.useState)(false);
-  const [audioPlaybackSrc, setAudioPlaybackSrc] = (0, import_react7.useState)(attachment.dataUrl);
-  const audioRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+var AttachmentPreview = (0, import_react8.memo)(function AttachmentPreview2({ attachment, onRemove }) {
+  const [isPlaying, setIsPlaying] = (0, import_react8.useState)(false);
+  const [audioPlaybackSrc, setAudioPlaybackSrc] = (0, import_react8.useState)(attachment.dataUrl);
+  const audioRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     if (attachment.kind !== "audio" || !attachment.dataUrl.startsWith("data:")) {
       setAudioPlaybackSrc(attachment.dataUrl);
       return;
@@ -3850,7 +3899,7 @@ var resolveVoiceErrorMessage = (error, config) => {
 };
 var clearVoiceTranscript = () => ({});
 var resolveVoiceSegmentDuration = (segment) => segment.attachment.durationMs ?? 0;
-var ChatInput = (0, import_react7.memo)(function ChatInput2({
+var ChatInput = (0, import_react8.memo)(function ChatInput2({
   value,
   onChange,
   onSubmit,
@@ -3879,27 +3928,27 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
   const voiceTranscriptMode = config?.voiceCompose?.transcriptMode ?? "final-only";
   const voiceMaxRecordingMs = config?.voiceCompose?.maxRecordingMs;
   const { setContext } = useChatUserContext();
-  const [uploadProgress, setUploadProgress] = (0, import_react7.useState)(/* @__PURE__ */ new Map());
-  const [isVoiceComposerOpen, setIsVoiceComposerOpen] = (0, import_react7.useState)(
+  const [uploadProgress, setUploadProgress] = (0, import_react8.useState)(/* @__PURE__ */ new Map());
+  const [isVoiceComposerOpen, setIsVoiceComposerOpen] = (0, import_react8.useState)(
     () => enableAudioRecording && voiceDefaultMode === "voice"
   );
-  const [voiceState, setVoiceState] = (0, import_react7.useState)("idle");
-  const [voiceDraft, setVoiceDraft] = (0, import_react7.useState)(null);
-  const [voiceTranscript, setVoiceTranscript] = (0, import_react7.useState)(clearVoiceTranscript);
-  const [voiceDurationMs, setVoiceDurationMs] = (0, import_react7.useState)(0);
-  const [voiceAudioLevel, setVoiceAudioLevel] = (0, import_react7.useState)(0);
-  const [voiceCountdownMs, setVoiceCountdownMs] = (0, import_react7.useState)(0);
-  const [isVoiceAutoSendActive, setIsVoiceAutoSendActive] = (0, import_react7.useState)(false);
-  const [voiceError, setVoiceError] = (0, import_react7.useState)(null);
-  const [activeMention, setActiveMention] = (0, import_react7.useState)(null);
-  const [activeMentionIndex, setActiveMentionIndex] = (0, import_react7.useState)(0);
-  const textareaRef = (0, import_react7.useRef)(null);
-  const fileInputRef = (0, import_react7.useRef)(null);
-  const voiceProviderRef = (0, import_react7.useRef)(null);
-  const voiceDraftRef = (0, import_react7.useRef)(null);
-  const voiceAppendBaseRef = (0, import_react7.useRef)(null);
-  const voiceAppendBaseDurationRef = (0, import_react7.useRef)(0);
-  const filteredMentionAgents = import_react7.default.useMemo(() => {
+  const [voiceState, setVoiceState] = (0, import_react8.useState)("idle");
+  const [voiceDraft, setVoiceDraft] = (0, import_react8.useState)(null);
+  const [voiceTranscript, setVoiceTranscript] = (0, import_react8.useState)(clearVoiceTranscript);
+  const [voiceDurationMs, setVoiceDurationMs] = (0, import_react8.useState)(0);
+  const [voiceAudioLevel, setVoiceAudioLevel] = (0, import_react8.useState)(0);
+  const [voiceCountdownMs, setVoiceCountdownMs] = (0, import_react8.useState)(0);
+  const [isVoiceAutoSendActive, setIsVoiceAutoSendActive] = (0, import_react8.useState)(false);
+  const [voiceError, setVoiceError] = (0, import_react8.useState)(null);
+  const [activeMention, setActiveMention] = (0, import_react8.useState)(null);
+  const [activeMentionIndex, setActiveMentionIndex] = (0, import_react8.useState)(0);
+  const textareaRef = (0, import_react8.useRef)(null);
+  const fileInputRef = (0, import_react8.useRef)(null);
+  const voiceProviderRef = (0, import_react8.useRef)(null);
+  const voiceDraftRef = (0, import_react8.useRef)(null);
+  const voiceAppendBaseRef = (0, import_react8.useRef)(null);
+  const voiceAppendBaseDurationRef = (0, import_react8.useRef)(0);
+  const filteredMentionAgents = import_react8.default.useMemo(() => {
     if (!activeMention || mentionAgents.length === 0) return [];
     const query = activeMention.query.trim().toLowerCase();
     const rank = (agent) => {
@@ -3917,7 +3966,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
     }).slice(0, 6);
   }, [activeMention, mentionAgents]);
   const isMentionMenuOpen = filteredMentionAgents.length > 0;
-  const syncMentionState = (0, import_react7.useCallback)((nextValue, nextCaret) => {
+  const syncMentionState = (0, import_react8.useCallback)((nextValue, nextCaret) => {
     const caret = typeof nextCaret === "number" ? nextCaret : textareaRef.current?.selectionStart ?? nextValue.length;
     const nextMatch = getActiveMentionMatch(nextValue, caret);
     setActiveMention((prev) => {
@@ -3928,7 +3977,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
     });
     setActiveMentionIndex(0);
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     return () => {
       if (voiceProviderRef.current) {
         void voiceProviderRef.current.destroy();
@@ -3936,10 +3985,10 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
       }
     };
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     voiceDraftRef.current = voiceDraft;
   }, [voiceDraft]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isMentionMenuOpen) {
       setActiveMentionIndex(0);
       return;
@@ -3948,7 +3997,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
       (prev) => prev >= filteredMentionAgents.length ? 0 : prev
     );
   }, [filteredMentionAgents.length, isMentionMenuOpen]);
-  const selectMentionAgent = (0, import_react7.useCallback)((agent) => {
+  const selectMentionAgent = (0, import_react8.useCallback)((agent) => {
     if (!activeMention) return;
     const replacement = `@${agent.name} `;
     const nextValue = value.slice(0, activeMention.start) + replacement + value.slice(activeMention.end);
@@ -4086,7 +4135,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
     }
     e.target.value = "";
   };
-  const handleDrop = (0, import_react7.useCallback)(async (e) => {
+  const handleDrop = (0, import_react8.useCallback)(async (e) => {
     e.preventDefault();
     if (!enableFileUpload) return;
     const files = Array.from(e.dataTransfer.files);
@@ -4099,10 +4148,10 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
       }
     }
   }, [attachments, enableFileUpload, maxAttachments, onAttachmentsChange]);
-  const handleDragOver = (0, import_react7.useCallback)((e) => {
+  const handleDragOver = (0, import_react8.useCallback)((e) => {
     e.preventDefault();
   }, []);
-  const resetVoiceComposerState = (0, import_react7.useCallback)((nextState = "idle") => {
+  const resetVoiceComposerState = (0, import_react8.useCallback)((nextState = "idle") => {
     setVoiceState(nextState);
     setVoiceDraft(null);
     voiceDraftRef.current = null;
@@ -4115,11 +4164,11 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
     setIsVoiceAutoSendActive(false);
     setVoiceError(null);
   }, []);
-  const armVoiceDraftForAppend = (0, import_react7.useCallback)((segment) => {
+  const armVoiceDraftForAppend = (0, import_react8.useCallback)((segment) => {
     voiceAppendBaseRef.current = segment;
     voiceAppendBaseDurationRef.current = segment ? resolveVoiceSegmentDuration(segment) : 0;
   }, []);
-  const handleVoiceProviderStateChange = (0, import_react7.useCallback)((nextState) => {
+  const handleVoiceProviderStateChange = (0, import_react8.useCallback)((nextState) => {
     if (voiceReviewMode === "armed" && (nextState === "waiting_for_speech" || nextState === "listening")) {
       const currentDraft = voiceDraftRef.current;
       if (currentDraft) {
@@ -4132,7 +4181,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
     }
     setVoiceState(nextState);
   }, [armVoiceDraftForAppend, voiceAutoSendDelayMs, voiceReviewMode]);
-  const ensureVoiceProvider = (0, import_react7.useCallback)(async () => {
+  const ensureVoiceProvider = (0, import_react8.useCallback)(async () => {
     if (voiceProviderRef.current) {
       return voiceProviderRef.current;
     }
@@ -4219,7 +4268,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
     voiceProviderRef.current = provider;
     return provider;
   }, [armVoiceDraftForAppend, config, handleVoiceProviderStateChange, voiceAutoSendDelayMs, voiceMaxRecordingMs, voiceReviewMode]);
-  const closeVoiceComposer = (0, import_react7.useCallback)(async () => {
+  const closeVoiceComposer = (0, import_react8.useCallback)(async () => {
     voiceAppendBaseRef.current = null;
     voiceAppendBaseDurationRef.current = 0;
     setIsVoiceComposerOpen(false);
@@ -4235,7 +4284,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
       await voiceProviderRef.current.cancel();
     }
   }, []);
-  const startVoiceCapture = (0, import_react7.useCallback)(async (appendToDraft = false) => {
+  const startVoiceCapture = (0, import_react8.useCallback)(async (appendToDraft = false) => {
     if (disabled || isGenerating) {
       return;
     }
@@ -4284,7 +4333,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
       setVoiceState("error");
     }
   }, [disabled, isGenerating, ensureVoiceProvider, config]);
-  const stopVoiceCapture = (0, import_react7.useCallback)(async () => {
+  const stopVoiceCapture = (0, import_react8.useCallback)(async () => {
     if (!voiceProviderRef.current) return;
     try {
       await voiceProviderRef.current.stop();
@@ -4293,7 +4342,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
       setVoiceState("error");
     }
   }, [config]);
-  const cancelVoiceCapture = (0, import_react7.useCallback)(async () => {
+  const cancelVoiceCapture = (0, import_react8.useCallback)(async () => {
     voiceAppendBaseRef.current = null;
     voiceAppendBaseDurationRef.current = 0;
     if (voiceProviderRef.current) {
@@ -4301,7 +4350,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
     }
     resetVoiceComposerState("idle");
   }, [resetVoiceComposerState]);
-  const finalizeVoiceComposerAfterSend = (0, import_react7.useCallback)(() => {
+  const finalizeVoiceComposerAfterSend = (0, import_react8.useCallback)(() => {
     if (voicePersistComposer) {
       resetVoiceComposerState("idle");
       setIsVoiceComposerOpen(true);
@@ -4309,7 +4358,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
     }
     void closeVoiceComposer();
   }, [voicePersistComposer, resetVoiceComposerState, closeVoiceComposer]);
-  const sendVoiceDraft = (0, import_react7.useCallback)(() => {
+  const sendVoiceDraft = (0, import_react8.useCallback)(() => {
     void (async () => {
       if (!voiceDraft || disabled || isGenerating) {
         return;
@@ -4335,7 +4384,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
     onAttachmentsChange,
     finalizeVoiceComposerAfterSend
   ]);
-  const cancelVoiceAutoSend = (0, import_react7.useCallback)(() => {
+  const cancelVoiceAutoSend = (0, import_react8.useCallback)(() => {
     void (async () => {
       if (voiceReviewMode === "armed" && voiceProviderRef.current) {
         await voiceProviderRef.current.cancel();
@@ -4347,7 +4396,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
     setVoiceCountdownMs(0);
     setIsVoiceAutoSendActive(false);
   }, [armVoiceDraftForAppend, voiceReviewMode]);
-  const pauseVoiceReview = (0, import_react7.useCallback)(async () => {
+  const pauseVoiceReview = (0, import_react8.useCallback)(async () => {
     if (voiceState === "listening") {
       await stopVoiceCapture();
       return;
@@ -4359,7 +4408,7 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
     setVoiceAudioLevel(0);
     setVoiceState("review");
   }, [armVoiceDraftForAppend, stopVoiceCapture, voiceReviewMode, voiceState]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!voiceDraft || voiceAutoSendDelayMs <= 0 || !isVoiceAutoSendActive) {
       return;
     }
@@ -4596,13 +4645,13 @@ var ChatInput = (0, import_react7.memo)(function ChatInput2({
 });
 
 // src/components/chat/UserProfile.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/ui/scroll-area.tsx
-var React13 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
 var import_jsx_runtime25 = require("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__ */ (0, import_jsx_runtime25.jsxs)(
     ScrollAreaPrimitive.Root,
     {
@@ -4770,10 +4819,10 @@ var UserProfile = ({
   onDeleteMemory,
   className
 }) => {
-  const [newMemoryContent, setNewMemoryContent] = (0, import_react8.useState)("");
-  const [isAddingMemory, setIsAddingMemory] = (0, import_react8.useState)(false);
-  const [editingMemoryId, setEditingMemoryId] = (0, import_react8.useState)(null);
-  const [editingMemoryContent, setEditingMemoryContent] = (0, import_react8.useState)("");
+  const [newMemoryContent, setNewMemoryContent] = (0, import_react9.useState)("");
+  const [isAddingMemory, setIsAddingMemory] = (0, import_react9.useState)(false);
+  const [editingMemoryId, setEditingMemoryId] = (0, import_react9.useState)(null);
+  const [editingMemoryContent, setEditingMemoryContent] = (0, import_react9.useState)("");
   const handleAddMemory = () => {
     if (newMemoryContent.trim() && onAddMemory) {
       onAddMemory(newMemoryContent.trim(), "other");
@@ -5049,7 +5098,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));
   }
@@ -5083,7 +5134,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);
@@ -5147,6 +5200,7 @@ var ChatUI = ({
   currentThreadId = null,
   config: userConfig,
   sidebar: _sidebar,
+  userMenuSections,
   userMenuAdditionalItems,
   isGenerating = false,
   isMessagesLoading = false,
@@ -5172,12 +5226,12 @@ var ChatUI = ({
   initialInput,
   onInitialInputConsumed
 }) => {
-  const config = (0, import_react9.useMemo)(
+  const config = (0, import_react10.useMemo)(
     () => mergeConfig(defaultChatConfig, userConfig),
     [userConfig]
   );
-  const [isMobile, setIsMobile] = (0, import_react9.useState)(false);
-  const [isUserProfileOpen, setIsUserProfileOpen] = (0, import_react9.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react10.useState)(false);
+  const [isUserProfileOpen, setIsUserProfileOpen] = (0, import_react10.useState)(false);
   let userContext;
   try {
     const contextValue = useChatUserContext();
@@ -5191,10 +5245,10 @@ var ChatUI = ({
     }
     return false;
   };
-  const [inputValue, setInputValue] = (0, import_react9.useState)("");
-  const [attachments, setAttachments] = (0, import_react9.useState)([]);
-  const [expandedMessageIds, setExpandedMessageIds] = (0, import_react9.useState)({});
-  const [state, setState] = (0, import_react9.useState)({
+  const [inputValue, setInputValue] = (0, import_react10.useState)("");
+  const [attachments, setAttachments] = (0, import_react10.useState)([]);
+  const [expandedMessageIds, setExpandedMessageIds] = (0, import_react10.useState)({});
+  const [state, setState] = (0, import_react10.useState)({
     isRecording: false,
     selectedThreadId: currentThreadId,
     isAtBottom: true,
@@ -5206,43 +5260,46 @@ var ChatUI = ({
     isSidebarCollapsed: false
     // No longer used for main sidebar
   });
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (currentThreadId !== state.selectedThreadId) {
       setState((prev) => ({ ...prev, selectedThreadId: currentThreadId }));
     }
   }, [currentThreadId]);
-  const initialInputApplied = (0, import_react9.useRef)(false);
-  const initialInputConsumedRef = (0, import_react9.useRef)(false);
-  (0, import_react9.useEffect)(() => {
+  const initialInputApplied = (0, import_react10.useRef)(false);
+  const initialInputConsumedRef = (0, import_react10.useRef)(false);
+  (0, import_react10.useEffect)(() => {
     if (initialInput && !initialInputApplied.current) {
       setInputValue(initialInput);
       initialInputApplied.current = true;
     }
   }, [initialInput]);
-  const scrollAreaRef = (0, import_react9.useRef)(null);
-  const prependSnapshotRef = (0, import_react9.useRef)(null);
-  const stateRef = (0, import_react9.useRef)(state);
-  const inputValueRef = (0, import_react9.useRef)(inputValue);
-  const attachmentsRef = (0, import_react9.useRef)(attachments);
-  (0, import_react9.useEffect)(() => {
+  const scrollAreaRef = (0, import_react10.useRef)(null);
+  const prependSnapshotRef = (0, import_react10.useRef)(null);
+  const stateRef = (0, import_react10.useRef)(state);
+  const inputValueRef = (0, import_react10.useRef)(inputValue);
+  const attachmentsRef = (0, import_react10.useRef)(attachments);
+  (0, import_react10.useEffect)(() => {
     stateRef.current = state;
   }, [state]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     inputValueRef.current = inputValue;
   }, [inputValue]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
-  const [isCustomMounted, setIsCustomMounted] = (0, import_react9.useState)(false);
-  const [isCustomVisible, setIsCustomVisible] = (0, import_react9.useState)(false);
-  const groupedMessages = (0, import_react9.useMemo)(() => groupMessagesForRender(messages), [messages]);
+  const [isCustomMounted, setIsCustomMounted] = (0, import_react10.useState)(false);
+  const [isCustomVisible, setIsCustomVisible] = (0, import_react10.useState)(false);
+  const groupedMessages = (0, import_react10.useMemo)(() => groupMessagesForRender(messages), [
+    messages
+  ]);
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
     count: groupedMessages.length,
     getScrollElement: () => scrollAreaRef.current,
+    getItemKey: (index) => groupedMessages[index]?.id ?? index,
     estimateSize: () => 100,
     overscan: 5
   });
-  const createStateCallback = (0, import_react9.useCallback)(
+  const createStateCallback = (0, import_react10.useCallback)(
     (setter) => ({
       setState: (newState) => setter?.(newState),
       getState: () => ({
@@ -5254,7 +5311,7 @@ var ChatUI = ({
     []
     // No dependencies - uses refs for latest state
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const checkMobile = () => {
       setIsMobile(globalThis.innerWidth < 1024);
     };
@@ -5262,7 +5319,7 @@ var ChatUI = ({
     globalThis.addEventListener("resize", checkMobile);
     return () => globalThis.removeEventListener("resize", checkMobile);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!isMobile || !config.customComponent?.component) return;
     if (state.showSidebar) {
       setIsCustomMounted(true);
@@ -5273,8 +5330,8 @@ var ChatUI = ({
       return () => clearTimeout(t);
     }
   }, [state.showSidebar, isMobile, config.customComponent]);
-  const prevMessageCountRef = (0, import_react9.useRef)(0);
-  (0, import_react9.useEffect)(() => {
+  const prevMessageCountRef = (0, import_react10.useRef)(0);
+  (0, import_react10.useEffect)(() => {
     if (groupedMessages.length === 0) {
       prevMessageCountRef.current = 0;
       return;
@@ -5288,7 +5345,9 @@ var ChatUI = ({
     if (wasEmpty) {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          virtualizer.scrollToIndex(groupedMessages.length - 1, { align: "end" });
+          virtualizer.scrollToIndex(groupedMessages.length - 1, {
+            align: "end"
+          });
         });
       });
       return;
@@ -5304,13 +5363,34 @@ var ChatUI = ({
       }
     });
   }, [groupedMessages, state.isAtBottom, virtualizer]);
-  (0, import_react9.useEffect)(() => {
-    virtualizer.measure();
-  }, [expandedMessageIds, virtualizer]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
+    const viewport = scrollAreaRef.current;
+    if (!viewport) return;
+    let rafId;
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const elements = virtualizer.elementsCache;
+        if (elements) {
+          elements.forEach((node) => {
+            if (node.isConnected) {
+              virtualizer.observer?.unobserve(node);
+              virtualizer.observer?.observe(node);
+            }
+          });
+        }
+      });
+    });
+    ro.observe(viewport);
+    return () => {
+      cancelAnimationFrame(rafId);
+      ro.disconnect();
+    };
+  }, [virtualizer]);
+  (0, import_react10.useEffect)(() => {
     prependSnapshotRef.current = null;
   }, [currentThreadId]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const snapshot = prependSnapshotRef.current;
     if (!snapshot) return;
     if (groupedMessages.length <= snapshot.messageCount) {
@@ -5336,7 +5416,7 @@ var ChatUI = ({
       });
     });
   }, [groupedMessages, isLoadingOlderMessages, virtualizer]);
-  const requestOlderMessages = (0, import_react9.useCallback)(() => {
+  const requestOlderMessages = (0, import_react10.useCallback)(() => {
     if (!onLoadOlderMessages || !hasMoreMessagesBefore || isLoadingOlderMessages) return;
     const viewport = scrollAreaRef.current;
     prependSnapshotRef.current = viewport ? {
@@ -5346,12 +5426,19 @@ var ChatUI = ({
       messageCount: groupedMessages.length
     } : null;
     onLoadOlderMessages();
-  }, [groupedMessages, hasMoreMessagesBefore, isLoadingOlderMessages, onLoadOlderMessages]);
-  (0, import_react9.useEffect)(() => {
+  }, [
+    groupedMessages,
+    hasMoreMessagesBefore,
+    isLoadingOlderMessages,
+    onLoadOlderMessages
+  ]);
+  (0, import_react10.useEffect)(() => {
     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;
       }
@@ -5362,7 +5449,7 @@ var ChatUI = ({
       return next;
     });
   }, [groupedMessages]);
-  const handleScroll = (0, import_react9.useCallback)((e) => {
+  const handleScroll = (0, import_react10.useCallback)((e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
     const isNearTop = scrollTop < 120;
@@ -5374,9 +5461,13 @@ var ChatUI = ({
       return { ...prev, isAtBottom };
     });
   }, [hasMoreMessagesBefore, isLoadingOlderMessages, requestOlderMessages]);
-  const handleSendMessage = (0, import_react9.useCallback)((content, messageAttachments = []) => {
+  const handleSendMessage = (0, import_react10.useCallback)((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?.();
@@ -5384,11 +5475,15 @@ var ChatUI = ({
     setInputValue("");
     setAttachments([]);
   }, [callbacks, createStateCallback, onInitialInputConsumed]);
-  const handleMessageAction = (0, import_react9.useCallback)((event) => {
+  const handleMessageAction = (0, import_react10.useCallback)((event) => {
     const { action, messageId, content } = event;
     switch (action) {
       case "copy":
-        callbacks.onCopyMessage?.(messageId, content || "", createStateCallback());
+        callbacks.onCopyMessage?.(
+          messageId,
+          content || "",
+          createStateCallback()
+        );
         break;
       case "edit":
         if (content) {
@@ -5403,7 +5498,7 @@ var ChatUI = ({
         break;
     }
   }, [callbacks, createStateCallback]);
-  const handleToggleMessageExpansion = (0, import_react9.useCallback)((messageId) => {
+  const handleToggleMessageExpansion = (0, import_react10.useCallback)((messageId) => {
     setExpandedMessageIds((prev) => {
       if (prev[messageId]) {
         const next = { ...prev };
@@ -5416,44 +5511,52 @@ var ChatUI = ({
       };
     });
   }, []);
-  const handleCreateThread = (0, import_react9.useCallback)((title) => {
+  const handleCreateThread = (0, import_react10.useCallback)((title) => {
     callbacks.onCreateThread?.(title, createStateCallback());
   }, [callbacks, createStateCallback]);
-  const handleSelectThread = (0, import_react9.useCallback)((threadId) => {
+  const handleSelectThread = (0, import_react10.useCallback)((threadId) => {
     callbacks.onSelectThread?.(threadId, createStateCallback());
   }, [callbacks, createStateCallback]);
-  const handleRenameThread = (0, import_react9.useCallback)((threadId, newTitle) => {
-    callbacks.onRenameThread?.(threadId, newTitle, createStateCallback());
-  }, [callbacks, createStateCallback]);
-  const handleDeleteThread = (0, import_react9.useCallback)((threadId) => {
+  const handleRenameThread = (0, import_react10.useCallback)(
+    (threadId, newTitle) => {
+      callbacks.onRenameThread?.(threadId, newTitle, createStateCallback());
+    },
+    [callbacks, createStateCallback]
+  );
+  const handleDeleteThread = (0, import_react10.useCallback)((threadId) => {
     callbacks.onDeleteThread?.(threadId, createStateCallback());
   }, [callbacks, createStateCallback]);
-  const handleArchiveThread = (0, import_react9.useCallback)((threadId) => {
+  const handleArchiveThread = (0, import_react10.useCallback)((threadId) => {
     callbacks.onArchiveThread?.(threadId, createStateCallback());
   }, [callbacks, createStateCallback]);
-  const closeSidebar = (0, import_react9.useCallback)(() => {
+  const closeSidebar = (0, import_react10.useCallback)(() => {
     setState((prev) => ({ ...prev, showSidebar: false }));
   }, []);
-  const handleCustomComponentToggle = (0, import_react9.useCallback)(() => {
+  const handleCustomComponentToggle = (0, import_react10.useCallback)(() => {
     setState((prev) => ({ ...prev, showSidebar: !prev.showSidebar }));
   }, []);
-  const sidebarUser = (0, import_react9.useMemo)(() => user ? {
+  const sidebarUser = (0, import_react10.useMemo)(() => user ? {
     id: user.id,
     name: user.name,
     email: user.email,
     avatar: user.avatar
   } : null, [user?.id, user?.name, user?.email, user?.avatar]);
-  const handleViewProfile = (0, import_react9.useCallback)(() => {
+  const handleViewProfile = (0, import_react10.useCallback)(() => {
     setIsUserProfileOpen(true);
     callbacks.onViewProfile?.();
   }, [callbacks.onViewProfile]);
-  const sidebarUserMenuCallbacks = (0, import_react9.useMemo)(() => ({
+  const sidebarUserMenuCallbacks = (0, import_react10.useMemo)(() => ({
     onViewProfile: handleViewProfile,
     onOpenSettings: callbacks.onOpenSettings,
     onThemeChange: callbacks.onThemeChange,
     onLogout: callbacks.onLogout
-  }), [handleViewProfile, callbacks.onOpenSettings, callbacks.onThemeChange, callbacks.onLogout]);
-  const renderCustomComponent = (0, import_react9.useCallback)(() => {
+  }), [
+    handleViewProfile,
+    callbacks.onOpenSettings,
+    callbacks.onThemeChange,
+    callbacks.onLogout
+  ]);
+  const renderCustomComponent = (0, import_react10.useCallback)(() => {
     const component = config?.customComponent?.component;
     if (!component) return null;
     if (typeof component === "function") {
@@ -5493,19 +5596,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__ */ (0, import_jsx_runtime27.jsx)("div", { className: `flex flex-wrap gap-2 mt-2 ${inlineSuggestionOffsetClass}`, children: items.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-      "button",
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "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__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Sparkles, { className: "h-3 w-3 text-primary opacity-70 group-hover:opacity-100" }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("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__ */ (0, import_jsx_runtime27.jsxs)(
+          "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__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Sparkles, { className: "h-3 w-3 text-primary opacity-70 group-hover:opacity-100" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "max-w-[200px] truncate", children: suggestion })
+            ]
+          },
+          `${messageId}-suggestion-${index}`
+        ))
+      }
+    );
   };
   const renderMessageLoadingSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "space-y-6 py-2", children: [0, 1, 2, 3].map((index) => {
     const isUserRow = index % 2 === 1;
@@ -5527,7 +5636,7 @@ var ChatUI = ({
     );
   }) });
   const isMultiAgentMode = config.agentSelector?.mode === "multi";
-  const messageProps = (0, import_react9.useMemo)(() => ({
+  const messageProps = (0, import_react10.useMemo)(() => ({
     userAvatar: user?.avatar,
     userName: user?.name,
     assistantAvatar: assistant?.avatar,
@@ -5580,202 +5689,229 @@ var ChatUI = ({
   const shouldShowAgentSelector = Boolean(
     config.agentSelector?.enabled && agentOptions.length > 0 && (!config.agentSelector?.hideIfSingle || agentOptions.length > 1) && (isMultiAgentMode ? onParticipantsChange : onSelectAgent)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SidebarProvider, { defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `flex h-[100svh] md:h-screen bg-background w-full overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      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__ */ (0, import_jsx_runtime27.jsx)(SidebarInset, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col h-full min-h-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        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__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-1 flex-row min-h-0 overflow-hidden", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 flex flex-col min-h-0", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SidebarProvider, { defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    "div",
+    {
+      className: `flex h-[100svh] md:h-screen bg-background w-full overflow-hidden ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          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__ */ (0, import_jsx_runtime27.jsx)(SidebarInset, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col h-full min-h-0", children: [
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            ScrollArea,
+            ChatHeader,
             {
-              ref: scrollAreaRef,
-              className: "flex-1 min-h-0",
-              viewportClassName: "p-4 overscroll-contain",
-              onScrollCapture: handleScroll,
-              style: { contain: "strict" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "max-w-4xl mx-auto pb-4", children: [
-                groupedMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex justify-center py-2", children: isLoadingOlderMessages ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs text-muted-foreground", children: config.labels.loadingOlderMessages }) : hasMoreMessagesBefore ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  "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__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-1 flex-row min-h-0 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 flex flex-col min-h-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                ScrollArea,
+                {
+                  ref: scrollAreaRef,
+                  className: "flex-1 min-h-0",
+                  viewportClassName: "p-4 overscroll-contain",
+                  onScrollCapture: handleScroll,
+                  style: { contain: "content" },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "max-w-4xl mx-auto pb-4", children: [
+                    groupedMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex justify-center py-2", children: isLoadingOlderMessages ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs text-muted-foreground", children: config.labels.loadingOlderMessages }) : hasMoreMessagesBefore ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                      "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__ */ (0, import_jsx_runtime27.jsx)(
+                      "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__ */ (0, import_jsx_runtime27.jsx)(
+                            "div",
+                            {
+                              "data-index": virtualRow.index,
+                              ref: virtualizer.measureElement,
+                              style: {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                transform: `translateY(${virtualRow.start}px)`
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+                                "div",
+                                {
+                                  className: virtualRow.index === 0 ? "" : "pt-4",
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                                      Message,
+                                      {
+                                        message,
+                                        ...messageProps,
+                                        isExpanded: Boolean(
+                                          expandedMessageIds[message.id]
+                                        )
+                                      }
+                                    ),
+                                    message.role === "assistant" && renderInlineSuggestions(
+                                      group.suggestionMessageId
+                                    )
+                                  ]
+                                }
+                              )
+                            },
+                            group.id
+                          );
+                        })
+                      }
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "bg-background pb-[env(safe-area-inset-bottom)]", children: [
+                isMultiAgentMode && shouldShowAgentSelector && onTargetAgentChange && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "px-4 pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  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__ */ (0, import_jsx_runtime27.jsx)(
-                  "div",
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  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__ */ (0, import_jsx_runtime27.jsx)(
-                        "div",
-                        {
-                          "data-index": virtualRow.index,
-                          ref: virtualizer.measureElement,
-                          style: {
-                            position: "absolute",
-                            top: 0,
-                            left: 0,
-                            width: "100%",
-                            transform: `translateY(${virtualRow.start}px)`
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: virtualRow.index === 0 ? "" : "pt-4", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                              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__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "bg-background pb-[env(safe-area-inset-bottom)]", children: [
-            isMultiAgentMode && shouldShowAgentSelector && onTargetAgentChange && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "px-4 pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-              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__ */ (0, import_jsx_runtime27.jsx)(
-              ChatInput,
+            ] }),
+            config?.customComponent?.component && !isMobile && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              "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__ */ (0, import_jsx_runtime27.jsx)(
+                  "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__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "fixed inset-0 z-50", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            "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__ */ (0, import_jsx_runtime27.jsx)(
+            "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__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-full overflow-hidden", children: renderCustomComponent() })
+            }
+          )
         ] }),
-        config?.customComponent?.component && !isMobile && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          "div",
+        isUserProfileOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          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__ */ (0, import_jsx_runtime27.jsx)(
-              "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__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "fixed inset-0 z-50", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        "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__ */ (0, import_jsx_runtime27.jsx)(
-        "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__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-full overflow-hidden", children: renderCustomComponent() })
-        }
-      )
-    ] }),
-    isUserProfileOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      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
-      }
-    )
-  ] }) }) });
+      ]
+    }
+  ) }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {