@yext/chat-ui-react 0.1.0 → 0.1.1
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 +8 -2
- package/THIRD-PARTY-NOTICES +6 -6
- package/lib/bundle-no-resets.css +1 -0
- package/lib/commonjs/components/ChatHeader.js +1 -1
- package/lib/commonjs/components/ChatHeader.js.map +1 -1
- package/lib/commonjs/components/ChatInput.d.ts +2 -3
- package/lib/commonjs/components/ChatInput.d.ts.map +1 -1
- package/lib/commonjs/components/ChatInput.js +4 -3
- 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 +5 -4
- package/lib/commonjs/components/ChatPanel.js.map +1 -1
- package/lib/commonjs/components/ChatPopUp.d.ts.map +1 -1
- package/lib/commonjs/components/ChatPopUp.js +3 -2
- package/lib/commonjs/components/ChatPopUp.js.map +1 -1
- package/lib/commonjs/components/LoadingDots.d.ts.map +1 -1
- package/lib/commonjs/components/LoadingDots.js.map +1 -1
- package/lib/commonjs/components/Markdown.js +1 -1
- package/lib/commonjs/components/Markdown.js.map +1 -1
- package/lib/commonjs/hooks/useDefaultHandleApiError.d.ts +8 -0
- package/lib/commonjs/hooks/useDefaultHandleApiError.d.ts.map +1 -0
- package/lib/commonjs/hooks/useDefaultHandleApiError.js +28 -0
- package/lib/commonjs/hooks/useDefaultHandleApiError.js.map +1 -0
- package/lib/commonjs/icons/Arrow.d.ts.map +1 -1
- package/lib/commonjs/icons/Arrow.js +1 -1
- package/lib/commonjs/icons/Arrow.js.map +1 -1
- package/lib/commonjs/icons/Cross.d.ts.map +1 -1
- package/lib/commonjs/icons/Cross.js.map +1 -1
- package/lib/commonjs/icons/DualSync.d.ts.map +1 -1
- package/lib/commonjs/icons/DualSync.js +1 -1
- package/lib/commonjs/icons/DualSync.js.map +1 -1
- package/lib/commonjs/icons/Message.d.ts.map +1 -1
- package/lib/commonjs/icons/Message.js +1 -1
- package/lib/commonjs/icons/Message.js.map +1 -1
- package/lib/esm/components/ChatHeader.js +1 -1
- package/lib/esm/components/ChatHeader.js.map +1 -1
- package/lib/esm/components/ChatInput.d.ts +2 -3
- package/lib/esm/components/ChatInput.d.ts.map +1 -1
- package/lib/esm/components/ChatInput.js +3 -2
- 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 +4 -3
- package/lib/esm/components/ChatPanel.js.map +1 -1
- package/lib/esm/components/ChatPopUp.d.ts.map +1 -1
- package/lib/esm/components/ChatPopUp.js +5 -4
- package/lib/esm/components/ChatPopUp.js.map +1 -1
- package/lib/esm/components/LoadingDots.d.ts.map +1 -1
- package/lib/esm/components/LoadingDots.js.map +1 -1
- package/lib/esm/components/Markdown.js +1 -1
- package/lib/esm/components/Markdown.js.map +1 -1
- package/lib/esm/hooks/useDefaultHandleApiError.d.ts +8 -0
- package/lib/esm/hooks/useDefaultHandleApiError.d.ts.map +1 -0
- package/lib/esm/hooks/useDefaultHandleApiError.js +24 -0
- package/lib/esm/hooks/useDefaultHandleApiError.js.map +1 -0
- package/lib/esm/icons/Arrow.d.ts.map +1 -1
- package/lib/esm/icons/Arrow.js +1 -1
- package/lib/esm/icons/Arrow.js.map +1 -1
- package/lib/esm/icons/Cross.d.ts.map +1 -1
- package/lib/esm/icons/Cross.js.map +1 -1
- package/lib/esm/icons/DualSync.d.ts.map +1 -1
- package/lib/esm/icons/DualSync.js +1 -1
- package/lib/esm/icons/DualSync.js.map +1 -1
- package/lib/esm/icons/Message.d.ts.map +1 -1
- package/lib/esm/icons/Message.js +1 -1
- package/lib/esm/icons/Message.js.map +1 -1
- package/lib/esm/index.d.ts +2 -3
- package/package.json +5 -4
- package/src/components/ChatHeader.tsx +8 -8
- package/src/components/ChatInput.tsx +5 -5
- package/src/components/ChatPanel.tsx +5 -4
- package/src/components/ChatPopUp.tsx +32 -23
- package/src/components/LoadingDots.tsx +1 -4
- package/src/components/Markdown.tsx +3 -3
- package/src/hooks/useDefaultHandleApiError.ts +32 -0
- package/src/icons/Arrow.tsx +12 -4
- package/src/icons/Cross.tsx +10 -4
- package/src/icons/DualSync.tsx +11 -4
- package/src/icons/Message.tsx +9 -3
- package/lib/commonjs/utils/defaultHandleError.d.ts +0 -9
- package/lib/commonjs/utils/defaultHandleError.d.ts.map +0 -1
- package/lib/commonjs/utils/defaultHandleError.js +0 -15
- package/lib/commonjs/utils/defaultHandleError.js.map +0 -1
- package/lib/esm/utils/defaultHandleError.d.ts +0 -9
- package/lib/esm/utils/defaultHandleError.d.ts.map +0 -1
- package/lib/esm/utils/defaultHandleError.js +0 -11
- package/lib/esm/utils/defaultHandleError.js.map +0 -1
- package/src/utils/defaultHandleError.ts +0 -10
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useState } from "react";
|
|
3
|
-
import { MessageIcon } from
|
|
3
|
+
import { MessageIcon } from "../icons/Message";
|
|
4
4
|
import { ChatPanel } from "./ChatPanel";
|
|
5
|
-
import { ChatHeader } from "./ChatHeader";
|
|
5
|
+
import { ChatHeader, } from "./ChatHeader";
|
|
6
6
|
import { twMerge } from "tailwind-merge";
|
|
7
7
|
import { useComposedCssClasses } from "../hooks";
|
|
8
8
|
const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 ";
|
|
@@ -11,7 +11,8 @@ const builtInCssClasses = {
|
|
|
11
11
|
panel: fixedPosition + "w-80 lg:w-96 h-[75vh]",
|
|
12
12
|
panel__display: "duration-300 translate-y-0",
|
|
13
13
|
panel__hidden: "duration-300 translate-y-[20%] opacity-0 invisible",
|
|
14
|
-
button: fixedPosition +
|
|
14
|
+
button: fixedPosition +
|
|
15
|
+
"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",
|
|
15
16
|
button__display: "duration-300 transform translate-y-0",
|
|
16
17
|
button__hidden: "duration-300 transform translate-y-[20%] opacity-0 invisible",
|
|
17
18
|
};
|
|
@@ -24,7 +25,7 @@ const builtInCssClasses = {
|
|
|
24
25
|
* @param props - {@link ChatPanelProps}
|
|
25
26
|
*/
|
|
26
27
|
export function ChatPopUp(props) {
|
|
27
|
-
const { openPanelButtonIcon = _jsx(MessageIcon, {}), customCssClasses, showRestartButton = true, onClose: customOnClose, title } = props;
|
|
28
|
+
const { openPanelButtonIcon = _jsx(MessageIcon, {}), customCssClasses, showRestartButton = true, onClose: customOnClose, title, } = props;
|
|
28
29
|
const [showChat, setShowChat] = useState(false);
|
|
29
30
|
const onClick = useCallback(() => {
|
|
30
31
|
setShowChat(!showChat);
|
|
@@ -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,WAAW,EAAE,MAAM,kBAAkB,
|
|
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,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,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;AAmBjD,MAAM,aAAa,GAAG,kDAAkD,CAAC;AACzE,MAAM,iBAAiB,GAAwB;IAC7C,SAAS,EAAE,gBAAgB;IAC3B,KAAK,EAAE,aAAa,GAAG,uBAAuB;IAC9C,cAAc,EAAE,4BAA4B;IAC5C,aAAa,EAAE,oDAAoD;IACnE,MAAM,EACJ,aAAa;QACb,gLAAgL;IAClL,eAAe,EAAE,sCAAsC;IACvD,cAAc,EACZ,8DAA8D;CACjE,CAAC;AAkBF;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,mBAAmB,GAAG,KAAC,WAAW,KAAG,EACrC,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,GACb,IACL,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingDots.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingDots.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAWhE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingDots.js","sourceRoot":"","sources":["../../../src/components/LoadingDots.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,SAAS,EAA0B;IAC/D,OAAO,CACL,6BACa,mBAAmB,EAC9B,SAAS,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"LoadingDots.js","sourceRoot":"","sources":["../../../src/components/LoadingDots.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,SAAS,EAA0B;IAC/D,OAAO,CACL,6BACa,mBAAmB,EAC9B,SAAS,EAAE,OAAO,CAAC,gCAAgC,EAAE,SAAS,CAAC,aAE/D,cAAK,SAAS,EAAC,gEAAgE,GAAG,EAClF,cAAK,SAAS,EAAC,qEAAqE,GAAG,EACvF,cAAK,SAAS,EAAC,qEAAqE,GAAG,IACnF,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -6,7 +6,7 @@ import rehypeSanitize from "rehype-sanitize";
|
|
|
6
6
|
// The Remark and Rehype plugins to use in conjunction with ReactMarkdown.
|
|
7
7
|
const unifiedPlugins = {
|
|
8
8
|
remark: [
|
|
9
|
-
remarkGfm //renders Github-Flavored Markdown
|
|
9
|
+
remarkGfm, //renders Github-Flavored Markdown
|
|
10
10
|
],
|
|
11
11
|
rehype: [
|
|
12
12
|
rehypeRaw,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.js","sourceRoot":"","sources":["../../../src/components/Markdown.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAgC,MAAM,gBAAgB,CAAC;AAC9D,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,cAAc,MAAM,iBAAiB,CAAC;AAE7C,0EAA0E;AAC1E,MAAM,cAAc,GAAsD;IACxE,MAAM,EAAE;QACN,SAAS,
|
|
1
|
+
{"version":3,"file":"Markdown.js","sourceRoot":"","sources":["../../../src/components/Markdown.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAgC,MAAM,gBAAgB,CAAC;AAC9D,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,cAAc,MAAM,iBAAiB,CAAC;AAE7C,0EAA0E;AAC1E,MAAM,cAAc,GAAsD;IACxE,MAAM,EAAE;QACN,SAAS,EAAE,kCAAkC;KAC9C;IACD,MAAM,EAAE;QACN,SAAS;QACT,cAAc,EAAE,0BAA0B;KAC3C;CACF,CAAC;AAOF;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,OAAO,EAAiB;IACjD,OAAO,CACL,KAAC,aAAa,IACZ,QAAQ,EAAE,OAAO,EACjB,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,aAAa,EAAE,cAAc,CAAC,MAAM,GACpC,CACH,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns a default handler function for API errors. It will log the error and
|
|
3
|
+
* add a default error message to state.
|
|
4
|
+
*
|
|
5
|
+
* @internal
|
|
6
|
+
*/
|
|
7
|
+
export declare function useDefaultHandleApiError(): (e: unknown) => void;
|
|
8
|
+
//# sourceMappingURL=useDefaultHandleApiError.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDefaultHandleApiError.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDefaultHandleApiError.ts"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,wBAAgB,wBAAwB,QAKhC,OAAO,UAad"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { MessageSource, useChatActions, useChatState, } from "@yext/chat-headless-react";
|
|
2
|
+
import { useCallback } from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Returns a default handler function for API errors. It will log the error and
|
|
5
|
+
* add a default error message to state.
|
|
6
|
+
*
|
|
7
|
+
* @internal
|
|
8
|
+
*/
|
|
9
|
+
export function useDefaultHandleApiError() {
|
|
10
|
+
const chat = useChatActions();
|
|
11
|
+
const messages = useChatState((s) => s.conversation.messages);
|
|
12
|
+
return useCallback((e) => {
|
|
13
|
+
console.error(e);
|
|
14
|
+
chat.setMessages([
|
|
15
|
+
...messages,
|
|
16
|
+
{
|
|
17
|
+
text: "Sorry, I'm unable to respond at the moment. Please try again later!",
|
|
18
|
+
source: MessageSource.BOT,
|
|
19
|
+
timestamp: new Date().toISOString(),
|
|
20
|
+
},
|
|
21
|
+
]);
|
|
22
|
+
}, [chat, messages]);
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=useDefaultHandleApiError.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDefaultHandleApiError.js","sourceRoot":"","sources":["../../../src/hooks/useDefaultHandleApiError.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,cAAc,EACd,YAAY,GACb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC;;;;;GAKG;AACH,MAAM,UAAU,wBAAwB;IACtC,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;IAC9B,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAE9D,OAAO,WAAW,CAChB,CAAC,CAAU,EAAE,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjB,IAAI,CAAC,WAAW,CAAC;YACf,GAAG,QAAQ;YACX;gBACE,IAAI,EAAE,qEAAqE;gBAC3E,MAAM,EAAE,aAAa,CAAC,GAAG;gBACzB,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;aACpC;SACF,CAAC,CAAC;IACL,CAAC,EACD,CAAC,IAAI,EAAE,QAAQ,CAAC,CACjB,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Arrow.d.ts","sourceRoot":"","sources":["../../../src/icons/Arrow.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,IAAI,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"Arrow.d.ts","sourceRoot":"","sources":["../../../src/icons/Arrow.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,IAAI,GAAG,CAAC,OAAO,CAevC"}
|
package/lib/esm/icons/Arrow.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
export function ArrowIcon() {
|
|
3
|
-
return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill:
|
|
3
|
+
return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeLinecap: "square", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M10 5V15" }), _jsx("path", { d: "M15 8.84615L10 4L5 8.84615" })] }));
|
|
4
4
|
}
|
|
5
5
|
//# sourceMappingURL=Arrow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Arrow.js","sourceRoot":"","sources":["../../../src/icons/Arrow.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"Arrow.js","sourceRoot":"","sources":["../../../src/icons/Arrow.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,eACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,QAAQ,EACtB,KAAK,EAAC,4BAA4B,aAElC,eAAM,CAAC,EAAC,UAAU,GAAG,EACrB,eAAM,CAAC,EAAC,4BAA4B,GAAG,IACnC,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cross.d.ts","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,IAAI,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"Cross.d.ts","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,IAAI,GAAG,CAAC,OAAO,CAavC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cross.js","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"Cross.js","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,eACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,cAAc,EACrB,KAAK,EAAC,4BAA4B,aAElC,eAAM,CAAC,EAAC,YAAY,EAAC,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,OAAO,GAAG,EACrE,eAAM,CAAC,EAAC,YAAY,EAAC,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,OAAO,GAAG,IACjE,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DualSync.d.ts","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,wBAAgB,YAAY,IAAI,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"DualSync.d.ts","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,wBAAgB,YAAY,IAAI,GAAG,CAAC,OAAO,CAc1C"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
export function DualSyncIcon() {
|
|
3
|
-
return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill:
|
|
3
|
+
return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [_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" }), _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" })] }));
|
|
4
4
|
}
|
|
5
5
|
//# sourceMappingURL=DualSync.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DualSync.js","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,YAAY;IAC1B,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"DualSync.js","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,YAAY;IAC1B,OAAO,CACL,eACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,KAAK,EAAC,4BAA4B,aAElC,eAAM,CAAC,EAAC,6XAA6X,GAAG,EACxY,eAAM,CAAC,EAAC,+XAA+X,GAAG,IACtY,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/icons/Message.tsx"],"names":[],"mappings":";AAAA,wBAAgB,WAAW,IAAI,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/icons/Message.tsx"],"names":[],"mappings":";AAAA,wBAAgB,WAAW,IAAI,GAAG,CAAC,OAAO,CAezC"}
|
package/lib/esm/icons/Message.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
export function MessageIcon() {
|
|
3
|
-
return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill:
|
|
3
|
+
return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M3.37424 17.1166L6.31902 14.1718H16.6258V4.84663H3.37424V17.1166ZM3.86503 5.33742H16.135V13.681H6.31902H6.11043L5.96319 13.8282L3.85276 15.9386V5.33742H3.86503Z" }), _jsx("path", { d: "M14.4172 9.2638H6.07362V9.7546H14.4172V9.2638Z" }), _jsx("path", { d: "M13.9264 10.7362H6.07362V11.227H13.9264V10.7362Z" }), _jsx("path", { d: "M13.4356 7.79141H6.07362V8.28221H13.4356V7.79141Z" })] }));
|
|
4
4
|
}
|
|
5
5
|
//# sourceMappingURL=Message.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/icons/Message.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,WAAW;IACzB,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/icons/Message.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,WAAW;IACzB,OAAO,CACL,eACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,4BAA4B,aAElC,eAAM,CAAC,EAAC,kKAAkK,GAAG,EAC7K,eAAM,CAAC,EAAC,gDAAgD,GAAG,EAC3D,eAAM,CAAC,EAAC,kDAAkD,GAAG,EAC7D,eAAM,CAAC,EAAC,mDAAmD,GAAG,IAC1D,CACP,CAAC;AACJ,CAAC"}
|
package/lib/esm/index.d.ts
CHANGED
|
@@ -93,9 +93,8 @@ export declare interface ChatInputProps {
|
|
|
93
93
|
/** Enable auto focus for the input box. Defaults to false. */
|
|
94
94
|
inputAutoFocus?: boolean;
|
|
95
95
|
/**
|
|
96
|
-
* A function which is called when an error occurs from
|
|
97
|
-
*
|
|
98
|
-
* By default, the error is logged to the console.
|
|
96
|
+
* A function which is called when an error occurs from Chat API while processing the user's message.
|
|
97
|
+
* By default, the error is logged to the console and an error message is added to state.
|
|
99
98
|
*/
|
|
100
99
|
handleError?: (e: unknown) => void;
|
|
101
100
|
/** Custom icon for the send button. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yext/chat-ui-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "A library of React Components for powering Yext Chat integrations.",
|
|
5
5
|
"author": "clippy@yext.com",
|
|
6
6
|
"main": "./lib/commonjs/index.js",
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
"import": "./lib/esm/index.js",
|
|
13
13
|
"require": "./lib/commonjs/index.js"
|
|
14
14
|
},
|
|
15
|
-
"./bundle.css": "./lib/bundle.css"
|
|
15
|
+
"./bundle.css": "./lib/bundle.css",
|
|
16
|
+
"./bundle-no-resets.css": "./lib/bundle-no-resets.css"
|
|
16
17
|
},
|
|
17
18
|
"license": "BSD-3-Clause",
|
|
18
19
|
"files": [
|
|
@@ -37,7 +38,7 @@
|
|
|
37
38
|
"generate-docs": "api-extractor run --local --verbose && api-documenter markdown --input-folder temp --output-folder docs && rm -rf temp",
|
|
38
39
|
"generate-notices": "generate-license-file --input package.json --output ./THIRD-PARTY-NOTICES --overwrite",
|
|
39
40
|
"build:js": "tsc -p tsconfig.esm.json && tsc -p tsconfig.cjs.json",
|
|
40
|
-
"build:css": "tailwindcss -o ./lib/bundle.css --minify -c tailwind.config.js",
|
|
41
|
+
"build:css": "tailwindcss -o ./lib/bundle.css --minify -c tailwind.config.js && tailwindcss -o ./lib/bundle-no-resets.css --minify -c tailwind-no-resets.config.js",
|
|
41
42
|
"build": "rm -rf lib/** && npm run build:js && npm run build:css && npm run generate-docs && npm run generate-notices",
|
|
42
43
|
"build-storybook": "storybook build"
|
|
43
44
|
},
|
|
@@ -79,7 +80,7 @@
|
|
|
79
80
|
"typescript": "^5.0.4"
|
|
80
81
|
},
|
|
81
82
|
"peerDependencies": {
|
|
82
|
-
"@yext/chat-headless-react": "^0.3.
|
|
83
|
+
"@yext/chat-headless-react": "^0.3.2",
|
|
83
84
|
"react": "^16.14 || ^17 || ^18",
|
|
84
85
|
"react-dom": "^16.14 || ^17 || || ^18"
|
|
85
86
|
},
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useChatActions } from "@yext/chat-headless-react";
|
|
2
|
-
import { DualSyncIcon } from "../icons/DualSync"
|
|
2
|
+
import { DualSyncIcon } from "../icons/DualSync";
|
|
3
3
|
import { useComposedCssClasses } from "../hooks/useComposedCssClasses";
|
|
4
4
|
import { useCallback, useRef, useState } from "react";
|
|
5
5
|
import { twMerge } from "tailwind-merge";
|
|
@@ -22,7 +22,7 @@ const builtInCssClasses: Readonly<ChatHeaderCssClasses> = {
|
|
|
22
22
|
"w-full px-4 py-3 flex justify-between bg-gradient-to-tr from-blue-600 to-blue-800 rounded-t-3xl",
|
|
23
23
|
title: "text-white text-xl font-medium",
|
|
24
24
|
restartButton: "w-8 text-white stroke-[0.2] ml-auto",
|
|
25
|
-
closeButton: "w-8 text-white hover:scale-110"
|
|
25
|
+
closeButton: "w-8 text-white hover:scale-110",
|
|
26
26
|
};
|
|
27
27
|
|
|
28
28
|
/**
|
|
@@ -106,12 +106,12 @@ export function ChatHeader({
|
|
|
106
106
|
)}
|
|
107
107
|
{showCloseButton && (
|
|
108
108
|
<button
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
109
|
+
aria-label="Close Chat"
|
|
110
|
+
onClick={onClose}
|
|
111
|
+
className={cssClasses.closeButton}
|
|
112
|
+
>
|
|
113
|
+
{closeButtonIcon}
|
|
114
|
+
</button>
|
|
115
115
|
)}
|
|
116
116
|
</div>
|
|
117
117
|
);
|
|
@@ -4,7 +4,7 @@ import { ArrowIcon } from "../icons/Arrow";
|
|
|
4
4
|
import { useComposedCssClasses } from "../hooks";
|
|
5
5
|
import Textarea from "react-expanding-textarea";
|
|
6
6
|
import { twMerge } from "tailwind-merge";
|
|
7
|
-
import {
|
|
7
|
+
import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* The CSS class interface for the {@link ChatInput} component.
|
|
@@ -44,9 +44,8 @@ export interface ChatInputProps {
|
|
|
44
44
|
/** Enable auto focus for the input box. Defaults to false. */
|
|
45
45
|
inputAutoFocus?: boolean;
|
|
46
46
|
/**
|
|
47
|
-
* A function which is called when an error occurs from
|
|
48
|
-
*
|
|
49
|
-
* By default, the error is logged to the console.
|
|
47
|
+
* A function which is called when an error occurs from Chat API while processing the user's message.
|
|
48
|
+
* By default, the error is logged to the console and an error message is added to state.
|
|
50
49
|
*/
|
|
51
50
|
handleError?: (e: unknown) => void;
|
|
52
51
|
/** Custom icon for the send button. */
|
|
@@ -74,6 +73,7 @@ export function ChatInput({
|
|
|
74
73
|
const canSendMessage = useChatState(
|
|
75
74
|
(state) => state.conversation.canSendMessage
|
|
76
75
|
);
|
|
76
|
+
const defaultHandleApiError = useDefaultHandleApiError();
|
|
77
77
|
|
|
78
78
|
const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
|
|
79
79
|
const sendButtonClassNames = twMerge(
|
|
@@ -87,7 +87,7 @@ export function ChatInput({
|
|
|
87
87
|
: chat.getNextMessage(input);
|
|
88
88
|
setInput("");
|
|
89
89
|
res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
|
|
90
|
-
}, [chat, input, handleError, stream]);
|
|
90
|
+
}, [chat, input, handleError, defaultHandleApiError, stream]);
|
|
91
91
|
|
|
92
92
|
const handleKeyDown = useCallback(
|
|
93
93
|
(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
import { ChatInput, ChatInputCssClasses, ChatInputProps } from "./ChatInput";
|
|
9
9
|
import { LoadingDots } from "./LoadingDots";
|
|
10
10
|
import { useComposedCssClasses } from "../hooks";
|
|
11
|
-
import {
|
|
11
|
+
import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
|
|
12
12
|
|
|
13
13
|
/**
|
|
14
14
|
* The CSS class interface for the {@link ChatPanel} component.
|
|
@@ -65,6 +65,7 @@ export function ChatPanel(props: ChatPanelProps) {
|
|
|
65
65
|
(state) => state.conversation.canSendMessage
|
|
66
66
|
);
|
|
67
67
|
const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
|
|
68
|
+
const defaultHandleApiError = useDefaultHandleApiError();
|
|
68
69
|
|
|
69
70
|
// Fetch the first message on load, if there are no existing messages or a request being processed
|
|
70
71
|
useEffect(() => {
|
|
@@ -74,7 +75,7 @@ export function ChatPanel(props: ChatPanelProps) {
|
|
|
74
75
|
const { stream = true, handleError } = props;
|
|
75
76
|
const res = stream ? chat.streamNextMessage() : chat.getNextMessage();
|
|
76
77
|
res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
|
|
77
|
-
}, [chat, props, messages, canSendMessage]);
|
|
78
|
+
}, [chat, props, messages, defaultHandleApiError, canSendMessage]);
|
|
78
79
|
|
|
79
80
|
const messagesRef = useRef<HTMLDivElement>(null);
|
|
80
81
|
|
|
@@ -82,8 +83,8 @@ export function ChatPanel(props: ChatPanelProps) {
|
|
|
82
83
|
useEffect(() => {
|
|
83
84
|
messagesRef.current?.scroll({
|
|
84
85
|
top: messagesRef.current?.scrollHeight,
|
|
85
|
-
behavior:
|
|
86
|
-
|
|
86
|
+
behavior: "smooth",
|
|
87
|
+
});
|
|
87
88
|
}, [messages]);
|
|
88
89
|
|
|
89
90
|
return (
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { useCallback, useState } from "react";
|
|
2
|
-
import { MessageIcon } from
|
|
2
|
+
import { MessageIcon } from "../icons/Message";
|
|
3
3
|
import { ChatPanel, ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
ChatHeader,
|
|
6
|
+
ChatHeaderCssClasses,
|
|
7
|
+
ChatHeaderProps,
|
|
8
|
+
} from "./ChatHeader";
|
|
5
9
|
import { twMerge } from "tailwind-merge";
|
|
6
10
|
import { useComposedCssClasses } from "../hooks";
|
|
7
11
|
|
|
@@ -18,19 +22,22 @@ export interface ChatPopUpCssClasses {
|
|
|
18
22
|
button?: string;
|
|
19
23
|
button__display?: string;
|
|
20
24
|
button__hidden?: string;
|
|
21
|
-
headerCssClasses?: ChatHeaderCssClasses
|
|
22
|
-
panelCssClasses?: ChatPanelCssClasses
|
|
25
|
+
headerCssClasses?: ChatHeaderCssClasses;
|
|
26
|
+
panelCssClasses?: ChatPanelCssClasses;
|
|
23
27
|
}
|
|
24
28
|
|
|
25
|
-
const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 "
|
|
29
|
+
const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 ";
|
|
26
30
|
const builtInCssClasses: ChatPopUpCssClasses = {
|
|
27
31
|
container: "transition-all",
|
|
28
32
|
panel: fixedPosition + "w-80 lg:w-96 h-[75vh]",
|
|
29
33
|
panel__display: "duration-300 translate-y-0",
|
|
30
34
|
panel__hidden: "duration-300 translate-y-[20%] opacity-0 invisible",
|
|
31
|
-
button:
|
|
35
|
+
button:
|
|
36
|
+
fixedPosition +
|
|
37
|
+
"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",
|
|
32
38
|
button__display: "duration-300 transform translate-y-0",
|
|
33
|
-
button__hidden:
|
|
39
|
+
button__hidden:
|
|
40
|
+
"duration-300 transform translate-y-[20%] opacity-0 invisible",
|
|
34
41
|
};
|
|
35
42
|
|
|
36
43
|
/**
|
|
@@ -38,10 +45,9 @@ const builtInCssClasses: ChatPopUpCssClasses = {
|
|
|
38
45
|
*
|
|
39
46
|
* @public
|
|
40
47
|
*/
|
|
41
|
-
export interface ChatPopUpProps
|
|
42
|
-
Omit<ChatHeaderProps, "showCloseButton" | "customCssClasses">,
|
|
43
|
-
|
|
44
|
-
{
|
|
48
|
+
export interface ChatPopUpProps
|
|
49
|
+
extends Omit<ChatHeaderProps, "showCloseButton" | "customCssClasses">,
|
|
50
|
+
Omit<ChatPanelProps, "header" | "customCssClasses"> {
|
|
45
51
|
/** Custom icon for the popup button to open the panel. */
|
|
46
52
|
openPanelButtonIcon?: JSX.Element;
|
|
47
53
|
/**
|
|
@@ -63,9 +69,9 @@ export function ChatPopUp(props: ChatPopUpProps) {
|
|
|
63
69
|
openPanelButtonIcon = <MessageIcon />,
|
|
64
70
|
customCssClasses,
|
|
65
71
|
showRestartButton = true,
|
|
66
|
-
onClose:customOnClose,
|
|
67
|
-
title
|
|
68
|
-
} = props
|
|
72
|
+
onClose: customOnClose,
|
|
73
|
+
title,
|
|
74
|
+
} = props;
|
|
69
75
|
const [showChat, setShowChat] = useState(false);
|
|
70
76
|
const onClick = useCallback(() => {
|
|
71
77
|
setShowChat(!showChat);
|
|
@@ -74,8 +80,8 @@ export function ChatPopUp(props: ChatPopUpProps) {
|
|
|
74
80
|
const onClose = useCallback(() => {
|
|
75
81
|
setShowChat(false);
|
|
76
82
|
customOnClose?.();
|
|
77
|
-
}, [customOnClose])
|
|
78
|
-
|
|
83
|
+
}, [customOnClose]);
|
|
84
|
+
|
|
79
85
|
const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
|
|
80
86
|
const panelCssClasses = twMerge(
|
|
81
87
|
cssClasses.panel,
|
|
@@ -92,13 +98,16 @@ export function ChatPopUp(props: ChatPopUpProps) {
|
|
|
92
98
|
<ChatPanel
|
|
93
99
|
{...props}
|
|
94
100
|
customCssClasses={cssClasses.panelCssClasses}
|
|
95
|
-
header={
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
101
|
+
header={
|
|
102
|
+
<ChatHeader
|
|
103
|
+
title={title}
|
|
104
|
+
showRestartButton={showRestartButton}
|
|
105
|
+
showCloseButton={true}
|
|
106
|
+
onClose={onClose}
|
|
107
|
+
customCssClasses={cssClasses.headerCssClasses}
|
|
108
|
+
/>
|
|
109
|
+
}
|
|
110
|
+
/>
|
|
102
111
|
</div>
|
|
103
112
|
<button
|
|
104
113
|
aria-label="Chat Popup Button"
|
|
@@ -9,10 +9,7 @@ export function LoadingDots({ className }: { className?: string }) {
|
|
|
9
9
|
return (
|
|
10
10
|
<div
|
|
11
11
|
aria-label="Loading Indicator"
|
|
12
|
-
className={twMerge(
|
|
13
|
-
"flex gap-1 p-2 animate-fade-in",
|
|
14
|
-
className
|
|
15
|
-
)}
|
|
12
|
+
className={twMerge("flex gap-1 p-2 animate-fade-in", className)}
|
|
16
13
|
>
|
|
17
14
|
<div className="w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite]" />
|
|
18
15
|
<div className="w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.3s]" />
|
|
@@ -6,7 +6,7 @@ import rehypeSanitize from "rehype-sanitize";
|
|
|
6
6
|
// The Remark and Rehype plugins to use in conjunction with ReactMarkdown.
|
|
7
7
|
const unifiedPlugins: { remark?: PluggableList; rehype: PluggableList } = {
|
|
8
8
|
remark: [
|
|
9
|
-
remarkGfm //renders Github-Flavored Markdown
|
|
9
|
+
remarkGfm, //renders Github-Flavored Markdown
|
|
10
10
|
],
|
|
11
11
|
rehype: [
|
|
12
12
|
rehypeRaw, //to support HTML embedded in markdown
|
|
@@ -22,7 +22,7 @@ interface MarkdownProps {
|
|
|
22
22
|
/**
|
|
23
23
|
* Renders Github-Flavored Markdown from the Knowledge Graph. This Markdown can include
|
|
24
24
|
* arbitrary HTML. Any HTML will be sanitized according to Rehype's default Schema.
|
|
25
|
-
*
|
|
25
|
+
*
|
|
26
26
|
* @public
|
|
27
27
|
*/
|
|
28
28
|
export function Markdown({ content }: MarkdownProps) {
|
|
@@ -33,4 +33,4 @@ export function Markdown({ content }: MarkdownProps) {
|
|
|
33
33
|
rehypePlugins={unifiedPlugins.rehype}
|
|
34
34
|
/>
|
|
35
35
|
);
|
|
36
|
-
}
|
|
36
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import {
|
|
2
|
+
MessageSource,
|
|
3
|
+
useChatActions,
|
|
4
|
+
useChatState,
|
|
5
|
+
} from "@yext/chat-headless-react";
|
|
6
|
+
import { useCallback } from "react";
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Returns a default handler function for API errors. It will log the error and
|
|
10
|
+
* add a default error message to state.
|
|
11
|
+
*
|
|
12
|
+
* @internal
|
|
13
|
+
*/
|
|
14
|
+
export function useDefaultHandleApiError() {
|
|
15
|
+
const chat = useChatActions();
|
|
16
|
+
const messages = useChatState((s) => s.conversation.messages);
|
|
17
|
+
|
|
18
|
+
return useCallback(
|
|
19
|
+
(e: unknown) => {
|
|
20
|
+
console.error(e);
|
|
21
|
+
chat.setMessages([
|
|
22
|
+
...messages,
|
|
23
|
+
{
|
|
24
|
+
text: "Sorry, I'm unable to respond at the moment. Please try again later!",
|
|
25
|
+
source: MessageSource.BOT,
|
|
26
|
+
timestamp: new Date().toISOString(),
|
|
27
|
+
},
|
|
28
|
+
]);
|
|
29
|
+
},
|
|
30
|
+
[chat, messages]
|
|
31
|
+
);
|
|
32
|
+
}
|
package/src/icons/Arrow.tsx
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
export function ArrowIcon(): JSX.Element {
|
|
2
2
|
return (
|
|
3
|
-
<svg
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
<svg
|
|
4
|
+
width="100%"
|
|
5
|
+
height="100%"
|
|
6
|
+
viewBox="0 0 20 20"
|
|
7
|
+
fill="none"
|
|
8
|
+
stroke="currentColor"
|
|
9
|
+
strokeLinecap="square"
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
>
|
|
12
|
+
<path d="M10 5V15" />
|
|
13
|
+
<path d="M15 8.84615L10 4L5 8.84615" />
|
|
6
14
|
</svg>
|
|
7
15
|
);
|
|
8
|
-
}
|
|
16
|
+
}
|
package/src/icons/Cross.tsx
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
export function CrossIcon(): JSX.Element {
|
|
2
2
|
return (
|
|
3
|
-
<svg
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
<svg
|
|
4
|
+
width="100%"
|
|
5
|
+
height="100%"
|
|
6
|
+
viewBox="0 0 20 20"
|
|
7
|
+
stroke="currentColor"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
>
|
|
10
|
+
<path d="M14 14L6 6" strokeLinecap="square" strokeLinejoin="round" />
|
|
11
|
+
<path d="M14 6L6 14" strokeLinecap="square" strokeLinejoin="round" />
|
|
6
12
|
</svg>
|
|
7
13
|
);
|
|
8
|
-
}
|
|
14
|
+
}
|
package/src/icons/DualSync.tsx
CHANGED
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
export function DualSyncIcon(): JSX.Element {
|
|
2
2
|
return (
|
|
3
|
-
<svg
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
<svg
|
|
4
|
+
width="100%"
|
|
5
|
+
height="100%"
|
|
6
|
+
viewBox="0 0 20 20"
|
|
7
|
+
fill="currentColor"
|
|
8
|
+
stroke="currentColor"
|
|
9
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
10
|
+
>
|
|
11
|
+
<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" />
|
|
12
|
+
<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" />
|
|
6
13
|
</svg>
|
|
7
14
|
);
|
|
8
|
-
}
|
|
15
|
+
}
|
package/src/icons/Message.tsx
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
export function MessageIcon(): JSX.Element {
|
|
2
2
|
return (
|
|
3
|
-
<svg
|
|
4
|
-
|
|
3
|
+
<svg
|
|
4
|
+
width="100%"
|
|
5
|
+
height="100%"
|
|
6
|
+
viewBox="0 0 20 20"
|
|
7
|
+
fill="currentColor"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
>
|
|
10
|
+
<path d="M3.37424 17.1166L6.31902 14.1718H16.6258V4.84663H3.37424V17.1166ZM3.86503 5.33742H16.135V13.681H6.31902H6.11043L5.96319 13.8282L3.85276 15.9386V5.33742H3.86503Z" />
|
|
5
11
|
<path d="M14.4172 9.2638H6.07362V9.7546H14.4172V9.2638Z" />
|
|
6
12
|
<path d="M13.9264 10.7362H6.07362V11.227H13.9264V10.7362Z" />
|
|
7
13
|
<path d="M13.4356 7.79141H6.07362V8.28221H13.4356V7.79141Z" />
|
|
8
14
|
</svg>
|
|
9
15
|
);
|
|
10
|
-
}
|
|
16
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"defaultHandleError.d.ts","sourceRoot":"","sources":["../../../src/utils/defaultHandleError.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,OAAO,QAE/C"}
|