Adds helper text to chat input field (jupyterlab#139)

* Adds helper text to chat input field * use minor version bump in check_release --------- Co-authored-by: David L. Qiu <[email protected]>
dbelgrod · May 2, 2023 · f21445e · f21445e
1 parent 778ecaa
commit f21445e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/.github/workflows/check-release.yml b/.github/workflows/check-release.yml
@@ -19,3 +19,4 @@ jobs:
         uses: jupyter-server/jupyter_releaser/.github/actions/check-release@v2
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
+          version_spec: minor
diff --git a/packages/jupyter-ai/src/components/chat-input.tsx b/packages/jupyter-ai/src/components/chat-input.tsx
@@ -22,10 +22,12 @@ type ChatInputProps = {
   toggleIncludeSelection: () => unknown;
   replaceSelection: boolean;
   toggleReplaceSelection: () => unknown;
+  helperText: JSX.Element
   sx?: SxProps<Theme>;
 };
 
 export function ChatInput(props: ChatInputProps): JSX.Element {
+
   function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
     if (event.key === 'Enter' && event.shiftKey) {
       props.onSend();
@@ -35,7 +37,7 @@ export function ChatInput(props: ChatInputProps): JSX.Element {
   }
   return (
     <Box sx={props.sx}>
-      <Box sx={{ display: 'flex' }}>
+      <Box sx={{ display: 'flex'}}>
         <TextField
           value={props.value}
           onChange={e => props.onChange(e.target.value)}
@@ -50,8 +52,12 @@ export function ChatInput(props: ChatInputProps): JSX.Element {
                      <SendIcon />
                   </IconButton>
                </InputAdornment>
-            ),
+            )
          }}
+         FormHelperTextProps={{
+          sx: {marginLeft: 'auto', marginRight: 0}
+         }}
+         helperText={props.value.length > 2 ? props.helperText : ' '}
         />
       </Box>
       {props.hasSelection && (

diff --git a/packages/jupyter-ai/src/components/chat.tsx b/packages/jupyter-ai/src/components/chat.tsx
@@ -124,10 +124,11 @@ function ChatBody({ chatHandler }: ChatBodyProps): JSX.Element {
         sx={{
           paddingLeft: 4,
           paddingRight: 4,
-          paddingTop: 2,
-          paddingBottom: 2,
+          paddingTop: 3.5,
+          paddingBottom: 0,
           borderTop: '1px solid var(--jp-border-color1)'
         }}
+        helperText={<span><b>Press Shift</b> + <b>Enter</b> to submit message</span>}
       />
     </Box>
   );