diff --git a/packages/ui/src/components/chat/QueuedMessageChips.tsx b/packages/ui/src/components/chat/QueuedMessageChips.tsx index 95a4f3f8..e1605281 100644 --- a/packages/ui/src/components/chat/QueuedMessageChips.tsx +++ b/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 ( -
+
+ {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
-
- {queuedMessages.map((message) => ( - - ))} -
+ + m.id)} + strategy={verticalListSortingStrategy} + > +
+ {queuedMessages.map((message) => ( + + ))} +
+ +
); diff --git a/packages/ui/src/lib/i18n/messages/en.ts b/packages/ui/src/lib/i18n/messages/en.ts index 0423b342..f69c7480 100644 --- a/packages/ui/src/lib/i18n/messages/en.ts +++ b/packages/ui/src/lib/i18n/messages/en.ts @@ -1727,6 +1727,7 @@ export const dict = { 'chat.queuedMessage.edit': 'edit', 'chat.queuedMessage.send': 'send', 'chat.queuedMessage.removeAria': 'Remove from queue', + 'chat.queuedMessage.reorderAria': 'Drag to reorder', 'chat.container.returnToParent.aria': 'Return to parent session', 'chat.container.returnToParent.titleNamed': 'Return to: {title}', 'chat.container.returnToParent.title': 'Return to parent session', diff --git a/packages/ui/src/lib/i18n/messages/es.ts b/packages/ui/src/lib/i18n/messages/es.ts index 93e04110..a35fc63d 100644 --- a/packages/ui/src/lib/i18n/messages/es.ts +++ b/packages/ui/src/lib/i18n/messages/es.ts @@ -1693,6 +1693,7 @@ export const dict: Record = { "chat.queuedMessage.edit": "edit", "chat.queuedMessage.send": "send", "chat.queuedMessage.removeAria": "Eliminar de la cola", + "chat.queuedMessage.reorderAria": "Arrastra para reordenar", "chat.container.returnToParent.aria": "Volver a la sesión principal", "chat.container.returnToParent.titleNamed": "Volver a: {title}", "chat.container.returnToParent.title": "Volver a la sesión principal", diff --git a/packages/ui/src/lib/i18n/messages/fr.ts b/packages/ui/src/lib/i18n/messages/fr.ts index df12dcfe..8b40f88f 100644 --- a/packages/ui/src/lib/i18n/messages/fr.ts +++ b/packages/ui/src/lib/i18n/messages/fr.ts @@ -1572,6 +1572,7 @@ export const dict = { 'chat.queuedMessage.edit': 'modifier', 'chat.queuedMessage.send': 'envoyer', 'chat.queuedMessage.removeAria': 'Supprimer de la file d\'attente', + 'chat.queuedMessage.reorderAria': 'Glisser pour réorganiser', 'chat.container.returnToParent.aria': 'Retour à la session parents', 'chat.container.returnToParent.titleNamed': 'Retourner à : {title}', 'chat.container.returnToParent.title': 'Retour à la session parents', diff --git a/packages/ui/src/lib/i18n/messages/ko.ts b/packages/ui/src/lib/i18n/messages/ko.ts index 15546246..e1a60c79 100644 --- a/packages/ui/src/lib/i18n/messages/ko.ts +++ b/packages/ui/src/lib/i18n/messages/ko.ts @@ -1729,6 +1729,7 @@ export const dict: Record = { 'chat.queuedMessage.edit': 'edit', 'chat.queuedMessage.send': 'send', 'chat.queuedMessage.removeAria': '큐에서 제거', + 'chat.queuedMessage.reorderAria': '드래그하여 순서 변경', 'chat.container.returnToParent.aria': '상위 세션으로 돌아가기', 'chat.container.returnToParent.titleNamed': '돌아가기: {title}', 'chat.container.returnToParent.title': '상위 세션으로 돌아가기', diff --git a/packages/ui/src/lib/i18n/messages/pl.ts b/packages/ui/src/lib/i18n/messages/pl.ts index 78c86d4f..c3eef999 100644 --- a/packages/ui/src/lib/i18n/messages/pl.ts +++ b/packages/ui/src/lib/i18n/messages/pl.ts @@ -663,6 +663,7 @@ export const dict: Record = { 'chat.queuedMessage.edit': 'edit', 'chat.queuedMessage.send': 'send', 'chat.queuedMessage.removeAria': 'Usuń z kolejki', + 'chat.queuedMessage.reorderAria': 'Przeciągnij, aby zmienić kolejność', 'chat.container.returnToParent.aria': 'Powrót do sesji nadrzędnej', 'chat.container.returnToParent.titleNamed': 'Powrót do: {title}', 'chat.container.returnToParent.title': 'Powrót do sesji nadrzędnej', diff --git a/packages/ui/src/lib/i18n/messages/pt-BR.ts b/packages/ui/src/lib/i18n/messages/pt-BR.ts index d3075f8d..21f43066 100644 --- a/packages/ui/src/lib/i18n/messages/pt-BR.ts +++ b/packages/ui/src/lib/i18n/messages/pt-BR.ts @@ -1693,6 +1693,7 @@ export const dict: Record = { "chat.queuedMessage.edit": "edit", "chat.queuedMessage.send": "send", "chat.queuedMessage.removeAria": "Excluir da fila", + "chat.queuedMessage.reorderAria": "Arraste para reordenar", "chat.container.returnToParent.aria": "Voltar para a sessão principal", "chat.container.returnToParent.titleNamed": "Voltar para: {title}", "chat.container.returnToParent.title": "Voltar para a sessão principal", diff --git a/packages/ui/src/lib/i18n/messages/uk.ts b/packages/ui/src/lib/i18n/messages/uk.ts index a216f818..a1801209 100644 --- a/packages/ui/src/lib/i18n/messages/uk.ts +++ b/packages/ui/src/lib/i18n/messages/uk.ts @@ -1693,6 +1693,7 @@ export const dict: Record = { "chat.queuedMessage.edit": "edit", "chat.queuedMessage.send": "send", "chat.queuedMessage.removeAria": "Видалити з черги", + "chat.queuedMessage.reorderAria": "Перетягніть, щоб змінити порядок", "chat.container.returnToParent.aria": "Повернутися до батьківської сесії", "chat.container.returnToParent.titleNamed": "Повернутися до: {title}", "chat.container.returnToParent.title": "Повернутися до батьківської сесії", diff --git a/packages/ui/src/lib/i18n/messages/zh-CN.ts b/packages/ui/src/lib/i18n/messages/zh-CN.ts index a6080c26..a86c388f 100644 --- a/packages/ui/src/lib/i18n/messages/zh-CN.ts +++ b/packages/ui/src/lib/i18n/messages/zh-CN.ts @@ -1693,6 +1693,7 @@ export const dict: Record = { 'chat.queuedMessage.edit': 'edit', 'chat.queuedMessage.send': 'send', 'chat.queuedMessage.removeAria': '从队列移除', + 'chat.queuedMessage.reorderAria': '拖动以重新排序', 'chat.container.returnToParent.aria': '返回父会话', 'chat.container.returnToParent.titleNamed': '返回到：{title}', 'chat.container.returnToParent.title': '返回父会话', diff --git a/packages/ui/src/lib/i18n/messages/zh-TW.ts b/packages/ui/src/lib/i18n/messages/zh-TW.ts index 388bf30e..bec6f32e 100644 --- a/packages/ui/src/lib/i18n/messages/zh-TW.ts +++ b/packages/ui/src/lib/i18n/messages/zh-TW.ts @@ -1697,6 +1697,7 @@ export const dict: Record = { 'chat.queuedMessage.edit': 'edit', 'chat.queuedMessage.send': 'send', 'chat.queuedMessage.removeAria': '從佇列移除', + 'chat.queuedMessage.reorderAria': '拖曳以重新排序', 'chat.container.returnToParent.aria': '返回父會話', 'chat.container.returnToParent.titleNamed': '返回到：{title}', 'chat.container.returnToParent.title': '返回父會話', diff --git a/packages/ui/src/stores/messageQueueStore.ts b/packages/ui/src/stores/messageQueueStore.ts index 5e28dc01..e7cf4e52 100644 --- a/packages/ui/src/stores/messageQueueStore.ts +++ b/packages/ui/src/stores/messageQueueStore.ts @@ -26,6 +26,7 @@ interface MessageQueueState { interface MessageQueueActions { addToQueue: (sessionId: string, message: Omit) => void; removeFromQueue: (sessionId: string, messageId: string) => void; + reorderQueue: (sessionId: string, fromId: string, toId: string) => void; popToInput: (sessionId: string, messageId: string) => QueuedMessage | null; clearQueue: (sessionId: string) => void; clearAllQueues: () => void; @@ -83,6 +84,28 @@ export const useMessageQueueStore = create()( }); }, + reorderQueue: (sessionId, fromId, toId) => { + if (fromId === toId) return; + set((state) => { + const currentQueue = state.queuedMessages[sessionId]; + if (!currentQueue) return state; + const fromIndex = currentQueue.findIndex((m) => m.id === fromId); + const toIndex = currentQueue.findIndex((m) => m.id === toId); + if (fromIndex === -1 || toIndex === -1) return state; + + const newQueue = currentQueue.slice(); + const [moved] = newQueue.splice(fromIndex, 1); + newQueue.splice(toIndex, 0, moved); + + return { + queuedMessages: { + ...state.queuedMessages, + [sessionId]: newQueue, + }, + }; + }); + }, + popToInput: (sessionId, messageId) => { const state = get(); const currentQueue = state.queuedMessages[sessionId] ?? [];