@miso.ai/client-sdk-ui 1.10.3-beta.0 → 1.10.4-beta.0

package/dist/cjs/layout/input/option-list.js

@@ -84,11 +84,12 @@ class OptionListLayout extends _template.default {
       proxyElement,
       hub
     } = view;
-    this._unsubscribes = [...this._unsubscribes, proxyElement.on('click', e => this._handleClick(e)), hub.on(_index.fields.suggestions(), () => this._handleInput())];
+    this._unsubscribes = [...this._unsubscribes, proxyElement.on('click', e => this._handleClick(e)), hub.on(_index.fields.suggestions(), () => this._handleInput()) // TODO: use data mapping
+    ];
   }
   _preprocess() {
     return super._preprocess({
-      state: this._view.hub.states[_index.fields.suggestions()]
+      state: this._view.hub.states[_index.fields.suggestions()] // TODO: use data mapping
     });
   }
   _render(element, data, controls) {
@@ -139,13 +140,12 @@ class OptionListLayout extends _template.default {
       return;
     }
     // TODO: q -> value
-    this._view.hub.trigger(_index.fields.query(), {
+    this._view.hub.update(_index.fields.query(), {
       q: value
     });
   }
   destroy() {
     this._destroyTrackable();
-    this._view = undefined;
     super.destroy();
   }
 }

package/dist/cjs/layout/input/search-box.js

@@ -83,7 +83,7 @@ function product(layout, _ref) {
   const {
     templates
   } = layout;
-  const [openTag, closeTag] = _templates.helpers.tagPair(layout, product, {
+  const [openTag, closeTag] = templates.helpers.tagPair(layout, product, {
     role: false
   });
   return [openTag, templates.imageBlock(layout, product), templates.productInfoBlock(layout, product), closeTag].join('');
@@ -118,8 +118,7 @@ const DEFAULT_TEMPLATES = Object.freeze({
   query,
   product,
   imageBlock: _templates.imageBlock,
-  productInfoBlock: _templates.productInfoBlock,
-  helpers: _templates.helpers
+  productInfoBlock: _templates.productInfoBlock
 });
 const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
   className: DEFAULT_AUTOCOMPLETE_CLASSNAME,
@@ -162,10 +161,9 @@ class SearchBoxLayout extends _template.default {
       proxyElement,
       hub
     } = view;
-    this._unsubscribes = [...this._unsubscribes, proxyElement.on('input', e => this._syncInput(e)), proxyElement.on('keydown', e => this._handleKeyDown(e)), proxyElement.on('click', e => this._handleClick(e)), proxyElement.on('focusin', e => this._handleFocusIn(e)), proxyElement.on('focusout', e => this._handleFocusOut(e))];
-    this._unsubscribes.push(hub.on(_index.fields.completions(), () => view.refresh({
+    this._unsubscribes = [...this._unsubscribes, proxyElement.on('input', e => this._syncInput(e)), proxyElement.on('keydown', e => this._handleKeyDown(e)), proxyElement.on('click', e => this._handleClick(e)), proxyElement.on('focusin', e => this._handleFocusIn(e)), proxyElement.on('focusout', e => this._handleFocusOut(e)), hub.on(_index.fields.data(_constants.DATA_ASPECT.AUTOCOMPLETE), () => view.refresh({
       force: true
-    })));
+    }))];
   }
   focus() {
     // TODO: support blur as well
@@ -197,7 +195,7 @@ class SearchBoxLayout extends _template.default {
       state
     });
     return Object.assign({}, state, {
-      completions: this._view.hub.states[_index.fields.completions()]
+      completions: this._view.hub.states[_index.fields.data(_constants.DATA_ASPECT.AUTOCOMPLETE)]
     });
   }
   _render(element, data, controls) {
@@ -374,7 +372,7 @@ class SearchBoxLayout extends _template.default {
     }
     this.close();
     // TODO: q -> value
-    this._view.hub.trigger(_index.fields.query(), {
+    this._view.hub.update(_index.fields.query(), {
       q: value
     });
     this._trackSubmit(value);

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

@@ -95,8 +95,7 @@ const DEFAULT_TEMPLATES = Object.freeze({
   ctaBlock: _templates.ctaBlock,
   cta: _templates.cta,
   imageBlock: _templates.imageBlock,
-  indexBlock: _templates.indexBlock,
-  helpers: _templates.helpers
+  indexBlock: _templates.indexBlock
 });
 class CollectionLayout extends _template.default {
   static get category() {

package/dist/cjs/layout/raf.js

@@ -126,6 +126,7 @@ class RafLayout {
       unsubscribe();
     }
     this._unsubscribes = [];
+    this._view = undefined;
     this._element = undefined;
     this._notifyUpdate = undefined;
     this._pending = undefined;

package/dist/cjs/layout/template.js

@@ -21,7 +21,9 @@ class TemplateBasedLayout extends _raf.default {
     super(options);
     (0, _commons.defineValues)(this, {
       className,
-      templates: Object.assign({}, (0, _templates.requiresImplementation)('root'), templates)
+      templates: Object.assign({}, (0, _templates.requiresImplementation)('root'), templates, {
+        helpers: _templates.helpers
+      })
     });
   }
   _preprocess(_ref2) {

package/dist/cjs/layout/templates.js

@@ -263,6 +263,7 @@ const DEFAULT_DATE_OPTIONS = Object.freeze({
   month: 'short',
   day: 'numeric'
 });
+const DEFAULT_NUMBER_OPTIONS = 'en-US';
 function formatDate(date) {
   let fn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_OPTIONS;
   switch (typeof fn) {
@@ -276,6 +277,19 @@ function formatDate(date) {
       throw new Error(`Invalid date format: ${fn}`);
   }
 }
+function formatNumber(number) {
+  let fn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_NUMBER_OPTIONS;
+  switch (typeof fn) {
+    case 'function':
+      return fn(number);
+    case 'string':
+      return new Intl.NumberFormat(fn).format(number);
+    case 'object':
+      return new Intl.NumberFormat(fn.locale || DEFAULT_NUMBER_OPTIONS.locale, fn).format(number);
+    default:
+      throw new Error(`Invalid number format: ${fn}`);
+  }
+}
 function asFunction() {
   let template = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return typeof template === 'function' ? template : () => template;
@@ -283,6 +297,7 @@ function asFunction() {
 const helpers = exports.helpers = Object.freeze({
   tagPair,
   formatDate,
+  formatNumber,
   escapeHtml: _commons.escapeHtml,
   asFunction
 });

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

@@ -12,16 +12,49 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 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; }
 const TYPE = 'text';
 const DEFAULT_CLASSNAME = 'miso-text';
-function root(layout, state) {
+function root(layout, _ref) {
+  let {
+    value
+  } = _ref;
   const {
     className,
     role,
     options: {
+      raw = false,
       tag
     }
   } = layout;
   const roleAttr = role ? `data-role="${role}"` : '';
-  return `<${tag} class="${className}" ${roleAttr}>${(0, _commons.escapeHtml)(state.value || '')}</${tag}>`;
+  const content = value !== undefined ? (0, _commons.escapeHtml)(getFormatFunction(layout)(value)) : '';
+  return raw ? content : `<${tag} class="${className}" ${roleAttr}>${content}</${tag}>`;
+}
+function getFormatFunction(layout) {
+  let {
+    format
+  } = layout.options;
+  const {
+    formatDate,
+    formatNumber
+  } = layout.templates.helpers;
+  if (!format) {
+    return v => `${v}`;
+  }
+  switch (typeof format) {
+    case 'function':
+      return format;
+    case 'string':
+      format = [format];
+      break;
+  }
+  let [type, args] = format;
+  switch (type) {
+    case 'date':
+      return v => formatDate(v, args);
+    case 'number':
+      return v => formatNumber(v, args);
+    default:
+      return v => `${v}`;
+  }
 }
 const DEFAULT_TEMPLATES = Object.freeze({
   root
@@ -40,13 +73,13 @@ class TextLayout extends _template.default {
     return DEFAULT_CLASSNAME;
   }
   constructor() {
-    let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let {
         className = DEFAULT_CLASSNAME,
         templates,
         tag = 'p'
-      } = _ref,
-      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+      } = _ref2,
+      options = _objectWithoutPropertiesLoose(_ref2, _excluded);
     super(Object.assign({
       className,
       templates: Object.assign({}, DEFAULT_TEMPLATES, templates),

package/dist/cjs/layout/trackable.js

@@ -5,27 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TrackableMixin = void 0;
 exports.makeTrackable = makeTrackable;
+var _commons = require("@miso.ai/commons");
 var _bindings = _interopRequireDefault(require("../util/bindings.js"));
 var _viewables = _interopRequireDefault(require("../util/viewables.js"));
 var _trackers = require("../util/trackers.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function makeTrackable(prototype) {
-  _mixin(prototype, TrackableMixin.prototype);
-}
-function _mixin(target, source) {
-  const descriptors = Object.getOwnPropertyDescriptors(source);
-  for (const key in descriptors) {
-    if (key === 'constructor') {
-      continue;
-    }
-    const {
-      value
-    } = descriptors[key];
-    if (target[key] === undefined && typeof value === 'function') {
-      target[key] = value;
-    }
-    // TODO: getter, setter
-  }
+  (0, _commons.mixin)(prototype, TrackableMixin.prototype);
 }
 class TrackableMixin {
   _initTrackable() {

package/dist/cjs/plugin.js

@@ -10,7 +10,7 @@ var _index2 = require("./combo/index.js");
 var _layouts = _interopRequireDefault(require("./layouts.js"));
 var elements = _interopRequireWildcard(require("./element/index.js"));
 var layouts = _interopRequireWildcard(require("./layout/index.js"));
-var sources = _interopRequireWildcard(require("./source/index.js"));
+var sources = _interopRequireWildcard(require("./source.js"));
 var defaults = _interopRequireWildcard(require("./defaults/index.js"));
 var _styles = require("./styles.js");
 var _misoContainer = _interopRequireDefault(require("./element/container/miso-container.js"));
@@ -164,6 +164,9 @@ class Ui {
   get ask() {
     return this.asks.root;
   }
+  get hybridSearch() {
+    return this._hybridSearch || (this._hybridSearch = new _index.HybridSearch(this._plugin, this._client));
+  }
   get explore() {
     return this._explore || (this._explore = new _index.Explore(this._plugin, this._client));
   }

package/dist/cjs/{source/index.js → source.js}

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.api = api;
 var _commons = require("@miso.ai/commons");
-//export { default as api } from './api.js';
-
 function api(client) {
   // TODO: send uuid & unit id
   return async _ref => {
@@ -16,8 +14,13 @@ function api(client) {
       payload,
       options
     } = _ref;
-    if (group === _commons.API.GROUP.ASK && name === _commons.API.NAME.QUESTIONS) {
-      return client.api.ask.questions(payload, options);
+    if (group === _commons.API.GROUP.ASK) {
+      switch (name) {
+        case _commons.API.NAME.QUESTIONS:
+          return client.api.ask.questions(payload, options);
+        case _commons.API.NAME.SEARCH:
+          return client.api.ask.search(payload, options);
+      }
     }
     // because name is in snake case
     return client.api[group]._run(name, payload, options);

package/dist/cjs/util/bindings.js

@@ -50,6 +50,9 @@ class Bindings {
   get(element) {
     return this._e2b.get(element) || undefined;
   }
+  find(key) {
+    return this._k2b.get(key) || undefined;
+  }
   update(keys, values, elements) {
     const newTuple = tuple(keys, values, elements);
     const oldTuple = {

package/dist/cjs/version.js

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

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

@@ -0,0 +1,335 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _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({
+  group: _commons.API.GROUP.ASK,
+  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: {
+    group: _commons.API.GROUP.ASK,
+    name: _commons.API.NAME.AUTOCOMPLETE
+  }
+});
+const DEFAULT_LAYOUTS = Object.freeze({
+  [_constants.ROLE.QUERY]: [_index2.SearchBoxLayout.type, {
+    placeholder: 'Ask a question'
+  }],
+  [_constants.ROLE.QUESTION]: [_index2.TextLayout.type, {
+    tag: 'h2'
+  }],
+  [_constants.ROLE.ANSWER]: _index2.TypewriterLayout.type,
+  [_constants.ROLE.FEEDBACK]: _index2.FeedbackLayout.type,
+  [_constants.ROLE.SOURCES]: [_index2.ListLayout.type, {
+    incremental: true,
+    itemType: 'article',
+    templates: {
+      ordered: true
+    }
+  }],
+  [_constants.ROLE.AFFILIATION]: [_index2.AffiliationLayout.type, {
+    incremental: true,
+    itemType: 'affiliation',
+    link: {
+      rel: 'noopener nofollow'
+    }
+  }]
+});
+const DEFAULT_TRACKERS = Object.freeze({
+  [_constants.ROLE.SOURCES]: {},
+  [_constants.ROLE.AFFILIATION]: {}
+});
+const DEFAULT_OPTIONS = Object.freeze({
+  api: DEFAULT_API_OPTIONS,
+  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
+  layouts: DEFAULT_LAYOUTS,
+  trackers: DEFAULT_TRACKERS
+});
+class AnswerBasedWorkflow extends _base.default {
+  // constructor //
+  _initProperties(args) {
+    super._initProperties(args);
+    this._questionId = undefined;
+    this._autoQuery = false;
+  }
+  _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))];
+  }
+
+  // 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[_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();
+  }
+
+  // properties //
+  get questionId() {
+    return this._questionId;
+  }
+
+  // query //
+  autoQuery() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      setValue = true,
+      focus = true
+    } = this._autoQuery = options;
+    const searchParams = new URLSearchParams(window.location.search);
+    const q = searchParams.get('q');
+    const qs = searchParams.get('qs');
+    const {
+      layout
+    } = this._views.get(_constants.ROLE.QUERY);
+    if (layout) {
+      if (q && setValue) {
+        layout.value = q;
+      }
+      if (!q && focus) {
+        layout.focus();
+      }
+    }
+    if (q) {
+      this.query({
+        q,
+        qs
+      });
+    }
+  }
+  query(args) {
+    // TODO: also accept "question", "questionSource"?
+    if (!args.q) {
+      throw new Error(`q is required in query() call`);
+    }
+    this._hub.update(_index.fields.query(), args);
+  }
+  _query() {
+    let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    // 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
+
+    // build payload and trigger request
+    const payload = this._buildPayload(args);
+    const event = (0, _options.mergeApiOptions)(this._options.resolved.api, {
+      payload,
+      session
+    });
+    this._request(event);
+  }
+  _request(event) {
+    this._hub.update(_index.fields.request(), event);
+  }
+  _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);
+
+    // update URL if autoQuery.updateUrl is not false
+    this._updateUrlIfNecessary(data);
+
+    // affiliation
+    data = (0, _index3.processData)(data);
+    return (0, _processors.writeAnswerStageToMeta)(data);
+  }
+  _writeQuestionIdFromData(_ref) {
+    let {
+      value
+    } = _ref;
+    if (!value) {
+      return;
+    }
+    const {
+      question_id: questionId
+    } = value;
+    this._writeQuestionId(questionId);
+  }
+  _updateUrlIfNecessary(_ref2) {
+    let {
+      value,
+      request
+    } = _ref2;
+    if (!value || !this._autoQuery || this._autoQuery.updateUrl === false) {
+      // explicitly false
+      return;
+    }
+    const {
+      question
+    } = value;
+    const organic = request && request.payload && request.payload._meta && request.payload._meta.question_source === _constants.ORGANIC_QUESTION_SOURCE;
+    const url = new URL(window.location);
+    const currentQuestion = url.searchParams.get('q');
+    // TODO: review this, handle &qs=
+    if (question !== currentQuestion && (!organic || this._autoQuery.updateUrl === true)) {
+      url.searchParams.set('q', question);
+      window.history.replaceState({}, '', url);
+    }
+  }
+
+  // interactions //
+  _preprocessInteraction(payload) {
+    payload = super._preprocessInteraction(payload) || {};
+    const {
+      context = {}
+    } = payload;
+    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))
+      })
+    });
+  }
+
+  // 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) {
+    let {
+      index
+    } = _ref4;
+    const {
+      value
+    } = this.states[_index.fields.data()] || {};
+    const {
+      sources
+    } = value || {};
+    // index is 1-based
+    const source = sources && sources[index - 1];
+    if (!source || !source.product_id) {
+      return;
+    }
+    // TODO: should we track impression as well?
+    this._trackers.sources.click([source.product_id], {
+      manual: false
+    });
+  }
+
+  // helpers //
+  _writeQuestionId(questionId) {
+    if (!this._questionId && questionId) {
+      this._questionId = questionId;
+    }
+  }
+  _clearQuestionId() {
+    // clear question id from previous session
+    this._questionId = undefined;
+  }
+
+  // destroy //
+  _destroy(options) {
+    this._feedback._destroy();
+    // this._autocomplete._destroy();
+    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
+});