fix(resource) handle resource deletion deletion (#3568)

* Add handle dragging tab to input chat

* Add back delete tools

* Handle deletions properly with resources view

* Fix lint

* Add permisssions checking

* Skip resource_added event when resource is deleted

* Pass workflow id as context

---------

Co-authored-by: Theodore Li <theo@sim.ai>

Author: TheodoreSpeaks

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

@@ -4,7 +4,7 @@ import { lazy, Suspense, useCallback, useEffect, useMemo } from 'react'
 import { Square } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { Button, PlayOutline, Skeleton, Tooltip } from '@/components/emcn'
-import { BookOpen, SquareArrowUpRight } from '@/components/emcn/icons'
+import { BookOpen, FileX, SquareArrowUpRight, WorkflowX } from '@/components/emcn/icons'
 import {
   markRunToolManuallyStopped,
   reportManualRunToolStop,
@@ -62,9 +62,7 @@ export function ResourceContent({ workspaceId, resource, previewMode }: Resource
 
     case 'workflow':
       return (
-        <Suspense fallback={LOADING_SKELETON}>
-          <Workflow key={resource.id} workspaceId={workspaceId} workflowId={resource.id} embedded />
-        </Suspense>
+        <EmbeddedWorkflow key={resource.id} workspaceId={workspaceId} workflowId={resource.id} />
       )
 
     case 'knowledgebase':
@@ -228,6 +226,43 @@ export function EmbeddedKnowledgeBaseActions({
   )
 }
 
+interface EmbeddedWorkflowProps {
+  workspaceId: string
+  workflowId: string
+}
+
+function EmbeddedWorkflow({ workspaceId, workflowId }: EmbeddedWorkflowProps) {
+  const workflowExists = useWorkflowRegistry((state) => Boolean(state.workflows[workflowId]))
+  const hydrationPhase = useWorkflowRegistry((state) => state.hydration.phase)
+  const hydrationWorkflowId = useWorkflowRegistry((state) => state.hydration.workflowId)
+  const isMetadataLoaded = hydrationPhase !== 'idle' && hydrationPhase !== 'metadata-loading'
+  const hasLoadError = hydrationPhase === 'error' && hydrationWorkflowId === workflowId
+
+  if (!isMetadataLoaded) return LOADING_SKELETON
+
+  if (!workflowExists || hasLoadError) {
+    return (
+      <div className='flex h-full flex-col items-center justify-center gap-[12px]'>
+        <WorkflowX className='h-[32px] w-[32px] text-[var(--text-muted)]' />
+        <div className='flex flex-col items-center gap-[4px]'>
+          <h2 className='font-medium text-[20px] text-[var(--text-secondary)]'>
+            Workflow not found
+          </h2>
+          <p className='text-[13px] text-[var(--text-muted)]'>
+            This workflow may have been deleted or moved
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <Suspense fallback={LOADING_SKELETON}>
+      <Workflow workspaceId={workspaceId} workflowId={workflowId} embedded />
+    </Suspense>
+  )
+}
+
 interface EmbeddedFileProps {
   workspaceId: string
   fileId: string
@@ -242,8 +277,14 @@ function EmbeddedFile({ workspaceId, fileId, previewMode }: EmbeddedFileProps) {
 
   if (!file) {
     return (
-      <div className='flex h-full items-center justify-center'>
-        <span className='text-[13px] text-[var(--text-muted)]'>File not found</span>
+      <div className='flex h-full flex-col items-center justify-center gap-[12px]'>
+        <FileX className='h-[32px] w-[32px] text-[var(--text-muted)]' />
+        <div className='flex flex-col items-center gap-[4px]'>
+          <h2 className='font-medium text-[20px] text-[var(--text-secondary)]'>File not found</h2>
+          <p className='text-[13px] text-[var(--text-muted)]'>
+            This file may have been deleted or moved
+          </p>
+        </div>
       </div>
     )
   }

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

@@ -160,12 +160,22 @@ export function ResourceTabs({
     [chatId, onRemoveResource]
   )
 
-  const handleDragStart = useCallback((e: React.DragEvent, idx: number) => {
-    dragStartIdx.current = idx
-    setDraggedIdx(idx)
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', String(idx))
-  }, [])
+  const handleDragStart = useCallback(
+    (e: React.DragEvent, idx: number) => {
+      dragStartIdx.current = idx
+      setDraggedIdx(idx)
+      e.dataTransfer.effectAllowed = 'copyMove'
+      e.dataTransfer.setData('text/plain', String(idx))
+      const resource = resources[idx]
+      if (resource) {
+        e.dataTransfer.setData(
+          'application/x-sim-resource',
+          JSON.stringify({ type: resource.type, id: resource.id, title: resource.title })
+        )
+      }
+    },
+    [resources]
+  )
 
   const handleDragOver = useCallback((e: React.DragEvent, idx: number) => {
     e.preventDefault()

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -723,6 +723,38 @@ export function UserInput({
     [textareaRef, value, handleContextAdd, mentionMenu]
   )
 
+  const handleContainerDragOver = useCallback(
+    (e: React.DragEvent) => {
+      if (e.dataTransfer.types.includes('application/x-sim-resource')) {
+        e.preventDefault()
+        e.stopPropagation()
+        e.dataTransfer.dropEffect = 'copy'
+        return
+      }
+      files.handleDragOver(e)
+    },
+    [files]
+  )
+
+  const handleContainerDrop = useCallback(
+    (e: React.DragEvent) => {
+      const resourceJson = e.dataTransfer.getData('application/x-sim-resource')
+      if (resourceJson) {
+        e.preventDefault()
+        e.stopPropagation()
+        try {
+          const resource = JSON.parse(resourceJson) as MothershipResource
+          handleResourceSelect(resource, false)
+        } catch {
+          // Invalid JSON — ignore
+        }
+        return
+      }
+      files.handleDrop(e)
+    },
+    [handleResourceSelect, files]
+  )
+
   useEffect(() => {
     if (wasSendingRef.current && !isSending) {
       textareaRef.current?.focus()
@@ -1006,8 +1038,8 @@ export function UserInput({
       )}
       onDragEnter={files.handleDragEnter}
       onDragLeave={files.handleDragLeave}
-      onDragOver={files.handleDragOver}
-      onDrop={files.handleDrop}
+      onDragOver={handleContainerDragOver}
+      onDrop={handleContainerDrop}
     >
       {/* Context pills row */}
       {contextManagement.selectedContexts.length > 0 && (

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

@@ -55,7 +55,7 @@ export interface UseChatReturn {
   resources: MothershipResource[]
   activeResourceId: string | null
   setActiveResourceId: (id: string | null) => void
-  addResource: (resource: MothershipResource) => void
+  addResource: (resource: MothershipResource) => boolean
   removeResource: (resourceType: MothershipResourceType, resourceId: string) => void
   reorderResources: (resources: MothershipResource[]) => void
 }
@@ -266,15 +266,18 @@ export function useChat(
 
   const { data: chatHistory } = useChatHistory(initialChatId)
 
-  const addResource = useCallback((resource: MothershipResource) => {
+  const addResource = useCallback((resource: MothershipResource): boolean => {
+    if (resourcesRef.current.some((r) => r.type === resource.type && r.id === resource.id)) {
+      return false
+    }
+
     setResources((prev) => {
       const exists = prev.some((r) => r.type === resource.type && r.id === resource.id)
       if (exists) return prev
       return [...prev, resource]
     })
     setActiveResourceId(resource.id)
 
-    // Persist to database if we have a chat ID
     const currentChatId = chatIdRef.current
     if (currentChatId) {
       fetch('/api/copilot/chat/resources', {
@@ -285,6 +288,7 @@ export function useChat(
         logger.warn('Failed to persist resource', err)
       })
     }
+    return true
   }, [])
 
   const removeResource = useCallback((resourceType: MothershipResourceType, resourceId: string) => {
@@ -552,7 +556,6 @@ export function useChat(
                   )
                   if (resource) {
                     addResource(resource)
-                    invalidateResourceQueries(queryClient, workspaceId, resource.type, resource.id)
                     onResourceEventRef.current?.()
                   }
                 }
@@ -565,6 +568,7 @@ export function useChat(
               if (resource?.type && resource?.id) {
                 addResource(resource)
                 invalidateResourceQueries(queryClient, workspaceId, resource.type, resource.id)
+
                 onResourceEventRef.current?.()
                 if (resource.type === 'workflow') {
                   if (ensureWorkflowInRegistry(resource.id, resource.title, workspaceId)) {
@@ -576,6 +580,20 @@ export function useChat(
               }
               break
             }
+            case 'resource_deleted': {
+              const resource = parsed.resource
+              if (resource?.type && resource?.id) {
+                removeResource(resource.type as MothershipResourceType, resource.id)
+                invalidateResourceQueries(
+                  queryClient,
+                  workspaceId,
+                  resource.type as MothershipResourceType,
+                  resource.id
+                )
+                onResourceEventRef.current?.()
+              }
+              break
+            }
             case 'tool_error': {
               const id = parsed.toolCallId || getPayloadData(parsed)?.id
               if (!id) break
@@ -612,7 +630,7 @@ export function useChat(
         }
       }
     },
-    [workspaceId, queryClient, addResource]
+    [workspaceId, queryClient, addResource, removeResource]
   )
 
   const persistPartialResponse = useCallback(async () => {

apps/sim/app/workspace/[workspaceId]/home/types.ts

@@ -23,6 +23,7 @@ export type SSEEventType =
   | 'tool_result'
   | 'tool_error'
   | 'resource_added'
+  | 'resource_deleted'
   | 'subagent_start'
   | 'subagent_end'
   | 'structured_result'

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx

@@ -21,7 +21,7 @@ import {
   Tooltip,
   Trash,
 } from '@/components/emcn'
-import { Database } from '@/components/emcn/icons'
+import { Database, DatabaseX } from '@/components/emcn/icons'
 import { SearchHighlight } from '@/components/ui/search-highlight'
 import { cn } from '@/lib/core/utils/cn'
 import { ALL_TAG_SLOTS, type AllTagSlot, getFieldTypeForSlot } from '@/lib/knowledge/constants'
@@ -1029,20 +1029,17 @@ export function KnowledgeBase({
 
   if (error && !knowledgeBase) {
     return (
-      <Resource
-        icon={Database}
-        title='Knowledge Base'
-        breadcrumbs={[
-          {
-            label: 'Knowledge Base',
-            onClick: () => router.push(`/workspace/${workspaceId}/knowledge`),
-          },
-          { label: knowledgeBaseName },
-        ]}
-        columns={DOCUMENT_COLUMNS}
-        rows={[]}
-        emptyMessage='Error loading knowledge base'
-      />
+      <div className='flex h-full flex-col items-center justify-center gap-[12px]'>
+        <DatabaseX className='h-[32px] w-[32px] text-[var(--text-muted)]' />
+        <div className='flex flex-col items-center gap-[4px]'>
+          <h2 className='font-medium text-[20px] text-[var(--text-secondary)]'>
+            Knowledge base not found
+          </h2>
+          <p className='text-[13px] text-[var(--text-muted)]'>
+            This knowledge base may have been deleted or moved
+          </p>
+        </div>
+      </div>
     )
   }
 

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx

@@ -30,6 +30,7 @@ import {
   Pencil,
   Plus,
   Table as TableIcon,
+  TableX,
   Trash,
   TypeBoolean,
   TypeJson,
@@ -1231,8 +1232,14 @@ export function Table({
 
   if (!isLoadingTable && !tableData) {
     return (
-      <div className='flex h-full items-center justify-center'>
-        <span className='text-[13px] text-[var(--text-error)]'>Table not found</span>
+      <div className='flex h-full flex-col items-center justify-center gap-[12px]'>
+        <TableX className='h-[32px] w-[32px] text-[var(--text-muted)]' />
+        <div className='flex flex-col items-center gap-[4px]'>
+          <h2 className='font-medium text-[20px] text-[var(--text-secondary)]'>Table not found</h2>
+          <p className='text-[13px] text-[var(--text-muted)]'>
+            This table may have been deleted or moved
+          </p>
+        </div>
       </div>
     )
   }

apps/sim/components/emcn/icons/database-x.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Database-X icon component - cylinder database with an X mark indicating a missing or deleted knowledge base
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function DatabaseX(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.75'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <ellipse cx='10.25' cy='3.75' rx='8.5' ry='3' />
+      <path d='M1.75 3.75V9.75C1.75 11.41 5.55 12.75 10.25 12.75C14.95 12.75 18.75 11.41 18.75 9.75V3.75' />
+      <path d='M1.75 9.75V12.5' />
+      <path d='M18.75 9.75V15.75C18.75 17.41 14.95 18.75 10.25 18.75C9 18.75 7.75 18.6 6.75 18.3' />
+      <path d='M1 16L5 20' />
+      <path d='M5 16L1 20' />
+    </svg>
+  )
+}

apps/sim/components/emcn/icons/file-x.tsx

@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+
+/**
+ * File-X icon component - document with an X mark indicating a missing or deleted file
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function FileX(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.75'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path d='M3.25 12.5V2.75C3.25 1.64543 4.14543 0.75 5.25 0.75H12.25L17.25 5.75V16.75C17.25 17.8546 16.3546 18.75 15.25 18.75H9.5' />
+      <path d='M12.25 0.75V5.75H17.25' />
+      <path d='M3.25 15L7.25 19' />
+      <path d='M7.25 15L3.25 19' />
+    </svg>
+  )
+}