@jrapps/my_tickets_chat_ui 0.1.2 → 0.2.1

package/dist/cjs/components/SiteChatComponentNew/index.js

@@ -0,0 +1,1283 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/SiteChatComponentNew/index.ts
+var SiteChatComponentNew_exports = {};
+__export(SiteChatComponentNew_exports, {
+  SiteChatComponentNew: () => SiteChatComponentNew,
+  useSiteChatComponentNew: () => useSiteChatComponentNew
+});
+module.exports = __toCommonJS(SiteChatComponentNew_exports);
+
+// src/components/SiteChatComponentNew/SiteChatComponentNew.tsx
+var import_react5 = __toESM(require("react"));
+
+// src/components/SiteChatComponentNew/useSiteChatComponentNew.ts
+var import_react = require("react");
+function useSiteChatComponentNew(defaultOpen = false) {
+  const [open, setOpen] = (0, import_react.useState)(defaultOpen);
+  const openWidget = (0, import_react.useCallback)(() => setOpen(true), []);
+  const closeWidget = (0, import_react.useCallback)(() => setOpen(false), []);
+  return { open, openWidget, closeWidget };
+}
+
+// src/components/SiteChatComponentNew/utils/theme.ts
+var FONT_FAMILY = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif";
+var FONT_SIZE = "14px";
+var SHADOW = "0 4px 24px rgba(0,0,0,0.12)";
+var WIDTH = "400px";
+var HEIGHT = "600px";
+var HEADER_HEIGHT = "64px";
+var defaultTheme = {
+  primary: "#4f46e5",
+  background: "#ffffff",
+  surface: "#f9fafb",
+  border: "#e5e7eb",
+  userBubble: "#4f46e5",
+  userText: "#ffffff",
+  agentBubble: "#f3f4f6",
+  agentText: "#111827",
+  systemText: "#6b7280",
+  inputBackground: "#ffffff",
+  inputBorder: "#d1d5db",
+  buttonRadius: 8,
+  borderRadius: 12
+};
+function buildThemeVars(partial) {
+  const theme = { ...defaultTheme, ...partial };
+  return {
+    // Colours
+    "--cw-primary": theme.primary,
+    "--cw-background": theme.background,
+    "--cw-surface": theme.surface,
+    "--cw-border": theme.border,
+    "--cw-user-bubble": theme.userBubble,
+    "--cw-user-text": theme.userText,
+    "--cw-agent-bubble": theme.agentBubble,
+    "--cw-agent-text": theme.agentText,
+    "--cw-system-text": theme.systemText,
+    "--cw-input-background": theme.inputBackground,
+    "--cw-input-border": theme.inputBorder,
+    // Border radii
+    "--cw-button-radius": `${theme.buttonRadius}px`,
+    "--cw-border-radius": `${theme.borderRadius}px`,
+    // Fixed constants — not exposed as theme props
+    "--cw-font-family": FONT_FAMILY,
+    "--cw-font-size": FONT_SIZE,
+    "--cw-shadow": SHADOW,
+    "--cw-width": WIDTH,
+    "--cw-height": HEIGHT,
+    "--cw-header-height": HEADER_HEIGHT
+  };
+}
+
+// src/components/SiteChatComponentNew/utils/systemMessages.ts
+var systemEventLabels = {
+  AGENT_JOINED: "Agent joined",
+  AGENT_LEFT: "Agent left",
+  USER_JOINED: "You joined",
+  USER_LEFT: "You left",
+  CHAT_ENDED: "Chat ended",
+  CHAT_REOPENED: "Chat reopened",
+  CHAT_TRANSFERRED: "Chat transferred",
+  WAITING_FOR_AGENT: "Waiting for an agent"
+};
+function getSystemLabel(event) {
+  var _a;
+  return (_a = systemEventLabels[event]) != null ? _a : event;
+}
+
+// src/components/SiteChatComponentNew/utils/format.ts
+function formatTime(timestamp) {
+  return new Date(timestamp).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+
+// src/components/SiteChatComponentNew/Header/Header.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-45eba566")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-45eba566";
+  s.textContent = ".cw-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n  height: var(--cw-header-height);\n  background-color: var(--cw-primary);\n  color: #ffffff;\n  flex-shrink: 0;\n  border-radius: var(--cw-border-radius) var(--cw-border-radius) 0 0;\n}\n\n.cw-header__identity {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.cw-header__avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  object-fit: cover;\n  flex-shrink: 0;\n  border: 2px solid rgba(255, 255, 255, 0.4);\n}\n\n.cw-header__text {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.cw-header__title {\n  font-size: 15px;\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 1.3;\n}\n\n.cw-header__subtitle {\n  font-size: 12px;\n  opacity: 0.85;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 1.3;\n}\n\n.cw-header__close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #ffffff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  transition: background-color 0.15s ease;\n}\n\n.cw-header__close:hover {\n  background-color: rgba(255, 255, 255, 0.15);\n}\n\n.cw-header__close:focus-visible {\n  outline: 2px solid #ffffff;\n  outline-offset: 2px;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/Header/Header.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Header = ({ image, title, subtitle, onClose }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "cw-header", role: "banner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cw-header__identity", children: [
+      image && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src: image,
+          alt: `${title} avatar`,
+          className: "cw-header__avatar"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cw-header__text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cw-header__title", children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cw-header__subtitle", children: subtitle })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        className: "cw-header__close",
+        onClick: onClose,
+        "aria-label": "Close chat",
+        type: "button",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+var Header_default = Header;
+
+// src/components/SiteChatComponentNew/Footer/Footer.tsx
+var import_react2 = require("react");
+
+// src/components/SiteChatComponentNew/Footer/Footer.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-ebcf221d")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-ebcf221d";
+  s.textContent = ".cw-footer {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n  padding: 10px 12px;\n  background-color: var(--cw-background);\n  border-top: 1px solid var(--cw-border);\n  flex-shrink: 0;\n}\n\n.cw-footer__input {\n  flex: 1;\n  resize: none;\n  border: 1px solid var(--cw-input-border);\n  border-radius: var(--cw-button-radius);\n  background-color: var(--cw-input-background);\n  font-family: var(--cw-font-family);\n  font-size: var(--cw-font-size);\n  color: inherit;\n  padding: 8px 12px;\n  line-height: 1.5;\n  min-height: 38px;\n  max-height: 120px;\n  overflow-y: auto;\n  transition: border-color 0.15s ease;\n}\n\n.cw-footer__input:focus {\n  outline: none;\n  border-color: var(--cw-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cw-primary) 20%, transparent);\n}\n\n.cw-footer__input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.cw-footer__attach-btn,\n.cw-footer__send-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  color: var(--cw-primary);\n  margin-bottom: 1px;\n}\n\n.cw-footer__attach-btn:hover,\n.cw-footer__send-btn:not(.cw-footer__send-btn--disabled):hover {\n  background-color: color-mix(in srgb, var(--cw-primary) 10%, transparent);\n}\n\n.cw-footer__attach-btn:focus-visible,\n.cw-footer__send-btn:focus-visible {\n  outline: 2px solid var(--cw-primary);\n  outline-offset: 2px;\n}\n\n.cw-footer__attach-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.cw-footer__send-btn--disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.cw-footer__file-input {\n  display: none;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/Footer/Footer.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Footer = ({ onSend, onAttachment, disabled }) => {
+  const [text, setText] = (0, import_react2.useState)("");
+  const fileInputRef = (0, import_react2.useRef)(null);
+  const textareaRef = (0, import_react2.useRef)(null);
+  const isEmpty = text.trim().length === 0;
+  const handleKeyDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        if (!isEmpty && !disabled) {
+          onSend(text.trim());
+          setText("");
+          if (textareaRef.current) {
+            textareaRef.current.style.height = "auto";
+          }
+        }
+      }
+    },
+    [isEmpty, disabled, onSend, text]
+  );
+  const handleSend = (0, import_react2.useCallback)(() => {
+    if (!isEmpty && !disabled) {
+      onSend(text.trim());
+      setText("");
+      if (textareaRef.current) {
+        textareaRef.current.style.height = "auto";
+        textareaRef.current.focus();
+      }
+    }
+  }, [isEmpty, disabled, onSend, text]);
+  const handleChange = (0, import_react2.useCallback)(
+    (e) => {
+      setText(e.target.value);
+      const el = e.target;
+      el.style.height = "auto";
+      el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
+    },
+    []
+  );
+  const handleAttachmentClick = (0, import_react2.useCallback)(() => {
+    var _a;
+    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  }, []);
+  const handleFileChange = (0, import_react2.useCallback)(
+    (e) => {
+      var _a;
+      const file = (_a = e.target.files) == null ? void 0 : _a[0];
+      if (file) {
+        onAttachment(file);
+      }
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    [onAttachment]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("footer", { className: "cw-footer", role: "contentinfo", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        className: "cw-footer__attach-btn",
+        onClick: handleAttachmentClick,
+        "aria-label": "Attach file",
+        type: "button",
+        disabled,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "textarea",
+      {
+        ref: textareaRef,
+        className: "cw-footer__input",
+        value: text,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        placeholder: "Type a message\u2026",
+        "aria-label": "Message input",
+        rows: 1,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        className: `cw-footer__send-btn${isEmpty || disabled ? " cw-footer__send-btn--disabled" : ""}`,
+        onClick: handleSend,
+        "aria-label": "Send message",
+        type: "button",
+        disabled: isEmpty || disabled,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        className: "cw-footer__file-input",
+        onChange: handleFileChange,
+        "aria-hidden": "true",
+        tabIndex: -1
+      }
+    )
+  ] });
+};
+var Footer_default = Footer;
+
+// src/components/SiteChatComponentNew/hooks/useAutoScroll.ts
+var import_react3 = require("react");
+function useAutoScroll(dependency) {
+  const ref = (0, import_react3.useRef)(null);
+  const userScrolledUp = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const handleScroll = () => {
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 64;
+      userScrolledUp.current = !atBottom;
+    };
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    const el = ref.current;
+    if (!el || userScrolledUp.current) return;
+    el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+  }, [dependency]);
+  return ref;
+}
+
+// src/components/SiteChatComponentNew/hooks/useOfflineForm.ts
+var import_react4 = require("react");
+function validateField(field, value) {
+  if (field.required) {
+    if (field.type === "checkbox" && !value) {
+      return `${field.label} is required.`;
+    }
+    if (field.type !== "checkbox" && (value === void 0 || value === null || String(value).trim() === "")) {
+      return `${field.label} is required.`;
+    }
+  }
+  if (field.type === "email") {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (value && !emailRegex.test(String(value))) {
+      return "Please enter a valid email address.";
+    }
+  }
+  if (field.type === "phone") {
+    const phoneRegex = /^\+?[\d\s\-().]{7,20}$/;
+    if (value && !phoneRegex.test(String(value))) {
+      return "Please enter a valid phone number.";
+    }
+  }
+  return "";
+}
+function useOfflineForm(schema) {
+  const initialValues = {};
+  for (const field of schema.fields) {
+    initialValues[field.id] = field.type === "checkbox" ? false : "";
+  }
+  const [values, setValues] = (0, import_react4.useState)(initialValues);
+  const [errors, setErrors] = (0, import_react4.useState)({});
+  const [submitted, setSubmitted] = (0, import_react4.useState)(false);
+  const setValue = (0, import_react4.useCallback)(
+    (id, value) => {
+      setValues((prev) => ({ ...prev, [id]: value }));
+      if (submitted) {
+        const field = schema.fields.find((f) => f.id === id);
+        if (field) {
+          const error = validateField(field, value);
+          setErrors((prev) => ({ ...prev, [id]: error }));
+        }
+      }
+    },
+    [schema.fields, submitted]
+  );
+  const validate = (0, import_react4.useCallback)(() => {
+    const newErrors = {};
+    let valid = true;
+    for (const field of schema.fields) {
+      const error = validateField(field, values[field.id]);
+      newErrors[field.id] = error;
+      if (error) valid = false;
+    }
+    setErrors(newErrors);
+    return valid;
+  }, [schema.fields, values]);
+  const handleSubmit = (0, import_react4.useCallback)(
+    (onSubmit) => {
+      setSubmitted(true);
+      if (validate()) {
+        onSubmit(values);
+      }
+    },
+    [validate, values]
+  );
+  const reset = (0, import_react4.useCallback)(() => {
+    setValues(initialValues);
+    setErrors({});
+    setSubmitted(false);
+  }, []);
+  return { values, errors, setValue, handleSubmit, reset };
+}
+
+// src/components/SiteChatComponentNew/Messages/UserMessage.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-aed321e0")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-aed321e0";
+  s.textContent = ".cw-user-message {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  max-width: 75%;\n  align-self: flex-end;\n  gap: 3px;\n}\n\n.cw-user-message__bubble {\n  background-color: var(--cw-user-bubble);\n  color: var(--cw-user-text);\n  padding: 10px 14px;\n  border-radius: 18px 18px 4px 18px;\n  font-size: var(--cw-font-size);\n  line-height: 1.5;\n  word-break: break-word;\n  white-space: pre-wrap;\n}\n\n.cw-user-message__time {\n  font-size: 11px;\n  color: var(--cw-system-text);\n  padding-right: 2px;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/Messages/UserMessage.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var UserMessage = ({ message }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cw-user-message", role: "listitem", "aria-label": "Your message", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cw-user-message__bubble", children: message.message }),
+    message.timestamp !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cw-user-message__time", children: formatTime(message.timestamp) })
+  ] });
+};
+var UserMessage_default = UserMessage;
+
+// src/components/SiteChatComponentNew/Shared/Avatar.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-ce14fbec")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-ce14fbec";
+  s.textContent = ".cw-avatar {\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.cw-avatar--image {\n  object-fit: cover;\n}\n\n.cw-avatar--initials {\n  background-color: var(--cw-primary);\n  color: #ffffff;\n  font-weight: 600;\n  user-select: none;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/Shared/Avatar.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function getInitials(name) {
+  return name.split(" ").slice(0, 2).map((w) => w[0]).join("").toUpperCase();
+}
+var Avatar = ({ src, name, size = 32 }) => {
+  const style = {
+    width: `${size}px`,
+    height: `${size}px`,
+    fontSize: `${Math.round(size * 0.38)}px`
+  };
+  if (src) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "img",
+      {
+        src,
+        alt: name ? `${name} avatar` : "Agent avatar",
+        className: "cw-avatar cw-avatar--image",
+        style
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "span",
+    {
+      className: "cw-avatar cw-avatar--initials",
+      "aria-label": name ? `${name} avatar` : "Agent avatar",
+      style,
+      children: name ? getInitials(name) : "A"
+    }
+  );
+};
+var Avatar_default = Avatar;
+
+// src/components/SiteChatComponentNew/Shared/Button.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-2aa106ea")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-2aa106ea";
+  s.textContent = ".cw-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border: none;\n  border-radius: var(--cw-button-radius);\n  font-family: var(--cw-font-family);\n  font-size: var(--cw-font-size);\n  font-weight: 600;\n  cursor: pointer;\n  transition: opacity 0.15s ease, transform 0.1s ease;\n  white-space: nowrap;\n}\n\n.cw-button:focus-visible {\n  outline: 2px solid var(--cw-primary);\n  outline-offset: 3px;\n}\n\n.cw-button:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n.cw-button:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n.cw-button--primary {\n  background-color: var(--cw-primary);\n  color: #ffffff;\n}\n\n.cw-button--primary:hover:not(:disabled) {\n  opacity: 0.88;\n}\n\n.cw-button--secondary {\n  background-color: var(--cw-surface);\n  color: var(--cw-primary);\n  border: 1px solid var(--cw-border);\n}\n\n.cw-button--secondary:hover:not(:disabled) {\n  background-color: var(--cw-border);\n}\n\n.cw-button--full {\n  width: 100%;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/Shared/Button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Button = ({
+  children,
+  onClick,
+  variant = "primary",
+  disabled = false,
+  type = "button",
+  fullWidth = false,
+  ariaLabel
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      className: `cw-button cw-button--${variant}${fullWidth ? " cw-button--full" : ""}`,
+      onClick,
+      disabled,
+      type,
+      "aria-label": ariaLabel,
+      children
+    }
+  );
+};
+var Button_default = Button;
+
+// src/components/SiteChatComponentNew/Messages/AgentMessage.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-5df522b1")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-5df522b1";
+  s.textContent = ".cw-agent-message {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n  max-width: 75%;\n  align-self: flex-start;\n}\n\n.cw-agent-message__content {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.cw-agent-message__name {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--cw-system-text);\n  padding-left: 2px;\n}\n\n.cw-agent-message__bubble {\n  background-color: var(--cw-agent-bubble);\n  color: var(--cw-agent-text);\n  padding: 10px 14px;\n  border-radius: 18px 18px 18px 4px;\n  font-size: var(--cw-font-size);\n  line-height: 1.5;\n  word-break: break-word;\n  white-space: pre-wrap;\n}\n\n.cw-agent-message__time {\n  font-size: 11px;\n  color: var(--cw-system-text);\n  padding-left: 2px;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/Messages/AgentMessage.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AgentMessage = ({ message }) => {
+  var _a;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: "cw-agent-message",
+      role: "listitem",
+      "aria-label": `Message from ${(_a = message.senderName) != null ? _a : "Agent"}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Avatar_default, { name: message.senderName, size: 32 }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cw-agent-message__content", children: [
+          message.senderName && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cw-agent-message__name", children: message.senderName }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cw-agent-message__bubble", children: message.message }),
+          message.timestamp !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cw-agent-message__time", children: formatTime(message.timestamp) })
+        ] })
+      ]
+    }
+  );
+};
+var AgentMessage_default = AgentMessage;
+
+// src/components/SiteChatComponentNew/Messages/SystemMessage.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-464a3601")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-464a3601";
+  s.textContent = ".cw-system-message {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  align-self: stretch;\n  padding: 4px 8px;\n}\n\n.cw-system-message__line {\n  flex: 1;\n  border-top: 1px dashed var(--cw-border);\n}\n\n.cw-system-message__text {\n  font-size: 11px;\n  color: var(--cw-system-text);\n  white-space: nowrap;\n  flex-shrink: 0;\n  font-style: italic;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/Messages/SystemMessage.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SystemMessage = ({ message }) => {
+  var _a;
+  const label = message.message ? getSystemLabel(message.message) : (_a = message.message) != null ? _a : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: "cw-system-message",
+      role: "listitem",
+      "aria-label": `System notification: ${label}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "cw-system-message__line", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "cw-system-message__text", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "cw-system-message__line", "aria-hidden": "true" })
+      ]
+    }
+  );
+};
+var SystemMessage_default = SystemMessage;
+
+// src/components/SiteChatComponentNew/Messages/AttachmentMessage.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-dd846dee")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-dd846dee";
+  s.textContent = ".cw-attachment-message {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  align-self: flex-start;\n  max-width: 80%;\n}\n\n.cw-attachment-message--user {\n  align-self: flex-end;\n  align-items: flex-end;\n}\n\n.cw-attachment-message__card {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  background-color: var(--cw-agent-bubble);\n  border: 1px solid var(--cw-border);\n  border-radius: 12px;\n  padding: 10px 14px;\n}\n\n.cw-attachment-message--user .cw-attachment-message__card {\n  background-color: var(--cw-user-bubble);\n  border-color: transparent;\n  color: var(--cw-user-text);\n}\n\n.cw-attachment-message__icon {\n  flex-shrink: 0;\n  opacity: 0.75;\n  display: flex;\n  align-items: center;\n}\n\n.cw-attachment-message__info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  flex: 1;\n}\n\n.cw-attachment-message__name {\n  font-size: 13px;\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.cw-attachment-message__label {\n  font-size: 11px;\n  opacity: 0.65;\n}\n\n.cw-attachment-message__open-btn {\n  background-color: var(--cw-primary);\n  color: #ffffff;\n  border: none;\n  border-radius: 6px;\n  padding: 5px 12px;\n  font-family: var(--cw-font-family);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: opacity 0.15s ease;\n}\n\n.cw-attachment-message--user .cw-attachment-message__open-btn {\n  background-color: rgba(255, 255, 255, 0.25);\n  color: #ffffff;\n}\n\n.cw-attachment-message__open-btn:hover {\n  opacity: 0.85;\n}\n\n.cw-attachment-message__open-btn:focus-visible {\n  outline: 2px solid var(--cw-primary);\n  outline-offset: 2px;\n}\n\n.cw-attachment-message__time {\n  font-size: 11px;\n  color: var(--cw-system-text);\n  padding-left: 2px;\n}\n\n.cw-attachment-message__time--right {\n  padding-left: 0;\n  padding-right: 2px;\n  align-self: flex-end;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/Messages/AttachmentMessage.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var AttachmentMessage = ({ message }) => {
+  var _a;
+  const attachment = (_a = message.item) != null ? _a : message.attachment;
+  if (!attachment) return null;
+  const handleOpen = () => {
+    window.open(attachment.url, "_blank", "noopener,noreferrer");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: `cw-attachment-message${message.senderType === "user" ? " cw-attachment-message--user" : ""}`,
+      role: "listitem",
+      "aria-label": `Attachment: ${attachment.name}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cw-attachment-message__card", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "cw-attachment-message__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "14 2 14 8 20 8" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cw-attachment-message__info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cw-attachment-message__name", children: attachment.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cw-attachment-message__label", children: "Attachment" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              className: "cw-attachment-message__open-btn",
+              onClick: handleOpen,
+              "aria-label": `Open attachment ${attachment.name}`,
+              type: "button",
+              children: "Open"
+            }
+          )
+        ] }),
+        message.timestamp !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "span",
+          {
+            className: `cw-attachment-message__time${message.senderType === "user" ? " cw-attachment-message__time--right" : ""}`,
+            children: formatTime(message.timestamp)
+          }
+        )
+      ]
+    }
+  );
+};
+var AttachmentMessage_default = AttachmentMessage;
+
+// src/components/SiteChatComponentNew/Messages/MessageRenderer.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var MessageRenderer = ({ message }) => {
+  if (message.messageType === "ATTACHMENT") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AttachmentMessage_default, { message });
+  }
+  switch (message.senderType) {
+    case "user":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(UserMessage_default, { message });
+    case "agent":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgentMessage_default, { message });
+    case "system":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SystemMessage_default, { message });
+    default:
+      return null;
+  }
+};
+var MessageRenderer_default = MessageRenderer;
+
+// src/components/SiteChatComponentNew/Messages/MessageList.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-15ae1a6b")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-15ae1a6b";
+  s.textContent = ".cw-message-list {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  overflow-y: auto;\n  padding: 16px;\n  background-color: var(--cw-background);\n  scroll-behavior: smooth;\n}\n\n/* Scrollbar styling */\n.cw-message-list::-webkit-scrollbar {\n  width: 5px;\n}\n\n.cw-message-list::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.cw-message-list::-webkit-scrollbar-thumb {\n  background-color: var(--cw-border);\n  border-radius: 10px;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/Messages/MessageList.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var MessageList = ({ messages }) => {
+  const scrollRef = useAutoScroll(messages);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      ref: scrollRef,
+      className: "cw-message-list",
+      role: "list",
+      "aria-label": "Chat messages",
+      "aria-live": "polite",
+      "aria-relevant": "additions",
+      children: messages.map((msg, index) => {
+        var _a, _b;
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          MessageRenderer_default,
+          {
+            message: msg
+          },
+          (_b = msg._id) != null ? _b : `${(_a = msg.timestamp) != null ? _a : index}-${index}`
+        );
+      })
+    }
+  );
+};
+var MessageList_default = MessageList;
+
+// src/components/SiteChatComponentNew/Messages/TypingIndicator.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-4b0ca05b")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-4b0ca05b";
+  s.textContent = "@keyframes cw-bounce {\n  0%, 60%, 100% {\n    transform: translateY(0);\n  }\n  30% {\n    transform: translateY(-6px);\n  }\n}\n\n.cw-typing-indicator {\n  align-self: flex-start;\n}\n\n.cw-typing-indicator__bubble {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background-color: var(--cw-agent-bubble);\n  border-radius: 18px 18px 18px 4px;\n  padding: 10px 14px;\n}\n\n.cw-typing-indicator__dot {\n  display: block;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background-color: var(--cw-system-text);\n  animation: cw-bounce 1.2s infinite ease-in-out;\n}\n\n.cw-typing-indicator__dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n\n.cw-typing-indicator__dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/Messages/TypingIndicator.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+
+// src/components/SiteChatComponentNew/States/LoadingState.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-7a5a4f05")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-7a5a4f05";
+  s.textContent = "@keyframes cw-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.cw-loading-state {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  background-color: var(--cw-background);\n  text-align: center;\n  gap: 12px;\n}\n\n.cw-loading-state__spinner {\n  width: 48px;\n  height: 48px;\n}\n\n.cw-loading-state__spinner-ring {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  border: 3px solid var(--cw-border);\n  border-top-color: var(--cw-primary);\n  animation: cw-spin 0.8s linear infinite;\n}\n\n.cw-loading-state__title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--cw-agent-text);\n  margin: 0;\n}\n\n.cw-loading-state__subtitle {\n  font-size: 13px;\n  color: var(--cw-system-text);\n  margin: 0;\n  max-width: 240px;\n  line-height: 1.5;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/States/LoadingState.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var LoadingState = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      className: "cw-loading-state",
+      role: "status",
+      "aria-label": "Connecting to chat",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "cw-loading-state__spinner", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "cw-loading-state__spinner-ring" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "cw-loading-state__title", children: "Connecting\u2026" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "cw-loading-state__subtitle", children: "Please wait while we connect you to an available agent." })
+      ]
+    }
+  );
+};
+var LoadingState_default = LoadingState;
+
+// src/components/SiteChatComponentNew/States/StartChatState.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-3e05ef30")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-3e05ef30";
+  s.textContent = ".cw-start-chat-state {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px 24px;\n  background-color: var(--cw-background);\n  text-align: center;\n  gap: 14px;\n}\n\n.cw-start-chat-state__image {\n  width: 80px;\n  height: 80px;\n  object-fit: contain;\n  border-radius: 50%;\n  margin-bottom: 4px;\n}\n\n.cw-start-chat-state__title {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--cw-agent-text);\n  margin: 0;\n}\n\n.cw-start-chat-state__description {\n  font-size: 14px;\n  color: var(--cw-system-text);\n  margin: 0;\n  max-width: 260px;\n  line-height: 1.6;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/States/StartChatState.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var StartChatState = ({
+  image,
+  title,
+  description,
+  onStart
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: "cw-start-chat-state",
+      role: "main",
+      "aria-label": "Start a chat",
+      children: [
+        image && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "img",
+          {
+            src: image,
+            alt: "Support illustration",
+            className: "cw-start-chat-state__image"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "cw-start-chat-state__title", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "cw-start-chat-state__description", children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button_default, { onClick: onStart, ariaLabel: "Start chat", children: "Start Chat" })
+      ]
+    }
+  );
+};
+var StartChatState_default = StartChatState;
+
+// src/components/SiteChatComponentNew/OfflineForm/OfflineForm.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-d9ff3956")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-d9ff3956";
+  s.textContent = `.cw-offline-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.cw-offline-form__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--cw-agent-text);
+  margin: 0 0 4px;
+}
+
+/* Field wrapper */
+.cw-offline-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.cw-offline-form__field--checkbox {
+  gap: 4px;
+}
+
+/* Label */
+.cw-offline-form__label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--cw-agent-text);
+}
+
+.cw-offline-form__required {
+  color: #ef4444;
+}
+
+/* Text input */
+.cw-offline-form__input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--cw-input-border);
+  border-radius: var(--cw-button-radius);
+  background-color: var(--cw-input-background);
+  font-family: var(--cw-font-family);
+  font-size: var(--cw-font-size);
+  color: inherit;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease;
+}
+
+.cw-offline-form__input:focus {
+  outline: none;
+  border-color: var(--cw-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cw-primary) 20%, transparent);
+}
+
+.cw-offline-form__input--error {
+  border-color: #ef4444;
+}
+
+/* Textarea */
+.cw-offline-form__textarea {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--cw-input-border);
+  border-radius: var(--cw-button-radius);
+  background-color: var(--cw-input-background);
+  font-family: var(--cw-font-family);
+  font-size: var(--cw-font-size);
+  color: inherit;
+  resize: vertical;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease;
+}
+
+.cw-offline-form__textarea:focus {
+  outline: none;
+  border-color: var(--cw-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cw-primary) 20%, transparent);
+}
+
+.cw-offline-form__textarea--error {
+  border-color: #ef4444;
+}
+
+/* Select */
+.cw-offline-form__select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--cw-input-border);
+  border-radius: var(--cw-button-radius);
+  background-color: var(--cw-input-background);
+  font-family: var(--cw-font-family);
+  font-size: var(--cw-font-size);
+  color: inherit;
+  box-sizing: border-box;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.cw-offline-form__select:focus {
+  outline: none;
+  border-color: var(--cw-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cw-primary) 20%, transparent);
+}
+
+.cw-offline-form__select--error {
+  border-color: #ef4444;
+}
+
+/* Checkbox */
+.cw-offline-form__checkbox-label {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--cw-agent-text);
+}
+
+.cw-offline-form__checkbox {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--cw-primary);
+  flex-shrink: 0;
+  margin-top: 1px;
+  cursor: pointer;
+}
+
+.cw-offline-form__checkbox:focus-visible {
+  outline: 2px solid var(--cw-primary);
+  outline-offset: 2px;
+}
+
+.cw-offline-form__checkbox-text {
+  line-height: 1.4;
+}
+
+/* Error message */
+.cw-offline-form__error {
+  font-size: 12px;
+  color: #ef4444;
+  font-weight: 500;
+}
+
+/* Actions */
+.cw-offline-form__actions {
+  margin-top: 4px;
+}
+`;
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/OfflineForm/OfflineForm.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var FieldRenderer = ({
+  field,
+  value,
+  error,
+  onChange
+}) => {
+  var _a, _b;
+  const hasError = error.length > 0;
+  const fieldId = `cw-offline-field-${field.id}`;
+  const errorId = `${fieldId}-error`;
+  const commonProps = {
+    id: fieldId,
+    className: `cw-offline-form__input${hasError ? " cw-offline-form__input--error" : ""}`,
+    "aria-invalid": hasError,
+    "aria-describedby": hasError ? errorId : void 0,
+    required: field.required
+  };
+  if (field.type === "textarea") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "cw-offline-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { htmlFor: fieldId, className: "cw-offline-form__label", children: [
+        field.label,
+        field.required && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "cw-offline-form__required", "aria-hidden": "true", children: [
+          " ",
+          "*"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "textarea",
+        {
+          ...commonProps,
+          value: String(value != null ? value : ""),
+          placeholder: field.placeholder,
+          rows: 3,
+          onChange: (e) => onChange(field.id, e.target.value),
+          className: `cw-offline-form__textarea${hasError ? " cw-offline-form__textarea--error" : ""}`
+        }
+      ),
+      hasError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { id: errorId, className: "cw-offline-form__error", role: "alert", children: error })
+    ] });
+  }
+  if (field.type === "select") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "cw-offline-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { htmlFor: fieldId, className: "cw-offline-form__label", children: [
+        field.label,
+        field.required && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "cw-offline-form__required", "aria-hidden": "true", children: [
+          " ",
+          "*"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        "select",
+        {
+          ...commonProps,
+          value: String(value != null ? value : ""),
+          onChange: (e) => onChange(field.id, e.target.value),
+          className: `cw-offline-form__select${hasError ? " cw-offline-form__select--error" : ""}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "", children: (_a = field.placeholder) != null ? _a : `Select ${field.label}` }),
+            (_b = field.options) == null ? void 0 : _b.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+          ]
+        }
+      ),
+      hasError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { id: errorId, className: "cw-offline-form__error", role: "alert", children: error })
+    ] });
+  }
+  if (field.type === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "cw-offline-form__field cw-offline-form__field--checkbox", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "cw-offline-form__checkbox-label", htmlFor: fieldId, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            id: fieldId,
+            checked: Boolean(value),
+            onChange: (e) => onChange(field.id, e.target.checked),
+            className: "cw-offline-form__checkbox",
+            "aria-invalid": hasError,
+            "aria-describedby": hasError ? errorId : void 0,
+            required: field.required
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "cw-offline-form__checkbox-text", children: [
+          field.label,
+          field.required && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "cw-offline-form__required", "aria-hidden": "true", children: [
+            " ",
+            "*"
+          ] })
+        ] })
+      ] }),
+      hasError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { id: errorId, className: "cw-offline-form__error", role: "alert", children: error })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "cw-offline-form__field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { htmlFor: fieldId, className: "cw-offline-form__label", children: [
+      field.label,
+      field.required && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "cw-offline-form__required", "aria-hidden": "true", children: [
+        " ",
+        "*"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "input",
+      {
+        ...commonProps,
+        type: field.type,
+        value: String(value != null ? value : ""),
+        placeholder: field.placeholder,
+        onChange: (e) => onChange(field.id, e.target.value)
+      }
+    ),
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { id: errorId, className: "cw-offline-form__error", role: "alert", children: error })
+  ] });
+};
+var OfflineForm = ({ schema, onSubmit }) => {
+  const { values, errors, setValue, handleSubmit } = useOfflineForm(schema);
+  const onFormSubmit = (e) => {
+    e.preventDefault();
+    handleSubmit(onSubmit);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "form",
+    {
+      className: "cw-offline-form",
+      onSubmit: onFormSubmit,
+      "aria-label": schema.title,
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "cw-offline-form__title", children: schema.title }),
+        schema.fields.map((field) => {
+          var _a;
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            FieldRenderer,
+            {
+              field,
+              value: values[field.id],
+              error: (_a = errors[field.id]) != null ? _a : "",
+              onChange: setValue
+            },
+            field.id
+          );
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "cw-offline-form__actions", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button_default, { type: "submit", fullWidth: true, children: schema.submitButtonText }) })
+      ]
+    }
+  );
+};
+var OfflineForm_default = OfflineForm;
+
+// src/components/SiteChatComponentNew/States/OfflineState.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-8b15ae78")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-8b15ae78";
+  s.textContent = ".cw-offline-state {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--cw-background);\n  overflow-y: auto;\n}\n\n.cw-offline-state__header {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 28px 24px 16px;\n  gap: 8px;\n}\n\n.cw-offline-state__icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background-color: color-mix(in srgb, var(--cw-primary) 10%, transparent);\n  color: var(--cw-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 4px;\n}\n\n.cw-offline-state__title {\n  font-size: 17px;\n  font-weight: 700;\n  color: var(--cw-agent-text);\n  margin: 0;\n}\n\n.cw-offline-state__subtitle {\n  font-size: 13px;\n  color: var(--cw-system-text);\n  margin: 0;\n  line-height: 1.6;\n  max-width: 280px;\n}\n\n.cw-offline-state__form-wrapper {\n  padding: 0 16px 16px;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/States/OfflineState.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var OfflineState = ({ form, onSubmit }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: "cw-offline-state",
+      role: "main",
+      "aria-label": "Business is offline",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "cw-offline-state__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "cw-offline-state__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "32",
+              height: "32",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { className: "cw-offline-state__title", children: "We're currently offline" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "cw-offline-state__subtitle", children: "Please leave us a message and we'll get back to you as soon as possible." })
+        ] }),
+        form && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "cw-offline-state__form-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(OfflineForm_default, { schema: form, onSubmit }) })
+      ]
+    }
+  );
+};
+var OfflineState_default = OfflineState;
+
+// src/components/SiteChatComponentNew/States/ChatEndedState.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-59a49fdf")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-59a49fdf";
+  s.textContent = ".cw-chat-ended-state {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px 24px;\n  background-color: var(--cw-background);\n  text-align: center;\n  gap: 12px;\n}\n\n.cw-chat-ended-state__icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background-color: color-mix(in srgb, var(--cw-primary) 10%, transparent);\n  color: var(--cw-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.cw-chat-ended-state__title {\n  font-size: 17px;\n  font-weight: 700;\n  color: var(--cw-agent-text);\n  margin: 0;\n}\n\n.cw-chat-ended-state__subtitle {\n  font-size: 13px;\n  color: var(--cw-system-text);\n  margin: 0;\n  max-width: 240px;\n  line-height: 1.6;\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/States/ChatEndedState.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ChatEndedState = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      className: "cw-chat-ended-state",
+      role: "status",
+      "aria-label": "Chat has ended",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "cw-chat-ended-state__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "32",
+            height: "32",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("polyline", { points: "20 6 9 17 4 12" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "cw-chat-ended-state__title", children: "Chat Ended" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "cw-chat-ended-state__subtitle", children: "Your chat session has ended. Thank you for reaching out!" })
+      ]
+    }
+  );
+};
+var ChatEndedState_default = ChatEndedState;
+
+// src/components/SiteChatComponentNew/SiteChatComponentNew.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-871af89c")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-871af89c";
+  s.textContent = "/* \u2500\u2500\u2500 Root container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Fixed to bottom-right by default so it works out-of-the-box.\n * Override with your own positioning class if embedding differently.\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.cw-root {\n  position: fixed;\n  bottom: max(24px, env(safe-area-inset-bottom));\n  right: max(24px, env(safe-area-inset-right));\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 12px;\n  z-index: 9999;\n  /* Scope CSS vars and stacking context */\n  isolation: isolate;\n  font-family: var(--cw-font-family);\n  font-size: var(--cw-font-size);\n}\n\n/* \u2500\u2500\u2500 Widget Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.cw-widget {\n  display: flex;\n  flex-direction: column;\n  width: var(--cw-width);\n  height: var(--cw-height);\n  /* Clamp so it never overflows the viewport on small screens */\n  max-width: calc(100vw - 48px);\n  max-height: calc(100dvh - 96px);\n  background-color: var(--cw-background);\n  border-radius: var(--cw-border-radius);\n  box-shadow: var(--cw-shadow);\n  overflow: hidden;\n  /* Entry animation */\n  animation: cw-panel-in 0.22s ease;\n  transform-origin: bottom right;\n}\n\n@keyframes cw-panel-in {\n  from {\n    opacity: 0;\n    transform: scale(0.92) translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n.cw-widget__body {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n}\n\n/* \u2500\u2500\u2500 Launcher Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.cw-launcher {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: var(--cw-primary);\n  color: #ffffff;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n  flex-shrink: 0;\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.cw-launcher:hover {\n  transform: scale(1.07);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.26);\n}\n\n.cw-launcher:focus-visible {\n  outline: 3px solid var(--cw-primary);\n  outline-offset: 3px;\n}\n\n.cw-launcher:active {\n  transform: scale(0.96);\n}\n\n/* \u2500\u2500\u2500 Tablet (481px \u2013 768px): panel floats, slightly narrower margin \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@media (min-width: 481px) and (max-width: 768px) {\n  .cw-root {\n    bottom: max(16px, env(safe-area-inset-bottom));\n    right: max(16px, env(safe-area-inset-right));\n  }\n\n  .cw-widget {\n    max-width: calc(100vw - 32px);\n    max-height: calc(100dvh - 80px);\n  }\n}\n\n/* \u2500\u2500\u2500 Mobile (\u2264 480px): full-screen panel, launcher stays fixed \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@media (max-width: 480px) {\n  .cw-root {\n    bottom: 0;\n    right: 0;\n    gap: 0;\n  }\n\n  .cw-root > .cw-launcher {\n    position: fixed;\n    bottom: max(20px, env(safe-area-inset-bottom));\n    right: max(20px, env(safe-area-inset-right));\n  }\n\n  .cw-widget {\n    width: 100vw;\n    max-width: 100vw;\n    height: 100dvh;\n    max-height: 100dvh;\n    border-radius: 0;\n    transform-origin: bottom center;\n  }\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/SiteChatComponentNew/SiteChatComponentNew.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var SiteChatComponentNew = import_react5.default.forwardRef(({
+  title,
+  subtitle,
+  image,
+  theme,
+  messages,
+  offlineForm,
+  defaultOpen = false,
+  loading = false,
+  chatEnded = false,
+  width,
+  height,
+  onSend,
+  onAttachment,
+  onOfflineSubmit,
+  onClose
+}, ref) => {
+  const { open, openWidget, closeWidget } = useSiteChatComponentNew(defaultOpen);
+  const themeVars = buildThemeVars(theme);
+  const handleClose = () => {
+    closeWidget();
+    onClose == null ? void 0 : onClose();
+  };
+  const renderBody = () => {
+    if (loading) {
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoadingState_default, {});
+    }
+    if (offlineForm) {
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(OfflineState_default, { form: offlineForm, onSubmit: onOfflineSubmit });
+    }
+    if (messages.length === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        StartChatState_default,
+        {
+          image,
+          title,
+          description: subtitle,
+          onStart: () => onSend("__start_chat__")
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MessageList_default, { messages }),
+      chatEnded ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatEndedState_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Footer_default, { onSend, onAttachment })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref, className: "cw-root", style: themeVars, children: [
+    open && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        className: "cw-widget",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": `${title} chat widget`,
+        style: { ...width !== void 0 && { width }, ...height !== void 0 && { height } },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Header_default,
+            {
+              image,
+              title,
+              subtitle,
+              onClose: handleClose
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "cw-widget__body", children: renderBody() })
+        ]
+      }
+    ),
+    !open && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "button",
+      {
+        className: "cw-launcher",
+        onClick: openWidget,
+        "aria-label": "Open chat",
+        "aria-haspopup": "dialog",
+        type: "button",
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "26",
+            height: "26",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z" })
+          }
+        )
+      }
+    )
+  ] });
+});
+SiteChatComponentNew.displayName = "SiteChatComponentNew";
+//# sourceMappingURL=index.js.map