@vamlabs/vam-chatbot 0.1.67 → 0.1.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/web-component.js +4 -4
- package/package.json +1 -2
package/dist/web-component.js
CHANGED
|
@@ -26,7 +26,7 @@ return /******/ (() => { // webpackBootstrap
|
|
|
26
26
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
27
27
|
|
|
28
28
|
"use strict";
|
|
29
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var framer_motion__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! framer-motion */ \"./node_modules/framer-motion/dist/es/components/LazyMotion/index.mjs\");\n/* harmony import */ var framer_motion__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! framer-motion */ \"./node_modules/framer-motion/dist/es/render/dom/features-animation.mjs\");\n/* harmony import */ var framer_motion__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! framer-motion */ \"./node_modules/framer-motion/dist/es/render/components/m/proxy.mjs\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! axios */ \"./node_modules/axios/lib/axios.js\");\n/* harmony import */ var react_use_websocket__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-use-websocket */ \"./node_modules/react-use-websocket/dist/index.js\");\n/* harmony import */ var _components_ChatbotHeader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/ChatbotHeader */ \"./components/ChatbotHeader.jsx\");\n/* harmony import */ var _components_ChatbotBody__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/ChatbotBody */ \"./components/ChatbotBody.jsx\");\n/* harmony import */ var _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Chatbot.module.css */ \"./Chatbot.module.css\");\n/* harmony import */ var _utils_variants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/variants */ \"./utils/variants.js\");\n/* harmony import */ var _utils_websocketHandlers__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/websocketHandlers */ \"./utils/websocketHandlers.js\");\n/* harmony import */ var _utils_useClickHandler__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils/useClickHandler */ \"./utils/useClickHandler.js\");\n/* harmony import */ var _utils_defaults__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/defaults */ \"./utils/defaults.js\");\n/* harmony import */ var _utils_config__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/config */ \"./utils/config.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* \n- valid chatbot states:\n 0: \"at rest\",\n 1: \"waiting for response from api\"\n 2: \"receiving response from api\"\n*/\n\nconst fixSpecialLLMChars = text => {\n // forward slash is replaced by <|slash|> in the response from the api\n return text.replace(/\\u003c\\|slash\\|\\u003e/g, \"/\");\n};\nfunction Chatbot(_ref) {\n let {\n clientId,\n onTrackEvent\n } = _ref;\n const [messageList, setMessageList] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [inputText, setInputText] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\");\n const [chatbotState, setChatbotState] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const [chatbotMinimized, setChatbotMinimized] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(true);\n const [chatbotPopupMinimized, setChatbotPopupMinimized] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n const [promptsData, setPromptsData] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n show: true,\n prompts: []\n });\n const [promptsMinimized, setPromptsMinimized] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(true);\n const [shouldConnectWebsocket, setShouldConnectWebsocket] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n const [chatbotConfig, setChatbotConfig] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n fetchedData: false,\n data: {}\n });\n const [chatbotIcon, setChatbotIcon] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n const defaultMessageList = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)([]);\n const inputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const scrollAnchorRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const chatbotRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n\n // Use the custom hook to track clicks\n (0,_utils_useClickHandler__WEBPACK_IMPORTED_MODULE_7__[\"default\"])(onTrackEvent, chatbotRef);\n\n // use effect to upate the css variables once available through the chatbot config API\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n try {\n if (chatbotConfig?.data?.styles?.css_variables) {\n // escape special characters with backslash\n // since query selctor does not allow special characters\n let chatbotParent = document?.querySelector(\"vam-chatbot\")?.shadowRoot.querySelector(`.${_Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotParent.replace(/([^\\w-])/g, \"\\\\$1\")}`) || document?.querySelector(`.${_Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotParent.replace(/([^\\w-])/g, \"\\\\$1\")}`);\n for (let variable in chatbotConfig.data.styles.css_variables) {\n chatbotParent.style.setProperty(`--${variable}`, chatbotConfig.data.styles.css_variables[variable]);\n }\n }\n } catch (error) {\n console.log(error);\n }\n }, [chatbotConfig?.data?.styles?.css_variables]);\n\n // useeffect to store the chatbot icon when its url is fetched from the chatbot config API\n // this is to prevent the api call being made on render of every message\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n try {\n if (chatbotConfig?.data?.icon_url) {\n const fetchChatbotIcon = async () => {\n let url = chatbotConfig?.data?.icon_url;\n let apiResponse = await (0,axios__WEBPACK_IMPORTED_MODULE_11__[\"default\"])({\n url,\n method: \"GET\",\n responseType: \"blob\"\n });\n let imageBlob = apiResponse.data;\n if (imageBlob) {\n let imageObjectURL = URL.createObjectURL(imageBlob);\n setChatbotIcon(imageObjectURL);\n }\n };\n fetchChatbotIcon();\n }\n } catch (error) {\n console.log(error);\n }\n }, [chatbotConfig?.data?.icon_url]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const fetchConfigData = async () => {\n // Check if configUrl is null and handle appropriately\n if (!_utils_config__WEBPACK_IMPORTED_MODULE_9__.configUrl) {\n console.error(\"Chatbot config URL is not set. Please provide CHATBOT_DEV_URL or CHATBOT_PROD_URL environment variables.\");\n return;\n }\n const url = _utils_config__WEBPACK_IMPORTED_MODULE_9__.configUrl;\n const method = \"POST\";\n const requestBody = {\n clientId\n };\n try {\n let apiResponse = await (0,axios__WEBPACK_IMPORTED_MODULE_11__[\"default\"])({\n url,\n method,\n data: requestBody\n });\n if (apiResponse?.data) {\n let data = apiResponse.data;\n setChatbotConfig({\n fetchedData: true,\n data\n });\n setPromptsData(data?.default_prompts || {\n show: false,\n prompts: []\n });\n setMessageList(data?.default_message_list || []);\n defaultMessageList.current = data?.default_message_list || [];\n } else {\n // handle no data here\n console.log(\"no data found for the provided client id: \", clientId);\n }\n } catch (e) {\n console.error(e);\n // handle api failure here\n }\n };\n fetchConfigData();\n }, [clientId]);\n let websocket = (0,react_use_websocket__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(chatbotConfig?.data?.websocket_url, {\n onOpen: event => (0,_utils_websocketHandlers__WEBPACK_IMPORTED_MODULE_6__.handleWebsocketOnOpen)(event),\n onClose: event => (0,_utils_websocketHandlers__WEBPACK_IMPORTED_MODULE_6__.handleWebsocketOnClose)(event, chatbotMinimized, setShouldConnectWebsocket),\n // onReconnectStop:\n onMessage: event => (0,_utils_websocketHandlers__WEBPACK_IMPORTED_MODULE_6__.handleWebsocketOnMessage)(event, handleWebsocketResponse),\n onError: _utils_websocketHandlers__WEBPACK_IMPORTED_MODULE_6__.handleWebsocketOnError,\n shouldReconnect: closeEvent => !chatbotMinimized,\n // only attempt reconnection when the chatbot is maximized\n heartbeat: {\n message: JSON.stringify({\n action: \"heartbeat\",\n data: \"ping\"\n }),\n returnMessage: \"pong\",\n // to prevent re-rendering the component\n timeout: 9000,\n interval: 6000\n }\n }, shouldConnectWebsocket // handle the connection of the websocket using this variable\n );\n\n // scroll to the latest message whenever the message list updates\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n scrollAnchorRef.current?.scrollIntoView({\n behavior: \"smooth\",\n block: \"end\",\n inline: \"nearest\"\n });\n }, [messageList]);\n\n // set the chatbot connection to \"true\" when the chatbot is maximized\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (!chatbotMinimized) {\n setShouldConnectWebsocket(true);\n }\n }, [chatbotMinimized]);\n const handleWebsocketResponse = event => {\n try {\n try {\n event = JSON.parse(event.data);\n } catch (error) {}\n let {\n status,\n data\n } = event || {};\n let {\n response,\n sources,\n image_links,\n promoted_topics\n } = data || {};\n if (status === \"streaming\") {\n // set the chatbot state to \"receiving response\" and initialize the response\n setChatbotState(2);\n if (response) {\n setMessageList(prevList => {\n let responseList = [...prevList];\n try {\n let latestMessage = prevList.slice(-1)[0];\n if (latestMessage?.status === \"streaming\") {\n latestMessage.data.text = fixSpecialLLMChars(response);\n } else {\n let responseMessage = {\n source: \"bot\",\n data: {\n text: response\n },\n origin: \"server\",\n status: \"streaming\"\n };\n responseList = [...responseList, responseMessage];\n }\n } catch (error) {}\n return responseList;\n });\n }\n } else if (status === \"done\") {\n setChatbotState(0);\n\n // update the status as done for the last message\n setMessageList(prevList => {\n let responseList = [...prevList];\n try {\n let latestMessage = responseList.slice(-1)[0];\n if (latestMessage?.source !== \"user\") {\n latestMessage.status = \"done\";\n latestMessage.data.text = fixSpecialLLMChars(response);\n latestMessage.data.sources = sources?.map(fixSpecialLLMChars);\n if (promoted_topics) {\n const promotedImageLinks = promoted_topics.map(pt => pt?.image_link)?.filter(Boolean)?.map(fixSpecialLLMChars);\n latestMessage.data.image_links = promotedImageLinks?.length > 0 ? promotedImageLinks : image_links?.map(fixSpecialLLMChars);\n latestMessage.data.promoted_topics = promoted_topics?.filter(item => item?.title);\n }\n } else {\n let responseMessage = {\n source: \"bot\",\n data: {\n text: _utils_defaults__WEBPACK_IMPORTED_MODULE_8__.errorResponse\n },\n origin: \"server\",\n status: \"done\"\n };\n responseList = [...responseList, responseMessage];\n }\n } catch (error) {}\n return responseList;\n });\n }\n } catch (error) {}\n };\n\n // to keep the input field in focus and scroll to the latest message\n // when the enter button is clicked.\n // const focusInput = () => {\n // inputRef.current.focus();\n // };\n\n // to handle the minimize/maximize animation of the chatbot.\n const handleChatbotAnimation = () => {\n setChatbotMinimized(!chatbotMinimized);\n };\n\n // to reset the chatbot content.\n const resetChatbot = () => {\n try {\n forceConnectWebsocket();\n setMessageList(defaultMessageList.current);\n setPromptsData(prevData => {\n return {\n ...prevData,\n show: true\n };\n });\n setChatbotState(0);\n } catch (error) {}\n };\n const handleInput = event => {\n try {\n setInputText(event.target.value);\n } catch (error) {}\n };\n const getChatHistory = () => {\n let response = [];\n try {\n let historyItem = {\n user: \"\",\n assistant: \"\"\n };\n for (let message of messageList) {\n if (message.source === \"user\") {\n historyItem.user = message?.data?.text;\n } else if (message.source === \"bot\" && message.origin === \"server\") {\n historyItem.assistant = message?.data?.text;\n response.push(historyItem);\n historyItem = {\n user: \"\",\n assistant: \"\"\n };\n }\n }\n } catch (error) {\n console.log(error);\n } finally {\n return response;\n }\n };\n\n // try to connect the websocket connection by force by setting its flag to false and true\n const forceConnectWebsocket = () => {\n setShouldConnectWebsocket(false); // set state to false\n setTimeout(() => {\n setShouldConnectWebsocket(true); // set state back to true after a short delay\n }, 500);\n };\n const handleSubmit = async function () {\n let prompt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : \"\";\n let typewriterEffect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n if (!prompt) {\n prompt = inputText;\n } else {\n typewriterEffect = true;\n }\n try {\n prompt = prompt.trim();\n if (prompt) {\n // force reconnect the websocket if it belongs to either of the following states: [-1, 2, 3]\n if ([-1, 2, 3].includes(websocket?.readyState)) {\n forceConnectWebsocket();\n }\n setChatbotState(1);\n\n // put the user's prompt in the chat\n let userMessage = {\n source: \"user\",\n data: {\n text: prompt\n },\n status: \"done\",\n typewriterEffect\n };\n setMessageList(prevList => [...prevList, userMessage]);\n\n // hide the default prompts\n setPromptsData({\n ...promptsData,\n show: false\n });\n\n // clear the input field\n setInputText(\"\");\n\n // prepare the chat history\n let chatHistory = getChatHistory();\n\n // send the user's query to the webhook\n websocket.sendJsonMessage({\n action: \"message\",\n data: {\n message: prompt,\n chatHistory,\n clientId\n }\n });\n }\n } catch (error) {\n // responseMessage = {\n // source: \"error\",\n // text: \"An error occured.\",\n // };\n console.log(error);\n }\n };\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.Fragment, {\n children: chatbotConfig?.fetchedData && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotParent,\n ref: chatbotRef,\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(framer_motion__WEBPACK_IMPORTED_MODULE_12__.LazyMotion, {\n features: framer_motion__WEBPACK_IMPORTED_MODULE_13__.domAnimation,\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(framer_motion__WEBPACK_IMPORTED_MODULE_14__.m.div, {\n initial: false,\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotContainer,\n animate: chatbotMinimized ? \"hide\" : \"show\",\n variants: _utils_variants__WEBPACK_IMPORTED_MODULE_5__.maximizedChatbotVariants,\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_components_ChatbotHeader__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n headerText: chatbotConfig?.data?.header_text,\n setPromptsMinimized: setPromptsMinimized,\n handleChatbotAnimation: handleChatbotAnimation,\n resetChatbot: resetChatbot\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_components_ChatbotBody__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n messageList: messageList,\n promptsData: promptsData,\n handleSubmit: handleSubmit,\n chatbotState: chatbotState,\n scrollAnchorRef: scrollAnchorRef,\n promptsMinimized: promptsMinimized,\n setPromptsMinimized: setPromptsMinimized,\n inputRef: inputRef,\n inputText: inputText,\n handleInput: handleInput,\n placeholderInputText: chatbotConfig?.data?.placeholder_input_text,\n chatbotIcon: chatbotIcon\n })]\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(framer_motion__WEBPACK_IMPORTED_MODULE_14__.m.div, {\n variants: _utils_variants__WEBPACK_IMPORTED_MODULE_5__.minimizedChatbotVariants,\n animate: chatbotMinimized ? \"show\" : \"hide\",\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotCircleContainer,\n children: [!chatbotPopupMinimized && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(framer_motion__WEBPACK_IMPORTED_MODULE_14__.m.div, {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].popupContainer,\n variants: _utils_variants__WEBPACK_IMPORTED_MODULE_5__.minimizedChatbotContentVariants,\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"button\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].closePopup,\n onClick: () => setChatbotPopupMinimized(true),\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"i\", {\n className: \"bi bi-x-circle-fill\"\n })\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].popup,\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].popupContent,\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"span\", {\n children: chatbotConfig?.data?.popup_body_text\n })\n })\n })]\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(framer_motion__WEBPACK_IMPORTED_MODULE_14__.m.div, {\n variants: _utils_variants__WEBPACK_IMPORTED_MODULE_5__.minimizedChatbotContentVariants,\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotCircle,\n onClick: handleChatbotAnimation,\n children: chatbotIcon && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"img\", {\n src: chatbotIcon,\n loading: \"lazy\",\n alt: \"chatbot icon\",\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotIcon\n })\n })\n })]\n })]\n })\n })\n });\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Chatbot);\n\n//# sourceURL=webpack://VamChatbot/./Chatbot.jsx?");
|
|
29
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var framer_motion__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! framer-motion */ \"./node_modules/framer-motion/dist/es/components/LazyMotion/index.mjs\");\n/* harmony import */ var framer_motion__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! framer-motion */ \"./node_modules/framer-motion/dist/es/render/dom/features-animation.mjs\");\n/* harmony import */ var framer_motion__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! framer-motion */ \"./node_modules/framer-motion/dist/es/render/components/m/proxy.mjs\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! axios */ \"./node_modules/axios/lib/axios.js\");\n/* harmony import */ var react_use_websocket__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-use-websocket */ \"./node_modules/react-use-websocket/dist/index.js\");\n/* harmony import */ var _components_ChatbotHeader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/ChatbotHeader */ \"./components/ChatbotHeader.jsx\");\n/* harmony import */ var _components_ChatbotBody__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/ChatbotBody */ \"./components/ChatbotBody.jsx\");\n/* harmony import */ var _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Chatbot.module.css */ \"./Chatbot.module.css\");\n/* harmony import */ var _utils_variants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/variants */ \"./utils/variants.js\");\n/* harmony import */ var _utils_websocketHandlers__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/websocketHandlers */ \"./utils/websocketHandlers.js\");\n/* harmony import */ var _utils_useClickHandler__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils/useClickHandler */ \"./utils/useClickHandler.js\");\n/* harmony import */ var _utils_defaults__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/defaults */ \"./utils/defaults.js\");\n/* harmony import */ var _utils_config__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/config */ \"./utils/config.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* \n- valid chatbot states:\n 0: \"at rest\",\n 1: \"waiting for response from api\"\n 2: \"receiving response from api\"\n*/\n\nconst fixSpecialLLMChars = text => {\n // forward slash is replaced by <|slash|> in the response from the api\n return text.replace(/\\u003c\\|slash\\|\\u003e/g, \"/\");\n};\nfunction Chatbot(_ref) {\n let {\n clientId,\n onTrackEvent\n } = _ref;\n const [messageList, setMessageList] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [inputText, setInputText] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\");\n const [chatbotState, setChatbotState] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const [chatbotMinimized, setChatbotMinimized] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(true);\n const [chatbotPopupMinimized, setChatbotPopupMinimized] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n const [promptsData, setPromptsData] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n show: true,\n prompts: []\n });\n const [promptsMinimized, setPromptsMinimized] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(true);\n const [shouldConnectWebsocket, setShouldConnectWebsocket] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n const [chatbotConfig, setChatbotConfig] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n fetchedData: false,\n data: {}\n });\n const [chatbotIcon, setChatbotIcon] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n const defaultMessageList = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)([]);\n const inputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const scrollAnchorRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const chatbotRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n\n // Use the custom hook to track clicks\n (0,_utils_useClickHandler__WEBPACK_IMPORTED_MODULE_7__[\"default\"])(onTrackEvent, chatbotRef);\n\n // use effect to upate the css variables once available through the chatbot config API\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n try {\n if (chatbotConfig?.data?.styles?.css_variables) {\n // escape special characters with backslash\n // since query selctor does not allow special characters\n let chatbotParent = document?.querySelector(\"vam-chatbot\")?.shadowRoot.querySelector(`.${_Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotParent.replace(/([^\\w-])/g, \"\\\\$1\")}`) || document?.querySelector(`.${_Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotParent.replace(/([^\\w-])/g, \"\\\\$1\")}`);\n for (let variable in chatbotConfig.data.styles.css_variables) {\n chatbotParent.style.setProperty(`--${variable}`, chatbotConfig.data.styles.css_variables[variable]);\n }\n }\n } catch (error) {\n console.log(error);\n }\n }, [chatbotConfig?.data?.styles?.css_variables]);\n\n // useeffect to store the chatbot icon when its url is fetched from the chatbot config API\n // this is to prevent the api call being made on render of every message\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n try {\n if (chatbotConfig?.data?.icon_url) {\n const fetchChatbotIcon = async () => {\n let url = chatbotConfig?.data?.icon_url;\n let apiResponse = await (0,axios__WEBPACK_IMPORTED_MODULE_11__[\"default\"])({\n url,\n method: \"GET\",\n responseType: \"blob\"\n });\n let imageBlob = apiResponse.data;\n if (imageBlob) {\n let imageObjectURL = URL.createObjectURL(imageBlob);\n setChatbotIcon(imageObjectURL);\n }\n };\n fetchChatbotIcon();\n }\n } catch (error) {\n console.log(error);\n }\n }, [chatbotConfig?.data?.icon_url]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const fetchConfigData = async () => {\n // Check if configUrl is null and handle appropriately\n if (!_utils_config__WEBPACK_IMPORTED_MODULE_9__.configUrl) {\n console.error(\"Chatbot config URL is not set. Please provide CHATBOT_DEV_URL or CHATBOT_PROD_URL environment variables.\");\n return;\n }\n const url = `${_utils_config__WEBPACK_IMPORTED_MODULE_9__.configUrl}/api/getBotConfig`;\n const method = \"POST\";\n const requestBody = {\n clientId\n };\n try {\n let apiResponse = await (0,axios__WEBPACK_IMPORTED_MODULE_11__[\"default\"])({\n url,\n method,\n data: requestBody\n });\n if (apiResponse?.data) {\n let data = apiResponse.data;\n setChatbotConfig({\n fetchedData: true,\n data\n });\n setPromptsData(data?.default_prompts || {\n show: false,\n prompts: []\n });\n setMessageList(data?.default_message_list || []);\n defaultMessageList.current = data?.default_message_list || [];\n } else {\n // handle no data here\n console.log(\"no data found for the provided client id: \", clientId);\n }\n } catch (e) {\n console.error(e);\n // handle api failure here\n }\n };\n fetchConfigData();\n }, [clientId]);\n let websocket = (0,react_use_websocket__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(chatbotConfig?.data?.websocket_url, {\n onOpen: event => (0,_utils_websocketHandlers__WEBPACK_IMPORTED_MODULE_6__.handleWebsocketOnOpen)(event),\n onClose: event => (0,_utils_websocketHandlers__WEBPACK_IMPORTED_MODULE_6__.handleWebsocketOnClose)(event, chatbotMinimized, setShouldConnectWebsocket),\n // onReconnectStop:\n onMessage: event => (0,_utils_websocketHandlers__WEBPACK_IMPORTED_MODULE_6__.handleWebsocketOnMessage)(event, handleWebsocketResponse),\n onError: _utils_websocketHandlers__WEBPACK_IMPORTED_MODULE_6__.handleWebsocketOnError,\n shouldReconnect: closeEvent => !chatbotMinimized,\n // only attempt reconnection when the chatbot is maximized\n heartbeat: {\n message: JSON.stringify({\n action: \"heartbeat\",\n data: \"ping\"\n }),\n returnMessage: \"pong\",\n // to prevent re-rendering the component\n timeout: 9000,\n interval: 6000\n }\n }, shouldConnectWebsocket // handle the connection of the websocket using this variable\n );\n\n // scroll to the latest message whenever the message list updates\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n scrollAnchorRef.current?.scrollIntoView({\n behavior: \"smooth\",\n block: \"end\",\n inline: \"nearest\"\n });\n }, [messageList]);\n\n // set the chatbot connection to \"true\" when the chatbot is maximized\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (!chatbotMinimized) {\n setShouldConnectWebsocket(true);\n }\n }, [chatbotMinimized]);\n const handleWebsocketResponse = event => {\n try {\n try {\n event = JSON.parse(event.data);\n } catch (error) {}\n let {\n status,\n data\n } = event || {};\n let {\n response,\n sources,\n image_links,\n promoted_topics\n } = data || {};\n if (status === \"streaming\") {\n // set the chatbot state to \"receiving response\" and initialize the response\n setChatbotState(2);\n if (response) {\n setMessageList(prevList => {\n let responseList = [...prevList];\n try {\n let latestMessage = prevList.slice(-1)[0];\n if (latestMessage?.status === \"streaming\") {\n latestMessage.data.text = fixSpecialLLMChars(response);\n } else {\n let responseMessage = {\n source: \"bot\",\n data: {\n text: response\n },\n origin: \"server\",\n status: \"streaming\"\n };\n responseList = [...responseList, responseMessage];\n }\n } catch (error) {}\n return responseList;\n });\n }\n } else if (status === \"done\") {\n setChatbotState(0);\n\n // update the status as done for the last message\n setMessageList(prevList => {\n let responseList = [...prevList];\n try {\n let latestMessage = responseList.slice(-1)[0];\n if (latestMessage?.source !== \"user\") {\n latestMessage.status = \"done\";\n latestMessage.data.text = fixSpecialLLMChars(response);\n latestMessage.data.sources = sources?.map(fixSpecialLLMChars);\n if (promoted_topics) {\n const promotedImageLinks = promoted_topics.map(pt => pt?.image_link)?.filter(Boolean)?.map(fixSpecialLLMChars);\n latestMessage.data.image_links = promotedImageLinks?.length > 0 ? promotedImageLinks : image_links?.map(fixSpecialLLMChars);\n latestMessage.data.promoted_topics = promoted_topics?.filter(item => item?.title);\n }\n\n // Logic to show support button after every 2nd answer\n const botMessageCount = responseList.filter(msg => msg.source === \"bot\" && msg.origin === \"server\").length;\n const whatsappConfig = chatbotConfig?.data?.external_redirect_metadata?.whatsapp;\n if (whatsappConfig) {\n const triggerFrequency = whatsappConfig?.trigger_message_frequency;\n const redirectUrl = whatsappConfig?.redirect_url;\n if (triggerFrequency && redirectUrl && botMessageCount % triggerFrequency === 0) {\n latestMessage.data.showSupportButton = true;\n latestMessage.data.supportUrl = redirectUrl;\n }\n }\n } else {\n let responseMessage = {\n source: \"bot\",\n data: {\n text: _utils_defaults__WEBPACK_IMPORTED_MODULE_8__.errorResponse\n },\n origin: \"server\",\n status: \"done\"\n };\n responseList = [...responseList, responseMessage];\n }\n } catch (error) {}\n return responseList;\n });\n }\n } catch (error) {}\n };\n\n // to keep the input field in focus and scroll to the latest message\n // when the enter button is clicked.\n // const focusInput = () => {\n // inputRef.current.focus();\n // };\n\n // to handle the minimize/maximize animation of the chatbot.\n const handleChatbotAnimation = () => {\n setChatbotMinimized(!chatbotMinimized);\n };\n\n // to reset the chatbot content.\n const resetChatbot = () => {\n try {\n forceConnectWebsocket();\n setMessageList(defaultMessageList.current);\n setPromptsData(prevData => {\n return {\n ...prevData,\n show: true\n };\n });\n setChatbotState(0);\n } catch (error) {}\n };\n const handleInput = event => {\n try {\n setInputText(event.target.value);\n } catch (error) {}\n };\n const getChatHistory = () => {\n let response = [];\n try {\n let historyItem = {\n user: \"\",\n assistant: \"\"\n };\n for (let message of messageList) {\n if (message.source === \"user\") {\n historyItem.user = message?.data?.text;\n } else if (message.source === \"bot\" && message.origin === \"server\") {\n historyItem.assistant = message?.data?.text;\n response.push(historyItem);\n historyItem = {\n user: \"\",\n assistant: \"\"\n };\n }\n }\n } catch (error) {\n console.log(error);\n } finally {\n return response;\n }\n };\n\n // try to connect the websocket connection by force by setting its flag to false and true\n const forceConnectWebsocket = () => {\n setShouldConnectWebsocket(false); // set state to false\n setTimeout(() => {\n setShouldConnectWebsocket(true); // set state back to true after a short delay\n }, 500);\n };\n const handleSubmit = async function () {\n let prompt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : \"\";\n let typewriterEffect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n if (!prompt) {\n prompt = inputText;\n } else {\n typewriterEffect = true;\n }\n try {\n prompt = prompt.trim();\n if (prompt) {\n // force reconnect the websocket if it belongs to either of the following states: [-1, 2, 3]\n if ([-1, 2, 3].includes(websocket?.readyState)) {\n forceConnectWebsocket();\n }\n setChatbotState(1);\n\n // put the user's prompt in the chat\n let userMessage = {\n source: \"user\",\n data: {\n text: prompt\n },\n status: \"done\",\n typewriterEffect\n };\n setMessageList(prevList => [...prevList, userMessage]);\n\n // hide the default prompts\n setPromptsData({\n ...promptsData,\n show: false\n });\n\n // clear the input field\n setInputText(\"\");\n\n // prepare the chat history\n let chatHistory = getChatHistory();\n\n // send the user's query to the webhook\n websocket.sendJsonMessage({\n action: \"message\",\n data: {\n message: prompt,\n chatHistory,\n clientId\n }\n });\n }\n } catch (error) {\n // responseMessage = {\n // source: \"error\",\n // text: \"An error occured.\",\n // };\n console.log(error);\n }\n };\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.Fragment, {\n children: chatbotConfig?.fetchedData && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotParent,\n ref: chatbotRef,\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(framer_motion__WEBPACK_IMPORTED_MODULE_12__.LazyMotion, {\n features: framer_motion__WEBPACK_IMPORTED_MODULE_13__.domAnimation,\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(framer_motion__WEBPACK_IMPORTED_MODULE_14__.m.div, {\n initial: false,\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotContainer,\n animate: chatbotMinimized ? \"hide\" : \"show\",\n variants: _utils_variants__WEBPACK_IMPORTED_MODULE_5__.maximizedChatbotVariants,\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_components_ChatbotHeader__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n headerText: chatbotConfig?.data?.header_text,\n setPromptsMinimized: setPromptsMinimized,\n handleChatbotAnimation: handleChatbotAnimation,\n resetChatbot: resetChatbot\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_components_ChatbotBody__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n messageList: messageList,\n promptsData: promptsData,\n handleSubmit: handleSubmit,\n chatbotState: chatbotState,\n scrollAnchorRef: scrollAnchorRef,\n promptsMinimized: promptsMinimized,\n setPromptsMinimized: setPromptsMinimized,\n inputRef: inputRef,\n inputText: inputText,\n handleInput: handleInput,\n placeholderInputText: chatbotConfig?.data?.placeholder_input_text,\n chatbotIcon: chatbotIcon\n })]\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(framer_motion__WEBPACK_IMPORTED_MODULE_14__.m.div, {\n variants: _utils_variants__WEBPACK_IMPORTED_MODULE_5__.minimizedChatbotVariants,\n animate: chatbotMinimized ? \"show\" : \"hide\",\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotCircleContainer,\n children: [!chatbotPopupMinimized && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(framer_motion__WEBPACK_IMPORTED_MODULE_14__.m.div, {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].popupContainer,\n variants: _utils_variants__WEBPACK_IMPORTED_MODULE_5__.minimizedChatbotContentVariants,\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"button\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].closePopup,\n onClick: () => setChatbotPopupMinimized(true),\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"i\", {\n className: \"bi bi-x-circle-fill\"\n })\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].popup,\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].popupContent,\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"span\", {\n children: chatbotConfig?.data?.popup_body_text\n })\n })\n })]\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(framer_motion__WEBPACK_IMPORTED_MODULE_14__.m.div, {\n variants: _utils_variants__WEBPACK_IMPORTED_MODULE_5__.minimizedChatbotContentVariants,\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotCircle,\n onClick: handleChatbotAnimation,\n children: chatbotIcon && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"img\", {\n src: chatbotIcon,\n loading: \"lazy\",\n alt: \"chatbot icon\",\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"].chatbotIcon\n })\n })\n })]\n })]\n })\n })\n });\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Chatbot);\n\n//# sourceURL=webpack://VamChatbot/./Chatbot.jsx?");
|
|
30
30
|
|
|
31
31
|
/***/ }),
|
|
32
32
|
|
|
@@ -70,7 +70,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
70
70
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
71
71
|
|
|
72
72
|
"use strict";
|
|
73
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var framer_motion__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! framer-motion */ \"./node_modules/framer-motion/dist/es/components/LazyMotion/index.mjs\");\n/* harmony import */ var framer_motion__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! framer-motion */ \"./node_modules/framer-motion/dist/es/render/dom/features-animation.mjs\");\n/* harmony import */ var framer_motion__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! framer-motion */ \"./node_modules/framer-motion/dist/es/render/components/m/proxy.mjs\");\n/* harmony import */ var _Message__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Message */ \"./components/Message.jsx\");\n/* harmony import */ var _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Chatbot.module.css */ \"./Chatbot.module.css\");\n/* harmony import */ var _AnimatedTextPlaceholder__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AnimatedTextPlaceholder */ \"./components/AnimatedTextPlaceholder.jsx\");\n/* harmony import */ var _utils_variants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/variants */ \"./utils/variants.js\");\n/* harmony import */ var _Prompts__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Prompts */ \"./components/Prompts.jsx\");\n/* harmony import */ var _ChatbotFooter__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ChatbotFooter */ \"./components/ChatbotFooter.jsx\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\n\n\nfunction ChatbotBody(_ref) {\n let {\n messageList,\n promptsData,\n handleSubmit,\n chatbotState,\n scrollAnchorRef,\n promptsMinimized,\n setPromptsMinimized,\n inputRef,\n inputText,\n handleInput,\n placeholderInputText,\n chatbotIcon\n } = _ref;\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(framer_motion__WEBPACK_IMPORTED_MODULE_7__.LazyMotion, {\n features: framer_motion__WEBPACK_IMPORTED_MODULE_8__.domAnimation,\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"].body,\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(framer_motion__WEBPACK_IMPORTED_MODULE_9__.m.div, {\n variants: _utils_variants__WEBPACK_IMPORTED_MODULE_3__.chatbotContentVariants,\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"].conversation,\n children: [messageList.map((message, index) => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_Message__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n chatbotIcon: chatbotIcon,\n messageText: message?.data?.text,\n messageReferenceLinks: message?.data?.sources,\n messageImageLinks: message?.data?.image_links,\n messageSource: message?.source,\n messageStatus: message?.status,\n promotedTopics: message?.data?.promoted_topics,\n typewriterEffect: message?.typewriterEffect\n }, `message-${index}`)), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bodyPromptsContainer,\n style: {\n display: promptsData?.show ? \"block\" : \"none\"\n },\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_Prompts__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n promptsData: promptsData,\n handleSubmit: handleSubmit,\n setPromptsMinimized: setPromptsMinimized\n })\n }), chatbotState === 1 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"].message,\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"img\", {\n src: chatbotIcon,\n loading: \"lazy\",\n alt: \"chatbot icon\",\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"].chatbotIcon\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n className: \"w-100\",\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_AnimatedTextPlaceholder__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n theme: \"dark\"\n })\n })]\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n className: \"scrollAnchor\",\n ref: scrollAnchorRef\n })]\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_ChatbotFooter__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n setPromptsMinimized: setPromptsMinimized,\n promptsMinimized: promptsMinimized,\n promptsData: promptsData,\n handleSubmit: handleSubmit,\n chatbotState: chatbotState,\n inputRef: inputRef,\n inputText: inputText,\n handleInput: handleInput,\n placeholderInputText: placeholderInputText\n })]\n })\n });\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChatbotBody);\n\n//# sourceURL=webpack://VamChatbot/./components/ChatbotBody.jsx?");
|
|
73
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var framer_motion__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! framer-motion */ \"./node_modules/framer-motion/dist/es/components/LazyMotion/index.mjs\");\n/* harmony import */ var framer_motion__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! framer-motion */ \"./node_modules/framer-motion/dist/es/render/dom/features-animation.mjs\");\n/* harmony import */ var framer_motion__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! framer-motion */ \"./node_modules/framer-motion/dist/es/render/components/m/proxy.mjs\");\n/* harmony import */ var _Message__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Message */ \"./components/Message.jsx\");\n/* harmony import */ var _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Chatbot.module.css */ \"./Chatbot.module.css\");\n/* harmony import */ var _AnimatedTextPlaceholder__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AnimatedTextPlaceholder */ \"./components/AnimatedTextPlaceholder.jsx\");\n/* harmony import */ var _utils_variants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/variants */ \"./utils/variants.js\");\n/* harmony import */ var _Prompts__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Prompts */ \"./components/Prompts.jsx\");\n/* harmony import */ var _ChatbotFooter__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ChatbotFooter */ \"./components/ChatbotFooter.jsx\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\n\n\nfunction ChatbotBody(_ref) {\n let {\n messageList,\n promptsData,\n handleSubmit,\n chatbotState,\n scrollAnchorRef,\n promptsMinimized,\n setPromptsMinimized,\n inputRef,\n inputText,\n handleInput,\n placeholderInputText,\n chatbotIcon\n } = _ref;\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(framer_motion__WEBPACK_IMPORTED_MODULE_7__.LazyMotion, {\n features: framer_motion__WEBPACK_IMPORTED_MODULE_8__.domAnimation,\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"].body,\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(framer_motion__WEBPACK_IMPORTED_MODULE_9__.m.div, {\n variants: _utils_variants__WEBPACK_IMPORTED_MODULE_3__.chatbotContentVariants,\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"].conversation,\n children: [messageList.map((message, index) => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_Message__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n chatbotIcon: chatbotIcon,\n messageText: message?.data?.text,\n messageReferenceLinks: message?.data?.sources,\n messageImageLinks: message?.data?.image_links,\n messageSource: message?.source,\n messageStatus: message?.status,\n promotedTopics: message?.data?.promoted_topics,\n typewriterEffect: message?.typewriterEffect,\n showSupportButton: message?.data?.showSupportButton,\n supportUrl: message?.data?.supportUrl\n }, `message-${index}`)), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bodyPromptsContainer,\n style: {\n display: promptsData?.show ? \"block\" : \"none\"\n },\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_Prompts__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n promptsData: promptsData,\n handleSubmit: handleSubmit,\n setPromptsMinimized: setPromptsMinimized\n })\n }), chatbotState === 1 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"].message,\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"img\", {\n src: chatbotIcon,\n loading: \"lazy\",\n alt: \"chatbot icon\",\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"].chatbotIcon\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n className: \"w-100\",\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_AnimatedTextPlaceholder__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n theme: \"dark\"\n })\n })]\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n className: \"scrollAnchor\",\n ref: scrollAnchorRef\n })]\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_ChatbotFooter__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n setPromptsMinimized: setPromptsMinimized,\n promptsMinimized: promptsMinimized,\n promptsData: promptsData,\n handleSubmit: handleSubmit,\n chatbotState: chatbotState,\n inputRef: inputRef,\n inputText: inputText,\n handleInput: handleInput,\n placeholderInputText: placeholderInputText\n })]\n })\n });\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChatbotBody);\n\n//# sourceURL=webpack://VamChatbot/./components/ChatbotBody.jsx?");
|
|
74
74
|
|
|
75
75
|
/***/ }),
|
|
76
76
|
|
|
@@ -103,7 +103,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
103
103
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
104
104
|
|
|
105
105
|
"use strict";
|
|
106
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var marked__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! marked */ \"./node_modules/marked/lib/marked.esm.js\");\n/* harmony import */ var dompurify__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.js\");\n/* harmony import */ var dompurify__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(dompurify__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Chatbot.module.css */ \"./Chatbot.module.css\");\n/* harmony import */ var _Carousal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Carousal */ \"./components/Carousal.jsx\");\n/* harmony import */ var _SourceList__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./SourceList */ \"./components/SourceList.jsx\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _Typewriter__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Typewriter */ \"./components/Typewriter.jsx\");\n/* harmony import */ var _PromotedTopics__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./PromotedTopics */ \"./components/PromotedTopics.jsx\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\n\n\n\nconst markdownToHtml = markdown => {\n let htmlResponse = \"\";\n dompurify__WEBPACK_IMPORTED_MODULE_1___default().addHook(\"afterSanitizeAttributes\", function (node) {\n // set all elements owning target to target=_blank\n if (\"target\" in node) {\n node.setAttribute(\"target\", \"_blank\");\n node.setAttribute(\"rel\", \"noopener noreferrer\");\n }\n });\n try {\n htmlResponse = dompurify__WEBPACK_IMPORTED_MODULE_1___default().sanitize(marked__WEBPACK_IMPORTED_MODULE_0__.marked.parse(markdown));\n } catch (error) {\n console.log(error);\n }\n return htmlResponse;\n};\nfunction MessageCore(_ref) {\n let {\n chatbotIcon,\n messageText,\n messageReferenceLinks,\n messageImageLinks,\n messageSource,\n messageStatus,\n promotedTopics,\n typewriterEffect\n } = _ref;\n let messageProps = {};\n if (messageSource === \"user\") {\n messageProps.backgroundColor = \"var(--chatbot-user-bubble-color)\";\n } else if (messageSource === \"bot\") {\n messageProps.backgroundColor = \"var(--chatbot-bot-bubble-color)\";\n } else if (messageSource === \"error\") {\n messageProps.justifyDirection = \"center\";\n }\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].message,\n style: {\n color: messageSource === \"error\" ? \"red\" : \"\",\n justifyContent: messageProps?.justifyDirection,\n flexDirection: messageSource === \"user\" ? \"row-reverse\" : \"\"\n },\n children: [messageSource === \"user\" ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"i\", {\n className: \"bi bi-person-circle\",\n style: {\n color: \"var(--chatbot-user-icon-color)\"\n }\n }) : messageSource === \"bot\" ? chatbotIcon && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"img\", {\n src: chatbotIcon,\n alt: \"chatbot icon\",\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].chatbotIcon\n }) : \"\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].messageBody,\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].messageText,\n style: {\n backgroundColor: messageProps.backgroundColor,\n color: messageSource === \"error\" ? \"red\" : messageSource === \"user\" ? \"var(--chatbot-user-text-color)\" : \"var(--chatbot-bot-text-color)\"\n },\n children: [typewriterEffect ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_Typewriter__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n text: markdownToHtml(messageText)\n }) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"span\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].markdownToHtmlContainer,\n dangerouslySetInnerHTML: {\n __html: markdownToHtml(messageText)\n }\n }), messageStatus === \"done\" && promotedTopics?.length > 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_PromotedTopics__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n data: promotedTopics\n }), messageImageLinks?.length > 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_Carousal__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n images: messageImageLinks\n }), messageStatus === \"done\" && messageReferenceLinks?.length > 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_SourceList__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n sources: messageReferenceLinks\n })]\n })\n })]\n });\n}\n\n// wrap the component in useMemo() to re-render\n// only the latest Message when streaming response\nconst Message = _ref2 => {\n let {\n chatbotIcon,\n messageText,\n messageReferenceLinks,\n messageImageLinks,\n messageSource,\n messageStatus,\n promotedTopics,\n typewriterEffect\n } = _ref2;\n return (0,react__WEBPACK_IMPORTED_MODULE_5__.useMemo)(() => {\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(MessageCore, {\n chatbotIcon: chatbotIcon,\n messageText: messageText,\n messageReferenceLinks: messageReferenceLinks,\n messageImageLinks: messageImageLinks,\n messageSource: messageSource,\n messageStatus: messageStatus,\n promotedTopics: promotedTopics,\n typewriterEffect: typewriterEffect\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [messageText, messageStatus, chatbotIcon]);\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Message);\n\n//# sourceURL=webpack://VamChatbot/./components/Message.jsx?");
|
|
106
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var marked__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! marked */ \"./node_modules/marked/lib/marked.esm.js\");\n/* harmony import */ var dompurify__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.js\");\n/* harmony import */ var dompurify__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(dompurify__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Chatbot.module.css */ \"./Chatbot.module.css\");\n/* harmony import */ var _Carousal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Carousal */ \"./components/Carousal.jsx\");\n/* harmony import */ var _SourceList__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./SourceList */ \"./components/SourceList.jsx\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _Typewriter__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Typewriter */ \"./components/Typewriter.jsx\");\n/* harmony import */ var _PromotedTopics__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./PromotedTopics */ \"./components/PromotedTopics.jsx\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\n\n\n\nconst markdownToHtml = markdown => {\n let htmlResponse = \"\";\n dompurify__WEBPACK_IMPORTED_MODULE_1___default().addHook(\"afterSanitizeAttributes\", function (node) {\n // set all elements owning target to target=_blank\n if (\"target\" in node) {\n node.setAttribute(\"target\", \"_blank\");\n node.setAttribute(\"rel\", \"noopener noreferrer\");\n }\n });\n try {\n htmlResponse = dompurify__WEBPACK_IMPORTED_MODULE_1___default().sanitize(marked__WEBPACK_IMPORTED_MODULE_0__.marked.parse(markdown));\n } catch (error) {\n console.log(error);\n }\n return htmlResponse;\n};\nfunction MessageCore(_ref) {\n let {\n chatbotIcon,\n messageText,\n messageReferenceLinks,\n messageImageLinks,\n messageSource,\n messageStatus,\n promotedTopics,\n typewriterEffect,\n showSupportButton,\n supportUrl\n } = _ref;\n let messageProps = {};\n if (messageSource === \"user\") {\n messageProps.backgroundColor = \"var(--chatbot-user-bubble-color)\";\n } else if (messageSource === \"bot\") {\n messageProps.backgroundColor = \"var(--chatbot-bot-bubble-color)\";\n } else if (messageSource === \"error\") {\n messageProps.justifyDirection = \"center\";\n }\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].message,\n style: {\n color: messageSource === \"error\" ? \"red\" : \"\",\n justifyContent: messageProps?.justifyDirection,\n flexDirection: messageSource === \"user\" ? \"row-reverse\" : \"\"\n },\n children: [messageSource === \"user\" ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"i\", {\n className: \"bi bi-person-circle\",\n style: {\n color: \"var(--chatbot-user-icon-color)\"\n }\n }) : messageSource === \"bot\" ? chatbotIcon && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"img\", {\n src: chatbotIcon,\n alt: \"chatbot icon\",\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].chatbotIcon\n }) : \"\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].messageBody,\n children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].messageText,\n style: {\n backgroundColor: messageProps.backgroundColor,\n color: messageSource === \"error\" ? \"red\" : messageSource === \"user\" ? \"var(--chatbot-user-text-color)\" : \"var(--chatbot-bot-text-color)\"\n },\n children: [typewriterEffect ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_Typewriter__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n text: markdownToHtml(messageText)\n }) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"span\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].markdownToHtmlContainer,\n dangerouslySetInnerHTML: {\n __html: markdownToHtml(messageText)\n }\n }), messageStatus === \"done\" && promotedTopics?.length > 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_PromotedTopics__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n data: promotedTopics\n }), showSupportButton && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.Fragment, {\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"div\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].messageDivider\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"p\", {\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].supportText,\n children: \"You can now contact the Box Office on Whatsapp.\"\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"a\", {\n href: supportUrl,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: _Chatbot_module_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"].supportButton,\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"i\", {\n className: \"bi bi-whatsapp\"\n }), \"Contact Us\"]\n })]\n }), messageImageLinks?.length > 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_Carousal__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n images: messageImageLinks\n }), messageStatus === \"done\" && messageReferenceLinks?.length > 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_SourceList__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n sources: messageReferenceLinks\n })]\n })\n })]\n });\n}\n\n// wrap the component in useMemo() to re-render\n// only the latest Message when streaming response\nconst Message = _ref2 => {\n let {\n chatbotIcon,\n messageText,\n messageReferenceLinks,\n messageImageLinks,\n messageSource,\n messageStatus,\n promotedTopics,\n typewriterEffect,\n showSupportButton,\n supportUrl\n } = _ref2;\n return (0,react__WEBPACK_IMPORTED_MODULE_5__.useMemo)(() => {\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(MessageCore, {\n chatbotIcon: chatbotIcon,\n messageText: messageText,\n messageReferenceLinks: messageReferenceLinks,\n messageImageLinks: messageImageLinks,\n messageSource: messageSource,\n messageStatus: messageStatus,\n promotedTopics: promotedTopics,\n typewriterEffect: typewriterEffect,\n showSupportButton: showSupportButton,\n supportUrl: supportUrl\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [messageText, messageStatus, chatbotIcon, showSupportButton, supportUrl]);\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Message);\n\n//# sourceURL=webpack://VamChatbot/./components/Message.jsx?");
|
|
107
107
|
|
|
108
108
|
/***/ }),
|
|
109
109
|
|
|
@@ -235,7 +235,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
235
235
|
/***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|
236
236
|
|
|
237
237
|
"use strict";
|
|
238
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap);\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.bOJfQLIDdUlPEJzIVy0q {\n --chatbot-height: 70%;\n --chatbot-width: 30%;\n --chatbot-header-height: 50px;\n --chatbot-footer-height: 80px;\n --chatbot-footer-input-height: 40px;\n --chatbot-circle-radius: 70px;\n --chatbot-spacing-x: 10px;\n --chatbot-spacing-y: 10px;\n --chatbot-border-radius: 10px;\n}\n\n@media only screen and (max-width: 1280px) {\n .bOJfQLIDdUlPEJzIVy0q {\n --chatbot-width: 50%;\n --chatbot-height: 80%;\n }\n}\n\n@media only screen and (max-width: 768px) {\n .bOJfQLIDdUlPEJzIVy0q {\n --chatbot-width: 100%;\n --chatbot-height: 100%;\n --chatbot-header-height: 70px;\n --chatbot-spacing-x: 0px;\n --chatbot-spacing-y: 0px;\n --chatbot-border-radius: 0px;\n }\n}\n\n.bOJfQLIDdUlPEJzIVy0q {\n}\n\n.mrPuzpzfdEmQSyTxnvxI {\n font-family: \"Open Sans\", sans-serif;\n font-optical-sizing: auto;\n font-weight: 600;\n font-style: normal;\n font-variation-settings: \"wdth\" 90;\n position: fixed;\n overflow: hidden;\n border-radius: var(--chatbot-border-radius);\n bottom: var(--chatbot-spacing-y);\n right: var(--chatbot-spacing-x);\n height: var(--chatbot-height);\n width: var(--chatbot-width);\n box-shadow: 0 8px 16px 6px rgba(0, 24, 56, 0.2);\n z-index: 99999;\n}\n\n.QJ6c9UPW4NdCwINA2KKw {\n position: absolute;\n width: 100%;\n background-color: var(--chatbot-header-color);\n padding: 0 10px;\n border-bottom: 0.5px solid var(--chatbot-border-color);\n z-index: 99998;\n height: var(--chatbot-header-height);\n}\n\n.BAciNorgEk8q0Hjvg_Nd {\n height: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-size: 1.4rem;\n\n button,\n button:hover {\n background-color: var(--chatbot-header-color);\n color: var(--chatbot-header-text-color);\n border: none;\n }\n}\n\n.rDNjthKTeHigjuhTaXFw {\n display: flex;\n height: 100%;\n flex-direction: column;\n align-items: flex-start;\n /* Align items to the start (left) */\n justify-content: center;\n /* Center vertically within the container */\n /* padding-left: 10px; */\n /* Add padding to push it away from the edge */\n}\n\n.qhIJF8jtTVHpl14phrvO {\n font-weight: 700;\n text-align: start;\n color: var(--chatbot-header-text-color);\n}\n\n.bJ4qOXuizp8yq01SFRbe {\n font-weight: 700;\n font-size: 0.4rem;\n text-align: start;\n}\n\n.M84EXuBJb0ITHqmcP033 {\n margin-top: var(--chatbot-header-height);\n font-size: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: var(--chatbot-background-color);\n height: calc(100% - var(--chatbot-header-height));\n}\n\n.KJH5XQVgMgo5xa6hVmpQ {\n .uodJA65d3QSnFHHi6wEE {\n row-gap: 10px;\n column-gap: 10px;\n padding: 0 20px;\n }\n .yMV8jdykQ0p_dG9sc2yK {\n gap: 10px;\n border-radius: 10px;\n padding: 5px 12px;\n cursor: pointer;\n color: var(--chatbot-prompt-text-color);\n\n .OFNqcCdonr5dxzTTZ3zK {\n font-size: 0.85rem;\n }\n }\n}\n\n.F4te4w0Rg9nYSlvqoOuU {\n overflow: auto;\n}\n\n.y3GymRJmY0MX41NX3xWJ {\n /* width: 45px; */\n height: 70px;\n}\n\n.soVXB5uMOlUUVHtMVzBV,\n.BAciNorgEk8q0Hjvg_Nd {\n .y3GymRJmY0MX41NX3xWJ {\n /* width: 40px; */\n height: 40px;\n }\n}\n\n.soVXB5uMOlUUVHtMVzBV {\n display: flex;\n gap: 10px;\n height: fit-content;\n padding: 10px 20px;\n\n .On7UzyczZB0EFpZn8hAO {\n border-radius: 10px;\n padding: 5px 10px;\n display: flex;\n align-items: center;\n flex-direction: column;\n align-items: flex-start;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);\n }\n\n i {\n font-size: 24px;\n }\n}\n\n.ys2v0_nbj9UZ2GtmsGFl {\n display: flex;\n flex-direction: column;\n}\n\n.uodJA65d3QSnFHHi6wEE {\n display: flex;\n flex-wrap: wrap;\n row-gap: 20px;\n column-gap: 15px;\n justify-content: center;\n padding: 20px 10px 20px 10px;\n}\n\n.yMV8jdykQ0p_dG9sc2yK {\n display: flex;\n gap: 10px;\n align-items: center;\n height: fit-content;\n background-color: var(--chatbot-prompt-background-color);\n border-radius: 10px;\n padding: 10px 30px;\n border: none;\n font-variation-settings: \"wdth\" 90;\n font-weight: 600;\n color: var(--chatbot-prompt-text-color);\n\n .OFNqcCdonr5dxzTTZ3zK {\n font-size: 0.85rem;\n }\n}\n\n.yMV8jdykQ0p_dG9sc2yK:disabled {\n cursor: not-allowed;\n}\n\n.ePwR5gBjQ2sQwKScmcAF {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 30px;\n max-width: 30px;\n height: 30px;\n border-radius: 30px;\n background-color: grey;\n}\n\n.n5EFd7Gb3khLARy7SBEE {\n display: block;\n text-align: center;\n font-size: 0.7rem;\n font-weight: 700;\n margin: 2px 0;\n background: linear-gradient(to bottom, #39cff6, #ad84ff);\n background-clip: text;\n color: transparent;\n}\n\n.Cswbzq1GQuTnMGpPi4Zt {\n width: 95%;\n margin: 0 auto 10px;\n /* Centering the footer with margin auto */\n border-radius: 10px;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);\n}\n\n.ibnXsq4b88cDDvfQQgYn {\n display: flex;\n align-items: center;\n min-height: var(--chatbot-footer-input-height);\n height: var(--chatbot-footer-input-height);\n border-radius: 10px;\n overflow: hidden;\n\n i {\n font-size: 1.75rem;\n }\n /* Ensures the button and input are nicely clipped within the border radius */\n}\n\n.vJUKQIrYod4Q56Cduawg {\n background-color: transparent;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n\n.vJUKQIrYod4Q56Cduawg .fy7pExJR53Br8Rva0_mA {\n color: var(--chatbot-header-color);\n /* Initial color, change this to your default icon color */\n transition: color 0.3s ease;\n}\n\n.Cswbzq1GQuTnMGpPi4Zt input {\n font-family: \"Open Sans\", sans-serif;\n font-optical-sizing: auto;\n font-weight: 600;\n font-style: normal;\n font-variation-settings: \"wdth\" 95;\n color: var(--chatbot-input-text-color);\n background-color: var(--chatbot-background-color);\n border: none;\n padding: 0 10px;\n width: 100%;\n height: 100%;\n outline: none;\n transition: box-shadow 0.3s ease, border-color 0.3s ease;\n}\n\n.Cswbzq1GQuTnMGpPi4Zt input:focus {\n border-color: var(--chatbot-user-bubble-color);\n box-shadow: 0 10 10px var(--chatbot-user-bubble-color);\n /* Adds a glow effect on focus */\n}\n\n.ibnXsq4b88cDDvfQQgYn button {\n background-color: var(--chatbot-background-color);\n border: none;\n padding: 0 15px;\n /* Extra padding for the button */\n color: var(--chatbot-footer-icon-color);\n cursor: pointer;\n transition: color 0.3s ease;\n}\n\n.ibnXsq4b88cDDvfQQgYn button:hover {\n color: var(--chatbot-footericons-hover-color);\n /* filter: brightness(2); */\n /* Optional: hover effect for the button */\n}\n\n.ibnXsq4b88cDDvfQQgYn button:disabled {\n opacity: 0.6;\n /* Makes the button appear disabled */\n cursor: not-allowed;\n /* Changes cursor to indicate it's disabled */\n}\n\n.nW2NG3krvonnMg3Rivul {\n position: fixed;\n bottom: var(--chatbot-spacing-y);\n right: var(--chatbot-spacing-x);\n width: 0px;\n height: 0px;\n opacity: 0;\n z-index: 99999;\n\n .O6vpXieYIso2cRwekQqD {\n bottom: calc(var(--chatbot-circle-radius) + 20px);\n position: absolute;\n right: 10px;\n width: 200px;\n background-color: var(--chatbot-popup-background-color);\n color: var(--chatbot-popup-text-color);\n border-radius: 10px 10px 0 10px;\n padding: 15px;\n box-shadow: 0 8px 16px 6px rgba(0, 24, 56, 0.2);\n button,\n button:hover {\n background-color: transparent;\n border: none;\n }\n }\n\n /* Triangle effect on the bottom right of the popup */\n .gx3uioPf7XBH183XzIsX:after {\n content: \"\";\n position: absolute;\n top: 100%;\n right: 0;\n border-width: 10px;\n border-style: solid;\n border-color: var(--chatbot-popup-background-color) transparent transparent\n transparent;\n }\n\n .SnDh_4tosUOepmnQ6qtw {\n position: absolute;\n top: -25px;\n right: 0px;\n color: rgb(98, 97, 97);\n }\n}\n\n.JU97fmgoNdy3Tfye2Dws {\n border-radius: 50px;\n background-color: var(--chatbot-circle-background-color);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n cursor: pointer;\n box-shadow: 0 8px 16px 6px rgba(0, 24, 56, 0.2);\n height: var(--chatbot-circle-radius);\n width: var(--chatbot-circle-radius);\n border-radius: 50%;\n}\n\n/* Add these styles to your Chatbot.module.css file */\n\n.pkiR_TxdafoynTpvRdcQ {\n margin-top: 10px;\n font-size: 0.95rem;\n width: 100%;\n}\n\n.pkiR_TxdafoynTpvRdcQ > p {\n overflow-wrap: anywhere;\n}\n\n.e3H6efowOKFf_KRpdCmA {\n margin-bottom: 5px;\n font-weight: bold;\n}\n\n.OwwGVqJowxUZVJuA2czv {\n text-decoration: none;\n color: var(--chatbot-bot-text-color);\n}\n\n.sCGr7vUZhXadHUv6e8Ir,\n.sCGr7vUZhXadHUv6e8Ir:hover {\n color: var(--chatbot-inline-link-color) !important;\n text-decoration: underline;\n font-size: 0.95rem;\n}\n\n.Bo90PPN_Vahh0nlC0xX9 {\n a {\n text-decoration: none;\n color: var(--chatbot-inline-link-color) !important;\n font-weight: 900;\n }\n}\n\n.Bo90PPN_Vahh0nlC0xX9 > p {\n margin-bottom: 0;\n}\n`, \"\"]);\n// Exports\n___CSS_LOADER_EXPORT___.locals = {\n\t\"chatbotParent\": `bOJfQLIDdUlPEJzIVy0q`,\n\t\"chatbotContainer\": `mrPuzpzfdEmQSyTxnvxI`,\n\t\"headerContainer\": `QJ6c9UPW4NdCwINA2KKw`,\n\t\"header\": `BAciNorgEk8q0Hjvg_Nd`,\n\t\"headerTitleContainer\": `rDNjthKTeHigjuhTaXFw`,\n\t\"headerTitle\": `qhIJF8jtTVHpl14phrvO`,\n\t\"headerSubtitle\": `bJ4qOXuizp8yq01SFRbe`,\n\t\"body\": `M84EXuBJb0ITHqmcP033`,\n\t\"bodyPromptsContainer\": `KJH5XQVgMgo5xa6hVmpQ`,\n\t\"promptsData\": `uodJA65d3QSnFHHi6wEE`,\n\t\"option\": `yMV8jdykQ0p_dG9sc2yK`,\n\t\"optionText\": `OFNqcCdonr5dxzTTZ3zK`,\n\t\"conversation\": `F4te4w0Rg9nYSlvqoOuU`,\n\t\"chatbotIcon\": `y3GymRJmY0MX41NX3xWJ`,\n\t\"message\": `soVXB5uMOlUUVHtMVzBV`,\n\t\"messageText\": `On7UzyczZB0EFpZn8hAO`,\n\t\"messageBody\": `ys2v0_nbj9UZ2GtmsGFl`,\n\t\"icon\": `ePwR5gBjQ2sQwKScmcAF`,\n\t\"footerBranding\": `n5EFd7Gb3khLARy7SBEE`,\n\t\"footer\": `Cswbzq1GQuTnMGpPi4Zt`,\n\t\"footerForm\": `ibnXsq4b88cDDvfQQgYn`,\n\t\"promptDrawerButton\": `vJUKQIrYod4Q56Cduawg`,\n\t\"promptDrawerIcon\": `fy7pExJR53Br8Rva0_mA`,\n\t\"chatbotCircleContainer\": `nW2NG3krvonnMg3Rivul`,\n\t\"popupContainer\": `O6vpXieYIso2cRwekQqD`,\n\t\"popup\": `gx3uioPf7XBH183XzIsX`,\n\t\"closePopup\": `SnDh_4tosUOepmnQ6qtw`,\n\t\"chatbotCircle\": `JU97fmgoNdy3Tfye2Dws`,\n\t\"sourceList\": `pkiR_TxdafoynTpvRdcQ`,\n\t\"sourceTitle\": `e3H6efowOKFf_KRpdCmA`,\n\t\"sourceLink\": `OwwGVqJowxUZVJuA2czv`,\n\t\"sourceSwitch\": `sCGr7vUZhXadHUv6e8Ir`,\n\t\"markdownToHtmlContainer\": `Bo90PPN_Vahh0nlC0xX9`\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://VamChatbot/./Chatbot.module.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D");
|
|
238
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap);\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.bOJfQLIDdUlPEJzIVy0q {\n --chatbot-height: 70%;\n --chatbot-width: 30%;\n --chatbot-header-height: 50px;\n --chatbot-footer-height: 80px;\n --chatbot-footer-input-height: 40px;\n --chatbot-circle-radius: 70px;\n --chatbot-spacing-x: 10px;\n --chatbot-spacing-y: 10px;\n --chatbot-border-radius: 10px;\n}\n\n@media only screen and (max-width: 1280px) {\n .bOJfQLIDdUlPEJzIVy0q {\n --chatbot-width: 50%;\n --chatbot-height: 80%;\n }\n}\n\n@media only screen and (max-width: 768px) {\n .bOJfQLIDdUlPEJzIVy0q {\n --chatbot-width: 100%;\n --chatbot-height: 100%;\n --chatbot-header-height: 70px;\n --chatbot-spacing-x: 0px;\n --chatbot-spacing-y: 0px;\n --chatbot-border-radius: 0px;\n }\n}\n\n.mrPuzpzfdEmQSyTxnvxI {\n font-family: \"Open Sans\", sans-serif;\n font-optical-sizing: auto;\n font-weight: 600;\n font-style: normal;\n font-variation-settings: \"wdth\" 90;\n position: fixed;\n overflow: hidden;\n border-radius: var(--chatbot-border-radius);\n bottom: var(--chatbot-spacing-y);\n right: var(--chatbot-spacing-x);\n height: var(--chatbot-height);\n width: var(--chatbot-width);\n box-shadow: 0 8px 16px 6px rgba(0, 24, 56, 0.2);\n z-index: 99999;\n}\n\n.QJ6c9UPW4NdCwINA2KKw {\n position: absolute;\n width: 100%;\n background-color: var(--chatbot-header-color);\n padding: 0 10px;\n border-bottom: 0.5px solid var(--chatbot-border-color);\n z-index: 99998;\n height: var(--chatbot-header-height);\n}\n\n.BAciNorgEk8q0Hjvg_Nd {\n height: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-size: 1.4rem;\n\n button,\n button:hover {\n background-color: var(--chatbot-header-color);\n color: var(--chatbot-header-text-color);\n border: none;\n }\n}\n\n.rDNjthKTeHigjuhTaXFw {\n display: flex;\n height: 100%;\n flex-direction: column;\n align-items: flex-start;\n /* Align items to the start (left) */\n justify-content: center;\n /* Center vertically within the container */\n /* padding-left: 10px; */\n /* Add padding to push it away from the edge */\n}\n\n.qhIJF8jtTVHpl14phrvO {\n font-weight: 700;\n text-align: start;\n color: var(--chatbot-header-text-color);\n}\n\n.bJ4qOXuizp8yq01SFRbe {\n font-weight: 700;\n font-size: 0.4rem;\n text-align: start;\n}\n\n.M84EXuBJb0ITHqmcP033 {\n margin-top: var(--chatbot-header-height);\n font-size: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: var(--chatbot-background-color);\n height: calc(100% - var(--chatbot-header-height));\n}\n\n.KJH5XQVgMgo5xa6hVmpQ {\n .uodJA65d3QSnFHHi6wEE {\n row-gap: 10px;\n column-gap: 10px;\n padding: 0 20px;\n }\n .yMV8jdykQ0p_dG9sc2yK {\n gap: 10px;\n border-radius: 10px;\n padding: 5px 12px;\n cursor: pointer;\n color: var(--chatbot-prompt-text-color);\n\n .OFNqcCdonr5dxzTTZ3zK {\n font-size: 0.85rem;\n }\n }\n}\n\n.F4te4w0Rg9nYSlvqoOuU {\n overflow: auto;\n}\n\n.y3GymRJmY0MX41NX3xWJ {\n /* width: 45px; */\n height: 70px;\n}\n\n.soVXB5uMOlUUVHtMVzBV,\n.BAciNorgEk8q0Hjvg_Nd {\n .y3GymRJmY0MX41NX3xWJ {\n /* width: 40px; */\n height: 40px;\n }\n}\n\n.soVXB5uMOlUUVHtMVzBV {\n display: flex;\n gap: 10px;\n height: fit-content;\n padding: 10px 20px;\n\n .On7UzyczZB0EFpZn8hAO {\n border-radius: 10px;\n padding: 5px 10px;\n display: flex;\n align-items: center;\n flex-direction: column;\n align-items: flex-start;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);\n }\n\n i {\n font-size: 24px;\n }\n}\n\n.ys2v0_nbj9UZ2GtmsGFl {\n display: flex;\n flex-direction: column;\n}\n\n.uodJA65d3QSnFHHi6wEE {\n display: flex;\n flex-wrap: wrap;\n row-gap: 20px;\n column-gap: 15px;\n justify-content: center;\n padding: 20px 10px 20px 10px;\n}\n\n.yMV8jdykQ0p_dG9sc2yK {\n display: flex;\n gap: 10px;\n align-items: center;\n height: fit-content;\n background-color: var(--chatbot-prompt-background-color);\n border-radius: 10px;\n padding: 10px 30px;\n border: none;\n font-variation-settings: \"wdth\" 90;\n font-weight: 600;\n color: var(--chatbot-prompt-text-color);\n\n .OFNqcCdonr5dxzTTZ3zK {\n font-size: 0.85rem;\n }\n}\n\n.yMV8jdykQ0p_dG9sc2yK:disabled {\n cursor: not-allowed;\n}\n\n.ePwR5gBjQ2sQwKScmcAF {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 30px;\n max-width: 30px;\n height: 30px;\n border-radius: 30px;\n background-color: grey;\n}\n\n.n5EFd7Gb3khLARy7SBEE {\n display: block;\n text-align: center;\n font-size: 0.7rem;\n font-weight: 700;\n margin: 2px 0;\n background: linear-gradient(to bottom, #39cff6, #ad84ff);\n background-clip: text;\n color: transparent;\n}\n\n.Cswbzq1GQuTnMGpPi4Zt {\n width: 95%;\n margin: 0 auto 10px;\n /* Centering the footer with margin auto */\n border-radius: 10px;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);\n}\n\n.ibnXsq4b88cDDvfQQgYn {\n display: flex;\n align-items: center;\n min-height: var(--chatbot-footer-input-height);\n height: var(--chatbot-footer-input-height);\n border-radius: 10px;\n overflow: hidden;\n\n i {\n font-size: 1.75rem;\n }\n /* Ensures the button and input are nicely clipped within the border radius */\n}\n\n.vJUKQIrYod4Q56Cduawg {\n background-color: transparent;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n\n.vJUKQIrYod4Q56Cduawg .fy7pExJR53Br8Rva0_mA {\n color: var(--chatbot-header-color);\n /* Initial color, change this to your default icon color */\n transition: color 0.3s ease;\n}\n\n.Cswbzq1GQuTnMGpPi4Zt input {\n font-family: \"Open Sans\", sans-serif;\n font-optical-sizing: auto;\n font-weight: 600;\n font-style: normal;\n font-variation-settings: \"wdth\" 95;\n color: var(--chatbot-input-text-color);\n background-color: var(--chatbot-background-color);\n border: none;\n padding: 0 10px;\n width: 100%;\n height: 100%;\n outline: none;\n transition:\n box-shadow 0.3s ease,\n border-color 0.3s ease;\n}\n\n.Cswbzq1GQuTnMGpPi4Zt input:focus {\n border-color: var(--chatbot-user-bubble-color);\n box-shadow: 0 10 10px var(--chatbot-user-bubble-color);\n /* Adds a glow effect on focus */\n}\n\n.ibnXsq4b88cDDvfQQgYn button {\n background-color: var(--chatbot-background-color);\n border: none;\n padding: 0 15px;\n /* Extra padding for the button */\n color: var(--chatbot-footer-icon-color);\n cursor: pointer;\n transition: color 0.3s ease;\n}\n\n.ibnXsq4b88cDDvfQQgYn button:hover {\n color: var(--chatbot-footericons-hover-color);\n /* filter: brightness(2); */\n /* Optional: hover effect for the button */\n}\n\n.ibnXsq4b88cDDvfQQgYn button:disabled {\n opacity: 0.6;\n /* Makes the button appear disabled */\n cursor: not-allowed;\n /* Changes cursor to indicate it's disabled */\n}\n\n.nW2NG3krvonnMg3Rivul {\n position: fixed;\n bottom: var(--chatbot-spacing-y);\n right: var(--chatbot-spacing-x);\n width: 0px;\n height: 0px;\n opacity: 0;\n z-index: 99999;\n\n .O6vpXieYIso2cRwekQqD {\n bottom: calc(var(--chatbot-circle-radius) + 20px);\n position: absolute;\n right: 10px;\n width: 200px;\n background-color: var(--chatbot-popup-background-color);\n color: var(--chatbot-popup-text-color);\n border-radius: 10px 10px 0 10px;\n padding: 15px;\n box-shadow: 0 8px 16px 6px rgba(0, 24, 56, 0.2);\n button,\n button:hover {\n background-color: transparent;\n border: none;\n }\n }\n\n /* Triangle effect on the bottom right of the popup */\n .gx3uioPf7XBH183XzIsX:after {\n content: \"\";\n position: absolute;\n top: 100%;\n right: 0;\n border-width: 10px;\n border-style: solid;\n border-color: var(--chatbot-popup-background-color) transparent transparent\n transparent;\n }\n\n .SnDh_4tosUOepmnQ6qtw {\n position: absolute;\n top: -25px;\n right: 0px;\n color: rgb(98, 97, 97);\n }\n}\n\n.JU97fmgoNdy3Tfye2Dws {\n border-radius: 50px;\n background-color: var(--chatbot-circle-background-color);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n cursor: pointer;\n box-shadow: 0 8px 16px 6px rgba(0, 24, 56, 0.2);\n height: var(--chatbot-circle-radius);\n width: var(--chatbot-circle-radius);\n border-radius: 50%;\n}\n\n/* Add these styles to your Chatbot.module.css file */\n\n.pkiR_TxdafoynTpvRdcQ {\n margin-top: 10px;\n font-size: 0.95rem;\n width: 100%;\n}\n\n.pkiR_TxdafoynTpvRdcQ > p {\n overflow-wrap: anywhere;\n}\n\n.e3H6efowOKFf_KRpdCmA {\n margin-bottom: 5px;\n font-weight: bold;\n}\n\n.OwwGVqJowxUZVJuA2czv {\n text-decoration: none;\n color: var(--chatbot-bot-text-color);\n}\n\n.sCGr7vUZhXadHUv6e8Ir,\n.sCGr7vUZhXadHUv6e8Ir:hover {\n color: var(--chatbot-inline-link-color) !important;\n text-decoration: underline;\n font-size: 0.95rem;\n}\n\n.Bo90PPN_Vahh0nlC0xX9 {\n a {\n text-decoration: none;\n color: var(--chatbot-inline-link-color) !important;\n font-weight: 900;\n }\n}\n\n.Bo90PPN_Vahh0nlC0xX9 > p {\n margin-bottom: 0;\n}\n\n.FS7iocV3c2mOOsu9YyGQ {\n margin-top: 10px;\n background-color: #25d366; /* WhatsApp Green */\n color: white;\n border: none;\n border-radius: 10px;\n padding: 8px 16px;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.9rem;\n transition: opacity 0.3s;\n width: fit-content;\n text-decoration: none;\n align-self: center; /* Center align in flex container */\n}\n\n.FS7iocV3c2mOOsu9YyGQ:hover {\n opacity: 0.9;\n color: white;\n}\n\n.FS7iocV3c2mOOsu9YyGQ i {\n font-size: 1.1rem;\n}\n\n.bGwt6w5szvfURLrK73Qg {\n width: 100%;\n height: 1px;\n background-color: var(\n --chatbot-border-color,\n #e0e0e0\n ); /* Subtle gray fallback */\n margin: 10px 0;\n opacity: 0.5;\n}\n\n.x0MAnMNVi2NF7R3qljbA {\n /* text-align: center; */\n align-self: center;\n font-size: 0.9rem;\n margin-bottom: 5px;\n color: var(--chatbot-bot-text-color);\n font-weight: 600;\n}\n`, \"\"]);\n// Exports\n___CSS_LOADER_EXPORT___.locals = {\n\t\"chatbotParent\": `bOJfQLIDdUlPEJzIVy0q`,\n\t\"chatbotContainer\": `mrPuzpzfdEmQSyTxnvxI`,\n\t\"headerContainer\": `QJ6c9UPW4NdCwINA2KKw`,\n\t\"header\": `BAciNorgEk8q0Hjvg_Nd`,\n\t\"headerTitleContainer\": `rDNjthKTeHigjuhTaXFw`,\n\t\"headerTitle\": `qhIJF8jtTVHpl14phrvO`,\n\t\"headerSubtitle\": `bJ4qOXuizp8yq01SFRbe`,\n\t\"body\": `M84EXuBJb0ITHqmcP033`,\n\t\"bodyPromptsContainer\": `KJH5XQVgMgo5xa6hVmpQ`,\n\t\"promptsData\": `uodJA65d3QSnFHHi6wEE`,\n\t\"option\": `yMV8jdykQ0p_dG9sc2yK`,\n\t\"optionText\": `OFNqcCdonr5dxzTTZ3zK`,\n\t\"conversation\": `F4te4w0Rg9nYSlvqoOuU`,\n\t\"chatbotIcon\": `y3GymRJmY0MX41NX3xWJ`,\n\t\"message\": `soVXB5uMOlUUVHtMVzBV`,\n\t\"messageText\": `On7UzyczZB0EFpZn8hAO`,\n\t\"messageBody\": `ys2v0_nbj9UZ2GtmsGFl`,\n\t\"icon\": `ePwR5gBjQ2sQwKScmcAF`,\n\t\"footerBranding\": `n5EFd7Gb3khLARy7SBEE`,\n\t\"footer\": `Cswbzq1GQuTnMGpPi4Zt`,\n\t\"footerForm\": `ibnXsq4b88cDDvfQQgYn`,\n\t\"promptDrawerButton\": `vJUKQIrYod4Q56Cduawg`,\n\t\"promptDrawerIcon\": `fy7pExJR53Br8Rva0_mA`,\n\t\"chatbotCircleContainer\": `nW2NG3krvonnMg3Rivul`,\n\t\"popupContainer\": `O6vpXieYIso2cRwekQqD`,\n\t\"popup\": `gx3uioPf7XBH183XzIsX`,\n\t\"closePopup\": `SnDh_4tosUOepmnQ6qtw`,\n\t\"chatbotCircle\": `JU97fmgoNdy3Tfye2Dws`,\n\t\"sourceList\": `pkiR_TxdafoynTpvRdcQ`,\n\t\"sourceTitle\": `e3H6efowOKFf_KRpdCmA`,\n\t\"sourceLink\": `OwwGVqJowxUZVJuA2czv`,\n\t\"sourceSwitch\": `sCGr7vUZhXadHUv6e8Ir`,\n\t\"markdownToHtmlContainer\": `Bo90PPN_Vahh0nlC0xX9`,\n\t\"supportButton\": `FS7iocV3c2mOOsu9YyGQ`,\n\t\"messageDivider\": `bGwt6w5szvfURLrK73Qg`,\n\t\"supportText\": `x0MAnMNVi2NF7R3qljbA`\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://VamChatbot/./Chatbot.module.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D");
|
|
239
239
|
|
|
240
240
|
/***/ }),
|
|
241
241
|
|
package/package.json
CHANGED