StreamingText

Real-time text with streaming indicator

StreamingText displays text content with optional real-time streaming support, markdown rendering, and a visual indicator when content is being streamed.

Interactive Demo

Click "Stream" to see the demo...

Import

import

import { StreamingText } from '@ash-cloud/ash-ui';

Usage

AssistantMessage.tsx

import { StreamingText } from '@ash-cloud/ash-ui';

function AssistantMessage({ content, isStreaming }) {
  return (
    <div className="message assistant">
      <StreamingText
        content={content}
        isStreaming={isStreaming}
        renderMarkdown={true}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
content	string	required	The text content to display
isStreaming	boolean	false	Shows streaming indicator when true
renderMarkdown	boolean	true	Enable markdown rendering
className	string	undefined	Additional CSS classes

Features

Streaming Indicator

Pulsing cursor shows active streaming

Markdown Support

Full markdown rendering with react-markdown

Code Blocks

Syntax highlighting for inline and block code

Smooth Updates

Efficient re-rendering as content streams

With Server-Sent Events

ChatStream.tsx

function ChatStream() {
  const [content, setContent] = useState('');
  const [isStreaming, setIsStreaming] = useState(false);

  const handleStream = async () => {
    setIsStreaming(true);
    setContent('');

    const response = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message: 'Hello' })
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      const text = decoder.decode(value);
      setContent(prev => prev + text);
    }

    setIsStreaming(false);
  };

  return (
    <StreamingText
      content={content}
      isStreaming={isStreaming}
      renderMarkdown
    />
  );
}