@melony/react 0.1.24 → 0.1.25

package/dist/index.js

@@ -1,5 +1,5 @@
-import * as React10 from 'react';
-import React10__default, { createContext, useState, useCallback, useEffect, useMemo, useContext, useRef } from 'react';
+import * as React11 from 'react';
+import React11__default, { createContext, useState, useCallback, useEffect, useMemo, useContext, useRef } from 'react';
 import { NuqsAdapter } from 'nuqs/adapters/react';
 import { QueryClient, QueryClientProvider, useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -9,13 +9,13 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 import * as ICONS from '@tabler/icons-react';
-import { IconX, IconPaperclip, IconChevronDown, IconLoader2, IconArrowUp, IconPlus, IconMessage, IconTrash, IconHistory, IconArrowLeft, IconChevronLeft, IconChevronRight, IconUser, IconLogout, IconBrandGoogle, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconChevronUp, IconSelector } from '@tabler/icons-react';
+import { IconPaperclip, IconX, IconPlus, IconChevronDown, IconLoader2, IconArrowUp, IconMessage, IconTrash, IconHistory, IconArrowLeft, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconUser, IconLogout, IconBrandGoogle, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconSelector, IconChevronUp } from '@tabler/icons-react';
 import { Menu } from '@base-ui/react/menu';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
-import { mergeProps } from '@base-ui/react/merge-props';
-import { useRender } from '@base-ui/react/use-render';
 import { Input as Input$1 } from '@base-ui/react/input';
 import { Select as Select$1 } from '@base-ui/react/select';
 import { createPortal } from 'react-dom';
@@ -63,14 +63,12 @@ var MelonyContextProviderInner = ({
   children,
   client,
   initialEvents,
-  configApi,
   setContextValue
 }) => {
   const [state, setState] = useState(client.getState());
   const { data: config } = useQuery({
-    queryKey: ["melony-config", configApi],
-    queryFn: () => client.getConfig(configApi),
-    enabled: !!configApi,
+    queryKey: ["melony-config", client.url],
+    queryFn: () => client.getConfig(),
     staleTime: Infinity
   });
   useEffect(() => {
@@ -85,17 +83,56 @@ var MelonyContextProviderInner = ({
       unsubscribe();
     };
   }, [client]);
+  const reset = useCallback(
+    (events) => client.reset(events),
+    [client]
+  );
+  const dispatchClientAction = 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 = 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]
-  );
-  const reset = useCallback(
-    (events) => client.reset(events),
-    [client]
+    [client, dispatchClientAction]
   );
   const value = useMemo(
     () => ({
@@ -117,8 +154,7 @@ var MelonyClientProvider = ({
   children,
   client,
   initialEvents,
-  queryClient = defaultQueryClient,
-  configApi
+  queryClient = defaultQueryClient
 }) => {
   const [contextValue, setContextValue] = useState(void 0);
   return /* @__PURE__ */ jsx(MelonyContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(
@@ -126,7 +162,6 @@ var MelonyClientProvider = ({
     {
       client,
       initialEvents,
-      configApi,
       setContextValue,
       children
     }
@@ -377,6 +412,47 @@ var useThreads = () => {
   }
   return context;
 };
+function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
+  const [screenSize, setScreenSize] = 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
+    };
+  });
+  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 twMerge(clsx(inputs));
 }
@@ -437,6 +513,45 @@ function Textarea({ className, ...props }) {
     }
   );
 }
+var badgeVariants = 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({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        className: cn(badgeVariants({ className, variant }))
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant
+    }
+  });
+}
 function DropdownMenu({ ...props }) {
   return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
 }
@@ -564,21 +679,17 @@ function Composer({
   options = [],
   autoFocus = false,
   defaultSelectedIds = [],
-  fileAttachments,
-  // Legacy props for backward compatibility
-  accept: legacyAccept,
-  maxFiles: legacyMaxFiles,
-  maxFileSize: legacyMaxFileSize
+  fileAttachments
 }) {
-  const enabled = fileAttachments?.enabled !== false;
-  const accept = fileAttachments?.accept ?? legacyAccept;
-  const maxFiles = fileAttachments?.maxFiles ?? legacyMaxFiles ?? 10;
-  const maxFileSize = fileAttachments?.maxFileSize ?? legacyMaxFileSize ?? 10 * 1024 * 1024;
-  const [selectedOptions, setSelectedOptions] = React10__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__default.useState(
     () => new Set(defaultSelectedIds)
   );
-  const [attachedFiles, setAttachedFiles] = React10__default.useState([]);
-  const fileInputRef = React10__default.useRef(null);
+  const [attachedFiles, setAttachedFiles] = React11__default.useState([]);
+  const fileInputRef = React11__default.useRef(null);
   const toggleOption = (id, groupOptions, type = "multiple") => {
     const next = new Set(selectedOptions);
     if (type === "single") {
@@ -602,7 +713,9 @@ function Composer({
     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`);
+        console.warn(
+          `File ${file.name} exceeds maximum size of ${maxFileSize} bytes`
+        );
         return false;
       }
       return true;
@@ -610,7 +723,9 @@ function Composer({
     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})`);
+      console.warn(
+        `Only ${filesToAdd.length} files can be added (max: ${maxFiles})`
+      );
     }
     setAttachedFiles((prev) => [...prev, ...filesToAdd]);
     if (fileInputRef.current) {
@@ -653,12 +768,11 @@ function Composer({
                 reject(new Error("FileReader returned empty result"));
                 return;
               }
-              const base64Data = base64.includes(",") ? base64.split(",")[1] : base64;
               resolve({
                 name: file.name,
                 type: file.type,
                 size: file.size,
-                data: base64Data
+                data: base64
               });
             } catch (error) {
               reject(error);
@@ -691,129 +805,189 @@ function Composer({
       handleInternalSubmit().catch(console.error);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex flex-col w-full", className), children: [
-    enabled && attachedFiles.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-2", children: attachedFiles.map((file, index) => /* @__PURE__ */ jsxs(
-      "div",
+  return /* @__PURE__ */ jsx("div", { className: cn("relative flex flex-col w-full", className), children: /* @__PURE__ */ 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: [
+    /* @__PURE__ */ jsx(
+      Textarea,
       {
-        className: "flex items-center gap-2 px-3 py-1.5 bg-muted rounded-lg text-sm",
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate max-w-[200px]", title: file.name, children: file.name }),
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: formatFileSize(file.size) }),
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        className: "min-h-[44px] max-h-[200px] border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-2 text-[15px] resize-none",
+        autoFocus
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center px-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            "button",
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              multiple: true,
+              accept,
+              onChange: handleFileSelect,
+              className: "hidden",
+              disabled: isLoading || attachedFiles.length >= maxFiles
+            }
+          ),
+          attachedFiles.length === 0 ? /* @__PURE__ */ jsx(
+            Button,
             {
               type: "button",
-              onClick: () => handleRemoveFile(index),
-              className: "ml-1 hover:bg-muted-foreground/20 rounded p-0.5 transition-colors",
-              "aria-label": "Remove file",
-              children: /* @__PURE__ */ jsx(IconX, { className: "h-3.5 w-3.5" })
+              variant: "ghost",
+              size: "sm",
+              onClick: () => fileInputRef.current?.click(),
+              disabled: isLoading,
+              className: "text-muted-foreground",
+              title: "Attach file",
+              children: /* @__PURE__ */ jsx(IconPaperclip, { className: "h-4 w-4" })
             }
-          )
-        ]
-      },
-      index
-    )) }),
-    /* @__PURE__ */ 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: [
-      /* @__PURE__ */ jsx(
-        Textarea,
-        {
-          value,
-          onChange: (e) => onChange(e.target.value),
-          onKeyDown: handleKeyDown,
-          placeholder,
-          className: "min-h-[44px] max-h-[200px] border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-2 text-[15px] resize-none",
-          autoFocus
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center px-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+          ) : /* @__PURE__ */ jsxs(DropdownMenu, { children: [
             /* @__PURE__ */ jsx(
-              "input",
+              DropdownMenuTrigger,
               {
-                ref: fileInputRef,
-                type: "file",
-                multiple: true,
-                accept,
-                onChange: handleFileSelect,
-                className: "hidden",
-                disabled: isLoading || attachedFiles.length >= maxFiles
+                render: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    className: "text-muted-foreground gap-2",
+                    title: `${attachedFiles.length} files attached`,
+                    children: [
+                      /* @__PURE__ */ jsx(IconPaperclip, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx(Badge, { className: "h-[18px] min-w-[18px] px-1.5 text-[10px]", children: attachedFiles.length })
+                    ]
+                  }
+                )
               }
             ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "sm",
-                onClick: () => fileInputRef.current?.click(),
-                disabled: isLoading || attachedFiles.length >= maxFiles,
-                className: "text-muted-foreground",
-                title: attachedFiles.length >= maxFiles ? `Maximum ${maxFiles} files allowed` : "Attach file",
-                children: /* @__PURE__ */ jsx(IconPaperclip, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          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__ */ jsxs(DropdownMenu, { children: [
-              /* @__PURE__ */ jsx(
-                DropdownMenuTrigger,
-                {
-                  render: /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      variant: "ghost",
-                      size: "sm",
-                      className: cn(
-                        selectedInGroup.length > 0 ? "text-foreground bg-muted/50" : "text-muted-foreground"
-                      ),
-                      children: [
-                        label,
-                        /* @__PURE__ */ jsx(IconChevronDown, { className: "h-3 w-3 opacity-50" })
-                      ]
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-56", children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
-                /* @__PURE__ */ jsx(DropdownMenuLabel, { children: group.label }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [
+              /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+                /* @__PURE__ */ jsxs(DropdownMenuLabel, { children: [
+                  "Attached Files (",
+                  attachedFiles.length,
+                  "/",
+                  maxFiles,
+                  ")"
+                ] }),
                 /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-                group.options.map((option) => /* @__PURE__ */ jsx(
-                  DropdownMenuCheckboxItem,
+                attachedFiles.map((file, index) => /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
                   {
-                    checked: selectedOptions.has(option.id),
-                    onCheckedChange: () => toggleOption(
-                      option.id,
-                      group.options,
-                      isSingle ? "single" : "multiple"
-                    ),
+                    className: "flex items-center justify-between group",
                     onSelect: (e) => e.preventDefault(),
-                    children: option.label
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "truncate text-sm",
+                            title: file.name,
+                            children: file.name
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatFileSize(file.size) })
+                      ] }),
+                      /* @__PURE__ */ 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__ */ jsx(IconX, { className: "h-3 w-3" })
+                        }
+                      )
+                    ]
                   },
-                  option.id
+                  index
                 ))
-              ] }) })
-            ] }, group.id);
-          })
+              ] }),
+              attachedFiles.length < maxFiles && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    onSelect: (e) => {
+                      e.preventDefault();
+                      fileInputRef.current?.click();
+                    },
+                    className: "text-primary focus:text-primary",
+                    children: [
+                      /* @__PURE__ */ jsx(IconPlus, { className: "mr-2 h-4 w-4" }),
+                      /* @__PURE__ */ jsx("span", { children: "Add more files" })
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "submit",
-            disabled: !value.trim() && attachedFiles.length === 0 && !isLoading || isLoading,
-            size: "icon-lg",
-            onClick: () => handleInternalSubmit().catch(console.error),
-            children: isLoading ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ jsx(IconArrowUp, { className: "h-5 w-5" })
-          }
-        )
-      ] })
+        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__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(
+              DropdownMenuTrigger,
+              {
+                render: /* @__PURE__ */ 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__ */ jsx(Badge, { className: "h-[18px] min-w-[18px] px-1.5 text-[10px]", children: selectedInGroup.length }),
+                      /* @__PURE__ */ jsx(IconChevronDown, { className: "h-3 w-3 opacity-50" })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-56", children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuLabel, { children: group.label }),
+              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+              group.options.map((option) => /* @__PURE__ */ 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__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          disabled: !value.trim() && attachedFiles.length === 0 && !isLoading || isLoading,
+          size: "icon-lg",
+          onClick: () => handleInternalSubmit().catch(console.error),
+          children: isLoading ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ jsx(IconArrowUp, { className: "h-5 w-5" })
+        }
+      )
     ] })
-  ] });
+  ] }) });
 }
 function Card({
   className,
@@ -945,8 +1119,6 @@ var Col = ({
   gap = "sm",
   align = "start",
   justify = "start",
-  wrap = "nowrap",
-  flex = 1,
   width,
   height,
   padding,
@@ -996,13 +1168,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,
@@ -1436,45 +1606,6 @@ var Icon = ({
     }
   );
 };
-var badgeVariants = 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({
-    defaultTagName: "span",
-    props: mergeProps(
-      {
-        className: cn(badgeVariants({ className, variant }))
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "badge",
-      variant
-    }
-  });
-}
 var Badge2 = ({
   label,
   variant = "primary",
@@ -2063,9 +2194,9 @@ var Select2 = ({
         defaultValue,
         value,
         disabled,
-        onValueChange: handleValueChange,
+        onValueChange: (value2) => handleValueChange(value2 || ""),
         children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder || "Select an option" }) }),
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
           /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
         ]
       }
@@ -2095,7 +2226,6 @@ var Label2 = ({
 var Checkbox = ({
   label,
   name,
-  value = "on",
   checked,
   defaultChecked,
   disabled,
@@ -2110,46 +2240,37 @@ var Checkbox = ({
         ...onChangeAction,
         data: {
           name: name || "",
-          value,
           checked: e.target.checked
         }
       });
     }
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn("flex items-center gap-2", className),
-      style,
-      children: [
-        /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: cn("flex items-center gap-2", className), style, children: [
+    /* @__PURE__ */ 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__ */ 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,
@@ -2472,12 +2593,14 @@ function Thread({
   });
   const starterPrompts = localStarterPrompts ?? config?.starterPrompts;
   const options = localOptions ?? config?.options;
+  const fileAttachments = config?.fileAttachments;
   const allDefaultSelectedIds = useMemo(() => {
-    const defaultSelectedIdsFromOptions = options?.flatMap(
-      (group) => group.defaultSelectedIds ?? []
-    ) ?? [];
+    const defaultSelectedIdsFromOptions = options?.flatMap((group) => group.defaultSelectedIds ?? []) ?? [];
     return [
-      .../* @__PURE__ */ new Set([...defaultSelectedIdsFromOptions, ...defaultSelectedIds ?? []])
+      .../* @__PURE__ */ new Set([
+        ...defaultSelectedIdsFromOptions,
+        ...defaultSelectedIds ?? []
+      ])
     ];
   }, [options, defaultSelectedIds]);
   const [input, setInput] = useState("");
@@ -2553,7 +2676,7 @@ function Thread({
             options,
             autoFocus,
             defaultSelectedIds: allDefaultSelectedIds,
-            fileAttachments: config?.fileAttachments
+            fileAttachments
           }
         ) }) })
       ]
@@ -2561,20 +2684,36 @@ function Thread({
   );
 }
 function ChatHeader({
-  title,
   leftContent,
   rightContent,
   className,
-  titleClassName,
   children
 }) {
   if (children) {
-    return /* @__PURE__ */ jsx("div", { className: cn("p-4 border-b border-border h-14 flex items-center shrink-0", className), children });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "px-2 border-b border-border h-14 flex items-center shrink-0",
+          className
+        ),
+        children
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("p-4 border-b border-border h-14 flex items-center justify-between shrink-0", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: leftContent }),
-    rightContent && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 shrink-0 ml-2", children: rightContent })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "px-2 border-b border-border h-14 flex items-center justify-between shrink-0",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: leftContent }),
+        rightContent && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 shrink-0 ml-2", children: rightContent })
+      ]
+    }
+  );
 }
 var ThreadList = ({
   className,
@@ -2625,58 +2764,43 @@ var ThreadList = ({
     if (diffDays < 7) return `${diffDays}d ago`;
     return d.toLocaleDateString();
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxs(
-      Button,
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col h-full", className), children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading && threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(IconLoader2, { className: "size-5 animate-spin text-muted-foreground" }) }) : threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(IconMessage, { className: "size-8 mx-auto opacity-50" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No threads yet" }),
+    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleNewThread, children: "Start a conversation" })
+  ] }) }) : /* @__PURE__ */ jsx("div", { className: "p-2 space-y-1", children: threads.map((thread) => {
+    const isActive = thread.id === activeThreadId;
+    return /* @__PURE__ */ 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__ */ jsx(IconPlus, { className: "mr-2 size-4" }),
-          "New Thread"
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium truncate"), children: thread.title || `Thread ${thread.id.slice(0, 8)}` }),
+            thread.updatedAt && /* @__PURE__ */ jsx("span", { className: cn("text-xs shrink-0"), children: formatDate(thread.updatedAt) })
+          ] }) }),
+          /* @__PURE__ */ 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__ */ jsx(IconTrash, { className: "size-3" })
+            }
+          )
         ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading && threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(IconLoader2, { className: "size-5 animate-spin text-muted-foreground" }) }) : threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx(IconMessage, { className: "size-8 mx-auto opacity-50" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No threads yet" }),
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleNewThread, children: "Start a conversation" })
-    ] }) }) : /* @__PURE__ */ jsx("div", { className: "p-2 space-y-1", children: threads.map((thread) => {
-      const isActive = thread.id === activeThreadId;
-      return /* @__PURE__ */ 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__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-              /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium truncate"), children: thread.title || `Thread ${thread.id.slice(0, 8)}` }),
-              thread.updatedAt && /* @__PURE__ */ jsx("span", { className: cn("text-xs shrink-0"), children: formatDate(thread.updatedAt) })
-            ] }) }),
-            /* @__PURE__ */ 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__ */ jsx(IconTrash, { className: "size-3" })
-              }
-            )
-          ]
-        },
-        thread.id
-      );
-    }) }) })
-  ] });
+      },
+      thread.id
+    );
+  }) }) }) });
 };
 function ChatPopup({
   title = "Chat",
@@ -2805,6 +2929,16 @@ function ChatSidebar({
     ) })
   ] });
 }
+var ChatSidebarContext = createContext(
+  void 0
+);
+function useChatSidebar() {
+  const context = 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",
@@ -2816,134 +2950,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] = useState(
-    defaultLeftSidebarCollapsed
-  );
-  const [internalRightCollapsed, setInternalRightCollapsed] = 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] = 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] = useState(() => {
+    if (typeof window !== "undefined") {
+      return window.innerWidth < 1024;
     }
-    onRightSidebarCollapseChange?.(newCollapsed);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full w-full bg-background", className), children: [
-    title && /* @__PURE__ */ jsx(ChatHeader, { title, ...headerProps }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden flex relative", children: [
-      leftSidebar && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-              leftSidebarCollapsible && /* @__PURE__ */ jsx("div", { className: "flex justify-end p-2 border-b border-border shrink-0", children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  onClick: handleLeftToggle,
-                  "aria-label": "Collapse left sidebar",
-                  className: "h-8 w-8",
-                  children: /* @__PURE__ */ jsx(IconChevronLeft, { className: "h-4 w-4" })
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: leftSidebar })
-            ] })
-          }
-        ),
-        leftSidebarCollapsible && leftCollapsed && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-r border-border bg-background flex items-center justify-center w-10", children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon-sm",
-            onClick: handleLeftToggle,
-            "aria-label": "Expand left sidebar",
-            className: "h-8 w-8",
-            children: /* @__PURE__ */ jsx(IconChevronRight, { className: "h-4 w-4" })
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ jsx(
-        Thread,
-        {
-          placeholder,
-          starterPrompts,
-          options,
-          autoFocus,
-          defaultSelectedIds
-        }
-      ) }),
-      rightSidebar && /* @__PURE__ */ jsxs(Fragment, { children: [
-        rightSidebarCollapsible && rightCollapsed && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-l border-border bg-background flex items-center justify-center w-10", children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon-sm",
-            onClick: handleRightToggle,
-            "aria-label": "Expand right sidebar",
-            className: "h-8 w-8",
-            children: /* @__PURE__ */ jsx(IconChevronLeft, { className: "h-4 w-4" })
-          }
-        ) }),
-        /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-              rightSidebarCollapsible && /* @__PURE__ */ jsx("div", { className: "flex justify-start p-2 border-b border-border shrink-0", children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  onClick: handleRightToggle,
-                  "aria-label": "Collapse right sidebar",
-                  className: "h-8 w-8",
-                  children: /* @__PURE__ */ jsx(IconChevronRight, { className: "h-4 w-4" })
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: rightSidebar })
-            ] })
-          }
-        )
-      ] })
-    ] })
-  ] });
+    return false;
+  });
+  useEffect(() => {
+    if (isSmallScreen) {
+      setInternalLeftCollapsed(true);
+      setInternalRightCollapsed(true);
+    }
+  }, [isSmallScreen]);
+  const leftCollapsed = internalLeftCollapsed;
+  const rightCollapsed = internalRightCollapsed;
+  const handleLeftToggle = useCallback((collapsed) => {
+    setInternalLeftCollapsed(collapsed);
+  }, []);
+  const handleRightToggle = useCallback((collapsed) => {
+    setInternalRightCollapsed(collapsed);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      leftCollapsed,
+      rightCollapsed,
+      setLeftCollapsed: handleLeftToggle,
+      setRightCollapsed: handleRightToggle,
+      leftCollapsible: true,
+      rightCollapsible: true
+    }),
+    [leftCollapsed, rightCollapsed, handleLeftToggle, handleRightToggle]
+  );
+  return /* @__PURE__ */ jsx(ChatSidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col h-full w-full bg-background", className),
+      children: [
+        title && /* @__PURE__ */ jsx(ChatHeader, { title, ...headerProps }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden flex relative", children: [
+          leftSidebar && /* @__PURE__ */ 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__ */ jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: leftSidebar })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ jsx(
+            Thread,
+            {
+              placeholder,
+              starterPrompts,
+              options,
+              autoFocus,
+              defaultSelectedIds
+            }
+          ) }),
+          rightSidebar && /* @__PURE__ */ 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__ */ 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__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        onClick: () => setLeftCollapsed(!leftCollapsed),
+        "aria-label": leftCollapsed ? "Expand left sidebar" : "Collapse left sidebar",
+        className: cn("", className),
+        children: leftCollapsed ? /* @__PURE__ */ jsx(IconLayoutSidebarLeftExpand, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconLayoutSidebarLeftCollapse, { className: "h-4 w-4" })
+      }
+    );
+  }
+  if (side === "right") {
+    if (!rightCollapsible) return null;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        onClick: () => setRightCollapsed(!rightCollapsed),
+        "aria-label": rightCollapsed ? "Expand right sidebar" : "Collapse right sidebar",
+        className: cn("", className),
+        children: rightCollapsed ? /* @__PURE__ */ jsx(IconLayoutSidebarRightExpand, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconLayoutSidebarRightCollapse, { className: "h-4 w-4" })
+      }
+    );
+  }
+  return null;
 }
-var PopoverContext = React10.createContext(
+var PopoverContext = React11.createContext(
   void 0
 );
 function usePopoverContext() {
-  const context = React10.useContext(PopoverContext);
+  const context = React11.useContext(PopoverContext);
   if (!context) {
     throw new Error("Popover components must be used within a Popover");
   }
@@ -2955,10 +3089,10 @@ function Popover({
   open: controlledOpen,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = React10.useState(defaultOpen);
-  const triggerRef = React10.useRef(null);
+  const [internalOpen, setInternalOpen] = React11.useState(defaultOpen);
+  const triggerRef = React11.useRef(null);
   const open = controlledOpen ?? internalOpen;
-  const setOpen = React10.useCallback(
+  const setOpen = React11.useCallback(
     (newOpen) => {
       if (controlledOpen === void 0) {
         setInternalOpen(newOpen);
@@ -2967,7 +3101,7 @@ function Popover({
     },
     [controlledOpen, onOpenChange]
   );
-  const value = React10.useMemo(
+  const value = React11.useMemo(
     () => ({
       open,
       setOpen,
@@ -2977,15 +3111,15 @@ function Popover({
   );
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
 }
-var PopoverTrigger = React10.forwardRef(
+var PopoverTrigger = React11.forwardRef(
   ({ asChild, className, children, ...props }, ref) => {
     const { setOpen, triggerRef } = usePopoverContext();
     const handleClick = (e) => {
       setOpen(true);
       props.onClick?.(e);
     };
-    if (asChild && React10.isValidElement(children)) {
-      return React10.cloneElement(children, {
+    if (asChild && React11.isValidElement(children)) {
+      return React11.cloneElement(children, {
         ref: (node) => {
           triggerRef.current = node;
           if (typeof children.ref === "function") {
@@ -3017,7 +3151,7 @@ var PopoverTrigger = React10.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React10.forwardRef(
+var PopoverContent = React11.forwardRef(
   ({
     className,
     side = "bottom",
@@ -3028,9 +3162,9 @@ var PopoverContent = React10.forwardRef(
     ...props
   }, ref) => {
     const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React10.useState({ top: 0, left: 0 });
-    const contentRef = React10.useRef(null);
-    React10.useEffect(() => {
+    const [position, setPosition] = React11.useState({ top: 0, left: 0 });
+    const contentRef = React11.useRef(null);
+    React11.useEffect(() => {
       if (!open || !triggerRef.current) return;
       const updatePosition = () => {
         if (!triggerRef.current || !contentRef.current) return;
@@ -3091,7 +3225,7 @@ var PopoverContent = React10.forwardRef(
         window.removeEventListener("scroll", updatePosition, true);
       };
     }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React10.useEffect(() => {
+    React11.useEffect(() => {
       if (!open) return;
       const handleClickOutside = (event) => {
         if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -3147,7 +3281,7 @@ var ThreadPopover = ({
   emptyState,
   onThreadSelect
 }) => {
-  const [isOpen, setIsOpen] = React10.useState(false);
+  const [isOpen, setIsOpen] = React11.useState(false);
   useHotkeys(
     "h",
     (e) => {
@@ -3202,7 +3336,7 @@ var CreateThreadButton = ({
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React10.useState(false);
+  const [isCreating, setIsCreating] = React11.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3328,10 +3462,10 @@ var AccountDialog = ({
   size
 }) => {
   const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React10.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React10.useState(false);
-  const [error, setError] = React10.useState(null);
-  const initials = React10.useMemo(() => {
+  const [open, setOpen] = React11.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React11.useState(false);
+  const [error, setError] = React11.useState(null);
+  const initials = React11.useMemo(() => {
     const name = user?.displayName || user?.name;
     if (!name) return "";
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
@@ -3504,6 +3638,6 @@ function ThemeToggle() {
   );
 }
 
-export { AccountDialog, AuthContext, AuthProvider, ChatFull, ChatHeader, ChatPopup, ChatSidebar, Composer, CreateThreadButton, MelonyClientProvider, MelonyContext, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, groupEventsToMessages, useAuth, useMelony, useTheme, useThreads };
+export { AccountDialog, AuthContext, AuthProvider, Badge2 as Badge, Box, Button2 as Button, Card2 as Card, Chart, ChatFull, ChatHeader, ChatPopup, ChatSidebar, ChatSidebarContext, Checkbox, Col, Composer, CreateThreadButton, Divider, Form, Heading, Image, Input2 as Input, Label2 as Label, List, ListItem, MelonyClientProvider, MelonyContext, RadioGroup, Row, Select2 as Select, SidebarToggle, Spacer, Text, Textarea2 as Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, groupEventsToMessages, useAuth, useChatSidebar, useMelony, useScreenSize, useTheme, useThreads };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map