@axos-web-dev/shared-components 1.0.77-patch.33 → 1.0.77-patch.34

package/dist/Chatbot/Chatbot.js

@@ -1,43 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { authenticate } from "./authenticate.js";
-import { Bubble } from "./Bubble.js";
-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",
-    env_project: props.env || "prod"
-  });
-  return /* @__PURE__ */ jsxs("div", { className: props.project === "ufb" ? chatbotUFB : chatbotAXB, children: [
-    /* @__PURE__ */ jsx(Bubble, {}),
-    /* @__PURE__ */ jsx(
-      ChatWindow,
-      {
-        status,
-        onClose: close,
-        messages,
-        onSend: function(msg) {
-          sendMessage(msg);
-        },
-        endChat,
-        virtualAgent,
-        showReconnect
-      }
-    )
-  ] });
-};
-export {
-  Chatbot
-};

package/dist/Chatbot/EllipsisIcon.d.ts

@@ -1,4 +0,0 @@
-export declare const EllipsisIcon: ({ size, color }: {
-    size?: number | undefined;
-    color?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/Chatbot/EllipsisIcon.js

@@ -1,19 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-const EllipsisIcon = ({ size = 24, color = "currentColor" }) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "2", fill: color }),
-      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", fill: color }),
-      /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "2", fill: color })
-    ]
-  }
-);
-export {
-  EllipsisIcon
-};

package/dist/Chatbot/authenticate.d.ts

@@ -1,3 +0,0 @@
-export declare const authenticate: () => Promise<{
-    token: any;
-}>;

package/dist/Chatbot/authenticate.js

@@ -1,16 +0,0 @@
-const AUTH_URL = process.env.AUTH_CHAT_URL || "http://localhost:3000/api/auth/token";
-const authenticate = async () => {
-  const res = await fetch(AUTH_URL, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json"
-    }
-  });
-  const data = await res.json();
-  return {
-    token: data.token
-  };
-};
-export {
-  authenticate
-};

package/dist/Chatbot/index.d.ts

@@ -1,9 +0,0 @@
-export * from './Bubble';
-export * from './Bubble.css';
-export * from './Chatbot';
-export * from './Chatbot.css';
-export * from './ChatWindow';
-export * from './ChatWindow.css';
-export * from './store/chat';
-export * from './store/messages';
-export * from './useHeadlessChat';

package/dist/Chatbot/index.js

@@ -1,40 +0,0 @@
-"use client";
-import { Bubble } from "./Bubble.js";
-import { bubbleWrapper, svgFill } from "./Bubble.css.js";
-import { Chatbot } from "./Chatbot.js";
-import { chatbotAXB, chatbotUFB } from "./Chatbot.css.js";
-import { ChatWindow } from "./ChatWindow.js";
-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";
-import { useOpenChat } from "./store/chat.js";
-import { useMessages } from "./store/messages.js";
-import { useHeadlessChat } from "./useHeadlessChat.js";
-export {
-  Bubble,
-  ChatWindow,
-  Chatbot,
-  arrowFill,
-  bubbleWrapper,
-  button_reset,
-  chatFinishDialog,
-  chatNetworkStatus,
-  chat_title,
-  chatbotAXB,
-  chatbotMenu,
-  chatbotMenuItem,
-  chatbotUFB,
-  endChatButtonStyle,
-  inline_button,
-  inline_button_wrapper,
-  inputStyle,
-  messageStyle,
-  messagesContainerStyle,
-  notificationStyle,
-  sendButtonStyle,
-  svgFill,
-  useHeadlessChat,
-  useMessages,
-  useOpenChat,
-  windowBarStyle,
-  windowOpenStyle,
-  windowStyle
-};

package/dist/Chatbot/store/chat.d.ts

@@ -1,9 +0,0 @@
-interface OpenChatState {
-    isOpen: boolean;
-    toggle: () => void;
-    open: () => void;
-    close: () => void;
-    reset: () => void;
-}
-export declare const useOpenChat: import('zustand').UseBoundStore<import('zustand').StoreApi<OpenChatState>>;
-export {};

package/dist/Chatbot/store/chat.js

@@ -1,11 +0,0 @@
-import { create } from "zustand";
-const useOpenChat = create((set) => ({
-  isOpen: false,
-  toggle: () => set((state) => ({ isOpen: !state.isOpen })),
-  open: () => set({ isOpen: true }),
-  close: () => set({ isOpen: false }),
-  reset: () => set({ isOpen: false })
-}));
-export {
-  useOpenChat
-};

package/dist/Chatbot/store/messages.d.ts

@@ -1,15 +0,0 @@
-import { MessageResponse } from '@ujet/websdk-headless';
-
-interface MessageStore {
-    messages: MessageResponse[];
-    addMessage: (message: MessageResponse) => void;
-    removeMessage: (id: string) => void;
-    addMessages: (newMessages: MessageResponse[]) => void;
-    clearMessages: () => void;
-}
-export interface Message {
-    id: string;
-    text: string;
-}
-export declare const useMessages: import('zustand').UseBoundStore<import('zustand').StoreApi<MessageStore>>;
-export {};

package/dist/Chatbot/store/messages.js

@@ -1,13 +0,0 @@
-import { create } from "zustand";
-const useMessages = create((set) => ({
-  messages: [],
-  addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })),
-  removeMessage: (id) => set((state) => ({
-    messages: state.messages.filter((msg) => msg.id !== id)
-  })),
-  addMessages: (newMessages) => set((state) => ({ messages: [...state.messages, ...newMessages] })),
-  clearMessages: () => set({ messages: [] })
-}));
-export {
-  useMessages
-};

package/dist/Chatbot/useHeadlessChat.d.ts

@@ -1,28 +0,0 @@
-import { TokenResponse } from '@ujet/websdk-headless';
-
-interface UseHeadlessChatOptions {
-    companyId: string;
-    tenant: string;
-    host: string;
-    getToken: () => Promise<TokenResponse>;
-    channelId?: string;
-    projectId?: "axos" | "" | "ufb" | string;
-    debug?: boolean;
-    menuOption?: string;
-    env_project?: "dev" | "qa" | "uat" | "prod";
-}
-export interface ChatMessage {
-    id: string;
-    body: string;
-    sender?: string;
-    timestamp?: string;
-}
-export declare function useHeadlessChat({ companyId, tenant, host, getToken, projectId, debug, menuOption, env_project, }: UseHeadlessChatOptions): {
-    status: "error" | "idle" | "connected" | "connecting" | "finished";
-    sendMessage: (body: string) => Promise<void>;
-    showReconnect: boolean;
-    setShowReconnect: import('react').Dispatch<import('react').SetStateAction<boolean>>;
-    endChat: () => Promise<void>;
-    virtualAgent: any;
-};
-export {};

package/dist/Chatbot/useHeadlessChat.js

@@ -1,241 +0,0 @@
-"use client";
-import { useState, useRef, useCallback, useEffect } from "react";
-import { useLocation } from "react-use";
-import { useMessages } from "./store/messages.js";
-const brandMap = /* @__PURE__ */ new Map([
-  ["axos", 1],
-  ["", 2],
-  ["ufb", 3]
-]);
-function useHeadlessChat({
-  companyId,
-  tenant,
-  host,
-  getToken,
-  projectId = "axos",
-  debug = false,
-  menuOption = "Support Virtual Agent",
-  env_project = "prod"
-}) {
-  const { hostname } = useLocation();
-  const addMessage = useMessages((state) => state.addMessage);
-  const addMessages = useMessages((state) => state.addMessages);
-  const clearMessages = useMessages((state) => state.clearMessages);
-  const [showReconnect, setShowReconnect] = useState(false);
-  const [status, setStatus] = useState("idle");
-  const chatRef = useRef(null);
-  const clientRef = useRef(null);
-  const isMountedRef = useRef(true);
-  const hasLoadedBefore = useRef(true);
-  const menuRef = useRef({ menus: [] });
-  const sendMessage = useCallback(async (body) => {
-    if (chatRef.current) {
-      await clientRef.current?.sendTextMessage(body);
-    }
-  }, []);
-  const endChat = useCallback(async () => {
-    if (chatRef.current) {
-      await clientRef.current?.finishChat();
-      clearMessages();
-      clientRef.current?.createChat(
-        menuRef.current.menus.find((menu) => menu.name === menuOption)?.id,
-        {
-          custom_data: {
-            unsigned: {
-              facingBrandId: {
-                label: "facingBrandId",
-                value: `${brandMap.get(projectId) || 1}`
-              },
-              channel: {
-                label: "channel",
-                value: "in_web"
-              },
-              user_auth: {
-                label: "user_auth",
-                value: "false"
-              },
-              env: {
-                label: "env",
-                value: env_project
-              }
-            }
-          }
-        }
-      );
-    }
-  }, [clearMessages, env_project, menuOption, projectId]);
-  useEffect(() => {
-    let messageHandler;
-    let chatReadyHandler;
-    let chatEndedHandler;
-    let chatConnectedHandler;
-    let chatDisconnectedHandler;
-    let memberLeftHandler;
-    let memberJoinedHandler;
-    let startTypingHandler;
-    let stopTypingHandler;
-    let chatTimeoutHandler;
-    async function init() {
-      setStatus("connecting");
-      const { Client, Logger, consoleLoggerHandler } = await import("@ujet/websdk-headless");
-      if (debug) Logger.addHandler(consoleLoggerHandler);
-      try {
-        clientRef.current = new Client({
-          companyId,
-          tenant,
-          host,
-          authenticate: getToken
-        });
-        if (debug) console.log("clientRef:", clientRef.current);
-      } catch (e) {
-        console.error("Error creating client:", e);
-        if (isMountedRef.current) setStatus("error");
-        return;
-      }
-      menuRef.current = await clientRef.current?.getMenus();
-      if (debug) console.log("channelId:", menuRef.current);
-      if (debug)
-        console.log(
-          "channelId:",
-          menuRef.current?.menus.find((menu) => menu.name === menuOption)?.id
-        );
-      const custom_data = {
-        unsigned: {
-          facingBrandId: {
-            label: "facingBrandId",
-            value: `${brandMap.get(projectId) || 1}`
-          },
-          channel: {
-            label: "channel",
-            value: "in_web"
-          },
-          user_auth: {
-            label: "user_auth",
-            value: "false"
-          },
-          env: {
-            label: "env",
-            value: env_project
-          }
-        }
-      };
-      try {
-        chatRef.current = await clientRef.current?.loadOngoingChat();
-        if (chatRef.current != null) {
-          chatRef.current = await clientRef.current?.resumeChat(
-            chatRef.current?.state?.id
-          );
-          if (debug) console.log("Resumed chatRef:", chatRef.current);
-        } else {
-          chatRef.current = await clientRef.current?.createChat(
-            menuRef.current.menus.find((menu) => menu.name === menuOption)?.id,
-            {
-              custom_data
-            }
-          );
-          if (debug) console.log("chatRef:", chatRef.current);
-        }
-      } catch (error) {
-        console.error("Error creating chat:", error);
-      }
-      messageHandler = (msg) => {
-        if (debug) console.log("Received message:", msg);
-        addMessage(msg);
-      };
-      chatReadyHandler = () => {
-        console.log("Chat is ready");
-      };
-      chatEndedHandler = () => {
-        console.log("Chat has ended");
-        setStatus("finished");
-      };
-      chatConnectedHandler = async () => {
-        console.log("Chat connected");
-        setStatus("connected");
-        try {
-          const messagesFetched = await chatRef.current?.fetchMessages();
-          if (debug) console.log("[messages]:", messagesFetched);
-          addMessages(messagesFetched || []);
-        } catch (error) {
-          console.error("Error fetching messages:", error);
-        }
-      };
-      startTypingHandler = (identity) => {
-        console.log("start typing: ", identity);
-      };
-      stopTypingHandler = (identity) => {
-        console.log("stop typing: ", identity);
-      };
-      memberLeftHandler = (identity) => {
-        console.log("Member has left the chat:  ", identity);
-      };
-      memberJoinedHandler = (identity) => {
-        console.log("Member has joined the chat: ", identity);
-      };
-      chatDisconnectedHandler = () => {
-        console.log("Chat disconnected");
-        setStatus("idle");
-      };
-      chatTimeoutHandler = () => {
-        console.log("Chat timeout");
-      };
-      clientRef.current?.on("ready", chatReadyHandler);
-      clientRef.current?.on("chat.connected", chatConnectedHandler);
-      clientRef.current?.on("chat.message", messageHandler);
-      clientRef.current?.on("chat.memberLeft", memberLeftHandler);
-      clientRef.current?.on("chat.memberJoined", memberJoinedHandler);
-      clientRef.current?.on("chat.typingStarted", startTypingHandler);
-      clientRef.current?.on("chat.typingEnded", stopTypingHandler);
-      clientRef.current?.on("chat.disconnected", chatDisconnectedHandler);
-      clientRef.current?.on("chat.ended", chatEndedHandler);
-      clientRef.current?.on("chat.timeout", chatTimeoutHandler);
-    }
-    if (hasLoadedBefore.current) {
-      if (debug) console.log("Initializing chat...");
-      init();
-      hasLoadedBefore.current = false;
-    }
-    return () => {
-      isMountedRef.current = false;
-      if (debug)
-        console.log(
-          "Component unmounted. Cancelling pending async operations."
-        );
-      chatRef.current = null;
-      clientRef.current?.off("ready", chatReadyHandler);
-      clientRef.current?.off("chat.message", messageHandler);
-      clientRef.current?.off("chat.connected", chatConnectedHandler);
-      clientRef.current?.off("chat.ended", chatEndedHandler);
-      clientRef.current?.off("chat.memberLeft", memberLeftHandler);
-      clientRef.current?.off("chat.memberJoined", memberJoinedHandler);
-      clientRef.current?.off("chat.typingStarted", startTypingHandler);
-      clientRef.current?.off("chat.typingEnded", stopTypingHandler);
-      clientRef.current?.off("chat.disconnected", chatDisconnectedHandler);
-      clientRef.current?.off("chat.timeout", chatTimeoutHandler);
-      clientRef.current?.destroyChat();
-      clientRef.current = null;
-    };
-  }, [
-    companyId,
-    tenant,
-    host,
-    getToken,
-    addMessage,
-    addMessages,
-    debug,
-    projectId,
-    menuOption,
-    hostname
-  ]);
-  return {
-    status,
-    sendMessage,
-    showReconnect,
-    setShowReconnect,
-    endChat,
-    virtualAgent: chatRef.current?.state.virtual_agent
-  };
-}
-export {
-  useHeadlessChat
-};

package/dist/assets/Chatbot/Bubble.css

@@ -1,51 +0,0 @@
-@keyframes fade-in-bounce {
-  0% {
-    transform: translate3d(100px,100px,0) scale(0.3);
-    opacity: 0;
-  }
-  50% {
-    transform: translate3d(-10px,-10px,0) scale(1.1);
-    opacity: 1;
-  }
-  100% {
-    transform: translate3d(0,0,0) scale(1);
-    opacity: 1;
-  }
-}
-@keyframes pulse {
-  0%,100% {
-    box-shadow: 0 0 0 0 rgba(0,123,255,0.4);
-  }
-  50% {
-    box-shadow: 0 0 0 10px rgba(0,123,255,0);
-  }
-}
-._7u9pv30 {
-  align-items: center;
-  animation: fade-in-bounce 2s cubic-bezier(0.65, 0.25, 0.14, 0.93) forwards, pulse 4.5s 0.5s;
-  background-color: #14263d;
-  border-radius: 50%;
-  bottom: 16px;
-  cursor: pointer;
-  display: grid;
-  font-family: var(--main-font-family);
-  height: 68px;
-  line-height: 1;
-  outline: 2px solid #98DDFF;
-  place-items: center;
-  position: fixed;
-  right: 16px;
-  width: 68px;
-  z-index: 9999;
-}
-._1hpv6vm1 ._7u9pv30 {
-  animation: fade-in-bounce 2s cubic-bezier(0.65, 0.25, 0.14, 0.93) forwards;
-  background-color: #60707A;
-  outline: none;
-}
-._7u9pv31 {
-  fill: #98DDFF;
-}
-._1hpv6vm1 ._7u9pv31 {
-  fill: #FFFFFF;
-}