diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx index fb94ac5a759..b477c4744e4 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx @@ -10,7 +10,10 @@ import { } from '@/app/workspace/[workspaceId]/home/components/message-content' import { PendingTagIndicator } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags' import { QueuedMessages } from '@/app/workspace/[workspaceId]/home/components/queued-messages' -import { UserInput } from '@/app/workspace/[workspaceId]/home/components/user-input' +import { + UserInput, + type UserInputHandle, +} from '@/app/workspace/[workspaceId]/home/components/user-input' import { UserMessageContent } from '@/app/workspace/[workspaceId]/home/components/user-message-content' import type { ChatMessage, @@ -36,14 +39,12 @@ interface MothershipChatProps { messageQueue: QueuedMessage[] onRemoveQueuedMessage: (id: string) => void onSendQueuedMessage: (id: string) => Promise - onEditQueuedMessage: (id: string) => void + onEditQueuedMessage: (id: string) => QueuedMessage | undefined userId?: string chatId?: string onContextAdd?: (context: ChatContext) => void onContextRemove?: (context: ChatContext) => void onWorkspaceResourceSelect?: (resource: MothershipResource) => void - editValue?: string - onEditValueConsumed?: () => void layout?: 'mothership-view' | 'copilot-view' initialScrollBlocked?: boolean animateInput?: boolean @@ -91,8 +92,6 @@ export function MothershipChat({ onContextAdd, onContextRemove, onWorkspaceResourceSelect, - editValue, - onEditValueConsumed, layout = 'mothership-view', initialScrollBlocked = false, animateInput = false, @@ -106,11 +105,24 @@ export function MothershipChat({ }) const hasMessages = messages.length > 0 const initialScrollDoneRef = useRef(false) + const userInputRef = useRef(null) const handleSendQueuedHead = useCallback(() => { const topMessage = messageQueue[0] if (!topMessage) return void onSendQueuedMessage(topMessage.id) }, [messageQueue, onSendQueuedMessage]) + const handleEditQueued = useCallback( + (id: string) => { + const msg = onEditQueuedMessage(id) + if (msg) userInputRef.current?.loadQueuedMessage(msg) + }, + [onEditQueuedMessage] + ) + const handleEditQueuedTail = useCallback(() => { + const tail = messageQueue[messageQueue.length - 1] + if (!tail) return + handleEditQueued(tail.id) + }, [messageQueue, handleEditQueued]) useLayoutEffect(() => { if (!hasMessages) { @@ -205,9 +217,10 @@ export function MothershipChat({ messageQueue={messageQueue} onRemove={onRemoveQueuedMessage} onSendNow={onSendQueuedMessage} - onEdit={onEditQueuedMessage} + onEdit={handleEditQueued} /> diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx index c883cd49f25..55c0478727b 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx @@ -1,10 +1,13 @@ 'use client' -import { useState } from 'react' -import { ArrowUp, ChevronDown, ChevronRight, Pencil, Trash2 } from 'lucide-react' +import { useEffect, useRef, useState } from 'react' +import { ArrowUp, ChevronDown, ChevronRight, Paperclip, Pencil, Trash2 } from 'lucide-react' import { Tooltip } from '@/components/emcn' +import { UserMessageContent } from '@/app/workspace/[workspaceId]/home/components/user-message-content' import type { QueuedMessage } from '@/app/workspace/[workspaceId]/home/types' +const NARROW_WIDTH_PX = 320 + interface QueuedMessagesProps { messageQueue: QueuedMessage[] onRemove: (id: string) => void @@ -14,11 +17,28 @@ interface QueuedMessagesProps { export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: QueuedMessagesProps) { const [isExpanded, setIsExpanded] = useState(true) + const containerRef = useRef(null) + const [isNarrow, setIsNarrow] = useState(false) + + const hasMessages = messageQueue.length > 0 - if (messageQueue.length === 0) return null + useEffect(() => { + const el = containerRef.current + if (!el) return + const ro = new ResizeObserver((entries) => { + setIsNarrow(entries[0].contentRect.width < NARROW_WIDTH_PX) + }) + ro.observe(el) + return () => ro.disconnect() + }, [hasMessages]) + + if (!hasMessages) return null return ( -
+