@yourgpt/copilot-sdk 0.1.1 → 1.0.1

package/dist/ui/index.d.cts

@@ -5,7 +5,7 @@ import { Components } from 'react-markdown';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as use_stick_to_bottom from 'use-stick-to-bottom';
-import { T as ToolDefinition } from '../tools-eeJ5iEC4.cjs';
+import { k as Thread, T as ToolDefinition, _ as ThreadStorageAdapter, X as AsyncThreadStorageAdapter } from '../types-BtAaOV07.cjs';
 import { ClassValue } from 'clsx';
 
 interface LoaderProps {
@@ -93,11 +93,14 @@ declare const Message: ({ children, className, ...props }: MessageProps) => reac
 type MessageAvatarProps = {
     src: string;
     alt: string;
+    /** Text fallback (e.g. "AI") */
     fallback?: string;
+    /** Icon/component fallback (takes precedence over text fallback when src is empty) */
+    fallbackIcon?: React.ReactNode;
     delayMs?: number;
     className?: string;
 };
-declare const MessageAvatar: ({ src, alt, fallback, delayMs, className, }: MessageAvatarProps) => react_jsx_runtime.JSX.Element;
+declare const MessageAvatar: ({ src, alt, fallback, fallbackIcon, delayMs, className, }: MessageAvatarProps) => react_jsx_runtime.JSX.Element;
 type MessageContentProps = {
     children: React.ReactNode;
     markdown?: boolean;
@@ -756,6 +759,113 @@ interface SimpleModelSelectorProps {
  */
 declare function SimpleModelSelector({ value, onChange, models, disabled, className, }: SimpleModelSelectorProps): react_jsx_runtime.JSX.Element;
 
+interface ThreadPickerProps {
+    /** Currently selected thread ID */
+    value?: string | null;
+    /** List of threads to display */
+    threads: Thread[];
+    /** Called when a thread is selected */
+    onSelect?: (threadId: string) => void;
+    /** Called when a thread is deleted */
+    onDeleteThread?: (threadId: string) => void;
+    /** Called when "New conversation" is clicked */
+    onNewThread?: () => void;
+    /** Placeholder text when no thread is selected */
+    placeholder?: string;
+    /** Text for new conversation button */
+    newThreadLabel?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Additional class name for root container */
+    className?: string;
+    /** Class name for the trigger button */
+    buttonClassName?: string;
+    /** Class name for the dropdown container */
+    dropdownClassName?: string;
+    /** Class name for thread items */
+    itemClassName?: string;
+    /** Class name for the new conversation button */
+    newButtonClassName?: string;
+}
+/**
+ * ThreadPicker - Dropdown for selecting conversations
+ *
+ * @example
+ * ```tsx
+ * const { threads, currentThread, switchThread, createThread } = useThreadManager();
+ *
+ * <ThreadPicker
+ *   value={currentThread?.id}
+ *   threads={threads}
+ *   onSelect={switchThread}
+ *   onNewThread={() => createThread()}
+ * />
+ * ```
+ */
+declare function ThreadPicker({ value, threads, onSelect, onDeleteThread, onNewThread, placeholder, newThreadLabel, disabled, loading, size, className, buttonClassName, dropdownClassName, itemClassName, newButtonClassName, }: ThreadPickerProps): react_jsx_runtime.JSX.Element;
+
+interface ThreadListProps {
+    /** List of threads to display */
+    threads: Thread[];
+    /** Currently selected thread ID */
+    selectedId?: string | null;
+    /** Called when a thread is selected */
+    onSelect?: (threadId: string) => void;
+    /** Called when a thread's delete button is clicked */
+    onDelete?: (threadId: string) => void;
+    /** Called when "New conversation" is clicked */
+    onNewThread?: () => void;
+    /** Text for new conversation button */
+    newThreadLabel?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Empty state text */
+    emptyText?: string;
+    /** Show delete buttons */
+    showDelete?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+interface ThreadCardProps {
+    /** Thread data */
+    thread: Thread;
+    /** Whether this thread is selected */
+    selected?: boolean;
+    /** Called when clicked */
+    onClick?: () => void;
+    /** Called when delete is clicked */
+    onDelete?: () => void;
+    /** Show delete button */
+    showDelete?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * ThreadCard - Individual thread item in the list
+ */
+declare function ThreadCard({ thread, selected, onClick, onDelete, showDelete, className, }: ThreadCardProps): react_jsx_runtime.JSX.Element;
+/**
+ * ThreadList - Card-based list of conversations
+ *
+ * @example
+ * ```tsx
+ * const { threads, currentThread, switchThread, deleteThread, createThread } = useThreadManager();
+ *
+ * <ThreadList
+ *   threads={threads}
+ *   selectedId={currentThread?.id}
+ *   onSelect={switchThread}
+ *   onDelete={deleteThread}
+ *   onNewThread={() => createThread()}
+ * />
+ * ```
+ */
+declare function ThreadList({ threads, selectedId, onSelect, onDelete, onNewThread, newThreadLabel, loading, emptyText, showDelete, className, }: ThreadListProps): react_jsx_runtime.JSX.Element;
+
 interface CopilotUIConfig {
     /**
      * Debug mode - shows JSON args/results in collapsible sections
@@ -949,6 +1059,39 @@ interface ToolRendererProps {
  * ```
  */
 type ToolRenderers = Record<string, React__default.ComponentType<ToolRendererProps>>;
+/**
+ * Header configuration for CopilotChat
+ */
+interface ChatHeaderConfig {
+    /** Logo image URL (default: YourGPT logo) */
+    logo?: string;
+    /** Copilot name (default: "AI Copilot") */
+    name?: string;
+    /** Called when close button is clicked */
+    onClose?: () => void;
+}
+/**
+ * Welcome screen configuration for CopilotChat
+ * Shown when there are no messages (new session)
+ */
+interface WelcomeConfig {
+    /** Hero title (default: "How can I help you today?") */
+    title?: string;
+    /** Hero subtitle (default: "Ask anything and get it done.") */
+    subtitle?: string;
+    /** Hero logo URL (defaults to header logo or SDK logo) */
+    logo?: string;
+    /** Label for suggestions section (default: "Try AI Copilot") */
+    suggestionsLabel?: string;
+    /** Show recent chats section (requires persistence) (default: true) */
+    showRecentChats?: boolean;
+    /** Label for recent chats section (default: "Recent chats") */
+    recentChatsLabel?: string;
+    /** Max recent chats to show (default: 3) */
+    maxRecentChats?: number;
+    /** "View more" link text (default: "View more..") */
+    viewMoreLabel?: string;
+}
 type ChatProps = {
     /** Messages to display */
     messages?: ChatMessage[];
@@ -962,12 +1105,33 @@ type ChatProps = {
     placeholder?: string;
     /** Custom welcome message when no messages */
     welcomeMessage?: React__default.ReactNode;
-    /** Title shown in header (if showHeader is true) */
+    /** @deprecated Use `header.name` instead */
     title?: string;
-    /** Show header bar with title and close button */
+    /** Show header bar */
     showHeader?: boolean;
-    /** Called when close button is clicked */
+    /** Header configuration */
+    header?: ChatHeaderConfig;
+    /** Thread picker element (passed from connected-chat) */
+    threadPicker?: React__default.ReactNode;
+    /** @deprecated Use `header.logo` instead */
+    logo?: string;
+    /** @deprecated Use `header.name` instead */
+    name?: string;
+    /** @deprecated Use `header.onClose` instead */
     onClose?: () => void;
+    /**
+     * Welcome screen configuration. Shown when no messages.
+     * Set to `false` to disable and show empty chat instead.
+     */
+    welcome?: WelcomeConfig | false;
+    /** Recent threads for welcome screen (from persistence) */
+    recentThreads?: Thread[];
+    /** Called when user selects a recent thread */
+    onSelectThread?: (threadId: string) => void;
+    /** Called when user deletes a thread from welcome screen */
+    onDeleteThread?: (threadId: string) => void;
+    /** Called when user clicks "View more" in recent threads */
+    onViewMoreThreads?: () => void;
     /** Show powered by footer (free tier) */
     showPoweredBy?: boolean;
     /** Show user avatar (default: false) */
@@ -1075,7 +1239,49 @@ type ChatProps = {
     };
 };
 
-declare function Chat({ messages, onSendMessage, onStop, isLoading, placeholder, welcomeMessage, title, showHeader, onClose, showPoweredBy, showUserAvatar, userAvatar, assistantAvatar, loaderVariant, fontSize, maxFileSize, allowedFileTypes, attachmentsEnabled, attachmentsDisabledTooltip, processAttachment: processAttachmentProp, suggestions, onSuggestionClick, isProcessing, registeredTools, toolRenderers, onApproveToolExecution, onRejectToolExecution, showFollowUps, followUpClassName, followUpButtonClassName, renderMessage, renderInput, renderHeader, className, classNames, }: ChatProps): react_jsx_runtime.JSX.Element;
+declare function Chat({ messages, onSendMessage, onStop, isLoading, placeholder, welcomeMessage, title, showHeader, header, threadPicker, logo, name, onClose, showPoweredBy, showUserAvatar, userAvatar, assistantAvatar, loaderVariant, fontSize, maxFileSize, allowedFileTypes, attachmentsEnabled, attachmentsDisabledTooltip, processAttachment: processAttachmentProp, suggestions, onSuggestionClick, welcome, recentThreads, onSelectThread, onDeleteThread, onViewMoreThreads, isProcessing, registeredTools, toolRenderers, onApproveToolExecution, onRejectToolExecution, showFollowUps, followUpClassName, followUpButtonClassName, renderMessage, renderInput, renderHeader, className, classNames, }: ChatProps): react_jsx_runtime.JSX.Element;
+
+interface ChatWelcomeProps {
+    /** Welcome screen configuration */
+    config?: WelcomeConfig;
+    /** Suggestions to show */
+    suggestions?: string[];
+    /** Recent threads for the recent chats section */
+    recentThreads?: Thread[];
+    /** Called when user sends a message */
+    onSendMessage: (message: string, attachments?: MessageAttachment[]) => void;
+    /** Called when user selects a recent thread */
+    onSelectThread?: (threadId: string) => void;
+    /** Called when user deletes a recent thread */
+    onDeleteThread?: (threadId: string) => void;
+    /** Called when user clicks "View more" */
+    onViewMoreThreads?: () => void;
+    /** Whether AI is currently generating */
+    isLoading?: boolean;
+    /** Called when user stops generation */
+    onStop?: () => void;
+    /** Placeholder for input */
+    placeholder?: string;
+    /** Whether attachments are enabled */
+    attachmentsEnabled?: boolean;
+    /** Tooltip when attachments are disabled */
+    attachmentsDisabledTooltip?: string;
+    /** Maximum file size in bytes */
+    maxFileSize?: number;
+    /** Allowed file types */
+    allowedFileTypes?: string[];
+    /** Custom attachment processor */
+    processAttachment?: (file: File) => Promise<MessageAttachment>;
+    /** Custom class names */
+    classNames?: {
+        root?: string;
+        hero?: string;
+        input?: string;
+        suggestions?: string;
+        recentChats?: string;
+    };
+}
+declare function ChatWelcome({ config, suggestions, recentThreads, onSendMessage, onSelectThread, onDeleteThread, onViewMoreThreads, isLoading, onStop, placeholder, attachmentsEnabled, attachmentsDisabledTooltip, maxFileSize, allowedFileTypes, processAttachment: processAttachmentProp, classNames, }: ChatWelcomeProps): react_jsx_runtime.JSX.Element;
 
 interface ToolExecutionMessageProps {
     executions: ToolExecutionData[];
@@ -1104,49 +1310,138 @@ interface ToolExecutionMessageProps {
 declare function ToolExecutionMessage({ executions, assistantAvatar, onApprove, onReject, toolRenderers, className, }: ToolExecutionMessageProps): react_jsx_runtime.JSX.Element | null;
 
 /**
- * Props for CopilotChat - auto-connects to CopilotProvider context
- * No need to pass messages, sendMessage, etc. - handled internally
+ * localStorage persistence (zero config)
  */
-type CopilotChatProps = Omit<ChatProps, "messages" | "onSendMessage" | "onStop" | "isLoading" | "isProcessing" | "onApproveToolExecution" | "onRejectToolExecution" | "processAttachment">;
+interface LocalPersistenceConfig {
+    type: "local";
+    /** Debounce delay for auto-save (ms). Default: 1000 */
+    saveDebounce?: number;
+    /** Whether to auto-restore the last active thread. Default: true */
+    autoRestoreLastThread?: boolean;
+}
 /**
- * CopilotChat - Auto-connected chat component
- *
- * Automatically connects to CopilotProvider context.
- * No need to use hooks or pass messages - everything is handled internally.
+ * Server persistence (point to your own API routes)
+ */
+interface ServerPersistenceConfig {
+    type: "server";
+    /**
+     * Endpoint URL for your thread CRUD API
+     * @example "/api/threads"
+     */
+    endpoint: string;
+    /** Additional headers for requests (e.g., auth tokens) */
+    headers?: Record<string, string>;
+    /** Debounce delay for auto-save (ms). Default: 1000 */
+    saveDebounce?: number;
+    /** Whether to auto-restore the last active thread. Default: true */
+    autoRestoreLastThread?: boolean;
+}
+/**
+ * Cloud persistence (future - managed service)
+ */
+interface CloudPersistenceConfig {
+    type: "cloud";
+    /** Copilot Cloud API key */
+    apiKey: string;
+    /** Custom endpoint for enterprise (optional) */
+    endpoint?: string;
+}
+/**
+ * Legacy persistence config (backward compatibility)
+ */
+interface LegacyPersistenceConfig {
+    /** Storage adapter (defaults to localStorage) */
+    adapter?: ThreadStorageAdapter | AsyncThreadStorageAdapter;
+    /** Debounce delay for auto-save (ms). Default: 1000 */
+    saveDebounce?: number;
+    /** Whether to auto-restore the last active thread on mount. Default: true */
+    autoRestoreLastThread?: boolean;
+}
+/**
+ * Persistence configuration for CopilotChat
  *
- * @example
+ * @example localStorage (zero config)
  * ```tsx
- * import { CopilotProvider } from '../../react';
- * import { CopilotChat } from '@yourgpt/copilot-sdk-ui';
- *
- * function App() {
- *   return (
- *     <CopilotProvider runtimeUrl="/api/chat">
- *       <CopilotChat
- *         title="AI Assistant"
- *         placeholder="Ask anything..."
- *       />
- *     </CopilotProvider>
- *   );
- * }
+ * <CopilotChat persistence={true} />
+ * // or explicitly:
+ * <CopilotChat persistence={{ type: "local" }} />
  * ```
  *
- * @example Generative UI with custom tool renderers
+ * @example Server persistence
  * ```tsx
- * import { CopilotChat, type ToolRendererProps } from '@yourgpt/copilot-sdk-ui';
- *
- * function WeatherCard({ execution }: ToolRendererProps) {
- *   if (execution.status !== 'completed') return <div>Loading...</div>;
- *   return <div>{execution.result.city}: {execution.result.temperature}°</div>;
- * }
- *
  * <CopilotChat
- *   toolRenderers={{
- *     get_weather: WeatherCard,
+ *   persistence={{
+ *     type: "server",
+ *     threadsUrl: "/api/threads",
+ *     headers: { Authorization: `Bearer ${token}` },
  *   }}
  * />
  * ```
  */
+type CopilotChatPersistenceConfig = LocalPersistenceConfig | ServerPersistenceConfig | CloudPersistenceConfig | LegacyPersistenceConfig;
+/**
+ * Extended classNames for CopilotChat including thread picker
+ */
+interface CopilotChatClassNames {
+    root?: string;
+    header?: string;
+    container?: string;
+    messageList?: string;
+    userMessage?: string;
+    assistantMessage?: string;
+    input?: string;
+    suggestions?: string;
+    footer?: string;
+    threadPicker?: string;
+    threadPickerButton?: string;
+    threadPickerDropdown?: string;
+    threadPickerItem?: string;
+    threadPickerNewButton?: string;
+}
+/**
+ * Header configuration for CopilotChat
+ */
+interface CopilotChatHeaderConfig {
+    /** Logo image URL (default: YourGPT logo) */
+    logo?: string;
+    /** Copilot name (default: "AI Copilot") */
+    name?: string;
+    /** Called when close button is clicked */
+    onClose?: () => void;
+}
+/**
+ * Props for CopilotChat - auto-connects to CopilotProvider context
+ * No need to pass messages, sendMessage, etc. - handled internally
+ */
+type CopilotChatProps = Omit<ChatProps, "messages" | "onSendMessage" | "onStop" | "isLoading" | "isProcessing" | "onApproveToolExecution" | "onRejectToolExecution" | "processAttachment" | "classNames" | "header" | "threadPicker" | "recentThreads" | "onSelectThread" | "onViewMoreThreads"> & {
+    /**
+     * Header configuration.
+     * Providing this prop will automatically show the header.
+     */
+    header?: CopilotChatHeaderConfig;
+    /**
+     * Enable built-in persistence.
+     * - `true`: Use localStorage with default settings
+     * - `object`: Custom persistence config
+     * - `undefined`: No persistence (default)
+     */
+    persistence?: boolean | CopilotChatPersistenceConfig;
+    /**
+     * Show thread picker in the header for switching conversations.
+     * Requires `persistence` to be enabled.
+     * @default false
+     */
+    showThreadPicker?: boolean;
+    /**
+     * Callback when the current thread changes.
+     * Useful for syncing thread ID with URL or external state.
+     */
+    onThreadChange?: (threadId: string | null) => void;
+    /**
+     * Granular class names for sub-components including thread picker
+     */
+    classNames?: CopilotChatClassNames;
+};
 declare function CopilotChat(props: CopilotChatProps): react_jsx_runtime.JSX.Element;
 declare const ConnectedChat: typeof CopilotChat;
 type ConnectedChatProps = CopilotChatProps;
@@ -1202,4 +1497,4 @@ declare function AlertTriangleIcon({ className }: {
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AlertTriangleIcon, BotIcon, Button, CapabilityBadge, type CapabilityBadgeProps, CapabilityList, type CapabilityListProps, type CapabilityType, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, type ChatMessage, type ChatProps, CheckIcon, ChevronDownIcon, ChevronUpIcon, CloseIcon, CodeBlock, CompactPermissionConfirmation, type CompactPermissionConfirmationProps, Confirmation, ConfirmationActions, type ConfirmationActionsProps, ConfirmationApproved, type ConfirmationApprovedProps, ConfirmationMessage, type ConfirmationMessageProps, ConfirmationPending, type ConfirmationPendingProps, type ConfirmationProps, ConfirmationRejected, type ConfirmationRejectedProps, type ConfirmationState$1 as ConfirmationState, ConnectedChat, type ConnectedChatProps, CopilotChat, type CopilotChatProps, type CopilotUIConfig, type CopilotUIContextValue, CopilotUIProvider, type CopilotUIProviderProps, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, type DevLoggerProps, type DevLoggerState, FeedbackBar, type FollowUpProps, FollowUpQuestions, InlineToolSteps, type InlineToolStepsProps, Loader, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, type ModelOption, ModelSelector, type ModelSelectorProps, PermissionConfirmation, type PermissionConfirmationProps, type PermissionLevel, type PermissionOption, PoweredBy, type PoweredByProps, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, type ProviderGroup, Reasoning, ReasoningContent, type ReasoningContentProps, type ReasoningProps, ReasoningTrigger, type ReasoningTriggerProps, RefreshIcon, ScrollButton, SendIcon, SimpleConfirmation, type SimpleConfirmationProps, SimpleModelSelector, type SimpleModelSelectorProps, SimpleReasoning, type SimpleReasoningProps, Source, SourceContent, SourceTrigger, StopIcon, ThumbsDownIcon, ThumbsUpIcon, ToolExecutionMessage, type ToolRendererProps, type ToolRenderers, ToolStep, type ToolStepData, type ToolStepProps, type ToolStepStatus, ToolSteps, type ToolStepsProps, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, UserIcon, XIcon, cn, parseFollowUps, useChatContainer, useCopilotUI };
+export { AlertTriangleIcon, BotIcon, Button, CapabilityBadge, type CapabilityBadgeProps, CapabilityList, type CapabilityListProps, type CapabilityType, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, type ChatMessage, type ChatProps, ChatWelcome, CheckIcon, ChevronDownIcon, ChevronUpIcon, CloseIcon, type CloudPersistenceConfig, CodeBlock, CompactPermissionConfirmation, type CompactPermissionConfirmationProps, Confirmation, ConfirmationActions, type ConfirmationActionsProps, ConfirmationApproved, type ConfirmationApprovedProps, ConfirmationMessage, type ConfirmationMessageProps, ConfirmationPending, type ConfirmationPendingProps, type ConfirmationProps, ConfirmationRejected, type ConfirmationRejectedProps, type ConfirmationState$1 as ConfirmationState, ConnectedChat, type ConnectedChatProps, CopilotChat, type CopilotChatClassNames, type CopilotChatPersistenceConfig, type CopilotChatProps, type CopilotUIConfig, type CopilotUIContextValue, CopilotUIProvider, type CopilotUIProviderProps, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, type DevLoggerProps, type DevLoggerState, FeedbackBar, type FollowUpProps, FollowUpQuestions, InlineToolSteps, type InlineToolStepsProps, Loader, type LocalPersistenceConfig, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, type ModelOption, ModelSelector, type ModelSelectorProps, PermissionConfirmation, type PermissionConfirmationProps, type PermissionLevel, type PermissionOption, PoweredBy, type PoweredByProps, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, type ProviderGroup, Reasoning, ReasoningContent, type ReasoningContentProps, type ReasoningProps, ReasoningTrigger, type ReasoningTriggerProps, RefreshIcon, ScrollButton, SendIcon, type ServerPersistenceConfig, SimpleConfirmation, type SimpleConfirmationProps, SimpleModelSelector, type SimpleModelSelectorProps, SimpleReasoning, type SimpleReasoningProps, Source, SourceContent, SourceTrigger, StopIcon, ThreadCard, type ThreadCardProps, ThreadList, type ThreadListProps, ThreadPicker, type ThreadPickerProps, ThumbsDownIcon, ThumbsUpIcon, ToolExecutionMessage, type ToolRendererProps, type ToolRenderers, ToolStep, type ToolStepData, type ToolStepProps, type ToolStepStatus, ToolSteps, type ToolStepsProps, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, UserIcon, type WelcomeConfig, XIcon, cn, parseFollowUps, useChatContainer, useCopilotUI };