@melony/react 0.1.25 → 0.1.27

package/dist/index.cjs

@@ -4,15 +4,15 @@ var React11 = require('react');
 var react = require('nuqs/adapters/react');
 var reactQuery = require('@tanstack/react-query');
 var jsxRuntime = require('react/jsx-runtime');
-var client = require('melony/client');
-var nuqs = require('nuqs');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var button = require('@base-ui/react/button');
 var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var ICONS = require('@tabler/icons-react');
+var client = require('melony/client');
+var nuqs = require('nuqs');
 var mergeProps = require('@base-ui/react/merge-props');
 var useRender = require('@base-ui/react/use-render');
-var ICONS = require('@tabler/icons-react');
 var menu = require('@base-ui/react/menu');
 var separator = require('@base-ui/react/separator');
 var dialog = require('@base-ui/react/dialog');
@@ -188,49 +188,215 @@ var MelonyClientProvider = ({
     }
   ) }) });
 };
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.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__ */ jsxRuntime.jsx(
+    button.Button,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var useAuth = () => {
+  const context = React11.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-h-[600px] h-full w-full flex-col md:flex-row bg-background overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-8/12 flex-col bg-sidebar text-foreground relative overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-24 -left-24 size-96 bg-primary/5 rounded-full blur-3xl" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-24 -right-24 size-96 bg-primary/5 rounded-full blur-3xl" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "max-w-xl mx-auto w-full my-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-foreground", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-12 text-lg text-muted-foreground md:text-xl leading-relaxed", children: description }),
+            imageUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 relative group", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2", children: features.map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-bold text-lg text-foreground", children: feature.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground leading-relaxed", children: feature.description })
+            ] }, i)) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-sm space-y-8 my-auto mx-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 text-center md:text-left", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: "Get Started" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-lg", children: "Sign in to your account to continue" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ICONS.IconBrandGoogle, { className: "size-6" }),
+                  isLoading ? "Signing in..." : "Continue with Google"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative py-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-full border-t border-border" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-background px-3 text-muted-foreground tracking-widest font-medium", children: "Secure access" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground leading-relaxed text-center md:text-left", children: [
+            "By continuing, you agree to our ",
+            /* @__PURE__ */ jsxRuntime.jsx("br", { className: "hidden md:block" }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = React11.createContext(
   void 0
 );
 var AuthProvider = ({
   children,
-  service
+  service,
+  welcomeScreenProps
 }) => {
-  const [user, setUser] = React11.useState(null);
-  const [isLoading, setIsLoading] = React11.useState(true);
-  const fetchMe = React11.useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const userData = await service.getMe();
-      setUser(userData);
-    } catch (error) {
-      console.error("Failed to fetch user:", error);
-      setUser(null);
-    } finally {
-      setIsLoading(false);
+  const queryClient = reactQuery.useQueryClient();
+  const { data: user, isLoading } = reactQuery.useQuery({
+    queryKey: ["auth-user", service],
+    queryFn: () => service.getMe(),
+    retry: false
+  });
+  const logoutMutation = reactQuery.useMutation({
+    mutationFn: () => service.logout(),
+    onSuccess: () => {
+      queryClient.setQueryData(["auth-user", service], null);
     }
-  }, [service]);
-  React11.useEffect(() => {
-    fetchMe();
-  }, [fetchMe]);
+  });
   const login = React11.useCallback(() => {
     service.login();
   }, [service]);
   const logout = React11.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__ */ jsxRuntime.jsx(
       "div",
@@ -249,7 +415,15 @@ var AuthProvider = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children });
+  const value = {
+    user: user || null,
+    isAuthenticated: !!user,
+    isLoading,
+    login,
+    logout,
+    getToken: service.getToken
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children: !value.isAuthenticated && welcomeScreenProps ? /* @__PURE__ */ jsxRuntime.jsx(WelcomeScreen, { ...welcomeScreenProps }) : children });
 };
 var ThreadContext = React11.createContext(
   void 0
@@ -346,6 +520,103 @@ var ThreadProvider = ({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ThreadContext.Provider, { value, children });
 };
+function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
+  const [screenSize, setScreenSize] = React11.useState(() => {
+    if (typeof window === "undefined") {
+      return {
+        width: 1024,
+        height: 768,
+        isMobile: false,
+        isTablet: false,
+        isDesktop: true
+      };
+    }
+    const width = window.innerWidth;
+    return {
+      width,
+      height: window.innerHeight,
+      isMobile: width < mobileBreakpoint,
+      isTablet: width >= mobileBreakpoint && width < tabletBreakpoint,
+      isDesktop: width >= tabletBreakpoint
+    };
+  });
+  React11.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const updateScreenSize = () => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      setScreenSize({
+        width,
+        height,
+        isMobile: width < mobileBreakpoint,
+        isTablet: width >= mobileBreakpoint && width < tabletBreakpoint,
+        isDesktop: width >= tabletBreakpoint
+      });
+    };
+    updateScreenSize();
+    window.addEventListener("resize", updateScreenSize);
+    return () => {
+      window.removeEventListener("resize", updateScreenSize);
+    };
+  }, [mobileBreakpoint, tabletBreakpoint]);
+  return screenSize;
+}
+var SidebarContext = React11.createContext(
+  void 0
+);
+function useSidebar() {
+  const context = React11.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] = React11.useState(() => {
+    if (defaultLeftCollapsed !== void 0) return defaultLeftCollapsed;
+    if (typeof window !== "undefined") {
+      return window.innerWidth < 1024;
+    }
+    return false;
+  });
+  const [rightCollapsed, setRightCollapsed] = React11.useState(() => {
+    if (defaultRightCollapsed !== void 0) return defaultRightCollapsed;
+    if (typeof window !== "undefined") {
+      return window.innerWidth < 1024;
+    }
+    return false;
+  });
+  React11.useEffect(() => {
+    if (isSmallScreen) {
+      setLeftCollapsed(true);
+      setRightCollapsed(true);
+    }
+  }, [isSmallScreen]);
+  const handleLeftToggle = React11.useCallback((collapsed) => {
+    setLeftCollapsed(collapsed);
+  }, []);
+  const handleRightToggle = React11.useCallback((collapsed) => {
+    setRightCollapsed(collapsed);
+  }, []);
+  const contextValue = React11.useMemo(
+    () => ({
+      leftCollapsed,
+      rightCollapsed,
+      setLeftCollapsed: handleLeftToggle,
+      setRightCollapsed: handleRightToggle,
+      leftCollapsible: true,
+      rightCollapsible: true
+    }),
+    [leftCollapsed, rightCollapsed, handleLeftToggle, handleRightToggle]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children });
+}
 var ThemeContext = React11.createContext(void 0);
 function ThemeProvider({ children }) {
   const [theme, setThemeState] = React11.useState("system");
@@ -419,13 +690,6 @@ var useMelony = (options) => {
   }, [client, initialEvents, reset]);
   return context;
 };
-var useAuth = () => {
-  const context = React11.useContext(AuthContext);
-  if (context === void 0) {
-    throw new Error("useAuth must be used within an AuthProvider");
-  }
-  return context;
-};
 var useThreads = () => {
   const context = React11.useContext(ThreadContext);
   if (context === void 0) {
@@ -433,94 +697,6 @@ var useThreads = () => {
   }
   return context;
 };
-function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
-  const [screenSize, setScreenSize] = React11.useState(() => {
-    if (typeof window === "undefined") {
-      return {
-        width: 1024,
-        height: 768,
-        isMobile: false,
-        isTablet: false,
-        isDesktop: true
-      };
-    }
-    const width = window.innerWidth;
-    return {
-      width,
-      height: window.innerHeight,
-      isMobile: width < mobileBreakpoint,
-      isTablet: width >= mobileBreakpoint && width < tabletBreakpoint,
-      isDesktop: width >= tabletBreakpoint
-    };
-  });
-  React11.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const updateScreenSize = () => {
-      const width = window.innerWidth;
-      const height = window.innerHeight;
-      setScreenSize({
-        width,
-        height,
-        isMobile: width < mobileBreakpoint,
-        isTablet: width >= mobileBreakpoint && width < tabletBreakpoint,
-        isDesktop: width >= tabletBreakpoint
-      });
-    };
-    updateScreenSize();
-    window.addEventListener("resize", updateScreenSize);
-    return () => {
-      window.removeEventListener("resize", updateScreenSize);
-    };
-  }, [mobileBreakpoint, tabletBreakpoint]);
-  return screenSize;
-}
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var buttonVariants = classVarianceAuthority.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__ */ jsxRuntime.jsx(
-    button.Button,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
 function Textarea({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
@@ -710,7 +886,22 @@ function Composer({
     () => new Set(defaultSelectedIds)
   );
   const [attachedFiles, setAttachedFiles] = React11__namespace.default.useState([]);
+  const [previews, setPreviews] = React11__namespace.default.useState([]);
   const fileInputRef = React11__namespace.default.useRef(null);
+  React11__namespace.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") {
@@ -756,11 +947,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) => {
@@ -826,13 +1012,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__ */ jsxRuntime.jsx("div", { className: cn("relative flex flex-col w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col w-full border-input border-[1.5px] rounded-3xl bg-background shadow-sm focus-within:border-ring transition-all p-2", children: [
+    previews.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3 p-2 px-3 pb-3", children: previews.map((preview, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: preview.url,
+              alt: preview.name,
+              className: "w-full h-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center p-2 text-center", children: [
+            preview.type.includes("text") || preview.type.includes("pdf") ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconFileText, { className: "h-8 w-8 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconFile, { className: "h-8 w-8 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] truncate w-full px-1 mt-1 text-muted-foreground", children: preview.name })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ICONS.IconX, { className: "h-3 w-3" })
+            }
+          )
+        ]
+      },
+      index
+    )) }),
     /* @__PURE__ */ jsxRuntime.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
@@ -853,100 +1082,22 @@ function Composer({
               disabled: isLoading || attachedFiles.length >= maxFiles
             }
           ),
-          attachedFiles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ICONS.IconPaperclip, { className: "h-4 w-4" })
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPaperclip, { className: "h-4 w-4" }),
+                attachedFiles.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "ml-1 h-[18px] min-w-[18px] px-1.5 text-[10px]", children: attachedFiles.length })
+              ]
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DropdownMenuTrigger,
-              {
-                render: /* @__PURE__ */ jsxRuntime.jsxs(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    size: "sm",
-                    className: "text-muted-foreground gap-2",
-                    title: `${attachedFiles.length} files attached`,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPaperclip, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "h-[18px] min-w-[18px] px-1.5 text-[10px]", children: attachedFiles.length })
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuGroup, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuLabel, { children: [
-                  "Attached Files (",
-                  attachedFiles.length,
-                  "/",
-                  maxFiles,
-                  ")"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-                attachedFiles.map((file, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  DropdownMenuItem,
-                  {
-                    className: "flex items-center justify-between group",
-                    onSelect: (e) => e.preventDefault(),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "span",
-                          {
-                            className: "truncate text-sm",
-                            title: file.name,
-                            children: file.name
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatFileSize(file.size) })
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Button,
-                        {
-                          type: "button",
-                          variant: "ghost",
-                          size: "icon",
-                          className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
-                          onClick: () => handleRemoveFile(index),
-                          children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconX, { className: "h-3 w-3" })
-                        }
-                      )
-                    ]
-                  },
-                  index
-                ))
-              ] }),
-              attachedFiles.length < maxFiles && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  DropdownMenuItem,
-                  {
-                    onSelect: (e) => {
-                      e.preventDefault();
-                      fileInputRef.current?.click();
-                    },
-                    className: "text-primary focus:text-primary",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPlus, { className: "mr-2 h-4 w-4" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Add more files" })
-                    ]
-                  }
-                )
-              ] })
-            ] })
-          ] })
+          )
         ] }),
         options.map((group) => {
           const selectedInGroup = group.options.filter(
@@ -2741,55 +2892,31 @@ var ThreadList = ({
   emptyState,
   onThreadSelect
 }) => {
-  const {
-    threads,
-    activeThreadId,
-    selectThread,
-    createThread,
-    deleteThread,
-    isLoading
-  } = useThreads();
+  const { threads, activeThreadId, selectThread, deleteThread, isLoading } = useThreads();
+  const sortedThreads = React11__namespace.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__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading && threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "size-5 animate-spin text-muted-foreground" }) }) : threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconMessage, { className: "size-8 mx-auto opacity-50" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "No threads yet" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: handleNewThread, children: "Start a conversation" })
-  ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 space-y-1", children: threads.map((thread) => {
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "No threads yet" })
+  ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 space-y-1", children: sortedThreads.map((thread) => {
     const isActive = thread.id === activeThreadId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -2797,33 +2924,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__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-medium truncate"), children: thread.title || `Thread ${thread.id.slice(0, 8)}` }),
-            thread.updatedAt && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs shrink-0"), children: formatDate(thread.updatedAt) })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon-xs",
-              onClick: (e) => handleDelete(e, thread.id),
-              className: cn(
-                "opacity-0 group-hover:opacity-100 transition-opacity shrink-0",
-                isActive && "hover:bg-primary-foreground/20"
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconTrash, { className: "size-3" })
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: thread.title || `Thread ${thread.id.slice(0, 8)}` }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenuTrigger,
+              {
+                render: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon-xs",
+                    ...props,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      props.onClick?.(e);
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconDotsVertical, { className: "size-3.5" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", className: "w-32", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              DropdownMenuItem,
+              {
+                variant: "destructive",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleDelete(thread.id);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconTrash, { className: "size-4 mr-2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Delete" })
+                ]
+              }
+            ) })
+          ] }) })
         ]
       },
       thread.id
     );
   }) }) }) });
 };
-function ChatPopup({
+function PopupChat({
   title = "Chat",
   placeholder = "Message the AI",
   starterPrompts,
@@ -2927,136 +3072,46 @@ function ChatPopup({
     )
   ] });
 }
-function ChatSidebar({
+function Sidebar({ side, children, className }) {
+  const { leftCollapsed, rightCollapsed } = useSidebar();
+  const collapsed = side === "left" ? leftCollapsed : rightCollapsed;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full border-r bg-background w-80", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ChatHeader, { title, ...headerProps }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full w-full bg-background", className), children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(ChatHeader, { title, ...headerProps }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden flex relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
       Thread,
       {
         placeholder,
         starterPrompts,
         options,
-        className: "h-full",
+        autoFocus,
         defaultSelectedIds
       }
-    ) })
+    ) }) })
   ] });
 }
-var ChatSidebarContext = React11.createContext(
-  void 0
-);
-function useChatSidebar() {
-  const context = React11.useContext(ChatSidebarContext);
-  if (context === void 0) {
-    throw new Error("useChatSidebar must be used within a ChatSidebarProvider");
-  }
-  return context;
-}
-function ChatFull({
-  title = "Chat",
-  placeholder = "Message the AI",
-  starterPrompts,
-  options,
-  className,
-  headerProps,
-  leftSidebar,
-  rightSidebar,
-  leftSidebarClassName,
-  rightSidebarClassName,
-  autoFocus = false,
-  defaultSelectedIds
-}) {
-  const { isMobile, isTablet } = useScreenSize();
-  const isSmallScreen = isMobile || isTablet;
-  const [internalLeftCollapsed, setInternalLeftCollapsed] = React11.useState(() => {
-    if (typeof window !== "undefined") {
-      return window.innerWidth < 1024;
-    }
-    return false;
-  });
-  const [internalRightCollapsed, setInternalRightCollapsed] = React11.useState(() => {
-    if (typeof window !== "undefined") {
-      return window.innerWidth < 1024;
-    }
-    return false;
-  });
-  React11.useEffect(() => {
-    if (isSmallScreen) {
-      setInternalLeftCollapsed(true);
-      setInternalRightCollapsed(true);
-    }
-  }, [isSmallScreen]);
-  const leftCollapsed = internalLeftCollapsed;
-  const rightCollapsed = internalRightCollapsed;
-  const handleLeftToggle = React11.useCallback((collapsed) => {
-    setInternalLeftCollapsed(collapsed);
-  }, []);
-  const handleRightToggle = React11.useCallback((collapsed) => {
-    setInternalRightCollapsed(collapsed);
-  }, []);
-  const contextValue = React11.useMemo(
-    () => ({
-      leftCollapsed,
-      rightCollapsed,
-      setLeftCollapsed: handleLeftToggle,
-      setRightCollapsed: handleRightToggle,
-      leftCollapsible: true,
-      rightCollapsible: true
-    }),
-    [leftCollapsed, rightCollapsed, handleLeftToggle, handleRightToggle]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(ChatSidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn("flex flex-col h-full w-full bg-background", className),
-      children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx(ChatHeader, { title, ...headerProps }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-hidden flex relative", children: [
-          leftSidebar && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "flex-shrink-0 border-r border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
-                leftCollapsed ? "w-0 border-r-0 min-w-0" : "",
-                !leftCollapsed && leftSidebarClassName
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: leftSidebar })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Thread,
-            {
-              placeholder,
-              starterPrompts,
-              options,
-              autoFocus,
-              defaultSelectedIds
-            }
-          ) }),
-          rightSidebar && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "flex-shrink-0 border-l border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
-                rightCollapsed ? "w-0 border-l-0 min-w-0" : "",
-                !rightCollapsed && rightSidebarClassName
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: rightSidebar })
-            }
-          )
-        ] })
-      ]
-    }
-  ) });
-}
 function SidebarToggle({ side, className }) {
   const {
     leftCollapsed,
@@ -3065,13 +3120,14 @@ function SidebarToggle({ side, className }) {
     setRightCollapsed,
     leftCollapsible,
     rightCollapsible
-  } = useChatSidebar();
+  } = useSidebar();
   if (side === "left") {
     if (!leftCollapsible) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
         variant: "ghost",
+        size: "icon",
         onClick: () => setLeftCollapsed(!leftCollapsed),
         "aria-label": leftCollapsed ? "Expand left sidebar" : "Collapse left sidebar",
         className: cn("", className),
@@ -3085,6 +3141,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),
@@ -3352,7 +3409,7 @@ var ThreadPopover = ({
 var CreateThreadButton = ({
   className,
   variant = "ghost",
-  size = "icon",
+  size = "default",
   children,
   onThreadCreated
 }) => {
@@ -3383,7 +3440,7 @@ var CreateThreadButton = ({
       // Don't trigger in contenteditable elements
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Button,
     {
       variant,
@@ -3391,7 +3448,10 @@ var CreateThreadButton = ({
       onClick: handleCreateThread,
       disabled: isCreating,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPlus, { className: "size-4" })
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPlus, { className: "size-4" }),
+        "New chat"
+      ]
     }
   );
 };
@@ -3585,17 +3645,14 @@ var AccountDialog = ({
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
         variant,
         size,
         onClick: () => setOpen(true),
         className,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconBrandGoogle, { className: "mr-2 size-4" }),
-          "Sign in with Google"
-        ]
+        children: "Sign in"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "sm:max-w-md", children: [
@@ -3667,17 +3724,14 @@ exports.Box = Box;
 exports.Button = Button2;
 exports.Card = Card2;
 exports.Chart = Chart;
-exports.ChatFull = ChatFull;
 exports.ChatHeader = ChatHeader;
-exports.ChatPopup = ChatPopup;
-exports.ChatSidebar = ChatSidebar;
-exports.ChatSidebarContext = ChatSidebarContext;
 exports.Checkbox = Checkbox;
 exports.Col = Col;
 exports.Composer = Composer;
 exports.CreateThreadButton = CreateThreadButton;
 exports.Divider = Divider;
 exports.Form = Form;
+exports.FullChat = FullChat;
 exports.Heading = Heading;
 exports.Image = Image;
 exports.Input = Input2;
@@ -3686,9 +3740,13 @@ exports.List = List;
 exports.ListItem = ListItem;
 exports.MelonyClientProvider = MelonyClientProvider;
 exports.MelonyContext = MelonyContext;
+exports.PopupChat = PopupChat;
 exports.RadioGroup = RadioGroup;
 exports.Row = Row;
 exports.Select = Select2;
+exports.Sidebar = Sidebar;
+exports.SidebarContext = SidebarContext;
+exports.SidebarProvider = SidebarProvider;
 exports.SidebarToggle = SidebarToggle;
 exports.Spacer = Spacer;
 exports.Text = Text;
@@ -3701,11 +3759,12 @@ exports.ThreadList = ThreadList;
 exports.ThreadPopover = ThreadPopover;
 exports.ThreadProvider = ThreadProvider;
 exports.UIRenderer = UIRenderer;
+exports.WelcomeScreen = WelcomeScreen;
 exports.groupEventsToMessages = groupEventsToMessages;
 exports.useAuth = useAuth;
-exports.useChatSidebar = useChatSidebar;
 exports.useMelony = useMelony;
 exports.useScreenSize = useScreenSize;
+exports.useSidebar = useSidebar;
 exports.useTheme = useTheme;
 exports.useThreads = useThreads;
 //# sourceMappingURL=index.cjs.map