@axos-web-dev/shared-components 2.0.0-dev.2-bwaTest → 2.0.0-dev.20

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 (121) hide show
  1. package/dist/ATMLocator/ATMLocator.js +4 -4
  2. package/dist/Accordion/Accordion.js +3 -3
  3. package/dist/AlertBanner/index.js +1 -1
  4. package/dist/Article/Article.js +1 -1
  5. package/dist/Auth/ErrorAlert.js +4 -4
  6. package/dist/Button/Button.js +4 -4
  7. package/dist/Calculators/AnnualFeeCalculator/index.js +1 -1
  8. package/dist/Calculators/ApyCalculator/index.js +1 -1
  9. package/dist/Calculators/BuyDownCalculator/index.js +1 -1
  10. package/dist/Calculators/Calculator.js +4 -4
  11. package/dist/Calculators/MarginTradingCalculator/index.js +5 -5
  12. package/dist/Calculators/MarineLoanMonthlyPaymentCalculator/index.js +1 -1
  13. package/dist/Calculators/MaxLoanCalculator/index.js +1 -1
  14. package/dist/Calculators/MonthlyPaymentCalculator/index.js +1 -1
  15. package/dist/Calculators/MonthlyPaymentLVFCalculator/index.js +1 -1
  16. package/dist/Carousel/index.js +5 -5
  17. package/dist/Chatbot/AnimatedGradientBorder.css.d.ts +4 -0
  18. package/dist/Chatbot/AnimatedGradientBorder.css.js +11 -3
  19. package/dist/Chatbot/Bubble.css.js +2 -1
  20. package/dist/Chatbot/Bubble.d.ts +1 -0
  21. package/dist/Chatbot/Bubble.js +2 -2
  22. package/dist/Chatbot/Chat.js +17 -7
  23. package/dist/Chatbot/ChatWindow.css.d.ts +4 -0
  24. package/dist/Chatbot/ChatWindow.css.js +39 -31
  25. package/dist/Chatbot/ChatWindow.js +31 -19
  26. package/dist/Chatbot/Chatbot.d.ts +10 -2
  27. package/dist/Chatbot/Chatbot.js +85 -52
  28. package/dist/Chatbot/ChatbotMessage.d.ts +1 -0
  29. package/dist/Chatbot/ChatbotMessage.js +47 -4
  30. package/dist/Chatbot/index.js +5 -1
  31. package/dist/Chatbot/useHeadlessChat.js +1 -2
  32. package/dist/Chevron/index.js +4 -4
  33. package/dist/Comparison/Comparison.js +4 -4
  34. package/dist/ContentBanner/index.js +1 -1
  35. package/dist/ExecutiveBio/ExecutiveBio.js +5 -5
  36. package/dist/ExecutiveBio/ExecutiveBioSet.js +1 -1
  37. package/dist/FaqAccordion/index.js +5 -5
  38. package/dist/FooterDisclosure/FooterDisclosure.js +1 -1
  39. package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +22 -4
  40. package/dist/Forms/ApplyNow.js +4 -4
  41. package/dist/Forms/BoatMooringLocation.d.ts +6 -1
  42. package/dist/Forms/BoatMooringLocation.js +145 -8
  43. package/dist/Forms/ContactUsBusiness.js +4 -4
  44. package/dist/Forms/ContactUsBusinessNameEmail.js +4 -4
  45. package/dist/Forms/ContactUsNMLSId.js +4 -4
  46. package/dist/Forms/CpraRequest.js +4 -4
  47. package/dist/Forms/CraPublicFile.js +4 -4
  48. package/dist/Forms/EmailOnly.js +4 -4
  49. package/dist/Forms/FormEnums.js +2 -2
  50. package/dist/Forms/MortgageRate/MortgageRateForm.js +5 -5
  51. package/dist/Forms/MortgageRate/MortgageRateWatch.js +4 -4
  52. package/dist/Forms/MortgageWarehouseLending.js +4 -4
  53. package/dist/Forms/SuccesForm.js +4 -4
  54. package/dist/HeroBanner/HeroBanner.css.d.ts +1 -0
  55. package/dist/HeroBanner/HeroBanner.css.js +19 -16
  56. package/dist/HeroBanner/HeroBanner.d.ts +1 -1
  57. package/dist/HeroBanner/HeroBanner.interface.d.ts +4 -1
  58. package/dist/HeroBanner/HeroBanner.js +26 -160
  59. package/dist/HeroBanner/HeroVideoPoster.d.ts +5 -0
  60. package/dist/HeroBanner/HeroVideoPoster.js +24 -0
  61. package/dist/HeroBanner/LargeBanner.css.d.ts +110 -0
  62. package/dist/HeroBanner/LargeBanner.css.js +22 -8
  63. package/dist/HeroBanner/LargeHeroBanner.d.ts +5 -0
  64. package/dist/HeroBanner/LargeHeroBanner.js +228 -0
  65. package/dist/HeroBanner/index.js +3 -2
  66. package/dist/Hyperlink/index.js +4 -4
  67. package/dist/IconBillboard/IconBillboardSet.js +1 -1
  68. package/dist/ImageBillboard/ImageBillboard.js +1 -1
  69. package/dist/ImageLink/ImageLink.js +3 -3
  70. package/dist/ImageLink/ImageLinkSet.js +3 -3
  71. package/dist/ImageLink/index.js +4 -4
  72. package/dist/Input/Checkbox.js +2 -2
  73. package/dist/Input/DownPaymentInput.js +1 -1
  74. package/dist/Input/Dropdown.js +1 -1
  75. package/dist/Input/Input.js +1 -1
  76. package/dist/Input/InputTextArea.js +1 -1
  77. package/dist/Insight/Featured/CategorySelector.js +4 -4
  78. package/dist/Insight/Featured/Featured.js +6 -6
  79. package/dist/Insight/Featured/Header.js +4 -4
  80. package/dist/LandingPageHeader/LandingPageHeader.js +1 -1
  81. package/dist/Modal/Modal.js +4 -4
  82. package/dist/Modal/contextApi/store.js +1 -1
  83. package/dist/NavigationMenu/AxosALTS/index.js +4 -4
  84. package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.js +4 -4
  85. package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.module.js +27 -27
  86. package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.d.ts +11 -8
  87. package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.js +20 -19
  88. package/dist/NavigationMenu/AxosBank/NavBar.module.js +39 -39
  89. package/dist/NavigationMenu/AxosBank/SubNavBar.js +41 -36
  90. package/dist/NavigationMenu/AxosBank/index.js +31 -21
  91. package/dist/NavigationMenu/LaVictoire/index.js +4 -4
  92. package/dist/NavigationMenu/Navbar.js +4 -4
  93. package/dist/NavigationMenu/SignInNavButton.js +4 -4
  94. package/dist/PageNavItem/PageNavItem.js +1 -1
  95. package/dist/SetContainer/SetContainer.js +4 -4
  96. package/dist/SocialMediaBar/iconsRepository.js +4 -4
  97. package/dist/StepItem/StepItem.js +1 -1
  98. package/dist/StepItemSet/StepItemSet.js +1 -1
  99. package/dist/Table/Table.js +1 -1
  100. package/dist/Topic/Topic.js +1 -1
  101. package/dist/VideoTile/VideoTile.js +4 -4
  102. package/dist/VideoWrapper/index.js +4 -4
  103. package/dist/assets/Chatbot/AnimatedGradientBorder.css +99 -12
  104. package/dist/assets/Chatbot/Bubble.css +19 -6
  105. package/dist/assets/Chatbot/ChatWindow.css +99 -63
  106. package/dist/assets/ExecutiveBio/ExecutiveBio.css +0 -2
  107. package/dist/assets/HeroBanner/HeroBanner.css +82 -65
  108. package/dist/assets/HeroBanner/LargeBanner.css +126 -59
  109. package/dist/assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css +49 -49
  110. package/dist/assets/NavigationMenu/AxosBank/NavBar.css +88 -88
  111. package/dist/assets/globals.css +9 -9
  112. package/dist/assets/notification.mp3.js +4 -0
  113. package/dist/assets/themes/axos.css +1 -1
  114. package/dist/assets/themes/ufb.css +1 -1
  115. package/dist/main.js +8 -3
  116. package/dist/utils/getPosition.d.ts +1 -0
  117. package/dist/utils/getPosition.js +17 -0
  118. package/dist/utils/variant.types.d.ts +1 -0
  119. package/package.json +2 -2
  120. package/dist/Chatbot/authenticate.d.ts +0 -3
  121. package/dist/Chatbot/authenticate.js +0 -16
@@ -4,37 +4,41 @@ import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css'
4
4
  /* empty css */
5
5
  /* empty css */
6
6
  /* empty css */
7
- var windowStyle = "_13n1jqk0";
8
- var windowOpenStyle = "_13n1jqk1";
9
- var windowBarStyle = "_13n1jqk2";
10
- var left_bar_section = "_13n1jqk3";
11
- var chat_title = "_13n1jqk4";
12
- var buttonss_section = "_13n1jqk5";
13
- var button_bar = "_13n1jqk6";
14
- var button_reset = "_13n1jqk7";
15
- var arrowFill = "_13n1jqk8";
16
- var inputStyle = "_13n1jqk9";
17
- var autoResize = "_13n1jqka";
18
- var sendButtonStyle = "_13n1jqkb";
19
- var messagesContainerStyle = "_13n1jqkc";
20
- var notificationStyle = "_13n1jqkd";
21
- var messageStyle = "_13n1jqke";
22
- var inline_button_wrapper = "_13n1jqkf";
23
- var inline_button = "_13n1jqkg";
24
- var endChatButtonStyle = "_13n1jqkh";
25
- var noAnswerButton = "_13n1jqki";
26
- var chatbotMenu = "_13n1jqkj";
27
- var chatbotMenuItem = "_13n1jqkk";
28
- var chatNetworkStatus = "_13n1jqkl";
29
- var chatEndDialogOverlay = "_13n1jqkm";
30
- var chatFinishDialog = "_13n1jqkn";
31
- var thankyou_overlay = "_13n1jqko";
32
- var thankyou_message = "_13n1jqkp";
33
- var thankyou_image = "_13n1jqkq";
34
- var chatEndCircle = "_13n1jqkr";
35
- var user_msg = "_13n1jqks";
36
- var agent_msg = "_13n1jqkt";
37
- var shimmerText = "_13n1jqkv";
7
+ var windowStyle = "_13n1jqk1";
8
+ var windowOpenStyle = "_13n1jqk2";
9
+ var windowBarStyle = "_13n1jqk3";
10
+ var left_bar_section = "_13n1jqk4";
11
+ var chat_title = "_13n1jqk5";
12
+ var buttonss_section = "_13n1jqk6";
13
+ var button_bar = "_13n1jqk7";
14
+ var button_reset = "_13n1jqk8";
15
+ var arrowFill = "_13n1jqk9";
16
+ var inputStyle = "_13n1jqka";
17
+ var autoResize = "_13n1jqkb";
18
+ var sendButtonStyle = "_13n1jqkc";
19
+ var messagesContainerStyle = "_13n1jqkd";
20
+ var notificationStyle = "_13n1jqke";
21
+ var messageStyle = "_13n1jqkf";
22
+ var inline_button_wrapper = "_13n1jqkg";
23
+ var inline_button = "_13n1jqkh";
24
+ var endChatButtonStyle = "_13n1jqki";
25
+ var noAnswerButton = "_13n1jqkj";
26
+ var chatbotMenu = "_13n1jqkk";
27
+ var chatbotMenuItem = "_13n1jqkl";
28
+ var chatNetworkStatus = "_13n1jqkm";
29
+ var chatEndDialogOverlay = "_13n1jqkn";
30
+ var chatFinishDialog = "_13n1jqko";
31
+ var thankyou_overlay = "_13n1jqkp";
32
+ var thankyou_message = "_13n1jqkq";
33
+ var thankyou_image = "_13n1jqkr";
34
+ var chatEndCircle = "_13n1jqks";
35
+ var user_msg = "_13n1jqkt";
36
+ var agent_msg = "_13n1jqku";
37
+ var shimmerText = "_13n1jqkw";
38
+ var tableMsg = "_13n1jqkx";
39
+ var tableHead = "_13n1jqky";
40
+ var tableCell = "_13n1jqkz";
41
+ var trMortgageTable = "_13n1jqk10";
38
42
  export {
39
43
  agent_msg,
40
44
  arrowFill,
@@ -60,9 +64,13 @@ export {
60
64
  notificationStyle,
61
65
  sendButtonStyle,
62
66
  shimmerText,
67
+ tableCell,
68
+ tableHead,
69
+ tableMsg,
63
70
  thankyou_image,
64
71
  thankyou_message,
65
72
  thankyou_overlay,
73
+ trMortgageTable,
66
74
  user_msg,
67
75
  windowBarStyle,
68
76
  windowOpenStyle,
@@ -43,7 +43,8 @@ const ChatWindow = ({
43
43
  toggleThankyouMessage,
44
44
  hasEscalated,
45
45
  isBlockedInput,
46
- isOpen
46
+ isOpen,
47
+ hasOpenedOnce
47
48
  } = useOpenChat();
48
49
  const [mounted, setMounted] = React.useState(false);
49
50
  const [menuOpen, setMenuOpen] = React.useState(false);
@@ -96,6 +97,11 @@ const ChatWindow = ({
96
97
  setInput("");
97
98
  toggleThankyouMessage?.();
98
99
  };
100
+ useEffect(() => {
101
+ if (inputRef.current) {
102
+ inputRef.current.focus();
103
+ }
104
+ }, [messages]);
99
105
  return /* @__PURE__ */ jsxs("div", { className: clsx(windowStyle, isOpen && windowOpenStyle), children: [
100
106
  /* @__PURE__ */ jsxs("div", { className: windowBarStyle, children: [
101
107
  /* @__PURE__ */ jsx("div", { className: clsx(left_bar_section) }),
@@ -393,7 +399,7 @@ const ChatWindow = ({
393
399
  }
394
400
  ) }) : null,
395
401
  /* @__PURE__ */ jsxs("div", { className: clsx(messagesContainerStyle), children: [
396
- (status === "idle" || messages.length == 0) && /* @__PURE__ */ jsx(
402
+ (status === "idle" && messages.length == 0 || messages.length == 0) && /* @__PURE__ */ jsx(
397
403
  "div",
398
404
  {
399
405
  className: clsx(),
@@ -415,27 +421,33 @@ const ChatWindow = ({
415
421
  flexDirection: "column",
416
422
  gap: 4
417
423
  },
418
- children: /* @__PURE__ */ jsx("p", { className: shimmerText, children: "AI thinking..." })
424
+ children: /* @__PURE__ */ jsx("p", { className: shimmerText, children: "Chat connecting..." })
419
425
  }
420
426
  )
421
427
  }
422
428
  ),
423
- messages?.map((msg) => /* @__PURE__ */ jsx(
424
- ChatbotMessage,
425
- {
426
- msg,
427
- onSend,
428
- showAvatar,
429
- showName,
430
- virtualAgent,
431
- onCancelEndChat,
432
- onEndChat: () => {
433
- endChat();
434
- onCloseAfterThankYou();
435
- }
436
- },
437
- msg?.$index
438
- )),
429
+ messages?.map((msg) => {
430
+ if (!hasOpenedOnce) {
431
+ return null;
432
+ }
433
+ return /* @__PURE__ */ jsx(
434
+ ChatbotMessage,
435
+ {
436
+ msg,
437
+ onSend,
438
+ showAvatar,
439
+ showName,
440
+ virtualAgent,
441
+ onCancelEndChat,
442
+ onEndChat: () => {
443
+ endChat();
444
+ onCloseAfterThankYou();
445
+ },
446
+ inputRef
447
+ },
448
+ msg?.$index
449
+ );
450
+ }),
439
451
  showReconnect && /* @__PURE__ */ jsx(
440
452
  "button",
441
453
  {
@@ -2,9 +2,17 @@ export type ChatbotProps = {
2
2
  project?: "axos" | "ufb";
3
3
  debug?: boolean;
4
4
  };
5
- export declare const Chatbot: ({ project, projectEnv, menuOption, debug, }: {
6
- project?: "axos" | "ufb";
5
+ type InitalizeChatbot = {
6
+ companyId: string;
7
+ tenantName: string;
8
+ host: string;
9
+ authUrl: string;
10
+ };
11
+ export declare const Chatbot: ({ project, projectEnv, menuOption, config, }: {
12
+ project?: "axos" | "ufb" | "Axos" | "Ufb";
7
13
  projectEnv?: "dev" | "qa" | "uat" | "stg" | "prod";
8
14
  menuOption?: "Support Virtual Agent" | string;
9
15
  debug?: boolean;
16
+ config: InitalizeChatbot;
10
17
  }) => false | import("react/jsx-runtime").JSX.Element;
18
+ export {};
@@ -1,18 +1,28 @@
1
1
  "use client";
2
2
  import { jsxs, jsx } from "react/jsx-runtime";
3
- import { authenticate } from "./authenticate.js";
3
+ import { useRef, useState, useEffect } from "react";
4
+ import { useMount, useUnmount } from "react-use";
5
+ import notificationSound from "../assets/notification.mp3.js";
4
6
  import { Bubble } from "./Bubble.js";
5
- import { chatbotUFB, chatbotAXB } from "./Chatbot.css.js";
7
+ import { chatbotAXB, chatbotUFB } from "./Chatbot.css.js";
6
8
  import { ChatWindow } from "./ChatWindow.js";
7
9
  import { useOpenChat } from "./store/chat.js";
8
10
  import { useMessages } from "./store/messages.js";
9
- import { useRef, useState, useEffect } from "react";
10
- import { useMount, useUnmount } from "react-use";
11
+ if (typeof window !== "undefined") {
12
+ const OriginalAudio = window.Audio;
13
+ class PatchedAudio extends OriginalAudio {
14
+ constructor(src) {
15
+ const newSrc = src === "https://websdk.ujet.co/v3/ping.mp3" ? notificationSound : src;
16
+ super(newSrc);
17
+ }
18
+ }
19
+ window.Audio = PatchedAudio;
20
+ }
11
21
  const Chatbot = ({
12
22
  project = "axos",
13
23
  projectEnv = "dev",
14
24
  menuOption = "Support Virtual Agent",
15
- debug = false
25
+ config
16
26
  }) => {
17
27
  const {
18
28
  hasOpenedOnce,
@@ -28,13 +38,11 @@ const Chatbot = ({
28
38
  const clientRef = useRef(null);
29
39
  const menuRef = useRef(null);
30
40
  const isMountedRef = useRef(false);
31
- const hasLoadedBefore = useRef(true);
32
41
  const chatRef = useRef(null);
33
42
  const agent_virtual = useRef(null);
34
43
  const [status, setStatus] = useState("idle");
35
44
  const [hasStarted, setHasStarted] = useState(false);
36
45
  const [menusLoaded, setMenusLoaded] = useState(false);
37
- const [pendingStart, setPendingStart] = useState(false);
38
46
  const [isTyping, setIsTyping] = useState(false);
39
47
  const [scalationStarted, setScalationStarted] = useState(false);
40
48
  useEffect(() => {
@@ -89,6 +97,9 @@ const Chatbot = ({
89
97
  menuRef.current = await clientRef.current.getMenus();
90
98
  setMenusLoaded(true);
91
99
  console.log("menus:", menuRef.current);
100
+ if (menuRef.current !== null) {
101
+ await startChat();
102
+ }
92
103
  }
93
104
  };
94
105
  const onAuthenticatedHandler = async () => {
@@ -219,20 +230,24 @@ const Chatbot = ({
219
230
  clientRef.current?.off("chat.connected", onChatConnectedHandler);
220
231
  };
221
232
  const createClient = async () => {
222
- const { Client, Logger, consoleLoggerHandler } = await import("@ujet/websdk-headless");
223
- if (projectEnv !== "prod" || debug) {
224
- Logger.addHandler(consoleLoggerHandler);
225
- }
233
+ const { Client } = await import("@ujet/websdk-headless");
226
234
  if (clientRef.current) return;
227
235
  const client = new Client({
228
- companyId: process.env.CCAI_COMPANY_ID || "",
229
- tenant: process.env.CCAI_TENANT_NAME || "",
230
- host: process.env.CCAI_HOST || "",
231
- // or your region
232
- // companyId: import.meta.env.VITE_COMPANY_ID || "",
233
- // tenant: import.meta.env.VITE_TENANT_NAME || "",
234
- // host: import.meta.env.VITE_HOST || "", // or your region
235
- authenticate
236
+ companyId: config.companyId,
237
+ tenant: config.tenantName,
238
+ host: config.host,
239
+ authenticate: async () => {
240
+ const res = await fetch(config.authUrl, {
241
+ method: "GET",
242
+ headers: {
243
+ "Content-Type": "application/json"
244
+ }
245
+ });
246
+ const data = await res.json();
247
+ return {
248
+ token: data.token
249
+ };
250
+ }
236
251
  });
237
252
  client?.on("ready", onReadyHandler);
238
253
  client?.on("authenticated", onAuthenticatedHandler);
@@ -242,9 +257,10 @@ const Chatbot = ({
242
257
  return;
243
258
  };
244
259
  const startChat = async () => {
245
- console.log("Starting chat");
260
+ console.log("Starting chat", chatRef.current);
246
261
  const client = clientRef.current;
247
262
  if (!client) return;
263
+ if (hasStarted) return;
248
264
  if (!menuRef.current || !menuRef.current.menus) {
249
265
  let waited = 0;
250
266
  while ((!menuRef.current || !menuRef.current.menus) && waited < 5e3) {
@@ -257,19 +273,26 @@ const Chatbot = ({
257
273
  }
258
274
  }
259
275
  try {
276
+ console.log("menus: ->", menuRef.current);
260
277
  const ongoingChat = await client.loadOngoingChat();
278
+ console.log("theres a ongoing chat?: -->", ongoingChat);
261
279
  if (ongoingChat) {
262
280
  console.log("Ongoing chat found:", ongoingChat);
263
281
  console.log("Resuming chat:", ongoingChat.id);
264
- chatRef.current = await client.resumeChat(ongoingChat.id);
282
+ chatRef.current = ongoingChat;
265
283
  agent_virtual.current = ongoingChat.agent;
266
284
  return;
267
285
  }
286
+ console.log("not ongoing chat ");
287
+ console.log(!!ongoingChat);
268
288
  const foundMenu = menuRef.current.menus.find(
269
289
  (menu) => menu.name === menuOption
270
290
  );
271
291
  const menuId = foundMenu && foundMenu.id;
272
292
  console.log("Creating new chat with menu ID:", menuId);
293
+ if (!foundMenu) {
294
+ throw new Error("Menu not found: " + menuOption);
295
+ }
273
296
  const newChat = await client.createChat(menuId, { custom_data });
274
297
  if (newChat !== null) {
275
298
  chatRef.current = newChat;
@@ -278,15 +301,23 @@ const Chatbot = ({
278
301
  }
279
302
  } catch (err) {
280
303
  console.error("Error creating chat:", err);
304
+ } finally {
305
+ setHasStarted(true);
306
+ if (clientRef?.current?.chat?.state?.status == "va_assigned") {
307
+ const OriginalAudio = window.Audio;
308
+ class PatchedAudio extends OriginalAudio {
309
+ constructor(src) {
310
+ const newSrc = src === "https://websdk.ujet.co/v3/ping.mp3" ? notificationSound : src;
311
+ super(newSrc);
312
+ }
313
+ }
314
+ window.Audio = PatchedAudio;
315
+ }
281
316
  }
282
317
  };
283
318
  const handleClick = async () => {
284
319
  toggle();
285
320
  if (hasStarted) return;
286
- if (!menusLoaded) {
287
- setPendingStart(true);
288
- return;
289
- }
290
321
  if (!hasOpenedOnce) {
291
322
  await startChat();
292
323
  setHasStarted(true);
@@ -327,17 +358,9 @@ const Chatbot = ({
327
358
  isMountedRef.current = true;
328
359
  await createClient();
329
360
  });
330
- useEffect(() => {
331
- if (menusLoaded && pendingStart && !hasStarted) {
332
- startChat();
333
- setPendingStart(false);
334
- }
335
- }, [menusLoaded, pendingStart, hasStarted]);
336
361
  useUnmount(() => {
337
362
  console.log("Chatbot unmounted");
338
363
  deregisterEventHandlers();
339
- isMountedRef.current = false;
340
- hasLoadedBefore.current = true;
341
364
  reset();
342
365
  setHasStarted(false);
343
366
  setStatus("idle");
@@ -350,9 +373,13 @@ const Chatbot = ({
350
373
  const onClose = () => {
351
374
  toggle();
352
375
  };
353
- const onCloseAfterThankYou = () => {
376
+ const newChatSession = async () => {
377
+ console.log("create new session");
378
+ };
379
+ const onCloseAfterThankYou = async () => {
354
380
  reset();
355
381
  setHasStarted(false);
382
+ newChatSession();
356
383
  };
357
384
  const onPreviewTyping = async (msg) => {
358
385
  console.log("Preview typing message:", msg);
@@ -365,24 +392,30 @@ const Chatbot = ({
365
392
  console.error("Error sending preview message:", error);
366
393
  }
367
394
  };
368
- return menusLoaded && /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
369
- /* @__PURE__ */ jsx(Bubble, { onClick: handleClick }),
370
- /* @__PURE__ */ jsx(
371
- ChatWindow,
372
- {
373
- status,
374
- virtualAgent: agent_virtual.current,
375
- messages,
376
- onSend: onSendMessage,
377
- endChat: onEndChat,
378
- onClose,
379
- onNewChat: onEndAndStartNewChat,
380
- onCloseAfterThankYou,
381
- previewTyping: onPreviewTyping,
382
- isTyping
383
- }
384
- )
385
- ] });
395
+ return menusLoaded && /* @__PURE__ */ jsxs(
396
+ "div",
397
+ {
398
+ className: ["axos", "Axos"].includes(project) ? chatbotAXB : chatbotUFB,
399
+ children: [
400
+ /* @__PURE__ */ jsx(Bubble, { onClick: handleClick, project }),
401
+ /* @__PURE__ */ jsx(
402
+ ChatWindow,
403
+ {
404
+ status,
405
+ virtualAgent: agent_virtual.current,
406
+ messages,
407
+ onSend: onSendMessage,
408
+ endChat: onEndChat,
409
+ onClose,
410
+ onNewChat: onEndAndStartNewChat,
411
+ onCloseAfterThankYou,
412
+ previewTyping: onPreviewTyping,
413
+ isTyping
414
+ }
415
+ )
416
+ ]
417
+ }
418
+ );
386
419
  };
387
420
  export {
388
421
  Chatbot
@@ -12,6 +12,7 @@ interface ChatbotMessageProps {
12
12
  onCancelEndChat?: () => void;
13
13
  onSend?: (content: string) => void;
14
14
  onEndChat?: () => void;
15
+ inputRef: React.RefObject<HTMLTextAreaElement | null>;
15
16
  }
16
17
  export declare const ChatbotMessage: FC<ChatbotMessageProps>;
17
18
  export {};
@@ -9,7 +9,7 @@ import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import
9
9
  /* empty css */
10
10
  /* empty css */
11
11
  import clsx from "clsx";
12
- import { shimmerText, notificationStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button, endChatButtonStyle } from "./ChatWindow.css.js";
12
+ import { shimmerText, notificationStyle, trMortgageTable, tableCell, tableHead, tableMsg, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button, endChatButtonStyle } from "./ChatWindow.css.js";
13
13
  import { useOpenChat } from "./store/chat.js";
14
14
  function timeAgo(date) {
15
15
  const seconds = Math.floor(((/* @__PURE__ */ new Date()).getTime() - date.getTime()) / 1e3);
@@ -19,13 +19,39 @@ function timeAgo(date) {
19
19
  minute: "2-digit"
20
20
  });
21
21
  }
22
+ function convertBulletsToTable(text) {
23
+ const lines = text.split("\n");
24
+ const header = lines[0];
25
+ const bulletLines = lines.filter((line) => line.trim().startsWith("•"));
26
+ if (bulletLines.length === 0) return text;
27
+ const fields = bulletLines.map((line) => {
28
+ const [field] = line.split(":");
29
+ const cleanField = field.replace(/•\s*\*\*|\*\*/g, "").trim();
30
+ return cleanField;
31
+ });
32
+ const values = bulletLines.map((line) => {
33
+ const [, value] = line.split(":");
34
+ return value.trim();
35
+ });
36
+ const headerRow = `| ${fields.join(" | ")} |`;
37
+ const separatorRow = `| ${fields.map(() => "-------").join(" | ")} |`;
38
+ const valueRow = `| ${values.join(" | ")} |`;
39
+ return `
40
+ ### ${header}
41
+
42
+ ${headerRow}
43
+ ${separatorRow}
44
+ ${valueRow}
45
+ `;
46
+ }
22
47
  const ChatbotMessage = ({
23
48
  msg,
24
49
  showAvatar,
25
50
  showName,
26
51
  virtualAgent,
27
52
  onEndChat,
28
- onSend
53
+ onSend,
54
+ inputRef
29
55
  }) => {
30
56
  const { hasEscalated } = useOpenChat();
31
57
  const [timeText, setTimeText] = useState(timeAgo(msg.$timestamp));
@@ -36,6 +62,9 @@ const ChatbotMessage = ({
36
62
  return () => clearInterval(interval);
37
63
  }, [msg.$timestamp]);
38
64
  if (msg.$sid === "typing-1" && !hasEscalated) {
65
+ if (inputRef?.current) {
66
+ inputRef?.current.focus();
67
+ }
39
68
  return /* @__PURE__ */ jsx(
40
69
  "div",
41
70
  {
@@ -64,6 +93,7 @@ const ChatbotMessage = ({
64
93
  }
65
94
  );
66
95
  }
96
+ const checkInformationMortgage = typeof msg.content == "string" ? convertBulletsToTable(msg.content) : "";
67
97
  return /* @__PURE__ */ jsxs(Fragment, { children: [
68
98
  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),
69
99
  msg.type == "noti" && msg.$userType == "system" && msg.event == "memberLeft" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
@@ -144,9 +174,22 @@ const ChatbotMessage = ({
144
174
  ...props
145
175
  }
146
176
  ),
147
- a: ({ ...props }) => /* @__PURE__ */ jsx("a", { style: { wordBreak: "break-word" }, ...props })
177
+ a: ({ ...props }) => /* @__PURE__ */ jsx("a", { style: { wordBreak: "break-word" }, ...props }),
178
+ table: ({ node, ...props }) => /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", marginTop: 4 }, children: /* @__PURE__ */ jsx(
179
+ "table",
180
+ {
181
+ ...props,
182
+ className: clsx(tableMsg),
183
+ style: { tableLayout: "fixed" }
184
+ }
185
+ ) }),
186
+ th: ({ node, ...props }) => /* @__PURE__ */ jsx("th", { ...props, className: clsx(tableHead) }),
187
+ td: ({ node, ...props }) => /* @__PURE__ */ jsx("td", { ...props, className: clsx(tableCell) }),
188
+ tr: ({ node, ...props }) => {
189
+ return /* @__PURE__ */ jsx("tr", { className: clsx(trMortgageTable), ...props });
190
+ }
148
191
  },
149
- children: msg.content
192
+ children: msg?.content?.includes("Does this information look correct?") ? checkInformationMortgage : msg.content
150
193
  }
151
194
  ) }) : /* @__PURE__ */ jsx(
152
195
  "div",
@@ -4,7 +4,7 @@ import { borderHoverGradient, bubbleButton, bubbleText, bubbleWrapper, inner, sv
4
4
  import { Chatbot } from "./Chatbot.js";
5
5
  import { chatbotAXB, chatbotUFB } from "./Chatbot.css.js";
6
6
  import { ChatWindow } from "./ChatWindow.js";
7
- import { agent_msg, arrowFill, autoResize, button_bar, button_reset, buttonss_section, chatEndCircle, chatEndDialogOverlay, chatFinishDialog, chatNetworkStatus, chat_title, chatbotMenu, chatbotMenuItem, endChatButtonStyle, inline_button, inline_button_wrapper, inputStyle, left_bar_section, messageStyle, messagesContainerStyle, noAnswerButton, notificationStyle, sendButtonStyle, shimmerText, thankyou_image, thankyou_message, thankyou_overlay, user_msg, windowBarStyle, windowOpenStyle, windowStyle } from "./ChatWindow.css.js";
7
+ import { agent_msg, arrowFill, autoResize, button_bar, button_reset, buttonss_section, chatEndCircle, chatEndDialogOverlay, chatFinishDialog, chatNetworkStatus, chat_title, chatbotMenu, chatbotMenuItem, endChatButtonStyle, inline_button, inline_button_wrapper, inputStyle, left_bar_section, messageStyle, messagesContainerStyle, noAnswerButton, notificationStyle, sendButtonStyle, shimmerText, tableCell, tableHead, tableMsg, thankyou_image, thankyou_message, thankyou_overlay, trMortgageTable, user_msg, windowBarStyle, windowOpenStyle, windowStyle } from "./ChatWindow.css.js";
8
8
  import { useOpenChat } from "./store/chat.js";
9
9
  import { useMessages } from "./store/messages.js";
10
10
  export {
@@ -43,9 +43,13 @@ export {
43
43
  sendButtonStyle,
44
44
  shimmerText,
45
45
  svgFill,
46
+ tableCell,
47
+ tableHead,
48
+ tableMsg,
46
49
  thankyou_image,
47
50
  thankyou_message,
48
51
  thankyou_overlay,
52
+ trMortgageTable,
49
53
  useMessages,
50
54
  useOpenChat,
51
55
  user_msg,
@@ -76,8 +76,7 @@ function useHeadlessChat({
76
76
  let chatTimeoutHandler;
77
77
  async function init() {
78
78
  setStatus("connecting");
79
- const { Client, Logger, consoleLoggerHandler } = await import("@ujet/websdk-headless");
80
- if (debug) Logger.addHandler(consoleLoggerHandler);
79
+ const { Client } = await import("@ujet/websdk-headless");
81
80
  try {
82
81
  clientRef.current = new Client({
83
82
  companyId,
@@ -2,7 +2,7 @@
2
2
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
3
3
  import SvgArrowIcon from "../icons/ArrowIcon/index.js";
4
4
  import "../icons/CheckIcon/CheckIcon.css.js";
5
- import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar2.css';import '../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar2.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/Modal/Modal.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css */
5
+ import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar2.css';import '../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar2.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/Chatbot.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/Modal/Modal.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css */
6
6
  /* empty css */
7
7
  /* empty css */
8
8
  /* empty css */
@@ -72,17 +72,17 @@ import "../Auth/SignInPassword.js";
72
72
  /* empty css */
73
73
  import "../Carousel/index.js";
74
74
  /* empty css */
75
+ /* empty css */
75
76
  /* empty css */
76
77
  import "../Chatbot/store/chat.js";
77
- import "../Chatbot/authenticate.js";
78
- /* empty css */
78
+ import "../Chatbot/Chatbot.js";
79
79
  /* empty css */
80
80
  import "../Chatbot/store/messages.js";
81
81
  /* empty css */
82
82
  import "../Comparison/Comparison.css.js";
83
83
  import "next/image.js";
84
- import "../HeroBanner/HeroBanner.css.js";
85
84
  import "../HeroBanner/LargeBanner.css.js";
85
+ import "../HeroBanner/HeroBanner.css.js";
86
86
  import "../HeroBanner/SelectionBanner.css.js";
87
87
  import "../SetContainer/SetContainer.css.js";
88
88
  import "../Tab/Tab.css.js";
@@ -13,7 +13,7 @@ import "../Accordion/Accordion.js";
13
13
  import "../Accordion/Accordion.css.js";
14
14
  import "../icons/ArrowIcon/ArrowIcon.css.js";
15
15
  import "../icons/CheckIcon/CheckIcon.css.js";
16
- import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar2.css';import '../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar2.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/Typography/Typography.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/Modal/Modal.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css */
16
+ import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar2.css';import '../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar2.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/Chatbot.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/Typography/Typography.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/Modal/Modal.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css */
17
17
  /* empty css */
18
18
  /* empty css */
19
19
  /* empty css */
@@ -73,17 +73,17 @@ import "../Auth/SignInPassword.js";
73
73
  /* empty css */
74
74
  import "../Carousel/index.js";
75
75
  /* empty css */
76
+ /* empty css */
76
77
  /* empty css */
77
78
  import "../Chatbot/store/chat.js";
78
- import "../Chatbot/authenticate.js";
79
- /* empty css */
79
+ import "../Chatbot/Chatbot.js";
80
80
  /* empty css */
81
81
  import "../Chatbot/store/messages.js";
82
82
  /* empty css */
83
83
  import { comparison_layout, comparison_content, headerComparison, feature_header, feature_title, comparison_feature, comparison_list, comparison_buttons, comparison } from "./Comparison.css.js";
84
84
  import "next/image.js";
85
- import "../HeroBanner/HeroBanner.css.js";
86
85
  import "../HeroBanner/LargeBanner.css.js";
86
+ import "../HeroBanner/HeroBanner.css.js";
87
87
  import "../HeroBanner/SelectionBanner.css.js";
88
88
  import "../SetContainer/SetContainer.css.js";
89
89
  import { active_content } from "../Tab/Tab.css.js";