Implement ability to choose key combination to send messages

Author: charlesvien

apps/array/src/renderer/features/message-editor/tiptap/useTiptapEditor.ts

@@ -103,14 +103,24 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
       editorProps: {
         attributes: { class: EDITOR_CLASS },
         handleKeyDown: (view, event) => {
-          if (event.key === "Enter" && !event.shiftKey) {
-            if (!view.editable) return false;
-            const suggestionPopup = document.querySelector("[data-tippy-root]");
-            if (suggestionPopup) return false;
-            event.preventDefault();
-            historyActions.reset();
-            submitRef.current();
-            return true;
+          if (event.key === "Enter") {
+            const sendMessagesWith =
+              useSettingsStore.getState().sendMessagesWith;
+            const isCmdEnterMode = sendMessagesWith === "cmd+enter";
+            const isSubmitKey = isCmdEnterMode
+              ? event.metaKey || event.ctrlKey
+              : !event.shiftKey;
+
+            if (isSubmitKey) {
+              if (!view.editable) return false;
+              const suggestionPopup =
+                document.querySelector("[data-tippy-root]");
+              if (suggestionPopup) return false;
+              event.preventDefault();
+              historyActions.reset();
+              submitRef.current();
+              return true;
+            }
           }
 
           if (

apps/array/src/renderer/features/settings/components/SettingsView.tsx

@@ -1,6 +1,9 @@
 import { useAuthStore } from "@features/auth/stores/authStore";
 import { FolderPicker } from "@features/folder-picker/components/FolderPicker";
-import { useSettingsStore } from "@features/settings/stores/settingsStore";
+import {
+  type SendMessagesWith,
+  useSettingsStore,
+} from "@features/settings/stores/settingsStore";
 import { useMeQuery } from "@hooks/useMeQuery";
 import { useProjectQuery } from "@hooks/useProjectQuery";
 import { useSetHeaderContent } from "@hooks/useSetHeaderContent";
@@ -60,12 +63,14 @@ export function SettingsView() {
     defaultThinkingEnabled,
     desktopNotifications,
     autoConvertLongText,
+    sendMessagesWith,
     setAutoRunTasks,
     setCreatePR,
     setCursorGlow,
     setDefaultThinkingEnabled,
     setDesktopNotifications,
     setAutoConvertLongText,
+    setSendMessagesWith,
   } = useSettingsStore();
   const terminalLayoutMode = useTerminalLayoutStore(
     (state) => state.terminalLayoutMode,
@@ -190,6 +195,18 @@ export function SettingsView() {
     [autoConvertLongText, setAutoConvertLongText],
   );
 
+  const handleSendMessagesWithChange = useCallback(
+    (value: SendMessagesWith) => {
+      track(ANALYTICS_EVENTS.SETTING_CHANGED, {
+        setting_name: "send_messages_with",
+        new_value: value,
+        old_value: sendMessagesWith,
+      });
+      setSendMessagesWith(value);
+    },
+    [sendMessagesWith, setSendMessagesWith],
+  );
+
   const handleWorktreeLocationChange = async (newLocation: string) => {
     setLocalWorktreeLocation(newLocation);
     try {
@@ -426,6 +443,31 @@ export function SettingsView() {
                     size="1"
                   />
                 </Flex>
+
+                <Flex align="center" justify="between">
+                  <Flex direction="column" gap="1">
+                    <Text size="1" weight="medium">
+                      Send messages with
+                    </Text>
+                    <Text size="1" color="gray">
+                      Choose which key combination sends messages. Use
+                      Shift+Enter for new lines.
+                    </Text>
+                  </Flex>
+                  <Select.Root
+                    value={sendMessagesWith}
+                    onValueChange={(value) =>
+                      handleSendMessagesWithChange(value as SendMessagesWith)
+                    }
+                    size="1"
+                  >
+                    <Select.Trigger />
+                    <Select.Content>
+                      <Select.Item value="enter">Enter</Select.Item>
+                      <Select.Item value="cmd+enter">⌘ Enter</Select.Item>
+                    </Select.Content>
+                  </Select.Root>
+                </Flex>
               </Flex>
             </Card>
           </Flex>

apps/array/src/renderer/features/settings/stores/settingsStore.ts

@@ -5,6 +5,7 @@ import { persist } from "zustand/middleware";
 
 export type DefaultRunMode = "local" | "cloud" | "last_used";
 export type LocalWorkspaceMode = "worktree" | "root";
+export type SendMessagesWith = "enter" | "cmd+enter";
 
 interface SettingsStore {
   autoRunTasks: boolean;
@@ -18,6 +19,7 @@ interface SettingsStore {
   desktopNotifications: boolean;
   cursorGlow: boolean;
   autoConvertLongText: boolean;
+  sendMessagesWith: SendMessagesWith;
 
   setAutoRunTasks: (autoRun: boolean) => void;
   setDefaultRunMode: (mode: DefaultRunMode) => void;
@@ -30,6 +32,7 @@ interface SettingsStore {
   setDesktopNotifications: (enabled: boolean) => void;
   setCursorGlow: (enabled: boolean) => void;
   setAutoConvertLongText: (enabled: boolean) => void;
+  setSendMessagesWith: (mode: SendMessagesWith) => void;
 }
 
 export const useSettingsStore = create<SettingsStore>()(
@@ -46,6 +49,7 @@ export const useSettingsStore = create<SettingsStore>()(
       desktopNotifications: true,
       cursorGlow: false,
       autoConvertLongText: true,
+      sendMessagesWith: "enter",
 
       setAutoRunTasks: (autoRun) => set({ autoRunTasks: autoRun }),
       setDefaultRunMode: (mode) => set({ defaultRunMode: mode }),
@@ -62,6 +66,7 @@ export const useSettingsStore = create<SettingsStore>()(
       setCursorGlow: (enabled) => set({ cursorGlow: enabled }),
       setAutoConvertLongText: (enabled) =>
         set({ autoConvertLongText: enabled }),
+      setSendMessagesWith: (mode) => set({ sendMessagesWith: mode }),
     }),
     {
       name: "settings-storage",