bibot 1.0.7 → 1.0.10

package/dist/index.js

@@ -1,9 +1,649 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _bibot = _interopRequireDefault(require("./component/bibot"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var _default = exports["default"] = _bibot["default"];
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+var core = require('@mantine/core');
+var iconsMaterial = require('@mui/icons-material');
+var ChatIcon = _interopDefault(require('@mui/icons-material/Chat'));
+var antd = require('antd');
+var axios = _interopDefault(require('axios'));
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+var baseUrls = {
+  inference: 'https://inference.dev.bibot.thespuka.com/v0'
+};
+var endpoints = {
+  get inference() {
+    return baseUrls.inference;
+  }
+};
+var domain;
+(function (domain) {
+  domain["app"] = "/app";
+  domain["bibot"] = "/bibot";
+  domain["inference"] = "/inference";
+})(domain || (domain = {}));
+var resources;
+(function (resources) {
+  resources["chatBubble"] = "/chat-bubble-config";
+  resources["predefinedQ"] = "/predefined-q";
+  resources["localQ"] = "/local-q";
+  resources["timedOutLocalQ"] = "/t-local-q";
+  resources["q"] = "/q";
+})(resources || (resources = {}));
+
+var inferenceBaseURL = endpoints.inference;
+var createPluginAxiosInstance = function createPluginAxiosInstance(params, headers) {
+  if (params === void 0) {
+    params = {};
+  }
+  if (headers === void 0) {
+    headers = {};
+  }
+  var instance = axios.create(_extends({
+    baseURL: inferenceBaseURL,
+    timeout: 60000,
+    headers: _extends({
+      'Content-Type': 'application/json'
+    }, headers)
+  }, params));
+  instance.interceptors.response.use(function (response) {
+    return response;
+  }, function (error) {
+    try {
+      var errMsg = 'An unknown error occurred';
+      if (error.response) {
+        errMsg = error.response.data.message;
+      } else if (error.request) {
+        errMsg = 'No response received from the server.';
+      } else {
+        errMsg = "Error setting up the request: " + error.message;
+      }
+      return Promise.resolve(Promise.reject(new Error(errMsg)));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  });
+  return instance;
+};
+
+// A type of promise-like that resolves synchronously and supports only one observer
+
+const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
+
+const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
+
+// Asynchronously call a function and send errors to recovery continuation
+function _catch(body, recover) {
+	try {
+		var result = body();
+	} catch(e) {
+		return recover(e);
+	}
+	if (result && result.then) {
+		return result.then(void 0, recover);
+	}
+	return result;
+}
+
+// Asynchronously await a promise and pass the result to a finally continuation
+function _finallyRethrows(body, finalizer) {
+	try {
+		var result = body();
+	} catch (e) {
+		return finalizer(true, e);
+	}
+	if (result && result.then) {
+		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+	}
+	return finalizer(false, result);
+}
+
+var appStateEnums;
+(function (appStateEnums) {
+  appStateEnums["BIBOT"] = "BIBOT";
+})(appStateEnums || (appStateEnums = {}));
+
+var appReducer = function appReducer(state, action) {
+  console.log('This is the appReducer state', state, action);
+  switch (action.type) {
+    case appStateEnums.BIBOT:
+      return _extends({}, state, {
+        chatIsOpen: action.chatIsOpen
+      });
+    default:
+      return state;
+  }
+};
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+}
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return unsafeStringify(rnds);
+}
+
+var SESSION_KEY = 'bibotUserSessionId';
+var getSessionId = function getSessionId() {
+  var sessionId = localStorage.getItem(SESSION_KEY);
+  if (sessionId === null) {
+    var newSessionId = v4();
+    localStorage.setItem(SESSION_KEY, newSessionId);
+    return newSessionId;
+  }
+  return sessionId;
+};
+
+var dummyDispatch = function dummyDispatch() {};
+var defaultContextValue = {
+  state: {
+    chatIsOpen: false,
+    sessionId: getSessionId()
+  },
+  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()
+  };
+  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,
+      dispatch: dispatch
+    }
+  }, children);
+};
+
+var getRemoteClientChatPredefinedQuestions = function getRemoteClientChatPredefinedQuestions(params) {
+  return Promise.resolve(_catch(function () {
+    var path = "" + domain.inference + resources.predefinedQ;
+    return Promise.resolve(pluginAxiosInstance.get(path, {
+      params: params
+    })).then(function (response) {
+      return response.data.predefined_messages;
+    });
+  }, function () {
+    return ['These are placeholders', 'They will be removed in production', 'This will be empty if there are no predefined questions', 'So hide if there are no predefined questions'];
+  }));
+};
+var getRemoteClientChatBubbleConfig = function getRemoteClientChatBubbleConfig(params) {
+  try {
+    return Promise.resolve(_catch(function () {
+      var path = "" + domain.inference + resources.chatBubble;
+      return Promise.resolve(pluginAxiosInstance.get(path, {
+        params: params
+      })).then(function (response) {
+        return response.data;
+      });
+    }, function () {
+      return {
+        bgColor: 'white',
+        chatColor: 'blue',
+        title: 'ChatBot',
+        userImage: 'string'
+      };
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var askBiBot = function askBiBot(data) {
+  try {
+    return Promise.resolve(_catch(function () {
+      var path = "" + domain.inference + resources.q;
+      return Promise.resolve(pluginAxiosInstance.post(path, data)).then(function (response) {
+        console.log(response);
+        return response.data.message;
+      });
+    }, function (error1) {
+      console.log(error1.message);
+      if (error1.code === 'ECONNABORTED' || error1.message.includes('Endpoint request timed out')) {
+        return _catch(function () {
+          return Promise.resolve(askTimedOutBiBot(_extends({}, data, {
+            tries: 2
+          })));
+        }, function (error2) {
+          if (error2.code === 'ECONNABORTED' || error2.message.includes('Endpoint request timed out')) {
+            return _catch(function () {
+              return Promise.resolve(askTimedOutBiBot(_extends({}, data, {
+                tries: 3
+              })));
+            }, function (error3) {
+              return error3.message;
+            });
+          } else {
+            return error2.message;
+          }
+        });
+      } else {
+        return error1.message;
+      }
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var askTimedOutBiBot = function askTimedOutBiBot(data) {
+  try {
+    return Promise.resolve(_catch(function () {
+      var path = "" + domain.bibot + resources.timedOutLocalQ;
+      return Promise.resolve(pluginAxiosInstance.post(path, data)).then(function (response) {
+        console.log(response);
+        return response.data.message;
+      });
+    }, function (error) {
+      console.log(error.message);
+      return error.message;
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var pluginAxiosInstance = createPluginAxiosInstance();
+
+var useBiBotChatBot = function useBiBotChatBot(_ref) {
+  var sendInputInquiry = function sendInputInquiry() {
+    try {
+      setIsLoading(true);
+      setUserInput('');
+      return Promise.resolve(_finallyRethrows(function () {
+        return _catch(function () {
+          var _temp2 = function () {
+            if (userInput.trim()) {
+              setMessages(function (messages) {
+                return [].concat(messages, [{
+                  sender: 'user',
+                  text: userInput
+                }]);
+              });
+              return Promise.resolve(askBiBot({
+                client_id: clientId,
+                q: userInput.trim(),
+                session_id: state.sessionId,
+                chat_id: v4()
+              })).then(function (response) {
+                setMessages(function (messages) {
+                  return [].concat(messages, [{
+                    sender: 'bot',
+                    text: response
+                  }]);
+                });
+              });
+            }
+          }();
+          if (_temp2 && _temp2.then) return _temp2.then(function () {});
+        }, function (error) {
+          var _error$message;
+          void antd.message.error((_error$message = error === null || error === void 0 ? void 0 : error.message) != null ? _error$message : 'Failed to get response from server');
+        });
+      }, function (_wasThrown, _result) {
+        setIsLoading(false);
+        if (_wasThrown) throw _result;
+        return _result;
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var clientId = _ref.clientId;
+  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];
+  var messageEndRef = React.useRef(null);
+  var _useState7 = React.useState(),
+    chatBubbleConfig = _useState7[0],
+    setChatBubbleConfig = _useState7[1];
+  var handlePredefinedQuestionSelect = function handlePredefinedQuestionSelect(question) {
+    setUserInput(question);
+    sendInputInquiry();
+    setShowPredefinedQuestions(false);
+  };
+  var getChatBubbleConfig = React.useCallback(function () {
+    try {
+      return Promise.resolve(getRemoteClientChatPredefinedQuestions({
+        client_id: clientId
+      })).then(function (remotePredefinedQuestions) {
+        if (remotePredefinedQuestions) {
+          setPredefinedQuestions(remotePredefinedQuestions);
+        }
+        return Promise.resolve(getRemoteClientChatBubbleConfig({
+          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) {
+    setUserInput(e.target.value);
+  };
+  var handleKeyPress = function handleKeyPress(e) {
+    try {
+      var _temp = function () {
+        if (e.key === 'Enter' && !isLoading) {
+          return Promise.resolve(sendInputInquiry()).then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    chatIsOpen: chatIsOpen,
+    messages: messages,
+    isLoading: isLoading,
+    messageEndRef: messageEndRef,
+    userInput: userInput,
+    handleUserInput: handleUserInput,
+    handleKeyPress: handleKeyPress,
+    toggleChat: toggleChat,
+    sendInputInquiry: sendInputInquiry,
+    chatBubbleConfig: chatBubbleConfig,
+    showPredefinedQuestions: showPredefinedQuestions,
+    predefinedQuestions: predefinedQuestions,
+    handlePredefinedQuestionSelect: handlePredefinedQuestionSelect
+  };
+};
+
+var styles = {"chat-bubble":"_2jyN5","chat-toggle":"_tXNYe","chat-window":"_1P2y-","chat-header":"_2UNL5","message-list":"_2v5bZ","message":"_2RbY_","user":"_1efWC","bot":"_2idRy","loader":"_3qqrl","l5":"_3cq86","input-area":"_34vFI","loading-bubbles":"_1kl6z","bubble":"_3cleF","bounce":"_UNzJX"};
+
+var PredefinedQuestions = function PredefinedQuestions(_ref) {
+  var questions = _ref.questions,
+    onSelect = _ref.onSelect;
+  return React.createElement("div", {
+    className: styles['predefined-questions']
+  }, questions.map(function (question, index) {
+    return React.createElement("div", {
+      key: index,
+      className: styles['predefined-questions'],
+      onClick: function onClick() {
+        return onSelect(question);
+      }
+    }, question);
+  }));
+};
+var ChatBubbleBiBot = function ChatBubbleBiBot(_ref2) {
+  var _chatBubbleConfig$col, _chatBubbleConfig$col2;
+  var clientId = _ref2.clientId;
+  var _useBiBotChatBot = useBiBotChatBot({
+      clientId: clientId
+    }),
+    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,
+    handlePredefinedQuestionSelect = _useBiBotChatBot.handlePredefinedQuestionSelect;
+  return React.createElement("div", {
+    className: "chat-bubble " + (chatIsOpen ? 'open' : '')
+  }, chatIsOpen && React.createElement("div", {
+    className: styles["chat-window"],
+    style: {
+      backgroundColor: chatBubbleConfig === null || chatBubbleConfig === void 0 ? void 0 : chatBubbleConfig.bgColor
+    }
+  }, React.createElement("div", {
+    className: styles["chat-header"],
+    style: {
+      backgroundColor: (_chatBubbleConfig$col = chatBubbleConfig === null || chatBubbleConfig === void 0 ? void 0 : chatBubbleConfig.color) != null ? _chatBubbleConfig$col : '#dedede'
+    }
+  }, React.createElement("div", {
+    style: {
+      alignItems: 'center',
+      display: 'flex',
+      color: '#fff',
+      fontWeight: 'bold'
+    }
+  }, React.createElement(core.Indicator, {
+    inline: true,
+    size: 12,
+    offset: 7,
+    position: "bottom-end",
+    color: 'green'
+  }, React.createElement(core.Avatar, {
+    color: "white",
+    src: chatBubbleConfig === null || chatBubbleConfig === void 0 ? void 0 : chatBubbleConfig.logo_url,
+    alt: "profile"
+  }))), React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      textAlign: 'left',
+      paddingLeft: '10px',
+      justifyContent: 'flex-start',
+      color: '#fff'
+    }
+  }, React.createElement("span", {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, chatBubbleConfig === null || chatBubbleConfig === void 0 ? void 0 : chatBubbleConfig.title), isLoading ? React.createElement("span", {
+    style: {
+      fontSize: '12px',
+      lineHeight: '0.5'
+    }
+  }, "Typing...") : React.createElement("span", {
+    style: {
+      fontSize: '12px',
+      lineHeight: '0.5'
+    }
+  }, 'Online'))), React.createElement("div", {
+    className: styles["message-list"]
+  }, messages.map(function (message, index) {
+    return message.sender === 'user' ? React.createElement("div", {
+      key: index,
+      className: "message " + message.sender
+    }, message.text) : React.createElement("div", {
+      key: index,
+      style: {
+        display: 'flex'
+      }
+    }, React.createElement(core.Avatar, {
+      color: "white",
+      src: chatBubbleConfig === null || chatBubbleConfig === void 0 ? void 0 : chatBubbleConfig.logo_url,
+      size: 25,
+      alt: "profile"
+    }), React.createElement("div", {
+      className: "message " + message.sender
+    }, message.text));
+  }), showPredefinedQuestions && predefinedQuestions && predefinedQuestions.length > 0 && React.createElement(PredefinedQuestions, {
+    questions: predefinedQuestions,
+    onSelect: handlePredefinedQuestionSelect
+  }), isLoading && React.createElement("div", {
+    style: {
+      marginLeft: '20px'
+    },
+    className: 'message'
+  }, " ", React.createElement("div", {
+    className: "loader"
+  }), "  "), React.createElement("div", {
+    ref: messageEndRef
+  })), React.createElement("div", {
+    className: styles["input-area"]
+  }, React.createElement("input", {
+    autoFocus: true,
+    type: "text",
+    value: userInput,
+    onChange: handleUserInput,
+    onKeyDown: handleKeyPress,
+    placeholder: "Ask a question"
+  }), React.createElement(antd.Button, {
+    disabled: isLoading != null ? isLoading : true,
+    style: {
+      backgroundColor: 'transparent',
+      color: isLoading ? '#dedede' : chatBubbleConfig === null || chatBubbleConfig === void 0 ? void 0 : chatBubbleConfig.color
+    },
+    size: 'middle',
+    icon: React.createElement(iconsMaterial.SendRounded, null),
+    onClick: sendInputInquiry
+  }))), React.createElement(antd.Button, {
+    type: 'link',
+    onClick: toggleChat,
+    className: styles["chat-toggle"],
+    style: {
+      backgroundColor: (_chatBubbleConfig$col2 = chatBubbleConfig === null || chatBubbleConfig === void 0 ? void 0 : chatBubbleConfig.color) != null ? _chatBubbleConfig$col2 : '#dedede'
+    }
+  }, chatIsOpen ? React.createElement(iconsMaterial.Close, {
+    style: {
+      width: 30,
+      height: 30,
+      color: '#fff'
+    }
+  }) : React.createElement(ChatIcon, {
+    style: {
+      width: 30,
+      height: 30,
+      color: '#fff'
+    }
+  })));
+};
+
+var BiBot = function BiBot(_ref) {
+  var clientId = _ref.clientId;
+  return React.createElement(AppProvider, null, React.createElement(core.MantineProvider, null, React.createElement(ChatBubbleBiBot, {
+    clientId: clientId
+  })));
+};
+
+exports.BiBot = BiBot;
+//# sourceMappingURL=index.js.map