​

Chat Interface Component

​

Basic Usage

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

​

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

1. Text: Plain text messages
2. Markdown: Rich text with support for headings, lists, etc.
3. Code Blocks: Syntax-highlighted code snippets
4. Image Attachments: Display of image content
5. File Attachments: Links to attached files
6. Interactive Elements: Buttons, forms, and other interactive UI

​

Customization

​

Custom Styling

<ChatInterface
  threadId="thread_12345"
  className="bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg"
/>

​

Custom Message Renderer

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}
        />
      )}
    />
  );
}

​

Input Options

1. Text Formatting: Basic markdown formatting
2. File Attachments: Upload and attach files
3. Code Snippets: Special handling for code
4. Command Palette: Quick commands via / prefix
5. Mentions: @mentions for referencing items

​

Mobile Responsiveness

• Adapts layout for smaller screens
• Supports touch interactions
• Adjusts input methods for mobile
• Handles keyboard appearance on mobile devices

​

Accessibility

• Proper ARIA roles and labels
• Keyboard navigation support
• Screen reader compatibility
• High contrast mode support
• Focus management for new messages

​

Performance Considerations

1. Virtualization: Messages are virtualized to handle large threads
2. Lazy Loading: Images and attachments load lazily
3. Debounced Input: Input events are debounced
4. Memoization: Components use React.memo to prevent unnecessary re-renders

​

API Integration

// This is handled automatically by the ChatInterface component
import { useThreadStore } from "./store/threadStore";

function sendMessage(threadId, content) {
  const { sendMessage } = useThreadStore();
  sendMessage(threadId, content);
}

​

Events

​

ToolBox Component

​

Tool Organization

• 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

​

Using the ToolBox

1. Accessing Tools: Click the toolbox icon in the chat input area to open the ToolBox
2. Browsing Categories: Expand categories to view available tools
3. Activating Tools: Toggle tools on/off by clicking them
4. Active Tool Indicator: Currently active tools appear highlighted and are displayed as icons in the chat input

​

Tool Permissions

• Google Drive: Requires Google account authorization
• Gmail: Requires email account access
• GitHub: Requires GitHub account authorization
• Slack: Requires Slack workspace authorization

​

Tool Usage

1. AI-Initiated: The assistant automatically uses appropriate tools based on your query
2. User-Prompted: You can specifically ask the assistant to use a particular tool