Components API

Diagram

Below is a diagram of the components that make up the package.

Architecture

Root

Chat

Name	Type	Default
`style`	`CSSProperties` The style to apply to the root element.
`className`	`string` The class name to apply to the root element.
`viewType`	`ChatViewType` The type of prompt to display. Companion: Smaller prompt screen with session lists. Console: Full screen experience. Chat: Only chat, no sessions.	`'console'`
`sessions`	`Session[]` The list of sessions to display.
`activeSessionId`	`string` The ID of the currently active session.
`theme`	`ChatTheme` Custom theme for the chat.	`chatTheme`
`remarkPlugins`	`Plugin[]` Remark plugins to apply to the request/response.	`defaultRemarkPlugins`
`markdownComponents`	`Components` Custom markdown components to override default rendering. Use this to add support for custom elements like charts.
`components`	`ComponentCatalog` A component catalog created via `componentCatalog()`. Enables dynamic component rendering from LLM responses using fenced code blocks (e.g. ```component). This automatically wires in the necessary remark plugin and markdown component overrides. For advanced control, use the catalog’s `remarkPlugin` and `components` properties directly via the `remarkPlugins` and `markdownComponents` props instead.
`isLoading`	`boolean` Whether to display a loading state.
`disabled`	`boolean` Whether to disable the chat.
`onSelectSession`	`(sessionId: string) => void` Callback function to handle when a session is selected.
`onDeleteSession`	`(sessionId: string) => void` Callback function to handle when a session is deleted.
`onNewSession`	`() => void` Callback function to handle creating a new session.
`onSendMessage`	`(message: string) => void` Callback function to handle sending a new message.
`onStopMessage`	`() => void` Callback function to handle stopping the current action.
`onFileUpload`	`(file: File) => void` Callback function to handle file upload.

AppBar

Name	Type	Default
`content`	`ReactNode` Content to display in the header
`theme`	`ChatTheme` Custom theme for the appbar	`chatTheme`

ChatBubble

Name	Type	Default
`children`	`ReactNode` The main content to be rendered.
`bubbleContent`	`ReactNode` The content to be rendered in the trigger bubble.
`position`	`Placement` The position of the chat bubble on the screen.	`'right-end'`
`modifiers`	`Modifiers` Custom position modifiers.	`[offset({ mainAxis: 0, crossAxis: -40 })]`
`className`	`string` Additional CSS classes to apply to the chat bubble.

Sessions

SessionsList

Name	Type	Default
`templates`	`Template[]` Templates to show when no session is active

NewSessionButton

Name	Type	Default
`newSessionText`	`ReactNode` Text for the new session button.	`'New Session'`

SessionGroups

Name	Type	Default
`children`	`(groups: GroupedSessions[]) => ReactNode` Render function for the session groups.

SessionsGroup

Name	Type	Default
`heading`	`ReactNode` Heading for the session group.

SessionListItem

Name	Type	Default
`session`	`Session` Session to display.
`deletable`	`boolean` Indicates whether the session is deletable.	`true`
`deleteIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to show for delete.	`<TrashIcon />`
`chatIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to show for chat.	`<ChatIcon className="mr-2" />`
`limit`	`number` Limit for the ellipsis.	`100`

Messages

SessionMessages

Name	Type	Default
`className`	`string` Class name to apply to the root element.
`newSessionContent`	`ReactNode` Content to display when there are no sessions selected or a new session is started.
`limit`	`number \| null` Limit the number of results returned. Clientside pagination.	`10`
`showMoreText`	`string` Text to display for the show more button.	`'Show more'`
`autoScroll`	`boolean` Whether to automatically scroll to the bottom of the content.	`true`
`showScrollBottomButton`	`boolean` Whether to display the scroll to bottom button.
`children`	`(conversations: Conversation[]) => ReactNode` Render function for the session messages.
`showLoadMoreButton`	`boolean` Whether to show the load more button.	`false`
`loadMoreButtonDisabled`	`boolean` Whether to disable the load more button.
`onScroll`	`UIEventHandler<HTMLDivElement>` Scroll event handler.
`onLoadMore`	`() => void` Load more event handler.

SessionMessage

Name	Type	Default
`className`	`string` Class name to apply to the root element.
`conversation`	`Conversation` Conversation to render.
`isLast`	`boolean` Whether the message is the last one in the list. This let’s the chat know when to show the loading cursor.

SessionMessagePanel

Name	Type	Default
`allowBack`	`boolean` Whether to show the back button to return to the session list in compact mode.	`true`

SessionMessagesHeader

Name	Type	Default

SessionEmpty

Name	Type	Default

MessageQuestion

Name	Type	Default
`question`	`string` Question to render.
`files`	`ConversationFile[]` Array of sources referenced in the conversation

MessageResponse

Name	Type	Default
`response`	`string` Response to render.
`isLoading`	`boolean` Whether the response is loading.

MessageActions

Name	Type	Default
`question`	`string` Question to be copied
`response`	`string` Response to be copied
`copyIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to show for copy.
`thumbsUpIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to show for thumbs up.
`thumbsDownIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to show for thumbs down.
`refreshIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to show for refresh.
`onCopy`	`() => void` Callback function to handle copying.
`onUpvote`	`() => void` Callback function to handle upvoting.
`onDownvote`	`() => void` Callback function to handle downvoting.
`onRefresh`	`() => void` Callback function to handle refreshing.

MessageSources

Name	Type	Default
`sources`	`ConversationSource[]` Sources to render.

MessageSource

Name	Type	Default
`limit`	`number` Limit for the title.
`url`	`string` URL of the source, if applicable
`title`	`string` Title or description of the source
`image`	`string` Image URL of the source, if applicable.

MessageFiles

Name	Type	Default
`files`	`ConversationFile[]` Files to render.

MessageFile

Name	Type	Default
`fileIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to show for delete.
`limit`	`number` Limit for the name.
`name`	`string` Name of the file
`type`	`string` Type of the file
`size`	`number` Size of the file
`url`	`string` URL of the file

Input

ChatInput

Name	Type	Default
`defaultValue`	`string` Default value for the input field.
`allowedFiles`	`string[]` Allowed file types for upload.
`allowMultipleFiles`	`boolean` Allow multiple file uploads.	`false`
`placeholder`	`string` Placeholder text for the input field.	`'Type a message...'`
`sendIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to show for send.	`<SendIcon />`
`stopIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to show for stop.	`<StopIcon />`
`attachIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to show for attach.
`mentions`	`SuggestionConfig<MentionItem>` Configuration for mentions (@user). Provide items or an onSearch function to enable mentions.
`className`	`string` Class name to apply to the container.
`commands`	`SuggestionConfig<SlashCommandItem>` Configuration for commands (/command). Provide items or an onSearch function to enable commands.
`minHeight`	`number` Minimum height for the input.	`24`
`maxHeight`	`number` Maximum height for the input.	`200`
`autoFocus`	`boolean` Whether to auto-focus the input on mount.	`true`
`onMessageChange`	`(message: string) => void` Callback function to handle message change.

RichTextInput

Name	Type	Default
`value`	`string` Current value of the input	`''`
`placeholder`	`string` Placeholder text when empty	`'Type a message...'`
`disabled`	`boolean` Whether the input is disabled	`false`
`autoFocus`	`boolean` Whether to auto-focus on mount.	`true`
`className`	`string` Additional CSS classes
`minHeight`	`number` Minimum height in pixels.	`24`
`maxHeight`	`number` Maximum height in pixels.	`200`
`mentions`	`SuggestionConfig<SuggestionItem>` Configuration for @ mentions
`commands`	`SuggestionConfig<SuggestionItem>` Configuration for / slash commands
`onSubmit`	`(value: string) => void` Callback when user submits (presses Enter)
`onChange`	`(value: string) => void` Callback when input value changes

MentionList

Name	Type	Default
`items`	`SuggestionItem[]` List of suggestion items to display
`command`	`(item: { id: string; label: string; }) => void` Callback to execute the selected suggestion command
`triggerChar`	`string` The trigger character (e.g., ’@’ or ’/’)
`config`	`SuggestionConfig<SuggestionItem>` Configuration for the suggestion popup
`query`	`string` Current search query text

FileInput

Name	Type	Default
`allowedFiles`	`string[]` Array of allowed file extensions.
`multiple`	`boolean` Allow multiple file uploads.
`isLoading`	`boolean` Indicates whether a file upload is in progress.
`disabled`	`boolean` Disables the file input when true.
`attachIcon`	`ReactNode` Custom icon for the attach button.
`onFileUpload`	`(event: ChangeEvent<HTMLInputElement, Element>) => void` Callback function triggered when a file is selected.

Suggestions

ChatSuggestions

Name	Type	Default
`suggestions`	`Suggestion[]` Array of suggestions to display.
`className`	`string` Custom class name to apply to the container.
`onSuggestionClick`	`(suggestion: string) => void` Callback when a suggestion is clicked.
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Custom render function for each suggestion item. Receives the suggestion data and onClick handler.

ChatSuggestion

Name	Type	Default
`onClick`	`(suggestion: string) => void` Callback when the suggestion is clicked.
`id`	`string` Unique identifier for the suggestion
`content`	`string` The display text for the suggestion

Status

MessageStatus

Name	Type	Default
`status`	`MessageStatusState` Current status state.	`'loading'`
`text`	`string` Main status text to display.
`steps`	`MessageStatusStep[]` Optional sub-steps to display.
`icon`	`ReactNode` Custom icon to display. If not provided, uses default icons based on status.
`className`	`string` Additional CSS class name.

MessageStatusItem

Name	Type	Default
`step`	`MessageStatusStep` The step to display.

StatusIcon

Name	Type	Default
`state`	`MessageStatusState` Current state of the status icon.
`className`	`string` Additional CSS class name for the icon container.
`colorClassName`	`string` CSS class name for the icon color based on state.

Markdown

Markdown

Name	Type	Default
`remarkPlugins`	`Plugin[]` Remark plugins to apply to the markdown content.
`rehypePlugins`	`Plugin[]` Rehype plugins to apply to the markdown content.	`[rehypeRaw, rehypeKatex]`
`theme`	`ChatTheme` Theme to apply to the markdown content.
`customComponents`	`Components` Custom components to override default markdown rendering. These will be merged with the default components.

CodeHighlighter

Name	Type	Default
`className`	`string` The class name to apply to the code block.
`inlineClassName`	`string` The class name to apply to the inline code.
`language`	`string` The language of the code block.
`copyClassName`	`string` The class name to apply to the copy button.
`toolbarClassName`	`string` The class name to apply to the toolbar.
`copyIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to show for copy.	`<CopyIcon />`
`theme`	`Record<string, string>` The theme to use for the code block.	`dark`

TableComponent

Name	Type	Default

TableHeaderCell

Name	Type	Default

TableDataCell

Name	Type	Default

Component Catalog

ComponentRenderer

Name	Type	Default
`raw`	`string` The raw JSON string from the ```component code block.
`definitions`	`ComponentDefinitions` The component definitions from the catalog.
`options`	`ComponentCatalogOptions` Optional catalog options (for onError callback).

ComponentError

Name	Type	Default
`variant`	`"error" \| "warning"` The visual style variant of the error display. Defaults to ‘error’.
`title`	`string` The heading text displayed at the top of the error.
`message`	`string` The descriptive message explaining the error or warning.
`code`	`string` The raw code or data that caused the error, displayed in a code block.

ChartRenderer

Name	Type	Default
`config`	`ChartConfig` The chart configuration.
`className`	`string` The class name to apply to the chart container.

File Renderers

MessageFile routes attachments to one of these renderers based on the file’s MIME type. They are also exported individually if you want to compose your own file UI.

ImageFileRenderer

Name	Type	Default
`name`	`string` Name of the file.
`url`	`string` URL of the file.

CSVFileRenderer

Name	Type	Default
`name`	`string` Name of the file.
`url`	`string` URL of the file.
`fileIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to for file type.

PDFFileRenderer

Name	Type	Default
`name`	`string` Name of the file.
`url`	`string` URL of the file.
`fileIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to for file type.

DefaultFileRenderer

Name	Type	Default
`limit`	`number` Limit for the name.
`name`	`string` Name of the file.
`url`	`string` URL of the file.
`fileIcon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to for file type.

Models 📓 ⏐ Changelog