@yext/chat-ui-react 0.1.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.
Files changed (150) hide show
  1. package/LICENSE +33 -0
  2. package/README.md +44 -0
  3. package/THIRD-PARTY-NOTICES +2106 -0
  4. package/lib/bundle.css +1 -0
  5. package/lib/commonjs/components/ChatHeader.d.ts +51 -0
  6. package/lib/commonjs/components/ChatHeader.d.ts.map +1 -0
  7. package/lib/commonjs/components/ChatHeader.js +42 -0
  8. package/lib/commonjs/components/ChatHeader.js.map +1 -0
  9. package/lib/commonjs/components/ChatInput.d.ts +48 -0
  10. package/lib/commonjs/components/ChatInput.d.ts.map +1 -0
  11. package/lib/commonjs/components/ChatInput.js +50 -0
  12. package/lib/commonjs/components/ChatInput.js.map +1 -0
  13. package/lib/commonjs/components/ChatPanel.d.ts +39 -0
  14. package/lib/commonjs/components/ChatPanel.d.ts.map +1 -0
  15. package/lib/commonjs/components/ChatPanel.js +54 -0
  16. package/lib/commonjs/components/ChatPanel.js.map +1 -0
  17. package/lib/commonjs/components/ChatPopUp.d.ts +42 -0
  18. package/lib/commonjs/components/ChatPopUp.d.ts.map +1 -0
  19. package/lib/commonjs/components/ChatPopUp.js +45 -0
  20. package/lib/commonjs/components/ChatPopUp.js.map +1 -0
  21. package/lib/commonjs/components/LoadingDots.d.ts +9 -0
  22. package/lib/commonjs/components/LoadingDots.d.ts.map +1 -0
  23. package/lib/commonjs/components/LoadingDots.js +15 -0
  24. package/lib/commonjs/components/LoadingDots.js.map +1 -0
  25. package/lib/commonjs/components/Markdown.d.ts +13 -0
  26. package/lib/commonjs/components/Markdown.d.ts.map +1 -0
  27. package/lib/commonjs/components/Markdown.js +32 -0
  28. package/lib/commonjs/components/Markdown.js.map +1 -0
  29. package/lib/commonjs/components/MessageBubble.d.ts +49 -0
  30. package/lib/commonjs/components/MessageBubble.d.ts.map +1 -0
  31. package/lib/commonjs/components/MessageBubble.js +54 -0
  32. package/lib/commonjs/components/MessageBubble.js.map +1 -0
  33. package/lib/commonjs/components/index.d.ts +11 -0
  34. package/lib/commonjs/components/index.d.ts.map +1 -0
  35. package/lib/commonjs/components/index.js +14 -0
  36. package/lib/commonjs/components/index.js.map +1 -0
  37. package/lib/commonjs/hooks/index.d.ts +2 -0
  38. package/lib/commonjs/hooks/index.d.ts.map +1 -0
  39. package/lib/commonjs/hooks/index.js +6 -0
  40. package/lib/commonjs/hooks/index.js.map +1 -0
  41. package/lib/commonjs/hooks/useComposedCssClasses.d.ts +30 -0
  42. package/lib/commonjs/hooks/useComposedCssClasses.d.ts.map +1 -0
  43. package/lib/commonjs/hooks/useComposedCssClasses.js +60 -0
  44. package/lib/commonjs/hooks/useComposedCssClasses.js.map +1 -0
  45. package/lib/commonjs/icons/Arrow.d.ts +3 -0
  46. package/lib/commonjs/icons/Arrow.d.ts.map +1 -0
  47. package/lib/commonjs/icons/Arrow.js +9 -0
  48. package/lib/commonjs/icons/Arrow.js.map +1 -0
  49. package/lib/commonjs/icons/Cross.d.ts +3 -0
  50. package/lib/commonjs/icons/Cross.d.ts.map +1 -0
  51. package/lib/commonjs/icons/Cross.js +9 -0
  52. package/lib/commonjs/icons/Cross.js.map +1 -0
  53. package/lib/commonjs/icons/DualSync.d.ts +3 -0
  54. package/lib/commonjs/icons/DualSync.d.ts.map +1 -0
  55. package/lib/commonjs/icons/DualSync.js +9 -0
  56. package/lib/commonjs/icons/DualSync.js.map +1 -0
  57. package/lib/commonjs/icons/Message.d.ts +3 -0
  58. package/lib/commonjs/icons/Message.d.ts.map +1 -0
  59. package/lib/commonjs/icons/Message.js +9 -0
  60. package/lib/commonjs/icons/Message.js.map +1 -0
  61. package/lib/commonjs/index.d.ts +3 -0
  62. package/lib/commonjs/index.d.ts.map +1 -0
  63. package/lib/commonjs/index.js +19 -0
  64. package/lib/commonjs/index.js.map +1 -0
  65. package/lib/commonjs/utils/defaultHandleError.d.ts +9 -0
  66. package/lib/commonjs/utils/defaultHandleError.d.ts.map +1 -0
  67. package/lib/commonjs/utils/defaultHandleError.js +15 -0
  68. package/lib/commonjs/utils/defaultHandleError.js.map +1 -0
  69. package/lib/esm/components/ChatHeader.d.ts +51 -0
  70. package/lib/esm/components/ChatHeader.d.ts.map +1 -0
  71. package/lib/esm/components/ChatHeader.js +38 -0
  72. package/lib/esm/components/ChatHeader.js.map +1 -0
  73. package/lib/esm/components/ChatInput.d.ts +48 -0
  74. package/lib/esm/components/ChatInput.d.ts.map +1 -0
  75. package/lib/esm/components/ChatInput.js +43 -0
  76. package/lib/esm/components/ChatInput.js.map +1 -0
  77. package/lib/esm/components/ChatPanel.d.ts +39 -0
  78. package/lib/esm/components/ChatPanel.d.ts.map +1 -0
  79. package/lib/esm/components/ChatPanel.js +50 -0
  80. package/lib/esm/components/ChatPanel.js.map +1 -0
  81. package/lib/esm/components/ChatPopUp.d.ts +42 -0
  82. package/lib/esm/components/ChatPopUp.d.ts.map +1 -0
  83. package/lib/esm/components/ChatPopUp.js +41 -0
  84. package/lib/esm/components/ChatPopUp.js.map +1 -0
  85. package/lib/esm/components/LoadingDots.d.ts +9 -0
  86. package/lib/esm/components/LoadingDots.d.ts.map +1 -0
  87. package/lib/esm/components/LoadingDots.js +11 -0
  88. package/lib/esm/components/LoadingDots.js.map +1 -0
  89. package/lib/esm/components/Markdown.d.ts +13 -0
  90. package/lib/esm/components/Markdown.d.ts.map +1 -0
  91. package/lib/esm/components/Markdown.js +25 -0
  92. package/lib/esm/components/Markdown.js.map +1 -0
  93. package/lib/esm/components/MessageBubble.d.ts +49 -0
  94. package/lib/esm/components/MessageBubble.d.ts.map +1 -0
  95. package/lib/esm/components/MessageBubble.js +50 -0
  96. package/lib/esm/components/MessageBubble.js.map +1 -0
  97. package/lib/esm/components/index.d.ts +11 -0
  98. package/lib/esm/components/index.d.ts.map +1 -0
  99. package/lib/esm/components/index.js +6 -0
  100. package/lib/esm/components/index.js.map +1 -0
  101. package/lib/esm/hooks/index.d.ts +2 -0
  102. package/lib/esm/hooks/index.d.ts.map +1 -0
  103. package/lib/esm/hooks/index.js +2 -0
  104. package/lib/esm/hooks/index.js.map +1 -0
  105. package/lib/esm/hooks/useComposedCssClasses.d.ts +30 -0
  106. package/lib/esm/hooks/useComposedCssClasses.d.ts.map +1 -0
  107. package/lib/esm/hooks/useComposedCssClasses.js +56 -0
  108. package/lib/esm/hooks/useComposedCssClasses.js.map +1 -0
  109. package/lib/esm/icons/Arrow.d.ts +3 -0
  110. package/lib/esm/icons/Arrow.d.ts.map +1 -0
  111. package/lib/esm/icons/Arrow.js +5 -0
  112. package/lib/esm/icons/Arrow.js.map +1 -0
  113. package/lib/esm/icons/Cross.d.ts +3 -0
  114. package/lib/esm/icons/Cross.d.ts.map +1 -0
  115. package/lib/esm/icons/Cross.js +5 -0
  116. package/lib/esm/icons/Cross.js.map +1 -0
  117. package/lib/esm/icons/DualSync.d.ts +3 -0
  118. package/lib/esm/icons/DualSync.d.ts.map +1 -0
  119. package/lib/esm/icons/DualSync.js +5 -0
  120. package/lib/esm/icons/DualSync.js.map +1 -0
  121. package/lib/esm/icons/Message.d.ts +3 -0
  122. package/lib/esm/icons/Message.d.ts.map +1 -0
  123. package/lib/esm/icons/Message.js +5 -0
  124. package/lib/esm/icons/Message.js.map +1 -0
  125. package/lib/esm/index.d.ts +266 -0
  126. package/lib/esm/index.d.ts.map +1 -0
  127. package/lib/esm/index.js +3 -0
  128. package/lib/esm/index.js.map +1 -0
  129. package/lib/esm/tsdoc-metadata.json +11 -0
  130. package/lib/esm/utils/defaultHandleError.d.ts +9 -0
  131. package/lib/esm/utils/defaultHandleError.d.ts.map +1 -0
  132. package/lib/esm/utils/defaultHandleError.js +11 -0
  133. package/lib/esm/utils/defaultHandleError.js.map +1 -0
  134. package/package.json +95 -0
  135. package/src/components/ChatHeader.tsx +118 -0
  136. package/src/components/ChatInput.tsx +129 -0
  137. package/src/components/ChatPanel.tsx +108 -0
  138. package/src/components/ChatPopUp.tsx +112 -0
  139. package/src/components/LoadingDots.tsx +22 -0
  140. package/src/components/Markdown.tsx +36 -0
  141. package/src/components/MessageBubble.tsx +125 -0
  142. package/src/components/index.ts +17 -0
  143. package/src/hooks/index.ts +1 -0
  144. package/src/hooks/useComposedCssClasses.ts +62 -0
  145. package/src/icons/Arrow.tsx +8 -0
  146. package/src/icons/Cross.tsx +8 -0
  147. package/src/icons/DualSync.tsx +8 -0
  148. package/src/icons/Message.tsx +10 -0
  149. package/src/index.ts +2 -0
  150. package/src/utils/defaultHandleError.ts +10 -0
@@ -0,0 +1,39 @@
1
+ /// <reference types="react" />
2
+ import { MessageBubbleCssClasses, MessageBubbleProps } from "./MessageBubble";
3
+ import { ChatInputCssClasses, ChatInputProps } from "./ChatInput";
4
+ /**
5
+ * The CSS class interface for the {@link ChatPanel} component.
6
+ *
7
+ * @public
8
+ */
9
+ export interface ChatPanelCssClasses {
10
+ container?: string;
11
+ messagesContainer?: string;
12
+ inputContainer?: string;
13
+ inputCssClasses?: ChatInputCssClasses;
14
+ messageBubbleCssClasses?: MessageBubbleCssClasses;
15
+ }
16
+ /**
17
+ * The props for the {@link ChatPanel} component.
18
+ *
19
+ * @public
20
+ */
21
+ export interface ChatPanelProps extends Omit<MessageBubbleProps, "customCssClasses" | "message">, Omit<ChatInputProps, "customCssClasses"> {
22
+ /** A header to render at the top of the panel. */
23
+ header?: JSX.Element;
24
+ /**
25
+ * CSS classes for customizing the component styling.
26
+ */
27
+ customCssClasses?: ChatPanelCssClasses;
28
+ }
29
+ /**
30
+ * A component that renders a full panel for chat bot interactions. This includes
31
+ * the message bubbles for the conversation, input box with send button, and header
32
+ * (if provided).
33
+ *
34
+ * @public
35
+ *
36
+ * @param props - {@link ChatPanelProps}
37
+ */
38
+ export declare function ChatPanel(props: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
39
+ //# sourceMappingURL=ChatPanel.d.ts.map
@@ -0,0 +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;AAK7E;;;;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;AAUD;;;;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,2CAiD9C"}
@@ -0,0 +1,50 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { createElement as _createElement } from "react";
3
+ import { useEffect, useRef } from "react";
4
+ import { useChatState, useChatActions } from "@yext/chat-headless-react";
5
+ import { MessageBubble, } from "./MessageBubble";
6
+ import { ChatInput } from "./ChatInput";
7
+ import { LoadingDots } from "./LoadingDots";
8
+ import { useComposedCssClasses } from "../hooks";
9
+ import { defaultHandleApiError } from "../utils/defaultHandleError";
10
+ const builtInCssClasses = {
11
+ container: "h-full w-full flex flex-col relative rounded-3xl shadow-2xl bg-white",
12
+ messagesContainer: "flex flex-col gap-y-1 mt-auto px-4 pb-[85px] overflow-auto",
13
+ inputContainer: "w-full absolute bottom-0 p-4 rounded-b-3xl backdrop-blur-lg",
14
+ };
15
+ /**
16
+ * A component that renders a full panel for chat bot interactions. This includes
17
+ * the message bubbles for the conversation, input box with send button, and header
18
+ * (if provided).
19
+ *
20
+ * @public
21
+ *
22
+ * @param props - {@link ChatPanelProps}
23
+ */
24
+ export function ChatPanel(props) {
25
+ const { header, customCssClasses } = props;
26
+ const chat = useChatActions();
27
+ const messages = useChatState((state) => state.conversation.messages);
28
+ const loading = useChatState((state) => state.conversation.isLoading);
29
+ const canSendMessage = useChatState((state) => state.conversation.canSendMessage);
30
+ const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
31
+ // Fetch the first message on load, if there are no existing messages or a request being processed
32
+ useEffect(() => {
33
+ if (messages.length !== 0 || !canSendMessage) {
34
+ return;
35
+ }
36
+ const { stream = true, handleError } = props;
37
+ const res = stream ? chat.streamNextMessage() : chat.getNextMessage();
38
+ res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
39
+ }, [chat, props, messages, canSendMessage]);
40
+ const messagesRef = useRef(null);
41
+ // Scroll to the bottom of the chat when the messages change
42
+ useEffect(() => {
43
+ messagesRef.current?.scroll({
44
+ top: messagesRef.current?.scrollHeight,
45
+ behavior: 'smooth',
46
+ });
47
+ }, [messages]);
48
+ return (_jsxs("div", { className: cssClasses.container, children: [header, _jsxs("div", { ref: messagesRef, className: cssClasses.messagesContainer, children: [messages.map((message, index) => (_createElement(MessageBubble, { ...props, customCssClasses: cssClasses.messageBubbleCssClasses, key: index, message: message }))), loading && _jsx(LoadingDots, {})] }), _jsx("div", { className: cssClasses.inputContainer, children: _jsx(ChatInput, { ...props, customCssClasses: cssClasses.inputCssClasses }) })] }));
49
+ }
50
+ //# sourceMappingURL=ChatPanel.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ChatPanel.js","sourceRoot":"","sources":["../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,42 @@
1
+ /// <reference types="react" />
2
+ import { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
3
+ import { ChatHeaderCssClasses, ChatHeaderProps } from "./ChatHeader";
4
+ /**
5
+ * The CSS class interface for the {@link ChatPopUp} component.
6
+ *
7
+ * @public
8
+ */
9
+ export interface ChatPopUpCssClasses {
10
+ container?: string;
11
+ panel?: string;
12
+ panel__display?: string;
13
+ panel__hidden?: string;
14
+ button?: string;
15
+ button__display?: string;
16
+ button__hidden?: string;
17
+ headerCssClasses?: ChatHeaderCssClasses;
18
+ panelCssClasses?: ChatPanelCssClasses;
19
+ }
20
+ /**
21
+ * The props for the {@link ChatPopUp} component.
22
+ *
23
+ * @public
24
+ */
25
+ export interface ChatPopUpProps extends Omit<ChatHeaderProps, "showCloseButton" | "customCssClasses">, Omit<ChatPanelProps, "header" | "customCssClasses"> {
26
+ /** Custom icon for the popup button to open the panel. */
27
+ openPanelButtonIcon?: JSX.Element;
28
+ /**
29
+ * CSS classes for customizing the component styling.
30
+ */
31
+ customCssClasses?: ChatPopUpCssClasses;
32
+ }
33
+ /**
34
+ * A component that renders a popup button that displays and hides
35
+ * a panel for chat bot interactions.
36
+ *
37
+ * @public
38
+ *
39
+ * @param props - {@link ChatPanelProps}
40
+ */
41
+ export declare function ChatPopUp(props: ChatPopUpProps): import("react/jsx-runtime").JSX.Element;
42
+ //# sourceMappingURL=ChatPopUp.d.ts.map
@@ -0,0 +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,EAAc,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIjF;;;;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;AAaD;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAC9B,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,kBAAkB,CAAC,EAC7D,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,kBAAkB,CAAC;IAEnD,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,2CAmD9C"}
@@ -0,0 +1,41 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useCallback, useState } from "react";
3
+ import { MessageIcon } from '../icons/Message';
4
+ import { ChatPanel } from "./ChatPanel";
5
+ import { ChatHeader } from "./ChatHeader";
6
+ import { twMerge } from "tailwind-merge";
7
+ import { useComposedCssClasses } from "../hooks";
8
+ const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 ";
9
+ const builtInCssClasses = {
10
+ container: "transition-all",
11
+ panel: fixedPosition + "w-80 lg:w-96 h-[75vh]",
12
+ panel__display: "duration-300 translate-y-0",
13
+ panel__hidden: "duration-300 translate-y-[20%] opacity-0 invisible",
14
+ button: fixedPosition + "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
+ button__display: "duration-300 transform translate-y-0",
16
+ button__hidden: "duration-300 transform translate-y-[20%] opacity-0 invisible",
17
+ };
18
+ /**
19
+ * A component that renders a popup button that displays and hides
20
+ * a panel for chat bot interactions.
21
+ *
22
+ * @public
23
+ *
24
+ * @param props - {@link ChatPanelProps}
25
+ */
26
+ export function ChatPopUp(props) {
27
+ const { openPanelButtonIcon = _jsx(MessageIcon, {}), customCssClasses, showRestartButton = true, onClose: customOnClose, title } = props;
28
+ const [showChat, setShowChat] = useState(false);
29
+ const onClick = useCallback(() => {
30
+ setShowChat(!showChat);
31
+ }, [showChat]);
32
+ const onClose = useCallback(() => {
33
+ setShowChat(false);
34
+ customOnClose?.();
35
+ }, [customOnClose]);
36
+ const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
37
+ const panelCssClasses = twMerge(cssClasses.panel, showChat ? cssClasses.panel__display : cssClasses.panel__hidden);
38
+ const buttonCssClasses = twMerge(cssClasses.button, showChat ? cssClasses.button__hidden : cssClasses.button__display);
39
+ 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 })] }));
40
+ }
41
+ //# sourceMappingURL=ChatPopUp.js.map
@@ -0,0 +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,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAuC,MAAM,aAAa,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAyC,MAAM,cAAc,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAmBjD,MAAM,aAAa,GAAG,kDAAkD,CAAA;AACxE,MAAM,iBAAiB,GAAwB;IAC7C,SAAS,EAAE,gBAAgB;IAC3B,KAAK,EAAE,aAAa,GAAG,uBAAuB;IAC9C,cAAc,EAAE,4BAA4B;IAC5C,aAAa,EAAE,oDAAoD;IACnE,MAAM,EAAE,aAAa,GAAG,gLAAgL;IACxM,eAAe,EAAE,sCAAsC;IACvD,cAAc,EAAE,8DAA8D;CAC/E,CAAC;AAmBF;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,mBAAmB,GAAG,KAAC,WAAW,KAAG,EACrC,gBAAgB,EAChB,iBAAiB,GAAG,IAAI,EACxB,OAAO,EAAC,aAAa,EACrB,KAAK,EACN,GAAG,KAAK,CAAA;IACT,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,CAAA;IAEnB,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,EAAE,KAAC,UAAU,IACjB,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,IAAI,EACrB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,GAAG,GAC9C,GACF,EACN,+BACa,mBAAmB,EAC9B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,gBAAgB,YAE1B,mBAAmB,GACb,IACL,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,9 @@
1
+ /**
2
+ * A component that signifies loading status.
3
+ *
4
+ * @internal
5
+ */
6
+ export declare function LoadingDots({ className }: {
7
+ className?: string;
8
+ }): import("react/jsx-runtime").JSX.Element;
9
+ //# sourceMappingURL=LoadingDots.d.ts.map
@@ -0,0 +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,2CAchE"}
@@ -0,0 +1,11 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { twMerge } from "tailwind-merge";
3
+ /**
4
+ * A component that signifies loading status.
5
+ *
6
+ * @internal
7
+ */
8
+ export function LoadingDots({ className }) {
9
+ return (_jsxs("div", { "aria-label": "Loading Indicator", className: twMerge("flex gap-1 p-2 animate-fade-in", className), children: [_jsx("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite]" }), _jsx("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.3s]" }), _jsx("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.6s]" })] }));
10
+ }
11
+ //# sourceMappingURL=LoadingDots.js.map
@@ -0,0 +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,CAChB,gCAAgC,EAChC,SAAS,CACV,aAED,cAAK,SAAS,EAAC,gEAAgE,GAAG,EAClF,cAAK,SAAS,EAAC,qEAAqE,GAAG,EACvF,cAAK,SAAS,EAAC,qEAAqE,GAAG,IACnF,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,13 @@
1
+ interface MarkdownProps {
2
+ /** Stringified markdown. */
3
+ content: string;
4
+ }
5
+ /**
6
+ * Renders Github-Flavored Markdown from the Knowledge Graph. This Markdown can include
7
+ * arbitrary HTML. Any HTML will be sanitized according to Rehype's default Schema.
8
+ *
9
+ * @public
10
+ */
11
+ export declare function Markdown({ content }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
12
+ export {};
13
+ //# sourceMappingURL=Markdown.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown.tsx"],"names":[],"mappings":"AAgBA,UAAU,aAAa;IACrB,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,aAAa,2CAQlD"}
@@ -0,0 +1,25 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import ReactMarkdown from "react-markdown";
3
+ import remarkGfm from "remark-gfm";
4
+ import rehypeRaw from "rehype-raw";
5
+ import rehypeSanitize from "rehype-sanitize";
6
+ // The Remark and Rehype plugins to use in conjunction with ReactMarkdown.
7
+ const unifiedPlugins = {
8
+ remark: [
9
+ remarkGfm //renders Github-Flavored Markdown
10
+ ],
11
+ rehype: [
12
+ rehypeRaw,
13
+ rehypeSanitize, //to sanitize HTML content
14
+ ],
15
+ };
16
+ /**
17
+ * Renders Github-Flavored Markdown from the Knowledge Graph. This Markdown can include
18
+ * arbitrary HTML. Any HTML will be sanitized according to Rehype's default Schema.
19
+ *
20
+ * @public
21
+ */
22
+ export function Markdown({ content }) {
23
+ return (_jsx(ReactMarkdown, { children: content, remarkPlugins: unifiedPlugins.remark, rehypePlugins: unifiedPlugins.rehype }));
24
+ }
25
+ //# sourceMappingURL=Markdown.js.map
@@ -0,0 +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,CAAC,kCAAkC;KAC7C;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,49 @@
1
+ import { Message } from "@yext/chat-headless-react";
2
+ /**
3
+ * The CSS class interface for the {@link MessageBubble} component.
4
+ *
5
+ * @public
6
+ */
7
+ export interface MessageBubbleCssClasses {
8
+ topContainer?: string;
9
+ subContainer?: string;
10
+ subContainer__bot?: string;
11
+ subContainer__user?: string;
12
+ message?: string;
13
+ message__bot?: string;
14
+ message__user?: string;
15
+ timestamp?: string;
16
+ timestamp__bot?: string;
17
+ timestamp__user?: string;
18
+ }
19
+ /**
20
+ * The props for the {@link MessageBubble} component.
21
+ *
22
+ * @public
23
+ */
24
+ export interface MessageBubbleProps {
25
+ /** The message to display. */
26
+ message: Message;
27
+ /**
28
+ * Whether to show the timestamp of the message with the message bubble.
29
+ * Defaults to true.
30
+ */
31
+ showTimestamp?: boolean;
32
+ /**
33
+ * A function which is called to format the message's timestamp given in
34
+ * ISO format (e.g. "2023-05-18T19:33:34.553Z").
35
+ * Defaults to "HH:MM:SS A" (e.g. "7:33:34 PM").
36
+ */
37
+ formatTimestamp?: (timestamp: string) => string;
38
+ /** CSS classes for customizing the component styling. */
39
+ customCssClasses?: MessageBubbleCssClasses;
40
+ }
41
+ /**
42
+ * A component that displays the provided message.
43
+ *
44
+ * @public
45
+ *
46
+ * @param props - {@link MessageBubbleProps}
47
+ */
48
+ export declare function MessageBubble({ message, showTimestamp, customCssClasses, formatTimestamp, }: MessageBubbleProps): import("react/jsx-runtime").JSX.Element;
49
+ //# sourceMappingURL=MessageBubble.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAiB,MAAM,2BAA2B,CAAC;AAKnE;;;;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;AAiBD;;;;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"}
@@ -0,0 +1,50 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { MessageSource } from "@yext/chat-headless-react";
3
+ import { useComposedCssClasses } from "../hooks";
4
+ import { twMerge } from "tailwind-merge";
5
+ import { Markdown } from "./Markdown";
6
+ const builtInCssClasses = {
7
+ topContainer: "w-full animate-fade-in @container",
8
+ subContainer: "flex flex-col @lg:flex-row @lg:items-center @lg:gap-x-2 @lg:m-1",
9
+ subContainer__user: "@lg:flex-row-reverse",
10
+ message: "peer rounded-2xl text-[13px] @[480px]:text-base p-4 w-fit max-w-[80%] prose overflow-x-auto",
11
+ message__bot: "text-slate-900 bg-gradient-to-tr from-slate-50 to-slate-100",
12
+ message__user: "ml-auto @lg:ml-0 text-white bg-gradient-to-tr from-blue-600 to-blue-700",
13
+ timestamp: "w-fit my-0.5 text-slate-400 text-[13px] opacity-0 peer-hover:opacity-100 duration-200 whitespace-pre-wrap",
14
+ timestamp__user: "ml-auto",
15
+ };
16
+ /**
17
+ * A component that displays the provided message.
18
+ *
19
+ * @public
20
+ *
21
+ * @param props - {@link MessageBubbleProps}
22
+ */
23
+ export function MessageBubble({ message, showTimestamp = true, customCssClasses, formatTimestamp = defaultFormatTimestamp, }) {
24
+ const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
25
+ const messageCssClasses = twMerge(cssClasses.message, message.source === MessageSource.USER
26
+ ? cssClasses.message__user
27
+ : cssClasses.message__bot);
28
+ const subContainerCssClasses = twMerge(cssClasses.subContainer, message.source === MessageSource.USER
29
+ ? cssClasses.subContainer__user
30
+ : cssClasses.subContainer__bot);
31
+ const timestampCssClasses = twMerge(cssClasses.timestamp, message.source === MessageSource.USER
32
+ ? cssClasses.timestamp__user
33
+ : cssClasses.timestamp__bot);
34
+ 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) : " " }))] }) }));
35
+ }
36
+ /**
37
+ * Formats message's timestamp from "2023-05-18T19:33:34.553Z" to "7:33:34 PM"
38
+ *
39
+ * @param timestamp - the timestamp to convert from
40
+ * @returns formatted timestamp
41
+ */
42
+ function defaultFormatTimestamp(timestamp) {
43
+ return new Date(timestamp).toLocaleString(undefined, {
44
+ hour: "numeric",
45
+ minute: "numeric",
46
+ second: "numeric",
47
+ hour12: true,
48
+ });
49
+ }
50
+ //# sourceMappingURL=MessageBubble.js.map
@@ -0,0 +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;AAoBtC,MAAM,iBAAiB,GAA4B;IACjD,YAAY,EAAE,mCAAmC;IACjD,YAAY,EACV,iEAAiE;IACnE,kBAAkB,EAAE,sBAAsB;IAC1C,OAAO,EACL,6FAA6F;IAC/F,YAAY,EAAE,6DAA6D;IAC3E,aAAa,EACX,yEAAyE;IAC3E,SAAS,EACP,2GAA2G;IAC7G,eAAe,EAAE,SAAS;CAC3B,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,SAAS;QACjB,MAAM,EAAE,IAAI;KACb,CAAC,CAAC;AACL,CAAC"}
@@ -0,0 +1,11 @@
1
+ export { ChatInput } from "./ChatInput";
2
+ export type { ChatInputCssClasses, ChatInputProps } from "./ChatInput";
3
+ export { ChatHeader } from "./ChatHeader";
4
+ export type { ChatHeaderCssClasses, ChatHeaderProps } from "./ChatHeader";
5
+ export { MessageBubble } from "./MessageBubble";
6
+ export type { MessageBubbleCssClasses, MessageBubbleProps, } from "./MessageBubble";
7
+ export { ChatPanel } from "./ChatPanel";
8
+ export type { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
9
+ export { ChatPopUp } from "./ChatPopUp";
10
+ export type { ChatPopUpCssClasses, ChatPopUpProps } from "./ChatPopUp";
11
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
@@ -0,0 +1,6 @@
1
+ export { ChatInput } from "./ChatInput";
2
+ export { ChatHeader } from "./ChatHeader";
3
+ export { MessageBubble } from "./MessageBubble";
4
+ export { ChatPanel } from "./ChatPanel";
5
+ export { ChatPopUp } from "./ChatPopUp";
6
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { useComposedCssClasses } from "./useComposedCssClasses";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { useComposedCssClasses } from "./useComposedCssClasses";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
@@ -0,0 +1,30 @@
1
+ /**
2
+ * useComposedCssClasses merges a component's built-in tailwind classes with custom tailwind classes.
3
+ *
4
+ * @remarks
5
+ * Tailwind classes will be merged without conflict, with custom classes having higher priority
6
+ * than built-in ones.
7
+ *
8
+ * @example
9
+ * Suppose a component has built-in classes of `{ container: 'px-4 text-slate-700' }`.
10
+ *
11
+ * Passing in the custom classes:
12
+ *
13
+ * ```ts
14
+ * { container: 'text-red-200 mb-3' }
15
+ * ```
16
+ *
17
+ * results in the merged classes of:
18
+ *
19
+ * ```ts
20
+ * { container: 'px-4 text-red-200 mb-3' }
21
+ * ```
22
+ *
23
+ * @public
24
+ *
25
+ * @param builtInClasses - The component's built-in tailwind classes
26
+ * @param customClasses - The custom tailwind classes to merge with the built-in ones
27
+ * @returns The composed CSS classes
28
+ */
29
+ export declare function useComposedCssClasses<ClassInterface extends Partial<Record<keyof ClassInterface, string | object>>>(builtInClasses: Readonly<ClassInterface>, customClasses?: Partial<ClassInterface>): ClassInterface;
30
+ //# sourceMappingURL=useComposedCssClasses.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useComposedCssClasses.d.ts","sourceRoot":"","sources":["../../../src/hooks/useComposedCssClasses.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,qBAAqB,CACnC,cAAc,SAAS,OAAO,CAAC,MAAM,CAAC,MAAM,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAE7E,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,EACxC,aAAa,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GACtC,cAAc,CAyBhB"}
@@ -0,0 +1,56 @@
1
+ import { useMemo } from "react";
2
+ import { twMerge } from "tailwind-merge";
3
+ /**
4
+ * useComposedCssClasses merges a component's built-in tailwind classes with custom tailwind classes.
5
+ *
6
+ * @remarks
7
+ * Tailwind classes will be merged without conflict, with custom classes having higher priority
8
+ * than built-in ones.
9
+ *
10
+ * @example
11
+ * Suppose a component has built-in classes of `{ container: 'px-4 text-slate-700' }`.
12
+ *
13
+ * Passing in the custom classes:
14
+ *
15
+ * ```ts
16
+ * { container: 'text-red-200 mb-3' }
17
+ * ```
18
+ *
19
+ * results in the merged classes of:
20
+ *
21
+ * ```ts
22
+ * { container: 'px-4 text-red-200 mb-3' }
23
+ * ```
24
+ *
25
+ * @public
26
+ *
27
+ * @param builtInClasses - The component's built-in tailwind classes
28
+ * @param customClasses - The custom tailwind classes to merge with the built-in ones
29
+ * @returns The composed CSS classes
30
+ */
31
+ export function useComposedCssClasses(builtInClasses, customClasses) {
32
+ return useMemo(() => {
33
+ const mergeCssClasses = (builtInClasses, customClasses) => {
34
+ const mergedCssClasses = { ...builtInClasses };
35
+ if (!customClasses) {
36
+ return mergedCssClasses;
37
+ }
38
+ Object.keys(customClasses).forEach((key) => {
39
+ const builtIn = builtInClasses[key];
40
+ const custom = customClasses[key];
41
+ if (!builtIn || !custom) {
42
+ mergedCssClasses[key] = custom || builtIn;
43
+ }
44
+ else if (typeof builtIn === "object" && typeof custom === "object") {
45
+ mergedCssClasses[key] = mergeCssClasses(builtIn, custom);
46
+ }
47
+ else if (typeof builtIn === "string" && typeof custom === "string") {
48
+ mergedCssClasses[key] = twMerge(builtIn, custom);
49
+ }
50
+ });
51
+ return mergedCssClasses;
52
+ };
53
+ return mergeCssClasses(builtInClasses, customClasses);
54
+ }, [builtInClasses, customClasses]);
55
+ }
56
+ //# sourceMappingURL=useComposedCssClasses.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useComposedCssClasses.js","sourceRoot":"","sources":["../../../src/hooks/useComposedCssClasses.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,qBAAqB,CAGnC,cAAwC,EACxC,aAAuC;IAEvC,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,eAAe,GAAG,CACtB,cAAwC,EACxC,aAAuC,EACvC,EAAE;YACF,MAAM,gBAAgB,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;YAC/C,IAAI,CAAC,aAAa,EAAE;gBAClB,OAAO,gBAAgB,CAAC;aACzB;YACD,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBACzC,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;gBACpC,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;gBAClC,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,EAAE;oBACvB,gBAAgB,CAAC,GAAG,CAAC,GAAG,MAAM,IAAI,OAAO,CAAC;iBAC3C;qBAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;oBACpE,gBAAgB,CAAC,GAAG,CAAC,GAAG,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;iBAC1D;qBAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;oBACpE,gBAAgB,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;iBAClD;YACH,CAAC,CAAC,CAAC;YACH,OAAO,gBAAgB,CAAC;QAC1B,CAAC,CAAC;QACF,OAAO,eAAe,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC;AACtC,CAAC"}
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare function ArrowIcon(): JSX.Element;
3
+ //# sourceMappingURL=Arrow.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Arrow.d.ts","sourceRoot":"","sources":["../../../src/icons/Arrow.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,IAAI,GAAG,CAAC,OAAO,CAOvC"}
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ export function ArrowIcon() {
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
+ }
5
+ //# sourceMappingURL=Arrow.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Arrow.js","sourceRoot":"","sources":["../../../src/icons/Arrow.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,eAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,QAAQ,EAAC,KAAK,EAAC,4BAA4B,aAC9I,eAAM,CAAC,EAAC,UAAU,GAAE,EACpB,eAAM,CAAC,EAAC,4BAA4B,GAAE,IAClC,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare function CrossIcon(): JSX.Element;
3
+ //# sourceMappingURL=Cross.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Cross.d.ts","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,IAAI,GAAG,CAAC,OAAO,CAOvC"}
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ export function CrossIcon() {
3
+ return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M14 14L6 6", strokeLinecap: "square", strokeLinejoin: "round" }), _jsx("path", { d: "M14 6L6 14", strokeLinecap: "square", strokeLinejoin: "round" })] }));
4
+ }
5
+ //# sourceMappingURL=Cross.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Cross.js","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,eAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAC,KAAK,EAAC,4BAA4B,aAC1G,eAAM,CAAC,EAAC,YAAY,EAAC,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,OAAO,GAAE,EACpE,eAAM,CAAC,EAAC,YAAY,EAAC,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,OAAO,GAAE,IAChE,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare function DualSyncIcon(): JSX.Element;
3
+ //# sourceMappingURL=DualSync.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DualSync.d.ts","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,wBAAgB,YAAY,IAAI,GAAG,CAAC,OAAO,CAO1C"}
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ export function DualSyncIcon() {
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
+ }
5
+ //# sourceMappingURL=DualSync.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DualSync.js","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,YAAY;IAC1B,OAAO,CACL,eAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,EAAC,KAAK,EAAC,4BAA4B,aAChI,eAAM,CAAC,EAAC,6XAA6X,GAAE,EACvY,eAAM,CAAC,EAAC,+XAA+X,GAAE,IACnY,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare function MessageIcon(): JSX.Element;
3
+ //# sourceMappingURL=Message.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/icons/Message.tsx"],"names":[],"mappings":";AAAA,wBAAgB,WAAW,IAAI,GAAG,CAAC,OAAO,CASzC"}
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ export function MessageIcon() {
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
+ }
5
+ //# sourceMappingURL=Message.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/icons/Message.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,WAAW;IACzB,OAAO,CACL,eAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,4BAA4B,aACxG,eAAM,CAAC,EAAC,kKAAkK,GAAE,EAC5K,eAAM,CAAC,EAAC,gDAAgD,GAAG,EAC3D,eAAM,CAAC,EAAC,kDAAkD,GAAG,EAC7D,eAAM,CAAC,EAAC,mDAAmD,GAAG,IAC1D,CACP,CAAC;AACJ,CAAC"}