@razorpay/blade 12.68.0 → 12.89.1

package/build/lib/web/production/components/ChatInput/useChatInput.js

@@ -0,0 +1,187 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default from 'react';
+import { chatInputMaxTextAreaHeight } from './chatInputTokens.js';
+import { isFileAccepted } from '../FileUpload/isFileAccepted.js';
+import { useControllableState } from '../../utils/useControllable.js';
+import { useIsMobile } from '../../utils/useIsMobile.js';
+import { useMergeRefs } from '../../utils/useMergeRefs.js';
+
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var useChatInput = function useChatInput(_ref, ref) {
+  var controlledValue = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _onChange = _ref.onChange,
+    onSubmit = _ref.onSubmit,
+    controlledFileList = _ref.fileList,
+    onFileChange = _ref.onFileChange,
+    onFileRemove = _ref.onFileRemove,
+    accept = _ref.accept,
+    suggestions = _ref.suggestions,
+    onSuggestionAccept = _ref.onSuggestionAccept;
+  var fileInputRef = React__default.useRef(null);
+  var textareaRef = React__default.useRef(null);
+  var mergedRef = useMergeRefs(ref, textareaRef);
+  var _useControllableState = useControllableState({
+      value: controlledValue,
+      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : '',
+      onChange: function onChange(newValue) {
+        _onChange === null || _onChange === void 0 || _onChange({
+          value: newValue
+        });
+      }
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    textValue = _useControllableState2[0],
+    setTextValue = _useControllableState2[1];
+  var _useControllableState3 = useControllableState({
+      value: controlledFileList,
+      defaultValue: controlledFileList !== null && controlledFileList !== void 0 ? controlledFileList : []
+    }),
+    _useControllableState4 = _slicedToArray(_useControllableState3, 2),
+    files = _useControllableState4[0],
+    setFiles = _useControllableState4[1];
+  var _React$useState = React__default.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    activeSuggestionIndex = _React$useState2[0],
+    setActiveSuggestionIndex = _React$useState2[1];
+  var isMobile = useIsMobile();
+  var hasText = textValue.trim().length > 0;
+  var hasFiles = files.length > 0;
+  var isSubmitDisabled = !hasText && !hasFiles;
+  var showGhostSuggestion = !hasText && Boolean(suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) && !isMobile;
+  var adjustTextareaHeight = React__default.useCallback(function () {
+    var textarea = textareaRef.current;
+    if (textarea && textarea instanceof HTMLTextAreaElement) {
+      textarea.style.height = 'auto';
+      textarea.style.height = "".concat(Math.min(textarea.scrollHeight, chatInputMaxTextAreaHeight), "px");
+    }
+  }, []);
+  React__default.useEffect(function () {
+    adjustTextareaHeight();
+  }, [textValue, adjustTextareaHeight]);
+  var handleTextChange = React__default.useCallback(function (_ref2) {
+    var newValue = _ref2.value;
+    setTextValue(function () {
+      return newValue !== null && newValue !== void 0 ? newValue : '';
+    });
+  }, [setTextValue]);
+  var handleSubmit = React__default.useCallback(function () {
+    if (isSubmitDisabled) return;
+    onSubmit === null || onSubmit === void 0 || onSubmit({
+      value: textValue,
+      fileList: files
+    });
+  }, [isSubmitDisabled, onSubmit, textValue, files]);
+  var handleKeyDown = React__default.useCallback(function (_ref3) {
+    var event = _ref3.event;
+    if (!event) return;
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSubmit();
+      return;
+    }
+    if (event.key === 'Tab' && showGhostSuggestion && suggestions !== null && suggestions !== void 0 && suggestions.length) {
+      event.preventDefault();
+      var currentSuggestion = suggestions[activeSuggestionIndex];
+      setTextValue(function () {
+        return currentSuggestion;
+      });
+      onSuggestionAccept === null || onSuggestionAccept === void 0 || onSuggestionAccept({
+        suggestion: currentSuggestion
+      });
+    }
+  }, [handleSubmit, showGhostSuggestion, suggestions, activeSuggestionIndex, setTextValue, onSuggestionAccept]);
+  var handleUploadClick = React__default.useCallback(function () {
+    var _fileInputRef$current;
+    (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || _fileInputRef$current.click();
+  }, []);
+  var handleFileInputChange = React__default.useCallback(function (event) {
+    var _event$target$files;
+    var inputFiles = Array.from((_event$target$files = event.target.files) !== null && _event$target$files !== void 0 ? _event$target$files : []);
+    var validFiles = inputFiles.filter(function (file) {
+      if (accept && !isFileAccepted(file, accept)) return false;
+      return true;
+    });
+    var _iterator = _createForOfIteratorHelper(validFiles),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var file = _step.value;
+        if (!file.id) {
+          file.id = "".concat(Date.now()).concat(Math.floor(Math.random() * 1000000));
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (validFiles.length > 0) {
+      var newFileList = [].concat(_toConsumableArray(files), _toConsumableArray(validFiles));
+      setFiles(function () {
+        return newFileList;
+      });
+      onFileChange === null || onFileChange === void 0 || onFileChange({
+        fileList: newFileList
+      });
+    }
+    event.target.value = '';
+  }, [accept, files, setFiles, onFileChange]);
+  var handleFileRemove = React__default.useCallback(function (file) {
+    var newFileList = files.filter(function (f) {
+      return f.id !== file.id;
+    });
+    setFiles(function () {
+      return newFileList;
+    });
+    onFileRemove === null || onFileRemove === void 0 || onFileRemove({
+      file: file
+    });
+  }, [files, setFiles, onFileRemove]);
+  var handlePaste = React__default.useCallback(function (event) {
+    var _event$clipboardData$, _event$clipboardData;
+    var clipboardFiles = Array.from((_event$clipboardData$ = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.files) !== null && _event$clipboardData$ !== void 0 ? _event$clipboardData$ : []);
+    if (clipboardFiles.length === 0) return;
+    event.preventDefault();
+    for (var _i = 0, _clipboardFiles = clipboardFiles; _i < _clipboardFiles.length; _i++) {
+      var file = _clipboardFiles[_i];
+      if (!file.id) {
+        file.id = "".concat(Date.now()).concat(Math.floor(Math.random() * 1000000));
+      }
+    }
+    if (clipboardFiles.length > 0) {
+      var newFileList = [].concat(_toConsumableArray(files), clipboardFiles);
+      setFiles(function () {
+        return newFileList;
+      });
+      onFileChange === null || onFileChange === void 0 || onFileChange({
+        fileList: newFileList
+      });
+    }
+  }, [files, setFiles, onFileChange]);
+  return {
+    fileInputRef: fileInputRef,
+    mergedRef: mergedRef,
+    textValue: textValue,
+    files: files,
+    activeSuggestionIndex: activeSuggestionIndex,
+    setActiveSuggestionIndex: setActiveSuggestionIndex,
+    hasText: hasText,
+    hasFiles: hasFiles,
+    isSubmitDisabled: isSubmitDisabled,
+    showGhostSuggestion: showGhostSuggestion,
+    handleTextChange: handleTextChange,
+    handleSubmit: handleSubmit,
+    handleKeyDown: handleKeyDown,
+    handleUploadClick: handleUploadClick,
+    handleFileInputChange: handleFileInputChange,
+    handleFileRemove: handleFileRemove,
+    handlePaste: handlePaste
+  };
+};
+
+export { useChatInput };
+//# sourceMappingURL=useChatInput.js.map

package/build/lib/web/production/components/ChatInput/useChatInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatInput.js","sources":["../../../../../../src/components/ChatInput/useChatInput.ts"],"sourcesContent":["import React from 'react';\nimport type { ChatInputProps } from './types';\nimport { chatInputMaxTextAreaHeight } from './chatInputTokens';\nimport type { BladeElementRef } from '~utils/types';\nimport type { BladeFile, BladeFileList } from '~components/FileUpload/types';\nimport { isFileAccepted } from '~components/FileUpload/isFileAccepted';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { useMergeRefs } from '~utils/useMergeRefs';\n\ntype UseChatInputProps = Pick<\n  ChatInputProps,\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onSubmit'\n  | 'isDisabled'\n  | 'isGenerating'\n  | 'onStop'\n  | 'fileList'\n  | 'onFileChange'\n  | 'onFileRemove'\n  | 'accept'\n  | 'suggestions'\n  | 'onSuggestionAccept'\n>;\n\nconst useChatInput = (\n  {\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    onSubmit,\n    fileList: controlledFileList,\n    onFileChange,\n    onFileRemove,\n    accept,\n    suggestions,\n    onSuggestionAccept,\n  }: UseChatInputProps,\n  ref: React.ForwardedRef<BladeElementRef>,\n): {\n  fileInputRef: React.RefObject<HTMLInputElement>;\n  mergedRef: React.RefCallback<BladeElementRef>;\n  textValue: string;\n  files: BladeFileList;\n  activeSuggestionIndex: number;\n  setActiveSuggestionIndex: React.Dispatch<React.SetStateAction<number>>;\n  hasText: boolean;\n  hasFiles: boolean;\n  isSubmitDisabled: boolean;\n  showGhostSuggestion: boolean;\n  handleTextChange: (args: { name?: string; value?: string }) => void;\n  handleSubmit: () => void;\n  handleKeyDown: (args: {\n    name?: string;\n    key?: string;\n    code?: string;\n    event: React.KeyboardEvent<HTMLInputElement>;\n  }) => void;\n  handleUploadClick: () => void;\n  handleFileInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  handleFileRemove: (file: BladeFile) => void;\n  handlePaste: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n} => {\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const textareaRef = React.useRef<BladeElementRef>(null);\n  const mergedRef = useMergeRefs(ref, textareaRef);\n\n  const [textValue, setTextValue] = useControllableState({\n    value: controlledValue,\n    defaultValue: defaultValue ?? '',\n    onChange: (newValue) => {\n      onChange?.({ value: newValue });\n    },\n  });\n\n  const [files, setFiles] = useControllableState<BladeFileList>({\n    value: controlledFileList,\n    defaultValue: controlledFileList ?? [],\n  });\n\n  const [activeSuggestionIndex, setActiveSuggestionIndex] = React.useState(0);\n\n  const isMobile = useIsMobile();\n\n  const hasText = textValue.trim().length > 0;\n  const hasFiles = files.length > 0;\n  const isSubmitDisabled = !hasText && !hasFiles;\n  const showGhostSuggestion = !hasText && Boolean(suggestions?.length) && !isMobile;\n\n  const adjustTextareaHeight = React.useCallback(() => {\n    const textarea = textareaRef.current;\n    if (textarea && textarea instanceof HTMLTextAreaElement) {\n      textarea.style.height = 'auto';\n      textarea.style.height = `${Math.min(textarea.scrollHeight, chatInputMaxTextAreaHeight)}px`;\n    }\n  }, []);\n\n  React.useEffect(() => {\n    adjustTextareaHeight();\n  }, [textValue, adjustTextareaHeight]);\n\n  const handleTextChange = React.useCallback(\n    ({ value: newValue }: { name?: string; value?: string }) => {\n      setTextValue(() => newValue ?? '');\n    },\n    [setTextValue],\n  );\n\n  const handleSubmit = React.useCallback(() => {\n    if (isSubmitDisabled) return;\n    onSubmit?.({ value: textValue, fileList: files });\n  }, [isSubmitDisabled, onSubmit, textValue, files]);\n\n  const handleKeyDown = React.useCallback(\n    ({\n      event,\n    }: {\n      name?: string;\n      key?: string;\n      code?: string;\n      event: React.KeyboardEvent<HTMLInputElement>;\n    }) => {\n      if (!event) return;\n\n      if (event.key === 'Enter' && !event.shiftKey) {\n        event.preventDefault();\n        handleSubmit();\n        return;\n      }\n\n      if (event.key === 'Tab' && showGhostSuggestion && suggestions?.length) {\n        event.preventDefault();\n        const currentSuggestion = suggestions[activeSuggestionIndex];\n        setTextValue(() => currentSuggestion);\n        onSuggestionAccept?.({ suggestion: currentSuggestion });\n      }\n    },\n    [\n      handleSubmit,\n      showGhostSuggestion,\n      suggestions,\n      activeSuggestionIndex,\n      setTextValue,\n      onSuggestionAccept,\n    ],\n  );\n\n  const handleUploadClick = React.useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const handleFileInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const inputFiles = Array.from(event.target.files ?? []) as BladeFileList;\n\n      const validFiles = inputFiles.filter((file) => {\n        if (accept && !isFileAccepted(file, accept)) return false;\n        return true;\n      });\n\n      for (const file of validFiles) {\n        if (!file.id) {\n          file.id = `${Date.now()}${Math.floor(Math.random() * 1000000)}`;\n        }\n      }\n\n      if (validFiles.length > 0) {\n        const newFileList = [...files, ...validFiles];\n        setFiles(() => newFileList);\n        onFileChange?.({ fileList: newFileList });\n      }\n\n      event.target.value = '';\n    },\n    [accept, files, setFiles, onFileChange],\n  );\n\n  const handleFileRemove = React.useCallback(\n    (file: BladeFile) => {\n      const newFileList = files.filter((f) => f.id !== file.id);\n      setFiles(() => newFileList);\n      onFileRemove?.({ file });\n    },\n    [files, setFiles, onFileRemove],\n  );\n\n  const handlePaste = React.useCallback(\n    (event: React.ClipboardEvent<HTMLInputElement>) => {\n      const clipboardFiles = Array.from(event.clipboardData?.files ?? []);\n      if (clipboardFiles.length === 0) return;\n\n      event.preventDefault();\n\n      for (const file of clipboardFiles) {\n        if (!(file as BladeFile).id) {\n          (file as BladeFile).id = `${Date.now()}${Math.floor(Math.random() * 1000000)}`;\n        }\n      }\n\n      if (clipboardFiles.length > 0) {\n        const newFileList = [...files, ...clipboardFiles] as BladeFileList;\n        setFiles(() => newFileList);\n        onFileChange?.({ fileList: newFileList });\n      }\n    },\n    [files, setFiles, onFileChange],\n  );\n\n  return {\n    fileInputRef,\n    mergedRef,\n    textValue,\n    files,\n    activeSuggestionIndex,\n    setActiveSuggestionIndex,\n    hasText,\n    hasFiles,\n    isSubmitDisabled,\n    showGhostSuggestion,\n    handleTextChange,\n    handleSubmit,\n    handleKeyDown,\n    handleUploadClick,\n    handleFileInputChange,\n    handleFileRemove,\n    handlePaste,\n  };\n};\n\nexport { useChatInput };\nexport type { UseChatInputProps };\n"],"names":["useChatInput","_ref","ref","controlledValue","value","defaultValue","onChange","onSubmit","controlledFileList","fileList","onFileChange","onFileRemove","accept","suggestions","onSuggestionAccept","fileInputRef","React","useRef","textareaRef","mergedRef","useMergeRefs","_useControllableState","useControllableState","newValue","_useControllableState2","_slicedToArray","textValue","setTextValue","_useControllableState3","_useControllableState4","files","setFiles","_React$useState","useState","_React$useState2","activeSuggestionIndex","setActiveSuggestionIndex","isMobile","useIsMobile","hasText","trim","length","hasFiles","isSubmitDisabled","showGhostSuggestion","Boolean","adjustTextareaHeight","useCallback","textarea","current","HTMLTextAreaElement","style","height","concat","Math","min","scrollHeight","chatInputMaxTextAreaHeight","useEffect","handleTextChange","_ref2","handleSubmit","handleKeyDown","_ref3","event","key","shiftKey","preventDefault","currentSuggestion","suggestion","handleUploadClick","_fileInputRef$current","click","handleFileInputChange","_event$target$files","inputFiles","Array","from","target","validFiles","filter","file","isFileAccepted","_iterator","_createForOfIteratorHelper","_step","s","n","done","id","Date","now","floor","random","err","e","f","newFileList","_toConsumableArray","handleFileRemove","handlePaste","_event$clipboardData$","_event$clipboardData","clipboardFiles","clipboardData","_i","_clipboardFiles"],"mappings":"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"}

package/build/lib/web/production/components/ChatMessage/ChatMessage.web.js

@@ -3,14 +3,17 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React__default from 'react';
 import { SelfMessageBubble } from './SelfMessageBubble.web.js';
 import { DefaultMessageBubble } from './DefaultMessageBubble.web.js';
+import { ThumbnailPreview } from './ThumbnailPreview.web.js';
+import '../RollingText/index.js';
 import '../Typography/index.js';
 import '../Box/BaseBox/index.js';
-import '../../utils/getStringChildren/index.js';
+import '../Box/styledProps/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
-import '../../utils/metaAttribute/index.js';
+import '../../utils/getStringChildren/index.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
-import '../Box/styledProps/index.js';
-import { jsx } from 'react/jsx-runtime';
+import '../../utils/metaAttribute/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { RollingText } from '../RollingText/RollingText.web.js';
 import { Text } from '../Typography/Text/Text.js';
 import { getStringFromReactText } from '../../utils/getStringChildren/getStringChildren.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
@@ -20,7 +23,7 @@ import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeA
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded = ["messageType", "senderType", "isLoading", "validationState", "errorText", "onClick", "footerActions", "children", "leading", "loadingText", "wordBreak", "maxWidth"];
+var _excluded = ["messageType", "senderType", "isLoading", "validationState", "errorText", "onClick", "footerActions", "children", "leading", "loadingText", "wordBreak", "maxWidth", "thumbnails", "onThumbnailClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ButtonResetCss = {
@@ -53,43 +56,63 @@ var _ChatMessage = function _ChatMessage(_ref, ref) {
     _ref$wordBreak = _ref.wordBreak,
     wordBreak = _ref$wordBreak === void 0 ? 'break-word' : _ref$wordBreak,
     maxWidth = _ref.maxWidth,
+    thumbnails = _ref.thumbnails,
+    onThumbnailClick = _ref.onThumbnailClick,
     props = _objectWithoutProperties(_ref, _excluded);
+  // Keep deprecated prop "used" to avoid lint errors while preserving compatibility.
+  void messageType;
+
   // since we can pass both string and Card component as children, we need to check if children is string or Card component
   // if children is string or array of string, we need to wrap it in Text component otherwise we will pass children as it is
   var shouldWrapInText = typeof children === 'string' || Array.isArray(children) && children.every(function (child) {
     return typeof child === 'string';
   }) || isLoading;
+  var loadingContent = isLoading && Array.isArray(loadingText) ? /*#__PURE__*/jsx(RollingText, {
+    texts: loadingText
+  }) : loadingText;
   var finalChildren = shouldWrapInText ? /*#__PURE__*/jsx(Text, {
-    color: isLoading ? 'surface.text.gray.muted' : 'surface.text.gray.normal',
+    color: isLoading ? Array.isArray(loadingText) ? 'feedback.text.positive.intense' : 'surface.text.gray.muted' : 'surface.text.gray.normal',
     weight: "regular",
     variant: "body",
     size: "medium",
     wordBreak: wordBreak,
-    children: isLoading ? loadingText : getStringFromReactText(children)
+    children: isLoading ? loadingContent : getStringFromReactText(children)
   }) : children;
-  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    onClick: onClick
-  }, onClick ? _objectSpread({}, ButtonResetCss) : {}), metaAttribute({
-    name: MetaConstants.ChatMessage,
-    testID: props.testID
-  })), makeAnalyticsAttribute(props)), getStyledProps(props)), {}, {
-    maxWidth: maxWidth,
-    ref: ref,
-    as: onClick ? 'button' : undefined,
-    children: senderType === 'self' ? /*#__PURE__*/jsx(SelfMessageBubble, {
-      validationState: validationState,
-      errorText: errorText,
-      children: finalChildren,
-      messageType: messageType,
-      isChildText: shouldWrapInText
-    }) : /*#__PURE__*/jsx(DefaultMessageBubble, {
-      children: finalChildren,
-      leading: leading,
-      isLoading: isLoading,
-      footerActions: footerActions,
-      isChildText: shouldWrapInText
-    })
-  }));
+  var messageBubble = senderType === 'self' ? /*#__PURE__*/jsx(SelfMessageBubble, {
+    validationState: validationState,
+    errorText: errorText,
+    children: finalChildren,
+    isChildText: shouldWrapInText
+  }) : /*#__PURE__*/jsx(DefaultMessageBubble, {
+    children: finalChildren,
+    leading: leading,
+    isLoading: isLoading,
+    footerActions: footerActions,
+    isChildText: shouldWrapInText
+  });
+  var imagePreviewAlignment = senderType === 'self' ? 'flex-end' : 'flex-start';
+  return /*#__PURE__*/jsxs(BaseBox, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "spacing.3",
+    children: [thumbnails && thumbnails.length > 0 ? /*#__PURE__*/jsx(BaseBox, {
+      alignSelf: imagePreviewAlignment,
+      children: /*#__PURE__*/jsx(ThumbnailPreview, {
+        thumbnails: thumbnails,
+        onThumbnailClick: onThumbnailClick
+      })
+    }) : null, /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      onClick: onClick
+    }, onClick ? _objectSpread({}, ButtonResetCss) : {}), metaAttribute({
+      name: MetaConstants.ChatMessage,
+      testID: props.testID
+    })), makeAnalyticsAttribute(props)), getStyledProps(props)), {}, {
+      maxWidth: maxWidth,
+      ref: ref,
+      as: onClick ? 'button' : undefined,
+      children: messageBubble
+    }))]
+  });
 };
 var ChatMessage = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_ChatMessage), {
   displayName: 'ChatMessage',

package/build/lib/web/production/components/ChatMessage/ChatMessage.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessage.web.js","sources":["../../../../../../src/components/ChatMessage/ChatMessage.web.tsx"],"sourcesContent":["import React from 'react';\nimport { SelfMessageBubble } from './SelfMessageBubble.web';\nimport { DefaultMessageBubble } from './DefaultMessageBubble.web';\nimport type { ChatMessageProps } from './types';\nimport { Text } from '~components/Typography';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStringFromReactText } from '~utils/getStringChildren';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { BladeElementRef } from '~utils/types';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\n\nconst ButtonResetCss = {\n  background: 'none',\n  border: 'none',\n  padding: undefined,\n  cursor: 'pointer',\n  color: 'inherit',\n  font: 'inherit',\n  textAlign: 'left' as const,\n  outline: 'inherit',\n  appearance: 'none',\n  backgroundColor: 'inherit',\n};\n\nconst _ChatMessage: React.ForwardRefRenderFunction<BladeElementRef, ChatMessageProps> = (\n  {\n    messageType = 'default',\n    senderType = 'self',\n    isLoading = false,\n    validationState = 'none',\n    errorText,\n    onClick,\n    footerActions,\n    children,\n    leading,\n    loadingText,\n    wordBreak = 'break-word',\n    maxWidth,\n    ...props\n  }: ChatMessageProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  // since we can pass both string and Card component as children, we need to check if children is string or Card component\n  // if children is string or array of string, we need to wrap it in Text component otherwise we will pass children as it is\n  const shouldWrapInText =\n    typeof children === 'string' ||\n    (Array.isArray(children) && children.every((child) => typeof child === 'string')) ||\n    isLoading;\n\n  const finalChildren = shouldWrapInText ? (\n    <Text\n      color={isLoading ? 'surface.text.gray.muted' : 'surface.text.gray.normal'}\n      weight=\"regular\"\n      variant=\"body\"\n      size=\"medium\"\n      wordBreak={wordBreak}\n    >\n      {isLoading ? loadingText : getStringFromReactText(children as string | string[])}\n    </Text>\n  ) : (\n    (children as React.ReactElement)\n  );\n\n  return (\n    <BaseBox\n      onClick={onClick}\n      {...(onClick ? { ...ButtonResetCss } : {})}\n      {...metaAttribute({ name: MetaConstants.ChatMessage, testID: props.testID })}\n      {...makeAnalyticsAttribute(props)}\n      {...getStyledProps(props)}\n      maxWidth={maxWidth}\n      ref={ref as never}\n      as={onClick ? 'button' : undefined}\n    >\n      {senderType === 'self' ? (\n        <SelfMessageBubble\n          validationState={validationState}\n          errorText={errorText}\n          children={finalChildren}\n          messageType={messageType}\n          isChildText={shouldWrapInText}\n        />\n      ) : (\n        <DefaultMessageBubble\n          children={finalChildren}\n          leading={leading}\n          isLoading={isLoading}\n          footerActions={footerActions}\n          isChildText={shouldWrapInText}\n        />\n      )}\n    </BaseBox>\n  );\n};\n\nconst ChatMessage = assignWithoutSideEffects(React.forwardRef(_ChatMessage), {\n  displayName: 'ChatMessage',\n  componentId: MetaConstants.ChatMessage,\n});\nexport { ChatMessage };\n"],"names":["ButtonResetCss","background","border","padding","undefined","cursor","color","font","textAlign","outline","appearance","backgroundColor","_ChatMessage","_ref","ref","_ref$messageType","messageType","_ref$senderType","senderType","_ref$isLoading","isLoading","_ref$validationState","validationState","errorText","onClick","footerActions","children","leading","loadingText","_ref$wordBreak","wordBreak","maxWidth","props","_objectWithoutProperties","_excluded","shouldWrapInText","Array","isArray","every","child","finalChildren","_jsx","Text","weight","variant","size","getStringFromReactText","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","ChatMessage","testID","makeAnalyticsAttribute","getStyledProps","as","SelfMessageBubble","isChildText","DefaultMessageBubble","assignWithoutSideEffects","React","forwardRef","displayName","componentId"],"mappings":"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"}
+{"version":3,"file":"ChatMessage.web.js","sources":["../../../../../../src/components/ChatMessage/ChatMessage.web.tsx"],"sourcesContent":["import React from 'react';\nimport { SelfMessageBubble } from './SelfMessageBubble.web';\nimport { DefaultMessageBubble } from './DefaultMessageBubble.web';\nimport type { ChatMessageProps } from './types';\nimport { ThumbnailPreview } from './ThumbnailPreview.web';\nimport { RollingText } from '~components/RollingText';\nimport { Text } from '~components/Typography';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getStringFromReactText } from '~utils/getStringChildren';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\n\nconst ButtonResetCss = {\n  background: 'none',\n  border: 'none',\n  padding: undefined,\n  cursor: 'pointer',\n  color: 'inherit',\n  font: 'inherit',\n  textAlign: 'left' as const,\n  outline: 'inherit',\n  appearance: 'none',\n  backgroundColor: 'inherit',\n};\n\nconst _ChatMessage: React.ForwardRefRenderFunction<BladeElementRef, ChatMessageProps> = (\n  {\n    messageType = 'default',\n    senderType = 'self',\n    isLoading = false,\n    validationState = 'none',\n    errorText,\n    onClick,\n    footerActions,\n    children,\n    leading,\n    loadingText,\n    wordBreak = 'break-word',\n    maxWidth,\n    thumbnails,\n    onThumbnailClick,\n    ...props\n  }: ChatMessageProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  // Keep deprecated prop \"used\" to avoid lint errors while preserving compatibility.\n  void messageType;\n\n  // since we can pass both string and Card component as children, we need to check if children is string or Card component\n  // if children is string or array of string, we need to wrap it in Text component otherwise we will pass children as it is\n  const shouldWrapInText =\n    typeof children === 'string' ||\n    (Array.isArray(children) && children.every((child) => typeof child === 'string')) ||\n    isLoading;\n\n  const loadingContent =\n    isLoading && Array.isArray(loadingText) ? <RollingText texts={loadingText} /> : loadingText;\n\n  const finalChildren = shouldWrapInText ? (\n    <Text\n      color={\n        isLoading\n          ? Array.isArray(loadingText)\n            ? 'feedback.text.positive.intense'\n            : 'surface.text.gray.muted'\n          : 'surface.text.gray.normal'\n      }\n      weight=\"regular\"\n      variant=\"body\"\n      size=\"medium\"\n      wordBreak={wordBreak}\n    >\n      {isLoading ? loadingContent : getStringFromReactText(children as string | string[])}\n    </Text>\n  ) : (\n    (children as React.ReactElement)\n  );\n\n  const messageBubble =\n    senderType === 'self' ? (\n      <SelfMessageBubble\n        validationState={validationState}\n        errorText={errorText}\n        children={finalChildren}\n        isChildText={shouldWrapInText}\n      />\n    ) : (\n      <DefaultMessageBubble\n        children={finalChildren}\n        leading={leading}\n        isLoading={isLoading}\n        footerActions={footerActions}\n        isChildText={shouldWrapInText}\n      />\n    );\n\n  const imagePreviewAlignment = senderType === 'self' ? 'flex-end' : 'flex-start';\n\n  return (\n    <BaseBox display=\"flex\" flexDirection=\"column\" gap=\"spacing.3\">\n      {thumbnails && thumbnails.length > 0 ? (\n        <BaseBox alignSelf={imagePreviewAlignment}>\n          <ThumbnailPreview thumbnails={thumbnails} onThumbnailClick={onThumbnailClick} />\n        </BaseBox>\n      ) : null}\n      <BaseBox\n        onClick={onClick}\n        {...(onClick ? { ...ButtonResetCss } : {})}\n        {...metaAttribute({ name: MetaConstants.ChatMessage, testID: props.testID })}\n        {...makeAnalyticsAttribute(props)}\n        {...getStyledProps(props)}\n        maxWidth={maxWidth}\n        ref={ref as never}\n        as={onClick ? 'button' : undefined}\n      >\n        {messageBubble}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nconst ChatMessage = assignWithoutSideEffects(React.forwardRef(_ChatMessage), {\n  displayName: 'ChatMessage',\n  componentId: MetaConstants.ChatMessage,\n});\nexport { ChatMessage };\n"],"names":["ButtonResetCss","background","border","padding","undefined","cursor","color","font","textAlign","outline","appearance","backgroundColor","_ChatMessage","_ref","ref","_ref$messageType","messageType","_ref$senderType","senderType","_ref$isLoading","isLoading","_ref$validationState","validationState","errorText","onClick","footerActions","children","leading","loadingText","_ref$wordBreak","wordBreak","maxWidth","thumbnails","onThumbnailClick","props","_objectWithoutProperties","_excluded","shouldWrapInText","Array","isArray","every","child","loadingContent","_jsx","RollingText","texts","finalChildren","Text","weight","variant","size","getStringFromReactText","messageBubble","SelfMessageBubble","isChildText","DefaultMessageBubble","imagePreviewAlignment","_jsxs","BaseBox","display","flexDirection","gap","length","alignSelf","ThumbnailPreview","_objectSpread","metaAttribute","name","MetaConstants","ChatMessage","testID","makeAnalyticsAttribute","getStyledProps","as","assignWithoutSideEffects","React","forwardRef","displayName","componentId"],"mappings":"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"}

package/build/lib/web/production/components/ChatMessage/SelfMessageBubble.web.js

@@ -1,31 +1,41 @@
 import 'react';
+import styled from 'styled-components';
 import { chatMessageToken } from './token.js';
+import { getMessageBubbleBoxShadow } from './utils.js';
 import '../Box/BaseBox/index.js';
 import { FormHint } from '../Form/FormHint.js';
+import '../../utils/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import useTheme from '../BladeProvider/useTheme.js';
 
+var StyledSelfMessageBubble = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "SelfMessageBubbleweb__StyledSelfMessageBubble",
+  componentId: "sc-1twwjir-0"
+})(function () {
+  var _useTheme = useTheme(),
+    colorScheme = _useTheme.colorScheme;
+  return getMessageBubbleBoxShadow(colorScheme);
+});
 var SelfMessageBubble = function SelfMessageBubble(_ref) {
   var children = _ref.children,
     validationState = _ref.validationState,
     _ref$errorText = _ref.errorText,
     errorText = _ref$errorText === void 0 ? 'Message not sent. Tap to retry.' : _ref$errorText,
-    messageType = _ref.messageType,
     isChildText = _ref.isChildText;
   var isError = validationState === 'error';
   return /*#__PURE__*/jsxs(BaseBox, {
     display: "flex",
     flexDirection: "column",
-    children: [/*#__PURE__*/jsx(BaseBox, {
-      backgroundColor: isError ? chatMessageToken.self.backgroundColor.error : chatMessageToken.self.backgroundColor["default"],
-      padding: isChildText ? 'spacing.4' : 'spacing.0',
-      borderTopLeftRadius: chatMessageToken.self.borderTopLeftRadius,
-      borderTopRightRadius: chatMessageToken.self.borderTopRightRadius,
-      borderBottomLeftRadius: chatMessageToken.self.borderBottomLeftRadius,
-      borderBottomRightRadius: messageType === 'last' ? chatMessageToken.self.borderBottomRightRadiusForLastMessage : chatMessageToken.self.borderBottomRightRadius,
+    children: [/*#__PURE__*/jsx(StyledSelfMessageBubble, {
+      backgroundColor: chatMessageToken.self.backgroundColor["default"],
+      padding: isChildText ? 'spacing.5' : 'spacing.0',
+      borderRadius: "large",
       width: "fit-content",
       height: "auto",
       alignSelf: "flex-end",
+      border: "thin",
+      borderColor: "surface.border.gray.muted",
       children: children
     }), /*#__PURE__*/jsx(BaseBox, {
       alignSelf: "flex-end",

package/build/lib/web/production/components/ChatMessage/SelfMessageBubble.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelfMessageBubble.web.js","sources":["../../../../../../src/components/ChatMessage/SelfMessageBubble.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { CommonChatMessageProps } from './types';\nimport { chatMessageToken } from './token';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint } from '~components/Form/FormHint';\n\nconst SelfMessageBubble = ({\n  children,\n  validationState,\n  errorText = 'Message not sent. Tap to retry.',\n  messageType,\n  isChildText,\n}: Pick<CommonChatMessageProps, 'children' | 'validationState' | 'errorText' | 'messageType'> & {\n  // is child is text then only add padding otherwise no need to add padding\n  isChildText: boolean;\n}): React.ReactElement => {\n  const isError = validationState === 'error';\n  return (\n    <BaseBox display=\"flex\" flexDirection=\"column\">\n      <BaseBox\n        backgroundColor={\n          isError\n            ? chatMessageToken.self.backgroundColor.error\n            : chatMessageToken.self.backgroundColor.default\n        }\n        padding={isChildText ? 'spacing.4' : 'spacing.0'}\n        borderTopLeftRadius={chatMessageToken.self.borderTopLeftRadius}\n        borderTopRightRadius={chatMessageToken.self.borderTopRightRadius}\n        borderBottomLeftRadius={chatMessageToken.self.borderBottomLeftRadius}\n        borderBottomRightRadius={\n          messageType === 'last'\n            ? chatMessageToken.self.borderBottomRightRadiusForLastMessage\n            : chatMessageToken.self.borderBottomRightRadius\n        }\n        width=\"fit-content\"\n        height=\"auto\"\n        alignSelf=\"flex-end\"\n      >\n        {children}\n      </BaseBox>\n      <BaseBox alignSelf=\"flex-end\">\n        {isError && <FormHint type=\"error\" errorText={errorText} size=\"small\" />}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport { SelfMessageBubble };\n"],"names":["SelfMessageBubble","_ref","children","validationState","_ref$errorText","errorText","messageType","isChildText","isError","_jsxs","BaseBox","display","flexDirection","_jsx","backgroundColor","chatMessageToken","self","error","padding","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","borderBottomRightRadiusForLastMessage","width","height","alignSelf","FormHint","type","size"],"mappings":";;;;;;;AAMA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,IAAA,EASG;AAAA,EAAA,IARxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IAAAC,cAAA,GAAAH,IAAA,CACfI,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,iCAAiC,GAAAA,cAAA;IAC7CE,WAAW,GAAAL,IAAA,CAAXK,WAAW;IACXC,WAAW,GAAAN,IAAA,CAAXM,WAAW,CAAA;AAKX,EAAA,IAAMC,OAAO,GAAGL,eAAe,KAAK,OAAO,CAAA;EAC3C,oBACEM,IAAA,CAACC,OAAO,EAAA;AAACC,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,aAAa,EAAC,QAAQ;IAAAV,QAAA,EAAA,cAC5CW,GAAA,CAACH,OAAO,EAAA;AACNI,MAAAA,eAAe,EACbN,OAAO,GACHO,gBAAgB,CAACC,IAAI,CAACF,eAAe,CAACG,KAAK,GAC3CF,gBAAgB,CAACC,IAAI,CAACF,eAAe,CAC1C,SAAA,CAAA;AACDI,MAAAA,OAAO,EAAEX,WAAW,GAAG,WAAW,GAAG,WAAY;AACjDY,MAAAA,mBAAmB,EAAEJ,gBAAgB,CAACC,IAAI,CAACG,mBAAoB;AAC/DC,MAAAA,oBAAoB,EAAEL,gBAAgB,CAACC,IAAI,CAACI,oBAAqB;AACjEC,MAAAA,sBAAsB,EAAEN,gBAAgB,CAACC,IAAI,CAACK,sBAAuB;AACrEC,MAAAA,uBAAuB,EACrBhB,WAAW,KAAK,MAAM,GAClBS,gBAAgB,CAACC,IAAI,CAACO,qCAAqC,GAC3DR,gBAAgB,CAACC,IAAI,CAACM,uBAC3B;AACDE,MAAAA,KAAK,EAAC,aAAa;AACnBC,MAAAA,MAAM,EAAC,MAAM;AACbC,MAAAA,SAAS,EAAC,UAAU;AAAAxB,MAAAA,QAAA,EAEnBA,QAAAA;AAAQ,KACF,CAAC,eACVW,GAAA,CAACH,OAAO,EAAA;AAACgB,MAAAA,SAAS,EAAC,UAAU;AAAAxB,MAAAA,QAAA,EAC1BM,OAAO,iBAAIK,GAAA,CAACc,QAAQ,EAAA;AAACC,QAAAA,IAAI,EAAC,OAAO;AAACvB,QAAAA,SAAS,EAAEA,SAAU;AAACwB,QAAAA,IAAI,EAAC,OAAA;OAAS,CAAA;AAAC,KACjE,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"SelfMessageBubble.web.js","sources":["../../../../../../src/components/ChatMessage/SelfMessageBubble.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { CommonChatMessageProps } from './types';\nimport { chatMessageToken } from './token';\nimport { getMessageBubbleBoxShadow } from './utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint } from '~components/Form/FormHint';\nimport { useTheme } from '~utils';\n\nconst StyledSelfMessageBubble = styled(BaseBox)(() => {\n  const { colorScheme } = useTheme();\n  return getMessageBubbleBoxShadow(colorScheme);\n});\n\nconst SelfMessageBubble = ({\n  children,\n  validationState,\n  errorText = 'Message not sent. Tap to retry.',\n  isChildText,\n}: Pick<CommonChatMessageProps, 'children' | 'validationState' | 'errorText'> & {\n  // is child is text then only add padding otherwise no need to add padding\n  isChildText: boolean;\n}): React.ReactElement => {\n  const isError = validationState === 'error';\n\n  return (\n    <BaseBox display=\"flex\" flexDirection=\"column\">\n      <StyledSelfMessageBubble\n        backgroundColor={chatMessageToken.self.backgroundColor.default}\n        padding={isChildText ? 'spacing.5' : 'spacing.0'}\n        borderRadius=\"large\"\n        width=\"fit-content\"\n        height=\"auto\"\n        alignSelf=\"flex-end\"\n        border=\"thin\"\n        borderColor=\"surface.border.gray.muted\"\n      >\n        {children}\n      </StyledSelfMessageBubble>\n      <BaseBox alignSelf=\"flex-end\">\n        {isError && <FormHint type=\"error\" errorText={errorText} size=\"small\" />}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport { SelfMessageBubble };\n"],"names":["StyledSelfMessageBubble","styled","BaseBox","withConfig","displayName","componentId","_useTheme","useTheme","colorScheme","getMessageBubbleBoxShadow","SelfMessageBubble","_ref","children","validationState","_ref$errorText","errorText","isChildText","isError","_jsxs","display","flexDirection","_jsx","backgroundColor","chatMessageToken","self","padding","borderRadius","width","height","alignSelf","border","borderColor","FormHint","type","size"],"mappings":";;;;;;;;;;;AASA,IAAMA,uBAAuB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+CAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAC,YAAM;AACpD,EAAA,IAAAC,SAAA,GAAwBC,QAAQ,EAAE;IAA1BC,WAAW,GAAAF,SAAA,CAAXE,WAAW,CAAA;EACnB,OAAOC,yBAAyB,CAACD,WAAW,CAAC,CAAA;AAC/C,CAAC,CAAC,CAAA;AAEF,IAAME,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,IAAA,EAQG;AAAA,EAAA,IAPxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IAAAC,cAAA,GAAAH,IAAA,CACfI,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,iCAAiC,GAAAA,cAAA;IAC7CE,WAAW,GAAAL,IAAA,CAAXK,WAAW,CAAA;AAKX,EAAA,IAAMC,OAAO,GAAGJ,eAAe,KAAK,OAAO,CAAA;EAE3C,oBACEK,IAAA,CAAChB,OAAO,EAAA;AAACiB,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,aAAa,EAAC,QAAQ;IAAAR,QAAA,EAAA,cAC5CS,GAAA,CAACrB,uBAAuB,EAAA;AACtBsB,MAAAA,eAAe,EAAEC,gBAAgB,CAACC,IAAI,CAACF,eAAe,CAAS,SAAA,CAAA;AAC/DG,MAAAA,OAAO,EAAET,WAAW,GAAG,WAAW,GAAG,WAAY;AACjDU,MAAAA,YAAY,EAAC,OAAO;AACpBC,MAAAA,KAAK,EAAC,aAAa;AACnBC,MAAAA,MAAM,EAAC,MAAM;AACbC,MAAAA,SAAS,EAAC,UAAU;AACpBC,MAAAA,MAAM,EAAC,MAAM;AACbC,MAAAA,WAAW,EAAC,2BAA2B;AAAAnB,MAAAA,QAAA,EAEtCA,QAAAA;AAAQ,KACc,CAAC,eAC1BS,GAAA,CAACnB,OAAO,EAAA;AAAC2B,MAAAA,SAAS,EAAC,UAAU;AAAAjB,MAAAA,QAAA,EAC1BK,OAAO,iBAAII,GAAA,CAACW,QAAQ,EAAA;AAACC,QAAAA,IAAI,EAAC,OAAO;AAAClB,QAAAA,SAAS,EAAEA,SAAU;AAACmB,QAAAA,IAAI,EAAC,OAAA;OAAS,CAAA;AAAC,KACjE,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEd;;;;"}

package/build/lib/web/production/components/ChatMessage/ThumbnailPreview.web.js

@@ -0,0 +1,142 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import 'react';
+import styled from 'styled-components';
+import { chatMessageToken } from './token.js';
+import '../Box/BaseBox/index.js';
+import '../Typography/index.js';
+import '../../utils/index.js';
+import '../../utils/metaAttribute/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { Text } from '../Typography/Text/Text.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var imagePreviewToken = chatMessageToken.imagePreview;
+var resolveThumbnailItem = function resolveThumbnailItem(thumbnail, originalIndex) {
+  var _thumbnail$id, _thumbnail$alt;
+  return {
+    id: (_thumbnail$id = thumbnail.id) !== null && _thumbnail$id !== void 0 ? _thumbnail$id : "thumbnail-".concat(originalIndex, "-").concat(thumbnail.url),
+    url: thumbnail.url,
+    alt: (_thumbnail$alt = thumbnail.alt) !== null && _thumbnail$alt !== void 0 ? _thumbnail$alt : '',
+    originalIndex: originalIndex,
+    originalThumbnail: thumbnail
+  };
+};
+var getCardStyle = function getCardStyle(stackIndex, isSingleThumbnail) {
+  var _imagePreviewToken$st;
+  if (isSingleThumbnail) {
+    return imagePreviewToken.singleCardStyle;
+  }
+  return (_imagePreviewToken$st = imagePreviewToken.stackCardStyles[stackIndex]) !== null && _imagePreviewToken$st !== void 0 ? _imagePreviewToken$st : imagePreviewToken.stackCardStyles[imagePreviewToken.stackCardStyles.length - 1];
+};
+var StyledPreviewImage = /*#__PURE__*/styled.img.withConfig({
+  displayName: "ThumbnailPreviewweb__StyledPreviewImage",
+  componentId: "sc-1mentjq-0"
+})({
+  width: '100%',
+  height: '100%',
+  aspectRatio: '1 / 1',
+  objectFit: 'cover',
+  display: 'block'
+});
+var ThumbnailPreview = function ThumbnailPreview(_ref) {
+  var thumbnails = _ref.thumbnails,
+    onThumbnailClick = _ref.onThumbnailClick;
+  var resolvedThumbnails = thumbnails.map(resolveThumbnailItem);
+  var previewThumbnails = resolvedThumbnails.slice(0, imagePreviewToken.maxVisibleStackImages);
+  var isSingleThumbnail = previewThumbnails.length === 1;
+  var overflowCount = Math.max(resolvedThumbnails.length - imagePreviewToken.maxVisibleStackImages, 0);
+  // Absolutely positioned cards don't affect parent height,
+  // so compute a deterministic min height from card offsets.
+  // For a single card, use the image size directly.
+  // For stacked cards, calculate based on bottom offsets plus image size and stack offset.
+  var stackHeight = isSingleThumbnail ? imagePreviewToken.previewImageSizePx : Math.max.apply(Math, _toConsumableArray(previewThumbnails.map(function (_, stackIndex) {
+    return getCardStyle(stackIndex, isSingleThumbnail).bottom + imagePreviewToken.previewImageSizePx;
+  })).concat([0])) + imagePreviewToken.stackHeightOffset;
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, metaAttribute({
+    name: MetaConstants.ChatMessageThumbnailPreview
+  })), {}, {
+    children: /*#__PURE__*/jsxs(BaseBox, {
+      as: onThumbnailClick ? 'button' : 'div',
+      type: onThumbnailClick ? 'button' : undefined,
+      onClick: onThumbnailClick,
+      cursor: onThumbnailClick ? 'pointer' : 'default',
+      position: "relative",
+      width: isSingleThumbnail ? imagePreviewToken.previewImageSize : '188px',
+      height: makeSize(stackHeight),
+      border: "none",
+      padding: "spacing.0",
+      margin: "spacing.0",
+      backgroundColor: "transparent",
+      children: [
+      // Render back cards first and front card last (top-most in DOM paint order).
+      // `reverse()` mutates, so clone first to preserve `previewThumbnails`.
+      // Data mapping example for `previewThumbnails = [A, B, C]`:
+      // - A = thumbnails[0], B = thumbnails[1], C = thumbnails[2]
+      // - Render loop iterates `[C, B, A]`
+      // - Computed stackIndex becomes 2, 1, 0 respectively
+      //   => C uses style slot 2, B uses style slot 1, A uses style slot 0
+      // This preserves stack positioning by original order while controlling paint order.
+      _toConsumableArray(previewThumbnails).reverse().map(function (_ref2, reverseIndex) {
+        var id = _ref2.id,
+          url = _ref2.url,
+          alt = _ref2.alt;
+        var stackIndex = previewThumbnails.length - reverseIndex - 1;
+        var cardStyle = getCardStyle(stackIndex, isSingleThumbnail);
+        return /*#__PURE__*/jsx(BaseBox, {
+          position: "absolute",
+          width: imagePreviewToken.previewImageSize,
+          height: imagePreviewToken.previewImageSize,
+          borderRadius: "small",
+          overflow: "hidden",
+          padding: "spacing.0",
+          bottom: makeSize(cardStyle.bottom),
+          right: makeSize(cardStyle.right),
+          transform: cardStyle.transform,
+          zIndex: cardStyle.zIndex,
+          elevation: "midRaised",
+          border: "thin",
+          borderColor: "interactive.border.staticWhite.default",
+          backgroundColor: "surface.background.gray.moderate",
+          children: /*#__PURE__*/jsx(StyledPreviewImage, {
+            src: url,
+            alt: alt
+          })
+        }, "".concat(id, "-").concat(stackIndex));
+      }), overflowCount > 0 ? /*#__PURE__*/jsx(BaseBox, {
+        position: "absolute",
+        right: makeSize(10),
+        bottom: makeSize(0),
+        width: makeSize(40),
+        height: makeSize(40),
+        borderRadius: "max",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "surface.background.gray.moderate",
+        elevation: "lowRaised",
+        border: "thin",
+        borderColor: "surface.border.gray.muted",
+        style: {
+          zIndex: 4
+        },
+        children: /*#__PURE__*/jsxs(Text, {
+          color: "surface.text.gray.muted",
+          size: "medium",
+          weight: "medium",
+          textAlign: "center",
+          marginRight: "spacing.1",
+          children: ["+", overflowCount]
+        })
+      }) : null]
+    })
+  }));
+};
+
+export { ThumbnailPreview };
+//# sourceMappingURL=ThumbnailPreview.web.js.map