StreamingIndicator Component

The StreamingIndicator component shows when a message is being streamed in real-time, typically displayed after the last word of a streaming message.

Import

import { StreamingIndicator } from 'aichatkit'

Usage

Basic Example

basic-streaming-indicator.tsx

import { StreamingIndicator } from 'aichatkit'
 
function BasicStreamingIndicator() {
  const [isStreaming, setIsStreaming] = useState(true)
 
  return (
    <div>
      This is a streaming message
      {isStreaming && <StreamingIndicator />}
    </div>
  )
}

Custom Styling

custom-streaming-indicator.tsx

<StreamingIndicator 
  type="cursor"
  color="#2563eb"
  speed="fast"
/>

API Reference

Props

Prop	Type	Default	Description
`type`	`'cursor' \| 'dots' \| 'bar'`	`'cursor'`	Type of indicator
`color`	`string`	`'currentColor'`	Color of the indicator
`speed`	`'slow' \| 'medium' \| 'fast'`	`'medium'`	Animation speed
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Size of the indicator
`className`	`string`	-	Additional CSS classes

Types

Cursor Type

<StreamingIndicator type="cursor" />

Dots Type

<StreamingIndicator type="dots" />

Bar Type

<StreamingIndicator type="bar" />

The StreamingIndicator provides real-time feedback during message streaming, enhancing the user experience.

ThinkingIndicator MarkdownRenderer