@miso.ai/client-sdk-ui 1.10.0-beta.0 → 1.10.0-beta.10

package/src/util/trackers.js

@@ -0,0 +1,69 @@
+import { findInAncestors, trimObj } from '@miso.ai/commons';
+
+const DEFAULT_TRACKER_OPTIONS = Object.freeze({
+  impression: Object.freeze({
+  }),
+  viewable: Object.freeze({
+    area: 0.5,
+    duration: 1000,
+  }),
+  click: Object.freeze({
+    lenient: false,
+  }),
+  watch: false,
+});
+
+function mergeOptions(def, opt) {
+  // if opt is falsy then return false, merge otherwise
+  return !!opt && { ...def, ...opt };
+}
+
+export function normalizeTrackerOptions(options) {
+  if (options === false) {
+    return false; // turn off all tracking
+  }
+  if (options === true) {
+    options = {};
+  }
+  if (typeof options !== 'object') {
+    throw new Error(`Invalid options: ${options}`);
+  }
+  const { impression = {}, viewable = {}, click = {}, ...rest } = options;
+  return trimObj({
+    ...DEFAULT_TRACKER_OPTIONS,
+    ...rest,
+    impression: mergeOptions(DEFAULT_TRACKER_OPTIONS.impression, impression),
+    viewable: mergeOptions(DEFAULT_TRACKER_OPTIONS.viewable, viewable),
+    click: mergeOptions(DEFAULT_TRACKER_OPTIONS.click, click),
+  });
+}
+
+export function validateClick(options = {}, event) {
+  if (!options) {
+    return false;
+  }
+
+  if (typeof options.validate === 'function') {
+    return options.validate(event);
+  }
+
+  if (options.lenient) {
+    return true;
+  }
+
+  // standard criteria
+  // 1. it must be a left click
+  if (event.button !== 0) {
+    return false;
+  }
+  // 2. event default must not be prevented
+  if (event.defaultPrevented) {
+    return false;
+  }
+  // 3. must go through a real link
+  if (!findInAncestors(event.target, element => (element.tagName === 'A' && element.href) || undefined)) {
+    return false;
+  }
+
+  return true;
+}

package/src/util/viewables.js

@@ -0,0 +1,47 @@
+import { viewable as whenViewable } from '@miso.ai/commons';
+
+export default class Viewables {
+
+  constructor() {
+    this._entries = new WeakMap();
+  }
+
+  isTracked(element) {
+    return this._entries.has(element);
+  }
+
+  async track(element, options = {}) {
+    if (!options) {
+      return false;
+    }
+    const entry = this._entries.get(element);
+    if (entry) {
+      return false;
+    }
+    const ac = new AbortController();
+    const { signal } = ac;
+    this._entries.set(element, { ac });
+    let result = false;
+    try {
+      await whenViewable(element, { ...options, signal });
+      result = true;
+    } catch (e) {
+      if (e.name !== 'AbortError') {
+        throw e;
+      }
+    } finally {
+      this._entries.delete(element);
+    }
+    return result;
+  }
+
+  untrack(element) {
+    const entry = this._entries.get(element);
+    if (!entry) {
+      return;
+    }
+    entry.ac.abort();
+    this._entries.delete(element);
+  }
+
+}

package/src/version.js

@@ -1 +1 @@
-export default '1.10.0-beta.0';
+export default '1.10.0-beta.10';

package/src/workflow/ask.js

@@ -1,9 +1,12 @@
 import { defineValues, trimObj, API } from '@miso.ai/commons';
 import Workflow from './base.js';
 import { mergeApiOptions } from './options.js';
-import { fields, FeedbackActor } from '../actor/index.js';
+import * as sources from '../source/index.js';
+import { fields, FeedbackActor, AutocompleteActor } from '../actor/index.js';
 import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
-import { SearchBoxLayout, OptionListLayout, ListLayout, TextLayout, TypewriterLayout, FeedbackLayout } from '../layout/index.js';
+import { SearchBoxLayout, OptionListLayout, ListLayout, TextLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
+import { makeConfigurable } from './options.js';
+import { processData as processAffiliationData } from '../affiliation/index.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: API.GROUP.ASK,
@@ -17,6 +20,14 @@ const DEFAULT_API_OPTIONS = Object.freeze({
   },
 });
 
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  actor: false,
+  api: {
+    group: API.GROUP.ASK,
+    name: API.NAME.AUTOCOMPLETE,
+  },
+});
+
 const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.QUERY]: [SearchBoxLayout.type, { placeholder: 'Ask a question' }],
   [ROLE.QUESTION]: [TextLayout.type, { tag: 'h2' }],
@@ -25,13 +36,14 @@ const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.SOURCES]: [ListLayout.type, { incremental: true, itemType: 'article', templates: { ordered: true } }],
   [ROLE.RELATED_RESOURCES]: [ListLayout.type, { incremental: true, itemType: 'article' }],
   [ROLE.QUERY_SUGGESTIONS]: OptionListLayout.type,
+  [ROLE.AFFILIATION]: [AffiliationLayout.type, { incremental: true, itemType: 'affiliation', link: { rel: 'noopener nofollow' } }],
 });
 
 const DEFAULT_TRACKERS = Object.freeze({
   [ROLE.SOURCES]: {},
   [ROLE.RELATED_RESOURCES]: {},
+  [ROLE.AFFILIATION]: {},
   [ROLE.QUERY_SUGGESTIONS]: {
-    active: true, // we are tracking events at initial stage, when session is not active yet
     click: {
       validate: event => event.button === 0, // left click only
     },
@@ -40,6 +52,7 @@ const DEFAULT_TRACKERS = Object.freeze({
 
 const DEFAULT_OPTIONS = Object.freeze({
   api: DEFAULT_API_OPTIONS,
+  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
 });
@@ -60,6 +73,13 @@ export default class Ask extends Workflow {
     this._feedback = new FeedbackActor(this._hub);
     this._setSuggestedQuestions();
 
+    /*
+    this._autocomplete = new AutocompleteActor(this._hub, {
+      source: sources.api(this._client),
+      options: this._options,
+    });
+    */
+
     this._unsubscribes = [
       ...this._unsubscribes,
       this._hub.on(fields.query(), payload => this.query(payload)),
@@ -152,6 +172,17 @@ export default class Ask extends Workflow {
     super.restart();
   }
 
+  /*
+  updateCompletions(event) {
+    // TODO: verify
+    this._hub.update(fields.completions(), {
+      ...event,
+      source: 'manual',
+    });
+    return this;
+  }
+  */
+
   _defaultProcessData(data) {
     data = super._defaultProcessData(data);
     const { value, request } = data;
@@ -178,6 +209,9 @@ export default class Ask extends Workflow {
       }
     }
 
+    // affiliation
+    data = processAffiliationData(data);
+
     // 1. put answer_stage to meta
     // 2. mark ongoing flag
     return {

package/src/workflow/base.js

@@ -42,14 +42,13 @@ export default class Workflow extends Component {
     const extensions = this._extensions = plugin._getExtensions(client);
     const options = this._options = new WorkflowOptions(context && context._options, mergeDefaults(this, defaults));
     const hub = this._hub = injectLogger(new Hub(), (...args) => this._log(...args));
-    const source = this._source = sources.api(client);
     const layouts = plugin.layouts;
 
     this._sessions = new SessionMaker(hub);
-    this._data = new DataActor(hub, { source, options });
+    this._data = new DataActor(hub, { source: sources.api(client), options });
     const views = this._views = new ViewsActor(hub, { extensions, layouts, roles, options, workflow: name });
-    this._interactions = new InteractionsActor(hub, { client, options });
     this._trackers = new Trackers(hub, { views, options });
+    this._interactions = new InteractionsActor(hub, { client, options });
 
     this._unsubscribes = [
       this._hub.on(fields.response(), data => this.updateData(data)),

package/src/workflow/explore.js

@@ -11,7 +11,7 @@ const DEFAULT_API_OPTIONS = Object.freeze({
 });
 
 const DEFAULT_LAYOUTS = Object.freeze({
-  [ROLE.RELATED_QUESTIONS]: [ListLayout.type, { itemType: 'question' }],
+  [ROLE.RELATED_QUESTIONS]: [ListLayout.type, { itemType: 'question', link: { rel: 'noopener nofollow' } }],
   [ROLE.QUERY]: [SearchBoxLayout.type, { placeholder: 'Ask a question' }],
 });
 

package/src/workflow/options.js

@@ -3,6 +3,7 @@ import { ROLE } from '../constants.js';
 
 // normalize //
 export function normalizeApiOptions([name, payload] = []) {
+  // TODO: take object form as well
   if (name === false) {
     return { actor: false };
   }
@@ -10,10 +11,14 @@ export function normalizeApiOptions([name, payload] = []) {
     payload = name;
     name = undefined;
   }
+  let group = undefined;
+  if (name && name.indexOf('/') !== -1) {
+    [group, name] = name.split('/');
+  }
   if ((name && typeof name !== 'string') || (payload !== undefined && typeof payload !== 'object')) {
     throw new Error(`Invalid arguments for useApi(): ${name}, ${payload}`);
   }
-  return trimObj({ name, payload });
+  return trimObj({ group, name, payload });
 }
 
 export function normalizeLayoutsOptions(options = {}) {
@@ -105,6 +110,17 @@ export function normalizeInteractionsOptions(options) {
   return { ...options, preprocess };
 }
 
+export function normalizeAutocompleteOptions(options) {
+  if (options === undefined) {
+    throw new Error(`Expect autocomplete options to be an object or a boolean value: ${options}`);
+  }
+  if (typeof options === 'boolean') {
+    options = { actor: options };
+  }
+  const processData = normalizeDataProcessorOptions(options.processData);
+  return { ...options, processData };
+}
+
 // merge //
 export function mergeApiOptions(...optionsList) {
   if (optionsList[optionsList.length - 1] === false) {
@@ -190,6 +206,17 @@ export function mergeInteractionsOptions(...optionsList) {
   }));
 }
 
+export function mergeAutocompleteOptions(...optionsList) {
+  if (optionsList[optionsList.length - 1] === false) {
+    return false;
+  }
+  return mergeOptions(optionsList, (merged, options) => Object.assign(merged, {
+    ...options,
+    api: mergeApiOptions(merged.api, options.api),
+    processData: mergeDataProcessorOptions(merged.processData, options.processData),
+  }));
+}
+
 
 
 // manifest //
@@ -219,6 +246,11 @@ const FEATURES = [
     normalize: normalizeInteractionsOptions,
     merge: mergeInteractionsOptions,
   },
+  {
+    key: 'autocomplete',
+    normalize: normalizeAutocompleteOptions,
+    merge: mergeAutocompleteOptions,
+  },
 ];
 
 
@@ -328,18 +360,27 @@ for (const { key, normalize, merge } of FEATURES) {
   });
 }
 
-export function makeConfigurable(prototype) {
-  Object.assign(prototype, {
-    useApi(...args) {
-      this._options.api.merge(args);
-      return this;
-    },
-    clearApi() {
-      this._options.api.set();
-      return this;
-    },
-  });
-  for (const feature of ['layouts', 'dataProcessor', 'trackers', 'interactions']) {
+const DEFAULT_FEATURES = ['api', 'layouts', 'dataProcessor', 'trackers', 'interactions'];
+
+export function makeConfigurable(prototype, features = DEFAULT_FEATURES) {
+  for (const feature of features) {
+    injectConfigurableFeature(prototype, feature);
+  }
+}
+
+function injectConfigurableFeature(prototype, feature) {
+  if (feature === 'api') {
+    Object.assign(prototype, {
+      useApi(...args) {
+        this._options.api.merge(args);
+        return this;
+      },
+      clearApi() {
+        this._options.api.set();
+        return this;
+      },
+    });
+  } else {
     const upperCased = upperCase(feature);
     Object.assign(prototype, {
       [`use${upperCased}`](value) {

package/src/workflow/recommendation.js

@@ -53,6 +53,7 @@ export default class Recommendation extends Workflow {
     return this;
   }
 
+  // TODO: deprecate this
   startTracker() {
     this.useApi(false);
     this.useLayouts(false);

package/src/workflow/search.js

@@ -1,9 +1,11 @@
 import { API } from '@miso.ai/commons';
 import Workflow from './base.js';
 import { mergeApiOptions } from './options.js';
-import { fields } from '../actor/index.js';
+import * as sources from '../source/index.js';
+import { fields, AutocompleteActor } from '../actor/index.js';
 import { ROLE } from '../constants.js';
 import { ListLayout, SearchBoxLayout } from '../layout/index.js';
+import { makeConfigurable } from './options.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: API.GROUP.SEARCH,
@@ -13,6 +15,19 @@ const DEFAULT_API_OPTIONS = Object.freeze({
   },
 });
 
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  actor: false,
+  api: {
+    group: API.GROUP.SEARCH,
+    name: API.NAME.AUTOCOMPLETE,
+    payload: {
+      completion_fields: ['suggested_queries', 'title'],
+      fl: ['title', 'url', 'cover_image'],
+    },
+  },
+  throttle: 300,
+});
+
 const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.QUERY]: SearchBoxLayout.type,
   [ROLE.PRODUCTS]: ListLayout.type,
@@ -24,6 +39,7 @@ const DEFAULT_TRACKERS = Object.freeze({
 
 const DEFAULT_OPTIONS = Object.freeze({
   api: DEFAULT_API_OPTIONS,
+  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
 });
@@ -39,6 +55,11 @@ export default class Search extends Workflow {
       defaults: DEFAULT_OPTIONS,
     });
 
+    this._autocomplete = new AutocompleteActor(this._hub, {
+      source: sources.api(this._client),
+      options: this._options,
+    });
+
     this._unsubscribes.push(this._hub.on(fields.query(), payload => this.query(payload)));
   }
 
@@ -66,9 +87,20 @@ export default class Search extends Workflow {
     return this;
   }
 
+  updateCompletions(event) {
+    // TODO: verify
+    this._hub.update(fields.completions(), {
+      ...event,
+      source: 'manual',
+    });
+    return this;
+  }
+
   notifyViewUpdate(role = ROLE.PRODUCTS, ...args) {
     super.notifyViewUpdate(role, ...args);
     return this;
   }
 
 }
+
+makeConfigurable(Search.prototype, ['autocomplete']);