@syntrologie/adapt-chatbot 2.39.0 → 2.41.0

package/dist/runtime.js

@@ -17,7 +17,7 @@ import {
   getElementInstanceStore,
   setElementInstanceStore
 } from "./chunk-EWPPVPJ4.js";
-import "./chunk-P74YY3MD.js";
+import "./chunk-3Z52KSYZ.js";
 import "./chunk-VZIUXXAM.js";
 import "./chunk-OIGVZGSX.js";
 import {
@@ -2297,70 +2297,177 @@ var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var box = {
   display: "flex",
   flexDirection: "column",
-  gap: "var(--sc-content-item-gap, 10px)",
+  gap: "10px",
   fontFamily: "var(--sc-font-family, system-ui)",
-  fontSize: "var(--sc-content-body-font-size, 13px)"
+  fontSize: "13px",
+  // Defect: card content sat flush against its container's edges (no
+  // padding anywhere). Fixed, compact — matches the rest of this file's
+  // "form scale" sizing, not the content section's chat-bubble padding.
+  padding: "16px",
+  boxSizing: "border-box"
 };
-var fieldStyles = {
-  padding: "var(--sc-content-item-padding, 10px 12px)",
+var fieldWrapStyles = {
+  position: "relative",
   borderRadius: "var(--sc-content-border-radius, 8px)",
   border: "var(--sc-content-bubble-border, 1px solid currentColor)",
   background: "var(--sc-content-bubble-background, transparent)",
+  boxSizing: "border-box",
+  // Clips the (square-cornered, 100%-filled) inner field to this shell's
+  // rounded corners — without it, flat textarea/input corners can poke
+  // past the shell's curve at the very edges.
+  overflow: "hidden"
+};
+var messageWrapStyles = {
+  ...fieldWrapStyles,
+  height: "84px"
+};
+var singleLineWrapStyles = {
+  ...fieldWrapStyles,
+  height: "44px"
+};
+var fieldInnerBase = {
+  border: "none",
+  outline: "none",
+  background: "transparent",
   color: "inherit",
   font: "inherit",
-  // The browser's default focus ring is a loud blue on a black-and-white
-  // brand — the one saturated pixel on the card. Suppress it and paint our
-  // own from the theme in the focus/blur handlers below.
-  outline: "none",
   width: "100%",
+  height: "100%",
   boxSizing: "border-box",
-  // The drag grabber pokes out of the card's bottom-right corner and lets
-  // the visitor break the tile frame — the card owns its own geometry.
   resize: "none"
 };
+var messageInnerStyles = {
+  ...fieldInnerBase,
+  padding: "8px 42px 8px 10px",
+  overflowY: "auto"
+};
+var singleLineInnerStyles = {
+  ...fieldInnerBase,
+  padding: "0 42px 0 10px"
+};
+var srOnlyStyles = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: "0",
+  margin: "-1px",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  border: "0"
+};
+var sendIcon = html`<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 14V2M8 2L3 7M8 2L13 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+var embeddedIconButtonStyles = {
+  position: "absolute",
+  right: "5px",
+  bottom: "5px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "30px",
+  height: "30px",
+  padding: "0",
+  borderRadius: "50%",
+  border: "none",
+  background: "var(--sc-color-primary, #000000)",
+  color: "var(--sc-launcher-color, #ffffff)",
+  cursor: "pointer"
+};
+var embeddedIconButtonCenteredStyles = {
+  ...embeddedIconButtonStyles,
+  bottom: "auto",
+  top: "50%",
+  transform: "translateY(-50%)"
+};
+var embeddedIconButtonDisabledStyles = {
+  ...embeddedIconButtonStyles,
+  background: "rgba(120, 120, 120, 0.25)",
+  color: "rgba(90, 90, 90, 0.9)",
+  cursor: "default"
+};
+var embeddedIconButtonCenteredDisabledStyles = {
+  ...embeddedIconButtonCenteredStyles,
+  background: "rgba(120, 120, 120, 0.25)",
+  color: "rgba(90, 90, 90, 0.9)",
+  cursor: "default"
+};
 var buttonStyles = {
   padding: "11px 14px",
   borderRadius: "var(--sc-border-radius, 8px)",
   border: "none",
   background: "var(--sc-color-primary, #000000)",
-  color: "var(--sc-accent-foreground, #ffffff)",
+  color: "var(--sc-launcher-color, #ffffff)",
   fontWeight: "600",
   cursor: "pointer",
   font: "inherit",
   width: "100%",
   boxSizing: "border-box"
 };
-var textStyles = {
-  margin: "0"
+var fieldRowStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+};
+var skipButtonStyles = {
+  flexShrink: "0",
+  padding: "0",
+  border: "none",
+  background: "transparent",
+  color: "inherit",
+  textDecoration: "underline",
+  cursor: "pointer",
+  font: "inherit",
+  fontSize: "12px",
+  opacity: "0.8",
+  whiteSpace: "nowrap"
 };
 var mutedTextStyles = {
   margin: "0",
   // No opacity token exists in any publishable section — plain constant.
   opacity: "0.8"
 };
+var trailHostStyles = {
+  display: "flex",
+  flexDirection: "column",
+  height: "160px",
+  overflow: "hidden",
+  width: "100%",
+  boxSizing: "border-box"
+};
 var PERSIST_NAMESPACE = "supportchat";
 var PERSIST_KEY = "leave-a-message";
+var lamUidCounter = 0;
 var LeaveAMessageLit = class extends LitElement {
   constructor() {
     super(...arguments);
     this.message = "";
     this.contextSummary = "";
     this.state = "form";
+    /** Unique per-instance id prefix so `<label for>` never collides across
+     *  more than one card mounted on the same page. */
+    this._uid = `lam-${++lamUidCounter}`;
     this._email = "";
     this._reply = "";
-    this._operatorMessages = [];
-    /** Paint our own focus ring from the theme — see fieldStyles.outline. */
+    /** Visitor↔operator conversation, in order — rendered as a chat
+     *  transcript once the visitor taps into the mail state (see render()'s
+     *  'flipped' branch). Seeded with the visitor's own compose-step message
+     *  in `_submitMessage`. */
+    this._transcript = [];
+    /** Paint our own focus ring from the theme. The border now lives on the
+     *  field SHELL (`data-lam-field-wrap`), not the borderless inner
+     *  textarea/input, so the ring targets that ancestor via `closest()`. */
     this._focusOn = (e) => {
-      const el = e.target;
-      el.style.outline = "2px solid var(--sc-color-primary, currentColor)";
-      el.style.outlineOffset = "1px";
+      const field = e.target;
+      const target = field.closest("[data-lam-field-wrap]") ?? field;
+      target.style.outline = "2px solid var(--sc-color-primary, currentColor)";
+      target.style.outlineOffset = "1px";
     };
     this._focusOff = (e) => {
-      const el = e.target;
-      el.style.outline = "none";
+      const field = e.target;
+      const target = field.closest("[data-lam-field-wrap]") ?? field;
+      target.style.outline = "none";
     };
     this._onReply = (text) => {
-      this._operatorMessages = [...this._operatorMessages, text];
+      this._transcript = [...this._transcript, { role: "operator", text }];
       if (this.state !== "flipped") {
         this.state = "mail";
         this.runtime?.events.publish("supportchat:reply_received", { text });
@@ -2376,12 +2483,37 @@ var LeaveAMessageLit = class extends LitElement {
       this._persist();
       this.requestUpdate();
     };
-    this._submit = () => {
-      if (!this.bridge || !EMAIL_RE.test(this._email)) return;
-      this.bridge.setVisitorEmail(this._email);
+    /** Compose step → email step. Delivers the message immediately; email
+     *  capture is a SEPARATE, later, optional step (owner redesign). Seeds
+     *  the chat transcript with the visitor's OWN plain message text (not
+     *  the context-prefixed string sent to the bridge — that prefix is
+     *  internal plumbing for the human agent, not something the visitor
+     *  should see echoed back at themselves). */
+    this._submitMessage = () => {
+      if (!this.bridge || !this.message.trim()) return;
       const context = this.contextSummary ? `[Site assistant context: ${this.contextSummary}]
 ` : "";
       this.bridge.sendMessage(`${context}${this.message}`);
+      this._transcript = [...this._transcript, { role: "visitor", text: this.message.trim() }];
+      this.state = "email";
+      this._persist();
+    };
+    /** Email step → sent. Blank email is a valid submission (the field is
+     *  optional) and simply skips `setVisitorEmail`; an invalid non-blank
+     *  email blocks advancing so a mistyped address doesn't silently vanish. */
+    this._submitEmail = () => {
+      if (!this.bridge) return;
+      const trimmed = this._email.trim();
+      if (trimmed && !EMAIL_RE.test(trimmed)) return;
+      if (trimmed) this.bridge.setVisitorEmail(trimmed);
+      this.state = "sent";
+      this._persist();
+    };
+    /** Explicit decline — advances regardless of whatever is typed, without
+     *  ever calling `setVisitorEmail`. Distinct from submitting a blank
+     *  field only in that it discards partial input the visitor may not
+     *  have meant to send. */
+    this._skipEmail = () => {
       this.state = "sent";
       this._persist();
     };
@@ -2391,8 +2523,11 @@ var LeaveAMessageLit = class extends LitElement {
     };
     this._sendReply = () => {
       if (!this.bridge || !this._reply.trim()) return;
-      this.bridge.sendMessage(this._reply.trim());
+      const text = this._reply.trim();
+      this.bridge.sendMessage(text);
+      this._transcript = [...this._transcript, { role: "visitor", text }];
       this._reply = "";
+      this._persist();
       this.requestUpdate();
     };
   }
@@ -2417,25 +2552,25 @@ var LeaveAMessageLit = class extends LitElement {
   _persistStore() {
     return this.runtime?.state?.user?.ns?.(PERSIST_NAMESPACE);
   }
-  /** Hydrate {state, operatorMessages, email} from a prior page's mount. */
+  /** Hydrate {state, transcript, email} from a prior page's mount. */
   _loadPersisted() {
     const store = this._persistStore();
     if (!store) return;
     const saved = store.get(PERSIST_KEY);
     if (!saved) return;
     if (saved.state) this.state = saved.state;
-    if (Array.isArray(saved.operatorMessages)) this._operatorMessages = saved.operatorMessages;
+    if (Array.isArray(saved.transcript)) this._transcript = saved.transcript;
     if (typeof saved.email === "string") this._email = saved.email;
   }
-  /** Snapshot {state, operatorMessages, email} so the NEXT mount (a fresh
-   *  page in the same session) can pick the thread back up. */
+  /** Snapshot {state, transcript, email} so the NEXT mount (a fresh page
+   *  in the same session) can pick the thread back up. */
   _persist() {
     const store = this._persistStore();
     if (!store) return;
     const state = this.state;
-    const operatorMessages = this._operatorMessages;
+    const transcript = this._transcript;
     const email = this._email;
-    const snapshot = { state, operatorMessages, email };
+    const snapshot = { state, transcript, email };
     store.set(PERSIST_KEY, snapshot);
   }
   /**
@@ -2467,71 +2602,164 @@ var LeaveAMessageLit = class extends LitElement {
       console.warn("supportChat.widget: reply toast failed", err);
     }
   }
+  /** Maps this card's OWN `_transcript` (never the concierge's) to the
+   *  shape `<adaptive-chat-trail>` renders. `visitor` → `'user'` (right-
+   *  aligned, branded) and `operator` → `'assistant'` (left-aligned,
+   *  neutral) purely for the trail's existing visual treatment — no
+   *  claim that a human Crisp operator IS the AI assistant. Freshly
+   *  computed on every render from local state; nothing here reads from
+   *  or writes to `chatSession`. */
+  _trailMessages() {
+    return this._transcript.map((entry, i) => ({
+      id: `lam-${this._uid}-${i}`,
+      role: entry.role === "visitor" ? "user" : "assistant",
+      text: entry.text,
+      status: "complete"
+    }));
+  }
   render() {
     if (!this.bridge || !this.bridge.detect()) return nothing;
+    const copy = this.copy;
     if (this.state === "form") {
+      const messageId = `${this._uid}-message`;
+      const canSend = this.message.trim().length > 0;
       return html`<div data-lam style=${styleMap(box)}>
-        <input
-          data-lam-email
-          type="email"
-          placeholder="Your email — so the team can reach you"
-          style=${styleMap(fieldStyles)}
-          @focus=${this._focusOn}
-          @blur=${this._focusOff}
-          @input=${(e) => {
+        ${copy?.framing ? html`<p data-lam-framing style=${styleMap(mutedTextStyles)}>${copy.framing}</p>` : nothing}
+        ${copy?.messageLabel ? html`<label data-lam-message-label for=${messageId} style=${styleMap(srOnlyStyles)}
+                >${copy.messageLabel}</label
+              >` : nothing}
+        <div data-lam-message-wrap data-lam-field-wrap style=${styleMap(messageWrapStyles)}>
+          <textarea
+            data-lam-message
+            id=${messageId}
+            style=${styleMap(messageInnerStyles)}
+            @focus=${this._focusOn}
+            @blur=${this._focusOff}
+            .value=${this.message}
+            @input=${(e) => {
+        this.message = e.target.value;
+      }}
+          ></textarea>
+          ${copy?.sendLabel ? html`<button
+                  type="button"
+                  data-lam-send
+                  aria-label=${copy.sendLabel}
+                  ?disabled=${!canSend}
+                  style=${styleMap(
+        canSend ? embeddedIconButtonStyles : embeddedIconButtonDisabledStyles
+      )}
+                  @click=${this._submitMessage}
+                >
+                  ${sendIcon}
+                </button>` : nothing}
+        </div>
+      </div>`;
+    }
+    if (this.state === "email") {
+      const emailId = `${this._uid}-email`;
+      return html`<div data-lam style=${styleMap(box)}>
+        ${copy?.emailPrompt ? html`<p data-lam-email-prompt style=${styleMap(mutedTextStyles)}>${copy.emailPrompt}</p>` : nothing}
+        ${copy?.emailLabel ? html`<label data-lam-email-label for=${emailId} style=${styleMap(srOnlyStyles)}
+                >${copy.emailLabel}</label
+              >` : nothing}
+        <div data-lam-email-row style=${styleMap(fieldRowStyles)}>
+          <div
+            data-lam-email-wrap
+            data-lam-field-wrap
+            style=${styleMap({ ...singleLineWrapStyles, flex: "1" })}
+          >
+            <input
+              data-lam-email
+              id=${emailId}
+              type="email"
+              placeholder=${copy?.emailPlaceholder ?? nothing}
+              style=${styleMap(singleLineInnerStyles)}
+              @focus=${this._focusOn}
+              @blur=${this._focusOff}
+              @input=${(e) => {
         this._email = e.target.value;
         this.requestUpdate();
       }}
-        />
-        <textarea
-          data-lam-message
-          rows="4"
-          style=${styleMap(fieldStyles)}
-          @focus=${this._focusOn}
-          @blur=${this._focusOff}
-          .value=${this.message}
-          @input=${(e) => {
-        this.message = e.target.value;
-      }}
-        ></textarea>
-        <button type="button" data-lam-send style=${styleMap(buttonStyles)} @click=${this._submit}>
-          Send to the team
-        </button>
+            />
+            ${copy?.emailSubmitLabel ? html`<button
+                    type="button"
+                    data-lam-email-submit
+                    aria-label=${copy.emailSubmitLabel}
+                    style=${styleMap(embeddedIconButtonCenteredStyles)}
+                    @click=${this._submitEmail}
+                  >
+                    ${sendIcon}
+                  </button>` : nothing}
+          </div>
+          ${copy?.emailSkipLabel ? html`<button
+                  type="button"
+                  data-lam-email-skip
+                  style=${styleMap(skipButtonStyles)}
+                  @click=${this._skipEmail}
+                >
+                  ${copy.emailSkipLabel}
+                </button>` : nothing}
+        </div>
       </div>`;
     }
     if (this.state === "sent") {
       return html`<div data-lam style=${styleMap(box)}>
-        <p style=${styleMap(mutedTextStyles)}>
-          Sent. The team will reply here — or by email if you step away.
-        </p>
+        ${copy?.sentBody ? html`<p style=${styleMap(mutedTextStyles)}>${copy.sentBody}</p>` : nothing}
       </div>`;
     }
     if (this.state === "mail") {
       return html`<div data-lam style=${styleMap(box)}>
-        <button type="button" data-lam-mail style=${styleMap(buttonStyles)} @click=${this._flip}>
-          📬 You got mail! — tap to read
-        </button>
+        ${copy?.mailLabel ? html`<button
+                type="button"
+                data-lam-mail
+                style=${styleMap(buttonStyles)}
+                @click=${this._flip}
+              >
+                ${copy.mailLabel}
+              </button>` : nothing}
       </div>`;
     }
+    const replyId = `${this._uid}-reply`;
+    const canReply = this._reply.trim().length > 0;
     return html`<div data-lam style=${styleMap(box)}>
-      ${this._operatorMessages.map(
-      (m) => html`<p data-lam-operator style=${styleMap(textStyles)}>${m}</p>`
-    )}
-      <input
-        data-lam-reply
-        type="text"
-        placeholder="Reply to the team…"
-        style=${styleMap(fieldStyles)}
-        @focus=${this._focusOn}
-        @blur=${this._focusOff}
-        .value=${this._reply}
-        @input=${(e) => {
+      <adaptive-chat-trail
+        data-lam-trail
+        .messages=${this._trailMessages()}
+        .forceExpanded=${true}
+        .hideTopBorder=${true}
+        style=${styleMap(trailHostStyles)}
+      ></adaptive-chat-trail>
+      ${copy?.replyLabel ? html`<label data-lam-reply-label for=${replyId} style=${styleMap(srOnlyStyles)}
+              >${copy.replyLabel}</label
+            >` : nothing}
+      <div data-lam-reply-wrap data-lam-field-wrap style=${styleMap(singleLineWrapStyles)}>
+        <input
+          data-lam-reply
+          id=${replyId}
+          type="text"
+          placeholder=${copy?.replyPlaceholder ?? nothing}
+          style=${styleMap(singleLineInnerStyles)}
+          @focus=${this._focusOn}
+          @blur=${this._focusOff}
+          .value=${this._reply}
+          @input=${(e) => {
       this._reply = e.target.value;
+      this.requestUpdate();
     }}
-      />
-      <button type="button" data-lam-reply-send style=${styleMap(buttonStyles)} @click=${this._sendReply}>
-        Send
-      </button>
+        />
+        ${copy?.replySendLabel ? html`<button
+                type="button"
+                data-lam-reply-send
+                aria-label=${copy.replySendLabel}
+                ?disabled=${!canReply}
+                style=${styleMap(
+      canReply ? embeddedIconButtonCenteredStyles : embeddedIconButtonCenteredDisabledStyles
+    )}
+                @click=${this._sendReply}
+              >
+                ${sendIcon}
+              </button>` : nothing}
+      </div>
     </div>`;
   }
 };
@@ -2541,7 +2769,8 @@ LeaveAMessageLit.properties = {
   contextSummary: { attribute: false },
   state: { type: String },
   runtime: { attribute: false },
-  replyToast: { attribute: false }
+  replyToast: { attribute: false },
+  copy: { attribute: false }
 };
 function registerLeaveAMessageLit() {
   if (typeof customElements !== "undefined" && !customElements.get("syntro-leave-a-message")) {
@@ -2693,6 +2922,11 @@ var LeaveAMessageMountable = {
       // Visitor-facing toast copy from the workspace config — see
       // LeaveAMessageLit#replyToast (presentation is configuration).
       replyToast: stripped.replyToast,
+      // Every OTHER visitor-facing string on the card — see
+      // LeaveAMessageLit#copy / LeaveAMessageCopy. Same "config carries the
+      // words" pattern as replyToast, just covering the whole card instead
+      // of one notification.
+      copy: stripped.copy,
       runtime: runtime2
     });
     container.appendChild(el);