Added tooltips

src/ketr-chat/src/App.tsx

@@ -3,6 +3,7 @@ import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
 import Divider from '@mui/material/Divider';
+import Tooltip from '@mui/material/Tooltip';
 import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar';
 import Alert from '@mui/material/Alert';
 import TextField from '@mui/material/TextField';
@@ -17,6 +18,7 @@ import AppBar from '@mui/material/AppBar';
 import Drawer from '@mui/material/Drawer';
 import Toolbar from '@mui/material/Toolbar';
 import MenuIcon from '@mui/icons-material/Menu';
+import SettingsIcon from '@mui/icons-material/Settings';
 import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -653,25 +655,29 @@ const App = () => {
         }}
       >
         <Toolbar>
-          <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{ mr: 2 }}
-          >
-            <MenuIcon />
-          </IconButton>
+          <Tooltip title="Chat Settings">
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              edge="start"
+              onClick={handleDrawerToggle}
+              sx={{ mr: 2 }}
+            >
+              <SettingsIcon />
+            </IconButton>
+          </Tooltip>
 
-          <IconButton
-            color="inherit"
-            aria-label="new_chat"
-            edge="start"
-            onClick={onNew}
-            sx={{ mr: 2 }}
-          >
-            <AddIcon />
-          </IconButton>
+          <Tooltip title="New Chat">
+            <IconButton
+              color="inherit"
+              aria-label="new_chat"
+              edge="start"
+              onClick={onNew}
+              sx={{ mr: 2 }}
+            >
+              <AddIcon />
+            </IconButton>
+          </Tooltip>
           <Typography variant="h6" noWrap component="div">
             Ketr-Chat
           </Typography>
@@ -705,12 +711,12 @@ const App = () => {
 
       <Box
         component="main"
-        sx={{ flexGrow: 1, p: 3, height: '100vh' }}
+        sx={{ flexGrow: 1, p: 1, height: '100vh' }}
         className="ChatBox">
         <Toolbar />
 
         <Box className="Conversation"
-          sx={{ flexGrow: 1, p: 3 }}
+          sx={{ flexGrow: 1, p: 1 }}
           ref={conversationRef}>
           {conversation.map((message, index) => {
             const formattedContent = message.content.trim();
@@ -772,7 +778,9 @@ const App = () => {
             id="QueryInput"
           />
           <AccordionActions>
-            <Button sx={{ m: 0 }} variant="contained" onClick={sendQuery}><SendIcon /></Button>
+            <Tooltip title="Send">
+              <Button sx={{ m: 0 }} variant="contained" onClick={sendQuery}><SendIcon /></Button>
+            </Tooltip>
           </AccordionActions>
         </Box>
       </Box>