@mordn/chat-widget 0.1.0 → 0.1.3

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
@@ -51,6 +52,21 @@ interface ChatWidgetConfig {
      * Initial messages (if starting with pre-filled messages)
      */
     initialMessages?: any[];
+    /**
+     * Starter prompts shown when chat is empty
+     * Users can click these to quickly start a conversation
+     */
+    starterPrompts?: StarterPrompt[];
+}
+interface StarterPrompt {
+    /**
+     * The main text of the prompt (also used as the message when clicked)
+     */
+    title: string;
+    /**
+     * Optional subtitle for additional context
+     */
+    subtitle?: string;
 }
 interface ThemeConfig {
     /**
@@ -80,12 +96,36 @@ interface FeatureConfig {
      */
     webSearch?: boolean;
 }
+/**
+ * Size presets for the chat widget
+ * Each preset uses clamp() for responsive sizing:
+ * - compact: clamp(300px, 24vw, 400px) - sidebars, minimal footprint
+ * - default: clamp(320px, 28vw, 500px) - balanced for most use cases
+ * - large: clamp(400px, 35vw, 700px) - content-heavy conversations
+ * - full: 100% - fills entire screen
+ */
+type ChatWidgetSize = 'compact' | 'default' | 'large' | 'full';
 interface DisplayConfig {
     /**
-     * Width of the widget
-     * Default: '450px'
+     * Preset size for the widget (recommended)
+     * Uses clamp() for responsive sizing with min/max bounds
+     * Default: 'default'
+     */
+    size?: ChatWidgetSize;
+    /**
+     * Custom width override (any CSS value)
+     * Examples:
+     *   - '400px' (fixed)
+     *   - '30vw' (viewport-relative)
+     *   - 'clamp(300px, 25vw, 500px)' (responsive with bounds)
+     * Overrides the size preset if provided
      */
     width?: string;
+    /**
+     * Enable drag-to-resize functionality
+     * Default: true
+     */
+    resizable?: boolean;
     /**
      * Initial state (open or closed)
      * Default: false
@@ -115,7 +155,7 @@ interface ChatWidgetProps extends ChatWidgetConfig {
      */
     widgetId?: string;
 }
-declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
+declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface ChatTheme {
     lightPrimary: string;
@@ -164,6 +204,15 @@ declare function useChatTheme(): {
     updateThemeMode: (mode: ThemeMode) => void;
 };
 
+interface ChatStorageContextValue {
+    storageKeyPrefix: string;
+}
+declare function ChatStorageProvider({ children, userId, }: {
+    children: ReactNode;
+    userId?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function useChatStorageKey(): ChatStorageContextValue;
+
 declare const buttonVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
@@ -184,4 +233,14 @@ declare function DialogHeader({ className, ...props }: React.ComponentProps<"div
 declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
 declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
 
-export { Button, type ChatTheme, ChatWidget, type ChatWidgetConfig, type ChatWidgetProps, type ConversationStarter, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, type DisplayConfig, type FeatureConfig, Input, type ThemeConfig, type ThemeMode, ChatWidget as default, fontOptions, useChatTheme };
+type StarterMessagesProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
+    prompts: StarterPrompt[];
+    onPromptSelect: (prompt: StarterPrompt) => void;
+};
+declare function StarterMessages({ className, prompts, onPromptSelect, ...props }: StarterMessagesProps): react_jsx_runtime.JSX.Element | null;
+type StarterMessageItemProps = HTMLAttributes<HTMLButtonElement> & {
+    prompt: StarterPrompt;
+};
+declare function StarterMessageItem({ className, prompt, onClick, ...props }: StarterMessageItemProps): react_jsx_runtime.JSX.Element;
+
+export { Button, ChatStorageProvider, type ChatTheme, ChatWidget, type ChatWidgetConfig, type ChatWidgetProps, type ChatWidgetSize, type ConversationStarter, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, type DisplayConfig, type FeatureConfig, Input, StarterMessageItem, StarterMessages, type StarterPrompt, type ThemeConfig, type ThemeMode, ChatWidget as default, fontOptions, useChatStorageKey, useChatTheme };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
@@ -51,6 +52,21 @@ interface ChatWidgetConfig {
      * Initial messages (if starting with pre-filled messages)
      */
     initialMessages?: any[];
+    /**
+     * Starter prompts shown when chat is empty
+     * Users can click these to quickly start a conversation
+     */
+    starterPrompts?: StarterPrompt[];
+}
+interface StarterPrompt {
+    /**
+     * The main text of the prompt (also used as the message when clicked)
+     */
+    title: string;
+    /**
+     * Optional subtitle for additional context
+     */
+    subtitle?: string;
 }
 interface ThemeConfig {
     /**
@@ -80,12 +96,36 @@ interface FeatureConfig {
      */
     webSearch?: boolean;
 }
+/**
+ * Size presets for the chat widget
+ * Each preset uses clamp() for responsive sizing:
+ * - compact: clamp(300px, 24vw, 400px) - sidebars, minimal footprint
+ * - default: clamp(320px, 28vw, 500px) - balanced for most use cases
+ * - large: clamp(400px, 35vw, 700px) - content-heavy conversations
+ * - full: 100% - fills entire screen
+ */
+type ChatWidgetSize = 'compact' | 'default' | 'large' | 'full';
 interface DisplayConfig {
     /**
-     * Width of the widget
-     * Default: '450px'
+     * Preset size for the widget (recommended)
+     * Uses clamp() for responsive sizing with min/max bounds
+     * Default: 'default'
+     */
+    size?: ChatWidgetSize;
+    /**
+     * Custom width override (any CSS value)
+     * Examples:
+     *   - '400px' (fixed)
+     *   - '30vw' (viewport-relative)
+     *   - 'clamp(300px, 25vw, 500px)' (responsive with bounds)
+     * Overrides the size preset if provided
      */
     width?: string;
+    /**
+     * Enable drag-to-resize functionality
+     * Default: true
+     */
+    resizable?: boolean;
     /**
      * Initial state (open or closed)
      * Default: false
@@ -115,7 +155,7 @@ interface ChatWidgetProps extends ChatWidgetConfig {
      */
     widgetId?: string;
 }
-declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
+declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface ChatTheme {
     lightPrimary: string;
@@ -164,6 +204,15 @@ declare function useChatTheme(): {
     updateThemeMode: (mode: ThemeMode) => void;
 };
 
+interface ChatStorageContextValue {
+    storageKeyPrefix: string;
+}
+declare function ChatStorageProvider({ children, userId, }: {
+    children: ReactNode;
+    userId?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function useChatStorageKey(): ChatStorageContextValue;
+
 declare const buttonVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
@@ -184,4 +233,14 @@ declare function DialogHeader({ className, ...props }: React.ComponentProps<"div
 declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
 declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
 
-export { Button, type ChatTheme, ChatWidget, type ChatWidgetConfig, type ChatWidgetProps, type ConversationStarter, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, type DisplayConfig, type FeatureConfig, Input, type ThemeConfig, type ThemeMode, ChatWidget as default, fontOptions, useChatTheme };
+type StarterMessagesProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
+    prompts: StarterPrompt[];
+    onPromptSelect: (prompt: StarterPrompt) => void;
+};
+declare function StarterMessages({ className, prompts, onPromptSelect, ...props }: StarterMessagesProps): react_jsx_runtime.JSX.Element | null;
+type StarterMessageItemProps = HTMLAttributes<HTMLButtonElement> & {
+    prompt: StarterPrompt;
+};
+declare function StarterMessageItem({ className, prompt, onClick, ...props }: StarterMessageItemProps): react_jsx_runtime.JSX.Element;
+
+export { Button, ChatStorageProvider, type ChatTheme, ChatWidget, type ChatWidgetConfig, type ChatWidgetProps, type ChatWidgetSize, type ConversationStarter, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, type DisplayConfig, type FeatureConfig, Input, StarterMessageItem, StarterMessages, type StarterPrompt, type ThemeConfig, type ThemeMode, ChatWidget as default, fontOptions, useChatStorageKey, useChatTheme };