added: lodash lib

MichaelTeida · Jan 28, 2024 · e8f4f3e · e8f4f3e
1 parent a81a68a
commit e8f4f3e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -5,8 +5,9 @@ Description soon
 * React
 * React Router
 * OpenAI API 4.24.7
-* JS
 * Sass
 * Joy UI
+* Lodash
 * Material Icons
-* Day.js
+* Day.js
+* JS
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@mui/joy": "^5.0.0-beta.23",
     "@mui/material": "^5.15.5",
     "dayjs": "^1.11.10",
+    "lodash": "^4.17.21",
     "openai": "^4.24.7",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

diff --git a/src/components/Chat.jsx b/src/components/Chat.jsx
@@ -21,6 +21,7 @@ function Chat() {
     }])
     const [hoveredIndex, setHoveredIndex] = useState(null);
     const [formDisabled, setFormDisabled] = useState(false);
+    const [tooltipVisible, setTooltipVisible] = useState(true);
 
     const messagesEndRef = useRef(null);
 
@@ -35,6 +36,9 @@ function Chat() {
 
     useEffect(() => {
         messagesEndRef.current.scrollIntoView({behavior: "smooth"})
+        if (messages.length >= 2) {
+            setTooltipVisible(false)
+        }
     }, [messages])
 
     const handleSend = () => {
@@ -54,6 +58,10 @@ function Chat() {
         setMessageSnackbar(message)
     }
 
+    const handleTip = (tip) => {
+        setInput(tip)
+    }
+
     return (
         <Stack flex={8} spacing={2} sx={{height: 'calc(100dvh - var(--Header-height))', py: 2}}>
             <Card sx={{
@@ -114,26 +122,29 @@ function Chat() {
                             )
                         })}
                     </Stack>
-                    <Stack direction={{xs: "column", md: "row"}} spacing={2} justifyContent="center">
-                        <Tooltip title="Test" arrow placement="top" sx={{flex: 1}}>
-                            <Card onClick={() => console.log("1")}>
+                    {tooltipVisible && <Stack direction={{xs: "column", md: "row"}} spacing={2} justifyContent="center">
+                        <Tooltip title="Test" arrow placement="top" sx={{flex: 1, "&:hover": {cursor: "pointer"}}}>
+                            <Card
+                                onClick={() => handleTip("Brainstorm ideas for a unique and memorable marriage proposal")}>
                                 <Typography level="title-sm">Brainstorm ideas</Typography>
                                 <Typography level="body-sm">for a unique and memorable marriage proposal</Typography>
                             </Card>
                         </Tooltip>
-                        <Tooltip title="Test" arrow placement="top" sx={{flex: 1}}>
-                            <Card onClick={() => console.log("2")}>
-                                <Typography level="title-sm">Test</Typography>
-                                <Typography level="body-sm">Test</Typography>
+                        <Tooltip title="Test" arrow placement="top" sx={{flex: 1, "&:hover": {cursor: "pointer"}}}>
+                            <Card
+                                onClick={() => handleTip("Suggest ways to improve productivity while working from home")}>
+                                <Typography level="title-sm">Suggest ways</Typography>
+                                <Typography level="body-sm">to improve productivity while working from home</Typography>
                             </Card>
                         </Tooltip>
-                        <Tooltip title="Test" arrow placement="top" sx={{flex: 1}}>
-                            <Card onClick={() => console.log("3")}>
-                                <Typography level="title-sm">Test</Typography>
-                                <Typography level="body-sm">Test</Typography>
+                        <Tooltip title="Test" arrow placement="top" sx={{flex: 1, "&:hover": {cursor: "pointer"}}}>
+                            <Card
+                                onClick={() => handleTip("Recommend books for a book club focused on fantasy genres")}>
+                                <Typography level="title-sm">Recommend books</Typography>
+                                <Typography level="body-sm">for a book club focused on fantasy genres</Typography>
                             </Card>
                         </Tooltip>
-                    </Stack>
+                    </Stack>}
                 </Stack>
                 <Box ref={messagesEndRef}/>
             </Card>