From c484d6c9bf15c7c77b3f2acf70e4579b40168fea Mon Sep 17 00:00:00 2001
From: Jason Weill <jweill@amazon.com>
Date: Thu, 11 May 2023 15:08:45 -0700
Subject: [PATCH 1/6] Adds new config option to swap enter, shift+enter
 behavior

---
 packages/jupyter-ai/jupyter_ai/models.py      |  1 +
 .../src/components/chat-settings.tsx          | 43 ++++++++++++++++++-
 packages/jupyter-ai/src/handler.ts            |  1 +
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/jupyter-ai/jupyter_ai/models.py b/packages/jupyter-ai/jupyter_ai/models.py
index a9f28768a..7cef9e5d0 100644
--- a/packages/jupyter-ai/jupyter_ai/models.py
+++ b/packages/jupyter-ai/jupyter_ai/models.py
@@ -107,3 +107,4 @@ class GlobalConfig(BaseModel):
     model_provider_id: Optional[str] = None
     embeddings_provider_id: Optional[str] = None
     api_keys: Dict[str, str] = {}
+    send_with_shift_enter: Optional[bool] = None
diff --git a/packages/jupyter-ai/src/components/chat-settings.tsx b/packages/jupyter-ai/src/components/chat-settings.tsx
index d36a3bf63..a069ff78d 100644
--- a/packages/jupyter-ai/src/components/chat-settings.tsx
+++ b/packages/jupyter-ai/src/components/chat-settings.tsx
@@ -3,7 +3,12 @@ import { Box } from '@mui/system';
 import {
   Alert,
   Button,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
   MenuItem,
+  Radio,
+  RadioGroup,
   TextField,
   CircularProgress
 } from '@mui/material';
@@ -42,7 +47,8 @@ export function ChatSettings() {
   const [inputConfig, setInputConfig] = useState<AiService.Config>({
     model_provider_id: null,
     embeddings_provider_id: null,
-    api_keys: {}
+    api_keys: {},
+    send_with_shift_enter: null
   });
 
   // whether the form is currently saving
@@ -109,7 +115,8 @@ export function ChatSettings() {
   const handleSave = async () => {
     const inputConfigCopy: AiService.Config = {
       ...inputConfig,
-      api_keys: { ...inputConfig.api_keys }
+      api_keys: { ...inputConfig.api_keys },
+      send_with_shift_enter: inputConfig.send_with_shift_enter ?? true
     };
 
     // delete any empty api keys
@@ -256,6 +263,38 @@ export function ChatSettings() {
           />
         )
       )}
+      <FormControl>
+        <FormLabel id="send-radio-buttons-group-label">
+          When writing a message, press <kbd>Enter</kbd> to:
+        </FormLabel>
+        <RadioGroup
+          aria-labelledby="send-radio-buttons-group-label"
+          value={
+            (inputConfig.send_with_shift_enter ?? true) ? 'newline' : 'send'
+          }
+          name="send-radio-buttons-group"
+          onChange={e =>
+            setInputConfig(inputConfig => {
+              return ({
+                ...inputConfig,
+                send_with_shift_enter: (e.target as HTMLInputElement).value === 'newline'
+              });
+            })}
+        >
+          <FormControlLabel
+            value="newline"
+            control={<Radio />}
+            label={
+              <>Start a new line (use <kbd>Shift</kbd>+<kbd>Enter</kbd> to send)</>
+            }
+          />
+          <FormControlLabel
+            value="send"
+            control={<Radio />}
+            label="Send the message"
+          />
+        </RadioGroup>
+      </FormControl>
       <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
         <Button variant="contained" onClick={handleSave} disabled={saving}>
           {saving ? 'Saving...' : 'Save changes'}
diff --git a/packages/jupyter-ai/src/handler.ts b/packages/jupyter-ai/src/handler.ts
index 55db58c49..f77567693 100644
--- a/packages/jupyter-ai/src/handler.ts
+++ b/packages/jupyter-ai/src/handler.ts
@@ -169,6 +169,7 @@ export namespace AiService {
     model_provider_id: string | null;
     embeddings_provider_id: string | null;
     api_keys: Record<string, string>;
+    send_with_shift_enter: boolean | null;
   };
 
   export type GetConfigResponse = Config;

From 3b13d69e552d46dd3d0b11f9cdfd0d2f5dee651f Mon Sep 17 00:00:00 2001
From: Jason Weill <jweill@amazon.com>
Date: Thu, 11 May 2023 16:28:17 -0700
Subject: [PATCH 2/6] Updates input, docs

---
 docs/source/users/index.md                    |  2 +-
 .../jupyter-ai/src/components/chat-input.tsx  |  6 ++++-
 packages/jupyter-ai/src/components/chat.tsx   | 23 +++++++++++++++----
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/docs/source/users/index.md b/docs/source/users/index.md
index 164edf735..34c900ac0 100644
--- a/docs/source/users/index.md
+++ b/docs/source/users/index.md
@@ -171,7 +171,7 @@ Once you have set all the necessary keys, click the "back" (left arrow) button i
     alt="Screen shot of the initial, blank, chat interface."
     class="screenshot" />
 
-To compose a message, type it in the text box at the bottom of the chat interface and press <kbd>SHIFT</kbd>+<kbd>ENTER</kbd> to send. You can press <kbd>ENTER</kbd> to add a new line. Once you have sent a message, you should see a response from Jupyternaut, the Jupyter AI chatbot.
+To compose a message, type it in the text box at the bottom of the chat interface and press <kbd>SHIFT</kbd>+<kbd>ENTER</kbd> to send. You can press <kbd>ENTER</kbd> to add a new line. (These are the default keybindings; you can change them in the chat settings pane.) Once you have sent a message, you should see a response from Jupyternaut, the Jupyter AI chatbot.
 
 <img src="../_static/chat-hello-world.png"
     alt='Screen shot of an example "Hello world" message sent to Jupyternaut, who responds with "Hello world, how are you today?"'
diff --git a/packages/jupyter-ai/src/components/chat-input.tsx b/packages/jupyter-ai/src/components/chat-input.tsx
index b148062d4..f41680800 100644
--- a/packages/jupyter-ai/src/components/chat-input.tsx
+++ b/packages/jupyter-ai/src/components/chat-input.tsx
@@ -23,13 +23,17 @@ type ChatInputProps = {
   replaceSelection: boolean;
   toggleReplaceSelection: () => unknown;
   helperText: JSX.Element
+  sendWithShiftEnter: boolean;
   sx?: SxProps<Theme>;
 };
 
 export function ChatInput(props: ChatInputProps): JSX.Element {
   
   function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
-    if (event.key === 'Enter' && event.shiftKey) {
+    if (event.key === 'Enter' && (
+      (props.sendWithShiftEnter && event.shiftKey)
+      || (!props.sendWithShiftEnter && !event.shiftKey)
+    )) {
       props.onSend();
       event.stopPropagation();
       event.preventDefault();
diff --git a/packages/jupyter-ai/src/components/chat.tsx b/packages/jupyter-ai/src/components/chat.tsx
index 0d0d72676..ba1ef6a3d 100644
--- a/packages/jupyter-ai/src/components/chat.tsx
+++ b/packages/jupyter-ai/src/components/chat.tsx
@@ -31,9 +31,22 @@ function ChatBody({ chatHandler, setChatView: chatViewHandler }: ChatBodyProps):
   const [replaceSelection, setReplaceSelection] = useState(false);
   const [input, setInput] = useState('');
   const [selection, replaceSelectionFn] = useSelectionContext();
+  const [sendWithShiftEnter, setSendWithShiftEnter] = useState(true);
+
+  // Load the config once, to determine Shift+Enter behavior
+  useEffect(() => {
+    async function getConfig() {
+      const config = await AiService.getConfig();
+
+      console.log('in getConfig(), config.send_with_shift_enter is: ', config.send_with_shift_enter);
+      setSendWithShiftEnter(config.send_with_shift_enter ?? true);
+    }
+
+    getConfig();
+  }, []);
 
   /**
-   * Effect: fetch history on initial render
+   * Effect: fetch history and config on initial render
    */
   useEffect(() => {
     async function fetchHistory() {
@@ -138,6 +151,7 @@ function ChatBody({ chatHandler, setChatView: chatViewHandler }: ChatBodyProps):
     );
   }
 
+  console.log('About to render component; sendWithShiftEnter: ', sendWithShiftEnter);
   return (
     <>
       <ScrollContainer sx={{ flexGrow: 1 }}>
@@ -163,10 +177,11 @@ function ChatBody({ chatHandler, setChatView: chatViewHandler }: ChatBodyProps):
           paddingBottom: 0,
           borderTop: '1px solid var(--jp-border-color1)'
         }}
+        sendWithShiftEnter={sendWithShiftEnter}
         helperText={
-          <span>
-            Press <b>Shift</b> + <b>Enter</b> to submit message
-          </span>
+          sendWithShiftEnter
+          ? <span>Press <kbd>Shift</kbd>+<kbd>Enter</kbd> to submit message</span>
+          : <span>Press <kbd>Shift</kbd>+<kbd>Enter</kbd> to add a new line</span>
         }
       />
     </>

From 58aba56864a2d4072658078a69b122dafda7b84a Mon Sep 17 00:00:00 2001
From: Jason Weill <jweill@amazon.com>
Date: Thu, 11 May 2023 16:35:46 -0700
Subject: [PATCH 3/6] Moves helperText down; removes debug stmts

---
 packages/jupyter-ai/src/components/chat-input.tsx | 9 +++++++--
 packages/jupyter-ai/src/components/chat.tsx       | 8 --------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/jupyter-ai/src/components/chat-input.tsx b/packages/jupyter-ai/src/components/chat-input.tsx
index f41680800..0354ae624 100644
--- a/packages/jupyter-ai/src/components/chat-input.tsx
+++ b/packages/jupyter-ai/src/components/chat-input.tsx
@@ -22,7 +22,6 @@ type ChatInputProps = {
   toggleIncludeSelection: () => unknown;
   replaceSelection: boolean;
   toggleReplaceSelection: () => unknown;
-  helperText: JSX.Element
   sendWithShiftEnter: boolean;
   sx?: SxProps<Theme>;
 };
@@ -39,6 +38,12 @@ export function ChatInput(props: ChatInputProps): JSX.Element {
       event.preventDefault();
     }
   }
+
+  // Set the helper text based on whether Shift+Enter is used for sending.
+  const helperText = props.sendWithShiftEnter
+    ? <span>Press <b>Shift</b>+<b>Enter</b> to send message</span>
+    : <span>Press <b>Shift</b>+<b>Enter</b> to add a new line</span>;
+
   return (
     <Box sx={props.sx}>
       <Box sx={{ display: 'flex'}}>
@@ -68,7 +73,7 @@ export function ChatInput(props: ChatInputProps): JSX.Element {
          FormHelperTextProps={{
           sx: {marginLeft: 'auto', marginRight: 0}
          }}
-         helperText={props.value.length > 2 ? props.helperText : ' '}
+         helperText={props.value.length > 2 ? helperText : ' '}
         />
       </Box>
       {props.hasSelection && (
diff --git a/packages/jupyter-ai/src/components/chat.tsx b/packages/jupyter-ai/src/components/chat.tsx
index ba1ef6a3d..78bd2019c 100644
--- a/packages/jupyter-ai/src/components/chat.tsx
+++ b/packages/jupyter-ai/src/components/chat.tsx
@@ -37,8 +37,6 @@ function ChatBody({ chatHandler, setChatView: chatViewHandler }: ChatBodyProps):
   useEffect(() => {
     async function getConfig() {
       const config = await AiService.getConfig();
-
-      console.log('in getConfig(), config.send_with_shift_enter is: ', config.send_with_shift_enter);
       setSendWithShiftEnter(config.send_with_shift_enter ?? true);
     }
 
@@ -151,7 +149,6 @@ function ChatBody({ chatHandler, setChatView: chatViewHandler }: ChatBodyProps):
     );
   }
 
-  console.log('About to render component; sendWithShiftEnter: ', sendWithShiftEnter);
   return (
     <>
       <ScrollContainer sx={{ flexGrow: 1 }}>
@@ -178,11 +175,6 @@ function ChatBody({ chatHandler, setChatView: chatViewHandler }: ChatBodyProps):
           borderTop: '1px solid var(--jp-border-color1)'
         }}
         sendWithShiftEnter={sendWithShiftEnter}
-        helperText={
-          sendWithShiftEnter
-          ? <span>Press <kbd>Shift</kbd>+<kbd>Enter</kbd> to submit message</span>
-          : <span>Press <kbd>Shift</kbd>+<kbd>Enter</kbd> to add a new line</span>
-        }
       />
     </>
   );

From 6e0a44bb6e327f590a4703f934c59b56a7d0f8b2 Mon Sep 17 00:00:00 2001
From: Jason Weill <jweill@amazon.com>
Date: Mon, 15 May 2023 15:03:52 -0700
Subject: [PATCH 4/6] Combines effects

---
 packages/jupyter-ai/src/components/chat.tsx | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/jupyter-ai/src/components/chat.tsx b/packages/jupyter-ai/src/components/chat.tsx
index 78bd2019c..40ed90642 100644
--- a/packages/jupyter-ai/src/components/chat.tsx
+++ b/packages/jupyter-ai/src/components/chat.tsx
@@ -33,16 +33,6 @@ function ChatBody({ chatHandler, setChatView: chatViewHandler }: ChatBodyProps):
   const [selection, replaceSelectionFn] = useSelectionContext();
   const [sendWithShiftEnter, setSendWithShiftEnter] = useState(true);
 
-  // Load the config once, to determine Shift+Enter behavior
-  useEffect(() => {
-    async function getConfig() {
-      const config = await AiService.getConfig();
-      setSendWithShiftEnter(config.send_with_shift_enter ?? true);
-    }
-
-    getConfig();
-  }, []);
-
   /**
    * Effect: fetch history and config on initial render
    */
@@ -53,6 +43,7 @@ function ChatBody({ chatHandler, setChatView: chatViewHandler }: ChatBodyProps):
           chatHandler.getHistory(),
           AiService.getConfig()
         ]);
+        setSendWithShiftEnter(config.send_with_shift_enter ?? true);
         setMessages(history.messages);
         if (!config.model_provider_id) {
           setShowWelcomeMessage(true);

From fe8d62eb1acf8ecc6321c4b6853ae0a1b2fa0949 Mon Sep 17 00:00:00 2001
From: Jason Weill <jweill@amazon.com>
Date: Tue, 16 May 2023 10:44:21 -0700
Subject: [PATCH 5/6] Sets default behavior to "ENTER sends message"

---
 docs/source/users/index.md                           | 4 ++--
 packages/jupyter-ai/src/components/chat-settings.tsx | 2 +-
 packages/jupyter-ai/src/components/chat.tsx          | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/source/users/index.md b/docs/source/users/index.md
index 34c900ac0..75dbf7efc 100644
--- a/docs/source/users/index.md
+++ b/docs/source/users/index.md
@@ -171,7 +171,7 @@ Once you have set all the necessary keys, click the "back" (left arrow) button i
     alt="Screen shot of the initial, blank, chat interface."
     class="screenshot" />
 
-To compose a message, type it in the text box at the bottom of the chat interface and press <kbd>SHIFT</kbd>+<kbd>ENTER</kbd> to send. You can press <kbd>ENTER</kbd> to add a new line. (These are the default keybindings; you can change them in the chat settings pane.) Once you have sent a message, you should see a response from Jupyternaut, the Jupyter AI chatbot.
+To compose a message, type it in the text box at the bottom of the chat interface and press <kbd>ENTER</kbd> to send it. You can press <kbd>SHIFT</kbd>+<kbd>ENTER</kbd> to add a new line. (These are the default keybindings; you can change them in the chat settings pane.) Once you have sent a message, you should see a response from Jupyternaut, the Jupyter AI chatbot.
 
 <img src="../_static/chat-hello-world.png"
     alt='Screen shot of an example "Hello world" message sent to Jupyternaut, who responds with "Hello world, how are you today?"'
@@ -188,7 +188,7 @@ number of tokens in your request, which may cause your request to cost more mone
 Review your model provider's cost policy before making large requests.
 :::
 
-After highlighting a portion of your notebook, check "Include selection" in the chat panel, type your message, and press <kbd>SHIFT</kbd>+<kbd>ENTER</kbd> to send your message. Your outgoing message will include your selection.
+After highlighting a portion of your notebook, check "Include selection" in the chat panel, type your message, and then send your message. Your outgoing message will include your selection.
 
 <img src="../_static/chat-interface-selection.png"
     alt='Screen shot of JupyterLab with Jupyter AI&apos;s chat panel active. A Python function is selected, the user has "What does this code do?" as their prompt, and the user has chosen to include the selection with their message.'
diff --git a/packages/jupyter-ai/src/components/chat-settings.tsx b/packages/jupyter-ai/src/components/chat-settings.tsx
index a069ff78d..2476f7f06 100644
--- a/packages/jupyter-ai/src/components/chat-settings.tsx
+++ b/packages/jupyter-ai/src/components/chat-settings.tsx
@@ -270,7 +270,7 @@ export function ChatSettings() {
         <RadioGroup
           aria-labelledby="send-radio-buttons-group-label"
           value={
-            (inputConfig.send_with_shift_enter ?? true) ? 'newline' : 'send'
+            (inputConfig.send_with_shift_enter ?? false) ? 'newline' : 'send'
           }
           name="send-radio-buttons-group"
           onChange={e =>
diff --git a/packages/jupyter-ai/src/components/chat.tsx b/packages/jupyter-ai/src/components/chat.tsx
index 40ed90642..7b3f4ac1f 100644
--- a/packages/jupyter-ai/src/components/chat.tsx
+++ b/packages/jupyter-ai/src/components/chat.tsx
@@ -43,7 +43,7 @@ function ChatBody({ chatHandler, setChatView: chatViewHandler }: ChatBodyProps):
           chatHandler.getHistory(),
           AiService.getConfig()
         ]);
-        setSendWithShiftEnter(config.send_with_shift_enter ?? true);
+        setSendWithShiftEnter(config.send_with_shift_enter ?? false);
         setMessages(history.messages);
         if (!config.model_provider_id) {
           setShowWelcomeMessage(true);

From 40ae5e961f4dc552e54a649b9a556b714f521866 Mon Sep 17 00:00:00 2001
From: Jason Weill <jweill@amazon.com>
Date: Tue, 16 May 2023 10:45:54 -0700
Subject: [PATCH 6/6] Change the order to put the new default on top

---
 packages/jupyter-ai/src/components/chat-settings.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/jupyter-ai/src/components/chat-settings.tsx b/packages/jupyter-ai/src/components/chat-settings.tsx
index 2476f7f06..02351dba5 100644
--- a/packages/jupyter-ai/src/components/chat-settings.tsx
+++ b/packages/jupyter-ai/src/components/chat-settings.tsx
@@ -281,6 +281,11 @@ export function ChatSettings() {
               });
             })}
         >
+          <FormControlLabel
+            value="send"
+            control={<Radio />}
+            label="Send the message"
+          />
           <FormControlLabel
             value="newline"
             control={<Radio />}
@@ -288,11 +293,6 @@ export function ChatSettings() {
               <>Start a new line (use <kbd>Shift</kbd>+<kbd>Enter</kbd> to send)</>
             }
           />
-          <FormControlLabel
-            value="send"
-            control={<Radio />}
-            label="Send the message"
-          />
         </RadioGroup>
       </FormControl>
       <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>