@melony/react 0.1.12 → 0.1.15

package/dist/index.d.cts

@@ -1,14 +1,19 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
-import { ClientState, MelonyClient } from '@melony/core/client';
-import { Role, Event, UINode } from '@melony/core';
+import { ClientState, MelonyClient } from 'melony/client';
+import { Role, Event, UINode } from 'melony';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface User {
-    id: string;
+    id?: string;
+    uid: string;
     email: string;
-    name: string;
+    name?: string;
+    displayName?: string;
     picture?: string;
+    createdAt?: string;
+    lastSignIn?: string | null;
+    emailVerified?: boolean;
 }
 interface Message {
     role: Role;
@@ -26,6 +31,17 @@ interface StarterPrompt {
     prompt: string;
     icon?: React.ReactNode;
 }
+interface ComposerOption {
+    id: string;
+    label: string;
+    value: any;
+}
+interface ComposerOptionGroup {
+    id: string;
+    label: string;
+    options: ComposerOption[];
+    type?: "single" | "multiple";
+}
 interface AuthService {
     getMe: () => Promise<User | null>;
     login: () => void;
@@ -91,6 +107,17 @@ interface ThreadProviderProps {
 }
 declare const ThreadProvider: React__default.FC<ThreadProviderProps>;
 
+type Theme = "light" | "dark" | "system";
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    resolvedTheme: "light" | "dark";
+}
+declare function ThemeProvider({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextType;
+
 interface UseMelonyOptions {
     initialEvents?: Event[];
 }
@@ -100,46 +127,165 @@ declare const useAuth: () => AuthContextValue;
 
 declare const useThreads: () => ThreadContextValue;
 
-declare function Thread({ className, placeholder, starterPrompts, onStarterPromptClick, }: {
+interface ThreadProps {
     className?: string;
     placeholder?: string;
     starterPrompts?: StarterPrompt[];
     onStarterPromptClick?: (prompt: string) => void;
-}): react_jsx_runtime.JSX.Element;
+    options?: ComposerOptionGroup[];
+    autoFocus?: boolean;
+    defaultSelectedIds?: string[];
+}
+declare function Thread({ className, placeholder, starterPrompts, onStarterPromptClick, options, autoFocus, defaultSelectedIds, }: ThreadProps): react_jsx_runtime.JSX.Element;
 
 interface ComposerProps {
     value: string;
     onChange: (value: string) => void;
-    onSubmit: (e?: React__default.FormEvent) => void;
+    onSubmit: (state?: Record<string, any>) => void;
     placeholder?: string;
     isLoading?: boolean;
     className?: string;
+    options?: ComposerOptionGroup[];
+    autoFocus?: boolean;
+    defaultSelectedIds?: string[];
 }
-declare function Composer({ value, onChange, onSubmit, placeholder, isLoading, className, }: ComposerProps): react_jsx_runtime.JSX.Element;
+declare function Composer({ value, onChange, onSubmit, placeholder, isLoading, className, options, autoFocus, defaultSelectedIds, }: ComposerProps): react_jsx_runtime.JSX.Element;
+
+interface ChatHeaderProps {
+    /**
+     * The title to display in the header. Can be a string or a React node for custom content.
+     */
+    title?: string | React__default.ReactNode;
+    /**
+     * Content to render on the left side of the header (e.g., back button).
+     */
+    leftContent?: React__default.ReactNode;
+    /**
+     * Content to render on the right side of the header (e.g., action buttons).
+     */
+    rightContent?: React__default.ReactNode;
+    /**
+     * Custom className for the header container.
+     */
+    className?: string;
+    /**
+     * Custom className for the title element (only applies when title is a string).
+     */
+    titleClassName?: string;
+    /**
+     * Custom children to render inside the header. If provided, this takes precedence over title/leftContent/rightContent.
+     */
+    children?: React__default.ReactNode;
+}
+/**
+ * A shared, customizable header component for chat interfaces.
+ * Used consistently across ChatFull, ChatSidebar, and ChatPopup components.
+ */
+declare function ChatHeader({ title, leftContent, rightContent, className, titleClassName, children, }: ChatHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface ChatPopupProps {
     title?: string;
     placeholder?: string;
     starterPrompts?: StarterPrompt[];
+    options?: ComposerOptionGroup[];
     defaultOpen?: boolean;
+    /**
+     * Props for customizing the header. Note: leftContent and rightContent in headerProps
+     * will be merged with the default popup header actions (back, history, new chat, close).
+     */
+    headerProps?: Omit<ChatHeaderProps, "title" | "leftContent" | "rightContent">;
+    /**
+     * IDs of options to be selected by default
+     */
+    defaultSelectedIds?: string[];
 }
-declare function ChatPopup({ title, placeholder, starterPrompts, defaultOpen, }: ChatPopupProps): react_jsx_runtime.JSX.Element;
+declare function ChatPopup({ title, placeholder, starterPrompts, options, defaultOpen, headerProps, defaultSelectedIds, }: ChatPopupProps): react_jsx_runtime.JSX.Element;
 
 interface ChatSidebarProps {
     title?: string;
     placeholder?: string;
     starterPrompts?: StarterPrompt[];
+    options?: ComposerOptionGroup[];
     className?: string;
+    /**
+     * Props for customizing the header. If provided, title prop will be passed to header.
+     */
+    headerProps?: Omit<ChatHeaderProps, "title">;
+    /**
+     * IDs of options to be selected by default
+     */
+    defaultSelectedIds?: string[];
 }
-declare function ChatSidebar({ title, placeholder, starterPrompts, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
+declare function ChatSidebar({ title, placeholder, starterPrompts, options, className, headerProps, defaultSelectedIds, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface ChatFullProps {
     title?: string;
     placeholder?: string;
     starterPrompts?: StarterPrompt[];
+    options?: ComposerOptionGroup[];
     className?: string;
+    /**
+     * Props for customizing the header. If provided, title prop will be passed to header.
+     */
+    headerProps?: Omit<ChatHeaderProps, "title">;
+    /**
+     * Customizable left sidebar content. Typically used for navigation, thread list, etc.
+     */
+    leftSidebar?: React__default.ReactNode;
+    /**
+     * Customizable right sidebar content. Typically used as a canvas, additional info, etc.
+     */
+    rightSidebar?: React__default.ReactNode;
+    /**
+     * Custom className for the left sidebar container
+     */
+    leftSidebarClassName?: string;
+    /**
+     * Custom className for the right sidebar container
+     */
+    rightSidebarClassName?: string;
+    /**
+     * Whether the left sidebar is collapsible
+     */
+    leftSidebarCollapsible?: boolean;
+    /**
+     * Whether the right sidebar is collapsible
+     */
+    rightSidebarCollapsible?: boolean;
+    /**
+     * Default collapsed state for the left sidebar
+     */
+    defaultLeftSidebarCollapsed?: boolean;
+    /**
+     * Default collapsed state for the right sidebar
+     */
+    defaultRightSidebarCollapsed?: boolean;
+    /**
+     * Controlled collapsed state for the left sidebar. If provided, component becomes controlled.
+     */
+    leftSidebarCollapsed?: boolean;
+    /**
+     * Controlled collapsed state for the right sidebar. If provided, component becomes controlled.
+     */
+    rightSidebarCollapsed?: boolean;
+    /**
+     * Callback when left sidebar collapse state changes
+     */
+    onLeftSidebarCollapseChange?: (collapsed: boolean) => void;
+    /**
+     * Callback when right sidebar collapse state changes
+     */
+    onRightSidebarCollapseChange?: (collapsed: boolean) => void;
+    /**
+     * Whether the composer should be auto focused
+     */
+    autoFocus?: boolean;
+    /**
+     * IDs of options to be selected by default
+     */
+    defaultSelectedIds?: string[];
 }
-declare function ChatFull({ title, placeholder, starterPrompts, className, }: ChatFullProps): react_jsx_runtime.JSX.Element;
+declare function ChatFull({ title, placeholder, starterPrompts, options, className, headerProps, leftSidebar, rightSidebar, leftSidebarClassName, rightSidebarClassName, leftSidebarCollapsible, rightSidebarCollapsible, defaultLeftSidebarCollapsed, defaultRightSidebarCollapsed, leftSidebarCollapsed: controlledLeftCollapsed, rightSidebarCollapsed: controlledRightCollapsed, onLeftSidebarCollapseChange, onRightSidebarCollapseChange, autoFocus, defaultSelectedIds, }: ChatFullProps): react_jsx_runtime.JSX.Element;
 
 interface ThreadListProps {
     className?: string;
@@ -148,6 +294,25 @@ interface ThreadListProps {
 }
 declare const ThreadList: React$1.FC<ThreadListProps>;
 
+interface ThreadPopoverProps {
+    className?: string;
+    buttonClassName?: string;
+    buttonVariant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
+    buttonSize?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+    emptyState?: React$1.ReactNode;
+    onThreadSelect?: (threadId: string) => void;
+}
+declare const ThreadPopover: React$1.FC<ThreadPopoverProps>;
+
+interface CreateThreadButtonProps {
+    className?: string;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+    children?: React$1.ReactNode;
+    onThreadCreated?: (threadId: string) => void;
+}
+declare const CreateThreadButton: React$1.FC<CreateThreadButtonProps>;
+
 interface AccountDialogProps {
     className?: string;
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
@@ -155,6 +320,8 @@ interface AccountDialogProps {
 }
 declare const AccountDialog: React$1.FC<AccountDialogProps>;
 
+declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
+
 interface UIRendererProps {
     node: UINode;
 }
@@ -165,4 +332,6 @@ interface UIRendererProps {
  */
 declare function UIRenderer({ node }: UIRendererProps): react_jsx_runtime.JSX.Element;
 
-export { AccountDialog, type AccountDialogProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, ChatFull, type ChatFullProps, ChatPopup, type ChatPopupProps, ChatSidebar, type ChatSidebarProps, Composer, MelonyClientProvider, type MelonyClientProviderProps, MelonyContext, type MelonyContextValue, type Message, type StarterPrompt, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, useAuth, useMelony, useThreads };
+declare function groupEventsToMessages(events: Event[]): Message[];
+
+export { AccountDialog, type AccountDialogProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, ChatFull, type ChatFullProps, ChatHeader, type ChatHeaderProps, ChatPopup, type ChatPopupProps, ChatSidebar, type ChatSidebarProps, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, MelonyClientProvider, type MelonyClientProviderProps, MelonyContext, type MelonyContextValue, type Message, type StarterPrompt, 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, useMelony, useTheme, useThreads };

package/dist/index.d.ts

@@ -1,14 +1,19 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
-import { ClientState, MelonyClient } from '@melony/core/client';
-import { Role, Event, UINode } from '@melony/core';
+import { ClientState, MelonyClient } from 'melony/client';
+import { Role, Event, UINode } from 'melony';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface User {
-    id: string;
+    id?: string;
+    uid: string;
     email: string;
-    name: string;
+    name?: string;
+    displayName?: string;
     picture?: string;
+    createdAt?: string;
+    lastSignIn?: string | null;
+    emailVerified?: boolean;
 }
 interface Message {
     role: Role;
@@ -26,6 +31,17 @@ interface StarterPrompt {
     prompt: string;
     icon?: React.ReactNode;
 }
+interface ComposerOption {
+    id: string;
+    label: string;
+    value: any;
+}
+interface ComposerOptionGroup {
+    id: string;
+    label: string;
+    options: ComposerOption[];
+    type?: "single" | "multiple";
+}
 interface AuthService {
     getMe: () => Promise<User | null>;
     login: () => void;
@@ -91,6 +107,17 @@ interface ThreadProviderProps {
 }
 declare const ThreadProvider: React__default.FC<ThreadProviderProps>;
 
+type Theme = "light" | "dark" | "system";
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    resolvedTheme: "light" | "dark";
+}
+declare function ThemeProvider({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextType;
+
 interface UseMelonyOptions {
     initialEvents?: Event[];
 }
@@ -100,46 +127,165 @@ declare const useAuth: () => AuthContextValue;
 
 declare const useThreads: () => ThreadContextValue;
 
-declare function Thread({ className, placeholder, starterPrompts, onStarterPromptClick, }: {
+interface ThreadProps {
     className?: string;
     placeholder?: string;
     starterPrompts?: StarterPrompt[];
     onStarterPromptClick?: (prompt: string) => void;
-}): react_jsx_runtime.JSX.Element;
+    options?: ComposerOptionGroup[];
+    autoFocus?: boolean;
+    defaultSelectedIds?: string[];
+}
+declare function Thread({ className, placeholder, starterPrompts, onStarterPromptClick, options, autoFocus, defaultSelectedIds, }: ThreadProps): react_jsx_runtime.JSX.Element;
 
 interface ComposerProps {
     value: string;
     onChange: (value: string) => void;
-    onSubmit: (e?: React__default.FormEvent) => void;
+    onSubmit: (state?: Record<string, any>) => void;
     placeholder?: string;
     isLoading?: boolean;
     className?: string;
+    options?: ComposerOptionGroup[];
+    autoFocus?: boolean;
+    defaultSelectedIds?: string[];
 }
-declare function Composer({ value, onChange, onSubmit, placeholder, isLoading, className, }: ComposerProps): react_jsx_runtime.JSX.Element;
+declare function Composer({ value, onChange, onSubmit, placeholder, isLoading, className, options, autoFocus, defaultSelectedIds, }: ComposerProps): react_jsx_runtime.JSX.Element;
+
+interface ChatHeaderProps {
+    /**
+     * The title to display in the header. Can be a string or a React node for custom content.
+     */
+    title?: string | React__default.ReactNode;
+    /**
+     * Content to render on the left side of the header (e.g., back button).
+     */
+    leftContent?: React__default.ReactNode;
+    /**
+     * Content to render on the right side of the header (e.g., action buttons).
+     */
+    rightContent?: React__default.ReactNode;
+    /**
+     * Custom className for the header container.
+     */
+    className?: string;
+    /**
+     * Custom className for the title element (only applies when title is a string).
+     */
+    titleClassName?: string;
+    /**
+     * Custom children to render inside the header. If provided, this takes precedence over title/leftContent/rightContent.
+     */
+    children?: React__default.ReactNode;
+}
+/**
+ * A shared, customizable header component for chat interfaces.
+ * Used consistently across ChatFull, ChatSidebar, and ChatPopup components.
+ */
+declare function ChatHeader({ title, leftContent, rightContent, className, titleClassName, children, }: ChatHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface ChatPopupProps {
     title?: string;
     placeholder?: string;
     starterPrompts?: StarterPrompt[];
+    options?: ComposerOptionGroup[];
     defaultOpen?: boolean;
+    /**
+     * Props for customizing the header. Note: leftContent and rightContent in headerProps
+     * will be merged with the default popup header actions (back, history, new chat, close).
+     */
+    headerProps?: Omit<ChatHeaderProps, "title" | "leftContent" | "rightContent">;
+    /**
+     * IDs of options to be selected by default
+     */
+    defaultSelectedIds?: string[];
 }
-declare function ChatPopup({ title, placeholder, starterPrompts, defaultOpen, }: ChatPopupProps): react_jsx_runtime.JSX.Element;
+declare function ChatPopup({ title, placeholder, starterPrompts, options, defaultOpen, headerProps, defaultSelectedIds, }: ChatPopupProps): react_jsx_runtime.JSX.Element;
 
 interface ChatSidebarProps {
     title?: string;
     placeholder?: string;
     starterPrompts?: StarterPrompt[];
+    options?: ComposerOptionGroup[];
     className?: string;
+    /**
+     * Props for customizing the header. If provided, title prop will be passed to header.
+     */
+    headerProps?: Omit<ChatHeaderProps, "title">;
+    /**
+     * IDs of options to be selected by default
+     */
+    defaultSelectedIds?: string[];
 }
-declare function ChatSidebar({ title, placeholder, starterPrompts, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
+declare function ChatSidebar({ title, placeholder, starterPrompts, options, className, headerProps, defaultSelectedIds, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface ChatFullProps {
     title?: string;
     placeholder?: string;
     starterPrompts?: StarterPrompt[];
+    options?: ComposerOptionGroup[];
     className?: string;
+    /**
+     * Props for customizing the header. If provided, title prop will be passed to header.
+     */
+    headerProps?: Omit<ChatHeaderProps, "title">;
+    /**
+     * Customizable left sidebar content. Typically used for navigation, thread list, etc.
+     */
+    leftSidebar?: React__default.ReactNode;
+    /**
+     * Customizable right sidebar content. Typically used as a canvas, additional info, etc.
+     */
+    rightSidebar?: React__default.ReactNode;
+    /**
+     * Custom className for the left sidebar container
+     */
+    leftSidebarClassName?: string;
+    /**
+     * Custom className for the right sidebar container
+     */
+    rightSidebarClassName?: string;
+    /**
+     * Whether the left sidebar is collapsible
+     */
+    leftSidebarCollapsible?: boolean;
+    /**
+     * Whether the right sidebar is collapsible
+     */
+    rightSidebarCollapsible?: boolean;
+    /**
+     * Default collapsed state for the left sidebar
+     */
+    defaultLeftSidebarCollapsed?: boolean;
+    /**
+     * Default collapsed state for the right sidebar
+     */
+    defaultRightSidebarCollapsed?: boolean;
+    /**
+     * Controlled collapsed state for the left sidebar. If provided, component becomes controlled.
+     */
+    leftSidebarCollapsed?: boolean;
+    /**
+     * Controlled collapsed state for the right sidebar. If provided, component becomes controlled.
+     */
+    rightSidebarCollapsed?: boolean;
+    /**
+     * Callback when left sidebar collapse state changes
+     */
+    onLeftSidebarCollapseChange?: (collapsed: boolean) => void;
+    /**
+     * Callback when right sidebar collapse state changes
+     */
+    onRightSidebarCollapseChange?: (collapsed: boolean) => void;
+    /**
+     * Whether the composer should be auto focused
+     */
+    autoFocus?: boolean;
+    /**
+     * IDs of options to be selected by default
+     */
+    defaultSelectedIds?: string[];
 }
-declare function ChatFull({ title, placeholder, starterPrompts, className, }: ChatFullProps): react_jsx_runtime.JSX.Element;
+declare function ChatFull({ title, placeholder, starterPrompts, options, className, headerProps, leftSidebar, rightSidebar, leftSidebarClassName, rightSidebarClassName, leftSidebarCollapsible, rightSidebarCollapsible, defaultLeftSidebarCollapsed, defaultRightSidebarCollapsed, leftSidebarCollapsed: controlledLeftCollapsed, rightSidebarCollapsed: controlledRightCollapsed, onLeftSidebarCollapseChange, onRightSidebarCollapseChange, autoFocus, defaultSelectedIds, }: ChatFullProps): react_jsx_runtime.JSX.Element;
 
 interface ThreadListProps {
     className?: string;
@@ -148,6 +294,25 @@ interface ThreadListProps {
 }
 declare const ThreadList: React$1.FC<ThreadListProps>;
 
+interface ThreadPopoverProps {
+    className?: string;
+    buttonClassName?: string;
+    buttonVariant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
+    buttonSize?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+    emptyState?: React$1.ReactNode;
+    onThreadSelect?: (threadId: string) => void;
+}
+declare const ThreadPopover: React$1.FC<ThreadPopoverProps>;
+
+interface CreateThreadButtonProps {
+    className?: string;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+    children?: React$1.ReactNode;
+    onThreadCreated?: (threadId: string) => void;
+}
+declare const CreateThreadButton: React$1.FC<CreateThreadButtonProps>;
+
 interface AccountDialogProps {
     className?: string;
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
@@ -155,6 +320,8 @@ interface AccountDialogProps {
 }
 declare const AccountDialog: React$1.FC<AccountDialogProps>;
 
+declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
+
 interface UIRendererProps {
     node: UINode;
 }
@@ -165,4 +332,6 @@ interface UIRendererProps {
  */
 declare function UIRenderer({ node }: UIRendererProps): react_jsx_runtime.JSX.Element;
 
-export { AccountDialog, type AccountDialogProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, ChatFull, type ChatFullProps, ChatPopup, type ChatPopupProps, ChatSidebar, type ChatSidebarProps, Composer, MelonyClientProvider, type MelonyClientProviderProps, MelonyContext, type MelonyContextValue, type Message, type StarterPrompt, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, useAuth, useMelony, useThreads };
+declare function groupEventsToMessages(events: Event[]): Message[];
+
+export { AccountDialog, type AccountDialogProps, AuthContext, type AuthContextValue, AuthProvider, type AuthProviderProps, type AuthService, ChatFull, type ChatFullProps, ChatHeader, type ChatHeaderProps, ChatPopup, type ChatPopupProps, ChatSidebar, type ChatSidebarProps, Composer, type ComposerOption, type ComposerOptionGroup, CreateThreadButton, type CreateThreadButtonProps, MelonyClientProvider, type MelonyClientProviderProps, MelonyContext, type MelonyContextValue, type Message, type StarterPrompt, 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, useMelony, useTheme, useThreads };