@tencentcloud/chat-uikit-react 2.3.1 → 3.0.1

package/src/components/Chat/Chat.tsx

@@ -1,295 +1,42 @@
-/* eslint-disable react/display-name */
-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 '../utils';
-import { useUIManagerStore } from '../../store';
-import { TUIChatStateContextProvider } from '../../context/ChatStateContext';
-import { TUIChatActionProvider } from '../../context/ChatActionContext';
-import { ComponentProvider, UnknowPorps } from '../../context/ComponentContext';
-import type { TUIChatActionContextValue } from '../../context/ChatActionContext';
-import type { ComponentContextValue } from '../../context/ComponentContext';
-import useCreateTUIChatStateContext from './hooks/useCreateTUIChatStateContext';
-
-import type { TUIChatHeaderDefaultProps } from '../ChatHeader/ChatHeaderDefault';
-
-import {
-  TUIMessageProps,
-  TUIMessage as TUIMessageDefault,
-} from '../MessageElement';
-import type { MessageContextProps } from '../MessageElement/MessageContext';
-
-import './styles/index.scss';
-import { CONSTANT_DISPATCH_TYPE } from '../../constants';
-import { chatReducer, ChatStateReducer, initialState } from './ChatState';
-
-import { useHandleMessageList } from './hooks/useHandleMessageList';
-import { useHandleMessage } from './hooks/useHandleMessage';
-
-import { ChatHeader as ChatHeaderElement } from '../ChatHeader';
-import { MessageListProps, MessageList } from '../MessageList';
-import { MessageInput as MessageInputElement, TUIMessageInputBasicProps } from '../MessageInput';
-import { EmptyStateIndicator } from '../EmptyStateIndicator';
-
-interface TUIChatProps {
-  className?: string;
-  conversation?: Conversation;
-  EmptyPlaceholder?: React.ReactElement;
-  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>;
-  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>;
-  MessageContext?: React.ComponentType<MessageContextProps>;
-  TUIMessageInput?: React.ComponentType<UnknowPorps>;
-  InputPlugins?: React.ComponentType<UnknowPorps>;
-  InputQuote?: React.ComponentType<UnknowPorps>;
-  MessagePlugins?: React.ComponentType<UnknowPorps>;
-  MessageCustomPlugins?: React.ComponentType<UnknowPorps>;
-  MessageTextPlugins?: React.ComponentType<UnknowPorps>;
-  onMessageRecevied?: (
-    updateMessage: (event?: Message[]) => void,
-    event: any,
-  ) => void;
-  sendMessage?: (message: Message, options?: any) => Promise<Message>;
-  revokeMessage?: (message: Message) => Promise<Message>;
-  selectedConversation?: (conversation: Conversation) => Promise<Conversation>;
-  filterMessage?: (messageList: IMessageModel[]) => IMessageModel[];
-  callButtonClicked?: (callMediaType?: number, callType?: any) => void;
-  messageConfig?: TUIMessageProps;
-  cloudCustomData?: string;
-  TUIMessageInputConfig?: TUIMessageInputBasicProps;
-  TUIMessageListConfig?: MessageListProps;
-  [propName: string]: any;
-}
-
-interface TUIChatInnerProps extends TUIChatProps {
-  chat?: ChatSDK;
-  key?: string;
+import type React from 'react';
+import { View, useConversationListState } from 'tuikit-atomicx-react';
+import cs from 'classnames';
+import { ChatProvider } from '../../context/ChatContext';
+import classes from './Chat.module.scss';
+import type { IChatProps as IChatContextProps } from '../../context/ChatContext';
+
+interface IChatProps extends IChatContextProps {
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
+  children?: React.ReactNode;
+  PlaceholderEmpty?: React.ReactNode;
 }
 
-function UnMemoizedChat<T extends TUIChatProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
+const Chat = (props: IChatProps) => {
   const {
-    conversation: propsConversation,
-    EmptyPlaceholder = <EmptyStateIndicator listType="chat" />,
-  } = props;
-
-  const { chat } = useUIManagerStore();
-  const { conversation: contextConversation } = useUIManagerStore('TUIChat');
-
-  const conversation = propsConversation || contextConversation;
-
-  if (!conversation?.conversationID) return EmptyPlaceholder;
-
-  return (
-    <TUIChatInner
-      chat={chat}
-      {...props}
-      conversation={conversation}
-      key={conversation.conversationID}
-    />
-  );
-}
-
-function TUIChatInner<T extends TUIChatInnerProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    chat,
-    conversation,
+    PlaceholderEmpty = null,
     className,
+    style,
     children,
-    TUIMessage,
-    TUIChatHeader,
-    TUIMessageInput,
-    InputPlugins,
-    MessagePlugins,
-    MessageContext,
-    MessageCustomPlugins,
-    MessageTextPlugins,
-    InputQuote,
-    onMessageRecevied,
-    sendMessage: propsSendMessage,
-    revokeMessage,
-    selectedConversation,
-    filterMessage,
-    messageConfig,
-    cloudCustomData,
-    TUIMessageInputConfig,
-    TUIMessageListConfig,
-    callButtonClicked,
   } = props;
 
-  const [state, dispatch] = useReducer<any>(chatReducer, {
-    ...initialState,
-    conversation,
-  });
-
-  const messageListRef = useRef(null);
-  const textareaRef = useRef<HTMLTextAreaElement>();
-  const chatStateContextValue = state && useCreateTUIChatStateContext({
-    chat,
-    conversation,
-    messageListRef,
-    textareaRef,
-    messageConfig,
-    cloudCustomData,
-    TUIMessageInputConfig,
-    TUIMessageListConfig,
-    ...state,
-  });
-
-  const {
-    editLocalMessage,
-    updateUploadPendingMessageList,
-  } = useHandleMessageList({
-    chat,
-    conversation,
-    // eslint-disable-next-line
-    // @ts-ignore
-    state,
-    dispatch,
-    filterMessage,
-  });
-
-  const {
-    operateMessage,
-    setAudioSource,
-    setVideoSource,
-    setHighlightedMessageId,
-    setActiveMessageID,
-  } = useHandleMessage({
-    // eslint-disable-next-line
-    // @ts-ignore
-    state,
-    dispatch,
-  });
-
-  useEffect(() => {
-    TUIStore.watch(StoreName.CHAT, {
-      messageList: onMessageListUpdated,
-      isCompleted: isCompletedUpdated,
-    });
-    return () => {
-      TUIStore.unwatch(StoreName.CHAT, {
-        messageList: onMessageListUpdated,
-        isCompleted: isCompletedUpdated,
-      });
-    };
-  }, []);
+  const { activeConversation } = useConversationListState();
 
-  const onMessageListUpdated = (list: IMessageModel[]) => {
-    const messageList = list.filter(message => !message.isDeleted);
-    // eslint-disable-next-line
-      // @ts-ignore
-    dispatch({
-      type: CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST,
-      value: filterMessage ? filterMessage(messageList) : messageList,
-    });
-  };
-
-  const isCompletedUpdated = (flag: boolean) => {
-    if (flag) {
-      // eslint-disable-next-line
-      // @ts-ignore
-      dispatch({
-        type: CONSTANT_DISPATCH_TYPE.SET_NO_MORE,
-        value: flag,
-      });
-    }
-  };
-
-  // Load historical messages
-  const loadMore = async () => {
-    TUIChatService.getMessageList();
-  };
-
-  const setFirstSendMessage = async (message: any) => {
-    if (
-      !(message.type === 'TIMCustomElem' && JSONStringToParse(message.payload.data)?.src === 7)
-      // eslint-disable-next-line
-      // @ts-ignore
-      && !state.firstSendMessage
-    ) {
-      // eslint-disable-next-line
-      // @ts-ignore
-      dispatch({
-        type: CONSTANT_DISPATCH_TYPE.SET_FIRST_SEND_MESSAGE,
-        value: message,
-      });
-    }
-  };
-  // eslint-disable-next-line
-      // @ts-ignore
-  const chatActionContextValue: TUIChatActionContextValue = useMemo(
-    () => ({
-      editLocalMessage,
-      operateMessage,
-      loadMore,
-      revokeMessage,
-      setAudioSource,
-      setVideoSource,
-      setHighlightedMessageId,
-      setActiveMessageID,
-      updateUploadPendingMessageList,
-      setFirstSendMessage,
-      callButtonClicked,
-    }),
-    [
-      editLocalMessage,
-      operateMessage,
-      loadMore,
-      revokeMessage,
-      setAudioSource,
-      setVideoSource,
-      setHighlightedMessageId,
-      setActiveMessageID,
-      updateUploadPendingMessageList,
-      setFirstSendMessage,
-      callButtonClicked,
-    ],
-  );
-
-  const componentContextValue: ComponentContextValue = useMemo(
-    () => ({
-      TUIMessage: TUIMessage || TUIMessageDefault,
-      MessageContext,
-      InputPlugins,
-      MessagePlugins,
-      MessageCustomPlugins,
-      MessageTextPlugins,
-      TUIChatHeader,
-      TUIMessageInput,
-      InputQuote,
-    }),
-    [],
-  );
+  if (!activeConversation?.conversationID) {
+    return PlaceholderEmpty;
+  }
 
   return (
-    <div className={`chat ${className}`}>
-      {/* // eslint-disable-next-line
-      // @ts-ignore */}
-      <TUIChatStateContextProvider value={chatStateContextValue}>
-        <TUIChatActionProvider value={chatActionContextValue}>
-          <ComponentProvider value={componentContextValue}>
-            {children || (
-              <>
-                <ChatHeaderElement />
-                <MessageList />
-                <MessageInputElement />
-              </>
-            )}
-          </ComponentProvider>
-        </TUIChatActionProvider>
-      </TUIChatStateContextProvider>
-    </div>
+    <ChatProvider>
+      <View
+        className={cs(classes.chat, className)}
+        style={style}
+      >
+        {children}
+      </View>
+    </ChatProvider>
   );
-}
+};
 
-export const Chat = React.memo(UnMemoizedChat) as typeof UnMemoizedChat;
+export { Chat };
+export type { IChatProps };

package/src/components/Chat/Chat.zh-CN.mdx

@@ -0,0 +1,275 @@
+import { Meta, Story, Canvas, Source, ArgTypes, Markdown } from '@storybook/blocks';
+import * as ChatStories from './Chat.stories';
+
+<Meta
+  of={ChatStories}
+  name="文档"
+/>
+
+# Chat 聊天组件
+
+Chat 组件是一个容器组件，是 @tencentcloud/chat-uikit-react 的核心组件之一，提供了主要的聊天界面结构。它作为聊天 UI 元素的包装器，并管理聊天上下文。
+
+**Chat 组件可以单独使用。**
+
+## 特性
+
+- 灵活的布局结构
+- 可自定义的头部、消息列表和输入组件
+- 提供聊天相关的上下文数据
+- 响应式设计和可定制样式
+
+## 核心组件
+
+Chat 组件一般会和 ChatHeader、MessageList、MessageInput 一起使用。
+
+- ChatHeader：聊天头部组件，用于显示聊天标题、用户头像、用户在线状态等信息，也是音视频通话的入口。
+- MessageList：消息列表组件，用于显示聊天消息。
+- MessageInput：消息输入组件，用于输入聊天消息。
+
+## 基础用法
+
+Chat 组件可以单独使用，需要传入 `defaultConversationID` 参数，如果传入了改参数，Chat 组件会自动切换到对应的会话。
+
+<Source
+  language="tsx"
+  dark
+  code={`
+import React from 'react';
+import { TUILogin } from '@tencentcloud/tui-core';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
+import { Chat, ChatHeader, MessageList, MessageInput } from '@tencentcloud/chat-uikit-react';
+
+const config = {
+  SDKAppID: 0, // Your SDKAppID, number type, Get it from Step 4
+  userID: 'YOUR_USER_ID', // Login UserID, string type,  Get it from Step 5
+  userSig: 'YOUR_USER_SIG', // Your userSig, string type,  Get it from Step 5
+}
+
+TUILogin.login({
+  ...config,
+  useUploadPlugin: true
+}).then(() => {
+}).catch(() => {});
+
+function MyChat() {
+  return (
+    <UIKitProvider language='en-US' theme='light'>
+      <Chat defaultConversationID="YOUR_CONVERSATION_ID">
+        <ChatHeader />
+        <MessageList />
+        <MessageInput />
+      </Chat>
+    </UIKitProvider>
+  );
+}
+`}
+/>
+
+## Props 属性说明
+
+<Markdown>
+{`
+| 参数名 | 类型 | 默认值 | 描述 |
+| ------ | ------ | ------ | ------ |
+| defaultConversationID | string | \`undefined\` | 默认会话 ID，如果设置了该值，组件会自动切换到对应的会话 |
+| ChatHeader | React.ComponentType | \`undefined\` | 自定义聊天头部组件，用于替换默认的头部组件 |
+| MessageList | React.ComponentType | \`undefined\` | 自定义消息列表组件，用于替换默认的消息列表 |
+| MessageInput | React.ComponentType | \`undefined\` | 自定义消息输入组件，用于替换默认的输入框 |
+| children | React.ReactNode | \`undefined\` | 子组件，通常包含 ChatHeader、MessageList 和 MessageInput |
+| className | string | \`undefined\` | 自定义类名，用于自定义组件样式 |
+| style | React.CSSProperties | \`undefined\` | 内联样式对象，用于自定义组件样式 |
+`}
+</Markdown>
+
+## 定制化
+
+### 自定义样式
+
+你可以使用 CSS modules 或内联样式来自定义 Chat 组件的外观：
+
+<Source
+  language="tsx"
+  dark
+  code={`
+import classes from './CustomChat.module.scss';
+
+<Chat
+  className={classes.customChat}
+  style={{
+    backgroundColor: '#f5f5f5',
+    padding: '20px',
+    borderRadius: '8px',
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
+  }}
+>
+  <ChatHeader />
+  <MessageList />
+  <MessageInput />
+</Chat>
+`}
+/>
+
+### 自定义组件
+
+你可以提供自定义组件来替换默认组件：
+
+#### 自定义聊天头部
+
+使用 `useChatHeaderProps` 钩子函数来获取聊天头部组件的 props。
+
+<Source
+  language="tsx"
+  dark
+  code={`
+import { useChatHeaderProps } from '@tencentcloud/chat-uikit-react';
+
+const CustomChatHeader = () => {
+  const {
+    /** 聊天头像 url */
+    avatarUrl: string;
+    /** 聊天标题 */
+    title: string | undefined;
+    /** 用户在线状态 */
+    userStatus: IUserStatus | undefined;
+    /** 当前会话 */
+    conversation: IConversationModel | undefined;
+    /** 是否是系统会话 */
+    system: boolean | undefined;
+  } = useChatHeaderProps();
+
+  return (
+    <div className="custom-header">
+      <h1>{title}</h1>
+      <img src={avatarUrl} alt="头像" />
+      {
+        userStatus?.statusType === 1
+        ? <div>在线</div>
+        : <div>离线</div>
+      }
+    </div>
+  );
+};
+
+<Chat ChatHeader={CustomChatHeader}>
+  <ChatHeader />
+  <MessageList />
+  <MessageInput />
+</Chat>
+`}
+/>
+
+#### 自定义消息列表
+
+使用 `useChatContext` 钩子函数来获取和消息列表相关的数据。要注意的是 useChatContext 是基于 React Context 的上下文，必须在 Chat 组件内部使用。
+
+messageList 首次回默认返回最新的 15 条消息，如果需要获取更多消息，可以调用 `getMessageList` 方法。
+
+可以使用 `judgeHasMoreMessage` 方法来判断是否还有更多消息。
+
+<Source
+  language="tsx"
+  dark
+  code={`
+import { useChatContext } from '@tencentcloud/chat-uikit-react';
+
+const CustomMessageList = () => {
+
+  const {
+    messageList,
+    getMessageList,
+    judgeHasMoreMessage,
+  } = useChatContext();
+
+  return (
+    <div className="custom-message-list">
+      {
+        judgeHasMoreMessage() && (
+          <div onClick={getMessageList}>加载更多</div>
+        )
+      }
+      {messageList.map((message) => {
+        const diffKeyToFlush = \`\${message.ID}-\${message.isRevoked}-\${message.isDeleted}-\${message.status}\`;
+        return (
+          <div key={diffKeyToFlush}>
+            <div key={message.nick}>{message.nick}</div>
+            <img src={message.avatar} alt="头像" />
+            {message.type === 'TIMTextElem' && <div>{message.payload.text}</div>}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+<Chat MessageList={CustomMessageList}>
+  <ChatHeader />
+  <MessageList />
+  <MessageInput />
+</Chat>
+`}
+/>
+
+#### 自定义消息输入
+
+使用 `useMessageInputStore` 钩子函数来获取和消息输入相关的数据。
+
+<Source
+  language="tsx"
+  dark
+  code={`
+import { useMessageInputStore } from '@tencentcloud/chat-uikit-react';
+
+const CustomMessageInput = () => {
+  const {
+    inputValue,
+    setInputValue
+    sendTextMessage,
+  } = useMessageInputStore();
+
+  const handleSendMessage = () => {
+    sendTextMessage({
+      payload: {
+        text: inputValue,
+      },
+    });
+  };
+
+  return (
+    <div className="custom-message-list" style={{ padding: '16px', backgroundColor: '#fff' }}>
+      <input type="text" value={inputValue} onChange={e => setInputValue(e.target.value)} />
+      <button onClick={handleSendMessage}>发送</button>
+    </div>
+  );
+};
+
+<Chat
+  MessageInput={CustomMessageInput}
+>
+  <ChatHeader />
+  <MessageList />
+  <MessageInput />
+</Chat>
+`}
+/>
+
+## 最佳实践
+
+1. **上下文使用**
+   - 在组件树的高层使用 Chat 组件
+   - 确保在渲染前有有效的会话上下文
+
+2. **组件自定义**
+   - 自定义组件会接收与默认组件相同的 props
+   - 使用提供的 hooks（如 `useChatHeaderProps`、`useChatContext`、`useMessageInputStore`）来访问聊天数据
+
+3. **样式处理**
+   - 使用 CSS modules 进行样式隔离
+   - 通过 `className` 和 `style` 属性应用自定义样式
+   - 遵循应用的设计系统规范
+
+## 相关组件
+
+- [ChatHeader（聊天头部）](?path=/docs/components-chat-chatheader--docs)
+- [MessageList（消息列表）](?path=/docs/components-chat-messagelist--docs)
+- [MessageInput（消息输入）](?path=/docs/components-chat-messageinput--docs)

package/src/components/Chat/index.ts

@@ -1,5 +1 @@
-import Server from './server';
-
-new Server();
 export * from './Chat';
-export * from './hooks/useCreateTUIChatStateContext';