@melony/react 0.1.25 → 0.1.26

package/dist/index.d.cts

@@ -242,6 +242,22 @@ interface ChatSidebarProps {
 }
 declare function ChatSidebar({ title, placeholder, starterPrompts, options, className, headerProps, defaultSelectedIds, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
 
+interface WelcomeScreenProps {
+    title?: string;
+    description?: string;
+    features?: {
+        title: string;
+        description: string;
+    }[];
+    className?: string;
+    onLoginClick?: () => void;
+    termsUrl?: string;
+    privacyUrl?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+}
+declare function WelcomeScreen({ title, description, features, className, onLoginClick, termsUrl, privacyUrl, imageUrl, imageAlt, }: WelcomeScreenProps): react_jsx_runtime.JSX.Element;
+
 interface ChatFullProps {
     title?: string;
     placeholder?: string;
@@ -276,8 +292,17 @@ interface ChatFullProps {
      * IDs of options to be selected by default
      */
     defaultSelectedIds?: string[];
+    /**
+     * Whether to show a welcome screen when the user is not authenticated.
+     * Defaults to false.
+     */
+    showWelcomeScreen?: boolean;
+    /**
+     * Props to customize the welcome screen
+     */
+    welcomeScreenProps?: WelcomeScreenProps;
 }
-declare function ChatFull({ title, placeholder, starterPrompts, options, className, headerProps, leftSidebar, rightSidebar, leftSidebarClassName, rightSidebarClassName, autoFocus, defaultSelectedIds, }: ChatFullProps): react_jsx_runtime.JSX.Element;
+declare function ChatFull({ title, placeholder, starterPrompts, options, className, headerProps, leftSidebar, rightSidebar, leftSidebarClassName, rightSidebarClassName, autoFocus, defaultSelectedIds, showWelcomeScreen, welcomeScreenProps, }: ChatFullProps): react_jsx_runtime.JSX.Element;
 
 interface SidebarToggleProps {
     side: "left" | "right";
@@ -473,4 +498,4 @@ declare const Badge: React__default.FC<BadgeProps>;
 
 declare function groupEventsToMessages(events: Event[]): Message[];
 
-export { AccountDialog, type AccountDialogProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatFull, type ChatFullProps, ChatHeader, type ChatHeaderProps, ChatPopup, type ChatPopupProps, ChatSidebar, ChatSidebarContext, type ChatSidebarContextValue, type ChatSidebarProps, Checkbox, Col, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, Divider, Form, Heading, Image, Input, Label, List, ListItem, MelonyClientProvider, type MelonyClientProviderProps, MelonyContext, type MelonyContextValue, type Message, RadioGroup, Row, type ScreenSize, Select, SidebarToggle, type SidebarToggleProps, Spacer, type StarterPrompt, Text, Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadPopover, type ThreadPopoverProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, groupEventsToMessages, useAuth, useChatSidebar, useMelony, useScreenSize, useTheme, useThreads };
+export { AccountDialog, type AccountDialogProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatFull, type ChatFullProps, ChatHeader, type ChatHeaderProps, ChatPopup, type ChatPopupProps, ChatSidebar, ChatSidebarContext, type ChatSidebarContextValue, type ChatSidebarProps, Checkbox, Col, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, Divider, Form, Heading, Image, Input, Label, List, ListItem, MelonyClientProvider, type MelonyClientProviderProps, MelonyContext, type MelonyContextValue, type Message, RadioGroup, Row, type ScreenSize, Select, SidebarToggle, type SidebarToggleProps, Spacer, type StarterPrompt, Text, Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadPopover, type ThreadPopoverProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, WelcomeScreen, type WelcomeScreenProps, groupEventsToMessages, useAuth, useChatSidebar, useMelony, useScreenSize, useTheme, useThreads };

package/dist/index.d.ts

@@ -242,6 +242,22 @@ interface ChatSidebarProps {
 }
 declare function ChatSidebar({ title, placeholder, starterPrompts, options, className, headerProps, defaultSelectedIds, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
 
+interface WelcomeScreenProps {
+    title?: string;
+    description?: string;
+    features?: {
+        title: string;
+        description: string;
+    }[];
+    className?: string;
+    onLoginClick?: () => void;
+    termsUrl?: string;
+    privacyUrl?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+}
+declare function WelcomeScreen({ title, description, features, className, onLoginClick, termsUrl, privacyUrl, imageUrl, imageAlt, }: WelcomeScreenProps): react_jsx_runtime.JSX.Element;
+
 interface ChatFullProps {
     title?: string;
     placeholder?: string;
@@ -276,8 +292,17 @@ interface ChatFullProps {
      * IDs of options to be selected by default
      */
     defaultSelectedIds?: string[];
+    /**
+     * Whether to show a welcome screen when the user is not authenticated.
+     * Defaults to false.
+     */
+    showWelcomeScreen?: boolean;
+    /**
+     * Props to customize the welcome screen
+     */
+    welcomeScreenProps?: WelcomeScreenProps;
 }
-declare function ChatFull({ title, placeholder, starterPrompts, options, className, headerProps, leftSidebar, rightSidebar, leftSidebarClassName, rightSidebarClassName, autoFocus, defaultSelectedIds, }: ChatFullProps): react_jsx_runtime.JSX.Element;
+declare function ChatFull({ title, placeholder, starterPrompts, options, className, headerProps, leftSidebar, rightSidebar, leftSidebarClassName, rightSidebarClassName, autoFocus, defaultSelectedIds, showWelcomeScreen, welcomeScreenProps, }: ChatFullProps): react_jsx_runtime.JSX.Element;
 
 interface SidebarToggleProps {
     side: "left" | "right";
@@ -473,4 +498,4 @@ declare const Badge: React__default.FC<BadgeProps>;
 
 declare function groupEventsToMessages(events: Event[]): Message[];
 
-export { AccountDialog, type AccountDialogProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatFull, type ChatFullProps, ChatHeader, type ChatHeaderProps, ChatPopup, type ChatPopupProps, ChatSidebar, ChatSidebarContext, type ChatSidebarContextValue, type ChatSidebarProps, Checkbox, Col, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, Divider, Form, Heading, Image, Input, Label, List, ListItem, MelonyClientProvider, type MelonyClientProviderProps, MelonyContext, type MelonyContextValue, type Message, RadioGroup, Row, type ScreenSize, Select, SidebarToggle, type SidebarToggleProps, Spacer, type StarterPrompt, Text, Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadPopover, type ThreadPopoverProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, groupEventsToMessages, useAuth, useChatSidebar, useMelony, useScreenSize, useTheme, useThreads };
+export { AccountDialog, type AccountDialogProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, Badge, Box, Button, Card, Chart, ChatFull, type ChatFullProps, ChatHeader, type ChatHeaderProps, ChatPopup, type ChatPopupProps, ChatSidebar, ChatSidebarContext, type ChatSidebarContextValue, type ChatSidebarProps, Checkbox, Col, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, Divider, Form, Heading, Image, Input, Label, List, ListItem, MelonyClientProvider, type MelonyClientProviderProps, MelonyContext, type MelonyContextValue, type Message, RadioGroup, Row, type ScreenSize, Select, SidebarToggle, type SidebarToggleProps, Spacer, type StarterPrompt, Text, Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadPopover, type ThreadPopoverProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, WelcomeScreen, type WelcomeScreenProps, groupEventsToMessages, useAuth, useChatSidebar, useMelony, useScreenSize, useTheme, useThreads };

package/dist/index.js

@@ -1,5 +1,5 @@
-import * as React11 from 'react';
-import React11__default, { createContext, useState, useCallback, useEffect, useMemo, useContext, useRef } from 'react';
+import * as React12 from 'react';
+import React12__default, { createContext, useState, useCallback, useEffect, useMemo, useContext, useRef } from 'react';
 import { NuqsAdapter } from 'nuqs/adapters/react';
 import { QueryClient, QueryClientProvider, useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -12,7 +12,7 @@ import { cva } from 'class-variance-authority';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
 import * as ICONS from '@tabler/icons-react';
-import { IconPaperclip, IconX, IconPlus, IconChevronDown, IconLoader2, IconArrowUp, IconMessage, IconTrash, IconHistory, IconArrowLeft, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconUser, IconLogout, IconBrandGoogle, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconSelector, IconChevronUp } from '@tabler/icons-react';
+import { IconPaperclip, IconX, IconPlus, IconChevronDown, IconLoader2, IconArrowUp, IconMessage, IconDotsVertical, IconTrash, IconHistory, IconArrowLeft, IconBrandGoogle, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconUser, IconLogout, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconSelector, IconChevronUp } from '@tabler/icons-react';
 import { Menu } from '@base-ui/react/menu';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
@@ -685,11 +685,11 @@ function Composer({
   const accept = fileAttachments?.accept;
   const maxFiles = fileAttachments?.maxFiles ?? 10;
   const maxFileSize = fileAttachments?.maxFileSize ?? 10 * 1024 * 1024;
-  const [selectedOptions, setSelectedOptions] = React11__default.useState(
+  const [selectedOptions, setSelectedOptions] = React12__default.useState(
     () => new Set(defaultSelectedIds)
   );
-  const [attachedFiles, setAttachedFiles] = React11__default.useState([]);
-  const fileInputRef = React11__default.useRef(null);
+  const [attachedFiles, setAttachedFiles] = React12__default.useState([]);
+  const fileInputRef = React12__default.useRef(null);
   const toggleOption = (id, groupOptions, type = "multiple") => {
     const next = new Set(selectedOptions);
     if (type === "single") {
@@ -2728,14 +2728,20 @@ var ThreadList = ({
     deleteThread,
     isLoading
   } = useThreads();
+  const sortedThreads = React12.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) {
@@ -2749,58 +2755,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__ */ jsx("div", { className: cn("flex flex-col h-full", className), children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading && threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(IconLoader2, { className: "size-5 animate-spin text-muted-foreground" }) }) : threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx(IconMessage, { className: "size-8 mx-auto opacity-50" }),
-    /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No threads yet" }),
-    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleNewThread, children: "Start a conversation" })
-  ] }) }) : /* @__PURE__ */ jsx("div", { className: "p-2 space-y-1", children: threads.map((thread) => {
-    const isActive = thread.id === activeThreadId;
-    return /* @__PURE__ */ jsxs(
-      "div",
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium truncate"), children: thread.title || `Thread ${thread.id.slice(0, 8)}` }),
-            thread.updatedAt && /* @__PURE__ */ jsx("span", { className: cn("text-xs shrink-0"), children: formatDate(thread.updatedAt) })
-          ] }) }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon-xs",
-              onClick: (e) => handleDelete(e, thread.id),
-              className: cn(
-                "opacity-0 group-hover:opacity-100 transition-opacity shrink-0",
-                isActive && "hover:bg-primary-foreground/20"
-              ),
-              children: /* @__PURE__ */ jsx(IconTrash, { className: "size-3" })
-            }
-          )
+          /* @__PURE__ */ jsx(IconPlus, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "New chat" })
         ]
-      },
-      thread.id
-    );
-  }) }) }) });
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading && threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(IconLoader2, { className: "size-5 animate-spin text-muted-foreground" }) }) : threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(IconMessage, { className: "size-8 mx-auto opacity-50" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No threads yet" }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleNewThread, children: "Start a conversation" })
+    ] }) }) : /* @__PURE__ */ jsx("div", { className: "p-2 space-y-1", children: sortedThreads.map((thread) => {
+      const isActive = thread.id === activeThreadId;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: () => handleThreadClick(thread.id),
+          className: cn(
+            "group relative flex items-center gap-3 px-3 py-1.5 rounded-lg cursor-pointer transition-colors",
+            isActive ? "bg-muted text-foreground" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: thread.title || `Thread ${thread.id.slice(0, 8)}` }) }),
+            /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(
+                DropdownMenuTrigger,
+                {
+                  render: (props) => /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-xs",
+                      ...props,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        props.onClick?.(e);
+                      },
+                      children: /* @__PURE__ */ jsx(IconDotsVertical, { className: "size-3.5" })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-32", children: /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  variant: "destructive",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleDelete(thread.id);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(IconTrash, { className: "size-4 mr-2" }),
+                    /* @__PURE__ */ jsx("span", { children: "Delete" })
+                  ]
+                }
+              ) })
+            ] }) })
+          ]
+        },
+        thread.id
+      );
+    }) }) })
+  ] });
 };
 function ChatPopup({
   title = "Chat",
@@ -2939,9 +2962,134 @@ function useChatSidebar() {
   }
   return context;
 }
+function WelcomeScreen({
+  title = "Welcome to Melony",
+  description = "The most powerful AI agent framework for building modern applications. Connect your tools, build your brain, and ship faster.",
+  features = [
+    {
+      title: "Context Aware",
+      description: "Built-in state management for complex LLM flows."
+    },
+    {
+      title: "Extensible",
+      description: "Plugin architecture for easy integrations."
+    },
+    {
+      title: "Real-time",
+      description: "Streaming responses and live state updates."
+    },
+    {
+      title: "Tool-ready",
+      description: "Ready-to-use actions for common tasks."
+    }
+  ],
+  className,
+  onLoginClick,
+  termsUrl = "#",
+  privacyUrl = "#",
+  imageUrl,
+  imageAlt = "Product screenshot"
+}) {
+  const { login, isLoading } = useAuth();
+  const handleLogin = () => {
+    if (onLoginClick) {
+      onLoginClick();
+    } else {
+      login();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-h-[600px] h-full w-full flex-col md:flex-row bg-background overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col bg-sidebar text-foreground relative overflow-hidden", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute -top-24 -left-24 size-96 bg-primary/5 rounded-full blur-3xl" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute -bottom-24 -right-24 size-96 bg-primary/5 rounded-full blur-3xl" }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden relative z-10 flex flex-col p-8 md:p-12 lg:p-20", children: /* @__PURE__ */ jsxs("div", { className: "max-w-xl mx-auto w-full", children: [
+            /* @__PURE__ */ jsx("h1", { className: "mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-foreground", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "mb-12 text-lg text-muted-foreground md:text-xl leading-relaxed", children: description }),
+            imageUrl && /* @__PURE__ */ jsxs("div", { className: "mb-12 relative group", children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute -inset-1 bg-gradient-to-r from-primary/20 to-primary/10 rounded-xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200" }),
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: imageUrl,
+                  alt: imageAlt,
+                  className: "relative rounded-xl border border-border/50 shadow-2xl transition-transform duration-500 hover:scale-[1.02] w-full"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2", children: features.map((feature, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("h3", { className: "font-bold text-lg text-foreground", children: feature.title }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-relaxed", children: feature.description })
+            ] }, i)) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center justify-center p-8 md:p-12 lg:p-20 bg-background transition-colors duration-300", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm space-y-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3 text-center md:text-left", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: "Get Started" }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-lg", children: "Sign in to your account to continue" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "lg",
+                variant: "outline",
+                className: "w-full h-16 text-lg shadow-sm hover:shadow-md transition-all flex items-center justify-center gap-3 border-2 font-medium bg-background text-foreground hover:bg-accent",
+                onClick: handleLogin,
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsx(IconBrandGoogle, { className: "size-6" }),
+                  isLoading ? "Signing in..." : "Continue with Google"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative py-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("span", { className: "w-full border-t border-border" }) }),
+              /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx("span", { className: "bg-background px-3 text-muted-foreground tracking-widest font-medium", children: "Secure access" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground leading-relaxed text-center md:text-left", children: [
+            "By continuing, you agree to our ",
+            /* @__PURE__ */ jsx("br", { className: "hidden md:block" }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: termsUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "underline underline-offset-4 hover:text-primary transition-colors font-medium",
+                children: "Terms of Service"
+              }
+            ),
+            " ",
+            "and",
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: privacyUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "underline underline-offset-4 hover:text-primary transition-colors font-medium",
+                children: "Privacy Policy"
+              }
+            ),
+            "."
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
 function ChatFull({
   title = "Chat",
-  placeholder = "Message the AI",
+  placeholder,
   starterPrompts,
   options,
   className,
@@ -2951,9 +3099,12 @@ 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] = useState(() => {
     if (typeof window !== "undefined") {
@@ -2992,6 +3143,9 @@ function ChatFull({
     }),
     [leftCollapsed, rightCollapsed, handleLeftToggle, handleRightToggle]
   );
+  if (showWelcomeScreen && !isAuthenticated && !isLoading) {
+    return /* @__PURE__ */ jsx(WelcomeScreen, { ...welcomeScreenProps });
+  }
   return /* @__PURE__ */ jsx(ChatSidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3073,11 +3227,11 @@ function SidebarToggle({ side, className }) {
   }
   return null;
 }
-var PopoverContext = React11.createContext(
+var PopoverContext = React12.createContext(
   void 0
 );
 function usePopoverContext() {
-  const context = React11.useContext(PopoverContext);
+  const context = React12.useContext(PopoverContext);
   if (!context) {
     throw new Error("Popover components must be used within a Popover");
   }
@@ -3089,10 +3243,10 @@ function Popover({
   open: controlledOpen,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = React11.useState(defaultOpen);
-  const triggerRef = React11.useRef(null);
+  const [internalOpen, setInternalOpen] = React12.useState(defaultOpen);
+  const triggerRef = React12.useRef(null);
   const open = controlledOpen ?? internalOpen;
-  const setOpen = React11.useCallback(
+  const setOpen = React12.useCallback(
     (newOpen) => {
       if (controlledOpen === void 0) {
         setInternalOpen(newOpen);
@@ -3101,7 +3255,7 @@ function Popover({
     },
     [controlledOpen, onOpenChange]
   );
-  const value = React11.useMemo(
+  const value = React12.useMemo(
     () => ({
       open,
       setOpen,
@@ -3111,15 +3265,15 @@ function Popover({
   );
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
 }
-var PopoverTrigger = React11.forwardRef(
+var PopoverTrigger = React12.forwardRef(
   ({ asChild, className, children, ...props }, ref) => {
     const { setOpen, triggerRef } = usePopoverContext();
     const handleClick = (e) => {
       setOpen(true);
       props.onClick?.(e);
     };
-    if (asChild && React11.isValidElement(children)) {
-      return React11.cloneElement(children, {
+    if (asChild && React12.isValidElement(children)) {
+      return React12.cloneElement(children, {
         ref: (node) => {
           triggerRef.current = node;
           if (typeof children.ref === "function") {
@@ -3151,7 +3305,7 @@ var PopoverTrigger = React11.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React11.forwardRef(
+var PopoverContent = React12.forwardRef(
   ({
     className,
     side = "bottom",
@@ -3162,9 +3316,9 @@ var PopoverContent = React11.forwardRef(
     ...props
   }, ref) => {
     const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React11.useState({ top: 0, left: 0 });
-    const contentRef = React11.useRef(null);
-    React11.useEffect(() => {
+    const [position, setPosition] = React12.useState({ top: 0, left: 0 });
+    const contentRef = React12.useRef(null);
+    React12.useEffect(() => {
       if (!open || !triggerRef.current) return;
       const updatePosition = () => {
         if (!triggerRef.current || !contentRef.current) return;
@@ -3225,7 +3379,7 @@ var PopoverContent = React11.forwardRef(
         window.removeEventListener("scroll", updatePosition, true);
       };
     }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       if (!open) return;
       const handleClickOutside = (event) => {
         if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -3281,7 +3435,7 @@ var ThreadPopover = ({
   emptyState,
   onThreadSelect
 }) => {
-  const [isOpen, setIsOpen] = React11.useState(false);
+  const [isOpen, setIsOpen] = React12.useState(false);
   useHotkeys(
     "h",
     (e) => {
@@ -3336,7 +3490,7 @@ var CreateThreadButton = ({
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React11.useState(false);
+  const [isCreating, setIsCreating] = React12.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3462,10 +3616,10 @@ var AccountDialog = ({
   size
 }) => {
   const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React11.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React11.useState(false);
-  const [error, setError] = React11.useState(null);
-  const initials = React11.useMemo(() => {
+  const [open, setOpen] = React12.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React12.useState(false);
+  const [error, setError] = React12.useState(null);
+  const initials = React12.useMemo(() => {
     const name = user?.displayName || user?.name;
     if (!name) return "";
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
@@ -3638,6 +3792,6 @@ function ThemeToggle() {
   );
 }
 
-export { AccountDialog, AuthContext, AuthProvider, Badge2 as Badge, Box, Button2 as Button, Card2 as Card, Chart, ChatFull, ChatHeader, ChatPopup, ChatSidebar, ChatSidebarContext, Checkbox, Col, Composer, CreateThreadButton, Divider, Form, Heading, Image, Input2 as Input, Label2 as Label, List, ListItem, MelonyClientProvider, MelonyContext, RadioGroup, Row, Select2 as Select, SidebarToggle, Spacer, Text, Textarea2 as Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, groupEventsToMessages, useAuth, useChatSidebar, useMelony, useScreenSize, useTheme, useThreads };
+export { AccountDialog, AuthContext, AuthProvider, Badge2 as Badge, Box, Button2 as Button, Card2 as Card, Chart, ChatFull, ChatHeader, ChatPopup, ChatSidebar, ChatSidebarContext, Checkbox, Col, Composer, CreateThreadButton, Divider, Form, Heading, Image, Input2 as Input, Label2 as Label, List, ListItem, MelonyClientProvider, MelonyContext, RadioGroup, Row, Select2 as Select, SidebarToggle, Spacer, Text, Textarea2 as Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, WelcomeScreen, groupEventsToMessages, useAuth, useChatSidebar, useMelony, useScreenSize, useTheme, useThreads };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map