@miso.ai/client-sdk-ui 1.10.0-beta.0 → 1.10.0-beta.2

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

@@ -1,53 +1,104 @@
-import { escapeHtml } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY } from '../../constants.js';
+import { defineValues, escapeHtml, findInAncestors, debounce } from '@miso.ai/commons';
+import { LAYOUT_CATEGORY, STATUS } from '../../constants.js';
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
+import { helpers, imageBlock, productInfoBlock } from '../templates.js';
 import { SEND, SEARCH } 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, templates, options, workflow } = layout;
-  const { autocomplete, placeholder, buttonText } = options;
+  const { className, role, options, workflow, autocomplete } = layout;
+  const { placeholder, buttonText } = 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="button">${buttonContent}</button>
+    <button class="${className}__button" type="submit" data-role="submit">${buttonContent}</button>
   </div>
-  ${autocomplete ? templates.autocomplete(layout) : ''}
-</div>
-`;
+  <div class="${autocomplete.className}" data-role="autocomplete"></div>
+</div>`.trim();
 }
 
-function autocomplete(layout) {
-  const { className, templates } = layout;
-  return `
-<div class="${className}__autocomplete" data-role="autocomplete">
-  ${templates.suggestionList(layout)}
-</div>
-`;
+function completions(layout, items) {
+  const { templates, workflow, autocomplete } = layout;
+  // use options under layout.autocomplete from now on
+  layout = {
+    templates,
+    workflow,
+    ...autocomplete,
+  };
+
+  const products = [], queries = [];
+  for (const item of items) {
+    (item.product ? products : queries).push(item);
+  }
+
+  return templates.queries(layout, queries) + (queries.length > 0 && products.length > 0 ? `<hr>` : '') + templates.products(layout, products);
+}
+
+function queries(layout, items) {
+  const { templates } = layout;
+  return templates.completionList(layout, 'query', items);
+}
+
+function products(layout, items) {
+  const { templates } = layout;
+  return templates.completionList(layout, 'product', items);
 }
 
-function suggestionList(layout) {
-  const { className } = layout;
-  return `<ol class="${className}__suggestion-list" data-role="suggestion-list"></ol>`;
+function query(layout, { text, text_with_inverted_markups } = {}) {
+  return text_with_inverted_markups || escapeHtml(text);
 }
 
-function suggestionItem(layout, value) {
-  const { className } = layout;
-  const text = escapeHtml(value.text || value);
-  return `<li class="${className}__suggestion-item" data-role="suggestion-item" tabindex="0">${text}</li>`;
+function product(layout, { product }) {
+  const { templates } = layout;
+  const [openTag, closeTag] = helpers.tagPair(layout, product, { role: false });
+  return [
+    openTag,
+    templates.imageBlock(layout, product),
+    templates.productInfoBlock(layout, product),
+    closeTag,
+  ].join('');
+}
+
+function completionList(layout, type, items) {
+  const { className, templates } = layout;
+  return `
+<ul class="${className}__${type}-list" data-role="${type}-list">
+  ${items.map(item => templates.completionItem(layout, type, item)).join('')}
+</ul>`.trim();
+}
+
+function completionItem(layout, type, item) {
+  const { className, templates } = layout;
+  return `
+<li class="${className}__${type}-item" data-role="${type}-item" data-index="${item._index}" tabindex="0">
+  ${templates[type](layout, item)}
+</li>`.trim();
 }
 
 const DEFAULT_TEMPLATES = Object.freeze({
   root,
-  autocomplete,
-  suggestionList,
-  suggestionItem,
+  completions,
+  completionList,
+  completionItem,
+  queries,
+  products,
+  query,
+  product,
+  imageBlock,
+  productInfoBlock,
+  helpers,
+});
+
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  className: DEFAULT_AUTOCOMPLETE_CLASSNAME,
+  debounce: 300,
 });
 
 export default class SearchBoxLayout extends TemplateBasedLayout {
@@ -68,31 +119,36 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     return DEFAULT_CLASSNAME;
   }
 
-  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+  constructor({ className = DEFAULT_CLASSNAME, templates, autocomplete, ...options } = {}) {
     super({
       className,
       templates: { ...DEFAULT_TEMPLATES, ...templates },
       ...options,
     });
+    defineValues(this, {
+      autocomplete: { ...DEFAULT_AUTOCOMPLETE_OPTIONS, ...autocomplete },
+    });
     this._contexts = new WeakMap();
-    this._suggestionItems = new WeakMap(); // TODO: put them on elements as layout can be potentially replaced
+    this._prevInput = undefined;
+    this._debounce = debounce(this.autocomplete.debounce);
   }
 
   initialize(view) {
-    const { autocomplete } = this.options;
     this._view = view;
     const { proxyElement, hub } = view;
     this._unsubscribes = [
       ...this._unsubscribes,
+      proxyElement.on('input', (e) => this._syncInput(e)),
       proxyElement.on('keydown', (e) => this._handleKeyDown(e)),
       proxyElement.on('click', (e) => this._handleClick(e)),
+      proxyElement.on('focusin', (e) => this._handleFocusIn(e)),
+      proxyElement.on('focusout', (e) => this._handleFocusOut(e)),
     ];
-    if (autocomplete) {
-      this._unsubscribes.push(hub.on(fields.suggestions(), () => this._handleInput()));
-    }
+    this._unsubscribes.push(hub.on(fields.completions(), () => view.refresh({ force: true })));
   }
 
   focus() {
+    // TODO: support blur as well
     if (this._element) {
       this._context().focus();
     } else {
@@ -101,6 +157,14 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     }
   }
 
+  open() {
+    this._element.classList.add('open');
+  }
+
+  close() {
+    this._element.classList.remove('open');
+  }
+
   set value(value) {
     if (this._element) {
       this._context().value = value;
@@ -111,12 +175,10 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
 
   _preprocess({ state }) {
     state = super._preprocess({ state });
-    const { autocomplete } = this.options;
-    if (!autocomplete) {
-      return state;
-    }
-    const suggestions = this._view.hub.states[fields.suggestions()];
-    return { ...state, suggestions };
+    return {
+      ...state,
+      completions: this._view.hub.states[fields.completions()],
+    };
   }
 
   _render(element, data, controls) {
@@ -124,42 +186,32 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
       // only render the template once, and also skip if there are children already to allow customized DOM
       super._render(element, data, controls);
     }
-    this._setupAutocomplete(element);
-    this._renderSuggestions(element, data, controls);
+    this._updateCompletions(element, data, controls);
     this._fullfillFocusRequest(element);
     this._fullfillValueRequest(element);
   }
 
-  _setupAutocomplete(element) {
-    const { autocomplete } = this.options;
-    if (!autocomplete) {
+  _updateCompletions(element, { state, rendered }, { writeToState }) {
+    if (!state.completions) {
       return;
     }
-    this._context(element).setupAutocomplete();
-  }
-
-  _renderSuggestions(element, { state }, { writeToState } = {}) {
-    const { autocomplete } = this.options;
-    if (!autocomplete) {
+    const { status = STATUS.INITIAL, index, value: completions } = state.completions;
+    if (rendered && rendered.completions.index === index && rendered.completions.status === status) {
       return;
     }
-
-    const { suggestionListElement, autocompleteElement } = this._context(element);
-    if (!suggestionListElement) {
-      // not actually rendered
-      writeToState && writeToState({ suggestions: { value: [] } });
+    const context = this._context(element);
+    const { autocompleteElement } = context;
+    if (!autocompleteElement) {
       return;
     }
 
-    // TODO: incremental
-    const { suggestions = {} } = state;
-    const suggestionItems = suggestions.value || [];
-    autocompleteElement.classList[suggestionItems.length === 0 ? 'add' : 'remove']('empty');
-    suggestionListElement.innerHTML = suggestionItems.map((suggestion) => this.templates.suggestionItem(this, suggestion)).join('');
-    let i = 0;
-    for (const itemElement of suggestionListElement.children) {
-      this._suggestionItems.set(itemElement, suggestionItems[i++]);
-    }
+    const items = context.trackItems(completions);
+
+    element.classList[items.length > 0 ? 'add' : 'remove']('nonempty');
+    autocompleteElement.setAttribute('data-status', status);
+    autocompleteElement.innerHTML = this.templates.completions(this, items);
+
+    writeToState({ completions: { index, status } });
   }
 
   _fullfillFocusRequest(element) {
@@ -190,39 +242,80 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     return context;
   }
 
+  _syncInput() {
+    const { inputElement } = this._context();
+    if (!inputElement) {
+      return;
+    }
+    const value = inputElement.value.trim();
+
+    if (this._prevInput === value) {
+      return;
+    }
+    this._prevInput = value;
+
+    const self = this;
+    this._debounce(() => self._view.hub.update(fields.input(), { value }));
+  }
+
+  _handleFocusIn({ target }) {
+    if (!this._element) {
+      return;
+    }
+    if (target.matches('[data-role="input"]')) {
+      this._syncInput();
+      this.open();
+    }
+  }
+
+  _handleFocusOut({ relatedTarget }) {
+    if (!this._element) {
+      return;
+    }
+    if (!relatedTarget || !findInAncestors(relatedTarget, element => element === this._element || undefined)) {
+      this.close();
+    }
+  }
+
   _handleKeyDown({ key, target, isComposing }) {
     if (!isComposing && key === 'Enter' && target.matches('input')) {
       this._submit(target.value);
       target.blur();
     }
+    // TODO: select completion items with arrow keys
   }
 
-  _handleClick({ target }) {
+  _handleClick(event) {
+    const { target } = event;
     const { inputElement } = this._context();
-    for (let element = target; element && element !== this._view.element; element = element.parentElement) {
-      if (element.matches('[type="submit"]') || element.matches('[data-role="button"]')) {
+    for (let element = target; element && element !== this._element; element = element.parentElement) {
+      if (element.matches('[data-role="submit"]') || element.matches('[data-role="button"]') || element.matches('[type="submit"]')) {
         if (inputElement) {
           inputElement.blur();
           this._submit(inputElement.value);
         }
         return;
       }
-    }
-    const { autocomplete } = this.options;
-    if (!autocomplete) {
-      return;
-    }
-    for (let element = target; element && element !== this._view.element; element = element.parentElement) {
-      const suggestion = this._suggestionItems.get(element);
-      if (!suggestion) {
-        continue;
+      if (element.matches('[data-role="query-item"]')) {
+        const index = element.getAttribute('data-index');
+        const item = this._context().data.get(parseInt(index));
+        const value = item && item.text;
+        if (value) {
+          if (inputElement) {
+            inputElement.value = value;
+          }
+          this._view._events.emit('select', Object.freeze({ value: item, index, domEvent: event }));
+          if (!event.defaultPrevented) {
+            this._submit(value);
+          }
+        }
+        this.close();
+        return;
       }
-      const value = suggestion.text || suggestion;
-      if (inputElement) {
-        inputElement.value = value;
+      if (element.matches('[data-role="product-item"]')) {
+        this._view._events.emit('select', Object.freeze({ value: item, index, domEvent: event }));
+        return;
       }
-      this._submit(value);
-      return;
     }
   }
 
@@ -230,6 +323,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     if (!value) {
       return;
     }
+    this.close();
     // TODO: q -> value
     this._view.hub.trigger(fields.query(), { q: value });
   }
@@ -245,6 +339,7 @@ class Context {
   constructor(element) {
     this._element = element;
     this._cache = {};
+    this._data = new Map();
   }
 
   get inputElement() {
@@ -255,25 +350,27 @@ class Context {
     return this._get('autocomplete');
   }
 
-  get suggestionListElement() {
-    return this._get('suggestion-list');
+  get data() {
+    return this._data;
   }
 
-  setupAutocomplete() {
-    if (!this._element || this._autocompleteSetup) {
-      return;
-    }
-    this._autocompleteSetup = true;
-    const { inputElement, autocompleteElement } = this;
-    if (inputElement && autocompleteElement) {
-      // TODO: should we clean up
-      inputElement.addEventListener('focus', () => {
-        autocompleteElement.classList.add('open');
-      });
-      inputElement.addEventListener('blur', () => {
-        autocompleteElement.classList.remove('open');
-      });
+  trackItems(completions) {
+    let index = 0;
+    const data = this._data = new Map();
+    const items = [];
+    for (const field in completions) {
+      for (const item of completions[field]) {
+        if (item.product && !item.product.url) {
+          continue; // product without URL is not clickable
+        }
+        item._index = index;
+        item._field = field;
+        data.set(index, item);
+        items.push(item);
+        index++;
+      }
     }
+    return items;
   }
 
   focus() {

package/src/layout/list/collection.js

@@ -1,7 +1,7 @@
 import { defineValues } from '@miso.ai/commons';
 import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
-import { product, article, question } from '../templates.js';
+import { product, article, question, productInfoBlock, articleInfoBlock, imageBlock, indexBlock, helpers } from '../templates.js';
 
 const VALUE = Symbol.for('miso.value');
 
@@ -57,6 +57,11 @@ const DEFAULT_TEMPLATES = Object.freeze({
   ordered: false,
   items,
   item,
+  productInfoBlock,
+  articleInfoBlock,
+  imageBlock,
+  indexBlock,
+  helpers,
 });
 
 export default class CollectionLayout extends TemplateBasedLayout {

package/src/layout/templates.js

@@ -16,34 +16,33 @@ export function unimplemented(name) {
 
 export function product(layout, state, data, meta) {
   const { templates } = layout;
-  const [openTag, closeTag] = renderTagPair(layout, data);
+  const [openTag, closeTag] = tagPair(layout, data);
   return [
     openTag,
-    (templates.imageBlock || renderImageBlock)(layout, data, meta),
-    (templates.infoBlock || productInfoBlock)(layout, data, meta),
-    (templates.indexBlock || renderIndexBlock)(layout, data, meta),
+    (templates.imageBlock || imageBlock)(layout, data, meta),
+    (templates.infoBlock || templates.productInfoBlock || productInfoBlock)(layout, data, meta),
     closeTag,
   ].join('');
 }
 
 export function question(layout, state, data) {
-  const [openTag, closeTag] = renderTagPair(layout, data);
+  const [openTag, closeTag] = tagPair(layout, data);
   return `${openTag}${data.value || data.text || data}${closeTag}`;
 }
 
 export function article(layout, state, data, meta) {
   const { templates } = layout;
-  const [openTag, closeTag] = renderTagPair(layout, data);
+  const [openTag, closeTag] = tagPair(layout, data);
   return [
     openTag,
-    (templates.imageBlock || renderImageBlock)(layout, data, meta),
-    (templates.infoBlock || articleInfoBlock)(layout, data, meta),
-    (templates.indexBlock || renderIndexBlock)(layout, data, meta),
+    (templates.imageBlock || imageBlock)(layout, data, meta),
+    (templates.infoBlock || templates.articleInfoBlock || articleInfoBlock)(layout, data, meta),
+    (templates.indexBlock || indexBlock)(layout, data, meta),
     closeTag,
   ].join('');
 }
 
-function productInfoBlock({ className }, { title, description, sale_price, original_price }) {
+export function productInfoBlock({ className }, { title, description, sale_price, original_price }) {
   let content = '';
   if (title) {
     content += `<div class="${className}__item-title">${escapeHtml(title)}</div>`;
@@ -59,14 +58,14 @@ function productInfoBlock({ className }, { title, description, sale_price, origi
   return `<div class="${className}__item-info-container">${content}</div>`;
 }
 
-function articleInfoBlock({ className, templates }, { title, snippet, description, created_at, updated_at, published_at }) {
+export function articleInfoBlock({ className, templates }, { title, snippet, description, created_at, updated_at, published_at }) {
   const date = published_at || created_at || updated_at;
   let content = '';
   if (title) {
     content += `<div class="${className}__item-title">${escapeHtml(title)}</div>`;
   }
   if (date) {
-    content += `<div class="${className}__item-date">${renderDate(date, templates.date)}</div>`;
+    content += `<div class="${className}__item-date">${formatDate(date, templates.date)}</div>`;
   }
   if (snippet) {
     content += `<div class="${className}__item-snippet">${snippet}</div>`;
@@ -76,17 +75,7 @@ function articleInfoBlock({ className, templates }, { title, snippet, descriptio
   return `<div class="${className}__item-info-container">${content}</div>`;
 }
 
-// helpers //
-function renderTagPair({ className, options = {} }, { product_id, url }) {
-  const { link = {} } = options;
-  const { target = '_blank', rel = 'noopener' } = link; // TODO: other properties
-  const tag = url ? 'a' : 'div';
-  const urlAttrs = url ? `href="${url}" target="${target}" rel="${rel}"` : '';
-  const productAttrs = product_id ? `${ATTR_DATA_MISO_PRODUCT_ID}="${product_id}"` : '';
-  return [`<${tag} class="${className}__item-body" data-role="item" ${productAttrs} ${urlAttrs}>`, `</${tag}>`];
-}
-
-function renderImageBlock({ className }, { cover_image }) {
+export function imageBlock({ className }, { cover_image }) {
   if (!cover_image) {
     return '';
   }
@@ -94,14 +83,25 @@ function renderImageBlock({ className }, { cover_image }) {
   return `<div class="${className}__item-cover-image-container">${img}</div>`;
 }
 
-function renderIndexBlock({ className }, data, { index }) {
+export function indexBlock({ className }, data, { index }) {
   const i = index + 1;
   return `<div class="${className}__item-index-container"><span class="${className}__item-index miso-citation-index" data-index="${i}"></span></div>`;
 }
 
+// helpers //
+function tagPair({ className, options = {} }, { product_id, url }, { classSuffix = 'item-body', role = 'item' } = {}) {
+  const { link = {} } = options;
+  const { target = '_blank', rel = 'noopener' } = link; // TODO: other properties
+  const tag = url ? 'a' : 'div';
+  const urlAttrs = url ? `href="${url}" target="${target}" rel="${rel}"` : '';
+  const productAttrs = product_id ? `${ATTR_DATA_MISO_PRODUCT_ID}="${product_id}"` : '';
+  const roleAttrs = role ? `data-role="${role}"` : '';
+  return [`<${tag} class="${className}__${classSuffix}" ${roleAttrs} ${productAttrs} ${urlAttrs}>`, `</${tag}>`];
+}
+
 const DEFAULT_DATE_OPTIONS = Object.freeze({ locale: 'en-US', year: 'numeric', month: 'short', day: 'numeric' });
 
-function renderDate(date, fn = DEFAULT_DATE_OPTIONS) {
+function formatDate(date, fn = DEFAULT_DATE_OPTIONS) {
   switch (typeof fn) {
     case 'function':
       return fn(date);
@@ -113,3 +113,9 @@ function renderDate(date, fn = DEFAULT_DATE_OPTIONS) {
       throw new Error(`Invalid date format: ${fn}`);
   }
 }
+
+export const helpers = Object.freeze({
+  tagPair,
+  formatDate,
+  escapeHtml,
+});

package/src/source/index.js

@@ -1 +1,14 @@
-export { default as api } from './api.js';
+import { API } from '@miso.ai/commons';
+
+//export { default as api } from './api.js';
+
+export function api(client) {
+  // TODO: send uuid & unit id
+  return async ({ group, name, payload, options }) => {
+    if (group === API.GROUP.ASK && name === API.NAME.QUESTIONS) {
+      return client.api.ask.questions(payload, options);
+    }
+    // because name is in snake case
+    return client.api[group]._run(name, payload, options);
+  };
+}

package/src/version.js

@@ -1 +1 @@
-export default '1.10.0-beta.0';
+export default '1.10.0-beta.2';

package/src/workflow/ask.js

@@ -1,9 +1,11 @@
 import { defineValues, trimObj, API } from '@miso.ai/commons';
 import Workflow from './base.js';
 import { mergeApiOptions } from './options.js';
-import { fields, FeedbackActor } from '../actor/index.js';
+import * as sources from '../source/index.js';
+import { fields, FeedbackActor, AutocompleteActor } from '../actor/index.js';
 import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
 import { SearchBoxLayout, OptionListLayout, ListLayout, TextLayout, TypewriterLayout, FeedbackLayout } from '../layout/index.js';
+import { makeConfigurable } from './options.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: API.GROUP.ASK,
@@ -17,6 +19,14 @@ const DEFAULT_API_OPTIONS = Object.freeze({
   },
 });
 
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  actor: false,
+  api: {
+    group: API.GROUP.ASK,
+    name: API.NAME.AUTOCOMPLETE,
+  },
+});
+
 const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.QUERY]: [SearchBoxLayout.type, { placeholder: 'Ask a question' }],
   [ROLE.QUESTION]: [TextLayout.type, { tag: 'h2' }],
@@ -40,6 +50,7 @@ const DEFAULT_TRACKERS = Object.freeze({
 
 const DEFAULT_OPTIONS = Object.freeze({
   api: DEFAULT_API_OPTIONS,
+  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
 });
@@ -60,6 +71,13 @@ export default class Ask extends Workflow {
     this._feedback = new FeedbackActor(this._hub);
     this._setSuggestedQuestions();
 
+    /*
+    this._autocomplete = new AutocompleteActor(this._hub, {
+      source: sources.api(this._client),
+      options: this._options,
+    });
+    */
+
     this._unsubscribes = [
       ...this._unsubscribes,
       this._hub.on(fields.query(), payload => this.query(payload)),
@@ -152,6 +170,17 @@ export default class Ask extends Workflow {
     super.restart();
   }
 
+  /*
+  updateCompletions(event) {
+    // TODO: verify
+    this._hub.update(fields.completions(), {
+      ...event,
+      source: 'manual',
+    });
+    return this;
+  }
+  */
+
   _defaultProcessData(data) {
     data = super._defaultProcessData(data);
     const { value, request } = data;
@@ -259,6 +288,7 @@ export default class Ask extends Workflow {
       this._context._byQid.delete(questionId);
     }
     this._feedback._destroy();
+    this._autocomplete._destroy();
     super._destroy(options);
   }
 

package/src/workflow/base.js

@@ -42,11 +42,10 @@ export default class Workflow extends Component {
     const extensions = this._extensions = plugin._getExtensions(client);
     const options = this._options = new WorkflowOptions(context && context._options, mergeDefaults(this, defaults));
     const hub = this._hub = injectLogger(new Hub(), (...args) => this._log(...args));
-    const source = this._source = sources.api(client);
     const layouts = plugin.layouts;
 
     this._sessions = new SessionMaker(hub);
-    this._data = new DataActor(hub, { source, options });
+    this._data = new DataActor(hub, { source: sources.api(client), options });
     const views = this._views = new ViewsActor(hub, { extensions, layouts, roles, options, workflow: name });
     this._interactions = new InteractionsActor(hub, { client, options });
     this._trackers = new Trackers(hub, { views, options });

package/src/workflow/explore.js

@@ -11,7 +11,7 @@ const DEFAULT_API_OPTIONS = Object.freeze({
 });
 
 const DEFAULT_LAYOUTS = Object.freeze({
-  [ROLE.RELATED_QUESTIONS]: [ListLayout.type, { itemType: 'question' }],
+  [ROLE.RELATED_QUESTIONS]: [ListLayout.type, { itemType: 'question', link: { rel: 'noopener nofollow' } }],
   [ROLE.QUERY]: [SearchBoxLayout.type, { placeholder: 'Ask a question' }],
 });