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

package/dist/cjs/layout/list/carousel.js

@@ -40,9 +40,6 @@ function chevron(layout) {
   return `<svg class="${className}__control-button" shape-rendering="geometricPrecision" stroke="currentColor" stroke-width="24" fill="#fff" viewBox="-30 -30 358 572"><path d="M285.77 441c16.24 16.17 16.32 42.46.15 58.7-16.16 16.24-42.45 16.32-58.69.16l-215-214.47c-16.24-16.16-16.32-42.45-.15-58.69L227.23 12.08c16.24-16.17 42.53-16.09 58.69.15 16.17 16.24 16.09 42.54-.15 58.7l-185.5 185.04L285.77 441z"/></svg>`;
 }
 class CarouselLayout extends _collection.default {
-  static get category() {
-    return super.category;
-  }
   static get type() {
     return TYPE;
   }

package/dist/cjs/layout/list/collection.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 var _trackable = require("../trackable.js");
+var _triggerable = require("../triggerable.js");
 var _templates = require("../templates.js");
 const _excluded = ["templates", "itemType"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -21,7 +22,7 @@ function root(layout, state) {
     status
   } = state;
   const roleAttr = role ? `data-role="${role}"` : '';
-  return `<div class="${className} ${status}" ${roleAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  return `<div class="${className} ${status}" ${roleAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loadingBar(layout, state)}</div>`;
 }
 function ready(layout, state) {
   const {
@@ -31,6 +32,7 @@ function ready(layout, state) {
 
   // TODO: handle categories, attributes, etc. by introducing sublayout
   if (values && values.length > 0 || state.ongoing) {
+    // TODO: ad-hoc ongoing?
     return templates.list(layout, state, values);
   } else {
     return templates.empty(layout, state);
@@ -70,6 +72,18 @@ 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
 
@@ -95,12 +109,11 @@ const DEFAULT_TEMPLATES = Object.freeze({
   ctaBlock: _templates.ctaBlock,
   cta: _templates.cta,
   imageBlock: _templates.imageBlock,
-  indexBlock: _templates.indexBlock
+  indexBlock: _templates.indexBlock,
+  trigger,
+  loadingBar
 });
 class CollectionLayout extends _template.default {
-  static get category() {
-    return _constants.LAYOUT_CATEGORY.LIST;
-  }
   static get defaultTemplates() {
     return DEFAULT_TEMPLATES;
   }
@@ -115,6 +128,7 @@ class CollectionLayout extends _template.default {
       itemType
     }, options));
     this._initTrackable();
+    this._initTriggerable();
   }
   initialize(view) {
     this._unsubscribes.push(view.proxyElement.on('click', this._onClick.bind(this)));
@@ -133,7 +147,7 @@ class CollectionLayout extends _template.default {
   }
   _shallRenderIncrementally(state, rendered) {
     // TODO: compare item ids as well
-    return this.options.incremental && rendered && rendered.value && rendered.value.length > 0 && state.status === _constants.STATUS.READY && rendered.status === _constants.STATUS.READY && state.session && rendered.session && state.session.id === rendered.session.id;
+    return this.options.incremental && rendered && rendered.value && rendered.value.length > 0 && state.value && state.value.length >= rendered.value.length && state.session && rendered.session && state.session.id === rendered.session.id;
   }
   _html(state, rendered, incremental) {
     if (incremental) {
@@ -170,9 +184,11 @@ class CollectionLayout extends _template.default {
   }
   _afterRender(element, state) {
     this._syncBindings(element, state);
+    this._syncTrigger(element, state);
   }
   _unrender() {
     this._clearBindings();
+    this._untrackTrigger();
   }
   _getItems(state) {
     return state.value;
@@ -212,9 +228,11 @@ class CollectionLayout extends _template.default {
   }
   destroy() {
     this._destroyTrackable();
+    this._destroyTriggerable();
     this._view = undefined;
     super.destroy();
   }
 }
 exports.default = CollectionLayout;
-(0, _trackable.makeTrackable)(CollectionLayout.prototype);
+(0, _trackable.makeTrackable)(CollectionLayout.prototype);
+(0, _triggerable.makeTriggerable)(CollectionLayout.prototype);

package/dist/cjs/layout/list/list.js

@@ -11,9 +11,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 const TYPE = 'list';
 const DEFAULT_CLASSNAME = 'miso-list';
 class ListLayout extends _collection.default {
-  static get category() {
-    return super.category;
-  }
   static get type() {
     return TYPE;
   }

package/dist/cjs/layout/radio/feedback.js

@@ -61,9 +61,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
   text
 });
 class FeedbackLayout extends _radio.default {
-  static get category() {
-    return super.category;
-  }
   static get type() {
     return TYPE;
   }

package/dist/cjs/layout/radio/radio.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 var _templates = require("../templates.js");
 const _excluded = ["className", "templates", "field", "defaultValue"];
@@ -40,9 +39,6 @@ const DEFAULT_TEMPLATES = Object.freeze(Object.assign({}, (0, _templates.require
   option
 }));
 class RadioLayout extends _template.default {
-  static get category() {
-    return _constants.LAYOUT_CATEGORY.RADIO;
-  }
   static get defaultTemplates() {
     return DEFAULT_TEMPLATES;
   }

package/dist/cjs/layout/raf.js

@@ -5,19 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-const _excluded = ["role", "workflow"];
+const _excluded = ["role", "workflow", "workflowOptions"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 class RafLayout {
   constructor() {
     let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let {
         role,
-        workflow
+        workflow,
+        workflowOptions
       } = _ref,
       options = _objectWithoutPropertiesLoose(_ref, _excluded);
     (0, _commons.defineValues)(this, {
       role,
       workflow,
+      workflowOptions,
       options
     });
     this._unsubscribes = [];

package/dist/cjs/layout/text/text.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 const _excluded = ["className", "templates", "tag"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -60,9 +59,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
   root
 });
 class TextLayout extends _template.default {
-  static get category() {
-    return _constants.LAYOUT_CATEGORY.TEXT;
-  }
   static get type() {
     return TYPE;
   }

package/dist/cjs/layout/text/typewriter/index.js

@@ -15,9 +15,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 const TYPE = 'typewriter';
 const DEFAULT_CLASSNAME = 'miso-typewriter';
 class TypewriterLayout extends _progressive.default {
-  static get category() {
-    return _constants.LAYOUT_CATEGORY.TEXT;
-  }
   static get type() {
     return TYPE;
   }

package/dist/cjs/layout/triggerable.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TriggerableMixin = void 0;
+exports.makeTriggerable = makeTriggerable;
+var _commons = require("@miso.ai/commons");
+var _constants = require("../constants.js");
+var _index = require("../actor/index.js");
+function makeTriggerable(prototype) {
+  (0, _commons.mixin)(prototype, TriggerableMixin.prototype);
+}
+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 === _constants.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 (0, _commons.viewable)(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(_index.fields.more());
+  }
+  _untrackTrigger() {
+    if (!this._trigger) {
+      return;
+    }
+    this._trigger.ac && this._trigger.ac.abort();
+    this._trigger = undefined;
+  }
+  _destroyTriggerable() {
+    this._untrackTrigger();
+  }
+}
+exports.TriggerableMixin = TriggerableMixin;

package/dist/cjs/util/states.js

@@ -15,21 +15,6 @@ const {
   UNTRACKED,
   TRIGGERED
 } = _constants.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/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '1.11.0-beta.1';
+var _default = exports.default = '1.11.0-beta.10';

package/dist/cjs/workflow/answer-based.js

@@ -6,24 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
 var _base = _interopRequireDefault(require("./base.js"));
-var _options = require("./options.js");
 var _index = require("../actor/index.js");
 var _constants = require("../constants.js");
 var _index2 = require("../layout/index.js");
 var _index3 = require("../affiliation/index.js");
+var _options = require("./options.js");
 var _processors = require("./processors.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// import * as sources from '../source.js';
-
-const DEFAULT_API_OPTIONS = Object.freeze({
+const DEFAULT_API_OPTIONS = Object.freeze(Object.assign({}, _base.default.DEFAULT_API_OPTIONS, {
   group: _commons.API.GROUP.ASK,
-  payload: {
+  payload: Object.assign({}, _base.default.DEFAULT_API_OPTIONS.payload, {
     source_fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at'],
     cite_link: 1,
     cite_start: '[',
     cite_end: ']'
-  }
-});
+  })
+}));
 const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
   actor: false,
   api: {
@@ -31,7 +29,7 @@ const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
     name: _commons.API.NAME.AUTOCOMPLETE
   }
 });
-const DEFAULT_LAYOUTS = Object.freeze({
+const DEFAULT_LAYOUTS = Object.freeze(Object.assign({}, _base.default.DEFAULT_LAYOUTS, {
   [_constants.ROLE.QUERY]: [_index2.SearchBoxLayout.type, {
     placeholder: 'Ask a question'
   }],
@@ -54,16 +52,21 @@ const DEFAULT_LAYOUTS = Object.freeze({
       rel: 'noopener nofollow'
     }
   }]
-});
-const DEFAULT_TRACKERS = Object.freeze({
+}));
+const DEFAULT_TRACKERS = Object.freeze(Object.assign({}, _base.default.DEFAULT_TRACKERS, {
   [_constants.ROLE.SOURCES]: {},
-  [_constants.ROLE.AFFILIATION]: {}
-});
-const DEFAULT_OPTIONS = Object.freeze({
+  [_constants.ROLE.AFFILIATION]: {},
+  [_constants.ROLE.PRODUCTS]: {}
+}));
+const DEFAULT_OPTIONS = Object.freeze(Object.assign({}, _base.default.DEFAULT_OPTIONS, {
   api: DEFAULT_API_OPTIONS,
   autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS
+}));
+const ROLES_OPTIONS = (0, _options.mergeRolesOptions)(_base.default.ROLES_OPTIONS, {
+  main: _constants.ROLE.ANSWER,
+  members: Object.keys(DEFAULT_LAYOUTS)
 });
 class AnswerBasedWorkflow extends _base.default {
   // constructor //
@@ -75,16 +78,19 @@ class AnswerBasedWorkflow extends _base.default {
   _initActors(args) {
     super._initActors(args);
     this._feedback = new _index.FeedbackActor(this._hub);
-    /*
-    this._autocomplete = new AutocompleteActor(this._hub, {
-      source: sources.api(this._client),
-      options: this._options,
-    });
-    */
   }
   _initSubscriptions(args) {
     super._initSubscriptions(args);
-    this._unsubscribes = [...this._unsubscribes, this._hub.on(_index.fields.query(), args => this._query(args)), this._hub.on(_index.fields.view(_constants.ROLE.ANSWER), data => this._onAnswerViewUpdate(data)), this._views.get(_constants.ROLE.ANSWER).on('citation-click', event => this._onCitationClick(event))];
+    this._unsubscribes = [...this._unsubscribes, this._hub.on(_index.fields.query(), args => this._query(args)), this._views.get(_constants.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 //
@@ -93,26 +99,29 @@ class AnswerBasedWorkflow extends _base.default {
     if (this._questionId) {
       this._questionId = undefined;
     }
-    // interrupt event
-    // TODO: move to workflow base
-    const {
-      session,
-      status,
-      ongoing
-    } = this._hub.states[_index.fields.view(_constants.ROLE.ANSWER)] || {};
-    if (session && status !== _constants.STATUS.INITIAL && (status !== _constants.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[_index.fields.view(this._roles.main)] || {};
+    if (state.session && state.status !== _constants.STATUS.INITIAL && (state.status !== _constants.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 === _constants.STATUS.READY && !state.ongoing;
+    const erroneous = status === _constants.STATUS.ERRONEOUS;
+    const eventName = done ? 'done' : erroneous ? 'error' : status;
+    this._emitLifecycleEvent(eventName, state);
+    if (done || erroneous) {
+      this._emitLifecycleEvent('finally', state);
+    }
+  }
 
   // properties //
   get questionId() {
@@ -156,55 +165,58 @@ class AnswerBasedWorkflow extends _base.default {
   }
   _query() {
     let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    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 || _constants.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 = (0, _options.mergeApiOptions)(this._options.resolved.api, {
-      payload,
-      session
+    this._request({
+      payload
     });
-    this._request(event);
   }
-  _request(event) {
-    this._hub.update(_index.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');
+  }
+  _writeQuestionSourceToSession(args) {
+    this.session.meta.question_source = args.qs || _constants.ORGANIC_QUESTION_SOURCE; // might be null, not undefined
   }
   _buildPayload() {
     throw new Error(`Not implemented`);
   }
 
-  // autocomplete //
-  /*
-  updateCompletions(event) {
-    // TODO: verify
-    this._hub.update(fields.data(DATA_ASPECT.AUTOCOMPLETE), {
-      ...event,
-      source: 'manual',
-    });
-    return this;
-  }
-  */
-
   // 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
+  }
+  _handleHeadResponse(data) {
+    // capture question ID and register at context
+    this._writeQuestionIdFromData(data);
+  }
+  _defaultProcessData(data) {
+    data = super._defaultProcessData(data);
     data = (0, _index3.processData)(data);
-    return (0, _processors.writeAnswerStageToMeta)(data);
+    data = (0, _processors.writeAnswerStageToMeta)(data);
+    return data;
   }
   _writeQuestionIdFromData(_ref) {
     let {
@@ -241,53 +253,40 @@ class AnswerBasedWorkflow extends _base.default {
   }
 
   // interactions //
-  _preprocessInteraction(payload) {
-    payload = super._preprocessInteraction(payload) || {};
+  _defaultProcessInteraction(payload, args) {
+    payload = super._defaultProcessInteraction(payload, args);
+    payload = this._writeAskPropertiesToInteraction(payload, args);
+    return payload;
+  }
+  _writeAskPropertiesToInteraction() {
+    let payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let args = arguments.length > 1 ? arguments[1] : undefined;
+    const question_source = this._getQuestionSourceFromViewState(args);
+    const question_id = this.questionId;
+    return (0, _processors.mergeInteraction)(payload, {
+      context: {
+        custom_context: {
+          question_source,
+          question_id
+        }
+      }
+    });
+  }
+  _getQuestionSourceFromViewState(args) {
     const {
-      context = {}
-    } = payload;
+      request
+    } = this._hub.states[_index.fields.view(args.role)] || {};
     const {
-      custom_context = {}
-    } = context;
-    let {
-      questionId
-    } = this;
-    return Object.assign({}, payload, {
-      context: Object.assign({}, context, {
-        custom_context: (0, _commons.trimObj)(Object.assign({
-          question_id: questionId
-        }, custom_context))
-      })
-    });
+      payload
+    } = request || {};
+    return payload && payload._meta && payload._meta.question_source || undefined;
   }
 
   // handlers //
-  _onAnswerViewUpdate(_ref3) {
-    let {
-      session,
-      status,
-      ongoing
-    } = _ref3;
-    if (status === _constants.STATUS.INITIAL) {
-      return;
-    }
-    const done = status === _constants.STATUS.READY && !ongoing;
-    const erroneous = status === _constants.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);
-    }
-  }
-  _onCitationClick(_ref4) {
+  _onCitationClick(_ref3) {
     let {
       index
-    } = _ref4;
+    } = _ref3;
     const {
       value
     } = this.states[_index.fields.data()] || {};
@@ -323,13 +322,12 @@ class AnswerBasedWorkflow extends _base.default {
     super._destroy(options);
   }
 }
-
-// makeConfigurable(AnswerBasedWorkflow.prototype, ['autocomplete']);
 exports.default = AnswerBasedWorkflow;
 Object.assign(AnswerBasedWorkflow, {
   DEFAULT_API_OPTIONS,
   DEFAULT_AUTOCOMPLETE_OPTIONS,
   DEFAULT_LAYOUTS,
   DEFAULT_TRACKERS,
-  DEFAULT_OPTIONS
+  DEFAULT_OPTIONS,
+  ROLES_OPTIONS
 });