feat: add configurable chat send shortcut (#1185)

Author: kaye-dev

packages/web/public/locales/translation/en.yaml

@@ -17,6 +17,8 @@ chat:
   delete_link: Delete Link
   delete_link_message: You can stop sharing the conversation history by deleting the link.
   drop_files: Drop files here
+  hint_cmd_enter: ⌘ + Enter to Submit
+  hint_ctrl_enter: Ctrl + Enter to Submit
   history: Conversation History
   initialize: Initialize
   model_parameters: Model Parameters
@@ -782,6 +784,7 @@ setting:
     agent_enabled: Agent Enabled
     language: Language
     language_help: Change display language
+    line_break_enter: Press Enter to create new line
     login_status: Login status
     rag_enabled: RAG (Amazon Kendra) Enabled
     rag_kb_enabled: RAG (Knowledge Base) Enabled

packages/web/public/locales/translation/ja.yaml

@@ -15,6 +15,8 @@ chat:
   delete_link: リンクの削除
   delete_link_message: リンクを削除することで、会話履歴の公開を停止できます。
   drop_files: ファイルをドロップしてください
+  hint_cmd_enter: ⌘ + Enter で送信
+  hint_ctrl_enter: Ctrl + Enter で送信
   history: 会話履歴
   initialize: 初期化
   model_parameters: モデルパラメータ
@@ -623,6 +625,7 @@ setting:
     agent_enabled: Agent 有効
     language: 言語設定
     language_help: 表示言語を変更できます
+    line_break_enter: Enter で改行
     login_status: ログイン状態
     rag_enabled: RAG (Amazon Kendra) 有効
     rag_kb_enabled: RAG (Knowledge Base) 有効

packages/web/public/locales/translation/th.yaml

@@ -15,6 +15,8 @@ chat:
   delete_link: ลบลิงก์
   delete_link_message: คุณสามารถหยุดการแชร์ประวัติการสนทนาโดยการลบลิงก์
   drop_files: วางไฟล์ที่นี่
+  hint_cmd_enter: ⌘ + Enter เพื่อส่ง
+  hint_ctrl_enter: Ctrl + Enter เพื่อส่ง
   history: ประวัติการสนทนา
   initialize: เริ่มต้นใหม่
   model_parameters: พารามิเตอร์โมเดล
@@ -672,8 +674,15 @@ setting:
     agent_enabled: เปิดใช้งานตัวแทน
     language: ภาษา
     language_help: เปลี่ยนภาษาที่แสดง
+    line_break_enter: กด Enter เพื่อขึ้นบรรทัดใหม่
+    login_status: สถานะการเข้าสู่ระบบ
     rag_enabled: เปิดใช้งาน RAG (Amazon Kendra)
     rag_kb_enabled: เปิดใช้งาน RAG (Knowledge Base)
+    show_email: แสดงอีเมล
+    show_tools: แสดงเครื่องมือ
+    show_use_case_builder: แสดง Use Case Builder
+    stats: สถิติ
+    typing_animation: แอนิเมชันการพิมพ์
     version: เวอร์ชัน
     version_help: อ้างอิงเวอร์ชันใน package.json ของ generative-ai-use-cases
   recent_updates: การอัปเดตล่าสุด

packages/web/public/locales/translation/vi.yaml

@@ -15,6 +15,8 @@ chat:
   delete_link: Xóa liên kết
   delete_link_message: Bằng cách xóa liên kết, bạn có thể ngừng công khai lịch sử cuộc trò chuyện.
   drop_files: Vui lòng thả file
+  hint_cmd_enter: ⌘ + Enter để gửi
+  hint_ctrl_enter: Ctrl + Enter để gửi
   history: Lịch sử cuộc trò chuyện
   initialize: Khởi tạo
   model_parameters: Tham số mô hình
@@ -650,6 +652,7 @@ setting:
     agent_enabled: Agent được bật
     language: Cài đặt ngôn ngữ
     language_help: Có thể thay đổi ngôn ngữ hiển thị
+    line_break_enter: Nhấn Enter để xuống dòng
     login_status: Trạng thái đăng nhập
     rag_enabled: RAG (Amazon Kendra) được bật
     rag_kb_enabled: RAG (Knowledge Base) được bật

packages/web/src/components/InputChatContent.tsx

@@ -16,6 +16,7 @@ import useFiles from '../hooks/useFiles';
 import FileCard from './FileCard';
 import { FileLimit } from 'generative-ai-use-cases';
 import { useTranslation } from 'react-i18next';
+import useUserSetting from '../hooks/useUserSetting';
 
 type Props = {
   content: string;
@@ -49,6 +50,7 @@ type Props = {
 
 const InputChatContent: React.FC<Props> = (props) => {
   const { t } = useTranslation();
+  const { settingSubmitCmdOrCtrlEnter } = useUserSetting();
   const { pathname } = useLocation();
   const { loading: chatLoading, isEmpty } = useChat(pathname);
   const {
@@ -122,7 +124,11 @@ const InputChatContent: React.FC<Props> = (props) => {
       )}
       <div
         className={`relative flex items-end rounded-xl border border-black/10 bg-gray-100 shadow-[0_0_30px_1px] shadow-gray-400/40 ${
-          props.disableMarginBottom ? '' : 'mb-7'
+          props.disableMarginBottom
+            ? ''
+            : settingSubmitCmdOrCtrlEnter
+              ? 'mb-2'
+              : 'mb-7'
         }`}>
         <div className="flex grow flex-col">
           {props.fileUpload && uploadedFiles.length > 0 && (
@@ -246,6 +252,15 @@ const InputChatContent: React.FC<Props> = (props) => {
           </Button>
         )}
       </div>
+
+      {/* Show keyboard shortcut hint when cmd/ctrl+enter setting is enabled */}
+      {settingSubmitCmdOrCtrlEnter && (
+        <div className="mb-2 text-right text-xs text-gray-500">
+          {navigator.platform.toLowerCase().includes('mac')
+            ? t('chat.hint_cmd_enter')
+            : t('chat.hint_ctrl_enter')}
+        </div>
+      )}
     </div>
   );
 };

packages/web/src/components/Textarea.tsx

@@ -2,6 +2,7 @@ import React, { useLayoutEffect, useRef } from 'react';
 import RowItem, { RowItemProps } from './RowItem';
 import Help from './Help';
 import { useTranslation } from 'react-i18next';
+import useUserSetting from '../hooks/useUserSetting';
 
 type Props = RowItemProps & {
   value?: string;
@@ -24,6 +25,7 @@ const MAX_HEIGHT = 300;
 
 const Textarea: React.FC<Props> = (props) => {
   const { t } = useTranslation();
+  const { settingSubmitCmdOrCtrlEnter } = useUserSetting();
   const ref = useRef<HTMLTextAreaElement>(null);
   const maxHeight = props.maxHeight || MAX_HEIGHT;
 
@@ -79,9 +81,28 @@ const Textarea: React.FC<Props> = (props) => {
         onKeyDown={(e) => {
           // keyCode is deprecated, but used for some browsers to handle IME input
           if (e.nativeEvent.isComposing || e.keyCode === 229) return;
-          if (props.onEnter && e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            props.onEnter();
+
+          if (props.onEnter) {
+            if (settingSubmitCmdOrCtrlEnter) {
+              // When line break mode is enabled, enter key creates new line and cmd/ctrl+enter sends message
+              if (navigator.platform.toLowerCase().includes('mac')) {
+                if (e.key === 'Enter' && e.metaKey) {
+                  e.preventDefault();
+                  props.onEnter();
+                }
+              } else {
+                if (e.key === 'Enter' && e.ctrlKey) {
+                  e.preventDefault();
+                  props.onEnter();
+                }
+              }
+            } else {
+              // Default behavior: send with enter (not cmd/ctrl+enter)
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                props.onEnter();
+              }
+            }
           }
         }}
         onChange={(e) => {

packages/web/src/hooks/useUserSetting.ts

@@ -1,6 +1,8 @@
 import useLocalStorageBoolean from './useLocalStorageBoolean';
 
 const useUserSetting = () => {
+  const [settingSubmitCmdOrCtrlEnter, setSettingSubmitCmdOrCtrlEnter] =
+    useLocalStorageBoolean('submitCmdOrCtrlEnter', false);
   const [settingTypingAnimation, setSettingTypingAnimation] =
     useLocalStorageBoolean('typingAnimation', true);
   const [settingShowUseCaseBuilder, setSettingShowUseCaseBuilder] =
@@ -15,6 +17,8 @@ const useUserSetting = () => {
   );
 
   return {
+    settingSubmitCmdOrCtrlEnter,
+    setSettingSubmitCmdOrCtrlEnter,
     settingTypingAnimation,
     setSettingTypingAnimation,
     settingShowUseCaseBuilder,

packages/web/src/pages/Setting.tsx

@@ -57,6 +57,8 @@ const Setting = () => {
   const hasUpdate = getHasUpdate();
   const closedPullRequests = getClosedPullRequests();
   const {
+    settingSubmitCmdOrCtrlEnter,
+    setSettingSubmitCmdOrCtrlEnter,
     settingTypingAnimation,
     setSettingTypingAnimation,
     settingShowUseCaseBuilder,
@@ -117,6 +119,16 @@ const Setting = () => {
           top={true}
         />
 
+        <SettingItem
+          name={t('setting.items.line_break_enter')}
+          value={
+            <Switch
+              checked={settingSubmitCmdOrCtrlEnter}
+              label=""
+              onSwitch={setSettingSubmitCmdOrCtrlEnter}
+            />
+          }></SettingItem>
+
         <SettingItem
           name={t('setting.items.typing_animation')}
           value={