@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

package/src/components/Chat/Chat.stories.tsx

@@ -0,0 +1,215 @@
+/* eslint-disable import/order */
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import { Chat } from './Chat';
+import { ChatHeader } from '../../core/components/ChatHeader';
+import { MessageInput } from '../../core/components/MessageInput';
+import { MessageList } from '../../core/components/MessageList';
+import { Avatar } from '../Avatar';
+import { useMessageListStore, useUIManagerState } from '../../states';
+import { useChatHeaderStore } from '../../core/stores/useChatHeaderStore';
+import { ChatHeaderActions } from '../../core/components/ChatHeader/ChatHeaderActions';
+import { startCall } from '../../utils/call';
+import { TUICallKit } from '@tencentcloud/call-uikit-react';
+
+const meta: Meta<typeof Chat> = {
+  title: 'Components/Chat/Chat',
+  component: Chat,
+  argTypes: {
+    className: {
+      description: 'custom class names of root element',
+      control: 'text',
+      table: {
+        type: { summary: 'string | undefined' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    style: {
+      description: 'custom style of root element',
+      control: 'text',
+      table: {
+        type: { summary: 'React.CSSProperties | undefined' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  parameters: {
+    layout: 'centered',
+    order: 1,
+  },
+  decorators: [
+    (Story) => {
+      const { conversationList, switchConversation } = useUIManagerState();
+
+      useEffect(() => {
+        if (conversationList?.[0]) {
+          switchConversation(conversationList[0].conversationID);
+        }
+      }, []);
+
+      return (
+        <div style={{ width: '100%', minHeight: '500px' }}>
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Chat>
+      <ChatHeader />
+      <MessageList />
+      <MessageInput />
+    </Chat>
+  ),
+};
+
+export const WithCustomHeaderButUseDefaultCallKit: Story = {
+  name: 'With Custom Header But Use Default <ChatHeaderActions />',
+  render: () => (
+    <Chat>
+      <div className="custom-header" style={{ padding: '16px', backgroundColor: '#f0f0f0', border: '1px solid #000' }}>
+        <section style={{ marginBottom: 16 }}>
+          <h1>Custom Header</h1>
+          <div>I am custom title</div>
+          <div>
+            Expected title:&nbsp;
+            Title
+          </div>
+        </section>
+        <section style={{ marginBottom: 16 }}>
+          <Avatar image="https://picsum.photos/200" size={24} />
+        </section>
+        <section>
+          <ChatHeaderActions chatHeaderActions={['chatSetting', 'audioCall', 'videoCall']} />
+        </section>
+      </div>
+      <MessageList style={{ height: 600 }} />
+      <MessageInput />
+    </Chat>
+  ),
+};
+
+export const WithCustomHeaderAndCustomActions: Story = {
+  name: 'With Custom Header And Custom <ChatHeaderActions />',
+  render: () => {
+    function CustomChatHeaderActions() {
+      const {
+        title,
+      } = useChatHeaderStore();
+      return (
+        <div className="custom-header" style={{ padding: '16px', backgroundColor: '#f0f0f0', border: '1px solid #000' }}>
+          <section style={{ marginBottom: 16 }}>
+            <h1>Custom Header</h1>
+            <div>I am custom title</div>
+            <div>
+              Expected title:&nbsp;
+              {title}
+            </div>
+          </section>
+          <section style={{ marginBottom: 16 }}>
+            <Avatar image="https://picsum.photos/200" size={24} />
+          </section>
+          <section>
+            <button onClick={() => {
+              startCall({
+                callMediaType: 1,
+                userIDList: ['RECEIVER_USER_ID'],
+                callType: 'C2C',
+              });
+            }}
+            >
+              audio call
+            </button>
+            <button onClick={() => {
+              startCall({
+                callMediaType: 2,
+                userIDList: ['RECEIVER_USER_ID'],
+                callType: 'C2C',
+              });
+            }}
+            >
+              video call
+            </button>
+          </section>
+        </div>
+      );
+    }
+
+    return (
+      <Chat>
+        <TUICallKit style={{ position: 'fixed' }} />
+        <CustomChatHeaderActions />
+        <MessageList />
+        <MessageInput />
+      </Chat>
+    );
+  },
+};
+
+export const WithCustomMessageList: Story = {
+  name: 'With Custom MessageList',
+  render: () => {
+    const {
+      messageList,
+    } = useMessageListStore();
+    return (
+      <Chat>
+        <ChatHeader />
+        <div className="custom-message-list" style={{ padding: '16px', backgroundColor: '#fff' }}>
+          {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>
+        <MessageInput />
+      </Chat>
+    );
+  },
+};
+
+export const WithCustomMessageInput: Story = {
+  name: 'With Custom MessageInput',
+  render: () => (
+    <Chat>
+      <ChatHeader />
+      <MessageList />
+      <div className="custom-message-list" style={{ padding: '16px', backgroundColor: '#fff' }}>
+        <input type="text" />
+        <button>
+          发送
+        </button>
+      </div>
+    </Chat>
+  ),
+};
+
+export const WithCustomStyles: Story = {
+  args: {
+    className: 'custom-chat',
+    style: {
+      backgroundColor: '#f5f5f5',
+      padding: '20px',
+      borderRadius: '8px',
+      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+    },
+    children: (
+      <>
+        <ChatHeader />
+        <MessageList />
+        <MessageInput />
+      </>
+    ),
+  },
+};

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 };