Streaming Response

A streaming AI response surface with sources and feedback actions - copy, retry, thumbs, and a citations disclosure via agent-disclosure.

Streaming

Tokens stream in while status="streaming", then actions and sources appear. Replay remounts.

Loading…

Installation

CLI

npx @sonojs/ui@latest add streaming-response

Also needs

npx @sonojs/ui@latest add agent-disclosure citations

npm i lucide-react motion

Usage

streaming-response.tsx

import { StreamingResponse } from "@/components/sonojs/streaming-response"

export function Example() {
  return (
    <StreamingResponse
      status="complete"
      copyText="Hello from Sono"
      sources={[
        {
          id: "docs",
          title: "SonoJS Docs",
          domain: "sonojs.com",
          url: "https://sonojs.com",
        },
      ]}
    >
      <p>Hello from Sono</p>
    </StreamingResponse>
  )
}

Props

Prop	Type	Default	Description
children	ReactNode	-	Response body (text or rendered markdown).
status	"streaming" · "complete" · "error"	"streaming"	Controls busy state and when actions appear.
copyText / onCopy	string / () => void	-	Enables the copy action.
onRetry	() => void	-	Shows a retry control when provided.
sources	CitationItem[]	[]	Optional footer sources stack + list.
feedback / onFeedbackChange	"up" · "down" · null	null	Thumbs up/down after complete.
showActions	boolean	true	Hide the action row without changing status.
announce	boolean	true	aria-live polite on the content region.
className	string	-	Optional class names on the root.