Queue

The Queue component provides a flexible system for displaying lists of messages, todos, attachments, and collapsible sections. Perfect for showing AI workflow progress, pending tasks, message history, or any structured list of items in your application.

Installation

npx ai-elements@latest add queue

Features

• Flexible component system with composable parts
• Collapsible sections with smooth animations
• Support for completed/pending state indicators
• Built-in scroll area for long lists
• Attachment display with images and file indicators
• Hover-revealed action buttons for queue items
• TypeScript support with comprehensive type definitions
• Customizable styling with Tailwind CSS
• Responsive design with mobile-friendly interactions
• Keyboard navigation and accessibility support
• Theme-aware with automatic dark mode support

Examples

With PromptInput

Preview

Code

Write project documentation

Complete the README and API docs

Implement authentication

Fix bug #42

Resolve crash on settings page

Refactor queue logic

Unify queue and todo state management

Add unit tests

Increase test coverage for hooks

SearchGPT-4o

Props

<Queue />

<QueueSection />

<QueueSectionTrigger />

<QueueSectionLabel />

<QueueSectionContent />

<QueueList />

<QueueItem />

<QueueItemIndicator />

<QueueItemContent />

<QueueItemDescription />

<QueueItemActions />

<QueueItemAction />

<QueueItemAttachment />

<QueueItemImage />

<QueueItemFile />

Type Exports

QueueMessagePart

Interface for message parts within queue messages.

interface QueueMessagePart {
  type: string;
  text?: string;
  url?: string;
  filename?: string;
  mediaType?: string;
}

QueueMessage

Interface for queue message items.

interface QueueMessage {
  id: string;
  parts: QueueMessagePart[];
}

QueueTodo

Interface for todo items in the queue.

interface QueueTodo {
  id: string;
  title: string;
  description?: string;
  status?: "pending" | "completed";
}