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

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

@@ -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.0"
   },
-  "version": "1.12.2"
+  "version": "1.12.3-beta.0"
 }

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.0';

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() {
@@ -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;
     }

package/src/workflow/ask.js

@@ -1,11 +1,11 @@
 import { defineValues, trimObj, API } from '@miso.ai/commons';
 import AnswerBasedWorkflow from './answer-based.js';
 import { fields } from '../actor/index.js';
-import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
+import { ROLE, STATUS, QUESTION_SOURCE } from '../constants.js';
 import { OptionListLayout, ListLayout, SearchBoxLayout, TypewriterLayout } from '../layout/index.js';
 import { mergeInteraction } from './processors.js';
 import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
-import { mappingSuggestionsData } from './processors.js';
+import { mappingSuggestionsData, mappingFollowUpQuestionsData } from './processors.js';
 import { followUp as followUpTemplate } from '../defaults/ask/templates.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
@@ -23,6 +23,7 @@ const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.REASONING]: TypewriterLayout.type,
   [ROLE.RELATED_RESOURCES]: [ListLayout.type, { incremental: true, itemType: 'article' }],
   [ROLE.QUERY_SUGGESTIONS]: OptionListLayout.type,
+  [ROLE.FOLLOW_UP_QUESTIONS]: OptionListLayout.type,
 });
 
 const DEFAULT_TRACKERS = Object.freeze({
@@ -53,6 +54,7 @@ const ROLES_OPTIONS = mergeRolesOptions(AnswerBasedWorkflow.ROLES_OPTIONS, {
   members: Object.keys(DEFAULT_LAYOUTS),
   mappings: {
     [ROLE.QUERY_SUGGESTIONS]: mappingSuggestionsData,
+    [ROLE.FOLLOW_UP_QUESTIONS]: mappingFollowUpQuestionsData,
   },
 });
 
@@ -79,6 +81,9 @@ export default class Ask extends AnswerBasedWorkflow {
     this._unsubscribes = [
       ...this._unsubscribes,
       this._hub.on(fields.view(ROLE.REASONING), state => this._onReasoningViewUpdate(state)),
+      this._views.get(ROLE.ANSWER).on('follow-up-click', event => this._onFollowUpClick(event)),
+      this._views.get(ROLE.FOLLOW_UP_QUESTIONS).on('select', event => this._onFollowUpQuestionSelect(event)),
+      this._views.get(ROLE.QUERY_SUGGESTIONS).on('select', event => this._onQuerySuggestionSelect(event)),
     ];
   }
 
@@ -91,6 +96,8 @@ export default class Ask extends AnswerBasedWorkflow {
 
   // lifecycle //
   restart() {
+    const { next } = this;
+    next && next.destroy();
     if (this._questionId) {
       this._context._byQid.delete(this._questionId);
     }
@@ -126,7 +133,7 @@ export default class Ask extends AnswerBasedWorkflow {
       parent_question_id: parentQuestionId,
       _meta: {
         ...options._meta,
-        question_source: qs || ORGANIC_QUESTION_SOURCE, // might be null, not undefined
+        question_source: qs || QUESTION_SOURCE.ORGANIC, // might be null, not undefined
       },
     });
     payload = this._writeWikiLinkTemplateToPayload(payload);
@@ -163,8 +170,11 @@ export default class Ask extends AnswerBasedWorkflow {
     let { property } = (payload.context && payload.context.custom_context) || {};
     let question_id, parent_question_id, question_source;
 
-    if (args.role === ROLE.QUERY_SUGGESTIONS) {
+    if (args.role === ROLE.FOLLOW_UP_QUESTIONS || args.role === ROLE.QUERY_SUGGESTIONS) {
       property = 'suggested_followup_questions';
+    }
+
+    if (args.role === ROLE.QUERY_SUGGESTIONS) {
       parent_question_id = this.previous && this.previous.parentQuestionId;
       question_id = this.parentQuestionId;
       question_source = this.previous && this.previous.session.meta.question_source;
@@ -187,6 +197,36 @@ export default class Ask extends AnswerBasedWorkflow {
     });
   }
 
+  // handlers //
+  _onFollowUpClick({ q, event } = {}) {
+    if (event.button !== 0) {
+      return; // only left click
+    }
+    this._submitFollowUpQuestion({ q, qs: QUESTION_SOURCE.INLINE_QUESTION_LINK });
+    // TODO: track click?
+  }
+
+  _onFollowUpQuestionSelect({ value: q }) {
+    this._submitFollowUpQuestion({ q, qs: QUESTION_SOURCE.SUGGESTED_QUESTIONS });
+  }
+
+  _submitFollowUpQuestion({ q = '', qs } = {}) {
+    q = q.trim();
+    if (!q) {
+      return;
+    }
+    const next = this.getOrCreateNext();
+    next.query({ q, qs });
+  }
+
+  _onQuerySuggestionSelect({ value: q }) {
+    if (!q) {
+      return;
+    }
+    // backward compatible: query on current workflow
+    this.query({ q, qs: QUESTION_SOURCE.SUGGESTED_QUESTIONS });
+  }
+
   // helpers //
   _writeQuestionId(questionId) {
     // capture question ID and register at context
@@ -212,7 +252,10 @@ export default class Ask extends AnswerBasedWorkflow {
 
   // destroy //
   _destroy(options) {
-    const { parentQuestionId, questionId } = this;
+    const { next, parentQuestionId, questionId } = this;
+    if (next) {
+      next.destroy(options);
+    }
     if (parentQuestionId) {
       this._context._byPqid.delete(parentQuestionId);
     }

package/src/workflow/asks.js

@@ -19,7 +19,7 @@ function autoNextOptionsAsPredicate(options = DEFAULT_AUTO_NEXT_OPTIONS) {
     case 'function':
       return options;
     default:
-      return false;
+      return () => false;
   }
 }
 
@@ -31,6 +31,7 @@ export default class Asks extends WorkflowContext {
     this._byPqid = new Map();
     this._root = new Ask(this); // initialize with default workflow
     this._events.on('*', event => this._createNextIfNecessary(event));
+    this._autoNextFn = undefined;
   }
 
   get root() {

package/src/workflow/base.js

@@ -308,7 +308,7 @@ export default class Workflow extends Component {
 
   // destroy //
   destroy(options) {
-    this._events.emit('destroy');
+    this._emit('destroy');
     this._destroy(options);
   }
 

package/src/workflow/hybrid-search-answer.js

@@ -1,5 +1,5 @@
 import AnswerBasedWorkflow from './answer-based.js';
-import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
+import { ROLE, STATUS, QUESTION_SOURCE } from '../constants.js';
 import { mergeRolesOptions } from './options/index.js';
 import { writeKeywordsToData, writeMisoIdToSession, writeMisoIdFromSession, writeUnanswerableToMeta } from './processors.js';
 import { makeAutocompletable } from './autocompletable.js';
@@ -54,7 +54,7 @@ export default class HybridSearchAnswer extends AnswerBasedWorkflow {
       ...payload,
       _meta: {
         ...payload._meta,
-        question_source: qs || ORGANIC_QUESTION_SOURCE, // might be null, not undefined
+        question_source: qs || QUESTION_SOURCE.ORGANIC, // might be null, not undefined
       },
     };
   }

package/src/workflow/processors.js

@@ -54,6 +54,13 @@ export function mappingSuggestionsData(_, { workflow } = {}) {
   return value && value.map(text => ({ text }));
 }
 
+export function mappingFollowUpQuestionsData(data) {
+  if (!data || !data.value) {
+    return undefined;
+  }
+  return (data.value.followup_questions || []).map(text => ({ text }));
+}
+
 // data //
 export function getRevision(data) {
   return data && data.value && data.value.revision;
@@ -186,11 +193,29 @@ export function retainFacetCountsInData(data, currentFacetCounts) {
   };
 }
 
+export function writeMisoIdAsRootMisoId(data) {
+  const { value } = data;
+  if (!value) {
+    return data;
+  }
+  const { miso_id } = value;
+  if (!miso_id) {
+    return data;
+  }
+  return {
+    ...data,
+    value: {
+      ...value,
+      root_miso_id: miso_id,
+    },
+  };
+}
+
 export function concatItemsFromMoreResponse(oldData, newData, { role = ROLE.PRODUCTS } = {}) {
   if (!newData.value) {
     return oldData;
   }
-  const { [role]: oldProducts = [], facet_counts, total } = oldData.value;
+  const { [role]: oldProducts = [], facet_counts, total, root_miso_id } = oldData.value;
   const { [role]: newProducts = [] } = newData.value;
   // keep old exhaustion flag, just in case
   // TODO
@@ -202,6 +227,7 @@ export function concatItemsFromMoreResponse(oldData, newData, { role = ROLE.PROD
       ...newData.value,
       facet_counts,
       total,
+      root_miso_id,
       [role]: [...oldProducts, ...newProducts],
     },
   }
@@ -304,7 +330,7 @@ export function mergeInteraction(base = {}, patch = {}) {
   return trimObj({
     ...base,
     ...patch,
-    context:trimObj({
+    context: trimObj({
       ...base.context,
       ...patch.context,
       custom_context: trimObj({

package/src/workflow/search-based.js

@@ -3,7 +3,7 @@ import Workflow from './base.js';
 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 { mappingSortData, writeKeywordsToData, retainFacetCountsInData, writeExhaustionToData, writeMisoIdAsRootMisoId, concatItemsFromMoreResponse, mergeInteraction } from './processors.js';
 import { mergeRolesOptions, autoQuery as autoQueryFn, makeConfigurable, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 
 const DEFAULT_ROWS = 10;
@@ -245,7 +245,7 @@ export default class SearchBasedWorkflow extends Workflow {
     }
     const { _meta } = request.payload;
     if (!_meta || !_meta.page) {
-      return data; // not from "more" request
+      return writeMisoIdAsRootMisoId(data); // not from "more" request
     }
     // concat records if it's from "more" request
     const currentData = this._hub.states[fields.data()];
@@ -261,6 +261,28 @@ export default class SearchBasedWorkflow extends Workflow {
     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[fields.data()];
+    const { root_miso_id } = (data && data.value) || {};
+    if (!root_miso_id) {
+      return payload;
+    }
+    return mergeInteraction(payload, {
+      context: {
+        custom_context: {
+          root_miso_id,
+        }
+      }
+    });
+  }
+
 }
 
 makeConfigurable(SearchBasedWorkflow.prototype, [WORKFLOW_CONFIGURABLE.PAGINATION, WORKFLOW_CONFIGURABLE.FILTERS]);