@miso.ai/client-sdk-ui 1.11.4-beta.0 → 1.11.4-beta.2

package/src/actor/filters.js

@@ -12,43 +12,84 @@ function mergeState(state = {}, update = {}) {
   }));
 }
 
+function optionsToState({ sort } = {}) {
+  // TODO: facets
+  return trimObj({
+    facets: Object.freeze({}),
+    sort: sortOptionsToState(sort),
+  });
+}
+
+function sortOptionsToState(sort) {
+  if (!sort) {
+    return undefined;
+  }
+  const { options = [] } = sort;
+  for (const option of options) {
+    if (option.default) {
+      return Object.freeze(option);
+    }
+  }
+  return Object.freeze(options[0]);
+}
+
 export default class Filters {
 
   constructor(views, { facets: facetsOptions } = {}) {
     this._views = views;
     this._hub = views._hub;
-    this._states = this._initialStates = mergeState({}); // TODO: support custom initial states
     const error = this._error = this._error.bind(this);
     this._events = new EventEmitter({ target: this, error });
     defineValues(this, { facets: new Facets(this, facetsOptions) });
+
+    this._unsubscribes = [
+      views._options.on('filters', () => this._syncOptions()),
+    ];
+
+    this._syncOptions();
+    this._states = undefined;
+  }
+
+  _syncOptions() {
+    const options = this._views._options.resolved.filters;
+    this._initialStates = optionsToState(options);
+    this.apply({ silent: true });
   }
 
-  get states() {
-    return this._states;
+  _getStates() {
+    return this._states || this._initialStates;
   }
 
   update(updates) {
-    const oldStates = this._states;
-    const states = this._states = mergeState({ ...this._states, ...updates });
+    const oldStates = this._getStates();
+    this._states = mergeState({ ...oldStates, ...updates });
+    const states = this._getStates();
     this._events.emit('update', { updates, states, oldStates });
   }
 
   reset() {
-    const oldStates = this._states;
-    const states = this._states = this._initialStates;
+    const oldStates = this.states;
+    this._states = undefined;
+    const states = this._getStates();
     this._events.emit('reset', { states, oldStates });
   }
 
-  apply() {
-    this._hub.update(fields.filters(), this._states);
-    this._events.emit('apply');
+  apply({ silent = false } = {}) {
+    const states = this._getStates();
+    this._hub.update(fields.filters(), states, { silent });
+    !silent && this._events.emit('apply');
   }
 
   _error(error) {
     this._views._error(error);
   }
 
-  _destroy() {}
+  _destroy() {
+    for (const unsubscribe of this._unsubscribes) {
+      unsubscribe();
+    }
+    this._unsubscribes = [];
+  }
 
 }
 
@@ -87,7 +128,7 @@ class Facets {
   }
 
   _select(field, value) {
-    const values = this._options.multiple ? [...(this._filters._states.facets[field] || []), value] : [value];
+    const values = this._options.multivalued ? [...(this._filters._states.facets[field] || []), value] : [value];
     values.sort();
     this._filters.update({ facets: { [field]: values } });
   }

package/src/actor/tracker.js

@@ -7,20 +7,15 @@ const VALUELESS_ITEMS = [Symbol('valueless')];
 
 export default class Tracker {
 
-  constructor({ hub, role, valueless = false, options }) {
+  constructor({ hub, role, valueless = false }) {
     this._hub = hub;
     this._role = role;
     this._valueless = !!valueless;
-    this._options = options;
     // TODO: know item type
 
     this._states = new States(this._getSessionId());
   }
 
-  get options() {
-    return typeof this._options === 'function' ? this._options() : this._options;
-  }
-
   getState(item) {
     return this._states.getFullState(item);
   }

package/src/actor/view.js

@@ -97,13 +97,17 @@ export default class ViewActor {
     }
     if (!this._tracker) {
       const { hub } = this;
-      this._tracker = new Tracker({ hub, role, options: () => this._getTrackerOptions() });
+      this._tracker = new Tracker({ hub, role });
     }
     return this._tracker;
   }
   
   get workflowOptions() {
-    return this._views._getWorkflowOptions();
+    return this._views._options.resolved;
+  }
+
+  get trackerOptions() {
+    return this._views._getTrackerOptions(this.role);
   }
 
   get filters() {
@@ -154,15 +158,10 @@ export default class ViewActor {
     this.hub.update(fields.view(role), state, { silent });
   }
 
-  _getTrackerOptions() {
-    // used by tracker to expose tracker options to layout
-    return this._views._getTrackerOptions(this.role);
-  }
-
   _sliceData(data) {
     const { value, error, status, meta, ...rest } = data;
     const sliced = {
-      value: this._mapping(data),
+      value: this._mapping(data, this),
       status,
       data: value,
       meta,

package/src/actor/views.js

@@ -44,15 +44,9 @@ export default class ViewsActor {
     this._unsubscribes = [
       () => window.removeEventListener('resize', syncSize),
       hub.on(fields.data(), data => this.refresh({ data })),
-      options.on('autocomplete', () => this._syncAutocompleteOptions()),
-      options.on('pagination', () => this._syncPaginationOptions()),
-      options.on('trackers', () => this._syncTrackers()),
       options.on('layouts', () => this._syncLayouts()),
     ];
 
-    this._syncAutocompleteOptions();
-    this._syncPaginationOptions();
-    this._syncTrackers();
     this._syncLayouts();
   }
 
@@ -150,13 +144,16 @@ export default class ViewsActor {
     } else {
       for (let [role, [name, options]] of Object.entries(layouts)) {
         // TODO: try to omit if unchanged
-        const fn = () => this._layoutFactory.create(name, { ...options, role, workflow: this._workflowName, workflowOptions: this._getWorkflowOptions() });
+        const fn = () => this._layoutFactory.create(name, { ...options, role, workflow: this._workflowName });
         if (role === ROLE.CONTAINER) {
           for (const view of this._containers.values()) {
             view.layout = fn();
           }
         } else {
-          this.get(role).layout = fn();
+          const view = this.get(role);
+          if (view) {
+            view.layout = fn();
+          }
         }
       }
     }
@@ -168,11 +165,11 @@ export default class ViewsActor {
       return undefined;
     }
     const [name, options] = args;
-    return this._layoutFactory.create(name, { ...options, role, workflow: this._workflowName, workflowOptions: this._getWorkflowOptions() });
+    return this._layoutFactory.create(name, { ...options, role, workflow: this._workflowName });
   }
 
   get(role) {
-    return this._views[role] || (this._views[role] = new ViewActor(this, role));
+    return this._views[role];
   }
 
   get views() {
@@ -218,12 +215,9 @@ export default class ViewsActor {
     return data || this._hub.states[fields.data()];
   }
 
-  _syncTrackers() {
-    this._trackerOptions = this._options.resolved.trackers;
-  }
-
   _getTrackerOptions(role) {
-    return normalizeTrackerOptions((this._trackerOptions && this._trackerOptions[role]) || false);
+    const allTrackerOptions = this._options.resolved.trackers;
+    return normalizeTrackerOptions((allTrackerOptions && allTrackerOptions[role]) || false);
   }
 
   _getContainerTracker() {
@@ -235,21 +229,6 @@ export default class ViewsActor {
     return this._containerTracker;
   }
 
-  _syncAutocompleteOptions() {
-    this._autocompleteOptions = this._options.resolved.autocomplete;
-  }
-
-  _syncPaginationOptions() {
-    this._paginationOptions = this._options.resolved.pagination;
-  }
-
-  _getWorkflowOptions() {
-    return trimObj({
-      autocomplete: this._autocompleteOptions,
-      pagination: this._paginationOptions,
-    });
-  }
-
   _error(e) {
     // TODO: hub trigger error event
     console.error(e);

package/src/constants.js

@@ -24,6 +24,7 @@ export const ROLE = Object.freeze({
   FACETS: 'facets',
   TOTAL: 'total',
   MORE: 'more',
+  SORT: 'sort',
   ERROR: 'error',
 });
 
@@ -114,3 +115,13 @@ export function validateTrackingStatus(value) {
     throw new Error(`Unrecognized tracking status: ${value}`);
   }
 }
+
+export const WORKFLOW_CONFIGURABLE = Object.freeze({
+  API: 'api',
+  LAYOUTS: 'layouts',
+  DATA_PROCESSOR: 'dataProcessor',
+  TRACKERS: 'trackers',
+  INTERACTIONS: 'interactions',
+  FILTERS: 'filters',
+  PAGINATION: 'pagination',
+});

package/src/element/role/index.js

@@ -14,4 +14,5 @@ export { default as MisoKeywordsElement } from './miso-keywords.js';
 export { default as MisoTotalElement } from './miso-total.js';
 export { default as MisoFacetsElement } from './miso-facets.js';
 export { default as MisoMoreElement } from './miso-more.js';
+export { default as MisoSortElement } from './miso-sort.js';
 export { default as MisoErrorElement } from './miso-error.js';

package/src/element/role/miso-sort.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoSortElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.SORT,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-sort';
+  }
+
+}

package/src/layout/affiliation/affiliation.js

@@ -165,7 +165,7 @@ export default class AffiliationLayout extends CollectionLayout {
 
   initialize(view) {
     super.initialize(view);
-    const { viewable: options } = this._view.tracker.options || {};
+    const { viewable: options } = this._view.trackerOptions || {};
     this._viewable = new CarouselItemViewabilityObserver(this._onViewable.bind(this), options);
   }
 

package/src/layout/container/container.js

@@ -82,7 +82,7 @@ export default class ContainerLayout extends RafLayout {
   }
 
   _trackImpression() {
-    const { impression: options } = this._view.tracker.options || {};
+    const { impression: options } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }
@@ -94,7 +94,7 @@ export default class ContainerLayout extends RafLayout {
   }
 
   async _trackViewable(element) {
-    const { viewable: options } = this._view.tracker.options || {};
+    const { viewable: options } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }

package/src/layout/index.js

@@ -13,4 +13,5 @@ export { default as TextLayout } from './text/text.js';
 export { default as TypewriterLayout } from './text/typewriter/index.js';
 export { default as AffiliationLayout } from './affiliation/affiliation.js';
 export { default as FacetsLayout } from './input/facets.js';
+export { default as SelectLayout } from './input/select.js';
 export { default as MoreButtonLayout } from './button/more-button.js';

package/src/layout/input/facets.js

@@ -1,4 +1,5 @@
 import { escapeHtml } from '@miso.ai/commons';
+import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
 import Bindings from '../../util/bindings.js';
 
@@ -109,7 +110,7 @@ export default class FacetsLayout extends TemplateBasedLayout {
   }
 
   initialize(view) {
-    const { proxyElement, hub, filters } = view;
+    const { proxyElement, filters } = view;
     this._unsubscribes = [
       ...this._unsubscribes,
       proxyElement.on('click', (e) => this._handleClick(e)),
@@ -132,7 +133,7 @@ export default class FacetsLayout extends TemplateBasedLayout {
   }
 
   _syncSelections() {
-    const selectedValues = getSelectedValues(this._view.filters.states.facets);
+    const selectedValues = getSelectedValues(this._view.hub.states[fields.filters()].facets);
     for (const { value: { field, value }, element } of this._bindings.entries) {
       this._setSelected(element, selectedValues[field] && selectedValues[field].has(value));
     }

package/src/layout/input/search-box.js

@@ -338,7 +338,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
   }
 
   _trackSubmit(value) {
-    const { [EVENT_TYPE.SUBMIT]: options } = this._view.tracker.options || {};
+    const { [EVENT_TYPE.SUBMIT]: options } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }

package/src/layout/input/select.js

@@ -0,0 +1,142 @@
+import { escapeHtml, kebabOrSnakeToHuman } from '@miso.ai/commons';
+import TemplateBasedLayout from '../template.js';
+import { makeTrackable } from '../trackable.js';
+
+const TYPE = 'select';
+const DEFAULT_CLASSNAME = 'miso-select';
+
+function root(layout, state) {
+  const { className, role, templates } = layout;
+  const roleAttr = role ? `data-role="${role}"` : '';
+  const values = layout._getItems(state);
+  const selected = values.find(value => value.selected) || values[0];
+  return `
+<div class="${className}" ${roleAttr}>
+  ${templates.button(layout, selected)}
+  ${templates.options(layout, state)}
+</div>`;
+}
+
+function button(layout, value) {
+  const { className, templates } = layout;
+  return `<button class="${className}__button" data-role="button" tabindex="0">${templates.text(layout, value)}</button>`;
+}
+
+function options(layout, state) {
+  const { className, templates } = layout;
+  const values = layout._getItems(state);
+  return `<ul class="${className}__options">${values.map((value, index) => templates.option(layout, value, { index })).join('')}</ul>`;
+}
+
+function option(layout, value) {
+  const { className, templates } = layout;
+  const selectedClass = value.selected ? 'selected' : '';
+  return `<li class="${className}__option ${selectedClass}" data-role="option" tabindex="0">${templates.text(layout, value)}</li>`;
+}
+
+function text(layout, value) {
+  return escapeHtml(value && value.text && kebabOrSnakeToHuman(value.text) || value || '');
+}
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  button,
+  options,
+  option,
+  text,
+});
+
+export default class SelectLayout extends TemplateBasedLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({
+      className,
+      templates: { ...DEFAULT_TEMPLATES, ...templates },
+      ...options,
+    });
+    this._initTrackable();
+  }
+
+  initialize(view) {
+    const { proxyElement } = view;
+    this._unsubscribes = [
+      ...this._unsubscribes,
+      proxyElement.on('click', (e) => this._handleClick(e)),
+    ];
+  }
+
+  _afterRender(element, state) {
+    this._syncBindings(element, state);
+
+  }
+
+  _unrender() {
+    this._clearBindings();
+  }
+
+  _getItems(state) {
+    return state.value || [];
+  }
+
+  _getOptionsElement(element) {
+    return element.querySelector(`[data-role="options"]`);
+  }
+
+  _getItemElements(element) {
+    return element ? Array.from(element.querySelectorAll(`[data-role="option"]`)) : [];
+  }
+
+  _handleClick(event) {
+    if (!this._element) {
+      return;
+    }
+    for (let element = event.target; element && element !== this._element; element = element.parentElement) {
+      const { role } = element.dataset;
+      switch (role) {
+        case 'button':
+          this._toggle();
+          break;
+        case 'option':
+          const binding = this._bindings.get(element);
+          this._select(binding && binding.value);
+          break;
+      }
+    }
+  }
+
+  _toggle() {
+    if (!this._element) {
+      return;
+    }
+    const child = this._element.children[0];
+    child && child.classList.toggle('open');
+  }
+
+  async _select(value) {
+    if (!value) {
+      return;
+    }
+    // TODO: reflect selection right away
+    this._view._events.emit('select', { value });
+  }
+
+  destroy() {
+    this._destroyTrackable();
+    super.destroy();
+  }
+
+}
+
+makeTrackable(SelectLayout.prototype);

package/src/layout/raf.js

@@ -2,8 +2,8 @@ import { defineValues, requestAnimationFrame as raf, capture } from '@miso.ai/co
 
 export default class RafLayout {
 
-  constructor({ role, workflow, workflowOptions, ...options } = {}) {
-    defineValues(this, { role, workflow, workflowOptions, options });
+  constructor({ role, workflow, ...options } = {}) {
+    defineValues(this, { role, workflow, options });
     this._unsubscribes = [];
     this._rendered = new WeakMap();
     this._element = undefined;

package/src/layout/text/typewriter/index.js

@@ -130,7 +130,8 @@ export default class TypewriterLayout extends ProgressiveLayout {
     const container = containerElement(this, element, state);
     // TODO: distinguish between first render and element replacement
     let result;
-    if (!rendered || state.streak !== rendered.streak) {
+    const newStreak = !rendered || state.streak !== rendered.streak;
+    if (newStreak) {
       // new typing streak
       result = this._renderer.clear(container, rendered);
     } else {
@@ -141,7 +142,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
 
     const ongoing = state.status === STATUS.READY && !result.done;
     // silence on consecutive ongoing renders
-    const silent = ongoing && (!rendered || rendered.status === STATUS.READY);
+    const silent = ongoing && (!rendered || rendered.status === STATUS.READY) && !newStreak;
     notifyUpdate({ ongoing }, { silent });
 
     ongoing && loop();

package/src/layout/trackable.js

@@ -51,7 +51,7 @@ export class TrackableMixin {
     if (entries.length === 0) {
       return;
     }
-    const { impression: options } = this._view.tracker.options || {};
+    const { impression: options } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }
@@ -68,7 +68,7 @@ export class TrackableMixin {
     if (entries.length === 0) {
       return;
     }
-    const { viewable: options } = this._view.tracker.options || {};
+    const { viewable: options } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }
@@ -78,7 +78,7 @@ export class TrackableMixin {
   }
 
   _trackClick(event, binding) {
-    const { click: options } = this._view.tracker.options || {};
+    const { click: options } = this._view.trackerOptions || {};
     if (validateClick(options, event, binding)) {
       this._view.tracker.click([binding.value]);
     }

package/src/layout/triggerable.js

@@ -16,7 +16,7 @@ export class TriggerableMixin {
     if (!this.options.infiniteScroll) {
       return;
     }
-    const workflowPaginationOptions = this.workflowOptions.pagination;
+    const workflowPaginationOptions = this._view.workflowOptions.pagination;
     if (!workflowPaginationOptions.active || workflowPaginationOptions.mode !== 'infiniteScroll') {
       return;
     }

package/src/util/trackers.js

@@ -1,5 +1,7 @@
 import { findInAncestors, trimObj } from '@miso.ai/commons';
 
+// TODO: think about how to incorporate this with workflow options
+
 const DEFAULT_TRACKER_OPTIONS = Object.freeze({
   impression: Object.freeze({
   }),

package/src/version.js

@@ -1 +1 @@
-export default '1.11.4-beta.0';
+export default '1.11.4-beta.2';

package/src/workflow/answer-based.js

@@ -4,7 +4,7 @@ import { fields, FeedbackActor } from '../actor/index.js';
 import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
 import { SearchBoxLayout, TextLayout, ListLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
 import { processData as processAffiliationData } from '../affiliation/index.js';
-import { mergeRolesOptions } from './options.js';
+import { mergeRolesOptions } from './options/index.js';
 import { writeAnswerStageToMeta, mergeInteraction } from './processors.js';
 import { enableUseLink } from './use-link.js';
 
@@ -91,6 +91,10 @@ export default class AnswerBasedWorkflow extends Workflow {
     super.restart();
   }
 
+  _shallEmitLifecycleEvent(name, event) {
+    return name === 'answer-stage' || super._shallEmitLifecycleEvent(name, event);
+  }
+
   _emitInterruptEventIfNecessary() {
     const state = this._hub.states[fields.view(this._roles.main)] || {};
     if (state.session && state.status !== STATUS.INITIAL && (state.status !== STATUS.READY || state.ongoing)) {
@@ -101,12 +105,22 @@ export default class AnswerBasedWorkflow extends Workflow {
   }
 
   _onMainViewUpdate(state) {
-    const { status } = state;
+    const { status, session } = state;
     const done = status === STATUS.READY && !state.ongoing;
     const erroneous = status === STATUS.ERRONEOUS;
     const eventName = done ? 'done' : erroneous ? 'error' : status;
+    // answer-stage
+    const context = this._getSessionContext(session);
+    const oldAnswerStage = context.answerStage;
+    const newAnswerStage = state.meta && state.meta.answer_stage;
+    if (newAnswerStage && newAnswerStage !== oldAnswerStage) {
+      this._emitLifecycleEvent('answer-stage', Object.freeze({ ...state, answer_stage: newAnswerStage }));
+      context.answerStage = newAnswerStage;
+    }
+    // ready, done, or error
     this._emitLifecycleEvent(eventName, state);
     if (done || erroneous) {
+      // finally
       this._emitLifecycleEvent('finally', state);
     }
   }

package/src/workflow/ask.js

@@ -4,6 +4,7 @@ import { fields } from '../actor/index.js';
 import { ROLE, ORGANIC_QUESTION_SOURCE } from '../constants.js';
 import { OptionListLayout, ListLayout, SearchBoxLayout } from '../layout/index.js';
 import { mergeInteraction } from './processors.js';
+import { mergeRolesOptions } from './options/index.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS,
@@ -38,7 +39,9 @@ const DEFAULT_OPTIONS = Object.freeze({
   trackers: DEFAULT_TRACKERS,
 });
 
-const ROLES_OPTIONS = AnswerBasedWorkflow.ROLES_OPTIONS;
+const ROLES_OPTIONS = mergeRolesOptions(AnswerBasedWorkflow.ROLES_OPTIONS, {
+  members: Object.keys(DEFAULT_LAYOUTS),
+});
 
 export default class Ask extends AnswerBasedWorkflow {