Clean up

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx

@@ -40,6 +40,20 @@ import { useCopilotStore } from '@/stores/panel'
 
 const logger = createLogger('CopilotUserInput')
 
+const TOP_LEVEL_COMMANDS = ['fast', 'plan', 'debug', 'research', 'deploy', 'superagent'] as const
+const WEB_COMMANDS = ['search', 'read', 'scrape', 'crawl'] as const
+const ALL_COMMANDS = [...TOP_LEVEL_COMMANDS, ...WEB_COMMANDS]
+
+/**
+ * Calculates the next index for circular navigation (wraps around at bounds)
+ */
+function getNextIndex(current: number, direction: 'up' | 'down', maxIndex: number): number {
+  if (direction === 'down') {
+    return current >= maxIndex ? 0 : current + 1
+  }
+  return current <= 0 ? maxIndex : current - 1
+}
+
 interface UserInputProps {
   onSubmit: (
     message: string,
@@ -110,7 +124,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     },
     ref
   ) => {
-    // Refs and external hooks
     const { data: session } = useSession()
     const params = useParams()
     const workspaceId = params.workspaceId as string
@@ -122,19 +135,16 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       selectedModelOverride !== undefined ? selectedModelOverride : copilotStore.selectedModel
     const setSelectedModel = onModelChangeOverride || copilotStore.setSelectedModel
 
-    // Internal state
     const [internalMessage, setInternalMessage] = useState('')
     const [isNearTop, setIsNearTop] = useState(false)
     const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
     const [inputContainerRef, setInputContainerRef] = useState<HTMLDivElement | null>(null)
     const [showSlashMenu, setShowSlashMenu] = useState(false)
 
-    // Controlled vs uncontrolled message state
     const message = controlledValue !== undefined ? controlledValue : internalMessage
     const setMessage =
       controlledValue !== undefined ? onControlledChange || (() => {}) : setInternalMessage
 
-    // Effective placeholder
     const effectivePlaceholder =
       placeholder ||
       (mode === 'ask'
@@ -143,11 +153,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           ? 'Plan your workflow'
           : 'Plan, search, build anything')
 
-    // Custom hooks - order matters for ref sharing
-    // Context management (manages selectedContexts state)
     const contextManagement = useContextManagement({ message, initialContexts })
 
-    // Mention menu
     const mentionMenu = useMentionMenu({
       message,
       selectedContexts: contextManagement.selectedContexts,
@@ -155,7 +162,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       onMessageChange: setMessage,
     })
 
-    // Mention token utilities
     const mentionTokensWithContext = useMentionTokens({
       message,
       selectedContexts: contextManagement.selectedContexts,
@@ -183,7 +189,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       isLoading,
     })
 
-    // Insert mention handlers
     const insertHandlers = useMentionInsertHandlers({
       mentionMenu,
       workflowId: workflowId || null,
@@ -191,14 +196,12 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       onContextAdd: contextManagement.addContext,
     })
 
-    // Keyboard navigation hook
     const mentionKeyboard = useMentionKeyboard({
       mentionMenu,
       mentionData,
       insertHandlers,
     })
 
-    // Expose focus method to parent
     useImperativeHandle(
       ref,
       () => ({
@@ -215,9 +218,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       [mentionMenu.textareaRef]
     )
 
-    // Note: textarea auto-resize is handled by the useTextareaAutoResize hook
-
-    // Load workflows on mount if we have a workflowId
     useEffect(() => {
       if (workflowId) {
         void mentionData.ensureWorkflowsLoaded()
@@ -225,7 +225,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [workflowId])
 
-    // Detect if input is near top of screen
     useEffect(() => {
       const checkPosition = () => {
         if (containerRef) {
@@ -253,7 +252,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       }
     }, [containerRef])
 
-    // Also check position when mention menu opens
     useEffect(() => {
       if (mentionMenu.showMentionMenu && containerRef) {
         const rect = containerRef.getBoundingClientRect()
@@ -261,7 +259,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       }
     }, [mentionMenu.showMentionMenu, containerRef])
 
-    // Preload mention data when query is active
     useEffect(() => {
       if (!mentionMenu.showMentionMenu || mentionMenu.openSubmenuFor) {
         return
@@ -273,7 +270,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         .toLowerCase()
 
       if (q && q.length > 0) {
-        // Prefetch all lists when there's any query for instant filtering
         void mentionData.ensurePastChatsLoaded()
         void mentionData.ensureWorkflowsLoaded()
         void mentionData.ensureWorkflowBlocksLoaded()
@@ -282,15 +278,12 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         void mentionData.ensureTemplatesLoaded()
         void mentionData.ensureLogsLoaded()
 
-        // Reset to first item when query changes
         mentionMenu.setSubmenuActiveIndex(0)
         requestAnimationFrame(() => mentionMenu.scrollActiveItemIntoView(0))
       }
-      // Only depend on values that trigger data loading, not the entire objects
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mentionMenu.showMentionMenu, mentionMenu.openSubmenuFor, message])
 
-    // When switching into a submenu, select the first item and scroll to it
     useEffect(() => {
       if (mentionMenu.openSubmenuFor) {
         mentionMenu.setSubmenuActiveIndex(0)
@@ -299,12 +292,10 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mentionMenu.openSubmenuFor])
 
-    // Handlers
     const handleSubmit = useCallback(
       async (overrideMessage?: string, options: { preserveInput?: boolean } = {}) => {
         const targetMessage = overrideMessage ?? message
         const trimmedMessage = targetMessage.trim()
-        // Allow submission even when isLoading - store will queue the message
         if (!trimmedMessage || disabled) return
 
         const failedUploads = fileAttachments.attachedFiles.filter((f) => !f.uploading && !f.key)
@@ -377,13 +368,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
     const handleSlashCommandSelect = useCallback(
       (command: string) => {
-        // Capitalize the command for display
         const capitalizedCommand = command.charAt(0).toUpperCase() + command.slice(1)
-
-        // Replace the active slash query with the capitalized command
         mentionMenu.replaceActiveSlashWith(capitalizedCommand)
-
-        // Add as a context so it gets highlighted
         contextManagement.addContext({
           kind: 'slash_command',
           command,
@@ -398,7 +384,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
     const handleKeyDown = useCallback(
       (e: KeyboardEvent<HTMLTextAreaElement>) => {
-        // Escape key handling
         if (e.key === 'Escape' && (mentionMenu.showMentionMenu || showSlashMenu)) {
           e.preventDefault()
           if (mentionMenu.openSubmenuFor) {
@@ -411,65 +396,33 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           return
         }
 
-        // Arrow navigation in slash menu
         if (showSlashMenu) {
-          const TOP_LEVEL_COMMANDS = ['fast', 'plan', 'debug', 'research', 'deploy', 'superagent']
-          const WEB_COMMANDS = ['search', 'read', 'scrape', 'crawl']
-          const ALL_COMMANDS = [...TOP_LEVEL_COMMANDS, ...WEB_COMMANDS]
-
           const caretPos = mentionMenu.getCaretPos()
           const activeSlash = mentionMenu.getActiveSlashQueryAtPosition(caretPos, message)
           const query = activeSlash?.query.trim().toLowerCase() || ''
           const showAggregatedView = query.length > 0
+          const direction = e.key === 'ArrowDown' ? 'down' : 'up'
 
           if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
             e.preventDefault()
 
             if (mentionMenu.openSubmenuFor === 'Web') {
-              // Navigate in Web submenu
-              const last = WEB_COMMANDS.length - 1
               mentionMenu.setSubmenuActiveIndex((prev) => {
-                const next =
-                  e.key === 'ArrowDown'
-                    ? prev >= last
-                      ? 0
-                      : prev + 1
-                    : prev <= 0
-                      ? last
-                      : prev - 1
+                const next = getNextIndex(prev, direction, WEB_COMMANDS.length - 1)
                 requestAnimationFrame(() => mentionMenu.scrollActiveItemIntoView(next))
                 return next
               })
             } else if (showAggregatedView) {
-              // Navigate in filtered view
               const filtered = ALL_COMMANDS.filter((cmd) => cmd.includes(query))
-              const last = Math.max(0, filtered.length - 1)
               mentionMenu.setSubmenuActiveIndex((prev) => {
                 if (filtered.length === 0) return 0
-                const next =
-                  e.key === 'ArrowDown'
-                    ? prev >= last
-                      ? 0
-                      : prev + 1
-                    : prev <= 0
-                      ? last
-                      : prev - 1
+                const next = getNextIndex(prev, direction, filtered.length - 1)
                 requestAnimationFrame(() => mentionMenu.scrollActiveItemIntoView(next))
                 return next
               })
             } else {
-              // Navigate in folder view (top-level + Web folder)
-              const totalItems = TOP_LEVEL_COMMANDS.length + 1 // +1 for Web folder
-              const last = totalItems - 1
               mentionMenu.setMentionActiveIndex((prev) => {
-                const next =
-                  e.key === 'ArrowDown'
-                    ? prev >= last
-                      ? 0
-                      : prev + 1
-                    : prev <= 0
-                      ? last
-                      : prev - 1
+                const next = getNextIndex(prev, direction, TOP_LEVEL_COMMANDS.length)
                 requestAnimationFrame(() => mentionMenu.scrollActiveItemIntoView(next))
                 return next
               })
@@ -477,11 +430,9 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
             return
           }
 
-          // Arrow right to enter Web submenu
           if (e.key === 'ArrowRight') {
             e.preventDefault()
             if (!showAggregatedView && !mentionMenu.openSubmenuFor) {
-              // Check if Web folder is selected (it's after all top-level commands)
               if (mentionMenu.mentionActiveIndex === TOP_LEVEL_COMMANDS.length) {
                 mentionMenu.setOpenSubmenuFor('Web')
                 mentionMenu.setSubmenuActiveIndex(0)
@@ -490,7 +441,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
             return
           }
 
-          // Arrow left to exit submenu
           if (e.key === 'ArrowLeft') {
             e.preventDefault()
             if (mentionMenu.openSubmenuFor) {
@@ -500,44 +450,33 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           }
         }
 
-        // Arrow navigation in mention menu
         if (mentionKeyboard.handleArrowNavigation(e)) return
         if (mentionKeyboard.handleArrowRight(e)) return
         if (mentionKeyboard.handleArrowLeft(e)) return
 
-        // Enter key handling
         if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
           e.preventDefault()
           if (showSlashMenu) {
-            const TOP_LEVEL_COMMANDS = ['fast', 'plan', 'debug', 'research', 'deploy', 'superagent']
-            const WEB_COMMANDS = ['search', 'read', 'scrape', 'crawl']
-            const ALL_COMMANDS = [...TOP_LEVEL_COMMANDS, ...WEB_COMMANDS]
-
             const caretPos = mentionMenu.getCaretPos()
             const activeSlash = mentionMenu.getActiveSlashQueryAtPosition(caretPos, message)
             const query = activeSlash?.query.trim().toLowerCase() || ''
             const showAggregatedView = query.length > 0
 
             if (mentionMenu.openSubmenuFor === 'Web') {
-              // Select from Web submenu
               const selectedCommand =
                 WEB_COMMANDS[mentionMenu.submenuActiveIndex] || WEB_COMMANDS[0]
               handleSlashCommandSelect(selectedCommand)
             } else if (showAggregatedView) {
-              // Select from filtered view
               const filtered = ALL_COMMANDS.filter((cmd) => cmd.includes(query))
               if (filtered.length > 0) {
                 const selectedCommand = filtered[mentionMenu.submenuActiveIndex] || filtered[0]
                 handleSlashCommandSelect(selectedCommand)
               }
             } else {
-              // Folder navigation view
               const selectedIndex = mentionMenu.mentionActiveIndex
               if (selectedIndex < TOP_LEVEL_COMMANDS.length) {
-                // Top-level command selected
                 handleSlashCommandSelect(TOP_LEVEL_COMMANDS[selectedIndex])
               } else if (selectedIndex === TOP_LEVEL_COMMANDS.length) {
-                // Web folder selected - open it
                 mentionMenu.setOpenSubmenuFor('Web')
                 mentionMenu.setSubmenuActiveIndex(0)
               }
@@ -552,7 +491,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           return
         }
 
-        // Handle mention token behavior (backspace, delete, arrow keys) when menu is closed
         if (!mentionMenu.showMentionMenu) {
           const textarea = mentionMenu.textareaRef.current
           const selStart = textarea?.selectionStart ?? 0
@@ -561,11 +499,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
           if (e.key === 'Backspace' || e.key === 'Delete') {
             if (selectionLength > 0) {
-              // Multi-character selection: Clean up contexts for any overlapping mentions
-              // but let the default behavior handle the actual text deletion
               mentionTokensWithContext.removeContextsInSelection(selStart, selEnd)
             } else {
-              // Single character delete - check if cursor is inside/at a mention token
               const ranges = mentionTokensWithContext.computeMentionRanges()
               const target =
                 e.key === 'Backspace'
@@ -604,7 +539,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
             }
           }
 
-          // Prevent typing inside token
           if (e.key.length === 1 || e.key === 'Space') {
             const blocked =
               selectionLength === 0 && !!mentionTokensWithContext.findRangeContaining(selStart)
@@ -637,14 +571,10 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         const newValue = e.target.value
         setMessage(newValue)
 
-        // Skip mention menu logic if mentions are disabled
         if (disableMentions) return
 
         const caret = e.target.selectionStart ?? newValue.length
-
-        // Check for @ mention trigger
         const activeMention = mentionMenu.getActiveMentionQueryAtPosition(caret, newValue)
-        // Check for / slash command trigger
         const activeSlash = mentionMenu.getActiveSlashQueryAtPosition(caret, newValue)
 
         if (activeMention) {
@@ -686,84 +616,66 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       }
     }, [mentionMenu.textareaRef, mentionTokensWithContext])
 
-    const handleOpenMentionMenuWithAt = useCallback(() => {
-      if (disabled || isLoading) return
-      const textarea = mentionMenu.textareaRef.current
-      if (!textarea) return
-      textarea.focus()
-      const pos = textarea.selectionStart ?? message.length
-      const needsSpaceBefore = pos > 0 && !/\s/.test(message.charAt(pos - 1))
+    const insertTriggerAndOpenMenu = useCallback(
+      (trigger: '@' | '/') => {
+        if (disabled || isLoading) return
+        const textarea = mentionMenu.textareaRef.current
+        if (!textarea) return
 
-      const insertText = needsSpaceBefore ? ' @' : '@'
-      const start = textarea.selectionStart ?? message.length
-      const end = textarea.selectionEnd ?? message.length
-      const before = message.slice(0, start)
-      const after = message.slice(end)
-      const next = `${before}${insertText}${after}`
-      setMessage(next)
-
-      setTimeout(() => {
-        const newPos = before.length + insertText.length
-        textarea.setSelectionRange(newPos, newPos)
         textarea.focus()
-      }, 0)
+        const start = textarea.selectionStart ?? message.length
+        const end = textarea.selectionEnd ?? message.length
+        const needsSpaceBefore = start > 0 && !/\s/.test(message.charAt(start - 1))
 
-      mentionMenu.setShowMentionMenu(true)
-      mentionMenu.setOpenSubmenuFor(null)
-      mentionMenu.setMentionActiveIndex(0)
-      mentionMenu.setSubmenuActiveIndex(0)
-    }, [disabled, isLoading, mentionMenu, message, setMessage])
+        const insertText = needsSpaceBefore ? ` ${trigger}` : trigger
+        const before = message.slice(0, start)
+        const after = message.slice(end)
+        setMessage(`${before}${insertText}${after}`)
 
-    const handleOpenSlashMenu = useCallback(() => {
-      if (disabled || isLoading) return
-      const textarea = mentionMenu.textareaRef.current
-      if (!textarea) return
-      textarea.focus()
-      const pos = textarea.selectionStart ?? message.length
-      const needsSpaceBefore = pos > 0 && !/\s/.test(message.charAt(pos - 1))
+        setTimeout(() => {
+          const newPos = before.length + insertText.length
+          textarea.setSelectionRange(newPos, newPos)
+          textarea.focus()
+        }, 0)
 
-      const insertText = needsSpaceBefore ? ' /' : '/'
-      const start = textarea.selectionStart ?? message.length
-      const end = textarea.selectionEnd ?? message.length
-      const before = message.slice(0, start)
-      const after = message.slice(end)
-      const next = `${before}${insertText}${after}`
-      setMessage(next)
+        if (trigger === '@') {
+          mentionMenu.setShowMentionMenu(true)
+          mentionMenu.setOpenSubmenuFor(null)
+          mentionMenu.setMentionActiveIndex(0)
+        } else {
+          setShowSlashMenu(true)
+        }
+        mentionMenu.setSubmenuActiveIndex(0)
+      },
+      [disabled, isLoading, mentionMenu, message, setMessage]
+    )
 
-      setTimeout(() => {
-        const newPos = before.length + insertText.length
-        textarea.setSelectionRange(newPos, newPos)
-        textarea.focus()
-      }, 0)
+    const handleOpenMentionMenuWithAt = useCallback(
+      () => insertTriggerAndOpenMenu('@'),
+      [insertTriggerAndOpenMenu]
+    )
 
-      setShowSlashMenu(true)
-      mentionMenu.setSubmenuActiveIndex(0)
-    }, [disabled, isLoading, mentionMenu, message, setMessage])
+    const handleOpenSlashMenu = useCallback(
+      () => insertTriggerAndOpenMenu('/'),
+      [insertTriggerAndOpenMenu]
+    )
 
     const canSubmit = message.trim().length > 0 && !disabled && !isLoading
     const showAbortButton = isLoading && onAbort
 
-    // Render overlay content with highlighted mentions
     const renderOverlayContent = useCallback(() => {
       const contexts = contextManagement.selectedContexts
 
-      // Handle empty message
       if (!message) {
         return <span>{'\u00A0'}</span>
       }
 
-      // If no contexts, render the message directly with proper newline handling
       if (contexts.length === 0) {
-        // Add a zero-width space at the end if message ends with newline
-        // This ensures the newline is rendered and height is calculated correctly
         const displayText = message.endsWith('\n') ? `${message}\u200B` : message
         return <span>{displayText}</span>
       }
 
       const elements: React.ReactNode[] = []
-      const labels = contexts.map((c) => c.label).filter(Boolean)
-
-      // Build ranges for all mentions to highlight them including spaces
       const ranges = mentionTokensWithContext.computeMentionRanges()
 
       if (ranges.length === 0) {
@@ -775,14 +687,11 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       for (let i = 0; i < ranges.length; i++) {
         const range = ranges[i]
 
-        // Add text before mention
         if (range.start > lastIndex) {
           const before = message.slice(lastIndex, range.start)
           elements.push(<span key={`text-${i}-${lastIndex}-${range.start}`}>{before}</span>)
         }
 
-        // Add highlighted mention (including spaces)
-        // Use index + start + end to ensure unique keys even with duplicate contexts
         const mentionText = message.slice(range.start, range.end)
         elements.push(
           <span
@@ -797,12 +706,10 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
       const tail = message.slice(lastIndex)
       if (tail) {
-        // Add a zero-width space at the end if tail ends with newline
         const displayTail = tail.endsWith('\n') ? `${tail}\u200B` : tail
         elements.push(<span key={`tail-${lastIndex}`}>{displayTail}</span>)
       }
 
-      // Ensure there's always something to render for height calculation
       return elements.length > 0 ? elements : <span>{'\u00A0'}</span>
     }, [message, contextManagement.selectedContexts, mentionTokensWithContext])