Message queue

Author: Sg312

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/index.ts

@@ -1,5 +1,6 @@
 export * from './copilot-message/copilot-message'
 export * from './plan-mode-section/plan-mode-section'
+export * from './queued-messages/queued-messages'
 export * from './todo-list/todo-list'
 export * from './tool-call/tool-call'
 export * from './user-input/user-input'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/queued-messages/queued-messages.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import { ArrowUp, ChevronDown, ChevronRight, MoreHorizontal, Trash2 } from 'lucide-react'
+import { useCopilotStore } from '@/stores/panel/copilot/store'
+
+/**
+ * Displays queued messages in a Cursor-style collapsible panel above the input box.
+ */
+export function QueuedMessages() {
+  const messageQueue = useCopilotStore((s) => s.messageQueue)
+  const removeFromQueue = useCopilotStore((s) => s.removeFromQueue)
+  const sendNow = useCopilotStore((s) => s.sendNow)
+
+  const [isExpanded, setIsExpanded] = useState(true)
+
+  const handleRemove = useCallback(
+    (id: string) => {
+      removeFromQueue(id)
+    },
+    [removeFromQueue]
+  )
+
+  const handleSendNow = useCallback(
+    async (id: string) => {
+      await sendNow(id)
+    },
+    [sendNow]
+  )
+
+  if (messageQueue.length === 0) return null
+
+  return (
+    <div className='mx-2 overflow-hidden rounded-t-lg border border-b-0 border-black/[0.08] bg-[var(--bg-secondary)] dark:border-white/[0.08]'>
+      {/* Header */}
+      <button
+        type='button'
+        onClick={() => setIsExpanded(!isExpanded)}
+        className='flex w-full items-center justify-between px-2.5 py-1.5 transition-colors hover:bg-[var(--bg-tertiary)]'
+      >
+        <div className='flex items-center gap-1.5'>
+          {isExpanded ? (
+            <ChevronDown className='h-3 w-3 text-[var(--text-tertiary)]' />
+          ) : (
+            <ChevronRight className='h-3 w-3 text-[var(--text-tertiary)]' />
+          )}
+          <span className='text-xs font-medium text-[var(--text-secondary)]'>
+            {messageQueue.length} Queued
+          </span>
+        </div>
+        <MoreHorizontal className='h-3 w-3 text-[var(--text-tertiary)]' />
+      </button>
+
+      {/* Message list */}
+      {isExpanded && (
+        <div>
+          {messageQueue.map((msg, index) => (
+            <div
+              key={msg.id}
+              className='group flex items-center gap-2 border-t border-black/[0.04] px-2.5 py-1.5 hover:bg-[var(--bg-tertiary)] dark:border-white/[0.04]'
+            >
+              {/* Radio indicator */}
+              <div className='flex h-3 w-3 shrink-0 items-center justify-center'>
+                <div className='h-2.5 w-2.5 rounded-full border border-[var(--text-tertiary)]/50' />
+              </div>
+
+              {/* Message content */}
+              <div className='min-w-0 flex-1'>
+                <p className='truncate text-xs text-[var(--text-primary)]'>
+                  {msg.content}
+                </p>
+              </div>
+
+              {/* Actions */}
+              <div className='flex shrink-0 items-center gap-1'>
+                {/* Send immediately button */}
+                <button
+                  type='button'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleSendNow(msg.id)
+                  }}
+                  className='rounded p-1 text-[var(--text-tertiary)] transition-colors hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]'
+                  title='Send immediately (stops current)'
+                >
+                  <ArrowUp className='h-3.5 w-3.5' />
+                </button>
+                {/* Delete button */}
+                <button
+                  type='button'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleRemove(msg.id)
+                  }}
+                  className='rounded p-1 text-[var(--text-tertiary)] transition-colors hover:bg-[var(--bg-tertiary)] hover:text-red-400'
+                  title='Remove from queue'
+                >
+                  <Trash2 className='h-3.5 w-3.5' />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx

@@ -300,7 +300,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       async (overrideMessage?: string, options: { preserveInput?: boolean } = {}) => {
         const targetMessage = overrideMessage ?? message
         const trimmedMessage = targetMessage.trim()
-        if (!trimmedMessage || disabled || isLoading) return
+        // Allow submission even when isLoading - store will queue the message
+        if (!trimmedMessage || disabled) return
 
         const failedUploads = fileAttachments.attachedFiles.filter((f) => !f.uploading && !f.key)
         if (failedUploads.length > 0) {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx

@@ -25,6 +25,7 @@ import { Trash } from '@/components/emcn/icons/trash'
 import {
   CopilotMessage,
   PlanModeSection,
+  QueuedMessages,
   TodoList,
   UserInput,
   Welcome,
@@ -298,7 +299,8 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
    */
   const handleSubmit = useCallback(
     async (query: string, fileAttachments?: MessageFileAttachment[], contexts?: any[]) => {
-      if (!query || isSendingMessage || !activeWorkflowId) return
+      // Allow submission even when isSendingMessage - store will queue the message
+      if (!query || !activeWorkflowId) return
 
       if (showPlanTodos) {
         const store = useCopilotStore.getState()
@@ -316,7 +318,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
         logger.error('Failed to send message:', error)
       }
     },
-    [isSendingMessage, activeWorkflowId, sendMessage, showPlanTodos]
+    [activeWorkflowId, sendMessage, showPlanTodos]
   )
 
   /**
@@ -588,6 +590,9 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                   )}
                 </div>
 
+                {/* Queued messages (shown when messages are waiting) */}
+                <QueuedMessages />
+
                 {/* Input area with integrated mode selector */}
                 <div className='flex-shrink-0 px-[8px] pb-[8px]'>
                   <UserInput

apps/sim/stores/panel/copilot/store.ts

@@ -1944,6 +1944,7 @@ const initialState = {
   suppressAutoSelect: false,
   contextUsage: null,
   autoAllowedTools: [] as string[],
+  messageQueue: [] as import('./types').QueuedMessage[],
 }
 
 export const useCopilotStore = create<CopilotStore>()(
@@ -2301,7 +2302,7 @@ export const useCopilotStore = create<CopilotStore>()(
 
     // Send a message (streaming only)
     sendMessage: async (message: string, options = {}) => {
-      const { workflowId, currentChat, mode, revertState } = get()
+      const { workflowId, currentChat, mode, revertState, isSendingMessage } = get()
       const {
         stream = true,
         fileAttachments,
@@ -2316,6 +2317,13 @@ export const useCopilotStore = create<CopilotStore>()(
 
       if (!workflowId) return
 
+      // If already sending a message, queue this one instead
+      if (isSendingMessage) {
+        get().addToQueue(message, { fileAttachments, contexts })
+        logger.info('[Copilot] Message queued (already sending)', { queueLength: get().messageQueue.length + 1 })
+        return
+      }
+
       const abortController = new AbortController()
       set({ isSendingMessage: true, error: null, abortController })
 
@@ -3044,6 +3052,23 @@ export const useCopilotStore = create<CopilotStore>()(
           await get().handleNewChatCreation(context.newChatId)
         }
 
+        // Process next message in queue if any
+        const nextInQueue = get().messageQueue[0]
+        if (nextInQueue) {
+          logger.info('[Queue] Processing next queued message', { id: nextInQueue.id, queueLength: get().messageQueue.length })
+          // Remove from queue and send
+          get().removeFromQueue(nextInQueue.id)
+          // Use setTimeout to avoid blocking the current execution
+          setTimeout(() => {
+            get().sendMessage(nextInQueue.content, {
+              stream: true,
+              fileAttachments: nextInQueue.fileAttachments,
+              contexts: nextInQueue.contexts,
+              messageId: nextInQueue.id,
+            })
+          }, 100)
+        }
+
         // Persist full message state (including contentBlocks), plan artifact, and config to database
         const { currentChat, streamingPlanContent, mode, selectedModel } = get()
         if (currentChat) {
@@ -3526,6 +3551,66 @@ export const useCopilotStore = create<CopilotStore>()(
       const { autoAllowedTools } = get()
       return autoAllowedTools.includes(toolId)
     },
+
+    // Message queue actions
+    addToQueue: (message, options) => {
+      const queuedMessage: import('./types').QueuedMessage = {
+        id: crypto.randomUUID(),
+        content: message,
+        fileAttachments: options?.fileAttachments,
+        contexts: options?.contexts,
+        queuedAt: Date.now(),
+      }
+      set({ messageQueue: [...get().messageQueue, queuedMessage] })
+      logger.info('[Queue] Message added to queue', { id: queuedMessage.id, queueLength: get().messageQueue.length })
+    },
+
+    removeFromQueue: (id) => {
+      set({ messageQueue: get().messageQueue.filter((m) => m.id !== id) })
+      logger.info('[Queue] Message removed from queue', { id, queueLength: get().messageQueue.length })
+    },
+
+    moveUpInQueue: (id) => {
+      const queue = [...get().messageQueue]
+      const index = queue.findIndex((m) => m.id === id)
+      if (index > 0) {
+        const item = queue[index]
+        queue.splice(index, 1)
+        queue.splice(index - 1, 0, item)
+        set({ messageQueue: queue })
+        logger.info('[Queue] Message moved up in queue', { id, newIndex: index - 1 })
+      }
+    },
+
+    sendNow: async (id) => {
+      const queue = get().messageQueue
+      const message = queue.find((m) => m.id === id)
+      if (!message) return
+
+      // Remove from queue first
+      get().removeFromQueue(id)
+
+      // If currently sending, abort and send this one
+      const { isSendingMessage } = get()
+      if (isSendingMessage) {
+        get().abortMessage()
+        // Wait a tick for abort to complete
+        await new Promise((resolve) => setTimeout(resolve, 50))
+      }
+
+      // Send the message
+      await get().sendMessage(message.content, {
+        stream: true,
+        fileAttachments: message.fileAttachments,
+        contexts: message.contexts,
+        messageId: message.id,
+      })
+    },
+
+    clearQueue: () => {
+      set({ messageQueue: [] })
+      logger.info('[Queue] Queue cleared')
+    },
   }))
 )
 

apps/sim/stores/panel/copilot/types.ts

@@ -60,6 +60,18 @@ export interface CopilotMessage {
   errorType?: 'usage_limit' | 'unauthorized' | 'forbidden' | 'rate_limit' | 'upgrade_required'
 }
 
+/**
+ * A message queued for sending while another message is in progress.
+ * Like Cursor's queued message feature.
+ */
+export interface QueuedMessage {
+  id: string
+  content: string
+  fileAttachments?: MessageFileAttachment[]
+  contexts?: ChatContext[]
+  queuedAt: number
+}
+
 // Contexts attached to a user message
 export type ChatContext =
   | { kind: 'past_chat'; chatId: string; label: string }
@@ -161,6 +173,9 @@ export interface CopilotState {
 
   // Auto-allowed integration tools (tools that can run without confirmation)
   autoAllowedTools: string[]
+
+  // Message queue for messages sent while another is in progress
+  messageQueue: QueuedMessage[]
 }
 
 export interface CopilotActions {
@@ -238,6 +253,19 @@ export interface CopilotActions {
   addAutoAllowedTool: (toolId: string) => Promise<void>
   removeAutoAllowedTool: (toolId: string) => Promise<void>
   isToolAutoAllowed: (toolId: string) => boolean
+
+  // Message queue actions
+  addToQueue: (
+    message: string,
+    options?: {
+      fileAttachments?: MessageFileAttachment[]
+      contexts?: ChatContext[]
+    }
+  ) => void
+  removeFromQueue: (id: string) => void
+  moveUpInQueue: (id: string) => void
+  sendNow: (id: string) => Promise<void>
+  clearQueue: () => void
 }
 
 export type CopilotStore = CopilotState & CopilotActions