@axos-web-dev/shared-components 1.0.100-dev.75 → 1.0.100-dev.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/Chatbot/ChatWindow.js +5 -9
  2. package/dist/Chatbot/Chatbot.js +19 -11
  3. package/dist/Chatbot/ChatbotMessage.js +37 -20
  4. package/dist/assets/Chatbot/ChatWindow.css +7 -4
  5. package/package.json +136 -136
package/dist/Chatbot/ChatWindow.js CHANGED
@@ -41,7 +41,9 @@ const ChatWindow = ({
41
41
  showThankyouMessage,
42
42
  displayThankyouMessage,
43
43
  toggleThankyouMessage,
44
- hasEscalated
44
+ hasEscalated,
45
+ isBlockedInput,
46
+ isOpen
45
47
  } = useOpenChat();
46
48
  const [mounted, setMounted] = React.useState(false);
47
49
  const [menuOpen, setMenuOpen] = React.useState(false);
@@ -50,9 +52,6 @@ const ChatWindow = ({
50
52
  const [input, setInput] = React.useState("");
51
53
  const messagesEndRef = useRef(null);
52
54
  const inputRef = useRef(null);
53
- const isOpen = useOpenChat((state2) => state2.isOpen);
54
- const isBlockedInput = useOpenChat((state2) => state2.isBlockedInput);
55
- const blockInput = useOpenChat((state2) => state2.blockInput);
56
55
  useEffect(() => {
57
56
  messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
58
57
  }, [messages]);
@@ -60,10 +59,7 @@ const ChatWindow = ({
60
59
  e.preventDefault();
61
60
  const cleaned = cleanInput(input);
62
61
  if (isBlockedInput) return;
63
- if (cleaned) {
64
- if (!hasEscalated) {
65
- blockInput?.();
66
- }
62
+ if (cleaned != "") {
67
63
  onSend(cleaned);
68
64
  setInput("");
69
65
  }
@@ -457,7 +453,7 @@ const ChatWindow = ({
457
453
  style: {
458
454
  display: "flex",
459
455
  padding: "12px 16px",
460
- background: "#ffffff",
456
+ background: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected ? "light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3))" : "#ffffff",
461
457
  borderRadius: 12
462
458
  },
463
459
  children: [
package/dist/Chatbot/Chatbot.js CHANGED
@@ -22,7 +22,7 @@ const Chatbot = ({
22
22
  hasEscalated,
23
23
  endEscalation,
24
24
  unblockInput,
25
- isBlockedInput
25
+ blockInput
26
26
  } = useOpenChat();
27
27
  const { addMessage, addMessages, clearMessages, messages } = useMessages();
28
28
  const clientRef = useRef(null);
@@ -99,31 +99,31 @@ const Chatbot = ({
99
99
  };
100
100
  const onChatMessageHandler = async (message) => {
101
101
  console.log("Received message:", message);
102
- if (["system", "virtual_agent", "user"].includes(message.$userType) && message.event === void 0) {
103
- console.log(message.$userType, "not end user");
102
+ const { event, $userType } = message;
103
+ if (["system", "virtual_agent", "user"].includes($userType) && event === void 0) {
104
104
  addMessage(message);
105
- if (!hasEscalated && isBlockedInput) {
105
+ if (!hasEscalated) {
106
106
  unblockInput?.();
107
107
  }
108
108
  return;
109
109
  }
110
- const eventName = message?.event;
111
- switch (eventName) {
110
+ switch (event) {
112
111
  case "escalationAccepted":
112
+ case "escalationStarted":
113
113
  setScalationStarted(true);
114
114
  startEscalation?.();
115
115
  addMessage(message);
116
116
  return;
117
- case "escalationStarted":
118
- setScalationStarted(true);
119
- startEscalation?.();
117
+ case "escalationEnded":
118
+ case "escalationFailed": {
119
+ endEscalation?.();
120
120
  addMessage(message);
121
121
  return;
122
+ }
122
123
  default:
123
124
  addMessage(message);
124
125
  if (["end_user"].includes(message.$userType)) {
125
126
  if (!hasEscalated) {
126
- console.log(message.$userType, "end user");
127
127
  addMessage(typingMessage);
128
128
  }
129
129
  }
@@ -294,7 +294,15 @@ const Chatbot = ({
294
294
  };
295
295
  const onSendMessage = async (msg) => {
296
296
  console.log("Sending message:", msg);
297
- await clientRef.current?.sendTextMessage(msg);
297
+ try {
298
+ await clientRef.current?.sendTextMessage(msg);
299
+ } catch (error) {
300
+ console.log(error);
301
+ } finally {
302
+ if (!hasEscalated) {
303
+ blockInput?.();
304
+ }
305
+ }
298
306
  };
299
307
  const onEndChat = async () => {
300
308
  console.log("Ending chat");
package/dist/Chatbot/ChatbotMessage.js CHANGED
@@ -9,7 +9,7 @@ import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import
9
9
  /* empty css */
10
10
  /* empty css */
11
11
  import clsx from "clsx";
12
- import { shimmerText, notificationStyle, endChatButtonStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button } from "./ChatWindow.css.js";
12
+ import { shimmerText, notificationStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button, endChatButtonStyle } from "./ChatWindow.css.js";
13
13
  import { useOpenChat } from "./store/chat.js";
14
14
  function timeAgo(date) {
15
15
  const seconds = Math.floor(((/* @__PURE__ */ new Date()).getTime() - date.getTime()) / 1e3);
@@ -24,7 +24,6 @@ const ChatbotMessage = ({
24
24
  showAvatar,
25
25
  showName,
26
26
  virtualAgent,
27
- onCancelEndChat,
28
27
  onEndChat,
29
28
  onSend
30
29
  }) => {
@@ -76,23 +75,20 @@ const ChatbotMessage = ({
76
75
  " ",
77
76
  msg.to_agent ? /* @__PURE__ */ jsx("strong", { children: msg?.to_agent?.name }) : "an agent"
78
77
  ] }, msg.$index),
79
- msg.type == "noti" && msg.$userType == "virtual_agent" && msg.event == "escalationDeflected" && /* @__PURE__ */ jsxs(Fragment, { children: [
80
- /* @__PURE__ */ jsxs(
81
- "div",
82
- {
83
- className: notificationStyle,
84
- style: { fontSize: 12 },
85
- children: [
86
- "Our chat team is available weekdays, 8am-5pm, except federal bank holidays. For immediate assistance you can reach out to us at",
87
- " ",
88
- /* @__PURE__ */ jsx("a", { href: "tel:1-888-502-2967", children: "1-888-502-2967" }),
89
- "."
90
- ]
91
- },
92
- msg.$index
93
- ),
94
- /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onCancelEndChat, children: "End Chat" }) })
95
- ] }),
78
+ msg.type == "noti" && msg.$userType == "virtual_agent" && msg.event == "escalationDeflected" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
79
+ "div",
80
+ {
81
+ className: notificationStyle,
82
+ style: { fontSize: 12 },
83
+ children: [
84
+ "Our chat team is available weekdays, 8am-5pm, except federal bank holidays. For immediate assistance you can reach out to us at",
85
+ " ",
86
+ /* @__PURE__ */ jsx("a", { href: "tel:1-888-502-2967", children: "1-888-502-2967" }),
87
+ "."
88
+ ]
89
+ },
90
+ msg.$index
91
+ ) }),
96
92
  ["text", "markdown_template", "markdown"].includes(msg.type) && /* @__PURE__ */ jsx(
97
93
  "div",
98
94
  {
@@ -181,7 +177,28 @@ const ChatbotMessage = ({
181
177
  index
182
178
  );
183
179
  }) }),
184
- msg.event == "chatEnded" && /* @__PURE__ */ jsxs(Fragment, { children: [
180
+ " ",
181
+ msg.event == "chatEnded" && msg.status == "failed" && /* @__PURE__ */ jsxs(Fragment, { children: [
182
+ /* @__PURE__ */ jsxs(
183
+ "div",
184
+ {
185
+ title: (/* @__PURE__ */ new Date()).toLocaleString(),
186
+ style: {
187
+ fontSize: 12,
188
+ color: "#888",
189
+ marginBottom: 4,
190
+ textAlign: "center"
191
+ },
192
+ children: [
193
+ "No team members are online at the moment.",
194
+ /* @__PURE__ */ jsx("br", {}),
195
+ " Please try again later."
196
+ ]
197
+ }
198
+ ),
199
+ /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onEndChat, children: "End Chat" }) })
200
+ ] }),
201
+ msg.event == "chatEnded" && msg.status != "failed" && /* @__PURE__ */ jsxs(Fragment, { children: [
185
202
  /* @__PURE__ */ jsxs(
186
203
  "div",
187
204
  {
package/dist/assets/Chatbot/ChatWindow.css CHANGED
@@ -93,6 +93,7 @@ button:has(span:hover) ._13n1jqk6 {
93
93
  font-size: 16px;
94
94
  opacity: 0.7;
95
95
  outline: none;
96
+ background: transparent;
96
97
  resize: none;
97
98
  }
98
99
  ._13n1jqk9::placeholder {
@@ -101,21 +102,23 @@ button:has(span:hover) ._13n1jqk6 {
101
102
  ._1hpv6vm1 ._13n1jqk9::placeholder {
102
103
  color: rgba(31,31,31,.58);
103
104
  }
105
+ ._13n1jqk9:disabled {
106
+ cursor: not-allowed;
107
+ }
104
108
  ._13n1jqka {
105
109
  overflow-y: hidden;
106
110
  min-height: 20px;
107
111
  }
108
112
  ._13n1jqkb {
109
113
  padding-inline: 20px;
110
- background: #ffffff;
114
+ background: transparent;
111
115
  border: none;
112
116
  }
113
117
  ._13n1jqkb:hover {
114
- background: #ffffff;
115
118
  cursor: pointer;
116
119
  }
117
- ._1hpv6vm1 ._13n1jqkb:hover {
118
- background: #eae8e8;
120
+ ._13n1jqkb:disabled {
121
+ cursor: not-allowed;
119
122
  }
120
123
  ._13n1jqkb svg {
121
124
  fill: rgba(31,31,31,.38);
package/package.json CHANGED
@@ -1,136 +1,136 @@
1
- {
2
- "name": "@axos-web-dev/shared-components",
3
- "description": "Axos shared components library for web.",
4
- "version": "1.0.100-dev.75",
5
- "type": "module",
6
- "module": "dist/main.js",
7
- "types": "dist/main.d.ts",
8
- "files": [
9
- "dist"
10
- ],
11
- "sideEffects": [
12
- "dist/assets/**/*.css"
13
- ],
14
- "scripts": {
15
- "dev": "vite",
16
- "build": "tsc --p ./tsconfig.build.json && vite build",
17
- "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
18
- "preview": "vite preview",
19
- "prepublishOnly": "npm run build",
20
- "check-types": "tsc --pretty --noEmit",
21
- "check-format": "prettier --check .",
22
- "check-lint": "eslint . --ext ts --ext tsx --ext js",
23
- "format": "prettier --write .",
24
- "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
25
- "prepare": "husky",
26
- "storybook": "storybook dev -p 6006",
27
- "build-storybook": "storybook build",
28
- "npm:link": "npm run build && npm link"
29
- },
30
- "dependencies": {
31
- "@headlessui/react": "^2.2.0",
32
- "@hookform/resolvers": "^3.10.0",
33
- "@next-safe-action/adapter-react-hook-form": "^2.0.0",
34
- "@react-input/mask": "^1.2.15",
35
- "@react-input/number-format": "^1.1.3",
36
- "@storybook/icons": "^1.3.0",
37
- "@storybook/preview-api": "^8.4.7",
38
- "@ts-stack/markdown": "^1.5.0",
39
- "@types/iframe-resizer": "3.5.13",
40
- "@ujet/websdk-headless": "^3.41.4",
41
- "@vanilla-extract/css": "^1.16.1",
42
- "@vanilla-extract/recipes": "^0.5.1",
43
- "antd": "^5.22.5",
44
- "clsx": "^2.1.1",
45
- "framer-motion": "^12.9.2",
46
- "iframe-resizer": "^3.6.6",
47
- "lodash": "^4.17.21",
48
- "moment": "^2.30.1",
49
- "next-safe-action": "^8.0.2",
50
- "react-date-picker": "^11.0.0",
51
- "react-date-range": "^2.0.1",
52
- "react-hook-form": "^7.54.2",
53
- "react-markdown": "^9.1.0",
54
- "react-popper": "^2.3.0",
55
- "react-slick": "^0.30.2",
56
- "react-use": "^17.6.0",
57
- "react-wrap-balancer": "^1.1.1",
58
- "remark-gfm": "^4.0.1",
59
- "rsuite": "^5.75.0",
60
- "slick-carousel": "^1.8.1",
61
- "typed-css-modules": "^0.9.1",
62
- "vite-plugin-svgr": "^4.3.0",
63
- "zod": "^3.24.1",
64
- "zustand": "^4.5.5"
65
- },
66
- "peerDependencies": {
67
- "@vanilla-extract/css-utils": "^0.1.3",
68
- "@vanilla-extract/recipes": "^0.5.1",
69
- "@vanilla-extract/vite-plugin": "^4.0.3",
70
- "next": "^14.1.4",
71
- "react": "^18.2.0",
72
- "react-date-range": "^2.0.1",
73
- "react-dom": "^18.2.0",
74
- "react-popper": "^2.3.0",
75
- "react-slick": "^0.30.2",
76
- "slick-carousel": "^1.8.1"
77
- },
78
- "devDependencies": {
79
- "@chromatic-com/storybook": "^1.9.0",
80
- "@rollup/plugin-alias": "^5.1.1",
81
- "@storybook/addon-essentials": "^8.4.7",
82
- "@storybook/addon-interactions": "^8.4.7",
83
- "@storybook/addon-links": "^8.4.7",
84
- "@storybook/addon-mdx-gfm": "^8.4.7",
85
- "@storybook/addon-onboarding": "^8.4.7",
86
- "@storybook/addon-themes": "^8.4.7",
87
- "@storybook/blocks": "^8.4.7",
88
- "@storybook/react": "^8.6.14",
89
- "@storybook/react-vite": "^8.4.7",
90
- "@storybook/test": "^8.6.14",
91
- "@svgr/core": "^8.1.0",
92
- "@svgr/plugin-prettier": "^8.1.0",
93
- "@svgr/plugin-svgo": "^8.1.0",
94
- "@types/lodash": "^4.17.17",
95
- "@types/node": "^20.19.0",
96
- "@types/react": "^18.3.23",
97
- "@types/react-date-range": "^1.4.9",
98
- "@types/react-datepicker": "^6.2.0",
99
- "@types/react-dom": "^18.3.7",
100
- "@types/react-slick": "^0.23.13",
101
- "@typescript-eslint/eslint-plugin": "^7.18.0",
102
- "@typescript-eslint/parser": "^7.18.0",
103
- "@vanilla-extract/css-utils": "^0.1.4",
104
- "@vanilla-extract/recipes": "^0.5.5",
105
- "@vanilla-extract/vite-plugin": "^4.0.18",
106
- "@vitejs/plugin-react-swc": "^3.7.2",
107
- "esbuild-vanilla-image-loader": "^0.1.3",
108
- "eslint": "^8.57.1",
109
- "eslint-plugin-react-hooks": "^4.6.2",
110
- "eslint-plugin-react-refresh": "^0.4.16",
111
- "eslint-plugin-storybook": "^0.8.0",
112
- "glob": "^10.4.5",
113
- "husky": "^9.1.7",
114
- "next": "^14.1.4",
115
- "prettier": "3.2.5",
116
- "react": "^18.3.1",
117
- "react-dom": "^18.3.1",
118
- "rollup-plugin-preserve-directives": "^0.4.0",
119
- "rollup-plugin-svg-import": "^3.0.0",
120
- "rollup-plugin-svgo": "^2.0.0",
121
- "storybook": "^8.4.7",
122
- "typescript": "^5.7.2",
123
- "typescript-plugin-css-modules": "^5.1.0",
124
- "vite": "^5.4.11",
125
- "vite-plugin-dts": "^3.9.1",
126
- "vite-plugin-lib-inject-css": "^2.1.1",
127
- "vite-plugin-setting-css-module": "^1.1.4",
128
- "vite-tsconfig-paths": "^4.3.2"
129
- },
130
- "main": "index.js",
131
- "directories": {
132
- "lib": "lib"
133
- },
134
- "author": "axos-web-dev",
135
- "license": "ISC"
136
- }
1
+ {
2
+ "name": "@axos-web-dev/shared-components",
3
+ "description": "Axos shared components library for web.",
4
+ "version": "1.0.100-dev.76",
5
+ "type": "module",
6
+ "module": "dist/main.js",
7
+ "types": "dist/main.d.ts",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "sideEffects": [
12
+ "dist/assets/**/*.css"
13
+ ],
14
+ "scripts": {
15
+ "dev": "vite",
16
+ "build": "tsc --p ./tsconfig.build.json && vite build",
17
+ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
18
+ "preview": "vite preview",
19
+ "prepublishOnly": "npm run build",
20
+ "check-types": "tsc --pretty --noEmit",
21
+ "check-format": "prettier --check .",
22
+ "check-lint": "eslint . --ext ts --ext tsx --ext js",
23
+ "format": "prettier --write .",
24
+ "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
25
+ "prepare": "husky",
26
+ "storybook": "storybook dev -p 6006",
27
+ "build-storybook": "storybook build",
28
+ "npm:link": "npm run build && npm link"
29
+ },
30
+ "dependencies": {
31
+ "@headlessui/react": "^2.2.0",
32
+ "@hookform/resolvers": "^3.10.0",
33
+ "@next-safe-action/adapter-react-hook-form": "^2.0.0",
34
+ "@react-input/mask": "^1.2.15",
35
+ "@react-input/number-format": "^1.1.3",
36
+ "@storybook/icons": "^1.3.0",
37
+ "@storybook/preview-api": "^8.4.7",
38
+ "@ts-stack/markdown": "^1.5.0",
39
+ "@types/iframe-resizer": "3.5.13",
40
+ "@ujet/websdk-headless": "^3.41.4",
41
+ "@vanilla-extract/css": "^1.16.1",
42
+ "@vanilla-extract/recipes": "^0.5.1",
43
+ "antd": "^5.22.5",
44
+ "clsx": "^2.1.1",
45
+ "framer-motion": "^12.9.2",
46
+ "iframe-resizer": "^3.6.6",
47
+ "lodash": "^4.17.21",
48
+ "moment": "^2.30.1",
49
+ "next-safe-action": "^8.0.2",
50
+ "react-date-picker": "^11.0.0",
51
+ "react-date-range": "^2.0.1",
52
+ "react-hook-form": "^7.54.2",
53
+ "react-markdown": "^9.1.0",
54
+ "react-popper": "^2.3.0",
55
+ "react-slick": "^0.30.2",
56
+ "react-use": "^17.6.0",
57
+ "react-wrap-balancer": "^1.1.1",
58
+ "remark-gfm": "^4.0.1",
59
+ "rsuite": "^5.75.0",
60
+ "slick-carousel": "^1.8.1",
61
+ "typed-css-modules": "^0.9.1",
62
+ "vite-plugin-svgr": "^4.3.0",
63
+ "zod": "^3.24.1",
64
+ "zustand": "^4.5.5"
65
+ },
66
+ "peerDependencies": {
67
+ "@vanilla-extract/css-utils": "^0.1.3",
68
+ "@vanilla-extract/recipes": "^0.5.1",
69
+ "@vanilla-extract/vite-plugin": "^4.0.3",
70
+ "next": "^14.1.4",
71
+ "react": "^18.2.0",
72
+ "react-date-range": "^2.0.1",
73
+ "react-dom": "^18.2.0",
74
+ "react-popper": "^2.3.0",
75
+ "react-slick": "^0.30.2",
76
+ "slick-carousel": "^1.8.1"
77
+ },
78
+ "devDependencies": {
79
+ "@chromatic-com/storybook": "^1.9.0",
80
+ "@rollup/plugin-alias": "^5.1.1",
81
+ "@storybook/addon-essentials": "^8.4.7",
82
+ "@storybook/addon-interactions": "^8.4.7",
83
+ "@storybook/addon-links": "^8.4.7",
84
+ "@storybook/addon-mdx-gfm": "^8.4.7",
85
+ "@storybook/addon-onboarding": "^8.4.7",
86
+ "@storybook/addon-themes": "^8.4.7",
87
+ "@storybook/blocks": "^8.4.7",
88
+ "@storybook/react": "^8.6.14",
89
+ "@storybook/react-vite": "^8.4.7",
90
+ "@storybook/test": "^8.6.14",
91
+ "@svgr/core": "^8.1.0",
92
+ "@svgr/plugin-prettier": "^8.1.0",
93
+ "@svgr/plugin-svgo": "^8.1.0",
94
+ "@types/lodash": "^4.17.17",
95
+ "@types/node": "^20.19.0",
96
+ "@types/react": "^18.3.23",
97
+ "@types/react-date-range": "^1.4.9",
98
+ "@types/react-datepicker": "^6.2.0",
99
+ "@types/react-dom": "^18.3.7",
100
+ "@types/react-slick": "^0.23.13",
101
+ "@typescript-eslint/eslint-plugin": "^7.18.0",
102
+ "@typescript-eslint/parser": "^7.18.0",
103
+ "@vanilla-extract/css-utils": "^0.1.4",
104
+ "@vanilla-extract/recipes": "^0.5.5",
105
+ "@vanilla-extract/vite-plugin": "^4.0.18",
106
+ "@vitejs/plugin-react-swc": "^3.7.2",
107
+ "esbuild-vanilla-image-loader": "^0.1.3",
108
+ "eslint": "^8.57.1",
109
+ "eslint-plugin-react-hooks": "^4.6.2",
110
+ "eslint-plugin-react-refresh": "^0.4.16",
111
+ "eslint-plugin-storybook": "^0.8.0",
112
+ "glob": "^10.4.5",
113
+ "husky": "^9.1.7",
114
+ "next": "^14.1.4",
115
+ "prettier": "3.2.5",
116
+ "react": "^18.3.1",
117
+ "react-dom": "^18.3.1",
118
+ "rollup-plugin-preserve-directives": "^0.4.0",
119
+ "rollup-plugin-svg-import": "^3.0.0",
120
+ "rollup-plugin-svgo": "^2.0.0",
121
+ "storybook": "^8.4.7",
122
+ "typescript": "^5.7.2",
123
+ "typescript-plugin-css-modules": "^5.1.0",
124
+ "vite": "^5.4.11",
125
+ "vite-plugin-dts": "^3.9.1",
126
+ "vite-plugin-lib-inject-css": "^2.1.1",
127
+ "vite-plugin-setting-css-module": "^1.1.4",
128
+ "vite-tsconfig-paths": "^4.3.2"
129
+ },
130
+ "main": "index.js",
131
+ "directories": {
132
+ "lib": "lib"
133
+ },
134
+ "author": "axos-web-dev",
135
+ "license": "ISC"
136
+ }