BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>
This commit is contained in:
Serhii Dziupin
2026-06-26 19:35:45 +03:00
committed by GitHub
co-authored by Serhii Dziupin
parent fc9146eb7b
commit e7b952cbcb
11 changed files with 100 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/QueuedMessageChips.tsx
+68 -12
View File
@@ -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>
);
packages/ui/src/lib/i18n/messages/en.ts
+1
View File
@@ -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',
packages/ui/src/lib/i18n/messages/es.ts
+1
View File
@@ -1693,6 +1693,7 @@ export const dict: Record<I18nKey, string> = {
"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",
packages/ui/src/lib/i18n/messages/fr.ts
+1
View File
@@ -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',
packages/ui/src/lib/i18n/messages/ko.ts
+1
View File
@@ -1729,6 +1729,7 @@ export const dict: Record<I18nKey, string> = {
'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': '상위 세션으로 돌아가기',
packages/ui/src/lib/i18n/messages/pl.ts
+1
View File
@@ -663,6 +663,7 @@ export const dict: Record<I18nKey, string> = {
'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',
packages/ui/src/lib/i18n/messages/pt-BR.ts
+1
View File
@@ -1693,6 +1693,7 @@ export const dict: Record<I18nKey, string> = {
"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",
packages/ui/src/lib/i18n/messages/uk.ts
+1
View File
@@ -1693,6 +1693,7 @@ export const dict: Record<I18nKey, string> = {
"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": "Повернутися до батьківської сесії",
packages/ui/src/lib/i18n/messages/zh-CN.ts
+1
View File
@@ -1693,6 +1693,7 @@ export const dict: Record<I18nKey, string> = {
'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': '返回父会话',
packages/ui/src/lib/i18n/messages/zh-TW.ts
+1
View File
@@ -1697,6 +1697,7 @@ export const dict: Record<I18nKey, string> = {
'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': '返回父會話',
packages/ui/src/stores/messageQueueStore.ts
+23
View File
@@ -26,6 +26,7 @@ interface MessageQueueState {
interface MessageQueueActions {
addToQueue: (sessionId: string, message: Omit<QueuedMessage, 'id' | 'createdAt'>) => 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<MessageQueueStore>()(
});
},
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] ?? [];