@mordn/chat-widget 0.6.2 → 0.7.1

package/dist/index.d.mts

@@ -1,9 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import { ReactNode, HTMLAttributes } from 'react';
+import * as React$1 from 'react';
+import { ReactNode, HTMLAttributes, ComponentProps } 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';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { ToolUIPart } from 'ai';
 
 /**
  * ChatWidget Configuration Types
@@ -102,6 +104,46 @@ interface ChatWidgetConfig {
      * character.
      */
     inputPlugins?: InputPlugin[];
+    /**
+     * Per-tool custom renderers. When a tool part appears in a message
+     * (either a static `tool-<name>` part or a `dynamic-tool` part with
+     * `toolName: <name>`), the widget looks up the renderer keyed by tool
+     * name and uses it instead of the default JSON-dump tool block.
+     *
+     * Renderer receives the full tool part and must return a React node.
+     * It owns its visual presentation entirely — table, cards, chart,
+     * inline summary, whatever fits the data. Return null to fall back
+     * to the default rendering (useful for partial-state tool calls
+     * where you only want custom rendering once results arrive).
+     *
+     * The widget knows nothing about specific tools; consumers are
+     * responsible for the renderer mapping. This keeps the widget
+     * domain-agnostic while letting host apps make tool results feel
+     * native.
+     */
+    toolRenderers?: Record<string, ToolRenderer>;
+}
+/**
+ * Render function for a tool UI part. Receives the entire part so the
+ * renderer can branch on `state` (input-streaming / output-available /
+ * output-error) and on the input/output shapes.
+ */
+type ToolRenderer = (part: ToolPartLike) => ReactNode | null;
+/**
+ * Loose shape of the tool parts the renderer will receive — covers
+ * both static `ToolUIPart<TOOLS>` and the dynamic-tool variant. Kept
+ * loose so consumers don't have to import internal AI SDK types.
+ */
+interface ToolPartLike {
+    /** Either `tool-<name>` or `'dynamic-tool'`. */
+    type: string;
+    /** Always present on dynamic-tool parts; sometimes absent on static. */
+    toolName?: string;
+    toolCallId: string;
+    state: 'input-streaming' | 'input-available' | 'output-available' | 'output-error';
+    input?: unknown;
+    output?: unknown;
+    errorText?: string;
 }
 /**
  * Item returned by an InputPlugin's fetch function. Renders as one row
@@ -197,9 +239,27 @@ interface ThemeConfig {
 }
 interface FeatureConfig {
     /**
-     * Enable file uploads
+     * Enable file uploads. When true, the input toolbar shows a paperclip
+     * button and accepts files matching `fileUploadAccept`.
      */
     fileUpload?: boolean;
+    /**
+     * Comma-separated `accept` filter passed to the file picker when
+     * `fileUpload` is true. Mirrors the HTML input[type=file] `accept`
+     * syntax (e.g. `"image/*,application/pdf,.csv"`). Defaults to
+     * `"image/*"` for backwards compatibility — consumers serving more
+     * file types should set this to whatever their server / model
+     * actually accepts.
+     */
+    fileUploadAccept?: string;
+    /**
+     * Per-file size cap in bytes. The file picker / drag-and-drop
+     * surface rejects files above this size before any network call,
+     * showing the consumer's onError hook. Should mirror whatever the
+     * upload endpoint enforces server-side. When unset, no client-side
+     * size check is applied.
+     */
+    fileUploadMaxBytes?: number;
     /**
      * Enable web search
      */
@@ -288,7 +348,7 @@ interface ChatWidgetProps extends ChatWidgetConfig {
      */
     widgetId?: string;
 }
-declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, onClose, headerActions, open, onOpenChange, inputPlugins, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
+declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, onClose, headerActions, open, onOpenChange, inputPlugins, toolRenderers, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface ChatTheme {
     lightPrimary: string;
@@ -350,21 +410,21 @@ declare const buttonVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+declare function Button({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
 }
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 
-declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+declare function Dialog({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-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;
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
 
 type StarterMessagesProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
     prompts: StarterPrompt[];
@@ -376,4 +436,36 @@ type StarterMessageItemProps = HTMLAttributes<HTMLButtonElement> & {
 };
 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, type InputPlugin, type InputPluginItem, StarterMessageItem, StarterMessages, type StarterPrompt, type ThemeConfig, type ThemeMode, ChatWidget as default, fontOptions, useChatStorageKey, useChatTheme };
+declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): react_jsx_runtime.JSX.Element;
+
+type ToolProps = ComponentProps<typeof Collapsible>;
+declare const Tool: ({ className, ...props }: ToolProps) => react_jsx_runtime.JSX.Element;
+type ToolHeaderProps = {
+    title?: string;
+    type: ToolUIPart["type"] | "dynamic-tool";
+    /**
+     * Set when the part is a `dynamic-tool` UIPart (MCP / `dynamicTool()`).
+     * For these the `type` is always `"dynamic-tool"`, so the actual tool
+     * identity lives in `toolName`. When provided, it wins over the parsed
+     * type fragment so the header shows e.g. `get_financials` instead of
+     * the generic `tool`.
+     */
+    toolName?: string;
+    state: ToolUIPart["state"];
+    className?: string;
+};
+declare const ToolHeader: ({ className, title, type, toolName, state, ...props }: ToolHeaderProps) => react_jsx_runtime.JSX.Element;
+type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const ToolContent: ({ className, ...props }: ToolContentProps) => react_jsx_runtime.JSX.Element;
+type ToolInputProps = ComponentProps<"div"> & {
+    input: ToolUIPart["input"];
+};
+declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => react_jsx_runtime.JSX.Element;
+type ToolOutputProps = ComponentProps<"div"> & {
+    output: ToolUIPart["output"];
+    errorText: ToolUIPart["errorText"];
+};
+declare const ToolOutput: ({ className, output, errorText, ...props }: ToolOutputProps) => react_jsx_runtime.JSX.Element | null;
+
+export { Button, ChatStorageProvider, type ChatTheme, ChatWidget, type ChatWidgetConfig, type ChatWidgetProps, type ChatWidgetSize, type ConversationStarter, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, type DisplayConfig, type FeatureConfig, Input, type InputPlugin, type InputPluginItem, StarterMessageItem, StarterMessages, type StarterPrompt, type ThemeConfig, type ThemeMode, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, type ToolPartLike, type ToolRenderer, ChatWidget as default, fontOptions, useChatStorageKey, useChatTheme };

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import { ReactNode, HTMLAttributes } from 'react';
+import * as React$1 from 'react';
+import { ReactNode, HTMLAttributes, ComponentProps } 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';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { ToolUIPart } from 'ai';
 
 /**
  * ChatWidget Configuration Types
@@ -102,6 +104,46 @@ interface ChatWidgetConfig {
      * character.
      */
     inputPlugins?: InputPlugin[];
+    /**
+     * Per-tool custom renderers. When a tool part appears in a message
+     * (either a static `tool-<name>` part or a `dynamic-tool` part with
+     * `toolName: <name>`), the widget looks up the renderer keyed by tool
+     * name and uses it instead of the default JSON-dump tool block.
+     *
+     * Renderer receives the full tool part and must return a React node.
+     * It owns its visual presentation entirely — table, cards, chart,
+     * inline summary, whatever fits the data. Return null to fall back
+     * to the default rendering (useful for partial-state tool calls
+     * where you only want custom rendering once results arrive).
+     *
+     * The widget knows nothing about specific tools; consumers are
+     * responsible for the renderer mapping. This keeps the widget
+     * domain-agnostic while letting host apps make tool results feel
+     * native.
+     */
+    toolRenderers?: Record<string, ToolRenderer>;
+}
+/**
+ * Render function for a tool UI part. Receives the entire part so the
+ * renderer can branch on `state` (input-streaming / output-available /
+ * output-error) and on the input/output shapes.
+ */
+type ToolRenderer = (part: ToolPartLike) => ReactNode | null;
+/**
+ * Loose shape of the tool parts the renderer will receive — covers
+ * both static `ToolUIPart<TOOLS>` and the dynamic-tool variant. Kept
+ * loose so consumers don't have to import internal AI SDK types.
+ */
+interface ToolPartLike {
+    /** Either `tool-<name>` or `'dynamic-tool'`. */
+    type: string;
+    /** Always present on dynamic-tool parts; sometimes absent on static. */
+    toolName?: string;
+    toolCallId: string;
+    state: 'input-streaming' | 'input-available' | 'output-available' | 'output-error';
+    input?: unknown;
+    output?: unknown;
+    errorText?: string;
 }
 /**
  * Item returned by an InputPlugin's fetch function. Renders as one row
@@ -197,9 +239,27 @@ interface ThemeConfig {
 }
 interface FeatureConfig {
     /**
-     * Enable file uploads
+     * Enable file uploads. When true, the input toolbar shows a paperclip
+     * button and accepts files matching `fileUploadAccept`.
      */
     fileUpload?: boolean;
+    /**
+     * Comma-separated `accept` filter passed to the file picker when
+     * `fileUpload` is true. Mirrors the HTML input[type=file] `accept`
+     * syntax (e.g. `"image/*,application/pdf,.csv"`). Defaults to
+     * `"image/*"` for backwards compatibility — consumers serving more
+     * file types should set this to whatever their server / model
+     * actually accepts.
+     */
+    fileUploadAccept?: string;
+    /**
+     * Per-file size cap in bytes. The file picker / drag-and-drop
+     * surface rejects files above this size before any network call,
+     * showing the consumer's onError hook. Should mirror whatever the
+     * upload endpoint enforces server-side. When unset, no client-side
+     * size check is applied.
+     */
+    fileUploadMaxBytes?: number;
     /**
      * Enable web search
      */
@@ -288,7 +348,7 @@ interface ChatWidgetProps extends ChatWidgetConfig {
      */
     widgetId?: string;
 }
-declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, onClose, headerActions, open, onOpenChange, inputPlugins, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
+declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, onClose, headerActions, open, onOpenChange, inputPlugins, toolRenderers, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface ChatTheme {
     lightPrimary: string;
@@ -350,21 +410,21 @@ declare const buttonVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+declare function Button({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
 }
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 
-declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+declare function Dialog({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-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;
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
 
 type StarterMessagesProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
     prompts: StarterPrompt[];
@@ -376,4 +436,36 @@ type StarterMessageItemProps = HTMLAttributes<HTMLButtonElement> & {
 };
 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, type InputPlugin, type InputPluginItem, StarterMessageItem, StarterMessages, type StarterPrompt, type ThemeConfig, type ThemeMode, ChatWidget as default, fontOptions, useChatStorageKey, useChatTheme };
+declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): react_jsx_runtime.JSX.Element;
+
+type ToolProps = ComponentProps<typeof Collapsible>;
+declare const Tool: ({ className, ...props }: ToolProps) => react_jsx_runtime.JSX.Element;
+type ToolHeaderProps = {
+    title?: string;
+    type: ToolUIPart["type"] | "dynamic-tool";
+    /**
+     * Set when the part is a `dynamic-tool` UIPart (MCP / `dynamicTool()`).
+     * For these the `type` is always `"dynamic-tool"`, so the actual tool
+     * identity lives in `toolName`. When provided, it wins over the parsed
+     * type fragment so the header shows e.g. `get_financials` instead of
+     * the generic `tool`.
+     */
+    toolName?: string;
+    state: ToolUIPart["state"];
+    className?: string;
+};
+declare const ToolHeader: ({ className, title, type, toolName, state, ...props }: ToolHeaderProps) => react_jsx_runtime.JSX.Element;
+type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const ToolContent: ({ className, ...props }: ToolContentProps) => react_jsx_runtime.JSX.Element;
+type ToolInputProps = ComponentProps<"div"> & {
+    input: ToolUIPart["input"];
+};
+declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => react_jsx_runtime.JSX.Element;
+type ToolOutputProps = ComponentProps<"div"> & {
+    output: ToolUIPart["output"];
+    errorText: ToolUIPart["errorText"];
+};
+declare const ToolOutput: ({ className, output, errorText, ...props }: ToolOutputProps) => react_jsx_runtime.JSX.Element | null;
+
+export { Button, ChatStorageProvider, type ChatTheme, ChatWidget, type ChatWidgetConfig, type ChatWidgetProps, type ChatWidgetSize, type ConversationStarter, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, type DisplayConfig, type FeatureConfig, Input, type InputPlugin, type InputPluginItem, StarterMessageItem, StarterMessages, type StarterPrompt, type ThemeConfig, type ThemeMode, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, type ToolPartLike, type ToolRenderer, ChatWidget as default, fontOptions, useChatStorageKey, useChatTheme };