@copilotz/chat-ui 0.1.0 → 0.1.4

package/dist/index.cjs

@@ -64,6 +64,11 @@ var defaultChatConfig = {
     title: "Chat Assistant",
     subtitle: "How can I help you today?"
   },
+  agentSelector: {
+    enabled: false,
+    label: "Select agent",
+    hideIfSingle: true
+  },
   labels: {
     inputPlaceholder: "Type your message...",
     sendButton: "Send",
@@ -156,6 +161,10 @@ function mergeConfig(_baseConfig, userConfig) {
       ...defaultChatConfig.ui,
       ...userConfig.ui
     },
+    agentSelector: {
+      ...defaultChatConfig.agentSelector,
+      ...userConfig.agentSelector
+    },
     customComponent: userConfig.customComponent || defaultChatConfig.customComponent,
     headerActions: userConfig.headerActions || defaultChatConfig.headerActions
   };
@@ -286,6 +295,7 @@ var configUtils = {
 var import_react = require("react");
 var import_react_markdown = __toESM(require("react-markdown"), 1);
 var import_remark_gfm = __toESM(require("remark-gfm"), 1);
+var import_remark_breaks = __toESM(require("remark-breaks"), 1);
 var import_rehype_highlight = __toESM(require("rehype-highlight"), 1);
 
 // src/components/ui/button.tsx
@@ -566,7 +576,25 @@ function TooltipContent({
 // src/components/chat/Message.tsx
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var ThinkingIndicator = ({ label = "Thinking..." }) => {
+var MarkdownErrorBoundary = class extends import_react.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(_error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.warn("[Markdown] Falling back to simple rendering due to:", error.message);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+};
+var ThinkingIndicator = (0, import_react.memo)(function ThinkingIndicator2({ label = "Thinking..." }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 py-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -593,36 +621,61 @@ var ThinkingIndicator = ({ label = "Thinking..." }) => {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm text-muted-foreground animate-pulse", children: label })
   ] });
+});
+var markdownComponents = {
+  code: ({ node, className, children, ...props }) => {
+    const inline = props.inline;
+    const match = /language-(\w+)/.exec(className || "");
+    return !inline && match ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className, ...props, children }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "bg-muted px-1 py-0.5 rounded text-sm", ...props, children });
+  }
 };
-var StreamingText = ({
+var remarkPluginsWithGfm = [import_remark_gfm.default, import_remark_breaks.default];
+var remarkPluginsSimple = [import_remark_breaks.default];
+var rehypePluginsDefault = [import_rehype_highlight.default];
+var rehypePluginsEmpty = [];
+var SimpleMarkdown = (0, import_react.memo)(function SimpleMarkdown2({
+  content,
+  isStreaming = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_markdown.default,
+    {
+      remarkPlugins: remarkPluginsSimple,
+      rehypePlugins: isStreaming ? rehypePluginsEmpty : rehypePluginsDefault,
+      components: markdownComponents,
+      children: content
+    }
+  );
+});
+var FullMarkdown = (0, import_react.memo)(function FullMarkdown2({
+  content,
+  isStreaming = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_markdown.default,
+    {
+      remarkPlugins: remarkPluginsWithGfm,
+      rehypePlugins: isStreaming ? rehypePluginsEmpty : rehypePluginsDefault,
+      components: markdownComponents,
+      children: content
+    }
+  );
+});
+var StreamingText = (0, import_react.memo)(function StreamingText2({
   content,
   isStreaming = false,
   thinkingLabel = "Thinking..."
-}) => {
+}) {
   const hasContent = content.trim().length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "prose prose-sm max-w-none dark:prose-invert", children: [
-    hasContent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_markdown.default,
-      {
-        remarkPlugins: [import_remark_gfm.default],
-        rehypePlugins: isStreaming ? [] : [import_rehype_highlight.default],
-        components: {
-          code: ({ node, className, children, ...props }) => {
-            const inline = props.inline;
-            const match = /language-(\w+)/.exec(className || "");
-            return !inline && match ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className, ...props, children }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "bg-muted px-1 py-0.5 rounded text-sm", ...props, children });
-          }
-        },
-        children: content
-      }
-    ) : isStreaming ? (
+    hasContent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MarkdownErrorBoundary, { fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SimpleMarkdown, { content, isStreaming }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FullMarkdown, { content, isStreaming }) }) : isStreaming ? (
       // Show thinking indicator while waiting for first token
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ThinkingIndicator, { label: thinkingLabel })
     ) : null,
     isStreaming && hasContent && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block w-2 h-4 bg-primary animate-pulse ml-1" })
   ] });
-};
-var MediaRenderer = ({ attachment }) => {
+});
+var MediaRenderer = (0, import_react.memo)(function MediaRenderer2({ attachment }) {
   const [isPlaying, setIsPlaying] = (0, import_react.useState)(false);
   const audioRef = (0, import_react.useRef)(null);
   const videoRef = (0, import_react.useRef)(null);
@@ -696,8 +749,8 @@ var MediaRenderer = ({ attachment }) => {
     default:
       return null;
   }
-};
-var ToolCallsDisplay = ({ toolCalls, label }) => {
+});
+var ToolCallsDisplay = (0, import_react.memo)(function ToolCallsDisplay2({ toolCalls, label }) {
   const [expandedCall, setExpandedCall] = (0, import_react.useState)(null);
   const getStatusIcon = (status) => {
     switch (status) {
@@ -766,8 +819,48 @@ var ToolCallsDisplay = ({ toolCalls, label }) => {
       ] }, call.id);
     })
   ] });
+});
+var arePropsEqual = (prevProps, nextProps) => {
+  if (prevProps.message.id !== nextProps.message.id) return false;
+  if (prevProps.message.content !== nextProps.message.content) return false;
+  if (prevProps.message.isStreaming !== nextProps.message.isStreaming) return false;
+  if (prevProps.message.isComplete !== nextProps.message.isComplete) return false;
+  if (prevProps.message.isEdited !== nextProps.message.isEdited) return false;
+  if (prevProps.message.timestamp !== nextProps.message.timestamp) return false;
+  if (prevProps.message.toolCalls !== nextProps.message.toolCalls) {
+    const prevCalls = prevProps.message.toolCalls;
+    const nextCalls = nextProps.message.toolCalls;
+    if (!prevCalls || !nextCalls || prevCalls.length !== nextCalls.length) return false;
+    for (let i = 0; i < prevCalls.length; i++) {
+      if (prevCalls[i].id !== nextCalls[i].id || prevCalls[i].status !== nextCalls[i].status || prevCalls[i].result !== nextCalls[i].result) {
+        return false;
+      }
+    }
+  }
+  if (prevProps.message.attachments !== nextProps.message.attachments) {
+    const prevAtt = prevProps.message.attachments;
+    const nextAtt = nextProps.message.attachments;
+    if (!prevAtt || !nextAtt || prevAtt.length !== nextAtt.length) return false;
+  }
+  if (prevProps.isUser !== nextProps.isUser) return false;
+  if (prevProps.userAvatar !== nextProps.userAvatar) return false;
+  if (prevProps.userName !== nextProps.userName) return false;
+  if (prevProps.assistantName !== nextProps.assistantName) return false;
+  if (prevProps.showTimestamp !== nextProps.showTimestamp) return false;
+  if (prevProps.showAvatar !== nextProps.showAvatar) return false;
+  if (prevProps.enableCopy !== nextProps.enableCopy) return false;
+  if (prevProps.enableEdit !== nextProps.enableEdit) return false;
+  if (prevProps.enableRegenerate !== nextProps.enableRegenerate) return false;
+  if (prevProps.enableToolCallsDisplay !== nextProps.enableToolCallsDisplay) return false;
+  if (prevProps.compactMode !== nextProps.compactMode) return false;
+  if (prevProps.className !== nextProps.className) return false;
+  if (prevProps.toolUsedLabel !== nextProps.toolUsedLabel) return false;
+  if (prevProps.thinkingLabel !== nextProps.thinkingLabel) return false;
+  if (prevProps.isGrouped !== nextProps.isGrouped) return false;
+  if (prevProps.assistantAvatar !== nextProps.assistantAvatar) return false;
+  return true;
 };
-var Message = ({
+var Message = (0, import_react.memo)(({
   message,
   isUser,
   userAvatar,
@@ -784,7 +877,8 @@ var Message = ({
   onAction,
   className = "",
   toolUsedLabel,
-  thinkingLabel = "Thinking..."
+  thinkingLabel = "Thinking...",
+  isGrouped = false
 }) => {
   const [isEditing, setIsEditing] = (0, import_react.useState)(false);
   const [editContent, setEditContent] = (0, import_react.useState)(message.content);
@@ -834,7 +928,7 @@ var Message = ({
       onMouseEnter: () => setShowActions(true),
       onMouseLeave: () => setShowActions(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `flex gap-3 ${messageIsUser ? "flex-row-reverse" : "flex-row"} w-full mb-1`, children: [
+        !isGrouped && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `flex gap-3 ${messageIsUser ? "flex-row-reverse" : "flex-row"} w-full mb-1`, children: [
           showAvatar && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `flex-shrink-0 ${compactMode ? "mt-1" : "mt-0"}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Avatar, { className: compactMode ? "h-6 w-6" : "h-8 w-8", children: messageIsUser ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AvatarImage, { src: userAvatar, alt: userName }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AvatarFallback, { className: "bg-primary text-primary-foreground", children: userName.charAt(0).toUpperCase() })
@@ -845,7 +939,7 @@ var Message = ({
             message.isEdited && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Badge, { variant: "outline", className: "text-xs", children: "editado" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `relative inline-flex flex-col ${messageIsUser ? "rounded-lg p-3 bg-primary text-primary-foreground ml-auto max-w-[85%]" : "max-w-[85%]"}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"} ${isGrouped && showAvatar && !messageIsUser ? compactMode ? "ml-9" : "ml-11" : ""} ${isGrouped && showAvatar && messageIsUser ? compactMode ? "mr-9" : "mr-11" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `relative inline-flex flex-col ${messageIsUser ? "rounded-lg p-3 bg-primary text-primary-foreground ml-auto max-w-[85%]" : "max-w-[85%]"}`, children: [
           isEditing ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Textarea,
@@ -923,7 +1017,7 @@ var Message = ({
       ]
     }
   ) });
-};
+}, arePropsEqual);
 
 // src/components/chat/Sidebar.tsx
 var import_react2 = require("react");
@@ -948,7 +1042,7 @@ function Input({ className, type, ...props }) {
 }
 
 // src/components/ui/sidebar.tsx
-var React3 = __toESM(require("react"), 1);
+var React4 = __toESM(require("react"), 1);
 var import_react_slot3 = require("@radix-ui/react-slot");
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_lucide_react3 = require("lucide-react");
@@ -956,18 +1050,26 @@ var import_lucide_react3 = require("lucide-react");
 // src/hooks/use-mobile.ts
 var React2 = __toESM(require("react"), 1);
 var MOBILE_BREAKPOINT = 768;
+function getInitialIsMobile() {
+  if (typeof window === "undefined") return false;
+  return window.innerWidth < MOBILE_BREAKPOINT;
+}
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React2.useState(void 0);
+  const [isMobile, setIsMobile] = React2.useState(getInitialIsMobile);
   React2.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     };
     mql.addEventListener("change", onChange);
+    window.addEventListener("resize", onChange);
     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
+    return () => {
+      mql.removeEventListener("change", onChange);
+      window.removeEventListener("resize", onChange);
+    };
   }, []);
-  return !!isMobile;
+  return isMobile;
 }
 
 // src/components/ui/separator.tsx
@@ -995,11 +1097,30 @@ function Separator({
 }
 
 // src/components/ui/sheet.tsx
+var React3 = __toESM(require("react"), 1);
 var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function Sheet({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+function cleanupBodyStyles() {
+  if (typeof document !== "undefined" && document.body.style.pointerEvents === "none") {
+    document.body.style.pointerEvents = "";
+  }
+}
+function Sheet({ open, onOpenChange, ...props }) {
+  const prevOpenRef = React3.useRef(open);
+  React3.useEffect(() => {
+    if (prevOpenRef.current === true && open === false) {
+      const timeout = setTimeout(cleanupBodyStyles, 350);
+      return () => clearTimeout(timeout);
+    }
+    prevOpenRef.current = open;
+  }, [open]);
+  React3.useEffect(() => {
+    return () => {
+      cleanupBodyStyles();
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SheetPrimitive.Root, { "data-slot": "sheet", open, onOpenChange, ...props });
 }
 function SheetPortal({
   ...props
@@ -1015,7 +1136,10 @@ function SheetOverlay({
     {
       "data-slot": "sheet-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:pointer-events-none",
         className
       ),
       ...props
@@ -1034,6 +1158,7 @@ function SheetContent({
       SheetPrimitive.Content,
       {
         "data-slot": "sheet-content",
+        "aria-describedby": void 0,
         className: cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
@@ -1099,9 +1224,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React3.createContext(null);
+var SidebarContext = React4.createContext(null);
 function useSidebar() {
-  const context = React3.useContext(SidebarContext);
+  const context = React4.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -1117,10 +1242,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React3.useState(false);
-  const [_open, _setOpen] = React3.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React4.useState(false);
+  const [_open, _setOpen] = React4.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React3.useCallback(
+  const setOpen = React4.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -1132,10 +1257,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React3.useCallback(() => {
+  const toggleSidebar = React4.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -1146,7 +1271,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React3.useMemo(
+  const contextValue = React4.useMemo(
     () => ({
       state,
       open,
@@ -1221,12 +1346,29 @@ function Sidebar({
       }
     ) });
   }
+  const isCollapsed = state === "collapsed";
+  const currentCollapsible = isCollapsed ? collapsible : "";
+  const getGapWidth = () => {
+    if (currentCollapsible === "offcanvas") return "0px";
+    if (currentCollapsible === "icon") return SIDEBAR_WIDTH_ICON;
+    return SIDEBAR_WIDTH;
+  };
+  const getContainerWidth = () => {
+    if (currentCollapsible === "icon") return SIDEBAR_WIDTH_ICON;
+    return SIDEBAR_WIDTH;
+  };
+  const getContainerOffset = () => {
+    if (currentCollapsible === "offcanvas") {
+      return side === "left" ? `calc(${SIDEBAR_WIDTH} * -1)` : `calc(${SIDEBAR_WIDTH} * -1)`;
+    }
+    return "0";
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
-      className: "group peer text-sidebar-foreground hidden md:block",
+      className: "group peer text-sidebar-foreground",
       "data-state": state,
-      "data-collapsible": state === "collapsed" ? collapsible : "",
+      "data-collapsible": currentCollapsible,
       "data-variant": variant,
       "data-side": side,
       "data-slot": "sidebar",
@@ -1236,11 +1378,10 @@ function Sidebar({
           {
             "data-slot": "sidebar-gap",
             className: cn(
-              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-              "group-data-[collapsible=offcanvas]:w-0",
-              "group-data-[side=right]:rotate-180",
-              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-            )
+              "relative bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[side=right]:rotate-180"
+            ),
+            style: { width: getGapWidth() }
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -1248,12 +1389,16 @@ function Sidebar({
           {
             "data-slot": "sidebar-container",
             className: cn(
-              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-              side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+              "fixed inset-y-0 z-10 h-screen transition-[left,right,width] duration-200 ease-linear",
               // Adjust the padding for floating and inset variants.
-              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              variant === "floating" || variant === "inset" ? "p-2" : side === "left" ? "border-r" : "border-l",
               className
             ),
+            style: {
+              display: "flex",
+              width: getContainerWidth(),
+              [side === "left" ? "left" : "right"]: getContainerOffset()
+            },
             ...props,
             children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "div",
@@ -1276,6 +1421,15 @@ function SidebarTrigger({
   ...props
 }) {
   const { toggleSidebar } = useSidebar();
+  const handleActivation = React4.useCallback((event) => {
+    if (event.type === "touchend") {
+      event.preventDefault();
+    }
+    if ("onClick" in event && onClick) {
+      onClick(event);
+    }
+    toggleSidebar();
+  }, [onClick, toggleSidebar]);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     Button,
     {
@@ -1284,10 +1438,8 @@ function SidebarTrigger({
       variant: "ghost",
       size: "icon",
       className: cn("size-7", className),
-      onClick: (event) => {
-        onClick?.(event);
-        toggleSidebar();
-      },
+      onClick: handleActivation,
+      onTouchEnd: handleActivation,
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.PanelLeftIcon, {}),
@@ -1529,13 +1681,34 @@ function SidebarMenuAction({
 }
 
 // src/components/ui/dialog.tsx
+var React5 = __toESM(require("react"), 1);
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
+function cleanupBodyStyles2() {
+  if (typeof document !== "undefined" && document.body.style.pointerEvents === "none") {
+    document.body.style.pointerEvents = "";
+  }
+}
 function Dialog({
+  open,
+  onOpenChange,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  const prevOpenRef = React5.useRef(open);
+  React5.useEffect(() => {
+    if (prevOpenRef.current === true && open === false) {
+      const timeout = setTimeout(cleanupBodyStyles2, 250);
+      return () => clearTimeout(timeout);
+    }
+    prevOpenRef.current = open;
+  }, [open]);
+  React5.useEffect(() => {
+    return () => {
+      cleanupBodyStyles2();
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", open, onOpenChange, ...props });
 }
 function DialogTrigger({
   ...props
@@ -1556,7 +1729,10 @@ function DialogOverlay({
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:pointer-events-none",
         className
       ),
       ...props
@@ -1575,6 +1751,7 @@ function DialogContent({
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
+        "aria-describedby": void 0,
         className: cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
           className
@@ -1649,12 +1826,33 @@ function DialogDescription({
 }
 
 // src/components/ui/alert-dialog.tsx
+var React6 = __toESM(require("react"), 1);
 var AlertDialogPrimitive = __toESM(require("@radix-ui/react-alert-dialog"), 1);
 var import_jsx_runtime13 = require("react/jsx-runtime");
+function cleanupBodyStyles3() {
+  if (typeof document !== "undefined" && document.body.style.pointerEvents === "none") {
+    document.body.style.pointerEvents = "";
+  }
+}
 function AlertDialog({
+  open,
+  onOpenChange,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+  const prevOpenRef = React6.useRef(open);
+  React6.useEffect(() => {
+    if (prevOpenRef.current === true && open === false) {
+      const timeout = setTimeout(cleanupBodyStyles3, 250);
+      return () => clearTimeout(timeout);
+    }
+    prevOpenRef.current = open;
+  }, [open]);
+  React6.useEffect(() => {
+    return () => {
+      cleanupBodyStyles3();
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", open, onOpenChange, ...props });
 }
 function AlertDialogPortal({
   ...props
@@ -1670,7 +1868,10 @@ function AlertDialogOverlay({
     {
       "data-slot": "alert-dialog-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:pointer-events-none",
         className
       ),
       ...props
@@ -2128,6 +2329,13 @@ var Sidebar2 = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Sidebar, { collapsible: "icon", ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(SidebarHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-3 px-2 py-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center justify-center shrink-0", children: config.branding?.logo || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Avatar, { className: "h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AvatarFallback, { className: "bg-primary text-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.Bot, { className: "h-4 w-4" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col min-w-0 group-data-[collapsible=icon]:hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm font-semibold truncate", children: config.branding?.title || "Chat" }),
+          config.branding?.subtitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-muted-foreground truncate", children: config.branding.subtitle })
+        ] })
+      ] }),
       onCreateThread && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         CreateThreadDialog,
         {
@@ -2147,7 +2355,7 @@ var Sidebar2 = ({
           ) }) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "px-2 py-1 mt-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "px-2 py-1 mt-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative group-data-[collapsible=icon]:hidden", children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.Search, { className: "pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -2262,7 +2470,7 @@ var Sidebar2 = ({
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SidebarRail, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertDialog, { open: !!deleteThreadId, onOpenChange: () => setDeleteThreadId(null), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(AlertDialogContent, { children: [
+    deleteThreadId && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertDialog, { open: !!deleteThreadId, onOpenChange: () => setDeleteThreadId(null), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(AlertDialogContent, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(AlertDialogHeader, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertDialogTitle, { children: config.labels?.deleteConfirmTitle || "Delete Conversation" }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertDialogDescription, { children: config.labels?.deleteConfirmDescription || "Are you sure you want to delete this conversation? This action cannot be undone." })
@@ -2297,6 +2505,10 @@ var ChatHeader = ({
   onClearAll,
   showCustomComponentButton,
   isMobile,
+  showAgentSelector = false,
+  agentOptions = [],
+  selectedAgentId = null,
+  onSelectAgent,
   className = ""
 }) => {
   const [isDarkMode, setIsDarkMode] = import_react3.default.useState(() => {
@@ -2347,22 +2559,64 @@ var ChatHeader = ({
     };
     input.click();
   };
+  const selectedAgent = agentOptions.find((agent) => agent.id === selectedAgentId) || null;
+  const agentPlaceholder = config.agentSelector?.label || "Select agent";
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     Card,
     {
       "data-chat-header": true,
       className: `py-0 border-b rounded-none relative z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 ${className}`,
       style: isMobile ? { paddingTop: "env(safe-area-inset-top)" } : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeader, { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SidebarTrigger, { className: "-ml-1" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipContent, { children: config.labels?.sidebarToggle || "Toggle Sidebar" })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-3 flex-1 justify-center", children: [
-          config.branding?.logo || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Avatar, { className: "h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AvatarFallback, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.Bot, { className: "h-4 w-4" }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-center hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardTitle, { className: "text-sm font-medium", children: config.branding?.title || "Chat Assistant" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "md:hidden text-sm font-medium truncate max-w-[150px]", children: currentThreadTitle || config.branding?.title || "Chat" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeader, { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SidebarTrigger, { className: "-ml-1" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipContent, { children: config.labels?.sidebarToggle || "Toggle Sidebar" })
+          ] }),
+          showAgentSelector && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DropdownMenu, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              Button,
+              {
+                variant: "ghost",
+                className: "h-9 px-3 gap-1.5 font-medium text-base hover:bg-accent/50",
+                children: [
+                  selectedAgent?.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Avatar, { className: "h-5 w-5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AvatarImage, { src: selectedAgent.avatarUrl, alt: selectedAgent.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AvatarFallback, { className: "text-[10px]", children: selectedAgent.name.charAt(0).toUpperCase() })
+                  ] }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "max-w-[200px] truncate", children: selectedAgent?.name || agentPlaceholder }),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.ChevronDown, { className: "h-4 w-4 opacity-50" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuContent, { align: "start", className: "w-[280px]", children: agentOptions.map((agent) => {
+              const isSelected = agent.id === selectedAgentId;
+              return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                DropdownMenuItem,
+                {
+                  onClick: () => onSelectAgent?.(agent.id),
+                  className: "flex items-start gap-3 p-3 cursor-pointer",
+                  children: [
+                    agent.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Avatar, { className: "h-6 w-6 mt-0.5 shrink-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AvatarImage, { src: agent.avatarUrl, alt: agent.name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AvatarFallback, { className: "text-[10px]", children: agent.name.charAt(0).toUpperCase() })
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "h-6 w-6 mt-0.5 shrink-0 flex items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.Bot, { className: "h-3.5 w-3.5 text-primary" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-medium text-sm", children: agent.name }),
+                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.Check, { className: "h-4 w-4 text-primary shrink-0" })
+                      ] }),
+                      agent.description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs text-muted-foreground mt-0.5 line-clamp-2", children: agent.description })
+                    ] })
+                  ]
+                },
+                agent.id
+              );
+            }) })
+          ] }),
+          !showAgentSelector && isMobile && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm font-medium truncate max-w-[150px] ml-2", children: currentThreadTitle || config.branding?.title || "Chat" })
         ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex-1" }),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-1", children: [
           showCustomComponentButton && config.customComponent && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -2497,7 +2751,7 @@ function Progress({
 // src/components/chat/ChatInput.tsx
 var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var FileUploadItem = ({ file, progress, onCancel }) => {
+var FileUploadItem = (0, import_react5.memo)(function FileUploadItem2({ file, progress, onCancel }) {
   const guessTypeFromName = (name) => {
     const ext = (name || "").split(".").pop()?.toLowerCase();
     switch (ext) {
@@ -2555,8 +2809,8 @@ var FileUploadItem = ({ file, progress, onCancel }) => {
       }
     )
   ] }) }) });
-};
-var AttachmentPreview = ({ attachment, onRemove }) => {
+});
+var AttachmentPreview = (0, import_react5.memo)(function AttachmentPreview2({ attachment, onRemove }) {
   const [isPlaying, setIsPlaying] = (0, import_react5.useState)(false);
   const audioRef = (0, import_react5.useRef)(null);
   const handlePlayPause = () => {
@@ -2656,8 +2910,8 @@ var AttachmentPreview = ({ attachment, onRemove }) => {
     ] }),
     attachment.fileName && attachment.kind !== "audio" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute bottom-0 left-0 right-0 bg-black/70 text-white text-xs p-1 rounded-b", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "truncate", children: attachment.fileName }) })
   ] }) });
-};
-var AudioRecorder = ({ isRecording, onStartRecording, onStopRecording, onCancel, recordingDuration, config }) => {
+});
+var AudioRecorder = (0, import_react5.memo)(function AudioRecorder2({ isRecording, onStartRecording, onStopRecording, onCancel, recordingDuration, config }) {
   const formatTime = (seconds) => {
     const mins = Math.floor(seconds / 60);
     const secs = seconds % 60;
@@ -2711,8 +2965,8 @@ var AudioRecorder = ({ isRecording, onStartRecording, onStopRecording, onCancel,
       )
     ] })
   ] }) }) });
-};
-var ChatInput = ({
+});
+var ChatInput = (0, import_react5.memo)(function ChatInput2({
   value,
   onChange,
   onSubmit,
@@ -2730,7 +2984,7 @@ var ChatInput = ({
   acceptedFileTypes = ["image/*", "video/*", "audio/*"],
   className = "",
   config
-}) => {
+}) {
   const [isRecording, setIsRecording] = (0, import_react5.useState)(false);
   const { setContext } = useChatUserContext();
   const [recordingDuration, setRecordingDuration] = (0, import_react5.useState)(0);
@@ -3072,16 +3326,16 @@ var ChatInput = ({
       ] })
     ] })
   ] }) }) });
-};
+});
 
 // src/components/chat/UserProfile.tsx
 var import_react6 = require("react");
 
 // src/components/ui/scroll-area.tsx
-var React8 = __toESM(require("react"), 1);
+var React11 = __toESM(require("react"), 1);
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var ScrollArea = React8.forwardRef(({ className, children, viewportClassName, onScroll, onScrollCapture, ...props }, ref) => {
+var ScrollArea = React11.forwardRef(({ className, children, viewportClassName, onScroll, onScrollCapture, ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     ScrollAreaPrimitive.Root,
     {
@@ -3527,10 +3781,16 @@ var ChatUI = ({
   user,
   assistant,
   suggestions = [],
+  messageSuggestions = {},
+  agentOptions = [],
+  selectedAgentId = null,
+  onSelectAgent,
   className = "",
   onAddMemory,
   onUpdateMemory,
-  onDeleteMemory
+  onDeleteMemory,
+  initialInput,
+  onInitialInputConsumed
 }) => {
   const config = mergeConfig(defaultChatConfig, userConfig);
   const [isMobile, setIsMobile] = (0, import_react7.useState)(false);
@@ -3548,9 +3808,9 @@ var ChatUI = ({
     }
     return false;
   };
+  const [inputValue, setInputValue] = (0, import_react7.useState)("");
+  const [attachments, setAttachments] = (0, import_react7.useState)([]);
   const [state, setState] = (0, import_react7.useState)({
-    input: "",
-    attachments: [],
     isRecording: false,
     selectedThreadId: currentThreadId,
     isAtBottom: true,
@@ -3567,16 +3827,41 @@ var ChatUI = ({
       setState((prev) => ({ ...prev, selectedThreadId: currentThreadId }));
     }
   }, [currentThreadId]);
+  const initialInputApplied = (0, import_react7.useRef)(false);
+  const initialInputConsumedRef = (0, import_react7.useRef)(false);
+  (0, import_react7.useEffect)(() => {
+    if (initialInput && !initialInputApplied.current) {
+      setInputValue(initialInput);
+      initialInputApplied.current = true;
+    }
+  }, [initialInput]);
   const messagesEndRef = (0, import_react7.useRef)(null);
   const scrollAreaRef = (0, import_react7.useRef)(null);
+  const stateRef = (0, import_react7.useRef)(state);
+  const inputValueRef = (0, import_react7.useRef)(inputValue);
+  const attachmentsRef = (0, import_react7.useRef)(attachments);
+  (0, import_react7.useEffect)(() => {
+    stateRef.current = state;
+  }, [state]);
+  (0, import_react7.useEffect)(() => {
+    inputValueRef.current = inputValue;
+  }, [inputValue]);
+  (0, import_react7.useEffect)(() => {
+    attachmentsRef.current = attachments;
+  }, [attachments]);
   const [isCustomMounted, setIsCustomMounted] = (0, import_react7.useState)(false);
   const [isCustomVisible, setIsCustomVisible] = (0, import_react7.useState)(false);
   const createStateCallback = (0, import_react7.useCallback)(
     (setter) => ({
       setState: (newState) => setter?.(newState),
-      getState: () => state
+      getState: () => ({
+        ...stateRef.current,
+        input: inputValueRef.current,
+        attachments: attachmentsRef.current
+      })
     }),
-    [state]
+    []
+    // No dependencies - uses refs for latest state
   );
   (0, import_react7.useEffect)(() => {
     const checkMobile = () => {
@@ -3613,15 +3898,16 @@ var ChatUI = ({
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
     setState((prev) => ({ ...prev, isAtBottom }));
   }, []);
-  const handleSendMessage = (0, import_react7.useCallback)((content, attachments = []) => {
-    if (!content.trim() && attachments.length === 0) return;
-    callbacks.onSendMessage?.(content, attachments, createStateCallback());
-    setState((prev) => ({
-      ...prev,
-      input: "",
-      attachments: []
-    }));
-  }, [callbacks, createStateCallback]);
+  const handleSendMessage = (0, import_react7.useCallback)((content, messageAttachments = []) => {
+    if (!content.trim() && messageAttachments.length === 0) return;
+    callbacks.onSendMessage?.(content, messageAttachments, createStateCallback());
+    if (initialInputApplied.current && !initialInputConsumedRef.current) {
+      initialInputConsumedRef.current = true;
+      onInitialInputConsumed?.();
+    }
+    setInputValue("");
+    setAttachments([]);
+  }, [callbacks, createStateCallback, onInitialInputConsumed]);
   const handleMessageAction = (0, import_react7.useCallback)((event) => {
     const { action, messageId, content } = event;
     switch (action) {
@@ -3642,7 +3928,7 @@ var ChatUI = ({
     }
   }, [callbacks, createStateCallback]);
   const handleCreateThread = (0, import_react7.useCallback)((title) => {
-    callbacks.onCreateThread?.(title, createStateCallback(setState));
+    callbacks.onCreateThread?.(title, createStateCallback());
   }, [callbacks, createStateCallback]);
   const handleSelectThread = (0, import_react7.useCallback)((threadId) => {
     callbacks.onSelectThread?.(threadId, createStateCallback());
@@ -3667,23 +3953,54 @@ var ChatUI = ({
     }
     return component;
   }, [config?.customComponent?.component, closeSidebar, isMobile]);
+  const SuggestionIconComponents = [import_lucide_react11.MessageSquare, import_lucide_react11.Lightbulb, import_lucide_react11.Zap, import_lucide_react11.HelpCircle];
   const renderSuggestions = () => {
     if (messages.length > 0 || !suggestions.length) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "text-center py-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Sparkles, { className: "w-8 h-8 text-primary" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "text-lg font-semibold mb-2", children: config.branding.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-muted-foreground mb-6", children: config.branding.subtitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 max-w-2xl mx-auto", children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        Card,
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center justify-center min-h-[60vh] py-8 px-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "text-center mb-8", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 mb-4 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Sparkles, { className: "w-7 h-7 text-primary" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: "text-xl font-semibold mb-2", children: config.branding.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-muted-foreground text-sm max-w-md", children: config.branding.subtitle })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 w-full max-w-2xl", children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        "button",
         {
-          className: "cursor-pointer hover:bg-muted/50 transition-colors",
+          type: "button",
           onClick: () => handleSendMessage(suggestion),
-          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CardContent, { className: "p-4 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm", children: suggestion }) })
+          className: "group relative flex items-start gap-3 p-4 text-left rounded-xl border bg-card hover:bg-accent/50 hover:border-accent transition-all duration-200 hover:shadow-sm",
+          children: [
+            (() => {
+              const IconComponent = SuggestionIconComponents[index % SuggestionIconComponents.length];
+              return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary shrink-0 group-hover:bg-primary/15 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconComponent, { className: "h-4 w-4" }) });
+            })(),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 min-w-0 pr-6", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm font-medium leading-snug line-clamp-2", children: suggestion }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.ArrowRight, { className: "absolute right-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" })
+          ]
         },
         index
       )) })
     ] });
   };
+  const renderInlineSuggestions = (messageId) => {
+    const items = messageSuggestions?.[messageId];
+    if (!items || items.length === 0) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-wrap gap-2 mt-2 ml-11", children: items.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(import_lucide_react11.Sparkles, { className: "h-3 w-3 text-primary opacity-70 group-hover:opacity-100" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "max-w-[200px] truncate", children: suggestion })
+        ]
+      },
+      `${messageId}-suggestion-${index}`
+    )) });
+  };
+  const shouldShowAgentSelector = Boolean(
+    config.agentSelector?.enabled && onSelectAgent && agentOptions.length > 0 && (!config.agentSelector?.hideIfSingle || agentOptions.length > 1)
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SidebarProvider, { defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `flex h-[100svh] md:h-screen bg-background w-full overflow-hidden ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Sidebar2,
@@ -3724,7 +4041,11 @@ var ChatUI = ({
           isMobile,
           onCustomComponentToggle: () => setState((prev) => ({ ...prev, showSidebar: !prev.showSidebar })),
           onNewThread: handleCreateThread,
-          showCustomComponentButton: !!config?.customComponent?.component
+          showCustomComponentButton: !!config?.customComponent?.component,
+          showAgentSelector: shouldShowAgentSelector,
+          agentOptions,
+          selectedAgentId,
+          onSelectAgent
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-1 flex-row min-h-0 overflow-hidden", children: [
@@ -3738,27 +4059,34 @@ var ChatUI = ({
               onScrollCapture: handleScroll,
               children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "max-w-4xl mx-auto space-y-4 pb-4", children: [
                 renderSuggestions(),
-                messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                  Message,
-                  {
-                    message,
-                    userAvatar: user?.avatar,
-                    userName: user?.name,
-                    assistantAvatar: assistant?.avatar,
-                    assistantName: assistant?.name,
-                    showTimestamp: config.ui.showTimestamps,
-                    showAvatar: config.ui.showAvatars,
-                    enableCopy: config.features.enableMessageCopy,
-                    enableEdit: config.features.enableMessageEditing,
-                    enableRegenerate: config.features.enableRegeneration,
-                    enableToolCallsDisplay: config.features.enableToolCallsDisplay,
-                    compactMode: config.ui.compactMode,
-                    onAction: handleMessageAction,
-                    toolUsedLabel: config.labels.toolUsed,
-                    thinkingLabel: config.labels.thinking
-                  },
-                  message.id
-                )),
+                messages.map((message, index) => {
+                  const prevMessage = index > 0 ? messages[index - 1] : null;
+                  const isGrouped = prevMessage !== null && prevMessage.role === message.role;
+                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: isGrouped ? "space-y-1 -mt-2" : "space-y-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      Message,
+                      {
+                        message,
+                        userAvatar: user?.avatar,
+                        userName: user?.name,
+                        assistantAvatar: assistant?.avatar,
+                        assistantName: assistant?.name,
+                        showTimestamp: config.ui.showTimestamps,
+                        showAvatar: config.ui.showAvatars,
+                        enableCopy: config.features.enableMessageCopy,
+                        enableEdit: config.features.enableMessageEditing,
+                        enableRegenerate: config.features.enableRegeneration,
+                        enableToolCallsDisplay: config.features.enableToolCallsDisplay,
+                        compactMode: config.ui.compactMode,
+                        onAction: handleMessageAction,
+                        toolUsedLabel: config.labels.toolUsed,
+                        thinkingLabel: config.labels.thinking,
+                        isGrouped
+                      }
+                    ),
+                    message.role === "assistant" && renderInlineSuggestions(message.id)
+                  ] }, message.id);
+                }),
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref: messagesEndRef })
               ] })
             }
@@ -3766,11 +4094,17 @@ var ChatUI = ({
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "bg-background pb-[env(safe-area-inset-bottom)]", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             ChatInput,
             {
-              value: state.input,
-              onChange: (value) => setState((prev) => ({ ...prev, input: value })),
+              value: inputValue,
+              onChange: (value) => {
+                setInputValue(value);
+                if (initialInputApplied.current && !initialInputConsumedRef.current) {
+                  initialInputConsumedRef.current = true;
+                  onInitialInputConsumed?.();
+                }
+              },
               onSubmit: handleSendMessage,
-              attachments: state.attachments,
-              onAttachmentsChange: (attachments) => setState((prev) => ({ ...prev, attachments })),
+              attachments,
+              onAttachmentsChange: setAttachments,
               placeholder: config.labels.inputPlaceholder,
               disabled: false,
               isGenerating,
@@ -3810,7 +4144,7 @@ var ChatUI = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    isUserProfileOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       UserProfile,
       {
         isOpen: isUserProfileOpen,
@@ -4074,7 +4408,7 @@ var ThreadManager = ({
         ] }, group)) }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AlertDialog, { open: !!deleteThreadId, onOpenChange: () => setDeleteThreadId(null), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(AlertDialogContent, { children: [
+    deleteThreadId && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AlertDialog, { open: !!deleteThreadId, onOpenChange: () => setDeleteThreadId(null), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(AlertDialogContent, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(AlertDialogHeader, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AlertDialogTitle, { children: config?.labels?.deleteConfirmTitle || "Delete Conversation" }),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AlertDialogDescription, { children: config?.labels?.deleteConfirmDescription || "Are you sure you want to delete this conversation? This action cannot be undone." })