@axos-web-dev/shared-components 1.0.99-sectionSpacerRemoved.2 → 1.0.100-dev.1

package/dist/Chatbot/Bubble.css.js

@@ -0,0 +1,9 @@
+/* empty css                          */
+var bubbleWrapper = "_7u9pv30";
+var bubbleCircle = "_7u9pv31";
+var closeIcon = "_7u9pv32";
+export {
+  bubbleCircle,
+  bubbleWrapper,
+  closeIcon
+};

package/dist/Chatbot/Bubble.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+
+export declare const Bubble: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/Chatbot/Bubble.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { bubbleWrapper, bubbleCircle, closeIcon } from "./Bubble.css.js";
+import { useOpenChat } from "./store/chat.js";
+const Bubble = ({ children }) => {
+  const isOpen = useOpenChat((state) => state.isOpen);
+  const toggle = useOpenChat((state) => state.toggle);
+  return /* @__PURE__ */ jsxs("div", { className: clsx(bubbleWrapper), children: [
+    /* @__PURE__ */ jsx("div", { className: clsx("bubble-circle", bubbleCircle), onClick: toggle, children: !isOpen ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: "Evo, Virtual Financial Assistant",
+        src: "data:image/png;base64,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"
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: clsx("close-icon", closeIcon), children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }),
+          /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0z", fill: "none" })
+        ]
+      }
+    ) }) }),
+    children
+  ] });
+};
+export {
+  Bubble
+};

package/dist/Chatbot/Chat.d.ts

@@ -0,0 +1 @@
+export default function Chat(): import("react/jsx-runtime").JSX.Element;

package/dist/Chatbot/Chat.js

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

@@ -0,0 +1,7 @@
+export declare const windowStyle: string;
+export declare const windowOpenStyle: string;
+export declare const windowBarStyle: string;
+export declare const inputStyle: string;
+export declare const sendButtonStyle: string;
+export declare const messagesContainerStyle: string;
+export declare const messageStyle: string;

package/dist/Chatbot/ChatWindow.css.js

@@ -0,0 +1,17 @@
+/* empty css                              */
+var windowStyle = "_13n1jqk0";
+var windowOpenStyle = "_13n1jqk1";
+var windowBarStyle = "_13n1jqk2";
+var inputStyle = "_13n1jqk3";
+var sendButtonStyle = "_13n1jqk4";
+var messagesContainerStyle = "_13n1jqk5";
+var messageStyle = "_13n1jqk6";
+export {
+  inputStyle,
+  messageStyle,
+  messagesContainerStyle,
+  sendButtonStyle,
+  windowBarStyle,
+  windowOpenStyle,
+  windowStyle
+};

package/dist/Chatbot/ChatWindow.d.ts

@@ -0,0 +1,23 @@
+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;
+}
+export declare const ChatWindow: React.FC<ChatWindowProps>;
+export {};

package/dist/Chatbot/ChatWindow.js

@@ -0,0 +1,261 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import React, { useRef, useEffect, Fragment } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { windowStyle, windowOpenStyle, windowBarStyle, messagesContainerStyle, inputStyle, sendButtonStyle } from "./ChatWindow.css.js";
+import { useOpenChat } from "./store/chat.js";
+const ChatWindow = ({
+  messages,
+  status = "connected",
+  onSend,
+  inputDisabled = false,
+  onClose,
+  endChat = () => {
+    console.log("End chat");
+  }
+}) => {
+  const [input, setInput] = React.useState("");
+  const messagesEndRef = useRef(null);
+  const isOpen = useOpenChat((state) => state.isOpen);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const handleSend = (e) => {
+    e.preventDefault();
+    if (input.trim()) {
+      onSend(input);
+      setInput("");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx(windowStyle, isOpen && windowOpenStyle), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx(windowBarStyle), children: [
+      /* @__PURE__ */ jsx("b", { children: "Chat" }),
+      onClose && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClose,
+          style: {
+            marginLeft: 8,
+            background: "transparent",
+            border: "none",
+            fontSize: 18,
+            cursor: "pointer",
+            color: "#fff",
+            padding: 0,
+            lineHeight: 1
+          },
+          "aria-label": "Close chat",
+          title: "Close",
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              height: "24px",
+              viewBox: "0 -960 960 960",
+              width: "24px",
+              fill: "#faa74a",
+              children: /* @__PURE__ */ jsx("path", { d: "M360-200v-80h264L160-744l56-56 464 464v-264h80v400H360Z" })
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: clsx(messagesContainerStyle), children: [
+      messages?.map((msg) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationStarted" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: 10,
+              color: "#888",
+              marginBottom: 4,
+              textAlign: "center"
+            },
+            children: "We are connecting you with a human agent..."
+          },
+          msg.$index
+        ),
+        msg.type == "noti" && msg.$userType == "system" && msg.event == "memberLeft" && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              fontSize: 10,
+              color: "#888",
+              marginBottom: 4,
+              textAlign: "center"
+            },
+            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",
+          {
+            style: {
+              fontSize: 10,
+              color: "#888",
+              marginBottom: 4,
+              textAlign: "center"
+            },
+            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: clsx(),
+            style: {
+              textAlign: msg.$userType == "end_user" ? "right" : "left",
+              alignSelf: msg.$userType == "end_user" ? "flex-end" : "flex-start",
+              background: msg.$userType == "end_user" ? "#1e3860" : "#eee",
+              color: msg.$userType == "end_user" ? "#fff" : "#1e3860",
+              borderRadius: 16,
+              padding: "8px 8px",
+              maxWidth: "80%",
+              boxShadow: msg.$userType == "end_user" ? "0 1px 4px #b3e0ff55" : void 0,
+              marginBottom: 2
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: 13,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 4
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    ReactMarkdown,
+                    {
+                      remarkPlugins: [[remarkGfm, { singleTilde: false }]],
+                      components: {
+                        p: ({ ...props }) => /* @__PURE__ */ jsx("p", { style: { margin: 0 }, ...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",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              // gap: 4,
+              marginTop: 4,
+              marginBottom: 8,
+              border: "1px solid #ddd",
+              borderRadius: "12px",
+              boxShadow: "0 1px 4px #b3e0ff55"
+            },
+            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",
+                {
+                  style: {
+                    fontSize: 12,
+                    textAlign: "left",
+                    background: "#fff",
+                    color: "#1e3860",
+                    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__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: {
+              fontSize: 12,
+              textAlign: "center"
+            },
+            onClick: endChat,
+            children: "End Chat"
+          }
+        ) })
+      ] }, msg.$index)),
+      /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: handleSend,
+        style: {
+          display: "flex",
+          gap: 8,
+          padding: "1rem",
+          borderTop: "1px solid #eee",
+          background: "#fafbfc",
+          borderBottomLeftRadius: 16,
+          borderBottomRightRadius: 16
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: input,
+              onChange: (e) => setInput(e.target.value),
+              placeholder: "Ask  something.. .",
+              className: clsx(inputStyle),
+              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

@@ -0,0 +1 @@
+export declare const chatbotWrapper: string;

package/dist/Chatbot/Chatbot.css.js

@@ -0,0 +1,5 @@
+import "./Chatbot.css.ts.vanilla.css.js";
+var chatbotWrapper = "_1hpv6vm0";
+export {
+  chatbotWrapper
+};

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

@@ -0,0 +1 @@
+

package/dist/Chatbot/Chatbot.d.ts

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

package/dist/Chatbot/Chatbot.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { authenticate } from "./authenticate.js";
+import { Bubble } from "./Bubble.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 = () => {
+  const messages = useMessages((state) => state.messages);
+  const close = useOpenChat((state) => state.close);
+  const { status, sendMessage } = 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 || "axos",
+    // replace with your project id
+    getToken: authenticate,
+    debug: process.env.NODE_ENV === "development"
+  });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Bubble, {}),
+    /* @__PURE__ */ jsx(
+      ChatWindow,
+      {
+        status,
+        onClose: close,
+        messages,
+        onSend: function(msg) {
+          sendMessage(msg);
+        }
+      }
+    )
+  ] });
+};
+export {
+  Chatbot
+};

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,9 @@
+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

@@ -0,0 +1,29 @@
+"use client";
+import { Bubble } from "./Bubble.js";
+import { bubbleCircle, bubbleWrapper, closeIcon } from "./Bubble.css.js";
+import { Chatbot } from "./Chatbot.js";
+import { chatbotWrapper } from "./Chatbot.css.js";
+import { ChatWindow } from "./ChatWindow.js";
+import { inputStyle, messageStyle, messagesContainerStyle, 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,
+  bubbleCircle,
+  bubbleWrapper,
+  chatbotWrapper,
+  closeIcon,
+  inputStyle,
+  messageStyle,
+  messagesContainerStyle,
+  sendButtonStyle,
+  useHeadlessChat,
+  useMessages,
+  useOpenChat,
+  windowBarStyle,
+  windowOpenStyle,
+  windowStyle
+};

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

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