@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/src/components/{TUIContactSearch → ContactSearch}/index.scss

@@ -1,24 +1,33 @@
+@use "../../styles/colors/color-theme" as *;
+
 .tui-contact-search {
   width: 100%;
   position: relative;
   text-align: initial;
   align-items: center;
   justify-content: space-between;
+
   .tui-contact-search-input {
     margin: 0 10px;
   }
+
   .tui-contact-search-text {
-    color: #147AFF;
+    color: #147aff;
     font-size: 14px;
   }
+
   .tui-contact-search-item {
     position: absolute;
     margin: 10px 20px;
     display: flex;
     align-items: center;
+
+    @include theme() {
+      color: get(text-color-primary);
+    }
+
     .search-item-name {
-     padding-left: 10px;
+      padding-left: 10px;
     }
   }
 }
-

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

package/src/components/ConversationCreate/ConversationCreateGroupDetail.tsx

@@ -0,0 +1,179 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Profile } from '@tencentcloud/chat';
+import { CreateGroupParams, IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { Input } from '../Input';
+import './styles/ConversationCreateGroupDetail.scss';
+import { Icon, IconTypes } from '../Icon';
+import { Toast } from '../Toast';
+import {
+  Avatar,
+  defaultGroupAvatarWork,
+  defaultGroupAvatarAVChatRoom,
+  defaultGroupAvatarMeeting,
+  defaultGroupAvatarPublic,
+  defaultUserAvatar,
+} from '../Avatar';
+import { PageStateTypes } from './ConversationCreate';
+import { ConversationGroupTypeInfo, GroupType, typeInfoList } from './ConversationGroupTypeInfo';
+import { useUIManager } from '../../context';
+import { createGroupConversation } from '../../hooks/useConversation';
+
+export interface ConversationCreateGroupDetailProps {
+  profileList: Profile[];
+  pageState: PageStateTypes;
+  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>;
+  onBeforeCreateConversation?: (params: CreateGroupParams) => void;
+  onConversationCreated?: (conversation: IConversationModel) => void;
+}
+export function ConversationCreateGroupDetail(props: ConversationCreateGroupDetailProps) {
+  const {
+    profileList,
+    pageState,
+    setPageState,
+    onBeforeCreateConversation,
+    onConversationCreated,
+  } = props;
+  const { t } = useTranslation();
+  const { setActiveConversation, myProfile } = useUIManager();
+  const temp = [...profileList];
+  myProfile && temp.unshift(myProfile);
+  const name = temp.map(item => item.nick || item.userID).toString();
+  const [groupName, setGroupName] = useState(
+    name.length >= 15 ? `${name.slice(0, 12)}...` : name,
+  );
+  const [groupID, setGroupID] = useState('');
+  const [groupType, setGroupType] = useState<GroupType>(GroupType.Work);
+  const groupInfoChange = (e: any, type: string) => {
+    const { value } = e.target;
+    switch (type) {
+      case 'name':
+        setGroupName(value);
+        break;
+      case 'id':
+        setGroupID(value);
+        break;
+      case 'type':
+        setGroupType(value);
+        break;
+      default:
+    }
+  };
+  const showGroupTypeInfo = () => {
+    setPageState(PageStateTypes.GROUP_TYPE);
+  };
+  const getDefaultAvatar = (type: GroupType) => {
+    switch (type) {
+      case GroupType.Work:
+        return defaultGroupAvatarWork;
+      case GroupType.Public:
+        return defaultGroupAvatarPublic;
+      case GroupType.Meeting:
+        return defaultGroupAvatarMeeting;
+      case GroupType.AVChatRoom:
+        return defaultGroupAvatarAVChatRoom;
+      default:
+        return '';
+    }
+  };
+  // eslint-disable-next-line
+  // @ts-ignore
+  const getDes = () => typeInfoList?.find((item: any) => item.type === groupType).des;
+  const next = async () => {
+    const memberList = profileList.map(item => ({
+      userID: item.userID,
+    }));
+    const avatar = getDefaultAvatar(groupType);
+    const options: CreateGroupParams = {
+      name: groupName,
+      type: groupType,
+      groupID,
+      avatar,
+      memberList,
+    } as any;
+    const _options = onBeforeCreateConversation?.(options) || options;
+    createGroupConversation(_options)
+      .then((conversation: IConversationModel) => {
+        onConversationCreated?.(conversation);
+      })
+      .catch((error) => {
+        Toast({ text: error.message, type: 'error' });
+      });
+  };
+  return pageState !== PageStateTypes.GROUP_TYPE
+    ? (
+        <>
+          <div className="tui-conversation-create-group-detail">
+            <div className="create-group-box create-group-name">
+              <Input
+                maxLength={15}
+                value={groupName}
+                onChange={(e) => {
+                  groupInfoChange(e, 'name');
+                }}
+                border="bottom"
+                inputClassName="input-group-name"
+                clearable
+                prefix={<div className="input-group-title">{t('TUIConversation.Group Name')}</div>}
+              />
+            </div>
+            <div className="create-group-box create-group-id">
+              <Input
+                border="bottom"
+                inputClassName="input-group-text"
+                clearable
+                value={groupID}
+                onChange={(e) => {
+                  groupInfoChange(e, 'id');
+                }}
+                prefix={<div className="input-group-title">{t('TUIConversation.Group ID')}</div>}
+              />
+            </div>
+            <div className="create-group-box create-group-type" onClick={showGroupTypeInfo}>
+              <Input
+                readOnly
+                border="bottom"
+                inputClassName="input-group-text"
+                prefix={<div className="input-group-title">{t('TUIConversation.Group Type')}</div>}
+                suffix={(
+                  <Icon
+                    onClick={showGroupTypeInfo}
+                    type={IconTypes.ARROW_RIGHT}
+                    width={7}
+                    height={12}
+                  />
+                )}
+                value={t(`TUIConversation.${groupType}`)}
+                onChange={(e) => {
+                  groupInfoChange(e, 'type');
+                }}
+              />
+            </div>
+            <div className="create-group-illustrate">
+              {t(`TUIConversation.${getDes()}`)}
+            </div>
+            <div className="create-group-portrait">
+              <div className="create-group-portrait-title">{t('TUIConversation.Participants')}</div>
+              <div className="create-group-portrait-info-container">
+                {profileList.map(({ avatar, userID, nick }) => (
+                  <div className="create-group-portrait-info" key={userID}>
+                    <Avatar shape="square" size={50} image={avatar || defaultUserAvatar} />
+                    <div className="create-group-portrait-info-nick">{nick}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="tui-conversation-create-next-container">
+            <div role="presentation" className="tui-conversation-create-next" onClick={next}>{t('TUIConversation.Create')}</div>
+          </div>
+        </>
+      )
+    : (
+        <ConversationGroupTypeInfo
+          groupType={groupType}
+          setGroupType={setGroupType}
+          setPageState={setPageState}
+        />
+      );
+}

package/src/components/ConversationCreate/ConversationCreateSelectView.tsx

@@ -5,16 +5,16 @@ import './styles/conversationCreateSelectView.scss';
 import { Icon, IconTypes } from '../Icon';
 
 interface ValueProps {
-  profile: Profile,
-  domList: Array<HTMLInputElement>,
+  profile: Profile;
+  domList: HTMLInputElement[];
 }
-export interface ConversationCreateSelectViewProps{
-  selectList: Array<ValueProps>,
-  setSelectList: React.Dispatch<React.SetStateAction<Array<ValueProps>>>,
+export interface ConversationCreateSelectViewProps {
+  selectList: ValueProps[];
+  setSelectList: React.Dispatch<React.SetStateAction<ValueProps[]>>;
 }
-export function ConversationCreateSelectView(props:ConversationCreateSelectViewProps) {
+export function ConversationCreateSelectView(props: ConversationCreateSelectViewProps) {
   const { selectList, setSelectList } = props;
-  const close = (domList:Array<HTMLInputElement>, index: number) => {
+  const close = (domList: HTMLInputElement[], index: number) => {
     // eslint-disable-next-line no-param-reassign
     domList.forEach((dom: HTMLInputElement) => { dom.checked = false; });
     selectList.splice(index, 1);