added the API

Author: kartikpersistent

frontend/package.json

@@ -14,9 +14,9 @@
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.10",
     "@mui/styled-engine": "^5.15.9",
-    "@neo4j-ndl/base": "^2.3.0",
-    "@neo4j-ndl/react": "^2.3.0",
     "@types/uuid": "^9.0.7",
+    "@neo4j-ndl/base": "^2.6.0",
+    "@neo4j-ndl/react": "^2.6.2",
     "axios": "^1.6.5",
     "eslint-plugin-react": "^7.33.2",
     "neo4j-driver": "^5.14.0",

frontend/src/components/Chatbot.tsx

@@ -4,14 +4,18 @@ import { Button, Widget, Typography, Avatar, TextInput } from '@neo4j-ndl/react'
 import ChatBotUserAvatar from '../assets/images/chatbot-user.png'
 import ChatBotAvatar from '../assets/images/chatbot-ai.png';
 import { ChatbotProps } from '../types';
+import { useCredentials } from '../context/UserCredentials';
+import { useFileContext } from '../context/UsersFiles';
+import chatBotAPI from '../services/QnaAPI';
 
 
 
 export default function Chatbot(props: ChatbotProps) {
-    const { messages:listMessages,setMessages:setListMessages } = props;
+    const { messages: listMessages, setMessages: setListMessages } = props;
     const [inputMessage, setInputMessage] = useState('');
     const formattedTextStyle = { color: 'rgb(var(--theme-palette-discovery-bg-strong))' };
-
+    const { userCredentials } = useCredentials();
+    const { model } = useFileContext()
     const messagesEndRef = useRef<HTMLDivElement>(null);
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -40,17 +44,18 @@ export default function Chatbot(props: ChatbotProps) {
         }
     };
 
-    const handleSubmit = (e: { preventDefault: () => void }) => {
+    const handleSubmit = async (e: { preventDefault: () => void }) => {
         e.preventDefault();
         if (!inputMessage.trim()) {
             return;
         }
         const date = new Date();
         const datetime = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
         const userMessage = { id: 999, user: 'user', message: inputMessage, datetime: datetime };
+        const chatresponse = await chatBotAPI(userCredentials, model, inputMessage)
+        console.log(chatresponse)
         setListMessages((listMessages) => [...listMessages, userMessage]);
         setInputMessage('');
-
         const chatbotReply = 'Hello Sir, how can I help you today?'; // Replace with getting a response from your chatbot through your APIs
         simulateTypingEffect(chatbotReply);
     };
@@ -65,7 +70,7 @@ export default function Chatbot(props: ChatbotProps) {
 
     return (
         <div className='n-bg-palette-neutral-bg-weak flex flex-col justify-between min-h-full max-h-full overflow-hidden w-[312px]'>
-            <div className='flex overflow-y-auto pb-12 min-w-full' style={{scrollbarWidth:"thin",overflowX:"hidden"}}>
+            <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) => (

frontend/src/services/QnaAPI.ts

@@ -0,0 +1,24 @@
+import axios from "axios";
+import { url } from "../utils/Utils";
+
+const chatBotAPI = async (userCredentials: any, model: string, question: string) => {
+    try {
+        const formData = new FormData();
+        formData.append('uri', userCredentials?.uri ?? '');
+        formData.append('database', userCredentials?.database ?? '');
+        formData.append('userName', userCredentials?.userName ?? '');
+        formData.append('password', userCredentials?.password ?? '');
+        formData.append('model', model)
+        formData.append('question', question)
+        const response: any = await axios.post(`${url()}/chat_bot`, formData, {
+            headers: {
+                'Content-Type': 'multipart/form-data',
+            },
+        });
+        return response;
+    } catch (error) {
+        console.log('Error Posting the Question:', error);
+        throw error;
+    }
+};
+export default chatBotAPI;

frontend/yarn.lock

@@ -927,20 +927,20 @@
     "@babel/runtime" "^7.20.13"
     "@neo4j-cypher/codemirror" "1.0.2"
 
-"@neo4j-ndl/base@^2.3.0", "@neo4j-ndl/base@^2.7.6":
-  version "2.7.6"
-  resolved "https://registry.yarnpkg.com/@neo4j-ndl/base/-/base-2.7.6.tgz#a950cd204e9719c02406bb0493973c0204e341ec"
-  integrity sha512-fbKMS4ArYg8plru45IhDdAwIh9JJhp7qRxUYw7xku/X/Ind2+CQQgCnn2dubNvjWr4zYf/vpbb343FlFmWnd/g==
+"@neo4j-ndl/base@^2.6.0", "@neo4j-ndl/base@^2.7.7":
+  version "2.7.7"
+  resolved "https://registry.yarnpkg.com/@neo4j-ndl/base/-/base-2.7.7.tgz#7fdbb46cecb59873a032b1f06737b38dd8fc9794"
+  integrity sha512-r8h08IEy5GzX1oWdgiUkmQr15Z+79Isg4TLHf3DzvBsMI4WubDyzSWUC4Tlj0r5nl6uybH9vr3Go519dUS7i6w==
 
-"@neo4j-ndl/react@^2.3.0":
-  version "2.8.9"
-  resolved "https://registry.yarnpkg.com/@neo4j-ndl/react/-/react-2.8.9.tgz#4e9bdb88b9b31d4a6eadb0d666347b18f7da3ea1"
-  integrity sha512-KDLbSvRoW0LQhMijkCRRsfGcUfT43gV1mWWKpfCyaksFgXo3AFMEkrJrDpjUdzIBSlOMfXw9FGf7oRCsWO9qmA==
+"@neo4j-ndl/react@^2.6.2":
+  version "2.8.10"
+  resolved "https://registry.yarnpkg.com/@neo4j-ndl/react/-/react-2.8.10.tgz#3441292fa7b392caf8b8bd3e9147e7211133ee71"
+  integrity sha512-u51rWnPJnzYnL751mF8UI/VLqbHWjT0hQL47HSV2EOrxj2KiRkxn3UmKYiAhxN3iVRxpYYvSDjY8OIbAhxmCkQ==
   dependencies:
     "@floating-ui/react" "0.25.1"
     "@heroicons/react" "2.0.13"
     "@neo4j-cypher/react-codemirror" "^1.0.1"
-    "@neo4j-ndl/base" "^2.7.6"
+    "@neo4j-ndl/base" "^2.7.7"
     "@table-nav/core" "0.0.7"
     "@table-nav/react" "0.0.7"
     "@tanstack/react-table" "^8.9.3"