Colloquy
Agent chat panel composing the AI set — a role="log" transcript of right-aligned user bubbles and unbubbled assistant turns (thinking disclosure, inline tool-call cards on a progress spine, an inline approval request, a streamed answer) above a pinned prompt composer. Auto-scroll follows the stream only while you're at the bottom; scrolling up detaches it behind a spring-in "Jump to latest" pill. Empty-state greeting with suggestion chips, rise-in messages, and a seeded useScriptedConversation hook that waits on approvals. Instant scroll and fades under reduced motion.
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/colloquyManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| messages | ColloquyMessage[] | [] | The controlled transcript, oldest first. An empty list shows the greeting and suggestions. |
| onSend | (text: string) => void | Fires with the trimmed text when the user sends a message (Enter, the send button, or a suggestion in "send" mode). | |
| busy | boolean | false | The assistant is working: the composer shows a stop button and blocks Enter. |
| onStop | () => void | Fires from the composer's stop button or Escape while busy. | |
| suggestions | string[] | Suggestion chips shown in the empty state. Pass [] to hide them. | |
| suggestionAction | "fill" | "send" | "fill" | What clicking a suggestion does: "fill" puts it in the composer, "send" sends it right away. |
| greeting | React.ReactNode | "How can I help?" | Heading of the empty state. |
| placeholder | string | "Ask anything…" | Composer placeholder. |
| draft | string | Controlled composer draft. Pair with onDraftChange. | |
| defaultDraft | string | "" | Initial composer draft when uncontrolled. |
| onDraftChange | (draft: string) => void | Fires with the next draft on every edit and when a suggestion fills the composer. | |
| composerProps | Omit< SluiceProps, "value" | "defaultValue" | "onValueChange" | "onSubmit" | "busy" | "onStop" | "placeholder" | "accentColor" > | Extra props for the underlying Sluice composer (e.g. models, hideAttach={false}). | |
| followThreshold | number | 48 | How far from the bottom (px) still counts as "following the stream". |
| accentColor | string | "#a78bfa" (ion violet) | Accent for the composer, streaming caret, tool spine, approval button and focus rings. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"section">, "children" | "onSubmit"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.