@tencentcloud/chat-uikit-react 2.2.7 → 2.2.8

package/src/components/Plugins/index.tsx

@@ -9,23 +9,27 @@ import { usePluginsElement } from './hooks';
 import './styles/index.scss';
 
 export interface PluginsProps {
-  plugins?: Array<any>,
-  showNumber?: number,
-  MoreIcon?: any,
-  className?: string,
-  customClass?: string,
-  style?: any,
-  root?: any,
-  handleVisible?: (isVisible:any) => void,
-  showMore?: boolean,
+  plugins?: any[];
+  showNumber?: number;
+  MoreIcon?: any;
+  className?: string;
+  customClass?: string;
+  style?: any;
+  root?: any;
+  handleVisible?: (isVisible: any) => void;
+  showMore?: boolean;
+}
+
+export interface IPluginsRef {
+  closeMore?: () => void;
 }
 
 function PluginsWithContext<T extends PluginsProps>(
-  props:PropsWithChildren<T>,
- // eslint-disable-next-line 
+  props: PropsWithChildren<T>,
+  // eslint-disable-next-line
  // @ts-ignore
   ref,
-):React.ReactElement {
+): React.ReactElement {
   const {
     plugins = [],
     showNumber,
@@ -72,12 +76,12 @@ function PluginsWithContext<T extends PluginsProps>(
       });
     }
   };
-// eslint-disable-next-line
+  // eslint-disable-next-line
 // @ts-ignore
   return (
     ((showPicker && showPicker.length > 0) || (elements && elements?.length > 0)) && (
       <ul className={`plugin ${className}`}>
-        {showPicker && showPicker?.length > 0 && showPicker.map((Item, index:number) => {
+        {showPicker && showPicker?.length > 0 && showPicker.map((Item, index: number) => {
           const key = `${Item}${index}`;
           return (
             <li className="plugin-item" key={key}>
@@ -86,38 +90,38 @@ function PluginsWithContext<T extends PluginsProps>(
           );
         })}
         {
-        elements && elements?.length > 0 && (
-          <div className="plugin-popup" ref={pluginRef}>
-            <div role="menuitem" tabIndex={0} className="more" onClick={handleShow}>
-              {
-                !MoreIcon && <Icon width={20} height={20} type={IconTypes.ADD} />
-              }
-              {
-                MoreIcon && MoreIcon
-              }
+          elements && elements?.length > 0 && (
+            <div className="plugin-popup" ref={pluginRef}>
+              <div role="menuitem" tabIndex={0} className="more" onClick={handleShow}>
+                {
+                  !MoreIcon && <Icon width={20} height={20} type={IconTypes.ADD} />
+                }
+                {
+                  MoreIcon && MoreIcon
+                }
+              </div>
+              <Popup
+                className={`plugin-popup-box ${customClass}`}
+                style={style}
+                show={show}
+                close={handleShow}
+                root={root}
+                handleVisible={pluginHandleVisible}
+              >
+                <ul>
+                  {elements.map((Item, index: number) => {
+                    const key = `${Item}${index}`;
+                    return (
+                      <li className="plugin-item" key={key}>
+                        {Item}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </Popup>
             </div>
-            <Popup
-              className={`plugin-popup-box ${customClass}`}
-              style={style}
-              show={show}
-              close={handleShow}
-              root={root}
-              handleVisible={pluginHandleVisible}
-            >
-              <ul>
-                {elements.map((Item, index:number) => {
-                  const key = `${Item}${index}`;
-                  return (
-                    <li className="plugin-item" key={key}>
-                      {Item}
-                    </li>
-                  );
-                })}
-              </ul>
-            </Popup>
-          </div>
-        )
-      }
+          )
+        }
       </ul>
     )
   );

package/src/components/Profile/Profile.tsx

@@ -1,25 +1,50 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
+import { MyProfile } from './myProfile/index';
+
 import './styles/index.scss';
-import { Profile as TProfile } from '@tencentcloud/chat';
-import { Avatar, defaultUserAvatar } from '../Avatar';
-import { Icon, IconTypes } from '../Icon';
-
-export interface ProfileProps {
-  profile?: TProfile,
-  className?: string,
-  handleAvatar?: () => void,
+import { useMyProfile } from './hooks';
+import { TUIProfileDefault } from './ProfileDefault';
+import { useUIManager } from '../../context';
+
+interface TUIProfileProps {
+  className?: string;
+  TUIProfile?: React.ComponentType<any>;
 }
-export function Profile<T extends ProfileProps>(props: T) {
-  const { profile, className = '', handleAvatar } = props;
-  return (profile?.nick || profile?.userID) && (
-    <div className={`profile ${className}`}>
-      <div className="profile-content">
-        <Avatar size={32} image={profile.avatar || defaultUserAvatar} onClick={handleAvatar} />
-        <div className="profile-name">{profile.nick || profile.userID}</div>
-      </div>
-      <div className="profile-more">
-        <Icon type={IconTypes.ELLIPSE} width={18} height={5} onClick={handleAvatar} />
-      </div>
-    </div>
+
+function UnMemoizedProfile<T extends TUIProfileProps>(
+  props: PropsWithChildren<T>,
+): React.ReactElement {
+  const {
+    className,
+    TUIProfile: PropTUIProfile,
+  } = props;
+
+  const { myProfile, updateMyProfile } = useMyProfile();
+
+  const { setTUIProfileShow, TUIProfileShow } = useUIManager('TUIProfile');
+
+  const TUIProfileUIComponent = PropTUIProfile || TUIProfileDefault;
+
+  return (
+    <>
+      {/* //eslint-disable-next-line
+    @ts-ignore */}
+      <MyProfile
+        profile={myProfile}
+        handleAvatar={() => {
+          setTUIProfileShow && setTUIProfileShow(true);
+        }}
+      />
+      {TUIProfileShow && (
+        <TUIProfileUIComponent
+          className={className}
+          userInfo={myProfile}
+          update={updateMyProfile}
+        />
+      )}
+    </>
   );
 }
+
+export const Profile = React.memo(UnMemoizedProfile) as
+typeof UnMemoizedProfile;

package/src/components/Profile/index.ts

@@ -1 +1,2 @@
-export * from './Profile';
+export * from './Profile';
+export * from './ProfileDefault';

package/src/components/Profile/myProfile/MyProfile.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './styles/index.scss';
+import { Profile as TProfile } from '@tencentcloud/chat';
+import { Avatar, defaultUserAvatar } from '../../Avatar';
+import { Icon, IconTypes } from '../../Icon';
+
+export interface ProfileProps {
+  profile?: TProfile;
+  className?: string;
+  handleAvatar?: () => void;
+}
+export function MyProfile<T extends ProfileProps>(props: T) {
+  const { profile, className = '', handleAvatar } = props;
+  return (profile?.nick || profile?.userID) && (
+    <div className={`profile ${className}`}>
+      <div className="profile-content">
+        <Avatar size={32} image={profile.avatar || defaultUserAvatar} onClick={handleAvatar} />
+        <div className="profile-name">{profile.nick || profile.userID}</div>
+      </div>
+      <div className="profile-more">
+        <Icon type={IconTypes.ELLIPSE} width={18} height={5} onClick={handleAvatar} />
+      </div>
+    </div>
+  );
+}

package/src/components/Profile/myProfile/index.ts

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

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

@@ -0,0 +1,32 @@
+@use "../../../../styles/colors/color-theme" as *;
+
+.profile {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+  }
+
+  .profile-content {
+    display: flex;
+    align-items: center;
+
+    .profile-name {
+      font-weight: 600;
+      margin-left: 10px;
+      font-size: 14px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 200px;
+      overflow: hidden;
+
+      @include theme() {
+        color: get(text-color-primary);
+      }
+    }
+  }
+}

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

@@ -1,32 +1,2 @@
-@use "../../../styles/colors/color-theme" as *;
-
-.profile {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-  }
-
-  .profile-content {
-    display: flex;
-    align-items: center;
-
-    .profile-name {
-      font-weight: 600;
-      margin-left: 10px;
-      font-size: 14px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      max-width: 200px;
-      overflow: hidden;
-
-      @include theme() {
-        color: get(text-color-primary);
-      }
-    }
-  }
-}
+@import "./layout.scss";
+@import "./color.scss";

package/src/components/{TUIProfile → Profile}/styles/layout.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: 100%;
 
   @include theme() {
     color: get(text-color-primary);

package/src/components/index.ts

@@ -1,19 +1,21 @@
-export * from './TUIConversation';
-export * from './TUIConversationList';
-export * from './TUIChat';
+export * from './Chat';
+export * from './ConversationList';
+export * from './ConversationActions';
 export * from './ConversationPreview';
-export * from './TUIChatHeader';
-export * from './TUIMessageList';
-export * from './TUIMessage';
-export * from './TUIMessageInput';
-export * from './TUIProfile';
-export * from './Avatar';
 export * from './ConversationSearch';
-export * from './TUIManage';
+export * from './ConversationCreate';
+export * from './ChatHeader';
+export * from './MessageList';
+export * from './MessageElement';
+export * from './MessageInput';
+export * from './Profile';
+export * from './Avatar';
+export * from './ChatSetting';
 export * from './Popup';
 export * from './Checkbox';
 export * from './DivWithEdit';
 export * from './Icon';
+export * from './PlaceHolder';
 export * from './EmptyStateIndicator';
 export * from './Input';
 export * from './Model';
@@ -21,4 +23,4 @@ export * from './Plugins';
 export * from './Switch';
 export * from './Toast';
 export * from './Popup';
-export * from './TUIContact';
+export * from './Contact';

package/src/context/{TUIChatActionContext.tsx → ChatActionContext.tsx}

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useContext } from 'react';
 import { Message } from '@tencentcloud/chat';
 import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
-import { OperateMessageParams } from '../components/TUIChat/hooks/useHandleMessage';
+import { OperateMessageParams } from '../components/Chat/hooks/useHandleMessage';
 
 export interface TUIChatActionContextValue {
   updateMessage?: (messages: Message[]) => void;

package/src/context/ChatStateContext.tsx

@@ -0,0 +1,49 @@
+import React, {
+  PropsWithChildren, useContext, MutableRefObject, RefObject,
+} from 'react';
+import { Conversation, Message } from '@tencentcloud/chat';
+import { MessageListProps, TUIMessageInputBasicProps, TUIMessageProps } from '../components';
+import { OperateMessageParams } from '../components/Chat/hooks/useHandleMessage';
+
+export interface TUIChatStateContextValue {
+  conversation?: Conversation;
+  messageList?: Message[];
+  nextReqMessageID?: string;
+  isCompleted?: boolean;
+  init?: boolean;
+  highlightedMessageId?: string;
+  lastMessageID?: string;
+  isSameLastMessageID?: boolean;
+  messageListRef?: RefObject<HTMLDivElement>;
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>;
+  operateData?: OperateMessageParams;
+  noMore?: boolean;
+  messageConfig?: TUIMessageProps;
+  cloudCustomData?: string;
+  TUIMessageInputConfig?: TUIMessageInputBasicProps;
+  audioSource?: HTMLAudioElement | null;
+  vidoeSource?: HTMLVideoElement | null;
+  TUIMessageListConfig?: MessageListProps;
+  uploadPendingMessageList?: Message[];
+  firstSendMessage?: Message | null;
+  activeMessageID?: string;
+}
+
+export const TUIChatStateContext = React.createContext<TUIChatStateContextValue | null>(null);
+export function TUIChatStateContextProvider({ children, value }: PropsWithChildren<{
+  value: TUIChatStateContextValue;
+}>): React.ReactElement {
+  return (
+    <TUIChatStateContext.Provider value={value}>
+      {children}
+    </TUIChatStateContext.Provider>
+  );
+}
+
+export function useTUIChatStateContext(componentName?: string): TUIChatStateContextValue {
+  const contextValue = useContext(TUIChatStateContext);
+  if (!contextValue && componentName) {
+    return {} as TUIChatStateContextValue;
+  }
+  return (contextValue as unknown) as TUIChatStateContextValue;
+}

package/src/context/ComponentContext.tsx

@@ -1,23 +1,23 @@
 import React, { PropsWithChildren, useContext } from 'react';
 import { TUIChatHeaderDefaultProps } from '../components';
-import type{ EmptyStateIndicatorProps } from '../components/EmptyStateIndicator';
-import { MessageContextProps, TUIMessageProps } from '../components/TUIMessage';
+import type { EmptyStateIndicatorProps } from '../components/EmptyStateIndicator';
+import { MessageContextProps, TUIMessageProps } from '../components/MessageElement';
 
 export interface UnknowPorps {
-  [propsName: string]: any
+  [propsName: string]: any;
 }
 
 export interface ComponentContextValue {
-  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>,
-  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>,
-  EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>,
-  TUIMessageInput?: React.ComponentType<UnknowPorps>,
-  MessageContext?: React.ComponentType<MessageContextProps>,
-  InputPlugins?: React.ComponentType<UnknowPorps>,
-  MessagePlugins?: React.ComponentType<UnknowPorps>,
-  MessageCustomPlugins?: React.ComponentType<UnknowPorps>,
-  MessageTextPlugins?: React.ComponentType<UnknowPorps>,
-  InputQuote?: React.ComponentType<UnknowPorps>,
+  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>;
+  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>;
+  EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;
+  TUIMessageInput?: React.ComponentType<UnknowPorps>;
+  MessageContext?: React.ComponentType<MessageContextProps>;
+  InputPlugins?: React.ComponentType<UnknowPorps>;
+  MessagePlugins?: React.ComponentType<UnknowPorps>;
+  MessageCustomPlugins?: React.ComponentType<UnknowPorps>;
+  MessageTextPlugins?: React.ComponentType<UnknowPorps>;
+  InputQuote?: React.ComponentType<UnknowPorps>;
 }
 
 export const ComponentContext = React.createContext<ComponentContextValue | undefined>(undefined);

package/src/context/{TUIContactContext.tsx → ContactContext.tsx}

@@ -4,17 +4,17 @@ import React, {
 import { Friend, Profile, FriendApplication } from '@tencentcloud/chat';
 
 export interface TUIContactContextValue {
-  friendList?: Array<Friend>,
-  blocklistProfile?: Array<Profile>,
-  friendApplicationList?: Array<FriendApplication>,
-  blockList?: Array<string>,
-  isShowContactList?: boolean,
-  setShowContactList?: React.Dispatch<React.SetStateAction<boolean>>
+  friendList?: Friend[];
+  blocklistProfile?: Profile[];
+  friendApplicationList?: FriendApplication[];
+  blockList?: string[];
+  isShowContactList?: boolean;
+  setShowContactList?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 export const TUIContactContext = React.createContext<TUIContactContextValue>({});
-export function TUIContactContextProvider({ children, value }:PropsWithChildren<{
-    value: TUIContactContextValue
-}>):React.ReactElement {
+export function TUIContactContextProvider({ children, value }: PropsWithChildren<{
+  value: TUIContactContextValue;
+}>): React.ReactElement {
   return (
     <TUIContactContext.Provider value={value}>
       {children}
@@ -22,8 +22,7 @@ export function TUIContactContextProvider({ children, value }:PropsWithChildren<
   );
 }
 
-export function useTUIContactContext(componentName?:string)
-:TUIContactContextValue {
+export function useTUIContactContext(componentName?: string): TUIContactContextValue {
   const contextValue = useContext(TUIContactContext);
   if (!contextValue && componentName) {
     return {} as TUIContactContextValue;

package/src/context/ConversationListContext.tsx

@@ -0,0 +1,113 @@
+import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
+import TUIChatEngine, { IConversationModel, StoreName, TUIConversationService, TUIStore } from '@tencentcloud/chat-uikit-engine';
+
+interface ConversationListProviderProps {
+  /** Specifies a function to filter conversations in the conversation list. */
+  filter?: (conversationList: IConversationModel[]) => IConversationModel[];
+  /** Specifies a function to sort conversations in the conversation list. */
+  sort?: (conversationList: IConversationModel[]) => IConversationModel[];
+}
+interface ConversationListContextType {
+  conversationList: IConversationModel[];
+  filteredAndSortedConversationList: IConversationModel[];
+  currentConversation: IConversationModel | undefined;
+  setCurrentConversation: (conversation: IConversationModel) => void;
+  isLoading: boolean;
+  isLoadError: boolean;
+}
+
+const ConversationListContext = React.createContext<ConversationListContextType | null>(null);
+
+function ConversationListProvider(props: PropsWithChildren<Partial<ConversationListProviderProps>>) {
+  const {
+    filter,
+    sort,
+    children,
+  } = props;
+
+  const [conversationList, setConversationList] = useState<IConversationModel[]>([]);
+
+  const [currentConversation, _setCurrentConversation] = useState<IConversationModel | undefined>(undefined);
+
+  const [filteredAndSortedConversationList, setFilteredAndSortedConversationList] = useState<IConversationModel[]>([]);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoadError, setIsLoadError] = useState(false);
+
+  useEffect(() => {
+    TUIStore.watch(StoreName.CONV, {
+      conversationList: onConversationListUpdated,
+      currentConversation: onCurrentConversationUpdated,
+    });
+    TUIStore.watch(StoreName.USER, {
+      netStateChange: onNetStateChange,
+    });
+
+    return () => {
+      TUIStore.unwatch(StoreName.CONV, {
+        conversationList: onConversationListUpdated,
+        currentConversation: onCurrentConversationUpdated,
+      });
+      TUIStore.unwatch(StoreName.USER, {
+        netStateChange: onNetStateChange,
+      });
+    };
+  }, []);
+
+  useEffect(() => {
+    // filter & sort conversationList
+    let _conversationList = conversationList;
+    filter && (_conversationList = filter(_conversationList));
+    sort && (_conversationList = sort(_conversationList));
+    setFilteredAndSortedConversationList(_conversationList);
+  }, [conversationList, sort, filter]);
+
+  function onConversationListUpdated(list: IConversationModel[]) {
+    // original conversationList
+    setConversationList(list);
+    if (isLoading) {
+      setIsLoading(false);
+    }
+  }
+
+  function onCurrentConversationUpdated(conversation: IConversationModel) {
+    _setCurrentConversation(conversation);
+  }
+
+  function onNetStateChange(netState: string) {
+    if (netState === TUIChatEngine.TYPES.NET_STATE_DISCONNECTED) {
+      setIsLoadError(true);
+    } else {
+      setIsLoadError(false);
+    }
+  }
+
+  function setCurrentConversation(conversation: IConversationModel) {
+    TUIConversationService.switchConversation(conversation?.conversationID);
+  }
+
+  const value = {
+    conversationList,
+    filteredAndSortedConversationList,
+    currentConversation,
+    setCurrentConversation,
+    isLoading,
+    isLoadError,
+  };
+
+  return (
+    <ConversationListContext.Provider value={value}>
+      {children}
+    </ConversationListContext.Provider>
+  );
+}
+
+function useConversationList() {
+  const context = useContext(ConversationListContext);
+  if (!context) {
+    throw new Error('useConversationList must be used within a useConversationList');
+  }
+  return context;
+}
+
+export { useConversationList, ConversationListProvider, ConversationListContextType, ConversationListProviderProps };

package/src/context/LanguageContext.tsx

@@ -6,6 +6,7 @@ import {
   PropsWithChildren,
 } from 'react';
 import { useTranslation } from 'react-i18next';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 
 interface LanguageContextType {
   language: string;

package/src/context/MessageContext.tsx

@@ -0,0 +1,55 @@
+import React, { PropsWithChildren, ReactEventHandler, useContext } from 'react';
+import { Message } from '@tencentcloud/chat';
+import { MessagePluginsProps } from '../components';
+
+export enum messageShowType {
+  IN = 'in',
+  OUT = 'out',
+  ALL = 'all',
+  NONE = 'none',
+}
+
+export interface TUIMessageContextValue {
+  message?: Message;
+  handleDelete?: ReactEventHandler;
+  CustemElement?: React.ComponentType<{ message: Message }>;
+  TextElement?: React.ComponentType<{ message: Message }>;
+  ImageElement?: React.ComponentType<{ message: Message }>;
+  VideoElement?: React.ComponentType<{ message: Message }>;
+  AudioElement?: React.ComponentType<{ message: Message }>;
+  FileElement?: React.ComponentType<{ message: Message }>;
+  MergerElement?: React.ComponentType<{ message: Message }>;
+  LocationElement?: React.ComponentType<{ message: Message }>;
+  FaceElement?: React.ComponentType<{ message: Message }>;
+  filter?: (data: Message) => void;
+  isShowTime?: boolean;
+  isShowRead?: boolean;
+  plugin?: MessagePluginsProps;
+  prefix?: React.ReactElement | string;
+  suffix?: React.ReactElement | string;
+  customName?: React.ReactElement;
+  showAvatar?: messageShowType;
+  showName?: messageShowType;
+  customAvatar?: React.ReactElement;
+  isShowProgress?: boolean;
+  Progress?: React.ComponentType<{ message: Message }>;
+}
+
+export const TUIMessageContext = React.createContext<TUIMessageContextValue>({});
+export function TUIMessageContextProvider({ children, value }: PropsWithChildren<{
+  value: TUIMessageContextValue;
+}>): React.ReactElement {
+  return (
+    <TUIMessageContext.Provider value={value}>
+      {children}
+    </TUIMessageContext.Provider>
+  );
+}
+
+export function useTUIMessageContext(componentName?: string): TUIMessageContextValue {
+  const contextValue = useContext(TUIMessageContext);
+  if (!contextValue && componentName) {
+    return {} as TUIMessageContextValue;
+  }
+  return (contextValue as unknown) as TUIMessageContextValue;
+}