@openk9ui/openk9-chatbot 3.0.1

package/dist/lib/components/Chatbot.js

@@ -0,0 +1,168 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_1 = __importDefault(require("react"));
+var Search_1 = __importDefault(require("./Search"));
+var useGenerateResponse_1 = __importDefault(require("./useGenerateResponse"));
+var SingleMessage_1 = require("./SingleMessage");
+var useFocusTrap_1 = require("./useFocusTrap");
+var Translate_1 = require("./Translate");
+var theme_1 = require("../../src/theme");
+var LanguageContext_1 = require("./LanguageContext");
+require("@fontsource/roboto");
+require("@fontsource/titillium-web");
+var Chatbot = function (_a) {
+    var icon = _a.icon, title = _a.title, _b = _a.initialMessage, initialMessage = _b === void 0 ? "Benvenuti su Openk9, hai dei dubbi? non esitare a chiedere" : _b, nameChatbot = _a.nameChatbot, themeCustom = _a.themeCustom, language = _a.language, tenant = _a.tenant, callbackAuthorization = _a.callbackAuthorization;
+    return ((0, jsx_runtime_1.jsx)(react_1["default"].Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, __assign({ theme: themeCustom || theme_1.defaultThemeK9 }, { children: (0, jsx_runtime_1.jsx)(LanguageContext_1.LanguageProvider, __assign({ initialLanguage: language }, { children: (0, jsx_runtime_1.jsx)(StructureChatbot, { icon: icon, title: title, initialMessage: initialMessage, nameChatbot: nameChatbot, tenant: tenant, callbackAuthorization: callbackAuthorization }) })) })) }));
+};
+var StructureChatbot = function (_a) {
+    var icon = _a.icon, title = _a.title, _b = _a.initialMessage, initialMessage = _b === void 0 ? "Benvenuti su Openk9, hai dei dubbi? non esitare a chiedere" : _b, nameChatbot = _a.nameChatbot, _c = _a.tenant, tenant = _c === void 0 ? "" : _c, callbackAuthorization = _a.callbackAuthorization;
+    var _d = react_1["default"].useState(false), isView = _d[0], setIsView = _d[1];
+    var _e = react_1["default"].useState(""), welcomeMessageTime = _e[0], setWelcomeMessageTime = _e[1];
+    var chatbotSearchRef = react_1["default"].useRef(null);
+    var theme = (0, material_1.useTheme)();
+    var _f = (0, useGenerateResponse_1["default"])({
+        initialMessages: [],
+        tenant: tenant,
+        callbackAuthorization: callbackAuthorization
+    }), messages = _f.messages, generateResponse = _f.generateResponse, cancelAllResponses = _f.cancelAllResponses, isChatting = _f.isChatting, isGenerateMessage = _f.isLoading, resetMessage = _f.resetMessage;
+    var trapRef = (0, useFocusTrap_1.useFocusTrap)(isView)[0];
+    var messagesEndRef = react_1["default"].useRef(null);
+    react_1["default"].useEffect(function () {
+        if (messages && messagesEndRef.current) {
+            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [messages]);
+    react_1["default"].useEffect(function () {
+        var currentTime = new Date();
+        setWelcomeMessageTime(currentTime.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit"
+        }));
+    }, []);
+    react_1["default"].useEffect(function () {
+        if (isView && chatbotSearchRef.current) {
+            chatbotSearchRef.current.focus();
+        }
+    }, [isView]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ className: "openk9-chatbot-structure", ref: trapRef, sx: {
+            display: "flex",
+            justifyContent: "flex-start",
+            alignItems: "flex-end",
+            bgcolor: "trasparent",
+            flexDirection: "column",
+            gap: "12px"
+        } }, { children: [isView && ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ className: "openk9-chatbot-container", sx: {
+                    position: { xs: "fixed", sm: "unset" },
+                    top: { xs: "0", sm: "unset" },
+                    left: { xs: "0", sm: "unset" },
+                    display: "flex",
+                    flexDirection: "column",
+                    border: {
+                        xs: "unset",
+                        sm: "1px solid ".concat(theme.palette.divider)
+                    },
+                    borderRadius: { xs: "unset", sm: theme.shape.borderRadius * 2 },
+                    backgroundColor: theme.palette.primary.contrastText,
+                    height: { xs: "100vh", sm: "460px" },
+                    width: { xs: "100vw", sm: "365px" },
+                    boxShadow: theme.shadows[3],
+                    zIndex: 2
+                } }, { children: [(0, jsx_runtime_1.jsx)(ChatbotHeader, { title: title, icon: icon, isChatting: isChatting, resetMessage: resetMessage, setIsView: setIsView }), (0, jsx_runtime_1.jsx)(MessageList, { messages: messages, icon: icon, welcomeMessageTime: welcomeMessageTime, initialMessage: initialMessage, isGenerateMessage: isGenerateMessage, messagesEndRef: messagesEndRef, nameChatbot: nameChatbot }), (0, jsx_runtime_1.jsx)(Search_1["default"], { handleSearch: generateResponse, cancelAllResponses: cancelAllResponses, isChatting: isChatting, icon: icon, chatbotSearchRef: chatbotSearchRef })] }))), (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ className: "openk9-toggle-chatbot-button", "aria-label": isView
+                    ? (0, Translate_1.Translate)({ label: "closeChatbot" })
+                    : (0, Translate_1.Translate)({ label: "openChatbot" }), sx: {
+                    borderRadius: "50%",
+                    color: "white",
+                    display: { xs: isView ? "none" : "unset", sm: "flex" },
+                    minWidth: "56px",
+                    width: "56px",
+                    height: "56px",
+                    boxShadow: theme.shadows[3],
+                    background: theme.palette.primary.main,
+                    padding: 0,
+                    "&:hover": {
+                        background: theme.palette.primary.light,
+                        boxShadow: theme.shadows[3]
+                    }
+                }, onClick: function () { return setIsView(!isView); } }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ className: "openk9-toggle-icon-wrapper", sx: {
+                        justifyContent: "center",
+                        display: "flex",
+                        height: "100%",
+                        width: "100%",
+                        alignItems: "center"
+                    } }, { children: isView ? icon.closeIcon : icon.buttonIcon })) }))] })));
+};
+var ChatbotHeader = function (_a) {
+    var title = _a.title, icon = _a.icon, isChatting = _a.isChatting, resetMessage = _a.resetMessage, setIsView = _a.setIsView;
+    var theme = (0, material_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ className: "openk9-chatbot-header", sx: {
+            display: "flex",
+            alignItems: "center",
+            borderBottom: "1px solid ".concat(theme.palette.divider),
+            pb: theme.spacing(2),
+            mb: theme.spacing(2),
+            gap: theme.spacing(2),
+            padding: "12px",
+            paddingBottom: "0px",
+            marginBottom: "12px",
+            justifyContent: "space-between"
+        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, __assign({ className: "openk9-logo-icon", sx: {
+                    minWidth: 0,
+                    padding: 0
+                } }, { children: icon.logoIcon })), (0, jsx_runtime_1.jsx)("div", { children: title }), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ className: "openk9-header-buttons", display: "flex", gap: "5px", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, __assign({ className: "openk9-refresh-button", disabled: isChatting, onClick: resetMessage, "aria-label": (0, Translate_1.Translate)({ label: "clearChat" }), sx: {
+                            minWidth: 0,
+                            padding: 0,
+                            height: "24px",
+                            width: "24px"
+                        } }, { children: icon.refreshChatIcon })), (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ className: "openk9-close-button", onClick: function () { return setIsView(false); }, role: "button", size: "small", sx: { display: { xs: "block", sm: "none" } }, "aria-label": (0, Translate_1.Translate)({ label: "closeChatbot" }) }, { children: icon.closeModal }))] }))] })));
+};
+var MessageList = function (_a) {
+    var messages = _a.messages, icon = _a.icon, initialMessage = _a.initialMessage, isGenerateMessage = _a.isGenerateMessage, messagesEndRef = _a.messagesEndRef, nameChatbot = _a.nameChatbot, _b = _a.welcomeMessageTime, welcomeMessageTime = _b === void 0 ? "" : _b;
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ className: "openk9-message-list-container", component: "section", sx: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+        } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ className: "openk9-message-list", sx: {
+                flex: 1,
+                overflowY: "auto",
+                paddingInline: "16px",
+                gap: "12px",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-start",
+                bgcolor: "transparent"
+            } }, { children: [(0, jsx_runtime_1.jsx)(SingleMessage_1.SingleMessage, { contentMessage: initialMessage, isChatbot: true, timeMessage: welcomeMessageTime, icon: icon.chatbotIcon, isLoading: false, nameChatbot: nameChatbot }), messages.length > 0 &&
+                    messages.map(function (message, index) {
+                        var sendTime = (message === null || message === void 0 ? void 0 : message.sendTime)
+                            ? new Date(message === null || message === void 0 ? void 0 : message.sendTime).toLocaleTimeString([], {
+                                hour: "2-digit",
+                                minute: "2-digit"
+                            })
+                            : "";
+                        var responseTime = (message === null || message === void 0 ? void 0 : message.responseTime)
+                            ? new Date(message === null || message === void 0 ? void 0 : message.responseTime).toLocaleTimeString([], {
+                                hour: "2-digit",
+                                minute: "2-digit"
+                            })
+                            : (message === null || message === void 0 ? void 0 : message.responseTime) || "";
+                        return ((0, jsx_runtime_1.jsxs)(react_1["default"].Fragment, { children: [(0, jsx_runtime_1.jsx)(SingleMessage_1.SingleMessage, { contentMessage: message.question, isChatbot: false, timeMessage: sendTime, icon: icon.userIcon, isLoading: false }), (0, jsx_runtime_1.jsx)(SingleMessage_1.SingleMessage, { contentMessage: message.answer, status: message.status, sources: message === null || message === void 0 ? void 0 : message.sources, isChatbot: true, timeMessage: responseTime, icon: icon.chatbotIcon, isLoading: (isGenerateMessage === null || isGenerateMessage === void 0 ? void 0 : isGenerateMessage.id) === message.id &&
+                                        (isGenerateMessage === null || isGenerateMessage === void 0 ? void 0 : isGenerateMessage.isLoading), nameChatbot: nameChatbot }), index === messages.length - 1 && (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] }, index));
+                    })] })) })));
+};
+exports["default"] = Chatbot;

package/dist/lib/components/LanguageContext.js

@@ -0,0 +1,63 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+exports.LanguageProvider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var LanguageContext = (0, react_1.createContext)(undefined);
+function remappingLanguage(language) {
+    switch (language) {
+        case "en":
+            return "en_US";
+        case "it":
+            return "it_IT";
+        case "es":
+            return "es_ES";
+        case "de":
+            return "de_DE";
+        case "fr":
+            return "fr_FR";
+        default:
+            return language;
+    }
+}
+var LanguageProvider = function (_a) {
+    var children = _a.children, initialLanguage = _a.initialLanguage;
+    var _b = (0, react_1.useState)(initialLanguage
+        ? remappingLanguage(initialLanguage)
+        : remappingLanguage(document.documentElement.lang || "en")), language = _b[0], setLanguage = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (initialLanguage) {
+            setLanguage(remappingLanguage(initialLanguage));
+        }
+    }, [initialLanguage]);
+    (0, react_1.useEffect)(function () {
+        var handleLangChange = function () {
+            setLanguage(remappingLanguage(document.documentElement.lang || "en"));
+        };
+        var observer = new MutationObserver(function (mutationsList) {
+            for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
+                var mutation = mutationsList_1[_i];
+                if (mutation.type === "attributes" &&
+                    mutation.attributeName === "lang") {
+                    handleLangChange();
+                }
+            }
+        });
+        observer.observe(document.documentElement, { attributes: true });
+        return function () { return observer.disconnect(); };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(LanguageContext.Provider, __assign({ value: { language: language, setLanguage: setLanguage } }, { children: children })));
+};
+exports.LanguageProvider = LanguageProvider;
+exports["default"] = LanguageContext;

package/dist/lib/components/Search.js

@@ -0,0 +1,56 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_1 = __importDefault(require("react"));
+var Translate_1 = require("./Translate");
+function Search(_a) {
+    var handleSearch = _a.handleSearch, isChatting = _a.isChatting, icon = _a.icon, chatbotSearchRef = _a.chatbotSearchRef;
+    var _b = react_1["default"].useState(""), search = _b[0], setSearch = _b[1];
+    var theme = (0, material_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)("form", __assign({ className: "openk9-search-form", onSubmit: function (event) {
+            event.preventDefault();
+            handleSearch(search);
+            setSearch("");
+        }, style: {
+            display: "flex",
+            gap: "15px",
+            padding: "12px",
+            borderTop: "1px solid #C7C7C7C7"
+        } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ className: "openk9-search-box", display: "flex", width: "100%", gap: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { className: "openk9-search-input", fullWidth: true, inputRef: chatbotSearchRef, variant: "outlined", value: search, onChange: function (event) { return setSearch(event.currentTarget.value); }, placeholder: (0, Translate_1.Translate)({ label: "customPlaceholder" }), sx: { width: "100%", background: "white" }, inputProps: {
+                        style: {
+                            padding: 0,
+                            paddingInline: "6px",
+                            height: "29px",
+                            fontSize: "12px",
+                            fontWeight: "400",
+                            lineHeight: "18.25px",
+                            textAlign: "left",
+                            borderRadius: theme.shape.borderRadius * 2
+                        }
+                    } }), (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ className: "openk9-search-button", type: "submit", variant: "contained", "aria-label": (0, Translate_1.Translate)({ label: "startQuestion" }), color: "primary", sx: {
+                        backgroundColor: theme.palette.primary.main,
+                        color: theme.palette.primary.contrastText,
+                        stroke: "white",
+                        fill: "transparent",
+                        minWidth: "29px",
+                        height: "29px",
+                        padding: 0,
+                        borderRadius: theme.shape.borderRadius
+                    }, disabled: search === "" || isChatting }, { children: icon.searchIcon }))] })) })));
+}
+exports["default"] = Search;