finalized task navigation

emir-karabeg · emir-karabeg · commit b57636e5b1cd · 2026-03-03T15:24:31.000-08:00
diff --git a/apps/sim/app/workspace/[workspaceId]/error.tsx b/apps/sim/app/workspace/[workspaceId]/error.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react'
 import { createLogger } from '@sim/logger'
-import { AlertTriangle, RefreshCw } from 'lucide-react'
+import { RefreshCw } from 'lucide-react'
 import { Button } from '@/components/emcn'
 
 const logger = createLogger('WorkspaceError')
@@ -20,9 +20,6 @@ export default function WorkspaceError({ error, reset }: WorkspaceErrorProps) {
   return (
     <div className='flex h-full flex-1 items-center justify-center bg-white dark:bg-[var(--bg)]'>
       <div className='flex flex-col items-center gap-[16px] text-center'>
-        <div className='flex h-[48px] w-[48px] items-center justify-center rounded-full bg-[var(--surface-4)]'>
-          <AlertTriangle className='h-[24px] w-[24px] text-[var(--text-error)]' />
-        </div>
         <div className='flex flex-col gap-[8px]'>
           <h2 className='font-semibold text-[16px] text-[var(--text-primary)]'>
             Something went wrong
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -2,51 +2,28 @@
 
 import { useCallback, useState } from 'react'
 import { Loader2 } from 'lucide-react'
-import { useParams, useRouter } from 'next/navigation'
-import { MOTHERSHIP_CHAT_API_PATH } from '@/lib/copilot/constants'
+import { useParams } from 'next/navigation'
 import { MessageContent, UserInput } from './components'
 import { useChat } from './hooks'
 
 interface HomeProps {
   chatId?: string
-  streamId?: string
-  initialMessage?: string
 }
 
-export function Home({ chatId, streamId, initialMessage }: HomeProps = {}) {
+export function Home({ chatId }: HomeProps = {}) {
   const { workspaceId } = useParams<{ workspaceId: string }>()
-  const router = useRouter()
   const [inputValue, setInputValue] = useState('')
-  const { messages, isSending, currentChatId, sendMessage, stopGeneration, chatBottomRef } =
-    useChat(workspaceId, chatId, streamId, initialMessage)
+  const { messages, isSending, sendMessage, stopGeneration, chatBottomRef } = useChat(
+    workspaceId,
+    chatId
+  )
 
   const handleSubmit = useCallback(() => {
     const trimmed = inputValue.trim()
     if (!trimmed) return
     setInputValue('')
-
-    if (chatId || currentChatId) {
-      sendMessage(trimmed)
-      return
-    }
-
-    const userMessageId = crypto.randomUUID()
-
-    fetch(MOTHERSHIP_CHAT_API_PATH, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        message: trimmed,
-        workspaceId,
-        userMessageId,
-        createNewChat: true,
-      }),
-    }).catch(() => {})
-
-    router.push(
-      `/workspace/${workspaceId}/task/new?sid=${userMessageId}&m=${encodeURIComponent(trimmed)}`
-    )
-  }, [inputValue, chatId, currentChatId, sendMessage, workspaceId, router])
+    sendMessage(trimmed)
+  }, [inputValue, sendMessage])
 
   const hasMessages = messages.length > 0
 
diff --git a/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts b/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
+import { usePathname } from 'next/navigation'
 import { MOTHERSHIP_CHAT_API_PATH } from '@/lib/copilot/constants'
 import {
   type TaskStoredContentBlock,
@@ -21,7 +22,6 @@ export interface UseChatReturn {
   messages: ChatMessage[]
   isSending: boolean
   error: string | null
-  currentChatId: string | undefined
   sendMessage: (message: string) => Promise<void>
   stopGeneration: () => void
   chatBottomRef: React.RefObject<HTMLDivElement | null>
@@ -68,30 +68,40 @@ function getPayloadData(payload: SSEPayload): SSEPayloadData | undefined {
   return typeof payload.data === 'object' ? payload.data : undefined
 }
 
-export function useChat(
-  workspaceId: string,
-  initialChatId?: string,
-  initialStreamId?: string,
-  initialMessage?: string
-): UseChatReturn {
+export function useChat(workspaceId: string, initialChatId?: string): UseChatReturn {
+  const pathname = usePathname()
   const queryClient = useQueryClient()
   const [messages, setMessages] = useState<ChatMessage[]>([])
-  const [isSending, setIsSending] = useState(Boolean(initialStreamId))
+  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 isHomePage = pathname.endsWith('/home')
+
   const { data: chatHistory } = useChatHistory(initialChatId)
 
   useEffect(() => {
     chatIdRef.current = initialChatId
     appliedChatIdRef.current = undefined
     setMessages([])
     setError(null)
+    setIsSending(false)
   }, [initialChatId])
 
+  useEffect(() => {
+    if (!isHomePage || !chatIdRef.current) return
+    chatIdRef.current = undefined
+    appliedChatIdRef.current = undefined
+    abortControllerRef.current?.abort()
+    abortControllerRef.current = null
+    setMessages([])
+    setError(null)
+    setIsSending(false)
+  }, [isHomePage])
+
   useEffect(() => {
     if (!chatHistory || appliedChatIdRef.current === chatHistory.id) return
     appliedChatIdRef.current = chatHistory.id
@@ -288,47 +298,6 @@ export function useChat(
     }
   }, [chatHistory?.activeStreamId, processSSEStream, finalize])
 
-  useEffect(() => {
-    if (!initialStreamId) return
-
-    const abortController = new AbortController()
-    abortControllerRef.current = abortController
-
-    const userMessageId = initialStreamId
-    const assistantId = crypto.randomUUID()
-
-    setMessages([
-      { id: userMessageId, role: 'user', content: initialMessage || '' },
-      { id: assistantId, role: 'assistant', content: '', contentBlocks: [] },
-    ])
-
-    const connectToStream = async () => {
-      try {
-        const response = await fetch(
-          `/api/copilot/chat/stream?streamId=${initialStreamId}&from=0`,
-          { signal: abortController.signal }
-        )
-
-        if (!response.ok || !response.body) {
-          throw new Error('Failed to connect to stream')
-        }
-
-        await processSSEStream(response.body.getReader(), assistantId)
-      } catch (err) {
-        if (err instanceof Error && err.name === 'AbortError') return
-        setError(err instanceof Error ? err.message : 'Failed to connect to stream')
-      } finally {
-        finalize()
-      }
-    }
-
-    connectToStream()
-
-    return () => {
-      abortController.abort()
-    }
-  }, [initialStreamId, initialMessage, workspaceId, processSSEStream, finalize])
-
   const sendMessage = useCallback(
     async (message: string) => {
       if (!message.trim() || !workspaceId) return
@@ -389,7 +358,6 @@ export function useChat(
     messages,
     isSending,
     error,
-    currentChatId: chatIdRef.current,
     sendMessage,
     stopGeneration,
     chatBottomRef,
diff --git a/apps/sim/app/workspace/[workspaceId]/home/page.tsx b/apps/sim/app/workspace/[workspaceId]/home/page.tsx
@@ -22,5 +22,5 @@ export default async function HomePage({ params }: HomePageProps) {
     redirect('/')
   }
 
-  return <Home />
+  return <Home key='home' />
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/error.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/error.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react'
 import { createLogger } from '@sim/logger'
-import { AlertTriangle, ArrowLeft, RefreshCw } from 'lucide-react'
+import { ArrowLeft, RefreshCw } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { Button } from '@/components/emcn'
 
@@ -38,9 +38,6 @@ export default function TableViewerError({ error, reset }: TableViewerErrorProps
       {/* Error Content */}
       <div className='flex flex-1 items-center justify-center'>
         <div className='flex flex-col items-center gap-[16px] text-center'>
-          <div className='flex h-[48px] w-[48px] items-center justify-center rounded-full bg-[var(--surface-4)]'>
-            <AlertTriangle className='h-[24px] w-[24px] text-[var(--text-error)]' />
-          </div>
           <div className='flex flex-col gap-[8px]'>
             <h2 className='font-semibold text-[16px] text-[var(--text-primary)]'>
               Failed to load table
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/error.tsx b/apps/sim/app/workspace/[workspaceId]/tables/error.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react'
 import { createLogger } from '@sim/logger'
-import { AlertTriangle, RefreshCw } from 'lucide-react'
+import { RefreshCw } from 'lucide-react'
 import { Button } from '@/components/emcn'
 
 const logger = createLogger('TablesError')
@@ -20,9 +20,6 @@ export default function TablesError({ error, reset }: TablesErrorProps) {
   return (
     <div className='flex h-full flex-1 items-center justify-center bg-white dark:bg-[var(--bg)]'>
       <div className='flex flex-col items-center gap-[16px] text-center'>
-        <div className='flex h-[48px] w-[48px] items-center justify-center rounded-full bg-[var(--surface-4)]'>
-          <AlertTriangle className='h-[24px] w-[24px] text-[var(--text-error)]' />
-        </div>
         <div className='flex flex-col gap-[8px]'>
           <h2 className='font-semibold text-[16px] text-[var(--text-primary)]'>
             Failed to load tables
diff --git a/apps/sim/app/workspace/[workspaceId]/task/[taskId]/loading.tsx b/apps/sim/app/workspace/[workspaceId]/task/[taskId]/loading.tsx
@@ -4,13 +4,8 @@ export default function TaskLoading() {
   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='flex items-center gap-[8px] py-[8px] text-[13px] text-[var(--text-tertiary)]'>
-              <Loader2 className='h-[14px] w-[14px] animate-spin' />
-              Thinking...
-            </div>
-          </div>
+        <div className='flex min-h-0 flex-1 items-center justify-center'>
+          <Loader2 className='h-[20px] w-[20px] animate-spin text-[var(--text-tertiary)]' />
         </div>
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/task/[taskId]/page.tsx b/apps/sim/app/workspace/[workspaceId]/task/[taskId]/page.tsx
@@ -5,19 +5,9 @@ interface TaskPageProps {
     workspaceId: string
     taskId: string
   }>
-  searchParams: Promise<{
-    sid?: string
-    m?: string
-  }>
 }
 
-export default async function TaskPage({ params, searchParams }: TaskPageProps) {
+export default async function TaskPage({ params }: TaskPageProps) {
   const { taskId } = await params
-
-  if (taskId === 'new') {
-    const { sid, m } = await searchParams
-    return <Home streamId={sid} initialMessage={m} />
-  }
-
-  return <Home chatId={taskId} />
+  return <Home key={taskId} chatId={taskId} />
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -362,15 +362,13 @@ export const Sidebar = memo(function Sidebar() {
     [fetchedTasks, workspaceId]
   )
 
-  const [isScrolledFromTop, setIsScrolledFromTop] = useState(false)
   const [hasOverflowBottom, setHasOverflowBottom] = useState(false)
 
   useEffect(() => {
     const container = scrollContainerRef.current
     if (!container) return
 
     const updateScrollState = () => {
-      setIsScrolledFromTop(container.scrollTop > 0)
       setHasOverflowBottom(
         container.scrollHeight > container.scrollTop + container.clientHeight + 1
       )
@@ -654,12 +652,7 @@ export const Sidebar = memo(function Sidebar() {
           </div>
 
           {/* Workspace */}
-          <div
-            className={cn(
-              'mt-[14px] flex flex-shrink-0 flex-col border-b pb-[4px] transition-colors duration-150',
-              !isScrolledFromTop && 'border-transparent'
-            )}
-          >
+          <div className='mt-[14px] flex flex-shrink-0 flex-col pb-[5px]'>
             <div className='px-[16px] pb-[6px]'>
               <div className='font-base text-[var(--text-tertiary)] text-small'>Workspace</div>
             </div>

Original file line number	Diff line number	Diff line change
`@@ -22,5 +22,5 @@ export default async function HomePage({ params }: HomePageProps) {`
`22`	`22`	`redirect('/')`
`23`	`23`	`}`
`24`	`24`
`25`		`- return <Home />`
	`25`	`+ return <Home key='home' />`
`26`	`26`	`}`