stream-chat-react 12.15.0 → 12.15.2

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 = "12.15.0";
+        const version = "12.15.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/DialogManager.js

@@ -1,3 +1,4 @@
+import { nanoid } from 'nanoid';
 import { StateStore } from 'stream-chat';
 /**
  * Keeps a map of Dialog objects.
@@ -14,7 +15,7 @@ export class DialogManager {
         this.state = new StateStore({
             dialogsById: {},
         });
-        this.id = id ?? new Date().getTime().toString();
+        this.id = id ?? nanoid();
     }
     get openDialogCount() {
         return Object.values(this.state.getLatestValue().dialogsById).reduce((count, dialog) => {

package/dist/components/MessageInput/AttachmentSelector.js

@@ -1,5 +1,4 @@
-import { nanoid } from 'nanoid';
-import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { UploadIcon as DefaultUploadIcon } from './icons';
 import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
@@ -10,11 +9,12 @@ import { Portal } from '../Portal/Portal';
 import { UploadFileInput } from '../ReactFileUtilities';
 import { useChannelStateContext, useComponentContext, useMessageInputContext, useTranslationContext, } from '../../context';
 import { AttachmentSelectorContextProvider, useAttachmentSelectorContext, } from '../../context/AttachmentSelectorContext';
+import { useStableId } from '../UtilityComponents/useStableId';
 export const SimpleAttachmentSelector = () => {
     const { AttachmentSelectorInitiationButtonContents, FileUploadIcon = DefaultUploadIcon, } = useComponentContext();
     const inputRef = useRef(null);
     const [labelElement, setLabelElement] = useState(null);
-    const id = useMemo(() => nanoid(), []);
+    const id = useStableId();
     useEffect(() => {
         if (!labelElement)
             return;

package/dist/components/MessageInput/MessageInput.js

@@ -9,6 +9,7 @@ import { useComponentContext, } from '../../context/ComponentContext';
 import { MessageInputContextProvider } from '../../context/MessageInputContext';
 import { DialogManagerProvider } from '../../context';
 import { useRegisterDropHandlers } from './WithDragAndDropUpload';
+import { useStableId } from '../UtilityComponents/useStableId';
 const MessageInputProvider = (props) => {
     const cooldownTimerState = useCooldownTimer();
     const messageInputState = useMessageInputState(props);
@@ -27,10 +28,11 @@ const UnMemoizedMessageInput = (props) => {
     const { Input: PropInput } = props;
     const { dragAndDropWindow } = useChannelStateContext();
     const { Input: ContextInput, TriggerProvider = DefaultTriggerProvider } = useComponentContext('MessageInput');
+    const id = useStableId();
     const Input = PropInput || ContextInput || MessageInputFlat;
     const dialogManagerId = props.isThreadInput
-        ? 'message-input-dialog-manager-thread'
-        : 'message-input-dialog-manager';
+        ? `message-input-dialog-manager-thread-${id}`
+        : `message-input-dialog-manager-${id}`;
     if (dragAndDropWindow)
         return (React.createElement(DialogManagerProvider, { id: dialogManagerId },
             React.createElement(TriggerProvider, null,

package/dist/components/MessageInput/hooks/useSubmitHandler.js

@@ -38,9 +38,13 @@ export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrich
         if (someAttachmentsUploading) {
             return addNotification(t('Wait until all attachments have uploaded'), 'error');
         }
-        const attachmentsFromUploads = attachments
-            .filter((att) => att.localMetadata?.uploadState !== 'failed' ||
-            (findAndEnqueueURLsToEnrich && !att.og_scrape_url))
+        const attachmentsWithoutLinkPreviews = attachments
+            .filter((att) => {
+            const isSuccessfulUpload = att.localMetadata?.uploadState === 'finished';
+            const isNotUpload = !att.localMetadata?.uploadState;
+            const isNotLinkPreview = !att.og_scrape_url;
+            return isNotLinkPreview && (isSuccessfulUpload || isNotUpload);
+        })
             .map((localAttachment) => {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const { localMetadata: _, ...attachment } = localAttachment;
@@ -56,8 +60,7 @@ export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrich
             attachmentsFromLinkPreviews = someLinkPreviewsLoading
                 ? []
                 : Array.from(linkPreviews.values())
-                    .filter((linkPreview) => linkPreview.state === LinkPreviewState.LOADED &&
-                    !attachmentsFromUploads.find((attFromUpload) => attFromUpload.og_scrape_url === linkPreview.og_scrape_url))
+                    .filter((linkPreview) => linkPreview.state === LinkPreviewState.LOADED)
                     .map(
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 ({ state: linkPreviewState, ...ogAttachment }) => ogAttachment);
@@ -66,7 +69,10 @@ export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrich
                 (!someLinkPreviewsLoading && attachmentsFromLinkPreviews.length > 0) ||
                     someLinkPreviewsDismissed;
         }
-        const newAttachments = [...attachmentsFromUploads, ...attachmentsFromLinkPreviews];
+        const newAttachments = [
+            ...attachmentsWithoutLinkPreviews,
+            ...attachmentsFromLinkPreviews,
+        ];
         // Instead of checking if a user is still mentioned every time the text changes,
         // just filter out non-mentioned users before submit, which is cheaper
         // and allows users to easily undo any accidental deletion

package/dist/components/MessageList/MessageList.js

@@ -17,6 +17,7 @@ import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
 import { defaultPinPermissions, MESSAGE_ACTIONS } from '../Message/utils';
 import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
 import { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';
+import { useStableId } from '../UtilityComponents/useStableId';
 import { defaultRenderMessages } from './renderMessages';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, } from '../../constants/limits';
 const MessageListWithContext = (props) => {
@@ -123,10 +124,11 @@ const MessageListWithContext = (props) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [highlightedMessageId]);
+    const id = useStableId();
     const showEmptyStateIndicator = elements.length === 0 && !threadList;
     const dialogManagerId = threadList
-        ? 'message-list-dialog-manager-thread'
-        : 'message-list-dialog-manager';
+        ? `message-list-dialog-manager-thread-${id}`
+        : `message-list-dialog-manager-${id}`;
     return (React.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } },
         React.createElement(MessageListMainPanel, null,
             React.createElement(DialogManagerProvider, { id: dialogManagerId },

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -21,6 +21,7 @@ import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext, } from '../../context/ComponentContext';
 import { VirtualizedMessageListContextProvider } from '../../context/VirtualizedMessageListContext';
 import { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';
+import { useStableId } from '../UtilityComponents/useStableId';
 function captureResizeObserverExceededError(e) {
     if (e.message === 'ResizeObserver loop completed with undelivered notifications.' ||
         e.message === 'ResizeObserver loop limit exceeded') {
@@ -194,11 +195,12 @@ const VirtualizedMessageListWithContext = (props) => {
             clearTimeout(scrollTimeout);
         };
     }, [highlightedMessageId, processedMessages]);
+    const id = useStableId();
     if (!processedMessages)
         return null;
     const dialogManagerId = threadList
-        ? 'virtualized-message-list-dialog-manager-thread'
-        : 'virtualized-message-list-dialog-manager';
+        ? `virtualized-message-list-dialog-manager-thread-${id}`
+        : `virtualized-message-list-dialog-manager-${id}`;
     return (React.createElement(VirtualizedMessageListContextProvider, { value: { scrollToBottom } },
         React.createElement(MessageListMainPanel, null,
             React.createElement(DialogManagerProvider, { id: dialogManagerId },

package/dist/components/Poll/PollActions/PollResults/PollResults.js

@@ -7,7 +7,7 @@ import { useStateStore } from '../../../../store';
 import { usePollContext, useTranslationContext } from '../../../../context';
 const pollStateSelector = (nextValue) => ({
     name: nextValue.name,
-    options: nextValue.options,
+    options: [...nextValue.options],
     vote_counts_by_option: nextValue.vote_counts_by_option,
 });
 export const PollResults = ({ close, }) => {

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

@@ -64,8 +64,9 @@ export const PollCreationDialog = ({ close }) => {
                         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: multipleAnswerCountError }),
                             React.createElement("input", { id: 'max_votes_allowed', onChange: (e) => {
-                                    const isValidValue = !e.target.value ||
-                                        e.target.value.match(VALID_MAX_VOTES_VALUE_REGEX);
+                                    const isValidValue = e.target.validity.valid &&
+                                        (!e.target.value ||
+                                            e.target.value.match(VALID_MAX_VOTES_VALUE_REGEX));
                                     if (!isValidValue) {
                                         setMultipleAnswerCountError(t('Type a number from 2 to 10'));
                                     }

package/dist/components/UtilityComponents/useStableId.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The ID is generated using the `nanoid` library and is memoized to ensure
+ * that it remains the same across renders unless the key changes.
+ */
+export declare const useStableId: (key?: string) => string;

package/dist/components/UtilityComponents/useStableId.js

@@ -0,0 +1,11 @@
+import { nanoid } from 'nanoid';
+import { useMemo } from 'react';
+/**
+ * The ID is generated using the `nanoid` library and is memoized to ensure
+ * that it remains the same across renders unless the key changes.
+ */
+export const useStableId = (key) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const id = useMemo(() => nanoid(), [key]);
+    return id;
+};