feat: improve structure of message UI for copying (#476)

Before:
* The words inside messages were kept in separate spans
* Which would lead to unfavourable formatting when pasted

After:
* Export MessageProvider, a simple provider to avoid prop drilling into Messages
Note - this is still in works, but the props will remain
```
export type MessageProviderProps = {
  children: React.ReactNode;
  message: BaseMessage;
  isByMe?: boolean;
}

import { MessageProvider, useMessageContext } from '@sendbird/uikit-react/Message/context'
```
Incase if you were using MessageComponents and see error message
`useMessageContext must be used within a MessageProvider `
 use: `<MessageProvider message={message}><CustomMessage /></MessageProvider>`
* Implement a Provider/Module to improve customization of messages
	* This is still in progress, not exported yet
	* In the future, we can add information such as ->
		* Menu render options, edit, delete callbacks etc
		* This will improve the customizability and remove some prop drilling in Messages
* Remove span between simple strings
* Urls and Mentions will still be wrapped in spans(for formatting)
* Apply new logic & components(TextFragment) to tokenize strings
* Improve keys used in rendering inside message,
	* UUIDs are not the optimal way to improve rendering
	* Create a composite key with message updated at
* Refactor usePaste hook to make mentions work ~
* Fix overflow of long strings
* Deprecate `Word` and `convertWordToStringObj`

fixes:
https://sendbird.atlassian.net/browse/UIKIT-3400
https://sendbird.atlassian.net/browse/UIKIT-3561

Author: Sravan S

.storybook/preview-head.html

@@ -7,6 +7,8 @@
 
     const modalRoot = document.createElement('div');
     modalRoot.setAttribute('id', 'sendbird-modal-root');
+    modalRoot.style.position = 'fixed';
+    modalRoot.style.zIndex = '99999999999';
     body.appendChild(modalRoot);
   });
 </script>

exports.js

@@ -102,6 +102,9 @@ export default {
   'MessageSearch/context': 'src/smart-components/MessageSearch/context/MessageSearchProvider.tsx',
   'MessageSearch/components/MessageSearchUI': 'src/smart-components/MessageSearch/components/MessageSearchUI/index.tsx',
 
+  // Message
+  'Message/context': 'src/smart-components/Message/context/index.tsx',
+
   // Thread
   Thread: 'src/smart-components/Thread/index.tsx',
   'Thread/context': 'src/smart-components/Thread/context/ThreadProvider.tsx',

scripts/index_d_ts

@@ -938,6 +938,16 @@ declare module "SendbirdUIKitGlobal" {
     onCloseClick?: () => void;
   }
 
+  /**
+   * Message
+   */
+  export interface MessageProviderProps {
+    message: BaseMessage;
+    isByMe?: boolean;
+    children?: React.ReactElement;
+  }
+  export type MessageProviderInterface = Exclude<MessageProviderProps, 'children'>;
+
   /**
    * Thread
    */
@@ -1558,6 +1568,15 @@ declare module '@sendbird/uikit-react/MessageSearch/components/MessageSearchUI'
   export default MessageSearchUI;
 }
 
+/**
+ * Message
+ */
+declare module '@sendbird/uikit-react/Message/context' {
+  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  export const useMessageContext: () => SendbirdUIKitGlobal.MessageProviderInterface;
+  export const MessageProvider: React.FC<SendbirdUIKitGlobal.MessageProviderProps>;
+}
+
 /**
  * Thread
  */

src/lib/hooks/__tests__/schedulerFactory.spec.ts

@@ -6,7 +6,7 @@ import { LoggerFactory } from '../../Logger';
 jest.useFakeTimers();
 jest.spyOn(global, 'setInterval');
 
-const logger = LoggerFactory('all');
+const logger = LoggerFactory('info');
 
 describe('schedulerFactory', () => {
   it('should return a scheduler with push and clear methods', () => {

src/smart-components/Channel/components/MessageList/index.tsx

@@ -14,6 +14,8 @@ import FrozenNotification from '../FrozenNotification';
 import { SCROLL_BUFFER } from '../../../../utils/consts';
 import { EveryMessage } from '../../../..';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
+import { UserMessage } from '@sendbird/chat/message';
+import { MessageProvider } from '../../../Message/context/MessageProvider';
 
 export interface MessageListProps {
   className?: string;
@@ -51,11 +53,11 @@ const MessageList: React.FC<MessageListProps> = ({
     loading,
     unreadSince,
   } = useChannelContext();
+  const store = useSendbirdStateContext();
   const [scrollBottom, setScrollBottom] = useState(0);
   const allMessagesFiltered = (typeof filterMessageList === 'function')
     ? allMessages.filter((filterMessageList as (message: EveryMessage) => boolean))
     : allMessages;
-  const store = useSendbirdStateContext();
   const markAsReadScheduler = store.config.markAsReadScheduler;
 
   const onScroll = (e) => {
@@ -165,17 +167,19 @@ const MessageList: React.FC<MessageListProps> = ({
               currentMessage: m,
               currentChannel: currentGroupChannel,
             });
+            const isByMe = (m as UserMessage)?.sender?.userId === store?.config?.userId;
             return (
-              <Message
-                key={m?.messageId}
-                handleScroll={handleScroll}
-                renderMessage={renderMessage}
-                message={m}
-                hasSeparator={hasSeparator}
-                chainTop={chainTop}
-                chainBottom={chainBottom}
-                renderCustomSeparator={renderCustomSeparator}
-              />
+              <MessageProvider message={m} key={m?.messageId} isByMe={isByMe}>
+                <Message
+                  handleScroll={handleScroll}
+                  renderMessage={renderMessage}
+                  message={m}
+                  hasSeparator={hasSeparator}
+                  chainTop={chainTop}
+                  chainBottom={chainBottom}
+                  renderCustomSeparator={renderCustomSeparator}
+                />
+              </MessageProvider>
             );
           })}
           {/* show frozen notifications */}

src/smart-components/ChannelList/components/ChannelListUI/index.tsx

@@ -1,6 +1,6 @@
 import './channel-list-ui.scss';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import type { GroupChannel, Member, SendbirdGroupChat } from '@sendbird/chat/groupChannel';
 import type { User } from '@sendbird/chat';
 

src/smart-components/Message/README.md

@@ -0,0 +1,23 @@
+# Message Module
+
+When we first started UIKit, messages were a simple component that was used to display a file/text message.
+As we started to build more complex applications, we realized that we needed a more robust way to display messages.
+The Message module was created to address this need.
+
+We plan to deprecate other message components in the future(UIKit@v4) and replace them with the Message module.
+
+For now, we will keep the old message components and the new Message module in parallel. And try to add new components to the Message module.
+
+Message
+  -> UserMessage
+    -> NotificationMessage / TemplateMessage
+  -> FileMessage
+    -> ThumbnailMessage(image/video)
+    -> VoiceMessage
+    -> FileMessage(others)
+  -> AdminMessage
+
+A UserMessage can have 3 components.
+-> Simple Text
+-> Mention
+-> OGMessage

src/smart-components/Message/components/TextFragment/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { UserMessage } from '@sendbird/chat/message';
+
+import { TOKEN_TYPES, Token } from '../../utils/tokens/types'
+import { useMessageContext } from '../../context/MessageProvider';
+import { keyGenerator } from '../../utils/tokens/keyGenerator';
+import MentionLabel from '../../../../ui/MentionLabel';
+import { USER_MENTION_PREFIX } from '../../consts';
+import LinkLabel from '../../../../ui/LinkLabel';
+import { LabelTypography } from '../../../../ui//Label';
+
+export type TextFragmentProps = {
+  tokens: Token[];
+}
+
+export default function TextFragment({
+  tokens,
+}: TextFragmentProps): React.ReactElement {
+  const messageStore = useMessageContext();
+
+  const message = messageStore?.message as UserMessage;
+  const isByMe = messageStore?.isByMe;
+  const { updatedAt, createdAt } = message;
+  return (
+    <>
+      {
+        tokens?.map((token, idx) => {
+          const key = keyGenerator(createdAt, updatedAt, idx);
+          switch (token.type) {
+            case TOKEN_TYPES.mention:
+              return (
+                <span className="sendbird-word" key={key}>
+                  <MentionLabel
+                    mentionTemplate={USER_MENTION_PREFIX}
+                    mentionedUserId={token.userId}
+                    mentionedUserNickname={token.value}
+                    isByMe={isByMe}
+                  />
+                </span>
+              );
+            case TOKEN_TYPES.url:
+              return (
+                <span className='sendbird-word' key={key}>
+                  <LinkLabel
+                    className="sendbird-word__url"
+                    src={token.value}
+                    type={LabelTypography.BODY_1}
+                  >
+                    {token.value}
+                  </LinkLabel>
+                </span>
+              );
+            case TOKEN_TYPES.string:
+            default:
+              return (
+                <React.Fragment key={key}>{token.value}</React.Fragment>
+              );
+          }
+        })
+      }
+    </>
+  );
+}

src/smart-components/Message/consts.ts

@@ -0,0 +1 @@
+export const USER_MENTION_PREFIX = "@";

src/smart-components/Message/context/MessageProvider.tsx

@@ -0,0 +1,45 @@
+// todo@v4.0.0: combine with the provider in core-ts, see:
+// https://github.com/sendbird/sendbird-uikit-core-ts
+// packages/react-uikit-message-template-view/src/context/MessageContextProvider.tsx
+import React from 'react';
+import { BaseMessage } from '@sendbird/chat/message';
+
+export type MessageProviderProps = {
+  children: React.ReactNode;
+  message: BaseMessage;
+  isByMe?: boolean;
+}
+
+export type MessageProviderInterface = Exclude<MessageProviderProps, 'children'>;
+
+const MessageContext = React.createContext(undefined);
+
+const MessageProvider: React.FC<MessageProviderInterface> = (props: MessageProviderProps) => {
+  const {
+    children,
+    message,
+    isByMe = false,
+  } = props;
+
+  return (
+    <MessageContext.Provider value={{
+      message,
+      isByMe,
+    }}>
+      {children}
+    </MessageContext.Provider>
+  );
+}
+
+const useMessageContext = (): MessageProviderInterface => {
+  const value = React.useContext(MessageContext);
+  if (value === undefined) {
+    throw new Error('useMessageContext must be used within a MessageProvider');
+  }
+  return value;
+};
+
+export {
+  MessageProvider,
+  useMessageContext,
+};