ComponentsAgent patterns

Chat Input

The message box of a chat. Type @ to tag an agent, /to add a skill, or # to add a file. Markdown and shortcuts format text. The bar holds attach and mode menus, a project picker, a model picker, and send.

Chat input

Type @ for agents, / for skills, or # for files. ** makes bold, _ makes italic, and links and emails turn into links. + adds files, the sliders pick a mode, and the model sits by send. Starter prompts show under an empty box.

Nothing has been sent.

With attachments

Attached files show as chips above the message. Click one to view it, hover to peek, × removes it.

Nothing has been sent.

Working

While a reply streams, send turns into stop and the placeholder says the agent is working.

Nothing has been sent.

Usage

import { ChatInput } from "@tulipfarm/sprout/chat-input";

<ChatInput
  value={value}
  onValueChange={setValue}
  onSend={send}
  onStop={stop}
  status={streaming ? "streaming" : "idle"}
  agents={(query) => searchAgents(query)}
  skills={(query) => searchSkills(query)}
  files={(query) => searchFiles(query)}
  attachments={attachments}
  onRemoveAttachment={remove}
  attachActions={[{ id: "computer", label: "Upload from computer", onSelect: pickFiles }]}
  modes={[
    { id: "plan", label: "Plan", color: "#3b9ef5" },
    { id: "research", label: "Deep research", color: "#6366f1" },
  ]}
  mode={mode}
  onModeChange={setMode}
  projects={projects}
  project={project}
  onProjectChange={setProject}
  models={[{ id: "opus", label: "Claude Opus 5.5", brand: "claude" }]}
  model={model}
  onModelChange={setModel}
  prompts={[{ id: "clarify", label: "Clarify user problem" }]}
/>

value is a Tiptap JSON document. Tags arechatReference nodes with kind, id, andlabel. A trigger is on only when its source is set. A source may return a promise. Leave out a menu or picker and its button goes away. Give a mode a color (any CSS color) to tint the box border, the mode chip, and its menu icon while that mode is on.

Keyboard

Enter sends and Shift+Enter adds a line. In the panel, ↓ and ↑ move, Enter orTab adds, and Escape closes. ⌘B is bold,⌘I is italic, and ⌘K turns a selected URL or email into a link, or removes a link.