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

package/dist/Chatbot/useHeadlessChat.js

@@ -1,157 +0,0 @@
-"use client";
-import { useState, useRef, useCallback, useEffect } from "react";
-import { useMessages } from "./store/messages.js";
-function useHeadlessChat({
-  companyId,
-  tenant,
-  host,
-  getToken,
-  projectId = "axos",
-  debug = false
-}) {
-  const addMessage = useMessages((state) => state.addMessage);
-  const addMessages = useMessages((state) => state.addMessages);
-  const [status, setStatus] = useState("idle");
-  const chatRef = useRef(null);
-  const clientRef = useRef(null);
-  const isMountedRef = useRef(true);
-  const hasLoadedBefore = useRef(true);
-  const sendMessage = useCallback(async (body) => {
-    if (chatRef.current) {
-      await clientRef.current?.sendTextMessage(body);
-    }
-  }, []);
-  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;
-      }
-      const menus = await clientRef.current?.getMenus();
-      if (debug) console.log("channelId:", menus);
-      if (debug) console.log("channelId:", menus?.menus[5].id);
-      try {
-        chatRef.current = await clientRef.current?.createChat(
-          menus.menus[5].id
-          // {
-          //   custom_data: {
-          //     unsigned: {
-          //       facingBrandId: brandMap.get(projectId) || 1,
-          //     },
-          //   },
-          // }
-        );
-        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");
-        const messagesFetched = await chatRef.current?.fetchMessages();
-        if (debug) console.log("[messages]:", messagesFetched);
-        addMessages(messagesFetched || []);
-      };
-      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
-  ]);
-  return { status, sendMessage };
-}
-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;
-}

package/dist/assets/Chatbot/ChatWindow.css

@@ -1,157 +0,0 @@
-._13n1jqk0 {
-  background: #FFF;
-  border-radius: 10px;
-  bottom: 100px;
-  box-shadow: -4px -4px 60px 5px rgba(0, 0, 0, 0.3);
-  display: flex;
-  flex-direction: column;
-  height: min(calc(100vh - 112px), 560px);
-  max-width: 100%;
-  outline: none;
-  overflow: hidden;
-  position: fixed;
-  right: 24px;
-  transform: translate(calc(0px - 64px / 2), calc(64px / 2 + 24px)) scale(0);
-  transition: transform 0.3s, visibility 0.3s;
-  transform-origin: bottom right;
-  width: min(calc(100vw - 50px), 350px);
-  z-index: 10000;
-}
-._13n1jqk1 {
-  transform: translate(0px) scale(1);
-  transition: transform 0.3s;
-  visibility: visible;
-}
-._13n1jqk2 {
-  align-items: center;
-  background-color: #14263d;
-  display: flex;
-  justify-content: space-between;
-  min-height: 50px;
-  padding-inline: 18px;
-}
-._1hpv6vm1 ._13n1jqk2 {
-  background-color: #60707A;
-}
-._13n1jqk3 {
-  color: #FFF;
-  font: 700 18px/1.5 var(--header-font-family);
-  line-height: 1.15;
-}
-._13n1jqk4 {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  line-height: 1;
-  margin-left: 8px;
-  padding: 0;
-}
-._13n1jqk5 {
-  fill: #98DDFF;
-}
-._1hpv6vm1 ._13n1jqk5 {
-  fill: #FFFFFF;
-}
-._13n1jqk6 {
-  border: none;
-  color: #1F1F1F;
-  flex: 1;
-  font-family: var(--header-font-family);
-  font-size: 13px;
-  opacity: 0.7;
-  outline: none;
-  padding: 20px 0 20px 20px;
-}
-._13n1jqk6::placeholder {
-  color: rgba(31,31,31,.38);
-}
-._1hpv6vm1 ._13n1jqk6 {
-  font-family: var(--main-font-family);
-}
-._1hpv6vm1 ._13n1jqk6::placeholder {
-  color: rgba(31,31,31,.58);
-}
-._13n1jqk7 {
-  padding-inline: 20px;
-  background: #fafafa;
-  border: none;
-}
-._13n1jqk7:hover {
-  background: #E9F8FF;
-  cursor: pointer;
-}
-._1hpv6vm1 ._13n1jqk7:hover {
-  background: #eae8e8;
-}
-._13n1jqk7 svg {
-  fill: rgba(31,31,31,.38);
-}
-._13n1jqk7.active svg {
-  fill: #1e3860;
-}
-._1hpv6vm1 ._13n1jqk7.active svg {
-  fill: #e18357;
-}
-._13n1jqk8 {
-  background: #f9f9f9;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 8px;
-  overflow-y: auto;
-  padding: 1rem;
-  scrollbar-color: #ccc transparent;
-}
-._13n1jqk9 {
-  color: #888;
-  font-size: 10px;
-  margin-bottom: 4px;
-  text-align: center;
-}
-._13n1jqka {
-  border-radius: 8px;
-  margin-bottom: 8px;
-  max-width: 93%;
-  padding: 8px 12px;
-}
-._13n1jqka ul {
-  padding-left: 24px;
-}
-._13n1jqkb {
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 0 1px 4px #b3e0ff55;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 8px;
-}
-._13n1jqkc {
-  font-size: 12px;
-  text-align: left;
-  background: #fff;
-  color: #1e3860;
-  cursor: pointer;
-}
-._13n1jqkc:hover {
-  background: #f0f0f0;
-}
-._1hpv6vm1 ._13n1jqkc {
-  color: #323339;
-}
-._13n1jqkd {
-  background: #1e629a;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  font-size: 12px;
-  padding: 6px 12px;
-  border-radius: 4px;
-  text-align: center;
-}
-._13n1jqkd:hover {
-  opacity: 0.8;
-}
-._1hpv6vm1 ._13n1jqkd {
-  background: #e18357;
-  color: #323339;
-}