stream-chat-react 13.0.3 → 13.0.4

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.0.3";
+        const version = "13.0.4";
         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 { useAttachmentManagerState } from './hooks/useAttachmentManagerState';
 import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
@@ -11,11 +10,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

@@ -7,6 +7,7 @@ import { useMessageInputControls } from './hooks/useMessageInputControls';
 import { useComponentContext } from '../../context/ComponentContext';
 import { MessageInputContextProvider } from '../../context/MessageInputContext';
 import { DialogManagerProvider } from '../../context';
+import { useStableId } from '../UtilityComponents/useStableId';
 import { useRegisterDropHandlers } from './WithDragAndDropUpload';
 const MessageInputProvider = (props) => {
     const cooldownTimerState = useCooldownTimer();
@@ -39,10 +40,11 @@ const MessageInputProvider = (props) => {
 const UnMemoizedMessageInput = (props) => {
     const { Input: PropInput } = props;
     const { Input: ContextInput } = 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}`;
     return (React.createElement(DialogManagerProvider, { id: dialogManagerId },
         React.createElement(MessageInputProvider, { ...props },
             React.createElement(Input, null))));

package/dist/components/MessageList/MessageList.js

@@ -18,6 +18,7 @@ import { defaultPinPermissions, MESSAGE_ACTIONS } from '../Message/utils';
 import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
 import { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';
 import { defaultRenderMessages } from './renderMessages';
+import { useStableId } from '../UtilityComponents/useStableId';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, } from '../../constants/limits';
 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
@@ -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/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;
+};