@miso.ai/client-sdk-ui 1.12.2 → 1.12.3-beta.1

package/dist/cjs/workflow/base.js

@@ -90,7 +90,7 @@ class Workflow extends _commons.Component {
   _initSubscriptions({
     roles
   }) {
-    this._unsubscribes = [this._hub.on(_index.fields.response(), data => this.updateData(data)), this._hub.on(_index.fields.tracker(), args => this._onTracker(args))];
+    this._unsubscribes = [this._hub.on(_index.fields.session(), session => this._onSession(session)), this._hub.on(_index.fields.response(), data => this.updateData(data)), this._hub.on(_index.fields.tracker(), args => this._onTracker(args))];
     if (roles.main) {
       this._unsubscribes.push(this._hub.on(_index.fields.view(roles.main), state => this._onMainViewUpdate(state)));
     }
@@ -166,6 +166,11 @@ class Workflow extends _commons.Component {
       this._emitLifecycleEvent('finally', state);
     }
   }
+  _onSession(session) {
+    this.updateData({
+      session
+    });
+  }
   _onMainViewUpdate(state) {
     const {
       status
@@ -202,10 +207,14 @@ class Workflow extends _commons.Component {
     const {
       session
     } = this;
-    const event = (0, _index3.mergeApiOptions)(this._options.resolved.api, Object.assign({}, options, {
+    const request = (0, _index3.mergeApiOptions)(this._options.resolved.api, options);
+    this.updateData({
+      session,
+      request
+    });
+    this._hub.update(_index.fields.request(), Object.assign({}, request, {
       session
     }));
-    this._hub.update(_index.fields.request(), event);
   }
 
   // data //
@@ -238,13 +247,15 @@ class Workflow extends _commons.Component {
     return this;
   }
   _updateData(data) {
-    data = this._defaultProcessData(data);
+    const oldData = this._hub.states[_index.fields.data()];
+    data = this._defaultProcessData(data, oldData);
     for (const process of this._options.resolved.dataProcessor) {
-      data = process(data);
+      data = process(data, oldData);
     }
-    this._updateDataInHub(data);
+    this._updateDataInHub(data, oldData);
   }
-  _defaultProcessData(data) {
+  _defaultProcessData(data, oldData) {
+    data = (0, _processors.writeRequestFromPreviousData)(data, oldData);
     data = (0, _processors.writeDataStatus)(data);
     data = (0, _processors.writeMisoIdToMeta)(data);
     return data;
@@ -324,7 +335,7 @@ class Workflow extends _commons.Component {
 
   // destroy //
   destroy(options) {
-    this._events.emit('destroy');
+    this._emit('destroy');
     this._destroy(options);
   }
   _destroy({

package/dist/cjs/workflow/explore.js

@@ -129,8 +129,8 @@ class Explore extends _unit.default {
     super.notifyViewUpdate(role, ...args);
     return this;
   }
-  _defaultProcessData(data) {
-    data = super._defaultProcessData(data);
+  _defaultProcessData(data, oldData) {
+    data = super._defaultProcessData(data, oldData);
     data = this._addUrlToRelatedQuestions(data);
     return data;
   }

package/dist/cjs/workflow/hybrid-search-answer.js

@@ -61,14 +61,14 @@ class HybridSearchAnswer extends _answerBased.default {
       payload = _objectWithoutPropertiesLoose(_ref, _excluded);
     return Object.assign({}, payload, {
       _meta: Object.assign({}, payload._meta, {
-        question_source: qs || _constants.ORGANIC_QUESTION_SOURCE // might be null, not undefined
+        question_source: qs || _constants.QUESTION_SOURCE.ORGANIC // might be null, not undefined
       })
     });
   }
 
   // data //
-  _defaultProcessData(data) {
-    data = super._defaultProcessData(data);
+  _defaultProcessData(data, oldData) {
+    data = super._defaultProcessData(data, oldData);
     data = (0, _processors.writeKeywordsToData)(data);
     data = (0, _processors.writeMisoIdFromSession)(data);
     data = (0, _processors.writeUnanswerableToMeta)(data);

package/dist/cjs/workflow/hybrid-search-results.js

@@ -69,8 +69,8 @@ class HybridSearchResults extends _searchBased.default {
   }
 
   // data //
-  _defaultProcessData(data) {
-    data = super._defaultProcessData(data);
+  _defaultProcessData(data, oldData) {
+    data = super._defaultProcessData(data, oldData);
     (0, _processors.writeMisoIdToSession)(data);
     return data;
   }

package/dist/cjs/workflow/processors.js

@@ -7,6 +7,7 @@ exports.buildBaseInteraction = buildBaseInteraction;
 exports.concatItemsFromMoreResponse = concatItemsFromMoreResponse;
 exports.getRevision = getRevision;
 exports.mappingAnswerData = mappingAnswerData;
+exports.mappingFollowUpQuestionsData = mappingFollowUpQuestionsData;
 exports.mappingReasoningData = mappingReasoningData;
 exports.mappingSortData = mappingSortData;
 exports.mappingSuggestionsData = mappingSuggestionsData;
@@ -18,9 +19,11 @@ exports.writeDataStatus = writeDataStatus;
 exports.writeEventTargetToInteraction = writeEventTargetToInteraction;
 exports.writeExhaustionToData = writeExhaustionToData;
 exports.writeKeywordsToData = writeKeywordsToData;
+exports.writeMisoIdAsRootMisoId = writeMisoIdAsRootMisoId;
 exports.writeMisoIdFromSession = writeMisoIdFromSession;
 exports.writeMisoIdToMeta = writeMisoIdToMeta;
 exports.writeMisoIdToSession = writeMisoIdToSession;
+exports.writeRequestFromPreviousData = writeRequestFromPreviousData;
 exports.writeUnanswerableToMeta = writeUnanswerableToMeta;
 var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
@@ -99,11 +102,31 @@ function mappingSuggestionsData(_, {
     text
   }));
 }
+function mappingFollowUpQuestionsData(data) {
+  if (!data || !data.value) {
+    return undefined;
+  }
+  return (data.value.followup_questions || []).map(text => ({
+    text
+  }));
+}
 
 // data //
 function getRevision(data) {
   return data && data.value && data.value.revision;
 }
+function writeRequestFromPreviousData(data, oldData) {
+  // patch request in case user call updateData() without request object in custom data scenario
+  if (!data || !data.value || data.request || !oldData || !oldData.request) {
+    return data;
+  }
+  const {
+    request
+  } = oldData;
+  return Object.assign({}, data, {
+    request
+  });
+}
 function writeDataStatus(data) {
   const status = getStatus(data);
   const ongoing = status === _constants.STATUS.READY ? data.ongoing : undefined;
@@ -250,6 +273,25 @@ function retainFacetCountsInData(data, currentFacetCounts) {
     })
   });
 }
+function writeMisoIdAsRootMisoId(data) {
+  const {
+    value
+  } = data;
+  if (!value) {
+    return data;
+  }
+  const {
+    miso_id
+  } = value;
+  if (!miso_id) {
+    return data;
+  }
+  return Object.assign({}, data, {
+    value: Object.assign({}, value, {
+      root_miso_id: miso_id
+    })
+  });
+}
 function concatItemsFromMoreResponse(oldData, newData, {
   role = _constants.ROLE.PRODUCTS
 } = {}) {
@@ -259,7 +301,8 @@ function concatItemsFromMoreResponse(oldData, newData, {
   const {
     [role]: oldProducts = [],
     facet_counts,
-    total
+    total,
+    root_miso_id
   } = oldData.value;
   const {
     [role]: newProducts = []
@@ -272,6 +315,7 @@ function concatItemsFromMoreResponse(oldData, newData, {
     value: Object.assign({}, newData.value, {
       facet_counts,
       total,
+      root_miso_id,
       [role]: [...oldProducts, ...newProducts]
     })
   });

package/dist/cjs/workflow/search-based.js

@@ -215,8 +215,8 @@ class SearchBasedWorkflow extends _base.default {
   }
 
   // data //
-  _defaultProcessData(data) {
-    data = super._defaultProcessData(data);
+  _defaultProcessData(data, oldData) {
+    data = super._defaultProcessData(data, oldData);
     data = (0, _processors.writeKeywordsToData)(data);
     data = (0, _processors.retainFacetCountsInData)(data, this._currentFacetCounts);
     data = (0, _processors.writeExhaustionToData)(data, {
@@ -239,7 +239,7 @@ class SearchBasedWorkflow extends _base.default {
       _meta
     } = request.payload;
     if (!_meta || !_meta.page) {
-      return data; // not from "more" request
+      return (0, _processors.writeMisoIdAsRootMisoId)(data); // not from "more" request
     }
     // concat records if it's from "more" request
     const currentData = this._hub.states[_index.fields.data()];
@@ -260,6 +260,29 @@ class SearchBasedWorkflow extends _base.default {
     });
     this._views.filters.apply();
   }
+
+  // interactions //
+  _defaultProcessInteraction(payload, args) {
+    payload = super._defaultProcessInteraction(payload, args);
+    payload = this._writeRootMisoIdToInteraction(payload);
+    return payload;
+  }
+  _writeRootMisoIdToInteraction(payload) {
+    const data = this._hub.states[_index.fields.data()];
+    const {
+      root_miso_id
+    } = data && data.value || {};
+    if (!root_miso_id) {
+      return payload;
+    }
+    return (0, _processors.mergeInteraction)(payload, {
+      context: {
+        custom_context: {
+          root_miso_id
+        }
+      }
+    });
+  }
 }
 exports.default = SearchBasedWorkflow;
 (0, _index3.makeConfigurable)(SearchBasedWorkflow.prototype, [_constants.WORKFLOW_CONFIGURABLE.PAGINATION, _constants.WORKFLOW_CONFIGURABLE.FILTERS]);

package/package.json

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

package/src/actor/data.js

@@ -38,10 +38,6 @@ export default class DataActor {
       this._ac = new AbortController();
     }
     this._session = session;
-
-    // TODO: move this to workflow
-    // reflect session update
-    this._emitResponse({ session });
   }
 
   async _handleRequest(event) {
@@ -49,16 +45,12 @@ export default class DataActor {
     if (!this.active) {
       return;
     }
-    const { session } = this._hub.states;
-    const { session: _, ...request } = event;
-
-    // emit response to update request
-    this._emitResponse({ session, request });
+    const { session, ...request } = event;
 
     try {
       const { signal } = this._ac || {};
       const options = { ...event.options, signal };
-      const response = await this._source({ session, ...event, options });
+      const response = await this._source({ session, ...request, options });
       // takes an iterable, either sync or async
       if (response && response[Symbol.asyncIterator]) {
         // also emit reponse of the head request, if available

package/src/constants.js

@@ -1,7 +1,6 @@
 export const ATTR_DATA_MISO_UNIT_ID = `data-miso-unit-id`;
 export const ATTR_DATA_MISO_PRODUCT_ID = `data-miso-product-id`;
 export const DEFAULT_UNIT_ID = 'default';
-export const ORGANIC_QUESTION_SOURCE = '_organic';
 
 export const ROLE = Object.freeze({
   CONTAINER: 'container',
@@ -19,6 +18,7 @@ export const ROLE = Object.freeze({
   IMAGES: 'images',
   SOURCES: 'sources',
   RELATED_RESOURCES: 'related_resources',
+  FOLLOW_UP_QUESTIONS: 'follow_up_questions',
   QUERY_SUGGESTIONS: 'query_suggestions',
   RELATED_QUESTIONS: 'related_questions',
   AFFILIATION: 'affiliation',
@@ -42,6 +42,7 @@ const DATA_ROLE_SET = new Set([
   ROLE.IMAGES,
   ROLE.SOURCES,
   ROLE.RELATED_RESOURCES,
+  ROLE.FOLLOW_UP_QUESTIONS,
   ROLE.QUERY_SUGGESTIONS,
   ROLE.RELATED_QUESTIONS,
   ROLE.AFFILIATION,
@@ -110,6 +111,12 @@ export const STATUS = Object.freeze({
   UNANSWERABLE: 'unanswerable',
 });
 
+export const QUESTION_SOURCE = Object.freeze({
+  ORGANIC: '_organic',
+  SUGGESTED_QUESTIONS: '_suggested_questions',
+  INLINE_QUESTION_LINK: '_inline_question_link',
+});
+
 export function validateEventType(value) {
   if (TRACKING_EVENT_TYPES.indexOf(value) < 0) {
     throw new Error(`Unrecognized event type: ${value}`);

package/src/defaults/ask/phrases.js

@@ -9,13 +9,16 @@ export const question = 'You asked...';
 export const sources = 'This reply is based on the following articles';
 
 /**
- * The phrase displayed right before <miso-query-suggestions>
+ * The phrase displayed right before <miso-follow-up-questions>
  */
-export const querySuggestions = 'Related questions you can explore';
+export const followUpQuestions = 'Related questions you can explore';
 
 /**
  * The phrase displayed right before <miso-related-resources>
  */
 export const relatedResources = 'Go beyond, and learn more about this topic';
 
+/**
+ * The phrase displayed at the header of <miso-reasoning> box
+ */
 export const thoughts = 'Thoughts';

package/src/defaults/ask/templates.js

@@ -18,6 +18,7 @@ class Sections extends _Sections {
       this.answer(options),
       this.affiliation(options),
       this.sources(options),
+      this.followUpQuestions(options),
       container(options, { name: 'bottom-spacing', visibleWhen: 'ongoing' }),
     ];
   }
@@ -76,6 +77,16 @@ class Sections extends _Sections {
     ]);
   }
 
+  followUpQuestions(options) {
+    const { container, phrase } = this._helpers;
+    const name = 'follow-up-questions';
+    const extraNames = ['query-suggestions']; // backward compatibility (styling)
+    return container(options, { name, extraNames, visibleWhen: 'nonempty' }, [
+      phrase(options, { name, extraNames, tag: 'h3' }),
+      '<miso-follow-up-questions></miso-follow-up-questions>',
+    ]);
+  }
+
   followUps(options) {
     const { features = {} } = options;
     return features.followUpQuestions === false ? '' : `<miso-follow-ups id="miso-ask-combo__follow-ups" class="miso-ask-combo__follow-ups"></miso-follow-ups>`;
@@ -91,16 +102,6 @@ class Sections extends _Sections {
     return section(options, { name: 'related-resources' }, body);
   }
 
-  querySuggestions(options) {
-    const { container, phrase } = this._helpers;
-    const { features = {} } = options;
-    return features.querySuggestions === false ? '' :
-      container(options, { name: 'query-suggestions', visibleWhen: 'initial+nonempty' }, [
-        phrase(options, { name: 'query-suggestions', tag: 'h3' }),
-        '<miso-query-suggestions></miso-query-suggestions>',
-      ]);
-  }
-
 }
 
 export const helpers = externalize(new Helpers({ ...CONSTANTS, DEFAULT_PHRASES }));
@@ -122,10 +123,9 @@ export function root(options = {}) {
 
 export function followUp(options = {}) {
   const { normalizeOptions, section, container } = helpers;
-  const { querySuggestions, answerGroup } = sections;
+  const { answerGroup } = sections;
   options = normalizeOptions(options);
   return section(options, { name: 'follow-up' }, [
-    querySuggestions(options),
     container(options, { name: 'query', visibleWhen: 'initial loading' }, '<miso-query></miso-query>'),
     ...answerGroup(options),
   ]);

package/src/defaults/common/templates.js

@@ -94,17 +94,17 @@ export class Helpers {
 
   normalizePhraseOptionKey(key) {
     key = kebabOrSnakeToLowerCamel(key);
-    if (key === 'relatedQuestions') {
-      return 'querySuggestions'; // legacy key
+    if (key === 'relatedQuestions' || key === 'querySuggestions') {
+      return 'followUpQuestions'; // legacy key
     }
     return key;
   }
 
   // html //
-  phrase(options, { name, tag = 'div', inline = false }) {
+  phrase(options, { name, extraNames = [], tag = 'div', inline = false }) {
     const { classPrefix } = options;
     const mainClass = inline ? `${classPrefix}__phrase-inline` : `${classPrefix}__phrase`;
-    return `<${tag} class="${mainClass} ${classPrefix}__${name}-phrase">${this.phraseText(options, kebabToLowerCamel(name))}</${tag}>`;
+    return `<${tag} class="${mainClass} ${[name, ...extraNames].map(name => `${classPrefix}__${name}-phrase`).join(' ')}">${this.phraseText(options, kebabToLowerCamel(name))}</${tag}>`;
   }
 
   phraseText(options, key) {
@@ -126,8 +126,8 @@ export class Helpers {
     }, body);
   }
 
-  container({ classPrefix, circledCitationIndex, parentQuestionId }, { name, visibleWhen, trait, logo = false }, body) {
-    const classes = [`${classPrefix}__${name}-container`];
+  container({ classPrefix, circledCitationIndex, parentQuestionId }, { name, extraNames = [], visibleWhen, trait, logo = false }, body) {
+    const classes = [name, ...extraNames].map(name => `${classPrefix}__${name}-container`);
     circledCitationIndex && classes.push('miso-circled-citation-index');
     return this.element(this._context.CONAINER_TAG, { classes, visibleWhen, trait, logo, parentQuestionId }, body);
   }

package/src/element/context/miso-follow-ups.js

@@ -14,6 +14,7 @@ export default class MisoFollowUpsElement extends MisoContextElement {
 
   constructor() {
     super();
+    this._elementToWorkflow = new WeakMap();
     this._unsubscribes = [];
   }
 
@@ -41,21 +42,45 @@ export default class MisoFollowUpsElement extends MisoContextElement {
       return;
     }
 
-    // 1. when an answer is fully populated, insert a new section for the follow-up question
-    this._unsubscribes.push(context.on('done', (event) => {
-      const template = event.workflow._options.resolved.templates.followUp;
-      if (!template) {
+    // 1. call auto-next if unset
+    if (!context._autoNextFn) {
+      context.autoNext();
+    }
+
+    // 2. when a new workflow is created, insert a new section
+    this._unsubscribes.push(context.on('create', (workflow) => {
+      const { parentQuestionId } = workflow;
+      const template = workflow._options.resolved.templates.followUp;
+      if (!parentQuestionId || !template) {
         return;
       }
-      this.insertAdjacentHTML('beforeend', template({ parentQuestionId: event.workflow.questionId }));
+      const oldChildCount = this.children.length;
+      this.insertAdjacentHTML('beforeend', template({ parentQuestionId }));
+      const newChildCount = this.children.length;
+      // keep track of the elements
+      for (const element of Array.prototype.slice.call(this.children, oldChildCount, newChildCount)) {
+        this._elementToWorkflow.set(element, workflow);
+      }
     }));
 
-    // 2. if user starts over, clean up existing follow-up questions
-    this._unsubscribes.push(context.root.on('loading', () => {
-      // clean up the entire follow-ups section
-      this.innerHTML = '';
-      // destroy all follow-up workflows
-      context.reset({ root: false });
+    // 3. when a workflow is loading, scroll into view
+    this._unsubscribes.push(context.on('loading', ({ workflow }) => {
+      for (const element of this.children) {
+        if (this._elementToWorkflow.get(element) === workflow) {
+          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          break;
+        }
+      }
+    }));
+
+    // 4. when a workflow is destroyed, remove the section
+    this._unsubscribes.push(context.on('destroy', ({ workflow }) => {
+      for (const element of this.children) {
+        if (this._elementToWorkflow.get(element) === workflow) {
+          this._elementToWorkflow.delete(element);
+          element.remove();
+        }
+      }
     }));
   }
 

package/src/element/role/index.js

@@ -1,5 +1,6 @@
 export { default as MisoComponentElement } from './miso-component.js';
 export { default as MisoQueryElement } from './miso-query.js';
+export { default as MisoFollowUpQuestionsElement } from './miso-follow-up-questions.js';
 export { default as MisoQuerySuggestionsElement } from './miso-query-suggestions.js';
 export { default as MisoFeedbackElement } from './miso-feedback.js';
 export { default as MisoResultsElement } from './miso-results.js';

package/src/element/role/miso-follow-up-questions.js

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

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

@@ -116,15 +116,14 @@ export default class OptionListLayout extends TemplateBasedLayout {
       return;
     }
     this._trackClick(event, binding);
-    this._submit(option.text);
+    this._select(option.text);
   }
 
-  async _submit(value) {
+  async _select(value) {
     if (!value) {
       return;
     }
-    // TODO: q -> value
-    this._view.hub.update(fields.query(), { q: value });
+    this._view._events.emit('select', { value });
   }
 
   destroy() {

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

@@ -151,8 +151,9 @@ export default class TypewriterLayout extends ProgressiveLayout {
   // event //
   _onClick(event) {
     const { target } = event;
-    const citationLinkElement = target.closest(`[data-role="citation-link"]`);
+
     // citation link click
+    const citationLinkElement = target.closest(`[data-role="citation-link"]`);
     if (citationLinkElement) {
       const index = parseInt(citationLinkElement.dataset.index);
       if (!Number.isNaN(index)) {
@@ -160,6 +161,18 @@ export default class TypewriterLayout extends ProgressiveLayout {
       }
       return;
     }
+
+    // follow-up link click
+    const followUpLinkElement = target.closest(`[data-role="follow-up-link"]`);
+    if (followUpLinkElement) {
+      let { q } = followUpLinkElement.dataset;
+      q = q ? q.trim() : undefined;
+      if (q) {
+        this._view._events.emit('follow-up-click', { event, q });
+      }
+      return;
+    }
+
     // generic link click
     const anchorElement = target.closest('a');
     if (anchorElement) {

package/src/version.js

@@ -1 +1 @@
-export default '1.12.2';
+export default '1.12.3-beta.1';

package/src/workflow/answer-based.js

@@ -1,7 +1,7 @@
 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 { ROLE, STATUS, QUESTION_SOURCE } from '../constants.js';
 import { SearchBoxLayout, TextLayout, ListLayout, GalleryLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
 import { processData as processAffiliationData } from '../affiliation/index.js';
 import { mergeRolesOptions, autoQuery as autoQueryFn, DEFAULT_AUTO_QUERY_PARAM, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
@@ -174,7 +174,7 @@ export default class AnswerBasedWorkflow extends Workflow {
   }
 
   _writeQuestionSourceToSession(args) {
-    this.session.meta.question_source = args.qs || ORGANIC_QUESTION_SOURCE; // might be null, not undefined
+    this.session.meta.question_source = args.qs || QUESTION_SOURCE.ORGANIC; // might be null, not undefined
   }
 
   _buildPayload() {
@@ -209,8 +209,8 @@ export default class AnswerBasedWorkflow extends Workflow {
 
   _handleHeadResponse(data) {}
 
-  _defaultProcessData(data) {
-    data = super._defaultProcessData(data);
+  _defaultProcessData(data, oldData) {
+    data = super._defaultProcessData(data, oldData);
     data = processAffiliationData(data);
     data = writeAnswerStageToMeta(data);
     return data;
@@ -234,12 +234,12 @@ export default class AnswerBasedWorkflow extends Workflow {
 
     const url = new URL(window.location);
     const currentQuestion = url.searchParams.get(param);
-    const currentQuestionSource = url.searchParams.get(sourceParam) || ORGANIC_QUESTION_SOURCE;
+    const currentQuestionSource = url.searchParams.get(sourceParam) || QUESTION_SOURCE.ORGANIC;
     if (question === currentQuestion && questionSource === currentQuestionSource) {
       return;
     }
     url.searchParams.set(param, question);
-    if (questionSource === ORGANIC_QUESTION_SOURCE) {
+    if (questionSource === QUESTION_SOURCE.ORGANIC) {
       url.searchParams.delete(sourceParam);
     } else {
       url.searchParams.set(sourceParam, questionSource);
@@ -294,10 +294,13 @@ export default class AnswerBasedWorkflow extends Workflow {
 
   // handlers //
   _onCitationClick({ index, event }) {
+    if (event.button !== 0) {
+      return; // only left click
+    }
     if (isTracked(event)) {
       return;
     }
-    const { value } = this.states[fields.data()] || {};
+    const { value } = this._hub.states[fields.data()] || {};
     const { sources } = value || {};
     // index is 1-based
     const source = sources && sources[index - 1];
@@ -307,11 +310,13 @@ export default class AnswerBasedWorkflow extends Workflow {
     // TODO: should we track impression as well?
     markAsTracked(event);
     // distinguish from regular sources element click
-    // TODO
     this._views.trackers.sources.click([source.product_id], { event_target: 'citation-link' });
   }
 
   _onAnswerLinkClick({ event, ...item }) {
+    if (event.button !== 0) {
+      return; // only left click
+    }
     if (isTracked(event)) {
       return;
     }