feat(chat): allow dragging queued messages to reorder the queue (#1831)

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

packages/ui/src/components/chat/QueuedMessageChips.tsx

@@ -1,10 +1,26 @@
 import React, { memo } from 'react';
+import {
+    DndContext,
+    MouseSensor,
+    TouchSensor,
+    useSensor,
+    useSensors,
+    closestCenter,
+    type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+    SortableContext,
+    useSortable,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { useMessageQueueStore, type QueuedMessage } from '@/stores/messageQueueStore';
 import { useSessionUIStore } from '@/sync/session-ui-store';
 import { useInputStore } from '@/sync/input-store';
 import { useI18n } from '@/lib/i18n';
 import { Icon } from "@/components/icon/Icon";
 import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
 
 interface QueuedMessageChipProps {
     message: QueuedMessage;
@@ -16,6 +32,7 @@ interface QueuedMessageChipProps {
 const QueuedMessageChip = memo(({ message, sessionId, onEdit, onSend }: QueuedMessageChipProps) => {
     const { t } = useI18n();
     const removeFromQueue = useMessageQueueStore((state) => state.removeFromQueue);
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: message.id });
 
     // Get first line of message, truncated
     const firstLine = React.useMemo(() => {
@@ -31,7 +48,21 @@ const QueuedMessageChip = memo(({ message, sessionId, onEdit, onSend }: QueuedMe
     const attachmentCount = message.attachments?.length ?? 0;
 
     return (
-        <div className="flex min-w-0 items-center gap-2 py-1">
+        <div
+            ref={setNodeRef}
+            // Translate only (no scaleX/scaleY) so the lifted row keeps its size.
+            style={{ transform: CSS.Translate.toString(transform), transition }}
+            className={cn('flex min-w-0 items-center gap-2 py-1', isDragging && 'z-10 opacity-60')}
+        >
+            <button
+                type="button"
+                {...attributes}
+                {...listeners}
+                className="flex flex-shrink-0 cursor-grab touch-none select-none items-center justify-center text-muted-foreground hover:text-foreground active:cursor-grabbing"
+                aria-label={t('chat.queuedMessage.reorderAria')}
+            >
+                <Icon name="draggable" className="h-4 w-4" aria-hidden="true" />
+            </button>
             <span className="min-w-0 flex-1 truncate typography-ui-label text-foreground">
                 {firstLine || t('chat.queuedMessage.empty')}
                 {attachmentCount > 0 && (
@@ -90,6 +121,20 @@ export const QueuedMessageChips = memo(({ onEditMessage, onSendMessage }: Queued
         )
     );
     const popToInput = useMessageQueueStore((state) => state.popToInput);
+    const reorderQueue = useMessageQueueStore((state) => state.reorderQueue);
+
+    const sensors = useSensors(
+        // Desktop: drag after a small move so other clicks still register.
+        useSensor(MouseSensor, { activationConstraint: { distance: 8 } }),
+        // Touch: long-press to drag (tap still hits buttons, swipe scrolls).
+        useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 6 } }),
+    );
+
+    const handleDragEnd = React.useCallback((event: DragEndEvent) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id || !currentSessionId) return;
+        reorderQueue(currentSessionId, String(active.id), String(over.id));
+    }, [currentSessionId, reorderQueue]);
 
     const handleEdit = React.useCallback((message: QueuedMessage) => {
         if (!currentSessionId) return;
@@ -121,17 +166,28 @@ export const QueuedMessageChips = memo(({ onEditMessage, onSendMessage }: Queued
                     </span>
                     <Icon name="time" className="ml-auto h-4 w-4 text-muted-foreground" aria-hidden="true" />
                 </div>
-                <div className="px-3 pb-3 flex flex-col gap-1.5 max-h-[10.5rem] overflow-y-auto">
-                    {queuedMessages.map((message) => (
-                        <QueuedMessageChip
-                            key={message.id}
-                            message={message}
-                            sessionId={currentSessionId}
-                            onEdit={handleEdit}
-                            onSend={handleSend}
-                        />
-                    ))}
-                </div>
+                <DndContext
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    onDragEnd={handleDragEnd}
+                >
+                    <SortableContext
+                        items={queuedMessages.map((m) => m.id)}
+                        strategy={verticalListSortingStrategy}
+                    >
+                        <div className="px-3 pb-3 flex flex-col gap-1.5 max-h-[10.5rem] overflow-y-auto">
+                            {queuedMessages.map((message) => (
+                                <QueuedMessageChip
+                                    key={message.id}
+                                    message={message}
+                                    sessionId={currentSessionId}
+                                    onEdit={handleEdit}
+                                    onSend={handleSend}
+                                />
+                            ))}
+                        </div>
+                    </SortableContext>
+                </DndContext>
             </div>
         </div>
     );