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

package/dist/Chatbot/ChatWindow.js

@@ -0,0 +1,329 @@
+"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 { useNetworkState, useMount } from "react-use";
+import remarkGfm from "remark-gfm";
+import { windowBarStyle, chat_title, chatbotMenuItem, chatbotMenu, button_reset, arrowFill, notificationStyle, messageStyle, inline_button_wrapper, inline_button, endChatButtonStyle, 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
+}) => {
+  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__ */ jsx(
+        "dialog",
+        {
+          open: showEndChatDialog,
+          style: {
+            padding: "1rem",
+            borderRadius: 8,
+            background: "#fff",
+            color: "#000",
+            border: "none",
+            outline: "none",
+            maxWidth: "90%",
+            top: "25%"
+          },
+          children: /* @__PURE__ */ jsxs("form", { method: "dialog", children: [
+            /* @__PURE__ */ jsx("p", { children: "are you sure you want to end this chat?" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "submit",
+                onClick: () => {
+                  endChat();
+                  setShowEndChatDialog(false);
+                },
+                children: "Yes"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                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"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      " ",
+      mounted && !state.online ? "Offline" : null,
+      " "
+    ] }),
+    /* @__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", { 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: [
+                          /* @__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__ */ jsx("div", { 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,
+              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,2 @@
+export declare const chatbotAXB: string;
+export declare const chatbotUFB: string;

package/dist/Chatbot/Chatbot.css.js

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

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

@@ -0,0 +1 @@
+

package/dist/Chatbot/Chatbot.d.ts

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

package/dist/Chatbot/Chatbot.js

@@ -0,0 +1,42 @@
+"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"
+  });
+  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

@@ -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,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,38 @@
+"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, 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,
+  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

@@ -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 {};

package/dist/Chatbot/store/chat.js

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

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