Feat (new element): implement reusable task queue and panel (message and todo default) (#131)

* feat(hook): add useTaskQueue context and hook for unified task and message queue management

* feat: add reusable TaskQueuePanel component for queue and todo management

* chore (example): add TaskQueuePanel usage example with shared task queue context

* Feat (example): add TaskQueuePanel to example workflow page

* chore: add sample todo and message data to task queue

* fix: prevent double-seeding of demo tasks in React Strict Mode with useRef guard

Author: unclebay143

apps/test/app/examples/task-queue-panel.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useTaskQueue, TaskQueueProvider } from "@repo/elements/useTaskQueue";
+import { TaskQueuePanel } from "@repo/elements/task-queue-panel";
+import { useEffect, useRef } from "react";
+import type { TaskQueueItem } from "@repo/elements/useTaskQueue";
+
+const DUMMY_TASKS: TaskQueueItem[] = [
+      {
+      id: 'todo-1',
+      type: 'todo',
+      title: 'Write project documentation',
+      description: 'Complete the README and API docs',
+        status: 'completed',
+    },
+    {
+      id: 'todo-2',
+      type: 'todo',
+      title: 'Implement authentication',
+      status: 'pending',
+    },
+    {
+      id: 'todo-3',
+      type: 'todo',
+      title: 'Fix bug #42',
+      description: 'Resolve crash on settings page',
+      status: 'pending',
+    },
+    {
+      id: 'todo-4',
+      type: 'todo',
+      title: 'Refactor queue logic',
+      description: 'Unify queue and todo state management',
+      status: 'pending',
+    },
+    {
+      id: 'todo-5',
+      type: 'todo',
+      title: 'Add unit tests',
+      description: 'Increase test coverage for hooks',
+      status: 'pending',
+    },
+    // Sample pending messages
+    {
+        id: 'msg-1',
+        type: 'message',
+        parts: [
+            { type: 'text', text: 'How do I set up the project?' }
+        ]
+    },
+    {
+        id: 'msg-2',
+        type: 'message',
+        parts: [
+            { type: 'text', text: 'What is the roadmap for Q4?' }
+        ]
+    },
+    {
+        id: 'msg-3',
+        type: 'message',
+        parts: [
+            { type: 'text', text: 'Can you review my PR?' }
+        ]
+    },
+    {
+        id: 'msg-4',
+        type: 'message',
+        parts: [
+            { type: 'text', text: 'Please generate a changelog.' }
+        ]
+    },
+    {
+        id: 'msg-5',
+        type: 'message',
+        parts: [
+            { type: 'text', text: 'Add dark mode support.' }
+        ]
+    },
+    {
+        id: 'msg-6',
+        type: 'message',
+        parts: [
+            { type: 'text', text: 'Optimize database queries.' }
+        ]
+    },
+    {
+        id: 'msg-7',
+        type: 'message',
+        parts: [
+            { type: 'text', text: 'Set up CI/CD pipeline.' }
+        ]
+    }
+]
+
+const ExampleInner = () => {
+  const { tasks, removeTask , addTask} = useTaskQueue();
+  // prevent demo data from being seeded twice due to React 18 Strict Mode
+  const seededRef = useRef(false);
+
+  // filter tasks for queue and todo
+  const queueTasks = tasks.filter((task: typeof tasks[number]) => task.type === "message");
+  const todoTasks = tasks.filter((task: typeof tasks[number]) => task.type === "todo");
+
+
+  function getQueueMessages() {
+    return queueTasks.map((message: Extract<typeof tasks[number], { type: "message" }>) => ({
+      id: message.id,
+      parts: message.parts,
+    }));
+  }
+
+  function getTodoItems() {
+    return todoTasks.map((task: Extract<typeof tasks[number], { type: "todo" }>) => ({
+      id: task.id,
+      title: task.title,
+      description: task.description,
+      status: task.status,
+    }));
+  }
+
+    useEffect(() => {
+    if (!seededRef.current && tasks.length === 0) {
+      DUMMY_TASKS.forEach(addTask);
+      seededRef.current = true;
+    }
+  }, [tasks.length, addTask]);
+  
+
+  return (
+      <TaskQueuePanel
+        messages={getQueueMessages()}
+        todos={getTodoItems()}
+        onRemoveQueue={(id: string) => removeTask(id)}
+        onRemoveTodo={(id: string) => removeTask(id)}
+      />
+  );
+};
+
+
+const Example = () => (
+  <TaskQueueProvider>
+    <ExampleInner />
+  </TaskQueueProvider>
+);
+
+
+export default Example;

apps/test/app/page.tsx

@@ -17,6 +17,7 @@ import Loader from "@/app/examples/loader";
 import Message from "@/app/examples/message";
 import OpenInChat from "@/app/examples/open-in-chat";
 import PromptInput from "@/app/examples/prompt-input";
+import TaskQueuePanel from "@/app/examples/task-queue-panel";
 import Reasoning from "@/app/examples/reasoning";
 import Response from "@/app/examples/response";
 import Sources from "@/app/examples/sources";
@@ -42,6 +43,7 @@ const components = [
   { name: "Message", Component: Message },
   { name: "OpenInChat", Component: OpenInChat },
   { name: "PromptInput", Component: PromptInput },
+  { name: "TaskQueuePanel", Component: TaskQueuePanel },
   { name: "Reasoning", Component: Reasoning },
   { name: "Response", Component: Response },
   { name: "Sources", Component: Sources },

packages/elements/src/task-queue-panel.tsx

@@ -0,0 +1,193 @@
+import { memo, useState } from "react";
+import { ScrollArea } from "@repo/shadcn-ui/components/ui/scroll-area";
+import { Trash2, Paperclip, ChevronRight, ArrowUp } from "lucide-react";
+import { cn } from "@repo/shadcn-ui/lib/utils";
+
+export type MessagePart = { type: string; text?: string; url?: string; filename?: string; mediaType?: string };
+export type Message = { id: string; parts: MessagePart[] };
+export type TodoItem = { id: string; title: string; description?: string; status?: 'pending' | 'completed' };
+
+
+interface MessageListProps {
+  items: Message[] | TodoItem[];
+  type: 'message' | 'todo';
+  onRemove: (id: string) => void;
+  onSendNow?: (id: string) => void;
+}
+
+function MessageList({ items, type, onRemove, onSendNow }: MessageListProps) {
+  return (
+    <ScrollArea className="mt-2 -mb-1">
+      <div className="max-h-40 pr-4">
+        <ul>
+          {type === 'message'
+            ? (items as Message[]).map((msg) => {
+                const summary = (() => {
+                  const textParts = msg.parts.filter((p) => 'type' in p && p.type === 'text');
+                  const text = textParts.map((p) => p.text).join(' ').trim();
+                  if (text) return text;
+                  return '(queued message)'; // (file only message)
+                })();
+                return (
+                  <li key={msg.id} className="group flex flex-col gap-1 py-1 px-3 text-sm text-muted-foreground rounded-md hover:bg-muted transition-colors">
+                    <div className="flex items-center gap-2">
+                      <span className="mt-0.5 inline-block size-2.5 rounded-full border border-muted-foreground/50"></span>
+                      <span className="line-clamp-1 break-words grow">{summary}</span>
+                      <div className="flex gap-1">
+                        <button
+                          type="button"
+                          className="invisible group-hover:visible rounded p-1 text-muted-foreground hover:text-foreground hover:bg-muted-foreground/10"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onRemove(msg.id);
+                          }}
+                          aria-label="Remove from queue"
+                          title="Remove from queue"
+                        >
+                          <Trash2 size={12} />
+                        </button>
+                        <button
+                          type="button"
+                          className="invisible group-hover:visible rounded p-1 text-muted-foreground hover:text-foreground hover:bg-muted-foreground/10"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (onSendNow) onSendNow(msg.id);
+                          }}
+                          aria-label="Send now"
+                        >
+                          <ArrowUp size={14} />
+                        </button>
+                      </div>
+                    </div>
+                    {/* Media/file previews */}
+                    {msg.parts.some((p) => p.type === 'file' && p.url) && (
+                      <div className="flex flex-wrap gap-2 mt-1">
+                        {msg.parts.filter((p) => p.type === 'file' && p.url).map((file, i) => {
+                          if (file.mediaType && file.mediaType.startsWith('image/') && file.url) {
+                            return (
+                              <img
+                                key={i}
+                                src={file.url}
+                                alt={file.filename || 'attachment'}
+                                className="h-8 w-8 object-cover rounded border"
+                              />
+                            );
+                          }
+                          // Other file types: show icon and filename
+                          return (
+                            <span key={i} className="flex items-center gap-1 px-2 py-1 bg-muted rounded text-xs border">
+                              <Paperclip size={12} />
+                              <span className="truncate max-w-[100px]">{file.filename || 'file'}</span>
+                            </span>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </li>
+                );
+              })
+            : (items as TodoItem[]).map((item) => {
+                const isCompleted = item.status === 'completed';
+                return (
+                  <li key={item.id} className="group flex flex-col gap-1 py-1 px-3 text-sm rounded-md hover:bg-muted transition-colors">
+                    <div className="flex items-center gap-2">
+                      <span className={`mt-0.5 inline-block size-2.5 rounded-full border ${isCompleted ? 'border-muted-foreground/20 bg-muted-foreground/10' : 'border-muted-foreground/50'}`}></span>
+                      <span className={`line-clamp-1 break-words grow font-medium ${isCompleted ? 'line-through text-muted-foreground/50' : 'text-muted-foreground'}`}>{item.title}</span>
+                      <button
+                        type="button"
+                        className="invisible group-hover:visible rounded p-1 text-muted-foreground hover:text-foreground hover:bg-muted-foreground/10"
+                        onClick={() => onRemove(item.id)}
+                        aria-label="Remove todo"
+                      >
+                        <Trash2 size={12} />
+                      </button>
+                    </div>
+                    {item.description && (
+                      <div className={`ml-6 text-xs ${isCompleted ? 'line-through text-muted-foreground/40' : 'text-muted-foreground'}`}>{item.description}</div>
+                    )}
+                  </li>
+                );
+              })}
+        </ul>
+      </div>
+    </ScrollArea>
+  );
+}
+
+export interface TaskQueuePanelProps {
+  messages: Message[];
+  todos: TodoItem[];
+  onRemoveQueue?: (id: string) => void;
+  onRemoveTodo?: (id: string) => void;
+  onSendNow?: (id: string) => void;
+}
+
+// Reusable collapsible panel for both queue and todo
+function CollapsiblePanel({
+  label,
+  count,
+  isOpen,
+  onToggle,
+  children,
+  icon
+}: {
+  label: string;
+  count: number;
+  isOpen: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+}) {
+  if (count === 0) return null;
+  return (
+    <div>
+      <button
+        type="button"
+        className="flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left text-sm font-medium text-muted-foreground hover:bg-muted"
+        onClick={onToggle}
+      >
+        <span className="flex items-center gap-2">
+          <span
+            className={cn('transition-transform', isOpen ? ' rotate-90' : ' rotate-0')}
+          >
+            <ChevronRight size={14} />
+          </span>
+          {icon}
+          <span>{count} {label}</span>
+        </span>
+      </button>
+      {isOpen && children}
+    </div>
+  );
+}
+
+export const TaskQueuePanel = memo(function TaskQueuePanel({ messages, todos, onRemoveQueue, onRemoveTodo, onSendNow }: TaskQueuePanelProps) {
+  const [queueOpen, setQueueOpen] = useState(true);
+  const [todoOpen, setTodoOpen] = useState(true);
+
+  if (messages.length === 0 && todos.length === 0) return null;
+  
+  return (
+    <div className="rounded-t-xl border border-border border-b-0 bg-background px-3 pt-2 pb-2 shadow-xs flex flex-col gap-2">
+      <CollapsiblePanel
+        label="Queued"
+        count={messages?.length ?? 0}
+        isOpen={queueOpen}
+        onToggle={() => setQueueOpen((v) => !v)}
+        icon={null}
+      >
+        <MessageList items={messages ?? []} type="message" onRemove={onRemoveQueue || (() => {})} onSendNow={onSendNow} />
+      </CollapsiblePanel>
+      <CollapsiblePanel
+        label="Todo"
+        count={todos?.length ?? 0}
+        isOpen={todoOpen}
+        onToggle={() => setTodoOpen((v) => !v)}
+      >
+        <MessageList items={todos ?? []} type="todo" onRemove={onRemoveTodo || (() => {})}/>
+      </CollapsiblePanel>
+    </div>
+  );
+});