Merge pull request #142 from neo4j-labs/chatbot-bug-fixes

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

Author: prakriti-solankey

frontend/src/App.css

@@ -122,4 +122,34 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+
+.loader {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: block;
+  margin: 7px auto;
+  position: relative;
+  background: #FFF;
+  box-shadow: -12px 0 #FFF, 12px 0 #FFF;
+  box-sizing: border-box;
+  animation: shadowPulse 2s linear infinite;
+}
+
+@keyframes shadowPulse {
+  33% {
+    background: #FFF;
+    box-shadow: -12px 0 rgb(var(--theme-palette-primary-bg-strong)), 12px 0 #FFF;
+  }
+
+  66% {
+    background: rgb(var(--theme-palette-primary-bg-strong));
+    box-shadow: -12px 0 #FFF, 12px 0 #FFF;
+  }
+
+  100% {
+    background: #FFF;
+    box-shadow: -12px 0 #FFF, 12px 0 rgb(var(--theme-palette-primary-bg-strong));
+  }
 }

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

@@ -12,7 +12,7 @@ export default function Chatbot(props: ChatbotProps) {
   const { messages: listMessages, setMessages: setListMessages } = props;
   const [inputMessage, setInputMessage] = useState('');
   const formattedTextStyle = { color: 'rgb(var(--theme-palette-discovery-bg-strong))' };
-  const [loading, setLoading] = useState<boolean>(false)
+  const [loading, setLoading] = useState<boolean>(false);
   const { userCredentials } = useCredentials();
   const { model } = useFileContext();
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -25,18 +25,33 @@ export default function Chatbot(props: ChatbotProps) {
     if (index < responseText.length) {
       const nextIndex = index + 1;
       const currentTypedText = responseText.substring(0, nextIndex);
-
       if (index === 0) {
         const date = new Date();
         const datetime = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
-        setListMessages((msgs) => [
-          ...msgs,
-          { id: Date.now(), user: 'chatbot', message: currentTypedText, datetime: datetime, isTyping: true },
-        ]);
+        if (responseText.length <= 1) {
+          setListMessages((msgs) => [
+            ...msgs,
+            { id: Date.now(), user: 'chatbot', message: currentTypedText, datetime: datetime, isTyping: true },
+          ]);
+        } else {
+          setListMessages((msgs) => {
+            const lastmsg = { ...msgs[msgs.length - 1] };
+            lastmsg.id = Date.now();
+            lastmsg.user = 'chatbot';
+            lastmsg.message = currentTypedText;
+            lastmsg.datetime = datetime;
+            lastmsg.isTyping = true;
+            return msgs.map((msg, index) => {
+              if (index === msgs.length - 1) {
+                return lastmsg;
+              }
+              return msg;
+            });
+          });
+        }
       } else {
         setListMessages((msgs) => msgs.map((msg) => (msg.isTyping ? { ...msg, message: currentTypedText } : msg)));
       }
-
       setTimeout(() => simulateTypingEffect(responseText, nextIndex), 20);
     } else {
       setListMessages((msgs) => msgs.map((msg) => (msg.isTyping ? { ...msg, isTyping: false } : msg)));
@@ -54,17 +69,18 @@ export default function Chatbot(props: ChatbotProps) {
     const userMessage = { id: Date.now(), user: 'user', message: inputMessage, datetime: datetime };
     setListMessages((listMessages) => [...listMessages, userMessage]);
     try {
-      setLoading(true)
+      setLoading(true);
+      setInputMessage('');
+      simulateTypingEffect(' ');
       const chatresponse = await chatBotAPI(userCredentials, model, inputMessage);
       chatbotReply = chatresponse?.data?.message;
-      setInputMessage('');
       simulateTypingEffect(chatbotReply);
-      setLoading(false)
+      setLoading(false);
     } catch (error) {
       chatbotReply = "Oops! It seems we couldn't retrieve the answer. Please try again later";
       setInputMessage('');
       simulateTypingEffect(chatbotReply);
-      setLoading(false)
+      setLoading(false);
     }
   };
 
@@ -81,7 +97,7 @@ export default function Chatbot(props: ChatbotProps) {
       <div className='flex overflow-y-auto pb-12 min-w-full' style={{ scrollbarWidth: 'thin', overflowX: 'hidden' }}>
         <Widget className='n-bg-palette-neutral-bg-weak' header='' isElevated={false}>
           <div className='flex flex-col gap-4 gap-y-4'>
-            {listMessages.map((chat) => (
+            {listMessages.map((chat, index) => (
               <div
                 ref={messagesEndRef}
                 key={chat.id}
@@ -115,10 +131,15 @@ export default function Chatbot(props: ChatbotProps) {
                 <Widget
                   header=''
                   isElevated={true}
-                  className={`p-4 self-start ${chat.user === 'chatbot' ? 'n-bg-palette-neutral-bg-strong' : 'n-bg-palette-primary-bg-weak'
-                    }`}
+                  className={`p-4 self-start ${
+                    chat.user === 'chatbot' ? 'n-bg-palette-neutral-bg-strong' : 'n-bg-palette-primary-bg-weak'
+                  }`}
                 >
-                  <div>
+                  <div
+                    className={`${
+                      loading && index === listMessages.length - 1 && chat.user == 'chatbot' ? 'loader' : ''
+                    }`}
+                  >
                     {chat.message.split(/`(.+?)`/).map((part, index) =>
                       index % 2 === 1 ? (
                         <span key={index} style={formattedTextStyle}>
@@ -147,7 +168,9 @@ 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/Dropdown.tsx

@@ -5,7 +5,7 @@ const LlmDropdown: React.FC<DropdownProps> = ({ onSelect, isDisabled }) => {
   const handleChange = (selectedOption: OptionType | null | void) => {
     onSelect(selectedOption);
   };
-  const allOptions = ['OpenAI GPT 3.5','Diffbot'];
+  const allOptions = ['OpenAI GPT 3.5', 'Diffbot'];
   return (
     <>
       <div style={{ width: '150px' }}>

frontend/src/components/RightSideBar.tsx

@@ -9,7 +9,10 @@ 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}