stream-chat-react 13.2.0 → 13.2.2

package/dist/components/Channel/Channel.js

@@ -98,7 +98,9 @@ const ChannelInner = (props) => {
             }
             else {
                 const markReadResponse = await channel.markRead();
-                if (updateChannelUiUnreadState && markReadResponse) {
+                //  markReadResponse.event can be null in case of a user that is not a member of a channel being marked read
+                // in that case event is null and we should not set unread UI
+                if (updateChannelUiUnreadState && markReadResponse?.event) {
                     _setChannelUnreadUiState({
                         last_read: lastRead.current,
                         last_read_message_id: markReadResponse.event.last_read_message_id,

package/dist/components/ChannelList/ChannelList.d.ts

@@ -11,6 +11,7 @@ import type { ChatContextValue } from '../../context';
 import type { ChannelAvatarProps } from '../Avatar';
 import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { PaginatorProps } from '../../types/types';
+import type { LoadingErrorIndicatorProps } from '../Loading';
 export type ChannelListProps = {
     /** Additional props for underlying ChannelSearch component and channel search controller, [available props](https://getstream.io/chat/docs/sdk/react/utility-components/channel_search/#props) */
     additionalChannelSearchProps?: Omit<ChannelSearchProps, 'setChannels'>;
@@ -40,7 +41,7 @@ export type ChannelListProps = {
     /** Custom UI component to display the container for the queried channels, defaults to and accepts same props as: [ChannelListMessenger](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListMessenger.tsx) */
     List?: React.ComponentType<ChannelListMessengerProps>;
     /** Custom UI component to display the loading error indicator, defaults to component that renders null */
-    LoadingErrorIndicator?: React.ComponentType;
+    LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
     /** Custom UI component to display the loading state, defaults to and accepts same props as: [LoadingChannels](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingChannels.tsx) */
     LoadingIndicator?: React.ComponentType;
     /** When true, channels won't dynamically sort by most recent message */

package/dist/components/ChannelList/ChannelListMessenger.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { PropsWithChildren } from 'react';
 import type { APIErrorResponse, Channel, ErrorFromResponse } from 'stream-chat';
+import type { LoadingErrorIndicatorProps } from '../Loading';
 export type ChannelListMessengerProps = {
     /** Whether the channel query request returned an errored response */
     error: ErrorFromResponse<APIErrorResponse> | null;
@@ -9,7 +10,7 @@ export type ChannelListMessengerProps = {
     /** Whether the channels are currently loading */
     loading?: boolean;
     /** Custom UI component to display the loading error indicator, defaults to component that renders null */
-    LoadingErrorIndicator?: React.ComponentType;
+    LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
     /** Custom UI component to display a loading indicator, defaults to and accepts same props as: [LoadingChannels](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingChannels.tsx) */
     LoadingIndicator?: React.ComponentType;
     /** Local state hook that resets the currently loaded channels */

package/dist/components/ChannelList/ChannelListMessenger.js

@@ -9,7 +9,7 @@ export const ChannelListMessenger = (props) => {
     const { children, error = null, loading, LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels, } = props;
     const { t } = useTranslationContext('ChannelListMessenger');
     if (error) {
-        return React.createElement(LoadingErrorIndicator, null);
+        return React.createElement(LoadingErrorIndicator, { error: error });
     }
     if (loading) {
         return React.createElement(LoadingIndicator, null);

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.2.0";
+        const version = "13.2.2";
         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/Dialog/FormDialog.js

@@ -71,6 +71,6 @@ export const FormDialog = ({ className, close, fields, onSubmit, shouldDisableSu
                     }),
                     React.createElement(FieldError, { text: fieldErrors[id]?.message })))),
                 React.createElement("div", { className: 'str-chat__dialog__controls' },
-                    React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel', onClick: close }, t('Cancel')),
+                    React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel', onClick: close, type: 'button' }, t('Cancel')),
                     React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--submit', disabled: Object.keys(fieldErrors).length > 0 || shouldDisableSubmitButton?.(value), type: 'submit' }, t('Send')))))));
 };

package/dist/components/Loading/LoadingErrorIndicator.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type LoadingErrorIndicatorProps = {
     /** Error object */
-    error?: Error;
+    error?: Error | null;
 };
 export declare const LoadingErrorIndicator: ({ error }: LoadingErrorIndicatorProps) => React.JSX.Element | null;

package/dist/components/Message/renderText/renderText.d.ts

@@ -16,4 +16,4 @@ export type RenderTextOptions = {
     getRehypePlugins?: RenderTextPluginConfigurator;
     getRemarkPlugins?: RenderTextPluginConfigurator;
 };
-export declare const renderText: (text?: string, mentionedUsers?: UserResponse[], { allowedTagNames, customMarkDownRenderers, getRehypePlugins, getRemarkPlugins, }?: RenderTextOptions) => React.JSX.Element | null;
+export declare const renderText: (text?: string, mentionedUsers?: UserResponse[], { allowedTagNames, customMarkDownRenderers, getRehypePlugins, getRemarkPlugins, }?: RenderTextOptions) => React.JSX.Element | null | undefined;

package/dist/components/Message/renderText/renderText.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
 import { find } from 'linkifyjs';
-import uniqBy from 'lodash.uniqby';
 import remarkGfm from 'remark-gfm';
 import { Anchor, Emoji, Mention } from './componentRenderers';
-import { detectHttp, escapeRegExp, matchMarkdownLinks, messageCodeBlocks } from './regex';
+import { detectHttp, matchMarkdownLinks, messageCodeBlocks } from './regex';
 import { emojiMarkdownPlugin, mentionsMarkdownPlugin } from './rehypePlugins';
 import { htmlToTextPlugin, keepLineBreaksPlugin } from './remarkPlugins';
 import { ErrorBoundary } from '../../UtilityComponents';
@@ -67,8 +66,12 @@ export const renderText = (text, mentionedUsers, { allowedTagNames = defaultAllo
     let newText = text;
     const markdownLinks = matchMarkdownLinks(newText);
     const codeBlocks = messageCodeBlocks(newText);
-    // extract all valid links/emails within text and replace it with proper markup
-    uniqBy([...find(newText, 'email'), ...find(newText, 'url')], 'value').forEach(({ href, type, value }) => {
+    // Extract all valid links/emails within text and replace it with proper markup
+    // Revert the link order to avoid getting out of sync of the original start and end positions of links
+    // - due to the addition of new characters when creating Markdown links
+    const links = [...find(newText, 'email'), ...find(newText, 'url')];
+    for (let i = links.length - 1; i >= 0; i--) {
+        const { end, href, start, type, value } = links[i];
         const linkIsInBlock = codeBlocks.some((block) => block?.includes(value));
         // check if message is already  markdown
         const noParsingNeeded = markdownLinks &&
@@ -77,7 +80,7 @@ export const renderText = (text, mentionedUsers, { allowedTagNames = defaultAllo
                 const strippedText = text?.replace(detectHttp, '');
                 if (!strippedHref || !strippedText)
                     return false;
-                return (strippedHref.includes(strippedText) || strippedText.includes(strippedHref));
+                return strippedHref.includes(strippedText) || strippedText.includes(strippedHref);
             });
         if (noParsingNeeded.length > 0 || linkIsInBlock)
             return;
@@ -87,24 +90,30 @@ export const renderText = (text, mentionedUsers, { allowedTagNames = defaultAllo
             // in that case, we check whether the found e-mail is actually a mention
             // by naively checking for an existence of @ sign in front of it.
             if (type === 'email' && mentionedUsers) {
-                const emailMatchesWithName = mentionedUsers.some((u) => u.name === value);
+                const emailMatchesWithName = mentionedUsers.find((u) => u.name === value);
                 if (emailMatchesWithName) {
-                    newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), (match, position) => {
-                        const isMention = newText.charAt(position - 1) === '@';
-                        // in case of mention, we leave the match in its original form,
-                        // and we let `mentionsMarkdownPlugin` to do its job
-                        return isMention ? match : `[${match}](${encodeDecode(href)})`;
-                    });
-                    return;
+                    // FIXME: breaks if the mention symbol is not '@'
+                    const isMention = newText.charAt(start - 1) === '@';
+                    // in case of mention, we leave the match in its original form,
+                    // and we let `mentionsMarkdownPlugin` to do its job
+                    newText =
+                        newText.slice(0, start) +
+                            (isMention ? value : `[${value}](${encodeDecode(href)})`) +
+                            newText.slice(end);
                 }
             }
-            const displayLink = type === 'email' ? value : formatUrlForDisplay(href);
-            newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), `[${displayLink}](${encodeDecode(href)})`);
+            else {
+                const displayLink = type === 'email' ? value : formatUrlForDisplay(href);
+                newText =
+                    newText.slice(0, start) +
+                        `[${displayLink}](${encodeDecode(href)})` +
+                        newText.slice(end);
+            }
         }
         catch (e) {
             void e;
         }
-    });
+    }
     const remarkPlugins = [
         htmlToTextPlugin,
         keepLineBreaksPlugin,

package/dist/components/MessageInput/EditMessageForm.js

@@ -28,7 +28,7 @@ export const EditMessageForm = () => {
     return (React.createElement("form", { autoComplete: 'off', className: 'str-chat__edit-message-form', onSubmit: handleSubmit },
         React.createElement(MessageInputFlat, null),
         React.createElement("div", { className: 'str-chat__edit-message-form-options' },
-            React.createElement("button", { className: 'str-chat__edit-message-cancel', "data-testid": 'cancel-button', onClick: cancel }, t('Cancel')),
+            React.createElement("button", { className: 'str-chat__edit-message-cancel', "data-testid": 'cancel-button', onClick: cancel, type: 'button' }, t('Cancel')),
             React.createElement(EditMessageFormSendButton, null))));
 };
 export const EditMessageModal = ({ additionalMessageInputProps, }) => {
@@ -40,5 +40,5 @@ export const EditMessageModal = ({ additionalMessageInputProps, }) => {
         messageComposer.restore();
     }, [clearEditingState, messageComposer]);
     return (React.createElement(Modal, { className: 'str-chat__edit-message-modal', onClose: onEditModalClose, open: true },
-        React.createElement(MessageInput, { clearEditingState: clearEditingState, hideSendButton: true, Input: EditMessageInput, ...additionalMessageInputProps })));
+        React.createElement(MessageInput, { clearEditingState: clearEditingState, focus: true, hideSendButton: true, Input: EditMessageInput, ...additionalMessageInputProps })));
 };

package/dist/components/MessageInput/MessageInput.js

@@ -25,7 +25,10 @@ const MessageInputProvider = (props) => {
     }, [messageComposer]);
     useEffect(() => {
         const threadId = messageComposer.threadId;
-        if (!threadId || !messageComposer.channel || !messageComposer.compositionIsEmpty)
+        if (!threadId ||
+            !messageComposer.channel ||
+            !messageComposer.compositionIsEmpty ||
+            !messageComposer.config.drafts.enabled)
             return;
         // get draft data for legacy thead composer
         messageComposer.channel.getDraft({ parent_id: threadId }).then(({ draft }) => {

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

@@ -38,5 +38,5 @@ export const MultipleAnswersField = () => {
                                 ? e.target.value
                                 : pollComposer.max_votes_allowed,
                         }, nativeFieldValidation);
-                    }, placeholder: t('Maximum number of votes (from 2 to 10)'), type: 'number', value: max_votes_allowed }))))));
+                    }, placeholder: t('Maximum number of votes (from 2 to 10)'), type: 'text', value: max_votes_allowed }))))));
 };

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

@@ -35,7 +35,8 @@ export const OptionFieldSet = () => {
                                 options: { index: i, text: e.target.value },
                             });
                         }, onKeyUp: (event) => {
-                            if (event.key === 'Enter') {
+                            const isFocusedLastOptionField = i === options.length - 1;
+                            if (event.key === 'Enter' && !isFocusedLastOptionField) {
                                 const nextInputId = options[i + 1].id;
                                 document.getElementById(nextInputId)?.focus();
                             }

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

@@ -10,7 +10,7 @@ export const PollCreationDialogControls = ({ close, }) => {
         React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel', onClick: () => {
                 messageComposer.pollComposer.initState();
                 close();
-            } }, t('Cancel')),
+            }, type: 'button' }, t('Cancel')),
         React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--submit', disabled: !canCreatePoll, onClick: () => {
                 messageComposer
                     .createPoll()

package/dist/components/ReactFileUtilities/UploadButton.js

@@ -20,7 +20,7 @@ export const UploadButton = forwardRef(function UploadButton({ onFileChange, res
 export const FileInput = UploadButton;
 export const UploadFileInput = forwardRef(function UploadFileInput({ className, onFileChange: onFileChangeCustom, ...props }, ref) {
     const { t } = useTranslationContext('UploadFileInput');
-    const { cooldownRemaining } = useMessageInputContext();
+    const { cooldownRemaining, textareaRef } = useMessageInputContext();
     const messageComposer = useMessageComposer();
     const { attachmentManager } = messageComposer;
     const { isUploadEnabled } = useAttachmentManagerState();
@@ -28,7 +28,8 @@ export const UploadFileInput = forwardRef(function UploadFileInput({ className,
     const id = useMemo(() => nanoid(), []);
     const onFileChange = useCallback((files) => {
         attachmentManager.uploadFiles(files);
+        textareaRef.current?.focus();
         onFileChangeCustom?.(files);
-    }, [onFileChangeCustom, attachmentManager]);
+    }, [onFileChangeCustom, attachmentManager, textareaRef]);
     return (React.createElement(FileInput, { accept: acceptedFiles?.join(','), "aria-label": t('aria/File upload'), "data-testid": 'file-input', disabled: !isUploadEnabled || !!cooldownRemaining, id: id, multiple: maxNumberOfFilesPerMessage > 1, ...props, className: clsx('str-chat__file-input', className), onFileChange: onFileChange, ref: ref }));
 });

package/dist/components/TextareaComposer/TextareaComposer.js

@@ -17,6 +17,12 @@ const searchSourceStateSelector = (state) => ({
 const configStateSelector = (state) => ({
     enabled: state.text.enabled,
 });
+const messageComposerStateSelector = (state) => ({
+    quotedMessage: state.quotedMessage,
+});
+const attachmentManagerStateSelector = (state) => ({
+    attachments: state.attachments,
+});
 /**
  * isComposing prevents double submissions in Korean and other languages.
  * starting point for a read:
@@ -27,7 +33,7 @@ const defaultShouldSubmit = (event) => event.key === 'Enter' && !event.shiftKey
 export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, containerClassName, listClassName, maxRows: maxRowsProp, minRows: minRowsProp, onBlur, onChange, onKeyDown, onScroll, onSelect, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restTextareaProps }) => {
     const { t } = useTranslationContext();
     const { AutocompleteSuggestionList = DefaultSuggestionList } = useComponentContext();
-    const { additionalTextareaProps, cooldownRemaining, handleSubmit, maxRows: maxRowsContext, minRows: minRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef, } = useMessageInputContext();
+    const { additionalTextareaProps, cooldownRemaining, focus, handleSubmit, maxRows: maxRowsContext, minRows: minRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef, } = useMessageInputContext();
     const maxRows = maxRowsProp ?? maxRowsContext ?? 1;
     const minRows = minRowsProp ?? minRowsContext;
     const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
@@ -36,6 +42,8 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
     const { textComposer } = messageComposer;
     const { selection, suggestions, text } = useStateStore(textComposer.state, textComposerStateSelector);
     const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
+    const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateSelector);
+    const { attachments } = useStateStore(messageComposer.attachmentManager.state, attachmentManagerStateSelector);
     const { isLoadingItems } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
     const containerRef = useRef(null);
     const [focusedItemIndex, setFocusedItemIndex] = useState(0);
@@ -149,11 +157,30 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
             setFocusedItemIndex(0);
         }
     }, [textComposer.suggestions]);
+    useEffect(() => {
+        const textareaIsFocused = textareaRef.current?.matches(':focus');
+        if (!textareaRef.current || textareaIsFocused || !focus)
+            return;
+        textareaRef.current.focus();
+    }, [attachments, focus, quotedMessage, textareaRef]);
+    useEffect(() => {
+        /**
+         * The textarea value has to be overridden outside the render cycle so that the events like compositionend can be triggered.
+         * If we have overridden the value during the component rendering, the compositionend event would not be triggered, and
+         * it would not be possible to type composed characters (ô).
+         * On the other hand, just removing the value override via prop (value={text}) would not allow us to change the text based on
+         * middleware results (e.g. replace characters with emojis)
+         */
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        textarea.value = text;
+    }, [textareaRef, text]);
     return (React.createElement("div", { className: clsx('rta', 'str-chat__textarea str-chat__message-textarea-react-host', containerClassName, {
             ['rta--loading']: isLoadingItems,
         }), ref: containerRef },
         React.createElement(Textarea, { ...additionalTextareaProps, ...restTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: clsx('rta__textarea', 'str-chat__textarea__textarea str-chat__message-textarea', className), "data-testid": 'message-input', disabled: !enabled || !!cooldownRemaining, maxRows: maxRows, minRows: minRows, onBlur: onBlur, onChange: changeHandler, onCompositionEnd: onCompositionEnd, onCompositionStart: onCompositionStart, onKeyDown: keyDownHandler, onPaste: onPaste, onScroll: scrollHandler, onSelect: setSelectionDebounced, placeholder: placeholder || t('Type your message'), ref: (ref) => {
                 textareaRef.current = ref;
-            }, value: text }),
+            } }),
         !isComposing && (React.createElement(AutocompleteSuggestionList, { className: listClassName, closeOnClickOutside: closeSuggestionsOnClickOutside, focusedItemIndex: focusedItemIndex, setFocusedItemIndex: setFocusedItemIndex }))));
 };