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

package/dist/Chatbot/Bubble.css.d.ts

@@ -1 +1,2 @@
 export declare const bubbleWrapper: string;
+export declare const svgFill: string;

package/dist/Chatbot/Bubble.css.js

@@ -1,5 +1,7 @@
 import '../assets/Chatbot/Bubble.css';/* empty css                          */
 var bubbleWrapper = "_7u9pv30";
+var svgFill = "_7u9pv31";
 export {
-  bubbleWrapper
+  bubbleWrapper,
+  svgFill
 };

package/dist/Chatbot/Bubble.js

@@ -1,19 +1,20 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { bubbleWrapper } from "./Bubble.css.js";
+import { bubbleWrapper, svgFill } from "./Bubble.css.js";
 import { useOpenChat } from "./store/chat.js";
 import { AnimatePresence, motion } from "framer-motion";
 const Bubble = ({ children }) => {
   const isOpen = useOpenChat((state) => state.isOpen);
   const toggle = useOpenChat((state) => state.toggle);
   return /* @__PURE__ */ jsxs("div", { className: bubbleWrapper, onClick: toggle, children: [
-    /* @__PURE__ */ jsx("div", { className: "bubble-circle", children: /* @__PURE__ */ jsx(AnimatePresence, { children: !isOpen ? /* @__PURE__ */ jsx(
-      motion.img,
+    /* @__PURE__ */ jsx("div", { className: "bubble-circle flex", children: /* @__PURE__ */ jsx(AnimatePresence, { children: !isOpen ? /* @__PURE__ */ jsxs(
+      motion.svg,
       {
-        alt: "Evo, Virtual Financial Assistant",
-        src: "https://www.axos.com/images/5yPSYWRtCV9kNiVUzGONdb/axb-chat-bubble.png",
-        height: 36,
-        width: 36,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "39",
+        height: "39",
+        viewBox: "0 0 39 39",
+        fill: "none",
         initial: { scale: 0.1, opacity: 0 },
         animate: {
           scale: 1,
@@ -22,22 +23,73 @@ const Bubble = ({ children }) => {
             default: { type: "spring" },
             opacity: { ease: [0, 0.71, 0.2, 1.01] }
           }
-        }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: svgFill,
+              d: "M3 7.5C3 5.01472 5.01472 3 7.5 3H22.5V0H7.5C3.35786 0 0 3.35786 0 7.5V16.5H3V7.5Z",
+              fill: "#98DDFF"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: svgFill,
+              "fill-rule": "evenodd",
+              "clip-rule": "evenodd",
+              d: "M13.5 30H12C8.68629 30 6 27.3137 6 24V12C6 8.68629 8.68629 6 12 6H33C36.3137 6 39 8.68629 39 12V24C39 27.3137 36.3137 30 33 30H26.25L18.6213 37.6287C16.7314 39.5186 13.5 38.1801 13.5 35.5074V30ZM16.5 35.5074V27H12C10.3431 27 9 25.6569 9 24V12C9 10.3431 10.3431 9 12 9H33C34.6569 9 36 10.3431 36 12V24C36 25.6569 34.6569 27 33 27H25.0074L16.5 35.5074Z",
+              fill: "#98DDFF"
+            }
+          )
+        ]
       }
-    ) : /* @__PURE__ */ jsx("span", { className: "close-icon", children: /* @__PURE__ */ jsx(
-      motion.img,
+    ) : /* @__PURE__ */ jsx("span", { className: "close-icon", children: /* @__PURE__ */ jsxs(
+      motion.svg,
       {
-        alt: "Close chat",
-        src: "https://www.axos.com/images/7kHGbXlPvoGOC4YL3Ae5cg/axb-x-close.svg",
-        initial: { opacity: 0, rotate: 0 },
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        initial: { opacity: 0, rotate: 0, scale: 0.1 },
         animate: {
           opacity: 1,
-          rotate: -90,
+          rotate: -360,
+          scale: 1,
           transition: {
             default: { type: "spring" },
-            opacity: { ease: "linear" }
+            opacity: { ease: "linear" },
+            scale: { ease: "linear" }
           }
-        }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: svgFill,
+              d: "M23.7096 0.892655L23.1073 0.290383C22.7202 -0.0967942 22.0749 -0.0967942 21.6447 0.290383L13.6 8.33506L15.6649 10.4L23.7096 2.35533C24.0968 1.92513 24.0968 1.27983 23.7096 0.892655Z",
+              fill: "#98DDFF"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: svgFill,
+              d: "M2.44278 0.293744C2.04123 -0.0979148 1.37197 -0.0979148 0.925804 0.293744L0.301162 0.902989C-0.100387 1.29465 -0.100387 1.94742 0.301162 2.38259L10.1168 12L0.301162 21.6174C-0.100387 22.0091 -0.100387 22.6618 0.301162 23.097L0.925804 23.7063C1.32735 24.0979 1.99661 24.0979 2.44278 23.7063L14.4 12.0435L2.44278 0.293744Z",
+              fill: "#98DDFF"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: svgFill,
+              d: "M23.7096 23.1073L23.1073 23.7096C22.7202 24.0968 22.0749 24.0968 21.6447 23.7096L13.6 15.6649L15.6649 13.6L23.7096 21.6446C24.0968 22.0748 24.0968 22.7201 23.7096 23.1073Z",
+              fill: "#98DDFF"
+            }
+          )
+        ]
       }
     ) }) }) }),
     children

package/dist/Chatbot/ChatWindow.css.d.ts

@@ -3,9 +3,12 @@ export declare const windowOpenStyle: string;
 export declare const windowBarStyle: string;
 export declare const chat_title: string;
 export declare const button_reset: string;
+export declare const arrowFill: string;
 export declare const inputStyle: string;
 export declare const sendButtonStyle: string;
 export declare const messagesContainerStyle: string;
 export declare const notificationStyle: string;
 export declare const messageStyle: string;
 export declare const inline_button_wrapper: string;
+export declare const inline_button: string;
+export declare const endChatButtonStyle: string;

package/dist/Chatbot/ChatWindow.css.js

@@ -4,15 +4,21 @@ var windowOpenStyle = "_13n1jqk1";
 var windowBarStyle = "_13n1jqk2";
 var chat_title = "_13n1jqk3";
 var button_reset = "_13n1jqk4";
-var inputStyle = "_13n1jqk5";
-var sendButtonStyle = "_13n1jqk6";
-var messagesContainerStyle = "_13n1jqk7";
-var notificationStyle = "_13n1jqk8";
-var messageStyle = "_13n1jqk9";
-var inline_button_wrapper = "_13n1jqka";
+var arrowFill = "_13n1jqk5";
+var inputStyle = "_13n1jqk6";
+var sendButtonStyle = "_13n1jqk7";
+var messagesContainerStyle = "_13n1jqk8";
+var notificationStyle = "_13n1jqk9";
+var messageStyle = "_13n1jqka";
+var inline_button_wrapper = "_13n1jqkb";
+var inline_button = "_13n1jqkc";
+var endChatButtonStyle = "_13n1jqkd";
 export {
+  arrowFill,
   button_reset,
   chat_title,
+  endChatButtonStyle,
+  inline_button,
   inline_button_wrapper,
   inputStyle,
   messageStyle,

package/dist/Chatbot/ChatWindow.js

@@ -5,7 +5,7 @@ import React, { useRef, useEffect, Fragment } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useOpenChat } from "./store/chat.js";
-import { windowBarStyle, chat_title, button_reset, notificationStyle, messageStyle, inline_button_wrapper, messagesContainerStyle, inputStyle, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
+import { windowBarStyle, chat_title, button_reset, arrowFill, notificationStyle, messageStyle, inline_button_wrapper, inline_button, endChatButtonStyle, messagesContainerStyle, inputStyle, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
 const ChatWindow = ({
   messages,
   status = "connected",
@@ -29,6 +29,10 @@ const ChatWindow = ({
       setInput("");
     }
   };
+  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: [
@@ -51,12 +55,21 @@ const ChatWindow = ({
           "aria-label": "Close chat",
           title: "Close",
           children: /* @__PURE__ */ jsx(
-            "img",
+            "svg",
             {
-              src: "https://www.axos.com/images/fXFpk3tIJEym7OWKNuKBU/axb-down-chevron.svg",
-              height: 24,
-              width: 24,
-              alt: ""
+              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"
+                }
+              )
             }
           )
         }
@@ -81,7 +94,7 @@ const ChatWindow = ({
             style: {
               textAlign: msg.$userType == "end_user" ? "right" : "left",
               alignSelf: msg.$userType == "end_user" ? "flex-end" : "flex-start",
-              background: msg.$userType == "end_user" ? "#14263d" : "#E9F8FF",
+              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
             },
@@ -100,7 +113,13 @@ const ChatWindow = ({
                     {
                       remarkPlugins: [[remarkGfm, { singleTilde: false }]],
                       components: {
-                        p: ({ ...props }) => /* @__PURE__ */ jsx("p", { style: { margin: 0 }, ...props })
+                        p: ({ ...props }) => /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            style: { margin: 0, fontSize: "inherit" },
+                            ...props
+                          }
+                        )
                       },
                       children: msg.content
                     }
@@ -117,11 +136,8 @@ const ChatWindow = ({
           return /* @__PURE__ */ jsx(
             "button",
             {
+              className: inline_button,
               style: {
-                fontSize: 12,
-                textAlign: "left",
-                background: "#fff",
-                color: "#1e3860",
                 borderRadius: "0px",
                 borderTopLeftRadius: [0].includes(index) ? 8 : 0,
                 borderTopRightRadius: [0].includes(index) ? 8 : 0,
@@ -136,17 +152,7 @@ const ChatWindow = ({
             index
           );
         }) }),
-        msg.event == "chatEnded" && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            style: {
-              fontSize: 12,
-              textAlign: "center"
-            },
-            onClick: endChat,
-            children: "End Chat"
-          }
-        ) })
+        msg.event == "chatEnded" && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: endChat, children: "End Chat" }) })
       ] }, msg.$index)),
       /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
     ] }),

package/dist/Chatbot/Chatbot.css.d.ts

@@ -1 +1,2 @@
-export declare const chatbotWrapper: string;
+export declare const chatbotAXB: string;
+export declare const chatbotUFB: string;

package/dist/Chatbot/Chatbot.css.js

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

package/dist/Chatbot/Chatbot.d.ts

@@ -1 +1,5 @@
-export declare const Chatbot: () => import("react/jsx-runtime").JSX.Element;
+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

@@ -6,7 +6,8 @@ import { ChatWindow } from "./ChatWindow.js";
 import { useOpenChat } from "./store/chat.js";
 import { useMessages } from "./store/messages.js";
 import { useHeadlessChat } from "./useHeadlessChat.js";
-const Chatbot = () => {
+import { chatbotUFB, chatbotAXB } from "./Chatbot.css.js";
+const Chatbot = (props) => {
   const messages = useMessages((state) => state.messages);
   const close = useOpenChat((state) => state.close);
   const { status, sendMessage } = useHeadlessChat({
@@ -14,12 +15,11 @@ const Chatbot = () => {
     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
+    projectId: process.env.CCAI_PROJECT_ID || props.project || "axos",
     getToken: authenticate,
-    debug: process.env.NODE_ENV === "development"
+    debug: props.debug || process.env.NODE_ENV === "development"
   });
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs("div", { className: props.project === "ufb" ? chatbotUFB : chatbotAXB, children: [
     /* @__PURE__ */ jsx(Bubble, {}),
     /* @__PURE__ */ jsx(
       ChatWindow,

package/dist/Chatbot/index.js

@@ -1,10 +1,10 @@
 "use client";
 import { Bubble } from "./Bubble.js";
-import { bubbleWrapper } from "./Bubble.css.js";
+import { bubbleWrapper, svgFill } from "./Bubble.css.js";
 import { Chatbot } from "./Chatbot.js";
-import { chatbotWrapper } from "./Chatbot.css.js";
+import { chatbotAXB, chatbotUFB } from "./Chatbot.css.js";
 import { ChatWindow } from "./ChatWindow.js";
-import { button_reset, chat_title, inline_button_wrapper, inputStyle, messageStyle, messagesContainerStyle, notificationStyle, sendButtonStyle, windowBarStyle, windowOpenStyle, windowStyle } from "./ChatWindow.css.js";
+import { arrowFill, button_reset, chat_title, 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";
@@ -12,16 +12,21 @@ export {
   Bubble,
   ChatWindow,
   Chatbot,
+  arrowFill,
   bubbleWrapper,
   button_reset,
   chat_title,
-  chatbotWrapper,
+  chatbotAXB,
+  chatbotUFB,
+  endChatButtonStyle,
+  inline_button,
   inline_button_wrapper,
   inputStyle,
   messageStyle,
   messagesContainerStyle,
   notificationStyle,
   sendButtonStyle,
+  svgFill,
   useHeadlessChat,
   useMessages,
   useOpenChat,

package/dist/assets/Chatbot/Bubble.css

@@ -37,4 +37,15 @@
   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

@@ -30,6 +30,9 @@
   min-height: 50px;
   padding-inline: 18px;
 }
+._1hpv6vm1 ._13n1jqk2 {
+  background-color: #60707A;
+}
 ._13n1jqk3 {
   color: #FFF;
   font: 700 18px/1.5 var(--header-font-family);
@@ -44,6 +47,12 @@
   padding: 0;
 }
 ._13n1jqk5 {
+  fill: #98DDFF;
+}
+._1hpv6vm1 ._13n1jqk5 {
+  fill: #FFFFFF;
+}
+._13n1jqk6 {
   border: none;
   color: #1F1F1F;
   flex: 1;
@@ -53,25 +62,37 @@
   outline: none;
   padding: 20px 0 20px 20px;
 }
-._13n1jqk5::placeholder {
+._13n1jqk6::placeholder {
   color: rgba(31,31,31,.38);
 }
-._13n1jqk6 {
+._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;
 }
-._13n1jqk6:hover {
+._13n1jqk7:hover {
   background: #E9F8FF;
   cursor: pointer;
 }
-._13n1jqk6 svg {
+._1hpv6vm1 ._13n1jqk7:hover {
+  background: #eae8e8;
+}
+._13n1jqk7 svg {
   fill: rgba(31,31,31,.38);
 }
-._13n1jqk6.active svg {
+._13n1jqk7.active svg {
   fill: #1e3860;
 }
-._13n1jqk7 {
+._1hpv6vm1 ._13n1jqk7.active svg {
+  fill: #e18357;
+}
+._13n1jqk8 {
   background: #f9f9f9;
   display: flex;
   flex: 1;
@@ -81,27 +102,56 @@
   padding: 1rem;
   scrollbar-color: #ccc transparent;
 }
-._13n1jqk8 {
+._13n1jqk9 {
   color: #888;
   font-size: 10px;
   margin-bottom: 4px;
   text-align: center;
 }
-._13n1jqk9 {
+._13n1jqka {
   border-radius: 8px;
   margin-bottom: 8px;
   max-width: 93%;
   padding: 8px 12px;
 }
-._13n1jqk9 ul {
+._13n1jqka ul {
   padding-left: 24px;
 }
-._13n1jqka {
+._13n1jqkb {
   border: 1px solid #ddd;
-  border-radius: 12px;
+  border-radius: 8px;
   box-shadow: 0 1px 4px #b3e0ff55;
   display: flex;
   flex-direction: column;
   margin-bottom: 8px;
-  margin-top: 4px;
+}
+._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;
 }

package/dist/main.js

@@ -38,11 +38,11 @@ import { SummitApyCalculator } from "./Calculators/SummitApyCalculator/index.js"
 import { CallToActionBar } from "./CallToActionBar/index.js";
 import { Carousel, CarouselSlide } from "./Carousel/index.js";
 import { Bubble } from "./Chatbot/Bubble.js";
-import { bubbleWrapper } from "./Chatbot/Bubble.css.js";
+import { bubbleWrapper, svgFill } from "./Chatbot/Bubble.css.js";
 import { Chatbot } from "./Chatbot/Chatbot.js";
-import { chatbotWrapper } from "./Chatbot/Chatbot.css.js";
+import { chatbotAXB, chatbotUFB } from "./Chatbot/Chatbot.css.js";
 import { ChatWindow } from "./Chatbot/ChatWindow.js";
-import { button_reset, chat_title, inline_button_wrapper, inputStyle, messageStyle, messagesContainerStyle, notificationStyle, sendButtonStyle, windowBarStyle, windowOpenStyle, windowStyle } from "./Chatbot/ChatWindow.css.js";
+import { arrowFill, button_reset, chat_title, endChatButtonStyle, inline_button, inline_button_wrapper, inputStyle, messageStyle, messagesContainerStyle, notificationStyle, sendButtonStyle, windowBarStyle, windowOpenStyle, windowStyle } from "./Chatbot/ChatWindow.css.js";
 import { useOpenChat } from "./Chatbot/store/chat.js";
 import { useMessages } from "./Chatbot/store/messages.js";
 import { useHeadlessChat } from "./Chatbot/useHeadlessChat.js";
@@ -411,6 +411,7 @@ export {
   apply_now_form,
   apy_billboard,
   apy_table,
+  arrowFill,
   associatedEmail,
   award_company,
   award_item,
@@ -457,7 +458,8 @@ export {
   center_left,
   center_right,
   chat_title,
-  chatbotWrapper,
+  chatbotAXB,
+  chatbotUFB,
   checkbox_group,
   columnValues,
   comparison,
@@ -484,6 +486,7 @@ export {
   dp_input,
   dropdown,
   dynPH,
+  endChatButtonStyle,
   error_alert,
   error_alert_content,
   error_close_button,
@@ -585,6 +588,7 @@ export {
   image_inner_wrapper,
   img_area,
   img_contents,
+  inline_button,
   inline_button_wrapper,
   inline_container,
   input,
@@ -706,6 +710,7 @@ export {
   success_icon,
   success_wrap,
   supertag,
+  svgFill,
   svg_fill,
   svg_icon,
   svg_logo,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "1.0.100-dev.2",
+  "version": "1.0.100-dev.3",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",