@miso.ai/client-sdk-ui 1.11.5-beta.1 → 1.11.5-beta.3

package/dist/cjs/workflow/use-link.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.UseLinkMixin = void 0;
 exports.enableUseLink = enableUseLink;
 var _commons = require("@miso.ai/commons");
+const _excluded = ["q"];
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function enableUseLink(prototype) {
   (0, _commons.mixin)(prototype, UseLinkMixin.prototype);
 }
@@ -34,11 +36,16 @@ class UseLinkMixin {
       window.open(url, target, windowFeatures);
     }
   }
-  _getSubmitUrl(args) {
+  _getSubmitUrl() {
+    let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let {
+        q
+      } = _ref,
+      args = _objectWithoutPropertiesLoose(_ref, _excluded);
     if (!this._linkFn) {
       throw new Error('useLink(fn) must be called before _getSubmitUrl()');
     }
-    return this._linkFn[0](args.q);
+    return this._linkFn[0](q, args);
   }
 }
 exports.UseLinkMixin = UseLinkMixin;

package/package.json

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

package/src/asset/svgs.js

@@ -15,6 +15,7 @@ const ICON_NAME = {
   SEARCH: 'search',
   TRIANGLE: 'triangle',
   TRIANGLE_EQ: 'triangle-eq',
+  CHEVRON: 'chevron',
   CHEVRON_NEGATIVE: 'chevron-negative',
 };
 
@@ -27,9 +28,11 @@ const ICON_TRIANGLE = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE}" viewBox="-5
 
 const ICON_TRIANGLE_EQ = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE_EQ}" viewBox="-100 -100 200 200"><path d="M12.99 -77.5A15 15,0,0,0,-12.99 -77.5L-73.61 27.5A15 15,0,0,0,-60.62 50L60.62 50A15 15,0,0,0,73.61 27.5L12.99 -77.5Z"/></symbol>`;
 
+const ICON_CHEVRON = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON}" viewBox="-100 -100 200 200"><path d="M10.61 -43.94A15 15,0,0,0,-10.61 -43.94L-60.61 6.06A15 15,0,0,0,-39.39 27.27L0 -12.12L39.39 27.27A15 15,0,0,0,60.61 6.06L10.61 -43.94Z"/></symbol>`;
+
 const ICON_CHEVRON_NEGATIVE = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON_NEGATIVE}" viewBox="-100 -100 200 200"><path d="M100 100V-200H-200V200H200ZM-10.61 -43.94A15 15,0,0,1,10.61 -43.94L60.61 6.06A15 15,0,0,1,39.39 27.27L0 -12.12L-39.39 27.27A15 15,0,0,1,-60.61 6.06L-10.61 -43.94Z"/></symbol>`;
 
-const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON_NEGATIVE];
+const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON, ICON_CHEVRON_NEGATIVE];
 
 const SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 
@@ -59,4 +62,5 @@ export const SEND = _icon(ICON_NAME.SEND);
 export const SEARCH = _icon(ICON_NAME.SEARCH);
 export const TRIANGLE = _icon(ICON_NAME.TRIANGLE);
 export const TRIANGLE_EQ = _icon(ICON_NAME.TRIANGLE_EQ);
+export const CHEVRON = _icon(ICON_NAME.CHEVRON);
 export const CHEVRON_NEGATIVE = _icon(ICON_NAME.CHEVRON_NEGATIVE);

package/src/layout/affiliation/affiliation.js

@@ -3,12 +3,13 @@ import { STATUS } from '../../constants.js';
 import CollectionLayout from '../list/collection.js';
 import { affiliation, helpers } from '../templates.js';
 import { TRIANGLE } from '../../asset/svgs.js';
+import { setOrRemoveAttribute } from '../../util/dom.js';
 
 const TYPE = 'affiliation';
 const DEFAULT_CLASSNAME = 'miso-affiliation';
 
 function root(layout, state) {
-  const { className, role, templates } = layout;
+  const { className, role, templates, options } = layout;
   const { status } = state;
   const roleAttr = role ? ` data-role="${role}"` : '';
   const data = state.value || {};
@@ -16,7 +17,8 @@ function root(layout, state) {
   const items = layout._getItems(state);
   const itemCount = items ? items.length : undefined;
   const itemCountAttr = itemCount !== undefined ? ` data-item-count="${itemCount}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemCountAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemTypeAttr}${itemCountAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
 }
 
 function ready(layout, state) {
@@ -256,12 +258,8 @@ export default class AffiliationLayout extends CollectionLayout {
     if (!element) {
       return;
     }
+    setOrRemoveAttribute(element, 'data-item-count', itemCount);
     this._displayedCount = itemCount;
-    if (itemCount === undefined) {
-      element.removeAttribute('data-item-count');
-    } else {
-      element.setAttribute('data-item-count', itemCount);
-    }
   }
 
   _syncItemIndex() {

package/src/layout/index.js

@@ -6,6 +6,7 @@ export { default as CollectionLayout } from './list/collection.js';
 export { default as ListLayout } from './list/list.js';
 export { default as CardsLayout } from './list/cards.js';
 export { default as CarouselLayout } from './list/carousel.js';
+export { default as GalleryLayout } from './list/gallery.js';
 export { default as SearchBoxLayout } from './input/search-box.js';
 export { default as OptionListLayout } from './input/option-list.js';
 export { default as FeedbackLayout } from './radio/feedback.js';

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

@@ -2,6 +2,7 @@ import { escapeHtml } from '@miso.ai/commons';
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../mixin/trackable.js';
+import { addOrRemoveClass } from '../../util/dom.js';
 
 const TYPE = 'option-list';
 const DEFAULT_CLASSNAME = 'miso-option-list';
@@ -96,7 +97,7 @@ export default class OptionListLayout extends TemplateBasedLayout {
       return;
     }
     const optionValues = this._getItems(state) || [];
-    optionsElement.classList[optionValues.length === 0 ? 'add' : 'remove']('empty');
+    addOrRemoveClass(optionsElement, 'empty', optionValues.length === 0);
   }
 
   _getItems(state) {

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

@@ -4,6 +4,7 @@ import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
 import { imageBlock, productInfoBlock } from '../templates.js';
 import { getIcon } from '../../asset/svgs.js';
+import { addOrRemoveClass } from '../../util/dom.js';
 
 const TYPE = 'search-box';
 const DEFAULT_CLASSNAME = 'miso-search-box';
@@ -215,7 +216,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
 
     const items = context.trackItems(completions);
 
-    element.classList[items.length > 0 ? 'add' : 'remove']('nonempty');
+    addOrRemoveClass(element, 'nonempty', items.length > 0);
     autocompleteElement.setAttribute('data-status', status);
     autocompleteElement.innerHTML = this.templates.completions(this, items);
 

package/src/layout/list/carousel.js

@@ -1,6 +1,6 @@
 import CollectionLayout from './collection.js';
 import { makeSwipeable } from '../mixin/swipeable.js';
-import { CHEVRON_NEGATIVE } from '../../asset/svgs.js';
+import { CHEVRON, CHEVRON_NEGATIVE } from '../../asset/svgs.js';
 
 const TYPE = 'carousel';
 const DEFAULT_CLASSNAME = 'miso-carousel';
@@ -41,8 +41,8 @@ function control(layout, state, direction) {
   return `<div class="${className}__control-${direction}" data-role="${direction}">${templates.controlIcon(layout, state, direction)}</div>`;
 }
 
-function controlIcon(layout, state, direction) {
-  return CHEVRON_NEGATIVE;
+function controlIcon(layout) {
+  return layout.options.itemType === 'image' ? CHEVRON_NEGATIVE : CHEVRON;
 }
 
 function indexIndicator(layout, state, values) {

package/src/layout/list/collection.js

@@ -5,10 +5,11 @@ import { makeTriggerable } from '../mixin/triggerable.js';
 import { product, article, image, question, productInfoBlock, articleInfoBlock, imageInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, priceBlock, discountRateText, ctaBlock, cta, imageBlock, indexBlock } from '../templates.js';
 
 function root(layout, state) {
-  const { className, role, templates } = layout;
+  const { className, role, templates, options } = layout;
   const { status } = state;
-  const roleAttr = role ? `data-role="${role}"` : '';
-  return `<div class="${className} ${status}" ${roleAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${itemTypeAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
 }
 
 function ready(layout, state) {
@@ -30,8 +31,9 @@ function body(layout, state, values) {
 function list(layout, state, values) {
   const { className, templates, options } = layout;
   const listTag = templates.ordered ? 'ol' : 'ul';
+  const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : ''; // backward compatible
   // TODO: support separator?
-  return `<${listTag} class="${className}__list" data-role="list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
+  return `<${listTag} class="${className}__list" data-role="list"${itemTypeAttr}>${templates.items(layout, state, values)}</${listTag}>`;
 }
 
 function items(layout, state, values, { offset = 0 } = {}) {

package/src/layout/list/gallery.js

@@ -0,0 +1,230 @@
+import { trimObj } from '@miso.ai/commons';
+import CollectionLayout from './collection.js';
+import { addOrRemoveClass, resolveCssLength, cssAspectRatio } from '../../util/dom.js';
+
+function calculateItemSizes(itemCount, columnCount) {
+  const totalSpaces = columnCount * 2;
+  let remainingSpaces = Math.max(totalSpaces - itemCount, 0);
+
+  let small = itemCount;
+  // turning a small block into a large block takes 3 extra spaces
+  const large = Math.min(Math.floor(remainingSpaces / 3), small);
+  small -= large;
+  remainingSpaces -= large * 3;
+  // turning a small block into a medium block takes 1 extra space
+  const medium = Math.min(remainingSpaces, small);
+  small -= medium;
+  remainingSpaces -= medium;
+
+  return [large, medium, small];
+}
+
+function item(layout, state, value, index) {
+  const { className, templates, options } = layout;
+  const { itemType } = options;
+  const body = templates[itemType](layout, state, value, { index });
+  const sizeClass = value._size ? ` ${className}__item-${value._size}` : '';
+  return `<li class="${className}__item${sizeClass}">${body}</li>`;
+}
+
+const DEFAULT_HEIGHT = '16rem';
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  ...CollectionLayout.defaultTemplates,
+  item,
+});
+
+const TYPE = 'gallery';
+const DEFAULT_CLASSNAME = 'miso-gallery';
+
+export default class GalleryLayout extends CollectionLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({
+      className,
+      templates: { ...DEFAULT_TEMPLATES, ...templates },
+      ...options,
+    });
+    this._galleryContext = {
+      itemAspectRatio: undefined,
+      itemCount: undefined,
+      columnCount: undefined,
+    };
+  }
+
+  syncSize() {
+    const { element } = this._view;
+    const listElement = element && this._getListElement(element);
+    if (!listElement) {
+      return;
+    }
+    this._syncListAspectRatio(listElement);
+    this._syncItemSizes(listElement);
+  }
+
+  _preprocess({ state, rendered }) {
+    const incremental = this._shallRenderIncrementally(state, rendered);
+    const bodyHtml = incremental ? undefined : this._bodyHtml(state);
+    const itemsHtml = this._itemsHtml(state, rendered);
+    return {
+      ...state,
+      ...trimObj({
+        incremental,
+        bodyHtml,
+        itemsHtml,
+      }),
+    };
+  }
+
+  _bodyHtml(state) {
+    return this.templates.root(this, { ...state, value: [] });
+  }
+
+  _itemsHtml(state, rendered) {
+    const offset = (rendered && rendered.value && rendered.value.length) || 0;
+    const values = (this._getItems(state) || []).slice(offset);
+    return values.length > 0 ? this.templates.items(this, state, values, { offset }) : '';
+  }
+
+  _render(element, states, controls) {
+    this._syncItemCount(states);
+    this._syncCssVariables();
+    const listElement = this._renderListElement(element, states, controls);
+    if (!listElement) {
+      return;
+    }
+    this._syncListAspectRatio(listElement);
+    this._renderItems(listElement, states, controls);
+  }
+
+  _renderListElement(element, { state }) {
+    const { incremental, bodyHtml } = state;
+    if (!incremental) {
+      element.innerHTML = bodyHtml;
+    }
+    return this._getListElement(element);
+  }
+
+  _renderItems(listElement, states) {
+    if (states.state.incremental) {
+      this._appendItems(listElement, states);
+    } else {
+      this._updateItems(listElement, states);
+    }
+  }
+
+  _updateItems(listElement, { state }) {
+    const { itemSizes } = this._galleryContext;
+    const values = this._writeItemSizes(this._getItems(state), itemSizes);
+    listElement.innerHTML = this.templates.items(this, state, values);
+  }
+
+  _appendItems(listElement, { state }) {
+    const { itemSizes } = this._galleryContext;
+    // update existing items
+    this._syncItemSizes(listElement);
+    // append new items
+    const offset = listElement.children.length;
+    const values = this._writeItemSizes(this._getItems(state).slice(offset), itemSizes, offset);
+    listElement.insertAdjacentHTML('beforeend', this.templates.items(this, state, values, { offset }));
+  }
+
+  _writeItemSizes(values = [], [large = 0, medium = 0] = [], offset = 0) {
+    let omitted = 0;
+    if (offset > 0) {
+      omitted = Math.min(offset, large);
+      offset -= omitted;
+      large -= omitted;
+    }
+    if (offset > 0) {
+      omitted = Math.min(offset, medium);
+      offset -= omitted;
+      medium -= omitted;
+    }
+    const results = [];
+    for (const value of values) {
+      let _size = 'small';
+      if (large > 0) {
+        _size = 'large';
+        large--;
+      } else if (medium > 0) {
+        _size = 'medium';
+        medium--;
+      }
+      results.push({ ...value, _size });
+    }
+    return results;
+  }
+
+  _syncCssVariables() {
+    const context = this._galleryContext;
+    let { itemAspectRatio = 1, height = DEFAULT_HEIGHT } = this.options;
+    itemAspectRatio = context.itemAspectRatio = cssAspectRatio(itemAspectRatio);
+    const { element } = this._view;
+    if (!element) {
+      return;
+    }
+    // TODO: skip if equal to default values
+    element.style.setProperty('--miso-gallery-height', `${height}`);
+    element.style.setProperty('--miso-gallery-item-1x1-aspect-ratio', `${itemAspectRatio}`);
+    element.style.setProperty('--miso-gallery-item-1x2-aspect-ratio', `${itemAspectRatio.scaleBy([1, 2])}`);
+  }
+
+  _syncListAspectRatio(listElement) {
+    const context = this._galleryContext;
+    const { itemCount, itemAspectRatio } = context;
+    const { height = DEFAULT_HEIGHT } = this.options;
+    const resolvedHeight = resolveCssLength(height);
+    const width = listElement.clientWidth;
+    if (width === 0) {
+      context.columnCount = undefined;
+      context.itemSizes = undefined;
+      return; // probably not visible yet
+    }
+    const columnCount = context.columnCount = Math.round((width * itemAspectRatio.width * 2) / (resolvedHeight * itemAspectRatio.height));
+    context.itemSizes = calculateItemSizes(itemCount, columnCount);
+
+    // update DOM
+    listElement.style.aspectRatio = `${columnCount} / 2`;
+    listElement.style.height = 'auto';
+  }
+
+  _syncItemCount({ state } = {}) {
+    const items = this._getItems(state);
+    this._galleryContext.itemCount = items ? items.length : undefined;
+  }
+
+  _syncItemSizes(listElement) {
+    const { itemSizes = [] } = this._galleryContext;
+    let [large = 0, medium = 0] = itemSizes;
+    const { className } = this;
+
+    // update DOM
+    for (const itemElement of listElement.children) {
+      let lg = false, md = false;
+      if (large > 0) {
+        lg = true;
+        large--;
+      } else if (medium > 0) {
+        md = true;
+        medium--;
+      }
+      addOrRemoveClass(itemElement, `${className}__item-large`, lg);
+      addOrRemoveClass(itemElement, `${className}__item-medium`, md);
+      addOrRemoveClass(itemElement, `${className}__item-small`, !lg && !md);
+    }
+  }
+
+}

package/src/layout/mixin/swipeable.js

@@ -1,4 +1,5 @@
 import { mixin, requestAnimationFrame as raf } from '@miso.ai/commons';
+import { setOrRemoveAttribute, addOrRemoveClass } from '../../util/dom.js';
 
 export function makeSwipeable(prototype) {
   mixin(prototype, SwipeableMixin.prototype);
@@ -33,7 +34,7 @@ export class SwipeableMixin {
       index = 0;
     }
     context.itemIndex = index;
-    raf(() => this._syncSwipeableItemIndex());
+    raf(() => this._syncDisplayedSwipeableItemIndex());
   }
 
   next() {
@@ -52,7 +53,8 @@ export class SwipeableMixin {
 
   _renderSwipeable(element, states, controls) {
     this._syncSwipeableItemCount(states);
-    this._syncSwipeableItemIndex();
+    this._syncDisplayedSwipeableItemCount();
+    this._syncDisplayedSwipeableItemIndex();
   }
 
   _afterRenderSwipeable() {
@@ -74,8 +76,6 @@ export class SwipeableMixin {
     } else if (oldItemCount === undefined) {
       context.itemIndex = 0;
     }
-
-    this._syncDisplayedSwipeableItemCount();
   }
 
   _syncDisplayedSwipeableItemCount() {
@@ -89,24 +89,20 @@ export class SwipeableMixin {
     if (!element) {
       return;
     }
+    setOrRemoveAttribute(element, 'data-item-count', itemCount);
     context.displayedCount = itemCount;
-    if (itemCount === undefined) {
-      element.removeAttribute('data-item-count');
-    } else {
-      element.setAttribute('data-item-count', itemCount);
-    }
   }
 
-  _syncSwipeableItemIndex() {
+  _syncDisplayedSwipeableItemIndex() {
     const context = this._swipeableContext;
-    const index = context.itemIndex;
-    if (index === context.displayedIndex) {
+    const { itemIndex } = context;
+    if (itemIndex === context.displayedIndex) {
       return;
     }
-    context.displayedIndex = index;
+    context.displayedIndex = itemIndex;
 
-    this._syncSwipeableListIndex(index);
-    this._syncSwipeableIndicatorIndex(index);
+    this._syncSwipeableListIndex(itemIndex);
+    this._syncSwipeableIndicatorIndex(itemIndex);
   }
 
   _syncSwipeableListIndex(index) {
@@ -126,7 +122,7 @@ export class SwipeableMixin {
     }
     let i = 0;
     for (const item of indicatorElement.children) {
-      item.classList[ i === index ? 'add' : 'remove' ]('active');
+      addOrRemoveClass(item, 'active', i === index);
       i++;
     }
   }

package/src/layout/raf.js

@@ -89,6 +89,7 @@ export default class RafLayout {
 
     notifyUpdate && notifyUpdate(...argsForNotifyUpdate.value);
 
+    // TODO: should the signature be aligned with _render?
     this._afterRender(this._element, state);
   }
 

package/src/util/dom.js

@@ -0,0 +1,103 @@
+export function setOrRemoveAttribute(element, name, value) {
+  if (value === undefined) {
+    element.removeAttribute(name);
+  } else {
+    element.setAttribute(name, value);
+  }
+}
+
+export function addOrRemoveClass(element, name, add) {
+  if (add) {
+    element.classList.add(name);
+  } else {
+    element.classList.remove(name);
+  }
+}
+
+export function resolveCssLength(str) {
+  if (typeof str === 'number') {
+    return str;
+  }
+  const [value, unit] = parseLength(str);
+  switch (unit) {
+    case '':
+    case 'px':
+      return value;
+    case 'rem':
+      return remToPx(value);
+    default:
+      throw new Error(`Unsupported unit: ${unit}`);
+  }
+}
+
+function parseLength(str) {
+  const match = str.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z]*)$/);
+  if (!match) {
+    throw new Error(`Invalid length: ${str}`);
+  }
+  const value = parseFloat(match[1]);
+  const unit = match[2] || '';
+  return [value, unit];
+}
+
+function remToPx(value = 1) {
+  return value * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}
+
+export function cssAspectRatio(value) {
+  return (value === undefined || value instanceof CssAspectRatio) ? value : new CssAspectRatio(value);
+}
+
+class CssAspectRatio {
+
+  constructor(value) {
+    this._width = NaN;
+    this._height = NaN;
+    switch (typeof value) {
+      case 'number':
+        this._width = value;
+        this._height = 1;
+        break;
+      case 'object':
+        if (Array.isArray(value)) {
+          this._width = parseFloat(value[0]);
+          this._height = parseFloat(value[1]);
+        }
+        break;
+      case 'string':
+        const i = value.indexOf('/');
+        if (i < 0) {
+          this._width = parseFloat(value);
+          this._height = 1;
+        } else {
+          this._width = parseFloat(value.slice(0, i).trim());
+          this._height = parseFloat(value.slice(i + 1).trim());
+        }
+        break;
+    }
+    if (this._width === NaN || this._height === NaN) {
+      throw new Error(`Invalid aspect ratio value: ${value}`);
+    }
+  }
+
+  get width() {
+    return this._width;
+  }
+
+  get height() {
+    return this._height;
+  }
+
+  get floatValue() {
+    return this._width / this._height;
+  }
+
+  scaleBy(factor) {
+    factor = cssAspectRatio(factor);
+    return cssAspectRatio([factor._width * this._width, factor._height * this._height]);
+  }
+
+  toString() {
+    return this._height === 1 ? `${this._width}` : `${this._width} / ${this._height}`;
+  }
+}

package/src/version.js

@@ -1 +1 @@
-export default '1.11.5-beta.1';
+export default '1.11.5-beta.3';

package/src/workflow/answer-based.js

@@ -2,7 +2,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 { SearchBoxLayout, TextLayout, ListLayout, CarouselLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
+import { SearchBoxLayout, TextLayout, ListLayout, CarouselLayout, GalleryLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
 import { processData as processAffiliationData } from '../affiliation/index.js';
 import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 import { writeAnswerStageToMeta, mergeInteraction } from './processors.js';
@@ -35,7 +35,7 @@ const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.QUESTION]: [TextLayout.type, { tag: 'h2' }],
   [ROLE.ANSWER]: TypewriterLayout.type,
   [ROLE.FEEDBACK]: FeedbackLayout.type,
-  [ROLE.IMAGES]: [CarouselLayout.type, { incremental: true, itemType: 'image' }],
+  [ROLE.IMAGES]: [GalleryLayout.type, { incremental: true, itemType: 'image' }],
   [ROLE.SOURCES]: [ListLayout.type, { incremental: true, itemType: 'article', templates: { ordered: true } }],
   [ROLE.AFFILIATION]: [AffiliationLayout.type, { incremental: true, itemType: 'affiliation', link: { rel: 'noopener nofollow' } }],
 });

package/src/workflow/explore.js

@@ -121,7 +121,7 @@ export default class Explore extends Workflow {
       return data;
     }
     const linkFn = this._linkFn && this._linkFn[0];
-    const related_questions = value.related_questions.map(linkFn ? (text => ({ text, url: this._getSubmitUrl({ q: text }, { generated: true }) })) : (text => ({ text })));
+    const related_questions = value.related_questions.map(linkFn ? (text => ({ text, url: this._getSubmitUrl({ q: text, generated: true }) })) : (text => ({ text })));
     return {
       ...data,
       value: {
@@ -143,12 +143,12 @@ export default class Explore extends Workflow {
   }
 
   _query(args) {
-    this._submitToPage(args);
+    this._submitToPage({ ...args, generated: false });
   }
 
-  _getSubmitUrl(args, { generated = false } = {}) {
+  _getSubmitUrl(args) {
     let url = UseLinkMixin.prototype._getSubmitUrl.call(this, args);
-    if (!generated || !this._productId) {
+    if (!args.generated || !this._productId) {
       return url;
     }
     return `${url}&qs=${encodeURIComponent(this._productId)}`;

package/src/workflow/use-link.js

@@ -30,11 +30,11 @@ export class UseLinkMixin {
     }
   }
 
-  _getSubmitUrl(args) {
+  _getSubmitUrl({ q, ...args } = {}) {
     if (!this._linkFn) {
       throw new Error('useLink(fn) must be called before _getSubmitUrl()');
     }
-    return this._linkFn[0](args.q);
+    return this._linkFn[0](q, args);
   }
 
 }