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

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/input/option-list.js

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

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/layout/text/typewriter/index.js

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

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.1';
+export default '1.12.1-beta.3';

package/src/workflow/ask.js

@@ -1,10 +1,11 @@
 import { defineValues, trimObj, API } from '@miso.ai/commons';
 import AnswerBasedWorkflow from './answer-based.js';
 import { fields } from '../actor/index.js';
-import { ROLE, ORGANIC_QUESTION_SOURCE } from '../constants.js';
+import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
 import { OptionListLayout, ListLayout, SearchBoxLayout, TypewriterLayout } from '../layout/index.js';
 import { mergeInteraction } from './processors.js';
 import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
+import { mappingSuggestionsData } from './processors.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS,
@@ -44,6 +45,9 @@ const DEFAULT_OPTIONS = Object.freeze({
 
 const ROLES_OPTIONS = mergeRolesOptions(AnswerBasedWorkflow.ROLES_OPTIONS, {
   members: Object.keys(DEFAULT_LAYOUTS),
+  mappings: {
+    [ROLE.QUERY_SUGGESTIONS]: mappingSuggestionsData,
+  },
 });
 
 export default class Ask extends AnswerBasedWorkflow {
@@ -65,19 +69,11 @@ export default class Ask extends AnswerBasedWorkflow {
   }
 
   _initSubscriptions(args) {
-    this._setSuggestedQuestions();
     super._initSubscriptions(args);
-  }
-
-  _setSuggestedQuestions() {
-    const { previous } = this;
-    if (!previous) {
-      return;
-    }
-    // TODO: write question_source from payload._meta, so we don't need to write it to session.meta
-    const values = previous.states[fields.data()].value;
-    const value = values.suggested_followup_questions || values.followup_questions || [];
-    this._hub.update(fields.suggestions(), { value: value.map(text => ({ text })) });
+    this._unsubscribes = [
+      ...this._unsubscribes,
+      this._hub.on(fields.view(ROLE.REASONING), state => this._onReasoningViewUpdate(state)),
+    ];
   }
 
   _initSession(args) {
@@ -134,20 +130,25 @@ export default class Ask extends AnswerBasedWorkflow {
   // data //
   _updateData(data) {
     super._updateData(data);
-    this._triggerReasoningShowIfNecessary(data);
+    this._triggerSuggestionsRefreshIfNecessary();
   }
 
-  _triggerReasoningShowIfNecessary({ session, value } = {}) {
-    if (!value || !value.reasoning) {
+  _triggerSuggestionsRefreshIfNecessary() {
+    const { next } = this;
+    if (!next) {
       return;
     }
-    const context = this._getSessionContext(session);
-    if (context.reasoningShown) {
+    const view = next._views.get(ROLE.QUERY_SUGGESTIONS);
+    view && view.refresh();
+  }
+
+  // view //
+  _onReasoningViewUpdate({ status, ongoing }) {
+    if (status !== STATUS.READY || ongoing) {
       return;
     }
-    context.reasoningShown = true;
-    const view = this._views.get(ROLE.REASONING);
-    view && view.triggerAction({ name: 'show', target: '[data-role="reasoning-container"]' });
+    const element = this._getReasoningBoxElement();
+    element && element.classList.add('done');
   }
 
   // interactions //
@@ -197,6 +198,12 @@ export default class Ask extends AnswerBasedWorkflow {
     }
   }
 
+  _getReasoningBoxElement() {
+    const view = this._views.get(ROLE.REASONING);
+    const element = view && view.element;
+    return element && element.closest('[data-role="reasoning-box"]');
+  }
+
   // destroy //
   _destroy(options) {
     const { parentQuestionId, questionId } = this;

package/src/workflow/base.js

@@ -60,7 +60,7 @@ export default class Workflow extends Component {
 
   _initProperties() {}
 
-  _initActors({ name, roles }) {
+  _initActors({ roles }) {
     const hub = this._hub;
     const client = this._client;
     const options = this._options;
@@ -69,7 +69,7 @@ export default class Workflow extends Component {
 
     this._sessions = new SessionMaker(hub);
     this._data = new DataActor(hub, { source: sources.api(client), options });
-    this._views = new ViewsActor(hub, { extensions, layouts, roles, options, workflow: name });
+    this._views = new ViewsActor(hub, { extensions, layouts, roles, options, workflow: this });
     this._interactions = new InteractionsActor(hub, { client, options });
   }
 

package/src/workflow/hybrid-search-views.js

@@ -1,4 +1,3 @@
-import { ROLE } from '../constants.js';
 import HybridSearchResults from './hybrid-search-results.js';
 
 function getSubworkflowByRole(role) {

package/src/workflow/processors.js

@@ -22,9 +22,18 @@ export function mappingSortData(_, { hub, workflowOptions = {} } = {}) {
   });
 }
 
+function findDefaultSortOption(options) {
+  for (const option of options) {
+    if (option.default) {
+      return option;
+    }
+  }
+  return options[0];
+}
+
 export function mappingAnswerData(data) {
   if (!data || !data.value) {
-    return data;
+    return undefined;
   }
   const { answer = '', answer_stage, finished } = data.value;
   return Object.freeze({ value: answer, stage: answer_stage, finished: !!finished });
@@ -32,19 +41,17 @@ export function mappingAnswerData(data) {
 
 export function mappingReasoningData(data) {
   if (!data || !data.value) {
-    return data;
+    return undefined;
   }
   const { reasoning = '', reasoning_finished } = data.value;
   return Object.freeze({ value: reasoning, stage: 'reasoning', finished: !!reasoning_finished });
 }
 
-function findDefaultSortOption(options) {
-  for (const option of options) {
-    if (option.default) {
-      return option;
-    }
-  }
-  return options[0];
+export function mappingSuggestionsData(_, { workflow } = {}) {
+  const previous = workflow.previous;
+  const values = previous && previous.states[fields.data()].value;
+  const value = values && (values.suggested_followup_questions || values.followup_questions || []);
+  return value && value.map(text => ({ text }));
 }
 
 // data //

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}`]();
-  };
-}