@tencentcloud/chat-uikit-react 2.2.6 → 2.2.7

package/dist/esm/index.js

@@ -1 +1 @@
-import o from"./server.js";export{TUIConversation,UnMemoizedTUIConversation}from"./components/TUIConversation/TUIConversation.js";export{TUIConversationList,UnMemoTUIConversationList}from"./components/TUIConversationList/TUIConversationList.js";import"react";import"@tencentcloud/chat";import"@tencentcloud/chat-uikit-engine";export{TUIChat}from"./components/TUIChat/TUIChat.js";import"tslib";export{ConversationPreview}from"./components/ConversationPreview/ConversationPreview.js";export{ConversationPreviewContent,unMemoConversationPreviewContent}from"./components/ConversationPreview/ConversationPreviewContent.js";export{TUIChatHeader}from"./components/TUIChatHeader/TUIChatHeader.js";export{TUIChatHeaderDefault}from"./components/TUIChatHeader/TUIChatHeaderDefault.js";export{TUIMessageList}from"./components/TUIMessageList/TUIMessageList.js";export{TUIMessage}from"./components/TUIMessage/TUIMessage.js";export{MessagePlugins}from"./components/TUIMessage/MessagePlugins.js";export{MessageContext}from"./components/TUIMessage/MessageContext.js";export{TUIMessageInput}from"./components/TUIMessageInput/TUIMessageInput.js";export{TUIMessageInputDefault}from"./components/TUIMessageInput/TUIMessageInputDefault.js";export{InputPluginsDefalut}from"./components/TUIMessageInput/InputPluginsDefalut.js";export{TUIProfile}from"./components/TUIProfile/TUIProfile.js";export{TUIProfileDefault}from"./components/TUIProfile/TUIProfileDefault.js";export{Avatar}from"./components/Avatar/Avatar.js";export{defaultGroupAvatarAVChatRoom,defaultGroupAvatarMeeting,defaultGroupAvatarPublic,defaultGroupAvatarWork,defaultUserAvatar}from"./components/Avatar/default.js";export{ConversationSearchInput}from"./components/ConversationSearch/ConversationSearchInput.js";export{ConversationSearchResult}from"./components/ConversationSearch/ConversationSearchResult.js";export{TUIManage}from"./components/TUIManage/TUIManage.js";export{Popup}from"./components/Popup/index.js";export{Checkbox}from"./components/Checkbox/index.js";export{DivWithEdit}from"./components/DivWithEdit/DivWithEdit.js";export{Icon,changeTypeToIconClassName}from"./components/Icon/Icon.js";export{IconTypes}from"./components/Icon/type.js";export{EmptyStateIndicator}from"./components/EmptyStateIndicator/EmptyStateIndicator.js";export{Input}from"./components/Input/Input.js";export{Model}from"./components/Model/index.js";export{Plugins}from"./components/Plugins/index.js";export{Switch}from"./components/Switch/Switch.js";export{Toast}from"./components/Toast/index.js";export{TUIContactList}from"./components/TUIContact/TUIContactList/TUIContactList.js";export{TUIContactInfo,UnMemoizedTUIContactInfo}from"./components/TUIContact/TUIContactInfo/TUIContactInfo.js";export{TUIContact,UnMemoizedTUIContact}from"./components/TUIContact/TUIContact.js";export{UIKitProvider,useUIKit}from"./context/UIKitContext.js";export{UIManagerProvider,useUIManager}from"./context/UIManagerContext.js";export{TUIChatStateContext,TUIChatStateContextProvider,useTUIChatStateContext}from"./context/TUIChatStateContext.js";export{TUIChatActionContext,TUIChatActionProvider,useTUIChatActionContext}from"./context/TUIChatActionContext.js";export{TUIMessageContext,TUIMessageContextProvider,messageShowType,useTUIMessageContext}from"./context/TUIMessageContext.js";export{ComponentContext,ComponentProvider,useComponentContext}from"./context/ComponentContext.js";export{TUIMessageInputContext,TUIMessageInputContextProvider,useTUIMessageInputContext}from"./context/TUIMessageInputContext.js";export{TUIContactContext,TUIContactContextProvider,useTUIContactContext}from"./context/TUIContactContext.js";export{useConversation}from"./hooks/useConversation.js";export{useProfile}from"./hooks/useProfile.js";export{t}from"./locales/index.js";export{isH5,isPC,setPlatform}from"./utils/env.js";export{default as i18next}from"i18next";new o;
+import o from"./server.js";export{TUIConversation,UnMemoizedTUIConversation}from"./components/TUIConversation/TUIConversation.js";export{TUIConversationList,UnMemoTUIConversationList}from"./components/TUIConversationList/TUIConversationList.js";import"react";import"@tencentcloud/chat";import"@tencentcloud/chat-uikit-engine";import"./components/TUIChat/index.js";export{ConversationPreview}from"./components/ConversationPreview/ConversationPreview.js";export{ConversationPreviewContent,unMemoConversationPreviewContent}from"./components/ConversationPreview/ConversationPreviewContent.js";export{TUIChatHeader}from"./components/TUIChatHeader/TUIChatHeader.js";export{TUIChatHeaderDefault}from"./components/TUIChatHeader/TUIChatHeaderDefault.js";export{TUIMessageList}from"./components/TUIMessageList/TUIMessageList.js";export{TUIMessage}from"./components/TUIMessage/TUIMessage.js";export{MessagePlugins}from"./components/TUIMessage/MessagePlugins.js";export{MessageContext}from"./components/TUIMessage/MessageContext.js";export{TUIMessageInput}from"./components/TUIMessageInput/TUIMessageInput.js";export{TUIMessageInputDefault}from"./components/TUIMessageInput/TUIMessageInputDefault.js";export{InputPluginsDefalut}from"./components/TUIMessageInput/InputPluginsDefalut.js";export{TUIProfile}from"./components/TUIProfile/TUIProfile.js";export{TUIProfileDefault}from"./components/TUIProfile/TUIProfileDefault.js";export{Avatar}from"./components/Avatar/Avatar.js";export{defaultGroupAvatarAVChatRoom,defaultGroupAvatarMeeting,defaultGroupAvatarPublic,defaultGroupAvatarWork,defaultUserAvatar}from"./components/Avatar/default.js";export{ConversationSearchInput}from"./components/ConversationSearch/ConversationSearchInput.js";export{ConversationSearchResult}from"./components/ConversationSearch/ConversationSearchResult.js";export{TUIManage}from"./components/TUIManage/TUIManage.js";export{Popup}from"./components/Popup/index.js";export{Checkbox}from"./components/Checkbox/index.js";export{DivWithEdit}from"./components/DivWithEdit/DivWithEdit.js";export{Icon,changeTypeToIconClassName}from"./components/Icon/Icon.js";export{IconTypes}from"./components/Icon/type.js";export{EmptyStateIndicator}from"./components/EmptyStateIndicator/EmptyStateIndicator.js";export{Input}from"./components/Input/Input.js";export{Model}from"./components/Model/index.js";export{Plugins}from"./components/Plugins/index.js";export{Switch}from"./components/Switch/Switch.js";export{Toast}from"./components/Toast/index.js";export{TUIContactList}from"./components/TUIContact/TUIContactList/TUIContactList.js";export{TUIContactInfo,UnMemoizedTUIContactInfo}from"./components/TUIContact/TUIContactInfo/TUIContactInfo.js";export{TUIContact,UnMemoizedTUIContact}from"./components/TUIContact/TUIContact.js";export{UIKitProvider,useUIKit}from"./context/UIKitContext.js";export{UIManagerProvider,useUIManager}from"./context/UIManagerContext.js";export{TUIChatStateContext,TUIChatStateContextProvider,useTUIChatStateContext}from"./context/TUIChatStateContext.js";export{TUIChatActionContext,TUIChatActionProvider,useTUIChatActionContext}from"./context/TUIChatActionContext.js";export{TUIMessageContext,TUIMessageContextProvider,messageShowType,useTUIMessageContext}from"./context/TUIMessageContext.js";export{ComponentContext,ComponentProvider,useComponentContext}from"./context/ComponentContext.js";export{TUIMessageInputContext,TUIMessageInputContextProvider,useTUIMessageInputContext}from"./context/TUIMessageInputContext.js";export{TUIContactContext,TUIContactContextProvider,useTUIContactContext}from"./context/TUIContactContext.js";export{useConversation}from"./hooks/useConversation.js";export{useProfile}from"./hooks/useProfile.js";export{t}from"./locales/index.js";export{isH5,isPC,setPlatform}from"./utils/env.js";export{TUIChat}from"./components/TUIChat/TUIChat.js";export{default as i18next}from"i18next";new o;

package/dist/esm/locales/en-US/index.js

@@ -1 +1 @@
-import o from"./TUIGlobal.js";import r from"./TUIChat.js";import t from"./TUIConversation.js";import m from"./TUIContact.js";import I from"./TUIProfile.js";var T={TUIGlobal:o,TUIChat:r,TUIConversation:t,TUIContact:m,TUIProfile:I};export{T as message};
+import o from"./TUIChat.js";import r from"./TUIConversation.js";import t from"./TUIContact.js";import i from"./TUIProfile.js";var m={TUIChat:o,TUIConversation:r,TUIContact:t,TUIProfile:i};export{m as message};

package/dist/esm/locales/index.js

@@ -1 +1 @@
-import e from"i18next";export{default as i18next}from"i18next";import{initReactI18next as t}from"react-i18next";import{message as r}from"./en-US/index.js";import{message as a}from"./zh-CN/index.js";import{message as o}from"./ja-JP/index.js";import{message as n}from"./ko-KR/index.js";var i={"en-US":{translation:r},"zh-CN":{translation:a},"ja-JP":{translation:o},"ko-KR":{translation:n}};e.use(t).init({resources:i,lng:"en-US",interpolation:{escapeValue:!1}});var s=e.t;export{s as t};
+import e from"i18next";export{default as i18next}from"i18next";import{initReactI18next as t}from"react-i18next";import{message as a}from"./en-US/index.js";import{message as r}from"./zh-CN/index.js";import{message as o}from"./ja-JP/index.js";import{message as s}from"./ko-KR/index.js";import{message as n}from"./zh-TW/index.js";var i={"en-US":{translation:a},"zh-CN":{translation:r},"ja-JP":{translation:o},"ko-KR":{translation:s},"zh-TW":{translation:n}};e.use(t).init({resources:i,lng:"en-US",interpolation:{escapeValue:!1}});var m=e.t;export{m as t};

package/dist/esm/locales/ja-JP/index.js

@@ -1 +1 @@
-import{TUIGlobal as o}from"./TUIGlobal.js";import r from"./TUIChat.js";import t from"./TUIConversation.js";import m from"./TUIContact.js";import I from"./TUIProfile.js";var T={TUIGlobal:o,TUIChat:r,TUIConversation:t,TUIContact:m,TUIProfile:I};export{T as message};
+import o from"./TUIChat.js";import r from"./TUIConversation.js";import t from"./TUIContact.js";import i from"./TUIProfile.js";var m={TUIChat:o,TUIConversation:r,TUIContact:t,TUIProfile:i};export{m as message};

package/dist/esm/locales/ko-KR/index.js

@@ -1 +1 @@
-import{TUIGlobal as o}from"./TUIGlobal.js";import r from"./TUIChat.js";import t from"./TUIConversation.js";import m from"./TUIContact.js";import I from"./TUIProfile.js";var T={TUIGlobal:o,TUIChat:r,TUIConversation:t,TUIContact:m,TUIProfile:I};export{T as message};
+import o from"./TUIChat.js";import r from"./TUIConversation.js";import t from"./TUIContact.js";import i from"./TUIProfile.js";var m={TUIChat:o,TUIConversation:r,TUIContact:t,TUIProfile:i};export{m as message};

package/dist/esm/locales/zh-CN/index.js

@@ -1 +1 @@
-import{TUIGlobal as o}from"./TUIGlobal.js";import r from"./TUIChat.js";import t from"./TUIConversation.js";import m from"./TUIContact.js";import I from"./TUIProfile.js";var T={TUIGlobal:o,TUIChat:r,TUIConversation:t,TUIContact:m,TUIProfile:I};export{T as message};
+import o from"./TUIChat.js";import r from"./TUIConversation.js";import t from"./TUIContact.js";import i from"./TUIProfile.js";var m={TUIChat:o,TUIConversation:r,TUIContact:t,TUIProfile:i};export{m as message};

package/dist/esm/locales/zh-TW/TUIChat.js

@@ -0,0 +1 @@
+var e={Recall:"撤回",Reference:"引用",Forward:"轉發",Copy:"複製",Delete:"刪除","Forward to":"轉發給","recalled a message":"撤回了一條消息","Re-edit":"重新編輯",Resend:"重新發送",You:"您","Recent Chats":"會話紀錄","Frequently Contacted":"頻繁聯繫","No Result":"無結果","Search Result":"搜尋結果",Image:"圖片",Video:"影片",File:"檔案","Enter a message":"請輸入訊息","No More":"沒有了","Error deleting message":"刪除訊息失敗","The message recall exceeded the time limit (default 2 minutes)":"訊息撤回超時（預設 2 分鐘）","Error revoke Message":"訊息撤回失敗","Custom message":"自訂訊息"};export{e as default};

package/dist/esm/locales/zh-TW/TUIContact.js

@@ -0,0 +1 @@
+var e={"Enter a userID":"請輸入用戶 ID，回車搜索","Enter the verification info":"請填寫驗證信息","Request to join":"申請加入",Requested:"已申請",Accept:"接受",Refuse:"拒絕",Handled:"已處理",Friends:"我的好友","Send Message":"發送消息",Signature:"個性簽名","Successful application, waiting for the administrator to agree to join the group application":"等待管理員同意","New Contacts":"新的聯繫人","Blocked List":"黑名單","Group List":"我的群聊","No Result":"無搜索結果",ID:"ID",User:"聯繫人","Add Friend":"添加好友",remark:"備註",block:"加入黑名單","Delete friend":"刪除好友","waiting for verification":"等待驗證","verification info":"驗證信息","Send application":"發送申請",Agree:"同意"};export{e as default};

package/dist/esm/locales/zh-TW/TUIConversation.js

@@ -0,0 +1 @@
+var e={"Start chat":"發起會話","New one-to-one chat":"發起單聊","New group chat":"發起群聊",Delete:"刪除會話",Pin:"置頂會話",Unpin:"取消置頂","Conversation Information":"會話資訊",Search:"搜尋","Add Participants":"創建群聊","No conversation":"無會話",Next:"下一步","Group Name":"群組名稱","Group ID":"群組 ID","Group Type":"群組類型",Participants:"成員",Create:"創建",Details:"詳情",Work:"好友工作群（Work）",Public:"陌生人社交群（Public）",Meeting:"臨時會議群（Meeting）",AVChatRoom:"直播群（AVChatroom）",Community:"社群(Community)","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.":"類似普通微信群，創建後僅支持已在群內的好友邀請加群，且無需被邀請方同意或群主同意。","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基礎設施。See the documentation for details.":"類似 QQ 群，創建後群主可以指定群管理員，用戶搜索群 ID 發起加群申請後，需要群主或管理員審批通過才能入群。","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.":"創建後可以隨意進出，且支持查看入群前消息；適合用於音視頻會議場景、在線教育場景等與即時音視頻產品結合的場景。","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.":"創建後可以隨意進出，沒有群成員數量上限，但不支持歷史消息存儲；適合與直播產品結合，用於彈幕聊天場景。","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.":"創建後可以隨意進出，最多支持100000人，支持歷史消息存儲，用戶搜索群 ID 發起加群申請後，無需管理員審批即可進群。","Participant cannot be empty":"不能為空"};export{e as default};

package/dist/esm/locales/zh-TW/TUIProfile.js

@@ -0,0 +1 @@
+var e={"Personal information":"個人信息",Signature:"個性簽名",Gender:"性別",Male:"男",Female:"女",AllowType:"加好友驗證方式",NeedConfirm:"需要驗證",AllowAny:"同意任何用戶加好友",DenyAny:"拒絕任何用戶加「好友」",Birthday:"生日",Unknown:"未設置"};export{e as default};

package/dist/esm/locales/zh-TW/index.js

@@ -0,0 +1 @@
+import o from"./TUIChat.js";import r from"./TUIConversation.js";import t from"./TUIContact.js";import i from"./TUIProfile.js";var m={TUIChat:o,TUIConversation:r,TUIContact:t,TUIProfile:i};export{m as message};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/chat-uikit-react",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "license": "MIT",
@@ -66,6 +66,7 @@
     "typescript-eslint": "^7.16.0"
   },
   "dependencies": {
+    "@tencentcloud/call-uikit-react": "latest",
     "@tencentcloud/chat": "latest",
     "@tencentcloud/chat-uikit-engine": "latest",
     "@tencentcloud/tui-core": "latest",

package/rollup.config.js

@@ -42,7 +42,7 @@ export default [
       terser(),
     ],
     external: ['react', 'date-fns', 'tslib', 'react-date-picker', 'i18next', 'react-i18next', '@tencentcloud/tui-core',
-      '@tencentcloud/chat', '@tencentcloud/chat-uikit-engine', '@tencentcloud/universal-api'],
+      '@tencentcloud/chat', '@tencentcloud/chat-uikit-engine', '@tencentcloud/universal-api', '@tencentcloud/call-uikit-react'],
   },
   {
     ...getBaseConfig(),

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

@@ -1,29 +1,34 @@
-.tui-kit-avatar{
+.tui-kit-avatar {
   display: flex;
   align-items: center;
   position: relative;
   cursor: pointer;
   flex-shrink: 0;
+
   &.circle .avatar-image {
     border-radius: 50%;
   }
+
   &.square .avatar-image {
     border-radius: 4px;
   }
+
   img {
     width: 100%;
     height: 100%;
   }
+
   &:hover {
     .tui-kit-avatar-edit {
       display: flex;
     }
   }
+
   &-edit {
     position: absolute;
     top: 0;
     left: 0;
-    background: rgba(0, 0, 0, 0.33);
+    background: rgba(0, 0, 0, 33%);
     width: 100%;
     height: 100%;
     border-radius: 100%;
@@ -31,11 +36,12 @@
     justify-content: center;
     align-items: center;
   }
+
   &-list {
     position: absolute;
     z-index: 2;
     top: 100%;
-    background: #FFFFFF;
+    background: #fff;
     border-radius: 5px;
     box-shadow: 0 11px 20px 0 rgb(0, 0, 0.3);
     display: flex;
@@ -45,12 +51,13 @@
     min-width: 200px;
     max-width: 400px;
     padding: 10px;
+
     &-item {
       padding: 10px;
+
       img {
         width: 40px;
       }
     }
   }
 }
-

package/src/components/Checkbox/styles/color.scss

@@ -1,11 +1,22 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .info {
-  background: #FFFFFF;
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
 }
+
 .warn {
-  color: #FFFFFF;
-  background: #faad14;
+  @include theme() {
+    background-color: get(text-color-warning);
+    color: #fff;
+  }
 }
+
 .error {
-  color: #FFFFFF;
-  background: #ff4d4f;
-}
+  @include theme() {
+    background-color: get(text-color-error);
+    color: #fff;
+  }
+}

package/src/components/ConversationCreate/hooks/useConversationCreate.tsx

@@ -5,10 +5,10 @@ import { useProfile } from '../../../hooks';
 
 export const useConversationCreate = (
   chat: any,
-  conversationList: Array<Conversation>,
-  setFriendListResultHandler?:(
+  conversationList: Conversation[],
+  setFriendListResultHandler?: (
     newFriendListResult: object,
-    setFriendListResult: React.Dispatch<React.SetStateAction<{string:Array<object>}>>
+    setFriendListResult: React.Dispatch<React.SetStateAction<{ string: object[] }>>
   ) => void,
 ) => {
   const [friendListSortResult, setFriendListSortResult] = useState<any>();
@@ -24,7 +24,7 @@ export const useConversationCreate = (
     const frequentlyConversationProfile = conversationList.filter(
       (item: Conversation) => item?.type === TencentCloudChat.TYPES.CONV_C2C,
     ).slice(0, 5).map((item: Conversation) => item?.userProfile);
-    const { code, data } = await chat.getFriendList();
+    const { code, data } = await chat?.getFriendList() || {};
     if (code === 0) {
       const sortResult = handleData(
         data.map((item: Friend) => item.profile),
@@ -36,7 +36,7 @@ export const useConversationCreate = (
       }
     }
   };
-  const handleData = (profileList: Array<Profile>, frequentlyConversationProfile?: any) => {
+  const handleData = (profileList: Profile[], frequentlyConversationProfile?: any) => {
     const sortResult: any = {
       '#': [],
     };

package/src/components/ConversationCreate/styles/ConversationCreatGroupDetail.scss

@@ -1,39 +1,33 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-conversation-create-group-detail {
+  @include theme() {
+    color: get(text-color-primary);
+  }
+
   .create-group-box {
     padding: 10px 0;
   }
 
   .input-group-text {
-    font-weight: 400;
     font-size: 14px;
-    font-family: PingFangSC-Medium;
-    line-height: 22px;
-    color: #000;
   }
 
   .create-group-name {
     .input-group-name {
       font-weight: 700;
       font-size: 14px;
-      font-family: PingFangSC-Medium;
-      line-height: 19px;
-      color: #000;
     }
   }
 
   .input-group-title {
-    color: rgba(0, 0, 0, 40%);
     width: 106px;
     font-size: 14px;
   }
 
   .create-group-illustrate {
-    font-weight: 400;
     font-size: 12px;
-    font-family: PingFangSC-Medium;
-    line-height: 17px;
     text-align: justify;
-    color: rgba(0, 0, 0, 40%);
     padding-left: 8px;
   }
 
@@ -41,9 +35,6 @@
     .create-group-portrait-title {
       font-weight: 600;
       font-size: 14px;
-      font-family: PingFangSC-Medium;
-      line-height: 20px;
-      color: #000;
       padding: 20px 0 20px 8px;
     }
 
@@ -52,6 +43,7 @@
       flex-wrap: wrap;
       justify-content: flex-start;
       margin-bottom: 10px;
+      padding: 0 10px;
 
       .create-group-portrait-info {
         align-items: center;
@@ -63,7 +55,6 @@
 
         &-nick {
           font-size: 12px;
-          font-family: PingFangSC-Medium;
           margin-top: 6px;
         }
       }

package/src/components/ConversationCreate/styles/conversationCreateSelectView.scss

@@ -1,9 +1,16 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .conversation-create-select-view {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   margin-bottom: 10px;
-  .select-view-info{
+
+  @include theme() {
+    color: get(text-color-primary);
+  }
+
+  .select-view-info {
     align-items: center;
     display: flex;
     flex-direction: column;
@@ -11,21 +18,19 @@
     padding: 6px;
     box-sizing: border-box;
     position: relative;
+
     .select-view-info-close {
       position: absolute;
       right: 15px;
       top: 6px;
       z-index: 2;
     }
+
     .select-view-info-nick {
-      font-family: PingFangSC-Medium;
-      font-weight: 400;
       font-size: 12px;
-      line-height: 17px;
-      font-style: normal;
-      overflow:hidden;
-      text-overflow:ellipsis;
-      white-space:nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       width: 100%;
       text-align: center;
     }

package/src/components/ConversationCreate/styles/conversationGroupTypeInfo.scss

@@ -1,33 +1,41 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-conversation-group-type-info {
   display: flex;
   flex-direction: column;
   padding: 0 10px;
   overflow-y: scroll;
 
+  @include theme() {
+    color: get(text-color-primary);
+  }
+
   .group-type-info-box {
     display: flex;
     flex-direction: column;
-    background: #FFFFFF;
-    border: 1px solid #DDDDDD;
     border-radius: 16px;
     padding: 12px 16px;
     margin-top: 12px;
     cursor: pointer;
 
+    @include theme() {
+      background-color: get(bg-color-operate);
+      border: 1px solid get(stroke-color-primary);
+    }
+
     &:hover {
-      border: 1px solid #147AFF;
+      border: 1px solid #147aff;
     }
 
     &.group-type-info-box--active {
-      border: 1px solid #147AFF;
+      border: 1px solid #147aff;
     }
+
     .group-type-info-title {
       font-size: 16px;
-      font-family: PingFangSC-Medium;
-      line-height: 22px;
-      color: rgba(0, 0, 0, 0.8);
       display: flex;
       align-items: center;
+
       .box-active-icon {
         margin-right: 8px;
       }
@@ -35,31 +43,22 @@
 
     .group-type-info-description {
       font-size: 12px;
-      font-family: PingFangSC-Medium;
-      line-height: 17px;
       text-align: justify;
-      color: rgba(0, 0, 0, 0.4);
     }
   }
 
   .group-type-info-document {
     font-size: 16px;
-    font-family: PingFangSC-Medium;
-    line-height: 22px;
     text-align: justify;
     text-decoration: none;
     margin: 1rem auto;
 
-    &:link {
-      color: #104EF5;
-    }
-
-    &:active {
-      color: #104EF5;
-    }
-
+    &:link,
+    &:active,
     &:visited {
-      color: #104EF5;
+      @include theme() {
+        color: get(text-color-link);
+      }
     }
   }
 }

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

@@ -1,19 +1,26 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-conversation-create-header {
-  background-color: #f9fafb;
   display: flex;
   flex-direction: row;
   padding: 16px 20px;
   align-items: center;
   text-align: center;
 
+  @include theme() {
+    background-color: get(bg-color-operate);
+  }
+
   .title {
     margin-left: 10px;
     font-weight: 600;
     font-size: 16px;
-    font-family: PingFangSC-Medium;
     line-height: 32px;
     letter-spacing: -0.41px;
-    color: #000;
+
+    @include theme() {
+      color: get(text-color-primary);
+    }
   }
 }
 
@@ -22,32 +29,35 @@
 }
 
 .tui-user {
-  padding: 10px;
+  padding: 6px;
   display: flex;
   align-items: center;
   text-align: center;
   cursor: pointer;
 
   &:hover {
-    background-color: rgba(0, 110, 255, 10%);
+    @include theme() {
+      background-color: get(list-color-hover);
+    }
   }
 
   .tui-user-name {
     margin-left: 10px;
-    font-weight: 400;
     font-size: 14px;
-    font-family: PingFangSC-Medium;
-    line-height: 20px;
-    color: #000;
     width: 80%;
     text-align: left;
 
+    @include theme() {
+      color: get(text-color-primary);
+    }
+
     &.active {
       font-weight: 600;
       font-size: 14px;
-      font-family: PingFangSC-Medium;
-      line-height: 20px;
-      color: rgba(3, 101, 249, 100%);
+
+      @include theme() {
+        color: get(text-color-link);
+      }
     }
   }
 }
@@ -71,13 +81,14 @@
   .tui-conversation-create-next {
     cursor: pointer;
     text-align: center;
-    background-color: rgba(3, 101, 249, 100%);
     border-radius: 31px;
     font-size: 14px;
-    font-family: PingFangSC-Medium;
-    line-height: 20px;
     color: #fff;
     padding: 12px 36px;
+
+    @include theme() {
+      background-color: get(text-color-link);
+    }
   }
 }
 
@@ -95,9 +106,11 @@
       .title {
         font-weight: 600;
         font-size: 14px;
-        font-family: PingFangSC-Medium;
-        line-height: 20px;
         padding: 10px;
+
+        @include theme() {
+          color: get(text-color-primary);
+        }
       }
     }
   }

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -124,6 +124,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
       onTouchStart={() => handleH5LongPress('touchstart')}
       onTouchEnd={() => handleH5LongPress('touchend')}
       ref={conversationPreviewButton}
+      id={conversation.conversationID}
     >
       <div className="avatar">
         <Avatar image={displayImage} name={displayTitle} size={40} />