@axos-web-dev/shared-components 1.0.100-dev.4 → 1.0.100-dev.40

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 (262) hide show
  1. package/dist/ATMLocator/ATMLocator.js +9 -2
  2. package/dist/Article/Article.css.d.ts +9 -36
  3. package/dist/Article/Article.css.js +10 -8
  4. package/dist/Article/index.js +3 -2
  5. package/dist/ArticlesSet/ArticlesSet.css.d.ts +10 -70
  6. package/dist/ArticlesSet/ArticlesSet.js +3 -3
  7. package/dist/Auth/ErrorAlert.js +9 -2
  8. package/dist/Avatar/Avatar.module.js +7 -7
  9. package/dist/AwardsBanner/AwardsBanner.css.js +4 -1
  10. package/dist/AwardsItem/AwardsItem.css.js +1 -2
  11. package/dist/Blockquote/Blockquote.module.js +3 -3
  12. package/dist/Button/Button.css.d.ts +3 -3
  13. package/dist/Button/Button.js +9 -2
  14. package/dist/Calculators/ApyCalculator/ApyCalculator.css.d.ts +2 -30
  15. package/dist/Calculators/ApyCalculator/index.js +11 -5
  16. package/dist/Calculators/AxosOneCalculator/BalanceAPYCalculator.css.d.ts +1 -0
  17. package/dist/Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js +3 -1
  18. package/dist/Calculators/AxosOneCalculator/index.d.ts +3 -0
  19. package/dist/Calculators/AxosOneCalculator/index.js +48 -20
  20. package/dist/Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.d.ts +2 -30
  21. package/dist/Calculators/BuyDownCalculator/BuyDownCalculator.css.d.ts +0 -1
  22. package/dist/Calculators/BuyDownCalculator/BuyDownCalculator.css.js +2 -4
  23. package/dist/Calculators/BuyDownCalculator/index.d.ts +4 -1
  24. package/dist/Calculators/BuyDownCalculator/index.js +107 -67
  25. package/dist/Calculators/Calculator.d.ts +3 -0
  26. package/dist/Calculators/Calculator.js +16 -5
  27. package/dist/Calculators/SummitApyCalculator/index.js +15 -6
  28. package/dist/Calculators/calculator.css.d.ts +2 -8
  29. package/dist/CallToActionBar/CallToActionBar.css.d.ts +3 -1
  30. package/dist/CallToActionBar/CallToActionBar.css.js +22 -16
  31. package/dist/CallToActionBar/index.js +4 -3
  32. package/dist/Carousel/Carousel.css.d.ts +8 -19
  33. package/dist/Carousel/index.js +9 -2
  34. package/dist/Chatbot/Bubble.css.d.ts +2 -0
  35. package/dist/Chatbot/Bubble.css.js +8 -0
  36. package/dist/Chatbot/Bubble.d.ts +5 -0
  37. package/dist/Chatbot/Bubble.js +103 -0
  38. package/dist/Chatbot/Chat.d.ts +1 -0
  39. package/dist/Chatbot/Chat.js +165 -0
  40. package/dist/Chatbot/ChatWindow.css.d.ts +18 -0
  41. package/dist/Chatbot/ChatWindow.css.js +39 -0
  42. package/dist/Chatbot/ChatWindow.d.ts +26 -0
  43. package/dist/Chatbot/ChatWindow.js +446 -0
  44. package/dist/Chatbot/Chatbot.css.d.ts +2 -0
  45. package/dist/Chatbot/Chatbot.css.js +6 -0
  46. package/dist/Chatbot/Chatbot.css.ts.vanilla.css.js +1 -0
  47. package/dist/Chatbot/Chatbot.d.ts +10 -0
  48. package/dist/Chatbot/Chatbot.js +221 -0
  49. package/dist/Chatbot/EllipsisAnimation.d.ts +2 -0
  50. package/dist/Chatbot/EllipsisAnimation.js +85 -0
  51. package/dist/Chatbot/EllipsisIcon.d.ts +4 -0
  52. package/dist/Chatbot/EllipsisIcon.js +19 -0
  53. package/dist/Chatbot/authenticate.d.ts +3 -0
  54. package/dist/Chatbot/authenticate.js +16 -0
  55. package/dist/Chatbot/index.d.ts +8 -0
  56. package/dist/Chatbot/index.js +38 -0
  57. package/dist/Chatbot/store/chat.d.ts +10 -0
  58. package/dist/Chatbot/store/chat.js +18 -0
  59. package/dist/Chatbot/store/messages.d.ts +15 -0
  60. package/dist/Chatbot/store/messages.js +13 -0
  61. package/dist/Chatbot/useHeadlessChat.d.ts +27 -0
  62. package/dist/Chatbot/useHeadlessChat.js +240 -0
  63. package/dist/Chevron/Chevron.css.d.ts +2 -2
  64. package/dist/Chevron/index.js +9 -2
  65. package/dist/CollectInformationAlert/index.js +1 -1
  66. package/dist/Comparison/Comparison.js +9 -2
  67. package/dist/Comparison/ComparisonSet.js +33 -24
  68. package/dist/ContentBanner/ContentBanner.css.js +2 -1
  69. package/dist/ExecutiveBio/ExecutiveBio.js +9 -2
  70. package/dist/FaqAccordion/index.js +9 -2
  71. package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +12 -9
  72. package/dist/Forms/ApplyNow.js +9 -2
  73. package/dist/Forms/CommercialDepositsNoLendingOption.d.ts +16 -0
  74. package/dist/Forms/CommercialDepositsNoLendingOption.js +330 -0
  75. package/dist/Forms/ContactUsBusiness.d.ts +1 -1
  76. package/dist/Forms/ContactUsBusiness.js +13 -6
  77. package/dist/Forms/ContactUsBusinessNameEmail.js +9 -2
  78. package/dist/Forms/ContactUsLVF.js +2 -1
  79. package/dist/Forms/ContactUsNMLSId.js +9 -2
  80. package/dist/Forms/CraPublicFile.js +9 -2
  81. package/dist/Forms/EmailOnly.js +91 -64
  82. package/dist/Forms/FormEnums.js +4 -1
  83. package/dist/Forms/Forms.css.d.ts +8 -31
  84. package/dist/Forms/Forms.css.js +50 -44
  85. package/dist/Forms/MortgageRate/MortgageRateForm.js +29 -7
  86. package/dist/Forms/MortgageRate/MortgageRateWatch.js +9 -2
  87. package/dist/Forms/MortgageWarehouseLending.js +9 -2
  88. package/dist/Forms/SuccesForm.js +10 -3
  89. package/dist/Forms/index.d.ts +1 -0
  90. package/dist/Forms/index.js +6 -1
  91. package/dist/HeroBanner/HeroBanner.css.d.ts +5 -17
  92. package/dist/HeroBanner/HeroBanner.css.js +2 -1
  93. package/dist/HeroBanner/HeroBanner.js +2 -13
  94. package/dist/HeroBanner/SelectionBanner.css.d.ts +1 -19
  95. package/dist/HeroBanner/SelectionBanner.css.js +6 -6
  96. package/dist/Hyperlink/Hyperlink.css.d.ts +4 -4
  97. package/dist/Hyperlink/Hyperlink.css.js +4 -1
  98. package/dist/Hyperlink/index.js +9 -2
  99. package/dist/IconBillboard/IconBillboard.css.d.ts +6 -40
  100. package/dist/ImageBillboard/ImageBillboard.css.d.ts +5 -61
  101. package/dist/ImageBillboard/ImageBillboard.css.js +2 -1
  102. package/dist/ImageLink/ImageLink.js +9 -2
  103. package/dist/ImageLink/ImageLinkSet.js +9 -2
  104. package/dist/ImageLink/index.js +9 -2
  105. package/dist/Input/Input.css.d.ts +1 -0
  106. package/dist/Input/Input.css.js +10 -8
  107. package/dist/Input/index.js +2 -1
  108. package/dist/Insight/Featured/CategorySelector.js +9 -2
  109. package/dist/Insight/Featured/Featured.js +9 -2
  110. package/dist/Insight/Featured/Header.js +9 -2
  111. package/dist/Insight/Insight.css.d.ts +18 -0
  112. package/dist/Insight/Insight.css.js +44 -8
  113. package/dist/Insight/index.js +19 -1
  114. package/dist/LandingPageHeader/LandingPageHeader.css.d.ts +2 -0
  115. package/dist/LandingPageHeader/LandingPageHeader.css.js +6 -2
  116. package/dist/LandingPageHeader/LandingPageHeader.js +18 -9
  117. package/dist/LandingPageHeader/index.js +3 -1
  118. package/dist/LoadingIndicator/LoadingIndicator.css.d.ts +4 -4
  119. package/dist/Modal/Modal.css.d.ts +1 -0
  120. package/dist/Modal/Modal.css.js +5 -3
  121. package/dist/Modal/Modal.js +12 -5
  122. package/dist/NavigationMenu/AxosALTS/NavData.js +9 -2
  123. package/dist/NavigationMenu/AxosALTS/index.js +9 -2
  124. package/dist/NavigationMenu/AxosAdvisor/NavBar.css.d.ts +2 -0
  125. package/dist/NavigationMenu/AxosAdvisor/NavBar.css.js +7 -2
  126. package/dist/NavigationMenu/AxosAdvisor/NavBar.module.js +52 -52
  127. package/dist/NavigationMenu/AxosAdvisor/index.js +39 -21
  128. package/dist/NavigationMenu/AxosAdvisorServices/NavBar.css.d.ts +2 -0
  129. package/dist/NavigationMenu/AxosAdvisorServices/NavBar.css.js +7 -2
  130. package/dist/NavigationMenu/AxosAdvisorServices/NavBar.module.js +53 -53
  131. package/dist/NavigationMenu/AxosAdvisorServices/SubNavbar.css.d.ts +1 -1
  132. package/dist/NavigationMenu/AxosAdvisorServices/SubNavbar.css.js +2 -2
  133. package/dist/NavigationMenu/AxosAdvisorServices/index.js +14 -8
  134. package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.js +2 -2
  135. package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.module.js +16 -16
  136. package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.d.ts +5 -8
  137. package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.js +18 -14
  138. package/dist/NavigationMenu/AxosBank/NavBar.css.js +2 -1
  139. package/dist/NavigationMenu/AxosBank/NavBar.module.js +41 -41
  140. package/dist/NavigationMenu/AxosBank/NavData.js +9 -2
  141. package/dist/NavigationMenu/AxosBank/SubNavBar.js +281 -296
  142. package/dist/NavigationMenu/AxosBank/SubNavbar.css.d.ts +2 -0
  143. package/dist/NavigationMenu/AxosBank/SubNavbar.css.js +4 -0
  144. package/dist/NavigationMenu/AxosBank/index.js +9 -2
  145. package/dist/NavigationMenu/AxosClearing/NavBar.module.js +37 -37
  146. package/dist/NavigationMenu/AxosFiduciary/NavBar.module.js +41 -41
  147. package/dist/NavigationMenu/LaVictoire/NavData.js +9 -2
  148. package/dist/NavigationMenu/LaVictoire/index.js +9 -2
  149. package/dist/NavigationMenu/NavDataJson.js +9 -2
  150. package/dist/NavigationMenu/Navbar.js +9 -2
  151. package/dist/NavigationMenu/SignInNavButton.js +9 -2
  152. package/dist/PageNavItem/PageNavItem.css.d.ts +4 -22
  153. package/dist/Pagination/Pagination.js +6 -6
  154. package/dist/SetContainer/SetContainer.js +9 -2
  155. package/dist/SocialMediaBar/iconsRepository.js +9 -2
  156. package/dist/StepItem/StepItem.css.d.ts +8 -36
  157. package/dist/StepItemSet/StepItemSet.css.d.ts +5 -32
  158. package/dist/StepItemSet/StepItemSet.css.js +9 -5
  159. package/dist/StepItemSet/StepItemSet.d.ts +6 -0
  160. package/dist/StepItemSet/StepItemSet.js +22 -3
  161. package/dist/StepItemSet/index.js +2 -1
  162. package/dist/Table/Table.css.d.ts +7 -7
  163. package/dist/Table/Table.css.js +5 -5
  164. package/dist/Table/Table.d.ts +1 -1
  165. package/dist/Table/Table.js +1 -1
  166. package/dist/VideoTile/VideoTile.js +9 -2
  167. package/dist/VideoWrapper/index.js +9 -2
  168. package/dist/WalnutIframe/wrapper.module.js +3 -3
  169. package/dist/assets/Accordion/Accordion.css +4 -4
  170. package/dist/assets/Article/Article.css +87 -86
  171. package/dist/assets/ArticlesSet/ArticlesSet.css +26 -56
  172. package/dist/assets/Auth/SignIn.css +12 -12
  173. package/dist/assets/Avatar/Avatar.css.css +10 -10
  174. package/dist/assets/AwardsBanner/AwardsBanner.css +1 -1
  175. package/dist/assets/AwardsItem/AwardsItem.css +3 -4
  176. package/dist/assets/Blockquote/Blockquote.css.css +21 -17
  177. package/dist/assets/Button/Button.css +28 -28
  178. package/dist/assets/Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css +8 -8
  179. package/dist/assets/Calculators/ApyCalculator/ApyCalculator.css +12 -21
  180. package/dist/assets/Calculators/AxosOneCalculator/BalanceAPYCalculator.css +32 -12
  181. package/dist/assets/Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css +22 -34
  182. package/dist/assets/Calculators/BuyDownCalculator/BuyDownCalculator.css +15 -21
  183. package/dist/assets/Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css +9 -9
  184. package/dist/assets/Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css +10 -10
  185. package/dist/assets/Calculators/SummitApyCalculator/BalanceAPYCalculator.css +18 -10
  186. package/dist/assets/Calculators/calculator.css +9 -15
  187. package/dist/assets/CallToActionBar/CallToActionBar.css +95 -69
  188. package/dist/assets/Carousel/Carousel.css +27 -41
  189. package/dist/assets/Chatbot/Bubble.css +51 -0
  190. package/dist/assets/Chatbot/ChatWindow.css +213 -0
  191. package/dist/assets/Chevron/Chevron.css +11 -10
  192. package/dist/assets/CollectInformationAlert/CollectInformationAlert.css +4 -3
  193. package/dist/assets/Comparison/Comparison.css +8 -5
  194. package/dist/assets/ContentBanner/ContentBanner.css +14 -8
  195. package/dist/assets/DownloadTile/DownloadTile.css +6 -6
  196. package/dist/assets/ExecutiveBio/ExecutiveBio.css +27 -27
  197. package/dist/assets/FaqAccordion/FaqAccordion.css +5 -5
  198. package/dist/assets/FooterDisclosure/FooterDisclosure.css +1 -1
  199. package/dist/assets/FooterSiteMap/AxosBank/FooterSiteMap.css +3 -8
  200. package/dist/assets/Forms/Forms.css +176 -165
  201. package/dist/assets/Forms/QuickPricer/UserInformation.css +1 -1
  202. package/dist/assets/HeroBanner/HeroBanner.css +85 -76
  203. package/dist/assets/HeroBanner/LargeBanner.css +15 -15
  204. package/dist/assets/HeroBanner/SelectionBanner.css +15 -29
  205. package/dist/assets/Hyperlink/Hyperlink.css +4 -4
  206. package/dist/assets/IconBillboard/IconBillboard.css +32 -48
  207. package/dist/assets/ImageBillboard/ImageBillboard.css +59 -64
  208. package/dist/assets/Input/Input.css +54 -47
  209. package/dist/assets/Inputs/Input.css +4 -4
  210. package/dist/assets/Insight/Featured/CategorySelector.css +1 -1
  211. package/dist/assets/Insight/Insight.css +212 -43
  212. package/dist/assets/Interstitial/Interstitial-variants.css +3 -3
  213. package/dist/assets/LandingPageHeader/LandingPageHeader.css +37 -4
  214. package/dist/assets/LoadingIndicator/LoadingIndicator.css +5 -5
  215. package/dist/assets/Modal/Modal.css +17 -28
  216. package/dist/assets/NavigationMenu/AxosALTS/NavBar.css +1 -1
  217. package/dist/assets/NavigationMenu/AxosAdvisor/NavBar.css +25 -2
  218. package/dist/assets/NavigationMenu/AxosAdvisor/NavBar.css.css +138 -126
  219. package/dist/assets/NavigationMenu/AxosAdvisor/SubNavbar.css +5 -4
  220. package/dist/assets/NavigationMenu/AxosAdvisorServices/NavBar.css +25 -2
  221. package/dist/assets/NavigationMenu/AxosAdvisorServices/NavBar.css.css +142 -130
  222. package/dist/assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css +22 -4
  223. package/dist/assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css +32 -31
  224. package/dist/assets/NavigationMenu/AxosBank/NavBar.css +21 -9
  225. package/dist/assets/NavigationMenu/AxosBank/NavBar.css.css +118 -146
  226. package/dist/assets/NavigationMenu/AxosBank/SubNavbar.css +35 -1
  227. package/dist/assets/NavigationMenu/AxosClearing/NavBar.css.css +133 -107
  228. package/dist/assets/NavigationMenu/AxosFiduciary/NavBar.css.css +84 -83
  229. package/dist/assets/PageNavItem/PageNavItem.css +16 -33
  230. package/dist/assets/Pagination/Pagination.css +1 -1
  231. package/dist/assets/SetContainer/SetContainer.css +5 -5
  232. package/dist/assets/StepItem/StepItem.css +26 -42
  233. package/dist/assets/StepItemSet/StepItemSet.css +40 -36
  234. package/dist/assets/Tab/Tab.css +12 -12
  235. package/dist/assets/Table/Table.css +90 -97
  236. package/dist/assets/TextBlock/TextBlock.css +1 -1
  237. package/dist/assets/TopicalNavItem/TopicalNavItem.css +3 -3
  238. package/dist/assets/TopicalNavSet/TopicalNavSet.css +1 -1
  239. package/dist/assets/VideoTile/VideoTile.css +1 -1
  240. package/dist/assets/WalnutIframe/wrapper.css.css +48 -49
  241. package/dist/assets/globals.css +11 -8
  242. package/dist/assets/icons/ArrowIcon/ArrowIcon.css +3 -3
  243. package/dist/assets/icons/DownloadIcon/DownloadIcon.css +1 -1
  244. package/dist/assets/icons/FollowIcon/FollowIcon.css +1 -1
  245. package/dist/assets/themes/axos.css +32 -32
  246. package/dist/assets/themes/premier.css +31 -31
  247. package/dist/assets/themes/victorie.css +23 -23
  248. package/dist/icons/CheckCircle.js +1 -1
  249. package/dist/icons/CheckCircleLight.js +1 -1
  250. package/dist/icons/CheckIcon/index.js +1 -1
  251. package/dist/icons/Clock/index.js +6 -6
  252. package/dist/icons/Logos/SPB.d.ts +4 -0
  253. package/dist/icons/Logos/SPB.js +132 -0
  254. package/dist/icons/QuoteIconGrey.js +2 -2
  255. package/dist/icons/index.d.ts +1 -0
  256. package/dist/icons/index.js +2 -0
  257. package/dist/main.d.ts +1 -0
  258. package/dist/main.js +85 -20
  259. package/dist/themes/axos.css.d.ts +12 -12
  260. package/dist/themes/axos.css.js +1 -1
  261. package/dist/utils/allowedAxosDomains.js +2 -1
  262. package/package.json +136 -133
@@ -0,0 +1,446 @@
1
+ "use client";
2
+ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
3
+ import clsx from "clsx";
4
+ import React, { useRef, useEffect, Fragment as Fragment$1 } from "react";
5
+ import ReactMarkdown from "react-markdown";
6
+ import { useNetworkState, useMount } from "react-use";
7
+ import remarkGfm from "remark-gfm";
8
+ import { windowBarStyle, chat_title, chatbotMenuItem, chatbotMenu, chatFinishDialog, endChatButtonStyle, button_reset, arrowFill, chatNetworkStatus, notificationStyle, messageStyle, inline_button_wrapper, inline_button, messagesContainerStyle, inputStyle, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
9
+ import EllipsisLoader from "./EllipsisAnimation.js";
10
+ import { EllipsisIcon } from "./EllipsisIcon.js";
11
+ import { useOpenChat } from "./store/chat.js";
12
+ const ChatWindow = ({
13
+ messages,
14
+ status = "connected",
15
+ onSend,
16
+ inputDisabled = false,
17
+ onClose,
18
+ endChat = () => {
19
+ console.log("End chat");
20
+ },
21
+ showReconnect = false,
22
+ virtualAgent,
23
+ showAvatar = false
24
+ }) => {
25
+ const [mounted, setMounted] = React.useState(false);
26
+ const [menuOpen, setMenuOpen] = React.useState(false);
27
+ const [showEndChatDialog, setShowEndChatDialog] = React.useState(false);
28
+ const state = useNetworkState();
29
+ const [input, setInput] = React.useState("");
30
+ const messagesEndRef = useRef(null);
31
+ const isOpen = useOpenChat((state2) => state2.isOpen);
32
+ useEffect(() => {
33
+ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
34
+ }, [messages]);
35
+ const handleSend = (e) => {
36
+ e.preventDefault();
37
+ if (input.trim()) {
38
+ onSend(input);
39
+ setInput("");
40
+ }
41
+ };
42
+ useMount(() => {
43
+ setMounted(true);
44
+ });
45
+ const project = process.env.CCAI_PROJECT_ID;
46
+ const isAxos = project === "axos";
47
+ const endUserBg = isAxos ? "#14263d" : "#323339";
48
+ const chatbotBg = isAxos ? "#E9F8FF" : "#EAE8E8";
49
+ const escalationDeflected = messages?.filter(
50
+ (item) => item.type == "noti" && item.event == "escalationDeflected"
51
+ ).length > 0;
52
+ return /* @__PURE__ */ jsxs("div", { className: clsx(windowStyle, isOpen && windowOpenStyle), children: [
53
+ /* @__PURE__ */ jsxs("div", { className: windowBarStyle, children: [
54
+ /* @__PURE__ */ jsxs("div", { className: "flex middle", style: { paddingBlock: "6px" }, children: [
55
+ /* @__PURE__ */ jsx(
56
+ "img",
57
+ {
58
+ src: "https://www.axos.com/images/2xmVfQm5l0HWOKjgxQO1Iw/axb-assistant.svg",
59
+ style: { marginRight: 12 },
60
+ height: 18,
61
+ width: 18
62
+ }
63
+ ),
64
+ /* @__PURE__ */ jsx("h2", { className: chat_title, children: "Evo Virtual Assistant" })
65
+ ] }),
66
+ /* @__PURE__ */ jsx(
67
+ "button",
68
+ {
69
+ onClick: () => {
70
+ setMenuOpen(!menuOpen);
71
+ },
72
+ style: {
73
+ border: "none",
74
+ background: "transparent",
75
+ marginLeft: "auto",
76
+ cursor: "pointer",
77
+ padding: 0,
78
+ display: "flex",
79
+ alignContent: "center"
80
+ },
81
+ children: /* @__PURE__ */ jsx(EllipsisIcon, { color: "#fff" })
82
+ }
83
+ ),
84
+ menuOpen && /* @__PURE__ */ jsx("ul", { className: clsx(chatbotMenu), children: /* @__PURE__ */ jsx("li", { className: chatbotMenuItem, children: /* @__PURE__ */ jsx(
85
+ "button",
86
+ {
87
+ type: "button",
88
+ onClick: () => {
89
+ setShowEndChatDialog(true);
90
+ setMenuOpen(false);
91
+ },
92
+ style: { width: "100%" },
93
+ children: "Finish chat"
94
+ }
95
+ ) }) }),
96
+ showEndChatDialog && /* @__PURE__ */ jsxs(Fragment, { children: [
97
+ /* @__PURE__ */ jsx(
98
+ "div",
99
+ {
100
+ style: {
101
+ background: "#00000080",
102
+ position: "fixed",
103
+ top: 0,
104
+ left: 0,
105
+ right: 0,
106
+ bottom: 0,
107
+ zIndex: 999,
108
+ opacity: 0.75
109
+ }
110
+ }
111
+ ),
112
+ /* @__PURE__ */ jsx(
113
+ "dialog",
114
+ {
115
+ open: showEndChatDialog,
116
+ style: {
117
+ padding: "1rem",
118
+ borderRadius: 8,
119
+ background: "#fff",
120
+ color: "#000",
121
+ border: `1px solid ${endUserBg}`,
122
+ outline: "none",
123
+ maxWidth: "90%",
124
+ top: "25%",
125
+ marginInline: "auto",
126
+ zIndex: 1e3
127
+ },
128
+ children: /* @__PURE__ */ jsxs("form", { method: "dialog", className: chatFinishDialog, children: [
129
+ /* @__PURE__ */ jsx("p", { children: "Are you sure you want to end this chat?" }),
130
+ /* @__PURE__ */ jsxs(
131
+ "div",
132
+ {
133
+ style: { display: "flex", gap: "1rem", marginTop: "1rem" },
134
+ children: [
135
+ /* @__PURE__ */ jsx(
136
+ "button",
137
+ {
138
+ className: endChatButtonStyle,
139
+ type: "submit",
140
+ onClick: () => {
141
+ endChat();
142
+ setShowEndChatDialog(false);
143
+ },
144
+ children: "Yes"
145
+ }
146
+ ),
147
+ /* @__PURE__ */ jsx(
148
+ "button",
149
+ {
150
+ className: endChatButtonStyle,
151
+ type: "button",
152
+ onClick: () => {
153
+ setShowEndChatDialog(false);
154
+ },
155
+ children: "No"
156
+ }
157
+ )
158
+ ]
159
+ }
160
+ )
161
+ ] })
162
+ }
163
+ )
164
+ ] }),
165
+ onClose && /* @__PURE__ */ jsx(
166
+ "button",
167
+ {
168
+ onClick: onClose,
169
+ className: button_reset,
170
+ "aria-label": "Close chat",
171
+ title: "Close",
172
+ children: /* @__PURE__ */ jsx(
173
+ "svg",
174
+ {
175
+ xmlns: "http://www.w3.org/2000/svg",
176
+ width: "24",
177
+ height: "24",
178
+ viewBox: "0 0 24 24",
179
+ fill: "none",
180
+ children: /* @__PURE__ */ jsx(
181
+ "path",
182
+ {
183
+ className: arrowFill,
184
+ d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
185
+ fill: "#98DDFF"
186
+ }
187
+ )
188
+ }
189
+ )
190
+ }
191
+ )
192
+ ] }),
193
+ mounted && !state.online ? /* @__PURE__ */ jsx("div", { className: clsx(chatNetworkStatus), children: /* @__PURE__ */ jsxs(
194
+ "div",
195
+ {
196
+ style: {
197
+ color: "#d32f2f",
198
+ textAlign: "center",
199
+ padding: "8px 0",
200
+ fontWeight: 500
201
+ },
202
+ children: [
203
+ /* @__PURE__ */ jsx(
204
+ "span",
205
+ {
206
+ role: "img",
207
+ "aria-label": "disconnected",
208
+ style: { marginRight: 6 },
209
+ children: "⚠️"
210
+ }
211
+ ),
212
+ "You are currently disconnected. Please check your connection."
213
+ ]
214
+ }
215
+ ) }) : null,
216
+ /* @__PURE__ */ jsxs("div", { className: clsx(messagesContainerStyle), children: [
217
+ (status === "idle" || messages.length == 0) && /* @__PURE__ */ jsx(
218
+ "div",
219
+ {
220
+ className: clsx(),
221
+ style: {
222
+ textAlign: "left",
223
+ alignSelf: "flex-start",
224
+ background: "#eee",
225
+ color: "#1e3860",
226
+ borderRadius: 16,
227
+ padding: "8px 8px",
228
+ maxWidth: "80%",
229
+ marginBottom: 2
230
+ },
231
+ children: /* @__PURE__ */ jsx(
232
+ "div",
233
+ {
234
+ style: {
235
+ fontSize: 13,
236
+ display: "flex",
237
+ flexDirection: "column",
238
+ gap: 4
239
+ },
240
+ children: /* @__PURE__ */ jsx(EllipsisLoader, {})
241
+ }
242
+ )
243
+ }
244
+ ),
245
+ messages?.map((msg) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
246
+ msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationStarted" && /* @__PURE__ */ jsx("div", { className: notificationStyle, children: "We are connecting you with a human agent..." }, msg.$index),
247
+ msg.type == "noti" && msg.$userType == "system" && msg.event == "memberLeft" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
248
+ /* @__PURE__ */ jsx("strong", { children: "Virtual Agent" }),
249
+ " just left the conversation."
250
+ ] }, msg.$index),
251
+ msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationAccepted" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
252
+ "You are now connected with a",
253
+ " ",
254
+ msg.to_agent ? /* @__PURE__ */ jsx("strong", { children: msg?.to_agent?.name }) : "an agent"
255
+ ] }, msg.$index),
256
+ msg.type == "noti" && msg.$userType == "virtual_agent" && msg.event == "escalationDeflected" && /* @__PURE__ */ jsxs(Fragment, { children: [
257
+ /* @__PURE__ */ jsxs(
258
+ "div",
259
+ {
260
+ className: notificationStyle,
261
+ style: { fontSize: 12 },
262
+ children: [
263
+ "Our chat team is available weekdays, 8am-5pm, except federal bank holidays. For immediate assistance you can reach out to us at ",
264
+ /* @__PURE__ */ jsx("a", { href: "tel:1-888-502-2967", children: "1-888-502-2967" }),
265
+ "."
266
+ ]
267
+ },
268
+ msg.$index
269
+ ),
270
+ /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: endChat, children: "End Chat" }) })
271
+ ] }),
272
+ ["text", "markdown_template", "markdown"].includes(msg.type) && /* @__PURE__ */ jsxs(
273
+ "div",
274
+ {
275
+ className: messageStyle,
276
+ style: {
277
+ textAlign: msg.$userType == "end_user" ? "right" : "left",
278
+ alignSelf: msg.$userType == "end_user" ? "flex-end" : "flex-start",
279
+ background: msg.$userType == "end_user" ? endUserBg : chatbotBg,
280
+ color: msg.$userType == "end_user" ? "#fff" : "#1F1F1F",
281
+ boxShadow: msg.$userType == "end_user" ? "0 1px 4px #b3e0ff55" : void 0
282
+ },
283
+ children: [
284
+ /* @__PURE__ */ jsxs(
285
+ "div",
286
+ {
287
+ style: {
288
+ fontSize: 13,
289
+ display: "flex",
290
+ flexDirection: "column",
291
+ gap: 4
292
+ },
293
+ children: [
294
+ msg.$userType == "virtual_agent" && /* @__PURE__ */ jsxs(
295
+ "div",
296
+ {
297
+ style: {
298
+ display: "flex",
299
+ // justifyContent: "center",
300
+ alignItems: "center",
301
+ gap: "8px"
302
+ },
303
+ children: [
304
+ showAvatar && /* @__PURE__ */ jsx(
305
+ "img",
306
+ {
307
+ width: 24,
308
+ height: 24,
309
+ src: virtualAgent?.avatar_url,
310
+ alt: "agent avatar"
311
+ }
312
+ ),
313
+ /* @__PURE__ */ jsx("strong", { children: virtualAgent?.name })
314
+ ]
315
+ }
316
+ ),
317
+ /* @__PURE__ */ jsx(
318
+ ReactMarkdown,
319
+ {
320
+ remarkPlugins: [[remarkGfm, { singleTilde: false }]],
321
+ components: {
322
+ p: ({ ...props }) => /* @__PURE__ */ jsx(
323
+ "p",
324
+ {
325
+ style: { margin: 0, fontSize: "inherit" },
326
+ title: new Date(msg.$timestamp).toLocaleString(),
327
+ ...props
328
+ }
329
+ )
330
+ },
331
+ children: msg.content
332
+ }
333
+ )
334
+ ]
335
+ }
336
+ ),
337
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 10, color: "#888", marginTop: 2 } })
338
+ ]
339
+ },
340
+ msg.$index
341
+ ),
342
+ msg.type == "inline_button" && Array.isArray(msg.buttons) && msg.buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: inline_button_wrapper, children: msg.buttons.length !== 0 && Array.isArray(msg.buttons) && msg.buttons.map((button, index) => {
343
+ const lastItem = msg.buttons && msg.buttons?.length - 1;
344
+ return /* @__PURE__ */ jsx(
345
+ "button",
346
+ {
347
+ className: inline_button,
348
+ style: {
349
+ borderRadius: "0px",
350
+ borderTopLeftRadius: [0].includes(index) ? 8 : 0,
351
+ borderTopRightRadius: [0].includes(index) ? 8 : 0,
352
+ borderBottomLeftRadius: [lastItem].includes(index) ? 8 : 0,
353
+ borderBottomRightRadius: [lastItem].includes(index) ? 8 : 0
354
+ },
355
+ onClick: () => {
356
+ onSend(button?.title);
357
+ },
358
+ children: button.title
359
+ },
360
+ index
361
+ );
362
+ }) }),
363
+ msg.event == "chatEnded" && /* @__PURE__ */ jsxs(Fragment, { children: [
364
+ /* @__PURE__ */ jsxs(
365
+ "div",
366
+ {
367
+ title: (/* @__PURE__ */ new Date()).toLocaleString(),
368
+ style: {
369
+ fontSize: 12,
370
+ color: "#888",
371
+ marginBottom: 4,
372
+ textAlign: "center"
373
+ },
374
+ children: [
375
+ "Thank you for chatting!",
376
+ /* @__PURE__ */ jsx("br", {}),
377
+ " This conversation has ended."
378
+ ]
379
+ }
380
+ ),
381
+ /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: endChat, children: "End Chat" }) })
382
+ ] })
383
+ ] }, msg.$index)),
384
+ showReconnect && /* @__PURE__ */ jsx(
385
+ "button",
386
+ {
387
+ style: { margin: "12px auto", display: "block" },
388
+ onClick: () => {
389
+ },
390
+ children: "Reconnect Chat"
391
+ }
392
+ ),
393
+ /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
394
+ ] }),
395
+ /* @__PURE__ */ jsxs(
396
+ "form",
397
+ {
398
+ onSubmit: handleSend,
399
+ style: {
400
+ borderTop: "1px solid #eee",
401
+ display: "flex",
402
+ gap: 8
403
+ },
404
+ children: [
405
+ /* @__PURE__ */ jsx(
406
+ "input",
407
+ {
408
+ type: "text",
409
+ value: input,
410
+ onChange: (e) => setInput(e.target.value),
411
+ placeholder: "Ask something...",
412
+ className: inputStyle,
413
+ autoFocus: true,
414
+ disabled: inputDisabled || status !== "connected" || escalationDeflected
415
+ }
416
+ ),
417
+ /* @__PURE__ */ jsx(
418
+ "button",
419
+ {
420
+ className: clsx(sendButtonStyle, input.trim().length > 0 && "active"),
421
+ type: "submit",
422
+ title: "Send message",
423
+ disabled: inputDisabled || status !== "connected" || !input.trim(),
424
+ children: /* @__PURE__ */ jsxs(
425
+ "svg",
426
+ {
427
+ xmlns: "http://www.w3.org/2000/svg",
428
+ id: "send-icon",
429
+ width: 24,
430
+ height: 24,
431
+ children: [
432
+ /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }),
433
+ /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0z", fill: "none" })
434
+ ]
435
+ }
436
+ )
437
+ }
438
+ )
439
+ ]
440
+ }
441
+ )
442
+ ] });
443
+ };
444
+ export {
445
+ ChatWindow
446
+ };
@@ -0,0 +1,2 @@
1
+ export declare const chatbotAXB: string;
2
+ export declare const chatbotUFB: string;
@@ -0,0 +1,6 @@
1
+ var chatbotAXB = "_1hpv6vm0";
2
+ var chatbotUFB = "_1hpv6vm1";
3
+ export {
4
+ chatbotAXB,
5
+ chatbotUFB
6
+ };
@@ -0,0 +1,10 @@
1
+ export type ChatbotProps = {
2
+ project?: "axos" | "ufb";
3
+ debug?: boolean;
4
+ };
5
+ export declare const Chatbot: ({ project, projectEnv, menuOption, }: {
6
+ project?: "axos" | "ufb";
7
+ projectEnv?: "dev" | "qa" | "uat" | "stg" | "prod";
8
+ menuOption?: "Support Virtual Agent" | string;
9
+ debug?: boolean;
10
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,221 @@
1
+ "use client";
2
+ import { jsxs, jsx } from "react/jsx-runtime";
3
+ import { authenticate } from "./authenticate.js";
4
+ import { Bubble } from "./Bubble.js";
5
+ import { chatbotUFB, chatbotAXB } from "./Chatbot.css.js";
6
+ import { ChatWindow } from "./ChatWindow.js";
7
+ import { useOpenChat } from "./store/chat.js";
8
+ import { useMessages } from "./store/messages.js";
9
+ import { Logger, consoleLoggerHandler, Client } from "@ujet/websdk-headless";
10
+ import { useRef, useState } from "react";
11
+ import { useMount, useUnmount } from "react-use";
12
+ const Chatbot = ({
13
+ project = "axos",
14
+ projectEnv = "dev",
15
+ menuOption = "Support Virtual Agent"
16
+ }) => {
17
+ const { hasOpenedOnce, toggle, reset } = useOpenChat();
18
+ const { addMessage, addMessages, clearMessages, messages } = useMessages();
19
+ const clientRef = useRef(null);
20
+ const menuRef = useRef(null);
21
+ const isMountedRef = useRef(false);
22
+ const hasLoadedBefore = useRef(true);
23
+ const chatRef = useRef(null);
24
+ const agent_virtual = useRef(null);
25
+ const [status, setStatus] = useState("idle");
26
+ const [hasStarted, setHasStarted] = useState(false);
27
+ const brandMap = /* @__PURE__ */ new Map([
28
+ ["axos", 1],
29
+ ["ufb", 3]
30
+ ]);
31
+ const custom_data = {
32
+ unsigned: {
33
+ facingBrandId: {
34
+ label: "facingBrandId",
35
+ value: `${brandMap.get(project) || 1}`
36
+ },
37
+ channel: {
38
+ label: "channel",
39
+ value: "in_web"
40
+ },
41
+ user_auth: {
42
+ label: "user_auth",
43
+ value: "false"
44
+ },
45
+ env: {
46
+ label: "env",
47
+ value: projectEnv === "dev" ? "uat" : projectEnv
48
+ }
49
+ }
50
+ };
51
+ if (projectEnv !== "prod") {
52
+ Logger.addHandler(consoleLoggerHandler);
53
+ }
54
+ const onReadyHandler = async () => {
55
+ console.log("Chat client is ready");
56
+ };
57
+ const onAuthenticatedHandler = async () => {
58
+ console.log("Chat client is authenticated");
59
+ };
60
+ const onChatOngoingHandler = async (chat) => {
61
+ console.log("Ongoing chat:", chat);
62
+ };
63
+ const onChatMessageHandler = async (message) => {
64
+ console.log("Received message:", message);
65
+ addMessage(message);
66
+ };
67
+ const onChatTypingStartedHandler = async (identity) => {
68
+ console.log("Typing started by:", identity);
69
+ };
70
+ const onChatDisconnectedHandler = async () => {
71
+ console.log("Chat disconnected");
72
+ setStatus("idle");
73
+ };
74
+ const onDismissedHandler = async () => {
75
+ console.log("Chat dismissed");
76
+ };
77
+ const onTimeoutHandler = async () => {
78
+ console.log("Chat timeout");
79
+ };
80
+ const onEndedHandler = async () => {
81
+ console.log("Chat ended");
82
+ setStatus("finished");
83
+ };
84
+ const onDestroyedHandler = async () => {
85
+ console.log("Chat destroyed");
86
+ };
87
+ const onChatMemberLeftHandler = async (identity) => {
88
+ console.log("Chat member left:", identity);
89
+ };
90
+ const onChatConnectedHandler = async () => {
91
+ setStatus("connected");
92
+ console.log("connected");
93
+ const messages2 = await clientRef.current?.fetchMessages();
94
+ if (messages2) {
95
+ addMessages(messages2);
96
+ }
97
+ };
98
+ const registerEventHandlers = () => {
99
+ clientRef.current?.on("ready", onReadyHandler);
100
+ clientRef.current?.on("authenticated", onAuthenticatedHandler);
101
+ clientRef.current?.on("chat.ongoing", onChatOngoingHandler);
102
+ clientRef.current?.on("chat.message", onChatMessageHandler);
103
+ clientRef.current?.on("chat.typingStarted", onChatTypingStartedHandler);
104
+ clientRef.current?.on("chat.disconnected", onChatDisconnectedHandler);
105
+ clientRef.current?.on("chat.dismissed", onDismissedHandler);
106
+ clientRef.current?.on("chat.timeout", onTimeoutHandler);
107
+ clientRef.current?.on("chat.ended", onEndedHandler);
108
+ clientRef.current?.on("chat.destroyed", onDestroyedHandler);
109
+ clientRef.current?.on("chat.memberLeft", onChatMemberLeftHandler);
110
+ clientRef?.current?.on("chat.connected", onChatConnectedHandler);
111
+ };
112
+ const deregisterEventHandlers = () => {
113
+ clientRef.current?.off("ready", onReadyHandler);
114
+ clientRef.current?.off("authenticated", onAuthenticatedHandler);
115
+ clientRef.current?.off("chat.ongoing", onDismissedHandler);
116
+ clientRef.current?.off("chat.message", onChatMessageHandler);
117
+ clientRef.current?.off("chat.typingStarted", onChatTypingStartedHandler);
118
+ clientRef.current?.off("chat.disconnected", onChatDisconnectedHandler);
119
+ clientRef.current?.off("chat.dismissed", onDismissedHandler);
120
+ clientRef.current?.off("chat.timeout", onTimeoutHandler);
121
+ clientRef.current?.off("chat.ended", onEndedHandler);
122
+ clientRef.current?.off("chat.destroyed", onDestroyedHandler);
123
+ clientRef.current?.off("chat.memberLeft", onChatMemberLeftHandler);
124
+ clientRef.current?.off("chat.connected", onChatConnectedHandler);
125
+ };
126
+ const createClient = async () => {
127
+ if (clientRef.current) return;
128
+ const client = new Client({
129
+ companyId: process.env.CCAI_COMPANY_ID || "",
130
+ tenant: process.env.CCAI_TENANT_NAME || "",
131
+ host: process.env.CCAI_HOST || "",
132
+ // or your region
133
+ authenticate
134
+ });
135
+ isMountedRef.current = true;
136
+ clientRef.current = client;
137
+ menuRef.current = await client.getMenus();
138
+ console.log("menus:", menuRef.current);
139
+ registerEventHandlers();
140
+ return;
141
+ };
142
+ const startChat = async () => {
143
+ console.log("Starting chat");
144
+ const client = clientRef.current;
145
+ if (!client) return;
146
+ try {
147
+ const ongoingChat = await client.loadOngoingChat();
148
+ if (ongoingChat) {
149
+ console.log("Ongoing chat found:", ongoingChat);
150
+ console.log("Resuming chat:", ongoingChat.id);
151
+ chatRef.current = await client.resumeChat(ongoingChat.id);
152
+ agent_virtual.current = ongoingChat.agent;
153
+ return;
154
+ }
155
+ const foundMenu = menuRef.current.menus.find(
156
+ (menu) => menu.name === menuOption
157
+ );
158
+ const menuId = foundMenu && foundMenu.id;
159
+ console.log("Creating new chat with menu ID:", menuId);
160
+ const newChat = await client.createChat(menuId, { custom_data });
161
+ if (newChat !== null) {
162
+ chatRef.current = newChat;
163
+ console.log("Chat created id:", newChat.id);
164
+ }
165
+ } catch (err) {
166
+ console.error("Error creating chat:", err);
167
+ }
168
+ };
169
+ const handleClick = async () => {
170
+ toggle();
171
+ if (hasStarted) return;
172
+ if (!hasOpenedOnce) {
173
+ await startChat();
174
+ setHasStarted(true);
175
+ }
176
+ };
177
+ const onSendMessage = (msg) => {
178
+ console.log("Sending message:", msg);
179
+ clientRef.current?.sendTextMessage(msg);
180
+ };
181
+ const onEndChat = async () => {
182
+ console.log("Ending chat");
183
+ if (chatRef.current) {
184
+ await clientRef.current?.finishChat();
185
+ await chatRef.current.destroy();
186
+ clearMessages();
187
+ chatRef.current = null;
188
+ console.log("Chat ended");
189
+ setHasStarted(false);
190
+ reset();
191
+ }
192
+ };
193
+ useMount(async () => {
194
+ console.log("Chatbot mounted");
195
+ if (isMountedRef.current) return;
196
+ isMountedRef.current = true;
197
+ await createClient();
198
+ });
199
+ useUnmount(() => {
200
+ console.log("Chatbot unmounted");
201
+ deregisterEventHandlers();
202
+ isMountedRef.current = false;
203
+ hasLoadedBefore.current = true;
204
+ });
205
+ return /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
206
+ /* @__PURE__ */ jsx(Bubble, { onClick: handleClick }),
207
+ /* @__PURE__ */ jsx(
208
+ ChatWindow,
209
+ {
210
+ status,
211
+ virtualAgent: agent_virtual.current,
212
+ messages,
213
+ onSend: onSendMessage,
214
+ endChat: onEndChat
215
+ }
216
+ )
217
+ ] });
218
+ };
219
+ export {
220
+ Chatbot
221
+ };
@@ -0,0 +1,2 @@
1
+ declare const EllipsisLoader: () => import("react/jsx-runtime").JSX.Element;
2
+ export default EllipsisLoader;