Skip to content

Chat thread

The answer’s space appears when you ask, so it grows in place.

Use it when

  • It’s the conversation in the chat panel: questions, answers, and the agent at work.
  • Answers stream. The answer’s space appears as soon as the question is sent, so the thread doesn’t jump.

Don’t use it when

  • It would sit inside a scrolling panel body. It scrolls itself: put it between the panel’s header and footer.
  • You need a record of what ran. Use Run log row.

Before and after

You:
Did we pay any invoice twice?
AI
Working
You:
Did we pay any invoice twice?
AI
Yes. KUS paid supplier invoice MFL-58821 twice, $48,216.40 each.
The reply shows Working… as soon as you ask, then the answer takes its place.

Install

pnpm dlx shadcn@latest add https://tabularui.com/r/chat-thread.json https://tabularui.com/r/app-shell.json https://tabularui.com/r/chat-composer.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} /></AppShellPanelFooter>

Set up your app firstChat thread in Storybook