Implement ability to choose key combination to send messages

Author: charlesvien

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

@@ -98,14 +98,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";
@@ -56,10 +59,14 @@ export function SettingsView() {
     createPR,
     cursorGlow,
     desktopNotifications,
+    autoConvertLongText,
+    sendMessagesWith,
     setAutoRunTasks,
     setCreatePR,
     setCursorGlow,
     setDesktopNotifications,
+    setAutoConvertLongText,
+    setSendMessagesWith,
   } = useSettingsStore();
   const terminalLayoutMode = useTerminalLayoutStore(
     (state) => state.terminalLayoutMode,
@@ -160,6 +167,30 @@ export function SettingsView() {
     [terminalLayoutMode, setTerminalLayout],
   );
 
+  const handleAutoConvertLongTextChange = useCallback(
+    (checked: boolean) => {
+      track(ANALYTICS_EVENTS.SETTING_CHANGED, {
+        setting_name: "auto_convert_long_text",
+        new_value: checked,
+        old_value: autoConvertLongText,
+      });
+      setAutoConvertLongText(checked);
+    },
+    [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 {
@@ -341,20 +372,48 @@ export function SettingsView() {
           <Flex direction="column" gap="3">
             <Heading size="3">Chat</Heading>
             <Card>
-              <Flex align="center" justify="between">
-                <Flex direction="column" gap="1">
-                  <Text size="1" weight="medium">
-                    Desktop notifications
-                  </Text>
-                  <Text size="1" color="gray">
-                    Show notifications when the agent finishes working on a task
-                  </Text>
+              <Flex direction="column" gap="4">
+                <Flex align="center" justify="between">
+                  <Flex direction="column" gap="1">
+                    <Text size="1" weight="medium">
+                      Desktop notifications
+                    </Text>
+                    <Text size="1" color="gray">
+                      Show notifications when the agent finishes working on a
+                      task
+                    </Text>
+                  </Flex>
+                  <Switch
+                    checked={desktopNotifications}
+                    onCheckedChange={setDesktopNotifications}
+                    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>
-                <Switch
-                  checked={desktopNotifications}
-                  onCheckedChange={setDesktopNotifications}
-                  size="1"
-                />
               </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;
@@ -16,6 +17,8 @@ interface SettingsStore {
   defaultModel: string;
   desktopNotifications: boolean;
   cursorGlow: boolean;
+  autoConvertLongText: boolean;
+  sendMessagesWith: SendMessagesWith;
 
   setAutoRunTasks: (autoRun: boolean) => void;
   setDefaultRunMode: (mode: DefaultRunMode) => void;
@@ -26,6 +29,8 @@ interface SettingsStore {
   setDefaultModel: (model: string) => void;
   setDesktopNotifications: (enabled: boolean) => void;
   setCursorGlow: (enabled: boolean) => void;
+  setAutoConvertLongText: (enabled: boolean) => void;
+  setSendMessagesWith: (mode: SendMessagesWith) => void;
 }
 
 export const useSettingsStore = create<SettingsStore>()(
@@ -40,6 +45,8 @@ export const useSettingsStore = create<SettingsStore>()(
       defaultModel: DEFAULT_MODEL,
       desktopNotifications: true,
       cursorGlow: false,
+      autoConvertLongText: true,
+      sendMessagesWith: "enter",
 
       setAutoRunTasks: (autoRun) => set({ autoRunTasks: autoRun }),
       setDefaultRunMode: (mode) => set({ defaultRunMode: mode }),
@@ -52,6 +59,9 @@ export const useSettingsStore = create<SettingsStore>()(
       setDesktopNotifications: (enabled) =>
         set({ desktopNotifications: enabled }),
       setCursorGlow: (enabled) => set({ cursorGlow: enabled }),
+      setAutoConvertLongText: (enabled) =>
+        set({ autoConvertLongText: enabled }),
+      setSendMessagesWith: (mode) => set({ sendMessagesWith: mode }),
     }),
     {
       name: "settings-storage",