@miso.ai/client-sdk-ui 1.11.0-beta.9 → 1.11.0

package/dist/cjs/workflow/use-link.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UseLinkMixin = void 0;
+exports.enableUseLink = enableUseLink;
+var _commons = require("@miso.ai/commons");
+function enableUseLink(prototype) {
+  (0, _commons.mixin)(prototype, UseLinkMixin.prototype);
+}
+class UseLinkMixin {
+  useLink(fn) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (typeof fn !== 'function' && fn !== false) {
+      throw new Error('useLink(fn) expects fn to be a function or false');
+    }
+    this._linkFn = fn ? [fn, options] : false;
+    return this;
+  }
+  _submitToPage() {
+    let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (!this._linkFn) {
+      return;
+    }
+    // TODO: we want a submit event
+    const url = this._getSubmitUrl(args);
+    const [_, options = {}] = this._linkFn;
+    if (options.open === false) {
+      window.location.href = url;
+    } else {
+      const target = options.target || '_blank';
+      const windowFeatures = options.windowFeatures || '';
+      window.open(url, target, windowFeatures);
+    }
+  }
+  _getSubmitUrl(args) {
+    if (!this._linkFn) {
+      throw new Error('useLink(fn) must be called before _getSubmitUrl()');
+    }
+    return this._linkFn[0](args.q);
+  }
+}
+exports.UseLinkMixin = UseLinkMixin;

package/package.json

@@ -26,7 +26,7 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.11.0-beta.9"
+    "@miso.ai/commons": "1.11.0"
   },
-  "version": "1.11.0-beta.9"
+  "version": "1.11.0"
 }

package/src/actor/feedback.js

@@ -1,4 +1,5 @@
 import * as fields from './fields.js';
+import { EVENT_TYPE } from '../constants.js';
 
 export default class FeedbackActor {
 
@@ -10,29 +11,11 @@ export default class FeedbackActor {
   }
   
   _trigger(state) {
-    const { [fields.data()]: data } = this._hub.states;
-    const { question_id } = data && data.value || {};
-    if (!question_id) {
-      return;
-    }
-    // TODO: ad-hoc
-    const { request } = data || {};
-    const { payload } = request || {};
-    const question_source = payload && payload._meta && payload._meta.question_source;
-    this._hub.trigger(fields.interaction(), this._buildInteraction(state, { question_source }));
-  }
-
-  _buildInteraction({ value, unselected }, { question_source }) {
-    return {
-      type: 'feedback',
-      context: {
-        custom_context: {
-          result_type: 'answer',
-          question_source,
-          value: unselected ? 'unselected' : value,
-        },
-      },
-    };
+    this._hub.trigger(fields.tracker(), {
+      type: EVENT_TYPE.FEEDBACK,
+      result_type: 'answer',
+      value: state.unselected ? 'unselected' : state.value,
+    });
   }
 
   _destroy() {

package/src/actor/fields.js

@@ -6,6 +6,10 @@ export function suggestions() {
   return 'suggestions';
 }
 
+export function completions() {
+  return 'completions';
+}
+
 export function filters() {
   return 'filters';
 }
@@ -14,16 +18,16 @@ export function query() {
   return 'query';
 }
 
-export function request(aspect) {
-  return aspect ? `request:${aspect}` : 'request';
+export function request() {
+  return 'request';
 }
 
-export function response(aspect) {
-  return aspect ? `response:${aspect}` : 'response';
+export function response() {
+  return 'response';
 }
 
-export function data(aspect) {
-  return aspect ? `data:${aspect}` : 'data';
+export function data() {
+  return 'data';
 }
 
 export function view(role) {
@@ -49,3 +53,7 @@ export function feedback() {
 export function input() {
   return 'input';
 }
+
+export function more() {
+  return 'more';
+}

package/src/actor/index.js

@@ -6,5 +6,4 @@ export { default as SessionMaker } from './sessions.js';
 export { default as DataActor } from './data.js';
 export { default as ViewsActor } from './views.js';
 export { default as FeedbackActor } from './feedback.js';
-export { default as AutocompleteActor } from './autocomplete.js';
 export { default as InteractionsActor } from './interactions.js';

package/src/actor/interactions.js

@@ -12,20 +12,14 @@ export default class InteractionsActor {
   }
 
   _handle(payload) {
+    // TODO: omit when option == false
     payload = asArray(payload);
-    const { preprocess = [], handle } = this._options.resolved.interactions;
-    for (const p of preprocess) {
-      payload = payload.map(p);
-    }
-    // TODO: support filter?
+
     if (payload.length === 0) {
       return;
     }
-    if (handle) {
-      handle(payload);
-    } else {
-      this._client.api.interactions.upload(payload, { merge: true });
-    }
+
+    this._client.api.interactions.upload(payload, { merge: true });
   }
 
   destroy() {

package/src/actor/sessions.js

@@ -1,4 +1,4 @@
-import { uuidv4, delegateGetters } from '@miso.ai/commons';
+import { uuidv4 } from '@miso.ai/commons';
 import * as fields from './fields.js';
 
 export default class SessionMaker {
@@ -6,43 +6,15 @@ export default class SessionMaker {
   constructor(hub) {
     this._hub = hub;
     this._sessionIndex = 0;
-    delegateGetters(hub, this, ['active']);
-  }
-
-  get active() {
-    // TODO: may eliminate active flag?
-    const session = this._hub.states[fields.session()];
-    return !!(session && session.active);
-  }
-
-  new({ force = false } = {}) {
-    const currentSession = this._hub.states[fields.session()];
-    if (currentSession && !currentSession.active && !force) {
-      return;
-    }
-    const session = this._create();
-    this._hub.update(fields.session(), session);
-  }
-
-  start() {
-    const session = this._hub.states[fields.session()] || this._create();
-    if (session.active) {
-      return;
-    }
-    this._hub.update(fields.session(), { ...session, active: true });
   }
 
   restart() {
-    this._hub.update(fields.session(), this._create(true));
-  }
-
-  _create(active = false) {
-    return Object.freeze({
-      active,
+    const session = Object.freeze({
       uuid: uuidv4(),
       index: this._sessionIndex++,
       meta: {},
     });
+    this._hub.update(fields.session(), session);
   }
 
 }

package/src/actor/tracker.js

@@ -1,8 +1,7 @@
-import { asArray } from '@miso.ai/commons';
-import { TRACKING_EVENT_TYPES, TRACKING_STATUS, EVENT_TYPE, validateEventType } from '../constants.js';
+import { asArray, trimObj } from '@miso.ai/commons';
+import { PERFORMANCE_EVENT_TYPES, TRACKING_STATUS, EVENT_TYPE, validateEventType } from '../constants.js';
 import * as fields from './fields.js';
 import States from '../util/states.js';
-import { toInteraction } from './utils.js';
 
 const VALUELESS_ITEMS = [Symbol('valueless')];
 
@@ -26,29 +25,36 @@ export default class Tracker {
     return this._states.getFullState(item);
   }
 
-  _trigger(type, items, meta = {}) {
+  _trigger(type, items) {
+    validateEventType(type);
     if (this._valueless) {
-      meta = items;
       items = VALUELESS_ITEMS;
     }
-    validateEventType(type);
+
     this._syncSession();
 
-    if (type !== EVENT_TYPE.SUBMIT) {
-      items = this._states.untriggered(asArray(items), type);
-      if (items.length === 0) {
-        return;
-      }
-      this._states.set(items, type, TRACKING_STATUS.TRIGGERED);
+    items = this._states.untriggered(asArray(items), type);
+    if (items.length === 0) {
+      return;
     }
+    this._states.set(items, type, TRACKING_STATUS.TRIGGERED);
 
-    const property = this._role === 'results' ? 'products' : this._role; // TODO: ad-hoc, see #83
-    const misoId = this._getMisoId();
-    const request = this._getRequestPayload();
-    const values = this._valueless ? undefined : items;
+    this._sendToHub({
+      type,
+      items: this._valueless ? undefined : items,
+    });
+  }
+
+  submit({ value }) {
+    this._syncSession();
+    this._sendToHub({
+      type: EVENT_TYPE.SUBMIT,
+      value,
+    });
+  }
 
-    // TODO: should trigger 'tracker' and let workflow translate to interactions
-    this._hub.trigger(fields.interaction(), toInteraction({ property, misoId, request }, { event: type, values, meta }));
+  _sendToHub(args) {
+    this._hub.trigger(fields.tracker(), Object.freeze(trimObj({ role: this._role, ...args })));
   }
 
   _syncSession() {
@@ -82,7 +88,7 @@ export default class Tracker {
 
 }
 
-for (const type of TRACKING_EVENT_TYPES) {
+for (const type of PERFORMANCE_EVENT_TYPES) {
   Tracker.prototype[type] = function(items, meta) {
     this._trigger(type, items, meta);
   };

package/src/actor/utils.js

@@ -1,50 +1,3 @@
-import { trimObj } from '@miso.ai/commons';
-import { ROLE, EVENT_TYPE } from '../constants.js';
-
-const PRODUCT_TYPED_PROPERTIES = new Set([
-  ROLE.PRODUCTS,
-  ROLE.SOURCES,
-  ROLE.RELATED_RESOURCES,
-]);
-
-// TODO: move away
-export function isProduct(property) {
-  return PRODUCT_TYPED_PROPERTIES.has(property);
-}
-
-export function toInteraction({ property, misoId, request }, { event, values, manual }) {
-  // TODO: ad-hoc
-  const question_source = request && request._meta && request._meta.question_source;
-  const isProductType = isProduct(property);
-  const isSubmit = event === EVENT_TYPE.SUBMIT;
-  const isAffiliation = property === ROLE.AFFILIATION;
-
-  const product_ids = isProductType && values ? values.map(v => typeof v === 'string' ? v : v.product_id).filter(v => v) : !isSubmit ? [] : undefined;
-  const items = !isProductType && !isSubmit && values ? values.map(v => v.text || v.id || v) : undefined;
-  const value = isSubmit ? values : undefined;
-
-  const channel = isAffiliation ? values[0] && values[0].channel : undefined;
-  const positions = isAffiliation ? values.map(v => v.position) : undefined;
-
-  const payload = trimObj({
-    type: event === 'viewable' ? 'viewable_impression' : event,
-    product_ids,
-    miso_id: misoId,
-    context: {
-      custom_context: trimObj({
-        property,
-        channel,
-        items,
-        value,
-        positions,
-        trigger: manual ? 'manual' : 'auto',
-        question_source,
-      }),
-    },
-  });
-  return payload;
-}
-
 export function isCurrentSession(hub, session) {
   if (!session) {
     return false;

package/src/actor/view.js

@@ -22,7 +22,7 @@ export default class ViewActor {
   constructor(views, role) {
     this._events = new EventEmitter({ target: this });
     this._views = views;
-    this._config = views._rolesConfig[role] || {};
+    this._mapping = asMappingFunction((views._roles.mappings || {})[role] || role);
 
     defineValues(this, {
       role,
@@ -101,6 +101,10 @@ export default class ViewActor {
     }
     return this._tracker;
   }
+  
+  get workflowOptions() {
+    return this._views._getWorkflowOptions();
+  }
 
   get filters() {
     return this._views.filters;
@@ -122,21 +126,17 @@ export default class ViewActor {
     const previousData = this._data;
     this._data = data = this._sliceData(data || this._views._getData());
 
-    // protocol: no reaction until session starts
-    const { session, status, ongoing, request, meta } = data;
-    const active = session && session.active;
-    if (!force && !active) {
-      return;
-    }
-
     // if data is unchanged, skip unless forced
     if (!force && statesEqual(data, previousData)) {
       return;
     }
 
+    const { session, status, ongoing, request, meta, value } = data;
+    const baseState = { session, status, ongoing, request, meta, data: value, ...getDataEmptyness(data) };
+
     // render
     const notifyUpdate = (state = {}, options) => {
-      state !== false && this.updateState({ session, status, ongoing, request, meta, ...state }, options);
+      state !== false && this.updateState({ ...baseState, ...state }, options);
     };
     try {
       await this._layout.render(element, data, { notifyUpdate });
@@ -146,11 +146,10 @@ export default class ViewActor {
     }
   }
 
-  updateState({ session, status, ongoing, request, meta, error }, { silent = false } = {}) {
-    if (error) {
-      status = STATUS.ERRONEOUS;
-    }
-    const state = this._state = Object.freeze(trimObj({ session, status, ongoing, request, meta, error }));
+  updateState(state, { silent = false } = {}) {
+    // there might be error from notifyUpdate() call
+    const status = state.error ? STATUS.ERRONEOUS : state.status;
+    state = this._state = Object.freeze(trimObj({ ...state, status }));
     const { role } = this;
     this.hub.update(fields.view(role), state, { silent });
   }
@@ -163,7 +162,7 @@ export default class ViewActor {
   _sliceData(data) {
     const { value, error, status, meta, ...rest } = data;
     const sliced = {
-      value: asMappingFunction(this._config.mapping || this.role)(data),
+      value: this._mapping(data),
       status,
       data: value,
       meta,
@@ -247,3 +246,16 @@ function asMappingFunction(fn) {
       throw new Error(`Invalid mapping function: ${fn}`);
   }
 }
+
+function getDataEmptyness(data) {
+  return isDataStatusRelevantToEmptyness(data) ? { empty: !!isDateValueEmpty(data) } : {};
+}
+
+function isDataStatusRelevantToEmptyness(data) {
+  return data.status === STATUS.READY && !data.ongoing;
+}
+
+function isDateValueEmpty(data) {
+  const { value } = data;
+  return value === undefined || ((Array.isArray(value) || typeof value === 'string') && !value.length);
+}

package/src/actor/views.js

@@ -1,4 +1,4 @@
-import { defineValues, delegateGetters } from '@miso.ai/commons';
+import { defineValues, delegateGetters, trimObj } from '@miso.ai/commons';
 import { ROLE } from '../constants.js';
 import * as fields from './fields.js';
 import ViewActor from './view.js';
@@ -12,8 +12,7 @@ export default class ViewsActor {
     workflow,
     extensions,
     layouts,
-    roles = [],
-    rolesConfig = {},
+    roles,
     options,
   }) {
     this._hub = hub;
@@ -21,14 +20,17 @@ export default class ViewsActor {
     this._extensions = extensions;
     this._layoutFactory = layouts;
     this._options = options;
-    this._rolesConfig = rolesConfig;
+    this._roles = roles;
     this._containers = new Map();
     this._containerTracker = undefined;
     this._views = {};
-    this._trackers = new Trackers(this, roles);
+    this._trackers = new Trackers(this, roles.members);
     this._filters = new Filters(this);
 
-    for (const role of roles) {
+    for (const role of roles.members) {
+      if (role === ROLE.CONTAINER) {
+        continue;
+      }
       this._views[role] = new ViewActor(this, role);
     }
 
@@ -42,10 +44,14 @@ 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();
   }
@@ -144,7 +150,7 @@ 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 });
+        const fn = () => this._layoutFactory.create(name, { ...options, role, workflow: this._workflowName, workflowOptions: this._getWorkflowOptions() });
         if (role === ROLE.CONTAINER) {
           for (const view of this._containers.values()) {
             view.layout = fn();
@@ -162,7 +168,7 @@ export default class ViewsActor {
       return undefined;
     }
     const [name, options] = args;
-    return this._layoutFactory.create(name, { ...options, role, workflow: this._workflowName });
+    return this._layoutFactory.create(name, { ...options, role, workflow: this._workflowName, workflowOptions: this._getWorkflowOptions() });
   }
 
   get(role) {
@@ -229,6 +235,21 @@ 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);
@@ -271,6 +292,9 @@ class Trackers {
   constructor(views, roles) {
     this._views = views;
     for (const role of roles) {
+      if (role === ROLE.CONTAINER) {
+        continue;
+      }
       Object.defineProperty(this, role, {
         get: () => views.get(role).tracker,
       });

package/src/constants.js

@@ -22,7 +22,8 @@ export const ROLE = Object.freeze({
   AFFILIATION: 'affiliation',
   KEYWORDS: 'keywords',
   FACETS: 'facets',
-  HITS: 'hits',
+  TOTAL: 'total',
+  MORE: 'more',
   ERROR: 'error',
 });
 
@@ -40,34 +41,29 @@ const DATA_ROLE_SET = new Set([
   ROLE.RELATED_QUESTIONS,
   ROLE.AFFILIATION,
   ROLE.FACETS,
-  ROLE.HITS,
+  ROLE.TOTAL,
 ]);
 
 export function isDataRole(role) {
   return DATA_ROLE_SET.has(role);
 }
 
-export const DATA_ASPECT = Object.freeze({
-  AUTOCOMPLETE: 'autocomplete',
-});
+const PRODUCT_ROLE_SET = new Set([
+  ROLE.PRODUCTS,
+  ROLE.SOURCES,
+  ROLE.RELATED_RESOURCES,
+]);
 
-export const LAYOUT_CATEGORY = Object.freeze({
-  CONTAINER: 'container',
-  BANNER: 'banner',
-  LIST: 'list',
-  QUERY: 'query',
-  RADIO: 'radio',
-  FILTERS: 'filters',
-  TEXT: 'text',
-  AFFILIATION: 'affiliation',
-  ERROR: 'error',
-});
+export function isProductRole(role) {
+  return PRODUCT_ROLE_SET.has(role);
+}
 
 export const EVENT_TYPE = Object.freeze({
   IMPRESSION: 'impression',
   VIEWABLE: 'viewable',
   CLICK: 'click',
   SUBMIT: 'submit',
+  FEEDBACK: 'feedback',
 });
 
 export const TRACKING_EVENT_TYPES = [
@@ -75,8 +71,21 @@ export const TRACKING_EVENT_TYPES = [
   EVENT_TYPE.VIEWABLE,
   EVENT_TYPE.CLICK,
   EVENT_TYPE.SUBMIT,
+  EVENT_TYPE.FEEDBACK,
+];
+
+export const PERFORMANCE_EVENT_TYPES = [
+  EVENT_TYPE.IMPRESSION,
+  EVENT_TYPE.VIEWABLE,
+  EVENT_TYPE.CLICK,
 ];
 
+const PERFORMANCE_EVENT_TYPE_SET = new Set(PERFORMANCE_EVENT_TYPES);
+
+export function isPerformanceEventType(type) {
+  return PERFORMANCE_EVENT_TYPE_SET.has(type);
+}
+
 export const TRACKING_STATUS = Object.freeze({
   UNTRACKED: 'untracked',
   TRACKING: 'tracking',

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

@@ -14,9 +14,9 @@ export const sources = 'Sources';
 export const keywords = 'You searched for “${value}”';
 
 /**
- * The phrase to display <miso-hits>
+ * The phrase to display <miso-total>
  */
-export const hits = '${value} Results';
+export const total = '${value} Results';
 
 export const showMore = 'Show more';
 export const showLess = 'Show less';

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

@@ -37,6 +37,7 @@ class Sections extends _Sections {
       this.searchResultsInfoGroup(options),
       this.searchResultsFilters(options),
       '<miso-products></miso-products>',
+      this.more(options),
     ]);
   }
 
@@ -45,7 +46,7 @@ class Sections extends _Sections {
     const { classPrefix } = options;
     return element('div', { classes: [`${classPrefix}__search-results-info`] }, [
       this.keywords(options),
-      this.hits(options),
+      this.total(options),
     ]);
   }
 
@@ -62,9 +63,20 @@ class Sections extends _Sections {
     return phrase(options, { name: 'keywords', tag: 'div', inline: true }).replaceAll('${value}', '<miso-keywords></miso-keywords>');
   }
 
-  hits(options) {
+  total(options) {
     const { phrase } = this._helpers;
-    return phrase(options, { name: 'hits', tag: 'div', inline: true }).replaceAll('${value}', '<miso-hits></miso-hits>');
+    return phrase(options, { name: 'total', tag: 'div', inline: true }).replaceAll('${value}', '<miso-total></miso-total>');
+  }
+
+  more(options) {
+    if (!options.moreButton) {
+      return '';
+    }
+    const { element } = this._helpers;
+    const { classPrefix } = options;
+    return element('div', { classes: [`${classPrefix}__search-results-more-container`] }, [
+      '<miso-more></miso-more>',
+    ]);
   }
 
 }
@@ -75,13 +87,13 @@ export const sections = externalize(new Sections({ helpers }));
 export function root(options = {}) {
   const { normalizeOptions, section, container } = helpers;
   options = normalizeOptions(options);
-  const { answerBox, answerGroup } = sections;
+  const { answerBox, answerGroup, searchResultsGroup } = sections;
   const { answerBox: answerBoxOptions = true } = options;
   return [
     section(options, { name: 'question' }, [
       container(options, { name: 'query' }, '<miso-query></miso-query>'),
     ]),
     section(options, { name: 'answer' }, answerBoxOptions ? [ answerBox(options) ] : answerGroup(options)),
-    section(options, { name: 'search-results' }, sections.searchResultsGroup(options)),
+    section(options, { name: 'search-results' }, searchResultsGroup(options)),
   ].join('');
 };