Components API
Diagram
Below is a diagram of the components that make up the package.
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 applicablestring | |
title | Title or description of the sourcestring | |
image | Image URL of the source, if applicable.string |
MessageActions
Prop | Description | Default |
---|---|---|
question * | Question to be copiedstring | |
response | Response to be copiedstring | |
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 conversationConversationFile[] |
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 filestring | |
type | Type of the filestring | |
size | Size of the filenumber | |
url | URL of the filestring |