Move the input toolbar below the input prompt (#278)

* Move the input toolbar below the input prompt

* lint

Author: brichet

packages/jupyter-chat/src/components/input/chat-input.tsx

@@ -7,10 +7,10 @@ import {
   Autocomplete,
   AutocompleteInputChangeReason,
   Box,
-  InputAdornment,
   SxProps,
   TextField,
-  Theme
+  Theme,
+  Toolbar
 } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
@@ -26,6 +26,8 @@ import { IChatCommandRegistry } from '../../registers';
 import { IAttachment } from '../../types';
 
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
+const INPUT_TEXTFIELD_CLASS = 'jp-chat-input-textfield';
+const INPUT_COMPONENT_CLASS = 'jp-chat-input-component';
 const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
 
 export function ChatInput(props: ChatInput.IProps): JSX.Element {
@@ -206,7 +208,8 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
           <TextField
             {...params}
             fullWidth
-            variant="outlined"
+            variant="filled"
+            className={INPUT_TEXTFIELD_CLASS}
             multiline
             onKeyDown={handleKeyDown}
             placeholder="Start chatting"
@@ -217,21 +220,9 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
             }
             InputProps={{
               ...params.InputProps,
-              endAdornment: (
-                <InputAdornment position="end" className={INPUT_TOOLBAR_CLASS}>
-                  {toolbarElements.map(item => (
-                    <item.element
-                      model={model}
-                      chatCommandRegistry={props.chatCommandRegistry}
-                    />
-                  ))}
-                </InputAdornment>
-              )
+              className: INPUT_COMPONENT_CLASS
             }}
-            FormHelperTextProps={{
-              sx: { marginLeft: 'auto', marginRight: 0 }
-            }}
-            helperText={input.length > 2 ? helperText : ' '}
+            label={input.length > 2 ? helperText : ' '}
           />
         )}
         inputValue={input}
@@ -248,6 +239,14 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
           }
         }}
       />
+      <Toolbar className={INPUT_TOOLBAR_CLASS}>
+        {toolbarElements.map(item => (
+          <item.element
+            model={model}
+            chatCommandRegistry={props.chatCommandRegistry}
+          />
+        ))}
+      </Toolbar>
     </Box>
   );
 }

packages/jupyter-chat/style/chat.css

@@ -202,12 +202,7 @@
   gap: 4px;
   flex-wrap: wrap;
   min-height: 1.5em;
-  padding: 8px 0;
-}
-
-.jp-chat-attachments:empty {
-  padding: 8px 0;
-  min-height: 1.5em;
+  padding: 4px 0;
 }
 
 .jp-chat-attachment {

packages/jupyter-chat/style/input.css

@@ -3,47 +3,16 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-.jp-chat-input-toolbar {
-  gap: 1px;
-}
-
-.jp-chat-input-toolbar .jp-chat-tooltipped-wrap button {
-  border-radius: 0;
-  min-width: unset;
-}
-
-.jp-chat-input-toolbar .jp-chat-tooltipped-wrap:first-child button {
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-
-.jp-chat-input-toolbar .jp-chat-tooltipped-wrap:last-child button {
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-
-.jp-chat-input-toolbar .jp-chat-attach-button,
-.jp-chat-input-toolbar .jp-chat-cancel-button {
-  padding: 4px;
-}
-
-.jp-chat-input-toolbar .jp-chat-send-include-opener {
-  padding: 4px 0;
-}
-
+/*
+  * INPUT CONTAINER (component and toolbar)
+  */
 .jp-chat-input-container {
   position: relative;
   transition: all 150ms ease;
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-height: 56px;
-  padding: 8px 0;
-}
-
-/* stylelint-disable-next-line selector-class-pattern */
-.jp-chat-input-container .MuiTextField-root {
-  padding-bottom: 8px;
 }
 
 .jp-chat-input-container.jp-chat-drag-hover::after {
@@ -72,3 +41,65 @@
   border-radius: 3px;
   white-space: nowrap;
 }
+
+/*
+ * INPUT TEXT FIELD
+ */
+.jp-chat-input-component {
+  border: 1px solid var(--jp-ui-font-color3);
+  border-radius: 4px;
+}
+
+.jp-chat-input-textfield .jp-chat-input-component::before,
+.jp-chat-input-textfield .jp-chat-input-component::after {
+  border-bottom: unset !important;
+}
+
+/* Use the textfield label below the input. */
+.jp-chat-input-textfield .jp-chat-input-component {
+  padding-top: 8px !important;
+  padding-bottom: 15px !important;
+  background-color: unset !important;
+}
+
+.jp-chat-input-textfield label {
+  top: unset;
+  left: unset;
+  bottom: 0;
+  right: 0;
+  color: var(--jp-ui-font-color2) !important;
+}
+
+/*
+ * INPUT TOOLBAR
+ */
+.jp-chat-input-toolbar {
+  gap: 1px;
+  align-self: flex-end;
+  min-height: unset !important;
+  margin-bottom: 4px;
+}
+
+.jp-chat-input-toolbar .jp-chat-tooltipped-wrap button {
+  border-radius: 0;
+  min-width: unset;
+}
+
+.jp-chat-input-toolbar .jp-chat-tooltipped-wrap:first-child button {
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+.jp-chat-input-toolbar .jp-chat-tooltipped-wrap:last-child button {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+.jp-chat-input-toolbar .jp-chat-attach-button,
+.jp-chat-input-toolbar .jp-chat-cancel-button {
+  padding: 4px;
+}
+
+.jp-chat-input-toolbar .jp-chat-send-include-opener {
+  padding: 4px 0;
+}