|
1 | | -# @stream-md/react |
| 1 | +# streaming-markdown-react |
2 | 2 |
|
3 | | -React component for rendering streaming markdown content with proper handling of incomplete code blocks. |
| 3 | +React components for streaming-safe Markdown and AI chat interfaces. |
| 4 | + |
| 5 | +[](https://www.npmjs.com/package/streaming-markdown-react) |
| 6 | +[](https://www.npmjs.com/package/streaming-markdown-react) |
| 7 | + |
| 8 | +> Prefer Chinese docs? See [README.zh-CN.md](./README.zh-CN.md). |
| 9 | +
|
| 10 | +## Highlights |
| 11 | +- **Streaming-safe rendering**: `useSmoothStream` queues graphemes so partially streamed Markdown never breaks code fences or inline structures. |
| 12 | +- **Shiki-powered code blocks**: `useShikiHighlight` lazy-loads themes and languages, falling back gracefully while syntax highlighting boots. |
| 13 | +- **Message-aware primitives**: `MessageItem`, `MessageBlockRenderer`, and `MessageBlockStore` model complex assistant replies (thinking, tool calls, media, etc.). |
| 14 | +- **Highly customizable**: Extend `react-markdown` via the `components` prop, swap the default `CodeBlock`, or plug in your own themes and callbacks. |
| 15 | +- **Tiny API surface**: Stream text, toggle `status`, and receive `onComplete` when everything has flushed—no heavy state machines required. |
4 | 16 |
|
5 | 17 | ## Installation |
6 | 18 |
|
7 | 19 | ```bash |
8 | | -pnpm add @stream-md/react |
| 20 | +pnpm add streaming-markdown-react |
| 21 | +# or |
| 22 | +npm install streaming-markdown-react |
| 23 | +# or |
| 24 | +yarn add streaming-markdown-react |
9 | 25 | ``` |
10 | 26 |
|
11 | | -## Usage |
| 27 | +## Basic Usage |
12 | 28 |
|
13 | 29 | ```tsx |
14 | | -import { StreamingMarkdown } from '@stream-md/react'; |
| 30 | +import { StreamingMarkdown, StreamingStatus } from 'streaming-markdown-react'; |
15 | 31 |
|
16 | | -function ChatMessage({ content }: { content: string }) { |
17 | | - return <StreamingMarkdown content={content} />; |
| 32 | +export function MessageBubble({ |
| 33 | + text, |
| 34 | + status, |
| 35 | +}: { |
| 36 | + text: string; |
| 37 | + status: StreamingStatus; |
| 38 | +}) { |
| 39 | + return ( |
| 40 | + <StreamingMarkdown |
| 41 | + status={status} |
| 42 | + className="prose prose-neutral max-w-none" |
| 43 | + onComplete={() => console.log('stream finished')} |
| 44 | + > |
| 45 | + {text} |
| 46 | + </StreamingMarkdown> |
| 47 | + ); |
18 | 48 | } |
19 | 49 | ``` |
20 | 50 |
|
21 | | -## API |
| 51 | +Pass the latest chunked Markdown through `children`, keep `status="streaming"` until the LLM closes the stream, and use `onComplete` for follow-up UI work once every queued token is painted. |
| 52 | + |
| 53 | +## Streaming Example |
| 54 | + |
| 55 | +```tsx |
| 56 | +import { useState, useEffect } from 'react'; |
| 57 | +import { StreamingMarkdown, StreamingStatus } from 'streaming-markdown-react'; |
| 58 | + |
| 59 | +export function LiveAssistantMessage({ stream }: { stream: ReadableStream<string> }) { |
| 60 | + const [text, setText] = useState(''); |
| 61 | + const [status, setStatus] = useState<StreamingStatus>('streaming'); |
| 62 | + |
| 63 | + useEffect(() => { |
| 64 | + const reader = stream.getReader(); |
| 65 | + let cancelled = false; |
| 66 | + |
| 67 | + async function read() { |
| 68 | + while (!cancelled) { |
| 69 | + const { value, done } = await reader.read(); |
| 70 | + if (done) { |
| 71 | + setStatus('success'); |
| 72 | + break; |
| 73 | + } |
| 74 | + setText((prev) => prev + (value ?? '')); |
| 75 | + } |
| 76 | + } |
| 77 | + |
| 78 | + read(); |
| 79 | + return () => { |
| 80 | + cancelled = true; |
| 81 | + reader.releaseLock(); |
| 82 | + }; |
| 83 | + }, [stream]); |
| 84 | + |
| 85 | + return ( |
| 86 | + <StreamingMarkdown |
| 87 | + status={status} |
| 88 | + minDelay={12} |
| 89 | + onComplete={() => console.log('assistant block done')} |
| 90 | + > |
| 91 | + {text} |
| 92 | + </StreamingMarkdown> |
| 93 | + ); |
| 94 | +} |
| 95 | +``` |
22 | 96 |
|
23 | | -### Props |
| 97 | +`minDelay` throttles animation frames for high-throughput streams, while `status` flips to `'success'` the moment upstream tokenization ends. |
24 | 98 |
|
25 | | -- `content: string` - Markdown content to render (can be incomplete during streaming) |
26 | | -- `className?: string` - Optional CSS class name |
27 | | -- `components?: Partial<Components>` - Custom react-markdown components |
28 | | -- `onComplete?: () => void` - Callback when streaming completes |
| 99 | +## Components & Hooks |
29 | 100 |
|
30 | | -## Features |
| 101 | +| Export | Description | |
| 102 | +| --- | --- | |
| 103 | +| `StreamingMarkdown` | Streaming-safe Markdown renderer with GFM and overridable components. | |
| 104 | +| `StreamingStatus` | `'idle' \| 'streaming' \| 'success' \| 'error'` helper union for UI state. | |
| 105 | +| `MessageItem` | Splits assistant responses into typed blocks backed by `MessageBlockStore`. | |
| 106 | +| `MessageBlockRenderer` | Default renderer for text, thinking, tool, media, and error blocks. | |
| 107 | +| `MessageBlockStore` | Lightweight in-memory store for diffing and hydrating message blocks. | |
| 108 | +| `useSmoothStream` | Grapheme-level streaming queue powered by `Intl.Segmenter`. | |
| 109 | +| `useShikiHighlight` | Lazy-loaded Shiki highlighter with light/dark themes. | |
| 110 | +| `CodeBlock` | Default code block component; wrap or replace it for custom UI. | |
31 | 111 |
|
32 | | -- ✅ Handles incomplete code blocks during streaming |
33 | | -- ✅ GitHub Flavored Markdown (tables, strikethrough, etc.) |
34 | | -- ✅ Type-safe with TypeScript |
35 | | -- ✅ Zero runtime overhead |
36 | | -- ✅ Customizable rendering via components prop |
| 112 | +## StreamingMarkdown Props |
| 113 | + |
| 114 | +| Prop | Type | Description | |
| 115 | +| --- | --- | --- | |
| 116 | +| `children` | `ReactNode` | Markdown (partial or complete) to render. | |
| 117 | +| `className` | `string` | Utility classes for the container. | |
| 118 | +| `components` | `Partial<Components>` | Extend/override `react-markdown` element renderers. | |
| 119 | +| `status` | `StreamingStatus` | Controls the internal streaming lifecycle. | |
| 120 | +| `onComplete` | `() => void` | Fires once the queue drains after the stream finishes. | |
| 121 | +| `minDelay` | `number` | Minimum milliseconds between animation frames (default `10`). | |
| 122 | +| `blockId` | `string` | Reserved for coordinating multi-block updates. | |
| 123 | + |
| 124 | +## Customization |
| 125 | + |
| 126 | +- **Override Markdown elements**: provide a `components` map to inject callouts, alerts, or custom typography. |
| 127 | + |
| 128 | + ```tsx |
| 129 | + <StreamingMarkdown |
| 130 | + components={{ |
| 131 | + blockquote: (props) => ( |
| 132 | + <div className="rounded-lg border-l-4 border-amber-500 bg-amber-50 p-3 text-sm"> |
| 133 | + {props.children} |
| 134 | + </div> |
| 135 | + ), |
| 136 | + }} |
| 137 | + > |
| 138 | + {text} |
| 139 | + </StreamingMarkdown> |
| 140 | + ``` |
| 141 | + |
| 142 | +- **Theme-aware code blocks**: use the exported `CodeBlock` or compose `useShikiHighlight` with your own chrome. |
| 143 | + |
| 144 | + ```tsx |
| 145 | + import { CodeBlock, useShikiHighlight } from 'streaming-markdown-react'; |
| 146 | + ``` |
| 147 | + |
| 148 | +- **Message-first UIs**: `MessageItem` and `MessageBlockRenderer` coordinate per-block rendering so chat transcripts stay in sync during streaming diffs. |
| 149 | + |
| 150 | +## Type-safe Message Blocks |
| 151 | + |
| 152 | +All message-related types (`Message`, `MessageBlock`, `MessageMetadata`, etc.) are exported so your AI pipeline and UI can share a single contract. |
| 153 | + |
| 154 | +```ts |
| 155 | +import type { Message, MessageBlockType } from 'streaming-markdown-react'; |
| 156 | + |
| 157 | +const assistant: Message = { |
| 158 | + id: 'msg-1', |
| 159 | + role: 'assistant', |
| 160 | + blocks: [ |
| 161 | + { |
| 162 | + id: 'block-1', |
| 163 | + type: MessageBlockType.MAIN_TEXT, |
| 164 | + content: 'Here is your SQL query...', |
| 165 | + }, |
| 166 | + ], |
| 167 | +}; |
| 168 | +``` |
37 | 169 |
|
38 | 170 | ## License |
39 | 171 |
|
40 | | -MIT |
| 172 | +MIT © 2024-present. Feel free to use it in production or open-source projects. |
0 commit comments