@athoscommerce/snap-preact 1.2.3-beta.3 → 1.2.3-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map +1 -1
  2. package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js +5 -2
  3. package/dist/cjs/components/src/components/Organisms/Chat/Chat.d.ts +1 -0
  4. package/dist/cjs/components/src/components/Organisms/Chat/Chat.d.ts.map +1 -1
  5. package/dist/cjs/components/src/components/Organisms/Chat/Chat.js +118 -37
  6. package/dist/cjs/components/src/components/Organisms/Chat/ChatResult.d.ts.map +1 -1
  7. package/dist/cjs/components/src/components/Organisms/Chat/ChatResult.js +9 -0
  8. package/dist/cjs/components/src/components/Organisms/Chat/MessageUser.d.ts.map +1 -1
  9. package/dist/cjs/components/src/components/Organisms/Chat/MessageUser.js +1 -2
  10. package/dist/cjs/components/src/components/Organisms/Chat/ResultsDisplay.d.ts.map +1 -1
  11. package/dist/cjs/components/src/components/Organisms/Chat/ResultsDisplay.js +10 -5
  12. package/dist/cjs/components/src/components/Organisms/Facet/Facet.js +2 -1
  13. package/dist/cjs/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.js +2 -1
  14. package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map +1 -1
  15. package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js +5 -2
  16. package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts +1 -0
  17. package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts.map +1 -1
  18. package/dist/esm/components/src/components/Organisms/Chat/Chat.js +104 -25
  19. package/dist/esm/components/src/components/Organisms/Chat/ChatResult.d.ts.map +1 -1
  20. package/dist/esm/components/src/components/Organisms/Chat/ChatResult.js +9 -0
  21. package/dist/esm/components/src/components/Organisms/Chat/MessageUser.d.ts.map +1 -1
  22. package/dist/esm/components/src/components/Organisms/Chat/MessageUser.js +1 -2
  23. package/dist/esm/components/src/components/Organisms/Chat/ResultsDisplay.d.ts.map +1 -1
  24. package/dist/esm/components/src/components/Organisms/Chat/ResultsDisplay.js +10 -5
  25. package/dist/esm/components/src/components/Organisms/Facet/Facet.js +1 -1
  26. package/dist/esm/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.js +1 -1
  27. package/package.json +12 -12
package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA+ZrE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CA0OvF,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG;IAC1C,QAAQ,EAAE,2BAA2B,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;CAC5C,GAAG,0CAA0C,GAC7C,cAAc,CAAC,4BAA4B,CAAC,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0CAA0C,GAAG;IACxD,QAAQ,EAAE,2BAA2B,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,2BAA2B;CAE3C"}
1
+ {"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAkarE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAkPvF,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG;IAC1C,QAAQ,EAAE,2BAA2B,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;CAC5C,GAAG,0CAA0C,GAC7C,cAAc,CAAC,4BAA4B,CAAC,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0CAA0C,GAAG;IACxD,QAAQ,EAAE,2BAA2B,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,2BAA2B;CAE3C"}
package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js CHANGED
@@ -94,6 +94,9 @@ var defaultStyles = function () {
94
94
  fontWeight: 'bold',
95
95
  fontSize: '1.1em',
96
96
  color: '#D4A843',
97
+ display: 'flex',
98
+ gap: '0.5em',
99
+ alignItems: 'center',
97
100
  },
98
101
  },
99
102
  '.ss__chat-product-query-message__header__product__actions': {
@@ -430,7 +433,7 @@ exports.ChatProductQueryMessage = (0, mobx_react_lite_1.observer)(function (prop
430
433
  (_a = controller === null || controller === void 0 ? void 0 : controller.store.currentChat) === null || _a === void 0 ? void 0 : _a.popProductQueryMessage(chatItem.sourceMessageId);
431
434
  controller === null || controller === void 0 ? void 0 : controller.store.clearProductQuickview();
432
435
  };
433
- return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__chat-product-query-message', className, internalClassName) }, styling, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header'), children: [cameFromInspiration && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__back'), onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "angle-left", size: "14px" }), (0, jsx_runtime_1.jsx)("span", { children: "Back to inspiration" })] })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product'), children: [displayedCore.imageUrl && ((0, jsx_runtime_1.jsx)(Image_1.Image, { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__image'), src: displayedCore.imageUrl, alt: displayedCore.name || '' })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details'), children: [displayedCore.name && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__name'), children: displayedCore.url ? ((0, jsx_runtime_1.jsx)("a", { href: displayedCore.url, onClick: function (e) { return controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, product); }, target: "_blank", rel: "noopener noreferrer", children: displayedCore.name })) : (displayedCore.name) })), displayedCore.brand && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), displayedCore.price != null && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__price'), children: (0, jsx_runtime_1.jsx)(__1.Price, { value: displayedCore.price }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions'), children: [displayedCore.url && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__go-to-product'), children: (0, jsx_runtime_1.jsx)("a", { href: displayedCore.url, onClick: function (e) { return controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, product); }, target: "_blank", rel: "noopener noreferrer", children: "Go to product" }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__add-to-cart'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { content: 'Add to Cart', onClick: function () {
436
+ return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__chat-product-query-message', className, internalClassName) }, styling, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header'), children: [cameFromInspiration && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__back'), onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "angle-left", size: "14px" }), (0, jsx_runtime_1.jsx)("span", { children: "Back to inspiration" })] })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product'), children: [displayedCore.imageUrl && ((0, jsx_runtime_1.jsx)(Image_1.Image, { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__image'), src: displayedCore.imageUrl, alt: displayedCore.name || '' })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details'), children: [displayedCore.name && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__name'), children: displayedCore.url ? ((0, jsx_runtime_1.jsx)("a", { href: displayedCore.url, onClick: function (e) { return controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, product); }, target: "_blank", rel: "noopener noreferrer", children: displayedCore.name })) : (displayedCore.name) })), displayedCore.brand && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), displayedCore.price != null && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__price'), children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(displayedCore.price) && ((0, jsx_runtime_1.jsx)(__1.Price, { value: displayedCore.msrp, lineThrough: true })), (0, jsx_runtime_1.jsx)(__1.Price, { value: displayedCore.price })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions'), children: [displayedCore.url && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__go-to-product'), children: (0, jsx_runtime_1.jsx)("a", { href: displayedCore.url, onClick: function (e) { return controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, product); }, target: "_blank", rel: "noopener noreferrer", children: "Go to product" }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__add-to-cart'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { content: 'Add to Cart', onClick: function () {
434
437
  controller === null || controller === void 0 ? void 0 : controller.track.product.addToCart(product);
435
438
  controller === null || controller === void 0 ? void 0 : controller.addToCart(product);
436
439
  } }) }), (controller === null || controller === void 0 ? void 0 : controller.store.features.similarProducts.enabled) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__show-similar'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { content: 'Show Similar', onClick: function () { return controller === null || controller === void 0 ? void 0 : controller.discussProduct(sourceProduct, { requestType: 'productSimilar' }); } }) }))] })] })] }), selections.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__variants'), children: selections.map(function (selection) { return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__variants__label'), children: [formatLabel(selection.field), " (", selection.values.length, ")"] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__variants__swatches'), children: selection.values.map(function (selectionValue) {
@@ -444,5 +447,5 @@ exports.ChatProductQueryMessage = (0, mobx_react_lite_1.observer)(function (prop
444
447
  }) })] }, selection.field)); }) })), infoRows.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__title'), children: "Product Information" }), (0, jsx_runtime_1.jsx)("table", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__table'), children: (0, jsx_runtime_1.jsx)("tbody", { children: infoRows.map(function (row) { return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: row.label }), (0, jsx_runtime_1.jsx)("td", { children: row.rawKey === 'availability' ? ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)({
445
448
  'ss__chat-product-query-message__section__table__availability--in-stock': row.value === 'In Stock',
446
449
  'ss__chat-product-query-message__section__table__availability--out-of-stock': row.value === 'Out of Stock',
447
- }), children: row.value === 'In Stock' ? "\u2713 ".concat(row.value) : row.value })) : row.rawKey.toLowerCase() === 'price' ? ((0, jsx_runtime_1.jsx)(__1.Price, { value: Number(row.value) })) : (row.value) })] }, row.key)); }) }) })] })), descriptionRow && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__title'), children: "Description" }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__description'), children: descriptionRow.value })] })), features.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__title'), children: "Features" }), (0, jsx_runtime_1.jsx)("ul", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__features'), children: features.map(function (feature, idx) { return ((0, jsx_runtime_1.jsx)("li", { children: feature }, idx)); }) })] }))] })) }));
450
+ }), children: row.value === 'In Stock' ? "\u2713 ".concat(row.value) : row.value })) : row.rawKey.toLowerCase() === 'price' ? ((0, jsx_runtime_1.jsxs)("span", { style: { display: 'flex', gap: '0.5em', alignItems: 'center', justifyContent: 'flex-end' }, children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(row.value) && ((0, jsx_runtime_1.jsx)(__1.Price, { value: Number(displayedCore.msrp), lineThrough: true })), (0, jsx_runtime_1.jsx)(__1.Price, { value: Number(row.value) })] })) : (row.value) })] }, row.key)); }) }) })] })), descriptionRow && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__title'), children: "Description" }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__description'), children: descriptionRow.value })] })), features.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__title'), children: "Features" }), (0, jsx_runtime_1.jsx)("ul", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__features'), children: features.map(function (feature, idx) { return ((0, jsx_runtime_1.jsx)("li", { children: feature }, idx)); }) })] }))] })) }));
448
451
  });
package/dist/cjs/components/src/components/Organisms/Chat/Chat.d.ts CHANGED
@@ -10,5 +10,6 @@ export interface ChatProps extends ComponentProps {
10
10
  subtitle?: string;
11
11
  offset?: string | number;
12
12
  multiselectFacets?: boolean;
13
+ disableBubbleSuggestedQuestions?: boolean;
13
14
  }
14
15
  //# sourceMappingURL=Chat.d.ts.map
package/dist/cjs/components/src/components/Organisms/Chat/Chat.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAwgCrE,eAAO,MAAM,IAAI,gBAAyB,SAAS,KAAG,GAAG,CAAC,OAAO;;CAwwC/D,CAAC;AAEH,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B"}
1
+ {"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAqhCrE,eAAO,MAAM,IAAI,gBAAyB,SAAS,KAAG,GAAG,CAAC,OAAO;;CAi1C/D,CAAC;AAEH,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+BAA+B,CAAC,EAAE,OAAO,CAAC;CAC1C"}
package/dist/cjs/components/src/components/Organisms/Chat/Chat.js CHANGED
@@ -428,7 +428,19 @@ var defaultStyles = function (_a) {
428
428
  borderBottomRightRadius: mobile ? 0 : '12px',
429
429
  borderBottomLeftRadius: mobile ? 0 : '12px',
430
430
  flexGrow: 1,
431
+ position: 'relative',
431
432
  '.ss__chat__content__header': {
433
+ // In overlay mode (only applied when messages overflow), the comparisons
434
+ // tray floats over the messages so toggling it doesn't shift the layout
435
+ // or push the latest message out of view. When messages don't overflow,
436
+ // the tray stays in flow so older messages remain reachable above it.
437
+ '&.ss__chat__content__header--overlay': {
438
+ position: 'absolute',
439
+ top: 0,
440
+ left: 0,
441
+ right: 0,
442
+ zIndex: 20,
443
+ },
432
444
  // '.ss__chat__attachments': {
433
445
  // '.ss__chat__attachment': {
434
446
  // borderRadius: 0,
@@ -541,6 +553,7 @@ var defaultStyles = function (_a) {
541
553
  },
542
554
  '.ss__chat__messages': {
543
555
  flex: '1 1 auto',
556
+ overflowY: 'auto',
544
557
  overscrollBehavior: 'contain',
545
558
  margin: 0,
546
559
  maxHeight: '100%',
@@ -600,7 +613,7 @@ var defaultStyles = function (_a) {
600
613
  '.ss__chat__welcome': {
601
614
  display: 'flex',
602
615
  flexDirection: 'column',
603
- height: '100%',
616
+ minHeight: '100%',
604
617
  '.ss__chat__welcome__message': {
605
618
  fontSize: '15px',
606
619
  lineHeight: 1.5,
@@ -1037,7 +1050,7 @@ var defaultStyles = function (_a) {
1037
1050
  });
1038
1051
  };
1039
1052
  exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1040
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
1053
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
1041
1054
  var globalTheme = (0, providers_1.useTheme)();
1042
1055
  var globalTreePath = (0, providers_1.useTreePath)();
1043
1056
  var isMobile = (0, __1.useMediaQuery)('(max-width: 767px)');
@@ -1047,9 +1060,10 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1047
1060
  title: 'Athos Conversational Assistant',
1048
1061
  subtitle: 'Ready to assist you',
1049
1062
  multiselectFacets: true,
1063
+ disableBubbleSuggestedQuestions: false,
1050
1064
  };
1051
1065
  var props = (0, utilities_1.mergeProps)('facets', globalTheme, defaultProps, properties);
1052
- var className = props.className, internalClassName = props.internalClassName, controller = props.controller, logo = props.logo, title = props.title, subtitle = props.subtitle, offset = props.offset, multiselectFacets = props.multiselectFacets;
1066
+ var className = props.className, internalClassName = props.internalClassName, controller = props.controller, logo = props.logo, title = props.title, subtitle = props.subtitle, offset = props.offset, multiselectFacets = props.multiselectFacets, disableBubbleSuggestedQuestions = props.disableBubbleSuggestedQuestions;
1053
1067
  var store = controller.store;
1054
1068
  var themeDefaults = {
1055
1069
  components: {},
@@ -1060,6 +1074,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1060
1074
  var fileInputRef = (0, hooks_1.useRef)(null);
1061
1075
  var messagesEndRef = (0, hooks_1.useRef)(null);
1062
1076
  var messagesContainerRef = (0, hooks_1.useRef)(null);
1077
+ var headerRef = (0, hooks_1.useRef)(null);
1063
1078
  var footerRef = (0, hooks_1.useRef)(null);
1064
1079
  // Swipe-to-dismiss state for mobile secondary panel
1065
1080
  var secondaryRef = (0, hooks_1.useRef)(null);
@@ -1067,19 +1082,26 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1067
1082
  var swipeStartTime = (0, hooks_1.useRef)(0);
1068
1083
  var swipeActive = (0, hooks_1.useRef)(false);
1069
1084
  var swipeOffsetRef = (0, hooks_1.useRef)(0);
1070
- var _x = (0, hooks_1.useState)(0), swipeOffset = _x[0], setSwipeOffsetRaw = _x[1];
1071
- var _y = (0, hooks_1.useState)(false), swipeAnimating = _y[0], setSwipeAnimating = _y[1];
1072
- var _z = (0, hooks_1.useState)(false), mobileProductInfoOpen = _z[0], setMobileProductInfoOpen = _z[1];
1073
- var _0 = (0, hooks_1.useState)(0), footerHeight = _0[0], setFooterHeight = _0[1];
1074
- var _1 = (0, hooks_1.useState)(false), showNewMessages = _1[0], setShowNewMessages = _1[1];
1085
+ var _y = (0, hooks_1.useState)(0), swipeOffset = _y[0], setSwipeOffsetRaw = _y[1];
1086
+ var _z = (0, hooks_1.useState)(false), swipeAnimating = _z[0], setSwipeAnimating = _z[1];
1087
+ var _0 = (0, hooks_1.useState)(false), mobileProductInfoOpen = _0[0], setMobileProductInfoOpen = _0[1];
1088
+ var _1 = (0, hooks_1.useState)(0), footerHeight = _1[0], setFooterHeight = _1[1];
1089
+ var _2 = (0, hooks_1.useState)(false), showNewMessages = _2[0], setShowNewMessages = _2[1];
1090
+ var _3 = (0, hooks_1.useState)(false), messagesOverflow = _3[0], setMessagesOverflow = _3[1];
1075
1091
  var isNearBottomRef = (0, hooks_1.useRef)(true);
1076
1092
  var updateSwipeOffset = function (value) {
1077
1093
  swipeOffsetRef.current = value;
1078
1094
  setSwipeOffsetRaw(value);
1079
1095
  };
1080
1096
  var scrollToBottom = function () {
1081
- var _a;
1082
- (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
1097
+ // Scroll the messages container directly (instead of scrollIntoView on the
1098
+ // bottom anchor) so the browser never walks up the ancestor chain. On small
1099
+ // viewports a smooth scrollIntoView could otherwise animate the document/
1100
+ // visual viewport and visually push the fixed-position chat off-screen.
1101
+ var container = messagesContainerRef.current;
1102
+ if (container) {
1103
+ container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
1104
+ }
1083
1105
  };
1084
1106
  // Conditional scroll: only scrolls if the user is already near the bottom.
1085
1107
  // Passed to child components (e.g. image onLoad) so they don't yank the user
@@ -1146,6 +1168,36 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1146
1168
  container.addEventListener('scroll', handleScroll);
1147
1169
  return function () { return container.removeEventListener('scroll', handleScroll); };
1148
1170
  }, [store.open]);
1171
+ // Track whether the messages container is overflowing so the comparisons header
1172
+ // can switch between in-flow (short conversations — top content stays reachable)
1173
+ // and overlay (overflowing — avoid layout shift when toggling the tray).
1174
+ // Hysteresis: when already in overlay, only return to in-flow if the content
1175
+ // would still fit *with* the header re-inserted — otherwise the two states
1176
+ // fight each other and the layout flickers.
1177
+ (0, hooks_1.useEffect)(function () {
1178
+ var container = messagesContainerRef.current;
1179
+ if (!container || typeof ResizeObserver === 'undefined')
1180
+ return;
1181
+ var update = function () {
1182
+ setMessagesOverflow(function (prev) {
1183
+ var _a;
1184
+ var headerHeight = ((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
1185
+ if (prev) {
1186
+ // Currently overlay: header isn't taking flow space. Only switch
1187
+ // back to in-flow if the content would fit with the header added.
1188
+ return container.scrollHeight > container.clientHeight - headerHeight + 1;
1189
+ }
1190
+ // Currently in-flow: header already takes space — straightforward check.
1191
+ return container.scrollHeight > container.clientHeight + 1;
1192
+ });
1193
+ };
1194
+ update();
1195
+ var observer = new ResizeObserver(update);
1196
+ observer.observe(container);
1197
+ if (headerRef.current)
1198
+ observer.observe(headerRef.current);
1199
+ return function () { return observer.disconnect(); };
1200
+ }, [store.open, visibleChatLength]);
1149
1201
  // Re-focus the chat input on desktop after a search completes.
1150
1202
  // The input is disabled while loading, which causes the browser to drop focus.
1151
1203
  // On mobile we intentionally skip this so the virtual keyboard dismisses.
@@ -1220,6 +1272,28 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1220
1272
  return text.length > 50 ? "".concat(text.slice(0, 50), "...") : text;
1221
1273
  })() }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__history__chat__button__date", children: chat.createdAt.toLocaleString() })] }) }, chat.id)); }) })) : null] })); };
1222
1274
  var FacetButton = function (props) { return (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: props.open ? 'angle-down' : 'angle-up', children: props.label }); };
1275
+ var getFacetButtonLabel = function (facet) {
1276
+ var _a;
1277
+ var applied = new Set();
1278
+ // Count values marked as filtered (already applied on the server)
1279
+ (facet.values || []).forEach(function (value) {
1280
+ var _a, _b;
1281
+ if (value === null || value === void 0 ? void 0 : value.filtered) {
1282
+ if ('low' in value && 'high' in value) {
1283
+ applied.add("".concat((_a = value.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = value.high) !== null && _b !== void 0 ? _b : '*'));
1284
+ }
1285
+ else {
1286
+ applied.add(value.value);
1287
+ }
1288
+ }
1289
+ });
1290
+ // Count pending facet attachments (newly selected, not yet sent)
1291
+ (((_a = controller.store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.items) || [])
1292
+ .filter(function (item) { return item.type === 'facet' && item.key === facet.field && (item.state === 'active' || item.state === 'attached'); })
1293
+ .forEach(function (item) { return applied.add(item.value); });
1294
+ var base = facet.label || facet.field;
1295
+ return applied.size > 0 ? "".concat(base, " (").concat(applied.size, ")") : base;
1296
+ };
1223
1297
  // TODO: if starting a new chat and it's expired, this button would then disappear
1224
1298
  if (!controller.store.chatEnabled) {
1225
1299
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
@@ -1310,7 +1384,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1310
1384
  'ss__chat--open': store.open,
1311
1385
  'ss__chat--minimized': !store.open,
1312
1386
  'ss__chat--mobile': isMobile,
1313
- }, className, internalClassName) }, styling, { children: [!store.open && !store.currentChat && ((_f = store.suggestedQuestions) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__suggested-questions", children: store.suggestedQuestions.map(function (question, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__suggested-questions__item", onClick: function () {
1387
+ }, className, internalClassName) }, styling, { children: [!disableBubbleSuggestedQuestions && !store.open && !store.currentChat && ((_f = store.suggestedQuestions) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__suggested-questions", children: store.suggestedQuestions.map(function (question, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__suggested-questions__item", onClick: function () {
1314
1388
  controller.openChat(question);
1315
1389
  }, children: question }, index)); }) })), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__bubble', onClick: function () { return controller.handlers.button.click(); }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "chat", title: "Open Chat" }) }), store.open && shouldShowSideChat && activeMessage ? ((0, jsx_runtime_1.jsxs)("div", { ref: secondaryRef, className: (0, classnames_1.default)('ss__chat__secondary'), style: isMobile
1316
1390
  ? {
@@ -1363,7 +1437,9 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1363
1437
  store.currentChat.save();
1364
1438
  }
1365
1439
  }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "close-thin", size: "14px" }) }))] })) : null;
1366
- })(), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__content__header", children: ((_j = store.currentChat) === null || _j === void 0 ? void 0 : _j.comparisons.compared) && store.currentChat.comparisons.compared.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__header', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__header__title', children: [(0, jsx_runtime_1.jsx)(__1.Icon, { className: 'ss__chat__content__header__comparisons__header__title__icon', icon: 'clipboard' }), (0, jsx_runtime_1.jsxs)("span", { className: 'ss__chat__content__header__comparisons__header__title__text', children: ["Compare Products (", (_k = store.currentChat) === null || _k === void 0 ? void 0 : _k.comparisons.compared.length, "/", (_l = store.currentChat) === null || _l === void 0 ? void 0 : _l.comparisons.maxItems, ")"] })] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__header__actions', children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () { var _a; return (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.reset(); }, children: "clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__content', children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__content__items', children: Array.from({ length: (_m = store.currentChat) === null || _m === void 0 ? void 0 : _m.comparisons.maxItems }).map(function (_, index) {
1440
+ })(), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content", children: [(0, jsx_runtime_1.jsx)("div", { ref: headerRef, className: (0, classnames_1.default)('ss__chat__content__header', {
1441
+ 'ss__chat__content__header--overlay': messagesOverflow,
1442
+ }), children: ((_j = store.currentChat) === null || _j === void 0 ? void 0 : _j.comparisons.compared) && store.currentChat.comparisons.compared.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__header', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__header__title', children: [(0, jsx_runtime_1.jsx)(__1.Icon, { className: 'ss__chat__content__header__comparisons__header__title__icon', icon: 'clipboard' }), (0, jsx_runtime_1.jsxs)("span", { className: 'ss__chat__content__header__comparisons__header__title__text', children: ["Compare Products (", (_k = store.currentChat) === null || _k === void 0 ? void 0 : _k.comparisons.compared.length, "/", (_l = store.currentChat) === null || _l === void 0 ? void 0 : _l.comparisons.maxItems, ")"] })] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__header__actions', children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () { var _a; return (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.reset(); }, children: "clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__content', children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__content__items', children: Array.from({ length: (_m = store.currentChat) === null || _m === void 0 ? void 0 : _m.comparisons.maxItems }).map(function (_, index) {
1367
1443
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
1368
1444
  var comparisonItem = (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.compared[index];
1369
1445
  return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__content__header__comparisons__content__comparison', {
@@ -1382,7 +1458,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1382
1458
  }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: 'close-thin', size: '12px' }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: 'plus-thin' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__content__comparison--placeholder__text', children: "Add" })] })) }, index));
1383
1459
  }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__content__header__comparisons__action', {
1384
1460
  'ss__chat__content__header__comparisons__action--hidden': (((_o = store.currentChat) === null || _o === void 0 ? void 0 : _o.comparisons.compared.length) || 0) < 2,
1385
- }), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () { return controller.search(); }, icon: { icon: 'compare', title: 'Compare' }, children: "Compare" }) })] })] })) }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__messages', ref: messagesContainerRef, style: visibleChatLength ? { overflowY: 'auto', scrollbarGutter: 'stable' } : undefined, children: [(!((_p = store.currentChat) === null || _p === void 0 ? void 0 : _p.chat) || store.currentChat.chat.length === 0) && store.welcomeMessage && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__welcome", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__welcome__message", children: store.welcomeMessage }), (0, jsx_runtime_1.jsx)(SuggestedQuestions_1.SuggestedQuestions, { questions: store.suggestedQuestions, controller: controller })] })), (_q = store.currentChat) === null || _q === void 0 ? void 0 : _q.chat.filter(function (chatItem) { return chatItem.messageType !== 'productQuery'; }).map(function (chatItem, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message ss__chat__message--".concat(chatItem.messageType), children: {
1461
+ }), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () { return controller.search(); }, icon: { icon: 'compare', title: 'Compare' }, children: "Compare" }) })] })] })) }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__messages', ref: messagesContainerRef, style: visibleChatLength ? { scrollbarGutter: 'stable' } : undefined, children: [(!((_p = store.currentChat) === null || _p === void 0 ? void 0 : _p.chat) || store.currentChat.chat.length === 0) && store.welcomeMessage && !((_q = store.currentChat) === null || _q === void 0 ? void 0 : _q.isExpired) && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__welcome", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__welcome__message", children: store.welcomeMessage }), (0, jsx_runtime_1.jsx)(SuggestedQuestions_1.SuggestedQuestions, { questions: store.suggestedQuestions, controller: controller })] })), (_r = store.currentChat) === null || _r === void 0 ? void 0 : _r.chat.filter(function (chatItem) { return chatItem.messageType !== 'productQuery'; }).map(function (chatItem, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message ss__chat__message--".concat(chatItem.messageType), children: {
1386
1462
  user: ((0, jsx_runtime_1.jsx)(MessageUser_1.MessageUser, { chatItem: chatItem, controller: controller, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined })),
1387
1463
  text: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
1388
1464
  content: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
@@ -1403,15 +1479,16 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1403
1479
  errorResponse: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
1404
1480
  topicDrift: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
1405
1481
  productQuery: null,
1406
- }[chatItem.messageType] || null }, index)); }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__messages__end", ref: messagesEndRef }), showNewMessages && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__new-messages", onClick: function () {
1482
+ }[chatItem.messageType] || null }, index)); }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__messages__end", ref: messagesEndRef }), showNewMessages && messagesOverflow && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__new-messages", onClick: function () {
1407
1483
  scrollToBottom();
1408
1484
  setShowNewMessages(false);
1409
- }, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "angle-down", size: "12px" }), (0, jsx_runtime_1.jsx)("span", { children: "New messages" })] }))] }), (0, jsx_runtime_1.jsx)(ChatLoadingIndicator_1.ChatLoadingIndicator, { loading: store.loading, verbs: loadingVerbs }), !((_r = store.currentChat) === null || _r === void 0 ? void 0 : _r.isExpired) ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content__footer", ref: footerRef, children: [store.error && (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__error", children: store.error.message }), ((_s = store.currentChat) === null || _s === void 0 ? void 0 : _s.sessionLimitReached) && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift', children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift__text', children: [(0, jsx_runtime_1.jsx)("span", { children: "Session limit reached" }), (0, jsx_runtime_1.jsx)("span", { children: "This chat has reached its maximum number of interactions. Start a new session to continue." })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__topic-drift__button', onClick: function () {
1485
+ }, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "angle-down", size: "12px" }), (0, jsx_runtime_1.jsx)("span", { children: "New messages" })] }))] }), (0, jsx_runtime_1.jsx)(ChatLoadingIndicator_1.ChatLoadingIndicator, { loading: store.loading, verbs: loadingVerbs }), !((_s = store.currentChat) === null || _s === void 0 ? void 0 : _s.isExpired) ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content__footer", ref: footerRef, children: [store.error && (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__error", children: store.error.message }), ((_t = store.currentChat) === null || _t === void 0 ? void 0 : _t.sessionLimitReached) && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift', children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift__text', children: [(0, jsx_runtime_1.jsx)("span", { children: "Session limit reached" }), (0, jsx_runtime_1.jsx)("span", { children: "This chat has reached its maximum number of interactions. Start a new session to continue." })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__topic-drift__button', onClick: function () {
1410
1486
  controller.store.createChat();
1411
- }, children: "New Session" })] })), ((_t = store.currentChat) === null || _t === void 0 ? void 0 : _t.actions) && store.currentChat.actions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__actions', children: (_u = store.currentChat) === null || _u === void 0 ? void 0 : _u.actions.map(function (action, index) {
1412
- var _a;
1487
+ }, children: "New Session" })] })), ((_u = store.currentChat) === null || _u === void 0 ? void 0 : _u.actions) && store.currentChat.actions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__actions', children: (_v = store.currentChat) === null || _v === void 0 ? void 0 : _v.actions.map(function (action, index) {
1488
+ var _a, _b;
1413
1489
  return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__wrap", children: {
1414
- facets: action.data.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facets-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facets-apply".concat(((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.attached.some(function (item) { return item.type === 'facet'; }))
1490
+ facets: action.data.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facets-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facets-apply".concat(((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.attached.some(function (item) { return item.type === 'facet'; })) ||
1491
+ (((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.removedFacets) && store.currentChat.removedFacets.length > 0)
1415
1492
  ? ' ss__chat__actions__facets-apply--active'
1416
1493
  : ''), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
1417
1494
  controller.search();
@@ -1419,7 +1496,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1419
1496
  var _a;
1420
1497
  if (!((_a = facet.values) === null || _a === void 0 ? void 0 : _a.length))
1421
1498
  return null;
1422
- return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet ss__chat__actions__facet--".concat(facet.type), children: (0, jsx_runtime_1.jsx)(__1.Dropdown, { usePortal: true, dropUp: true, button: (0, jsx_runtime_1.jsx)(FacetButton, { label: facet.label || facet.field }), style: {
1499
+ return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet ss__chat__actions__facet--".concat(facet.type), children: (0, jsx_runtime_1.jsx)(__1.Dropdown, { usePortal: true, dropUp: true, button: (0, jsx_runtime_1.jsx)(FacetButton, { label: getFacetButtonLabel(facet) }), style: {
1423
1500
  '.ss__dropdown__content': __assign({ width: '150px', maxHeight: '200px', overflowY: 'auto', background: 'white', boxShadow: '0px 3px 6px 0px rgba(0, 0, 0, 0.2)', borderRadius: '6px' }, (multiselectFacets
1424
1501
  ? {
1425
1502
  '.ss__chat__actions__facet__option--checkbox': {
@@ -1476,9 +1553,11 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1476
1553
  }, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet__options", children: facet.type === 'range-buckets'
1477
1554
  ? facet.values.map(function (option) {
1478
1555
  var _a, _b;
1479
- var optionValue = "".concat((_a = option.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = option.high) !== null && _b !== void 0 ? _b : '*');
1556
+ var rangeOption = option;
1557
+ var optionValue = "".concat((_a = rangeOption.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = rangeOption.high) !== null && _b !== void 0 ? _b : '*');
1480
1558
  if (multiselectFacets) {
1481
- var isSelected_1 = controller.store.isFacetSelected(facet.field, optionValue);
1559
+ var isSelected_1 = (rangeOption.filtered && !controller.store.isFacetRemoved(facet.field, optionValue)) ||
1560
+ controller.store.isFacetSelected(facet.field, optionValue);
1482
1561
  return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: function () {
1483
1562
  if (isSelected_1) {
1484
1563
  controller.store.removeFacet(facet.field, optionValue);
@@ -1488,29 +1567,31 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1488
1567
  key: facet.field,
1489
1568
  facetLabel: facet.label,
1490
1569
  value: optionValue,
1491
- label: option.label,
1492
- count: option.count,
1570
+ label: rangeOption.label,
1571
+ count: rangeOption.count,
1493
1572
  });
1494
1573
  }
1495
1574
  }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__actions__facet__option__checkbox', {
1496
1575
  'ss__chat__actions__facet__option__checkbox--checked': isSelected_1,
1497
- }), children: isSelected_1 && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "check-thin", size: "10px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__actions__facet__option__label", children: option.label })] }, optionValue));
1576
+ }), children: isSelected_1 && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "check-thin", size: "10px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__actions__facet__option__label", children: rangeOption.label })] }, optionValue));
1498
1577
  }
1499
1578
  return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
1500
1579
  controller.store.addFacet({
1501
1580
  key: facet.field,
1502
1581
  facetLabel: facet.label,
1503
1582
  value: optionValue,
1504
- label: option.label,
1505
- count: option.count,
1583
+ label: rangeOption.label,
1584
+ count: rangeOption.count,
1506
1585
  });
1507
1586
  controller.search();
1508
- }, children: option.label }, optionValue));
1587
+ }, children: rangeOption.label }, optionValue));
1509
1588
  })
1510
1589
  : facet.values.map(function (option) {
1511
- var optionValue = option.value || option.label;
1590
+ var valueOption = option;
1591
+ var optionValue = valueOption.value || valueOption.label;
1512
1592
  if (multiselectFacets) {
1513
- var isSelected_2 = controller.store.isFacetSelected(facet.field, optionValue);
1593
+ var isSelected_2 = (valueOption.filtered && !controller.store.isFacetRemoved(facet.field, optionValue)) ||
1594
+ controller.store.isFacetSelected(facet.field, optionValue);
1514
1595
  return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: function () {
1515
1596
  if (isSelected_2) {
1516
1597
  controller.store.removeFacet(facet.field, optionValue);
@@ -1520,24 +1601,24 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1520
1601
  key: facet.field,
1521
1602
  facetLabel: facet.label,
1522
1603
  value: optionValue,
1523
- label: option.label,
1524
- count: option.count,
1604
+ label: valueOption.label,
1605
+ count: valueOption.count,
1525
1606
  });
1526
1607
  }
1527
1608
  }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__actions__facet__option__checkbox', {
1528
1609
  'ss__chat__actions__facet__option__checkbox--checked': isSelected_2,
1529
- }), children: isSelected_2 && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "check-thin", size: "10px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__actions__facet__option__label", children: option.label })] }, optionValue));
1610
+ }), children: isSelected_2 && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "check-thin", size: "10px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__actions__facet__option__label", children: valueOption.label })] }, optionValue));
1530
1611
  }
1531
1612
  return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
1532
1613
  controller.store.addFacet({
1533
1614
  key: facet.field,
1534
1615
  facetLabel: facet.label,
1535
1616
  value: optionValue,
1536
- label: option.label,
1537
- count: option.count,
1617
+ label: valueOption.label,
1618
+ count: valueOption.count,
1538
1619
  });
1539
1620
  controller.search();
1540
- }, children: option.label }, optionValue));
1621
+ }, children: valueOption.label }, optionValue));
1541
1622
  }) }) }, facet.field) }, idx));
1542
1623
  }) })] })) : null,
1543
1624
  actions: ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--suggested" })),
@@ -1667,7 +1748,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1667
1748
  var _a;
1668
1749
  (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.dismissTopicDrift();
1669
1750
  }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "close-thin", size: "14px", className: 'ss__chat__topic-drift__icon--close' }) })] }));
1670
- })(), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input__input', children: [(0, jsx_runtime_1.jsx)("input", { type: "text", name: "ss-chat-input", disabled: store.loading || store.blocked || ((_v = store.currentChat) === null || _v === void 0 ? void 0 : _v.sessionLimitReached), placeholder: (function () {
1751
+ })(), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input__input', children: [(0, jsx_runtime_1.jsx)("input", { type: "text", name: "ss-chat-input", disabled: store.loading || store.blocked || ((_w = store.currentChat) === null || _w === void 0 ? void 0 : _w.sessionLimitReached), placeholder: (function () {
1671
1752
  var _a, _b, _c;
1672
1753
  var comparedCount = ((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.compared.length) || 0;
1673
1754
  var committedCount = ((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.comparisons.committed.length) || 0;
@@ -1695,7 +1776,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1695
1776
  if (e.keyCode === 13 && isMobile && mobileProductInfoOpen) {
1696
1777
  setMobileProductInfoOpen(false);
1697
1778
  }
1698
- }, value: controller.store.inputValue }), store.features.imageSearch.enabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__upload-button', disabled: store.loading || store.blocked || ((_w = store.currentChat) === null || _w === void 0 ? void 0 : _w.sessionLimitReached), onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, icon: { icon: 'image', title: 'Upload Image' } }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
1779
+ }, value: controller.store.inputValue }), store.features.imageSearch.enabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__upload-button', disabled: store.loading || store.blocked || ((_x = store.currentChat) === null || _x === void 0 ? void 0 : _x.sessionLimitReached), onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, icon: { icon: 'image', title: 'Upload Image' } }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
1699
1780
  return __generator(this, function (_a) {
1700
1781
  switch (_a.label) {
1701
1782
  case 0: return [4 /*yield*/, controller.upload(e.target.files)];
package/dist/cjs/components/src/components/Organisms/Chat/ChatResult.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatResult.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ChatResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAMzD,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAyG7D,eAAO,MAAM,UAAU,8EA+GtB,CAAC;AAMF,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/C"}
1
+ {"version":3,"file":"ChatResult.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ChatResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAMzD,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAkH7D,eAAO,MAAM,UAAU,8EA+GtB,CAAC;AAMF,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/C"}
package/dist/cjs/components/src/components/Organisms/Chat/ChatResult.js CHANGED
@@ -32,8 +32,17 @@ var defaultStyles = function () {
32
32
  overflow: 'hidden',
33
33
  '.ss__chat__result__image': {
34
34
  width: '100%',
35
+ aspectRatio: '1 / 1',
35
36
  position: 'relative',
36
37
  overflow: 'hidden',
38
+ // fixed-aspect frame: scale the image to fill it and crop overflow so
39
+ // results with different intrinsic image aspect ratios still line up
40
+ // at the same height when displayed side-by-side.
41
+ img: {
42
+ width: '100%',
43
+ height: '100%',
44
+ objectFit: 'cover',
45
+ },
37
46
  '.ss__chat__result__image__buttons': {
38
47
  position: 'absolute',
39
48
  bottom: 0,
package/dist/cjs/components/src/components/Organisms/Chat/MessageUser.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAwIhE,eAAO,MAAM,WAAW,WAAoB,gBAAgB;;CA6F1D,CAAC;AAEH,UAAU,gBAAgB;IACzB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC"}
1
+ {"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAuIhE,eAAO,MAAM,WAAW,WAAoB,gBAAgB;;CA2F1D,CAAC;AAEH,UAAU,gBAAgB;IACzB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC"}
package/dist/cjs/components/src/components/Organisms/Chat/MessageUser.js CHANGED
@@ -19,7 +19,6 @@ var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
19
19
  var mobx_react_lite_1 = require("mobx-react-lite");
20
20
  var classnames_1 = __importDefault(require("classnames"));
21
21
  var Image_1 = require("../../Atoms/Image");
22
- var marked_1 = require("marked");
23
22
  var Icon_1 = require("../../Atoms/Icon");
24
23
  var __1 = require("../../..");
25
24
  var utilities_1 = require("../../../utilities");
@@ -220,5 +219,5 @@ exports.MessageUser = (0, mobx_react_lite_1.observer)(function (props) {
220
219
  items.push((0, jsx_runtime_1.jsxs)("li", { className: "ss__chat__message-user__attachment__facet ss__chat__message-user__attachment__facet--overflow", title: "".concat(hiddenFacetCount, " more filter").concat(hiddenFacetCount === 1 ? '' : 's'), children: ["+", hiddenFacetCount] }, "facet-overflow"));
221
220
  }
222
221
  return items;
223
- })() }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__message-user__text-wrapper", children: [requestTypeLabel ? (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, chatItem.text ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-user__text", dangerouslySetInnerHTML: { __html: marked_1.marked.parse(chatItem.text) } })) : null] })] }) })));
222
+ })() }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__message-user__text-wrapper", children: [requestTypeLabel ? (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, chatItem.text ? (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-user__text", children: chatItem.text }) : null] })] }) })));
224
223
  });
package/dist/cjs/components/src/components/Organisms/Chat/ResultsDisplay.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ResultsDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAgChE,eAAO,MAAM,cAAc,WAAoB,mBAAmB;;CA8EhE,CAAC;AAEH,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B"}
1
+ {"version":3,"file":"ResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ResultsDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAgChE,eAAO,MAAM,cAAc,WAAoB,mBAAmB;;CAmFhE,CAAC;AAEH,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B"}
package/dist/cjs/components/src/components/Organisms/Chat/ResultsDisplay.js CHANGED
@@ -57,16 +57,21 @@ exports.ResultsDisplay = (0, mobx_react_lite_1.observer)(function (props) {
57
57
  // at >= 1200px there's room to keep 2.9 slides alongside the secondary chat
58
58
  var isConstrained = !isNarrow && isSideChatOpen && typeof window !== 'undefined' && window.innerWidth >= 768 && window.innerWidth <= 1200;
59
59
  var slidesPerView = isNarrow || isConstrained ? 1.9 : 2.9;
60
- var carouselProps = {
60
+ var visibleSlides = Math.ceil(slidesPerView);
61
+ // When all results fit, use a whole-number slidesPerView so the last slide
62
+ // isn't clipped to a fraction; otherwise keep the fractional value to hint
63
+ // at additional content beyond the viewport.
64
+ var resolveSlidesPerView = function (count) { return (count <= visibleSlides ? count : slidesPerView); };
65
+ var buildCarouselProps = function (count) { return ({
61
66
  breakpoints: undefined,
62
- slidesPerView: slidesPerView,
67
+ slidesPerView: resolveSlidesPerView(count),
63
68
  slidesPerGroup: isNarrow || isConstrained ? 2 : 3,
64
69
  loop: false,
65
70
  pagination: false,
66
71
  centerInsufficientSlides: false,
67
72
  freeMode: true,
68
73
  styleScript: carouselStyleScript,
69
- };
74
+ }); };
70
75
  var handleResultClick = function (e, result) {
71
76
  // buttons should be able to be clicked without triggering the product click
72
77
  if (e.composedPath().some(function (el) { return el instanceof HTMLElement && el.matches('button, .ss__button, a'); }))
@@ -78,12 +83,12 @@ exports.ResultsDisplay = (0, mobx_react_lite_1.observer)(function (props) {
78
83
  if (chatItem.messageType === 'productRecommendation' && ((_a = chatItem.recommendationResult) === null || _a === void 0 ? void 0 : _a.length)) {
79
84
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: chatItem.recommendationResult.map(function (recommendation, index) {
80
85
  var _a;
81
- return ((_a = recommendation.results) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, __assign({}, carouselProps, { hideButtons: recommendation.results.length <= slidesPerView, children: recommendation.results.map(function (result) {
86
+ return ((_a = recommendation.results) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, __assign({}, buildCarouselProps(recommendation.results.length), { hideButtons: recommendation.results.length <= visibleSlides, children: recommendation.results.map(function (result) {
82
87
  return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__results__result", style: { height: '100%', width: '100%', display: 'flex', cursor: 'pointer' }, onClick: function (e) { return handleResultClick(e, result); }, children: (0, jsx_runtime_1.jsx)(ChatResult_1.ChatResult, { result: result, controller: controller, scrollToBottom: scrollToBottom }) }, result.id));
83
88
  }) })) }, index)) : null;
84
89
  }) }));
85
90
  }
86
- return ((_b = chatItem.results) === null || _b === void 0 ? void 0 : _b.length) > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, __assign({}, carouselProps, { hideButtons: chatItem.results.length <= slidesPerView, children: chatItem.results.map(function (result) {
91
+ return ((_b = chatItem.results) === null || _b === void 0 ? void 0 : _b.length) > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, __assign({}, buildCarouselProps(chatItem.results.length), { hideButtons: chatItem.results.length <= visibleSlides, children: chatItem.results.map(function (result) {
87
92
  return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__results__result", style: { height: '100%', width: '100%', display: 'flex', cursor: 'pointer' }, onClick: function (e) { return handleResultClick(e, result); }, children: (0, jsx_runtime_1.jsx)(ChatResult_1.ChatResult, { result: result, controller: controller, scrollToBottom: scrollToBottom }) }, result.id));
88
93
  }) })) })) : null;
89
94
  });
package/dist/cjs/components/src/components/Organisms/Facet/Facet.js CHANGED
@@ -379,8 +379,9 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
379
379
  return facet && renderFacet ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet', "ss__facet--".concat(facet.field), "".concat(facet.collapsed ? 'ss__facet--collapsed' : ''), className, internalClassName, "".concat(facet.display ? "ss__facet--".concat(facet.display) : ''), (statefulOverflow ? (overflowState === null || overflowState === void 0 ? void 0 : overflowState.remaining) || 0 > 0 : (((_s = facet === null || facet === void 0 ? void 0 : facet.overflow) === null || _s === void 0 ? void 0 : _s.remaining) || 0) > 0) || (facet === null || facet === void 0 ? void 0 : facet.display) == 'slider'
380
380
  ? ''
381
381
  : 'ss__facet--showing-all'), children: justContent ? ((0, jsx_runtime_1.jsx)(FacetContent, __assign({}, facetContentProps, { mergedLang: mergedLang }))) : ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { open: disableCollapse || !(facet === null || facet === void 0 ? void 0 : facet.collapsed), onClick: function () { return !disableCollapse && facet.toggleCollapse && (facet === null || facet === void 0 ? void 0 : facet.toggleCollapse()); }, disableA11y: true, button: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__facet__header", ref: function (e) { return (0, useA11y_1.useA11y)(e, disableCollapse ? -1 : 0); }, role: "heading", "aria-level": 3 }, mergedLang.dropdownButton.attributes, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "ss__facet__header__inner", children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.dropdownButton.value, { children: facet === null || facet === void 0 ? void 0 : facet.label })), showSelectedCount && selectedCount && facet.type !== 'range' ? ((0, jsx_runtime_1.jsx)("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : "(".concat(selectedCount, ")") })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: function (e) {
382
+ var _a;
382
383
  e.stopPropagation();
383
- facet === null || facet === void 0 ? void 0 : facet.clear.url.link.onClick();
384
+ (_a = facet === null || facet === void 0 ? void 0 : facet.clear.url) === null || _a === void 0 ? void 0 : _a.link.onClick();
384
385
  }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? (0, jsx_runtime_1.jsx)("label", __assign({}, mergedLang.clearAllText.all)) : null }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))] }), !disableCollapse && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, ((facet === null || facet === void 0 ? void 0 : facet.collapsed)
385
386
  ? __assign({}, (typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand)) : __assign({}, (typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse))), { name: (facet === null || facet === void 0 ? void 0 : facet.collapsed) ? 'expand' : 'collapse' })))] })), children: (0, jsx_runtime_1.jsx)(FacetContent, __assign({}, facetContentProps, { mergedLang: mergedLang })) }))) })) })) : null;
386
387
  });
package/dist/cjs/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.js CHANGED
@@ -230,8 +230,9 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)(function (properties)
230
230
  setSelectedFacet(undefined);
231
231
  }
232
232
  }, button: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__dropdown__button__heading" }, mergedLang.dropdownButton.attributes, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__header__inner", children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.dropdownButton.value, { children: facet === null || facet === void 0 ? void 0 : facet.label })), showSelectedCount && selectedCount && facet.type !== 'range' ? ((0, jsx_runtime_1.jsx)("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : "(".concat(selectedCount, ")") })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: function (e) {
233
+ var _a;
233
234
  e.stopPropagation();
234
- facet === null || facet === void 0 ? void 0 : facet.clear.url.link.onClick();
235
+ (_a = facet === null || facet === void 0 ? void 0 : facet.clear.url) === null || _a === void 0 ? void 0 : _a.link.onClick();
235
236
  }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? (0, jsx_runtime_1.jsx)("label", __assign({}, mergedLang.clearAllText.all)) : null }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))] }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, ((selectedFacet === null || selectedFacet === void 0 ? void 0 : selectedFacet.field) === facet.field
236
237
  ? __assign({}, (typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand)) : __assign({}, (typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse)))))] })), disableOverlay: false, children: (0, jsx_runtime_1.jsx)(Facet_1.Facet, __assign({}, subProps.facet, { facet: facet })) })));
237
238
  }), !hideFiltersButton && (isOverflowing || alwaysShowFiltersButton) && ((0, jsx_runtime_1.jsx)(MobileSidebar_1.MobileSidebar, __assign({ controller: controller }, subProps.MobileSidebar)))] }) })) })) : null;
package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA+ZrE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CA0OvF,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG;IAC1C,QAAQ,EAAE,2BAA2B,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;CAC5C,GAAG,0CAA0C,GAC7C,cAAc,CAAC,4BAA4B,CAAC,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0CAA0C,GAAG;IACxD,QAAQ,EAAE,2BAA2B,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,2BAA2B;CAE3C"}
1
+ {"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAkarE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAkPvF,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG;IAC1C,QAAQ,EAAE,2BAA2B,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;CAC5C,GAAG,0CAA0C,GAC7C,cAAc,CAAC,4BAA4B,CAAC,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0CAA0C,GAAG;IACxD,QAAQ,EAAE,2BAA2B,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,2BAA2B;CAE3C"}
package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js CHANGED
@@ -77,6 +77,9 @@ const defaultStyles = () => {
77
77
  fontWeight: 'bold',
78
78
  fontSize: '1.1em',
79
79
  color: '#D4A843',
80
+ display: 'flex',
81
+ gap: '0.5em',
82
+ alignItems: 'center',
80
83
  },
81
84
  },
82
85
  '.ss__chat-product-query-message__header__product__actions': {
@@ -407,7 +410,7 @@ export const ChatProductQueryMessage = observer((properties) => {
407
410
  controller?.store.currentChat?.popProductQueryMessage(chatItem.sourceMessageId);
408
411
  controller?.store.clearProductQuickview();
409
412
  };
410
- return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-product-query-message', className, internalClassName), ...styling, children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__header'), children: [cameFromInspiration && (_jsxs("div", { className: classnames('ss__chat-product-query-message__header__back'), onClick: handleBack, children: [_jsx(Icon, { icon: "angle-left", size: "14px" }), _jsx("span", { children: "Back to inspiration" })] })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product'), children: [displayedCore.imageUrl && (_jsx(Image, { className: classnames('ss__chat-product-query-message__header__product__image'), src: displayedCore.imageUrl, alt: displayedCore.name || '' })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__details'), children: [displayedCore.name && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__name'), children: displayedCore.url ? (_jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track.product.click(e, product), target: "_blank", rel: "noopener noreferrer", children: displayedCore.name })) : (displayedCore.name) })), displayedCore.brand && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), displayedCore.price != null && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__price'), children: _jsx(Price, { value: displayedCore.price }) }))] }), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__actions'), children: [displayedCore.url && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__go-to-product'), children: _jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track.product.click(e, product), target: "_blank", rel: "noopener noreferrer", children: "Go to product" }) })), _jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__add-to-cart'), children: _jsx(Button, { content: 'Add to Cart', onClick: () => {
413
+ return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-product-query-message', className, internalClassName), ...styling, children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__header'), children: [cameFromInspiration && (_jsxs("div", { className: classnames('ss__chat-product-query-message__header__back'), onClick: handleBack, children: [_jsx(Icon, { icon: "angle-left", size: "14px" }), _jsx("span", { children: "Back to inspiration" })] })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product'), children: [displayedCore.imageUrl && (_jsx(Image, { className: classnames('ss__chat-product-query-message__header__product__image'), src: displayedCore.imageUrl, alt: displayedCore.name || '' })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__details'), children: [displayedCore.name && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__name'), children: displayedCore.url ? (_jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track.product.click(e, product), target: "_blank", rel: "noopener noreferrer", children: displayedCore.name })) : (displayedCore.name) })), displayedCore.brand && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), displayedCore.price != null && (_jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__details__price'), children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(displayedCore.price) && (_jsx(Price, { value: displayedCore.msrp, lineThrough: true })), _jsx(Price, { value: displayedCore.price })] }))] }), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__actions'), children: [displayedCore.url && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__go-to-product'), children: _jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track.product.click(e, product), target: "_blank", rel: "noopener noreferrer", children: "Go to product" }) })), _jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__add-to-cart'), children: _jsx(Button, { content: 'Add to Cart', onClick: () => {
411
414
  controller?.track.product.addToCart(product);
412
415
  controller?.addToCart(product);
413
416
  } }) }), controller?.store.features.similarProducts.enabled && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__show-similar'), children: _jsx(Button, { content: 'Show Similar', onClick: () => controller?.discussProduct(sourceProduct, { requestType: 'productSimilar' }) }) }))] })] })] }), selections.length > 0 && (_jsx("div", { className: classnames('ss__chat-product-query-message__variants'), children: selections.map((selection) => (_jsxs("div", { children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__variants__label'), children: [formatLabel(selection.field), " (", selection.values.length, ")"] }), _jsx("div", { className: classnames('ss__chat-product-query-message__variants__swatches'), children: selection.values.map((selectionValue) => {
@@ -420,5 +423,5 @@ export const ChatProductQueryMessage = observer((properties) => {
420
423
  }) })] }, selection.field))) })), infoRows.length > 0 && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Product Information" }), _jsx("table", { className: classnames('ss__chat-product-query-message__section__table'), children: _jsx("tbody", { children: infoRows.map((row) => (_jsxs("tr", { children: [_jsx("td", { children: row.label }), _jsx("td", { children: row.rawKey === 'availability' ? (_jsx("span", { className: classnames({
421
424
  'ss__chat-product-query-message__section__table__availability--in-stock': row.value === 'In Stock',
422
425
  'ss__chat-product-query-message__section__table__availability--out-of-stock': row.value === 'Out of Stock',
423
- }), children: row.value === 'In Stock' ? `\u2713 ${row.value}` : row.value })) : row.rawKey.toLowerCase() === 'price' ? (_jsx(Price, { value: Number(row.value) })) : (row.value) })] }, row.key))) }) })] })), descriptionRow && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Description" }), _jsx("div", { className: classnames('ss__chat-product-query-message__section__description'), children: descriptionRow.value })] })), features.length > 0 && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Features" }), _jsx("ul", { className: classnames('ss__chat-product-query-message__section__features'), children: features.map((feature, idx) => (_jsx("li", { children: feature }, idx))) })] }))] }) }));
426
+ }), children: row.value === 'In Stock' ? `\u2713 ${row.value}` : row.value })) : row.rawKey.toLowerCase() === 'price' ? (_jsxs("span", { style: { display: 'flex', gap: '0.5em', alignItems: 'center', justifyContent: 'flex-end' }, children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(row.value) && (_jsx(Price, { value: Number(displayedCore.msrp), lineThrough: true })), _jsx(Price, { value: Number(row.value) })] })) : (row.value) })] }, row.key))) }) })] })), descriptionRow && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Description" }), _jsx("div", { className: classnames('ss__chat-product-query-message__section__description'), children: descriptionRow.value })] })), features.length > 0 && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Features" }), _jsx("ul", { className: classnames('ss__chat-product-query-message__section__features'), children: features.map((feature, idx) => (_jsx("li", { children: feature }, idx))) })] }))] }) }));
424
427
  });
package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts CHANGED
@@ -10,5 +10,6 @@ export interface ChatProps extends ComponentProps {
10
10
  subtitle?: string;
11
11
  offset?: string | number;
12
12
  multiselectFacets?: boolean;
13
+ disableBubbleSuggestedQuestions?: boolean;
13
14
  }
14
15
  //# sourceMappingURL=Chat.d.ts.map
package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAwgCrE,eAAO,MAAM,IAAI,gBAAyB,SAAS,KAAG,GAAG,CAAC,OAAO;;CAwwC/D,CAAC;AAEH,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B"}
1
+ {"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAqhCrE,eAAO,MAAM,IAAI,gBAAyB,SAAS,KAAG,GAAG,CAAC,OAAO;;CAi1C/D,CAAC;AAEH,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+BAA+B,CAAC,EAAE,OAAO,CAAC;CAC1C"}
package/dist/esm/components/src/components/Organisms/Chat/Chat.js CHANGED
@@ -391,7 +391,19 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
391
391
  borderBottomRightRadius: mobile ? 0 : '12px',
392
392
  borderBottomLeftRadius: mobile ? 0 : '12px',
393
393
  flexGrow: 1,
394
+ position: 'relative',
394
395
  '.ss__chat__content__header': {
396
+ // In overlay mode (only applied when messages overflow), the comparisons
397
+ // tray floats over the messages so toggling it doesn't shift the layout
398
+ // or push the latest message out of view. When messages don't overflow,
399
+ // the tray stays in flow so older messages remain reachable above it.
400
+ '&.ss__chat__content__header--overlay': {
401
+ position: 'absolute',
402
+ top: 0,
403
+ left: 0,
404
+ right: 0,
405
+ zIndex: 20,
406
+ },
395
407
  // '.ss__chat__attachments': {
396
408
  // '.ss__chat__attachment': {
397
409
  // borderRadius: 0,
@@ -504,6 +516,7 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
504
516
  },
505
517
  '.ss__chat__messages': {
506
518
  flex: '1 1 auto',
519
+ overflowY: 'auto',
507
520
  overscrollBehavior: 'contain',
508
521
  margin: 0,
509
522
  maxHeight: '100%',
@@ -563,7 +576,7 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
563
576
  '.ss__chat__welcome': {
564
577
  display: 'flex',
565
578
  flexDirection: 'column',
566
- height: '100%',
579
+ minHeight: '100%',
567
580
  '.ss__chat__welcome__message': {
568
581
  fontSize: '15px',
569
582
  lineHeight: 1.5,
@@ -1016,9 +1029,10 @@ export const Chat = observer((properties) => {
1016
1029
  title: 'Athos Conversational Assistant',
1017
1030
  subtitle: 'Ready to assist you',
1018
1031
  multiselectFacets: true,
1032
+ disableBubbleSuggestedQuestions: false,
1019
1033
  };
1020
1034
  let props = mergeProps('facets', globalTheme, defaultProps, properties);
1021
- const { className, internalClassName, controller, logo, title, subtitle, offset, multiselectFacets } = props;
1035
+ const { className, internalClassName, controller, logo, title, subtitle, offset, multiselectFacets, disableBubbleSuggestedQuestions } = props;
1022
1036
  const { store } = controller;
1023
1037
  const themeDefaults = {
1024
1038
  components: {},
@@ -1032,6 +1046,7 @@ export const Chat = observer((properties) => {
1032
1046
  const fileInputRef = useRef(null);
1033
1047
  const messagesEndRef = useRef(null);
1034
1048
  const messagesContainerRef = useRef(null);
1049
+ const headerRef = useRef(null);
1035
1050
  const footerRef = useRef(null);
1036
1051
  // Swipe-to-dismiss state for mobile secondary panel
1037
1052
  const secondaryRef = useRef(null);
@@ -1044,13 +1059,21 @@ export const Chat = observer((properties) => {
1044
1059
  const [mobileProductInfoOpen, setMobileProductInfoOpen] = useState(false);
1045
1060
  const [footerHeight, setFooterHeight] = useState(0);
1046
1061
  const [showNewMessages, setShowNewMessages] = useState(false);
1062
+ const [messagesOverflow, setMessagesOverflow] = useState(false);
1047
1063
  const isNearBottomRef = useRef(true);
1048
1064
  const updateSwipeOffset = (value) => {
1049
1065
  swipeOffsetRef.current = value;
1050
1066
  setSwipeOffsetRaw(value);
1051
1067
  };
1052
1068
  const scrollToBottom = () => {
1053
- messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
1069
+ // Scroll the messages container directly (instead of scrollIntoView on the
1070
+ // bottom anchor) so the browser never walks up the ancestor chain. On small
1071
+ // viewports a smooth scrollIntoView could otherwise animate the document/
1072
+ // visual viewport and visually push the fixed-position chat off-screen.
1073
+ const container = messagesContainerRef.current;
1074
+ if (container) {
1075
+ container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
1076
+ }
1054
1077
  };
1055
1078
  // Conditional scroll: only scrolls if the user is already near the bottom.
1056
1079
  // Passed to child components (e.g. image onLoad) so they don't yank the user
@@ -1116,6 +1139,35 @@ export const Chat = observer((properties) => {
1116
1139
  container.addEventListener('scroll', handleScroll);
1117
1140
  return () => container.removeEventListener('scroll', handleScroll);
1118
1141
  }, [store.open]);
1142
+ // Track whether the messages container is overflowing so the comparisons header
1143
+ // can switch between in-flow (short conversations — top content stays reachable)
1144
+ // and overlay (overflowing — avoid layout shift when toggling the tray).
1145
+ // Hysteresis: when already in overlay, only return to in-flow if the content
1146
+ // would still fit *with* the header re-inserted — otherwise the two states
1147
+ // fight each other and the layout flickers.
1148
+ useEffect(() => {
1149
+ const container = messagesContainerRef.current;
1150
+ if (!container || typeof ResizeObserver === 'undefined')
1151
+ return;
1152
+ const update = () => {
1153
+ setMessagesOverflow((prev) => {
1154
+ const headerHeight = headerRef.current?.offsetHeight || 0;
1155
+ if (prev) {
1156
+ // Currently overlay: header isn't taking flow space. Only switch
1157
+ // back to in-flow if the content would fit with the header added.
1158
+ return container.scrollHeight > container.clientHeight - headerHeight + 1;
1159
+ }
1160
+ // Currently in-flow: header already takes space — straightforward check.
1161
+ return container.scrollHeight > container.clientHeight + 1;
1162
+ });
1163
+ };
1164
+ update();
1165
+ const observer = new ResizeObserver(update);
1166
+ observer.observe(container);
1167
+ if (headerRef.current)
1168
+ observer.observe(headerRef.current);
1169
+ return () => observer.disconnect();
1170
+ }, [store.open, visibleChatLength]);
1119
1171
  // Re-focus the chat input on desktop after a search completes.
1120
1172
  // The input is disabled while loading, which causes the browser to drop focus.
1121
1173
  // On mobile we intentionally skip this so the virtual keyboard dismisses.
@@ -1188,6 +1240,26 @@ export const Chat = observer((properties) => {
1188
1240
  return text.length > 50 ? `${text.slice(0, 50)}...` : text;
1189
1241
  })() }), _jsx("div", { className: "ss__chat__history__chat__button__date", children: chat.createdAt.toLocaleString() })] }) }, chat.id))) })) : null] }));
1190
1242
  const FacetButton = (props) => _jsx(Button, { icon: props.open ? 'angle-down' : 'angle-up', children: props.label });
1243
+ const getFacetButtonLabel = (facet) => {
1244
+ const applied = new Set();
1245
+ // Count values marked as filtered (already applied on the server)
1246
+ (facet.values || []).forEach((value) => {
1247
+ if (value?.filtered) {
1248
+ if ('low' in value && 'high' in value) {
1249
+ applied.add(`${value.low ?? '*'}:${value.high ?? '*'}`);
1250
+ }
1251
+ else {
1252
+ applied.add(value.value);
1253
+ }
1254
+ }
1255
+ });
1256
+ // Count pending facet attachments (newly selected, not yet sent)
1257
+ (controller.store.currentChat?.attachments.items || [])
1258
+ .filter((item) => item.type === 'facet' && item.key === facet.field && (item.state === 'active' || item.state === 'attached'))
1259
+ .forEach((item) => applied.add(item.value));
1260
+ const base = facet.label || facet.field;
1261
+ return applied.size > 0 ? `${base} (${applied.size})` : base;
1262
+ };
1191
1263
  // TODO: if starting a new chat and it's expired, this button would then disappear
1192
1264
  if (!controller.store.chatEnabled) {
1193
1265
  return _jsx(_Fragment, {});
@@ -1276,7 +1348,7 @@ export const Chat = observer((properties) => {
1276
1348
  'ss__chat--open': store.open,
1277
1349
  'ss__chat--minimized': !store.open,
1278
1350
  'ss__chat--mobile': isMobile,
1279
- }, className, internalClassName), ...styling, children: [!store.open && !store.currentChat && store.suggestedQuestions?.length > 0 && (_jsx("div", { className: "ss__chat__suggested-questions", children: store.suggestedQuestions.map((question, index) => (_jsx("div", { className: "ss__chat__suggested-questions__item", onClick: () => {
1351
+ }, className, internalClassName), ...styling, children: [!disableBubbleSuggestedQuestions && !store.open && !store.currentChat && store.suggestedQuestions?.length > 0 && (_jsx("div", { className: "ss__chat__suggested-questions", children: store.suggestedQuestions.map((question, index) => (_jsx("div", { className: "ss__chat__suggested-questions__item", onClick: () => {
1280
1352
  controller.openChat(question);
1281
1353
  }, children: question }, index))) })), _jsx("div", { className: 'ss__chat__bubble', onClick: () => controller.handlers.button.click(), children: _jsx(Icon, { icon: "chat", title: "Open Chat" }) }), store.open && shouldShowSideChat && activeMessage ? (_jsxs("div", { ref: secondaryRef, className: classnames('ss__chat__secondary'), style: isMobile
1282
1354
  ? {
@@ -1325,7 +1397,9 @@ export const Chat = observer((properties) => {
1325
1397
  store.currentChat.save();
1326
1398
  }
1327
1399
  }, children: _jsx(Icon, { icon: "close-thin", size: "14px" }) }))] })) : null;
1328
- })(), _jsxs("div", { className: "ss__chat__content", children: [_jsx("div", { className: "ss__chat__content__header", children: store.currentChat?.comparisons.compared && store.currentChat.comparisons.compared.length > 0 && (_jsxs("div", { className: 'ss__chat__content__header__comparisons', children: [_jsxs("div", { className: 'ss__chat__content__header__comparisons__header', children: [_jsxs("div", { className: 'ss__chat__content__header__comparisons__header__title', children: [_jsx(Icon, { className: 'ss__chat__content__header__comparisons__header__title__icon', icon: 'clipboard' }), _jsxs("span", { className: 'ss__chat__content__header__comparisons__header__title__text', children: ["Compare Products (", store.currentChat?.comparisons.compared.length, "/", store.currentChat?.comparisons.maxItems, ")"] })] }), _jsx("div", { className: 'ss__chat__content__header__comparisons__header__actions', children: _jsx(Button, { onClick: () => store.currentChat?.comparisons.reset(), children: "clear" }) })] }), _jsxs("div", { className: 'ss__chat__content__header__comparisons__content', children: [_jsx("div", { className: 'ss__chat__content__header__comparisons__content__items', children: Array.from({ length: store.currentChat?.comparisons.maxItems }).map((_, index) => {
1400
+ })(), _jsxs("div", { className: "ss__chat__content", children: [_jsx("div", { ref: headerRef, className: classnames('ss__chat__content__header', {
1401
+ 'ss__chat__content__header--overlay': messagesOverflow,
1402
+ }), children: store.currentChat?.comparisons.compared && store.currentChat.comparisons.compared.length > 0 && (_jsxs("div", { className: 'ss__chat__content__header__comparisons', children: [_jsxs("div", { className: 'ss__chat__content__header__comparisons__header', children: [_jsxs("div", { className: 'ss__chat__content__header__comparisons__header__title', children: [_jsx(Icon, { className: 'ss__chat__content__header__comparisons__header__title__icon', icon: 'clipboard' }), _jsxs("span", { className: 'ss__chat__content__header__comparisons__header__title__text', children: ["Compare Products (", store.currentChat?.comparisons.compared.length, "/", store.currentChat?.comparisons.maxItems, ")"] })] }), _jsx("div", { className: 'ss__chat__content__header__comparisons__header__actions', children: _jsx(Button, { onClick: () => store.currentChat?.comparisons.reset(), children: "clear" }) })] }), _jsxs("div", { className: 'ss__chat__content__header__comparisons__content', children: [_jsx("div", { className: 'ss__chat__content__header__comparisons__content__items', children: Array.from({ length: store.currentChat?.comparisons.maxItems }).map((_, index) => {
1329
1403
  const comparisonItem = store.currentChat?.comparisons.compared[index];
1330
1404
  return (_jsx("div", { className: classnames('ss__chat__content__header__comparisons__content__comparison', {
1331
1405
  'ss__chat__content__header__comparisons__content__comparison--placeholder': !comparisonItem,
@@ -1342,7 +1416,7 @@ export const Chat = observer((properties) => {
1342
1416
  }, children: _jsx(Icon, { icon: 'close-thin', size: '12px' }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: 'plus-thin' }), _jsx("div", { className: 'ss__chat__content__header__comparisons__content__comparison--placeholder__text', children: "Add" })] })) }, index));
1343
1417
  }) }), _jsx("div", { className: classnames('ss__chat__content__header__comparisons__action', {
1344
1418
  'ss__chat__content__header__comparisons__action--hidden': (store.currentChat?.comparisons.compared.length || 0) < 2,
1345
- }), children: _jsx(Button, { onClick: () => controller.search(), icon: { icon: 'compare', title: 'Compare' }, children: "Compare" }) })] })] })) }), _jsxs("div", { className: 'ss__chat__messages', ref: messagesContainerRef, style: visibleChatLength ? { overflowY: 'auto', scrollbarGutter: 'stable' } : undefined, children: [(!store.currentChat?.chat || store.currentChat.chat.length === 0) && store.welcomeMessage && (_jsxs("div", { className: "ss__chat__welcome", children: [_jsx("div", { className: "ss__chat__welcome__message", children: store.welcomeMessage }), _jsx(SuggestedQuestions, { questions: store.suggestedQuestions, controller: controller })] })), store.currentChat?.chat
1419
+ }), children: _jsx(Button, { onClick: () => controller.search(), icon: { icon: 'compare', title: 'Compare' }, children: "Compare" }) })] })] })) }), _jsxs("div", { className: 'ss__chat__messages', ref: messagesContainerRef, style: visibleChatLength ? { scrollbarGutter: 'stable' } : undefined, children: [(!store.currentChat?.chat || store.currentChat.chat.length === 0) && store.welcomeMessage && !store.currentChat?.isExpired && (_jsxs("div", { className: "ss__chat__welcome", children: [_jsx("div", { className: "ss__chat__welcome__message", children: store.welcomeMessage }), _jsx(SuggestedQuestions, { questions: store.suggestedQuestions, controller: controller })] })), store.currentChat?.chat
1346
1420
  .filter((chatItem) => chatItem.messageType !== 'productQuery')
1347
1421
  .map((chatItem, index) => (_jsx("div", { className: `ss__chat__message ss__chat__message--${chatItem.messageType}`, children: {
1348
1422
  user: (_jsx(MessageUser, { chatItem: chatItem, controller: controller, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined })),
@@ -1364,20 +1438,21 @@ export const Chat = observer((properties) => {
1364
1438
  errorResponse: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
1365
1439
  topicDrift: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
1366
1440
  productQuery: null,
1367
- }[chatItem.messageType] || null }, index))), _jsx("div", { className: "ss__chat__messages__end", ref: messagesEndRef }), showNewMessages && (_jsxs("div", { className: "ss__chat__new-messages", onClick: () => {
1441
+ }[chatItem.messageType] || null }, index))), _jsx("div", { className: "ss__chat__messages__end", ref: messagesEndRef }), showNewMessages && messagesOverflow && (_jsxs("div", { className: "ss__chat__new-messages", onClick: () => {
1368
1442
  scrollToBottom();
1369
1443
  setShowNewMessages(false);
1370
1444
  }, children: [_jsx(Icon, { icon: "angle-down", size: "12px" }), _jsx("span", { children: "New messages" })] }))] }), _jsx(ChatLoadingIndicator, { loading: store.loading, verbs: loadingVerbs }), !store.currentChat?.isExpired ? (_jsxs("div", { className: "ss__chat__content__footer", ref: footerRef, children: [store.error && _jsx("div", { className: "ss__chat__error", children: store.error.message }), store.currentChat?.sessionLimitReached && (_jsxs("div", { className: 'ss__chat__topic-drift', children: [_jsx(Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), _jsxs("div", { className: 'ss__chat__topic-drift__text', children: [_jsx("span", { children: "Session limit reached" }), _jsx("span", { children: "This chat has reached its maximum number of interactions. Start a new session to continue." })] }), _jsx(Button, { className: 'ss__chat__topic-drift__button', onClick: () => {
1371
1445
  controller.store.createChat();
1372
1446
  }, children: "New Session" })] })), store.currentChat?.actions && store.currentChat.actions.length > 0 && (_jsx("div", { className: 'ss__chat__actions', children: store.currentChat?.actions.map((action, index) => (_jsx("div", { className: "ss__chat__actions__wrap", children: {
1373
- facets: action.data.length ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ss__chat__actions__facets-header", children: [_jsx("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && (_jsx("div", { className: `ss__chat__actions__facets-apply${store.currentChat?.attachments.attached.some((item) => item.type === 'facet')
1447
+ facets: action.data.length ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ss__chat__actions__facets-header", children: [_jsx("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && (_jsx("div", { className: `ss__chat__actions__facets-apply${store.currentChat?.attachments.attached.some((item) => item.type === 'facet') ||
1448
+ (store.currentChat?.removedFacets && store.currentChat.removedFacets.length > 0)
1374
1449
  ? ' ss__chat__actions__facets-apply--active'
1375
1450
  : ''}`, children: _jsx(Button, { onClick: () => {
1376
1451
  controller.search();
1377
1452
  }, children: "Apply" }) }))] }), _jsx("div", { className: "ss__chat__actions--facets", children: action.data.slice(0, 10).map((facet, idx) => {
1378
1453
  if (!facet.values?.length)
1379
1454
  return null;
1380
- return (_jsx("div", { className: `ss__chat__actions__facet ss__chat__actions__facet--${facet.type}`, children: _jsx(Dropdown, { usePortal: true, dropUp: true, button: _jsx(FacetButton, { label: facet.label || facet.field }), style: {
1455
+ return (_jsx("div", { className: `ss__chat__actions__facet ss__chat__actions__facet--${facet.type}`, children: _jsx(Dropdown, { usePortal: true, dropUp: true, button: _jsx(FacetButton, { label: getFacetButtonLabel(facet) }), style: {
1381
1456
  '.ss__dropdown__content': {
1382
1457
  width: '150px',
1383
1458
  maxHeight: '200px',
@@ -1441,9 +1516,11 @@ export const Chat = observer((properties) => {
1441
1516
  },
1442
1517
  }, children: _jsx("div", { className: "ss__chat__actions__facet__options", children: facet.type === 'range-buckets'
1443
1518
  ? facet.values.map((option) => {
1444
- const optionValue = `${option.low ?? '*'}:${option.high ?? '*'}`;
1519
+ const rangeOption = option;
1520
+ const optionValue = `${rangeOption.low ?? '*'}:${rangeOption.high ?? '*'}`;
1445
1521
  if (multiselectFacets) {
1446
- const isSelected = controller.store.isFacetSelected(facet.field, optionValue);
1522
+ const isSelected = (rangeOption.filtered && !controller.store.isFacetRemoved(facet.field, optionValue)) ||
1523
+ controller.store.isFacetSelected(facet.field, optionValue);
1447
1524
  return (_jsxs("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: () => {
1448
1525
  if (isSelected) {
1449
1526
  controller.store.removeFacet(facet.field, optionValue);
@@ -1453,29 +1530,31 @@ export const Chat = observer((properties) => {
1453
1530
  key: facet.field,
1454
1531
  facetLabel: facet.label,
1455
1532
  value: optionValue,
1456
- label: option.label,
1457
- count: option.count,
1533
+ label: rangeOption.label,
1534
+ count: rangeOption.count,
1458
1535
  });
1459
1536
  }
1460
1537
  }, children: [_jsx("div", { className: classnames('ss__chat__actions__facet__option__checkbox', {
1461
1538
  'ss__chat__actions__facet__option__checkbox--checked': isSelected,
1462
- }), children: isSelected && _jsx(Icon, { icon: "check-thin", size: "10px" }) }), _jsx("span", { className: "ss__chat__actions__facet__option__label", children: option.label })] }, optionValue));
1539
+ }), children: isSelected && _jsx(Icon, { icon: "check-thin", size: "10px" }) }), _jsx("span", { className: "ss__chat__actions__facet__option__label", children: rangeOption.label })] }, optionValue));
1463
1540
  }
1464
1541
  return (_jsx(Button, { onClick: () => {
1465
1542
  controller.store.addFacet({
1466
1543
  key: facet.field,
1467
1544
  facetLabel: facet.label,
1468
1545
  value: optionValue,
1469
- label: option.label,
1470
- count: option.count,
1546
+ label: rangeOption.label,
1547
+ count: rangeOption.count,
1471
1548
  });
1472
1549
  controller.search();
1473
- }, children: option.label }, optionValue));
1550
+ }, children: rangeOption.label }, optionValue));
1474
1551
  })
1475
1552
  : facet.values.map((option) => {
1476
- const optionValue = option.value || option.label;
1553
+ const valueOption = option;
1554
+ const optionValue = valueOption.value || valueOption.label;
1477
1555
  if (multiselectFacets) {
1478
- const isSelected = controller.store.isFacetSelected(facet.field, optionValue);
1556
+ const isSelected = (valueOption.filtered && !controller.store.isFacetRemoved(facet.field, optionValue)) ||
1557
+ controller.store.isFacetSelected(facet.field, optionValue);
1479
1558
  return (_jsxs("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: () => {
1480
1559
  if (isSelected) {
1481
1560
  controller.store.removeFacet(facet.field, optionValue);
@@ -1485,24 +1564,24 @@ export const Chat = observer((properties) => {
1485
1564
  key: facet.field,
1486
1565
  facetLabel: facet.label,
1487
1566
  value: optionValue,
1488
- label: option.label,
1489
- count: option.count,
1567
+ label: valueOption.label,
1568
+ count: valueOption.count,
1490
1569
  });
1491
1570
  }
1492
1571
  }, children: [_jsx("div", { className: classnames('ss__chat__actions__facet__option__checkbox', {
1493
1572
  'ss__chat__actions__facet__option__checkbox--checked': isSelected,
1494
- }), children: isSelected && _jsx(Icon, { icon: "check-thin", size: "10px" }) }), _jsx("span", { className: "ss__chat__actions__facet__option__label", children: option.label })] }, optionValue));
1573
+ }), children: isSelected && _jsx(Icon, { icon: "check-thin", size: "10px" }) }), _jsx("span", { className: "ss__chat__actions__facet__option__label", children: valueOption.label })] }, optionValue));
1495
1574
  }
1496
1575
  return (_jsx(Button, { onClick: () => {
1497
1576
  controller.store.addFacet({
1498
1577
  key: facet.field,
1499
1578
  facetLabel: facet.label,
1500
1579
  value: optionValue,
1501
- label: option.label,
1502
- count: option.count,
1580
+ label: valueOption.label,
1581
+ count: valueOption.count,
1503
1582
  });
1504
1583
  controller.search();
1505
- }, children: option.label }, optionValue));
1584
+ }, children: valueOption.label }, optionValue));
1506
1585
  }) }) }, facet.field) }, idx));
1507
1586
  }) })] })) : null,
1508
1587
  actions: (_jsx("div", { className: "ss__chat__actions--suggested" })),
package/dist/esm/components/src/components/Organisms/Chat/ChatResult.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatResult.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ChatResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAMzD,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAyG7D,eAAO,MAAM,UAAU,8EA+GtB,CAAC;AAMF,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/C"}
1
+ {"version":3,"file":"ChatResult.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ChatResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAMzD,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAkH7D,eAAO,MAAM,UAAU,8EA+GtB,CAAC;AAMF,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/C"}
package/dist/esm/components/src/components/Organisms/Chat/ChatResult.js CHANGED
@@ -18,8 +18,17 @@ const defaultStyles = () => {
18
18
  overflow: 'hidden',
19
19
  '.ss__chat__result__image': {
20
20
  width: '100%',
21
+ aspectRatio: '1 / 1',
21
22
  position: 'relative',
22
23
  overflow: 'hidden',
24
+ // fixed-aspect frame: scale the image to fill it and crop overflow so
25
+ // results with different intrinsic image aspect ratios still line up
26
+ // at the same height when displayed side-by-side.
27
+ img: {
28
+ width: '100%',
29
+ height: '100%',
30
+ objectFit: 'cover',
31
+ },
23
32
  '.ss__chat__result__image__buttons': {
24
33
  position: 'absolute',
25
34
  bottom: 0,
package/dist/esm/components/src/components/Organisms/Chat/MessageUser.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAwIhE,eAAO,MAAM,WAAW,WAAoB,gBAAgB;;CA6F1D,CAAC;AAEH,UAAU,gBAAgB;IACzB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC"}
1
+ {"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAuIhE,eAAO,MAAM,WAAW,WAAoB,gBAAgB;;CA2F1D,CAAC;AAEH,UAAU,gBAAgB;IACzB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC"}
package/dist/esm/components/src/components/Organisms/Chat/MessageUser.js CHANGED
@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
2
2
  import { observer } from 'mobx-react-lite';
3
3
  import classnames from 'classnames';
4
4
  import { Image } from '../../Atoms/Image';
5
- import { marked } from 'marked';
6
5
  import { Icon } from '../../Atoms/Icon';
7
6
  import { css } from '../../..';
8
7
  import { mergeStyles } from '../../../utilities';
@@ -191,5 +190,5 @@ export const MessageUser = observer((props) => {
191
190
  items.push(_jsxs("li", { className: "ss__chat__message-user__attachment__facet ss__chat__message-user__attachment__facet--overflow", title: `${hiddenFacetCount} more filter${hiddenFacetCount === 1 ? '' : 's'}`, children: ["+", hiddenFacetCount] }, "facet-overflow"));
192
191
  }
193
192
  return items;
194
- })() }), _jsxs("div", { className: "ss__chat__message-user__text-wrapper", children: [requestTypeLabel ? _jsx("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, chatItem.text ? (_jsx("div", { className: "ss__chat__message-user__text", dangerouslySetInnerHTML: { __html: marked.parse(chatItem.text) } })) : null] })] }) }));
193
+ })() }), _jsxs("div", { className: "ss__chat__message-user__text-wrapper", children: [requestTypeLabel ? _jsx("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, chatItem.text ? _jsx("div", { className: "ss__chat__message-user__text", children: chatItem.text }) : null] })] }) }));
195
194
  });
package/dist/esm/components/src/components/Organisms/Chat/ResultsDisplay.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ResultsDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAgChE,eAAO,MAAM,cAAc,WAAoB,mBAAmB;;CA8EhE,CAAC;AAEH,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B"}
1
+ {"version":3,"file":"ResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ResultsDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAgChE,eAAO,MAAM,cAAc,WAAoB,mBAAmB;;CAmFhE,CAAC;AAEH,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B"}
package/dist/esm/components/src/components/Organisms/Chat/ResultsDisplay.js CHANGED
@@ -42,16 +42,21 @@ export const ResultsDisplay = observer((props) => {
42
42
  // at >= 1200px there's room to keep 2.9 slides alongside the secondary chat
43
43
  const isConstrained = !isNarrow && isSideChatOpen && typeof window !== 'undefined' && window.innerWidth >= 768 && window.innerWidth <= 1200;
44
44
  const slidesPerView = isNarrow || isConstrained ? 1.9 : 2.9;
45
- const carouselProps = {
45
+ const visibleSlides = Math.ceil(slidesPerView);
46
+ // When all results fit, use a whole-number slidesPerView so the last slide
47
+ // isn't clipped to a fraction; otherwise keep the fractional value to hint
48
+ // at additional content beyond the viewport.
49
+ const resolveSlidesPerView = (count) => (count <= visibleSlides ? count : slidesPerView);
50
+ const buildCarouselProps = (count) => ({
46
51
  breakpoints: undefined,
47
- slidesPerView,
52
+ slidesPerView: resolveSlidesPerView(count),
48
53
  slidesPerGroup: isNarrow || isConstrained ? 2 : 3,
49
54
  loop: false,
50
55
  pagination: false,
51
56
  centerInsufficientSlides: false,
52
57
  freeMode: true,
53
58
  styleScript: carouselStyleScript,
54
- };
59
+ });
55
60
  const handleResultClick = (e, result) => {
56
61
  // buttons should be able to be clicked without triggering the product click
57
62
  if (e.composedPath().some((el) => el instanceof HTMLElement && el.matches('button, .ss__button, a')))
@@ -62,12 +67,12 @@ export const ResultsDisplay = observer((props) => {
62
67
  };
63
68
  if (chatItem.messageType === 'productRecommendation' && chatItem.recommendationResult?.length) {
64
69
  return (_jsx(_Fragment, { children: chatItem.recommendationResult.map((recommendation, index) => {
65
- return recommendation.results?.length > 0 ? (_jsx("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: _jsx(Carousel, { ...carouselProps, hideButtons: recommendation.results.length <= slidesPerView, children: recommendation.results.map((result) => {
70
+ return recommendation.results?.length > 0 ? (_jsx("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: _jsx(Carousel, { ...buildCarouselProps(recommendation.results.length), hideButtons: recommendation.results.length <= visibleSlides, children: recommendation.results.map((result) => {
66
71
  return (_jsx("div", { className: "ss__chat__message-text__results__result", style: { height: '100%', width: '100%', display: 'flex', cursor: 'pointer' }, onClick: (e) => handleResultClick(e, result), children: _jsx(ChatResult, { result: result, controller: controller, scrollToBottom: scrollToBottom }) }, result.id));
67
72
  }) }) }, index)) : null;
68
73
  }) }));
69
74
  }
70
- return chatItem.results?.length > 0 ? (_jsx("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: _jsx(Carousel, { ...carouselProps, hideButtons: chatItem.results.length <= slidesPerView, children: chatItem.results.map((result) => {
75
+ return chatItem.results?.length > 0 ? (_jsx("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: _jsx(Carousel, { ...buildCarouselProps(chatItem.results.length), hideButtons: chatItem.results.length <= visibleSlides, children: chatItem.results.map((result) => {
71
76
  return (_jsx("div", { className: "ss__chat__message-text__results__result", style: { height: '100%', width: '100%', display: 'flex', cursor: 'pointer' }, onClick: (e) => handleResultClick(e, result), children: _jsx(ChatResult, { result: result, controller: controller, scrollToBottom: scrollToBottom }) }, result.id));
72
77
  }) }) })) : null;
73
78
  });
package/dist/esm/components/src/components/Organisms/Facet/Facet.js CHANGED
@@ -419,7 +419,7 @@ export const Facet = observer((properties) => {
419
419
  ? ''
420
420
  : 'ss__facet--showing-all'), children: justContent ? (_jsx(FacetContent, { ...facetContentProps, mergedLang: mergedLang })) : (_jsx(Dropdown, { ...subProps.dropdown, open: disableCollapse || !facet?.collapsed, onClick: () => !disableCollapse && facet.toggleCollapse && facet?.toggleCollapse(), disableA11y: true, button: _jsxs("div", { className: "ss__facet__header", ref: (e) => useA11y(e, disableCollapse ? -1 : 0), role: "heading", "aria-level": 3, ...mergedLang.dropdownButton.attributes, children: [_jsxs("span", { className: "ss__facet__header__inner", children: [_jsx("span", { ...mergedLang.dropdownButton.value, children: facet?.label }), showSelectedCount && selectedCount && facet.type !== 'range' ? (_jsx("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : `(${selectedCount})` })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? (_jsx(Button, { ...subProps.button, internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: (e) => {
421
421
  e.stopPropagation();
422
- facet?.clear.url.link.onClick();
422
+ facet?.clear.url?.link.onClick();
423
423
  }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? _jsx("label", { ...mergedLang.clearAllText.all }) : null })) : (_jsx(_Fragment, {}))] }), !disableCollapse && (_jsx(Icon, { ...subProps.icon, ...(facet?.collapsed
424
424
  ? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand) }
425
425
  : { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }), name: facet?.collapsed ? 'expand' : 'collapse' }))] }), children: _jsx(FacetContent, { ...facetContentProps, mergedLang: mergedLang }) })) }) })) : null;
package/dist/esm/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.js CHANGED
@@ -237,7 +237,7 @@ export const FacetsHorizontal = observer((properties) => {
237
237
  }
238
238
  }, button: _jsxs("div", { className: "ss__dropdown__button__heading", ...mergedLang.dropdownButton.attributes, children: [_jsxs("div", { className: "ss__facet__header__inner", children: [_jsx("span", { ...mergedLang.dropdownButton.value, children: facet?.label }), showSelectedCount && selectedCount && facet.type !== 'range' ? (_jsx("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : `(${selectedCount})` })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? (_jsx(Button, { ...subProps.button, internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: (e) => {
239
239
  e.stopPropagation();
240
- facet?.clear.url.link.onClick();
240
+ facet?.clear.url?.link.onClick();
241
241
  }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? _jsx("label", { ...mergedLang.clearAllText.all }) : null })) : (_jsx(_Fragment, {}))] }), _jsx(Icon, { ...subProps.icon, ...(selectedFacet?.field === facet.field
242
242
  ? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand) }
243
243
  : { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }) })] }), disableOverlay: false, children: _jsx(Facet, { ...subProps.facet, facet: facet }) }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@athoscommerce/snap-preact",
3
- "version": "1.2.3-beta.3+25a2f4522",
3
+ "version": "1.2.3-beta.4+cf2eeebec",
4
4
  "description": "Snap Preact",
5
5
  "main": "dist/cjs/src/index.js",
6
6
  "module": "dist/esm/src/index.js",
@@ -26,16 +26,16 @@
26
26
  "storybook": "storybook dev -c ./components/.storybook -p 6006"
27
27
  },
28
28
  "dependencies": {
29
- "@athoscommerce/snap-client": "1.2.3-beta.3+25a2f4522",
30
- "@athoscommerce/snap-controller": "1.2.3-beta.3+25a2f4522",
31
- "@athoscommerce/snap-event-manager": "1.2.3-beta.3+25a2f4522",
32
- "@athoscommerce/snap-logger": "1.2.3-beta.3+25a2f4522",
33
- "@athoscommerce/snap-platforms": "1.2.3-beta.3+25a2f4522",
34
- "@athoscommerce/snap-profiler": "1.2.3-beta.3+25a2f4522",
35
- "@athoscommerce/snap-store-mobx": "1.2.3-beta.3+25a2f4522",
36
- "@athoscommerce/snap-toolbox": "1.2.3-beta.3+25a2f4522",
37
- "@athoscommerce/snap-tracker": "1.2.3-beta.3+25a2f4522",
38
- "@athoscommerce/snap-url-manager": "1.2.3-beta.3+25a2f4522",
29
+ "@athoscommerce/snap-client": "1.2.3-beta.4+cf2eeebec",
30
+ "@athoscommerce/snap-controller": "1.2.3-beta.4+cf2eeebec",
31
+ "@athoscommerce/snap-event-manager": "1.2.3-beta.4+cf2eeebec",
32
+ "@athoscommerce/snap-logger": "1.2.3-beta.4+cf2eeebec",
33
+ "@athoscommerce/snap-platforms": "1.2.3-beta.4+cf2eeebec",
34
+ "@athoscommerce/snap-profiler": "1.2.3-beta.4+cf2eeebec",
35
+ "@athoscommerce/snap-store-mobx": "1.2.3-beta.4+cf2eeebec",
36
+ "@athoscommerce/snap-toolbox": "1.2.3-beta.4+cf2eeebec",
37
+ "@athoscommerce/snap-tracker": "1.2.3-beta.4+cf2eeebec",
38
+ "@athoscommerce/snap-url-manager": "1.2.3-beta.4+cf2eeebec",
39
39
  "@emotion/react": "11.13.0",
40
40
  "classnames": "^2.3.2",
41
41
  "color": "^4.2.3",
@@ -97,5 +97,5 @@
97
97
  "require": "./dist/cjs/toolbox/src/index.js"
98
98
  }
99
99
  },
100
- "gitHead": "25a2f452248ffbf114c80137ea8ad95516b3f106"
100
+ "gitHead": "cf2eeebec7baf5a7746dcd90c21bccd9a5b15544"
101
101
  }