@meetelise/chat 1.51.4 → 1.51.6

package/src/WebComponent/Scheduler/tour-scheduler.ts

@@ -124,6 +124,8 @@ export class TourScheduler extends LitElement {
   orgSlug = "";
   @property({ attribute: true })
   hasDynamicSchedulingEnabled = false;
+  @property({ attribute: true })
+  bedroomPreferenceRequired = false;
 
   @property({ attribute: true })
   private leadSourceClient: LeadSourceClient | null = null;
@@ -660,13 +662,16 @@ export class TourScheduler extends LitElement {
         !!this.phoneNumberE164
       );
     },
+    layout: (): boolean =>
+      !this.bedroomPreferenceRequired || !!this.selectedLayoutValue,
   };
 
   formIsValidForSubmission = (): boolean => {
     const isValid =
       this.validators.tourType() &&
       this.validators.dateAndTime() &&
-      this.validators.leadInfo();
+      this.validators.leadInfo() &&
+      this.validators.layout();
     return isValid;
   };
 
@@ -1303,7 +1308,9 @@ export class TourScheduler extends LitElement {
         ${this.layoutOptions.length > 0
           ? html` <me-select
               id="layout"
-              placeholder="Bedroom preference (optional)"
+              placeholder=${this.bedroomPreferenceRequired
+                ? "Bedroom preference"
+                : "Bedroom preference (optional)"}
               .options="${this.layoutOptions.map((o) => ({
                 label: o.label,
                 value: layoutValueToCanonical(o.value),

package/src/WebComponent/launcher/Launcher.ts

@@ -151,6 +151,8 @@ export class Launcher extends LitElement {
   @property({ attribute: false })
   layoutOptions: LayoutOption[] = [];
   @property({ attribute: true })
+  bedroomPreferenceRequired = false;
+  @property({ attribute: true })
   hasDynamicSchedulingEnabled = false;
 
   @property({ attribute: true })
@@ -1310,6 +1312,7 @@ export class Launcher extends LitElement {
                 .leadSources="${this.leadSources}"
                 .tourTypeOptions=${this.tourTypeOptions}
                 .layoutOptions=${this.layoutOptions}
+                .bedroomPreferenceRequired=${this.bedroomPreferenceRequired}
                 .orgLegalName=${this.orgLegalName}
                 .country=${this.country}
                 buildingId=${this.buildingId}

package/src/WebComponent/me-chat.ts

@@ -14,6 +14,7 @@ import {
   FeatureFlagsShowDropdown,
   fetchFeatureFlagUseApplicationsLinkReplacement,
   fetchFeatureFlagUseOverrideContactUsForm,
+  fetchTrackedRolloutBedroomPreferenceRequired,
 } from "../fetchFeatureFlag";
 import { HIDE_DATA_LAYER_PII_ORG_IDS, setGtmPiiRedaction } from "../gtm";
 import fetchPhoneNumberFromSource, {
@@ -173,6 +174,8 @@ export class MEChat extends LitElement {
   private featureFlagShowDropdown: FeatureFlagsShowDropdown =
     FeatureFlagsShowDropdown.always;
   @state()
+  private bedroomPreferenceRequired = false;
+  @state()
   private phoneNumberForSource: NumberForSelectedSource | null = null;
   @state()
   private hasMounted = false;
@@ -360,12 +363,17 @@ export class MEChat extends LitElement {
       HIDE_DATA_LAYER_PII_ORG_IDS.includes(buildingDetails.orgId)
     );
 
-    const [leadSources, featureFlagUseApplicationsLinkReplacement, isAip] =
-      await Promise.all([
-        fetchLeadSources(this.orgSlug, this.buildingSlug),
-        fetchFeatureFlagUseApplicationsLinkReplacement(this.buildingSlug),
-        fetchBuildingAip(this.buildingSlug),
-      ]);
+    const [
+      leadSources,
+      featureFlagUseApplicationsLinkReplacement,
+      isAip,
+      bedroomPreferenceRequired,
+    ] = await Promise.all([
+      fetchLeadSources(this.orgSlug, this.buildingSlug),
+      fetchFeatureFlagUseApplicationsLinkReplacement(this.buildingSlug),
+      fetchBuildingAip(this.buildingSlug),
+      fetchTrackedRolloutBedroomPreferenceRequired(this.buildingSlug),
+    ]);
 
     if (this.buildingWebchatView) {
       this.buildingWebchatView.phoneNumber = formatPhoneNumber(
@@ -376,6 +384,7 @@ export class MEChat extends LitElement {
     this.leadSources = leadSources;
     this.featureFlagShowDropdown =
       featureFlagShowDropdown as FeatureFlagsShowDropdown;
+    this.bedroomPreferenceRequired = bedroomPreferenceRequired;
 
     // The backend is cached for ~4 hours, so falling back to the existing api request until the cache propagates all the changes
     const buildingPhoneNumber = buildingDetails.textWithUsPhoneNumber
@@ -1022,6 +1031,7 @@ export class MEChat extends LitElement {
                     ?.tourTypeOptions ?? []}
                   .layoutOptions=${this.buildingWebchatView?.layoutOptions ??
                   []}
+                  .bedroomPreferenceRequired=${this.bedroomPreferenceRequired}
                   .launcherStyles=${this.launcherStyles}
                   .primaryColor=${this.primaryColor}
                   .backgroundColor=${this.backgroundColor}

package/src/WebComponent/pubnub-chat.ts

@@ -39,6 +39,8 @@ import { BuildingWebchatView } from "../fetchBuildingWebchatView";
 
 @customElement("pubnub-chat")
 export class PubnubChat extends LitElement {
+  private static readonly AUTO_SCROLL_THRESHOLD_PX = 32;
+
   static styles = [
     InputStyles,
     pubnubChatStyles,
@@ -108,6 +110,8 @@ export class PubnubChat extends LitElement {
 
   private _cleanupMobileListener?: () => void;
 
+  private shouldAutoScroll = true;
+
   @state()
   messages: SimpleChatMessage[] = [];
 
@@ -151,6 +155,7 @@ export class PubnubChat extends LitElement {
     if (message.length === 0) {
       return;
     }
+    this.shouldAutoScroll = true;
     this.messageInput.value = "";
     this.autoResizeMessageInput();
 
@@ -199,12 +204,23 @@ export class PubnubChat extends LitElement {
   }
 
   scrollToChatBottom = (): void => {
+    if (!this.shouldAutoScroll) return;
     this.messageBody.scrollTo({
       top: this.messageBody.scrollHeight - this.messageBody.clientHeight,
-      behavior: "smooth",
+      behavior: "auto",
     });
   };
 
+  private handleConversationScroll = (event: Event): void => {
+    const messageBody = event.currentTarget as HTMLDivElement;
+    const distanceFromBottom =
+      messageBody.scrollHeight -
+      messageBody.clientHeight -
+      messageBody.scrollTop;
+    this.shouldAutoScroll =
+      distanceFromBottom <= PubnubChat.AUTO_SCROLL_THRESHOLD_PX;
+  };
+
   async updated(): Promise<void> {
     this.scrollToChatBottom();
     try {
@@ -312,6 +328,7 @@ export class PubnubChat extends LitElement {
           </div>
           <div
             id="conversation-body"
+            @scroll=${this.handleConversationScroll}
             class=${classMap({
               ["hidden"]: this.needsConsent(),
               ["utilities-conversation-body-backdrop"]: true,
@@ -485,6 +502,7 @@ export class PubnubChat extends LitElement {
           </div>
           <div
             id="conversation-body"
+            @scroll=${this.handleConversationScroll}
             class=${classMap({
               ["hidden"]: this.needsConsent(),
               ["healthcare-conversation-body-backdrop"]: true,
@@ -667,6 +685,7 @@ export class PubnubChat extends LitElement {
         </div>
         <div
           id="conversation-body"
+          @scroll=${this.handleConversationScroll}
           style=${styleMap({
             background:
               this.building.orgId === 444

package/src/fetchFeatureFlag.ts

@@ -114,3 +114,25 @@ export async function fetchFeatureFlagUseApplicationsLinkReplacement(
     return false;
   }
 }
+
+const trackedRolloutEndpoint = (buildingSlug: string): string => {
+  const host = "https://app.meetelise.com";
+  return `${host}/platformApi/webchat/${buildingSlug}/tracked-rollout`;
+};
+
+export async function fetchTrackedRolloutBedroomPreferenceRequired(
+  buildingSlug: string
+): Promise<boolean> {
+  if (!buildingSlug) return false;
+  try {
+    const response = await axios.get(trackedRolloutEndpoint(buildingSlug), {
+      params: {
+        rollout_name: "webchat_bedroom_preference_required",
+        default_value: false,
+      },
+    });
+    return response.data;
+  } catch (_) {
+    return false;
+  }
+}

package/src/pubnub-chat.test.ts

@@ -0,0 +1,192 @@
+import { expect } from "@esm-bundle/chai";
+import "../public/dist/index";
+import { BuildingWebchatView } from "./fetchBuildingWebchatView";
+import type { SimpleTextChatMessage } from "./MyPubnub";
+import type { PubnubChat } from "./WebComponent/pubnub-chat";
+
+declare const afterEach: (callback: () => void) => void;
+declare const it: (name: string, callback: () => void | Promise<void>) => void;
+
+interface ScrollMetrics {
+  clientHeight: number;
+  scrollHeight: number;
+  scrollTop: number;
+}
+
+const waitForRender = async (chat: PubnubChat): Promise<void> => {
+  await chat.updateComplete;
+  const messageUpdates = Array.from(
+    chat.shadowRoot?.querySelectorAll("pubnub-message") ?? []
+  ).map(
+    (message) =>
+      (message as HTMLElement & { updateComplete: Promise<boolean> })
+        .updateComplete
+  );
+  await Promise.all(messageUpdates);
+};
+
+const streamingMessage = (chunks: string[]): SimpleTextChatMessage => ({
+  timestamp: 100,
+  message: chunks.join(""),
+  isLeadMessage: false,
+  chunks: chunks.map((text, order) => ({ text, order, isDone: false })),
+  type: "text" as SimpleTextChatMessage["type"],
+});
+
+const completedMessage = (message: string): SimpleTextChatMessage => ({
+  timestamp: 100,
+  message,
+  isLeadMessage: false,
+  chunks: [{ text: message, order: 0, isDone: true }],
+  type: "text" as SimpleTextChatMessage["type"],
+});
+
+const createScrollableChat = async (
+  initialMetrics: Partial<ScrollMetrics> = {}
+): Promise<{
+  chat: PubnubChat;
+  messageBody: HTMLElement;
+  scrollCalls: ScrollToOptions[];
+  setMetrics: (metrics: Partial<ScrollMetrics>) => void;
+}> => {
+  const chat = document.createElement("pubnub-chat") as PubnubChat;
+  chat.buildingSlug = "test-building";
+  chat.orgSlug = "test-org";
+  chat.building = {
+    id: 1,
+    orgId: 1,
+    name: "Test Building",
+    welcomeMessage: null,
+    state: "NY",
+    country: "US",
+    customAdditionalDisclaimer: null,
+  } as BuildingWebchatView;
+  document.body.appendChild(chat);
+  await waitForRender(chat);
+
+  const messageBody =
+    chat.shadowRoot?.querySelector<HTMLElement>("#conversation-body");
+  if (!messageBody) throw new Error("Expected the conversation body to render");
+
+  const metrics: ScrollMetrics = {
+    clientHeight: 400,
+    scrollHeight: 1_000,
+    scrollTop: 200,
+    ...initialMetrics,
+  };
+  Object.defineProperties(messageBody, {
+    clientHeight: { configurable: true, get: () => metrics.clientHeight },
+    scrollHeight: { configurable: true, get: () => metrics.scrollHeight },
+    scrollTop: { configurable: true, get: () => metrics.scrollTop },
+  });
+
+  const scrollCalls: ScrollToOptions[] = [];
+  messageBody.scrollTo = ((options: ScrollToOptions) => {
+    scrollCalls.push(options);
+  }) as typeof messageBody.scrollTo;
+
+  return {
+    chat,
+    messageBody,
+    scrollCalls,
+    setMetrics: (nextMetrics) => Object.assign(metrics, nextMetrics),
+  };
+};
+
+const expectOnlyAutoScrollsTo = (
+  scrollCalls: ScrollToOptions[],
+  top: number
+): void => {
+  expect(scrollCalls).not.to.be.empty;
+  expect(
+    scrollCalls.every(
+      (options) => options.top === top && options.behavior === "auto"
+    )
+  ).to.equal(true);
+};
+
+afterEach(() => {
+  document.querySelectorAll("pubnub-chat").forEach((chat) => chat.remove());
+});
+
+it("test_bug_preserves_scroll_position_during_streamed_updates", async () => {
+  const { chat, messageBody, scrollCalls } = await createScrollableChat();
+
+  messageBody.dispatchEvent(new Event("scroll"));
+  chat.messages = [streamingMessage(["First streamed chunk. "])];
+  await waitForRender(chat);
+  chat.messages = [
+    streamingMessage(["First streamed chunk. ", "Second streamed chunk."]),
+  ];
+  await waitForRender(chat);
+
+  expect(scrollCalls).to.deep.equal([]);
+  expect(messageBody.scrollTop).to.equal(200);
+});
+
+it("preserves scroll position when a completed message re-renders", async () => {
+  const { chat, messageBody, scrollCalls } = await createScrollableChat();
+
+  chat.messages = [
+    completedMessage(
+      "A completed response with enough content to exceed the visible pane."
+    ),
+  ];
+  await waitForRender(chat);
+  scrollCalls.length = 0;
+
+  messageBody.dispatchEvent(new Event("scroll"));
+  const renderedMessage = chat.shadowRoot?.querySelector("pubnub-message") as
+    | (HTMLElement & { updateComplete: Promise<boolean> })
+    | null;
+  if (!renderedMessage) throw new Error("Expected a rendered chat message");
+
+  // Completed messages can update later as links, previews, or media settle.
+  renderedMessage.requestUpdate();
+  await renderedMessage.updateComplete;
+
+  expect(scrollCalls).to.deep.equal([]);
+  expect(messageBody.scrollTop).to.equal(200);
+});
+
+it("continues following streamed updates while already at the bottom", async () => {
+  const { chat, messageBody, scrollCalls, setMetrics } =
+    await createScrollableChat({ scrollTop: 600 });
+
+  messageBody.dispatchEvent(new Event("scroll"));
+  setMetrics({ scrollHeight: 1_200 });
+  chat.messages = [streamingMessage(["A newly streamed response."])];
+  await waitForRender(chat);
+
+  expectOnlyAutoScrollsTo(scrollCalls, 800);
+});
+
+it("resumes following after the reader returns near the bottom", async () => {
+  const { chat, messageBody, scrollCalls, setMetrics } =
+    await createScrollableChat();
+
+  messageBody.dispatchEvent(new Event("scroll"));
+  chat.messages = [streamingMessage(["First streamed chunk. "])];
+  await waitForRender(chat);
+  expect(scrollCalls).to.deep.equal([]);
+
+  setMetrics({ scrollTop: 575 });
+  messageBody.dispatchEvent(new Event("scroll"));
+  setMetrics({ scrollHeight: 1_200 });
+  chat.messages = [
+    streamingMessage(["First streamed chunk. ", "Second streamed chunk."]),
+  ];
+  await waitForRender(chat);
+
+  expectOnlyAutoScrollsTo(scrollCalls, 800);
+});
+
+it("follows the conversation again when the reader sends a message", async () => {
+  const { chat, messageBody, scrollCalls } = await createScrollableChat();
+
+  messageBody.dispatchEvent(new Event("scroll"));
+  await chat.sendMessage("Show me another apartment");
+  await waitForRender(chat);
+
+  expectOnlyAutoScrollsTo(scrollCalls, 600);
+});