fix(files): address the paged file reads' second review round

- Only a serve URL is read as a storage key with a query: a stored name or path holding `?` or
  `#` is looked up by reference (and by key when it has a `/`), in search-replace and picker
  selections alike (`storageKeyOfStoredValue`).
- The `@` menu reads as loading, not "No results", while the file search behind its query is
  settling: the mention store carries the picker's pending state alongside the items.
- The Audio and Video filters match any `audio/*` or `video/*` type, as the Type label does, in
  SQL and JS for both browsers (`fileKindSql`, `fileBrowserKinds`); the parity test covers types
  the MIME table does not list.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-list.tsx

@@ -5,7 +5,7 @@ import {
   type SuggestionKeyDownHandler,
   useSuggestionKeyboard,
 } from '../menus/use-suggestion-keyboard'
-import type { MentionStore } from './mention-store'
+import type { MentionMenuData, MentionStore } from './mention-store'
 import type { MentionItem } from './types'
 
 /**
@@ -16,6 +16,15 @@ export function mentionItemMatches(item: MentionItem, query: string): boolean {
   return item.matchedQuery?.toLowerCase() === query || item.label.toLowerCase().includes(query)
 }
 
+/**
+ * What the menu says with nothing to list: still loading while it has no data yet or its file
+ * search is settling — the other families alone can fill it, so an empty match is not yet
+ * "no results" until the files answering the query have landed.
+ */
+export function mentionEmptyLabel(menu: MentionMenuData): string {
+  return menu.items.length === 0 || menu.filesPending ? 'Loading…' : 'No results'
+}
+
 export type MentionListHandle = SuggestionKeyDownHandler
 
 interface MentionListProps {
@@ -58,7 +67,8 @@ export const MentionList = forwardRef<MentionListHandle, MentionListProps>(funct
   { query, command, store, editor },
   ref
 ) {
-  const rawItems = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
+  const menu = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
+  const rawItems = menu.items
   const containerRef = useRef<HTMLDivElement>(null)
 
   /**
@@ -109,7 +119,7 @@ export const MentionList = forwardRef<MentionListHandle, MentionListProps>(funct
       command={command}
       ariaLabel='Mentions'
       idPrefix='mention'
-      emptyLabel={rawItems.length === 0 ? 'Loading…' : 'No results'}
+      emptyLabel={mentionEmptyLabel(menu)}
       itemKey={(item) => `${item.kind}:${item.id}`}
       renderItem={(item) => {
         const Icon = item.icon

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-matching.test.ts

@@ -1,5 +1,8 @@
 import { describe, expect, it } from 'vitest'
-import { mentionItemMatches } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-list'
+import {
+  mentionEmptyLabel,
+  mentionItemMatches,
+} from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-list'
 
 describe('mentionItemMatches', () => {
   const file = { kind: 'file' as const, id: 'wf_a', label: 'Quarterly-Report.md', group: 'Files' }
@@ -13,3 +16,15 @@ describe('mentionItemMatches', () => {
     expect(mentionItemMatches(file, 'report')).toBe(true)
   })
 })
+
+describe('mentionEmptyLabel', () => {
+  const file = { kind: 'file' as const, id: 'wf_a', label: 'a.md', group: 'Files' }
+
+  it('reads as loading, not "No results", while the file search behind a query is settling', () => {
+    expect(mentionEmptyLabel({ items: [file], filesPending: true })).toBe('Loading…')
+  })
+
+  it('says "No results" once the files for the query have landed', () => {
+    expect(mentionEmptyLabel({ items: [file], filesPending: false })).toBe('No results')
+  })
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-store.ts

@@ -3,29 +3,37 @@ import type { MentionItem } from './types'
 /**
  * A tiny external store bridging React Query data (host component) into the `@` menu list, which is
  * rendered by TipTap's `ReactRenderer` as a detached root with no access to the app's React context
- * providers. The host pushes the latest items via {@link MentionStore.set}; the list subscribes with
+ * providers. The host pushes the latest items (and whether the file search is settling) via {@link MentionStore.set}; the list subscribes with
  * `useSyncExternalStore` and re-renders when async data lands — so the menu populates live even if it
  * was opened before the data finished loading. One store instance lives per editor (in extension
  * storage).
  */
 export interface MentionStore {
-  getSnapshot: () => MentionItem[]
+  getSnapshot: () => MentionMenuData
   subscribe: (listener: () => void) => () => void
-  set: (items: MentionItem[]) => void
+  set: (data: MentionMenuData) => void
 }
 
+/** The menu's items, and whether the file search behind them is still settling. */
+export interface MentionMenuData {
+  items: MentionItem[]
+  filesPending: boolean
+}
+
+const EMPTY_MENU: MentionMenuData = { items: [], filesPending: false }
+
 export function createMentionStore(): MentionStore {
-  let items: MentionItem[] = []
+  let data = EMPTY_MENU
   const listeners = new Set<() => void>()
   return {
-    getSnapshot: () => items,
+    getSnapshot: () => data,
     subscribe: (listener) => {
       listeners.add(listener)
       return () => listeners.delete(listener)
     },
     set: (next) => {
-      if (next === items) return
-      items = next
+      if (next === data) return
+      data = next
       for (const listener of listeners) listener()
     },
   }

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/use-editor-mentions.ts

@@ -22,7 +22,7 @@ export function useEditorMentions(
 ): void {
   const [active, setActive] = useState(false)
   const [query, setQuery] = useState('')
-  const items = useMarkdownMentions(workspaceId, { enabled: active, fileQuery: query })
+  const menu = useMarkdownMentions(workspaceId, { enabled: active, fileQuery: query })
   const navigable = options?.navigable ?? false
   const disableTagging = options?.disableTagging ?? false
 
@@ -40,6 +40,6 @@ export function useEditorMentions(
   }, [editor, workspaceId, navigable, disableTagging])
 
   useEffect(() => {
-    editor?.storage.mentionMenu.store.set(items)
-  }, [editor, items])
+    editor?.storage.mentionMenu.store.set(menu)
+  }, [editor, menu])
 }

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/use-markdown-mentions.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import type { MentionMenuData } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-store'
 import { listIntegrations } from '@/blocks/integration-matcher'
 import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
 import { useSkills } from '@/hooks/queries/skills'
@@ -18,18 +19,24 @@ import type { MentionItem } from './types'
  * Files are the one family not listed whole: the menu offers the most recently updated, and once
  * `fileQuery` (the text after the `@`) settles, the files whose names match it anywhere.
  */
+const NO_MENTION_ITEMS: MentionItem[] = []
+
 export function useMarkdownMentions(
   workspaceId: string | undefined,
   options: { enabled: boolean; fileQuery?: string }
-): MentionItem[] {
+): MentionMenuData {
   const active = options.enabled && Boolean(workspaceId)
   // When inactive, `ws` is undefined and `wsStr` is '' so every query stays disabled until the first
   // `@`: the hooks that expose an `enabled` option get it explicitly; the rest (which take no options)
   // self-gate internally on the falsy workspaceId — both empty string and undefined read as disabled.
   const ws = active ? workspaceId : undefined
   const wsStr = ws ?? ''
 
-  const { files, matchedQuery } = useWorkspaceFilePickerOptions(wsStr, options.fileQuery ?? '', {
+  const {
+    files,
+    matchedQuery,
+    isPending: filesPending,
+  } = useWorkspaceFilePickerOptions(wsStr, options.fileQuery ?? '', {
     enabled: active,
   })
   const folders = useWorkspaceFileFolders(wsStr, 'active')
@@ -50,8 +57,8 @@ export function useMarkdownMentions(
     }))
   }, [active])
 
-  return useMemo(() => {
-    if (!active) return []
+  const items = useMemo(() => {
+    if (!active) return NO_MENTION_ITEMS
     const items: MentionItem[] = []
 
     for (const file of files ?? [])
@@ -117,4 +124,7 @@ export function useMarkdownMentions(
     skills.data,
     integrationItems,
   ])
+  /** Files still answering an older query (or none yet) keep the menu from reading as empty. */
+  const pending = active && filesPending
+  return useMemo(() => ({ items, filesPending: pending }), [items, pending])
 }

apps/sim/hooks/queries/workflow-search-replace.test.ts

@@ -94,4 +94,11 @@ describe('workflowSearchFileLookups', () => {
       }
     )
   })
+
+  it('looks a name or path holding `?` or `#` up by reference, never as a serve URL', () => {
+    expect(workflowSearchFileLookups(['what?.md', 'docs/q&a #1?.md'])).toEqual({
+      references: ['what?.md', 'docs/q&a #1?.md'],
+      keyValues: ['docs/q&a #1?.md'],
+    })
+  })
 })

apps/sim/hooks/queries/workflow-search-replace.ts

@@ -30,7 +30,7 @@ import {
   type SelectorKey,
 } from '@/lib/selectors/manifest'
 import type { SelectorOption, SelectorScope } from '@/lib/selectors/types'
-import { tryExtractStorageKey } from '@/lib/uploads/utils/file'
+import { isInternalFileUrl, storageKeyOfStoredValue } from '@/lib/uploads/utils/file'
 import { getWorkflowSearchMatchResourceGroupKey } from '@/lib/workflows/search-replace/resources'
 import type {
   WorkflowSearchMatch,
@@ -346,9 +346,10 @@ export function useWorkflowSearchTableDetails(
 }
 
 /**
- * What to look a stored file value up by. It is an id, a storage key, a serve path, or a name: a
- * reference lookup answers an id (its first rule), a path, and a name; a storage key — every one
- * has a `/` — and a serve path also need the key lookup, which a plain name or id never would.
+ * What to look a stored file value up by. It is an id, a storage key, a serve URL, or a name or
+ * path: a serve URL is looked up by the key it carries (nothing, when its encoding is malformed);
+ * anything else by reference, which answers an id (its first rule), a path, and a name — and also
+ * by key when it has a `/`, as every storage key does. Only a serve URL reads `?` as a query.
  */
 export function workflowSearchFileLookups(rawValues: readonly string[]): {
   references: string[]
@@ -357,11 +358,9 @@ export function workflowSearchFileLookups(rawValues: readonly string[]): {
   const references = new Set<string>()
   const keyValues = new Set<string>()
   for (const rawValue of rawValues) {
-    const key = tryExtractStorageKey(rawValue)
-    // A serve path with malformed percent-encoding names nothing a lookup can find.
-    if (key === undefined) continue
-    if (key !== rawValue) {
-      keyValues.add(key)
+    if (isInternalFileUrl(rawValue)) {
+      const key = storageKeyOfStoredValue(rawValue)
+      if (key) keyValues.add(key)
       continue
     }
     references.add(rawValue)
@@ -394,7 +393,7 @@ export function useWorkflowSearchFileDetails(matches: WorkflowSearchMatch[], wor
     () =>
       fileMatches.map((match) => {
         const file =
-          byKey.byValue.get(tryExtractStorageKey(match.rawValue) ?? '') ??
+          byKey.byValue.get(storageKeyOfStoredValue(match.rawValue) ?? '') ??
           byReference.byValue.get(match.rawValue)
         return {
           data: settled

apps/sim/hooks/queries/workspace-files.ts

@@ -41,7 +41,7 @@ import { FileTextSizeError, readFileText } from '@/lib/uploads/client/text-conte
 import type { UploadProgressEvent } from '@/lib/uploads/client/types'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { extractEmbeddedFileRef, storedFileId } from '@/lib/uploads/utils/embedded-image-ref'
-import { tryExtractStorageKey } from '@/lib/uploads/utils/file'
+import { storageKeyOfStoredValue } from '@/lib/uploads/utils/file'
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
 import type { WorkspaceFileSelection } from '@/lib/workspace-files/selection'
 import type { UserFile } from '@/executor/types'
@@ -421,7 +421,7 @@ export function useWorkspaceFileSelectionCandidates(
       else if (selection.key) keys.add(selection.key)
       else if (selection.path) {
         // A persisted path with malformed percent-encoding names no file; it stays unresolved.
-        const key = tryExtractStorageKey(selection.path)
+        const key = storageKeyOfStoredValue(selection.path)
         if (key) keys.add(key)
       } else if (selection.name.trim()) names.add(selection.name.trim())
     }

apps/sim/lib/uploads/utils/file.test.ts

@@ -10,6 +10,7 @@ import {
   resolveEffectiveMimeType,
   resolveFileType,
   resolveTrustedFileContext,
+  storageKeyOfStoredValue,
 } from '@/lib/uploads/utils/file'
 
 const logger = createLogger('FileUtilsTest')
@@ -184,3 +185,23 @@ describe('observedMediaType', () => {
     expect(observedMediaType('IMAGE/PNG', 'photo.png')).toBe('image/png')
   })
 })
+
+describe('storageKeyOfStoredValue', () => {
+  it('reads a serve URL as the key it carries, its query dropped', () => {
+    expect(
+      storageKeyOfStoredValue('/api/files/serve/workspace%2Fws-1%2Fa.png?context=workspace')
+    ).toBe('workspace/ws-1/a.png')
+    expect(storageKeyOfStoredValue('https://sim.ai/api/files/serve/s3/workspace%2Fb.md')).toBe(
+      'workspace/b.md'
+    )
+  })
+
+  it('keeps any other value whole, `?` and `#` included', () => {
+    expect(storageKeyOfStoredValue('workspace/ws-1/what?.md')).toBe('workspace/ws-1/what?.md')
+    expect(storageKeyOfStoredValue('notes #1?.md')).toBe('notes #1?.md')
+  })
+
+  it('names nothing for a serve URL whose encoding is malformed, instead of throwing', () => {
+    expect(storageKeyOfStoredValue('/api/files/serve/workspace%E0%A4%A.png')).toBeUndefined()
+  })
+})

apps/sim/lib/uploads/utils/file.ts

@@ -687,12 +687,14 @@ export function extractStorageKey(filePath: string): string {
 }
 
 /**
- * {@link extractStorageKey} for a path read back from storage or a document, which may be
- * malformed: `undefined` when its percent-encoding cannot be decoded, rather than throwing.
+ * The storage key a stored file value names: a serve URL's key (see {@link isInternalFileUrl}),
+ * else the value itself — a name or path may hold `?` or `#`, which only a URL reads as its query.
+ * `undefined` for a serve URL whose percent-encoding cannot be decoded, rather than throwing.
  */
-export function tryExtractStorageKey(filePath: string): string | undefined {
+export function storageKeyOfStoredValue(value: string): string | undefined {
+  if (!isInternalFileUrl(value)) return value
   try {
-    return extractStorageKey(filePath)
+    return extractStorageKey(value)
   } catch {
     return undefined
   }