ss-support-widget 1.0.3 → 1.0.6

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 (7) hide show
  1. package/dist/chat-bot-widget.js +22 -22
  2. package/index.html +5 -3
  3. package/package.json +1 -1
  4. package/src/ChatWidget.tsx +9 -4
  5. package/src/element.tsx +4 -2
  6. package/src/hooks.ts +20 -0
  7. package/src/service.ts +16 -0
package/index.html CHANGED
@@ -4,14 +4,16 @@
4
4
  <meta charset="utf-8" />
5
5
  <title>Widget test</title>
6
6
  </head>
7
- <body>
7
+ <body style="height: 100vh;">
8
+ <div style="height: 600px;">test</div>
9
+ <div style="height: 600px;">test</div>
8
10
  <script>
9
11
  window.ChatBotConfig = {
10
12
  clientId: "694802ab424bd274310d61d8",
11
13
  apiBaseUrl: "https://ai-chatbots-api.azurewebsites.net/",
12
14
  };
13
15
  </script>
14
- <!-- <script type="module" src="/src/element.tsx"></script> -->
15
- <script src="https://cdn.jsdelivr.net/npm/ss-support-widget@1.0.2/dist/chat-bot-widget.js"></script>
16
+ <script type="module" src="/src/element.tsx"></script>
17
+ <!-- <script src="https://cdn.jsdelivr.net/npm/ss-support-widget@1.0.4/dist/chat-bot-widget.js"></script> -->
16
18
  </body>
17
19
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ss-support-widget",
3
- "version": "1.0.3",
3
+ "version": "1.0.6",
4
4
  "description": "Chatbot widget for customer support",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/ChatWidget.tsx CHANGED
@@ -18,6 +18,7 @@ import SmartToyRoundedIcon from "@mui/icons-material/SmartToyRounded";
18
18
  import PersonRoundedIcon from "@mui/icons-material/PersonRounded";
19
19
  import ReactMarkdown from "react-markdown";
20
20
  import { Msg } from "./App";
21
+ import { useViewportHeightVar } from "./hooks";
21
22
 
22
23
 
23
24
  export function ChatWidget({
@@ -42,6 +43,7 @@ export function ChatWidget({
42
43
  const endRef = useRef<HTMLDivElement | null>(null);
43
44
  const theme = useTheme();
44
45
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
46
+ useViewportHeightVar();
45
47
 
46
48
  useEffect(() => {
47
49
  endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
@@ -76,9 +78,12 @@ export function ChatWidget({
76
78
  elevation={isMobile ? 0 : 10}
77
79
  sx={{
78
80
  width: isMobile ? "100vw" : 380,
79
- height: isMobile ? "100vh" : 560,
81
+ height: isMobile ? "calc(var(--vh, 1vh) * 100)" : 560,
82
+ "@supports (height: 100dvh)": {
83
+ height: isMobile ? "100dvh" : 560,
84
+ },
80
85
  maxWidth: "100vw",
81
- maxHeight: "100vh",
86
+ maxHeight: "100dvh",
82
87
  borderRadius: isMobile ? 0 : 4,
83
88
  position: isMobile ? "fixed" : "relative",
84
89
  inset: isMobile ? 0 : "auto",
@@ -151,7 +156,7 @@ export function ChatWidget({
151
156
  flex: 1,
152
157
  minHeight: 0,
153
158
  position: "relative",
154
- height: 400,
159
+ // height: 300,
155
160
  overflow: "auto",
156
161
  px: 1.5,
157
162
  py: 1.5,
@@ -392,4 +397,4 @@ export function ChatWidget({
392
397
  </Box>
393
398
  );
394
399
  }
395
- export default ChatWidget;
400
+ export default ChatWidget;
package/src/element.tsx CHANGED
@@ -5,7 +5,7 @@ import { CacheProvider } from "@emotion/react";
5
5
  import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
6
6
  import App from "./App";
7
7
  import { ensureViewportMeta } from "./hooks";
8
- import { getApiStatus, getHideChatForUrls } from "./service";
8
+ import { getApiStatus, getClientActivityStatus, getHideChatForUrls } from "./service";
9
9
 
10
10
  export type Config = {
11
11
  clientId: string;
@@ -89,8 +89,10 @@ if (!customElements.get(chatBotComponentName)) {
89
89
  if (document.querySelector(chatBotComponentName)) return;
90
90
 
91
91
  var isHealty = await getApiStatus(cfg)
92
+ if (!isHealty) return;
92
93
 
93
- if(!isHealty) return;
94
+ var isClientActive = await getClientActivityStatus(cfg)
95
+ if (!isClientActive) return;
94
96
 
95
97
  cfg.hideChatForUrls = await getHideChatForUrls(cfg)
96
98
  const el = document.createElement(chatBotComponentName);
package/src/hooks.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import { useEffect } from "react";
2
+
1
3
  export function ensureViewportMeta() {
2
4
  if (typeof document === "undefined") return;
3
5
 
@@ -10,3 +12,21 @@ export function ensureViewportMeta() {
10
12
  document.head.appendChild(meta);
11
13
  }
12
14
 
15
+ export function useViewportHeightVar() {
16
+ useEffect(() => {
17
+ const setVh = () => {
18
+ const vh = window.innerHeight * 0.01;
19
+ document.documentElement.style.setProperty("--vh", `${vh}px`);
20
+ };
21
+
22
+ setVh();
23
+
24
+ window.addEventListener("resize", setVh);
25
+ window.addEventListener("orientationchange", setVh);
26
+
27
+ return () => {
28
+ window.removeEventListener("resize", setVh);
29
+ window.removeEventListener("orientationchange", setVh);
30
+ };
31
+ }, []);
32
+ }
package/src/service.ts CHANGED
@@ -37,6 +37,22 @@ export async function getApiStatus(config: Config): Promise<boolean> {
37
37
  return res.ok;
38
38
  }
39
39
 
40
+ export async function getClientActivityStatus(config: Config): Promise<boolean> {
41
+
42
+ const res = await fetch(config.apiBaseUrl + "api/client-activity-status", {
43
+ method: "GET",
44
+ headers: {
45
+ "Content-Type": "application/json",
46
+ ...(config.clientId ? { "X-Client-Id": config.clientId } : {}),
47
+ },
48
+ });
49
+
50
+ if (!res.ok) {
51
+ return false;
52
+ }
53
+
54
+ return res.body ? await res.json() as boolean : false;
55
+ }
40
56
 
41
57
  export async function getHideChatForUrls(config: Config): Promise<string[]> {
42
58