Thinking Indicator

Expandable panel showing AI reasoning/thinking process with shimmer animation. Supports Anthropic's extended thinking and OpenAI's reasoning tokens.

Installation

$ flai add thinking_indicator

Import

import 'package:my_app/flai/components/thinking_indicator/thinking_indicator.dart';

Preview

🧠 Thinking... ▼

The user is asking about architecture patterns. Let me consider the trade-offs between monolithic and microservices approaches given their scale requirements...

🧠 Thought for 3.2s ▶

Usage

// As part of a message with thinking content
MessageBubble(
  message: Message(
    id: '1',
    role: MessageRole.assistant,
    content: 'The answer is 42.',
    timestamp: DateTime.now(),
    thinkingContent: 'Let me reason through this step by step...',
  ),
)

// Standalone usage
FlaiThinkingIndicator(
  content: thinkingText,
  isExpanded: false,  // collapsed by default
)

Properties

Property	Type	Default	Description
content	String	required	The thinking/reasoning text content.
isExpanded	bool	false	Initial expanded state. User can toggle.

Animation

The panel uses smooth expand/collapse animation:

SizeTransition with Curves.easeOutCubic for the content reveal
RotationTransition on the chevron icon (0 to 180 degrees)
Duration: 200ms
Shimmer effect on the "Thinking..." label while still streaming

ⓘ

The thinking indicator is automatically rendered inside MessageBubble when message.thinkingContent is set. You only need the standalone component if building a custom layout.

Previous ← Code Block Next Citation Card →