@miso.ai/client-sdk-ui 1.11.0-beta.6 → 1.11.0-beta.8

package/dist/cjs/asset/svgs.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRIANGLE = exports.SEND = exports.SEARCH = void 0;
+exports.TRIANGLE = exports.SEND = exports.SEARCH = exports.ICON_NAMES = void 0;
+exports.getIcon = getIcon;
 var _version = _interopRequireDefault(require("../version.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function trianglePath(r) {
@@ -14,13 +15,18 @@ function trianglePath(r) {
 }
 const PREFIX = 'miso-ui-icon';
 const ID = `${PREFIX}-svg-${_version.default.replaceAll('.', '_')}`;
+const ICON_NAME = {
+  SEND: 'send',
+  SEARCH: 'search',
+  TRIANGLE: 'triangle'
+};
 
 // CC0 SVGs
-const ICON_SEND = `<symbol id="${PREFIX}-send" viewBox="0 0 32 32"><path fill="currentColor" d="M11.499,19.173l5.801,-5.849c0.389,-0.392 1.022,-0.394 1.414,-0.006c0.392,0.389 0.395,1.022 0.006,1.414l-5.798,5.847l5.306,8.002c0.207,0.313 0.572,0.483 0.945,0.441c0.373,-0.042 0.691,-0.289 0.824,-0.64l9.024,-23.904c0.138,-0.366 0.05,-0.78 -0.226,-1.058c-0.276,-0.278 -0.689,-0.369 -1.057,-0.233l-24.004,8.892c-0.353,0.13 -0.602,0.448 -0.646,0.821c-0.044,0.373 0.125,0.74 0.438,0.948l7.973,5.325Z"/></symbol>`;
-const ICON_SEARCH = `<symbol id="${PREFIX}-search" viewBox="0 0 24 24"><path fill="currentColor" d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z"/></symbol>`;
+const ICON_SEND = `<symbol id="${PREFIX}-${ICON_NAME.SEND}" viewBox="0 0 32 32"><path fill="currentColor" d="M11.499,19.173l5.801,-5.849c0.389,-0.392 1.022,-0.394 1.414,-0.006c0.392,0.389 0.395,1.022 0.006,1.414l-5.798,5.847l5.306,8.002c0.207,0.313 0.572,0.483 0.945,0.441c0.373,-0.042 0.691,-0.289 0.824,-0.64l9.024,-23.904c0.138,-0.366 0.05,-0.78 -0.226,-1.058c-0.276,-0.278 -0.689,-0.369 -1.057,-0.233l-24.004,8.892c-0.353,0.13 -0.602,0.448 -0.646,0.821c-0.044,0.373 0.125,0.74 0.438,0.948l7.973,5.325Z"/></symbol>`;
+const ICON_SEARCH = `<symbol id="${PREFIX}-${ICON_NAME.SEARCH}" viewBox="0 0 24 24"><path fill="currentColor" d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z"/></symbol>`;
 
 // Custom SVGs
-const ICON_TRIANGLE = `<symbol id="${PREFIX}-triangle" viewBox="-5 -5 105 105"><path d="${trianglePath(5)}"/></symbol>`;
+const ICON_TRIANGLE = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE}" viewBox="-5 -5 105 105"><path d="${trianglePath(5)}"/></symbol>`;
 const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE];
 const SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 let loaded = false;
@@ -32,9 +38,13 @@ function loadSvgSprites() {
   document.head.insertAdjacentHTML('beforeend', SPRITES_SVG);
 }
 loadSvgSprites();
-function getSvg(name) {
+function _icon(name) {
   return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use href="#${PREFIX}-${name}"></use></svg>`;
 }
-const SEND = exports.SEND = getSvg('send');
-const SEARCH = exports.SEARCH = getSvg('search');
-const TRIANGLE = exports.TRIANGLE = getSvg('triangle');
+const ICON_NAMES = exports.ICON_NAMES = new Set(Object.values(ICON_NAME));
+function getIcon(name) {
+  return ICON_NAMES.has(name) ? _icon(name) : '';
+}
+const SEND = exports.SEND = _icon(ICON_NAME.SEND);
+const SEARCH = exports.SEARCH = _icon(ICON_NAME.SEARCH);
+const TRIANGLE = exports.TRIANGLE = _icon(ICON_NAME.TRIANGLE);

package/dist/cjs/defaults/hybrid-search/answer-box.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _constants = require("./constants.js");
 var _constants2 = require("../../constants.js");
+var _index = require("../../actor/index.js");
 var _phrases = require("./phrases.js");
 const CLASS_OPEN = 'answer-box-open';
 const CLASS_SHOWN = 'answer-box-shown';
@@ -29,7 +30,12 @@ class AnswerBox {
 
     // expose widget API
     workflow.answerBox = this;
-    workflow._unsubscribes.push(() => this.destroy()); // TODO: review
+    workflow._unsubscribes.push(() => {
+      if (workflow.answerBox === this) {
+        this.destroy();
+        workflow.answerBox = undefined;
+      }
+    });
 
     // handle toggle button clicks
     const callback = event => this._handleClick(event);
@@ -38,7 +44,9 @@ class AnswerBox {
     // sync state
     this._syncWofkflowStatus();
     this._syncButtonText();
-    this._unsubscribes = [() => element.removeEventListener('click', callback), workflow._answer.on('loading', () => this.hide()), workflow._answer.on('error', () => this.show()), workflow._answer.on('ready', () => this.show())];
+    this._unsubscribes = [() => element.removeEventListener('click', callback),
+    // cling to data rather than view, as we may miss view event when tab is inactive due to raf
+    workflow._answer._hub.on(_index.fields.data(), () => this._syncWofkflowStatus())];
   }
   _handleClick(_ref) {
     let {
@@ -75,6 +83,13 @@ class AnswerBox {
       button.textContent = phrase;
     }
   }
+  _syncScroll() {
+    if (!this.isOpen) {
+      this._element.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }
   destroy() {
     for (const unsubscribe of this._unsubscribes) {
       unsubscribe();
@@ -110,6 +125,7 @@ for (const [method, [action, className]] of Object.entries(METHODS)) {
     this._updateBoxStatus(action, className);
     if (className === CLASS_OPEN) {
       this._syncButtonText();
+      this._syncScroll();
     }
   };
 }

package/dist/cjs/layout/input/search-box.js

@@ -19,26 +19,40 @@ const DEFAULT_AUTOCOMPLETE_CLASSNAME = 'miso-autocomplete';
 function root(layout) {
   const {
     className,
+    templates,
     role,
     options,
-    workflow,
     autocomplete
   } = layout;
   const {
-    placeholder,
-    buttonText
+    placeholder
   } = options;
   const roleAttr = role ? `data-role="${role}"` : '';
-  const buttonContent = buttonText || workflow === 'search' ? _svgs.SEARCH : _svgs.SEND;
   return `
 <div class="${className}" ${roleAttr}>
   <div class="${className}__input-group">
     <input class="${className}__input" type="text" data-role="input" ${placeholder ? `placeholder="${placeholder}"` : ''}>
-    <button class="${className}__button" type="submit" data-role="submit">${buttonContent}</button>
+    <button class="${className}__button" type="submit" data-role="submit">${templates.buttonContent(layout)}</button>
   </div>
   <div class="${autocomplete.className}" data-role="autocomplete"></div>
 </div>`.trim();
 }
+function buttonContent(layout) {
+  const {
+    templates,
+    options
+  } = layout;
+  if (options.buttonText) {
+    return options.buttonText; // legacy
+  }
+  const {
+    buttonText,
+    buttonIcon
+  } = templates;
+  const text = typeof buttonText === 'function' ? buttonText(layout) : `${buttonText}`;
+  const icon = typeof buttonIcon === 'function' ? buttonIcon(layout) : (0, _svgs.getIcon)(buttonIcon) || `${buttonIcon}`;
+  return text + icon;
+}
 function completions(layout, items) {
   const {
     templates,
@@ -110,6 +124,9 @@ function completionItem(layout, type, item) {
 }
 const DEFAULT_TEMPLATES = Object.freeze({
   root,
+  buttonContent,
+  buttonText: '',
+  buttonIcon: 'search',
   completions,
   completionList,
   completionItem,

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '1.11.0-beta.6';
+var _default = exports.default = '1.11.0-beta.8';

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

@@ -57,7 +57,8 @@ const DEFAULT_LAYOUTS = Object.freeze({
 });
 const DEFAULT_TRACKERS = Object.freeze({
   [_constants.ROLE.SOURCES]: {},
-  [_constants.ROLE.AFFILIATION]: {}
+  [_constants.ROLE.AFFILIATION]: {},
+  [_constants.ROLE.PRODUCTS]: {}
 });
 const DEFAULT_OPTIONS = Object.freeze({
   api: DEFAULT_API_OPTIONS,

package/dist/cjs/workflow/ask.js

@@ -20,6 +20,11 @@ const DEFAULT_API_OPTIONS = Object.freeze(Object.assign({}, _answerBased.default
   })
 }));
 const DEFAULT_LAYOUTS = Object.freeze(Object.assign({}, _answerBased.default.DEFAULT_LAYOUTS, {
+  [_constants.ROLE.QUERY]: [_index2.SearchBoxLayout.type, {
+    templates: {
+      buttonIcon: 'send'
+    }
+  }],
   [_constants.ROLE.RELATED_RESOURCES]: [_index2.ListLayout.type, {
     incremental: true,
     itemType: 'article'

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

@@ -26,7 +26,6 @@ class HybridSearchAnswer extends _answerBased.default {
       rolesConfig: ROLES_CONFIG,
       superworkflow
     });
-    this.useInteractions(false);
   }
   _initProperties(args) {
     super._initProperties(args);
@@ -38,6 +37,7 @@ class HybridSearchAnswer extends _answerBased.default {
     super.restart();
     // cascade restart to the sibling
     const results = this._superworkflow._results;
+    results._views.filters.reset();
     results.restart();
     this._resultsSession = results.session; // keep track of the session
   }

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

@@ -30,7 +30,6 @@ class HybridSearchResults extends _base.default {
       rolesConfig: ROLES_CONFIG,
       superworkflow
     });
-    this.useInteractions(false);
   }
   _initProperties(args) {
     super._initProperties(args);
@@ -75,7 +74,7 @@ class HybridSearchResults extends _base.default {
       payload = _objectWithoutPropertiesLoose(_ref, _excluded);
     // borrow the work from the sibling
     payload = this._superworkflow._answer._buildPayload(payload);
-    payload = this._writeFqToPayload(Object.assign({}, payload, {
+    payload = this._writeFiltersToPayload(Object.assign({}, payload, {
       filters
     }));
     payload = this._writeQuestionIdToPayload(payload);
@@ -83,16 +82,13 @@ class HybridSearchResults extends _base.default {
       answer: false
     });
   }
-  _writeFqToPayload() {
+  _writeFiltersToPayload() {
     let _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let {
         filters
       } = _ref2,
       payload = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-    const fq = (0, _processors.composeFq)(filters); // TODO: combine with fq in payload?
-    return (0, _commons.trimObj)(Object.assign({}, payload, {
-      fq
-    }));
+    return (0, _commons.trimObj)(Object.assign({}, payload, (0, _processors.composeFiltersPayload)(filters)));
   }
   _writeQuestionIdToPayload(payload) {
     return Object.assign({}, payload, {

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

@@ -16,7 +16,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const DEFAULT_API_OPTIONS = Object.freeze(Object.assign({}, _answerBased.default.DEFAULT_API_OPTIONS, {
   name: _commons.API.NAME.SEARCH,
   payload: Object.assign({}, _answerBased.default.DEFAULT_API_OPTIONS.payload, {
-    fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at']
+    source_fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at', 'title'],
+    fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at', 'title']
   })
 }));
 const DEFAULT_LAYOUTS = Object.freeze(Object.assign({}, _answerBased.default.DEFAULT_LAYOUTS, {

package/dist/cjs/workflow/processors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.composeFq = composeFq;
+exports.composeFiltersPayload = composeFiltersPayload;
 exports.writeAnswerStageToMeta = writeAnswerStageToMeta;
 exports.writeDataStatus = writeDataStatus;
 exports.writeKeywordsToData = writeKeywordsToData;
@@ -94,21 +94,30 @@ function writeAnswerStageToMeta(data) {
     })
   });
 }
-function composeFq(filters) {
+function composeFiltersPayload(filters) {
   if (!filters) {
     return undefined;
   }
-  const clauses = [];
   const {
     facets
   } = filters;
+  return (0, _commons.trimObj)({
+    facet_filters: composeFacetFilters(facets)
+  });
+}
+function composeFacetFilters(facets) {
+  if (!facets) {
+    return undefined;
+  }
+  const filters = {};
   for (const field in facets) {
     const values = facets[field];
     if (!values || !values.length) {
       continue; // just in case
     }
-    const vstr = values.length === 1 ? `"${values[0]}"` : `(${values.map(v => `"${v}"`).join(' OR ')})`;
-    clauses.push(`${field}:${vstr}`);
+    filters[field] = {
+      terms: values
+    };
   }
-  return clauses.map(c => `(${c})`).join(' AND ') || undefined;
+  return Object.keys(filters).length ? filters : undefined;
 }

package/package.json

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

package/src/asset/svgs.js

@@ -10,12 +10,18 @@ function trianglePath(r) {
 const PREFIX = 'miso-ui-icon';
 const ID = `${PREFIX}-svg-${version.replaceAll('.', '_')}`;
 
+const ICON_NAME = {
+  SEND: 'send',
+  SEARCH: 'search',
+  TRIANGLE: 'triangle',
+};
+
 // CC0 SVGs
-const ICON_SEND = `<symbol id="${PREFIX}-send" viewBox="0 0 32 32"><path fill="currentColor" d="M11.499,19.173l5.801,-5.849c0.389,-0.392 1.022,-0.394 1.414,-0.006c0.392,0.389 0.395,1.022 0.006,1.414l-5.798,5.847l5.306,8.002c0.207,0.313 0.572,0.483 0.945,0.441c0.373,-0.042 0.691,-0.289 0.824,-0.64l9.024,-23.904c0.138,-0.366 0.05,-0.78 -0.226,-1.058c-0.276,-0.278 -0.689,-0.369 -1.057,-0.233l-24.004,8.892c-0.353,0.13 -0.602,0.448 -0.646,0.821c-0.044,0.373 0.125,0.74 0.438,0.948l7.973,5.325Z"/></symbol>`;
-const ICON_SEARCH = `<symbol id="${PREFIX}-search" viewBox="0 0 24 24"><path fill="currentColor" d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z"/></symbol>`;
+const ICON_SEND = `<symbol id="${PREFIX}-${ICON_NAME.SEND}" viewBox="0 0 32 32"><path fill="currentColor" d="M11.499,19.173l5.801,-5.849c0.389,-0.392 1.022,-0.394 1.414,-0.006c0.392,0.389 0.395,1.022 0.006,1.414l-5.798,5.847l5.306,8.002c0.207,0.313 0.572,0.483 0.945,0.441c0.373,-0.042 0.691,-0.289 0.824,-0.64l9.024,-23.904c0.138,-0.366 0.05,-0.78 -0.226,-1.058c-0.276,-0.278 -0.689,-0.369 -1.057,-0.233l-24.004,8.892c-0.353,0.13 -0.602,0.448 -0.646,0.821c-0.044,0.373 0.125,0.74 0.438,0.948l7.973,5.325Z"/></symbol>`;
+const ICON_SEARCH = `<symbol id="${PREFIX}-${ICON_NAME.SEARCH}" viewBox="0 0 24 24"><path fill="currentColor" d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z"/></symbol>`;
 
 // Custom SVGs
-const ICON_TRIANGLE = `<symbol id="${PREFIX}-triangle" viewBox="-5 -5 105 105"><path d="${trianglePath(5)}"/></symbol>`;
+const ICON_TRIANGLE = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE}" viewBox="-5 -5 105 105"><path d="${trianglePath(5)}"/></symbol>`;
 
 const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE];
 
@@ -33,10 +39,16 @@ function loadSvgSprites() {
 
 loadSvgSprites();
 
-function getSvg(name) {
+function _icon(name) {
   return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use href="#${PREFIX}-${name}"></use></svg>`;
 }
 
-export const SEND = getSvg('send');
-export const SEARCH = getSvg('search');
-export const TRIANGLE = getSvg('triangle');
+export const ICON_NAMES = new Set(Object.values(ICON_NAME));
+
+export function getIcon(name) {
+  return ICON_NAMES.has(name) ? _icon(name) : '';
+}
+
+export const SEND = _icon(ICON_NAME.SEND);
+export const SEARCH = _icon(ICON_NAME.SEARCH);
+export const TRIANGLE = _icon(ICON_NAME.TRIANGLE);

package/src/defaults/hybrid-search/answer-box.js

@@ -1,5 +1,6 @@
 import { CLASS_PREFIX } from './constants.js';
 import { STATUS } from '../../constants.js';
+import { fields } from '../../actor/index.js';
 import { showMore as DEFAULT_PHRASE_SHOW_MORE, showLess as DEFAULT_PHRASE_SHOW_LESS } from './phrases.js';
 
 const CLASS_OPEN = 'answer-box-open';
@@ -23,7 +24,12 @@ export default class AnswerBox {
 
     // expose widget API
     workflow.answerBox = this;
-    workflow._unsubscribes.push(() => this.destroy()); // TODO: review
+    workflow._unsubscribes.push(() => {
+      if (workflow.answerBox === this) {
+        this.destroy();
+        workflow.answerBox = undefined;
+      }
+    });
 
     // handle toggle button clicks
     const callback = event => this._handleClick(event);
@@ -35,9 +41,8 @@ export default class AnswerBox {
 
     this._unsubscribes = [
       () => element.removeEventListener('click', callback),
-      workflow._answer.on('loading', () => this.hide()),
-      workflow._answer.on('error', () => this.show()),
-      workflow._answer.on('ready', () => this.show()),
+      // cling to data rather than view, as we may miss view event when tab is inactive due to raf
+      workflow._answer._hub.on(fields.data(), () => this._syncWofkflowStatus()),
     ];
   }
 
@@ -74,6 +79,12 @@ export default class AnswerBox {
     }
   }
 
+  _syncScroll() {
+    if (!this.isOpen) {
+      this._element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+
   destroy() {
     for (const unsubscribe of this._unsubscribes) {
       unsubscribe();
@@ -113,6 +124,7 @@ for (const [method, [action, className]] of Object.entries(METHODS)) {
     this._updateBoxStatus(action, className);
     if (className === CLASS_OPEN) {
       this._syncButtonText();
+      this._syncScroll();
     }
   };
 }

package/src/layout/input/search-box.js

@@ -3,27 +3,37 @@ import { LAYOUT_CATEGORY, STATUS, EVENT_TYPE, DATA_ASPECT } from '../../constant
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
 import { imageBlock, productInfoBlock } from '../templates.js';
-import { SEND, SEARCH } from '../../asset/svgs.js';
+import { getIcon } from '../../asset/svgs.js';
 
 const TYPE = 'search-box';
 const DEFAULT_CLASSNAME = 'miso-search-box';
 const DEFAULT_AUTOCOMPLETE_CLASSNAME = 'miso-autocomplete';
 
 function root(layout) {
-  const { className, role, options, workflow, autocomplete } = layout;
-  const { placeholder, buttonText } = options;
+  const { className, templates, role, options, autocomplete } = layout;
+  const { placeholder } = options;
   const roleAttr = role ? `data-role="${role}"` : '';
-  const buttonContent = buttonText || workflow === 'search' ? SEARCH : SEND;
   return `
 <div class="${className}" ${roleAttr}>
   <div class="${className}__input-group">
     <input class="${className}__input" type="text" data-role="input" ${placeholder ? `placeholder="${placeholder}"` : ''}>
-    <button class="${className}__button" type="submit" data-role="submit">${buttonContent}</button>
+    <button class="${className}__button" type="submit" data-role="submit">${templates.buttonContent(layout)}</button>
   </div>
   <div class="${autocomplete.className}" data-role="autocomplete"></div>
 </div>`.trim();
 }
 
+function buttonContent(layout) {
+  const { templates, options } = layout;
+  if (options.buttonText) {
+    return options.buttonText; // legacy
+  }
+  const { buttonText, buttonIcon } = templates;
+  const text = typeof buttonText === 'function' ? buttonText(layout) : `${buttonText}`;
+  const icon = typeof buttonIcon === 'function' ? buttonIcon(layout) : (getIcon(buttonIcon) || `${buttonIcon}`);
+  return text + icon;
+}
+
 function completions(layout, items) {
   const { templates, workflow, autocomplete } = layout;
   // use options under layout.autocomplete from now on
@@ -84,6 +94,9 @@ function completionItem(layout, type, item) {
 
 const DEFAULT_TEMPLATES = Object.freeze({
   root,
+  buttonContent,
+  buttonText: '',
+  buttonIcon: 'search',
   completions,
   completionList,
   completionItem,

package/src/version.js

@@ -1 +1 @@
-export default '1.11.0-beta.6';
+export default '1.11.0-beta.8';

package/src/workflow/answer-based.js

@@ -38,6 +38,7 @@ const DEFAULT_LAYOUTS = Object.freeze({
 const DEFAULT_TRACKERS = Object.freeze({
   [ROLE.SOURCES]: {},
   [ROLE.AFFILIATION]: {},
+  [ROLE.PRODUCTS]: {},
 });
 
 const DEFAULT_OPTIONS = Object.freeze({

package/src/workflow/ask.js

@@ -2,7 +2,7 @@ import { defineValues, trimObj, API } from '@miso.ai/commons';
 import AnswerBasedWorkflow from './answer-based.js';
 import { fields } from '../actor/index.js';
 import { ROLE, ORGANIC_QUESTION_SOURCE } from '../constants.js';
-import { OptionListLayout, ListLayout } from '../layout/index.js';
+import { OptionListLayout, ListLayout, SearchBoxLayout } from '../layout/index.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS,
@@ -15,6 +15,7 @@ const DEFAULT_API_OPTIONS = Object.freeze({
 
 const DEFAULT_LAYOUTS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_LAYOUTS,
+  [ROLE.QUERY]: [SearchBoxLayout.type, { templates: { buttonIcon: 'send' } }],
   [ROLE.RELATED_RESOURCES]: [ListLayout.type, { incremental: true, itemType: 'article' }],
   [ROLE.QUERY_SUGGESTIONS]: OptionListLayout.type,
 });

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

@@ -20,7 +20,6 @@ export default class HybridSearchAnswer extends AnswerBasedWorkflow {
       rolesConfig: ROLES_CONFIG,
       superworkflow,
     });
-    this.useInteractions(false);
   }
 
   _initProperties(args) {
@@ -34,6 +33,7 @@ export default class HybridSearchAnswer extends AnswerBasedWorkflow {
     super.restart();
     // cascade restart to the sibling
     const results = this._superworkflow._results;
+    results._views.filters.reset();
     results.restart();
     this._resultsSession = results.session; // keep track of the session
   }

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

@@ -3,7 +3,7 @@ import Workflow from './base.js';
 import { fields } from '../actor/index.js';
 import { ROLE, STATUS } from '../constants.js';
 import { mergeApiOptions } from './options.js';
-import { writeKeywordsToData, composeFq } from './processors.js';
+import { writeKeywordsToData, composeFiltersPayload } from './processors.js';
 
 const ROLES_CONFIG = Object.freeze({
   [ROLE.FACETS]: {
@@ -23,7 +23,6 @@ export default class HybridSearchResults extends Workflow {
       rolesConfig: ROLES_CONFIG,
       superworkflow,
     });
-    this.useInteractions(false);
   }
 
   _initProperties(args) {
@@ -62,16 +61,15 @@ export default class HybridSearchResults extends Workflow {
   _buildPayload({ filters, ...payload } = {}) {
     // borrow the work from the sibling
     payload = this._superworkflow._answer._buildPayload(payload);
-    payload = this._writeFqToPayload({ ...payload, filters });
+    payload = this._writeFiltersToPayload({ ...payload, filters });
     payload = this._writeQuestionIdToPayload(payload);
     return { ...payload, answer: false };
   }
 
-  _writeFqToPayload({ filters, ...payload } = {}) {
-    const fq = composeFq(filters); // TODO: combine with fq in payload?
+  _writeFiltersToPayload({ filters, ...payload } = {}) {
     return trimObj({
       ...payload,
-      fq,
+      ...composeFiltersPayload(filters),
     });
   }
 

package/src/workflow/hybrid-search.js

@@ -12,7 +12,8 @@ const DEFAULT_API_OPTIONS = Object.freeze({
   name: API.NAME.SEARCH,
   payload: {
     ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS.payload,
-    fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at'],
+    source_fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at', 'title'],
+    fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at', 'title'],
   },
 });
 

package/src/workflow/processors.js

@@ -74,19 +74,29 @@ export function writeAnswerStageToMeta(data) {
   };
 }
 
-export function composeFq(filters) {
+export function composeFiltersPayload(filters) {
   if (!filters) {
     return undefined;
   }
-  const clauses = [];
   const { facets } = filters;
+  return trimObj({
+    facet_filters: composeFacetFilters(facets),
+  });
+}
+
+function composeFacetFilters(facets) {
+  if (!facets) {
+    return undefined;
+  }
+  const filters = {};
   for (const field in facets) {
     const values = facets[field];
     if (!values || !values.length) {
       continue; // just in case
     }
-    const vstr = values.length === 1 ? `"${values[0]}"` : `(${values.map(v => `"${v}"`).join(' OR ')})`;
-    clauses.push(`${field}:${vstr}`);
+    filters[field] = {
+      terms: values,
+    };
   }
-  return clauses.map(c => `(${c})`).join(' AND ') || undefined;
+  return Object.keys(filters).length ? filters : undefined;
 }