@openk9ui/openk9-chatbot 3.0.1

package/dist/lib/components/SingleMessage.js

@@ -0,0 +1,385 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.SingleMessage = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var material_1 = require("@mui/material");
+var react_markdown_1 = __importDefault(require("react-markdown"));
+var Translate_1 = require("./Translate");
+var Error_1 = __importDefault(require("@mui/icons-material/Error"));
+var react_1 = require("react");
+var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
+var ContentCopy_1 = __importDefault(require("@mui/icons-material/ContentCopy"));
+var Check_1 = __importDefault(require("@mui/icons-material/Check"));
+var OpenInFull_1 = __importDefault(require("@mui/icons-material/OpenInFull"));
+function SingleMessage(_a) {
+    var _this = this;
+    var contentMessage = _a.contentMessage, timeMessage = _a.timeMessage, isChatbot = _a.isChatbot, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, icon = _a.icon, nameChatbot = _a.nameChatbot, status = _a.status, sources = _a.sources, _c = _a.themeInfo, themeInfo = _c === void 0 ? "light" : _c;
+    sources = sources || [];
+    var theme = (0, material_1.useTheme)();
+    sources && console.log(sources);
+    var _d = (0, react_1.useState)(null), copiedSource = _d[0], setCopiedSource = _d[1];
+    var _e = (0, react_1.useState)(false), showAllSources = _e[0], setShowAllSources = _e[1];
+    var _f = (0, react_1.useState)(new Set()), expandedChips = _f[0], setExpandedChips = _f[1];
+    var maxVisibleSources = 8;
+    var visibleSources = sources.slice(0, maxVisibleSources);
+    var remainingSources = sources.length - maxVisibleSources;
+    var copySource = function (source) { return __awaiter(_this, void 0, void 0, function () {
+        var err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, navigator.clipboard.writeText(source.url)];
+                case 1:
+                    _a.sent();
+                    setCopiedSource(source.url);
+                    setTimeout(function () { return setCopiedSource(null); }, 2000);
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_1 = _a.sent();
+                    console.error("Errore durante la copia:", err_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var toggleChipExpansion = function (url) {
+        var newSet = new Set(expandedChips);
+        if (newSet.has(url)) {
+            newSet["delete"](url);
+            if (newSet.size < sources.length) {
+                setShowAllSources(false);
+            }
+        }
+        else {
+            newSet.add(url);
+            if (newSet.size === sources.length) {
+                setShowAllSources(true);
+            }
+        }
+        setExpandedChips(newSet);
+    };
+    var getTypeColor = function (source) {
+        var baseColor = getStableColor(source, themeInfo);
+        var hexToRgb = function (hex) {
+            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+            return result
+                ? {
+                    r: parseInt(result[1], 16),
+                    g: parseInt(result[2], 16),
+                    b: parseInt(result[3], 16)
+                }
+                : { r: 200, g: 200, b: 200 };
+        };
+        var rgb = hexToRgb(baseColor);
+        var backgroundOpacity = themeInfo === "light" ? 0.1 : 0.2;
+        var borderOpacity = themeInfo === "light" ? 0.3 : 0.4;
+        var lightBackground = "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(backgroundOpacity, ")");
+        var lightBorder = "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(borderOpacity, ")");
+        return {
+            backgroundColor: lightBackground,
+            color: baseColor,
+            borderColor: lightBorder
+        };
+    };
+    var ariaLabel = (isChatbot
+        ? nameChatbot + " " + (0, Translate_1.Translate)({ label: "sendMessage" })
+        : (0, Translate_1.Translate)({ label: "youSendMessage" })) + timeMessage;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ className: "openk9-single-message-container", display: "flex", flexDirection: "column", gap: "5px", width: "100%" }, { children: [(status === null || status === void 0 ? void 0 : status.toUpperCase()) === "ERROR" ? ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ className: "openk9-message-box", display: "flex", alignItems: "flex-end", gap: 4, sx: {
+                    gap: "6px",
+                    backgroundColor: "white",
+                    flexDirection: isChatbot ? "row" : "row-reverse"
+                } }, { children: [icon && (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ className: "openk9-chatbot-icon" }, { children: icon })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ className: "openk9-error-message-container", sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            background: "#FCEAEA",
+                            border: "1px solid #D32F2F",
+                            borderRadius: "10px",
+                            padding: "12px 16px",
+                            gap: "10px",
+                            width: "100%"
+                        }, "aria-live": "polite" }, { children: [(0, jsx_runtime_1.jsx)(Error_1["default"], { sx: { color: "#D32F2F", fontSize: "20px" } }), (0, jsx_runtime_1.jsx)(ParagraphMessage, __assign({ className: "openk9-paragraph-message", "$font": theme.typography.fontFamily, "$color": "#D32F2F" }, { children: contentMessage }))] }))] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ className: "openk9-message-box", display: "flex", alignItems: "flex-end", gap: 4, sx: {
+                    gap: "6px",
+                    backgroundColor: "white",
+                    flexDirection: isChatbot ? "row" : "row-reverse"
+                } }, { children: [icon && (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ className: "openk9-chatbot-icon" }, { children: icon })), (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ className: "openk9-message-content-wrapper", sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            width: ["-webkit-fill-available", "-moz-available", "100%"],
+                            gap: "6px"
+                        } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ className: "openk9-message-content", sx: {
+                                overflow: "auto",
+                                display: "flex",
+                                flexDirection: "column",
+                                backgroundColor: isChatbot
+                                    ? theme.palette.background["default"]
+                                    : theme.palette.primary.main,
+                                border: "1px solid",
+                                borderColor: theme.palette.primary.main,
+                                paddingInline: "16px",
+                                color: !isChatbot ? "white" : "black",
+                                borderRadius: isChatbot
+                                    ? "12px 12px 12px 2px"
+                                    : "12px 12px 2px 12px"
+                            }, "aria-live": "polite" }, { children: [(0, jsx_runtime_1.jsx)(ParagraphMessage, __assign({ className: "openk9-paragraph-message", "$isLoading": isLoading, "$font": theme.typography.fontFamily }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ className: "openk9-loading-icon-container", sx: {
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            gap: "5px"
+                                        } }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { className: "openk9-loader", disableShrink: true, size: 30, sx: { color: theme.palette.primary.main } }) }))) : ((0, jsx_runtime_1.jsxs)(FocusableSection, __assign({ className: "openk9-focusable-section", "$contraxtFocus": isChatbot ? "black" : "white", "aria-label": ariaLabel, tabIndex: 0 }, { children: [nameChatbot && ((0, jsx_runtime_1.jsx)(ParagraphName, __assign({ className: "openk9-paragraph-name", "$font": theme.typography.fontFamily || "" }, { children: nameChatbot }))), (0, jsx_runtime_1.jsx)(react_markdown_1["default"], { children: contentMessage })] }))) })), sources.length > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ mb: 6 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, sx: { overflowX: "hidden" } }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, __assign({ variant: "body2", color: "text.secondary" }, { children: [sources.length, " sources"] })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ component: "button", onClick: function () {
+                                                        var newState = !showAllSources;
+                                                        setShowAllSources(newState);
+                                                        if (newState) {
+                                                            var allExpanded = new Set(sources.map(function (s) { return s.url || ""; }));
+                                                            setExpandedChips(allExpanded);
+                                                        }
+                                                        else {
+                                                            setExpandedChips(new Set());
+                                                        }
+                                                    }, sx: {
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        gap: 0.5,
+                                                        color: "#12518f",
+                                                        fontSize: "0.75rem",
+                                                        background: "none",
+                                                        border: "none",
+                                                        cursor: "pointer",
+                                                        "&:hover": { color: "#2782ea" }
+                                                    } }, { children: [(0, jsx_runtime_1.jsx)(Visibility_1["default"], { sx: { fontSize: "0.75rem" } }), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "caption" }, { children: showAllSources ? "Hide all" : "Show all" }))] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ display: "flex", flexWrap: "wrap", gap: 1, sx: { overflowX: "hidden" } }, { children: [visibleSources.map(function (source, index) {
+                                                    var typeColors = getTypeColor(source.url || "");
+                                                    return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ display: "flex", alignItems: "center", gap: 1, flex: 1, sx: {
+                                                                width: expandedChips.has(source.url || "")
+                                                                    ? "230px"
+                                                                    : "170px",
+                                                                overflow: "hidden",
+                                                                textOverflow: expandedChips.has(source.url || "")
+                                                                    ? "unset"
+                                                                    : "ellipsis",
+                                                                whiteSpace: "nowrap"
+                                                            } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                                                        flex: 1,
+                                                                        width: 8,
+                                                                        height: 8,
+                                                                        flexShrink: 0,
+                                                                        flexGrow: 0,
+                                                                        borderRadius: "50%",
+                                                                        backgroundColor: getStableColor(source.url, themeInfo)
+                                                                    } }), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "caption", fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, { children: (source === null || source === void 0 ? void 0 : source.title) && source.title })), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ size: "small", onClick: function (e) {
+                                                                                e.stopPropagation();
+                                                                                copySource(source);
+                                                                            }, sx: {
+                                                                                p: 0.25,
+                                                                                ml: 0.5,
+                                                                                "&:hover": {
+                                                                                    backgroundColor: "rgba(0,0,0,0.05)"
+                                                                                }
+                                                                            } }, { children: copiedSource === source.url ? ((0, jsx_runtime_1.jsx)(Check_1["default"], { sx: { fontSize: "0.75rem" } })) : ((0, jsx_runtime_1.jsx)(ContentCopy_1["default"], { sx: { fontSize: "0.75rem" } })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ size: "small", onClick: function (e) {
+                                                                                e.stopPropagation();
+                                                                                toggleChipExpansion(source.url || "");
+                                                                            }, sx: {
+                                                                                p: 0.25,
+                                                                                "&:hover": {
+                                                                                    backgroundColor: "rgba(0,0,0,0.05)"
+                                                                                }
+                                                                            } }, { children: (0, jsx_runtime_1.jsx)(OpenInFull_1["default"], { sx: { fontSize: "0.75rem" } }) }))] })] })), onClick: function () { return window.open(source.url, "_blank"); }, sx: {
+                                                            backgroundColor: typeColors.backgroundColor,
+                                                            color: typeColors.color,
+                                                            border: "1px solid ".concat(typeColors.borderColor),
+                                                            cursor: "pointer",
+                                                            "&:hover": {
+                                                                backgroundColor: typeColors.backgroundColor,
+                                                                opacity: 0.8
+                                                            }
+                                                        }, size: "small" }, source.url || index));
+                                                }), remainingSources > 0 && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ display: "flex", alignItems: "center", gap: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(OpenInFull_1["default"], { sx: { fontSize: "0.75rem" } }), (0, jsx_runtime_1.jsxs)(material_1.Typography, __assign({ variant: "caption" }, { children: ["+", remainingSources] }))] })), sx: {
+                                                        backgroundColor: themeInfo === "light" ? "#f5f5f5" : "#2d2d2d",
+                                                        color: themeInfo === "light" ? "#616161" : "#b0b0b0",
+                                                        cursor: "pointer",
+                                                        "&:hover": {
+                                                            backgroundColor: themeInfo === "light" ? "#e0e0e0" : "#404040"
+                                                        }
+                                                    }, size: "small" }))] }))] })))] })) }))] }))), (0, jsx_runtime_1.jsx)(ParagraphTime, __assign({ className: "openk9-paragraph-time", "$color": theme.palette.text.secondary, "$font": theme.typography.body2.font || "Roboto", style: { alignSelf: !isChatbot ? "start" : "end" } }, { children: timeMessage }))] })));
+}
+exports.SingleMessage = SingleMessage;
+var ParagraphTime = styled_1["default"].p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  margin: 0px;\n  align-self: end;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 1.5;\n  letter-spacing: 1.2px;\n  word-spacing: 1.6px;\n  font-family: ", ";\n"], ["\n  color: ", ";\n  margin: 0px;\n  align-self: end;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 1.5;\n  letter-spacing: 1.2px;\n  word-spacing: 1.6px;\n  font-family: ", ";\n"])), function (props) { return props.$color; }, function (props) { return props.$font; });
+var ParagraphMessage = styled_1["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  margin: ", ";\n  width: ", ";\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: left;\n  font-family: ", ";\n  padding-block: 3px;\n"], ["\n  color: ", ";\n  margin: ", ";\n  width: ", ";\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: left;\n  font-family: ", ";\n  padding-block: 3px;\n"])), function (props) { return props.$color; }, function (props) { return (!props.$isLoading ? "0" : "16px"); }, function (props) { return !props.$width; }, function (props) { return props.$font; });
+var ParagraphName = styled_1["default"].p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 700;\n  size: 10px;\n  line-height: 15.21px;\n  font-family: ", ";\n"], ["\n  color: ", ";\n  font-weight: 700;\n  size: 10px;\n  line-height: 15.21px;\n  font-family: ", ";\n"])), function (props) { return props.$color; }, function (props) { return props.$font; });
+var FocusableSection = styled_1["default"].section(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-block: 0.2px;\n\n  &:focus {\n    outline: 2px solid ", ";\n  }\n"], ["\n  padding-block: 0.2px;\n\n  &:focus {\n    outline: 2px solid ", ";\n  }\n"])), function (props) { return props.$contraxtFocus; });
+function generateAccessibleColor(theme) {
+    var MAX_TRIES = 20;
+    var bgColor = theme === "light" ? "#ffffff" : "#000000";
+    for (var i = 0; i < MAX_TRIES; i++) {
+        var hue = Math.floor(Math.random() * 360);
+        var saturation = 80;
+        var lightness = theme === "light" ? 20 + Math.random() * 30 : 60 + Math.random() * 30;
+        var hex = hslToHex(hue, saturation, lightness);
+        if (hasGoodContrast(hex, bgColor, 6.0)) {
+            return hex;
+        }
+    }
+    return theme === "light" ? "#111111" : "#eeeeee";
+}
+function hexToRgb(hex) {
+    hex = hex.replace(/^#/, "");
+    if (hex.length === 3) {
+        hex = hex
+            .split("")
+            .map(function (c) { return c + c; })
+            .join("");
+    }
+    var num = parseInt(hex, 16);
+    return {
+        r: (num >> 16) & 255,
+        g: (num >> 8) & 255,
+        b: num & 255
+    };
+}
+function luminance(hex) {
+    var rgb = hexToRgb(hex);
+    var srgb = [rgb.r, rgb.g, rgb.b].map(function (c) {
+        var c_ = c / 255;
+        return c_ <= 0.03928 ? c_ / 12.92 : Math.pow((c_ + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
+}
+function contrastRatio(fg, bg) {
+    var L1 = luminance(fg);
+    var L2 = luminance(bg);
+    return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
+}
+function hasGoodContrast(fg, bg, minRatio) {
+    if (minRatio === void 0) { minRatio = 6.0; }
+    return contrastRatio(fg, bg) >= minRatio;
+}
+function hslToHex(h, s, l) {
+    l /= 100;
+    var a = (s * Math.min(l, 1 - l)) / 100;
+    var f = function (n) {
+        var k = (n + h / 30) % 12;
+        var color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+        return Math.round(255 * color)
+            .toString(16)
+            .padStart(2, "0");
+    };
+    return "#".concat(f(0)).concat(f(8)).concat(f(4));
+}
+var sourceColorMap = new Map();
+function getStableColor(source, theme) {
+    if (!source)
+        return theme === "light" ? "#666" : "#999";
+    if (!sourceColorMap.has(source)) {
+        var mappedColor = mappingColors(source, theme);
+        if (mappedColor) {
+            sourceColorMap.set(source, { light: mappedColor, dark: mappedColor });
+        }
+        else {
+            sourceColorMap.set(source, {
+                light: generateAccessibleColor("light"),
+                dark: generateAccessibleColor("dark")
+            });
+        }
+    }
+    return sourceColorMap.get(source)[theme];
+}
+function mappingColors(source, theme) {
+    switch (source === null || source === void 0 ? void 0 : source.toLowerCase()) {
+        case "ansa.it":
+            return theme === "light" ? "#1976d2" : "#42a5f5";
+        case "eurosport.it":
+            return theme === "light" ? "#d32f2f" : "#ef5350";
+        case "ilpost.it":
+            return theme === "light" ? "#388e3c" : "#66bb6a";
+        case "corriere.it":
+            return theme === "light" ? "#f57c00" : "#ffa726";
+        case "techreport.com":
+            return theme === "light" ? "#1976d2" : "#42a5f5";
+        case "openai.com":
+            return theme === "light" ? "#7b1fa2" : "#ab47bc";
+        case "meta.ai":
+            return theme === "light" ? "#1976d2" : "#42a5f5";
+        case "kaggle.com":
+            return theme === "light" ? "#f57c00" : "#ffa726";
+        case "ethics.ai":
+            return theme === "light" ? "#1976d2" : "#42a5f5";
+        case "coursera.org":
+            return theme === "light" ? "#d32f2f" : "#ef5350";
+        case "spotify.com":
+            return "#1dd15d";
+        case "arxiv.org":
+            return theme === "light" ? "#7b1fa2" : "#ab47bc";
+        case "github.com":
+            return theme === "light" ? "#24292e" : "#f0f6fc";
+        case "stackoverflow.com":
+            return theme === "light" ? "#f48024" : "#f69c3d";
+        case "medium.com":
+            return theme === "light" ? "#000000" : "#ffffff";
+        case "youtube.com":
+            return theme === "light" ? "#ff0000" : "#ff4444";
+        case "x.com":
+            return theme === "light" ? "#1da1f2" : "#1d9bf0";
+        case "linkedin.com":
+            return theme === "light" ? "#0077b5" : "#0a66c2";
+        case "reddit.com":
+            return theme === "light" ? "#ff4500" : "#ff6314";
+        case "wikipedia.org":
+            return theme === "light" ? "#000000" : "#ffffff";
+        default:
+            return undefined;
+    }
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/lib/components/Translate.js

@@ -0,0 +1,71 @@
+"use strict";
+exports.__esModule = true;
+exports.Translate = void 0;
+var useLanguage_1 = require("./useLanguage");
+function Translate(_a) {
+    var _b;
+    var label = _a.label;
+    var language = (0, useLanguage_1.useLanguage)().language;
+    var htmlLang = language;
+    var translation = (_b = translations[label]) === null || _b === void 0 ? void 0 : _b[htmlLang];
+    return translation || label;
+}
+exports.Translate = Translate;
+var 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"
+    }
+};

package/dist/lib/components/client.js

@@ -0,0 +1,170 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.OpenK9Client = exports.OpenK9ClientContext = void 0;
+var react_1 = __importDefault(require("react"));
+exports.OpenK9ClientContext = react_1["default"].createContext(null /* must break app if not provided */);
+function Client() {
+    return null;
+}
+exports["default"] = Client;
+function OpenK9Client(_a) {
+    var callbackAuthorization = _a.callbackAuthorization;
+    function authFetch(route, init) {
+        if (init === void 0) { init = {}; }
+        return __awaiter(this, void 0, void 0, function () {
+            var authorization, headers;
+            return __generator(this, function (_a) {
+                authorization = callbackAuthorization && callbackAuthorization();
+                headers = __assign(__assign({}, init.headers), (authorization ? { authorization: authorization } : {}));
+                return [2 /*return*/, fetch(route, __assign(__assign({}, init), { headers: headers }))];
+            });
+        });
+    }
+    return {
+        // authInit: keycloakInit,
+        // async authenticate() {
+        // 	await keycloak.login();
+        // },
+        // async deauthenticate() {
+        // 	await keycloak.logout();
+        // },
+        // async getUserProfile(): Promise<{ name?: string } | undefined | null> {
+        // 	if (!keycloak.authenticated) {
+        // 		throw new Error("User is not authenticated");
+        // 	}
+        // 	try {
+        // 		const userInfo = await keycloak.loadUserInfo();
+        // 		return userInfo as { name: string };
+        // 	} catch (error) {
+        // 		throw error;
+        // 	}
+        // },
+        getInitialMessages: function (chatId) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response, data;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, authFetch("/api/rag/chat/".concat(chatId))];
+                        case 1:
+                            response = _a.sent();
+                            if (!response.ok)
+                                throw new Error("Network response was not ok");
+                            return [4 /*yield*/, response.json()];
+                        case 2:
+                            data = _a.sent();
+                            return [2 /*return*/, data || []];
+                    }
+                });
+            });
+        },
+        // async getUserInfo(): Promise<getUserInfo> {
+        // 	const response = await fetch(`/api/datasource/buckets/current`);
+        // 	if (!response.ok) throw new Error("Network response was not ok");
+        // 	const data = await response.json();
+        // 	return data;
+        // },
+        getHistoryChat: function (searchQuery) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response, result;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            //se refresha pagina browser, la chat riprende dal punto precedente
+                            console.log("Calling getHistoryChat with URL:", "/api/rag/user-chats");
+                            return [4 /*yield*/, authFetch("/api/rag/user-chats", {
+                                    method: "POST",
+                                    headers: {
+                                        accept: "application/json",
+                                        "Content-Type": "application/json"
+                                    },
+                                    body: JSON.stringify(searchQuery)
+                                })];
+                        case 1:
+                            response = _a.sent();
+                            if (!response.ok) {
+                                console.error("Response not ok:", response.status, response.statusText);
+                                throw new Error("Network response was not ok");
+                            }
+                            return [4 /*yield*/, response.json()];
+                        case 2:
+                            result = _a.sent();
+                            return [2 /*return*/, result];
+                    }
+                });
+            });
+        },
+        GenerateResponse: function (_a) {
+            var url = _a.url, searchQuery = _a.searchQuery, controller = _a.controller;
+            return __awaiter(this, void 0, void 0, function () {
+                var response;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, authFetch(url, {
+                                method: "POST",
+                                headers: {
+                                    accept: "application/json",
+                                    "Content-Type": "application/json"
+                                },
+                                body: JSON.stringify(searchQuery),
+                                signal: controller.signal
+                            })];
+                        case 1:
+                            response = _b.sent();
+                            return [2 /*return*/, response];
+                    }
+                });
+            });
+        }
+    };
+}
+exports.OpenK9Client = OpenK9Client;

package/dist/lib/components/styled.js

@@ -0,0 +1,14 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.ParagraphMessage = exports.ParagraphTime = void 0;
+var styled_1 = __importDefault(require("@emotion/styled"));
+exports.ParagraphTime = styled_1["default"].p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  margin: 0px;\n  align-self: end;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 11.72px;\n"], ["\n  color: ", ";\n  margin: 0px;\n  align-self: end;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 11.72px;\n"])), function (props) { return props.$color; });
+exports.ParagraphMessage = styled_1["default"].p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color:", ";\n    margin: 0px;\n    fontSize: \"12px\",\n    fontWeight: \"400\",\n    lineHeight: \"18.25px\",\n    textAlign: \"left\",\n    "], ["\n    color:", ";\n    margin: 0px;\n    fontSize: \"12px\",\n    fontWeight: \"400\",\n    lineHeight: \"18.25px\",\n    textAlign: \"left\",\n    "])), function (props) { return props.$color; });
+var templateObject_1, templateObject_2;