@miso.ai/client-sdk-ui 1.11.5-beta.0 → 1.11.5-beta.10

package/dist/cjs/workflow/processors.js

@@ -12,9 +12,13 @@ exports.retainFacetCountsInData = retainFacetCountsInData;
 exports.writeAffiliationInfoToInteraction = writeAffiliationInfoToInteraction;
 exports.writeAnswerStageToMeta = writeAnswerStageToMeta;
 exports.writeDataStatus = writeDataStatus;
+exports.writeEventTargetToInteraction = writeEventTargetToInteraction;
 exports.writeExhaustionToData = writeExhaustionToData;
 exports.writeKeywordsToData = writeKeywordsToData;
+exports.writeMisoIdFromSession = writeMisoIdFromSession;
 exports.writeMisoIdToMeta = writeMisoIdToMeta;
+exports.writeMisoIdToSession = writeMisoIdToSession;
+exports.writeUnanswerableToMeta = writeUnanswerableToMeta;
 var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
 var _index = require("../actor/index.js");
@@ -97,6 +101,44 @@ function writeMisoIdToMeta(data) {
     })
   });
 }
+function writeMisoIdToSession(data) {
+  const {
+    session,
+    value
+  } = data;
+  if (!session || !value) {
+    return;
+  }
+  const {
+    miso_id
+  } = value;
+  if (!miso_id) {
+    return;
+  }
+  session.meta.miso_id = miso_id;
+}
+function writeMisoIdFromSession(data) {
+  const {
+    session,
+    value
+  } = data;
+  if (!session || !value) {
+    return data;
+  }
+  const {
+    meta: {
+      miso_id
+    } = {}
+  } = session;
+  if (!miso_id) {
+    return data;
+  }
+  return Object.assign({}, data, {
+    meta: Object.assign({}, data.meta, {
+      miso_id
+    })
+  });
+}
 function writeKeywordsToData(data) {
   const {
     request,
@@ -282,6 +324,21 @@ function writeAffiliationInfoToInteraction(payload, args) {
     }
   });
 }
+function writeEventTargetToInteraction(payload) {
+  let {
+    event_target
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!event_target) {
+    return payload;
+  }
+  return mergeInteraction(payload, {
+    context: {
+      custom_context: {
+        event_target
+      }
+    }
+  });
+}
 function mergeInteraction() {
   let base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let patch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -290,4 +347,20 @@ function mergeInteraction() {
       custom_context: (0, _commons.trimObj)(Object.assign({}, base.context && base.context.custom_context, patch.context && patch.context.custom_context))
     }))
   }));
+}
+function writeUnanswerableToMeta(data) {
+  const {
+    value
+  } = data;
+  if (!value) {
+    return data;
+  }
+  if (!value.finished || value.finish_reason !== 'success' || value.sources && value.sources.length > 0) {
+    return data;
+  }
+  return Object.assign({}, data, {
+    meta: Object.assign({}, data.meta, {
+      unanswerable: true
+    })
+  });
 }

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

@@ -80,6 +80,10 @@ class SearchBasedWorkflow extends _base.default {
   }
 
   // query //
+  autoQuery() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _index3.autoQuery.call(this, options);
+  }
   query(args) {
     if (!args.q) {
       throw new Error(`q is required in query() call`);

package/dist/cjs/workflow/search.js

@@ -49,31 +49,6 @@ class Search extends _searchBased.default {
     super._initProperties(args);
     this._initAutocomplete(args);
   }
-  autoQuery() {
-    let {
-      setValue = true,
-      focus = true,
-      param = 'q'
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    // TODO: align implementation with AnswerBasedWorkflow
-    const q = new URLSearchParams(window.location.search).get(param);
-    const {
-      layout
-    } = this._views.get(_constants.ROLE.QUERY);
-    if (layout) {
-      if (q && setValue) {
-        layout.value = q;
-      }
-      if (!q && focus) {
-        layout.focus();
-      }
-    }
-    if (q) {
-      this.query({
-        q
-      });
-    }
-  }
   notifyViewUpdate() {
     let role = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.ROLE.PRODUCTS;
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

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.0"
+    "@miso.ai/commons": "1.11.5-beta.10"
   },
-  "version": "1.11.5-beta.0"
+  "version": "1.11.5-beta.10"
 }

package/src/actor/data.js

@@ -22,11 +22,12 @@ export default class DataActor {
   }
 
   _handleSession(session) {
-    // protocol: inactive -> no reaction
+    // this is mandatory in any case
+    /*
     if (!this.active) {
       return;
     }
-
+    */
     // abort ongoing data fetch if any
     if (!this._session || (session.index !== this._session.index)) {
       // new session, abort preview data fetch if necessary
@@ -38,6 +39,7 @@ export default class DataActor {
     }
     this._session = session;
 
+    // TODO: move this to workflow
     // reflect session update
     this._emitResponse({ session });
   }

package/src/actor/view.js

@@ -185,13 +185,14 @@ export default class ViewActor {
     }
     // iterate over all member components' roles
     for (const { role } of element.components) {
-      // not a data role -> nonempty
+      // not a data role -> irrelevant
       if (!isDataRole(role)) {
-        return false;
+        continue;
       }
       let sliced = value && value[role];
       if (role === ROLE.QUERY_SUGGESTIONS) {
         // special case: query suggestions -> look up value from hub
+        // TODO: adhoc
         const data = this.hub.states[fields.suggestions()];
         sliced = data && data.value;
       }

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/constants.js

@@ -105,6 +105,7 @@ export const STATUS = Object.freeze({
   DONE: 'done',
   EMPTY: 'empty',
   NONEMPTY: 'nonempty',
+  UNANSWERABLE: 'unanswerable',
 });
 
 export function validateEventType(value) {

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

@@ -9,12 +9,13 @@ const TOGGLE_BUTTON_SELECTOR = '[data-role="answer-box-toggle"]';
 
 export default class AnswerBox {
 
-  constructor(client, element, { classPrefix = CLASS_PREFIX, phrases = {} } = {}) {
+  constructor(client, element, { classPrefix = CLASS_PREFIX, phrases = {}, hideWhenUnanswerable = true } = {}) {
     this._client = client;
     this._workflow = client.ui.hybridSearch;
     this._element = element;
     this._classPrefix = classPrefix;
     this._phrases = phrases;
+    this._hideWhenUnanswerable = hideWhenUnanswerable;
     this._init();
   }
 
@@ -58,10 +59,16 @@ export default class AnswerBox {
 
   _syncWofkflowStatus() {
     const { status } = this._workflow._answer;
+    const { meta: { unanswerable = false } = {} } = this._workflow._answer._hub.states[fields.data()];
+
     switch (status) {
       case STATUS.ERRONEOUS:
       case STATUS.READY:
-        this.show();
+        if (unanswerable && this._hideWhenUnanswerable) {
+          this.hide();
+        } else {
+          this.show();
+        }
         break;
       default:
         this.hide();

package/src/defaults/hybrid-search/controls.js

@@ -1,11 +1,11 @@
 import AnswerBox from './answer-box.js';
 
-export function wireAnswerBox(client, element) {
+export function wireAnswerBox(client, element, options = {}) {
   if (!client) {
     throw new Error('client is required');
   }
   if (!element) {
     return;
   }
-  new AnswerBox(client, element);
+  new AnswerBox(client, element, options);
 }

package/src/defaults/hybrid-search/templates.js

@@ -9,6 +9,15 @@ class Sections extends _Sections {
     super({ helpers });
   }
 
+  answer(options) {
+    const { container } = this._helpers;
+    return container(options, { name: 'answer', visibleWhen: 'ready !unanswerable' }, [
+      ...this.question(options),
+      '<miso-answer></miso-answer>',
+      '<miso-feedback></miso-feedback>',
+    ]);
+  }
+
   answerBox(options) {
     const { element } = this._helpers;
     const { classPrefix } = options;

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/container/container.js

@@ -60,11 +60,14 @@ export default class ContainerLayout extends RafLayout {
     if (!element) {
       return;
     }
-    const { status, ongoing, meta: { miso_id, empty = false } = {} } = state;
+    const { status, ongoing, meta: { miso_id, empty = false, unanswerable = false } = {} } = state;
     const statuses = [status, empty ? STATUS.EMPTY : STATUS.NONEMPTY];
     if (status === STATUS.READY) {
       statuses.push(ongoing ? STATUS.ONGOING : STATUS.DONE);
     }
+    if (unanswerable) {
+      statuses.push(STATUS.UNANSWERABLE);
+    }
     element.setAttribute('status', statuses.join(' '));
     if (miso_id) {
       element.setAttribute('miso-id', miso_id);

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 } = {}) {