add changes to llm chat

src/components/Gemini.css

@@ -1,5 +1,9 @@
 .user-chat-input {
     margin: 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    justify-content: start;
 }
 
 .user-message {
@@ -64,3 +68,36 @@ th {
 tr:hover {
   background-color: #f5f5f5;
 }
+
+.loading-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+}
+
+.loading-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  /* background-color: #f5f5f5; */
+  /* border: 1px solid #ddd; */
+  border-radius: 4px;
+  margin-bottom: 10px;
+  width: 100px;
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/components/Gemini.js

@@ -4,6 +4,9 @@ import Markdown from 'react-markdown';
 import MathJax from 'react-mathjax';
 import RemarkMathPlugin from 'remark-math';
 import remarkGfm from 'remark-gfm';
+import { debounce } from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
+import { FaSpinner } from 'react-icons/fa';
 // import { MathJax, MathJaxContext } from "better-react-mathjax";
 
 import './Gemini.css'; // Make sure to have your CSS styles for the typewriter effect
@@ -15,6 +18,8 @@ function Gemini(props) {
     const [messages, setMessages] = useState([]);
     const [newMessage, setNewMessage] = useState('');
     const [isTyping, setIsTyping] = useState(false);
+    const [discussionId, setDiscussionId] = useState(uuidv4());
+    const [isLoading, setIsLoading] = useState(false);
 
     const scrollRef = useRef(null);
 
@@ -52,7 +57,8 @@ function Gemini(props) {
     useEffect(() => {
         const loadChatHistory = async () => {
             const uid = 'uid'; // Replace with your user ID
-            const discussionId = 'discussionId'; // Replace with your discussion ID
+            // const discussionId = uuidv4();
+            console.log(discussionId)
 
             const collectionPath = `users/${uid}/discussions/${discussionId}/messages`;
 
@@ -69,18 +75,21 @@ function Gemini(props) {
                     if (data.response) {
                         // console.log(data.response)
                         // Simulate delay for typewriter effect
-                        setTimeout(() => {
-                            // Update the state with the Gemini's response
-                            setMessages((prevMessages) => [
-                                ...prevMessages,
-                                { text: data.response, sender: 'gemini' },
-                            ]);
+                        // setTimeout(() => {
+                        //     // Update the state with the Gemini's response
+                        //     setMessages((prevMessages) => [
+                        //         ...prevMessages,
+                        //         { text: data.response, sender: 'gemini' },
+                        //     ]);
 
-                            // if (scrollRef.current) {
-                            //     // alert(scrollRef.current.scrollHeight)
-                            //     scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-                            // }
-                        }, 10); // You can adjust the delay as needed
+                        //     // if (scrollRef.current) {
+                        //     //     // alert(scrollRef.current.scrollHeight)
+                        //     //     scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+                        //     // }
+                        // }, 10); // You can adjust the delay as needed
+
+
+                        loadedMessages.push({ text: data.response, sender: 'gemini' });
                     }
                 });
 
@@ -97,7 +106,7 @@ function Gemini(props) {
                     // alert(scrollRef.current.scrollHeight)
                     scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
                 }
-            }, 1000);
+            }, 300);
         };
 
         loadChatHistory();
@@ -106,8 +115,9 @@ function Gemini(props) {
     const handleSendMessage = async () => {
         if (newMessage.trim() === '') return;
 
+        setIsLoading(true);
+
         const uid = 'uid'; // Replace with your user ID
-        const discussionId = 'discussionId'; // Replace with your discussion ID
 
         const collectionPath = `users/${uid}/discussions/${discussionId}/messages`;
         const collectionRef = collection(db, collectionPath);
@@ -138,19 +148,27 @@ function Gemini(props) {
                     // Stop typewriter animation
                     // setIsTyping(false);
 
-                    // Scroll to the bottom
-                    if (scrollRef.current) {
-                        scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-                    }
-                }, 10); // You can adjust the delay as needed
+                    setIsLoading(false);
+                }, 200); // You can adjust the delay as needed
+            }
+            // Scroll to the bottom
+            if (scrollRef.current) {
+                scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
             }
         });
 
         if (scrollRef.current) {
             scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
         }
+
+        return unsub;
     };
 
+    const handleInputChange = debounce((value) => {
+        setNewMessage(value);
+    }, 30); // Adjust the delay as needed
+
+
     return (
         <div>
             <div style={{ height: '500px', overflowY: 'scroll', border: '1px solid #ccc' }} ref={scrollRef}>
@@ -193,6 +211,11 @@ function Gemini(props) {
                 >
                     Send
                 </button>
+                {isLoading && <div className='loading-container'>
+                    <div className="loading-icon">
+                        <FaSpinner className="spin" />
+                    </div>
+                </div>}
             </div>
         </div>
     );

src/routes/appRoutes.js

@@ -118,7 +118,7 @@ const appRoutes = [
         element: <Gemini />,
         state: "chat",
         sidebarProps: {
-            displayText: "Gemini",
+            displayText: "Chat Gemini",
             icon: <FaCommentAlt />
         }
     },