Chat
Chat UI component and customization
Chat Package
Pre-built chat UI component with full customization support.
npm install @yourgpt/copilot-sdk-chatCopilotChat
The main chat component.
import { CopilotChat } from '@yourgpt/copilot-sdk-chat';
<CopilotChat
title="AI Assistant"
placeholder="Ask anything..."
suggestions={['Help me', 'Search']}
className="h-full"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "AI Assistant" | Header title |
placeholder | string | "Type a message..." | Input placeholder |
suggestions | string[] | [] | Quick action buttons |
className | string | - | Additional CSS classes |
toolRenderers | Record<string, Component> | {} | Custom tool result renderers |
attachmentsEnabled | boolean | false | Enable file attachments |
voiceEnabled | boolean | false | Enable voice input |
toolRenderers
Render custom UI for tool results:
<CopilotChat
toolRenderers={{
weather: ({ result, status }) => (
<WeatherCard data={result} loading={status === 'executing'} />
),
chart: ({ result }) => (
<BarChart data={result.data} />
),
}}
/>ToolRendererProps
interface ToolRendererProps<T = unknown> {
name: string;
args: Record<string, unknown>;
result: T;
status: 'pending' | 'executing' | 'completed' | 'error';
error?: string;
}Theming
<CopilotChat
theme={{
mode: 'dark',
primaryColor: '#6366f1',
backgroundColor: '#1f2937',
borderRadius: '12px',
}}
/>Custom Styling
<CopilotChat
classNames={{
container: 'my-container',
header: 'my-header',
messages: 'my-messages',
input: 'my-input',
}}
/>