fix(ui): fix resource switching logic, multi select delete

Author: TheodoreSpeaks

apps/sim/app/api/copilot/chat/resources/route.ts

@@ -169,24 +169,24 @@ export async function DELETE(req: NextRequest) {
     const body = await req.json()
     const { chatId, resourceType, resourceId } = RemoveResourceSchema.parse(body)
 
-    const [chat] = await db
-      .select({ resources: copilotChats.resources })
-      .from(copilotChats)
+    const [updated] = await db
+      .update(copilotChats)
+      .set({
+        resources: sql`COALESCE((
+          SELECT jsonb_agg(elem)
+          FROM jsonb_array_elements(${copilotChats.resources}) elem
+          WHERE NOT (elem->>'type' = ${resourceType} AND elem->>'id' = ${resourceId})
+        ), '[]'::jsonb)`,
+        updatedAt: new Date(),
+      })
       .where(and(eq(copilotChats.id, chatId), eq(copilotChats.userId, userId)))
-      .limit(1)
+      .returning({ resources: copilotChats.resources })
 
-    if (!chat) {
+    if (!updated) {
       return createNotFoundResponse('Chat not found or unauthorized')
     }
 
-    const existing = Array.isArray(chat.resources) ? (chat.resources as ChatResource[]) : []
-    const key = `${resourceType}:${resourceId}`
-    const merged = existing.filter((r) => `${r.type}:${r.id}` !== key)
-
-    await db
-      .update(copilotChats)
-      .set({ resources: sql`${JSON.stringify(merged)}::jsonb`, updatedAt: new Date() })
-      .where(eq(copilotChats.id, chatId))
+    const merged = Array.isArray(updated.resources) ? (updated.resources as ChatResource[]) : []
 
     logger.info('Removed resource from chat', { chatId, resourceType, resourceId })
 

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx

@@ -180,6 +180,15 @@ export function ResourceTabs({
     return () => node.removeEventListener('wheel', handler)
   }, [])
 
+  useEffect(() => {
+    const node = scrollNodeRef.current
+    if (!node || !activeId) return
+    const tab = node.querySelector<HTMLElement>(
+      `[data-resource-tab-id="${CSS.escape(activeId)}"]`
+    )
+    tab?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+  }, [activeId])
+
   const addResource = useAddChatResource(chatId)
   const removeResource = useRemoveChatResource(chatId)
   const reorderResources = useReorderChatResources(chatId)
@@ -286,24 +295,9 @@ export function ResourceTabs({
       if (anchorIdRef.current && removedIds.has(anchorIdRef.current)) {
         anchorIdRef.current = null
       }
-      // Serialize mutations so each onMutate sees the cache updated by the prior
-      // one. Continue on individual failures so remaining removals still fire.
-      const persistable = targets.filter((r) => !isEphemeralResource(r))
-      if (persistable.length > 0) {
-        void (async () => {
-          for (const r of persistable) {
-            try {
-              await removeResource.mutateAsync({
-                chatId,
-                resourceType: r.type,
-                resourceId: r.id,
-              })
-            } catch {
-              // Individual failure — the mutation's onError already rolled back
-              // this resource in cache. Remaining removals continue.
-            }
-          }
-        })()
+      for (const r of targets) {
+        if (isEphemeralResource(r)) continue
+        removeResource.mutate({ chatId, resourceType: r.type, resourceId: r.id })
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -1277,7 +1277,11 @@ export function useChat(
     const persistedResources = chatHistory.resources.filter((r) => r.id !== 'streaming-file')
     if (persistedResources.length > 0) {
       setResources(persistedResources)
-      setActiveResourceId(persistedResources[persistedResources.length - 1].id)
+      setActiveResourceId((prev) =>
+        prev && persistedResources.some((r) => r.id === prev)
+          ? prev
+          : persistedResources[persistedResources.length - 1].id
+      )
 
       for (const resource of persistedResources) {
         if (resource.type !== 'workflow') continue

apps/sim/hooks/queries/tasks.ts

@@ -485,21 +485,23 @@ export function useRemoveChatResource(chatId?: string) {
     onMutate: async ({ resourceType, resourceId }) => {
       if (!chatId) return
       await queryClient.cancelQueries({ queryKey: taskKeys.detail(chatId) })
-      const previous = queryClient.getQueryData<TaskChatHistory>(taskKeys.detail(chatId))
-      if (previous) {
-        queryClient.setQueryData<TaskChatHistory>(taskKeys.detail(chatId), {
-          ...previous,
-          resources: previous.resources.filter(
-            (r) => !(r.type === resourceType && r.id === resourceId)
-          ),
-        })
-      }
-      return { previous }
+      const removed: TaskChatHistory['resources'] = []
+      queryClient.setQueryData<TaskChatHistory>(taskKeys.detail(chatId), (prev) => {
+        if (!prev) return prev
+        const next: TaskChatHistory['resources'] = []
+        for (const r of prev.resources) {
+          if (r.type === resourceType && r.id === resourceId) removed.push(r)
+          else next.push(r)
+        }
+        return removed.length > 0 ? { ...prev, resources: next } : prev
+      })
+      return { removed }
     },
     onError: (_err, _variables, context) => {
-      if (context?.previous && chatId) {
-        queryClient.setQueryData(taskKeys.detail(chatId), context.previous)
-      }
+      if (!chatId || !context?.removed.length) return
+      queryClient.setQueryData<TaskChatHistory>(taskKeys.detail(chatId), (prev) =>
+        prev ? { ...prev, resources: [...prev.resources, ...context.removed] } : prev
+      )
     },
     onSettled: () => {
       if (chatId) {