@yext/chat-ui-react 0.2.1 → 0.3.0
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/README.md +3 -3
- package/THIRD-PARTY-NOTICES +4 -4
- package/lib/bundle-no-resets.css +1 -1
- package/lib/bundle.css +1 -1
- package/lib/commonjs/components/ChatHeader.d.ts +2 -0
- package/lib/commonjs/components/ChatHeader.d.ts.map +1 -1
- package/lib/commonjs/components/ChatHeader.js +9 -7
- package/lib/commonjs/components/ChatHeader.js.map +1 -1
- package/lib/commonjs/components/ChatInput.d.ts +5 -0
- package/lib/commonjs/components/ChatInput.d.ts.map +1 -1
- package/lib/commonjs/components/ChatInput.js +15 -9
- package/lib/commonjs/components/ChatInput.js.map +1 -1
- package/lib/commonjs/components/ChatPanel.d.ts.map +1 -1
- package/lib/commonjs/components/ChatPanel.js +3 -3
- package/lib/commonjs/components/ChatPanel.js.map +1 -1
- package/lib/commonjs/components/ChatPopUp.d.ts +1 -0
- package/lib/commonjs/components/ChatPopUp.d.ts.map +1 -1
- package/lib/commonjs/components/ChatPopUp.js +14 -5
- package/lib/commonjs/components/ChatPopUp.js.map +1 -1
- package/lib/commonjs/components/MessageBubble.d.ts +1 -1
- package/lib/commonjs/components/MessageBubble.d.ts.map +1 -1
- package/lib/commonjs/components/MessageBubble.js +3 -4
- package/lib/commonjs/components/MessageBubble.js.map +1 -1
- package/lib/commonjs/hooks/useDefaultHandleApiError.d.ts.map +1 -1
- package/lib/commonjs/hooks/useDefaultHandleApiError.js +6 -10
- package/lib/commonjs/hooks/useDefaultHandleApiError.js.map +1 -1
- package/lib/commonjs/icons/Chat.d.ts +5 -0
- package/lib/commonjs/icons/Chat.d.ts.map +1 -0
- package/lib/commonjs/icons/Chat.js +9 -0
- package/lib/commonjs/icons/Chat.js.map +1 -0
- package/lib/commonjs/icons/Cross.d.ts +3 -1
- package/lib/commonjs/icons/Cross.d.ts.map +1 -1
- package/lib/commonjs/icons/Cross.js +2 -2
- package/lib/commonjs/icons/Cross.js.map +1 -1
- package/lib/commonjs/icons/DualSync.d.ts +3 -1
- package/lib/commonjs/icons/DualSync.d.ts.map +1 -1
- package/lib/commonjs/icons/DualSync.js +2 -2
- package/lib/commonjs/icons/DualSync.js.map +1 -1
- package/lib/commonjs/utils/withStylelessCssClasses.d.ts.map +1 -1
- package/lib/commonjs/utils/withStylelessCssClasses.js +3 -1
- package/lib/commonjs/utils/withStylelessCssClasses.js.map +1 -1
- package/lib/esm/components/ChatHeader.d.ts +2 -0
- package/lib/esm/components/ChatHeader.d.ts.map +1 -1
- package/lib/esm/components/ChatHeader.js +9 -7
- package/lib/esm/components/ChatHeader.js.map +1 -1
- package/lib/esm/components/ChatInput.d.ts +5 -0
- package/lib/esm/components/ChatInput.d.ts.map +1 -1
- package/lib/esm/components/ChatInput.js +15 -9
- package/lib/esm/components/ChatInput.js.map +1 -1
- package/lib/esm/components/ChatPanel.d.ts.map +1 -1
- package/lib/esm/components/ChatPanel.js +3 -3
- package/lib/esm/components/ChatPanel.js.map +1 -1
- package/lib/esm/components/ChatPopUp.d.ts +1 -0
- package/lib/esm/components/ChatPopUp.d.ts.map +1 -1
- package/lib/esm/components/ChatPopUp.js +14 -5
- package/lib/esm/components/ChatPopUp.js.map +1 -1
- package/lib/esm/components/MessageBubble.d.ts +1 -1
- package/lib/esm/components/MessageBubble.d.ts.map +1 -1
- package/lib/esm/components/MessageBubble.js +3 -4
- package/lib/esm/components/MessageBubble.js.map +1 -1
- package/lib/esm/hooks/useDefaultHandleApiError.d.ts.map +1 -1
- package/lib/esm/hooks/useDefaultHandleApiError.js +7 -11
- package/lib/esm/hooks/useDefaultHandleApiError.js.map +1 -1
- package/lib/esm/icons/Chat.d.ts +5 -0
- package/lib/esm/icons/Chat.d.ts.map +1 -0
- package/lib/esm/icons/Chat.js +5 -0
- package/lib/esm/icons/Chat.js.map +1 -0
- package/lib/esm/icons/Cross.d.ts +3 -1
- package/lib/esm/icons/Cross.d.ts.map +1 -1
- package/lib/esm/icons/Cross.js +2 -2
- package/lib/esm/icons/Cross.js.map +1 -1
- package/lib/esm/icons/DualSync.d.ts +3 -1
- package/lib/esm/icons/DualSync.d.ts.map +1 -1
- package/lib/esm/icons/DualSync.js +2 -2
- package/lib/esm/icons/DualSync.js.map +1 -1
- package/lib/esm/index.d.ts +9 -1
- package/lib/esm/utils/withStylelessCssClasses.d.ts.map +1 -1
- package/lib/esm/utils/withStylelessCssClasses.js +3 -1
- package/lib/esm/utils/withStylelessCssClasses.js.map +1 -1
- package/package.json +2 -2
- package/src/components/ChatHeader.tsx +21 -11
- package/src/components/ChatInput.tsx +22 -17
- package/src/components/ChatPanel.tsx +9 -7
- package/src/components/ChatPopUp.tsx +29 -15
- package/src/components/MessageBubble.tsx +21 -19
- package/src/hooks/useDefaultHandleApiError.ts +7 -15
- package/src/icons/Chat.tsx +39 -0
- package/src/icons/Cross.tsx +2 -1
- package/src/icons/DualSync.tsx +6 -1
- package/src/utils/withStylelessCssClasses.ts +14 -9
- package/lib/commonjs/icons/Message.d.ts +0 -3
- package/lib/commonjs/icons/Message.d.ts.map +0 -1
- package/lib/commonjs/icons/Message.js +0 -9
- package/lib/commonjs/icons/Message.js.map +0 -1
- package/lib/esm/icons/Message.d.ts +0 -3
- package/lib/esm/icons/Message.d.ts.map +0 -1
- package/lib/esm/icons/Message.js +0 -5
- package/lib/esm/icons/Message.js.map +0 -1
- package/src/icons/Message.tsx +0 -16
|
@@ -11,18 +11,14 @@ const react_1 = require("react");
|
|
|
11
11
|
*/
|
|
12
12
|
function useDefaultHandleApiError() {
|
|
13
13
|
const chat = (0, chat_headless_react_1.useChatActions)();
|
|
14
|
-
const messages = (0, chat_headless_react_1.useChatState)((s) => s.conversation.messages);
|
|
15
14
|
return (0, react_1.useCallback)((e) => {
|
|
16
15
|
console.error(e);
|
|
17
|
-
chat.
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
},
|
|
24
|
-
]);
|
|
25
|
-
}, [chat, messages]);
|
|
16
|
+
chat.addMessage({
|
|
17
|
+
text: "Sorry, I'm unable to respond at the moment. Please try again later!",
|
|
18
|
+
source: chat_headless_react_1.MessageSource.BOT,
|
|
19
|
+
timestamp: new Date().toISOString(),
|
|
20
|
+
});
|
|
21
|
+
}, [chat]);
|
|
26
22
|
}
|
|
27
23
|
exports.useDefaultHandleApiError = useDefaultHandleApiError;
|
|
28
24
|
//# sourceMappingURL=useDefaultHandleApiError.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDefaultHandleApiError.js","sourceRoot":"","sources":["../../../src/hooks/useDefaultHandleApiError.ts"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"useDefaultHandleApiError.js","sourceRoot":"","sources":["../../../src/hooks/useDefaultHandleApiError.ts"],"names":[],"mappings":";;;AAAA,mEAA0E;AAC1E,iCAAoC;AAEpC;;;;;GAKG;AACH,SAAgB,wBAAwB;IACtC,MAAM,IAAI,GAAG,IAAA,oCAAc,GAAE,CAAC;IAE9B,OAAO,IAAA,mBAAW,EAChB,CAAC,CAAU,EAAE,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjB,IAAI,CAAC,UAAU,CAAC;YACd,IAAI,EAAE,qEAAqE;YAC3E,MAAM,EAAE,mCAAa,CAAC,GAAG;YACzB,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;SACpC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;AACJ,CAAC;AAdD,4DAcC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/icons/Chat.tsx"],"names":[],"mappings":";AAAA,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAsC3E"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ChatIcon = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
function ChatIcon({ className }) {
|
|
6
|
+
return ((0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.3028 12.8082L15.1553 12.9342L15.1729 13.1273L15.3973 15.5959C15.3983 15.6063 15.3964 15.6126 15.3943 15.617C15.3918 15.6223 15.3873 15.6283 15.3805 15.6332C15.3737 15.6382 15.3667 15.6408 15.3608 15.6416C15.356 15.6422 15.3495 15.6422 15.3398 15.6381L12.3578 14.3956L12.245 14.3486L12.1261 14.3771C11.4553 14.5381 10.7412 14.625 10 14.625C5.9718 14.625 2.875 12.099 2.875 9.16667C2.875 6.23436 5.9718 3.70834 10 3.70834C14.0282 3.70834 17.125 6.23436 17.125 9.16667C17.125 10.5493 16.4496 11.8289 15.3028 12.8082Z", fill: "white", stroke: "white", strokeWidth: "0.75" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 7.54584C7 7.38015 7.13431 7.24584 7.3 7.24584H8.725C8.89069 7.24584 9.025 7.38015 9.025 7.54584C9.025 7.71152 8.89069 7.84584 8.725 7.84584H7.3C7.13431 7.84584 7 7.71152 7 7.54584Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.625 7.54584C9.625 7.15233 9.944 6.83334 10.3375 6.83334H12.2875C12.681 6.83334 13 7.15233 13 7.54584C13 7.93934 12.681 8.25834 12.2875 8.25834H10.3375C9.944 8.25834 9.625 7.93934 9.625 7.54584Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 9.30834C7 9.14265 7.13431 9.00834 7.3 9.00834H12.7C12.8657 9.00834 13 9.14265 13 9.30834C13 9.47402 12.8657 9.60834 12.7 9.60834H7.3C7.13431 9.60834 7 9.47402 7 9.30834Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 11.0708C7 10.6773 7.319 10.3583 7.7125 10.3583H8.1625C8.556 10.3583 8.875 10.6773 8.875 11.0708C8.875 11.4643 8.556 11.7833 8.1625 11.7833H7.7125C7.319 11.7833 7 11.4643 7 11.0708Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.475 11.0708C9.475 10.9052 9.60931 10.7708 9.775 10.7708H12.7C12.8657 10.7708 13 10.9052 13 11.0708C13 11.2365 12.8657 11.3708 12.7 11.3708H9.775C9.60931 11.3708 9.475 11.2365 9.475 11.0708Z", fill: "currentColor" })] }));
|
|
7
|
+
}
|
|
8
|
+
exports.ChatIcon = ChatIcon;
|
|
9
|
+
//# sourceMappingURL=Chat.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/icons/Chat.tsx"],"names":[],"mappings":";;;;AAAA,SAAgB,QAAQ,CAAC,EAAE,SAAS,EAA0B;IAC5D,OAAO,CACL,iCACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,aAElC,iCACE,CAAC,EAAC,ugBAAugB,EACzgB,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,OAAO,EACd,WAAW,EAAC,MAAM,GAClB,EACF,iCACE,CAAC,EAAC,yLAAyL,EAC3L,IAAI,EAAC,cAAc,GACnB,EACF,iCACE,CAAC,EAAC,sMAAsM,EACxM,IAAI,EAAC,cAAc,GACnB,EACF,iCACE,CAAC,EAAC,8KAA8K,EAChL,IAAI,EAAC,cAAc,GACnB,EACF,iCACE,CAAC,EAAC,yLAAyL,EAC3L,IAAI,EAAC,cAAc,GACnB,EACF,iCACE,CAAC,EAAC,kMAAkM,EACpM,IAAI,EAAC,cAAc,GACnB,IACE,CACP,CAAC;AACJ,CAAC;AAtCD,4BAsCC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cross.d.ts","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,
|
|
1
|
+
{"version":3,"file":"Cross.d.ts","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAc5E"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.CrossIcon = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
function CrossIcon() {
|
|
6
|
-
return ((0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14 14L6 6", strokeLinecap: "square", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M14 6L6 14", strokeLinecap: "square", strokeLinejoin: "round" })] }));
|
|
5
|
+
function CrossIcon({ className }) {
|
|
6
|
+
return ((0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", stroke: "currentColor", className: className, xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14 14L6 6", strokeLinecap: "square", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M14 6L6 14", strokeLinecap: "square", strokeLinejoin: "round" })] }));
|
|
7
7
|
}
|
|
8
8
|
exports.CrossIcon = CrossIcon;
|
|
9
9
|
//# sourceMappingURL=Cross.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cross.js","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";;;;AAAA,SAAgB,SAAS;
|
|
1
|
+
{"version":3,"file":"Cross.js","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";;;;AAAA,SAAgB,SAAS,CAAC,EAAE,SAAS,EAA0B;IAC7D,OAAO,CACL,iCACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,aAElC,iCAAM,CAAC,EAAC,YAAY,EAAC,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,OAAO,GAAG,EACrE,iCAAM,CAAC,EAAC,YAAY,EAAC,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,OAAO,GAAG,IACjE,CACP,CAAC;AACJ,CAAC;AAdD,8BAcC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DualSync.d.ts","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,wBAAgB,YAAY,
|
|
1
|
+
{"version":3,"file":"DualSync.d.ts","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,wBAAgB,YAAY,CAAC,EAC3B,SAAS,GACV,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,GAAG,CAAC,OAAO,CAed"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.DualSyncIcon = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
function DualSyncIcon() {
|
|
6
|
-
return ((0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.3148 6.47397C14.9074 7.36266 15.2593 8.46858 15.2593 9.63375C15.2593 12.675 12.9259 15.1634 10.0741 15.1634C9.11111 15.1634 8.2037 14.8671 7.42593 14.3734L9.05556 13.8995L8.87037 13.1293L6 13.939L6.75926 17L7.48148 16.8025L7.03704 15.0449C7.92593 15.6176 8.96296 15.9336 10.0741 15.9336C13.3519 15.9336 16 13.1095 16 9.614C16 8.2711 15.6111 7.02693 14.9259 6L14.3148 6.47397Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.92593 4.68459C10.8889 4.68459 11.7963 4.95341 12.5741 5.40143L10.9444 5.81362L11.1296 6.51254L14 5.77778L13.2407 3L12.5185 3.17921L12.963 4.77419C12.0741 4.25448 11.037 3.96774 9.92593 3.96774C6.64815 3.96774 4 6.53047 4 9.70251C4 10.9211 4.40741 12.0681 5.07407 13L5.68518 12.5878C5.09259 11.7634 4.74074 10.7778 4.74074 9.70251C4.74074 6.94265 7.07407 4.68459 9.92593 4.68459Z" })] }));
|
|
5
|
+
function DualSyncIcon({ className, }) {
|
|
6
|
+
return ((0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", className: className, xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.3148 6.47397C14.9074 7.36266 15.2593 8.46858 15.2593 9.63375C15.2593 12.675 12.9259 15.1634 10.0741 15.1634C9.11111 15.1634 8.2037 14.8671 7.42593 14.3734L9.05556 13.8995L8.87037 13.1293L6 13.939L6.75926 17L7.48148 16.8025L7.03704 15.0449C7.92593 15.6176 8.96296 15.9336 10.0741 15.9336C13.3519 15.9336 16 13.1095 16 9.614C16 8.2711 15.6111 7.02693 14.9259 6L14.3148 6.47397Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.92593 4.68459C10.8889 4.68459 11.7963 4.95341 12.5741 5.40143L10.9444 5.81362L11.1296 6.51254L14 5.77778L13.2407 3L12.5185 3.17921L12.963 4.77419C12.0741 4.25448 11.037 3.96774 9.92593 3.96774C6.64815 3.96774 4 6.53047 4 9.70251C4 10.9211 4.40741 12.0681 5.07407 13L5.68518 12.5878C5.09259 11.7634 4.74074 10.7778 4.74074 9.70251C4.74074 6.94265 7.07407 4.68459 9.92593 4.68459Z" })] }));
|
|
7
7
|
}
|
|
8
8
|
exports.DualSyncIcon = DualSyncIcon;
|
|
9
9
|
//# sourceMappingURL=DualSync.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DualSync.js","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";;;;AAAA,SAAgB,YAAY;
|
|
1
|
+
{"version":3,"file":"DualSync.js","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";;;;AAAA,SAAgB,YAAY,CAAC,EAC3B,SAAS,GAGV;IACC,OAAO,CACL,iCACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,aAElC,iCAAM,CAAC,EAAC,6XAA6X,GAAG,EACxY,iCAAM,CAAC,EAAC,+XAA+X,GAAG,IACtY,CACP,CAAC;AACJ,CAAC;AAnBD,oCAmBC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withStylelessCssClasses.d.ts","sourceRoot":"","sources":["../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,CACrC,cAAc,SAAS,OAAO,CAAC,MAAM,CAAC,MAAM,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAE7E,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GACvC,cAAc,
|
|
1
|
+
{"version":3,"file":"withStylelessCssClasses.d.ts","sourceRoot":"","sources":["../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,CACrC,cAAc,SAAS,OAAO,CAAC,MAAM,CAAC,MAAM,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAE7E,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GACvC,cAAc,CAYhB"}
|
|
@@ -20,7 +20,9 @@ function withStylelessCssClasses(componentName, builtInClasses) {
|
|
|
20
20
|
const formatString = (str) => str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
|
|
21
21
|
const classes = { ...builtInClasses };
|
|
22
22
|
Object.keys(builtInClasses).forEach((key) => {
|
|
23
|
-
|
|
23
|
+
if (typeof classes[key] === "string") {
|
|
24
|
+
classes[key] = `${classes[key]} yext-chat${formatString(componentName)}__${formatString(key)}`;
|
|
25
|
+
}
|
|
24
26
|
});
|
|
25
27
|
return classes;
|
|
26
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withStylelessCssClasses.js","sourceRoot":"","sources":["../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;GAcG;AACH,SAAgB,uBAAuB,CAGrC,aAAqB,EACrB,cAAwC;IAExC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"withStylelessCssClasses.js","sourceRoot":"","sources":["../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;GAcG;AACH,SAAgB,uBAAuB,CAGrC,aAAqB,EACrB,cAAwC;IAExC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE,CACnC,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAC1C,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;YACpC,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,aAAa,YAAY,CACrD,aAAa,CACd,KAAK,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;AACjB,CAAC;AAjBD,0DAiBC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ChatHeader.tsx"],"names":[],"mappings":";AAQA;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ChatHeader.tsx"],"names":[],"mappings":";AAQA;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAcD;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,yCAAyC;IACzC,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;CACzC;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,OAAO,EACP,gBAAgB,GACjB,EAAE,eAAe,2CAgDjB"}
|
|
@@ -6,11 +6,13 @@ import { useCallback, useRef, useState } from "react";
|
|
|
6
6
|
import { twMerge } from "tailwind-merge";
|
|
7
7
|
import { CrossIcon } from "../icons/Cross";
|
|
8
8
|
import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
|
|
9
|
-
const builtInCssClasses = withStylelessCssClasses(
|
|
10
|
-
container: "w-full
|
|
11
|
-
title: "text-white text-xl font-medium",
|
|
12
|
-
restartButton: "w-8
|
|
13
|
-
|
|
9
|
+
const builtInCssClasses = withStylelessCssClasses("Header", {
|
|
10
|
+
container: "w-full pl-4 pr-3 py-3 flex justify-between bg-gradient-to-tr from-blue-600 to-blue-800",
|
|
11
|
+
title: "text-white text-xl font-medium truncate pr-1",
|
|
12
|
+
restartButton: "w-8 h-8 ml-auto shrink-0 flex justify-center items-center",
|
|
13
|
+
restartButtonIcon: "text-white stroke-[0.2] w-[26px] h-[26px]",
|
|
14
|
+
closeButton: "w-8 h-8 hover:scale-110 shrink-0 flex justify-center items-center",
|
|
15
|
+
closeButtonIcon: "text-white w-[26px] h-[26px]",
|
|
14
16
|
});
|
|
15
17
|
/**
|
|
16
18
|
* A component that renders the header of a chat bot panel,
|
|
@@ -20,7 +22,7 @@ const builtInCssClasses = withStylelessCssClasses('Header', {
|
|
|
20
22
|
*
|
|
21
23
|
* @param props - {@link ChatHeaderProps}
|
|
22
24
|
*/
|
|
23
|
-
export function ChatHeader({ title, showRestartButton, restartButtonIcon
|
|
25
|
+
export function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }) {
|
|
24
26
|
const chat = useChatActions();
|
|
25
27
|
const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
|
|
26
28
|
const [isSpinning, setIsSpinning] = useState(false);
|
|
@@ -34,6 +36,6 @@ export function ChatHeader({ title, showRestartButton, restartButtonIcon = _jsx(
|
|
|
34
36
|
}, 1000);
|
|
35
37
|
chat.restartConversation();
|
|
36
38
|
}, [chat]);
|
|
37
|
-
return (_jsxs("div", { className: cssClasses.container, children: [_jsx("h1", { className: cssClasses.title, children: title }), showRestartButton && (_jsx("button", { "aria-label": "Restart Conversation", onClick: onRestart, className: restartButtonCssClasses, children: restartButtonIcon })), showCloseButton && (_jsx("button", { "aria-label": "Close Chat", onClick: onClose, className: cssClasses.closeButton, children: closeButtonIcon }))] }));
|
|
39
|
+
return (_jsxs("div", { className: cssClasses.container, children: [_jsx("h1", { className: cssClasses.title, children: title }), showRestartButton && (_jsx("button", { "aria-label": "Restart Conversation", onClick: onRestart, className: restartButtonCssClasses, children: restartButtonIcon ?? (_jsx(DualSyncIcon, { className: cssClasses.restartButtonIcon })) })), showCloseButton && (_jsx("button", { "aria-label": "Close Chat", onClick: onClose, className: cssClasses.closeButton, children: closeButtonIcon ?? (_jsx(CrossIcon, { className: cssClasses.closeButtonIcon })) }))] }));
|
|
38
40
|
}
|
|
39
41
|
//# sourceMappingURL=ChatHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../src/components/ChatHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../src/components/ChatHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAgB3E,MAAM,iBAAiB,GACrB,uBAAuB,CAAC,QAAQ,EAAE;IAChC,SAAS,EACP,wFAAwF;IAC1F,KAAK,EAAE,8CAA8C;IACrD,aAAa,EAAE,2DAA2D;IAC1E,iBAAiB,EAAE,2CAA2C;IAC9D,WAAW,EACT,mEAAmE;IACrE,eAAe,EAAE,8BAA8B;CAChD,CAAC,CAAC;AAgCL;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,OAAO,EACP,gBAAgB,GACA;IAChB,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;IAE9B,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAE9E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,uBAAuB,GAAG,OAAO,CACrC,UAAU,CAAC,aAAa,EACxB,UAAU,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,iBAAiB,CACvE,CAAC;IAEF,MAAM,aAAa,GAAG,MAAM,EAAiC,CAAC;IAC9D,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACvC,YAAY,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACpC,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,aAAa,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACtC,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,SAAS,aAClC,aAAI,SAAS,EAAE,UAAU,CAAC,KAAK,YAAG,KAAK,GAAM,EAC5C,iBAAiB,IAAI,CACpB,+BACa,sBAAsB,EACjC,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,uBAAuB,YAEjC,iBAAiB,IAAI,CACpB,KAAC,YAAY,IAAC,SAAS,EAAE,UAAU,CAAC,iBAAiB,GAAI,CAC1D,GACM,CACV,EACA,eAAe,IAAI,CAClB,+BACa,YAAY,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,WAAW,YAEhC,eAAe,IAAI,CAClB,KAAC,SAAS,IAAC,SAAS,EAAE,UAAU,CAAC,eAAe,GAAI,CACrD,GACM,CACV,IACG,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -39,6 +39,11 @@ export interface ChatInputProps {
|
|
|
39
39
|
}
|
|
40
40
|
/**
|
|
41
41
|
* A component that allows user to input message and send to Chat API.
|
|
42
|
+
*
|
|
43
|
+
* @remarks
|
|
44
|
+
* Pressing "Enter" key will send the current message.
|
|
45
|
+
* To add a newline, press "Shift" and "Enter".
|
|
46
|
+
*
|
|
42
47
|
* @public
|
|
43
48
|
*
|
|
44
49
|
* @param props - {@link ChatInputProps}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../src/components/ChatInput.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../src/components/ChatInput.tsx"],"names":[],"mappings":";AAQA;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAaD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAiC,EACjC,MAAa,EACb,cAAsB,EACtB,WAAW,EACX,cAA8B,EAC9B,gBAAgB,GACjB,EAAE,cAAc,2CAyDhB"}
|
|
@@ -4,16 +4,20 @@ import { useChatActions, useChatState } from "@yext/chat-headless-react";
|
|
|
4
4
|
import { ArrowIcon } from "../icons/Arrow";
|
|
5
5
|
import { useComposedCssClasses } from "../hooks";
|
|
6
6
|
import Textarea from "react-expanding-textarea";
|
|
7
|
-
import { twMerge } from "tailwind-merge";
|
|
8
7
|
import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
|
|
9
8
|
import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
|
|
10
|
-
const builtInCssClasses = withStylelessCssClasses(
|
|
9
|
+
const builtInCssClasses = withStylelessCssClasses("Input", {
|
|
11
10
|
container: "w-full h-fit flex flex-row relative @container",
|
|
12
|
-
textArea: "w-full p-4 pr-
|
|
13
|
-
sendButton: "rounded-full p-1.5 w-8 h-8 stroke-2 text-white bg-blue-600 disabled:bg-slate-
|
|
11
|
+
textArea: "w-full p-4 pr-12 border border-slate-300 rounded-3xl resize-none text-[13px] @[480px]:text-base",
|
|
12
|
+
sendButton: "rounded-full p-1.5 w-8 h-8 stroke-2 text-white bg-blue-600 disabled:bg-slate-200 hover:bg-blue-800 active:scale-90 transition-all absolute right-4 bottom-2.5 @[480px]:bottom-3.5",
|
|
14
13
|
});
|
|
15
14
|
/**
|
|
16
15
|
* A component that allows user to input message and send to Chat API.
|
|
16
|
+
*
|
|
17
|
+
* @remarks
|
|
18
|
+
* Pressing "Enter" key will send the current message.
|
|
19
|
+
* To add a newline, press "Shift" and "Enter".
|
|
20
|
+
*
|
|
17
21
|
* @public
|
|
18
22
|
*
|
|
19
23
|
* @param props - {@link ChatInputProps}
|
|
@@ -24,7 +28,6 @@ export function ChatInput({ placeholder = "Type a message...", stream = true, in
|
|
|
24
28
|
const canSendMessage = useChatState((state) => state.conversation.canSendMessage);
|
|
25
29
|
const defaultHandleApiError = useDefaultHandleApiError();
|
|
26
30
|
const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
|
|
27
|
-
const sendButtonClassNames = twMerge(cssClasses.sendButton, input.length === 0 && "opacity-0 invisible");
|
|
28
31
|
const sendMessage = useCallback(async () => {
|
|
29
32
|
const res = stream
|
|
30
33
|
? chat.streamNextMessage(input)
|
|
@@ -33,13 +36,16 @@ export function ChatInput({ placeholder = "Type a message...", stream = true, in
|
|
|
33
36
|
res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
|
|
34
37
|
}, [chat, input, handleError, defaultHandleApiError, stream]);
|
|
35
38
|
const handleKeyDown = useCallback((e) => {
|
|
36
|
-
if (e.key === "Enter") {
|
|
37
|
-
|
|
39
|
+
if (!e.shiftKey && e.key === "Enter") {
|
|
40
|
+
e.preventDefault();
|
|
41
|
+
if (canSendMessage) {
|
|
42
|
+
sendMessage();
|
|
43
|
+
}
|
|
38
44
|
}
|
|
39
|
-
}, [sendMessage]);
|
|
45
|
+
}, [sendMessage, canSendMessage]);
|
|
40
46
|
const onInputChange = useCallback((e) => {
|
|
41
47
|
setInput(e.target.value);
|
|
42
48
|
}, []);
|
|
43
|
-
return (_jsxs("div", { className: cssClasses.container, children: [_jsx(Textarea, { autoFocus: inputAutoFocus,
|
|
49
|
+
return (_jsxs("div", { className: cssClasses.container, children: [_jsx(Textarea, { autoFocus: inputAutoFocus, onKeyDown: handleKeyDown, value: input, onChange: onInputChange, className: cssClasses.textArea, placeholder: placeholder }), _jsx("button", { "aria-label": "Send Message", disabled: !canSendMessage, onClick: sendMessage, className: cssClasses.sendButton, children: sendButtonIcon })] }));
|
|
44
50
|
}
|
|
45
51
|
//# sourceMappingURL=ChatInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatInput.js","sourceRoot":"","sources":["../../../src/components/ChatInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ChatInput.js","sourceRoot":"","sources":["../../../src/components/ChatInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../src/components/ChatPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7E;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;
|
|
1
|
+
{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../src/components/ChatPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7E;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAYD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC,EAC9D,IAAI,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC1C,kDAAkD;IAClD,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkD9C"}
|
|
@@ -8,10 +8,10 @@ import { LoadingDots } from "./LoadingDots";
|
|
|
8
8
|
import { useComposedCssClasses } from "../hooks";
|
|
9
9
|
import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
|
|
10
10
|
import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
|
|
11
|
-
const builtInCssClasses = withStylelessCssClasses(
|
|
12
|
-
container: "h-full w-full flex flex-col relative
|
|
11
|
+
const builtInCssClasses = withStylelessCssClasses("Panel", {
|
|
12
|
+
container: "h-full w-full flex flex-col relative shadow-2xl bg-white",
|
|
13
13
|
messagesContainer: "flex flex-col gap-y-1 mt-auto px-4 pb-[85px] overflow-auto",
|
|
14
|
-
inputContainer: "w-full absolute bottom-0 p-4
|
|
14
|
+
inputContainer: "w-full absolute bottom-0 p-4 backdrop-blur-lg",
|
|
15
15
|
});
|
|
16
16
|
/**
|
|
17
17
|
* A component that renders a full panel for chat bot interactions. This includes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatPanel.js","sourceRoot":"","sources":["../../../src/components/ChatPanel.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EACL,aAAa,GAGd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAuC,MAAM,aAAa,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAe3E,MAAM,iBAAiB,GAAwB,uBAAuB,
|
|
1
|
+
{"version":3,"file":"ChatPanel.js","sourceRoot":"","sources":["../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatPopUp.d.ts","sourceRoot":"","sources":["../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EAEL,oBAAoB,EACpB,eAAe,EAChB,MAAM,cAAc,CAAC;AAKtB;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC;
|
|
1
|
+
{"version":3,"file":"ChatPopUp.d.ts","sourceRoot":"","sources":["../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EAEL,oBAAoB,EACpB,eAAe,EAChB,MAAM,cAAc,CAAC;AAKtB;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC;AA6BD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,kBAAkB,CAAC,EACnE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,kBAAkB,CAAC;IACrD,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAsD9C"}
|
|
@@ -1,21 +1,30 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useState } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { ChatIcon } from "../icons/Chat";
|
|
4
4
|
import { ChatPanel } from "./ChatPanel";
|
|
5
5
|
import { ChatHeader, } from "./ChatHeader";
|
|
6
6
|
import { twMerge } from "tailwind-merge";
|
|
7
7
|
import { useComposedCssClasses } from "../hooks";
|
|
8
8
|
import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
|
|
9
9
|
const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 z-50 ";
|
|
10
|
-
const builtInCssClasses = withStylelessCssClasses(
|
|
10
|
+
const builtInCssClasses = withStylelessCssClasses("PopUp", {
|
|
11
11
|
container: "transition-all",
|
|
12
|
-
panel: fixedPosition +
|
|
12
|
+
panel: fixedPosition +
|
|
13
|
+
"w-80 max-[480px]:right-0 max-[480px]:bottom-0 max-[480px]:w-full max-[480px]:h-full lg:w-96 h-[75vh]",
|
|
13
14
|
panel__display: "duration-300 translate-y-0",
|
|
14
15
|
panel__hidden: "duration-300 translate-y-[20%] opacity-0 invisible",
|
|
15
16
|
button: fixedPosition +
|
|
16
17
|
"p-2 w-12 h-12 lg:w-16 lg:h-16 flex justify-center items-center text-white shadow-xl rounded-full bg-gradient-to-br from-blue-600 to-blue-700 hover:-translate-y-2 duration-150",
|
|
17
18
|
button__display: "duration-300 transform translate-y-0",
|
|
18
19
|
button__hidden: "duration-300 transform translate-y-[20%] opacity-0 invisible",
|
|
20
|
+
buttonIcon: "text-blue-600 w-[28px] h-[28px] lg:w-[40px] lg:h-[40px]",
|
|
21
|
+
headerCssClasses: {
|
|
22
|
+
container: "max-[480px]:rounded-none rounded-t-3xl",
|
|
23
|
+
},
|
|
24
|
+
panelCssClasses: {
|
|
25
|
+
container: "max-[480px]:rounded-none rounded-b-3xl",
|
|
26
|
+
inputContainer: "max-[480px]:rounded-none rounded-b-3xl",
|
|
27
|
+
},
|
|
19
28
|
});
|
|
20
29
|
/**
|
|
21
30
|
* A component that renders a popup button that displays and hides
|
|
@@ -26,7 +35,7 @@ const builtInCssClasses = withStylelessCssClasses('PopUp', {
|
|
|
26
35
|
* @param props - {@link ChatPanelProps}
|
|
27
36
|
*/
|
|
28
37
|
export function ChatPopUp(props) {
|
|
29
|
-
const { openPanelButtonIcon
|
|
38
|
+
const { openPanelButtonIcon, customCssClasses, showRestartButton = true, onClose: customOnClose, title, } = props;
|
|
30
39
|
const [showChat, setShowChat] = useState(false);
|
|
31
40
|
const onClick = useCallback(() => {
|
|
32
41
|
setShowChat(!showChat);
|
|
@@ -38,6 +47,6 @@ export function ChatPopUp(props) {
|
|
|
38
47
|
const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
|
|
39
48
|
const panelCssClasses = twMerge(cssClasses.panel, showChat ? cssClasses.panel__display : cssClasses.panel__hidden);
|
|
40
49
|
const buttonCssClasses = twMerge(cssClasses.button, showChat ? cssClasses.button__hidden : cssClasses.button__display);
|
|
41
|
-
return (_jsxs("div", { className: cssClasses.container, children: [_jsx("div", { className: panelCssClasses, "aria-label": "Chat Popup Panel", children: _jsx(ChatPanel, { ...props, customCssClasses: cssClasses.panelCssClasses, header: _jsx(ChatHeader, { title: title, showRestartButton: showRestartButton, showCloseButton: true, onClose: onClose, customCssClasses: cssClasses.headerCssClasses }) }) }), _jsx("button", { "aria-label": "Chat Popup Button", onClick: onClick, className: buttonCssClasses, children: openPanelButtonIcon })] }));
|
|
50
|
+
return (_jsxs("div", { className: cssClasses.container, children: [_jsx("div", { className: panelCssClasses, "aria-label": "Chat Popup Panel", children: _jsx(ChatPanel, { ...props, customCssClasses: cssClasses.panelCssClasses, header: _jsx(ChatHeader, { title: title, showRestartButton: showRestartButton, showCloseButton: true, onClose: onClose, customCssClasses: cssClasses.headerCssClasses }) }) }), _jsx("button", { "aria-label": "Chat Popup Button", onClick: onClick, className: buttonCssClasses, children: openPanelButtonIcon ?? _jsx(ChatIcon, { className: cssClasses.buttonIcon }) })] }));
|
|
42
51
|
}
|
|
43
52
|
//# sourceMappingURL=ChatPopUp.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatPopUp.js","sourceRoot":"","sources":["../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ChatPopUp.js","sourceRoot":"","sources":["../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAuC,MAAM,aAAa,CAAC;AAC7E,OAAO,EACL,UAAU,GAGX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAoB3E,MAAM,aAAa,GAAG,uDAAuD,CAAC;AAC9E,MAAM,iBAAiB,GAAwB,uBAAuB,CACpE,OAAO,EACP;IACE,SAAS,EAAE,gBAAgB;IAC3B,KAAK,EACH,aAAa;QACb,sGAAsG;IACxG,cAAc,EAAE,4BAA4B;IAC5C,aAAa,EAAE,oDAAoD;IACnE,MAAM,EACJ,aAAa;QACb,gLAAgL;IAClL,eAAe,EAAE,sCAAsC;IACvD,cAAc,EACZ,8DAA8D;IAChE,UAAU,EAAE,yDAAyD;IACrE,gBAAgB,EAAE;QAChB,SAAS,EAAE,wCAAwC;KACpD;IACD,eAAe,EAAE;QACf,SAAS,EAAE,wCAAwC;QACnD,cAAc,EAAE,wCAAwC;KACzD;CACF,CACF,CAAC;AAkBF;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,GAAG,IAAI,EACxB,OAAO,EAAE,aAAa,EACtB,KAAK,GACN,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,aAAa,EAAE,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,OAAO,CAC7B,UAAU,CAAC,KAAK,EAChB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAChE,CAAC;IACF,MAAM,gBAAgB,GAAG,OAAO,CAC9B,UAAU,CAAC,MAAM,EACjB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe,CAClE,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,SAAS,aAClC,cAAK,SAAS,EAAE,eAAe,gBAAa,kBAAkB,YAC5D,KAAC,SAAS,OACJ,KAAK,EACT,gBAAgB,EAAE,UAAU,CAAC,eAAe,EAC5C,MAAM,EACJ,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,IAAI,EACrB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,GAC7C,GAEJ,GACE,EACN,+BACa,mBAAmB,EAC9B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,gBAAgB,YAE1B,mBAAmB,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAE,UAAU,CAAC,UAAU,GAAI,GAC/D,IACL,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -32,7 +32,7 @@ export interface MessageBubbleProps {
|
|
|
32
32
|
/**
|
|
33
33
|
* A function which is called to format the message's timestamp given in
|
|
34
34
|
* ISO format (e.g. "2023-05-18T19:33:34.553Z").
|
|
35
|
-
* Defaults to "HH:MM
|
|
35
|
+
* Defaults to "HH:MM A" (e.g. "7:33 PM").
|
|
36
36
|
*/
|
|
37
37
|
formatTimestamp?: (timestamp: string) => string;
|
|
38
38
|
/** CSS classes for customizing the component styling. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAiB,MAAM,2BAA2B,CAAC;AAMnE;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;
|
|
1
|
+
{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAiB,MAAM,2BAA2B,CAAC;AAMnE;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAsBD;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;CAC5C;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,aAAoB,EACpB,gBAAgB,EAChB,eAAwC,GACzC,EAAE,kBAAkB,2CAoCpB"}
|
|
@@ -4,7 +4,7 @@ import { useComposedCssClasses } from "../hooks";
|
|
|
4
4
|
import { twMerge } from "tailwind-merge";
|
|
5
5
|
import { Markdown } from "./Markdown";
|
|
6
6
|
import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
|
|
7
|
-
const builtInCssClasses = withStylelessCssClasses(
|
|
7
|
+
const builtInCssClasses = withStylelessCssClasses("MessageBubble", {
|
|
8
8
|
topContainer: "w-full animate-fade-in @container",
|
|
9
9
|
subContainer: "flex flex-col @lg:flex-row @lg:items-center @lg:gap-x-2 @lg:m-1",
|
|
10
10
|
subContainer__bot: "",
|
|
@@ -12,7 +12,7 @@ const builtInCssClasses = withStylelessCssClasses('MessageBubble', {
|
|
|
12
12
|
message: "peer rounded-2xl text-[13px] @[480px]:text-base p-4 w-fit max-w-[80%] prose overflow-x-auto",
|
|
13
13
|
message__bot: "text-slate-900 bg-gradient-to-tr from-slate-50 to-slate-100",
|
|
14
14
|
message__user: "ml-auto @lg:ml-0 text-white bg-gradient-to-tr from-blue-600 to-blue-700",
|
|
15
|
-
timestamp: "w-fit my-0.5 text-slate-400 text-[13px] opacity-0 peer-hover:opacity-100 duration-200 whitespace-pre-wrap",
|
|
15
|
+
timestamp: "w-fit my-0.5 ml-4 @lg:ml-0 text-slate-400 text-[10px] @[480px]:text-[13px] opacity-0 peer-hover:opacity-100 duration-200 whitespace-pre-wrap",
|
|
16
16
|
timestamp__bot: "",
|
|
17
17
|
timestamp__user: "ml-auto",
|
|
18
18
|
});
|
|
@@ -37,7 +37,7 @@ export function MessageBubble({ message, showTimestamp = true, customCssClasses,
|
|
|
37
37
|
return (_jsx("div", { className: cssClasses.topContainer, children: _jsxs("div", { className: subContainerCssClasses, children: [_jsx("div", { className: messageCssClasses, children: _jsx(Markdown, { content: message.text }) }), showTimestamp && (_jsx("div", { className: timestampCssClasses, children: message.timestamp ? formatTimestamp(message.timestamp) : " " }))] }) }));
|
|
38
38
|
}
|
|
39
39
|
/**
|
|
40
|
-
* Formats message's timestamp from "2023-05-18T19:33:34.553Z" to "7:33
|
|
40
|
+
* Formats message's timestamp from "2023-05-18T19:33:34.553Z" to "7:33 PM"
|
|
41
41
|
*
|
|
42
42
|
* @param timestamp - the timestamp to convert from
|
|
43
43
|
* @returns formatted timestamp
|
|
@@ -46,7 +46,6 @@ function defaultFormatTimestamp(timestamp) {
|
|
|
46
46
|
return new Date(timestamp).toLocaleString(undefined, {
|
|
47
47
|
hour: "numeric",
|
|
48
48
|
minute: "numeric",
|
|
49
|
-
second: "numeric",
|
|
50
49
|
hour12: true,
|
|
51
50
|
});
|
|
52
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageBubble.js","sourceRoot":"","sources":["../../../src/components/MessageBubble.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAoB3E,MAAM,iBAAiB,GAA4B,uBAAuB,
|
|
1
|
+
{"version":3,"file":"MessageBubble.js","sourceRoot":"","sources":["../../../src/components/MessageBubble.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAoB3E,MAAM,iBAAiB,GAA4B,uBAAuB,CACxE,eAAe,EACf;IACE,YAAY,EAAE,mCAAmC;IACjD,YAAY,EACV,iEAAiE;IACnE,iBAAiB,EAAE,EAAE;IACrB,kBAAkB,EAAE,sBAAsB;IAC1C,OAAO,EACL,6FAA6F;IAC/F,YAAY,EAAE,6DAA6D;IAC3E,aAAa,EACX,yEAAyE;IAC3E,SAAS,EACP,8IAA8I;IAChJ,cAAc,EAAE,EAAE;IAClB,eAAe,EAAE,SAAS;CAC3B,CACF,CAAC;AAyBF;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,gBAAgB,EAChB,eAAe,GAAG,sBAAsB,GACrB;IACnB,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,iBAAiB,GAAG,OAAO,CAC/B,UAAU,CAAC,OAAO,EAClB,OAAO,CAAC,MAAM,KAAK,aAAa,CAAC,IAAI;QACnC,CAAC,CAAC,UAAU,CAAC,aAAa;QAC1B,CAAC,CAAC,UAAU,CAAC,YAAY,CAC5B,CAAC;IACF,MAAM,sBAAsB,GAAG,OAAO,CACpC,UAAU,CAAC,YAAY,EACvB,OAAO,CAAC,MAAM,KAAK,aAAa,CAAC,IAAI;QACnC,CAAC,CAAC,UAAU,CAAC,kBAAkB;QAC/B,CAAC,CAAC,UAAU,CAAC,iBAAiB,CACjC,CAAC;IACF,MAAM,mBAAmB,GAAG,OAAO,CACjC,UAAU,CAAC,SAAS,EACpB,OAAO,CAAC,MAAM,KAAK,aAAa,CAAC,IAAI;QACnC,CAAC,CAAC,UAAU,CAAC,eAAe;QAC5B,CAAC,CAAC,UAAU,CAAC,cAAc,CAC9B,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,UAAU,CAAC,YAAY,YACrC,eAAK,SAAS,EAAE,sBAAsB,aACpC,cAAK,SAAS,EAAE,iBAAiB,YAC/B,KAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,CAAC,IAAI,GAAI,GAC/B,EAEL,aAAa,IAAI,CAChB,cAAK,SAAS,EAAE,mBAAmB,YAChC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,GACzD,CACP,IACG,GACF,CACP,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAS,sBAAsB,CAAC,SAAiB;IAC/C,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,SAAS,EAAE;QACnD,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,IAAI;KACb,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDefaultHandleApiError.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDefaultHandleApiError.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useDefaultHandleApiError.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDefaultHandleApiError.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,wBAAgB,wBAAwB,QAIhC,OAAO,UAUd"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MessageSource, useChatActions
|
|
1
|
+
import { MessageSource, useChatActions } from "@yext/chat-headless-react";
|
|
2
2
|
import { useCallback } from "react";
|
|
3
3
|
/**
|
|
4
4
|
* Returns a default handler function for API errors. It will log the error and
|
|
@@ -8,17 +8,13 @@ import { useCallback } from "react";
|
|
|
8
8
|
*/
|
|
9
9
|
export function useDefaultHandleApiError() {
|
|
10
10
|
const chat = useChatActions();
|
|
11
|
-
const messages = useChatState((s) => s.conversation.messages);
|
|
12
11
|
return useCallback((e) => {
|
|
13
12
|
console.error(e);
|
|
14
|
-
chat.
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
},
|
|
21
|
-
]);
|
|
22
|
-
}, [chat, messages]);
|
|
13
|
+
chat.addMessage({
|
|
14
|
+
text: "Sorry, I'm unable to respond at the moment. Please try again later!",
|
|
15
|
+
source: MessageSource.BOT,
|
|
16
|
+
timestamp: new Date().toISOString(),
|
|
17
|
+
});
|
|
18
|
+
}, [chat]);
|
|
23
19
|
}
|
|
24
20
|
//# sourceMappingURL=useDefaultHandleApiError.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDefaultHandleApiError.js","sourceRoot":"","sources":["../../../src/hooks/useDefaultHandleApiError.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useDefaultHandleApiError.js","sourceRoot":"","sources":["../../../src/hooks/useDefaultHandleApiError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC;;;;;GAKG;AACH,MAAM,UAAU,wBAAwB;IACtC,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;IAE9B,OAAO,WAAW,CAChB,CAAC,CAAU,EAAE,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjB,IAAI,CAAC,UAAU,CAAC;YACd,IAAI,EAAE,qEAAqE;YAC3E,MAAM,EAAE,aAAa,CAAC,GAAG;YACzB,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;SACpC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/icons/Chat.tsx"],"names":[],"mappings":";AAAA,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAsC3E"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export function ChatIcon({ className }) {
|
|
3
|
+
return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.3028 12.8082L15.1553 12.9342L15.1729 13.1273L15.3973 15.5959C15.3983 15.6063 15.3964 15.6126 15.3943 15.617C15.3918 15.6223 15.3873 15.6283 15.3805 15.6332C15.3737 15.6382 15.3667 15.6408 15.3608 15.6416C15.356 15.6422 15.3495 15.6422 15.3398 15.6381L12.3578 14.3956L12.245 14.3486L12.1261 14.3771C11.4553 14.5381 10.7412 14.625 10 14.625C5.9718 14.625 2.875 12.099 2.875 9.16667C2.875 6.23436 5.9718 3.70834 10 3.70834C14.0282 3.70834 17.125 6.23436 17.125 9.16667C17.125 10.5493 16.4496 11.8289 15.3028 12.8082Z", fill: "white", stroke: "white", strokeWidth: "0.75" }), _jsx("path", { d: "M7 7.54584C7 7.38015 7.13431 7.24584 7.3 7.24584H8.725C8.89069 7.24584 9.025 7.38015 9.025 7.54584C9.025 7.71152 8.89069 7.84584 8.725 7.84584H7.3C7.13431 7.84584 7 7.71152 7 7.54584Z", fill: "currentColor" }), _jsx("path", { d: "M9.625 7.54584C9.625 7.15233 9.944 6.83334 10.3375 6.83334H12.2875C12.681 6.83334 13 7.15233 13 7.54584C13 7.93934 12.681 8.25834 12.2875 8.25834H10.3375C9.944 8.25834 9.625 7.93934 9.625 7.54584Z", fill: "currentColor" }), _jsx("path", { d: "M7 9.30834C7 9.14265 7.13431 9.00834 7.3 9.00834H12.7C12.8657 9.00834 13 9.14265 13 9.30834C13 9.47402 12.8657 9.60834 12.7 9.60834H7.3C7.13431 9.60834 7 9.47402 7 9.30834Z", fill: "currentColor" }), _jsx("path", { d: "M7 11.0708C7 10.6773 7.319 10.3583 7.7125 10.3583H8.1625C8.556 10.3583 8.875 10.6773 8.875 11.0708C8.875 11.4643 8.556 11.7833 8.1625 11.7833H7.7125C7.319 11.7833 7 11.4643 7 11.0708Z", fill: "currentColor" }), _jsx("path", { d: "M9.475 11.0708C9.475 10.9052 9.60931 10.7708 9.775 10.7708H12.7C12.8657 10.7708 13 10.9052 13 11.0708C13 11.2365 12.8657 11.3708 12.7 11.3708H9.775C9.60931 11.3708 9.475 11.2365 9.475 11.0708Z", fill: "currentColor" })] }));
|
|
4
|
+
}
|
|
5
|
+
//# sourceMappingURL=Chat.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/icons/Chat.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,QAAQ,CAAC,EAAE,SAAS,EAA0B;IAC5D,OAAO,CACL,eACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,aAElC,eACE,CAAC,EAAC,ugBAAugB,EACzgB,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,OAAO,EACd,WAAW,EAAC,MAAM,GAClB,EACF,eACE,CAAC,EAAC,yLAAyL,EAC3L,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,sMAAsM,EACxM,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,8KAA8K,EAChL,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,yLAAyL,EAC3L,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,kMAAkM,EACpM,IAAI,EAAC,cAAc,GACnB,IACE,CACP,CAAC;AACJ,CAAC"}
|
package/lib/esm/icons/Cross.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cross.d.ts","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,
|
|
1
|
+
{"version":3,"file":"Cross.d.ts","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAc5E"}
|