stream-chat-react 12.14.0 → 12.15.0

package/dist/index.node.cjs

@@ -10556,7 +10556,7 @@ var require_react_is = __commonJS({
 var require_ast_to_react = __commonJS({
   "node_modules/mml-react/node_modules/react-markdown/lib/ast-to-react.js"(exports2, module2) {
     "use strict";
-    var React209 = require("react");
+    var React210 = require("react");
     var xtend = require_immutable();
     var ReactIs = require_react_is();
     function astToReact(node2, options) {
@@ -10583,7 +10583,7 @@ var require_ast_to_react = __commonJS({
         throw new Error("Renderer for type `".concat(node2.type, "` not defined or is not renderable"));
       }
       var nodeProps = getNodeProps(node2, key, options, renderer, parent, index3);
-      return React209.createElement(renderer, nodeProps, nodeProps.children || resolveChildren() || void 0);
+      return React210.createElement(renderer, nodeProps, nodeProps.children || resolveChildren() || void 0);
       function resolveChildren() {
         return node2.children && node2.children.map(function(childNode, i) {
           return astToReact(childNode, options, {
@@ -10597,7 +10597,7 @@ var require_ast_to_react = __commonJS({
       var props = {
         key
       };
-      var isSimpleRenderer = typeof renderer === "string" || renderer === React209.Fragment;
+      var isSimpleRenderer = typeof renderer === "string" || renderer === React210.Fragment;
       if (opts.sourcePos && node2.position) {
         props["data-sourcepos"] = flattenPosition(node2.position);
       }
@@ -10750,14 +10750,14 @@ var require_ast_to_react = __commonJS({
     function mergeNodeChildren(node2, parsedChildren) {
       var el = node2.element;
       if (Array.isArray(el)) {
-        var Fragment3 = React209.Fragment || "div";
-        return React209.createElement(Fragment3, null, el);
+        var Fragment3 = React210.Fragment || "div";
+        return React210.createElement(Fragment3, null, el);
       }
       if (el.props.children || parsedChildren) {
-        var children = React209.Children.toArray(el.props.children).concat(parsedChildren);
-        return React209.cloneElement(el, null, children);
+        var children = React210.Children.toArray(el.props.children).concat(parsedChildren);
+        return React210.cloneElement(el, null, children);
       }
-      return React209.cloneElement(el, null);
+      return React210.cloneElement(el, null);
     }
     function flattenPosition(pos) {
       return [pos.start.line, ":", pos.start.column, "-", pos.end.line, ":", pos.end.column].map(String).join("");
@@ -10881,9 +10881,9 @@ var require_renderers = __commonJS({
   "node_modules/mml-react/node_modules/react-markdown/lib/renderers.js"(exports2, module2) {
     "use strict";
     var xtend = require_immutable();
-    var React209 = require("react");
-    var supportsStringRender = parseInt((React209.version || "16").slice(0, 2), 10) >= 16;
-    var createElement = React209.createElement;
+    var React210 = require("react");
+    var supportsStringRender = parseInt((React210.version || "16").slice(0, 2), 10) >= 16;
+    var createElement = React210.createElement;
     module2.exports = {
       break: "br",
       paragraph: "p",
@@ -10919,7 +10919,7 @@ var require_renderers = __commonJS({
     }
     function Root(props) {
       var className = props.className;
-      var root4 = !className && React209.Fragment || "div";
+      var root4 = !className && React210.Fragment || "div";
       return createElement(root4, className ? {
         className
       } : null, props.children);
@@ -10975,7 +10975,7 @@ var require_renderers = __commonJS({
       var dangerous = props.allowDangerousHtml || props.escapeHtml === false;
       var tag = props.isBlock ? "div" : "span";
       if (!dangerous) {
-        return createElement(React209.Fragment || tag, null, props.value);
+        return createElement(React210.Fragment || tag, null, props.value);
       }
       var nodeProps = {
         dangerouslySetInnerHTML: {
@@ -10985,7 +10985,7 @@ var require_renderers = __commonJS({
       return createElement(tag, nodeProps);
     }
     function ParsedHtml(props) {
-      return props["data-sourcepos"] ? React209.cloneElement(props.element, {
+      return props["data-sourcepos"] ? React210.cloneElement(props.element, {
         "data-sourcepos": props["data-sourcepos"]
       }) : props.element;
     }
@@ -18837,8 +18837,8 @@ var require_mml_react_cjs_development = __commonJS({
     function _interopDefault(ex) {
       return ex && typeof ex === "object" && "default" in ex ? ex["default"] : ex;
     }
-    var React209 = require("react");
-    var React__default = _interopDefault(React209);
+    var React210 = require("react");
+    var React__default = _interopDefault(React210);
     var parseXml = _interopDefault(require_src());
     var dayjs = _interopDefault(require("dayjs"));
     var sanitizeUrl4 = require("@braintree/sanitize-url");
@@ -19623,8 +19623,8 @@ var require_mml_react_cjs_development = __commonJS({
         className: "mml-carousel__track"
       }, React__default.createElement("div", {
         className: "mml-carousel__slides"
-      }, React209.Children.map(children, function(child) {
-        return React209.cloneElement(child, {
+      }, React210.Children.map(children, function(child) {
+        return React210.cloneElement(child, {
           className: "mml-carousel__slide",
           slideWidth
         });
@@ -19668,7 +19668,7 @@ var require_mml_react_cjs_development = __commonJS({
     };
     var Input = function Input2(_ref) {
       var name2 = _ref.name, label = _ref.label, _ref$value = _ref.value, value = _ref$value === void 0 ? "" : _ref$value, _ref$type = _ref.type, type = _ref$type === void 0 ? "text" : _ref$type, _ref$placeholder = _ref.placeholder, placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder;
-      var _useState = React209.useState(value), state = _useState[0], setState = _useState[1];
+      var _useState = React210.useState(value), state = _useState[0], setState = _useState[1];
       var id = "mml-" + name2;
       return React__default.createElement(React__default.Fragment, null, label && React__default.createElement("label", {
         className: "mml-card-header",
@@ -19798,7 +19798,7 @@ var require_mml_react_cjs_development = __commonJS({
     };
     var Number2 = function Number3(_ref) {
       var name2 = _ref.name, value = _ref.value;
-      var _useState = React209.useState(parseInt("" + value, 10) || 0), state = _useState[0], setState = _useState[1];
+      var _useState = React210.useState(parseInt("" + value, 10) || 0), state = _useState[0], setState = _useState[1];
       return React__default.createElement("div", {
         className: "mml-number"
       }, React__default.createElement("input", {
@@ -19835,7 +19835,7 @@ var require_mml_react_cjs_development = __commonJS({
     var VIRTUOSO_START_INDEX = 1e4;
     var DatePickerSelect = function DatePickerSelect2(props) {
       var onChange = props.onChange, icalFilter = props.icalFilter, getItemData2 = props.getItemData, itemClassName = props.itemClassName, interval = props.interval, format = props.format, value = props.value;
-      var generateItems = React209.useCallback(function(quantity, firstIdx) {
+      var generateItems = React210.useCallback(function(quantity, firstIdx) {
         return Array(quantity).fill(true).map(function(_, idx) {
           return getItemData2({
             interval,
@@ -19847,11 +19847,11 @@ var require_mml_react_cjs_development = __commonJS({
           return !icalFilter || icalFilter && icalFilter(newItem.value);
         });
       }, [interval, format, value, icalFilter, getItemData2]);
-      var _useState = React209.useState(generateItems(ITEMS_PER_PAGE * 2, -ITEMS_PER_PAGE)), items = _useState[0], setItems = _useState[1];
-      var _useState2 = React209.useState(VIRTUOSO_START_INDEX), firstItemIndex = _useState2[0], setFirstItemIndex = _useState2[1];
-      var initialIndexOffset = React209.useRef(INITIAL_INDEX);
-      var _useState3 = React209.useState(null), selectedIdx = _useState3[0], setSelectedIdx = _useState3[1];
-      var handleClick = React209.useCallback(function(item) {
+      var _useState = React210.useState(generateItems(ITEMS_PER_PAGE * 2, -ITEMS_PER_PAGE)), items = _useState[0], setItems = _useState[1];
+      var _useState2 = React210.useState(VIRTUOSO_START_INDEX), firstItemIndex = _useState2[0], setFirstItemIndex = _useState2[1];
+      var initialIndexOffset = React210.useRef(INITIAL_INDEX);
+      var _useState3 = React210.useState(null), selectedIdx = _useState3[0], setSelectedIdx = _useState3[1];
+      var handleClick = React210.useCallback(function(item) {
         onChange(item.value);
         var firstItemIndex2 = initialIndexOffset.current || 0;
         var nextFirstItemIdx = firstItemIndex2 - INITIAL_INDEX - ITEMS_PER_PAGE;
@@ -19865,12 +19865,12 @@ var require_mml_react_cjs_development = __commonJS({
         }
         setSelectedIdx(item.idx);
       }, [setItems, generateItems, initialIndexOffset, onChange]);
-      var appendItems = React209.useCallback(function(lastItemIndex) {
+      var appendItems = React210.useCallback(function(lastItemIndex) {
         setItems(function(items2) {
           return [].concat(items2, generateItems(ITEMS_PER_PAGE, lastItemIndex));
         });
       }, [setItems, generateItems]);
-      var prependItems = React209.useCallback(function() {
+      var prependItems = React210.useCallback(function() {
         var firstItemIndex2 = initialIndexOffset.current || 0;
         var nextFirstItemIdx = firstItemIndex2 - INITIAL_INDEX - ITEMS_PER_PAGE;
         if (initialIndexOffset) {
@@ -19882,7 +19882,7 @@ var require_mml_react_cjs_development = __commonJS({
         setFirstItemIndex(firstItemIndex2 - ITEMS_PER_PAGE);
         return false;
       }, [setItems, generateItems, initialIndexOffset]);
-      React209.useEffect(function() {
+      React210.useEffect(function() {
         if (value) {
           var initialSelectedIdx = null;
           for (var i = 0; i < items.length; i++) {
@@ -19952,7 +19952,7 @@ var require_mml_react_cjs_development = __commonJS({
     };
     var DatePicker = function DatePicker2(_ref) {
       var name2 = _ref.name, selected = _ref.selected, dateInterval = _ref.dateInterval, timeInterval = _ref.timeInterval, dateFormat = _ref.dateFormat, timeFormat = _ref.timeFormat, fullDay = _ref.fullDay, icalFilter = _ref.icalFilter;
-      var _useState = React209.useState(selected), date = _useState[0], setDate = _useState[1];
+      var _useState = React210.useState(selected), date = _useState[0], setDate = _useState[1];
       var handleChangeDate = function handleChangeDate2(value) {
         setDate(function(prevDate) {
           return prevDate.set("date", value.get("date")).set("month", value.get("month")).set("year", value.get("year"));
@@ -20032,14 +20032,14 @@ var require_mml_react_cjs_development = __commonJS({
     }();
     var Scheduler = function Scheduler2(_ref2) {
       var name2 = _ref2.name, selected = _ref2.selected, icalAvailability = _ref2.icalAvailability, _ref2$duration = _ref2.duration, duration = _ref2$duration === void 0 ? 30 : _ref2$duration, _ref2$dateInterval = _ref2.dateInterval, dateInterval = _ref2$dateInterval === void 0 ? 1 : _ref2$dateInterval, _ref2$timeInterval = _ref2.timeInterval, timeInterval = _ref2$timeInterval === void 0 ? 30 : _ref2$timeInterval, _ref2$dateFormat = _ref2.dateFormat, dateFormat = _ref2$dateFormat === void 0 ? "ddd MMM DD" : _ref2$dateFormat, _ref2$timeFormat = _ref2.timeFormat, timeFormat = _ref2$timeFormat === void 0 ? "hh:mm A" : _ref2$timeFormat, _ref2$fullDay = _ref2.fullDay, fullDay = _ref2$fullDay === void 0 ? false : _ref2$fullDay;
-      var _useState = React209.useState(false), loading = _useState[0], setLoading = _useState[1];
-      var _useState2 = React209.useState(""), error = _useState2[0], setError = _useState2[1];
-      var _useState3 = React209.useState(function() {
+      var _useState = React210.useState(false), loading = _useState[0], setLoading = _useState[1];
+      var _useState2 = React210.useState(""), error = _useState2[0], setError = _useState2[1];
+      var _useState3 = React210.useState(function() {
         return function() {
           return true;
         };
       }), icalFilter = _useState3[0], setIcalFilter = _useState3[1];
-      React209.useEffect(function() {
+      React210.useEffect(function() {
         if (!icalAvailability) return;
         setLoading(true);
         setupIcalFilter(icalAvailability, duration).then(setIcalFilter)["catch"](function(err) {
@@ -20243,13 +20243,13 @@ var require_mml_react_cjs_development = __commonJS({
     }
     var MML2 = function MML3(_ref) {
       var source = _ref.source, onSubmit = _ref.onSubmit, converters2 = _ref.converters, _ref$theme = _ref.theme, theme = _ref$theme === void 0 ? "" : _ref$theme, _ref$className = _ref.className, className = _ref$className === void 0 ? "" : _ref$className, _ref$Loading = _ref.Loading, Loading$1 = _ref$Loading === void 0 ? Loading : _ref$Loading, _ref$Error = _ref.Error, Error2 = _ref$Error === void 0 ? Error$1 : _ref$Error, _ref$Success = _ref.Success, Success$1 = _ref$Success === void 0 ? Success : _ref$Success;
-      var _useState = React209.useState(""), error = _useState[0], setError = _useState[1];
-      var _useState2 = React209.useState({
+      var _useState = React210.useState(""), error = _useState[0], setError = _useState[1];
+      var _useState2 = React210.useState({
         loading: false,
         error: "",
         success: ""
       }), submitState = _useState2[0], setSubmitState = _useState2[1];
-      var tree = React209.useMemo(function() {
+      var tree = React210.useMemo(function() {
         try {
           return Parse(source, converters2);
         } catch (e2) {
@@ -20258,7 +20258,7 @@ var require_mml_react_cjs_development = __commonJS({
           return null;
         }
       }, [source, converters2]);
-      var handleSubmit = React209.useCallback(/* @__PURE__ */ function() {
+      var handleSubmit = React210.useCallback(/* @__PURE__ */ function() {
         var _ref2 = _asyncToGenerator(/* @__PURE__ */ runtime_1.mark(function _callee(event) {
           var state;
           return runtime_1.wrap(function _callee$(_context) {
@@ -20583,6 +20583,7 @@ __export(src_exports, {
   WaveProgressBar: () => WaveProgressBar,
   Window: () => Window,
   WithComponents: () => WithComponents,
+  WithDragAndDropUpload: () => WithDragAndDropUpload,
   areMessagePropsEqual: () => areMessagePropsEqual,
   areMessageUIPropsEqual: () => areMessageUIPropsEqual,
   attachmentTypeIconMap: () => attachmentTypeIconMap,
@@ -21293,9 +21294,6 @@ var MessageInputContextProvider = ({
 var useMessageInputContext = (componentName) => {
   const contextValue = (0, import_react13.useContext)(MessageInputContext);
   if (!contextValue) {
-    console.warn(
-      `The useMessageInputContext hook was called outside of the MessageInputContext provider. Make sure this hook is called within the MessageInput's UI component. The errored call is located in the ${componentName} component.`
-    );
     return {};
   }
   return contextValue;
@@ -40280,7 +40278,7 @@ ReactTextareaAutocomplete.propTypes = {
 };
 
 // src/components/Channel/Channel.tsx
-var import_react257 = __toESM(require("react"));
+var import_react258 = __toESM(require("react"));
 var import_lodash22 = __toESM(require("lodash.debounce"));
 var import_lodash23 = __toESM(require("lodash.defaultsdeep"));
 var import_lodash24 = __toESM(require("lodash.throttle"));
@@ -45548,10 +45546,10 @@ var UnMemoizedConnectionStatus = () => {
 var ConnectionStatus = import_react80.default.memo(UnMemoizedConnectionStatus);
 
 // src/components/MessageList/GiphyPreviewMessage.tsx
-var import_react226 = __toESM(require("react"));
+var import_react227 = __toESM(require("react"));
 
 // src/components/Message/Message.tsx
-var import_react225 = __toESM(require("react"));
+var import_react226 = __toESM(require("react"));
 
 // src/components/Message/hooks/useActionHandler.ts
 var handleActionWarning = `Action handler was called, but it is missing one of its required arguments. 
@@ -49126,7 +49124,7 @@ var useMessageTextStreaming = ({
 };
 
 // src/components/Message/MessageSimple.tsx
-var import_react224 = __toESM(require("react"));
+var import_react225 = __toESM(require("react"));
 var import_clsx60 = __toESM(require("clsx"));
 
 // src/components/Message/icons.tsx
@@ -53111,12 +53109,10 @@ var DefaultTriggerProvider = ({
 };
 
 // src/components/MessageInput/EditMessageForm.tsx
-var import_react216 = __toESM(require("react"));
+var import_react217 = __toESM(require("react"));
 
 // src/components/MessageInput/MessageInputFlat.tsx
-var import_react215 = __toESM(require("react"));
-var import_clsx55 = __toESM(require("clsx"));
-var import_react_dropzone2 = require("react-dropzone");
+var import_react216 = __toESM(require("react"));
 
 // src/components/MessageInput/SendButton.tsx
 var import_react205 = __toESM(require("react"));
@@ -53521,9 +53517,83 @@ var AIStateIndicator = ({
   return aiState in allowedStates ? /* @__PURE__ */ import_react214.default.createElement("div", { className: "str-chat__ai-state-indicator-container" }, /* @__PURE__ */ import_react214.default.createElement("p", { className: "str-chat__ai-state-indicator-text" }, allowedStates[aiState])) : null;
 };
 
+// src/components/MessageInput/WithDragAndDropUpload.tsx
+var import_react215 = __toESM(require("react"));
+var import_react_dropzone2 = require("react-dropzone");
+var import_clsx55 = __toESM(require("clsx"));
+var DragAndDropUploadContext = import_react215.default.createContext({
+  subscribeToDrop: null
+});
+var useDragAndDropUploadContext = () => (0, import_react215.useContext)(DragAndDropUploadContext);
+var useRegisterDropHandlers = ({ uploadNewFiles }) => {
+  const { subscribeToDrop } = useDragAndDropUploadContext();
+  (0, import_react215.useEffect)(() => {
+    const unsubscribe = subscribeToDrop?.(uploadNewFiles);
+    return unsubscribe;
+  }, [subscribeToDrop, uploadNewFiles]);
+};
+var WithDragAndDropUpload = ({
+  children,
+  className,
+  component: Component2 = "div",
+  style
+}) => {
+  const dropHandlersRef = (0, import_react215.useRef)(/* @__PURE__ */ new Set());
+  const { acceptedFiles = [], multipleUploads } = useChannelStateContext();
+  const { t: t2 } = useTranslationContext();
+  const messageInputContext = useMessageInputContext();
+  const dragAndDropUploadContext = useDragAndDropUploadContext();
+  const isWithinMessageInputContext = typeof messageInputContext.uploadNewFiles === "function";
+  const accept = (0, import_react215.useMemo)(
+    () => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
+      mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
+      return mediaTypeMap;
+    }, {}),
+    [acceptedFiles]
+  );
+  const subscribeToDrop = (0, import_react215.useCallback)((fn) => {
+    dropHandlersRef.current.add(fn);
+    return () => {
+      dropHandlersRef.current.delete(fn);
+    };
+  }, []);
+  const handleDrop = (0, import_react215.useCallback)((files) => {
+    dropHandlersRef.current.forEach((fn) => fn(files));
+  }, []);
+  const { getRootProps, isDragActive, isDragReject } = (0, import_react_dropzone2.useDropzone)({
+    accept,
+    // apply `disabled` rules if available, otherwise allow anything and
+    // let the `uploadNewFiles` handle the limitations internally
+    disabled: isWithinMessageInputContext ? !messageInputContext.isUploadEnabled || messageInputContext.maxFilesLeft === 0 : false,
+    multiple: multipleUploads,
+    noClick: true,
+    onDrop: isWithinMessageInputContext ? messageInputContext.uploadNewFiles : handleDrop
+  });
+  if (dragAndDropUploadContext.subscribeToDrop !== null) {
+    return /* @__PURE__ */ import_react215.default.createElement(Component2, { className }, children);
+  }
+  return /* @__PURE__ */ import_react215.default.createElement(
+    DragAndDropUploadContext.Provider,
+    {
+      value: {
+        subscribeToDrop
+      }
+    },
+    /* @__PURE__ */ import_react215.default.createElement(Component2, { ...getRootProps({ className, style }) }, isDragActive && /* @__PURE__ */ import_react215.default.createElement(
+      "div",
+      {
+        className: (0, import_clsx55.default)("str-chat__dropzone-container", {
+          "str-chat__dropzone-container--not-accepted": isDragReject
+        })
+      },
+      !isDragReject && /* @__PURE__ */ import_react215.default.createElement("p", null, t2("Drag your files here")),
+      isDragReject && /* @__PURE__ */ import_react215.default.createElement("p", null, t2("Some of the files will not be accepted"))
+    ), children)
+  );
+};
+
 // src/components/MessageInput/MessageInputFlat.tsx
 var MessageInputFlat = () => {
-  const { t: t2 } = useTranslationContext("MessageInputFlat");
   const {
     asyncMessagesMultiSendEnabled,
     attachments,
@@ -53533,14 +53603,12 @@ var MessageInputFlat = () => {
     hideSendButton,
     isUploadEnabled,
     linkPreviews,
-    maxFilesLeft,
     message,
     numberOfUploads,
     parent,
     recordingController,
     setCooldownRemaining,
-    text: text7,
-    uploadNewFiles
+    text: text7
   } = useMessageInputContext("MessageInputFlat");
   const {
     AttachmentPreviewList: AttachmentPreviewList2 = AttachmentPreviewList,
@@ -53555,41 +53623,23 @@ var MessageInputFlat = () => {
     StartRecordingAudioButton: StartRecordingAudioButton2 = StartRecordingAudioButton,
     StopAIGenerationButton: StopAIGenerationButtonOverride
   } = useComponentContext("MessageInputFlat");
-  const {
-    acceptedFiles = [],
-    multipleUploads,
-    quotedMessage
-  } = useChannelStateContext("MessageInputFlat");
+  const { quotedMessage } = useChannelStateContext("MessageInputFlat");
   const { setQuotedMessage } = useChannelActionContext("MessageInputFlat");
   const { channel } = useChatContext("MessageInputFlat");
   const { aiState } = useAIState(channel);
-  const stopGenerating = (0, import_react215.useCallback)(() => channel?.stopAIResponse(), [channel]);
+  const stopGenerating = (0, import_react216.useCallback)(() => channel?.stopAIResponse(), [channel]);
   const [
     showRecordingPermissionDeniedNotification,
     setShowRecordingPermissionDeniedNotification
-  ] = (0, import_react215.useState)(false);
-  const closePermissionDeniedNotification = (0, import_react215.useCallback)(() => {
+  ] = (0, import_react216.useState)(false);
+  const closePermissionDeniedNotification = (0, import_react216.useCallback)(() => {
     setShowRecordingPermissionDeniedNotification(false);
   }, []);
-  const failedUploadsCount = (0, import_react215.useMemo)(
+  const failedUploadsCount = (0, import_react216.useMemo)(
     () => attachments.filter((a2) => a2.localMetadata?.uploadState === "failed").length,
     [attachments]
   );
-  const accept = (0, import_react215.useMemo)(
-    () => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
-      mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
-      return mediaTypeMap;
-    }, {}),
-    [acceptedFiles]
-  );
-  const { getRootProps, isDragActive, isDragReject } = (0, import_react_dropzone2.useDropzone)({
-    accept,
-    disabled: !isUploadEnabled || maxFilesLeft === 0,
-    multiple: multipleUploads,
-    noClick: true,
-    onDrop: uploadNewFiles
-  });
-  (0, import_react215.useEffect)(() => {
+  (0, import_react216.useEffect)(() => {
     const handleQuotedMessageUpdate = (e2) => {
       if (e2.message?.id !== quotedMessage?.id) return;
       if (e2.type === "message.deleted") {
@@ -53605,40 +53655,31 @@ var MessageInputFlat = () => {
       channel?.off("message.updated", handleQuotedMessageUpdate);
     };
   }, [channel, quotedMessage]);
-  if (recordingController.recordingState) return /* @__PURE__ */ import_react215.default.createElement(AudioRecorder2, null);
+  if (recordingController.recordingState) return /* @__PURE__ */ import_react216.default.createElement(AudioRecorder2, null);
   const displayQuotedMessage = !message && quotedMessage && quotedMessage.parent_id === parent?.id;
   const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices);
   const isRecording = !!recordingController.recordingState;
   const StopAIGenerationButton2 = StopAIGenerationButtonOverride === void 0 ? StopAIGenerationButton : StopAIGenerationButtonOverride;
   const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopAIGenerationButton2;
-  return /* @__PURE__ */ import_react215.default.createElement(import_react215.default.Fragment, null, /* @__PURE__ */ import_react215.default.createElement("div", { ...getRootProps({ className: "str-chat__message-input" }) }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react215.default.createElement(
+  return /* @__PURE__ */ import_react216.default.createElement(WithDragAndDropUpload, { className: "str-chat__message-input", component: "div" }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react216.default.createElement(
     RecordingPermissionDeniedNotification2,
     {
       onClose: closePermissionDeniedNotification,
       permissionName: "microphone" /* MIC */
     }
-  ), findAndEnqueueURLsToEnrich && /* @__PURE__ */ import_react215.default.createElement(LinkPreviewList2, { linkPreviews: Array.from(linkPreviews.values()) }), isDragActive && /* @__PURE__ */ import_react215.default.createElement(
-    "div",
-    {
-      className: (0, import_clsx55.default)("str-chat__dropzone-container", {
-        "str-chat__dropzone-container--not-accepted": isDragReject
-      })
-    },
-    !isDragReject && /* @__PURE__ */ import_react215.default.createElement("p", null, t2("Drag your files here")),
-    isDragReject && /* @__PURE__ */ import_react215.default.createElement("p", null, t2("Some of the files will not be accepted"))
-  ), displayQuotedMessage && /* @__PURE__ */ import_react215.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react215.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react215.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react215.default.createElement("div", { className: "str-chat__message-textarea-container" }, displayQuotedMessage && /* @__PURE__ */ import_react215.default.createElement(QuotedMessagePreview2, { quotedMessage }), isUploadEnabled && !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && /* @__PURE__ */ import_react215.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react215.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react215.default.createElement(ChatAutoComplete, null), EmojiPicker && /* @__PURE__ */ import_react215.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react215.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react215.default.createElement(import_react215.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react215.default.createElement(
+  ), findAndEnqueueURLsToEnrich && /* @__PURE__ */ import_react216.default.createElement(LinkPreviewList2, { linkPreviews: Array.from(linkPreviews.values()) }), displayQuotedMessage && /* @__PURE__ */ import_react216.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react216.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react216.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react216.default.createElement("div", { className: "str-chat__message-textarea-container" }, displayQuotedMessage && /* @__PURE__ */ import_react216.default.createElement(QuotedMessagePreview2, { quotedMessage }), isUploadEnabled && !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && /* @__PURE__ */ import_react216.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react216.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react216.default.createElement(ChatAutoComplete, null), EmojiPicker && /* @__PURE__ */ import_react216.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react216.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react216.default.createElement(import_react216.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react216.default.createElement(
     CooldownTimer2,
     {
       cooldownInterval: cooldownRemaining,
       setCooldownRemaining
     }
-  ) : /* @__PURE__ */ import_react215.default.createElement(import_react215.default.Fragment, null, /* @__PURE__ */ import_react215.default.createElement(
+  ) : /* @__PURE__ */ import_react216.default.createElement(import_react216.default.Fragment, null, /* @__PURE__ */ import_react216.default.createElement(
     SendButton2,
     {
       disabled: !numberOfUploads && !text7.length && attachments.length - failedUploadsCount === 0,
       sendMessage: handleSubmit
     }
-  ), recordingEnabled && /* @__PURE__ */ import_react215.default.createElement(
+  ), recordingEnabled && /* @__PURE__ */ import_react216.default.createElement(
     StartRecordingAudioButton2,
     {
       disabled: isRecording || !asyncMessagesMultiSendEnabled && attachments.some(
@@ -53649,29 +53690,29 @@ var MessageInputFlat = () => {
         setShowRecordingPermissionDeniedNotification(true);
       }
     }
-  ))))));
+  )))));
 };
 
 // src/components/MessageInput/EditMessageForm.tsx
 var EditMessageForm = () => {
   const { t: t2 } = useTranslationContext("EditMessageForm");
   const { clearEditingState, handleSubmit } = useMessageInputContext("EditMessageForm");
-  (0, import_react216.useEffect)(() => {
+  (0, import_react217.useEffect)(() => {
     const onKeyDown = (event) => {
       if (event.key === "Escape") clearEditingState?.();
     };
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [clearEditingState]);
-  return /* @__PURE__ */ import_react216.default.createElement(
+  return /* @__PURE__ */ import_react217.default.createElement(
     "form",
     {
       autoComplete: "off",
       className: "str-chat__edit-message-form",
       onSubmit: handleSubmit
     },
-    /* @__PURE__ */ import_react216.default.createElement(MessageInputFlat, null),
-    /* @__PURE__ */ import_react216.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react216.default.createElement(
+    /* @__PURE__ */ import_react217.default.createElement(MessageInputFlat, null),
+    /* @__PURE__ */ import_react217.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react217.default.createElement(
       "button",
       {
         className: "str-chat__edit-message-cancel",
@@ -53679,7 +53720,7 @@ var EditMessageForm = () => {
         onClick: clearEditingState
       },
       t2("Cancel")
-    ), /* @__PURE__ */ import_react216.default.createElement(
+    ), /* @__PURE__ */ import_react217.default.createElement(
       "button",
       {
         className: "str-chat__edit-message-send",
@@ -53692,7 +53733,7 @@ var EditMessageForm = () => {
 };
 
 // src/components/MessageInput/MessageInput.tsx
-var import_react217 = __toESM(require("react"));
+var import_react218 = __toESM(require("react"));
 var MessageInputProvider = (props) => {
   const cooldownTimerState = useCooldownTimer();
   const messageInputState = useMessageInputState(props);
@@ -53703,7 +53744,8 @@ var MessageInputProvider = (props) => {
     ...props,
     emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex
   });
-  return /* @__PURE__ */ import_react217.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
+  useRegisterDropHandlers(messageInputContextValue);
+  return /* @__PURE__ */ import_react218.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
 };
 var UnMemoizedMessageInput = (props) => {
   const { Input: PropInput } = props;
@@ -53712,35 +53754,35 @@ var UnMemoizedMessageInput = (props) => {
   const Input = PropInput || ContextInput || MessageInputFlat;
   const dialogManagerId = props.isThreadInput ? "message-input-dialog-manager-thread" : "message-input-dialog-manager";
   if (dragAndDropWindow)
-    return /* @__PURE__ */ import_react217.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react217.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react217.default.createElement(Input, null)));
-  return /* @__PURE__ */ import_react217.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react217.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react217.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react217.default.createElement(Input, null))));
+    return /* @__PURE__ */ import_react218.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react218.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react218.default.createElement(Input, null)));
+  return /* @__PURE__ */ import_react218.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react218.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react218.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react218.default.createElement(Input, null))));
 };
-var MessageInput = import_react217.default.memo(
+var MessageInput = import_react218.default.memo(
   UnMemoizedMessageInput
 );
 
 // src/components/Reactions/ReactionsList.tsx
-var import_react221 = __toESM(require("react"));
+var import_react222 = __toESM(require("react"));
 var import_clsx57 = __toESM(require("clsx"));
 
 // src/components/Reactions/ReactionsListModal.tsx
-var import_react219 = __toESM(require("react"));
+var import_react220 = __toESM(require("react"));
 var import_clsx56 = __toESM(require("clsx"));
 
 // src/components/Reactions/hooks/useFetchReactions.ts
-var import_react218 = require("react");
+var import_react219 = require("react");
 function useFetchReactions(options) {
   const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext("useFetchReactions");
-  const [reactions, setReactions] = (0, import_react218.useState)([]);
+  const [reactions, setReactions] = (0, import_react219.useState)([]);
   const {
     handleFetchReactions: propHandleFetchReactions,
     reactionType,
     shouldFetch,
     sort
   } = options;
-  const [isLoading, setIsLoading] = (0, import_react218.useState)(shouldFetch);
+  const [isLoading, setIsLoading] = (0, import_react219.useState)(shouldFetch);
   const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
-  (0, import_react218.useEffect)(() => {
+  (0, import_react219.useEffect)(() => {
     if (!shouldFetch) {
       return;
     }
@@ -53796,24 +53838,24 @@ function ReactionsListModal({
     shouldFetch: modalProps.open,
     sort: reactionDetailsSort
   });
-  const reactionDetailsWithLegacyFallback = (0, import_react219.useMemo)(
+  const reactionDetailsWithLegacyFallback = (0, import_react220.useMemo)(
     () => legacySortReactionDetails ? [...reactionDetails].sort(legacySortReactionDetails) : reactionDetails,
     [legacySortReactionDetails, reactionDetails]
   );
-  return /* @__PURE__ */ import_react219.default.createElement(
+  return /* @__PURE__ */ import_react220.default.createElement(
     Modal,
     {
       ...modalProps,
       className: (0, import_clsx56.default)("str-chat__message-reactions-details-modal", modalProps.className)
     },
-    /* @__PURE__ */ import_react219.default.createElement(
+    /* @__PURE__ */ import_react220.default.createElement(
       "div",
       {
         className: "str-chat__message-reactions-details",
         "data-testid": "reactions-list-modal"
       },
-      /* @__PURE__ */ import_react219.default.createElement("div", { className: "str-chat__message-reactions-details-reaction-types" }, reactions.map(
-        ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react219.default.createElement(
+      /* @__PURE__ */ import_react220.default.createElement("div", { className: "str-chat__message-reactions-details-reaction-types" }, reactions.map(
+        ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react220.default.createElement(
           "div",
           {
             className: (0, import_clsx56.default)("str-chat__message-reactions-details-reaction-type", {
@@ -53825,25 +53867,25 @@ function ReactionsListModal({
               reactionType
             )
           },
-          /* @__PURE__ */ import_react219.default.createElement("span", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback" }, /* @__PURE__ */ import_react219.default.createElement(EmojiComponent, null)),
+          /* @__PURE__ */ import_react220.default.createElement("span", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback" }, /* @__PURE__ */ import_react220.default.createElement(EmojiComponent, null)),
           "\xA0",
-          /* @__PURE__ */ import_react219.default.createElement("span", { className: "str-chat__message-reaction-count" }, reactionCount)
+          /* @__PURE__ */ import_react220.default.createElement("span", { className: "str-chat__message-reaction-count" }, reactionCount)
         )
       )),
-      SelectedEmojiComponent && /* @__PURE__ */ import_react219.default.createElement("div", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback str-chat__message-reaction-emoji-big" }, /* @__PURE__ */ import_react219.default.createElement(SelectedEmojiComponent, null)),
-      /* @__PURE__ */ import_react219.default.createElement(
+      SelectedEmojiComponent && /* @__PURE__ */ import_react220.default.createElement("div", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback str-chat__message-reaction-emoji-big" }, /* @__PURE__ */ import_react220.default.createElement(SelectedEmojiComponent, null)),
+      /* @__PURE__ */ import_react220.default.createElement(
         "div",
         {
           className: "str-chat__message-reactions-details-reacting-users",
           "data-testid": "all-reacting-users"
         },
-        areReactionsLoading ? /* @__PURE__ */ import_react219.default.createElement(LoadingIndicator, null) : reactionDetailsWithLegacyFallback.map(({ user }) => /* @__PURE__ */ import_react219.default.createElement(
+        areReactionsLoading ? /* @__PURE__ */ import_react220.default.createElement(LoadingIndicator, null) : reactionDetailsWithLegacyFallback.map(({ user }) => /* @__PURE__ */ import_react220.default.createElement(
           "div",
           {
             className: "str-chat__message-reactions-details-reacting-user",
             key: user?.id
           },
-          /* @__PURE__ */ import_react219.default.createElement(
+          /* @__PURE__ */ import_react220.default.createElement(
             Avatar,
             {
               className: "stream-chat__avatar--reaction",
@@ -53852,7 +53894,7 @@ function ReactionsListModal({
               name: user?.name || user?.id
             }
           ),
-          /* @__PURE__ */ import_react219.default.createElement(
+          /* @__PURE__ */ import_react220.default.createElement(
             "span",
             {
               className: "str-chat__user-item--name",
@@ -53867,7 +53909,7 @@ function ReactionsListModal({
 }
 
 // src/components/Reactions/hooks/useProcessReactions.tsx
-var import_react220 = require("react");
+var import_react221 = require("react");
 var defaultReactionsSort = (a2, b) => {
   if (a2.firstReactionAt && b.firstReactionAt) {
     return +a2.firstReactionAt - +b.firstReactionAt;
@@ -53889,19 +53931,19 @@ var useProcessReactions = (params) => {
   const latestReactions = propReactions || message.latest_reactions;
   const ownReactions = propOwnReactions || message?.own_reactions;
   const reactionGroups = propReactionGroups || message?.reaction_groups;
-  const isOwnReaction = (0, import_react220.useCallback)(
+  const isOwnReaction = (0, import_react221.useCallback)(
     (reactionType) => ownReactions?.some((reaction) => reaction.type === reactionType) ?? false,
     [ownReactions]
   );
-  const getEmojiByReactionType = (0, import_react220.useCallback)(
+  const getEmojiByReactionType = (0, import_react221.useCallback)(
     (reactionType) => reactionOptions.find(({ type }) => type === reactionType)?.Component ?? null,
     [reactionOptions]
   );
-  const isSupportedReaction = (0, import_react220.useCallback)(
+  const isSupportedReaction = (0, import_react221.useCallback)(
     (reactionType) => reactionOptions.some((reactionOption) => reactionOption.type === reactionType),
     [reactionOptions]
   );
-  const getLatestReactedUserNames = (0, import_react220.useCallback)(
+  const getLatestReactedUserNames = (0, import_react221.useCallback)(
     (reactionType) => latestReactions?.flatMap((reaction) => {
       if (reactionType && reactionType === reaction.type) {
         const username = reaction.user?.name || reaction.user?.id;
@@ -53911,7 +53953,7 @@ var useProcessReactions = (params) => {
     }) ?? [],
     [latestReactions]
   );
-  const existingReactions = (0, import_react220.useMemo)(() => {
+  const existingReactions = (0, import_react221.useMemo)(() => {
     if (!reactionGroups) {
       return [];
     }
@@ -53945,7 +53987,7 @@ var useProcessReactions = (params) => {
     sortReactions
   ]);
   const hasReactions = existingReactions.length > 0;
-  const totalReactionCount = (0, import_react220.useMemo)(
+  const totalReactionCount = (0, import_react221.useMemo)(
     () => existingReactions.reduce((total, { reactionCount }) => total + reactionCount, 0),
     [existingReactions]
   );
@@ -53967,7 +54009,7 @@ var UnMemoizedReactionsList = (props) => {
     ...rest
   } = props;
   const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
-  const [selectedReactionType, setSelectedReactionType] = (0, import_react221.useState)(null);
+  const [selectedReactionType, setSelectedReactionType] = (0, import_react222.useState)(null);
   const { t: t2 } = useTranslationContext("ReactionsList");
   const { ReactionsListModal: ReactionsListModal2 = ReactionsListModal } = useComponentContext();
   const handleReactionButtonClick = (reactionType) => {
@@ -53977,7 +54019,7 @@ var UnMemoizedReactionsList = (props) => {
     setSelectedReactionType(reactionType);
   };
   if (!hasReactions) return null;
-  return /* @__PURE__ */ import_react221.default.createElement(import_react221.default.Fragment, null, /* @__PURE__ */ import_react221.default.createElement(
+  return /* @__PURE__ */ import_react222.default.createElement(import_react222.default.Fragment, null, /* @__PURE__ */ import_react222.default.createElement(
     "div",
     {
       "aria-label": t2("aria/Reaction list"),
@@ -53988,8 +54030,8 @@ var UnMemoizedReactionsList = (props) => {
       "data-testid": "reaction-list",
       role: "figure"
     },
-    /* @__PURE__ */ import_react221.default.createElement("ul", { className: "str-chat__message-reactions" }, existingReactions.map(
-      ({ EmojiComponent, isOwnReaction, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react221.default.createElement(
+    /* @__PURE__ */ import_react222.default.createElement("ul", { className: "str-chat__message-reactions" }, existingReactions.map(
+      ({ EmojiComponent, isOwnReaction, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react222.default.createElement(
         "li",
         {
           className: (0, import_clsx57.default)("str-chat__message-reaction", {
@@ -53997,7 +54039,7 @@ var UnMemoizedReactionsList = (props) => {
           }),
           key: reactionType
         },
-        /* @__PURE__ */ import_react221.default.createElement(
+        /* @__PURE__ */ import_react222.default.createElement(
           "button",
           {
             "aria-label": `Reactions: ${reactionType}`,
@@ -54005,9 +54047,9 @@ var UnMemoizedReactionsList = (props) => {
             onClick: () => handleReactionButtonClick(reactionType),
             type: "button"
           },
-          /* @__PURE__ */ import_react221.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react221.default.createElement(EmojiComponent, null)),
+          /* @__PURE__ */ import_react222.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react222.default.createElement(EmojiComponent, null)),
           "\xA0",
-          /* @__PURE__ */ import_react221.default.createElement(
+          /* @__PURE__ */ import_react222.default.createElement(
             "span",
             {
               className: "str-chat__message-reaction-count",
@@ -54017,8 +54059,8 @@ var UnMemoizedReactionsList = (props) => {
           )
         )
       )
-    ), /* @__PURE__ */ import_react221.default.createElement("li", null, /* @__PURE__ */ import_react221.default.createElement("span", { className: "str-chat__reaction-list--counter" }, totalReactionCount)))
-  ), selectedReactionType !== null && /* @__PURE__ */ import_react221.default.createElement(
+    ), /* @__PURE__ */ import_react222.default.createElement("li", null, /* @__PURE__ */ import_react222.default.createElement("span", { className: "str-chat__reaction-list--counter" }, totalReactionCount)))
+  ), selectedReactionType !== null && /* @__PURE__ */ import_react222.default.createElement(
     ReactionsListModal2,
     {
       handleFetchReactions,
@@ -54031,12 +54073,12 @@ var UnMemoizedReactionsList = (props) => {
     }
   ));
 };
-var ReactionsList = import_react221.default.memo(
+var ReactionsList = import_react222.default.memo(
   UnMemoizedReactionsList
 );
 
 // src/components/Reactions/SimpleReactionsList.tsx
-var import_react222 = __toESM(require("react"));
+var import_react223 = __toESM(require("react"));
 var import_clsx58 = __toESM(require("clsx"));
 var WithTooltip = ({
   children,
@@ -54044,12 +54086,12 @@ var WithTooltip = ({
   onMouseLeave,
   title
 }) => {
-  const [referenceElement, setReferenceElement] = (0, import_react222.useState)(null);
+  const [referenceElement, setReferenceElement] = (0, import_react223.useState)(null);
   const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers({
     onMouseEnter,
     onMouseLeave
   });
-  return /* @__PURE__ */ import_react222.default.createElement(import_react222.default.Fragment, null, /* @__PURE__ */ import_react222.default.createElement(PopperTooltip, { referenceElement, visible: tooltipVisible }, title), /* @__PURE__ */ import_react222.default.createElement(
+  return /* @__PURE__ */ import_react223.default.createElement(import_react223.default.Fragment, null, /* @__PURE__ */ import_react223.default.createElement(PopperTooltip, { referenceElement, visible: tooltipVisible }, title), /* @__PURE__ */ import_react223.default.createElement(
     "span",
     {
       onMouseEnter: handleEnter,
@@ -54065,7 +54107,7 @@ var UnMemoizedSimpleReactionsList = (props) => {
   const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
   const handleReaction = propHandleReaction || contextHandleReaction;
   if (!hasReactions) return null;
-  return /* @__PURE__ */ import_react222.default.createElement("div", { className: "str-chat__message-reactions-container" }, /* @__PURE__ */ import_react222.default.createElement(
+  return /* @__PURE__ */ import_react223.default.createElement("div", { className: "str-chat__message-reactions-container" }, /* @__PURE__ */ import_react223.default.createElement(
     "ul",
     {
       className: "str-chat__simple-reactions-list str-chat__message-reactions",
@@ -54074,7 +54116,7 @@ var UnMemoizedSimpleReactionsList = (props) => {
     existingReactions.map(
       ({ EmojiComponent, isOwnReaction, latestReactedUserNames, reactionType }) => {
         const tooltipContent = latestReactedUserNames.join(", ");
-        return EmojiComponent && /* @__PURE__ */ import_react222.default.createElement(
+        return EmojiComponent && /* @__PURE__ */ import_react223.default.createElement(
           "li",
           {
             className: (0, import_clsx58.default)("str-chat__simple-reactions-list-item", {
@@ -54084,19 +54126,19 @@ var UnMemoizedSimpleReactionsList = (props) => {
             onClick: (event) => handleReaction(reactionType, event),
             onKeyUp: (event) => handleReaction(reactionType, event)
           },
-          /* @__PURE__ */ import_react222.default.createElement(WithTooltip, { title: tooltipContent }, /* @__PURE__ */ import_react222.default.createElement(EmojiComponent, null))
+          /* @__PURE__ */ import_react223.default.createElement(WithTooltip, { title: tooltipContent }, /* @__PURE__ */ import_react223.default.createElement(EmojiComponent, null))
         );
       }
     ),
-    /* @__PURE__ */ import_react222.default.createElement("li", { className: "str-chat__simple-reactions-list-item--last-number" }, totalReactionCount)
+    /* @__PURE__ */ import_react223.default.createElement("li", { className: "str-chat__simple-reactions-list-item--last-number" }, totalReactionCount)
   ));
 };
-var SimpleReactionsList = import_react222.default.memo(
+var SimpleReactionsList = import_react223.default.memo(
   UnMemoizedSimpleReactionsList
 );
 
 // src/components/Message/MessageEditedTimestamp.tsx
-var import_react223 = __toESM(require("react"));
+var import_react224 = __toESM(require("react"));
 var import_clsx59 = __toESM(require("clsx"));
 function MessageEditedTimestamp({
   message: propMessage,
@@ -54112,7 +54154,7 @@ function MessageEditedTimestamp({
   if (!isMessageEdited(message)) {
     return null;
   }
-  return /* @__PURE__ */ import_react223.default.createElement(
+  return /* @__PURE__ */ import_react224.default.createElement(
     "div",
     {
       className: (0, import_clsx59.default)(
@@ -54123,7 +54165,7 @@ function MessageEditedTimestamp({
     },
     t2("Edited"),
     " ",
-    /* @__PURE__ */ import_react223.default.createElement(Timestamp2, { timestamp: message.message_text_updated_at, ...timestampProps })
+    /* @__PURE__ */ import_react224.default.createElement(Timestamp2, { timestamp: message.message_text_updated_at, ...timestampProps })
   );
 }
 
@@ -54150,8 +54192,8 @@ var MessageSimpleWithContext = (props) => {
   } = props;
   const { client } = useChatContext("MessageSimple");
   const { t: t2 } = useTranslationContext("MessageSimple");
-  const [isBounceDialogOpen, setIsBounceDialogOpen] = (0, import_react224.useState)(false);
-  const [isEditedTimestampOpen, setEditedTimestampOpen] = (0, import_react224.useState)(false);
+  const [isBounceDialogOpen, setIsBounceDialogOpen] = (0, import_react225.useState)(false);
+  const [isEditedTimestampOpen, setEditedTimestampOpen] = (0, import_react225.useState)(false);
   const {
     Attachment: Attachment2 = Attachment,
     Avatar: Avatar2 = Avatar,
@@ -54172,7 +54214,7 @@ var MessageSimpleWithContext = (props) => {
   } = useComponentContext("MessageSimple");
   const hasAttachment = messageHasAttachments(message);
   const hasReactions = messageHasReactions(message);
-  const isAIGenerated = (0, import_react224.useMemo)(
+  const isAIGenerated = (0, import_react225.useMemo)(
     () => isMessageAIGenerated?.(message),
     [isMessageAIGenerated, message]
   );
@@ -54180,10 +54222,10 @@ var MessageSimpleWithContext = (props) => {
     return null;
   }
   if (message.deleted_at || message.type === "deleted") {
-    return /* @__PURE__ */ import_react224.default.createElement(MessageDeleted2, { message });
+    return /* @__PURE__ */ import_react225.default.createElement(MessageDeleted2, { message });
   }
   if (isMessageBlocked(message)) {
-    return /* @__PURE__ */ import_react224.default.createElement(MessageBlocked2, null);
+    return /* @__PURE__ */ import_react225.default.createElement(MessageBlocked2, null);
   }
   const showMetadata = !groupedByUser || endOfGroup;
   const showReplyCountButton = !threadList && !!message.reply_count;
@@ -54217,14 +54259,14 @@ var MessageSimpleWithContext = (props) => {
     }
   );
   const poll = message.poll_id && client.polls.fromState(message.poll_id);
-  return /* @__PURE__ */ import_react224.default.createElement(import_react224.default.Fragment, null, editing && /* @__PURE__ */ import_react224.default.createElement(
+  return /* @__PURE__ */ import_react225.default.createElement(import_react225.default.Fragment, null, editing && /* @__PURE__ */ import_react225.default.createElement(
     Modal,
     {
       className: "str-chat__edit-message-modal",
       onClose: clearEditingState,
       open: editing
     },
-    /* @__PURE__ */ import_react224.default.createElement(
+    /* @__PURE__ */ import_react225.default.createElement(
       MessageInput,
       {
         clearEditingState,
@@ -54235,14 +54277,14 @@ var MessageSimpleWithContext = (props) => {
         ...additionalMessageInputProps
       }
     )
-  ), isBounceDialogOpen && /* @__PURE__ */ import_react224.default.createElement(
+  ), isBounceDialogOpen && /* @__PURE__ */ import_react225.default.createElement(
     MessageBounceModal,
     {
       MessageBouncePrompt: MessageBouncePrompt2,
       onClose: () => setIsBounceDialogOpen(false),
       open: isBounceDialogOpen
     }
-  ), /* @__PURE__ */ import_react224.default.createElement("div", { className: rootClassName2, key: message.id }, PinIndicator2 && /* @__PURE__ */ import_react224.default.createElement(PinIndicator2, null), message.user && /* @__PURE__ */ import_react224.default.createElement(
+  ), /* @__PURE__ */ import_react225.default.createElement("div", { className: rootClassName2, key: message.id }, PinIndicator2 && /* @__PURE__ */ import_react225.default.createElement(PinIndicator2, null), message.user && /* @__PURE__ */ import_react225.default.createElement(
     Avatar2,
     {
       image: message.user.image,
@@ -54251,7 +54293,7 @@ var MessageSimpleWithContext = (props) => {
       onMouseOver: onUserHover,
       user: message.user
     }
-  ), /* @__PURE__ */ import_react224.default.createElement(
+  ), /* @__PURE__ */ import_react225.default.createElement(
     "div",
     {
       className: (0, import_clsx60.default)("str-chat__message-inner", {
@@ -54261,37 +54303,37 @@ var MessageSimpleWithContext = (props) => {
       onClick: handleClick,
       onKeyUp: handleClick
     },
-    /* @__PURE__ */ import_react224.default.createElement(MessageActions2, null),
-    /* @__PURE__ */ import_react224.default.createElement("div", { className: "str-chat__message-reactions-host" }, hasReactions && /* @__PURE__ */ import_react224.default.createElement(ReactionsList2, { reverse: true })),
-    /* @__PURE__ */ import_react224.default.createElement("div", { className: "str-chat__message-bubble" }, poll && /* @__PURE__ */ import_react224.default.createElement(Poll, { poll }), message.attachments?.length && !message.quoted_message ? /* @__PURE__ */ import_react224.default.createElement(
+    /* @__PURE__ */ import_react225.default.createElement(MessageActions2, null),
+    /* @__PURE__ */ import_react225.default.createElement("div", { className: "str-chat__message-reactions-host" }, hasReactions && /* @__PURE__ */ import_react225.default.createElement(ReactionsList2, { reverse: true })),
+    /* @__PURE__ */ import_react225.default.createElement("div", { className: "str-chat__message-bubble" }, poll && /* @__PURE__ */ import_react225.default.createElement(Poll, { poll }), message.attachments?.length && !message.quoted_message ? /* @__PURE__ */ import_react225.default.createElement(
       Attachment2,
       {
         actionHandler: handleAction,
         attachments: message.attachments
       }
-    ) : null, isAIGenerated ? /* @__PURE__ */ import_react224.default.createElement(StreamedMessageText2, { message, renderText: renderText2 }) : /* @__PURE__ */ import_react224.default.createElement(MessageText, { message, renderText: renderText2 }), message.mml && /* @__PURE__ */ import_react224.default.createElement(
+    ) : null, isAIGenerated ? /* @__PURE__ */ import_react225.default.createElement(StreamedMessageText2, { message, renderText: renderText2 }) : /* @__PURE__ */ import_react225.default.createElement(MessageText, { message, renderText: renderText2 }), message.mml && /* @__PURE__ */ import_react225.default.createElement(
       MML,
       {
         actionHandler: handleAction,
         align: isMyMessage() ? "right" : "left",
         source: message.mml
       }
-    ), /* @__PURE__ */ import_react224.default.createElement(MessageErrorIcon, null))
-  ), showReplyCountButton && /* @__PURE__ */ import_react224.default.createElement(
+    ), /* @__PURE__ */ import_react225.default.createElement(MessageErrorIcon, null))
+  ), showReplyCountButton && /* @__PURE__ */ import_react225.default.createElement(
     MessageRepliesCountButton2,
     {
       onClick: handleOpenThread,
       reply_count: message.reply_count
     }
-  ), showMetadata && /* @__PURE__ */ import_react224.default.createElement("div", { className: "str-chat__message-metadata" }, /* @__PURE__ */ import_react224.default.createElement(MessageStatus2, null), !isMyMessage() && !!message.user && /* @__PURE__ */ import_react224.default.createElement("span", { className: "str-chat__message-simple-name" }, message.user.name || message.user.id), /* @__PURE__ */ import_react224.default.createElement(MessageTimestamp2, { customClass: "str-chat__message-simple-timestamp" }), isEdited && /* @__PURE__ */ import_react224.default.createElement("span", { className: "str-chat__mesage-simple-edited" }, t2("Edited")), isEdited && /* @__PURE__ */ import_react224.default.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))));
+  ), showMetadata && /* @__PURE__ */ import_react225.default.createElement("div", { className: "str-chat__message-metadata" }, /* @__PURE__ */ import_react225.default.createElement(MessageStatus2, null), !isMyMessage() && !!message.user && /* @__PURE__ */ import_react225.default.createElement("span", { className: "str-chat__message-simple-name" }, message.user.name || message.user.id), /* @__PURE__ */ import_react225.default.createElement(MessageTimestamp2, { customClass: "str-chat__message-simple-timestamp" }), isEdited && /* @__PURE__ */ import_react225.default.createElement("span", { className: "str-chat__mesage-simple-edited" }, t2("Edited")), isEdited && /* @__PURE__ */ import_react225.default.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))));
 };
-var MemoizedMessageSimple = import_react224.default.memo(
+var MemoizedMessageSimple = import_react225.default.memo(
   MessageSimpleWithContext,
   areMessageUIPropsEqual
 );
 var MessageSimple = (props) => {
   const messageContext = useMessageContext("MessageSimple");
-  return /* @__PURE__ */ import_react224.default.createElement(MemoizedMessageSimple, { ...messageContext, ...props });
+  return /* @__PURE__ */ import_react225.default.createElement(MemoizedMessageSimple, { ...messageContext, ...props });
 };
 
 // src/components/Message/Message.tsx
@@ -54327,11 +54369,11 @@ var MessageWithContext = (props) => {
     canReply,
     isMyMessage
   } = userRoles;
-  const messageIsUnread = (0, import_react225.useMemo)(
+  const messageIsUnread = (0, import_react226.useMemo)(
     () => !!(!isMyMessage && client.user?.id && read && (!read[client.user.id] || message?.created_at && new Date(message.created_at).getTime() > read[client.user.id].last_read.getTime())),
     [client, isMyMessage, message.created_at, read]
   );
-  const messageActionsHandler = (0, import_react225.useCallback)(
+  const messageActionsHandler = (0, import_react226.useCallback)(
     () => getMessageActions(messageActions, {
       canDelete,
       canEdit,
@@ -54385,9 +54427,9 @@ var MessageWithContext = (props) => {
     onUserHover,
     setEditingState: setEdit
   };
-  return /* @__PURE__ */ import_react225.default.createElement(MessageProvider, { value: messageContextValue }, /* @__PURE__ */ import_react225.default.createElement(MessageUIComponent, { groupedByUser }));
+  return /* @__PURE__ */ import_react226.default.createElement(MessageProvider, { value: messageContextValue }, /* @__PURE__ */ import_react226.default.createElement(MessageUIComponent, { groupedByUser }));
 };
-var MemoizedMessage = import_react225.default.memo(
+var MemoizedMessage = import_react226.default.memo(
   MessageWithContext,
   areMessagePropsEqual
 );
@@ -54454,7 +54496,7 @@ var Message = (props) => {
     notify: addNotification
   });
   const highlighted = highlightedMessageId === message.id;
-  return /* @__PURE__ */ import_react225.default.createElement(
+  return /* @__PURE__ */ import_react226.default.createElement(
     MemoizedMessage,
     {
       additionalMessageInputProps: props.additionalMessageInputProps,
@@ -54506,15 +54548,15 @@ var Message = (props) => {
 // src/components/MessageList/GiphyPreviewMessage.tsx
 var GiphyPreviewMessage = (props) => {
   const { message } = props;
-  return /* @__PURE__ */ import_react226.default.createElement("div", { className: "giphy-preview-message" }, /* @__PURE__ */ import_react226.default.createElement(Message, { message }));
+  return /* @__PURE__ */ import_react227.default.createElement("div", { className: "giphy-preview-message" }, /* @__PURE__ */ import_react227.default.createElement(Message, { message }));
 };
 
 // src/components/MessageList/MessageList.tsx
 var import_clsx62 = __toESM(require("clsx"));
-var import_react245 = __toESM(require("react"));
+var import_react246 = __toESM(require("react"));
 
 // src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
-var import_react227 = require("react");
+var import_react228 = require("react");
 
 // src/components/MessageList/utils.ts
 var import_nanoid9 = require("nanoid");
@@ -54721,7 +54763,7 @@ var useEnrichedMessages = (args) => {
   } = args;
   const { client } = useChatContext("useEnrichedMessages");
   const { HeaderComponent } = useComponentContext("useEnrichedMessages");
-  const lastRead = (0, import_react227.useMemo)(() => channel.lastRead?.(), [channel]);
+  const lastRead = (0, import_react228.useMemo)(() => channel.lastRead?.(), [channel]);
   const enableDateSeparator = !disableDateSeparator;
   let messagesWithDates = !enableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator ? messages : processMessages({
     enableDateSeparator,
@@ -54736,7 +54778,7 @@ var useEnrichedMessages = (args) => {
     messagesWithDates = insertIntro(messagesWithDates, headerPosition);
   }
   const groupStylesFn = groupStyles || getGroupStyles;
-  const messageGroupStyles = (0, import_react227.useMemo)(
+  const messageGroupStyles = (0, import_react228.useMemo)(
     () => messagesWithDates.reduce((acc, message, i) => {
       const style = groupStylesFn(
         message,
@@ -54755,13 +54797,13 @@ var useEnrichedMessages = (args) => {
 };
 
 // src/components/MessageList/hooks/MessageList/useMessageListElements.tsx
-var import_react229 = require("react");
+var import_react230 = require("react");
 
 // src/components/MessageList/hooks/useLastReadData.ts
-var import_react228 = require("react");
+var import_react229 = require("react");
 var useLastReadData = (props) => {
   const { messages, read, returnAllReadData, userID } = props;
-  return (0, import_react228.useMemo)(
+  return (0, import_react229.useMemo)(
     () => getReadStates(
       messages.filter(({ user }) => user?.id === userID),
       read,
@@ -54793,11 +54835,11 @@ var useMessageListElements = (props) => {
     returnAllReadData,
     userID: client.userID
   });
-  const lastReceivedMessageId = (0, import_react229.useMemo)(
+  const lastReceivedMessageId = (0, import_react230.useMemo)(
     () => getLastReceived(enrichedMessages),
     [enrichedMessages]
   );
-  const elements = (0, import_react229.useMemo)(
+  const elements = (0, import_react230.useMemo)(
     () => renderMessages({
       channelUnreadUiState,
       components,
@@ -54824,7 +54866,7 @@ var useMessageListElements = (props) => {
 };
 
 // src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts
-var import_react230 = require("react");
+var import_react231 = require("react");
 function useMessageListScrollManager(params) {
   const {
     loadMoreScrollThreshold,
@@ -54835,13 +54877,13 @@ function useMessageListScrollManager(params) {
     showNewMessages
   } = params;
   const { client } = useChatContext("useMessageListScrollManager");
-  const measures = (0, import_react230.useRef)({
+  const measures = (0, import_react231.useRef)({
     offsetHeight: 0,
     scrollHeight: 0
   });
-  const messages = (0, import_react230.useRef)(void 0);
-  const scrollTop = (0, import_react230.useRef)(0);
-  (0, import_react230.useLayoutEffect)(() => {
+  const messages = (0, import_react231.useRef)(void 0);
+  const scrollTop = (0, import_react231.useRef)(0);
+  (0, import_react231.useLayoutEffect)(() => {
     const prevMeasures = measures.current;
     const prevMessages = messages.current;
     const newMessages = params.messages;
@@ -54881,7 +54923,7 @@ function useMessageListScrollManager(params) {
 }
 
 // src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx
-var import_react231 = require("react");
+var import_react232 = require("react");
 var useScrollLocationLogic = (params) => {
   const {
     hasMoreNewer,
@@ -54891,12 +54933,12 @@ var useScrollLocationLogic = (params) => {
     scrolledUpThreshold = 200,
     suppressAutoscroll
   } = params;
-  const [hasNewMessages, setHasNewMessages] = (0, import_react231.useState)(false);
-  const [wrapperRect, setWrapperRect] = (0, import_react231.useState)();
-  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0, import_react231.useState)(true);
-  const closeToBottom = (0, import_react231.useRef)(false);
-  const closeToTop = (0, import_react231.useRef)(false);
-  const scrollToBottom = (0, import_react231.useCallback)(() => {
+  const [hasNewMessages, setHasNewMessages] = (0, import_react232.useState)(false);
+  const [wrapperRect, setWrapperRect] = (0, import_react232.useState)();
+  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0, import_react232.useState)(true);
+  const closeToBottom = (0, import_react232.useRef)(false);
+  const closeToTop = (0, import_react232.useRef)(false);
+  const scrollToBottom = (0, import_react232.useCallback)(() => {
     if (!listElement?.scrollTo || hasMoreNewer || suppressAutoscroll) {
       return;
     }
@@ -54905,7 +54947,7 @@ var useScrollLocationLogic = (params) => {
     });
     setHasNewMessages(false);
   }, [listElement, hasMoreNewer, suppressAutoscroll]);
-  (0, import_react231.useLayoutEffect)(() => {
+  (0, import_react232.useLayoutEffect)(() => {
     if (listElement) {
       setWrapperRect(listElement.getBoundingClientRect());
       scrollToBottom();
@@ -54925,7 +54967,7 @@ var useScrollLocationLogic = (params) => {
     scrollToBottom,
     showNewMessages: () => setHasNewMessages(true)
   });
-  const onScroll = (0, import_react231.useCallback)(
+  const onScroll = (0, import_react232.useCallback)(
     (event) => {
       const element3 = event.target;
       const scrollTop = element3.scrollTop;
@@ -54956,22 +54998,22 @@ var useScrollLocationLogic = (params) => {
 };
 
 // src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts
-var import_react234 = require("react");
+var import_react235 = require("react");
 
 // src/components/MessageList/MessageListMainPanel.tsx
-var import_react232 = __toESM(require("react"));
+var import_react233 = __toESM(require("react"));
 var MESSAGE_LIST_MAIN_PANEL_CLASS = "str-chat__main-panel-inner str-chat__message-list-main-panel";
-var MessageListMainPanel = ({ children }) => /* @__PURE__ */ import_react232.default.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children);
+var MessageListMainPanel = ({ children }) => /* @__PURE__ */ import_react233.default.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children);
 
 // src/components/MessageList/UnreadMessagesSeparator.tsx
-var import_react233 = __toESM(require("react"));
+var import_react234 = __toESM(require("react"));
 var UNREAD_MESSAGE_SEPARATOR_CLASS = "str-chat__unread-messages-separator";
 var UnreadMessagesSeparator = ({
   showCount,
   unreadCount
 }) => {
   const { t: t2 } = useTranslationContext("UnreadMessagesSeparator");
-  return /* @__PURE__ */ import_react233.default.createElement(
+  return /* @__PURE__ */ import_react234.default.createElement(
     "div",
     {
       className: UNREAD_MESSAGE_SEPARATOR_CLASS,
@@ -54997,10 +55039,10 @@ var useUnreadMessagesNotification = ({
   unreadCount
 }) => {
   const { messages } = useChannelStateContext("UnreadMessagesNotification");
-  const [show, setShow] = (0, import_react234.useState)(false);
-  const isScrolledAboveTargetTop = (0, import_react234.useRef)(false);
+  const [show, setShow] = (0, import_react235.useState)(false);
+  const isScrolledAboveTargetTop = (0, import_react235.useRef)(false);
   const intersectionObserverIsSupported = typeof IntersectionObserver !== "undefined";
-  (0, import_react234.useEffect)(() => {
+  (0, import_react235.useEffect)(() => {
     if (!(unreadCount && intersectionObserverIsSupported)) {
       setShow(false);
       return;
@@ -55047,7 +55089,7 @@ var useUnreadMessagesNotification = ({
     showAlways,
     unreadCount
   ]);
-  (0, import_react234.useEffect)(() => {
+  (0, import_react235.useEffect)(() => {
     if (unreadCount && isMessageListScrolledToBottom && isScrolledAboveTargetTop.current) {
       setShow(true);
       isScrolledAboveTargetTop.current = false;
@@ -55057,7 +55099,7 @@ var useUnreadMessagesNotification = ({
 };
 
 // src/components/MessageList/hooks/useMarkRead.ts
-var import_react235 = require("react");
+var import_react236 = require("react");
 var hasReadLastMessage = (channel, userId) => {
   const latestMessageIdInChannel = channel.state.latestMessages.slice(-1)[0]?.id;
   const lastReadMessageIdServer = channel.state.read[userId]?.last_read_message_id;
@@ -55071,7 +55113,7 @@ var useMarkRead = ({
   const { client } = useChatContext("useMarkRead");
   const { markRead, setChannelUnreadUiState } = useChannelActionContext("useMarkRead");
   const { channel } = useChannelStateContext("useMarkRead");
-  (0, import_react235.useEffect)(() => {
+  (0, import_react236.useEffect)(() => {
     const shouldMarkRead = () => !document.hidden && !wasMarkedUnread && !messageListIsThread && isMessageListScrolledToBottom && client.user?.id && !hasReadLastMessage(channel, client.user.id);
     const onVisibilityChange = () => {
       if (shouldMarkRead()) markRead();
@@ -55130,11 +55172,11 @@ function getPreviousLastMessage(messages, newMessage) {
 }
 
 // src/components/MessageList/MessageNotification.tsx
-var import_react236 = __toESM(require("react"));
+var import_react237 = __toESM(require("react"));
 var UnMemoizedMessageNotification = (props) => {
   const { children, onClick, showNotification = true } = props;
   if (!showNotification) return null;
-  return /* @__PURE__ */ import_react236.default.createElement(
+  return /* @__PURE__ */ import_react237.default.createElement(
     "button",
     {
       "aria-live": "polite",
@@ -55145,12 +55187,12 @@ var UnMemoizedMessageNotification = (props) => {
     children
   );
 };
-var MessageNotification = import_react236.default.memo(
+var MessageNotification = import_react237.default.memo(
   UnMemoizedMessageNotification
 );
 
 // src/components/MessageList/MessageListNotifications.tsx
-var import_react237 = __toESM(require("react"));
+var import_react238 = __toESM(require("react"));
 var MessageListNotifications = (props) => {
   const {
     hasNewMessages,
@@ -55163,7 +55205,7 @@ var MessageListNotifications = (props) => {
     unreadCount
   } = props;
   const { t: t2 } = useTranslationContext("MessageListNotifications");
-  return /* @__PURE__ */ import_react237.default.createElement("div", { className: "str-chat__list-notifications" }, notifications.map((notification) => /* @__PURE__ */ import_react237.default.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text)), /* @__PURE__ */ import_react237.default.createElement(ConnectionStatus, null), /* @__PURE__ */ import_react237.default.createElement(
+  return /* @__PURE__ */ import_react238.default.createElement("div", { className: "str-chat__list-notifications" }, notifications.map((notification) => /* @__PURE__ */ import_react238.default.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text)), /* @__PURE__ */ import_react238.default.createElement(ConnectionStatus, null), /* @__PURE__ */ import_react238.default.createElement(
     MessageNotification2,
     {
       isMessageListScrolledToBottom,
@@ -55177,11 +55219,11 @@ var MessageListNotifications = (props) => {
 };
 
 // src/components/MessageList/UnreadMessagesNotification.tsx
-var import_react239 = __toESM(require("react"));
+var import_react240 = __toESM(require("react"));
 
 // src/components/MessageList/icons.tsx
-var import_react238 = __toESM(require("react"));
-var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react238.default.createElement(
+var import_react239 = __toESM(require("react"));
+var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react239.default.createElement(
   "svg",
   {
     className,
@@ -55192,7 +55234,7 @@ var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react23
     width: "24",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ import_react238.default.createElement(
+  /* @__PURE__ */ import_react239.default.createElement(
     "path",
     {
       d: "M7.41 8.29504L12 12.875L16.59 8.29504L18 9.70504L12 15.705L6 9.70504L7.41 8.29504Z",
@@ -55200,7 +55242,7 @@ var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react23
     }
   )
 );
-var CloseIcon2 = () => /* @__PURE__ */ import_react238.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 14 13", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react238.default.createElement("path", { d: "M1.32227 12.3408C0.944336 11.9629 0.953125 11.3213 1.32227 10.9521L5.60254 6.66309L1.32227 2.38281C0.953125 2.01367 0.944336 1.37207 1.32227 0.994141C1.7002 0.616211 2.3418 0.625 2.71094 0.985352L7 5.27441L11.2803 0.994141C11.6494 0.625 12.291 0.616211 12.6689 0.994141C13.0469 1.37207 13.0381 2.01367 12.6689 2.38281L8.38867 6.66309L12.6689 10.9521C13.0381 11.3213 13.0469 11.9629 12.6689 12.3408C12.291 12.7188 11.6494 12.71 11.2803 12.3408L7 8.06055L2.71094 12.3408C2.3418 12.71 1.7002 12.7188 1.32227 12.3408Z" }));
+var CloseIcon2 = () => /* @__PURE__ */ import_react239.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 14 13", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react239.default.createElement("path", { d: "M1.32227 12.3408C0.944336 11.9629 0.953125 11.3213 1.32227 10.9521L5.60254 6.66309L1.32227 2.38281C0.953125 2.01367 0.944336 1.37207 1.32227 0.994141C1.7002 0.616211 2.3418 0.625 2.71094 0.985352L7 5.27441L11.2803 0.994141C11.6494 0.625 12.291 0.616211 12.6689 0.994141C13.0469 1.37207 13.0381 2.01367 12.6689 2.38281L8.38867 6.66309L12.6689 10.9521C13.0381 11.3213 13.0469 11.9629 12.6689 12.3408C12.291 12.7188 11.6494 12.71 11.2803 12.3408L7 8.06055L2.71094 12.3408C2.3418 12.71 1.7002 12.7188 1.32227 12.3408Z" }));
 
 // src/components/MessageList/UnreadMessagesNotification.tsx
 var UnreadMessagesNotification = ({
@@ -55212,19 +55254,19 @@ var UnreadMessagesNotification = ({
     "UnreadMessagesNotification"
   );
   const { t: t2 } = useTranslationContext("UnreadMessagesNotification");
-  return /* @__PURE__ */ import_react239.default.createElement(
+  return /* @__PURE__ */ import_react240.default.createElement(
     "div",
     {
       className: "str-chat__unread-messages-notification",
       "data-testid": "unread-messages-notification"
     },
-    /* @__PURE__ */ import_react239.default.createElement("button", { onClick: () => jumpToFirstUnreadMessage(queryMessageLimit) }, unreadCount && showCount ? t2("{{count}} unread", { count: unreadCount ?? 0 }) : t2("Unread messages")),
-    /* @__PURE__ */ import_react239.default.createElement("button", { onClick: () => markRead() }, /* @__PURE__ */ import_react239.default.createElement(CloseIcon2, null))
+    /* @__PURE__ */ import_react240.default.createElement("button", { onClick: () => jumpToFirstUnreadMessage(queryMessageLimit) }, unreadCount && showCount ? t2("{{count}} unread", { count: unreadCount ?? 0 }) : t2("Unread messages")),
+    /* @__PURE__ */ import_react240.default.createElement("button", { onClick: () => markRead() }, /* @__PURE__ */ import_react240.default.createElement(CloseIcon2, null))
   );
 };
 
 // src/components/InfiniteScrollPaginator/InfiniteScroll.tsx
-var import_react240 = __toESM(require("react"));
+var import_react241 = __toESM(require("react"));
 var mousewheelListener2 = (event) => {
   if (event instanceof WheelEvent && event.deltaY === 1) {
     event.preventDefault();
@@ -55255,10 +55297,10 @@ var InfiniteScroll = (props) => {
   const loadPreviousPageFn = loadPreviousPage || loadMore;
   const hasNextPageFlag = hasNextPage || hasMoreNewer;
   const hasPreviousPageFlag = hasPreviousPage || hasMore;
-  const scrollComponent = (0, import_react240.useRef)(void 0);
-  const previousOffset = (0, import_react240.useRef)(void 0);
-  const previousReverseOffset = (0, import_react240.useRef)(void 0);
-  const scrollListenerRef = (0, import_react240.useRef)(void 0);
+  const scrollComponent = (0, import_react241.useRef)(void 0);
+  const previousOffset = (0, import_react241.useRef)(void 0);
+  const previousReverseOffset = (0, import_react241.useRef)(void 0);
+  const scrollListenerRef = (0, import_react241.useRef)(void 0);
   scrollListenerRef.current = () => {
     const element4 = scrollComponent.current;
     if (!element4 || element4.offsetParent === null) {
@@ -55282,7 +55324,7 @@ var InfiniteScroll = (props) => {
       loadNextPageFn();
     }
   };
-  (0, import_react240.useEffect)(() => {
+  (0, import_react241.useEffect)(() => {
     deprecationAndReplacementWarning(
       [
         [{ hasMoreNewer }, { hasNextPage }],
@@ -55293,7 +55335,7 @@ var InfiniteScroll = (props) => {
       "InfiniteScroll"
     );
   }, []);
-  (0, import_react240.useEffect)(() => {
+  (0, import_react241.useEffect)(() => {
     const scrollElement = scrollComponent.current?.parentNode;
     if (!scrollElement) return;
     const scrollListener = () => scrollListenerRef.current?.();
@@ -55305,7 +55347,7 @@ var InfiniteScroll = (props) => {
       scrollElement.removeEventListener("resize", scrollListener, useCapture);
     };
   }, [initialLoad, useCapture]);
-  (0, import_react240.useEffect)(() => {
+  (0, import_react241.useEffect)(() => {
     const scrollElement = scrollComponent.current?.parentNode;
     if (scrollElement) {
       scrollElement.addEventListener("wheel", mousewheelListener2, { passive: false });
@@ -55326,11 +55368,11 @@ var InfiniteScroll = (props) => {
   if (head) {
     childrenArray.unshift(head);
   }
-  return import_react240.default.createElement(element3, attributes, childrenArray);
+  return import_react241.default.createElement(element3, attributes, childrenArray);
 };
 
 // src/components/TypingIndicator/TypingIndicator.tsx
-var import_react241 = __toESM(require("react"));
+var import_react242 = __toESM(require("react"));
 var import_clsx61 = __toESM(require("clsx"));
 var useJoinTypingUsers = (names) => {
   const { t: t2 } = useTranslationContext();
@@ -55368,7 +55410,7 @@ var UnMemoizedTypingIndicator = (props) => {
     return null;
   }
   if (!isTypingActive) return null;
-  return /* @__PURE__ */ import_react241.default.createElement(
+  return /* @__PURE__ */ import_react242.default.createElement(
     "div",
     {
       className: (0, import_clsx61.default)("str-chat__typing-indicator", {
@@ -55376,19 +55418,19 @@ var UnMemoizedTypingIndicator = (props) => {
       }),
       "data-testid": "typing-indicator"
     },
-    /* @__PURE__ */ import_react241.default.createElement("div", { className: "str-chat__typing-indicator__dots" }, /* @__PURE__ */ import_react241.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react241.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react241.default.createElement("span", { className: "str-chat__typing-indicator__dot" })),
-    /* @__PURE__ */ import_react241.default.createElement("div", { className: "str-chat__typing-indicator__users", "data-testid": "typing-users" }, joinedTypingUsers)
+    /* @__PURE__ */ import_react242.default.createElement("div", { className: "str-chat__typing-indicator__dots" }, /* @__PURE__ */ import_react242.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react242.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react242.default.createElement("span", { className: "str-chat__typing-indicator__dot" })),
+    /* @__PURE__ */ import_react242.default.createElement("div", { className: "str-chat__typing-indicator__users", "data-testid": "typing-users" }, joinedTypingUsers)
   );
 };
-var TypingIndicator = import_react241.default.memo(
+var TypingIndicator = import_react242.default.memo(
   UnMemoizedTypingIndicator
 );
 
 // src/components/MessageList/renderMessages.tsx
-var import_react244 = __toESM(require("react"));
+var import_react245 = __toESM(require("react"));
 
 // src/components/DateSeparator/DateSeparator.tsx
-var import_react242 = __toESM(require("react"));
+var import_react243 = __toESM(require("react"));
 var UnMemoizedDateSeparator = (props) => {
   const {
     calendar: calendar3,
@@ -55408,21 +55450,21 @@ var UnMemoizedDateSeparator = (props) => {
     tDateTimeParser,
     timestampTranslationKey: "timestamp/DateSeparator"
   });
-  return /* @__PURE__ */ import_react242.default.createElement("div", { className: "str-chat__date-separator", "data-testid": "date-separator" }, (position4 === "right" || position4 === "center") && /* @__PURE__ */ import_react242.default.createElement("hr", { className: "str-chat__date-separator-line" }), /* @__PURE__ */ import_react242.default.createElement("div", { className: "str-chat__date-separator-date" }, unread ? `${t2("New")} - ${formattedDate}` : formattedDate), (position4 === "left" || position4 === "center") && /* @__PURE__ */ import_react242.default.createElement("hr", { className: "str-chat__date-separator-line" }));
+  return /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__date-separator", "data-testid": "date-separator" }, (position4 === "right" || position4 === "center") && /* @__PURE__ */ import_react243.default.createElement("hr", { className: "str-chat__date-separator-line" }), /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__date-separator-date" }, unread ? `${t2("New")} - ${formattedDate}` : formattedDate), (position4 === "left" || position4 === "center") && /* @__PURE__ */ import_react243.default.createElement("hr", { className: "str-chat__date-separator-line" }));
 };
-var DateSeparator = import_react242.default.memo(
+var DateSeparator = import_react243.default.memo(
   UnMemoizedDateSeparator
 );
 
 // src/components/EventComponent/EventComponent.tsx
-var import_react243 = __toESM(require("react"));
+var import_react244 = __toESM(require("react"));
 var UnMemoizedEventComponent = (props) => {
   const { Avatar: Avatar2 = Avatar, calendar: calendar3, calendarFormats, format, message } = props;
   const { t: t2, tDateTimeParser } = useTranslationContext("EventComponent");
   const { created_at = "", event, text: text7, type } = message;
   const getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser };
   if (type === "system")
-    return /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__message--system", "data-testid": "message-system" }, /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__message--system__text" }, /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__message--system__line" }), /* @__PURE__ */ import_react243.default.createElement("p", null, text7), /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__message--system__line" })), /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__message--system__date" }, /* @__PURE__ */ import_react243.default.createElement("strong", null, getDateString({
+    return /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message--system", "data-testid": "message-system" }, /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message--system__text" }, /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message--system__line" }), /* @__PURE__ */ import_react244.default.createElement("p", null, text7), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message--system__line" })), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message--system__date" }, /* @__PURE__ */ import_react244.default.createElement("strong", null, getDateString({
       ...getDateOptions,
       calendar: calendar3,
       calendarFormats,
@@ -55433,11 +55475,11 @@ var UnMemoizedEventComponent = (props) => {
   if (event?.type === "member.removed" || event?.type === "member.added") {
     const name2 = event.user?.name || event.user?.id;
     const sentence = `${name2} ${event.type === "member.added" ? "has joined the chat" : "was removed from the chat"}`;
-    return /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__event-component__channel-event" }, /* @__PURE__ */ import_react243.default.createElement(Avatar2, { image: event.user?.image, name: name2, user: event.user }), /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__event-component__channel-event__content" }, /* @__PURE__ */ import_react243.default.createElement("em", { className: "str-chat__event-component__channel-event__sentence" }, sentence), /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__event-component__channel-event__date" }, getDateString({ ...getDateOptions, format: "LT" }))));
+    return /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__event-component__channel-event" }, /* @__PURE__ */ import_react244.default.createElement(Avatar2, { image: event.user?.image, name: name2, user: event.user }), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__event-component__channel-event__content" }, /* @__PURE__ */ import_react244.default.createElement("em", { className: "str-chat__event-component__channel-event__sentence" }, sentence), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__event-component__channel-event__date" }, getDateString({ ...getDateOptions, format: "LT" }))));
   }
   return null;
 };
-var EventComponent = import_react243.default.memo(
+var EventComponent = import_react244.default.memo(
   UnMemoizedEventComponent
 );
 
@@ -55465,7 +55507,7 @@ function defaultRenderMessages({
     const message = messages[index3];
     if (isDateSeparatorMessage(message)) {
       renderedMessages.push(
-        /* @__PURE__ */ import_react244.default.createElement("li", { key: `${message.date.toISOString()}-i` }, /* @__PURE__ */ import_react244.default.createElement(
+        /* @__PURE__ */ import_react245.default.createElement("li", { key: `${message.date.toISOString()}-i` }, /* @__PURE__ */ import_react245.default.createElement(
           DateSeparator2,
           {
             date: message.date,
@@ -55476,17 +55518,17 @@ function defaultRenderMessages({
       );
     } else if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
       renderedMessages.push(
-        /* @__PURE__ */ import_react244.default.createElement("li", { key: "intro" }, /* @__PURE__ */ import_react244.default.createElement(HeaderComponent, null))
+        /* @__PURE__ */ import_react245.default.createElement("li", { key: "intro" }, /* @__PURE__ */ import_react245.default.createElement(HeaderComponent, null))
       );
     } else if (message.type === "system") {
       renderedMessages.push(
-        /* @__PURE__ */ import_react244.default.createElement(
+        /* @__PURE__ */ import_react245.default.createElement(
           "li",
           {
             "data-message-id": message.id,
             key: message.id || message.created_at
           },
-          /* @__PURE__ */ import_react244.default.createElement(MessageSystem, { message })
+          /* @__PURE__ */ import_react245.default.createElement(MessageSystem, { message })
         )
       );
     } else {
@@ -55505,19 +55547,19 @@ function defaultRenderMessages({
         unreadMessageCount: channelUnreadUiState?.unread_messages
       });
       renderedMessages.push(
-        /* @__PURE__ */ import_react244.default.createElement(import_react244.Fragment, { key: message.id || message.created_at }, isFirstUnreadMessage && UnreadMessagesSeparator2 && /* @__PURE__ */ import_react244.default.createElement("li", { className: "str-chat__li str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react244.default.createElement(
+        /* @__PURE__ */ import_react245.default.createElement(import_react245.Fragment, { key: message.id || message.created_at }, isFirstUnreadMessage && UnreadMessagesSeparator2 && /* @__PURE__ */ import_react245.default.createElement("li", { className: "str-chat__li str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react245.default.createElement(
           UnreadMessagesSeparator2,
           {
             unreadCount: channelUnreadUiState?.unread_messages
           }
-        )), /* @__PURE__ */ import_react244.default.createElement(
+        )), /* @__PURE__ */ import_react245.default.createElement(
           "li",
           {
             className: messageClass,
             "data-message-id": message.id,
             "data-testid": messageClass
           },
-          /* @__PURE__ */ import_react244.default.createElement(
+          /* @__PURE__ */ import_react245.default.createElement(
             Message,
             {
               groupStyles: [groupStyles],
@@ -55574,8 +55616,8 @@ var MessageListWithContext = (props) => {
     threadList = false,
     unsafeHTML = false
   } = props;
-  const [listElement, setListElement] = import_react245.default.useState(null);
-  const [ulElement, setUlElement] = import_react245.default.useState(null);
+  const [listElement, setListElement] = import_react246.default.useState(null);
+  const [ulElement, setUlElement] = import_react246.default.useState(null);
   const { customClasses } = useChatContext("MessageList");
   const {
     EmptyStateIndicator: EmptyStateIndicator2 = EmptyStateIndicator,
@@ -55663,24 +55705,24 @@ var MessageListWithContext = (props) => {
     threadList
   });
   const messageListClass = customClasses?.messageList || "str-chat__list";
-  const loadMore = import_react245.default.useCallback(() => {
+  const loadMore = import_react246.default.useCallback(() => {
     if (loadMoreCallback) {
       loadMoreCallback(messageLimit);
     }
   }, [loadMoreCallback, messageLimit]);
-  const loadMoreNewer = import_react245.default.useCallback(() => {
+  const loadMoreNewer = import_react246.default.useCallback(() => {
     if (loadMoreNewerCallback) {
       loadMoreNewerCallback(messageLimit);
     }
   }, [loadMoreNewerCallback, messageLimit]);
-  const scrollToBottomFromNotification = import_react245.default.useCallback(async () => {
+  const scrollToBottomFromNotification = import_react246.default.useCallback(async () => {
     if (hasMoreNewer) {
       await jumpToLatestMessage();
     } else {
       scrollToBottom();
     }
   }, [scrollToBottom, hasMoreNewer]);
-  import_react245.default.useLayoutEffect(() => {
+  import_react246.default.useLayoutEffect(() => {
     if (highlightedMessageId) {
       const element3 = ulElement?.querySelector(
         `[data-message-id='${highlightedMessageId}']`
@@ -55690,12 +55732,12 @@ var MessageListWithContext = (props) => {
   }, [highlightedMessageId]);
   const showEmptyStateIndicator = elements.length === 0 && !threadList;
   const dialogManagerId = threadList ? "message-list-dialog-manager-thread" : "message-list-dialog-manager";
-  return /* @__PURE__ */ import_react245.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react245.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react245.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react245.default.createElement(
+  return /* @__PURE__ */ import_react246.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react246.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react246.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react246.default.createElement(
     UnreadMessagesNotification2,
     {
       unreadCount: channelUnreadUiState?.unread_messages
     }
-  ), /* @__PURE__ */ import_react245.default.createElement(
+  ), /* @__PURE__ */ import_react246.default.createElement(
     "div",
     {
       className: (0, import_clsx62.default)(messageListClass, customClasses?.threadList),
@@ -55703,7 +55745,7 @@ var MessageListWithContext = (props) => {
       ref: setListElement,
       tabIndex: 0
     },
-    showEmptyStateIndicator ? /* @__PURE__ */ import_react245.default.createElement(EmptyStateIndicator2, { listType: threadList ? "thread" : "message" }) : /* @__PURE__ */ import_react245.default.createElement(
+    showEmptyStateIndicator ? /* @__PURE__ */ import_react246.default.createElement(EmptyStateIndicator2, { listType: threadList ? "thread" : "message" }) : /* @__PURE__ */ import_react246.default.createElement(
       InfiniteScroll,
       {
         className: "str-chat__message-list-scroll",
@@ -55712,17 +55754,17 @@ var MessageListWithContext = (props) => {
         hasPreviousPage: props.hasMore,
         head: props.head,
         isLoading: props.loadingMore,
-        loader: /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__list__loading", key: "loading-indicator" }, props.loadingMore && /* @__PURE__ */ import_react245.default.createElement(LoadingIndicator2, { size: 20 })),
+        loader: /* @__PURE__ */ import_react246.default.createElement("div", { className: "str-chat__list__loading", key: "loading-indicator" }, props.loadingMore && /* @__PURE__ */ import_react246.default.createElement(LoadingIndicator2, { size: 20 })),
         loadNextPage: loadMoreNewer,
         loadPreviousPage: loadMore,
         threshold: loadMoreScrollThreshold,
         ...restInternalInfiniteScrollProps
       },
-      /* @__PURE__ */ import_react245.default.createElement("ul", { className: "str-chat__ul", ref: setUlElement }, elements),
-      /* @__PURE__ */ import_react245.default.createElement(TypingIndicator2, { threadList }),
-      /* @__PURE__ */ import_react245.default.createElement("div", { key: "bottom" })
+      /* @__PURE__ */ import_react246.default.createElement("ul", { className: "str-chat__ul", ref: setUlElement }, elements),
+      /* @__PURE__ */ import_react246.default.createElement(TypingIndicator2, { threadList }),
+      /* @__PURE__ */ import_react246.default.createElement("div", { key: "bottom" })
     )
-  ))), /* @__PURE__ */ import_react245.default.createElement(
+  ))), /* @__PURE__ */ import_react246.default.createElement(
     MessageListNotifications2,
     {
       hasNewMessages,
@@ -55747,7 +55789,7 @@ var MessageList = (props) => {
     // eslint-disable-line @typescript-eslint/no-unused-vars
     ...restChannelStateContext
   } = useChannelStateContext("MessageList");
-  return /* @__PURE__ */ import_react245.default.createElement(
+  return /* @__PURE__ */ import_react246.default.createElement(
     MessageListWithContext,
     {
       jumpToLatestMessage,
@@ -55760,16 +55802,16 @@ var MessageList = (props) => {
 };
 
 // src/components/MessageList/ScrollToBottomButton.tsx
-var import_react246 = __toESM(require("react"));
+var import_react247 = __toESM(require("react"));
 var import_clsx63 = __toESM(require("clsx"));
 var UnMemoizedScrollToBottomButton = (props) => {
   const { isMessageListScrolledToBottom, onClick, threadList } = props;
   const { channel: activeChannel, client } = useChatContext();
   const { thread } = useChannelStateContext();
-  const [countUnread, setCountUnread] = (0, import_react246.useState)(activeChannel?.countUnread() || 0);
-  const [replyCount, setReplyCount] = (0, import_react246.useState)(thread?.reply_count || 0);
+  const [countUnread, setCountUnread] = (0, import_react247.useState)(activeChannel?.countUnread() || 0);
+  const [replyCount, setReplyCount] = (0, import_react247.useState)(thread?.reply_count || 0);
   const observedEvent = threadList ? "message.updated" : "message.new";
-  (0, import_react246.useEffect)(() => {
+  (0, import_react247.useEffect)(() => {
     const handleEvent = (event) => {
       const newMessageInAnotherChannel = event.cid !== activeChannel?.cid;
       const newMessageIsMine = event.user?.id === client.user?.id;
@@ -55791,14 +55833,14 @@ var UnMemoizedScrollToBottomButton = (props) => {
       client.off(observedEvent, handleEvent);
     };
   }, [activeChannel, isMessageListScrolledToBottom, observedEvent, replyCount, thread]);
-  (0, import_react246.useEffect)(() => {
+  (0, import_react247.useEffect)(() => {
     if (isMessageListScrolledToBottom) {
       setCountUnread(0);
       setReplyCount(thread?.reply_count || 0);
     }
   }, [isMessageListScrolledToBottom, thread]);
   if (isMessageListScrolledToBottom) return null;
-  return /* @__PURE__ */ import_react246.default.createElement("div", { className: "str-chat__jump-to-latest-message" }, /* @__PURE__ */ import_react246.default.createElement(
+  return /* @__PURE__ */ import_react247.default.createElement("div", { className: "str-chat__jump-to-latest-message" }, /* @__PURE__ */ import_react247.default.createElement(
     "button",
     {
       "aria-live": "polite",
@@ -55809,8 +55851,8 @@ var UnMemoizedScrollToBottomButton = (props) => {
       "data-testid": "message-notification",
       onClick
     },
-    /* @__PURE__ */ import_react246.default.createElement(ArrowDown, null),
-    countUnread > 0 && /* @__PURE__ */ import_react246.default.createElement(
+    /* @__PURE__ */ import_react247.default.createElement(ArrowDown, null),
+    countUnread > 0 && /* @__PURE__ */ import_react247.default.createElement(
       "div",
       {
         className: (0, import_clsx63.default)(
@@ -55823,23 +55865,23 @@ var UnMemoizedScrollToBottomButton = (props) => {
     )
   ));
 };
-var ScrollToBottomButton = import_react246.default.memo(
+var ScrollToBottomButton = import_react247.default.memo(
   UnMemoizedScrollToBottomButton
 );
 
 // src/components/MessageList/VirtualizedMessageList.tsx
-var import_react256 = __toESM(require("react"));
+var import_react257 = __toESM(require("react"));
 var import_react_virtuoso2 = require("react-virtuoso");
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts
-var import_react247 = require("react");
+var import_react248 = require("react");
 function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
-  const [newMessagesNotification, setNewMessagesNotification] = (0, import_react247.useState)(false);
-  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0, import_react247.useState)(true);
-  const didMount = (0, import_react247.useRef)(false);
-  const lastMessageId = (0, import_react247.useRef)("");
-  const atBottom = (0, import_react247.useRef)(false);
-  (0, import_react247.useEffect)(() => {
+  const [newMessagesNotification, setNewMessagesNotification] = (0, import_react248.useState)(false);
+  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0, import_react248.useState)(true);
+  const didMount = (0, import_react248.useRef)(false);
+  const lastMessageId = (0, import_react248.useRef)("");
+  const atBottom = (0, import_react248.useRef)(false);
+  (0, import_react248.useEffect)(() => {
     if (hasMoreNewer) {
       setNewMessagesNotification(true);
       return;
@@ -55865,17 +55907,17 @@ function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
 }
 
 // src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts
-var import_react248 = require("react");
+var import_react249 = require("react");
 var STATUSES_EXCLUDED_FROM_PREPEND = {
   failed: true,
   sending: true
 };
 function usePrependedMessagesCount(messages, hasDateSeparator) {
   const firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-  const firstMessageOnFirstLoadedPage = (0, import_react248.useRef)(void 0);
-  const previousFirstMessageOnFirstLoadedPage = (0, import_react248.useRef)(void 0);
-  const previousNumItemsPrepended = (0, import_react248.useRef)(0);
-  const numItemsPrepended = (0, import_react248.useMemo)(() => {
+  const firstMessageOnFirstLoadedPage = (0, import_react249.useRef)(void 0);
+  const previousFirstMessageOnFirstLoadedPage = (0, import_react249.useRef)(void 0);
+  const previousNumItemsPrepended = (0, import_react249.useRef)(0);
+  const numItemsPrepended = (0, import_react249.useMemo)(() => {
     if (!messages || !messages.length) {
       previousNumItemsPrepended.current = 0;
       return 0;
@@ -55905,10 +55947,10 @@ function usePrependedMessagesCount(messages, hasDateSeparator) {
 }
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts
-var import_react249 = require("react");
+var import_react250 = require("react");
 function useShouldForceScrollToBottom(messages, currentUserId) {
-  const lastFocusedOwnMessage = (0, import_react249.useRef)("");
-  const initialFocusRegistered = (0, import_react249.useRef)(false);
+  const lastFocusedOwnMessage = (0, import_react250.useRef)("");
+  const initialFocusRegistered = (0, import_react250.useRef)(false);
   function recheckForNewOwnMessage() {
     if (messages && messages.length > 0) {
       const lastMessage = messages[messages.length - 1];
@@ -55919,7 +55961,7 @@ function useShouldForceScrollToBottom(messages, currentUserId) {
     }
     return false;
   }
-  (0, import_react249.useEffect)(() => {
+  (0, import_react250.useEffect)(() => {
     if (messages && messages.length && !initialFocusRegistered.current) {
       initialFocusRegistered.current = true;
       recheckForNewOwnMessage();
@@ -55929,11 +55971,11 @@ function useShouldForceScrollToBottom(messages, currentUserId) {
 }
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts
-var import_react250 = require("react");
+var import_react251 = require("react");
 var useGiphyPreview = (separateGiphyPreview) => {
-  const [giphyPreviewMessage, setGiphyPreviewMessage] = (0, import_react250.useState)();
+  const [giphyPreviewMessage, setGiphyPreviewMessage] = (0, import_react251.useState)();
   const { client } = useChatContext("useGiphyPreview");
-  (0, import_react250.useEffect)(() => {
+  (0, import_react251.useEffect)(() => {
     const handleEvent = (event) => {
       const { message, user } = event;
       if (message?.command === "giphy" && user?.id === client.userID) {
@@ -55950,13 +55992,13 @@ var useGiphyPreview = (separateGiphyPreview) => {
 };
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts
-var import_react251 = require("react");
+var import_react252 = require("react");
 var useMessageSetKey = ({
   messages
 }) => {
-  const [messageSetKey, setMessageSetKey] = (0, import_react251.useState)(+/* @__PURE__ */ new Date());
-  const firstMessageId = (0, import_react251.useRef)(void 0);
-  (0, import_react251.useEffect)(() => {
+  const [messageSetKey, setMessageSetKey] = (0, import_react252.useState)(+/* @__PURE__ */ new Date());
+  const firstMessageId = (0, import_react252.useRef)(void 0);
+  (0, import_react252.useEffect)(() => {
     const continuousSet = messages?.find(
       (message) => message.id === firstMessageId.current
     );
@@ -55971,24 +56013,24 @@ var useMessageSetKey = ({
 };
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts
-var import_react252 = require("react");
+var import_react253 = require("react");
 var useScrollToBottomOnNewMessage = ({
   messages,
   scrollToBottom,
   scrollToLatestMessageOnFocus
 }) => {
-  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = (0, import_react252.useState)(false);
-  const scrollToBottomIfConfigured = (0, import_react252.useRef)(void 0);
+  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = (0, import_react253.useState)(false);
+  const scrollToBottomIfConfigured = (0, import_react253.useRef)(void 0);
   scrollToBottomIfConfigured.current = (event) => {
     if (!scrollToLatestMessageOnFocus || !newMessagesReceivedInBackground || event.target !== window) {
       return;
     }
     setTimeout(scrollToBottom, 100);
   };
-  (0, import_react252.useEffect)(() => {
+  (0, import_react253.useEffect)(() => {
     setNewMessagesReceivedInBackground(true);
   }, [messages]);
-  (0, import_react252.useEffect)(() => {
+  (0, import_react253.useEffect)(() => {
     const handleFocus = (event) => {
       scrollToBottomIfConfigured.current?.(event);
     };
@@ -56007,14 +56049,14 @@ var useScrollToBottomOnNewMessage = ({
 };
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts
-var import_react253 = require("react");
+var import_react254 = require("react");
 var useUnreadMessagesNotificationVirtualized = ({
   lastRead,
   showAlways,
   unreadCount
 }) => {
-  const [show, setShow] = (0, import_react253.useState)(false);
-  const toggleShowUnreadMessagesNotification = (0, import_react253.useCallback)(
+  const [show, setShow] = (0, import_react254.useState)(false);
+  const toggleShowUnreadMessagesNotification = (0, import_react254.useCallback)(
     (renderedMessages) => {
       if (!unreadCount) return;
       const firstRenderedMessage = renderedMessages[0];
@@ -56028,7 +56070,7 @@ var useUnreadMessagesNotificationVirtualized = ({
     },
     [lastRead, showAlways, unreadCount]
   );
-  (0, import_react253.useEffect)(() => {
+  (0, import_react254.useEffect)(() => {
     if (!unreadCount) setShow(false);
   }, [unreadCount]);
   return { show, toggleShowUnreadMessagesNotification };
@@ -56037,7 +56079,7 @@ var useUnreadMessagesNotificationVirtualized = ({
 // src/components/MessageList/VirtualizedMessageListComponents.tsx
 var import_clsx64 = __toESM(require("clsx"));
 var import_lodash21 = __toESM(require("lodash.throttle"));
-var import_react254 = __toESM(require("react"));
+var import_react255 = __toESM(require("react"));
 var PREPEND_OFFSET = 10 ** 7;
 function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
   return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
@@ -56058,10 +56100,10 @@ var Item3 = ({
   context,
   ...props
 }) => {
-  if (!context) return /* @__PURE__ */ import_react254.default.createElement(import_react254.default.Fragment, null);
+  if (!context) return /* @__PURE__ */ import_react255.default.createElement(import_react255.default.Fragment, null);
   const message = context.processedMessages[calculateItemIndex(props["data-item-index"], context.numItemsPrepended)];
   const groupStyles = context.messageGroupStyles[message.id];
-  return /* @__PURE__ */ import_react254.default.createElement(
+  return /* @__PURE__ */ import_react255.default.createElement(
     "div",
     {
       ...props,
@@ -56075,13 +56117,13 @@ var Header = ({
   context
 }) => {
   const { LoadingIndicator: LoadingIndicator2 = LoadingIndicator } = useComponentContext("VirtualizedMessageListHeader");
-  return /* @__PURE__ */ import_react254.default.createElement(import_react254.default.Fragment, null, context?.head, context?.loadingMore && LoadingIndicator2 && /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__virtual-list__loading" }, /* @__PURE__ */ import_react254.default.createElement(LoadingIndicator2, { size: 20 })));
+  return /* @__PURE__ */ import_react255.default.createElement(import_react255.default.Fragment, null, context?.head, context?.loadingMore && LoadingIndicator2 && /* @__PURE__ */ import_react255.default.createElement("div", { className: "str-chat__virtual-list__loading" }, /* @__PURE__ */ import_react255.default.createElement(LoadingIndicator2, { size: 20 })));
 };
 var EmptyPlaceholder = ({
   context
 }) => {
   const { EmptyStateIndicator: EmptyStateIndicator2 = EmptyStateIndicator } = useComponentContext("VirtualizedMessageList");
-  return /* @__PURE__ */ import_react254.default.createElement(import_react254.default.Fragment, null, EmptyStateIndicator2 && /* @__PURE__ */ import_react254.default.createElement(EmptyStateIndicator2, { listType: context?.threadList ? "thread" : "message" }));
+  return /* @__PURE__ */ import_react255.default.createElement(import_react255.default.Fragment, null, EmptyStateIndicator2 && /* @__PURE__ */ import_react255.default.createElement(EmptyStateIndicator2, { listType: context?.threadList ? "thread" : "message" }));
 };
 var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
   const {
@@ -56117,12 +56159,12 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     return customMessageRenderer(messageList, streamMessageIndex);
   }
   const message = messageList[streamMessageIndex];
-  if (!message) return /* @__PURE__ */ import_react254.default.createElement("div", { style: { height: "1px" } });
+  if (!message) return /* @__PURE__ */ import_react255.default.createElement("div", { style: { height: "1px" } });
   if (isDateSeparatorMessage(message)) {
-    return DateSeparator2 ? /* @__PURE__ */ import_react254.default.createElement(DateSeparator2, { date: message.date, unread: message.unread }) : null;
+    return DateSeparator2 ? /* @__PURE__ */ import_react255.default.createElement(DateSeparator2, { date: message.date, unread: message.unread }) : null;
   }
   if (message.type === "system") {
-    return MessageSystem ? /* @__PURE__ */ import_react254.default.createElement(MessageSystem, { message }) : null;
+    return MessageSystem ? /* @__PURE__ */ import_react255.default.createElement(MessageSystem, { message }) : null;
   }
   const groupedByUser = shouldGroupByUser && streamMessageIndex > 0 && message.user?.id === messageList[streamMessageIndex - 1].user?.id;
   const maybePrevMessage = messageList[streamMessageIndex - 1];
@@ -56138,7 +56180,7 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : void 0,
     unreadMessageCount
   });
-  return /* @__PURE__ */ import_react254.default.createElement(import_react254.default.Fragment, null, isFirstUnreadMessage && /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react254.default.createElement(UnreadMessagesSeparator2, { unreadCount: unreadMessageCount })), /* @__PURE__ */ import_react254.default.createElement(
+  return /* @__PURE__ */ import_react255.default.createElement(import_react255.default.Fragment, null, isFirstUnreadMessage && /* @__PURE__ */ import_react255.default.createElement("div", { className: "str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react255.default.createElement(UnreadMessagesSeparator2, { unreadCount: unreadMessageCount })), /* @__PURE__ */ import_react255.default.createElement(
     Message,
     {
       additionalMessageInputProps,
@@ -56165,12 +56207,12 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
 };
 
 // src/context/VirtualizedMessageListContext.tsx
-var import_react255 = __toESM(require("react"));
-var VirtualizedMessageListContext = (0, import_react255.createContext)(void 0);
+var import_react256 = __toESM(require("react"));
+var VirtualizedMessageListContext = (0, import_react256.createContext)(void 0);
 var VirtualizedMessageListContextProvider = ({
   children,
   value
-}) => /* @__PURE__ */ import_react255.default.createElement(
+}) => /* @__PURE__ */ import_react256.default.createElement(
   VirtualizedMessageListContext.Provider,
   {
     value
@@ -56185,7 +56227,7 @@ function captureResizeObserverExceededError(e2) {
   }
 }
 function useCaptureResizeObserverExceededError() {
-  (0, import_react256.useEffect)(() => {
+  (0, import_react257.useEffect)(() => {
     window.addEventListener("error", captureResizeObserverExceededError);
     return () => {
       window.removeEventListener("error", captureResizeObserverExceededError);
@@ -56271,15 +56313,15 @@ var VirtualizedMessageListWithContext = (props) => {
   const { client, customClasses } = useChatContext(
     "VirtualizedMessageList"
   );
-  const virtuoso = (0, import_react256.useRef)(null);
-  const lastRead = (0, import_react256.useMemo)(() => channel.lastRead?.(), [channel]);
+  const virtuoso = (0, import_react257.useRef)(null);
+  const lastRead = (0, import_react257.useMemo)(() => channel.lastRead?.(), [channel]);
   const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } = useUnreadMessagesNotificationVirtualized({
     lastRead: channelUnreadUiState?.last_read,
     showAlways: !!showUnreadNotificationAlways,
     unreadCount: channelUnreadUiState?.unread_messages ?? 0
   });
   const { giphyPreviewMessage, setGiphyPreviewMessage } = useGiphyPreview(separateGiphyPreview);
-  const processedMessages = (0, import_react256.useMemo)(() => {
+  const processedMessages = (0, import_react257.useMemo)(() => {
     if (typeof messages === "undefined") {
       return [];
     }
@@ -56311,12 +56353,12 @@ var VirtualizedMessageListWithContext = (props) => {
     returnAllReadData,
     userID: client.userID
   });
-  const lastReceivedMessageId = (0, import_react256.useMemo)(
+  const lastReceivedMessageId = (0, import_react257.useMemo)(
     () => getLastReceived(processedMessages),
     [processedMessages]
   );
   const groupStylesFn = groupStyles || getGroupStyles;
-  const messageGroupStyles = (0, import_react256.useMemo)(
+  const messageGroupStyles = (0, import_react257.useMemo)(
     () => processedMessages.reduce((acc, message, i) => {
       const style = groupStylesFn(
         message,
@@ -56349,7 +56391,7 @@ var VirtualizedMessageListWithContext = (props) => {
     messageListIsThread: !!threadList,
     wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id
   });
-  const scrollToBottom = (0, import_react256.useCallback)(async () => {
+  const scrollToBottom = (0, import_react257.useCallback)(async () => {
     if (hasMoreNewer) {
       await jumpToLatestMessage();
       return;
@@ -56381,7 +56423,7 @@ var VirtualizedMessageListWithContext = (props) => {
     processedMessages,
     client.userID
   );
-  const handleItemsRendered = (0, import_react256.useMemo)(
+  const handleItemsRendered = (0, import_react257.useMemo)(
     () => makeItemsRenderedHandler([toggleShowUnreadMessagesNotification], processedMessages),
     [processedMessages, toggleShowUnreadMessagesNotification]
   );
@@ -56394,7 +56436,7 @@ var VirtualizedMessageListWithContext = (props) => {
     }
     return isAtBottom ? stickToBottomScrollBehavior : false;
   };
-  const computeItemKey2 = (0, import_react256.useCallback)(
+  const computeItemKey2 = (0, import_react257.useCallback)(
     (index3, _, { numItemsPrepended: numItemsPrepended2, processedMessages: processedMessages2 }) => processedMessages2[calculateItemIndex(index3, numItemsPrepended2)].id,
     []
   );
@@ -56411,7 +56453,7 @@ var VirtualizedMessageListWithContext = (props) => {
       loadMore?.(messageLimit);
     }
   };
-  (0, import_react256.useEffect)(() => {
+  (0, import_react257.useEffect)(() => {
     let scrollTimeout;
     if (highlightedMessageId) {
       const index3 = findMessageIndex(processedMessages, highlightedMessageId);
@@ -56427,17 +56469,17 @@ var VirtualizedMessageListWithContext = (props) => {
   }, [highlightedMessageId, processedMessages]);
   if (!processedMessages) return null;
   const dialogManagerId = threadList ? "virtualized-message-list-dialog-manager-thread" : "virtualized-message-list-dialog-manager";
-  return /* @__PURE__ */ import_react256.default.createElement(VirtualizedMessageListContextProvider, { value: { scrollToBottom } }, /* @__PURE__ */ import_react256.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react256.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react256.default.createElement(
+  return /* @__PURE__ */ import_react257.default.createElement(VirtualizedMessageListContextProvider, { value: { scrollToBottom } }, /* @__PURE__ */ import_react257.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react257.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react257.default.createElement(
     UnreadMessagesNotification2,
     {
       unreadCount: channelUnreadUiState?.unread_messages
     }
-  ), /* @__PURE__ */ import_react256.default.createElement(
+  ), /* @__PURE__ */ import_react257.default.createElement(
     "div",
     {
       className: customClasses?.virtualizedMessageList || "str-chat__virtual-list"
     },
-    /* @__PURE__ */ import_react256.default.createElement(
+    /* @__PURE__ */ import_react257.default.createElement(
       import_react_virtuoso2.Virtuoso,
       {
         atBottomStateChange,
@@ -56503,7 +56545,7 @@ var VirtualizedMessageListWithContext = (props) => {
         ...defaultItemHeight ? { defaultItemHeight } : {}
       }
     )
-  )), TypingIndicator2 && /* @__PURE__ */ import_react256.default.createElement(TypingIndicator2, null)), /* @__PURE__ */ import_react256.default.createElement(
+  )), TypingIndicator2 && /* @__PURE__ */ import_react257.default.createElement(TypingIndicator2, null)), /* @__PURE__ */ import_react257.default.createElement(
     MessageListNotifications2,
     {
       hasNewMessages: newMessagesNotification,
@@ -56515,7 +56557,7 @@ var VirtualizedMessageListWithContext = (props) => {
       threadList,
       unreadCount: threadList ? void 0 : channelUnreadUiState?.unread_messages
     }
-  ), giphyPreviewMessage && /* @__PURE__ */ import_react256.default.createElement(GiphyPreviewMessage2, { message: giphyPreviewMessage }));
+  ), giphyPreviewMessage && /* @__PURE__ */ import_react257.default.createElement(GiphyPreviewMessage2, { message: giphyPreviewMessage }));
 };
 function VirtualizedMessageList(props) {
   const { jumpToLatestMessage, loadMore, loadMoreNewer } = useChannelActionContext("VirtualizedMessageList");
@@ -56533,7 +56575,7 @@ function VirtualizedMessageList(props) {
     suppressAutoscroll
   } = useChannelStateContext("VirtualizedMessageList");
   const messages = props.messages || contextMessages;
-  return /* @__PURE__ */ import_react256.default.createElement(
+  return /* @__PURE__ */ import_react257.default.createElement(
     VirtualizedMessageListWithContext,
     {
       channel,
@@ -56739,7 +56781,7 @@ var ChannelContainer = ({
     customClasses
   });
   const className = (0, import_clsx65.default)(chatClass, theme, channelClass, additionalClassName);
-  return /* @__PURE__ */ import_react257.default.createElement("div", { id: CHANNEL_CONTAINER_ID, ...props, className }, children);
+  return /* @__PURE__ */ import_react258.default.createElement("div", { id: CHANNEL_CONTAINER_ID, ...props, className }, children);
 };
 var UnMemoizedChannel = (props) => {
   const {
@@ -56751,15 +56793,15 @@ var UnMemoizedChannel = (props) => {
   const { channel: contextChannel, channelsQueryState } = useChatContext("Channel");
   const channel = propsChannel || contextChannel;
   if (channelsQueryState.queryInProgress === "reload" && LoadingIndicator2) {
-    return /* @__PURE__ */ import_react257.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react257.default.createElement(LoadingIndicator2, null));
+    return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react258.default.createElement(LoadingIndicator2, null));
   }
   if (channelsQueryState.error && LoadingErrorIndicator2) {
-    return /* @__PURE__ */ import_react257.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react257.default.createElement(LoadingErrorIndicator2, { error: channelsQueryState.error }));
+    return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react258.default.createElement(LoadingErrorIndicator2, { error: channelsQueryState.error }));
   }
   if (!channel?.cid) {
-    return /* @__PURE__ */ import_react257.default.createElement(ChannelContainer, null, EmptyPlaceholder2);
+    return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, null, EmptyPlaceholder2);
   }
-  return /* @__PURE__ */ import_react257.default.createElement(ChannelInner, { ...props, channel, key: channel.cid });
+  return /* @__PURE__ */ import_react258.default.createElement(ChannelInner, { ...props, channel, key: channel.cid });
 };
 var ChannelInner = (props) => {
   const {
@@ -56785,7 +56827,7 @@ var ChannelInner = (props) => {
     optionalMessageInputProps = {},
     skipMessageDataMemoization
   } = props;
-  const channelQueryOptions = (0, import_react257.useMemo)(
+  const channelQueryOptions = (0, import_react258.useMemo)(
     () => (0, import_lodash23.default)(propChannelQueryOptions, {
       messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE }
     }),
@@ -56796,13 +56838,13 @@ var ChannelInner = (props) => {
   const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
   const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
   const thread = useThreadContext();
-  const [channelConfig, setChannelConfig] = (0, import_react257.useState)(channel.getConfig());
-  const [notifications, setNotifications] = (0, import_react257.useState)([]);
-  const [quotedMessage, setQuotedMessage] = (0, import_react257.useState)();
-  const [channelUnreadUiState, _setChannelUnreadUiState] = (0, import_react257.useState)();
-  const notificationTimeouts = (0, import_react257.useRef)([]);
-  const channelReducer = (0, import_react257.useMemo)(() => makeChannelReducer(), []);
-  const [state, dispatch] = (0, import_react257.useReducer)(
+  const [channelConfig, setChannelConfig] = (0, import_react258.useState)(channel.getConfig());
+  const [notifications, setNotifications] = (0, import_react258.useState)([]);
+  const [quotedMessage, setQuotedMessage] = (0, import_react258.useState)();
+  const [channelUnreadUiState, _setChannelUnreadUiState] = (0, import_react258.useState)();
+  const notificationTimeouts = (0, import_react258.useRef)([]);
+  const channelReducer = (0, import_react258.useMemo)(() => makeChannelReducer(), []);
+  const [state, dispatch] = (0, import_react258.useReducer)(
     channelReducer,
     // channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
     // => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state
@@ -56814,10 +56856,10 @@ var ChannelInner = (props) => {
   );
   const jumpToMessageFromSearch = useSearchFocusedMessage();
   const isMounted = useIsMounted();
-  const originalTitle = (0, import_react257.useRef)("");
-  const lastRead = (0, import_react257.useRef)(void 0);
-  const online = (0, import_react257.useRef)(true);
-  const clearHighlightedMessageTimeoutId = (0, import_react257.useRef)(
+  const originalTitle = (0, import_react258.useRef)("");
+  const lastRead = (0, import_react258.useRef)(void 0);
+  const online = (0, import_react258.useRef)(true);
+  const clearHighlightedMessageTimeoutId = (0, import_react258.useRef)(
     null
   );
   const channelCapabilitiesArray = channel.data?.own_capabilities;
@@ -56829,14 +56871,14 @@ var ChannelInner = (props) => {
       trailing: true
     }
   );
-  const setChannelUnreadUiState = (0, import_react257.useMemo)(
+  const setChannelUnreadUiState = (0, import_react258.useMemo)(
     () => (0, import_lodash24.default)(_setChannelUnreadUiState, 200, {
       leading: true,
       trailing: false
     }),
     []
   );
-  const markRead = (0, import_react257.useMemo)(
+  const markRead = (0, import_react258.useMemo)(
     () => (0, import_lodash24.default)(
       async (options) => {
         const { updateChannelUiUnreadState = true } = options ?? {};
@@ -56939,7 +56981,7 @@ var ChannelInner = (props) => {
     }
     throttledCopyStateFromChannel();
   };
-  (0, import_react257.useLayoutEffect)(() => {
+  (0, import_react258.useLayoutEffect)(() => {
     let errored = false;
     let done = false;
     (async () => {
@@ -57005,12 +57047,12 @@ var ChannelInner = (props) => {
     channelConfig?.read_events,
     initializeOnMount
   ]);
-  (0, import_react257.useEffect)(() => {
+  (0, import_react258.useEffect)(() => {
     if (!state.thread) return;
     const message = state.messages?.find((m) => m.id === state.thread?.id);
     if (message) dispatch({ message, type: "setThread" });
   }, [state.messages, state.thread]);
-  const handleHighlightedMessageChange = (0, import_react257.useCallback)(
+  const handleHighlightedMessageChange = (0, import_react258.useCallback)(
     ({
       highlightDuration,
       highlightedMessageId
@@ -57033,15 +57075,15 @@ var ChannelInner = (props) => {
     },
     [channel, searchController]
   );
-  (0, import_react257.useEffect)(() => {
+  (0, import_react258.useEffect)(() => {
     if (!jumpToMessageFromSearch?.id) return;
     handleHighlightedMessageChange({ highlightedMessageId: jumpToMessageFromSearch.id });
   }, [jumpToMessageFromSearch, handleHighlightedMessageChange]);
-  const addNotification = (0, import_react257.useMemo)(
+  const addNotification = (0, import_react258.useMemo)(
     () => makeAddNotifications(setNotifications, notificationTimeouts.current),
     []
   );
-  const loadMoreFinished = (0, import_react257.useCallback)(
+  const loadMoreFinished = (0, import_react258.useCallback)(
     (0, import_lodash22.default)(
       (hasMore, messages) => {
         if (!isMounted.current) return;
@@ -57102,7 +57144,7 @@ var ChannelInner = (props) => {
     });
     return queryResponse.messages.length;
   };
-  const jumpToMessage = (0, import_react257.useCallback)(
+  const jumpToMessage = (0, import_react258.useCallback)(
     async (messageId, messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
       dispatch({ loadingMore: true, type: "setLoadingMore" });
       await channel.state.loadMessageIntoState(messageId, void 0, messageLimit);
@@ -57114,14 +57156,14 @@ var ChannelInner = (props) => {
     },
     [channel, handleHighlightedMessageChange, loadMoreFinished]
   );
-  const jumpToLatestMessage = (0, import_react257.useCallback)(async () => {
+  const jumpToLatestMessage = (0, import_react258.useCallback)(async () => {
     await channel.state.loadMessageIntoState("latest");
     loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
     dispatch({
       type: "jumpToLatestMessage"
     });
   }, [channel, loadMoreFinished]);
-  const jumpToFirstUnreadMessage = (0, import_react257.useCallback)(
+  const jumpToFirstUnreadMessage = (0, import_react258.useCallback)(
     async (queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
       if (!channelUnreadUiState?.unread_messages) return;
       let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
@@ -57244,7 +57286,7 @@ var ChannelInner = (props) => {
       channelUnreadUiState
     ]
   );
-  const deleteMessage = (0, import_react257.useCallback)(
+  const deleteMessage = (0, import_react258.useCallback)(
     async (message) => {
       if (!message?.id) {
         throw new Error("Cannot delete a message - missing message ID.");
@@ -57401,7 +57443,7 @@ var ChannelInner = (props) => {
     event?.preventDefault();
     dispatch({ type: "closeThread" });
   };
-  const loadMoreThreadFinished = (0, import_react257.useCallback)(
+  const loadMoreThreadFinished = (0, import_react258.useCallback)(
     (0, import_lodash22.default)(
       (threadHasMore, threadMessages) => {
         dispatch({
@@ -57465,7 +57507,7 @@ var ChannelInner = (props) => {
     videoAttachmentSizeHandler: props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration,
     watcher_count: state.watcherCount
   });
-  const channelActionContextValue = (0, import_react257.useMemo)(
+  const channelActionContextValue = (0, import_react258.useMemo)(
     () => ({
       addNotification,
       closeThread,
@@ -57506,7 +57548,7 @@ var ChannelInner = (props) => {
       setChannelUnreadUiState
     ]
   );
-  const componentContextValue = (0, import_react257.useMemo)(
+  const componentContextValue = (0, import_react258.useMemo)(
     () => ({
       Attachment: props.Attachment,
       AttachmentPreviewList: props.AttachmentPreviewList,
@@ -57638,26 +57680,26 @@ var ChannelInner = (props) => {
     typing
   });
   if (state.error) {
-    return /* @__PURE__ */ import_react257.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react257.default.createElement(LoadingErrorIndicator2, { error: state.error }));
+    return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react258.default.createElement(LoadingErrorIndicator2, { error: state.error }));
   }
   if (state.loading) {
-    return /* @__PURE__ */ import_react257.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react257.default.createElement(LoadingIndicator2, null));
+    return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react258.default.createElement(LoadingIndicator2, null));
   }
   if (!channel.watch) {
-    return /* @__PURE__ */ import_react257.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react257.default.createElement("div", null, t2("Channel Missing")));
+    return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react258.default.createElement("div", null, t2("Channel Missing")));
   }
-  return /* @__PURE__ */ import_react257.default.createElement(ChannelContainer, { className: windowsEmojiClass }, /* @__PURE__ */ import_react257.default.createElement(ChannelStateProvider, { value: channelStateContextValue }, /* @__PURE__ */ import_react257.default.createElement(ChannelActionProvider, { value: channelActionContextValue }, /* @__PURE__ */ import_react257.default.createElement(WithComponents, { overrides: componentContextValue }, /* @__PURE__ */ import_react257.default.createElement(TypingProvider, { value: typingContextValue }, /* @__PURE__ */ import_react257.default.createElement("div", { className: `${chatContainerClass}` }, dragAndDropWindow && /* @__PURE__ */ import_react257.default.createElement(DropzoneProvider, { ...optionalMessageInputProps }, children), !dragAndDropWindow && /* @__PURE__ */ import_react257.default.createElement(import_react257.default.Fragment, null, children)))))));
+  return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, { className: windowsEmojiClass }, /* @__PURE__ */ import_react258.default.createElement(ChannelStateProvider, { value: channelStateContextValue }, /* @__PURE__ */ import_react258.default.createElement(ChannelActionProvider, { value: channelActionContextValue }, /* @__PURE__ */ import_react258.default.createElement(WithComponents, { overrides: componentContextValue }, /* @__PURE__ */ import_react258.default.createElement(TypingProvider, { value: typingContextValue }, /* @__PURE__ */ import_react258.default.createElement("div", { className: `${chatContainerClass}` }, dragAndDropWindow && /* @__PURE__ */ import_react258.default.createElement(DropzoneProvider, { ...optionalMessageInputProps }, children), !dragAndDropWindow && /* @__PURE__ */ import_react258.default.createElement(import_react258.default.Fragment, null, children)))))));
 };
-var Channel = import_react257.default.memo(UnMemoizedChannel);
+var Channel = import_react258.default.memo(UnMemoizedChannel);
 
 // src/components/ChannelHeader/ChannelHeader.tsx
-var import_react259 = __toESM(require("react"));
+var import_react260 = __toESM(require("react"));
 
 // src/components/ChannelHeader/icons.tsx
-var import_react258 = __toESM(require("react"));
+var import_react259 = __toESM(require("react"));
 var MenuIcon2 = ({ title }) => {
   const { t: t2 } = useTranslationContext("MenuIcon");
-  return /* @__PURE__ */ import_react258.default.createElement("svg", { "data-testid": "menu-icon", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react258.default.createElement("title", null, title ?? t2("Menu")), /* @__PURE__ */ import_react258.default.createElement(
+  return /* @__PURE__ */ import_react259.default.createElement("svg", { "data-testid": "menu-icon", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react259.default.createElement("title", null, title ?? t2("Menu")), /* @__PURE__ */ import_react259.default.createElement(
     "path",
     {
       d: "M0 88C0 74.75 10.75 64 24 64H424C437.3 64 448 74.75 448 88C448 101.3 437.3 112 424 112H24C10.75 112 0 101.3 0 88zM0 248C0 234.7 10.75 224 24 224H424C437.3 224 448 234.7 448 248C448 261.3 437.3 272 424 272H24C10.75 272 0 261.3 0 248zM424 432H24C10.75 432 0 421.3 0 408C0 394.7 10.75 384 24 384H424C437.3 384 448 394.7 448 408C448 421.3 437.3 432 424 432z",
@@ -57684,15 +57726,15 @@ var ChannelHeader = (props) => {
     overrideTitle
   });
   const { member_count, subtitle } = channel?.data || {};
-  return /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__channel-header" }, /* @__PURE__ */ import_react259.default.createElement(
+  return /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__channel-header" }, /* @__PURE__ */ import_react260.default.createElement(
     "button",
     {
       "aria-label": t2("aria/Menu"),
       className: "str-chat__header-hamburger",
       onClick: openMobileNav
     },
-    /* @__PURE__ */ import_react259.default.createElement(MenuIcon3, null)
-  ), /* @__PURE__ */ import_react259.default.createElement(
+    /* @__PURE__ */ import_react260.default.createElement(MenuIcon3, null)
+  ), /* @__PURE__ */ import_react260.default.createElement(
     Avatar2,
     {
       className: "str-chat__avatar--channel-header",
@@ -57700,36 +57742,36 @@ var ChannelHeader = (props) => {
       image: displayImage,
       name: displayTitle
     }
-  ), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__channel-header-end" }, /* @__PURE__ */ import_react259.default.createElement("p", { className: "str-chat__channel-header-title" }, displayTitle, " ", live && /* @__PURE__ */ import_react259.default.createElement("span", { className: "str-chat__header-livestream-livelabel" }, t2("live"))), subtitle && /* @__PURE__ */ import_react259.default.createElement("p", { className: "str-chat__channel-header-subtitle" }, subtitle), /* @__PURE__ */ import_react259.default.createElement("p", { className: "str-chat__channel-header-info" }, !live && !!member_count && member_count > 0 && /* @__PURE__ */ import_react259.default.createElement(import_react259.default.Fragment, null, t2("{{ memberCount }} members", {
+  ), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__channel-header-end" }, /* @__PURE__ */ import_react260.default.createElement("p", { className: "str-chat__channel-header-title" }, displayTitle, " ", live && /* @__PURE__ */ import_react260.default.createElement("span", { className: "str-chat__header-livestream-livelabel" }, t2("live"))), subtitle && /* @__PURE__ */ import_react260.default.createElement("p", { className: "str-chat__channel-header-subtitle" }, subtitle), /* @__PURE__ */ import_react260.default.createElement("p", { className: "str-chat__channel-header-info" }, !live && !!member_count && member_count > 0 && /* @__PURE__ */ import_react260.default.createElement(import_react260.default.Fragment, null, t2("{{ memberCount }} members", {
     memberCount: member_count
   }), ",", " "), t2("{{ watcherCount }} online", { watcherCount: watcher_count }))));
 };
 
 // src/components/Chat/Chat.tsx
-var import_react263 = __toESM(require("react"));
+var import_react264 = __toESM(require("react"));
 var import_stream_chat6 = require("stream-chat");
 
 // src/components/Chat/hooks/useChat.ts
-var import_react260 = require("react");
+var import_react261 = require("react");
 var useChat = ({
   client,
   defaultLanguage = "en",
   i18nInstance,
   initialNavOpen
 }) => {
-  const [translators, setTranslators] = (0, import_react260.useState)({
+  const [translators, setTranslators] = (0, import_react261.useState)({
     t: (key) => key,
     tDateTimeParser: defaultDateTimeParser,
     userLanguage: "en"
   });
-  const [channel, setChannel] = (0, import_react260.useState)();
-  const [mutes, setMutes] = (0, import_react260.useState)([]);
-  const [navOpen, setNavOpen] = (0, import_react260.useState)(initialNavOpen);
-  const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0, import_react260.useState)({});
+  const [channel, setChannel] = (0, import_react261.useState)();
+  const [mutes, setMutes] = (0, import_react261.useState)([]);
+  const [navOpen, setNavOpen] = (0, import_react261.useState)(initialNavOpen);
+  const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0, import_react261.useState)({});
   const clientMutes = client.user?.mutes || [];
   const closeMobileNav = () => setNavOpen(false);
   const openMobileNav = () => setTimeout(() => setNavOpen(true), 100);
-  const appSettings = (0, import_react260.useRef)(
+  const appSettings = (0, import_react261.useRef)(
     null
   );
   const getAppSettings = () => {
@@ -57739,9 +57781,9 @@ var useChat = ({
     appSettings.current = client.getAppSettings();
     return appSettings.current;
   };
-  (0, import_react260.useEffect)(() => {
+  (0, import_react261.useEffect)(() => {
     if (!client) return;
-    const version = "12.14.0";
+    const version = "12.15.0";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -57753,7 +57795,7 @@ var useChat = ({
       client.polls.unregisterSubscriptions();
     };
   }, [client]);
-  (0, import_react260.useEffect)(() => {
+  (0, import_react261.useEffect)(() => {
     setMutes(clientMutes);
     const handleEvent = (event) => {
       setMutes(event.me?.mutes || []);
@@ -57761,7 +57803,7 @@ var useChat = ({
     client.on("notification.mutes_updated", handleEvent);
     return () => client.off("notification.mutes_updated", handleEvent);
   }, [clientMutes?.length]);
-  (0, import_react260.useEffect)(() => {
+  (0, import_react261.useEffect)(() => {
     let userLanguage = client.user?.language;
     if (!userLanguage) {
       const browserLanguage = window.navigator.language.slice(0, 2);
@@ -57778,7 +57820,7 @@ var useChat = ({
       });
     });
   }, [i18nInstance]);
-  const setActiveChannel = (0, import_react260.useCallback)(
+  const setActiveChannel = (0, import_react261.useCallback)(
     async (activeChannel, watchers = {}, event) => {
       if (event && event.preventDefault) event.preventDefault();
       if (activeChannel && Object.keys(watchers).length) {
@@ -57789,7 +57831,7 @@ var useChat = ({
     },
     []
   );
-  (0, import_react260.useEffect)(() => {
+  (0, import_react261.useEffect)(() => {
     setLatestMessageDatesByChannels({});
   }, [client.user?.id]);
   return {
@@ -57806,7 +57848,7 @@ var useChat = ({
 };
 
 // src/components/Chat/hooks/useCreateChatContext.ts
-var import_react261 = require("react");
+var import_react262 = require("react");
 var useCreateChatContext = (value) => {
   const {
     channel,
@@ -57831,7 +57873,7 @@ var useCreateChatContext = (value) => {
   const clientValues = `${client.clientID}${Object.keys(client.activeChannels).length}${Object.keys(client.listeners).length}${client.mutedChannels.length}
   ${client.user?.id}`;
   const mutedUsersLength = mutes.length;
-  const chatContext = (0, import_react261.useMemo)(
+  const chatContext = (0, import_react262.useMemo)(
     () => ({
       channel,
       channelsQueryState,
@@ -57866,10 +57908,10 @@ var useCreateChatContext = (value) => {
 };
 
 // src/components/Chat/hooks/useChannelsQueryState.ts
-var import_react262 = require("react");
+var import_react263 = require("react");
 var useChannelsQueryState = () => {
-  const [error, setError] = (0, import_react262.useState)(null);
-  const [queryInProgress, setQueryInProgress] = (0, import_react262.useState)("uninitialized");
+  const [error, setError] = (0, import_react263.useState)(null);
+  const [queryInProgress, setQueryInProgress] = (0, import_react263.useState)("uninitialized");
   return {
     error,
     queryInProgress,
@@ -57904,7 +57946,7 @@ var Chat = (props) => {
     translators
   } = useChat({ client, defaultLanguage, i18nInstance, initialNavOpen });
   const channelsQueryState = useChannelsQueryState();
-  const searchController = (0, import_react263.useMemo)(
+  const searchController = (0, import_react264.useMemo)(
     () => customChannelSearchController ?? new import_stream_chat6.SearchController({
       sources: [
         new import_stream_chat6.ChannelSearchSource(client),
@@ -57932,11 +57974,11 @@ var Chat = (props) => {
     useImageFlagEmojisOnWindows
   });
   if (!translators.t) return null;
-  return /* @__PURE__ */ import_react263.default.createElement(ChatProvider, { value: chatContextValue }, /* @__PURE__ */ import_react263.default.createElement(TranslationProvider, { value: translators }, children));
+  return /* @__PURE__ */ import_react264.default.createElement(ChatProvider, { value: chatContextValue }, /* @__PURE__ */ import_react264.default.createElement(TranslationProvider, { value: translators }, children));
 };
 
 // src/components/Chat/hooks/useCreateChatClient.ts
-var import_react264 = require("react");
+var import_react265 = require("react");
 var import_stream_chat7 = require("stream-chat");
 var useCreateChatClient = ({
   apiKey,
@@ -57944,13 +57986,13 @@ var useCreateChatClient = ({
   tokenOrProvider,
   userData
 }) => {
-  const [chatClient, setChatClient] = (0, import_react264.useState)(null);
-  const [cachedUserData, setCachedUserData] = (0, import_react264.useState)(userData);
+  const [chatClient, setChatClient] = (0, import_react265.useState)(null);
+  const [cachedUserData, setCachedUserData] = (0, import_react265.useState)(userData);
   if (userData.id !== cachedUserData.id) {
     setCachedUserData(userData);
   }
-  const [cachedOptions] = (0, import_react264.useState)(options);
-  (0, import_react264.useEffect)(() => {
+  const [cachedOptions] = (0, import_react265.useState)(options);
+  (0, import_react265.useEffect)(() => {
     const client = new import_stream_chat7.StreamChat(apiKey, void 0, cachedOptions);
     let didUserConnectInterrupt = false;
     const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
@@ -57968,17 +58010,17 @@ var useCreateChatClient = ({
 };
 
 // src/components/Thread/Thread.tsx
-var import_react269 = __toESM(require("react"));
+var import_react270 = __toESM(require("react"));
 var import_clsx66 = __toESM(require("clsx"));
 
 // src/components/Thread/ThreadHeader.tsx
-var import_react266 = __toESM(require("react"));
+var import_react267 = __toESM(require("react"));
 
 // src/components/Thread/icons.tsx
-var import_react265 = __toESM(require("react"));
+var import_react266 = __toESM(require("react"));
 var CloseIcon3 = ({ title }) => {
   const { t: t2 } = useTranslationContext("CloseIcon");
-  return /* @__PURE__ */ import_react265.default.createElement(
+  return /* @__PURE__ */ import_react266.default.createElement(
     "svg",
     {
       "data-testid": "close-no-outline",
@@ -57986,8 +58028,8 @@ var CloseIcon3 = ({ title }) => {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ import_react265.default.createElement("title", null, title ?? t2("Close")),
-    /* @__PURE__ */ import_react265.default.createElement(
+    /* @__PURE__ */ import_react266.default.createElement("title", null, title ?? t2("Close")),
+    /* @__PURE__ */ import_react266.default.createElement(
       "path",
       {
         d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
@@ -58007,7 +58049,7 @@ var ThreadHeader = (props) => {
     overrideImage,
     overrideTitle
   });
-  return /* @__PURE__ */ import_react266.default.createElement("div", { className: "str-chat__thread-header" }, /* @__PURE__ */ import_react266.default.createElement("div", { className: "str-chat__thread-header-details" }, /* @__PURE__ */ import_react266.default.createElement("div", { className: "str-chat__thread-header-title" }, t2("Thread")), /* @__PURE__ */ import_react266.default.createElement("div", { className: "str-chat__thread-header-subtitle" }, displayTitle)), /* @__PURE__ */ import_react266.default.createElement(
+  return /* @__PURE__ */ import_react267.default.createElement("div", { className: "str-chat__thread-header" }, /* @__PURE__ */ import_react267.default.createElement("div", { className: "str-chat__thread-header-details" }, /* @__PURE__ */ import_react267.default.createElement("div", { className: "str-chat__thread-header-title" }, t2("Thread")), /* @__PURE__ */ import_react267.default.createElement("div", { className: "str-chat__thread-header-subtitle" }, displayTitle)), /* @__PURE__ */ import_react267.default.createElement(
     "button",
     {
       "aria-label": t2("aria/Close thread"),
@@ -58015,26 +58057,26 @@ var ThreadHeader = (props) => {
       "data-testid": "close-button",
       onClick: closeThread
     },
-    /* @__PURE__ */ import_react266.default.createElement(CloseIcon3, null)
+    /* @__PURE__ */ import_react267.default.createElement(CloseIcon3, null)
   ));
 };
 
 // src/components/Thread/ThreadHead.tsx
-var import_react268 = __toESM(require("react"));
+var import_react269 = __toESM(require("react"));
 
 // src/components/Thread/ThreadStart.tsx
-var import_react267 = __toESM(require("react"));
+var import_react268 = __toESM(require("react"));
 var ThreadStart = () => {
   const { thread } = useChannelStateContext("ThreadStart");
   const { t: t2 } = useTranslationContext("ThreadStart");
   if (!thread?.reply_count) return null;
-  return /* @__PURE__ */ import_react267.default.createElement("div", { className: "str-chat__thread-start" }, t2("replyCount", { count: thread.reply_count }));
+  return /* @__PURE__ */ import_react268.default.createElement("div", { className: "str-chat__thread-start" }, t2("replyCount", { count: thread.reply_count }));
 };
 
 // src/components/Thread/ThreadHead.tsx
 var ThreadHead = (props) => {
   const { ThreadStart: ThreadStart2 = ThreadStart } = useComponentContext("ThreadHead");
-  return /* @__PURE__ */ import_react268.default.createElement("div", { className: "str-chat__parent-message-li" }, /* @__PURE__ */ import_react268.default.createElement(Message, { initialMessage: true, threadList: true, ...props }), /* @__PURE__ */ import_react268.default.createElement(ThreadStart2, null));
+  return /* @__PURE__ */ import_react269.default.createElement("div", { className: "str-chat__parent-message-li" }, /* @__PURE__ */ import_react269.default.createElement(Message, { initialMessage: true, threadList: true, ...props }), /* @__PURE__ */ import_react269.default.createElement(ThreadStart2, null));
 };
 
 // src/components/Thread/Thread.tsx
@@ -58044,7 +58086,7 @@ var Thread = (props) => {
   if (!thread && !threadInstance || channelConfig?.replies === false) return null;
   return (
     // FIXME: TS is having trouble here as at least one of the two would always be defined
-    /* @__PURE__ */ import_react269.default.createElement(
+    /* @__PURE__ */ import_react270.default.createElement(
       ThreadInner,
       {
         ...props,
@@ -58095,7 +58137,7 @@ var ThreadInner = (props) => {
   const FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;
   const MessageUIComponent = ThreadMessage || FallbackMessage;
   const ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;
-  (0, import_react269.useEffect)(() => {
+  (0, import_react270.useEffect)(() => {
     if (thread?.id && thread?.reply_count) {
       loadMoreThread();
     }
@@ -58117,7 +58159,7 @@ var ThreadInner = (props) => {
   const threadClass = customClasses?.thread || (0, import_clsx66.default)("str-chat__thread-container str-chat__thread", {
     "str-chat__thread--virtualized": virtualized
   });
-  const head = /* @__PURE__ */ import_react269.default.createElement(
+  const head = /* @__PURE__ */ import_react270.default.createElement(
     ThreadHead2,
     {
       key: messageAsThread.id,
@@ -58126,7 +58168,7 @@ var ThreadInner = (props) => {
       ...additionalParentMessageProps
     }
   );
-  return /* @__PURE__ */ import_react269.default.createElement("div", { className: threadClass }, /* @__PURE__ */ import_react269.default.createElement(ThreadHeader2, { closeThread, thread: messageAsThread }), /* @__PURE__ */ import_react269.default.createElement(
+  return /* @__PURE__ */ import_react270.default.createElement("div", { className: threadClass }, /* @__PURE__ */ import_react270.default.createElement(ThreadHeader2, { closeThread, thread: messageAsThread }), /* @__PURE__ */ import_react270.default.createElement(
     ThreadMessageList,
     {
       disableDateSeparator: !enableDateSeparator,
@@ -58138,7 +58180,7 @@ var ThreadInner = (props) => {
       ...threadProps,
       ...virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps
     }
-  ), /* @__PURE__ */ import_react269.default.createElement(
+  ), /* @__PURE__ */ import_react270.default.createElement(
     MessageInput,
     {
       focus: autoFocus,
@@ -58152,12 +58194,12 @@ var ThreadInner = (props) => {
 };
 
 // src/components/Window/Window.tsx
-var import_react270 = __toESM(require("react"));
+var import_react271 = __toESM(require("react"));
 var import_clsx67 = __toESM(require("clsx"));
 var UnMemoizedWindow = (props) => {
   const { children, thread: propThread } = props;
   const { thread: contextThread } = useChannelStateContext("Window");
-  return /* @__PURE__ */ import_react270.default.createElement(
+  return /* @__PURE__ */ import_react271.default.createElement(
     "div",
     {
       className: (0, import_clsx67.default)("str-chat__main-panel", {
@@ -58167,7 +58209,7 @@ var UnMemoizedWindow = (props) => {
     children
   );
 };
-var Window = import_react270.default.memo(UnMemoizedWindow);
+var Window = import_react271.default.memo(UnMemoizedWindow);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ACTIONS_NOT_WORKING_IN_THREAD,
@@ -58374,6 +58416,7 @@ var Window = import_react270.default.memo(UnMemoizedWindow);
   WaveProgressBar,
   Window,
   WithComponents,
+  WithDragAndDropUpload,
   areMessagePropsEqual,
   areMessageUIPropsEqual,
   attachmentTypeIconMap,