@axos-web-dev/shared-components 1.0.100-dev.8 → 1.0.100-dev.80

package/dist/Chatbot/Chatbot.css.js

@@ -1,4 +1,4 @@
-import "./Chatbot.css.ts.vanilla.css.js";
+/* empty css                           */
 var chatbotAXB = "_1hpv6vm0";
 var chatbotUFB = "_1hpv6vm1";
 export {

package/dist/Chatbot/Chatbot.d.ts

@@ -2,4 +2,9 @@ export type ChatbotProps = {
     project?: "axos" | "ufb";
     debug?: boolean;
 };
-export declare const Chatbot: (props: ChatbotProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Chatbot: ({ project, projectEnv, menuOption, debug, }: {
+    project?: "axos" | "ufb";
+    projectEnv?: "dev" | "qa" | "uat" | "stg" | "prod";
+    menuOption?: "Support Virtual Agent" | string;
+    debug?: boolean;
+}) => false | import("react/jsx-runtime").JSX.Element;

package/dist/Chatbot/Chatbot.js

@@ -6,33 +6,380 @@ import { chatbotUFB, chatbotAXB } from "./Chatbot.css.js";
 import { ChatWindow } from "./ChatWindow.js";
 import { useOpenChat } from "./store/chat.js";
 import { useMessages } from "./store/messages.js";
-import { useHeadlessChat } from "./useHeadlessChat.js";
-const Chatbot = (props) => {
-  const messages = useMessages((state) => state.messages);
-  const close = useOpenChat((state) => state.close);
-  const { status, sendMessage, showReconnect, endChat, virtualAgent } = useHeadlessChat({
-    companyId: process.env.CCAI_COMPANY_ID || "",
-    tenant: process.env.CCAI_TENANT_NAME || "",
-    host: process.env.CCAI_HOST || "",
-    // or your region
-    projectId: process.env.CCAI_PROJECT_ID || props.project || "axos",
-    getToken: authenticate,
-    debug: props.debug || process.env.NODE_ENV === "development"
+import { useRef, useState, useEffect } from "react";
+import { useMount, useUnmount } from "react-use";
+const Chatbot = ({
+  project = "axos",
+  projectEnv = "dev",
+  menuOption = "Support Virtual Agent",
+  debug = false
+}) => {
+  const {
+    hasOpenedOnce,
+    toggle,
+    reset,
+    startEscalation,
+    hasEscalated,
+    endEscalation,
+    unblockInput,
+    blockInput
+  } = useOpenChat();
+  const { addMessage, addMessages, clearMessages, messages } = useMessages();
+  const clientRef = useRef(null);
+  const menuRef = useRef(null);
+  const isMountedRef = useRef(false);
+  const hasLoadedBefore = useRef(true);
+  const chatRef = useRef(null);
+  const agent_virtual = useRef(null);
+  const [status, setStatus] = useState("idle");
+  const [hasStarted, setHasStarted] = useState(false);
+  const [menusLoaded, setMenusLoaded] = useState(false);
+  const [pendingStart, setPendingStart] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+  const [scalationStarted, setScalationStarted] = useState(false);
+  useEffect(() => {
+    if (messages.length === 0) return;
+    const hasScalation = messages.some(
+      (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
+        msg.event
+      )
+    );
+    setScalationStarted(hasScalation);
+    return () => {
+      setScalationStarted(false);
+    };
+  }, [messages]);
+  const brandMap = /* @__PURE__ */ new Map([
+    ["axos", 1],
+    ["ufb", 3]
+  ]);
+  const typingMessage = {
+    $sid: "typing-1",
+    type: "system",
+    text: scalationStarted ? "Typing" : "AI is typing...",
+    sender: { id: "system", type: "system" },
+    $timestamp: /* @__PURE__ */ new Date(),
+    $userType: "system",
+    $index: -10,
+    $userId: 0
+  };
+  const custom_data = {
+    unsigned: {
+      facingBrandId: {
+        label: "facingBrandId",
+        value: `${brandMap.get(project) || 1}`
+      },
+      channel: {
+        label: "channel",
+        value: "in_web"
+      },
+      user_auth: {
+        label: "user_auth",
+        value: "false"
+      },
+      env: {
+        label: "env",
+        value: projectEnv === "uat" ? "dev" : projectEnv
+      }
+    }
+  };
+  const onReadyHandler = async () => {
+    console.log("Chat client is ready");
+    if (clientRef.current) {
+      menuRef.current = await clientRef.current.getMenus();
+      setMenusLoaded(true);
+      console.log("menus:", menuRef.current);
+    }
+  };
+  const onAuthenticatedHandler = async () => {
+    console.log("Chat client is authenticated");
+  };
+  const onChatOngoingHandler = async (chat) => {
+    console.log("Ongoing chat:", chat);
+  };
+  const onChatMessageHandler = async (message) => {
+    console.log("Received message:", message);
+    const { event, $userType } = message;
+    if (["system", "virtual_agent", "user"].includes($userType) && event === void 0) {
+      addMessage(message);
+      if (!hasEscalated) {
+        unblockInput?.();
+      }
+      return;
+    }
+    switch (event) {
+      case "escalationAccepted":
+      case "escalationStarted":
+        setScalationStarted(true);
+        startEscalation?.();
+        addMessage(message);
+        return;
+      case "escalationEnded":
+      case "escalationFailed": {
+        endEscalation?.();
+        addMessage(message);
+        return;
+      }
+      default:
+        addMessage(message);
+        if (["end_user"].includes(message.$userType)) {
+          if (!hasEscalated) {
+            addMessage(typingMessage);
+          }
+        }
+        return;
+    }
+  };
+  const onChatTypingStartedHandler = async (identity) => {
+    console.log("Typing started by:", identity);
+    setIsTyping(true);
+  };
+  const onChatTypingEndedHandler = async (identity) => {
+    console.log("Typing ended by:", identity);
+    setIsTyping(false);
+  };
+  const onChatDisconnectedHandler = async () => {
+    console.log("Chat disconnected");
+    setStatus("idle");
+  };
+  const onDismissedHandler = async () => {
+    console.log("Chat dismissed");
+  };
+  const onTimeoutHandler = async () => {
+    console.log("Chat timeout");
+  };
+  const onEndedHandler = async () => {
+    console.log("Chat ended");
+    setStatus("finished");
+  };
+  const onDestroyedHandler = async () => {
+    console.log("Chat destroyed");
+  };
+  const onChatMemberLeftHandler = async (identity) => {
+    console.log("Chat member left:", identity);
+  };
+  const onChatMemberJoinedHandler = async (identity) => {
+    console.log("Chat member joined:", identity);
+  };
+  const onChatConnectedHandler = async () => {
+    setStatus("connected");
+    console.log("connected");
+    try {
+      if (!clientRef.current) {
+        console.error("Client not initialized on chat connected");
+        return;
+      }
+      const messages2 = await clientRef.current?.fetchMessages();
+      console.log("Fetched messages on chat connected:", messages2);
+      if (messages2) {
+        addMessages(messages2);
+        const hasEscalation = messages2.some(
+          (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
+            msg.event
+          )
+        );
+        console.log(hasEscalation);
+        if (hasEscalation) {
+          setScalationStarted(true);
+          startEscalation?.();
+        }
+      }
+    } catch (error) {
+      console.error("Error fetching messages on chat connected:", error);
+    }
+  };
+  const registerEventHandlers = () => {
+    clientRef.current?.on("chat.ongoing", onChatOngoingHandler);
+    clientRef.current?.on("chat.message", onChatMessageHandler);
+    clientRef.current?.on("chat.typingStarted", onChatTypingStartedHandler);
+    clientRef.current?.on("chat.typingEnded", onChatTypingEndedHandler);
+    clientRef.current?.on("chat.disconnected", onChatDisconnectedHandler);
+    clientRef.current?.on("chat.dismissed", onDismissedHandler);
+    clientRef.current?.on("chat.timeout", onTimeoutHandler);
+    clientRef.current?.on("chat.ended", onEndedHandler);
+    clientRef.current?.on("chat.destroyed", onDestroyedHandler);
+    clientRef.current?.on("chat.memberJoined", onChatMemberJoinedHandler);
+    clientRef.current?.on("chat.memberLeft", onChatMemberLeftHandler);
+    clientRef?.current?.on("chat.connected", onChatConnectedHandler);
+  };
+  const deregisterEventHandlers = () => {
+    clientRef.current?.off("ready", onReadyHandler);
+    clientRef.current?.off("authenticated", onAuthenticatedHandler);
+    clientRef.current?.off("chat.ongoing", onDismissedHandler);
+    clientRef.current?.off("chat.message", onChatMessageHandler);
+    clientRef.current?.off("chat.typingStarted", onChatTypingStartedHandler);
+    clientRef.current?.off("chat.typingEnded", onChatTypingEndedHandler);
+    clientRef.current?.off("chat.disconnected", onChatDisconnectedHandler);
+    clientRef.current?.off("chat.dismissed", onDismissedHandler);
+    clientRef.current?.off("chat.timeout", onTimeoutHandler);
+    clientRef.current?.off("chat.ended", onEndedHandler);
+    clientRef.current?.off("chat.destroyed", onDestroyedHandler);
+    clientRef.current?.off("chat.memberLeft", onChatMemberLeftHandler);
+    clientRef.current?.off("chat.memberJoined", onChatMemberJoinedHandler);
+    clientRef.current?.off("chat.connected", onChatConnectedHandler);
+  };
+  const createClient = async () => {
+    const { Client, Logger, consoleLoggerHandler } = await import("@ujet/websdk-headless");
+    if (projectEnv !== "prod" || debug) {
+      Logger.addHandler(consoleLoggerHandler);
+    }
+    if (clientRef.current) return;
+    const client = new Client({
+      companyId: process.env.CCAI_COMPANY_ID || "",
+      tenant: process.env.CCAI_TENANT_NAME || "",
+      host: process.env.CCAI_HOST || "",
+      // or your region
+      // companyId: import.meta.env.VITE_COMPANY_ID || "",
+      // tenant: import.meta.env.VITE_TENANT_NAME || "",
+      // host: import.meta.env.VITE_HOST || "", // or your region
+      authenticate
+    });
+    client?.on("ready", onReadyHandler);
+    client?.on("authenticated", onAuthenticatedHandler);
+    isMountedRef.current = true;
+    clientRef.current = client;
+    registerEventHandlers();
+    return;
+  };
+  const startChat = async () => {
+    console.log("Starting chat");
+    const client = clientRef.current;
+    if (!client) return;
+    if (!menuRef.current || !menuRef.current.menus) {
+      let waited = 0;
+      while ((!menuRef.current || !menuRef.current.menus) && waited < 5e3) {
+        await new Promise((res) => setTimeout(res, 100));
+        waited += 100;
+      }
+      if (!menuRef.current || !menuRef.current.menus) {
+        console.error("Menu not loaded, cannot start chat");
+        return;
+      }
+    }
+    try {
+      const ongoingChat = await client.loadOngoingChat();
+      if (ongoingChat) {
+        console.log("Ongoing chat found:", ongoingChat);
+        console.log("Resuming chat:", ongoingChat.id);
+        chatRef.current = await client.resumeChat(ongoingChat.id);
+        agent_virtual.current = ongoingChat.agent;
+        return;
+      }
+      const foundMenu = menuRef.current.menus.find(
+        (menu) => menu.name === menuOption
+      );
+      const menuId = foundMenu && foundMenu.id;
+      console.log("Creating new chat with menu ID:", menuId);
+      const newChat = await client.createChat(menuId, { custom_data });
+      if (newChat !== null) {
+        chatRef.current = newChat;
+        agent_virtual.current = newChat.agent;
+        console.log("Chat created id:", newChat.id);
+      }
+    } catch (err) {
+      console.error("Error creating chat:", err);
+    }
+  };
+  const handleClick = async () => {
+    toggle();
+    if (hasStarted) return;
+    if (!menusLoaded) {
+      setPendingStart(true);
+      return;
+    }
+    if (!hasOpenedOnce) {
+      await startChat();
+      setHasStarted(true);
+    }
+  };
+  const onSendMessage = async (msg) => {
+    console.log("Sending message:", msg);
+    try {
+      await clientRef.current?.sendTextMessage(msg);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      if (!hasEscalated) {
+        blockInput?.();
+      }
+    }
+  };
+  const onEndChat = async () => {
+    console.log("Ending chat");
+    if (chatRef.current) {
+      await clientRef.current?.finishChat();
+      await chatRef.current?.destroy();
+      clearMessages();
+      chatRef.current = null;
+      console.log("Chat ended");
+      setHasStarted(false);
+      endEscalation?.();
+    }
+  };
+  const onEndAndStartNewChat = async () => {
+    console.log("Ending current chat and starting a new one");
+    await onEndChat();
+    await startChat();
+  };
+  useMount(async () => {
+    console.log("Chatbot mounted");
+    if (isMountedRef.current) return;
+    isMountedRef.current = true;
+    await createClient();
+  });
+  useEffect(() => {
+    if (menusLoaded && pendingStart && !hasStarted) {
+      startChat();
+      setPendingStart(false);
+    }
+  }, [menusLoaded, pendingStart, hasStarted]);
+  useUnmount(() => {
+    console.log("Chatbot unmounted");
+    deregisterEventHandlers();
+    isMountedRef.current = false;
+    hasLoadedBefore.current = true;
+    reset();
+    setHasStarted(false);
+    setStatus("idle");
+    clearMessages();
+    endEscalation?.();
+    clientRef.current?.destroy();
+    clientRef.current?.destroyChat();
+    clientRef.current = null;
   });
-  return /* @__PURE__ */ jsxs("div", { className: props.project === "ufb" ? chatbotUFB : chatbotAXB, children: [
-    /* @__PURE__ */ jsx(Bubble, {}),
+  const onClose = () => {
+    toggle();
+  };
+  const onCloseAfterThankYou = () => {
+    reset();
+    setHasStarted(false);
+  };
+  const onPreviewTyping = async (msg) => {
+    console.log("Preview typing message:", msg);
+    try {
+      if (clientRef.current) {
+        chatRef.current?.startTyping();
+        await clientRef.current?.sendPreviewMessage(msg);
+      }
+    } catch (error) {
+      console.error("Error sending preview message:", error);
+    }
+  };
+  return menusLoaded && /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
+    /* @__PURE__ */ jsx(Bubble, { onClick: handleClick }),
     /* @__PURE__ */ jsx(
       ChatWindow,
       {
         status,
-        onClose: close,
+        virtualAgent: agent_virtual.current,
         messages,
-        onSend: function(msg) {
-          sendMessage(msg);
-        },
-        endChat,
-        virtualAgent,
-        showReconnect
+        onSend: onSendMessage,
+        endChat: onEndChat,
+        onClose,
+        onNewChat: onEndAndStartNewChat,
+        onCloseAfterThankYou,
+        previewTyping: onPreviewTyping,
+        isTyping
       }
     )
   ] });

package/dist/Chatbot/ChatbotMessage.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { MessageResponse as BaseMessageResponse, HumanAgent, VirtualAgent } from '@ujet/websdk-headless';
+
+interface MessageResponse extends BaseMessageResponse {
+    to_agent?: HumanAgent;
+}
+interface ChatbotMessageProps {
+    msg: MessageResponse;
+    showAvatar?: boolean;
+    showName?: boolean;
+    virtualAgent?: VirtualAgent | null;
+    onCancelEndChat?: () => void;
+    onSend?: (content: string) => void;
+    onEndChat?: () => void;
+}
+export declare const ChatbotMessage: FC<ChatbotMessageProps>;
+export {};

package/dist/Chatbot/ChatbotMessage.js

@@ -0,0 +1,236 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { vars } from "../themes/axos.css.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                               */
+/* empty css                                    */
+import clsx from "clsx";
+import { shimmerText, notificationStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button, endChatButtonStyle } from "./ChatWindow.css.js";
+import { useOpenChat } from "./store/chat.js";
+function timeAgo(date) {
+  const seconds = Math.floor(((/* @__PURE__ */ new Date()).getTime() - date.getTime()) / 1e3);
+  if (seconds < 60) return "Just now";
+  return new Date(date).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+const ChatbotMessage = ({
+  msg,
+  showAvatar,
+  showName,
+  virtualAgent,
+  onEndChat,
+  onSend
+}) => {
+  const { hasEscalated } = useOpenChat();
+  const [timeText, setTimeText] = useState(timeAgo(msg.$timestamp));
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeText(timeAgo(msg.$timestamp));
+    }, 3e4);
+    return () => clearInterval(interval);
+  }, [msg.$timestamp]);
+  if (msg.$sid === "typing-1" && !hasEscalated) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(),
+        style: {
+          textAlign: "left",
+          alignSelf: "flex-start",
+          color: "#1e3860",
+          borderRadius: 16,
+          padding: "8px 8px",
+          maxWidth: "80%",
+          marginBottom: 2
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: 14,
+              display: "flex",
+              flexDirection: "column",
+              gap: 4
+            },
+            children: /* @__PURE__ */ jsx("p", { className: shimmerText, children: "AI thinking..." })
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    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),
+    msg.type == "noti" && msg.$userType == "system" && msg.event == "memberLeft" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Virtual Agent" }),
+      " just left the conversation."
+    ] }, msg.$index),
+    msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationAccepted" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
+      "You are now connected with a",
+      " ",
+      msg.to_agent ? /* @__PURE__ */ jsx("strong", { children: msg?.to_agent?.name }) : "an agent"
+    ] }, msg.$index),
+    msg.type == "noti" && msg.$userType == "virtual_agent" && msg.event == "escalationDeflected" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: notificationStyle,
+        style: { fontSize: 12 },
+        children: [
+          "Our chat team is available weekdays, 8am-5pm, except federal bank holidays. For immediate assistance you can reach out to us at",
+          " ",
+          /* @__PURE__ */ jsx("a", { href: "tel:1-888-502-2967", children: "1-888-502-2967" }),
+          "."
+        ]
+      },
+      msg.$index
+    ) }),
+    ["text", "markdown_template", "markdown"].includes(msg.type) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          messageStyle,
+          msg.$userType == "end_user" ? user_msg : agent_msg
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              fontSize: 14,
+              display: "flex",
+              flexDirection: "column",
+              gap: 4
+            },
+            children: [
+              msg.$userType == "virtual_agent" && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px"
+                  },
+                  children: [
+                    showAvatar && /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        width: 24,
+                        height: 24,
+                        src: virtualAgent?.avatar_url,
+                        alt: "agent avatar"
+                      }
+                    ),
+                    showName && /* @__PURE__ */ jsx("strong", { children: virtualAgent?.name })
+                  ]
+                }
+              ),
+              msg.$userType != "end_user" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                ReactMarkdown,
+                {
+                  remarkPlugins: [[remarkGfm, { singleTilde: false }]],
+                  components: {
+                    p: ({ ...props }) => /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        style: { margin: 0, fontSize: "inherit" },
+                        title: new Date(msg.$timestamp).toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit"
+                        }),
+                        ...props
+                      }
+                    ),
+                    a: ({ ...props }) => /* @__PURE__ */ jsx("a", { style: { wordBreak: "break-word" }, ...props })
+                  },
+                  children: msg.content
+                }
+              ) }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  title: new Date(msg.$timestamp).toLocaleTimeString([], {
+                    hour: "2-digit",
+                    minute: "2-digit"
+                  }),
+                  children: msg.content
+                }
+              )
+            ]
+          }
+        )
+      },
+      msg.$index
+    ),
+    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) => {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: inline_button,
+          onClick: () => {
+            onSend?.(button?.title);
+          },
+          children: button.title
+        },
+        index
+      );
+    }) }),
+    " ",
+    msg.event == "chatEnded" && msg.status == "failed" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          title: (/* @__PURE__ */ new Date()).toLocaleString(),
+          style: {
+            fontSize: 12,
+            color: "#888",
+            marginBottom: 4,
+            textAlign: "center"
+          },
+          children: [
+            "No team members are online at the moment.",
+            /* @__PURE__ */ jsx("br", {}),
+            " Please try again later."
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onEndChat, children: "End Chat" }) })
+    ] }),
+    msg.event == "chatEnded" && msg.status != "failed" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          title: (/* @__PURE__ */ new Date()).toLocaleString(),
+          style: {
+            fontSize: 12,
+            color: "#888",
+            marginBottom: 4,
+            textAlign: "center"
+          },
+          children: [
+            "Thank you for chatting!",
+            /* @__PURE__ */ jsx("br", {}),
+            " This conversation has ended."
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onEndChat, children: "End Chat" }) })
+    ] }),
+    msg.type == "text" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          textAlign: msg.$userType === "end_user" ? "right" : "left",
+          fontSize: 12,
+          color: vars.chatbot.window.timestampColor
+        },
+        children: timeText
+      }
+    )
+  ] });
+};
+export {
+  ChatbotMessage
+};

package/dist/Chatbot/EllipsisAnimation.d.ts

@@ -0,0 +1,2 @@
+declare const EllipsisLoader: () => import("react/jsx-runtime").JSX.Element;
+export default EllipsisLoader;