@miso.ai/client-sdk-ui 1.11.4 → 1.11.5-beta.0

package/src/layout/radio/radio.js

@@ -50,7 +50,7 @@ export default class RadioLayout extends TemplateBasedLayout {
       view.hub.on(this._field, () => this._refresh()),
       proxyElement.on('click', (e) => this._handleClick(e)),
     ];
-    this._defaultValue ? this._select(this._defaultValue) : this._clear();
+    this._defaultValue ? this._select(this._defaultValue, { silent: true }) : this._clear({ silent: true });
   }
 
   _preprocess(states, controls) {
@@ -98,16 +98,16 @@ export default class RadioLayout extends TemplateBasedLayout {
     this._state = undefined;
   }
 
-  _select(value) {
-    this._submit({ value });
+  _select(value, options) {
+    this._submit({ value }, options);
   }
 
-  _clear() {
-    this._submit({ unselected: true });
+  _clear(options) {
+    this._submit({ unselected: true }, options);
   }
 
-  async _submit(state) {
-    this._view.hub.update(this._field, state);
+  async _submit(state, options) {
+    this._view.hub.update(this._field, state, options);
   }
 
 }

package/src/layout/templates.js

@@ -42,6 +42,17 @@ export function article(layout, state, data, meta) {
   ].join('');
 }
 
+export function image(layout, state, data, meta) {
+  const { templates } = layout;
+  const [openTag, closeTag] = tagPair(layout, data);
+  return [
+    openTag,
+    (templates.imageBlock || imageBlock)(layout, data, meta),
+    (templates.infoBlock || templates.imageInfoBlock || imageInfoBlock)(layout, data, meta),
+    closeTag,
+  ].join('');
+}
+
 export function affiliation(layout, state, data, meta) {
   const { templates } = layout;
   const [openTag, closeTag] = tagPair(layout, data, { link: false});
@@ -82,6 +93,13 @@ export function articleInfoBlock(layout, data, meta) {
   ].join('')}</div>`;
 }
 
+export function imageInfoBlock(layout, data, meta) {
+  const { className, templates } = layout;
+  return `<div class="${className}__item-info-container">${[
+    (templates.titleBlock || titleBlock)(layout, data, meta),
+  ].join('')}</div>`;
+}
+
 export function titleBlock({ className }, { title }) {
   return title ? `<div class="${className}__item-title">${escapeHtml(title)}</div>` : '';
 }
@@ -134,13 +152,16 @@ export function discountRateText(layout, { discount_rate_percent }) {
 
 export function imageBlock(layout, data, meta = {}) {
   const { className, templates } = layout;
-  const { cover_image } = data;
-  if (!cover_image) {
+  const { cover_image, image_src, image_alt } = data;
+  if (!cover_image && !image_src) {
     return '';
   }
-  const img = `<img class="${className}__item-cover-image" src="${cover_image}">`;
-  const brand = meta.brand ? (templates.brandBlock || brandBlock)(layout, data, meta) : '';
-  return `<div class="${className}__item-cover-image-container">${img}${brand}</div>`;
+  const subtype = image_src ? 'image' : 'cover-image';
+  const img = subtype === 'image' ?
+    `<img class="${className}__item-${subtype}" src="${image_src}"${image_alt ? ` alt="${image_alt}"` : ''}>` :
+    `<img class="${className}__item-${subtype}" src="${cover_image}">`;
+  const brand = subtype === 'cover-image' && meta.brand ? (templates.brandBlock || brandBlock)(layout, data, meta) : '';
+  return `<div class="${className}__item-${subtype}-container">${img}${brand}</div>`;
 }
 
 export function indexBlock({ className }, data, { index }) {

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

@@ -157,7 +157,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
     if (citationLinkElement) {
       const index = parseInt(citationLinkElement.dataset.index);
       if (!Number.isNaN(index)) {
-        this._view._events.emit('citation-click', { index });
+        this._view._events.emit('citation-click', { event, index });
       }
       return;
     }
@@ -169,6 +169,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
         const { href, innerText, className } = anchorElement;
         if (href) {
           this._view._events.emit('link-click', trimObj({
+            event,
             url: href,
             text: innerText ? innerText.trim() : '',
             className: className || '',

package/src/util/trackers.js

@@ -1,6 +1,14 @@
 import { findInAncestors, trimObj } from '@miso.ai/commons';
 
-// TODO: think about how to incorporate this with workflow options
+const TRACKED = Symbol.for('miso:tracked');
+
+export function isTracked(event) {
+  return !!event[TRACKED];
+}
+
+export function markAsTracked(event) {
+  event[TRACKED] = true;
+}
 
 const DEFAULT_TRACKER_OPTIONS = Object.freeze({
   impression: Object.freeze({
@@ -19,6 +27,7 @@ function mergeOptions(def, opt) {
   return !!opt && { ...def, ...opt };
 }
 
+// TODO: don't need this anymore
 export function normalizeTrackerOptions(options) {
   // TODO: make this { active: false } to keep it an object
   if (options === false) {
@@ -54,15 +63,19 @@ export function validateClick(options = {}, event) {
   }
 
   // standard criteria
-  // 1. it must be a left click
+  // 1. each event can only be tracked once
+  if (isTracked(event)) {
+    return false;
+  }
+  // 2. it must be a left click
   if (event.button !== 0) {
     return false;
   }
-  // 2. event default must not be prevented
+  // 3. event default must not be prevented
   if (event.defaultPrevented) {
     return false;
   }
-  // 3. must go through a real link
+  // 4. must go through a real link
   if (!findInAncestors(event.target, element => (element.tagName === 'A' && element.href) || undefined)) {
     return false;
   }

package/src/version.js

@@ -1 +1 @@
-export default '1.11.4';
+export default '1.11.5-beta.0';

package/src/workflow/answer-based.js

@@ -2,11 +2,12 @@ import { API } from '@miso.ai/commons';
 import Workflow from './base.js';
 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 { SearchBoxLayout, TextLayout, ListLayout, CarouselLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
 import { processData as processAffiliationData } from '../affiliation/index.js';
 import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 import { writeAnswerStageToMeta, mergeInteraction } from './processors.js';
 import { enableUseLink } from './use-link.js';
+import { isTracked, markAsTracked } from '../util/trackers.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   ...Workflow.DEFAULT_API_OPTIONS,
@@ -34,6 +35,7 @@ const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.QUESTION]: [TextLayout.type, { tag: 'h2' }],
   [ROLE.ANSWER]: TypewriterLayout.type,
   [ROLE.FEEDBACK]: FeedbackLayout.type,
+  [ROLE.IMAGES]: [CarouselLayout.type, { incremental: true, itemType: 'image' }],
   [ROLE.SOURCES]: [ListLayout.type, { incremental: true, itemType: 'article', templates: { ordered: true } }],
   [ROLE.AFFILIATION]: [AffiliationLayout.type, { incremental: true, itemType: 'affiliation', link: { rel: 'noopener nofollow' } }],
 });
@@ -46,6 +48,7 @@ const DEFAULT_TRACKERS = Object.freeze({
     deduplicated: false,
     click: DEFAULT_TRACKER_OPTIONS.click, // click only
   },
+  [ROLE.IMAGES]: DEFAULT_TRACKER_OPTIONS,
   [ROLE.SOURCES]: DEFAULT_TRACKER_OPTIONS,
   [ROLE.AFFILIATION]: DEFAULT_TRACKER_OPTIONS,
   [ROLE.PRODUCTS]: DEFAULT_TRACKER_OPTIONS,
@@ -268,7 +271,6 @@ export default class AnswerBasedWorkflow extends Workflow {
     if (args.role !== ROLE.ANSWER) {
       return payload;
     }
-    console.log('writeAnswerClickInteraction', payload, args);
     const { items = [] } = args;
     return mergeInteraction(payload, {
       context: {
@@ -289,7 +291,10 @@ export default class AnswerBasedWorkflow extends Workflow {
   }
 
   // handlers //
-  _onCitationClick({ index }) {
+  _onCitationClick({ index, event }) {
+    if (isTracked(event)) {
+      return;
+    }
     const { value } = this.states[fields.data()] || {};
     const { sources } = value || {};
     // index is 1-based
@@ -298,10 +303,15 @@ export default class AnswerBasedWorkflow extends Workflow {
       return;
     }
     // TODO: should we track impression as well?
+    markAsTracked(event);
     this._views.trackers.sources.click([source.product_id]);
   }
 
-  _onAnswerLinkClick(item) {
+  _onAnswerLinkClick({ event, ...item }) {
+    if (isTracked(event)) {
+      return;
+    }
+    markAsTracked(event);
     // 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] });

package/src/workflow/search.js

@@ -81,7 +81,6 @@ export default class Search extends SearchBasedWorkflow {
 
   // destroy //
   _destroy(options) {
-    this._feedback._destroy();
     this._destroyAutocomplete();
     super._destroy(options);
   }