@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/src/components/ConversationPreview/ConversationPreview.tsx

@@ -1,78 +1,260 @@
-import React, { useState, useEffect } from 'react';
-import type { Conversation } from '@tencentcloud/chat';
-import { useUIKit, useUIManager } from '../../context';
-import { ConversationPreviewContent } from './ConversationPreviewContent';
-import { AvatarProps } from '../Avatar';
+// ConversationPreview.tsx
+import React, { CSSProperties, useEffect, useRef, useState } from 'react';
+import cs from 'classnames';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { Icon, IconTypes } from '../Icon';
+import { Avatar as DefaultAvatar, type AvatarProps } from '../Avatar';
+import { ConversationActions as DefaultConversationActions, type IConversationActionsConfig, type IConversationActionsProps } from '../ConversationActions';
+import { useConversationList } from '../../context/ConversationListContext';
+import { useUIManager } from '../../context/UIManagerContext';
+import { useUIKit } from '../../context';
+import useLongPress from '../../hooks/useLongPress';
+import useMouseHover from '../../hooks/useMouseHover';
+import { generateHighlightTitle, getLatestMessagePreview } from './utils';
+import { getTimeStamp } from '../utils';
+import { isH5 } from '../../utils/env';
 
-import {
-  getDisplayImage, getDisplayMessage, getDisplayTitle, getDisplayTime,
-} from './utils';
+import './ConversationPreview.scss';
 
-export interface ConversationPreviewUIComponentProps extends ConversationPreviewProps {
+interface IConversationPreviewUIProps {
+  /** The conversation to be displayed */
+  conversation: IConversationModel;
   /** If the component's Conversation is the active (selected) Conversation */
-  active?: boolean;
-  /** Image of Conversation to display */
-  displayImage?: string;
-  /** Title of Conversation to display */
-  displayTitle?: string | React.ReactElement;
-  /** Message of Conversation to display */
-  displayMessage?: string | React.ReactElement;
-  /** Time of Conversation to display */
-  displayTime?: string;
-  /** Number of unread Messages */
-  unread?: number;
-}
-export interface ConversationPreviewProps {
-  conversation: Conversation;
-  activeConversation?: Conversation;
-  Preview?: React.ComponentType<ConversationPreviewUIComponentProps>;
+  isSelected?: boolean;
+  /** Whether to show the ConversationActions */
+  enableActions?: boolean;
+  /** The string to be highlighted in the title */
+  highlightMatchString?: string;
+  /** The custom Avatar component */
   Avatar?: React.ComponentType<AvatarProps>;
-  setActiveConversation?: (conversation: Conversation | undefined) => void;
-  searchValue?: string;
-  conversationUpdateCount?: number;
-  activeConversationID?: string;
-  setActiveConversationID?: (conversationID: string) => void;
+  /** The custom Title component */
+  Title?: string | JSX.Element;
+  /** The custom last message abstract component */
+  LastMessageAbstract?: string | JSX.Element;
+  /** The custom last message abstract component */
+  LastMessageTimestamp?: string | JSX.Element;
+  /** The custom Unread component */
+  Unread?: string | JSX.Element;
+  /** The custom ConversationActions component */
+  ConversationActions?: React.ComponentType<IConversationActionsProps>;
+  /** Callback when the user click a conversation from conversation list */
+  onSelectConversation?: (conversation: IConversationModel) => void;
+  /** The custom ConversationActions config */
+  actionsConfig?: IConversationActionsConfig;
+  /** The custom class name */
+  className?: string;
+  /** The custom class style */
+  style?: CSSProperties;
+  /** The custom children node to override UI */
+  children?: React.ReactNode;
+}
+
+interface IConversationPreviewProps extends IConversationPreviewUIProps {
+  /** The custom Preview UI component */
+  Preview?: React.ComponentType<IConversationPreviewUIProps>;
+}
+
+function ConversationPreviewTitle(props: {
+  conversation: IConversationModel;
+  highlightMatchString?: string;
+}): string | JSX.Element {
+  const { conversation, highlightMatchString } = props;
+  return (
+    <div className="uikit-conversation-preview__title text-ellipsis">
+      {generateHighlightTitle(conversation, highlightMatchString).map((item, index) => (
+        <span
+          key={index}
+          className={cs({
+            'uikit-conversation-preview__title--highlight': item.isHighlight,
+            'uikit-conversation-preview__title--normal': !item.isHighlight,
+          })}
+        >
+          {item.text}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function ConversationPreviewTimestamp(props: {
+  conversation: IConversationModel;
+}): string | JSX.Element {
+  const { conversation } = props;
+  const { language } = useUIKit();
+  return (
+    <div className="uikit-conversation-preview__time">
+      {getTimeStamp(+(conversation.lastMessage?.lastTime || 0) * 1000, language)}
+    </div>
+  );
+}
+
+function ConversationPreviewAbstract(props: {
+  conversation: IConversationModel;
+}): string | JSX.Element {
+  const { conversation } = props;
+  const { myProfile } = useUIManager();
+  return (
+    <div className="uikit-conversation-preview__abstract">
+      {getLatestMessagePreview(conversation, myProfile)}
+    </div>
+  );
+}
+
+function ConversationPreviewUnread(props: {
+  conversation: IConversationModel;
+}): string | JSX.Element {
+  const { conversation } = props;
+  let content;
+  if (conversation.isMuted) {
+    content = <Icon type={IconTypes.MUTE} width={16} height={16} />;
+  } else if (conversation.unreadCount > 99) {
+    content = '99+';
+  } else if (conversation.unreadCount === 0) {
+    content = null;
+  } else {
+    content = conversation.unreadCount;
+  }
+  return (
+    <div className="uikit-conversation-preview__unread">
+      {content}
+    </div>
+  );
+}
+
+function ConversationPreview<T extends IConversationPreviewProps>(
+  props: T,
+): React.ReactElement {
+  const {
+    conversation,
+    isSelected = false,
+    enableActions = true,
+    highlightMatchString,
+    Preview = ConversationPreviewUI,
+    Avatar = DefaultAvatar,
+    ConversationActions = DefaultConversationActions,
+    Title = ConversationPreviewTitle({ conversation, highlightMatchString }),
+    LastMessageTimestamp = ConversationPreviewTimestamp({ conversation }),
+    LastMessageAbstract = ConversationPreviewAbstract({ conversation }),
+    Unread = ConversationPreviewUnread({ conversation }),
+    onSelectConversation,
+    actionsConfig,
+    className,
+    style,
+    children,
+  } = props;
+
+  const { setCurrentConversation } = useConversationList();
+
+  return (
+    <Preview
+      conversation={conversation}
+      isSelected={isSelected}
+      enableActions={enableActions}
+      highlightMatchString={highlightMatchString}
+      Avatar={Avatar}
+      ConversationActions={ConversationActions}
+      Title={Title}
+      LastMessageTimestamp={LastMessageTimestamp}
+      LastMessageAbstract={LastMessageAbstract}
+      Unread={Unread}
+      onSelectConversation={onSelectConversation}
+      actionsConfig={actionsConfig}
+      className={className}
+      style={style}
+      children={children}
+    />
+  );
 }
-export function ConversationPreview<T extends ConversationPreviewProps>(
+
+function ConversationPreviewUI<T extends IConversationPreviewUIProps>(
   props: T,
-) {
+): React.ReactElement {
   const {
-    activeConversation,
     conversation,
-    Preview = ConversationPreviewContent,
-    searchValue,
-    conversationUpdateCount,
+    isSelected,
+    enableActions,
+    Avatar = DefaultAvatar,
+    ConversationActions = DefaultConversationActions,
+    Title,
+    LastMessageTimestamp,
+    LastMessageAbstract,
+    Unread,
+    onSelectConversation,
+    actionsConfig,
+    className,
+    style,
+    children,
   } = props;
-  const { language } = useUIKit();
+
   const {
-    setActiveConversation,
-    myProfile,
-  } = useUIManager('ConversationPreview');
-  const [displayImage, setDisplayImage] = useState(getDisplayImage(conversation));
-  const [displayTitle, setDisplayTitle] = useState(getDisplayTitle(conversation, searchValue));
-  const [displayMessage, setDisplayMessage] = useState(myProfile && getDisplayMessage(conversation, myProfile, language));
-  const [displayTime, setDisplayTime] = useState(getDisplayTime(conversation, language));
-  const [unread, setUnread] = useState(conversation.unreadCount);
-  const isActive = activeConversation?.conversationID === conversation?.conversationID;
-  if (!Preview) return <></>;
+    currentConversation,
+    setCurrentConversation,
+  } = useConversationList();
+
+  const conversationPreviewRef = useRef<HTMLDivElement>(null);
+  const [isActionMenuActive, setIsActionMenuActive] = useState(false);
+
+  const isHovering = useMouseHover(conversationPreviewRef);
+  const onLongPress = useLongPress({}, {
+    delay: 500,
+    shouldPreventDefault: true,
+  });
+  const { isLongPressing } = onLongPress;
+
   useEffect(() => {
-    setDisplayTitle(getDisplayTitle(conversation, searchValue));
-    myProfile && setDisplayMessage(getDisplayMessage(conversation, myProfile, language));
-    setDisplayImage(getDisplayImage(conversation));
-    setDisplayTime(getDisplayTime(conversation, language));
-    setUnread(conversation.unreadCount);
-  }, [conversation, searchValue, conversationUpdateCount, language]);
+    setIsActionMenuActive(isHovering || isLongPressing);
+  }, [isHovering, isLongPressing]);
+
+  const onClick = () => {
+    onSelectConversation?.(conversation);
+    setCurrentConversation(conversation);
+  };
 
   return (
-    <Preview
-      {...props}
-      active={isActive}
-      displayImage={displayImage}
-      displayTitle={displayTitle}
-      displayMessage={displayMessage}
-      displayTime={displayTime}
-      unread={unread}
-      setActiveConversation={setActiveConversation}
-    />
+    <div
+      ref={conversationPreviewRef}
+      className={cs('uikit-conversation-preview', className, {
+        'uikit-conversation-preview--mobile': isH5,
+        'uikit-conversation-preview--active': isSelected || conversation.conversationID === currentConversation?.conversationID,
+        'uikit-conversation-preview--unread': !conversation.isMuted && conversation.unreadCount > 0,
+        'uikit-conversation-preview--pin': conversation.isPinned,
+        'uikit-conversation-preview--mute': conversation.isMuted,
+      })}
+      style={style}
+      onClick={onClick}
+    >
+      {children || (
+        <>
+          <div className="uikit-conversation-preview__avatar">
+            <Avatar
+              image={conversation.getAvatar()}
+              size={40}
+            />
+          </div>
+          <div className="uikit-conversation-preview__content">
+            {Title}
+            {LastMessageAbstract}
+          </div>
+          <div className="uikit-conversation-preview__external">
+            {Unread}
+            {(enableActions && isActionMenuActive)
+              ? (
+                  <ConversationActions
+                    conversation={conversation}
+                    {...actionsConfig}
+                  />
+                )
+              : LastMessageTimestamp}
+          </div>
+        </>
+      )}
+    </div>
   );
 }
+
+export {
+  ConversationPreview,
+  ConversationPreviewUI,
+  IConversationPreviewProps,
+  IConversationPreviewUIProps,
+};

package/src/components/ConversationPreview/index.ts

@@ -1,2 +1 @@
 export * from './ConversationPreview';
-export * from './ConversationPreviewContent';

package/src/components/ConversationPreview/utils.tsx

@@ -1,31 +1,89 @@
-import React from 'react';
-import TencentCloudChat, { Conversation, Group, Profile } from '@tencentcloud/chat';
+import TUIChatEngine, { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { formatEmojiString } from '../MessageElement/utils/emojiMap';
+import { Conversation, Profile } from '@tencentcloud/chat';
 import { defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
-import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
-import { getTimeStamp } from '../untils';
 
-interface TProfile extends Profile, Group {}
-export const getMessageProfile = (conversation: Conversation): TProfile => {
+interface IMessageProfile {
+  name?: string;
+  nick?: string;
+  groupID?: string;
+  userID?: string;
+  avatar?: string;
+}
+
+export const generateHighlightTitle = (
+  conversation: IConversationModel,
+  highlightMatchString?: string,
+): Array<{ text: string; isHighlight: boolean }> => {
+  const titleString = conversation.getShowName();
+  if (!highlightMatchString) return [{ text: titleString, isHighlight: false }];
+  const matchLowerCaseString = highlightMatchString.toLowerCase();
+  const titleList = titleString.split(new RegExp(`(${highlightMatchString})`, 'gi'))
+    .map((item: string) => { return { text: item, isHighlight: item.toLowerCase() === matchLowerCaseString }; });
+  return titleList;
+};
+
+export const getLatestMessagePreview = (
+  conversation: IConversationModel,
+  myProfile?: Profile,
+) => {
+  const { lastMessage, type } = conversation;
+  if (!lastMessage) {
+    return '';
+  }
+  const {
+    fromAccount, nick, nameCard, isRevoked,
+  } = lastMessage;
+  let { messageForShow } = lastMessage;
+  if (lastMessage.type === TUIChatEngine.TYPES.MSG_CUSTOM && lastMessage.payload?.description) {
+    messageForShow = lastMessage.payload.description;
+  }
+  let from = '';
+  switch (type) {
+    case TUIChatEngine.TYPES.CONV_GROUP:
+      from = lastMessage?.fromAccount === myProfile?.userID ? 'You' : `${nameCard || nick || fromAccount || ''}`;
+      from = `${from ? `${from}:` : ''}`;
+      break;
+    case TUIChatEngine.TYPES.CONV_C2C:
+      from = isRevoked ? 'you ' : '';
+      break;
+    default:
+  }
+  return (
+    <div style={{
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    }}
+    >
+      <span>{from}</span>
+      <span>{lastMessage.isRevoked ? 'recalled a message' : formatEmojiString(messageForShow, 1)}</span>
+    </div>
+  );
+};
+
+// The following is compatible with old versions
+export const getMessageProfile = (conversation: IConversationModel | Conversation): IMessageProfile => {
   // eslint-disable-next-line
   // @ts-ignore
   if (!conversation) return null;
-  let result = {};
+  let result: IMessageProfile = {};
   const { type, groupProfile, userProfile } = conversation;
   switch (type) {
-    case TencentCloudChat.TYPES.CONV_C2C:
+    case TUIChatEngine.TYPES.CONV_C2C:
       result = userProfile;
       break;
-    case TencentCloudChat.TYPES.CONV_GROUP:
+    case TUIChatEngine.TYPES.CONV_GROUP:
       result = groupProfile;
       break;
-    case TencentCloudChat.TYPES.CONV_SYSTEM:
     default:
+      break;
   }
-  return result as TProfile;
+  return result;
 };
 
 export const getDisplayTitle = (
-  conversation: Conversation,
+  conversation: IConversationModel,
   searchValue?: string,
   highlightColor = '#147AFF',
 ): string | React.ReactElement => {
@@ -35,11 +93,11 @@ export const getDisplayTitle = (
   const { type, remark } = conversation;
   let title = '';
   switch (type) {
-    case TencentCloudChat.TYPES.CONV_C2C:
-      title = remark || nick || userID;
+    case TUIChatEngine.TYPES.CONV_C2C:
+      title = remark || nick || userID || '';
       break;
-    case TencentCloudChat.TYPES.CONV_GROUP:
-      title = name || groupID;
+    case TUIChatEngine.TYPES.CONV_GROUP:
+      title = name || groupID || '';
       break;
     default:
       title = '';
@@ -55,7 +113,8 @@ export const getDisplayTitle = (
           (textItem.toLowerCase() === searchValue.toLowerCase())
             ? (
                 <span key={index} style={{ color: highlightColor }}>{textItem}</span>
-              ) : (
+              )
+            : (
                 <span key={index}>{textItem}</span>
               ),
         )}
@@ -65,16 +124,17 @@ export const getDisplayTitle = (
   };
   return !searchValue ? title : handleTitle(title);
 };
-export const getDisplayImage = (conversation: Conversation) => {
+
+export const getDisplayImage = (conversation: IConversationModel) => {
   const { type } = conversation;
   const { avatar } = getMessageProfile(conversation);
   let displayImage = avatar;
   if (!avatar) {
     switch (type) {
-      case TencentCloudChat.TYPES.CONV_C2C:
+      case TUIChatEngine.TYPES.CONV_C2C:
         displayImage = defaultUserAvatar;
         break;
-      case TencentCloudChat.TYPES.CONV_GROUP:
+      case TUIChatEngine.TYPES.CONV_GROUP:
         displayImage = defaultGroupAvatarWork;
         break;
       default:
@@ -83,44 +143,3 @@ export const getDisplayImage = (conversation: Conversation) => {
   }
   return displayImage;
 };
-export const getDisplayMessage = (
-  conversation: Conversation,
-  myProfile: Profile,
-  language?: string,
-) => {
-  const { lastMessage, type } = conversation;
-  const {
-    fromAccount, nick, nameCard, isRevoked,
-  } = lastMessage;
-  let { messageForShow } = lastMessage;
-  if (lastMessage.type === TencentCloudChat.TYPES.MSG_CUSTOM && lastMessage.payload?.description) {
-    messageForShow = lastMessage.payload.description;
-  }
-  let from = '';
-  switch (type) {
-    case TencentCloudChat.TYPES.CONV_GROUP:
-      from = lastMessage?.fromAccount === myProfile?.userID ? 'You' : `${nameCard || nick || fromAccount || ''}`;
-      from = `${from ? `${from}:` : ''}`;
-      break;
-    case TencentCloudChat.TYPES.CONV_C2C:
-      from = isRevoked ? 'you ' : '';
-      break;
-    default:
-  }
-  return (
-    <div style={{
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-    }}
-    >
-      <span>{from}</span>
-      <span>{lastMessage.isRevoked ? 'recalled a message' : formatEmojiString(messageForShow, 1)}</span>
-    </div>
-  );
-};
-
-export const getDisplayTime = (conversation: Conversation, language: string) => {
-  const { lastMessage } = conversation;
-  return getTimeStamp(lastMessage.lastTime * 1000, language);
-};

package/src/components/ConversationSearch/ConversationSearch.scss

@@ -0,0 +1,22 @@
+@use "../../styles/colors/color-theme" as *;
+
+.uikit-conversation-search {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+
+  &.uikit-conversation-search--active {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}

package/src/components/ConversationSearch/ConversationSearch.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { ConversationSearchInput as DefaultConversationSearchInput, type IConversationSearchInputProps } from './ConversationSearchInput/ConversationSearchInput';
+import { ConversationSearchResult as DefaultConversationSearchResult, type IConversationSearchResultProps } from './ConversationSearchResult/ConversationSearchResult';
+import { ConversationPreview as DefaultResultPreview, type IConversationPreviewProps } from '../ConversationPreview';
+import { Avatar as DefaultAvatar, type AvatarProps } from '../Avatar';
+
+import './ConversationSearch.scss';
+
+export interface IConversationSearchProps {
+  /** The list of conversations to be searched. */
+  conversationList: IConversationModel[];
+  /** Specifies a react component to customize the avatar in the search results. */
+  Avatar?: React.ComponentType<AvatarProps>;
+  /** Specifies a react component to customize the preview of search results. */
+  ResultPreview?: React.ComponentType<IConversationPreviewProps>;
+  /** Specifies a react component to customize the search input. */
+  ConversationSearchInput?: React.ComponentType<IConversationSearchInputProps>;
+  /** Specifies a react component to customize the search result. */
+  ConversationSearchResult?: React.ComponentType<IConversationSearchResultProps>;
+  /** Specifies a function to customize the search algorithm. This function takes the search value and the conversation list as parameters and returns the search results. */
+  searchFn?: (searchValue: string, conversationList: IConversationModel[]) => IConversationModel[];
+  /** Specifies a function to be called when the search input changes. This function takes the current search value as a parameter. */
+  onSearchChange?: (searchValue: string) => void;
+  /** Specifies a function to be called when the search input is focused. */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /** Specifies a function to be called when the search input is blurred. */
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /** Specifies a function to be called when a search result is selected. This function takes the selected conversation as a parameter. */
+  onSelectResult?: (conversation: IConversationModel) => void;
+  /** Specifies whether the search component is visible. */
+  visible?: boolean;
+  /** Specifies a custom class name for the search component. */
+  className?: string;
+  /** The custom css style */
+  style?: React.CSSProperties;
+}
+
+export function defaultSearchFn(searchValue: string, conversationList: IConversationModel[]) {
+  if (!searchValue || conversationList?.length === 0) return [];
+  return conversationList.filter(item => item.getShowName().toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()));
+}
+
+export function ConversationSearch(props: IConversationSearchProps) {
+  const {
+    visible = true,
+    conversationList,
+    Avatar = DefaultAvatar,
+    searchFn = defaultSearchFn,
+    ResultPreview = DefaultResultPreview,
+    ConversationSearchInput = DefaultConversationSearchInput,
+    ConversationSearchResult = DefaultConversationSearchResult,
+    onSearchChange,
+    onFocus,
+    onBlur,
+    onSelectResult,
+    className,
+    style,
+  } = props;
+
+  const [searchValue, setSearchValue] = useState('');
+  const [searchResult, setSearchResult] = useState<IConversationModel[]>(conversationList);
+
+  const [isActive, setIsActive] = useState(false);
+  const [isFocus, setIsFocus] = useState(false);
+  const [isInputEmpty, setIsInputEmpty] = useState(true);
+
+  const onFocusHandler = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocus(true);
+    onFocus?.(event);
+  };
+
+  const onBlurHandler = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocus(false);
+    onBlur?.(event);
+  };
+
+  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target?.value);
+    setIsInputEmpty(e.target?.value.length === 0);
+    onSearchChange?.(e.target?.value);
+  };
+
+  useEffect(() => {
+    onSearchChange?.(searchValue);
+  }, [searchValue, onSearchChange]);
+
+  useEffect(() => {
+    setSearchResult(searchFn(searchValue, conversationList));
+  }, [conversationList, searchFn, searchValue]);
+
+  useEffect(() => {
+    setIsActive(!isInputEmpty);
+  }, [isFocus, isInputEmpty]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames('uikit-conversation-search', className, {
+        'uikit-conversation-search--active': isActive,
+      })}
+      style={style}
+    >
+      <ConversationSearchInput
+        value={searchValue}
+        clearable={true}
+        onChange={onChangeHandler}
+        onFocus={onFocusHandler}
+        onBlur={onBlurHandler}
+      />
+      <ConversationSearchResult
+        visible={isActive}
+        Avatar={Avatar}
+        searchResult={searchResult}
+        searchValue={searchValue}
+        ResultPreview={ResultPreview}
+        onSelectResult={onSelectResult}
+      />
+    </div>
+  );
+}

package/src/components/ConversationSearch/ConversationSearchInput/ConversationSearchInput.scss

@@ -0,0 +1,13 @@
+@use "../../../styles/colors/color-theme" as *;
+
+.uikit-conversation-search-input {
+  height: 36px;
+  align-self: stretch;
+  margin: 10px;
+  box-sizing: border-box;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+}