UI: change the 'enter to send' behavior, to default to longer text

src/apps/chat/components/composer/Composer.tsx

@@ -178,8 +178,7 @@ export function Composer(props: {
   const theme = useTheme();
   const { sendModeId, setSendModeId, sentMessages, appendSentMessage, clearSentMessages } = useComposerStore();
   const stopTyping = useChatStore(state => state.stopTyping);
-  const modelMaxResponseTokens = useSettingsStore(state => state.modelMaxResponseTokens);
-
+  const { enterToSend, modelMaxResponseTokens } = useSettingsStore(state => ({ enterToSend: state.enterToSend, modelMaxResponseTokens: state.modelMaxResponseTokens }), shallow);
 
   const { assistantTyping, chatModelId, tokenCount: conversationTokenCount } = useChatStore(state => {
     const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
@@ -217,10 +216,13 @@ export function Composer(props: {
   const handleStopClicked = () => props.conversationId && stopTyping(props.conversationId);
 
   const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey && !e.altKey) {
-      if (!assistantTyping)
-        handleSendClicked();
-      e.preventDefault();
+    if (e.key === 'Enter') {
+      const shiftOrAlt = e.shiftKey || e.altKey;
+      if (enterToSend ? !shiftOrAlt : shiftOrAlt) {
+        if (!assistantTyping)
+          handleSendClicked();
+        e.preventDefault();
+      }
     }
   };
 

src/apps/settings/UISettings.tsx

@@ -4,6 +4,7 @@ import { shallow } from 'zustand/shallow';
 import { Box, FormControl, FormHelperText, FormLabel, Option, Radio, RadioGroup, Select, Stack, Switch, Tooltip } from '@mui/joy';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import TelegramIcon from '@mui/icons-material/Telegram';
 import WidthNormalIcon from '@mui/icons-material/WidthNormal';
 import WidthWideIcon from '@mui/icons-material/WidthWide';
 
@@ -59,11 +60,13 @@ export function UISettings() {
   // external state
   const {
     centerMode, setCenterMode,
+    enterToSend, setEnterToSend,
     renderMarkdown, setRenderMarkdown,
     showPurposeFinder, setShowPurposeFinder,
     zenMode, setZenMode,
   } = useSettingsStore(state => ({
     centerMode: state.centerMode, setCenterMode: state.setCenterMode,
+    enterToSend: state.enterToSend, setEnterToSend: state.setEnterToSend,
     renderMarkdown: state.renderMarkdown, setRenderMarkdown: state.setRenderMarkdown,
     showPurposeFinder: state.showPurposeFinder, setShowPurposeFinder: state.setShowPurposeFinder,
     zenMode: state.zenMode, setZenMode: state.setZenMode,
@@ -71,6 +74,8 @@ export function UISettings() {
 
   const handleCenterModeChange = (event: React.ChangeEvent<HTMLInputElement>) => setCenterMode(event.target.value as 'narrow' | 'wide' | 'full' || 'wide');
 
+  const handleEnterToSendChange = (event: React.ChangeEvent<HTMLInputElement>) => setEnterToSend(event.target.checked);
+
   const handleZenModeChange = (event: React.ChangeEvent<HTMLInputElement>) => setZenMode(event.target.value as 'clean' | 'cleaner');
 
   const handleRenderMarkdownChange = (event: React.ChangeEvent<HTMLInputElement>) => setRenderMarkdown(event.target.checked);
@@ -105,6 +110,16 @@ export function UISettings() {
           </RadioGroup>
         </FormControl>
 
+        <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
+          <Box>
+            <FormLabel>Enter key</FormLabel>
+            <FormHelperText>{enterToSend ? <>Sends message<TelegramIcon /></> : 'New line'}</FormHelperText>
+          </Box>
+          <Switch checked={enterToSend} onChange={handleEnterToSendChange}
+                  endDecorator={enterToSend ? 'On' : 'Off'}
+                  slotProps={{ endDecorator: { sx: { minWidth: 26 } } }} />
+        </FormControl>
+
         <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
           <Box>
             <FormLabel>Markdown</FormLabel>

src/common/state/store-settings.ts

@@ -14,6 +14,9 @@ interface SettingsStore {
   centerMode: 'narrow' | 'wide' | 'full';
   setCenterMode: (centerMode: 'narrow' | 'wide' | 'full') => void;
 
+  enterToSend: boolean;
+  setEnterToSend: (enterToSend: boolean) => void;
+
   renderMarkdown: boolean;
   setRenderMarkdown: (renderMarkdown: boolean) => void;
 
@@ -97,6 +100,9 @@ export const useSettingsStore = create<SettingsStore>()(
       centerMode: 'wide',
       setCenterMode: (centerMode: 'narrow' | 'wide' | 'full') => set({ centerMode }),
 
+      enterToSend: false,
+      setEnterToSend: (enterToSend: boolean) => set({ enterToSend }),
+
       renderMarkdown: false,
       setRenderMarkdown: (renderMarkdown: boolean) => set({ renderMarkdown }),