@melony/react 0.1.25 → 0.1.27

package/dist/index.js

@@ -1,18 +1,18 @@
 import * as React11 from 'react';
-import React11__default, { createContext, useState, useCallback, useEffect, useMemo, useContext, useRef } 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, IconTrash, IconHistory, IconArrowLeft, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconUser, IconLogout, IconBrandGoogle, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconSelector, IconChevronUp } from '@tabler/icons-react';
 import { Menu } from '@base-ui/react/menu';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
@@ -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",
@@ -689,7 +865,22 @@ function Composer({
     () => new Set(defaultSelectedIds)
   );
   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,55 +2871,31 @@ var ThreadList = ({
   emptyState,
   onThreadSelect
 }) => {
-  const {
-    threads,
-    activeThreadId,
-    selectThread,
-    createThread,
-    deleteThread,
-    isLoading
-  } = useThreads();
+  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;
+      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) {
       console.error("Failed to delete thread:", error);
     }
   };
-  const handleNewThread = async () => {
-    try {
-      await createThread();
-    } catch (error) {
-      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__ */ jsx("div", { className: cn("flex flex-col h-full", className), children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading && threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(IconLoader2, { className: "size-5 animate-spin text-muted-foreground" }) }) : threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsx(IconMessage, { className: "size-8 mx-auto opacity-50" }),
-    /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No threads yet" }),
-    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleNewThread, children: "Start a conversation" })
-  ] }) }) : /* @__PURE__ */ jsx("div", { className: "p-2 space-y-1", children: threads.map((thread) => {
+    /* @__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",
@@ -2776,33 +2903,51 @@ 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
     );
   }) }) }) });
 };
-function ChatPopup({
+function PopupChat({
   title = "Chat",
   placeholder = "Message the AI",
   starterPrompts,
@@ -2906,136 +3051,46 @@ function ChatPopup({
     )
   ] });
 }
-function ChatSidebar({
+function Sidebar({ side, children, className }) {
+  const { leftCollapsed, rightCollapsed } = useSidebar();
+  const collapsed = side === "left" ? leftCollapsed : rightCollapsed;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "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__ */ jsx("div", { className: "flex-1 overflow-hidden min-h-0", children })
+    }
+  );
+}
+function FullChat({
   title = "Chat",
-  placeholder = "Message the AI",
+  placeholder,
   starterPrompts,
   options,
   className,
   headerProps,
+  autoFocus = false,
   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(
+  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,
-        className: "h-full",
+        autoFocus,
         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 ChatFull({
-  title = "Chat",
-  placeholder = "Message the AI",
-  starterPrompts,
-  options,
-  className,
-  headerProps,
-  leftSidebar,
-  rightSidebar,
-  leftSidebarClassName,
-  rightSidebarClassName,
-  autoFocus = false,
-  defaultSelectedIds
-}) {
-  const { isMobile, isTablet } = useScreenSize();
-  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]
-  );
-  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,
@@ -3044,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),
@@ -3064,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),
@@ -3331,7 +3388,7 @@ var ThreadPopover = ({
 var CreateThreadButton = ({
   className,
   variant = "ghost",
-  size = "icon",
+  size = "default",
   children,
   onThreadCreated
 }) => {
@@ -3362,7 +3419,7 @@ var CreateThreadButton = ({
       // Don't trigger in contenteditable elements
     }
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Button,
     {
       variant,
@@ -3370,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"
+      ]
     }
   );
 };
@@ -3564,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: [
@@ -3638,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, 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