@tencentcloud/chat-uikit-react 1.2.2 → 2.1.2

package/src/components/Model/styles/layout.scss

@@ -3,9 +3,9 @@
   position: fixed;
   z-index: 2;
   width: 100vw;
-  height: 100vh;
   top: 0;
   left: 0;
+  bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;

package/src/components/Profile/styles/index.scss

@@ -14,6 +14,10 @@
       font-weight: 600;
       margin-left: 10px;
       font-size: 14px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 200px;
+      overflow: hidden;
     }
   }
 }

package/src/components/TUIChat/TUIChat.tsx

@@ -2,6 +2,13 @@ import React, {
   PropsWithChildren, useEffect, useMemo, useReducer, useRef, useState,
 } from 'react';
 import { ChatSDK, Conversation, Message } from '@tencentcloud/chat';
+import TUIChatEngine, {
+  TUIChatService,
+  IMessageModel,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { JSONStringToParse } from '../untils';
 import { useTUIKitContext } from '../../context/TUIKitContext';
 import { TUIChatStateContextProvider } from '../../context/TUIChatStateContext';
 import { TUIChatActionProvider } from '../../context/TUIChatActionContext';
@@ -20,10 +27,8 @@ import type { MessageContextProps } from '../TUIMessage/MessageContext';
 
 import './styles/index.scss';
 import { CONSTANT_DISPATCH_TYPE } from '../../constants';
-import { useMessageReceviedListener } from './hooks/useMessageReceviedListener';
 import { chatReducer, ChatStateReducer, initialState } from './TUIChatState';
 
-import { useCreateMessage } from './hooks/useCreateMessage';
 import { useHandleMessageList } from './hooks/useHandleMessageList';
 import { useHandleMessage } from './hooks/useHandleMessage';
 
@@ -31,7 +36,6 @@ import { TUIChatHeader as TUIChatHeaderElement } from '../TUIChatHeader';
 import { MessageListProps, TUIMessageList } from '../TUIMessageList';
 import { TUIMessageInput as TUIMessageInputElement, TUIMessageInputBasicProps } from '../TUIMessageInput';
 import { EmptyStateIndicator } from '../EmptyStateIndicator';
-import { Toast } from '../Toast';
 
 interface TUIChatProps {
   className?: string,
@@ -44,12 +48,16 @@ interface TUIChatProps {
   InputPlugins?: React.ComponentType<UnknowPorps>,
   InputQuote?: React.ComponentType<UnknowPorps>,
   MessagePlugins?: React.ComponentType<UnknowPorps>,
+  MessageCustomPlugins?: React.ComponentType<UnknowPorps>,
+  MessageTextPlugins?: React.ComponentType<UnknowPorps>,
   onMessageRecevied?: (
     updateMessage: (event?: Array<Message>) => void,
     event: any,
   ) => void,
   sendMessage?: (message:Message, options?:any) => Promise<Message>,
   revokeMessage?: (message:Message) => Promise<Message>,
+  selectedConversation?: (conversation:Conversation) => Promise<Conversation>,
+  filterMessage?: (messageList: Array<IMessageModel>) => Array<IMessageModel>,
   messageConfig?: TUIMessageProps,
   cloudCustomData?: string,
   TUIMessageInputConfig?: TUIMessageInputBasicProps,
@@ -100,20 +108,24 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     InputPlugins,
     MessagePlugins,
     MessageContext,
+    MessageCustomPlugins,
+    MessageTextPlugins,
     InputQuote,
     onMessageRecevied,
     sendMessage: propsSendMessage,
     revokeMessage,
+    selectedConversation,
+    filterMessage,
     messageConfig,
     cloudCustomData,
     TUIMessageInputConfig,
     TUIMessageListConfig,
   } = props;
 
-  const [state, dispatch] = useReducer<ChatStateReducer>(
-    chatReducer,
-    { ...initialState, conversation },
-  );
+  const [state, dispatch] = useReducer<ChatStateReducer>(chatReducer, {
+    ...initialState,
+    conversation,
+  });
 
   const messageListRef = useRef(null);
   const textareaRef = useRef<HTMLTextAreaElement>();
@@ -130,27 +142,14 @@ function TUIChatInner <T extends TUIChatInnerProps>(
   });
 
   const {
-    createTextMessage,
-    createFaceMessage,
-    createImageMessage,
-    createVideoMessage,
-    createFileMessage,
-    createForwardMessage,
-    createCustomMessage,
-    createAudioMessage,
-    createTextAtMessage,
-    createLocationMessage,
-    createMergerMessage,
-  } = useCreateMessage({ chat, conversation, cloudCustomData });
-
-  const {
-    getMessageList,
-    updateMessage,
     editLocalMessage,
-    removeMessage,
     updateUploadPendingMessageList,
   } = useHandleMessageList({
-    chat, conversation, state, dispatch,
+    chat,
+    conversation,
+    state,
+    dispatch,
+    filterMessage,
   });
 
   const {
@@ -158,99 +157,62 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     setAudioSource,
     setVideoSource,
     setHighlightedMessageId,
+    setActiveMessageID,
   } = useHandleMessage({
-    state, dispatch,
+    state,
+    dispatch,
   });
 
-  const sendMessage = async (message: Message, options?:any) => {
-    updateMessage([message]);
-    try {
-      if (propsSendMessage) {
-        await propsSendMessage(message, options);
-      } else {
-        await chat.sendMessage(message, options);
-      }
-      editLocalMessage(message);
-    } catch (error) {
-      Toast({ text: error, type: 'error' });
-      editLocalMessage(message);
-      throw new Error(error);
-    }
+  // 消息 messageList
+  useEffect(() => {
+    TUIStore.watch(StoreName.CHAT, {
+      messageList: onMessageListUpdated,
+      isCompleted: isCompletedUpdated,
+    });
+    return () => {
+      TUIStore.unwatch(StoreName.CHAT, {
+        messageList: onMessageListUpdated,
+        isCompleted: isCompletedUpdated,
+      });
+    };
+  }, []);
+
+  const onMessageListUpdated = (list: IMessageModel[]) => {
+    const messageList = list.filter((message) => !message.isDeleted);
+    dispatch({
+      type: CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST,
+      value: filterMessage ? filterMessage(messageList) : messageList,
+    });
   };
 
-  const loadMore = async () => {
-    if (state.isCompleted) {
+  const isCompletedUpdated = (flag: boolean) => {
+    if (flag) {
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_NO_MORE,
-        value: true,
+        value: flag,
       });
-      return;
-    }
-    const historyMessageData = await getMessageList({
-      nextReqMessageID: state.nextReqMessageID,
-    });
-    if (!historyMessageData) {
-      return;
     }
-    dispatch({
-      type: CONSTANT_DISPATCH_TYPE.SET_HISTORY_MESSAGELIST,
-      value: historyMessageData.data.messageList,
-    });
-    dispatch({
-      type: CONSTANT_DISPATCH_TYPE.SET_IS_COMPLETE,
-      value: historyMessageData.data.isCompleted,
-    });
-    dispatch({
-      type: CONSTANT_DISPATCH_TYPE.SET_NEXT_REQ_MESSAGE_ID,
-      value: historyMessageData.data.nextReqMessageID,
-    });
   };
 
-  useMessageReceviedListener(updateMessage, onMessageRecevied);
+  // 加载历史消息 | Load historical messages
+  const loadMore = async () => {
+    TUIChatService.getMessageList();
+  };
 
-  useEffect(() => {
-    (async () => {
-      const res = await getMessageList();
-      if (!res) {
-        return;
-      }
-      if (res.data.messageList.length > 0) {
-        dispatch({
-          type: CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST,
-          value: res.data.messageList,
-        });
-      }
-      dispatch({
-        type: CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST,
-        value: res.data.messageList,
-      });
+  const setFirstSendMessage = async (message: any) => {
+    if (
+      !(message.type === 'TIMCustomElem' && JSONStringToParse(message.payload.data)?.src === 7)
+      && !state.firstSendMessage
+    ) {
       dispatch({
-        type: CONSTANT_DISPATCH_TYPE.SET_IS_COMPLETE,
-        value: res.data.isCompleted,
+        type: CONSTANT_DISPATCH_TYPE.SET_FIRST_SEND_MESSAGE,
+        value: message,
       });
-      dispatch({
-        type: CONSTANT_DISPATCH_TYPE.SET_NEXT_REQ_MESSAGE_ID,
-        value: res.data.nextReqMessageID,
-      });
-    })();
-  }, [conversation]);
+    }
+  };
 
   const chatActionContextValue: TUIChatActionContextValue = useMemo(
     () => ({
-      sendMessage,
-      removeMessage,
-      updateMessage,
-      createTextMessage,
-      createFaceMessage,
-      createImageMessage,
-      createVideoMessage,
-      createFileMessage,
-      createForwardMessage,
-      createCustomMessage,
-      createAudioMessage,
-      createTextAtMessage,
-      createLocationMessage,
-      createMergerMessage,
       editLocalMessage,
       operateMessage,
       loadMore,
@@ -258,23 +220,11 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       setAudioSource,
       setVideoSource,
       setHighlightedMessageId,
+      setActiveMessageID,
       updateUploadPendingMessageList,
+      setFirstSendMessage,
     }),
     [
-      sendMessage,
-      removeMessage,
-      updateMessage,
-      createTextMessage,
-      createFaceMessage,
-      createImageMessage,
-      createVideoMessage,
-      createFileMessage,
-      createForwardMessage,
-      createCustomMessage,
-      createAudioMessage,
-      createTextAtMessage,
-      createLocationMessage,
-      createMergerMessage,
       editLocalMessage,
       operateMessage,
       loadMore,
@@ -282,7 +232,9 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       setAudioSource,
       setVideoSource,
       setHighlightedMessageId,
+      setActiveMessageID,
       updateUploadPendingMessageList,
+      setFirstSendMessage,
     ],
   );
 
@@ -292,6 +244,8 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       MessageContext,
       InputPlugins,
       MessagePlugins,
+      MessageCustomPlugins,
+      MessageTextPlugins,
       TUIChatHeader,
       TUIMessageInput,
       InputQuote,
@@ -305,11 +259,11 @@ function TUIChatInner <T extends TUIChatInnerProps>(
         <TUIChatActionProvider value={chatActionContextValue}>
           <ComponentProvider value={componentContextValue}>
             {children || (
-            <>
-              <TUIChatHeaderElement />
-              <TUIMessageList />
-              <TUIMessageInputElement />
-            </>
+              <>
+                <TUIChatHeaderElement />
+                <TUIMessageList />
+                <TUIMessageInputElement />
+              </>
             )}
           </ComponentProvider>
         </TUIChatActionProvider>

package/src/components/TUIChat/TUIChatState.tsx

@@ -1,13 +1,11 @@
 import type { Reducer } from 'react';
 import { Conversation, Message } from '@tencentcloud/chat';
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
 import { CONSTANT_DISPATCH_TYPE } from '../../constants';
 import type { TUIChatStateContextValue } from '../../context';
 import { OperateMessageParams } from './hooks/useHandleMessage';
 import {
-  handleMessage,
-  handleMessageList,
   handleEditMessage,
-  handleRemoveMessage,
   handleUploadPendingMessage,
 } from './unitls';
 
@@ -18,30 +16,13 @@ export type ChatStateReducerAction =
     }
   | {
       type: CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST,
-      value?: Array<Message>,
-    }
-  | {
-      type: CONSTANT_DISPATCH_TYPE.SET_UPDATE_MESSAGE,
-      value?: Array<Message>,
-      index?: number
+      value?: Array<IMessageModel>,
     }
   | {
     type: CONSTANT_DISPATCH_TYPE.SET_EDIT_MESSAGE,
     value?: Message,
     index?: number,
   }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_REMOVE_MESSAGE,
-    value?: Message
-  }
-  | {
-      type: CONSTANT_DISPATCH_TYPE.SET_HISTORY_MESSAGELIST,
-      value?: Array<Message>,
-    }
-  | {
-      type: CONSTANT_DISPATCH_TYPE.SET_NEXT_REQ_MESSAGE_ID,
-      value?: string,
-    }
   | {
       type: CONSTANT_DISPATCH_TYPE.SET_IS_COMPLETE,
       value?: boolean,
@@ -73,6 +54,14 @@ export type ChatStateReducerAction =
       type: CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDING_MESSAGE_LIST,
       value?: Message,
     }
+  | {
+      type: CONSTANT_DISPATCH_TYPE.SET_FIRST_SEND_MESSAGE;
+      value?: Message;
+    }
+  | {
+      type: CONSTANT_DISPATCH_TYPE.SET_ACTIVE_MESSAGE_ID,
+      value?: string,
+   };
 export type ChatStateReducer = Reducer<TUIChatStateContextValue, ChatStateReducerAction>;
 
 export const chatReducer = (
@@ -82,38 +71,17 @@ export const chatReducer = (
   switch (action?.type) {
     case CONSTANT_DISPATCH_TYPE.SET_CONVERSATION_PRPFILE:
       return { ...state, conversation: action.value };
+    // messageList 设置
     case CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST:
       return {
         ...state,
-        ...handleMessageList(
-          [...state.messageList.concat(
-            handleMessage(action.value).filter((item) => !state.messageList.includes(item)),
-          )],
-          state,
-        ),
-      };
-    case CONSTANT_DISPATCH_TYPE.SET_UPDATE_MESSAGE:
-      return {
-        ...state,
-        ...handleMessageList([...state.messageList, ...handleMessage(action.value)], state),
+        messageList: action.value,
       };
     case CONSTANT_DISPATCH_TYPE.SET_EDIT_MESSAGE:
       return {
         ...state,
         messageList: [...handleEditMessage(state.messageList, action.value)],
       };
-    case CONSTANT_DISPATCH_TYPE.SET_REMOVE_MESSAGE:
-      return {
-        ...state,
-        messageList: [...handleRemoveMessage(state.messageList, action.value)],
-      };
-    case CONSTANT_DISPATCH_TYPE.SET_HISTORY_MESSAGELIST:
-      return {
-        ...state,
-        ...handleMessageList([...handleMessage(action.value), ...state.messageList], state),
-      };
-    case CONSTANT_DISPATCH_TYPE.SET_NEXT_REQ_MESSAGE_ID:
-      return { ...state, nextReqMessageID: action.value };
     case CONSTANT_DISPATCH_TYPE.SET_IS_COMPLETE:
       return { ...state, isCompleted: action.value };
     case CONSTANT_DISPATCH_TYPE.RESET:
@@ -135,7 +103,10 @@ export const chatReducer = (
           ...handleUploadPendingMessage(state.uploadPendingMessageList, action.value),
         ],
       };
-    default: return state;
+    case CONSTANT_DISPATCH_TYPE.SET_FIRST_SEND_MESSAGE:
+      return { ...state, firstSendMessage: action.value };
+    case CONSTANT_DISPATCH_TYPE.SET_ACTIVE_MESSAGE_ID:
+      return { ...state, activeMessageID: action.value };
   }
 };
 
@@ -153,4 +124,6 @@ export const initialState:TUIChatStateContextValue = {
   audioSource: null,
   vidoeSource: null,
   uploadPendingMessageList: [],
+  firstSendMessage: null,
+  activeMessageID: '',
 };

package/src/components/TUIChat/hooks/useHandleMessage.tsx

@@ -48,10 +48,18 @@ export function useHandleMessage<T extends CreateMessageProps>(props:T) {
     });
   }, [dispatch]);
 
+  const setActiveMessageID = useCallback((messageID: string) => {
+    dispatch({
+      type: CONSTANT_DISPATCH_TYPE.SET_ACTIVE_MESSAGE_ID,
+      value: messageID,
+    });
+  }, [dispatch]);
+
   return {
     operateMessage,
     setAudioSource,
     setVideoSource,
     setHighlightedMessageId,
+    setActiveMessageID,
   };
 }

package/src/components/TUIChat/hooks/useHandleMessageList.tsx

@@ -9,6 +9,7 @@ export interface CreateMessageProps {
   conversation?: Conversation,
   state?: TUIChatStateContextValue,
   dispatch?: Dispatch<ChatStateReducerAction>,
+  filterMessage: any
 }
 
 export interface GetMessageListProps{
@@ -22,46 +23,9 @@ export function useHandleMessageList<T extends CreateMessageProps>(props:T) {
     conversation,
     state,
     dispatch,
+    filterMessage,
   } = props;
 
-  const { conversationID, groupProfile, type } = conversation;
-  const isC2CConversation = type === TencentCloudChat.TYPES.CONV_C2C;
-
-  const basicConfig = {
-    conversationID,
-  };
-
-  const getMessageList = useCallback(async (params?: GetMessageListProps) => {
-    const data = params || {};
-    let groupType;
-    if (groupProfile) {
-      groupType = groupProfile.type;
-    }
-    if (isC2CConversation || (groupType !== TencentCloudChat.TYPES.GRP_AVCHATROOM)) {
-      return chat.getMessageList({
-        ...basicConfig,
-        ...data,
-      });
-    }
-    return null;
-  }, [chat]);
-
-  const updateMessage = useCallback((messageList: Array<Message>) => {
-    dispatch({
-      type: CONSTANT_DISPATCH_TYPE.SET_UPDATE_MESSAGE,
-      value: messageList.filter((item) => (
-        item?.conversationID === conversationID
-      )),
-    });
-  }, [dispatch]);
-
-  const removeMessage = useCallback((message: Message) => {
-    dispatch({
-      type: CONSTANT_DISPATCH_TYPE.SET_REMOVE_MESSAGE,
-      value: message,
-    });
-  }, [dispatch]);
-
   const editLocalMessage = useCallback((message: Message) => {
     dispatch({
       type: CONSTANT_DISPATCH_TYPE.SET_EDIT_MESSAGE,
@@ -77,9 +41,6 @@ export function useHandleMessageList<T extends CreateMessageProps>(props:T) {
   }, [dispatch]);
 
   return {
-    getMessageList,
-    updateMessage,
-    removeMessage,
     editLocalMessage,
     updateUploadPendingMessageList,
   };

package/src/components/TUIChat/unitls.ts

@@ -1,6 +1,5 @@
 import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import constant from '../../constants';
-import type { TUIChatStateContextValue } from '../../context';
 import { JSONStringToParse } from '../untils';
 
 export const handleMessage = (messageList:Array<Message>):Array<Message> => {
@@ -16,24 +15,6 @@ export const handleMessage = (messageList:Array<Message>):Array<Message> => {
   });
 };
 
-export const handleMessageList = (
-  list:Array<Message>,
-  state:TUIChatStateContextValue,
-) => {
-  const data = {
-    messageList: [],
-    lastMessageID: '',
-    isSameLastMessageID: false,
-  };
-  data.messageList = list;
-  if (data.messageList.length >= 1) {
-    data.lastMessageID = data?.messageList[data.messageList.length - 1]?.ID;
-  }
-  data.messageList = data.messageList.filter((item) => !item?.isDeleted);
-  data.isSameLastMessageID = data?.lastMessageID === state?.lastMessageID;
-  return data;
-};
-
 export const handleEditMessage = (
   messageList: Array<Message>,
   message: Message,
@@ -44,16 +25,6 @@ export const handleEditMessage = (
   return list;
 };
 
-export const handleRemoveMessage = (
-  messageList: Array<Message>,
-  message: Message,
-) => {
-  const list = [...messageList];
-  const index = list.findIndex((item) => item?.ID === message?.ID);
-  list.splice(index, 1);
-  return list;
-};
-
 export const handleUploadPendingMessage = (
   messageList: Array<Message>,
   message: Message,

package/src/components/TUIChatHeader/TUIChatHeaderDefault.tsx

@@ -1,8 +1,9 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 import TencentCloudChat, { Conversation, Group, Profile } from '@tencentcloud/chat';
+import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
 import { Avatar } from '../Avatar';
 import { handleDisplayAvatar } from '../untils';
-
+import { isH5 } from '../../utils/env';
 import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 import { useTUIKitContext } from '../../context';
@@ -31,7 +32,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     isLive,
     opateIcon,
   } = props;
-
+  const { setActiveContact } = useTUIKitContext('TUIContact');
   const [title, setTitle] = useState(propTitle);
   const [avatar, setAvatar] = useState<React.ReactElement | string>('');
 
@@ -76,6 +77,11 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
       />);
     }
   };
+
+  const back = () => {
+    TUIConversationService.switchConversation('');
+    setActiveContact();
+  };
   const { setTUIManageShow } = useTUIKitContext();
   const openTUIManage = () => {
     setTUIManageShow(true);
@@ -86,6 +92,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
       className={`tui-chat-header ${isLive ? 'tui-chat-live-header' : ''}`}
       key={conversation?.conversationID}
     >
+      {isH5 && (<div style={{ paddingRight: '10px' }}><Icon onClick={back} type={IconTypes.BACK} width={9} height={16} /></div>)}
       <div
         className={`tui-chat-header-left ${conversation?.type === TencentCloudChat.TYPES.CONV_SYSTEM ? 'system' : ''}`}
       >

package/src/components/TUIContact/TUIContact.tsx

@@ -4,6 +4,7 @@ import {
   TUIContactContextProvider,
   TUIContactContextValue,
 } from '../../context/TUIContactContext';
+import { isH5 } from '../../utils/env';
 import { useTUIKitContext } from '../../context';
 import useTUIContact from './hooks/useTUIContact';
 import { TUIContactList } from './TUIContactList/TUIContactList';
@@ -55,7 +56,7 @@ export function UnMemoizedTUIContact<T>(
   return (
     <TUIContactContextProvider value={TUIContactValue}>
       {children || (
-        <div className="tui-contacts">
+        <div className={`tui-contacts ${isH5 ? 'tui-contacts-h5' : ''} `}>
             {!isShowAddFriend && (
               <>
                 <div className="tui-contacts-header">

package/src/components/TUIContact/TUIContactInfo/TUIContactInfo.tsx

@@ -2,6 +2,7 @@ import React, {
   PropsWithChildren,
 } from 'react';
 import { useTUIKitContext } from '../../../context';
+import { isH5 } from '../../../utils/env';
 import { FriendInfo } from './friendInfo';
 import { BlockInfo } from './blockInfo';
 import { AddFriendInfo } from './addFriendInfo';
@@ -21,7 +22,7 @@ export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
     return (<> </>);
   }
   return (
-    <div className="tui-contact-info">
+    <div className={`tui-contact-info ${isH5 ? 'tui-contact-info-h5' : ''} `}>
       {contactData?.type === 'addFriend' && (<AddFriendInfo profile={contactData?.data} />)}
       {contactData?.type === 'friend' && (<FriendInfo openChat={showChat} friend={contactData?.data} />)}
       {contactData?.type === 'block' && (<BlockInfo profile={contactData?.data} />)}