fix(chat): remove resource panel tab when context mention is deleted from input

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx

@@ -37,6 +37,7 @@ interface MothershipChatProps {
   userId?: string
   chatId?: string
   onContextAdd?: (context: ChatContext) => void
+  onContextRemove?: (context: ChatContext) => void
   editValue?: string
   onEditValueConsumed?: () => void
   layout?: 'mothership-view' | 'copilot-view'
@@ -83,6 +84,7 @@ export function MothershipChat({
   userId,
   chatId,
   onContextAdd,
+  onContextRemove,
   editValue,
   onEditValueConsumed,
   layout = 'mothership-view',
@@ -207,6 +209,7 @@ export function MothershipChat({
             isInitialView={false}
             userId={userId}
             onContextAdd={onContextAdd}
+            onContextRemove={onContextRemove}
             editValue={editValue}
             onEditValueConsumed={onEditValueConsumed}
             onEnterWhileEmpty={handleEnterWhileEmpty}

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

@@ -108,6 +108,7 @@ interface UserInputProps {
   isInitialView?: boolean
   userId?: string
   onContextAdd?: (context: ChatContext) => void
+  onContextRemove?: (context: ChatContext) => void
   onEnterWhileEmpty?: () => boolean
 }
 
@@ -121,6 +122,7 @@ export function UserInput({
   isInitialView = true,
   userId,
   onContextAdd,
+  onContextRemove,
   onEnterWhileEmpty,
 }: UserInputProps) {
   const { workspaceId } = useParams<{ workspaceId: string }>()
@@ -170,6 +172,18 @@ export function UserInput({
     [addContext, onContextAdd]
   )
 
+  const onContextRemoveRef = useRef(onContextRemove)
+  onContextRemoveRef.current = onContextRemove
+
+  const prevSelectedContextsRef = useRef<ChatContext[]>([])
+  useEffect(() => {
+    const prev = prevSelectedContextsRef.current
+    const curr = contextManagement.selectedContexts
+    const removed = prev.filter((p) => !curr.some((c) => c.kind === p.kind && c.label === p.label))
+    if (removed.length > 0) removed.forEach((ctx) => onContextRemoveRef.current?.(ctx))
+    prevSelectedContextsRef.current = curr
+  }, [contextManagement.selectedContexts])
+
   const existingResourceKeys = useMemo(() => {
     const keys = new Set<string>()
     for (const ctx of contextManagement.selectedContexts) {

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

@@ -17,7 +17,7 @@ import { useChatHistory, useMarkTaskRead } from '@/hooks/queries/tasks'
 import type { ChatContext } from '@/stores/panel'
 import { MothershipChat, MothershipView, TemplatePrompts, UserInput } from './components'
 import { getMothershipUseChatOptions, useChat, useMothershipResize } from './hooks'
-import type { FileAttachmentForApi, MothershipResource, MothershipResourceType } from './types'
+import type { FileAttachmentForApi, MothershipResourceType } from './types'
 
 const logger = createLogger('Home')
 
@@ -261,51 +261,42 @@ export function Home({ chatId }: HomeProps = {}) {
     return () => window.removeEventListener('mothership-send-message', handler)
   }, [sendMessage])
 
-  const handleContextAdd = useCallback(
-    (context: ChatContext) => {
-      let resourceType: MothershipResourceType | null = null
-      let resourceId: string | null = null
-      const resourceTitle: string = context.label
-
+  const resolveResourceFromContext = useCallback(
+    (context: ChatContext): { type: MothershipResourceType; id: string } | null => {
       switch (context.kind) {
         case 'workflow':
         case 'current_workflow':
-          resourceType = 'workflow'
-          resourceId = context.workflowId
-          break
+          return context.workflowId ? { type: 'workflow', id: context.workflowId } : null
         case 'knowledge':
-          if (context.knowledgeId) {
-            resourceType = 'knowledgebase'
-            resourceId = context.knowledgeId
-          }
-          break
+          return context.knowledgeId ? { type: 'knowledgebase', id: context.knowledgeId } : null
         case 'table':
-          if (context.tableId) {
-            resourceType = 'table'
-            resourceId = context.tableId
-          }
-          break
+          return context.tableId ? { type: 'table', id: context.tableId } : null
         case 'file':
-          if (context.fileId) {
-            resourceType = 'file'
-            resourceId = context.fileId
-          }
-          break
+          return context.fileId ? { type: 'file', id: context.fileId } : null
         default:
-          break
+          return null
       }
+    },
+    []
+  )
 
-      if (resourceType && resourceId) {
-        const resource: MothershipResource = {
-          type: resourceType,
-          id: resourceId,
-          title: resourceTitle,
-        }
-        addResource(resource)
+  const handleContextAdd = useCallback(
+    (context: ChatContext) => {
+      const resolved = resolveResourceFromContext(context)
+      if (resolved) {
+        addResource({ ...resolved, title: context.label })
         handleResourceEvent()
       }
     },
-    [addResource, handleResourceEvent]
+    [resolveResourceFromContext, addResource, handleResourceEvent]
+  )
+
+  const handleContextRemove = useCallback(
+    (context: ChatContext) => {
+      const resolved = resolveResourceFromContext(context)
+      if (resolved) removeResource(resolved.type, resolved.id)
+    },
+    [resolveResourceFromContext, removeResource]
   )
 
   const hasMessages = messages.length > 0
@@ -345,6 +336,7 @@ export function Home({ chatId }: HomeProps = {}) {
               onStopGeneration={handleStopGeneration}
               userId={session?.user?.id}
               onContextAdd={handleContextAdd}
+              onContextRemove={handleContextRemove}
             />
           </div>
         </div>
@@ -375,6 +367,7 @@ export function Home({ chatId }: HomeProps = {}) {
           userId={session?.user?.id}
           chatId={resolvedChatId}
           onContextAdd={handleContextAdd}
+          onContextRemove={handleContextRemove}
           editValue={editingInputValue}
           onEditValueConsumed={clearEditingValue}
           animateInput={isInputEntering}