feat(chat): drag workflows and folders from sidebar into chat input

Author: waleedlatif1

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

@@ -10,6 +10,7 @@ import {
 import { Button, Tooltip } from '@/components/emcn'
 import { Columns3, Eye, PanelLeft, Pencil } from '@/components/emcn/icons'
 import { isEphemeralResource } from '@/lib/copilot/resource-extraction'
+import { SIM_RESOURCE_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { cn } from '@/lib/core/utils/cn'
 import type { PreviewMode } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
 import { AddResourceDropdown } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown'
@@ -164,7 +165,7 @@ export function ResourceTabs({
       const resource = resources[idx]
       if (resource) {
         e.dataTransfer.setData(
-          'application/x-sim-resource',
+          SIM_RESOURCE_DRAG_TYPE,
           JSON.stringify({ type: resource.type, id: resource.id, title: resource.title })
         )
       }

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

@@ -6,6 +6,7 @@ import { useParams } from 'next/navigation'
 import { Database, Folder as FolderIcon, Table as TableIcon } from '@/components/emcn/icons'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import { useSession } from '@/lib/auth/auth-client'
+import { SIM_RESOURCE_DRAG_TYPE, SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { cn } from '@/lib/core/utils/cn'
 import { CHAT_ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
 import { useAvailableResources } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown'
@@ -247,15 +248,17 @@ export function UserInput({
       if (textarea) {
         const currentValue = valueRef.current
         const insertAt = atInsertPosRef.current ?? textarea.selectionStart ?? currentValue.length
-        atInsertPosRef.current = null
-
         const needsSpaceBefore = insertAt > 0 && !/\s/.test(currentValue.charAt(insertAt - 1))
         const insertText = `${needsSpaceBefore ? ' ' : ''}@${resource.title} `
         const before = currentValue.slice(0, insertAt)
         const after = currentValue.slice(insertAt)
+        const newValue = `${before}${insertText}${after}`
         const newPos = before.length + insertText.length
         pendingCursorRef.current = newPos
-        setValue(`${before}${insertText}${after}`)
+        // Eagerly sync refs so successive drop-handler iterations see the updated position
+        valueRef.current = newValue
+        atInsertPosRef.current = newPos
+        setValue(newValue)
       }
 
       const context = mapResourceToContext(resource)
@@ -281,7 +284,10 @@ export function UserInput({
   }, [])
 
   const handleContainerDragOver = useCallback((e: React.DragEvent) => {
-    if (e.dataTransfer.types.includes('application/x-sim-resource')) {
+    if (
+      e.dataTransfer.types.includes(SIM_RESOURCE_DRAG_TYPE) ||
+      e.dataTransfer.types.includes(SIM_RESOURCES_DRAG_TYPE)
+    ) {
       e.preventDefault()
       e.stopPropagation()
       e.dataTransfer.dropEffect = 'copy'
@@ -292,7 +298,21 @@ export function UserInput({
 
   const handleContainerDrop = useCallback(
     (e: React.DragEvent) => {
-      const resourceJson = e.dataTransfer.getData('application/x-sim-resource')
+      const resourcesJson = e.dataTransfer.getData(SIM_RESOURCES_DRAG_TYPE)
+      if (resourcesJson) {
+        e.preventDefault()
+        e.stopPropagation()
+        try {
+          const resources = JSON.parse(resourcesJson) as MothershipResource[]
+          for (const resource of resources) {
+            handleResourceSelect(resource)
+          }
+        } catch {
+          // Invalid JSON — ignore
+        }
+        return
+      }
+      const resourceJson = e.dataTransfer.getData(SIM_RESOURCE_DRAG_TYPE)
       if (resourceJson) {
         e.preventDefault()
         e.stopPropagation()

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx

@@ -5,6 +5,7 @@ import { createLogger } from '@sim/logger'
 import clsx from 'clsx'
 import { ChevronRight, Folder, FolderOpen, MoreHorizontal } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
+import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { generateId } from '@/lib/core/utils/uuid'
 import { getNextWorkflowColor } from '@/lib/workflows/colors'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -18,6 +19,7 @@ import {
   useSidebarDragContext,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
+import { buildDragResources } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import {
   useCanDelete,
   useDeleteFolder,
@@ -197,9 +199,15 @@ export function FolderItem({
 
       e.dataTransfer.setData('sidebar-selection', JSON.stringify(selection))
       e.dataTransfer.effectAllowed = 'move'
+
+      const resources = buildDragResources(selection, workspaceId)
+      if (resources.length > 0) {
+        e.dataTransfer.setData(SIM_RESOURCES_DRAG_TYPE, JSON.stringify(resources))
+      }
+
       onDragStartProp?.()
     },
-    [folder.id, onDragStartProp]
+    [folder.id, workspaceId, onDragStartProp]
   )
 
   const {

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx'
 import { MoreHorizontal } from 'lucide-react'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
+import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { getWorkflowLockToggleIds } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
@@ -16,6 +17,7 @@ import {
   useItemRename,
   useSidebarDragContext,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
+import { buildDragResources } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import {
   useCanDelete,
   useDeleteSelection,
@@ -338,9 +340,15 @@ export function WorkflowItem({
 
       e.dataTransfer.setData('sidebar-selection', JSON.stringify(selection))
       e.dataTransfer.effectAllowed = 'move'
+
+      const resources = buildDragResources(selection, workspaceId)
+      if (resources.length > 0) {
+        e.dataTransfer.setData(SIM_RESOURCES_DRAG_TYPE, JSON.stringify(resources))
+      }
+
       onDragStartProp?.()
     },
-    [workflow.id, onDragStartProp]
+    [workflow.id, workspaceId, onDragStartProp]
   )
 
   const {

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts

@@ -1,5 +1,33 @@
+import type { MothershipResource } from '@/lib/copilot/resource-types'
+import { getFolderMap } from '@/hooks/queries/utils/folder-cache'
+import { getWorkflows } from '@/hooks/queries/utils/workflow-cache'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 
+/**
+ * Builds a `MothershipResource` array from a sidebar drag selection so it can
+ * be set as `application/x-sim-resources` drag data and dropped into the chat.
+ */
+export function buildDragResources(
+  selection: { workflowIds: string[]; folderIds: string[] },
+  workspaceId: string
+): MothershipResource[] {
+  const allWorkflows = getWorkflows(workspaceId)
+  const workflowMap = Object.fromEntries(allWorkflows.map((w) => [w.id, w]))
+  const folderMap = getFolderMap(workspaceId)
+  return [
+    ...selection.workflowIds.map((id) => ({
+      type: 'workflow' as const,
+      id,
+      title: workflowMap[id]?.name ?? id,
+    })),
+    ...selection.folderIds.map((id) => ({
+      type: 'folder' as const,
+      id,
+      title: folderMap[id]?.name ?? id,
+    })),
+  ]
+}
+
 export function compareByOrder<T extends { sortOrder: number; createdAt?: Date; id: string }>(
   a: T,
   b: T

apps/sim/lib/copilot/resource-types.ts

@@ -19,3 +19,9 @@ export const VFS_DIR_TO_RESOURCE: Record<string, MothershipResourceType> = {
   knowledgebases: 'knowledgebase',
   folders: 'folder',
 } as const
+
+/** MIME type for a single dragged resource (used by resource-tabs internal reordering). */
+export const SIM_RESOURCE_DRAG_TYPE = 'application/x-sim-resource' as const
+
+/** MIME type for an array of dragged resources (used by sidebar drag-to-chat). */
+export const SIM_RESOURCES_DRAG_TYPE = 'application/x-sim-resources' as const