@melony/react 0.1.24 → 0.1.26

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 React12 from 'react';
+import React12__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, IconDotsVertical, IconTrash, IconHistory, IconArrowLeft, IconBrandGoogle, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconUser, IconLogout, 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] = React12__default.useState(
     () => new Set(defaultSelectedIds)
   );
-  const [attachedFiles, setAttachedFiles] = React10__default.useState([]);
-  const fileInputRef = React10__default.useRef(null);
+  const [attachedFiles, setAttachedFiles] = React12__default.useState([]);
+  const fileInputRef = React12__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,
@@ -2589,14 +2728,20 @@ var ThreadList = ({
     deleteThread,
     isLoading
   } = useThreads();
+  const sortedThreads = React12.useMemo(() => {
+    return [...threads].sort((a, b) => {
+      const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
+      const dateB = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
+      return dateB - dateA;
+    });
+  }, [threads]);
   const handleThreadClick = (threadId) => {
     if (threadId !== activeThreadId) {
       selectThread(threadId);
     }
     onThreadSelect?.(threadId);
   };
-  const handleDelete = async (e, threadId) => {
-    e.stopPropagation();
+  const handleDelete = async (threadId) => {
     try {
       await deleteThread(threadId);
     } catch (error) {
@@ -2610,32 +2755,16 @@ var ThreadList = ({
       console.error("Failed to create thread:", error);
     }
   };
-  const formatDate = (date) => {
-    if (!date) return "";
-    const d = typeof date === "string" ? new Date(date) : date;
-    if (isNaN(d.getTime())) return "";
-    const now = /* @__PURE__ */ new Date();
-    const diffMs = now.getTime() - d.getTime();
-    const diffMins = Math.floor(diffMs / 6e4);
-    const diffHours = Math.floor(diffMs / 36e5);
-    const diffDays = Math.floor(diffMs / 864e5);
-    if (diffMins < 1) return "Just now";
-    if (diffMins < 60) return `${diffMins}m ago`;
-    if (diffHours < 24) return `${diffHours}h ago`;
-    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,
       {
-        variant: "ghost",
-        size: "sm",
+        variant: "outline",
+        className: "w-full justify-start gap-2 h-9 px-3 border-dashed hover:border-solid transition-all",
         onClick: handleNewThread,
-        className: "w-full justify-start",
         children: [
-          /* @__PURE__ */ jsx(IconPlus, { className: "mr-2 size-4" }),
-          "New Thread"
+          /* @__PURE__ */ jsx(IconPlus, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "New chat" })
         ]
       }
     ) }),
@@ -2643,7 +2772,7 @@ var ThreadList = ({
       /* @__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) => {
+    ] }) }) : /* @__PURE__ */ jsx("div", { className: "p-2 space-y-1", children: sortedThreads.map((thread) => {
       const isActive = thread.id === activeThreadId;
       return /* @__PURE__ */ jsxs(
         "div",
@@ -2651,26 +2780,44 @@ var ThreadList = ({
           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"
+            isActive ? "bg-muted text-foreground" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground"
           ),
           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" })
-              }
-            )
+            /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: thread.title || `Thread ${thread.id.slice(0, 8)}` }) }),
+            /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(
+                DropdownMenuTrigger,
+                {
+                  render: (props) => /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-xs",
+                      ...props,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        props.onClick?.(e);
+                      },
+                      children: /* @__PURE__ */ jsx(IconDotsVertical, { className: "size-3.5" })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-32", children: /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  variant: "destructive",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleDelete(thread.id);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(IconTrash, { className: "size-4 mr-2" }),
+                    /* @__PURE__ */ jsx("span", { children: "Delete" })
+                  ]
+                }
+              ) })
+            ] }) })
           ]
         },
         thread.id
@@ -2805,9 +2952,144 @@ 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 WelcomeScreen({
+  title = "Welcome to Melony",
+  description = "The most powerful AI agent framework for building modern applications. Connect your tools, build your brain, and ship faster.",
+  features = [
+    {
+      title: "Context Aware",
+      description: "Built-in state management for complex LLM flows."
+    },
+    {
+      title: "Extensible",
+      description: "Plugin architecture for easy integrations."
+    },
+    {
+      title: "Real-time",
+      description: "Streaming responses and live state updates."
+    },
+    {
+      title: "Tool-ready",
+      description: "Ready-to-use actions for common tasks."
+    }
+  ],
+  className,
+  onLoginClick,
+  termsUrl = "#",
+  privacyUrl = "#",
+  imageUrl,
+  imageAlt = "Product screenshot"
+}) {
+  const { login, isLoading } = useAuth();
+  const handleLogin = () => {
+    if (onLoginClick) {
+      onLoginClick();
+    } else {
+      login();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-h-[600px] h-full w-full flex-col md:flex-row bg-background overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col bg-sidebar text-foreground relative overflow-hidden", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute -top-24 -left-24 size-96 bg-primary/5 rounded-full blur-3xl" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute -bottom-24 -right-24 size-96 bg-primary/5 rounded-full blur-3xl" }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden relative z-10 flex flex-col p-8 md:p-12 lg:p-20", children: /* @__PURE__ */ jsxs("div", { className: "max-w-xl mx-auto w-full", children: [
+            /* @__PURE__ */ jsx("h1", { className: "mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-foreground", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "mb-12 text-lg text-muted-foreground md:text-xl leading-relaxed", children: description }),
+            imageUrl && /* @__PURE__ */ jsxs("div", { className: "mb-12 relative group", children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute -inset-1 bg-gradient-to-r from-primary/20 to-primary/10 rounded-xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200" }),
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: imageUrl,
+                  alt: imageAlt,
+                  className: "relative rounded-xl border border-border/50 shadow-2xl transition-transform duration-500 hover:scale-[1.02] w-full"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2", children: features.map((feature, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("h3", { className: "font-bold text-lg text-foreground", children: feature.title }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-relaxed", children: feature.description })
+            ] }, i)) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center justify-center p-8 md:p-12 lg:p-20 bg-background transition-colors duration-300", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm space-y-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3 text-center md:text-left", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: "Get Started" }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-lg", children: "Sign in to your account to continue" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "lg",
+                variant: "outline",
+                className: "w-full h-16 text-lg shadow-sm hover:shadow-md transition-all flex items-center justify-center gap-3 border-2 font-medium bg-background text-foreground hover:bg-accent",
+                onClick: handleLogin,
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsx(IconBrandGoogle, { className: "size-6" }),
+                  isLoading ? "Signing in..." : "Continue with Google"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative py-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("span", { className: "w-full border-t border-border" }) }),
+              /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx("span", { className: "bg-background px-3 text-muted-foreground tracking-widest font-medium", children: "Secure access" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground leading-relaxed text-center md:text-left", children: [
+            "By continuing, you agree to our ",
+            /* @__PURE__ */ jsx("br", { className: "hidden md:block" }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: termsUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "underline underline-offset-4 hover:text-primary transition-colors font-medium",
+                children: "Terms of Service"
+              }
+            ),
+            " ",
+            "and",
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: privacyUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "underline underline-offset-4 hover:text-primary transition-colors font-medium",
+                children: "Privacy Policy"
+              }
+            ),
+            "."
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
 function ChatFull({
   title = "Chat",
-  placeholder = "Message the AI",
+  placeholder,
   starterPrompts,
   options,
   className,
@@ -2816,134 +3098,140 @@ function ChatFull({
   rightSidebar,
   leftSidebarClassName,
   rightSidebarClassName,
-  leftSidebarCollapsible = false,
-  rightSidebarCollapsible = false,
-  defaultLeftSidebarCollapsed = false,
-  defaultRightSidebarCollapsed = false,
-  leftSidebarCollapsed: controlledLeftCollapsed,
-  rightSidebarCollapsed: controlledRightCollapsed,
-  onLeftSidebarCollapseChange,
-  onRightSidebarCollapseChange,
   autoFocus = false,
-  defaultSelectedIds
+  defaultSelectedIds,
+  showWelcomeScreen = false,
+  welcomeScreenProps
 }) {
-  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 { isAuthenticated, isLoading } = useAuth();
+  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]
+  );
+  if (showWelcomeScreen && !isAuthenticated && !isLoading) {
+    return /* @__PURE__ */ jsx(WelcomeScreen, { ...welcomeScreenProps });
+  }
+  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 = React12.createContext(
   void 0
 );
 function usePopoverContext() {
-  const context = React10.useContext(PopoverContext);
+  const context = React12.useContext(PopoverContext);
   if (!context) {
     throw new Error("Popover components must be used within a Popover");
   }
@@ -2955,10 +3243,10 @@ function Popover({
   open: controlledOpen,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = React10.useState(defaultOpen);
-  const triggerRef = React10.useRef(null);
+  const [internalOpen, setInternalOpen] = React12.useState(defaultOpen);
+  const triggerRef = React12.useRef(null);
   const open = controlledOpen ?? internalOpen;
-  const setOpen = React10.useCallback(
+  const setOpen = React12.useCallback(
     (newOpen) => {
       if (controlledOpen === void 0) {
         setInternalOpen(newOpen);
@@ -2967,7 +3255,7 @@ function Popover({
     },
     [controlledOpen, onOpenChange]
   );
-  const value = React10.useMemo(
+  const value = React12.useMemo(
     () => ({
       open,
       setOpen,
@@ -2977,15 +3265,15 @@ function Popover({
   );
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
 }
-var PopoverTrigger = React10.forwardRef(
+var PopoverTrigger = React12.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 && React12.isValidElement(children)) {
+      return React12.cloneElement(children, {
         ref: (node) => {
           triggerRef.current = node;
           if (typeof children.ref === "function") {
@@ -3017,7 +3305,7 @@ var PopoverTrigger = React10.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React10.forwardRef(
+var PopoverContent = React12.forwardRef(
   ({
     className,
     side = "bottom",
@@ -3028,9 +3316,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] = React12.useState({ top: 0, left: 0 });
+    const contentRef = React12.useRef(null);
+    React12.useEffect(() => {
       if (!open || !triggerRef.current) return;
       const updatePosition = () => {
         if (!triggerRef.current || !contentRef.current) return;
@@ -3091,7 +3379,7 @@ var PopoverContent = React10.forwardRef(
         window.removeEventListener("scroll", updatePosition, true);
       };
     }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React10.useEffect(() => {
+    React12.useEffect(() => {
       if (!open) return;
       const handleClickOutside = (event) => {
         if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -3147,7 +3435,7 @@ var ThreadPopover = ({
   emptyState,
   onThreadSelect
 }) => {
-  const [isOpen, setIsOpen] = React10.useState(false);
+  const [isOpen, setIsOpen] = React12.useState(false);
   useHotkeys(
     "h",
     (e) => {
@@ -3202,7 +3490,7 @@ var CreateThreadButton = ({
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React10.useState(false);
+  const [isCreating, setIsCreating] = React12.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3328,10 +3616,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] = React12.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React12.useState(false);
+  const [error, setError] = React12.useState(null);
+  const initials = React12.useMemo(() => {
     const name = user?.displayName || user?.name;
     if (!name) return "";
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
@@ -3504,6 +3792,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, WelcomeScreen, groupEventsToMessages, useAuth, useChatSidebar, useMelony, useScreenSize, useTheme, useThreads };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map