Merge branch 'DEV' into wikipedia-as-new-source-type-frontend

Author: kartikpersistent

backend/score.py

@@ -177,6 +177,14 @@ async def chat_bot(uri=Form(None),
     result = await asyncio.to_thread(QA_RAG,uri=uri,userName=userName,password=password,model_version=model,question=question)
     return result
 
+@app.post("/connect")
+async def connect(uri=Form(None),
+                          userName=Form(None),
+                          password=Form(None),
+                          database=Form(None)):
+    result = await asyncio.to_thread(connection_check,uri,userName,password,database)
+    return result
+
 def decode_password(pwd):
     sample_string_bytes = base64.b64decode(pwd)
     decoded_password = sample_string_bytes.decode("utf-8")

backend/src/main.py

@@ -552,6 +552,27 @@ def update_graph(uri,userName,password,db_name):
     error_message = str(e)
     logging.exception(f'Exception in update KNN graph:{error_message}')
     raise Exception(error_message)
+  
+def connection_check(uri,userName,password,db_name):
+  """
+  Args:
+    uri: URI of the graph to extract
+    userName: Username to use for graph creation ( if None will use username from config file )
+    password: Password to use for graph creation ( if None will use password from config file )
+    db_name: db_name is database name to connect to graph db
+  Returns:
+   Returns a status of connection from NEO4j is success or failure
+ """
+  try:
+    graph = Neo4jGraph(url=uri, database=db_name, username=userName, password=password)
+    if graph:
+      return create_api_response("Success",message="Connection Successful")
+  except Exception as e:
+    job_status = "Failed"
+    message="Connection Failed"
+    error_message = str(e)
+    logging.exception(f'Exception:{error_message}')
+    return create_api_response(job_status,message=message,error=error_message)
 
 def create_api_response(status,success_count=None,Failed_count=None, data=None, error=None,message=None,file_source=None,file_name=None):
   """

frontend/src/App.css

@@ -121,4 +121,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

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

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}