Docs / Components / Agent Thinking

Agent Thinking

An AI agent thinking component that displays the agent's thought process with a typing effect and smooth expand/collapse animation.

Dependencies

Install the following dependencies to use this component:

1npm install framer-motion clsx tailwind-merge lucide-react

Run the following command in your terminal to add the component to your project:

1npx rankflow-ui@latest add agent-thinking

Prop	Type	Default	Description
thought	string	'-'	The thinking text content to stream or display.
isStreaming	boolean	false	Whether the thinking process is actively streaming.
streamSpeed	number	24	Speed of simulated streaming in milliseconds per character.
streamingLabel	string	'Thinking'	Custom label displayed while the agent is thinking.
completedLabel	string \| ((durationSec: number) => string)	'Thought for {duration}s'	Custom label displayed after thinking completes.
showDuration	boolean	true	Whether to show the elapsed duration counter.
defaultOpen	boolean	true	Initial open state of the thinking dropdown.
open	boolean	undefined	Controlled open state.
onOpenChange	(open: boolean) => void	undefined	Callback fired when open state changes.
autoCollapseOnComplete	boolean	false	Whether to automatically collapse the dropdown when streaming concludes.
onStreamComplete	() => void	undefined	Callback fired when streaming finishes.
icon	ReactNode	undefined	Custom icon or indicator.
maxHeight	number	240	Maximum height of the thoughts scroll area in pixels.
className	string	''	Additional container CSS classes.