@miso.ai/client-sdk-ui 1.11.4-beta.4 → 1.11.4-beta.5

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

@@ -72,13 +72,14 @@ export default class TypewriterLayout extends ProgressiveLayout {
       return; // destroyed
     }
     const cursorClass = cursorClassName(this.className);
-    const { onDebug, onCitationLink } = this.options;
+    const { onDebug, onCitationLink, variant } = this.options;
     // TODO: options
     this._renderer = context.createRenderer({
       cursorClass,
       getSource: index => this._getSource(index),
       onCitationLink,
       onDebug: normalizeOnDebug(onDebug),
+      variant,
     });
     // capture citation link click if necessary
     this._unsubscribes.push(this._view.proxyElement.on('click', (e) => this._onClick(e)));
@@ -149,16 +150,48 @@ export default class TypewriterLayout extends ProgressiveLayout {
   }
 
   // event //
-  _onClick({ target }) {
-    const element = target.closest(`[data-role="citation-link"]`);
-    if (!element) {
+  _onClick(event) {
+    const { target } = event;
+    const citationLinkElement = target.closest(`[data-role="citation-link"]`);
+    // citation link click
+    if (citationLinkElement) {
+      const index = parseInt(citationLinkElement.dataset.index);
+      if (!Number.isNaN(index)) {
+        this._view._events.emit('citation-click', { index });
+      }
       return;
     }
-    const index = parseInt(element.dataset.index);
-    if (Number.isNaN(index)) {
+    // generic link click
+    const anchorElement = target.closest('a');
+    if (anchorElement) {
+      if (!event.defaultPrevented) {
+        // TODO: classList, attributes
+        const { href, innerText, className } = anchorElement;
+        if (href) {
+          this._view._events.emit('link-click', trimObj({
+            url: href,
+            text: innerText ? innerText.trim() : '',
+            className: className || '',
+            attributes: dumpElementAttributes(anchorElement),
+          }));
+        }
+      }
       return;
     }
-    this._view._events.emit('citation-click', { index });
   }
+}
 
+function dumpElementAttributes(element) {
+  const { attributes } = element;
+  const attrs = {};
+  for (const { name, value } of attributes) {
+    if (name.startsWith('data-')) {
+      attrs[name] = value;
+    }
+  }
+  try {
+    return JSON.stringify(attrs);
+  } catch (e) {
+    return '{}';
+  }
 }

package/src/layout/trackable.js

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

package/src/util/trackers.js

@@ -12,7 +12,6 @@ const DEFAULT_TRACKER_OPTIONS = Object.freeze({
   click: Object.freeze({
     lenient: false,
   }),
-  watch: false,
 });
 
 function mergeOptions(def, opt) {
@@ -21,6 +20,7 @@ function mergeOptions(def, opt) {
 }
 
 export function normalizeTrackerOptions(options) {
+  // TODO: make this { active: false } to keep it an object
   if (options === false) {
     return false; // turn off all tracking
   }

package/src/version.js

@@ -1 +1 @@
-export default '1.11.4-beta.4';
+export default '1.11.4-beta.5';

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/index.js';
+import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 import { writeAnswerStageToMeta, mergeInteraction } from './processors.js';
 import { enableUseLink } from './use-link.js';
 
@@ -40,9 +40,15 @@ const DEFAULT_LAYOUTS = Object.freeze({
 
 const DEFAULT_TRACKERS = Object.freeze({
   ...Workflow.DEFAULT_TRACKERS,
-  [ROLE.SOURCES]: {},
-  [ROLE.AFFILIATION]: {},
-  [ROLE.PRODUCTS]: {},
+  [ROLE.ANSWER]: {
+    active: true,
+    itemless: true,
+    deduplicated: false,
+    click: DEFAULT_TRACKER_OPTIONS.click, // click only
+  },
+  [ROLE.SOURCES]: DEFAULT_TRACKER_OPTIONS,
+  [ROLE.AFFILIATION]: DEFAULT_TRACKER_OPTIONS,
+  [ROLE.PRODUCTS]: DEFAULT_TRACKER_OPTIONS,
 });
 
 const DEFAULT_OPTIONS = Object.freeze({
@@ -58,6 +64,10 @@ const ROLES_OPTIONS = mergeRolesOptions(Workflow.ROLES_OPTIONS, {
   members: Object.keys(DEFAULT_LAYOUTS),
 });
 
+function normalizeAutoQueryOptions({ setValue = true, focus = true, param = 'q', sourceParam = 'qs', ...options } = {}) {
+  return { setValue, focus, param, sourceParam, ...options };
+}
+
 export default class AnswerBasedWorkflow extends Workflow {
 
   // constructor //
@@ -78,6 +88,7 @@ export default class AnswerBasedWorkflow extends Workflow {
       ...this._unsubscribes,
       this._hub.on(fields.query(), args => this._query(args)),
       this._views.get(ROLE.ANSWER).on('citation-click', event => this._onCitationClick(event)),
+      this._views.get(ROLE.ANSWER).on('link-click', event => this._onAnswerLinkClick(event)),
     ];
   }
 
@@ -132,10 +143,10 @@ export default class AnswerBasedWorkflow extends Workflow {
 
   // query //
   autoQuery(options = {}) {
-    const { setValue = true, focus = true } = this._autoQuery = options;
+    const { setValue, focus, param, sourceParam } = this._autoQuery = normalizeAutoQueryOptions(options);
     const searchParams = new URLSearchParams(window.location.search);
-    const q = searchParams.get('q');
-    const qs = searchParams.get('qs');
+    const q = searchParams.get(param);
+    const qs = searchParams.get(sourceParam);
     const { layout } = this._views.get(ROLE.QUERY);
     if (layout) {
       if (q && setValue) {
@@ -219,14 +230,15 @@ export default class AnswerBasedWorkflow extends Workflow {
     if (!value || !this._autoQuery || this._autoQuery.updateUrl === false) { // explicitly false
       return;
     }
+    const { param } = this._autoQuery;
     const { question } = value;
     const organic = request && request.payload && request.payload._meta && request.payload._meta.question_source === ORGANIC_QUESTION_SOURCE;
 
     const url = new URL(window.location);
-    const currentQuestion = url.searchParams.get('q');
+    const currentQuestion = url.searchParams.get(param);
     // TODO: review this, handle &qs=
     if (question !== currentQuestion && (!organic || this._autoQuery.updateUrl === true)) {
-      url.searchParams.set('q', question);
+      url.searchParams.set(param, question);
       window.history.replaceState({}, '', url);
     }
   }
@@ -235,6 +247,7 @@ export default class AnswerBasedWorkflow extends Workflow {
   _defaultProcessInteraction(payload, args) {
     payload = super._defaultProcessInteraction(payload, args);
     payload = this._writeAskPropertiesToInteraction(payload, args);
+    payload = this._writeAnswerClickInteraction(payload, args);
     return payload;
   }
 
@@ -251,6 +264,24 @@ export default class AnswerBasedWorkflow extends Workflow {
     });
   }
 
+  _writeAnswerClickInteraction(payload, args) {
+    if (args.role !== ROLE.ANSWER) {
+      return payload;
+    }
+    console.log('writeAnswerClickInteraction', payload, args);
+    const { items = [] } = args;
+    return mergeInteraction(payload, {
+      context: {
+        custom_context: {
+          urls: items.map(item => item.url),
+          texts: items.map(item => item.text),
+          class_names: items.map(item => item.className),
+          attributes: items.map(item => item.attributes),
+        },
+      },
+    });
+  }
+
   _getQuestionSourceFromViewState(args) {
     const { request } = this._hub.states[fields.view(args.role)] || {};
     const { payload } = request || {};
@@ -267,7 +298,13 @@ export default class AnswerBasedWorkflow extends Workflow {
       return;
     }
     // TODO: should we track impression as well?
-    this._trackers.sources.click([source.product_id], { manual: false });
+    this._views.trackers.sources.click([source.product_id]);
+  }
+
+  _onAnswerLinkClick(item) {
+    // put everything into args and let _defaultProcessInteraction() handles it
+    // for it's hard to make it a standard item
+    this._views.trackers.answer.click([], { items: [item] });
   }
 
   // helpers //

package/src/workflow/ask.js

@@ -4,7 +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';
+import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS,
@@ -24,10 +24,12 @@ const DEFAULT_LAYOUTS = Object.freeze({
 
 const DEFAULT_TRACKERS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_TRACKERS,
-  [ROLE.RELATED_RESOURCES]: {},
+  [ROLE.RELATED_RESOURCES]: DEFAULT_TRACKER_OPTIONS,
   [ROLE.QUERY_SUGGESTIONS]: {
+    ...DEFAULT_TRACKER_OPTIONS,
     click: {
-      validate: event => event.button === 0, // left click only
+      ...DEFAULT_TRACKER_OPTIONS.click,
+      validate: event => event.button === 0, // loosen criteria, for it's not a hyperlink
     },
   },
 });

package/src/workflow/base.js

@@ -48,7 +48,7 @@ export default class Workflow extends Component {
   constructor(args) {
     super(args.name || 'workflow', args.plugin);
 
-    let { context, plugin, client, options } = args;
+    let { context, plugin, client, defaults, options } = args;
     this._context = context;
     this._plugin = plugin = plugin || context._plugin;
     this._client = client = client || context._client;
@@ -58,8 +58,8 @@ export default class Workflow extends Component {
     this._roles = args.roles;
 
     this._extensions = plugin._getExtensions(client);
-    this._defaults = args.defaults;
-    this._options = options || new WorkflowOptions(context && context._options, args.defaults);
+    this._defaults = defaults;
+    this._options = options || new WorkflowOptions(context && context._options, defaults);
     this._hub = injectLogger(new Hub(), (...args) => this._log(...args));
     this._sessionContext = new WeakMap();
 

package/src/workflow/explore.js

@@ -3,7 +3,7 @@ import Workflow from './base.js';
 import { fields } from '../actor/index.js';
 import { ROLE, EVENT_TYPE } from '../constants.js';
 import { ListLayout, SearchBoxLayout } from '../layout/index.js';
-import { mergeRolesOptions } from './options/index.js';
+import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 import { enableUseLink, UseLinkMixin } from './use-link.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
@@ -20,10 +20,15 @@ const DEFAULT_LAYOUTS = Object.freeze({
 
 const DEFAULT_TRACKERS = Object.freeze({
   ...Workflow.DEFAULT_TRACKERS,
-  [ROLE.RELATED_QUESTIONS]: {},
-  [ROLE.CONTAINER]: {},
+  [ROLE.RELATED_QUESTIONS]: DEFAULT_TRACKER_OPTIONS,
+  [ROLE.CONTAINER]: {
+    ...DEFAULT_TRACKER_OPTIONS,
+    itemless: true,
+  },
   [ROLE.QUERY]: {
-    [EVENT_TYPE.SUBMIT]: {},
+    [EVENT_TYPE.SUBMIT]: {
+      active: true,
+    },
   },
 });
 

package/src/workflow/options/trackers.js

@@ -1,32 +1,80 @@
-import { mergeOptions } from './utils.js';
+import { TRACKING_EVENT_TYPES } from '../../constants.js';
+import { mergeOptions, normalizeOptions } from './utils.js';
 
-export function normalizeTrackersOptions(options) {
-  if (options === undefined || options === false) {
-    return options;
-  }
+export const DEFAULT_TRACKER_OPTIONS = Object.freeze({
+  active: true,
+  impression: Object.freeze({
+    active: true,
+  }),
+  viewable: Object.freeze({
+    active: true,
+    area: 0.5,
+    duration: 1000,
+  }),
+  click: Object.freeze({
+    active: true,
+    lenient: false,
+  }),
+});
+
+export function normalizeTrackersOptions(options = {}) {
+  options = normalizeOptions(options);
+  const { active, ...rest } = options;
   const normalized = {};
-  for (const [role, args] of Object.entries(options)) {
+  for (const [role, args] of Object.entries(rest)) {
     normalized[role] = normalizeTrackerOptions(args);
   }
-  return normalized;
+  return {
+    active,
+    ...normalized,
+  };
+}
+
+function normalizeTrackerOptions(options = {}) {
+  options = normalizeOptions(options);
+  const { active, ...rest } = options;
+  const normalized = {};
+  for (const [role, args] of Object.entries(rest)) {
+    normalized[role] = normalizeTrackerEventOptions(args);
+  }
+  return options;
 }
 
-function normalizeTrackerOptions(options) {
+function normalizeTrackerEventOptions(options = {}) {
+  options = normalizeOptions(options);
   return options;
 }
 
 export function mergeTrackersOptions(...optionsList) {
+  // TODO: should be able to remove this
   if (optionsList[optionsList.length - 1] === false) {
     return false;
   }
-  return mergeOptions(optionsList, (merged, options) => Object.assign(merged, {
-    ...options,
-    impression: mergeTrackerEventOptions(merged.impression, options.impression),
-    viewable: mergeTrackerEventOptions(merged.viewable, options.viewable),
-    click: mergeTrackerEventOptions(merged.click, options.click),
-  }));
+  return mergeOptions(optionsList, (merged, options) => {
+    for (const [key, args] of Object.entries(options)) {
+      if (args === undefined) {
+        continue;
+      }
+      merged[key] = key === 'active' ? args : mergeTrackerOptions(merged[key], args);
+    }
+    return merged;
+  });
+}
+
+function mergeTrackerOptions(base = {}, overrides = {}) {
+  const merged = { ...base };
+  for (const [key, args] of Object.entries(overrides)) {
+    if (args === undefined) {
+      continue;
+    }
+    merged[key] = TRACKING_EVENT_TYPES.includes(key) ? mergeTrackerEventOptions(base[key], args) : args;
+  }
+  return merged;
 }
 
 function mergeTrackerEventOptions(base = {}, overrides = {}) {
-  return (overrides === false || base === false) ? overrides : { ...base, ...overrides };
+  return {
+    ...base,
+    ...overrides,
+  };
 }

package/src/workflow/recommendation.js

@@ -2,7 +2,7 @@ import { defineValues, API } from '@miso.ai/commons';
 import Workflow from './base.js';
 import { ListLayout } from '../layout/index.js';
 import { ROLE } from '../constants.js';
-import { mergeRolesOptions } from './options/index.js';
+import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 import { mergeInteraction } from './processors.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
@@ -22,7 +22,7 @@ const DEFAULT_LAYOUTS = Object.freeze({
 
 const DEFAULT_TRACKERS = Object.freeze({
   ...Workflow.DEFAULT_TRACKERS,
-  [ROLE.PRODUCTS]: {},
+  [ROLE.PRODUCTS]: DEFAULT_TRACKER_OPTIONS,
 });
 
 const DEFAULT_OPTIONS = Object.freeze({

package/src/workflow/search-based.js

@@ -4,7 +4,7 @@ import { fields } from '../actor/index.js';
 import { STATUS, ROLE, WORKFLOW_CONFIGURABLE } from '../constants.js';
 import { SearchBoxLayout, ListLayout, TextLayout, FacetsLayout, SelectLayout, MoreButtonLayout } from '../layout/index.js';
 import { mappingSortData, writeKeywordsToData, retainFacetCountsInData, writeExhaustionToData, concatItemsFromMoreResponse } from './processors.js';
-import { mergeRolesOptions, makeConfigurable } from './options/index.js';
+import { mergeRolesOptions, makeConfigurable, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 
 const DEFAULT_ROWS = 10;
 const DEFAULT_PAGE_LIMIT = 10;
@@ -32,7 +32,7 @@ const DEFAULT_LAYOUTS = Object.freeze({
 
 const DEFAULT_TRACKERS = Object.freeze({
   ...Workflow.DEFAULT_TRACKERS,
-  [ROLE.PRODUCTS]: {},
+  [ROLE.PRODUCTS]: DEFAULT_TRACKER_OPTIONS,
 });
 
 const DEFAULT_PAGINATION = Object.freeze({

package/src/workflow/search.js

@@ -57,8 +57,9 @@ export default class Search extends SearchBasedWorkflow {
     this._initAutocomplete(args);
   }
 
-  autoQuery({ setValue = true, focus = true } = {}) {
-    const q = new URLSearchParams(window.location.search).get('q');
+  autoQuery({ setValue = true, focus = true, param = 'q' } = {}) {
+    // TODO: align implementation with AnswerBasedWorkflow
+    const q = new URLSearchParams(window.location.search).get(param);
     const { layout } = this._views.get(ROLE.QUERY);
     if (layout) {
       if (q && setValue) {