From e8f4f3ec5d5769b1e529a867ef4606935fac847c Mon Sep 17 00:00:00 2001
From: Michael <kontakt@ozum.pl>
Date: Sun, 28 Jan 2024 18:48:13 +0100
Subject: [PATCH] added: lodash lib

---
 README.md               |  5 +++--
 package-lock.json       |  6 ++++++
 package.json            |  1 +
 src/components/Chat.jsx | 35 +++++++++++++++++++++++------------
 4 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 25912ff..202f418 100644
--- 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
\ No newline at end of file
+* Day.js
+* JS
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f4dfba1..3716482 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,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",
@@ -3786,6 +3787,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index ca2f74a..c98a4f4 100644
--- 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
index 77c3afd..8e5920c 100644
--- 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>