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

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

@@ -1,8 +1,12 @@
+import MisoStubElement from '../util/miso-stub.js';
 import { getClient } from '../utils.js';
 
 const ATTR_LOGO = 'logo';
 const DEFAULT_LOGO_VALUE = 'auto';
-const OBSERVED_ATTRIBUTES = Object.freeze([ATTR_LOGO]);
+const OBSERVED_ATTRIBUTES = Object.freeze([
+  ...MisoStubElement.observedAttributes,
+  ATTR_LOGO,
+]);
 
 function logoAttrToProp(value) {
   if (!value) {
@@ -31,7 +35,7 @@ function logoPropToAttr(value) {
   }
 }
 
-export default class MisoContainerElement extends HTMLElement {
+export default class MisoContainerElement extends MisoStubElement {
 
   static get observedAttributes() {
     return OBSERVED_ATTRIBUTES;
@@ -74,6 +78,7 @@ export default class MisoContainerElement extends HTMLElement {
 
   // lifecycle //
   async connectedCallback() {
+    super.connectedCallback();
     const client = this._client = await getClient(MisoContainerElement);
     if (document.body.contains(this)) { // in case already disconnected
       this._setWorkflow(this._getWorkflow(client));
@@ -82,6 +87,7 @@ export default class MisoContainerElement extends HTMLElement {
 
   disconnectedCallback() {
     this._setWorkflow(undefined);
+    super.disconnectedCallback();
   }
 
   _getWorkflow(client) {
@@ -106,6 +112,8 @@ export default class MisoContainerElement extends HTMLElement {
       case ATTR_LOGO:
         this._handleLogoUpdate(oldValue, newValue);
         break;
+      default:
+        super.attributeChangedCallback(attr, oldValue, newValue);
     }
   }
 

package/src/element/role/index.js

@@ -11,7 +11,7 @@ export { default as MisoSourcesElement } from './miso-sources.js';
 export { default as MisoImagesElement } from './miso-images.js';
 export { default as MisoRelatedResourcesElement } from './miso-related-resources.js';
 export { default as MisoRelatedQuestionsElement } from './miso-related-questions.js';
-export { default as MisoSovrnAffiliationElement } from './miso-affiliation.js';
+export { default as MisoAffiliationElement } from './miso-affiliation.js';
 export { default as MisoKeywordsElement } from './miso-keywords.js';
 export { default as MisoTotalElement } from './miso-total.js';
 export { default as MisoFacetsElement } from './miso-facets.js';

package/src/element/util/index.js

@@ -1,2 +1,2 @@
 export { default as MisoBannerElement } from './miso-banner.js';
-export { default as MisoCollapsibleElement } from './miso-collapsible.js';
+export { default as MisoStubElement } from './miso-stub.js';

package/src/element/util/miso-stub.js

@@ -0,0 +1,85 @@
+const TAG_NAME = 'miso-stub';
+
+const ATTR_TRAIT = 'trait';
+const OBSERVED_ATTRIBUTES = Object.freeze([ATTR_TRAIT]);
+
+export default 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);
+    }
+  }
+
+}
+
+function getAvailableTraits(MisoClient) {
+  const traits = MisoClient.ui && MisoClient.ui.traits || {};
+  return Object.values(traits).reduce((traits, trait) => {
+    traits[trait.traitName] = trait;
+    return traits;
+  }, {});
+}

package/src/element/utils.js

@@ -83,13 +83,3 @@ function coerceDefault(str) {
   }
   return str;
 }
-
-export function defineStatusGetters(prototype, statuses) {
-  for (const status of statuses) {
-    Object.defineProperty(prototype, status, {
-      get() {
-        return this.classList.contains(status);
-      },
-    });
-  }
-}

package/src/layout/templates.js

@@ -120,7 +120,7 @@ export function imageInfoBlock(layout, data, meta) {
 }
 
 export function titleBlock({ className }, { title, _title_with_markups }) {
-  const text = _title_with_markups || escapeHtml(title);
+  const text = formatHtmlWithMarkup(_title_with_markups) || escapeHtml(title);
   return text ? `<div class="${className}__item-title">${text}</div>` : '';
 }
 
@@ -133,7 +133,7 @@ export function brandBlock({ className }, { brand, brand_logo }) {
 }
 
 export function descriptionBlock({ className }, { snippet, description }) {
-  return snippet ? `<div class="${className}__item-snippet">${snippet}</div>` : description ? `<div class="${className}__item-desc">${escapeHtml(description)}</div>` : '';
+  return snippet ? `<div class="${className}__item-snippet">${formatHtmlWithMarkup(snippet)}</div>` : description ? `<div class="${className}__item-desc">${escapeHtml(description)}</div>` : '';
 }
 
 export function dateBlock({ className, templates }, { created_at, updated_at, published_at }) {
@@ -269,6 +269,11 @@ function formatNumber(number, fn = DEFAULT_NUMBER_OPTIONS) {
   }
 }
 
+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;
 }
@@ -277,6 +282,7 @@ export const helpers = Object.freeze({
   tagPair,
   formatDate,
   formatNumber,
+  formatHtmlWithMarkup,
   escapeHtml,
   asFunction,
 });

package/src/plugin.js

@@ -6,6 +6,7 @@ import * as elements from './element/index.js';
 import * as layouts from './layout/index.js';
 import * as sources from './source.js';
 import * as defaults from './defaults/index.js';
+import * as traits from './trait/index.js';
 import { loadStylesIfNecessary } from './styles.js';
 
 import MisoContainerElement from './element/container/miso-container.js';
@@ -33,7 +34,7 @@ export default class UiPlugin extends Component {
     context.addSubtree(this);
     MisoClient.on('create', this._injectClient.bind(this));
 
-    const ui = { defaults };
+    const ui = { defaults, traits };
     delegateGetters(ui, this, ['layouts', 'combo', 'ready']);
     defineValues(this, { MisoClient });
     defineValues(MisoClient, { ui });
@@ -59,9 +60,8 @@ export default class UiPlugin extends Component {
       ...Object.values(roles),
       ...Object.values(others),
     ];
-    MisoContainerElement.MisoClient = MisoClient;
-    MisoComboElement.MisoClient = MisoClient;
-    for (const ElementClass of ElementClasses) {
+    const ElementSuperClasses = [MisoContainerElement, MisoComboElement];
+    for (const ElementClass of [...ElementSuperClasses, ...ElementClasses]) {
       ElementClass.MisoClient = MisoClient; // TODO: find better way
     }
 

package/src/trait/collapsible.js

@@ -0,0 +1,51 @@
+import { defineStatusGetters, defineActions, defineClickables, listenToClickables } from './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' },
+];
+
+export default class CollapsibleTrait {
+
+  static get traitName() {
+    return 'collapsible';
+  }
+
+  constructor(element) {
+    this._element = element;
+    element.collapsible = this;
+    element.classList.add(CLASS_NAME);
+    this._unsubscribes = [
+      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();
+  }
+
+}
+
+defineStatusGetters(CollapsibleTrait.prototype, [STATUS_EXPANDED]);
+defineActions(CollapsibleTrait.prototype, ACTIONS);
+defineClickables(CollapsibleTrait.prototype, CLICKABLES);

package/src/trait/helpers.js

@@ -0,0 +1,48 @@
+export function defineStatusGetters(prototype, statuses) {
+  for (const status of statuses) {
+    Object.defineProperty(prototype, status, {
+      get() {
+        return this._element && this._element.classList.contains(status);
+      },
+    });
+  }
+}
+
+export 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}`]();
+    };
+  }
+}
+
+export 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;
+      }
+    }
+  };
+}
+
+export 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/src/trait/index.js

@@ -0,0 +1 @@
+export { default as CollapsibleTrait } from './collapsible.js';

package/src/version.js

@@ -1 +1 @@
-export default '1.12.1-beta.2';
+export default '1.12.1-beta.3';

package/src/workflow/ask.js

@@ -131,7 +131,6 @@ export default class Ask extends AnswerBasedWorkflow {
   _updateData(data) {
     super._updateData(data);
     this._triggerSuggestionsRefreshIfNecessary();
-    this._showReasoningContainerIfNecessary(data);
   }
 
   _triggerSuggestionsRefreshIfNecessary() {
@@ -143,32 +142,12 @@ export default class Ask extends AnswerBasedWorkflow {
     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({ status, ongoing }) {
     if (status !== STATUS.READY || ongoing) {
       return;
     }
-    const element = this._getReasoningContainerElement();
+    const element = this._getReasoningBoxElement();
     element && element.classList.add('done');
   }
 
@@ -219,10 +198,10 @@ export default class Ask extends AnswerBasedWorkflow {
     }
   }
 
-  _getReasoningContainerElement() {
+  _getReasoningBoxElement() {
     const view = this._views.get(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/dist/cjs/element/util/miso-collapsible.js

@@ -1,52 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _misoUtility = _interopRequireDefault(require("./miso-utility.js"));
-var _utils = require("../utils.js");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const TAG_NAME = 'miso-collapsible';
-const STATUS_EXPANDED = 'expanded';
-const STATUS_HIDDEN = 'hidden';
-const ACTIONS = {
-  expand: ['add', STATUS_EXPANDED],
-  collapse: ['remove', STATUS_EXPANDED],
-  hide: ['add', STATUS_HIDDEN],
-  show: ['remove', STATUS_HIDDEN]
-};
-const CLICKABLES = [{
-  role: 'expand',
-  action: 'expand'
-}, {
-  role: 'collapse',
-  action: 'collapse'
-}, {
-  role: 'toggle-expand',
-  action: 'toggleExpand'
-}];
-class MisoCollapsibleElement extends _misoUtility.default {
-  static get tagName() {
-    return TAG_NAME;
-  }
-  constructor() {
-    super({
-      actions: Object.keys(ACTIONS),
-      clickables: CLICKABLES
-    });
-  }
-
-  // lifecycle //
-  toggleExpand() {
-    this.expanded ? this.collapse() : this.expand();
-  }
-}
-exports.default = MisoCollapsibleElement;
-(0, _utils.defineStatusGetters)(MisoCollapsibleElement.prototype, [STATUS_EXPANDED, STATUS_HIDDEN]);
-for (const [method, [action, status]] of Object.entries(ACTIONS)) {
-  MisoCollapsibleElement.prototype[method] = function () {
-    this.classList[action](status);
-    this[`_${method}`] && this[`_${method}`]();
-  };
-}

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

@@ -1,83 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-class MisoUtilityElement extends HTMLElement {
-  constructor({
-    actions = [],
-    clickables = []
-  } = {}) {
-    super();
-    this._actions = actions;
-    this._clickables = clickables;
-    this._unsubscribes = [];
-  }
-
-  // lifecycle //
-  async connectedCallback() {
-    const handleAction = event => this._handleAction(event);
-    const handleClick = event => this._handleClick(event);
-    this.addEventListener('miso:action', handleAction);
-    this.addEventListener('click', handleClick);
-    this._unsubscribes = [...this._unsubscribes, () => this.removeEventListener('miso:action', handleAction), () => this.removeEventListener('click', handleClick)];
-  }
-  disconnectedCallback() {
-    for (const unsubscribe of this._unsubscribes) {
-      unsubscribe();
-    }
-    this._unsubscribes = [];
-  }
-  _handleAction(event) {
-    const {
-      target,
-      name
-    } = event.detail || {};
-    if (!name || !target || !this.matches(target)) {
-      return;
-    }
-    if (!this._actions.includes(name)) {
-      return;
-    }
-    if (this._doAction({
-      name
-    })) {
-      event.stopPropagation();
-    }
-  }
-  _doAction(args) {
-    const {
-      name
-    } = args;
-    this[name](args);
-    return true;
-  }
-  _handleClick(event) {
-    const {
-      target,
-      button
-    } = event;
-    if (button !== 0) {
-      return; // only left click
-    }
-    for (let {
-      role,
-      selector,
-      action
-    } of this._clickables) {
-      selector = selector || `[data-role="${role}"]`;
-      if (!selector) {
-        continue;
-      }
-      if (target.closest(selector)) {
-        this._doAction({
-          name: action
-        });
-        event.stopPropagation();
-        return;
-      }
-    }
-  }
-}
-exports.default = MisoUtilityElement;

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

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.triggerMisoAction = triggerMisoAction;
-function triggerMisoAction(element, data) {
-  element.dispatchEvent(new CustomEvent('miso:action', {
-    bubbles: true,
-    detail: data
-  }));
-}

package/src/element/util/miso-collapsible.js

@@ -1,49 +0,0 @@
-import MisoUtilityElement from './miso-utility.js';
-import { defineStatusGetters } from '../utils.js';
-
-const TAG_NAME = 'miso-collapsible';
-
-const STATUS_EXPANDED = 'expanded';
-const STATUS_HIDDEN = 'hidden';
-
-const ACTIONS = {
-  expand: ['add', STATUS_EXPANDED],
-  collapse: ['remove', STATUS_EXPANDED],
-  hide: ['add', STATUS_HIDDEN],
-  show: ['remove', STATUS_HIDDEN],
-};
-
-const CLICKABLES = [
-  { role: 'expand', action: 'expand' },
-  { role: 'collapse', action: 'collapse' },
-  { role: 'toggle-expand', action: 'toggleExpand' },
-];
-
-export default class MisoCollapsibleElement extends MisoUtilityElement {
-
-  static get tagName() {
-    return TAG_NAME;
-  }
-
-  constructor() {
-    super({
-      actions: Object.keys(ACTIONS),
-      clickables: CLICKABLES,
-    });
-  }
-
-  // lifecycle //
-  toggleExpand() {
-    this.expanded ? this.collapse() : this.expand();
-  }
-  
-}
-
-defineStatusGetters(MisoCollapsibleElement.prototype, [STATUS_EXPANDED, STATUS_HIDDEN]);
-
-for (const [method, [action, status]] of Object.entries(ACTIONS)) {
-  MisoCollapsibleElement.prototype[method] = function() {
-    this.classList[action](status);
-    this[`_${method}`] && this[`_${method}`]();
-  };
-}

package/src/element/util/miso-utility.js

@@ -1,69 +0,0 @@
-export default class MisoUtilityElement extends HTMLElement {
-
-  constructor({ actions = [], clickables = [] } = {}) {
-    super();
-    this._actions = actions;
-    this._clickables = clickables;
-    this._unsubscribes = [];
-  }
-
-  // lifecycle //
-  async connectedCallback() {
-    const handleAction = event => this._handleAction(event);
-    const handleClick = event => this._handleClick(event);
-
-    this.addEventListener('miso:action', handleAction);
-    this.addEventListener('click', handleClick);
-
-    this._unsubscribes = [
-      ...this._unsubscribes,
-      () => this.removeEventListener('miso:action', handleAction),
-      () => this.removeEventListener('click', handleClick),
-    ];
-  }
-
-  disconnectedCallback() {
-    for (const unsubscribe of this._unsubscribes) {
-      unsubscribe();
-    }
-    this._unsubscribes = [];
-  }
-
-  _handleAction(event) {
-    const { target, name } = event.detail || {};
-    if (!name || !target || !this.matches(target)) {
-      return;
-    }
-    if (!this._actions.includes(name)) {
-      return;
-    }
-    if (this._doAction({ name })) {
-      event.stopPropagation();
-    }
-  }
-
-  _doAction(args) {
-    const { name } = args;
-    this[name](args);
-    return true;
-  }
-
-  _handleClick(event) {
-    const { target, button } = event;
-    if (button !== 0) {
-      return; // only left click
-    }
-    for (let { role, selector, action } of this._clickables) {
-      selector = selector || `[data-role="${role}"]`;
-      if (!selector) {
-        continue;
-      }
-      if (target.closest(selector)) {
-        this._doAction({ name: action });
-        event.stopPropagation();
-        return;
-      }
-    }
-  }
-
-}

package/src/element/util/utils.js

@@ -1,3 +0,0 @@
-export function triggerMisoAction(element, data) {
-  element.dispatchEvent(new CustomEvent('miso:action', { bubbles: true, detail: data }));
-}