Docked chat panel with a VoiceOrb header, a scrolling conversation with streaming cursor and Thinking status, and a composer at the foot. Ships a scripted reply; wire useChatStream for live answers.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/docked-chat-01npx shadcn add @01orbital/docked-chat-01yarn shadcn add @01orbital/docked-chat-01bunx --bun shadcn add @01orbital/docked-chat-01Part of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/blocks/chat/docked-chat-01/index.tsx, as source you own and edit.
import DockedChat01 from "@/components/blocks/chat/docked-chat-01"
export default function Example() {
return <DockedChat01 />
}Docked Chat with Voice Orb is built from 2 parts.
DockedChat01: The docked chat block: a ChatPanel in a 32rem-tall section that opens on a sample question and answer and replies with a scripted message. Swap useScriptedChat for useChatStream to answer from your own chat route.ChatPanel: A chat panel to dock beside a page: a header with an orb and a title, the conversation, and a ChatComposer at the bottom. Before the first message it shows a short prompt. While a reply streams, the orb switches to its speaking motion and a "Thinking" status shows.The docked chat block: a ChatPanel in a 32rem-tall section that opens on a sample question and answer and replies with a scripted message. Swap useScriptedChat for useChatStream to answer from your own chat route.
A chat panel to dock beside a page: a header with an orb and a title, the conversation, and a ChatComposer at the bottom. Before the first message it shows a short prompt. While a reply streams, the orb switches to its speaking motion and a "Thinking" status shows.
The panel fills its parent's height, so give the parent one. className and other props land on the outer aside.
Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: @phosphor-icons/react, cn. The CLI installs them for you.
Registry pieces it installs with it:
buttonfont-geist-monouse-chat-streamChat History Sidebar
Conversation history sidebar with a New conversation button, a search field and a list whose rows rename inline or delete from a dropdown menu. Shows an empty state when nothing matches.
Floating Chat Launcher Widget
Floating chat launcher pill with an Orbital orb that opens a non-modal Base UI dialog: a greeting with suggested prompts, then the conversation and a message input. Ships a scripted preview reply.