@melony/react 0.1.12 → 0.1.14

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 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 {
@@ -91,6 +91,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,12 +111,13 @@ 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;
+}
+declare function Thread({ className, placeholder, starterPrompts, onStarterPromptClick, }: ThreadProps): react_jsx_runtime.JSX.Element;
 
 interface ComposerProps {
     value: string;
@@ -117,29 +129,122 @@ interface ComposerProps {
 }
 declare function Composer({ value, onChange, onSubmit, placeholder, isLoading, className, }: 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[];
     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">;
 }
-declare function ChatPopup({ title, placeholder, starterPrompts, defaultOpen, }: ChatPopupProps): react_jsx_runtime.JSX.Element;
+declare function ChatPopup({ title, placeholder, starterPrompts, defaultOpen, headerProps, }: ChatPopupProps): react_jsx_runtime.JSX.Element;
 
 interface ChatSidebarProps {
     title?: string;
     placeholder?: string;
     starterPrompts?: StarterPrompt[];
     className?: string;
+    /**
+     * Props for customizing the header. If provided, title prop will be passed to header.
+     */
+    headerProps?: Omit<ChatHeaderProps, "title">;
 }
-declare function ChatSidebar({ title, placeholder, starterPrompts, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
+declare function ChatSidebar({ title, placeholder, starterPrompts, className, headerProps, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface ChatFullProps {
     title?: string;
     placeholder?: string;
     starterPrompts?: StarterPrompt[];
     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;
 }
-declare function ChatFull({ title, placeholder, starterPrompts, className, }: ChatFullProps): react_jsx_runtime.JSX.Element;
+declare function ChatFull({ title, placeholder, starterPrompts, className, headerProps, leftSidebar, rightSidebar, leftSidebarClassName, rightSidebarClassName, leftSidebarCollapsible, rightSidebarCollapsible, defaultLeftSidebarCollapsed, defaultRightSidebarCollapsed, leftSidebarCollapsed: controlledLeftCollapsed, rightSidebarCollapsed: controlledRightCollapsed, onLeftSidebarCollapseChange, onRightSidebarCollapseChange, }: ChatFullProps): react_jsx_runtime.JSX.Element;
 
 interface ThreadListProps {
     className?: string;
@@ -155,6 +260,8 @@ interface AccountDialogProps {
 }
 declare const AccountDialog: React$1.FC<AccountDialogProps>;
 
+declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
+
 interface UIRendererProps {
     node: UINode;
 }
@@ -165,4 +272,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, MelonyClientProvider, type MelonyClientProviderProps, MelonyContext, type MelonyContextValue, type Message, type StarterPrompt, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, groupEventsToMessages, useAuth, useMelony, useTheme, useThreads };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 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 {
@@ -91,6 +91,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,12 +111,13 @@ 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;
+}
+declare function Thread({ className, placeholder, starterPrompts, onStarterPromptClick, }: ThreadProps): react_jsx_runtime.JSX.Element;
 
 interface ComposerProps {
     value: string;
@@ -117,29 +129,122 @@ interface ComposerProps {
 }
 declare function Composer({ value, onChange, onSubmit, placeholder, isLoading, className, }: 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[];
     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">;
 }
-declare function ChatPopup({ title, placeholder, starterPrompts, defaultOpen, }: ChatPopupProps): react_jsx_runtime.JSX.Element;
+declare function ChatPopup({ title, placeholder, starterPrompts, defaultOpen, headerProps, }: ChatPopupProps): react_jsx_runtime.JSX.Element;
 
 interface ChatSidebarProps {
     title?: string;
     placeholder?: string;
     starterPrompts?: StarterPrompt[];
     className?: string;
+    /**
+     * Props for customizing the header. If provided, title prop will be passed to header.
+     */
+    headerProps?: Omit<ChatHeaderProps, "title">;
 }
-declare function ChatSidebar({ title, placeholder, starterPrompts, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
+declare function ChatSidebar({ title, placeholder, starterPrompts, className, headerProps, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface ChatFullProps {
     title?: string;
     placeholder?: string;
     starterPrompts?: StarterPrompt[];
     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;
 }
-declare function ChatFull({ title, placeholder, starterPrompts, className, }: ChatFullProps): react_jsx_runtime.JSX.Element;
+declare function ChatFull({ title, placeholder, starterPrompts, className, headerProps, leftSidebar, rightSidebar, leftSidebarClassName, rightSidebarClassName, leftSidebarCollapsible, rightSidebarCollapsible, defaultLeftSidebarCollapsed, defaultRightSidebarCollapsed, leftSidebarCollapsed: controlledLeftCollapsed, rightSidebarCollapsed: controlledRightCollapsed, onLeftSidebarCollapseChange, onRightSidebarCollapseChange, }: ChatFullProps): react_jsx_runtime.JSX.Element;
 
 interface ThreadListProps {
     className?: string;
@@ -155,6 +260,8 @@ interface AccountDialogProps {
 }
 declare const AccountDialog: React$1.FC<AccountDialogProps>;
 
+declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
+
 interface UIRendererProps {
     node: UINode;
 }
@@ -165,4 +272,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, MelonyClientProvider, type MelonyClientProviderProps, MelonyContext, type MelonyContextValue, type Message, type StarterPrompt, ThemeProvider, ThemeToggle, Thread, ThreadContext, type ThreadContextValue, type ThreadData, ThreadList, type ThreadListProps, ThreadProvider, type ThreadProviderProps, type ThreadService, UIRenderer, type UIRendererProps, type UseMelonyOptions, type User, groupEventsToMessages, useAuth, useMelony, useTheme, useThreads };