Assistant chat app

import { ChatApp } from '@/components/blocks/chat-01'


<ChatApp />


// Fill a parent that has a height instead of the viewport
<ChatApp height="100%" />


// Your own assistant, models and replies
<ChatApp
  brand={{ name: 'Harbor', logo: <HarborMark /> }}
  models={[
    { id: 'fast', name: 'Harbor Fast', description: 'Quick answers for everyday work' },
    { id: 'deep', name: 'Harbor Deep', description: 'Slower, more careful reasoning' },
  ]}
  user={{ name: 'Sam Lee', plan: 'Team plan' }}
  history={[
    { id: 'launch', title: 'Launch checklist', pinned: true },
    { id: 'retro', title: 'Sprint retro notes' },
  ]}
  navItems={[
    { id: 'home', label: 'Home', icon: <HomeIcon /> },
    { id: 'library', label: 'Saved', icon: <BookmarkIcon /> },
    { id: 'projects', label: 'Projects', icon: <FolderIcon /> },
  ]}
  defaultRoute="home"
  onSend={(message, { chatId, model }) => track('send', { chatId, model: model.id })}
  generateReply={async function* (message, { model, messages, signal }) {
    const response = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ model: model.id, messages }),
      signal,
    })
    const reader = response.body!.pipeThrough(new TextDecoderStream()).getReader()
    while (true) {
      const { value, done } = await reader.read()
      if (done) break
      yield value
    }
  }}
/>