Improve the prompt input (What do you want to get done?) #197

Activity

1. 21st-connector commented on Apr 12, 2026

   

   21st-connectorBot

   on Apr 12, 2026 – with 21st - Connector

   Last edited by 21st-connector

   Contributor

   More actions

   Task completed.

   I'll analyze this issue by exploring the codebase to understand the current prompt input implementation and related components, then provide a detailed plan.

   ---

   View full conversation

   Powered by 1Code
2. 21st-connector commented on Apr 12, 2026

   

   21st-connectorBot

   on Apr 12, 2026 – with 21st - Connector

   Last edited by 21st-connector

   Contributor

   More actions

   Task completed.

   I'll analyze this issue and provide helpful context from the codebase. Let me start by exploring the relevant code.

   ---

   View full conversation

   Powered by 1Code
3. 21st-connector commented on Apr 12, 2026

   

   21st-connectorBot

   on Apr 12, 2026 – with 21st - Connector

   Contributor

   More actions

   Issue Enrichment

   Relevant Code

   The prompt input is powered by AgentsMentionsEditor, a custom contentEditable div (not a native <textarea>).

   Enter-key behavior is defined in src/renderer/features/agents/mentions/agents-mentions-editor.tsx:1045-1057:

   if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
     if (triggerActive.current || slashTriggerActive.current) {
       return // Let dropdown handle Enter
     }
     e.preventDefault()
     if (e.altKey && onForceSubmit) {
       onForceSubmit()
     } else {
       onSubmit?.()
     }
   }

   Current shortcuts:

   Shortcut	Action
   Enter	Send message (or add to queue if streaming)
   Shift+Enter	Insert newline
   Alt/Opt+Enter	Force-submit (bypass queue, stop stream)

   The input wrapper with send button, mode toggle, attachments, etc. lives in src/renderer/features/agents/main/chat-input-area.tsx (~1700 lines).

   There is also a legacy <textarea>-based input at src/renderer/components/ui/prompt-input.tsx:149-156 with similar Enter/Shift+Enter logic.

   Existing Draft System

   A draft persistence layer already exists in src/renderer/features/agents/lib/drafts.ts:

   • Drafts are auto-saved to localStorage under the key agent-drafts-global (4 MB limit).
   • New-chat drafts use a draft-{timestamp}-{random} key format.
   • Sub-chat drafts are saved on editor blur (chat-input-area.tsx:944-972).
   • Drafts support text, images, files, and text-context attachments.

   Kanban Board

   The Kanban view is at src/renderer/features/kanban/kanban-view.tsx. Status derivation is in src/renderer/features/kanban/lib/derive-status.ts. Note that the "draft" status type exists in the type definition but deriveWorkspaceStatus() never returns it — workspaces always resolve to "in-progress", "needs-input", or "done". New-chat drafts are handled separately from workspace statuses.

   Duplicate Check

   No existing issues cover this topic. This is the first request related to multiline input UX and prompt composition improvements.

   Suggested Approaches

   This issue describes two related but separable features:

   1. Swap Enter / Shift+Enter behavior (or make it configurable)

   The change would be localized to agents-mentions-editor.tsx:1045. Options:

   • Swap defaults: Make Enter = newline and Shift+Enter (or Cmd+Enter) = send. This is a one-line condition change but would affect all users.
   • Add a user setting: Add a preference toggle (e.g. "Send on Enter" vs "Send on Cmd+Enter") stored in the app's settings, and conditionally apply the keybinding in handleKeyDown. This is the more common pattern in chat apps (Slack, Discord, etc. all offer this).

   2. First-class draft prompt composition in the Kanban board

   The draft infrastructure already exists — the main work would be:

   • Make new-chat drafts visible as cards in the Kanban "draft" column (the column styling exists but nothing populates it with standalone drafts today).
   • Add a way to "promote" a draft card to a running chat (i.e., submit the draft text as the initial prompt for a new chat session).
   • Optionally, add a dedicated "compose" view with a larger editing surface (markdown preview, formatting toolbar, etc.) for drafting complex prompts.

   These two features are independent and could be implemented separately.
4. 21st-connector commented on Apr 12, 2026

   

   21st-connectorBot

   on Apr 12, 2026 – with 21st - Connector

   Contributor

   More actions

   Issue Analysis & Implementation Plan

   Current Behavior

   The prompt input uses a contenteditable div (via AgentsMentionsEditor) with the following key bindings:

   Key	Behavior
   Enter	Submits the message immediately
   Shift+Enter	Inserts a newline
   Alt/Option+Enter	Force-submits (bypasses queue, stops stream)
   Shift+Tab	Toggles Plan/Agent mode

   The Enter-to-submit logic lives in two places:

   • src/renderer/features/agents/mentions/agents-mentions-editor.tsx:1045-1057 — the primary contenteditable editor used in both new-chat and active-chat inputs
   • src/renderer/components/ui/prompt-input.tsx:149-156 — a simpler textarea fallback wrapper

   Existing Draft System

   The app already has a draft system that partially addresses the "write now, execute later" workflow:

   • Storage: src/renderer/features/agents/lib/drafts.ts — drafts are persisted to localStorage (key "agent-drafts-global", up to 4MB)
   • Data model: NewChatDraft interface (drafts.ts:59-68) stores text, images, files, text contexts, and associated project
   • Auto-save: new-chat-form.tsx auto-saves drafts as the user types (lines 1271-1314)
   • Kanban integration: Drafts appear in the "Drafts" column of the Kanban board (kanban-view.tsx:243-263)
   • Sidebar integration: Drafts show in the sidebar with a "Draft" badge via DraftItem component

   However, the current draft system only works for new chat prompts — there's no way to compose a complex prompt in a dedicated editor and then submit it deliberately.

   No Duplicate Issues Found

   Searched for existing issues on "prompt input", "enter key", "multiline", "draft", and "textarea" — no prior issues address this UX.

   ---

   Proposed Implementation Plan

   This issue describes two related but separable improvements:

   Part 1: Configurable Enter Key Behavior

   Goal: Let users choose whether Enter sends immediately or inserts a newline (with Cmd/Ctrl+Enter to send).

   Files to modify:

   • src/renderer/features/agents/mentions/agents-mentions-editor.tsx:1045-1057 — change Enter handler to respect user preference
   • src/renderer/components/ui/prompt-input.tsx:149-156 — same for the textarea fallback
   • New setting in a settings store/atom (e.g., enterBehaviorAtom with values "send" | "newline")
   • Settings UI to expose the toggle

   Approach:

   1. Add a user preference atom (e.g., in src/renderer/lib/atoms/ or src/renderer/features/agents/atoms/) persisted to localStorage
   2. In the handleKeyDown of agents-mentions-editor.tsx, check the preference:
      • If "send" (default, current behavior): Enter sends, Shift+Enter newlines
      • If "newline": Enter inserts newline, Cmd/Ctrl+Enter sends
   3. Mirror the same logic in prompt-input.tsx for consistency
   4. Add a toggle in settings UI (or a small indicator near the input area, like many chat apps do)

   Part 2: Expanded Prompt Composer / Draft Editor

   Goal: Allow users to compose complex, multi-line, markdown-formatted prompts before sending.

   Files to modify/create:

   • Extend src/renderer/features/agents/lib/drafts.ts — the NewChatDraft interface and persistence already support rich text
   • src/renderer/features/agents/main/new-chat-form.tsx — integrate an "expand" mode or dedicated editor view
   • Possibly a new component for a full-screen or modal prompt editor

   Approach:

   1. Expand button on input area: Add an "expand" icon button next to the input that opens a larger editor overlay/modal. This editor would support full markdown authoring with a larger textarea, preview, and explicit "Send" / "Save as Draft" buttons.
   2. Leverage existing draft system: The NewChatDraft type already stores text and attachments. The expanded editor can save to the same draft system, making drafts visible in both the sidebar and Kanban "Drafts" column.
   3. Send from Kanban: When a user clicks a draft card in the Kanban board, they can open it in the expanded editor and choose to send it — connecting the "write now, execute later" workflow to the existing Kanban view.

   Recommended Priority

   Part 1 (configurable Enter behavior) is a quick, high-impact UX win that directly addresses the accidental-send problem described in the issue. Part 2 (expanded composer) builds on the existing draft infrastructure and provides the full "write complex prompts and execute later" workflow.

   Key Considerations

   • The AgentsMentionsEditor is a contenteditable div (not a <textarea>), so any expanded editor needs to either reuse this component (to keep @mentions and /commands working) or provide a plain text/markdown mode with a clear tradeoff
   • IME composition handling (!e.nativeEvent.isComposing) must be preserved in any key handler changes
   • The existing queue system (Alt+Enter to force-submit during streaming) should remain unaffected
   • Draft localStorage limit is 4MB — for very large prompts with attachments, this could become a constraint worth monitoring
5. 21st-connector commented on Apr 12, 2026

   

   21st-connectorBot

   on Apr 12, 2026 – with 21st - Connector

   Contributor

   More actions

   Codebase Context for This Issue

   Current Input Implementation

   The prompt input is built on a custom contenteditable div (not a native <textarea>), implemented in the AgentsMentionsEditor component. This is the rich editor that supports @-mentions, /-slash commands, inline file chips, and more.

   Key files:

   File	Purpose
   src/renderer/features/agents/mentions/agents-mentions-editor.tsx	Core contenteditable editor (~1,400 lines). Handles keyboard events, mentions, slash commands, undo/redo.
   src/renderer/features/agents/main/chat-input-area.tsx	Wrapper component (~1,743 lines). Manages attachments, drag-and-drop, voice input, model selector, and draft saving.
   src/renderer/components/ui/prompt-input.tsx	Base PromptInput UI wrapper with auto-resize logic (max height: 200px).

   Current Enter Key Behavior

   The Enter-to-send logic lives in agents-mentions-editor.tsx at lines 1044-1057:

   // Prevent submission during IME composition (e.g., Chinese/Japanese/Korean input)
   if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
     if (triggerActive.current || slashTriggerActive.current) {
       // Let dropdown handle Enter
       return
     }
     e.preventDefault()
     // Opt+Enter = force submit (bypass queue, stop stream and send immediately)
     if (e.altKey && onForceSubmit) {
       onForceSubmit()
     } else {
       onSubmit?.()
     }
   }

   • Enter → Submit message
   • Shift+Enter → Newline (browser default, not intercepted)
   • Alt/Opt+Enter → Force submit (bypass queue, stop active stream)
   • IME composition → Submission blocked (CJK input support)

   Existing Draft System

   There is already a draft persistence system that partially addresses this request:

   • File: src/renderer/features/agents/lib/drafts.ts (~635 lines)
   • Storage: localStorage with key "agent-drafts-global", 4MB limit
   • Types:
     • NewChatDraft — drafts for new conversations (has id, text, project, isVisible flag, and attachment support)
     • SubChatDraft — drafts for active sub-chats (keyed as "chatId:subChatId")
   • Auto-save: Drafts are saved on editor blur (chat-input-area.tsx ~line 944-972) with full attachment data (images, files, text contexts)
   • Restore: Drafts are restored on component mount via the useSubChatDraft hook

   Existing Kanban View

   A Kanban view for drafts already exists (behind a beta flag):

   • Directory: src/renderer/features/kanban/
   • Components: kanban-view.tsx, kanban-board.tsx, kanban-card.tsx, kanban-column.tsx
   • Status derivation: kanban/lib/derive-status.ts
   • Activation: Controlled by betaKanbanEnabledAtom and triggered via an "open-kanban" hotkey
   • Behavior: Shows unsent drafts as cards; clicking a draft restores it in the input form

   No Duplicate Issues Found

   No previous issues were found covering multiline input UX, Enter key behavior changes, or draft composition improvements. This is the first request for these features.

   ---

   Suggested Approaches

   The issue describes two related but separable improvements:

   1. Enter key behavior change (multiline-first input)

   This would require modifying the onKeyDown handler in agents-mentions-editor.tsx:1044-1057 to swap the Enter/Shift+Enter behavior, or adding a user-configurable preference. Some options:

   • Option A — Swap defaults: Make Enter insert a newline and Shift+Enter (or Cmd+Enter) send. This is a small change in the keyboard handler but would affect all users.
   • Option B — User preference: Add a setting (e.g., "Enter to send" toggle) stored in app preferences. The keyboard handler would check this setting at runtime. This is the approach used by apps like Slack and Discord.
   • Option C — Smart detection: If the input contains markdown formatting (bullets, headers, code blocks), require Cmd+Enter to send. Otherwise, Enter sends as usual.

   2. Draft composition workspace

   The existing draft system and Kanban view provide a foundation. To make this a full "compose then execute" workflow:

   • The NewChatDraft type already supports text, images, files, textContexts, and visibility flags
   • The Kanban board (kanban-view.tsx) already renders draft cards with click-to-restore
   • What's missing: a dedicated "compose" mode or expanded editor that encourages longer-form prompt writing before submission (e.g., a full-screen or modal editor with markdown preview)

   The draft system is localStorage-based with a 4MB cap (drafts.ts:12), which may need consideration for users composing many large drafts with attachments.