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

package/dist/Chatbot/Chat.js

@@ -1,165 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
-import { authenticate } from "./authenticate.js";
-import { useMessages } from "./store/messages.js";
-const companyId = process.env.CCAI_COMPANY_ID || "";
-const tenant = process.env.CCAI_TENANT_NAME || "";
-const host = process.env.CCAI_HOST || "";
-const COBROWSE_CONSENT_TEMPLATE = `
-  <script class="cobrowse-template" type="text/template">
-    <div class="cobrowse">
-      <div class="cobrowse-title">$title</div>
-      <div class="cobrowse-content">$content</div>
-      <div class="cobrowse-footer">
-        <button class="cobrowse-deny js-cobrowse-deny">$deny</button>
-        <button class="cobrowse-allow js-cobrowse-allow">$allow</button>
-      </div>
-    </div>
-  <\/script>
-`;
-function Chat() {
-  const clientRef = useRef(null);
-  const hasLoadedBefore = useRef(true);
-  const addMessages = useMessages((state) => state.addMessages);
-  const addMessage = useMessages((state) => state.addMessage);
-  const chatRef = useRef(null);
-  const isMounted = useRef(true);
-  useEffect(() => {
-    let messageHandler;
-    let identityHandler;
-    let chatUpdatedHandler;
-    let memberJoinedHandler;
-    let chatConnectedHandler;
-    async function initChat() {
-      const { Client, consoleLoggerHandler, Logger } = await import("@ujet/websdk-headless");
-      console.log("this", isMounted);
-      Logger.addHandler(consoleLoggerHandler);
-      clientRef.current = new Client({
-        companyId,
-        tenant,
-        cobrowse: {
-          enabled: true,
-          template: COBROWSE_CONSENT_TEMPLATE,
-          messages: {
-            confirmSessionTitle: "...",
-            confirmSessionContent: "...",
-            endSessionText: "...",
-            confirmRemoteControlTitle: "...",
-            confirmRemoteControlContent: "...",
-            confirmFullDeviceTitle: "...",
-            confirmFullDeviceContent: "...",
-            allowText: "...",
-            denyText: "..."
-          }
-        },
-        host,
-        authenticate
-      });
-      const menus = await clientRef.current?.getMenus();
-      try {
-        chatRef.current = await clientRef.current?.loadOngoingChat();
-        console.log("chat:", chatRef.current);
-        if (!chatRef.current) {
-          chatRef.current = await clientRef.current?.createChat(
-            menus?.menus[5].id
-          );
-        }
-      } catch (error) {
-        console.error("Error creating chat:", error);
-        chatRef.current = await clientRef.current?.createChat(
-          menus?.menus[5].id
-        );
-      }
-      console.log("this");
-      identityHandler = (identity) => {
-        if (!isMounted.current) return;
-        console.log("identity:", identity);
-      };
-      messageHandler = (msg) => {
-        console.log("new message:", msg);
-        console.log("addMessage:", msg);
-        addMessage(msg);
-      };
-      chatUpdatedHandler = (chat) => {
-        console.log("chat updated:", chat);
-      };
-      chatConnectedHandler = async () => {
-        console.log("connected");
-        const messagesFetched = await clientRef.current?.fetchMessages();
-        console.log("[messages]:", messagesFetched);
-        addMessages(messagesFetched || []);
-      };
-      memberJoinedHandler = (identity) => {
-        console.log("member joined:", identity);
-      };
-      console.log(isMounted.current);
-      clientRef.current?.on("authenticated", () => {
-        console.log("authenticated");
-      });
-      clientRef.current?.on("chat.ongoing", (chat) => {
-        if (!isMounted.current) return;
-        console.log("chat:", chat);
-      });
-      clientRef.current?.on("chat.connected", chatConnectedHandler);
-      clientRef.current?.on("chat.updated", chatUpdatedHandler);
-      clientRef.current?.on("chat.identity", identityHandler);
-      clientRef.current?.on("chat.message", messageHandler);
-      clientRef.current?.on("cobrowse.request", ({ from }) => {
-        console.log("request by", from);
-      });
-      clientRef.current?.on("chat.memberJoined", memberJoinedHandler);
-    }
-    if (hasLoadedBefore.current) {
-      console.log("Initial setup");
-      initChat();
-      hasLoadedBefore.current = false;
-    }
-    return () => {
-      isMounted.current = false;
-      console.log("Component unmounted. Cancelling pending async operations.");
-      if (clientRef.current) {
-        if (messageHandler)
-          clientRef.current.off("chat.message", messageHandler);
-        if (identityHandler)
-          clientRef.current.off("chat.identity", identityHandler);
-        clientRef.current.off("chat.connected", chatConnectedHandler);
-        clientRef.current.off("chat.updated", chatUpdatedHandler);
-        clientRef.current.off("chat.memberJoined", memberJoinedHandler);
-        if (typeof clientRef.current.destroyChat === "function") {
-          console.log("Destroying chat:", chatRef.current);
-          clientRef.current.destroyChat();
-        }
-      }
-    };
-  }, [addMessage, addMessages]);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h2", { children: "Chat" }),
-    /* @__PURE__ */ jsxs(
-      "form",
-      {
-        style: { marginTop: "1rem", display: "flex", gap: "0.5rem" },
-        onSubmit: async (e) => {
-          e.preventDefault();
-          const form = e.target;
-          const input = form.elements[0];
-          const message = input.value;
-          console.log("Sending message:", message);
-          try {
-            await clientRef.current?.sendTextMessage(message);
-            input.value = "";
-          } catch (error) {
-            console.error("Error sending message:", error);
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsx("input", { type: "text", name: "message", placeholder: "Type a message..." }),
-          /* @__PURE__ */ jsx("button", { type: "submit", children: "Send" })
-        ]
-      }
-    )
-  ] });
-}
-export {
-  Chat as default
-};

package/dist/Chatbot/ChatWindow.css.d.ts

@@ -1,18 +0,0 @@
-export declare const windowStyle: string;
-export declare const windowOpenStyle: string;
-export declare const windowBarStyle: string;
-export declare const chat_title: string;
-export declare const button_reset: string;
-export declare const arrowFill: string;
-export declare const inputStyle: string;
-export declare const sendButtonStyle: string;
-export declare const messagesContainerStyle: string;
-export declare const notificationStyle: string;
-export declare const messageStyle: string;
-export declare const inline_button_wrapper: string;
-export declare const inline_button: string;
-export declare const endChatButtonStyle: string;
-export declare const chatbotMenu: string;
-export declare const chatbotMenuItem: string;
-export declare const chatNetworkStatus: string;
-export declare const chatFinishDialog: string;

package/dist/Chatbot/ChatWindow.css.js

@@ -1,40 +0,0 @@
-import "./Chatbot.css.ts.vanilla.css.js";
-import '../assets/Chatbot/ChatWindow.css';/* empty css                              */
-var windowStyle = "_13n1jqk0";
-var windowOpenStyle = "_13n1jqk1";
-var windowBarStyle = "_13n1jqk2";
-var chat_title = "_13n1jqk3";
-var button_reset = "_13n1jqk4";
-var arrowFill = "_13n1jqk5";
-var inputStyle = "_13n1jqk6";
-var sendButtonStyle = "_13n1jqk7";
-var messagesContainerStyle = "_13n1jqk8";
-var notificationStyle = "_13n1jqk9";
-var messageStyle = "_13n1jqka";
-var inline_button_wrapper = "_13n1jqkb";
-var inline_button = "_13n1jqkc";
-var endChatButtonStyle = "_13n1jqkd";
-var chatbotMenu = "_13n1jqke";
-var chatbotMenuItem = "_13n1jqkf";
-var chatNetworkStatus = "_13n1jqkg";
-var chatFinishDialog = "_13n1jqkh";
-export {
-  arrowFill,
-  button_reset,
-  chatFinishDialog,
-  chatNetworkStatus,
-  chat_title,
-  chatbotMenu,
-  chatbotMenuItem,
-  endChatButtonStyle,
-  inline_button,
-  inline_button_wrapper,
-  inputStyle,
-  messageStyle,
-  messagesContainerStyle,
-  notificationStyle,
-  sendButtonStyle,
-  windowBarStyle,
-  windowOpenStyle,
-  windowStyle
-};

package/dist/Chatbot/ChatWindow.d.ts

@@ -1,30 +0,0 @@
-import { MessageResponse as BaseMessageResponse, HumanAgent } from '@ujet/websdk-headless';
-import { default as React } from 'react';
-
-interface MessageResponse extends BaseMessageResponse {
-    to_agent?: HumanAgent;
-}
-export interface ChatBubble {
-    id: string | number;
-    body: string;
-    sender?: string;
-    timestamp?: string;
-    isOwn?: boolean;
-}
-interface ChatWindowProps {
-    messages: MessageResponse[];
-    status?: string;
-    onSend: (msg: string) => void;
-    inputDisabled?: boolean;
-    onClose?: () => void;
-    endChat?: () => void;
-    showReconnect?: boolean;
-    virtualAgent?: {
-        avatar_url: string;
-        name: string;
-        id: string;
-    };
-    showAvatar?: boolean;
-}
-export declare const ChatWindow: React.FC<ChatWindowProps>;
-export {};

package/dist/Chatbot/ChatWindow.js

@@ -1,397 +0,0 @@
-"use client";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import clsx from "clsx";
-import React, { useRef, useEffect, Fragment as Fragment$1 } from "react";
-import ReactMarkdown from "react-markdown";
-import { useNetworkState, useMount } from "react-use";
-import remarkGfm from "remark-gfm";
-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";
-import { EllipsisIcon } from "./EllipsisIcon.js";
-import { useOpenChat } from "./store/chat.js";
-const ChatWindow = ({
-  messages,
-  status = "connected",
-  onSend,
-  inputDisabled = false,
-  onClose,
-  endChat = () => {
-    console.log("End chat");
-  },
-  showReconnect = false,
-  virtualAgent,
-  showAvatar = false
-}) => {
-  const [mounted, setMounted] = React.useState(false);
-  const [menuOpen, setMenuOpen] = React.useState(false);
-  const [showEndChatDialog, setShowEndChatDialog] = React.useState(false);
-  const state = useNetworkState();
-  const [input, setInput] = React.useState("");
-  const messagesEndRef = useRef(null);
-  const isOpen = useOpenChat((state2) => state2.isOpen);
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-  const handleSend = (e) => {
-    e.preventDefault();
-    if (input.trim()) {
-      onSend(input);
-      setInput("");
-    }
-  };
-  useMount(() => {
-    setMounted(true);
-  });
-  const project = process.env.CCAI_PROJECT_ID;
-  const isAxos = project === "axos";
-  const endUserBg = isAxos ? "#14263d" : "#323339";
-  const chatbotBg = isAxos ? "#E9F8FF" : "#EAE8E8";
-  return /* @__PURE__ */ jsxs("div", { className: clsx(windowStyle, isOpen && windowOpenStyle), children: [
-    /* @__PURE__ */ jsxs("div", { className: windowBarStyle, children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex middle", style: { paddingBlock: "6px" }, children: [
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: "https://www.axos.com/images/2xmVfQm5l0HWOKjgxQO1Iw/axb-assistant.svg",
-            style: { marginRight: 12 },
-            height: 18,
-            width: 18
-          }
-        ),
-        /* @__PURE__ */ jsx("h2", { className: chat_title, children: "Evo Virtual Assistant" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => {
-            setMenuOpen(!menuOpen);
-          },
-          style: {
-            border: "none",
-            background: "transparent",
-            marginLeft: "auto",
-            cursor: "pointer",
-            padding: 0,
-            display: "flex",
-            alignContent: "center"
-          },
-          children: /* @__PURE__ */ jsx(EllipsisIcon, { color: "#fff" })
-        }
-      ),
-      menuOpen && /* @__PURE__ */ jsx("ul", { className: clsx(chatbotMenu), children: /* @__PURE__ */ jsx("li", { className: chatbotMenuItem, children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setShowEndChatDialog(true);
-            setMenuOpen(false);
-          },
-          style: { width: "100%" },
-          children: "Finish chat"
-        }
-      ) }) }),
-      showEndChatDialog && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              background: "#00000080",
-              position: "fixed",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              zIndex: 999,
-              opacity: 0.75
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "dialog",
-          {
-            open: showEndChatDialog,
-            style: {
-              padding: "1rem",
-              borderRadius: 8,
-              background: "#fff",
-              color: "#000",
-              border: `1px solid ${endUserBg}`,
-              outline: "none",
-              maxWidth: "90%",
-              top: "25%",
-              marginInline: "auto",
-              zIndex: 1e3
-            },
-            children: /* @__PURE__ */ jsxs("form", { method: "dialog", className: chatFinishDialog, children: [
-              /* @__PURE__ */ jsx("p", { children: "Are you sure you want to end this chat?" }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: { display: "flex", gap: "1rem", marginTop: "1rem" },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        className: endChatButtonStyle,
-                        type: "submit",
-                        onClick: () => {
-                          endChat();
-                          setShowEndChatDialog(false);
-                        },
-                        children: "Yes"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        className: endChatButtonStyle,
-                        type: "button",
-                        onClick: () => {
-                          setShowEndChatDialog(false);
-                        },
-                        children: "No"
-                      }
-                    )
-                  ]
-                }
-              )
-            ] })
-          }
-        )
-      ] }),
-      onClose && /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: onClose,
-          className: button_reset,
-          "aria-label": "Close chat",
-          title: "Close",
-          children: /* @__PURE__ */ jsx(
-            "svg",
-            {
-              xmlns: "http://www.w3.org/2000/svg",
-              width: "24",
-              height: "24",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  className: arrowFill,
-                  d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
-                  fill: "#98DDFF"
-                }
-              )
-            }
-          )
-        }
-      )
-    ] }),
-    mounted && !state.online ? /* @__PURE__ */ jsx("div", { className: clsx(chatNetworkStatus), children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          color: "#d32f2f",
-          textAlign: "center",
-          padding: "8px 0",
-          fontWeight: 500
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              role: "img",
-              "aria-label": "disconnected",
-              style: { marginRight: 6 },
-              children: "⚠️"
-            }
-          ),
-          "You are currently disconnected. Please check your connection."
-        ]
-      }
-    ) }) : null,
-    /* @__PURE__ */ jsxs("div", { className: clsx(messagesContainerStyle), children: [
-      messages?.map((msg) => /* @__PURE__ */ jsxs(Fragment$1, { 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),
-        ["text", "markdown_template", "markdown"].includes(msg.type) && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: messageStyle,
-            style: {
-              textAlign: msg.$userType == "end_user" ? "right" : "left",
-              alignSelf: msg.$userType == "end_user" ? "flex-end" : "flex-start",
-              background: msg.$userType == "end_user" ? endUserBg : chatbotBg,
-              color: msg.$userType == "end_user" ? "#fff" : "#1F1F1F",
-              boxShadow: msg.$userType == "end_user" ? "0 1px 4px #b3e0ff55" : void 0
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    fontSize: 13,
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 4
-                  },
-                  children: [
-                    msg.$userType == "virtual_agent" && /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        style: {
-                          display: "flex",
-                          // justifyContent: "center",
-                          alignItems: "center",
-                          gap: "8px"
-                        },
-                        children: [
-                          showAvatar && /* @__PURE__ */ jsx(
-                            "img",
-                            {
-                              width: 24,
-                              height: 24,
-                              src: virtualAgent?.avatar_url,
-                              alt: "agent avatar"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("strong", { children: virtualAgent?.name })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      ReactMarkdown,
-                      {
-                        remarkPlugins: [[remarkGfm, { singleTilde: false }]],
-                        components: {
-                          p: ({ ...props }) => /* @__PURE__ */ jsx(
-                            "p",
-                            {
-                              style: { margin: 0, fontSize: "inherit" },
-                              title: new Date(msg.$timestamp).toLocaleString(),
-                              ...props
-                            }
-                          )
-                        },
-                        children: msg.content
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { style: { fontSize: 10, color: "#888", marginTop: 2 } })
-            ]
-          },
-          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) => {
-          const lastItem = msg.buttons && msg.buttons?.length - 1;
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: inline_button,
-              style: {
-                borderRadius: "0px",
-                borderTopLeftRadius: [0].includes(index) ? 8 : 0,
-                borderTopRightRadius: [0].includes(index) ? 8 : 0,
-                borderBottomLeftRadius: [lastItem].includes(index) ? 8 : 0,
-                borderBottomRightRadius: [lastItem].includes(index) ? 8 : 0
-              },
-              onClick: () => {
-                onSend(button?.title);
-              },
-              children: button.title
-            },
-            index
-          );
-        }) }),
-        msg.event == "chatEnded" && /* @__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: endChat, children: "End Chat" }) })
-        ] })
-      ] }, msg.$index)),
-      showReconnect && /* @__PURE__ */ jsx(
-        "button",
-        {
-          style: { margin: "12px auto", display: "block" },
-          onClick: () => {
-          },
-          children: "Reconnect Chat"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit: handleSend,
-        style: {
-          borderTop: "1px solid #eee",
-          display: "flex",
-          gap: 8
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              value: input,
-              onChange: (e) => setInput(e.target.value),
-              placeholder: "Ask something...",
-              className: inputStyle,
-              autoFocus: true,
-              disabled: inputDisabled || status !== "connected"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: clsx(sendButtonStyle, input.trim().length > 0 && "active"),
-              type: "submit",
-              disabled: inputDisabled || status !== "connected" || !input.trim(),
-              children: /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  id: "send-icon",
-                  width: 24,
-                  height: 24,
-                  children: [
-                    /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }),
-                    /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0z", fill: "none" })
-                  ]
-                }
-              )
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
-export {
-  ChatWindow
-};

package/dist/Chatbot/Chatbot.css.d.ts

@@ -1,2 +0,0 @@
-export declare const chatbotAXB: string;
-export declare const chatbotUFB: string;

package/dist/Chatbot/Chatbot.css.js

@@ -1,6 +0,0 @@
-var chatbotAXB = "_1hpv6vm0";
-var chatbotUFB = "_1hpv6vm1";
-export {
-  chatbotAXB,
-  chatbotUFB
-};

package/dist/Chatbot/Chatbot.css.ts.vanilla.css.js

@@ -1 +0,0 @@
-

package/dist/Chatbot/Chatbot.d.ts

@@ -1,6 +0,0 @@
-export type ChatbotProps = {
-    project?: "axos" | "ufb";
-    debug?: boolean;
-    env?: "dev" | "qa" | "uat" | "prod";
-};
-export declare const Chatbot: (props: ChatbotProps) => import("react/jsx-runtime").JSX.Element;