Chat Components

React component props reference for @cadraos/sdk/chat.

AgentChat

All-in-one chat component. The primary way to embed agent conversations.

Prop	Type	Description
agentId	string	Agent UUID to chat with
teamId	string	Team UUID (alternative to agentId)
sessionId	string	Resume an existing session
adapter	ChatAdapter	Custom backend adapter
enableAttachments	boolean	Enable file upload support
showToolCalls	boolean	Show tool call details in messages
welcomeMessage	string \| ReactNode	Initial greeting message
placeholder	string	Input placeholder text
onSessionCreated	(id: string) => void	Callback when session starts
onError	(error) => void	Error handler callback
onImageClick	(url: string) => void	Image click handler
components	MarkdownComponents	Custom markdown renderers
className	string	CSS class for container

ChatConfigProvider

Context provider for shared chat configuration.

tsx

import { ChatConfigProvider, AgentChat } from '@cadraos/sdk/chat';

<ChatConfigProvider
  apiBaseUrl="https://api.example.com"
  tokenProvider={async () => await getToken()}
  orgId={123}
>
  <AgentChat agentId="agent-uuid" />
</ChatConfigProvider>

MessageList

Renders a list of chat messages with auto-scroll.

tsx

<MessageList
  messages={messages}
  isLoading={isStreaming}
  showToolCalls
  onImageClick={(url) => openLightbox(url)}
/>

ChatInput

Message input with auto-resize, file attachments, and submit handling.

tsx

<ChatInput
  onSend={(message) => handleSend(message)}
  placeholder="Ask anything..."
  disabled={isStreaming}
  enableAttachments
/>

MarkdownContent

Renders markdown with syntax highlighting, tables, code blocks, and custom components.

tsx

<MarkdownContent
  content={markdownString}
  components={{
    a: ({ href, children }) => <CustomLink href={href}>{children}</CustomLink>,
    img: ({ src, alt }) => <ZoomableImage src={src} alt={alt} />,
  }}
  urlTransform={(url) => proxyUrl(url)}
  contentTransform={(md) => md.replace(/\[artifact\]/g, '')}
/>

FileDropZone

Drag-and-drop zone for file uploads. Works with useFileAttachments.

tsx

<FileDropZone {...attachments.dropZoneProps}>
  <div>Drop files here or click to upload</div>
</FileDropZone>

ToolCallEntry

Displays tool call details including name, input, output, and images extracted from results.

tsx

<ToolCallEntry
  toolCall={toolCall}
  defaultExpanded={false} // images always visible
/>