@miso.ai/client-sdk-ui 1.13.0 → 1.13.1-beta.1

package/dist/cjs/actor/tracker.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
 var fields = _interopRequireWildcard(require("./fields.js"));
-var _states = _interopRequireDefault(require("../util/states.js"));
+var _trackerStates = _interopRequireDefault(require("./tracker-states.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // a dummy item array for manipulating deduplication
@@ -23,7 +23,7 @@ class Tracker {
     this._options = options;
     // TODO: know item type
 
-    this._states = new _states.default(this._getSessionId());
+    this._states = new _trackerStates.default(this._getSessionId());
   }
   get options() {
     return typeof this._options === 'function' ? this._options() : this._options;
@@ -70,7 +70,7 @@ class Tracker {
       return;
     }
     if (!this._states || sessionId !== this._states.sessionId) {
-      this._states = new _states.default(sessionId);
+      this._states = new _trackerStates.default(sessionId);
     }
   }
   _getSessionId() {

package/dist/cjs/actor/view.js

@@ -12,6 +12,8 @@ const _excluded = ["value", "error", "status", "meta"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+// TODO: browser dependency on syncSize
+
 function statesEqual(a, b) {
   return a === b || a && b && a.status === b.status && a.error === b.error && a.value === b.value &&
   // skip deep equals

package/dist/cjs/actor/views.js

@@ -33,9 +33,7 @@ class ViewsActor {
     (0, _commons.defineValues)(this, {
       interface: new Views(this)
     });
-    const syncSize = () => this.syncSize();
-    window.addEventListener('resize', syncSize);
-    this._unsubscribes = [() => window.removeEventListener('resize', syncSize), hub.on(fields.data(), data => this.refresh({
+    this._unsubscribes = [onResize(this.syncSize.bind(this)), hub.on(fields.data(), data => this.refresh({
       data
     })), options.on('layouts', () => this._syncLayouts())];
     this._syncLayouts();
@@ -201,4 +199,11 @@ class Views {
   get all() {
     return this._actor.views.map(view => view.interface);
   }
+}
+function onResize(callback) {
+  if (typeof window === 'undefined') {
+    return () => {};
+  }
+  window.addEventListener('resize', callback);
+  return () => window.removeEventListener('resize', callback);
 }

package/dist/cjs/layout/input/facets.js

@@ -34,7 +34,7 @@ function facets(layout, state) {
   return Object.keys(facet_fields).map(field => templates.facet(layout, {
     field,
     entries: facet_fields[field]
-  }, state));
+  }, state)).join('');
 }
 function facet(layout, facet, state) {
   const {

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

@@ -420,17 +420,22 @@ class Context {
     let index = 0;
     const data = this._data = new Map();
     const items = [];
-    for (const field in completions) {
-      for (const item of completions[field]) {
-        if (item.product && !item.product.url) {
-          continue; // product without URL is not clickable
-        }
-        item._index = index;
+    for (let [field, item] of iterateCompletionItems(completions)) {
+      if (typeof item === 'string') {
+        item = {
+          text: item
+        };
+      }
+      if (item.product && !item.product.url) {
+        continue; // product without URL is not clickable
+      }
+      item._index = index;
+      if (field) {
         item._field = field;
-        data.set(index, item);
-        items.push(item);
-        index++;
       }
+      data.set(index, item);
+      items.push(item);
+      index++;
     }
     return items;
   }
@@ -455,4 +460,17 @@ class Context {
   _get(role) {
     return !this._element ? undefined : this._cache[role] || (this._cache[role] = this._element.querySelector(`[data-role="${role}"]`));
   }
+}
+function* iterateCompletionItems(completions) {
+  if (Array.isArray(completions)) {
+    for (const item of completions) {
+      yield [undefined, item];
+    }
+  } else {
+    for (const field in completions) {
+      for (const item of completions[field]) {
+        yield [field, item];
+      }
+    }
+  }
 }

package/dist/cjs/plugin.js

@@ -17,7 +17,7 @@ var _styles = require("./styles.js");
 var _misoContainer = _interopRequireDefault(require("./element/container/miso-container.js"));
 var _misoContext = _interopRequireDefault(require("./element/context/miso-context.js"));
 var _misoCombo = _interopRequireDefault(require("./element/combo/miso-combo.js"));
-const _excluded = ["containers", "roles", "combos", "contexts"];
+const _excluded = ["containers", "roles", "contexts", "combos"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -35,14 +35,19 @@ class UiPlugin extends _commons.Component {
     this._extensions = new WeakMap();
     this._ready = new _commons.Resolution();
   }
-  async install(MisoClient, context) {
-    context.addSubtree(this);
+  async install(MisoClient, {
+    addSubtree,
+    addExtensionPoints
+  }) {
+    addSubtree(this);
     MisoClient.on('create', this._injectClient.bind(this));
+
+    // the UI interface for MisoClient
     const ui = {
       defaults,
       traits
     };
-    (0, _commons.delegateGetters)(ui, this, ['layouts', 'combo', 'ready']);
+    (0, _commons.delegateGetters)(ui, this, ['layouts', 'ready']);
     (0, _commons.defineValues)(this, {
       MisoClient
     });
@@ -50,40 +55,45 @@ class UiPlugin extends _commons.Component {
       ui
     });
 
-    // combo
-    this.combo = new Combo(this, MisoClient);
+    // the plugin context extension
+    const uiContext = createUiPluginContext(this, ui, MisoClient);
+    const {
+      addElementClasses,
+      addLayoutClasses,
+      addInterface
+    } = uiContext;
+    addExtensionPoints({
+      ui: uiContext
+    });
 
     // layouts
     const LayoutClasses = Object.values(layouts).filter(LayoutClass => LayoutClass.type);
-    for (const LayoutClass of LayoutClasses) {
-      LayoutClass.MisoClient = MisoClient; // TODO: find better way
-    }
-    for (const LayoutClass of LayoutClasses) {
-      this.layouts.register(LayoutClass);
-    }
+    addLayoutClasses(...LayoutClasses);
 
-    // custom elements
+    // elements
+    const ElementSuperClasses = [_misoContainer.default, _misoContext.default];
+    for (const ElementClass of ElementSuperClasses) {
+      ElementClass.MisoClient = MisoClient; // TODO: find better way
+    }
     const {
         containers,
         roles,
-        combos,
         contexts
       } = elements,
       others = _objectWithoutPropertiesLoose(elements, _excluded);
     // containers must go first, so their APIs will be ready before children are defined
-    const ElementClasses = [...Object.values(combos), ...Object.values(contexts), ...Object.values(containers), ...Object.values(roles), ...Object.values(others)];
-    const ElementSuperClasses = [_misoContainer.default, _misoContext.default, _misoCombo.default];
-    for (const ElementClass of [...ElementSuperClasses, ...ElementClasses]) {
-      ElementClass.MisoClient = MisoClient; // TODO: find better way
-    }
+    const ElementClasses = [...Object.values(contexts), ...Object.values(containers), ...Object.values(roles), ...Object.values(others)];
+    addElementClasses(...ElementClasses);
+
+    // combo
+    _misoCombo.default.MisoClient = MisoClient;
+    addElementClasses(...Object.values(elements.combos));
+    addInterface({
+      combo: new Combo(this, MisoClient)
+    });
 
     // load styles
     await (0, _styles.loadStylesIfNecessary)();
-
-    // define custom elements
-    for (const ElementClass of ElementClasses) {
-      (0, _commons.defineAndUpgrade)(ElementClass);
-    }
     this._ready.resolve();
   }
   async requireExtension(name) {
@@ -95,8 +105,7 @@ class UiPlugin extends _commons.Component {
     }
   }
   get ready() {
-    return Promise.all([this._ready.promise, MisoClient.any() // TODO: we need to wait for element connection
-    ]).then(() => {});
+    return this._ready.promise;
   }
   _injectClient(client) {
     (0, _commons.defineValues)(client, {
@@ -133,6 +142,8 @@ class UiPlugin extends _commons.Component {
     return asks;
   }
 }
+
+// TODO: are we able to eliminate the concept of extension, just use plugins?
 exports.default = UiPlugin;
 class Extensions {
   constructor(plugin, client) {
@@ -149,6 +160,36 @@ class Extensions {
     return context;
   }
 }
+function createUiPluginContext(plugin, ui, MisoClient) {
+  async function addElementClasses(...ElementClasses) {
+    for (const ElementClass of ElementClasses) {
+      ElementClass.MisoClient = MisoClient;
+    }
+    await plugin.ready;
+    for (const ElementClass of ElementClasses) {
+      (0, _commons.defineAndUpgrade)(ElementClass);
+    }
+  }
+  function addLayoutClasses(...LayoutClasses) {
+    for (const LayoutClass of LayoutClasses) {
+      LayoutClass.MisoClient = MisoClient;
+      plugin.layouts.register(LayoutClass);
+    }
+  }
+  function addInterface(obj) {
+    (0, _commons.defineValues)(ui, obj);
+  }
+  return {
+    plugin,
+    addElementClasses,
+    addLayoutClasses,
+    addInterface
+  };
+}
+
+/**
+ * The UI interface for the client.
+ */
 class Ui {
   constructor(plugin, client) {
     this._plugin = plugin;
@@ -192,7 +233,7 @@ class Ui {
     return this.explores.get(); // get default explore unit
   }
   get ready() {
-    return this._plugin._ready.promise;
+    return this._plugin.ready;
   }
 }
 class Combo {

package/dist/cjs/version.js

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

package/dist/cjs/{affiliation/index.js → workflow/affiliations.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.processData = processData;
+exports.processAffiliationData = processAffiliationData;
 exports.processSovrnProduct = processSovrnProduct;
 var _commons = require("@miso.ai/commons");
 const _excluded = ["affiliation_products"],
@@ -11,7 +11,7 @@ const _excluded = ["affiliation_products"],
   _excluded3 = ["products"],
   _excluded4 = ["id", "deeplink", "headline", "description", "currency", "retailPrice", "salePrice", "discountRate", "image", "thumbnail", "merchant"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function processData(data) {
+function processAffiliationData(data) {
   if (!data || !data.value) {
     return data;
   }

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

@@ -9,8 +9,8 @@ var _base = _interopRequireDefault(require("./base.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 _index4 = require("./options/index.js");
+var _affiliations = require("./affiliations.js");
+var _index3 = require("./options/index.js");
 var _processors = require("./processors.js");
 var _useLink = require("./use-link.js");
 var _trackers = require("../util/trackers.js");
@@ -66,12 +66,12 @@ const DEFAULT_TRACKERS = Object.freeze(Object.assign({}, _base.default.DEFAULT_T
     active: true,
     itemless: true,
     deduplicated: false,
-    click: _index4.DEFAULT_TRACKER_OPTIONS.click // click only
+    click: _index3.DEFAULT_TRACKER_OPTIONS.click // click only
   },
-  [_constants.ROLE.IMAGES]: _index4.DEFAULT_TRACKER_OPTIONS,
-  [_constants.ROLE.SOURCES]: _index4.DEFAULT_TRACKER_OPTIONS,
-  [_constants.ROLE.AFFILIATION]: _index4.DEFAULT_TRACKER_OPTIONS,
-  [_constants.ROLE.PRODUCTS]: _index4.DEFAULT_TRACKER_OPTIONS
+  [_constants.ROLE.IMAGES]: _index3.DEFAULT_TRACKER_OPTIONS,
+  [_constants.ROLE.SOURCES]: _index3.DEFAULT_TRACKER_OPTIONS,
+  [_constants.ROLE.AFFILIATION]: _index3.DEFAULT_TRACKER_OPTIONS,
+  [_constants.ROLE.PRODUCTS]: _index3.DEFAULT_TRACKER_OPTIONS
 }));
 const DEFAULT_OPTIONS = Object.freeze(Object.assign({}, _base.default.DEFAULT_OPTIONS, {
   api: DEFAULT_API_OPTIONS,
@@ -79,7 +79,7 @@ const DEFAULT_OPTIONS = Object.freeze(Object.assign({}, _base.default.DEFAULT_OP
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS
 }));
-const ROLES_OPTIONS = (0, _index4.mergeRolesOptions)(_base.default.ROLES_OPTIONS, {
+const ROLES_OPTIONS = (0, _index3.mergeRolesOptions)(_base.default.ROLES_OPTIONS, {
   main: _constants.ROLE.ANSWER,
   members: Object.keys(DEFAULT_LAYOUTS),
   mappings: {
@@ -174,7 +174,7 @@ class AnswerBasedWorkflow extends _base.default {
 
   // query //
   autoQuery(options = {}) {
-    _index4.autoQuery.call(this, options);
+    _index3.autoQuery.call(this, options);
   }
   query(args) {
     // TODO: also accept "question", "questionSource"?
@@ -207,7 +207,7 @@ class AnswerBasedWorkflow extends _base.default {
     throw new Error(`Not implemented`);
   }
   _writeWikiLinkTemplateToPayload(payload) {
-    if (!this._autoQuery || !this._autoQuery.param || this._autoQuery.param === _index4.DEFAULT_AUTO_QUERY_PARAM) {
+    if (!this._autoQuery || !this._autoQuery.param || this._autoQuery.param === _index3.DEFAULT_AUTO_QUERY_PARAM) {
       return payload;
     }
     return Object.assign({}, payload, {
@@ -228,12 +228,12 @@ class AnswerBasedWorkflow extends _base.default {
     super._updateData(data);
 
     // update URL if autoQuery.updateUrl is not false
-    _index4.updateQueryParametersInUrl.call(this, data);
+    _index3.updateQueryParametersInUrl.call(this, data);
   }
   _handleHeadResponse(data) {}
   _defaultProcessData(data, oldData) {
     data = super._defaultProcessData(data, oldData);
-    data = (0, _index3.processData)(data);
+    data = (0, _affiliations.processAffiliationData)(data);
     data = (0, _processors.writeAnswerStageToMeta)(data);
     return data;
   }

package/dist/cjs/workflow/ask.js

@@ -12,6 +12,7 @@ var _index2 = require("../layout/index.js");
 var _index3 = require("./options/index.js");
 var _processors = require("./processors.js");
 var _templates = require("../defaults/ask/templates.js");
+var _autocompletable = require("./autocompletable.js");
 const _excluded = ["q", "qs", "questionId"];
 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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -46,11 +47,18 @@ const DEFAULT_TRACKERS = Object.freeze(Object.assign({}, _answerBased.default.DE
 const DEFAULT_TEMPLATES = Object.freeze({
   followUp: _templates.followUp
 });
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  api: {
+    group: _commons.API.GROUP.ASK,
+    name: _commons.API.NAME.AUTOCOMPLETE
+  }
+});
 const DEFAULT_OPTIONS = Object.freeze(Object.assign({}, _answerBased.default.DEFAULT_OPTIONS, {
   api: DEFAULT_API_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
-  templates: DEFAULT_TEMPLATES
+  templates: DEFAULT_TEMPLATES,
+  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS
 }));
 const ROLES_OPTIONS = (0, _index3.mergeRolesOptions)(_answerBased.default.ROLES_OPTIONS, {
   members: Object.keys(DEFAULT_LAYOUTS),
@@ -71,6 +79,7 @@ class Ask extends _answerBased.default {
   }
   _initProperties(args) {
     super._initProperties(args);
+    this._initAutocomplete(args);
     const {
       parentQuestionId
     } = args;
@@ -306,4 +315,5 @@ class Ask extends _answerBased.default {
     super._destroy(options);
   }
 }
-exports.default = Ask;
+exports.default = Ask;
+(0, _autocompletable.makeAutocompletable)(Ask.prototype);

package/dist/cjs/workflow/asks.js

@@ -8,6 +8,7 @@ var _constants = require("../constants.js");
 var _context = _interopRequireDefault(require("./context.js"));
 var _ask = _interopRequireDefault(require("./ask.js"));
 var _index = require("./options/index.js");
+var _autocompletable = require("./autocompletable.js");
 const _excluded = ["root", "events"];
 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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -36,6 +37,7 @@ function autoNextOptionsAsPredicate(options = DEFAULT_AUTO_NEXT_OPTIONS) {
 class Asks extends _context.default {
   constructor(plugin, client) {
     super('asks', plugin, client);
+    this._initAutocompleteContext(); // must be earlier than root workflow
     this._byQid = new Map();
     this._byPqid = new Map();
     this._root = new _ask.default(this); // initialize with default workflow
@@ -144,4 +146,5 @@ class Asks extends _context.default {
   }
 }
 exports.default = Asks;
-(0, _index.makeConfigurable)(Asks.prototype, [_constants.WORKFLOW_CONFIGURABLE.TEMPLATES]);
+(0, _index.makeConfigurable)(Asks.prototype, [_constants.WORKFLOW_CONFIGURABLE.TEMPLATES]);
+(0, _autocompletable.makeAutocompletableContext)(Asks.prototype);

package/dist/cjs/workflow/autocompletable.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AutocompletableMixin = void 0;
+exports.AutocompletableMixin = exports.AutocompletableContextMixin = void 0;
 exports.makeAutocompletable = makeAutocompletable;
+exports.makeAutocompletableContext = makeAutocompletableContext;
 var _commons = require("@miso.ai/commons");
 var _index = require("../actor/index.js");
 var _autocomplete = _interopRequireDefault(require("./autocomplete.js"));
@@ -12,6 +13,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function makeAutocompletable(prototype) {
   (0, _commons.mixin)(prototype, AutocompletableMixin.prototype);
 }
+function makeAutocompletableContext(prototype) {
+  (0, _commons.mixin)(prototype, AutocompletableContextMixin.prototype);
+}
 class AutocompletableMixin {
   _initAutocomplete(args) {
     this._autocomplete = new _autocomplete.default(this, {
@@ -30,4 +34,30 @@ class AutocompletableMixin {
     this._autocomplete = undefined;
   }
 }
-exports.AutocompletableMixin = AutocompletableMixin;
+exports.AutocompletableMixin = AutocompletableMixin;
+class AutocompletableContextMixin {
+  _initAutocompleteContext() {
+    this._autocomplete = new AutocompleteContext(this);
+  }
+  get autocomplete() {
+    return this._autocomplete;
+  }
+}
+exports.AutocompletableContextMixin = AutocompletableContextMixin;
+class AutocompleteContext {
+  constructor(context) {
+    this._context = context;
+    this._active = false;
+  }
+
+  // API //
+  get enabled() {
+    return this._active;
+  }
+  enable() {
+    this._active = true;
+  }
+  disable() {
+    this._active = false;
+  }
+}

package/dist/cjs/workflow/autocomplete.js

@@ -16,9 +16,7 @@ const ROLES_OPTIONS = Object.freeze({
 });
 function shimDefaults(_ref = {}) {
   let options = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return Object.assign({
-    active: false
-  }, options, {
+  return Object.assign({}, options, {
     layouts: {},
     trackers: {}
   });
@@ -43,6 +41,7 @@ class Autocomplete extends _base.default {
       roles: ROLES_OPTIONS,
       superworkflow
     }, args));
+    this._autocompleteContext = superworkflow && superworkflow._context && superworkflow._context.autocomplete;
   }
   _initProperties(args) {
     super._initProperties(args);
@@ -57,7 +56,7 @@ class Autocomplete extends _base.default {
 
   // API //
   get enabled() {
-    return this._active;
+    return !!(this._active !== undefined ? this._active : this._autocompleteContext && this._autocompleteContext.enabled);
   }
   enable() {
     this._active = true;
@@ -68,7 +67,7 @@ class Autocomplete extends _base.default {
 
   // query //
   _query(args) {
-    if (!this._active || sameInputValue(args, this._args)) {
+    if (!this.enabled || sameInputValue(args, this._args)) {
       return;
     }
     this._args = args;

package/dist/cjs/workflow/explore.js

@@ -11,6 +11,7 @@ var _constants = require("../constants.js");
 var _index2 = require("../layout/index.js");
 var _index3 = require("./options/index.js");
 var _useLink = require("./use-link.js");
+var _autocompletable = require("./autocompletable.js");
 const _excluded = ["value"];
 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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -41,10 +42,17 @@ const DEFAULT_TRACKERS = Object.freeze(Object.assign({}, _unit.default.DEFAULT_T
     }
   }
 }));
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  api: {
+    group: _commons.API.GROUP.ASK,
+    name: _commons.API.NAME.QUERY_SUGGESTION
+  }
+});
 const DEFAULT_OPTIONS = Object.freeze(Object.assign({}, _unit.default.DEFAULT_OPTIONS, {
   api: DEFAULT_API_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
-  trackers: DEFAULT_TRACKERS
+  trackers: DEFAULT_TRACKERS,
+  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS
 }));
 const ROLES_OPTIONS = (0, _index3.mergeRolesOptions)(_unit.default.ROLES_OPTIONS, {
   main: _constants.ROLE.RELATED_QUESTIONS,
@@ -62,6 +70,7 @@ class Explore extends _unit.default {
   }
   _initProperties(args) {
     super._initProperties(args);
+    this._initAutocomplete(args);
     this._productId = undefined;
     this._linkFn = undefined;
   }
@@ -197,4 +206,5 @@ class Explore extends _unit.default {
   }
 }
 exports.default = Explore;
-(0, _useLink.enableUseLink)(Explore.prototype);
+(0, _useLink.enableUseLink)(Explore.prototype);
+(0, _autocompletable.makeAutocompletable)(Explore.prototype);

package/dist/cjs/workflow/explores.js

@@ -6,13 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _units = _interopRequireDefault(require("./units.js"));
 var _explore = _interopRequireDefault(require("./explore.js"));
+var _autocompletable = require("./autocompletable.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class Explores extends _units.default {
   constructor(plugin, client) {
     super('explores', plugin, client);
+    this._initAutocompleteContext();
   }
   _create(unitId) {
     return new _explore.default(this, unitId);
   }
 }
-exports.default = Explores;
+exports.default = Explores;
+(0, _autocompletable.makeAutocompletableContext)(Explores.prototype);

package/dist/cjs/workflow/options/auto-query.js

@@ -11,6 +11,8 @@ var _commons = require("@miso.ai/commons");
 var _constants = require("../../constants.js");
 const _excluded = ["setValue", "focus", "updateUrl", "param", "sourceParam"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+// TODO: eliminate browser dependency?
+
 const DEFAULT_AUTO_QUERY_PARAM = exports.DEFAULT_AUTO_QUERY_PARAM = 'q';
 const DEFAULT_AUTO_QUERY_SOURCE_PARAM = exports.DEFAULT_AUTO_QUERY_SOURCE_PARAM = 'qs';
 function normalizeAutoQueryOptions(_ref = {}) {

package/dist/cjs/workflow/use-link.js

@@ -8,6 +8,8 @@ exports.enableUseLink = enableUseLink;
 var _commons = require("@miso.ai/commons");
 const _excluded = ["q"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+// TODO: eliminate browser dependency
+
 function enableUseLink(prototype) {
   (0, _commons.mixin)(prototype, UseLinkMixin.prototype);
 }

package/package.json

@@ -30,7 +30,7 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.13.0"
+    "@miso.ai/commons": "1.13.1-beta.1"
   },
-  "version": "1.13.0"
+  "version": "1.13.1-beta.1"
 }

package/src/actor/tracker.js

@@ -1,7 +1,7 @@
 import { asArray, trimObj, snakeToLowerCamel } from '@miso.ai/commons';
-import { PERFORMANCE_EVENT_TYPES, DIRECT_TRACKING_EVENT_TYPES, TRACKING_STATUS, EVENT_TYPE, validateEventType } from '../constants.js';
+import { PERFORMANCE_EVENT_TYPES, DIRECT_TRACKING_EVENT_TYPES, TRACKING_STATUS, validateEventType } from '../constants.js';
 import * as fields from './fields.js';
-import States from '../util/states.js';
+import States from './tracker-states.js';
 
 // a dummy item array for manipulating deduplication
 const ITEMLESS_DUMMY_ITEMS = [Symbol('itemless')];

package/src/actor/view.js

@@ -3,6 +3,8 @@ import { STATUS, ROLE, isDataRole } from '../constants.js';
 import * as fields from './fields.js';
 import ProxyElement from '../util/proxy.js';
 
+// TODO: browser dependency on syncSize
+
 function statesEqual(a, b) {
   return a === b || (a && b &&
     a.status === b.status &&

package/src/actor/views.js

@@ -29,11 +29,8 @@ export default class ViewsActor {
       interface: new Views(this),
     });
 
-    const syncSize = () => this.syncSize();
-    window.addEventListener('resize', syncSize);
-
     this._unsubscribes = [
-      () => window.removeEventListener('resize', syncSize),
+      onResize(this.syncSize.bind(this)),
       hub.on(fields.data(), data => this.refresh({ data })),
       options.on('layouts', () => this._syncLayouts()),
     ];
@@ -217,3 +214,11 @@ class Views {
   }
 
 }
+
+function onResize(callback) {
+  if (typeof window === 'undefined') {
+    return () => {};
+  }
+  window.addEventListener('resize', callback);
+  return () => window.removeEventListener('resize', callback);
+}

package/src/layout/input/facets.js

@@ -17,7 +17,7 @@ function root(layout, state) {
 function facets(layout, state) {
   const { templates } = layout;
   const { facet_fields = {} } = state.value || {};
-  return Object.keys(facet_fields).map(field => templates.facet(layout, { field, entries: facet_fields[field] }, state));
+  return Object.keys(facet_fields).map(field => templates.facet(layout, { field, entries: facet_fields[field] }, state)).join('');
 }
 
 function facet(layout, facet, state) {

package/src/layout/input/search-box.js

@@ -376,17 +376,20 @@ class Context {
     let index = 0;
     const data = this._data = new Map();
     const items = [];
-    for (const field in completions) {
-      for (const item of completions[field]) {
-        if (item.product && !item.product.url) {
-          continue; // product without URL is not clickable
-        }
-        item._index = index;
+    for (let [field, item] of iterateCompletionItems(completions)) {
+      if (typeof item === 'string') {
+        item = { text: item };
+      }
+      if (item.product && !item.product.url) {
+        continue; // product without URL is not clickable
+      }
+      item._index = index;
+      if (field) {
         item._field = field;
-        data.set(index, item);
-        items.push(item);
-        index++;
       }
+      data.set(index, item);
+      items.push(item);
+      index++;
     }
     return items;
   }
@@ -412,3 +415,17 @@ class Context {
   }
 
 }
+
+function * iterateCompletionItems(completions) {
+  if (Array.isArray(completions)) {
+    for (const item of completions) {
+      yield [undefined, item];
+    }
+  } else {
+    for (const field in completions) {
+      for (const item of completions[field]) {
+        yield [field, item];
+      }
+    }
+  }
+}

package/src/plugin.js

@@ -28,53 +28,53 @@ export default class UiPlugin extends Component {
     this._explores = new WeakMap();
     this._asks = new WeakMap();
     this._extensions = new WeakMap();
+
     this._ready = new Resolution();
   }
 
-  async install(MisoClient, context) {
-    context.addSubtree(this);
+  async install(MisoClient, { addSubtree, addExtensionPoints }) {
+    addSubtree(this);
     MisoClient.on('create', this._injectClient.bind(this));
 
+    // the UI interface for MisoClient
     const ui = { defaults, traits };
-    delegateGetters(ui, this, ['layouts', 'combo', 'ready']);
+    delegateGetters(ui, this, ['layouts', 'ready']);
     defineValues(this, { MisoClient });
     defineValues(MisoClient, { ui });
 
-    // combo
-    this.combo = new Combo(this, MisoClient);
+    // the plugin context extension
+    const uiContext = createUiPluginContext(this, ui, MisoClient);
+    const { addElementClasses, addLayoutClasses, addInterface } = uiContext;
+    addExtensionPoints({
+      ui: uiContext,
+    });
 
     // layouts
     const LayoutClasses = Object.values(layouts).filter(LayoutClass => LayoutClass.type);
-    for (const LayoutClass of LayoutClasses) {
-      LayoutClass.MisoClient = MisoClient; // TODO: find better way
-    }
-    for (const LayoutClass of LayoutClasses) {
-      this.layouts.register(LayoutClass);
-    }
+    addLayoutClasses(...LayoutClasses);
 
-    // custom elements
-    const { containers, roles, combos, contexts, ...others } = elements;
+    // elements
+    const ElementSuperClasses = [MisoContainerElement, MisoContextElement];
+    for (const ElementClass of ElementSuperClasses) {
+      ElementClass.MisoClient = MisoClient; // TODO: find better way
+    }
+    const { containers, roles, contexts, combos:_, ...others } = elements;
     // containers must go first, so their APIs will be ready before children are defined
     const ElementClasses = [
-      ...Object.values(combos),
       ...Object.values(contexts),
       ...Object.values(containers),
       ...Object.values(roles),
       ...Object.values(others),
     ];
-    const ElementSuperClasses = [MisoContainerElement, MisoContextElement, MisoComboElement];
-    for (const ElementClass of [...ElementSuperClasses, ...ElementClasses]) {
-      ElementClass.MisoClient = MisoClient; // TODO: find better way
-    }
+    addElementClasses(...ElementClasses);
+
+    // combo
+    MisoComboElement.MisoClient = MisoClient;
+    addElementClasses(...Object.values(elements.combos));
+    addInterface({ combo: new Combo(this, MisoClient) });
 
     // load styles
     await loadStylesIfNecessary();
-
-    // define custom elements
-    for (const ElementClass of ElementClasses) {
-      defineAndUpgrade(ElementClass);
-    }
-
     this._ready.resolve();
   }
 
@@ -88,10 +88,7 @@ export default class UiPlugin extends Component {
   }
 
   get ready() {
-    return Promise.all([
-      this._ready.promise,
-      MisoClient.any(), // TODO: we need to wait for element connection
-    ]).then(() => {});
+    return this._ready.promise;
   }
 
   _injectClient(client) {
@@ -135,6 +132,7 @@ export default class UiPlugin extends Component {
 
 }
 
+// TODO: are we able to eliminate the concept of extension, just use plugins?
 class Extensions {
 
   constructor(plugin, client) {
@@ -154,6 +152,31 @@ class Extensions {
 
 }
 
+function createUiPluginContext(plugin, ui, MisoClient) {
+  async function addElementClasses(...ElementClasses) {
+    for (const ElementClass of ElementClasses) {
+      ElementClass.MisoClient = MisoClient;
+    }
+    await plugin.ready;
+    for (const ElementClass of ElementClasses) {
+      defineAndUpgrade(ElementClass);
+    }
+  }
+  function addLayoutClasses(...LayoutClasses) {
+    for (const LayoutClass of LayoutClasses) {
+      LayoutClass.MisoClient = MisoClient;
+      plugin.layouts.register(LayoutClass);
+    }
+  }
+  function addInterface(obj) {
+    defineValues(ui, obj);
+  }
+  return { plugin, addElementClasses, addLayoutClasses, addInterface };
+}
+
+/**
+ * The UI interface for the client.
+ */
 class Ui {
 
   constructor(plugin, client) {
@@ -208,7 +231,7 @@ class Ui {
   }
 
   get ready() {
-    return this._plugin._ready.promise;
+    return this._plugin.ready;
   }
 
 }

package/src/version.js

@@ -1 +1 @@
-export default '1.13.0';
+export default '1.13.1-beta.1';

package/src/{affiliation/index.js → workflow/affiliations.js}

@@ -1,6 +1,6 @@
 import { trimObj } from '@miso.ai/commons';
 
-export function processData(data) {
+export function processAffiliationData(data) {
   if (!data || !data.value) {
     return data;
   }

package/src/workflow/answer-based.js

@@ -3,7 +3,7 @@ import Workflow from './base.js';
 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 { processAffiliationData } from './affiliations.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';

package/src/workflow/ask.js

@@ -6,6 +6,7 @@ import { OptionListLayout, ListLayout, SearchBoxLayout, TypewriterLayout } from
 import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 import { writeQuestionSourceToPayload, mappingSuggestionsData, mappingFollowUpQuestionsData } from './processors.js';
 import { followUp as followUpTemplate } from '../defaults/ask/templates.js';
+import { makeAutocompletable } from './autocompletable.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS,
@@ -41,12 +42,20 @@ const DEFAULT_TEMPLATES = Object.freeze({
   followUp: followUpTemplate,
 });
 
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  api: {
+    group: API.GROUP.ASK,
+    name: API.NAME.AUTOCOMPLETE,
+  },
+});
+
 const DEFAULT_OPTIONS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_OPTIONS,
   api: DEFAULT_API_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
   templates: DEFAULT_TEMPLATES,
+  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
 });
 
 const ROLES_OPTIONS = mergeRolesOptions(AnswerBasedWorkflow.ROLES_OPTIONS, {
@@ -71,6 +80,7 @@ export default class Ask extends AnswerBasedWorkflow {
 
   _initProperties(args) {
     super._initProperties(args);
+    this._initAutocomplete(args);
     const { parentQuestionId } = args;
     defineValues(this, { parentQuestionId });
   }
@@ -270,3 +280,5 @@ export default class Ask extends AnswerBasedWorkflow {
   }
 
 }
+
+makeAutocompletable(Ask.prototype);

package/src/workflow/asks.js

@@ -2,6 +2,7 @@ import { WORKFLOW_CONFIGURABLE, STATUS } from '../constants.js';
 import WorkflowContext from './context.js';
 import Ask from './ask.js';
 import { makeConfigurable } from './options/index.js';
+import { makeAutocompletableContext } from './autocompletable.js';
 
 const DEFAULT_AUTO_NEXT_OPTIONS = { event: 'done' };
 
@@ -27,6 +28,7 @@ export default class Asks extends WorkflowContext {
 
   constructor(plugin, client) {
     super('asks', plugin, client);
+    this._initAutocompleteContext(); // must be earlier than root workflow
     this._byQid = new Map();
     this._byPqid = new Map();
     this._root = new Ask(this); // initialize with default workflow
@@ -138,3 +140,4 @@ export default class Asks extends WorkflowContext {
 }
 
 makeConfigurable(Asks.prototype, [WORKFLOW_CONFIGURABLE.TEMPLATES]);
+makeAutocompletableContext(Asks.prototype);

package/src/workflow/autocompletable.js

@@ -6,6 +6,10 @@ export function makeAutocompletable(prototype) {
   mixin(prototype, AutocompletableMixin.prototype);
 }
 
+export function makeAutocompletableContext(prototype) {
+  mixin(prototype, AutocompletableContextMixin.prototype);
+}
+
 export class AutocompletableMixin {
 
   _initAutocomplete(args) {
@@ -27,3 +31,37 @@ export class AutocompletableMixin {
   }
 
 }
+
+export class AutocompletableContextMixin {
+
+  _initAutocompleteContext() {
+    this._autocomplete = new AutocompleteContext(this);
+  }
+
+  get autocomplete() {
+    return this._autocomplete;
+  }
+
+}
+
+class AutocompleteContext {
+
+  constructor(context) {
+    this._context = context;
+    this._active = false;
+  }
+
+  // API //
+  get enabled() {
+    return this._active;
+  }
+
+  enable() {
+    this._active = true;
+  }
+
+  disable() {
+    this._active = false;
+  }
+
+}

package/src/workflow/autocomplete.js

@@ -8,7 +8,6 @@ const ROLES_OPTIONS = Object.freeze({
 
 function shimDefaults({ layouts, trackers, ...options } = {}) {
   return {
-    active: false,
     ...options,
     layouts: {},
     trackers: {},
@@ -35,6 +34,7 @@ export default class Autocomplete extends Workflow {
       superworkflow,
       ...args,
     });
+    this._autocompleteContext = superworkflow && superworkflow._context && superworkflow._context.autocomplete;
   }
 
   _initProperties(args) {
@@ -54,7 +54,7 @@ export default class Autocomplete extends Workflow {
 
   // API //
   get enabled() {
-    return this._active;
+    return !!(this._active !== undefined ? this._active : this._autocompleteContext && this._autocompleteContext.enabled);
   }
 
   enable() {
@@ -67,7 +67,7 @@ export default class Autocomplete extends Workflow {
 
   // query //
   _query(args) {
-    if (!this._active || sameInputValue(args, this._args)) {
+    if (!this.enabled || sameInputValue(args, this._args)) {
       return;
     }
     this._args = args;

package/src/workflow/explore.js

@@ -5,6 +5,7 @@ import { ROLE, EVENT_TYPE } from '../constants.js';
 import { ListLayout, SearchBoxLayout } from '../layout/index.js';
 import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 import { enableUseLink, UseLinkMixin } from './use-link.js';
+import { makeAutocompletable } from './autocompletable.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   ...UnitWorkflow.DEFAULT_API_OPTIONS,
@@ -32,11 +33,19 @@ const DEFAULT_TRACKERS = Object.freeze({
   },
 });
 
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  api: {
+    group: API.GROUP.ASK,
+    name: API.NAME.QUERY_SUGGESTION,
+  },
+});
+
 const DEFAULT_OPTIONS = Object.freeze({
   ...UnitWorkflow.DEFAULT_OPTIONS,
   api: DEFAULT_API_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
+  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
 });
 
 const ROLES_OPTIONS = mergeRolesOptions(UnitWorkflow.ROLES_OPTIONS, {
@@ -58,6 +67,7 @@ export default class Explore extends UnitWorkflow {
 
   _initProperties(args) {
     super._initProperties(args);
+    this._initAutocomplete(args);
     this._productId = undefined;
     this._linkFn = undefined;
   }
@@ -181,3 +191,4 @@ export default class Explore extends UnitWorkflow {
 }
 
 enableUseLink(Explore.prototype);
+makeAutocompletable(Explore.prototype);

package/src/workflow/explores.js

@@ -1,10 +1,12 @@
 import UnitWorkflowContext from './units.js';
 import Explore from './explore.js';
+import { makeAutocompletableContext } from './autocompletable.js';
 
 export default class Explores extends UnitWorkflowContext {
 
   constructor(plugin, client) {
     super('explores', plugin, client);
+    this._initAutocompleteContext();
   }
 
   _create(unitId) {
@@ -12,3 +14,5 @@ export default class Explores extends UnitWorkflowContext {
   }
 
 }
+
+makeAutocompletableContext(Explores.prototype);

package/src/workflow/options/auto-query.js

@@ -1,6 +1,8 @@
 import { trimObj } from '@miso.ai/commons';
 import { ROLE, QUESTION_SOURCE } from '../../constants.js';
 
+// TODO: eliminate browser dependency?
+
 export const DEFAULT_AUTO_QUERY_PARAM = 'q';
 export const DEFAULT_AUTO_QUERY_SOURCE_PARAM = 'qs';
 

package/src/workflow/use-link.js

@@ -1,5 +1,7 @@
 import { mixin } from '@miso.ai/commons';
 
+// TODO: eliminate browser dependency
+
 export function enableUseLink(prototype) {
   mixin(prototype, UseLinkMixin.prototype);
 }