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

package/src/defaults/hybrid-search/constants.js

@@ -0,0 +1,2 @@
+export const CLASS_PREFIX = 'miso-hybrid-search-combo';
+export const CONAINER_TAG = 'miso-hybrid-search';

package/src/defaults/hybrid-search/controls.js

@@ -0,0 +1,11 @@
+import AnswerBox from './answer-box.js';
+
+export function wireAnswerBox(client, element) {
+  if (!client) {
+    throw new Error('client is required');
+  }
+  if (!element) {
+    return;
+  }
+  new AnswerBox(client, element);
+}

package/src/defaults/hybrid-search/index.js

@@ -0,0 +1,9 @@
+import * as _constants from './constants.js';
+import * as _phrases from './phrases.js';
+import * as _templates from './templates.js';
+
+export * from './controls.js';
+
+export const constants = Object.freeze(_constants);
+export const phrases = Object.freeze(_phrases);
+export const templates = Object.freeze(_templates);

package/src/defaults/hybrid-search/phrases.js

@@ -0,0 +1,22 @@
+/**
+ * The phrase displayed right before <miso-question>
+ */
+export const question = 'You asked...';
+
+/**
+ * The phrase displayed right before <miso-sources>
+ */
+export const sources = 'Sources';
+
+/**
+ * The phrase to display <miso-keywords>
+ */
+export const keywords = 'You searched for “${value}”';
+
+/**
+ * The phrase to display <miso-hits>
+ */
+export const hits = '${value} Results';
+
+export const showMore = 'Show more';
+export const showLess = 'Show less';

package/src/defaults/hybrid-search/templates.js

@@ -0,0 +1,83 @@
+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';
+
+class Sections extends _Sections {
+
+  constructor() {
+    super({ helpers });
+  }
+
+  answerBox(options) {
+    const { element } = this._helpers;
+    const { classPrefix } = options;
+    return element('div', { classes: [`${classPrefix}__answer-box`] }, [
+      element('div', { classes: [`${classPrefix}__answer-box-inner`] }, this.answerGroup(options)),
+      this.answerBoxToggle(options),
+    ]);
+  }
+
+  answerBoxToggle(options) {
+    const { element } = this._helpers;
+    const { classPrefix } = options;
+    return element('div', { classes: [`${classPrefix}__answer-box-toggle-container`] }, [
+      element('div', { classes: [`${classPrefix}__answer-box-toggle`], 'data-role': 'answer-box-toggle' }),
+    ]);
+  }
+
+  searchResultsGroup(options) {
+    const { container } = this._helpers;
+    return container(options, { name: 'search-results', visibleWhen: 'ready' }, [
+      this.searchResultsInfoGroup(options),
+      this.searchResultsFilters(options),
+      '<miso-products></miso-products>',
+    ]);
+  }
+
+  searchResultsInfoGroup(options) {
+    const { element } = this._helpers;
+    const { classPrefix } = options;
+    return element('div', { classes: [`${classPrefix}__search-results-info`] }, [
+      this.keywords(options),
+      this.hits(options),
+    ]);
+  }
+
+  searchResultsFilters(options) {
+    const { element } = this._helpers;
+    const { classPrefix } = options;
+    return element('div', { classes: [`${classPrefix}__search-results-filters`] }, [
+      '<miso-facets></miso-facets>',
+    ]);
+  }
+
+  keywords(options) {
+    const { phrase } = this._helpers;
+    return phrase(options, { name: 'keywords', tag: 'div', inline: true }).replaceAll('${value}', '<miso-keywords></miso-keywords>');
+  }
+
+  hits(options) {
+    const { phrase } = this._helpers;
+    return phrase(options, { name: 'hits', tag: 'div', inline: true }).replaceAll('${value}', '<miso-hits></miso-hits>');
+  }
+
+}
+
+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;
+  options = normalizeOptions(options);
+  const { answerBox } = sections;
+  return [
+    section(options, { name: 'question' }, [
+      container(options, { name: 'query' }, '<miso-query></miso-query>'),
+    ]),
+    section(options, { name: 'answer' }, [
+      answerBox(options),
+    ]),
+    section(options, { name: 'search-results' }, sections.searchResultsGroup(options)),
+  ].join('');
+};

package/src/defaults/index.js

@@ -1,3 +1,5 @@
 import * as _ask from './ask/index.js';
+import * as _hybridSearch from './hybrid-search/index.js';
 
 export const ask = Object.freeze(_ask);
+export const hybridSearch = Object.freeze(_hybridSearch);

package/src/element/container/index.js

@@ -1,4 +1,5 @@
 export { default as MisoAskElement } from './miso-ask.js';
 export { default as MisoExploreElement } from './miso-explore.js';
+export { default as MisoHybridSearchElement } from './miso-hybrid-search.js';
 export { default as MisoSearchElement } from './miso-search.js';
 export { default as MisoRecommendationElement } from './miso-recommendation.js';

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

@@ -0,0 +1,19 @@
+import MisoContainerElement from './miso-container.js';
+
+const TAG_NAME = 'miso-hybrid-search';
+
+export default class MisoHybridSearchElement extends MisoContainerElement {
+
+  static get observedAttributes() {
+    return MisoContainerElement.observedAttributes;
+  }
+
+  static get tagName() {
+    return TAG_NAME;
+  }
+
+  _getWorkflow(client) {
+    return client.ui.hybridSearch;
+  }
+
+}

package/src/element/role/index.js

@@ -10,4 +10,7 @@ export { default as MisoSourcesElement } from './miso-sources.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 MisoKeywordsElement } from './miso-keywords.js';
+export { default as MisoHitsElement } from './miso-hits.js';
+export { default as MisoFacetsElement } from './miso-facets.js';
 export { default as MisoErrorElement } from './miso-error.js';

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

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

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

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

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

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

package/src/layout/index.js

@@ -12,3 +12,4 @@ export { default as FeedbackLayout } from './radio/feedback.js';
 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';

package/src/layout/input/facets.js

@@ -0,0 +1,242 @@
+import { escapeHtml } from '@miso.ai/commons';
+import { LAYOUT_CATEGORY } from '../../constants.js';
+import TemplateBasedLayout from '../template.js';
+import Bindings from '../../util/bindings.js';
+
+const TYPE = 'facets';
+const DEFAULT_CLASSNAME = 'miso-facets';
+const DEDAULT_FACET_CLASSNAME = 'miso-facet';
+const CUSTOM_ATTRIBUTES_PREFIX = 'custom_attributes.';
+
+function root(layout, state) {
+  const { className, role, templates } = layout;
+  const roleAttr = role ? `data-role="${role}"` : '';
+  return `<div class="${className}" ${roleAttr}>${templates.facets(layout, state)}</div>`;
+}
+
+function facets(layout, state) {
+  const { templates } = layout;
+  const { facet_fields = {} } = state.value || {};
+  return Object.keys(facet_fields).map(field => templates.facet(layout, { field, entries: facet_fields[field] }, state));
+}
+
+function facet(layout, facet, state) {
+  const { facetClassName = DEDAULT_FACET_CLASSNAME, templates } = layout;
+  const { field } = facet;
+  return `<div class="${facetClassName}" data-role="facet" data-field="${escapeHtml(field)}">${templates.header(layout, facet, state)}${templates.options(layout, facet, state)}</div>`;
+}
+
+function header(layout, facet, state) {
+  const { facetClassName = DEDAULT_FACET_CLASSNAME, templates } = layout;
+  return `<div class="${facetClassName}__header">${templates.title(layout, facet, state)}</div>`;
+}
+
+function title(layout, { field }) {
+  if (field.startsWith(CUSTOM_ATTRIBUTES_PREFIX)) {
+    field = field.substring(CUSTOM_ATTRIBUTES_PREFIX.length);
+  }
+  // TODO: to words
+  return escapeHtml(field);
+}
+
+function options(layout, { field, entries }, state) {
+  const { facetClassName = DEDAULT_FACET_CLASSNAME, templates } = layout;
+  return `<ul class="${facetClassName}__options" data-role="options">${entries.map(([value, count]) => templates.option(layout, { field, value, count }, state)).join('')}</ul>`;
+}
+
+function option(layout, entry, state) {
+  const { facetClassName = DEDAULT_FACET_CLASSNAME, templates } = layout;
+  return `
+<li class="${facetClassName}__option" data-role="option" tabindex="0">
+  <span class="${facetClassName}__value">${templates.value(layout, entry, state)}</span>
+  <span class="${facetClassName}__count">${templates.count(layout, entry, state)}</span>
+</li>`;
+}
+
+
+function value(layout, { value }, state) {
+  return escapeHtml(value);
+}
+
+function count(layout, { count }, state) {
+  return layout.templates.helpers.formatNumber(count);
+}
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  facets,
+  facet,
+  header,
+  title,
+  options,
+  option,
+  value,
+  count,
+});
+
+function getItemKey(field, value) {
+  return `${field}:::${value}`;
+}
+
+function getSelectedValues(facets) {
+  const selections = {};
+  for (const field in facets) {
+    selections[field] = new Set(facets[field]);
+  }
+  return selections;
+}
+
+export default class FacetsLayout extends TemplateBasedLayout {
+
+  static get category() {
+    return LAYOUT_CATEGORY.FILTERS;
+  }
+
+  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._bindings = new Bindings();
+  }
+
+  initialize(view) {
+    const { proxyElement, hub, filters } = view;
+    this._unsubscribes = [
+      ...this._unsubscribes,
+      proxyElement.on('click', (e) => this._handleClick(e)),
+      filters.on('update', (e) => this._updateSelections(e)),
+      filters.on('reset', () => this._syncSelections()),
+    ];
+  }
+
+  _render(element, data, controls) {
+    super._render(element, data, controls);
+    this._syncSelections();
+  }
+
+  _afterRender(element, state) {
+    this._syncBindings(element, state);
+  }
+
+  _unrender() {
+    this._clearBindings();
+  }
+
+  _syncSelections() {
+    const selectedValues = getSelectedValues(this._view.filters.states.facets);
+    for (const { value: { field, value }, element } of this._bindings.entries) {
+      this._setSelected(element, selectedValues[field] && selectedValues[field].has(value));
+    }
+  }
+
+  _updateSelections({ updates }) {
+    const selectedValues = getSelectedValues(updates.facets);
+    for (const { value: { field, value }, element } of this._bindings.entries) {
+      if (!selectedValues[field]) {
+        continue;
+      }
+      this._setSelected(element, selectedValues[field].has(value));
+    }
+  }
+
+  _setSelected(element, selected) {
+    if (!element) {
+      return;
+    }
+    if (selected) {
+      element.classList.add('selected');
+    } else {
+      element.classList.remove('selected');
+    }
+  }
+
+  _syncBindings(element, state) {
+    if (!element || !state.value) {
+      return;
+    }
+    const items = this._getItems(state);
+    const keys = [];
+    const values = [];
+    const elements = [];
+    for (const facetElement of this._getFacetElements(element)) {
+      const field = facetElement.getAttribute('data-field');
+      const _values = items[field];
+      if (!_values) {
+        continue;
+      }
+      const itemElements = this._getItemElements(facetElement);
+      for (let i = 0; i < itemElements.length; i++) {
+        const itemElement = itemElements[i];
+        const value = _values[i];
+        if (!value) {
+          break;
+        }
+        keys.push(getItemKey(field, value));
+        values.push({ field, value });
+        elements.push(itemElement);
+      }
+    }
+    this._bindings.update(keys, values, elements);
+  }
+
+  _clearBindings() {
+    this._bindings.clear();
+  }
+
+  _getItems({ value } = {}) {
+    const { facet_fields = {} } = value || {};
+    const items = {};
+    for (const field in facet_fields) {
+      // the key needs to be matched against data-field attribute
+      items[escapeHtml(field)] = facet_fields[field].map(([value]) => value);
+    }
+    return items;
+  }
+
+  _getFacetElements(element) {
+    return Array.from(element.querySelectorAll(`[data-role="facet"]`));
+  }
+
+  _getFacetElement(element, field) {
+    return element.querySelector(`[data-role="facet"][data-field="${field}"]`);
+  }
+
+  _getItemElements(element) {
+    return Array.from(element.querySelectorAll(`[data-role="option"]`));
+  }
+
+  _handleClick(event) {
+    const element = event.target.closest(`[data-role="option"]`);
+    if (!element) {
+      return;
+    }
+    const binding = this._bindings.get(element);
+    const option = binding && binding.value;
+    if (!option) {
+      return;
+    }
+    const { field, value } = option;
+    this._view.filters.facets.toggle(field, value);
+    this._view.filters.apply(); // TODO: support autoApply = false
+  }
+
+  destroy() {
+    this._bindings.clear();
+    super.destroy();
+  }
+
+}

package/src/layout/input/option-list.js

@@ -71,13 +71,13 @@ export default class OptionListLayout extends TemplateBasedLayout {
     this._unsubscribes = [
       ...this._unsubscribes,
       proxyElement.on('click', (e) => this._handleClick(e)),
-      hub.on(fields.suggestions(), () => this._handleInput()),
+      hub.on(fields.suggestions(), () => this._handleInput()), // TODO: use data mapping
     ];
   }
 
   _preprocess() {
     return super._preprocess({
-      state: this._view.hub.states[fields.suggestions()],
+      state: this._view.hub.states[fields.suggestions()], // TODO: use data mapping
     });
   }
 
@@ -135,12 +135,11 @@ export default class OptionListLayout extends TemplateBasedLayout {
       return;
     }
     // TODO: q -> value
-    this._view.hub.trigger(fields.query(), { q: value });
+    this._view.hub.update(fields.query(), { q: value });
   }
 
   destroy() {
     this._destroyTrackable();
-    this._view = undefined;
     super.destroy();
   }
 

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

@@ -1,8 +1,8 @@
 import { defineValues, escapeHtml, findInAncestors, debounce } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY, STATUS, EVENT_TYPE } from '../../constants.js';
+import { LAYOUT_CATEGORY, STATUS, EVENT_TYPE, DATA_ASPECT } from '../../constants.js';
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
-import { helpers, imageBlock, productInfoBlock } from '../templates.js';
+import { imageBlock, productInfoBlock } from '../templates.js';
 import { SEND, SEARCH } from '../../asset/svgs.js';
 
 const TYPE = 'search-box';
@@ -57,7 +57,7 @@ function query(layout, { text, text_with_inverted_markups } = {}) {
 
 function product(layout, { product }) {
   const { templates } = layout;
-  const [openTag, closeTag] = helpers.tagPair(layout, product, { role: false });
+  const [openTag, closeTag] = templates.helpers.tagPair(layout, product, { role: false });
   return [
     openTag,
     templates.imageBlock(layout, product),
@@ -93,7 +93,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
   product,
   imageBlock,
   productInfoBlock,
-  helpers,
 });
 
 const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
@@ -142,8 +141,8 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
       proxyElement.on('click', (e) => this._handleClick(e)),
       proxyElement.on('focusin', (e) => this._handleFocusIn(e)),
       proxyElement.on('focusout', (e) => this._handleFocusOut(e)),
+      hub.on(fields.data(DATA_ASPECT.AUTOCOMPLETE), () => view.refresh({ force: true })),
     ];
-    this._unsubscribes.push(hub.on(fields.completions(), () => view.refresh({ force: true })));
   }
 
   focus() {
@@ -176,7 +175,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     state = super._preprocess({ state });
     return {
       ...state,
-      completions: this._view.hub.states[fields.completions()],
+      completions: this._view.hub.states[fields.data(DATA_ASPECT.AUTOCOMPLETE)],
     };
   }
 
@@ -324,7 +323,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     }
     this.close();
     // TODO: q -> value
-    this._view.hub.trigger(fields.query(), { q: value });
+    this._view.hub.update(fields.query(), { q: value });
     this._trackSubmit(value);
   }
 

package/src/layout/list/collection.js

@@ -1,7 +1,7 @@
 import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../trackable.js';
-import { product, article, question, productInfoBlock, articleInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, priceBlock, discountRateText, ctaBlock, cta, imageBlock, indexBlock, helpers } from '../templates.js';
+import { product, article, question, productInfoBlock, articleInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, priceBlock, discountRateText, ctaBlock, cta, imageBlock, indexBlock } from '../templates.js';
 
 function root(layout, state) {
   const { className, role, templates } = layout;
@@ -67,7 +67,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
   cta,
   imageBlock,
   indexBlock,
-  helpers,
 });
 
 export default class CollectionLayout extends TemplateBasedLayout {

package/src/layout/raf.js

@@ -103,6 +103,7 @@ export default class RafLayout {
       unsubscribe();
     }
     this._unsubscribes = [];
+    this._view = undefined;
     this._element = undefined;
     this._notifyUpdate = undefined;
     this._pending = undefined;

package/src/layout/template.js

@@ -1,6 +1,6 @@
 import { defineValues } from '@miso.ai/commons';
 import RafLayout from './raf.js';
-import { requiresImplementation } from './templates.js';
+import { requiresImplementation, helpers } from './templates.js';
 
 export default class TemplateBasedLayout extends RafLayout {
 
@@ -11,6 +11,7 @@ export default class TemplateBasedLayout extends RafLayout {
       templates: {
         ...requiresImplementation('root'),
         ...templates,
+        helpers,
       },
     });
   }

package/src/layout/templates.js

@@ -176,6 +176,7 @@ function tagPair({ className, options = {} }, { product_id, url }, { classSuffix
 }
 
 const DEFAULT_DATE_OPTIONS = Object.freeze({ locale: 'en-US', year: 'numeric', month: 'short', day: 'numeric' });
+const DEFAULT_NUMBER_OPTIONS = 'en-US';
 
 function formatDate(date, fn = DEFAULT_DATE_OPTIONS) {
   switch (typeof fn) {
@@ -190,6 +191,19 @@ function formatDate(date, fn = DEFAULT_DATE_OPTIONS) {
   }
 }
 
+function formatNumber(number, fn = DEFAULT_NUMBER_OPTIONS) {
+  switch (typeof fn) {
+    case 'function':
+      return fn(number);
+    case 'string':
+      return new Intl.NumberFormat(fn).format(number);
+    case 'object':
+      return new Intl.NumberFormat(fn.locale || DEFAULT_NUMBER_OPTIONS.locale, fn).format(number);
+    default:
+      throw new Error(`Invalid number format: ${fn}`);
+  }
+}
+
 function asFunction(template = '') {
   return typeof template === 'function' ? template : () => template;
 }
@@ -197,6 +211,7 @@ function asFunction(template = '') {
 export const helpers = Object.freeze({
   tagPair,
   formatDate,
+  formatNumber,
   escapeHtml,
   asFunction,
 });

package/src/layout/text/text.js

@@ -5,10 +5,35 @@ import TemplateBasedLayout from '../template.js';
 const TYPE = 'text';
 const DEFAULT_CLASSNAME = 'miso-text';
 
-function root(layout, state) {
-  const { className, role, options: { tag } } = layout;
+function root(layout, { value }) {
+  const { className, role, options: { raw = false, tag } } = layout;
   const roleAttr = role ? `data-role="${role}"` : '';
-  return `<${tag} class="${className}" ${roleAttr}>${escapeHtml(state.value || '')}</${tag}>`;
+  const content = value !== undefined ? escapeHtml(getFormatFunction(layout)(value)) : '';
+  return raw ? content : `<${tag} class="${className}" ${roleAttr}>${content}</${tag}>`;
+}
+
+function getFormatFunction(layout) {
+  let { format } = layout.options;
+  const { formatDate, formatNumber } = layout.templates.helpers;
+  if (!format) {
+    return v => `${v}`;
+  }
+  switch (typeof format) {
+    case 'function':
+      return format;
+    case 'string':
+      format = [format];
+      break;
+  }
+  let [type, args] = format;
+  switch (type) {
+    case 'date':
+      return v => formatDate(v, args);
+    case 'number':
+      return v => formatNumber(v, args);
+    default:
+      return v => `${v}`;
+  }
 }
 
 const DEFAULT_TEMPLATES = Object.freeze({