From d6ad3aa541f3c49c049d503f58c23ee20a64679c Mon Sep 17 00:00:00 2001
From: nl_0 <nl.imbecile@gmail.com>
Date: Tue, 8 Oct 2024 16:34:06 +0200
Subject: [PATCH] style: redesign chat UI and input component

---
 .../app/components/Assistant/UI/Chat/Chat.tsx | 12 +-----
 .../components/Assistant/UI/Chat/Input.tsx    | 41 +++++++++++++------
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/catalog/app/components/Assistant/UI/Chat/Chat.tsx b/catalog/app/components/Assistant/UI/Chat/Chat.tsx
index 1533a827226..cca17c43184 100644
--- a/catalog/app/components/Assistant/UI/Chat/Chat.tsx
+++ b/catalog/app/components/Assistant/UI/Chat/Chat.tsx
@@ -287,10 +287,6 @@ const useChatStyles = M.makeStyles((t) => ({
     flexGrow: 1,
     overflow: 'hidden',
   },
-  header: {
-    padding: `${t.spacing(2)}px`,
-    paddingBottom: `${t.spacing(1)}px`,
-  },
   historyContainer: {
     flexGrow: 1,
     overflowY: 'auto',
@@ -309,7 +305,7 @@ const useChatStyles = M.makeStyles((t) => ({
     gap: `${t.spacing(2)}px`,
     justifyContent: 'flex-end',
     minHeight: '100%',
-    padding: `${t.spacing(2)}px`,
+    padding: `${t.spacing(3)}px`,
     paddingBottom: 0,
   },
   input: {},
@@ -346,12 +342,6 @@ export default function Chat({ state, dispatch }: ChatProps) {
 
   return (
     <div className={classes.chat}>
-      <div className={classes.header}>
-        <M.Typography variant="h4">Qurator</M.Typography>
-        <M.Typography variant="caption" color="textSecondary">
-          Qurator may make errors. Verify important information.
-        </M.Typography>
-      </div>
       <div className={classes.historyContainer}>
         <div className={classes.history}>
           <MessageContainer>
diff --git a/catalog/app/components/Assistant/UI/Chat/Input.tsx b/catalog/app/components/Assistant/UI/Chat/Input.tsx
index ab72c21c98e..6d75762bacb 100644
--- a/catalog/app/components/Assistant/UI/Chat/Input.tsx
+++ b/catalog/app/components/Assistant/UI/Chat/Input.tsx
@@ -6,8 +6,11 @@ const useStyles = M.makeStyles((t) => ({
   input: {
     alignItems: 'center',
     display: 'flex',
-    padding: `${t.spacing(2)}px`,
-    paddingRight: `${t.spacing(1)}px`,
+    paddingLeft: `${t.spacing(2)}px`,
+    paddingRight: `${t.spacing(2)}px`,
+  },
+  textField: {
+    marginTop: 0,
   },
 }))
 
@@ -32,24 +35,36 @@ export default function ChatInput({ className, disabled, onSubmit }: ChatInputPr
     [disabled, onSubmit, value],
   )
 
+  // TODO: customize colors
   return (
     <form className={cx(classes.input, className)} onSubmit={handleSubmit}>
-      <M.OutlinedInput
+      <M.TextField
+        className={classes.textField}
         onChange={(e) => setValue(e.target.value)}
         value={value}
+        variant="filled"
         autoFocus
         fullWidth
-        margin="dense"
-        placeholder="Type a message..."
+        margin="normal"
+        label="Ask Qurator"
+        helperText="Qurator may make errors. Verify important information."
+        InputProps={{
+          endAdornment: (
+            <M.InputAdornment position="end" variant="filled">
+              <M.IconButton
+                disabled={disabled || !value}
+                onClick={handleSubmit}
+                type="submit"
+                color="primary"
+                edge="end"
+              >
+                <M.Icon>send</M.Icon>
+              </M.IconButton>
+            </M.InputAdornment>
+          ),
+        }}
+        InputLabelProps={{}}
       />
-      <M.IconButton
-        disabled={disabled || !value}
-        onClick={handleSubmit}
-        type="submit"
-        color="primary"
-      >
-        <M.Icon>send</M.Icon>
-      </M.IconButton>
     </form>
   )
 }