improvement(mothership): message queueing for home chat (#3576)

* improvement(mothership): message queueing for home chat * fix(mothership): address PR review — move FileAttachmentForApi to types, defer onEditValueConsumed to effect, await sendMessage in sendNow * fix(mothership): replace updater side-effect with useEffect ref sync, move sendMessageRef to useLayoutEffect * fix(mothership): clear message queue on chat switch while sending * fix(mothership): remove stale isSending from handleKeyDown deps * fix(mothership): guard sendNow against double-click duplicate sends * fix(mothership): simplify queue callbacks — drop redundant deps and guard ref - Remove `setMessageQueue` from useCallback deps (stable setter, never changes) - Replace `sendNowProcessingRef` double-click guard with eager `messageQueueRef` update - Simplify `editQueuedMessage` with same eager-ref pattern for consistency Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(mothership): clear edit value on nav, stop queue drain on send failure - Reset editingInputValue when chatId changes so stale edit text doesn't leak into the next chat - Pass error flag to finalize so queue is cleared (not drained) when sendMessage fails — prevents cascading failures on auth expiry or rate limiting from silently consuming every queued message Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(mothership): eagerly update messageQueueRef in removeFromQueue Match the pattern used by sendNow and editQueuedMessage — update the ref synchronously so finalize's microtask cannot read a stale queue and drain a message the user just removed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(mothership): mark onSendNow as explicit fire-and-forget Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
simstudioai · waleedlatif1 · Mar 17, 2026 · Mar 13, 2026 · Mar 13, 2026 · Mar 14, 2026
commit b2d146ca0a9dc0cc14c27982ad30a88279a6cda0
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/index.ts
@@ -1,5 +1,6 @@
 export { MessageContent } from './message-content'
 export { MothershipView } from './mothership-view'
+export { QueuedMessages } from './queued-messages'
 export { TemplatePrompts } from './template-prompts'
 export { UserInput } from './user-input'
 export { UserMessageContent } from './user-message-content'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/index.ts
@@ -0,0 +1 @@
+export { QueuedMessages } from './queued-messages'
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
@@ -0,0 +1,113 @@
+'use client'
+
+import { useState } from 'react'
+import { ArrowUp, ChevronDown, ChevronRight, Pencil, Trash2 } from 'lucide-react'
+import { Tooltip } from '@/components/emcn'
+import type { QueuedMessage } from '@/app/workspace/[workspaceId]/home/types'
+
+interface QueuedMessagesProps {
+  messageQueue: QueuedMessage[]
+  onRemove: (id: string) => void
+  onSendNow: (id: string) => Promise<void>
+  onEdit: (id: string) => void
+}
+
+export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: QueuedMessagesProps) {
+  const [isExpanded, setIsExpanded] = useState(true)
+
+  if (messageQueue.length === 0) return null
+
+  return (
+    <div className='-mb-[12px] mx-[14px] overflow-hidden rounded-t-[16px] border border-[var(--border-1)] border-b-0 bg-[var(--surface-2)] pb-[12px] dark:bg-[var(--surface-3)]'>
+      <button
+        type='button'
+        onClick={() => setIsExpanded(!isExpanded)}
+        className='flex w-full items-center gap-[6px] px-[14px] py-[8px] transition-colors hover:bg-black/[0.03] dark:hover:bg-white/[0.03]'
+      >
+        {isExpanded ? (
+          <ChevronDown className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
+        ) : (
+          <ChevronRight className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
+        )}
+        <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+          {messageQueue.length} Queued
+        </span>
+      </button>
+
+      {isExpanded && (
+        <div>
+          {messageQueue.map((msg) => (
+            <div
+              key={msg.id}
+              className='flex items-center gap-[8px] px-[14px] py-[6px] transition-colors hover:bg-black/[0.03] dark:hover:bg-white/[0.03]'
+            >
+              <div className='flex h-[16px] w-[16px] shrink-0 items-center justify-center'>
+                <div className='h-[10px] w-[10px] rounded-full border-[1.5px] border-[var(--text-tertiary)]/40' />
+              </div>
+
+              <div className='min-w-0 flex-1'>
+                <p className='truncate text-[13px] text-[var(--text-primary)]'>{msg.content}</p>
+              </div>
+
+              <div className='flex shrink-0 items-center gap-[2px]'>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <button
+                      type='button'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        onEdit(msg.id)
+                      }}
+                      className='rounded-[6px] p-[5px] text-[var(--text-tertiary)] transition-colors hover:bg-black/[0.06] hover:text-[var(--text-primary)] dark:hover:bg-white/[0.06]'
+                    >
+                      <Pencil className='h-[13px] w-[13px]' />
+                    </button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content side='top' sideOffset={4}>
+                    Edit queued message
+                  </Tooltip.Content>
+                </Tooltip.Root>
+
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <button
+                      type='button'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        void onSendNow(msg.id)
+                      }}
+                      className='rounded-[6px] p-[5px] text-[var(--text-tertiary)] transition-colors hover:bg-black/[0.06] hover:text-[var(--text-primary)] dark:hover:bg-white/[0.06]'
+                    >
+                      <ArrowUp className='h-[13px] w-[13px]' />
+                    </button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content side='top' sideOffset={4}>
+                    Send now
+                  </Tooltip.Content>
+                </Tooltip.Root>
+
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <button
+                      type='button'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        onRemove(msg.id)
+                      }}
+                      className='rounded-[6px] p-[5px] text-[var(--text-tertiary)] transition-colors hover:bg-black/[0.06] hover:text-[var(--text-primary)] dark:hover:bg-white/[0.06]'
+                    >
+                      <Trash2 className='h-[13px] w-[13px]' />
+                    </button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content side='top' sideOffset={4}>
+                    Remove from queue
+                  </Tooltip.Content>
+                </Tooltip.Root>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -64,7 +64,10 @@ import { cn } from '@/lib/core/utils/cn'
 import { CHAT_ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
 import { useAvailableResources } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown'
 import { getResourceConfig } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
-import type { MothershipResource } from '@/app/workspace/[workspaceId]/home/types'
+import type {
+  FileAttachmentForApi,
+  MothershipResource,
+} from '@/app/workspace/[workspaceId]/home/types'
 import {
   useContextManagement,
   useFileAttachments,
@@ -125,9 +128,17 @@ function autoResizeTextarea(e: React.FormEvent<HTMLTextAreaElement>, maxHeight:
 function mapResourceToContext(resource: MothershipResource): ChatContext {
   switch (resource.type) {
     case 'workflow':
-      return { kind: 'workflow', workflowId: resource.id, label: resource.title }
+      return {
+        kind: 'workflow',
+        workflowId: resource.id,
+        label: resource.title,
+      }
     case 'knowledgebase':
-      return { kind: 'knowledge', knowledgeId: resource.id, label: resource.title }
+      return {
+        kind: 'knowledge',
+        knowledgeId: resource.id,
+        label: resource.title,
+      }
     case 'table':
       return { kind: 'table', tableId: resource.id, label: resource.title }
     case 'file':
@@ -137,16 +148,12 @@ function mapResourceToContext(resource: MothershipResource): ChatContext {
   }
 }
 
-export interface FileAttachmentForApi {
-  id: string
-  key: string
-  filename: string
-  media_type: string
-  size: number
-}
+export type { FileAttachmentForApi } from '@/app/workspace/[workspaceId]/home/types'
 
 interface UserInputProps {
   defaultValue?: string
+  editValue?: string
+  onEditValueConsumed?: () => void
   onSubmit: (
     text: string,
     fileAttachments?: FileAttachmentForApi[],
@@ -161,6 +168,8 @@ interface UserInputProps {
 
 export function UserInput({
   defaultValue = '',
+  editValue,
+  onEditValueConsumed,
   onSubmit,
   isSending,
   onStopGeneration,
@@ -176,9 +185,27 @@ export function UserInput({
   const [plusMenuActiveIndex, setPlusMenuActiveIndex] = useState(0)
   const overlayRef = useRef<HTMLDivElement>(null)
 
+  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue)
+  if (defaultValue && defaultValue !== prevDefaultValue) {
+    setPrevDefaultValue(defaultValue)
+    setValue(defaultValue)
+  } else if (!defaultValue && prevDefaultValue) {
+    setPrevDefaultValue(defaultValue)
+  }
+
+  const [prevEditValue, setPrevEditValue] = useState(editValue)
+  if (editValue && editValue !== prevEditValue) {
+    setPrevEditValue(editValue)
+    setValue(editValue)
+  } else if (!editValue && prevEditValue) {
+    setPrevEditValue(editValue)
+  }
+
   useEffect(() => {
-    if (defaultValue) setValue(defaultValue)
-  }, [defaultValue])
+    if (editValue) {
+      onEditValueConsumed?.()
+    }
+  }, [editValue, onEditValueConsumed])
 
   const animatedPlaceholder = useAnimatedPlaceholder(isInitialView)
   const placeholder = isInitialView ? animatedPlaceholder : 'Send message to Sim'
@@ -393,9 +420,7 @@ export function UserInput({
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
       if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
         e.preventDefault()
-        if (!isSending) {
-          handleSubmit()
-        }
+        handleSubmit()
         return
       }
 
@@ -461,7 +486,7 @@ export function UserInput({
         }
       }
     },
-    [handleSubmit, isSending, mentionTokensWithContext, value, textareaRef]
+    [handleSubmit, mentionTokensWithContext, value, textareaRef]
   )
 
   const handleInputChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -637,7 +662,9 @@ export function UserInput({
         <span
           key={`mention-${i}-${range.start}-${range.end}`}
           className='rounded-[5px] bg-[var(--surface-5)] py-[2px]'
-          style={{ boxShadow: '-2px 0 0 var(--surface-5), 2px 0 0 var(--surface-5)' }}
+          style={{
+            boxShadow: '-2px 0 0 var(--surface-5), 2px 0 0 var(--surface-5)',
+          }}
         >
           <span className='relative'>
             <span className='invisible'>{range.token.charAt(0)}</span>
@@ -662,7 +689,7 @@ export function UserInput({
     <div
       onClick={handleContainerClick}
       className={cn(
-        'relative mx-auto w-full max-w-[42rem] cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--white)] px-[10px] py-[8px] dark:bg-[var(--surface-4)]',
+        'relative z-10 mx-auto w-full max-w-[42rem] cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--white)] px-[10px] py-[8px] dark:bg-[var(--surface-4)]',
         isInitialView && 'shadow-sm'
       )}
       onDragEnter={files.handleDragEnter}
@@ -818,7 +845,11 @@ export function UserInput({
                           )}
                           onMouseEnter={() => setPlusMenuActiveIndex(index)}
                           onClick={() => {
-                            handleResourceSelect({ type, id: item.id, title: item.name })
+                            handleResourceSelect({
+                              type,
+                              id: item.id,
+                              title: item.name,
+                            })
                             setPlusMenuOpen(false)
                             setPlusMenuSearch('')
                             setPlusMenuActiveIndex(0)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -19,14 +19,14 @@ import type { ChatContext } from '@/stores/panel'
 import {
   MessageContent,
   MothershipView,
+  QueuedMessages,
   TemplatePrompts,
   UserInput,
   UserMessageContent,
 } from './components'
 import { PendingTagIndicator } from './components/message-content/components/special-tags'
-import type { FileAttachmentForApi } from './components/user-input/user-input'
 import { useAutoScroll, useChat } from './hooks'
-import type { MothershipResource, MothershipResourceType } from './types'
+import type { FileAttachmentForApi, MothershipResource, MothershipResourceType } from './types'
 
 const logger = createLogger('Home')
 
@@ -183,8 +183,29 @@ export function Home({ chatId }: HomeProps = {}) {
     addResource,
     removeResource,
     reorderResources,
+    messageQueue,
+    removeFromQueue,
+    sendNow,
+    editQueuedMessage,
   } = useChat(workspaceId, chatId, { onResourceEvent: handleResourceEvent })
 
+  const [editingInputValue, setEditingInputValue] = useState('')
+  const clearEditingValue = useCallback(() => setEditingInputValue(''), [])
+
+  const handleEditQueuedMessage = useCallback(
+    (id: string) => {
+      const msg = editQueuedMessage(id)
+      if (msg) {
+        setEditingInputValue(msg.content)
+      }
+    },
+    [editQueuedMessage]
+  )
+
+  useEffect(() => {
+    setEditingInputValue('')
+  }, [chatId])
+
   useEffect(() => {
     wasSendingRef.current = false
     if (resolvedChatId) markRead(resolvedChatId)
@@ -419,13 +440,21 @@ export function Home({ chatId }: HomeProps = {}) {
 
         <div className='flex-shrink-0 px-[24px] pb-[16px]'>
           <div className='mx-auto max-w-[42rem]'>
+            <QueuedMessages
+              messageQueue={messageQueue}
+              onRemove={removeFromQueue}
+              onSendNow={sendNow}
+              onEdit={handleEditQueuedMessage}
+            />
             <UserInput
               onSubmit={handleSubmit}
               isSending={isSending}
               onStopGeneration={stopGeneration}
               isInitialView={false}
               userId={session?.user?.id}
               onContextAdd={handleContextAdd}
+              editValue={editingInputValue}
+              onEditValueConsumed={clearEditingValue}
             />
           </div>
         </div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { QueuedMessages } from './queued-messages'