refactor: addressing pr comments made in #8556

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,
@@ -1166,7 +1167,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}
@@ -1206,6 +1213,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/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"
@@ -71,10 +72,14 @@ export const UISettings = ({
 							checked={requireCtrlEnterToSend ?? false}
 							onChange={(e: any) => handleRequireCtrlEnterToSendChange(e.target.checked)}
 							data-testid="ctrl-enter-checkbox">
-							<span className="font-medium">{t("settings:ui.requireCtrlEnterToSend.label")}</span>
+							<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")}
+							{t("settings:ui.requireCtrlEnterToSend.description", {
+								primaryMod: getPrimaryModifierKey(),
+							})}
 						</div>
 					</div>
 				</div>

webview-ui/src/i18n/locales/ca/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "Millora la sol·licitud amb context addicional",
 	"addImages": "Afegeix imatges al missatge",
 	"sendMessage": "Envia el missatge",
+	"pressToSend": "Prem {{keyCombination}} per enviar",
 	"stopTts": "Atura la síntesi de veu",
 	"typeMessage": "Escriu un missatge...",
 	"typeTask": "Escriu la teva tasca aquí...",

webview-ui/src/i18n/locales/ca/settings.json

@@ -957,8 +957,8 @@
 			"description": "Quan estigui activat, els blocs de pensament es replegaran per defecte fins que interactuïs amb ells"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "Requereix Ctrl+Enter per enviar missatges",
-			"description": "Quan estigui activat, hauràs de prémer Ctrl+Enter per enviar missatges en lloc de només Enter"
+			"label": "Requereix {primaryMod}+Enter per enviar missatges",
+			"description": "Quan estigui activat, hauràs de prémer {primaryMod}+Enter per enviar missatges en lloc de només Enter"
 		}
 	}
 }

webview-ui/src/i18n/locales/de/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "Prompt mit zusätzlichem Kontext verbessern",
 	"addImages": "Bilder zur Nachricht hinzufügen",
 	"sendMessage": "Nachricht senden",
+	"pressToSend": "Drücke {{keyCombination}} zum Senden",
 	"stopTts": "Text-in-Sprache beenden",
 	"typeMessage": "Nachricht eingeben...",
 	"typeTask": "Gib deine Aufgabe hier ein...",

webview-ui/src/i18n/locales/en/chat.json

@@ -125,6 +125,7 @@
 	"enhancePromptDescription": "The 'Enhance Prompt' button helps improve your prompt by providing additional context, clarification, or rephrasing. Try typing a prompt in here and clicking the button again to see how it works.",
 	"addImages": "Add images to message",
 	"sendMessage": "Send message",
+	"pressToSend": "Press {{keyCombination}} to send",
 	"stopTts": "Stop text-to-speech",
 	"typeMessage": "Type a message...",
 	"typeTask": "Type your task here...",

webview-ui/src/i18n/locales/en/settings.json

@@ -66,8 +66,8 @@
 			"description": "When enabled, thinking blocks will be collapsed by default until you interact with them"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "Require Ctrl/Cmd+Enter to send messages",
-			"description": "When enabled, you must press Ctrl or Cmd+Enter to send messages instead of just Enter"
+			"label": "Require {primaryMod}+Enter to send messages",
+			"description": "When enabled, you must press {primaryMod}+Enter to send messages instead of just Enter"
 		}
 	},
 	"prompts": {

webview-ui/src/i18n/locales/es/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "Mejorar el mensaje con contexto adicional",
 	"addImages": "Agregar imágenes al mensaje",
 	"sendMessage": "Enviar mensaje",
+	"pressToSend": "Presiona {{keyCombination}} para enviar",
 	"stopTts": "Detener texto a voz",
 	"typeMessage": "Escribe un mensaje...",
 	"typeTask": "Escribe tu tarea aquí...",

webview-ui/src/i18n/locales/es/settings.json

@@ -957,8 +957,8 @@
 			"description": "Cuando está activado, los bloques de pensamiento se colapsarán por defecto hasta que interactúes con ellos"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "Requerir Ctrl+Enter para enviar mensajes",
-			"description": "Cuando está habilitado, debes presionar Ctrl+Enter para enviar mensajes en lugar de solo Enter"
+			"label": "Requerir {primaryMod}+Enter para enviar mensajes",
+			"description": "Cuando está habilitado, debes presionar {primaryMod}+Enter para enviar mensajes en lugar de solo Enter"
 		}
 	}
 }

webview-ui/src/i18n/locales/fr/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "Améliorer la requête avec un contexte supplémentaire",
 	"addImages": "Ajouter des images au message",
 	"sendMessage": "Envoyer le message",
+	"pressToSend": "Appuyez sur {{keyCombination}} pour envoyer",
 	"stopTts": "Arrêter la synthèse vocale",
 	"typeMessage": "Écrivez un message...",
 	"typeTask": "Écrivez votre tâche ici...",

webview-ui/src/i18n/locales/hi/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "अतिरिक्त संदर्भ के साथ प्रॉम्प्ट बढ़ाएँ",
 	"addImages": "संदेश में चित्र जोड़ें",
 	"sendMessage": "संदेश भेजें",
+	"pressToSend": "दबाएं {{keyCombination}} भेजने के लिए",
 	"stopTts": "टेक्स्ट-टू-स्पीच बंद करें",
 	"typeMessage": "एक संदेश लिखें...",
 	"typeTask": "अपना कार्य यहां लिखें...",

webview-ui/src/i18n/locales/hi/settings.json

@@ -958,8 +958,8 @@
 			"description": "सक्षम होने पर, सोच ब्लॉक आपके द्वारा उनके साथ इंटरैक्ट करने तक डिफ़ॉल्ट रूप से संक्षिप्त रहेंगे"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "संदेश भेजने के लिए Ctrl+Enter आवश्यक करें",
-			"description": "सक्षम होने पर, संदेश भेजने के लिए केवल Enter के बजाय Ctrl+Enter दबाना आवश्यक है"
+			"label": "संदेश भेजने के लिए {primaryMod}+Enter आवश्यक करें",
+			"description": "सक्षम होने पर, संदेश भेजने के लिए केवल Enter के बजाय {primaryMod}+Enter दबाना आवश्यक है"
 		}
 	}
 }

webview-ui/src/i18n/locales/id/chat.json

@@ -128,6 +128,7 @@
 	},
 	"addImages": "Tambahkan gambar ke pesan",
 	"sendMessage": "Kirim pesan",
+	"pressToSend": "Tekan {{keyCombination}} untuk mengirim",
 	"stopTts": "Hentikan text-to-speech",
 	"typeMessage": "Ketik pesan...",
 	"typeTask": "Bangun, cari, tanya sesuatu",

webview-ui/src/i18n/locales/id/settings.json

@@ -987,8 +987,8 @@
 			"description": "Jika diaktifkan, blok berpikir akan diciutkan secara default sampai Anda berinteraksi dengannya"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "Wajib Ctrl+Enter untuk mengirim pesan",
-			"description": "Saat aktif, Anda harus menekan Ctrl+Enter untuk mengirim pesan, bukan hanya Enter"
+			"label": "Wajib {primaryMod}+Enter untuk mengirim pesan",
+			"description": "Saat aktif, Anda harus menekan {primaryMod}+Enter untuk mengirim pesan, bukan hanya Enter"
 		}
 	}
 }

webview-ui/src/i18n/locales/it/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "Migliora prompt con contesto aggiuntivo",
 	"addImages": "Aggiungi immagini al messaggio",
 	"sendMessage": "Invia messaggio",
+	"pressToSend": "Premi {{keyCombination}} per inviare",
 	"stopTts": "Interrompi sintesi vocale",
 	"typeMessage": "Scrivi un messaggio...",
 	"typeTask": "Scrivi la tua attività qui...",

webview-ui/src/i18n/locales/ja/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "追加コンテキストでプロンプトを強化",
 	"addImages": "メッセージに画像を追加",
 	"sendMessage": "メッセージを送信",
+	"pressToSend": "{{keyCombination}} を押して送信",
 	"stopTts": "テキスト読み上げを停止",
 	"typeMessage": "メッセージを入力...",
 	"typeTask": "ここにタスクを入力...",

webview-ui/src/i18n/locales/ja/settings.json

@@ -958,8 +958,8 @@
 			"description": "有効にすると、操作するまで思考ブロックがデフォルトで折りたたまれます"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "メッセージ送信にCtrl+Enterを必須にする",
-			"description": "有効にすると、EnterキーだけでなくCtrl+Enterを押す必要があります"
+			"label": "メッセージ送信に{primaryMod}+Enterを必須にする",
+			"description": "有効にすると、Enterキーだけでなく{primaryMod}+Enterを押す必要があります"
 		}
 	}
 }

webview-ui/src/i18n/locales/ko/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "추가 컨텍스트로 프롬프트 향상",
 	"addImages": "메시지에 이미지 추가",
 	"sendMessage": "메시지 보내기",
+	"pressToSend": "{{keyCombination}}을(를) 눌러 보내기",
 	"stopTts": "텍스트 음성 변환 중지",
 	"typeMessage": "메시지 입력...",
 	"typeTask": "여기에 작업 입력...",

webview-ui/src/i18n/locales/ko/settings.json

@@ -958,8 +958,8 @@
 			"description": "활성화하면 상호 작용할 때까지 생각 블록이 기본적으로 접힙니다"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "Ctrl+Enter를 눌러 메시지 보내기",
-			"description": "활성화하면 Enter 대신 Ctrl+Enter를 눌러 메시지를 보내야 합니다."
+			"label": "{primaryMod}+Enter를 눌러 메시지 보내기",
+			"description": "활성화하면 Enter 대신 {primaryMod}+Enter를 눌러 메시지를 보내야 합니다."
 		}
 	}
 }

webview-ui/src/i18n/locales/nl/chat.json

@@ -114,6 +114,7 @@
 	},
 	"addImages": "Afbeeldingen toevoegen aan bericht",
 	"sendMessage": "Bericht verzenden",
+	"pressToSend": "Druk op {{keyCombination}} om te verzenden",
 	"stopTts": "Stop tekst-naar-spraak",
 	"typeMessage": "Typ een bericht...",
 	"typeTask": "Typ hier je taak...",

webview-ui/src/i18n/locales/nl/settings.json

@@ -958,8 +958,8 @@
 			"description": "Indien ingeschakeld, worden denkblokken standaard samengevouwen totdat je ermee interageert"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "Vereis Ctrl+Enter om berichten te verzenden",
-			"description": "Wanneer ingeschakeld, moet u Ctrl+Enter indrukken om berichten te verzenden in plaats van alleen Enter"
+			"label": "Vereis {primaryMod}+Enter om berichten te verzenden",
+			"description": "Wanneer ingeschakeld, moet u {primaryMod}+Enter indrukken om berichten te verzenden in plaats van alleen Enter"
 		}
 	}
 }

webview-ui/src/i18n/locales/pl/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "Ulepsz podpowiedź dodatkowym kontekstem",
 	"addImages": "Dodaj obrazy do wiadomości",
 	"sendMessage": "Wyślij wiadomość",
+	"pressToSend": "Naciśnij {{keyCombination}}, aby wysłać",
 	"stopTts": "Zatrzymaj syntezę mowy",
 	"typeMessage": "Wpisz wiadomość...",
 	"typeTask": "Wpisz swoje zadanie tutaj...",

webview-ui/src/i18n/locales/pl/settings.json

@@ -958,8 +958,8 @@
 			"description": "Gdy włączone, bloki myślenia będą domyślnie zwinięte, dopóki nie wejdziesz z nimi w interakcję"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "Wymaga Ctrl+Enter, aby wysłać wiadomości",
-			"description": "Po włączeniu musisz nacisnąć Ctrl+Enter, aby wysłać wiadomości zamiast tylko Enter."
+			"label": "Wymaga {primaryMod}+Enter, aby wysłać wiadomości",
+			"description": "Po włączeniu musisz nacisnąć {primaryMod}+Enter, aby wysłać wiadomości zamiast tylko Enter."
 		}
 	}
 }

webview-ui/src/i18n/locales/pt-BR/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "Aprimorar prompt com contexto adicional",
 	"addImages": "Adicionar imagens à mensagem",
 	"sendMessage": "Enviar mensagem",
+	"pressToSend": "Pressione {{keyCombination}} para enviar",
 	"stopTts": "Parar conversão de texto em fala",
 	"typeMessage": "Digite uma mensagem...",
 	"typeTask": "Digite sua tarefa aqui...",

webview-ui/src/i18n/locales/pt-BR/settings.json

@@ -958,8 +958,8 @@
 			"description": "Quando ativado, os blocos de pensamento serão recolhidos por padrão até que você interaja com eles"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "Requer Ctrl+Enter para enviar mensagens",
-			"description": "Quando ativado, você deve pressionar Ctrl+Enter para enviar mensagens em vez de apenas Enter."
+			"label": "Requer {primaryMod}+Enter para enviar mensagens",
+			"description": "Quando ativado, você deve pressionar {primaryMod}+Enter para enviar mensagens em vez de apenas Enter."
 		}
 	}
 }

webview-ui/src/i18n/locales/ru/chat.json

@@ -114,6 +114,7 @@
 	},
 	"addImages": "Добавить изображения к сообщению",
 	"sendMessage": "Отправить сообщение",
+	"pressToSend": "Нажмите {{keyCombination}}, чтобы отправить",
 	"stopTts": "Остановить синтез речи",
 	"typeMessage": "Введите сообщение...",
 	"typeTask": "Введите вашу задачу здесь...",

webview-ui/src/i18n/locales/ru/settings.json

@@ -958,8 +958,8 @@
 			"description": "Если включено, блоки с размышлениями будут свернуты по умолчанию, пока вы не начнете с ними взаимодействовать"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "Требуется Ctrl+Enter для отправки сообщений",
-			"description": "Если включено, необходимо нажимать Ctrl+Enter для отправки сообщений вместо одной клавиши Enter."
+			"label": "Требуется {primaryMod}+Enter для отправки сообщений",
+			"description": "Если включено, необходимо нажимать {primaryMod}+Enter для отправки сообщений вместо одной клавиши Enter."
 		}
 	}
 }

webview-ui/src/i18n/locales/tr/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "Ek bağlamla istemi geliştir",
 	"addImages": "Mesaja resim ekle",
 	"sendMessage": "Mesaj gönder",
+	"pressToSend": "Göndermek için {{keyCombination}} tuşuna basın",
 	"stopTts": "Metin okumayı durdur",
 	"typeMessage": "Bir mesaj yazın...",
 	"typeTask": "Görevinizi buraya yazın...",

webview-ui/src/i18n/locales/tr/settings.json

@@ -958,8 +958,8 @@
 			"description": "Etkinleştirildiğinde, düşünme blokları siz onlarla etkileşime girene kadar varsayılan olarak daraltılır"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "Mesaj göndermek için Ctrl+Enter gerektirir",
-			"description": "Etkinleştirildiğinde, sadece Enter yerine mesaj göndermek için Ctrl+Enter tuşuna basmanız gerekir."
+			"label": "Mesaj göndermek için {primaryMod}+Enter gerektirir",
+			"description": "Etkinleştirildiğinde, sadece Enter yerine mesaj göndermek için {primaryMod}+Enter tuşuna basmanız gerekir."
 		}
 	}
 }

webview-ui/src/i18n/locales/vi/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "Nâng cao yêu cầu với ngữ cảnh bổ sung",
 	"addImages": "Thêm hình ảnh vào tin nhắn",
 	"sendMessage": "Gửi tin nhắn",
+	"pressToSend": "Nhấn {{keyCombination}} để gửi",
 	"stopTts": "Dừng chuyển văn bản thành giọng nói",
 	"typeMessage": "Nhập tin nhắn...",
 	"typeTask": "Nhập nhiệm vụ của bạn tại đây...",

webview-ui/src/i18n/locales/vi/settings.json

@@ -958,8 +958,8 @@
 			"description": "Khi được bật, các khối suy nghĩ sẽ được thu gọn theo mặc định cho đến khi bạn tương tác với chúng"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "Yêu cầu Ctrl+Enter để gửi tin nhắn",
-			"description": "Khi bật, bạn phải nhấn Ctrl+Enter để gửi tin nhắn thay vì chỉ nhấn Enter."
+			"label": "Yêu cầu {primaryMod}+Enter để gửi tin nhắn",
+			"description": "Khi bật, bạn phải nhấn {primaryMod}+Enter để gửi tin nhắn thay vì chỉ nhấn Enter."
 		}
 	}
 }

webview-ui/src/i18n/locales/zh-CN/chat.json

@@ -105,6 +105,7 @@
 	"enhancePrompt": "增强提示词",
 	"addImages": "添加图片到消息",
 	"sendMessage": "发送消息",
+	"pressToSend": "按 {{keyCombination}} 发送",
 	"stopTts": "停止文本转语音",
 	"typeMessage": "输入消息...",
 	"typeTask": "在此处输入您的任务...",

webview-ui/src/i18n/locales/zh-CN/settings.json

@@ -958,8 +958,8 @@
 			"description": "启用后，“思考”块将默认折叠，直到您与其交互"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "发送消息需按 Ctrl+Enter",
-			"description": "启用时，你需要按 Ctrl+Enter 才能发送消息，而不是仅按 Enter。"
+			"label": "发送消息需按 {primaryMod}+Enter",
+			"description": "启用时，你需要按 {primaryMod}+Enter 才能发送消息，而不是仅按 Enter。"
 		}
 	}
 }

webview-ui/src/i18n/locales/zh-TW/chat.json

@@ -125,6 +125,7 @@
 	"enhancePromptDescription": "「強化提示詞」按鈕可透過提供額外內容、說明或改寫來協助改善您的提示詞。請試著在這裡輸入提示詞，然後再次點選按鈕，以了解其運作方式。",
 	"addImages": "新增圖片到訊息中",
 	"sendMessage": "傳送訊息",
+	"pressToSend": "按 {{keyCombination}} 發送",
 	"stopTts": "停止文字轉語音",
 	"typeMessage": "輸入訊息...",
 	"typeTask": "在這裡輸入您的工作...",

webview-ui/src/i18n/locales/zh-TW/settings.json

@@ -958,8 +958,8 @@
 			"description": "啟用後，“思考”塊將預設折疊，直到您與其互動"
 		},
 		"requireCtrlEnterToSend": {
-			"label": "發送訊息需按 Ctrl+Enter",
-			"description": "啟用時，你需要按 Ctrl+Enter 才能發送訊息，而不是僅按 Enter。"
+			"label": "發送訊息需按 {primaryMod}+Enter",
+			"description": "啟用時，你需要按 {primaryMod}+Enter 才能發送訊息，而不是僅按 Enter。"
 		}
 	}
 }

webview-ui/src/utils/platform.ts

@@ -0,0 +1,47 @@
+/**
+ * Platform detection utilities
+ */
+
+/**
+ * Detects if the current platform is macOS
+ * @returns boolean indicating if the platform is macOS
+ */
+export const isMacOS = (): boolean => {
+	// Check for macOS user agent or navigator platform
+	if (typeof navigator !== "undefined") {
+		return /Mac|iPod|iPhone|iPad/.test(navigator.platform)
+	}
+	return false
+}
+
+/**
+ * Gets the primary modifier key for the current platform
+ * @returns "Cmd" for macOS, "Ctrl" for other platforms
+ */
+export const getPrimaryModifierKey = (): string => {
+	return isMacOS() ? "Cmd" : "Ctrl"
+}
+
+/**
+ * Gets the primary modifier key symbol for the current platform
+ * @returns "⌘" for macOS, "Ctrl" for other platforms
+ */
+export const getPrimaryModifierSymbol = (): string => {
+	return isMacOS() ? "⌘" : "Ctrl"
+}
+
+/**
+ * Gets the platform-aware key combination for sending messages
+ * @returns "Cmd+Enter" for macOS, "Ctrl+Enter" for other platforms
+ */
+export const getSendMessageKeyCombination = (): string => {
+	return `${getPrimaryModifierKey()}+Enter`
+}
+
+/**
+ * Gets the platform-aware key combination symbol for sending messages
+ * @returns "⌘⏎" for macOS, "Ctrl+Enter" for other platforms
+ */
+export const getSendMessageKeyCombinationSymbol = (): string => {
+	return isMacOS() ? "⌘⏎" : "Ctrl+Enter"
+}