fixed input text ,initial greeting, time display on bot message

Author: kartikpersistent

frontend/src/assets/ChatbotMessages.json

@@ -1,5 +1,5 @@
- {
-    "listMessages": [
+{
+  "listMessages": [
     {
       "id": 1,
       "message": "Hi, I need help with creating a Cypher query for Neo4j.",
@@ -8,7 +8,7 @@
     },
     {
       "id": 2,
-      "message": "Hi there! Welcome to Neo4j Chat! Your insights are just a click away from completed files",
+      "message": " Welcome to the Neo4j Knowledge Graph Chat. You can ask questions related to documents which have been completely processed.",
       "user": "chatbot",
       "datetime": "01/01/2024 00:00:00"
     },
@@ -20,8 +20,7 @@
     },
     {
       "id": 4,
-      "message":
-        "Alright, you can use the following query: `MATCH (e:Employee)-[:WORKS_IN]->(d:Department {name: 'IT'}) RETURN e.name`. This query matches nodes labeled 'Employee' related to the 'IT' department and returns their names.",
+      "message": "Alright, you can use the following query: `MATCH (e:Employee)-[:WORKS_IN]->(d:Department {name: 'IT'}) RETURN e.name`. This query matches nodes labeled 'Employee' related to the 'IT' department and returns their names.",
       "user": "chatbot",
       "datetime": "01/01/2024 00:00:00"
     },
@@ -33,10 +32,9 @@
     },
     {
       "id": 6,
-      "message":
-        "To get the count, use: `MATCH (e:Employee)-[:WORKS_IN]->(d:Department {name: 'IT'}) RETURN count(e)`. This counts all the distinct 'Employee' nodes related to the 'IT' department.",
+      "message": "To get the count, use: `MATCH (e:Employee)-[:WORKS_IN]->(d:Department {name: 'IT'}) RETURN count(e)`. This counts all the distinct 'Employee' nodes related to the 'IT' department.",
       "user": "chatbot",
       "datetime": "01/01/2024 00:00:00"
     }
-    ]
- }
+  ]
+}

frontend/src/components/Chatbot.tsx

@@ -55,9 +55,9 @@ export default function Chatbot(props: ChatbotProps) {
     setListMessages((listMessages) => [...listMessages, userMessage]);
     try {
       setLoading(true)
+      setInputMessage('');
       const chatresponse = await chatBotAPI(userCredentials, model, inputMessage);
       chatbotReply = chatresponse?.data?.message;
-      setInputMessage('');
       simulateTypingEffect(chatbotReply);
       setLoading(false)
     } catch (error) {
@@ -147,7 +147,7 @@ export default function Chatbot(props: ChatbotProps) {
             fluid
             onChange={handleInputChange}
           />
-          <Button type='submit' disabled={loading}>Submit</Button>
+          <Button type='submit' loading={loading}>Submit</Button>
         </form>
       </div>
     </div>

frontend/src/components/RightSideBar.tsx

@@ -9,7 +9,8 @@ interface RightSideBarProps {
 }
 
 const RightSideBar: React.FC<RightSideBarProps> = ({ showChatBot, closeChatBot }) => {
-  const [messages, setMessages] = useState<messages[]>([chatbotmessages.listMessages[1]]);
+  const date = new Date();
+  const [messages, setMessages] = useState<messages[]>([{ ...chatbotmessages.listMessages[1], datetime: `${date.toLocaleDateString()} ${date.toLocaleTimeString()}` }]);
   return (
     <Drawer
       expanded={showChatBot}