added session id

Author: kartikpersistent

frontend/src/components/Chatbot.tsx

@@ -5,22 +5,31 @@ 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';
+import { v4 as uuidv4 } from 'uuid';
+
 
 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 { userCredentials } = useCredentials();
-  const { model } = useFileContext();
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const [sessionId, setSessionId] = useState<string>(sessionStorage.getItem("session_id") ?? "")
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputMessage(e.target.value);
   };
 
+  useEffect(() => {
+    if (!sessionStorage.getItem("session_id")) {
+      const id = uuidv4();
+      setSessionId(id);
+      sessionStorage.setItem("session_id", id);
+    }
+  }, [])
+
   const simulateTypingEffect = (responseText: string, index = 0) => {
     if (index < responseText.length) {
       const nextIndex = index + 1;
@@ -72,7 +81,7 @@ export default function Chatbot(props: ChatbotProps) {
       setLoading(true);
       setInputMessage('');
       simulateTypingEffect(' ');
-      const chatresponse = await chatBotAPI(userCredentials, model, inputMessage);
+      const chatresponse = await chatBotAPI(userCredentials, inputMessage, sessionId);
       chatbotReply = chatresponse?.data?.message;
       simulateTypingEffect(chatbotReply);
       setLoading(false);
@@ -131,14 +140,12 @@ 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
-                    className={`${
-                      loading && index === listMessages.length - 1 && chat.user == 'chatbot' ? 'loader' : ''
-                    }`}
+                    className={`${loading && index === listMessages.length - 1 && chat.user == 'chatbot' ? 'loader' : ''
+                      }`}
                   >
                     {chat.message.split(/`(.+?)`/).map((part, index) =>
                       index % 2 === 1 ? (

frontend/src/services/QnaAPI.ts

@@ -1,15 +1,15 @@
 import axios from 'axios';
 import { url } from '../utils/Utils';
 
-const chatBotAPI = async (userCredentials: any, model: string, question: string) => {
+const chatBotAPI = async (userCredentials: any, question: string, session_id: 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);
+    formData.append("session_id", session_id)
     const response: any = await axios.post(`${url()}/chat_bot`, formData, {
       headers: {
         'Content-Type': 'multipart/form-data',