Enter to send: renamed to Enter is Newline

enricoros · Oct 31, 2023 · e3d2327 · e3d2327 · vercel · Oct 31, 2023
1 parent 53533d0
commit e3d2327
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 21 deletions.
diff --git a/src/apps/chat/components/composer/Composer.tsx b/src/apps/chat/components/composer/Composer.tsx
@@ -148,10 +148,7 @@ export function Composer(props: {
   // external state
   const theme = useTheme();
   const [chatModeId, setChatModeId] = useChatModeStore(state => [state.chatModeId, state.setChatModeId], shallow);
-  const { enterToSend, experimentalLabs } = useUIPreferencesStore(state => ({
-    enterToSend: state.enterToSend,
-    experimentalLabs: state.experimentalLabs,
-  }), shallow);
+  const [enterIsNewline, experimentalLabs] = useUIPreferencesStore(state => [state.enterIsNewline, state.experimentalLabs], shallow);
   const { startupText, setStartupText } = useComposerStore();
   const { assistantTyping, systemPurposeId, tokenCount: conversationTokenCount, stopTyping } = useChatStore(state => {
     const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
@@ -211,7 +208,7 @@ export function Composer(props: {
   const handleTextareaKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
       const shiftOrAlt = e.shiftKey || e.altKey;
-      if (enterToSend ? !shiftOrAlt : shiftOrAlt) {
+      if (enterIsNewline ? shiftOrAlt : !shiftOrAlt) {
         if (!assistantTyping)
           handleSendClicked();
         e.preventDefault();
@@ -479,7 +476,7 @@ export function Composer(props: {
                 onPasteCapture={handleTextareaCtrlV}
                 slotProps={{
                   textarea: {
-                    enterKeyHint: enterToSend ? 'send' : 'enter',
+                    enterKeyHint: enterIsNewline ? 'enter' : 'send',
                     sx: {
                       ...(isSpeechEnabled ? { pr: { md: 5 } } : {}),
                       mb: 0.5,

diff --git a/src/apps/settings-modal/UISettings.tsx b/src/apps/settings-modal/UISettings.tsx
@@ -23,15 +23,15 @@ export function UISettings() {
   const {
     centerMode, setCenterMode,
     doubleClickToEdit, setDoubleClickToEdit,
-    enterToSend, setEnterToSend,
+    enterIsNewline, setEnterIsNewline,
     experimentalLabs, setExperimentalLabs,
     renderMarkdown, setRenderMarkdown,
     showPurposeFinder, setShowPurposeFinder,
     zenMode, setZenMode,
   } = useUIPreferencesStore(state => ({
     centerMode: state.centerMode, setCenterMode: state.setCenterMode,
     doubleClickToEdit: state.doubleClickToEdit, setDoubleClickToEdit: state.setDoubleClickToEdit,
-    enterToSend: state.enterToSend, setEnterToSend: state.setEnterToSend,
+    enterIsNewline: state.enterIsNewline, setEnterIsNewline: state.setEnterIsNewline,
     experimentalLabs: state.experimentalLabs, setExperimentalLabs: state.setExperimentalLabs,
     renderMarkdown: state.renderMarkdown, setRenderMarkdown: state.setRenderMarkdown,
     showPurposeFinder: state.showPurposeFinder, setShowPurposeFinder: state.setShowPurposeFinder,
@@ -41,7 +41,7 @@ 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 handleEnterIsNewlineChange = (event: React.ChangeEvent<HTMLInputElement>) => setEnterIsNewline(!event.target.checked);
 
   const handleDoubleClickToEditChange = (event: React.ChangeEvent<HTMLInputElement>) => setDoubleClickToEdit(event.target.checked);
 
@@ -72,10 +72,10 @@ export function UISettings() {
       <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
         <Box>
           <FormLabel>Enter to send</FormLabel>
-          <FormHelperText>{enterToSend ? <>Sends message<TelegramIcon /></> : 'New line'}</FormHelperText>
+          <FormHelperText>{enterIsNewline ? 'New line' : <>Sends message<TelegramIcon /></>}</FormHelperText>
         </Box>
-        <Switch checked={enterToSend} onChange={handleEnterToSendChange}
-                endDecorator={enterToSend ? 'On' : 'Off'}
+        <Switch checked={!enterIsNewline} onChange={handleEnterIsNewlineChange}
+                endDecorator={enterIsNewline ? 'Off' : 'On'}
                 slotProps={{ endDecorator: { sx: { minWidth: 26 } } }} />
       </FormControl>
 

diff --git a/src/common/components/InlineTextarea.tsx b/src/common/components/InlineTextarea.tsx
@@ -9,14 +9,14 @@ import { useUIPreferencesStore } from '~/common/state/store-ui';
 export function InlineTextarea(props: { initialText: string, onEdit: (text: string) => void, sx?: SxProps }) {
 
   const [text, setText] = React.useState(props.initialText);
-  const enterToSend = useUIPreferencesStore(state => state.enterToSend);
+  const enterIsNewline = useUIPreferencesStore(state => state.enterIsNewline);
 
   const handleEditTextChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => setText(e.target.value);
 
-  const handleEditKeyPressed = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const handleEditKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter') {
       const shiftOrAlt = e.shiftKey || e.altKey;
-      if (enterToSend ? !shiftOrAlt : shiftOrAlt) {
+      if (enterIsNewline ? shiftOrAlt : !shiftOrAlt) {
         e.preventDefault();
         props.onEdit(text);
       }
@@ -28,10 +28,11 @@ export function InlineTextarea(props: { initialText: string, onEdit: (text: stri
   return (
     <Textarea
       variant='soft' color='warning' autoFocus minRows={1}
-      value={text} onChange={handleEditTextChanged} onKeyDown={handleEditKeyPressed} onBlur={handleEditBlur}
+      value={text} onChange={handleEditTextChanged}
+      onKeyDown={handleEditKeyDown} onBlur={handleEditBlur}
       slotProps={{
         textarea: {
-          enterKeyHint: enterToSend ? 'done' : 'enter',
+          enterKeyHint: enterIsNewline ? 'enter' : 'done',
         },
       }}
       sx={props.sx}

diff --git a/src/common/state/store-ui.ts b/src/common/state/store-ui.ts
@@ -92,8 +92,8 @@ interface UIPreferencesStore {
   doubleClickToEdit: boolean;
   setDoubleClickToEdit: (doubleClickToEdit: boolean) => void;
 
-  enterToSend: boolean;
-  setEnterToSend: (enterToSend: boolean) => void;
+  enterIsNewline: boolean;
+  setEnterIsNewline: (enterIsNewline: boolean) => void;
 
   experimentalLabs: boolean;
   setExperimentalLabs: (experimentalLabs: boolean) => void;
@@ -125,8 +125,8 @@ export const useUIPreferencesStore = create<UIPreferencesStore>()(
       doubleClickToEdit: true,
       setDoubleClickToEdit: (doubleClickToEdit: boolean) => set({ doubleClickToEdit }),
 
-      enterToSend: true,
-      setEnterToSend: (enterToSend: boolean) => set({ enterToSend }),
+      enterIsNewline: false,
+      setEnterIsNewline: (enterIsNewline: boolean) => set({ enterIsNewline }),
 
       experimentalLabs: false,
       setExperimentalLabs: (experimentalLabs: boolean) => set({ experimentalLabs }),
@@ -146,6 +146,18 @@ export const useUIPreferencesStore = create<UIPreferencesStore>()(
     }),
     {
       name: 'app-ui',
+
+      /* versioning:
+       * 1: rename 'enterToSend' to 'enterIsNewline' (flip the meaning)
+       */
+      version: 1,
+
+      migrate: (state: any, fromVersion: number): UIPreferencesStore => {
+        // 0 -> 1: rename 'enterToSend' to 'enterIsNewline' (flip the meaning)
+        if (state && fromVersion === 0)
+          state.enterIsNewline = state['enterToSend'] === false;
+        return state;
+      },
     },
   ),
 );