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

package/dist/cjs/actor/view.js

@@ -13,8 +13,6 @@ const _excluded = ["value", "error", "status", "meta"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-//import { triggerMisoAction } from '../element/util/utils.js';
-
 function statesEqual(a, b) {
   return a === b || a && b && a.status === b.status && a.error === b.error && a.value === b.value &&
   // skip deep equals
@@ -204,17 +202,6 @@ class ViewActor {
       silent
     });
   }
-
-  /*
-  triggerAction(data) {
-    const { element } = this;
-    if (!element) {
-      return;
-    }
-    triggerMisoAction(element, data);
-  }
-  */
-
   _sliceData(data) {
     const {
         value,

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

@@ -61,14 +61,14 @@ class Sections extends _templates.Sections {
       phraseText
     } = this._helpers;
     const classes = [];
-    //reasoningOptions.hide !== false && classes.push('hidden');
     reasoningOptions.expand && classes.push('expanded');
     return container(options, {
       name: 'reasoning',
       visibleWhen: 'nonempty'
-    }, [element('miso-collapsible', {
+    }, [element('miso-stub', {
       classes,
-      'data-role': 'reasoning-container'
+      trait: 'collapsible',
+      'data-role': 'reasoning-box'
     }, [element('div', {
       classes: ['miso-collapsible__header'],
       'data-role': 'toggle-expand'

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

package/dist/cjs/trait/helpers.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defineActions = defineActions;
+exports.defineClickables = defineClickables;
+exports.defineStatusGetters = defineStatusGetters;
+exports.listenToClickables = listenToClickables;
+function defineStatusGetters(prototype, statuses) {
+  for (const status of statuses) {
+    Object.defineProperty(prototype, status, {
+      get() {
+        return this._element && this._element.classList.contains(status);
+      }
+    });
+  }
+}
+function defineActions(prototype, actions) {
+  for (const {
+    action,
+    classAction,
+    className
+  } of actions) {
+    prototype[action] = function () {
+      this._element && this._element.classList[classAction](className);
+      this[`_${action}`] && this[`_${action}`]();
+    };
+  }
+}
+function defineClickables(prototype, clickables) {
+  prototype._handleClick = function (event) {
+    const {
+      target,
+      button
+    } = event;
+    if (button !== 0) {
+      return; // only left click
+    }
+    for (let {
+      role,
+      selector,
+      action
+    } of clickables) {
+      selector = selector || `[data-role="${role}"]`;
+      if (!selector) {
+        continue;
+      }
+      if (target.closest(selector)) {
+        this[action]();
+        event.stopPropagation();
+        return;
+      }
+    }
+  };
+}
+function listenToClickables(addon) {
+  const element = addon._element;
+  if (!element) {
+    return () => {};
+  }
+  const handleClick = event => addon._handleClick(event);
+  element.addEventListener('click', handleClick);
+  return () => element.removeEventListener('click', handleClick);
+}

package/dist/cjs/trait/index.js

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

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-beta.2';
+var _default = exports.default = '1.12.1-beta.3';

package/dist/cjs/workflow/ask.js

@@ -141,7 +141,6 @@ class Ask extends _answerBased.default {
   _updateData(data) {
     super._updateData(data);
     this._triggerSuggestionsRefreshIfNecessary();
-    this._showReasoningContainerIfNecessary(data);
   }
   _triggerSuggestionsRefreshIfNecessary() {
     const {
@@ -153,28 +152,6 @@ class Ask extends _answerBased.default {
     const view = next._views.get(_constants.ROLE.QUERY_SUGGESTIONS);
     view && view.refresh();
   }
-  _showReasoningContainerIfNecessary({
-    session,
-    value
-  } = {}) {
-    if (!value || !value.reasoning) {
-      return;
-    }
-    // TODO: shall we solve this issue with container?
-    // TODO: shall we just look up on the miso-collapse element?
-    const context = this._getSessionContext(session);
-    if (context.reasoningShown) {
-      return;
-    }
-    const element = this._getReasoningContainerElement();
-    if (!element) {
-      return;
-    }
-    if (typeof element.show === 'function') {
-      element.show();
-      context.reasoningShown = true;
-    }
-  }
 
   // view //
   _onReasoningViewUpdate({
@@ -184,7 +161,7 @@ class Ask extends _answerBased.default {
     if (status !== _constants.STATUS.READY || ongoing) {
       return;
     }
-    const element = this._getReasoningContainerElement();
+    const element = this._getReasoningBoxElement();
     element && element.classList.add('done');
   }
 
@@ -233,10 +210,10 @@ class Ask extends _answerBased.default {
       this._questionId = undefined;
     }
   }
-  _getReasoningContainerElement() {
+  _getReasoningBoxElement() {
     const view = this._views.get(_constants.ROLE.REASONING);
     const element = view && view.element;
-    return element && element.closest('[data-role="reasoning-container"]');
+    return element && element.closest('[data-role="reasoning-box"]');
   }
 
   // destroy //

package/package.json

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

package/src/actor/view.js

@@ -3,7 +3,6 @@ import { STATUS, ROLE, isDataRole } from '../constants.js';
 import * as fields from './fields.js';
 import ProxyElement from '../util/proxy.js';
 import Tracker from './tracker.js';
-//import { triggerMisoAction } from '../element/util/utils.js';
 
 function statesEqual(a, b) {
   return a === b || (a && b &&
@@ -170,16 +169,6 @@ export default class ViewActor {
     this.hub.update(fields.view(role), state, { silent });
   }
 
-  /*
-  triggerAction(data) {
-    const { element } = this;
-    if (!element) {
-      return;
-    }
-    triggerMisoAction(element, data);
-  }
-  */
-
   _sliceData(data) {
     const { value, error, status, meta, ...rest } = data;
     const sliced = {

package/src/affiliation/index.js

@@ -12,6 +12,15 @@ 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) {
     const { sovrn_aff, ...rest } = value;
     value = {
@@ -48,10 +57,17 @@ function postProcessValue(value) {
   };
 }
 
-function processSovrnData({ products, ...sovrn_aff }) {
+function processMisoData(products) {
+  return {
+    channel: 'miso',
+    products,
+  };
+}
+
+function processSovrnData({ products, ...data }) {
   return {
     channel: 'sovrn',
-    ...sovrn_aff,
+    ...data,
     products: products.map(processSovrnProduct),
   };
 }

package/src/defaults/ask/templates.js

@@ -43,12 +43,12 @@ class Sections extends _Sections {
     const { phrases, reasoning: reasoningOptions = {} } = options;
     const { container, element, phraseText } = this._helpers;
     const classes = [];
-    //reasoningOptions.hide !== false && classes.push('hidden');
     reasoningOptions.expand && classes.push('expanded');
     return container(options, { name: 'reasoning', visibleWhen: 'nonempty' }, [
-      element('miso-collapsible', {
+      element('miso-stub', {
         classes,
-        'data-role': 'reasoning-container',
+        trait: 'collapsible',
+        'data-role': 'reasoning-box',
       }, [
         element('div', {
           classes: ['miso-collapsible__header'],

package/src/defaults/common/templates.js

@@ -126,10 +126,10 @@ export class Helpers {
     }, body);
   }
 
-  container({ classPrefix, circledCitationIndex, parentQuestionId }, { name, visibleWhen, logo = false }, body) {
+  container({ classPrefix, circledCitationIndex, parentQuestionId }, { name, visibleWhen, trait, logo = false }, body) {
     const classes = [`${classPrefix}__${name}-container`];
     circledCitationIndex && classes.push('miso-circled-citation-index');
-    return this.element(this._context.CONAINER_TAG, { classes, visibleWhen, logo, parentQuestionId }, body);
+    return this.element(this._context.CONAINER_TAG, { classes, visibleWhen, trait, logo, parentQuestionId }, body);
   }
 
   element(tag, attributes = {}, body = '') {