@miso.ai/client-sdk-ui 1.11.6 → 1.12.0-beta.0

package/dist/cjs/defaults/hybrid-search/templates.js

@@ -91,7 +91,7 @@ class Sections extends _templates.Sections {
     } = options;
     return element('div', {
       classes: [`${classPrefix}__search-results-filters`]
-    }, ['<miso-facets></miso-facets>']);
+    }, ['<miso-facets></miso-facets>', '<miso-sort></miso-sort>']);
   }
   keywords(options) {
     const {
@@ -147,7 +147,7 @@ function root(options = {}) {
     searchResultsGroup
   } = sections;
   const {
-    answerBox: answerBoxOptions = true
+    answerBox: answerBoxOptions = false
   } = options;
   return [section(options, {
     name: 'question'

package/dist/cjs/layout/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "GalleryLayout", {
     return _gallery.default;
   }
 });
+Object.defineProperty(exports, "HorizontalLayout", {
+  enumerable: true,
+  get: function () {
+    return _horizontal.default;
+  }
+});
 Object.defineProperty(exports, "ListLayout", {
   enumerable: true,
   get: function () {
@@ -117,6 +123,7 @@ var _error = _interopRequireDefault(require("./error/error.js"));
 var _banner = _interopRequireDefault(require("./banner/banner.js"));
 var _collection = _interopRequireDefault(require("./list/collection.js"));
 var _list = _interopRequireDefault(require("./list/list.js"));
+var _horizontal = _interopRequireDefault(require("./list/horizontal.js"));
 var _cards = _interopRequireDefault(require("./list/cards.js"));
 var _carousel = _interopRequireDefault(require("./list/carousel.js"));
 var _gallery = _interopRequireDefault(require("./list/gallery.js"));

package/dist/cjs/layout/list/collection.js

@@ -92,6 +92,7 @@ function loading() {
 const DEFAULT_TEMPLATES = Object.freeze({
   product: _templates.product,
   article: _templates.article,
+  compactArticle: _templates.compactArticle,
   image: _templates.image,
   question: _templates.question,
   root,
@@ -104,11 +105,14 @@ const DEFAULT_TEMPLATES = Object.freeze({
   item,
   productInfoBlock: _templates.productInfoBlock,
   articleInfoBlock: _templates.articleInfoBlock,
+  compactArticleInfoBlock: _templates.compactArticleInfoBlock,
   imageInfoBlock: _templates.imageInfoBlock,
   brandBlock: _templates.brandBlock,
   titleBlock: _templates.titleBlock,
   descriptionBlock: _templates.descriptionBlock,
   dateBlock: _templates.dateBlock,
+  authorsBlock: _templates.authorsBlock,
+  authorsAndDateBlock: _templates.authorsAndDateBlock,
   priceBlock: _templates.priceBlock,
   discountRateText: _templates.discountRateText,
   ctaBlock: _templates.ctaBlock,

package/dist/cjs/layout/list/horizontal.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _collection = _interopRequireDefault(require("./collection.js"));
+const _excluded = ["className"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+const TYPE = 'horizontal';
+const DEFAULT_CLASSNAME = 'miso-horizontal';
+class HorizontalLayout extends _collection.default {
+  static get type() {
+    return TYPE;
+  }
+  static get defaultTemplates() {
+    return super.defaultTemplates;
+  }
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+  constructor(_ref = {}) {
+    let {
+        className = DEFAULT_CLASSNAME
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+    super(Object.assign({
+      className
+    }, options));
+  }
+}
+exports.default = HorizontalLayout;

package/dist/cjs/layout/templates.js

@@ -7,7 +7,11 @@ exports.affiliation = affiliation;
 exports.affiliationInfoBlock = affiliationInfoBlock;
 exports.article = article;
 exports.articleInfoBlock = articleInfoBlock;
+exports.authorsAndDateBlock = authorsAndDateBlock;
+exports.authorsBlock = authorsBlock;
 exports.brandBlock = brandBlock;
+exports.compactArticle = compactArticle;
+exports.compactArticleInfoBlock = compactArticleInfoBlock;
 exports.cta = cta;
 exports.ctaBlock = ctaBlock;
 exports.dateBlock = dateBlock;
@@ -58,6 +62,13 @@ function article(layout, state, data, meta) {
   const [openTag, closeTag] = tagPair(layout, data);
   return [openTag, (templates.imageBlock || imageBlock)(layout, data, meta), (templates.infoBlock || templates.articleInfoBlock || articleInfoBlock)(layout, data, meta), (templates.indexBlock || indexBlock)(layout, data, meta), closeTag].join('');
 }
+function compactArticle(layout, state, data, meta) {
+  const {
+    templates
+  } = layout;
+  const [openTag, closeTag] = tagPair(layout, data);
+  return [openTag, (templates.indexBlock || indexBlock)(layout, data, meta), (templates.infoBlock || templates.articleInfoBlock || compactArticleInfoBlock)(layout, data, meta), closeTag].join('');
+}
 function image(layout, state, data, meta) {
   const {
     templates
@@ -97,6 +108,13 @@ function articleInfoBlock(layout, data, meta) {
   } = layout;
   return `<div class="${className}__item-info-container">${[(templates.titleBlock || titleBlock)(layout, data, meta), (templates.dateBlock || dateBlock)(layout, data, meta), (templates.descriptionBlock || descriptionBlock)(layout, data, meta), (templates.ctaBlock || ctaBlock)(layout, data, meta)].join('')}</div>`;
 }
+function compactArticleInfoBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__item-info-container">${[(templates.titleBlock || titleBlock)(layout, data, meta), (templates.authorsAndDateBlock || authorsAndDateBlock)(layout, data, meta)].join('')}</div>`;
+}
 function imageInfoBlock(layout, data, meta) {
   const {
     className,
@@ -144,6 +162,20 @@ function dateBlock({
   const date = published_at || created_at || updated_at;
   return date ? `<div class="${className}__item-date">${formatDate(date, templates.date)}</div>` : '';
 }
+function authorsBlock({
+  className
+}, {
+  authors
+}) {
+  return authors && Array.isArray(authors) && authors.length ? `<div class="${className}__item-authors">${authors.join(', ')}</div>` : '';
+}
+function authorsAndDateBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__item-authors-and-date-container">${[(templates.authorsBlock || authorsBlock)(layout, data, meta), (templates.dateBlock || dateBlock)(layout, data, meta)].join('')}</div>`;
+}
 function priceBlock(layout, data) {
   const {
     className,

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.6';
+var _default = exports.default = '1.12.0-beta.0';

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

@@ -11,6 +11,7 @@ var _searchBased = _interopRequireDefault(require("./search-based.js"));
 var _answerBased = _interopRequireDefault(require("./answer-based.js"));
 var _constants = require("../constants.js");
 var _index2 = require("../layout/index.js");
+var _templates = require("../layout/templates.js");
 var _hybridSearchAnswer = _interopRequireDefault(require("./hybrid-search-answer.js"));
 var _hybridSearchResults = _interopRequireDefault(require("./hybrid-search-results.js"));
 var _hybridSearchViews = _interopRequireDefault(require("./hybrid-search-views.js"));
@@ -20,7 +21,7 @@ const DEFAULT_API_OPTIONS = Object.freeze({
   group: _commons.API.GROUP.ASK,
   name: _commons.API.NAME.SEARCH,
   payload: Object.assign({}, _answerBased.default.DEFAULT_API_OPTIONS.payload, _searchBased.default.DEFAULT_API_OPTIONS.payload, {
-    source_fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at', 'title']
+    source_fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at', 'title', 'authors']
   })
 });
 const DEFAULT_LAYOUTS = Object.freeze(Object.assign({}, _answerBased.default.DEFAULT_LAYOUTS, _searchBased.default.DEFAULT_LAYOUTS, {
@@ -29,6 +30,15 @@ const DEFAULT_LAYOUTS = Object.freeze(Object.assign({}, _answerBased.default.DEF
   }],
   [_constants.ROLE.QUESTION]: [_index2.TextLayout.type, {
     raw: true
+  }],
+  [_constants.ROLE.SOURCES]: [_index2.HorizontalLayout.type, {
+    incremental: true,
+    itemType: 'article',
+    templates: {
+      ordered: true,
+      article: _templates.compactArticle,
+      articleInfoBlock: _templates.compactArticleInfoBlock
+    }
   }]
 }));
 const DEFAULT_TRACKERS = Object.freeze(Object.assign({}, _answerBased.default.DEFAULT_TRACKERS, _searchBased.default.DEFAULT_TRACKERS));
@@ -44,12 +54,25 @@ const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
     }
   }
 });
+const DEFAULT_FILTERS_OPTIONS = Object.freeze({
+  sort: {
+    options: [{
+      field: 'relevance',
+      text: 'Relevance',
+      default: true
+    }, {
+      field: 'published_at',
+      text: 'Date'
+    }]
+  }
+});
 const DEFAULT_OPTIONS = Object.freeze(Object.assign({}, _answerBased.default.DEFAULT_OPTIONS, _searchBased.default.DEFAULT_OPTIONS, {
   api: DEFAULT_API_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
   autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
-  pagination: DEFAULT_PAGINATION
+  pagination: DEFAULT_PAGINATION,
+  filters: DEFAULT_FILTERS_OPTIONS
 }));
 const ROLES_OPTIONS = Object.freeze({
   main: _constants.ROLE.PRODUCTS,

package/package.json

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

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

@@ -64,6 +64,7 @@ class Sections extends _Sections {
     const { classPrefix } = options;
     return element('div', { classes: [`${classPrefix}__search-results-filters`] }, [
       '<miso-facets></miso-facets>',
+      '<miso-sort></miso-sort>',
     ]);
   }
 
@@ -97,7 +98,7 @@ export function root(options = {}) {
   const { normalizeOptions, section, container } = helpers;
   options = normalizeOptions(options);
   const { answerBox, answerGroup, searchResultsGroup } = sections;
-  const { answerBox: answerBoxOptions = true } = options;
+  const { answerBox: answerBoxOptions = false } = options;
   return [
     section(options, { name: 'question' }, [
       container(options, { name: 'query' }, '<miso-query></miso-query>'),

package/src/layout/index.js

@@ -4,6 +4,7 @@ export { default as ErrorLayout } from './error/error.js';
 export { default as BannerLayout } from './banner/banner.js';
 export { default as CollectionLayout } from './list/collection.js';
 export { default as ListLayout } from './list/list.js';
+export { default as HorizontalLayout } from './list/horizontal.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';

package/src/layout/list/collection.js

@@ -2,7 +2,7 @@ import { STATUS } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../mixin/trackable.js';
 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';
+import { product, article, compactArticle, image, question, productInfoBlock, articleInfoBlock, compactArticleInfoBlock, imageInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, authorsBlock, authorsAndDateBlock, priceBlock, discountRateText, ctaBlock, cta, imageBlock, indexBlock } from '../templates.js';
 
 function root(layout, state) {
   const { className, role, templates, options } = layout;
@@ -63,6 +63,7 @@ function loading() {
 const DEFAULT_TEMPLATES = Object.freeze({
   product,
   article,
+  compactArticle,
   image,
   question,
   root,
@@ -75,11 +76,14 @@ const DEFAULT_TEMPLATES = Object.freeze({
   item,
   productInfoBlock,
   articleInfoBlock,
+  compactArticleInfoBlock,
   imageInfoBlock,
   brandBlock,
   titleBlock,
   descriptionBlock,
   dateBlock,
+  authorsBlock,
+  authorsAndDateBlock,
   priceBlock,
   discountRateText,
   ctaBlock,

package/src/layout/list/horizontal.js

@@ -0,0 +1,24 @@
+import CollectionLayout from './collection.js';
+
+const TYPE = 'horizontal';
+const DEFAULT_CLASSNAME = 'miso-horizontal';
+
+export default class HorizontalLayout extends CollectionLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultTemplates() {
+    return super.defaultTemplates;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, ...options } = {}) {
+    super({ className, ...options });
+  }
+
+}

package/src/layout/templates.js

@@ -42,6 +42,17 @@ export function article(layout, state, data, meta) {
   ].join('');
 }
 
+export function compactArticle(layout, state, data, meta) {
+  const { templates } = layout;
+  const [openTag, closeTag] = tagPair(layout, data);
+  return [
+    openTag,
+    (templates.indexBlock || indexBlock)(layout, data, meta),
+    (templates.infoBlock || templates.articleInfoBlock || compactArticleInfoBlock)(layout, data, meta),
+    closeTag,
+  ].join('');
+}
+
 export function image(layout, state, data, meta) {
   const { templates } = layout;
   const [openTag, closeTag] = tagPair(layout, data);
@@ -93,6 +104,14 @@ export function articleInfoBlock(layout, data, meta) {
   ].join('')}</div>`;
 }
 
+export function compactArticleInfoBlock(layout, data, meta) {
+  const { className, templates } = layout;
+  return `<div class="${className}__item-info-container">${[
+    (templates.titleBlock || titleBlock)(layout, data, meta),
+    (templates.authorsAndDateBlock || authorsAndDateBlock)(layout, data, meta),
+  ].join('')}</div>`;
+}
+
 export function imageInfoBlock(layout, data, meta) {
   const { className, templates } = layout;
   return `<div class="${className}__item-info-container">${[
@@ -122,6 +141,18 @@ export function dateBlock({ className, templates }, { created_at, updated_at, pu
   return date ? `<div class="${className}__item-date">${formatDate(date, templates.date)}</div>` : '';
 }
 
+export function authorsBlock({ className }, { authors }) {
+  return authors && Array.isArray(authors) && authors.length ? `<div class="${className}__item-authors">${authors.join(', ')}</div>` : '';
+}
+
+export function authorsAndDateBlock(layout, data, meta) {
+  const { className, templates } = layout;
+  return `<div class="${className}__item-authors-and-date-container">${[
+    (templates.authorsBlock || authorsBlock)(layout, data, meta),
+    (templates.dateBlock || dateBlock)(layout, data, meta),
+  ].join('')}</div>`;
+}
+
 export function priceBlock(layout, data) {
   const { className, templates } = layout;
   const { sale_price, original_price, currency = 'USD' } = data;

package/src/version.js

@@ -1 +1 @@
-export default '1.11.6';
+export default '1.12.0-beta.0';

package/src/workflow/hybrid-search.js

@@ -4,7 +4,8 @@ import Workflow from './base.js';
 import SearchBasedWorkflow from './search-based.js';
 import AnswerBasedWorkflow from './answer-based.js';
 import { ROLE, WORKFLOW_CONFIGURABLE } from '../constants.js';
-import { SearchBoxLayout, TextLayout } from '../layout/index.js';
+import { SearchBoxLayout, TextLayout, HorizontalLayout } from '../layout/index.js';
+import { compactArticle, compactArticleInfoBlock } from '../layout/templates.js';
 import HybridSearchAnswer from './hybrid-search-answer.js';
 import HybridSearchResults from './hybrid-search-results.js';
 import HybridSearchViewsActor from './hybrid-search-views.js';
@@ -16,7 +17,7 @@ const DEFAULT_API_OPTIONS = Object.freeze({
   payload: {
     ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS.payload,
     ...SearchBasedWorkflow.DEFAULT_API_OPTIONS.payload,
-    source_fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at', 'title'],
+    source_fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at', 'title', 'authors'],
   },
 });
 
@@ -25,6 +26,18 @@ const DEFAULT_LAYOUTS = Object.freeze({
   ...SearchBasedWorkflow.DEFAULT_LAYOUTS,
   [ROLE.QUERY]: [SearchBoxLayout.type, { placeholder: '' }],
   [ROLE.QUESTION]: [TextLayout.type, { raw: true }],
+  [ROLE.SOURCES]: [
+    HorizontalLayout.type,
+    {
+      incremental: true,
+      itemType: 'article',
+      templates: {
+        ordered: true,
+        article: compactArticle,
+        articleInfoBlock: compactArticleInfoBlock
+      }
+    }
+  ],
 });
 
 const DEFAULT_TRACKERS = Object.freeze({
@@ -47,6 +60,15 @@ const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
   },
 });
 
+const DEFAULT_FILTERS_OPTIONS = Object.freeze({
+  sort: {
+    options: [
+      { field: 'relevance', text: 'Relevance', default: true },
+      { field: 'published_at', text: 'Date' },
+    ],
+  },
+});
+
 const DEFAULT_OPTIONS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_OPTIONS,
   ...SearchBasedWorkflow.DEFAULT_OPTIONS,
@@ -55,6 +77,7 @@ const DEFAULT_OPTIONS = Object.freeze({
   trackers: DEFAULT_TRACKERS,
   autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
   pagination: DEFAULT_PAGINATION,
+  filters: DEFAULT_FILTERS_OPTIONS,
 });
 
 const ROLES_OPTIONS = Object.freeze({