fix(chat): never submit a mention while its candidate lists are loading

Warming on focus shrank the race but gave no readiness guarantee: an empty
candidate list still meant "no match" to the keydown handler, which falls
through and submits the message with the mention as raw text.

Make the distinction explicit. `useAvailableResources` now reports
`isHydrating`, and `PlusMenuHandle.selectActive` returns
`selected | empty | hydrating` instead of a boolean. The editor swallows
Tab/Enter while hydrating and only lets them through once the lists have
settled, where an empty result is a genuine no-match.

`isHydrating` keys off `isPending`, not `data === undefined`, so a failed
list settles instead of blocking the key forever.

Author: waleedlatif1

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

@@ -56,6 +56,16 @@ interface AvailableItemsByType {
   items: AvailableItem[]
 }
 
+interface AvailableResources {
+  groups: AvailableItemsByType[]
+  /**
+   * True while enabled and at least one list has yet to produce data. Callers
+   * that act on "no candidates" must check this first — an empty result during
+   * hydration means "not known yet", not "no match".
+   */
+  isHydrating: boolean
+}
+
 interface UseAvailableResourcesOptions {
   /**
    * Skips the underlying list queries and the group construction they feed
@@ -94,24 +104,58 @@ const LOG_DROPDOWN_FILTERS = {
 export function useAvailableResources(
   workspaceId: string,
   options?: UseAvailableResourcesOptions
-): AvailableItemsByType[] {
+): AvailableResources {
   const enabled = options?.enabled ?? true
   const excludeTypes = options?.excludeTypes
   // Destructured without `= []` defaults on purpose: a literal default allocates a
   // fresh array every render while `data` is undefined (exactly the disabled state),
   // which would bust the group memo below on every render. Undefined is stable.
-  const { data: workflows } = useWorkflows(workspaceId, { enabled })
-  const { data: tables } = useTablesList(workspaceId, 'active', { enabled })
-  const { data: files } = useWorkspaceFiles(workspaceId, 'active', { enabled })
-  const { data: knowledgeBases } = useKnowledgeBasesQuery(workspaceId, { enabled })
-  const { data: folders } = useFolders(workspaceId, { enabled })
-  const { data: fileFolders } = useWorkspaceFileFolders(workspaceId, 'active', { enabled })
-  const { data: tasks } = useMothershipChats(workspaceId, { enabled })
-  const { data: schedules } = useWorkspaceSchedules(workspaceId, { enabled })
-  const { data: logsData } = useLogsList(workspaceId, LOG_DROPDOWN_FILTERS, { enabled })
+  const { data: workflows, isPending: workflowsPending } = useWorkflows(workspaceId, { enabled })
+  const { data: tables, isPending: tablesPending } = useTablesList(workspaceId, 'active', {
+    enabled,
+  })
+  const { data: files, isPending: filesPending } = useWorkspaceFiles(workspaceId, 'active', {
+    enabled,
+  })
+  const { data: knowledgeBases, isPending: knowledgeBasesPending } = useKnowledgeBasesQuery(
+    workspaceId,
+    { enabled }
+  )
+  const { data: folders, isPending: foldersPending } = useFolders(workspaceId, { enabled })
+  const { data: fileFolders, isPending: fileFoldersPending } = useWorkspaceFileFolders(
+    workspaceId,
+    'active',
+    { enabled }
+  )
+  const { data: tasks, isPending: tasksPending } = useMothershipChats(workspaceId, { enabled })
+  const { data: schedules, isPending: schedulesPending } = useWorkspaceSchedules(workspaceId, {
+    enabled,
+  })
+  const { data: logsData, isPending: logsPending } = useLogsList(
+    workspaceId,
+    LOG_DROPDOWN_FILTERS,
+    { enabled }
+  )
   const logs = useMemo(() => (logsData?.pages ?? []).flatMap((page) => page.logs), [logsData])
 
-  return useMemo(() => {
+  /**
+   * Keyed off `isPending` rather than `data === undefined` so a failed list
+   * settles to "not hydrating" — an errored query must not block the caller
+   * forever.
+   */
+  const isHydrating =
+    enabled &&
+    (workflowsPending ||
+      tablesPending ||
+      filesPending ||
+      knowledgeBasesPending ||
+      foldersPending ||
+      fileFoldersPending ||
+      tasksPending ||
+      schedulesPending ||
+      logsPending)
+
+  const groups = useMemo(() => {
     if (!enabled) return NO_RESOURCE_GROUPS
     const excluded = new Set<MothershipResourceType>(excludeTypes ?? [])
     const groups: AvailableItemsByType[] = [
@@ -198,6 +242,10 @@ export function useAvailableResources(
     logs,
     excludeTypes,
   ])
+
+  // `groups` keeps its own stable identity so the consumers' downstream memos
+  // still key on it; only this wrapper changes when hydration settles.
+  return useMemo(() => ({ groups, isHydrating }), [groups, isHydrating])
 }
 
 export type WorkflowTreeNode =
@@ -386,7 +434,7 @@ export function AddResourceDropdown({
   const [search, setSearch] = useState('')
   const [activeIndex, setActiveIndex] = useState(0)
   // Gated on `open` so an idle tab bar never fetches the workspace lists.
-  const available = useAvailableResources(workspaceId, { enabled: open, excludeTypes })
+  const { groups: available } = useAvailableResources(workspaceId, { enabled: open, excludeTypes })
   const handleOpenChange = (next: boolean) => {
     setOpen(next)
     if (!next) {

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

@@ -41,7 +41,17 @@ export interface PlusMenuHandle {
   open: (anchor: { left: number; top: number }, options?: { mention?: boolean }) => void
   close: () => void
   moveActive: (delta: number) => void
-  selectActive: () => boolean
+  /**
+   * Confirms the highlighted candidate.
+   *
+   * - `selected` — a candidate was inserted.
+   * - `empty` — the lists are loaded and nothing matches, so the caller should
+   *   let the key through (Enter submits, Tab does its default).
+   * - `hydrating` — the lists are still loading, so "nothing matches" is not yet
+   *   knowable. The caller must swallow the key rather than submit a message
+   *   with the mention left as raw text.
+   */
+  selectActive: () => 'selected' | 'empty' | 'hydrating'
 }
 
 /**

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

@@ -71,7 +71,9 @@ export const PlusMenuDropdown = React.memo(
     const contentRef = useRef<HTMLDivElement>(null)
 
     // Gated so an idle chat surface never fetches the workspace lists.
-    const availableResources = useAvailableResources(workspaceId, { enabled: open || !!warm })
+    const { groups: availableResources, isHydrating } = useAvailableResources(workspaceId, {
+      enabled: open || !!warm,
+    })
 
     const doOpen = useCallback(
       (anchor: { left: number; top: number }, options?: { mention?: boolean }) => {
@@ -127,6 +129,8 @@ export const PlusMenuDropdown = React.memo(
     activeIndexRef.current = activeIndex
     const isMentionRef = useRef(isMention)
     isMentionRef.current = isMention
+    const isHydratingRef = useRef(isHydrating)
+    isHydratingRef.current = isHydrating
 
     // Reset highlight to the top whenever the mention query changes so the user always
     // sees the best match selected as they type.
@@ -161,15 +165,14 @@ export const PlusMenuDropdown = React.memo(
         },
         selectActive: () => {
           const items = filteredItemsRef.current
-          if (!items || items.length === 0) return false
-          const target = items[activeIndexRef.current] ?? items[0]
-          if (!target) return false
+          const target = items?.length ? (items[activeIndexRef.current] ?? items[0]) : undefined
+          if (!target) return isHydratingRef.current ? 'hydrating' : 'empty'
           handleSelectRef.current({
             type: target.type,
             id: target.item.id,
             title: target.item.name,
           })
-          return true
+          return 'selected'
         },
       }),
       [doOpen, doClose]

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.test.tsx

@@ -79,7 +79,7 @@ describe('usePromptEditor mention menu dismissal', () => {
       open: vi.fn(),
       close: vi.fn(),
       moveActive: vi.fn(),
-      selectActive: vi.fn(() => false),
+      selectActive: vi.fn(() => 'empty' as const),
     }
   })
 

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts

@@ -673,9 +673,13 @@ export function usePromptEditor({
           return
         }
         if ((e.key === 'Tab' || e.key === 'Enter') && !e.shiftKey) {
-          // Confirm the highlighted match if there is one. If no items match, fall
-          // through so Enter still submits and Tab still does its default thing.
-          if (plusMenuRef.current?.selectActive()) {
+          // Confirm the highlighted match if there is one. If the lists are still
+          // loading, swallow the key — "no match" isn't knowable yet, and falling
+          // through would submit the message with the mention left as raw text.
+          // Only once they are loaded does an empty result mean a genuine no-match,
+          // where Enter should submit and Tab should do its default thing.
+          const result = plusMenuRef.current?.selectActive()
+          if (result === 'selected' || result === 'hydrating') {
             e.preventDefault()
             return
           }