mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-28 22:17:48 +02:00
feat(ui): add streaming indicator to StreamingMarkdown
Show a spinner with "Generating..." label while assistant messages are being streamed. The indicator appears immediately when content is empty and persists below the content until streaming completes. Also fix duplicate React key warning by including block index in the key to handle blocks with identical content. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import * as React from 'react'
|
||||
import { Markdown, type RenderMode } from './Markdown'
|
||||
import { Spinner } from '@multica/ui/components/spinner'
|
||||
|
||||
export interface StreamingMarkdownProps {
|
||||
content: string
|
||||
@@ -162,6 +163,17 @@ export function StreamingMarkdown({
|
||||
)
|
||||
}
|
||||
|
||||
const indicator = (
|
||||
<div className="flex items-center gap-2 py-1 text-muted-foreground">
|
||||
<Spinner className="text-xs" />
|
||||
<span className="text-xs">Generating...</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
if (blocks.length === 0) {
|
||||
return indicator
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{blocks.map((block, i) => {
|
||||
@@ -169,7 +181,7 @@ export function StreamingMarkdown({
|
||||
|
||||
// Complete blocks use content hash as key -> stable identity -> memoized
|
||||
// Last block uses "active" prefix -> always re-renders on content change
|
||||
const key = isLastBlock ? `active-${i}` : `block-${simpleHash(block.content)}`
|
||||
const key = isLastBlock ? `active-${i}` : `block-${i}-${simpleHash(block.content)}`
|
||||
|
||||
return (
|
||||
<MemoizedBlock
|
||||
@@ -181,6 +193,7 @@ export function StreamingMarkdown({
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{indicator}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user