Improve digression detection logic

nlxai · Jul 23, 2024 · b318685 · b318685
1 parent e7e906c
commit b318685
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 17 deletions.
diff --git a/packages/journey-manager/src/index.ts b/packages/journey-manager/src/index.ts
@@ -357,6 +357,9 @@ export const run = async (props: RunProps): Promise<RunOutput> => {
 
   const triggeredSteps = getTriggeredSteps(props.config.conversationId);
 
+  // TODO: type this more accurately
+  let uiElement: any;
+
   /**
    * Digression detection
    * - if all triggers have a URL constraint set and none match the current URL, fire a digression callback
@@ -379,10 +382,6 @@ export const run = async (props: RunProps): Promise<RunOutput> => {
     },
   );
 
-  if (isDigressionDetectable && !urlConditions.some(matchesUrlCondition)) {
-    props.onDigression?.(client);
-  }
-
   const sendStep = (stepId: string, once: boolean): void => {
     if (
       triggeredSteps.some((triggeredStep) => triggeredStep.stepId === stepId)
@@ -524,9 +523,6 @@ export const run = async (props: RunProps): Promise<RunOutput> => {
    * UI management
    */
 
-  // TODO: type this more accurately
-  let uiElement: any;
-
   const setHighlights = debounce((): void => {
     const highlightElements = findActiveTriggers("click").flatMap(
       (activeTrigger) => activeTrigger.elements,
@@ -621,7 +617,23 @@ export const run = async (props: RunProps): Promise<RunOutput> => {
    * Change detection
    */
 
+  let digressionCallbackCalled = false;
+
   const documentObserver = new MutationObserver((mutations) => {
+    if (isDigressionDetectable) {
+      const userHasDigressed = !urlConditions.some(matchesUrlCondition);
+      if (userHasDigressed) {
+        // Avoid calling the digression callback multiple times after a digression has been detected
+        if (!digressionCallbackCalled) {
+          props.onDigression?.(client);
+        }
+        digressionCallbackCalled = true;
+        uiElement.digression = true;
+      } else {
+        digressionCallbackCalled = false;
+        uiElement.digression = false;
+      }
+    }
     // If any of the added nodes are inside matches on appear events, trigger those events
     const targets = withElementsSync(appearSteps);
     mutations.forEach((mutation) => {

diff --git a/packages/journey-manager/src/ui.tsx b/packages/journey-manager/src/ui.tsx
@@ -38,6 +38,11 @@ export interface Theme {
   fontFamily: string;
 }
 
+interface HandlerArg {
+  sendStep: Client["sendStep"];
+  triggeredSteps: Array<{ stepId: string; url: string }>;
+}
+
 /**
  * Deep partial variant of the UI theme, input by the library user
  */
@@ -103,21 +108,19 @@ export interface UiConfig {
   /**
    * On previous step
    */
-  onPreviousStep?: (config: {
-    sendStep: Client["sendStep"];
-    triggeredSteps: Array<{ stepId: string; url: string }>;
-  }) => void;
+  onPreviousStep?: (config: HandlerArg) => void;
   /**
    * Previous step button label
    */
   previousStepButtonLabel?: string;
   /**
    * Custom buttons
    */
-  customButtons?: Array<{
+  buttons?: Array<{
     label: string;
+    confirmation?: string;
     iconUrl?: string;
-    onClick: () => void;
+    onClick: (config: HandlerArg) => void;
   }>;
   /**
    * Content for the tooltip to show around the button
@@ -633,15 +636,17 @@ const ControlCenter: FunctionComponent<{
 export class JourneyManagerElement extends HTMLElement {
   _shadowRoot: ShadowRoot | null = null;
   _config: UiConfig | null = null;
-  _digression?: boolean;
+  _digression: boolean = false;
   _highlightElements: HTMLElement[] = [];
 
   /**
    * Set digression attribute
    */
   set digression(value: boolean) {
-    this._digression = value;
-    this.render();
+    if (this._digression !== value) {
+      this._digression = value;
+      this.render();
+    }
   }
 
   /**
@@ -671,7 +676,7 @@ export class JourneyManagerElement extends HTMLElement {
     render(
       <ControlCenter
         config={this._config}
-        digression={this._digression ?? false}
+        digression={this._digression}
         highlightElements={this._highlightElements}
         onAction={(action) => {
           this.dispatchEvent(