@tencentcloud/chat-uikit-react 0.0.1

package/src/components/TUIChat/TUIChat.tsx

@@ -0,0 +1,276 @@
+import React, {
+  PropsWithChildren, useEffect, useMemo, useReducer, useRef, useState,
+} from 'react';
+import { ChatSDK, Conversation, Message } from 'tim-js-sdk';
+import { useTUIKitContext } from '../../context/TUIKitContext';
+import { TUIChatStateContextProvider } from '../../context/TUIChatStateContext';
+import { TUIChatActionProvider } from '../../context/TUIChatActionContext';
+import { ComponentProvider, UnknowPorps } from '../../context/ComponentContext';
+import type { TUIChatActionContextValue } from '../../context/TUIChatActionContext';
+import type { ComponentContextValue } from '../../context/ComponentContext';
+import useCreateTUIChatStateContext from './hooks/useCreateTUIChatStateContext';
+
+import type { TUIChatHeaderDefaultProps } from '../TUIChatHeader/TUIChatHeaderDefault';
+
+import {
+  TUIMessageProps,
+  TUIMessage as TUIMessageDefault,
+} from '../TUIMessage';
+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';
+
+import { TUIChatHeader as TUIChatHeaderElement } from '../TUIChatHeader';
+import { TUIMessageList } from '../TUIMessageList';
+import { TUIMessageInput as TUIMessageInputElement } from '../TUIMessageInput';
+import { EmptyStateIndicator } from '../EmptyStateIndicator';
+import { Toast } from '../Toast';
+
+interface TUIChatProps {
+  className?: string,
+  conversation?: Conversation,
+  EmptyPlaceholder?: React.ReactElement,
+  TUIMessage?: React.ComponentType<TUIMessageProps>,
+  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>,
+  MessageContext?: React.ComponentType<MessageContextProps>,
+  TUIMessageInput?: React.ComponentType<UnknowPorps>,
+  InputPlugins?: React.ComponentType<UnknowPorps>,
+  InputQuote?: React.ComponentType<UnknowPorps>,
+  MessagePlugins?: React.ComponentType<UnknowPorps>,
+  onMessageRecevied?: (
+    updateMessage: (event?: Array<Message>) => void,
+    event: any,
+  ) => void,
+  sendMessage?: (message:Message) => Promise<Message>,
+  revokeMessage?: (message:Message) => Promise<Message>,
+  [propName: string]: any,
+}
+
+interface TUIChatInnerProps extends TUIChatProps {
+  tim?: ChatSDK,
+  key?: string;
+}
+
+function UnMemoizedTUIChat <T extends TUIChatProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    conversation: propsConversation,
+    EmptyPlaceholder = <EmptyStateIndicator listType="chat" />,
+  } = props;
+
+  const { conversation: contextConversation, tim } = useTUIKitContext('TUIChat');
+
+  const conversation = propsConversation || contextConversation;
+
+  if (!conversation?.conversationID) return EmptyPlaceholder;
+
+  return (
+    <TUIChatInner
+      tim={tim}
+      {...props}
+      conversation={conversation}
+      key={conversation.conversationID}
+    />
+  );
+}
+
+function TUIChatInner <T extends TUIChatInnerProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    tim,
+    conversation,
+    className,
+    children,
+    TUIMessage,
+    TUIChatHeader,
+    TUIMessageInput,
+    InputPlugins,
+    MessagePlugins,
+    MessageContext,
+    InputQuote,
+    onMessageRecevied,
+    sendMessage: propsSendMessage,
+    revokeMessage,
+  } = props;
+
+  const [state, dispatch] = useReducer<ChatStateReducer>(
+    chatReducer,
+    { ...initialState, conversation },
+  );
+
+  const messageListRef = useRef(null);
+  const textareaRef = useRef<HTMLTextAreaElement>();
+  const chatStateContextValue = useCreateTUIChatStateContext({
+    tim,
+    conversation,
+    messageListRef,
+    textareaRef,
+    ...state,
+  });
+
+  const {
+    createTextMessage,
+    createFaceMessage,
+    createImageMessage,
+    createVideoMessage,
+    createFileMessage,
+    createForwardMessage,
+  } = useCreateMessage({ tim, conversation });
+
+  const {
+    getMessageList,
+    updateMessage,
+    editLocalmessage,
+    removeMessage,
+  } = useHandleMessageList({
+    tim, conversation, state, dispatch,
+  });
+
+  const {
+    operateMessage,
+  } = useHandleMessage({
+    state, dispatch,
+  });
+
+  const sendMessage = async (message: Message) => {
+    updateMessage([message]);
+    try {
+      if (propsSendMessage) {
+        await propsSendMessage(message);
+      } else {
+        await tim.sendMessage(message);
+      }
+      editLocalmessage(message);
+    } catch (error) {
+      Toast({ text: error, type: 'error' });
+      editLocalmessage(message);
+      throw new Error(error);
+    }
+  };
+
+  const loadMore = async () => {
+    if (state.isCompleted) {
+      dispatch({
+        type: CONSTANT_DISPATCH_TYPE.SET_NO_MORE,
+        value: true,
+      });
+      return;
+    }
+    const historyMessageData = await getMessageList({
+      nextReqMessageID: state.nextReqMessageID,
+    });
+    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);
+
+  useEffect(() => {
+    (async () => {
+      const res = await getMessageList();
+      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,
+      });
+      dispatch({
+        type: CONSTANT_DISPATCH_TYPE.SET_IS_COMPLETE,
+        value: res.data.isCompleted,
+      });
+      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,
+      editLocalmessage,
+      operateMessage,
+      loadMore,
+      revokeMessage,
+    }),
+    [
+      sendMessage,
+      removeMessage,
+      updateMessage,
+      createTextMessage,
+      createFaceMessage,
+      createImageMessage,
+      createVideoMessage,
+      createFileMessage,
+      createForwardMessage,
+      editLocalmessage,
+      operateMessage,
+      loadMore,
+      revokeMessage,
+    ],
+  );
+
+  const componentContextValue: ComponentContextValue = useMemo(
+    () => ({
+      TUIMessage: TUIMessage || TUIMessageDefault,
+      MessageContext,
+      InputPlugins,
+      MessagePlugins,
+      TUIChatHeader,
+      TUIMessageInput,
+      InputQuote,
+    }),
+    [],
+  );
+
+  return (
+    <div className={`chat ${className}`}>
+      <TUIChatStateContextProvider value={chatStateContextValue}>
+        <TUIChatActionProvider value={chatActionContextValue}>
+          <ComponentProvider value={componentContextValue}>
+            {children || (
+            <>
+              <TUIChatHeaderElement />
+              <TUIMessageList />
+              <TUIMessageInputElement />
+            </>
+            )}
+          </ComponentProvider>
+        </TUIChatActionProvider>
+      </TUIChatStateContextProvider>
+    </div>
+  );
+}
+
+export const TUIChat = React.memo(UnMemoizedTUIChat) as typeof UnMemoizedTUIChat;

package/src/components/TUIChat/TUIChatState.tsx

@@ -0,0 +1,129 @@
+import type { Reducer } from 'react';
+import { Conversation, Message } from 'tim-js-sdk';
+import { CONSTANT_DISPATCH_TYPE } from '../../constants';
+import type { TUIChatStateContextValue } from '../../context';
+import { OperateMessageParams } from './hooks/useHandleMessage';
+import {
+  handleMessage,
+  handleMessageList,
+  handleEditMessage,
+  handleRemoveMessage,
+} from './unitls';
+
+export type ChatStateReducerAction =
+  | {
+      type: CONSTANT_DISPATCH_TYPE.SET_CONVERSATION_PRPFILE;
+      value?: Conversation
+    }
+  | {
+      type: CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST,
+      value?: Array<Message>,
+    }
+  | {
+      type: CONSTANT_DISPATCH_TYPE.SET_UPDATE_MESSAGE,
+      value?: Array<Message>,
+      index?: number
+    }
+  | {
+    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,
+    }
+  | {
+      type: CONSTANT_DISPATCH_TYPE.RESET;
+    }
+  | {
+      type: CONSTANT_DISPATCH_TYPE.SET_HIGH_LIGHTED_MESSAGE_ID,
+      value?: string,
+    }
+  | {
+      type: CONSTANT_DISPATCH_TYPE.OPERATE_MESSAGE,
+      value?: OperateMessageParams,
+    }
+  | {
+      type: CONSTANT_DISPATCH_TYPE.SET_NO_MORE,
+      value?: boolean,
+    }
+export type ChatStateReducer = Reducer<TUIChatStateContextValue, ChatStateReducerAction>;
+
+export const chatReducer = (
+  state: TUIChatStateContextValue,
+  action: ChatStateReducerAction,
+) => {
+  switch (action?.type) {
+    case CONSTANT_DISPATCH_TYPE.SET_CONVERSATION_PRPFILE:
+      return { ...state, conversation: action.value };
+    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),
+      };
+    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:
+      return { ...initialState };
+    case CONSTANT_DISPATCH_TYPE.SET_HIGH_LIGHTED_MESSAGE_ID:
+      return { ...state, highlightedMessageId: action.value };
+    case CONSTANT_DISPATCH_TYPE.OPERATE_MESSAGE:
+      return { ...state, operateData: { ...action.value } };
+    case CONSTANT_DISPATCH_TYPE.SET_NO_MORE:
+      return { ...state, noMore: action.value };
+    default: return state;
+  }
+};
+
+export const initialState:TUIChatStateContextValue = {
+  conversation: {} as Conversation,
+  messageList: [],
+  nextReqMessageID: '',
+  isCompleted: false,
+  init: false,
+  highlightedMessageId: '',
+  lastMessageID: '',
+  isSameLastMessageID: false,
+  operateData: {},
+  noMore: false,
+};

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

@@ -0,0 +1,117 @@
+import { useCallback } from 'react';
+import TIM, { ChatSDK, Conversation, Message } from 'tim-js-sdk';
+
+export interface CreateMessageProps {
+  tim?: ChatSDK,
+  conversation?: Conversation,
+  to?: string,
+  type?: TIM.TYPES,
+}
+export interface BasicCreateMessageProps {
+  needReadReceipt?: boolean,
+  priority?: TIM.TYPES,
+  onProgress?: (num:number) => void,
+  cloudCustomData?: string;
+  receiverList?: Array<string>;
+}
+
+export interface CreateTextMessageProps extends BasicCreateMessageProps{
+  payload: {
+    text: string
+  }
+}
+
+export interface CreateFaceMessageProps extends BasicCreateMessageProps{
+  payload: {
+    index: number,
+    data: string,
+  }
+}
+
+export interface CreateUploadMessageProps extends BasicCreateMessageProps{
+  payload: {
+    file: HTMLInputElement | File,
+  }
+}
+
+export interface CreateForwardMessageProps extends BasicCreateMessageProps{
+  conversation: Conversation,
+  message: Message,
+}
+
+export function useCreateMessage<T extends CreateMessageProps>(props:T) {
+  const {
+    tim,
+    conversation,
+    to = '',
+    type: propType,
+  } = props;
+
+  const { type: conversationType, userProfile, groupProfile } = conversation;
+
+  const type = propType || conversationType;
+
+  const basicConfig = {
+    to: to || (type === TIM.TYPES.CONV_C2C ? userProfile?.userID : groupProfile?.groupID),
+    conversationType: type,
+  };
+
+  const createTextMessage = useCallback((params: CreateTextMessageProps) => tim.createTextMessage({
+    ...basicConfig,
+    ...params,
+  }), [tim]);
+
+  const createFaceMessage = useCallback((params: CreateFaceMessageProps) => tim.createFaceMessage({
+    ...basicConfig,
+    ...params,
+  }), [tim]);
+
+  const createImageMessage = useCallback((
+    params: CreateUploadMessageProps,
+  ) => tim.createImageMessage({
+    ...basicConfig,
+    ...params,
+  }), [tim]);
+
+  const createVideoMessage = useCallback((
+    params: CreateUploadMessageProps,
+  ) => tim.createVideoMessage({
+    ...basicConfig,
+    ...params,
+  }), [tim]);
+
+  const createFileMessage = useCallback((
+    params: CreateUploadMessageProps,
+  ) => tim.createFileMessage({
+    ...basicConfig,
+    ...params,
+  }), [tim]);
+
+  const createForwardMessage = useCallback((
+    params: CreateForwardMessageProps,
+  ) => {
+    const { conversation: forwardConversation, message, ...other } = params;
+    const {
+      type: forwardType,
+      userProfile: forwardUserProfile,
+      groupProfile: forwardGroupProfile,
+    } = forwardConversation;
+    const forwardTo = forwardType === TIM.TYPES.CONV_C2C
+      ? forwardUserProfile?.userID : forwardGroupProfile?.groupID;
+    return tim.createForwardMessage({
+      to: forwardTo,
+      conversationType: forwardType,
+      payload: message,
+      ...other,
+    });
+  }, [tim]);
+
+  return {
+    createTextMessage,
+    createFaceMessage,
+    createImageMessage,
+    createVideoMessage,
+    createFileMessage,
+    createForwardMessage,
+  };
+}

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

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { ChatSDK } from 'tim-js-sdk';
+import { TUIChatStateContextValue } from '../../../context';
+
+interface CreateTUIChatStateContextProp extends TUIChatStateContextValue {
+  tim?: ChatSDK,
+}
+
+function useCreateTUIChatStateContext(props:CreateTUIChatStateContextProp) {
+  const {
+    tim,
+    conversation,
+    messageList,
+    messageListRef,
+    ...state
+  } = props;
+  const TUIChatStateContext = useMemo(() => ({
+    tim,
+    conversation,
+    messageList,
+    messageListRef,
+    ...state,
+  }), [
+    tim,
+    conversation,
+    messageList,
+    messageListRef,
+    state,
+  ]);
+
+  return TUIChatStateContext;
+}
+
+export default useCreateTUIChatStateContext;

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

@@ -0,0 +1,33 @@
+import { Dispatch, useCallback } from 'react';
+import { ChatSDK, Conversation, Message } from 'tim-js-sdk';
+import { CONSTANT_DISPATCH_TYPE } from '../../../constants';
+import type { TUIChatStateContextValue } from '../../../context';
+import type { ChatStateReducerAction } from '../TUIChatState';
+
+export interface CreateMessageProps {
+  tim?: ChatSDK,
+  conversation?: Conversation,
+  state?: TUIChatStateContextValue,
+  dispatch?: Dispatch<ChatStateReducerAction>,
+}
+export interface OperateMessageParams {
+  [propName: string]: Message,
+}
+
+export function useHandleMessage<T extends CreateMessageProps>(props:T) {
+  const {
+    state,
+    dispatch,
+  } = props;
+
+  const operateMessage = useCallback((data: OperateMessageParams) => {
+    dispatch({
+      type: CONSTANT_DISPATCH_TYPE.OPERATE_MESSAGE,
+      value: data,
+    });
+  }, [dispatch]);
+
+  return {
+    operateMessage,
+  };
+}

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

@@ -0,0 +1,70 @@
+import { Dispatch, useCallback } from 'react';
+import { ChatSDK, Conversation, Message } from 'tim-js-sdk';
+import { CONSTANT_DISPATCH_TYPE } from '../../../constants';
+import type { TUIChatStateContextValue } from '../../../context';
+import type { ChatStateReducerAction } from '../TUIChatState';
+
+export interface CreateMessageProps {
+  tim?: ChatSDK,
+  conversation?: Conversation,
+  state?: TUIChatStateContextValue,
+  dispatch?: Dispatch<ChatStateReducerAction>,
+}
+
+export interface GetMessageListProps{
+  nextReqMessageID?: string,
+  count?: number,
+}
+
+export function useHandleMessageList<T extends CreateMessageProps>(props:T) {
+  const {
+    tim,
+    conversation,
+    state,
+    dispatch,
+  } = props;
+
+  const { conversationID } = conversation;
+
+  const basicConfig = {
+    conversationID,
+  };
+
+  const getMessageList = useCallback((params?: GetMessageListProps) => {
+    const data = params || {};
+    return tim.getMessageList({
+      ...basicConfig,
+      ...data,
+    });
+  }, [tim]);
+
+  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,
+      value: message,
+    });
+  }, [dispatch]);
+
+  return {
+    getMessageList,
+    updateMessage,
+    removeMessage,
+    editLocalmessage,
+  };
+}

package/src/components/TUIChat/hooks/useIsMounted.ts

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+
+export const useIsMounted = () => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return isMounted;
+};

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

@@ -0,0 +1,26 @@
+import { useLayoutEffect } from 'react';
+import TIM, { Message } from 'tim-js-sdk';
+import { useTUIKitContext } from '../../../context';
+
+export function useMessageReceviedListener(
+  setMessageList:(event?: Array<Message>) => void,
+  customHandler?: (
+    updateMessage: (event?: Array<Message>) => void,
+    event: any,
+  ) => void,
+) {
+  const { tim } = useTUIKitContext('useMessageReceviedListener');
+  useLayoutEffect(() => {
+    const handleMessageRecevied = (event: any) => {
+      if (customHandler && typeof customHandler === 'function') {
+        customHandler(setMessageList, event);
+      } else {
+        setMessageList(event.data);
+      }
+    };
+    tim.on(TIM.EVENT.MESSAGE_RECEIVED, handleMessageRecevied, this);
+    return () => {
+      tim.off(TIM.EVENT.MESSAGE_RECEIVED, handleMessageRecevied, this);
+    };
+  }, [tim]);
+}

package/src/components/TUIChat/index.ts

@@ -0,0 +1,2 @@
+export * from './TUIChat';
+export * from './hooks/useCreateTUIChatStateContext';

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

@@ -0,0 +1 @@
+@import "./layout.scss";