bibot 1.0.45 → 1.0.51

package/dist/index.js

@@ -3334,15 +3334,25 @@ function _finallyRethrows(body, finalizer) {
 
 var appStateEnums;
 (function (appStateEnums) {
-  appStateEnums["BIBOT"] = "BIBOT";
+  appStateEnums["AI_FOLLOW_UPS"] = "AI_FOLLOW_UPS";
+  appStateEnums["CHAT_BUBBLE_CONFIG"] = "CHAT_BUBBLE_CONFIG";
+  appStateEnums["CHAT_BUBBLE_IS_OPENED"] = "CHAT_BUBBLE_IS_OPENED";
+  appStateEnums["PRE_DEFINED_QUESTIONS"] = "PRE_DEFINED_QUESTIONS";
 })(appStateEnums || (appStateEnums = {}));
 
 var appReducer = function appReducer(state, action) {
-  console.log('This is the appReducer state', state, action);
   switch (action.type) {
-    case appStateEnums.BIBOT:
+    case appStateEnums.PRE_DEFINED_QUESTIONS:
       return _extends({}, state, {
-        chatIsOpen: action.chatIsOpen
+        pQuestions: action.pQuestions
+      });
+    case appStateEnums.CHAT_BUBBLE_CONFIG:
+      return _extends({}, state, {
+        chatBubbleConfig: action.chatBubbleConfig
+      });
+    case appStateEnums.AI_FOLLOW_UPS:
+      return _extends({}, state, {
+        aiFollowUpQs: action.aiFollowUp
       });
     default:
       return state;
@@ -3428,41 +3438,35 @@ var getSessionId = function getSessionId() {
 var dummyDispatch = function dummyDispatch() {};
 var defaultContextValue = {
   state: {
-    chatIsOpen: false,
-    sessionId: getSessionId()
+    aiFollowUpQs: [],
+    sessionId: getSessionId(),
+    chatBubbleConfig: {
+      bgColor: 'grey',
+      color: 'dark',
+      title: 'ChatBot Powered By BiBot',
+      logo_url: 'https://bibot.app/static/media/bibot-high-resolution-logo-black-transparent.cf2e603c743f07663fd7.png'
+    },
+    pQuestions: []
   },
   dispatch: dummyDispatch
 };
 var AppContext = React.createContext(defaultContextValue);
 var AppProvider = function AppProvider(_ref) {
   var children = _ref.children;
-  var APP_STATE_KEY = 'app_states';
   var initialState = {
-    chatIsOpen: false,
-    sessionId: getSessionId()
+    aiFollowUpQs: [],
+    pQuestions: [],
+    sessionId: getSessionId(),
+    chatBubbleConfig: {
+      bgColor: 'grey',
+      color: 'dark',
+      title: 'ChatBot Powered By BiBot',
+      logo_url: 'https://bibot.app/static/media/bibot-high-resolution-logo-black-transparent.cf2e603c743f07663fd7.png'
+    }
   };
   var _useReducer = React.useReducer(appReducer, initialState),
     state = _useReducer[0],
     dispatch = _useReducer[1];
-  React.useEffect(function () {
-    var storedStates = localStorage.getItem(APP_STATE_KEY);
-    if (storedStates) {
-      try {
-        var parsedStates = JSON.parse(storedStates);
-        var updatedStates = _extends({}, initialState, parsedStates);
-        console.log(initialState, parsedStates, updatedStates);
-        dispatch(_extends({
-          type: appStateEnums.BIBOT
-        }, updatedStates));
-      } catch (error) {
-        console.error('Failed to parse app states from local storage:', error);
-      }
-    }
-  }, []);
-  React.useEffect(function () {
-    console.log('Changes in state: ', state);
-    localStorage.setItem(APP_STATE_KEY, JSON.stringify(state));
-  }, [state]);
   return React__default.createElement(AppContext.Provider, {
     value: {
       state: state,
@@ -3506,7 +3510,6 @@ var getRemoteClientChatPredefinedQuestions = function getRemoteClientChatPredefi
     return Promise.resolve(pluginAxiosInstance.get(path, {
       params: params
     })).then(function (response) {
-      console.log(response.data.predefined_questions);
       return response.data.predefined_questions;
     });
   }, function () {
@@ -3524,10 +3527,10 @@ var getRemoteClientChatBubbleConfig = function getRemoteClientChatBubbleConfig(p
       });
     }, function () {
       return {
-        bgColor: 'white',
-        chatColor: 'blue',
-        title: 'ChatBot',
-        userImage: 'string'
+        bgColor: 'grey',
+        color: 'dark',
+        title: 'ChatBot Powered By BiBot',
+        logo_url: 'https://bibot.app/static/media/bibot-high-resolution-logo-black-transparent.cf2e603c743f07663fd7.png'
       };
     }));
   } catch (e) {
@@ -3539,7 +3542,9 @@ var handleRetries = function handleRetries(pluginAxiosInstance, data, attempt) {
     var maxAttempts = 30;
     var delay = 10000;
     if (attempt >= maxAttempts) {
-      return Promise.resolve("Sorry this is taking longer than usual. Please try again later");
+      return Promise.resolve({
+        message: "Sorry this is taking longer than usual. Please try again later"
+      });
     }
     return Promise.resolve(new Promise(function (resolve) {
       return setTimeout(resolve, delay);
@@ -3547,15 +3552,17 @@ var handleRetries = function handleRetries(pluginAxiosInstance, data, attempt) {
       return _catch(function () {
         return Promise.resolve(askTimedOutBiBot(pluginAxiosInstance, _extends({}, data, {
           tries: attempt + 1
-        }))).then(function (message) {
-          if (message === defaultSlacker) {
+        }))).then(function (res) {
+          if (res.message === defaultSlacker) {
             return Promise.resolve(handleRetries(pluginAxiosInstance, data, attempt + 1));
           } else {
-            return message;
+            return res;
           }
         });
       }, function (error) {
-        return error.message;
+        return {
+          message: error.message
+        };
       });
     });
   } catch (e) {
@@ -3570,12 +3577,10 @@ var askBiBot = function askBiBot(pluginAxiosInstance, data) {
         if (response.data.message === defaultSlacker) {
           return Promise.resolve(handleRetries(pluginAxiosInstance, data, 1));
         } else {
-          return response.data.message;
+          return response.data;
         }
       });
     }, function (error1) {
-      console.log('This is the error1 from the endpoint on the 1st try:', error1);
-      console.log(error1.message);
       return error1.message;
     }));
   } catch (e) {
@@ -3586,13 +3591,10 @@ var recordPredefinedQ = function recordPredefinedQ(pluginAxiosInstance, data) {
   try {
     return Promise.resolve(_catch(function () {
       var path = "" + domain.inference + resources.predefinedQstatistics;
-      console.log(data, 'here');
       return Promise.resolve(pluginAxiosInstance.post(path, data)).then(function (response) {
-        console.log(response, 'here is the res');
         return response.data;
       });
     }, function (error) {
-      console.log(error.message);
       return error.message;
     }));
   } catch (e) {
@@ -3604,12 +3606,12 @@ var askTimedOutBiBot = function askTimedOutBiBot(pluginAxiosInstance, data) {
     return Promise.resolve(_catch(function () {
       var path = "" + domain.inference + resources.timeoutQ;
       return Promise.resolve(pluginAxiosInstance.post(path, data)).then(function (response) {
-        console.log(response);
-        return response.data.message;
+        return response.data;
       });
     }, function (error) {
-      console.log(error.message);
-      return error.message;
+      return {
+        message: error.message
+      };
     }));
   } catch (e) {
     return Promise.reject(e);
@@ -3617,7 +3619,7 @@ var askTimedOutBiBot = function askTimedOutBiBot(pluginAxiosInstance, data) {
 };
 var defaultSlacker = "BiBot_Retry_Later";
 
-var useBiBotChatBot = function useBiBotChatBot(_ref) {
+var useBiBotChatBot = function useBiBotChatBot(bibotProps) {
   var sendInputInquiry = function sendInputInquiry() {
     try {
       setIsLoading(true);
@@ -3634,18 +3636,24 @@ var useBiBotChatBot = function useBiBotChatBot(_ref) {
                 }]);
               });
               return Promise.resolve(askBiBot(pluginAxiosInstance, {
-                client_id: clientId,
+                client_id: bibotProps.clientId,
                 q: input,
-                session_id: client_session_id ? client_session_id : state.sessionId,
+                session_id: bibotProps.client_session_id ? bibotProps.client_session_id : state.sessionId,
                 chat_id: v4(),
                 chat_history: messages
               })).then(function (response) {
                 setMessages(function (messages) {
                   return [].concat(messages, [{
                     sender: 'bot',
-                    text: response
+                    text: response.message
                   }]);
                 });
+                if (response.aiFollowUp) {
+                  dispatch({
+                    type: appStateEnums.AI_FOLLOW_UPS,
+                    aiFollowUp: response.aiFollowUp
+                  });
+                }
               });
             }
           }();
@@ -3663,106 +3671,73 @@ var useBiBotChatBot = function useBiBotChatBot(_ref) {
       return Promise.reject(e);
     }
   };
-  var askPredefinedQuestion = function askPredefinedQuestion(question, client_id) {
+  var askPredefinedQuestion = function askPredefinedQuestion(question) {
     try {
       setIsLoading(true);
       var input = question.question.trim();
-      recordPredefinedQ(pluginAxiosInstance, {
-        "client_id": clientId,
+      return Promise.resolve(recordPredefinedQ(pluginAxiosInstance, {
+        "client_id": bibotProps.clientId,
         "question": question.question,
         "q_n_a_id": question.q_n_a_id
-      });
-      console.log(question.question, client_id, question.q_n_a_id);
-      setUserInput('');
-      if (input === question.question) {
-        setMessages(function (messages) {
-          return [].concat(messages, [{
-            sender: 'user',
-            text: input
-          }]);
-        });
-        setTimeout(function () {
+      })).then(function (response) {
+        setUserInput('');
+        if (input === question.question) {
+          setMessages(function (messages) {
+            return [].concat(messages, [{
+              sender: 'user',
+              text: input
+            }]);
+          });
           setMessages(function (messages) {
             return [].concat(messages, [{
               sender: 'bot',
-              text: question.answer
+              text: response.message ? response.message : question.answer
             }]);
           });
+          if (response.aiFollowUp) {
+            dispatch({
+              type: appStateEnums.AI_FOLLOW_UPS,
+              aiFollowUp: response.aiFollowUp
+            });
+          }
           setIsLoading(false);
-        }, 1000);
-      }
-      return Promise.resolve();
+        }
+      });
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  var clientId = _ref.clientId,
-    client_session_id = _ref.client_session_id,
-    test = _ref.test;
-  var baseURL = test ? endpoints.getInferenceURL(true) : endpoints.getInferenceURL(false);
-  var pluginAxiosInstance = createPluginAxiosInstance(baseURL);
-  var _useState = React.useState([]),
-    predefinedQuestions = _useState[0],
-    setPredefinedQuestions = _useState[1];
-  var _useState2 = React.useState(true),
-    showPredefinedQuestions = _useState2[0],
-    setShowPredefinedQuestions = _useState2[1];
   var _useContext = React.useContext(AppContext),
-    state = _useContext.state;
-  var _useState3 = React.useState(false),
-    chatIsOpen = _useState3[0],
-    setChatIsOpen = _useState3[1];
-  var _useState4 = React.useState([]),
-    messages = _useState4[0],
-    setMessages = _useState4[1];
-  var _useState5 = React.useState(''),
-    userInput = _useState5[0],
-    setUserInput = _useState5[1];
-  var _useState6 = React.useState(false),
-    isLoading = _useState6[0],
-    setIsLoading = _useState6[1];
+    state = _useContext.state,
+    dispatch = _useContext.dispatch;
+  console.log('This is the value of test and bibotProps', bibotProps.test, bibotProps);
+  var baseURL = bibotProps !== null && bibotProps !== void 0 && bibotProps.test ? endpoints.getInferenceURL(bibotProps === null || bibotProps === void 0 ? void 0 : bibotProps.test) : endpoints.getInferenceURL(false);
+  var pluginAxiosInstance = createPluginAxiosInstance(baseURL, {}, {
+    Authorization: bibotProps.jwt
+  });
+  var _useState = React.useState(true),
+    showPredefinedQuestions = _useState[0],
+    setShowPredefinedQuestions = _useState[1];
+  var _useState2 = React.useState(false),
+    chatIsOpen = _useState2[0],
+    setChatIsOpen = _useState2[1];
+  var _useState3 = React.useState([]),
+    messages = _useState3[0],
+    setMessages = _useState3[1];
+  var _useState4 = React.useState(''),
+    userInput = _useState4[0],
+    setUserInput = _useState4[1];
+  var _useState5 = React.useState(false),
+    isLoading = _useState5[0],
+    setIsLoading = _useState5[1];
   var messageEndRef = React.useRef(null);
-  var _useState7 = React.useState(),
-    chatBubbleConfig = _useState7[0],
-    setChatBubbleConfig = _useState7[1];
   var handlePredefinedQuestionSelect = function handlePredefinedQuestionSelect(question) {
     sendInputInquiry();
-    askPredefinedQuestion(question, clientId);
+    askPredefinedQuestion(question);
     setUserInput('');
     setShowPredefinedQuestions(false);
   };
-  var getChatBubbleConfig = React.useCallback(function () {
-    try {
-      return Promise.resolve(getRemoteClientChatPredefinedQuestions(pluginAxiosInstance, {
-        client_id: clientId
-      })).then(function (remotePredefinedQuestions) {
-        if (remotePredefinedQuestions) {
-          setPredefinedQuestions(remotePredefinedQuestions);
-        }
-        return Promise.resolve(getRemoteClientChatBubbleConfig(pluginAxiosInstance, {
-          client_id: clientId
-        })).then(function (remoteChatBubbleConfig) {
-          if (remoteChatBubbleConfig) {
-            setChatBubbleConfig(remoteChatBubbleConfig);
-          }
-        });
-      });
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  }, [clientId]);
-  React.useEffect(function () {
-    void getChatBubbleConfig();
-  }, [getChatBubbleConfig]);
-  React.useEffect(function () {
-    if (messageEndRef !== null && messageEndRef !== void 0 && messageEndRef.current) {
-      messageEndRef.current.scrollIntoView({
-        behavior: 'smooth'
-      });
-    }
-  }, [messages]);
   var toggleChat = function toggleChat() {
-    console.log('This is it', chatIsOpen);
     setChatIsOpen(!chatIsOpen);
   };
   var handleUserInput = function handleUserInput(e) {
@@ -3780,6 +3755,37 @@ var useBiBotChatBot = function useBiBotChatBot(_ref) {
       return Promise.reject(e);
     }
   };
+  React.useEffect(function () {
+    getRemoteClientChatBubbleConfig(pluginAxiosInstance, {
+      client_id: bibotProps.clientId
+    }).then(function (remoteChatBubbleConfig) {
+      if (remoteChatBubbleConfig) {
+        dispatch({
+          type: appStateEnums.CHAT_BUBBLE_CONFIG,
+          chatBubbleConfig: remoteChatBubbleConfig
+        });
+      }
+    });
+  }, [bibotProps.clientId]);
+  React.useEffect(function () {
+    getRemoteClientChatPredefinedQuestions(pluginAxiosInstance, {
+      client_id: bibotProps.clientId
+    }).then(function (remotePredefinedQuestions) {
+      if (remotePredefinedQuestions) {
+        dispatch({
+          type: appStateEnums.PRE_DEFINED_QUESTIONS,
+          pQuestions: remotePredefinedQuestions
+        });
+      }
+    });
+  }, [bibotProps.clientId]);
+  React.useEffect(function () {
+    if (messageEndRef !== null && messageEndRef !== void 0 && messageEndRef.current) {
+      messageEndRef.current.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }, [messages]);
   return {
     chatIsOpen: chatIsOpen,
     messages: messages,
@@ -3790,9 +3796,10 @@ var useBiBotChatBot = function useBiBotChatBot(_ref) {
     handleKeyPress: handleKeyPress,
     toggleChat: toggleChat,
     sendInputInquiry: sendInputInquiry,
-    chatBubbleConfig: chatBubbleConfig,
+    chatBubbleConfig: state.chatBubbleConfig,
     showPredefinedQuestions: showPredefinedQuestions,
-    predefinedQuestions: predefinedQuestions,
+    predefinedQuestions: state.pQuestions,
+    aiFollowUpQs: state.aiFollowUpQs,
     handlePredefinedQuestionSelect: handlePredefinedQuestionSelect
   };
 };
@@ -3807,11 +3814,11 @@ function SendMessageIcon(_ref) {
     width: '24',
     height: '24',
     viewBox: '0 0 24 24',
-    "stroke-width": '1.5',
+    strokeWidth: '1.5',
     stroke: color,
     fill: 'none',
-    "stroke-linecap": 'round',
-    "stroke-linejoin": 'round'
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
   }, React__default.createElement("path", {
     stroke: 'none',
     d: 'M0 0h24v24H0z',
@@ -3829,11 +3836,11 @@ function DefaultBotProfile() {
     width: '24',
     height: '24',
     viewBox: '0 0 24 24',
-    "stroke-width": '1.5',
+    strokeWidth: '1.5',
     stroke: '#fff',
     fill: 'none',
-    "stroke-linecap": 'round',
-    "stroke-linejoin": 'round'
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
   }, React__default.createElement("path", {
     stroke: 'none',
     d: 'M0 0h24v24H0z',
@@ -3859,11 +3866,11 @@ function ChatIcon() {
     width: '40',
     height: '40',
     viewBox: '0 0 24 24',
-    "stroke-width": '1.5',
+    strokeWidth: '1.5',
     stroke: '#fff',
     fill: 'none',
-    "stroke-linecap": 'round',
-    "stroke-linejoin": 'round'
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
   }, React__default.createElement("path", {
     stroke: 'none',
     d: 'M0 0h24v24H0z',
@@ -3885,11 +3892,11 @@ function CloseIcon() {
     width: "40",
     height: "40",
     viewBox: "0 0 24 24",
-    "stroke-width": "1.5",
+    strokeWidth: "1.5",
     stroke: "#fff",
     fill: "none",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   }, React__default.createElement("path", {
     stroke: "none",
     d: "M0 0h24v24H0z",
@@ -4088,13 +4095,7 @@ var Loader = function Loader() {
 var PredefinedQuestions = function PredefinedQuestions(_ref) {
   var questions = _ref.questions,
     onSelect = _ref.onSelect,
-    clientId = _ref.clientId,
-    test = _ref.test;
-  var _useBiBotChatBot = useBiBotChatBot({
-      clientId: clientId,
-      test: test
-    }),
-    chatBubbleConfig = _useBiBotChatBot.chatBubbleConfig;
+    chatBubbleConfig = _ref.chatBubbleConfig;
   return React.createElement("div", {
     style: {
       height: '100%',
@@ -4121,7 +4122,7 @@ var PredefinedQuestions = function PredefinedQuestions(_ref) {
     style: {
       marginBlock: '0.5px'
     }
-  }, "Welcome!"), React.createElement("p", {
+  }, chatBubbleConfig !== null && chatBubbleConfig !== void 0 && chatBubbleConfig.knownUser ? "Hello " + chatBubbleConfig.knownUser : 'Welcome!'), React.createElement("p", {
     style: {
       fontSize: '14px'
     }
@@ -4145,31 +4146,58 @@ var PredefinedQuestions = function PredefinedQuestions(_ref) {
     }, question.question);
   }));
 };
-var ChatBubbleBiBot = function ChatBubbleBiBot(_ref2) {
-  var _chatBubbleConfig$col2, _chatBubbleConfig$col3;
-  var clientId = _ref2.clientId,
-    client_session_id = _ref2.client_session_id,
-    redirect_notice = _ref2.redirect_notice,
-    test = _ref2.test;
-  var _useBiBotChatBot2 = useBiBotChatBot({
-      clientId: clientId,
-      client_session_id: client_session_id,
-      redirect_notice: redirect_notice,
-      test: test
-    }),
-    chatIsOpen = _useBiBotChatBot2.chatIsOpen,
-    messages = _useBiBotChatBot2.messages,
-    isLoading = _useBiBotChatBot2.isLoading,
-    messageEndRef = _useBiBotChatBot2.messageEndRef,
-    userInput = _useBiBotChatBot2.userInput,
-    handleUserInput = _useBiBotChatBot2.handleUserInput,
-    handleKeyPress = _useBiBotChatBot2.handleKeyPress,
-    sendInputInquiry = _useBiBotChatBot2.sendInputInquiry,
-    toggleChat = _useBiBotChatBot2.toggleChat,
-    chatBubbleConfig = _useBiBotChatBot2.chatBubbleConfig,
-    showPredefinedQuestions = _useBiBotChatBot2.showPredefinedQuestions,
-    predefinedQuestions = _useBiBotChatBot2.predefinedQuestions,
-    handlePredefinedQuestionSelect = _useBiBotChatBot2.handlePredefinedQuestionSelect;
+
+var AiFollowUps = function AiFollowUps(_ref) {
+  var questions = _ref.questions,
+    onSelect = _ref.onSelect,
+    chatBubbleConfig = _ref.chatBubbleConfig;
+  return React.createElement("div", {
+    style: {
+      height: '100%',
+      color: '#000',
+      backgroundColor: '#fff',
+      padding: 10,
+      borderRadius: '6px',
+      marginBottom: '20px'
+    }
+  }, questions.map(function (question, index) {
+    var _chatBubbleConfig$col;
+    return React.createElement("div", {
+      key: index,
+      style: {
+        backgroundColor: 'transparent',
+        border: "0.5px solid " + (chatBubbleConfig ? (_chatBubbleConfig$col = chatBubbleConfig === null || chatBubbleConfig === void 0 ? void 0 : chatBubbleConfig.color) != null ? _chatBubbleConfig$col : '#dedede' : '#000'),
+        fontSize: '16px',
+        margin: '7px',
+        textAlign: 'start',
+        padding: '10px',
+        borderRadius: '6px',
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        onSelect(question);
+      }
+    }, question.question);
+  }));
+};
+
+var ChatBubbleBiBot = function ChatBubbleBiBot(bibotProps) {
+  var _chatBubbleConfig$col, _chatBubbleConfig$col2;
+  var _useBiBotChatBot = useBiBotChatBot(bibotProps),
+    chatIsOpen = _useBiBotChatBot.chatIsOpen,
+    messages = _useBiBotChatBot.messages,
+    isLoading = _useBiBotChatBot.isLoading,
+    messageEndRef = _useBiBotChatBot.messageEndRef,
+    userInput = _useBiBotChatBot.userInput,
+    handleUserInput = _useBiBotChatBot.handleUserInput,
+    handleKeyPress = _useBiBotChatBot.handleKeyPress,
+    sendInputInquiry = _useBiBotChatBot.sendInputInquiry,
+    toggleChat = _useBiBotChatBot.toggleChat,
+    chatBubbleConfig = _useBiBotChatBot.chatBubbleConfig,
+    showPredefinedQuestions = _useBiBotChatBot.showPredefinedQuestions,
+    predefinedQuestions = _useBiBotChatBot.predefinedQuestions,
+    aiFollowUpQs = _useBiBotChatBot.aiFollowUpQs,
+    handlePredefinedQuestionSelect = _useBiBotChatBot.handlePredefinedQuestionSelect;
   var isOnline = useOnlineStatus();
   return React.createElement("div", {
     className: "chat-bubble " + (chatIsOpen ? 'open' : ''),
@@ -4197,7 +4225,7 @@ var ChatBubbleBiBot = function ChatBubbleBiBot(_ref2) {
   }, React.createElement("div", {
     className: styles['chat-header'],
     style: {
-      backgroundColor: (_chatBubbleConfig$col2 = chatBubbleConfig === null || chatBubbleConfig === void 0 ? void 0 : chatBubbleConfig.color) != null ? _chatBubbleConfig$col2 : '#dedede',
+      backgroundColor: (_chatBubbleConfig$col = chatBubbleConfig === null || chatBubbleConfig === void 0 ? void 0 : chatBubbleConfig.color) != null ? _chatBubbleConfig$col : '#dedede',
       height: 50,
       borderTopLeftRadius: 8,
       borderTopRightRadius: 8,
@@ -4257,7 +4285,7 @@ var ChatBubbleBiBot = function ChatBubbleBiBot(_ref2) {
   }, showPredefinedQuestions && predefinedQuestions && predefinedQuestions.length > 0 && React.createElement(PredefinedQuestions, {
     questions: predefinedQuestions.slice(0, 3),
     onSelect: handlePredefinedQuestionSelect,
-    clientId: clientId
+    chatBubbleConfig: chatBubbleConfig
   }), messages.map(function (message, index) {
     return message.sender === 'user' ? React.createElement("div", {
       key: index,
@@ -4297,6 +4325,10 @@ var ChatBubbleBiBot = function ChatBubbleBiBot(_ref2) {
         textAlign: 'left'
       }
     }, message.text));
+  }), aiFollowUpQs && !isLoading && React.createElement(AiFollowUps, {
+    questions: aiFollowUpQs,
+    onSelect: handlePredefinedQuestionSelect,
+    chatBubbleConfig: chatBubbleConfig
   }), isLoading && React.createElement("div", {
     style: {
       marginLeft: '20px'
@@ -4348,7 +4380,7 @@ var ChatBubbleBiBot = function ChatBubbleBiBot(_ref2) {
     onClick: toggleChat,
     className: styles['chat-toggle'],
     style: {
-      backgroundColor: (_chatBubbleConfig$col3 = chatBubbleConfig === null || chatBubbleConfig === void 0 ? void 0 : chatBubbleConfig.color) != null ? _chatBubbleConfig$col3 : '#dedede',
+      backgroundColor: (_chatBubbleConfig$col2 = chatBubbleConfig === null || chatBubbleConfig === void 0 ? void 0 : chatBubbleConfig.color) != null ? _chatBubbleConfig$col2 : '#dedede',
       color: '#fff',
       borderRadius: '50%',
       cursor: 'pointer',
@@ -4362,16 +4394,13 @@ var ChatBubbleBiBot = function ChatBubbleBiBot(_ref2) {
   }, chatIsOpen ? React.createElement(CloseIcon, null) : React.createElement(ChatIcon, null)));
 };
 
-var BiBot = function BiBot(_ref) {
-  var clientId = _ref.clientId,
-    client_session_id = _ref.client_session_id,
-    redirect_notice = _ref.redirect_notice,
-    test = _ref.test;
+var BiBot = function BiBot(bibotProps) {
   return React.createElement(AppProvider, null, React.createElement(ChatBubbleBiBot, {
-    clientId: clientId,
-    client_session_id: client_session_id,
-    redirect_notice: redirect_notice,
-    test: test
+    jwt: bibotProps.jwt,
+    clientId: bibotProps.clientId,
+    client_session_id: bibotProps.client_session_id,
+    redirect_notice: bibotProps.redirect_notice,
+    test: bibotProps.test
   }));
 };