diff --git a/apps/sim/app/workspace/[workspaceId]/components/oauth-modal.tsx b/apps/sim/app/workspace/[workspaceId]/components/oauth-modal.tsx
index 5d1b1a76179..4f028948794 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/oauth-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/oauth-modal.tsx
@@ -11,6 +11,7 @@ import {
Modal,
ModalBody,
ModalContent,
+ ModalDescription,
ModalFooter,
ModalHeader,
} from '@/components/emcn'
@@ -230,6 +231,9 @@ export function OAuthModal(props: OAuthModalProps) {
Connect {providerName}
+
+ Connect your {providerName} account to grant access
+
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
index 6e3e6868f96..42b15a67e6a 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
@@ -1,5 +1,14 @@
'use client'
-import { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+ type DragEvent,
+ memo,
+ type ReactNode,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { ArrowDown, ArrowUp, Button, Checkbox, Loader, Plus, Skeleton } from '@/components/emcn'
import { cn } from '@/lib/core/utils/cn'
@@ -30,12 +39,25 @@ export interface ResourceRow {
export interface SelectableConfig {
selectedIds: Set
- onSelectRow: (id: string, checked: boolean) => void
+ onSelectRow: (id: string, checked: boolean, shiftKey?: boolean) => void
onSelectAll: (checked: boolean) => void
isAllSelected: boolean
disabled?: boolean
}
+export interface RowDragDropConfig {
+ activeDropTargetId?: string | null
+ draggedRowIds?: Set
+ isAnyDragActive?: boolean
+ isRowDraggable?: (rowId: string) => boolean
+ isRowDropTarget?: (rowId: string) => boolean
+ onDragStart?: (e: DragEvent, rowId: string) => void
+ onDragOver?: (e: DragEvent, rowId: string) => void
+ onDragLeave?: (e: DragEvent, rowId: string) => void
+ onDrop?: (e: DragEvent, rowId: string) => void
+ onDragEnd?: (e: DragEvent, rowId: string) => void
+}
+
export interface PaginationConfig {
currentPage: number
totalPages: number
@@ -51,10 +73,12 @@ interface ResourceProps {
defaultSort?: string
sort?: SortConfig
headerActions?: HeaderAction[]
+ leadingActions?: ReactNode
columns: ResourceColumn[]
rows: ResourceRow[]
selectedRowId?: string | null
selectable?: SelectableConfig
+ rowDragDrop?: RowDragDropConfig
onRowClick?: (rowId: string) => void
onRowHover?: (rowId: string) => void
onRowContextMenu?: (e: React.MouseEvent, rowId: string) => void
@@ -71,8 +95,6 @@ interface ResourceProps {
const EMPTY_CELL_PLACEHOLDER = '- - -'
const SKELETON_ROW_COUNT = 5
-const stopPropagation = (e: React.MouseEvent) => e.stopPropagation()
-
/**
* Shared page shell for resource list pages (tables, files, knowledge, schedules, logs).
* Renders the header, toolbar with search, and a data table from column/row definitions.
@@ -86,10 +108,12 @@ export const Resource = memo(function Resource({
defaultSort,
sort: sortOverride,
headerActions,
+ leadingActions,
columns,
rows,
selectedRowId,
selectable,
+ rowDragDrop,
onRowClick,
onRowHover,
onRowContextMenu,
@@ -113,6 +137,7 @@ export const Resource = memo(function Resource({
breadcrumbs={breadcrumbs}
create={create}
actions={headerActions}
+ leadingActions={leadingActions}
/>
void
onRowHover?: (rowId: string) => void
onRowContextMenu?: (e: React.MouseEvent, rowId: string) => void
@@ -172,6 +199,7 @@ export const ResourceTable = memo(function ResourceTable({
sort: externalSort,
selectedRowId,
selectable,
+ rowDragDrop,
onRowClick,
onRowHover,
onRowContextMenu,
@@ -327,6 +355,7 @@ export const ResourceTable = memo(function ResourceTable({
columns={columns}
selectedRowId={selectedRowId}
selectable={selectable}
+ rowDragDrop={rowDragDrop}
onRowClick={onRowClick}
onRowHover={onRowHover}
onRowContextMenu={onRowContextMenu}
@@ -442,6 +471,7 @@ interface DataRowProps {
columns: ResourceColumn[]
selectedRowId?: string | null
selectable?: SelectableConfig
+ rowDragDrop?: RowDragDropConfig
onRowClick?: (rowId: string) => void
onRowHover?: (rowId: string) => void
onRowContextMenu?: (e: React.MouseEvent, rowId: string) => void
@@ -453,16 +483,35 @@ const DataRow = memo(function DataRow({
columns,
selectedRowId,
selectable,
+ rowDragDrop,
onRowClick,
onRowHover,
onRowContextMenu,
hasCheckbox,
}: DataRowProps) {
const isSelected = selectable?.selectedIds.has(row.id) ?? false
-
- const handleClick = useCallback(() => {
- onRowClick?.(row.id)
- }, [onRowClick, row.id])
+ const isDraggable = rowDragDrop?.isRowDraggable?.(row.id) ?? false
+ const isDropTarget = rowDragDrop?.isRowDropTarget?.(row.id) ?? false
+ const isActiveDropTarget = rowDragDrop?.activeDropTargetId === row.id
+ const isDragging = rowDragDrop?.draggedRowIds?.has(row.id) ?? false
+ const isAnyDragActive = rowDragDrop?.isAnyDragActive ?? false
+ const hasActiveSelection = (selectable?.selectedIds.size ?? 0) > 0
+
+ const handleClick = useCallback(
+ (e: React.MouseEvent) => {
+ if (
+ selectable &&
+ !selectable.disabled &&
+ (e.shiftKey || e.metaKey || e.ctrlKey || !onRowClick || hasActiveSelection)
+ ) {
+ e.preventDefault()
+ selectable.onSelectRow(row.id, !isSelected, e.shiftKey)
+ return
+ }
+ onRowClick?.(row.id)
+ },
+ [hasActiveSelection, isSelected, onRowClick, row.id, selectable]
+ )
const handleMouseEnter = useCallback(() => {
onRowHover?.(row.id)
@@ -475,25 +524,65 @@ const DataRow = memo(function DataRow({
[onRowContextMenu, row.id]
)
+ const shiftKeyRef = useRef(false)
+
+ const handleSelectRowClick = useCallback((e: React.MouseEvent) => {
+ e.stopPropagation()
+ shiftKeyRef.current = e.shiftKey
+ }, [])
+
const handleSelectRow = useCallback(
(checked: boolean | 'indeterminate') => {
- selectable?.onSelectRow(row.id, checked as boolean)
+ selectable?.onSelectRow(row.id, checked as boolean, shiftKeyRef.current)
+ shiftKeyRef.current = false
},
[selectable, row.id]
)
+ const handleDragStart = (e: DragEvent) => {
+ rowDragDrop?.onDragStart?.(e, row.id)
+ }
+
+ const handleDragOver = (e: DragEvent) => {
+ rowDragDrop?.onDragOver?.(e, row.id)
+ }
+
+ const handleDragLeave = (e: DragEvent) => {
+ rowDragDrop?.onDragLeave?.(e, row.id)
+ }
+
+ const handleDrop = (e: DragEvent) => {
+ rowDragDrop?.onDrop?.(e, row.id)
+ }
+
+ const handleDragEnd = (e: DragEvent) => {
+ rowDragDrop?.onDragEnd?.(e, row.id)
+ }
+
return (
{hasCheckbox && selectable && (
@@ -503,7 +592,7 @@ const DataRow = memo(function DataRow({
onCheckedChange={handleSelectRow}
disabled={selectable.disabled}
aria-label='Select row'
- onClick={stopPropagation}
+ onClick={handleSelectRowClick}
/>
)}
@@ -553,22 +642,22 @@ interface ResourceColGroupProps {
hasCheckbox?: boolean
}
+const CHECKBOX_WEIGHT = 0.4
+
const ResourceColGroup = memo(function ResourceColGroup({
columns,
hasCheckbox,
}: ResourceColGroupProps) {
+ const weights = columns.map(
+ (col, colIdx) => (colIdx === 0 ? 2.5 : 1.0) * (col.widthMultiplier ?? 1)
+ )
+ const total = (hasCheckbox ? CHECKBOX_WEIGHT : 0) + weights.reduce((s, w) => s + w, 0)
+
return (
- {hasCheckbox &&
)
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/action-bar/action-bar.tsx
new file mode 100644
index 00000000000..125184647b9
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/action-bar/action-bar.tsx
@@ -0,0 +1,127 @@
+'use client'
+
+import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
+import {
+ Button,
+ Download,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+ Folder,
+ Tooltip,
+ Trash2,
+} from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import type { MoveOptionNode } from '@/app/workspace/[workspaceId]/files/move-options'
+import { renderMoveOption } from '@/app/workspace/[workspaceId]/files/move-options'
+
+interface FilesActionBarProps {
+ selectedCount: number
+ onDownload?: () => void
+ onMove?: (optionValue: string) => void
+ moveOptions?: MoveOptionNode[]
+ onDelete?: () => void
+ isLoading?: boolean
+ className?: string
+}
+
+export function FilesActionBar({
+ selectedCount,
+ onDownload,
+ onMove,
+ moveOptions,
+ onDelete,
+ isLoading = false,
+ className,
+}: FilesActionBarProps) {
+ return (
+
+
+ {selectedCount > 0 && (
+
+
+
+ {selectedCount} selected
+
+
+ {onDownload && (
+
+
+
+
+
+ Download
+
+ )}
+ {onMove && moveOptions && (
+
+
+
+
+
+
+
+
+ Move
+
+
+ {moveOptions.length > 0 && (
+ onMove(moveOptions[0].value)}>
+
+ )}
+ {moveOptions.length > 1 &&
+
+ )}
+ {onDelete && (
+
+
+
+
+
+ Delete
+
+ )}
+
+
+ )}
+
+
+ )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/action-bar/index.ts b/apps/sim/app/workspace/[workspaceId]/files/components/action-bar/index.ts
new file mode 100644
index 00000000000..aa19162a077
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/action-bar/index.ts
@@ -0,0 +1 @@
+export { FilesActionBar } from './action-bar'
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/delete-confirm-modal/delete-confirm-modal.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/delete-confirm-modal/delete-confirm-modal.tsx
new file mode 100644
index 00000000000..045884086a0
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/delete-confirm-modal/delete-confirm-modal.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import { memo } from 'react'
+import {
+ Button,
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalDescription,
+ ModalFooter,
+ ModalHeader,
+} from '@/components/emcn'
+
+interface DeleteConfirmModalProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ fileName?: string
+ fileCount: number
+ folderCount: number
+ onDelete: () => void
+ isPending: boolean
+}
+
+export const DeleteConfirmModal = memo(function DeleteConfirmModal({
+ open,
+ onOpenChange,
+ fileName,
+ fileCount,
+ folderCount,
+ onDelete,
+ isPending,
+}: DeleteConfirmModalProps) {
+ const totalCount = fileCount + folderCount
+ const hasFolders = folderCount > 0
+ const title = totalCount > 1 ? 'Delete Items' : hasFolders ? 'Delete Folder' : 'Delete File'
+ const consequence = hasFolders
+ ? totalCount > 1
+ ? 'This will also delete files and folders inside any selected folders.'
+ : 'This will also delete files and folders inside it.'
+ : totalCount > 1
+ ? 'You can restore them from Recently Deleted in Settings.'
+ : 'You can restore it from Recently Deleted in Settings.'
+
+ return (
+
+
+ {title}
+
+
+ Are you sure you want to delete{' '}
+ {fileName ? (
+ {fileName}
+ ) : (
+ `${totalCount} item${totalCount === 1 ? '' : 's'}`
+ )}
+ ? {consequence}
+
+
+
+ onOpenChange(false)} disabled={isPending}>
+ Cancel
+
+
+ {isPending ? 'Deleting...' : 'Delete'}
+
+
+
+
+ )
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/delete-confirm-modal/index.ts b/apps/sim/app/workspace/[workspaceId]/files/components/delete-confirm-modal/index.ts
new file mode 100644
index 00000000000..23b57d9365a
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/delete-confirm-modal/index.ts
@@ -0,0 +1 @@
+export { DeleteConfirmModal } from './delete-confirm-modal'
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/file-row-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/file-row-context-menu.tsx
new file mode 100644
index 00000000000..1d545d0b9eb
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/file-row-context-menu.tsx
@@ -0,0 +1,114 @@
+'use client'
+
+import { memo } from 'react'
+import {
+ Download,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger,
+ Eye,
+ Folder,
+ FolderInput,
+ Pencil,
+ Trash2,
+} from '@/components/emcn'
+import type { MoveOptionNode } from '@/app/workspace/[workspaceId]/files/move-options'
+import { renderMoveOption } from '@/app/workspace/[workspaceId]/files/move-options'
+
+interface FileRowContextMenuProps {
+ isOpen: boolean
+ position: { x: number; y: number }
+ onClose: () => void
+ onOpen: () => void
+ onDownload?: () => void
+ onRename: () => void
+ onDelete: () => void
+ onMove?: (optionValue: string) => void
+ moveOptions?: MoveOptionNode[]
+ canEdit: boolean
+ selectedCount: number
+}
+
+export const FileRowContextMenu = memo(function FileRowContextMenu({
+ isOpen,
+ position,
+ onClose,
+ onOpen,
+ onDownload,
+ onRename,
+ onDelete,
+ onMove,
+ moveOptions,
+ canEdit,
+ selectedCount,
+}: FileRowContextMenuProps) {
+ const isMultiSelect = selectedCount > 1
+
+ return (
+ !open && onClose()} modal={false}>
+
+
+
+ e.preventDefault()}
+ >
+ {!isMultiSelect && (
+
+
+ )}
+ {onDownload && (
+
+
+ )}
+ {canEdit && (
+ <>
+
+
+ )}
+ {onMove && moveOptions && moveOptions.length > 0 && (
+
+
+
+
+ onMove(moveOptions[0].value)}>
+
+ {moveOptions.length > 1 &&
+
+ )}
+
+
+
+ )}
+
+
+ )
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/index.ts b/apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/index.ts
new file mode 100644
index 00000000000..d53dca37c19
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/index.ts
@@ -0,0 +1 @@
+export { FileRowContextMenu } from './file-row-context-menu'
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
index 53072bced76..7af1ea24fdd 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
@@ -631,7 +631,7 @@ const STATIC_MARKDOWN_COMPONENTS = {
),
thead: ({ children }: { children?: React.ReactNode }) => (
- {children}
+ {children}
),
tbody: ({ children }: { children?: React.ReactNode }) => {children} ,
tr: ({ children }: { children?: React.ReactNode }) => (
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/files-list-context-menu/files-list-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/files-list-context-menu/files-list-context-menu.tsx
index 031213ead7f..1954a1fcb05 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/files-list-context-menu/files-list-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/files-list-context-menu/files-list-context-menu.tsx
@@ -7,15 +7,17 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/emcn'
-import { Plus, Upload } from '@/components/emcn/icons'
+import { FolderPlus, Plus, Upload } from '@/components/emcn/icons'
interface FilesListContextMenuProps {
isOpen: boolean
position: { x: number; y: number }
onClose: () => void
onCreateFile?: () => void
+ onCreateFolder?: () => void
onUploadFile?: () => void
disableCreate?: boolean
+ disableCreateFolder?: boolean
disableUpload?: boolean
}
@@ -24,22 +26,18 @@ export const FilesListContextMenu = memo(function FilesListContextMenu({
position,
onClose,
onCreateFile,
+ onCreateFolder,
onUploadFile,
disableCreate = false,
+ disableCreateFolder = false,
disableUpload = false,
}: FilesListContextMenuProps) {
return (
!open && onClose()} modal={false}>
@@ -56,6 +54,12 @@ export const FilesListContextMenu = memo(function FilesListContextMenu({
New file
)}
+ {onCreateFolder && (
+
+
+ )}
{onUploadFile && (
= {
'text/markdown': 'Markdown',
}
+const EMPTY_WORKSPACE_FILES: WorkspaceFileRecord[] = []
+const EMPTY_WORKSPACE_FILE_FOLDERS: WorkspaceFileFolderApi[] = []
+
+const fileRowId = (id: string) => `file:${id}`
+const folderRowId = (id: string) => `folder:${id}`
+const parseRowId = (rowId: string): { kind: 'file' | 'folder'; id: string } => {
+ if (rowId.startsWith('folder:')) return { kind: 'folder', id: rowId.slice('folder:'.length) }
+ if (rowId.startsWith('file:')) return { kind: 'file', id: rowId.slice('file:'.length) }
+ return { kind: 'file', id: rowId }
+}
+
+const hasExternalFiles = (dataTransfer: DataTransfer): boolean =>
+ dataTransfer.types.includes('Files')
+
function formatFileType(mimeType: string | null, filename: string): string {
if (mimeType && MIME_TYPE_LABELS[mimeType]) {
return MIME_TYPE_LABELS[mimeType]
@@ -143,11 +173,13 @@ export function Files() {
const router = useRouter()
const searchParams = useSearchParams()
const isNewFile = searchParams.get('new') === '1'
+ const currentFolderId = searchParams.get('folderId')
const workspaceId = params?.workspaceId as string
const fileIdFromRoute =
typeof params?.fileId === 'string' && params.fileId.length > 0 ? params.fileId : null
const userPermissions = useUserPermissionsContext()
+ const canEdit = userPermissions.canEdit === true
const { config: permissionConfig } = usePermissionConfig()
useEffect(() => {
@@ -156,11 +188,17 @@ export function Files() {
}
}, [permissionConfig.hideFilesTab, router, workspaceId])
- const { data: files = [], isLoading, error } = useWorkspaceFiles(workspaceId)
+ const { data: files = EMPTY_WORKSPACE_FILES, isLoading, error } = useWorkspaceFiles(workspaceId)
+ const { data: folders = EMPTY_WORKSPACE_FILE_FOLDERS, isLoading: foldersLoading } =
+ useWorkspaceFileFolders(workspaceId)
const { data: members } = useWorkspaceMembersQuery(workspaceId)
const uploadFile = useUploadWorkspaceFile()
const deleteFile = useDeleteWorkspaceFile()
const renameFile = useRenameWorkspaceFile()
+ const createFolder = useCreateWorkspaceFileFolder()
+ const updateFolder = useUpdateWorkspaceFileFolder()
+ const moveItems = useMoveWorkspaceFileItems()
+ const bulkArchiveItems = useBulkArchiveWorkspaceFileItems()
const {
isOpen: isContextMenuOpen,
@@ -183,6 +221,8 @@ export function Files() {
const justCreatedFileIdRef = useRef(null)
const filesRef = useRef(files)
filesRef.current = files
+ const foldersRef = useRef(folders)
+ foldersRef.current = folders
const [uploading, setUploading] = useState(false)
const [uploadProgress, setUploadProgress] = useState({
@@ -205,6 +245,9 @@ export function Files() {
const [creatingFile, setCreatingFile] = useState(false)
const [isDirty, setIsDirty] = useState(false)
const [saveStatus, setSaveStatus] = useState('idle')
+ const [selectedRowIds, setSelectedRowIds] = useState>(() => new Set())
+ const [activeDropTargetId, setActiveDropTargetId] = useState(null)
+ const [draggedRowIds, setDraggedRowIds] = useState>(() => new Set())
const [previewMode, setPreviewMode] = useState(() => {
if (isNewFile) return 'editor'
if (fileIdFromRoute) {
@@ -216,13 +259,25 @@ export function Files() {
})
const [showUnsavedChangesAlert, setShowUnsavedChangesAlert] = useState(false)
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
- const contextMenuFileRef = useRef(null)
- const [deleteTargetFile, setDeleteTargetFile] = useState<{ id: string; name: string } | null>(
- null
- )
+ const contextMenuItemRef = useRef(null)
+ const lastSelectedIndexRef = useRef(-1)
+ const draggedRowIdsRef = useRef([])
+ const dragGhostRef = useRef(null)
+ const [deleteTarget, setDeleteTarget] = useState<{
+ fileIds: string[]
+ folderIds: string[]
+ name: string
+ } | null>(null)
const listRename = useInlineRename({
- onSave: (fileId, name) => renameFile.mutate({ workspaceId, fileId, name }),
+ onSave: (rowId, name) => {
+ const parsed = parseRowId(rowId)
+ if (parsed.kind === 'folder') {
+ updateFolder.mutate({ workspaceId, folderId: parsed.id, updates: { name } })
+ return
+ }
+ renameFile.mutate({ workspaceId, fileId: parsed.id, name })
+ },
})
const headerRename = useInlineRename({
@@ -231,6 +286,12 @@ export function Files() {
},
})
+ const breadcrumbRename = useInlineRename({
+ onSave: (folderId, name) => {
+ updateFolder.mutate({ workspaceId, folderId, updates: { name } })
+ },
+ })
+
const selectedFile = useMemo(
() => (fileIdFromRoute ? files.find((f) => f.id === fileIdFromRoute) : null),
[fileIdFromRoute, files]
@@ -238,10 +299,40 @@ export function Files() {
const selectedFileRef = useRef(selectedFile)
selectedFileRef.current = selectedFile
+ const folderById = useMemo(() => new Map(folders.map((folder) => [folder.id, folder])), [folders])
+ const currentFolder = currentFolderId ? (folderById.get(currentFolderId) ?? null) : null
+ const currentFolderPath = currentFolder?.path ?? null
+
+ const visibleFolders = useMemo(() => {
+ const siblings = folders.filter((folder) => (folder.parentId ?? null) === currentFolderId)
+ const searched = debouncedSearchTerm
+ ? siblings.filter((folder) =>
+ folder.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
+ )
+ : siblings
+ const col = activeSort?.column ?? 'name'
+ const dir = activeSort?.direction ?? 'asc'
+ return [...searched].sort((a, b) => {
+ let cmp = 0
+ if (col === 'updated') {
+ cmp = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
+ } else if (col === 'created') {
+ cmp = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+ } else {
+ cmp = a.name.localeCompare(b.name)
+ }
+ return dir === 'asc' ? cmp : -cmp
+ })
+ }, [folders, currentFolderId, debouncedSearchTerm, activeSort])
+
const filteredFiles = useMemo(() => {
let result = debouncedSearchTerm
- ? files.filter((f) => f.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase()))
- : files
+ ? files.filter(
+ (f) =>
+ (f.folderId ?? null) === currentFolderId &&
+ f.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
+ )
+ : files.filter((f) => (f.folderId ?? null) === currentFolderId)
if (typeFilter.length > 0) {
result = result.filter((f) => {
@@ -296,28 +387,48 @@ export function Files() {
}
return dir === 'asc' ? cmp : -cmp
})
- }, [files, debouncedSearchTerm, typeFilter, sizeFilter, uploadedByFilter, activeSort, members])
-
- const rowCacheRef = useRef(
- new Map()
- )
+ }, [
+ files,
+ currentFolderId,
+ debouncedSearchTerm,
+ typeFilter,
+ sizeFilter,
+ uploadedByFilter,
+ activeSort,
+ members,
+ ])
const baseRows: ResourceRow[] = useMemo(() => {
- const prevCache = rowCacheRef.current
- const nextCache = new Map<
- string,
- { row: ResourceRow; file: WorkspaceFileRecord; members: typeof members }
- >()
-
- const result = filteredFiles.map((file) => {
- const cached = prevCache.get(file.id)
- if (cached && cached.file === file && cached.members === members) {
- nextCache.set(file.id, cached)
- return cached.row
- }
+ const folderRows = visibleFolders.map((folder) => ({
+ id: folderRowId(folder.id),
+ cells: {
+ name: {
+ icon: ()
+ for (const folder of folders) {
+ if (!folder.parentId) continue
+ const children = childrenByParent.get(folder.parentId) ?? []
+ children.push(folder.id)
+ childrenByParent.set(folder.parentId, children)
}
- const unsupported: string[] = []
- const allowedFiles = sizeFiltered.filter((f) => {
- const ext = getFileExtension(f.name)
- const ok = SUPPORTED_EXTENSIONS.includes(ext as (typeof SUPPORTED_EXTENSIONS)[number])
- if (!ok) unsupported.push(f.name)
- return ok
- })
+ const result = new Map>()
+ const collect = (folderId: string, seen = new Set()): Set => {
+ const cached = result.get(folderId)
+ if (cached) return cached
+ if (seen.has(folderId)) return new Set()
+
+ const nextSeen = new Set(seen)
+ nextSeen.add(folderId)
+ const descendants = new Set()
+ for (const childId of childrenByParent.get(folderId) ?? []) {
+ if (nextSeen.has(childId)) continue
+ descendants.add(childId)
+ for (const nestedId of collect(childId, nextSeen)) {
+ descendants.add(nestedId)
+ }
+ }
+ result.set(folderId, descendants)
+ return descendants
+ }
- if (unsupported.length > 0) {
- logger.warn('Unsupported file types skipped:', unsupported)
+ for (const folder of folders) {
+ collect(folder.id)
}
+ return result
+ }, [folders])
+
+ const isInvalidDropTarget = useCallback(
+ (targetRowId: string, sourceRowIds: string[]) => {
+ const target = parseRowId(targetRowId)
+ if (target.kind !== 'folder') return true
+
+ for (const sourceRowId of sourceRowIds) {
+ const source = parseRowId(sourceRowId)
+ if (source.kind !== 'folder') continue
+ if (source.id === target.id) return true
+ if (descendantFolderIdsByFolderId.get(source.id)?.has(target.id)) return true
+ }
+
+ // Reject drop if every dragged item is already a direct child of the target
+ const allAlreadyInTarget = sourceRowIds.every((sourceRowId) => {
+ const source = parseRowId(sourceRowId)
+ if (source.kind === 'file') {
+ return filesRef.current.find((f) => f.id === source.id)?.folderId === target.id
+ }
+ return (foldersRef.current.find((f) => f.id === source.id)?.parentId ?? null) === target.id
+ })
+ if (allAlreadyInTarget) return true
- if (allowedFiles.length === 0) return
+ return false
+ },
+ [descendantFolderIdsByFolderId]
+ )
- try {
- setUploading(true)
- setUploadProgress({ completed: 0, total: allowedFiles.length, currentPercent: 0 })
+ const uploadFiles = useCallback(
+ async (filesToUpload: File[], targetFolderId = currentFolderId) => {
+ if (!workspaceId || filesToUpload.length === 0 || !canEdit) return
- for (let i = 0; i < allowedFiles.length; i++) {
- try {
- await uploadFile.mutateAsync({
+ const oversized: string[] = []
+ const sizeFiltered = filesToUpload.filter((f) => {
+ if (f.size > MAX_WORKSPACE_FILE_SIZE) {
+ oversized.push(f.name)
+ return false
+ }
+ return true
+ })
+ if (oversized.length > 0) {
+ toast.error(
+ oversized.length === 1
+ ? `${oversized[0]} exceeds the 5 GiB upload limit`
+ : `${oversized.length} files exceed the 5 GiB upload limit`
+ )
+ }
+
+ const unsupported: string[] = []
+ const allowedFiles = sizeFiltered.filter((f) => {
+ const ext = getFileExtension(f.name)
+ const ok = SUPPORTED_EXTENSIONS.includes(ext as (typeof SUPPORTED_EXTENSIONS)[number])
+ if (!ok) unsupported.push(f.name)
+ return ok
+ })
+
+ if (unsupported.length > 0) {
+ logger.warn('Unsupported file types skipped:', unsupported)
+ }
+
+ if (allowedFiles.length === 0) return
+
+ try {
+ setUploading(true)
+ setUploadProgress({ completed: 0, total: allowedFiles.length, currentPercent: 0 })
+
+ for (let i = 0; i < allowedFiles.length; i++) {
+ try {
+ await uploadFile.mutateAsync({
+ workspaceId,
+ file: allowedFiles[i],
+ folderId: targetFolderId,
+ onProgress: ({ percent }) => {
+ setUploadProgress((prev) => ({ ...prev, currentPercent: percent }))
+ },
+ })
+ setUploadProgress({
+ completed: i + 1,
+ total: allowedFiles.length,
+ currentPercent: 0,
+ })
+ } catch (err) {
+ logger.error('Error uploading file:', err)
+ }
+ }
+ } catch (err) {
+ logger.error('Error uploading file:', err)
+ } finally {
+ setUploading(false)
+ setUploadProgress({ completed: 0, total: 0, currentPercent: 0 })
+ }
+ },
+ [workspaceId, canEdit, currentFolderId]
+ )
+
+ const rowDragDropConfig = useMemo(
+ () => ({
+ activeDropTargetId,
+ draggedRowIds,
+ isAnyDragActive: draggedRowIds.size > 0,
+ isRowDraggable: (rowId) => canEdit && listRename.editingId !== rowId,
+ isRowDropTarget: (rowId) => canEdit && parseRowId(rowId).kind === 'folder',
+ onDragStart: (e: DragEvent, rowId) => {
+ if (!canEdit || listRename.editingId === rowId) {
+ e.preventDefault()
+ return
+ }
+
+ const sourceRowIds = selectedRowIds.has(rowId)
+ ? visibleRowIds.filter((visibleRowId) => selectedRowIds.has(visibleRowId))
+ : [rowId]
+
+ draggedRowIdsRef.current = sourceRowIds
+ setDraggedRowIds(new Set(sourceRowIds))
+ if (!selectedRowIds.has(rowId)) {
+ setSelectedRowIds(new Set([rowId]))
+ }
+
+ e.dataTransfer.effectAllowed = 'move'
+ e.dataTransfer.setData(
+ 'application/x-sim-workspace-file-rows',
+ JSON.stringify(sourceRowIds)
+ )
+ e.dataTransfer.setData('text/plain', sourceRowIds.join(','))
+
+ const count = sourceRowIds.length
+ const firstParsed = parseRowId(sourceRowIds[0])
+ const firstName =
+ firstParsed.kind === 'file'
+ ? filesRef.current.find((f) => f.id === firstParsed.id)?.name
+ : foldersRef.current.find((f) => f.id === firstParsed.id)?.name
+ const ghostLabel =
+ count > 1 ? `${firstName ?? 'Items'} +${count - 1} more` : (firstName ?? 'Item')
+ const ghost = document.createElement('div')
+ ghost.style.cssText =
+ 'position:fixed;top:-500px;left:0;display:inline-flex;align-items:center;padding:4px 10px;background:var(--surface-active);border:1px solid var(--border);border-radius:8px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;color:var(--text-body);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-medium);z-index:var(--z-toast)'
+ const text = document.createElement('span')
+ text.style.cssText = 'max-width:200px;overflow:hidden;text-overflow:ellipsis'
+ text.textContent = ghostLabel
+ ghost.appendChild(text)
+ document.body.appendChild(ghost)
+ void ghost.offsetHeight
+ e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
+ dragGhostRef.current = ghost
+ },
+ onDragOver: (e: DragEvent, rowId) => {
+ const sourceRowIds = draggedRowIdsRef.current
+ const isExternalFileDrag = hasExternalFiles(e.dataTransfer)
+ if (!isExternalFileDrag && isInvalidDropTarget(rowId, sourceRowIds)) return
+
+ e.preventDefault()
+ e.stopPropagation()
+ e.dataTransfer.dropEffect = isExternalFileDrag ? 'copy' : 'move'
+ setActiveDropTargetId(rowId)
+ },
+ onDragLeave: (e: DragEvent, rowId) => {
+ const relatedTarget = e.relatedTarget
+ if (relatedTarget instanceof Node && e.currentTarget.contains(relatedTarget)) return
+ setActiveDropTargetId((current) => (current === rowId ? null : current))
+ },
+ onDrop: (e: DragEvent, rowId) => {
+ e.preventDefault()
+ e.stopPropagation()
+ dragCounterRef.current = 0
+ setIsDraggingOver(false)
+ setActiveDropTargetId(null)
+ const target = parseRowId(rowId)
+ if (target.kind !== 'folder') return
+
+ const droppedFiles = Array.from(e.dataTransfer.files ?? [])
+ if (droppedFiles.length > 0) {
+ void uploadFiles(droppedFiles, target.id)
+ return
+ }
+
+ let sourceRowIds = draggedRowIdsRef.current
+ const rawSource = e.dataTransfer.getData('application/x-sim-workspace-file-rows')
+ if (rawSource) {
+ try {
+ const parsedSource = JSON.parse(rawSource)
+ if (Array.isArray(parsedSource)) {
+ sourceRowIds = parsedSource.filter(
+ (source): source is string => typeof source === 'string' && source.length > 0
+ )
+ }
+ } catch {
+ sourceRowIds = draggedRowIdsRef.current
+ }
+ }
+
+ if (isInvalidDropTarget(rowId, sourceRowIds)) return
+
+ const fileIds = sourceRowIds
+ .map(parseRowId)
+ .filter((source) => source.kind === 'file')
+ .map((source) => source.id)
+ const folderIds = sourceRowIds
+ .map(parseRowId)
+ .filter((source) => source.kind === 'folder')
+ .map((source) => source.id)
+
+ if (fileIds.length === 0 && folderIds.length === 0) return
+
+ void moveItems
+ .mutateAsync({
workspaceId,
- file: allowedFiles[i],
- onProgress: ({ percent }) => {
- setUploadProgress((prev) => ({ ...prev, currentPercent: percent }))
- },
+ fileIds,
+ folderIds,
+ targetFolderId: target.id,
+ })
+ .then(() => {
+ setSelectedRowIds(new Set())
})
- setUploadProgress({
- completed: i + 1,
- total: allowedFiles.length,
- currentPercent: 0,
+ .catch((error) => {
+ logger.error('Failed to move items via drag and drop:', error)
})
- } catch (err) {
- logger.error('Error uploading file:', err)
+ },
+ onDragEnd: () => {
+ if (dragGhostRef.current) {
+ dragGhostRef.current.remove()
+ dragGhostRef.current = null
}
- }
- } catch (err) {
- logger.error('Error uploading file:', err)
- } finally {
- setUploading(false)
- setUploadProgress({ completed: 0, total: 0, currentPercent: 0 })
- }
- }
+ dragCounterRef.current = 0
+ draggedRowIdsRef.current = []
+ setDraggedRowIds(new Set())
+ setIsDraggingOver(false)
+ setActiveDropTargetId(null)
+ },
+ }),
+ [
+ activeDropTargetId,
+ draggedRowIds,
+ canEdit,
+ listRename.editingId,
+ selectedRowIds,
+ visibleRowIds,
+ isInvalidDropTarget,
+ uploadFiles,
+ workspaceId,
+ ]
+ )
const handleFileChange = async (e: React.ChangeEvent) => {
const list = e.target.files
@@ -454,22 +852,26 @@ export function Files() {
}
const handleDragEnter = (e: React.DragEvent) => {
+ if (!hasExternalFiles(e.dataTransfer)) return
e.preventDefault()
dragCounterRef.current++
- if (e.dataTransfer.types.includes('Files')) setIsDraggingOver(true)
+ setIsDraggingOver(true)
}
- const handleDragLeave = () => {
+ const handleDragLeave = (e: React.DragEvent) => {
+ if (!hasExternalFiles(e.dataTransfer)) return
dragCounterRef.current--
if (dragCounterRef.current === 0) setIsDraggingOver(false)
}
const handleDragOver = (e: React.DragEvent) => {
+ if (!hasExternalFiles(e.dataTransfer)) return
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
}
const handleDrop = async (e: React.DragEvent) => {
+ if (!hasExternalFiles(e.dataTransfer)) return
e.preventDefault()
dragCounterRef.current = 0
setIsDraggingOver(false)
@@ -485,50 +887,73 @@ export function Files() {
}
}, [])
- const deleteTargetFileRef = useRef(deleteTargetFile)
- deleteTargetFileRef.current = deleteTargetFile
+ const deleteTargetRef = useRef(deleteTarget)
+ deleteTargetRef.current = deleteTarget
const fileIdFromRouteRef = useRef(fileIdFromRoute)
fileIdFromRouteRef.current = fileIdFromRoute
const handleDelete = useCallback(async () => {
- const target = deleteTargetFileRef.current
+ const target = deleteTargetRef.current
if (!target) return
try {
- await deleteFile.mutateAsync({
- workspaceId,
- fileId: target.id,
- })
+ if (target.folderIds.length > 0 || target.fileIds.length > 1) {
+ await bulkArchiveItems.mutateAsync({
+ workspaceId,
+ fileIds: target.fileIds,
+ folderIds: target.folderIds,
+ })
+ } else if (target.fileIds.length === 1) {
+ await deleteFile.mutateAsync({
+ workspaceId,
+ fileId: target.fileIds[0],
+ })
+ } else {
+ setShowDeleteConfirm(false)
+ setDeleteTarget(null)
+ return
+ }
setShowDeleteConfirm(false)
- setDeleteTargetFile(null)
- if (fileIdFromRouteRef.current === target.id) {
+ setDeleteTarget(null)
+ setSelectedRowIds(new Set())
+ if (target.fileIds.includes(fileIdFromRouteRef.current ?? '')) {
setIsDirty(false)
setSaveStatus('idle')
- router.push(`/workspace/${workspaceId}/files`)
+ router.push(
+ currentFolderId
+ ? `/workspace/${workspaceId}/files?folderId=${currentFolderId}`
+ : `/workspace/${workspaceId}/files`
+ )
}
} catch (err) {
logger.error('Failed to delete file:', err)
}
- }, [workspaceId, router])
+ }, [workspaceId, router, currentFolderId])
const isDirtyRef = useRef(isDirty)
isDirtyRef.current = isDirty
const saveStatusRef = useRef(saveStatus)
saveStatusRef.current = saveStatus
+ const pendingFileNavigationUrlRef = useRef(null)
const handleSave = useCallback(async () => {
if (!saveRef.current || !isDirtyRef.current || saveStatusRef.current === 'saving') return
await saveRef.current()
}, [])
- const handleBackAttempt = useCallback(() => {
- if (isDirtyRef.current) {
- setShowUnsavedChangesAlert(true)
- } else {
+ const handleNavigateFromFileDetail = useCallback(
+ (url: string) => {
+ if (isDirtyRef.current) {
+ pendingFileNavigationUrlRef.current = url
+ setShowUnsavedChangesAlert(true)
+ return
+ }
+
setPreviewMode('editor')
- router.push(`/workspace/${workspaceId}/files`)
- }
- }, [router, workspaceId])
+ router.push(url)
+ },
+ [router]
+ )
const handleStartHeaderRename = useCallback(() => {
const file = selectedFileRef.current
@@ -543,64 +968,115 @@ export function Files() {
const handleDeleteSelected = useCallback(() => {
const file = selectedFileRef.current
if (file) {
- setDeleteTargetFile({ id: file.id, name: file.name })
+ setDeleteTarget({ fileIds: [file.id], folderIds: [], name: file.name })
setShowDeleteConfirm(true)
}
}, [])
- const fileDetailBreadcrumbs = useMemo(
- () =>
- selectedFile
- ? [
- { label: 'Files', onClick: handleBackAttempt },
- {
- label: selectedFile.name,
- editing: headerRename.editingId
- ? {
- isEditing: true,
- value: headerRename.editValue,
- onChange: headerRename.setEditValue,
- onSubmit: headerRename.submitRename,
- onCancel: headerRename.cancelRename,
- }
- : undefined,
- dropdownItems: [
- {
- label: 'Rename',
- icon: Pencil,
- onClick: handleStartHeaderRename,
- },
- {
- label: 'Download',
- icon: Download,
- onClick: handleDownloadSelected,
- },
- {
- label: 'Delete',
- icon: Trash,
- onClick: handleDeleteSelected,
- },
- ],
- },
- ]
- : [],
- [
- selectedFile,
- handleBackAttempt,
- headerRename.editingId,
- headerRename.editValue,
- handleStartHeaderRename,
- handleDownloadSelected,
- handleDeleteSelected,
+ const handleBulkDelete = useCallback(() => {
+ if (selectedFileIds.length === 0 && selectedFolderIds.length === 0) return
+ setDeleteTarget({
+ fileIds: selectedFileIds,
+ folderIds: selectedFolderIds,
+ name:
+ selectedFileIds.length + selectedFolderIds.length === 1
+ ? (files.find((file) => file.id === selectedFileIds[0])?.name ??
+ folders.find((folder) => folder.id === selectedFolderIds[0])?.name ??
+ 'selected item')
+ : `${selectedFileIds.length + selectedFolderIds.length} selected items`,
+ })
+ setShowDeleteConfirm(true)
+ }, [selectedFileIds, selectedFolderIds, files, folders])
+
+ const handleBulkDownload = useCallback(() => {
+ const selectedFiles = files.filter((file) => selectedFileIds.includes(file.id))
+ if (selectedFiles.length === 1 && selectedFolderIds.length === 0) {
+ handleDownload(selectedFiles[0])
+ return
+ }
+
+ const query = new URLSearchParams()
+ for (const fileId of selectedFileIds) query.append('fileIds', fileId)
+ for (const folderId of selectedFolderIds) query.append('folderIds', folderId)
+
+ if (query.size === 0) return
+ window.location.href = `/api/workspaces/${workspaceId}/files/download?${query.toString()}`
+ }, [selectedFileIds, selectedFolderIds, files, handleDownload, workspaceId])
+
+ const fileDetailBreadcrumbs = useMemo(() => {
+ if (!selectedFile) return []
+
+ const folderBreadcrumbs: BreadcrumbItem[] = []
+ const visitedFolderIds = new Set()
+ let folderId = selectedFile.folderId
+
+ while (folderId && !visitedFolderIds.has(folderId)) {
+ visitedFolderIds.add(folderId)
+ const folder = folderById.get(folderId)
+ if (!folder) break
+
+ folderBreadcrumbs.unshift({
+ label: folder.name,
+ onClick: () =>
+ handleNavigateFromFileDetail(`/workspace/${workspaceId}/files?folderId=${folder.id}`),
+ })
+ folderId = folder.parentId
+ }
+
+ return [
+ {
+ label: 'Files',
+ onClick: () => handleNavigateFromFileDetail(`/workspace/${workspaceId}/files`),
+ },
+ ...folderBreadcrumbs,
+ {
+ label: selectedFile.name,
+ editing: headerRename.editingId
+ ? {
+ isEditing: true,
+ value: headerRename.editValue,
+ onChange: headerRename.setEditValue,
+ onSubmit: headerRename.submitRename,
+ onCancel: headerRename.cancelRename,
+ }
+ : undefined,
+ dropdownItems: [
+ { label: 'Download', icon: Download, onClick: handleDownloadSelected },
+ ...(canEdit
+ ? [
+ { label: 'Rename', icon: Pencil, onClick: handleStartHeaderRename },
+ { label: 'Delete', icon: Trash2, onClick: handleDeleteSelected },
+ ]
+ : []),
+ ],
+ },
]
- )
+ }, [
+ selectedFile,
+ folderById,
+ handleNavigateFromFileDetail,
+ workspaceId,
+ canEdit,
+ headerRename.editingId,
+ headerRename.editValue,
+ handleStartHeaderRename,
+ handleDownloadSelected,
+ handleDeleteSelected,
+ ])
const handleDiscardChanges = () => {
setShowUnsavedChangesAlert(false)
setIsDirty(false)
setSaveStatus('idle')
setPreviewMode('editor')
- router.push(`/workspace/${workspaceId}/files`)
+ const folderId = selectedFileRef.current?.folderId
+ const targetUrl =
+ pendingFileNavigationUrlRef.current ??
+ (folderId
+ ? `/workspace/${workspaceId}/files?folderId=${folderId}`
+ : `/workspace/${workspaceId}/files`)
+ pendingFileNavigationUrlRef.current = null
+ router.push(targetUrl)
}
const creatingFileRef = useRef(creatingFile)
@@ -611,7 +1087,9 @@ export function Files() {
setCreatingFile(true)
try {
- const existingNames = new Set(filesRef.current.map((f) => f.name))
+ const existingNames = new Set(
+ filesRef.current.filter((f) => (f.folderId ?? null) === currentFolderId).map((f) => f.name)
+ )
let name = 'untitled.md'
let counter = 1
while (existingNames.has(name)) {
@@ -622,57 +1100,152 @@ export function Files() {
const mimeType = getMimeTypeFromExtension('md')
const blob = new Blob([''], { type: mimeType })
const file = new File([blob], name, { type: mimeType })
- const result = await uploadFile.mutateAsync({ workspaceId, file, skipToast: true })
+ const result = await uploadFile.mutateAsync({
+ workspaceId,
+ file,
+ folderId: currentFolderId,
+ skipToast: true,
+ })
const fileId = result.file?.id
if (fileId) {
justCreatedFileIdRef.current = fileId
- router.push(`/workspace/${workspaceId}/files/${fileId}?new=1`)
+ const params = new URLSearchParams({ new: '1' })
+ if (currentFolderId) params.set('folderId', currentFolderId)
+ router.push(`/workspace/${workspaceId}/files/${fileId}?${params.toString()}`)
}
} catch (err) {
logger.error('Failed to create file:', err)
} finally {
setCreatingFile(false)
}
- }, [workspaceId, router])
+ }, [workspaceId, router, currentFolderId])
+
+ const handleCreateFolder = useCallback(async () => {
+ if (!workspaceId) return
+ const existingNames = new Set(
+ folders
+ .filter((folder) => (folder.parentId ?? null) === currentFolderId)
+ .map((folder) => folder.name)
+ )
+ let name = 'New folder'
+ let counter = 1
+ while (existingNames.has(name)) {
+ name = `New folder (${counter})`
+ counter++
+ }
+
+ try {
+ const folder = await createFolder.mutateAsync({
+ workspaceId,
+ name,
+ parentId: currentFolderId,
+ })
+ listRename.startRename(folderRowId(folder.id), folder.name)
+ } catch (error) {
+ logger.error('Failed to create folder:', error)
+ toast.error(toError(error).message)
+ }
+ }, [workspaceId, folders, currentFolderId, listRename.startRename])
const handleRowContextMenu = useCallback(
(e: React.MouseEvent, rowId: string) => {
- const file = filesRef.current.find((f) => f.id === rowId)
- if (file) {
- contextMenuFileRef.current = file
- openContextMenu(e)
+ const parsed = parseRowId(rowId)
+ const item =
+ parsed.kind === 'folder'
+ ? folders.find((folder) => folder.id === parsed.id)
+ : filesRef.current.find((file) => file.id === parsed.id)
+ if (!item) return
+ contextMenuItemRef.current =
+ parsed.kind === 'folder'
+ ? { kind: 'folder', id: parsed.id, folder: item as WorkspaceFileFolderApi }
+ : { kind: 'file', id: parsed.id, file: item as WorkspaceFileRecord }
+ if (!selectedRowIds.has(rowId)) {
+ lastSelectedIndexRef.current = visibleRowIds.indexOf(rowId)
+ setSelectedRowIds(new Set([rowId]))
}
+ openContextMenu(e)
},
- [openContextMenu]
+ [folders, openContextMenu, selectedRowIds, visibleRowIds]
)
const handleContextMenuOpen = useCallback(() => {
- const file = contextMenuFileRef.current
- if (!file) return
- router.push(`/workspace/${workspaceId}/files/${file.id}`)
+ const item = contextMenuItemRef.current
+ if (!item) return
+ if (item.kind === 'folder') {
+ router.push(`/workspace/${workspaceId}/files?folderId=${item.folder.id}`)
+ closeContextMenu()
+ return
+ }
+ router.push(
+ item.file.folderId
+ ? `/workspace/${workspaceId}/files/${item.file.id}?folderId=${item.file.folderId}`
+ : `/workspace/${workspaceId}/files/${item.file.id}`
+ )
closeContextMenu()
}, [closeContextMenu, router, workspaceId])
const handleContextMenuDownload = useCallback(() => {
- const file = contextMenuFileRef.current
- if (!file) return
- handleDownload(file)
+ const item = contextMenuItemRef.current
+ if (!item) return
+ const rowId = item.kind === 'file' ? fileRowId(item.file.id) : folderRowId(item.folder.id)
+ if (selectedRowIds.has(rowId) && selectedRowIds.size > 1) {
+ handleBulkDownload()
+ closeContextMenu()
+ return
+ }
+ if (item.kind === 'folder') {
+ window.location.href = `/api/workspaces/${workspaceId}/files/download?folderIds=${encodeURIComponent(item.folder.id)}`
+ closeContextMenu()
+ return
+ }
+ handleDownload(item.file)
closeContextMenu()
- }, [handleDownload, closeContextMenu])
+ }, [selectedRowIds, handleBulkDownload, closeContextMenu, workspaceId, handleDownload])
const handleContextMenuRename = useCallback(() => {
- const file = contextMenuFileRef.current
- if (file) listRename.startRename(file.id, file.name)
+ const item = contextMenuItemRef.current
+ if (item?.kind === 'file') listRename.startRename(fileRowId(item.file.id), item.file.name)
+ if (item?.kind === 'folder')
+ listRename.startRename(folderRowId(item.folder.id), item.folder.name)
closeContextMenu()
}, [listRename.startRename, closeContextMenu])
const handleContextMenuDelete = useCallback(() => {
- const file = contextMenuFileRef.current
- if (!file) return
- setDeleteTargetFile({ id: file.id, name: file.name })
+ const item = contextMenuItemRef.current
+ if (!item) return
+ const rowId = item.kind === 'file' ? fileRowId(item.file.id) : folderRowId(item.folder.id)
+ if (selectedRowIds.has(rowId) && selectedRowIds.size > 1) {
+ handleBulkDelete()
+ closeContextMenu()
+ return
+ }
+ setDeleteTarget(
+ item.kind === 'file'
+ ? { fileIds: [item.file.id], folderIds: [], name: item.file.name }
+ : { fileIds: [], folderIds: [item.folder.id], name: item.folder.name }
+ )
setShowDeleteConfirm(true)
closeContextMenu()
- }, [closeContextMenu])
+ }, [selectedRowIds, handleBulkDelete, closeContextMenu])
+
+ const handleContextMenuMove = useCallback(
+ async (optionValue: string) => {
+ const targetFolderId = optionValue === '__root__' ? null : optionValue
+ try {
+ await moveItems.mutateAsync({
+ workspaceId,
+ fileIds: selectedFileIds,
+ folderIds: selectedFolderIds,
+ targetFolderId,
+ })
+ setSelectedRowIds(new Set())
+ closeContextMenu()
+ } catch (error) {
+ logger.error('Failed to move items:', error)
+ }
+ },
+ [workspaceId, selectedFileIds, selectedFolderIds, closeContextMenu]
+ )
const handleContentContextMenu = useCallback(
(e: React.MouseEvent) => {
@@ -689,12 +1262,14 @@ export function Files() {
)
const handleListUploadFile = useCallback(() => {
+ if (!canEdit || uploading) return
fileInputRef.current?.click()
closeListContextMenu()
- }, [closeListContextMenu])
+ }, [canEdit, uploading, closeListContextMenu])
const prevFileIdRef = useRef(fileIdFromRoute)
- if (fileIdFromRoute !== prevFileIdRef.current) {
+ useEffect(() => {
+ if (fileIdFromRoute === prevFileIdRef.current) return
prevFileIdRef.current = fileIdFromRoute
const isJustCreated =
isNewFile || (fileIdFromRoute != null && justCreatedFileIdRef.current === fileIdFromRoute)
@@ -709,16 +1284,18 @@ export function Files() {
: null
return file && isPreviewable(file) ? 'preview' : 'editor'
})()
- if (nextMode !== previewMode) {
- setPreviewMode(nextMode)
- }
- }
+ setPreviewMode((current) => (nextMode === current ? current : nextMode))
+ }, [fileIdFromRoute, isNewFile])
useEffect(() => {
if (isNewFile && fileIdFromRoute) {
- router.replace(`/workspace/${workspaceId}/files/${fileIdFromRoute}`)
+ router.replace(
+ currentFolderId
+ ? `/workspace/${workspaceId}/files/${fileIdFromRoute}?folderId=${currentFolderId}`
+ : `/workspace/${workspaceId}/files/${fileIdFromRoute}`
+ )
}
- }, [isNewFile, fileIdFromRoute, router, workspaceId])
+ }, [isNewFile, fileIdFromRoute, router, workspaceId, currentFolderId])
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
@@ -740,6 +1317,49 @@ export function Files() {
}
}, [handleSave])
+ const selectedRowIdsRef = useRef(selectedRowIds)
+ selectedRowIdsRef.current = selectedRowIds
+ const visibleRowIdsRef = useRef(visibleRowIds)
+ visibleRowIdsRef.current = visibleRowIds
+ const listRenameActiveRef = useRef(listRename.editingId)
+ listRenameActiveRef.current = listRename.editingId
+ const handleBulkDeleteRef = useRef(handleBulkDelete)
+ handleBulkDeleteRef.current = handleBulkDelete
+
+ useEffect(() => {
+ const handleListKeyDown = (e: KeyboardEvent) => {
+ if (fileIdFromRouteRef.current) return
+ const active = document.activeElement
+ if (
+ active &&
+ (active.tagName === 'INPUT' ||
+ active.tagName === 'TEXTAREA' ||
+ (active as HTMLElement).isContentEditable)
+ )
+ return
+ if (listRenameActiveRef.current) return
+
+ if ((e.key === 'Delete' || e.key === 'Backspace') && selectedRowIdsRef.current.size > 0) {
+ e.preventDefault()
+ handleBulkDeleteRef.current()
+ return
+ }
+
+ if (e.key === 'Escape' && selectedRowIdsRef.current.size > 0) {
+ e.preventDefault()
+ setSelectedRowIds(new Set())
+ return
+ }
+
+ if ((e.metaKey || e.ctrlKey) && e.key === 'a' && visibleRowIdsRef.current.length > 0) {
+ e.preventDefault()
+ setSelectedRowIds(new Set(visibleRowIdsRef.current))
+ }
+ }
+ window.addEventListener('keydown', handleListKeyDown)
+ return () => window.removeEventListener('keydown', handleListKeyDown)
+ }, [])
+
const handleCyclePreviewMode = useCallback(() => {
setPreviewMode((prev) => {
if (prev === 'editor') return 'split'
@@ -807,14 +1427,19 @@ export function Files() {
icon: Download,
onClick: handleDownloadSelected,
},
- {
- label: 'Delete',
- icon: Trash,
- onClick: handleDeleteSelected,
- },
+ ...(canEdit
+ ? [
+ {
+ label: 'Delete',
+ icon: Trash2,
+ onClick: handleDeleteSelected,
+ },
+ ]
+ : []),
]
}, [
selectedFile,
+ canEdit,
saveStatus,
previewMode,
isDirty,
@@ -831,19 +1456,27 @@ export function Files() {
headerRenameRef.current = headerRename
const handleRowClick = useCallback(
- (id: string) => {
- if (listRenameRef.current.editingId !== id && !headerRenameRef.current.editingId) {
- router.push(`/workspace/${workspaceId}/files/${id}`)
+ (rowId: string) => {
+ if (listRenameRef.current.editingId !== rowId && !headerRenameRef.current.editingId) {
+ const parsed = parseRowId(rowId)
+ if (parsed.kind === 'folder') {
+ router.push(`/workspace/${workspaceId}/files?folderId=${parsed.id}`)
+ return
+ }
+ router.push(
+ currentFolderId
+ ? `/workspace/${workspaceId}/files/${parsed.id}?folderId=${currentFolderId}`
+ : `/workspace/${workspaceId}/files/${parsed.id}`
+ )
}
},
- [router, workspaceId]
+ [router, workspaceId, currentFolderId]
)
const handleUploadClick = useCallback(() => {
+ if (!canEdit || uploading) return
fileInputRef.current?.click()
- }, [])
-
- const canEdit = userPermissions.canEdit === true
+ }, [canEdit, uploading])
const searchConfig: SearchConfig = {
value: inputValue,
@@ -873,16 +1506,82 @@ export function Files() {
label: uploadButtonLabel,
icon: Upload,
onClick: handleUploadClick,
+ disabled: uploading || !canEdit,
+ },
+ {
+ label: 'New folder',
+ icon: FolderPlus,
+ onClick: handleCreateFolder,
+ disabled: createFolder.isPending || !canEdit,
},
],
- [uploadButtonLabel, handleUploadClick]
+ [uploadButtonLabel, handleUploadClick, handleCreateFolder, createFolder.isPending, canEdit]
)
- const handleNavigateToFiles = () => {
+ const handleNavigateToFiles = useCallback(() => {
router.push(`/workspace/${workspaceId}/files`)
- }
+ }, [router, workspaceId])
+
+ const loadingBreadcrumbs = useMemo(
+ () => [{ label: 'Files', onClick: handleNavigateToFiles }, { label: '...' }],
+ [handleNavigateToFiles]
+ )
+
+ const breadcrumbRenameRef = useRef(breadcrumbRename)
+ breadcrumbRenameRef.current = breadcrumbRename
+
+ const listBreadcrumbs = useMemo(() => {
+ const breadcrumbs: BreadcrumbItem[] = [{ label: 'Files', onClick: handleNavigateToFiles }]
+ if (!currentFolderPath) return breadcrumbs
- const loadingBreadcrumbs = [{ label: 'Files', onClick: handleNavigateToFiles }, { label: '...' }]
+ const segments = currentFolderPath.split('/')
+ let parentId: string | null = null
+ for (let i = 0; i < segments.length; i++) {
+ const segment = segments[i]
+ const folder = folders.find(
+ (item) => item.name === segment && (item.parentId ?? null) === parentId
+ )
+ if (!folder) continue
+ const isCurrentFolder = folder.id === currentFolderId
+ breadcrumbs.push({
+ label: folder.name,
+ onClick: isCurrentFolder
+ ? undefined
+ : () => router.push(`/workspace/${workspaceId}/files?folderId=${folder.id}`),
+ editing:
+ isCurrentFolder && breadcrumbRenameRef.current.editingId === folder.id
+ ? {
+ isEditing: true,
+ value: breadcrumbRenameRef.current.editValue,
+ onChange: breadcrumbRenameRef.current.setEditValue,
+ onSubmit: breadcrumbRenameRef.current.submitRename,
+ onCancel: breadcrumbRenameRef.current.cancelRename,
+ }
+ : undefined,
+ dropdownItems:
+ isCurrentFolder && canEdit
+ ? [
+ {
+ label: 'Rename',
+ onClick: () => breadcrumbRenameRef.current.startRename(folder.id, folder.name),
+ },
+ ]
+ : undefined,
+ })
+ parentId = folder.id
+ }
+ return breadcrumbs
+ }, [
+ currentFolderPath,
+ currentFolderId,
+ folders,
+ handleNavigateToFiles,
+ router,
+ workspaceId,
+ canEdit,
+ breadcrumbRename.editingId,
+ breadcrumbRename.editValue,
+ ])
const memberOptions: ComboboxOption[] = useMemo(
() =>
@@ -905,6 +1604,22 @@ export function Files() {
[members]
)
+ const contextMenuMoveOptions = useMemo((): MoveOptionNode[] => {
+ const buildSubtree = (parentId: string | null): MoveOptionNode[] =>
+ folders
+ .filter((f) => {
+ if ((f.parentId ?? null) !== parentId) return false
+ if (selectedFolderIds.includes(f.id)) return false
+ return selectedFolderIds.every(
+ (sid) => !descendantFolderIdsByFolderId.get(sid)?.has(f.id)
+ )
+ })
+ .sort((a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name))
+ .map((f) => ({ value: f.id, label: f.name, children: buildSubtree(f.id) }))
+
+ return [{ value: '__root__', label: 'Files', children: [] }, ...buildSubtree(null)]
+ }, [folders, selectedFolderIds, descendantFolderIdsByFolderId])
+
const sortConfig: SortConfig = useMemo(
() => ({
options: [
@@ -925,6 +1640,14 @@ export function Files() {
const hasActiveFilters =
typeFilter.length > 0 || sizeFilter.length > 0 || uploadedByFilter.length > 0
+ const emptyMessage = debouncedSearchTerm
+ ? `No files match "${debouncedSearchTerm}"`
+ : hasActiveFilters
+ ? 'No files match the active filters'
+ : currentFolderId
+ ? 'This folder is empty'
+ : 'No files yet'
+
const filterContent = useMemo(() => {
const typeDisplayLabel =
typeFilter.length === 0
@@ -1026,13 +1749,12 @@ export function Files() {
{hasActiveFilters && (
{
setTypeFilter([])
setSizeFilter([])
setUploadedByFilter([])
}}
- className='h-[32px] w-full text-[var(--text-secondary)] text-caption hover-hover:bg-[var(--surface-active)]'
+ className='h-[32px] w-full text-caption hover-hover:bg-[var(--surface-active)]'
>
Clear all filters
@@ -1113,9 +1835,9 @@ export function Files() {
Unsaved Changes
-
+
You have unsaved changes. Are you sure you want to discard them?
-
+
setShowUnsavedChangesAlert(false)}>
@@ -1132,9 +1854,11 @@ export function Files() {
-
-
Drop to upload
-
- Release files here to add them to this workspace
-
+ <>
+
+ {isDraggingOver ? (
+
+
+
+
+ Drop to upload
+
+
+ Release files here to add them to this workspace
+
+
-
)
}
-
-interface FileRowContextMenuProps {
- isOpen: boolean
- position: { x: number; y: number }
- onClose: () => void
- onOpen: () => void
- onDownload: () => void
- onRename: () => void
- onDelete: () => void
- canEdit: boolean
-}
-
-const FileRowContextMenu = memo(function FileRowContextMenu({
- isOpen,
- position,
- onClose,
- onOpen,
- onDownload,
- onRename,
- onDelete,
- canEdit,
-}: FileRowContextMenuProps) {
- return (
-
!open && onClose()} modal={false}>
-
-
-
- e.preventDefault()}
- >
-
-
-
-
- {canEdit && (
- <>
-
-
-
-
-
- )}
-
-
- )
-})
-
-interface DeleteConfirmModalProps {
- open: boolean
- onOpenChange: (open: boolean) => void
- fileName?: string
- onDelete: () => void
- isPending: boolean
-}
-
-const DeleteConfirmModal = memo(function DeleteConfirmModal({
- open,
- onOpenChange,
- fileName,
- onDelete,
- isPending,
-}: DeleteConfirmModalProps) {
- return (
-
-
- Delete File
-
-
- Are you sure you want to delete{' '}
- {fileName} ? You can
- restore it from Recently Deleted in Settings.
-
-
-
- onOpenChange(false)} disabled={isPending}>
- Cancel
-
-
- {isPending ? 'Deleting...' : 'Delete'}
-
-
-
-
- )
-})
diff --git a/apps/sim/app/workspace/[workspaceId]/files/move-options.tsx b/apps/sim/app/workspace/[workspaceId]/files/move-options.tsx
new file mode 100644
index 00000000000..3909673616e
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/files/move-options.tsx
@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react'
+import {
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+} from '@/components/emcn'
+import { Folder } from '@/components/emcn/icons'
+
+export interface MoveOptionNode {
+ value: string
+ label: string
+ children: MoveOptionNode[]
+}
+
+export function renderMoveOption(
+ option: MoveOptionNode,
+ onMove: (value: string) => void
+): ReactNode {
+ if (option.children.length === 0) {
+ return (
+
onMove(option.value)}>
+
+ )
+ }
+ return (
+
+
+
+
+ onMove(option.value)}>Move here
+
+
+ )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry.tsx
index efcae7e3394..0ba36377e7f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry.tsx
@@ -69,6 +69,10 @@ export const CHAT_CONTEXT_KIND_REGISTRY: Record
()
+ for (const f of fileItems) {
+ const key = (f.folderId as string | null | undefined) ?? null
+ const bucket = byFolder.get(key) ?? []
+ bucket.push(f)
+ byFolder.set(key, bucket)
+ }
+
+ const buildLevel = (parentId: string | null): FileFolderTreeNode[] => {
+ const childFolders = folderItems.filter(
+ (f) => ((f.parentId as string | null | undefined) ?? null) === parentId
+ )
+ const childFiles = byFolder.get(parentId) ?? []
+ const nodes: FileFolderTreeNode[] = []
+ for (const folder of childFolders) {
+ const children = buildLevel(folder.id)
+ nodes.push({
+ kind: 'folder',
+ id: folder.id,
+ name: folder.name,
+ isOpen: folder.isOpen,
+ children,
+ })
+ }
+ for (const file of childFiles) {
+ nodes.push({ kind: 'file', id: file.id, name: file.name, isOpen: file.isOpen })
+ }
+ return nodes
+ }
+
+ return buildLevel(null)
+}
+
+interface FileFolderTreeItemsProps {
+ nodes: FileFolderTreeNode[]
+ onSelect: (resource: MothershipResource, isOpen?: boolean) => void
+}
+
+export function FileFolderTreeItems({ nodes, onSelect }: FileFolderTreeItemsProps) {
+ return (
+ <>
+ {nodes.map((node) =>
+ node.kind === 'file' ? (
+ onSelect({ type: 'file', id: node.id, title: node.name }, node.isOpen)}
+ >
+ {getResourceConfig('file').renderDropdownItem({
+ item: { id: node.id, name: node.name },
+ })}
+
+ ) : (
+
+
+ {node.name}
+
+
+
+ onSelect({ type: 'filefolder', id: node.id, title: node.name }, node.isOpen)
+ }
+ >
+ {node.name}
+
+ {node.children.length > 0 && (
+
+
+ )
+ )}
+
+ )
+}
+
export function AddResourceDropdown({
workspaceId,
existingKeys,
@@ -282,7 +380,6 @@ export function AddResourceDropdown({
const [search, setSearch] = useState('')
const [activeIndex, setActiveIndex] = useState(0)
const available = useAvailableResources(workspaceId, existingKeys, excludeTypes)
-
const handleOpenChange = (next: boolean) => {
setOpen(next)
if (!next) {
@@ -308,6 +405,12 @@ export function AddResourceDropdown({
return buildWorkflowFolderTree(workflowGroup?.items ?? [], folderGroup?.items ?? [])
}, [available])
+ const fileFolderTree = useMemo(() => {
+ const fileGroup = available.find((g) => g.type === 'file')
+ const fileFolderGroup = available.find((g) => g.type === 'filefolder')
+ return buildFileFolderTree(fileGroup?.items ?? [], fileFolderGroup?.items ?? [])
+ }, [available])
+
const filtered = useMemo(() => {
const q = search.toLowerCase().trim()
if (!q) return null
@@ -407,8 +510,28 @@ export function AddResourceDropdown({
)}
+ {fileFolderTree.length > 0 && (
+
+
+ {(() => {
+ const Icon = getResourceConfig('file').icon
+ return Files
+
+
+
+
+ )}
{available.map(({ type, items }) => {
- if (type === 'workflow' || type === 'folder') return null
+ if (
+ type === 'workflow' ||
+ type === 'folder' ||
+ type === 'file' ||
+ type === 'filefolder'
+ )
+ return null
if (items.length === 0) return null
const config = getResourceConfig(type)
const Icon = config.icon
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/index.ts
index a89dbf0db7e..8a266363937 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/index.ts
@@ -1,11 +1,14 @@
export type {
AddResourceDropdownProps,
AvailableItem,
+ FileFolderTreeNode,
WorkflowTreeNode,
} from './add-resource-dropdown'
export {
AddResourceDropdown,
+ buildFileFolderTree,
buildWorkflowFolderTree,
+ FileFolderTreeItems,
useAvailableResources,
WorkflowFolderTreeItems,
} from './add-resource-dropdown'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
index c80ca1c7b08..73d312c42ef 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
@@ -27,6 +27,7 @@ import { taskKeys } from '@/hooks/queries/tasks'
import { folderKeys } from '@/hooks/queries/utils/folder-keys'
import { invalidateWorkflowLists } from '@/hooks/queries/utils/invalidate-workflow-lists'
import { useWorkflows } from '@/hooks/queries/workflows'
+import { workspaceFileFolderKeys } from '@/hooks/queries/workspace-file-folders'
import { workspaceFilesKeys } from '@/hooks/queries/workspace-files'
interface DropdownItemRenderProps {
@@ -180,6 +181,15 @@ export const RESOURCE_REGISTRY: Record
+
+ {(() => {
+ const Icon = getResourceConfig('file').icon
+ return Files
+
+
+
+
+ )}
{availableResources
- .filter(({ type }) => type !== 'workflow' && type !== 'folder')
+ .filter(
+ ({ type }) =>
+ type !== 'workflow' &&
+ type !== 'folder' &&
+ type !== 'file' &&
+ type !== 'filefolder'
+ )
.map(({ type, items }) => {
if (items.length === 0) return null
const config = getResourceConfig(type)
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx
index aa30ce5761f..bd10d154ee5 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx
@@ -1,6 +1,14 @@
'use client'
-import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@/components/emcn'
+import {
+ Button,
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalDescription,
+ ModalFooter,
+ ModalHeader,
+} from '@/components/emcn'
import type { ChunkData } from '@/lib/knowledge/types'
import { useDeleteChunk } from '@/hooks/queries/kb/knowledge'
@@ -34,9 +42,9 @@ export function DeleteChunkModal({
Delete Chunk
-
+
Are you sure you want to delete this chunk? This action cannot be undone.
-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
index 097270f58fc..84a1b65083f 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
@@ -12,6 +12,7 @@ import {
Modal,
ModalBody,
ModalContent,
+ ModalDescription,
ModalFooter,
ModalHeader,
Trash,
@@ -390,6 +391,9 @@ export function DocumentTagsModal({
Document Tags
+
+ View and edit tags assigned to this document
+
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
index 22b22551a29..e7e38119d63 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
@@ -11,6 +11,7 @@ import {
Modal,
ModalBody,
ModalContent,
+ ModalDescription,
ModalFooter,
ModalHeader,
Trash,
@@ -72,9 +73,9 @@ function UnsavedChangesModal({
Unsaved Changes
-
+
You have unsaved changes. Are you sure you want to discard them?
-
+
@@ -1172,7 +1173,7 @@ export function Document({
Delete Document
-
+
Are you sure you want to delete{' '}
{effectiveDocumentName}
@@ -1191,7 +1192,7 @@ export function Document({
) : (
<>This action cannot be undone.
)}
-
+
Delete Knowledge Base
-
+
Are you sure you want to delete{' '}
{knowledgeBaseName} ?
@@ -1185,7 +1186,7 @@ export function KnowledgeBase({
{pagination.total === 1 ? '' : 's'} within it will be removed.
{' '}
You can restore it from Recently Deleted in Settings.
-
+
{
const docToDelete = documents.find((doc) => doc.id === documentToDelete)
return (
-
+
Are you sure you want to delete{' '}
{docToDelete?.filename ?? 'this document'}
@@ -1228,7 +1229,7 @@ export function KnowledgeBase({
This action cannot be undone.
)}
-
+
)
})()}
@@ -1253,7 +1254,7 @@ export function KnowledgeBase({
Delete Documents
-
+
Are you sure you want to delete {selectedDocuments.size} document
{selectedDocuments.size === 1 ? '' : 's'}?{' '}
@@ -1261,7 +1262,7 @@ export function KnowledgeBase({
{selectedDocuments.size === 1 ? '' : 's'}.
{' '}
This action cannot be undone.
-
+
setShowBulkDeleteModal(false)}>
@@ -1306,6 +1307,9 @@ export function KnowledgeBase({
Connected Sources
+
+ Manage connected data sources for this knowledge base
+
+
+ {step === 'select-type'
+ ? 'Select a data source to connect to this knowledge base'
+ : `Configure the ${connectorConfig?.name} connector settings`}
+
{step === 'select-type' ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
index 0d677b2df97..a1a32b8d64f 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
@@ -11,6 +11,7 @@ import {
Modal,
ModalBody,
ModalContent,
+ ModalDescription,
ModalFooter,
ModalHeader,
} from '@/components/emcn'
@@ -222,6 +223,9 @@ export function AddDocumentsModal({
New Documents
+
+ Upload files to add as documents to this knowledge base
+
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
index 383ad2ad0ef..abbf050f67f 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
@@ -11,6 +11,7 @@ import {
Modal,
ModalBody,
ModalContent,
+ ModalDescription,
ModalFooter,
ModalHeader,
Trash,
@@ -261,6 +262,9 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
Tags
+
+ Manage tag definitions for this knowledge base
+
@@ -415,14 +419,14 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
Delete Tag
-
+
Are you sure you want to delete the "{selectedTag?.displayName}" tag?{' '}
This will remove this tag from {selectedTagUsage?.documentCount || 0} document
{selectedTagUsage?.documentCount !== 1 ? 's' : ''}.
{' '}
This action cannot be undone.
-
+
{selectedTagUsage && selectedTagUsage.documentCount > 0 && (
@@ -460,11 +464,11 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
Documents using "{selectedTag?.displayName}"
-
+
{selectedTagUsage?.documentCount || 0} document
{selectedTagUsage?.documentCount !== 1 ? 's are' : ' is'} currently using this tag
definition.
-
+
{selectedTagUsage?.documentCount === 0 ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
index 928560d9c79..a505c8496ef 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
@@ -23,6 +23,7 @@ import {
Modal,
ModalBody,
ModalContent,
+ ModalDescription,
ModalFooter,
ModalHeader,
Skeleton,
@@ -241,10 +242,10 @@ export function ConnectorsSection({
Remove Connector
-
+
This will disconnect the source and stop future syncs. Documents already synced will
remain in the knowledge base unless you choose to delete them.
-
+
+
+ Configure settings and manage documents for this connector
+
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
index d7522a1ff81..74df75e4b2a 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
@@ -9,6 +9,7 @@ import {
Modal,
ModalBody,
ModalContent,
+ ModalDescription,
ModalFooter,
ModalHeader,
} from '@/components/emcn'
@@ -82,6 +83,7 @@ export function RenameDocumentModal({
Rename Document
+ Enter a new name for this document