@miso.ai/client-sdk-ui 1.12.1 → 1.12.2-beta.1

package/dist/cjs/affiliation/index.js

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.processData = processData;
 exports.processSovrnProduct = processSovrnProduct;
 var _commons = require("@miso.ai/commons");
-const _excluded = ["sovrn_aff"],
-  _excluded2 = ["products"],
-  _excluded3 = ["id", "deeplink", "headline", "description", "currency", "retailPrice", "salePrice", "discountRate", "image", "thumbnail", "merchant"];
+const _excluded = ["affiliation_products"],
+  _excluded2 = ["sovrn_aff"],
+  _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) {
   if (!data || !data.value) {
@@ -22,20 +23,19 @@ function processData(data) {
   });
 }
 function processValue(value) {
-  /*
   if (value.affiliation_products) {
-    const { affiliation_products, ...rest } = value;
-    value = {
-      ...rest,
-      affiliation: processMisoData(affiliation_products),
-    };
-  } else
-  */
-  if (value.sovrn_aff) {
     const {
-        sovrn_aff
+        affiliation_products
       } = value,
       rest = _objectWithoutPropertiesLoose(value, _excluded);
+    value = Object.assign({}, rest, {
+      affiliation: processMisoData(affiliation_products)
+    });
+  } else if (value.sovrn_aff) {
+    const {
+        sovrn_aff
+      } = value,
+      rest = _objectWithoutPropertiesLoose(value, _excluded2);
     value = Object.assign({}, rest, {
       affiliation: processSovrnData(sovrn_aff)
     });
@@ -80,7 +80,7 @@ function processSovrnData(_ref) {
   let {
       products
     } = _ref,
-    data = _objectWithoutPropertiesLoose(_ref, _excluded2);
+    data = _objectWithoutPropertiesLoose(_ref, _excluded3);
   return Object.assign({
     channel: 'sovrn'
   }, data, {
@@ -101,7 +101,7 @@ function processSovrnProduct(_ref2) {
       thumbnail,
       merchant
     } = _ref2,
-    product = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+    product = _objectWithoutPropertiesLoose(_ref2, _excluded4);
   const brand = merchant && merchant.name;
   const brand_logo = merchant && merchant.logo;
   return (0, _commons.trimObj)({

package/dist/cjs/constants.js

@@ -93,5 +93,6 @@ const WORKFLOW_CONFIGURABLE = exports.WORKFLOW_CONFIGURABLE = Object.freeze({
   TRACKERS: 'trackers',
   INTERACTIONS: 'interactions',
   FILTERS: 'filters',
-  PAGINATION: 'pagination'
+  PAGINATION: 'pagination',
+  TEMPLATES: 'templates'
 });

package/dist/cjs/defaults/ask/controls.js

@@ -8,39 +8,44 @@ exports.wireRelatedResources = wireRelatedResources;
 var _templates = require("./templates.js");
 const _excluded = ["template"];
 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 wireFollowUps(client, element, _ref = {}) {
+function wireFollowUps(client, element, options) {
+  if (!client) {
+    throw new Error('client is required');
+  }
+  // backward compatible
+  setFollowUpTemplate(client, options);
+  replaceFollowUpsElement(element);
+}
+function setFollowUpTemplate(client, _ref = {}) {
   let {
       template = _templates.followUp
     } = _ref,
     options = _objectWithoutPropertiesLoose(_ref, _excluded);
-  if (!client) {
-    throw new Error('client is required');
-  }
   if (typeof template !== 'function') {
     throw new Error('template must be a function or undefined');
   }
-  if (!element) {
-    return;
+  const hasExtraOptions = Object.keys(options).length > 0;
+  if (template === _templates.followUp && !hasExtraOptions) {
+    return; // same as default
   }
-  const context = client.ui.asks;
-  const rootWorkflow = client.ui.ask;
-
-  // 1. when an answer is fully populated, insert a new section for the follow-up question
-  context.on('done', event => {
-    element.insertAdjacentHTML('beforeend', template(Object.assign({}, options, {
-      parentQuestionId: event.workflow.questionId
-    })));
-  });
-  // 2. if user starts over, clean up existing follow-up questions
-  rootWorkflow.on('loading', () => {
-    // clean up the entire follow-ups section
-    element.innerHTML = '';
-    // destroy all follow-up workflows
-    context.reset({
-      root: false
-    });
+  client.ui.asks.useTemplates({
+    followUp: hasExtraOptions ? args => template(Object.assign({}, options, args)) : template
   });
 }
+function replaceFollowUpsElement(element) {
+  if (!element || element.tagName.toLowerCase() === 'miso-follow-ups') {
+    return;
+  }
+  // replace element with <miso-follow-ups>, carrying over attributes
+  const newElement = document.createElement('miso-follow-ups');
+  for (const {
+    name,
+    value
+  } of element.attributes) {
+    newElement.setAttribute(name, value);
+  }
+  element.parentNode.replaceChild(newElement, element);
+}
 function wireRelatedResources(client, element) {
   if (!client) {
     throw new Error('client is required');

package/dist/cjs/defaults/ask/templates.js

@@ -91,10 +91,9 @@ class Sections extends _templates.Sections {
   }
   followUps(options) {
     const {
-      classPrefix,
       features = {}
     } = options;
-    return features.followUpQuestions === false ? '' : `<div id="${classPrefix}__follow-ups" class="${classPrefix}__follow-ups"></div>`;
+    return features.followUpQuestions === false ? '' : `<miso-follow-ups id="miso-ask-combo__follow-ups" class="miso-ask-combo__follow-ups"></miso-follow-ups>`;
   }
   relatedResourcesSection(options) {
     const {

package/dist/cjs/element/context/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MisoFollowUpsElement", {
+  enumerable: true,
+  get: function () {
+    return _misoFollowUps.default;
+  }
+});
+var _misoFollowUps = _interopRequireDefault(require("./miso-follow-ups.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/element/context/miso-context.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoStub = _interopRequireDefault(require("../util/miso-stub.js"));
+var _utils = require("../utils.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class MisoContextElement extends _misoStub.default {
+  static get observedAttributes() {
+    return _misoStub.default.observedAttributes;
+  }
+  constructor() {
+    super();
+    this._context = undefined;
+  }
+
+  // properties //
+  get context() {
+    return this._context;
+  }
+  set context(context) {
+    this._setContext(context);
+  }
+
+  // lifecycle //
+  async connectedCallback() {
+    super.connectedCallback();
+    const client = this._client = await (0, _utils.getClient)(MisoContextElement);
+    if (document.body.contains(this)) {
+      // in case already disconnected
+      this._setContext(this._getContext(client));
+    }
+  }
+  disconnectedCallback() {
+    this._setContext(undefined);
+    super.disconnectedCallback();
+  }
+  _getContext(client) {
+    throw new Error('Unimplemented');
+  }
+  _setContext(context) {
+    if (this._context === context) {
+      return;
+    }
+    const oldContext = this._context;
+    this._context = context;
+    this._onContext(context, oldContext);
+  }
+  _onContext() {}
+}
+exports.default = MisoContextElement;

package/dist/cjs/element/context/miso-follow-ups.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoContext = _interopRequireDefault(require("./miso-context.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TAG_NAME = 'miso-follow-ups';
+class MisoFollowUpsElement extends _misoContext.default {
+  static get tagName() {
+    return TAG_NAME;
+  }
+  static get observedAttributes() {
+    return _misoContext.default.observedAttributes;
+  }
+  constructor() {
+    super();
+    this._unsubscribes = [];
+  }
+  _getContext(client) {
+    return client.ui.asks;
+  }
+  _onContext(context, oldContext) {
+    if (context === oldContext) {
+      return;
+    }
+    this._unwire();
+    this._wire(context);
+  }
+  _unwire() {
+    for (const unsubscribe of this._unsubscribes || []) {
+      unsubscribe();
+    }
+    this._unsubscribes = [];
+  }
+  _wire(context) {
+    if (!context) {
+      return;
+    }
+
+    // 1. when an answer is fully populated, insert a new section for the follow-up question
+    this._unsubscribes.push(context.on('done', event => {
+      const template = event.workflow._options.resolved.templates.followUp;
+      if (!template) {
+        return;
+      }
+      this.insertAdjacentHTML('beforeend', template({
+        parentQuestionId: event.workflow.questionId
+      }));
+    }));
+
+    // 2. if user starts over, clean up existing follow-up questions
+    this._unsubscribes.push(context.root.on('loading', () => {
+      // clean up the entire follow-ups section
+      this.innerHTML = '';
+      // destroy all follow-up workflows
+      context.reset({
+        root: false
+      });
+    }));
+  }
+}
+exports.default = MisoFollowUpsElement;

package/dist/cjs/element/index.js

@@ -6,24 +6,27 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   containers: true,
   roles: true,
+  contexts: true,
   combos: true
 };
-exports.roles = exports.containers = exports.combos = void 0;
+exports.roles = exports.contexts = exports.containers = exports.combos = void 0;
 var containers = _interopRequireWildcard(require("./container/index.js"));
 exports.containers = containers;
 var roles = _interopRequireWildcard(require("./role/index.js"));
 exports.roles = roles;
+var contexts = _interopRequireWildcard(require("./context/index.js"));
+exports.contexts = contexts;
 var combos = _interopRequireWildcard(require("./combo/index.js"));
 exports.combos = combos;
-var _index4 = require("./util/index.js");
-Object.keys(_index4).forEach(function (key) {
+var _index5 = require("./util/index.js");
+Object.keys(_index5).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index4[key]) return;
+  if (key in exports && exports[key] === _index5[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _index4[key];
+      return _index5[key];
     }
   });
 });

package/dist/cjs/layout/affiliation/affiliation.js

@@ -255,12 +255,6 @@ class AffiliationLayout extends _collection.default {
     }
     this.itemIndex--;
   }
-  _getItems(state) {
-    const {
-      products
-    } = state.value || {};
-    return products;
-  }
   _render(element, states, controls) {
     super._render(element, states, controls);
     // sync again for incremental item rendering

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

@@ -197,7 +197,7 @@ class CollectionLayout extends _template.default {
     this._untrackTrigger();
   }
   _getItems(state) {
-    return state.value;
+    return state.value && (state.value.products || state.value);
   }
   _getListElement(element) {
     return element.querySelector('[data-role="list"]');

package/dist/cjs/plugin.js

@@ -15,8 +15,9 @@ var defaults = _interopRequireWildcard(require("./defaults/index.js"));
 var traits = _interopRequireWildcard(require("./trait/index.js"));
 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"];
+const _excluded = ["containers", "roles", "combos", "contexts"];
 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; }
@@ -65,12 +66,13 @@ class UiPlugin extends _commons.Component {
     const {
         containers,
         roles,
-        combos
+        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(containers), ...Object.values(roles), ...Object.values(others)];
-    const ElementSuperClasses = [_misoContainer.default, _misoCombo.default];
+    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
     }

package/dist/cjs/version.js

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

package/dist/cjs/workflow/ask.js

@@ -11,6 +11,7 @@ var _constants = require("../constants.js");
 var _index2 = require("../layout/index.js");
 var _processors = require("./processors.js");
 var _index3 = require("./options/index.js");
+var _templates = require("../defaults/ask/templates.js");
 const _excluded = ["q", "qs"];
 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,14 @@ const DEFAULT_TRACKERS = Object.freeze(Object.assign({}, _answerBased.default.DE
     })
   })
 }));
+const DEFAULT_TEMPLATES = Object.freeze({
+  followUp: _templates.followUp
+});
 const DEFAULT_OPTIONS = Object.freeze(Object.assign({}, _answerBased.default.DEFAULT_OPTIONS, {
   api: DEFAULT_API_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
-  trackers: DEFAULT_TRACKERS
+  trackers: DEFAULT_TRACKERS,
+  templates: DEFAULT_TEMPLATES
 }));
 const ROLES_OPTIONS = (0, _index3.mergeRolesOptions)(_answerBased.default.ROLES_OPTIONS, {
   members: Object.keys(DEFAULT_LAYOUTS),

package/dist/cjs/workflow/asks.js

@@ -4,17 +4,42 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../constants.js");
 var _context = _interopRequireDefault(require("./context.js"));
 var _ask = _interopRequireDefault(require("./ask.js"));
+var _index = require("./options/index.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; }
+const DEFAULT_AUTO_NEXT_OPTIONS = {
+  event: 'done'
+};
+function autoNextOptionsAsPredicate(options = DEFAULT_AUTO_NEXT_OPTIONS) {
+  if (options === true) {
+    options = DEFAULT_AUTO_NEXT_OPTIONS;
+  }
+  if (typeof options === 'string') {
+    options = {
+      event: options
+    };
+  }
+  switch (typeof options) {
+    case 'object':
+      // TODO: support more options
+      return event => options.event === event._event;
+    case 'function':
+      return options;
+    default:
+      return false;
+  }
+}
 class Asks extends _context.default {
   constructor(plugin, client) {
     super('asks', plugin, client);
     this._byQid = new Map();
     this._byPqid = new Map();
     this._root = new _ask.default(this); // initialize with default workflow
+    this._events.on('*', event => this._createNextIfNecessary(event));
   }
   get root() {
     return this._root;
@@ -67,5 +92,18 @@ class Asks extends _context.default {
       this._root.restart();
     }
   }
+  autoNext(options) {
+    this._autoNextFn = autoNextOptionsAsPredicate(options);
+  }
+  _createNextIfNecessary(event) {
+    if (!this._autoNextFn || !this._autoNextFn(event)) {
+      return;
+    }
+    const {
+      workflow
+    } = event;
+    workflow && workflow.getOrCreateNext();
+  }
 }
-exports.default = Asks;
+exports.default = Asks;
+(0, _index.makeConfigurable)(Asks.prototype, [_constants.WORKFLOW_CONFIGURABLE.TEMPLATES]);

package/dist/cjs/workflow/context.js

@@ -9,6 +9,7 @@ var _index = require("./options/index.js");
 class WorkflowContext extends _commons.Component {
   constructor(name, plugin, client) {
     super(name, plugin);
+    this._name = name;
     this._plugin = plugin;
     this._client = client;
     this._options = new _index.WorkflowContextOptions();

package/dist/cjs/workflow/hybrid-search.js

@@ -5,17 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var _index = require("../actor/index.js");
 var _base = _interopRequireDefault(require("./base.js"));
 var _searchBased = _interopRequireDefault(require("./search-based.js"));
 var _answerBased = _interopRequireDefault(require("./answer-based.js"));
 var _constants = require("../constants.js");
-var _index2 = require("../layout/index.js");
+var _index = require("../layout/index.js");
 var _templates = require("../layout/templates.js");
 var _hybridSearchAnswer = _interopRequireDefault(require("./hybrid-search-answer.js"));
 var _hybridSearchResults = _interopRequireDefault(require("./hybrid-search-results.js"));
 var _hybridSearchViews = _interopRequireDefault(require("./hybrid-search-views.js"));
-var _index3 = require("./options/index.js");
+var _index2 = require("./options/index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: _commons.API.GROUP.ASK,
@@ -25,13 +24,13 @@ const DEFAULT_API_OPTIONS = Object.freeze({
   })
 });
 const DEFAULT_LAYOUTS = Object.freeze(Object.assign({}, _answerBased.default.DEFAULT_LAYOUTS, _searchBased.default.DEFAULT_LAYOUTS, {
-  [_constants.ROLE.QUERY]: [_index2.SearchBoxLayout.type, {
+  [_constants.ROLE.QUERY]: [_index.SearchBoxLayout.type, {
     placeholder: ''
   }],
-  [_constants.ROLE.QUESTION]: [_index2.TextLayout.type, {
+  [_constants.ROLE.QUESTION]: [_index.TextLayout.type, {
     raw: true
   }],
-  [_constants.ROLE.SOURCES]: [_index2.HorizontalLayout.type, {
+  [_constants.ROLE.SOURCES]: [_index.HorizontalLayout.type, {
     incremental: true,
     itemType: 'article',
     templates: {
@@ -158,4 +157,4 @@ class HybridSearch extends _base.default {
   }
 }
 exports.default = HybridSearch;
-(0, _index3.makeConfigurable)(HybridSearch.prototype, [_constants.WORKFLOW_CONFIGURABLE.PAGINATION, _constants.WORKFLOW_CONFIGURABLE.FILTERS]);
+(0, _index2.makeConfigurable)(HybridSearch.prototype, [_constants.WORKFLOW_CONFIGURABLE.PAGINATION, _constants.WORKFLOW_CONFIGURABLE.FILTERS]);

package/dist/cjs/workflow/options/options.js

@@ -13,6 +13,7 @@ var _trackers = require("./trackers.js");
 var _interactions = require("./interactions.js");
 var _filters = require("./filters.js");
 var _pagination = require("./pagination.js");
+var _templates = require("./templates.js");
 const FEATURES = [{
   key: _constants.WORKFLOW_CONFIGURABLE.API,
   normalize: _api.normalizeApiOptions,
@@ -41,6 +42,10 @@ const FEATURES = [{
   key: _constants.WORKFLOW_CONFIGURABLE.PAGINATION,
   normalize: _pagination.normalizePaginationOptions,
   merge: _pagination.mergePaginationOptions
+}, {
+  key: _constants.WORKFLOW_CONFIGURABLE.TEMPLATES,
+  normalize: _templates.normalizeTemplatesOptions,
+  merge: _templates.mergeTemplatesOptions
 }];
 class WorkflowContextOptions {
   constructor() {

package/dist/cjs/workflow/options/templates.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeTemplatesOptions = mergeTemplatesOptions;
+exports.normalizeTemplatesOptions = normalizeTemplatesOptions;
+var _utils = require("./utils.js");
+function normalizeTemplatesOptions(options = {}) {
+  const normalize = {};
+  for (const [key, args] of Object.entries(options)) {
+    normalize[key] = normalizeTemplateOptions(args);
+  }
+  return normalize;
+}
+function normalizeTemplateOptions(args) {
+  // TODO: if object, make it function arguments
+  return args === undefined ? undefined : typeof args !== 'function' ? () => args : args;
+}
+function mergeTemplatesOptions(...optionsList) {
+  return (0, _utils.mergeOptions)(optionsList, (merged, options) => {
+    for (const [key, args] of Object.entries(options)) {
+      merged[key] = mergeTemplateOptions(merged[key], args);
+    }
+    return merged;
+  });
+}
+function mergeTemplateOptions(base, overrides) {
+  return normalizeTemplateOptions(overrides) || base;
+}

package/dist/cjs/workflow/processors.js

@@ -327,7 +327,7 @@ function buildBaseInteraction(args) {
     }
   };
   if ((0, _constants.isPerformanceEventType)(type)) {
-    if ((0, _constants.isProductRole)(role)) {
+    if (areProducts(role, items)) {
       payload.product_ids = (items || []).map(v => typeof v === 'string' ? v : v.product_id).filter(v => v);
     } else {
       payload.product_ids = [];
@@ -345,6 +345,9 @@ function buildBaseInteraction(args) {
   }
   return (0, _commons.trimObj)(payload);
 }
+function areProducts(role, items = []) {
+  return (0, _constants.isProductRole)(role) || items.length > 0 && typeof items[0] === 'object' && items[0].product_id;
+}
 function writeAffiliationInfoToInteraction(payload, args) {
   if (args.role !== _constants.ROLE.AFFILIATION) {
     return payload;

package/package.json

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

package/src/actor/views.js

@@ -1,4 +1,4 @@
-import { defineValues, delegateGetters, trimObj } from '@miso.ai/commons';
+import { defineValues, delegateGetters } from '@miso.ai/commons';
 import { ROLE } from '../constants.js';
 import * as fields from './fields.js';
 import ViewActor from './view.js';

package/src/affiliation/index.js

@@ -12,21 +12,18 @@ export function processData(data) {
 }
 
 function processValue(value) {
-  /*
   if (value.affiliation_products) {
     const { affiliation_products, ...rest } = value;
     value = {
       ...rest,
       affiliation: processMisoData(affiliation_products),
     };
-  } else
-  */
-  if (value.sovrn_aff) {
+  } else if (value.sovrn_aff) {
     const { sovrn_aff, ...rest } = value;
     value = {
       ...rest,
       affiliation: processSovrnData(sovrn_aff),
-    }
+    };
   }
   return postProcessValue(value);
 }

package/src/constants.js

@@ -130,4 +130,5 @@ export const WORKFLOW_CONFIGURABLE = Object.freeze({
   INTERACTIONS: 'interactions',
   FILTERS: 'filters',
   PAGINATION: 'pagination',
+  TEMPLATES: 'templates',
 });

package/src/defaults/ask/controls.js

@@ -1,31 +1,39 @@
 import { followUp as followUpTemplate } from './templates.js';
 
-export function wireFollowUps(client, element, { template = followUpTemplate, ...options } = {}) {
+export function wireFollowUps(client, element, options) {
   if (!client) {
     throw new Error('client is required');
   }
+  // backward compatible
+  setFollowUpTemplate(client, options);
+  replaceFollowUpsElement(element);
+}
+
+function setFollowUpTemplate(client, { template = followUpTemplate, ...options } = {}) {
   if (typeof template !== 'function') {
     throw new Error('template must be a function or undefined');
   }
-  if (!element) {
-    return;
+  const hasExtraOptions = Object.keys(options).length > 0;
+  if (template === followUpTemplate && !hasExtraOptions) {
+    return; // same as default
   }
-  const context = client.ui.asks;
-  const rootWorkflow = client.ui.ask;
-
-  // 1. when an answer is fully populated, insert a new section for the follow-up question
-  context.on('done', (event) => {
-    element.insertAdjacentHTML('beforeend', template({ ...options, parentQuestionId: event.workflow.questionId }));
-  });
-  // 2. if user starts over, clean up existing follow-up questions
-  rootWorkflow.on('loading', () => {
-    // clean up the entire follow-ups section
-    element.innerHTML = '';
-    // destroy all follow-up workflows
-    context.reset({ root: false });
+  client.ui.asks.useTemplates({
+    followUp: hasExtraOptions ? (args) => template({ ...options, ...args }) : template,
   });
 }
 
+function replaceFollowUpsElement(element) {
+  if (!element || element.tagName.toLowerCase() === 'miso-follow-ups') {
+    return;
+  }
+  // replace element with <miso-follow-ups>, carrying over attributes
+  const newElement = document.createElement('miso-follow-ups');
+  for (const { name, value } of element.attributes) {
+    newElement.setAttribute(name, value);
+  }
+  element.parentNode.replaceChild(newElement, element);
+}
+
 export function wireRelatedResources(client, element) {
   if (!client) {
     throw new Error('client is required');

package/src/defaults/ask/templates.js

@@ -77,8 +77,8 @@ class Sections extends _Sections {
   }
 
   followUps(options) {
-    const { classPrefix, features = {} } = options;
-    return features.followUpQuestions === false ? '' : `<div id="${classPrefix}__follow-ups" class="${classPrefix}__follow-ups"></div>`;
+    const { features = {} } = options;
+    return features.followUpQuestions === false ? '' : `<miso-follow-ups id="miso-ask-combo__follow-ups" class="miso-ask-combo__follow-ups"></miso-follow-ups>`;
   }
 
   relatedResourcesSection(options) {

package/src/element/context/index.js

@@ -0,0 +1 @@
+export { default as MisoFollowUpsElement } from './miso-follow-ups.js';

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

@@ -0,0 +1,53 @@
+import MisoStubElement from '../util/miso-stub.js';
+import { getClient } from '../utils.js';
+
+export default class MisoContextElement extends MisoStubElement {
+
+  static get observedAttributes() {
+    return MisoStubElement.observedAttributes;
+  }
+
+  constructor() {
+    super();
+    this._context = undefined;
+  }
+
+  // properties //
+  get context() {
+    return this._context;
+  }
+
+  set context(context) {
+    this._setContext(context);
+  }
+
+  // lifecycle //
+  async connectedCallback() {
+    super.connectedCallback();
+    const client = this._client = await getClient(MisoContextElement);
+    if (document.body.contains(this)) { // in case already disconnected
+      this._setContext(this._getContext(client));
+    }
+  }
+
+  disconnectedCallback() {
+    this._setContext(undefined);
+    super.disconnectedCallback();
+  }
+
+  _getContext(client) {
+    throw new Error('Unimplemented');
+  }
+
+  _setContext(context) {
+    if (this._context === context) {
+      return;
+    }
+    const oldContext = this._context;
+    this._context = context;
+    this._onContext(context, oldContext);
+  }
+
+  _onContext() {}
+
+}

package/src/element/context/miso-follow-ups.js

@@ -0,0 +1,62 @@
+import MisoContextElement from './miso-context.js';
+
+const TAG_NAME = 'miso-follow-ups';
+
+export default class MisoFollowUpsElement extends MisoContextElement {
+
+  static get tagName() {
+    return TAG_NAME;
+  }
+
+  static get observedAttributes() {
+    return MisoContextElement.observedAttributes;
+  }
+
+  constructor() {
+    super();
+    this._unsubscribes = [];
+  }
+
+  _getContext(client) {
+    return client.ui.asks;
+  }
+
+  _onContext(context, oldContext) {
+    if (context === oldContext) {
+      return;
+    }
+    this._unwire();
+    this._wire(context);
+  }
+
+  _unwire() {
+    for (const unsubscribe of this._unsubscribes || []) {
+      unsubscribe();
+    }
+    this._unsubscribes = [];
+  }
+
+  _wire(context) {
+    if (!context) {
+      return;
+    }
+
+    // 1. when an answer is fully populated, insert a new section for the follow-up question
+    this._unsubscribes.push(context.on('done', (event) => {
+      const template = event.workflow._options.resolved.templates.followUp;
+      if (!template) {
+        return;
+      }
+      this.insertAdjacentHTML('beforeend', template({ parentQuestionId: event.workflow.questionId }));
+    }));
+
+    // 2. if user starts over, clean up existing follow-up questions
+    this._unsubscribes.push(context.root.on('loading', () => {
+      // clean up the entire follow-ups section
+      this.innerHTML = '';
+      // destroy all follow-up workflows
+      context.reset({ root: false });
+    }));
+  }
+
+}

package/src/element/index.js

@@ -1,7 +1,8 @@
 import * as containers from './container/index.js';
 import * as roles from './role/index.js';
+import * as contexts from './context/index.js';
 import * as combos from './combo/index.js';
 
-export { containers, roles, combos };
+export { containers, roles, contexts, combos };
 
 export * from './util/index.js';

package/src/layout/affiliation/affiliation.js

@@ -221,11 +221,6 @@ export default class AffiliationLayout extends CollectionLayout {
     this.itemIndex--;
   }
 
-  _getItems(state) {
-    const { products } = state.value || {};
-    return products;
-  }
-
   _render(element, states, controls) {
     super._render(element, states, controls);
     // sync again for incremental item rendering

package/src/layout/list/collection.js

@@ -168,7 +168,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
   }
 
   _getItems(state) {
-    return state.value;
+    return state.value && (state.value.products || state.value);
   }
 
   _getListElement(element) {

package/src/plugin.js

@@ -10,6 +10,7 @@ import * as traits from './trait/index.js';
 import { loadStylesIfNecessary } from './styles.js';
 
 import MisoContainerElement from './element/container/miso-container.js';
+import MisoContextElement from './element/context/miso-context.js';
 import MisoComboElement from './element/combo/miso-combo.js';
 
 const PLUGIN_ID = 'std:ui';
@@ -52,15 +53,16 @@ export default class UiPlugin extends Component {
     }
 
     // custom elements
-    const { containers, roles, combos, ...others } = elements;
+    const { containers, roles, combos, contexts, ...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, MisoComboElement];
+    const ElementSuperClasses = [MisoContainerElement, MisoContextElement, MisoComboElement];
     for (const ElementClass of [...ElementSuperClasses, ...ElementClasses]) {
       ElementClass.MisoClient = MisoClient; // TODO: find better way
     }

package/src/version.js

@@ -1 +1 @@
-export default '1.12.1';
+export default '1.12.2-beta.1';

package/src/workflow/ask.js

@@ -6,6 +6,7 @@ import { OptionListLayout, ListLayout, SearchBoxLayout, TypewriterLayout } from
 import { mergeInteraction } from './processors.js';
 import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 import { mappingSuggestionsData } from './processors.js';
+import { followUp as followUpTemplate } from '../defaults/ask/templates.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS,
@@ -36,11 +37,16 @@ const DEFAULT_TRACKERS = Object.freeze({
   },
 });
 
+const DEFAULT_TEMPLATES = Object.freeze({
+  followUp: followUpTemplate,
+});
+
 const DEFAULT_OPTIONS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_OPTIONS,
   api: DEFAULT_API_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
+  templates: DEFAULT_TEMPLATES,
 });
 
 const ROLES_OPTIONS = mergeRolesOptions(AnswerBasedWorkflow.ROLES_OPTIONS, {

package/src/workflow/asks.js

@@ -1,5 +1,27 @@
+import { WORKFLOW_CONFIGURABLE } from '../constants.js';
 import WorkflowContext from './context.js';
 import Ask from './ask.js';
+import { makeConfigurable } from './options/index.js';
+
+const DEFAULT_AUTO_NEXT_OPTIONS = { event: 'done' };
+
+function autoNextOptionsAsPredicate(options = DEFAULT_AUTO_NEXT_OPTIONS) {
+  if (options === true) {
+    options = DEFAULT_AUTO_NEXT_OPTIONS;
+  }
+  if (typeof options === 'string') {
+    options = { event: options };
+  }
+  switch (typeof options) {
+    case 'object':
+      // TODO: support more options
+      return event => options.event === event._event;
+    case 'function':
+      return options;
+    default:
+      return false;
+  }
+}
 
 export default class Asks extends WorkflowContext {
 
@@ -8,6 +30,7 @@ export default class Asks extends WorkflowContext {
     this._byQid = new Map();
     this._byPqid = new Map();
     this._root = new Ask(this); // initialize with default workflow
+    this._events.on('*', event => this._createNextIfNecessary(event));
   }
 
   get root() {
@@ -59,4 +82,18 @@ export default class Asks extends WorkflowContext {
     }
   }
 
+  autoNext(options) {
+    this._autoNextFn = autoNextOptionsAsPredicate(options);
+  }
+
+  _createNextIfNecessary(event) {
+    if (!this._autoNextFn || !this._autoNextFn(event)) {
+      return;
+    }
+    const { workflow } = event;
+    workflow && workflow.getOrCreateNext();
+  }
+
 }
+
+makeConfigurable(Asks.prototype, [WORKFLOW_CONFIGURABLE.TEMPLATES]);

package/src/workflow/context.js

@@ -5,6 +5,7 @@ export default class WorkflowContext extends Component {
 
   constructor(name, plugin, client) {
     super(name, plugin);
+    this._name = name;
     this._plugin = plugin;
     this._client = client;
     this._options = new WorkflowContextOptions();

package/src/workflow/hybrid-search.js

@@ -1,5 +1,4 @@
 import { API } from '@miso.ai/commons';
-import { InteractionsActor } from '../actor/index.js';
 import Workflow from './base.js';
 import SearchBasedWorkflow from './search-based.js';
 import AnswerBasedWorkflow from './answer-based.js';

package/src/workflow/options/options.js

@@ -7,6 +7,7 @@ import { normalizeTrackersOptions, mergeTrackersOptions } from './trackers.js';
 import { normalizeInteractionsOptions, mergeInteractionsOptions } from './interactions.js';
 import { normalizeFiltersOptions, mergeFiltersOptions } from './filters.js';
 import { normalizePaginationOptions, mergePaginationOptions } from './pagination.js';
+import { normalizeTemplatesOptions, mergeTemplatesOptions } from './templates.js';
 
 const FEATURES = [
   {
@@ -44,6 +45,11 @@ const FEATURES = [
     normalize: normalizePaginationOptions,
     merge: mergePaginationOptions,
   },
+  {
+    key: WORKFLOW_CONFIGURABLE.TEMPLATES,
+    normalize: normalizeTemplatesOptions,
+    merge: mergeTemplatesOptions,
+  },
 ];
 
 

package/src/workflow/options/templates.js

@@ -0,0 +1,27 @@
+import { mergeOptions } from './utils.js';
+
+export function normalizeTemplatesOptions(options = {}) {
+  const normalize = {};
+  for (const [key, args] of Object.entries(options)) {
+    normalize[key] = normalizeTemplateOptions(args);
+  }
+  return normalize;
+}
+
+function normalizeTemplateOptions(args) {
+  // TODO: if object, make it function arguments
+  return args === undefined ? undefined : typeof args !== 'function' ? () => args : args;
+}
+
+export function mergeTemplatesOptions(...optionsList) {
+  return mergeOptions(optionsList, (merged, options) => {
+    for (const [key, args] of Object.entries(options)) {
+      merged[key] = mergeTemplateOptions(merged[key], args);
+    }
+    return merged;
+  });
+}
+
+function mergeTemplateOptions(base, overrides) {
+  return normalizeTemplateOptions(overrides) || base;
+}

package/src/workflow/processors.js

@@ -245,7 +245,7 @@ export function buildBaseInteraction(args) {
   };
 
   if (isPerformanceEventType(type)) {
-    if (isProductRole(role)) {
+    if (areProducts(role, items)) {
       payload.product_ids = (items || []).map(v => typeof v === 'string' ? v : v.product_id).filter(v => v);
     } else {
       payload.product_ids = [];
@@ -266,6 +266,10 @@ export function buildBaseInteraction(args) {
   return trimObj(payload);
 }
 
+function areProducts(role, items = []) {
+  return isProductRole(role) || (items.length > 0 && typeof items[0] === 'object' && items[0].product_id);
+}
+
 export function writeAffiliationInfoToInteraction(payload, args) {
   if (args.role !== ROLE.AFFILIATION) {
     return payload;