Skip to content

Conversation

@Sg312
Copy link
Contributor

@Sg312 Sg312 commented Jan 14, 2026

Summary

Fix copilot slash commands

Type of Change

  • Bug fix

Testing

Manual

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@vercel
Copy link

vercel bot commented Jan 14, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Review Updated (UTC)
docs Skipped Skipped Jan 14, 2026 5:29am

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Jan 14, 2026

Greptile Summary

Refactored slash command handling to properly separate command IDs from display labels, fixing the mapping from superagent command to Actions label. Removed deprecated commands (plan, debug, deploy) and updated command capitalization. Added missing click handlers to back buttons in both mention and slash menus. Inlined caret position calculation logic from extracted functions, which now runs on every render instead of being memoized.

Key Changes

  • Changed command structure to use lowercase IDs (superagent) with proper display labels (Actions)
  • Updated onClick handlers to pass cmd.id instead of cmd.label to ensure correct command values are stored
  • Added COMMAND_DISPLAY_LABELS mapping in user-input.tsx to centralize label transformations
  • Fixed PopoverBackButton components to include onClick handlers that properly close submenus
  • Removed comments throughout the codebase
  • Inlined DOM manipulation for caret positioning that previously lived in extracted functions

Concerns

  • Performance: DOM manipulation code now runs on every render in both slash-menu.tsx and mention-menu.tsx, creating/destroying DOM elements on each keystroke
  • Code duplication: Command definitions exist in two places with different structures (string arrays in user-input.tsx, object arrays in slash-menu.tsx)

Confidence Score: 3/5

  • This PR fixes command mapping but introduces performance concerns with render-time DOM manipulation
  • The core fix (command ID vs label separation) is correct and necessary. However, inlining DOM manipulation into render logic creates performance overhead that will impact user experience during typing. The removed commands (plan, debug, deploy) may have been intentionally deprecated. Code duplication violates the project's style guide about using config files.
  • Pay close attention to slash-menu.tsx and mention-menu.tsx where DOM manipulation runs on every render

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/slash-menu/slash-menu.tsx Updated command structure from lowercase labels to proper display labels, inlined DOM manipulation causing performance issues, added back button handler
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx Removed comments, inlined caret calculation logic causing performance issues, added back button handler

Sequence Diagram

sequenceDiagram
    participant User
    participant SlashMenu
    participant UserInput
    participant ContextMgmt
    participant Store

    User->>UserInput: Types "/" in textarea
    UserInput->>SlashMenu: Opens slash menu
    SlashMenu->>SlashMenu: Renders TOP_LEVEL_COMMANDS<br/>(Fast, Research, Actions)
    User->>SlashMenu: Selects "Actions" command
    SlashMenu->>UserInput: onSelectCommand('superagent')
    UserInput->>UserInput: Maps 'superagent' to 'Actions'<br/>via COMMAND_DISPLAY_LABELS
    UserInput->>ContextMgmt: addContext({kind: 'slash_command',<br/>command: 'superagent',<br/>label: 'Actions'})
    UserInput->>UserInput: Replaces '/super...' with 'Actions'<br/>in textarea
    User->>UserInput: Submits message
    UserInput->>Store: sendMessage with contexts
    Store->>Store: Extracts command field:<br/>['superagent']
    Store->>Store: Calls .toLowerCase() on command
    Store->>Store: Sends to API with<br/>commands: ['superagent']
Loading

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3 files reviewed, 3 comments

Edit Code Review Agent Settings | Greptile

Comment on lines +73 to +100
const mirrorDiv = document.createElement('div')
mirrorDiv.style.position = 'absolute'
mirrorDiv.style.visibility = 'hidden'
mirrorDiv.style.whiteSpace = 'pre-wrap'
mirrorDiv.style.wordWrap = 'break-word'
mirrorDiv.style.font = style.font
mirrorDiv.style.padding = style.padding
mirrorDiv.style.border = style.border
mirrorDiv.style.width = style.width
mirrorDiv.style.lineHeight = style.lineHeight
mirrorDiv.style.boxSizing = style.boxSizing
mirrorDiv.style.letterSpacing = style.letterSpacing
mirrorDiv.style.textTransform = style.textTransform
mirrorDiv.style.textIndent = style.textIndent
mirrorDiv.style.textAlign = style.textAlign
mirrorDiv.textContent = message.substring(0, caretPos)

const caretMarker = document.createElement('span')
caretMarker.style.display = 'inline-block'
caretMarker.style.width = '0px'
caretMarker.style.padding = '0'
caretMarker.style.border = '0'
mirrorDiv.appendChild(caretMarker)

document.body.appendChild(mirrorDiv)
const markerRect = caretMarker.getBoundingClientRect()
const mirrorRect = mirrorDiv.getBoundingClientRect()
document.body.removeChild(mirrorDiv)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: DOM manipulation runs on every render, creating performance overhead. This code creates and removes DOM elements each time the component re-renders (on every keystroke in the textarea). Extract this logic to useMemo with dependencies on caretPos, message, and textareaEl to prevent unnecessary recalculations.

Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/slash-menu/slash-menu.tsx
Line: 73:100

Comment:
**style:** DOM manipulation runs on every render, creating performance overhead. This code creates and removes DOM elements each time the component re-renders (on every keystroke in the textarea). Extract this logic to `useMemo` with dependencies on `caretPos`, `message`, and `textareaEl` to prevent unnecessary recalculations.

How can I resolve this? If you propose a fix, please make it concise.

Comment on lines +301 to +328
const mirrorDiv = document.createElement('div')
mirrorDiv.style.position = 'absolute'
mirrorDiv.style.visibility = 'hidden'
mirrorDiv.style.whiteSpace = 'pre-wrap'
mirrorDiv.style.wordWrap = 'break-word'
mirrorDiv.style.font = style.font
mirrorDiv.style.padding = style.padding
mirrorDiv.style.border = style.border
mirrorDiv.style.width = style.width
mirrorDiv.style.lineHeight = style.lineHeight
mirrorDiv.style.boxSizing = style.boxSizing
mirrorDiv.style.letterSpacing = style.letterSpacing
mirrorDiv.style.textTransform = style.textTransform
mirrorDiv.style.textIndent = style.textIndent
mirrorDiv.style.textAlign = style.textAlign
mirrorDiv.textContent = message.substring(0, caretPos)

const caretMarker = document.createElement('span')
caretMarker.style.display = 'inline-block'
caretMarker.style.width = '0px'
caretMarker.style.padding = '0'
caretMarker.style.border = '0'
mirrorDiv.appendChild(caretMarker)

document.body.appendChild(mirrorDiv)
const markerRect = caretMarker.getBoundingClientRect()
const mirrorRect = mirrorDiv.getBoundingClientRect()
document.body.removeChild(mirrorDiv)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: DOM manipulation runs on every render, creating performance overhead. This code creates and removes DOM elements each time the component re-renders. Extract this logic to useMemo with dependencies on caretPos, message, and textareaEl.

Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
Line: 301:328

Comment:
**style:** DOM manipulation runs on every render, creating performance overhead. This code creates and removes DOM elements each time the component re-renders. Extract this logic to `useMemo` with dependencies on `caretPos`, `message`, and `textareaEl`.

How can I resolve this? If you propose a fix, please make it concise.

Comment on lines +43 to +49
const TOP_LEVEL_COMMANDS = ['fast', 'research', 'superagent'] as const
const WEB_COMMANDS = ['search', 'read', 'scrape', 'crawl'] as const
const ALL_COMMANDS = [...TOP_LEVEL_COMMANDS, ...WEB_COMMANDS]

const COMMAND_DISPLAY_LABELS: Record<string, string> = {
superagent: 'Actions',
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Duplicate command configuration exists in both user-input.tsx (as string arrays) and slash-menu.tsx (as object arrays). This creates a maintenance burden - changes to available commands must be synchronized across both files.

Context Used: Context from dashboard - When defining properties for components, use a dedicated config file (.ts) for configuration and kee... (source)

Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
Line: 43:49

Comment:
**style:** Duplicate command configuration exists in both `user-input.tsx` (as string arrays) and `slash-menu.tsx` (as object arrays). This creates a maintenance burden - changes to available commands must be synchronized across both files.

**Context Used:** Context from `dashboard` - When defining properties for components, use a dedicated config file (.ts) for configuration and kee... ([source](https://app.greptile.com/review/custom-context?memory=49f7e332-4733-48c6-834e-ec03d4abbeb7))

How can I resolve this? If you propose a fix, please make it concise.

@Sg312 Sg312 merged commit bd7009e into staging Jan 14, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants