ThinkingIndicator Component

The ThinkingIndicator component displays a visual cue that the AI is processing and generating a response.

Import

import { ThinkingIndicator } from 'aichatkit'

Usage

Basic Example

basic-thinking-indicator.tsx

import { ThinkingIndicator } from 'aichatkit'
 
function BasicThinkingIndicator() {
  const [isThinking, setIsThinking] = useState(false)
 
  return (
    <div>
      {isThinking && <ThinkingIndicator />}
    </div>
  )
}

Custom Message

custom-thinking-indicator.tsx

<ThinkingIndicator 
  message="AI is thinking..."
  variant="dots"
  size="medium"
/>

API Reference

Props

Prop	Type	Default	Description
`message`	`string`	`'Thinking...'`	Text to display with indicator
`variant`	`'dots' \| 'pulse' \| 'wave'`	`'dots'`	Animation style
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Size of the indicator
`color`	`string`	`'#666'`	Color of the animation
`className`	`string`	-	Additional CSS classes

Variants

Dots Animation

<ThinkingIndicator variant="dots" />

Pulse Animation

<ThinkingIndicator variant="pulse" />

Wave Animation

<ThinkingIndicator variant="wave" />

The ThinkingIndicator helps users understand that their request is being processed, improving perceived performance.

ChatInput StreamingIndicator