@meetelise/chat 1.55.3 → 1.56.0

package/src/WebComponent/pubnub-navigation.ts

@@ -0,0 +1,73 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { SimpleNavigationChatMessage } from "../MyPubnub";
+import { isMobile } from "../utils";
+import { takeMeThere } from "../webchatNavigation";
+import { InputStyles } from "./actions/InputStyles";
+import { pubnubChatStyles } from "./pubnub-chat-styles";
+
+/** The "Take me to {label}" button the agent sends after a reply. */
+@customElement("pubnub-navigation")
+export class PubnubNavigation extends LitElement {
+  static styles = [
+    InputStyles,
+    pubnubChatStyles,
+    css`
+      .navigation-button {
+        cursor: pointer;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 12px;
+        background: black;
+        color: white;
+        font-family: inherit;
+        text-align: left;
+        line-height: 1.4;
+      }
+      .navigation-button:hover {
+        opacity: 0.85;
+      }
+      .navigation-button:focus-visible {
+        outline: 2px solid #4d90fe;
+        outline-offset: 2px;
+      }
+    `,
+  ];
+
+  @property({ attribute: false })
+  message: SimpleNavigationChatMessage | undefined;
+
+  @property({ attribute: false })
+  onMount: () => void = () => ({});
+
+  /** Overridable in tests; navigates the same tab by default. */
+  @property({ attribute: false })
+  navigate: (url: string) => void = (url) => window.location.assign(url);
+
+  updated(): void {
+    this.onMount();
+  }
+
+  render(): TemplateResult {
+    if (!this.message) return html``;
+    const { navigation } = this.message;
+    return html`<button
+      type="button"
+      class=${classMap({
+        ["navigation-button"]: true,
+        ["webchat-font__desktop"]: !isMobile(),
+        ["webchat-font__mobile"]: isMobile(),
+      })}
+      @click=${() => takeMeThere(navigation, this.navigate)}
+    >
+      Take me to ${navigation.label}
+    </button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "pubnub-navigation": PubnubNavigation;
+  }
+}

package/src/main/MEChat.ts

@@ -66,7 +66,11 @@ export interface StudioWebchatContext {
 
 export interface StudioWebchatClearContext {
   source?: "elise_studio";
-  reason?: "no_property_for_route" | "webchat_disabled" | "ambiguous_route" | string;
+  reason?:
+    | "no_property_for_route"
+    | "webchat_disabled"
+    | "ambiguous_route"
+    | string;
   preserveCache?: boolean;
 }
 
@@ -209,6 +213,10 @@ export default class MEChat {
         // Centralized webchat is org-anchored: config comes from the org, not a
         // per-building slug or site resolution.
         meChatElement.setAttribute("centralConvo", "true");
+        if (opts.building) {
+          // Page context only: sent with visitor messages as declaredBuildingId.
+          meChatElement.setAttribute("declaredBuildingSlug", opts.building);
+        }
       } else {
         this.handleBuildingslug(
           meChatElement as MEChatLitElement,