Skip to main content

Common components

Generic chat and content primitives. They take primitive props and have no runtime dependency on @flow-state-dev/*, so you can use them outside a flow as well as inside one.

Conversation​

Container for message threads with auto-scroll and stick-to-bottom behavior.

fsdev ui add conversation
import { Conversation } from "@/components/flow-state/conversation";

<Conversation>
  {/* messages */}
</Conversation>

Message​

Individual message display with streaming Markdown rendering. Accepts either primitive props (role, content) or a Flow State MessageItem directly.

fsdev ui add message
import { Message } from "@/components/flow-state/message";

<Message role="assistant" content="Hello!" isStreaming />

PromptInput​

Smart input with auto-resize, file upload, and submit handling. Designed to drive sendAction but works with any submit handler.

fsdev ui add prompt-input

Reasoning​

Expandable reasoning/thinking display with streaming awareness. Collapses by default and reveals on click.

fsdev ui add reasoning

Tool​

Rich tool invocation display: arguments, result, status, and Claude-Code-style grouping for consecutive calls. Pairs with the tool-grouping utility for collapsing repeated calls.

fsdev ui add tool

CodeBlock​

Syntax-highlighted code with a copy action and dual-theme support.

fsdev ui add code-block

Sources​

Citation and source display with a collapsible list and favicons. Use <SourcesGroup> to render sources as a single grouped panel after a message thread.

fsdev ui add sources

Suggestion​

Horizontal scrollable suggestion pills. Useful for "did you mean" hints or canned follow-ups.

fsdev ui add suggestion

Shimmer​

Animated text shimmer for loading and in-progress states. Used internally by Status and StreamingIndicator.

fsdev ui add shimmer

StreamingIndicator​

Thinking indicator shown before assistant content arrives. Shows up between the user's message and the first streamed token.

fsdev ui add streaming-indicator

Status​

Status message display with a shimmer animation for in-progress states. Renders the current request status slot.

fsdev ui add status

Error​

Error and step-error display with a recoverable / fatal distinction. Pairs with ErrorItem from the item stream.

fsdev ui add error