@miso.ai/client-sdk-ui 1.11.0-beta.1 → 1.11.0-beta.10

package/src/layout/list/collection.js

@@ -1,13 +1,14 @@
-import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
+import { STATUS } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../trackable.js';
+import { makeTriggerable } from '../triggerable.js';
 import { product, article, question, productInfoBlock, articleInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, priceBlock, discountRateText, ctaBlock, cta, imageBlock, indexBlock } from '../templates.js';
 
 function root(layout, state) {
   const { className, role, templates } = layout;
   const { status } = state;
   const roleAttr = role ? `data-role="${role}"` : '';
-  return `<div class="${className} ${status}" ${roleAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  return `<div class="${className} ${status}" ${roleAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loadingBar(layout, state)}</div>`;
 }
 
 function ready(layout, state) {
@@ -15,7 +16,7 @@ function ready(layout, state) {
   const values = layout._getItems(state);
 
   // TODO: handle categories, attributes, etc. by introducing sublayout
-  if ((values && values.length > 0) || state.ongoing) {
+  if ((values && values.length > 0) || state.ongoing) { // TODO: ad-hoc ongoing?
     return templates.list(layout, state, values);
   } else {
     return templates.empty(layout, state);
@@ -42,6 +43,16 @@ function item(layout, state, value, index) {
   return `<li class="${className}__item">${body}</li>`;
 }
 
+function trigger(layout, state) {
+  const { className } = layout;
+  return `<div class="${className}__trigger" data-role="trigger"></div>`;
+}
+
+function loadingBar(layout, state) {
+  const { className } = layout;
+  return `<div class="${className}__loading-bar"></div>`;
+}
+
 // TODO: let templates.js control what to be included here
 
 const DEFAULT_TEMPLATES = Object.freeze({
@@ -67,14 +78,12 @@ const DEFAULT_TEMPLATES = Object.freeze({
   cta,
   imageBlock,
   indexBlock,
+  trigger,
+  loadingBar,
 });
 
 export default class CollectionLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.LIST;
-  }
-
   static get defaultTemplates() {
     return DEFAULT_TEMPLATES;
   }
@@ -86,6 +95,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
       ...options,
     });
     this._initTrackable();
+    this._initTriggerable();
   }
 
   initialize(view) {
@@ -106,8 +116,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
     // TODO: compare item ids as well
     return this.options.incremental &&
     rendered && rendered.value && rendered.value.length > 0 &&
-      state.status === STATUS.READY &&
-      rendered.status === STATUS.READY &&
+    state.value && state.value.length >= rendered.value.length &&
       state.session && rendered.session &&
       state.session.id === rendered.session.id;
   }
@@ -138,10 +147,12 @@ export default class CollectionLayout extends TemplateBasedLayout {
 
   _afterRender(element, state) {
     this._syncBindings(element, state);
+    this._syncTrigger(element, state);
   }
 
   _unrender() {
     this._clearBindings();
+    this._untrackTrigger();
   }
 
   _getItems(state) {
@@ -177,6 +188,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
 
   destroy() {
     this._destroyTrackable();
+    this._destroyTriggerable();
     this._view = undefined;
     super.destroy();
   }
@@ -184,3 +196,4 @@ export default class CollectionLayout extends TemplateBasedLayout {
 }
 
 makeTrackable(CollectionLayout.prototype);
+makeTriggerable(CollectionLayout.prototype);

package/src/layout/list/list.js

@@ -5,10 +5,6 @@ const DEFAULT_CLASSNAME = 'miso-list';
 
 export default class ListLayout extends CollectionLayout {
 
-  static get category() {
-    return super.category;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/radio/feedback.js

@@ -50,10 +50,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class FeedbackLayout extends RadioLayout {
 
-  static get category() {
-    return super.category;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/radio/radio.js

@@ -1,5 +1,4 @@
 import { findInAncestors, requestAnimationFrame as raf } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { requiresImplementation } from '../templates.js';
 
@@ -30,10 +29,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class RadioLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.RADIO;
-  }
-
   static get defaultTemplates() {
     return DEFAULT_TEMPLATES;
   }

package/src/layout/raf.js

@@ -2,8 +2,8 @@ import { defineValues, requestAnimationFrame as raf, capture } from '@miso.ai/co
 
 export default class RafLayout {
 
-  constructor({ role, workflow, ...options } = {}) {
-    defineValues(this, { role, workflow, options });
+  constructor({ role, workflow, workflowOptions, ...options } = {}) {
+    defineValues(this, { role, workflow, workflowOptions, options });
     this._unsubscribes = [];
     this._rendered = new WeakMap();
     this._element = undefined;

package/src/layout/text/text.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 
 const TYPE = 'text';
@@ -42,10 +41,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class TextLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.TEXT;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/text/typewriter/index.js

@@ -1,5 +1,5 @@
 import { trimObj, defineValues, Resolution, pacer } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY, STATUS } from '../../../constants.js';
+import { STATUS } from '../../../constants.js';
 import ProgressiveLayout from '../../progressive.js';
 import PlaintextRenderer from './plaintext.js';
 import { containerElement, cursorClassName, fromSameSession, normalizeOnDebug } from './utils.js';
@@ -9,10 +9,6 @@ const DEFAULT_CLASSNAME = 'miso-typewriter';
 
 export default class TypewriterLayout extends ProgressiveLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.TEXT;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/trackable.js

@@ -1,4 +1,4 @@
-import { mixin } from '@miso.ai/commons'; 
+import { mixin } from '@miso.ai/commons';
 import Bindings from '../util/bindings.js';
 import Viewables from '../util/viewables.js';
 import { validateClick } from '../util/trackers.js';

package/src/layout/triggerable.js

@@ -0,0 +1,76 @@
+import { mixin, viewable as whenViewable } from '@miso.ai/commons';
+import { STATUS } from '../constants.js';
+import { fields } from '../actor/index.js';
+
+export function makeTriggerable(prototype) {
+  mixin(prototype, TriggerableMixin.prototype);
+}
+
+export class TriggerableMixin {
+
+  _initTriggerable() {
+    this._trigger = undefined;
+  }
+
+  _syncTrigger(element, state) {
+    if (!this.options.infiniteScroll) {
+      return;
+    }
+    const workflowPaginationOptions = this.workflowOptions.pagination;
+    if (!workflowPaginationOptions.active || workflowPaginationOptions.mode !== 'infiniteScroll') {
+      return;
+    }
+    // only track trigger when ready
+    if (state.status === STATUS.READY) {
+      this._trackTrigger(element);
+    } else {
+      this._untrackTrigger();
+    }
+  }
+
+  async _trackTrigger(element) {
+    if (this._trigger) {
+      return;
+    }
+    const triggerElement = element.querySelector('[data-role="trigger"]');
+    if (!triggerElement) {
+      return;
+    }
+    const ac = new AbortController();
+    this._trigger = Object.freeze({
+      element: triggerElement,
+      ac,
+    });
+    let result = false;
+    try {
+      await whenViewable(triggerElement, { area: 1, duration: 0, signal: ac.signal });
+      result = true;
+    } catch (e) {
+      if (e.name !== 'AbortError') {
+        throw e;
+      }
+    } finally {
+      this._trigger = undefined;
+    }
+    if (result) {
+      this._onTrigger();
+    }
+  }
+
+  _onTrigger() {
+    this._view.hub.trigger(fields.more());
+  }
+
+  _untrackTrigger() {
+    if (!this._trigger) {
+      return;
+    }
+    this._trigger.ac && this._trigger.ac.abort();
+    this._trigger = undefined;
+  }
+
+  _destroyTriggerable() {
+    this._untrackTrigger();
+  }
+
+}

package/src/util/states.js

@@ -4,20 +4,6 @@ import { EVENT_TYPE, TRACKING_STATUS, validateEventType, validateTrackingStatus
 const { IMPRESSION, VIEWABLE, CLICK } = EVENT_TYPE;
 const { UNTRACKED, TRIGGERED } = TRACKING_STATUS;
 
-/*
-const STATES = {
-  NEW: Object.freeze({
-    [IMPRESSION]: UNTRACKED,
-    [VIEWABLE]: UNTRACKED,
-  }),
-  UNTRACKED: Object.freeze({
-    [IMPRESSION]: UNTRACKED,
-    [VIEWABLE]: UNTRACKED,
-    [CLICK]: UNTRACKED,
-  }),
-};
-*/
-
 const UNTRACKED_STATES = Object.freeze({
   [IMPRESSION]: UNTRACKED,
   [VIEWABLE]: UNTRACKED,

package/src/version.js

@@ -1 +1 @@
-export default '1.11.0-beta.1';
+export default '1.11.0-beta.10';

package/src/workflow/answer-based.js

@@ -1,16 +1,17 @@
-import { trimObj, API } from '@miso.ai/commons';
+import { API } from '@miso.ai/commons';
 import Workflow from './base.js';
-import { mergeApiOptions } from './options.js';
-// import * as sources from '../source.js';
-import { fields, FeedbackActor, AutocompleteActor } from '../actor/index.js';
-import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE, DATA_ASPECT } from '../constants.js';
+import { fields, FeedbackActor } from '../actor/index.js';
+import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
 import { SearchBoxLayout, TextLayout, ListLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
 import { processData as processAffiliationData } from '../affiliation/index.js';
-import { writeAnswerStageToMeta } from './processors.js';
+import { mergeRolesOptions } from './options.js';
+import { writeAnswerStageToMeta, mergeInteraction } from './processors.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
+  ...Workflow.DEFAULT_API_OPTIONS,
   group: API.GROUP.ASK,
   payload: {
+    ...Workflow.DEFAULT_API_OPTIONS.payload,
     source_fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at'],
     cite_link: 1,
     cite_start: '[',
@@ -27,6 +28,7 @@ const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
 });
 
 const DEFAULT_LAYOUTS = Object.freeze({
+  ...Workflow.DEFAULT_LAYOUTS,
   [ROLE.QUERY]: [SearchBoxLayout.type, { placeholder: 'Ask a question' }],
   [ROLE.QUESTION]: [TextLayout.type, { tag: 'h2' }],
   [ROLE.ANSWER]: TypewriterLayout.type,
@@ -36,17 +38,25 @@ const DEFAULT_LAYOUTS = Object.freeze({
 });
 
 const DEFAULT_TRACKERS = Object.freeze({
+  ...Workflow.DEFAULT_TRACKERS,
   [ROLE.SOURCES]: {},
   [ROLE.AFFILIATION]: {},
+  [ROLE.PRODUCTS]: {},
 });
 
 const DEFAULT_OPTIONS = Object.freeze({
+  ...Workflow.DEFAULT_OPTIONS,
   api: DEFAULT_API_OPTIONS,
   autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
 });
 
+const ROLES_OPTIONS = mergeRolesOptions(Workflow.ROLES_OPTIONS, {
+  main: ROLE.ANSWER,
+  members: Object.keys(DEFAULT_LAYOUTS),
+});
+
 export default class AnswerBasedWorkflow extends Workflow {
 
   // constructor //
@@ -59,12 +69,6 @@ export default class AnswerBasedWorkflow extends Workflow {
   _initActors(args) {
     super._initActors(args);
     this._feedback = new FeedbackActor(this._hub);
-    /*
-    this._autocomplete = new AutocompleteActor(this._hub, {
-      source: sources.api(this._client),
-      options: this._options,
-    });
-    */
   }
 
   _initSubscriptions(args) {
@@ -72,30 +76,49 @@ export default class AnswerBasedWorkflow extends Workflow {
     this._unsubscribes = [
       ...this._unsubscribes,
       this._hub.on(fields.query(), args => this._query(args)),
-      this._hub.on(fields.view(ROLE.ANSWER), data => this._onAnswerViewUpdate(data)),
       this._views.get(ROLE.ANSWER).on('citation-click', event => this._onCitationClick(event)),
     ];
   }
 
+  // configuration //
+  useLink(fn) {
+    if (typeof fn !== 'function' && fn !== false) {
+      throw new Error('useLink(fn) expects fn to be a function or false');
+    }
+    this._linkFn = fn;
+    return this;
+  }
+
   // lifecycle //
   restart() {
     // clear question id from previous session
     if (this._questionId) {
       this._questionId = undefined;
     }
-    // interrupt event
-    // TODO: move to workflow base
-    const { session, status, ongoing } = this._hub.states[fields.view(ROLE.ANSWER)] || {};
-    if (session && status !== STATUS.INITIAL && (status !== STATUS.READY || ongoing)) {
-      // it's interrupted by a new question
-      const state = Object.freeze({ session, status, ongoing });
-      this._emit('interrupt', state);
-      this._emit('finally', state);
-    }
     // restart
     super.restart();
   }
 
+  _emitInterruptEventIfNecessary() {
+    const state = this._hub.states[fields.view(this._roles.main)] || {};
+    if (state.session && state.status !== STATUS.INITIAL && (state.status !== STATUS.READY || state.ongoing)) {
+      // it's interrupted by a new question
+      this._emitLifecycleEvent('interrupt', state);
+      this._emitLifecycleEvent('finally', state);
+    }
+  }
+
+  _onMainViewUpdate(state) {
+    const { status } = state;
+    const done = status === STATUS.READY && !state.ongoing;
+    const erroneous = status === STATUS.ERRONEOUS;
+    const eventName = done ? 'done' : erroneous ? 'error' : status;
+    this._emitLifecycleEvent(eventName, state);
+    if (done || erroneous) {
+      this._emitLifecycleEvent('finally', state);
+    }
+  }
+
   // properties //
   get questionId() {
     return this._questionId;
@@ -130,53 +153,61 @@ export default class AnswerBasedWorkflow extends Workflow {
   }
 
   _query(args = {}) {
+    if (this._linkFn) {
+      this._submit(args);
+      return;
+    }
     // start a new session
     this.restart();
 
-    // keep track of question source on this session
-    const { session } = this;
-    session.meta.question_source = args.questionSource || ORGANIC_QUESTION_SOURCE; // might be null, not undefined
+    // keep track of question source on this session, for suggested questions interactions
+    this._writeQuestionSourceToSession(args);
 
     // build payload and trigger request
     const payload = this._buildPayload(args);
-    const event = mergeApiOptions(this._options.resolved.api, { payload, session });
-    this._request(event);
+    this._request({ payload });
   }
 
-  _request(event) {
-    this._hub.update(fields.request(), event);
+  _submit(args) {
+    if (!this._linkFn) {
+      return;
+    }
+    // TODO: we want a submit event, but only with linkFn
+    const url = this._linkFn(args.q);
+    window.open(url, '_blank');
   }
 
-  _buildPayload() {
-    throw new Error(`Not implemented`);
+  _writeQuestionSourceToSession(args) {
+    this.session.meta.question_source = args.qs || ORGANIC_QUESTION_SOURCE; // might be null, not undefined
   }
 
-  // autocomplete //
-  /*
-  updateCompletions(event) {
-    // TODO: verify
-    this._hub.update(fields.data(DATA_ASPECT.AUTOCOMPLETE), {
-      ...event,
-      source: 'manual',
-    });
-    return this;
+  _buildPayload() {
+    throw new Error(`Not implemented`);
   }
-  */
 
   // data //
-  _defaultProcessData(data) {
-    data = super._defaultProcessData(data);
-
-    // capture question ID and register at context
-    this._writeQuestionIdFromData(data);
+  _updateData(data) {
+    // if it's the head response, write question id and return
+    if (data.value && !data.value.answer_stage) {
+      this._handleHeadResponse(data);
+      return;
+    }
+    super._updateData(data);
 
     // update URL if autoQuery.updateUrl is not false
     this._updateUrlIfNecessary(data);
+  }
 
-    // affiliation
-    data = processAffiliationData(data);
+  _handleHeadResponse(data) {
+    // capture question ID and register at context
+    this._writeQuestionIdFromData(data);
+  }
 
-    return writeAnswerStageToMeta(data);
+  _defaultProcessData(data) {
+    data = super._defaultProcessData(data);
+    data = processAffiliationData(data);
+    data = writeAnswerStageToMeta(data);
+    return data;
   }
 
   _writeQuestionIdFromData({ value }) {
@@ -204,38 +235,32 @@ export default class AnswerBasedWorkflow extends Workflow {
   }
 
   // interactions //
-  _preprocessInteraction(payload) {
-    payload = super._preprocessInteraction(payload) || {};
-    const { context = {} } = payload;
-    const { custom_context = {} } = context;
-    let { questionId } = this;
-    return {
-      ...payload,
+  _defaultProcessInteraction(payload, args) {
+    payload = super._defaultProcessInteraction(payload, args);
+    payload = this._writeAskPropertiesToInteraction(payload, args);
+    return payload;
+  }
+
+  _writeAskPropertiesToInteraction(payload = {}, args) {
+    const question_source = this._getQuestionSourceFromViewState(args);
+    const question_id = this.questionId;
+    return mergeInteraction(payload, {
       context: {
-        ...context,
-        custom_context: trimObj({
-          question_id: questionId,
-          ...custom_context,
-        }),
+        custom_context: {
+          question_source,
+          question_id,
+        },
       },
-    };
+    });
   }
 
-  // handlers //
-  _onAnswerViewUpdate({ session, status, ongoing }) {
-    if (status === STATUS.INITIAL) {
-      return;
-    }
-    const done = status === STATUS.READY && !ongoing;
-    const erroneous = status === STATUS.ERRONEOUS;
-    const eventName = done ? 'done' : erroneous ? 'error' : status;
-    const state = Object.freeze({ session, status, ongoing });
-    this._emit(eventName, state);
-    if (done || erroneous) {
-      this._emit('finally', state);
-    }
+  _getQuestionSourceFromViewState(args) {
+    const { request } = this._hub.states[fields.view(args.role)] || {};
+    const { payload } = request || {};
+    return (payload && payload._meta && payload._meta.question_source) || undefined;
   }
 
+  // handlers //
   _onCitationClick({ index }) {
     const { value } = this.states[fields.data()] || {};
     const { sources } = value || {};
@@ -269,12 +294,11 @@ export default class AnswerBasedWorkflow extends Workflow {
 
 }
 
-// makeConfigurable(AnswerBasedWorkflow.prototype, ['autocomplete']);
-
 Object.assign(AnswerBasedWorkflow, {
   DEFAULT_API_OPTIONS,
   DEFAULT_AUTOCOMPLETE_OPTIONS,
   DEFAULT_LAYOUTS,
   DEFAULT_TRACKERS,
   DEFAULT_OPTIONS,
+  ROLES_OPTIONS,
 });