@jrapps/my_tickets_chat_ui 0.2.1 → 0.2.3

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

@@ -69,7 +69,7 @@ var defaultTheme = {
   buttonRadius: 8,
   borderRadius: 12
 };
-function buildThemeVars(partial) {
+function buildThemeVars(partial, width, height) {
   const theme = { ...defaultTheme, ...partial };
   return {
     // Colours
@@ -91,8 +91,8 @@ function buildThemeVars(partial) {
     "--cw-font-family": FONT_FAMILY,
     "--cw-font-size": FONT_SIZE,
     "--cw-shadow": SHADOW,
-    "--cw-width": WIDTH,
-    "--cw-height": HEIGHT,
+    "--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
   };
 }
@@ -186,7 +186,7 @@ var import_react2 = require("react");
 if (typeof document !== "undefined" && !document.getElementById("jrapps-style-ebcf221d")) {
   const s = document.createElement("style");
   s.id = "jrapps-style-ebcf221d";
-  s.textContent = ".cw-footer {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n  padding: 10px 12px;\n  background-color: var(--cw-background);\n  border-top: 1px solid var(--cw-border);\n  flex-shrink: 0;\n}\n\n.cw-footer__input {\n  flex: 1;\n  resize: none;\n  border: 1px solid var(--cw-input-border);\n  border-radius: var(--cw-button-radius);\n  background-color: var(--cw-input-background);\n  font-family: var(--cw-font-family);\n  font-size: var(--cw-font-size);\n  color: inherit;\n  padding: 8px 12px;\n  line-height: 1.5;\n  min-height: 38px;\n  max-height: 120px;\n  overflow-y: auto;\n  transition: border-color 0.15s ease;\n}\n\n.cw-footer__input:focus {\n  outline: none;\n  border-color: var(--cw-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cw-primary) 20%, transparent);\n}\n\n.cw-footer__input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.cw-footer__attach-btn,\n.cw-footer__send-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  color: var(--cw-primary);\n  margin-bottom: 1px;\n}\n\n.cw-footer__attach-btn:hover,\n.cw-footer__send-btn:not(.cw-footer__send-btn--disabled):hover {\n  background-color: color-mix(in srgb, var(--cw-primary) 10%, transparent);\n}\n\n.cw-footer__attach-btn:focus-visible,\n.cw-footer__send-btn:focus-visible {\n  outline: 2px solid var(--cw-primary);\n  outline-offset: 2px;\n}\n\n.cw-footer__attach-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.cw-footer__send-btn--disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.cw-footer__file-input {\n  display: none;\n}\n";
+  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);
 }
 
@@ -194,34 +194,33 @@ if (typeof document !== "undefined" && !document.getElementById("jrapps-style-eb
 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;
-  const handleKeyDown = (0, import_react2.useCallback)(
-    (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        if (!isEmpty && !disabled) {
-          onSend(text.trim());
-          setText("");
-          if (textareaRef.current) {
-            textareaRef.current.style.height = "auto";
-          }
-        }
-      }
-    },
-    [isEmpty, disabled, onSend, text]
-  );
+  const isEmpty = text.trim().length === 0 && stagedFiles.length === 0;
   const handleSend = (0, import_react2.useCallback)(() => {
     if (!isEmpty && !disabled) {
-      onSend(text.trim());
-      setText("");
+      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]);
+  }, [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);
@@ -238,90 +237,109 @@ var Footer = ({ onSend, onAttachment, disabled }) => {
   const handleFileChange = (0, import_react2.useCallback)(
     (e) => {
       var _a;
-      const file = (_a = e.target.files) == null ? void 0 : _a[0];
-      if (file) {
-        onAttachment(file);
+      const files = Array.from((_a = e.target.files) != null ? _a : []);
+      if (files.length > 0) {
+        setStagedFiles((prev) => [...prev, ...files]);
       }
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
     },
-    [onAttachment]
+    []
   );
+  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: [
-    /* @__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
-      }
-    )
+    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;
@@ -1204,7 +1222,7 @@ var SiteChatComponentNew = import_react5.default.forwardRef(({
   onClose
 }, ref) => {
   const { open, openWidget, closeWidget } = useSiteChatComponentNew(defaultOpen);
-  const themeVars = buildThemeVars(theme);
+  const themeVars = buildThemeVars(theme, width, height);
   const handleClose = () => {
     closeWidget();
     onClose == null ? void 0 : onClose();
@@ -1240,7 +1258,6 @@ var SiteChatComponentNew = import_react5.default.forwardRef(({
         role: "dialog",
         "aria-modal": "true",
         "aria-label": `${title} chat widget`,
-        style: { ...width !== void 0 && { width }, ...height !== void 0 && { height } },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Header_default,