50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2003,"use client"; import type { QueueMessage, QueueTodo } from "@/components/ai-elements/queue"; import { Queue, QueueItem, QueueItemAction, QueueItemActions, QueueItemAttachment, QueueItemContent, QueueItemDescription, QueueItemFile, QueueItemImage, QueueItemIndicator, QueueList, QueueSection, QueueSectionContent, QueueSectionLabel, QueueSectionTrigger, } from "@/components/ai-elements/queue"; import { ArrowUp, Trash2 } from "lucide-react"; import { memo, useCallback, useState } from "react"; const sampleMessages: QueueMessage[] = [ { id: "msg-1", parts: [{ text: "How do I set up the project?", type: "text" }], }, { id: "msg-2", parts: [{ text: "What is the roadmap for Q4?", type: "text" }], }, { id: "msg-3", parts: [ { text: "Update the default logo to this png.", type: "text" }, { filename: "setup-guide.png", mediaType: "image/png", type: "file", url: "https://github.com/haydenbleasel.png", }, ], }, { id: "msg-4", parts: [{ text: "Please generate a changelog.", type: "text" }], }, { id: "msg-5", parts: [{ text: "Add dark mode support.", type: "text" }], }, { id: "msg-6", parts: [{ text: "Optimize database queries.", type: "text" }], }, { id: "msg-7", parts: [{ text: "Set up CI/CD pipeline.", type: "text" }], }, ]; const sampleTodos: QueueTodo[] = [ { description: "Complete the README and API docs", id: "todo-1", status: "completed", title: "Write project documentation", }, { id: "todo-2", status: "pending", title: "Implement authentication", }, { description: "Resolve crash on settings page", id: "todo-3", status: "pending", title: "Fix bug #42", }, { description: "Unify queue and todo state management", id: "todo-4", status: "pending", title: "Refactor queue logic", }, { description: "Increase test coverage for hooks", id: "todo-5", status: "pending", title: "Add unit tests", }, ]; interface MessageActionsProps { messageId: string; onRemove: (e: React.MouseEvent, id: string) => void; onSend: (e: React.MouseEvent, id: string) => void; } const MessageActions = memo( ({ messageId, onRemove, onSend }: MessageActionsProps) => { const handleRemove = useCallback( (e: React.MouseEvent) => onRemove(e, messageId), [onRemove, messageId] ); const handleSend = useCallback( (e: React.MouseEvent) => onSend(e, messageId), [onSend, messageId] ); return ( ); } ); MessageActions.displayName = "MessageActions"; interface TodoItemProps { todo: QueueTodo; onRemove: (id: string) => void; } const TodoItem = memo(({ todo, onRemove }: TodoItemProps) => { const isCompleted = todo.status === "completed"; const handleRemove = useCallback( () => onRemove(todo.id), [onRemove, todo.id] ); return (

{todo.title}

{todo.description && ( {todo.description} )} ); }); TodoItem.displayName = "TodoItem"; const Example = () => { const [messages, setMessages] = useState(sampleMessages); const [todos, setTodos] = useState(sampleTodos); const handleRemoveMessage = useCallback((id: string) => { setMessages((prev) => prev.filter((msg) => msg.id !== id)); }, []); const handleRemoveTodo = useCallback((id: string) => { setTodos((prev) => prev.filter((todo) => todo.id !== id)); }, []); const handleSendNow = useCallback((id: string) => { console.log("Send now:", id); setMessages((prev) => prev.filter((msg) => msg.id !== id)); }, []); const handleMessageRemove = useCallback( (e: React.MouseEvent, id: string) => { e.preventDefault(); e.stopPropagation(); handleRemoveMessage(id); }, [handleRemoveMessage] ); const handleMessageSend = useCallback( (e: React.MouseEvent, id: string) => { e.preventDefault(); e.stopPropagation(); handleSendNow(id); }, [handleSendNow] ); if (messages.length === 0 && todos.length === 0) { return null; } return ( {messages.length > 0 && ( {messages.map((message) => { const summary = (() => { const textParts = message.parts.filter( (p) => p.type === "text" ); const text = textParts .map((p) => p.text) .join(" ") .trim(); return text || "(queued message)"; })(); const hasFiles = message.parts.some( (p) => p.type === "file" && p.url ); return (

{summary}

{hasFiles && ( {message.parts .filter((p) => p.type === "file" && p.url) .map((file) => { if ( file.mediaType?.startsWith("image/") && file.url ) { return ( ); } return ( {file.filename || "file"} ); })} )} ); })} )} {todos.length > 0 && ( {todos.map((todo) => ( ))} )} ); }; export default Example; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@ai-elements","registryDependencies":["https://elements.ai-sdk.dev/queue.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/examples/queue.tsx","content":"$52","type":"registry:block","target":"components/ai-elements/example-queue.tsx"}],"className":"h-[70svh] min-h-80"}]]}]