@melony/react 0.1.25 → 0.1.26

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React11 = require('react');
+var React12 = require('react');
 var react = require('nuqs/adapters/react');
 var reactQuery = require('@tanstack/react-query');
 var jsxRuntime = require('react/jsx-runtime');
@@ -40,7 +40,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
+var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
 var ICONS__namespace = /*#__PURE__*/_interopNamespace(ICONS);
 
 // src/providers/melony-provider.tsx
@@ -69,7 +69,7 @@ function groupEventsToMessages(events) {
   }
   return messages;
 }
-var MelonyContext = React11.createContext(
+var MelonyContext = React12.createContext(
   void 0
 );
 var defaultQueryClient = new reactQuery.QueryClient({
@@ -86,29 +86,29 @@ var MelonyContextProviderInner = ({
   initialEvents,
   setContextValue
 }) => {
-  const [state, setState] = React11.useState(client.getState());
+  const [state, setState] = React12.useState(client.getState());
   const { data: config } = reactQuery.useQuery({
     queryKey: ["melony-config", client.url],
     queryFn: () => client.getConfig(),
     staleTime: Infinity
   });
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
       client.reset(initialEvents);
     }
   }, [client, initialEvents]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     setState(client.getState());
     const unsubscribe = client.subscribe(setState);
     return () => {
       unsubscribe();
     };
   }, [client]);
-  const reset = React11.useCallback(
+  const reset = React12.useCallback(
     (events) => client.reset(events),
     [client]
   );
-  const dispatchClientAction = React11.useCallback(
+  const dispatchClientAction = React12.useCallback(
     async (event) => {
       if (!event.type.startsWith("client:")) return false;
       switch (event.type) {
@@ -144,7 +144,7 @@ var MelonyContextProviderInner = ({
     },
     [client, reset]
   );
-  const sendEvent = React11.useCallback(
+  const sendEvent = React12.useCallback(
     async (event, options) => {
       const handled = await dispatchClientAction(event);
       if (handled) return;
@@ -155,7 +155,7 @@ var MelonyContextProviderInner = ({
     },
     [client, dispatchClientAction]
   );
-  const value = React11.useMemo(
+  const value = React12.useMemo(
     () => ({
       ...state,
       messages: groupEventsToMessages(state.events),
@@ -166,7 +166,7 @@ var MelonyContextProviderInner = ({
     }),
     [state, sendEvent, reset, client, config]
   );
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     setContextValue(value);
   }, [value, setContextValue]);
   return /* @__PURE__ */ jsxRuntime.jsx(react.NuqsAdapter, { children });
@@ -177,7 +177,7 @@ var MelonyClientProvider = ({
   initialEvents,
   queryClient = defaultQueryClient
 }) => {
-  const [contextValue, setContextValue] = React11.useState(void 0);
+  const [contextValue, setContextValue] = React12.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,16 +188,16 @@ var MelonyClientProvider = ({
     }
   ) }) });
 };
-var AuthContext = React11.createContext(
+var AuthContext = React12.createContext(
   void 0
 );
 var AuthProvider = ({
   children,
   service
 }) => {
-  const [user, setUser] = React11.useState(null);
-  const [isLoading, setIsLoading] = React11.useState(true);
-  const fetchMe = React11.useCallback(async () => {
+  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();
@@ -209,13 +209,13 @@ var AuthProvider = ({
       setIsLoading(false);
     }
   }, [service]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     fetchMe();
   }, [fetchMe]);
-  const login = React11.useCallback(() => {
+  const login = React12.useCallback(() => {
     service.login();
   }, [service]);
-  const logout = React11.useCallback(async () => {
+  const logout = React12.useCallback(async () => {
     try {
       await service.logout();
       setUser(null);
@@ -251,7 +251,7 @@ var AuthProvider = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children });
 };
-var ThreadContext = React11.createContext(
+var ThreadContext = React12.createContext(
   void 0
 );
 var ThreadProvider = ({
@@ -260,7 +260,7 @@ var ThreadProvider = ({
   initialThreadId: providedInitialThreadId
 }) => {
   const queryClient = reactQuery.useQueryClient();
-  const defaultInitialThreadId = React11.useMemo(() => client.generateId(), []);
+  const defaultInitialThreadId = React12.useMemo(() => client.generateId(), []);
   const initialThreadId = providedInitialThreadId || defaultInitialThreadId;
   const [activeThreadId, setActiveThreadId] = nuqs.useQueryState(
     "threadId",
@@ -301,22 +301,22 @@ var ThreadProvider = ({
       }
     }
   });
-  const selectThread = React11.useCallback(
+  const selectThread = React12.useCallback(
     (threadId) => {
       setActiveThreadId(threadId);
     },
     [setActiveThreadId]
   );
-  const createThread = React11.useCallback(async () => {
+  const createThread = React12.useCallback(async () => {
     return createMutation.mutateAsync();
   }, [createMutation]);
-  const deleteThread = React11.useCallback(
+  const deleteThread = React12.useCallback(
     async (threadId) => {
       return deleteMutation.mutateAsync(threadId);
     },
     [deleteMutation]
   );
-  const value = React11.useMemo(
+  const value = React12.useMemo(
     () => ({
       threads,
       activeThreadId,
@@ -346,11 +346,11 @@ var ThreadProvider = ({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ThreadContext.Provider, { value, children });
 };
-var ThemeContext = React11.createContext(void 0);
+var ThemeContext = React12.createContext(void 0);
 function ThemeProvider({ children }) {
-  const [theme, setThemeState] = React11.useState("system");
-  const [resolvedTheme, setResolvedTheme] = React11.useState("light");
-  React11.useEffect(() => {
+  const [theme, setThemeState] = React12.useState("system");
+  const [resolvedTheme, setResolvedTheme] = React12.useState("light");
+  React12.useEffect(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem("theme");
       if (stored) {
@@ -358,7 +358,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, []);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (typeof window !== "undefined") {
       if (theme === "system") {
         const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -373,7 +373,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, [theme]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (typeof window !== "undefined") {
       const root = document.documentElement;
       if (resolvedTheme === "dark") {
@@ -392,21 +392,21 @@ function ThemeProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, resolvedTheme }, children });
 }
 function useTheme() {
-  const context = React11.useContext(ThemeContext);
+  const context = React12.useContext(ThemeContext);
   if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
   return context;
 }
 var useMelony = (options) => {
-  const context = React11.useContext(MelonyContext);
+  const context = React12.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 = React11.useRef(void 0);
-  React11.useEffect(() => {
+  const prevInitialEventsRef = React12.useRef(void 0);
+  React12.useEffect(() => {
     const currentSerialized = initialEvents ? JSON.stringify(initialEvents) : void 0;
     if (currentSerialized !== prevInitialEventsRef.current) {
       if (initialEvents) {
@@ -420,21 +420,21 @@ var useMelony = (options) => {
   return context;
 };
 var useAuth = () => {
-  const context = React11.useContext(AuthContext);
+  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 = React11.useContext(ThreadContext);
+  const context = React12.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] = React11.useState(() => {
+  const [screenSize, setScreenSize] = React12.useState(() => {
     if (typeof window === "undefined") {
       return {
         width: 1024,
@@ -453,7 +453,7 @@ function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
       isDesktop: width >= tabletBreakpoint
     };
   });
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (typeof window === "undefined") return;
     const updateScreenSize = () => {
       const width = window.innerWidth;
@@ -706,11 +706,11 @@ function Composer({
   const accept = fileAttachments?.accept;
   const maxFiles = fileAttachments?.maxFiles ?? 10;
   const maxFileSize = fileAttachments?.maxFileSize ?? 10 * 1024 * 1024;
-  const [selectedOptions, setSelectedOptions] = React11__namespace.default.useState(
+  const [selectedOptions, setSelectedOptions] = React12__namespace.default.useState(
     () => new Set(defaultSelectedIds)
   );
-  const [attachedFiles, setAttachedFiles] = React11__namespace.default.useState([]);
-  const fileInputRef = React11__namespace.default.useRef(null);
+  const [attachedFiles, setAttachedFiles] = React12__namespace.default.useState([]);
+  const fileInputRef = React12__namespace.default.useRef(null);
   const toggleOption = (id, groupOptions, type = "multiple") => {
     const next = new Set(selectedOptions);
     if (type === "single") {
@@ -1501,9 +1501,9 @@ var Image = ({
   className,
   style
 }) => {
-  const [hasError, setHasError] = React11.useState(false);
-  const [isLoading, setIsLoading] = React11.useState(true);
-  const [open, setOpen] = React11.useState(false);
+  const [hasError, setHasError] = React12.useState(false);
+  const [isLoading, setIsLoading] = React12.useState(true);
+  const [open, setOpen] = React12.useState(false);
   const sizes = {
     sm: "h-11",
     md: "h-22",
@@ -1662,7 +1662,7 @@ var Chart = ({
   className,
   style
 }) => {
-  const [tooltip, setTooltip] = React11.useState(null);
+  const [tooltip, setTooltip] = React12.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 +2408,7 @@ var Button2 = ({
 };
 var Form = ({ children, onSubmitAction, className, style }) => {
   const { sendEvent } = useMelony();
-  const [isSubmitted, setIsSubmitted] = React11.useState(false);
+  const [isSubmitted, setIsSubmitted] = React12.useState(false);
   const handleSubmit = (e) => {
     e.preventDefault();
     if (isSubmitted) return;
@@ -2555,7 +2555,7 @@ function MessageBubble({ message }) {
   );
 }
 function LoadingIndicator({ status }) {
-  const [isExpanded, setIsExpanded] = React11.useState(false);
+  const [isExpanded, setIsExpanded] = React12.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 +2587,7 @@ function MessageList({
   if (messages.length === 0) {
     return null;
   }
-  const isTextStreaming = React11.useMemo(() => {
+  const isTextStreaming = React12.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 +2615,7 @@ function Thread({
   const starterPrompts = localStarterPrompts ?? config?.starterPrompts;
   const options = localOptions ?? config?.options;
   const fileAttachments = config?.fileAttachments;
-  const allDefaultSelectedIds = React11.useMemo(() => {
+  const allDefaultSelectedIds = React12.useMemo(() => {
     const defaultSelectedIdsFromOptions = options?.flatMap((group) => group.defaultSelectedIds ?? []) ?? [];
     return [
       .../* @__PURE__ */ new Set([
@@ -2624,9 +2624,9 @@ function Thread({
       ])
     ];
   }, [options, defaultSelectedIds]);
-  const [input, setInput] = React11.useState("");
-  const messagesEndRef = React11.useRef(null);
-  React11.useEffect(() => {
+  const [input, setInput] = React12.useState("");
+  const messagesEndRef = React12.useRef(null);
+  React12.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const handleSubmit = async (state, overrideInput) => {
@@ -2749,14 +2749,20 @@ var ThreadList = ({
     deleteThread,
     isLoading
   } = useThreads();
+  const sortedThreads = React12__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) {
@@ -2770,58 +2776,75 @@ var ThreadList = ({
       console.error("Failed to create thread:", error);
     }
   };
-  const formatDate = (date) => {
-    if (!date) return "";
-    const d = typeof date === "string" ? new Date(date) : date;
-    if (isNaN(d.getTime())) return "";
-    const now = /* @__PURE__ */ new Date();
-    const diffMs = now.getTime() - d.getTime();
-    const diffMins = Math.floor(diffMs / 6e4);
-    const diffHours = Math.floor(diffMs / 36e5);
-    const diffDays = Math.floor(diffMs / 864e5);
-    if (diffMins < 1) return "Just now";
-    if (diffMins < 60) return `${diffMins}m ago`;
-    if (diffHours < 24) return `${diffHours}h ago`;
-    if (diffDays < 7) return `${diffDays}d ago`;
-    return d.toLocaleDateString();
-  };
-  return /* @__PURE__ */ 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) => {
-    const isActive = thread.id === activeThreadId;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+  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,
       {
-        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"
-        ),
+        variant: "outline",
+        className: "w-full justify-start gap-2 h-9 px-3 border-dashed hover:border-solid transition-all",
+        onClick: handleNewThread,
         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(ICONS.IconPlus, { className: "size-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "New chat" })
         ]
-      },
-      thread.id
-    );
-  }) }) }) });
+      }
+    ) }),
+    /* @__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
+      );
+    }) }) })
+  ] });
 };
 function ChatPopup({
   title = "Chat",
@@ -2832,8 +2855,8 @@ function ChatPopup({
   headerProps,
   defaultSelectedIds
 }) {
-  const [isOpen, setIsOpen] = React11.useState(defaultOpen);
-  const [view, setView] = React11.useState("chat");
+  const [isOpen, setIsOpen] = React12.useState(defaultOpen);
+  const [view, setView] = React12.useState("chat");
   const { createThread } = useThreads();
   const handleNewChat = async () => {
     try {
@@ -2950,19 +2973,144 @@ function ChatSidebar({
     ) })
   ] });
 }
-var ChatSidebarContext = React11.createContext(
+var ChatSidebarContext = React12.createContext(
   void 0
 );
 function useChatSidebar() {
-  const context = React11.useContext(ChatSidebarContext);
+  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(
+    "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 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"
+              }
+            ),
+            "."
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
 function ChatFull({
   title = "Chat",
-  placeholder = "Message the AI",
+  placeholder,
   starterPrompts,
   options,
   className,
@@ -2972,23 +3120,26 @@ function ChatFull({
   leftSidebarClassName,
   rightSidebarClassName,
   autoFocus = false,
-  defaultSelectedIds
+  defaultSelectedIds,
+  showWelcomeScreen = false,
+  welcomeScreenProps
 }) {
   const { isMobile, isTablet } = useScreenSize();
+  const { isAuthenticated, isLoading } = useAuth();
   const isSmallScreen = isMobile || isTablet;
-  const [internalLeftCollapsed, setInternalLeftCollapsed] = React11.useState(() => {
+  const [internalLeftCollapsed, setInternalLeftCollapsed] = React12.useState(() => {
     if (typeof window !== "undefined") {
       return window.innerWidth < 1024;
     }
     return false;
   });
-  const [internalRightCollapsed, setInternalRightCollapsed] = React11.useState(() => {
+  const [internalRightCollapsed, setInternalRightCollapsed] = React12.useState(() => {
     if (typeof window !== "undefined") {
       return window.innerWidth < 1024;
     }
     return false;
   });
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (isSmallScreen) {
       setInternalLeftCollapsed(true);
       setInternalRightCollapsed(true);
@@ -2996,13 +3147,13 @@ function ChatFull({
   }, [isSmallScreen]);
   const leftCollapsed = internalLeftCollapsed;
   const rightCollapsed = internalRightCollapsed;
-  const handleLeftToggle = React11.useCallback((collapsed) => {
+  const handleLeftToggle = React12.useCallback((collapsed) => {
     setInternalLeftCollapsed(collapsed);
   }, []);
-  const handleRightToggle = React11.useCallback((collapsed) => {
+  const handleRightToggle = React12.useCallback((collapsed) => {
     setInternalRightCollapsed(collapsed);
   }, []);
-  const contextValue = React11.useMemo(
+  const contextValue = React12.useMemo(
     () => ({
       leftCollapsed,
       rightCollapsed,
@@ -3013,6 +3164,9 @@ function ChatFull({
     }),
     [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",
     {
@@ -3094,11 +3248,11 @@ function SidebarToggle({ side, className }) {
   }
   return null;
 }
-var PopoverContext = React11__namespace.createContext(
+var PopoverContext = React12__namespace.createContext(
   void 0
 );
 function usePopoverContext() {
-  const context = React11__namespace.useContext(PopoverContext);
+  const context = React12__namespace.useContext(PopoverContext);
   if (!context) {
     throw new Error("Popover components must be used within a Popover");
   }
@@ -3110,10 +3264,10 @@ function Popover({
   open: controlledOpen,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = React11__namespace.useState(defaultOpen);
-  const triggerRef = React11__namespace.useRef(null);
+  const [internalOpen, setInternalOpen] = React12__namespace.useState(defaultOpen);
+  const triggerRef = React12__namespace.useRef(null);
   const open = controlledOpen ?? internalOpen;
-  const setOpen = React11__namespace.useCallback(
+  const setOpen = React12__namespace.useCallback(
     (newOpen) => {
       if (controlledOpen === void 0) {
         setInternalOpen(newOpen);
@@ -3122,7 +3276,7 @@ function Popover({
     },
     [controlledOpen, onOpenChange]
   );
-  const value = React11__namespace.useMemo(
+  const value = React12__namespace.useMemo(
     () => ({
       open,
       setOpen,
@@ -3132,15 +3286,15 @@ function Popover({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value, children });
 }
-var PopoverTrigger = React11__namespace.forwardRef(
+var PopoverTrigger = React12__namespace.forwardRef(
   ({ asChild, className, children, ...props }, ref) => {
     const { setOpen, triggerRef } = usePopoverContext();
     const handleClick = (e) => {
       setOpen(true);
       props.onClick?.(e);
     };
-    if (asChild && React11__namespace.isValidElement(children)) {
-      return React11__namespace.cloneElement(children, {
+    if (asChild && React12__namespace.isValidElement(children)) {
+      return React12__namespace.cloneElement(children, {
         ref: (node) => {
           triggerRef.current = node;
           if (typeof children.ref === "function") {
@@ -3172,7 +3326,7 @@ var PopoverTrigger = React11__namespace.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React11__namespace.forwardRef(
+var PopoverContent = React12__namespace.forwardRef(
   ({
     className,
     side = "bottom",
@@ -3183,9 +3337,9 @@ var PopoverContent = React11__namespace.forwardRef(
     ...props
   }, ref) => {
     const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React11__namespace.useState({ top: 0, left: 0 });
-    const contentRef = React11__namespace.useRef(null);
-    React11__namespace.useEffect(() => {
+    const [position, setPosition] = React12__namespace.useState({ top: 0, left: 0 });
+    const contentRef = React12__namespace.useRef(null);
+    React12__namespace.useEffect(() => {
       if (!open || !triggerRef.current) return;
       const updatePosition = () => {
         if (!triggerRef.current || !contentRef.current) return;
@@ -3246,7 +3400,7 @@ var PopoverContent = React11__namespace.forwardRef(
         window.removeEventListener("scroll", updatePosition, true);
       };
     }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React11__namespace.useEffect(() => {
+    React12__namespace.useEffect(() => {
       if (!open) return;
       const handleClickOutside = (event) => {
         if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -3302,7 +3456,7 @@ var ThreadPopover = ({
   emptyState,
   onThreadSelect
 }) => {
-  const [isOpen, setIsOpen] = React11__namespace.useState(false);
+  const [isOpen, setIsOpen] = React12__namespace.useState(false);
   reactHotkeysHook.useHotkeys(
     "h",
     (e) => {
@@ -3357,7 +3511,7 @@ var CreateThreadButton = ({
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React11__namespace.useState(false);
+  const [isCreating, setIsCreating] = React12__namespace.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3483,10 +3637,10 @@ var AccountDialog = ({
   size
 }) => {
   const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  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 [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 name = user?.displayName || user?.name;
     if (!name) return "";
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
@@ -3701,6 +3855,7 @@ exports.ThreadList = ThreadList;
 exports.ThreadPopover = ThreadPopover;
 exports.ThreadProvider = ThreadProvider;
 exports.UIRenderer = UIRenderer;
+exports.WelcomeScreen = WelcomeScreen;
 exports.groupEventsToMessages = groupEventsToMessages;
 exports.useAuth = useAuth;
 exports.useChatSidebar = useChatSidebar;