@tencentcloud/chat-uikit-react 0.0.1

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

@@ -0,0 +1,9 @@
+.chat {
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: #FFFFFF;
+}

package/src/components/TUIChat/unitls.ts

@@ -0,0 +1,55 @@
+import TIM, { Message } from 'tim-js-sdk';
+import constant from '../../constants';
+import type { TUIChatStateContextValue } from '../../context';
+import { JSONStringToParse } from '../untils';
+
+export const handleMessage = (messageList:Array<Message>):Array<Message> => {
+  let customPayloadData = null;
+  return messageList.filter((item) => {
+    if (item.type === TIM.TYPES.MSG_CUSTOM) {
+      customPayloadData = JSONStringToParse(item?.payload?.data);
+    }
+    if (customPayloadData && customPayloadData?.businessID === constant.TYPE_TYPING) {
+      return false;
+    }
+    return true;
+  });
+};
+
+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,
+) => {
+  const list = [...messageList];
+  const index = list.findIndex((item) => item?.ID === message?.ID);
+  list[index] = message;
+  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;
+};

package/src/components/TUIChatHeader/TUIChatHeader.tsx

@@ -0,0 +1,41 @@
+import React, { PropsWithChildren } from 'react';
+import { Conversation } from 'tim-js-sdk';
+import { useTUIChatStateContext } from '../../context/TUIChatStateContext';
+import type { TUIChatHeaderDefaultProps } from './TUIChatHeaderDefault';
+import { TUIChatHeaderDefault } from './TUIChatHeaderDefault';
+
+import './styles/index.scss';
+import { useComponentContext } from '../../context';
+
+interface TUIChatHeaderProps {
+  title?: string,
+  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>,
+  conversation?: Conversation,
+}
+
+function UnMemoizedTUIChatHeader<T extends TUIChatHeaderProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    title,
+    conversation: propsConversation,
+    TUIChatHeader: propTUIChatHeader,
+  } = props;
+
+  const { conversation: contextConversation } = useTUIChatStateContext('TUIChatHeader');
+  const { TUIChatHeader: ContextTUIChatHeader } = useComponentContext('TUIChatHeader');
+
+  const TUIChatHeaderUIComponent = propTUIChatHeader
+  || ContextTUIChatHeader || TUIChatHeaderDefault;
+  const conversation = propsConversation || contextConversation;
+
+  return (
+    <TUIChatHeaderUIComponent
+      title={title}
+      conversation={conversation}
+    />
+  );
+}
+
+export const TUIChatHeader = React.memo(UnMemoizedTUIChatHeader) as
+typeof UnMemoizedTUIChatHeader;

package/src/components/TUIChatHeader/TUIChatHeaderDefault.tsx

@@ -0,0 +1,97 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import TIM, { Conversation, Group, Profile } from 'tim-js-sdk';
+import { Avatar } from '../Avatar';
+import { handleDisplayAvatar } from '../untils';
+
+import './styles/index.scss';
+import { Icon, IconTypes } from '../Icon';
+import { useTUIKitContext } from '../../context';
+
+export interface TUIChatHeaderDefaultProps {
+  title?: string,
+  avatar?: string,
+  isOnline?: boolean,
+  conversation?: Conversation,
+  pluginComponentList?: Array<React.ComponentType>,
+}
+
+function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderDefaultProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    title: propTitle,
+    avatar: propAvatar,
+    isOnline,
+    conversation,
+  } = props;
+
+  const [title, setTitle] = useState('');
+  const [avatar, setAvatar] = useState('');
+
+  useEffect(() => {
+    setTitle(propTitle);
+    setAvatar(propAvatar);
+    switch (conversation?.type) {
+      case TIM.TYPES.CONV_C2C:
+        handleC2C(conversation.userProfile);
+        break;
+      case TIM.TYPES.CONV_GROUP:
+        handleGroup(conversation.groupProfile);
+        break;
+      case TIM.TYPES.CONV_SYSTEM:
+        setTitle('System Notice');
+        break;
+      default:
+        setTitle('');
+        break;
+    }
+  }, [conversation]);
+
+  const handleC2C = (userProfile: Profile) => {
+    if (!title) {
+      setTitle(userProfile?.nick || userProfile?.userID);
+    }
+    if (!avatar) {
+      setAvatar(handleDisplayAvatar(userProfile.avatar));
+    }
+  };
+
+  const handleGroup = (groupProfile: Group) => {
+    if (!title) {
+      setTitle(groupProfile?.name || groupProfile?.groupID);
+    }
+    if (!avatar) {
+      setAvatar(handleDisplayAvatar(groupProfile.avatar, TIM.TYPES.CONV_GROUP));
+    }
+  };
+  const { setTUIManageShow } = useTUIKitContext();
+  const openTUIManage = () => {
+    setTUIManageShow(true);
+  };
+
+  return (
+    <header className="tui-chat-header" key={conversation?.conversationID}>
+      <div className={`tui-chat-header-left ${conversation?.type === TIM.TYPES.CONV_SYSTEM ? 'system' : ''}`}>
+        {conversation?.type !== TIM.TYPES.CONV_SYSTEM && <Avatar size={32} image={avatar} />}
+        <div className="header-content">
+          <h3 className="title">{title}</h3>
+        </div>
+      </div>
+      <div className="tui-chat-header-right">
+        <div className="header-handle">
+          <Icon className="header-handle-more" onClick={openTUIManage} type={IconTypes.ELLIPSE} width={18} height={5} />
+        </div>
+      </div>
+
+    </header>
+  );
+}
+
+const MemoizedTUIChatHeaderDefault = React.memo(TUIChatHeaderDefaultWithContext) as
+typeof TUIChatHeaderDefaultWithContext;
+
+export function TUIChatHeaderDefault(props: TUIChatHeaderDefaultProps)
+:React.ReactElement {
+  const options = { ...props };
+  return <MemoizedTUIChatHeaderDefault {...options} />;
+}

package/src/components/TUIChatHeader/index.ts

@@ -0,0 +1,2 @@
+export * from './TUIChatHeader';
+export * from './TUIChatHeaderDefault';

package/src/components/TUIChatHeader/styles/color.scss

@@ -0,0 +1,3 @@
+.tui-chat-header {
+  background: #FFFFFF;
+}

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

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

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

@@ -0,0 +1,32 @@
+.tui-chat-header {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  &-left {
+    display: flex;
+    align-items: center;
+    .header-content {
+      padding: 0 8px;
+    }
+
+  }
+  &-right {
+    .header-handle {
+      &-more {
+       padding: 10px 3px;
+      }
+    }
+  }
+  .title {
+    font-family: 'SF Pro Text';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 17px;
+  }
+  .system {
+    height: 32px;
+  }
+}

package/src/components/TUIConversation/TUIConversation.tsx

@@ -0,0 +1,44 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+import { TUIConversationProvider, TUIConversationContextValue } from '../../context/TUIConversationContext';
+import { TUIConversationList } from '../TUIConversationList';
+import { TUIProfile } from '../TUIProfile';
+
+interface TUIConversationProps {
+  createConversation?:(conversationID:string) => Promise<any>,
+  deleteConversation?:(conversationID:string) => Promise<any>,
+}
+
+export function UnMemoizedTUIConversation<T extends TUIConversationProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    children,
+    createConversation,
+    deleteConversation,
+  } = props;
+  const TUIConversationValue: TUIConversationContextValue = useMemo(
+    () => ({
+      createConversation,
+      deleteConversation,
+    }),
+    [
+      createConversation,
+      deleteConversation,
+    ],
+  );
+
+  return (
+    <TUIConversationProvider value={TUIConversationValue}>
+      {children || (
+        <>
+          <TUIConversationList />
+          <TUIProfile />
+        </>
+      )}
+    </TUIConversationProvider>
+  );
+}
+
+export const TUIConversation = React.memo(
+  UnMemoizedTUIConversation,
+)as typeof UnMemoizedTUIConversation;

package/src/components/TUIConversation/index.ts

@@ -0,0 +1 @@
+export * from './TUIConversation';

package/src/components/TUIConversationList/TUIConversationList.tsx

@@ -0,0 +1,142 @@
+import React, { useRef, useState } from 'react';
+import { Conversation } from 'tim-js-sdk';
+import { useTUIKitContext } from '../../context';
+import useConversationList from './hooks/useConversationList';
+import './index.scss';
+import { ConversationPreview, ConversationPreviewUIComponentProps } from '../ConversationPreview';
+import {
+  ConversationListContainer,
+  ConversationListContainerProps,
+} from '../ConversationPreview/ConversationListContainer';
+import { Profile } from '../Profile';
+import { ConversationSearchInput, ConversationSearchResult } from '../ConversationSearch';
+import { ConversationCreate } from '../ConversationCreate';
+import { Icon, IconTypes } from '../Icon';
+import { getDisplayTitle } from '../ConversationPreview/utils';
+import { useConversationUpdate } from './hooks/useConversationUpdate';
+
+interface Props {
+  filters?: object,
+  sort?: object,
+  options?: object,
+  Preview?: React.ComponentType<ConversationPreviewUIComponentProps>,
+  Container?: React.ComponentType<ConversationListContainerProps>,
+  onConversationListUpdated?: (
+    setConversationList: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
+    event: () => void
+  ) => void,
+}
+export function UnMemoTUIConversationList<T extends Props>(props: T):React.ReactElement {
+  const {
+    Preview,
+    Container = ConversationListContainer,
+    onConversationListUpdated,
+  } = props;
+  const {
+    tim, customClasses, conversation, setActiveConversation, setTUIProfileShow,
+  } = useTUIKitContext('TUIConversationList');
+  const [conversationUpdateCount, setConversationUpdateCount] = useState(0);
+  const forceUpdate = () => setConversationUpdateCount((count) => count + 1);
+
+  const activeConversationHandler = (
+    conversationList: Array<Conversation>,
+    setConversationList: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
+  ) => {
+    if (!conversationList.length) {
+      return;
+    }
+    setActiveConversation(conversation);
+  };
+  const {
+    conversationList,
+    setConversationList,
+  } = useConversationList(tim, activeConversationHandler);
+  useConversationUpdate(setConversationList, onConversationListUpdated, forceUpdate);
+  const [searchValue, setSearchValue] = useState('');
+  const [searchResult, setSearchResult] = useState(conversationList);
+  const [conversationCreated, setConversationCreated] = useState(false);
+
+  const handleSearchValueChange = (e) => {
+    setSearchValue(e.target?.value);
+    if (e.target?.value) {
+      const result = conversationList.filter(
+        // eslint-disable-next-line max-len
+        (item) => (getDisplayTitle(item) as string).toLocaleLowerCase().includes(e.target?.value.toLocaleLowerCase()),
+      );
+      setSearchResult(result);
+    } else {
+      setSearchResult([]);
+    }
+  };
+
+  const handleConversationCreate = () => {
+    setSearchValue('');
+    setConversationCreated(true);
+  };
+  const { myProfile } = useTUIKitContext();
+  const conversationListRef = useRef(null);
+  return (
+    <div className={`tui-conversation ${customClasses || ''}`} ref={conversationListRef}>
+      {
+        conversationCreated
+          ? (
+            <ConversationCreate
+              conversationList={conversationList}
+              setConversationCreated={setConversationCreated}
+            />
+          )
+          : (
+            <>
+              <Profile profile={myProfile} handleAvatar={() => { setTUIProfileShow(true); }} />
+              <div className="tui-conversation-header">
+                <ConversationSearchInput
+                  value={searchValue}
+                  clearable
+                  onChange={handleSearchValueChange}
+                />
+                <div className="tui-conversation-create-icon">
+                  <Icon
+                    onClick={handleConversationCreate}
+                    type={IconTypes.CREATE}
+                    height={24}
+                    width={24}
+                  />
+                </div>
+              </div>
+              <Container setConversationList={setConversationList}>
+                {/* eslint-disable-next-line no-nested-ternary */}
+                {conversationList.length === 0
+                  ? (
+                    <div className="no-result">
+                      <Icon className="no-result-icon" type={IconTypes.EFFORT} width={42} height={42} />
+                      <div className="no-result-message">No conversation</div>
+                    </div>
+                  )
+                  : searchValue
+                    ? (
+                      <ConversationSearchResult
+                        Preview={Preview}
+                        searchValue={searchValue}
+                        result={searchResult}
+                      />
+                    )
+                    : conversationList.map((item) => {
+                      const previewProps = {
+                        activeConversation: conversation,
+                        conversation: item,
+                        setActiveConversation,
+                        Preview,
+                        conversationUpdateCount,
+                      };
+                      return (
+                        <ConversationPreview key={item.conversationID} {...previewProps} />
+                      );
+                    })}
+              </Container>
+            </>
+          )
+      }
+    </div>
+  );
+}
+export const TUIConversationList = React.memo(UnMemoTUIConversationList);

package/src/components/TUIConversationList/hooks/useConversationList.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import TIM, { ChatSDK, Conversation } from 'tim-js-sdk';
+
+function useConversationList(
+  tim: ChatSDK,
+  activeConversationHandler?:(
+    conversationList: Array<Conversation>,
+    setConversationList: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
+  ) => void,
+) {
+  const [conversationList, setConversationList] = useState<Array<Conversation>>([]);
+  const queryConversation = async (queryType?: string) => {
+    if (queryType === 'reload') {
+      setConversationList([]);
+    }
+    const offset = queryType === 'reload' ? 0 : conversationList.length;
+
+    const res = await tim?.getConversationList();
+    if (res?.code === 0) {
+      const resConversationList = res.data.conversationList.filter(
+        (item) => item.type !== TIM.TYPES.CONV_SYSTEM,
+      );
+      const newConversationList = queryType === 'reload'
+        ? resConversationList
+        : [...conversationList, resConversationList];
+      setConversationList(newConversationList);
+      if (!offset && activeConversationHandler) {
+        activeConversationHandler(newConversationList, setConversationList);
+      }
+    }
+  };
+  useEffect(() => {
+    queryConversation('reload');
+  }, [tim]);
+  return {
+    conversationList,
+    setConversationList,
+  };
+}
+
+export default useConversationList;

package/src/components/TUIConversationList/hooks/useConversationUpdate.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import TIM, { Conversation } from 'tim-js-sdk';
+import { useTUIKitContext } from '../../../context';
+
+export const useConversationUpdate = (
+  setConversationList?: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
+  customHandler?: (
+    setConversationList: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
+    event: any
+  ) => void,
+  forceUpdate?: () => void,
+) => {
+  const { tim } = useTUIKitContext('useConversationUpdate');
+  useEffect(() => {
+    const onConversationListUpdated = (event:any) => {
+      if (setConversationList) {
+        setConversationList(event.data.filter(
+          (item) => item.type !== TIM.TYPES.CONV_SYSTEM,
+        ));
+      }
+      if (forceUpdate) {
+        forceUpdate();
+      }
+      if (customHandler && typeof customHandler === 'function') {
+        customHandler(setConversationList, event);
+      }
+    };
+    tim?.on(TIM.EVENT.CONVERSATION_LIST_UPDATED, onConversationListUpdated);
+    return () => {
+      tim?.off(TIM.EVENT.CONVERSATION_LIST_UPDATED, onConversationListUpdated);
+    };
+  }, [tim, customHandler]);
+};

package/src/components/TUIConversationList/index.scss

@@ -0,0 +1,36 @@
+.tui-conversation {
+  height: 100%;
+  min-width: 360px;
+  max-width: 400px;
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-right: 1px solid #F9FAFB;
+  text-align: initial;
+  .tui-conversation-header {
+    display: flex;
+    padding: 10px 20px;
+    .tui-conversation-create-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 10px;
+    }
+  }
+  .no-result {
+    padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &-icon {
+      margin: 100px auto 50px;
+    }
+    &-message {
+      color: #999999;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 22px;
+    }
+  }
+}

package/src/components/TUIConversationList/index.ts

@@ -0,0 +1,2 @@
+export * from './TUIConversationList';
+export * from './hooks/useConversationList';

package/src/components/TUIKit/TUIKit.tsx

@@ -0,0 +1,56 @@
+import React, { PropsWithChildren } from 'react';
+import { ChatSDK } from 'tim-js-sdk';
+import { useTUIKit } from './hooks/useTUIKit';
+import { useCreateTUIKitContext } from './hooks/useCreateTUIKitContext';
+import { TUIKitProvider } from '../../context/TUIKitContext';
+import './styles/index.scss';
+import { TUIConversation } from '../TUIConversation';
+import { TUIChat } from '../TUIChat';
+import { TUIManage } from '../TUIManage';
+
+export interface ChatProps {
+    tim?: ChatSDK | null,
+    customClasses?: unknown
+}
+export function TUIKit<
+  T extends ChatProps
+  >(
+  props:PropsWithChildren<T>,
+):React.ReactElement {
+  const { children, tim, customClasses } = props;
+  (window as any).tencent_cloud_im_csig_react_uikit_23F_xa = true;
+  const {
+    conversation,
+    setActiveConversation,
+    myProfile,
+    TUIManageShow,
+    setTUIManageShow,
+    TUIProfileShow,
+    setTUIProfileShow,
+  } = useTUIKit({ tim });
+  const chatContextValue = useCreateTUIKitContext({
+    tim,
+    conversation,
+    setActiveConversation,
+    customClasses,
+    myProfile,
+    TUIManageShow,
+    setTUIManageShow,
+    TUIProfileShow,
+    setTUIProfileShow,
+  });
+
+  return (
+    <TUIKitProvider value={chatContextValue}>
+      <div className="tui-kit">
+        {children || (
+          <>
+            <TUIConversation />
+            <TUIChat />
+            <TUIManage />
+          </>
+        )}
+      </div>
+    </TUIKitProvider>
+  );
+}

package/src/components/TUIKit/hooks/useCreateTUIKitContext.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { TUIKitContextValue } from '../../../context/TUIKitContext';
+
+export const useCreateTUIKitContext = (value:TUIKitContextValue) => {
+  const {
+    tim,
+    conversation,
+    customClasses,
+    setActiveConversation,
+    myProfile,
+    TUIManageShow,
+    setTUIManageShow,
+    TUIProfileShow,
+    setTUIProfileShow,
+  } = value;
+
+  const TUIKitContext = useMemo(
+    () => ({
+      tim,
+      conversation,
+      customClasses,
+      setActiveConversation,
+      myProfile,
+      TUIManageShow,
+      setTUIManageShow,
+      TUIProfileShow,
+      setTUIProfileShow,
+    }),
+    [
+      conversation,
+      customClasses,
+      tim,
+      TUIManageShow,
+      TUIProfileShow,
+      setTUIProfileShow,
+      myProfile,
+    ],
+  );
+  return TUIKitContext;
+};