@melony/react 0.1.23 → 0.1.25

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React10 = require('react');
+var React11 = require('react');
 var react = require('nuqs/adapters/react');
 var reactQuery = require('@tanstack/react-query');
 var jsxRuntime = require('react/jsx-runtime');
@@ -10,12 +10,12 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var button = require('@base-ui/react/button');
 var classVarianceAuthority = require('class-variance-authority');
+var mergeProps = require('@base-ui/react/merge-props');
+var useRender = require('@base-ui/react/use-render');
 var ICONS = require('@tabler/icons-react');
 var menu = require('@base-ui/react/menu');
 var separator = require('@base-ui/react/separator');
 var dialog = require('@base-ui/react/dialog');
-var mergeProps = require('@base-ui/react/merge-props');
-var useRender = require('@base-ui/react/use-render');
 var input = require('@base-ui/react/input');
 var select = require('@base-ui/react/select');
 var reactDom = require('react-dom');
@@ -40,7 +40,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React10__namespace = /*#__PURE__*/_interopNamespace(React10);
+var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
 var ICONS__namespace = /*#__PURE__*/_interopNamespace(ICONS);
 
 // src/providers/melony-provider.tsx
@@ -69,7 +69,7 @@ function groupEventsToMessages(events) {
   }
   return messages;
 }
-var MelonyContext = React10.createContext(
+var MelonyContext = React11.createContext(
   void 0
 );
 var defaultQueryClient = new reactQuery.QueryClient({
@@ -84,41 +84,78 @@ var MelonyContextProviderInner = ({
   children,
   client,
   initialEvents,
-  configApi,
   setContextValue
 }) => {
-  const [state, setState] = React10.useState(client.getState());
+  const [state, setState] = React11.useState(client.getState());
   const { data: config } = reactQuery.useQuery({
-    queryKey: ["melony-config", configApi],
-    queryFn: () => client.getConfig(configApi),
-    enabled: !!configApi,
+    queryKey: ["melony-config", client.url],
+    queryFn: () => client.getConfig(),
     staleTime: Infinity
   });
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
       client.reset(initialEvents);
     }
   }, [client, initialEvents]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     setState(client.getState());
     const unsubscribe = client.subscribe(setState);
     return () => {
       unsubscribe();
     };
   }, [client]);
-  const sendEvent = React10.useCallback(
+  const reset = React11.useCallback(
+    (events) => client.reset(events),
+    [client]
+  );
+  const dispatchClientAction = React11.useCallback(
+    async (event) => {
+      if (!event.type.startsWith("client:")) return false;
+      switch (event.type) {
+        case "client:navigate": {
+          const url = event.data?.url;
+          if (url) {
+            window.history.pushState(null, "", url);
+            window.dispatchEvent(new PopStateEvent("popstate"));
+          }
+          return true;
+        }
+        case "client:open-url": {
+          const { url, target = "_blank" } = event.data || {};
+          if (url) {
+            window.open(url, target);
+          }
+          return true;
+        }
+        case "client:copy": {
+          const { text } = event.data || {};
+          if (text) {
+            await navigator.clipboard.writeText(text);
+          }
+          return true;
+        }
+        case "client:reset": {
+          reset([]);
+          return true;
+        }
+        default:
+          return false;
+      }
+    },
+    [client, reset]
+  );
+  const sendEvent = React11.useCallback(
     async (event, options) => {
+      const handled = await dispatchClientAction(event);
+      if (handled) return;
       const generator = client.sendEvent(event, options);
-      for await (const _ of generator) {
+      for await (const incomingEvent of generator) {
+        await dispatchClientAction(incomingEvent);
       }
     },
-    [client]
+    [client, dispatchClientAction]
   );
-  const reset = React10.useCallback(
-    (events) => client.reset(events),
-    [client]
-  );
-  const value = React10.useMemo(
+  const value = React11.useMemo(
     () => ({
       ...state,
       messages: groupEventsToMessages(state.events),
@@ -129,7 +166,7 @@ var MelonyContextProviderInner = ({
     }),
     [state, sendEvent, reset, client, config]
   );
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     setContextValue(value);
   }, [value, setContextValue]);
   return /* @__PURE__ */ jsxRuntime.jsx(react.NuqsAdapter, { children });
@@ -138,31 +175,29 @@ var MelonyClientProvider = ({
   children,
   client,
   initialEvents,
-  queryClient = defaultQueryClient,
-  configApi
+  queryClient = defaultQueryClient
 }) => {
-  const [contextValue, setContextValue] = React10.useState(void 0);
+  const [contextValue, setContextValue] = React11.useState(void 0);
   return /* @__PURE__ */ jsxRuntime.jsx(MelonyContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(
     MelonyContextProviderInner,
     {
       client,
       initialEvents,
-      configApi,
       setContextValue,
       children
     }
   ) }) });
 };
-var AuthContext = React10.createContext(
+var AuthContext = React11.createContext(
   void 0
 );
 var AuthProvider = ({
   children,
   service
 }) => {
-  const [user, setUser] = React10.useState(null);
-  const [isLoading, setIsLoading] = React10.useState(true);
-  const fetchMe = React10.useCallback(async () => {
+  const [user, setUser] = React11.useState(null);
+  const [isLoading, setIsLoading] = React11.useState(true);
+  const fetchMe = React11.useCallback(async () => {
     setIsLoading(true);
     try {
       const userData = await service.getMe();
@@ -174,13 +209,13 @@ var AuthProvider = ({
       setIsLoading(false);
     }
   }, [service]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     fetchMe();
   }, [fetchMe]);
-  const login = React10.useCallback(() => {
+  const login = React11.useCallback(() => {
     service.login();
   }, [service]);
-  const logout = React10.useCallback(async () => {
+  const logout = React11.useCallback(async () => {
     try {
       await service.logout();
       setUser(null);
@@ -216,7 +251,7 @@ var AuthProvider = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children });
 };
-var ThreadContext = React10.createContext(
+var ThreadContext = React11.createContext(
   void 0
 );
 var ThreadProvider = ({
@@ -225,7 +260,7 @@ var ThreadProvider = ({
   initialThreadId: providedInitialThreadId
 }) => {
   const queryClient = reactQuery.useQueryClient();
-  const defaultInitialThreadId = React10.useMemo(() => client.generateId(), []);
+  const defaultInitialThreadId = React11.useMemo(() => client.generateId(), []);
   const initialThreadId = providedInitialThreadId || defaultInitialThreadId;
   const [activeThreadId, setActiveThreadId] = nuqs.useQueryState(
     "threadId",
@@ -266,22 +301,22 @@ var ThreadProvider = ({
       }
     }
   });
-  const selectThread = React10.useCallback(
+  const selectThread = React11.useCallback(
     (threadId) => {
       setActiveThreadId(threadId);
     },
     [setActiveThreadId]
   );
-  const createThread = React10.useCallback(async () => {
+  const createThread = React11.useCallback(async () => {
     return createMutation.mutateAsync();
   }, [createMutation]);
-  const deleteThread = React10.useCallback(
+  const deleteThread = React11.useCallback(
     async (threadId) => {
       return deleteMutation.mutateAsync(threadId);
     },
     [deleteMutation]
   );
-  const value = React10.useMemo(
+  const value = React11.useMemo(
     () => ({
       threads,
       activeThreadId,
@@ -311,11 +346,11 @@ var ThreadProvider = ({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ThreadContext.Provider, { value, children });
 };
-var ThemeContext = React10.createContext(void 0);
+var ThemeContext = React11.createContext(void 0);
 function ThemeProvider({ children }) {
-  const [theme, setThemeState] = React10.useState("system");
-  const [resolvedTheme, setResolvedTheme] = React10.useState("light");
-  React10.useEffect(() => {
+  const [theme, setThemeState] = React11.useState("system");
+  const [resolvedTheme, setResolvedTheme] = React11.useState("light");
+  React11.useEffect(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem("theme");
       if (stored) {
@@ -323,7 +358,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, []);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (typeof window !== "undefined") {
       if (theme === "system") {
         const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -338,7 +373,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, [theme]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (typeof window !== "undefined") {
       const root = document.documentElement;
       if (resolvedTheme === "dark") {
@@ -357,21 +392,21 @@ function ThemeProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, resolvedTheme }, children });
 }
 function useTheme() {
-  const context = React10.useContext(ThemeContext);
+  const context = React11.useContext(ThemeContext);
   if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
   return context;
 }
 var useMelony = (options) => {
-  const context = React10.useContext(MelonyContext);
+  const context = React11.useContext(MelonyContext);
   if (context === void 0) {
     throw new Error("useMelony must be used within a MelonyClientProvider");
   }
   const { client, reset } = context;
   const { initialEvents } = options || {};
-  const prevInitialEventsRef = React10.useRef(void 0);
-  React10.useEffect(() => {
+  const prevInitialEventsRef = React11.useRef(void 0);
+  React11.useEffect(() => {
     const currentSerialized = initialEvents ? JSON.stringify(initialEvents) : void 0;
     if (currentSerialized !== prevInitialEventsRef.current) {
       if (initialEvents) {
@@ -385,19 +420,60 @@ var useMelony = (options) => {
   return context;
 };
 var useAuth = () => {
-  const context = React10.useContext(AuthContext);
+  const context = React11.useContext(AuthContext);
   if (context === void 0) {
     throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
 };
 var useThreads = () => {
-  const context = React10.useContext(ThreadContext);
+  const context = React11.useContext(ThreadContext);
   if (context === void 0) {
     throw new Error("useThreads must be used within a ThreadProvider");
   }
   return context;
 };
+function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
+  const [screenSize, setScreenSize] = React11.useState(() => {
+    if (typeof window === "undefined") {
+      return {
+        width: 1024,
+        height: 768,
+        isMobile: false,
+        isTablet: false,
+        isDesktop: true
+      };
+    }
+    const width = window.innerWidth;
+    return {
+      width,
+      height: window.innerHeight,
+      isMobile: width < mobileBreakpoint,
+      isTablet: width >= mobileBreakpoint && width < tabletBreakpoint,
+      isDesktop: width >= tabletBreakpoint
+    };
+  });
+  React11.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const updateScreenSize = () => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      setScreenSize({
+        width,
+        height,
+        isMobile: width < mobileBreakpoint,
+        isTablet: width >= mobileBreakpoint && width < tabletBreakpoint,
+        isDesktop: width >= tabletBreakpoint
+      });
+    };
+    updateScreenSize();
+    window.addEventListener("resize", updateScreenSize);
+    return () => {
+      window.removeEventListener("resize", updateScreenSize);
+    };
+  }, [mobileBreakpoint, tabletBreakpoint]);
+  return screenSize;
+}
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -458,6 +534,45 @@ function Textarea({ className, ...props }) {
     }
   );
 }
+var badgeVariants = classVarianceAuthority.cva(
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}) {
+  return useRender.useRender({
+    defaultTagName: "span",
+    props: mergeProps.mergeProps(
+      {
+        className: cn(badgeVariants({ className, variant }))
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant
+    }
+  });
+}
 function DropdownMenu({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
 }
@@ -584,11 +699,18 @@ function Composer({
   className,
   options = [],
   autoFocus = false,
-  defaultSelectedIds = []
+  defaultSelectedIds = [],
+  fileAttachments
 }) {
-  const [selectedOptions, setSelectedOptions] = React10__namespace.default.useState(
+  const enabled = fileAttachments?.enabled || false;
+  const accept = fileAttachments?.accept;
+  const maxFiles = fileAttachments?.maxFiles ?? 10;
+  const maxFileSize = fileAttachments?.maxFileSize ?? 10 * 1024 * 1024;
+  const [selectedOptions, setSelectedOptions] = React11__namespace.default.useState(
     () => new Set(defaultSelectedIds)
   );
+  const [attachedFiles, setAttachedFiles] = React11__namespace.default.useState([]);
+  const fileInputRef = React11__namespace.default.useRef(null);
   const toggleOption = (id, groupOptions, type = "multiple") => {
     const next = new Set(selectedOptions);
     if (type === "single") {
@@ -608,7 +730,38 @@ function Composer({
     }
     setSelectedOptions(next);
   };
-  const handleInternalSubmit = () => {
+  const handleFileSelect = (e) => {
+    const files = Array.from(e.target.files || []);
+    const validFiles = files.filter((file) => {
+      if (file.size > maxFileSize) {
+        console.warn(
+          `File ${file.name} exceeds maximum size of ${maxFileSize} bytes`
+        );
+        return false;
+      }
+      return true;
+    });
+    const remainingSlots = maxFiles - attachedFiles.length;
+    const filesToAdd = validFiles.slice(0, remainingSlots);
+    if (filesToAdd.length < validFiles.length) {
+      console.warn(
+        `Only ${filesToAdd.length} files can be added (max: ${maxFiles})`
+      );
+    }
+    setAttachedFiles((prev) => [...prev, ...filesToAdd]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  const handleRemoveFile = (index) => {
+    setAttachedFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+  const formatFileSize = (bytes) => {
+    if (bytes < 1024) return bytes + " B";
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  };
+  const handleInternalSubmit = async () => {
     const state = {};
     options.forEach((group) => {
       const selectedInGroup = group.options.filter(
@@ -625,12 +778,52 @@ function Composer({
         }
       }
     });
+    if (attachedFiles.length > 0) {
+      const filePromises = attachedFiles.map((file) => {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => {
+            try {
+              const base64 = reader.result;
+              if (!base64) {
+                reject(new Error("FileReader returned empty result"));
+                return;
+              }
+              resolve({
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                data: base64
+              });
+            } catch (error) {
+              reject(error);
+            }
+          };
+          reader.onerror = (error) => {
+            reject(new Error(`Failed to read file ${file.name}: ${error}`));
+          };
+          reader.onabort = () => {
+            reject(new Error(`File read aborted for ${file.name}`));
+          };
+          reader.readAsDataURL(file);
+        });
+      });
+      try {
+        const convertedFiles = await Promise.all(filePromises);
+        if (convertedFiles.length > 0) {
+          state.files = convertedFiles;
+        }
+      } catch (error) {
+        console.error("Failed to convert files to base64:", error);
+      }
+    }
     onSubmit(state);
+    setAttachedFiles([]);
   };
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      handleInternalSubmit();
+      handleInternalSubmit().catch(console.error);
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative flex flex-col w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col w-full border-input border-[1.5px] rounded-3xl bg-background shadow-sm focus-within:border-ring transition-all p-2", children: [
@@ -646,59 +839,171 @@ function Composer({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center px-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: options.map((group) => {
-        const selectedInGroup = group.options.filter(
-          (o) => selectedOptions.has(o.id)
-        );
-        const label = selectedInGroup.length === 0 ? group.label : selectedInGroup.length === 1 ? selectedInGroup[0].label : `${group.label} (${selectedInGroup.length})`;
-        const isSingle = group.type === "single";
-        return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        enabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            DropdownMenuTrigger,
+            "input",
             {
-              render: /* @__PURE__ */ jsxRuntime.jsxs(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  className: cn(
-                    selectedInGroup.length > 0 ? "text-foreground bg-muted/50" : "text-muted-foreground"
-                  ),
-                  children: [
-                    label,
-                    /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronDown, { className: "h-3 w-3 opacity-50" })
-                  ]
-                }
-              )
+              ref: fileInputRef,
+              type: "file",
+              multiple: true,
+              accept,
+              onChange: handleFileSelect,
+              className: "hidden",
+              disabled: isLoading || attachedFiles.length >= maxFiles
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", className: "w-56", children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuGroup, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuLabel, { children: group.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-            group.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-              DropdownMenuCheckboxItem,
+          attachedFiles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: () => fileInputRef.current?.click(),
+              disabled: isLoading,
+              className: "text-muted-foreground",
+              title: "Attach file",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPaperclip, { className: "h-4 w-4" })
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenuTrigger,
               {
-                checked: selectedOptions.has(option.id),
-                onCheckedChange: () => toggleOption(
-                  option.id,
-                  group.options,
-                  isSingle ? "single" : "multiple"
-                ),
-                onSelect: (e) => e.preventDefault(),
-                children: option.label
-              },
-              option.id
-            ))
-          ] }) })
-        ] }, group.id);
-      }) }),
+                render: /* @__PURE__ */ jsxRuntime.jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    className: "text-muted-foreground gap-2",
+                    title: `${attachedFiles.length} files attached`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPaperclip, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "h-[18px] min-w-[18px] px-1.5 text-[10px]", children: attachedFiles.length })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuGroup, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuLabel, { children: [
+                  "Attached Files (",
+                  attachedFiles.length,
+                  "/",
+                  maxFiles,
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+                attachedFiles.map((file, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  DropdownMenuItem,
+                  {
+                    className: "flex items-center justify-between group",
+                    onSelect: (e) => e.preventDefault(),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: "truncate text-sm",
+                            title: file.name,
+                            children: file.name
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatFileSize(file.size) })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Button,
+                        {
+                          type: "button",
+                          variant: "ghost",
+                          size: "icon",
+                          className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
+                          onClick: () => handleRemoveFile(index),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconX, { className: "h-3 w-3" })
+                        }
+                      )
+                    ]
+                  },
+                  index
+                ))
+              ] }),
+              attachedFiles.length < maxFiles && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  DropdownMenuItem,
+                  {
+                    onSelect: (e) => {
+                      e.preventDefault();
+                      fileInputRef.current?.click();
+                    },
+                    className: "text-primary focus:text-primary",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPlus, { className: "mr-2 h-4 w-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Add more files" })
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        options.map((group) => {
+          const selectedInGroup = group.options.filter(
+            (o) => selectedOptions.has(o.id)
+          );
+          const label = selectedInGroup.length === 0 ? group.label : selectedInGroup.length === 1 ? selectedInGroup[0].label : group.label;
+          const isSingle = group.type === "single";
+          return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenuTrigger,
+              {
+                render: /* @__PURE__ */ jsxRuntime.jsxs(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: cn(
+                      "gap-2",
+                      selectedInGroup.length > 0 ? "text-foreground bg-muted/50" : "text-muted-foreground"
+                    ),
+                    children: [
+                      label,
+                      selectedInGroup.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "h-[18px] min-w-[18px] px-1.5 text-[10px]", children: selectedInGroup.length }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronDown, { className: "h-3 w-3 opacity-50" })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", className: "w-56", children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuGroup, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuLabel, { children: group.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+              group.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                DropdownMenuCheckboxItem,
+                {
+                  checked: selectedOptions.has(option.id),
+                  onCheckedChange: () => toggleOption(
+                    option.id,
+                    group.options,
+                    isSingle ? "single" : "multiple"
+                  ),
+                  onSelect: (e) => e.preventDefault(),
+                  children: option.label
+                },
+                option.id
+              ))
+            ] }) })
+          ] }, group.id);
+        })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
           type: "submit",
-          disabled: !value.trim() && !isLoading || isLoading,
+          disabled: !value.trim() && attachedFiles.length === 0 && !isLoading || isLoading,
           size: "icon-lg",
-          onClick: handleInternalSubmit,
+          onClick: () => handleInternalSubmit().catch(console.error),
           children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconArrowUp, { className: "h-5 w-5" })
         }
       )
@@ -835,8 +1140,6 @@ var Col = ({
   gap = "sm",
   align = "start",
   justify = "start",
-  wrap = "nowrap",
-  flex = 1,
   width,
   height,
   padding,
@@ -886,13 +1189,11 @@ var Col = ({
         gapClasses[gap] || "gap-2",
         alignClasses[align] || "items-start",
         justifyClasses[justify] || "justify-start",
-        wrap === "wrap" ? "flex-wrap" : "flex-nowrap",
         overflow && overflowClasses[overflow],
         position && positionClasses[position],
         className
       ),
       style: {
-        flex,
         width,
         height,
         padding,
@@ -1200,9 +1501,9 @@ var Image = ({
   className,
   style
 }) => {
-  const [hasError, setHasError] = React10.useState(false);
-  const [isLoading, setIsLoading] = React10.useState(true);
-  const [open, setOpen] = React10.useState(false);
+  const [hasError, setHasError] = React11.useState(false);
+  const [isLoading, setIsLoading] = React11.useState(true);
+  const [open, setOpen] = React11.useState(false);
   const sizes = {
     sm: "h-11",
     md: "h-22",
@@ -1326,45 +1627,6 @@ var Icon = ({
     }
   );
 };
-var badgeVariants = classVarianceAuthority.cva(
-  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
-        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({
-  className,
-  variant = "default",
-  render,
-  ...props
-}) {
-  return useRender.useRender({
-    defaultTagName: "span",
-    props: mergeProps.mergeProps(
-      {
-        className: cn(badgeVariants({ className, variant }))
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "badge",
-      variant
-    }
-  });
-}
 var Badge2 = ({
   label,
   variant = "primary",
@@ -1400,7 +1662,7 @@ var Chart = ({
   className,
   style
 }) => {
-  const [tooltip, setTooltip] = React10.useState(null);
+  const [tooltip, setTooltip] = React11.useState(null);
   if (!Array.isArray(data)) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-destructive border border-destructive/20 rounded-md bg-destructive/5", children: "Error: Chart data must be an array" });
   }
@@ -1953,9 +2215,9 @@ var Select2 = ({
         defaultValue,
         value,
         disabled,
-        onValueChange: handleValueChange,
+        onValueChange: (value2) => handleValueChange(value2 || ""),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: placeholder || "Select an option" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
           /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
         ]
       }
@@ -1985,7 +2247,6 @@ var Label2 = ({
 var Checkbox = ({
   label,
   name,
-  value = "on",
   checked,
   defaultChecked,
   disabled,
@@ -2000,46 +2261,37 @@ var Checkbox = ({
         ...onChangeAction,
         data: {
           name: name || "",
-          value,
           checked: e.target.checked
         }
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn("flex items-center gap-2", className),
-      style,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            name,
-            id: name,
-            value,
-            checked,
-            defaultChecked,
-            disabled,
-            onChange: handleChange,
-            className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
-          }
-        ),
-        label && /* @__PURE__ */ jsxRuntime.jsx(
-          Label2,
-          {
-            htmlFor: name,
-            value: label,
-            className: cn(
-              "cursor-pointer select-none text-sm font-medium leading-none",
-              disabled && "cursor-not-allowed opacity-50"
-            )
-          }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        name,
+        id: name,
+        checked,
+        defaultChecked,
+        disabled,
+        onChange: handleChange,
+        className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      Label2,
+      {
+        htmlFor: name,
+        value: label,
+        className: cn(
+          "cursor-pointer select-none text-sm font-medium leading-none",
+          disabled && "cursor-not-allowed opacity-50"
         )
-      ]
-    }
-  );
+      }
+    )
+  ] });
 };
 var RadioGroup = ({
   name,
@@ -2156,7 +2408,7 @@ var Button2 = ({
 };
 var Form = ({ children, onSubmitAction, className, style }) => {
   const { sendEvent } = useMelony();
-  const [isSubmitted, setIsSubmitted] = React10.useState(false);
+  const [isSubmitted, setIsSubmitted] = React11.useState(false);
   const handleSubmit = (e) => {
     e.preventDefault();
     if (isSubmitted) return;
@@ -2303,7 +2555,7 @@ function MessageBubble({ message }) {
   );
 }
 function LoadingIndicator({ status }) {
-  const [isExpanded, setIsExpanded] = React10.useState(false);
+  const [isExpanded, setIsExpanded] = React11.useState(false);
   const message = status?.message || "Processing...";
   const details = status?.details;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -2335,7 +2587,7 @@ function MessageList({
   if (messages.length === 0) {
     return null;
   }
-  const isTextStreaming = React10.useMemo(() => {
+  const isTextStreaming = React11.useMemo(() => {
     if (messages.length === 0 || !isLoading) return false;
     const lastMessage = messages[messages.length - 1];
     return lastMessage.content.some((event) => event.type === "text-delta");
@@ -2362,28 +2614,31 @@ function Thread({
   });
   const starterPrompts = localStarterPrompts ?? config?.starterPrompts;
   const options = localOptions ?? config?.options;
-  const allDefaultSelectedIds = React10.useMemo(() => {
-    const defaultSelectedIdsFromOptions = options?.flatMap(
-      (group) => group.defaultSelectedIds ?? []
-    ) ?? [];
+  const fileAttachments = config?.fileAttachments;
+  const allDefaultSelectedIds = React11.useMemo(() => {
+    const defaultSelectedIdsFromOptions = options?.flatMap((group) => group.defaultSelectedIds ?? []) ?? [];
     return [
-      .../* @__PURE__ */ new Set([...defaultSelectedIdsFromOptions, ...defaultSelectedIds ?? []])
+      .../* @__PURE__ */ new Set([
+        ...defaultSelectedIdsFromOptions,
+        ...defaultSelectedIds ?? []
+      ])
     ];
   }, [options, defaultSelectedIds]);
-  const [input, setInput] = React10.useState("");
-  const messagesEndRef = React10.useRef(null);
-  React10.useEffect(() => {
+  const [input, setInput] = React11.useState("");
+  const messagesEndRef = React11.useRef(null);
+  React11.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const handleSubmit = async (state, overrideInput) => {
     const text = (overrideInput ?? input).trim();
-    if (!text || isLoading) return;
+    const hasFiles = state?.files && Array.isArray(state.files) && state.files.length > 0;
+    if (!text && !hasFiles || isLoading) return;
     if (!overrideInput) setInput("");
     await sendEvent(
       {
         type: "text",
         role: "user",
-        data: { content: text }
+        data: { content: text || "" }
       },
       { state: { ...state, threadId: activeThreadId ?? void 0 } }
     );
@@ -2441,7 +2696,8 @@ function Thread({
             isLoading,
             options,
             autoFocus,
-            defaultSelectedIds: allDefaultSelectedIds
+            defaultSelectedIds: allDefaultSelectedIds,
+            fileAttachments
           }
         ) }) })
       ]
@@ -2449,20 +2705,36 @@ function Thread({
   );
 }
 function ChatHeader({
-  title,
   leftContent,
   rightContent,
   className,
-  titleClassName,
   children
 }) {
   if (children) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-4 border-b border-border h-14 flex items-center shrink-0", className), children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "px-2 border-b border-border h-14 flex items-center shrink-0",
+          className
+        ),
+        children
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("p-4 border-b border-border h-14 flex items-center justify-between shrink-0", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: leftContent }),
-    rightContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 shrink-0 ml-2", children: rightContent })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "px-2 border-b border-border h-14 flex items-center justify-between shrink-0",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: leftContent }),
+        rightContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 shrink-0 ml-2", children: rightContent })
+      ]
+    }
+  );
 }
 var ThreadList = ({
   className,
@@ -2513,58 +2785,43 @@ var ThreadList = ({
     if (diffDays < 7) return `${diffDays}d ago`;
     return d.toLocaleDateString();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading && threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "size-5 animate-spin text-muted-foreground" }) }) : threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconMessage, { className: "size-8 mx-auto opacity-50" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "No threads yet" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: handleNewThread, children: "Start a conversation" })
+  ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 space-y-1", children: threads.map((thread) => {
+    const isActive = thread.id === activeThreadId;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        variant: "ghost",
-        size: "sm",
-        onClick: handleNewThread,
-        className: "w-full justify-start",
+        onClick: () => handleThreadClick(thread.id),
+        className: cn(
+          "group relative flex items-center gap-3 px-3 py-1.5 rounded-lg cursor-pointer transition-colors",
+          isActive ? "bg-muted" : "hover:bg-muted"
+        ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPlus, { className: "mr-2 size-4" }),
-          "New Thread"
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-medium truncate"), children: thread.title || `Thread ${thread.id.slice(0, 8)}` }),
+            thread.updatedAt && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs shrink-0"), children: formatDate(thread.updatedAt) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon-xs",
+              onClick: (e) => handleDelete(e, thread.id),
+              className: cn(
+                "opacity-0 group-hover:opacity-100 transition-opacity shrink-0",
+                isActive && "hover:bg-primary-foreground/20"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconTrash, { className: "size-3" })
+            }
+          )
         ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading && threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "size-5 animate-spin text-muted-foreground" }) }) : threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconMessage, { className: "size-8 mx-auto opacity-50" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "No threads yet" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: handleNewThread, children: "Start a conversation" })
-    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 space-y-1", children: threads.map((thread) => {
-      const isActive = thread.id === activeThreadId;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          onClick: () => handleThreadClick(thread.id),
-          className: cn(
-            "group relative flex items-center gap-3 px-3 py-1.5 rounded-lg cursor-pointer transition-colors",
-            isActive ? "bg-muted" : "hover:bg-muted"
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-medium truncate"), children: thread.title || `Thread ${thread.id.slice(0, 8)}` }),
-              thread.updatedAt && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs shrink-0"), children: formatDate(thread.updatedAt) })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon-xs",
-                onClick: (e) => handleDelete(e, thread.id),
-                className: cn(
-                  "opacity-0 group-hover:opacity-100 transition-opacity shrink-0",
-                  isActive && "hover:bg-primary-foreground/20"
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconTrash, { className: "size-3" })
-              }
-            )
-          ]
-        },
-        thread.id
-      );
-    }) }) })
-  ] });
+      },
+      thread.id
+    );
+  }) }) }) });
 };
 function ChatPopup({
   title = "Chat",
@@ -2575,8 +2832,8 @@ function ChatPopup({
   headerProps,
   defaultSelectedIds
 }) {
-  const [isOpen, setIsOpen] = React10.useState(defaultOpen);
-  const [view, setView] = React10.useState("chat");
+  const [isOpen, setIsOpen] = React11.useState(defaultOpen);
+  const [view, setView] = React11.useState("chat");
   const { createThread } = useThreads();
   const handleNewChat = async () => {
     try {
@@ -2693,6 +2950,16 @@ function ChatSidebar({
     ) })
   ] });
 }
+var ChatSidebarContext = React11.createContext(
+  void 0
+);
+function useChatSidebar() {
+  const context = React11.useContext(ChatSidebarContext);
+  if (context === void 0) {
+    throw new Error("useChatSidebar must be used within a ChatSidebarProvider");
+  }
+  return context;
+}
 function ChatFull({
   title = "Chat",
   placeholder = "Message the AI",
@@ -2704,134 +2971,134 @@ function ChatFull({
   rightSidebar,
   leftSidebarClassName,
   rightSidebarClassName,
-  leftSidebarCollapsible = false,
-  rightSidebarCollapsible = false,
-  defaultLeftSidebarCollapsed = false,
-  defaultRightSidebarCollapsed = false,
-  leftSidebarCollapsed: controlledLeftCollapsed,
-  rightSidebarCollapsed: controlledRightCollapsed,
-  onLeftSidebarCollapseChange,
-  onRightSidebarCollapseChange,
   autoFocus = false,
   defaultSelectedIds
 }) {
-  const [internalLeftCollapsed, setInternalLeftCollapsed] = React10.useState(
-    defaultLeftSidebarCollapsed
-  );
-  const [internalRightCollapsed, setInternalRightCollapsed] = React10.useState(
-    defaultRightSidebarCollapsed
-  );
-  const leftCollapsed = controlledLeftCollapsed !== void 0 ? controlledLeftCollapsed : internalLeftCollapsed;
-  const rightCollapsed = controlledRightCollapsed !== void 0 ? controlledRightCollapsed : internalRightCollapsed;
-  const handleLeftToggle = () => {
-    const newCollapsed = !leftCollapsed;
-    if (controlledLeftCollapsed === void 0) {
-      setInternalLeftCollapsed(newCollapsed);
+  const { isMobile, isTablet } = useScreenSize();
+  const isSmallScreen = isMobile || isTablet;
+  const [internalLeftCollapsed, setInternalLeftCollapsed] = React11.useState(() => {
+    if (typeof window !== "undefined") {
+      return window.innerWidth < 1024;
     }
-    onLeftSidebarCollapseChange?.(newCollapsed);
-  };
-  const handleRightToggle = () => {
-    const newCollapsed = !rightCollapsed;
-    if (controlledRightCollapsed === void 0) {
-      setInternalRightCollapsed(newCollapsed);
+    return false;
+  });
+  const [internalRightCollapsed, setInternalRightCollapsed] = React11.useState(() => {
+    if (typeof window !== "undefined") {
+      return window.innerWidth < 1024;
     }
-    onRightSidebarCollapseChange?.(newCollapsed);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full w-full bg-background", className), children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(ChatHeader, { title, ...headerProps }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-hidden flex relative", children: [
-      leftSidebar && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "flex-shrink-0 border-r border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
-              leftCollapsed && leftSidebarCollapsible ? "w-0 border-r-0 min-w-0" : "",
-              !leftCollapsed && leftSidebarClassName
-            ),
-            children: !leftCollapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              leftSidebarCollapsible && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end p-2 border-b border-border shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  onClick: handleLeftToggle,
-                  "aria-label": "Collapse left sidebar",
-                  className: "h-8 w-8",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronLeft, { className: "h-4 w-4" })
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: leftSidebar })
-            ] })
-          }
-        ),
-        leftSidebarCollapsible && leftCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 border-r border-border bg-background flex items-center justify-center w-10", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon-sm",
-            onClick: handleLeftToggle,
-            "aria-label": "Expand left sidebar",
-            className: "h-8 w-8",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronRight, { className: "h-4 w-4" })
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-        Thread,
-        {
-          placeholder,
-          starterPrompts,
-          options,
-          autoFocus,
-          defaultSelectedIds
-        }
-      ) }),
-      rightSidebar && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        rightSidebarCollapsible && rightCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 border-l border-border bg-background flex items-center justify-center w-10", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon-sm",
-            onClick: handleRightToggle,
-            "aria-label": "Expand right sidebar",
-            className: "h-8 w-8",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronLeft, { className: "h-4 w-4" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "flex-shrink-0 border-l border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
-              rightCollapsed && rightSidebarCollapsible ? "w-0 border-l-0 min-w-0" : "",
-              !rightCollapsed && rightSidebarClassName
-            ),
-            children: !rightCollapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              rightSidebarCollapsible && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start p-2 border-b border-border shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  onClick: handleRightToggle,
-                  "aria-label": "Collapse right sidebar",
-                  className: "h-8 w-8",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronRight, { className: "h-4 w-4" })
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: rightSidebar })
-            ] })
-          }
-        )
-      ] })
-    ] })
-  ] });
+    return false;
+  });
+  React11.useEffect(() => {
+    if (isSmallScreen) {
+      setInternalLeftCollapsed(true);
+      setInternalRightCollapsed(true);
+    }
+  }, [isSmallScreen]);
+  const leftCollapsed = internalLeftCollapsed;
+  const rightCollapsed = internalRightCollapsed;
+  const handleLeftToggle = React11.useCallback((collapsed) => {
+    setInternalLeftCollapsed(collapsed);
+  }, []);
+  const handleRightToggle = React11.useCallback((collapsed) => {
+    setInternalRightCollapsed(collapsed);
+  }, []);
+  const contextValue = React11.useMemo(
+    () => ({
+      leftCollapsed,
+      rightCollapsed,
+      setLeftCollapsed: handleLeftToggle,
+      setRightCollapsed: handleRightToggle,
+      leftCollapsible: true,
+      rightCollapsible: true
+    }),
+    [leftCollapsed, rightCollapsed, handleLeftToggle, handleRightToggle]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ChatSidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("flex flex-col h-full w-full bg-background", className),
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(ChatHeader, { title, ...headerProps }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-hidden flex relative", children: [
+          leftSidebar && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex-shrink-0 border-r border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
+                leftCollapsed ? "w-0 border-r-0 min-w-0" : "",
+                !leftCollapsed && leftSidebarClassName
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: leftSidebar })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Thread,
+            {
+              placeholder,
+              starterPrompts,
+              options,
+              autoFocus,
+              defaultSelectedIds
+            }
+          ) }),
+          rightSidebar && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex-shrink-0 border-l border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
+                rightCollapsed ? "w-0 border-l-0 min-w-0" : "",
+                !rightCollapsed && rightSidebarClassName
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: rightSidebar })
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function SidebarToggle({ side, className }) {
+  const {
+    leftCollapsed,
+    rightCollapsed,
+    setLeftCollapsed,
+    setRightCollapsed,
+    leftCollapsible,
+    rightCollapsible
+  } = useChatSidebar();
+  if (side === "left") {
+    if (!leftCollapsible) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "ghost",
+        onClick: () => setLeftCollapsed(!leftCollapsed),
+        "aria-label": leftCollapsed ? "Expand left sidebar" : "Collapse left sidebar",
+        className: cn("", className),
+        children: leftCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLayoutSidebarLeftExpand, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLayoutSidebarLeftCollapse, { className: "h-4 w-4" })
+      }
+    );
+  }
+  if (side === "right") {
+    if (!rightCollapsible) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "ghost",
+        onClick: () => setRightCollapsed(!rightCollapsed),
+        "aria-label": rightCollapsed ? "Expand right sidebar" : "Collapse right sidebar",
+        className: cn("", className),
+        children: rightCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLayoutSidebarRightExpand, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLayoutSidebarRightCollapse, { className: "h-4 w-4" })
+      }
+    );
+  }
+  return null;
 }
-var PopoverContext = React10__namespace.createContext(
+var PopoverContext = React11__namespace.createContext(
   void 0
 );
 function usePopoverContext() {
-  const context = React10__namespace.useContext(PopoverContext);
+  const context = React11__namespace.useContext(PopoverContext);
   if (!context) {
     throw new Error("Popover components must be used within a Popover");
   }
@@ -2843,10 +3110,10 @@ function Popover({
   open: controlledOpen,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = React10__namespace.useState(defaultOpen);
-  const triggerRef = React10__namespace.useRef(null);
+  const [internalOpen, setInternalOpen] = React11__namespace.useState(defaultOpen);
+  const triggerRef = React11__namespace.useRef(null);
   const open = controlledOpen ?? internalOpen;
-  const setOpen = React10__namespace.useCallback(
+  const setOpen = React11__namespace.useCallback(
     (newOpen) => {
       if (controlledOpen === void 0) {
         setInternalOpen(newOpen);
@@ -2855,7 +3122,7 @@ function Popover({
     },
     [controlledOpen, onOpenChange]
   );
-  const value = React10__namespace.useMemo(
+  const value = React11__namespace.useMemo(
     () => ({
       open,
       setOpen,
@@ -2865,15 +3132,15 @@ function Popover({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value, children });
 }
-var PopoverTrigger = React10__namespace.forwardRef(
+var PopoverTrigger = React11__namespace.forwardRef(
   ({ asChild, className, children, ...props }, ref) => {
     const { setOpen, triggerRef } = usePopoverContext();
     const handleClick = (e) => {
       setOpen(true);
       props.onClick?.(e);
     };
-    if (asChild && React10__namespace.isValidElement(children)) {
-      return React10__namespace.cloneElement(children, {
+    if (asChild && React11__namespace.isValidElement(children)) {
+      return React11__namespace.cloneElement(children, {
         ref: (node) => {
           triggerRef.current = node;
           if (typeof children.ref === "function") {
@@ -2905,7 +3172,7 @@ var PopoverTrigger = React10__namespace.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React10__namespace.forwardRef(
+var PopoverContent = React11__namespace.forwardRef(
   ({
     className,
     side = "bottom",
@@ -2916,9 +3183,9 @@ var PopoverContent = React10__namespace.forwardRef(
     ...props
   }, ref) => {
     const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React10__namespace.useState({ top: 0, left: 0 });
-    const contentRef = React10__namespace.useRef(null);
-    React10__namespace.useEffect(() => {
+    const [position, setPosition] = React11__namespace.useState({ top: 0, left: 0 });
+    const contentRef = React11__namespace.useRef(null);
+    React11__namespace.useEffect(() => {
       if (!open || !triggerRef.current) return;
       const updatePosition = () => {
         if (!triggerRef.current || !contentRef.current) return;
@@ -2979,7 +3246,7 @@ var PopoverContent = React10__namespace.forwardRef(
         window.removeEventListener("scroll", updatePosition, true);
       };
     }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React10__namespace.useEffect(() => {
+    React11__namespace.useEffect(() => {
       if (!open) return;
       const handleClickOutside = (event) => {
         if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -3035,7 +3302,7 @@ var ThreadPopover = ({
   emptyState,
   onThreadSelect
 }) => {
-  const [isOpen, setIsOpen] = React10__namespace.useState(false);
+  const [isOpen, setIsOpen] = React11__namespace.useState(false);
   reactHotkeysHook.useHotkeys(
     "h",
     (e) => {
@@ -3090,7 +3357,7 @@ var CreateThreadButton = ({
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React10__namespace.useState(false);
+  const [isCreating, setIsCreating] = React11__namespace.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3216,10 +3483,10 @@ var AccountDialog = ({
   size
 }) => {
   const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React10__namespace.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React10__namespace.useState(false);
-  const [error, setError] = React10__namespace.useState(null);
-  const initials = React10__namespace.useMemo(() => {
+  const [open, setOpen] = React11__namespace.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React11__namespace.useState(false);
+  const [error, setError] = React11__namespace.useState(null);
+  const initials = React11__namespace.useMemo(() => {
     const name = user?.displayName || user?.name;
     if (!name) return "";
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
@@ -3395,14 +3662,37 @@ function ThemeToggle() {
 exports.AccountDialog = AccountDialog;
 exports.AuthContext = AuthContext;
 exports.AuthProvider = AuthProvider;
+exports.Badge = Badge2;
+exports.Box = Box;
+exports.Button = Button2;
+exports.Card = Card2;
+exports.Chart = Chart;
 exports.ChatFull = ChatFull;
 exports.ChatHeader = ChatHeader;
 exports.ChatPopup = ChatPopup;
 exports.ChatSidebar = ChatSidebar;
+exports.ChatSidebarContext = ChatSidebarContext;
+exports.Checkbox = Checkbox;
+exports.Col = Col;
 exports.Composer = Composer;
 exports.CreateThreadButton = CreateThreadButton;
+exports.Divider = Divider;
+exports.Form = Form;
+exports.Heading = Heading;
+exports.Image = Image;
+exports.Input = Input2;
+exports.Label = Label2;
+exports.List = List;
+exports.ListItem = ListItem;
 exports.MelonyClientProvider = MelonyClientProvider;
 exports.MelonyContext = MelonyContext;
+exports.RadioGroup = RadioGroup;
+exports.Row = Row;
+exports.Select = Select2;
+exports.SidebarToggle = SidebarToggle;
+exports.Spacer = Spacer;
+exports.Text = Text;
+exports.Textarea = Textarea2;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeToggle = ThemeToggle;
 exports.Thread = Thread;
@@ -3413,7 +3703,9 @@ exports.ThreadProvider = ThreadProvider;
 exports.UIRenderer = UIRenderer;
 exports.groupEventsToMessages = groupEventsToMessages;
 exports.useAuth = useAuth;
+exports.useChatSidebar = useChatSidebar;
 exports.useMelony = useMelony;
+exports.useScreenSize = useScreenSize;
 exports.useTheme = useTheme;
 exports.useThreads = useThreads;
 //# sourceMappingURL=index.cjs.map