@melony/react 0.1.26 → 0.1.27

package/dist/index.cjs

@@ -1,18 +1,18 @@
 'use strict';
 
-var React12 = require('react');
+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');
@@ -40,7 +40,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
+var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
 var ICONS__namespace = /*#__PURE__*/_interopNamespace(ICONS);
 
 // src/providers/melony-provider.tsx
@@ -69,7 +69,7 @@ function groupEventsToMessages(events) {
   }
   return messages;
 }
-var MelonyContext = React12.createContext(
+var MelonyContext = React11.createContext(
   void 0
 );
 var defaultQueryClient = new reactQuery.QueryClient({
@@ -86,29 +86,29 @@ var MelonyContextProviderInner = ({
   initialEvents,
   setContextValue
 }) => {
-  const [state, setState] = React12.useState(client.getState());
+  const [state, setState] = React11.useState(client.getState());
   const { data: config } = reactQuery.useQuery({
     queryKey: ["melony-config", client.url],
     queryFn: () => client.getConfig(),
     staleTime: Infinity
   });
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
       client.reset(initialEvents);
     }
   }, [client, initialEvents]);
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     setState(client.getState());
     const unsubscribe = client.subscribe(setState);
     return () => {
       unsubscribe();
     };
   }, [client]);
-  const reset = React12.useCallback(
+  const reset = React11.useCallback(
     (events) => client.reset(events),
     [client]
   );
-  const dispatchClientAction = React12.useCallback(
+  const dispatchClientAction = React11.useCallback(
     async (event) => {
       if (!event.type.startsWith("client:")) return false;
       switch (event.type) {
@@ -144,7 +144,7 @@ var MelonyContextProviderInner = ({
     },
     [client, reset]
   );
-  const sendEvent = React12.useCallback(
+  const sendEvent = React11.useCallback(
     async (event, options) => {
       const handled = await dispatchClientAction(event);
       if (handled) return;
@@ -155,7 +155,7 @@ var MelonyContextProviderInner = ({
     },
     [client, dispatchClientAction]
   );
-  const value = React12.useMemo(
+  const value = React11.useMemo(
     () => ({
       ...state,
       messages: groupEventsToMessages(state.events),
@@ -166,7 +166,7 @@ var MelonyContextProviderInner = ({
     }),
     [state, sendEvent, reset, client, config]
   );
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     setContextValue(value);
   }, [value, setContextValue]);
   return /* @__PURE__ */ jsxRuntime.jsx(react.NuqsAdapter, { children });
@@ -177,7 +177,7 @@ var MelonyClientProvider = ({
   initialEvents,
   queryClient = defaultQueryClient
 }) => {
-  const [contextValue, setContextValue] = React12.useState(void 0);
+  const [contextValue, setContextValue] = React11.useState(void 0);
   return /* @__PURE__ */ jsxRuntime.jsx(MelonyContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(
     MelonyContextProviderInner,
     {
@@ -188,49 +188,215 @@ var MelonyClientProvider = ({
     }
   ) }) });
 };
-var AuthContext = React12.createContext(
+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] = React12.useState(null);
-  const [isLoading, setIsLoading] = React12.useState(true);
-  const fetchMe = React12.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]);
-  React12.useEffect(() => {
-    fetchMe();
-  }, [fetchMe]);
-  const login = React12.useCallback(() => {
+  });
+  const login = React11.useCallback(() => {
     service.login();
   }, [service]);
-  const logout = React12.useCallback(async () => {
+  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,9 +415,17 @@ 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 = React12.createContext(
+var ThreadContext = React11.createContext(
   void 0
 );
 var ThreadProvider = ({
@@ -260,7 +434,7 @@ var ThreadProvider = ({
   initialThreadId: providedInitialThreadId
 }) => {
   const queryClient = reactQuery.useQueryClient();
-  const defaultInitialThreadId = React12.useMemo(() => client.generateId(), []);
+  const defaultInitialThreadId = React11.useMemo(() => client.generateId(), []);
   const initialThreadId = providedInitialThreadId || defaultInitialThreadId;
   const [activeThreadId, setActiveThreadId] = nuqs.useQueryState(
     "threadId",
@@ -301,22 +475,22 @@ var ThreadProvider = ({
       }
     }
   });
-  const selectThread = React12.useCallback(
+  const selectThread = React11.useCallback(
     (threadId) => {
       setActiveThreadId(threadId);
     },
     [setActiveThreadId]
   );
-  const createThread = React12.useCallback(async () => {
+  const createThread = React11.useCallback(async () => {
     return createMutation.mutateAsync();
   }, [createMutation]);
-  const deleteThread = React12.useCallback(
+  const deleteThread = React11.useCallback(
     async (threadId) => {
       return deleteMutation.mutateAsync(threadId);
     },
     [deleteMutation]
   );
-  const value = React12.useMemo(
+  const value = React11.useMemo(
     () => ({
       threads,
       activeThreadId,
@@ -346,11 +520,108 @@ var ThreadProvider = ({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ThreadContext.Provider, { value, children });
 };
-var ThemeContext = React12.createContext(void 0);
+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] = React12.useState("system");
-  const [resolvedTheme, setResolvedTheme] = React12.useState("light");
-  React12.useEffect(() => {
+  const [theme, setThemeState] = React11.useState("system");
+  const [resolvedTheme, setResolvedTheme] = React11.useState("light");
+  React11.useEffect(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem("theme");
       if (stored) {
@@ -358,7 +629,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, []);
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     if (typeof window !== "undefined") {
       if (theme === "system") {
         const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -373,7 +644,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, [theme]);
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     if (typeof window !== "undefined") {
       const root = document.documentElement;
       if (resolvedTheme === "dark") {
@@ -392,21 +663,21 @@ function ThemeProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, resolvedTheme }, children });
 }
 function useTheme() {
-  const context = React12.useContext(ThemeContext);
+  const context = React11.useContext(ThemeContext);
   if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
   return context;
 }
 var useMelony = (options) => {
-  const context = React12.useContext(MelonyContext);
+  const context = React11.useContext(MelonyContext);
   if (context === void 0) {
     throw new Error("useMelony must be used within a MelonyClientProvider");
   }
   const { client, reset } = context;
   const { initialEvents } = options || {};
-  const prevInitialEventsRef = React12.useRef(void 0);
-  React12.useEffect(() => {
+  const prevInitialEventsRef = React11.useRef(void 0);
+  React11.useEffect(() => {
     const currentSerialized = initialEvents ? JSON.stringify(initialEvents) : void 0;
     if (currentSerialized !== prevInitialEventsRef.current) {
       if (initialEvents) {
@@ -419,108 +690,13 @@ var useMelony = (options) => {
   }, [client, initialEvents, reset]);
   return context;
 };
-var useAuth = () => {
-  const context = React12.useContext(AuthContext);
-  if (context === void 0) {
-    throw new Error("useAuth must be used within an AuthProvider");
-  }
-  return context;
-};
 var useThreads = () => {
-  const context = React12.useContext(ThreadContext);
+  const context = React11.useContext(ThreadContext);
   if (context === void 0) {
     throw new Error("useThreads must be used within a ThreadProvider");
   }
   return context;
 };
-function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
-  const [screenSize, setScreenSize] = React12.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
-    };
-  });
-  React12.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",
@@ -706,11 +882,26 @@ function Composer({
   const accept = fileAttachments?.accept;
   const maxFiles = fileAttachments?.maxFiles ?? 10;
   const maxFileSize = fileAttachments?.maxFileSize ?? 10 * 1024 * 1024;
-  const [selectedOptions, setSelectedOptions] = React12__namespace.default.useState(
+  const [selectedOptions, setSelectedOptions] = React11__namespace.default.useState(
     () => new Set(defaultSelectedIds)
   );
-  const [attachedFiles, setAttachedFiles] = React12__namespace.default.useState([]);
-  const fileInputRef = React12__namespace.default.useRef(null);
+  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(
@@ -1501,9 +1652,9 @@ var Image = ({
   className,
   style
 }) => {
-  const [hasError, setHasError] = React12.useState(false);
-  const [isLoading, setIsLoading] = React12.useState(true);
-  const [open, setOpen] = React12.useState(false);
+  const [hasError, setHasError] = React11.useState(false);
+  const [isLoading, setIsLoading] = React11.useState(true);
+  const [open, setOpen] = React11.useState(false);
   const sizes = {
     sm: "h-11",
     md: "h-22",
@@ -1662,7 +1813,7 @@ var Chart = ({
   className,
   style
 }) => {
-  const [tooltip, setTooltip] = React12.useState(null);
+  const [tooltip, setTooltip] = React11.useState(null);
   if (!Array.isArray(data)) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-destructive border border-destructive/20 rounded-md bg-destructive/5", children: "Error: Chart data must be an array" });
   }
@@ -2408,7 +2559,7 @@ var Button2 = ({
 };
 var Form = ({ children, onSubmitAction, className, style }) => {
   const { sendEvent } = useMelony();
-  const [isSubmitted, setIsSubmitted] = React12.useState(false);
+  const [isSubmitted, setIsSubmitted] = React11.useState(false);
   const handleSubmit = (e) => {
     e.preventDefault();
     if (isSubmitted) return;
@@ -2555,7 +2706,7 @@ function MessageBubble({ message }) {
   );
 }
 function LoadingIndicator({ status }) {
-  const [isExpanded, setIsExpanded] = React12.useState(false);
+  const [isExpanded, setIsExpanded] = React11.useState(false);
   const message = status?.message || "Processing...";
   const details = status?.details;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -2587,7 +2738,7 @@ function MessageList({
   if (messages.length === 0) {
     return null;
   }
-  const isTextStreaming = React12.useMemo(() => {
+  const isTextStreaming = React11.useMemo(() => {
     if (messages.length === 0 || !isLoading) return false;
     const lastMessage = messages[messages.length - 1];
     return lastMessage.content.some((event) => event.type === "text-delta");
@@ -2615,7 +2766,7 @@ function Thread({
   const starterPrompts = localStarterPrompts ?? config?.starterPrompts;
   const options = localOptions ?? config?.options;
   const fileAttachments = config?.fileAttachments;
-  const allDefaultSelectedIds = React12.useMemo(() => {
+  const allDefaultSelectedIds = React11.useMemo(() => {
     const defaultSelectedIdsFromOptions = options?.flatMap((group) => group.defaultSelectedIds ?? []) ?? [];
     return [
       .../* @__PURE__ */ new Set([
@@ -2624,9 +2775,9 @@ function Thread({
       ])
     ];
   }, [options, defaultSelectedIds]);
-  const [input, setInput] = React12.useState("");
-  const messagesEndRef = React12.useRef(null);
-  React12.useEffect(() => {
+  const [input, setInput] = React11.useState("");
+  const messagesEndRef = React11.useRef(null);
+  React11.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const handleSubmit = async (state, overrideInput) => {
@@ -2741,15 +2892,8 @@ var ThreadList = ({
   emptyState,
   onThreadSelect
 }) => {
-  const {
-    threads,
-    activeThreadId,
-    selectThread,
-    createThread,
-    deleteThread,
-    isLoading
-  } = useThreads();
-  const sortedThreads = React12__namespace.useMemo(() => {
+  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;
@@ -2769,84 +2913,62 @@ var ThreadList = ({
       console.error("Failed to delete thread:", error);
     }
   };
-  const handleNewThread = async () => {
-    try {
-      await createThread();
-    } catch (error) {
-      console.error("Failed to create thread:", error);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
+  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("div", { className: "p-2 space-y-1", children: sortedThreads.map((thread) => {
+    const isActive = thread.id === activeThreadId;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        variant: "outline",
-        className: "w-full justify-start gap-2 h-9 px-3 border-dashed hover:border-solid transition-all",
-        onClick: handleNewThread,
+        onClick: () => handleThreadClick(thread.id),
+        className: cn(
+          "group relative flex items-center gap-3 px-3 py-1.5 rounded-lg cursor-pointer transition-colors",
+          isActive ? "bg-muted text-foreground" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground"
+        ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPlus, { className: "size-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "New chat" })
+          /* @__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" })
+                ]
+              }
+            ) })
+          ] }) })
         ]
-      }
-    ) }),
-    /* @__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: sortedThreads.map((thread) => {
-      const isActive = thread.id === activeThreadId;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          onClick: () => handleThreadClick(thread.id),
-          className: cn(
-            "group relative flex items-center gap-3 px-3 py-1.5 rounded-lg cursor-pointer transition-colors",
-            isActive ? "bg-muted text-foreground" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground"
-          ),
-          children: [
-            /* @__PURE__ */ 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
-      );
-    }) }) })
-  ] });
+      },
+      thread.id
+    );
+  }) }) }) });
 };
-function ChatPopup({
+function PopupChat({
   title = "Chat",
   placeholder = "Message the AI",
   starterPrompts,
@@ -2855,8 +2977,8 @@ function ChatPopup({
   headerProps,
   defaultSelectedIds
 }) {
-  const [isOpen, setIsOpen] = React12.useState(defaultOpen);
-  const [view, setView] = React12.useState("chat");
+  const [isOpen, setIsOpen] = React11.useState(defaultOpen);
+  const [view, setView] = React11.useState("chat");
   const { createThread } = useThreads();
   const handleNewChat = async () => {
     try {
@@ -2950,266 +3072,45 @@ function ChatPopup({
     )
   ] });
 }
-function ChatSidebar({
-  title = "Chat",
-  placeholder = "Message the AI",
-  starterPrompts,
-  options,
-  className,
-  headerProps,
-  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(
-      Thread,
-      {
-        placeholder,
-        starterPrompts,
-        options,
-        className: "h-full",
-        defaultSelectedIds
-      }
-    ) })
-  ] });
-}
-var ChatSidebarContext = React12.createContext(
-  void 0
-);
-function useChatSidebar() {
-  const context = React12.useContext(ChatSidebarContext);
-  if (context === void 0) {
-    throw new Error("useChatSidebar must be used within a ChatSidebarProvider");
-  }
-  return context;
-}
-function WelcomeScreen({
-  title = "Welcome to Melony",
-  description = "The most powerful AI agent framework for building modern applications. Connect your tools, build your brain, and ship faster.",
-  features = [
-    {
-      title: "Context Aware",
-      description: "Built-in state management for complex LLM flows."
-    },
-    {
-      title: "Extensible",
-      description: "Plugin architecture for easy integrations."
-    },
-    {
-      title: "Real-time",
-      description: "Streaming responses and live state updates."
-    },
-    {
-      title: "Tool-ready",
-      description: "Ready-to-use actions for common tasks."
-    }
-  ],
-  className,
-  onLoginClick,
-  termsUrl = "#",
-  privacyUrl = "#",
-  imageUrl,
-  imageAlt = "Product screenshot"
-}) {
-  const { login, isLoading } = useAuth();
-  const handleLogin = () => {
-    if (onLoginClick) {
-      onLoginClick();
-    } else {
-      login();
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+function Sidebar({ side, children, className }) {
+  const { leftCollapsed, rightCollapsed } = useSidebar();
+  const collapsed = side === "left" ? leftCollapsed : rightCollapsed;
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
-        "flex min-h-[600px] h-full w-full flex-col md:flex-row bg-background overflow-hidden",
-        className
+        "flex-shrink-0 border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
+        side === "left" ? "border-r" : "border-l",
+        collapsed ? "w-0 border-r-0 border-l-0 min-w-0" : "",
+        !collapsed && className
       ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 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", 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 flex-1 flex-col items-center justify-center 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", 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"
-              }
-            ),
-            "."
-          ] })
-        ] }) })
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-h-0", children })
     }
   );
 }
-function ChatFull({
+function FullChat({
   title = "Chat",
   placeholder,
   starterPrompts,
   options,
   className,
   headerProps,
-  leftSidebar,
-  rightSidebar,
-  leftSidebarClassName,
-  rightSidebarClassName,
   autoFocus = false,
-  defaultSelectedIds,
-  showWelcomeScreen = false,
-  welcomeScreenProps
+  defaultSelectedIds
 }) {
-  const { isMobile, isTablet } = useScreenSize();
-  const { isAuthenticated, isLoading } = useAuth();
-  const isSmallScreen = isMobile || isTablet;
-  const [internalLeftCollapsed, setInternalLeftCollapsed] = React12.useState(() => {
-    if (typeof window !== "undefined") {
-      return window.innerWidth < 1024;
-    }
-    return false;
-  });
-  const [internalRightCollapsed, setInternalRightCollapsed] = React12.useState(() => {
-    if (typeof window !== "undefined") {
-      return window.innerWidth < 1024;
-    }
-    return false;
-  });
-  React12.useEffect(() => {
-    if (isSmallScreen) {
-      setInternalLeftCollapsed(true);
-      setInternalRightCollapsed(true);
-    }
-  }, [isSmallScreen]);
-  const leftCollapsed = internalLeftCollapsed;
-  const rightCollapsed = internalRightCollapsed;
-  const handleLeftToggle = React12.useCallback((collapsed) => {
-    setInternalLeftCollapsed(collapsed);
-  }, []);
-  const handleRightToggle = React12.useCallback((collapsed) => {
-    setInternalRightCollapsed(collapsed);
-  }, []);
-  const contextValue = React12.useMemo(
-    () => ({
-      leftCollapsed,
-      rightCollapsed,
-      setLeftCollapsed: handleLeftToggle,
-      setRightCollapsed: handleRightToggle,
-      leftCollapsible: true,
-      rightCollapsible: true
-    }),
-    [leftCollapsed, rightCollapsed, handleLeftToggle, handleRightToggle]
-  );
-  if (showWelcomeScreen && !isAuthenticated && !isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(WelcomeScreen, { ...welcomeScreenProps });
-  }
-  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 })
-            }
-          )
-        ] })
-      ]
-    }
-  ) });
+  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,
+        autoFocus,
+        defaultSelectedIds
+      }
+    ) }) })
+  ] });
 }
 function SidebarToggle({ side, className }) {
   const {
@@ -3219,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),
@@ -3239,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),
@@ -3248,11 +3151,11 @@ function SidebarToggle({ side, className }) {
   }
   return null;
 }
-var PopoverContext = React12__namespace.createContext(
+var PopoverContext = React11__namespace.createContext(
   void 0
 );
 function usePopoverContext() {
-  const context = React12__namespace.useContext(PopoverContext);
+  const context = React11__namespace.useContext(PopoverContext);
   if (!context) {
     throw new Error("Popover components must be used within a Popover");
   }
@@ -3264,10 +3167,10 @@ function Popover({
   open: controlledOpen,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = React12__namespace.useState(defaultOpen);
-  const triggerRef = React12__namespace.useRef(null);
+  const [internalOpen, setInternalOpen] = React11__namespace.useState(defaultOpen);
+  const triggerRef = React11__namespace.useRef(null);
   const open = controlledOpen ?? internalOpen;
-  const setOpen = React12__namespace.useCallback(
+  const setOpen = React11__namespace.useCallback(
     (newOpen) => {
       if (controlledOpen === void 0) {
         setInternalOpen(newOpen);
@@ -3276,7 +3179,7 @@ function Popover({
     },
     [controlledOpen, onOpenChange]
   );
-  const value = React12__namespace.useMemo(
+  const value = React11__namespace.useMemo(
     () => ({
       open,
       setOpen,
@@ -3286,15 +3189,15 @@ function Popover({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value, children });
 }
-var PopoverTrigger = React12__namespace.forwardRef(
+var PopoverTrigger = React11__namespace.forwardRef(
   ({ asChild, className, children, ...props }, ref) => {
     const { setOpen, triggerRef } = usePopoverContext();
     const handleClick = (e) => {
       setOpen(true);
       props.onClick?.(e);
     };
-    if (asChild && React12__namespace.isValidElement(children)) {
-      return React12__namespace.cloneElement(children, {
+    if (asChild && React11__namespace.isValidElement(children)) {
+      return React11__namespace.cloneElement(children, {
         ref: (node) => {
           triggerRef.current = node;
           if (typeof children.ref === "function") {
@@ -3326,7 +3229,7 @@ var PopoverTrigger = React12__namespace.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React12__namespace.forwardRef(
+var PopoverContent = React11__namespace.forwardRef(
   ({
     className,
     side = "bottom",
@@ -3337,9 +3240,9 @@ var PopoverContent = React12__namespace.forwardRef(
     ...props
   }, ref) => {
     const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React12__namespace.useState({ top: 0, left: 0 });
-    const contentRef = React12__namespace.useRef(null);
-    React12__namespace.useEffect(() => {
+    const [position, setPosition] = React11__namespace.useState({ top: 0, left: 0 });
+    const contentRef = React11__namespace.useRef(null);
+    React11__namespace.useEffect(() => {
       if (!open || !triggerRef.current) return;
       const updatePosition = () => {
         if (!triggerRef.current || !contentRef.current) return;
@@ -3400,7 +3303,7 @@ var PopoverContent = React12__namespace.forwardRef(
         window.removeEventListener("scroll", updatePosition, true);
       };
     }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React12__namespace.useEffect(() => {
+    React11__namespace.useEffect(() => {
       if (!open) return;
       const handleClickOutside = (event) => {
         if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -3456,7 +3359,7 @@ var ThreadPopover = ({
   emptyState,
   onThreadSelect
 }) => {
-  const [isOpen, setIsOpen] = React12__namespace.useState(false);
+  const [isOpen, setIsOpen] = React11__namespace.useState(false);
   reactHotkeysHook.useHotkeys(
     "h",
     (e) => {
@@ -3506,12 +3409,12 @@ var ThreadPopover = ({
 var CreateThreadButton = ({
   className,
   variant = "ghost",
-  size = "icon",
+  size = "default",
   children,
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React12__namespace.useState(false);
+  const [isCreating, setIsCreating] = React11__namespace.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3537,7 +3440,7 @@ var CreateThreadButton = ({
       // Don't trigger in contenteditable elements
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Button,
     {
       variant,
@@ -3545,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"
+      ]
     }
   );
 };
@@ -3637,10 +3543,10 @@ var AccountDialog = ({
   size
 }) => {
   const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React12__namespace.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React12__namespace.useState(false);
-  const [error, setError] = React12__namespace.useState(null);
-  const initials = React12__namespace.useMemo(() => {
+  const [open, setOpen] = React11__namespace.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React11__namespace.useState(false);
+  const [error, setError] = React11__namespace.useState(null);
+  const initials = React11__namespace.useMemo(() => {
     const name = user?.displayName || user?.name;
     if (!name) return "";
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
@@ -3739,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: [
@@ -3821,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;
@@ -3840,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;
@@ -3858,9 +3762,9 @@ 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