@athoscommerce/snap-preact 1.5.1-beta.110 → 1.5.1-beta.114

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 (29) hide show
  1. package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.d.ts +3 -0
  2. package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map +1 -1
  3. package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.js +14 -5
  4. package/dist/cjs/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.d.ts.map +1 -1
  5. package/dist/cjs/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.js +3 -2
  6. package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map +1 -1
  7. package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js +25 -10
  8. package/dist/cjs/components/src/components/Organisms/Chat/Chat.d.ts.map +1 -1
  9. package/dist/cjs/components/src/components/Organisms/Chat/Chat.js +74 -54
  10. package/dist/cjs/components/src/components/Organisms/Chat/Chat.styles.d.ts.map +1 -1
  11. package/dist/cjs/components/src/components/Organisms/Chat/Chat.styles.js +6 -3
  12. package/dist/cjs/components/src/components/Organisms/Chat/hooks/useChatFileUpload.js +4 -4
  13. package/dist/cjs/src/Templates/SnapTemplates.d.ts.map +1 -1
  14. package/dist/cjs/src/Templates/SnapTemplates.js +1 -1
  15. package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts +3 -0
  16. package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map +1 -1
  17. package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.js +13 -6
  18. package/dist/esm/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.d.ts.map +1 -1
  19. package/dist/esm/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.js +3 -2
  20. package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map +1 -1
  21. package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js +25 -10
  22. package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts.map +1 -1
  23. package/dist/esm/components/src/components/Organisms/Chat/Chat.js +61 -42
  24. package/dist/esm/components/src/components/Organisms/Chat/Chat.styles.d.ts.map +1 -1
  25. package/dist/esm/components/src/components/Organisms/Chat/Chat.styles.js +6 -3
  26. package/dist/esm/components/src/components/Organisms/Chat/hooks/useChatFileUpload.js +3 -3
  27. package/dist/esm/src/Templates/SnapTemplates.d.ts.map +1 -1
  28. package/dist/esm/src/Templates/SnapTemplates.js +4 -1
  29. package/package.json +12 -12
package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.d.ts CHANGED
@@ -23,5 +23,8 @@ export type DropdownTemplatesLegalProps = {
23
23
  disableA11y?: boolean;
24
24
  usePortal?: boolean;
25
25
  dropUp?: boolean;
26
+ boundaryRef?: {
27
+ current: HTMLElement | null;
28
+ };
26
29
  };
27
30
  //# sourceMappingURL=Dropdown.d.ts.map
package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAqC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAiPzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC"}
1
+ {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAqC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAwPzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,CAAC;CAC9C,CAAC"}
package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.js CHANGED
@@ -67,7 +67,7 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
67
67
  treePath: globalTreePath,
68
68
  };
69
69
  var props = (0, utilities_1.mergeProps)('dropdown', globalTheme, defaultProps, properties);
70
- var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, toggleOnHover = props.toggleOnHover, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, disableClick = props.disableClick, onClick = props.onClick, onToggle = props.onToggle, focusTrapContent = props.focusTrapContent, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, usePortal = props.usePortal, dropUp = props.dropUp, customComponent = props.customComponent;
70
+ var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, toggleOnHover = props.toggleOnHover, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, disableClick = props.disableClick, onClick = props.onClick, onToggle = props.onToggle, focusTrapContent = props.focusTrapContent, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, usePortal = props.usePortal, dropUp = props.dropUp, boundaryRef = props.boundaryRef, customComponent = props.customComponent;
71
71
  if (customComponent) {
72
72
  var ComponentOverride = (0, hooks_2.useComponent)(((_b = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _b === void 0 ? void 0 : _b.library.import.component.dropdown) || {}, customComponent);
73
73
  if (ComponentOverride) {
@@ -88,6 +88,7 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
88
88
  var contentRef = (0, hooks_1.useRef)(null);
89
89
  var _d = (0, hooks_1.useState)({ top: 0, left: 0, width: 0 }), coords = _d[0], setCoords = _d[1];
90
90
  var _e = (0, hooks_1.useState)(false), flipX = _e[0], setFlipX = _e[1];
91
+ var _f = (0, hooks_1.useState)(0), flipRight = _f[0], setFlipRight = _f[1];
91
92
  var innerRef;
92
93
  if (!disableClickOutside) {
93
94
  innerRef = (0, hooks_2.useClickOutside)(function (e) {
@@ -129,12 +130,20 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
129
130
  setFlipX(false);
130
131
  }
131
132
  }, [dropdownOpen]);
132
- // After the portal renders, check if content overflows the right viewport edge
133
- // and flip the horizontal anchor if so. useLayoutEffect fires before paint to avoid flash.
133
+ // After the portal renders, check if content overflows the right edge of the
134
+ // boundary (when provided) or the viewport and flip the horizontal anchor if so.
135
+ // When flipped, anchor the portal to the boundary's right edge so the dropdown
136
+ // stops at the boundary rather than at the button's right edge.
137
+ // useLayoutEffect fires before paint to avoid flash.
134
138
  (0, hooks_1.useLayoutEffect)(function () {
139
+ var _a, _b;
135
140
  if (usePortal && dropdownOpen && contentRef.current && coords.width > 0) {
136
141
  var rect = contentRef.current.getBoundingClientRect();
137
- setFlipX(rect.right > window.innerWidth);
142
+ var limit = (_b = (_a = boundaryRef === null || boundaryRef === void 0 ? void 0 : boundaryRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().right) !== null && _b !== void 0 ? _b : window.innerWidth;
143
+ var shouldFlip = rect.right > limit;
144
+ setFlipX(shouldFlip);
145
+ if (shouldFlip)
146
+ setFlipRight(Math.max(0, window.innerWidth - limit));
138
147
  }
139
148
  }, [usePortal, dropdownOpen, coords.left, coords.width]);
140
149
  var toggleOpenDropdown = function (e, state) {
@@ -209,5 +218,5 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
209
218
  (0, compat_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__dropdown__portal', className, internalClassName, {
210
219
  'ss__dropdown__portal--open': dropdownOpen,
211
220
  'ss__dropdown__portal--flip-x': flipX,
212
- }), css: styling.css, style: __assign({ position: 'fixed', top: coords.top, left: coords.left, width: coords.width, zIndex: 9999 }, (dropUp ? { transform: 'translateY(-100%)' } : {})), children: contentElement }), document.body)] })) }));
221
+ }), css: styling.css, style: __assign(__assign(__assign({ position: 'fixed', top: coords.top }, (flipX ? { right: flipRight } : { left: coords.left, width: coords.width })), { zIndex: 9999 }), (dropUp ? { transform: 'translateY(-100%)' } : {})), children: contentElement }), document.body)] })) }));
213
222
  });
package/dist/cjs/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatAttachmentContext.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA4H7D,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,GAAG,CAAC,OAAO;;CAqHjG,CAAC;AAQH,MAAM,MAAM,yBAAyB,GAAG;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,yBAAyB,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,cAAc,CAAC,0BAA0B,CAAC,CAAC"}
1
+ {"version":3,"file":"ChatAttachmentContext.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA6H7D,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,GAAG,CAAC,OAAO;;CAqHjG,CAAC;AAQH,MAAM,MAAM,yBAAyB,GAAG;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,yBAAyB,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,cAAc,CAAC,0BAA0B,CAAC,CAAC"}
package/dist/cjs/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.js CHANGED
@@ -65,7 +65,7 @@ var defaultStyles = function () {
65
65
  border: '1px solid #eee',
66
66
  borderRadius: '0.5em',
67
67
  background: '#f9fafb',
68
- maxWidth: '14em',
68
+ maxWidth: 'calc(50% - 0.25em)',
69
69
  '&.ss__chat-attachment-context__item--clickable': {
70
70
  cursor: 'pointer',
71
71
  '&:hover': {
@@ -80,6 +80,7 @@ var defaultStyles = function () {
80
80
  background: '#fff5f5',
81
81
  borderColor: '#fca5a5',
82
82
  color: '#b91c1c',
83
+ maxWidth: '100%',
83
84
  },
84
85
  '.ss__chat-attachment-context__item__content': {
85
86
  position: 'relative',
@@ -173,7 +174,7 @@ exports.ChatAttachmentContext = (0, mobx_react_lite_1.observer)(function (proper
173
174
  return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-attachment-context__item', {
174
175
  'ss__chat-attachment-context__item--error': item.hasError,
175
176
  'ss__chat-attachment-context__item--clickable': isClickable,
176
- }), onClick: item.onClick, onKeyDown: function (e) { return handleItemKeyDown(e, item.onClick); }, role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, "aria-label": isClickable ? "Open ".concat(item.name) : undefined, children: [item.hasError ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__error-icon', "aria-hidden": "true", children: "!" }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__error-message', children: item.errorMessage || "Upload Failed - ".concat(item.name) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat-attachment-context__item__content', children: [item.imageUrl && (0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image, { className: item.isLoading ? 'loading' : '', src: item.imageUrl, alt: item.name })), item.isLoading && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat-attachment-context__item__loading', role: "status", "aria-label": "Loading ".concat(item.name), children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__name', title: item.name, children: item.name })] })), item.onRemove && (items.length > 1 || !onClose) && ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.removeButton, { className: 'ss__chat-attachment-context__item__remove', "aria-label": "Remove ".concat(item.name), onClick: function (e) {
177
+ }), onClick: item.onClick, onKeyDown: function (e) { return handleItemKeyDown(e, item.onClick); }, role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, "aria-label": isClickable ? "Open ".concat(item.name) : undefined, children: [item.hasError ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__error-icon', "aria-hidden": "true", children: "!" }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__error-message', children: item.errorMessage || "Upload Failed - ".concat(item.name) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat-attachment-context__item__content', children: [item.imageUrl && (0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image, { className: item.isLoading ? 'loading' : '', src: item.imageUrl, alt: item.name })), item.isLoading && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat-attachment-context__item__loading', role: "status", "aria-label": "Loading ".concat(item.name), children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__name', title: item.name, children: item.name })] })), item.onRemove && (items.length > 1 || !onClose || isClickable) && ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.removeButton, { className: 'ss__chat-attachment-context__item__remove', "aria-label": "Remove ".concat(item.name), onClick: function (e) {
177
178
  var _a;
178
179
  e.stopPropagation();
179
180
  if (!item.isLoading)
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;AA4brE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAgQvF,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;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,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;AA2crE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAiQvF,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;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,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
@@ -33,7 +33,7 @@ var defaultStyles = function (_a) {
33
33
  flexDirection: 'column',
34
34
  gap: '1em',
35
35
  '.ss__chat-product-query-message__header': {
36
- background: new utilities_1.Colour(colorPrimary).lightenHex(0.2),
36
+ background: new utilities_1.Colour(colorPrimary).lightenHex(0.05),
37
37
  padding: '1em',
38
38
  display: 'flex',
39
39
  flexDirection: 'column',
@@ -110,7 +110,7 @@ var defaultStyles = function (_a) {
110
110
  '.ss__chat-product-query-message__header__product__actions': {
111
111
  display: 'flex',
112
112
  flexDirection: 'column',
113
- alignItems: 'flex-end',
113
+ alignItems: 'stretch',
114
114
  alignSelf: 'stretch',
115
115
  justifyContent: 'center',
116
116
  gap: '0.35em',
@@ -128,6 +128,7 @@ var defaultStyles = function (_a) {
128
128
  },
129
129
  },
130
130
  '.ss__chat-product-query-message__header__product__actions__add-to-cart .ss__button': {
131
+ flexDirection: 'row-reverse',
131
132
  borderRadius: '0.5em',
132
133
  padding: '0.4em 0.75em',
133
134
  fontWeight: 'bold',
@@ -135,22 +136,36 @@ var defaultStyles = function (_a) {
135
136
  whiteSpace: 'nowrap',
136
137
  cursor: 'pointer',
137
138
  fontSize: '0.8em',
138
- background: '#D4A843',
139
- color: '#1F2937',
139
+ background: '#feeeae',
140
+ color: '#000',
141
+ justifyContent: 'center',
142
+ width: '100%',
143
+ textAlign: 'center',
144
+ svg: {
145
+ fill: '#000',
146
+ stroke: '#000',
147
+ },
140
148
  '&:not(.ss__button--disabled):hover': {
141
- background: '#c49a3a',
149
+ background: '#fde68a',
142
150
  },
143
151
  },
144
- // Visual styles for the Show similar / Discuss product buttons live in the
145
- // Chat component so the chat-level theme drives them. Only layout-related
146
- // rules remain here.
147
152
  '.ss__chat-product-query-message__header__product__actions__show-similar .ss__button, .ss__chat-product-query-message__header__product__actions__discuss-product .ss__button': {
153
+ flexDirection: 'row-reverse',
148
154
  borderRadius: '0.5em',
149
155
  padding: '0.4em 0.75em',
150
156
  fontWeight: 'bold',
151
157
  whiteSpace: 'nowrap',
152
158
  cursor: 'pointer',
153
159
  fontSize: '0.8em',
160
+ background: '#000',
161
+ color: '#fff',
162
+ justifyContent: 'center',
163
+ width: '100%',
164
+ textAlign: 'center',
165
+ svg: {
166
+ fill: '#fff',
167
+ stroke: '#fff',
168
+ },
154
169
  },
155
170
  },
156
171
  },
@@ -456,10 +471,10 @@ exports.ChatProductQueryMessage = (0, mobx_react_lite_1.observer)(function (prop
456
471
  (_a = controller === null || controller === void 0 ? void 0 : controller.store.currentChat) === null || _a === void 0 ? void 0 : _a.popProductQueryMessage(chatItem.sourceMessageId);
457
472
  controller === null || controller === void 0 ? void 0 : controller.store.clearProductQuickview();
458
473
  };
459
- 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)("button", { type: "button", className: (0, classnames_1.default)('ss__chat-product-query-message__header__back'), "aria-label": "Back to inspiration", 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 || displayedCore.parentImageUrl) && ((0, jsx_runtime_1.jsx)(Image_1.Image, { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__image'), src: (displayedCore.imageUrl || displayedCore.parentImageUrl), 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 () {
474
+ 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)("button", { type: "button", className: (0, classnames_1.default)('ss__chat-product-query-message__header__back'), "aria-label": "Back to inspiration", 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 || displayedCore.parentImageUrl) && ((0, jsx_runtime_1.jsx)(Image_1.Image, { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__image'), src: (displayedCore.imageUrl || displayedCore.parentImageUrl), 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, { icon: "cart", content: 'Add to Cart', onClick: function () {
460
475
  controller === null || controller === void 0 ? void 0 : controller.track.product.addToCart(product);
461
476
  controller === null || controller === void 0 ? void 0 : controller.addToCart(product);
462
- } }) }), (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.productSimilar(sourceProduct); } }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__discuss-product'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { content: 'Discuss Product', onClick: function () { return controller === null || controller === void 0 ? void 0 : controller.productQuery(sourceProduct); } }) })] })] })] }), selections.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__variants'), role: "group", "aria-label": "Variant selection", 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'), id: "ss__chat-pq-variant-".concat(selection.field), 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'), role: "radiogroup", "aria-labelledby": "ss__chat-pq-variant-".concat(selection.field), children: selection.values.map(function (selectionValue) {
477
+ } }) }), (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, { icon: "search-thin", content: 'Show Similar', onClick: function () { return controller === null || controller === void 0 ? void 0 : controller.productSimilar(sourceProduct); } }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__discuss-product'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: "chat", content: 'Discuss Product', onClick: function () { return controller === null || controller === void 0 ? void 0 : controller.productQuery(sourceProduct); } }) })] })] })] }), selections.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__variants'), role: "group", "aria-label": "Variant selection", 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'), id: "ss__chat-pq-variant-".concat(selection.field), 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'), role: "radiogroup", "aria-labelledby": "ss__chat-pq-variant-".concat(selection.field), children: selection.values.map(function (selectionValue) {
463
478
  var _a;
464
479
  var isUnavailable = !selectionValue.available;
465
480
  var isSelected = ((_a = selection.selected) === null || _a === void 0 ? void 0 : _a.value) === selectionValue.value;
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;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA6BrE,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,GAAG,CAAC,OAAO;;CA85C/E,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,uBAAuB,GAAG;IACrC,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;IAC1C,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,QAAQ;CAExB"}
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;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA6BrE,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,GAAG,CAAC,OAAO;;CAs7C/E,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,uBAAuB,GAAG;IACrC,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;IAC1C,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,QAAQ;CAExB"}
package/dist/cjs/components/src/components/Organisms/Chat/Chat.js CHANGED
@@ -92,7 +92,7 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
92
92
  logo: 'https://cdn.athoscommerce.net/snap/images/Athos%20Commerce_Icon_white.svg',
93
93
  title: 'Athos Conversational Assistant',
94
94
  subtitle: 'Your Guided Discovery Expert',
95
- multiselectFacets: true,
95
+ multiselectFacets: false,
96
96
  disableBubbleSuggestedQuestions: isMobile ? true : false,
97
97
  primaryColorBg: '#253B80',
98
98
  primaryColorFg: '#fff',
@@ -197,10 +197,14 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
197
197
  // Re-focus the chat input on desktop after a search completes.
198
198
  // The input is disabled while loading, which causes the browser to drop focus.
199
199
  // On mobile we intentionally skip this so the virtual keyboard dismisses.
200
+ // Only fire on the loading true → false transition — running on mount steals
201
+ // focus away from the Storybook controls whenever the story re-renders.
202
+ var prevLoadingRef = (0, hooks_1.useRef)(store.loading);
200
203
  (0, hooks_1.useEffect)(function () {
201
- if (!store.loading && !isMobile && store.open) {
204
+ if (prevLoadingRef.current && !store.loading && !isMobile && store.open) {
202
205
  controller.focusInput();
203
206
  }
207
+ prevLoadingRef.current = store.loading;
204
208
  }, [store.loading]);
205
209
  // const subProps: ChatSubProps = {};
206
210
  var activeMessage = (_c = store.currentChat) === null || _c === void 0 ? void 0 : _c.activeMessage;
@@ -221,19 +225,34 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
221
225
  var sideChatTypes = isMobile
222
226
  ? __spreadArray(__spreadArray(['inspirationResult'], (isFirstMobileComparison ? ['productComparison'] : []), true), (mobileProductInfoOpen ? ['productQuery'] : []), true) : ['inspirationResult', 'productComparison', 'productQuery'];
223
227
  var shouldShowSideChat = activeMessage && sideChatTypes.includes(activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.messageType) && ((_d = store.currentChat) === null || _d === void 0 ? void 0 : _d.dismissedSideChatMessageId) !== activeMessage.id;
224
- var styling = (0, utilities_1.mergeStyles)({
225
- mobile: isMobile,
226
- offset: offset,
227
- hasSideChat: !!shouldShowSideChat,
228
- footerHeight: footerHeight,
229
- primaryColorBg: colorPrimary,
230
- primaryColorFg: colorPrimaryText,
231
- primaryAccentColorBg: colorPrimaryAccent,
232
- primaryAccentColorFg: colorPrimaryAccentText,
233
- secondaryAccentColorBg: colorSecondaryAccent,
234
- secondaryAccentColorFg: colorSecondaryAccentText,
235
- position: chatPosition,
236
- }, Chat_styles_1.chatDefaultStyles);
228
+ var hasSideChat = !!shouldShowSideChat;
229
+ var styling = (0, hooks_1.useMemo)(function () {
230
+ return (0, utilities_1.mergeStyles)({
231
+ mobile: isMobile,
232
+ offset: offset,
233
+ hasSideChat: hasSideChat,
234
+ footerHeight: footerHeight,
235
+ primaryColorBg: colorPrimary,
236
+ primaryColorFg: colorPrimaryText,
237
+ primaryAccentColorBg: colorPrimaryAccent,
238
+ primaryAccentColorFg: colorPrimaryAccentText,
239
+ secondaryAccentColorBg: colorSecondaryAccent,
240
+ secondaryAccentColorFg: colorSecondaryAccentText,
241
+ position: chatPosition,
242
+ }, Chat_styles_1.chatDefaultStyles);
243
+ }, [
244
+ isMobile,
245
+ offset,
246
+ hasSideChat,
247
+ footerHeight,
248
+ colorPrimary,
249
+ colorPrimaryText,
250
+ colorPrimaryAccent,
251
+ colorPrimaryAccentText,
252
+ colorSecondaryAccent,
253
+ colorSecondaryAccentText,
254
+ chatPosition,
255
+ ]);
237
256
  // Lock body scroll while chat is open so touch/wheel scrolls don't leak to the page behind
238
257
  (0, hooks_1.useEffect)(function () {
239
258
  if (!store.open)
@@ -288,7 +307,10 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
288
307
  var HistoryPopup = function (props) { return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__history", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__history__header", children: [(0, jsx_runtime_1.jsx)("h4", { children: "History" }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__history__header__buttons", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { content: "clear", onClick: function () {
289
308
  controller.store.clearHistory();
290
309
  props.toggleOpen && props.toggleOpen();
291
- } }) })] }), store.chats.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__history__chats", children: store.chats.map(function (chat) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__history__chats__chat", children: (0, jsx_runtime_1.jsxs)(Button_1.Button, { className: "ss__chat__history__chat__button", onClick: function () {
310
+ } }) })] }), store.chats.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__history__chats", children: store.chats
311
+ .slice()
312
+ .reverse()
313
+ .map(function (chat) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__history__chats__chat", children: (0, jsx_runtime_1.jsxs)(Button_1.Button, { className: "ss__chat__history__chat__button", onClick: function () {
292
314
  controller.store.switchChat(chat.id);
293
315
  }, disabled: chat.id === store.currentChatId, children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__history__chat__button__text", children: (function () {
294
316
  var lastUserMessage = __spreadArray([], chat.chat, true).reverse().find(function (message) { return message.messageType === 'user'; });
@@ -299,7 +321,7 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
299
321
  })() }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__history__chat__button__date", children: chat.createdAt.toLocaleString() })] }) }, chat.id)); }) })) : null] })); };
300
322
  var FacetButton = function (props) { return (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: props.open ? 'angle-down' : 'angle-up', children: props.label }); };
301
323
  var getFacetButtonLabel = function (facet) {
302
- var _a, _b, _c;
324
+ var _a, _b;
303
325
  var base = facet.label || facet.field;
304
326
  // Slider facets show the active low-high range in the button when narrowed.
305
327
  if (facet.type === 'range') {
@@ -311,24 +333,19 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
311
333
  }
312
334
  return base;
313
335
  }
314
- var applied = new Set();
315
- // Count values marked as filtered (already applied on the server)
316
- (facet.values || []).forEach(function (value) {
336
+ // Count current selections from the urlManager (source of truth for live state).
337
+ // `value.filtered` reflects the server's snapshot at response time and goes stale
338
+ // once the user deselects locally.
339
+ var applied = (facet.values || []).filter(function (value) {
317
340
  var _a, _b;
318
- if (value === null || value === void 0 ? void 0 : value.filtered) {
319
- if ('low' in value && 'high' in value) {
320
- applied.add("".concat((_a = value.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = value.high) !== null && _b !== void 0 ? _b : '*'));
321
- }
322
- else {
323
- applied.add(value.value);
324
- }
325
- }
326
- });
327
- // Count pending facet attachments (newly selected, not yet sent)
328
- (((_c = controller.store.currentChat) === null || _c === void 0 ? void 0 : _c.attachments.items) || [])
329
- .filter(function (item) { return item.type === 'facet' && item.key === facet.field && (item.state === 'active' || item.state === 'attached'); })
330
- .forEach(function (item) { return applied.add(item.value); });
331
- return applied.size > 0 ? "".concat(base, " (").concat(applied.size, ")") : base;
341
+ if (!value)
342
+ return false;
343
+ var optionValue = 'low' in value && 'high' in value
344
+ ? "".concat((_a = value.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = value.high) !== null && _b !== void 0 ? _b : '*')
345
+ : value.value || value.label;
346
+ return controller.store.isFacetSelected(facet.field, optionValue);
347
+ }).length;
348
+ return applied > 0 ? "".concat(base, " (").concat(applied, ")") : base;
332
349
  };
333
350
  // Slider dropdown grows to fill the remaining chat width from its anchor,
334
351
  // so the price range slider isn't cramped inside a 150px-wide dropdown.
@@ -362,7 +379,14 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
362
379
  boxShadow: '0px 3px 6px 0px rgba(0, 0, 0, 0.2)',
363
380
  borderRadius: '6px',
364
381
  },
365
- }, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet__options", children: (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet__slider", style: { padding: '12px 16px' }, children: (0, jsx_runtime_1.jsx)(__1.FacetSlider, { facet: props.facet }) }) }) }) }));
382
+ }, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet__options", children: (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet__slider", style: { padding: '12px 16px' }, children: (0, jsx_runtime_1.jsx)(__1.FacetSlider, { facet: props.facet, onChange: function () {
383
+ if (!multiselectFacets) {
384
+ // FacetSlider fires onChange before its urlManager update; defer
385
+ // so controller.search() reads the updated filter state and
386
+ // promotes the request to productSearch.
387
+ queueMicrotask(function () { return controller.search(); });
388
+ }
389
+ } }) }) }) }) }));
366
390
  };
367
391
  // TODO: if starting a new chat and it's expired, this button would then disappear
368
392
  if (!controller.store.chatEnabled) {
@@ -509,7 +533,7 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
509
533
  controller.store.createChat();
510
534
  }, children: "New Session" })] })), store.facets && store.facets.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__actions', children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__wrap", 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 && store.hasPendingFacetChanges && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__actions__facets-apply ss__chat__actions__facets-apply--active', children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
511
535
  controller.search();
512
- }, children: "Apply" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--facets", children: store.facets.slice(0, 10).map(function (facet, idx) {
536
+ }, children: store.pendingFacetCount > 0 ? "Apply (".concat(store.pendingFacetCount, ")") : 'Clear facets' }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--facets", children: store.facets.slice(0, 10).map(function (facet, idx) {
513
537
  var _a;
514
538
  // range/slider facets render via FacetSlider; everything else needs at least one value to be useful
515
539
  if (facet.type !== 'range' && !((_a = facet.values) === null || _a === void 0 ? void 0 : _a.length))
@@ -517,7 +541,7 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
517
541
  if (facet.type === 'range') {
518
542
  return (0, jsx_runtime_1.jsx)(SliderFacetDropdown, { facet: facet, label: getFacetButtonLabel(facet) }, idx);
519
543
  }
520
- 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: {
544
+ 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, boundaryRef: chatRef, button: (0, jsx_runtime_1.jsx)(FacetButton, { label: getFacetButtonLabel(facet) }), style: {
521
545
  '.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
522
546
  ? {
523
547
  '.ss__chat__actions__facet__option--checkbox': {
@@ -683,25 +707,21 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
683
707
  };
684
708
  })
685
709
  : [];
686
- var productItems = productAttachments.map(function (item) { return ({
687
- id: item.id,
688
- name: item.name || '',
689
- imageUrl: item.thumbnailUrl || '',
690
- onClick: isMobile
691
- ? function () {
692
- setMobileProductInfoOpen(true);
693
- }
694
- : function () {
695
- var _a, _b, _c;
696
- (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.setActiveMessage(((_c = (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.activeMessage) === null || _c === void 0 ? void 0 : _c.id) || '');
697
- },
698
- onRemove: function () {
710
+ var productItems = productAttachments.map(function (item) {
711
+ var remove = function () {
699
712
  var _a, _b;
700
713
  (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.remove(item.id);
701
714
  setMobileProductInfoOpen(false);
702
715
  (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.dismissSideChat();
703
- },
704
- }); });
716
+ };
717
+ return {
718
+ id: item.id,
719
+ name: item.name || '',
720
+ imageUrl: item.thumbnailUrl || '',
721
+ onClick: remove,
722
+ onRemove: remove,
723
+ };
724
+ });
705
725
  var imageItems = imageAttachments.map(function (item) {
706
726
  var _a;
707
727
  return ({
@@ -714,7 +734,7 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
714
734
  onRemove: function () { var _a; return (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.remove(item.id); },
715
735
  });
716
736
  });
717
- var productTitle = productItems.length > 1 ? 'Compare these products' : 'Ask about this product' + (isMobile ? '' : ' (click for details)');
737
+ var productTitle = productItems.length > 1 ? 'Compare these products' : 'Ask about this product';
718
738
  var hasImageError = imageItems.some(function (item) { return item.hasError; });
719
739
  var imageTitle = imageItems.length > 0 && !hasImageError ? 'Find products similar to this image:' : '';
720
740
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [comparisonItems.length > 0 && ((0, jsx_runtime_1.jsx)(ChatAttachmentContext_1.ChatAttachmentContext, __assign({}, subProps.attachmentContext, { title: 'Compare these products', items: comparisonItems, onClose: function () {
@@ -796,7 +816,7 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)(function (properties) {
796
816
  return [2 /*return*/];
797
817
  }
798
818
  });
799
- }); }, multiple: true, type: "file", accept: "image/*", className: "ss__chat__input__input__file" })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__input__actions', children: (function () {
819
+ }); }, type: "file", accept: "image/*", className: "ss__chat__input__input__file" })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__input__actions', children: (function () {
800
820
  var _a, _b;
801
821
  var hasImageAttachment = (((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.attached) || []).some(function (item) { return item.type === 'image' && !item.error; });
802
822
  var messageEmpty = !controller.store.inputValue.trim();
package/dist/cjs/components/src/components/Organisms/Chat/Chat.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Chat.styles.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,cAAc,CA0mCzD,CAAC"}
1
+ {"version":3,"file":"Chat.styles.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,cAAc,CA6mCzD,CAAC"}
package/dist/cjs/components/src/components/Organisms/Chat/Chat.styles.js CHANGED
@@ -268,7 +268,7 @@ var chatDefaultStyles = function (_a) {
268
268
  top: 6,
269
269
  right: 0,
270
270
  background: 'white',
271
- zIndex: 2,
271
+ zIndex: 21,
272
272
  boxShadow: '0px 3px 6px 0px rgba(0, 0, 0, 0.2)',
273
273
  borderRadius: '6px',
274
274
  display: 'flex',
@@ -297,7 +297,7 @@ var chatDefaultStyles = function (_a) {
297
297
  },
298
298
  '.ss__chat__history__chats': {
299
299
  display: 'flex',
300
- flexDirection: 'column-reverse',
300
+ flexDirection: 'column',
301
301
  gap: 5,
302
302
  maxHeight: '300px',
303
303
  overflowY: 'auto',
@@ -642,7 +642,10 @@ var chatDefaultStyles = function (_a) {
642
642
  '.ss__chat__actions--suggested': {
643
643
  overflowX: 'scroll',
644
644
  },
645
- '.ss__chat__actions__facet': {},
645
+ '.ss__chat__actions__facet': {
646
+ padding: '1px', // make room for outline when focused
647
+ flexShrink: 0,
648
+ },
646
649
  '.ss__chat__actions__facets-dropdown': {
647
650
  '.ss__dropdown__content': {
648
651
  bottom: '0',
package/dist/cjs/components/src/components/Organisms/Chat/hooks/useChatFileUpload.js CHANGED
@@ -72,7 +72,7 @@ var useChatFileUpload = function (_a) {
72
72
  setIsDraggingFile(false);
73
73
  };
74
74
  var onDrop = function (e) { return __awaiter(void 0, void 0, void 0, function () {
75
- var dropped, images, dt;
75
+ var dropped, firstImage, dt;
76
76
  var _a;
77
77
  return __generator(this, function (_b) {
78
78
  switch (_b.label) {
@@ -83,11 +83,11 @@ var useChatFileUpload = function (_a) {
83
83
  dragCounterRef.current = 0;
84
84
  setIsDraggingFile(false);
85
85
  dropped = Array.from(((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) || []);
86
- images = dropped.filter(function (f) { return f.type.startsWith('image/'); });
87
- if (images.length === 0)
86
+ firstImage = dropped.find(function (f) { return f.type.startsWith('image/'); });
87
+ if (!firstImage)
88
88
  return [2 /*return*/];
89
89
  dt = new DataTransfer();
90
- images.forEach(function (f) { return dt.items.add(f); });
90
+ dt.items.add(firstImage);
91
91
  return [4 /*yield*/, onUpload(dt.files)];
92
92
  case 1:
93
93
  _b.sent();
package/dist/cjs/src/Templates/SnapTemplates.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SnapTemplates.d.ts","sourceRoot":"","sources":["../../../../src/Templates/SnapTemplates.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,OAAO,EAAkB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxE,OAAO,EAAE,KAAK,+BAA+B,EAAE,MAAM,gCAAgC,CAAC;AACtF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,KAAK,EAA0C,cAAc,EAAoB,MAAM,gCAAgC,CAAC;AAC/H,OAAO,KAAK,EAAE,6BAA6B,EAAoC,MAAM,6CAA6C,CAAC;AACnI,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,KAAK,EAOX,0BAA0B,EAC1B,4BAA4B,EAE5B,MAAM,wBAAwB,CAAC;AAoChC,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,wBAAwB,iBAAiB,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC;AAC5D,MAAM,MAAM,2BAA2B,GAAG,4BAA4B,GAAG;IACxE,QAAQ,EAAE,IAAI,CAAC;IACf,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,0BAA0B,GAAG;IACpE,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAwBF,eAAO,MAAM,gBAAgB,EAAE,YAAiB,CAAC;AAEjD,eAAO,MAAM,wCAAwC,EAAE,+BAItD,CAAC;AAEF,qBAAa,aAAc,SAAQ,IAAI;IACtC,SAAS,EAAE,cAAc,CAAC;gBACd,MAAM,EAAE,mBAAmB,GAAG,2BAA2B;CAoGrE;AAED,wBAAgB,cAAc,CAAC,wBAAwB,EACtD,eAAe,EAAE,MAAM,EAAE,EACzB,kBAAkB,EAAE,wBAAwB,EAAE,GAC5C;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,wBAAwB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;CAAE,CAKrE;AAED,eAAO,MAAM,qBAAqB,mBAAoB,mBAAmB,kBAAkB,cAAc,KAAG,cAAc,EAoCzH,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBAAoB,mBAAmB,kBAAkB,cAAc,KAAG,cAAc,EA2CvH,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,GAAG,cAAc,EAAE,CAqCjI;AAED,wBAAgB,oCAAoC,CACnD,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EACjE,cAAc,EAAE,cAAc,GAC5B;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,6BAA6B,CAAA;CAAE,CAiDnD;AAED,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EAAE,cAAc,EAAE,cAAc,GAAG,UAAU,CA0J9I;AAED,wBAAgB,aAAa,CAC5B,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EACjE,cAAc,EAAE,cAAc,EAC9B,cAAc,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,gBAAgB,GAAG,MAAM,GACpE,cAAc,EAAE,CAmFlB"}
1
+ {"version":3,"file":"SnapTemplates.d.ts","sourceRoot":"","sources":["../../../../src/Templates/SnapTemplates.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,OAAO,EAAkB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxE,OAAO,EAAE,KAAK,+BAA+B,EAAE,MAAM,gCAAgC,CAAC;AACtF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,KAAK,EAA0C,cAAc,EAAoB,MAAM,gCAAgC,CAAC;AAC/H,OAAO,KAAK,EAAE,6BAA6B,EAAoC,MAAM,6CAA6C,CAAC;AACnI,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,KAAK,EAOX,0BAA0B,EAC1B,4BAA4B,EAE5B,MAAM,wBAAwB,CAAC;AAoChC,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,wBAAwB,iBAAiB,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC;AAC5D,MAAM,MAAM,2BAA2B,GAAG,4BAA4B,GAAG;IACxE,QAAQ,EAAE,IAAI,CAAC;IACf,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,0BAA0B,GAAG;IACpE,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAwBF,eAAO,MAAM,gBAAgB,EAAE,YAAiB,CAAC;AAEjD,eAAO,MAAM,wCAAwC,EAAE,+BAItD,CAAC;AAEF,qBAAa,aAAc,SAAQ,IAAI;IACtC,SAAS,EAAE,cAAc,CAAC;gBACd,MAAM,EAAE,mBAAmB,GAAG,2BAA2B;CAoGrE;AAED,wBAAgB,cAAc,CAAC,wBAAwB,EACtD,eAAe,EAAE,MAAM,EAAE,EACzB,kBAAkB,EAAE,wBAAwB,EAAE,GAC5C;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,wBAAwB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;CAAE,CAKrE;AAED,eAAO,MAAM,qBAAqB,mBAAoB,mBAAmB,kBAAkB,cAAc,KAAG,cAAc,EAoCzH,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBAAoB,mBAAmB,kBAAkB,cAAc,KAAG,cAAc,EA2CvH,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,GAAG,cAAc,EAAE,CAqCjI;AAED,wBAAgB,oCAAoC,CACnD,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EACjE,cAAc,EAAE,cAAc,GAC5B;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,6BAA6B,CAAA;CAAE,CAiDnD;AAED,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EAAE,cAAc,EAAE,cAAc,GAAG,UAAU,CA6J9I;AAED,wBAAgB,aAAa,CAC5B,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EACjE,cAAc,EAAE,cAAc,EAC9B,cAAc,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,gBAAgB,GAAG,MAAM,GACpE,cAAc,EAAE,CAmFlB"}
package/dist/cjs/src/Templates/SnapTemplates.js CHANGED
@@ -536,7 +536,7 @@ function createSnapConfig(templateConfig, templatesStore) {
536
536
  config: {
537
537
  id: 'chat',
538
538
  plugins: createPlugins(templateConfig, templatesStore, 'chat'),
539
- settings: templateConfig.chat.settings || {},
539
+ settings: __assign(__assign({}, (templateConfig.chat.settings || {})), { languageCode: templatesStore.language }),
540
540
  },
541
541
  targeters: (0, exports.createChatTargeters)(templateConfig, templatesStore),
542
542
  };
package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts CHANGED
@@ -23,5 +23,8 @@ export type DropdownTemplatesLegalProps = {
23
23
  disableA11y?: boolean;
24
24
  usePortal?: boolean;
25
25
  dropUp?: boolean;
26
+ boundaryRef?: {
27
+ current: HTMLElement | null;
28
+ };
26
29
  };
27
30
  //# sourceMappingURL=Dropdown.d.ts.map
package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAqC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAiPzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC"}
1
+ {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAqC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAwPzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,CAAC;CAC9C,CAAC"}
package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.js CHANGED
@@ -47,7 +47,7 @@ export const Dropdown = observer((properties) => {
47
47
  treePath: globalTreePath,
48
48
  };
49
49
  const props = mergeProps('dropdown', globalTheme, defaultProps, properties);
50
- const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, onClick, onToggle, focusTrapContent, startOpen, disableClickOutside, disableA11y, className, internalClassName, treePath, usePortal, dropUp, customComponent, } = props;
50
+ const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, onClick, onToggle, focusTrapContent, startOpen, disableClickOutside, disableA11y, className, internalClassName, treePath, usePortal, dropUp, boundaryRef, customComponent, } = props;
51
51
  if (customComponent) {
52
52
  const ComponentOverride = useComponent(snap?.templates?.library.import.component.dropdown || {}, customComponent);
53
53
  if (ComponentOverride) {
@@ -68,6 +68,7 @@ export const Dropdown = observer((properties) => {
68
68
  const contentRef = useRef(null);
69
69
  const [coords, setCoords] = useState({ top: 0, left: 0, width: 0 });
70
70
  const [flipX, setFlipX] = useState(false);
71
+ const [flipRight, setFlipRight] = useState(0);
71
72
  let innerRef;
72
73
  if (!disableClickOutside) {
73
74
  innerRef = useClickOutside((e) => {
@@ -109,12 +110,19 @@ export const Dropdown = observer((properties) => {
109
110
  setFlipX(false);
110
111
  }
111
112
  }, [dropdownOpen]);
112
- // After the portal renders, check if content overflows the right viewport edge
113
- // and flip the horizontal anchor if so. useLayoutEffect fires before paint to avoid flash.
113
+ // After the portal renders, check if content overflows the right edge of the
114
+ // boundary (when provided) or the viewport and flip the horizontal anchor if so.
115
+ // When flipped, anchor the portal to the boundary's right edge so the dropdown
116
+ // stops at the boundary rather than at the button's right edge.
117
+ // useLayoutEffect fires before paint to avoid flash.
114
118
  useLayoutEffect(() => {
115
119
  if (usePortal && dropdownOpen && contentRef.current && coords.width > 0) {
116
120
  const rect = contentRef.current.getBoundingClientRect();
117
- setFlipX(rect.right > window.innerWidth);
121
+ const limit = boundaryRef?.current?.getBoundingClientRect().right ?? window.innerWidth;
122
+ const shouldFlip = rect.right > limit;
123
+ setFlipX(shouldFlip);
124
+ if (shouldFlip)
125
+ setFlipRight(Math.max(0, window.innerWidth - limit));
118
126
  }
119
127
  }, [usePortal, dropdownOpen, coords.left, coords.width]);
120
128
  const toggleOpenDropdown = (e, state) => {
@@ -192,8 +200,7 @@ export const Dropdown = observer((properties) => {
192
200
  }), css: styling.css, style: {
193
201
  position: 'fixed',
194
202
  top: coords.top,
195
- left: coords.left,
196
- width: coords.width,
203
+ ...(flipX ? { right: flipRight } : { left: coords.left, width: coords.width }),
197
204
  zIndex: 9999,
198
205
  ...(dropUp ? { transform: 'translateY(-100%)' } : {}),
199
206
  }, children: contentElement }), document.body)] }) }));
package/dist/esm/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatAttachmentContext.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA4H7D,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,GAAG,CAAC,OAAO;;CAqHjG,CAAC;AAQH,MAAM,MAAM,yBAAyB,GAAG;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,yBAAyB,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,cAAc,CAAC,0BAA0B,CAAC,CAAC"}
1
+ {"version":3,"file":"ChatAttachmentContext.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA6H7D,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,GAAG,CAAC,OAAO;;CAqHjG,CAAC;AAQH,MAAM,MAAM,yBAAyB,GAAG;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,yBAAyB,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,cAAc,CAAC,0BAA0B,CAAC,CAAC"}
package/dist/esm/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.js CHANGED
@@ -48,7 +48,7 @@ const defaultStyles = () => {
48
48
  border: '1px solid #eee',
49
49
  borderRadius: '0.5em',
50
50
  background: '#f9fafb',
51
- maxWidth: '14em',
51
+ maxWidth: 'calc(50% - 0.25em)',
52
52
  '&.ss__chat-attachment-context__item--clickable': {
53
53
  cursor: 'pointer',
54
54
  '&:hover': {
@@ -63,6 +63,7 @@ const defaultStyles = () => {
63
63
  background: '#fff5f5',
64
64
  borderColor: '#fca5a5',
65
65
  color: '#b91c1c',
66
+ maxWidth: '100%',
66
67
  },
67
68
  '.ss__chat-attachment-context__item__content': {
68
69
  position: 'relative',
@@ -156,7 +157,7 @@ export const ChatAttachmentContext = observer((properties) => {
156
157
  return (_jsxs("div", { className: classnames('ss__chat-attachment-context__item', {
157
158
  'ss__chat-attachment-context__item--error': item.hasError,
158
159
  'ss__chat-attachment-context__item--clickable': isClickable,
159
- }), onClick: item.onClick, onKeyDown: (e) => handleItemKeyDown(e, item.onClick), role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, "aria-label": isClickable ? `Open ${item.name}` : undefined, children: [item.hasError ? (_jsxs(_Fragment, { children: [_jsx("div", { className: 'ss__chat-attachment-context__item__error-icon', "aria-hidden": "true", children: "!" }), _jsx("div", { className: 'ss__chat-attachment-context__item__error-message', children: item.errorMessage || `Upload Failed - ${item.name}` })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'ss__chat-attachment-context__item__content', children: [item.imageUrl && _jsx(Image, { ...subProps.image, className: item.isLoading ? 'loading' : '', src: item.imageUrl, alt: item.name }), item.isLoading && (_jsxs("div", { className: 'ss__chat-attachment-context__item__loading', role: "status", "aria-label": `Loading ${item.name}`, children: [_jsx("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), _jsx("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), _jsx("div", { className: 'ss__chat-attachment-context__item__loading__dot' })] }))] }), _jsx("div", { className: 'ss__chat-attachment-context__item__name', title: item.name, children: item.name })] })), item.onRemove && (items.length > 1 || !onClose) && (_jsx(Button, { ...subProps.removeButton, className: 'ss__chat-attachment-context__item__remove', "aria-label": `Remove ${item.name}`, onClick: (e) => {
160
+ }), onClick: item.onClick, onKeyDown: (e) => handleItemKeyDown(e, item.onClick), role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, "aria-label": isClickable ? `Open ${item.name}` : undefined, children: [item.hasError ? (_jsxs(_Fragment, { children: [_jsx("div", { className: 'ss__chat-attachment-context__item__error-icon', "aria-hidden": "true", children: "!" }), _jsx("div", { className: 'ss__chat-attachment-context__item__error-message', children: item.errorMessage || `Upload Failed - ${item.name}` })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'ss__chat-attachment-context__item__content', children: [item.imageUrl && _jsx(Image, { ...subProps.image, className: item.isLoading ? 'loading' : '', src: item.imageUrl, alt: item.name }), item.isLoading && (_jsxs("div", { className: 'ss__chat-attachment-context__item__loading', role: "status", "aria-label": `Loading ${item.name}`, children: [_jsx("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), _jsx("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), _jsx("div", { className: 'ss__chat-attachment-context__item__loading__dot' })] }))] }), _jsx("div", { className: 'ss__chat-attachment-context__item__name', title: item.name, children: item.name })] })), item.onRemove && (items.length > 1 || !onClose || isClickable) && (_jsx(Button, { ...subProps.removeButton, className: 'ss__chat-attachment-context__item__remove', "aria-label": `Remove ${item.name}`, onClick: (e) => {
160
161
  e.stopPropagation();
161
162
  if (!item.isLoading)
162
163
  item.onRemove?.();
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;AA4brE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAgQvF,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;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,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;AA2crE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAiQvF,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;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,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
@@ -15,7 +15,7 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
15
15
  flexDirection: 'column',
16
16
  gap: '1em',
17
17
  '.ss__chat-product-query-message__header': {
18
- background: new Colour(colorPrimary).lightenHex(0.2),
18
+ background: new Colour(colorPrimary).lightenHex(0.05),
19
19
  padding: '1em',
20
20
  display: 'flex',
21
21
  flexDirection: 'column',
@@ -92,7 +92,7 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
92
92
  '.ss__chat-product-query-message__header__product__actions': {
93
93
  display: 'flex',
94
94
  flexDirection: 'column',
95
- alignItems: 'flex-end',
95
+ alignItems: 'stretch',
96
96
  alignSelf: 'stretch',
97
97
  justifyContent: 'center',
98
98
  gap: '0.35em',
@@ -110,6 +110,7 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
110
110
  },
111
111
  },
112
112
  '.ss__chat-product-query-message__header__product__actions__add-to-cart .ss__button': {
113
+ flexDirection: 'row-reverse',
113
114
  borderRadius: '0.5em',
114
115
  padding: '0.4em 0.75em',
115
116
  fontWeight: 'bold',
@@ -117,22 +118,36 @@ const defaultStyles = ({ primaryColor, primaryColorText }) => {
117
118
  whiteSpace: 'nowrap',
118
119
  cursor: 'pointer',
119
120
  fontSize: '0.8em',
120
- background: '#D4A843',
121
- color: '#1F2937',
121
+ background: '#feeeae',
122
+ color: '#000',
123
+ justifyContent: 'center',
124
+ width: '100%',
125
+ textAlign: 'center',
126
+ svg: {
127
+ fill: '#000',
128
+ stroke: '#000',
129
+ },
122
130
  '&:not(.ss__button--disabled):hover': {
123
- background: '#c49a3a',
131
+ background: '#fde68a',
124
132
  },
125
133
  },
126
- // Visual styles for the Show similar / Discuss product buttons live in the
127
- // Chat component so the chat-level theme drives them. Only layout-related
128
- // rules remain here.
129
134
  '.ss__chat-product-query-message__header__product__actions__show-similar .ss__button, .ss__chat-product-query-message__header__product__actions__discuss-product .ss__button': {
135
+ flexDirection: 'row-reverse',
130
136
  borderRadius: '0.5em',
131
137
  padding: '0.4em 0.75em',
132
138
  fontWeight: 'bold',
133
139
  whiteSpace: 'nowrap',
134
140
  cursor: 'pointer',
135
141
  fontSize: '0.8em',
142
+ background: '#000',
143
+ color: '#fff',
144
+ justifyContent: 'center',
145
+ width: '100%',
146
+ textAlign: 'center',
147
+ svg: {
148
+ fill: '#fff',
149
+ stroke: '#fff',
150
+ },
136
151
  },
137
152
  },
138
153
  },
@@ -432,10 +447,10 @@ export const ChatProductQueryMessage = observer((properties) => {
432
447
  controller?.store.currentChat?.popProductQueryMessage(chatItem.sourceMessageId);
433
448
  controller?.store.clearProductQuickview();
434
449
  };
435
- 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("button", { type: "button", className: classnames('ss__chat-product-query-message__header__back'), "aria-label": "Back to inspiration", 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 || displayedCore.parentImageUrl) && (_jsx(Image, { className: classnames('ss__chat-product-query-message__header__product__image'), src: (displayedCore.imageUrl || displayedCore.parentImageUrl), 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: () => {
450
+ 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("button", { type: "button", className: classnames('ss__chat-product-query-message__header__back'), "aria-label": "Back to inspiration", 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 || displayedCore.parentImageUrl) && (_jsx(Image, { className: classnames('ss__chat-product-query-message__header__product__image'), src: (displayedCore.imageUrl || displayedCore.parentImageUrl), 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, { icon: "cart", content: 'Add to Cart', onClick: () => {
436
451
  controller?.track.product.addToCart(product);
437
452
  controller?.addToCart(product);
438
- } }) }), 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?.productSimilar(sourceProduct) }) })), _jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__discuss-product'), children: _jsx(Button, { content: 'Discuss Product', onClick: () => controller?.productQuery(sourceProduct) }) })] })] })] }), selections.length > 0 && (_jsx("div", { className: classnames('ss__chat-product-query-message__variants'), role: "group", "aria-label": "Variant selection", children: selections.map((selection) => (_jsxs("div", { children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__variants__label'), id: `ss__chat-pq-variant-${selection.field}`, children: [formatLabel(selection.field), " (", selection.values.length, ")"] }), _jsx("div", { className: classnames('ss__chat-product-query-message__variants__swatches'), role: "radiogroup", "aria-labelledby": `ss__chat-pq-variant-${selection.field}`, children: selection.values.map((selectionValue) => {
453
+ } }) }), controller?.store.features.similarProducts.enabled && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__show-similar'), children: _jsx(Button, { icon: "search-thin", content: 'Show Similar', onClick: () => controller?.productSimilar(sourceProduct) }) })), _jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__discuss-product'), children: _jsx(Button, { icon: "chat", content: 'Discuss Product', onClick: () => controller?.productQuery(sourceProduct) }) })] })] })] }), selections.length > 0 && (_jsx("div", { className: classnames('ss__chat-product-query-message__variants'), role: "group", "aria-label": "Variant selection", children: selections.map((selection) => (_jsxs("div", { children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__variants__label'), id: `ss__chat-pq-variant-${selection.field}`, children: [formatLabel(selection.field), " (", selection.values.length, ")"] }), _jsx("div", { className: classnames('ss__chat-product-query-message__variants__swatches'), role: "radiogroup", "aria-labelledby": `ss__chat-pq-variant-${selection.field}`, children: selection.values.map((selectionValue) => {
439
454
  const isUnavailable = !selectionValue.available;
440
455
  const isSelected = selection.selected?.value === selectionValue.value;
441
456
  return (_jsxs("button", { type: "button", className: classnames('ss__chat-product-query-message__variants__swatch', {
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;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA6BrE,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,GAAG,CAAC,OAAO;;CA85C/E,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,uBAAuB,GAAG;IACrC,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;IAC1C,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,QAAQ;CAExB"}
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;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA6BrE,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,GAAG,CAAC,OAAO;;CAs7C/E,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,uBAAuB,GAAG;IACrC,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;IAC1C,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,QAAQ;CAExB"}
package/dist/esm/components/src/components/Organisms/Chat/Chat.js CHANGED
@@ -29,7 +29,7 @@ export const ChatOrganism = observer((properties) => {
29
29
  logo: 'https://cdn.athoscommerce.net/snap/images/Athos%20Commerce_Icon_white.svg',
30
30
  title: 'Athos Conversational Assistant',
31
31
  subtitle: 'Your Guided Discovery Expert',
32
- multiselectFacets: true,
32
+ multiselectFacets: false,
33
33
  disableBubbleSuggestedQuestions: isMobile ? true : false,
34
34
  primaryColorBg: '#253B80',
35
35
  primaryColorFg: '#fff',
@@ -137,10 +137,14 @@ export const ChatOrganism = observer((properties) => {
137
137
  // Re-focus the chat input on desktop after a search completes.
138
138
  // The input is disabled while loading, which causes the browser to drop focus.
139
139
  // On mobile we intentionally skip this so the virtual keyboard dismisses.
140
+ // Only fire on the loading true → false transition — running on mount steals
141
+ // focus away from the Storybook controls whenever the story re-renders.
142
+ const prevLoadingRef = useRef(store.loading);
140
143
  useEffect(() => {
141
- if (!store.loading && !isMobile && store.open) {
144
+ if (prevLoadingRef.current && !store.loading && !isMobile && store.open) {
142
145
  controller.focusInput();
143
146
  }
147
+ prevLoadingRef.current = store.loading;
144
148
  }, [store.loading]);
145
149
  // const subProps: ChatSubProps = {};
146
150
  const activeMessage = store.currentChat?.activeMessage;
@@ -161,10 +165,11 @@ export const ChatOrganism = observer((properties) => {
161
165
  ? ['inspirationResult', ...(isFirstMobileComparison ? ['productComparison'] : []), ...(mobileProductInfoOpen ? ['productQuery'] : [])]
162
166
  : ['inspirationResult', 'productComparison', 'productQuery'];
163
167
  const shouldShowSideChat = activeMessage && sideChatTypes.includes(activeMessage?.messageType) && store.currentChat?.dismissedSideChatMessageId !== activeMessage.id;
164
- const styling = mergeStyles({
168
+ const hasSideChat = !!shouldShowSideChat;
169
+ const styling = useMemo(() => mergeStyles({
165
170
  mobile: isMobile,
166
171
  offset,
167
- hasSideChat: !!shouldShowSideChat,
172
+ hasSideChat,
168
173
  footerHeight,
169
174
  primaryColorBg: colorPrimary,
170
175
  primaryColorFg: colorPrimaryText,
@@ -173,7 +178,19 @@ export const ChatOrganism = observer((properties) => {
173
178
  secondaryAccentColorBg: colorSecondaryAccent,
174
179
  secondaryAccentColorFg: colorSecondaryAccentText,
175
180
  position: chatPosition,
176
- }, chatDefaultStyles);
181
+ }, chatDefaultStyles), [
182
+ isMobile,
183
+ offset,
184
+ hasSideChat,
185
+ footerHeight,
186
+ colorPrimary,
187
+ colorPrimaryText,
188
+ colorPrimaryAccent,
189
+ colorPrimaryAccentText,
190
+ colorSecondaryAccent,
191
+ colorSecondaryAccentText,
192
+ chatPosition,
193
+ ]);
177
194
  // Lock body scroll while chat is open so touch/wheel scrolls don't leak to the page behind
178
195
  useEffect(() => {
179
196
  if (!store.open)
@@ -225,7 +242,10 @@ export const ChatOrganism = observer((properties) => {
225
242
  const HistoryPopup = (props) => (_jsxs("div", { className: "ss__chat__history", children: [_jsxs("div", { className: "ss__chat__history__header", children: [_jsx("h4", { children: "History" }), _jsx("div", { className: "ss__chat__history__header__buttons", children: _jsx(Button, { content: "clear", onClick: () => {
226
243
  controller.store.clearHistory();
227
244
  props.toggleOpen && props.toggleOpen();
228
- } }) })] }), store.chats.length > 0 ? (_jsx("div", { className: "ss__chat__history__chats", children: store.chats.map((chat) => (_jsx("div", { className: "ss__chat__history__chats__chat", children: _jsxs(Button, { className: "ss__chat__history__chat__button", onClick: () => {
245
+ } }) })] }), store.chats.length > 0 ? (_jsx("div", { className: "ss__chat__history__chats", children: store.chats
246
+ .slice()
247
+ .reverse()
248
+ .map((chat) => (_jsx("div", { className: "ss__chat__history__chats__chat", children: _jsxs(Button, { className: "ss__chat__history__chat__button", onClick: () => {
229
249
  controller.store.switchChat(chat.id);
230
250
  }, disabled: chat.id === store.currentChatId, children: [_jsx("div", { className: "ss__chat__history__chat__button__text", children: (() => {
231
251
  const lastUserMessage = [...chat.chat].reverse().find((message) => message.messageType === 'user');
@@ -247,23 +267,18 @@ export const ChatOrganism = observer((properties) => {
247
267
  }
248
268
  return base;
249
269
  }
250
- const applied = new Set();
251
- // Count values marked as filtered (already applied on the server)
252
- (facet.values || []).forEach((value) => {
253
- if (value?.filtered) {
254
- if ('low' in value && 'high' in value) {
255
- applied.add(`${value.low ?? '*'}:${value.high ?? '*'}`);
256
- }
257
- else {
258
- applied.add(value.value);
259
- }
260
- }
261
- });
262
- // Count pending facet attachments (newly selected, not yet sent)
263
- (controller.store.currentChat?.attachments.items || [])
264
- .filter((item) => item.type === 'facet' && item.key === facet.field && (item.state === 'active' || item.state === 'attached'))
265
- .forEach((item) => applied.add(item.value));
266
- return applied.size > 0 ? `${base} (${applied.size})` : base;
270
+ // Count current selections from the urlManager (source of truth for live state).
271
+ // `value.filtered` reflects the server's snapshot at response time and goes stale
272
+ // once the user deselects locally.
273
+ const applied = (facet.values || []).filter((value) => {
274
+ if (!value)
275
+ return false;
276
+ const optionValue = 'low' in value && 'high' in value
277
+ ? `${value.low ?? '*'}:${value.high ?? '*'}`
278
+ : value.value || value.label;
279
+ return controller.store.isFacetSelected(facet.field, optionValue);
280
+ }).length;
281
+ return applied > 0 ? `${base} (${applied})` : base;
267
282
  };
268
283
  // Slider dropdown grows to fill the remaining chat width from its anchor,
269
284
  // so the price range slider isn't cramped inside a 150px-wide dropdown.
@@ -297,7 +312,14 @@ export const ChatOrganism = observer((properties) => {
297
312
  boxShadow: '0px 3px 6px 0px rgba(0, 0, 0, 0.2)',
298
313
  borderRadius: '6px',
299
314
  },
300
- }, children: _jsx("div", { className: "ss__chat__actions__facet__options", children: _jsx("div", { className: "ss__chat__actions__facet__slider", style: { padding: '12px 16px' }, children: _jsx(FacetSlider, { facet: props.facet }) }) }) }) }));
315
+ }, children: _jsx("div", { className: "ss__chat__actions__facet__options", children: _jsx("div", { className: "ss__chat__actions__facet__slider", style: { padding: '12px 16px' }, children: _jsx(FacetSlider, { facet: props.facet, onChange: () => {
316
+ if (!multiselectFacets) {
317
+ // FacetSlider fires onChange before its urlManager update; defer
318
+ // so controller.search() reads the updated filter state and
319
+ // promotes the request to productSearch.
320
+ queueMicrotask(() => controller.search());
321
+ }
322
+ } }) }) }) }) }));
301
323
  };
302
324
  // TODO: if starting a new chat and it's expired, this button would then disappear
303
325
  if (!controller.store.chatEnabled) {
@@ -438,14 +460,14 @@ export const ChatOrganism = observer((properties) => {
438
460
  controller.store.createChat();
439
461
  }, children: "New Session" })] })), store.facets && store.facets.length > 0 && (_jsx("div", { className: 'ss__chat__actions', children: _jsxs("div", { className: "ss__chat__actions__wrap", children: [_jsxs("div", { className: "ss__chat__actions__facets-header", children: [_jsx("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && store.hasPendingFacetChanges && (_jsx("div", { className: 'ss__chat__actions__facets-apply ss__chat__actions__facets-apply--active', children: _jsx(Button, { onClick: () => {
440
462
  controller.search();
441
- }, children: "Apply" }) }))] }), _jsx("div", { className: "ss__chat__actions--facets", children: store.facets.slice(0, 10).map((facet, idx) => {
463
+ }, children: store.pendingFacetCount > 0 ? `Apply (${store.pendingFacetCount})` : 'Clear facets' }) }))] }), _jsx("div", { className: "ss__chat__actions--facets", children: store.facets.slice(0, 10).map((facet, idx) => {
442
464
  // range/slider facets render via FacetSlider; everything else needs at least one value to be useful
443
465
  if (facet.type !== 'range' && !facet.values?.length)
444
466
  return null;
445
467
  if (facet.type === 'range') {
446
468
  return _jsx(SliderFacetDropdown, { facet: facet, label: getFacetButtonLabel(facet) }, idx);
447
469
  }
448
- 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: {
470
+ return (_jsx("div", { className: `ss__chat__actions__facet ss__chat__actions__facet--${facet.type}`, children: _jsx(Dropdown, { usePortal: true, dropUp: true, boundaryRef: chatRef, button: _jsx(FacetButton, { label: getFacetButtonLabel(facet) }), style: {
449
471
  '.ss__dropdown__content': {
450
472
  width: '150px',
451
473
  maxHeight: '200px',
@@ -613,23 +635,20 @@ export const ChatOrganism = observer((properties) => {
613
635
  };
614
636
  })
615
637
  : [];
616
- const productItems = productAttachments.map((item) => ({
617
- id: item.id,
618
- name: item.name || '',
619
- imageUrl: item.thumbnailUrl || '',
620
- onClick: isMobile
621
- ? () => {
622
- setMobileProductInfoOpen(true);
623
- }
624
- : () => {
625
- store.currentChat?.setActiveMessage(store.currentChat?.activeMessage?.id || '');
626
- },
627
- onRemove: () => {
638
+ const productItems = productAttachments.map((item) => {
639
+ const remove = () => {
628
640
  store.currentChat?.attachments.remove(item.id);
629
641
  setMobileProductInfoOpen(false);
630
642
  store.currentChat?.dismissSideChat();
631
- },
632
- }));
643
+ };
644
+ return {
645
+ id: item.id,
646
+ name: item.name || '',
647
+ imageUrl: item.thumbnailUrl || '',
648
+ onClick: remove,
649
+ onRemove: remove,
650
+ };
651
+ });
633
652
  const imageItems = imageAttachments.map((item) => ({
634
653
  id: item.id,
635
654
  name: item.fileName || 'Image',
@@ -639,7 +658,7 @@ export const ChatOrganism = observer((properties) => {
639
658
  errorMessage: item.error?.message,
640
659
  onRemove: () => store.currentChat?.attachments.remove(item.id),
641
660
  }));
642
- const productTitle = productItems.length > 1 ? 'Compare these products' : 'Ask about this product' + (isMobile ? '' : ' (click for details)');
661
+ const productTitle = productItems.length > 1 ? 'Compare these products' : 'Ask about this product';
643
662
  const hasImageError = imageItems.some((item) => item.hasError);
644
663
  const imageTitle = imageItems.length > 0 && !hasImageError ? 'Find products similar to this image:' : '';
645
664
  return (_jsxs(_Fragment, { children: [comparisonItems.length > 0 && (_jsx(ChatAttachmentContext, { ...subProps.attachmentContext, title: 'Compare these products', items: comparisonItems, onClose: () => {
@@ -708,7 +727,7 @@ export const ChatOrganism = observer((properties) => {
708
727
  await controller.upload(e.target.files);
709
728
  // reset value
710
729
  e.target.value = '';
711
- }, multiple: true, type: "file", accept: "image/*", className: "ss__chat__input__input__file" })] }))] }), _jsx("div", { className: 'ss__chat__input__actions', children: (() => {
730
+ }, type: "file", accept: "image/*", className: "ss__chat__input__input__file" })] }))] }), _jsx("div", { className: 'ss__chat__input__actions', children: (() => {
712
731
  const hasImageAttachment = (store.currentChat?.attachments.attached || []).some((item) => item.type === 'image' && !item.error);
713
732
  const messageEmpty = !controller.store.inputValue.trim();
714
733
  const sendDisabled = store.blocked || store.currentChat?.sessionLimitReached || (hasImageAttachment && messageEmpty) || messageEmpty;
package/dist/esm/components/src/components/Organisms/Chat/Chat.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Chat.styles.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,cAAc,CA0mCzD,CAAC"}
1
+ {"version":3,"file":"Chat.styles.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,cAAc,CA6mCzD,CAAC"}
package/dist/esm/components/src/components/Organisms/Chat/Chat.styles.js CHANGED
@@ -275,7 +275,7 @@ export const chatDefaultStyles = ({ mobile, offset, hasSideChat, footerHeight, p
275
275
  top: 6,
276
276
  right: 0,
277
277
  background: 'white',
278
- zIndex: 2,
278
+ zIndex: 21,
279
279
  boxShadow: '0px 3px 6px 0px rgba(0, 0, 0, 0.2)',
280
280
  borderRadius: '6px',
281
281
  display: 'flex',
@@ -304,7 +304,7 @@ export const chatDefaultStyles = ({ mobile, offset, hasSideChat, footerHeight, p
304
304
  },
305
305
  '.ss__chat__history__chats': {
306
306
  display: 'flex',
307
- flexDirection: 'column-reverse',
307
+ flexDirection: 'column',
308
308
  gap: 5,
309
309
  maxHeight: '300px',
310
310
  overflowY: 'auto',
@@ -649,7 +649,10 @@ export const chatDefaultStyles = ({ mobile, offset, hasSideChat, footerHeight, p
649
649
  '.ss__chat__actions--suggested': {
650
650
  overflowX: 'scroll',
651
651
  },
652
- '.ss__chat__actions__facet': {},
652
+ '.ss__chat__actions__facet': {
653
+ padding: '1px', // make room for outline when focused
654
+ flexShrink: 0,
655
+ },
653
656
  '.ss__chat__actions__facets-dropdown': {
654
657
  '.ss__dropdown__content': {
655
658
  bottom: '0',
package/dist/esm/components/src/components/Organisms/Chat/hooks/useChatFileUpload.js CHANGED
@@ -38,12 +38,12 @@ export const useChatFileUpload = ({ enabled, onUpload }) => {
38
38
  dragCounterRef.current = 0;
39
39
  setIsDraggingFile(false);
40
40
  const dropped = Array.from(e.dataTransfer?.files || []);
41
- const images = dropped.filter((f) => f.type.startsWith('image/'));
42
- if (images.length === 0)
41
+ const firstImage = dropped.find((f) => f.type.startsWith('image/'));
42
+ if (!firstImage)
43
43
  return;
44
44
  // Reconstruct a FileList — consumers (e.g. controller.upload) expect FileList | null
45
45
  const dt = new DataTransfer();
46
- images.forEach((f) => dt.items.add(f));
46
+ dt.items.add(firstImage);
47
47
  await onUpload(dt.files);
48
48
  };
49
49
  return {
package/dist/esm/src/Templates/SnapTemplates.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SnapTemplates.d.ts","sourceRoot":"","sources":["../../../../src/Templates/SnapTemplates.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,OAAO,EAAkB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxE,OAAO,EAAE,KAAK,+BAA+B,EAAE,MAAM,gCAAgC,CAAC;AACtF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,KAAK,EAA0C,cAAc,EAAoB,MAAM,gCAAgC,CAAC;AAC/H,OAAO,KAAK,EAAE,6BAA6B,EAAoC,MAAM,6CAA6C,CAAC;AACnI,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,KAAK,EAOX,0BAA0B,EAC1B,4BAA4B,EAE5B,MAAM,wBAAwB,CAAC;AAoChC,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,wBAAwB,iBAAiB,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC;AAC5D,MAAM,MAAM,2BAA2B,GAAG,4BAA4B,GAAG;IACxE,QAAQ,EAAE,IAAI,CAAC;IACf,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,0BAA0B,GAAG;IACpE,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAwBF,eAAO,MAAM,gBAAgB,EAAE,YAAiB,CAAC;AAEjD,eAAO,MAAM,wCAAwC,EAAE,+BAItD,CAAC;AAEF,qBAAa,aAAc,SAAQ,IAAI;IACtC,SAAS,EAAE,cAAc,CAAC;gBACd,MAAM,EAAE,mBAAmB,GAAG,2BAA2B;CAoGrE;AAED,wBAAgB,cAAc,CAAC,wBAAwB,EACtD,eAAe,EAAE,MAAM,EAAE,EACzB,kBAAkB,EAAE,wBAAwB,EAAE,GAC5C;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,wBAAwB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;CAAE,CAKrE;AAED,eAAO,MAAM,qBAAqB,mBAAoB,mBAAmB,kBAAkB,cAAc,KAAG,cAAc,EAoCzH,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBAAoB,mBAAmB,kBAAkB,cAAc,KAAG,cAAc,EA2CvH,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,GAAG,cAAc,EAAE,CAqCjI;AAED,wBAAgB,oCAAoC,CACnD,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EACjE,cAAc,EAAE,cAAc,GAC5B;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,6BAA6B,CAAA;CAAE,CAiDnD;AAED,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EAAE,cAAc,EAAE,cAAc,GAAG,UAAU,CA0J9I;AAED,wBAAgB,aAAa,CAC5B,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EACjE,cAAc,EAAE,cAAc,EAC9B,cAAc,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,gBAAgB,GAAG,MAAM,GACpE,cAAc,EAAE,CAmFlB"}
1
+ {"version":3,"file":"SnapTemplates.d.ts","sourceRoot":"","sources":["../../../../src/Templates/SnapTemplates.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,OAAO,EAAkB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxE,OAAO,EAAE,KAAK,+BAA+B,EAAE,MAAM,gCAAgC,CAAC;AACtF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,KAAK,EAA0C,cAAc,EAAoB,MAAM,gCAAgC,CAAC;AAC/H,OAAO,KAAK,EAAE,6BAA6B,EAAoC,MAAM,6CAA6C,CAAC;AACnI,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,KAAK,EAOX,0BAA0B,EAC1B,4BAA4B,EAE5B,MAAM,wBAAwB,CAAC;AAoChC,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,wBAAwB,iBAAiB,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC;AAC5D,MAAM,MAAM,2BAA2B,GAAG,4BAA4B,GAAG;IACxE,QAAQ,EAAE,IAAI,CAAC;IACf,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,0BAA0B,GAAG;IACpE,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAwBF,eAAO,MAAM,gBAAgB,EAAE,YAAiB,CAAC;AAEjD,eAAO,MAAM,wCAAwC,EAAE,+BAItD,CAAC;AAEF,qBAAa,aAAc,SAAQ,IAAI;IACtC,SAAS,EAAE,cAAc,CAAC;gBACd,MAAM,EAAE,mBAAmB,GAAG,2BAA2B;CAoGrE;AAED,wBAAgB,cAAc,CAAC,wBAAwB,EACtD,eAAe,EAAE,MAAM,EAAE,EACzB,kBAAkB,EAAE,wBAAwB,EAAE,GAC5C;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,wBAAwB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;CAAE,CAKrE;AAED,eAAO,MAAM,qBAAqB,mBAAoB,mBAAmB,kBAAkB,cAAc,KAAG,cAAc,EAoCzH,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBAAoB,mBAAmB,kBAAkB,cAAc,KAAG,cAAc,EA2CvH,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,GAAG,cAAc,EAAE,CAqCjI;AAED,wBAAgB,oCAAoC,CACnD,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EACjE,cAAc,EAAE,cAAc,GAC5B;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,6BAA6B,CAAA;CAAE,CAiDnD;AAED,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EAAE,cAAc,EAAE,cAAc,GAAG,UAAU,CA6J9I;AAED,wBAAgB,aAAa,CAC5B,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EACjE,cAAc,EAAE,cAAc,EAC9B,cAAc,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,gBAAgB,GAAG,MAAM,GACpE,cAAc,EAAE,CAmFlB"}
package/dist/esm/src/Templates/SnapTemplates.js CHANGED
@@ -377,7 +377,10 @@ export function createSnapConfig(templateConfig, templatesStore) {
377
377
  config: {
378
378
  id: 'chat',
379
379
  plugins: createPlugins(templateConfig, templatesStore, 'chat'),
380
- settings: templateConfig.chat.settings || {},
380
+ settings: {
381
+ ...(templateConfig.chat.settings || {}),
382
+ languageCode: templatesStore.language,
383
+ },
381
384
  },
382
385
  targeters: createChatTargeters(templateConfig, templatesStore),
383
386
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@athoscommerce/snap-preact",
3
- "version": "1.5.1-beta.110+686b0c2b6",
3
+ "version": "1.5.1-beta.114+0c51a7fbd",
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.5.1-beta.110+686b0c2b6",
30
- "@athoscommerce/snap-controller": "1.5.1-beta.110+686b0c2b6",
31
- "@athoscommerce/snap-event-manager": "1.5.1-beta.110+686b0c2b6",
32
- "@athoscommerce/snap-logger": "1.5.1-beta.110+686b0c2b6",
33
- "@athoscommerce/snap-platforms": "1.5.1-beta.110+686b0c2b6",
34
- "@athoscommerce/snap-profiler": "1.5.1-beta.110+686b0c2b6",
35
- "@athoscommerce/snap-store-mobx": "1.5.1-beta.110+686b0c2b6",
36
- "@athoscommerce/snap-toolbox": "1.5.1-beta.110+686b0c2b6",
37
- "@athoscommerce/snap-tracker": "1.5.1-beta.110+686b0c2b6",
38
- "@athoscommerce/snap-url-manager": "1.5.1-beta.110+686b0c2b6",
29
+ "@athoscommerce/snap-client": "1.5.1-beta.114+0c51a7fbd",
30
+ "@athoscommerce/snap-controller": "1.5.1-beta.114+0c51a7fbd",
31
+ "@athoscommerce/snap-event-manager": "1.5.1-beta.114+0c51a7fbd",
32
+ "@athoscommerce/snap-logger": "1.5.1-beta.114+0c51a7fbd",
33
+ "@athoscommerce/snap-platforms": "1.5.1-beta.114+0c51a7fbd",
34
+ "@athoscommerce/snap-profiler": "1.5.1-beta.114+0c51a7fbd",
35
+ "@athoscommerce/snap-store-mobx": "1.5.1-beta.114+0c51a7fbd",
36
+ "@athoscommerce/snap-toolbox": "1.5.1-beta.114+0c51a7fbd",
37
+ "@athoscommerce/snap-tracker": "1.5.1-beta.114+0c51a7fbd",
38
+ "@athoscommerce/snap-url-manager": "1.5.1-beta.114+0c51a7fbd",
39
39
  "@emotion/react": "11.13.0",
40
40
  "classnames": "^2.3.2",
41
41
  "color": "^4.2.3",
@@ -103,5 +103,5 @@
103
103
  "require": "./dist/cjs/toolbox/src/index.js"
104
104
  }
105
105
  },
106
- "gitHead": "686b0c2b6f5f8d52241b817161fcaa1651626211"
106
+ "gitHead": "0c51a7fbd536458bf7babb65e8632508565284a4"
107
107
  }