@axos-web-dev/shared-components 1.0.100-dev.73 → 1.0.100-dev.73-slow-msg

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.
@@ -51,13 +51,19 @@ const ChatWindow = ({
51
51
  const messagesEndRef = useRef(null);
52
52
  const inputRef = useRef(null);
53
53
  const isOpen = useOpenChat((state2) => state2.isOpen);
54
+ const isBlockedInput = useOpenChat((state2) => state2.isBlockedInput);
55
+ const blockInput = useOpenChat((state2) => state2.blockInput);
54
56
  useEffect(() => {
55
57
  messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
56
58
  }, [messages]);
57
59
  const handleSend = (e) => {
58
60
  e.preventDefault();
59
61
  const cleaned = cleanInput(input);
62
+ if (isBlockedInput) return;
60
63
  if (cleaned) {
64
+ if (!hasEscalated) {
65
+ blockInput?.();
66
+ }
61
67
  onSend(cleaned);
62
68
  setInput("");
63
69
  }
@@ -466,18 +472,13 @@ const ChatWindow = ({
466
472
  previewTyping(e.target?.value);
467
473
  }
468
474
  if (e.key === "Enter" && !e.shiftKey) {
469
- e.preventDefault();
470
- const cleaned = cleanInput(input);
471
- if (cleaned) {
472
- onSend(cleaned);
473
- setInput("");
474
- }
475
+ handleSend(e);
475
476
  }
476
477
  },
477
478
  placeholder: "Ask anything...",
478
479
  className: clsx(inputStyle, autoResize),
479
480
  autoFocus: true,
480
- disabled: inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected,
481
+ disabled: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected,
481
482
  rows: 1
482
483
  }
483
484
  ),
@@ -490,7 +491,7 @@ const ChatWindow = ({
490
491
  ),
491
492
  type: "submit",
492
493
  title: "Send message",
493
- disabled: inputDisabled || status !== "connected" || !input.trim() || messages.length == 0 || escalationDeflected,
494
+ disabled: isBlockedInput || inputDisabled || status !== "connected" || !input.trim() || messages.length == 0 || escalationDeflected,
494
495
  children: /* @__PURE__ */ jsx(
495
496
  "svg",
496
497
  {
@@ -7,4 +7,4 @@ export declare const Chatbot: ({ project, projectEnv, menuOption, debug, }: {
7
7
  projectEnv?: "dev" | "qa" | "uat" | "stg" | "prod";
8
8
  menuOption?: "Support Virtual Agent" | string;
9
9
  debug?: boolean;
10
- }) => import("react/jsx-runtime").JSX.Element;
10
+ }) => false | import("react/jsx-runtime").JSX.Element;
@@ -20,7 +20,9 @@ const Chatbot = ({
20
20
  reset,
21
21
  startEscalation,
22
22
  hasEscalated,
23
- endEscalation
23
+ endEscalation,
24
+ unblockInput,
25
+ isBlockedInput
24
26
  } = useOpenChat();
25
27
  const { addMessage, addMessages, clearMessages, messages } = useMessages();
26
28
  const clientRef = useRef(null);
@@ -98,7 +100,11 @@ const Chatbot = ({
98
100
  const onChatMessageHandler = async (message) => {
99
101
  console.log("Received message:", message);
100
102
  if (["system", "virtual_agent", "user"].includes(message.$userType) && message.event === void 0) {
103
+ console.log(message.$userType, "not end user");
101
104
  addMessage(message);
105
+ if (!hasEscalated && isBlockedInput) {
106
+ unblockInput?.();
107
+ }
102
108
  return;
103
109
  }
104
110
  const eventName = message?.event;
@@ -117,6 +123,7 @@ const Chatbot = ({
117
123
  addMessage(message);
118
124
  if (["end_user"].includes(message.$userType)) {
119
125
  if (!hasEscalated) {
126
+ console.log(message.$userType, "end user");
120
127
  addMessage(typingMessage);
121
128
  }
122
129
  }
@@ -157,19 +164,28 @@ const Chatbot = ({
157
164
  const onChatConnectedHandler = async () => {
158
165
  setStatus("connected");
159
166
  console.log("connected");
160
- const messages2 = await clientRef.current?.fetchMessages();
161
- if (messages2) {
162
- addMessages(messages2);
163
- const hasEscalation = messages2.some(
164
- (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
165
- msg.event
166
- )
167
- );
168
- console.log(hasEscalation);
169
- if (hasEscalation) {
170
- setScalationStarted(true);
171
- startEscalation?.();
167
+ try {
168
+ if (!clientRef.current) {
169
+ console.error("Client not initialized on chat connected");
170
+ return;
171
+ }
172
+ const messages2 = await clientRef.current?.fetchMessages();
173
+ console.log("Fetched messages on chat connected:", messages2);
174
+ if (messages2) {
175
+ addMessages(messages2);
176
+ const hasEscalation = messages2.some(
177
+ (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
178
+ msg.event
179
+ )
180
+ );
181
+ console.log(hasEscalation);
182
+ if (hasEscalation) {
183
+ setScalationStarted(true);
184
+ startEscalation?.();
185
+ }
172
186
  }
187
+ } catch (error) {
188
+ console.error("Error fetching messages on chat connected:", error);
173
189
  }
174
190
  };
175
191
  const registerEventHandlers = () => {
@@ -341,7 +357,7 @@ const Chatbot = ({
341
357
  console.error("Error sending preview message:", error);
342
358
  }
343
359
  };
344
- return /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
360
+ return menusLoaded && /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
345
361
  /* @__PURE__ */ jsx(Bubble, { onClick: handleClick }),
346
362
  /* @__PURE__ */ jsx(
347
363
  ChatWindow,
@@ -11,6 +11,9 @@ interface OpenChatState {
11
11
  hasEscalated?: boolean;
12
12
  startEscalation?: () => void;
13
13
  endEscalation?: () => void;
14
+ isBlockedInput?: boolean;
15
+ blockInput?: () => void;
16
+ unblockInput?: () => void;
14
17
  }
15
18
  export declare const useOpenChat: import('zustand').UseBoundStore<import('zustand').StoreApi<OpenChatState>>;
16
19
  export {};
@@ -17,12 +17,16 @@ const useOpenChat = create((set, get) => ({
17
17
  hasOpenedOnce: false,
18
18
  isOpen: false,
19
19
  showThankyouMessage: false,
20
- hasEscalated: false
20
+ hasEscalated: false,
21
+ isBlockedInput: false
21
22
  }),
22
23
  displayThankyouMessage: () => set({ showThankyouMessage: true }),
23
24
  toggleThankyouMessage: () => set((state) => ({ showThankyouMessage: !state.showThankyouMessage })),
24
25
  startEscalation: () => set({ hasEscalated: true }),
25
- endEscalation: () => set({ hasEscalated: false })
26
+ endEscalation: () => set({ hasEscalated: false }),
27
+ isBlockedInput: false,
28
+ blockInput: () => set({ isBlockedInput: true }),
29
+ unblockInput: () => set({ isBlockedInput: false })
26
30
  }));
27
31
  export {
28
32
  useOpenChat
@@ -1,9 +1,9 @@
1
1
  @keyframes _13n1jqku {
2
2
  0% {
3
- background-position: -200% 0;
3
+ background-position: 200% 0;
4
4
  }
5
5
  100% {
6
- background-position: 200% 0;
6
+ background-position: -200% 0;
7
7
  }
8
8
  }
9
9
  ._13n1jqk0 {
@@ -301,8 +301,13 @@ button:has(span:hover) ._13n1jqk6 {
301
301
  border-bottom-right-radius: 32px;
302
302
  }
303
303
  ._13n1jqkv {
304
- background: linear-gradient(90deg, var(--_1073cm819) 0%, rgba(255,255,255,0.8) 50%, var(--_1073cm819) 100%);
305
- background-size: 200% 100%;
304
+ background: linear-gradient(
305
+ 90deg,
306
+ var(--_1073cm819) 0%,
307
+ rgba(255,255,255,0.8) 50%,
308
+ var(--_1073cm819) 100%
309
+ );
310
+ background-size: 200% auto;
306
311
  background-clip: text;
307
312
  -webkit-background-clip: text;
308
313
  color: transparent;
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.73",
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.73-slow-msg",
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
+ }