AI Chat

Overview

Bring your own model handler and connect it to a ready-made chat workspace. The block handles the responsive conversation UI, streamed text, attachment previews, cancellation, and local chat history.

Features

• Provider-agnostic onSend handler accepts a string or an async stream.
• Streams plain text and code without rendering unfinished Markdown fences as raw text.
• Lets users stop generation, retry errors, and continue typing while a response streams.
• Supports image, document, audio, video, and custom attachment options.
• Includes local chat history with pin, archive, restore, and delete actions.
• Provides a collapsible desktop sidebar and a closed-by-default mobile drawer.
• Includes optional voice input and configurable accent color, attachment count, and response size.

Installation

Choose a package manager to add the complete editable block to components/ai-chat-block. The CLI installs its runtime dependencies and keeps the helper files inside that folder.

React and Tailwind CSS should already be configured in your app. The command installs Motion, Tabler Icons, clsx, and tailwind-merge when they are missing.

Files included

The installer creates one self-contained folder. Each file has one clear role, so you can customize the block without tracking down portfolio-specific imports.

components/ai-chat-block/
├── index.ts
├── ai-chat-block.tsx
├── ai-chat-input.tsx
├── chat-composer.tsx
├── chat-sidebar.tsx
├── message-list.tsx
├── chat-message.tsx
├── message-content.tsx
├── chat-code-block.tsx
├── code-highlighter.tsx
├── attachment.tsx
├── default-attachments.tsx
├── send-button.tsx
├── voice-button.tsx
├── chat-logo.tsx
├── chat-user-avatar.tsx
├── types.ts
├── utils.ts

Connect your chat handler

Import the component and pass an onSend function. It receives the message, selected File objects, and an AbortSignal. Keep provider credentials and model calls in your server endpoint.

import { AiChatBlock } from '@/components/ai-chat-block'
import type { AiChatBlockProps } from '@/components/ai-chat-block'
 
const onSend: AiChatBlockProps['onSend'] = async ({
  message,
  attachments,
  signal,
}) => {
  const body = new FormData()
  body.set('message', message)
  attachments.forEach(({ file }) => body.append('files', file))
 
  const response = await fetch('/api/chat', {
    method: 'POST',
    body,
    signal,
  })
 
  if (!response.ok) throw new Error('The chat request failed.')
  const result = (await response.json()) as { answer: string }
  return result.answer
}
 
export function SupportChat() {
  return (
    <div className="mx-auto w-full max-w-5xl">
      <AiChatBlock
        title="Support assistant"
        assistantName="ISTMX AI"
        userName="You"
        accentColor="#0369a1"
        maxResponseCharacters={40_000}
        onSend={onSend}
      />
    </div>
  )
}

Return a live response

Return an async iterable of text chunks to stream a response. The block renders text as it arrives and passes the same abort signal through so Stop can cancel your provider request.

import type { AiChatBlockProps } from '@/components/ai-chat-block'
 
async function* decodeTextStream(
  body: ReadableStream<Uint8Array>,
): AsyncGenerator<string> {
  const reader = body.getReader()
  const decoder = new TextDecoder()
 
  try {
    while (true) {
      const { done, value } = await reader.read()
      if (done) break
      const text = decoder.decode(value, { stream: true })
      if (text) yield text
    }
    const remaining = decoder.decode()
    if (remaining) yield remaining
  } finally {
    reader.releaseLock()
  }
}
 
const onSend: AiChatBlockProps['onSend'] = async ({ message, attachments, signal }) => {
  const body = new FormData()
  body.set('message', message)
  attachments.forEach(({ file }) => body.append('files', file))
  const response = await fetch('/api/chat/stream', { method: 'POST', body, signal })
  if (!response.ok) throw new Error('The chat request failed.')
  return response.body ? decodeTextStream(response.body) : response.text()
}

Adapt your SDK’s chunk shape to strings or ChatStreamChunk objects before yielding. For a short visible activity status, yield a thinking-delta chunk; do not forward private model reasoning.

Configure attachments

Use the default image, document, audio, and video options, or pass your own list to control accepted file types and selection behavior.

import {
  AiChatBlock,
  DEFAULT_ATTACHMENT_OPTIONS,
} from '@/components/ai-chat-block'
import type { AiChatBlockProps, AttachmentOption } from '@/components/ai-chat-block'
 
const attachmentOptions: AttachmentOption[] =
  DEFAULT_ATTACHMENT_OPTIONS.filter((option) => option.id !== 'video')
 
export function SupportChat({ onSend }: { onSend: AiChatBlockProps['onSend'] }) {
  return (
    <AiChatBlock
      attachmentOptions={attachmentOptions}
      maxAttachments={5}
      maxFileSizeBytes={10 * 1024 * 1024}
      onSend={onSend}
    />
  )
}

How it works

The onSend callback receives the message, selected attachments, and an AbortSignal. It can return a complete string or an async iterable of text chunks. Yield thinking-delta or reasoning-delta chunks only when you have a short, user-facing activity update to show.

Composition

AiChatBlock
├── ChatSidebar
│   ├── Pinned conversations
│   ├── Recent conversations
│   └── Account profile
├── MessageList
│   └── ChatMessage
│       ├── ThinkingDisclosure
│       ├── MessageContent
│       └── AttachmentPreviews
└── ChatComposer
    ├── AttachmentDialog
    ├── VoiceButton
    └── SendButton / Stop

API reference

The listed props reflect the current block interface.

Accessibility and limitations

Uses native controls and labels, supports keyboard operation, exposes streaming status, respects reduced motion, and keeps attachment and chat-history actions available without hover on touch screens.

Conversation history is held in component state and is cleared when the page reloads. Connect a server-side store to persist conversations. Model credentials and provider calls belong in your application handler, not in the browser-facing component.