@tencentcloud/chat-uikit-react 2.2.7 → 2.2.8

package/src/components/{TUIManage → ChatSetting}/styles/index.scss

@@ -48,10 +48,12 @@
       }
 
       .info-id {
-        font-size: 12px;
-        color: #666;
+        font-size: 16px;
         margin-bottom: 30px;
         text-align: center;
+        @include theme() {
+          color: get(text-color-secondary);
+        }
       }
     }
 

package/src/components/Checkbox/index.tsx

@@ -4,21 +4,21 @@ import { Icon, IconTypes } from '../Icon';
 import './styles/index.scss';
 
 interface onChangeParams {
-  checked?: boolean,
-  value?: any,
+  checked?: boolean;
+  value?: any;
 }
 
 interface SelectProps {
-  checked?: boolean,
-  className?: string,
-  onChange?: (data?: onChangeParams) => void,
-  value?: any,
-  id?: string,
+  checked?: boolean;
+  className?: string;
+  onChange?: (data?: onChangeParams) => void;
+  value?: any;
+  id?: string;
 }
 
 export function Checkbox<
-T extends SelectProps
->(props:React.PropsWithChildren<T>) {
+  T extends SelectProps,
+>(props: React.PropsWithChildren<T>) {
   const {
     checked: propsChecked = false,
     className,

package/src/components/{TUIContact/TUIContact.tsx → Contact/Contact.tsx}

@@ -3,16 +3,16 @@ import { useTranslation } from 'react-i18next';
 import {
   TUIContactContextProvider,
   TUIContactContextValue,
-} from '../../context/TUIContactContext';
+} from '../../context/ContactContext';
 import { isH5 } from '../../utils/env';
 import { useUIManager } from '../../context';
 import useTUIContact from './hooks/useTUIContact';
-import { TUIContactList } from './TUIContactList/TUIContactList';
-import { TUIContactSearch } from '../TUIContactSearch/TUIContactSearch';
+import { ContactList } from './ContactList/ContactList';
+import { ContactSearch } from '../ContactSearch/ContactSearch';
 import { Icon, IconTypes } from '../Icon';
 import './index.scss';
 
-export function UnMemoizedTUIContact<T>(
+export function UnMemoizedContact<T>(
   props: PropsWithChildren<T>,
 ): React.ReactElement {
   const { children } = props;
@@ -57,41 +57,41 @@ export function UnMemoizedTUIContact<T>(
     <TUIContactContextProvider value={TUIContactValue}>
       {children || (
         <div className={`tui-contacts ${isH5 ? 'tui-contacts-h5' : ''} `}>
-            {!isShowAddFriend && (
-              <>
-                <div className="tui-contacts-header">
-                  <div className="tui-contact-input">
-                    <TUIContactSearch />
-                  </div>
-                  <Icon
-                    onClick={addFriend}
-                    type={IconTypes.ADDFRIEND}
-                    width={24}
-                    height={24}
-                  />
+          {!isShowAddFriend && (
+            <>
+              <div className="tui-contacts-header">
+                <div className="tui-contact-input">
+                  <ContactSearch />
                 </div>
-                <TUIContactList />
-              </>
-            )}
-            {isShowAddFriend && (
-              <>
-                <div className="tui-contacts-add-header">
-                  <Icon
-                    onClick={addFriendBack}
-                    type={IconTypes.BACK}
-                    width={9}
-                    height={16}
-                  />
-                  <div className="tui-contacts-add-header-title">
-                    {t('TUIContact.Add Friend')}
-                  </div>
+                <Icon
+                  onClick={addFriend}
+                  type={IconTypes.ADDFRIEND}
+                  width={24}
+                  height={24}
+                />
+              </div>
+              <ContactList />
+            </>
+          )}
+          {isShowAddFriend && (
+            <>
+              <div className="tui-contacts-add-header">
+                <Icon
+                  onClick={addFriendBack}
+                  type={IconTypes.BACK}
+                  width={9}
+                  height={16}
+                />
+                <div className="tui-contacts-add-header-title">
+                  {t('TUIContact.Add Friend')}
                 </div>
-                <TUIContactSearch />
-              </>
-            )}
+              </div>
+              <ContactSearch />
+            </>
+          )}
         </div>
       )}
     </TUIContactContextProvider>
   );
 }
-export const TUIContact = React.memo(UnMemoizedTUIContact);
+export const Contact = React.memo(UnMemoizedContact);

package/src/components/{TUIContact/TUIContactInfo/TUIContactInfo.tsx → Contact/ContactInfo/ContactInfo.tsx}

@@ -11,10 +11,10 @@ import { FriendApplicationInfo } from './friendApplication';
 import './index.scss';
 
 interface TUIContactInfoProps {
-  className?: string,
-  showChats?: () => void,
+  className?: string;
+  showChats?: () => void;
 }
-export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
+export function UnMemoizedContactInfo<T extends TUIContactInfoProps>(
   props: PropsWithChildren<T>,
 ): React.ReactElement {
   const { showChats } = props;
@@ -32,4 +32,4 @@ export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
     </div>
   );
 }
-export const TUIContactInfo = React.memo(UnMemoizedTUIContactInfo);
+export const ContactInfo = React.memo(UnMemoizedContactInfo);

package/src/components/{TUIContact/TUIContactList/TUIContactList.tsx → Contact/ContactList/ContactList.tsx}

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import TencentCloudChat from '@tencentcloud/chat';
 import { isH5 } from '../../../utils/env';
 import { useUIManager, useTUIContactContext } from '../../../context';
-import useContactInfo from '../TUIContactInfo/hooks/useContactInfo';
+import useContactInfo from '../ContactInfo/hooks/useContactInfo';
 import useTUIContact from '../hooks/useTUIContact';
 import { Avatar, defaultUserAvatar } from '../../Avatar';
 import rightArrow from '../../Icon/images/right-arrow.svg';
@@ -18,7 +18,7 @@ interface RenderContactListProps {
   setShow: (value: boolean) => void;
 }
 
-function UnMemoizedTUIContactList<T>(): React.ReactElement {
+function UnMemoizedContactList<T>(): React.ReactElement {
   const { setActiveContact } = useUIManager();
   const { t } = useTranslation();
   const {
@@ -172,4 +172,4 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
     )
   );
 }
-export const TUIContactList = React.memo(UnMemoizedTUIContactList);
+export const ContactList = React.memo(UnMemoizedContactList);

package/src/components/Contact/index.ts

@@ -0,0 +1,3 @@
+export * from './ContactList/ContactList';
+export * from './ContactInfo/ContactInfo';
+export * from './Contact';

package/src/components/{TUIContactSearch/TUIContactSearch.tsx → ContactSearch/ContactSearch.tsx}

@@ -7,7 +7,7 @@ import { Avatar, defaultUserAvatar } from '../Avatar';
 import { Input } from '../Input';
 import './index.scss';
 
-export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
+export function UnMemoizedContactSearch<T>(): React.ReactElement {
   const { setActiveContact } = useUIManager('TUIContactSearch');
   const { t } = useTranslation();
   const { friendList, setShowContactList } = useTUIContactContext('TUIContactList');
@@ -47,7 +47,7 @@ export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
   const setContactProfile = async (profile: any) => {
     const isFriend = await checkFriend(profile);
     if (isFriend) {
-      const friendProfile = friendList?.find((item) => item.userID === searchedValue);
+      const friendProfile = friendList?.find(item => item.userID === searchedValue);
       friendProfile && setActiveContact({ type: 'friend', data: friendProfile });
       return;
     }
@@ -72,11 +72,12 @@ export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
       />
       {isShowSearchResult && searchResult.length === 0
         ? (
-          <div className="tui-contact-search-item">
-            {t('TUIContact.No Result')}
+            <div className="tui-contact-search-item">
+              {t('TUIContact.No Result')}
 
-          </div>
-        ) : searchResult.map((item, index) => {
+            </div>
+          )
+        : searchResult.map((item, index) => {
           const { userID, avatar, nick } = item;
           return (
             <div
@@ -96,4 +97,4 @@ export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
     </div>
   );
 }
-export const TUIContactSearch = React.memo(UnMemoizedTUIContactSearch);
+export const ContactSearch = React.memo(UnMemoizedContactSearch);

package/src/components/ConversationActions/ConversationActions.scss

@@ -0,0 +1,45 @@
+@use "../../styles/colors/color-theme" as *;
+
+.uikit-conversation-actions {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1 1;
+
+  .uikit-conversation-actions__container {
+    top: 0;
+    right: 0;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 10%);
+    bottom: initial;
+    padding: 14px 0;
+    box-sizing: border-box;
+    text-align: start;
+    white-space: nowrap;
+
+    .uikit-conversation-actions__item {
+      font-size: 16px;
+      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+      font-family: PingFangSC-Medium;
+      line-height: 19px;
+      padding: 6px 16px;
+      cursor: pointer;
+      font-weight: 500;
+      box-sizing: border-box;
+
+      &:hover {
+        @include theme() {
+          background-color: get(dropdown-color-active);
+        }
+      }
+    }
+
+    .uikit-conversation-actions__item--delete {
+      @include theme() {
+        color: get(text-color-error);
+      }
+    }
+  }
+
+  .uikit-conversation-actions__popup-icon {
+    transform: scale(1.5);
+  }
+}

package/src/components/ConversationActions/ConversationActions.tsx

@@ -0,0 +1,172 @@
+// ConversationActions.tsx
+import React, { useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import cs from 'classnames';
+
+import { Plugins } from '../Plugins';
+import { Icon, IconTypes } from '../Icon';
+
+import './ConversationActions.scss';
+
+interface IConversationActionsConfig {
+  /** Determines whether the pin button appears on the conversation actions list view. (Default: True) */
+  enablePin?: boolean;
+  /**  Determines whether the mute button appears on the conversation actions list view. (Default: True) */
+  enableMute?: boolean;
+  /** Determines whether the delete button appears on the conversation actions list view. (Default: True) */
+  enableDelete?: boolean;
+  /** Function to override the default behavior when user pin or unpin a conversation.  */
+  onConversationPin?: (conversation: IConversationModel, e?: React.MouseEvent) => void;
+  /** Function to override the default behavior when user mute or unmute a conversation. */
+  onConversationMute?: (conversation: IConversationModel, e?: React.MouseEvent) => void;
+  /** Function to override the default behavior when user delete a conversation. */
+  onConversationDelete?: (conversation: IConversationModel, e?: React.MouseEvent) => void;
+  /**
+   * An object containing custom conversation actions (key) and object (value).
+   * Each value is an object with the following properties:
+   * enable: Determines whether the custom action is enabled. (Default: True)
+   * label: The label of the custom action.
+   * onClick: The function to be called when the custom action is clicked.
+   * Note: The key of the custom action must be unique.
+   */
+  customConversationActions?: Record<string, IConversationActionItem>;
+  /** The icon react element to be displayed in the action popup. */
+  PopupIcon?: React.ReactElement;
+  /** An array of react elements to be displayed in the action popup. */
+  PopupElements?: React.ReactElement[];
+  /** The function to be called when the action popup is clicked. */
+  onClick?: (e: React.MouseEvent, key?: string, conversation?: IConversationModel) => void;
+}
+
+interface IConversationActionsProps extends IConversationActionsConfig {
+  /** The conversation model. */
+  conversation: IConversationModel;
+  /** The class name of the root element. */
+  className?: string;
+  /** The style of the root element. */
+  style?: React.CSSProperties;
+}
+
+interface IConversationActionItem {
+  /** Determines whether the custom action is enabled. (Default: True)  */
+  enable?: boolean;
+  /** label: The label of the custom action. */
+  label: string;
+  /** onClick: The function to be called when the custom action is clicked. */
+  onClick: (conversation: IConversationModel, e?: React.MouseEvent) => void;
+}
+
+interface IPluginsRef {
+  closeMore?: () => void;
+}
+
+const ConversationActions = (props: IConversationActionsProps) => {
+  const {
+    conversation,
+    PopupIcon,
+    enablePin = true,
+    enableMute: isMuteEnabled = true,
+    enableDelete: isDeleteEnabled = true,
+    onConversationPin,
+    onConversationMute,
+    onConversationDelete,
+    customConversationActions,
+    PopupElements,
+    onClick,
+    className,
+    style,
+  } = props;
+
+  const { t } = useTranslation();
+  const pluginsRef = useRef<IPluginsRef>(null);
+  const [conversationActions, setConversationActions] = React.useState<Record<string, IConversationActionItem>>({});
+
+  const defaultConversationActions: Record<string, IConversationActionItem> = {
+    delete: {
+      enable: isDeleteEnabled,
+      label: t('TUIConversation.Delete'),
+      onClick: onConversationDelete || ((_conversation: IConversationModel) => { _conversation.deleteConversation(); }),
+    },
+    pin: {
+      enable: enablePin,
+      label: t(conversation.isPinned ? 'TUIConversation.Unpin' : 'TUIConversation.Pin'),
+      onClick: onConversationPin || ((_conversation: IConversationModel) => { _conversation.pinConversation(); }),
+    },
+    mute: {
+      enable: isMuteEnabled,
+      label: t(conversation.isMuted ? 'TUIConversation.Unmute' : 'TUIConversation.Mute'),
+      onClick: onConversationMute || ((_conversation: IConversationModel) => { _conversation.muteConversation(); }),
+    },
+  };
+
+  useEffect(() => {
+    setConversationActions({
+      ...defaultConversationActions,
+      ...customConversationActions,
+    });
+  }, [conversation, customConversationActions]);
+
+  const onClickMenuItem = (e: React.MouseEvent, key: string) => {
+    pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
+    onClick?.(e, key, conversation);
+    conversationActions[key]?.onClick(conversation, e);
+  };
+
+  return (
+    <div
+      className={cs({
+        'uikit-conversation-actions': true,
+        className,
+      })}
+      style={style}
+      onClick={(e: React.MouseEvent) => {
+        e.stopPropagation();
+      }}
+    >
+      <Plugins
+        customClass="uikit-conversation-actions__container"
+        ref={pluginsRef}
+        plugins={(
+          PopupElements
+          || (
+            Object.keys(conversationActions).map((key: string) => {
+              if (conversationActions[key].enable === false) return null;
+              return (
+                <div
+                  key={key}
+                  className={cs(
+                    'uikit-conversation-actions__item',
+                    [`uikit-conversation-actions__item--${key}`],
+                  )}
+                  onClick={e => onClickMenuItem(e, key)}
+                >
+                  {conversationActions[key].label}
+                </div>
+              );
+            })
+          )
+        )}
+        showNumber={0}
+        MoreIcon={(
+          PopupIcon
+          || (
+            <Icon
+              className="uikit-conversation-actions__popup-icon"
+              width={16}
+              height={16}
+              type={IconTypes.MORE}
+            />
+          )
+        )}
+      />
+    </div>
+  );
+};
+
+export {
+  ConversationActions,
+  IConversationActionsProps,
+  IConversationActionItem,
+  IConversationActionsConfig,
+};

package/src/components/ConversationActions/index.ts

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

package/src/components/ConversationCreate/ConversationCreate.tsx

@@ -1,31 +1,56 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import './styles/index.scss';
-import { Conversation } from '@tencentcloud/chat';
+import { CreateGroupParams, IConversationModel, TUIConversationService } from '@tencentcloud/chat-uikit-engine';
+import cs from 'classnames';
+
 import { Icon, IconTypes } from '../Icon';
+import { ConversationCreateButton } from './ConversationCreateButton';
 import { ConversationCreateUserSelectList } from './ConversationCreateUserSelectList';
-import { ConversationCreatGroupDetail } from './ConversationCreatGroupDetail';
-import { useUIKit } from '../../context';
-import { useConversation } from '../../hooks';
+import { ConversationCreateGroupDetail } from './ConversationCreateGroupDetail';
+
+import './styles/index.scss';
 
-export interface ConversationCreateProps {
-  className?: string,
-  setConversationCreated: React.Dispatch<React.SetStateAction<boolean>>,
-  conversationList?: Array<Conversation>
+export interface IConversationCreateProps {
+  visible?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  onBeforeCreateConversation?: (params: string | CreateGroupParams) => string | CreateGroupParams;
+  onConversationCreated?: (conversation: IConversationModel) => void;
+  onChangeCreateModelVisible: (visible: boolean) => void;
+  conversationList?: IConversationModel[];
 }
 export enum PageStateTypes {
-  USER_SELECT='Next',
-  CREATE_DETAIL='Create',
-  GROUP_TYPE='GroupType',
+  USER_SELECT = 'Next',
+  CREATE_DETAIL = 'Create',
+  GROUP_TYPE = 'GroupType',
 }
-export function ConversationCreate<T extends ConversationCreateProps>(props:T) {
-  const { className = '', setConversationCreated, conversationList = [] } = props;
+export function ConversationCreate<T extends IConversationCreateProps>(props: T) {
+  const {
+    visible = true,
+    className,
+    style,
+    onChangeCreateModelVisible,
+    conversationList = [],
+    onBeforeCreateConversation,
+    onConversationCreated,
+  } = props;
   const { t } = useTranslation();
+
+  const [showCreateModel, setShowCreateModel] = useState(false);
   const [isCreateGroup, setIsCreateGroup] = useState(false);
   const [pageState, setPageState] = useState<PageStateTypes>(PageStateTypes.USER_SELECT);
   const [selectList, setSelectList] = useState([]);
-  const { chat } = useUIKit();
-  const { createConversation } = useConversation(chat);
+
+  const _onConversationCreated = (conversation: IConversationModel) => {
+    setShowCreateModel(false);
+    resetCreatePageState();
+    TUIConversationService.switchConversation(conversation.conversationID);
+    onConversationCreated?.(conversation);
+  };
+
+  useEffect(() => {
+    onChangeCreateModelVisible(showCreateModel);
+  }, [onChangeCreateModelVisible, showCreateModel]);
 
   const back = () => {
     if (isCreateGroup) {
@@ -43,39 +68,69 @@ export function ConversationCreate<T extends ConversationCreateProps>(props:T) {
         default:
       }
     } else {
-      setConversationCreated(false);
+      setShowCreateModel(false);
+      resetCreatePageState();
     }
   };
-  return useMemo(() => (
-    <>
-      <div className="tui-conversation-create-header">
-        <Icon onClick={back} type={IconTypes.BACK} width={9} height={16} />
-        <div className="title">{ t(!isCreateGroup ? 'TUIConversation.Start chat' : 'TUIConversation.Add Participants')}</div>
+
+  function resetCreatePageState() {
+    setIsCreateGroup(false);
+    setPageState(PageStateTypes.USER_SELECT);
+    setSelectList([]);
+  }
+
+  return useMemo(() => {
+    if (!visible) {
+      return null;
+    }
+
+    return (
+      <div
+        className={cs(
+          'uikit-conversation-create-container',
+          className,
+        )}
+        style={style}
+      >
+        {!showCreateModel && (
+          <ConversationCreateButton
+            onClick={() => setShowCreateModel(true)}
+          />
+        )}
+        {showCreateModel && (
+          <div className="tui-conversation-create">
+            <div className="tui-conversation-create-header">
+              <Icon onClick={back} type={IconTypes.BACK} width={9} height={16} />
+              <div className="title">{t(!isCreateGroup ? 'TUIConversation.Start chat' : 'TUIConversation.Add Participants')}</div>
+            </div>
+            {
+              pageState === PageStateTypes.USER_SELECT
+                ? (
+                    <ConversationCreateUserSelectList
+                      isCreateGroup={isCreateGroup}
+                      setIsCreateGroup={setIsCreateGroup}
+                      selectList={selectList}
+                      setSelectList={setSelectList as React.Dispatch<React.SetStateAction<any[]>>}
+                      conversationList={conversationList}
+                      onBeforeCreateConversation={onBeforeCreateConversation}
+                      onConversationCreated={_onConversationCreated}
+                      setPageState={setPageState}
+                    />
+                  )
+                : (
+                    <ConversationCreateGroupDetail
+                      pageState={pageState}
+                      setPageState={setPageState}
+                      profileList={selectList.map((item: any) => item?.profile)}
+                      onBeforeCreateConversation={onBeforeCreateConversation}
+                      onConversationCreated={_onConversationCreated}
+                    />
+                  )
+            }
+          </div>
+        )}
       </div>
-      {pageState === PageStateTypes.USER_SELECT ? (
-        <ConversationCreateUserSelectList
-          isCreateGroup={isCreateGroup}
-          setIsCreateGroup={setIsCreateGroup}
-          className={className}
-          selectList={selectList}
-          // eslint-disable-next-line
-          // @ts-ignore
-          setSelectList={setSelectList}
-          conversationList={conversationList}
-          setConversationCreated={setConversationCreated}
-          setPageState={setPageState}
-        />
-      ) : (
-        <ConversationCreatGroupDetail
-          pageState={pageState}
-          setPageState={setPageState}
-          profileList={selectList.map((item: any) => item?.profile)}
-          // eslint-disable-next-line
-          // @ts-ignore
-          createConversation={createConversation}
-          setConversationCreated={setConversationCreated}
-        />
-      )}
-    </>
-  ), [isCreateGroup, selectList, pageState]);
+
+    );
+  }, [visible, className, showCreateModel, isCreateGroup, pageState, selectList, conversationList, onBeforeCreateConversation]);
 }

package/src/components/ConversationCreate/ConversationCreateButton.tsx

@@ -0,0 +1,46 @@
+// ConversationSearch.tsx
+import React from 'react';
+import cs from 'classnames';
+import { Icon, IconTypes } from '../Icon';
+import './styles/conversationCreateButton.scss';
+
+interface IConversationCreateButtonProps {
+  visible?: boolean;
+  onClick?: (event: React.BaseSyntheticEvent) => void;
+  height?: number;
+  width?: number;
+  className?: string;
+}
+
+const ConversationCreateButton = (props: IConversationCreateButtonProps) => {
+  const {
+    visible = true,
+    className,
+    onClick,
+    height = 24,
+    width = 24,
+  } = props;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className={cs(
+      'tui-conversation-create-button',
+      className)}
+    >
+      <Icon
+        onClick={onClick}
+        type={IconTypes.CREATE}
+        height={height}
+        width={width}
+      />
+    </div>
+  );
+};
+
+export {
+  ConversationCreateButton,
+  IConversationCreateButtonProps,
+};