@miso.ai/client-sdk-ui 1.9.0 → 1.9.1-beta.1

package/dist/cjs/actor/views.js

@@ -218,7 +218,7 @@ class Views {
   get(role) {
     return this._actor.get(role).interface;
   }
-  get views() {
+  get all() {
     return this._actor.views.map(view => view.interface);
   }
 }

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

@@ -5,30 +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,
-      rootQuery: root.querySelector(`#${_constants.PREFIX}__question miso-query`),
-      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.rootQuery) {
-      throw new Error(`Root question query element not found.`);
-    }
-    if (!this.followUpsSection) {
-      throw new Error(`Follow-ups section element not found.`);
-    }
-    if (!this.relatedResourcesContainer) {
-      throw new Error(`Related resources container element not found.`);
-    }
-  }
-  get rootInput() {
-    return this.rootQuery.querySelector(`[data-role="input"]`);
   }
 }
 exports.default = AskComboElements;

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var _index = require("../../actor/index.js");
-var _constants = require("../../constants.js");
 var _base = _interopRequireDefault(require("../base.js"));
 var _options = _interopRequireDefault(require("./options.js"));
 var _elements = _interopRequireDefault(require("./elements.js"));
@@ -47,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();
@@ -98,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);
@@ -110,59 +108,46 @@ 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(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;
-    });
-
-    // 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
+    // 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', _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
+        });
       });
-    });
-
-    // wait for miso-query content to be populated
-    const QUERY = _index.fields.view(_constants.ROLE.QUERY);
-    if (!rootWorkflow.states[QUERY]) {
-      await rootWorkflow._hub.once(QUERY);
     }
-
-    // start query if specified in URL
-    const {
-      q
-    } = options;
-    if (q) {
-      elements.rootInput.value = q;
-      rootWorkflow.query({
-        q
+    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;
       });
-    } else {
-      elements.rootInput.focus();
     }
+
+    // start query if specified in URL
+    rootWorkflow.autoQuery();
   }
 }
 exports.default = AskCombo;

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

@@ -5,11 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var templates = _interopRequireWildcard(require("./templates.js"));
-var phrases = _interopRequireWildcard(require("./phrases.js"));
+var _index = require("../../defaults/ask/index.js");
 const _excluded = ["api_key", "api_host", "templates", "phrases"];
-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; }
 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: generalize
 
@@ -17,8 +14,7 @@ const {
   currentScript
 } = document;
 const DEFAULT_OPTIONS = Object.freeze({
-  templates,
-  phrases,
+  templates: _index.templates,
   autostart: true
 });
 class AskComboOptions {
@@ -62,7 +58,7 @@ function normalizeOptions() {
     apiKey,
     apiHost,
     templates: templateAsFunction(templates),
-    phrases: templateAsFunction(phrases)
+    phrases
   }, options));
 }
 

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/constants.js

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

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.templates = exports.phrases = exports.constants = void 0;
+var _constants = _interopRequireWildcard(require("./constants.js"));
+var _phrases = _interopRequireWildcard(require("./phrases.js"));
+var _templates = _interopRequireWildcard(require("./templates.js"));
+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; }
+const constants = exports.constants = Object.freeze(_constants);
+const phrases = exports.phrases = Object.freeze(_phrases);
+const templates = exports.templates = Object.freeze(_templates);

package/dist/cjs/{combo → defaults}/ask/phrases.js

@@ -4,7 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sources = exports.relatedResources = exports.relatedQuestions = exports.question = void 0;
+/**
+ * The phrase displayed right before <miso-question>
+ */
 const question = exports.question = 'You asked...';
+
+/**
+ * The phrase displayed right before <miso-sources>
+ */
 const sources = exports.sources = 'My reply is based on the following';
+
+/**
+ * The phrase displayed right before <miso-query-suggestions>
+ */
 const relatedQuestions = exports.relatedQuestions = 'Related questions you can explore';
+
+/**
+ * The phrase displayed right before <miso-related-resources>
+ */
 const relatedResources = exports.relatedResources = 'Go beyond, and learn more about this topic';

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

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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; }
+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] : {};
+  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] : {};
+  options = normalizeOptions(options);
+  return section(options, {
+    name: 'follow-up'
+  }, [querySuggestions(options), container(options, {
+    name: 'query',
+    visibleWhen: 'initial loading'
+  }, '<miso-query></miso-query>'), ...answerGroup(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,
+    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) {
+  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) {
+  return container(options, {
+    name: 'sources',
+    visibleWhen: 'nonempty'
+  }, ['<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 = {}
+  } = options;
+  const fn = phrases[key] || DEFAULT_PHRASES[key];
+  switch (typeof fn) {
+    case 'function':
+      return fn(options);
+    case 'string':
+      return fn;
+    default:
+      return '';
+  }
+}
+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,
+    logo = false
+  } = _ref6;
+  const classes = [`${classPrefix}__${name}-container`];
+  circledCitationIndex && classes.push('miso-circled-citation-index');
+  return element('miso-ask', {
+    classes,
+    visibleWhen,
+    logo,
+    parentQuestionId
+  }, 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 = {};
+  }
+  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(' ')}"`;
+  }
+  for (const name in attributes) {
+    const value = attributes[name];
+    if (value !== undefined) {
+      str += ` ${lowerCamelToKebab(name)}="${value}"`;
+    }
+  }
+  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/defaults/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ask = void 0;
+var _ask = _interopRequireWildcard(require("./ask/index.js"));
+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; }
+const ask = exports.ask = Object.freeze(_ask);

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
@@ -110,6 +109,21 @@ class SearchBoxLayout extends _template.default {
       this._unsubscribes.push(hub.on(_index.fields.suggestions(), () => this._handleInput()));
     }
   }
+  focus() {
+    if (this._element) {
+      this._context().focus();
+    } else {
+      // take a rain check, wait for render
+      this._focusRequested = true;
+    }
+  }
+  set value(value) {
+    if (this._element) {
+      this._context().value = value;
+    } else {
+      this._valueRequested = value;
+    }
+  }
   _preprocess(_ref2) {
     let {
       state
@@ -135,6 +149,8 @@ class SearchBoxLayout extends _template.default {
     }
     this._setupAutocomplete(element);
     this._renderSuggestions(element, data, controls);
+    this._fullfillFocusRequest(element);
+    this._fullfillValueRequest(element);
   }
   _setupAutocomplete(element) {
     const {
@@ -184,6 +200,20 @@ class SearchBoxLayout extends _template.default {
       this._suggestionItems.set(itemElement, suggestionItems[i++]);
     }
   }
+  _fullfillFocusRequest(element) {
+    if (!element || !this._focusRequested) {
+      return;
+    }
+    this._focusRequested = false;
+    this._context(element).focus();
+  }
+  _fullfillValueRequest(element) {
+    if (!element || !this._valueRequested) {
+      return;
+    }
+    this._context(element).value = this._valueRequested;
+    this._valueRequested = undefined;
+  }
   _context(element) {
     element = element || this._view.element;
     if (!element) {
@@ -288,6 +318,24 @@ class Context {
       });
     }
   }
+  focus() {
+    if (!this._element) {
+      return;
+    }
+    const {
+      inputElement
+    } = this;
+    inputElement && inputElement.focus();
+  }
+  set value(value) {
+    if (!this._element) {
+      return;
+    }
+    const {
+      inputElement
+    } = this;
+    inputElement && (inputElement.value = value);
+  }
   _get(role) {
     return !this._element ? undefined : this._cache[role] || (this._cache[role] = this._element.querySelector(`[data-role="${role}"]`));
   }

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/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) {