Streaming Text

Install: npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/streaming-text.json

When to use

Animate a prepared answer with citations and follow-up suggestions.

Key props and data

Native prop	Meaning
`content`	An array of text tokens; cite tokens use the first supplied source.
`sources`	Each source supplies name, domain, href and image.
`followUps`	Suggested prompts shown after the timed stream ends.
`loop`	Use false in a real conversation to avoid restarting the answer.
`onDone`	Emitted once when a non-looping run finishes.
`onFollowUp`	Receives the selected text and its array index.

Interaction and state checks

Test completion, source expansion and choosing a follow-up. If content changes to a different answer, remount with a stable answer key to restart the local token counter.

Integration boundaries

It does not connect to SSE or an AI API. Citations are not individually mapped to different sources; do not advertise that mapping.

The runnable usage and source reference below preserve the native API. These practical guides do not claim a full translation of upstream prose.

Runnable usage

Install a complete example below first, then import its installed entry. Parameterized example source, shared helpers, native components and CSS are included; no manual relative-import edits are required.

import Demo from '@/components/beautiful-ui/examples/presets/streaming-text-with-citations';
import '@/styles/beautiful-ui.css';
export default function Example() { return <Demo />; }

Preview states

Default, With citations, Without citations

Demo state and mock data do not provide a backend service. Inspect the component props before wiring real data.

Streamed answer with inline sources, actions, and follow-ups.

Complete example installation

These are runnable native states and parameterized usage scenarios, not additional components. Each bundle includes its source closure, helpers, pinned dependencies, independent CSS and licenses. Scenario names are not new native component props; consult the source API below.

Default

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/streaming-text/streaming-text-default.json

Default import: @/components/beautiful-ui/examples/presets/streaming-text-default

Dependencies: clsx@2.1.1, tailwind-merge@3.6.0, shadow-plugin@2.1.1

With citations

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/streaming-text/streaming-text-with-citations.json

Default import: @/components/beautiful-ui/examples/presets/streaming-text-with-citations

Dependencies: clsx@2.1.1, tailwind-merge@3.6.0, shadow-plugin@2.1.1

Without citations

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/streaming-text/streaming-text-without-citations.json

Default import: @/components/beautiful-ui/examples/presets/streaming-text-without-citations

Dependencies: clsx@2.1.1, tailwind-merge@3.6.0, shadow-plugin@2.1.1

Initialize Tailwind CSS v4, import beautiful-ui.css once and synchronize theme with the host html dark class. Examples read html lang for Chinese/English and do not supply backend, authentication or recording. Network/clipboard availability still depends on the browser.

Source-backed parameter reference

Implementation signatures and types are generated from the pinned local source. Optional props, native inherited types, union branches and never exclusions are preserved. A forwardRef implementation's ref is a React reference, not an additional business prop.

StreamingText({
  content = TOKENS,
  sources = SOURCES,
  followUps = FOLLOW_UPS,
  labels,
  loop = true,
  fill = false,
  onDone,
  onFollowUp,
}: {
  variant?: string;
  /** the streamed tokens; `cite` tokens render an inline source chip */
  content?: StreamingToken[];
  /** cited sources shown in the chip, avatar stack, and expanded list */
  sources?: StreamingSource[];
  /** follow-up prompt suggestions shown once the stream completes */
  followUps?: string[];
  /** prominent copy strings */
  labels?: Partial<StreamingLabels>;
  /** restart the stream after a hold; turn off when embedding in a real thread */
  loop?: boolean;
  /** fill the parent width instead of the gallery's fixed measure */
  fill?: boolean;
  onDone?: () => void;
  /** fired when a follow-up prompt is chosen */
  onFollowUp?: (text: string, index: number) => void;
} = {})

export type StreamingToken = { text: string; cite?: boolean };

export type StreamingSource = { name: string; domain: string; href: string; image: string };

export type StreamingLabels = {
  /** label on the collapsed sources toggle */
  sources: string;
  /** heading above the follow-up prompts */
  followUps: string;
};

Destructuring defaults in source

Only defaults written directly in parameter/props destructuring are listed. Conditional expressions, runtime theme and computed values require source inspection; this is not an exhaustive behavior-default list.

// StreamingText
content = TOKENS

// StreamingText
sources = SOURCES

// StreamingText
followUps = FOLLOW_UPS

// StreamingText
loop = true

// StreamingText
fill = false

Native and external types

External types remain defined by React or native dependencies, not manually expanded into guessed props. The installed version's TypeScript definitions are authoritative.

Partial<StreamingLabels>