ss-support-widget 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ss-support-widget",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Chatbot widget for customer support",
   "main": "index.js",
   "scripts": {

package/src/ChatWidget.tsx

@@ -18,6 +18,7 @@ import SmartToyRoundedIcon from "@mui/icons-material/SmartToyRounded";
 import PersonRoundedIcon from "@mui/icons-material/PersonRounded";
 import ReactMarkdown from "react-markdown";
 import { Msg } from "./App";
+import { useViewportHeightVar } from "./hooks";
 
 
 export function ChatWidget({
@@ -42,6 +43,7 @@ export function ChatWidget({
     const endRef = useRef<HTMLDivElement | null>(null);
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    useViewportHeightVar();
 
     useEffect(() => {
         endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
@@ -76,9 +78,12 @@ export function ChatWidget({
                     elevation={isMobile ? 0 : 10}
                     sx={{
                         width: isMobile ? "100vw" : 380,
-                        height: isMobile ? "100vh" : 560,
+                        height: isMobile ? "calc(var(--vh, 1vh) * 100)" : 560,
+                        "@supports (height: 100dvh)": {
+                            height: isMobile ? "100dvh" : 560,
+                        },
                         maxWidth: "100vw",
-                        maxHeight: "100vh",
+                        maxHeight: "100dvh",
                         borderRadius: isMobile ? 0 : 4,
                         position: isMobile ? "fixed" : "relative",
                         inset: isMobile ? 0 : "auto",
@@ -101,7 +106,7 @@ export function ChatWidget({
                                 borderColor: "divider",
                                 background:
                                     "linear-gradient(135deg, rgba(25,118,210,.18), rgba(156,39,176,.14))",
-                                backdropFilter: "blur(10px)",
+                                backdropFilter: isMobile ? "none" : "blur(10px)",
                             }}
                         >
                             <Badge
@@ -149,7 +154,7 @@ export function ChatWidget({
                         <Box
                             sx={{
                                 flex: 1,
-                                minHeight: 250,
+                                minHeight: 0,
                                 position: "relative",
                                 // height: 300,
                                 overflow: "auto",
@@ -338,6 +343,9 @@ export function ChatWidget({
 
                         <Box
                             sx={{
+                                position: "sticky",
+                                bottom: 0,
+                                zIndex: 2,
                                 p: 1.25,
                                 borderTop: "1px solid",
                                 borderColor: "divider",
@@ -392,4 +400,4 @@ export function ChatWidget({
         </Box>
     );
 }
-export default ChatWidget;
+export default ChatWidget;

package/src/hooks.ts

@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+
 export function ensureViewportMeta() {
   if (typeof document === "undefined") return;
 
@@ -10,3 +12,21 @@ export function ensureViewportMeta() {
   document.head.appendChild(meta);
 }
 
+export function useViewportHeightVar() {
+  useEffect(() => {
+    const setVh = () => {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty("--vh", `${vh}px`);
+    };
+
+    setVh();
+
+    window.addEventListener("resize", setVh);
+    window.addEventListener("orientationchange", setVh);
+
+    return () => {
+      window.removeEventListener("resize", setVh);
+      window.removeEventListener("orientationchange", setVh);
+    };
+  }, []);
+}