@jrapps/my_tickets_chat_ui 0.3.2 → 0.3.4

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

@@ -37,6 +37,7 @@ module.exports = __toCommonJS(SiteChatComponentNewErc_exports);
 
 // src/components/SiteChatComponentNewErc/SiteChatComponentNewErc.tsx
 var import_react5 = __toESM(require("react"));
+var import_classnames7 = __toESM(require("classnames"));
 
 // src/components/SiteChatComponentNewErc/useSiteChatComponentNewErc.ts
 var import_react = require("react");
@@ -121,6 +122,9 @@ function formatTime(timestamp) {
   });
 }
 
+// src/components/SiteChatComponentNewErc/Header/Header.tsx
+var import_classnames = __toESM(require("classnames"));
+
 // src/components/SiteChatComponentNewErc/Header/Header.css
 if (typeof document !== "undefined" && !document.getElementById("jrapps-style-759620f0")) {
   const s = document.createElement("style");
@@ -132,25 +136,25 @@ if (typeof document !== "undefined" && !document.getElementById("jrapps-style-75
 // src/components/SiteChatComponentNewErc/Header/Header.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Header = ({ image, title, subtitle, onClose, ercClasses }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: ["cw-header", ercClasses == null ? void 0 : ercClasses.headerClassName].filter(Boolean).join(" "), role: "banner", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: (0, import_classnames.default)("cw-header", ercClasses == null ? void 0 : ercClasses.headerClassName), 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", ercClasses == null ? void 0 : ercClasses.imageClassName].filter(Boolean).join(" ")
+          className: (0, import_classnames.default)("cw-header__avatar", ercClasses == null ? void 0 : ercClasses.imageClassName)
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cw-header__text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: ["cw-header__title", ercClasses == null ? void 0 : ercClasses.titleClassName].filter(Boolean).join(" "), children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: ["cw-header__subtitle", ercClasses == null ? void 0 : ercClasses.subtitleClassName].filter(Boolean).join(" "), children: subtitle })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_classnames.default)("cw-header__title", ercClasses == null ? void 0 : ercClasses.titleClassName), children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_classnames.default)("cw-header__subtitle", ercClasses == null ? void 0 : ercClasses.subtitleClassName), children: subtitle })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
-        className: ["cw-header__close", ercClasses == null ? void 0 : ercClasses.closeButtonClassName].filter(Boolean).join(" "),
+        className: (0, import_classnames.default)("cw-header__close", ercClasses == null ? void 0 : ercClasses.closeButtonClassName),
         onClick: onClose,
         "aria-label": "Close chat",
         type: "button",
@@ -181,6 +185,7 @@ var Header_default = Header;
 
 // src/components/SiteChatComponentNewErc/Footer/Footer.tsx
 var import_react2 = require("react");
+var import_classnames2 = __toESM(require("classnames"));
 
 // src/components/SiteChatComponentNewErc/Footer/Footer.css
 if (typeof document !== "undefined" && !document.getElementById("jrapps-style-c86a5c82")) {
@@ -250,7 +255,7 @@ var Footer = ({ onSend, onAttachment, disabled, ercClasses }) => {
   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", ercClasses == null ? void 0 : ercClasses.footerClassName].filter(Boolean).join(" "), role: "contentinfo", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("footer", { className: (0, import_classnames2.default)("cw-footer", ercClasses == null ? void 0 : ercClasses.footerClassName), 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)(
@@ -268,7 +273,7 @@ var Footer = ({ onSend, onAttachment, disabled, ercClasses }) => {
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "button",
         {
-          className: ["cw-footer__attach-btn", ercClasses == null ? void 0 : ercClasses.attachmentButtonClassName].filter(Boolean).join(" "),
+          className: (0, import_classnames2.default)("cw-footer__attach-btn", ercClasses == null ? void 0 : ercClasses.attachmentButtonClassName),
           onClick: handleAttachmentClick,
           "aria-label": "Attach file",
           type: "button",
@@ -295,7 +300,7 @@ var Footer = ({ onSend, onAttachment, disabled, ercClasses }) => {
         "textarea",
         {
           ref: textareaRef,
-          className: ["cw-footer__input", ercClasses == null ? void 0 : ercClasses.inputClassName].filter(Boolean).join(" "),
+          className: (0, import_classnames2.default)("cw-footer__input", ercClasses == null ? void 0 : ercClasses.inputClassName),
           value: text,
           onChange: handleChange,
           onKeyDown: handleKeyDown,
@@ -308,11 +313,11 @@ var Footer = ({ onSend, onAttachment, disabled, ercClasses }) => {
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "button",
         {
-          className: [
+          className: (0, import_classnames2.default)(
             "cw-footer__send-btn",
-            isEmpty || disabled ? "cw-footer__send-btn--disabled" : "",
+            (isEmpty || disabled) && "cw-footer__send-btn--disabled",
             ercClasses == null ? void 0 : ercClasses.sendButtonClassName
-          ].filter(Boolean).join(" "),
+          ),
           onClick: handleSend,
           "aria-label": "Send message",
           type: "button",
@@ -348,6 +353,9 @@ var Footer = ({ onSend, onAttachment, disabled, ercClasses }) => {
 };
 var Footer_default = Footer;
 
+// src/components/SiteChatComponentNewErc/Messages/MessageList.tsx
+var import_classnames6 = __toESM(require("classnames"));
+
 // src/components/SiteChatComponentNewErc/hooks/useAutoScroll.ts
 var import_react3 = require("react");
 function useAutoScroll(dependency) {
@@ -445,6 +453,9 @@ function useOfflineForm(schema) {
   return { values, errors, setValue, handleSubmit, reset };
 }
 
+// src/components/SiteChatComponentNewErc/Messages/UserMessage.tsx
+var import_classnames3 = __toESM(require("classnames"));
+
 // src/components/SiteChatComponentNewErc/Messages/UserMessage.css
 if (typeof document !== "undefined" && !document.getElementById("jrapps-style-488069e4")) {
   const s = document.createElement("style");
@@ -456,13 +467,16 @@ if (typeof document !== "undefined" && !document.getElementById("jrapps-style-48
 // src/components/SiteChatComponentNewErc/Messages/UserMessage.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var UserMessage = ({ message, ercClassName }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: ["cw-user-message", ercClassName].filter(Boolean).join(" "), role: "listitem", "aria-label": "Your message", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_classnames3.default)("cw-user-message", ercClassName), 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/SiteChatComponentNewErc/Messages/AgentMessage.tsx
+var import_classnames4 = __toESM(require("classnames"));
+
 // src/components/SiteChatComponentNewErc/Shared/Avatar.css
 if (typeof document !== "undefined" && !document.getElementById("jrapps-style-ad01373e")) {
   const s = document.createElement("style");
@@ -553,7 +567,7 @@ var AgentMessage = ({ message, ercClassName }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
-      className: ["cw-agent-message", ercClassName].filter(Boolean).join(" "),
+      className: (0, import_classnames4.default)("cw-agent-message", ercClassName),
       role: "listitem",
       "aria-label": `Message from ${(_a = message.senderName) != null ? _a : "Agent"}`,
       children: [
@@ -569,6 +583,9 @@ var AgentMessage = ({ message, ercClassName }) => {
 };
 var AgentMessage_default = AgentMessage;
 
+// src/components/SiteChatComponentNewErc/Messages/SystemMessage.tsx
+var import_classnames5 = __toESM(require("classnames"));
+
 // src/components/SiteChatComponentNewErc/Messages/SystemMessage.css
 if (typeof document !== "undefined" && !document.getElementById("jrapps-style-631d733c")) {
   const s = document.createElement("style");
@@ -585,7 +602,7 @@ var SystemMessage = ({ message, ercClassName }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
-      className: ["cw-system-message", ercClassName].filter(Boolean).join(" "),
+      className: (0, import_classnames5.default)("cw-system-message", ercClassName),
       role: "listitem",
       "aria-label": `System notification: ${label}`,
       children: [
@@ -612,9 +629,6 @@ 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",
     {
@@ -646,12 +660,13 @@ var AttachmentMessage = ({ message }) => {
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cw-attachment-message__label", children: "Attachment" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "button",
+            "a",
             {
               className: "cw-attachment-message__open-btn",
-              onClick: handleOpen,
+              href: attachment.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
               "aria-label": `Open attachment ${attachment.name}`,
-              type: "button",
               children: "Open"
             }
           )
@@ -704,7 +719,7 @@ var MessageList = ({ messages, ercClasses }) => {
     "div",
     {
       ref: scrollRef,
-      className: ["cw-message-list", ercClasses == null ? void 0 : ercClasses.messageListClassName].filter(Boolean).join(" "),
+      className: (0, import_classnames6.default)("cw-message-list", ercClasses == null ? void 0 : ercClasses.messageListClassName),
       role: "list",
       "aria-label": "Chat messages",
       "aria-live": "polite",
@@ -1203,31 +1218,35 @@ var ChatEndedState_default = ChatEndedState;
 if (typeof document !== "undefined" && !document.getElementById("jrapps-style-6b6fcb3b")) {
   const s = document.createElement("style");
   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";
+  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 * The global class `site-chat-erc` is the root part name scanned by\n * zeroConfig so the editor can style it.\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.site-chat-erc {\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.site-chat-erc .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/SiteChatComponentNewErc/SiteChatComponentNewErc.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var SiteChatComponentNewErc = import_react5.default.forwardRef(({
-  title,
-  subtitle,
-  image,
-  theme,
-  messages,
-  offlineForm,
-  defaultOpen = false,
-  loading = false,
-  chatEnded = false,
-  width,
-  height,
-  onSend,
-  onAttachment,
-  onOfflineSubmit,
-  onClose,
-  isEditorReactComponent = false,
-  editorReactComponentThemeProps
-}, ref) => {
+var SiteChatComponentNewErc = import_react5.default.forwardRef((props, ref) => {
+  const {
+    title,
+    subtitle,
+    image,
+    theme,
+    messages,
+    offlineForm,
+    defaultOpen = false,
+    loading = false,
+    chatEnded = false,
+    width,
+    height,
+    onSend,
+    onAttachment,
+    onOfflineSubmit,
+    onClose,
+    isEditorReactComponent = false,
+    className,
+    id,
+    direction = "ltr",
+    editorReactComponentThemeProps
+  } = props;
   const { open, openWidget, closeWidget } = useSiteChatComponentNewErc(defaultOpen);
   const themeVars = buildThemeVars(theme, width, height);
   const handleClose = () => {
@@ -1259,30 +1278,40 @@ var SiteChatComponentNewErc = import_react5.default.forwardRef(({
   };
   if (isEditorReactComponent) {
     const ercTheme = editorReactComponentThemeProps;
-    const ercStyle = ercTheme ? void 0 : buildThemeVars(theme);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref, className: "cw-erc-root", style: ercStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        Header_default,
-        {
-          image,
-          title,
-          subtitle,
-          onClose: onClose != null ? onClose : (() => {
-          }),
-          ercClasses: ercTheme == null ? void 0 : ercTheme.header
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.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)
-        }
-      )
-    ] });
+    const ercStyle = buildThemeVars(theme);
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        ref,
+        id,
+        dir: direction,
+        className: (0, import_classnames7.default)("site-chat-erc", className),
+        style: ercStyle,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Header_default,
+            {
+              image,
+              title,
+              subtitle,
+              onClose: onClose != null ? onClose : (() => {
+              }),
+              ercClasses: ercTheme == null ? void 0 : ercTheme.header
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "div",
+            {
+              className: (0, import_classnames7.default)(
+                "cw-widget__body",
+                ercTheme == null ? void 0 : ercTheme.conversation.conversationClassName
+              ),
+              children: renderBody(ercTheme == null ? void 0 : ercTheme.conversation, ercTheme == null ? void 0 : ercTheme.footer)
+            }
+          )
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref, className: "cw-root", style: themeVars, children: [
     open && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(