Merge pull request #156 from neo4j-labs/chat-history-frontend

added session id

Author: prakriti-solankey

frontend/src/components/Chatbot.tsx

@@ -5,22 +5,30 @@ 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 +80,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);

frontend/src/components/Layout/Header.tsx

@@ -35,7 +35,9 @@ export default function Header({ themeMode, toggleTheme }: { themeMode: string;
               className='inline-flex gap-x-1'
               style={{ display: 'flex', flexGrow: 0, alignItems: 'center', gap: '4px' }}
             >
-              <Button href='https://github.com/neo4j-labs/llm-graph-builder/issues' fill='outlined' target='_blank'>Github Issues</Button>
+              <Button href='https://github.com/neo4j-labs/llm-graph-builder/issues' fill='outlined' target='_blank'>
+                Github Issues
+              </Button>
               <IconButton aria-label='Toggle Dark mode' clean size='large' onClick={toggleTheme}>
                 {themeMode === 'dark' ? (
                   <span role='img' aria-label='sun'>

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',