stream-chat-react 13.12.0 → 13.13.1

package/dist/components/Attachment/AttachmentActions.js

@@ -1,13 +1,18 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslationContext } from '../../context';
 const UnMemoizedAttachmentActions = (props) => {
     const { actionHandler, actions, id, text } = props;
     const { t } = useTranslationContext('UnMemoizedAttachmentActions');
     const handleActionClick = (event, name, value) => actionHandler?.(name, value, event);
+    const knownActionText = useMemo(() => ({
+        Cancel: t('Cancel'),
+        Send: t('Send'),
+        Shuffle: t('Shuffle'),
+    }), [t]);
     return (React.createElement("div", { className: 'str-chat__message-attachment-actions' },
         React.createElement("div", { className: 'str-chat__message-attachment-actions-form' },
             React.createElement("span", null, text),
-            actions.map((action) => (React.createElement("button", { className: `str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`, "data-testid": `${action.name}`, "data-value": action.value, key: `${id}-${action.value}`, onClick: (event) => handleActionClick(event, action.name, action.value) }, action.text ? t(action.text) : null))))));
+            actions.map((action) => (React.createElement("button", { className: `str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`, "data-testid": `${action.name}`, "data-value": action.value, key: `${id}-${action.value}`, onClick: (event) => handleActionClick(event, action.name, action.value) }, action.text ? (knownActionText[action.text] ?? t(action.text)) : null))))));
 };
 /**
  * A component for rendering the actions you can take on an attachment.

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.12.0";
+        const version = "13.13.1";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/Message/ReminderNotification.js

@@ -18,11 +18,11 @@ export const ReminderNotification = ({ reminder }) => {
             React.createElement("span", null, " | "),
             React.createElement("span", null, isBehindRefreshBoundary
                 ? t('Due since {{ dueSince }}', {
-                    dueSince: t(`timestamp/ReminderNotification`, {
+                    dueSince: t('timestamp/ReminderNotification', {
                         timestamp: reminder.remindAt,
                     }),
                 })
-                : t(`Due {{ timeLeft }}`, {
+                : t('Due {{ timeLeft }}', {
                     timeLeft: t('duration/Message reminder', {
                         milliseconds: timeLeftMs,
                     }),

package/dist/components/Message/hooks/useMuteHandler.js

@@ -20,7 +20,7 @@ export const useMuteHandler = (message, notifications = {}) => {
                 const successMessage = getSuccessNotification &&
                     validateAndGetMessage(getSuccessNotification, [message.user]);
                 notify(successMessage ||
-                    t(`{{ user }} has been muted`, {
+                    t('{{ user }} has been muted', {
                         user: message.user.name || message.user.id,
                     }), 'success');
             }
@@ -33,7 +33,7 @@ export const useMuteHandler = (message, notifications = {}) => {
         else {
             try {
                 await client.unmuteUser(message.user.id);
-                const fallbackMessage = t(`{{ user }} has been unmuted`, {
+                const fallbackMessage = t('{{ user }} has been unmuted', {
                     user: message.user.name || message.user.id,
                 });
                 const successMessage = (getSuccessNotification &&

package/dist/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { isLocalAttachment, isLocalAudioAttachment, isLocalFileAttachment, isLocalImageAttachment, isLocalVideoAttachment, isLocalVoiceRecordingAttachment, isScrapedContent, } from 'stream-chat';
 import { UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview } from './UnsupportedAttachmentPreview';
 import { VoiceRecordingPreview as DefaultVoiceRecordingPreview } from './VoiceRecordingPreview';
-import { FileAttachmentPreview as DefaultFilePreview } from './FileAttachmentPreview';
+import DefaultFilePreview from './FileAttachmentPreview';
 import { ImageAttachmentPreview as DefaultImagePreview } from './ImageAttachmentPreview';
 import { useAttachmentsForPreview, useMessageComposer } from '../hooks';
 import { GeolocationPreview as DefaultGeolocationPreview, } from './GeolocationPreview';

package/dist/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import type { LocalAudioAttachment, LocalFileAttachment, LocalVideoAttachment } from 'stream-chat';
 import type { UploadAttachmentPreviewProps } from './types';
 export type FileAttachmentPreviewProps<CustomLocalMetadata = unknown> = UploadAttachmentPreviewProps<LocalFileAttachment<CustomLocalMetadata> | LocalAudioAttachment<CustomLocalMetadata> | LocalVideoAttachment<CustomLocalMetadata>>;
-export declare const FileAttachmentPreview: ({ attachment, handleRetry, removeAttachments, }: FileAttachmentPreviewProps) => React.JSX.Element;
+declare const FileAttachmentPreview: ({ attachment, handleRetry, removeAttachments, }: FileAttachmentPreviewProps) => React.JSX.Element;
+export default FileAttachmentPreview;

package/dist/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslationContext } from '../../../context';
 import { FileIcon } from '../../ReactFileUtilities';
 import { CloseIcon, DownloadIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
-export const FileAttachmentPreview = ({ attachment, handleRetry, removeAttachments, }) => {
+const FileAttachmentPreview = ({ attachment, handleRetry, removeAttachments, }) => {
     const { t } = useTranslationContext('FilePreview');
     const uploadState = attachment.localMetadata?.uploadState;
     return (React.createElement("div", { className: 'str-chat__attachment-preview-file', "data-testid": 'attachment-preview-file' },
@@ -11,7 +11,7 @@ export const FileAttachmentPreview = ({ attachment, handleRetry, removeAttachmen
         React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: uploadState === 'uploading', onClick: () => attachment.localMetadata?.id &&
                 removeAttachments([attachment.localMetadata?.id]), type: 'button' },
             React.createElement(CloseIcon, null)),
-        ['blocked', 'failed'].includes(uploadState) && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => {
+        ['blocked', 'failed'].includes(uploadState) && !!handleRetry && (React.createElement("button", { "aria-label": t('aria/Retry upload'), className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => {
                 handleRetry(attachment);
             } },
             React.createElement(RetryIcon, null))),
@@ -22,3 +22,4 @@ export const FileAttachmentPreview = ({ attachment, handleRetry, removeAttachmen
                 React.createElement(DownloadIcon, null))),
             uploadState === 'uploading' && React.createElement(LoadingIndicatorIcon, { size: 17 }))));
 };
+export default FileAttachmentPreview;

package/dist/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.js

@@ -15,7 +15,7 @@ export const ImageAttachmentPreview = ({ attachment, handleRetry, removeAttachme
         }), "data-testid": 'attachment-preview-image' },
         React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'image-preview-item-delete-button', disabled: uploadState === 'uploading', onClick: () => id && removeAttachments([id]), type: 'button' },
             React.createElement(CloseIcon, null)),
-        ['blocked', 'failed'].includes(uploadState) && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-image', "data-testid": 'image-preview-item-retry-button', onClick: () => handleRetry(attachment) },
+        ['blocked', 'failed'].includes(uploadState) && (React.createElement("button", { "aria-label": t('aria/Retry upload'), className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-image', "data-testid": 'image-preview-item-retry-button', onClick: () => handleRetry(attachment) },
             React.createElement(RetryIcon, null))),
         uploadState === 'uploading' && (React.createElement("div", { className: 'str-chat__attachment-preview-image-loading' },
             React.createElement(LoadingIndicatorIcon, { size: 17 }))),

package/dist/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.js

@@ -30,7 +30,7 @@ export const VoiceRecordingPreview = ({ attachment, handleRetry, removeAttachmen
         React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata.id]), type: 'button' },
             React.createElement(CloseIcon, null)),
         ['blocked', 'failed'].includes(attachment.localMetadata?.uploadState) &&
-            !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => handleRetry(attachment) },
+            !!handleRetry && (React.createElement("button", { "aria-label": t('aria/Retry upload'), className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => handleRetry(attachment) },
             React.createElement(RetryIcon, null))),
         React.createElement("div", { className: 'str-chat__attachment-preview-metadata' },
             React.createElement("div", { className: 'str-chat__attachment-preview-file-name', title: attachment.title }, attachment.title),

package/dist/components/MessageInput/SendButton.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { SendIcon } from './icons';
 import { useMessageComposerHasSendableData } from './hooks';
+import { useTranslationContext } from '../../context';
 export const SendButton = ({ sendMessage, ...rest }) => {
+    const { t } = useTranslationContext();
     const hasSendableData = useMessageComposerHasSendableData();
-    return (React.createElement("button", { "aria-label": 'Send', className: 'str-chat__send-button', "data-testid": 'send-button', disabled: !hasSendableData, onClick: sendMessage, type: 'button', ...rest },
+    return (React.createElement("button", { "aria-label": t('aria/Send'), className: 'str-chat__send-button', "data-testid": 'send-button', disabled: !hasSendableData, onClick: sendMessage, type: 'button', ...rest },
         React.createElement(SendIcon, null)));
 };

package/dist/components/MessageList/MessageList.js

@@ -25,9 +25,8 @@ const MessageListWithContext = (props) => {
     const { channel, channelUnreadUiState, disableDateSeparator = false, groupStyles, hasMoreNewer = false, headerPosition, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, internalInfiniteScrollProps: { threshold: loadMoreScrollThreshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ...restInternalInfiniteScrollProps } = {}, jumpToLatestMessage = () => Promise.resolve(), loadMore: loadMoreCallback, loadMoreNewer: loadMoreNewerCallback, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     maxTimeBetweenGroupedMessages, messageActions = Object.keys(MESSAGE_ACTIONS), messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages = [], noGroupByUser = false, notifications, pinPermissions = defaultPinPermissions, reactionDetailsSort, renderMessages = defaultRenderMessages, returnAllReadData = false, reviewProcessedMessage, showUnreadNotificationAlways, sortReactionDetails, sortReactions, suppressAutoscroll, threadList = false, unsafeHTML = false, } = props;
     const [listElement, setListElement] = React.useState(null);
-    const [ulElement, setUlElement] = React.useState(null);
     const { customClasses } = useChatContext('MessageList');
-    const { EmptyStateIndicator = DefaultEmptyStateIndicator, LoadingIndicator = DefaultLoadingIndicator, MessageListMainPanel = DefaultMessageListMainPanel, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, TypingIndicator = DefaultTypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, } = useComponentContext('MessageList');
+    const { EmptyStateIndicator = DefaultEmptyStateIndicator, LoadingIndicator = DefaultLoadingIndicator, MessageListMainPanel = DefaultMessageListMainPanel, MessageListNotifications = DefaultMessageListNotifications, MessageListWrapper = 'ul', MessageNotification = DefaultMessageNotification, TypingIndicator = DefaultTypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, } = useComponentContext('MessageList');
     const { hasNewMessages, isMessageListScrolledToBottom, onScroll, scrollToBottom, wrapperRect, } = useScrollLocationLogic({
         hasMoreNewer,
         listElement,
@@ -125,7 +124,7 @@ const MessageListWithContext = (props) => {
     }, [scrollToBottom, hasMoreNewer]);
     React.useLayoutEffect(() => {
         if (highlightedMessageId) {
-            const element = ulElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
+            const element = listElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
             element?.scrollIntoView({ block: 'center' });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -135,12 +134,16 @@ const MessageListWithContext = (props) => {
     const dialogManagerId = threadList
         ? `message-list-dialog-manager-thread-${id}`
         : `message-list-dialog-manager-${id}`;
-    return (React.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } },
+    return (React.createElement(MessageListContextProvider, { value: {
+            listElement,
+            processedMessages: enrichedMessages,
+            scrollToBottom,
+        } },
         React.createElement(MessageListMainPanel, null,
             React.createElement(DialogManagerProvider, { id: dialogManagerId },
                 !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
                 React.createElement("div", { className: clsx(messageListClass, customClasses?.threadList), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React.createElement(EmptyStateIndicator, { listType: threadList ? 'thread' : 'message' })) : (React.createElement(InfiniteScroll, { className: 'str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React.createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React.createElement(LoadingIndicator, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore, threshold: loadMoreScrollThreshold, ...restInternalInfiniteScrollProps },
-                    React.createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),
+                    React.createElement(MessageListWrapper, { className: 'str-chat__ul' }, elements),
                     React.createElement(TypingIndicator, { threadList: threadList }),
                     React.createElement("div", { key: 'bottom' })))))),
         React.createElement(MessageListNotifications, { hasNewMessages: hasNewMessages, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottomFromNotification, threadList: threadList, unreadCount: threadList ? undefined : channelUnreadUiState?.unread_messages })));

package/dist/components/MessageList/renderMessages.js

@@ -5,24 +5,24 @@ import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
 import { EventComponent as DefaultMessageSystem } from '../EventComponent';
 import { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from './UnreadMessagesSeparator';
 export function defaultRenderMessages({ channelUnreadUiState, components, customClasses, lastOwnMessage, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, ownMessagesDeliveredToOthers, readData, sharedMessageProps: messageProps, }) {
-    const { DateSeparator = DefaultDateSeparator, HeaderComponent, MessageSystem = DefaultMessageSystem, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, } = components;
+    const { DateSeparator = DefaultDateSeparator, HeaderComponent, MessageListItem = 'li', MessageSystem = DefaultMessageSystem, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, } = components;
     const renderedMessages = [];
     let firstMessage;
     let previousMessage = undefined;
     for (let index = 0; index < messages.length; index++) {
         const message = messages[index];
         if (isDateSeparatorMessage(message)) {
-            renderedMessages.push(React.createElement("li", { key: `${message.date.toISOString()}-i` },
+            renderedMessages.push(React.createElement(MessageListItem, { "data-index": index, key: `${message.date.toISOString()}-i` },
                 React.createElement(DateSeparator, { date: message.date, formatDate: messageProps.formatDate, unread: message.unread })));
         }
         else if (isIntroMessage(message)) {
             if (HeaderComponent) {
-                renderedMessages.push(React.createElement("li", { key: 'intro' },
+                renderedMessages.push(React.createElement(MessageListItem, { "data-index": index, key: 'intro' },
                     React.createElement(HeaderComponent, null)));
             }
         }
         else if (message.type === 'system') {
-            renderedMessages.push(React.createElement("li", { "data-message-id": message.id, key: message.id || message.created_at.toISOString() },
+            renderedMessages.push(React.createElement(MessageListItem, { "data-index": index, "data-message-id": message.id, key: message.id || message.created_at.toISOString() },
                 React.createElement(MessageSystem, { message: message })));
         }
         else {
@@ -41,9 +41,9 @@ export function defaultRenderMessages({ channelUnreadUiState, components, custom
                 unreadMessageCount: channelUnreadUiState?.unread_messages,
             });
             renderedMessages.push(React.createElement(Fragment, { key: message.id || message.created_at.toISOString() },
-                isFirstUnreadMessage && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
+                isFirstUnreadMessage && UnreadMessagesSeparator && (React.createElement(MessageListItem, { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
                     React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState?.unread_messages }))),
-                React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass },
+                React.createElement(MessageListItem, { className: messageClass, "data-index": index, "data-message-id": message.id, "data-testid": messageClass },
                     React.createElement(Message, { deliveredTo: ownMessagesDeliveredToOthers[message.id] || [], groupStyles: [groupStyles], lastOwnMessage: lastOwnMessage, lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], ...messageProps }))));
             previousMessage = message;
         }

package/dist/components/Poll/PollCreationDialog/MultipleAnswersField.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { SimpleSwitchField } from '../../Form/SwitchField';
 import { FieldError } from '../../Form/FieldError';
 import { useTranslationContext } from '../../../context';
@@ -14,6 +14,10 @@ export const MultipleAnswersField = () => {
     const { t } = useTranslationContext();
     const { pollComposer } = useMessageComposer();
     const { enforce_unique_vote, error, max_votes_allowed } = useStateStore(pollComposer.state, pollComposerStateSelector);
+    const knownValidationErrors = useMemo(() => ({
+        'Enforce unique vote is enabled': t('Enforce unique vote is enabled'),
+        'Type a number from 2 to 10': t('Type a number from 2 to 10'),
+    }), [t]);
     return (React.createElement("div", { className: clsx('str-chat__form__expandable-field', {
             'str-chat__form__expandable-field--expanded': !enforce_unique_vote,
         }) },
@@ -24,7 +28,7 @@ export const MultipleAnswersField = () => {
                 'str-chat__form__input-field--has-error': error,
             }) },
             React.createElement("div", { className: clsx('str-chat__form__input-field__value') },
-                React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-max-votes-allowed-input-field-error', text: error && t(error) }),
+                React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-max-votes-allowed-input-field-error', text: error && (knownValidationErrors[error] ?? t('Error')) }),
                 React.createElement("input", { id: 'max_votes_allowed', onBlur: () => {
                         pollComposer.handleFieldBlur('max_votes_allowed');
                     }, onChange: (e) => {

package/dist/components/Poll/PollCreationDialog/NameField.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import clsx from 'clsx';
 import { FieldError } from '../../Form/FieldError';
 import { useTranslationContext } from '../../../context';
@@ -12,12 +12,15 @@ export const NameField = () => {
     const { t } = useTranslationContext();
     const { pollComposer } = useMessageComposer();
     const { error, name } = useStateStore(pollComposer.state, pollComposerStateSelector);
+    const knownValidationErrors = useMemo(() => ({
+        'Question is required': t('Question is required'),
+    }), [t]);
     return (React.createElement("div", { className: clsx('str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label', {
             'str-chat__form__input-field--has-error': error,
         }) },
         React.createElement("label", { className: 'str-chat__form__field-label', htmlFor: 'name' }, t('Question')),
         React.createElement("div", { className: clsx('str-chat__form__input-field__value') },
-            React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-name-input-field-error', text: error && t(error) }),
+            React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-name-input-field-error', text: error && (knownValidationErrors[error] ?? t('Error')) }),
             React.createElement("input", { id: 'name', onBlur: () => {
                     pollComposer.handleFieldBlur('name');
                 }, onChange: (e) => {

package/dist/components/Poll/PollCreationDialog/OptionFieldSet.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { FieldError } from '../../Form/FieldError';
 import { DragAndDropContainer } from '../../DragAndDrop/DragAndDropContainer';
 import { useTranslationContext } from '../../../context';
@@ -13,6 +13,10 @@ export const OptionFieldSet = () => {
     const { pollComposer } = useMessageComposer();
     const { errors, options } = useStateStore(pollComposer.state, pollComposerStateSelector);
     const { t } = useTranslationContext('OptionFieldSet');
+    const knownValidationErrors = useMemo(() => ({
+        'Option already exists': t('Option already exists'),
+        'Option is empty': t('Option is empty'),
+    }), [t]);
     const onSetNewOrder = useCallback((newOrder) => {
         const prevOptions = pollComposer.options;
         pollComposer.updateFields({ options: newOrder.map((index) => prevOptions[index]) });
@@ -27,7 +31,7 @@ export const OptionFieldSet = () => {
                     'str-chat__form__input-field--has-error': error,
                 }), key: `new-poll-option-${i}` },
                 React.createElement("div", { className: 'str-chat__form__input-field__value' },
-                    React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-option-input-field-error', text: error && t(error) }),
+                    React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-option-input-field-error', text: error && (knownValidationErrors[error] ?? t('Error')) }),
                     React.createElement("input", { id: option.id, onBlur: () => {
                             pollComposer.handleFieldBlur('options');
                         }, onChange: (e) => {

package/dist/components/TextareaComposer/SuggestionList/CommandItem.js

@@ -1,11 +1,29 @@
+import { useMemo } from 'react';
 import React from 'react';
+import { useTranslationContext } from '../../../context';
 export const CommandItem = (props) => {
+    const { t } = useTranslationContext();
     const { entity } = props;
+    const knownArgsTranslations = useMemo(() => ({
+        ban: t('ban-command-args'),
+        giphy: t('giphy-command-args'),
+        mute: t('mute-command-args'),
+        unban: t('unban-command-args'),
+        unmute: t('unmute-command-args'),
+    }), [t]);
+    const knownDescriptionTranslations = useMemo(() => ({
+        ban: t('ban-command-description'),
+        giphy: t('giphy-command-description'),
+        mute: t('mute-command-description'),
+        unban: t('unban-command-description'),
+        unmute: t('unmute-command-description'),
+    }), [t]);
     return (React.createElement("div", { className: 'str-chat__slash-command' },
         React.createElement("span", { className: 'str-chat__slash-command-header' },
             React.createElement("strong", null, entity.name),
-            " ",
-            entity.args),
+            ' ',
+            entity.args && (knownArgsTranslations[entity.name ?? ''] ?? t(entity.args))),
         React.createElement("br", null),
-        React.createElement("span", { className: 'str-chat__slash-command-description' }, entity.description)));
+        React.createElement("span", { className: 'str-chat__slash-command-description' }, entity.description &&
+            (knownDescriptionTranslations[entity.name ?? ''] ?? t(entity.description)))));
 };

package/dist/context/ComponentContext.d.ts

@@ -178,6 +178,10 @@ export type ComponentContextValue = {
     UnreadMessagesSeparator?: React.ComponentType<UnreadMessagesSeparatorProps>;
     /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
     VirtualMessage?: React.ComponentType<FixedHeightMessageProps>;
+    /** Custom UI component to wrap MessageList children. Default is the `ul` tag */
+    MessageListWrapper?: React.ComponentType<PropsWithChildren>;
+    /** Custom UI component to wrap each element of MessageList. Default is the `li` tag */
+    MessageListItem?: React.ComponentType<PropsWithChildren>;
 };
 export declare const ComponentContext: React.Context<ComponentContextValue>;
 export declare const ComponentProvider: ({ children, value, }: PropsWithChildren<{

package/dist/context/MessageListContext.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import type { PropsWithChildren } from 'react';
+import type { RenderedMessage } from '../components';
 export type MessageListContextValue = {
+    /** Enriched message list, including date separators and intro message (if enabled) */
+    processedMessages: RenderedMessage[];
     /** The scroll container within which the messages and typing indicator are rendered */
     listElement: HTMLDivElement | null;
     /** Function that scrolls the `listElement` to the bottom. */