Skip to content

Chat composer

Nothing sends while a file is still uploading, and you can stop any answer.

Use it when

  • People write to the agent, with or without files attached.
  • Answers stream, and people may need to stop one partway.

Don’t use it when

  • The field searches or filters. Use Input.
  • The form has several fields. Use Field with Input or Textarea.

Before and after

  • trial_balance_monthly.csv552 KBrunning
  • trial_balance_monthly.csv552 KBpassed
Nothing sends while a file is still uploading.

Install

pnpm dlx shadcn@latest add https://tabularui.com/r/chat-composer.json https://tabularui.com/r/app-shell.json https://tabularui.com/r/chat-thread.json

Usage

import { AppShellPanelFooter, AppShellPanelHeader } from '@/components/tabular-ui/components/product/AppShell';import { ChatComposer } from '@/components/tabular-ui/components/product/ChatComposer';import { ChatThread } from '@/components/tabular-ui/components/product/ChatThread'; <AppShellPanelHeader title="Chat" /><ChatThread turns={turns} busy={streaming} /><AppShellPanelFooter>  <ChatComposer onSend={ask} busy={streaming} onStop={stop} /></AppShellPanelFooter>

Set up your app firstChat composer in Storybook