@melony/react 0.1.26 → 0.1.27

package/dist/index.js

@@ -1,18 +1,18 @@
-import * as React12 from 'react';
-import React12__default, { createContext, useState, useCallback, useEffect, useMemo, useContext, useRef } from 'react';
+import * as React11 from 'react';
+import React11__default, { createContext, useState, useContext, useCallback, useMemo, useEffect, 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';
-import { generateId } from 'melony/client';
-import { useQueryState, parseAsString } from 'nuqs';
-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 { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as ICONS from '@tabler/icons-react';
+import { IconBrandGoogle, IconFileText, IconFile, IconX, IconPaperclip, IconChevronDown, IconLoader2, IconArrowUp, IconMessage, IconDotsVertical, IconTrash, IconHistory, IconPlus, IconArrowLeft, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconUser, IconLogout, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconSelector, IconChevronUp } from '@tabler/icons-react';
+import { generateId } from 'melony/client';
+import { useQueryState, parseAsString } from 'nuqs';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
-import * as ICONS 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';
@@ -167,49 +167,215 @@ var MelonyClientProvider = ({
     }
   ) }) });
 };
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === void 0) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  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 w-8/12 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 my-auto", 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 w-4/12 flex-col overflow-y-auto 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 my-auto mx-auto", 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"
+              }
+            ),
+            "."
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
 var AuthContext = createContext(
   void 0
 );
 var AuthProvider = ({
   children,
-  service
+  service,
+  welcomeScreenProps
 }) => {
-  const [user, setUser] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const fetchMe = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const userData = await service.getMe();
-      setUser(userData);
-    } catch (error) {
-      console.error("Failed to fetch user:", error);
-      setUser(null);
-    } finally {
-      setIsLoading(false);
+  const queryClient = useQueryClient();
+  const { data: user, isLoading } = useQuery({
+    queryKey: ["auth-user", service],
+    queryFn: () => service.getMe(),
+    retry: false
+  });
+  const logoutMutation = useMutation({
+    mutationFn: () => service.logout(),
+    onSuccess: () => {
+      queryClient.setQueryData(["auth-user", service], null);
     }
-  }, [service]);
-  useEffect(() => {
-    fetchMe();
-  }, [fetchMe]);
+  });
   const login = useCallback(() => {
     service.login();
   }, [service]);
   const logout = useCallback(async () => {
     try {
-      await service.logout();
-      setUser(null);
+      await logoutMutation.mutateAsync();
     } catch (error) {
       console.error("Failed to logout:", error);
     }
-  }, [service]);
-  const value = {
-    user,
-    isAuthenticated: !!user,
-    isLoading,
-    login,
-    logout,
-    getToken: service.getToken
-  };
+  }, [logoutMutation]);
   if (isLoading) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -228,7 +394,15 @@ var AuthProvider = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children });
+  const value = {
+    user: user || null,
+    isAuthenticated: !!user,
+    isLoading,
+    login,
+    logout,
+    getToken: service.getToken
+  };
+  return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children: !value.isAuthenticated && welcomeScreenProps ? /* @__PURE__ */ jsx(WelcomeScreen, { ...welcomeScreenProps }) : children });
 };
 var ThreadContext = createContext(
   void 0
@@ -325,6 +499,103 @@ var ThreadProvider = ({
   );
   return /* @__PURE__ */ jsx(ThreadContext.Provider, { value, children });
 };
+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;
+}
+var SidebarContext = createContext(
+  void 0
+);
+function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (context === void 0) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+}
+function SidebarProvider({
+  children,
+  defaultLeftCollapsed,
+  defaultRightCollapsed
+}) {
+  const { isMobile, isTablet } = useScreenSize();
+  const isSmallScreen = isMobile || isTablet;
+  const [leftCollapsed, setLeftCollapsed] = useState(() => {
+    if (defaultLeftCollapsed !== void 0) return defaultLeftCollapsed;
+    if (typeof window !== "undefined") {
+      return window.innerWidth < 1024;
+    }
+    return false;
+  });
+  const [rightCollapsed, setRightCollapsed] = useState(() => {
+    if (defaultRightCollapsed !== void 0) return defaultRightCollapsed;
+    if (typeof window !== "undefined") {
+      return window.innerWidth < 1024;
+    }
+    return false;
+  });
+  useEffect(() => {
+    if (isSmallScreen) {
+      setLeftCollapsed(true);
+      setRightCollapsed(true);
+    }
+  }, [isSmallScreen]);
+  const handleLeftToggle = useCallback((collapsed) => {
+    setLeftCollapsed(collapsed);
+  }, []);
+  const handleRightToggle = useCallback((collapsed) => {
+    setRightCollapsed(collapsed);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      leftCollapsed,
+      rightCollapsed,
+      setLeftCollapsed: handleLeftToggle,
+      setRightCollapsed: handleRightToggle,
+      leftCollapsible: true,
+      rightCollapsible: true
+    }),
+    [leftCollapsed, rightCollapsed, handleLeftToggle, handleRightToggle]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children });
+}
 var ThemeContext = createContext(void 0);
 function ThemeProvider({ children }) {
   const [theme, setThemeState] = useState("system");
@@ -398,13 +669,6 @@ var useMelony = (options) => {
   }, [client, initialEvents, reset]);
   return context;
 };
-var useAuth = () => {
-  const context = useContext(AuthContext);
-  if (context === void 0) {
-    throw new Error("useAuth must be used within an AuthProvider");
-  }
-  return context;
-};
 var useThreads = () => {
   const context = useContext(ThreadContext);
   if (context === void 0) {
@@ -412,94 +676,6 @@ 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));
-}
-var buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        icon: "size-9",
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Button$1,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
 function Textarea({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "textarea",
@@ -685,11 +861,26 @@ function Composer({
   const accept = fileAttachments?.accept;
   const maxFiles = fileAttachments?.maxFiles ?? 10;
   const maxFileSize = fileAttachments?.maxFileSize ?? 10 * 1024 * 1024;
-  const [selectedOptions, setSelectedOptions] = React12__default.useState(
+  const [selectedOptions, setSelectedOptions] = React11__default.useState(
     () => new Set(defaultSelectedIds)
   );
-  const [attachedFiles, setAttachedFiles] = React12__default.useState([]);
-  const fileInputRef = React12__default.useRef(null);
+  const [attachedFiles, setAttachedFiles] = React11__default.useState([]);
+  const [previews, setPreviews] = React11__default.useState([]);
+  const fileInputRef = React11__default.useRef(null);
+  React11__default.useEffect(() => {
+    const newPreviews = attachedFiles.map((file) => ({
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      url: file.type.startsWith("image/") ? URL.createObjectURL(file) : ""
+    }));
+    setPreviews(newPreviews);
+    return () => {
+      newPreviews.forEach((p) => {
+        if (p.url) URL.revokeObjectURL(p.url);
+      });
+    };
+  }, [attachedFiles]);
   const toggleOption = (id, groupOptions, type = "multiple") => {
     const next = new Set(selectedOptions);
     if (type === "single") {
@@ -735,11 +926,6 @@ function Composer({
   const handleRemoveFile = (index) => {
     setAttachedFiles((prev) => prev.filter((_, i) => i !== index));
   };
-  const formatFileSize = (bytes) => {
-    if (bytes < 1024) return bytes + " B";
-    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
-    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
-  };
   const handleInternalSubmit = async () => {
     const state = {};
     options.forEach((group) => {
@@ -805,13 +991,56 @@ function Composer({
       handleInternalSubmit().catch(console.error);
     }
   };
+  const handlePaste = (e) => {
+    if (!enabled) return;
+    const items = Array.from(e.clipboardData.items);
+    const files = items.map((item) => item.getAsFile()).filter((file) => file !== null);
+    if (files.length > 0) {
+      const remainingSlots = maxFiles - attachedFiles.length;
+      const validFiles = files.filter((f) => f.size <= maxFileSize);
+      const filesToAdd = validFiles.slice(0, remainingSlots);
+      if (filesToAdd.length > 0) {
+        setAttachedFiles((prev) => [...prev, ...filesToAdd]);
+      }
+    }
+  };
   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: [
+    previews.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 p-2 px-3 pb-3", children: previews.map((preview, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "group relative flex flex-col items-center justify-center w-20 h-20 rounded-xl border bg-muted/30 overflow-hidden shadow-sm",
+        children: [
+          preview.type.startsWith("image/") ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: preview.url,
+              alt: preview.name,
+              className: "w-full h-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-2 text-center", children: [
+            preview.type.includes("text") || preview.type.includes("pdf") ? /* @__PURE__ */ jsx(IconFileText, { className: "h-8 w-8 text-muted-foreground" }) : /* @__PURE__ */ jsx(IconFile, { className: "h-8 w-8 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[9px] truncate w-full px-1 mt-1 text-muted-foreground", children: preview.name })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleRemoveFile(index),
+              className: "absolute top-1 right-1 p-1 rounded-full bg-foreground/10 hover:bg-foreground/20 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity",
+              children: /* @__PURE__ */ jsx(IconX, { className: "h-3 w-3" })
+            }
+          )
+        ]
+      },
+      index
+    )) }),
     /* @__PURE__ */ jsx(
       Textarea,
       {
         value,
         onChange: (e) => onChange(e.target.value),
         onKeyDown: handleKeyDown,
+        onPaste: handlePaste,
         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
@@ -832,100 +1061,22 @@ function Composer({
               disabled: isLoading || attachedFiles.length >= maxFiles
             }
           ),
-          attachedFiles.length === 0 ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             Button,
             {
               type: "button",
               variant: "ghost",
               size: "sm",
               onClick: () => fileInputRef.current?.click(),
-              disabled: isLoading,
+              disabled: isLoading || attachedFiles.length >= maxFiles,
               className: "text-muted-foreground",
               title: "Attach file",
-              children: /* @__PURE__ */ jsx(IconPaperclip, { className: "h-4 w-4" })
+              children: [
+                /* @__PURE__ */ jsx(IconPaperclip, { className: "h-4 w-4" }),
+                attachedFiles.length > 0 && /* @__PURE__ */ jsx(Badge, { className: "ml-1 h-[18px] min-w-[18px] px-1.5 text-[10px]", children: attachedFiles.length })
+              ]
             }
-          ) : /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx(
-              DropdownMenuTrigger,
-              {
-                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__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [
-              /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
-                /* @__PURE__ */ jsxs(DropdownMenuLabel, { children: [
-                  "Attached Files (",
-                  attachedFiles.length,
-                  "/",
-                  maxFiles,
-                  ")"
-                ] }),
-                /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-                attachedFiles.map((file, index) => /* @__PURE__ */ jsxs(
-                  DropdownMenuItem,
-                  {
-                    className: "flex items-center justify-between group",
-                    onSelect: (e) => e.preventDefault(),
-                    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" })
-                        }
-                      )
-                    ]
-                  },
-                  index
-                ))
-              ] }),
-              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" })
-                    ]
-                  }
-                )
-              ] })
-            ] })
-          ] })
+          )
         ] }),
         options.map((group) => {
           const selectedInGroup = group.options.filter(
@@ -2720,15 +2871,8 @@ var ThreadList = ({
   emptyState,
   onThreadSelect
 }) => {
-  const {
-    threads,
-    activeThreadId,
-    selectThread,
-    createThread,
-    deleteThread,
-    isLoading
-  } = useThreads();
-  const sortedThreads = React12.useMemo(() => {
+  const { threads, activeThreadId, selectThread, deleteThread, isLoading } = useThreads();
+  const sortedThreads = React11.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;
@@ -2745,87 +2889,65 @@ var ThreadList = ({
     try {
       await deleteThread(threadId);
     } catch (error) {
-      console.error("Failed to delete thread:", error);
-    }
-  };
-  const handleNewThread = async () => {
-    try {
-      await createThread();
-    } catch (error) {
-      console.error("Failed to create thread:", error);
+      console.error("Failed to delete thread:", error);
     }
   };
-  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("div", { className: "p-2 space-y-1", children: sortedThreads.map((thread) => {
+    const isActive = thread.id === activeThreadId;
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        variant: "outline",
-        className: "w-full justify-start gap-2 h-9 px-3 border-dashed hover:border-solid transition-all",
-        onClick: handleNewThread,
+        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 text-foreground" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground"
+        ),
         children: [
-          /* @__PURE__ */ jsx(IconPlus, { className: "size-4" }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "New chat" })
+          /* @__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" })
+                ]
+              }
+            ) })
+          ] }) })
         ]
-      }
-    ) }),
-    /* @__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: sortedThreads.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 text-foreground" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground"
-          ),
-          children: [
-            /* @__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
-      );
-    }) }) })
-  ] });
+      },
+      thread.id
+    );
+  }) }) }) });
 };
-function ChatPopup({
+function PopupChat({
   title = "Chat",
   placeholder = "Message the AI",
   starterPrompts,
@@ -2929,266 +3051,45 @@ function ChatPopup({
     )
   ] });
 }
-function ChatSidebar({
-  title = "Chat",
-  placeholder = "Message the AI",
-  starterPrompts,
-  options,
-  className,
-  headerProps,
-  defaultSelectedIds
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full border-r bg-background w-80", className), children: [
-    /* @__PURE__ */ jsx(ChatHeader, { title, ...headerProps }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
-      Thread,
-      {
-        placeholder,
-        starterPrompts,
-        options,
-        className: "h-full",
-        defaultSelectedIds
-      }
-    ) })
-  ] });
-}
-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(
+function Sidebar({ side, children, className }) {
+  const { leftCollapsed, rightCollapsed } = useSidebar();
+  const collapsed = side === "left" ? leftCollapsed : rightCollapsed;
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "flex min-h-[600px] h-full w-full flex-col md:flex-row bg-background overflow-hidden",
-        className
+        "flex-shrink-0 border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
+        side === "left" ? "border-r" : "border-l",
+        collapsed ? "w-0 border-r-0 border-l-0 min-w-0" : "",
+        !collapsed && 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"
-              }
-            ),
-            "."
-          ] })
-        ] }) })
-      ]
+      children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-h-0", children })
     }
   );
 }
-function ChatFull({
+function FullChat({
   title = "Chat",
   placeholder,
   starterPrompts,
   options,
   className,
   headerProps,
-  leftSidebar,
-  rightSidebar,
-  leftSidebarClassName,
-  rightSidebarClassName,
   autoFocus = false,
-  defaultSelectedIds,
-  showWelcomeScreen = false,
-  welcomeScreenProps
+  defaultSelectedIds
 }) {
-  const { isMobile, isTablet } = useScreenSize();
-  const { isAuthenticated, isLoading } = useAuth();
-  const isSmallScreen = isMobile || isTablet;
-  const [internalLeftCollapsed, setInternalLeftCollapsed] = useState(() => {
-    if (typeof window !== "undefined") {
-      return window.innerWidth < 1024;
-    }
-    return false;
-  });
-  const [internalRightCollapsed, setInternalRightCollapsed] = useState(() => {
-    if (typeof window !== "undefined") {
-      return window.innerWidth < 1024;
-    }
-    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 })
-            }
-          )
-        ] })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full w-full bg-background", className), children: [
+    title && /* @__PURE__ */ jsx(ChatHeader, { title, ...headerProps }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden flex relative", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ jsx(
+      Thread,
+      {
+        placeholder,
+        starterPrompts,
+        options,
+        autoFocus,
+        defaultSelectedIds
+      }
+    ) }) })
+  ] });
 }
 function SidebarToggle({ side, className }) {
   const {
@@ -3198,13 +3099,14 @@ function SidebarToggle({ side, className }) {
     setRightCollapsed,
     leftCollapsible,
     rightCollapsible
-  } = useChatSidebar();
+  } = useSidebar();
   if (side === "left") {
     if (!leftCollapsible) return null;
     return /* @__PURE__ */ jsx(
       Button,
       {
         variant: "ghost",
+        size: "icon",
         onClick: () => setLeftCollapsed(!leftCollapsed),
         "aria-label": leftCollapsed ? "Expand left sidebar" : "Collapse left sidebar",
         className: cn("", className),
@@ -3218,6 +3120,7 @@ function SidebarToggle({ side, className }) {
       Button,
       {
         variant: "ghost",
+        size: "icon",
         onClick: () => setRightCollapsed(!rightCollapsed),
         "aria-label": rightCollapsed ? "Expand right sidebar" : "Collapse right sidebar",
         className: cn("", className),
@@ -3227,11 +3130,11 @@ function SidebarToggle({ side, className }) {
   }
   return null;
 }
-var PopoverContext = React12.createContext(
+var PopoverContext = React11.createContext(
   void 0
 );
 function usePopoverContext() {
-  const context = React12.useContext(PopoverContext);
+  const context = React11.useContext(PopoverContext);
   if (!context) {
     throw new Error("Popover components must be used within a Popover");
   }
@@ -3243,10 +3146,10 @@ function Popover({
   open: controlledOpen,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = React12.useState(defaultOpen);
-  const triggerRef = React12.useRef(null);
+  const [internalOpen, setInternalOpen] = React11.useState(defaultOpen);
+  const triggerRef = React11.useRef(null);
   const open = controlledOpen ?? internalOpen;
-  const setOpen = React12.useCallback(
+  const setOpen = React11.useCallback(
     (newOpen) => {
       if (controlledOpen === void 0) {
         setInternalOpen(newOpen);
@@ -3255,7 +3158,7 @@ function Popover({
     },
     [controlledOpen, onOpenChange]
   );
-  const value = React12.useMemo(
+  const value = React11.useMemo(
     () => ({
       open,
       setOpen,
@@ -3265,15 +3168,15 @@ function Popover({
   );
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
 }
-var PopoverTrigger = React12.forwardRef(
+var PopoverTrigger = React11.forwardRef(
   ({ asChild, className, children, ...props }, ref) => {
     const { setOpen, triggerRef } = usePopoverContext();
     const handleClick = (e) => {
       setOpen(true);
       props.onClick?.(e);
     };
-    if (asChild && React12.isValidElement(children)) {
-      return React12.cloneElement(children, {
+    if (asChild && React11.isValidElement(children)) {
+      return React11.cloneElement(children, {
         ref: (node) => {
           triggerRef.current = node;
           if (typeof children.ref === "function") {
@@ -3305,7 +3208,7 @@ var PopoverTrigger = React12.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React12.forwardRef(
+var PopoverContent = React11.forwardRef(
   ({
     className,
     side = "bottom",
@@ -3316,9 +3219,9 @@ var PopoverContent = React12.forwardRef(
     ...props
   }, ref) => {
     const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React12.useState({ top: 0, left: 0 });
-    const contentRef = React12.useRef(null);
-    React12.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;
@@ -3379,7 +3282,7 @@ var PopoverContent = React12.forwardRef(
         window.removeEventListener("scroll", updatePosition, true);
       };
     }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React12.useEffect(() => {
+    React11.useEffect(() => {
       if (!open) return;
       const handleClickOutside = (event) => {
         if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -3435,7 +3338,7 @@ var ThreadPopover = ({
   emptyState,
   onThreadSelect
 }) => {
-  const [isOpen, setIsOpen] = React12.useState(false);
+  const [isOpen, setIsOpen] = React11.useState(false);
   useHotkeys(
     "h",
     (e) => {
@@ -3485,12 +3388,12 @@ var ThreadPopover = ({
 var CreateThreadButton = ({
   className,
   variant = "ghost",
-  size = "icon",
+  size = "default",
   children,
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React12.useState(false);
+  const [isCreating, setIsCreating] = React11.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3516,7 +3419,7 @@ var CreateThreadButton = ({
       // Don't trigger in contenteditable elements
     }
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Button,
     {
       variant,
@@ -3524,7 +3427,10 @@ var CreateThreadButton = ({
       onClick: handleCreateThread,
       disabled: isCreating,
       className: cn(className),
-      children: /* @__PURE__ */ jsx(IconPlus, { className: "size-4" })
+      children: [
+        /* @__PURE__ */ jsx(IconPlus, { className: "size-4" }),
+        "New chat"
+      ]
     }
   );
 };
@@ -3616,10 +3522,10 @@ var AccountDialog = ({
   size
 }) => {
   const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React12.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React12.useState(false);
-  const [error, setError] = React12.useState(null);
-  const initials = React12.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);
@@ -3718,17 +3624,14 @@ var AccountDialog = ({
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       Button,
       {
         variant,
         size,
         onClick: () => setOpen(true),
         className,
-        children: [
-          /* @__PURE__ */ jsx(IconBrandGoogle, { className: "mr-2 size-4" }),
-          "Sign in with Google"
-        ]
+        children: "Sign in"
       }
     ),
     /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(AlertDialogContent, { className: "sm:max-w-md", children: [
@@ -3792,6 +3695,6 @@ function ThemeToggle() {
   );
 }
 
-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 };
+export { AccountDialog, AuthContext, AuthProvider, Badge2 as Badge, Box, Button2 as Button, Card2 as Card, Chart, ChatHeader, Checkbox, Col, Composer, CreateThreadButton, Divider, Form, FullChat, Heading, Image, Input2 as Input, Label2 as Label, List, ListItem, MelonyClientProvider, MelonyContext, PopupChat, RadioGroup, Row, Select2 as Select, Sidebar, SidebarContext, SidebarProvider, SidebarToggle, Spacer, Text, Textarea2 as Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, WelcomeScreen, groupEventsToMessages, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map