@miso.ai/client-sdk-ui 1.9.1-beta.0 → 1.9.1-beta.2

package/dist/cjs/combo/ask/elements.js

@@ -5,23 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var _constants = require("./constants.js");
+var _index = require("../../defaults/ask/index.js");
 class AskComboElements {
   constructor(root) {
+    let {
+      classPrefix = _index.constants.CLASS_PREFIX
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     if (!root) {
       throw new Error('Root element is required');
     }
     (0, _commons.defineValues)(this, {
       root,
-      followUpsSection: root.querySelector(`#${_constants.PREFIX}__follow-ups`),
-      relatedResourcesContainer: root.querySelector(`#${_constants.PREFIX}__related-resources miso-ask`)
+      followUpsSection: root.querySelector(`.${classPrefix}__follow-ups`),
+      relatedResourcesContainer: root.querySelector(`.${classPrefix}__related-resources miso-ask`)
     });
-    if (!this.followUpsSection) {
-      throw new Error(`Follow-ups section element not found.`);
-    }
-    if (!this.relatedResourcesContainer) {
-      throw new Error(`Related resources container element not found.`);
-    }
   }
 }
 exports.default = AskComboElements;

package/dist/cjs/combo/ask/index.js

@@ -45,7 +45,7 @@ class AskCombo extends _base.default {
   }
   async _start() {
     await (0, _commons.waitForDomContentLoaded)();
-    await this.MisoClient.cmdDone;
+    await this.waitForElement();
 
     // setup MisoClient
     await this._setupMisoClient();
@@ -96,7 +96,7 @@ class AskCombo extends _base.default {
       templates = {}
     } = options;
     element.innerHTML = templates.root(options);
-    this._elements = new _elements.default(element);
+    this._elements = new _elements.default(element, options);
   }
   async _createClientInstance() {
     this._client = new MisoClient(this.resolvedOptions);
@@ -108,40 +108,43 @@ class AskCombo extends _base.default {
       resolvedOptions: options
     } = this;
     const {
-      templates = {}
+      templates = {},
+      features = {}
     } = options;
     const context = client.ui.asks;
     const rootWorkflow = client.ui.ask;
 
-    // TODO: set placeholder is present in options
-
-    // when a answer is fully populated, insert a new section for the follow-up question
-    context.on('done', _ref => {
-      let {
-        workflow
-      } = _ref;
-      elements.followUpsSection.insertAdjacentHTML('beforeend', templates.followUp(Object.assign({}, options, {
-        parentQuestionId: workflow.questionId
-      })));
-    });
-
-    // when a new query starts, associate the last section container (for related resources) to that workflow
-    context.on('loading', _ref2 => {
-      let {
-        workflow
-      } = _ref2;
-      elements.relatedResourcesContainer.workflow = workflow;
-    });
+    // TODO: set placeholder if present in options
 
-    // if user starts over, clean up current follow-up questions
-    rootWorkflow.on('loading', () => {
-      // clean up the entire follow-ups section
-      elements.followUpsSection.innerHTML = '';
-      // destroy all follow-up workflows
-      context.reset({
-        root: false
+    if (elements.followUpsSection && features.followUpQuestions !== false) {
+      // when a answer is fully populated, insert a new section for the follow-up question
+      context.on('done', _ref => {
+        let {
+          workflow
+        } = _ref;
+        elements.followUpsSection.insertAdjacentHTML('beforeend', templates.followUp(Object.assign({}, options, {
+          parentQuestionId: workflow.questionId
+        })));
       });
-    });
+      // if user starts over, clean up current follow-up questions
+      rootWorkflow.on('loading', () => {
+        // clean up the entire follow-ups section
+        elements.followUpsSection.innerHTML = '';
+        // destroy all follow-up workflows
+        context.reset({
+          root: false
+        });
+      });
+    }
+    if (elements.relatedResourcesContainer && features.relatedResources !== false && features.followUpQuestions !== false) {
+      // when a new query starts, associate the last section container (for related resources) to that workflow
+      context.on('loading', _ref2 => {
+        let {
+          workflow
+        } = _ref2;
+        elements.relatedResourcesContainer.workflow = workflow;
+      });
+    }
 
     // start query if specified in URL
     rootWorkflow.autoQuery();

package/dist/cjs/combo/base.js

@@ -27,8 +27,13 @@ class Combo extends _commons.Component {
   get element() {
     return this._element;
   }
+  async waitForElement() {
+    return this._element || (this._elementRes || (this._elementRes = new _commons.Resolution())).promise;
+  }
   set element(element) {
+    // TODO: guard against multiple element assignment
     this._element = element;
+    this._elementRes && this._elementRes.resolve(element);
   }
   start(options) {
     if (this._started) {

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

@@ -7,90 +7,124 @@ exports.followUp = followUp;
 exports.root = root;
 var _constants = require("./constants.js");
 var DEFAULT_PHRASES = _interopRequireWildcard(require("./phrases.js"));
+const _excluded = ["classPrefix", "circledCitationIndex"],
+  _excluded2 = ["classes"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// TODO: refactor
-// TODO: make ids constants
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 // TODO: placeholder
 
 function root() {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-    classPrefix = _constants.CLASS_PREFIX
-  } = options;
-  return `
-<section id="${classPrefix}__question" class="${classPrefix}__section ${classPrefix}__question">
-  <miso-ask class="${classPrefix}__query-container">
-    <miso-query></miso-query>
-  </miso-ask>
-</section>
-<section class="${classPrefix}__section ${classPrefix}__answer">
-  ${answer(options)}
-  ${sources(options)}
-  <miso-ask class="${classPrefix}__bottom-spacing-container" visible-when="ongoing"></miso-ask>
-</section>
-<div id="${classPrefix}__follow-ups" class="${classPrefix}__follow-ups"></div>
-<section id="${classPrefix}__related-resources" class="${classPrefix}__section ${classPrefix}__related-resources">
-  <miso-ask visible-when="nonempty" logo="true">
-    <h2 class="${classPrefix}__phrase ${classPrefix}__related-resources-phrase">${phraseText(options, 'relatedResources')}</h2>
-    <miso-related-resources></miso-related-resources>
-  </miso-ask>
-</section>`.trim();
+  options = normalizeOptions(options);
+  return [section(options, {
+    name: 'question'
+  }, [container(options, {
+    name: 'query'
+  }, '<miso-query></miso-query>')]), section(options, {
+    name: 'answer'
+  }, answerGroup(options)), followUps(options), relatedResources(options)].join('');
 }
 ;
 function followUp() {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-    classPrefix = _constants.CLASS_PREFIX,
-    parentQuestionId
-  } = options;
-  return `
-<section class="${classPrefix}__section ${classPrefix}__follow-up">
-  <miso-ask class="${classPrefix}__query-suggestions-container" visible-when="initial+nonempty" parent-question-id="${parentQuestionId}">
-    <h3 class="${classPrefix}__phrase ${classPrefix}__related-questions-phrase">${phraseText(options, 'relatedQuestions')}</h3>
-    <miso-query-suggestions></miso-query-suggestions>
-  </miso-ask>
-  <miso-ask class="${classPrefix}__query-container" visible-when="initial loading" parent-question-id="${parentQuestionId}">
-    <miso-query></miso-query>
-  </miso-ask>
-  ${answer(options)}
-  ${sources(options)}
-  <miso-ask class="${classPrefix}__bottom-spacing-container" visible-when="ongoing" parent-question-id="${parentQuestionId}"></miso-ask>
-</section>`.trim();
+  options = normalizeOptions(options);
+  return section(options, {
+    name: 'follow-up'
+  }, [querySuggestions(options), container(options, {
+    name: 'query',
+    visibleWhen: 'initial loading'
+  }, '<miso-query></miso-query>'), ...answerGroup(options)]);
 }
 ;
 
-// helpers //
-function answer(options) {
+// options //
+function normalizeOptions() {
+  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let {
+      classPrefix = _constants.CLASS_PREFIX,
+      circledCitationIndex = true
+    } = _ref,
+    options = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return Object.assign({
+    classPrefix,
+    circledCitationIndex
+  }, options);
+}
+
+// sections & containers //
+function followUps(options) {
   const {
-    classPrefix = _constants.CLASS_PREFIX
+    classPrefix,
+    features = {}
   } = options;
-  return `
-${containerOpenTag('answer', Object.assign({}, options, {
+  return features.followUpQuestions === false ? '' : `<div id="${classPrefix}__follow-ups" class="${classPrefix}__follow-ups"></div>`;
+}
+function relatedResources(options) {
+  const {
+    features = {},
+    logo = true
+  } = options;
+  const body = features.relatedResources === false ? '' : container(options, {
+    name: 'related-resources',
+    visibleWhen: 'nonempty',
+    logo
+  }, [phrase(options, {
+    name: 'related-resources',
+    tag: 'h2'
+  }), '<miso-related-resources></miso-related-resources>']);
+  return section(options, {
+    name: 'related-resources'
+  }, body);
+}
+function querySuggestions(options) {
+  const {
+    features = {}
+  } = options;
+  return features.querySuggestions === false ? '' : container(options, {
+    name: 'query-suggestions',
+    visibleWhen: 'initial+nonempty'
+  }, [phrase(options, {
+    name: 'related-questions',
+    tag: 'h3'
+  }), '<miso-query-suggestions></miso-query-suggestions>']);
+}
+function answerGroup(options) {
+  return [answer(options), sources(options), container(options, {
+    name: 'bottom-spacing',
+    visibleWhen: 'ongoing'
+  })];
+}
+function answer(options) {
+  return container(options, {
+    name: 'answer',
     visibleWhen: 'ready'
-  }))}
-  ${options.parentQuestionId ? '<hr>' : ''}
-  <div class="${classPrefix}__phrase ${classPrefix}__question-phrase">${phraseText(options, 'question')}</div>
-  <miso-question></miso-question>
-  <miso-answer></miso-answer>
-  <miso-feedback></miso-feedback>
-</miso-ask>`.trim();
+  }, [options.parentQuestionId ? '<hr>' : '', phrase(options, {
+    name: 'question',
+    tag: 'div'
+  }), '<miso-question></miso-question>', '<miso-answer></miso-answer>', '<miso-feedback></miso-feedback>']);
 }
 ;
 function sources(options) {
-  const {
-    classPrefix = _constants.CLASS_PREFIX
-  } = options;
-  return `
-${containerOpenTag('sources', Object.assign({}, options, {
+  return container(options, {
+    name: 'sources',
     visibleWhen: 'nonempty'
-  }))}
-  <hr>
-  <h3 class="${classPrefix}__phrase ${classPrefix}__sources-phrase">${phraseText(options, 'sources')}</h3>
-  <miso-sources></miso-sources>
-</miso-ask>`.trim();
+  }, ['<hr>', phrase(options, {
+    name: 'sources',
+    tag: 'h3'
+  }), '<miso-sources></miso-sources>']);
 }
 ;
+function phrase(options, _ref2) {
+  let {
+    name,
+    tag = 'div'
+  } = _ref2;
+  const {
+    classPrefix
+  } = options;
+  return `<${tag} class="${classPrefix}__phrase ${classPrefix}__${name}-phrase">${phraseText(options, kebabToLowerCamel(name))}</${tag}>`;
+}
 function phraseText(options, key) {
   const {
     phrases = {}
@@ -105,24 +139,67 @@ function phraseText(options, key) {
       return '';
   }
 }
-function containerOpenTag(name, _ref) {
+function section(_ref3, _ref4, body) {
+  let {
+    classPrefix
+  } = _ref3;
+  let {
+    name
+  } = _ref4;
+  return element('section', {
+    classes: [`${classPrefix}__section`, `${classPrefix}__${name}`]
+  }, body);
+}
+function container(_ref5, _ref6, body) {
   let {
+    classPrefix,
+    circledCitationIndex,
+    parentQuestionId
+  } = _ref5;
+  let {
+    name,
     visibleWhen,
-    classPrefix = _constants.CLASS_PREFIX,
-    logo = false,
-    circledCitationIndex = true,
+    logo = false
+  } = _ref6;
+  const classes = [`${classPrefix}__${name}-container`];
+  circledCitationIndex && classes.push('miso-circled-citation-index');
+  return element('miso-ask', {
+    classes,
+    visibleWhen,
+    logo,
     parentQuestionId
-  } = _ref;
-  let className = `${classPrefix}__${name}-container`;
-  if (circledCitationIndex) {
-    className += ` miso-circled-citation-index`;
+  }, body);
+}
+function element(tag) {
+  let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let body = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  if (typeof attributes === 'string' || Array.isArray(attributes)) {
+    body = attributes;
+    attributes = {};
   }
-  const attributes = [` class="${className}"`, ` logo="${logo ? 'true' : 'false'}"`];
-  if (visibleWhen) {
-    attributes.push(` visible-when="${visibleWhen}"`);
+  return `<${tag}${attrs(attributes)}>${Array.isArray(body) ? body.join('') : body}</${tag}>`;
+}
+function attrs() {
+  let _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let {
+      classes = []
+    } = _ref7,
+    attributes = _objectWithoutPropertiesLoose(_ref7, _excluded2);
+  let str = ``;
+  if (classes.length) {
+    str += ` class="${classes.join(' ')}"`;
   }
-  if (parentQuestionId) {
-    attributes.push(` parent-question-id="${parentQuestionId}"`);
+  for (const name in attributes) {
+    const value = attributes[name];
+    if (value !== undefined) {
+      str += ` ${lowerCamelToKebab(name)}="${value}"`;
+    }
   }
-  return `<miso-ask${attributes.join('')}>`;
+  return str;
+}
+function kebabToLowerCamel(str) {
+  return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+}
+function lowerCamelToKebab(str) {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
 }

package/dist/cjs/element/role/miso-component.js

@@ -27,7 +27,6 @@ class MisoComponentElement extends HTMLElement {
       });
     }
   }
-
   get role() {
     return this._role;
   }

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

@@ -95,7 +95,6 @@ class SearchBoxLayout extends _template.default {
     this._contexts = new WeakMap();
     this._suggestionItems = new WeakMap(); // TODO: put them on elements as layout can be potentially replaced
   }
-
   initialize(view) {
     const {
       autocomplete

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

@@ -90,7 +90,6 @@ class CarouselLayout extends _collection.default {
     if (this._itemCount === undefined) {
       return; // data not ready yet
     }
-
     const grid = this._findGridElement();
     if (!grid) {
       return;

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

@@ -214,7 +214,8 @@ class CollectionLayout extends _template.default {
     this._view._events.emit('click', {
       session,
       value,
-      element
+      element,
+      domEvent: event
     });
   }
   destroy() {

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

@@ -73,7 +73,6 @@ class RadioLayout extends _template.default {
     if (states.rendered) {
       controls.skip(); // only render once
     }
-
     return super._preprocess(states, controls);
   }
   _handleClick(_ref2) {

package/dist/cjs/layout/raf.js

@@ -85,7 +85,6 @@ class RafLayout {
     if (!this._requested) {
       return; // just in case
     }
-
     this._requested = false;
     this._applyRender();
   }
@@ -94,7 +93,6 @@ class RafLayout {
     if (!this._pending) {
       return; // just in case
     }
-
     const timestamp = Date.now();
     let [state, {
       notifyUpdate

package/dist/cjs/layout/templates.js

@@ -64,7 +64,6 @@ function productInfoBlock(_ref, _ref2) {
     content += `<hr><div class="${className}__item-price">${price}</div>`;
     // TODO: enhance this
   }
-
   return `<div class="${className}__item-info-container">${content}</div>`;
 }
 function articleInfoBlock(_ref3, _ref4) {

package/dist/cjs/plugin.js

@@ -55,7 +55,6 @@ class UiPlugin extends _commons.Component {
     for (const LayoutClass of LayoutClasses) {
       LayoutClass.MisoClient = MisoClient; // TODO: find better way
     }
-
     for (const LayoutClass of LayoutClasses) {
       this.layouts.register(LayoutClass);
     }
@@ -156,7 +155,6 @@ class Ui {
   get recommendation() {
     return this.recommendations.get(); // get default recommendation unit
   }
-
   get search() {
     return this._search || (this._search = new _index.Search(this._plugin, this._client));
   }

package/dist/cjs/util/bindings.js

@@ -14,7 +14,6 @@ function fallbackListFunction(keyAttrName) {
     }
   }));
 }
-
 class Bindings {
   constructor() {
     let {

package/dist/cjs/util/proxy.js

@@ -72,7 +72,6 @@ class ProxyElement {
       }
     }
   }
-
   _offAllFromCurrentElement() {
     if (this._element) {
       for (const {

package/dist/cjs/util/states.js

@@ -37,7 +37,6 @@ class States {
     this.sessionId = sessionId;
     this._states = new Map(); // productId -> {impression, viewable, click}
   }
-
   getFullState(productId) {
     // when we receive a bind event, impression is trigger, making an entry here
     // so if the state is not found, the product is not present yet => all untracked

package/dist/cjs/util/tracker.js

@@ -42,7 +42,6 @@ function normalizeOptions(options) {
   if (options === false) {
     return false; // turn off all tracking
   }
-
   if (options === true) {
     options = {};
   }

package/dist/cjs/version.js

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

package/dist/cjs/workflow/ask.js

@@ -56,7 +56,6 @@ const DEFAULT_TRACKERS = Object.freeze({
     }
   }
 });
-
 const DEFAULT_OPTIONS = Object.freeze({
   api: DEFAULT_API_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
@@ -94,7 +93,6 @@ class Ask extends _base.default {
     context._events.emit('create', this);
     this.reset(); // create a session so query suggestions can be tracked
   }
-
   get questionId() {
     return this._questionId;
   }

package/dist/cjs/workflow/asks.js

@@ -16,7 +16,6 @@ class Asks extends _context.default {
     this._byPqid = new Map();
     this._root = new _ask.default(this); // initialize with default workflow
   }
-
   get root() {
     return this._root;
   }
@@ -56,7 +55,6 @@ class Asks extends _context.default {
     if (events === undefined) {
       events = !!root; // events are default to be true only when root = true
     }
-
     if (events) {
       this._events.clear();
     }

package/dist/cjs/workflow/base.js

@@ -134,7 +134,6 @@ class Workflow extends _commons.Component {
     if (session.uuid !== this.session.uuid) {
       return; // ignore data for old session or inactive session
     }
-
     this._sessions.start(); // in case session not started yet
 
     data = this._defaultProcessData(data);

package/dist/cjs/workflow/explore.js

@@ -20,7 +20,8 @@ const DEFAULT_API_OPTIONS = Object.freeze({
 const DEFAULT_LAYOUTS = Object.freeze({
   [_constants.ROLE.RELATED_QUESTIONS]: [_index2.ListLayout.type, {
     itemType: 'question'
-  }]
+  }],
+  [_constants.ROLE.QUERY]: [_index2.SearchBoxLayout.type]
 });
 const DEFAULT_TRACKERS = Object.freeze({
   [_constants.ROLE.RELATED_QUESTIONS]: {}
@@ -41,7 +42,7 @@ class Explore extends _base.default {
     });
     this._productId = undefined;
     this._linkFn = undefined;
-    this._unsubscribes.push(this._views.get(_constants.ROLE.RELATED_QUESTIONS).on('click', event => this._handleQuestionClick(event)));
+    this._unsubscribes = [...this._unsubscribes, this._views.get(_constants.ROLE.RELATED_QUESTIONS).on('click', event => this._handleRelatedQuestionClick(event)), this._hub.on(_index.fields.query(), payload => this.query(payload))];
   }
   set productId(value) {
     console.warning('DEPRECATED: use useApi() instead');
@@ -102,7 +103,7 @@ class Explore extends _base.default {
       })
     });
   }
-  _handleQuestionClick(_ref) {
+  _handleRelatedQuestionClick(_ref) {
     let {
         value: question
       } = _ref,
@@ -111,5 +112,15 @@ class Explore extends _base.default {
       question
     })));
   }
+  query() {
+    let {
+      q
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (!this._linkFn) {
+      return;
+    }
+    const url = this._linkFn(q);
+    window.open(url, '_blank');
+  }
 }
 exports.default = Explore;

package/package.json

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

package/src/combo/ask/elements.js

@@ -1,24 +1,17 @@
 import { defineValues } from '@miso.ai/commons';
-import { PREFIX } from './constants.js';
+import { constants } from '../../defaults/ask/index.js';
 
 export default class AskComboElements {
 
-  constructor(root) {
+  constructor(root, { classPrefix = constants.CLASS_PREFIX } = {}) {
     if (!root) {
       throw new Error('Root element is required');
     }
     defineValues(this, {
       root,
-      followUpsSection: root.querySelector(`#${PREFIX}__follow-ups`),
-      relatedResourcesContainer: root.querySelector(`#${PREFIX}__related-resources miso-ask`),
+      followUpsSection: root.querySelector(`.${classPrefix}__follow-ups`),
+      relatedResourcesContainer: root.querySelector(`.${classPrefix}__related-resources miso-ask`),
     });
-
-    if (!this.followUpsSection) {
-      throw new Error(`Follow-ups section element not found.`);
-    }
-    if (!this.relatedResourcesContainer) {
-      throw new Error(`Related resources container element not found.`);
-    }
   }
 
 }

package/src/combo/ask/index.js

@@ -45,7 +45,7 @@ export default class AskCombo extends Combo {
 
   async _start() {
     await waitForDomContentLoaded();
-    await this.MisoClient.cmdDone;
+    await this.waitForElement();
 
     // setup MisoClient
     await this._setupMisoClient();
@@ -89,7 +89,7 @@ export default class AskCombo extends Combo {
     const { element, resolvedOptions: options } = this;
     const { templates = {} } = options;
     element.innerHTML = templates.root(options);
-    this._elements = new AskComboElements(element);
+    this._elements = new AskComboElements(element, options);
   }
 
   async _createClientInstance() {
@@ -98,30 +98,33 @@ export default class AskCombo extends Combo {
 
   async _setupWorkflows() {
     const { client, elements, resolvedOptions: options } = this;
-    const { templates = {} } = options;
+    const { templates = {}, features = {} } = options;
 
     const context = client.ui.asks;
     const rootWorkflow = client.ui.ask;
 
-    // TODO: set placeholder is present in options
-
-    // when a answer is fully populated, insert a new section for the follow-up question
-    context.on('done', ({ workflow }) => {
-      elements.followUpsSection.insertAdjacentHTML('beforeend', templates.followUp({ ...options, parentQuestionId: workflow.questionId }));
-    });
-
-    // when a new query starts, associate the last section container (for related resources) to that workflow
-    context.on('loading', ({ workflow }) => {
-      elements.relatedResourcesContainer.workflow = workflow;
-    });
+    // TODO: set placeholder if present in options
+
+    if (elements.followUpsSection && features.followUpQuestions !== false) {
+      // when a answer is fully populated, insert a new section for the follow-up question
+      context.on('done', ({ workflow }) => {
+        elements.followUpsSection.insertAdjacentHTML('beforeend', templates.followUp({ ...options, parentQuestionId: workflow.questionId }));
+      });
+      // if user starts over, clean up current follow-up questions
+      rootWorkflow.on('loading', () => {
+        // clean up the entire follow-ups section
+        elements.followUpsSection.innerHTML = '';
+        // destroy all follow-up workflows
+        context.reset({ root: false });
+      });
+    }
 
-    // if user starts over, clean up current follow-up questions
-    rootWorkflow.on('loading', () => {
-      // clean up the entire follow-ups section
-      elements.followUpsSection.innerHTML = '';
-      // destroy all follow-up workflows
-      context.reset({ root: false });
-    });
+    if (elements.relatedResourcesContainer && features.relatedResources !== false && features.followUpQuestions !== false) {
+      // when a new query starts, associate the last section container (for related resources) to that workflow
+      context.on('loading', ({ workflow }) => {
+        elements.relatedResourcesContainer.workflow = workflow;
+      });
+    }
 
     // start query if specified in URL
     rootWorkflow.autoQuery();

package/src/combo/base.js

@@ -1,4 +1,4 @@
-import { Component } from '@miso.ai/commons';
+import { Component, Resolution } from '@miso.ai/commons';
 
 export default class Combo extends Component {
   
@@ -23,8 +23,14 @@ export default class Combo extends Component {
     return this._element;
   }
 
+  async waitForElement() {
+    return this._element || (this._elementRes || (this._elementRes = new Resolution())).promise;
+  }
+
   set element(element) {
+    // TODO: guard against multiple element assignment
     this._element = element;
+    this._elementRes && this._elementRes.resolve(element);
   }
 
   start(options) {

package/src/defaults/ask/templates.js

@@ -1,74 +1,95 @@
 import { CLASS_PREFIX } from './constants.js';
 import * as DEFAULT_PHRASES from './phrases.js';
 
-// TODO: refactor
-// TODO: make ids constants
 // TODO: placeholder
 
 export function root(options = {}) {
-  const { classPrefix = CLASS_PREFIX } = options;
-  return `
-<section id="${classPrefix}__question" class="${classPrefix}__section ${classPrefix}__question">
-  <miso-ask class="${classPrefix}__query-container">
-    <miso-query></miso-query>
-  </miso-ask>
-</section>
-<section class="${classPrefix}__section ${classPrefix}__answer">
-  ${answer(options)}
-  ${sources(options)}
-  <miso-ask class="${classPrefix}__bottom-spacing-container" visible-when="ongoing"></miso-ask>
-</section>
-<div id="${classPrefix}__follow-ups" class="${classPrefix}__follow-ups"></div>
-<section id="${classPrefix}__related-resources" class="${classPrefix}__section ${classPrefix}__related-resources">
-  <miso-ask visible-when="nonempty" logo="true">
-    <h2 class="${classPrefix}__phrase ${classPrefix}__related-resources-phrase">${phraseText(options, 'relatedResources')}</h2>
-    <miso-related-resources></miso-related-resources>
-  </miso-ask>
-</section>`.trim();
+  options = normalizeOptions(options);
+  return [
+    section(options, { name: 'question' }, [
+      container(options, { name: 'query' }, '<miso-query></miso-query>'),
+    ]),
+    section(options, { name: 'answer' }, answerGroup(options)),
+    followUps(options),
+    relatedResources(options),
+  ].join('');
 };
 
 export function followUp(options = {}) {
-  const { classPrefix = CLASS_PREFIX, parentQuestionId } = options;
-  return `
-<section class="${classPrefix}__section ${classPrefix}__follow-up">
-  <miso-ask class="${classPrefix}__query-suggestions-container" visible-when="initial+nonempty" parent-question-id="${parentQuestionId}">
-    <h3 class="${classPrefix}__phrase ${classPrefix}__related-questions-phrase">${phraseText(options, 'relatedQuestions')}</h3>
-    <miso-query-suggestions></miso-query-suggestions>
-  </miso-ask>
-  <miso-ask class="${classPrefix}__query-container" visible-when="initial loading" parent-question-id="${parentQuestionId}">
-    <miso-query></miso-query>
-  </miso-ask>
-  ${answer(options)}
-  ${sources(options)}
-  <miso-ask class="${classPrefix}__bottom-spacing-container" visible-when="ongoing" parent-question-id="${parentQuestionId}"></miso-ask>
-</section>`.trim();
+  options = normalizeOptions(options);
+  return section(options, { name: 'follow-up' }, [
+    querySuggestions(options),
+    container(options, { name: 'query', visibleWhen: 'initial loading' }, '<miso-query></miso-query>'),
+    ...answerGroup(options),
+  ]);
 };
 
 
 
-// helpers //
+// options //
+function normalizeOptions({
+  classPrefix = CLASS_PREFIX,
+  circledCitationIndex = true,
+  ...options
+} = {}) {
+  return { classPrefix, circledCitationIndex, ...options };
+}
+
+// sections & containers //
+function followUps(options) {
+  const { classPrefix, features = {} } = options;
+  return features.followUpQuestions === false ? '' : `<div id="${classPrefix}__follow-ups" class="${classPrefix}__follow-ups"></div>`;
+}
+
+function relatedResources(options) {
+  const { features = {}, logo = true } = options;
+  const body = features.relatedResources === false ? '' : container(options, { name: 'related-resources', visibleWhen: 'nonempty', logo }, [
+    phrase(options, { name: 'related-resources', tag: 'h2' }),
+    '<miso-related-resources></miso-related-resources>',
+  ]);
+  return section(options, { name: 'related-resources' }, body);
+}
+
+function querySuggestions(options) {
+  const { features = {} } = options;
+  return features.querySuggestions === false ? '' :
+    container(options, { name: 'query-suggestions', visibleWhen: 'initial+nonempty' }, [
+      phrase(options, { name: 'related-questions', tag: 'h3' }),
+      '<miso-query-suggestions></miso-query-suggestions>',
+    ]);
+}
+
+function answerGroup(options) {
+  return [
+    answer(options),
+    sources(options),
+    container(options, { name: 'bottom-spacing', visibleWhen: 'ongoing' }),
+  ];
+}
+
 function answer(options) {
-  const { classPrefix = CLASS_PREFIX } = options;
-  return `
-${containerOpenTag('answer', { ...options, visibleWhen: 'ready' })}
-  ${ options.parentQuestionId ? '<hr>' : '' }
-  <div class="${classPrefix}__phrase ${classPrefix}__question-phrase">${phraseText(options, 'question')}</div>
-  <miso-question></miso-question>
-  <miso-answer></miso-answer>
-  <miso-feedback></miso-feedback>
-</miso-ask>`.trim();
+  return container(options, { name: 'answer', visibleWhen: 'ready' }, [
+    options.parentQuestionId ? '<hr>' : '',
+    phrase(options, { name: 'question', tag: 'div' }),
+    '<miso-question></miso-question>',
+    '<miso-answer></miso-answer>',
+    '<miso-feedback></miso-feedback>',
+  ]);
 };
 
 function sources(options) {
-  const { classPrefix = CLASS_PREFIX } = options;
-  return `
-${containerOpenTag('sources', { ...options, visibleWhen: 'nonempty' })}
-  <hr>
-  <h3 class="${classPrefix}__phrase ${classPrefix}__sources-phrase">${phraseText(options, 'sources')}</h3>
-  <miso-sources></miso-sources>
-</miso-ask>`.trim();
+  return container(options, { name: 'sources', visibleWhen: 'nonempty' }, [
+    '<hr>',
+    phrase(options, { name: 'sources', tag: 'h3' }),
+    '<miso-sources></miso-sources>',
+  ]);
 };
 
+function phrase(options, { name, tag = 'div' }) {
+  const { classPrefix } = options;
+  return `<${tag} class="${classPrefix}__phrase ${classPrefix}__${name}-phrase">${phraseText(options, kebabToLowerCamel(name))}</${tag}>`;
+}
+
 function phraseText(options, key) {
   const { phrases = {} } = options;
   const fn = phrases[key] || DEFAULT_PHRASES[key];
@@ -82,26 +103,52 @@ function phraseText(options, key) {
   }
 }
 
-function containerOpenTag(name, {
+function section({ classPrefix }, { name }, body) {
+  return element('section', {
+    classes: [`${classPrefix}__section`, `${classPrefix}__${name}`],
+  }, body);
+}
+
+function container({
+  classPrefix,
+  circledCitationIndex,
+  parentQuestionId,
+}, {
+  name,
   visibleWhen,
-  classPrefix = CLASS_PREFIX,
   logo = false,
-  circledCitationIndex = true,
-  parentQuestionId,
-}) {
-  let className = `${classPrefix}__${name}-container`;
-  if (circledCitationIndex) {
-    className += ` miso-circled-citation-index`;
+}, body) {
+  const classes = [`${classPrefix}__${name}-container`];
+  circledCitationIndex && classes.push('miso-circled-citation-index');
+  return element('miso-ask', { classes, visibleWhen, logo, parentQuestionId }, body);
+}
+
+function element(tag, attributes = {}, body = '') {
+  if (typeof attributes === 'string' || Array.isArray(attributes)) {
+    body = attributes;
+    attributes = {};
   }
-  const attributes = [
-    ` class="${className}"`,
-    ` logo="${logo ? 'true' : 'false'}"`,
-  ];
-  if (visibleWhen) {
-    attributes.push(` visible-when="${visibleWhen}"`);
+  return `<${tag}${attrs(attributes)}>${Array.isArray(body) ? body.join('') : body}</${tag}>`;
+}
+
+function attrs({ classes = [], ...attributes } = {}) {
+  let str = ``;
+  if (classes.length) {
+    str += ` class="${classes.join(' ')}"`;
   }
-  if (parentQuestionId) {
-    attributes.push(` parent-question-id="${parentQuestionId}"`);
+  for (const name in attributes) {
+    const value = attributes[name];
+    if (value !== undefined) {
+      str += ` ${lowerCamelToKebab(name)}="${value}"`;
+    }
   }
-  return `<miso-ask${attributes.join('')}>`;
+  return str;
+}
+
+function kebabToLowerCamel(str) {
+  return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+}
+
+function lowerCamelToKebab(str) {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
 }

package/src/layout/list/collection.js

@@ -176,7 +176,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
     }
     const value = element[VALUE];
     const { session } = this._view._state;
-    this._view._events.emit('click', { session, value, element });
+    this._view._events.emit('click', { session, value, element, domEvent: event });
   }
 
   destroy() {

package/src/version.js

@@ -1 +1 @@
-export default '1.9.1-beta.0';
+export default '1.9.1-beta.2';

package/src/workflow/explore.js

@@ -3,7 +3,7 @@ import Workflow from './base.js';
 import { mergeApiOptions } from './options.js';
 import { fields } from '../actor/index.js';
 import { ROLE } from '../constants.js';
-import { ListLayout } from '../layout/index.js';
+import { ListLayout, SearchBoxLayout } from '../layout/index.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: API.GROUP.ASK,
@@ -12,6 +12,7 @@ const DEFAULT_API_OPTIONS = Object.freeze({
 
 const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.RELATED_QUESTIONS]: [ListLayout.type, { itemType: 'question' }],
+  [ROLE.QUERY]: [SearchBoxLayout.type],
 });
 
 const DEFAULT_TRACKERS = Object.freeze({
@@ -36,7 +37,12 @@ export default class Explore extends Workflow {
     });
     this._productId = undefined;
     this._linkFn = undefined;
-    this._unsubscribes.push(this._views.get(ROLE.RELATED_QUESTIONS).on('click', event => this._handleQuestionClick(event)));
+
+    this._unsubscribes = [
+      ...this._unsubscribes,
+      this._views.get(ROLE.RELATED_QUESTIONS).on('click', event => this._handleRelatedQuestionClick(event)),
+      this._hub.on(fields.query(), payload => this.query(payload)),
+    ];
   }
 
   set productId(value) {
@@ -89,8 +95,16 @@ export default class Explore extends Workflow {
     };
   }
 
-  _handleQuestionClick({ value: question, ...event }) {
+  _handleRelatedQuestionClick({ value: question, ...event }) {
     this._events.emit('select', Object.freeze({ ...event, question }));
   }
 
+  query({ q } = {}) {
+    if (!this._linkFn) {
+      return;
+    }
+    const url = this._linkFn(q);
+    window.open(url, '_blank');
+  }
+
 }

package/dist/cjs/combo/ask/constants.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PREFIX = void 0;
-const PREFIX = exports.PREFIX = 'miso-ask-combo';

package/src/combo/ask/constants.js

@@ -1 +0,0 @@
-export const PREFIX = 'miso-ask-combo';