@openk9ui/openk9-chatbot 3.0.1

package/dist/components/Chatbot.js

@@ -0,0 +1,399 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ThemeProvider, useTheme, Box, Button, IconButton } from "@mui/material";
+import React__default from "react";
+import Search from "./Search.js";
+import useGenerateResponse from "./useGenerateResponse.js";
+import { c as createTheme, S as SingleMessage } from "../SingleMessage-Dyc7W2JZ.js";
+import { useFocusTrap } from "./useFocusTrap.js";
+import { Translate } from "./Translate.js";
+import { LanguageProvider } from "./LanguageContext.js";
+import '../assets/Chatbot.css';const defaultThemeK9 = createTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 576,
+      md: 768,
+      lg: 992,
+      xl: 1200
+    }
+  },
+  palette: {
+    primary: {
+      main: "#C0272B",
+      contrastText: "#FFF",
+      dark: "#b10707",
+      light: "#e77979"
+    },
+    text: {
+      primary: "#000000",
+      secondary: "#666666"
+    }
+  },
+  typography: {
+    allVariants: {
+      fontFamily: "Titillium Web"
+    },
+    fontFamily: "Titillium Web",
+    body1: {
+      fontWeight: 400,
+      fontSize: "12px",
+      lineHeight: "19px"
+    },
+    body2: {
+      fontFamily: "Roboto",
+      font: "Roboto",
+      fontWeight: 500,
+      fontSize: "10px",
+      lineHeight: "12px"
+    },
+    h5: {
+      fontWeight: 400,
+      fontSize: "12px",
+      lineHeight: "22px"
+    }
+  },
+  spacing: 2,
+  shape: { borderRadius: 2 }
+});
+const Chatbot = ({
+  icon,
+  title,
+  initialMessage = "Benvenuti su Openk9, hai dei dubbi? non esitare a chiedere",
+  nameChatbot,
+  themeCustom,
+  language,
+  tenant,
+  callbackAuthorization
+}) => {
+  return /* @__PURE__ */ jsx(React__default.Fragment, { children: /* @__PURE__ */ jsx(ThemeProvider, { theme: themeCustom || defaultThemeK9, children: /* @__PURE__ */ jsx(LanguageProvider, { initialLanguage: language, children: /* @__PURE__ */ jsx(
+    StructureChatbot,
+    {
+      icon,
+      title,
+      initialMessage,
+      nameChatbot,
+      tenant,
+      callbackAuthorization
+    }
+  ) }) }) });
+};
+const StructureChatbot = ({
+  icon,
+  title,
+  initialMessage = "Benvenuti su Openk9, hai dei dubbi? non esitare a chiedere",
+  nameChatbot,
+  tenant = "",
+  callbackAuthorization
+}) => {
+  const [isView, setIsView] = React__default.useState(false);
+  const [welcomeMessageTime, setWelcomeMessageTime] = React__default.useState("");
+  const chatbotSearchRef = React__default.useRef(null);
+  const theme = useTheme();
+  const {
+    messages,
+    generateResponse,
+    cancelAllResponses,
+    isChatting,
+    isLoading: isGenerateMessage,
+    resetMessage
+  } = useGenerateResponse({
+    initialMessages: [],
+    tenant,
+    callbackAuthorization
+  });
+  const [trapRef] = useFocusTrap(isView);
+  const messagesEndRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (messages && messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages]);
+  React__default.useEffect(() => {
+    const currentTime = /* @__PURE__ */ new Date();
+    setWelcomeMessageTime(
+      currentTime.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit"
+      })
+    );
+  }, []);
+  React__default.useEffect(() => {
+    if (isView && chatbotSearchRef.current) {
+      chatbotSearchRef.current.focus();
+    }
+  }, [isView]);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: "openk9-chatbot-structure",
+      ref: trapRef,
+      sx: {
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "flex-end",
+        bgcolor: "trasparent",
+        flexDirection: "column",
+        gap: "12px"
+      },
+      children: [
+        isView && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            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 ${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: [
+              /* @__PURE__ */ jsx(
+                ChatbotHeader,
+                {
+                  title,
+                  icon,
+                  isChatting,
+                  resetMessage,
+                  setIsView
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MessageList,
+                {
+                  messages,
+                  icon,
+                  welcomeMessageTime,
+                  initialMessage,
+                  isGenerateMessage,
+                  messagesEndRef,
+                  nameChatbot
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Search,
+                {
+                  handleSearch: generateResponse,
+                  cancelAllResponses,
+                  isChatting,
+                  icon,
+                  chatbotSearchRef
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "openk9-toggle-chatbot-button",
+            "aria-label": isView ? Translate({ label: "closeChatbot" }) : 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: () => setIsView(!isView),
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: "openk9-toggle-icon-wrapper",
+                sx: {
+                  justifyContent: "center",
+                  display: "flex",
+                  height: "100%",
+                  width: "100%",
+                  alignItems: "center"
+                },
+                children: isView ? icon.closeIcon : icon.buttonIcon
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const ChatbotHeader = ({ title, icon, isChatting, resetMessage, setIsView }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: "openk9-chatbot-header",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        borderBottom: `1px solid ${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: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: "openk9-logo-icon",
+            sx: {
+              minWidth: 0,
+              padding: 0
+            },
+            children: icon.logoIcon
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { children: title }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            className: "openk9-header-buttons",
+            display: "flex",
+            gap: "5px",
+            alignItems: "center",
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: "openk9-refresh-button",
+                  disabled: isChatting,
+                  onClick: resetMessage,
+                  "aria-label": Translate({ label: "clearChat" }),
+                  sx: {
+                    minWidth: 0,
+                    padding: 0,
+                    height: "24px",
+                    width: "24px"
+                  },
+                  children: icon.refreshChatIcon
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  className: "openk9-close-button",
+                  onClick: () => setIsView(false),
+                  role: "button",
+                  size: "small",
+                  sx: { display: { xs: "block", sm: "none" } },
+                  "aria-label": Translate({ label: "closeChatbot" }),
+                  children: icon.closeModal
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const MessageList = ({
+  messages,
+  icon,
+  initialMessage,
+  isGenerateMessage,
+  messagesEndRef,
+  nameChatbot,
+  welcomeMessageTime = ""
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    className: "openk9-message-list-container",
+    component: "section",
+    sx: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden"
+    },
+    children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: "openk9-message-list",
+        sx: {
+          flex: 1,
+          overflowY: "auto",
+          paddingInline: "16px",
+          gap: "12px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          bgcolor: "transparent"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            SingleMessage,
+            {
+              contentMessage: initialMessage,
+              isChatbot: true,
+              timeMessage: welcomeMessageTime,
+              icon: icon.chatbotIcon,
+              isLoading: false,
+              nameChatbot
+            }
+          ),
+          messages.length > 0 && messages.map((message, index) => {
+            const sendTime = (message == null ? void 0 : message.sendTime) ? new Date(message == null ? void 0 : message.sendTime).toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit"
+            }) : "";
+            const responseTime = (message == null ? void 0 : message.responseTime) ? new Date(message == null ? void 0 : message.responseTime).toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit"
+            }) : (message == null ? void 0 : message.responseTime) || "";
+            return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                SingleMessage,
+                {
+                  contentMessage: message.question,
+                  isChatbot: false,
+                  timeMessage: sendTime,
+                  icon: icon.userIcon,
+                  isLoading: false
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SingleMessage,
+                {
+                  contentMessage: message.answer,
+                  status: message.status,
+                  sources: message == null ? void 0 : message.sources,
+                  isChatbot: true,
+                  timeMessage: responseTime,
+                  icon: icon.chatbotIcon,
+                  isLoading: (isGenerateMessage == null ? void 0 : isGenerateMessage.id) === message.id && (isGenerateMessage == null ? void 0 : isGenerateMessage.isLoading),
+                  nameChatbot
+                }
+              ),
+              index === messages.length - 1 && /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+            ] }, index);
+          })
+        ]
+      }
+    )
+  }
+);
+export {
+  Chatbot as default
+};

package/dist/components/LanguageContext.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useEffect } from "react";
+const LanguageContext = createContext(
+  void 0
+);
+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;
+  }
+}
+const LanguageProvider = ({
+  children,
+  initialLanguage
+}) => {
+  const [language, setLanguage] = useState(
+    initialLanguage ? remappingLanguage(initialLanguage) : remappingLanguage(document.documentElement.lang || "en")
+  );
+  useEffect(() => {
+    if (initialLanguage) {
+      setLanguage(remappingLanguage(initialLanguage));
+    }
+  }, [initialLanguage]);
+  useEffect(() => {
+    const handleLangChange = () => {
+      setLanguage(remappingLanguage(document.documentElement.lang || "en"));
+    };
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "attributes" && mutation.attributeName === "lang") {
+          handleLangChange();
+        }
+      }
+    });
+    observer.observe(document.documentElement, { attributes: true });
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(LanguageContext.Provider, { value: { language, setLanguage }, children });
+};
+export {
+  LanguageProvider,
+  LanguageContext as default
+};

package/dist/components/Search.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme, Box, TextField, Button } from "@mui/material";
+import React__default from "react";
+import { Translate } from "./Translate.js";
+function Search({
+  handleSearch,
+  isChatting,
+  icon,
+  chatbotSearchRef
+}) {
+  const [search, setSearch] = React__default.useState("");
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      className: "openk9-search-form",
+      onSubmit: (event) => {
+        event.preventDefault();
+        handleSearch(search);
+        setSearch("");
+      },
+      style: {
+        display: "flex",
+        gap: "15px",
+        padding: "12px",
+        borderTop: "1px solid #C7C7C7C7"
+      },
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          className: "openk9-search-box",
+          display: "flex",
+          width: "100%",
+          gap: 1,
+          children: [
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                className: "openk9-search-input",
+                fullWidth: true,
+                inputRef: chatbotSearchRef,
+                variant: "outlined",
+                value: search,
+                onChange: (event) => setSearch(event.currentTarget.value),
+                placeholder: 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
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "openk9-search-button",
+                type: "submit",
+                variant: "contained",
+                "aria-label": 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
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  Search as default
+};

package/dist/components/SingleMessage.js

@@ -0,0 +1,9 @@
+import "react/jsx-runtime";
+import "@emotion/styled";
+import "@mui/material";
+import "./Translate.js";
+import { S } from "../SingleMessage-Dyc7W2JZ.js";
+import "react";
+export {
+  S as SingleMessage
+};

package/dist/components/Translate.js

@@ -0,0 +1,69 @@
+import { useLanguage } from "./useLanguage.js";
+function Translate({ label }) {
+  var _a;
+  const { language } = useLanguage();
+  const htmlLang = language;
+  const translation = (_a = translations[label]) == null ? void 0 : _a[htmlLang];
+  return translation || label;
+}
+const translations = {
+  closeChatbot: {
+    it_IT: "Chiudi il chatbot",
+    en_US: "Close the chatbot",
+    fr_FR: "Fermez le chatbot",
+    es_ES: "Cerrar el chatbot",
+    de_DE: "Schließen Sie den Chatbot"
+  },
+  openChatbot: {
+    it_IT: "Apri il chatbot",
+    en_US: "Open the chatbot",
+    fr_FR: "Ouvrir le chatbot",
+    es_ES: "Abrir el chatbot",
+    de_DE: "Öffnen Sie den Chatbot"
+  },
+  clearChat: {
+    it_IT: "Svuota la chat",
+    en_US: "Clear the chat",
+    fr_FR: "Effacer le chat",
+    es_ES: "Borrar el chat",
+    de_DE: "Leeren Sie den Chat"
+  },
+  startQuestion: {
+    it_IT: "Fai partire una domanda",
+    en_US: "Start a question",
+    fr_FR: "Commencez une question",
+    es_ES: "Iniciar una pregunta",
+    de_DE: "Starten Sie eine Frage"
+  },
+  youSendMessage: {
+    it_IT: "tu hai mandato un messaggio alle ",
+    en_US: "you sent a message at ",
+    fr_FR: "vous avez envoyé un message à ",
+    es_ES: "tú enviaste un mensaje a las ",
+    de_DE: "du hast eine Nachricht um "
+  },
+  sendMessage: {
+    it_IT: "ha mandato un messaggio alle ",
+    en_US: "sent a message at ",
+    fr_FR: "a envoyé un message à ",
+    es_ES: "envió un mensaje a las ",
+    de_DE: "hat eine Nachricht um "
+  },
+  customPlaceholder: {
+    it_IT: "scrivi il tuo messaggio...",
+    en_US: "write your message...",
+    fr_FR: "écris ton message...",
+    es_ES: "escribe tu mensaje...",
+    de_DE: "Schreiben Sie Ihre Nachricht..."
+  },
+  searchLabel: {
+    it_IT: "Cerca nel chatbot",
+    en_US: "Search in the chatbot",
+    fr_FR: "Rechercher dans le chatbot",
+    es_ES: "Buscar en el chatbot",
+    de_DE: "Im Chatbot suchen"
+  }
+};
+export {
+  Translate
+};