formatted chat input better, got rid of resize, added end adornment to send messages without the enter button

src/chat/ChatDrawer.tsx

@@ -3,7 +3,6 @@ import { Box, Drawer, IconButton, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { useMobile } from "hooks";
 import { Team } from "models";
-import { pond } from "protobuf-ts/pond";
 import Chat from "./Chat";
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -12,33 +11,25 @@ const useStyles = makeStyles((theme: Theme) => {
       display: "flex",
       flexDirection: "column", // Arrange children vertically
       backgroundColor: theme.palette.background.default,
-      // padding: theme.spacing(1),
       height: "100%",
       maxHeight: "100%",
       minHeight: "100%",
       minWidth: theme.spacing(54),
       maxWidth: theme.spacing(54),
-      // border: "1px solid red",
-      // zIndex: 1000000000000,
-      // zIndex: theme.zIndex.drawer,
     },
     chatContainer: {
-      // border: "1px solid green",
-      flex: 1, // Make it take up the remaining space
-      overflow: "hidden", // Ensure content is scrollable if it overflows
+      flex: 1, 
+      overflow: "hidden", 
     },
     chatDrawerMobile: {
       backgroundColor: theme.palette.background.default,
-      // padding: theme.spacing(1),
       height: "auto",
       width: "100%"
     },
     drawerHeader: {
-      // border: "1px solid blue",
       display: "flex",
       alignItems: "center",
       padding: theme.spacing(1),
-      // necessary for content to be below app bar
       ...theme.mixins.toolbar,
       justifyContent: "flex-start"
     }

src/chat/ChatInput.tsx

@@ -1,45 +1,41 @@
 import {
   Box,
   Grid2 as Grid,
+  IconButton,
+  TextareaAutosize,
   Theme,
   Typography,
   useTheme
 } from "@mui/material";
-//import { pond } from "protobuf-ts/pond";
 import { useGlobalState, useNoteAPI, useSnackbar } from "providers";
 import React, { useState } from "react";
-// import { getThemeType } from "theme";
 import { Note } from "models";
 import { pond } from "protobuf-ts/pond";
 import { makeStyles } from "@mui/styles";
-//import { AttachFile } from "@material-ui/icons";
-//import ResponsiveDialog from "common/ResponsiveDialog";
-//import FileUploader from "common/FileUploads/FileUploader";
-//import { cloneDeep } from "lodash";
+import { ArrowUpward } from "@mui/icons-material";
 
 const useStyles = makeStyles((theme: Theme) => ({
-  iconBox: {
-    width: 36,
-    height: 36,
-    margin: 8,
-    marginRight: 12
-  },
   textAreaBox: {
     width: "100%",
     padding: theme.spacing(1),
     paddingTop: theme.spacing(0),
   },
   textAreaClass: {
-    padding: theme.spacing(1),
-    // backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(50, 50, 50)",
-    // borderColor: getThemeType() === "light" ? "rgb(255, 255, 255)" : "rgb(60, 60, 60)",
-    // color: getThemeType() === "light" ? "rgb(10, 10, 10)" : "rgb(245, 245, 245)",
+    resize: "none",
+    padding: theme.spacing(2),
+    paddingRight: theme.spacing(7),
     backgroundColor: theme.palette.background.paper,
     borderColor: theme.palette.background.default,
     color: theme.palette.text.primary,
     borderRadius: "5px",
     width: "100%",
-    
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.body2.fontSize,
+    '&:focus': {
+      outline: "none",
+      boxShadow: "none",
+      borderColor: "ActiveBorder",
+    }
   }
 }))
 
@@ -138,13 +134,27 @@ export default function ChatInput(props: Props) {
         style={{ marginTop: theme.spacing(1) }}>
         <Grid size={{ xs: 12 }} >
           <Box className={classes.textAreaBox}>
-            <textarea
-              value={message}
-              className={classes.textAreaClass}
-              onChange={e => setMessage(e.target.value)}
-              onKeyDown={onKeyDown}
-              onKeyUp={onKeyUp}
-            />
+            <Box style={{ position: "relative", display: "inline-block", width: "100%" }}>
+              <TextareaAutosize
+                value={message}
+                className={classes.textAreaClass}
+                onChange={e => setMessage(e.target.value)}
+                onKeyDown={onKeyDown}
+                onKeyUp={onKeyUp}
+              />
+              <Box
+                style={{
+                  position: "absolute",
+                  right: "10px",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                }}
+              >
+                <IconButton onClick={validateMessage}>
+                  <ArrowUpward/>
+                </IconButton>
+              </Box>
+            </Box>
           </Box>
         </Grid>
       </Grid>

src/chat/ChatMessage.tsx

@@ -43,9 +43,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     // padding: 4
     padding: theme.spacing(1)
   },
-  textContainer: {
-    padding: theme.spacing(1),
-  },
   userAvatar: {
     width: 36,
     height: 36,

src/chat/ChatOutput.tsx

@@ -40,10 +40,6 @@ export default function ChatOutput(props: Props) {
     setScrollOffset(container.scrollHeight - container.scrollTop)
   }
 
-  useEffect(() => {
-    console.log(scrollOffset)
-  }, [scrollOffset])
-
   useEffect(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;