@jrapps/my_tickets_chat_ui 0.2.3 → 0.3.2

package/dist/cjs/index.js

@@ -30,994 +30,1296 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  SiteChatComponent: () => SiteChatComponent,
   SiteChatComponentNew: () => SiteChatComponentNew,
-  useSiteChatComponentNew: () => useSiteChatComponentNew
+  SiteChatComponentNewErc: () => SiteChatComponentNewErc,
+  useSiteChatComponentNew: () => useSiteChatComponentNew,
+  useSiteChatComponentNewErc: () => useSiteChatComponentNewErc
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/SiteChatComponent/SiteChatComponent.tsx
-var import_react7 = __toESM(require("react"));
-var import_design_system9 = require("@wix/design-system");
-var import_styles_global = require("@wix/design-system/styles.global.css");
+// 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, width, height) {
+  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 !== void 0 ? typeof width === "number" ? `${width}px` : width : WIDTH,
+    "--cw-height": height !== void 0 ? typeof height === "number" ? `${height}px` : 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  flex-direction: column;\n  gap: 6px;\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__controls {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n}\n\n/* \u2500\u2500\u2500 Staged file chips \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-footer__file-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.cw-footer__file-chip {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background-color: color-mix(in srgb, var(--cw-primary) 12%, transparent);\n  border: 1px solid color-mix(in srgb, var(--cw-primary) 30%, transparent);\n  border-radius: 999px;\n  padding: 3px 8px 3px 10px;\n  font-size: 12px;\n  color: var(--cw-primary);\n  max-width: 200px;\n}\n\n.cw-footer__file-chip-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.cw-footer__file-chip-remove {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 2px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  border-radius: 50%;\n  flex-shrink: 0;\n  opacity: 0.7;\n  transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.cw-footer__file-chip-remove:hover {\n  opacity: 1;\n  background-color: color-mix(in srgb, var(--cw-primary) 15%, transparent);\n}\n\n.cw-footer__file-chip-remove:focus-visible {\n  outline: 2px solid var(--cw-primary);\n  outline-offset: 1px;\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 [stagedFiles, setStagedFiles] = (0, import_react2.useState)([]);
+  const fileInputRef = (0, import_react2.useRef)(null);
+  const textareaRef = (0, import_react2.useRef)(null);
+  const isEmpty = text.trim().length === 0 && stagedFiles.length === 0;
+  const handleSend = (0, import_react2.useCallback)(() => {
+    if (!isEmpty && !disabled) {
+      if (text.trim().length > 0) {
+        onSend(text.trim());
+        setText("");
+      }
+      stagedFiles.forEach((file) => onAttachment(file));
+      setStagedFiles([]);
+      if (textareaRef.current) {
+        textareaRef.current.style.height = "auto";
+        textareaRef.current.focus();
+      }
+    }
+  }, [isEmpty, disabled, onSend, text, stagedFiles, onAttachment]);
+  const handleKeyDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  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 files = Array.from((_a = e.target.files) != null ? _a : []);
+      if (files.length > 0) {
+        setStagedFiles((prev) => [...prev, ...files]);
+      }
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    []
+  );
+  const handleRemoveStagedFile = (0, import_react2.useCallback)((index) => {
+    setStagedFiles((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("footer", { className: "cw-footer", role: "contentinfo", children: [
+    stagedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "cw-footer__file-list", "aria-label": "Files to send", children: stagedFiles.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: "cw-footer__file-chip", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "cw-footer__file-chip-name", title: file.name, children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          className: "cw-footer__file-chip-remove",
+          onClick: () => handleRemoveStagedFile(i),
+          "aria-label": `Remove ${file.name}`,
+          type: "button",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) })
+        }
+      )
+    ] }, `${file.name}-${i}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cw-footer__controls", 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,
+          multiple: true
+        }
+      )
+    ] })
+  ] });
+};
+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/SiteChatComponent/useSiteChatComponent.ts
-function useSiteChatComponent() {
-  return {};
+// 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/SiteChatComponent/FabButton/FabButton.tsx
-var import_react = __toESM(require("react"));
-var import_design_system = require("@wix/design-system");
-var import_wix_ui_icons_common = require("@wix/wix-ui-icons-common");
-var import_jsx_runtime = require("react/jsx-runtime");
-var FabButton = import_react.default.forwardRef(
-  ({
-    className,
-    children,
-    onClick,
-    type = "textIcon",
-    icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wix_ui_icons_common.WixChat, {}),
-    text,
-    ...rest
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "button",
+// 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",
       {
-        className: "site-chat-component-fab",
-        onClick,
-        children: [
-          type === "textIcon" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "site-chat-component-fab-fab-button-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { height: "100%", children: icon }) }) : null,
-          type === "textIcon" || type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "site-chat-component-fab-fab-button-text", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "site-chat-component-fab-fab-button-label", children: text }) }) : null,
-          type === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "site-chat-component-fab-fab-button-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { height: "100%", width: "max-content", children: icon }) }) : null
-        ]
+        src,
+        alt: name ? `${name} avatar` : "Agent avatar",
+        className: "cw-avatar cw-avatar--image",
+        style
       }
-    ) });
+    );
   }
-);
-FabButton.displayName = "SiteChatComponent.FabButton";
+  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/SiteChatComponent/Footer/Footer.tsx
-var import_react3 = __toESM(require("react"));
-var import_design_system4 = require("@wix/design-system");
+// 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/SiteChatComponent/Footer/send-button/send-button.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var SendButton = ({
-  text = "Send",
-  className = "",
+// src/components/SiteChatComponentNew/Shared/Button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Button = ({
+  children,
   onClick,
-  disabled = false
+  variant = "primary",
+  disabled = false,
+  type = "button",
+  fullWidth = false,
+  ariaLabel
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     {
-      className: `site-chat-component-footer-my-tickets-chat-widget-send-button ${className}`,
+      className: `cw-button cw-button--${variant}${fullWidth ? " cw-button--full" : ""}`,
       onClick,
       disabled,
-      children: text
+      type,
+      "aria-label": ariaLabel,
+      children
     }
   );
 };
-var send_button_default = SendButton;
-
-// src/components/SiteChatComponent/Footer/attachment-list/attachment-list.tsx
-var import_react2 = require("react");
-var import_design_system2 = require("@wix/design-system");
-var import_wix_ui_icons_common2 = require("@wix/wix-ui-icons-common");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var AttachmentList = ({ items, onRemove, onClick, onFilesSent }) => {
-  const [localItems, setLocalItems] = (0, import_react2.useState)(items);
-  (0, import_react2.useEffect)(() => {
-    setLocalItems(items);
-  }, [items]);
-  const handleOnRemove = (id) => {
-    if (onRemove) {
-      onRemove(id);
-    }
-    setLocalItems((prev) => prev.filter((item) => item.id !== id));
-  };
-  const handleSendFiles = () => {
-    if (onFilesSent && localItems.length > 0) {
-      onFilesSent(localItems);
-      setLocalItems([]);
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Box, { direction: "horizontal", gap: 2, maxWidth: "100%", minWidth: "100%", overflowY: "hidden", boxSizing: "border-box", scrollbarWidth: "thin", overflowX: "auto", children: localItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "site-chat-component-footer-file-item-container", onClick: () => onClick && onClick(item.id, item.url), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wix_ui_icons_common2.Page, { size: "15px" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "site-chat-component-footer-file-name", children: item.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.IconButton, { size: "tiny", onClick: () => handleOnRemove(item.id), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wix_ui_icons_common2.DismissSmall, {}) })
-  ] }, item.id)) });
-};
-var attachment_list_default = AttachmentList;
+var Button_default = Button;
 
-// src/components/SiteChatComponent/Footer/message-input/message-input.tsx
-var import_design_system3 = require("@wix/design-system");
-var import_wix_ui_icons_common3 = require("@wix/wix-ui-icons-common");
+// 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/SiteChatComponent/Footer/message-input/open-file-picker.ts
-var import_essentials = require("@wix/essentials");
-var import_meta = {};
-var uploadFile = async (file) => {
+// src/components/SiteChatComponentNew/Messages/AgentMessage.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AgentMessage = ({ message }) => {
   var _a;
-  try {
-    const baseApiUrl = new URL(import_meta.url).origin;
-    const response = await import_essentials.httpClient.fetchWithAuth(`${baseApiUrl}/api/widget/chat/upload-attachment`, {
-      method: "POST",
-      headers: {
-        "Content-Type": file.type || "application/octet-stream",
-        "x-file-name": encodeURIComponent(file.name),
-        "x-file-type": file.type || "application/octet-stream"
-      },
-      body: file
-    });
-    const data = await response.json();
-    if (!response.ok) {
-      throw new Error(data.error || "Failed to upload file");
-    }
-    if (!((_a = data.file) == null ? void 0 : _a.id) || !data.file.displayName || !data.file.url) {
-      throw new Error("Invalid response format from upload endpoint");
-    }
-    return data.file;
-  } catch (error) {
-    console.error("Error uploading file:", error);
-    return null;
-  }
-};
-var openFilePicker = async (options) => {
-  const win = window;
-  if (!win.showOpenFilePicker) {
-    console.error("File Picker API is not supported in this browser.");
-    return;
-  }
-  try {
-    const fileHandles = await win.showOpenFilePicker(options);
-    const fileHandle = fileHandles[0];
-    const file = await fileHandle.getFile();
-    const uploadedFile = await uploadFile(file);
-    if (!uploadedFile) {
-      console.error("Failed to upload file.");
-      return;
+  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) })
+        ] })
+      ]
     }
-    return {
-      id: uploadedFile.id,
-      name: uploadedFile.displayName,
-      url: uploadedFile.url
-    };
-  } catch (error) {
-    console.error("Error opening file picker:", error);
-    return null;
-  }
+  );
 };
+var AgentMessage_default = AgentMessage;
 
-// src/components/SiteChatComponent/Footer/message-input/message-input.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var MessageInput = ({
-  placeholder = "Type a message...",
-  disabled = false,
-  className = "",
-  suffix,
-  value = "",
-  onChange,
-  onKeyDown,
-  onAttachmentAdded
-}) => {
-  const handleAttachmentOnClick = async () => {
-    try {
-      await openFilePicker({ multiple: false }).then((file) => {
-        if (file && onAttachmentAdded) {
-          onAttachmentAdded(file);
-        }
-      });
-    } catch (error) {
-      console.error("Error opening file picker:", error);
+// 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" })
+      ]
     }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `site-chat-component-footer-input-wrapper ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "input",
-      {
-        name: "messageInput",
-        className: "site-chat-component-footer-chat-input",
-        placeholder,
-        disabled,
-        value,
-        onChange,
-        onKeyDown
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("sub", { className: "site-chat-component-footer-suffix", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.IconButton, { onClick: handleAttachmentOnClick, className: "attachment-icon-button", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_wix_ui_icons_common3.AttachmentSmall, {}) }) })
-  ] });
+  );
 };
-var message_input_default = MessageInput;
+var SystemMessage_default = SystemMessage;
 
-// src/components/SiteChatComponent/Footer/Footer.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Footer = import_react3.default.forwardRef(
-  ({
-    className,
-    children,
-    sendButtonConfig,
-    attachmentListConfig,
-    messageInputConfig,
-    onAttachmentAdded,
-    ...rest
-  }, ref) => {
-    const handleSendMessage = (text, messageType, attachment) => {
-      if (sendButtonConfig == null ? void 0 : sendButtonConfig.onClick) {
-        sendButtonConfig.onClick(text, messageType, attachment);
-      } else {
-        console.warn("handleSendMessage function is not provided in sendButtonConfig");
-      }
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system4.Box, { ref, className: "site-chat-component-footer-message-input-container", direction: "vertical", gap: 1, verticalAlign: "middle", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system4.Box, { width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(attachment_list_default, { items: (attachmentListConfig == null ? void 0 : attachmentListConfig.items) || [], onRemove: attachmentListConfig == null ? void 0 : attachmentListConfig.onRemove, onClick: attachmentListConfig == null ? void 0 : attachmentListConfig.onClick, onFilesSent: attachmentListConfig == null ? void 0 : attachmentListConfig.onFilesSent }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system4.Box, { alignContent: "bottom", width: "100%", direction: "horizontal", gap: 2, verticalAlign: "middle", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          message_input_default,
-          {
-            placeholder: (messageInputConfig == null ? void 0 : messageInputConfig.placeholder) || "Type your message here...",
-            className: (messageInputConfig == null ? void 0 : messageInputConfig.className) || "message-input",
-            value: (messageInputConfig == null ? void 0 : messageInputConfig.value) || "",
-            onChange: messageInputConfig == null ? void 0 : messageInputConfig.onChange,
-            onKeyDown: messageInputConfig == null ? void 0 : messageInputConfig.onKeyDown,
-            disabled: messageInputConfig == null ? void 0 : messageInputConfig.disabled,
-            onAttachmentAdded
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          send_button_default,
-          {
-            onClick: () => handleSendMessage((messageInputConfig == null ? void 0 : messageInputConfig.value) || "", (attachmentListConfig == null ? void 0 : attachmentListConfig.items) ? "ATTACHMENT" : "TEXT"),
-            disabled: sendButtonConfig == null ? void 0 : sendButtonConfig.disabled,
-            text: (sendButtonConfig == null ? void 0 : sendButtonConfig.buttonText) || "Send"
-          }
-        )
-      ] })
-    ] });
-  }
-);
-Footer.displayName = "SiteChatComponent.Footer";
+// 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/SiteChatComponent/Header/Header.tsx
-var import_react4 = __toESM(require("react"));
-var import_design_system5 = require("@wix/design-system");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Header = import_react4.default.forwardRef(
-  ({
-    className,
-    children,
-    title,
-    subtitle,
-    image,
-    onClose,
-    ...rest
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system5.Box, { ref, className: "site-chat-component-header-container", verticalAlign: "middle", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system5.Box, { width: "100%", direction: "horizontal", align: "center", gap: "10px", children: [
-      image && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system5.Box, { className: "site-chat-component-header-image", width: "60px", height: "50px", borderRadius: "999px", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { style: { borderRadius: "999px" }, width: "100%", height: "100%", src: String(image), alt: "Business Logo" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system5.Box, { direction: "vertical", className: "site-chat-component-header-text-section", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system5.Box, { className: "site-chat-component-header-top-section", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system5.Box, { className: "site-chat-component-header-top", verticalAlign: "middle", WebkitJustifyContent: "space-between", width: "100%", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "site-chat-component-header-title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+// 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",
             {
-              onClick: onClose,
-              "aria-label": "Close",
-              className: "site-chat-component-header-close-button",
-              children: "\u2715"
+              className: "cw-attachment-message__open-btn",
+              onClick: handleOpen,
+              "aria-label": `Open attachment ${attachment.name}`,
+              type: "button",
+              children: "Open"
             }
           )
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system5.Box, { className: "site-chat-component-header-bottom-section", children: subtitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "site-chat-component-header-subtitle", children: subtitle }) })
-      ] })
-    ] }) });
-  }
-);
-Header.displayName = "SiteChatComponent.Header";
-
-// src/components/SiteChatComponent/MessageContainer/MessageContainer.tsx
-var import_react6 = __toESM(require("react"));
-var import_design_system8 = require("@wix/design-system");
-
-// src/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.tsx
-var import_react5 = require("react");
-var import_design_system7 = require("@wix/design-system");
-
-// src/components/SiteChatComponent/MessageContainer/messages/attachment.tsx
-var import_design_system6 = require("@wix/design-system");
-var import_wix_ui_icons_common4 = require("@wix/wix-ui-icons-common");
-var import_on_stage = require("@wix/wix-ui-icons-common/on-stage");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Attachment = ({ item }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Box, { direction: "horizontal", maxWidth: "100%", boxSizing: "border-box", className: "site-chat-component-message-container-in-chat-file-item-wrapper-box", children: item && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "site-chat-component-message-container-in-chat-file-item-container", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_wix_ui_icons_common4.Page, { className: "site-chat-component-message-container-in-chat-file-icon", width: "20px", height: "20px" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "site-chat-component-message-container-in-chat-file-names-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "site-chat-component-message-container-in-chat-file-name", children: item.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "site-chat-component-message-container-in-chat-file-sub-name", children: "Attachment" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.TextButton, { size: "tiny", onClick: () => window.open(item.url, "_blank"), suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_on_stage.ArrowTopRight, { size: "tiny" }), children: "Open" })
-  ] }, item.id) });
-};
-var attachment_default = Attachment;
-
-// src/components/SiteChatComponent/MessageContainer/messages/messages-wrapper.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var AGENT_MESSAGE_GAP = "10px";
-var AGENT_MESSAGE_WIDTH = "75%";
-var AGENT_MESSAGE_INNER_GAP = "4px";
-var ONE_MINUTE_MS = 6e4;
-var ONE_DAY_MS = 864e5;
-var DAYS_IN_WEEK = 7;
-var formatTimestamp = (timestamp) => {
-  if (!timestamp) return "";
-  const date = new Date(timestamp);
-  const now = /* @__PURE__ */ new Date();
-  if (now.getTime() - date.getTime() < ONE_MINUTE_MS) return "Just now";
-  const time = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-  const startOfDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
-  const diffDays = Math.floor((startOfToday.getTime() - startOfDay.getTime()) / ONE_DAY_MS);
-  if (diffDays === 0) return `Today at ${time}`;
-  if (diffDays === 1) return `Yesterday at ${time}`;
-  if (diffDays < DAYS_IN_WEEK && date.getDay() < now.getDay())
-    return `${date.toLocaleDateString([], { weekday: "short" })} at ${time}`;
-  return `${date.toLocaleDateString([], { month: "short", day: "numeric", year: "numeric" })} at ${time}`;
-};
-var MessagesWrapper = ({ messages = [] }) => {
-  const wrapperRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
-    if (wrapperRef.current) {
-      wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
-    }
-  }, [messages]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-messages-wrapper", ref: wrapperRef, children: messages.map(({ _id, message, attachment, timestamp, senderType, senderName }, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `message-item ${senderType}`, children: senderType === "agent" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AgentMessageWrapper, { message, attachment: attachment ? Array.isArray(attachment) ? attachment[0] : attachment : void 0, timestamp, agentName: senderName }) : senderType === "user" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(UserMessageWrapper, { message, attachment: attachment ? Array.isArray(attachment) ? attachment[0] : attachment : void 0, timestamp }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SystemMessageWrapper, { message, timestamp }) }, _id || index)) });
-};
-var GetSystemMessage = ({ type }) => {
-  switch (type) {
-    case "AGENT_JOINED":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "An agent has joined the chat." });
-    case "AGENT_LEFT":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "An agent has left the chat." });
-    case "USER_JOINED":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "A user has joined the chat." });
-    case "USER_LEFT":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "A user has left the chat." });
-    case "CHAT_ENDED":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has ended." });
-    case "CHAT_REOPENED":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has been reopened." });
-    case "CHAT_TRANSFERRED":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "The chat has been transferred to another agent." });
-    case "WAITING_FOR_AGENT":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "Waiting for an agent to join the chat..." });
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-message", children: "System message" });
-  }
-};
-var SystemMessageWrapper = ({ message, timestamp }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-system-message-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "site-chat-component-message-container-system-message", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: "dashed" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GetSystemMessage, { type: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: "dashed" })
-  ] }) });
-};
-var AgentMessageWrapper = ({ message, attachment, timestamp, agentName }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "row", gap: AGENT_MESSAGE_GAP }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Avatar, { size: "size24", className: "site-chat-component-message-container-agent-message-avatar", name: agentName }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { width: AGENT_MESSAGE_WIDTH, gap: AGENT_MESSAGE_INNER_GAP, display: "flex", flexDirection: "column" }, children: [
-      agentName && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "site-chat-component-message-container-agent-name-time-container", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-agent-name", children: agentName }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-agent-message-timestamp", children: formatTimestamp(timestamp) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `site-chat-component-message-container-agent-message-wrapper${attachment ? "-attachment" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "site-chat-component-message-container-agent-message", children: [
-        message && message,
-        attachment && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(attachment_default, { item: attachment })
-      ] }) })
-    ] })
-  ] });
-};
-var UserMessageWrapper = ({ message, attachment, timestamp }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "4px" }, children: [
-    !attachment && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "site-chat-component-message-container-user-name", children: "Me" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `site-chat-component-message-container-user-message-wrapper${attachment ? "-attachment" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "site-chat-component-message-container-user-message", children: [
-      message && message,
-      attachment && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(attachment_default, { item: attachment })
-    ] }) })
-  ] });
+        ] }),
+        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 messages_wrapper_default = MessagesWrapper;
+var AttachmentMessage_default = AttachmentMessage;
 
-// src/components/SiteChatComponent/MessageContainer/MessageContainer.tsx
+// src/components/SiteChatComponentNew/Messages/MessageRenderer.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var MessageContainer = import_react6.default.forwardRef(
-  ({
-    className,
-    children,
-    messages,
-    loading,
-    ...rest
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_design_system8.Box, { ref, className: "site-chat-component-message-container", children: [
-      loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_design_system8.Box, { className: "site-chat-component-message-container-loading-state", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Loading messages..." }) }),
-      messages.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_design_system8.Box, { className: "site-chat-component-message-container-empty-state", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "No messages yet. Start a conversation" }) }),
-      messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(messages_wrapper_default, { messages })
-    ] });
+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;
   }
-);
-MessageContainer.displayName = "SiteChatComponent.MessageContainer";
+};
+var MessageRenderer_default = MessageRenderer;
 
-// src/components/SiteChatComponent/SiteChatComponent.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-3c48ccde")) {
+// src/components/SiteChatComponentNew/Messages/MessageList.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-15ae1a6b")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-3c48ccde";
-  s.textContent = `.site-chat-component {
-  /* SiteChatComponent base styles */
-}
-
-/* ---------- Header styles ---------- */
-
-.site-chat-component-header-container {
-  background: var(--my-tickets-chat-widget-panel-header-background-color);
-  padding: 10px;
-  border-top-right-radius: inherit;
-  border-top-left-radius: inherit;
-}
-
-.site-chat-component-header-container .site-chat-component-header-text-section {
-  width: 100%;
-}
-
-.site-chat-component-header-title {
-  font-style: var(--my-tickets-chat-widget-panel-header-title-font-style);
-  margin-bottom: 0 !important;
-  color: var(--my-tickets-chat-widget-panel-header-title-color);
-}
-
-.site-chat-component-header-subtitle {
-  font-style: var(--my-tickets-chat-widget-panel-header-subtitle-font-style);
-  font-weight: normal !important;
-  margin-top: 0 !important;
-  color: var(--my-tickets-chat-widget-panel-header-subtitle-color);
-}
-
-.site-chat-component-header-close-button {
-  cursor: pointer !important;
-  background: none;
-  border: none;
-  padding: 4px;
-  color: var(--my-tickets-chat-widget-panel-header-button-color);
-  font-size: 1.25rem;
-  line-height: 1;
-  border-radius: 4px;
-  transition: opacity 0.15s;
-}
-
-.site-chat-component-header-close-button:hover {
-  opacity: 0.8;
+  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);
 }
 
-/* ---------- Footer styles ---------- */
+// 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;
 
-.site-chat-component-footer-message-input-container {
-  padding: var(--cw-space-md, 16px);
-  background: var(--my-tickets-chat-widget-panel-footer-background-color);
-  font-family: var(--cw-font, sans-serif);
-  border-radius: 0 0 var(--cw-radius-panel, 16px) var(--cw-radius-panel, 16px);
+// 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);
 }
 
-.site-chat-component-footer-attachment-icon-button {
-  width: 20px;
-  height: 20px;
-}
+// src/components/SiteChatComponentNew/Messages/TypingIndicator.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 
-.site-chat-component-footer-my-tickets-chat-widget-send-button {
-  background: var(--my-tickets-chat-widget-panel-footer-button-color);
-  border: 1px solid var(--my-tickets-chat-widget-panel-footer-button-border-color);
-  color: var(--my-tickets-chat-widget-panel-footer-button-text-color);
-  padding: 6px;
-  border-radius: 4px;
-  width: 80px;
-  cursor: pointer;
+// 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);
 }
 
-.site-chat-component-footer-my-tickets-chat-widget-send-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
+// 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;
 
-.site-chat-component-footer-file-item-container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 2px 4px;
-  border-radius: var(--wds-input-area-border-radius-default-medium, 6px);
-  background-color: var(--wds-color-surface, var(--wsr-color-surface, #FFFFFF));
-  border: 1px solid var(--wds-input-border-color, var(--wsr-color-B40, #D6E6FE));
-  box-sizing: border-box;
+// 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);
 }
 
-.site-chat-component-footer-file-name {
-  font-family: var(--wds-font-family-default, var(--wsr-font-family, Madefor, "Helvetica Neue", Helvetica, Arial, "\\30E1\\30A4\\30EA\\30AA", "meiryo", "\\30D2\\30E9\\30AE\\30CE\\89D2\\30B4   pro w3", "hiragino kaku gothic pro", sans-serif));
-  font-size: var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px));
-  font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
-  line-height: var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 20px));
-  letter-spacing: var(--wds-font-letter-spacing-0, unset);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 115px;
-}
+// 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;
 
-.site-chat-component-footer-input-wrapper {
-  padding: 5px;
-  box-sizing: border-box;
-  width: inherit;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  gap: 10px;
-  border-radius: 4px;
-  background: var(--my-tickets-chat-widget-panel-footer-input-background-color);
-  border: 2px solid var(--my-tickets-chat-widget-panel-footer-input-border-color);
-  color: var(--my-tickets-chat-widget-panel-footer-input-text-color);
-  font-size: var(--my-tickets-chat-widget-panel-footer-input-text-size);
-  font-family: 'Arial', sans-serif;
-}
-
-.site-chat-component-footer-suffix {
-  background: inherit;
-  width: max-content;
-  min-height: 100%;
-  max-height: 100%;
-  align-items: center;
-  justify-content: center;
+// 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;
-  font-size: inherit;
-  padding: 0px;
-  margin: 0px;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-}
-
-.site-chat-component-footer-chat-input {
-  background: inherit;
-  border: none;
-  font-size: inherit;
-  font-family: inherit;
-  color: inherit;
-  width: inherit;
-}
-
-.site-chat-component-footer-chat-input::placeholder {
-  background: inherit;
-  border: none;
-  font-size: inherit;
-  font-family: inherit;
-  color: inherit;
-  opacity: 0.5;
-}
-
-.site-chat-component-footer-chat-input:focus {
-  outline: none;
+  flex-direction: column;
+  gap: 14px;
 }
 
-/* ---------- Messages styles ---------- */
-/* Message Container */
-.site-chat-component-message-container {
-  display: flex !important;
-  flex-direction: column !important;
-  padding: var(--cw-space-md, 16px) !important;
-  background: var(--my-tickets-chat-widget-panel-messages-background-color) !important;
-  flex: 1 !important;
-  min-height: 0;
-  overflow-y: auto !important;
+.cw-offline-form__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--cw-agent-text);
+  margin: 0 0 4px;
 }
 
-.site-chat-component-message-container-messages-wrapper {
+/* Field wrapper */
+.cw-offline-form__field {
   display: flex;
   flex-direction: column;
-  gap: var(--cw-space-sm, 8px);
-}
-
-.site-chat-component-message-container-agent-message-wrapper,
-.site-chat-component-message-container-user-message-wrapper {
-  display: flex;
-  padding: 10px 14px;
-  border-radius: var(--cw-radius-bubble, 12px);
-  width: max-content;
-  max-width: 80%;
-  font-family: var(--cw-font, sans-serif);
+  gap: 5px;
 }
 
-.site-chat-component-message-container-agent-name {
-  color: var(--my-tickets-chat-widget-panel-messages-agent-name-text-color);
-  font-size: var(--my-tickets-chat-widget-panel-messages-agent-name-text-size);
-  font-weight: 500;
+.cw-offline-form__field--checkbox {
+  gap: 4px;
 }
 
-.site-chat-component-message-container-user-name {
-  color: var(--my-tickets-chat-widget-panel-messages-user-name-text-color);
-  font-size: var(--my-tickets-chat-widget-panel-messages-user-name-text-size);
+/* Label */
+.cw-offline-form__label {
+  font-size: 13px;
   font-weight: 500;
-  display: var(--my-tickets-chat-widget-panel-messages-user-name-text-visible);
-}
-
-.site-chat-component-message-container-agent-message-avatar {
-  margin-top: 20px;
-  display: var(--my-tickets-chat-widget-panel-messages-agent-icon-visible);
-}
-
-.site-chat-component-message-container-user-message,
-.site-chat-component-message-container-agent-message {
-  line-height: 1.5;
-  word-wrap: break-word;
-}
-
-.site-chat-component-message-container-agent-message {
-  font-size: var(--my-tickets-chat-widget-panel-messages-agent-text-size);
+  color: var(--cw-agent-text);
 }
 
-.site-chat-component-message-container-user-message {
-  font-size: var(--my-tickets-chat-widget-panel-messages-user-text-size);
+.cw-offline-form__required {
+  color: #ef4444;
 }
 
-.site-chat-component-message-container-agent-message-wrapper {
-  justify-content: flex-start;
-  align-self: flex-start;
-  background-color: var(--my-tickets-chat-widget-panel-messages-agent-bubble-color);
-  color: var(--my-tickets-chat-widget-panel-messages-agent-text-color);
+/* 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;
 }
 
-.site-chat-component-message-container-user-message-wrapper {
-  justify-content: flex-end;
-  align-self: flex-end;
-  margin-left: auto;
-  background-color: var(--my-tickets-chat-widget-panel-messages-user-bubble-color);
-  color: var(--my-tickets-chat-widget-panel-messages-user-text-color);
+.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);
 }
 
-.site-chat-component-message-container-agent-name-time-container {
-  gap: 8px;
-  display: flex;
-  align-items: center;
-  font-family: 'Madefor';
-  font-size: 13px;
+.cw-offline-form__input--error {
+  border-color: #ef4444;
 }
 
-/* System Messages */
-
-.site-chat-component-message-container-system-message {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+/* Textarea */
+.cw-offline-form__textarea {
   width: 100%;
-  gap: var(--cw-space-sm, 8px);
-}
-
-.site-chat-component-message-container-system-message .dashed {
-  flex: 1;
-  border: none;
-  border-top: 1px dashed var(--my-tickets-chat-widget-panel-messages-system-color);
-  margin: 0;
+  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;
 }
 
-.site-chat-component-message-container-system-message-message {
-  color: var(--my-tickets-chat-widget-panel-messages-system-color);
-  font-family: var(--cw-font, sans-serif);
-  font-size: var(--my-tickets-chat-widget-panel-messages-system-size);
-  font-weight: 500;
-  white-space: nowrap;
+.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);
 }
 
-/* Empty and Loading States */
-
-.site-chat-component-message-container-empty-state {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
+.cw-offline-form__textarea--error {
+  border-color: #ef4444;
 }
 
-.site-chat-component-message-container-empty-state p {
-  font-family: var(--cw-font, sans-serif);
-  font-size: 14px;
-  color: var(--my-tickets-chat-widget-panel-messages-system-color);
+/* 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;
 }
 
-.site-chat-component-message-container-loading-state {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
+.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);
 }
 
-.site-chat-component-message-container-loading-state p {
-  font-family: var(--cw-font, sans-serif);
-  font-size: 14px;
-  color: var(--my-tickets-chat-widget-panel-messages-system-color);
+.cw-offline-form__select--error {
+  border-color: #ef4444;
 }
 
-.site-chat-component-message-container-in-chat-file-item-container {
+/* Checkbox */
+.cw-offline-form__checkbox-label {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
-  padding: 4px 8px;
-  border-radius: var(--wds-input-area-border-radius-default-medium, 6px);
-  background-color: var(--wds-color-surface, var(--wsr-color-surface, #FFFFFF));
-  border: 1px solid var(--wds-input-border-color, var(--wsr-color-B40, #D6E6FE));
-  box-sizing: border-box;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--cw-agent-text);
 }
 
-.site-chat-component-message-container-in-chat-file-name {
-  font-family: var(--wds-font-family-default, var(--wsr-font-family, Madefor, "Helvetica Neue", Helvetica, Arial, "\\30E1\\30A4\\30EA\\30AA", "meiryo", "\\30D2\\30E9\\30AE\\30CE\\89D2\\30B4   pro w3", "hiragino kaku gothic pro", sans-serif));
-  font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 10px));
-  font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
-  line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 12px));
-  letter-spacing: var(--wds-font-letter-spacing-0, unset);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 150px;
-  color: black;
+.cw-offline-form__checkbox {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--cw-primary);
+  flex-shrink: 0;
+  margin-top: 1px;
+  cursor: pointer;
 }
 
-.site-chat-component-message-container-in-chat-file-sub-name {
-  font-family: var(--wds-font-family-default, var(--wsr-font-family, Madefor, "Helvetica Neue", Helvetica, Arial, "\\30E1\\30A4\\30EA\\30AA", "meiryo", "\\30D2\\30E9\\30AE\\30CE\\89D2\\30B4   pro w3", "hiragino kaku gothic pro", sans-serif));
-  font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 10px));
-  font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
-  line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 12px));
-  letter-spacing: var(--wds-font-letter-spacing-0, unset);
-  color: var(--wds-color-text-secondary, var(--wsr-color-text-secondary, #6B6B6B));
+.cw-offline-form__checkbox:focus-visible {
+  outline: 2px solid var(--cw-primary);
+  outline-offset: 2px;
 }
 
-.site-chat-component-message-container-in-chat-file-icon {
-  fill: black !important;
+.cw-offline-form__checkbox-text {
+  line-height: 1.4;
 }
 
-.site-chat-component-message-container-in-chat-file-names-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0px;
+/* Error message */
+.cw-offline-form__error {
+  font-size: 12px;
+  color: #ef4444;
+  font-weight: 500;
 }
 
-.site-chat-component-message-container-user-message-wrapper-attachment .site-chat-component-message-container-in-chat-file-item-wrapper-box {
-  align-items: flex-end;
-  display: flex;
-  flex-direction: column;
+/* Actions */
+.cw-offline-form__actions {
+  margin-top: 4px;
 }
-
-.site-chat-component-message-container-agent-message-wrapper-attachment .site-chat-component-message-container-in-chat-file-item-wrapper-box {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
+`;
+  document.head.appendChild(s);
 }
 
-/* FAB */
-.site-chat-component-fab {
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  gap: 4.5px;
-  cursor: pointer;
-  z-index: 100;
-  user-select: none;
-  border-radius: 99px;
-  padding: 9px 25px;
-  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-
-  font-size: var(--my-tickets-chat-widget-button-text-size) !important;
-  background-color: var(--my-tickets-chat-widget-button-color);
-  border: 1px solid var(--my-tickets-chat-widget-button-border-color);
-  color: var(--my-tickets-chat-widget-button-text-color);
-  font: var(--my-tickets-chat-widget-button-text-font);
-}
-
-.site-chat-component-fab-fab-button-label {
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  margin-top: 2px;
-}
-
-.site-chat-component-fab-fab-button-icon,
-.site-chat-component-fab-fab-button-text {
-  display: inline-flex;
-  align-items: center;
-  height: 100%;
-}
-
-.site-chat-component-fab-fab-button-icon svg {
-  width: var(--my-tickets-chat-widget-button-icon-size);
-  height: var(--my-tickets-chat-widget-button-icon-size);
-  font-weight: inherit;
-}
-
-/* \u2500\u2500 Design Tokens \u2500\u2500 */
-:host {
-  --cw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-
-  /* Primary palette */
-  --cw-primary: #3B82F6;
-  --cw-primary-hover: #2563EB;
-  --cw-primary-light: #EFF6FF;
-  --cw-primary-shadow: rgba(59, 130, 246, 0.35);
-  --cw-primary-shadow-hover: rgba(59, 130, 246, 0.5);
-
-  /* Neutrals */
-  --cw-bg: #F8FAFC;
-  --cw-surface: #FFFFFF;
-  --cw-border: #E2E8F0;
-
-  /* Text */
-  --cw-text: #1E293B;
-  --cw-text-muted: #64748B;
-  --cw-text-inverse: #FFFFFF;
-
-  /* Message bubbles */
-  --cw-bubble-user: var(--cw-primary);
-  --cw-bubble-user-text: var(--cw-text-inverse);
-  --cw-bubble-agent: #F1F5F9;
-  --cw-bubble-agent-text: var(--cw-text);
-
-  /* Radii */
-  --cw-radius-panel: 16px;
-  --cw-radius-bubble: 12px;
-  --cw-radius-pill: 50px;
-
-  /* Spacing */
-  --cw-space-xs: 4px;
-  --cw-space-sm: 8px;
-  --cw-space-md: 16px;
-  --cw-space-lg: 24px;
-
-  /* Shadows */
-  --cw-shadow-panel: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.05);
-  --cw-shadow-fab: 0 8px 24px var(--cw-primary-shadow);
-  --cw-shadow-fab-hover: 0 12px 32px var(--cw-primary-shadow-hover);
-}
-
-/* \u2500\u2500 Hide toggle \u2500\u2500 */
-#site-chat-component-chat-toggle {
-  display: none;
-}
-
-/* \u2500\u2500 Panel \u2500\u2500 */
-.site-chat-component-panel {
-  position: fixed !important;
-  bottom: 60px;
-  right: 30px;
-  width: min(340px, 100vw);
-  max-height: 50vh;
-  max-height: 50dvh;
-  background: var(--cw-surface);
-  border-radius: var(--cw-radius-panel, 16px) !important;
-  box-shadow: var(--cw-shadow-panel);
-  transform: scale(0.85) translateY(16px);
-  transform-origin: bottom right;
-  opacity: 0;
-  pointer-events: none;
-  transition: transform 0.3s cubic-bezier(.175, .885, .32, 1.275), opacity 0.25s ease;
-  z-index: 99;
-  display: flex !important;
-  flex-direction: column !important;
-  min-height: 450px;
-  font-family: var(--cw-font);
-  overflow: hidden;
-  border: 0px solid var(--wst-color-line);
-  box-shadow: 0 2px 6px var(--wst-color-line), 0 0 0 1px var(--wst-color-line);
-}
-
-.site-chat-component-panel.open {
-  transform: scale(1) translateY(0);
-  opacity: 1;
-  pointer-events: all;
-  z-index: 101;
-  bottom: 10px;
-}
-
-/* \u2500\u2500 Mobile: fill screen \u2500\u2500 */
-@media (max-width: 480px) {
-  .site-chat-component-panel {
-    width: 100vw;
-    height: 100vh;
-    height: 100dvh;
-    min-height: 0;
-    max-height: none;
-    bottom: 0;
-    right: 0;
+// 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 })
+    ] });
   }
-
-  .site-chat-component-panel.open {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+  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 })
+    ] });
   }
-}
-
-/* \u2500\u2500 Small tablets \u2500\u2500 */
-@media (min-width: 481px) and (max-width: 768px) {
-  .site-chat-component-panel {
-    width: min(380px, calc(100vw - 24px));
-    max-height: 70vh;
-    max-height: 70dvh;
+  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);
 }
 
-/* \u2500\u2500 Large screens \u2500\u2500 */
-@media (min-width: 1200px) {
-  .site-chat-component-panel {
-    width: 350px;
-    max-height: 70vh;
-    max-height: 70dvh;
-  }
+// 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/SiteChatComponent/SiteChatComponent.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var SiteChatComponentRoot = import_react7.default.forwardRef(
-  ({
-    children,
-    viewMode,
-    editorShowChatPanel,
-    handleToggle,
-    buttonTextValue,
-    isOpen
-  }, _ref) => {
-    useSiteChatComponent();
-    if (viewMode === "Editor") {
-      if (typeof editorShowChatPanel === "undefined") {
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_design_system9.Box, { align: "center", verticalAlign: "middle", height: "100%", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_design_system9.Text, { children: "Editor view mode detected but editorShowChatPanel prop is not provided" }) });
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_design_system9.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FabButton, { onClick: handleToggle, text: buttonTextValue }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_design_system9.Box, { className: `site-chat-component-panel ${editorShowChatPanel ? "open" : ""}`, children })
-      ] });
+// 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, width, height);
+  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_runtime10.jsxs)(import_design_system9.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FabButton, { onClick: handleToggle, text: buttonTextValue }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_design_system9.Box, { className: `site-chat-component-panel ${isOpen ? "open" : ""}`, children })
+    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 })
     ] });
-  }
-);
-SiteChatComponentRoot.displayName = "SiteChatComponent";
-var SiteChatComponent = Object.assign(SiteChatComponentRoot, {
-  Header,
-  MessageContainer,
-  Footer,
-  FabButton
+  };
+  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`,
+        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";
 
-// src/components/SiteChatComponentNew/SiteChatComponentNew.tsx
-var import_react12 = __toESM(require("react"));
+// src/components/SiteChatComponentNewErc/SiteChatComponentNewErc.tsx
+var import_react10 = __toESM(require("react"));
 
-// src/components/SiteChatComponentNew/useSiteChatComponentNew.ts
-var import_react8 = require("react");
-function useSiteChatComponentNew(defaultOpen = false) {
-  const [open, setOpen] = (0, import_react8.useState)(defaultOpen);
-  const openWidget = (0, import_react8.useCallback)(() => setOpen(true), []);
-  const closeWidget = (0, import_react8.useCallback)(() => setOpen(false), []);
+// src/components/SiteChatComponentNewErc/useSiteChatComponentNewErc.ts
+var import_react6 = require("react");
+function useSiteChatComponentNewErc(defaultOpen = false) {
+  const [open, setOpen] = (0, import_react6.useState)(defaultOpen);
+  const openWidget = (0, import_react6.useCallback)(() => setOpen(true), []);
+  const closeWidget = (0, import_react6.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 = {
+// src/components/SiteChatComponentNewErc/utils/theme.ts
+var FONT_FAMILY2 = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif";
+var FONT_SIZE2 = "14px";
+var SHADOW2 = "0 4px 24px rgba(0,0,0,0.12)";
+var WIDTH2 = "400px";
+var HEIGHT2 = "600px";
+var HEADER_HEIGHT2 = "64px";
+var defaultTheme2 = {
   primary: "#4f46e5",
   background: "#ffffff",
   surface: "#f9fafb",
@@ -1032,8 +1334,8 @@ var defaultTheme = {
   buttonRadius: 8,
   borderRadius: 12
 };
-function buildThemeVars(partial, width, height) {
-  const theme = { ...defaultTheme, ...partial };
+function buildThemeVars2(partial, width, height) {
+  const theme = { ...defaultTheme2, ...partial };
   return {
     // Colours
     "--cw-primary": theme.primary,
@@ -1051,17 +1353,17 @@ function buildThemeVars(partial, width, height) {
     "--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 !== void 0 ? typeof width === "number" ? `${width}px` : width : WIDTH,
-    "--cw-height": height !== void 0 ? typeof height === "number" ? `${height}px` : height : HEIGHT,
-    "--cw-header-height": HEADER_HEIGHT
+    "--cw-font-family": FONT_FAMILY2,
+    "--cw-font-size": FONT_SIZE2,
+    "--cw-shadow": SHADOW2,
+    "--cw-width": width !== void 0 ? typeof width === "number" ? `${width}px` : width : WIDTH2,
+    "--cw-height": height !== void 0 ? typeof height === "number" ? `${height}px` : height : HEIGHT2,
+    "--cw-header-height": HEADER_HEIGHT2
   };
 }
 
-// src/components/SiteChatComponentNew/utils/systemMessages.ts
-var systemEventLabels = {
+// src/components/SiteChatComponentNewErc/utils/systemMessages.ts
+var systemEventLabels2 = {
   AGENT_JOINED: "Agent joined",
   AGENT_LEFT: "Agent left",
   USER_JOINED: "You joined",
@@ -1071,53 +1373,53 @@ var systemEventLabels = {
   CHAT_TRANSFERRED: "Chat transferred",
   WAITING_FOR_AGENT: "Waiting for an agent"
 };
-function getSystemLabel(event) {
+function getSystemLabel2(event) {
   var _a;
-  return (_a = systemEventLabels[event]) != null ? _a : event;
+  return (_a = systemEventLabels2[event]) != null ? _a : event;
 }
 
-// src/components/SiteChatComponentNew/utils/format.ts
-function formatTime(timestamp) {
+// src/components/SiteChatComponentNewErc/utils/format.ts
+function formatTime2(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")) {
+// src/components/SiteChatComponentNewErc/Header/Header.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-759620f0")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-45eba566";
+  s.id = "jrapps-style-759620f0";
   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_runtime11 = require("react/jsx-runtime");
-var Header2 = ({ image, title, subtitle, onClose }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { className: "cw-header", role: "banner", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cw-header__identity", children: [
-      image && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+// src/components/SiteChatComponentNewErc/Header/Header.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Header2 = ({ image, title, subtitle, onClose, ercClasses }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("header", { className: ["cw-header", ercClasses == null ? void 0 : ercClasses.headerClassName].filter(Boolean).join(" "), role: "banner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "cw-header__identity", children: [
+      image && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "img",
         {
           src: image,
           alt: `${title} avatar`,
-          className: "cw-header__avatar"
+          className: ["cw-header__avatar", ercClasses == null ? void 0 : ercClasses.imageClassName].filter(Boolean).join(" ")
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cw-header__text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "cw-header__title", children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "cw-header__subtitle", children: subtitle })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "cw-header__text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: ["cw-header__title", ercClasses == null ? void 0 : ercClasses.titleClassName].filter(Boolean).join(" "), children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: ["cw-header__subtitle", ercClasses == null ? void 0 : ercClasses.subtitleClassName].filter(Boolean).join(" "), children: subtitle })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
       {
-        className: "cw-header__close",
+        className: ["cw-header__close", ercClasses == null ? void 0 : ercClasses.closeButtonClassName].filter(Boolean).join(" "),
         onClick: onClose,
         "aria-label": "Close chat",
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -1131,8 +1433,8 @@ var Header2 = ({ image, title, subtitle, onClose }) => {
             strokeLinejoin: "round",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
             ]
           }
         )
@@ -1140,28 +1442,28 @@ var Header2 = ({ image, title, subtitle, onClose }) => {
     )
   ] });
 };
-var Header_default = Header2;
+var Header_default2 = Header2;
 
-// src/components/SiteChatComponentNew/Footer/Footer.tsx
-var import_react9 = require("react");
+// src/components/SiteChatComponentNewErc/Footer/Footer.tsx
+var import_react7 = require("react");
 
-// src/components/SiteChatComponentNew/Footer/Footer.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-ebcf221d")) {
+// src/components/SiteChatComponentNewErc/Footer/Footer.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-c86a5c82")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-ebcf221d";
+  s.id = "jrapps-style-c86a5c82";
   s.textContent = ".cw-footer {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\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__controls {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n}\n\n/* \u2500\u2500\u2500 Staged file chips \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-footer__file-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.cw-footer__file-chip {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background-color: color-mix(in srgb, var(--cw-primary) 12%, transparent);\n  border: 1px solid color-mix(in srgb, var(--cw-primary) 30%, transparent);\n  border-radius: 999px;\n  padding: 3px 8px 3px 10px;\n  font-size: 12px;\n  color: var(--cw-primary);\n  max-width: 200px;\n}\n\n.cw-footer__file-chip-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.cw-footer__file-chip-remove {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 2px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  border-radius: 50%;\n  flex-shrink: 0;\n  opacity: 0.7;\n  transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.cw-footer__file-chip-remove:hover {\n  opacity: 1;\n  background-color: color-mix(in srgb, var(--cw-primary) 15%, transparent);\n}\n\n.cw-footer__file-chip-remove:focus-visible {\n  outline: 2px solid var(--cw-primary);\n  outline-offset: 1px;\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_runtime12 = require("react/jsx-runtime");
-var Footer2 = ({ onSend, onAttachment, disabled }) => {
-  const [text, setText] = (0, import_react9.useState)("");
-  const [stagedFiles, setStagedFiles] = (0, import_react9.useState)([]);
-  const fileInputRef = (0, import_react9.useRef)(null);
-  const textareaRef = (0, import_react9.useRef)(null);
+// src/components/SiteChatComponentNewErc/Footer/Footer.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Footer2 = ({ onSend, onAttachment, disabled, ercClasses }) => {
+  const [text, setText] = (0, import_react7.useState)("");
+  const [stagedFiles, setStagedFiles] = (0, import_react7.useState)([]);
+  const fileInputRef = (0, import_react7.useRef)(null);
+  const textareaRef = (0, import_react7.useRef)(null);
   const isEmpty = text.trim().length === 0 && stagedFiles.length === 0;
-  const handleSend = (0, import_react9.useCallback)(() => {
+  const handleSend = (0, import_react7.useCallback)(() => {
     if (!isEmpty && !disabled) {
       if (text.trim().length > 0) {
         onSend(text.trim());
@@ -1175,7 +1477,7 @@ var Footer2 = ({ onSend, onAttachment, disabled }) => {
       }
     }
   }, [isEmpty, disabled, onSend, text, stagedFiles, onAttachment]);
-  const handleKeyDown = (0, import_react9.useCallback)(
+  const handleKeyDown = (0, import_react7.useCallback)(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -1184,7 +1486,7 @@ var Footer2 = ({ onSend, onAttachment, disabled }) => {
     },
     [handleSend]
   );
-  const handleChange = (0, import_react9.useCallback)(
+  const handleChange = (0, import_react7.useCallback)(
     (e) => {
       setText(e.target.value);
       const el = e.target;
@@ -1193,11 +1495,11 @@ var Footer2 = ({ onSend, onAttachment, disabled }) => {
     },
     []
   );
-  const handleAttachmentClick = (0, import_react9.useCallback)(() => {
+  const handleAttachmentClick = (0, import_react7.useCallback)(() => {
     var _a;
     (_a = fileInputRef.current) == null ? void 0 : _a.click();
   }, []);
-  const handleFileChange = (0, import_react9.useCallback)(
+  const handleFileChange = (0, import_react7.useCallback)(
     (e) => {
       var _a;
       const files = Array.from((_a = e.target.files) != null ? _a : []);
@@ -1210,33 +1512,33 @@ var Footer2 = ({ onSend, onAttachment, disabled }) => {
     },
     []
   );
-  const handleRemoveStagedFile = (0, import_react9.useCallback)((index) => {
+  const handleRemoveStagedFile = (0, import_react7.useCallback)((index) => {
     setStagedFiles((prev) => prev.filter((_, i) => i !== index));
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("footer", { className: "cw-footer", role: "contentinfo", children: [
-    stagedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "cw-footer__file-list", "aria-label": "Files to send", children: stagedFiles.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { className: "cw-footer__file-chip", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "cw-footer__file-chip-name", title: file.name, children: file.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("footer", { className: ["cw-footer", ercClasses == null ? void 0 : ercClasses.footerClassName].filter(Boolean).join(" "), role: "contentinfo", children: [
+    stagedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ul", { className: "cw-footer__file-list", "aria-label": "Files to send", children: stagedFiles.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("li", { className: "cw-footer__file-chip", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "cw-footer__file-chip-name", title: file.name, children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
           className: "cw-footer__file-chip-remove",
           onClick: () => handleRemoveStagedFile(i),
           "aria-label": `Remove ${file.name}`,
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) })
         }
       )
     ] }, `${file.name}-${i}`)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "cw-footer__controls", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "cw-footer__controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
-          className: "cw-footer__attach-btn",
+          className: ["cw-footer__attach-btn", ercClasses == null ? void 0 : ercClasses.attachmentButtonClassName].filter(Boolean).join(" "),
           onClick: handleAttachmentClick,
           "aria-label": "Attach file",
           type: "button",
           disabled,
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -1249,16 +1551,16 @@ var Footer2 = ({ onSend, onAttachment, disabled }) => {
               strokeLinecap: "round",
               strokeLinejoin: "round",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.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" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "textarea",
         {
           ref: textareaRef,
-          className: "cw-footer__input",
+          className: ["cw-footer__input", ercClasses == null ? void 0 : ercClasses.inputClassName].filter(Boolean).join(" "),
           value: text,
           onChange: handleChange,
           onKeyDown: handleKeyDown,
@@ -1268,15 +1570,19 @@ var Footer2 = ({ onSend, onAttachment, disabled }) => {
           disabled
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
-          className: `cw-footer__send-btn${isEmpty || disabled ? " cw-footer__send-btn--disabled" : ""}`,
+          className: [
+            "cw-footer__send-btn",
+            isEmpty || disabled ? "cw-footer__send-btn--disabled" : "",
+            ercClasses == null ? void 0 : ercClasses.sendButtonClassName
+          ].filter(Boolean).join(" "),
           onClick: handleSend,
           "aria-label": "Send message",
           type: "button",
           disabled: isEmpty || disabled,
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -1285,12 +1591,12 @@ var Footer2 = ({ onSend, onAttachment, disabled }) => {
               viewBox: "0 0 24 24",
               fill: "currentColor",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "input",
         {
           ref: fileInputRef,
@@ -1305,14 +1611,14 @@ var Footer2 = ({ onSend, onAttachment, disabled }) => {
     ] })
   ] });
 };
-var Footer_default = Footer2;
+var Footer_default2 = Footer2;
 
-// src/components/SiteChatComponentNew/hooks/useAutoScroll.ts
-var import_react10 = require("react");
-function useAutoScroll(dependency) {
-  const ref = (0, import_react10.useRef)(null);
-  const userScrolledUp = (0, import_react10.useRef)(false);
-  (0, import_react10.useEffect)(() => {
+// src/components/SiteChatComponentNewErc/hooks/useAutoScroll.ts
+var import_react8 = require("react");
+function useAutoScroll2(dependency) {
+  const ref = (0, import_react8.useRef)(null);
+  const userScrolledUp = (0, import_react8.useRef)(false);
+  (0, import_react8.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const handleScroll = () => {
@@ -1322,7 +1628,7 @@ function useAutoScroll(dependency) {
     el.addEventListener("scroll", handleScroll, { passive: true });
     return () => el.removeEventListener("scroll", handleScroll);
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const el = ref.current;
     if (!el || userScrolledUp.current) return;
     el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
@@ -1330,9 +1636,9 @@ function useAutoScroll(dependency) {
   return ref;
 }
 
-// src/components/SiteChatComponentNew/hooks/useOfflineForm.ts
-var import_react11 = require("react");
-function validateField(field, value) {
+// src/components/SiteChatComponentNewErc/hooks/useOfflineForm.ts
+var import_react9 = require("react");
+function validateField2(field, value) {
   if (field.required) {
     if (field.type === "checkbox" && !value) {
       return `${field.label} is required.`;
@@ -1355,39 +1661,39 @@ function validateField(field, value) {
   }
   return "";
 }
-function useOfflineForm(schema) {
+function useOfflineForm2(schema) {
   const initialValues = {};
   for (const field of schema.fields) {
     initialValues[field.id] = field.type === "checkbox" ? false : "";
   }
-  const [values, setValues] = (0, import_react11.useState)(initialValues);
-  const [errors, setErrors] = (0, import_react11.useState)({});
-  const [submitted, setSubmitted] = (0, import_react11.useState)(false);
-  const setValue = (0, import_react11.useCallback)(
+  const [values, setValues] = (0, import_react9.useState)(initialValues);
+  const [errors, setErrors] = (0, import_react9.useState)({});
+  const [submitted, setSubmitted] = (0, import_react9.useState)(false);
+  const setValue = (0, import_react9.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);
+          const error = validateField2(field, value);
           setErrors((prev) => ({ ...prev, [id]: error }));
         }
       }
     },
     [schema.fields, submitted]
   );
-  const validate = (0, import_react11.useCallback)(() => {
+  const validate = (0, import_react9.useCallback)(() => {
     const newErrors = {};
     let valid = true;
     for (const field of schema.fields) {
-      const error = validateField(field, values[field.id]);
+      const error = validateField2(field, values[field.id]);
       newErrors[field.id] = error;
       if (error) valid = false;
     }
     setErrors(newErrors);
     return valid;
   }, [schema.fields, values]);
-  const handleSubmit = (0, import_react11.useCallback)(
+  const handleSubmit = (0, import_react9.useCallback)(
     (onSubmit) => {
       setSubmitted(true);
       if (validate()) {
@@ -1396,7 +1702,7 @@ function useOfflineForm(schema) {
     },
     [validate, values]
   );
-  const reset = (0, import_react11.useCallback)(() => {
+  const reset = (0, import_react9.useCallback)(() => {
     setValues(initialValues);
     setErrors({});
     setSubmitted(false);
@@ -1404,35 +1710,35 @@ function useOfflineForm(schema) {
   return { values, errors, setValue, handleSubmit, reset };
 }
 
-// src/components/SiteChatComponentNew/Messages/UserMessage.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-aed321e0")) {
+// src/components/SiteChatComponentNewErc/Messages/UserMessage.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-488069e4")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-aed321e0";
+  s.id = "jrapps-style-488069e4";
   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_runtime13 = require("react/jsx-runtime");
-var UserMessage = ({ message }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "cw-user-message", role: "listitem", "aria-label": "Your message", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "cw-user-message__bubble", children: message.message }),
-    message.timestamp !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "cw-user-message__time", children: formatTime(message.timestamp) })
+// src/components/SiteChatComponentNewErc/Messages/UserMessage.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var UserMessage2 = ({ message, ercClassName }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: ["cw-user-message", ercClassName].filter(Boolean).join(" "), role: "listitem", "aria-label": "Your message", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "cw-user-message__bubble", children: message.message }),
+    message.timestamp !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "cw-user-message__time", children: formatTime2(message.timestamp) })
   ] });
 };
-var UserMessage_default = UserMessage;
+var UserMessage_default2 = UserMessage2;
 
-// src/components/SiteChatComponentNew/Shared/Avatar.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-ce14fbec")) {
+// src/components/SiteChatComponentNewErc/Shared/Avatar.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-ad01373e")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-ce14fbec";
+  s.id = "jrapps-style-ad01373e";
   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_runtime14 = require("react/jsx-runtime");
-function getInitials(name) {
+// src/components/SiteChatComponentNewErc/Shared/Avatar.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function getInitials2(name) {
   return name.split(" ").slice(0, 2).map((w) => w[0]).join("").toUpperCase();
 }
 var Avatar2 = ({ src, name, size = 32 }) => {
@@ -1442,7 +1748,7 @@ var Avatar2 = ({ src, name, size = 32 }) => {
     fontSize: `${Math.round(size * 0.38)}px`
   };
   if (src) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "img",
       {
         src,
@@ -1452,29 +1758,29 @@ var Avatar2 = ({ src, name, size = 32 }) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "span",
     {
       className: "cw-avatar cw-avatar--initials",
       "aria-label": name ? `${name} avatar` : "Agent avatar",
       style,
-      children: name ? getInitials(name) : "A"
+      children: name ? getInitials2(name) : "A"
     }
   );
 };
-var Avatar_default = Avatar2;
+var Avatar_default2 = Avatar2;
 
-// src/components/SiteChatComponentNew/Shared/Button.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-2aa106ea")) {
+// src/components/SiteChatComponentNewErc/Shared/Button.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-0aa71f6d")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-2aa106ea";
+  s.id = "jrapps-style-0aa71f6d";
   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_runtime15 = require("react/jsx-runtime");
-var Button = ({
+// src/components/SiteChatComponentNewErc/Shared/Button.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Button2 = ({
   children,
   onClick,
   variant = "primary",
@@ -1483,7 +1789,7 @@ var Button = ({
   fullWidth = false,
   ariaLabel
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "button",
     {
       className: `cw-button cw-button--${variant}${fullWidth ? " cw-button--full" : ""}`,
@@ -1495,94 +1801,94 @@ var Button = ({
     }
   );
 };
-var Button_default = Button;
+var Button_default2 = Button2;
 
-// src/components/SiteChatComponentNew/Messages/AgentMessage.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-5df522b1")) {
+// src/components/SiteChatComponentNewErc/Messages/AgentMessage.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-f5aad44b")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-5df522b1";
+  s.id = "jrapps-style-f5aad44b";
   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_runtime16 = require("react/jsx-runtime");
-var AgentMessage = ({ message }) => {
+// src/components/SiteChatComponentNewErc/Messages/AgentMessage.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var AgentMessage2 = ({ message, ercClassName }) => {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
-      className: "cw-agent-message",
+      className: ["cw-agent-message", ercClassName].filter(Boolean).join(" "),
       role: "listitem",
       "aria-label": `Message from ${(_a = message.senderName) != null ? _a : "Agent"}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Avatar_default, { name: message.senderName, size: 32 }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "cw-agent-message__content", children: [
-          message.senderName && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "cw-agent-message__name", children: message.senderName }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "cw-agent-message__bubble", children: message.message }),
-          message.timestamp !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "cw-agent-message__time", children: formatTime(message.timestamp) })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Avatar_default2, { name: message.senderName, size: 32 }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "cw-agent-message__content", children: [
+          message.senderName && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "cw-agent-message__name", children: message.senderName }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "cw-agent-message__bubble", children: message.message }),
+          message.timestamp !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "cw-agent-message__time", children: formatTime2(message.timestamp) })
         ] })
       ]
     }
   );
 };
-var AgentMessage_default = AgentMessage;
+var AgentMessage_default2 = AgentMessage2;
 
-// src/components/SiteChatComponentNew/Messages/SystemMessage.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-464a3601")) {
+// src/components/SiteChatComponentNewErc/Messages/SystemMessage.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-631d733c")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-464a3601";
+  s.id = "jrapps-style-631d733c";
   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_runtime17 = require("react/jsx-runtime");
-var SystemMessage = ({ message }) => {
+// src/components/SiteChatComponentNewErc/Messages/SystemMessage.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var SystemMessage2 = ({ message, ercClassName }) => {
   var _a;
-  const label = message.message ? getSystemLabel(message.message) : (_a = message.message) != null ? _a : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  const label = message.message ? getSystemLabel2(message.message) : (_a = message.message) != null ? _a : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
-      className: "cw-system-message",
+      className: ["cw-system-message", ercClassName].filter(Boolean).join(" "),
       role: "listitem",
       "aria-label": `System notification: ${label}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "cw-system-message__line", "aria-hidden": "true" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "cw-system-message__text", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "cw-system-message__line", "aria-hidden": "true" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "cw-system-message__line", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "cw-system-message__text", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "cw-system-message__line", "aria-hidden": "true" })
       ]
     }
   );
 };
-var SystemMessage_default = SystemMessage;
+var SystemMessage_default2 = SystemMessage2;
 
-// src/components/SiteChatComponentNew/Messages/AttachmentMessage.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-dd846dee")) {
+// src/components/SiteChatComponentNewErc/Messages/AttachmentMessage.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-daabdc64")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-dd846dee";
+  s.id = "jrapps-style-daabdc64";
   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_runtime18 = require("react/jsx-runtime");
-var AttachmentMessage = ({ message }) => {
+// src/components/SiteChatComponentNewErc/Messages/AttachmentMessage.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var AttachmentMessage2 = ({ 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_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime18.jsxs)("div", { className: "cw-attachment-message__card", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cw-attachment-message__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "cw-attachment-message__card", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "cw-attachment-message__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -1595,16 +1901,16 @@ var AttachmentMessage = ({ message }) => {
               strokeLinecap: "round",
               strokeLinejoin: "round",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsx)("polyline", { points: "14 2 14 8 20 8" })
+                /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("polyline", { points: "14 2 14 8 20 8" })
               ]
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "cw-attachment-message__info", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "cw-attachment-message__name", children: attachment.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "cw-attachment-message__label", children: "Attachment" })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "cw-attachment-message__info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "cw-attachment-message__name", children: attachment.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "cw-attachment-message__label", children: "Attachment" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "button",
             {
               className: "cw-attachment-message__open-btn",
@@ -1615,65 +1921,66 @@ var AttachmentMessage = ({ message }) => {
             }
           )
         ] }),
-        message.timestamp !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        message.timestamp !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "span",
           {
             className: `cw-attachment-message__time${message.senderType === "user" ? " cw-attachment-message__time--right" : ""}`,
-            children: formatTime(message.timestamp)
+            children: formatTime2(message.timestamp)
           }
         )
       ]
     }
   );
 };
-var AttachmentMessage_default = AttachmentMessage;
+var AttachmentMessage_default2 = AttachmentMessage2;
 
-// src/components/SiteChatComponentNew/Messages/MessageRenderer.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var MessageRenderer = ({ message }) => {
+// src/components/SiteChatComponentNewErc/Messages/MessageRenderer.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var MessageRenderer2 = ({ message, ercClasses }) => {
   if (message.messageType === "ATTACHMENT") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AttachmentMessage_default, { message });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AttachmentMessage_default2, { message });
   }
   switch (message.senderType) {
     case "user":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UserMessage_default, { message });
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UserMessage_default2, { message, ercClassName: ercClasses == null ? void 0 : ercClasses.userMessageClassName });
     case "agent":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AgentMessage_default, { message });
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AgentMessage_default2, { message, ercClassName: ercClasses == null ? void 0 : ercClasses.agentMessageClassName });
     case "system":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SystemMessage_default, { message });
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SystemMessage_default2, { message, ercClassName: ercClasses == null ? void 0 : ercClasses.systemMessageClassName });
     default:
       return null;
   }
 };
-var MessageRenderer_default = MessageRenderer;
+var MessageRenderer_default2 = MessageRenderer2;
 
-// src/components/SiteChatComponentNew/Messages/MessageList.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-15ae1a6b")) {
+// src/components/SiteChatComponentNewErc/Messages/MessageList.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-0408335f")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-15ae1a6b";
+  s.id = "jrapps-style-0408335f";
   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_runtime20 = require("react/jsx-runtime");
-var MessageList = ({ messages }) => {
-  const scrollRef = useAutoScroll(messages);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+// src/components/SiteChatComponentNewErc/Messages/MessageList.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var MessageList2 = ({ messages, ercClasses }) => {
+  const scrollRef = useAutoScroll2(messages);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       ref: scrollRef,
-      className: "cw-message-list",
+      className: ["cw-message-list", ercClasses == null ? void 0 : ercClasses.messageListClassName].filter(Boolean).join(" "),
       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_runtime20.jsx)(
-          MessageRenderer_default,
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          MessageRenderer_default2,
           {
-            message: msg
+            message: msg,
+            ercClasses
           },
           (_b = msg._id) != null ? _b : `${(_a = msg.timestamp) != null ? _a : index}-${index}`
         );
@@ -1681,70 +1988,70 @@ var MessageList = ({ messages }) => {
     }
   );
 };
-var MessageList_default = MessageList;
+var MessageList_default2 = MessageList2;
 
-// src/components/SiteChatComponentNew/Messages/TypingIndicator.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-4b0ca05b")) {
+// src/components/SiteChatComponentNewErc/Messages/TypingIndicator.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-0a740655")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-4b0ca05b";
+  s.id = "jrapps-style-0a740655";
   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_runtime21 = require("react/jsx-runtime");
+// src/components/SiteChatComponentNewErc/Messages/TypingIndicator.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
 
-// src/components/SiteChatComponentNew/States/LoadingState.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-7a5a4f05")) {
+// src/components/SiteChatComponentNewErc/States/LoadingState.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-7bd88a9a")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-7a5a4f05";
+  s.id = "jrapps-style-7bd88a9a";
   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_runtime22 = require("react/jsx-runtime");
-var LoadingState = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+// src/components/SiteChatComponentNewErc/States/LoadingState.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var LoadingState2 = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       className: "cw-loading-state",
       role: "status",
       "aria-label": "Connecting to chat",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "cw-loading-state__spinner", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "cw-loading-state__spinner-ring" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "cw-loading-state__title", children: "Connecting\u2026" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "cw-loading-state__subtitle", children: "Please wait while we connect you to an available agent." })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "cw-loading-state__spinner", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "cw-loading-state__spinner-ring" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "cw-loading-state__title", children: "Connecting\u2026" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "cw-loading-state__subtitle", children: "Please wait while we connect you to an available agent." })
       ]
     }
   );
 };
-var LoadingState_default = LoadingState;
+var LoadingState_default2 = LoadingState2;
 
-// src/components/SiteChatComponentNew/States/StartChatState.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-3e05ef30")) {
+// src/components/SiteChatComponentNewErc/States/StartChatState.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-f1f33df7")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-3e05ef30";
+  s.id = "jrapps-style-f1f33df7";
   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_runtime23 = require("react/jsx-runtime");
-var StartChatState = ({
+// src/components/SiteChatComponentNewErc/States/StartChatState.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var StartChatState2 = ({
   image,
   title,
   description,
   onStart
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       className: "cw-start-chat-state",
       role: "main",
       "aria-label": "Start a chat",
       children: [
-        image && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        image && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "img",
           {
             src: image,
@@ -1752,19 +2059,19 @@ var StartChatState = ({
             className: "cw-start-chat-state__image"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: "cw-start-chat-state__title", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "cw-start-chat-state__description", children: description }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button_default, { onClick: onStart, ariaLabel: "Start chat", children: "Start Chat" })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { className: "cw-start-chat-state__title", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "cw-start-chat-state__description", children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button_default2, { onClick: onStart, ariaLabel: "Start chat", children: "Start Chat" })
       ]
     }
   );
 };
-var StartChatState_default = StartChatState;
+var StartChatState_default2 = StartChatState2;
 
-// src/components/SiteChatComponentNew/OfflineForm/OfflineForm.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-d9ff3956")) {
+// src/components/SiteChatComponentNewErc/OfflineForm/OfflineForm.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-a7711cdc")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-d9ff3956";
+  s.id = "jrapps-style-a7711cdc";
   s.textContent = `.cw-offline-form {
   display: flex;
   flex-direction: column;
@@ -1922,9 +2229,9 @@ if (typeof document !== "undefined" && !document.getElementById("jrapps-style-d9
   document.head.appendChild(s);
 }
 
-// src/components/SiteChatComponentNew/OfflineForm/OfflineForm.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var FieldRenderer = ({
+// src/components/SiteChatComponentNewErc/OfflineForm/OfflineForm.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var FieldRenderer2 = ({
   field,
   value,
   error,
@@ -1942,15 +2249,15 @@ var FieldRenderer = ({
     required: field.required
   };
   if (field.type === "textarea") {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "cw-offline-form__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { htmlFor: fieldId, className: "cw-offline-form__label", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "cw-offline-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { htmlFor: fieldId, className: "cw-offline-form__label", children: [
         field.label,
-        field.required && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "cw-offline-form__required", "aria-hidden": "true", children: [
+        field.required && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "cw-offline-form__required", "aria-hidden": "true", children: [
           " ",
           "*"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "textarea",
         {
           ...commonProps,
@@ -1961,19 +2268,19 @@ var FieldRenderer = ({
           className: `cw-offline-form__textarea${hasError ? " cw-offline-form__textarea--error" : ""}`
         }
       ),
-      hasError && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { id: errorId, className: "cw-offline-form__error", role: "alert", children: error })
+      hasError && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { id: errorId, className: "cw-offline-form__error", role: "alert", children: error })
     ] });
   }
   if (field.type === "select") {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "cw-offline-form__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { htmlFor: fieldId, className: "cw-offline-form__label", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "cw-offline-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { htmlFor: fieldId, className: "cw-offline-form__label", children: [
         field.label,
-        field.required && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "cw-offline-form__required", "aria-hidden": "true", children: [
+        field.required && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "cw-offline-form__required", "aria-hidden": "true", children: [
           " ",
           "*"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "select",
         {
           ...commonProps,
@@ -1981,18 +2288,18 @@ var FieldRenderer = ({
           onChange: (e) => onChange(field.id, e.target.value),
           className: `cw-offline-form__select${hasError ? " cw-offline-form__select--error" : ""}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+            /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
           ]
         }
       ),
-      hasError && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { id: errorId, className: "cw-offline-form__error", role: "alert", children: error })
+      hasError && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { id: errorId, className: "cw-offline-form__error", role: "alert", children: error })
     ] });
   }
   if (field.type === "checkbox") {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "cw-offline-form__field cw-offline-form__field--checkbox", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "cw-offline-form__checkbox-label", htmlFor: fieldId, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "cw-offline-form__field cw-offline-form__field--checkbox", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { className: "cw-offline-form__checkbox-label", htmlFor: fieldId, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "input",
           {
             type: "checkbox",
@@ -2005,26 +2312,26 @@ var FieldRenderer = ({
             required: field.required
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "cw-offline-form__checkbox-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "cw-offline-form__checkbox-text", children: [
           field.label,
-          field.required && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "cw-offline-form__required", "aria-hidden": "true", children: [
+          field.required && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "cw-offline-form__required", "aria-hidden": "true", children: [
             " ",
             "*"
           ] })
         ] })
       ] }),
-      hasError && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { id: errorId, className: "cw-offline-form__error", role: "alert", children: error })
+      hasError && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { id: errorId, className: "cw-offline-form__error", role: "alert", children: error })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "cw-offline-form__field", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { htmlFor: fieldId, className: "cw-offline-form__label", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "cw-offline-form__field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { htmlFor: fieldId, className: "cw-offline-form__label", children: [
       field.label,
-      field.required && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "cw-offline-form__required", "aria-hidden": "true", children: [
+      field.required && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "cw-offline-form__required", "aria-hidden": "true", children: [
         " ",
         "*"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "input",
       {
         ...commonProps,
@@ -2034,16 +2341,16 @@ var FieldRenderer = ({
         onChange: (e) => onChange(field.id, e.target.value)
       }
     ),
-    hasError && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { id: errorId, className: "cw-offline-form__error", role: "alert", children: error })
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { id: errorId, className: "cw-offline-form__error", role: "alert", children: error })
   ] });
 };
-var OfflineForm = ({ schema, onSubmit }) => {
-  const { values, errors, setValue, handleSubmit } = useOfflineForm(schema);
+var OfflineForm2 = ({ schema, onSubmit }) => {
+  const { values, errors, setValue, handleSubmit } = useOfflineForm2(schema);
   const onFormSubmit = (e) => {
     e.preventDefault();
     handleSubmit(onSubmit);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "form",
     {
       className: "cw-offline-form",
@@ -2051,11 +2358,11 @@ var OfflineForm = ({ schema, onSubmit }) => {
       "aria-label": schema.title,
       noValidate: true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { className: "cw-offline-form__title", children: schema.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "cw-offline-form__title", children: schema.title }),
         schema.fields.map((field) => {
           var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            FieldRenderer,
+          return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            FieldRenderer2,
             {
               field,
               value: values[field.id],
@@ -2065,33 +2372,33 @@ var OfflineForm = ({ schema, onSubmit }) => {
             field.id
           );
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "cw-offline-form__actions", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button_default, { type: "submit", fullWidth: true, children: schema.submitButtonText }) })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "cw-offline-form__actions", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button_default2, { type: "submit", fullWidth: true, children: schema.submitButtonText }) })
       ]
     }
   );
 };
-var OfflineForm_default = OfflineForm;
+var OfflineForm_default2 = OfflineForm2;
 
-// src/components/SiteChatComponentNew/States/OfflineState.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-8b15ae78")) {
+// src/components/SiteChatComponentNewErc/States/OfflineState.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-03b10f90")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-8b15ae78";
+  s.id = "jrapps-style-03b10f90";
   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_runtime25 = require("react/jsx-runtime");
-var OfflineState = ({ form, onSubmit }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+// src/components/SiteChatComponentNewErc/States/OfflineState.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var OfflineState2 = ({ form, onSubmit }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       className: "cw-offline-state",
       role: "main",
       "aria-label": "Business is offline",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "cw-offline-state__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "cw-offline-state__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "cw-offline-state__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "cw-offline-state__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -2103,38 +2410,38 @@ var OfflineState = ({ form, onSubmit }) => {
               strokeWidth: "2",
               strokeLinecap: "round",
               strokeLinejoin: "round",
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.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" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime25.jsx)("h2", { className: "cw-offline-state__title", children: "We're currently offline" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "cw-offline-state__subtitle", children: "Please leave us a message and we'll get back to you as soon as possible." })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "cw-offline-state__title", children: "We're currently offline" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime25.jsx)("div", { className: "cw-offline-state__form-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OfflineForm_default, { schema: form, onSubmit }) })
+        form && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "cw-offline-state__form-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(OfflineForm_default2, { schema: form, onSubmit }) })
       ]
     }
   );
 };
-var OfflineState_default = OfflineState;
+var OfflineState_default2 = OfflineState2;
 
-// src/components/SiteChatComponentNew/States/ChatEndedState.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-59a49fdf")) {
+// src/components/SiteChatComponentNewErc/States/ChatEndedState.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-dba39629")) {
   const s = document.createElement("style");
-  s.id = "jrapps-style-59a49fdf";
+  s.id = "jrapps-style-dba39629";
   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_runtime26 = require("react/jsx-runtime");
-var ChatEndedState = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+// src/components/SiteChatComponentNewErc/States/ChatEndedState.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var ChatEndedState2 = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       className: "cw-chat-ended-state",
       role: "status",
       "aria-label": "Chat has ended",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "cw-chat-ended-state__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "cw-chat-ended-state__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -2146,28 +2453,28 @@ var ChatEndedState = () => {
             strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("polyline", { points: "20 6 9 17 4 12" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polyline", { points: "20 6 9 17 4 12" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "cw-chat-ended-state__title", children: "Chat Ended" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "cw-chat-ended-state__subtitle", children: "Your chat session has ended. Thank you for reaching out!" })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "cw-chat-ended-state__title", children: "Chat Ended" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "cw-chat-ended-state__subtitle", children: "Your chat session has ended. Thank you for reaching out!" })
       ]
     }
   );
 };
-var ChatEndedState_default = ChatEndedState;
+var ChatEndedState_default2 = ChatEndedState2;
 
-// src/components/SiteChatComponentNew/SiteChatComponentNew.css
-if (typeof document !== "undefined" && !document.getElementById("jrapps-style-871af89c")) {
+// src/components/SiteChatComponentNewErc/SiteChatComponentNewErc.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-6b6fcb3b")) {
   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";
+  s.id = "jrapps-style-6b6fcb3b";
+  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 Editor React Component root \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 * Fills the container provided by the Wix editor. No fixed positioning,\n * no launcher button. Width & height are managed by the editor itself.\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-erc-root {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background-color: var(--cw-background, #ffffff);\n  font-family: var(--cw-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif);\n  font-size: var(--cw-font-size, 14px);\n  overflow: hidden;\n}\n\n/* Widget body fills remaining space between header and footer */\n.cw-erc-root .cw-widget__body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\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_runtime27 = require("react/jsx-runtime");
-var SiteChatComponentNew = import_react12.default.forwardRef(({
+// src/components/SiteChatComponentNewErc/SiteChatComponentNewErc.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var SiteChatComponentNewErc = import_react10.default.forwardRef(({
   title,
   subtitle,
   image,
@@ -2182,24 +2489,26 @@ var SiteChatComponentNew = import_react12.default.forwardRef(({
   onSend,
   onAttachment,
   onOfflineSubmit,
-  onClose
+  onClose,
+  isEditorReactComponent = false,
+  editorReactComponentThemeProps
 }, ref) => {
-  const { open, openWidget, closeWidget } = useSiteChatComponentNew(defaultOpen);
-  const themeVars = buildThemeVars(theme, width, height);
+  const { open, openWidget, closeWidget } = useSiteChatComponentNewErc(defaultOpen);
+  const themeVars = buildThemeVars2(theme, width, height);
   const handleClose = () => {
     closeWidget();
     onClose == null ? void 0 : onClose();
   };
-  const renderBody = () => {
+  const renderBody = (convClasses, footerClasses) => {
     if (loading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LoadingState_default, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LoadingState_default2, {});
     }
     if (offlineForm) {
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(OfflineState_default, { form: offlineForm, onSubmit: onOfflineSubmit });
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(OfflineState_default2, { form: offlineForm, onSubmit: onOfflineSubmit });
     }
     if (messages.length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        StartChatState_default,
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        StartChatState_default2,
         {
           image,
           title,
@@ -2208,13 +2517,40 @@ var SiteChatComponentNew = import_react12.default.forwardRef(({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MessageList_default, { messages }),
-      chatEnded ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChatEndedState_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Footer_default, { onSend, onAttachment })
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MessageList_default2, { messages, ercClasses: convClasses }),
+      chatEnded ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChatEndedState_default2, {}) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Footer_default2, { onSend, onAttachment, ercClasses: footerClasses })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref, className: "cw-root", style: themeVars, children: [
-    open && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  if (isEditorReactComponent) {
+    const ercTheme = editorReactComponentThemeProps;
+    const ercStyle = ercTheme ? void 0 : buildThemeVars2(theme);
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref, className: "cw-erc-root", style: ercStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        Header_default2,
+        {
+          image,
+          title,
+          subtitle,
+          onClose: onClose != null ? onClose : (() => {
+          }),
+          ercClasses: ercTheme == null ? void 0 : ercTheme.header
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        "div",
+        {
+          className: [
+            "cw-widget__body",
+            ercTheme == null ? void 0 : ercTheme.conversation.conversationClassName
+          ].filter(Boolean).join(" "),
+          children: renderBody(ercTheme == null ? void 0 : ercTheme.conversation, ercTheme == null ? void 0 : ercTheme.footer)
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref, className: "cw-root", style: themeVars, children: [
+    open && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "div",
       {
         className: "cw-widget",
@@ -2222,8 +2558,8 @@ var SiteChatComponentNew = import_react12.default.forwardRef(({
         "aria-modal": "true",
         "aria-label": `${title} chat widget`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            Header_default,
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            Header_default2,
             {
               image,
               title,
@@ -2231,11 +2567,11 @@ var SiteChatComponentNew = import_react12.default.forwardRef(({
               onClose: handleClose
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "cw-widget__body", children: renderBody() })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "cw-widget__body", children: renderBody() })
         ]
       }
     ),
-    !open && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    !open && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "button",
       {
         className: "cw-launcher",
@@ -2243,7 +2579,7 @@ var SiteChatComponentNew = import_react12.default.forwardRef(({
         "aria-label": "Open chat",
         "aria-haspopup": "dialog",
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -2252,12 +2588,12 @@ var SiteChatComponentNew = import_react12.default.forwardRef(({
             viewBox: "0 0 24 24",
             fill: "currentColor",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.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" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.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";
+SiteChatComponentNewErc.displayName = "SiteChatComponentNewErc";
 //# sourceMappingURL=index.js.map