@miso.ai/client-sdk-ui 1.10.3-beta.0 → 1.10.4-beta.0

package/src/actor/views.js

@@ -1,7 +1,8 @@
 import { defineValues, delegateGetters } from '@miso.ai/commons';
-import { STATUS, ROLE } from '../constants.js';
+import { ROLE } from '../constants.js';
 import * as fields from './fields.js';
 import ViewActor from './view.js';
+import Filters from './filters.js';
 import Tracker from './tracker.js';
 import { normalizeTrackerOptions } from '../util/trackers.js';
 
@@ -12,6 +13,7 @@ export default class ViewsActor {
     extensions,
     layouts,
     roles = [],
+    rolesConfig = {},
     options,
   }) {
     this._hub = hub;
@@ -19,10 +21,12 @@ export default class ViewsActor {
     this._extensions = extensions;
     this._layoutFactory = layouts;
     this._options = options;
+    this._rolesConfig = rolesConfig;
     this._containers = new Map();
     this._containerTracker = undefined;
     this._views = {};
     this._trackers = new Trackers(this, roles);
+    this._filters = new Filters(this);
 
     for (const role of roles) {
       this._views[role] = new ViewActor(this, role);
@@ -37,7 +41,7 @@ export default class ViewsActor {
 
     this._unsubscribes = [
       () => window.removeEventListener('resize', syncSize),
-      hub.on(fields.data(), () => this.refresh()),
+      hub.on(fields.data(), data => this.refresh({ data })),
       options.on('trackers', () => this._syncTrackers()),
       options.on('layouts', () => this._syncLayouts()),
     ];
@@ -50,6 +54,10 @@ export default class ViewsActor {
     return this._trackers;
   }
 
+  get filters() {
+    return this._filters;
+  }
+
   // elements //
   addContainer(element) {
     if (this._containers.has(element)) {
@@ -177,22 +185,27 @@ export default class ViewsActor {
     }
   }
 
-  async refresh({ force } = {}) {
-    const data = this._getData();
+  async refresh({ force, data } = {}) {
+    data = this._getData(data);
     // container first
-    await Promise.all(this._getViews(true).map(view => view.refresh({ force, data })));
-  }
+    let views = this._getViews(true);
 
-  _getData() {
-    const { [fields.data()]: data } = this._hub.states;
-    // compare to cached
-    if (!this._data || this._data.data !== data) {
-      const status = (!data || !data.session || !data.session.active) ? STATUS.INITIAL :
-        data.error ? STATUS.ERRONEOUS : data.value ? STATUS.READY : STATUS.LOADING;
-      const ongoing = status === STATUS.READY ? !!data.ongoing : undefined;
-      this._data = Object.freeze({ ...data, status, ongoing });
+    if (!force && data._inst) {
+      const { includes, excludes } = data._inst;
+      if (includes) {
+        // always include containers
+        views = views.filter(view => view.role === ROLE.CONTAINER || includes.includes(view.role));
+      }
+      if (excludes) {
+        views = views.filter(view => !excludes.includes(view.role));
+      }
     }
-    return this._data;
+
+    await Promise.all(views.map(view => view.refresh({ force, data })));
+  }
+
+  _getData(data) {
+    return data || this._hub.states[fields.data()];
   }
 
   _syncTrackers() {
@@ -227,6 +240,7 @@ export default class ViewsActor {
       unsubscribe();
     }
     this._unsubscribes = [];
+    this._filters._destroy();
   }
 
 }
@@ -235,7 +249,7 @@ class Views {
 
   constructor(actor) {
     this._actor = actor;
-    delegateGetters(this, actor, ['syncSize', 'refresh', 'trackers']);
+    delegateGetters(this, actor, ['syncSize', 'refresh', 'trackers', 'filters']);
   }
 
   get(role) {

package/src/constants.js

@@ -20,6 +20,9 @@ export const ROLE = Object.freeze({
   QUERY_SUGGESTIONS: 'query_suggestions',
   RELATED_QUESTIONS: 'related_questions',
   AFFILIATION: 'affiliation',
+  KEYWORDS: 'keywords',
+  FACETS: 'facets',
+  HITS: 'hits',
   ERROR: 'error',
 });
 
@@ -36,18 +39,25 @@ const DATA_ROLE_SET = new Set([
   ROLE.QUERY_SUGGESTIONS,
   ROLE.RELATED_QUESTIONS,
   ROLE.AFFILIATION,
+  ROLE.FACETS,
+  ROLE.HITS,
 ]);
 
 export function isDataRole(role) {
   return DATA_ROLE_SET.has(role);
 }
 
+export const DATA_ASPECT = Object.freeze({
+  AUTOCOMPLETE: 'autocomplete',
+});
+
 export const LAYOUT_CATEGORY = Object.freeze({
   CONTAINER: 'container',
   BANNER: 'banner',
   LIST: 'list',
   QUERY: 'query',
   RADIO: 'radio',
+  FILTERS: 'filters',
   TEXT: 'text',
   AFFILIATION: 'affiliation',
   ERROR: 'error',

package/src/defaults/ask/constants.js

@@ -1 +1,2 @@
 export const CLASS_PREFIX = 'miso-ask-combo';
+export const CONAINER_TAG = 'miso-ask';

package/src/defaults/ask/templates.js

@@ -1,11 +1,74 @@
-import { lowerCamelToKebab, kebabToLowerCamel, kebabOrSnakeToLowerCamel } from '@miso.ai/commons';
-import { CLASS_PREFIX } from './constants.js';
+import { externalize } from '@miso.ai/commons';
+import * as CONSTANTS from './constants.js';
 import * as DEFAULT_PHRASES from './phrases.js';
+import { Helpers, Sections as _Sections } from '../common/templates.js';
 
-// TODO: rename classPrefix -> rootClass?
-// TODO: placeholder
+class Sections extends _Sections {
+
+  constructor() {
+    super({ helpers });
+  }
+
+  answerGroup(options) {
+    const { container } = this._helpers;
+    return [
+      ...super.answerGroup(options),
+      container(options, { name: 'bottom-spacing', visibleWhen: 'ongoing' }),
+    ];
+  }
+
+  answer(options) {
+    const { container } = this._helpers;
+    return container(options, { name: 'answer', visibleWhen: 'ready' }, [
+      options.parentQuestionId ? '<hr>' : '',
+      ...this.question(options),
+      '<miso-answer></miso-answer>',
+      '<miso-feedback></miso-feedback>',
+    ]);
+  }
+
+  sources(options) {
+    const { container, phrase } = this._helpers;
+    return container(options, { name: 'sources', visibleWhen: 'nonempty' }, [
+      '<hr>',
+      phrase(options, { name: 'sources', tag: 'h3' }),
+      '<miso-sources></miso-sources>',
+    ]);
+  }
+
+  followUps(options) {
+    const { classPrefix, features = {} } = options;
+    return features.followUpQuestions === false ? '' : `<div id="${classPrefix}__follow-ups" class="${classPrefix}__follow-ups"></div>`;
+  }
+
+  relatedResourcesSection(options) {
+    const { container, phrase, section } = this._helpers;
+    const { features = {}, logo = true } = options;
+    const body = features.relatedResources === false ? '' : container(options, { name: 'related-resources', visibleWhen: 'nonempty', logo }, [
+      phrase(options, { name: 'related-resources', tag: 'h2' }),
+      '<miso-related-resources></miso-related-resources>',
+    ]);
+    return section(options, { name: 'related-resources' }, body);
+  }
+
+  querySuggestions(options) {
+    const { container, phrase } = this._helpers;
+    const { features = {} } = options;
+    return features.querySuggestions === false ? '' :
+      container(options, { name: 'query-suggestions', visibleWhen: 'initial+nonempty' }, [
+        phrase(options, { name: 'query-suggestions', tag: 'h3' }),
+        '<miso-query-suggestions></miso-query-suggestions>',
+      ]);
+  }
+
+}
+
+export const helpers = externalize(new Helpers({ ...CONSTANTS, DEFAULT_PHRASES }));
+export const sections = externalize(new Sections({ helpers }));
 
 export function root(options = {}) {
+  const { normalizeOptions, section, container } = helpers;
+  const { followUps, relatedResourcesSection, answerGroup } = sections;
   options = normalizeOptions(options);
   return [
     section(options, { name: 'question' }, [
@@ -13,11 +76,13 @@ export function root(options = {}) {
     ]),
     section(options, { name: 'answer' }, answerGroup(options)),
     followUps(options),
-    relatedResources(options),
+    relatedResourcesSection(options),
   ].join('');
 };
 
 export function followUp(options = {}) {
+  const { normalizeOptions, section, container } = helpers;
+  const { querySuggestions, answerGroup } = sections;
   options = normalizeOptions(options);
   return section(options, { name: 'follow-up' }, [
     querySuggestions(options),
@@ -25,177 +90,3 @@ export function followUp(options = {}) {
     ...answerGroup(options),
   ]);
 };
-
-export const sections = Object.freeze({
-  followUps,
-  relatedResources,
-  querySuggestions,
-  answerGroup,
-  answer,
-  sources,
-});
-
-export const helpers = Object.freeze({
-  normalizeOptions,
-  normalizePhraseOptions,
-  normalizePhraseOptionKey,
-  phrase,
-  phraseText,
-  section,
-  container,
-  element,
-  attrs,
-});
-
-
-
-// options //
-function normalizeOptions({
-  classPrefix = CLASS_PREFIX,
-  circledCitationIndex = true,
-  phrases,
-  ...options
-} = {}) {
-  phrases = normalizePhraseOptions(phrases);
-  return { classPrefix, circledCitationIndex, phrases, ...options };
-}
-
-function normalizePhraseOptions(options = {}) {
-  if (!options) {
-    return {};
-  }
-  const normalized = {};
-  for (const key in options) {
-    normalized[normalizePhraseOptionKey(key)] = options[key];
-  }
-  return normalized;
-}
-
-function normalizePhraseOptionKey(key) {
-  key = kebabOrSnakeToLowerCamel(key);
-  if (key === 'relatedQuestions') {
-    return 'querySuggestions'; // legacy key
-  }
-  return key;
-}
-
-// sections & containers //
-function followUps(options) {
-  const { classPrefix, features = {} } = options;
-  return features.followUpQuestions === false ? '' : `<div id="${classPrefix}__follow-ups" class="${classPrefix}__follow-ups"></div>`;
-}
-
-function relatedResources(options) {
-  const { features = {}, logo = true } = options;
-  const body = features.relatedResources === false ? '' : container(options, { name: 'related-resources', visibleWhen: 'nonempty', logo }, [
-    phrase(options, { name: 'related-resources', tag: 'h2' }),
-    '<miso-related-resources></miso-related-resources>',
-  ]);
-  return section(options, { name: 'related-resources' }, body);
-}
-
-function querySuggestions(options) {
-  const { features = {} } = options;
-  return features.querySuggestions === false ? '' :
-    container(options, { name: 'query-suggestions', visibleWhen: 'initial+nonempty' }, [
-      phrase(options, { name: 'query-suggestions', tag: 'h3' }),
-      '<miso-query-suggestions></miso-query-suggestions>',
-    ]);
-}
-
-function answerGroup(options) {
-  return [
-    answer(options),
-    affiliation(options),
-    sources(options),
-    container(options, { name: 'bottom-spacing', visibleWhen: 'ongoing' }),
-  ];
-}
-
-function answer(options) {
-  return container(options, { name: 'answer', visibleWhen: 'ready' }, [
-    options.parentQuestionId ? '<hr>' : '',
-    phrase(options, { name: 'question', tag: 'div' }),
-    '<miso-question></miso-question>',
-    '<miso-answer></miso-answer>',
-    '<miso-feedback></miso-feedback>',
-  ]);
-}
-
-function sources(options) {
-  return container(options, { name: 'sources', visibleWhen: 'nonempty' }, [
-    '<hr>',
-    phrase(options, { name: 'sources', tag: 'h3' }),
-    '<miso-sources></miso-sources>',
-  ]);
-}
-
-function affiliation(options) {
-  const { affiliation = true } = options || {};
-  if (!affiliation) {
-    return '';
-  }
-  return container(options, { name: 'affiliation', visibleWhen: 'nonempty' }, [
-    '<miso-affiliation></miso-affiliation>',
-  ]);
-}
-
-function phrase(options, { name, tag = 'div' }) {
-  const { classPrefix } = options;
-  return `<${tag} class="${classPrefix}__phrase ${classPrefix}__${name}-phrase">${phraseText(options, kebabToLowerCamel(name))}</${tag}>`;
-}
-
-function phraseText(options, key) {
-  const { phrases = {} } = options;
-  const fn = phrases[key] || DEFAULT_PHRASES[key];
-  switch (typeof fn) {
-    case 'function':
-      return fn(options);
-    case 'string':
-      return fn;
-    default:
-      return '';
-  }
-}
-
-function section({ classPrefix }, { name }, body) {
-  return element('section', {
-    classes: [`${classPrefix}__section`, `${classPrefix}__${name}`],
-  }, body);
-}
-
-function container({
-  classPrefix,
-  circledCitationIndex,
-  parentQuestionId,
-}, {
-  name,
-  visibleWhen,
-  logo = false,
-}, body) {
-  const classes = [`${classPrefix}__${name}-container`];
-  circledCitationIndex && classes.push('miso-circled-citation-index');
-  return element('miso-ask', { classes, visibleWhen, logo, parentQuestionId }, body);
-}
-
-function element(tag, attributes = {}, body = '') {
-  if (typeof attributes === 'string' || Array.isArray(attributes)) {
-    body = attributes;
-    attributes = {};
-  }
-  return `<${tag}${attrs(attributes)}>${Array.isArray(body) ? body.join('') : body}</${tag}>`;
-}
-
-function attrs({ classes = [], ...attributes } = {}) {
-  let str = ``;
-  if (classes.length) {
-    str += ` class="${classes.join(' ')}"`;
-  }
-  for (const name in attributes) {
-    const value = attributes[name];
-    if (value !== undefined) {
-      str += ` ${lowerCamelToKebab(name)}="${value}"`;
-    }
-  }
-  return str;
-}

package/src/defaults/common/templates.js

@@ -0,0 +1,173 @@
+import { lowerCamelToKebab, kebabToLowerCamel, kebabOrSnakeToLowerCamel, defineValues } from '@miso.ai/commons';
+
+// TODO: rename classPrefix -> rootClass?
+// TODO: placeholder
+
+export class Sections {
+
+  constructor({ helpers }) {
+    this._helpers = helpers;
+  }
+
+  errorSection(options) {
+    const { section, container } = this._helpers;
+    return section(options, { name: 'error' }, [
+      container(options, { name: 'error', visibleWhen: 'erroneous' }, '<miso-error></miso-error>'),
+    ]);
+  }
+
+  answerGroup(options) {
+    return [
+      this.answer(options),
+      this.affiliation(options),
+      this.sources(options),
+    ];
+  }
+
+  answer(options) {
+    const { container } = this._helpers;
+    return container(options, { name: 'answer', visibleWhen: 'ready' }, [
+      ...this.question(options),
+      '<miso-answer></miso-answer>',
+      '<miso-feedback></miso-feedback>',
+    ]);
+  }
+
+  question(options) {
+    const { phrase } = this._helpers;
+    return [
+      phrase(options, { name: 'question', tag: 'div' }),
+      '<miso-question></miso-question>',
+    ];
+  }
+
+  sources(options) {
+    const { container, phrase } = this._helpers;
+    return container(options, { name: 'sources', visibleWhen: 'nonempty' }, [
+      phrase(options, { name: 'sources', tag: 'h3' }),
+      '<miso-sources></miso-sources>',
+    ]);
+  }
+
+  affiliation(options) {
+    const { container } = this._helpers;
+    const { affiliation = true } = options || {};
+    if (!affiliation) {
+      return '';
+    }
+    return container(options, { name: 'affiliation', visibleWhen: 'nonempty' }, [
+      '<miso-affiliation></miso-affiliation>',
+    ]);
+  }
+
+}
+
+export class Helpers {
+
+  constructor(context) {
+    this._context = context;
+    defineValues(this, { lowerCamelToKebab, kebabToLowerCamel, kebabOrSnakeToLowerCamel });
+  }
+
+  // options //
+  normalizeOptions({
+    classPrefix,
+    circledCitationIndex = true,
+    phrases,
+    ...options
+  } = {}) {
+    classPrefix = classPrefix || this._context.CLASS_PREFIX;
+    phrases = this.normalizePhraseOptions(phrases);
+    return { classPrefix, circledCitationIndex, phrases, ...options };
+  }
+
+  normalizePhraseOptions(options = {}) {
+    if (!options) {
+      return {};
+    }
+    const normalized = {};
+    for (const key in options) {
+      normalized[this.normalizePhraseOptionKey(key)] = options[key];
+    }
+    return normalized;
+  }
+
+  normalizePhraseOptionKey(key) {
+    key = kebabOrSnakeToLowerCamel(key);
+    if (key === 'relatedQuestions') {
+      return 'querySuggestions'; // legacy key
+    }
+    return key;
+  }
+
+  // html //
+  phrase(options, { name, tag = 'div', inline = false }) {
+    const { classPrefix } = options;
+    const mainClass = inline ? `${classPrefix}__phrase-inline` : `${classPrefix}__phrase`;
+    return `<${tag} class="${mainClass} ${classPrefix}__${name}-phrase">${this.phraseText(options, kebabToLowerCamel(name))}</${tag}>`;
+  }
+
+  phraseText(options, key) {
+    const { phrases = {} } = options;
+    const fn = phrases[key] || this._context.DEFAULT_PHRASES[key];
+    switch (typeof fn) {
+      case 'function':
+        return fn(options);
+      case 'string':
+        return fn;
+      default:
+        return '';
+    }
+  }
+
+  section({ classPrefix }, { name }, body) {
+    return this.element('section', {
+      classes: [`${classPrefix}__section`, `${classPrefix}__${name}`],
+    }, body);
+  }
+
+  container({ classPrefix, circledCitationIndex, parentQuestionId }, { name, visibleWhen, 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);
+  }
+
+  element(tag, attributes = {}, body = '') {
+    return `<${tag}${this.attrs(attributes)}>${Array.isArray(body) ? body.join('') : body}</${tag}>`;
+  }
+
+  attrs({ classes = [], ...attributes } = {}) {
+    let str = ``;
+    if (classes.length) {
+      str += ` class="${classes.join(' ')}"`;
+    }
+    for (const name in attributes) {
+      const value = attributes[name];
+      if (value !== undefined) {
+        str += ` ${lowerCamelToKebab(name)}="${value}"`;
+      }
+    }
+    return str;
+  }
+
+}
+
+export function externalize(object) {
+  const externalized = {};
+  const props = new Set();
+  for (let o = object; o !== Object.prototype; o = Object.getPrototypeOf(o)) {
+    const descriptors = Object.getOwnPropertyDescriptors(o);
+    for (const key in descriptors) {
+      if (key === 'constructor' || key.startsWith('_') || props.has(key)) {
+        continue;
+      }
+      props.add(key);
+      // TODO: getter, setter
+      const { value } = descriptors[key];
+      if (value) {
+        externalized[key] = typeof value === 'function' ? value.bind(object) : value;
+      }
+    }
+  }
+  return Object.freeze(externalized);
+}

package/src/defaults/hybrid-search/answer-box.js

@@ -0,0 +1,118 @@
+import { CLASS_PREFIX } from './constants.js';
+import { STATUS } from '../../constants.js';
+import { showMore as DEFAULT_PHRASE_SHOW_MORE, showLess as DEFAULT_PHRASE_SHOW_LESS } from './phrases.js';
+
+const CLASS_OPEN = 'answer-box-open';
+const CLASS_SHOWN = 'answer-box-shown';
+const TOGGLE_BUTTON_SELECTOR = '[data-role="answer-box-toggle"]';
+
+export default class AnswerBox {
+
+  constructor(client, element, { classPrefix = CLASS_PREFIX, phrases = {} } = {}) {
+    this._client = client;
+    this._workflow = client.ui.hybridSearch;
+    this._element = element;
+    this._classPrefix = classPrefix;
+    this._phrases = phrases;
+    this._init();
+  }
+
+  _init() {
+    const element = this._element;
+    const workflow = this._workflow;
+
+    // expose widget API
+    workflow.answerBox = this;
+    workflow._unsubscribes.push(() => this.destroy()); // TODO: review
+
+    // handle toggle button clicks
+    const callback = event => this._handleClick(event);
+    element.addEventListener('click', callback);
+
+    // sync state
+    this._syncWofkflowStatus();
+    this._syncButtonText();
+
+    this._unsubscribes = [
+      () => element.removeEventListener('click', callback),
+      workflow.on('loading', () => this.hide()),
+      workflow.on('error', () => this.show()),
+      workflow.on('ready', () => this.show()),
+    ];
+  }
+
+  _handleClick({ target, button }) {
+    // only left click
+    if (button !== 0) {
+      return;
+    }
+    if (target.closest(TOGGLE_BUTTON_SELECTOR)) {
+      this.toggleOpen();
+    }
+  }
+
+  _syncWofkflowStatus() {
+    const { status } = this._workflow;
+    switch (status) {
+      case STATUS.ERRONEOUS:
+      case STATUS.READY:
+        this.show();
+        break;
+      default:
+        this.hide();
+    }
+  }
+
+  _updateBoxStatus(method, className) {
+    this._element.classList[method](`${this._classPrefix}__${className}`);
+  }
+
+  _syncButtonText() {
+    const phrase = this.isOpen ? this._phrases.showLess || DEFAULT_PHRASE_SHOW_LESS : this._phrases.showMore || DEFAULT_PHRASE_SHOW_MORE;
+    for (const button of this._element.querySelectorAll(TOGGLE_BUTTON_SELECTOR)) {
+      button.textContent = phrase;
+    }
+  }
+
+  destroy() {
+    for (const unsubscribe of this._unsubscribes) {
+      unsubscribe();
+    }
+    const workflow = this._workflow;
+    if (workflow && workflow.answerBox === this) {
+      delete workflow.answerBox;
+    }
+  }
+
+}
+
+const GETTERS = {
+  isOpen: CLASS_OPEN,
+  shown: CLASS_SHOWN,
+};
+
+const METHODS = {
+  toggleOpen: ['toggle', CLASS_OPEN],
+  open: ['open', CLASS_OPEN],
+  close: ['remove', CLASS_OPEN],
+  toggleHidden: ['toggle', CLASS_SHOWN],
+  show: ['add', CLASS_SHOWN],
+  hide: ['remove', CLASS_SHOWN],
+};
+
+for (const [prop, className] of Object.entries(GETTERS)) {
+  Object.defineProperty(AnswerBox.prototype, prop, {
+    get() {
+      return this._element.classList.contains(`${this._classPrefix}__${className}`);
+    },
+  });
+}
+
+for (const [method, [action, className]] of Object.entries(METHODS)) {
+  AnswerBox.prototype[method] = function() {
+    this._updateBoxStatus(action, className);
+    if (className === CLASS_OPEN) {
+      this._syncButtonText();
+    }
+  };
+}