// Ported from vercel/ai-elements @ main (packages/elements/src/queue.tsx). // Customizations applied on import: import-alias rewrites, RTL physical→logical // class swap, Vercel theme-token sweep. See scripts/registry/port-ai-elements.mjs // for the deterministic transforms — re-run to re-sync against upstream. "use client"; import { ChevronDownIcon, PaperclipIcon } from "lucide-react"; import Image from "next/image"; import type { ComponentProps } from "react"; import { Button } from "@/components/registry/primitives/core/button"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/registry/primitives/core/collapsible"; import { ScrollArea } from "@/components/registry/primitives/core/scroll-area"; import { cn } from "@/lib/registry/cn"; export interface QueueMessagePart { type: string; text?: string; url?: string; filename?: string; mediaType?: string; } export interface QueueMessage { id: string; parts: QueueMessagePart[]; } export interface QueueTodo { id: string; title: string; description?: string; status?: "pending" | "completed"; } export type QueueItemProps = ComponentProps<"li">; export const QueueItem = ({ className, ...props }: QueueItemProps) => (

); export type QueueItemIndicatorProps = ComponentProps<"span"> & { completed?: boolean; }; export const QueueItemIndicator = ({ completed = false, className, ...props }: QueueItemIndicatorProps) => ( ); export type QueueItemContentProps = ComponentProps<"span"> & { completed?: boolean; }; export const QueueItemContent = ({ completed = false, className, ...props }: QueueItemContentProps) => ( ); export type QueueItemDescriptionProps = ComponentProps<"div"> & { completed?: boolean; }; export const QueueItemDescription = ({ completed = false, className, ...props }: QueueItemDescriptionProps) => (

); export type QueueItemActionsProps = ComponentProps<"div">; export const QueueItemActions = ({ className, ...props }: QueueItemActionsProps) => (

); export type QueueItemActionProps = Omit< ComponentProps, "variant" | "size" >; export const QueueItemAction = ({ className, ...props }: QueueItemActionProps) => ( ); // QueueSectionLabel - label content with icon and count export type QueueSectionLabelProps = ComponentProps<"span"> & { count?: number; label: string; icon?: React.ReactNode; }; export const QueueSectionLabel = ({ count, label, icon, className, ...props }: QueueSectionLabelProps) => ( {icon} {count} {label} ); // QueueSectionContent - collapsible content area export type QueueSectionContentProps = ComponentProps< typeof CollapsibleContent >; export const QueueSectionContent = ({ className, ...props }: QueueSectionContentProps) => ( ); export type QueueProps = ComponentProps<"div">; export const Queue = ({ className, ...props }: QueueProps) => (

);

Queue

Showcase

Queue