Components API

Diagram

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

Architecture

Components

Below is the API for the components.

Chat

Prop	Description	Default
`style`	The style to apply to the root element. `CSSProperties`
`className`	The class name to apply to the root element. `string`
`viewType`	The type of prompt to display. - Companion: Smaller prompt screen with session lists. - Console: Full screen experience. - Chat: Only chat, no sessions. `ChatViewType`	`console`
`sessions` *	The list of sessions to display. `Session[]`
`activeSessionId`	The ID of the currently active session. `string`
`theme`	Custom theme for the chat. `ChatTheme`
`remarkPlugins`	Remark plugins to apply to the request/response. `PluggableList[]`	`[remarkGfm, remarkYoutube, remarkMath]`
`isLoading`	Whether to display a loading state. `boolean`
`disabled`	Whether to disable the chat. `boolean`
`onSelectSession`	Callback function to handle when a session is selected. `(sessionId: string) => void`
`onDeleteSession`	Callback function to handle when a session is deleted. `(sessionId: string) => void`
`onNewSession`	Callback function to handle creating a new session. `() => void`
`onSendMessage`	Callback function to handle sending a new message. `(message: string) => void`
`onStopMessage`	Callback function to handle stopping the current action. `() => void`
`onFileUpload`	Callback function to handle file upload. `(file: File) => void`

ChatInput

Prop	Description	Default
`defaultValue`	Default value for the input field. `string`
`allowedFiles`	Allowed file types for upload. `string[]`
`placeholder`	Placeholder text for the input field. `string`
`sendIcon`	Icon to show for send. `ReactElement<any, string \| JSXElementConstructor<any>>`	`<SendIcon />`
`stopIcon`	Icon to show for send. `ReactElement<any, string \| JSXElementConstructor<any>>`	`<StopIcon />`
`attachIcon`	Icon to show for attach. `ReactElement<any, string \| JSXElementConstructor<any>>`

SessionList

Prop	Description	Default

SessionListItem

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

SessionGroups

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

SessionGroup

Prop	Description	Default

NewSessionButton

Prop	Description	Default
`newSessionText`	Text for the new session button. `ReactNode`	`New Session`

SessionMessages

Prop	Description	Default
`newSessionContent`	Content to display when there are no sessions selected or a new session is started. `ReactNode`
`limit`	Limit the number of results returned. Clientside pagination. `number`	`10`
`showMoreText`	Text to display for the show more button. `string`	`Show more`
`children`	Render function for the session messages. `(conversations: Conversation[]) => ReactNode`

SessionMessage

Prop	Description	Default
`conversation` *	Conversation to render. `Conversation`
`isLast`	Whether the message is the last one in the list. This let's the chat know when to show the loading cursor. `boolean`

SessionMessagePanel

Prop	Description	Default

SessionMessagesHeader

Prop	Description	Default

SessionEmpty

Prop	Description	Default

MessageSources

Prop	Description	Default
`sources` *	Sources to render. `ConversationSource[]`

MessageSource

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

MessageActions

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

MessageQuestion

Prop	Description	Default
`question` *	Question to render. `string`
`files`	Array of sources referenced in the conversation `ConversationFile[]`

MessageResponse

Prop	Description	Default
`response` *	Response to render. `string`
`isLoading`	Whether the response is loading. `boolean`

MessageFiles

Prop	Description	Default
`files` *	Files to render. `ConversationFile[]`

MessageFile

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

Models 📓 ⏐ Changelog