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

package/dist/cjs/actor/fields.js

@@ -14,15 +14,11 @@ exports.query = query;
 exports.request = request;
 exports.response = response;
 exports.session = session;
-exports.suggestions = suggestions;
 exports.tracker = tracker;
 exports.view = view;
 function session() {
   return 'session';
 }
-function suggestions() {
-  return 'suggestions';
-}
 function completions() {
   return 'completions';
 }

package/dist/cjs/actor/view.js

@@ -9,7 +9,6 @@ var _constants = require("../constants.js");
 var fields = _interopRequireWildcard(require("./fields.js"));
 var _proxy = _interopRequireDefault(require("../util/proxy.js"));
 var _tracker = _interopRequireDefault(require("./tracker.js"));
-var _utils = require("../element/util/utils.js");
 const _excluded = ["value", "error", "status", "meta"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -17,17 +16,23 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 function statesEqual(a, b) {
   return a === b || a && b && a.status === b.status && a.error === b.error && a.value === b.value &&
   // skip deep equals
-  a.ongoing === b.ongoing && sessionEquals(a.session, b.session);
+  a.ongoing === b.ongoing && stateEmptyness(a) === stateEmptyness(b) &&
+  // TODO: ad-hoc
+  sessionEquals(a.session, b.session);
 }
 function sessionEquals(a, b) {
   return a === b || a && b && a.uuid === b.uuid;
 }
+function stateEmptyness(data) {
+  return data && data.meta && data.meta.empty;
+}
 class ViewActor {
   constructor(views, role) {
     this._events = new _commons.EventEmitter({
       target: this
     });
     this._views = views;
+    // TODO: we should pull this up to views, for the results are also used in judging container emptyness
     this._mapping = asMappingFunction((views._roles.mappings || {})[role] || role);
     (0, _commons.defineValues)(this, {
       role,
@@ -113,6 +118,9 @@ class ViewActor {
     }
     return this._tracker;
   }
+  get workflow() {
+    return this._views._workflow;
+  }
   get workflowOptions() {
     return this._views._options.resolved;
   }
@@ -162,7 +170,7 @@ class ViewActor {
       request,
       meta,
       data: value
-    }, getDataEmptyness(data));
+    }, getDataEmptyness(this.role, data));
 
     // render
     const notifyUpdate = (state = {}, options) => {
@@ -194,15 +202,6 @@ class ViewActor {
       silent
     });
   }
-  triggerAction(data) {
-    const {
-      element
-    } = this;
-    if (!element) {
-      return;
-    }
-    (0, _utils.triggerMisoAction)(element, data);
-  }
   _sliceData(data) {
     const {
         value,
@@ -219,12 +218,12 @@ class ViewActor {
     if (this.role === _constants.ROLE.CONTAINER) {
       // pass empty/nonempty information
       sliced.meta = Object.assign({}, meta, {
-        empty: this._isContainerEmpty(value)
+        empty: this._isContainerEmpty(data)
       });
     }
     return (0, _commons.trimObj)(sliced);
   }
-  _isContainerEmpty(value) {
+  _isContainerEmpty(data) {
     const {
       element
     } = this;
@@ -239,14 +238,10 @@ class ViewActor {
       if (!(0, _constants.isDataRole)(role)) {
         continue;
       }
-      let sliced = value && value[role];
-      if (role === _constants.ROLE.QUERY_SUGGESTIONS) {
-        // special case: query suggestions -> look up value from hub
-        // TODO: adhoc
-        const data = this.hub.states[fields.suggestions()];
-        sliced = data && data.value;
-      }
-      if (sliced && sliced.length !== 0) {
+      // respect data mapping
+      const mapping = asMappingFunction((this._views._roles.mappings || {})[role] || role);
+      const sliced = mapping(data, this); // TODO: the view passed in should be the view of the role, not container role
+      if (!isDateValueEmpty(role, sliced)) {
         return false;
       }
     }
@@ -289,17 +284,21 @@ function asMappingFunction(fn) {
       throw new Error(`Invalid mapping function: ${fn}`);
   }
 }
-function getDataEmptyness(data) {
+function getDataEmptyness(role, data) {
   return isDataStatusRelevantToEmptyness(data) ? {
-    empty: !!isDateValueEmpty(data)
+    empty: !!isDateValueEmpty(role, data && data.value)
   } : {};
 }
 function isDataStatusRelevantToEmptyness(data) {
   return data.status === _constants.STATUS.READY && !data.ongoing;
 }
-function isDateValueEmpty(data) {
-  const {
-    value
-  } = data;
-  return value === undefined || (Array.isArray(value) || typeof value === 'string') && !value.length;
+function isDateValueEmpty(role, value) {
+  // TODO: ad-hoc
+  switch (role) {
+    case _constants.ROLE.ANSWER:
+    case _constants.ROLE.REASONING:
+      return !value || !value.value;
+    default:
+      return value === undefined || (Array.isArray(value) || typeof value === 'string') && !value.length;
+  }
 }

package/dist/cjs/actor/views.js

@@ -22,7 +22,8 @@ class ViewsActor {
     options
   }) {
     this._hub = hub;
-    this._workflowName = workflow;
+    this._workflow = workflow;
+    this._workflowName = workflow._name;
     this._extensions = extensions;
     this._layoutFactory = layouts;
     this._options = options;
@@ -189,19 +190,6 @@ class ViewsActor {
     data = this._getData(data);
     // container first
     let views = this._getViews(true);
-    if (!force && data._inst) {
-      const {
-        includes,
-        excludes
-      } = data._inst;
-      if (includes) {
-        // always include containers
-        views = views.filter(view => view.role === _constants.ROLE.CONTAINER || includes.includes(view.role));
-      }
-      if (excludes) {
-        views = views.filter(view => !excludes.includes(view.role));
-      }
-    }
     await Promise.all(views.map(view => view.refresh({
       force,
       data

package/dist/cjs/affiliation/index.js

@@ -22,6 +22,15 @@ 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
@@ -61,14 +70,20 @@ function postProcessValue(value) {
     })
   });
 }
+function processMisoData(products) {
+  return {
+    channel: 'miso',
+    products
+  };
+}
 function processSovrnData(_ref) {
   let {
       products
     } = _ref,
-    sovrn_aff = _objectWithoutPropertiesLoose(_ref, _excluded2);
+    data = _objectWithoutPropertiesLoose(_ref, _excluded2);
   return Object.assign({
     channel: 'sovrn'
-  }, sovrn_aff, {
+  }, data, {
     products: products.map(processSovrnProduct)
   });
 }

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

@@ -23,11 +23,24 @@ class Sections extends _templates.Sections {
     const {
       container
     } = this._helpers;
-    return [...super.answerGroup(options), container(options, {
+    return [this.question(options), this.reasoning(options), this.answer(options), this.affiliation(options), this.sources(options), container(options, {
       name: 'bottom-spacing',
       visibleWhen: 'ongoing'
     })];
   }
+  question(options) {
+    const {
+      container,
+      phrase
+    } = this._helpers;
+    return container(options, {
+      name: 'question',
+      visibleWhen: 'ready'
+    }, [options.parentQuestionId ? '<hr>' : '', phrase(options, {
+      name: 'question',
+      tag: 'div'
+    }), '<miso-question></miso-question>']);
+  }
   answer(options) {
     const {
       container
@@ -35,28 +48,33 @@ class Sections extends _templates.Sections {
     return container(options, {
       name: 'answer',
       visibleWhen: 'ready'
-    }, [options.parentQuestionId ? '<hr>' : '', ...this.question(options), this.reasoning(options), '<miso-answer></miso-answer>', '<miso-feedback></miso-feedback>']);
+    }, ['<miso-answer></miso-answer>', '<miso-feedback></miso-feedback>']);
   }
-  reasoning({
-    phrases,
-    reasoning: options = {}
-  } = {}) {
+  reasoning(options = {}) {
+    const {
+      phrases,
+      reasoning: reasoningOptions = {}
+    } = options;
     const {
+      container,
       element,
       phraseText
     } = this._helpers;
     const classes = [];
-    options.hide !== false && classes.push('hidden');
-    options.expand && classes.push('expanded');
-    return element('miso-collapsible', {
+    reasoningOptions.expand && classes.push('expanded');
+    return container(options, {
+      name: 'reasoning',
+      visibleWhen: 'nonempty'
+    }, [element('miso-stub', {
       classes,
-      'data-role': 'reasoning-container'
+      trait: 'collapsible',
+      'data-role': 'reasoning-box'
     }, [element('div', {
       classes: ['miso-collapsible__header'],
       'data-role': 'toggle-expand'
-    }, [`<div class="miso-collapsible__icon">${options.icon || _svgs.BULB}</div>`, `<div class="miso-collapsible__title" data-role="title">${phraseText(phrases, 'thoughts')}</div>`, `<div class="miso-collapsible__toggle">${_svgs.CHEVRON}</div>`]), element('div', {
+    }, [`<div class="miso-collapsible__icon">${reasoningOptions.icon || _svgs.BULB}</div>`, `<div class="miso-collapsible__title" data-role="title">${phraseText(phrases, 'thoughts')}</div>`, `<div class="miso-collapsible__toggle">${_svgs.CHEVRON}</div>`]), element('div', {
       classes: ['miso-collapsible__body']
-    }, ['<miso-reasoning></miso-reasoning>'])]);
+    }, ['<miso-reasoning></miso-reasoning>'])])]);
   }
   sources(options) {
     const {

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

@@ -167,6 +167,7 @@ class Helpers {
   }, {
     name,
     visibleWhen,
+    trait,
     logo = false
   }, body) {
     const classes = [`${classPrefix}__${name}-container`];
@@ -174,6 +175,7 @@ class Helpers {
     return this.element(this._context.CONAINER_TAG, {
       classes,
       visibleWhen,
+      trait,
       logo,
       parentQuestionId
     }, body);

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

@@ -4,10 +4,12 @@ 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 }; }
 const ATTR_LOGO = 'logo';
 const DEFAULT_LOGO_VALUE = 'auto';
-const OBSERVED_ATTRIBUTES = Object.freeze([ATTR_LOGO]);
+const OBSERVED_ATTRIBUTES = Object.freeze([..._misoStub.default.observedAttributes, ATTR_LOGO]);
 function logoAttrToProp(value) {
   if (!value) {
     return DEFAULT_LOGO_VALUE;
@@ -33,7 +35,7 @@ function logoPropToAttr(value) {
       throw new Error(`Invalid logo property value: ${value}.`);
   }
 }
-class MisoContainerElement extends HTMLElement {
+class MisoContainerElement extends _misoStub.default {
   static get observedAttributes() {
     return OBSERVED_ATTRIBUTES;
   }
@@ -70,6 +72,7 @@ class MisoContainerElement extends HTMLElement {
 
   // lifecycle //
   async connectedCallback() {
+    super.connectedCallback();
     const client = this._client = await (0, _utils.getClient)(MisoContainerElement);
     if (document.body.contains(this)) {
       // in case already disconnected
@@ -78,6 +81,7 @@ class MisoContainerElement extends HTMLElement {
   }
   disconnectedCallback() {
     this._setWorkflow(undefined);
+    super.disconnectedCallback();
   }
   _getWorkflow(client) {
     throw new Error('Unimplemented');
@@ -99,6 +103,8 @@ class MisoContainerElement extends HTMLElement {
       case ATTR_LOGO:
         this._handleLogoUpdate(oldValue, newValue);
         break;
+      default:
+        super.attributeChangedCallback(attr, oldValue, newValue);
     }
   }
   _handleLogoUpdate(oldAttrValue, newAttrValue) {

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

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "MisoAffiliationElement", {
+  enumerable: true,
+  get: function () {
+    return _misoAffiliation.default;
+  }
+});
 Object.defineProperty(exports, "MisoAnswerElement", {
   enumerable: true,
   get: function () {
@@ -111,12 +117,6 @@ Object.defineProperty(exports, "MisoSourcesElement", {
     return _misoSources.default;
   }
 });
-Object.defineProperty(exports, "MisoSovrnAffiliationElement", {
-  enumerable: true,
-  get: function () {
-    return _misoAffiliation.default;
-  }
-});
 Object.defineProperty(exports, "MisoTotalElement", {
   enumerable: true,
   get: function () {

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

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "MisoBannerElement", {
     return _misoBanner.default;
   }
 });
-Object.defineProperty(exports, "MisoCollapsibleElement", {
+Object.defineProperty(exports, "MisoStubElement", {
   enumerable: true,
   get: function () {
-    return _misoCollapsible.default;
+    return _misoStub.default;
   }
 });
 var _misoBanner = _interopRequireDefault(require("./miso-banner.js"));
-var _misoCollapsible = _interopRequireDefault(require("./miso-collapsible.js"));
+var _misoStub = _interopRequireDefault(require("./miso-stub.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/element/util/miso-stub.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const TAG_NAME = 'miso-stub';
+const ATTR_TRAIT = 'trait';
+const OBSERVED_ATTRIBUTES = Object.freeze([ATTR_TRAIT]);
+class MisoStubElement extends HTMLElement {
+  static get tagName() {
+    return TAG_NAME;
+  }
+  static get observedAttributes() {
+    return OBSERVED_ATTRIBUTES;
+  }
+  constructor() {
+    super();
+    this._traits = [];
+  }
+
+  // lifecycle //
+  connectedCallback() {
+    this._syncTraits();
+  }
+  disconnectedCallback() {
+    for (const trait of this._traits) {
+      this._destroyTrait(trait);
+    }
+    this._traits = [];
+  }
+  attributeChangedCallback(attr) {
+    switch (attr) {
+      case ATTR_TRAIT:
+        this._syncTraits();
+        break;
+    }
+  }
+  _syncTraits() {
+    const names = (this.getAttribute(ATTR_TRAIT) || '').split(/\s+/).filter(Boolean);
+    const traits = [];
+    for (const trait of this._traits) {
+      if (!names.includes(trait.constructor.traitName)) {
+        this._destroyTrait(trait);
+      } else {
+        traits.push(trait);
+      }
+    }
+    if (names.length > 0) {
+      const availableTraits = getAvailableTraits(MisoStubElement.MisoClient);
+      for (const name of names) {
+        if (this._traits.find(trait => trait.constructor.traitName === name)) {
+          continue;
+        }
+        const TraitClass = availableTraits[name];
+        if (!TraitClass) {
+          console.warn(`Unknown trait: ${name}`);
+          continue;
+        }
+        const trait = new TraitClass(this);
+        traits.push(trait);
+      }
+    }
+    this._traits = traits;
+  }
+  _destroyTrait(trait) {
+    try {
+      trait._destroy && trait._destroy();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+exports.default = MisoStubElement;
+function getAvailableTraits(MisoClient) {
+  const traits = MisoClient.ui && MisoClient.ui.traits || {};
+  return Object.values(traits).reduce((traits, trait) => {
+    traits[trait.traitName] = trait;
+    return traits;
+  }, {});
+}

package/dist/cjs/element/utils.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.applyCoerce = applyCoerce;
-exports.defineStatusGetters = defineStatusGetters;
 exports.getClient = getClient;
 exports.getContainer = getContainer;
 exports.getMisoClient = getMisoClient;
@@ -85,13 +84,4 @@ function coerceDefault(str) {
     return num;
   }
   return str;
-}
-function defineStatusGetters(prototype, statuses) {
-  for (const status of statuses) {
-    Object.defineProperty(prototype, status, {
-      get() {
-        return this.classList.contains(status);
-      }
-    });
-  }
 }

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

@@ -77,16 +77,9 @@ class OptionListLayout extends _template.default {
   }
   initialize(view) {
     const {
-      proxyElement,
-      hub
+      proxyElement
     } = view;
-    this._unsubscribes = [...this._unsubscribes, proxyElement.on('click', e => this._handleClick(e)), hub.on(_index.fields.suggestions(), () => this._handleInput()) // TODO: use data mapping
-    ];
-  }
-  _preprocess() {
-    return super._preprocess({
-      state: this._view.hub.states[_index.fields.suggestions()] // TODO: use data mapping
-    });
+    this._unsubscribes = [...this._unsubscribes, proxyElement.on('click', e => this._handleClick(e))];
   }
   _render(element, data, controls) {
     super._render(element, data, controls);

package/dist/cjs/layout/templates.js

@@ -128,7 +128,7 @@ function titleBlock({
   title,
   _title_with_markups
 }) {
-  const text = _title_with_markups || (0, _commons.escapeHtml)(title);
+  const text = formatHtmlWithMarkup(_title_with_markups) || (0, _commons.escapeHtml)(title);
   return text ? `<div class="${className}__item-title">${text}</div>` : '';
 }
 function brandBlock({
@@ -149,7 +149,7 @@ function descriptionBlock({
   snippet,
   description
 }) {
-  return snippet ? `<div class="${className}__item-snippet">${snippet}</div>` : description ? `<div class="${className}__item-desc">${(0, _commons.escapeHtml)(description)}</div>` : '';
+  return snippet ? `<div class="${className}__item-snippet">${formatHtmlWithMarkup(snippet)}</div>` : description ? `<div class="${className}__item-desc">${(0, _commons.escapeHtml)(description)}</div>` : '';
 }
 function dateBlock({
   className,
@@ -333,6 +333,10 @@ function formatNumber(number, fn = DEFAULT_NUMBER_OPTIONS) {
       throw new Error(`Invalid number format: ${fn}`);
   }
 }
+function formatHtmlWithMarkup(html) {
+  // preserve space between two <mark> elements
+  return html && html.replace(/<\/mark>\s+<mark>/g, '</mark>&nbsp;<mark>');
+}
 function asFunction(template = '') {
   return typeof template === 'function' ? template : () => template;
 }
@@ -340,6 +344,7 @@ const helpers = exports.helpers = Object.freeze({
   tagPair,
   formatDate,
   formatNumber,
+  formatHtmlWithMarkup,
   escapeHtml: _commons.escapeHtml,
   asFunction
 });

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

@@ -130,7 +130,7 @@ class TypewriterLayout extends _progressive.default {
     const sameSession = (0, _utils.fromSameSession)(prev, state);
     const sameStreak = sameSession && stage === prev.stage;
     const streak = !prev ? 0 : sameStreak ? prev.streak : prev.streak + 1;
-    const doneAt = sameSession && prev && prev.doneAt || (status === _constants.STATUS.READY && finished ? Date.now() : undefined);
+    const doneAt = sameSession && prev && prev.doneAt || (status === _constants.STATUS.READY && finished ? performance.now() : undefined);
     const done = doneAt !== undefined;
     return this._prevState = Object.freeze((0, _commons.trimObj)({
       session,

package/dist/cjs/plugin.js

@@ -12,6 +12,7 @@ var elements = _interopRequireWildcard(require("./element/index.js"));
 var layouts = _interopRequireWildcard(require("./layout/index.js"));
 var sources = _interopRequireWildcard(require("./source.js"));
 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 _misoCombo = _interopRequireDefault(require("./element/combo/miso-combo.js"));
@@ -37,7 +38,8 @@ class UiPlugin extends _commons.Component {
     context.addSubtree(this);
     MisoClient.on('create', this._injectClient.bind(this));
     const ui = {
-      defaults
+      defaults,
+      traits
     };
     (0, _commons.delegateGetters)(ui, this, ['layouts', 'combo', 'ready']);
     (0, _commons.defineValues)(this, {
@@ -68,9 +70,8 @@ class UiPlugin extends _commons.Component {
       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)];
-    _misoContainer.default.MisoClient = MisoClient;
-    _misoCombo.default.MisoClient = MisoClient;
-    for (const ElementClass of ElementClasses) {
+    const ElementSuperClasses = [_misoContainer.default, _misoCombo.default];
+    for (const ElementClass of [...ElementSuperClasses, ...ElementClasses]) {
       ElementClass.MisoClient = MisoClient; // TODO: find better way
     }
 

package/dist/cjs/trait/collapsible.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _helpers = require("./helpers.js");
+const CLASS_NAME = 'miso-collapsible';
+const STATUS_EXPANDED = 'expanded';
+const ACTIONS = [{
+  action: 'expand',
+  classAction: 'add',
+  className: STATUS_EXPANDED
+}, {
+  action: 'collapse',
+  classAction: 'remove',
+  className: STATUS_EXPANDED
+}];
+const CLICKABLES = [{
+  role: 'expand',
+  action: 'expand'
+}, {
+  role: 'collapse',
+  action: 'collapse'
+}, {
+  role: 'toggle-expand',
+  action: 'toggle'
+}];
+class CollapsibleTrait {
+  static get traitName() {
+    return 'collapsible';
+  }
+  constructor(element) {
+    this._element = element;
+    element.collapsible = this;
+    element.classList.add(CLASS_NAME);
+    this._unsubscribes = [(0, _helpers.listenToClickables)(this)];
+  }
+  _destroy() {
+    for (const unsubscribe of this._unsubscribes || []) {
+      unsubscribe();
+    }
+    this._unsubscribes = [];
+    delete this._element.collapsible;
+    this._element.classList.remove(CLASS_NAME);
+    this._element = undefined;
+  }
+
+  // api //
+  toggle() {
+    this.expanded ? this.collapse() : this.expand();
+  }
+}
+exports.default = CollapsibleTrait;
+(0, _helpers.defineStatusGetters)(CollapsibleTrait.prototype, [STATUS_EXPANDED]);
+(0, _helpers.defineActions)(CollapsibleTrait.prototype, ACTIONS);
+(0, _helpers.defineClickables)(CollapsibleTrait.prototype, CLICKABLES);