ai-elements

< QueueSection defaultOpen = { true }

< QueueSectionTrigger

< QueueSectionLabel count = { 3 } label = " tasks " icon = { < Icon /> } /> </ QueueSectionTrigger

< QueueSectionContent

< QueueList

< QueueItem

< QueueItemIndicator completed = { false } /> < QueueItemContent

Task description </ QueueItemContent

</ QueueItem

</ QueueList

</ QueueSectionContent

</ QueueSection

</ Queue

Auto-Scroll Behavior The Conversation component uses the use-stick-to-bottom hook for intelligent auto-scrolling: Automatically scrolls to bottom when new messages arrive Pauses auto-scroll when user scrolls up Provides scroll-to-bottom button when not at bottom Supports smooth and instant scroll modes File Attachment Handling PromptInput provides comprehensive file handling: Drag-and-drop support (local or global) Paste image/file support File type validation (accept prop) File size limits (maxFileSize prop) Maximum file count (maxFiles prop) Preview for images, icons for files Automatic blob URL to data URL conversion on submit Speech Input The PromptInputSpeechButton uses the Web Speech API for voice input: Browser-based speech recognition Continuous recognition mode Interim results support Automatic text insertion into textarea Visual feedback during recording Reasoning Auto-Collapse The Reasoning component provides auto-collapse behavior: Opens automatically when streaming starts Closes 1 second after streaming ends Tracks thinking duration in seconds Displays "Thinking..." with shimmer effect during streaming Shows "Thought for N seconds" when complete TypeScript Types All components are fully typed with TypeScript: import type { ToolUIPart , FileUIPart , UIMessage } from "ai" ; type ToolProps = ComponentProps < typeof Collapsible

; type QueueItemProps = ComponentProps < "li"

; type MessageAttachmentProps = HTMLAttributes < HTMLDivElement

& { data : FileUIPart ; onRemove ? : ( ) => void ; } ; Common Use Cases Chat Interface Combine Conversation, Message, and PromptInput for a complete chat UI: import { Conversation , ConversationContent , ConversationScrollButton } from "@/components/ai-elements/conversation" ; import { Message , MessageContent , MessageResponse } from "@/components/ai-elements/message" ; import { PromptInput , PromptInputTextarea , PromptInputFooter , PromptInputTools , PromptInputButton , PromptInputSubmit } from "@/components/ai-elements/prompt-input" ; < div className = " flex flex-col h-screen "

< Conversation

< ConversationContent

{ messages . map ( msg => ( < Message key = { msg . id } from = { msg . role }

< MessageContent

< MessageResponse

{ msg . content } </ MessageResponse

</ MessageContent

</ Message

) ) } </ ConversationContent

< ConversationScrollButton /> </ Conversation

< PromptInput onSubmit = { handleSubmit }

< PromptInputTextarea /> < PromptInputFooter

< PromptInputTools

< PromptInputButton onClick = { ( ) => attachments . openFileDialog ( ) }

< PaperclipIcon /> </ PromptInputButton

</ PromptInputTools

< PromptInputSubmit status = { chatStatus } /> </ PromptInputFooter

</ PromptInput

</ div

Tool Execution Display Show tool execution with expandable details: import { Tool , ToolHeader , ToolContent , ToolInput , ToolOutput } from "@/components/ai-elements/tool" ; { toolInvocations . map ( tool => ( < Tool key = { tool . id }

< ToolHeader title = { tool . toolName } type = { tool-call- ${ tool . toolName } } state = { tool . state } /> < ToolContent

< ToolInput input = { tool . args } /> { tool . result && ( < ToolOutput output = { tool . result } errorText = { tool . error } /> ) } </ ToolContent

</ Tool

) ) } Approval Workflow Request user confirmation before executing actions: import { Confirmation , ConfirmationTitle , ConfirmationRequest , ConfirmationActions , ConfirmationAction , ConfirmationAccepted , ConfirmationRejected } from "@/components/ai-elements/confirmation" ; < Confirmation approval = { tool . approval } state = { tool . state }

< ConfirmationTitle

Approve deletion of { resource } ? </ ConfirmationTitle

< ConfirmationRequest

< ConfirmationActions

< ConfirmationAction onClick = { approve } variant = " default "

Approve </ ConfirmationAction

< ConfirmationAction onClick = { reject } variant = " outline "

Reject </ ConfirmationAction

</ ConfirmationActions

</ ConfirmationRequest

< ConfirmationAccepted

Action approved and executed. </ ConfirmationAccepted

< ConfirmationRejected

Action rejected. </ ConfirmationRejected

</ Confirmation

Job Queue Management Display task lists with completion status: import { Queue , QueueSection , QueueSectionTrigger , QueueSectionLabel , QueueSectionContent , QueueList , QueueItem , QueueItemIndicator , QueueItemContent , QueueItemDescription } from "@/components/ai-elements/queue" ; < Queue

< QueueSection

< QueueSectionTrigger

< QueueSectionLabel count = { todos . length } label = " todos " /> </ QueueSectionTrigger

< QueueSectionContent

< QueueList

{ todos . map ( todo => ( < QueueItem key = { todo . id }

< QueueItemIndicator completed = { todo . status === 'completed' } /> < QueueItemContent completed = { todo . status === 'completed' }

{ todo . title } </ QueueItemContent

{ todo . description && ( < QueueItemDescription completed = { todo . status === 'completed' }

{ todo . description } </ QueueItemDescription

) } </ QueueItem

) ) } </ QueueList

</ QueueSectionContent

</ QueueSection

</ Queue

Accessibility Components include accessibility features: ARIA labels and roles Keyboard navigation support Screen reader announcements Focus management Semantic HTML elements Animation Many components use Framer Motion for smooth animations: Shimmer effect for loading states Collapsible content transitions Edge animations in Canvas Loader spinner rotation References Conversation Components Prompt Input Components Workflow Components Visualization Components