@miso.ai/client-sdk-ui 1.12.3 → 1.12.4

package/src/element/container/miso-ask.js

@@ -2,9 +2,11 @@ import MisoContainerElement from './miso-container.js';
 
 const TAG_NAME = 'miso-ask';
 
+const ATTR_WORKFLOW = 'workflow';
 const ATTR_PARENT_QUESTION_ID = 'parent-question-id';
 const OBSERVED_ATTRIBUTES = Object.freeze([
   ...MisoContainerElement.observedAttributes,
+  ATTR_WORKFLOW,
   ATTR_PARENT_QUESTION_ID,
 ]);
 
@@ -19,6 +21,9 @@ export default class MisoAskElement extends MisoContainerElement {
   }
 
   _getWorkflow(client) {
+    if (this.boundToActiveWorkflow) {
+      return client.ui.asks.active;
+    }
     return this._getWorkflowByParentQuestionId(client, this.parentQuestionId);
   }
 
@@ -43,26 +48,69 @@ export default class MisoAskElement extends MisoContainerElement {
     }
   }
 
-  get workflow() {
-    return this._workflow;
+  get boundToActiveWorkflow() {
+    return this.getAttribute(ATTR_WORKFLOW) === 'active';
   }
 
-  set workflow(workflow) {
-    this._setWorkflow(workflow);
-    this.parentQuestionId = workflow && workflow.parentQuestionId;
+  _setWorkflow(workflow) {
+    if (this._workflow === workflow) {
+      return;
+    }
+    super._setWorkflow(workflow);
+    if (workflow) {
+      this.parentQuestionId = workflow.parentQuestionId;
+    }
   }
 
   // lifecycle //
+  async connectedCallback() {
+    await super.connectedCallback();
+    if (document.body.contains(this)) { // in case already disconnected
+      const context = this._client.ui.asks;
+      this._unsubscribes = [
+        ...(this._unsubscribes || []),
+        context.on('active', (event) => {
+          if (!this.boundToActiveWorkflow) {
+            return;
+          }
+          this.workflow = event.workflow;
+        }),
+      ];
+    }
+  }
+
+  disconnectedCallback() {
+    for (const unsubscribe of (this._unsubscribes || [])) {
+      unsubscribe();
+    }
+    this._unsubscribes = [];
+    super.disconnectedCallback();
+  }
+
   attributeChangedCallback(attr, oldValue, newValue) {
     switch (attr) {
       case ATTR_PARENT_QUESTION_ID:
         this._handleParentQuestionIdUpdate(oldValue, newValue);
         break;
+      case ATTR_WORKFLOW:
+        this._handleQuestionUpdate(oldValue, newValue);
+        break;
       default:
         super.attributeChangedCallback(attr, oldValue, newValue);
     }
   }
 
+  _handleQuestionUpdate(oldValue, newValue) {
+    oldValue = oldValue || undefined; // null -> undefined
+    newValue = newValue || undefined;
+    if (oldValue === newValue || !this._client) {
+      return;
+    }
+    if (newValue === ATTR_VALUE_ACTIVE) {
+      this._setWorkflow(this._getWorkflow(this._client));
+    }
+  }
+
   _handleParentQuestionIdUpdate(oldId, newId) {
     oldId = oldId || undefined; // null -> undefined
     newId = newId || undefined;

package/src/element/container/miso-container.js

@@ -82,6 +82,7 @@ export default class MisoContainerElement extends MisoStubElement {
     const client = this._client = await getClient(MisoContainerElement);
     if (document.body.contains(this)) { // in case already disconnected
       this._setWorkflow(this._getWorkflow(client));
+      this._onConnected(client);
     }
   }
 
@@ -90,6 +91,8 @@ export default class MisoContainerElement extends MisoStubElement {
     super.disconnectedCallback();
   }
 
+  _onConnected(client) {}
+
   _getWorkflow(client) {
     throw new Error('Unimplemented');
   }

package/src/version.js

@@ -1 +1 @@
-export default '1.12.3';
+export default '1.12.4';

package/src/workflow/answer-based.js

@@ -4,8 +4,8 @@ import { fields, FeedbackActor } from '../actor/index.js';
 import { ROLE, STATUS, QUESTION_SOURCE } from '../constants.js';
 import { SearchBoxLayout, TextLayout, ListLayout, GalleryLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
 import { processData as processAffiliationData } from '../affiliation/index.js';
-import { mergeRolesOptions, autoQuery as autoQueryFn, DEFAULT_AUTO_QUERY_PARAM, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
-import { mappingAnswerData, mappingReasoningData, writeAnswerStageToMeta, writeEventTargetToInteraction } from './processors.js';
+import { mergeRolesOptions, autoQuery as autoQueryFn, updateQueryParametersInUrl, DEFAULT_AUTO_QUERY_PARAM, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
+import { mappingAnswerData, mappingReasoningData, writeAnswerStageToMeta, writeAnswerInfoToInteraction } from './processors.js';
 import { enableUseLink } from './use-link.js';
 import { isTracked, markAsTracked } from '../util/trackers.js';
 
@@ -204,7 +204,7 @@ export default class AnswerBasedWorkflow extends Workflow {
     super._updateData(data);
 
     // update URL if autoQuery.updateUrl is not false
-    this._updateUrlIfNecessary(data);
+    updateQueryParametersInUrl.call(this, data);
   }
 
   _handleHeadResponse(data) {}
@@ -220,92 +220,13 @@ export default class AnswerBasedWorkflow extends Workflow {
     value && this._writeQuestionId(value.question_id);
   }
 
-  _updateUrlIfNecessary({ value, request }) {
-    if (!this._autoQuery || !this._autoQuery.updateUrl) {
-      return;
-    }
-    const { param, sourceParam } = this._autoQuery;
-    const question = (value && value.question) || (request && request.payload && request.payload.question);
-    const questionSource = request && request.payload && request.payload.metadata && request.payload.metadata.question_source;
-
-    if (!question) {
-      return; // at initial phase
-    }
-
-    const url = new URL(window.location);
-    const currentQuestion = url.searchParams.get(param);
-    const currentQuestionSource = url.searchParams.get(sourceParam) || QUESTION_SOURCE.ORGANIC;
-    if (question === currentQuestion && questionSource === currentQuestionSource) {
-      return;
-    }
-    url.searchParams.set(param, question);
-    if (questionSource === QUESTION_SOURCE.ORGANIC) {
-      url.searchParams.delete(sourceParam);
-    } else {
-      url.searchParams.set(sourceParam, questionSource);
-    }
-    window.history.replaceState({}, '', url);
-  }
-
   // interactions //
   _defaultProcessInteraction(payload, args) {
     payload = super._defaultProcessInteraction(payload, args);
-    payload = this._writeAskPropertiesToInteraction(payload, args);
-    payload = this._writeAnswerClickInteraction(payload, args);
-    payload = writeEventTargetToInteraction(payload, args);
+    payload = writeAnswerInfoToInteraction(payload, args);
     return payload;
   }
 
-  _writeRequestInfoToInteraction(payload, args) {
-    const { data } = args;
-    if (!data) {
-      return payload;
-    }
-    const requestPayload = data.request && data.request.payload;
-    if (!requestPayload) {
-      return payload;
-    }
-    const { question, fq } = requestPayload;
-    return mergeInteractions(payload, {
-      context: {
-        custom_context: {
-          question,
-          fq,
-        },
-      },
-    });
-  }
-
-  _writeAskPropertiesToInteraction(payload = {}, args) {
-    const question_source = this._getQuestionSourceFromViewState(args);
-    const question_id = this.questionId;
-    return mergeInteractions(payload, {
-      context: {
-        custom_context: {
-          question_source,
-          question_id,
-        },
-      },
-    });
-  }
-
-  _writeAnswerClickInteraction(payload, args) {
-    if (args.role !== ROLE.ANSWER) {
-      return payload;
-    }
-    const { items = [] } = args;
-    return mergeInteractions(payload, {
-      context: {
-        custom_context: {
-          urls: items.map(item => item.url),
-          texts: items.map(item => item.text),
-          class_names: items.map(item => item.className),
-          attributes: items.map(item => item.attributes),
-        },
-      },
-    });
-  }
-
   _getQuestionSourceFromViewState(args) {
     const { request } = this._hub.states[fields.view(args.role)] || {};
     const { payload } = request || {};

package/src/workflow/ask.js

@@ -4,7 +4,7 @@ import { fields } from '../actor/index.js';
 import { ROLE, STATUS, QUESTION_SOURCE } from '../constants.js';
 import { OptionListLayout, ListLayout, SearchBoxLayout, TypewriterLayout } from '../layout/index.js';
 import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
-import { mappingSuggestionsData, mappingFollowUpQuestionsData } from './processors.js';
+import { writeQuestionSourceToPayload, mappingSuggestionsData, mappingFollowUpQuestionsData } from './processors.js';
 import { followUp as followUpTemplate } from '../defaults/ask/templates.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
@@ -137,11 +137,8 @@ export default class Ask extends AnswerBasedWorkflow {
       ...options,
       question: q, // question, not q
       parent_question_id: parentQuestionId,
-      metadata: {
-        ...options.metadata,
-        question_source: qs || QUESTION_SOURCE.ORGANIC, // might be null, not undefined
-      },
     });
+    payload = writeQuestionSourceToPayload({ ...payload, qs });
     payload = this._writeWikiLinkTemplateToPayload(payload);
     return payload;
   }
@@ -171,7 +168,13 @@ export default class Ask extends AnswerBasedWorkflow {
   }
 
   // interactions //
-  _writeAskPropertiesToInteraction(payload, args) {
+  _defaultProcessInteraction(payload, args) {
+    payload = super._defaultProcessInteraction(payload, args);
+    payload = this._writeAdditionalAskPropertiesToInteraction(payload, args);
+    return payload;
+  }
+
+  _writeAdditionalAskPropertiesToInteraction(payload, args) {
     const root_question_id = this.rootQuestionId;
     let { property } = (payload.context && payload.context.custom_context) || {};
     let question_id, parent_question_id, question_source;
@@ -186,19 +189,17 @@ export default class Ask extends AnswerBasedWorkflow {
       question_source = this.previous && this.previous.session.meta.question_source;
     } else {
       parent_question_id = this.parentQuestionId;
-      question_id = this.questionId;
-      question_source = this._getQuestionSourceFromViewState(args);
     }
 
     return mergeInteractions(payload, {
       context: {
-        custom_context: {
+        custom_context: trimObj({ // question_id, question_source can be undefined
           property,
           root_question_id,
           parent_question_id,
           question_id,
           question_source,
-        },
+        }),
       }
     });
   }

package/src/workflow/asks.js

@@ -1,4 +1,4 @@
-import { WORKFLOW_CONFIGURABLE } from '../constants.js';
+import { WORKFLOW_CONFIGURABLE, STATUS } from '../constants.js';
 import WorkflowContext from './context.js';
 import Ask from './ask.js';
 import { makeConfigurable } from './options/index.js';
@@ -15,7 +15,7 @@ function autoNextOptionsAsPredicate(options = DEFAULT_AUTO_NEXT_OPTIONS) {
   switch (typeof options) {
     case 'object':
       // TODO: support more options
-      return event => options.event === event._event;
+      return event => event && options.event === event._event;
     case 'function':
       return options;
     default:
@@ -31,7 +31,11 @@ export default class Asks extends WorkflowContext {
     this._byPqid = new Map();
     this._root = new Ask(this); // initialize with default workflow
     this._events.on('*', event => this._createNextIfNecessary(event));
+    this._events.on('loading', event => this._setActive(event.workflow));
+    this._events.on('destroy', () => this._requestEmitAfterDestroy());
+    this._events.on('after-destroy', () => this._syncActiveOnAfterDestroy());
     this._autoNextFn = undefined;
+    this._active = this._root;
   }
 
   get root() {
@@ -42,6 +46,10 @@ export default class Asks extends WorkflowContext {
     return [this._root, ...this._byPqid.values()];
   }
 
+  get active() {
+    return this._active;
+  }
+
   getByQuestionId(questionId) {
     if (typeof questionId !== 'string') {
       throw new Error(`Required ID to be a string: ${questionId}`);
@@ -95,6 +103,35 @@ export default class Asks extends WorkflowContext {
     workflow && workflow.getOrCreateNext();
   }
 
+  _requestEmitAfterDestroy() {
+    if (this._emitAfterDestroyRequested) {
+      return;
+    }
+    this._emitAfterDestroyRequested = true;
+    setTimeout(() => {
+      this._emitAfterDestroyRequested = false;
+      this._events.emit('after-destroy', {});
+    }, 0);
+  }
+
+  _syncActiveOnAfterDestroy() {
+    if (!this._active.destroyed) {
+      return;
+    }
+    // find last non-initial workflow or root
+    let workflow = this._root;
+    for (; workflow.next && workflow.next.status !== STATUS.INITIAL; workflow = workflow.next) {}
+    this._setActive(workflow);
+  }
+
+  _setActive(workflow) {
+    if (workflow === this._active) {
+      return;
+    }
+    this._active = workflow;
+    this._events.emit('active', { workflow });
+  }
+
 }
 
 makeConfigurable(Asks.prototype, [WORKFLOW_CONFIGURABLE.TEMPLATES]);

package/src/workflow/base.js

@@ -10,6 +10,7 @@ import {
   writeDataStatus,
   writeMisoIdToMeta,
   buildBaseInteraction,
+  writeRequestInfoToInteraction,
   writeRequestMetadataToInteraction,
   writeAffiliationInfoToInteraction,
 } from './processors.js';
@@ -40,7 +41,7 @@ export default class Workflow extends Component {
   constructor(args) {
     super(args.name || 'workflow', args.plugin);
 
-    let { context, plugin, client, defaults, options } = args;
+    let { context, plugin, client, defaults, options, extraOptions } = args;
     this._context = context;
     this._plugin = plugin = plugin || context._plugin;
     this._client = client = client || context._client;
@@ -52,6 +53,7 @@ export default class Workflow extends Component {
     this._extensions = plugin._getExtensions(client);
     this._defaults = defaults;
     this._options = options || new WorkflowOptions(context && context._options, defaults);
+    this._extraOptions = extraOptions || {};
     this._hub = new Hub({
       onUpdate: event => this._onHubUpdate(event),
       onEmit: event => this._onHubEmit(event),
@@ -76,7 +78,7 @@ export default class Workflow extends Component {
     const layouts = this._plugin.layouts;
 
     this._sessions = new SessionMaker(hub);
-    this._data = new DataActor(hub, { source: sources.api(client), options });
+    this._data = new DataActor(hub, { source: sources.api(client), options, ...this._extraOptions.api });
     this._views = new ViewsActor(hub, { extensions, layouts, roles, options, workflow: this });
     //this._trackers = new TrackersActor(hub, { options });
     this._interactions = new InteractionsActor(hub, { client, options });
@@ -274,8 +276,9 @@ export default class Workflow extends Component {
   }
 
   _onTracker(args) {
+    const workflow = this;
     const data = this._hub.states[fields.data()];
-    const payload = this._buildInteraction({ ...args, data });
+    const payload = this._buildInteraction({ ...args, data, workflow });
     this._sendInteraction(payload);
   }
 
@@ -290,10 +293,10 @@ export default class Workflow extends Component {
   }
 
   _defaultProcessInteraction(payload, args) {
-    payload = writeRequestMetadataToInteraction(payload, args);
     payload = this._writeApiInfoToInteraction(payload, args);
-    payload = this._writeRequestInfoToInteraction(payload, args);
     payload = this._writeMisoIdToInteraction(payload, args);
+    payload = writeRequestInfoToInteraction(payload, args);
+    payload = writeRequestMetadataToInteraction(payload, args);
     payload = writeAffiliationInfoToInteraction(payload, args);
     return payload;
   }
@@ -310,10 +313,6 @@ export default class Workflow extends Component {
     });
   }
 
-  _writeRequestInfoToInteraction(payload, args) {
-    return payload;
-  }
-
   _writeMisoIdToInteraction(payload, args) {
     // TODO: ad-hoc, try to pass info from tracker
     const state = this._hub.states[fields.view(args.role)] || {};
@@ -336,6 +335,10 @@ export default class Workflow extends Component {
     this._destroy(options);
   }
 
+  get destroyed() {
+    return !!this._destroyed;
+  }
+
   _destroy({ dom } = {}) {
     for (const unsubscribe of this._unsubscribes || []) {
       unsubscribe();
@@ -344,6 +347,7 @@ export default class Workflow extends Component {
 
     this._views._destroy({ dom });
     this._data._destroy();
+    this._destroyed = true;
   }
 
   // helper //

package/src/workflow/hybrid-search-answer.js

@@ -1,15 +1,8 @@
-import { mergeApiPayloads } from '@miso.ai/commons';
 import AnswerBasedWorkflow from './answer-based.js';
-import { ROLE, STATUS, QUESTION_SOURCE } from '../constants.js';
-import { mergeRolesOptions } from './options/index.js';
+import { fields } from '../actor/index.js';
 import { writeKeywordsToData, writeMisoIdToSession, writeMisoIdFromSession, writeUnanswerableToMeta } from './processors.js';
-import { makeAutocompletable } from './autocompletable.js';
 
-const ROLES_OPTIONS = mergeRolesOptions(AnswerBasedWorkflow.ROLES_OPTIONS, {
-  mappings: {
-    [ROLE.QUESTION]: ROLE.KEYWORDS,
-  },
-});
+const ROLES_OPTIONS = AnswerBasedWorkflow.ROLES_OPTIONS;
 
 export default class HybridSearchAnswer extends AnswerBasedWorkflow {
 
@@ -27,35 +20,34 @@ export default class HybridSearchAnswer extends AnswerBasedWorkflow {
 
   _initProperties(args) {
     super._initProperties(args);
-    this._initAutocomplete(args);
     this._superworkflow = args.superworkflow;
   }
 
   _initSession() {} // no reset here, will manually reset later
 
-  restart() {
-    super.restart();
-    // cascade restart to the sibling
-    const results = this._superworkflow._results;
-    results._views.filters.reset({ silent: true });
-    results.restart();
-    this._resultsSession = results.session; // keep track of the session
+  _doLoading(data) {
+    const { session } = this;
+    this.updateData({ ...data, session });
   }
 
-  // query //
-  _buildPayload(payload) {
-    payload = this._writeQuestionSourceToPayload(payload);
-    payload = this._writeWikiLinkTemplateToPayload(payload);
-    payload = this._superworkflow._results._writeFiltersToPayload(payload);
-    return payload;
-  }
-
-  _writeQuestionSourceToPayload({ qs, ...payload } = {}) {
-    return mergeApiPayloads(payload, {
-      metadata: {
-        question_source: qs || QUESTION_SOURCE.ORGANIC, // might be null, not undefined
-      },
-    });
+  _queryWithQuestionId(data) {
+    const { session } = this;
+    const { request, value } = data;
+    this.updateData({ ...data, session });
+    // start query with question_id
+    const { question_id } = value;
+    if (!question_id) {
+      return;
+    }
+    // forge the request
+    const payload = {
+      ...request.payload,
+      question_id,
+    };
+    if (payload.metadata.page !== undefined) {
+      delete payload.metadata.page;
+    }
+    this._hub.update(fields.request(), { ...request, payload, session });
   }
 
   // data //
@@ -67,44 +59,15 @@ export default class HybridSearchAnswer extends AnswerBasedWorkflow {
     return data;
   }
 
-  _updateDataInHub(data) {
-    switch (data.status) {
-      case STATUS.INITIAL:
-      case STATUS.LOADING:
-        // share the initial/loading status with its sibling
-        this._dispatchDataToSibling(data);
-        break;
-    }
-    super._updateDataInHub(data);
-  }
-
   _handleHeadResponse(data) {
     super._handleHeadResponse(data);
     // keep track of miso_id in session
     writeMisoIdToSession(data);
-    // share the search results with its sibling
-    this._dispatchDataToSibling(data);
-  }
-
-  _dispatchDataToSibling(data) {
-    this._resultsSession && this._superworkflow._results.updateData({ ...data, session: this._resultsSession });
   }
 
   // interactions //
-  _defaultProcessInteraction(payload, args) {
-    return this._superworkflow._defaultProcessInteraction(payload, args);
-  }
-
-  _defaultProcessInteraction0(payload, args) {
-    return super._defaultProcessInteraction(payload, args);
-  }
-
-  // destroy //
-  _destroy(options) {
-    this._destroyAutocomplete();
-    super._destroy(options);
+  _onTracker(args) {
+    this._superworkflow._onTracker(args);
   }
 
 }
-
-makeAutocompletable(HybridSearchAnswer.prototype);

package/src/workflow/hybrid-search-views.js

@@ -1,17 +1,23 @@
-import HybridSearchResults from './hybrid-search-results.js';
+import SearchBasedWorkflow from './search-based.js';
+
+const RESULTS_ROLE_MEMBERS = SearchBasedWorkflow.ROLES_OPTIONS.members;
 
 function getSubworkflowByRole(role) {
   // TODO: ROLE.ERROR
-  return HybridSearchResults.ROLES_OPTIONS.members.includes(role) ? 'results' : 'answer';
+  return RESULTS_ROLE_MEMBERS.includes(role) ? 'results' : 'answer';
 }
 
 export default class HybridSearchViewsActor {
 
-  constructor(workflow) {
-    this._workflow = workflow;
+  constructor(subviews) {
+    this._subviews = subviews;
     this._containers = new Set();
   }
 
+  get filters() {
+    return this._subviews.results.filters;
+  }
+
   get(role) {
     return this._getSubviews(role).get(role);
   }
@@ -29,8 +35,8 @@ export default class HybridSearchViewsActor {
   }
 
   removeContainer(element) {
-    for (const subworkflow of this._workflow._subworkflows) {
-      subworkflow._views.removeContainer(element);
+    for (const subviews of this._getAllSubviews()) {
+      subviews.removeContainer(element);
     }
     this._containers.delete(element);
   }
@@ -55,16 +61,12 @@ export default class HybridSearchViewsActor {
   }
 
   // helpers //
-  _getSubworkflow(role) {
-    return this._workflow._getSubworkflow(getSubworkflowByRole(role));
-  }
-
   _getAllSubviews() {
-    return this._workflow._subworkflows.flatMap(subworkflow => subworkflow._views);
+    return Object.values(this._subviews);
   }
 
   _getSubviews(role) {
-    return this._getSubworkflow(role)._views;
+    return this._subviews[getSubworkflowByRole(role)];
   }
 
   _getViewByElement(element) {