@openk9ui/openk9-chatbot 3.0.1 → 3.1.1-SNAPSHOT
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/{SingleMessage-Dyc7W2JZ.js → SingleMessage-D59l6K_M.js} +196 -182
- package/dist/components/Chatbot.js +1 -1
- package/dist/components/SingleMessage.js +1 -1
- package/dist/lib/components/Chatbot.js +40 -51
- package/dist/lib/components/LanguageContext.js +3 -14
- package/dist/lib/components/Search.js +11 -22
- package/dist/lib/components/SingleMessage.js +46 -58
- package/dist/lib/components/Translate.js +11 -12
- package/dist/lib/components/client.js +46 -20
- package/dist/lib/components/styled.js +3 -3
- package/dist/lib/components/useFocusTrap.js +5 -6
- package/dist/lib/components/useGenerateResponse.js +14 -13
- package/dist/lib/components/useLanguage.js +2 -2
- package/dist/lib/main.js +2 -2
- package/dist/src/theme.js +12 -12
- package/dist/types/lib/components/SingleMessage.d.ts +0 -1
- package/dist/types/lib/components/client.d.ts +10 -14
- package/dist/types/lib/components/styled.d.ts +2 -3
- package/dist/types/lib/components/useFocusTrap.d.ts +0 -1
- package/package.json +9 -11
|
@@ -1,19 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
16
|
-
exports
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
6
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
7
|
var material_1 = require("@mui/material");
|
|
19
8
|
var react_1 = __importDefault(require("react"));
|
|
@@ -28,46 +17,46 @@ require("@fontsource/roboto");
|
|
|
28
17
|
require("@fontsource/titillium-web");
|
|
29
18
|
var Chatbot = function (_a) {
|
|
30
19
|
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;
|
|
31
|
-
return ((0, jsx_runtime_1.jsx)(react_1
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: themeCustom || theme_1.defaultThemeK9, children: (0, jsx_runtime_1.jsx)(LanguageContext_1.LanguageProvider, { initialLanguage: language, children: (0, jsx_runtime_1.jsx)(StructureChatbot, { icon: icon, title: title, initialMessage: initialMessage, nameChatbot: nameChatbot, tenant: tenant, callbackAuthorization: callbackAuthorization }) }) }) }));
|
|
32
21
|
};
|
|
33
22
|
var StructureChatbot = function (_a) {
|
|
34
23
|
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;
|
|
35
|
-
var _d = react_1
|
|
36
|
-
var _e = react_1
|
|
37
|
-
var chatbotSearchRef = react_1
|
|
24
|
+
var _d = react_1.default.useState(false), isView = _d[0], setIsView = _d[1];
|
|
25
|
+
var _e = react_1.default.useState(""), welcomeMessageTime = _e[0], setWelcomeMessageTime = _e[1];
|
|
26
|
+
var chatbotSearchRef = react_1.default.useRef(null);
|
|
38
27
|
var theme = (0, material_1.useTheme)();
|
|
39
|
-
var _f = (0, useGenerateResponse_1
|
|
28
|
+
var _f = (0, useGenerateResponse_1.default)({
|
|
40
29
|
initialMessages: [],
|
|
41
30
|
tenant: tenant,
|
|
42
|
-
callbackAuthorization: callbackAuthorization
|
|
31
|
+
callbackAuthorization: callbackAuthorization,
|
|
43
32
|
}), messages = _f.messages, generateResponse = _f.generateResponse, cancelAllResponses = _f.cancelAllResponses, isChatting = _f.isChatting, isGenerateMessage = _f.isLoading, resetMessage = _f.resetMessage;
|
|
44
33
|
var trapRef = (0, useFocusTrap_1.useFocusTrap)(isView)[0];
|
|
45
|
-
var messagesEndRef = react_1
|
|
46
|
-
react_1
|
|
34
|
+
var messagesEndRef = react_1.default.useRef(null);
|
|
35
|
+
react_1.default.useEffect(function () {
|
|
47
36
|
if (messages && messagesEndRef.current) {
|
|
48
37
|
messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
|
|
49
38
|
}
|
|
50
39
|
}, [messages]);
|
|
51
|
-
react_1
|
|
40
|
+
react_1.default.useEffect(function () {
|
|
52
41
|
var currentTime = new Date();
|
|
53
42
|
setWelcomeMessageTime(currentTime.toLocaleTimeString([], {
|
|
54
43
|
hour: "2-digit",
|
|
55
|
-
minute: "2-digit"
|
|
44
|
+
minute: "2-digit",
|
|
56
45
|
}));
|
|
57
46
|
}, []);
|
|
58
|
-
react_1
|
|
47
|
+
react_1.default.useEffect(function () {
|
|
59
48
|
if (isView && chatbotSearchRef.current) {
|
|
60
49
|
chatbotSearchRef.current.focus();
|
|
61
50
|
}
|
|
62
51
|
}, [isView]);
|
|
63
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Box,
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "openk9-chatbot-structure", ref: trapRef, sx: {
|
|
64
53
|
display: "flex",
|
|
65
54
|
justifyContent: "flex-start",
|
|
66
55
|
alignItems: "flex-end",
|
|
67
56
|
bgcolor: "trasparent",
|
|
68
57
|
flexDirection: "column",
|
|
69
|
-
gap: "12px"
|
|
70
|
-
}
|
|
58
|
+
gap: "12px",
|
|
59
|
+
}, children: [isView && ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "openk9-chatbot-container", sx: {
|
|
71
60
|
position: { xs: "fixed", sm: "unset" },
|
|
72
61
|
top: { xs: "0", sm: "unset" },
|
|
73
62
|
left: { xs: "0", sm: "unset" },
|
|
@@ -75,15 +64,15 @@ var StructureChatbot = function (_a) {
|
|
|
75
64
|
flexDirection: "column",
|
|
76
65
|
border: {
|
|
77
66
|
xs: "unset",
|
|
78
|
-
sm: "1px solid ".concat(theme.palette.divider)
|
|
67
|
+
sm: "1px solid ".concat(theme.palette.divider),
|
|
79
68
|
},
|
|
80
69
|
borderRadius: { xs: "unset", sm: theme.shape.borderRadius * 2 },
|
|
81
70
|
backgroundColor: theme.palette.primary.contrastText,
|
|
82
71
|
height: { xs: "100vh", sm: "460px" },
|
|
83
72
|
width: { xs: "100vw", sm: "365px" },
|
|
84
73
|
boxShadow: theme.shadows[3],
|
|
85
|
-
zIndex: 2
|
|
86
|
-
}
|
|
74
|
+
zIndex: 2,
|
|
75
|
+
}, 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, { className: "openk9-toggle-chatbot-button", "aria-label": isView
|
|
87
76
|
? (0, Translate_1.Translate)({ label: "closeChatbot" })
|
|
88
77
|
: (0, Translate_1.Translate)({ label: "openChatbot" }), sx: {
|
|
89
78
|
borderRadius: "50%",
|
|
@@ -97,20 +86,20 @@ var StructureChatbot = function (_a) {
|
|
|
97
86
|
padding: 0,
|
|
98
87
|
"&:hover": {
|
|
99
88
|
background: theme.palette.primary.light,
|
|
100
|
-
boxShadow: theme.shadows[3]
|
|
101
|
-
}
|
|
102
|
-
}, onClick: function () { return setIsView(!isView); }
|
|
89
|
+
boxShadow: theme.shadows[3],
|
|
90
|
+
},
|
|
91
|
+
}, onClick: function () { return setIsView(!isView); }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: "openk9-toggle-icon-wrapper", sx: {
|
|
103
92
|
justifyContent: "center",
|
|
104
93
|
display: "flex",
|
|
105
94
|
height: "100%",
|
|
106
95
|
width: "100%",
|
|
107
|
-
alignItems: "center"
|
|
108
|
-
}
|
|
96
|
+
alignItems: "center",
|
|
97
|
+
}, children: isView ? icon.closeIcon : icon.buttonIcon }) })] }));
|
|
109
98
|
};
|
|
110
99
|
var ChatbotHeader = function (_a) {
|
|
111
100
|
var title = _a.title, icon = _a.icon, isChatting = _a.isChatting, resetMessage = _a.resetMessage, setIsView = _a.setIsView;
|
|
112
101
|
var theme = (0, material_1.useTheme)();
|
|
113
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Box,
|
|
102
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "openk9-chatbot-header", sx: {
|
|
114
103
|
display: "flex",
|
|
115
104
|
alignItems: "center",
|
|
116
105
|
borderBottom: "1px solid ".concat(theme.palette.divider),
|
|
@@ -120,25 +109,25 @@ var ChatbotHeader = function (_a) {
|
|
|
120
109
|
padding: "12px",
|
|
121
110
|
paddingBottom: "0px",
|
|
122
111
|
marginBottom: "12px",
|
|
123
|
-
justifyContent: "space-between"
|
|
124
|
-
}
|
|
112
|
+
justifyContent: "space-between",
|
|
113
|
+
}, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { className: "openk9-logo-icon", sx: {
|
|
125
114
|
minWidth: 0,
|
|
126
|
-
padding: 0
|
|
127
|
-
}
|
|
115
|
+
padding: 0,
|
|
116
|
+
}, children: icon.logoIcon }), (0, jsx_runtime_1.jsx)("div", { children: title }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "openk9-header-buttons", display: "flex", gap: "5px", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Button, { className: "openk9-refresh-button", disabled: isChatting, onClick: resetMessage, "aria-label": (0, Translate_1.Translate)({ label: "clearChat" }), sx: {
|
|
128
117
|
minWidth: 0,
|
|
129
118
|
padding: 0,
|
|
130
119
|
height: "24px",
|
|
131
|
-
width: "24px"
|
|
132
|
-
}
|
|
120
|
+
width: "24px",
|
|
121
|
+
}, children: icon.refreshChatIcon }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { 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 })] })] }));
|
|
133
122
|
};
|
|
134
123
|
var MessageList = function (_a) {
|
|
135
124
|
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;
|
|
136
|
-
return ((0, jsx_runtime_1.jsx)(material_1.Box,
|
|
125
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "openk9-message-list-container", component: "section", sx: {
|
|
137
126
|
flex: 1,
|
|
138
127
|
display: "flex",
|
|
139
128
|
flexDirection: "column",
|
|
140
|
-
overflow: "hidden"
|
|
141
|
-
}
|
|
129
|
+
overflow: "hidden",
|
|
130
|
+
}, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "openk9-message-list", sx: {
|
|
142
131
|
flex: 1,
|
|
143
132
|
overflowY: "auto",
|
|
144
133
|
paddingInline: "16px",
|
|
@@ -146,23 +135,23 @@ var MessageList = function (_a) {
|
|
|
146
135
|
display: "flex",
|
|
147
136
|
flexDirection: "column",
|
|
148
137
|
alignItems: "flex-start",
|
|
149
|
-
bgcolor: "transparent"
|
|
150
|
-
}
|
|
138
|
+
bgcolor: "transparent",
|
|
139
|
+
}, 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 &&
|
|
151
140
|
messages.map(function (message, index) {
|
|
152
141
|
var sendTime = (message === null || message === void 0 ? void 0 : message.sendTime)
|
|
153
142
|
? new Date(message === null || message === void 0 ? void 0 : message.sendTime).toLocaleTimeString([], {
|
|
154
143
|
hour: "2-digit",
|
|
155
|
-
minute: "2-digit"
|
|
144
|
+
minute: "2-digit",
|
|
156
145
|
})
|
|
157
146
|
: "";
|
|
158
147
|
var responseTime = (message === null || message === void 0 ? void 0 : message.responseTime)
|
|
159
148
|
? new Date(message === null || message === void 0 ? void 0 : message.responseTime).toLocaleTimeString([], {
|
|
160
149
|
hour: "2-digit",
|
|
161
|
-
minute: "2-digit"
|
|
150
|
+
minute: "2-digit",
|
|
162
151
|
})
|
|
163
152
|
: (message === null || message === void 0 ? void 0 : message.responseTime) || "";
|
|
164
|
-
return ((0, jsx_runtime_1.jsxs)(react_1
|
|
153
|
+
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 &&
|
|
165
154
|
(isGenerateMessage === null || isGenerateMessage === void 0 ? void 0 : isGenerateMessage.isLoading), nameChatbot: nameChatbot }), index === messages.length - 1 && (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] }, index));
|
|
166
|
-
})] })
|
|
155
|
+
})] }) }));
|
|
167
156
|
};
|
|
168
|
-
exports
|
|
157
|
+
exports.default = Chatbot;
|
|
@@ -1,16 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
exports.__esModule = true;
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
3
|
exports.LanguageProvider = void 0;
|
|
15
4
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
5
|
var react_1 = require("react");
|
|
@@ -57,7 +46,7 @@ var LanguageProvider = function (_a) {
|
|
|
57
46
|
observer.observe(document.documentElement, { attributes: true });
|
|
58
47
|
return function () { return observer.disconnect(); };
|
|
59
48
|
}, []);
|
|
60
|
-
return ((0, jsx_runtime_1.jsx)(LanguageContext.Provider,
|
|
49
|
+
return ((0, jsx_runtime_1.jsx)(LanguageContext.Provider, { value: { language: language, setLanguage: setLanguage }, children: children }));
|
|
61
50
|
};
|
|
62
51
|
exports.LanguageProvider = LanguageProvider;
|
|
63
|
-
exports
|
|
52
|
+
exports.default = LanguageContext;
|
|
@@ -1,28 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
16
|
-
exports
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = Search;
|
|
17
7
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
8
|
var material_1 = require("@mui/material");
|
|
19
9
|
var react_1 = __importDefault(require("react"));
|
|
20
10
|
var Translate_1 = require("./Translate");
|
|
21
11
|
function Search(_a) {
|
|
22
12
|
var handleSearch = _a.handleSearch, isChatting = _a.isChatting, icon = _a.icon, chatbotSearchRef = _a.chatbotSearchRef;
|
|
23
|
-
var _b = react_1
|
|
13
|
+
var _b = react_1.default.useState(""), search = _b[0], setSearch = _b[1];
|
|
24
14
|
var theme = (0, material_1.useTheme)();
|
|
25
|
-
return ((0, jsx_runtime_1.jsx)("form",
|
|
15
|
+
return ((0, jsx_runtime_1.jsx)("form", { className: "openk9-search-form", onSubmit: function (event) {
|
|
26
16
|
event.preventDefault();
|
|
27
17
|
handleSearch(search);
|
|
28
18
|
setSearch("");
|
|
@@ -30,8 +20,8 @@ function Search(_a) {
|
|
|
30
20
|
display: "flex",
|
|
31
21
|
gap: "15px",
|
|
32
22
|
padding: "12px",
|
|
33
|
-
borderTop: "1px solid #C7C7C7C7"
|
|
34
|
-
}
|
|
23
|
+
borderTop: "1px solid #C7C7C7C7",
|
|
24
|
+
}, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { 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: {
|
|
35
25
|
style: {
|
|
36
26
|
padding: 0,
|
|
37
27
|
paddingInline: "6px",
|
|
@@ -40,9 +30,9 @@ function Search(_a) {
|
|
|
40
30
|
fontWeight: "400",
|
|
41
31
|
lineHeight: "18.25px",
|
|
42
32
|
textAlign: "left",
|
|
43
|
-
borderRadius: theme.shape.borderRadius * 2
|
|
44
|
-
}
|
|
45
|
-
} }), (0, jsx_runtime_1.jsx)(material_1.Button,
|
|
33
|
+
borderRadius: theme.shape.borderRadius * 2,
|
|
34
|
+
},
|
|
35
|
+
} }), (0, jsx_runtime_1.jsx)(material_1.Button, { className: "openk9-search-button", type: "submit", variant: "contained", "aria-label": (0, Translate_1.Translate)({ label: "startQuestion" }), color: "primary", sx: {
|
|
46
36
|
backgroundColor: theme.palette.primary.main,
|
|
47
37
|
color: theme.palette.primary.contrastText,
|
|
48
38
|
stroke: "white",
|
|
@@ -50,7 +40,6 @@ function Search(_a) {
|
|
|
50
40
|
minWidth: "29px",
|
|
51
41
|
height: "29px",
|
|
52
42
|
padding: 0,
|
|
53
|
-
borderRadius: theme.shape.borderRadius
|
|
54
|
-
}, disabled: search === "" || isChatting
|
|
43
|
+
borderRadius: theme.shape.borderRadius,
|
|
44
|
+
}, disabled: search === "" || isChatting, children: icon.searchIcon })] }) }));
|
|
55
45
|
}
|
|
56
|
-
exports["default"] = Search;
|
|
@@ -3,17 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
-
var __assign = (this && this.__assign) || function () {
|
|
7
|
-
__assign = Object.assign || function(t) {
|
|
8
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
-
s = arguments[i];
|
|
10
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
-
t[p] = s[p];
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
};
|
|
15
|
-
return __assign.apply(this, arguments);
|
|
16
|
-
};
|
|
17
6
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
18
7
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
19
8
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
@@ -24,8 +13,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
24
13
|
});
|
|
25
14
|
};
|
|
26
15
|
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
27
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
28
|
-
return g =
|
|
16
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
|
17
|
+
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
29
18
|
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
30
19
|
function step(op) {
|
|
31
20
|
if (f) throw new TypeError("Generator is already executing.");
|
|
@@ -53,8 +42,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
53
42
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
54
43
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
55
44
|
};
|
|
56
|
-
exports
|
|
57
|
-
exports.SingleMessage =
|
|
45
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
46
|
+
exports.SingleMessage = SingleMessage;
|
|
58
47
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
59
48
|
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
60
49
|
var material_1 = require("@mui/material");
|
|
@@ -101,7 +90,7 @@ function SingleMessage(_a) {
|
|
|
101
90
|
var toggleChipExpansion = function (url) {
|
|
102
91
|
var newSet = new Set(expandedChips);
|
|
103
92
|
if (newSet.has(url)) {
|
|
104
|
-
newSet
|
|
93
|
+
newSet.delete(url);
|
|
105
94
|
if (newSet.size < sources.length) {
|
|
106
95
|
setShowAllSources(false);
|
|
107
96
|
}
|
|
@@ -122,7 +111,7 @@ function SingleMessage(_a) {
|
|
|
122
111
|
? {
|
|
123
112
|
r: parseInt(result[1], 16),
|
|
124
113
|
g: parseInt(result[2], 16),
|
|
125
|
-
b: parseInt(result[3], 16)
|
|
114
|
+
b: parseInt(result[3], 16),
|
|
126
115
|
}
|
|
127
116
|
: { r: 200, g: 200, b: 200 };
|
|
128
117
|
};
|
|
@@ -134,17 +123,17 @@ function SingleMessage(_a) {
|
|
|
134
123
|
return {
|
|
135
124
|
backgroundColor: lightBackground,
|
|
136
125
|
color: baseColor,
|
|
137
|
-
borderColor: lightBorder
|
|
126
|
+
borderColor: lightBorder,
|
|
138
127
|
};
|
|
139
128
|
};
|
|
140
129
|
var ariaLabel = (isChatbot
|
|
141
130
|
? nameChatbot + " " + (0, Translate_1.Translate)({ label: "sendMessage" })
|
|
142
131
|
: (0, Translate_1.Translate)({ label: "youSendMessage" })) + timeMessage;
|
|
143
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Box,
|
|
132
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { 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, { className: "openk9-message-box", display: "flex", alignItems: "flex-end", gap: 4, sx: {
|
|
144
133
|
gap: "6px",
|
|
145
134
|
backgroundColor: "white",
|
|
146
|
-
flexDirection: isChatbot ? "row" : "row-reverse"
|
|
147
|
-
}
|
|
135
|
+
flexDirection: isChatbot ? "row" : "row-reverse",
|
|
136
|
+
}, children: [icon && (0, jsx_runtime_1.jsx)(material_1.Box, { className: "openk9-chatbot-icon", children: icon }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "openk9-error-message-container", sx: {
|
|
148
137
|
display: "flex",
|
|
149
138
|
alignItems: "center",
|
|
150
139
|
background: "#FCEAEA",
|
|
@@ -152,22 +141,22 @@ function SingleMessage(_a) {
|
|
|
152
141
|
borderRadius: "10px",
|
|
153
142
|
padding: "12px 16px",
|
|
154
143
|
gap: "10px",
|
|
155
|
-
width: "100%"
|
|
156
|
-
}, "aria-live": "polite"
|
|
144
|
+
width: "100%",
|
|
145
|
+
}, "aria-live": "polite", children: [(0, jsx_runtime_1.jsx)(Error_1.default, { sx: { color: "#D32F2F", fontSize: "20px" } }), (0, jsx_runtime_1.jsx)(ParagraphMessage, { className: "openk9-paragraph-message", "$font": theme.typography.fontFamily, "$color": "#D32F2F", children: contentMessage })] })] })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "openk9-message-box", display: "flex", alignItems: "flex-end", gap: 4, sx: {
|
|
157
146
|
gap: "6px",
|
|
158
147
|
backgroundColor: "white",
|
|
159
|
-
flexDirection: isChatbot ? "row" : "row-reverse"
|
|
160
|
-
}
|
|
148
|
+
flexDirection: isChatbot ? "row" : "row-reverse",
|
|
149
|
+
}, children: [icon && (0, jsx_runtime_1.jsx)(material_1.Box, { className: "openk9-chatbot-icon", children: icon }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: "openk9-message-content-wrapper", sx: {
|
|
161
150
|
display: "flex",
|
|
162
151
|
flexDirection: "column",
|
|
163
152
|
width: ["-webkit-fill-available", "-moz-available", "100%"],
|
|
164
|
-
gap: "6px"
|
|
165
|
-
}
|
|
153
|
+
gap: "6px",
|
|
154
|
+
}, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "openk9-message-content", sx: {
|
|
166
155
|
overflow: "auto",
|
|
167
156
|
display: "flex",
|
|
168
157
|
flexDirection: "column",
|
|
169
158
|
backgroundColor: isChatbot
|
|
170
|
-
? theme.palette.background
|
|
159
|
+
? theme.palette.background.default
|
|
171
160
|
: theme.palette.primary.main,
|
|
172
161
|
border: "1px solid",
|
|
173
162
|
borderColor: theme.palette.primary.main,
|
|
@@ -175,12 +164,12 @@ function SingleMessage(_a) {
|
|
|
175
164
|
color: !isChatbot ? "white" : "black",
|
|
176
165
|
borderRadius: isChatbot
|
|
177
166
|
? "12px 12px 12px 2px"
|
|
178
|
-
: "12px 12px 2px 12px"
|
|
179
|
-
}, "aria-live": "polite"
|
|
167
|
+
: "12px 12px 2px 12px",
|
|
168
|
+
}, "aria-live": "polite", children: [(0, jsx_runtime_1.jsx)(ParagraphMessage, { className: "openk9-paragraph-message", "$isLoading": isLoading, "$font": theme.typography.fontFamily, children: isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "openk9-loading-icon-container", sx: {
|
|
180
169
|
display: "flex",
|
|
181
170
|
flexDirection: "column",
|
|
182
|
-
gap: "5px"
|
|
183
|
-
}
|
|
171
|
+
gap: "5px",
|
|
172
|
+
}, 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, { className: "openk9-focusable-section", "$contraxtFocus": isChatbot ? "black" : "white", "aria-label": ariaLabel, tabIndex: 0, children: [nameChatbot && ((0, jsx_runtime_1.jsx)(ParagraphName, { 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, { mb: 6, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, sx: { overflowX: "hidden" }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: "text.secondary", children: [sources.length, " sources"] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "button", onClick: function () {
|
|
184
173
|
var newState = !showAllSources;
|
|
185
174
|
setShowAllSources(newState);
|
|
186
175
|
if (newState) {
|
|
@@ -199,10 +188,10 @@ function SingleMessage(_a) {
|
|
|
199
188
|
background: "none",
|
|
200
189
|
border: "none",
|
|
201
190
|
cursor: "pointer",
|
|
202
|
-
"&:hover": { color: "#2782ea" }
|
|
203
|
-
}
|
|
191
|
+
"&:hover": { color: "#2782ea" },
|
|
192
|
+
}, children: [(0, jsx_runtime_1.jsx)(Visibility_1.default, { sx: { fontSize: "0.75rem" } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: showAllSources ? "Hide all" : "Show all" })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flexWrap: "wrap", gap: 1, sx: { overflowX: "hidden" }, children: [visibleSources.map(function (source, index) {
|
|
204
193
|
var typeColors = getTypeColor(source.url || "");
|
|
205
|
-
return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsxs)(material_1.Box,
|
|
194
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", gap: 1, flex: 1, sx: {
|
|
206
195
|
width: expandedChips.has(source.url || "")
|
|
207
196
|
? "230px"
|
|
208
197
|
: "170px",
|
|
@@ -210,56 +199,55 @@ function SingleMessage(_a) {
|
|
|
210
199
|
textOverflow: expandedChips.has(source.url || "")
|
|
211
200
|
? "unset"
|
|
212
201
|
: "ellipsis",
|
|
213
|
-
whiteSpace: "nowrap"
|
|
214
|
-
}
|
|
202
|
+
whiteSpace: "nowrap",
|
|
203
|
+
}, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
215
204
|
flex: 1,
|
|
216
205
|
width: 8,
|
|
217
206
|
height: 8,
|
|
218
207
|
flexShrink: 0,
|
|
219
208
|
flexGrow: 0,
|
|
220
209
|
borderRadius: "50%",
|
|
221
|
-
backgroundColor: getStableColor(source.url, themeInfo)
|
|
222
|
-
} }), (0, jsx_runtime_1.jsx)(material_1.Typography,
|
|
210
|
+
backgroundColor: getStableColor(source.url, themeInfo),
|
|
211
|
+
} }), (0, jsx_runtime_1.jsx)(material_1.Typography, { 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, { size: "small", onClick: function (e) {
|
|
223
212
|
e.stopPropagation();
|
|
224
213
|
copySource(source);
|
|
225
214
|
}, sx: {
|
|
226
215
|
p: 0.25,
|
|
227
216
|
ml: 0.5,
|
|
228
217
|
"&:hover": {
|
|
229
|
-
backgroundColor: "rgba(0,0,0,0.05)"
|
|
230
|
-
}
|
|
231
|
-
}
|
|
218
|
+
backgroundColor: "rgba(0,0,0,0.05)",
|
|
219
|
+
},
|
|
220
|
+
}, 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, { size: "small", onClick: function (e) {
|
|
232
221
|
e.stopPropagation();
|
|
233
222
|
toggleChipExpansion(source.url || "");
|
|
234
223
|
}, sx: {
|
|
235
224
|
p: 0.25,
|
|
236
225
|
"&:hover": {
|
|
237
|
-
backgroundColor: "rgba(0,0,0,0.05)"
|
|
238
|
-
}
|
|
239
|
-
}
|
|
226
|
+
backgroundColor: "rgba(0,0,0,0.05)",
|
|
227
|
+
},
|
|
228
|
+
}, children: (0, jsx_runtime_1.jsx)(OpenInFull_1.default, { sx: { fontSize: "0.75rem" } }) })] })] }), onClick: function () { return window.open(source.url, "_blank"); }, sx: {
|
|
240
229
|
backgroundColor: typeColors.backgroundColor,
|
|
241
230
|
color: typeColors.color,
|
|
242
231
|
border: "1px solid ".concat(typeColors.borderColor),
|
|
243
232
|
cursor: "pointer",
|
|
244
233
|
"&:hover": {
|
|
245
234
|
backgroundColor: typeColors.backgroundColor,
|
|
246
|
-
opacity: 0.8
|
|
247
|
-
}
|
|
235
|
+
opacity: 0.8,
|
|
236
|
+
},
|
|
248
237
|
}, size: "small" }, source.url || index));
|
|
249
|
-
}), remainingSources > 0 && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsxs)(material_1.Box,
|
|
238
|
+
}), remainingSources > 0 && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsxs)(material_1.Box, { 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, { variant: "caption", children: ["+", remainingSources] })] }), sx: {
|
|
250
239
|
backgroundColor: themeInfo === "light" ? "#f5f5f5" : "#2d2d2d",
|
|
251
240
|
color: themeInfo === "light" ? "#616161" : "#b0b0b0",
|
|
252
241
|
cursor: "pointer",
|
|
253
242
|
"&:hover": {
|
|
254
|
-
backgroundColor: themeInfo === "light" ? "#e0e0e0" : "#404040"
|
|
255
|
-
}
|
|
256
|
-
}, size: "small" }))] })
|
|
243
|
+
backgroundColor: themeInfo === "light" ? "#e0e0e0" : "#404040",
|
|
244
|
+
},
|
|
245
|
+
}, size: "small" }))] })] }))] }) })] })), (0, jsx_runtime_1.jsx)(ParagraphTime, { className: "openk9-paragraph-time", "$color": theme.palette.text.secondary, "$font": theme.typography.body2.font || "Roboto", style: { alignSelf: !isChatbot ? "start" : "end" }, children: timeMessage })] }));
|
|
257
246
|
}
|
|
258
|
-
|
|
259
|
-
var
|
|
260
|
-
var
|
|
261
|
-
var
|
|
262
|
-
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; });
|
|
247
|
+
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; });
|
|
248
|
+
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; });
|
|
249
|
+
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; });
|
|
250
|
+
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; });
|
|
263
251
|
function generateAccessibleColor(theme) {
|
|
264
252
|
var MAX_TRIES = 20;
|
|
265
253
|
var bgColor = theme === "light" ? "#ffffff" : "#000000";
|
|
@@ -286,7 +274,7 @@ function hexToRgb(hex) {
|
|
|
286
274
|
return {
|
|
287
275
|
r: (num >> 16) & 255,
|
|
288
276
|
g: (num >> 8) & 255,
|
|
289
|
-
b: num & 255
|
|
277
|
+
b: num & 255,
|
|
290
278
|
};
|
|
291
279
|
}
|
|
292
280
|
function luminance(hex) {
|
|
@@ -330,7 +318,7 @@ function getStableColor(source, theme) {
|
|
|
330
318
|
else {
|
|
331
319
|
sourceColorMap.set(source, {
|
|
332
320
|
light: generateAccessibleColor("light"),
|
|
333
|
-
dark: generateAccessibleColor("dark")
|
|
321
|
+
dark: generateAccessibleColor("dark"),
|
|
334
322
|
});
|
|
335
323
|
}
|
|
336
324
|
}
|