stream-chat-react 13.13.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.13.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/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)))));
 };