@getwidgets/live-chat-widget 1.1.4 → 1.1.6

package/dist/live-chat-widget.umd.js

@@ -19710,6 +19710,12 @@
   function LuSend(props) {
     return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "m22 2-7 20-4-9-9-4Z" } }, { "tag": "path", "attr": { "d": "M22 2 11 13" } }] })(props);
   }
+  function ImAttachment(props) {
+    return GenIcon({ "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M10.404 5.11l-1.015-1.014-5.075 5.074c-0.841 0.841-0.841 2.204 0 3.044s2.204 0.841 3.045 0l6.090-6.089c1.402-1.401 1.402-3.673 0-5.074s-3.674-1.402-5.075 0l-6.394 6.393c-0.005 0.005-0.010 0.009-0.014 0.013-1.955 1.955-1.955 5.123 0 7.077s5.123 1.954 7.078 0c0.004-0.004 0.008-0.009 0.013-0.014l0.001 0.001 4.365-4.364-1.015-1.014-4.365 4.363c-0.005 0.004-0.009 0.009-0.013 0.013-1.392 1.392-3.656 1.392-5.048 0s-1.392-3.655 0-5.047c0.005-0.005 0.009-0.009 0.014-0.013l-0.001-0.001 6.395-6.393c0.839-0.84 2.205-0.84 3.045 0s0.839 2.205 0 3.044l-6.090 6.089c-0.28 0.28-0.735 0.28-1.015 0s-0.28-0.735 0-1.014l5.075-5.075z" } }] })(props);
+  }
+  function RiChatSmileLine(props) {
+    return GenIcon({ "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M6.45455 19L2 22.5V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.45455ZM5.76282 17H20V5H4V18.3851L5.76282 17ZM7 10H9C9 11.6569 10.3431 13 12 13C13.6569 13 15 11.6569 15 10H17C17 12.7614 14.7614 15 12 15C9.23858 15 7 12.7614 7 10Z" } }] })(props);
+  }
   const API_BASE_URL = "https://api.getwidgets.app";
   const WS_BASE_URL = "wss://api.getwidgets.app";
   const fetchWidgetConfig = async (widgetId) => {
@@ -19751,7 +19757,7 @@
     return sessionId;
   };
   const LiveChatWidget = ({ widgetId, name: name2 = null, email = null, unique_id = null }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const [showMenu, setShowMenu] = reactExports.useState(false);
     const endChatButtonRef = reactExports.useRef(null);
     const [config, setConfig] = reactExports.useState(null);
@@ -19783,6 +19789,43 @@
     const [contactEmail, setContactEmail] = reactExports.useState("");
     const [showContactFields, setShowContactFields] = reactExports.useState(false);
     const [showContactErrors, setShowContactErrors] = reactExports.useState(false);
+    const [selectedFile, setSelectedFile] = reactExports.useState(null);
+    const [uploadingFile, setUploadingFile] = reactExports.useState(false);
+    const [previewImage, setPreviewImage] = reactExports.useState(null);
+    const [selectedFilePreviewUrl, setSelectedFilePreviewUrl] = reactExports.useState("");
+    const [fileSizeError, setFileSizeError] = reactExports.useState(null);
+    const fileInputRef = reactExports.useRef(null);
+    const MAX_FILE_SIZE = 5 * 1024 * 1024;
+    const validateFileSize = (file) => {
+      if (file.size > MAX_FILE_SIZE) {
+        setFileSizeError(`File size exceeds 5MB limit (${(file.size / (1024 * 1024)).toFixed(1)}MB)`);
+        return false;
+      }
+      setFileSizeError(null);
+      return true;
+    };
+    reactExports.useEffect(() => {
+      const handlePaste = (e) => {
+        if (selectedFile) return;
+        if (e.clipboardData && e.clipboardData.files && e.clipboardData.files.length > 0) {
+          const file = e.clipboardData.files[0];
+          if (file.type.startsWith("image/")) {
+            if (validateFileSize(file)) {
+              setSelectedFile(file);
+              setInputMessage("");
+              e.preventDefault();
+            }
+          }
+        }
+      };
+      const input = inputRef.current;
+      if (input) input.addEventListener("paste", handlePaste);
+      document.addEventListener("paste", handlePaste);
+      return () => {
+        if (input) input.removeEventListener("paste", handlePaste);
+        document.removeEventListener("paste", handlePaste);
+      };
+    }, [selectedFile]);
     const base64UrlEncode = (value) => {
       const json = typeof value === "string" ? value : JSON.stringify(value);
       const base64 = btoa(unescape(encodeURIComponent(json)));
@@ -19800,24 +19843,40 @@
         const role2 = m2.sent_by === "user" ? "user" : "agent";
         const content22 = m2.message || m2.text || m2.content || "";
         const ts2 = m2.timestamp || m2.created_at || Date.now();
-        return {
+        const normalized2 = {
           id: m2.id || m2.uuid,
           role: role2,
           content: content22,
           timestamp: new Date(ts2).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
           created_at: ts2
         };
+        if (m2.is_file) {
+          normalized2.is_file = true;
+          normalized2.file_url = m2.file_url;
+          normalized2.file_name = m2.file_name;
+          normalized2.file_size = m2.file_size;
+          normalized2.content_type = m2.content_type;
+        }
+        return normalized2;
       }
       const role = m2.role === "user" || m2.role === "visitor" ? "user" : m2.role || "agent";
       const content2 = m2.content || m2.message || m2.text || "";
       const ts = m2.created_at || m2.timestamp || Date.now();
-      return {
+      const normalized = {
         id: m2.id || m2.uuid,
         role,
         content: content2,
         timestamp: new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
         created_at: ts
       };
+      if (m2.is_file) {
+        normalized.is_file = true;
+        normalized.file_url = m2.file_url;
+        normalized.file_name = m2.file_name;
+        normalized.file_size = m2.file_size;
+        normalized.content_type = m2.content_type;
+      }
+      return normalized;
     };
     reactExports.useEffect(() => {
       const handleResize = () => {
@@ -19839,6 +19898,18 @@
       const id2 = getSessionId();
       setSessionId(id2);
     }, [widgetId]);
+    reactExports.useEffect(() => {
+      var _a2;
+      if (!selectedFile || !((_a2 = selectedFile.type) == null ? void 0 : _a2.startsWith("image/"))) {
+        setSelectedFilePreviewUrl("");
+        return;
+      }
+      const localUrl = URL.createObjectURL(selectedFile);
+      setSelectedFilePreviewUrl(localUrl);
+      return () => {
+        URL.revokeObjectURL(localUrl);
+      };
+    }, [selectedFile]);
     reactExports.useEffect(() => {
       if (typeof window === "undefined") return;
       try {
@@ -19948,6 +20019,7 @@
       }
     }, []);
     const startLiveSession = async (widgetUuid, currentSessionId) => {
+      var _a2;
       try {
         const url = `${API_BASE_URL}/api/widgets/livechat/start/${widgetUuid}/`;
         const storedAuthToken = authToken || (typeof window !== "undefined" ? localStorage.getItem("widgetkraft_livechat_authtoken") : null);
@@ -19961,7 +20033,14 @@
           throw new Error(txt || "Failed to start session");
         }
         const data = await res.json();
-        return data.session_id || data.id || currentSessionId;
+        if (!(data == null ? void 0 : data.success)) {
+          throw new Error("Session start API returned unsuccessful response");
+        }
+        const returnedSessionId = ((_a2 = data == null ? void 0 : data.data) == null ? void 0 : _a2.session_uuid) || (data == null ? void 0 : data.session_id) || (data == null ? void 0 : data.id) || currentSessionId;
+        if (!returnedSessionId) {
+          throw new Error("Session start API did not return a session id");
+        }
+        return returnedSessionId;
       } catch (e) {
         console.warn("startLiveSession failed", e);
         throw e;
@@ -20116,7 +20195,7 @@
       return false;
     };
     const initializeSession = async (firstMessage) => {
-      if (isSessionInitialized) return true;
+      if (isSessionInitialized && sessionId) return sessionId;
       setIsConnecting(true);
       setLocalLoading(true);
       try {
@@ -20133,7 +20212,7 @@
             const sent = sendMessageOverWebSocket(firstMessage);
             if (!sent) {
               setLocalMessages((prev) => [...prev, {
-                id: `error-${Date.now()}`,
+                id: v4(),
                 role: "system",
                 content: "Failed to send message. Please try again.",
                 isError: true
@@ -20141,24 +20220,68 @@
             }
           }
         });
-        return true;
+        return sid;
       } catch (error) {
         console.error("Failed to initialize session:", error);
         setLocalLoading(false);
         setIsConnecting(false);
         setLocalMessages((prev) => [...prev, {
-          id: `error-${Date.now()}`,
+          id: v4(),
           role: "system",
           content: "Failed to connect to support. Please try again.",
           isError: true
         }]);
+        return null;
+      }
+    };
+    const uploadFile = async (file, caption) => {
+      if (!file) return false;
+      if (!validateFileSize(file)) {
+        setUploadingFile(false);
+        return false;
+      }
+      setUploadingFile(true);
+      let activeSessionId = sessionId;
+      if (!isSessionInitialized) {
+        const initializedSessionId = await initializeSession("");
+        if (!initializedSessionId) {
+          setUploadingFile(false);
+          return false;
+        }
+        activeSessionId = initializedSessionId;
+      }
+      if (!activeSessionId) {
+        setUploadingFile(false);
+        return false;
+      }
+      try {
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("message", caption || "");
+        const uploadUrl = `${API_BASE_URL}/api/widgets/livechat/${activeSessionId}/upload/`;
+        const response = await fetch(uploadUrl, {
+          method: "POST",
+          body: formData
+        });
+        if (response.status === 201) {
+          setSelectedFile(null);
+          setUploadingFile(false);
+          return true;
+        } else {
+          console.error("File upload failed:", response.statusText);
+          setUploadingFile(false);
+          return false;
+        }
+      } catch (error) {
+        console.error("File upload error:", error);
+        setUploadingFile(false);
         return false;
       }
     };
     const performSend = async () => {
       const msg = (inputMessage || "").trim();
       if (!msg) return;
-      const localId = `local-${Date.now()}`;
+      const localId = v4();
       const userMsg = {
         id: localId,
         role: "user",
@@ -20170,7 +20293,7 @@
       setInputMessage("");
       if (!isSessionInitialized) {
         setLocalMessages((prev) => [...prev, {
-          id: `sys-${Date.now()}`,
+          id: v4(),
           role: "system",
           content: "Connecting to support..."
         }]);
@@ -20183,7 +20306,7 @@
         if (!sent) {
           setTimeout(() => {
             setLocalMessages((prev) => [...prev, {
-              id: `sys-${Date.now()}`,
+              id: v4(),
               role: "system",
               content: "Reconnecting..."
             }]);
@@ -20194,7 +20317,7 @@
     const handleKeyPress = (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
-        performSend();
+        performSendWithContact();
       }
     };
     const toggleWidget = () => {
@@ -20236,16 +20359,22 @@
       const isMobile2 = windowWidth < 768;
       if (isMobile2) {
         return {
-          width: "95vw",
-          height: "85dvh",
-          maxWidth: "95vw",
-          maxHeight: "calc(100dvh - 24px)",
-          borderRadius: appearanceConfig.border_radius || "12px"
+          width: "100vw",
+          height: "100dvh",
+          // Use dynamic viewport height to account for mobile browser UI
+          maxWidth: "100vw",
+          maxHeight: "100dvh",
+          bottom: "0",
+          right: "0",
+          left: "0",
+          borderRadius: "0",
+          margin: "0",
+          padding: "0"
         };
       }
       return {
-        width: appearanceConfig.width || "400px",
-        height: appearanceConfig.height || "600px",
+        width: "430px",
+        height: "700px",
         maxWidth: "90vw",
         maxHeight: "90vh"
       };
@@ -20254,16 +20383,19 @@
       const position2 = appearanceConfig.position || "bottom-right";
       const isMobile2 = windowWidth < 768;
       const baseStyles = { position: "fixed", zIndex: 9999 };
-      const edgeSpacing = isMobile2 ? "12px" : "20px";
+      if (isMobile2 && isOpen) {
+        return { ...baseStyles, left: 0, right: 0, bottom: 0, top: 0, margin: 0, padding: 0 };
+      }
+      const spacing = isMobile2 ? "16px" : "20px";
       switch (position2) {
         case "bottom-left":
-          return { ...baseStyles, left: edgeSpacing, bottom: edgeSpacing };
+          return { ...baseStyles, left: spacing, bottom: spacing };
         case "top-left":
-          return { ...baseStyles, left: edgeSpacing, top: edgeSpacing };
+          return { ...baseStyles, left: spacing, top: spacing };
         case "top-right":
-          return { ...baseStyles, right: edgeSpacing, top: edgeSpacing };
+          return { ...baseStyles, right: spacing, top: spacing };
         default:
-          return { ...baseStyles, right: edgeSpacing, bottom: edgeSpacing };
+          return { ...baseStyles, right: spacing, bottom: spacing };
       }
     };
     const responsiveDimensions = getResponsiveDimensions();
@@ -20309,12 +20441,7 @@
         setShowContactFields(false);
       }
     }, [inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email, authToken, isOpen]);
-    const isValidEmail = (value) => {
-      if (!value) return false;
-      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value).trim());
-    };
-    const emailIsInvalid = showContactFields && contactEmail.trim() && !isValidEmail(contactEmail);
-    const isContactValid = !(inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email) || (!showContactFields ? true : contactName.trim() && contactEmail.trim() && isValidEmail(contactEmail));
+    const isContactValid = !(inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email) || (!showContactFields ? true : contactName.trim() && contactEmail.trim());
     const createAndStoreAuthToken = () => {
       const payload = { name: contactName.trim(), email: contactEmail.trim(), unique_id };
       const token = buildUnsignedJwt(payload);
@@ -20329,14 +20456,21 @@
       if ((inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email) && !authToken) {
         const missingName = !contactName.trim();
         const missingEmail = !contactEmail.trim();
-        const invalidEmail = !missingEmail && !isValidEmail(contactEmail);
-        if (missingName || missingEmail || invalidEmail) {
+        if (missingName || missingEmail) {
           setShowContactErrors(true);
           return;
         }
         createAndStoreAuthToken();
         setShowContactFields(false);
       }
+      if (selectedFile) {
+        const success = await uploadFile(selectedFile, inputMessage);
+        if (success) {
+          setInputMessage("");
+          if (fileInputRef.current) fileInputRef.current.value = "";
+        }
+        return;
+      }
       await performSend();
     };
     reactExports.useEffect(() => {
@@ -20374,38 +20508,28 @@
       return () => btn.removeEventListener("click", handleClick, true);
     }, []);
     if (!config) return null;
-    const handleStartNewChat = () => {
-      try {
-        const newSessionId = v4();
-        if (wsRef.current) {
-          try {
-            wsRef.current.close();
-          } catch (e) {
-          }
-          wsRef.current = null;
+    const handleEndChat = () => {
+      if (wsRef.current) {
+        try {
+          wsRef.current.close();
+        } catch (e) {
         }
+        wsRef.current = null;
+      }
+      const newSessionId = v4();
+      setSessionId(newSessionId);
+      setLocalMessages([]);
+      setInputMessage("");
+      setIsSessionInitialized(false);
+      setHasCheckedSession(false);
+      try {
         localStorage.setItem("live-chat-widget/session-id", newSessionId);
-        setSessionId(newSessionId);
-        setHasCheckedSession(false);
-        setIsConnecting(false);
-        setLocalLoading(false);
-        setAuthToken(null);
-        setMessages([]);
-        setLocalMessages([]);
-        setInputMessage("");
-        setIsSessionInitialized(false);
-        setShowMenu(false);
-        setContactName("");
-        setContactEmail("");
-        setShowContactFields(!!(inputAreaConfig == null ? void 0 : inputAreaConfig.allow_chat_with_email));
       } catch (e) {
       }
-    };
-    const handleEndChat = () => {
-      handleStartNewChat();
+      setShowMenu(false);
     };
     const MenuDotsIcon = ({ color: color2 = "#fff", size = 22 }) => /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "5", r: "2", fill: color2 }), /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "2", fill: color2 }), /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "19", r: "2", fill: color2 }));
-    return /* @__PURE__ */ React.createElement("div", { style: getPositionStyles() }, !isOpen && showNotificationPreview && /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { style: getPositionStyles() }, !isOpen && showNotificationPreview && !isMobile && /* @__PURE__ */ React.createElement(
       "div",
       {
         role: "button",
@@ -20446,10 +20570,10 @@
         },
         unreadCount > 99 ? "99+" : unreadCount
       ),
-      /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 flex-1" }, headerConfig.logo_url ? /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 flex-1" }, headerConfig.square_logo_url ? /* @__PURE__ */ React.createElement(
         "img",
         {
-          src: headerConfig.logo_url,
+          src: headerConfig.square_logo_url,
           alt: "Chat",
           className: "responsive-notification-logo",
           style: {
@@ -20470,18 +20594,7 @@
             flexShrink: 0
           }
         },
-        /* @__PURE__ */ React.createElement(
-          "svg",
-          {
-            viewBox: "0 0 24 24",
-            fill: "currentColor",
-            style: {
-              width: "16px",
-              height: "16px"
-            }
-          },
-          /* @__PURE__ */ React.createElement("path", { d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z" })
-        )
+        /* @__PURE__ */ React.createElement(RiChatSmileLine, { color: headerConfig.font_color || "#FFFFFF", size: 20 })
       ), /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement("h3", { className: "font-semibold text-sm", style: headerConfig.font_color ? { color: headerConfig.font_color } : { color: "black" } }, headerConfig.title || "Live Chat"), /* @__PURE__ */ React.createElement("p", { className: "text-xs opacity-70", style: headerConfig.font_color ? { color: headerConfig.font_color } : { color: "black" } }, "Just now"))), /* @__PURE__ */ React.createElement(
         "button",
         {
@@ -20492,7 +20605,7 @@
         "×"
       )),
       /* @__PURE__ */ React.createElement("p", { className: "text-sm leading-relaxed text-gray-200", style: { fontSize: isMobile ? "13px" : "14px", color: headerConfig.font_color ? headerConfig.font_color : "#000000" } }, (latestMessage == null ? void 0 : latestMessage.content) || (inputAreaConfig == null ? void 0 : inputAreaConfig.welcome_message) || (inputAreaConfig == null ? void 0 : inputAreaConfig.first_ai_message) || headerConfig.subtitle || "Connect with visitors")
-    ), !isOpen && !showNotificationPreview && /* @__PURE__ */ React.createElement(
+    ), !isOpen && (!showNotificationPreview || isMobile) && /* @__PURE__ */ React.createElement(
       "button",
       {
         onClick: toggleWidget,
@@ -20507,17 +20620,17 @@
           margin: isMobile ? "16px" : "0"
         }
       },
-      headerConfig.logo_url ? /* @__PURE__ */ React.createElement(
+      headerConfig.square_logo_url ? /* @__PURE__ */ React.createElement(
         "img",
         {
-          src: headerConfig.logo_url,
+          src: headerConfig.square_logo_url,
           alt: "logo",
           style: {
             width: "auto",
             height: `${headerConfig.logo_size || 32}px`
           }
         }
-      ) : /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", style: { width: isMobile ? 18 : 20, height: isMobile ? 18 : 20 } }, /* @__PURE__ */ React.createElement("path", { d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z" })),
+      ) : /* @__PURE__ */ React.createElement(RiChatSmileLine, { color: headerConfig.font_color || "#FFFFFF", size: isMobile ? 24 : 26 }),
       unreadCount > 0 && /* @__PURE__ */ React.createElement(
         "div",
         {
@@ -20536,16 +20649,18 @@
     ), isOpen && /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: "rounded-xl shadow-lg overflow-hidden transition-all duration-300 flex flex-col",
+        className: "overflow-hidden transition-all duration-300 flex flex-col",
         style: {
           width: responsiveDimensions.width,
           height: responsiveDimensions.height,
           maxWidth: responsiveDimensions.maxWidth,
           maxHeight: responsiveDimensions.maxHeight,
           backgroundColor: appearanceConfig.background_color || "#F9FAFB",
-          borderRadius: isMobile ? responsiveDimensions.borderRadius : appearanceConfig.border_radius || "16px",
+          borderRadius: isMobile ? "0" : appearanceConfig.border_radius || "16px",
           fontFamily: headerConfig.font_family || "'Inter', sans-serif",
-          ...isMobile ? { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 } : {}
+          display: "flex",
+          flexDirection: "column",
+          boxShadow: isMobile ? "none" : "0 10px 25px rgba(0, 0, 0, 0.1)"
         }
       },
       /* @__PURE__ */ React.createElement(
@@ -20555,14 +20670,18 @@
           style: {
             backgroundColor: headerConfig.background_color || "#111827",
             color: headerConfig.font_color || "#FFFFFF",
-            padding: isMobile ? "12px 16px" : "16px 20px",
-            minHeight: "auto"
+            padding: isMobile ? "10px 12px" : "16px 20px",
+            minHeight: "auto",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between"
           }
         },
-        /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement("div", { className: "relative", style: { width: isMobile ? "40px" : "36px" } }, /* @__PURE__ */ React.createElement(
           "button",
           {
-            className: "livechat-menu-trigger absolute left-3 top-1/2 transform -translate-y-1/2 hover:opacity-80 transition-opacity",
+            onClick: () => setShowMenu(!showMenu),
+            className: "hover:opacity-80 transition-opacity livechat-menu-trigger",
             style: {
               background: "none",
               border: "none",
@@ -20573,74 +20692,66 @@
               alignItems: "center",
               justifyContent: "center",
               padding: 0,
-              zIndex: 20
-            },
-            onClick: (e) => {
-              e.stopPropagation();
-              setShowMenu((v2) => !v2);
+              color: getContrastColor(headerConfig.background_color || "#111827")
             },
-            "aria-label": "Open menu"
+            "aria-label": "Menu"
           },
-          /* @__PURE__ */ React.createElement(MenuDotsIcon, { color: getContrastColor(headerConfig.background_color || "#111827"), size: isMobile ? 22 : 22 })
-        ),
-        showMenu && /* @__PURE__ */ React.createElement(
+          /* @__PURE__ */ React.createElement(MenuDotsIcon, { color: getContrastColor(headerConfig.background_color || "#111827"), size: isMobile ? 22 : 20 })
+        ), showMenu && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: "livechat-menu-popup absolute left-3 top-12 bg-white rounded shadow-lg border",
+            className: "livechat-menu-popup",
             style: {
-              minWidth: isMobile ? "132px" : "120px",
-              top: isMobile ? "calc(50% + 18px)" : "calc(50% + 16px)",
-              left: isMobile ? "8px" : "12px",
-              zIndex: 30,
-              boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
-              border: "1px solid #e5e7eb",
-              padding: "6px 0",
-              color: "#111827",
-              fontSize: isMobile ? "16px" : "15px",
-              fontWeight: 500
+              position: "absolute",
+              left: "8px",
+              top: "calc(100% + 4px)",
+              backgroundColor: "#FFFFFF",
+              border: "1px solid #E5E7EB",
+              borderRadius: "8px",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+              zIndex: 1e3,
+              minWidth: "140px"
             }
           },
           /* @__PURE__ */ React.createElement(
             "button",
             {
               ref: endChatButtonRef,
-              className: "transition-all duration-200 hover:bg-red-50",
-              type: "button",
-              tabIndex: "0",
+              onClick: () => {
+                handleEndChat();
+              },
               style: {
-                background: "none",
-                border: "none",
                 width: "100%",
-                cursor: "pointer",
-                padding: isMobile ? "8px 12px" : "6px 12px",
-                minHeight: "32px",
-                fontSize: isMobile ? "14px" : "13px",
-                color: "#DC2626",
+                padding: "10px 14px",
+                border: "none",
+                backgroundColor: "transparent",
+                color: "#EF4444",
+                fontSize: "14px",
                 fontWeight: "500",
-                borderRadius: "6px",
-                margin: "0",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                userSelect: "none"
+                cursor: "pointer",
+                textAlign: "left",
+                borderRadius: "8px"
               },
-              onClick: (e) => {
-                var _a2, _b2;
-                e.preventDefault();
-                e.stopPropagation();
-                (_b2 = (_a2 = e.nativeEvent) == null ? void 0 : _a2.stopImmediatePropagation) == null ? void 0 : _b2.call(_a2);
-                handleEndChat();
-                setTimeout(() => setShowMenu(false), 0);
-              }
+              onMouseOver: (e) => e.currentTarget.style.backgroundColor = "rgba(239, 68, 68, 0.1)",
+              onMouseOut: (e) => e.currentTarget.style.backgroundColor = "transparent"
             },
             "End Chat"
           )
-        ),
+        )),
+        /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center flex-1" }, headerConfig.logo_url && /* @__PURE__ */ React.createElement(
+          "img",
+          {
+            src: headerConfig.logo_url,
+            alt: "logo",
+            className: "w-auto mx-auto mb-2",
+            style: { height: `${headerConfig.logo_size || 32}px` }
+          }
+        ), !headerConfig.hide_title && /* @__PURE__ */ React.createElement("h2", { className: "font-semibold leading-tight", style: { fontSize: isMobile ? "14px" : "16px", margin: "0" } }, headerConfig.title || "Live Chat"), /* @__PURE__ */ React.createElement("p", { className: "opacity-80 leading-tight", style: { fontSize: isMobile ? "11px" : "13px", margin: "2px 0 0 0" } }, headerConfig.subtitle || "Connect with visitors")),
         /* @__PURE__ */ React.createElement(
           "button",
           {
             onClick: toggleWidget,
-            className: "absolute right-3 top-1/2 transform -translate-y-1/2 hover:opacity-80 transition-opacity",
+            className: "hover:opacity-80 transition-opacity",
             style: {
               background: "none",
               border: "none",
@@ -20656,16 +20767,7 @@
             }
           },
           "×"
-        ),
-        /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center" }, headerConfig.logo_url && /* @__PURE__ */ React.createElement(
-          "img",
-          {
-            src: headerConfig.logo_url,
-            alt: "logo",
-            className: "w-auto mx-auto mb-2",
-            style: { height: `${headerConfig.logo_size || 32}px` }
-          }
-        ), !headerConfig.hide_title && /* @__PURE__ */ React.createElement("h2", { className: "font-semibold leading-tight", style: { fontSize: isMobile ? "14px" : "16px", margin: "0" } }, headerConfig.title || "Live Chat"), /* @__PURE__ */ React.createElement("p", { className: "opacity-80 leading-tight", style: { fontSize: isMobile ? "11px" : "13px", margin: "2px 0 0 0" } }, headerConfig.subtitle || "Connect with visitors"))
+        )
       ),
       /* @__PURE__ */ React.createElement(
         "div",
@@ -20685,9 +20787,10 @@
           opacity: appearanceConfig.background_opacity ?? 1,
           zIndex: 0
         } }),
-        /* @__PURE__ */ React.createElement("div", { className: "relative z-10 p-3 sm:p-4 space-y-2 sm:space-y-3", style: {
+        /* @__PURE__ */ React.createElement("div", { className: "relative z-10 space-y-2 sm:space-y-3", style: {
           backgroundColor: appearanceConfig.inner_background_color !== void 0 ? appearanceConfig.inner_background_color : "transparent",
-          paddingBottom: isMobile ? "20px" : "16px"
+          padding: isMobile ? "8px 10px" : "12px 16px",
+          paddingBottom: isMobile ? "12px" : "16px"
         } }, combinedMessages.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-start" }, /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -20704,7 +20807,84 @@
           inputAreaConfig.welcome_message || inputAreaConfig.first_ai_message || "Hello! How can I assist you today?"
         )) : combinedMessages.map((message) => {
           const timeText = getMessageTime(message);
-          return /* @__PURE__ */ React.createElement("div", { key: message.id, className: `flex flex-col ${message.role === "user" ? "items-end" : "items-start"}` }, /* @__PURE__ */ React.createElement(
+          return /* @__PURE__ */ React.createElement("div", { key: message.id, className: `flex flex-col ${message.role === "user" ? "items-end" : "items-start"}` }, message.is_file && message.file_url ? /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: `flex flex-col gap-2 ${message.role === "user" ? "items-end" : "items-start"}`,
+              style: { marginBottom: 4 }
+            },
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                className: "rounded-xl overflow-hidden cursor-pointer hover:opacity-95 transition-opacity border shadow-sm",
+                onClick: () => setPreviewImage(message.file_url),
+                style: {
+                  background: "#fff",
+                  display: "block",
+                  maxWidth: isMobile ? 180 : 220,
+                  maxHeight: 160,
+                  minWidth: 64,
+                  minHeight: 48,
+                  borderRadius: 18,
+                  border: "1.5px solid #e5e7eb",
+                  boxShadow: "0 2px 8px 0 rgba(0,0,0,0.06)",
+                  padding: 0,
+                  marginLeft: message.role === "user" ? "auto" : void 0,
+                  marginRight: message.role === "user" ? 0 : void 0
+                }
+              },
+              message.content_type && message.content_type.startsWith("image/") ? /* @__PURE__ */ React.createElement(
+                "img",
+                {
+                  src: message.file_url,
+                  alt: message.file_name,
+                  style: {
+                    width: "100%",
+                    height: "auto",
+                    maxHeight: 160,
+                    objectFit: "cover",
+                    borderRadius: 18,
+                    aspectRatio: "4/3",
+                    background: "#f3f4f6",
+                    display: "block",
+                    transition: "box-shadow 0.2s"
+                  }
+                }
+              ) : /* @__PURE__ */ React.createElement(
+                "div",
+                {
+                  className: "flex flex-col items-center justify-center gap-1",
+                  style: {
+                    width: 120,
+                    height: 64,
+                    background: "#f3f4f6",
+                    borderRadius: 16,
+                    padding: 8
+                  }
+                },
+                /* @__PURE__ */ React.createElement(ImAttachment, { style: { fontSize: 25, color: getContrastColor(inputAreaConfig.background_color) } }),
+                /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, color: "#374151", wordBreak: "break-all", textAlign: "center" } }, message.file_name)
+              )
+            ),
+            message.content && /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                className: "px-3 py-1 rounded-lg mt-1",
+                style: {
+                  backgroundColor: message.role === "user" ? chatAreaConfig.user_response_color || "#4ADE80" : chatAreaConfig.ai_response_color || "#E2E8F0",
+                  borderRadius: chatAreaConfig.chat_bubble_radius || "16px",
+                  fontSize: isMobile ? "13px" : "14px",
+                  color: message.role === "user" ? chatAreaConfig.user_font_color || "#111827" : chatAreaConfig.ai_font_color || "#111827",
+                  maxWidth: isMobile ? 180 : 220,
+                  marginLeft: message.role === "user" ? "auto" : void 0,
+                  marginRight: message.role === "user" ? 0 : void 0,
+                  wordBreak: "break-word",
+                  textAlign: "center"
+                }
+              },
+              /* @__PURE__ */ React.createElement(Markdown, { remarkPlugins: [remarkGfm] }, message.content)
+            )
+          ) : /* @__PURE__ */ React.createElement(
             "div",
             {
               className: `p-3 inline-block rounded-lg`,
@@ -20741,51 +20921,112 @@
           style: {
             backgroundColor: inputAreaConfig.background_color || "#FFF",
             borderColor: inputAreaConfig.border_color || "#D1D5DB",
-            minHeight: isMobile ? 64 : 70,
+            minHeight: "auto",
             position: "relative",
-            padding: isMobile ? "10px 12px" : "12px 16px",
-            gap: isMobile ? "8px" : "12px"
+            padding: isMobile ? "8px 10px" : "12px 16px",
+            gap: isMobile ? "6px" : "12px"
           }
         },
         /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 w-full" }, /* @__PURE__ */ React.createElement(
           "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            onChange: (e) => {
+              if (e.target.files && e.target.files[0]) {
+                const file = e.target.files[0];
+                if (validateFileSize(file)) {
+                  setSelectedFile(file);
+                  setInputMessage("");
+                }
+              }
+            },
+            style: { display: "none" },
+            accept: "*/*"
+          }
+        ), /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            onClick: () => {
+              var _a2;
+              return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+            },
+            disabled: uploadingFile || localLoading || selectedFile !== null,
+            className: "rounded-full flex items-center justify-center flex-shrink-0 hover:opacity-90 transition-opacity",
+            title: "Upload file",
+            style: {
+              backgroundColor: selectedFile ? ((_b = inputAreaConfig.send_button) == null ? void 0 : _b.color) || "#2563EB" : inputAreaConfig.border_color || "#D1D5DB",
+              width: "40px",
+              height: "40px",
+              minWidth: "40px",
+              minHeight: "40px",
+              opacity: uploadingFile || selectedFile ? 0.5 : 1,
+              transition: "opacity 0.2s",
+              border: "none",
+              cursor: selectedFile ? "not-allowed" : "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }
+          },
+          uploadingFile ? /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: "rounded-full",
+              style: {
+                width: 16,
+                height: 16,
+                border: "2px solid #FFFFFF",
+                borderTop: "2px solid transparent",
+                animation: "spin 0.8s linear infinite"
+              }
+            }
+          ) : /* @__PURE__ */ React.createElement("span", { style: { fontSize: "16px" } }, /* @__PURE__ */ React.createElement(ImAttachment, { style: { color: getContrastColor(inputAreaConfig.background_color) } }))
+        ), /* @__PURE__ */ React.createElement(
+          "textarea",
           {
             ref: inputRef,
             value: inputMessage,
             onChange: (e) => setInputMessage(e.target.value),
-            onKeyPress: handleKeyPress,
-            disabled: localLoading,
-            className: "flex-1 px-3 py-2 border rounded-lg",
+            onKeyDown: handleKeyPress,
+            disabled: localLoading || uploadingFile,
+            className: "flex-1 px-3 py-2 border rounded-lg resize-none custom-chat-textarea",
             style: {
               borderColor: inputAreaConfig.border_color || "#D1D5DB",
               color: inputAreaConfig.text_color || "#111827",
               fontSize: isMobile ? "14px" : "14px",
               backgroundColor: inputAreaConfig.background_color || "#FFF",
               minHeight: "40px",
+              maxHeight: "120px",
+              // 4 rows approx
               padding: isMobile ? "8px 12px" : "10px 12px",
-              lineHeight: "1.5"
+              lineHeight: "1.5",
+              overflowY: "auto",
+              boxSizing: "border-box"
             },
-            placeholder: inputAreaConfig.placeholder_text || "Type your message..."
+            placeholder: selectedFile ? "Add a caption (optional)" : inputAreaConfig.placeholder_text || "Type your message...",
+            rows: 1,
+            maxLength: 2e3
           }
         ), /* @__PURE__ */ React.createElement(
           "button",
           {
             onClick: performSendWithContact,
-            disabled: localLoading || !inputMessage.trim(),
+            disabled: localLoading || uploadingFile || !selectedFile && !inputMessage.trim() || !isContactValid,
             className: "rounded-full flex items-center justify-center flex-shrink-0 hover:opacity-90 transition-opacity",
             style: {
-              backgroundColor: ((_b = inputAreaConfig.send_button) == null ? void 0 : _b.color) || "#2563EB",
+              backgroundColor: ((_c = inputAreaConfig.send_button) == null ? void 0 : _c.color) || "#2563EB",
               width: `${sendButtonSize}px`,
               height: `${sendButtonSize}px`,
               minWidth: `${sendButtonSize}px`,
               minHeight: `${sendButtonSize}px`,
-              opacity: localLoading || !inputMessage.trim() || !isContactValid ? 0.5 : 1,
+              opacity: localLoading || uploadingFile || !selectedFile && !inputMessage.trim() || !isContactValid ? 0.5 : 1,
               transition: "opacity 0.2s",
               border: "none",
               cursor: "pointer"
             }
           },
-          localLoading ? /* @__PURE__ */ React.createElement(
+          localLoading || uploadingFile ? /* @__PURE__ */ React.createElement(
             "div",
             {
               className: "rounded-full animate-spin",
@@ -20797,10 +21038,10 @@
               }
             }
           ) : (() => {
-            var _a2, _b2, _c;
+            var _a2, _b2, _c2;
             const iconComponentKey = (_a2 = inputAreaConfig == null ? void 0 : inputAreaConfig.send_button) == null ? void 0 : _a2.icon_component;
             const iconUrl = (_b2 = inputAreaConfig == null ? void 0 : inputAreaConfig.send_button) == null ? void 0 : _b2.icon_url;
-            const iconColor = ((_c = inputAreaConfig == null ? void 0 : inputAreaConfig.send_button) == null ? void 0 : _c.icon_color) || "#FFFFFF";
+            const iconColor = ((_c2 = inputAreaConfig == null ? void 0 : inputAreaConfig.send_button) == null ? void 0 : _c2.icon_color) || "#FFFFFF";
             if (iconComponentKey && ICON_MAP[iconComponentKey]) {
               const Icon2 = ICON_MAP[iconComponentKey];
               return /* @__PURE__ */ React.createElement(Icon2, { className: "w-4 h-4", style: { color: iconColor } });
@@ -20809,8 +21050,110 @@
             return /* @__PURE__ */ React.createElement(Send, { className: "w-4 h-4", style: { color: "#FFFFFF" } });
           })()
         )),
+        fileSizeError && /* @__PURE__ */ React.createElement("div", { style: {
+          padding: isMobile ? "8px 10px" : "10px 12px",
+          marginBottom: "6px",
+          borderRadius: "6px",
+          border: "1px solid #EF4444",
+          backgroundColor: "#FEE2E2",
+          fontSize: isMobile ? "12px" : "13px",
+          color: "#991B1B",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "8px"
+        } }, /* @__PURE__ */ React.createElement("span", null, fileSizeError), /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            onClick: () => setFileSizeError(null),
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              color: "#991B1B",
+              fontSize: isMobile ? "14px" : "16px",
+              padding: "0",
+              minWidth: "auto"
+            },
+            "aria-label": "Close error"
+          },
+          "×"
+        )),
+        selectedFile && /* @__PURE__ */ React.createElement("div", { className: "border rounded-lg", style: {
+          borderColor: inputAreaConfig.border_color || "#D1D5DB",
+          backgroundColor: inputAreaConfig.background_color || "#FFF",
+          padding: isMobile ? "8px" : "12px",
+          maxWidth: isMobile ? "100%" : 220,
+          marginBottom: "4px"
+        } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-2" }, /* @__PURE__ */ React.createElement("div", { style: { color: inputAreaConfig.text_color || "#111827", fontSize: isMobile ? "12px" : "13px", fontWeight: "600" } }, "Selected file"), /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            onClick: () => {
+              setSelectedFile(null);
+              setInputMessage("");
+              if (fileInputRef.current) fileInputRef.current.value = "";
+            },
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              color: inputAreaConfig.text_color || "#111827",
+              fontSize: "16px"
+            }
+          },
+          "✕"
+        )), selectedFilePreviewUrl ? /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: "overflow-hidden rounded-xl border mb-2 shadow-sm",
+            style: {
+              borderColor: inputAreaConfig.border_color || "#D1D5DB",
+              width: "100%",
+              maxWidth: 180,
+              minWidth: 64,
+              minHeight: 48,
+              maxHeight: 160,
+              borderRadius: 18,
+              background: "#f3f4f6",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "img",
+            {
+              src: selectedFilePreviewUrl,
+              alt: selectedFile.name,
+              style: {
+                width: "100%",
+                height: "auto",
+                maxHeight: 160,
+                objectFit: "cover",
+                borderRadius: 18,
+                aspectRatio: "4/3",
+                background: "#f3f4f6",
+                display: "block"
+              }
+            }
+          )
+        ) : /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: "rounded-xl border mb-2 flex items-center justify-center",
+            style: {
+              borderColor: inputAreaConfig.border_color || "#D1D5DB",
+              width: 120,
+              height: 64,
+              color: inputAreaConfig.text_color || "#111827",
+              background: "#f3f4f6",
+              borderRadius: 16
+            }
+          },
+          /* @__PURE__ */ React.createElement(ImAttachment, { style: { fontSize: 28, color: "#6b7280" } })
+        ), /* @__PURE__ */ React.createElement("div", { style: { color: inputAreaConfig.text_color || "#111827", fontSize: "12px", opacity: 0.75, marginBottom: "8px", wordBreak: "break-all" } }, selectedFile.name)),
         showContactFields && /* @__PURE__ */ React.createElement("div", { className: "p-3 border rounded-lg mt-2", style: {
-          borderColor: showContactErrors && (!contactName.trim() || !contactEmail.trim() || !isValidEmail(contactEmail)) || emailIsInvalid ? "#EF4444" : inputAreaConfig.border_color || "#D1D5DB",
+          borderColor: showContactErrors && (!contactName.trim() || !contactEmail.trim()) ? "#EF4444" : inputAreaConfig.border_color || "#D1D5DB",
           backgroundColor: inputAreaConfig.background_color || "#FFF"
         } }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-semibold mb-2", style: { color: inputAreaConfig.text_color || "#111827" } }, "How should we reach you?"), /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement(
           "input",
@@ -20842,13 +21185,13 @@
             },
             className: "w-full px-3 py-1.5 border rounded-md",
             style: {
-              borderColor: showContactErrors && !contactEmail.trim() || emailIsInvalid ? "#EF4444" : inputAreaConfig.border_color || "#D1D5DB",
+              borderColor: showContactErrors && !contactEmail.trim() ? "#EF4444" : inputAreaConfig.border_color || "#D1D5DB",
               color: inputAreaConfig.text_color || "#111827",
               fontSize: "13px",
               backgroundColor: inputAreaConfig.background_color || "#FFF"
             }
           }
-        ), showContactErrors && (!contactName.trim() || !contactEmail.trim() || !isValidEmail(contactEmail)) && /* @__PURE__ */ React.createElement("div", { className: "text-xs", style: { color: "#EF4444" } }, `${!contactName.trim() ? "Name is required. " : ""}${!contactEmail.trim() ? "Email is required. " : ""}${contactEmail.trim() && !isValidEmail(contactEmail) ? "Enter a valid email address." : ""}`)))
+        ), showContactErrors && (!contactName.trim() || !contactEmail.trim()) && /* @__PURE__ */ React.createElement("div", { className: "text-xs", style: { color: "#EF4444" } }, `${!contactName.trim() ? "Name is required. " : ""}${!contactEmail.trim() ? "Email is required." : ""}`)))
       ),
       inputAreaConfig.show_branding !== false && /* @__PURE__ */ React.createElement(
         "div",
@@ -20874,7 +21217,116 @@
           "Powered by WidgetKraft"
         )
       )
+    ), previewImage && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        onClick: () => setPreviewImage(null),
+        style: {
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.92)",
+          zIndex: 1e4,
+          cursor: "pointer",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "100vh",
+          minWidth: "100vw"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            setPreviewImage(null);
+          },
+          style: {
+            position: "fixed",
+            top: 24,
+            right: 32,
+            background: "rgba(0,0,0,0.7)",
+            color: "white",
+            border: "none",
+            borderRadius: "50%",
+            width: 44,
+            height: 44,
+            fontSize: 28,
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 10001,
+            boxShadow: "0 2px 8px 0 rgba(0,0,0,0.18)",
+            transition: "background 0.2s"
+          },
+          "aria-label": "Close preview"
+        },
+        "✕"
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          onClick: (e) => e.stopPropagation(),
+          style: {
+            position: "relative",
+            maxWidth: "90vw",
+            maxHeight: "90vh",
+            width: "auto",
+            height: "auto",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: 16,
+            overflow: "hidden",
+            background: "#18181b",
+            boxShadow: "0 4px 32px 0 rgba(0,0,0,0.25)"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "img",
+          {
+            src: previewImage,
+            alt: "Preview",
+            style: {
+              maxWidth: "90vw",
+              maxHeight: "90vh",
+              objectFit: "contain",
+              borderRadius: 16,
+              background: "#222",
+              display: "block",
+              margin: 0
+            }
+          }
+        )
+      )
     ), /* @__PURE__ */ React.createElement("style", { jsx: true }, `
+        .custom-chat-textarea {
+          transition: min-height 0.2s;
+        }
+        .custom-chat-textarea::-webkit-scrollbar {
+          width: 6px;
+        }
+        .custom-chat-textarea::-webkit-scrollbar-thumb {
+          background: #e5e7eb;
+          border-radius: 3px;
+        }
+        .custom-chat-textarea:focus {
+          outline: none;
+        }
+          // Auto-grow textarea height up to 4 rows
+          useEffect(() => {
+            if (!inputRef.current) return;
+            const textarea = inputRef.current;
+            textarea.style.height = 'auto';
+            const maxHeight = 120; // ~4 rows
+            textarea.style.height = Math.min(textarea.scrollHeight, maxHeight) + 'px';
+          }, [inputMessage]);
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+        
         /* Hide scrollbar for all browsers */
         .hide-scrollbar::-webkit-scrollbar { display: none; }
         .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getwidgets/live-chat-widget",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "main": "dist/live-chat-widget.umd.js",
   "unpkg": "dist/live-chat-widget.umd.js",
   "type": "module",