Feature/ctrl enter send

packages/types/src/global-settings.ts

@@ -67,6 +67,7 @@ export const globalSettingsSchema = z.object({
 	alwaysAllowFollowupQuestions: z.boolean().optional(),
 	followupAutoApproveTimeoutMs: z.number().optional(),
 	alwaysAllowUpdateTodoList: z.boolean().optional(),
+	requireCtrlEnterToSend: z.boolean().optional(),
 	allowedCommands: z.array(z.string()).optional(),
 	deniedCommands: z.array(z.string()).optional(),
 	commandExecutionTimeout: z.number().optional(),

src/core/webview/ClineProvider.ts

@@ -1793,6 +1793,7 @@ export class ClineProvider
 			terminalCompressProgressBar,
 			historyPreviewCollapsed,
 			reasoningBlockCollapsed,
+			requireCtrlEnterToSend,
 			cloudUserInfo,
 			cloudIsAuthenticated,
 			sharingEnabled,
@@ -1927,6 +1928,7 @@ export class ClineProvider
 			hasSystemPromptOverride,
 			historyPreviewCollapsed: historyPreviewCollapsed ?? false,
 			reasoningBlockCollapsed: reasoningBlockCollapsed ?? true,
+			requireCtrlEnterToSend: requireCtrlEnterToSend ?? false,
 			cloudUserInfo,
 			cloudIsAuthenticated: cloudIsAuthenticated ?? false,
 			cloudOrganizations,
@@ -2142,6 +2144,7 @@ export class ClineProvider
 			maxConcurrentFileReads: stateValues.maxConcurrentFileReads ?? 5,
 			historyPreviewCollapsed: stateValues.historyPreviewCollapsed ?? false,
 			reasoningBlockCollapsed: stateValues.reasoningBlockCollapsed ?? true,
+			requireCtrlEnterToSend: stateValues.requireCtrlEnterToSend ?? false,
 			cloudUserInfo,
 			cloudIsAuthenticated,
 			sharingEnabled,

src/core/webview/webviewMessageHandler.ts

@@ -1621,6 +1621,10 @@ export const webviewMessageHandler = async (
 			await updateGlobalState("reasoningBlockCollapsed", message.bool ?? true)
 			// No need to call postStateToWebview here as the UI already updated optimistically
 			break
+		case "requireCtrlEnterToSend":
+			await updateGlobalState("requireCtrlEnterToSend", message.bool)
+			// No need to call postStateToWebview here as the UI already updated optimistically
+			break
 		case "toggleApiConfigPin":
 			if (message.text) {
 				const currentPinned = getGlobalState("pinnedApiConfigs") ?? {}

src/shared/ExtensionMessage.ts

@@ -126,8 +126,11 @@ export interface ExtensionMessage {
 		| "insertTextIntoTextarea"
 		| "dismissedUpsells"
 		| "organizationSwitchResult"
+		| "requireCtrlEnterToSend"
+		| "usagePreviewData"
 	text?: string
 	payload?: any // Add a generic payload for now, can refine later
+	bool?: boolean
 	action?:
 		| "chatButtonClicked"
 		| "mcpButtonClicked"
@@ -288,6 +291,7 @@ export type ExtensionState = Pick<
 	| "openRouterImageGenerationSelectedModel"
 	| "includeTaskHistoryInEnhance"
 	| "reasoningBlockCollapsed"
+	| "requireCtrlEnterToSend"
 > & {
 	version: string
 	clineMessages: ClineMessage[]

src/shared/WebviewMessage.ts

@@ -195,6 +195,7 @@ export interface WebviewMessage {
 		| "profileThresholds"
 		| "setHistoryPreviewCollapsed"
 		| "setReasoningBlockCollapsed"
+		| "requireCtrlEnterToSend"
 		| "openExternal"
 		| "filterMarketplaceItems"
 		| "marketplaceButtonClicked"

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -11,6 +11,7 @@ import { ExtensionMessage } from "@roo/ExtensionMessage"
 import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { getSendMessageKeyCombination } from "@src/utils/platform"
 import {
 	ContextMenuOptionType,
 	getContextMenuOptions,
@@ -89,6 +90,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			clineMessages,
 			commands,
 			cloudUserInfo,
+			requireCtrlEnterToSend,
 		} = useExtensionState()
 
 		// Find the ID and display text for the currently selected API configuration.
@@ -468,6 +470,11 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				}
 
 				if (event.key === "Enter" && !event.shiftKey && !isComposing) {
+					// If Ctrl+Enter is required but neither Ctrl nor Meta (Cmd) key is pressed, don't send
+					if (requireCtrlEnterToSend && !event.ctrlKey && !event.metaKey) {
+						return
+					}
+
 					event.preventDefault()
 
 					// Always call onSend - let ChatView handle queueing when disabled
@@ -536,6 +543,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				handleHistoryNavigation,
 				resetHistoryNavigation,
 				commands,
+				requireCtrlEnterToSend,
 			],
 		)
 
@@ -1154,7 +1162,13 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 										</button>
 									</StandardTooltip>
 								)}
-								<StandardTooltip content={t("chat:sendMessage")}>
+								<StandardTooltip
+									content={
+										requireCtrlEnterToSend
+											? t("chat:sendMessage") +
+												` (${t("chat:pressToSend", { keyCombination: getSendMessageKeyCombination() })})`
+											: t("chat:sendMessage")
+									}>
 									<button
 										aria-label={t("chat:sendMessage")}
 										disabled={false}
@@ -1194,6 +1208,22 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									{placeholderBottomText}
 								</div>
 							)}
+							{requireCtrlEnterToSend && (
+								<div
+									className={cn(
+										"absolute left-2 z-30 flex items-center h-8 font-vscode-font-family text-vscode-editor-font-size leading-vscode-editor-line-height",
+										isEditMode ? "pr-20" : "pr-9",
+									)}
+									style={{
+										bottom: "0.25rem",
+										color: "color-mix(in oklab, var(--vscode-descriptionForeground) 70%, transparent)",
+										userSelect: "none",
+										pointerEvents: "none",
+										fontSize: "0.75rem",
+									}}>
+									{t("chat:pressToSend", { keyCombination: getSendMessageKeyCombination() })}
+								</div>
+							)}
 						</div>
 					</div>
 				</div>

webview-ui/src/components/chat/__tests__/ChatTextArea.spec.tsx

@@ -1058,6 +1058,85 @@ describe("ChatTextArea", () => {
 		})
 	})
 
+	describe("keyboard handling with requireCtrlEnterToSend", () => {
+		beforeEach(() => {
+			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
+				filePaths: [],
+				openedTabs: [],
+				apiConfiguration: {
+					apiProvider: "anthropic",
+				},
+				taskHistory: [],
+				cwd: "/test/workspace",
+				requireCtrlEnterToSend: true,
+			})
+		})
+
+		it("should send message with Ctrl+Enter when requireCtrlEnterToSend is enabled", () => {
+			const onSend = vi.fn()
+			const { container } = render(<ChatTextArea {...defaultProps} onSend={onSend} inputValue="Test message" />)
+
+			const textarea = container.querySelector("textarea")!
+			fireEvent.keyDown(textarea, { key: "Enter", ctrlKey: true })
+
+			expect(onSend).toHaveBeenCalled()
+		})
+
+		it("should send message with Cmd+Enter when requireCtrlEnterToSend is enabled", () => {
+			const onSend = vi.fn()
+			const { container } = render(<ChatTextArea {...defaultProps} onSend={onSend} inputValue="Test message" />)
+
+			const textarea = container.querySelector("textarea")!
+			fireEvent.keyDown(textarea, { key: "Enter", metaKey: true })
+
+			expect(onSend).toHaveBeenCalled()
+		})
+
+		it("should not send message with regular Enter when requireCtrlEnterToSend is enabled", () => {
+			const onSend = vi.fn()
+			const { container } = render(<ChatTextArea {...defaultProps} onSend={onSend} inputValue="Test message" />)
+
+			const textarea = container.querySelector("textarea")!
+			fireEvent.keyDown(textarea, { key: "Enter" })
+
+			expect(onSend).not.toHaveBeenCalled()
+		})
+
+		it("should insert newline with Shift+Enter when requireCtrlEnterToSend is enabled", () => {
+			const setInputValue = vi.fn()
+			const { container } = render(
+				<ChatTextArea {...defaultProps} setInputValue={setInputValue} inputValue="Test message" />,
+			)
+
+			const textarea = container.querySelector("textarea")!
+			fireEvent.keyDown(textarea, { key: "Enter", shiftKey: true })
+
+			// Should not call onSend, allowing default behavior (insert newline)
+			expect(setInputValue).not.toHaveBeenCalled()
+		})
+
+		it("should send message with regular Enter when requireCtrlEnterToSend is disabled", () => {
+			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
+				filePaths: [],
+				openedTabs: [],
+				apiConfiguration: {
+					apiProvider: "anthropic",
+				},
+				taskHistory: [],
+				cwd: "/test/workspace",
+				requireCtrlEnterToSend: false,
+			})
+
+			const onSend = vi.fn()
+			const { container } = render(<ChatTextArea {...defaultProps} onSend={onSend} inputValue="Test message" />)
+
+			const textarea = container.querySelector("textarea")!
+			fireEvent.keyDown(textarea, { key: "Enter" })
+
+			expect(onSend).toHaveBeenCalled()
+		})
+	})
+
 	describe("send button visibility", () => {
 		it("should show send button when there are images but no text", () => {
 			const { container } = render(

webview-ui/src/components/settings/SettingsView.tsx

@@ -195,6 +195,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		openRouterImageApiKey,
 		openRouterImageGenerationSelectedModel,
 		reasoningBlockCollapsed,
+		requireCtrlEnterToSend,
 	} = cachedState
 
 	const apiConfiguration = useMemo(() => cachedState.apiConfiguration ?? {}, [cachedState.apiConfiguration])
@@ -384,6 +385,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			vscode.postMessage({ type: "updateSupportPrompt", values: customSupportPrompts || {} })
 			vscode.postMessage({ type: "includeTaskHistoryInEnhance", bool: includeTaskHistoryInEnhance ?? true })
 			vscode.postMessage({ type: "setReasoningBlockCollapsed", bool: reasoningBlockCollapsed ?? true })
+			vscode.postMessage({ type: "requireCtrlEnterToSend", bool: requireCtrlEnterToSend ?? false })
 			vscode.postMessage({ type: "upsertApiConfiguration", text: currentApiConfigName, apiConfiguration })
 			vscode.postMessage({ type: "telemetrySetting", text: telemetrySetting })
 			vscode.postMessage({ type: "profileThresholds", values: profileThresholds })
@@ -782,6 +784,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 					{activeTab === "ui" && (
 						<UISettings
 							reasoningBlockCollapsed={reasoningBlockCollapsed ?? true}
+							requireCtrlEnterToSend={requireCtrlEnterToSend ?? false}
 							setCachedStateField={setCachedStateField}
 						/>
 					)}

webview-ui/src/components/settings/UISettings.tsx

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
+import { getPrimaryModifierKey } from "@/utils/platform"
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
 import { Glasses } from "lucide-react"
 import { telemetryClient } from "@/utils/TelemetryClient"
@@ -11,10 +12,16 @@ import { ExtensionStateContextType } from "@/context/ExtensionStateContext"
 
 interface UISettingsProps extends HTMLAttributes<HTMLDivElement> {
 	reasoningBlockCollapsed: boolean
+	requireCtrlEnterToSend?: boolean
 	setCachedStateField: SetCachedStateField<keyof ExtensionStateContextType>
 }
 
-export const UISettings = ({ reasoningBlockCollapsed, setCachedStateField, ...props }: UISettingsProps) => {
+export const UISettings = ({
+	reasoningBlockCollapsed,
+	requireCtrlEnterToSend,
+	setCachedStateField,
+	...props
+}: UISettingsProps) => {
 	const { t } = useAppTranslation()
 
 	const handleReasoningBlockCollapsedChange = (value: boolean) => {
@@ -26,6 +33,15 @@ export const UISettings = ({ reasoningBlockCollapsed, setCachedStateField, ...pr
 		})
 	}
 
+	const handleRequireCtrlEnterToSendChange = (value: boolean) => {
+		setCachedStateField("requireCtrlEnterToSend", value)
+
+		// Track telemetry event
+		telemetryClient.capture("ui_settings_ctrl_enter_changed", {
+			enabled: value,
+		})
+	}
+
 	return (
 		<div {...props}>
 			<SectionHeader>
@@ -49,6 +65,23 @@ export const UISettings = ({ reasoningBlockCollapsed, setCachedStateField, ...pr
 							{t("settings:ui.collapseThinking.description")}
 						</div>
 					</div>
+
+					{/* Require Ctrl+Enter to Send Setting */}
+					<div className="flex flex-col gap-1">
+						<VSCodeCheckbox
+							checked={requireCtrlEnterToSend ?? false}
+							onChange={(e: any) => handleRequireCtrlEnterToSendChange(e.target.checked)}
+							data-testid="ctrl-enter-checkbox">
+							<span className="font-medium">
+								{t("settings:ui.requireCtrlEnterToSend.label", { primaryMod: getPrimaryModifierKey() })}
+							</span>
+						</VSCodeCheckbox>
+						<div className="text-vscode-descriptionForeground text-sm ml-5 mt-1">
+							{t("settings:ui.requireCtrlEnterToSend.description", {
+								primaryMod: getPrimaryModifierKey(),
+							})}
+						</div>
+					</div>
 				</div>
 			</Section>
 		</div>

webview-ui/src/context/ExtensionStateContext.tsx

@@ -158,6 +158,8 @@ export interface ExtensionStateContextType extends ExtensionState {
 	setMaxDiagnosticMessages: (value: number) => void
 	includeTaskHistoryInEnhance?: boolean
 	setIncludeTaskHistoryInEnhance: (value: boolean) => void
+	requireCtrlEnterToSend?: boolean
+	setRequireCtrlEnterToSend: (value: boolean) => void
 }
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -264,6 +266,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		alwaysAllowUpdateTodoList: true,
 		includeDiagnosticMessages: true,
 		maxDiagnosticMessages: 50,
+		requireCtrlEnterToSend: false, // Default to expected value
 		openRouterImageApiKey: "",
 		openRouterImageGenerationSelectedModel: "",
 	})
@@ -400,6 +403,10 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					}
 					break
 				}
+				case "requireCtrlEnterToSend": {
+					setState((prevState) => ({ ...prevState, requireCtrlEnterToSend: message.bool ?? false }))
+					break
+				}
 			}
 		},
 		[setListApiConfigMeta],
@@ -559,6 +566,10 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		},
 		includeTaskHistoryInEnhance,
 		setIncludeTaskHistoryInEnhance,
+		requireCtrlEnterToSend: state.requireCtrlEnterToSend,
+		setRequireCtrlEnterToSend: (value) => {
+			setState((prevState) => ({ ...prevState, requireCtrlEnterToSend: value }))
+		},
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>