@tencentcloud/chat-uikit-react 2.2.7 → 2.2.8

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

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { CreateGroupParams, IConversationModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IConversationCreateProps {
+    visible?: boolean;
+    className?: string;
+    style?: React__default.CSSProperties;
+    onBeforeCreateConversation?: (params: string | CreateGroupParams) => string | CreateGroupParams;
+    onConversationCreated?: (conversation: IConversationModel) => void;
+    onChangeCreateModelVisible: (visible: boolean) => void;
+    conversationList?: IConversationModel[];
+}
+declare enum PageStateTypes {
+    USER_SELECT = "Next",
+    CREATE_DETAIL = "Create",
+    GROUP_TYPE = "GroupType"
+}
+declare function ConversationCreate<T extends IConversationCreateProps>(props: T): react_jsx_runtime.JSX.Element | null;
+
+export { ConversationCreate, IConversationCreateProps, PageStateTypes };

package/dist/esm/components/ConversationCreate/ConversationCreate.js

@@ -1 +1 @@
-import{__assign as t}from"tslib";import{jsxs as e,Fragment as o,jsx as r}from"react/jsx-runtime";import{useState as i,useMemo as a}from"react";import{useTranslation as n}from"react-i18next";import{Icon as s}from"../Icon/Icon.js";import{IconTypes as c}from"../Icon/type.js";import{ConversationCreateUserSelectList as C}from"./ConversationCreateUserSelectList.js";import{ConversationCreatGroupDetail as m}from"./ConversationCreatGroupDetail.js";import{useUIKit as E}from"../../context/UIKitContext.js";import"@tencentcloud/chat-uikit-engine";import"../../context/TUIMessageContext.js";import{useConversation as p}from"../../hooks/useConversation.js";var l;function v(v){var f=v.className,u=void 0===f?"":f,T=v.setConversationCreated,d=v.conversationList,S=void 0===d?[]:d,L=n().t,h=i(!1),U=h[0],I=h[1],R=i(l.USER_SELECT),_=R[0],j=R[1],x=i([]),A=x[0],P=x[1],g=E().chat,G=p(g).createConversation,k=function(){if(U)switch(_){case l.USER_SELECT:I(!1);break;case l.CREATE_DETAIL:j(l.USER_SELECT),P([]);break;case l.GROUP_TYPE:j(l.CREATE_DETAIL)}else T(!1)};return a((function(){return e(o,{children:[e("div",t({className:"tui-conversation-create-header"},{children:[r(s,{onClick:k,type:c.BACK,width:9,height:16}),r("div",t({className:"title"},{children:L(U?"TUIConversation.Add Participants":"TUIConversation.Start chat")}))]})),_===l.USER_SELECT?r(C,{isCreateGroup:U,setIsCreateGroup:I,className:u,selectList:A,setSelectList:P,conversationList:S,setConversationCreated:T,setPageState:j}):r(m,{pageState:_,setPageState:j,profileList:A.map((function(t){return null==t?void 0:t.profile})),createConversation:G,setConversationCreated:T})]})}),[U,A,_])}!function(t){t.USER_SELECT="Next",t.CREATE_DETAIL="Create",t.GROUP_TYPE="GroupType"}(l||(l={}));export{v as ConversationCreate,l as PageStateTypes};
+import{__assign as e}from"tslib";import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useState as r,useEffect as n,useMemo as i}from"react";import{useTranslation as a}from"react-i18next";import{TUIConversationService as s}from"@tencentcloud/chat-uikit-engine";import c from"../../node_modules/classnames/index.js";import{Icon as C}from"../Icon/Icon.js";import{IconTypes as l}from"../Icon/type.js";import{ConversationCreateButton as m}from"./ConversationCreateButton.js";import{ConversationCreateUserSelectList as v}from"./ConversationCreateUserSelectList.js";import{ConversationCreateGroupDetail as E}from"./ConversationCreateGroupDetail.js";var u;function f(f){var p=f.visible,d=void 0===p||p,S=f.className,T=f.style,L=f.onChangeCreateModelVisible,h=f.conversationList,_=void 0===h?[]:h,R=f.onBeforeCreateConversation,U=f.onConversationCreated,I=a().t,A=r(!1),j=A[0],P=A[1],g=r(!1),k=g[0],G=g[1],N=r(u.USER_SELECT),b=N[0],x=N[1],y=r([]),B=y[0],D=y[1],w=function(e){P(!1),Y(),s.switchConversation(e.conversationID),null==U||U(e)};n((function(){L(j)}),[L,j]);var O=function(){if(k)switch(b){case u.USER_SELECT:G(!1);break;case u.CREATE_DETAIL:x(u.USER_SELECT),D([]);break;case u.GROUP_TYPE:x(u.CREATE_DETAIL)}else P(!1),Y()};function Y(){G(!1),x(u.USER_SELECT),D([])}return i((function(){return d?t("div",e({className:c("uikit-conversation-create-container",S),style:T},{children:[!j&&o(m,{onClick:function(){return P(!0)}}),j&&t("div",e({className:"tui-conversation-create"},{children:[t("div",e({className:"tui-conversation-create-header"},{children:[o(C,{onClick:O,type:l.BACK,width:9,height:16}),o("div",e({className:"title"},{children:I(k?"TUIConversation.Add Participants":"TUIConversation.Start chat")}))]})),b===u.USER_SELECT?o(v,{isCreateGroup:k,setIsCreateGroup:G,selectList:B,setSelectList:D,conversationList:_,onBeforeCreateConversation:R,onConversationCreated:w,setPageState:x}):o(E,{pageState:b,setPageState:x,profileList:B.map((function(e){return null==e?void 0:e.profile})),onBeforeCreateConversation:R,onConversationCreated:w})]}))]})):null}),[d,S,j,k,b,B,_,R])}!function(e){e.USER_SELECT="Next",e.CREATE_DETAIL="Create",e.GROUP_TYPE="GroupType"}(u||(u={}));export{f as ConversationCreate,u as PageStateTypes};

package/dist/esm/components/ConversationCreate/ConversationCreateButton.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+interface IConversationCreateButtonProps {
+    visible?: boolean;
+    onClick?: (event: React__default.BaseSyntheticEvent) => void;
+    height?: number;
+    width?: number;
+    className?: string;
+}
+declare const ConversationCreateButton: (props: IConversationCreateButtonProps) => react_jsx_runtime.JSX.Element | null;
+
+export { ConversationCreateButton, IConversationCreateButtonProps };

package/dist/esm/components/ConversationCreate/ConversationCreateButton.js

@@ -0,0 +1 @@
+import{__assign as o}from"tslib";import{jsx as i}from"react/jsx-runtime";import t from"../../node_modules/classnames/index.js";import{Icon as r}from"../Icon/Icon.js";import{IconTypes as e}from"../Icon/type.js";var n=function(n){var m=n.visible,s=void 0===m||m,c=n.className,a=n.onClick,l=n.height,d=void 0===l?24:l,p=n.width,v=void 0===p?24:p;return s?i("div",o({className:t("tui-conversation-create-button",c)},{children:i(r,{onClick:a,type:e.CREATE,height:d,width:v})})):null};export{n as ConversationCreateButton};

package/dist/esm/components/ConversationCreate/ConversationCreateGroupDetail.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { Profile } from '@tencentcloud/chat';
+import { CreateGroupParams, IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { PageStateTypes } from './ConversationCreate.js';
+
+interface ConversationCreateGroupDetailProps {
+    profileList: Profile[];
+    pageState: PageStateTypes;
+    setPageState: React__default.Dispatch<React__default.SetStateAction<PageStateTypes>>;
+    onBeforeCreateConversation?: (params: CreateGroupParams) => void;
+    onConversationCreated?: (conversation: IConversationModel) => void;
+}
+declare function ConversationCreateGroupDetail(props: ConversationCreateGroupDetailProps): react_jsx_runtime.JSX.Element;
+
+export { ConversationCreateGroupDetail, ConversationCreateGroupDetailProps };

package/dist/esm/components/ConversationCreate/ConversationCreateGroupDetail.js

@@ -0,0 +1 @@
+import{__spreadArray as e,__assign as t,__awaiter as r,__generator as o}from"tslib";import{jsxs as n,Fragment as a,jsx as i}from"react/jsx-runtime";import{useState as c}from"react";import{useTranslation as s}from"react-i18next";import{Input as u}from"../Input/Input.js";import{Icon as p}from"../Icon/Icon.js";import{IconTypes as l}from"../Icon/type.js";import{Toast as m}from"../Toast/index.js";import{Avatar as d}from"../Avatar/Avatar.js";import{defaultUserAvatar as v,defaultGroupAvatarAVChatRoom as f,defaultGroupAvatarMeeting as g,defaultGroupAvatarPublic as h,defaultGroupAvatarWork as C}from"../Avatar/default.js";import{PageStateTypes as x}from"./ConversationCreate.js";import{GroupType as I,ConversationGroupTypeInfo as N,typeInfoList as b}from"./ConversationGroupTypeInfo.js";import"@tencentcloud/tui-core";import{useUIManager as T}from"../../context/UIManagerContext.js";import"../../context/MessageContext.js";import"@tencentcloud/chat-uikit-engine";import{createGroupConversation as y}from"../../hooks/useConversation.js";function j(j){var k=this,U=j.profileList,P=j.pageState,G=j.setPageState,A=j.onBeforeCreateConversation,D=j.onConversationCreated,R=s().t,O=T();O.setActiveConversation;var S=O.myProfile,w=e([],U,!0);S&&w.unshift(S);var L=w.map((function(e){return e.nick||e.userID})).toString(),M=c(L.length>=15?"".concat(L.slice(0,12),"..."):L),W=M[0],_=M[1],E=c(""),Y=E[0],q=E[1],z=c(I.Work),B=z[0],H=z[1],V=function(e,t){var r=e.target.value;switch(t){case"name":_(r);break;case"id":q(r);break;case"type":H(r)}},F=function(){G(x.GROUP_TYPE)};return P!==x.GROUP_TYPE?n(a,{children:[n("div",t({className:"tui-conversation-create-group-detail"},{children:[i("div",t({className:"create-group-box create-group-name"},{children:i(u,{maxLength:15,value:W,onChange:function(e){V(e,"name")},border:"bottom",inputClassName:"input-group-name",clearable:!0,prefix:i("div",t({className:"input-group-title"},{children:R("TUIConversation.Group Name")}))})})),i("div",t({className:"create-group-box create-group-id"},{children:i(u,{border:"bottom",inputClassName:"input-group-text",clearable:!0,value:Y,onChange:function(e){V(e,"id")},prefix:i("div",t({className:"input-group-title"},{children:R("TUIConversation.Group ID")}))})})),i("div",t({className:"create-group-box create-group-type",onClick:F},{children:i(u,{readOnly:!0,border:"bottom",inputClassName:"input-group-text",prefix:i("div",t({className:"input-group-title"},{children:R("TUIConversation.Group Type")})),suffix:i(p,{onClick:F,type:l.ARROW_RIGHT,width:7,height:12}),value:R("TUIConversation.".concat(B)),onChange:function(e){V(e,"type")}})})),i("div",t({className:"create-group-illustrate"},{children:R("TUIConversation.".concat(null==b?void 0:b.find((function(e){return e.type===B})).des))})),n("div",t({className:"create-group-portrait"},{children:[i("div",t({className:"create-group-portrait-title"},{children:R("TUIConversation.Participants")})),i("div",t({className:"create-group-portrait-info-container"},{children:U.map((function(e){var r=e.avatar,o=e.userID,a=e.nick;return n("div",t({className:"create-group-portrait-info"},{children:[i(d,{shape:"square",size:50,image:r||v}),i("div",t({className:"create-group-portrait-info-nick"},{children:a}))]}),o)}))}))]}))]})),i("div",t({className:"tui-conversation-create-next-container"},{children:i("div",t({role:"presentation",className:"tui-conversation-create-next",onClick:function(){return r(k,void 0,void 0,(function(){var e,t,r,n;return o(this,(function(o){return e=U.map((function(e){return{userID:e.userID}})),t=function(e){switch(e){case I.Work:return C;case I.Public:return h;case I.Meeting:return g;case I.AVChatRoom:return f;default:return""}}(B),r={name:W,type:B,groupID:Y,avatar:t,memberList:e},n=(null==A?void 0:A(r))||r,y(n).then((function(e){null==D||D(e)})).catch((function(e){m({text:e.message,type:"error"})})),[2]}))}))}},{children:R("TUIConversation.Create")}))}))]}):i(N,{groupType:B,setGroupType:H,setPageState:G})}export{j as ConversationCreateGroupDetail};

package/dist/esm/components/ConversationCreate/ConversationCreateSelectView.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { Profile } from '@tencentcloud/chat';
+
+interface ValueProps {
+    profile: Profile;
+    domList: HTMLInputElement[];
+}
+interface ConversationCreateSelectViewProps {
+    selectList: ValueProps[];
+    setSelectList: React__default.Dispatch<React__default.SetStateAction<ValueProps[]>>;
+}
+declare function ConversationCreateSelectView(props: ConversationCreateSelectViewProps): react_jsx_runtime.JSX.Element;
+
+export { ConversationCreateSelectView, ConversationCreateSelectViewProps };

package/dist/esm/components/ConversationCreate/ConversationCreateUserSelectList.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { ConversationCreateSelectViewProps } from './ConversationCreateSelectView.js';
+import { PageStateTypes } from './ConversationCreate.js';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+
+interface ConversationCreateUserSelectListProps extends ConversationCreateSelectViewProps {
+    isCreateGroup: boolean;
+    setIsCreateGroup: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    className?: string;
+    conversationList: IConversationModel[];
+    setPageState: React__default.Dispatch<React__default.SetStateAction<PageStateTypes>>;
+    onBeforeCreateConversation?: (userID: string) => void;
+    onConversationCreated?: (conversation: IConversationModel) => void;
+}
+declare function ConversationCreateUserSelectList(props: ConversationCreateUserSelectListProps): react_jsx_runtime.JSX.Element;
+
+export { ConversationCreateUserSelectList, ConversationCreateUserSelectListProps };

package/dist/esm/components/ConversationCreate/ConversationCreateUserSelectList.js

@@ -1 +1 @@
-import{__assign as e,__awaiter as t,__generator as r,__spreadArray as n}from"tslib";import{jsxs as o,Fragment as i,jsx as c}from"react/jsx-runtime";import{useState as a,useRef as s}from"react";import{useTranslation as u}from"react-i18next";import{TUIConversationService as l}from"@tencentcloud/chat-uikit-engine";import{Input as m}from"../Input/Input.js";import{Icon as p}from"../Icon/Icon.js";import{IconTypes as v}from"../Icon/type.js";import{ConversationCreateSelectView as h}from"./ConversationCreateSelectView.js";import{Avatar as d}from"../Avatar/Avatar.js";import{defaultUserAvatar as f}from"../Avatar/default.js";import{useConversationCreate as C}from"./hooks/useConversationCreate.js";import{useUIKit as x}from"../../context/UIKitContext.js";import{useUIManager as I}from"../../context/UIManagerContext.js";import"../../context/TUIMessageContext.js";import{PageStateTypes as g}from"./ConversationCreate.js";import{useConversation as N}from"../../hooks/useConversation.js";import{Toast as j}from"../Toast/index.js";function k(k){var b=this,y=k.isCreateGroup,A=k.selectList,D=k.setSelectList,L=k.className,S=k.conversationList,T=k.setIsCreateGroup,w=k.setConversationCreated,U=k.setPageState,E=u().t,M=a(""),R=M[0],F=M[1],G=x().chat,P=I().setActiveConversation,z=a({}),H=z[0],K=z[1],O=C(G,S,(function(e){K(e)})).getFriendListSortSearchResult,V=N(G).createConversation,_=s(new Map);return o(i,{children:[c(m,{className:"tui-conversation-create-search-input",placeholder:E("TUIConversation.Search"),clearable:!0,value:R,onChange:function(e){return t(b,void 0,void 0,(function(){var t,n;return r(this,(function(r){switch(r.label){case 0:return t=e.target.value,F(t),n=K,[4,O(t)];case 1:return n.apply(void 0,[r.sent()]),[2]}}))}))},prefix:c(p,{type:v.SEARCH,height:16,width:16})}),y&&c(h,{selectList:A,setSelectList:D}),!y&&o("div",e({role:"presentation",className:"tui-user",onClick:function(){T(!0),_.current.clear(),D([])}},{children:[c(p,{type:v.ADD}),c("div",e({className:"tui-user-name active"},{children:E("TUIConversation.New group chat")}))]})),c("div",e({className:"tui-conversation-create ".concat(L)},{children:c("div",e({className:"tui-conversation-create-container"},{children:c("div",e({className:"tui-group-container"},{children:Object.keys(H).map((function(i){return 0!==H[i].length&&o("div",e({className:"tui-group-box"},{children:[c("div",e({className:"title"},{children:i})),H[i].map((function(a,s){var u=a.userID,m=a.nick,p=a.avatar;return o("label",e({role:"presentation",className:"tui-user tui-user-checkbox-label",htmlFor:"userChecked-".concat(i,"-").concat(u),onClick:function(e){!function(e){t(b,void 0,void 0,(function(){var t,n;return r(this,(function(r){switch(r.label){case 0:return y?[2]:(t=e.userID,[4,V("C2C".concat(t))]);case 1:return n=r.sent(),w(!1),P(n),l.switchConversation(null==n?void 0:n.conversationID),[2]}}))}))}(a)}},{children:[c(d,{size:30,image:p||f}),c("div",e({className:"tui-user-name text-ellipsis"},{children:m||"".concat(u)})),y&&c("input",{onChange:function(e){!function(e,t,r){void 0===r&&(r=[]);var o=t.userID,i=e.target.checked;r.forEach((function(e){e.checked=i})),i?A.push({profile:t,domList:r}):A.splice(A.findIndex((function(e){return e.profile.userID===o})),1),D(n([],A,!0))}(e,a,_.current.get(u))},type:"checkbox",ref:function(e){!function(e,t){if(t){_.current.has(e)||_.current.set(e,[]);var r=_.current.get(e);0!==r.length&&r.some((function(e){return e.id===t.id}))||r.push(t)}}(u,e)},id:"userChecked-".concat(i,"-").concat(u),className:"tui-user-checkbox"})]}),u)}))]}),i)}))}))}))})),y&&c("div",e({className:"tui-conversation-create-next-container"},{children:c("div",e({role:"presentation",className:"tui-conversation-create-next",onClick:function(){A&&0===A.length?j({text:E("TUIConversation.Participant cannot be empty"),type:"error"}):U(g.CREATE_DETAIL)}},{children:E("TUIConversation.Next")}))}))]})}export{k as ConversationCreateUserSelectList};
+import{__assign as e,__awaiter as t,__generator as r,__spreadArray as n}from"tslib";import{jsxs as i,Fragment as o,jsx as c}from"react/jsx-runtime";import{useState as a,useRef as s}from"react";import{useTranslation as u}from"react-i18next";import{Input as l}from"../Input/Input.js";import{Icon as m}from"../Icon/Icon.js";import{IconTypes as p}from"../Icon/type.js";import{ConversationCreateSelectView as h}from"./ConversationCreateSelectView.js";import{Avatar as f}from"../Avatar/Avatar.js";import{defaultUserAvatar as v}from"../Avatar/default.js";import{useConversationCreate as d}from"./hooks/useConversationCreate.js";import{createC2CConversation as C}from"../../hooks/useConversation.js";import{useUIKit as x}from"../../context/UIKitContext.js";import"@tencentcloud/chat-uikit-engine";import"../../context/MessageContext.js";import{PageStateTypes as g}from"./ConversationCreate.js";import{Toast as I}from"../Toast/index.js";function N(N){var k=this,j=N.isCreateGroup,b=N.selectList,y=N.setSelectList,L=N.className,S=N.conversationList,A=N.setIsCreateGroup,D=N.setPageState,T=N.onBeforeCreateConversation,w=N.onConversationCreated,E=u().t,U=a(""),R=U[0],F=U[1];x().chat;var G=a({}),M=G[0],P=G[1],z=d(S,(function(e){P(e)})).getFriendListSortSearchResult,B=s(new Map);return i(o,{children:[c(l,{className:"tui-conversation-create-search-input",placeholder:E("TUIConversation.Search"),clearable:!0,value:R,onChange:function(e){return t(k,void 0,void 0,(function(){var t,n;return r(this,(function(r){switch(r.label){case 0:return t=e.target.value,F(t),n=P,[4,z(t)];case 1:return n.apply(void 0,[r.sent()]),[2]}}))}))},prefix:c(m,{type:p.SEARCH,height:16,width:16})}),j&&c(h,{selectList:b,setSelectList:y}),!j&&i("div",e({role:"presentation",className:"tui-user",onClick:function(){A(!0),B.current.clear(),y([])}},{children:[c(m,{type:p.ADD}),c("div",e({className:"tui-user-name active"},{children:E("TUIConversation.New group chat")}))]})),c("div",e({className:"tui-conversation-create-select-list-container ".concat(L)},{children:c("div",e({className:"tui-conversation-create-select-list"},{children:c("div",e({className:"tui-group-container"},{children:Object.keys(M).map((function(o){return 0!==M[o].length&&i("div",e({className:"tui-group-box"},{children:[c("div",e({className:"title"},{children:o})),M[o].map((function(a,s){var u=a.userID,l=a.nick,m=a.avatar;return i("label",e({role:"presentation",className:"tui-user tui-user-checkbox-label",htmlFor:"userChecked-".concat(o,"-").concat(u),onClick:function(){!function(e){t(k,void 0,void 0,(function(){var t;return r(this,(function(r){return j||(t=e.userID,null==T||T(t),C(t).then((function(e){null==w||w(e)})).catch((function(e){I({text:e.message,type:"error"})}))),[2]}))}))}(a)}},{children:[c(f,{size:30,image:m||v}),c("div",e({className:"tui-user-name text-ellipsis"},{children:l||"".concat(u)})),j&&c("input",{onChange:function(e){!function(e,t,r){void 0===r&&(r=[]);var i=t.userID,o=e.target.checked;r.forEach((function(e){e.checked=o})),o?b.push({profile:t,domList:r}):b.splice(b.findIndex((function(e){return e.profile.userID===i})),1),y(n([],b,!0))}(e,a,B.current.get(u))},type:"checkbox",ref:function(e){!function(e,t){if(t){B.current.has(e)||B.current.set(e,[]);var r=B.current.get(e);0!==r.length&&r.some((function(e){return e.id===t.id}))||r.push(t)}}(u,e)},id:"userChecked-".concat(o,"-").concat(u),className:"tui-user-checkbox"})]}),u)}))]}),o)}))}))}))})),j&&c("div",e({className:"tui-conversation-create-next-container"},{children:c("div",e({role:"presentation",className:"tui-conversation-create-next",onClick:function(){b&&0===b.length?I({text:E("TUIConversation.Participant cannot be empty"),type:"error"}):D(g.CREATE_DETAIL)}},{children:E("TUIConversation.Next")}))}))]})}export{N as ConversationCreateUserSelectList};

package/dist/esm/components/ConversationCreate/ConversationGroupTypeInfo.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { PageStateTypes } from './ConversationCreate.js';
+
+declare enum GroupType {
+    Work,
+    Public,
+    Meeting,
+    AVChatRoom,
+    Community
+}
+interface ConversationGroupTypeInfoProps {
+    groupType: GroupType;
+    setGroupType: React__default.Dispatch<React__default.SetStateAction<GroupType>>;
+    setPageState: React__default.Dispatch<React__default.SetStateAction<PageStateTypes>>;
+}
+declare const typeInfoList: Array<{
+    type: GroupType;
+    name: string;
+    des: string;
+}>;
+declare function ConversationGroupTypeInfo(props: ConversationGroupTypeInfoProps): react_jsx_runtime.JSX.Element;
+
+export { ConversationGroupTypeInfo, ConversationGroupTypeInfoProps, GroupType, typeInfoList };

package/dist/esm/components/ConversationCreate/ConversationGroupTypeInfo.js

@@ -1 +1 @@
-import{__assign as e}from"tslib";import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useTranslation as n}from"react-i18next";import{PageStateTypes as r}from"./ConversationCreate.js";import{Icon as i}from"../Icon/Icon.js";import{IconTypes as a}from"../Icon/type.js";var s;!function(e){e.Work="Private",e.Public="Public",e.Meeting="ChatRoom",e.AVChatRoom="AVChatRoom",e.Community="Community"}(s||(s={}));var c=[{type:"Work",des:"Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details."},{type:"Public",des:"After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details."},{type:"Meeting",des:"After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details."},{type:"AVChatRoom",des:"After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details."},{type:"Community",des:"After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details."}];function u(s){var u=s.groupType,p=s.setGroupType,d=s.setPageState,m=n().t;return t("div",e({className:"tui-conversation-group-type-info"},{children:[c.map((function(n){var s=n.type,c=n.des;return t("div",e({role:"presentation",className:"group-type-info-box ".concat(s===u?"group-type-info-box--active":""," "),onClick:function(){!function(e){p(e),d(r.CREATE_DETAIL)}(s)}},{children:[t("div",e({className:"group-type-info-title"},{children:[s===u&&o(i,{className:"box-active-icon",type:a.RIGHT,width:16,height:16}),m("TUIConversation.".concat(s))]})),o("div",e({className:"group-type-info-description"},{children:m("TUIConversation.".concat(c))}))]}),s)})),o("a",e({className:"group-type-info-document",target:"_blank",href:"https://www.tencentcloud.com/document/product/1047/33515?lang=en&pg=#group-features",rel:"bookmark noreferrer"},{children:m("TUIConversation.Details")}))]}))}export{u as ConversationGroupTypeInfo,s as GroupType,c as typeInfoList};
+import{__assign as e}from"tslib";import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useTranslation as n}from"react-i18next";import{TUIChatEngine as r}from"@tencentcloud/chat-uikit-engine";import{PageStateTypes as i}from"./ConversationCreate.js";import{Icon as a}from"../Icon/Icon.js";import{IconTypes as s}from"../Icon/type.js";var c;!function(e){e[e.Work=r.TYPES.GRP_WORK]="Work",e[e.Public=r.TYPES.GRP_PUBLIC]="Public",e[e.Meeting=r.TYPES.GRP_MEETING]="Meeting",e[e.AVChatRoom=r.TYPES.GRP_AVCHATROOM]="AVChatRoom",e[e.Community=r.TYPES.GRP_COMMUNITY]="Community"}(c||(c={}));var u=[{type:c.Work,name:"Work",des:"Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details."},{type:c.Public,name:"Public",des:"After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details."},{type:c.Meeting,name:"Meeting",des:"After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details."},{type:c.AVChatRoom,name:"AVChatRoom",des:"After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details."},{type:c.Community,name:"Community",des:"After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details."}];function p(r){var c=r.groupType,p=r.setGroupType,m=r.setPageState,d=n().t;return t("div",e({className:"tui-conversation-group-type-info"},{children:[u.map((function(n){var r=n.type,u=n.name,h=n.des;return t("div",e({role:"presentation",className:"group-type-info-box ".concat(r===c?"group-type-info-box--active":""," "),onClick:function(){!function(e){p(e),m(i.CREATE_DETAIL)}(r)}},{children:[t("div",e({className:"group-type-info-title"},{children:[r===c&&o(a,{className:"box-active-icon",type:s.RIGHT,width:16,height:16}),d("TUIConversation.".concat(u))]})),o("div",e({className:"group-type-info-description"},{children:d("TUIConversation.".concat(h))}))]}),r)})),o("a",e({className:"group-type-info-document",target:"_blank",href:"https://trtc.io/document/33529?platform=web&product=chat&menulabel=uikit#group-types",rel:"bookmark noreferrer"},{children:d("TUIConversation.Details")}))]}))}export{p as ConversationGroupTypeInfo,c as GroupType,u as typeInfoList};

package/dist/esm/components/ConversationCreate/hooks/useConversationCreate.d.ts

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { Friend } from '@tencentcloud/chat';
+
+declare const useConversationCreate: (conversationList: IConversationModel[], setFriendListResultHandler?: ((newFriendListResult: object, setFriendListResult: React__default.Dispatch<React__default.SetStateAction<{
+    string: object[];
+}>>) => void) | undefined) => {
+    getFirstLetter: (str: string) => string;
+    queryFriendList: (friendList: Friend[]) => Promise<void>;
+    getFriendListSortSearchResult: (searchValue: string) => Promise<any>;
+    friendListSortResult: any;
+};
+
+export { useConversationCreate };

package/dist/esm/components/ConversationCreate/hooks/useConversationCreate.js

@@ -1 +1 @@
-import{__awaiter as e,__generator as t}from"tslib";import{useState as r,useEffect as o}from"react";import n from"@tencentcloud/chat";import{strChineseFirstPy as i}from"../static/word.js";import"react/jsx-runtime";import"react-i18next";import"@tencentcloud/tui-core";import"@tencentcloud/chat-uikit-engine";import"../../../context/TUIMessageContext.js";import"../../../utils/env.js";import"../../Icon/config.js";import"../../Icon/type.js";import"date-fns";import"date-fns/locale";import"../ConversationCreate.js";import"../ConversationGroupTypeInfo.js";import"../../TUIChat/index.js";import"../../../constants.js";import"../../TUIMessage/hooks/useMessageReply.js";import"../../TUIMessage/MessagePlugins.js";import"../../TUIMessage/MessageContext.js";import"../../TUIMessageInput/hooks/useHandleQuoteMessage.js";import"../../TUIProfile/TUIProfileDefault.js";import{useProfile as s}from"../../../hooks/useProfile.js";var u=function(u,c,a){var l=r(),f=l[0],p=l[1],m=function(e){var t=e.trim(),r=t.charCodeAt(0);return r>40869||r<19968?t.charAt(0):i.charAt(r-19968)},d=function(){return e(void 0,void 0,void 0,(function(){var e,r,o,i;return t(this,(function(t){switch(t.label){case 0:return c.filter((function(e){return(null==e?void 0:e.type)===n.TYPES.CONV_C2C})).slice(0,5).map((function(e){return null==e?void 0:e.userProfile})),[4,null==u?void 0:u.getFriendList()];case 1:return e=t.sent()||{},r=e.code,o=e.data,0===r&&(i=v(o.map((function(e){return e.profile}))),p(i),a&&a(i,p)),[2]}}))}))},v=function(e,t){for(var r={"#":[]},o=65;o<=90;o+=1)r[String.fromCharCode(o)]=[];return e.forEach((function(e){var t=e.nick,o=e.userID,n=m(t||o);n>="a"&&n<="z"?r[n.toLocaleUpperCase()].push(e):n<"A"||n>"z"?r["#"].push(e):r[n].push(e)})),Object.keys(r).forEach((function(e){r[e].sort((function(e,t){var r=e.nick,o=e.userID,n=t.nick,i=t.userID;return r||o<n||i||r||o===n||i?1:-1}))})),r},h=s(u).getUserProfile;return o((function(){d()}),[u]),{getFirstLetter:m,queryFriendList:d,getFriendListSortSearchResult:function(r){return e(void 0,void 0,void 0,(function(){var e,o,n,i;return t(this,(function(t){switch(t.label){case 0:return r?[4,h([r])]:[2,f];case 1:return e=t.sent().data,o={},n=!1,Object.keys(f).forEach((function(e){o[e]=f[e].filter((function(e){var t,o,i=e.nick,s=e.userID,u=null==i?void 0:i.toLocaleLowerCase(),c=r.toLocaleLowerCase(),a=s.toLocaleLowerCase();return o="TencentCloudDemo"===(null===(t=process.env)||void 0===t?void 0:t.REACT_APP_ONLINE)?u?u.includes(c):a.includes(c):a===c,n=n||o,o}))})),"TencentCloudDemo"===(null===(i=process.env)||void 0===i?void 0:i.REACT_APP_ONLINE)?[2,o]:[2,n?o:v(e)]}}))}))},friendListSortResult:f}};export{u as useConversationCreate};
+import{__awaiter as r,__generator as t}from"tslib";import{useState as n,useEffect as e}from"react";import{TUIStore as o,StoreName as i,TUIUserService as u}from"@tencentcloud/chat-uikit-engine";import c from"@tencentcloud/chat";import{strChineseFirstPy as s}from"../static/word.js";var a=function(a,f){var l=n(),d=l[0],v=l[1],h=function(r){var t=r.trim(),n=t.charCodeAt(0);return n>40869||n<19968?t.charAt(0):s.charAt(n-19968)},p=function(n){return r(void 0,void 0,void 0,(function(){var r;return t(this,(function(t){return a.filter((function(r){return(null==r?void 0:r.type)===c.TYPES.CONV_C2C})).slice(0,5).map((function(r){return null==r?void 0:r.userProfile})),r=m(null==n?void 0:n.map((function(r){return r.profile}))),v(r),f&&f(r,v),[2]}))}))};function m(r,t){for(var n={"#":[]},e=65;e<=90;e+=1)n[String.fromCharCode(e)]=[];return null==r||r.forEach((function(r){var t=r.nick,e=r.userID,o=h(t||e);o>="a"&&o<="z"?n[o.toLocaleUpperCase()].push(r):o<"A"||o>"z"?n["#"].push(r):n[o].push(r)})),Object.keys(n).forEach((function(r){n[r].sort((function(r,t){var n=r.nick,e=r.userID,o=t.nick,i=t.userID;return n||e<=o||i?1:-1}))})),n}function L(r){p(r)}return e((function(){return o.watch(i.FRIEND,{friendList:L}),function(){o.unwatch(i.FRIEND,{friendList:L})}}),[]),{getFirstLetter:h,queryFriendList:p,getFriendListSortSearchResult:function(n){return r(void 0,void 0,void 0,(function(){var r,e,o,i;return t(this,(function(t){switch(t.label){case 0:return n?[4,u.getUserProfile({userIDList:[n]})]:[2,d];case 1:return r=t.sent().data,e={},o=!1,Object.keys(d).forEach((function(r){e[r]=d[r].filter((function(r){var t,e,i=r.nick,u=r.userID,c=null==i?void 0:i.toLocaleLowerCase(),s=n.toLocaleLowerCase(),a=u.toLocaleLowerCase();return e="TencentCloudDemo"===(null===(t=process.env)||void 0===t?void 0:t.REACT_APP_ONLINE)?c?c.includes(s):a.includes(s):a===s,o=o||e,e}))})),"TencentCloudDemo"===(null===(i=process.env)||void 0===i?void 0:i.REACT_APP_ONLINE)?[2,e]:[2,o?e:m(r)]}}))}))},friendListSortResult:d}};export{a as useConversationCreate};

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

@@ -0,0 +1,57 @@
+import React__default, { PropsWithChildren } from 'react';
+import { IConversationModel, CreateGroupParams } from '@tencentcloud/chat-uikit-engine';
+import { IConversationListHeaderProps } from './ConversationListHeader/ConversationListHeader.js';
+import { IConversationListContentProps } from './ConversationListContent/ConversationListContent.js';
+import { IConversationPreviewUIProps } from '../ConversationPreview/ConversationPreview.js';
+import { AvatarProps } from '../Avatar/Avatar.js';
+import { IConversationSearchProps } from '../ConversationSearch/ConversationSearch.js';
+import { IConversationCreateProps } from '../ConversationCreate/ConversationCreate.js';
+import { IConversationActionsConfig, IConversationActionsProps } from '../ConversationActions/ConversationActions.js';
+
+interface IConversationListProps {
+    /** Determines whether the conversation search input appears on the conversation list view. (Default: True) */
+    enableSearch?: boolean;
+    /** Determines whether the conversation creation button appears on the conversation list view. (Default: True) */
+    enableCreate?: boolean;
+    /** Determines whether the conversation action button appears on the conversation list view. (Default: True) */
+    enableActions?: boolean;
+    /** Specifies the prop to customize action on the conversation list item. */
+    actionsConfig?: IConversationActionsConfig;
+    /** Specifies a react component to customize the header of the conversation list. */
+    Header?: React__default.ComponentType<IConversationListHeaderProps>;
+    /** Specifies a react component to customize the conversation list component. */
+    List?: React__default.ComponentType<IConversationListContentProps>;
+    /** Specifies a react component to customize the conversation preview. */
+    Preview?: React__default.ComponentType<IConversationPreviewUIProps>;
+    /** Specifies a react component to customize the conversation create component. */
+    ConversationCreate?: React__default.ComponentType<IConversationCreateProps>;
+    /** Specifies a react component to customize the conversation search. */
+    ConversationSearch?: React__default.ComponentType<IConversationSearchProps>;
+    /** Specifies a react component to customize the conversation actions in conversation preview. */
+    ConversationActions?: React__default.ComponentType<IConversationActionsProps>;
+    /** Specifies a react component to customize the placeholder when the conversation list is empty. */
+    PlaceholderEmptyList?: React__default.ReactNode;
+    /** Specifies a react component to customize the placeholder when the conversation list is loading. */
+    PlaceholderLoading?: React__default.ReactNode;
+    /** Specifies a react component to customize the placeholder when the conversation list loaded error. */
+    PlaceholderLoadError?: React__default.ReactNode;
+    /** Specifies a react component to customize the avatar in list. */
+    Avatar?: React__default.ComponentType<AvatarProps>;
+    /** Specifies a function to filter conversations in the conversation list. */
+    filter?: (conversationList: IConversationModel[]) => IConversationModel[];
+    /** Specifies a function to sort conversations in the conversation list. */
+    sort?: (conversationList: IConversationModel[]) => IConversationModel[];
+    /** Specifies the prop to receive callback when a user clicks a conversation in the conversation list. */
+    onSelectConversation?: (conversation: IConversationModel) => void;
+    /** Specifies the prop to execute custom operations before creating a channel. */
+    onBeforeCreateConversation?: (params: string | CreateGroupParams) => string | CreateGroupParams;
+    /** Specifies the prop to receive callback when a conversation is created. */
+    onConversationCreated?: (conversation: IConversationModel) => void;
+    /** The custom class name */
+    className?: string;
+    /** The custom css style */
+    style?: React__default.CSSProperties;
+}
+declare function ConversationList<T extends IConversationListProps>(props: PropsWithChildren<T>): React__default.ReactElement;
+
+export { ConversationList, IConversationListProps };

package/dist/esm/components/ConversationList/ConversationList.js

@@ -0,0 +1 @@
+import{__assign as o}from"tslib";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as r}from"react";import{ConversationListProvider as i,useConversationList as n}from"../../context/ConversationListContext.js";import{ConversationListHeader as a}from"./ConversationListHeader/ConversationListHeader.js";import{ConversationListContent as s}from"./ConversationListContent/ConversationListContent.js";import"react-i18next";import"../Icon/config.js";import"../Icon/type.js";import c from"../../node_modules/classnames/index.js";import{ConversationPreview as v,ConversationPreviewUI as l}from"../ConversationPreview/ConversationPreview.js";import{Avatar as d}from"../Avatar/Avatar.js";import{PlaceHolder as m,PlaceHolderTypes as C}from"../PlaceHolder/index.js";import{ConversationSearch as p}from"../ConversationSearch/ConversationSearch.js";import{ConversationCreate as f}from"../ConversationCreate/ConversationCreate.js";import"../ConversationCreate/ConversationGroupTypeInfo.js";import"@tencentcloud/tui-core";import"@tencentcloud/chat-uikit-engine";import"../../context/MessageContext.js";import"@tencentcloud/chat";import{ConversationActions as h}from"../ConversationActions/ConversationActions.js";import{isH5 as u}from"../../utils/env.js";function L(i){var L=i.enableSearch,j=void 0===L||L,A=i.enableCreate,g=void 0===A||A,P=i.enableActions,y=void 0===P||P,b=i.actionsConfig,x=i.Header,S=void 0===x?a:x,N=i.List,E=void 0===N?s:N,I=i.Preview,w=void 0===I?l:I,O=i.ConversationCreate,k=void 0===O?f:O,H=i.ConversationSearch,_=void 0===H?p:H,G=i.ConversationActions,R=void 0===G?h:G,B=i.PlaceholderEmptyList,D=void 0===B?e(m,{type:C.NO_CONVERSATIONS}):B,M=i.PlaceholderLoading,T=void 0===M?e(m,{type:C.LOADING}):M,V=i.PlaceholderLoadError,W=void 0===V?e(m,{type:C.WRONG}):V,q=i.Avatar,z=void 0===q?d:q,F=i.onSelectConversation,J=i.onBeforeCreateConversation,K=i.onConversationCreated,Q=i.className,U=i.style,X=n(),Y=X.conversationList,Z=X.filteredAndSortedConversationList,$=X.isLoading,oo=X.isLoadError,eo=r(!1),to=eo[0],ro=eo[1];return t("div",o({className:c(Q,"uikit-chat-list",{"uikit-chat-list--mobile":u}),style:U},{children:[t(S,{children:[e(_,{visible:j,conversationList:Y,Avatar:z,ResultPreview:v}),e(k,{className:c({"uikit-chat-list__header--creating":to}),visible:g,onChangeCreateModelVisible:function(o){return ro(o)},onBeforeCreateConversation:J,onConversationCreated:K})]}),e(E,o({empty:0===Z.length,loading:$,error:oo,PlaceholderEmptyList:D,PlaceholderLoadError:W,PlaceholderLoading:T},{children:Z.map((function(o){return e(v,{conversation:o,enableActions:y,Preview:w,Avatar:z,ConversationActions:R,onSelectConversation:F,actionsConfig:b},o.conversationID)}))}))]}))}function j(t){return e(i,o({filter:t.filter,sort:t.sort},{children:e(L,o({},t))}))}export{j as ConversationList};

package/dist/esm/components/ConversationList/ConversationListContent/ConversationListContent.d.ts

@@ -0,0 +1,23 @@
+interface IConversationListContentProps {
+    /** Renders a customized component in the conversation list main. */
+    children: React.ReactNode;
+    /** Indicates whether the chat list is empty */
+    empty?: boolean;
+    /** Indicates whether the chat list is currently loading */
+    loading?: boolean;
+    /** Indicates whether there was an error loading the chat list */
+    error?: boolean;
+    /** A custom component to display when the chat list is empty */
+    PlaceholderEmptyList?: React.ReactNode;
+    /** A custom component to display while the chat list is loading */
+    PlaceholderLoading?: React.ReactNode;
+    /** A custom component to display when there is an error loading the chat list */
+    PlaceholderLoadError?: React.ReactNode;
+    /** The custom class name */
+    className?: string;
+    /** The custom css style */
+    style?: React.CSSProperties;
+}
+declare function ConversationListContent<T extends IConversationListContentProps>(props: T): React.ReactElement;
+
+export { ConversationListContent, IConversationListContentProps };

package/dist/esm/components/ConversationList/ConversationListContent/ConversationListContent.js

@@ -0,0 +1 @@
+import{__assign as e}from"tslib";import{jsx as o}from"react/jsx-runtime";import r from"../../../node_modules/classnames/index.js";import{PlaceHolder as i,PlaceHolderTypes as t}from"../../PlaceHolder/index.js";function d(d){var l,a=d.children,s=d.empty,m=void 0!==s&&s,n=d.loading,c=void 0!==n&&n,p=d.error,v=void 0!==p&&p,y=d.PlaceholderEmptyList,N=void 0===y?o(i,{type:t.NO_CONVERSATIONS}):y,h=d.PlaceholderLoading,f=void 0===h?o(i,{type:t.LOADING}):h,u=d.PlaceholderLoadError,O=void 0===u?o(i,{type:t.WRONG}):u,x=d.className,L=d.style;return l=v?O:c?f:m?N:a,o("div",e({className:r("uikit-chat-list__container",x),style:L},{children:l}))}export{d as ConversationListContent};

package/dist/esm/components/ConversationList/ConversationListHeader/ConversationListHeader.d.ts

@@ -0,0 +1,15 @@
+interface IConversationListHeaderProps {
+    /** The main of the conversation list header */
+    children: React.ReactNode;
+    /** A custom component to display in the left area of header */
+    left?: React.ReactNode;
+    /** A custom component to display in the right area of header */
+    right?: React.ReactNode;
+    /** The custom class name */
+    className?: string;
+    /** The custom css style */
+    style?: React.CSSProperties;
+}
+declare function ConversationListHeader<T extends IConversationListHeaderProps>(props: T): React.ReactElement;
+
+export { ConversationListHeader, IConversationListHeaderProps };

package/dist/esm/components/ConversationList/ConversationListHeader/ConversationListHeader.js

@@ -0,0 +1 @@
+import{__assign as e}from"tslib";import{jsxs as i,jsx as t}from"react/jsx-runtime";import r from"../../../node_modules/classnames/index.js";function s(s){var a=s.children,l=s.left,c=s.right,d=s.className,m=s.style;return i("div",e({className:r("uikit-chat-list__header",d),style:m},{children:[t("div",e({className:"uikit-chat-list__header__left"},{children:l})),a,t("div",e({className:"uikit-chat-list__header__right"},{children:c}))]}))}export{s as ConversationListHeader};

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

@@ -1,33 +1,45 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
-import { Conversation } from '@tencentcloud/chat';
+import React__default, { CSSProperties } from 'react';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
 import { AvatarProps } from '../Avatar/Avatar.js';
+import { IConversationActionsProps, IConversationActionsConfig } from '../ConversationActions/ConversationActions.js';
 
-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__default.ReactElement;
-    /** Message of Conversation to display */
-    displayMessage?: string | React__default.ReactElement;
-    /** Time of Conversation to display */
-    displayTime?: string;
-    /** Number of unread Messages */
-    unread?: number;
-}
-interface ConversationPreviewProps {
-    conversation: Conversation;
-    activeConversation?: Conversation;
-    Preview?: React__default.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__default.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__default.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__default.ReactNode;
+}
+interface IConversationPreviewProps extends IConversationPreviewUIProps {
+    /** The custom Preview UI component */
+    Preview?: React__default.ComponentType<IConversationPreviewUIProps>;
 }
-declare function ConversationPreview<T extends ConversationPreviewProps>(props: T): react_jsx_runtime.JSX.Element;
+declare function ConversationPreview<T extends IConversationPreviewProps>(props: T): React__default.ReactElement;
+declare function ConversationPreviewUI<T extends IConversationPreviewUIProps>(props: T): React__default.ReactElement;
 
-export { ConversationPreview, ConversationPreviewProps, ConversationPreviewUIComponentProps };
+export { ConversationPreview, ConversationPreviewUI, IConversationPreviewProps, IConversationPreviewUIProps };

package/dist/esm/components/ConversationPreview/ConversationPreview.js

@@ -1 +1 @@
-import{__assign as t}from"tslib";import{jsx as o,Fragment as e}from"react/jsx-runtime";import{useState as n,useEffect as i}from"react";import{useUIKit as r}from"../../context/UIKitContext.js";import{useUIManager as a}from"../../context/UIManagerContext.js";import"../../context/TUIMessageContext.js";import{ConversationPreviewContent as s}from"./ConversationPreviewContent.js";import{getDisplayImage as m,getDisplayTitle as v,getDisplayMessage as c,getDisplayTime as u}from"./utils.js";function l(l){var p=l.activeConversation,d=l.conversation,C=l.Preview,f=void 0===C?s:C,x=l.searchValue,g=l.conversationUpdateCount,j=r().language,I=a(),y=I.setActiveConversation,U=I.myProfile,M=n(m(d)),P=M[0],T=M[1],w=n(v(d,x)),A=w[0],D=w[1],b=n(U&&c(d,U)),h=b[0],K=b[1],V=n(u(d,j)),k=V[0],q=V[1],z=n(d.unreadCount),B=z[0],E=z[1],F=(null==p?void 0:p.conversationID)===(null==d?void 0:d.conversationID);return f?(i((function(){D(v(d,x)),U&&K(c(d,U)),T(m(d)),q(u(d,j)),E(d.unreadCount)}),[d,x,g,j]),o(f,t({},l,{active:F,displayImage:P,displayTitle:A,displayMessage:h,displayTime:k,unread:B,setActiveConversation:y}))):o(e,{})}export{l as ConversationPreview};
+import{__assign as e}from"tslib";import{jsx as i,jsxs as t,Fragment as n}from"react/jsx-runtime";import{useRef as o,useState as r,useEffect as s}from"react";import a from"../../node_modules/classnames/index.js";import{Icon as c}from"../Icon/Icon.js";import{IconTypes as v}from"../Icon/type.js";import{Avatar as l}from"../Avatar/Avatar.js";import{ConversationActions as u}from"../ConversationActions/ConversationActions.js";import{useConversationList as m}from"../../context/ConversationListContext.js";import{useUIManager as d}from"../../context/UIManagerContext.js";import{useUIKit as h}from"../../context/UIKitContext.js";import"../../context/MessageContext.js";import p from"../../hooks/useLongPress.js";import g from"../../hooks/useMouseHover.js";import{generateHighlightTitle as f,getLatestMessagePreview as C}from"./utils.js";import{getTimeStamp as _}from"../utils.js";import{isH5 as k}from"../../utils/env.js";function M(t){var n=t.conversation,o=t.isSelected,r=void 0!==o&&o,s=t.enableActions,p=void 0===s||s,g=t.highlightMatchString,k=t.Preview,M=void 0===k?w:k,A=t.Avatar,j=void 0===A?l:A,x=t.ConversationActions,N=void 0===x?u:x,S=t.Title,b=void 0===S?function(t){var n=t.conversation,o=t.highlightMatchString;return i("div",e({className:"uikit-conversation-preview__title text-ellipsis"},{children:f(n,o).map((function(t,n){return i("span",e({className:a({"uikit-conversation-preview__title--highlight":t.isHighlight,"uikit-conversation-preview__title--normal":!t.isHighlight})},{children:t.text}),n)}))}))}({conversation:n,highlightMatchString:g}):S,L=t.LastMessageTimestamp,y=void 0===L?function(t){var n,o=t.conversation,r=h().language;return i("div",e({className:"uikit-conversation-preview__time"},{children:_(1e3*+((null===(n=o.lastMessage)||void 0===n?void 0:n.lastTime)||0),r)}))}({conversation:n}):L,T=t.LastMessageAbstract,I=void 0===T?function(t){var n=t.conversation,o=d().myProfile;return i("div",e({className:"uikit-conversation-preview__abstract"},{children:C(n,o)}))}({conversation:n}):T,P=t.Unread,U=void 0===P?function(t){var n,o=t.conversation;return n=o.isMuted?i(c,{type:v.MUTE,width:16,height:16}):o.unreadCount>99?"99+":0===o.unreadCount?null:o.unreadCount,i("div",e({className:"uikit-conversation-preview__unread"},{children:n}))}({conversation:n}):P,D=t.onSelectConversation,H=t.actionsConfig,z=t.className,E=t.style,K=t.children;return m().setCurrentConversation,i(M,{conversation:n,isSelected:r,enableActions:p,highlightMatchString:g,Avatar:j,ConversationActions:N,Title:b,LastMessageTimestamp:y,LastMessageAbstract:I,Unread:U,onSelectConversation:D,actionsConfig:H,className:z,style:E,children:K})}function w(c){var v=c.conversation,d=c.isSelected,h=c.enableActions,f=c.Avatar,C=void 0===f?l:f,_=c.ConversationActions,M=void 0===_?u:_,w=c.Title,A=c.LastMessageTimestamp,j=c.LastMessageAbstract,x=c.Unread,N=c.onSelectConversation,S=c.actionsConfig,b=c.className,L=c.style,y=c.children,T=m(),I=T.currentConversation,P=T.setCurrentConversation,U=o(null),D=r(!1),H=D[0],z=D[1],E=g(U),K=p({},{delay:500,shouldPreventDefault:!0}).isLongPressing;s((function(){z(E||K)}),[E,K]);return i("div",e({ref:U,className:a("uikit-conversation-preview",b,{"uikit-conversation-preview--mobile":k,"uikit-conversation-preview--active":d||v.conversationID===(null==I?void 0:I.conversationID),"uikit-conversation-preview--unread":!v.isMuted&&v.unreadCount>0,"uikit-conversation-preview--pin":v.isPinned,"uikit-conversation-preview--mute":v.isMuted}),style:L,onClick:function(){null==N||N(v),P(v)}},{children:y||t(n,{children:[i("div",e({className:"uikit-conversation-preview__avatar"},{children:i(C,{image:v.getAvatar(),size:40})})),t("div",e({className:"uikit-conversation-preview__content"},{children:[w,j]})),t("div",e({className:"uikit-conversation-preview__external"},{children:[x,h&&H?i(M,e({conversation:v},S)):A]}))]})}))}export{M as ConversationPreview,w as ConversationPreviewUI};

package/dist/esm/components/ConversationPreview/utils.js

@@ -1 +1 @@
-import{__assign as e}from"tslib";import{jsxs as r,jsx as o,Fragment as a}from"react/jsx-runtime";import t from"@tencentcloud/chat";import"react";import"../Icon/config.js";import"../Icon/type.js";import{defaultGroupAvatarWork as i,defaultUserAvatar as n}from"../Avatar/default.js";import{formatEmojiString as s}from"../TUIMessage/utils/emojiMap.js";import{getTimeStamp as c}from"../utils.js";var l=function(e){if(!e)return null;var r={},o=e.type,a=e.groupProfile,i=e.userProfile;switch(o){case t.TYPES.CONV_C2C:r=i;break;case t.TYPES.CONV_GROUP:r=a;case t.TYPES.CONV_SYSTEM:}return r},p=function(i,n,s){void 0===s&&(s="#147AFF");var c=l(i),p=c.name,u=c.nick,d=c.groupID,m=c.userID,f=i.type,C=i.remark,v="";switch(f){case t.TYPES.CONV_C2C:v=C||u||m;break;case t.TYPES.CONV_GROUP:v=p||d;break;default:v=""}var O,P,S,h;return n?(P=(O=v).toLocaleLowerCase(),S=n&&P.indexOf(n.toLocaleLowerCase()),h=O.split(new RegExp("(".concat(n,")"),"gi")),""===S?o(a,{}):r("div",{children:[n&&h.map((function(r,a){return r.toLowerCase()===n.toLowerCase()?o("span",e({style:{color:s}},{children:r}),a):o("span",{children:r},a)})),";"]})):v},u=function(e){var r=e.type,o=l(e).avatar,a=o;if(!o)switch(r){case t.TYPES.CONV_C2C:a=n;break;case t.TYPES.CONV_GROUP:default:a=i}return a},d=function(a,i,n){var c,l=a.lastMessage,p=a.type,u=l.fromAccount,d=l.nick,m=l.nameCard,f=l.isRevoked,C=l.messageForShow;l.type===t.TYPES.MSG_CUSTOM&&(null===(c=l.payload)||void 0===c?void 0:c.description)&&(C=l.payload.description);var v="";switch(p){case t.TYPES.CONV_GROUP:v=(null==l?void 0:l.fromAccount)===(null==i?void 0:i.userID)?"You":"".concat(m||d||u||""),v="".concat(v?"".concat(v,":"):"");break;case t.TYPES.CONV_C2C:v=f?"you ":""}return r("div",e({style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},{children:[o("span",{children:v}),o("span",{children:l.isRevoked?"recalled a message":s(C,1)})]}))},m=function(e,r){var o=e.lastMessage;return c(1e3*o.lastTime,r)};export{u as getDisplayImage,d as getDisplayMessage,m as getDisplayTime,p as getDisplayTitle,l as getMessageProfile};
+import{__assign as e}from"tslib";import{jsxs as r,jsx as t,Fragment as o}from"react/jsx-runtime";import a from"@tencentcloud/chat-uikit-engine";import{formatEmojiString as i}from"../MessageElement/utils/emojiMap.js";import"react";import"../Icon/config.js";import"../Icon/type.js";import{defaultGroupAvatarWork as n,defaultUserAvatar as c}from"../Avatar/default.js";var s=function(e,r){var t=e.getShowName();if(!r)return[{text:t,isHighlight:!1}];var o=r.toLowerCase();return t.split(new RegExp("(".concat(r,")"),"gi")).map((function(e){return{text:e,isHighlight:e.toLowerCase()===o}}))},l=function(o,n){var c,s=o.lastMessage,l=o.type;if(!s)return"";var u=s.fromAccount,p=s.nick,d=s.nameCard,f=s.isRevoked,m=s.messageForShow;s.type===a.TYPES.MSG_CUSTOM&&(null===(c=s.payload)||void 0===c?void 0:c.description)&&(m=s.payload.description);var C="";switch(l){case a.TYPES.CONV_GROUP:C=(null==s?void 0:s.fromAccount)===(null==n?void 0:n.userID)?"You":"".concat(d||p||u||""),C="".concat(C?"".concat(C,":"):"");break;case a.TYPES.CONV_C2C:C=f?"you ":""}return r("div",e({style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},{children:[t("span",{children:C}),t("span",{children:s.isRevoked?"recalled a message":i(m,1)})]}))},u=function(e){if(!e)return null;var r={},t=e.type,o=e.groupProfile,i=e.userProfile;switch(t){case a.TYPES.CONV_C2C:r=i;break;case a.TYPES.CONV_GROUP:r=o}return r},p=function(i,n,c){void 0===c&&(c="#147AFF");var s=u(i),l=s.name,p=s.nick,d=s.groupID,f=s.userID,m=i.type,C=i.remark,v="";switch(m){case a.TYPES.CONV_C2C:v=C||p||f||"";break;case a.TYPES.CONV_GROUP:v=l||d||"";break;default:v=""}var h,w,g,O;return n?(w=(h=v).toLocaleLowerCase(),g=n&&w.indexOf(n.toLocaleLowerCase()),O=h.split(new RegExp("(".concat(n,")"),"gi")),""===g?t(o,{}):r("div",{children:[n&&O.map((function(r,o){return r.toLowerCase()===n.toLowerCase()?t("span",e({style:{color:c}},{children:r}),o):t("span",{children:r},o)})),";"]})):v},d=function(e){var r=e.type,t=u(e).avatar,o=t;if(!t)switch(r){case a.TYPES.CONV_C2C:o=c;break;case a.TYPES.CONV_GROUP:default:o=n}return o};export{s as generateHighlightTitle,d as getDisplayImage,p as getDisplayTitle,l as getLatestMessagePreview,u as getMessageProfile};

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

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { IConversationSearchInputProps } from './ConversationSearchInput/ConversationSearchInput.js';
+import { IConversationSearchResultProps } from './ConversationSearchResult/ConversationSearchResult.js';
+import { IConversationPreviewProps } from '../ConversationPreview/ConversationPreview.js';
+import { AvatarProps } from '../Avatar/Avatar.js';
+
+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;
+}
+declare function defaultSearchFn(searchValue: string, conversationList: IConversationModel[]): IConversationModel[];
+declare function ConversationSearch(props: IConversationSearchProps): react_jsx_runtime.JSX.Element | null;
+
+export { ConversationSearch, IConversationSearchProps, defaultSearchFn };

package/dist/esm/components/ConversationSearch/ConversationSearch.js

@@ -0,0 +1 @@
+import{__assign as e}from"tslib";import{jsxs as o,jsx as n}from"react/jsx-runtime";import{useState as t,useEffect as r}from"react";import i from"../../node_modules/classnames/index.js";import{ConversationSearchInput as a}from"./ConversationSearchInput/ConversationSearchInput.js";import{ConversationSearchResult as l}from"./ConversationSearchResult/ConversationSearchResult.js";import{ConversationPreview as s}from"../ConversationPreview/ConversationPreview.js";import{Avatar as u}from"../Avatar/Avatar.js";function v(e,o){return e&&0!==(null==o?void 0:o.length)?o.filter((function(o){return o.getShowName().toLocaleLowerCase().includes(e.toLocaleLowerCase())})):[]}function c(c){var m=c.visible,d=void 0===m||m,f=c.conversationList,h=c.Avatar,p=void 0===h?u:h,C=c.searchFn,S=void 0===C?v:C,g=c.ResultPreview,R=void 0===g?s:g,w=c.ConversationSearchInput,j=void 0===w?a:w,L=c.ConversationSearchResult,b=void 0===L?l:L,A=c.onSearchChange,P=c.onFocus,x=c.onBlur,F=c.onSelectResult,I=c.className,N=c.style,k=t(""),y=k[0],B=k[1],V=t(f),_=V[0],q=V[1],z=t(!1),D=z[0],E=z[1],G=t(!1),H=G[0],J=G[1],K=t(!0),M=K[0],O=K[1];return r((function(){null==A||A(y)}),[y,A]),r((function(){q(S(y,f))}),[f,S,y]),r((function(){E(!M)}),[H,M]),d?o("div",e({className:i("uikit-conversation-search",I,{"uikit-conversation-search--active":D}),style:N},{children:[n(j,{value:y,clearable:!0,onChange:function(e){var o,n,t;B(null===(o=e.target)||void 0===o?void 0:o.value),O(0===(null===(n=e.target)||void 0===n?void 0:n.value.length)),null==A||A(null===(t=e.target)||void 0===t?void 0:t.value)},onFocus:function(e){J(!0),null==P||P(e)},onBlur:function(e){J(!1),null==x||x(e)}}),n(b,{visible:D,Avatar:p,searchResult:_,searchValue:y,ResultPreview:R,onSelectResult:F})]})):null}export{c as ConversationSearch,v as defaultSearchFn};

package/dist/esm/components/ConversationSearch/ConversationSearchInput/ConversationSearchInput.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { InputProps } from '../../Input/Input.js';
+
+type IConversationSearchInputProps = InputProps;
+declare function ConversationSearchInput(props: IConversationSearchInputProps): react_jsx_runtime.JSX.Element;
+
+export { ConversationSearchInput, IConversationSearchInputProps };

package/dist/esm/components/ConversationSearch/ConversationSearchInput/ConversationSearchInput.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import{useTranslation as e}from"react-i18next";import{Icon as r}from"../../Icon/Icon.js";import{IconTypes as n}from"../../Icon/type.js";import{Input as t}from"../../Input/Input.js";import a from"../../../node_modules/classnames/index.js";function i(i){var c=i.className,s=i.placeholder,m=i.clearable,l=i.value,p=i.onChange,u=i.prefix,f=void 0===u?o(r,{type:n.SEARCH,height:16,width:16}):u,h=i.onFocus,d=i.onBlur,v=e().t;return o(t,{className:a("uikit-conversation-search-input",c),placeholder:s||v("TUIConversation.Search"),clearable:m,value:l,onChange:p,onFocus:h,onBlur:d,prefix:f})}export{i as ConversationSearchInput};

package/dist/esm/components/ConversationSearch/ConversationSearchResult/ConversationSearchResult.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { IConversationPreviewProps } from '../../ConversationPreview/ConversationPreview.js';
+import { AvatarProps } from '../../Avatar/Avatar.js';
+
+interface IConversationSearchResultProps {
+    /** Whether to show the search result */
+    visible?: boolean;
+    /** The search result */
+    searchResult?: IConversationModel[];
+    /** The search input value */
+    searchValue?: string;
+    /** The custom ResultPreview component */
+    ResultPreview?: React__default.ComponentType<IConversationPreviewProps>;
+    /** The custom Avatar component */
+    Avatar?: React__default.ComponentType<AvatarProps>;
+    /** The custom no result Placeholder component */
+    PlaceholderNoResult?: React__default.ReactNode;
+    /**  Callback when the ResultPreview is clicked */
+    onSelectResult?: (conversation: IConversationModel) => void;
+    /** The custom class name */
+    className?: string;
+    /** The custom css style */
+    style?: React__default.CSSProperties;
+}
+declare function ConversationSearchResult(props: IConversationSearchResultProps): react_jsx_runtime.JSX.Element | null;
+
+export { ConversationSearchResult, IConversationSearchResultProps };

package/dist/esm/components/ConversationSearch/ConversationSearchResult/ConversationSearchResult.js

@@ -0,0 +1 @@
+import{__assign as e}from"tslib";import{jsx as r}from"react/jsx-runtime";import o from"../../../node_modules/classnames/index.js";import{ConversationPreview as t}from"../../ConversationPreview/ConversationPreview.js";import{Avatar as i}from"../../Avatar/Avatar.js";import{PlaceHolder as n,PlaceHolderTypes as s}from"../../PlaceHolder/index.js";function a(a){var l=a.visible,v=void 0!==l&&l,c=a.searchResult,m=a.searchValue,u=a.Avatar,d=void 0===u?i:u,h=a.ResultPreview,p=void 0===h?t:h,f=a.PlaceholderNoResult,S=void 0===f?r(n,{type:s.NO_RESULTS,searchString:m}):f,g=a.onSelectResult,j=a.className,P=a.style;return v?r("div",e({className:o("uikit-conversation-search-result",j),style:P},{children:0===(null==c?void 0:c.length)?S:null==c?void 0:c.map((function(e){return r(p,{conversation:e,Avatar:d,highlightMatchString:m,onSelectConversation:g},e.conversationID)}))})):null}export{a as ConversationSearchResult};

package/dist/esm/components/Icon/Icon.js

@@ -1 +1 @@
-import{__assign as t}from"tslib";import{jsx as i}from"react/jsx-runtime";import{ICON_CONFIG as n}from"./config.js";var o=function(t){var o=n[t].url||"";return i("img",{className:"icon-image icon-image-".concat(t),src:o,alt:t})},c=function(t){var i;return(null===(i=n[t])||void 0===i?void 0:i.className)||""};function r(n){var r=n.children,e=n.type,a=n.height,s=void 0===a?24:a,m=n.width,l=void 0===m?24:m,p=n.onClick,d=n.className,f=void 0===d?"":d,g={width:"string"==typeof l?l:"".concat(l,"px"),minWidth:"string"==typeof l?l:"".concat(l,"px"),height:"string"==typeof s?s:"".concat(s,"px"),minHeight:"string"==typeof s?s:"".concat(s,"px")};return i("div",t({className:"tui-kit-icon ".concat(e&&c(e)," ").concat(f),role:"button",tabIndex:0,style:g,onClick:p},{children:r||e&&o(e)}))}export{r as Icon,c as changeTypeToIconClassName};
+import{__assign as t}from"tslib";import{jsx as i}from"react/jsx-runtime";import{ICON_CONFIG as n}from"./config.js";var o=function(t){var o=n[t].url||"";return o&&i("img",{className:"icon-image icon-image-".concat(t),src:o,alt:t})},c=function(t){var i;return(null===(i=n[t])||void 0===i?void 0:i.className)||""};function r(n){var r=n.children,e=n.type,a=n.height,s=void 0===a?24:a,m=n.width,l=void 0===m?24:m,p=n.onClick,d=n.className,f=void 0===d?"":d,g={width:"string"==typeof l?l:"".concat(l,"px"),minWidth:"string"==typeof l?l:"".concat(l,"px"),height:"string"==typeof s?s:"".concat(s,"px"),minHeight:"string"==typeof s?s:"".concat(s,"px")};return i("div",t({className:"tui-kit-icon ".concat(e&&c(e)," ").concat(f),role:"button",tabIndex:0,style:g,onClick:p},{children:r||e&&o(e)}))}export{r as Icon,c as changeTypeToIconClassName};