import { ReactNode } from 'react'; import { ButtonBaseProps, SxProps, Theme } from '@mui/material'; export interface ChatSxProps { sx?: SxProps; } export interface ChatErrorAction { label: string; onClick: () => void; } export interface ChatUserMessageProps extends ChatSxProps { children: ReactNode; /** enabled to render text with a lighter color for indicating things like an error sending the message */ muted?: boolean; /** content to render on top of the message for user attachments */ topContext?: ReactNode; } export interface ChatAgentMessageProps extends ChatSxProps { children: ReactNode; } export interface ChatAgentMessageMarkdownProps extends ChatSxProps { /** * Markdown source — rendered as GitHub-Flavored Markdown (tables, task lists, * strikethrough) through the library's sanitized renderer, inside a * `ChatAgentMessage`. Raw HTML is skipped and images are stripped, since the * content is model output. */ children: string; } export interface ChatErrorMessageProps extends ChatSxProps { errors: string[]; icon?: ReactNode; actions?: ChatErrorAction[]; } export interface ChatSuggestionButtonProps extends ChatSxProps, Omit { label: ReactNode; color?: string; } export interface ChatThinkingProps extends ChatSxProps { duration?: number; children?: ReactNode; } export interface ChatLoaderProps extends ChatSxProps { size?: number; labels?: { loading?: string; }; } export interface ChatContentProps extends ChatSxProps { children: ReactNode; /** * Smooth-scrolls to the bottom whenever new content is added — but only if * the user was already at (or near) the bottom. Readers who scrolled up to * revisit older messages are left alone. Defaults to `true`; pass `false` * to opt out and manage scroll yourself via the ref. */ autoScroll?: boolean; labels?: { jumpToLatest?: string; }; } /** * Imperative handle exposed by `ChatContent` via `ref`. Use it to drive scroll * from the parent — for example, calling `scrollToBottom()` when a new agent * message arrives. */ export interface ChatContentRef { /** Smooth-scrolls the content area to the bottom. */ scrollToBottom: () => void; /** Smooth-scrolls the content area to the top. */ scrollToTop: () => void; /** `true` when the content area is scrolled to (or near) its bottom edge. */ isAtBottom: boolean; /** `true` when the content area is scrolled to (or near) its top edge. */ isAtTop: boolean; } export interface ChatHeaderProps extends ChatSxProps { leftSlot?: ReactNode; title: ReactNode; rightSlot?: ReactNode; onClose?: () => void; } export interface ChatFooterProps extends ChatSxProps { /** Current value of the chat message area. */ value: string; /** Called with the new textarea value on every keystroke. */ onChange: (value: string) => void; /** Called when the send button is clicked or Enter is pressed (without Shift). */ onSend: () => void; /** Called when the stop button is clicked. Only shown while `isGenerating` is true. */ onStop?: () => void; /** When true, swaps the send button for a stop button and disables the textarea. */ isGenerating?: boolean; /** Disables the textarea and both send/stop buttons. */ disabled?: boolean; /** Placeholder text for the textarea. Defaults to `'Type a message...'`. */ placeholder?: string; /** Accessible labels for the send and stop buttons (used as `aria-label`). */ labels?: { /** Defaults to `'Send'`. */ send?: string; /** Defaults to `'Stop'`. */ stop?: string; /** `aria-label` for the model-selector trigger. Defaults to `'Select model'`. */ model?: string; }; /** Helper text rendered under the input. Defaults to an AI disclaimer; pass `null` to hide. */ caption?: ReactNode; /** * Selectable models for the in-toolbar model selector. The selector is only * rendered when this is a non-empty array; the component is otherwise * model-agnostic (the host owns the list, selection, and default). */ models?: ChatModelOption[]; /** Currently selected model `value`. Controlled — the host owns the state. */ selectedModel?: string; /** Called with the picked model `value` when the user selects one. */ onModelChange?: (value: string) => void; /** Extra controls rendered at the start (left) of the toolbar, before the model selector. */ startToolbarSlot?: ReactNode; /** Extra controls rendered at the end (right) of the toolbar, before the send/stop button. */ endToolbarSlot?: ReactNode; } /** An option for the `ChatFooter` model selector. */ export interface ChatModelOption { value: string; label: string; } export interface ChatStarterItem { label: string; color?: string; } export interface ChatStarterProps extends ChatSxProps { icon?: ReactNode; title?: ReactNode; description?: ReactNode; items: string[] | ChatStarterItem[]; size?: 'small' | 'medium'; onSelect?: (prompt: string) => void; } export interface ChatRatingActionProps { onRatingChange?: (rating: 'up' | 'down' | null) => void; rating?: 'up' | 'down' | null; labels?: { thumbUp?: string; thumbDown?: string; }; } export interface ChatToolItem { id: string; name: string; status: 'running' | 'complete' | 'error'; /** Display label shown while status is 'running'. Falls back to a capitalized `name`. */ runningLabel?: string; /** Display label shown for non-running statuses. Falls back to a capitalized `name`. */ label?: string; /** Friendly reference name for the tool (e.g. "add_marker"). Displayed with icon. */ reference?: string; /** Execution duration in seconds (e.g. 1.8) */ duration?: number; /** Input arguments as a JSON string or plain text */ inputArguments?: string; /** Output as a JSON string or plain text */ output?: string; } export interface ChatToolTraceProps extends ChatSxProps { tool: ChatToolItem; /** Whether the trace accordion is expanded */ expanded?: boolean; /** Callback when accordion expansion state changes */ onExpandedChange?: (expanded: boolean) => void; labels?: { toolExecuted?: string; reference?: string; duration?: string; status?: string; inputArguments?: string; output?: string; fullView?: string; success?: string; error?: string; running?: string; }; } export interface ChatToolCodeAreaProps extends ChatSxProps { /** Code content to display */ content: string; /** Label for the full view dialog title */ title?: string; /** Render with error styling (red left border, tinted background) */ isError?: boolean; labels?: { fullView?: string; }; } export interface ChatToolFullViewDialogProps { open: boolean; onClose: () => void; title: string; content: string; } export interface ChatToolGroupProps extends ChatSxProps { tools: ChatToolItem[]; /** Whether the group accordion is expanded */ expanded?: boolean; /** Callback when group expansion state changes */ onExpandedChange?: (expanded: boolean) => void; /** Map of tool IDs to their individual expanded state. Used to preserve expansion state during grouping. */ expandedTools?: Record; /** Callback when an individual tool's expansion state changes */ onToolExpandedChange?: (value: Record, toolId?: string) => void; labels?: ChatToolTraceProps['labels'] & { toolsUsed?: string; }; }