Updates input, docs

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?"'

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();

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>
         }
       />
     </>