@axos-web-dev/shared-components 1.0.77-patch.36 → 1.0.77-patch.38

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 (77) hide show
  1. package/dist/ATMLocator/ATMLocator.js +2 -1
  2. package/dist/Auth/ErrorAlert.js +2 -1
  3. package/dist/Avatar/Avatar.module.js +7 -7
  4. package/dist/Blockquote/Blockquote.module.js +3 -3
  5. package/dist/Button/Button.js +2 -1
  6. package/dist/Calculators/BuyDownCalculator/index.js +1 -1
  7. package/dist/Calculators/Calculator.js +2 -1
  8. package/dist/Carousel/index.js +2 -1
  9. package/dist/Chatbot/Bubble.css.js +1 -0
  10. package/dist/Chatbot/Bubble.d.ts +3 -1
  11. package/dist/Chatbot/Bubble.js +6 -3
  12. package/dist/Chatbot/ChatWindow.css.js +0 -1
  13. package/dist/Chatbot/ChatWindow.d.ts +2 -6
  14. package/dist/Chatbot/ChatWindow.js +50 -1
  15. package/dist/Chatbot/Chatbot.d.ts +6 -2
  16. package/dist/Chatbot/Chatbot.js +200 -22
  17. package/dist/Chatbot/EllipsisAnimation.d.ts +2 -0
  18. package/dist/Chatbot/EllipsisAnimation.js +85 -0
  19. package/dist/Chatbot/index.d.ts +0 -1
  20. package/dist/Chatbot/index.js +0 -2
  21. package/dist/Chatbot/store/chat.d.ts +1 -0
  22. package/dist/Chatbot/store/chat.js +11 -4
  23. package/dist/Chatbot/useHeadlessChat.d.ts +1 -2
  24. package/dist/Chatbot/useHeadlessChat.js +4 -5
  25. package/dist/Chevron/index.js +2 -1
  26. package/dist/Comparison/Comparison.js +2 -1
  27. package/dist/Comparison/ComparisonSet.js +33 -24
  28. package/dist/ExecutiveBio/ExecutiveBio.js +2 -1
  29. package/dist/FaqAccordion/index.js +2 -1
  30. package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +2 -1
  31. package/dist/Forms/ApplyNow.js +2 -1
  32. package/dist/Forms/ContactUsBusiness.js +2 -1
  33. package/dist/Forms/ContactUsBusinessNameEmail.js +2 -1
  34. package/dist/Forms/ContactUsNMLSId.js +2 -1
  35. package/dist/Forms/CraPublicFile.js +2 -1
  36. package/dist/Forms/EmailOnly.js +2 -1
  37. package/dist/Forms/MortgageRate/MortgageRateForm.js +2 -1
  38. package/dist/Forms/MortgageRate/MortgageRateWatch.js +2 -1
  39. package/dist/Forms/MortgageWarehouseLending.js +2 -1
  40. package/dist/Forms/SuccesForm.js +2 -1
  41. package/dist/Hyperlink/index.js +2 -1
  42. package/dist/ImageLink/ImageLink.js +2 -1
  43. package/dist/ImageLink/ImageLinkSet.js +2 -1
  44. package/dist/ImageLink/index.js +2 -1
  45. package/dist/Insight/Featured/CategorySelector.js +2 -1
  46. package/dist/Insight/Featured/Featured.js +2 -1
  47. package/dist/Insight/Featured/Header.js +2 -1
  48. package/dist/Modal/Modal.js +2 -1
  49. package/dist/NavigationMenu/AxosALTS/NavData.js +2 -1
  50. package/dist/NavigationMenu/AxosALTS/index.js +2 -1
  51. package/dist/NavigationMenu/AxosAdvisor/NavBar.module.js +52 -52
  52. package/dist/NavigationMenu/AxosAdvisorServices/NavBar.module.js +53 -53
  53. package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.module.js +16 -16
  54. package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.js +2 -1
  55. package/dist/NavigationMenu/AxosBank/NavBar.module.js +39 -39
  56. package/dist/NavigationMenu/AxosBank/NavData.js +2 -1
  57. package/dist/NavigationMenu/AxosBank/SubNavBar.js +2 -1
  58. package/dist/NavigationMenu/AxosBank/index.js +2 -1
  59. package/dist/NavigationMenu/AxosClearing/NavBar.module.js +37 -37
  60. package/dist/NavigationMenu/AxosFiduciary/NavBar.module.js +41 -41
  61. package/dist/NavigationMenu/LaVictoire/NavData.js +2 -1
  62. package/dist/NavigationMenu/LaVictoire/index.js +2 -1
  63. package/dist/SetContainer/SetContainer.js +2 -1
  64. package/dist/SocialMediaBar/iconsRepository.js +2 -1
  65. package/dist/VideoTile/VideoTile.js +2 -1
  66. package/dist/VideoWrapper/index.js +2 -1
  67. package/dist/assets/Avatar/Avatar.css.css +59 -59
  68. package/dist/assets/Blockquote/Blockquote.css.css +68 -68
  69. package/dist/assets/Comparison/Comparison.css +3 -1
  70. package/dist/assets/NavigationMenu/AxosAdvisor/NavBar.css.css +597 -597
  71. package/dist/assets/NavigationMenu/AxosAdvisorServices/NavBar.css.css +618 -618
  72. package/dist/assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css +191 -191
  73. package/dist/assets/NavigationMenu/AxosBank/NavBar.css.css +473 -473
  74. package/dist/assets/NavigationMenu/AxosClearing/NavBar.css.css +458 -458
  75. package/dist/assets/NavigationMenu/AxosFiduciary/NavBar.css.css +426 -426
  76. package/dist/main.js +0 -2
  77. package/package.json +135 -135
@@ -66,12 +66,13 @@ import { calculator_headline, calculator_description } from "../Calculators/calc
66
66
  import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
67
67
  /* empty css */
68
68
  import "../Carousel/index.js";
69
+ import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
69
70
  /* empty css */
70
71
  import "../Chatbot/store/chat.js";
71
72
  import "../Chatbot/authenticate.js";
72
- import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
73
73
  /* empty css */
74
74
  import "../Chatbot/store/messages.js";
75
+ import "@ujet/websdk-headless";
75
76
  /* empty css */
76
77
  import "../Comparison/Comparison.css.js";
77
78
  import "next/image.js";
@@ -58,12 +58,13 @@ import "./SignInPassword.js";
58
58
  /* empty css */
59
59
  /* empty css */
60
60
  import "../Carousel/index.js";
61
+ import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
61
62
  /* empty css */
62
63
  import "../Chatbot/store/chat.js";
63
64
  import "../Chatbot/authenticate.js";
64
- import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
65
65
  /* empty css */
66
66
  import "../Chatbot/store/messages.js";
67
+ import "@ujet/websdk-headless";
67
68
  import { Hyperlink } from "../Hyperlink/index.js";
68
69
  /* empty css */
69
70
  import "../Comparison/Comparison.css.js";
@@ -1,10 +1,10 @@
1
- import '../assets/Avatar/Avatar.css.css';const avatar_sec = "_avatar_sec_wf36a_1";
2
- const container = "_container_wf36a_9";
3
- const image = "_image_wf36a_27";
4
- const text = "_text_wf36a_45";
5
- const name = "_name_wf36a_57";
6
- const title = "_title_wf36a_73";
7
- const description = "_description_wf36a_87";
1
+ import '../assets/Avatar/Avatar.css.css';const avatar_sec = "_avatar_sec_1bnm9_1";
2
+ const container = "_container_1bnm9_5";
3
+ const image = "_image_1bnm9_14";
4
+ const text = "_text_1bnm9_23";
5
+ const name = "_name_1bnm9_29";
6
+ const title = "_title_1bnm9_37";
7
+ const description = "_description_1bnm9_44";
8
8
  const css = {
9
9
  avatar_sec,
10
10
  container,
@@ -1,6 +1,6 @@
1
- import '../assets/Blockquote/Blockquote.css.css';const quote_spacer = "_quote_spacer_1r8g1_1";
2
- const author = "_author_1r8g1_13";
3
- const quote = "_quote_1r8g1_1";
1
+ import '../assets/Blockquote/Blockquote.css.css';const quote_spacer = "_quote_spacer_1mzku_1";
2
+ const author = "_author_1mzku_7";
3
+ const quote = "_quote_1mzku_1";
4
4
  const css = {
5
5
  quote_spacer,
6
6
  author,
@@ -69,12 +69,13 @@ import "../Auth/SignInPassword.js";
69
69
  /* empty css */
70
70
  /* empty css */
71
71
  import "../Carousel/index.js";
72
+ import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
72
73
  /* empty css */
73
74
  import "../Chatbot/store/chat.js";
74
75
  import "../Chatbot/authenticate.js";
75
- import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
76
76
  /* empty css */
77
77
  import "../Chatbot/store/messages.js";
78
+ import "@ujet/websdk-headless";
78
79
  /* empty css */
79
80
  import "../Comparison/Comparison.css.js";
80
81
  import "next/image.js";
@@ -622,7 +622,7 @@ const BuyDownCalculator = ({
622
622
  id: "mooringOutsideContinentalUS",
623
623
  ...register("mooringOutsideContinentalUS"),
624
624
  value: 0.5,
625
- radioText: "Mooring Outside Continental U.S. (Includes Puerto Rico,\r\n Hawaii, and Alaska) (Does not apply to Full Time Charter)\r\n +0.500",
625
+ radioText: "Mooring Outside Continental U.S. (Includes Puerto Rico,\n Hawaii, and Alaska) (Does not apply to Full Time Charter)\n +0.500",
626
626
  groupName: "dependentInputs",
627
627
  disabled: disableMooringOutside
628
628
  }
@@ -48,13 +48,14 @@ import { MonthlyPaymentLVFCalculator } from "./MonthlyPaymentLVFCalculator/index
48
48
  import { SummitApyCalculator } from "./SummitApyCalculator/index.js";
49
49
  /* empty css */
50
50
  import "../Carousel/index.js";
51
+ import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
51
52
  /* empty css */
52
53
  import "../Chatbot/store/chat.js";
53
54
  import "../Chatbot/authenticate.js";
54
55
  import "react-use";
55
- import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
56
56
  /* empty css */
57
57
  import "../Chatbot/store/messages.js";
58
+ import "@ujet/websdk-headless";
58
59
  /* empty css */
59
60
  import "../Comparison/Comparison.css.js";
60
61
  import "next/image.js";
@@ -71,12 +71,13 @@ import "../Auth/SignInPassword.js";
71
71
  /* empty css */
72
72
  /* empty css */
73
73
  /* empty css */
74
+ import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
74
75
  /* empty css */
75
76
  import "../Chatbot/store/chat.js";
76
77
  import "../Chatbot/authenticate.js";
77
- import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
78
78
  /* empty css */
79
79
  import "../Chatbot/store/messages.js";
80
+ import "@ujet/websdk-headless";
80
81
  /* empty css */
81
82
  import "../Comparison/Comparison.css.js";
82
83
  import "next/image.js";
@@ -1,3 +1,4 @@
1
+ import "./Chatbot.css.ts.vanilla.css.js";
1
2
  import '../assets/Chatbot/Bubble.css';/* empty css */
2
3
  var bubbleWrapper = "_7u9pv30";
3
4
  var svgFill = "_7u9pv31";
@@ -1,3 +1,5 @@
1
1
  import { PropsWithChildren } from 'react';
2
2
 
3
- export declare const Bubble: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
3
+ export declare const Bubble: ({ children, onClick, }: PropsWithChildren & {
4
+ onClick?: () => void;
5
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -3,10 +3,13 @@ import { jsxs, jsx } from "react/jsx-runtime";
3
3
  import { AnimatePresence, motion } from "framer-motion";
4
4
  import { bubbleWrapper, svgFill } from "./Bubble.css.js";
5
5
  import { useOpenChat } from "./store/chat.js";
6
- const Bubble = ({ children }) => {
6
+ const Bubble = ({
7
+ children,
8
+ onClick = () => {
9
+ }
10
+ }) => {
7
11
  const isOpen = useOpenChat((state) => state.isOpen);
8
- const toggle = useOpenChat((state) => state.toggle);
9
- return /* @__PURE__ */ jsxs("div", { className: bubbleWrapper, onClick: toggle, children: [
12
+ return /* @__PURE__ */ jsxs("div", { className: bubbleWrapper, onClick, children: [
10
13
  /* @__PURE__ */ jsx("div", { className: "bubble-circle flex", children: /* @__PURE__ */ jsx(AnimatePresence, { children: !isOpen ? /* @__PURE__ */ jsxs(
11
14
  motion.svg,
12
15
  {
@@ -1,4 +1,3 @@
1
- import "./Chatbot.css.ts.vanilla.css.js";
2
1
  import '../assets/Chatbot/ChatWindow.css';/* empty css */
3
2
  var windowStyle = "_13n1jqk0";
4
3
  var windowOpenStyle = "_13n1jqk1";
@@ -1,4 +1,4 @@
1
- import { MessageResponse as BaseMessageResponse, HumanAgent } from '@ujet/websdk-headless';
1
+ import { MessageResponse as BaseMessageResponse, HumanAgent, VirtualAgent } from '@ujet/websdk-headless';
2
2
  import { default as React } from 'react';
3
3
 
4
4
  interface MessageResponse extends BaseMessageResponse {
@@ -19,11 +19,7 @@ interface ChatWindowProps {
19
19
  onClose?: () => void;
20
20
  endChat?: () => void;
21
21
  showReconnect?: boolean;
22
- virtualAgent?: {
23
- avatar_url: string;
24
- name: string;
25
- id: string;
26
- };
22
+ virtualAgent?: VirtualAgent | null;
27
23
  showAvatar?: boolean;
28
24
  }
29
25
  export declare const ChatWindow: React.FC<ChatWindowProps>;
@@ -6,6 +6,7 @@ import ReactMarkdown from "react-markdown";
6
6
  import { useNetworkState, useMount } from "react-use";
7
7
  import remarkGfm from "remark-gfm";
8
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";
9
10
  import { EllipsisIcon } from "./EllipsisIcon.js";
10
11
  import { useOpenChat } from "./store/chat.js";
11
12
  const ChatWindow = ({
@@ -45,6 +46,9 @@ const ChatWindow = ({
45
46
  const isAxos = project === "axos";
46
47
  const endUserBg = isAxos ? "#14263d" : "#323339";
47
48
  const chatbotBg = isAxos ? "#E9F8FF" : "#EAE8E8";
49
+ const escalationDeflected = messages?.filter(
50
+ (item) => item.type == "noti" && item.event == "escalationDeflected"
51
+ ).length > 0;
48
52
  return /* @__PURE__ */ jsxs("div", { className: clsx(windowStyle, isOpen && windowOpenStyle), children: [
49
53
  /* @__PURE__ */ jsxs("div", { className: windowBarStyle, children: [
50
54
  /* @__PURE__ */ jsxs("div", { className: "flex middle", style: { paddingBlock: "6px" }, children: [
@@ -210,6 +214,34 @@ const ChatWindow = ({
210
214
  }
211
215
  ) }) : null,
212
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
+ ),
213
245
  messages?.map((msg) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
214
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),
215
247
  msg.type == "noti" && msg.$userType == "system" && msg.event == "memberLeft" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
@@ -221,6 +253,22 @@ const ChatWindow = ({
221
253
  " ",
222
254
  msg.to_agent ? /* @__PURE__ */ jsx("strong", { children: msg?.to_agent?.name }) : "an agent"
223
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
+ ] }),
224
272
  ["text", "markdown_template", "markdown"].includes(msg.type) && /* @__PURE__ */ jsxs(
225
273
  "div",
226
274
  {
@@ -363,7 +411,7 @@ const ChatWindow = ({
363
411
  placeholder: "Ask something...",
364
412
  className: inputStyle,
365
413
  autoFocus: true,
366
- disabled: inputDisabled || status !== "connected"
414
+ disabled: inputDisabled || status !== "connected" || escalationDeflected
367
415
  }
368
416
  ),
369
417
  /* @__PURE__ */ jsx(
@@ -371,6 +419,7 @@ const ChatWindow = ({
371
419
  {
372
420
  className: clsx(sendButtonStyle, input.trim().length > 0 && "active"),
373
421
  type: "submit",
422
+ title: "Send message",
374
423
  disabled: inputDisabled || status !== "connected" || !input.trim(),
375
424
  children: /* @__PURE__ */ jsxs(
376
425
  "svg",
@@ -1,6 +1,10 @@
1
1
  export type ChatbotProps = {
2
2
  project?: "axos" | "ufb";
3
3
  debug?: boolean;
4
- env?: "dev" | "qa" | "uat" | "prod";
5
4
  };
6
- export declare const Chatbot: (props: ChatbotProps) => import("react/jsx-runtime").JSX.Element;
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;
@@ -6,34 +6,212 @@ import { chatbotUFB, chatbotAXB } from "./Chatbot.css.js";
6
6
  import { ChatWindow } from "./ChatWindow.js";
7
7
  import { useOpenChat } from "./store/chat.js";
8
8
  import { useMessages } from "./store/messages.js";
9
- import { useHeadlessChat } from "./useHeadlessChat.js";
10
- const Chatbot = (props) => {
11
- const messages = useMessages((state) => state.messages);
12
- const close = useOpenChat((state) => state.close);
13
- const { status, sendMessage, showReconnect, endChat, virtualAgent } = useHeadlessChat({
14
- companyId: process.env.CCAI_COMPANY_ID || "",
15
- tenant: process.env.CCAI_TENANT_NAME || "",
16
- host: process.env.CCAI_HOST || "",
17
- // or your region
18
- projectId: process.env.CCAI_PROJECT_ID || props.project || "axos",
19
- getToken: authenticate,
20
- debug: props.debug || process.env.NODE_ENV === "development",
21
- env_project: props.env || "prod"
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;
22
204
  });
23
- return /* @__PURE__ */ jsxs("div", { className: props.project === "ufb" ? chatbotUFB : chatbotAXB, children: [
24
- /* @__PURE__ */ jsx(Bubble, {}),
205
+ return /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
206
+ /* @__PURE__ */ jsx(Bubble, { onClick: handleClick }),
25
207
  /* @__PURE__ */ jsx(
26
208
  ChatWindow,
27
209
  {
28
210
  status,
29
- onClose: close,
211
+ virtualAgent: agent_virtual.current,
30
212
  messages,
31
- onSend: function(msg) {
32
- sendMessage(msg);
33
- },
34
- endChat,
35
- virtualAgent,
36
- showReconnect
213
+ onSend: onSendMessage,
214
+ endChat: onEndChat
37
215
  }
38
216
  )
39
217
  ] });
@@ -0,0 +1,2 @@
1
+ declare const EllipsisLoader: () => import("react/jsx-runtime").JSX.Element;
2
+ export default EllipsisLoader;
@@ -0,0 +1,85 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { motion } from "framer-motion";
3
+ const loadingContainerVariants = {
4
+ start: {
5
+ transition: {
6
+ staggerChildren: 0.2
7
+ // Delay between each dot's animation
8
+ }
9
+ },
10
+ end: {
11
+ transition: {
12
+ staggerChildren: 0.2
13
+ }
14
+ }
15
+ };
16
+ const loadingCircleVariants = {
17
+ start: {
18
+ y: "0%"
19
+ },
20
+ end: {
21
+ y: "100%"
22
+ // Move down by 100% of its height
23
+ }
24
+ };
25
+ const loadingTransition = {
26
+ duration: 0.6,
27
+ repeat: Infinity,
28
+ repeatType: "reverse",
29
+ // Reverse the animation direction
30
+ ease: "easeInOut"
31
+ };
32
+ const EllipsisLoader = () => {
33
+ const project = process.env.CCAI_PROJECT_ID;
34
+ const isAxos = project === "axos";
35
+ const endUserBg = isAxos ? "#14263d" : "#323339";
36
+ return /* @__PURE__ */ jsxs(
37
+ motion.svg,
38
+ {
39
+ width: "30",
40
+ height: "15",
41
+ viewBox: "0 0 100 50",
42
+ variants: loadingContainerVariants,
43
+ initial: "start",
44
+ animate: "end",
45
+ children: [
46
+ /* @__PURE__ */ jsx(
47
+ motion.circle,
48
+ {
49
+ cx: "20",
50
+ cy: "15",
51
+ r: "8",
52
+ fill: endUserBg,
53
+ variants: loadingCircleVariants,
54
+ transition: loadingTransition
55
+ }
56
+ ),
57
+ /* @__PURE__ */ jsx(
58
+ motion.circle,
59
+ {
60
+ cx: "50",
61
+ cy: "15",
62
+ r: "8",
63
+ fill: endUserBg,
64
+ variants: loadingCircleVariants,
65
+ transition: loadingTransition
66
+ }
67
+ ),
68
+ /* @__PURE__ */ jsx(
69
+ motion.circle,
70
+ {
71
+ cx: "80",
72
+ cy: "15",
73
+ r: "8",
74
+ fill: endUserBg,
75
+ variants: loadingCircleVariants,
76
+ transition: loadingTransition
77
+ }
78
+ )
79
+ ]
80
+ }
81
+ );
82
+ };
83
+ export {
84
+ EllipsisLoader as default
85
+ };
@@ -6,4 +6,3 @@ export * from './ChatWindow';
6
6
  export * from './ChatWindow.css';
7
7
  export * from './store/chat';
8
8
  export * from './store/messages';
9
- export * from './useHeadlessChat';
@@ -7,7 +7,6 @@ import { ChatWindow } from "./ChatWindow.js";
7
7
  import { arrowFill, button_reset, chatFinishDialog, chatNetworkStatus, chat_title, chatbotMenu, chatbotMenuItem, endChatButtonStyle, inline_button, inline_button_wrapper, inputStyle, messageStyle, messagesContainerStyle, notificationStyle, sendButtonStyle, windowBarStyle, windowOpenStyle, windowStyle } from "./ChatWindow.css.js";
8
8
  import { useOpenChat } from "./store/chat.js";
9
9
  import { useMessages } from "./store/messages.js";
10
- import { useHeadlessChat } from "./useHeadlessChat.js";
11
10
  export {
12
11
  Bubble,
13
12
  ChatWindow,
@@ -31,7 +30,6 @@ export {
31
30
  notificationStyle,
32
31
  sendButtonStyle,
33
32
  svgFill,
34
- useHeadlessChat,
35
33
  useMessages,
36
34
  useOpenChat,
37
35
  windowBarStyle,
@@ -1,5 +1,6 @@
1
1
  interface OpenChatState {
2
2
  isOpen: boolean;
3
+ hasOpenedOnce: boolean;
3
4
  toggle: () => void;
4
5
  open: () => void;
5
6
  close: () => void;