fix: extend dialogManagerId's with dictinct strings (#2696)

Rendering two Channel components side by side would result in inability
to open any type of a dialog (rendered by default SDK components) in the
other window.

This PR adds unique strings to existing dialog manager ID's to prevent
UI clashes.

Fixes: #2685
Fixes: #2682

Author: arnautov-anton

src/components/Dialog/DialogManager.ts

@@ -1,3 +1,4 @@
+import { nanoid } from 'nanoid';
 import { StateStore } from 'stream-chat';
 
 export type GetOrCreateDialogParams = {
@@ -43,7 +44,7 @@ export class DialogManager {
   });
 
   constructor({ id }: DialogManagerOptions = {}) {
-    this.id = id ?? new Date().getTime().toString();
+    this.id = id ?? nanoid();
   }
 
   get openDialogCount() {

src/components/Dialog/DialogPortal.tsx

@@ -19,7 +19,7 @@ export const DialogPortalDestination = () => {
           '--str-chat__dialog-overlay-height': openedDialogCount > 0 ? '100%' : '0',
         } as React.CSSProperties
       }
-    ></div>
+    />
   );
 };
 

src/components/Dialog/__tests__/DialogsManager.test.js

@@ -1,4 +1,5 @@
 import { DialogManager } from '../DialogManager';
+import * as nanoid from 'nanoid';
 
 const dialogId = 'dialogId';
 
@@ -10,11 +11,9 @@ describe('DialogManager', () => {
   });
 
   it('initiates with default options', () => {
-    const mockedId = '12345';
-    const spy = jest.spyOn(Date.prototype, 'getTime').mockReturnValueOnce(mockedId);
+    jest.spyOn(nanoid, 'nanoid').mockReturnValue('mockedId');
     const dialogManager = new DialogManager();
-    expect(dialogManager.id).toBe(mockedId);
-    spy.mockRestore();
+    expect(dialogManager.id).toBe('mockedId');
   });
 
   it('creates a new closed dialog', () => {

src/components/MessageInput/AttachmentSelector.tsx

@@ -1,6 +1,4 @@
-import { nanoid } from 'nanoid';
-import type { ElementRef } from 'react';
-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';
@@ -20,15 +18,16 @@ import {
   AttachmentSelectorContextProvider,
   useAttachmentSelectorContext,
 } from '../../context/AttachmentSelectorContext';
+import { useStableId } from '../UtilityComponents/useStableId';
 
 export const SimpleAttachmentSelector = () => {
   const {
     AttachmentSelectorInitiationButtonContents,
     FileUploadIcon = DefaultUploadIcon,
   } = useComponentContext();
-  const inputRef = useRef<ElementRef<'input'>>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const [labelElement, setLabelElement] = useState<HTMLLabelElement | null>(null);
-  const id = useMemo(() => nanoid(), []);
+  const id = useStableId();
 
   useEffect(() => {
     if (!labelElement) return;
@@ -189,7 +188,7 @@ export const AttachmentSelector = ({
   const closeModal = useCallback(() => setModalContentActionAction(undefined), []);
 
   const [fileInput, setFileInput] = useState<HTMLInputElement | null>(null);
-  const menuButtonRef = useRef<ElementRef<'button'>>(null);
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
 
   const getDefaultPortalDestination = useCallback(
     () => document.getElementById(CHANNEL_CONTAINER_ID),

src/components/MessageInput/MessageInput.tsx

@@ -10,6 +10,7 @@ import type { ComponentContextValue } from '../../context/ComponentContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { MessageInputContextProvider } from '../../context/MessageInputContext';
 import { DialogManagerProvider } from '../../context';
+import { useStableId } from '../UtilityComponents/useStableId';
 
 import type { LocalMessage, Message, SendMessageOptions } from 'stream-chat';
 
@@ -134,10 +135,12 @@ const UnMemoizedMessageInput = (props: MessageInputProps) => {
 
   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 (
     <DialogManagerProvider id={dialogManagerId}>

src/components/MessageList/MessageList.tsx

@@ -29,6 +29,7 @@ import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
 import { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';
 
 import { defaultRenderMessages } from './renderMessages';
+import { useStableId } from '../UtilityComponents/useStableId';
 
 import type { LocalMessage } from 'stream-chat';
 import type { MessageRenderer } from './renderMessages';
@@ -215,10 +216,13 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
     // 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 (
     <MessageListContextProvider value={{ listElement, scrollToBottom }}>
       <MessageListMainPanel>

src/components/MessageList/VirtualizedMessageList.tsx

@@ -66,6 +66,7 @@ import type {
 } from 'stream-chat';
 import type { UnknownType } from '../../types/types';
 import { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';
+import { useStableId } from '../UtilityComponents/useStableId';
 
 type PropsDrilledToMessage =
   | 'additionalMessageInputProps'
@@ -437,11 +438,13 @@ const VirtualizedMessageListWithContext = (
     };
   }, [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 (
     <VirtualizedMessageListContextProvider value={{ scrollToBottom }}>

src/components/MessageList/__tests__/VirtualizedMessageList.test.js

@@ -1,5 +1,6 @@
 import React, { act } from 'react';
 import { cleanup, render } from '@testing-library/react';
+import * as nanoid from 'nanoid';
 
 import '@testing-library/jest-dom';
 
@@ -75,6 +76,8 @@ describe('VirtualizedMessageList', () => {
 
   it('should render the list without any message', async () => {
     const { channel, client } = await createChannel(true);
+    jest.spyOn(nanoid, 'nanoid').mockReturnValue('mockedId');
+
     let result;
     await act(() => {
       result = render(

src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap

@@ -55,7 +55,7 @@ exports[`VirtualizedMessageList should render the list without any message 1`] =
         </div>
         <div
           class="str-chat__dialog-overlay"
-          data-str-chat__portal-id="virtualized-message-list-dialog-manager"
+          data-str-chat__portal-id="virtualized-message-list-dialog-manager-mockedId"
           data-testid="str-chat__dialog-overlay"
           style="--str-chat__dialog-overlay-height: 0;"
         />

src/components/UtilityComponents/useStableId.ts

@@ -0,0 +1,13 @@
+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?: string) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const id = useMemo(() => nanoid(), [key]);
+
+  return id;
+};