fix: message stream pickup and task ordering

Author: emir-karabeg

apps/sim/app/api/mothership/chat/route.ts

@@ -126,6 +126,7 @@ export async function POST(req: NextRequest) {
         .set({
           messages: [...conversationHistory, userMsg],
           conversationId: userMessageId,
+          updatedAt: new Date(),
         })
         .where(eq(copilotChats.id, actualChatId))
     }

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -47,8 +47,8 @@ export function Home({ chatId }: HomeProps = {}) {
   return (
     <div className='flex h-full bg-[#FCFCFC] dark:bg-[var(--surface-2)]'>
       <div className='flex h-full min-w-0 flex-1 flex-col'>
-        <div className='min-h-0 flex-1 overflow-y-auto px-[16px] py-[16px]'>
-          <div className='mx-auto max-w-[768px] space-y-[16px]'>
+        <div className='min-h-0 flex-1 overflow-y-auto px-[24px] py-[16px]'>
+          <div className='mx-auto max-w-[640px] space-y-[16px]'>
             {messages.map((msg) => {
               if (msg.role === 'user') {
                 return (
@@ -91,7 +91,7 @@ export function Home({ chatId }: HomeProps = {}) {
           </div>
         </div>
 
-        <div className='flex-shrink-0 border-[var(--border)] border-t px-[24px] py-[16px]'>
+        <div className='flex-shrink-0 px-[24px] pb-[16px]'>
           <UserInput
             value={inputValue}
             onChange={setInputValue}

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { usePathname } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 import { MOTHERSHIP_CHAT_API_PATH } from '@/lib/copilot/constants'
 import {
+  type TaskChatHistory,
   type TaskStoredContentBlock,
   type TaskStoredMessage,
   taskKeys,
@@ -71,13 +72,22 @@ function getPayloadData(payload: SSEPayload): SSEPayloadData | undefined {
 export function useChat(workspaceId: string, initialChatId?: string): UseChatReturn {
   const pathname = usePathname()
   const queryClient = useQueryClient()
+  const router = useRouter()
+  const routerRef = useRef(router)
   const [messages, setMessages] = useState<ChatMessage[]>([])
   const [isSending, setIsSending] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const abortControllerRef = useRef<AbortController | null>(null)
   const chatIdRef = useRef<string | undefined>(initialChatId)
   const chatBottomRef = useRef<HTMLDivElement>(null)
   const appliedChatIdRef = useRef<string | undefined>(undefined)
+  const pendingUserMsgRef = useRef<{ id: string; content: string } | null>(null)
+  const streamIdRef = useRef<string | undefined>(undefined)
+  const sendingRef = useRef(false)
+
+  useEffect(() => {
+    routerRef.current = router
+  }, [router])
 
   const isHomePage = pathname.endsWith('/home')
 
@@ -161,11 +171,17 @@ export function useChat(workspaceId: string, initialChatId?: string): UseChatRet
                 chatIdRef.current = parsed.chatId
                 queryClient.invalidateQueries({ queryKey: taskKeys.list(workspaceId) })
                 if (isNewChat) {
-                  window.history.replaceState(
-                    null,
-                    '',
-                    `/workspace/${workspaceId}/task/${parsed.chatId}`
-                  )
+                  const userMsg = pendingUserMsgRef.current
+                  const activeStreamId = streamIdRef.current
+                  if (userMsg && activeStreamId) {
+                    queryClient.setQueryData<TaskChatHistory>(taskKeys.detail(parsed.chatId), {
+                      id: parsed.chatId,
+                      title: null,
+                      messages: [{ id: userMsg.id, role: 'user', content: userMsg.content }],
+                      activeStreamId,
+                    })
+                  }
+                  routerRef.current.replace(`/workspace/${workspaceId}/task/${parsed.chatId}`)
                 }
               }
               break
@@ -266,7 +282,7 @@ export function useChat(workspaceId: string, initialChatId?: string): UseChatRet
 
   useEffect(() => {
     const activeStreamId = chatHistory?.activeStreamId
-    if (!activeStreamId || !appliedChatIdRef.current) return
+    if (!activeStreamId || !appliedChatIdRef.current || sendingRef.current) return
 
     const abortController = new AbortController()
     abortControllerRef.current = abortController
@@ -295,19 +311,41 @@ export function useChat(workspaceId: string, initialChatId?: string): UseChatRet
 
     return () => {
       abortController.abort()
+      appliedChatIdRef.current = undefined
     }
   }, [chatHistory?.activeStreamId, processSSEStream, finalize])
 
   const sendMessage = useCallback(
     async (message: string) => {
       if (!message.trim() || !workspaceId) return
 
+      abortControllerRef.current?.abort()
+
       setError(null)
       setIsSending(true)
+      sendingRef.current = true
 
       const userMessageId = crypto.randomUUID()
       const assistantId = crypto.randomUUID()
 
+      pendingUserMsgRef.current = { id: userMessageId, content: message }
+      streamIdRef.current = userMessageId
+
+      if (chatIdRef.current) {
+        queryClient.setQueryData<TaskChatHistory>(taskKeys.detail(chatIdRef.current), (old) =>
+          old
+            ? {
+                ...old,
+                messages: [
+                  ...old.messages,
+                  { id: userMessageId, role: 'user' as const, content: message },
+                ],
+                activeStreamId: userMessageId,
+              }
+            : undefined
+        )
+      }
+
       setMessages((prev) => [
         ...prev,
         { id: userMessageId, role: 'user', content: message },
@@ -343,10 +381,11 @@ export function useChat(workspaceId: string, initialChatId?: string): UseChatRet
         if (err instanceof Error && err.name === 'AbortError') return
         setError(err instanceof Error ? err.message : 'Failed to send message')
       } finally {
+        sendingRef.current = false
         finalize()
       }
     },
-    [workspaceId, processSSEStream, finalize]
+    [workspaceId, queryClient, processSSEStream, finalize]
   )
 
   const stopGeneration = useCallback(() => {

apps/sim/lib/copilot/chat-streaming.ts

@@ -158,12 +158,6 @@ export function createSSEStream(params: StreamingOrchestrationParams): ReadableS
           },
         })
 
-        if (currentChat) {
-          await db
-            .update(copilotChats)
-            .set({ updatedAt: new Date() })
-            .where(eq(copilotChats.id, chatId!))
-        }
         await eventWriter.close()
         await setStreamMeta(streamId, { status: 'complete', userId })
       } catch (error) {