sceyt-chat-react-uikit 1.7.3-beta.4 → 1.7.4-beta.1

package/components/AudioRecord/index.d.ts

@@ -9,6 +9,7 @@ interface AudioPlayerProps {
     setShowRecording: (start: boolean) => void;
     showRecording: boolean;
     channelId: string;
+    maxRecordingDuration?: number;
 }
 declare const AudioRecord: React.FC<AudioPlayerProps>;
 export default AudioRecord;

package/components/ChatContainer/index.d.ts

@@ -53,6 +53,7 @@ export interface IChatClientProps {
     logLevel?: 'silent' | 'trace' | 'debug' | 'info' | 'warn' | 'error';
     memberCount?: number;
     disableFrowardMentionsCount?: boolean;
+    chatMinWidth?: string;
 }
-declare const SceytChatContainer: ({ client, theme, themeMode, avatarColors, children, showOnlyContactUsers, handleNewMessages, sendAttachmentsAsSeparateMessages, membersDisplayTextByChannelTypesMap, defaultRolesByChannelTypesMap, channelTypeFilter, logoSrc, CustomUploader, showNotifications, hideUserPresence, openChatOnUserInteraction, autoSelectFirstChannel, logLevel, memberCount, disableFrowardMentionsCount }: IChatClientProps) => React.JSX.Element;
+declare const SceytChatContainer: ({ client, theme, themeMode, avatarColors, children, showOnlyContactUsers, handleNewMessages, sendAttachmentsAsSeparateMessages, membersDisplayTextByChannelTypesMap, defaultRolesByChannelTypesMap, channelTypeFilter, logoSrc, CustomUploader, showNotifications, hideUserPresence, openChatOnUserInteraction, autoSelectFirstChannel, logLevel, memberCount, disableFrowardMentionsCount, chatMinWidth }: IChatClientProps) => React.JSX.Element;
 export default SceytChatContainer;

package/components/SceytChat/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IChatClientProps } from '../ChatContainer';
-declare const SceytChat: ({ client, theme, themeMode, avatarColors, children, showOnlyContactUsers, logoSrc, CustomUploader, handleNewMessages, sendAttachmentsAsSeparateMessages, membersDisplayTextByChannelTypesMap, channelTypeFilter, defaultRolesByChannelTypesMap, hideUserPresence, showNotifications, openChatOnUserInteraction, autoSelectFirstChannel, memberCount, disableFrowardMentionsCount }: IChatClientProps) => React.JSX.Element;
+declare const SceytChat: ({ client, theme, themeMode, avatarColors, children, showOnlyContactUsers, logoSrc, CustomUploader, handleNewMessages, sendAttachmentsAsSeparateMessages, membersDisplayTextByChannelTypesMap, channelTypeFilter, defaultRolesByChannelTypesMap, hideUserPresence, showNotifications, openChatOnUserInteraction, autoSelectFirstChannel, memberCount, disableFrowardMentionsCount, chatMinWidth }: IChatClientProps) => React.JSX.Element;
 export default SceytChat;
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;

package/components/SendMessageInput/index.d.ts

@@ -67,6 +67,7 @@ interface SendMessageProps {
     textSelectionBackgroundColor?: string;
     placeholderText?: string;
     placeholderTextColor?: string;
+    audioRecordingMaxDuration?: number;
 }
 declare const SendMessageInput: React.FC<SendMessageProps>;
 export default SendMessageInput;

package/index.js

@@ -20661,7 +20661,8 @@ var SceytChat = function SceytChat(_ref) {
     autoSelectFirstChannel = _ref$autoSelectFirstC === void 0 ? false : _ref$autoSelectFirstC,
     memberCount = _ref.memberCount,
     _ref$disableFrowardMe = _ref.disableFrowardMentionsCount,
-    disableFrowardMentionsCount = _ref$disableFrowardMe === void 0 ? false : _ref$disableFrowardMe;
+    disableFrowardMentionsCount = _ref$disableFrowardMe === void 0 ? false : _ref$disableFrowardMe,
+    chatMinWidth = _ref.chatMinWidth;
   var _useColor = useColors(),
     backgroundColor = _useColor[THEME_COLORS.BACKGROUND],
     highlightedBackground = _useColor[THEME_COLORS.HIGHLIGHTED_BACKGROUND];
@@ -20876,12 +20877,13 @@ var SceytChat = function SceytChat(_ref) {
     withChannelsList: channelsListWidth && channelsListWidth > 0,
     backgroundColor: backgroundColor,
     highlightedBackground: highlightedBackground,
-    id: 'sceyt_chat_container'
+    id: 'sceyt_chat_container',
+    chatMinWidth: chatMinWidth
   }, children)) : '');
 };
 var Container = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 100vh;\n"])));
 var ChatContainer = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 100%;\n  max-height: 100vh;\n  min-width: ", ";\n  background-color: ", ";\n\n  /* Global highlighted background styles */\n  ::selection {\n    background-color: ", ";\n  }\n\n  ::-moz-selection {\n    background-color: ", ";\n  }\n\n  /* For text selection highlighting */\n  *::selection {\n    background-color: ", ";\n  }\n\n  *::-moz-selection {\n    background-color: ", ";\n  }\n"])), function (props) {
-  return props.withChannelsList && '1200px';
+  return props.withChannelsList && (props.chatMinWidth || '1200px');
 }, function (props) {
   return props.backgroundColor;
 }, function (props) {
@@ -20916,7 +20918,8 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
     _ref$logLevel = _ref.logLevel,
     logLevel = _ref$logLevel === void 0 ? 'silent' : _ref$logLevel,
     memberCount = _ref.memberCount,
-    disableFrowardMentionsCount = _ref.disableFrowardMentionsCount;
+    disableFrowardMentionsCount = _ref.disableFrowardMentionsCount,
+    chatMinWidth = _ref.chatMinWidth;
   React.useEffect(function () {
     log.setLevel(logLevel);
   }, []);
@@ -20942,7 +20945,8 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
     autoSelectFirstChannel: autoSelectFirstChannel,
     channelTypeFilter: channelTypeFilter,
     memberCount: memberCount,
-    disableFrowardMentionsCount: disableFrowardMentionsCount
+    disableFrowardMentionsCount: disableFrowardMentionsCount,
+    chatMinWidth: chatMinWidth
   }));
 };
 
@@ -31609,7 +31613,7 @@ var MessageStatusAndTimeContainer = styled__default.span(_templateObject3$o || (
 }, function (props) {
   return props.bottomOfMessage && props.rtlDirection && 'flex-end';
 }, HiddenMessageTime, function (props) {
-  return props.withAttachment ? props.messageTimeColorOnAttachment : '';
+  return props.withAttachment && !props.fileAttachment ? props.messageTimeColorOnAttachment : '';
 }, function (props) {
   return props.withAttachment && "\n    position: absolute;\n    z-index: 10;\n    right: " + (props.fileAttachment ? '6px' : '10px') + ";\n    bottom: " + (props.fileAttachment ? '9px' : '14px') + ";\n  ";
 });
@@ -32288,13 +32292,13 @@ var MessageBody = function MessageBody(_ref) {
     messageTimeVisible: !!messageTimeVisible,
     messageStatusVisible: !!messageStatusVisible,
     leftMargin: true,
-    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary
+    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textSecondary
   })) : null), notLinkAttachment && messageStatusAndTimePosition === 'onMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
     messageStatusDisplayingType: messageStatusDisplayingType,
     messageStatusSize: messageStatusSize,
-    messageStatusColor: message.attachments[0].type !== 'voice' && message.attachments[0].type !== 'file' ? textOnPrimary : messageStateColor || textSecondary,
+    messageStatusColor: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : messageStateColor || textSecondary,
     messageReadStatusColor: messageReadStatusColor,
     messageStateFontSize: messageStateFontSize,
     messageStateColor: messageStateColor,
@@ -32306,7 +32310,7 @@ var MessageBody = function MessageBody(_ref) {
     withAttachment: withAttachments,
     leftMargin: true,
     fileAttachment: withAttachments && (message.attachments[0].type === 'file' || message.attachments[0].type === 'voice'),
-    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary
+    messageTimeColorOnAttachment: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : textSecondary
   })), withAttachments && message.attachments.map(function (attachment) {
     return /*#__PURE__*/React__default.createElement(Attachment$1, {
       key: attachment.tid || attachment.url,
@@ -36752,11 +36756,14 @@ function SvgRecordButton(props) {
 
 var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i;
 var shouldDraw = false;
+var DEFAULT_MAX_RECORDING_DURATION = 600;
 var AudioRecord = function AudioRecord(_ref) {
   var sendRecordedFile = _ref.sendRecordedFile,
     setShowRecording = _ref.setShowRecording,
     showRecording = _ref.showRecording,
-    channelId = _ref.channelId;
+    channelId = _ref.channelId,
+    _ref$maxRecordingDura = _ref.maxRecordingDuration,
+    maxRecordingDuration = _ref$maxRecordingDura === void 0 ? DEFAULT_MAX_RECORDING_DURATION : _ref$maxRecordingDura;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
@@ -37111,12 +37118,13 @@ var AudioRecord = function AudioRecord(_ref) {
           }
           setStartRecording(false);
           var objectUrl = URL.createObjectURL(blob);
+          var durationInt = Math.round(audioBuffer.duration);
           if (send) {
             sendRecordedFile({
               file: file,
               objectUrl: objectUrl,
               thumb: waveform,
-              dur: audioBuffer.duration
+              dur: durationInt
             }, id);
             setShowRecording(false);
             removeAudioRecordingFromMap(id);
@@ -37127,14 +37135,14 @@ var AudioRecord = function AudioRecord(_ref) {
                 file: file,
                 objectUrl: objectUrl,
                 thumb: waveform,
-                dur: audioBuffer.duration
+                dur: durationInt
               });
             }
             var audioRecording = {
               file: file,
               objectUrl: objectUrl,
               thumb: waveform,
-              dur: audioBuffer.duration
+              dur: durationInt
             };
             setAudioRecordingToMap(id, audioRecording);
             if (draft) {
@@ -37167,29 +37175,39 @@ var AudioRecord = function AudioRecord(_ref) {
     }
   };
   React.useEffect(function () {
-    var MAX_RECORDER_TIME = 1800;
     var recordingInterval = null;
+    var backupTimeout = null;
     if (recording) {
-      setTimeout(function () {
-        recordingInterval = setInterval(function () {
-          setCurrentTime(function (prevState) {
-            if (prevState.recordingSeconds === MAX_RECORDER_TIME) {
-              clearInterval(recordingInterval);
-              stopRecording(false, currentChannelId, false, recorder);
-              return 0;
-            }
-            return prevState + 1;
-          });
-        }, 1000);
-      }, 150);
-    } else clearInterval(recordingInterval);
+      backupTimeout = setTimeout(function () {
+        stopRecording(false, currentChannelId, false, recorder);
+      }, (maxRecordingDuration + 0.5) * 1000);
+      recordingInterval = setInterval(function () {
+        setCurrentTime(function (prevState) {
+          if (prevState >= maxRecordingDuration) {
+            clearInterval(recordingInterval);
+            clearTimeout(backupTimeout);
+            stopRecording(false, currentChannelId, false, recorder);
+            return 0;
+          }
+          return prevState + 1;
+        });
+      }, 1000);
+    } else {
+      clearInterval(recordingInterval);
+      clearTimeout(backupTimeout);
+    }
     return function () {
       if (sendingInterval) {
         clearInterval(sendingInterval);
       }
-      clearInterval(recordingInterval);
+      if (recordingInterval) {
+        clearInterval(recordingInterval);
+      }
+      if (backupTimeout) {
+        clearTimeout(backupTimeout);
+      }
     };
-  }, [recording]);
+  }, [recording, maxRecordingDuration]);
   React.useEffect(function () {
     if (currentRecordedFile) {
       _initWaveSurfer();
@@ -37518,7 +37536,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     _ref3$voiceMessage = _ref3.voiceMessage,
     voiceMessage = _ref3$voiceMessage === void 0 ? true : _ref3$voiceMessage,
     placeholderText = _ref3.placeholderText,
-    placeholderTextColor = _ref3.placeholderTextColor;
+    placeholderTextColor = _ref3.placeholderTextColor,
+    audioRecordingMaxDuration = _ref3.audioRecordingMaxDuration;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
@@ -38417,10 +38436,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                 upload: true,
                 size: recordedFile.file.size,
                 attachmentUrl: recordedFile.objectUrl,
-                metadata: {
+                metadata: JSON.stringify({
                   tmb: recordedFile.thumb,
                   dur: recordedFile.dur
-                },
+                }),
                 type: attachmentTypes.voice
               }],
               type: 'text'
@@ -38969,7 +38988,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     sendRecordedFile: sendRecordedFile,
     setShowRecording: setShowRecording,
     showRecording: showRecording,
-    channelId: activeChannel.id
+    channelId: activeChannel.id,
+    maxRecordingDuration: audioRecordingMaxDuration
   }))))))))));
 };
 var SendMessageWrapper = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: relative;\n  z-index: 15;\n"])), function (props) {

package/index.modern.js

@@ -20659,7 +20659,8 @@ var SceytChat = function SceytChat(_ref) {
     autoSelectFirstChannel = _ref$autoSelectFirstC === void 0 ? false : _ref$autoSelectFirstC,
     memberCount = _ref.memberCount,
     _ref$disableFrowardMe = _ref.disableFrowardMentionsCount,
-    disableFrowardMentionsCount = _ref$disableFrowardMe === void 0 ? false : _ref$disableFrowardMe;
+    disableFrowardMentionsCount = _ref$disableFrowardMe === void 0 ? false : _ref$disableFrowardMe,
+    chatMinWidth = _ref.chatMinWidth;
   var _useColor = useColors(),
     backgroundColor = _useColor[THEME_COLORS.BACKGROUND],
     highlightedBackground = _useColor[THEME_COLORS.HIGHLIGHTED_BACKGROUND];
@@ -20874,12 +20875,13 @@ var SceytChat = function SceytChat(_ref) {
     withChannelsList: channelsListWidth && channelsListWidth > 0,
     backgroundColor: backgroundColor,
     highlightedBackground: highlightedBackground,
-    id: 'sceyt_chat_container'
+    id: 'sceyt_chat_container',
+    chatMinWidth: chatMinWidth
   }, children)) : '');
 };
 var Container = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 100vh;\n"])));
 var ChatContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 100%;\n  max-height: 100vh;\n  min-width: ", ";\n  background-color: ", ";\n\n  /* Global highlighted background styles */\n  ::selection {\n    background-color: ", ";\n  }\n\n  ::-moz-selection {\n    background-color: ", ";\n  }\n\n  /* For text selection highlighting */\n  *::selection {\n    background-color: ", ";\n  }\n\n  *::-moz-selection {\n    background-color: ", ";\n  }\n"])), function (props) {
-  return props.withChannelsList && '1200px';
+  return props.withChannelsList && (props.chatMinWidth || '1200px');
 }, function (props) {
   return props.backgroundColor;
 }, function (props) {
@@ -20914,7 +20916,8 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
     _ref$logLevel = _ref.logLevel,
     logLevel = _ref$logLevel === void 0 ? 'silent' : _ref$logLevel,
     memberCount = _ref.memberCount,
-    disableFrowardMentionsCount = _ref.disableFrowardMentionsCount;
+    disableFrowardMentionsCount = _ref.disableFrowardMentionsCount,
+    chatMinWidth = _ref.chatMinWidth;
   useEffect(function () {
     log.setLevel(logLevel);
   }, []);
@@ -20940,7 +20943,8 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
     autoSelectFirstChannel: autoSelectFirstChannel,
     channelTypeFilter: channelTypeFilter,
     memberCount: memberCount,
-    disableFrowardMentionsCount: disableFrowardMentionsCount
+    disableFrowardMentionsCount: disableFrowardMentionsCount,
+    chatMinWidth: chatMinWidth
   }));
 };
 
@@ -31607,7 +31611,7 @@ var MessageStatusAndTimeContainer = styled.span(_templateObject3$o || (_template
 }, function (props) {
   return props.bottomOfMessage && props.rtlDirection && 'flex-end';
 }, HiddenMessageTime, function (props) {
-  return props.withAttachment ? props.messageTimeColorOnAttachment : '';
+  return props.withAttachment && !props.fileAttachment ? props.messageTimeColorOnAttachment : '';
 }, function (props) {
   return props.withAttachment && "\n    position: absolute;\n    z-index: 10;\n    right: " + (props.fileAttachment ? '6px' : '10px') + ";\n    bottom: " + (props.fileAttachment ? '9px' : '14px') + ";\n  ";
 });
@@ -32286,13 +32290,13 @@ var MessageBody = function MessageBody(_ref) {
     messageTimeVisible: !!messageTimeVisible,
     messageStatusVisible: !!messageStatusVisible,
     leftMargin: true,
-    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary
+    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textSecondary
   })) : null), notLinkAttachment && messageStatusAndTimePosition === 'onMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
     messageStatusDisplayingType: messageStatusDisplayingType,
     messageStatusSize: messageStatusSize,
-    messageStatusColor: message.attachments[0].type !== 'voice' && message.attachments[0].type !== 'file' ? textOnPrimary : messageStateColor || textSecondary,
+    messageStatusColor: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : messageStateColor || textSecondary,
     messageReadStatusColor: messageReadStatusColor,
     messageStateFontSize: messageStateFontSize,
     messageStateColor: messageStateColor,
@@ -32304,7 +32308,7 @@ var MessageBody = function MessageBody(_ref) {
     withAttachment: withAttachments,
     leftMargin: true,
     fileAttachment: withAttachments && (message.attachments[0].type === 'file' || message.attachments[0].type === 'voice'),
-    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary
+    messageTimeColorOnAttachment: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : textSecondary
   })), withAttachments && message.attachments.map(function (attachment) {
     return /*#__PURE__*/React__default.createElement(Attachment$1, {
       key: attachment.tid || attachment.url,
@@ -36750,11 +36754,14 @@ function SvgRecordButton(props) {
 
 var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i;
 var shouldDraw = false;
+var DEFAULT_MAX_RECORDING_DURATION = 600;
 var AudioRecord = function AudioRecord(_ref) {
   var sendRecordedFile = _ref.sendRecordedFile,
     setShowRecording = _ref.setShowRecording,
     showRecording = _ref.showRecording,
-    channelId = _ref.channelId;
+    channelId = _ref.channelId,
+    _ref$maxRecordingDura = _ref.maxRecordingDuration,
+    maxRecordingDuration = _ref$maxRecordingDura === void 0 ? DEFAULT_MAX_RECORDING_DURATION : _ref$maxRecordingDura;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
@@ -37109,12 +37116,13 @@ var AudioRecord = function AudioRecord(_ref) {
           }
           setStartRecording(false);
           var objectUrl = URL.createObjectURL(blob);
+          var durationInt = Math.round(audioBuffer.duration);
           if (send) {
             sendRecordedFile({
               file: file,
               objectUrl: objectUrl,
               thumb: waveform,
-              dur: audioBuffer.duration
+              dur: durationInt
             }, id);
             setShowRecording(false);
             removeAudioRecordingFromMap(id);
@@ -37125,14 +37133,14 @@ var AudioRecord = function AudioRecord(_ref) {
                 file: file,
                 objectUrl: objectUrl,
                 thumb: waveform,
-                dur: audioBuffer.duration
+                dur: durationInt
               });
             }
             var audioRecording = {
               file: file,
               objectUrl: objectUrl,
               thumb: waveform,
-              dur: audioBuffer.duration
+              dur: durationInt
             };
             setAudioRecordingToMap(id, audioRecording);
             if (draft) {
@@ -37165,29 +37173,39 @@ var AudioRecord = function AudioRecord(_ref) {
     }
   };
   useEffect(function () {
-    var MAX_RECORDER_TIME = 1800;
     var recordingInterval = null;
+    var backupTimeout = null;
     if (recording) {
-      setTimeout(function () {
-        recordingInterval = setInterval(function () {
-          setCurrentTime(function (prevState) {
-            if (prevState.recordingSeconds === MAX_RECORDER_TIME) {
-              clearInterval(recordingInterval);
-              stopRecording(false, currentChannelId, false, recorder);
-              return 0;
-            }
-            return prevState + 1;
-          });
-        }, 1000);
-      }, 150);
-    } else clearInterval(recordingInterval);
+      backupTimeout = setTimeout(function () {
+        stopRecording(false, currentChannelId, false, recorder);
+      }, (maxRecordingDuration + 0.5) * 1000);
+      recordingInterval = setInterval(function () {
+        setCurrentTime(function (prevState) {
+          if (prevState >= maxRecordingDuration) {
+            clearInterval(recordingInterval);
+            clearTimeout(backupTimeout);
+            stopRecording(false, currentChannelId, false, recorder);
+            return 0;
+          }
+          return prevState + 1;
+        });
+      }, 1000);
+    } else {
+      clearInterval(recordingInterval);
+      clearTimeout(backupTimeout);
+    }
     return function () {
       if (sendingInterval) {
         clearInterval(sendingInterval);
       }
-      clearInterval(recordingInterval);
+      if (recordingInterval) {
+        clearInterval(recordingInterval);
+      }
+      if (backupTimeout) {
+        clearTimeout(backupTimeout);
+      }
     };
-  }, [recording]);
+  }, [recording, maxRecordingDuration]);
   useEffect(function () {
     if (currentRecordedFile) {
       _initWaveSurfer();
@@ -37516,7 +37534,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     _ref3$voiceMessage = _ref3.voiceMessage,
     voiceMessage = _ref3$voiceMessage === void 0 ? true : _ref3$voiceMessage,
     placeholderText = _ref3.placeholderText,
-    placeholderTextColor = _ref3.placeholderTextColor;
+    placeholderTextColor = _ref3.placeholderTextColor,
+    audioRecordingMaxDuration = _ref3.audioRecordingMaxDuration;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
@@ -38415,10 +38434,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                 upload: true,
                 size: recordedFile.file.size,
                 attachmentUrl: recordedFile.objectUrl,
-                metadata: {
+                metadata: JSON.stringify({
                   tmb: recordedFile.thumb,
                   dur: recordedFile.dur
-                },
+                }),
                 type: attachmentTypes.voice
               }],
               type: 'text'
@@ -38967,7 +38986,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     sendRecordedFile: sendRecordedFile,
     setShowRecording: setShowRecording,
     showRecording: showRecording,
-    channelId: activeChannel.id
+    channelId: activeChannel.id,
+    maxRecordingDuration: audioRecordingMaxDuration
   }))))))))));
 };
 var SendMessageWrapper = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: relative;\n  z-index: 15;\n"])), function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.7.3-beta.4",
+  "version": "1.7.4-beta.1",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",