Store user state for chatbot

Author: piyushroshan

services/web/src/components/bot/ActionProvider.jsx

@@ -14,6 +14,8 @@
  */
 
 import { APIService } from "../../constants/APIConstant";
+import { isAccessTokenValid } from "../../utils";
+
 const superagent = require("superagent");
 
 class ActionProvider {
@@ -55,8 +57,8 @@ class ActionProvider {
     }
   };
 
-  handleInitialized = (api_key) => {
-    if (!api_key) {
+  handleInitialized = (apiKey, accessToken) => {
+    if (!apiKey) {
       const message = this.createChatBotMessage(
         "Please enter a valid OpenAI API key.",
         {
@@ -67,14 +69,15 @@ class ActionProvider {
       this.addMessageToState(message);
       return;
     }
-    localStorage.setItem("openapi_key", api_key);
-    this.addOpenApiKeyToState(api_key);
+    localStorage.setItem("openapi_key", apiKey);
+    this.addOpenApiKeyToState(apiKey);
     const initUrl = APIService.CHATBOT_SERVICE + "genai/init";
     superagent
       .post(initUrl)
-      .send({ openai_api_key: api_key })
+      .send({ openai_api_key: apiKey })
       .set("Accept", "application/json")
       .set("Content-Type", "application/json")
+      .set("Authorization", `Bearer ${accessToken}`)
       .end((err, res) => {
         if (err) {
           console.log(err);
@@ -102,13 +105,14 @@ class ActionProvider {
     return;
   };
 
-  handleChat = (message) => {
+  handleChat = (message, accessToken) => {
     const chatUrl = APIService.CHATBOT_SERVICE + "genai/ask";
     superagent
       .post(chatUrl)
       .send({ question: message })
       .set("Accept", "application/json")
       .set("Content-Type", "application/json")
+      .set("Authorization", `Bearer ${accessToken}`)
       .end((err, res) => {
         if (err) {
           console.log(err);

services/web/src/components/bot/Bot.jsx

@@ -20,6 +20,7 @@ import { APIService } from "../../constants/APIConstant";
 import MessageParser from "./MessageParser.jsx";
 import ActionProvider from "./ActionProvider.jsx";
 import Chatbot from "react-chatbot-kit";
+import { connect } from "react-redux";
 import { createChatBotMessage } from "react-chatbot-kit";
 import {
   PageHeader,
@@ -50,14 +51,52 @@ const PandaSvg = () => (
 
 const PandaIcon = (props) => <Icon component={PandaSvg} {...props} />;
 
-const ChatBotComponent = () => {
+const ChatBotComponent = (props) => {
   const [chatbotState, setChatbotState] = useState({
-    messages: [],
     openapiKey: localStorage.getItem("openapi_key"),
     initializing: false,
     initializationRequired: false,
+    accessToken: props.accessToken,
+    isLoggedIn: props.isLoggedIn,
+    role: props.role,
   });
 
+  useEffect(() => {
+    const fetchInit = async () => {
+      const stateUrl = APIService.CHATBOT_SERVICE + "genai/state";
+      let initRequired = false;
+      // Wait for the response
+      await superagent
+        .get(stateUrl)
+        .set("Accept", "application/json")
+        .set("Content-Type", "application/json")
+        .then((res) => {
+          console.log("I response:", res.body);
+          if (res.status === 200) {
+            if (res.body?.initialized === "true") {
+              initRequired = false;
+            } else {
+              initRequired = true;
+            }
+          }
+        })
+        .catch((err) => {
+          console.log("Error prefetch: ", err);
+        });
+      console.log("Initialization required:", initRequired);
+      setChatbotState((prev) => ({
+        ...prev,
+        initializationRequired: initRequired,
+      }));
+    };
+    fetchInit();
+  }, []);
+
+  const config_chatbot = {
+    ...config,
+    state: chatbotState,
+  };
+
   const [showBot, toggleBot] = useState(false);
 
   const saveMessages = (messages, HTMLString) => {
@@ -73,14 +112,15 @@ const ChatBotComponent = () => {
     localStorage.removeItem("chat_messages");
   };
 
+  console.log("Config state", config_chatbot);
   return (
     <Row>
       <Col xs={10}>
         <div className="app-chatbot-container">
           <div style={{ maxWidth: "500px" }}>
             {showBot && (
               <Chatbot
-                config={config}
+                config={config_chatbot}
                 botAvator={
                   <Icon
                     icon={PandaIcon}
@@ -102,7 +142,7 @@ const ChatBotComponent = () => {
                         background: "#0a5e9c",
                         borderRadius: "0px",
                       }}
-                      href="#"
+                      href="##"
                       onClick={() => clearHistory()}
                     >
                       <DeleteOutlined />
@@ -115,7 +155,7 @@ const ChatBotComponent = () => {
                         background: "#0a5e9c",
                         borderRadius: "0px",
                       }}
-                      href="#"
+                      href="##"
                       onClick={() => toggleBot((prev) => !prev)}
                     >
                       <CloseSquareOutlined />

services/web/src/components/bot/MessageParser.jsx

@@ -50,9 +50,9 @@ class MessageParser {
     console.log("State:", this.state);
     console.log("Message:", message);
     const message_l = message.toLowerCase();
-    if (this.state.initializationRequired === undefined) {
+    if (this.state?.initializationRequired === undefined) {
       this.state.initializationRequired = await this.initializationRequired();
-      console.log("State:", this.state);
+      console.log("State check:", this.state);
     }
     if (message_l === "help") {
       this.state.initializationRequired = await this.initializationRequired();
@@ -63,6 +63,7 @@ class MessageParser {
       console.log("State init:", this.state);
       return this.actionProvider.handleInitialize(
         this.state.initializationRequired,
+        this.state.accessToken,
       );
     } else if (
       message_l === "clear" ||
@@ -76,7 +77,7 @@ class MessageParser {
       return this.actionProvider.handleNotInitialized();
     }
 
-    return this.actionProvider.handleChat(message);
+    return this.actionProvider.handleChat(message, this.state.accessToken);
   }
 }
 

services/web/src/components/bot/config.jsx

@@ -25,9 +25,7 @@ const config = {
     ),
   ],
   botName,
-  tate: {
-    optionName: "",
-  },
+  state: {},
   customStyles: {
     botMessageBox: {
       backgroundColor: "#376B7E",

services/web/src/components/layout/layout.js

@@ -329,7 +329,11 @@ const StyledComp = connect(
               }}
             />
           </Switch>
-          <ChatBotComponent />
+          <ChatBotComponent
+            accessToken={props.accessToken}
+            isLoggedIn={props.isLoggedIn}
+            role={props.role}
+          />
         </Content>
       </Layout>
     </Spin>