@axos-web-dev/shared-components 1.0.100-dev.5 → 1.0.100-dev.51

package/dist/Chatbot/Chatbot.js

@@ -0,0 +1,257 @@
+"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 { 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 } = 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 brandMap = /* @__PURE__ */ new Map([
+    ["axos", 1],
+    ["ufb", 3]
+  ]);
+  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 === "dev" ? "uat" : 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);
+    addMessage(message);
+  };
+  const onChatTypingStartedHandler = async (identity) => {
+    console.log("Typing started by:", identity);
+  };
+  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 onChatConnectedHandler = async () => {
+    setStatus("connected");
+    console.log("connected");
+    const messages2 = await clientRef.current?.fetchMessages();
+    if (messages2) {
+      addMessages(messages2);
+    }
+  };
+  const registerEventHandlers = () => {
+    clientRef.current?.on("chat.ongoing", onChatOngoingHandler);
+    clientRef.current?.on("chat.message", onChatMessageHandler);
+    clientRef.current?.on("chat.typingStarted", onChatTypingStartedHandler);
+    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.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.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.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
+      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 = (msg) => {
+    console.log("Sending message:", msg);
+    clientRef.current?.sendTextMessage(msg);
+  };
+  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);
+      reset();
+    }
+  };
+  useMount(async () => {
+    console.log("Chatbot mounted");
+    if (isMountedRef.current) return;
+    isMountedRef.current = true;
+    await createClient();
+  });
+  useEffect(() => {
+    if (menusLoaded && pendingStart && !hasStarted) {
+      startChat();
+      setHasStarted(true);
+      setPendingStart(false);
+    }
+  }, [menusLoaded, pendingStart, hasStarted]);
+  useUnmount(() => {
+    console.log("Chatbot unmounted");
+    deregisterEventHandlers();
+    isMountedRef.current = false;
+    hasLoadedBefore.current = true;
+    reset();
+    setHasStarted(false);
+    setStatus("idle");
+    clearMessages();
+    clientRef.current?.destroy();
+    clientRef.current?.destroyChat();
+    clientRef.current = null;
+  });
+  return /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
+    /* @__PURE__ */ jsx(Bubble, { onClick: handleClick }),
+    /* @__PURE__ */ jsx(
+      ChatWindow,
+      {
+        status,
+        virtualAgent: agent_virtual.current,
+        messages,
+        onSend: onSendMessage,
+        endChat: onEndChat
+      }
+    )
+  ] });
+};
+export {
+  Chatbot
+};

package/dist/Chatbot/EllipsisAnimation.d.ts

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

package/dist/Chatbot/EllipsisAnimation.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+const loadingContainerVariants = {
+  start: {
+    transition: {
+      staggerChildren: 0.2
+      // Delay between each dot's animation
+    }
+  },
+  end: {
+    transition: {
+      staggerChildren: 0.2
+    }
+  }
+};
+const loadingCircleVariants = {
+  start: {
+    y: "0%"
+  },
+  end: {
+    y: "100%"
+    // Move down by 100% of its height
+  }
+};
+const loadingTransition = {
+  duration: 0.6,
+  repeat: Infinity,
+  repeatType: "reverse",
+  // Reverse the animation direction
+  ease: "easeInOut"
+};
+const EllipsisLoader = () => {
+  const project = process.env.CCAI_PROJECT_ID;
+  const isAxos = project === "axos";
+  const endUserBg = isAxos ? "#14263d" : "#323339";
+  return /* @__PURE__ */ jsxs(
+    motion.svg,
+    {
+      width: "30",
+      height: "15",
+      viewBox: "0 0 100 50",
+      variants: loadingContainerVariants,
+      initial: "start",
+      animate: "end",
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.circle,
+          {
+            cx: "20",
+            cy: "15",
+            r: "8",
+            fill: endUserBg,
+            variants: loadingCircleVariants,
+            transition: loadingTransition
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.circle,
+          {
+            cx: "50",
+            cy: "15",
+            r: "8",
+            fill: endUserBg,
+            variants: loadingCircleVariants,
+            transition: loadingTransition
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.circle,
+          {
+            cx: "80",
+            cy: "15",
+            r: "8",
+            fill: endUserBg,
+            variants: loadingCircleVariants,
+            transition: loadingTransition
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  EllipsisLoader as default
+};

package/dist/Chatbot/EllipsisIcon.d.ts

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

package/dist/Chatbot/EllipsisIcon.js

@@ -0,0 +1,19 @@
+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

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

package/dist/Chatbot/authenticate.js

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,8 @@
+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';

package/dist/Chatbot/index.js

@@ -0,0 +1,39 @@
+"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, autoResize, 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";
+export {
+  Bubble,
+  ChatWindow,
+  Chatbot,
+  arrowFill,
+  autoResize,
+  bubbleWrapper,
+  button_reset,
+  chatFinishDialog,
+  chatNetworkStatus,
+  chat_title,
+  chatbotAXB,
+  chatbotMenu,
+  chatbotMenuItem,
+  chatbotUFB,
+  endChatButtonStyle,
+  inline_button,
+  inline_button_wrapper,
+  inputStyle,
+  messageStyle,
+  messagesContainerStyle,
+  notificationStyle,
+  sendButtonStyle,
+  svgFill,
+  useMessages,
+  useOpenChat,
+  windowBarStyle,
+  windowOpenStyle,
+  windowStyle
+};

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

@@ -0,0 +1,10 @@
+interface OpenChatState {
+    isOpen: boolean;
+    hasOpenedOnce: 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

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

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,27 @@
+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;
+}
+export interface ChatMessage {
+    id: string;
+    body: string;
+    sender?: string;
+    timestamp?: string;
+}
+export declare function useHeadlessChat({ companyId, tenant, host, getToken, projectId, debug, menuOption, }: 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 {};