@tencentcloud/chat-uikit-react 2.2.7 → 2.2.9

package/dist/esm/components/TUIMessageInput/hooks/useUploadPicker.js

@@ -1 +0,0 @@
-import{useCallback as e}from"react";import{TUIChatService as t}from"@tencentcloud/chat-uikit-engine";import{MESSAGE_TYPE_NAME as o}from"../../../constants.js";import{enableSampleTaskStatus as s}from"../../utils.js";import"tslib";import"react/jsx-runtime";import"@tencentcloud/tui-core";import"react-i18next";import{useTUIChatActionContext as n}from"../../../context/TUIChatActionContext.js";import"../../../context/TUIMessageContext.js";function i(i){var r;n().updateUploadPendingMessageList;var a=((r={})[o.IMAGE]=t.sendImageMessage,r[o.VIDEO]=t.sendVideoMessage,r[o.FILE]=t.sendFileMessage,r);return{sendUploadMessage:e((function(e,t){a[t]({payload:e}),s("sendMessage")}),[])}}export{i as useUploadPicker};

package/dist/esm/components/TUIMessageList/TUIMessageList.js

@@ -1 +0,0 @@
-import{__assign as e,__awaiter as t,__generator as i}from"tslib";import{jsx as o,jsxs as n}from"react/jsx-runtime";import r,{useState as l,useEffect as s}from"react";import{useTranslation as a}from"react-i18next";import"@tencentcloud/tui-core";import"@tencentcloud/chat-uikit-engine";import{useTUIChatStateContext as c}from"../../context/TUIChatStateContext.js";import{useTUIChatActionContext as d}from"../../context/TUIChatActionContext.js";import"../../context/TUIMessageContext.js";import{useComponentContext as m}from"../../context/ComponentContext.js";import u from"./hooks/useMessageListElement.js";import{InfiniteScroll as g}from"../InfiniteScrollPaginator/InfiniteScroll.js";import{EmptyStateIndicator as h}from"../EmptyStateIndicator/EmptyStateIndicator.js";function v(r){var v=this,f=r.highlightedMessageId,p=r.loadMore,M=r.intervalsTimer,T=r.className,I=a().t,C=l(null),x=C[0],L=C[1],j=l(!1),S=j[0],U=j[1],E=c("TUIMessageList"),y=E.messageList,N=E.highlightedMessageId,b=E.isCompleted;E.isSameLastMessageID;var H=E.messageListRef,R=E.noMore,k=E.TUIMessageListConfig,B=d(),q=B.loadMore,w=B.setHighlightedMessageId,A=m(),D=A.TUIMessage,P=A.EmptyStateIndicator,z=void 0===P?h:P,F=f||(null==k?void 0:k.highlightedMessageId)||N,G=60*(M||(null==k?void 0:k.intervalsTimer)||30),J=p||(null==k?void 0:k.loadMore)||q,K=y&&u({enrichedMessageList:y,TUIMessage:D,intervalsTimer:G});return s((function(){t(v,void 0,void 0,(function(){var e,t,o,n;return i(this,(function(i){switch(i.label){case 0:return e=null===(n=null==x?void 0:x.parentElement)||void 0===n?void 0:n.parentElement,!b&&e&&(null==e?void 0:e.clientHeight)>=(null==x?void 0:x.clientHeight)?J?[4,J()]:[3,2]:[3,3];case 1:i.sent(),i.label=2;case 2:i.label=3;case 3:return(null==x?void 0:x.children)&&((t=(null==x?void 0:x.children)||[])[t.length-1],o=setTimeout((function(){(null==H?void 0:H.current)&&(H.current.scrollTop=H.current.scrollHeight),U(!0),clearTimeout(o)}),100)),[2]}}))}))}),[K,S]),s((function(){if(F){var e=null==x?void 0:x.querySelector("[data-message-id='".concat(F,"']"));if(!e)return;var t=e.children;if(t[t.length-1].classList.add("high-lighted"),null==H?void 0:H.current){var i=e.getBoundingClientRect(),o=H.current.getBoundingClientRect(),n=i.top-o.top+H.current.scrollTop;H.current.scrollTop=n}var r=setTimeout((function(){t[t.length-1].classList.remove("high-lighted"),clearTimeout(r),w&&w("")}),1e3)}}),[F]),n("div",e({className:"message-list ".concat(T," ").concat(S?"":"hide"),ref:H},{children:[R,R&&o("p",e({className:"no-more"},{children:I("TUIChat.No More")})),o(g,e({className:"message-list-infinite-scroll",hasMore:!0,loadMore:J,threshold:1},{children:o("ul",e({ref:L},{children:(null==K?void 0:K.length)&&K.length>0?K:o(z,{listType:"message"})}))}))]}))}var f=r.memo(v);function p(t){return o(f,e({},t))}export{p as TUIMessageList};

package/dist/esm/components/TUIMessageList/hooks/useMessageListElement.js

@@ -1 +0,0 @@
-import{__assign as t}from"tslib";import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useMemo as n}from"react";import{useUIKit as r}from"../../../context/UIKitContext.js";import"@tencentcloud/chat-uikit-engine";import"../../../context/TUIMessageContext.js";import{getTimeStamp as o}from"../../utils.js";function s(s){var a=s.enrichedMessageList,m=s.TUIMessage,c=s.intervalsTimer,l=r().language;return n((function(){return null==a?void 0:a.map((function(n,r){var s,u="".concat(n.ID,"-").concat(r),d=r>0?null===(s=a[r-1])||void 0===s?void 0:s.time:-1,f=(null==n?void 0:n.time)||0;return e("li",t({className:"message-list-item"},{children:[!(!c||-1===d)&&f-d>=c&&i("div",t({className:"message-list-time"},{children:f?o(1e3*f,l):0}),"".concat(f+r)),i(m,{message:n})]}),u)}))}),[a])}export{s as default};

package/dist/esm/components/TUIProfile/TUIProfile.d.ts

@@ -1,10 +0,0 @@
-import React__default, { PropsWithChildren } from 'react';
-
-interface TUIProfileProps {
-    className?: string;
-    TUIProfile?: React__default.ComponentType<any>;
-}
-declare function UnMemoizedTUIProfile<T extends TUIProfileProps>(props: PropsWithChildren<T>): React__default.ReactElement;
-declare const TUIProfile: typeof UnMemoizedTUIProfile;
-
-export { TUIProfile };

package/dist/esm/components/TUIProfile/TUIProfile.js

@@ -1 +0,0 @@
-import{jsxs as o,Fragment as r,jsx as e}from"react/jsx-runtime";import t from"react";import{Profile as i}from"../Profile/Profile.js";import{useMyProfile as m}from"./hooks/useMyProfile.js";import{TUIProfileDefault as f}from"./TUIProfileDefault.js";import"tslib";import"@tencentcloud/tui-core";import"react-i18next";import{useUIManager as a}from"../../context/UIManagerContext.js";import"../../context/TUIMessageContext.js";function l(t){var l=t.className,n=t.TUIProfile,s=m(),p=s.myProfile,c=s.updateMyProfile,u=a(),P=u.setTUIProfileShow,x=u.TUIProfileShow,I=n||f;return o(r,{children:[e(i,{profile:p,handleAvatar:function(){P&&P(!0)}}),x&&e(I,{className:l,userInfo:p,update:c})]})}var n=t.memo(l);export{n as TUIProfile};

package/dist/esm/components/TUIProfile/TUIProfileDefault.js

@@ -1 +0,0 @@
-import{__assign as e}from"tslib";import{jsx as t,jsxs as a}from"react/jsx-runtime";import l,{useState as i}from"react";import{useTranslation as n}from"react-i18next";import o from"react-date-picker";import r from"@tencentcloud/chat";import{isH5 as c}from"../../utils/env.js";import"@tencentcloud/tui-core";import{useUIManager as u}from"../../context/UIManagerContext.js";import"../../context/TUIMessageContext.js";import{Avatar as d}from"../Avatar/Avatar.js";import{DivWithEdit as s}from"../DivWithEdit/DivWithEdit.js";import{Icon as m}from"../Icon/Icon.js";import{IconTypes as v}from"../Icon/type.js";import{handleDisplayAvatar as p}from"../utils.js";var f,h,E=((f={})[r.TYPES.GENDER_UNKNOWN]="unknow",f[r.TYPES.GENDER_MALE]="male",f[r.TYPES.GENDER_FEMALE]="female",f),g=((h={})[r.TYPES.ALLOW_TYPE_ALLOW_ANY]="allowAny",h[r.TYPES.ALLOW_TYPE_NEED_CONFIRM]="needConfirm",h[r.TYPES.ALLOW_TYPE_DENY_ANY]="denyAny",h),N=["https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_1.png","https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_2.png","https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png","https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_4.png","https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_5.png","https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_6.png"],T=[{label:"Male",value:r.TYPES.GENDER_MALE},{label:"Female",value:r.TYPES.GENDER_FEMALE}],y=[{label:"AllowAny",value:r.TYPES.ALLOW_TYPE_ALLOW_ANY},{label:"NeedConfirm",value:r.TYPES.ALLOW_TYPE_NEED_CONFIRM},{label:"DenyAny",value:r.TYPES.ALLOW_TYPE_DENY_ANY}];function _(l){var r,f,h,_,b,k,A=l.userInfo,P=l.className,Y=l.update,L=n().t,w=u().setTUIProfileShow,D=i(""),I=D[0],S=D[1],C=[{name:"Signature",value:null==A?void 0:A.selfSignature,type:"text",children:null},{name:"Gender",value:L((null==A?void 0:A.gender)&&(null===(r=E[null==A?void 0:A.gender])||void 0===r?void 0:r.replace(E[null==A?void 0:A.gender][0],null===(f=E[null==A?void 0:A.gender][0])||void 0===f?void 0:f.toLocaleUpperCase()))?"TUIProfile.".concat(null===(h=E[null==A?void 0:A.gender])||void 0===h?void 0:h.replace(E[null==A?void 0:A.gender][0],null===(_=E[null==A?void 0:A.gender][0])||void 0===_?void 0:_.toLocaleUpperCase())):""),type:"select",children:t("ul",e({className:"select-list"},{children:null==T?void 0:T.map((function(a,l){var i="".concat(a.value).concat(l);return t("li",e({className:"select-list-item",role:"menuitem",tabIndex:l,onClick:function(){x(a)}},{children:L("TUIProfile.".concat(a.label))}),i)}))}))},{name:"AllowType",value:L("TUIProfile.".concat(null===(b=g[(null==A?void 0:A.allowType)||""])||void 0===b?void 0:b.replace(A&&g[null==A?void 0:A.allowType][0],A&&(null===(k=g[null==A?void 0:A.allowType][0])||void 0===k?void 0:k.toLocaleUpperCase())))),type:"select",children:t("ul",e({className:"select-list"},{children:null==y?void 0:y.map((function(a,l){var i="".concat(a.value).concat(l);return t("li",e({className:"select-list-item",role:"menuitem",tabIndex:l,onClick:function(){W(a)}},{children:L("TUIProfile.".concat(a.label))}),i)}))}))},{name:"Birthday",value:(null==A?void 0:A.birthday)?function(e){var t=String(e);if(8===t.length){var a=t.substring(0,4),l=t.substring(4,6),i=t.substring(6,8);return"".concat(a,"/").concat(l,"/").concat(i)}return"".concat(e)}(A.birthday):"",type:"select",children:t(o,{className:"tui-profile-birthday",calendarClassName:"tui-profile-birthday-calendar",isOpen:!0,format:"y-MM-dd",onChange:function(e){j(e)},value:function(e){if(8===(null==e?void 0:e.length)){var t=Number(e.slice(0,4)),a=Number(e.slice(4,6)),l=Number(e.slice(-2));return new Date(t,a-1,l)}return new Date}("".concat(null==A?void 0:A.birthday))})}];c&&(C=C.filter((function(e){return"Birthday"!==e.name})));var M=function(e){S(e)},U=function(e){Y&&Y(e),S("")},O=function(e){var t,a="";switch(null==e?void 0:e.name){case"nick":a="nick";break;case"Signature":a="selfSignature";break;default:return void S("")}var l=((t={})[a]=e.value,t);U(l)},x=function(e){U({gender:e.value})},W=function(e){U({allowType:e.value})},j=function(e){var t,a,l,i;U({birthday:Number((t=e,a=t.getDate()>9?t.getDate():"0".concat(t.getDate()),l=t.getMonth()>8?t.getMonth()+1:"0".concat(t.getMonth()+1),i=t.getFullYear(),"".concat(i).concat(l).concat(a)))})};return a("div",e({className:"".concat(P," tui-profile")},{children:[a("header",e({className:"tui-profile-header"},{children:[t(m,{width:9,height:16,type:v.BACK,onClick:function(){w&&w(!1)}}),t("h1",{children:L("TUIProfile.Personal information")})]})),a("main",e({className:"tui-profile-main"},{children:[t("div",e({className:"tui-profile-avatar"},{children:t(d,{image:A&&p(null==A?void 0:A.avatar),size:94,update:function(e){U({avatar:e})},list:N})})),t(s,{name:"nick",className:"tui-profile-nick",value:null==A?void 0:A.nick,type:"text",toggle:M,isEdit:"nick"===I,confirm:O,close:function(){S("")}}),a("div",e({className:"tui-profile-ID"},{children:[t("h5",{children:"ID:"}),t("span",{children:null==A?void 0:A.userID})]}))]})),t("ul",e({className:"tui-profile-list"},{children:C.map((function(l){var i="".concat(l.name);return a("li",e({className:"tui-profile-list-item"},{children:[t("h4",{children:L("TUIProfile.".concat(l.name))}),t(s,e({className:"tui-profile-div-with-edit",classEditName:"tui-profile-edit",name:l.name,value:l.value,type:l.type,toggle:M,isEdit:I===l.name,confirm:O,close:function(){S("")}},{children:null==l?void 0:l.children}))]}),i)}))}))]}))}var b=l.memo(_);function k(a){var l=e({},a);return t(b,e({},l))}export{k as TUIProfileDefault};

package/dist/esm/context/TUIConversationContext.js

@@ -1 +0,0 @@
-import{__assign as t}from"tslib";import{jsx as e}from"react/jsx-runtime";import o,{useContext as n}from"react";import{TUIConversationList as s}from"../components/TUIConversationList/TUIConversationList.js";import"@tencentcloud/chat";import"@tencentcloud/chat-uikit-engine";import"../components/TUIChat/index.js";import"@tencentcloud/tui-core";import"react-i18next";import"./TUIMessageContext.js";import"../utils/env.js";import"../components/Icon/config.js";import"../components/Icon/type.js";import"date-fns";import"date-fns/locale";import"../constants.js";import"../components/TUIMessage/hooks/useMessageReply.js";import"../components/TUIMessage/MessagePlugins.js";import"../components/TUIMessage/MessageContext.js";import"../components/TUIMessageInput/hooks/useHandleQuoteMessage.js";import"../components/TUIProfile/TUIProfileDefault.js";var r=o.createContext({});function i(o){var n=o.children,i=o.value;return e(r.Provider,t({value:i},{children:n||e(s,{})}))}var m=function(t){var e=n(r);return!e&&t?{}:e};export{r as TUIConversationContext,i as TUIConversationProvider,m as useTUIConversationContext};

package/src/components/ConversationCreate/ConversationCreatGroupDetail.tsx

@@ -1,170 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Conversation, Profile } from '@tencentcloud/chat';
-import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { Input } from '../Input';
-import './styles/ConversationCreatGroupDetail.scss';
-import { Icon, IconTypes } from '../Icon';
-import {
-  Avatar,
-  defaultGroupAvatarWork,
-  defaultGroupAvatarAVChatRoom,
-  defaultGroupAvatarMeeting,
-  defaultGroupAvatarPublic, defaultUserAvatar,
-} from '../Avatar';
-import { PageStateTypes } from './ConversationCreate';
-import { ConversationGroupTypeInfo, GroupType, typeInfoList } from './ConversationGroupTypeInfo';
-import { useUIManager } from '../../context';
-import { CreateGroupConversationParams } from '../../hooks';
-
-export interface ConversationCreatGroupDetailProps {
-  profileList: Array<Profile>,
-  pageState: PageStateTypes,
-  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>,
-  createConversation: (params: string | CreateGroupConversationParams) => Promise<Conversation>,
-  setConversationCreated: React.Dispatch<React.SetStateAction<boolean>>,
-}
-
-export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetailProps) {
-  const {
-    profileList, pageState, setPageState, createConversation, setConversationCreated,
-  } = 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<string>('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: string) => {
-    switch (type) {
-      case 'Work':
-        return defaultGroupAvatarWork;
-      case 'Public':
-        return defaultGroupAvatarPublic;
-      case 'Meeting':
-        return defaultGroupAvatarMeeting;
-      case '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 conversation = await createConversation({
-      name: groupName,
-      // eslint-disable-next-line
-      // @ts-ignore
-      type: GroupType[groupType],
-      groupID,
-      avatar,
-      memberList,
-    });
-    setActiveConversation(conversation);
-    TUIConversationService.switchConversation(conversation?.conversationID);
-    setConversationCreated(false);
-  };
-  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"
-            customClassName="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"
-            customClassName="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"
-            customClassName="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/ConversationPreview/ConversationListContainer.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Conversation } from '@tencentcloud/chat';
-import './styles/index.scss';
-
-export interface ConversationListContainerProps {
-  error?: Error | null,
-  loading?: boolean,
-  setConversationList?: React.Dispatch<React.SetStateAction<Array<Conversation>>>
-}
-
-export function ConversationListContainer<
-  T extends ConversationListContainerProps
-  >(props: React.PropsWithChildren<T>) {
-  const { children } = props;
-  return (
-    <div className="conversation-list-container">
-      {children}
-    </div>
-  );
-}

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -1,191 +0,0 @@
-/* eslint-disable react/jsx-key */
-import React, { useRef, useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { isPC } from '../../utils/env';
-import { ConversationPreviewUIComponentProps } from './ConversationPreview';
-
-import { Avatar as DefaultAvatar } from '../Avatar/index';
-import './styles/index.scss';
-import { Icon, IconTypes } from '../Icon';
-import { Plugins } from '../Plugins';
-import { useConversation } from '../../hooks';
-import { useUIKit, useUIManager } from '../../context';
-
-export interface IPluginsRef {
-  closeMore?: () => void,
-}
-export function unMemoConversationPreviewContent<T extends ConversationPreviewUIComponentProps>(
-  props: T,
-):React.ReactElement {
-  const {
-    conversation,
-    Avatar = DefaultAvatar,
-    displayImage,
-    displayTitle,
-    displayMessage,
-    displayTime,
-    unread,
-    active,
-    activeConversationID,
-    setActiveConversationID,
-    setActiveConversation,
-  } = props;
-
-  const { t } = useTranslation();
-  const conversationPreviewButton = useRef<HTMLButtonElement | null>(null);
-  const { chat } = useUIKit();
-  const { conversation: activeConversation } = useUIManager('ConversationPreviewContent');
-  const { pinConversation, deleteConversation } = useConversation(chat);
-  const activeClass = active ? 'conversation-preview-content--active' : '';
-  const unreadClass = unread && unread >= 1 ? 'conversation-preview-content--unread' : '';
-  const pinClass = conversation.isPinned ? 'conversation-preview-content--pin' : '';
-  const [isHover, setIsHover] = useState(false);
-  const pluginsRef = useRef<IPluginsRef>(null);
-
-  const onSelectConversation = () => {
-    TUIConversationService.switchConversation(conversation?.conversationID);
-    if (setActiveConversation) {
-      setActiveConversation(conversation);
-    }
-    if (conversationPreviewButton?.current) {
-      conversationPreviewButton.current.blur();
-    }
-  };
-  const handleMouseEnter = () => {
-    setIsHover(true);
-  };
-  const handleMouseLeave = () => {
-    setIsHover(false);
-  };
-  useEffect(() => {
-    if (activeConversationID !== conversation.conversationID) {
-      setIsHover(false);
-    }
-  }, [activeConversationID]);
-  // h5 long press
-  let timer: any;
-  const handleH5LongPress = (type: string) => {
-    if (isPC) return;
-    const { conversationID } = conversation;
-    setActiveConversationID && setActiveConversationID(conversationID);
-    function longPressHandler() {
-      clearTimeout(timer);
-      setIsHover(true);
-    }
-    function touchStartHandler() {
-      timer = setTimeout(longPressHandler, 500);
-    }
-    function touchEndHandler() {
-      clearTimeout(timer);
-    }
-    switch (type) {
-      case 'touchstart':
-        touchStartHandler();
-        break;
-      case 'touchend':
-        touchEndHandler();
-        setTimeout(() => {
-          // setIsHover(false);
-        }, 200);
-        break;
-      default:
-    }
-  };
-
-  const moreHandle = (e: any, type: string) => {
-    const { conversationID, isPinned } = conversation;
-    e.stopPropagation();
-    setIsHover(false);
-    pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
-    switch (type) {
-      case 'pin':
-        pinConversation({ conversationID, isPinned: !isPinned });
-        break;
-      case 'delete':
-        deleteConversation(conversationID);
-        if (setActiveConversation && conversationID === activeConversation?.conversationID) {
-          setActiveConversation(undefined);
-        }
-        break;
-      default:
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      aria-selected={active}
-      role="option"
-      className={`conversation-preview-container ${activeClass} ${unreadClass} ${pinClass}`}
-      onClick={onSelectConversation}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onTouchStart={() => handleH5LongPress('touchstart')}
-      onTouchEnd={() => handleH5LongPress('touchend')}
-      ref={conversationPreviewButton}
-      id={conversation.conversationID}
-    >
-      <div className="avatar">
-        <Avatar image={displayImage} name={displayTitle} size={40} />
-      </div>
-      <div className="content">
-        <div className="title text-ellipsis">
-          {displayTitle}
-        </div>
-        <div className="message">
-          {displayMessage}
-        </div>
-      </div>
-      <div className="external">
-        {unread ? (<div className="unread">{unread <= 99 ? unread : '99+'}</div>) : (<div className="unread" />)}
-        {!isHover
-          ? (
-            <div className="time">
-              {displayTime}
-            </div>
-          )
-          : (
-            <div className={`${isHover ? 'more--hover' : 'more'}`}>
-              <Plugins
-                customClass="more-handle-box"
-                ref={pluginsRef}
-                plugins={[
-                  <div
-                    role="presentation"
-                    className="more-handle-item"
-                    onClick={(e) => {
-                      moreHandle(e, 'pin');
-                    }}
-                  >
-                    {t(!conversation.isPinned ? 'TUIConversation.Pin' : 'TUIConversation.Unpin')}
-                  </div>,
-                  <div
-                    className="more-handle-item delete"
-                    onClick={(e) => {
-                      moreHandle(e, 'delete');
-                    }}
-                    role="presentation"
-                  >
-                    {t('TUIConversation.Delete')}
-                  </div>,
-                ]}
-                showNumber={0}
-                MoreIcon={(
-                  <Icon
-                    className="icon-more"
-                    width={16}
-                    height={16}
-                    type={IconTypes.MORE}
-                  />
-              )}
-              />
-            </div>
-          )}
-      </div>
-    </button>
-  );
-}
-
-export const ConversationPreviewContent = React.memo(unMemoConversationPreviewContent) as
-  typeof unMemoConversationPreviewContent;

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

@@ -1,171 +0,0 @@
-@use "../../../styles/colors/color-theme" as *;
-
-.conversation-list-container {
-  overflow-x: hidden;
-  height: 100%;
-}
-
-.conversation-preview-container {
-  display: flex;
-  align-items: center;
-  border: none;
-  width: 100%;
-  height: 64px;
-  cursor: pointer;
-  line-height: 17px;
-  padding: 0 20px;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-  }
-
-  .content {
-    flex: 1 1 auto;
-    text-align: left;
-    margin-left: 10px;
-    min-width: 0;
-
-    .title {
-      font-style: normal;
-      font-weight: 700;
-      font-size: 14px;
-      line-height: 17px;
-      font-family: PingFangSC-Medium;
-      padding: 1px 0;
-      width: 100%;
-
-      @include theme() {
-        color: get(text-color-primary);
-      }
-    }
-
-    .message {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-family: PingFangSC-Medium;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 14px;
-      padding: 1px 0;
-
-      @include theme() {
-        color: get(text-color-secondary);
-      }
-    }
-  }
-
-  .external {
-    text-align: right;
-    flex: 0 0 auto;
-    display: flex;
-    flex-direction: column;
-
-    .unread {
-      height: 19px;
-      padding: 1px 0;
-    }
-
-    .time {
-      font-family: PingFangSC-Medium;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 14px;
-      padding: 1px 0;
-
-      @include theme() {
-        color: get(text-color-secondary);
-      }
-    }
-
-    .more--hover {
-      display: flex;
-      justify-content: flex-end;
-      flex: 1 1;
-
-      .icon-more {
-        transform: scale(1.5);
-      }
-
-      .more-handle-box {
-        top: 0;
-        right: 0;
-        bottom: initial;
-        padding: 14px 0;
-        box-sizing: border-box;
-        text-align: start;
-        white-space: nowrap;
-
-        @include theme() {
-          background-color: get(dropdown-color-default);
-          box-shadow: 0 0 10px get(shadow-color);
-        }
-
-        .more-handle-item {
-          font-size: 16px;
-          font-family: PingFangSC-Medium;
-          line-height: 19px;
-          padding: 6px 16px;
-          cursor: pointer;
-          font-weight: 500;
-          box-sizing: border-box;
-
-          @include theme() {
-            color: get(text-color-primary);
-          }
-
-          &.delete {
-            @include theme() {
-              color: get(text-color-error);
-            }
-          }
-
-          &:hover {
-            @include theme() {
-              background-color: get(dropdown-color-hover);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &:hover {
-    @include theme() {
-      background-color: get(list-color-hover);
-    }
-  }
-
-  &.conversation-preview-content--pin {
-    @include theme() {
-      background-color: get(bg-secondary);
-    }
-  }
-
-  &.conversation-preview-content--active {
-    @include theme() {
-      background-color: get(list-color-active);
-    }
-  }
-
-  &.conversation-preview-content--unread {
-    .unread {
-      height: 13px;
-      border-radius: 16px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 2px 5px 1px;
-      font-size: 11px;
-      font-weight: 700;
-      margin: 2px 0 2px auto;
-      color: #fff;
-
-      @include theme() {
-        background-color: get(text-color-error);
-      }
-    }
-  }
-}

package/src/components/ConversationSearch/ConversationSearchInput.tsx

@@ -1,27 +0,0 @@
-import React, { useState, useEffect, InputHTMLAttributes } from 'react';
-import { useTranslation } from 'react-i18next';
-import './styles/index.scss';
-import { Icon, IconTypes } from '../Icon';
-import { Input, InputProps } from '../Input';
-
-export function ConversationSearchInput(props:InputProps) {
-  const {
-    className = '',
-    placeholder,
-    clearable,
-    value,
-    onChange: handleChange,
-    prefix = <Icon type={IconTypes.SEARCH} height={16} width={16} />,
-  } = props;
-  const { t } = useTranslation();
-  return (
-    <Input
-      className={`conversation-search-input ${className}`}
-      placeholder={placeholder || t('TUIConversation.Search')}
-      clearable={clearable}
-      value={value}
-      onChange={handleChange}
-      prefix={prefix}
-    />
-  );
-}

package/src/components/ConversationSearch/ConversationSearchResult.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Conversation } from '@tencentcloud/chat';
-import {
-  ConversationPreview,
-  ConversationPreviewUIComponentProps,
-} from '../ConversationPreview';
-import { Icon, IconTypes } from '../Icon';
-
-export interface ConversationSearchResultProps {
-  result: Array<Conversation>
-  searchValue?: string,
-  Preview?: React.ComponentType<ConversationPreviewUIComponentProps>
-}
-export function ConversationSearchResult(props:ConversationSearchResultProps):React.ReactElement {
-  const { result, searchValue, Preview } = props;
-  return (
-    <div>
-      {result?.length === 0 ? (
-        <div className="conversation-search-result no-result">
-          <Icon className="no-result-icon" type={IconTypes.CRY} width={42} height={42} />
-          <span className="no-result-message">{`No results for "${searchValue}"`}</span>
-        </div>
-      )
-        : result.map((item) => {
-          const previewProps = {
-            conversation: item,
-            Preview,
-          };
-          return (
-            <ConversationPreview
-              searchValue={searchValue}
-              key={item.conversationID}
-              {...previewProps}
-            />
-          );
-        })}
-    </div>
-  );
-}