Chat Interface Component
The Chat Interface is the primary way users interact with AI agents in Artifact Chat. It provides a clean, responsive interface for messaging, with support for rich content.
Basic Usage
To implement the chat interface in your application:
import { ChatInterface } from "./components/Chat/ChatInterface";
import { useThreadStore } from "./store/threadStore";
function ChatPage() {
const { activeThread } = useThreadStore();
return (
<div className="flex flex-col h-screen">
<header className="border-b p-4">
<h1 className="text-xl font-semibold">Artifact Chat</h1>
</header>
<main className="flex-1 overflow-hidden">
{activeThread ? (
<ChatInterface threadId={activeThread.id} />
) : (
<div className="flex h-full items-center justify-center">
<p>Select or create a thread to start chatting</p>
</div>
)}
</main>
</div>
);
}
Props
The ChatInterface component accepts the following props:
| Prop | Type | Default | Description |
|---|
threadId | string | Required | ID of the thread to display |
agentId | string | undefined | Optional agent ID to override thread default |
initialMessage | string | undefined | Optional message to send when thread is created |
autoScroll | boolean | true | Whether to auto-scroll to new messages |
className | string | '' | Additional CSS classes |
showThreadTitle | boolean | true | Show the thread title in the header |
Examples
<ChatInterface threadId="thread_12345" />
<ChatInterface threadId="thread_12345" agentId="development-expert" />
<ChatInterface
threadId="thread_12345"
initialMessage="Create a React component for a dropdown menu."
/>
Message Rendering
The Chat Interface handles several types of message content:
- Text: Plain text messages
- Markdown: Rich text with support for headings, lists, etc.
- Code Blocks: Syntax-highlighted code snippets
- Image Attachments: Display of image content
- File Attachments: Links to attached files
- Interactive Elements: Buttons, forms, and other interactive UI
The message rendering is handled by the <MarkdownRenderer> component which is documented separately.
Customization
The Chat Interface can be customized in several ways:
Custom Styling
You can customize the appearance using Tailwind CSS classes:
<ChatInterface
threadId="thread_12345"
className="bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg"
/>
Custom Message Renderer
You can provide your own message renderer component:
import { ChatInterface } from "./components/Chat/ChatInterface";
import { CustomMessageRenderer } from "./components/CustomMessageRenderer";
function CustomChat() {
return (
<ChatInterface
threadId="thread_12345"
messageRenderer={(message) => (
<CustomMessageRenderer
key={message.id}
message={message}
// Custom props
highlightCode={true}
showTimestamp={true}
/>
)}
/>
);
}
- Text Formatting: Basic markdown formatting
- File Attachments: Upload and attach files
- Code Snippets: Special handling for code
- Command Palette: Quick commands via / prefix
- Mentions: @mentions for referencing items
Mobile Responsiveness
The Chat Interface is fully responsive and works well on mobile devices:
- Adapts layout for smaller screens
- Supports touch interactions
- Adjusts input methods for mobile
- Handles keyboard appearance on mobile devices
Accessibility
The Chat Interface includes several accessibility features:
- Proper ARIA roles and labels
- Keyboard navigation support
- Screen reader compatibility
- High contrast mode support
- Focus management for new messages
For optimal performance when using the Chat Interface:
- Virtualization: Messages are virtualized to handle large threads
- Lazy Loading: Images and attachments load lazily
- Debounced Input: Input events are debounced
- Memoization: Components use React.memo to prevent unnecessary re-renders
For very long threads (1000+ messages), consider implementing pagination or
infinite scrolling.
API Integration
The Chat Interface integrates with the Artifact Chat API through the thread store:
// This is handled automatically by the ChatInterface component
import { useThreadStore } from "./store/threadStore";
function sendMessage(threadId, content) {
const { sendMessage } = useThreadStore();
sendMessage(threadId, content);
}
Events
The Chat Interface emits the following events:
| Event | Description |
|---|
onMessageSent | Triggered when a message is sent |
onMessageReceived | Triggered when a message is received |
onError | Triggered when an error occurs |
onTypingStart | Triggered when the AI starts typing |
onTypingEnd | Triggered when the AI stops typing |
- Images - Image generation and analysis tools
- Web - Internet search and web scraping tools
- Knowledge - Information retrieval tools
- Data - Data visualization and analysis tools
- Code - Code execution and analysis tools
- Files - File management tools
- Context7 - Documentation access tools
- Firecrawl - Advanced web scraping tools
- Binance - Cryptocurrency market data tools
- Gmail - Email management tools
- GitHub - Repository management tools
- Reddit - Reddit interaction tools
- Sequential Thinking - Step-by-step reasoning tools
- Google Drive - Document management tools
- Slack - Workspace communication tools
- Accessing Tools: Click the toolbox icon in the chat input area to open the ToolBox
- Browsing Categories: Expand categories to view available tools
- Activating Tools: Toggle tools on/off by clicking them
- Active Tool Indicator: Currently active tools appear highlighted and are displayed as icons in the chat input
Some tools require authentication or specific permissions:
- Google Drive: Requires Google account authorization
- Gmail: Requires email account access
- GitHub: Requires GitHub account authorization
- Slack: Requires Slack workspace authorization
The ToolBox will prompt for necessary permissions when activating these tools.
Tools can be used in two ways:
- AI-Initiated: The assistant automatically uses appropriate tools based on your query
- User-Prompted: You can specifically ask the assistant to use a particular tool
For more information on available tools and their capabilities, see the Tool Library documentation.