diff --git a/buyer/src/api/common.js b/buyer/src/api/common.js
index 8c579162..6f5dbe60 100644
--- a/buyer/src/api/common.js
+++ b/buyer/src/api/common.js
@@ -88,7 +88,7 @@ export function getIMDetail () {
 //获取图片logo
 export function getBaseSite(){
   return request ({
-    url:`${commonUrl}/common/common/site`,
+    url:`${commonUrl}/common/common/logo`,
     method: Method.GET,
     needToken: false
   })
diff --git a/buyer/src/api/index.js b/buyer/src/api/index.js
index 731937be..57382eec 100644
--- a/buyer/src/api/index.js
+++ b/buyer/src/api/index.js
@@ -24,7 +24,7 @@ export function indexData(params) {
 // 获取自动发券
 export function getAutoCoup(){
   return request({
-    url: "/buyer/promotion/coupon/activity",
+    url: "/buyer/promotion/coupon/getCoupons",
     method: Method.GET,
     needToken: true,
   });
diff --git a/buyer/src/api/member.js b/buyer/src/api/member.js
index eeb7de21..46b6babb 100644
--- a/buyer/src/api/member.js
+++ b/buyer/src/api/member.js
@@ -107,7 +107,7 @@ export function isCollection (type, goodsId) {
 // 查看是否收藏店铺
 export function isStoreCollection (type, goodsId) {
   return request({
-    url: `/buyer/member/storeCollection/isCollection/${type}/${goodsId}`,
+    url: `/buyer/member/collection/isCollection/${type}/${goodsId}`,
     method: Method.GET,
     needToken: true
   });
diff --git a/buyer/src/components/mixes/talkIm.vue b/buyer/src/components/mixes/talkIm.vue
index bc32adbb..3020e57a 100644
--- a/buyer/src/components/mixes/talkIm.vue
+++ b/buyer/src/components/mixes/talkIm.vue
@@ -24,13 +24,15 @@ export default {
       if (userInfo.success) {
         //携带商品Id,在IM可以发送商品信息
         if(goodsId && skuId){
-
+          console.log( this.IMLink,'传递参数');
+          console.log(this.IMLink + "&token=" + accessToken + "&goodsId=" + goodsId + "&skuId=" + skuId + "&id=" + id || this.storeMsg.storeId
+          );
           window.open(
-            this.IMLink + "?token=" + accessToken + "&id=" + id || this.storeMsg.storeId + "&goodsId=" + goodsId + "&skuId=" + skuId
+            this.IMLink + "&token=" + accessToken + "&goodsId=" + goodsId + "&skuId=" + skuId + "&id=" + id || this.storeMsg.storeId
           );
         }else{
           window.open(
-            this.IMLink + "?token=" + accessToken + "&id=" + id || this.storeMsg.storeId
+            this.IMLink + "&token=" + accessToken + "&id=" + id || this.storeMsg.storeId
           );
         }
       } else {
@@ -42,7 +44,9 @@ export default {
     async getIMDetailMethods() {
       let res = await getIMDetail();
       if (res.success) {
+       console.log("IM信息", res);
         this.IMLink = res.result;
+
       }
     },
   },
diff --git a/buyer/src/pages/GoodsDetail.vue b/buyer/src/pages/GoodsDetail.vue
index 17d70b3e..c60b4f05 100644
--- a/buyer/src/pages/GoodsDetail.vue
+++ b/buyer/src/pages/GoodsDetail.vue
@@ -20,7 +20,7 @@
             <Icon type="ios-heart" :color="storeCollected ? '#ed3f14' : '#666'" />
             {{ storeCollected? "已收藏店铺": "收藏店铺" }}
           </span>
-          <span class="ml_10" @click="IMService(goodsMsg.data.storeId,goodsMsg.data.goodsId,goodsMsg.data.id)">联系客服</span>
+          <span class="ml_10" @click="IMService(goodsMsg.data.storeId || null,goodsMsg.data.goodsId,goodsMsg.data.id)">联系客服</span>
         </div>
       </div>
     </div>
@@ -91,7 +91,6 @@ export default {
     getGoodsDetail (val) {
       this.isLoading = true;
       const params = val || this.$route.query;
-
       // 分销员id
       let distributionId =
         params && params.distributionId
diff --git a/im/src/api/chat.js b/im/src/api/chat.js
index 617175f1..b3a9a113 100644
--- a/im/src/api/chat.js
+++ b/im/src/api/chat.js
@@ -7,7 +7,7 @@ export const ServeGetTalkList = (data) => {
 
  // 获取聊天联系人列表服务接口
  export const ServeuserContact = (data) => {
-  return get("/im/friend/mutual", data);
+  return get("/im/friend/following",data);
 };
 
 // 获取聊天列表服务接口
@@ -38,7 +38,6 @@ export const ServeClearTalkUnreadNum = (data) => {
 
 // 获取聊天记录服务接口
 export const ServeTalkRecords = (data) => {
-  console.log(data,'----');
   return get("/im/message", data);
 };
 
diff --git a/im/src/api/contacts.js b/im/src/api/contacts.js
index 653242d3..8cd9d721 100644
--- a/im/src/api/contacts.js
+++ b/im/src/api/contacts.js
@@ -1,45 +1,67 @@
-import { post, get } from '@/utils/request'
+import { post, get, del } from "@/utils/request";
 
 // 获取好友列表服务接口
-export const ServeGetContacts = data => {
-  return get('/contacts/list', data)
-}
+export const ServeGetContacts = (data) => {
+  return get("/contacts/list", data);
+};
 
 // 解除好友关系服务接口
-export const ServeDeleteContact = data => {
-  return post('/contacts/delete', data)
-}
+export const ServeDeleteContact = (data) => {
+  return post("/contacts/delete", data);
+};
 
 // 修改好友备注服务接口
-export const ServeEditContactRemark = data => {
-  return post('/contacts/edit-remark', data)
-}
+export const ServeEditContactRemark = (data) => {
+  return post("/contacts/edit-remark", data);
+};
 
-// 搜索联系人
-export const ServeSearchContact = data => {
-  return get('/contacts/search', data)
-}
+// // 搜索联系人
+// export const ServeSearchContact = data => {
+//   return get('/contacts/search', data)
+// }
+
+// 搜索联系人手机号关注
+export const ServeSearchContact = (data) => {
+  return post("/im/friend/follow-by-mobile", data);
+};
+// 搜索联系人userid关注
+export const ServeSearchuserid = (data) => {
+  return post("/im/friend/follow/" + data);
+};
+
+// 搜索联系人取消关注
+export const ServeDelete = (data) => {
+  return del("/im/friend/unfollow/" + data);
+};
+// 搜索手机号用户2.27
+export const Sersearch = (data) => {
+  return get("/im/friend/search", data);
+};
+// 搜索userid用户2.27
+export const Sersearchtel = (data) => {
+  return get(`/im/friend/user/${data}`);
+};
 
 // 好友申请服务接口
-export const ServeCreateContact = data => {
-  return post('/contacts/apply/create', data)
-}
+export const ServeCreateContact = (data) => {
+  return post("/contacts/apply/create", data);
+};
 
 // 查询好友申请服务接口
-export const ServeGetContactApplyRecords = data => {
-  return get('/contacts/apply/records', data)
-}
+export const ServeGetContactApplyRecords = (data) => {
+  return get("/contacts/apply/records", data);
+};
 
 // 处理好友申请服务接口
-export const ServeApplyAccept = data => {
-  return post('/contacts/apply/accept', data)
-}
+export const ServeApplyAccept = (data) => {
+  return post("/contacts/apply/accept", data);
+};
 
-export const ServeApplyDecline = data => {
-  return post('/contacts/apply/decline', data)
-}
+export const ServeApplyDecline = (data) => {
+  return post("/contacts/apply/decline", data);
+};
 
 // 查询好友申请未读数量服务接口
 export const ServeFindFriendApplyNum = () => {
-  return get('/contacts/apply-unread-num')
-}
+  return get("/contacts/apply-unread-num");
+};
diff --git a/im/src/api/group.js b/im/src/api/group.js
index 3e271672..7365884a 100644
--- a/im/src/api/group.js
+++ b/im/src/api/group.js
@@ -10,9 +10,14 @@ export const ServeGroupDetail = data => {
   return get('/group/detail', data)
 }
 
+// // 创建群聊服务接口
+// export const ServeCreateGroup = data => {
+//   return post('/group/create', data)
+// }
+
 // 创建群聊服务接口
 export const ServeCreateGroup = data => {
-  return post('/group/create', data)
+  return post('/im/group', data)
 }
 
 //  修改群信息
diff --git a/im/src/api/user.js b/im/src/api/user.js
index 44ef3fd8..a04fb046 100644
--- a/im/src/api/user.js
+++ b/im/src/api/user.js
@@ -1,6 +1,7 @@
 import { get } from "@/utils/request";
 import config from "@/config/config";
 
+
 // 获取用户相关设置信息
 export const ServeGetUserSetting = () => {
   return get(`${config.BASE_BUYER}/buyer/passport/member`);
diff --git a/im/src/components/chat/panel/OtherLink.vue b/im/src/components/chat/panel/OtherLink.vue
index ec7a8a3a..f2d145e1 100644
--- a/im/src/components/chat/panel/OtherLink.vue
+++ b/im/src/components/chat/panel/OtherLink.vue
@@ -124,6 +124,7 @@ export default {
       if(this.toUser.storeFlag){
         ServeGetGoodsDetail(this.goodsParams).then(res => {
           if (res.success) {
+       
             this.goodsDetail = res.result.data
           }
         })
@@ -132,7 +133,7 @@ export default {
     getFootPrint() {
       if (this.toUser.storeFlag) {
         this.footPrintParams.memberId = this.id
-        this.footPrintParams.storeId = this.toUser.userId
+        this.footPrintParams.storeId = this.toUser.userId || this.toUser.friendId
         ServeGetFootPrint(this.footPrintParams).then(res => {
           res.result.records=res.result.records.filter((item)=>{
             return item!=null
@@ -161,7 +162,7 @@ export default {
           }
         })
       } else {
-        this.footPrintParams.memberId = this.toUser.userId
+        this.footPrintParams.memberId = this.toUser.userId  || this.toUser.friendId
         this.footPrintParams.storeId = this.id
         ServeStoreGetFootPrint(this.footPrintParams).then(res => {
           res.result.records=res.result.records.filter((item)=>{
diff --git a/im/src/components/chat/panel/PanelHeader.vue b/im/src/components/chat/panel/PanelHeader.vue
index dedceddc..4bc467bc 100644
--- a/im/src/components/chat/panel/PanelHeader.vue
+++ b/im/src/components/chat/panel/PanelHeader.vue
@@ -6,21 +6,27 @@
         v-show="params.is_robot == 0"
         :class="{ 'red-color': params.talk_type == 1 }"
       >
-        {{ params.talk_type == 1 ? '好友' : '群组' }}
+        {{ params.talk_type == 1 ? "好友" : "群组" }}
       </span>
       <span class="nickname">{{ params.nickname }}</span>
       <span v-show="params.talk_type == 2" class="num">({{ groupNum }})</span>
+      <el-button type="danger" @click="userGz">{{
+        userobj.isMutual ? "取消关注" : "关注"
+      }}</el-button>
     </div>
 
-    <div v-show="params.talk_type == 1 && params.is_robot == 0" class="module center-module">
+    <div
+      v-show="params.talk_type == 1 && params.is_robot == 0"
+      class="module center-module"
+    >
       <p class="online">
         <span v-show="isOnline" class="online-status"></span>
-        <span>{{ isOnline ? '在线' : '离线' }}</span>
+        <span>{{ isOnline ? "在线" : "离线" }}</span>
       </p>
       <p class="keyboard-status" v-show="isKeyboard">对方正在输入 ...</p>
     </div>
 
-    <div class="module right-module" >
+    <div class="module right-module">
       <el-tooltip content="历史消息" placement="top">
         <p v-show="params.is_robot == 0">
           <i class="el-icon-time" @click="triggerEvent('history')" />
@@ -40,7 +46,9 @@
   </el-header>
 </template>
 <script>
+import { ServeSearchuserid, ServeDelete } from "@/api/contacts";
 export default {
+  inject: ['callGrandfatherMethod','loadChatListMethod'],
   props: {
     data: {
       type: Object,
@@ -49,10 +57,14 @@ export default {
           talk_type: 0,
           receiver_id: 0,
           params: 0,
-          nickname: '',
-        }
+          nickname: "",
+        };
       },
     },
+    userobj: {
+      type: Object,
+      default: false,
+    },
     online: {
       type: Boolean,
       default: false,
@@ -68,46 +80,79 @@ export default {
         talk_type: 0,
         receiver_id: 0,
         params: 0,
-        nickname: '',
+        nickname: "",
       },
       isOnline: false,
       isKeyboard: false,
       groupNum: 0,
-    }
+    };
   },
   created() {
-    this.setParamsData(this.data)
-    this.setOnlineStatus(this.online)
+    this.setParamsData(this.data);
+    this.setOnlineStatus(this.online);
   },
   watch: {
     data(value) {
-      this.setParamsData(value)
+      this.setParamsData(value);
     },
     online(value) {
-      this.setOnlineStatus(value)
+      this.setOnlineStatus(value);
     },
     keyboard(value) {
-      this.isKeyboard = value
+      this.isKeyboard = value;
       setTimeout(() => {
-        this.isKeyboard = false
-      }, 2000)
+        this.isKeyboard = false;
+      }, 2000);
     },
   },
   methods: {
     setOnlineStatus(value) {
-      this.isOnline = value
+      this.isOnline = value;
     },
     setParamsData(object) {
-      Object.assign(this.params, object)
+      Object.assign(this.params, object);
     },
     setGroupNum(value) {
-      this.groupNum = value
+      this.groupNum = value;
     },
     triggerEvent(event_name) {
-      this.$emit('event', event_name)
+      this.$emit("event", event_name);
+    },
+    userGz() {
+      //关注
+      if (!this.userobj.isMutual) {
+        ServeSearchuserid(
+           this.userobj.userId,
+        )
+          .then((res) => {
+            if (res.code == 200) {
+              this.callGrandfatherMethod();
+              this.loadChatListMethod()
+            } else {
+              this.error = true;
+            }
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      } else {
+        // 取消
+        ServeDelete(this.userobj.userId|| this.userobj.friendId)
+          .then((res) => {
+            if (res.code == 200) {
+              this.callGrandfatherMethod();
+              this.loadChatListMethod()
+            } else {
+              this.error = true;
+            }
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      }
     },
   },
-}
+};
 </script>
 <style lang="less" scoped>
 #panel-header {
@@ -185,7 +230,7 @@ export default {
           border-radius: 50%;
           -webkit-animation: antStatusProcessing 1.2s ease-in-out infinite;
           animation: antStatusProcessing 1.2s ease-in-out infinite;
-          content: '';
+          content: "";
         }
       }
     }
@@ -275,4 +320,8 @@ export default {
     opacity: 0;
   }
 }
+.el-button {
+  padding: 2px 15px;
+  margin-left: 10px;
+}
 </style>
diff --git a/im/src/components/chat/panel/TalkPanel.vue b/im/src/components/chat/panel/TalkPanel.vue
index 18f5c537..da477430 100644
--- a/im/src/components/chat/panel/TalkPanel.vue
+++ b/im/src/components/chat/panel/TalkPanel.vue
@@ -1,17 +1,31 @@
 <template>
   <div class="flex">
-    <el-container class="ov-hidden flex-10 full-height ">
-      <PanelHeader ref="panelHeader" :data="params" :online="isOnline" :keyboard="inputEvent"
-        @event="handleHeaderEvent" />
+    <el-container class="ov-hidden flex-10 full-height">
+      <PanelHeader
+        ref="panelHeader"
+        :data="params"
+        :online="isOnline"
+        :keyboard="inputEvent"
+        :userobj="userobj"
+        @event="handleHeaderEvent"
+      />
       <!-- 主体信息 -->
       <el-main class="main-box no-padding">
-        <div id="lumenChatPanel" class="talks-container lum-scrollbar" @scroll="talkPanelScroll($event)">
+        <div
+          id="lumenChatPanel"
+          class="talks-container lum-scrollbar"
+          @scroll="talkPanelScroll($event)"
+        >
           <!-- 数据加载状态栏 -->
           <div class="loading-toolbar">
-            <span v-if="loadRecord.status == 0" class="color-blue">
+            <!-- <span v-if="loadRecord.status == 0" class="color-blue">
               <i class="el-icon-loading" /> 正在加载数据中...
-            </span>
-            <span v-if="loadRecord.status == 1" class="pointer color-blue" @click="loadChatRecords">
+            </span> -->
+            <span
+              v-if="loadRecord.status == 1"
+              class="pointer color-blue"
+              @click="loadChatRecords"
+            >
               <i class="el-icon-bottom" /> 查看更多消息...
             </span>
             <span v-if="loadRecord.status == 2"> 没有更多消息了... </span>
@@ -34,13 +48,20 @@
             </div>
 
             <!-- 其它对话消息 -->
-            <div v-else class="message-box record-box" :class="{
-              'direction-rt': item.float == 'right',
-              'checkbox-border': multiSelect.isOpen === true,
-            }">
+            <div
+              v-else
+              class="message-box record-box"
+              :class="{
+                'direction-rt': item.float == 'right',
+                'checkbox-border': multiSelect.isOpen === true,
+              }"
+            >
               <aside v-show="multiSelect.isOpen" class="checkbox-column">
-                <i class="el-icon-success" :class="{ selected: verifyMultiSelect(item.id) }"
-                  @click="triggerMultiSelect(item.id)" />
+                <i
+                  class="el-icon-success"
+                  :class="{ selected: verifyMultiSelect(item.id) }"
+                  @click="triggerMultiSelect(item.id)"
+                />
               </aside>
               <aside class="avatar-column">
                 <div class="avatar-box" v-if="item.float == 'right'">
@@ -58,81 +79,154 @@
                     {{ item.float == "right" ? name : toUser.name }} |
                     {{ unixToDate(item.createTime, "MM月dd日 hh:mm") }}
                   </span>
+
                   <div class="flex flex-a-c">
-                    <i @click="againSendMessage(item)" v-if="item.webSocketStatus" class="el-icon-refresh-left again main-color"></i>
+                    <i
+                      @click="againSendMessage(item)"
+                      v-if="item.webSocketStatus"
+                      class="el-icon-refresh-left again main-color"
+                    ></i>
                     <!-- 文本消息 -->
-                    <div v-if="item.messageType == 'MESSAGE'" style="background-color: #d0e9ff;color: black;"
-                      class="text-message" :class="{
+                    <div v-if="item.float == 'right'">
+                      {{ item.isRead ? "已读" : "未读" }}
+                    </div>
+                    <div
+                      v-if="item.messageType == 'MESSAGE'"
+                      style="background-color: #d0e9ff; color: black"
+                      class="text-message"
+                      :class="{
                         left: item.float == 'left',
                         right: item.float == 'right',
-                      }">
+                      }"
+                    >
                       <div class="arrow"></div>
-                      <pre v-if="!emojistwo.includes(item.text)" v-html="item.text" />
-                      <pre v-if="emojistwo.includes(item.text)" v-html="textReplaceEmoji(item.text)" />
-                    </div>
-                   
-                  </div>
-                   <div v-if="item.webSocketStatus" class="tips">网络异常发送失败，请重新发送。</div>
 
-                  <div v-if="item.messageType == 'GOODS' && item.text != null" class="goodsStyle " :class="{
-                    left: item.float == 'left',
-                    right: item.float == 'right',
-                  }">
-                    <div class="base" @click="linkToGoods(item.text.goodsId, item.text.id)">
+                      <pre
+                        v-if="!emojistwo.includes(item.text)"
+                        v-html="item.text"
+                      />
+                      <pre
+                        v-if="emojistwo.includes(item.text)"
+                        v-html="textReplaceEmoji(item.text)"
+                      />
+                    </div>
+                    <div v-if="item.float == 'left'">
+                      {{ item.isRead ? "已读" : "未读" }}
+                    </div>
+                  </div>
+                  <div v-if="item.webSocketStatus" class="tips">
+                    网络异常发送失败，请重新发送。
+                  </div>
+
+                  <div
+                    v-if="item.messageType == 'GOODS' && item.text != null"
+                    class="goodsStyle"
+                    :class="{
+                      left: item.float == 'left',
+                      right: item.float == 'right',
+                    }"
+                  >
+                    <div
+                      class="base"
+                      @click="linkToGoods(item.text.goodsId, item.text.id)"
+                    >
                       <div>
                         <img :src="item.text.thumbnail" class="image" />
                       </div>
                       <div>
                         <div class="goods_name">
-                          <el-tooltip class="item" effect="dark" :content="item.text.goodsName" placement="top-start">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            :content="item.text.goodsName"
+                            placement="top-start"
+                          >
                             <a> {{ item.text.goodsName }} </a>
                           </el-tooltip>
                         </div>
                         <div class="price">
-                          <span>{{ item.text.price | unitPrice('￥') }}</span>
+                          <span>{{ item.text.price | unitPrice("￥") }}</span>
                         </div>
                       </div>
                     </div>
                   </div>
-                  <div v-if="item.messageType == 'ORDER' && item.text != null" class="oderStyle" :class="{
-                    left: item.float == 'left',
-                    right: item.float == 'right',
-                  }" @click="linkToOrders(item.text.sn)">
-                  
+                  <div
+                    v-if="item.messageType == 'ORDER' && item.text != null"
+                    class="oderStyle"
+                    :class="{
+                      left: item.float == 'left',
+                      right: item.float == 'right',
+                    }"
+                    @click="linkToOrders(item.text.sn)"
+                  >
                     <div class="oedersn">
-                      <el-tooltip class="item" effect="dark" :content="item.text.sn" placement="top-start">
+                      <el-tooltip
+                        class="item"
+                        effect="dark"
+                        :content="item.text.sn"
+                        placement="top-start"
+                      >
                         <a> 订单号:{{ item.text.sn }} </a>
                       </el-tooltip>
                     </div>
                     <div class="goods-shared-box">
-                     
-                      <div class="goods-item" v-for="(order,orderIndex) in item.text.orderItems" :key="orderIndex">
-                        <img :src="order.image" style="height: 100px;width: 100px;" />
+                      <div
+                        class="goods-item"
+                        v-for="(order, orderIndex) in item.text.orderItems"
+                        :key="orderIndex"
+                      >
+                        <img
+                          :src="order.image"
+                          style="height: 100px; width: 100px"
+                        />
                         <div>
                           <span class="orderGoodsName">{{ order.name }}</span>
                           <div class="goods-item-price">
-                           <span>{{ order.goodsPrice | unitPrice('￥') }}</span>
-                          </div> 
+                            <span>{{
+                              order.goodsPrice | unitPrice("￥")
+                            }}</span>
+                          </div>
                         </div>
                       </div>
                       <div class="shared-goods">
-                      <div class="orderGoodsTime">{{ item.text.paymentTime }}</div>
-                      <span class="orderFlowPrice">
-                        订单金额：<span>{{ item.text.flowPrice | unitPrice('￥') }}</span>
-                      </span> 
-                      <div class="order-status">
-                        <el-tag 
-                          size="mini"
-                          :type="item.text.orderStatus == 'CANCELLED' || item.text.orderStatus == 'UNPAID' || item.text.orderStatus == ' TAKE' ? 'info' : 'danger'">{{
-                            item.text.orderStatus == 'CANCELLED' ? '已取消' : item.text.orderStatus == 'UNPAID' ? '未付款' :
-                              item.text.orderStatus ==
-                                'PAID' ? '已付款' : item.text.orderStatus == 'UNDELIVERED' ? '待发货' : item.text.orderStatus ==
-                                  'DELIVERED'
-                                  ? '已发货' : item.text.orderStatus == ' COMPLETED' ? '已完成' : item.text.orderStatus == ' TAKE' ?
-                                    '待校验' : ''
-                          }}</el-tag>
-                      </div>
+                        <div class="orderGoodsTime">
+                          {{ item.text.paymentTime }}
                         </div>
+                        <span class="orderFlowPrice">
+                          订单金额：<span>{{
+                            item.text.flowPrice | unitPrice("￥")
+                          }}</span>
+                        </span>
+                        <div class="order-status">
+                          <el-tag
+                            size="mini"
+                            :type="
+                              item.text.orderStatus == 'CANCELLED' ||
+                              item.text.orderStatus == 'UNPAID' ||
+                              item.text.orderStatus == ' TAKE'
+                                ? 'info'
+                                : 'danger'
+                            "
+                            >{{
+                              item.text.orderStatus == "CANCELLED"
+                                ? "已取消"
+                                : item.text.orderStatus == "UNPAID"
+                                ? "未付款"
+                                : item.text.orderStatus == "PAID"
+                                ? "已付款"
+                                : item.text.orderStatus == "UNDELIVERED"
+                                ? "待发货"
+                                : item.text.orderStatus == "DELIVERED"
+                                ? "已发货"
+                                : item.text.orderStatus == " COMPLETED"
+                                ? "已完成"
+                                : item.text.orderStatus == " TAKE"
+                                ? "待校验"
+                                : ""
+                            }}</el-tag
+                          >
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -140,22 +234,32 @@
             </div>
 
             <!-- 消息时间 -->
-            <div v-show="compareTime(idx, item.createTime)" class="datetime no-select"
-              v-text="sendTime(unixToDate(item.createTime, 'yyyy-MM-dd hh:mm'))" />
+            <div
+              v-show="compareTime(idx, item.createTime)"
+              class="datetime no-select"
+              v-text="sendTime(unixToDate(item.createTime, 'yyyy-MM-dd hh:mm'))"
+            />
           </div>
         </div>
 
         <!-- 置底按钮 -->
         <transition name="el-fade-in-linear">
-          <div v-show="tipsBoard" class="tips-board pointer" @click="talkPanelScrollBottom">
+          <div
+            v-show="tipsBoard"
+            class="tips-board pointer"
+            @click="talkPanelScrollBottom"
+          >
             <!-- <SvgMentionDown class="svg" /> -->
             <span>回到底部</span>
           </div>
         </transition>
 
         <!-- 新消息气泡 -->
-        <div v-show="tipsBoard && unreadMessage.num" class="talk-bubble pointer no-select"
-          @click="talkPanelScrollBottom">
+        <div
+          v-show="tipsBoard && unreadMessage.num"
+          class="talk-bubble pointer no-select"
+          @click="talkPanelScrollBottom"
+        >
           <i class="el-icon-chat-dot-round" />
           <span>新消息({{ unreadMessage.num }}条)</span>
           <span>
@@ -168,29 +272,36 @@
       <!-- 页脚信息 -->
       <el-footer class="footer-box" height="180">
         <template v-if="multiSelect.isOpen === false">
-          <MeEditor @send="submitSendMessage" @keyboard-event="onKeyboardEvent" />
+          <MeEditor
+            @send="submitSendMessage"
+            @keyboard-event="onKeyboardEvent"
+          />
         </template>
         <template v-else>
-          <PanelToolbar v-model="multiSelect.items.length" @event="handleMultiMode" />
+          <PanelToolbar
+            v-model="multiSelect.items.length"
+            @event="handleMultiMode"
+          />
         </template>
       </el-footer>
-      <el-aside width="200px">
-
-      </el-aside>
-
+      <el-aside width="200px"> </el-aside>
     </el-container>
 
     <!-- 消息管理器 -->
     <transition name="el-fade-in-linear">
-      <TalkSearchRecord v-if="findChatRecord" :params="{
-        talk_type: params.talk_type,
-        receiver_id: params.receiver_id,
-        title: params.nickname,
-      }" @close="findChatRecord = false" />
+      <TalkSearchRecord
+        v-if="findChatRecord"
+        :params="{
+          talk_type: params.talk_type,
+          receiver_id: params.receiver_id,
+          title: params.nickname,
+        }"
+        @close="findChatRecord = false"
+      />
     </transition>
-
+    <!-- {{ toUser }}123 -->
     <!-- 链接信息 -->
-    <OtherLink :toUser="toUser" :id="id" :goodsParams="goodsParams" class="flex-4" />
+    <!-- <OtherLink :toUser="toUser" :id="id" :goodsParams="goodsParams" class="flex-4" /> -->
   </div>
 </template>
 <script>
@@ -205,7 +316,7 @@ import PanelToolbar from "./PanelToolbar";
 import SocketInstance from "@/im-server/socket-instance";
 import { SvgMentionDown } from "@/core/icons";
 import { formatTime, parseTime, copyTextToClipboard } from "@/utils/functions";
-import { unitPrice } from '@/plugins/filters';
+import { unitPrice } from "@/plugins/filters";
 
 import {
   ServeTalkRecords,
@@ -238,6 +349,10 @@ export default {
         };
       },
     },
+    userobj: {
+      type: Object,
+      default: null,
+    },
     goodsParams: {
       type: Object,
       default: null,
@@ -249,7 +364,7 @@ export default {
       default: false,
     },
   },
-  data () {
+  data() {
     return {
       // 记录加载相关参数
       textReplaceEmoji,
@@ -304,7 +419,7 @@ export default {
   },
   watch: {
     // 监听面板传递参数
-    params () {
+    params() {
       this.loadRecord.minRecord = 0;
       this.tipsBoard = false;
       this.multiSelect = {
@@ -313,10 +428,9 @@ export default {
         mode: 0,
       };
       this.loadChatRecords();
-
     },
   },
-  mounted () {
+  mounted() {
     this.loadChatRecords();
   },
   methods: {
@@ -324,7 +438,7 @@ export default {
     sendTime: formatTime,
 
     // 处理 Header 组件事件
-    handleHeaderEvent (event_name) {
+    handleHeaderEvent(event_name) {
       switch (event_name) {
         case "history":
           this.findChatRecord = true;
@@ -348,7 +462,7 @@ export default {
     // },
     // #TODO 冗余代码
 
-    formatDateToString (date) {
+    formatDateToString(date) {
       var year = date.getFullYear();
       var month = date.getMonth() + 1;
       var day = date.getDate();
@@ -363,7 +477,7 @@ export default {
      * @param format 转换格式
      * @returns {*|string}
      */
-    unixToDate (unix, format) {
+    unixToDate(unix, format) {
       if (!unix) return unix;
       let _format = format || "yyyy-MM-dd hh:mm:ss";
       const d = new Date(unix);
@@ -392,7 +506,7 @@ export default {
       return _format;
     },
 
-    formateDateAndTimeToString (date) {
+    formateDateAndTimeToString(date) {
       var hours = date.getHours();
       var mins = date.getMinutes();
       var secs = date.getSeconds();
@@ -408,13 +522,12 @@ export default {
     // #冗余代码结束
 
     // 重新发送消息
-    againSendMessage(val){
-     
-      this.submitSendMessage(val.text)
+    againSendMessage(val) {
+      this.submitSendMessage(val.text);
     },
 
     // 回车键发送消息回调事件
-    submitSendMessage (content) {
+    submitSendMessage(content) {
       const record = {
         operation_type: "MESSAGE",
         to: this.params.receiver_id,
@@ -426,6 +539,7 @@ export default {
       // if (record.messageType == 'MESSAGE"') {
       //   record.text = this.textReplaceEmoji(record.content)
       // }
+      console.log(record, "发送的消息");
       SocketInstance.emit("event_talk", record);
 
       this.$store.commit("UPDATE_TALK_ITEM", {
@@ -436,6 +550,7 @@ export default {
       /**
        * 插入数据
        */
+
       const insterChat = {
         createTime: this.formateDateAndTimeToString(new Date()),
         fromUser: this.id,
@@ -444,6 +559,7 @@ export default {
         messageType: "MESSAGE",
         text: content,
         float: "right",
+        // id:this.params.id,
       };
       // console.log("插入对话记录",'')
       // 插入对话记录
@@ -468,7 +584,7 @@ export default {
     },
 
     // 推送编辑事件消息
-    onKeyboardEvent (text) {
+    onKeyboardEvent(text) {
       this.$store.commit("UPDATE_TALK_ITEM", {
         index_name: this.index_name,
         draft_text: text,
@@ -496,17 +612,17 @@ export default {
       });
     },
 
-
-
     // 加载用户聊天详情信息
-    loadChatRecords () {
+    loadChatRecords() {
       if (this.loadRecord.pageNumber === 0 || this.params.clickFlag) {
-        this.loadRecord.pageNumber = 1
-        this.params.clickFlag = false
+        this.loadRecord.pageNumber = 1;
+        this.params.clickFlag = false;
       } else {
-        this.loadRecord.pageNumber = this.loadRecord.pageNumber + 1
+        this.loadRecord.pageNumber = this.loadRecord.pageNumber + 1;
       }
       const user_id = this.id;
+      console.log(this.params.talkId, "====");
+      if (this.params.talkId == undefined) return;
       const data = {
         pageNumber: this.loadRecord.pageNumber,
         pageSize: this.loadChatRecords.pageSize,
@@ -514,8 +630,8 @@ export default {
       };
       this.loadRecord.status = 0;
 
-      let el = document.getElementById('lumenChatPanel')
-      let scrollHeight = el.scrollHeight
+      let el = document.getElementById("lumenChatPanel");
+      let scrollHeight = el.scrollHeight;
       ServeTalkRecords(data).then((res) => {
         // 防止点击切换过快消息返回延迟，导致信息错误
         // console.log("读取历史数据", res);
@@ -525,14 +641,14 @@ export default {
           if (item.toUser > 0) {
             item.float = item.fromUser == user_id ? "right" : "left";
           }
-          if (item.messageType == 'GOODS') {
-            item.text = JSON.parse(item.text)
+          if (item.messageType == "GOODS") {
+            item.text = JSON.parse(item.text);
           }
           // if (item.messageType == 'MESSAGE"') {
           //   item.text = this.textReplaceEmoji(item.text)
           // }
-          if (item.messageType == 'ORDER') {
-            item.text = JSON.parse(item.text)
+          if (item.messageType == "ORDER") {
+            item.text = JSON.parse(item.text);
           }
           return { ...item, [key]: key };
         });
@@ -543,16 +659,16 @@ export default {
         this.$nextTick(() => {
           // if (data.record_id == 0 || !data.record_id) {
           if (data.record_id == 0 || data.pageNumber == 1) {
-            el.scrollTop = el.scrollHeight
+            el.scrollTop = el.scrollHeight;
           } else {
-            el.scrollTop = el.scrollHeight - scrollHeight
+            el.scrollTop = el.scrollHeight - scrollHeight;
           }
-        })
+        });
       });
     },
 
     // 多选处理方式
-    handleMultiMode (value) {
+    handleMultiMode(value) {
       if (value == "close") {
         this.closeMultiSelect();
         return false;
@@ -593,7 +709,7 @@ export default {
     },
 
     // 确认消息转发联系人事件
-    confirmSelectContacts (data) {
+    confirmSelectContacts(data) {
       let user_ids = [];
       let group_ids = [];
       data.forEach((item) => {
@@ -624,7 +740,7 @@ export default {
     },
 
     // 处理消息时间是否显示
-    compareTime (index, datetime) {
+    compareTime(index, datetime) {
       if (datetime == undefined) {
         return false;
       }
@@ -657,12 +773,12 @@ export default {
     },
 
     // 查看好友用户信息
-    catFriendDetail (value) {
+    catFriendDetail(value) {
       this.$user(value);
     },
 
     // 撤回消息
-    revokeRecords (index, item) {
+    revokeRecords(index, item) {
       ServeRevokeRecords({
         record_id: item.id,
       }).then((res) => {
@@ -673,7 +789,7 @@ export default {
     },
 
     // 删除消息
-    removeRecords (index, item) {
+    removeRecords(index, item) {
       let receiver_id = item.receiver_id;
       if (item.talk_type == 1 && item.user_id != this.id) {
         receiver_id = item.user_id;
@@ -691,29 +807,29 @@ export default {
     },
 
     // 从列表中删除记录
-    delRecords (arr) {
+    delRecords(arr) {
       this.$store.commit("BATCH_DELETE_DIALOGUE", arr);
       return this;
     },
 
     // 开启多选模式
-    openMultiSelect () {
+    openMultiSelect() {
       this.multiSelect.isOpen = true;
     },
 
     // 关闭多选模式
-    closeMultiSelect () {
+    closeMultiSelect() {
       this.multiSelect.isOpen = false;
       this.multiSelect.items = [];
     },
 
     // 判断记录是否选中
-    verifyMultiSelect (records_id) {
+    verifyMultiSelect(records_id) {
       return this.multiSelect.items.indexOf(records_id) >= 0;
     },
 
     // 触发多选事件
-    triggerMultiSelect (records_id) {
+    triggerMultiSelect(records_id) {
       let i = this.multiSelect.items.indexOf(records_id);
       if (i >= 0) {
         this.multiSelect.items.splice(i, 1);
@@ -730,14 +846,14 @@ export default {
     },
 
     // 验证是否存在选择的指定类型的消息
-    verifyMultiSelectType (type) {
+    verifyMultiSelectType(type) {
       return this.records.some((item) => {
         return this.verifyMultiSelect(item.id) && item.messageType == type;
       });
     },
 
     // 消息点击右键触发自定义菜单
-    onCopy (idx, item, event) {
+    onCopy(idx, item, event) {
       let menus = [];
       let content = "";
       if (document.getElementById("copy_class_" + item.id)) {
@@ -783,7 +899,7 @@ export default {
         label: "引用",
         icon: "el-icon-connection",
         customClass: "cus-contextmenu-item",
-        onClick: () => { },
+        onClick: () => {},
       });
 
       menus.push({
@@ -821,12 +937,12 @@ export default {
       event.preventDefault();
     },
 
-    hideChatGroup () {
+    hideChatGroup() {
       this.group.panel = false;
     },
 
     // 修改群聊免打扰状态
-    disturbChange (detail) {
+    disturbChange(detail) {
       this.$store.commit("UPDATE_TALK_ITEM", {
         index_name: `2_${this.params.receiver_id}`,
         is_disturb: parseInt(detail.status),
@@ -834,17 +950,17 @@ export default {
     },
 
     // 退出群聊回调事件
-    quitGroupSuccess () {
+    quitGroupSuccess() {
       this.$emit("close-talk");
     },
 
     // 同步群信息
-    syncGroupInfo (groupInfo) {
+    syncGroupInfo(groupInfo) {
       this.$refs.panelHeader.setGroupNum(groupInfo.members_num);
     },
 
     // 对话面板滚动事件
-    talkPanelScroll (e) {
+    talkPanelScroll(e) {
       if (e.target.scrollTop == 0 && this.loadRecord.status == 1) {
         this.loadChatRecords();
         return;
@@ -858,7 +974,7 @@ export default {
     },
 
     // 聊天版本滚动到底部
-    talkPanelScrollBottom () {
+    talkPanelScrollBottom() {
       let el = document.getElementById("lumenChatPanel");
       el.scrollTop = el.scrollHeight;
     },
@@ -866,18 +982,18 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.flex-a-c{
+.flex-a-c {
   align-items: center;
-  >div{
+  > div {
     margin-left: 10px;
   }
 }
-.tips{
-  margin-top:10px;
+.tips {
+  margin-top: 10px;
   color: #999;
   font-size: 12px;
 }
-.again{
+.again {
   margin-top: 5px;
   cursor: pointer;
 }
@@ -938,7 +1054,7 @@ export default {
 .orderSn {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap
+  white-space: nowrap;
 }
 
 .orderGoodsName {
@@ -948,7 +1064,6 @@ export default {
   // white-space: nowrap;
 
   font-size: 14px;
- 
 }
 
 .orderGoodsTime {
@@ -958,17 +1073,17 @@ export default {
 
 .orderFlowPrice {
   color: #999;
-  
+
   font-size: 12px;
-  >span{
+  > span {
     color: red;
     font-size: 18px;
   }
 }
-.goods-item-price{
+.goods-item-price {
   margin-top: 10px;
   font-size: 13px;
-   color: red;
+  color: red;
 }
 
 .main-box {
@@ -1031,7 +1146,6 @@ export default {
   }
 }
 
-
 // .base {
 //   margin-top: 5px;
 //   height: 120px;
@@ -1283,23 +1397,22 @@ export default {
     line-height: 25px;
   }
 }
-.goods-shared-box{
-   cursor: pointer;
-  >.goods-item{
-   
+.goods-shared-box {
+  cursor: pointer;
+  > .goods-item {
     margin: 10px 0;
     display: flex;
     border-bottom: 1px solid #ededed;
     align-items: center;
   }
-  >.shared-goods{
+  > .shared-goods {
     padding-left: 10px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
 }
-.order-status{
+.order-status {
   text-align: right;
 }
 </style>
diff --git a/im/src/components/user/Groupchats.vue b/im/src/components/user/Groupchats.vue
new file mode 100644
index 00000000..372e15f3
--- /dev/null
+++ b/im/src/components/user/Groupchats.vue
@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <div class="lum-dialog-mask" v-show="isShow">
+      <el-container class="lum-dialog-box" v-outside="close">
+        <el-header class="header" height="50px">
+          <p>群聊</p>
+          <p class="tools">
+            <i class="el-icon-close" @click="close" />
+          </p>
+        </el-header>
+        <el-main class="main">
+          <div class="form-ap">
+            <div :style="{}">群名称:</div>
+            <div>
+              <el-input
+                v-model="cname"
+                id="serach-mobile"
+                class="input"
+                placeholder="请输入群名称"
+                clearable
+                @keyup.enter.native="onSubmit"
+                @input="error = false"
+              />
+            </div>
+          </div>
+          <div class="form-ap">
+            <div>请选择：</div>
+            <div>
+              <div v-for="item in userContact" :key="item.id" class="main_omn">
+                <div>
+                  <input
+                    type="checkbox"
+                    :id="item.friendId"
+                    :value="item.id"
+                    @change="handleCheckboxChange(item.friendId)"
+                  />
+                  <label for="option1">{{ item.nickname }}</label
+                  ><br />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <el-button
+            type="primary"
+            size="small"
+            :loading="loading"
+            @click="onSubmit"
+            >建群
+          </el-button>
+        </el-main>
+      </el-container>
+    </div>
+  </div>
+</template>
+<script>
+//   import { ServeSearchContact } from '@/api/contacts'
+import { ServeuserContact } from "@/api/chat";
+import { ServeCreateGroup } from "@/api/group";
+import Checkbox from "../../../../manager/src/components/tree-table/Checkbox/Checkbox.vue";
+export default {
+  components: { Checkbox },
+  name: "Groupchats",
+  data() {
+    return {
+      loading: false,
+      isShow: false,
+      mobile: "",
+      error: false,
+      userContact: [], //联系人
+      selectedIds: [], // 用于存储选中的 id
+      cname: "", //群名称
+    };
+  },
+  mounted() {
+    this.getcon();
+  },
+  methods: {
+    // 显示窗口
+    open() {
+      this.mobile = "";
+      this.isShow = true;
+      this.$nextTick(() => {
+        document.getElementById("serach-mobile").focus();
+      });
+    },
+    handleCheckboxChange(id) {
+      // 判断是否已经选中
+      const index = this.selectedIds.indexOf(id);
+      if (index === -1) {
+        // 如果未选中，则添加到 selectedIds
+        this.selectedIds.push(id);
+      } else {
+        // 如果已选中，则从 selectedIds 中移除
+        this.selectedIds.splice(index, 1);
+      }
+      console.log("当前选中的 id：", this.selectedIds);
+    },
+    //获取联系人
+    getcon() {
+      ServeuserContact().then((res) => {
+        if (res.code == 200) {
+          this.userContact = res.result;
+        }
+      });
+    },
+    // 关闭窗口
+    close() {
+      this.isShow = false;
+    },
+    onSubmit() {
+      if (this.cname == "" || this.selectedIds.length == 0) {
+        this.$message("请输入群名称和选择用户");
+        return false;
+      }
+      this.loading = true;
+      ServeCreateGroup({
+        groupName: this.cname,
+        memberIds: this.selectedIds,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            // this.$user(res.data.id);
+            // this.close();
+            this.$message("创建成功");
+            this.cname=""
+            this.selectedIds=[]
+          } else {
+            this.error = true;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.lum-dialog-box {
+  width: 450px;
+  max-width: 450px;
+  height: 250px;
+
+  .main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    button {
+      margin-top: 20px;
+      width: 100px;
+    }
+    .main_omn {
+      display: flex;
+    }
+    .main_name {
+      display: flex;
+      align-items: center;
+    }
+    .form-ap {
+      width: 80%;
+      display: flex;
+      // justify-content: space-around;
+      & > div:first-child {
+        width: 40%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>
diff --git a/im/src/components/user/UserSearch.vue b/im/src/components/user/UserSearch.vue
index 97bfcab2..57989dcf 100644
--- a/im/src/components/user/UserSearch.vue
+++ b/im/src/components/user/UserSearch.vue
@@ -22,6 +22,20 @@
           <p v-show="error" class="error">
             无法找到该用户，请检查搜索内容并重试
           </p>
+          <!-- <div v-if="conobj.nickname != undefined" class="user">
+            <div class="user_a">
+              <div class="avatar-box">
+                <face :text="conobj.avatar" v-if="conobj.avatar"></face>
+                <face-null :text="conobj.name" v-else></face-null>
+              </div>
+              <div class="backolo">
+                {{ conobj.nickname }}
+              </div>
+            </div>
+            <div class="user_b" @click="concernclick">
+              {{ conobj.isMutual ? "已关注" : "关注" }}
+            </div>
+          </div> -->
           <el-button
             type="primary"
             size="small"
@@ -35,56 +49,81 @@
   </div>
 </template>
 <script>
-import { ServeSearchContact } from '@/api/contacts'
+import { Sersearch,ServeSearchContact  } from "@/api/contacts";
 
 export default {
-  name: 'UserSearch',
+  name: "UserSearch",
   data() {
     return {
       loading: false,
       isShow: false,
-      mobile: '',
+      mobile: "",
       error: false,
-    }
+      conobj: {},
+      gnl:false
+    };
   },
   methods: {
     // 显示窗口
     open() {
-      this.mobile = ''
-      this.isShow = true
+      this.mobile = "";
+      this.isShow = true;
       this.$nextTick(() => {
-        document.getElementById('serach-mobile').focus()
-      })
+        document.getElementById("serach-mobile").focus();
+      });
     },
 
     // 关闭窗口
     close() {
-      this.isShow = false
+      this.isShow = false;
     },
+    // //关注
+    // concernclick() {
+    //   let { mobile,conobj } = this;
+    //   if (conobj.nickname == undefined) return false;
 
+    //   ServeSearchContact({
+    //     mobile,
+    //   })
+    //     .then((res) => {
+    //       if (res.code == 200) {
+    //         this.onSubmit()
+    //         // this.conobj = res.result[0];
+    //         // this.$user(res.data.id);
+    //         // this.close();
+    //       } else {
+    //         this.error = true;
+    //       }
+    //     })
+    //     .finally(() => {
+    //       this.loading = false;
+    //     });
+    // },
+    // 通过手机号查询
     onSubmit() {
-      let { mobile } = this
+      let { mobile } = this;
+      // this.conobj={}
+      if (mobile == "") return false;
 
-      if (mobile == '') return false
-
-      this.loading = true
-      ServeSearchContact({
-        mobile,
+      this.loading = true;
+      Sersearch({
+        keyword: mobile,
       })
-        .then(res => {
+        .then((res) => {
           if (res.code == 200) {
-            this.$user(res.data.id)
-            this.close()
+            this.conobj = res.result[0];
+            this.$user(res.result[0].id);
+            // this.close();
           } else {
-            this.error = true
+            this.error = true;
           }
         })
         .finally(() => {
-          this.loading = false
-        })
+          this.loading = false;
+        });
     },
   },
-}
+};
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
@@ -116,4 +155,70 @@ export default {
     }
   }
 }
+.avatar-box {
+  height: 35px;
+  width: 35px;
+  flex-shrink: 0;
+  background-color: #508afe;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: white;
+  user-select: none;
+  transition: ease 1s;
+  position: relative;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    border-radius: 3px;
+  }
+
+  .top-mask {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(22, 25, 29, 0.6);
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: white;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+  }
+
+  &:hover .top-mask {
+    display: flex;
+  }
+}
+.user {
+  display: flex;
+  width: 82%;
+  margin-top: 10px;
+  background-color: #eff0f1;
+  padding: 8px;
+  border-radius: 10px;
+  .user_a {
+    width: 45%;
+    display: flex;
+    justify-content: space-around;
+    .backolo {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .user_b {
+    width: 52%;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    cursor: pointer;
+    color: red;
+  }
+}
 </style>
diff --git a/im/src/components/user/user-card/UserCardDetail.vue b/im/src/components/user/user-card/UserCardDetail.vue
index 93ed30c7..01e5a54c 100644
--- a/im/src/components/user/user-card/UserCardDetail.vue
+++ b/im/src/components/user/user-card/UserCardDetail.vue
@@ -67,12 +67,8 @@
           </div>
         </div>
       </el-main>
-      <el-footer
-        v-show="detail.friend_status !== 0"
-        class="no-padding footer"
-        height="50px"
-      >
-        <el-button
+      <el-footer class="no-padding footer" height="50px">
+        <!-- <el-button
           v-if="detail.friend_status == 1 && detail.friend_apply == 0"
           type="primary"
           size="small"
@@ -85,15 +81,21 @@
           type="primary"
           size="small"
           >已发送好友申请，请耐心等待...
-        </el-button>
+        </el-button> -->
         <el-button
-          v-else-if="detail.friend_status == 2"
+          type="primary"
+          size="small"
+          icon="el-icon-circle-plus-outline"
+          @click="concernclick"
+          >{{ detail.isMutual == 1 ? "取消关注" : "关注" }}
+        </el-button>
+        <!-- <el-button
           type="primary"
           size="small"
           icon="el-icon-s-promotion"
           @click="sendMessage(detail)"
           >发消息
-        </el-button>
+        </el-button> -->
       </el-footer>
 
       <!-- 添加好友申请表单 -->
@@ -123,14 +125,19 @@
 </template>
 <script>
 // import { ServeSearchUser } from "@/api/user";
-import { ServeCreateContact, ServeEditContactRemark } from "@/api/contacts";
+import {
+  ServeCreateContact,
+  ServeEditContactRemark,
+  ServeSearchContact,
+  ServeDelete,
+} from "@/api/contacts";
 import { toTalk } from "@/utils/talk";
-
+import { Sersearchtel } from "@/api/contacts";
 export default {
   name: "UserCardDetail",
   props: {
     user_id: {
-      type: Number,
+      type: String,
       default: 0,
     },
   },
@@ -175,10 +182,43 @@ export default {
       contacts: false,
     };
   },
-  created() {
-    // this.loadUserDetail();
+  created() {},
+  mounted() {
+    this.loadUserDetail();
   },
   methods: {
+    //关注
+    concernclick() {
+      if (!this.detail.isMutual) {
+        //关注
+        ServeSearchContact({
+          mobile: this.detail.mobile,
+        })
+          .then((res) => {
+            if (res.code == 200) {
+              this.close();
+            } else {
+              this.error = true;
+            }
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      } else {
+        // 取消
+        ServeDelete(this.detail.id)
+          .then((res) => {
+            if (res.code == 200) {
+              this.close();
+            } else {
+              this.error = true;
+            }
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      }
+    },
     close() {
       if (this.contacts) return false;
 
@@ -192,16 +232,28 @@ export default {
     },
 
     // 获取用户信息
-    // loadUserDetail() {
-    //   ServeSearchUser({
-    //     user_id: this.user_id,
-    //   }).then((res) => {
-    //     if (res.code == 200) {
-    //       this.detail.user_id = res.data.id;
-    //       Object.assign(this.detail, res.data);
-    //     }
-    //   });
-    // },
+    loadUserDetail() {
+      Sersearchtel(this.user_id)
+        .then((res) => {
+          if (res.code == 200) {
+            this.detail.user_id = res.result.id;
+            Object.assign(this.detail, res.result);
+          } else {
+            this.error = true;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+      // ServeSearchUser({
+      //   user_id: this.user_id,
+      // }).then((res) => {
+      //   if (res.code == 200) {
+      //     this.detail.user_id = res.data.id;
+      //     Object.assign(this.detail, res.data);
+      //   }
+      // });
+    },
 
     // 发送添加好友申请
     sendApply() {
diff --git a/im/src/icons/admin.png b/im/src/icons/admin.png
new file mode 100644
index 00000000..a8cd126e
Binary files /dev/null and b/im/src/icons/admin.png differ
diff --git a/im/src/im-server/event/talk.js b/im/src/im-server/event/talk.js
index 52d487d9..0f97354b 100644
--- a/im/src/im-server/event/talk.js
+++ b/im/src/im-server/event/talk.js
@@ -110,18 +110,19 @@ class Talk extends Base {
 
   handle () {
     let store = this.getStoreInstance();
-    // console.log("触发handle");
+
     // 判断当前是否在聊天页面
     if (!this.isTalkPage()) {
       store.commit("INCR_UNREAD_NUM");
-
+   
       // 判断消息是否来自于我自己，否则会提示消息通知
       return !this.isCurrSender() && this.showMessageNocice();
     }
+    console.log("触发handle");
     // console.log("this.receiver_id", this.receiver_id);
     // console.log("this.sender_id", this.sender_id);
     let isTrue = this.isTalk(1, this.receiver_id, this.sender_id);
-    // console.log("判断当前是否正在和好友对话", isTrue);
+    console.log("判断当前是否正在和好友对话", isTrue);
     // 判断当前是否正在和好友对话
     if (isTrue) {
       this.insertTalkRecord();
diff --git a/im/src/mixins/main-mixin.js b/im/src/mixins/main-mixin.js
index 5e2f3aba..8783ef65 100644
--- a/im/src/mixins/main-mixin.js
+++ b/im/src/mixins/main-mixin.js
@@ -1,13 +1,11 @@
 import SocketInstance from "@/im-server/socket-instance";
-import { ServeGetUserSetting,ServeGetStoreSetting } from "@/api/user";
+import { ServeGetUserSetting, ServeGetStoreSetting } from "@/api/user";
 import store from "@/store";
-import { ServeGetTalkList,ServeGetStoreTalkList } from "@/api/chat";
+import { ServeGetTalkList, ServeGetStoreTalkList } from "@/api/chat";
 import { formatTalkItem } from "@/utils/talk";
 export default {
-  
   created() {
     // 判断用户是否登录
-    
   },
   methods: {
     // 页面初始化设置
@@ -18,8 +16,7 @@ export default {
     // 加载用户相关设置信息，更新本地缓存
     loadUserSetting() {
       //标识没有值,获取用户信息
-
-      if(this.$route.query.id){
+      if (this.$route.query.id) {
         ServeGetUserSetting().then(async ({ code, result }) => {
           // 如果result有值说明用户创建成功
           if (result) {
@@ -28,48 +25,68 @@ export default {
               face: result.face,
               name: result.nickName,
             });
-            console.log(result.nickName)
             /**
              * 用户像商家进行聊天，商家进行刷新好友列表
              */
             // 判断如果是有id说明是 用户像商家进行聊天。
+
             if (this.$route.query.id) {
-              await this.createTalk(this.$route.query.id);
+              let fn = this.createTalk;
+              fn
+                ? await fn(this.$route.query.id)
+                : await this.$children[0].$children[0].createTalk(
+                    this.$route.query.id
+                  );
             }
-            if(this.$route.query.goodsId && this.$route.query.skuId){
-              this.goodsParams.goodsId = this.$route.query.goodsId
-              this.goodsParams.skuId = this.$route.query.skuId
+            this.state = 1;
+            this.aIndexclick(3);
+            if (this.$route.query.goodsId && this.$route.query.skuId) {
+              this.goodsParams
+                ? (this.goodsParams.goodsId = this.$route.query.goodsId)
+                : (this.$children[0].$children[0].goodsParams.goodsId =
+                    this.$route.query.goodsId);
+              // this.goodsParams.goodsId = this.$route.query.goodsId;
+              this.goodsParams
+                ? (this.goodsParams.skuId = this.$route.query.skuId)
+                : (this.$children[0].$children[0].goodsParams.skuId =
+                    this.$route.query.skuId);
+
+              // this.goodsParams.skuId = this.$route.query.skuId;
             }
+          
           } else if (code === 200 && !result) {
             setTimeout(() => {
               this.loadUserSetting();
             }, 2000);
           }
         });
-      }else{
+      } else {
         //标识有值代表是店铺
-        ServeGetStoreSetting().then(async ({ code, result }) => {
-          if (result) {
-            store.commit("UPDATE_USER_INFO", {
-              id: result.id,
-              face: result.storeLogo,
-              name: result.storeName,
-            });
-            //获取店铺聊天列表
-            await this.loadStoreChatList()
-          }else if (code === 200 && !result) {
-            setTimeout(() => {
-              this.loadUserSetting();
-            }, 2000);
-          }
-        })
+        // ServeGetStoreSetting().then(async ({ code, result }) => {
+        //   if (result) {
+        //     store.commit("UPDATE_USER_INFO", {
+        //       id: result.id,
+        //       face: result.storeLogo,
+        //       name: result.storeName,
+        //     });
+        //     //获取店铺聊天列表
+        //     debugger
+        this.state = 0;
+        this.aIndexclick(0,4);
+        this.loadStoreChatList();
+       
+      
+        //   } else if (code === 200 && !result) {
+        //     setTimeout(() => {
+        //       this.loadUserSetting();
+        //     }, 2000);
+        //   }
+        // });
       }
     },
 
-
-     // 获取用户对话列表
-     loadChatListInJs() {
-    
+    // 获取用户对话列表
+    loadChatListInJs() {
       ServeGetTalkList()
         .then(({ code, result }) => {
           if (code !== 200) return false;
@@ -83,40 +100,39 @@ export default {
           }
         })
         .finally(() => {
-         
+          this.loadStatus = 1;
         });
     },
 
-    
     //获取商家聊天记录
     loadStoreChatList() {
       this.loadStatus = this.talkNum == 0 ? 0 : 1;
-      ServeGetStoreTalkList().then(({ code, result }) => {
-        if (code !== 200) return false;
-        this.$store.commit("SET_UNREAD_NUM", 0);
-        this.$store.commit("SET_TALK_ITEMS", {
-          items: result.map((item) => formatTalkItem(item)),
-        });
-
-        // 判断
-        if (this.$route.query.id) {
-          let takeData, takeIndex;
-          console.log(result)
-          result.forEach((take, index) => {
-            if (take.id == this.$route.query.id) {
-              takeData = take;
-              takeIndex = index;
-            }
+      ServeGetStoreTalkList()
+        .then(({ code, result }) => {
+          if (code !== 200) return false;
+          this.$store.commit("SET_UNREAD_NUM", 0);
+          this.$store.commit("SET_TALK_ITEMS", {
+            items: result.map((item) => formatTalkItem(item)),
           });
-          this.$nextTick(() =>
-            this.clickTab(this.$route.query.id, takeData, takeIndex)
-          );
-        }
-      }).finally(() => {
-        this.loadStatus = 1;
-      });
-    },
 
+          // 判断
+          if (this.$route.query.id) {
+            let takeData, takeIndex;
+            result.forEach((take, index) => {
+              if (take.id == this.$route.query.id) {
+                takeData = take;
+                takeIndex = index;
+              }
+            });
+            this.$nextTick(() =>
+              this.clickTab(this.$route.query.id, takeData, takeIndex)
+            );
+          }
+        })
+        .finally(() => {
+          this.loadStatus = 1;
+        });
+    },
 
     reload() {
       this.$root.$children[0].refreshView();
diff --git a/im/src/store/modules/dialogue.js b/im/src/store/modules/dialogue.js
index 98473a7b..8c4f7fd8 100644
--- a/im/src/store/modules/dialogue.js
+++ b/im/src/store/modules/dialogue.js
@@ -43,7 +43,7 @@ export default {
        */
       state.index_name = (resource.talk_type || 1) + "_" + resource.receiver_id;
 
-      console.log(state.index_name,'名字');
+      // console.log(state.index_name,'名字');
     },
 
     // 数组头部压入对话记录1494593861786271744 1494593778193793024
@@ -56,7 +56,6 @@ export default {
       } else {
         state.records.push(...records);
       }
-
       // console.log("最后的数据",state.records)
     },
 
diff --git a/im/src/store/modules/talk.js b/im/src/store/modules/talk.js
index e7770c6f..7d081b6d 100644
--- a/im/src/store/modules/talk.js
+++ b/im/src/store/modules/talk.js
@@ -89,10 +89,10 @@ const Talk = {
       // console.log("state", state);
       // console.log("resource", resource);
       // console.log("%c 更新对话结束", "color:green",state.items);
-
       let enableGetTalkList = true
       state.items.forEach(item => {
         if (item.userId == resource.index_name.split("_")[1]) {
+          debugger
           item.unread++;
           item.msg_text = resource.msg_text;
           item.lastTalkTime = resource.updated_at;
@@ -101,6 +101,7 @@ const Talk = {
           enableGetTalkList = false
         }
       })
+      
       // 循环如果当前用户不在对话记录列表中 就重新请求对话列表接口
       enableGetTalkList ? this.commit('getTalkList') : ''
     },
diff --git a/im/src/utils/request.js b/im/src/utils/request.js
index eedb8d92..808ef532 100644
--- a/im/src/utils/request.js
+++ b/im/src/utils/request.js
@@ -14,68 +14,125 @@ const request = axios.create({
   timeout: 20000,
 });
 
-let isRefreshing = false
+let isRefreshing = false;
 /**
  * 异常拦截处理器
  *
  * @param {*} error
  */
 const errorHandler = (error) => {
-  console.log(error);
   // 判断是否是响应错误信息
   if (error.response) {
     if (error.response.status == 401) {
       removeAll();
       location.reload();
     } else if (error.response.status == 403) {
-      if(!isRefreshing){
-      
-      /**
-       * 403提示将重新从商家移动端进入当前页面
-       */
-      MessageBox("当前登录已失效，请从关闭重新进入。", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        closeOnPressEscape: false,
-        closeOnClickModal: false,
-        type: "warning",
-      })
-        .then(() => {
-          isRefreshing = true
-          window.close();
-          Notification({
-            title:"登录失效提示",
-            message: "请手动关闭当前页面",
-            type:"error",
-            position: "top-right",
-          });
-
+      if (!isRefreshing) {
+        /**
+         * 403提示将重新从商家移动端进入当前页面
+         */
+        MessageBox("当前登录已失效，请从关闭重新进入。", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          closeOnPressEscape: false,
+          closeOnClickModal: false,
+          type: "warning",
         })
-        .catch(() => {
-          isRefreshing = true
-          Notification({
-            title:"登录失效提示",
-            message: "请手动关闭当前页面",
-            type:"error",
-            position: "top-right",
+          .then(() => {
+            isRefreshing = true;
+            window.close();
+            Notification({
+              title: "登录失效提示",
+              message: "请手动关闭当前页面",
+              type: "error",
+              position: "top-right",
+            });
+          })
+          .catch(() => {
+            isRefreshing = true;
+            Notification({
+              title: "登录失效提示",
+              message: "请手动关闭当前页面",
+              type: "error",
+              position: "top-right",
+            });
           });
-        });
-        isRefreshing = false
+        isRefreshing = false;
       }
-    } else if(error.response.status == 400){
-      Notification({
-        message: error.response.data.message,
-        position: "top-right",
-        type:"error",
-      });
+    } else if (error.response.status == 400) {
+      if (error.response.data.code === 20003) {
+        if (!isRefreshing) {
+          console.log(
+            error.response.data.code,
+          );
+
+          MessageBox("当前登录已失效，请关闭重新进入。", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            closeOnPressEscape: false,
+            closeOnClickModal: false,
+            type: "warning",
+          })
+            .then(() => {
+              isRefreshing = true;
+              window.close();
+              Notification({
+                title: "登录失效提示",
+                message: "请手动关闭当前页面",
+                type: "error",
+                position: "top-right",
+              });
+            })
+            .catch(() => {
+              isRefreshing = true;
+              Notification({
+                title: "登录失效提示",
+                message: "请手动关闭当前页面",
+                type: "error",
+                position: "top-right",
+              });
+            });
+          isRefreshing = false;
+        }
+      } else {
+        // location.reload();
+        // handleRefreshToken().then(async ({ code, result }) => {
+        //   // 如果result有值说明用户创建成功
+        //   if (result) {
+        //     store.commit("UPDATE_USER_INFO", {
+        //       id: result.id,
+        //       face: result.face,
+        //       name: result.nickName,
+        //     });
+        //     location.reload();
+        //   }
+        // });
+      }
+
+      // Notification({
+      //   message: error.response.data.message,
+      //   position: "top-right",
+      //   type: "error",
+      // });
     }
   }
 
   return Promise.reject(error);
+  // return Promise.reject();
 };
 
+// const handleRefreshToken = () => {
+//   let token = localStorage.getItem("LILI-TOKEN");
+//   get(
+//     `${config.BASE_BUYER}/buyer/passport/member/refresh/${token}`,
+//     { needToken: false },
+//     {}
+//   );
+// };
+
 // 请求拦截器
 request.interceptors.request.use((config) => {
+
   const token = getToken();
 
   if (token) {
diff --git a/im/src/views/message/index.vue b/im/src/views/message/index.vue
index cff158d7..0a2df2e8 100644
--- a/im/src/views/message/index.vue
+++ b/im/src/views/message/index.vue
@@ -16,6 +16,8 @@
                 <span v-if="name">{{ name }}</span>
                 <span v-else>用户名称</span>
               </p>
+              <div class="addcre" @click="triggerSubMenu">添加好友</div>
+              <div class="addcre" @click="Groupchats">群聊</div>
             </el-header>
             <el-header height="60px" class="header">
               <div class="from-search">
@@ -80,15 +82,7 @@
                 <p v-show="loadStatus === 0" class="empty-data">
                   <i class="el-icon-loading" /> 数据加载中...
                 </p>
-
-                <p
-                  v-show="loadStatus === 1 && talkNum === 0"
-                  class="empty-data"
-                >
-                  暂无聊天消息
-                </p>
-
-                <p v-show="loadStatus === 1 && talkNum > 0" class="main-menu">
+                <p v-show="loadStatus === 1" class="main-menu">
                   <span
                     class="title"
                     :style="{ color: aIndex == 0 ? 'red' : '' }"
@@ -99,13 +93,16 @@
                     class="title"
                     :style="{ color: aIndex == 1 ? 'red' : '' }"
                     @click="aIndexclick(1)"
-                    >联系人</span
+                    >关注</span
                   >
 
                   <!-- <el-tag size="mini" type="danger" v-if="myUnreadNum"
                     >未读：{{ myUnreadNum }}</el-tag
                   > -->
                 </p>
+                <!-- <p v-show="loadStatus === 1 && aIndex === 0" class="empty-data">
+                  暂无聊天消息
+                </p> -->
                 <!-- 对话列表 -->
                 <template v-if="aIndex === 0">
                   <div
@@ -126,6 +123,13 @@
                         <i class="el-icon-top" />
                       </div>
                     </div>
+                    <!-- <div
+                    class="ximng"
+                      :style="{ position: 'absolute', left: '5%', top: '8.5%',zIndex:9999999,width:'10%',textAlign:'center',background:url(adminpng) }"
+                      @click.stop="guzki(item)"
+                    >
+                      X
+                    </div> -->
                     <div class="card-box">
                       <div class="title">
                         <div class="card-name">
@@ -209,7 +213,7 @@
                     @click="clickTab(item.friendId, item, index, 1)"
                   >
                     <div class="avatar-box">
-                      <face :text="item.face" v-if="item.face"></face>
+                      <face :text="item.avatar" v-if="item.avatar"></face>
                       <face-null :text="item.name" v-else></face-null>
                       <div
                         v-show="item.is_top == 0"
@@ -219,6 +223,7 @@
                         <i class="el-icon-top" />
                       </div>
                     </div>
+
                     <div class="card-box">
                       <div class="title">
                         <div class="card-name">
@@ -308,6 +313,7 @@
                 class="full-height flex-8"
                 :params="params"
                 :goodsParams="goodsParams"
+                :userobj="userobj"
                 :is-online="isFriendOnline"
                 @change-talk="changeTalk"
                 @close-talk="closeTalk"
@@ -321,6 +327,7 @@
               class="full-height flex-8"
               :params="params"
               :goodsParams="goodsParams"
+              :userobj="userobj"
               :is-online="isFriendOnline"
               @change-talk="changeTalk"
               @close-talk="closeTalk"
@@ -334,6 +341,7 @@
 
     <!-- 用户查询组件 -->
     <UserSearch ref="searchUsers" />
+    <Groupchats ref="Groupchats" :userContact="{ fn: userContact }" />
   </div>
 </template>
 <script>
@@ -342,6 +350,7 @@ import MainLayout from "@/views/layout/MainLayout";
 import WelcomeModule from "@/components/layout/WelcomeModule";
 import TalkPanel from "@/components/chat/panel/TalkPanel";
 import UserSearch from "@/components/user/UserSearch";
+import Groupchats from "@/components/user/Groupchats";
 import OtherLink from "@/components/chat/panel/OtherLink.vue";
 import {
   ServeGetTalkList,
@@ -352,6 +361,7 @@ import {
   ServeuserContact,
 } from "@/api/chat";
 import { ServeDeleteContact, ServeEditContactRemark } from "@/api/contacts";
+// import admin from "@/icons/admin.png";
 import { beautifyTime } from "@/utils/functions";
 import { formatTalkItem, findTalkIndex, getCacheIndexName } from "@/utils/talk";
 import { setToken } from "@/utils/auth";
@@ -366,9 +376,11 @@ export default {
     UserSearch,
     OtherLink,
     WelcomeModule,
+    Groupchats,
   },
   data() {
     return {
+      // adminpng:admin,
       aIndex: 0, //0 对话 1联系人
       bIndex: 0, //0
       userobj: {},
@@ -402,6 +414,8 @@ export default {
       interval: null,
       userTalkItem: [],
       userContact: [],
+      count: 0,
+      state: 0, //是否是商户 0商户 1用户
     };
   },
   computed: {
@@ -435,13 +449,18 @@ export default {
       return index >= 0 && this.talks[index].is_online == 1;
     },
   },
+  provide() {
+    return {
+      callGrandfatherMethod: this.aIndexclick("undefined"),
+      loadChatListMethod: this.loadChatList,
+    };
+  },
   watch: {
     talkItems(val) {
       val ? this.$set(this, "userTalkItem", val) : "";
     },
     // 搜索用户的时候 根据当前用户表进行模糊搜索
     input(val, oldVal) {
-      console.log(val, oldVal);
       if (val) {
         let str = ["", ...val, ""].join(".*");
         let reg = new RegExp(str);
@@ -454,7 +473,6 @@ export default {
     },
     unreadNum(value) {
       clearInterval(this.interval);
-      // console.log("%c 更新未读消息", "color:#32ccbc");
       this.$store.commit("SET_UNREAD_NUM", value);
 
       if (value > 0) {
@@ -484,19 +502,30 @@ export default {
   beforeCreate() {
     setToken(this.$route.query.token);
   },
-  async created() {
+  // async created() {
+  //   await this.initialize();
+  //   await this.loadUserSetting();
+  //   /**
+  //    * 如果说有id 说明是用户点击 “联系客服” 进入的该页面
+  //    * 所以创建会话 并请求用户列表
+  //    * 如果没有id说明当前商家登录 直接请求用户列表
+  //    */
+  // },
+
+  async mounted() {
     await this.initialize();
     await this.loadUserSetting();
-    /**
-     * 如果说有id 说明是用户点击 “联系客服” 进入的该页面
-     * 所以创建会话 并请求用户列表
-     * 如果没有id说明当前商家登录 直接请求用户列表
-     */
-  },
-
-  mounted() {
     this.scrollEvent();
-    this.getcon();
+    setTimeout(() => {
+      //用户
+      if (this.state == 1) {
+        this.aIndexclick(0);
+      }
+      //商户
+      if (this.state == 0) {
+        this.aIndexclick(0);
+      }
+    }, 1000);
   },
   destroyed() {
     document.title = title;
@@ -504,8 +533,26 @@ export default {
     this.clearTalk();
   },
   methods: {
-    aIndexclick(index) {
-      this.aIndex = index;
+    async aIndexclick(index) {
+      if (index == "undefined") {
+        this.aIndex = 0;
+      } else {
+        this.aIndex = index;
+      }
+      //用户
+      if (this.state == 1) {
+        if (index == 0 || index == 1 || index == 3) {
+          await this.getcon();
+          await this.loadChatList();
+        }
+      }
+      //商户
+      if (this.state == 0) {
+        if (index == 0 || index == 1 || index == 4) {
+          await this.getcon();
+          await this.loadStoreChatList();
+        }
+      }
       this.bIndex = 0;
     },
     // 美化时间格式
@@ -514,13 +561,16 @@ export default {
     //创建会话
     async createTalk(id) {
       await ServeCreateTalkList(id);
-
-      await this.loadChatList();
     },
     // header 功能栏隐藏事件
     closeSubMenu() {
       this.subMenu = false;
     },
+    // 关注
+    guzki(obj) {
+      console.log(obj, "关注成功");
+    },
+    //获取联系人
     getcon() {
       ServeuserContact().then((res) => {
         if (res.code == 200) {
@@ -554,6 +604,16 @@ export default {
         this.$refs.searchUsers.open();
       }
     },
+    // 工具栏事件
+    Groupchats(type) {
+      // this.closeSubMenu();
+
+      // if (type == 1) {
+      //   this.launchGroupShow = true;
+      // } else {
+      this.$refs.Groupchats.open();
+      // }
+    },
 
     // 监听自定义滚动条事件
     scrollEvent() {
@@ -565,7 +625,6 @@ export default {
     // 获取用户对话列表
     loadChatList() {
       this.loadStatus = this.talkNum == 0 ? 0 : 1;
-
       ServeGetTalkList()
         .then(({ code, result }) => {
           if (code !== 200) return false;
@@ -573,11 +632,9 @@ export default {
           this.$store.commit("SET_TALK_ITEMS", {
             items: result.map((item) => formatTalkItem(item)),
           });
-
           // 判断
           if (this.$route.query.id) {
             let takeData, takeIndex;
-            console.log("用户result", result);
             this.talkItems.forEach((take, index) => {
               if (take.userId == this.$route.query.id) {
                 takeData = take;
@@ -599,6 +656,7 @@ export default {
       if (!id) return;
       this.activeIndex = index;
       var item = [];
+
       if (con == 1) {
         this.bIndex = 1;
         item =
@@ -611,25 +669,24 @@ export default {
             return item.userId == id;
           }) || {};
       }
-      // console.log(item,'');
       this.userobj = item;
       // 点击当前栏目存储当前用户的信息
       this.$store.state.user.toUser = val;
-      let nickname = item.name;
-
       this.params = {
         talk_type: 1,
-        receiver_id: item.userId,
-        nickname,
+        receiver_id: con == 1 ? item.friendId : item.userId,
+        nickname: con == 1 ? item.nickname : item.name,
         is_robot: item.is_robot,
-        talkId: item.id, //聊天对话的id
+        talkId: con == 1 ? item.talkId : item.id, //聊天对话的id
+        // talkId: item.id,
+        // talkId:this.$store.state.user.id,
         clickFlag: true,
       };
 
       // 更新信息
       this.$store.commit("UPDATE_DIALOGUE_MESSAGE", {
         talk_type: 1,
-        receiver_id: item.userId,
+        receiver_id: con == 1 ? item.friendId : item.userId,
         is_robot: item.is_robot,
       });
 
@@ -867,6 +924,11 @@ export default {
 .user-status {
   margin-left: 10px;
 }
+.addcre {
+  width: 50%;
+  text-align: right;
+  cursor: pointer;
+}
 .aside-box {
   position: relative;
   border-right: 1px solid rgb(245, 245, 245);
@@ -1029,7 +1091,8 @@ export default {
     align-items: center;
     border-left: 3px solid transparent;
     transition: 0.2s ease-in;
-
+    .ximng {
+    }
     .avatar-box {
       height: 35px;
       width: 35px;
diff --git a/im/vue.config.js b/im/vue.config.js
index 129c00df..1ee2a54d 100644
--- a/im/vue.config.js
+++ b/im/vue.config.js
@@ -31,6 +31,11 @@ const vueConfig = {
   runtimeCompiler: false,
   devServer: {
     port: 8000,
+    client:{
+      overlay:{
+        runtimeErrors:false //编译出现错误或警告，是否全屏显示
+      }
+    }
     // proxy: {
     //   //配置跨域
     //   '/api': {
diff --git a/manager/src/libs/axios.js b/manager/src/libs/axios.js
index 79e7e5ff..c8d54ca3 100644
--- a/manager/src/libs/axios.js
+++ b/manager/src/libs/axios.js
@@ -64,6 +64,17 @@ service.interceptors.response.use(
         }
         break;
       case 20004:
+         // 未登录 清除已登录状态
+         Cookies.set("userInfoManager", "");
+         setStore("accessToken", "");
+         if (router.history.current.name != "login") {
+           if (data.message !== null) {
+             Message.error(data.message);
+           } else {
+             Message.error("未知错误，请重新登录");
+           }
+           router.push("/login");
+         }
       case 401:
         // 未登录 清除已登录状态
         Cookies.set("userInfoManager", "");
diff --git a/seller/src/views/shop/shopSetting.vue b/seller/src/views/shop/shopSetting.vue
index f432fd04..28880a10 100644
--- a/seller/src/views/shop/shopSetting.vue
+++ b/seller/src/views/shop/shopSetting.vue
@@ -41,7 +41,7 @@
               </Input>
             </FormItem>
             <FormItem label="发货人手机号" prop="salesConsignorMobile">
-              <Input v-model="addressGoods.salesConsignorMobile" maxlength="11" clearable style="width: 20%">
+              <Input v-model.trim="addressGoods.salesConsignorMobile" maxlength="11" clearable style="width: 20%">
               </Input>
             </FormItem>
             <FormItem label="地址" prop="salesConsignorAddressId">
@@ -70,7 +70,7 @@
               <Input v-model="addressForm.salesConsigneeName" maxlength="11" clearable style="width: 20%" />
             </FormItem>
             <FormItem label="收货人电话" prop="salesConsigneeMobile">
-              <Input v-model="addressForm.salesConsigneeMobile" maxlength="11" style="width: 20%" />
+              <Input v-model.trim="addressForm.salesConsigneeMobile" maxlength="11" style="width: 20%" />
             </FormItem>
             <FormItem label="售后地址">
               <span>{{ addressForm.salesConsigneeAddressPath }}</span>
@@ -161,7 +161,7 @@ export default {
       addressForm: {
         // 退货地址
         salesConsigneeName: "", // 收货人姓名
-        salesConsigneeMobile: "", // 收货人电话
+        salesConsigneeMobile:"", // 收货人电话
         salesConsigneeAddressId: "", // 售后地址id,逗号分割
         salesConsigneeAddressPath: "", // 售后地址，逗号分割
         salesConsigneeDetail: "", // 详细地址
@@ -258,19 +258,19 @@ export default {
       submitLoading: false, // 添加或编辑提交状态
       //发货地址
       addressGoods: {
-        salesConsignorName: " ",
-        salesConsignorMobile: " ",
-        salesConsignorAddressId: " ",
-        salesConsignorAddressPath: " ",
-        salesConsignorDetail: " ",
+        salesConsignorName: "",
+        salesConsignorMobile: "",
+        salesConsignorAddressId: "",
+        salesConsignorAddressPath: "",
+        salesConsignorDetail: "",
       },
 
       addressGoodsValidate: {
         salesConsignorName: [
-          { required: true, message: "请输入发货人姓名", trigger: "blur" },
+          { required: true, message: "请输入发货人姓名", trigger: "blur" ,maxlength:11},
         ],
         salesConsignorMobile: [
-          { required: true, message: "手机号不能为空", trigger: "blur" },
+          { required: true, message: "手机号不能为空", trigger: "blur",maxlength:11 },
           {
             pattern: RegExp.mobile,
             trigger: "blur",
diff --git a/txim/.browserslistrc b/txim/.browserslistrc
new file mode 100644
index 00000000..214388fe
--- /dev/null
+++ b/txim/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/txim/.gitignore b/txim/.gitignore
new file mode 100644
index 00000000..403adbc1
--- /dev/null
+++ b/txim/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/txim/README.md b/txim/README.md
new file mode 100644
index 00000000..c7dcb75e
--- /dev/null
+++ b/txim/README.md
@@ -0,0 +1,19 @@
+# txim
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/txim/babel.config.js b/txim/babel.config.js
new file mode 100644
index 00000000..e9558405
--- /dev/null
+++ b/txim/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/txim/package.json b/txim/package.json
new file mode 100644
index 00000000..360b49e1
--- /dev/null
+++ b/txim/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "txim",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "@tencentcloud/chat-uikit-vue": "^2.4.3",
+    "axios": "^1.8.2",
+    "core-js": "^3.8.3",
+    "element-ui": "^2.15.14",
+    "js-base64": "^3.7.7",
+    "qs": "^6.14.0",
+    "vue": "^2.7.9",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.1.2",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "typescript": "~4.5.5",
+    "vue-template-compiler": "^2.7.9"
+  }
+}
diff --git a/txim/public/favicon.ico b/txim/public/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/txim/public/favicon.ico differ
diff --git a/txim/public/index.html b/txim/public/index.html
new file mode 100644
index 00000000..3e5a1396
--- /dev/null
+++ b/txim/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/txim/src/App.vue b/txim/src/App.vue
new file mode 100644
index 00000000..c894eb4e
--- /dev/null
+++ b/txim/src/App.vue
@@ -0,0 +1,68 @@
+<template>
+  <div id="app">
+    <!-- 消息 -->
+    <TUIKit
+      v-if="flag"
+      :SDKAppID="info.SDKAppID"
+      :userID="info.userID"
+      :userSig="info.userSing"
+    />
+    <!-- 视频电话 -->
+    <!-- <TUICallKit
+      class="callkit-container"
+      :allowedMinimized="true"
+      :allowedFullScreen="false"
+    /> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import { TUIKit } from "./TUIKit";
+import { TUICallKit } from "@tencentcloud/call-uikit-vue2";
+import { reactive, ref, onMounted, onUpdated,onBeforeMount } from "vue";
+import axios from "axios";
+// 测试
+// const info = reactive({
+//   userSing:'eJwtzEELgjAYxvHvsnPou82pCV2CIsEoUW9exK14WelwS4Lou2fq8fk98P*QMiu8UQ0kIcwDspk3StU5vOHMTlm3upW6MQYlSWgIAIxHIlwe9TY4qMmFEGy6FnX4-FsUUMaBxnyt4H3KZuD62n-Yanvu9TUXrxiPwaEqtC5pl6dD2ehT7Tdin46Xdke*P1PQMZc_',
+//   SDKAppID:1600023756,
+//   userID:'test'
+// })
+const flag = ref(false)
+const info = reactive({
+  userSing: "",
+  SDKAppID: Number("1"),
+  userID: "",
+});
+const getIMDetail = async () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  const token = urlParams.get("token");
+  if (token) {
+    try {
+      const { data } = await axios.get(
+        "http://192.168.1.200:8888/buyer/passport/member/im-info",
+        {
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+            accesstoken: token,
+          },
+        }
+      );
+      info.userSing = data.result.userSig;
+      info.SDKAppID = data.result.sdkAppId;
+      info.userID = data.result.userID;
+      flag.value = true;
+    } catch (error) {
+      alert("没有登陆");
+      window.close();
+    }
+  } else {
+    alert("没有登陆");
+    window.close();
+  }
+};
+getIMDetail()
+</script>
+<style lang="scss"></style>
+
+
diff --git a/txim/src/TUIKit/CHANGELOG.md b/txim/src/TUIKit/CHANGELOG.md
new file mode 100644
index 00000000..29031f62
--- /dev/null
+++ b/txim/src/TUIKit/CHANGELOG.md
@@ -0,0 +1,208 @@
+## [2.4.0] (2025-01-16)
+
+### Fix
+- 修复 sendMessage 时携带的默认信息，支持用户自定义配置。
+
+## [2.3.8] (2025-01-10)
+
+### Features
+- 支持文本消息 url 高亮跳转
+
+## Fix
+- 修复自定义大表情失效问题
+- 修复 login 时好友列表数据未重置问题
+
+## [2.3.6] (2024-12-06)
+
+### Fix
+- 修复 marked 依赖丢失 ts 类型声明
+
+## [2.3.5] (2024-12-06)
+
+### Features
+- 支持消息 markdown 展示
+- 支持消息流式输出效果
+
+## Fix
+- 修复 Toast 失效问题
+
+## [2.3.3] (2024-10-28)
+
+### Features
+- 支持群组禁言后发送消息错误提示国际化
+
+## Fix
+- 修复集成 CallKit 点击通话按钮偶现无响应问题
+
+## [2.3.2] (2024-10-28)
+
+## Fix
+- 修复群聊中群管理入口偶现的丢失问题
+
+## [2.3.1] (2024-10-25)
+
+## Fix
+- 修复 H5 安全区遮挡问题
+- 修复 H5 键盘遮挡输入框问题
+- 修复撤回消息中撤回人为空问题
+- 修复 TUIContact 修改好友备注后列表显示未更新问题
+
+## [2.2.9] (2024-10-17)
+
+## Fix
+- 修复 Callkit 融合被叫超时无应答英文词条翻译错误问题
+
+## [2.2.8] (2024-09-24)
+
+### Features
+- 支持繁体中文语言
+- 支持新增自定义语言类型
+
+## Fix
+- 修复 MessageInput 内容中间回车发送消息引入换行问题
+
+## [2.2.7] (2024-09-13)
+
+### Features
+- 优化 C2C 会话音视频通话信令上屏(对齐微信体验)
+
+## [2.2.6] (2024-09-06)
+
+### Features
+- Work 类型群组支持普通群成员修改群名称、群公告信息
+
+## [2.2.3] (2024-07-05)
+
+### Features
+- 支持会话草稿
+- 支持富文本复制
+- 支持文本部分复制
+- 语音消息使用红点提示是否播放
+
+## Fix
+- 修复邀请加入群聊选人组件未过滤已有群成员问题
+- 修复 TUISearch 搜索文本消息出现 [系统消息] 前缀问题
+- 修复消息引用语音但展示为"聊天记录"的问题
+- 修复 Callkit 在 H5 环境下布局只有半屏的问题
+
+## [2.2.0] (2024-06-17)
+
+### Features
+- 支持消息多选、消息逐条转发、消息合并转发
+- 支持表情包自定义
+- 支持中英文 github readme
+- 被引用消息撤回时隐藏原始消息内容并提醒已撤回
+
+## [2.1.4] (2024-05-20)
+
+### Fix
+- 修复头像组件因加载图片失败导致的循环加载问题
+
+## [2.1.3] (2024-05-17)
+
+### Features
+- 点击空白区域时收起小表情面板和工具栏
+- callkit 提供音视频通话中途加人能力
+- 更新 roomkit 引用方式
+
+### Fix
+
+- 修复视频一定概率无法播放的问题
+- 修复消息引用的视觉左侧未对齐的问题
+
+## [2.1.1] (2024-04-26)
+
+### Features
+- 支持语音转文字
+- 文本消息转翻译兼容小表情上屏，兼容提及所有人
+
+### Fix
+- 优化已读回执详情列表超长昵称的显示效果
+- 解决转发消息已读回执失效的问题
+- 解决加没有群申请时额外请求用户信息的问题
+
+## [2.1.0] (2024-04-12)
+
+### Features
+- 新增消息翻译功能
+
+## [2.0.9] (2024-03-29)
+
+### Features
+- ScrollButton 支持未读新消息提示
+- 群未决申请展示优化
+- 兼容支持 H5 IOS longPress 事件
+
+### Update
+- 下线本地审核相关入口
+
+### Fix
+- 修复 nick 过长样式溢出问题
+
+## [2.0.8] (2024-03-15)
+
+### Fix
+- 修复已知问题，提升稳定性
+
+## [2.0.7] (2024-03-15)
+
+### Fix
+- TUIConversation network 断网显示优化
+- 修复消息列表滚动到顶部后"回到底部"按钮消失的问题
+- 修复一定概率下消息列表为空的问题
+
+## [2.0.6] (2024-03-01)
+
+### Features
+
+- 升级 universal api 引入方式
+
+## [2.0.5] (2024-02-04)
+
+### Features
+
+- 新增表情回复功能(需购买旗舰版)
+- 聊天界面更新黄脸小表情
+- 添加音频播放动画
+
+### Fix
+
+- 语音场景优化 修复了语音播放相关的体验问题
+
+## [2.0.4] (2024-01-19)
+
+### Features
+
+- 支持文本消息复制
+
+## [2.0.3] (2024-01-12)
+
+### Features
+
+- TUIContact 关系链支持用户在线状态。
+- TUIContact 中获取客服列表的时机调整为 Engine 设置商业化能力位之后。
+
+### Fix
+
+- 修复已知问题，提升稳定性
+
+## [2.0.2] (2024-01-05)
+
+### Fix
+
+- 修复 IOS13 消息无法发送问题
+- 修复已知问题，提升稳定性
+
+## [2.0.0] (2023-12-21)
+
+### Features
+
+- 全面支持 Vue2 & Vue3，包括以下主体功能：
+  - TUIChat: 负责消息界面展示，包括多类型消息收发，消息引用/删除/撤回/转发、查询消息已读回执详情等功能。
+  - TUIConversation: 负责会话列表的展示和编辑，包括会话置顶、会话消息免打扰、会话删除等功能.
+  - TUISearch: 负责消息云端搜索，包括全局搜索与会话内搜索，支持文本、图片、文件等多类型消息混合搜索，支持搜索时间范围选择与搜索结果定位，免费试用请点击 https://cloud.tencent.com/document/product/269/92648#ae4e3f5c-94db-4df3-8a49-65d23ce417b8 开通。
+  - TUIGroup: 负责群聊的创建以及群资料、群成员、群组权限、群公告、群禁言的管理。
+  - TUIContact: 负责联系人与群组展示，添加好友，移入黑名单，好友备注，信息展示等功能。
+- 同时，我们还提供了功能丰富的插件系统：
+  - TUICustomerService: 在线客服插件，支持灵活的路由排队、客服接待、智能机器人功能，配合功能丰富的管理端与数据分析能力，支持客服多终端办公，免费试用请点击 https://cloud.tencent.com/document/product/269/92648#ae4e3f5c-94db-4df3-8a49-65d23ce417b8 开通。
+  - TUICallKit: 音视频通话 UI 组件，支持两人或多人进行音视频通话，覆盖游戏社交、在线客服、视频客服、在线问诊、保险咨询等场景，免费试用请点击 https://cloud.tencent.com/document/product/269/79861#step1 开通。
diff --git a/txim/src/TUIKit/README.md b/txim/src/TUIKit/README.md
new file mode 100644
index 00000000..febcbf94
--- /dev/null
+++ b/txim/src/TUIKit/README.md
@@ -0,0 +1,94 @@
+<h1 align="center">chat-uikit-vue</h1>
+<p align="center">
+  Globally interconnected In-App Chat, user profile and relationship chains and online/offline push.
+</p>
+<p align="center">
+  <span>English / </span>
+  <a href="https://github.com/TencentCloud/chat-uikit-vue/blob/main/.github/README_ZH.md">简体中文</a>
+</p>
+
+![image](https://github.com/TencentCloud/chat-uikit-vue/assets/57951148/7bd24604-1e5e-4541-8992-245dccbbc810)
+![image](https://github.com/TencentCloud/chat-uikit-vue/assets/57951148/40ae2f49-39ae-432d-8d1b-5b46414bc3b4)
+
+## About chat-uikit-vue
+
+[chat-uikit-vue](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue) is a Vue UI component library based on Tencent Cloud Chat SDK. It provides universally used UI components that include Conversation, Chat, and Group components. Leveraging these meticulously crafted UI components, you can quickly construct an elegant, reliable, and scalable Chat application.
+
+> In respect for the copyright of the emoji design, the Chat Demo/TUIKit project does not include the cutouts of large emoji elements. Please replace them with your own designed or copyrighted emoji packs before the official launch for commercial use. The default small yellow face emoji pack is copyrighted by Tencent Cloud and can be authorized for a fee. If you wish to obtain authorization, please [submit a ticket](https://console.tencentcloud.com/workorder/category?level1_id=29&level2_id=40&source=14&data_title=Chat&step=1) to contact us.
+
+
+## Core Capabilities
+
+- UIKit: Build a fully-featured chat app in just ten minutes using UIKit components
+- Various Message Types: Support multiple message types, such as text, images, audio, and video messages
+- Notifications: Timely notify users of app messages and drive higher conversion rates
+- Group Management: Create groups, manage group members, and customize profiles
+- Conversation Management: View information about unread messages, recent, pinned, or deleted chats
+
+## Demo
+
+👉🏻 [Free Demo](https://web.sdk.qcloud.com/im/demo/intl/index.html?scene=social)
+
+## Send Your First Message
+
+### Vue3
+- [Integration TUIKit](https://trtc.io/document/58644?platform=web&product=chat)
+- [Quick Run Demo](https://github.com/TencentCloud/chat-uikit-vue/blob/main/Vue3/Demo/README.md)
+
+### Vue2
+- [Integration TUIKit](https://trtc.io/document/58644?platform=web&product=chat)
+- [Quick Run Demo](https://github.com/TencentCloud/chat-uikit-vue/blob/main/Vue2/Demo/README.md)
+
+
+## TUILogin 
+
+``` javascript
+import { TUILogin } from '@tencentcloud/tui-core';
+```
+The options parameter is of the Object type. It contains the following attribute values:
+| Name | Type | Description |
+| --- | --- | --- |
+| SDKAppID | number | Required, SDKAppID of the chat app |
+| userID | string | Required, user ID|
+| userSig |string | Required, the password with which the user logs in to the Chat console. It is essentially the ciphertext generated by encrypting information such as the UserID.For the detailed generation method, see [Generating UserSig](https://trtc.io/document/34385) |
+| TIMPush | any | Optional, TIMPush plugin instance when uniapp build app packages |
+| pushConfig | object | Optional, TIMPush plugin's config |
+| useUploadPlugin | boolean | Optional, whether to use the upload plugin, the default is false |
+| proxyServer | string | Optional, WebSocket server proxy address |
+| fileUploadProxy | string | Optional, image, video, file upload proxy address |
+| fileDownloadProxy | string | Optional, image, video, file download proxy address|
+| framework | string \| undefined | Required, UI framework type, optional values: vue2、vue3、undefined |
+
+``` javascript
+// Login
+TUILogin.login(options);
+```
+
+``` javascript
+// Logout
+TUILogin.logout();
+```
+
+``` javascript
+// Set the SDK log level.
+// 0: Common level. You are advised to use this level during access as it covers more logs.
+// 1: Release level. You are advised to use this level for key information in a production environment.
+TUILogin.setLogLevel(0); 
+```
+
+``` javascript
+// Get Chat SDK instance
+const { chat } = TUILogin.getContext();
+```
+
+## Documentation
+- [Home page](https://trtc.io/document/50061?platform=web&product=chat)
+- [@tencentcloud/chat-uikit-vue npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue)
+- [Chat SDK](https://trtc.io/document/34309?platform=web&product=chat)
+
+## Contact Us
+Join a Tencent Cloud Chat developer group for Reliable technical support & Product details & Constant exchange of ideas.
+- Telegram group (EN): [join](https://t.me/+1doS9AUBmndhNGNl)
+- WhatsApp group (EN): [join](https://chat.whatsapp.com/Gfbxk7rQBqc8Rz4pzzP27A)
+- Telegram group (ZH): [join](https://t.me/tencent_imsdk)
+- WhatsApp group (ZH): [join](https://chat.whatsapp.com/IVa11ZkVmKTEwSWsAzSyik)
diff --git a/txim/src/TUIKit/adapter-vue.ts b/txim/src/TUIKit/adapter-vue.ts
new file mode 100644
index 00000000..222b95ee
--- /dev/null
+++ b/txim/src/TUIKit/adapter-vue.ts
@@ -0,0 +1,51 @@
+import * as Vue from 'vue';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+
+let vueVersion: number;
+let framework = 'vue2';
+let createVNode = (
+  arg1: any,
+  arg2: any,
+): { component: any; props: any; data: any } => {
+  return {} as { component: any; props: any; data: any };
+};
+let render = (arg1: any, arg2: any) => {
+  return;
+};
+
+try {
+  if (
+    (Vue as any)?.default?.version
+    && (Vue as any)?.default?.version?.startsWith('2.7.')
+  ) {
+    // >= Vue 2.7.0
+    vueVersion = 2.7;
+    TUIGlobal.Vue = (Vue as any)?.getCurrentInstance()?.appContext?.app;
+  } else if (
+    (Vue as any)?.default?.version
+    && (Vue as any)?.default?.version?.startsWith('2.')
+  ) {
+    // < Vue 2.7.0
+    vueVersion = 2;
+    TUIGlobal.Vue = (Vue as any).default;
+  } else {
+    // >= Vue 3.0.0
+    vueVersion = 3;
+    framework = 'vue3';
+    createVNode = (Vue as any)?.createVNode;
+    render = (Vue as any)?.render;
+    TUIGlobal.Vue = (Vue as any)?.getCurrentInstance()?.appContext?.app;
+    // exportedAPIOrigin = Vue;
+  }
+} catch (error: any) {
+  // >= Vue 3.0.0
+  vueVersion = 3;
+  framework = 'vue3';
+  createVNode = (Vue as any)?.createVNode;
+  render = (Vue as any)?.render;
+  TUIGlobal.Vue = (Vue as any)?.getCurrentInstance()?.appContext?.app;
+}
+console.warn(`[adapter-vue]: vue version is ${vueVersion}`);
+export { vueVersion, framework, render, createVNode };
+
+export * from 'vue';
diff --git a/txim/src/TUIKit/assets/icon/add-circle.svg b/txim/src/TUIKit/assets/icon/add-circle.svg
new file mode 100644
index 00000000..aa908005
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/add-circle.svg
@@ -0,0 +1,7 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132; 4">
+<circle id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189; 27" cx="28" cy="28.8535" r="26" stroke="#444444" stroke-width="4"/>
+<rect id="&#231;&#159;&#169;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189; 8" x="15" y="27.8535" width="26" height="4" rx="1" fill="#444444"/>
+<rect id="&#231;&#159;&#169;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189; 8_2" x="26" y="42.8535" width="26" height="4" rx="1" transform="rotate(-90 26 42.8535)" fill="#444444"/>
+</g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/add.svg b/txim/src/TUIKit/assets/icon/add.svg
new file mode 100644
index 00000000..f154f346
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/add.svg
@@ -0,0 +1,12 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity="0.80492">
+        <rect x="0.25" y="7.25" width="13.5" height="0.5" rx="0.25" stroke="#232832"
+            style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;"
+            stroke-width="0.5" />
+        <rect x="6.75" y="14.25" width="13.5" height="0.5" rx="0.25"
+            transform="rotate(-90 6.75 14.25)" stroke="#232832"
+            style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;"
+            stroke-width="0.5" />
+    </g>
+</svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/at.svg b/txim/src/TUIKit/assets/icon/at.svg
new file mode 100644
index 00000000..e26825a4
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/at.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>画板</title>
+    <g id="画板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="at" fill-rule="nonzero">
+            <g id="编组-11">
+                <circle id="蒙版" fill="#006EFF" cx="9" cy="9" r="9"></circle>
+                <path d="M9.66185229,2.28113733 C6.35797576,1.9652543 3.31197412,4.08255376 2.47142946,7.27925624 C1.63088481,10.4759587 3.24414254,13.8075738 6.27970227,15.1439012 C7.13080638,15.5270729 8.05149341,15.7333128 8.98542228,15.75 C10.4722047,15.75 11.9176115,15.2625575 13.0981167,14.3627071 C13.3947741,14.1374908 13.4522747,13.7156728 13.2266384,13.4198867 C13.1178721,13.276076 12.9558003,13.1816064 12.776601,13.1575656 C12.5974017,13.1335248 12.415994,13.1819143 12.2728721,13.2919325 C10.3435542,14.7428224 7.68158841,14.7434418 5.75158944,13.29345 C3.82159048,11.8434583 3.09194171,9.29474777 3.96409619,7.04962006 C4.83625067,4.80449236 7.09854886,3.40780813 9.50627338,3.62802361 C12.3207581,3.95233736 14.4329906,6.34319268 14.3968623,9.16372615 L14.3968623,9.62166747 C14.3952895,9.9342631 14.2661407,10.232791 14.0390751,10.4486938 C13.8120095,10.6645966 13.5065396,10.7793212 13.1928169,10.7665208 C12.550363,10.6962989 12.071833,10.14342 12.0970003,9.50044771 L12.0970003,6.59117338 C12.0970003,6.21924101 11.7941523,5.91773024 11.4205703,5.91773024 C11.0787978,5.91484427 10.78856,6.16623611 10.7441403,6.50362577 C10.1146233,5.91340542 9.28194317,5.58565993 8.41722108,5.58774312 C6.79570933,5.59984582 5.40245718,6.73673734 5.07217831,8.31729266 C4.74189943,9.89784798 5.56412488,11.4936147 7.04624976,12.1485503 C8.52837464,12.8034859 10.2686288,12.3400523 11.2244056,11.0358981 C11.622024,11.6482852 12.275384,12.0499682 13.0034289,12.1296342 C13.7314737,12.2093002 14.4568676,11.9584868 14.9785921,11.4466984 C15.4798496,10.9719157 15.7593539,10.3104139 15.7497223,9.62166747 L15.7497223,9.16372615 C15.7810534,5.6593071 13.1575247,2.69329944 9.66185229,2.28113733 Z M8.43074968,11.0965079 C7.27638137,11.0965079 6.34058097,10.1648397 6.34058097,9.01556866 C6.34058097,7.86629763 7.27638137,6.93462938 8.43074968,6.93462938 C9.58511798,6.93462938 10.5209184,7.86629763 10.5209184,9.01556866 C10.5172055,10.1633051 9.58357657,11.0928115 8.43074968,11.0965079 L8.43074968,11.0965079 Z" id="形状" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/audio.svg b/txim/src/TUIKit/assets/icon/audio.svg
new file mode 100644
index 00000000..deacedee
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/audio.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 57" class="design-iconfont">
+  <g fill="none" fill-rule="evenodd">
+    <path stroke="#444" stroke-width="4" d="M28 2A26 26 0 1 0 28 54A26 26 0 1 0 28 2Z" transform="translate(0 .853448)"/>
+    <path d="M3.22061856,17.5880403 C3.66244636,17.5880403 4.02061856,17.9462125 4.02061856,18.3880403 L4.02061856,18.6926914 C4.02061856,24.8806658 8.93625507,29.8970101 15,29.8970101 C20.967495,29.8970101 25.8230402,25.0386509 25.975681,18.9864559 L25.9793814,18.6926914 L25.9793814,18.3880403 C25.9793814,17.9462125 26.3375536,17.5880403 26.7793814,17.5880403 L29.2,17.5880403 C29.6418278,17.5880403 30,17.9462125 30,18.3880403 L30,18.6926914 C30,27.1466845 23.2842712,34 15,34 C6.82193736,34 0.172455987,27.3212841 0.00330065692,19.0170447 L0,18.6926914 L0,18.3880403 C-1.65130603e-16,17.9462125 0.3581722,17.5880403 0.8,17.5880403 L3.22061856,17.5880403 Z M15.1965847,0 C19.4037284,0 22.8142432,3.57961711 22.8142432,7.9953621 L22.8142432,18.3119584 C22.7872128,22.7074732 19.3846075,26.2557375 15.1965847,26.2557375 L14.8034153,26.2557375 C10.5962716,26.2557375 7.18575682,22.6760398 7.18575682,18.2603754 L7.18575682,7.94377912 C7.21278722,3.54818373 10.6153925,0 14.8034153,0 L15.1965847,0 Z M15.1965847,4.10298992 L14.8034153,4.10298992 C12.9144516,4.10298992 11.325224,5.69669854 11.2126654,7.73818076 L11.2063754,7.94377912 L11.2063754,18.2603754 C11.2063754,20.365303 12.7386643,22.0414789 14.614709,22.1474289 L14.8034153,22.1527476 L15.1965847,22.1527476 C17.0855164,22.1527476 18.6747739,20.5589954 18.7873345,18.5175525 L18.7936246,18.3119584 L18.7936246,7.9953621 C18.7936246,5.89038947 17.2613666,4.21425569 15.385294,4.10830842 L15.1965847,4.10298992 Z" transform="translate(13 12)" fill="#444" fill-rule="nonzero"/>
+  </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/back.svg b/txim/src/TUIKit/assets/icon/back.svg
new file mode 100644
index 00000000..0af55aaf
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/back.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" viewBox="0 0 48 48" version="1.1">
+  <title>ic_back_white</title>
+  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="02.-查看信息-示例好友" transform="translate(-32.000000, -200.000000)">
+      <g id="编组-6" transform="translate(0.000000, 176.000000)">
+        <g id="ic_back_white" transform="translate(32.000000, 24.000000)">
+          <g id="ic_back_black" fill="#444444" fill-rule="nonzero">
+            <path d="M9.51231071,24 L23.5198286,38.7290411 C23.785378,39.0082689 23.7753168,39.4496082 23.4973187,39.7164448 L21.6255915,41.5130226 C21.3466827,41.7807332 20.9035602,41.7716553 20.6358496,41.4927466 C20.6351032,41.491969 20.6343586,41.4911896 20.6336157,41.4904085 L4.45876399,24.4823948 C4.2017544,24.2121467 4.2017544,23.7878533 4.45876399,23.5176052 L20.6336157,6.50959152 C20.900035,6.22944906 21.3431109,6.21832422 21.6232533,6.48474351 C21.6240344,6.48548634 21.6248138,6.48623097 21.6255915,6.48697741 L23.4973187,8.28355524 C23.7753168,8.55039175 23.785378,8.99173114 23.5198286,9.27095893 L9.51231071,24 L9.51231071,24 Z" id="Path-2"></path>
+          </g>
+          <rect id="矩形" x="0" y="0" width="48" height="48"></rect>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/call-video.svg b/txim/src/TUIKit/assets/icon/call-video.svg
new file mode 100644
index 00000000..dc76641b
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/call-video.svg
@@ -0,0 +1,6 @@
+<svg width="33" height="23" viewBox="0 0 33 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M0.5 4.33337C0.5 2.12424 2.29086 0.333374 4.5 0.333374H19.1667C21.3758 0.333374 23.1667 2.12424 23.1667 4.33337V18.3334C23.1667 20.5425 21.3758 22.3334 19.1667 22.3334H4.5C2.29086 22.3334 0.5 20.5425 0.5 18.3334V4.33337ZM4.5 5.45837C4.5 4.90609 4.94771 4.45837 5.5 4.45837H7.5C8.05228 4.45837 8.5 4.90609 8.5 5.45837V7.58337C8.5 8.13566 8.05228 8.58337 7.5 8.58337H5.5C4.94771 8.58337 4.5 8.13566 4.5 7.58337V5.45837ZM33 4.85879C33 3.68986 31.7222 2.97013 30.7225 3.576L25.5742 6.69633L25.3333 6.8423V7.12393V15.43V15.7017L25.5613 15.8495L30.684 19.1709C31.6819 19.8179 33 19.1016 33 17.9122V4.85879ZM31.2408 4.43119C31.5741 4.22923 32 4.46914 32 4.85879V17.9122C32 18.3087 31.5606 18.5475 31.228 18.3318L26.3333 15.1583V7.40555L31.2408 4.43119Z"
+        fill="#333333" />
+</svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/call-voice.svg b/txim/src/TUIKit/assets/icon/call-voice.svg
new file mode 100644
index 00000000..4793fcf5
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/call-voice.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="12" viewBox="0 0 32 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M8.6347 11.9983C9.72788 11.9992 10.6193 11.1223 10.6362 10.0292L10.673 7.64717C11.6292 7.36896 13.5482 6.92739 16.0961 6.92739C18.6443 6.92739 20.5804 7.36912 21.5479 7.64767L21.5621 9.97475C21.5689 11.0721 22.4585 11.9591 23.5559 11.9625L29.9833 11.9825C31.0878 11.9859 31.986 11.0933 31.9895 9.98883L32 6.68064C32 4.65824 30.7746 2.85759 28.9507 2.2C26.1675 1.1964 21.6615 0 16 0C10.3386 0 5.83262 1.1964 3.04934 2.2C2.38985 2.43778 1.80885 2.82489 1.33541 3.31805C0.499655 4.18858 0.000161509 5.38952 0 6.68064L0.00557949 9.99594C0.00743508 11.0985 0.90127 11.9916 2.00385 11.9926L8.6347 11.9983Z"
+        fill="#333333" />
+</svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/call.png b/txim/src/TUIKit/assets/icon/call.png
new file mode 100644
index 00000000..d8d86fe7
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/call.png differ
diff --git a/txim/src/TUIKit/assets/icon/camera-uni.png b/txim/src/TUIKit/assets/icon/camera-uni.png
new file mode 100644
index 00000000..5596ae26
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/camera-uni.png differ
diff --git a/txim/src/TUIKit/assets/icon/cancel.svg b/txim/src/TUIKit/assets/icon/cancel.svg
new file mode 100644
index 00000000..1cf848b4
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/cancel.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
+  <title>清除</title>
+  <g id="页面-2备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="创建群聊" transform="translate(-1243.000000, -413.000000)">
+      <g id="Group-1364" transform="translate(650.000000, 343.000000)">
+        <g id="Group-1363" transform="translate(290.000000, 46.000000)">
+          <g id="Group-1358" transform="translate(0.000000, 24.000000)">
+            <g id="清除" transform="translate(303.000000, 0.000000)">
+              <path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z" id="矩形"></path>
+              <path d="M1,8 C1,11.8659999 4.13400006,15 8,15 C11.8659999,15 15,11.8659999 15,8 C15,4.13400006 11.8659999,1 8,1 L8,1 C4.13400006,1 1,4.13400006 1,8 Z" fill="#999999"></path>
+              <g id="编组" transform="translate(8.000000, 8.000000) rotate(-315.000000) translate(-8.000000, -8.000000) translate(4.000000, 4.000000)" fill="#FFFFFF">
+                <rect id="矩形备份" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " x="1.8189894e-12" y="3.5" width="8" height="1" rx="0.5"></rect>
+                <rect id="矩形备份" transform="translate(4.000000, 4.000000) rotate(-360.000000) translate(-4.000000, -4.000000) " x="0" y="3.5" width="8" height="1" rx="0.5"></rect>
+              </g>
+              <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/check-sm.svg b/txim/src/TUIKit/assets/icon/check-sm.svg
new file mode 100644
index 00000000..69a5e1c8
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/check-sm.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.50001 13C2.91038 13 0 10.0896 0 6.50001C0 2.91038 2.91038 0 6.50001 0C10.0896 0 13 2.91038 13 6.50001C13 10.0896 10.0896 13 6.50001 13ZM5.05051 9.05234C5.31489 9.31679 5.74359 9.31685 6.00805 9.05247C6.00809 9.05242 6.00813 9.05238 6.00817 9.05234L10.1129 4.94758C10.3774 4.68313 10.3774 4.25437 10.1129 3.98992C9.84847 3.72546 9.41971 3.72546 9.15526 3.98992L5.50008 7.58659L3.86425 5.95076C3.5998 5.68631 3.17104 5.68631 2.90659 5.95076C2.64213 6.21521 2.64213 6.64398 2.90659 6.90843L5.05051 9.05235L5.05051 9.05234Z" fill="#999"/>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/close-dark.svg b/txim/src/TUIKit/assets/icon/close-dark.svg
new file mode 100644
index 00000000..cfc8bc05
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/close-dark.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.92904 6L11.815 1.11198C12.0617 0.86524 12.0617 0.458461 11.815 0.211725L11.7884 0.185051C11.5417 -0.0616838 11.1351 -0.0616838 10.8885 0.185051L6.0025 5.07974L1.11651 0.185051C0.869879 -0.0616838 0.463269 -0.0616838 0.216637 0.185051L0.189974 0.211725C-0.0633245 0.458461 -0.0633245 0.86524 0.189974 1.11198L5.07596 6L0.189974 10.888C-0.0566588 11.1348 -0.0566588 11.5415 0.189974 11.7883L0.216637 11.8149C0.463269 12.0617 0.869879 12.0617 1.11651 11.8149L6.0025 6.92692L10.8885 11.8149C11.1351 12.0617 11.5417 12.0617 11.7884 11.8149L11.815 11.7883C12.0617 11.5415 12.0617 11.1348 11.815 10.888L6.92904 6Z" fill="#8F959E" style="fill:#8F959E;fill:color(display-p3 0.5608 0.5843 0.6196);fill-opacity:1;"/>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/close-image.png b/txim/src/TUIKit/assets/icon/close-image.png
new file mode 100644
index 00000000..d6cc4349
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/close-image.png differ
diff --git a/txim/src/TUIKit/assets/icon/convertText_en.svg b/txim/src/TUIKit/assets/icon/convertText_en.svg
new file mode 100644
index 00000000..6a8dd655
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/convertText_en.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_2075_534" fill="white">
+<rect y="6.10352e-05" width="16" height="16" rx="0.5"/>
+</mask>
+<rect y="6.10352e-05" width="16" height="16" rx="0.5" fill="white" stroke="#444444" stroke-width="4" mask="url(#path-1-inside-1_2075_534)"/>
+<path d="M7.276 3.43201H8.872L12.148 12H10.648L9.868 9.85201H6.28L5.5 12H4L7.276 3.43201ZM6.7 8.70001H9.448L8.104 4.94401H8.056L6.7 8.70001Z" fill="#444444"/>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/convertText_zh.svg b/txim/src/TUIKit/assets/icon/convertText_zh.svg
new file mode 100644
index 00000000..ef2c6434
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/convertText_zh.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_1_4" fill="white">
+<rect y="6.10352e-05" width="16" height="16" rx="0.5"/>
+</mask>
+<rect y="6.10352e-05" width="16" height="16" rx="0.5" fill="white" stroke="#444444" stroke-width="4" mask="url(#path-1-inside-1_1_4)"/>
+<path d="M4.51199 5.81608V6.39208H5.74399C6.10399 7.62408 6.74399 8.69608 7.67199 9.60808C6.80799 10.3921 5.70399 10.9601 4.35999 11.3201L4.66399 11.8241C6.02399 11.4321 7.15999 10.8161 8.07199 9.97608C8.93599 10.7201 10.024 11.3361 11.352 11.8321L11.664 11.3521C10.384 10.8801 9.31999 10.2881 8.47199 9.56808C9.25599 8.72008 9.84799 7.65608 10.24 6.39208H11.488V5.81608H8.43199C8.17599 5.26408 7.90399 4.79208 7.59999 4.40808L7.02399 4.61608C7.34399 4.99208 7.60799 5.39208 7.82399 5.81608H4.51199ZM6.31199 6.39208H9.63999C9.30399 7.49608 8.78399 8.43208 8.07199 9.20808C7.23999 8.40808 6.65599 7.47208 6.31199 6.39208Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.31199 5.61608H7.48751C7.31129 5.31249 7.10719 5.02243 6.87168 4.74571L6.68467 4.52597L7.66745 4.17108L7.7568 4.28394C8.0517 4.65645 8.31433 5.10396 8.55891 5.61608H11.688V6.59208H10.3863C10.0114 7.74389 9.46813 8.73403 8.75997 9.54663C9.55979 10.1899 10.5494 10.7279 11.7332 11.1644L11.9682 11.2511L11.4323 12.0756L11.282 12.0194C10.0044 11.5423 8.9389 10.9527 8.07627 10.2412C7.1617 11.0446 6.04107 11.6353 4.71938 12.0163L4.57197 12.0587L4.05139 11.1957L4.30824 11.1269C5.54648 10.7952 6.56828 10.2862 7.38032 9.59789C6.54448 8.73191 5.95109 7.72929 5.59553 6.59208H4.31199V5.61608ZM5.74399 6.39208C6.08545 7.56066 6.67884 8.58529 7.53097 9.46597C7.57721 9.51377 7.62422 9.56114 7.67199 9.60808C7.62257 9.65292 7.57237 9.69705 7.52139 9.74048C6.72554 10.4184 5.73841 10.9245 4.56 11.2645C4.49393 11.2835 4.42726 11.3021 4.35999 11.3201L4.66399 11.8241C6.02399 11.4321 7.15999 10.8161 8.07199 9.97608C8.93599 10.7201 10.024 11.3361 11.352 11.8321L11.664 11.3521C11.5996 11.3283 11.5357 11.3043 11.4724 11.2799C10.3526 10.8491 9.40393 10.3229 8.6263 9.69577C8.57409 9.65366 8.52265 9.6111 8.47199 9.56808C8.51719 9.51918 8.56176 9.46957 8.60569 9.41924C9.32359 8.59671 9.87059 7.5832 10.24 6.39208H11.488V5.81608H8.43199C8.17599 5.26408 7.90399 4.79208 7.59999 4.40808L7.02399 4.61608C7.07008 4.67024 7.115 4.72489 7.15879 4.78004C7.3708 5.04705 7.55614 5.32573 7.71752 5.61608C7.75424 5.68215 7.78972 5.74881 7.82399 5.81608H4.51199V6.39208H5.74399ZM6.31199 6.39208C6.3334 6.45931 6.35574 6.52597 6.37901 6.59208C6.70795 7.52643 7.223 8.34973 7.92962 9.06741C7.97624 9.11476 8.0237 9.16165 8.07199 9.20808C8.07199 9.20808 8.07198 9.20809 8.07199 9.20808C8.11712 9.1589 8.16148 9.10906 8.20507 9.05858C8.80725 8.36128 9.26261 7.54091 9.5765 6.59208C9.59834 6.52604 9.61951 6.45937 9.63999 6.39208H6.31199ZM6.59144 6.59208C6.90978 7.46685 7.39807 8.23985 8.06267 8.91746C8.62858 8.25932 9.06168 7.48673 9.36556 6.59208H6.59144Z" fill="#444444"/>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/d-left-arrow.svg b/txim/src/TUIKit/assets/icon/d-left-arrow.svg
new file mode 100644
index 00000000..24d57594
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/d-left-arrow.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#444444"
+        style="fill:#444444;fill:color(display-p3 0.2667 0.2667 0.2667);fill-opacity:1;"
+        d="M529.408 149.376a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z"></path>
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/d-right-arrow.svg b/txim/src/TUIKit/assets/icon/d-right-arrow.svg
new file mode 100644
index 00000000..6fca7c5c
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/d-right-arrow.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#444444"
+        style="fill:#444444;fill:color(display-p3 0.2667 0.2667 0.2667);fill-opacity:1;"
+        d="M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688zm-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z"></path>
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/del-icon.svg b/txim/src/TUIKit/assets/icon/del-icon.svg
new file mode 100644
index 00000000..b2832c0f
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/del-icon.svg
@@ -0,0 +1,25 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189;">
+        <path id="&#231;&#155;&#180;&#231;&#186;&#191;" d="M2.15682 4.76268H14.0347"
+            stroke="#FF584C"
+            style="stroke:#FF584C;stroke:color(display-p3 1.0000 0.3451 0.2980);stroke-opacity:1;"
+            stroke-linecap="round" />
+        <path id="&#231;&#155;&#180;&#231;&#186;&#191;&#229;&#164;&#135;&#228;&#187;&#189;"
+            d="M5.23978 2.15307H11.1684" stroke="#FF584C"
+            style="stroke:#FF584C;stroke:color(display-p3 1.0000 0.3451 0.2980);stroke-opacity:1;"
+            stroke-linecap="round" />
+        <path id="&#231;&#155;&#180;&#231;&#186;&#191;&#229;&#164;&#135;&#228;&#187;&#189; 2"
+            d="M6.90014 7.32796V10.9714" stroke="#FF584C"
+            style="stroke:#FF584C;stroke:color(display-p3 1.0000 0.3451 0.2980);stroke-opacity:1;"
+            stroke-linecap="round" />
+        <path id="&#231;&#155;&#180;&#231;&#186;&#191;&#229;&#164;&#135;&#228;&#187;&#189; 3"
+            d="M9.58605 7.32796V10.9714" stroke="#FF584C"
+            style="stroke:#FF584C;stroke:color(display-p3 1.0000 0.3451 0.2980);stroke-opacity:1;"
+            stroke-linecap="round" />
+        <path id="&#231;&#159;&#169;&#229;&#189;&#162;"
+            d="M4.14331 4.8316H12.1596V12.9091C12.1596 13.5367 11.6508 14.0454 11.0232 14.0454H5.27968C4.65208 14.0454 4.14331 13.5367 4.14331 12.9091V4.8316Z"
+            stroke="#FF584C"
+            style="stroke:#FF584C;stroke:color(display-p3 1.0000 0.3451 0.2980);stroke-opacity:1;" />
+    </g>
+</svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/double-arrow.svg b/txim/src/TUIKit/assets/icon/double-arrow.svg
new file mode 100644
index 00000000..0496fda4
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/double-arrow.svg
@@ -0,0 +1 @@
+<svg t="1660053550964" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3181" width="200" height="200"><path d="M95.658667 461.354667a71.637333 71.637333 0 0 0 0 101.290666l365.696 365.696a71.637333 71.637333 0 0 0 101.290666 0l365.696-365.696a71.637333 71.637333 0 1 0-101.248-101.290666L512 776.448l-315.093333-315.093333a71.594667 71.594667 0 0 0-101.248 0z" p-id="3182" fill="#bfbfbf"></path><path d="M95.658667 95.658667a71.637333 71.637333 0 0 0 0 101.248l365.696 365.738666a71.594667 71.594667 0 0 0 101.290666 0l365.696-365.738666a71.637333 71.637333 0 0 0-101.248-101.248L512 410.709333 196.906667 95.658667a71.637333 71.637333 0 0 0-101.248 0z" p-id="3183" fill="#bfbfbf"></path></svg>
diff --git a/txim/src/TUIKit/assets/icon/down-icon.svg b/txim/src/TUIKit/assets/icon/down-icon.svg
new file mode 100644
index 00000000..a921e8ea
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/down-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5L7.21955 10L3 5" stroke="#979797"/>
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/downaload-image.png b/txim/src/TUIKit/assets/icon/downaload-image.png
new file mode 100644
index 00000000..498d63af
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/downaload-image.png differ
diff --git a/txim/src/TUIKit/assets/icon/download.svg b/txim/src/TUIKit/assets/icon/download.svg
new file mode 100644
index 00000000..9d49c854
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/download.svg
@@ -0,0 +1,6 @@
+<svg width="11" height="17" viewBox="0 0 11 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M9.13023 14.4401C9.3928 14.4401 9.64461 14.5444 9.83027 14.73C10.0159 14.9157 10.1202 15.1675 10.1202 15.4301C10.1202 15.6926 10.0159 15.9445 9.83027 16.1301C9.64461 16.3158 9.3928 16.4201 9.13023 16.4201H1.87023C1.60767 16.4201 1.35586 16.3158 1.1702 16.1301C0.984536 15.9445 0.880234 15.6926 0.880234 15.4301C0.880234 15.1675 0.984536 14.9157 1.1702 14.73C1.35586 14.5444 1.60767 14.4401 1.87023 14.4401H9.13023ZM5.50023 0.580078C5.7628 0.580078 6.01461 0.684381 6.20027 0.870042C6.38593 1.0557 6.49023 1.30751 6.49023 1.57008V8.59446L8.40027 6.51084C8.57111 6.32101 8.8087 6.20455 9.06339 6.18578C9.31808 6.16702 9.57018 6.2474 9.767 6.41014C9.96381 6.57287 10.0901 6.80537 10.1196 7.05905C10.149 7.31274 10.0792 7.56798 9.92487 7.77144L9.86019 7.84932L6.23019 11.8093C6.05448 12.001 5.81039 12.1159 5.55068 12.1291C5.29096 12.1423 5.03648 12.0528 4.84221 11.8799L4.77027 11.8093L1.14027 7.84932C0.968705 7.66225 0.875545 7.41643 0.880038 7.16264C0.884531 6.90885 0.986334 6.66648 1.16442 6.4856C1.3425 6.30472 1.58325 6.19916 1.83694 6.19071C2.09063 6.18226 2.33788 6.27158 2.52759 6.44022L2.60019 6.51084L4.51023 8.59578V1.57008C4.51023 1.30751 4.61454 1.0557 4.8002 0.870042C4.98586 0.684381 5.23767 0.580078 5.50023 0.580078Z"
+        fill="#444444" />
+</svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/edit.svg b/txim/src/TUIKit/assets/icon/edit.svg
new file mode 100644
index 00000000..2ad307eb
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/edit.svg
@@ -0,0 +1,7 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M10.7968 3.14412C11.0484 2.85173 11.0171 2.40956 10.7268 2.156L9.03106 0.673353C8.89195 0.551204 8.71028 0.489692 8.52606 0.502365C8.34184 0.515037 8.17018 0.600854 8.04888 0.740917L6.9613 2.0021L9.7101 4.40436L10.7968 3.14412ZM6.31117 2.75281L0.00859902 10.0525C-0.0156524 10.0806 0.0169938 11.3428 0.0375142 12.0428C0.0450803 12.2964 0.251683 12.498 0.503888 12.4979C1.26781 12.4979 2.73222 12.4829 2.75647 12.4548L9.05905 5.15695L6.31117 2.75281ZM4.19757 12.5007L5.22919 11.3634L11.4404 11.3747C11.7484 11.3772 11.9975 11.6278 12 11.9377C11.9975 12.2476 11.7484 12.4982 11.4404 12.5007H4.19757Z"
+        fill="#8F959E"
+        style="fill:#8F959E;fill:color(display-p3 0.5608 0.5843 0.6196);fill-opacity:1;" />
+</svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/evalute-dark.svg b/txim/src/TUIKit/assets/icon/evalute-dark.svg
new file mode 100644
index 00000000..b9833be7
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/evalute-dark.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189; 4" opacity="0.795169">
+    <rect id="&#231;&#159;&#169;&#229;&#189;&#162;" x="1.5" y="14.5" width="13" height="13" rx="1.75" transform="rotate(-90 1.5 14.5)" stroke="#D5E0F2" style="stroke:#D5E0F2;"/>
+    <path id="&#230;&#152;&#159;&#229;&#189;&#162;" fill-rule="evenodd" clip-rule="evenodd" d="M8.09307 10.0489C8.0348 10.0183 7.9652 10.0183 7.90693 10.0489L6.00755 11.0475C5.86083 11.1246 5.68934 11 5.71736 10.8367L6.08011 8.72167C6.09124 8.65679 6.06973 8.59059 6.02259 8.54464L4.48596 7.0468C4.36726 6.93109 4.43276 6.7295 4.59681 6.70566L6.72038 6.39709C6.78552 6.38762 6.84183 6.34671 6.87096 6.28768L7.82065 4.3634C7.89402 4.21475 8.10598 4.21475 8.17935 4.3634L9.12904 6.28768C9.15817 6.34671 9.21448 6.38762 9.27962 6.39709L11.4032 6.70566C11.5672 6.7295 11.6327 6.93109 11.514 7.0468L9.97741 8.54464C9.93027 8.59059 9.90876 8.65679 9.91989 8.72167L10.2826 10.8367C10.3107 11 10.1392 11.1246 9.99245 11.0475L8.09307 10.0489Z" stroke="#D5E0F2" style="stroke:#D5E0F2;"/>
+    </g>
+    </svg>
diff --git a/txim/src/TUIKit/assets/icon/evalute-light.svg b/txim/src/TUIKit/assets/icon/evalute-light.svg
new file mode 100644
index 00000000..7cd651b8
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/evalute-light.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189; 4" opacity="0.795169">
+    <rect id="&#231;&#159;&#169;&#229;&#189;&#162;" x="1.5" y="14.5" width="13" height="13" rx="1.75" transform="rotate(-90 1.5 14.5)" stroke="#232832" style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;"/>
+    <path id="&#230;&#152;&#159;&#229;&#189;&#162;" fill-rule="evenodd" clip-rule="evenodd" d="M8.09307 10.0489C8.0348 10.0183 7.9652 10.0183 7.90693 10.0489L6.00755 11.0475C5.86083 11.1246 5.68934 11 5.71736 10.8367L6.08011 8.72167C6.09124 8.65679 6.06973 8.59059 6.02259 8.54464L4.48596 7.0468C4.36726 6.93109 4.43276 6.7295 4.59681 6.70566L6.72038 6.39709C6.78552 6.38762 6.84183 6.34671 6.87096 6.28768L7.82065 4.3634C7.89402 4.21475 8.10598 4.21475 8.17935 4.3634L9.12904 6.28768C9.15817 6.34671 9.21448 6.38762 9.27962 6.39709L11.4032 6.70566C11.5672 6.7295 11.6327 6.93109 11.514 7.0468L9.97741 8.54464C9.93027 8.59059 9.90876 8.65679 9.91989 8.72167L10.2826 10.8367C10.3107 11 10.1392 11.1246 9.99245 11.0475L8.09307 10.0489Z" stroke="#232832" style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;"/>
+    </g>
+    </svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/face-dark.svg b/txim/src/TUIKit/assets/icon/face-dark.svg
new file mode 100644
index 00000000..fcbe3adf
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/face-dark.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity="0.795169">
+    <circle cx="8" cy="8" r="7.5" stroke="#D5E0F2" style="stroke:#D5E0F2;"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 5C5.55228 5 6 5.44772 6 6C6 6.55228 5.55228 7 5 7C4.44772 7 4 6.55228 4 6C4 5.44772 4.44772 5 5 5Z" fill="#D5E0F2" style="fill:#D5E0F2;"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M11 5C11.5523 5 12 5.44772 12 6C12 6.55228 11.5523 7 11 7C10.4477 7 10 6.55228 10 6C10 5.44772 10.4477 5 11 5Z" fill="#D5E0F2" style="fill:#D5E0F2;"/>
+    </g>
+    </svg>
diff --git a/txim/src/TUIKit/assets/icon/face-light.svg b/txim/src/TUIKit/assets/icon/face-light.svg
new file mode 100644
index 00000000..98bf5631
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/face-light.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity="0.795169">
+    <circle cx="8" cy="8" r="7.5" stroke="#232832" style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 5C5.55228 5 6 5.44772 6 6C6 6.55228 5.55228 7 5 7C4.44772 7 4 6.55228 4 6C4 5.44772 4.44772 5 5 5Z" fill="#232832" style="fill:#232832;fill:color(display-p3 0.1360 0.1574 0.1949);fill-opacity:1;"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M11 5C11.5523 5 12 5.44772 12 6C12 6.55228 11.5523 7 11 7C10.4477 7 10 6.55228 10 6C10 5.44772 10.4477 5 11 5Z" fill="#232832" style="fill:#232832;fill:color(display-p3 0.1360 0.1574 0.1949);fill-opacity:1;"/>
+    </g>
+    </svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/face-uni.png b/txim/src/TUIKit/assets/icon/face-uni.png
new file mode 100644
index 00000000..93214877
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/face-uni.png differ
diff --git a/txim/src/TUIKit/assets/icon/file-dark.svg b/txim/src/TUIKit/assets/icon/file-dark.svg
new file mode 100644
index 00000000..c5d07730
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/file-dark.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189; 2"
+        opacity="0.795169">
+        <path id="&#231;&#159;&#169;&#229;&#189;&#162;"
+            d="M0.5 2.25C0.5 1.2835 1.2835 0.5 2.25 0.5H6.54211C6.62301 0.5 6.70271 0.519631 6.77435 0.557208L8.63621 1.53374C8.85115 1.64647 9.09023 1.70536 9.33293 1.70536H13.75C14.7165 1.70536 15.5 2.48886 15.5 3.45536V11.75C15.5 12.7165 14.7165 13.5 13.75 13.5H2.25C1.2835 13.5 0.5 12.7165 0.5 11.75V2.25Z"
+            stroke="#D5E0F2"
+            style="stroke:#D5E0F2;" />
+        <rect id="&#231;&#159;&#169;&#229;&#189;&#162;_2" x="0.5" y="3.5" width="15" height="10"
+            rx="1.75" stroke="#D5E0F2"
+            style="fill-opacity:1;stroke:#D5E0F2;" />
+    </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/file-light.svg b/txim/src/TUIKit/assets/icon/file-light.svg
new file mode 100644
index 00000000..a3acf0c8
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/file-light.svg
@@ -0,0 +1,13 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189; 2"
+        opacity="0.795169">
+        <path id="&#231;&#159;&#169;&#229;&#189;&#162;"
+            d="M0.5 2.25C0.5 1.2835 1.2835 0.5 2.25 0.5H6.54211C6.62301 0.5 6.70271 0.519631 6.77435 0.557208L8.63621 1.53374C8.85115 1.64647 9.09023 1.70536 9.33293 1.70536H13.75C14.7165 1.70536 15.5 2.48886 15.5 3.45536V11.75C15.5 12.7165 14.7165 13.5 13.75 13.5H2.25C1.2835 13.5 0.5 12.7165 0.5 11.75V2.25Z"
+            stroke="#232832"
+            style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;" />
+        <rect id="&#231;&#159;&#169;&#229;&#189;&#162;_2" x="0.5" y="3.5" width="15" height="10"
+            rx="1.75" stroke="#232832"
+            style="fill-opacity:1;stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;" />
+    </g>
+</svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/forward-each.svg b/txim/src/TUIKit/assets/icon/forward-each.svg
new file mode 100644
index 00000000..41599b42
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/forward-each.svg
@@ -0,0 +1,6 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132;">
+<circle id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" cx="40" cy="40" r="38" stroke="#444444" stroke-width="4"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;" d="M22.0393 54.5694C25.1584 49.9724 29.3723 46.8567 34.5689 45.3912L34.5713 45.3906C37.381 44.6019 39.8194 44.5066 41.2294 44.5448L43.1752 44.5974V46.544V53.6663L57.7786 38.3558L43.2517 23.0584V30.4668V32.3974L41.3223 32.4655C34.455 32.7081 29.5325 34.9563 26.3318 38.9079C25.0376 40.5119 24.0004 42.4338 23.2662 44.6457L22.0393 54.5694ZM22.0393 54.5694C21.9839 53.499 21.9695 52.0473 22.1147 50.3923C22.2993 48.3257 22.6869 46.3923 23.2661 44.6461L22.0393 54.5694Z" stroke="#444444" stroke-width="4"/>
+</g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/forward-merge.svg b/txim/src/TUIKit/assets/icon/forward-merge.svg
new file mode 100644
index 00000000..7a8588a2
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/forward-merge.svg
@@ -0,0 +1,8 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132;">
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;" d="M21.7586 47.8445C24.2492 44.3734 27.5657 42.0119 31.6213 40.8833L31.6233 40.8827C33.8865 40.2558 35.8501 40.18 36.9868 40.2104L38.6862 40.2558V41.9558V47.2029L50.0059 35.4911L38.7474 23.7914V29.2632V30.9495L37.0622 31.0082C31.5917 31.1989 27.6967 32.965 25.1719 36.041C24.1502 37.2907 23.3303 38.7892 22.7494 40.5163L21.7586 47.8445ZM21.7586 47.8445C21.733 47.0661 21.7407 46.0942 21.837 45.0106C21.9836 43.392 22.291 41.8801 22.7493 40.5166L21.7586 47.8445Z" stroke="#444444" stroke-width="3.49206"/>
+<path id="&#231;&#159;&#169;&#229;&#189;&#162;" fill-rule="evenodd" clip-rule="evenodd" d="M43.5636 47.6924C43.5636 47.1401 44.0113 46.6924 44.5636 46.6924H59C59.5522 46.6924 60 47.1401 60 47.6924V49.7949C60 50.3472 59.5522 50.7949 59 50.7949H44.5636C44.0113 50.7949 43.5636 50.3472 43.5636 49.7949V47.6924Z" fill="#444444"/>
+<rect id="&#231;&#159;&#169;&#229;&#189;&#162;_2" x="20.1455" y="54.8975" width="39.8545" height="4.10256" rx="1" fill="#444444"/>
+<circle id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" cx="40" cy="40" r="38" stroke="#444444" stroke-width="4"/>
+</g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/icon-arrow-left.svg b/txim/src/TUIKit/assets/icon/icon-arrow-left.svg
new file mode 100644
index 00000000..97d4c986
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/icon-arrow-left.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="32px" height="32.00px" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill="#444444"
+    d="M384 512L731.733333 202.666667c17.066667-14.933333 19.2-42.666667 4.266667-59.733334-14.933333-17.066667-42.666667-19.2-59.733333-4.266666l-384 341.333333c-10.666667 8.533333-14.933333 19.2-14.933334 32s4.266667 23.466667 14.933334 32l384 341.333333c8.533333 6.4 19.2 10.666667 27.733333 10.666667 12.8 0 23.466667-4.266667 32-14.933333 14.933333-17.066667 14.933333-44.8-4.266667-59.733334L384 512z" />
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/icon-c2c.svg b/txim/src/TUIKit/assets/icon/icon-c2c.svg
new file mode 100644
index 00000000..e33ef15d
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/icon-c2c.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43px" height="42px" viewBox="0 0 43 42" version="1.1">
+  <title>编组 3</title>
+  <defs>
+    <path d="M52.1440033,262.168279 C53.7071313,260.607213 56.2397907,260.608885 57.8008563,262.172013 L57.8008563,262.172013 L71.61,275.999572 L301,276 C308.731986,276 315,282.268014 315,290 L315,449 C315,456.731986 308.731986,463 301,463 L29,463 C21.2680135,463 15,456.731986 15,449 L15,290 C15,282.268014 21.2680135,276 29,276 L38.33,275.999572 L52.1402692,262.172013 L52.1402692,262.172013 Z" id="path-1"></path>
+    <filter x="-6.7%" y="-7.9%" width="113.3%" height="119.8%" filterUnits="objectBoundingBox" id="filter-2">
+      <feOffset dx="0" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+      <feGaussianBlur stdDeviation="6" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+      <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.06 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+    </filter>
+  </defs>
+  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="信息页-发起聊天" transform="translate(-47.000000, -311.000000)">
+      <rect fill="#000000" x="0" y="0" width="750" height="1624"></rect>
+      <rect id="矩形" fill="#FFFFFF" x="0" y="0" width="750" height="1624"></rect>
+      <rect id="矩形" fill-opacity="0.1" fill="#FFFFFF" x="0" y="284" width="750" height="144"></rect>
+      <g id="编组-5" transform="translate(32.000000, 298.000000)">
+        <g id="位图" transform="translate(0.000000, 8.000000)">
+          <rect id="矩形" fill="#006EFF" x="0" y="0" width="96" height="96" rx="8"></rect>
+          <path d="M42.4156863,59.7575758 C42.5411765,59.6363636 42.7921569,59.6363636 42.917647,59.7575758 C42.917647,59.7575758 44.172549,60.8484849 47.0588235,60.8484849 C47.6862744,60.8484849 48.1882353,60.8484849 48.8156863,60.7272727 C52.9568628,60.2424242 53.9607843,58.5454545 53.9607843,58.5454545 C54.0862745,58.4242424 54.3372549,58.3030303 54.4627451,58.4242424 C54.5882353,58.5454545 54.7137255,58.6666666 54.7137255,58.9090909 C53.8352941,61.3333333 51.5764706,63.1515151 48.9411764,63.5151515 L48.0627451,63.5151515 C45.6784314,63.5151515 43.4196078,62.3030302 42.1647058,60.3636364 C42.2901961,60 42.2901961,59.8787878 42.4156863,59.7575758 L42.4156863,59.7575758 Z M47.5607843,21.3333333 C58.6039216,21.3333333 67.7647059,28.8484848 70.1490196,38.7878788 L70.2745098,38.7878788 C72.7843137,38.7878788 74.6666667,40.7272727 74.6666667,43.0303031 L74.6666667,51.5151515 C74.6666667,53.3333333 73.5372549,54.7878788 71.9058823,55.3939394 C70.1490196,64.969697 61.4901961,71.2727273 50.6980392,72.1212121 C50.1960784,73.5757576 48.8156863,74.6666667 47.0588235,74.6666667 C44.9254902,74.6666667 43.2941176,73.0909091 43.2941176,71.030303 C43.2941176,68.969697 45.0509803,67.3939394 47.0588235,67.3939394 C48.6901961,67.3939394 50.0705882,68.3636363 50.572549,69.6969697 C59.8588235,68.9696969 67.3882353,63.8787878 69.2705882,55.6363636 C68.1411764,55.3939394 67.1372549,54.7878788 66.5098039,53.8181818 C64.8784314,58.5454545 61.4901961,62.5454545 57.0980392,64.8484849 L56.972549,64.9696969 L56.5960784,64.9696969 C56.4915032,64.8686868 56.474074,64.8518518 56.4711692,64.7789001 L56.4705882,64.7272727 C56.4705882,64.6060606 56.4705882,64.6060606 56.5960784,64.4848485 C60.9882353,60.6060606 61.2392157,56.8484849 60.7372549,51.2727273 C60.3607843,46.4242424 57.3490196,41.8181818 55.9686275,39.7575758 L55.8431372,39.8787879 C55.717647,39.7575757 55.5921569,39.6363636 55.4666667,39.6363636 C55.2156863,39.6363636 55.0901961,39.7575758 54.9647058,40 C54.8392156,41.4545455 54.462745,42.4242424 54.2117647,42.9090909 C53.2078431,44.9696969 51.5764706,46.3030303 49.1921569,46.6666667 C45.427451,47.2727273 41.6627451,48.1212121 38.0235294,48.7272727 C35.6392156,49.0909091 33.6313725,51.6363636 34.1333333,54.3030303 C34.9926684,59.9947299 38.974432,64.1784384 40.2044901,65.1519921 L40.2153333,65.1603333 L40.2039215,65.1515151 C40.1568627,65.1212121 40.0941176,65.0909091 40.0313725,65.0909091 C39.9058824,65.0909091 39.9058823,65.2121212 39.7803922,65.2121212 C39.6549019,65.3333333 39.5294118,65.5757576 39.5294117,65.5757576 C34.6352941,63.5151515 30.745098,59.5151516 28.8627451,54.6666667 C28.1098039,55.6363636 26.8549019,56.2424243 25.6,56.2424242 C23.2156862,56.2424242 21.3333333,54.3030303 21.3333333,52 L21.3333333,43.6363636 C21.3333333,41.5757576 22.8392157,39.8787879 24.8470588,39.5151515 C26.8549019,29.2121212 36.2666666,21.3333333 47.5607843,21.3333333 Z M47.5607843,25.0909091 C38.0235294,25.0909091 29.9921569,31.8787879 28.4862745,40.7272727 C28.6117647,40.8484849 28.8627451,40.969697 28.9882352,41.2121212 C31.8745097,33.939394 39.1529411,28.7272727 47.6862745,28.7272727 C56.2196078,28.7272727 63.4980392,33.939394 66.3843137,41.3333333 L66.7607843,40.6060606 C65.0039216,31.7575757 57.0980392,25.0909091 47.5607843,25.0909091 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
+        </g>
+      </g>
+      <g id="形状结合">
+        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+        <path stroke="#E0E0E0" stroke-width="2" d="M54.8888733,262.000133 C55.625226,261.979907 56.3673182,262.22911 56.9545645,262.748115 L56.9545645,262.748115 L71.1955708,276.999572 L301,277 C304.589851,277 307.839851,278.455075 310.192388,280.807612 C312.544925,283.160149 314,286.410149 314,290 L314,290 L314,449 C314,452.589851 312.544925,455.839851 310.192388,458.192388 C307.839851,460.544925 304.589851,462 301,462 L301,462 L29,462 C25.4101491,462 22.1601491,460.544925 19.8076118,458.192388 C17.4550746,455.839851 16,452.589851 16,449 L16,449 L16,290 C16,286.410149 17.4550746,283.160149 19.8076118,280.807612 C22.1601491,278.455075 25.4101491,277 29.0000458,277 L29.0000458,277 L38.7445991,276.999553 L52.8469102,262.879585 C53.4135391,262.313702 54.1483154,262.020475 54.8888733,262.000133 Z" stroke-linejoin="square" fill="#FFFFFF" fill-rule="evenodd"></path>
+      </g>
+      <g id="编组-3" transform="translate(47.000000, 305.000000)" stroke="#666666" stroke-width="4">
+        <g id="编组-24" transform="translate(6.142857, 11.000000)">
+          <path d="M18.7142857,22 C21.4757095,22 23.9757095,23.1192881 25.7853535,24.9289322 C27.5949976,26.7385763 28.7142857,29.2385763 28.7142857,32 L28.7142857,32 L2,32 L2.0057986,31.6562146 C2.09061716,29.145562 3.10093106,26.8695956 4.70635331,25.1587023 L4.92893219,24.9289322 C6.73857625,23.1192881 9.23857625,22 12,22 L12,22 Z" id="矩形"></path>
+          <ellipse id="椭圆形" cx="15.3571429" cy="9" rx="7.21428571" ry="7"></ellipse>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/icon-close.svg b/txim/src/TUIKit/assets/icon/icon-close.svg
new file mode 100644
index 00000000..f5f3e045
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/icon-close.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M9.30533 7.99984L15.7557 1.54943C16.0813 1.22383 16.0813 0.687032 15.7557 0.361432L15.7205 0.326232C15.3949 0.000631131 14.8581 0.000631131 14.5325 0.326232L8.08212 6.78544L1.63172 0.326232C1.30612 0.000631131 0.769316 0.000631131 0.443715 0.326232L0.408515 0.361432C0.0741147 0.687032 0.0741147 1.22383 0.408515 1.54943L6.85892 7.99984L0.408515 14.4502C0.0829148 14.7759 0.0829148 15.3126 0.408515 15.6383L0.443715 15.6735C0.769316 15.9991 1.30612 15.9991 1.63172 15.6735L8.08212 9.22304L14.5325 15.6735C14.8581 15.9991 15.3949 15.9991 15.7205 15.6735L15.7557 15.6383C16.0813 15.3126 16.0813 14.7759 15.7557 14.4502L9.30533 7.99984Z"
+    fill="#8F959E" />
+</svg>
+  
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/image-dark.svg b/txim/src/TUIKit/assets/icon/image-dark.svg
new file mode 100644
index 00000000..6a122ae7
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/image-dark.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9" opacity="0.795169">
+    <circle id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" cx="5.5" cy="4.5" r="1" stroke="#D5E0F2" style="stroke:#D5E0F2;"/>
+    <rect id="&#231;&#159;&#169;&#229;&#189;&#162;" x="0.5" y="0.5" width="15" height="13" rx="1.75" stroke="#D5E0F2" style="stroke:#D5E0F2;"/>
+    <g id="&#232;&#183;&#175;&#229;&#190;&#132; 2">
+    <mask id="path-3-inside-1_2613_41437" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3 11L5.42403 8.9433C5.50934 8.87092 5.63487 8.87221 5.71867 8.94633L7.88124 10.8592C7.97058 10.9382 8.10606 10.9338 8.19006 10.8491L13 6"/>
+    </mask>
+    <path d="M2.35303 10.2375C1.93191 10.5948 1.88017 11.2258 2.23748 11.647C2.59479 12.0681 3.22584 12.1198 3.64697 11.7625L2.35303 10.2375ZM13.71 6.70423C14.0989 6.31213 14.0963 5.67897 13.7042 5.29003C13.3121 4.90109 12.679 4.90366 12.29 5.29577L13.71 6.70423ZM7.88124 10.8592L7.2187 11.6082L7.88124 10.8592ZM8.19006 10.8491L8.90003 11.5534L8.19006 10.8491ZM5.42403 8.9433L6.071 9.70582L5.42403 8.9433ZM5.71867 8.94633L6.38121 8.19731L5.71867 8.94633ZM3.64697 11.7625L6.071 9.70582L4.77706 8.18078L2.35303 10.2375L3.64697 11.7625ZM5.05613 9.69536L7.2187 11.6082L8.54378 10.1102L6.38121 8.19731L5.05613 9.69536ZM8.90003 11.5534L13.71 6.70423L12.29 5.29577L7.48009 10.1449L8.90003 11.5534ZM7.2187 11.6082C7.7051 12.0385 8.44272 12.0144 8.90003 11.5534L7.48009 10.1449C7.76941 9.85322 8.23606 9.83799 8.54378 10.1102L7.2187 11.6082ZM6.071 9.70582C5.77716 9.95513 5.34477 9.95068 5.05613 9.69536L6.38121 8.19731C5.92497 7.79374 5.24152 7.78671 4.77706 8.18078L6.071 9.70582Z" fill="#D5E0F2" style="fill:#D5E0F2;" mask="url(#path-3-inside-1_2613_41437)"/>
+    </g>
+    </g>
+    </svg>
diff --git a/txim/src/TUIKit/assets/icon/image-light.svg b/txim/src/TUIKit/assets/icon/image-light.svg
new file mode 100644
index 00000000..1088ed6d
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/image-light.svg
@@ -0,0 +1,13 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9" opacity="0.795169">
+    <circle id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" cx="5.5" cy="4.5" r="1" stroke="#232832" style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;"/>
+    <rect id="&#231;&#159;&#169;&#229;&#189;&#162;" x="0.5" y="0.5" width="15" height="13" rx="1.75" stroke="#232832" style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;"/>
+    <g id="&#232;&#183;&#175;&#229;&#190;&#132; 2">
+    <mask id="path-3-inside-1_2613_41437" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3 11L5.42403 8.9433C5.50934 8.87092 5.63487 8.87221 5.71867 8.94633L7.88124 10.8592C7.97058 10.9382 8.10606 10.9338 8.19006 10.8491L13 6"/>
+    </mask>
+    <path d="M2.35303 10.2375C1.93191 10.5948 1.88017 11.2258 2.23748 11.647C2.59479 12.0681 3.22584 12.1198 3.64697 11.7625L2.35303 10.2375ZM13.71 6.70423C14.0989 6.31213 14.0963 5.67897 13.7042 5.29003C13.3121 4.90109 12.679 4.90366 12.29 5.29577L13.71 6.70423ZM7.88124 10.8592L7.2187 11.6082L7.88124 10.8592ZM8.19006 10.8491L8.90003 11.5534L8.19006 10.8491ZM5.42403 8.9433L6.071 9.70582L5.42403 8.9433ZM5.71867 8.94633L6.38121 8.19731L5.71867 8.94633ZM3.64697 11.7625L6.071 9.70582L4.77706 8.18078L2.35303 10.2375L3.64697 11.7625ZM5.05613 9.69536L7.2187 11.6082L8.54378 10.1102L6.38121 8.19731L5.05613 9.69536ZM8.90003 11.5534L13.71 6.70423L12.29 5.29577L7.48009 10.1449L8.90003 11.5534ZM7.2187 11.6082C7.7051 12.0385 8.44272 12.0144 8.90003 11.5534L7.48009 10.1449C7.76941 9.85322 8.23606 9.83799 8.54378 10.1102L7.2187 11.6082ZM6.071 9.70582C5.77716 9.95513 5.34477 9.95068 5.05613 9.69536L6.38121 8.19731C5.92497 7.79374 5.24152 7.78671 4.77706 8.18078L6.071 9.70582Z" fill="#232832" style="fill:#232832;fill:color(display-p3 0.1360 0.1574 0.1949);fill-opacity:1;" mask="url(#path-3-inside-1_2613_41437)"/>
+    </g>
+    </g>
+    </svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/image-uni.png b/txim/src/TUIKit/assets/icon/image-uni.png
new file mode 100644
index 00000000..7d12d843
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/image-uni.png differ
diff --git a/txim/src/TUIKit/assets/icon/input-close.svg b/txim/src/TUIKit/assets/icon/input-close.svg
new file mode 100644
index 00000000..b224ddd4
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/input-close.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14C11.366 14 14.5 10.866 14.5 7C14.5 3.13401 11.366 0 7.5 0C3.63401 0 0.5 3.13401 0.5 7C0.5 10.866 3.63401 14 7.5 14ZM9.98528 3.47487L11.0459 4.53553L8.57107 7.01041L11.0459 9.48528L9.98528 10.5459L7.51041 8.07107L5.03553 10.5459L3.97487 9.48528L6.44975 7.01041L3.97487 4.53553L5.03553 3.47487L7.51041 5.94975L9.98528 3.47487Z" fill="#B2B2B2" style="fill:#B2B2B2;fill:color(display-p3 0.6980 0.6980 0.6980);fill-opacity:1;"/>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/left-arrow.svg b/txim/src/TUIKit/assets/icon/left-arrow.svg
new file mode 100644
index 00000000..2be419f0
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/left-arrow.svg
@@ -0,0 +1,6 @@
+<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M2.1614 7.00004L7.64211 12.2881L6.5614 13.3308L1.0807 8.04275L0 7.00004L1.0807 5.95733L6.5614 0.669312L7.64211 1.71202L2.1614 7.00004Z"
+        fill="#444444"
+        style="fill:#444444;fill:color(display-p3 0.2667 0.2667 0.2667);fill-opacity:1;" />
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/loading.gif b/txim/src/TUIKit/assets/icon/loading.gif
new file mode 100644
index 00000000..be7c806e
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/loading.gif differ
diff --git a/txim/src/TUIKit/assets/icon/loading.png b/txim/src/TUIKit/assets/icon/loading.png
new file mode 100644
index 00000000..6adfca7a
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/loading.png differ
diff --git a/txim/src/TUIKit/assets/icon/minus.svg b/txim/src/TUIKit/assets/icon/minus.svg
new file mode 100644
index 00000000..b92ab01d
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/minus.svg
@@ -0,0 +1,6 @@
+<svg width="36" height="4" viewBox="0 0 36 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M19.499 0.5L36 0.5V3.5H19.499H16.499H0V0.5L16.499 0.5H19.499Z" fill="#BBBBBB"
+        style="fill:#BBBBBB;fill:color(display-p3 0.7333 0.7333 0.7333);fill-opacity:1;" />
+</svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/more-uni.png b/txim/src/TUIKit/assets/icon/more-uni.png
new file mode 100644
index 00000000..8376db26
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/more-uni.png differ
diff --git a/txim/src/TUIKit/assets/icon/more.png b/txim/src/TUIKit/assets/icon/more.png
new file mode 100644
index 00000000..d91bb0a9
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/more.png differ
diff --git a/txim/src/TUIKit/assets/icon/msg-audio.svg b/txim/src/TUIKit/assets/icon/msg-audio.svg
new file mode 100644
index 00000000..f2315fd4
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/msg-audio.svg
@@ -0,0 +1 @@
+<svg width="62" height="78" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_1_7)"><path fill-rule="evenodd" clip-rule="evenodd" d="M28 39.5c0-6.638-2.558-12.755-7-17l5-5.5c5.936 5.662 9 13.637 9 22.5 0 8.604-3.364 16.373-9 22L21 56c4.225-4.22 7-10.048 7-16.5zm18.025 38.502L41 73c8.457-8.442 13.25-20.631 13.25-33.54C54.25 26.147 48.925 13.493 40 5l5.084-5C55.503 9.91 62 23.924 62 39.46c0 15.062-6.108 28.694-15.975 38.542zM7.75 47.23c4.28 0 7.75-3.479 7.75-7.77 0-4.29-3.47-7.77-7.75-7.77-4.28 0-7.75 3.48-7.75 7.77 0 4.291 3.47 7.77 7.75 7.77z" fill="#444"/></g><defs><clipPath id="prefix__clip0_1_7"><path fill="#fff" d="M0 0h62v78H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/msg-copy.svg b/txim/src/TUIKit/assets/icon/msg-copy.svg
new file mode 100644
index 00000000..a5ed5890
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/msg-copy.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1">
+  <title>编组 14</title>
+  <defs>
+    <path d="M467,0 C474.731986,-2.71135202e-14 481,6.2680135 481,14 L481,247 C481,254.731986 474.731986,261 467,261 L353.036,261 L340.862492,273.204941 C339.302377,274.769018 336.769719,274.77223 335.205642,273.212116 C335.203247,273.209727 335.200856,273.207335 335.198467,273.204941 L323.024,261 L14,261 C6.2680135,261 2.72325209e-15,254.731986 0,247 L0,14 C8.29461588e-16,6.2680135 6.2680135,3.19669972e-15 14,0 L467,0 Z" id="path-1"></path>
+    <filter x="-10.1%" y="-14.0%" width="120.2%" height="135.4%" filterUnits="objectBoundingBox" id="filter-2">
+      <feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+      <feGaussianBlur stdDeviation="14.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+      <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.06 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+    </filter>
+  </defs>
+  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="消息状态" transform="translate(-541.000000, -196.000000)">
+      <g id="编组-11" transform="translate(499.000000, 163.000000)">
+        <g id="形状结合">
+          <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+          <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+        <g id="编组-19" transform="translate(8.000000, 1.000000)" fill-rule="nonzero">
+          <g id="编组-17" transform="translate(34.000000, 32.000000)">
+            <g id="编组-14" transform="translate(0.000000, 0.249660)">
+              <rect id="矩形" stroke="#444444" stroke-width="4" x="6" y="11.7115453" width="20.4869565" height="24.5849258" rx="1"></rect>
+              <path d="M36,2.01560374 L36,28.7262543 C36,29.0023967 35.7761424,29.2262543 35.5,29.2262543 L32.4652074,29.2262543 C32.1890657,29.2262525 31.9652084,29.002396 31.9652057,28.7262543 L31.9651258,6.04681123 L31.9651258,6.04681123 L12.2913043,6.04719144 C12.015162,6.04720643 11.7913,5.82335314 11.7912947,5.54721076 C11.7912947,5.54720754 11.7912947,5.54720432 11.7913043,5.5472011 L11.7913043,2.51560374 C11.7913043,2.23946137 12.015162,2.01560374 12.2913043,2.01560374 L36,2.01560374 L36,2.01560374 Z" id="路径-3" fill="#444444"></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/msg-del.svg b/txim/src/TUIKit/assets/icon/msg-del.svg
new file mode 100644
index 00000000..2d01337f
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/msg-del.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1">
+  <title>矩形</title>
+  <defs>
+    <path d="M467,0 C474.731986,-2.71135202e-14 481,6.2680135 481,14 L481,247 C481,254.731986 474.731986,261 467,261 L353.036,261 L340.862492,273.204941 C339.302377,274.769018 336.769719,274.77223 335.205642,273.212116 C335.203247,273.209727 335.200856,273.207335 335.198467,273.204941 L323.024,261 L14,261 C6.2680135,261 2.72325209e-15,254.731986 0,247 L0,14 C8.29461588e-16,6.2680135 6.2680135,3.19669972e-15 14,0 L467,0 Z" id="path-1"></path>
+    <filter x="-10.1%" y="-14.0%" width="120.2%" height="135.4%" filterUnits="objectBoundingBox" id="filter-2">
+      <feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+      <feGaussianBlur stdDeviation="14.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+      <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.06 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+    </filter>
+  </defs>
+  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="消息状态" transform="translate(-779.000000, -326.000000)">
+      <g id="编组-11" transform="translate(499.000000, 163.000000)">
+        <g id="形状结合">
+          <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+          <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+        <g id="编组-13备份" transform="translate(246.000000, 131.583780)">
+          <g id="编组-17" transform="translate(34.000000, 31.416220)">
+            <g id="编组-18" transform="translate(4.000000, 2.847939)">
+              <path d="M27,8.04349833 L27,34.26099 L5,34.26099 L5,8.04349833 L27,8.04349833 Z" id="路径-5" stroke="#444444" stroke-width="4"></path>
+              <rect id="矩形" fill="#444444" x="9.14285714" y="0" width="14" height="4.02899889"></rect>
+              <rect id="矩形" fill="#444444" x="0" y="6.04349833" width="32" height="4.02899889"></rect>
+              <path d="M14,15.1087458 L14,27.1957425 L10,27.1957425 L10,15.1087458 L14,15.1087458 Z M22,15.1087458 L22,27.1957425 L18,27.1957425 L18,15.1087458 L22,15.1087458 Z" id="形状结合" fill="#444444"></path>
+            </g>
+          </g>
+        </g>
+        <g id="编组-19" transform="translate(8.000000, 1.000000)"></g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/msg-forward.svg b/txim/src/TUIKit/assets/icon/msg-forward.svg
new file mode 100644
index 00000000..172bfb5e
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/msg-forward.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1">
+  <title>编组</title>
+  <defs>
+    <path d="M467,0 C474.731986,-2.71135202e-14 481,6.2680135 481,14 L481,247 C481,254.731986 474.731986,261 467,261 L353.036,261 L340.862492,273.204941 C339.302377,274.769018 336.769719,274.77223 335.205642,273.212116 C335.203247,273.209727 335.200856,273.207335 335.198467,273.204941 L323.024,261 L14,261 C6.2680135,261 2.72325209e-15,254.731986 0,247 L0,14 C8.29461588e-16,6.2680135 6.2680135,3.19669972e-15 14,0 L467,0 Z" id="path-1"></path>
+    <filter x="-10.1%" y="-14.0%" width="120.2%" height="135.4%" filterUnits="objectBoundingBox" id="filter-2">
+      <feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+      <feGaussianBlur stdDeviation="14.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+      <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.06 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+    </filter>
+  </defs>
+  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="消息状态" transform="translate(-660.000000, -196.000000)">
+      <g id="编组-11" transform="translate(499.000000, 163.000000)">
+        <g id="形状结合">
+          <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+          <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+        <g id="编组-19" transform="translate(8.000000, 1.000000)" fill-rule="nonzero" stroke="#444444" stroke-width="4">
+          <g id="编组-13" transform="translate(119.000000, 0.000000)">
+            <g id="编组-17" transform="translate(34.000000, 32.000000)">
+              <g id="编组" transform="translate(0.000000, 0.249660)">
+                <path d="M23.1265517,6.28055724 L35.7271185,19.5748426 L23.0577232,32.8831329 L23.0577232,25.1147287 C22.2832234,25.0144246 21.6206186,24.9731478 21.1119625,24.9593482 C19.8469875,24.9250298 17.622079,25.0087745 15.0567889,25.7301995 C10.5501298,27.0035633 6.83444935,29.6335962 4.00998374,33.593477 C3.98525766,32.7188606 3.9976824,31.6416134 4.10230378,30.4471653 C4.26498285,28.6221312 4.60551504,26.8911737 5.12965716,25.3080362 C5.77312173,23.3656805 6.68732788,21.6451437 7.85433875,20.1962611 C11.1297915,16.1439451 16.3122766,14.2888953 23.1265517,14.4503809 L23.1265517,14.4503809 L23.1265517,6.28055724 Z" id="路径"></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/msg-quote.svg b/txim/src/TUIKit/assets/icon/msg-quote.svg
new file mode 100644
index 00000000..d5332710
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/msg-quote.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 41" class="design-iconfont">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M34,2 L34,28.6209709 L20.7153357,28.6209709 L17.9993455,31.4022694 L15.2847485,28.6219998 L2,28.6219998 L2,2 L34,2 Z" transform="translate(2 3.273066)" fill-rule="nonzero" stroke="#444" stroke-width="4"/>
+    <path fill="#444" d="M11 16.12483H15V20.15603749H11z" transform="translate(0 .24966)"/>
+    <path fill="#444" d="M18 16.12483H22V20.15603749H18z" transform="translate(0 .24966)"/>
+    <path fill="#444" d="M25 16.12483H29V20.15603749H25z" transform="translate(0 .24966)"/>
+  </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/msg-revoke.svg b/txim/src/TUIKit/assets/icon/msg-revoke.svg
new file mode 100644
index 00000000..d3494f7f
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/msg-revoke.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1">
+  <title>矩形</title>
+  <defs>
+    <path d="M467,0 C474.731986,-2.71135202e-14 481,6.2680135 481,14 L481,247 C481,254.731986 474.731986,261 467,261 L353.036,261 L340.862492,273.204941 C339.302377,274.769018 336.769719,274.77223 335.205642,273.212116 C335.203247,273.209727 335.200856,273.207335 335.198467,273.204941 L323.024,261 L14,261 C6.2680135,261 2.72325209e-15,254.731986 0,247 L0,14 C8.29461588e-16,6.2680135 6.2680135,3.19669972e-15 14,0 L467,0 Z" id="path-1"></path>
+    <filter x="-10.1%" y="-14.0%" width="120.2%" height="135.4%" filterUnits="objectBoundingBox" id="filter-2">
+      <feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+      <feGaussianBlur stdDeviation="14.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+      <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.06 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+    </filter>
+  </defs>
+  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="消息状态" transform="translate(-660.000000, -327.000000)">
+      <g id="编组-11" transform="translate(499.000000, 163.000000)">
+        <g id="形状结合">
+          <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+          <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+        <g id="编组-19" transform="translate(8.000000, 1.000000)" fill="#444444" fill-rule="nonzero">
+          <g id="编组-13" transform="translate(119.000000, 131.000000)">
+            <g id="编组-21" transform="translate(34.000000, 32.000000)">
+              <path d="M9.94902685,18.825399 C9.94902685,19.1015414 9.72516923,19.325399 9.44902685,19.325399 C9.31552791,19.325399 9.18757266,19.2720125 9.09366105,19.1771306 L2.13687841,12.1484693 C1.94403281,11.9536312 1.94403281,11.6398441 2.13687841,11.445006 L9.09366105,4.41634471 C9.28791708,4.2200816 9.60449539,4.21845454 9.8007585,4.41271056 C9.89564042,4.50662217 9.94902685,4.63457741 9.94902685,4.76807636 L9.94824421,9.73507632 L22.6994692,9.73558854 C31.0812313,9.73558854 38,15.6504194 38,23.1330579 C38,30.5145797 31.2669616,36.3703807 23.0384554,36.5272976 L22.6994692,36.5305273 L10.4390092,36.5305273 C9.88672441,36.5305273 9.43900916,36.082812 9.43900916,35.5305273 L9.43900916,33.408229 C9.43900916,32.8559443 9.88672441,32.408229 10.4390092,32.408229 L22.6994692,32.408229 C28.9648068,32.408229 33.9198585,28.1721729 33.9198585,23.1330579 C33.9198585,18.1779281 29.1285988,13.9993117 23.0116273,13.861401 L22.6994692,13.8578868 L9.94824421,13.8570763 L9.94902685,18.825399 Z" id="路径"></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/multiple-select.svg b/txim/src/TUIKit/assets/icon/multiple-select.svg
new file mode 100644
index 00000000..d4da3c57
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/multiple-select.svg
@@ -0,0 +1,5 @@
+<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132;">
+<path id="&#229;&#189;&#162;&#231;&#138;&#182;&#231;&#187;&#147;&#229;&#144;&#136;" fill-rule="evenodd" clip-rule="evenodd" d="M10.5826 0.46165C10.2025 0.0807196 9.58916 0.0688692 9.19464 0.434835L5.63779 3.73431L4.20962 2.56125C3.79371 2.21963 3.18202 2.26848 2.8256 2.67178L1.19197 4.52024C0.816905 4.94463 0.868823 5.59552 1.30642 5.95509L5.1484 9.11198C5.5349 9.42956 6.09662 9.41269 6.46335 9.07247L12.304 3.65419C12.7194 3.26888 12.732 2.61581 12.3318 2.21475L10.5826 0.46165ZM9.16745 14.027C9.56196 13.661 10.1753 13.6728 10.5554 14.0538L12.3046 15.8069C12.7048 16.2079 12.6922 16.861 12.2768 17.2463L6.43616 22.6646C6.06942 23.0048 5.5077 23.0217 5.1212 22.7041L1.27923 19.5472C0.841626 19.1876 0.789707 18.5368 1.16478 18.1124L2.7984 16.2639C3.15483 15.8606 3.76652 15.8118 4.18243 16.1534L5.61059 17.3264L9.16745 14.027ZM14.1637 16.0705C14.1637 15.7944 14.3876 15.5705 14.6637 15.5705H36.4728C36.7489 15.5705 36.9728 15.7944 36.9728 16.0705V19.4692C36.9728 19.7453 36.7489 19.9692 36.4728 19.9692H14.6637C14.3876 19.9692 14.1637 19.7453 14.1637 19.4692V16.0705ZM10.5554 27.6271C10.1753 27.2461 9.56196 27.2343 9.16745 27.6002L5.61059 30.8997L4.18243 29.7267C3.76652 29.385 3.15483 29.4339 2.7984 29.8372L1.16478 31.6857C0.789707 32.11 0.841626 32.7609 1.27923 33.1205L5.1212 36.2774C5.5077 36.595 6.06942 36.5781 6.43616 36.2379L12.2768 30.8196C12.6922 30.4343 12.7048 29.7812 12.3046 29.3802L10.5554 27.6271ZM14.6637 29.1438C14.3876 29.1438 14.1637 29.3677 14.1637 29.6438V33.0424C14.1637 33.3186 14.3876 33.5424 14.6637 33.5424H36.4728C36.7489 33.5424 36.9728 33.3186 36.9728 33.0424V29.6438C36.9728 29.3677 36.7489 29.1438 36.4728 29.1438H14.6637ZM14.6909 1.97839C14.4148 1.97839 14.1909 2.20225 14.1909 2.47839V5.87703C14.1909 6.15318 14.4148 6.37703 14.6909 6.37703H36.5C36.7761 6.37703 37 6.15318 37 5.87703V2.47839C37 2.20225 36.7761 1.97839 36.5 1.97839H14.6909Z" fill="#444444"/>
+</g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/mute.svg b/txim/src/TUIKit/assets/icon/mute.svg
new file mode 100644
index 00000000..59a5f074
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/mute.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="design-iconfont">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M4.13744611,6.61713753 L20.551,23 L0,23 L0,21 L3,21 L3,11 C3,9.40883362 3.41291862,7.91410954 4.13744611,6.61713753 Z M21.481,21 L24,21 L24,23 L23.485,23 L21.481,21 Z M12,2 C16.9705627,2 21,6.02943725 21,11 L21,20.52 L5.36684476,4.91705738 C7.01203082,3.12402075 9.37475086,2 12,2 Z" fill="#CCC" transform="translate(4 3)"/>
+    <path fill="#CCC" fill-rule="nonzero" d="M13 0L13 4 11 4 11 0z" transform="translate(4 3)"/>
+    <path stroke="#CCC" d="M8.5 24.5H15.5V25.5H8.5z" transform="translate(4 3)"/>
+    <path stroke="#CCC" stroke-width="2" transform="matrix(-1 0 0 1 31.089472 3)" d="M25.4499982 0.1546001L1.63947409 23.8855564"/>
+  </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/plus.svg b/txim/src/TUIKit/assets/icon/plus.svg
new file mode 100644
index 00000000..2ccfad2a
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/plus.svg
@@ -0,0 +1,7 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M21.5 0L21.499 18.5H40V21.5H21.499L21.5 40H18.5L18.499 21.5H0V18.5H18.499L18.5 0H21.5Z"
+        fill="#BBBBBB"
+        style="fill:#BBBBBB;fill:color(display-p3 0.7333 0.7333 0.7333);fill-opacity:1;" />
+</svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/radio.svg b/txim/src/TUIKit/assets/icon/radio.svg
new file mode 100644
index 00000000..bb4f31b8
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/radio.svg
@@ -0,0 +1,6 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132;">
+<circle id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" cx="22" cy="22" r="22" fill="#147AFF"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;" d="M29.8629 13.8987C30.2582 13.5129 30.8913 13.5206 31.277 13.9159L33.035 15.7172C33.4207 16.1124 33.4131 16.7454 33.0179 17.1312L19.0302 30.7857C18.6448 31.162 18.0305 31.1653 17.641 30.7933L10.9897 24.4405C10.5904 24.0591 10.5758 23.4262 10.9571 23.0268L12.6958 21.2055C13.0772 20.8061 13.7102 20.7914 14.1096 21.1727L18.3055 25.1785L29.8629 13.8987Z" fill="white"/>
+</g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/right-arrow.svg b/txim/src/TUIKit/assets/icon/right-arrow.svg
new file mode 100644
index 00000000..3dc5700b
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/right-arrow.svg
@@ -0,0 +1,14 @@
+<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2200_23553)">
+        <path
+            d="M6.48068 6.83073L0.999983 12.1188L2.08069 13.1615L7.56139 7.87344L8.64209 6.83073L7.56139 5.78802L2.08069 0.5L0.999983 1.54271L6.48068 6.83073Z"
+            fill="#444444"
+            style="fill:#444444;fill:color(display-p3 0.2667 0.2667 0.2667);fill-opacity:1;" />
+    </g>
+    <defs>
+        <clipPath id="clip0_2200_23553">
+            <rect width="8" height="13" fill="white" style="fill:white;fill:white;fill-opacity:1;"
+                transform="matrix(-1 0 0 1 8.64209 0.5)" />
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/right-icon.svg b/txim/src/TUIKit/assets/icon/right-icon.svg
new file mode 100644
index 00000000..c90c2fd1
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/right-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 3L10 7.78045L5 12" stroke="#979797"/>
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/rotate-left.svg b/txim/src/TUIKit/assets/icon/rotate-left.svg
new file mode 100644
index 00000000..1a3c875a
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/rotate-left.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill="#444444"
+    d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H188V494h440v326zM819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-0.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7 0.4 12.6-6.1v-63.9c12.9 0.1 25.9 0.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-0.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3z" />
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/rotate-right.svg b/txim/src/TUIKit/assets/icon/rotate-right.svg
new file mode 100644
index 00000000..7ab04abd
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/rotate-right.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill="#444444"
+    d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-0.4-12.6 6.1l-0.2 64c-118.6 0.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-0.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8zM880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H396V494h440v326z" />
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/search-default.svg b/txim/src/TUIKit/assets/icon/search-default.svg
new file mode 100644
index 00000000..16607cba
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/search-default.svg
@@ -0,0 +1,52 @@
+<svg width="88" height="75" viewBox="0 0 88 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0324 36.6614L35.4424 35.001L50.4526 36.6614C50.4526 36.6614 61.6001 37.9124 65.8807 45.5045C68.7348 50.5664 73.4912 61.1246 76.3444 67.5996C77.481 70.1789 75.5849 73.0524 72.7663 73.0524H4.77873C2.30474 73.0524 0.447615 70.7916 0.9281 68.3647L4.43639 50.6447C4.43639 50.6447 5.43423 45.2709 8.58023 41.2975C11.7262 37.3241 19.0324 36.6614 19.0324 36.6614Z" fill="url(#paint0_linear_2509_4462)" style=""/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.4653 35.914V25.3516H41.7997V35.914C41.7997 38.7814 39.0391 41.1059 35.6325 41.1059C32.2259 41.1059 29.4653 38.7814 29.4653 35.914Z" fill="#FEDFC7" style="fill:#FEDFC7;fill:color(display-p3 0.9961 0.8745 0.7804);fill-opacity:1;"/>
+<mask id="mask0_2509_4462" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="29" y="23" width="13" height="17">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.4653 33.8515V23.2891H41.7997V33.8515C41.7997 36.7189 39.0391 39.0434 35.6325 39.0434C32.2259 39.0434 29.4653 36.7189 29.4653 33.8515Z" fill="white" style="fill:white;fill:white;fill-opacity:1;"/>
+</mask>
+<g mask="url(#mask0_2509_4462)">
+<ellipse cx="36.872" cy="28.4332" rx="7.40667" ry="5.82872" fill="#FAB691" style="fill:#FAB691;fill:color(display-p3 0.9803 0.7141 0.5692);fill-opacity:1;"/>
+</g>
+<ellipse cx="2.55302" cy="2.69371" rx="2.55302" ry="2.69371" transform="matrix(-1 0 0 1 48.8064 17.5176)" fill="url(#paint1_linear_2509_4462)" style=""/>
+<ellipse cx="2.55302" cy="2.69371" rx="2.55302" ry="2.69371" transform="matrix(-1 0 0 1 48.8064 17.5176)" fill="url(#paint2_linear_2509_4462)" style=""/>
+<ellipse cx="2.32093" cy="2.69371" rx="2.32093" ry="2.69371" transform="matrix(-1 0 0 1 29.3105 17.5176)" fill="url(#paint3_linear_2509_4462)" style=""/>
+<ellipse cx="2.32093" cy="2.69371" rx="2.32093" ry="2.69371" transform="matrix(-1 0 0 1 29.3105 17.5176)" fill="url(#paint4_linear_2509_4462)" style=""/>
+<path d="M42.029 5.47949H31.4459C29.2411 5.47949 27.4538 7.20216 27.4538 9.32719V23.8464C27.4538 28.7882 31.6103 32.7944 36.7375 32.7944C41.8648 32.7944 46.0212 28.7882 46.0212 23.8464V9.32654C46.0209 7.2017 44.2336 5.4794 42.029 5.47949Z" fill="#FEDFC7" style="fill:#FEDFC7;fill:color(display-p3 0.9961 0.8745 0.7804);fill-opacity:1;"/>
+<path d="M47.8779 19.3691C47.8779 19.3691 46.9071 19.4131 46.5907 20.8378" stroke="#FDB99E" style="stroke:#FDB99E;stroke:color(display-p3 0.9922 0.7255 0.6196);stroke-opacity:1;" stroke-width="0.326414" stroke-linecap="round"/>
+<path d="M25.7024 19.3691C25.7024 19.3691 26.6733 19.4131 26.9897 20.8378" stroke="#FDB99E" style="stroke:#FDB99E;stroke:color(display-p3 0.9922 0.7255 0.6196);stroke-opacity:1;" stroke-width="0.326414" stroke-linecap="round"/>
+<path d="M49.3373 10.9928C49.68 8.25295 48.4022 6.54056 47.1459 6.88305C46.3236 2.49922 43.6055 1.17497 42.3492 1.06082C42.3492 1.17496 42.4863 1.67724 43.0345 2.77319C42.0066 1.74573 36.5247 -0.994149 31.0428 0.375792C25.5608 1.74573 24.533 4.8281 25.5609 7.56798C23.1625 7.56798 26.2461 17.8425 27.274 20.5824C27.9592 19.8975 27.4097 13.6994 27.7523 11.6445C33.5768 14.0419 43.1702 13.0144 45.5685 11.987C45.5685 13.3569 45.3401 18.2659 45.9111 20.8916C46.4822 18.9509 48.8838 14.6201 49.3373 10.9928Z" fill="#D9D9D9" style="fill:#D9D9D9;fill:color(display-p3 0.8510 0.8510 0.8510);fill-opacity:1;"/>
+<path d="M49.3373 10.9928C49.68 8.25295 48.4022 6.54056 47.1459 6.88305C46.3236 2.49922 43.6055 1.17497 42.3492 1.06082C42.3492 1.17496 42.4863 1.67724 43.0345 2.77319C42.0066 1.74573 36.5247 -0.994149 31.0428 0.375792C25.5608 1.74573 24.533 4.8281 25.5609 7.56798C23.1625 7.56798 26.2461 17.8425 27.274 20.5824C27.9592 19.8975 27.4097 13.6994 27.7523 11.6445C33.5768 14.0419 43.1702 13.0144 45.5685 11.987C45.5685 13.3569 45.3401 18.2659 45.9111 20.8916C46.4822 18.9509 48.8838 14.6201 49.3373 10.9928Z" fill="url(#paint5_linear_2509_4462)" style=""/>
+<path d="M50.9863 23.5074C51.3359 28.4883 47.5797 32.808 42.596 33.1552C37.6124 33.5024 33.2893 29.7455 32.9398 24.7647C32.5902 19.7838 36.3463 15.4641 41.33 15.1169C46.3137 14.7697 50.6367 18.5265 50.9863 23.5074Z" fill="#F8F8F8" stroke="#91BFFF" style="fill:#F8F8F8;fill:color(display-p3 0.9725 0.9725 0.9725);fill-opacity:1;stroke:#91BFFF;stroke:color(display-p3 0.5667 0.7492 1.0000);stroke-opacity:1;" stroke-width="1.47201"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.4159 29.3082L60.2204 38.4678C61.3743 39.3631 61.5388 41.0436 60.5804 42.1456C59.6221 43.2477 57.9344 43.3187 56.8868 42.3011L46.17 31.8909L48.4159 29.3082Z" fill="#90BFFF" style="fill:#90BFFF;fill:color(display-p3 0.5647 0.7490 1.0000);fill-opacity:1;"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.9297 72.6402C75.5063 73.9444 71.6515 72.4448 70.0094 69.1701L56.2831 41.7965L55.8309 42.2766C55.1445 43.0053 53.9303 42.7503 53.5952 41.8069L53.2897 41.8711C52.2475 42.09 51.2679 41.2948 51.2679 40.2299L50.6719 40.385C49.6992 40.6381 48.7617 39.8706 48.8178 38.867C47.3895 38.867 46.4368 37.3935 47.0229 36.0911L48.3905 33.0522C48.543 32.7133 48.7495 32.4014 49.0019 32.1287L50.3751 30.6449C51.2109 29.7419 52.3856 29.2285 53.6161 29.2285H56.5173C57.362 29.2285 58.1473 29.6631 58.5959 30.3788L63.0473 37.4796L81.9971 61.5573C84.9746 65.3406 83.4286 70.9262 78.9297 72.6402Z" fill="#FEDFC7" style="fill:#FEDFC7;fill:color(display-p3 0.9961 0.8745 0.7804);fill-opacity:1;"/>
+<path d="M52.1278 33.0801L51.0467 34.0849C49.6822 35.3531 48.8459 37.089 48.7043 38.9465V38.9465" stroke="#F6B997" style="stroke:#F6B997;stroke:color(display-p3 0.9647 0.7255 0.5922);stroke-opacity:1;" stroke-width="0.490671" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M54.084 35.5244L53.8408 35.6962C52.2892 36.7921 51.3035 38.5197 51.1497 40.4131V40.4131" stroke="#F6B997" style="stroke:#F6B997;stroke:color(display-p3 0.9647 0.7255 0.5922);stroke-opacity:1;" stroke-width="0.490671" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M56.0402 37.4795L55.7883 37.6882C54.5438 38.719 53.7558 40.1989 53.5952 41.8069V41.8069" stroke="#F6B997" style="stroke:#F6B997;stroke:color(display-p3 0.9647 0.7255 0.5922);stroke-opacity:1;" stroke-width="0.490671" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58.9712 38.5423L59.3749 38.8928C60.4657 39.8399 60.4214 41.5464 59.283 42.4355L59.0719 42.6003C58.0981 43.3608 56.6781 43.0987 56.0401 42.0407L56.1418 41.7726C56.4194 41.0412 56.8225 40.3637 57.3328 39.7706C57.7399 39.2975 58.237 38.91 58.7951 38.6305L58.9712 38.5423Z" fill="#91BFFF" style="fill:#91BFFF;fill:color(display-p3 0.5667 0.7492 1.0000);fill-opacity:1;"/>
+<defs>
+<linearGradient id="paint0_linear_2509_4462" x1="39.3606" y1="35.001" x2="39.3606" y2="73.0524" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B9D8FF" style="stop-color:#B9D8FF;stop-color:color(display-p3 0.7255 0.8471 1.0000);stop-opacity:1;"/>
+<stop offset="1" stop-color="#B9D8FF" stop-opacity="0.31" style="stop-color:#B9D8FF;stop-color:color(display-p3 0.7255 0.8471 1.0000);stop-opacity:0.31;"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2509_4462" x1="0" y1="5.38742" x2="5.10603" y2="5.38742" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEDFC7" style="stop-color:#FEDFC7;stop-color:color(display-p3 0.9961 0.8745 0.7804);stop-opacity:1;"/>
+<stop offset="0.4456" stop-color="#FEC5A6" style="stop-color:#FEC5A6;stop-color:color(display-p3 0.9961 0.7725 0.6510);stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2509_4462" x1="5.91369" y1="-1.22972" x2="-1.55757" y2="-2.76772" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEDFC7" style="stop-color:#FEDFC7;stop-color:color(display-p3 0.9961 0.8745 0.7804);stop-opacity:1;"/>
+<stop offset="1" stop-color="#FEC5A6" style="stop-color:#FEC5A6;stop-color:color(display-p3 0.9961 0.7725 0.6510);stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2509_4462" x1="0" y1="5.38742" x2="4.64185" y2="5.38742" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEDFC7" style="stop-color:#FEDFC7;stop-color:color(display-p3 0.9961 0.8745 0.7804);stop-opacity:1;"/>
+<stop offset="0.4456" stop-color="#FEC5A6" style="stop-color:#FEC5A6;stop-color:color(display-p3 0.9961 0.7725 0.6510);stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2509_4462" x1="5.37609" y1="-1.22972" x2="-1.46424" y2="-2.50983" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEDFC7" style="stop-color:#FEDFC7;stop-color:color(display-p3 0.9961 0.8745 0.7804);stop-opacity:1;"/>
+<stop offset="1" stop-color="#FEC5A6" style="stop-color:#FEC5A6;stop-color:color(display-p3 0.9961 0.7725 0.6510);stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2509_4462" x1="28.4809" y1="1.87559" x2="28.4809" y2="16.2776" gradientUnits="userSpaceOnUse">
+<stop stop-color="#757575" style="stop-color:#757575;stop-color:color(display-p3 0.4583 0.4583 0.4583);stop-opacity:1;"/>
+<stop offset="1" stop-color="#626262" style="stop-color:#626262;stop-color:color(display-p3 0.3833 0.3833 0.3833);stop-opacity:1;"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/search-more.svg b/txim/src/TUIKit/assets/icon/search-more.svg
new file mode 100644
index 00000000..af3e11ce
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/search-more.svg
@@ -0,0 +1,7 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 4.5C0.5 2.29086 2.29086 0.5 4.5 0.5L20.5 0.5C22.7091 0.5 24.5 2.29086 24.5 4.5V20.5C24.5 22.7091 22.7091 24.5 20.5 24.5H4.5C2.29086 24.5 0.5 22.7091 0.5 20.5V4.5Z" fill="#F4F5F9" style="fill:#F4F5F9;fill:color(display-p3 0.9569 0.9608 0.9765);fill-opacity:1;"/>
+<g opacity="0.80492">
+<rect x="5.75" y="12.25" width="13.5" height="0.5" rx="0.25" stroke="#232832" style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;" stroke-width="0.5"/>
+<rect x="12.25" y="19.25" width="13.5" height="0.5" rx="0.25" transform="rotate(-90 12.25 19.25)" stroke="#232832" style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;" stroke-width="0.5"/>
+</g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/search.svg b/txim/src/TUIKit/assets/icon/search.svg
new file mode 100644
index 00000000..d64b94f7
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/search.svg
@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.13523 8.8285C7.32854 9.49429 6.29431 9.89425 5.16667 9.89425C2.58933 9.89425 0.5 7.80491 0.5 5.22758C0.5 2.65025 2.58933 0.560913 5.16667 0.560913C7.744 0.560913 9.83333 2.65025 9.83333 5.22758C9.83333 6.38924 9.40889 7.45176 8.70662 8.26852L11.2138 10.7757C11.344 10.9059 11.344 11.1169 11.2138 11.2471L11.1195 11.3414C10.9894 11.4716 10.7783 11.4716 10.6481 11.3414L8.13523 8.8285ZM9.03333 5.22759C9.03333 7.36309 7.30217 9.09425 5.16666 9.09425C3.03116 9.09425 1.3 7.36309 1.3 5.22759C1.3 3.09208 3.03116 1.36092 5.16666 1.36092C7.30217 1.36092 9.03333 3.09208 9.03333 5.22759Z" fill="black" style="fill:black;fill:black;fill-opacity:1;"/>
+</g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/selected.svg b/txim/src/TUIKit/assets/icon/selected.svg
new file mode 100644
index 00000000..7fd5bd31
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/selected.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
+  <title>编组 14</title>
+  <defs>
+    <filter x="-10.6%" y="-5.4%" width="121.2%" height="110.9%" filterUnits="objectBoundingBox" id="filter-1">
+      <feOffset dx="0" dy="7" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+      <feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+      <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+        <feMergeNode in="SourceGraphic"></feMergeNode>
+      </feMerge>
+    </filter>
+  </defs>
+  <g id="new" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="自定义消息" transform="translate(-458.000000, -318.000000)">
+      <g id="编组-32" filter="url(#filter-1)" transform="translate(44.000000, 60.000000)">
+        <g id="编组-24" transform="translate(30.000000, 250.000000)">
+          <g id="编组-14" transform="translate(384.000000, 8.000000)">
+            <circle id="椭圆形" fill="#006EFF" fill-rule="nonzero" cx="8" cy="8" r="8"></circle>
+            <polyline id="路径-4" stroke="#FFFFFF" stroke-width="2" transform="translate(8.042641, 6.242641) rotate(-315.000000) translate(-8.042641, -6.242641) " points="6.04264069 10.2426407 10.0426407 10.2426407 10.0426407 2.24264069"></polyline>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/setting.svg b/txim/src/TUIKit/assets/icon/setting.svg
new file mode 100644
index 00000000..ebda9dc3
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/setting.svg
@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 14" opacity="0.802743">
+        <path id="&#229;&#189;&#162;&#231;&#138;&#182;&#231;&#187;&#147;&#229;&#144;&#136;"
+            fill-rule="evenodd" clip-rule="evenodd"
+            d="M6 10.5C6 11.3284 5.32843 12 4.5 12C3.67157 12 3 11.3284 3 10.5C3 9.67157 3.67157 9 4.5 9C5.32843 9 6 9.67157 6 10.5ZM12 10.5C12 11.3284 11.3284 12 10.5 12C9.67157 12 9 11.3284 9 10.5C9 9.67157 9.67157 9 10.5 9C11.3284 9 12 9.67157 12 10.5ZM16.5 12C17.3284 12 18 11.3284 18 10.5C18 9.67157 17.3284 9 16.5 9C15.6716 9 15 9.67157 15 10.5C15 11.3284 15.6716 12 16.5 12Z"
+            fill="#232832" />
+    </g>
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/star-light.png b/txim/src/TUIKit/assets/icon/star-light.png
new file mode 100644
index 00000000..77c9e32b
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/star-light.png differ
diff --git a/txim/src/TUIKit/assets/icon/star.png b/txim/src/TUIKit/assets/icon/star.png
new file mode 100644
index 00000000..821c83ff
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/star.png differ
diff --git a/txim/src/TUIKit/assets/icon/start-group.svg b/txim/src/TUIKit/assets/icon/start-group.svg
new file mode 100644
index 00000000..6fd02f85
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/start-group.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <circle r="2.61111" transform="matrix(1 0 0 -1 8.55545 3.88889)" stroke="#4C5059"></circle>
+  <circle r="2.61111" transform="matrix(1 0 0 -1 4.66678 3.88889)" fill="#F4F5F9" stroke="#4C5059"></circle>
+  <path d="M5.16675 11.7778C5.16675 9.84484 6.73375 8.27783 8.66675 8.27783H10.0001C11.9331 8.27783 13.5001 9.84484 13.5001 11.7778V12.7223H5.16675V11.7778Z" stroke="#4C5059"></path>
+  <path d="M0.5 11.7778C0.5 9.84484 2.067 8.27783 4 8.27783H5.33333C7.26633 8.27783 8.83333 9.84484 8.83333 11.7778V12.7223H0.5V11.7778Z" fill="#F4F5F9" stroke="#4C5059"></path>
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/translate.svg b/txim/src/TUIKit/assets/icon/translate.svg
new file mode 100644
index 00000000..8b7ae249
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/translate.svg
@@ -0,0 +1,12 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_313_82772" fill="white">
+<rect x="7" y="7.62939e-06" width="12" height="12" rx="0.5"/>
+</mask>
+<rect x="7" y="7.62939e-06" width="12" height="12" rx="0.5" fill="#444444" stroke="#CCCCCC" stroke-width="4" mask="url(#path-1-inside-1_313_82772)"/>
+<path d="M12.7426 3.61601H12.6745L12.6496 3.67939L10.9636 7.96339L10.9098 8.10001H11.0566H11.5846H11.6536L11.6781 8.03553L12.1096 6.90001H13.9397L14.3712 8.03553L14.3957 8.10001H14.4646H14.9986H15.1455L15.0917 7.96339L13.4057 3.67939L13.3808 3.61601H13.3126H12.7426ZM13.7079 6.28601H12.3421L13.03 4.49341L13.7079 6.28601Z" fill="#CCCCCC" stroke="#CCCCCC" stroke-width="0.2"/>
+<mask id="path-3-inside-2_313_82772" fill="white">
+<rect y="6.00001" width="12" height="12" rx="0.5"/>
+</mask>
+<rect y="6.00001" width="12" height="12" rx="0.5" fill="#444444" stroke="#CCCCCC" stroke-width="4" mask="url(#path-3-inside-2_313_82772)"/>
+<path d="M5.77801 8.97401H5.67801V9.07401V10.054H3.63H3.53V10.154V12.974V13.074H3.63H4.062H4.162V12.974V12.696H5.67801V14.642V14.742H5.77801H6.222H6.322V14.642V12.696H7.84401V12.974V13.074H7.94401H8.37601H8.47601V12.974V10.154V10.054H8.37601H6.322V9.07401V8.97401H6.222H5.77801ZM4.162 12.076V10.674H5.67801V12.076H4.162ZM6.322 12.076V10.674H7.84401V12.076H6.322Z" fill="#CCCCCC" stroke="#CCCCCC" stroke-width="0.2"/>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/video-dark.svg b/txim/src/TUIKit/assets/icon/video-dark.svg
new file mode 100644
index 00000000..1828560c
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/video-dark.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189;"
+        opacity="0.795169">
+        <rect id="&#231;&#159;&#169;&#229;&#189;&#162;" x="0.5" y="0.5" width="15" height="13"
+            rx="1.75" stroke="#D5E0F2"
+            style="stroke:#D5E0F2;" />
+        <path id="&#228;&#184;&#137;&#232;&#167;&#146;&#229;&#189;&#162;"
+            d="M10.0282 7L6.5 9.1169L6.5 4.8831L10.0282 7Z" stroke="#D5E0F2"
+            style="stroke:#D5E0F2;" />
+    </g>
+</svg>
diff --git a/txim/src/TUIKit/assets/icon/video-light.svg b/txim/src/TUIKit/assets/icon/video-light.svg
new file mode 100644
index 00000000..d9915101
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/video-light.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189;"
+        opacity="0.795169">
+        <rect id="&#231;&#159;&#169;&#229;&#189;&#162;" x="0.5" y="0.5" width="15" height="13"
+            rx="1.75" stroke="#232832"
+            style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;" />
+        <path id="&#228;&#184;&#137;&#232;&#167;&#146;&#229;&#189;&#162;"
+            d="M10.0282 7L6.5 9.1169L6.5 4.8831L10.0282 7Z" stroke="#232832"
+            style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;" />
+    </g>
+</svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/video-play.png b/txim/src/TUIKit/assets/icon/video-play.png
new file mode 100644
index 00000000..15957a98
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/video-play.png differ
diff --git a/txim/src/TUIKit/assets/icon/video-uni.png b/txim/src/TUIKit/assets/icon/video-uni.png
new file mode 100644
index 00000000..2cfe4338
Binary files /dev/null and b/txim/src/TUIKit/assets/icon/video-uni.png differ
diff --git a/txim/src/TUIKit/assets/icon/words-dark.svg b/txim/src/TUIKit/assets/icon/words-dark.svg
new file mode 100644
index 00000000..c8f6c89e
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/words-dark.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189; 5" opacity="0.795169">
+    <path id="&#231;&#159;&#169;&#229;&#189;&#162;" d="M9.60349 12.4231H9.35784L9.20772 12.6175L8.01519 14.1621L6.92003 12.6321L6.77045 12.4231H6.51345H3.25C2.2835 12.4231 1.5 11.6396 1.5 10.6731V3.25C1.5 2.2835 2.2835 1.5 3.25 1.5H12.75C13.7165 1.5 14.5 2.2835 14.5 3.25V8.80223V10.6731C14.5 11.6396 13.7165 12.4231 12.75 12.4231H9.60349Z" stroke="#D5E0F2" style="stroke:#D5E0F2;"/>
+    <path id="&#232;&#183;&#175;&#229;&#190;&#132; 10" d="M9.29061 3.7428L5.97266 6.33122L9.88719 7.13347L6.61672 9.7428" stroke="#D5E0F2" style="stroke:#D5E0F2;" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    </svg>
diff --git a/txim/src/TUIKit/assets/icon/words-light.svg b/txim/src/TUIKit/assets/icon/words-light.svg
new file mode 100644
index 00000000..934bcdae
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/words-light.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189; 5" opacity="0.795169">
+    <path id="&#231;&#159;&#169;&#229;&#189;&#162;" d="M9.60349 12.4231H9.35784L9.20772 12.6175L8.01519 14.1621L6.92003 12.6321L6.77045 12.4231H6.51345H3.25C2.2835 12.4231 1.5 11.6396 1.5 10.6731V3.25C1.5 2.2835 2.2835 1.5 3.25 1.5H12.75C13.7165 1.5 14.5 2.2835 14.5 3.25V8.80223V10.6731C14.5 11.6396 13.7165 12.4231 12.75 12.4231H9.60349Z" stroke="#232832" style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;"/>
+    <path id="&#232;&#183;&#175;&#229;&#190;&#132; 10" d="M9.29061 3.7428L5.97266 6.33122L9.88719 7.13347L6.61672 9.7428" stroke="#232832" style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    </svg>
+    
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/zoom-in.svg b/txim/src/TUIKit/assets/icon/zoom-in.svg
new file mode 100644
index 00000000..d861ab70
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/zoom-in.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill="#444444"
+    d="M945.066667 898.133333l-189.866667-189.866666c55.466667-64 87.466667-149.333333 87.466667-241.066667 0-204.8-168.533333-373.333333-373.333334-373.333333S96 264.533333 96 469.333333 264.533333 842.666667 469.333333 842.666667c91.733333 0 174.933333-34.133333 241.066667-87.466667l189.866667 189.866667c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c8.533333-12.8 8.533333-34.133333-2.133333-46.933334zM469.333333 778.666667C298.666667 778.666667 160 640 160 469.333333S298.666667 160 469.333333 160 778.666667 298.666667 778.666667 469.333333 640 778.666667 469.333333 778.666667z" />
+  <path fill="#444444"
+    d="M597.333333 437.333333h-96V341.333333c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v96H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h96V597.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-96H597.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" />
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/icon/zoom-out.svg b/txim/src/TUIKit/assets/icon/zoom-out.svg
new file mode 100644
index 00000000..890cf9fb
--- /dev/null
+++ b/txim/src/TUIKit/assets/icon/zoom-out.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill="#444444"
+    d="M945.066667 898.133333l-189.866667-189.866666c55.466667-64 87.466667-149.333333 87.466667-241.066667 0-204.8-168.533333-373.333333-373.333334-373.333333S96 264.533333 96 469.333333 264.533333 842.666667 469.333333 842.666667c91.733333 0 174.933333-34.133333 241.066667-87.466667l189.866667 189.866667c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c8.533333-12.8 8.533333-34.133333-2.133333-46.933334zM469.333333 778.666667C298.666667 778.666667 160 640 160 469.333333S298.666667 160 469.333333 160 778.666667 298.666667 778.666667 469.333333 640 778.666667 469.333333 778.666667z" />
+  <path fill="#444444"
+    d="M597.333333 437.333333H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h256c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" />
+</svg>
\ No newline at end of file
diff --git a/txim/src/TUIKit/assets/styles/common.scss b/txim/src/TUIKit/assets/styles/common.scss
new file mode 100644
index 00000000..da482981
--- /dev/null
+++ b/txim/src/TUIKit/assets/styles/common.scss
@@ -0,0 +1,59 @@
+body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p {
+  margin:0;
+  padding:0;
+  font-style:normal;
+
+  /* font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif; */
+}
+
+ol, ul, li {
+  list-style:none;
+}
+
+img {
+  border:0;
+  vertical-align:middle;
+  pointer-events:none;
+}
+
+body {
+  color:#000;
+  background:#FFF;
+}
+
+.clear {
+  clear:both;
+  height:1px;
+  width:100%;
+  overflow:hidden;
+  margin-top:-1px;
+}
+
+a {
+  color:#000;
+  text-decoration:none;
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration:none;
+}
+
+input, textarea {
+  user-select: auto;
+}
+
+input:focus, input:active, textarea:focus, textarea:active {
+  outline: none;
+}
+
+.chat-aside {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  box-sizing: border-box;
+  width: 360px !important;
+  border-radius: 8px 0 0 8px;
+  z-index: 9999;
+  max-height: calc(100% - 50px);
+}
diff --git a/txim/src/TUIKit/assets/styles/sample.scss b/txim/src/TUIKit/assets/styles/sample.scss
new file mode 100644
index 00000000..8a110b02
--- /dev/null
+++ b/txim/src/TUIKit/assets/styles/sample.scss
@@ -0,0 +1,99 @@
+/* stylelint-disable */
+.TUIKit {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  text-align: left;
+  .TUIKit-navbar {
+    background: #e8e8e9;
+    overflow: hidden;
+    .TUIKit-navbar-item {
+      padding: 10px;
+      color: #147aff;
+      font-weight: 500;
+      cursor: pointer;
+    }
+    .TUIKit-navbar-item-active {
+      background: #dddddd;
+    }
+  }
+  .TUIKit-main-container {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    .TUIKit-main {
+      flex: 1;
+      display: flex;
+      .TUIKit-main-aside {
+        min-width: 285px;
+        flex: 0 0 24%;
+        border-right: 1px solid #f4f5f9;
+      }
+      .TUIKit-main-main {
+        flex: 1;
+        display: flex;
+        .chat{
+          flex: 1;
+        }
+        .chat-aside {
+          position: absolute;
+          top: 50px;
+          right: 0;
+          box-sizing: border-box;
+          max-width: 360px;
+          max-height: calc(100% - 50px);
+          border-radius: 8px 0 0 8px;
+          z-index: 9999;
+        }
+      }
+    }
+    .callkit-container {
+      position: fixed;
+      left: calc(50% - 25rem);
+      top: calc(50% - 18rem);
+      width: 50rem;
+      height: 36rem;
+    }
+    .callkit-container.miniMized {
+      left: auto;
+      right: 10px;
+      top: 70px;
+      background: transparent;
+    }
+  }
+}
+.TUIKit-h5 {
+  display: flex;
+  flex-direction: column-reverse;
+  .TUIKit-navbar {
+    display: flex;
+    flex-direction: row;
+    .TUIKit-navbar-item {
+      flex: 1;
+      text-align: center;
+      cursor: none;
+    }
+  }
+  .TUIKit-main-container {
+    flex: 1;
+    .TUIKit-main {
+      .TUIKit-main-aside {
+        flex: 1;
+      }
+      .TUIKit-main-main {
+        .chat-popup {
+          position: absolute;
+          max-width: 100%;
+          max-height: 100%;
+        }
+      }
+    }
+    .callkit-container {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/chat-header/index.vue b/txim/src/TUIKit/components/TUIChat/chat-header/index.vue
new file mode 100644
index 00000000..6e119026
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/chat-header/index.vue
@@ -0,0 +1,160 @@
+<template>
+  <div :class="['chat-header', !isPC && 'chat-header-h5']">
+    <div
+      v-if="!isPC && isNotRoomChat"
+      :class="['chat-header-back', !isPC && 'chat-header-h5-back']"
+      @click="closeChat(currentConversation.conversationID)"
+    >
+      <Icon :file="backSVG" />
+    </div>
+    <div class="chat-header-container">
+      <div
+        v-if="isNotRoomChat"
+        :class="['chat-header-content', !isPC && 'chat-header-h5-content']"
+      >
+        {{ currentConversationName }}
+      </div>
+      <div>
+        <!-- <JoinGroupCard v-if="isPC" /> -->
+      </div>
+    </div>
+    <div :class="['chat-header-setting', !isPC && 'chat-header-h5-setting']">
+      <div
+        v-for="(item, index) in props.headerExtensionList"
+        :key="index"
+        @click.stop="handleExtensions(item)"
+      >
+        <Icon :file="item.icon" />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, withDefaults } from '../../../adapter-vue';
+import {
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  IConversationModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIConstants, ExtensionInfo } from '@tencentcloud/tui-core';
+// import { JoinGroupCard } from '@tencentcloud/call-uikit-vue';
+import Icon from '../../common/Icon.vue';
+import backSVG from '../../../assets/icon/back.svg';
+import { isPC } from '../../../utils/env';
+import TUIChatConfig from '../config';
+
+const props = withDefaults(
+  defineProps<{
+    headerExtensionList: ExtensionInfo[];
+  }>(),
+  {
+    headerExtensionList: () => ([]),
+  },
+);
+
+const emits = defineEmits(['closeChat']);
+const currentConversation = ref<IConversationModel>();
+const currentConversationName = ref('');
+const typingStatus = ref(false);
+const groupID = ref('');
+const isNotRoomChat = ref<boolean>(TUIChatConfig.getChatType() !== TUIConstants.TUIChat.TYPE.ROOM);
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdated,
+  });
+
+  TUIStore.watch(StoreName.CHAT, {
+    typingStatus: onTypingStatusUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdated,
+  });
+
+  TUIStore.unwatch(StoreName.CHAT, {
+    typingStatus: onTypingStatusUpdated,
+  });
+});
+
+const closeChat = (conversationID: string | undefined) => {
+  emits('closeChat', conversationID);
+};
+
+const handleExtensions = (item: ExtensionInfo) => {
+  item.listener.onClicked?.({ groupID: groupID.value });
+};
+
+function onCurrentConversationUpdated(conversation: IConversationModel) {
+  currentConversation.value = conversation;
+  groupID.value = currentConversation.value?.groupProfile?.groupID;
+  currentConversationName.value = currentConversation?.value?.getShowName();
+}
+
+function onTypingStatusUpdated(status: boolean) {
+  typingStatus.value = status;
+  if (typingStatus.value) {
+    currentConversationName.value = TUITranslateService.t('TUIChat.对方正在输入');
+  } else {
+    currentConversationName.value = currentConversation.value?.getShowName() || '';
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.chat-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  &-container {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  &-content {
+    margin-right: 20px;
+    flex: 1;
+    font-size: 16px;
+    line-height: 30px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: #000;
+    letter-spacing: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-back,
+  &-setting {
+    width: 27px;
+    height: 27px;
+
+    .icon {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.chat-header-h5 {
+  &-back {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-content{
+    margin: 0 20px;
+    text-align: center;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/config.ts b/txim/src/TUIKit/components/TUIChat/config.ts
new file mode 100644
index 00000000..ed99f3d6
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/config.ts
@@ -0,0 +1,83 @@
+class TUIChatConfig {
+  static instance: TUIChatConfig;
+  private chatType: string;
+  private features: Record<string, any>;
+  private theme: string;
+  constructor() {
+    this.chatType = '';
+    this.features = {
+      DownloadFile: true,
+      CopyMessage: true,
+      DeleteMessage: true,
+      RevokeMessage: true,
+      QuoteMessage: true,
+      ForwardMessage: true,
+      TranslateMessage: true,
+      VoiceToText: true,
+      MultiSelection: true,
+      EmojiReaction: true,
+      InputEmoji: true,
+      InputStickers: true,
+      InputImage: true,
+      InputVoice: true,
+      InputVideo: true,
+      InputFile: true,
+      InputEvaluation: true,
+      InputQuickReplies: true,
+      InputMention: true,
+      MessageSearch: true,
+      ReadStatus: true,
+    };
+    this.theme = 'light';
+  }
+
+  static getInstance(): TUIChatConfig {
+    if (!TUIChatConfig.instance) {
+      TUIChatConfig.instance = new TUIChatConfig();
+    }
+    return TUIChatConfig.instance;
+  }
+
+  setChatType(chatType: string) {
+    this.chatType = chatType;
+  }
+
+  getChatType() {
+    return this.chatType;
+  }
+
+  hideTUIChatFeatures(features: string[]) {
+    if (!features) {
+      return;
+    }
+    features.forEach((feature: string) => {
+      if (this.features[feature]) {
+        this.features[feature] = false;
+      }
+    });
+  }
+
+  getFeatureConfig(key?: string) {
+    if (key) {
+      return this.features[key];
+    }
+    return this.features;
+  }
+
+  setTheme(theme: string) {
+    this.theme = theme;
+  }
+
+  getTheme() {
+    return this.theme;
+  }
+}
+
+const ChatConfig = TUIChatConfig.getInstance();
+const hideTUIChatFeatures = ChatConfig.hideTUIChatFeatures.bind(ChatConfig);
+
+export {
+  hideTUIChatFeatures,
+};
+
+export default ChatConfig;
diff --git a/txim/src/TUIKit/components/TUIChat/emoji-config/custom-emoji.ts b/txim/src/TUIKit/components/TUIChat/emoji-config/custom-emoji.ts
new file mode 100644
index 00000000..d6501df1
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/emoji-config/custom-emoji.ts
@@ -0,0 +1,15 @@
+import { IEmojiGroupList } from '../../../interface';
+
+/**
+* Custom big emoji
+*/
+export const CUSTOM_BIG_EMOJI_URL: string = '';
+
+export const CUSTOM_BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [];
+
+/**
+* Custom basic emoji
+*/
+export const CUSTOM_BASIC_EMOJI_URL: string = '';
+
+export const CUSTOM_BASIC_EMOJI_URL_MAPPING: Record<string, string> = {};
diff --git a/txim/src/TUIKit/components/TUIChat/emoji-config/default-emoji.ts b/txim/src/TUIKit/components/TUIChat/emoji-config/default-emoji.ts
new file mode 100644
index 00000000..e90d1af9
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/emoji-config/default-emoji.ts
@@ -0,0 +1,114 @@
+/**
+ * Emoji input interface in the chat screen.
+ * In respect for the copyright of the emoji design, the Chat Demo/TUIKit project does not include the cutouts of large emoji elements.
+ * Please replace them with your own designed or copyrighted emoji packs before the official launch for commercial use.
+ * The default small yellow face emoji pack is copyrighted by Tencent Cloud and can be authorized for a fee.
+ * If you wish to obtain authorization, please submit a ticket to contact us.
+ *
+ * submit a ticket url：https://console.tencentcloud.com/workorder/category?level1_id=29&level2_id=40&source=14&data_title=Chat&step=1
+ */
+import { default as emojiCNLocales } from './locales/zh_cn';
+import { default as emojiENLocales } from './locales/en';
+import { EMOJI_TYPE } from '../../../constant';
+import { IEmojiGroupList } from '../../../interface';
+
+export const DEFAULT_BASIC_EMOJI_URL = 'https://web.sdk.qcloud.com/im/assets/emoji-plugin/';
+export const DEFAULT_BIG_EMOJI_URL = 'https://web.sdk.qcloud.com/im/assets/face-elem/';
+
+export const DEFAULT_BASIC_EMOJI_URL_MAPPING: Record<string, string> = {
+  '[TUIEmoji_Expect]': 'emoji_0@2x.png',
+  '[TUIEmoji_Blink]': 'emoji_1@2x.png',
+  '[TUIEmoji_Guffaw]': 'emoji_2@2x.png',
+  '[TUIEmoji_KindSmile]': 'emoji_3@2x.png',
+  '[TUIEmoji_Haha]': 'emoji_4@2x.png',
+  '[TUIEmoji_Cheerful]': 'emoji_5@2x.png',
+  '[TUIEmoji_Smile]': 'emoji_6@2x.png',
+  '[TUIEmoji_Sorrow]': 'emoji_7@2x.png',
+  '[TUIEmoji_Speechless]': 'emoji_8@2x.png',
+  '[TUIEmoji_Amazed]': 'emoji_9@2x.png',
+  '[TUIEmoji_Complacent]': 'emoji_10@2x.png',
+  '[TUIEmoji_Lustful]': 'emoji_11@2x.png',
+  '[TUIEmoji_Stareyes]': 'emoji_12@2x.png',
+  '[TUIEmoji_Giggle]': 'emoji_13@2x.png',
+  '[TUIEmoji_Daemon]': 'emoji_14@2x.png',
+  '[TUIEmoji_Rage]': 'emoji_15@2x.png',
+  '[TUIEmoji_Yawn]': 'emoji_16@2x.png',
+  '[TUIEmoji_TearsLaugh]': 'emoji_17@2x.png',
+  '[TUIEmoji_Silly]': 'emoji_18@2x.png',
+  '[TUIEmoji_Wail]': 'emoji_19@2x.png',
+  '[TUIEmoji_Kiss]': 'emoji_20@2x.png',
+  '[TUIEmoji_Trapped]': 'emoji_21@2x.png',
+  '[TUIEmoji_Fear]': 'emoji_22@2x.png',
+  '[TUIEmoji_BareTeeth]': 'emoji_23@2x.png',
+  '[TUIEmoji_FlareUp]': 'emoji_24@2x.png',
+  '[TUIEmoji_Tact]': 'emoji_25@2x.png',
+  '[TUIEmoji_Shit]': 'emoji_26@2x.png',
+  '[TUIEmoji_ShutUp]': 'emoji_27@2x.png',
+  '[TUIEmoji_Sigh]': 'emoji_28@2x.png',
+  '[TUIEmoji_Hehe]': 'emoji_29@2x.png',
+  '[TUIEmoji_Silent]': 'emoji_30@2x.png',
+  '[TUIEmoji_Skull]': 'emoji_31@2x.png',
+  '[TUIEmoji_Mask]': 'emoji_32@2x.png',
+  '[TUIEmoji_Beer]': 'emoji_33@2x.png',
+  '[TUIEmoji_Cake]': 'emoji_34@2x.png',
+  '[TUIEmoji_RedPacket]': 'emoji_35@2x.png',
+  '[TUIEmoji_Bombs]': 'emoji_36@2x.png',
+  '[TUIEmoji_Ai]': 'emoji_37@2x.png',
+  '[TUIEmoji_Celebrate]': 'emoji_38@2x.png',
+  '[TUIEmoji_Bless]': 'emoji_39@2x.png',
+  '[TUIEmoji_Flower]': 'emoji_40@2x.png',
+  '[TUIEmoji_Watermelon]': 'emoji_41@2x.png',
+  '[TUIEmoji_Cow]': 'emoji_42@2x.png',
+  '[TUIEmoji_Fool]': 'emoji_43@2x.png',
+  '[TUIEmoji_Surprised]': 'emoji_44@2x.png',
+  '[TUIEmoji_Askance]': 'emoji_45@2x.png',
+  '[TUIEmoji_Monster]': 'emoji_46@2x.png',
+  '[TUIEmoji_Pig]': 'emoji_47@2x.png',
+  '[TUIEmoji_Coffee]': 'emoji_48@2x.png',
+  '[TUIEmoji_Ok]': 'emoji_49@2x.png',
+  '[TUIEmoji_Heart]': 'emoji_50@2x.png',
+  '[TUIEmoji_Sun]': 'emoji_51@2x.png',
+  '[TUIEmoji_Moon]': 'emoji_52@2x.png',
+  '[TUIEmoji_Star]': 'emoji_53@2x.png',
+  '[TUIEmoji_Rich]': 'emoji_54@2x.png',
+  '[TUIEmoji_Fortune]': 'emoji_55@2x.png',
+  '[TUIEmoji_857]': 'emoji_56@2x.png',
+  '[TUIEmoji_666]': 'emoji_57@2x.png',
+  '[TUIEmoji_Prohibit]': 'emoji_58@2x.png',
+  '[TUIEmoji_Convinced]': 'emoji_59@2x.png',
+  '[TUIEmoji_Knife]': 'emoji_60@2x.png',
+  '[TUIEmoji_Like]': 'emoji_61@2x.png',
+};
+
+export const BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [
+  {
+    emojiGroupID: 1,
+    type: EMOJI_TYPE.BIG,
+    url: DEFAULT_BIG_EMOJI_URL,
+    list: ['yz00', 'yz01', 'yz02', 'yz03', 'yz04', 'yz05', 'yz06', 'yz07', 'yz08',
+      'yz09', 'yz10', 'yz11', 'yz12', 'yz13', 'yz14', 'yz15', 'yz16', 'yz17'],
+  },
+  {
+    emojiGroupID: 2,
+    type: EMOJI_TYPE.BIG,
+    url: DEFAULT_BIG_EMOJI_URL,
+    list: ['ys00', 'ys01', 'ys02', 'ys03', 'ys04', 'ys05', 'ys06', 'ys07', 'ys08',
+      'ys09', 'ys10', 'ys11', 'ys12', 'ys13', 'ys14', 'ys15'],
+  },
+  {
+    emojiGroupID: 3,
+    type: EMOJI_TYPE.BIG,
+    url: DEFAULT_BIG_EMOJI_URL,
+    list: ['gcs00', 'gcs01', 'gcs02', 'gcs03', 'gcs04', 'gcs05', 'gcs06', 'gcs07',
+      'gcs08', 'gcs09', 'gcs10', 'gcs11', 'gcs12', 'gcs13', 'gcs14', 'gcs15', 'gcs16'],
+  },
+];
+
+export const BASIC_EMOJI_NAME_TO_KEY_MAPPING = {
+  ...Object.fromEntries(
+    Object.entries(emojiCNLocales)?.map(([key, val]) => [val, key]),
+  ),
+  ...Object.fromEntries(
+    Object.entries(emojiENLocales)?.map(([key, val]) => [val, key]),
+  ),
+};
diff --git a/txim/src/TUIKit/components/TUIChat/emoji-config/index.ts b/txim/src/TUIKit/components/TUIChat/emoji-config/index.ts
new file mode 100644
index 00000000..c6ee4dc2
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/emoji-config/index.ts
@@ -0,0 +1,140 @@
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { CUSTOM_BASIC_EMOJI_URL, CUSTOM_BIG_EMOJI_URL, CUSTOM_BASIC_EMOJI_URL_MAPPING, CUSTOM_BIG_EMOJI_GROUP_LIST } from './custom-emoji';
+import { DEFAULT_BASIC_EMOJI_URL, BIG_EMOJI_GROUP_LIST, DEFAULT_BASIC_EMOJI_URL_MAPPING, BASIC_EMOJI_NAME_TO_KEY_MAPPING, DEFAULT_BIG_EMOJI_URL } from './default-emoji';
+import { default as emojiCNLocales } from './locales/zh_cn';
+import { IEmojiGroupList } from '../../../interface';
+import { EMOJI_TYPE } from '../../../constant';
+import { isWeChat } from '../../../utils/env';
+
+const hasCustomBasicEmoji = CUSTOM_BASIC_EMOJI_URL && Object.keys(CUSTOM_BASIC_EMOJI_URL_MAPPING).length;
+
+const BASIC_EMOJI_URL = hasCustomBasicEmoji ? CUSTOM_BASIC_EMOJI_URL : DEFAULT_BASIC_EMOJI_URL;
+
+const BASIC_EMOJI_URL_MAPPING = hasCustomBasicEmoji ? CUSTOM_BASIC_EMOJI_URL_MAPPING : DEFAULT_BASIC_EMOJI_URL_MAPPING;
+
+const EMOJI_GROUP_LIST: IEmojiGroupList = [
+  {
+    emojiGroupID: 0,
+    type: EMOJI_TYPE.BASIC,
+    url: BASIC_EMOJI_URL,
+    list: Object.keys(BASIC_EMOJI_URL_MAPPING),
+  },
+  ...BIG_EMOJI_GROUP_LIST,
+  ...CUSTOM_BIG_EMOJI_GROUP_LIST,
+];
+
+/**
+ * Converts a basic emoji key into its corresponding name.
+ * Example:
+ * '[Smile]' => '[TUIEmoji_Smile]'
+ * @param {string} key - The emoji key.
+ * @return {string} The corresponding emoji name.
+ */
+const convertKeyToEmojiName = (key: string): string => {
+  // WeChat does not support emoji translation
+  return isWeChat ? emojiCNLocales[key] : TUITranslateService.t(`Emoji.${key}`);
+};
+
+/**
+ * Transforms a text containing emoji keys into a text with Chinese or English basic emoji names
+ * Example:
+ * 'hello[TUIEmoji_Smile]!' => 'hello[Smile]!''
+ * @param {string} text - The text containing emoji keys.
+ * @return {string} The transformed text with emoji keys replaced by emoji names.
+ */
+const transformTextWithKeysToEmojiNames = (text: string): string => {
+  if (!text) {
+    return '';
+  }
+  const reg = /(\[.+?\])/g;
+  let txt: string = text;
+  if (reg.test(text)) {
+    txt = text.replace(reg, match => BASIC_EMOJI_URL_MAPPING[match] ? convertKeyToEmojiName(match) : match);
+  }
+  return txt;
+};
+
+/**
+ * Transforms a text containing Chinese or English basic emoji names into a text with emoji keys.
+ * Example:
+ * 'hello[Smile]!' => 'hello[TUIEmoji_Smile]!'
+ * @param {string} text - The text containing emoji names.
+ * @return {string} The transformed text with emoji names replaced by emoji keys.
+ */
+const transformTextWithEmojiNamesToKeys = (text: string) => {
+  if (!text) {
+    return '';
+  }
+  const reg = /(\[.+?\])/g;
+  let txt: string = text;
+  if (reg.test(text)) {
+    txt = text.replace(reg, match => BASIC_EMOJI_NAME_TO_KEY_MAPPING[match] || match);
+  }
+  return txt;
+};
+
+/**
+* The configuration aims to provide compatibility with versions prior to 2.2.0
+*/
+const emojiConfig = {
+  emojiBaseUrl: BASIC_EMOJI_URL,
+  emojiUrlMapping: BASIC_EMOJI_URL_MAPPING,
+  emojiNameMapping: {
+    ...emojiCNLocales,
+  },
+};
+
+/**
+ * Transform text message to renderable array contains image and text.
+ * Example: hello[TUIEmoji_Smile], I am happy.
+ * -> [{type: 'text', content: 'hello'}, {type: 'image', content: 'https://.../smile.png'}, {type: 'text', content: ', I am happy.'}]
+ * @param text
+ * @returns Array<{ type: 'text' | 'image'; content: string; emojiKey?: string; }>
+ */
+const parseTextToRenderArray = (text: string): Array<{ type: 'text' | 'image'; content: string; emojiKey?: string }> => {
+  const emojiRegex = /\[([^\]]+)\]/g;
+  const result: any[] = [];
+
+  let match: RegExpExecArray | null;
+  let lastIndex = 0;
+
+  while ((match = emojiRegex.exec(text)) !== null) {
+    const startIndex = match.index;
+    const endIndex = emojiRegex.lastIndex;
+    const emojiKey = match[0];
+
+    if (startIndex > lastIndex) {
+      result.push({ type: 'text', content: text.substring(lastIndex, startIndex) });
+    }
+
+    const emojiUrl = BASIC_EMOJI_URL + BASIC_EMOJI_URL_MAPPING[emojiKey];
+    if (emojiUrl) {
+      result.push({ type: 'image', content: emojiUrl, emojiKey });
+    } else {
+      result.push({ type: 'text', content: emojiKey });
+    }
+
+    lastIndex = endIndex;
+    emojiRegex.lastIndex = lastIndex;
+  }
+
+  if (lastIndex < text.length) {
+    result.push({ type: 'text', content: text.substring(lastIndex) });
+  }
+
+  return result;
+};
+
+export {
+  EMOJI_GROUP_LIST,
+  CUSTOM_BIG_EMOJI_URL,
+  DEFAULT_BIG_EMOJI_URL,
+  CUSTOM_BASIC_EMOJI_URL,
+  BASIC_EMOJI_URL_MAPPING,
+  CUSTOM_BASIC_EMOJI_URL_MAPPING,
+  convertKeyToEmojiName,
+  parseTextToRenderArray,
+  transformTextWithKeysToEmojiNames,
+  transformTextWithEmojiNamesToKeys,
+  emojiConfig,
+};
diff --git a/txim/src/TUIKit/components/TUIChat/emoji-config/locales/en.ts b/txim/src/TUIKit/components/TUIChat/emoji-config/locales/en.ts
new file mode 100644
index 00000000..baa4fd11
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/emoji-config/locales/en.ts
@@ -0,0 +1,66 @@
+const Emoji = {
+  '[TUIEmoji_Smile]': '[Smile]',
+  '[TUIEmoji_Expect]': '[Expect]',
+  '[TUIEmoji_Blink]': '[Blink]',
+  '[TUIEmoji_Guffaw]': '[Guffaw]',
+  '[TUIEmoji_KindSmile]': '[KindSmile]',
+  '[TUIEmoji_Haha]': '[Haha]',
+  '[TUIEmoji_Cheerful]': '[Cheerful]',
+  '[TUIEmoji_Speechless]': '[Speechless]',
+  '[TUIEmoji_Amazed]': '[Amazed]',
+  '[TUIEmoji_Sorrow]': '[Sorrow]',
+  '[TUIEmoji_Complacent]': '[Complacent]',
+  '[TUIEmoji_Silly]': '[Silly]',
+  '[TUIEmoji_Lustful]': '[Lustful]',
+  '[TUIEmoji_Giggle]': '[Giggle]',
+  '[TUIEmoji_Kiss]': '[Kiss]',
+  '[TUIEmoji_Wail]': '[Wail]',
+  '[TUIEmoji_TearsLaugh]': '[TearsLaugh]',
+  '[TUIEmoji_Trapped]': '[Trapped]',
+  '[TUIEmoji_Mask]': '[Mask]',
+  '[TUIEmoji_Fear]': '[Fear]',
+  '[TUIEmoji_BareTeeth]': '[BareTeeth]',
+  '[TUIEmoji_FlareUp]': '[FlareUp]',
+  '[TUIEmoji_Yawn]': '[Yawn]',
+  '[TUIEmoji_Tact]': '[Tact]',
+  '[TUIEmoji_Stareyes]': '[StarEyes]',
+  '[TUIEmoji_ShutUp]': '[ShutUp]',
+  '[TUIEmoji_Sigh]': '[Sigh]',
+  '[TUIEmoji_Hehe]': '[Hehe]',
+  '[TUIEmoji_Silent]': '[Silent]',
+  '[TUIEmoji_Surprised]': '[Surprised]',
+  '[TUIEmoji_Askance]': '[Askance]]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[Shit]',
+  '[TUIEmoji_Monster]': '[Monster]',
+  '[TUIEmoji_Daemon]': '[Daemon]',
+  '[TUIEmoji_Rage]': '[Rage]',
+  '[TUIEmoji_Fool]': '[Fool]',
+  '[TUIEmoji_Pig]': '[Pig]',
+  '[TUIEmoji_Cow]': '[Cow]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[Skull]',
+  '[TUIEmoji_Bombs]': '[Bombs]',
+  '[TUIEmoji_Coffee]': '[Coffee]',
+  '[TUIEmoji_Cake]': '[Cake]',
+  '[TUIEmoji_Beer]': '[Beer]',
+  '[TUIEmoji_Flower]': '[Flower]',
+  '[TUIEmoji_Watermelon]': '[Watermelon]',
+  '[TUIEmoji_Rich]': '[Rich]',
+  '[TUIEmoji_Heart]': '[Heart]',
+  '[TUIEmoji_Moon]': '[Moon]',
+  '[TUIEmoji_Sun]': '[Sun]',
+  '[TUIEmoji_Star]': '[Star]',
+  '[TUIEmoji_RedPacket]': '[RedPacket]',
+  '[TUIEmoji_Celebrate]': '[Celebrate]',
+  '[TUIEmoji_Bless]': '[Bless]',
+  '[TUIEmoji_Fortune]': '[Fortune]',
+  '[TUIEmoji_Convinced]': '[Convinced]',
+  '[TUIEmoji_Prohibit]': '[Prohibit]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[Knife]',
+  '[TUIEmoji_Like]': '[Like]',
+};
+
+export default Emoji;
diff --git a/txim/src/TUIKit/components/TUIChat/emoji-config/locales/zh_cn.ts b/txim/src/TUIKit/components/TUIChat/emoji-config/locales/zh_cn.ts
new file mode 100644
index 00000000..7086a1f1
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/emoji-config/locales/zh_cn.ts
@@ -0,0 +1,66 @@
+const Emoji: Record<string, string> = {
+  '[TUIEmoji_Smile]': '[微笑]',
+  '[TUIEmoji_Expect]': '[期待]',
+  '[TUIEmoji_Blink]': '[眨眼]',
+  '[TUIEmoji_Guffaw]': '[大笑]',
+  '[TUIEmoji_KindSmile]': '[姨母笑]',
+  '[TUIEmoji_Haha]': '[哈哈哈]',
+  '[TUIEmoji_Cheerful]': '[愉快]',
+  '[TUIEmoji_Speechless]': '[无语]',
+  '[TUIEmoji_Amazed]': '[惊讶]',
+  '[TUIEmoji_Sorrow]': '[悲伤]',
+  '[TUIEmoji_Complacent]': '[得意]',
+  '[TUIEmoji_Silly]': '[傻了]',
+  '[TUIEmoji_Lustful]': '[色]',
+  '[TUIEmoji_Giggle]': '[憨笑]',
+  '[TUIEmoji_Kiss]': '[亲亲]',
+  '[TUIEmoji_Wail]': '[大哭]',
+  '[TUIEmoji_TearsLaugh]': '[哭笑]',
+  '[TUIEmoji_Trapped]': '[困]',
+  '[TUIEmoji_Mask]': '[口罩]',
+  '[TUIEmoji_Fear]': '[恐惧]',
+  '[TUIEmoji_BareTeeth]': '[龇牙]',
+  '[TUIEmoji_FlareUp]': '[发怒]',
+  '[TUIEmoji_Yawn]': '[打哈欠]',
+  '[TUIEmoji_Tact]': '[机智]',
+  '[TUIEmoji_Stareyes]': '[星星眼]',
+  '[TUIEmoji_ShutUp]': '[闭嘴]',
+  '[TUIEmoji_Sigh]': '[叹气]',
+  '[TUIEmoji_Hehe]': '[呵呵]',
+  '[TUIEmoji_Silent]': '[收声]',
+  '[TUIEmoji_Surprised]': '[惊喜]',
+  '[TUIEmoji_Askance]': '[白眼]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[便便]',
+  '[TUIEmoji_Monster]': '[怪兽]',
+  '[TUIEmoji_Daemon]': '[恶魔]',
+  '[TUIEmoji_Rage]': '[恶魔怒]',
+  '[TUIEmoji_Fool]': '[衰]',
+  '[TUIEmoji_Pig]': '[猪]',
+  '[TUIEmoji_Cow]': '[牛]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[骷髅]',
+  '[TUIEmoji_Bombs]': '[炸弹]',
+  '[TUIEmoji_Coffee]': '[咖啡]',
+  '[TUIEmoji_Cake]': '[蛋糕]',
+  '[TUIEmoji_Beer]': '[啤酒]',
+  '[TUIEmoji_Flower]': '[花]',
+  '[TUIEmoji_Watermelon]': '[瓜]',
+  '[TUIEmoji_Rich]': '[壕]',
+  '[TUIEmoji_Heart]': '[爱心]',
+  '[TUIEmoji_Moon]': '[月亮]',
+  '[TUIEmoji_Sun]': '[太阳]',
+  '[TUIEmoji_Star]': '[星星]',
+  '[TUIEmoji_RedPacket]': '[红包]',
+  '[TUIEmoji_Celebrate]': '[庆祝]',
+  '[TUIEmoji_Bless]': '[福]',
+  '[TUIEmoji_Fortune]': '[发]',
+  '[TUIEmoji_Convinced]': '[服]',
+  '[TUIEmoji_Prohibit]': '[禁]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[刀]',
+  '[TUIEmoji_Like]': '[赞]',
+};
+
+export default Emoji;
diff --git a/txim/src/TUIKit/components/TUIChat/emoji-config/locales/zh_tw.ts b/txim/src/TUIKit/components/TUIChat/emoji-config/locales/zh_tw.ts
new file mode 100644
index 00000000..144009ea
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/emoji-config/locales/zh_tw.ts
@@ -0,0 +1,66 @@
+const Emoji: Record<string, string> = {
+  '[TUIEmoji_Smile]': '[微笑]',
+  '[TUIEmoji_Expect]': '[期待]',
+  '[TUIEmoji_Blink]': '[眨眼]',
+  '[TUIEmoji_Guffaw]': '[大笑]',
+  '[TUIEmoji_KindSmile]': '[姨母笑]',
+  '[TUIEmoji_Haha]': '[哈哈哈]',
+  '[TUIEmoji_Cheerful]': '[愉快]',
+  '[TUIEmoji_Speechless]': '[無語]',
+  '[TUIEmoji_Amazed]': '[驚訝]',
+  '[TUIEmoji_Sorrow]': '[悲傷]',
+  '[TUIEmoji_Complacent]': '[得意]',
+  '[TUIEmoji_Silly]': '[傻了]',
+  '[TUIEmoji_Lustful]': '[色]',
+  '[TUIEmoji_Giggle]': '[憨笑]',
+  '[TUIEmoji_Kiss]': '[親親]',
+  '[TUIEmoji_Wail]': '[大哭]',
+  '[TUIEmoji_TearsLaugh]': '[哭笑]',
+  '[TUIEmoji_Trapped]': '[困]',
+  '[TUIEmoji_Mask]': '[口罩]',
+  '[TUIEmoji_Fear]': '[恐懼]',
+  '[TUIEmoji_BareTeeth]': '[齜牙]',
+  '[TUIEmoji_FlareUp]': '[發怒]',
+  '[TUIEmoji_Yawn]': '[打哈欠]',
+  '[TUIEmoji_Tact]': '[機智]',
+  '[TUIEmoji_Stareyes]': '[星星眼]',
+  '[TUIEmoji_ShutUp]': '[閉嘴]',
+  '[TUIEmoji_Sigh]': '[嘆氣]',
+  '[TUIEmoji_Hehe]': '[呵呵]',
+  '[TUIEmoji_Silent]': '[收聲]',
+  '[TUIEmoji_Surprised]': '[驚喜]',
+  '[TUIEmoji_Askance]': '[白眼]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[便便]',
+  '[TUIEmoji_Monster]': '[怪獸]',
+  '[TUIEmoji_Daemon]': '[惡魔]',
+  '[TUIEmoji_Rage]': '[惡魔怒]',
+  '[TUIEmoji_Fool]': '[衰]',
+  '[TUIEmoji_Pig]': '[豬]',
+  '[TUIEmoji_Cow]': '[牛]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[骷髏]',
+  '[TUIEmoji_Bombs]': '[炸彈]',
+  '[TUIEmoji_Coffee]': '[咖啡]',
+  '[TUIEmoji_Cake]': '[蛋糕]',
+  '[TUIEmoji_Beer]': '[啤酒]',
+  '[TUIEmoji_Flower]': '[花]',
+  '[TUIEmoji_Watermelon]': '[瓜]',
+  '[TUIEmoji_Rich]': '[壕]',
+  '[TUIEmoji_Heart]': '[愛心]',
+  '[TUIEmoji_Moon]': '[月亮]',
+  '[TUIEmoji_Sun]': '[太陽]',
+  '[TUIEmoji_Star]': '[星星]',
+  '[TUIEmoji_RedPacket]': '[紅包]',
+  '[TUIEmoji_Celebrate]': '[慶祝]',
+  '[TUIEmoji_Bless]': '[福]',
+  '[TUIEmoji_Fortune]': '[發]',
+  '[TUIEmoji_Convinced]': '[服]',
+  '[TUIEmoji_Prohibit]': '[禁]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[刀]',
+  '[TUIEmoji_Like]': '[讚]',
+};
+
+export default Emoji;
diff --git a/txim/src/TUIKit/components/TUIChat/forward/index.vue b/txim/src/TUIKit/components/TUIChat/forward/index.vue
new file mode 100644
index 00000000..4b87813d
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/forward/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <Overlay
+    :visible="isShowForwardPanel"
+    :useMask="false"
+  >
+    <Transfer
+      :title="TUITranslateService.t('TUIChat.转发')"
+      :isSearch="false"
+      :isCustomItem="false"
+      :list="customConversationList"
+      :isHiddenBackIcon="isUniFrameWork"
+      @cancel="closeForwardPanel"
+      @submit="finishSelected"
+    />
+  </Overlay>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from '../../../adapter-vue';
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  TUIChatService,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import Overlay from '../../common/Overlay/index.vue';
+import Transfer from '../../common/Transfer/index.vue';
+import { Toast, TOAST_TYPE } from '../../../components/common/Toast';
+import { isUniFrameWork } from '../../../utils/env';
+import { isEnabledMessageReadReceiptGlobal } from '../utils/utils';
+import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../offlinePushInfoManager/index';
+
+interface IEmits {
+  (e: 'toggleMultipleSelectMode', visible?: boolean): void;
+}
+
+const emits = defineEmits<IEmits>();
+
+let selectedToForwardMessageIDList: string[] = [];
+let isMergeForward = false;
+
+const isShowForwardPanel = ref(false);
+const customConversationList = ref();
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CUSTOM, {
+    singleForwardMessageID: onSingleForwardMessageIDUpdated,
+    multipleForwardMessageID: onMultipleForwardMessageIDUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    singleForwardMessageID: onSingleForwardMessageIDUpdated,
+    multipleForwardMessageID: onMultipleForwardMessageIDUpdated,
+  });
+
+  // tuistore data must be cleared when closing the forward panel
+  clearStoreData();
+});
+
+function onSingleForwardMessageIDUpdated(messageID: string | undefined) {
+  if (typeof messageID !== 'undefined') {
+    isMergeForward = false;
+    selectedToForwardMessageIDList = [messageID];
+    openForwardPanel();
+  }
+}
+
+function onMultipleForwardMessageIDUpdated(params: { isMergeForward: boolean; messageIDList: string[] } | undefined) {
+  if (!params) {
+    return;
+  }
+  isMergeForward = false;
+  const {
+    isMergeForward: _isMergeForward,
+    messageIDList: selectedMessageIDList,
+  } = params || {};
+  if (selectedMessageIDList?.length > 0) {
+    isMergeForward = _isMergeForward;
+    selectedToForwardMessageIDList = selectedMessageIDList;
+    openForwardPanel();
+  } else {
+    Toast({
+      message: TUITranslateService.t('TUIChat.未选择消息'),
+      type: TOAST_TYPE.ERROR,
+    });
+  }
+}
+
+function clearStoreData() {
+  TUIStore.update(StoreName.CUSTOM, 'singleForwardMessageID', undefined);
+  TUIStore.update(StoreName.CUSTOM, 'multipleForwardMessageID', undefined);
+}
+
+function closeForwardPanel(): void {
+  // tuistore data must be cleared when closing the forward panel
+  clearStoreData();
+  isShowForwardPanel.value = false;
+}
+
+function openForwardPanel(): void {
+  getTransforRenderDataList();
+  isShowForwardPanel.value = true;
+}
+
+function finishSelected(selectedConvIDWrapperList: Array<{ userID: string }>): void {
+  if (selectedConvIDWrapperList?.length === 0) return;
+  // to reuse Transfer, so we have to get conversationModel by userID instead of ConversationID
+  const selectedConversationList = selectedConvIDWrapperList.map(IDWrapper => TUIStore.getConversationModel(IDWrapper.userID));
+  const unsentMessageQueue = selectedToForwardMessageIDList
+    .map(messageID => TUIStore.getMessageModel(messageID))
+    .sort((a, b) => a.time - b.time);
+  const forwardPromises = selectedConversationList.map((conversation) => {
+    const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+      conversation,
+      messageType: TUIChatEngine.TYPES.MSG_MERGER,
+    };
+    return TUIChatService.sendForwardMessage(
+      [conversation],
+      unsentMessageQueue,
+      {
+        needMerge: isMergeForward,
+        offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+        params: {
+          needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+        },
+      },
+    );
+  });
+  Promise.allSettled(forwardPromises).then((results) => {
+    for (const result of results) {
+      const { status } = result;
+      if (status === 'rejected') {
+        const errorMessage = result.reason.code === 80001 ? TUITranslateService.t('TUIChat.内容包含敏感词汇') : result.reason.message as string;
+        Toast({
+          message: errorMessage,
+          type: TOAST_TYPE.ERROR,
+        });
+        break;
+      }
+    }
+  });
+  closeForwardPanel();
+  emits('toggleMultipleSelectMode', false);
+}
+
+function getTransforRenderDataList() {
+  const conversationList = TUIStore.getData(StoreName.CONV, 'conversationList');
+  customConversationList.value = conversationList.map((conversation) => {
+    return {
+      // To achieve reusability of Transfer, userID is used here instead of ConversationID
+      userID: conversation.conversationID,
+      nick: conversation.getShowName(),
+      avatar: conversation.getAvatar(),
+    };
+  });
+}
+</script>
diff --git a/txim/src/TUIKit/components/TUIChat/index.ts b/txim/src/TUIKit/components/TUIChat/index.ts
new file mode 100644
index 00000000..a4f6c17f
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/index.ts
@@ -0,0 +1,6 @@
+import TUIChat from './index.vue';
+import Server from './server';
+
+new Server();
+
+export default TUIChat;
diff --git a/txim/src/TUIKit/components/TUIChat/index.vue b/txim/src/TUIKit/components/TUIChat/index.vue
new file mode 100644
index 00000000..59099b45
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/index.vue
@@ -0,0 +1,288 @@
+<template>
+  <div class="chat">
+    <div :class="['tui-chat', !isPC && 'tui-chat-h5']">
+      <div
+        v-if="!currentConversationID"
+        :class="['tui-chat-default', !isPC && 'tui-chat-h5-default']"
+      >
+        <slot />
+      </div>
+      <div
+        v-if="currentConversationID"
+        :class="['tui-chat', !isPC && 'tui-chat-h5']"
+      >
+        <ChatHeader
+          :class="[
+            'tui-chat-header',
+            !isPC && 'tui-chat-H5-header',
+            isUniFrameWork && 'tui-chat-uniapp-header',
+          ]"
+          :isGroup="isGroup"
+          :headerExtensionList="headerExtensionList"
+          @closeChat="closeChat"
+          @openGroupManagement="handleGroup"
+        />
+        <Forward @toggleMultipleSelectMode="toggleMultipleSelectMode" />
+        <MessageList
+          ref="messageListRef"
+          :class="['tui-chat-message-list', !isPC && 'tui-chat-h5-message-list']"
+          :isGroup="isGroup"
+          :groupID="groupID"
+          :isNotInGroup="isNotInGroup"
+          :isMultipleSelectMode="isMultipleSelectMode"
+          @handleEditor="handleEditor"
+          @closeInputToolBar="() => changeToolbarDisplayType('none')"
+          @toggleMultipleSelectMode="toggleMultipleSelectMode"
+        />
+        <div
+          v-if="isNotInGroup"
+          :class="{
+            'tui-chat-leave-group': true,
+            'tui-chat-leave-group-mobile': isMobile,
+          }"
+        >
+          {{ leaveGroupReasonText }}
+        </div>
+        <MultipleSelectPanel
+          v-else-if="isMultipleSelectMode"
+          @oneByOneForwardMessage="oneByOneForwardMessage"
+          @mergeForwardMessage="mergeForwardMessage"
+          @toggleMultipleSelectMode="toggleMultipleSelectMode"
+        />
+        <template v-else>
+          <MessageInputToolbar
+            v-if="isInputToolbarShow"
+            :class="[
+              'tui-chat-message-input-toolbar',
+              !isPC && 'tui-chat-h5-message-input-toolbar',
+              isUniFrameWork && 'tui-chat-uni-message-input-toolbar'
+            ]"
+            :displayType="inputToolbarDisplayType"
+            @insertEmoji="insertEmoji"
+            @changeToolbarDisplayType="changeToolbarDisplayType"
+            @scrollToLatestMessage="scrollToLatestMessage"
+          />
+          <MessageInput
+            ref="messageInputRef"
+            :class="[
+              'tui-chat-message-input',
+              !isPC && 'tui-chat-h5-message-input',
+              isUniFrameWork && 'tui-chat-uni-message-input',
+              isWeChat && 'tui-chat-wx-message-input',
+            ]"
+            :enableAt="featureConfig.InputMention"
+            :isMuted="false"
+            :muteText="TUITranslateService.t('TUIChat.您已被管理员禁言')"
+            :placeholder="TUITranslateService.t('TUIChat.请输入消息')"
+            :inputToolbarDisplayType="inputToolbarDisplayType"
+            @changeToolbarDisplayType="changeToolbarDisplayType"
+          />
+        </template>
+      </div>
+      <!-- Group Management -->
+      <div
+        v-if="!isNotInGroup && !isApp && isUniFrameWork && isGroup && headerExtensionList.length > 0"
+        class="group-profile"
+        @click="handleGroup"
+      >
+        {{ headerExtensionList[0].text }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, computed } from '../../adapter-vue';
+import TUIChatEngine, {
+  TUITranslateService,
+  TUIConversationService,
+  TUIStore,
+  StoreName,
+  IMessageModel,
+  IConversationModel,
+} from '@tencentcloud/chat-uikit-engine';
+import TUICore, { TUIConstants, ExtensionInfo } from '@tencentcloud/tui-core';
+import ChatHeader from './chat-header/index.vue';
+import MessageList from './message-list/index.vue';
+import MessageInput from './message-input/index.vue';
+import MultipleSelectPanel from './mulitple-select-panel/index.vue';
+import Forward from './forward/index.vue';
+import MessageInputToolbar from './message-input-toolbar/index.vue';
+import { isPC, isWeChat, isUniFrameWork, isMobile, isApp } from '../../utils/env';
+import { ToolbarDisplayType } from '../../interface';
+import TUIChatConfig from './config';
+
+const emits = defineEmits(['closeChat']);
+
+const groupID = ref(undefined);
+const isGroup = ref(false);
+const isNotInGroup = ref(false);
+const notInGroupReason = ref<number>();
+const currentConversationID = ref();
+const isMultipleSelectMode = ref(false);
+const inputToolbarDisplayType = ref<ToolbarDisplayType>('none');
+const messageInputRef = ref();
+const messageListRef = ref<InstanceType<typeof MessageList>>();
+const headerExtensionList = ref<ExtensionInfo[]>([]);
+const featureConfig = TUIChatConfig.getFeatureConfig();
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+  reset();
+});
+
+const isInputToolbarShow = computed<boolean>(() => {
+  return isUniFrameWork ? inputToolbarDisplayType.value !== 'none' : true;
+});
+
+const leaveGroupReasonText = computed<string>(() => {
+  let text = '';
+  switch (notInGroupReason.value) {
+    case 4:
+      text = TUITranslateService.t('TUIChat.您已被管理员移出群聊');
+      break;
+    case 5:
+      text = TUITranslateService.t('TUIChat.该群聊已被解散');
+      break;
+    case 8:
+      text = TUITranslateService.t('TUIChat.您已退出该群聊');
+      break;
+    default:
+      text = TUITranslateService.t('TUIChat.您已退出该群聊');
+      break;
+  }
+  return text;
+});
+
+const reset = () => {
+  TUIConversationService.switchConversation('');
+};
+
+const closeChat = (conversationID: string) => {
+  emits('closeChat', conversationID);
+  reset();
+};
+
+const insertEmoji = (emojiObj: object) => {
+  messageInputRef.value?.insertEmoji(emojiObj);
+};
+
+const handleEditor = (message: IMessageModel, type: string) => {
+  if (!message || !type) return;
+  switch (type) {
+    case 'reference':
+      // todo
+      break;
+    case 'reply':
+      // todo
+      break;
+    case 'reedit':
+      if (message?.payload?.text) {
+        messageInputRef?.value?.reEdit(message?.payload?.text);
+      }
+      break;
+    default:
+      break;
+  }
+};
+
+const handleGroup = () => {
+  headerExtensionList.value[0].listener.onClicked({ groupID: groupID.value });
+};
+
+function changeToolbarDisplayType(type: ToolbarDisplayType) {
+  inputToolbarDisplayType.value = inputToolbarDisplayType.value === type ? 'none' : type;
+  if (inputToolbarDisplayType.value !== 'none' && isUniFrameWork) {
+    uni.$emit('scroll-to-bottom');
+  }
+}
+
+function scrollToLatestMessage() {
+  messageListRef.value?.scrollToLatestMessage();
+}
+
+function toggleMultipleSelectMode(visible?: boolean) {
+  isMultipleSelectMode.value = visible === undefined ? !isMultipleSelectMode.value : visible;
+}
+
+function mergeForwardMessage() {
+  messageListRef.value?.mergeForwardMessage();
+}
+
+function oneByOneForwardMessage() {
+  messageListRef.value?.oneByOneForwardMessage();
+}
+
+function updateUIUserNotInGroup(conversation: IConversationModel) {
+  if (conversation?.operationType > 0) {
+    headerExtensionList.value = [];
+    isNotInGroup.value = true;
+    /**
+     * 4 - be removed from the group
+     * 5 - group is dismissed
+     * 8 - quit group
+     */
+    notInGroupReason.value = conversation?.operationType;
+  } else {
+    isNotInGroup.value = false;
+    notInGroupReason.value = undefined;
+  }
+}
+
+function onCurrentConversationUpdate(conversation: IConversationModel) {
+  updateUIUserNotInGroup(conversation);
+  // return when currentConversation is null
+  if (!conversation) {
+    return;
+  }
+  // return when currentConversationID.value is the same as conversation.conversationID.
+  if (currentConversationID.value === conversation?.conversationID) {
+    return;
+  }
+
+  isGroup.value = false;
+  let conversationType = TUIChatEngine.TYPES.CONV_C2C;
+  const conversationID = conversation.conversationID;
+  if (conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP)) {
+    conversationType = TUIChatEngine.TYPES.CONV_GROUP;
+    isGroup.value = true;
+    groupID.value = conversationID.replace(TUIChatEngine.TYPES.CONV_GROUP, '');
+  }
+
+  headerExtensionList.value = [];
+  isMultipleSelectMode.value = false;
+  // Initialize chatType
+  TUIChatConfig.setChatType(conversationType);
+  // While converstaion change success, notify callkit and roomkit、or other components.
+  TUICore.notifyEvent(TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED, TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED, { groupID: groupID.value });
+  // The TUICustomerServicePlugin plugin determines if the current conversation is a customer service conversation, then sets chatType and activates the conversation.
+  TUICore.callService({
+    serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
+    method: TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION,
+    params: { conversationID: conversationID },
+  });
+  // When open chat in room, close main chat ui and reset theme.
+  if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.ROOM) {
+    if (TUIChatConfig.getFeatureConfig(TUIConstants.TUIChat.FEATURE.InputVoice) === true) {
+      TUIChatConfig.setTheme('light');
+      currentConversationID.value = '';
+      return;
+    }
+  }
+  // Get chat header extensions
+  if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.GROUP) {
+    headerExtensionList.value = TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID);
+  }
+  TUIStore.update(StoreName.CUSTOM, 'activeConversation', conversationID);
+  currentConversationID.value = conversationID;
+}
+</script>
+
+<style scoped lang="scss" src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/emoji-picker-dialog.vue b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/emoji-picker-dialog.vue
new file mode 100644
index 00000000..faf192d3
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/emoji-picker-dialog.vue
@@ -0,0 +1,185 @@
+<template>
+  <div
+    ref="emojiPickerDialog"
+    :class="{
+      'emoji-picker': true,
+      'emoji-picker-h5': !isPC
+    }"
+  >
+    <ul
+      ref="emojiPickerListRef"
+      :class="['emoji-picker-list', !isPC && 'emoji-picker-h5-list']"
+    >
+      <li
+        v-for="(childrenItem, childrenIndex) in currentEmojiList"
+        :key="childrenIndex"
+        class="emoji-picker-list-item"
+        @click="select(childrenItem, childrenIndex)"
+      >
+        <img
+          v-if="currentTabItem.type === EMOJI_TYPE.BASIC"
+          class="emoji"
+          :src="currentTabItem.url + BASIC_EMOJI_URL_MAPPING[childrenItem]"
+        >
+        <img
+          v-else-if="currentTabItem.type === EMOJI_TYPE.BIG"
+          class="emoji-big"
+          :src="currentTabItem.url + childrenItem + '@2x.png'"
+        >
+        <img
+          v-else
+          class="emoji-custom emoji-big"
+          :src="currentTabItem.url + childrenItem"
+        >
+      </li>
+    </ul>
+    <ul class="emoji-picker-tab">
+      <li
+        v-for="(item, index) in list"
+        :key="index"
+        class="emoji-picker-tab-item"
+        @click="toggleEmojiTab(index)"
+      >
+        <Icon
+          v-if="item.type === EMOJI_TYPE.BASIC"
+          class="icon"
+          :file="faceIcon"
+        />
+        <img
+          v-else-if="item.type === EMOJI_TYPE.BIG"
+          class="icon-big"
+          :src="item.url + item.list[0] + '@2x.png'"
+        >
+        <img
+          v-else
+          class="icon-custom icon-big"
+          :src="item.url + item.list[0]"
+        >
+      </li>
+      <li
+        v-if="isUniFrameWork"
+        class="send-btn"
+        @click="sendMessage"
+      >
+        发送
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from '../../../../adapter-vue';
+import {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../common/Icon.vue';
+import faceIconLight from '../../../../assets/icon/face-light.svg';
+import faceIconDark from '../../../../assets/icon/face-dark.svg';
+import { EMOJI_TYPE } from '.././../../../constant';
+import { isPC, isUniFrameWork } from '../../../../utils/env';
+import { IEmojiGroupList, IEmojiGroup } from '../../../../interface';
+import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
+import { EMOJI_GROUP_LIST, BASIC_EMOJI_URL_MAPPING, convertKeyToEmojiName } from '../../emoji-config';
+import TUIChatConfig from '../../config';
+
+const faceIcon = TUIChatConfig.getTheme() === 'dark' ? faceIconDark : faceIconLight;
+const emits = defineEmits(['insertEmoji', 'onClose', 'sendMessage']);
+const currentTabIndex = ref<number>(0);
+const currentConversation = ref();
+const emojiPickerDialog = ref();
+const emojiPickerListRef = ref();
+const featureConfig = TUIChatConfig.getFeatureConfig();
+const list = ref<IEmojiGroupList>(initEmojiList());
+const currentTabItem = ref<IEmojiGroup>(list?.value[0]);
+const currentEmojiList = ref<string[]>(list?.value[0]?.list);
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+const toggleEmojiTab = (index: number) => {
+  currentTabIndex.value = index;
+  currentTabItem.value = list?.value[index];
+  currentEmojiList.value = list?.value[index]?.list;
+  // web & h5 side scroll to top
+  if (!isUniFrameWork) {
+    emojiPickerListRef?.value && (emojiPickerListRef.value.scrollTop = 0);
+  }
+};
+
+const select = (item: any, index: number) => {
+  const options: any = {
+    emoji: { key: item, name: convertKeyToEmojiName(item) },
+    type: currentTabItem?.value?.type,
+  };
+  switch (currentTabItem?.value?.type) {
+    case EMOJI_TYPE.BASIC:
+      options.url = currentTabItem?.value?.url + BASIC_EMOJI_URL_MAPPING[item];
+      if (isUniFrameWork) {
+        uni.$emit('insert-emoji', options);
+      } else {
+        emits('insertEmoji', options);
+      }
+      break;
+    case EMOJI_TYPE.BIG:
+      sendFaceMessage(index, currentTabItem.value);
+      break;
+    case EMOJI_TYPE.CUSTOM:
+      sendFaceMessage(index, currentTabItem.value);
+      break;
+    default:
+      break;
+  }
+  isPC && emits('onClose');
+};
+
+const sendFaceMessage = (index: number, listItem: IEmojiGroup) => {
+  const options = {
+    to:
+      currentConversation?.value?.groupProfile?.groupID
+      || currentConversation?.value?.userProfile?.userID,
+    conversationType: currentConversation?.value?.type,
+    payload: {
+      index: listItem.emojiGroupID,
+      data: listItem.list[index],
+    },
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  } as SendMessageParams;
+  TUIChatService.sendFaceMessage(options);
+};
+
+function sendMessage() {
+  uni.$emit('send-message-in-emoji-picker');
+}
+
+function onCurrentConversationUpdate(conversation: IConversationModel) {
+  currentConversation.value = conversation;
+}
+
+function initEmojiList() {
+  return EMOJI_GROUP_LIST.filter((item) => {
+    if (item.type === EMOJI_TYPE.BASIC) {
+      return featureConfig.InputEmoji;
+    }
+    if (item.type === EMOJI_TYPE.BIG) {
+      return featureConfig.InputStickers;
+    }
+    if (item.type === EMOJI_TYPE.CUSTOM) {
+      return featureConfig.InputStickers;
+    }
+  });
+}
+</script>
+
+<style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/index.ts b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/index.ts
new file mode 100644
index 00000000..33cc7405
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/index.ts
@@ -0,0 +1,2 @@
+import EmojiPicker from './index.vue';
+export default EmojiPicker;
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/index.vue b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/index.vue
new file mode 100644
index 00000000..3066bc85
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <ToolbarItemContainer
+    ref="container"
+    :iconFile="faceIcon"
+    title="表情"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
+  >
+    <EmojiPickerDialog
+      @insertEmoji="insertEmoji"
+      @sendMessage="sendMessage"
+      @onClose="onClose"
+    />
+  </ToolbarItemContainer>
+</template>
+<script lang="ts" setup>
+import {
+  TUIStore,
+  StoreName,
+  IConversationModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref } from '../../../../adapter-vue';
+import faceIconLight from '../../../../assets/icon/face-light.svg';
+import faceIconDark from '../../../../assets/icon/face-dark.svg';
+import EmojiPickerDialog from './emoji-picker-dialog.vue';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import { isH5 } from '../../../../utils/env';
+import { ToolbarDisplayType } from '../../../../interface';
+import TUIChatConfig from '../../config';
+
+interface IEmits {
+  (e: 'sendMessage'): void;
+  (e: 'toggleComponent'): void;
+  (e: 'insertEmoji', emoji: any): void;
+  (e: 'dialogShowInH5', dialogRef: HTMLElement): void;
+  (e: 'dialogCloseInH5', dialogRef: HTMLElement): void;
+  (e: 'changeToolbarDisplayType', type: ToolbarDisplayType): void;
+}
+
+const faceIcon = TUIChatConfig.getTheme() === 'dark' ? faceIconDark : faceIconLight;
+const emits = defineEmits<IEmits>();
+const currentConversation = ref();
+const container = ref<InstanceType<typeof ToolbarItemContainer>>();
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const onDialogShow = (dialogRef: any) => {
+  if (!isH5) {
+    return;
+  }
+  emits('changeToolbarDisplayType', 'emojiPicker');
+  emits('dialogShowInH5', dialogRef.value);
+};
+
+const onDialogClose = (dialogRef: any) => {
+  if (!isH5) {
+    return;
+  }
+  emits('changeToolbarDisplayType', 'none');
+  emits('dialogCloseInH5', dialogRef.value);
+};
+
+const insertEmoji = (emojiObj) => {
+  emits('insertEmoji', emojiObj);
+};
+const sendMessage = () => {
+  emits('sendMessage');
+};
+const onClose = () => {
+  container.value?.toggleDialogDisplay(false);
+};
+
+defineExpose({
+  closeEmojiPicker: onClose,
+});
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/style/h5.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/style/h5.scss
new file mode 100644
index 00000000..552adfca
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/style/h5.scss
@@ -0,0 +1,25 @@
+.emoji-picker-h5 {
+  width: 100%;
+
+  &-list {
+    justify-content: space-between;
+  }
+
+  &-list::after {
+    content: "";
+    display: block;
+    flex: 1 1 auto;
+  }
+
+  .send-btn {
+    width: 50px;
+    height: 30px;
+    background-color: #55C06A;
+    position: absolute;
+    right: 10px;
+    font-size: 16px;
+    color: #fff;
+    text-align: center;
+    line-height: 30px;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/style/index.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/style/index.scss
new file mode 100644
index 00000000..618221ff
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/style/index.scss
@@ -0,0 +1,4 @@
+@import "../../../../../assets/styles/common";
+@import "./web";
+@import "./h5";
+
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/style/web.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/style/web.scss
new file mode 100644
index 00000000..536b0500
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/style/web.scss
@@ -0,0 +1,55 @@
+.emoji-picker {
+  width: 405px;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+
+  &-list {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    overflow-y: auto;
+    margin: 2px;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &-item {
+      cursor: pointer;
+      padding: 5px;
+
+      .emoji {
+        width: 30px;
+        height: 30px;
+      }
+
+      .emoji-big {
+        width: 70px;
+        height: 70px;
+      }
+    }
+  }
+
+  &-tab {
+    display: flex;
+    align-items: center;
+
+    &-item {
+      padding: 0 10px;
+      cursor: pointer;
+
+      .icon {
+        margin: 10px;
+        width: 20px;
+        height: 20px;
+
+        &-big {
+          margin: 2px 0;
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.ts b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.ts
new file mode 100644
index 00000000..f9a4b117
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.ts
@@ -0,0 +1,2 @@
+import Evaluate from './index.vue';
+export default Evaluate;
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue
new file mode 100644
index 00000000..83e41fa6
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue
@@ -0,0 +1,211 @@
+<template>
+  <ToolbarItemContainer
+    ref="container"
+    :iconFile="evaluateIcon"
+    title="评价"
+    :needBottomPopup="true"
+    :iconWidth="isUniFrameWork ? '26px' : '20px'"
+    :iconHeight="isUniFrameWork ? '26px' : '20px'"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
+  >
+    <div :class="['evaluate', !isPC && 'evaluate-h5']">
+      <div :class="['evaluate-header', !isPC && 'evaluate-h5-header']">
+        <div
+          :class="[
+            'evaluate-header-content',
+            !isPC && 'evaluate-h5-header-content',
+          ]"
+        >
+          {{ TUITranslateService.t("Evaluate.请对本次服务进行评价") }}
+        </div>
+        <div
+          v-if="!isPC"
+          :class="[
+            'evaluate-header-close',
+            !isPC && 'evaluate-h5-header-close',
+          ]"
+          @click.stop="closeDialog"
+        >
+          {{ TUITranslateService.t("关闭") }}
+        </div>
+      </div>
+      <div :class="['evaluate-content', !isPC && 'evaluate-h5-content']">
+        <ul
+          :class="[
+            'evaluate-content-list',
+            !isPC && 'evaluate-h5-content-list',
+          ]"
+        >
+          <li
+            v-for="(item, index) in starList"
+            :key="index"
+            :class="[
+              'evaluate-content-list-item',
+              !isPC && 'evaluate-h5-content-list-item',
+            ]"
+            @click.stop="selectStar(index)"
+          >
+            <Icon
+              v-if="index <= currentStarIndex"
+              :file="starLightIcon"
+              :width="isPC ? '20px' : '30px'"
+              :height="isPC ? '20px' : '30px'"
+            />
+            <Icon
+              v-else
+              :file="starIcon"
+              :width="isPC ? '20px' : '30px'"
+              :height="isPC ? '20px' : '30px'"
+            />
+          </li>
+        </ul>
+        <textarea
+          v-model="comment"
+          :class="[
+            'evaluate-content-text',
+            !isPC && 'evaluate-h5-content-text',
+          ]"
+        />
+        <div
+          :class="[
+            'evaluate-content-button',
+            !isPC && 'evaluate-h5-content-button',
+          ]"
+        >
+          <button
+            :class="['btn', isEvaluateValid ? 'btn-valid' : 'btn-invalid']"
+            @click="submitEvaluate"
+          >
+            {{ TUITranslateService.t("Evaluate.提交评价") }}
+          </button>
+        </div>
+      </div>
+      <div :class="['evaluate-adv', !isPC && 'evaluate-h5-adv']">
+        {{ TUITranslateService.t("Evaluate.服务评价工具") }}
+        {{ "(" + TUITranslateService.t("Evaluate.使用") }}
+        <a @click="openLink(Link.customMessage)">
+          {{ TUITranslateService.t(`Evaluate.${Link.customMessage.label}`) }}
+        </a>
+        {{ TUITranslateService.t("Evaluate.搭建") + ")" }}
+      </div>
+    </div>
+  </ToolbarItemContainer>
+</template>
+<script setup lang="ts">
+import TUIChatEngine, {
+  TUITranslateService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  TUIChatService,
+  SendMessageParams,
+  SendMessageOptions,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref, computed } from '../../../../adapter-vue';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import evaluateIconLight from '../../../../assets/icon/evalute-light.svg';
+import evaluateIconDark from '../../../../assets/icon/evalute-dark.svg';
+import Link from '../../../../utils/documentLink';
+import Icon from '../../../common/Icon.vue';
+import starIcon from '../../../../assets/icon/star.png';
+import starLightIcon from '../../../../assets/icon/star-light.png';
+import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
+import { isPC, isH5, isUniFrameWork } from '../../../../utils/env';
+import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
+import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
+import TUIChatConfig from '../../config';
+
+const evaluateIcon = TUIChatConfig.getTheme() === 'dark' ? evaluateIconDark : evaluateIconLight;
+const props = defineProps({
+  starTotal: {
+    type: Number,
+    default: 5,
+  },
+});
+const emits = defineEmits(['onDialogPopupShowOrHide']);
+
+const container = ref();
+
+const starList = ref<number>(props.starTotal);
+const currentStarIndex = ref<number>(-1);
+const comment = ref('');
+const currentConversation = ref<IConversationModel>();
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const isEvaluateValid = computed(() => comment.value.length || currentStarIndex.value >= 0);
+
+const onDialogShow = () => {
+  emits('onDialogPopupShowOrHide', true);
+};
+
+const onDialogClose = () => {
+  resetEvaluate();
+  emits('onDialogPopupShowOrHide', false);
+};
+
+const openLink = () => {
+  if (isPC || isH5) {
+    window.open(Link?.customMessage?.url);
+  }
+};
+
+const closeDialog = () => {
+  container?.value?.toggleDialogDisplay(false);
+};
+
+const resetEvaluate = () => {
+  currentStarIndex.value = -1;
+  comment.value = '';
+};
+
+const selectStar = (starIndex?: any) => {
+  if (currentStarIndex.value === starIndex) {
+    currentStarIndex.value = currentStarIndex.value - 1;
+  } else {
+    currentStarIndex.value = starIndex;
+  }
+};
+
+const submitEvaluate = () => {
+  // The evaluate message must have at least one star or comment to be submitted.
+  if (currentStarIndex.value < 0 && !comment.value.length) {
+    return;
+  }
+  const payload = {
+    data: JSON.stringify({
+      businessID: CHAT_MSG_CUSTOM_TYPE.EVALUATE,
+      version: 1,
+      score: currentStarIndex.value + 1,
+      comment: comment.value,
+    }),
+    description: '对本次的服务评价',
+    extension: '对本次的服务评价',
+  };
+  const options = {
+    to:
+      currentConversation?.value?.groupProfile?.groupID
+      || currentConversation?.value?.userProfile?.userID,
+    conversationType: currentConversation?.value?.type,
+    payload,
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  };
+  const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+    conversation: currentConversation.value,
+    payload: options.payload,
+    messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
+  };
+  const sendMessageOptions: SendMessageOptions = {
+    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+  };
+  TUIChatService.sendCustomMessage(options as SendMessageParams, sendMessageOptions);
+  // close dialog after submit evaluate
+  container?.value?.toggleDialogDisplay(false);
+};
+</script>
+<style scoped lang="scss" src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/style/color.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/style/color.scss
new file mode 100644
index 00000000..3ab8d7dc
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/style/color.scss
@@ -0,0 +1,57 @@
+.evaluate {
+  background: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+  &-header {
+    &-content {
+      font-weight: 500;
+      color: #1c1c1c;
+    }
+  }
+
+  &-adv {
+    font-weight: 500;
+    color: #999;
+
+    a {
+      color: #006eff;
+    }
+  }
+
+  &-content {
+    &-text {
+      background: #f8f8f8;
+      border: 1px solid #ececec;
+    }
+
+    &-list {
+      &-item {
+        font-weight: 400;
+        color: #50545c;
+      }
+    }
+  }
+
+  &-H5 {
+    &-main {
+      background: rgba(0, 0, 0, 0.5);
+
+      .evaluate-main-content {
+        background: #fff;
+
+        p {
+          a {
+            color: #3370ff;
+          }
+        }
+
+        .close {
+          font-family: PingFangSC-Regular;
+          font-weight: 400;
+          color: #3370ff;
+          letter-spacing: 0;
+        }
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/style/h5.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/style/h5.scss
new file mode 100644
index 00000000..507b847a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/style/h5.scss
@@ -0,0 +1,63 @@
+.evaluate-h5 {
+  position: static;
+  width: 100%;
+  height: fit-content;
+  border-radius: 0;
+  background: #fff;
+  padding: 23px !important;
+  box-sizing: border-box;
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+
+    &-content {
+      font-size: 18px;
+    }
+
+    &-close {
+      font-size: 18px;
+      line-height: 27px;
+      font-weight: 400;
+      color: #3370ff;
+    }
+  }
+
+  &-content {
+    order: 1;
+
+    &-list {
+      &-item {
+        width: 40px;
+        height: 24px;
+        text-align: center;
+        cursor: auto;
+        font-size: 12px;
+      }
+    }
+
+    &-text {
+      font-size: 16px;
+      width: 100%;
+    }
+
+    &-button {
+      width: 100%;
+      display: flex;
+
+      .btn {
+        flex: 1;
+        padding: 14px 0;
+        font-size: 18px;
+        cursor: auto;
+      }
+    }
+  }
+
+  &-adv {
+    font-size: 14px;
+    font-weight: normal;
+    text-align: left;
+    color: #000;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/style/index.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/style/index.scss
new file mode 100644
index 00000000..7a512cc7
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/style/index.scss
@@ -0,0 +1,4 @@
+@import "./color";
+@import "./web";
+@import "./h5";
+@import "../../../../../assets/styles/common";
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/style/web.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/style/web.scss
new file mode 100644
index 00000000..4ff50940
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/style/web.scss
@@ -0,0 +1,93 @@
+.evaluate {
+  position: absolute;
+  z-index: 5;
+  width: 315px;
+  top: -255px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  background: url("https://web.sdk.qcloud.com/im/assets/images/login-background.png") no-repeat;
+  background-color: #fff;
+  background-size: cover;
+  background-position-x: 128px;
+  background-position-y: 77px;
+  user-select: none;
+
+  &-header {
+    &-content {
+      font-style: normal;
+      font-size: 12px;
+      line-height: 17px;
+      text-align: center;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 0;
+
+    &-list {
+      flex: 1;
+      display: flex;
+
+      &-item {
+        width: 24px;
+        height: 24px;
+        text-align: center;
+        cursor: pointer;
+        padding: 4px 0;
+        font-size: 12px;
+        padding-right: 15px;
+
+        &:last-child {
+          padding-right: 0 !important;
+        }
+      }
+    }
+
+    &-text {
+      box-sizing: border-box;
+      width: 288px;
+      height: 90px;
+      margin: 12px 0;
+      padding: 12px;
+      border-radius: 2px;
+      resize: none;
+    }
+
+    &-button {
+      .btn {
+        border: none;
+        border-radius: 5px;
+        font-size: 12px;
+        text-align: center;
+        line-height: 24px;
+        padding: 2px 46px;
+        font-weight: 400;
+        color: #fff;
+      }
+
+      .btn-valid {
+        background-color: #3370ff;
+        cursor: pointer;
+      }
+
+      .btn-invalid{
+        background-color: rgb(160, 207, 255);
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-adv {
+    font-size: 12px;
+    text-align: center;
+
+    a {
+      display: inline-block;
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/file-upload/index.ts b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/file-upload/index.ts
new file mode 100644
index 00000000..265dcca7
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/file-upload/index.ts
@@ -0,0 +1,2 @@
+import ImageUpload from './index.vue';
+export default ImageUpload;
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/file-upload/index.vue b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/file-upload/index.vue
new file mode 100644
index 00000000..4c3e1550
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/file-upload/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <ToolbarItemContainer
+    :iconFile="fileIcon"
+    title="文件"
+    :iconWidth="isUniFrameWork ? '32px' : '20px'"
+    :iconHeight="isUniFrameWork ? '25px' : '18px'"
+    :needDialog="false"
+    @onIconClick="onIconClick"
+  >
+    <div :class="['file-upload', !isPC && 'file-upload-h5']">
+      <input
+        ref="inputRef"
+        title="文件"
+        type="file"
+        data-type="file"
+        accept="*"
+        @change="sendFileMessage"
+      >
+    </div>
+  </ToolbarItemContainer>
+</template>
+<script lang="ts" setup>
+import TUIChatEngine, {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+  SendMessageOptions,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref } from '../../../../adapter-vue';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import fileIconLight from '../../../../assets/icon/file-light.svg';
+import fileIconDark from '../../../../assets/icon/file-dark.svg';
+import { isPC, isUniFrameWork } from '../../../../utils/env';
+import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
+import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
+import TUIChatConfig from '../../config';
+
+const fileIcon = TUIChatConfig.getTheme() === 'dark' ? fileIconDark : fileIconLight;
+const inputRef = ref();
+const currentConversation = ref<IConversationModel>();
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const onIconClick = () => {
+  if (isUniFrameWork) {
+    return;
+  } else {
+    inputRef?.value?.click && inputRef?.value?.click();
+  }
+};
+
+const sendFileMessage = (e: any) => {
+  if (e?.target?.files?.length <= 0) {
+    return;
+  }
+  const options = {
+    to:
+      currentConversation?.value?.groupProfile?.groupID
+      || currentConversation?.value?.userProfile?.userID,
+    conversationType: currentConversation?.value?.type,
+    payload: {
+      file: e?.target,
+    },
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  } as SendMessageParams;
+  const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+    conversation: currentConversation.value,
+    payload: options.payload,
+    messageType: TUIChatEngine.TYPES.MSG_FILE,
+  };
+  const sendMessageOptions: SendMessageOptions = {
+    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+  };
+  TUIChatService.sendFileMessage(options, sendMessageOptions);
+  e.target.value = '';
+};
+</script>
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/image-upload/index.ts b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/image-upload/index.ts
new file mode 100644
index 00000000..265dcca7
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/image-upload/index.ts
@@ -0,0 +1,2 @@
+import ImageUpload from './index.vue';
+export default ImageUpload;
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/image-upload/index.vue b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/image-upload/index.vue
new file mode 100644
index 00000000..7cc7de6a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/image-upload/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <ToolbarItemContainer
+    :iconFile="imageToolbarForShow.icon"
+    :title="imageToolbarForShow.title"
+    :iconWidth="isUniFrameWork ? '32px' : '20px'"
+    :iconHeight="isUniFrameWork ? '25px' : '18px'"
+    :needDialog="false"
+    @onIconClick="onIconClick"
+  >
+    <div
+      v-if="!isUniFrameWork"
+      :class="['image-upload', !isPC && 'image-upload-h5']"
+    >
+      <input
+        ref="inputRef"
+        title="图片"
+        type="file"
+        data-type="image"
+        accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp,image/webp"
+        @change="sendImageInWeb"
+      >
+    </div>
+  </ToolbarItemContainer>
+</template>
+<script lang="ts" setup>
+import TUIChatEngine, {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+  SendMessageOptions,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { ref, computed } from '../../../../adapter-vue';
+import { isPC, isWeChat, isUniFrameWork } from '../../../../utils/env';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import imageIconLight from '../../../../assets/icon/image-light.svg';
+import imageIconDark from '../../../../assets/icon/image-dark.svg';
+import imageUniIcon from '../../../../assets/icon/image-uni.png';
+import cameraUniIcon from '../../../../assets/icon/camera-uni.png';
+import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
+import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
+import TUIChatConfig from '../../config';
+
+const props = defineProps({
+  // Image source: only valid for uni-app version, web version only supports selecting images from the album.
+  // album: Select from album
+  // camera: Take a photo using the camera
+  imageSourceType: {
+    type: String,
+    default: 'album',
+  },
+});
+
+const inputRef = ref();
+const currentConversation = ref<IConversationModel>();
+const theme = TUIChatConfig.getTheme();
+const IMAGE_TOOLBAR_SHOW_MAP = {
+  web_album: {
+    icon: theme === 'dark' ? imageIconDark : imageIconLight,
+    title: '图片',
+  },
+  uni_album: {
+    icon: imageUniIcon,
+    title: '图片',
+  },
+  uni_camera: {
+    icon: cameraUniIcon,
+    title: '拍照',
+  },
+};
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const imageToolbarForShow = computed((): { icon: string; title: string } => {
+  if (isUniFrameWork) {
+    return props.imageSourceType === 'camera'
+      ? IMAGE_TOOLBAR_SHOW_MAP['uni_camera']
+      : IMAGE_TOOLBAR_SHOW_MAP['uni_album'];
+  } else {
+    return IMAGE_TOOLBAR_SHOW_MAP['web_album'];
+  }
+});
+
+const onIconClick = () => {
+  // uni-app send image
+  if (isUniFrameWork) {
+    if (isWeChat && TUIGlobal?.chooseMedia) {
+      TUIGlobal?.chooseMedia({
+        count: 1,
+        mediaType: ['image'],
+        sizeType: ['original', 'compressed'],
+        sourceType: [props.imageSourceType], // Use camera or select from album.
+        success: function (res: any) {
+          sendImageMessage(res);
+        },
+      });
+    } else {
+      // uni-app H5/App send image
+      TUIGlobal?.chooseImage({
+        count: 1,
+        sourceType: [props.imageSourceType], // Use camera or select from album.
+        success: function (res) {
+          sendImageMessage(res);
+        },
+      });
+    }
+  } else {
+    if (inputRef.value?.click) {
+      inputRef.value.click();
+    }
+  }
+};
+
+const sendImageInWeb = (e: any) => {
+  if (e?.target?.files?.length <= 0) {
+    return;
+  }
+  sendImageMessage(e?.target);
+  e.target.value = '';
+};
+
+const sendImageMessage = (files: any) => {
+  if (!files) {
+    return;
+  }
+  const options = {
+    to:
+      currentConversation?.value?.groupProfile?.groupID
+      || currentConversation?.value?.userProfile?.userID,
+    conversationType: currentConversation?.value?.type,
+    payload: {
+      file: files,
+    },
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  } as SendMessageParams;
+  const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+    conversation: currentConversation.value,
+    payload: options.payload,
+    messageType: TUIChatEngine.TYPES.MSG_IMAGE,
+  };
+  const sendMessageOptions: SendMessageOptions = {
+    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+  };
+  TUIChatService.sendImageMessage(options, sendMessageOptions);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/index.ts b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/index.ts
new file mode 100644
index 00000000..e609f1e9
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/index.ts
@@ -0,0 +1,2 @@
+import MessageInputToolbar from './index.vue';
+export default MessageInputToolbar;
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/index.vue b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/index.vue
new file mode 100644
index 00000000..a06fe2c2
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/index.vue
@@ -0,0 +1,323 @@
+<template>
+  <div
+    :class="[
+      'message-input-toolbar',
+      !isPC && 'message-input-toolbar-h5',
+      isUniFrameWork && 'message-input-toolbar-uni',
+    ]"
+  >
+    <div
+      :class="[
+        'message-input-toolbar-list',
+        !isPC && 'message-input-toolbar-h5-list',
+        isUniFrameWork && 'message-input-toolbar-uni-list',
+      ]"
+    >
+      <EmojiPicker
+        v-if="isRenderedEmojiPicker"
+        ref="emojiPickerRef"
+        @insertEmoji="insertEmoji"
+        @dialogShowInH5="dialogShowInH5"
+        @dialogCloseInH5="dialogCloseInH5"
+        @changeToolbarDisplayType="(type) => emits('changeToolbarDisplayType', type)"
+      />
+      <ImageUpload
+        v-if="featureConfig.InputImage"
+        imageSourceType="album"
+      />
+      <FileUpload v-if="featureConfig.InputFile" />
+      <VideoUpload
+        v-if="featureConfig.InputVideo"
+        videoSourceType="album"
+      />
+      <Evaluate v-if="featureConfig.InputEvaluation" />
+      <Words v-if="featureConfig.InputQuickReplies" />
+      <template v-if="extensionListShowInStart[0]">
+        <ToolbarItemContainer
+          v-for="extension in extensionListShowInStart"
+          :key="extension.id"
+          :iconFile="genExtensionIcon(extension)"
+          :title="genExtensionText(extension)"
+          :iconWidth="isUniFrameWork ? '25px' : '20px'"
+          :iconHeight="isUniFrameWork ? '25px' : '20px'"
+          :needDialog="false"
+          @onIconClick="onExtensionClick(extension)"
+        />
+      </template>
+    </div>
+    <div
+      v-if="extensionListShowInEnd[0] && isPC"
+      :class="['message-input-toolbar-list-end']"
+    >
+      <ToolbarItemContainer
+        v-for="(extension, index) in extensionListShowInEnd"
+        :key="index"
+        :iconFile="genExtensionIcon(extension)"
+        :title="genExtensionText(extension)"
+        :iconWidth="isUniFrameWork ? '25px' : '20px'"
+        :iconHeight="isUniFrameWork ? '25px' : '20px'"
+        :needDialog="false"
+        @onIconClick="onExtensionClick(extension)"
+      />
+    </div>
+    <UserSelector
+      ref="userSelectorRef"
+      :type="selectorShowType"
+      :currentConversation="currentConversation"
+      :isGroup="isGroup"
+      @submit="onUserSelectorSubmit"
+      @cancel="onUserSelectorCancel"
+    />
+    <div
+      v-if="isH5"
+      ref="h5Dialog"
+      :class="['message-input-toolbar-h5-dialog']"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from '../../../adapter-vue';
+import TUIChatEngine, {
+  IConversationModel,
+  TUIStore,
+  StoreName,
+  TUIReportService,
+} from '@tencentcloud/chat-uikit-engine';
+import TUICore, { ExtensionInfo, TUIConstants } from '@tencentcloud/tui-core';
+import EmojiPicker from './emoji-picker/index.vue';
+import ImageUpload from './image-upload/index.vue';
+import FileUpload from './file-upload/index.vue';
+import VideoUpload from './video-upload/index.vue';
+import Evaluate from './evaluate/index.vue';
+import Words from './words/index.vue';
+import ToolbarItemContainer from './toolbar-item-container/index.vue';
+import UserSelector from './user-selector/index.vue';
+import { isPC, isH5, isUniFrameWork } from '../../../utils/env';
+import TUIChatConfig from '../config';
+import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus';
+import { ToolbarDisplayType } from '../../../interface';
+
+interface IProps {
+  displayType: ToolbarDisplayType;
+}
+interface IEmits {
+  (e: 'scrollToLatestMessage'): void;
+  (e: 'changeToolbarDisplayType', type: ToolbarDisplayType): void;
+  (e: 'insertEmoji', emoji: any): void
+}
+const props = withDefaults(defineProps<IProps>(), {
+  displayType: 'none',
+});
+
+const emits = defineEmits<IEmits>();
+const h5Dialog = ref<HTMLElement>();
+const currentConversation = ref<IConversationModel>();
+const isGroup = ref<boolean>(false);
+const selectorShowType = ref<string>('');
+const userSelectorRef = ref();
+const emojiPickerRef = ref<InstanceType<typeof EmojiPicker>>();
+const currentUserSelectorExtension = ref<ExtensionInfo>();
+const currentExtensionList = ref<ExtensionInfo[]>([]);
+const featureConfig = TUIChatConfig.getFeatureConfig();
+const isRenderedEmojiPicker = ref<boolean>(true);
+isRenderedEmojiPicker.value = featureConfig.InputEmoji || featureConfig.InputStickers;
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CUSTOM, {
+    activeConversation: onActiveConversationUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    activeConversation: onActiveConversationUpdate,
+  });
+});
+
+watch(() => props.displayType, (newValue) => {
+  if (newValue === 'none') {
+    emojiPickerRef.value?.closeEmojiPicker();
+  } else {
+    emits('scrollToLatestMessage');
+  }
+});
+
+const onActiveConversationUpdate = (conversationID: string) => {
+  if (!conversationID) {
+    return;
+  }
+  if (conversationID !== currentConversation.value?.conversationID) {
+    getExtensionList();
+    currentConversation.value = TUIStore.getData(StoreName.CONV, 'currentConversation');
+    isGroup.value = conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP);
+  }
+};
+
+const getExtensionList = () => {
+  const chatType = TUIChatConfig.getChatType();
+  const params: Record<string, boolean | string> = { chatType };
+  // Backward compatibility: When callkit does not have chatType judgment, use filterVoice and filterVideo to filter
+  if (chatType === TUIConstants.TUIChat.TYPE.CUSTOMER_SERVICE) {
+    params.filterVoice = true;
+    params.filterVideo = true;
+    enableSampleTaskStatus('customerService');
+  }
+  currentExtensionList.value = [
+    ...TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, params),
+  ].filter((extension: ExtensionInfo) => {
+    if (extension?.data?.name === 'search') {
+      return featureConfig.MessageSearch;
+    }
+    return true;
+  });
+  reportExtension(currentExtensionList.value);
+};
+
+function reportExtension(extensionList:ExtensionInfo[]){
+  extensionList.forEach((extension: ExtensionInfo)=>{
+    const _name = extension?.data?.name;
+    if(_name === 'voiceCall'){
+      TUIReportService.reportFeature(203, 'voice-call');
+    } else if (_name === 'videoCall') {
+      TUIReportService.reportFeature(203, 'video-call');
+    } else if(_name === 'quickRoom'){
+      TUIReportService.reportFeature(204);
+    }
+  });
+}
+
+const extensionListShowInStart = computed<ExtensionInfo[]>(() => {
+  if (isPC) {
+    const extensionList = currentExtensionList.value.filter((extension: ExtensionInfo) => extension?.data?.name !== 'search');
+    return extensionList;
+  }
+  return currentExtensionList.value;
+});
+
+const extensionListShowInEnd = computed<ExtensionInfo[]>(() => {
+  if (isPC) {
+    const searchExtension = currentExtensionList.value.find(extension => extension?.data?.name === 'search');
+    return searchExtension ? [searchExtension] : [];
+  }
+  return [];
+});
+
+// handle extensions onclick
+const onExtensionClick = (extension: ExtensionInfo) => {
+  switch (extension?.data?.name) {
+    case 'voiceCall':
+      onCallExtensionClicked(extension, 1);
+      break;
+    case 'videoCall':
+      onCallExtensionClicked(extension, 2);
+      break;
+    default:
+      (extension as any)?.listener?.onClicked(currentConversation.value?._conversation);
+      break;
+  }
+};
+
+const onCallExtensionClicked = (extension: ExtensionInfo, callType: number) => {
+  selectorShowType.value = extension?.data?.name;
+  if (currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_C2C) {
+    extension.listener?.onClicked?.({
+      userIDList: [currentConversation?.value?.conversationID?.slice(3)],
+      type: callType,
+    });
+  } else if (isGroup.value) {
+    currentUserSelectorExtension.value = extension;
+    userSelectorRef?.value?.toggleShow && userSelectorRef.value.toggleShow(true);
+  }
+};
+
+const genExtensionIcon = (extension: any) => {
+  return extension?.icon;
+};
+
+const genExtensionText = (extension: any) => {
+  return extension?.text;
+};
+
+const onUserSelectorSubmit = (selectedInfo: any) => {
+  currentUserSelectorExtension.value?.listener?.onClicked?.(selectedInfo);
+  currentUserSelectorExtension.value = undefined;
+};
+
+const onUserSelectorCancel = () => {
+  currentUserSelectorExtension.value = undefined;
+};
+
+const insertEmoji = (emojiObj: object) => {
+  emits('insertEmoji', emojiObj);
+};
+
+const dialogShowInH5 = (dialogDom: any) => {
+  if (!isH5) {
+    return;
+  }
+  h5Dialog.value?.appendChild && h5Dialog.value?.appendChild(dialogDom);
+};
+
+const dialogCloseInH5 = (dialogDom: any) => {
+  if (!isH5) {
+    return;
+  }
+  if (dialogDom) {
+    h5Dialog.value?.removeChild && h5Dialog.value?.removeChild(dialogDom);
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "../../../assets/styles/common";
+
+.message-input-toolbar {
+  border-top: 1px solid #f4f5f9;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  &-list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .extension-list {
+      list-style: none;
+      display: flex;
+
+      &-item {
+        width: 20px;
+        height: 20px;
+        padding: 12px 10px 1px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.message-input-toolbar-h5 {
+  padding: 5px 10px;
+  box-sizing: border-box;
+  flex-direction: column;
+}
+
+.message-input-toolbar-uni {
+  background-color: #ebf0f6;
+  flex-direction: column;
+
+  &-list {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(4, 25%);
+    grid-template-rows: repeat(2, 100px);
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/style/uni.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/style/uni.scss
new file mode 100644
index 00000000..1715d307
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/style/uni.scss
@@ -0,0 +1,111 @@
+/* stylelint-disable */
+.message-input-toolbar {
+  border-top: 1px solid #f4f5f9;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  z-index: 100;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  &-list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .extension-list {
+      list-style: none;
+      display: flex;
+
+      &-item {
+        width: 20px;
+        height: 20px;
+        padding: 12px 10px 1px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.message-input-toolbar-h5 {
+  padding: 5px 10px;
+  box-sizing: border-box;
+  flex-direction: column;
+}
+
+.message-input-toolbar-uni {
+  background-color: #ebf0f6;
+  flex-direction: column;
+  z-index: 100;
+
+  &-list {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(4, 25%);
+    grid-template-rows: repeat(2, 100px);
+  }
+}
+
+// uniapp swiper style
+wx-swiper .wx-swiper-wrapper,
+wx-swiper .wx-swiper-slides,
+wx-swiper .wx-swiper-slide-frame,
+.message-input-toolbar-list {
+  overflow: visible !important;
+}
+
+.message-input-toolbar {
+
+  .bottom-popup,
+  .bottom-popup-h5,
+  .bottom-popup-uni {
+    position: sticky !important;
+  }
+}
+
+.message-input-toolbar-swiper {
+  width: 100%;
+  height: 220px;
+
+  ::v-deep .uni-swiper-wrapper,
+  wx-swiper .wx-swiper-wrapper {
+    overflow: visible !important;
+
+    .uni-swiper-slides,
+    .wx-swiper-slides,
+    wx-swiper .wx-swiper-slides {
+      overflow: visible !important;
+
+      .uni-swiper-slide-frame,
+      .wx-swiper-slide-frame,
+      wx-swiper .wx-swiper-slide-frame {
+        overflow: visible !important;
+
+        .message-input-toolbar-list {
+          overflow: visible !important;
+        }
+
+        .toolbar-item-container-uni {
+          position: static !important;
+        }
+
+        .toolbar-item-container-dialog {
+          position: absolute !important;
+          background: transparent;
+          left: -10px;
+          bottom: -5px;
+
+          .bottom-popup-uni {
+            position: sticky !important;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue
new file mode 100644
index 00000000..e16f5120
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue
@@ -0,0 +1,138 @@
+<template>
+  <div
+    ref="toolbarItemRef"
+    :class="[
+      'toolbar-item-container',
+      !isPC && 'toolbar-item-container-h5',
+      isUniFrameWork && 'toolbar-item-container-uni',
+    ]"
+  >
+    <div
+      :class="[
+        'toolbar-item-container-icon',
+        isUniFrameWork && 'toolbar-item-container-uni-icon',
+      ]"
+      @click="toggleToolbarItem"
+    >
+      <Icon
+        :file="props.iconFile"
+        class="icon"
+        :width="props.iconWidth"
+        :height="props.iconHeight"
+      />
+    </div>
+    <div
+      v-if="isUniFrameWork"
+      :class="['toolbar-item-container-uni-title']"
+    >
+      {{ props.title }}
+    </div>
+    <div
+      v-show="showDialog"
+      ref="dialogRef"
+      :class="[
+        'toolbar-item-container-dialog',
+        isDark && 'toolbar-item-container-dialog-dark',
+        !isPC && 'toolbar-item-container-h5-dialog',
+        isUniFrameWork && 'toolbar-item-container-uni-dialog',
+      ]"
+    >
+      <BottomPopup
+        v-if="props.needBottomPopup && !isPC"
+        class="toolbar-bottom-popup"
+        :show="showDialog"
+        @touchmove.stop.prevent
+        @onClose="onPopupClose"
+      >
+        <slot />
+      </BottomPopup>
+      <slot v-else />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from '../../../../adapter-vue';
+import { outsideClick } from '@tencentcloud/universal-api';
+import Icon from '../../../common/Icon.vue';
+import BottomPopup from '../../../common/BottomPopup/index.vue';
+import { isPC, isUniFrameWork } from '../../../../utils/env';
+import TUIChatConfig from '../../config';
+
+const props = defineProps({
+  iconFile: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  needDialog: {
+    type: Boolean,
+    default: true,
+  },
+  iconWidth: {
+    type: String,
+    default: '20px',
+  },
+  iconHeight: {
+    type: String,
+    default: '20px',
+  },
+  // Whether to display the bottom popup dialog on mobile devices
+  // Invalid on PC
+  needBottomPopup: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emits = defineEmits(['onIconClick', 'onDialogClose', 'onDialogShow']);
+
+const isDark = ref(TUIChatConfig.getTheme() === 'dark');
+const showDialog = ref(false);
+const toolbarItemRef = ref();
+const dialogRef = ref();
+
+const toggleToolbarItem = () => {
+  emits('onIconClick', dialogRef);
+  if (isPC) {
+    outsideClick.listen({
+      domRefs: toolbarItemRef.value,
+      handler: closeToolbarItem,
+    });
+  }
+  if (!props.needDialog) {
+    return;
+  }
+  toggleDialogDisplay(!showDialog.value);
+};
+
+const closeToolbarItem = () => {
+  showDialog.value = false;
+  emits('onDialogClose', dialogRef);
+};
+
+const toggleDialogDisplay = (showStatus: boolean) => {
+  if (showDialog.value === showStatus) {
+    return;
+  }
+  showDialog.value = showStatus;
+  switch (showStatus) {
+    case true:
+      emits('onDialogShow', dialogRef);
+      break;
+    case false:
+      emits('onDialogClose', dialogRef);
+  }
+};
+
+const onPopupClose = () => {
+  showDialog.value = false;
+};
+
+defineExpose({
+  toggleDialogDisplay,
+});
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/color.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/color.scss
new file mode 100644
index 00000000..d13eab6d
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/color.scss
@@ -0,0 +1,6 @@
+.toolbar-item-container {
+  &-dialog {
+    background: #fff;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/h5.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/h5.scss
new file mode 100644
index 00000000..31a3b741
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/h5.scss
@@ -0,0 +1,7 @@
+.toolbar-item-container-h5 {
+  &-dialog {
+    position: static !important;
+    width: 100%;
+    box-shadow: none;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/index.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/index.scss
new file mode 100644
index 00000000..92b8dfcf
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/index.scss
@@ -0,0 +1,5 @@
+@import "../../../../../assets/styles/common";
+@import "./color";
+@import "./web";
+@import "./h5";
+@import "./uni";
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/uni.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/uni.scss
new file mode 100644
index 00000000..be1f674e
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/uni.scss
@@ -0,0 +1,36 @@
+.toolbar-item-container-uni {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: static;
+
+  &-icon {
+    background: #fff;
+    border-radius: 15px;
+    width: 60px;
+    height: 60px;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-title {
+    font-size: 14px;
+    color: #8F959D;
+  }
+
+  &-dialog{
+    position: absolute !important;
+    background: transparent;
+    left: -10px;
+    bottom: -5px;
+
+    .toolbar-bottom-popup{
+      position: sticky;
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/web.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/web.scss
new file mode 100644
index 00000000..fa686312
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/web.scss
@@ -0,0 +1,24 @@
+.toolbar-item-container {
+  position: relative;
+
+  &-icon {
+    padding: 8px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  &-dialog {
+    z-index: 5;
+    position: absolute;
+    background: #fff;
+    box-shadow: 0 2px 4px -3px rgba(32, 77, 141, 0.03), 0 6px 10px 1px rgba(32, 77, 141, 0.06), 0 3px 14px 2px rgba(32, 77, 141, 0.05);
+    width: fit-content;
+    height: fit-content;
+    bottom: 35px;
+  }
+
+  &-dialog-dark {
+    background: #22262E;
+    box-shadow: 0 8px 40px 0 rgba(23, 25, 31, 0.6), 0 4px 12px 0 rgba(23, 25, 31, 0.8);
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.ts b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.ts
new file mode 100644
index 00000000..d2e3369d
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.ts
@@ -0,0 +1,2 @@
+import UserSelector from './index.vue';
+export default UserSelector;
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.vue b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.vue
new file mode 100644
index 00000000..f7bdc510
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.vue
@@ -0,0 +1,127 @@
+<template>
+  <Dialog
+    :show="show"
+    :isH5="!isPC"
+    :isHeaderShow="false"
+    :isFooterShow="false"
+    :background="false"
+    @update:show="toggleShow"
+  >
+    <Transfer
+      :isSearch="true"
+      :title="title"
+      :list="searchMemberList"
+      :isH5="!isPC"
+      :isRadio="false"
+      @search="search"
+      @submit="submit"
+      @cancel="cancel"
+    />
+  </Dialog>
+</template>
+<script setup lang="ts">
+import {
+  TUIGroupService,
+  TUIUserService,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref, computed, watch } from '../../../../adapter-vue';
+import Dialog from '../../../common/Dialog/index.vue';
+import Transfer from '../../../common/Transfer/index.vue';
+import { isPC } from '../../../../utils/env';
+
+const props = defineProps({
+  // type: voiceCall/groupCall/...
+  type: {
+    type: String,
+    default: '',
+  },
+  currentConversation: {
+    type: Object,
+    default: () => ({}),
+  },
+  isGroup: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(['submit', 'cancel']);
+const show = ref<boolean>(false);
+const groupID = ref<string>('');
+const memberList = ref<any[]>([]);
+const searchMemberList = ref<any[]>([]);
+const selfUserID = ref<string>('');
+const titleMap: any = {
+  voiceCall: '发起群语音',
+  videoCall: '发起群视频',
+};
+const title = computed(() => {
+  return titleMap[props.type] ? titleMap[props.type] : '';
+});
+
+TUIUserService.getUserProfile().then((res: any) => {
+  if (res?.data?.userID) {
+    selfUserID.value = res.data.userID;
+  }
+});
+
+watch(
+  () => [props?.currentConversation?.conversationID, show.value],
+  (newVal: any, oldVal: any) => {
+    if (newVal && newVal !== oldVal) {
+      if (props.isGroup && show.value) {
+        groupID.value = props.currentConversation.groupProfile.groupID;
+        TUIGroupService.getGroupMemberList({
+          groupID: groupID.value,
+        }).then((res: any) => {
+          memberList.value = res?.data?.memberList?.filter(
+            (user: any) => user?.userID !== selfUserID.value,
+          );
+          searchMemberList.value = memberList.value;
+        });
+      } else {
+        groupID.value = '';
+        memberList.value = [];
+        searchMemberList.value = memberList.value;
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const search = (searchInfo: string) => {
+  const results = memberList.value?.filter(
+    (member: any) => member?.userID === searchInfo,
+  );
+  searchMemberList.value = results?.length ? results : memberList.value;
+};
+
+const submit = (selectedMemberList: string[]) => {
+  const userIDList: string[] = [];
+  selectedMemberList?.forEach((user: any) => {
+    user?.userID && userIDList.push(user.userID);
+  });
+  if (props.type === 'voiceCall') {
+    emits('submit', { userIDList, groupID: groupID.value, type: 1 });
+  } else if (props.type === 'videoCall') {
+    emits('submit', { userIDList, groupID: groupID.value, type: 2 });
+  }
+  searchMemberList.value = memberList.value;
+  toggleShow(false);
+};
+
+const cancel = () => {
+  searchMemberList.value = memberList.value;
+  emits('cancel');
+  toggleShow(false);
+};
+
+const toggleShow = (showStatus: boolean) => {
+  show.value = showStatus;
+};
+
+defineExpose({
+  toggleShow,
+});
+</script>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/video-upload/index.ts b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/video-upload/index.ts
new file mode 100644
index 00000000..265dcca7
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/video-upload/index.ts
@@ -0,0 +1,2 @@
+import ImageUpload from './index.vue';
+export default ImageUpload;
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/video-upload/index.vue b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/video-upload/index.vue
new file mode 100644
index 00000000..23e910b2
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/video-upload/index.vue
@@ -0,0 +1,155 @@
+<template>
+  <ToolbarItemContainer
+    :iconFile="handleIcon()"
+    :title="handleTitle()"
+    :needDialog="false"
+    :iconWidth="isUniFrameWork ? '32px' : '20px'"
+    :iconHeight="isUniFrameWork
+      ? props.videoSourceType === 'album'
+        ? '20px'
+        : '25px'
+      : '18px'
+    "
+    @onIconClick="onIconClick"
+  >
+    <div :class="['video-upload', !isPC && 'video-upload-h5']">
+      <input
+        ref="inputRef"
+        title="视频"
+        type="file"
+        data-type="video"
+        accept="video/*"
+        @change="sendVideoInWeb"
+      >
+    </div>
+  </ToolbarItemContainer>
+</template>
+<script lang="ts" setup>
+import TUIChatEngine, {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+  SendMessageOptions,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { ref } from '../../../../adapter-vue';
+import { isPC, isWeChat, isUniFrameWork } from '../../../../utils/env';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import videoIconLight from '../../../../assets/icon/video-light.svg';
+import videoIconDark from '../../../../assets/icon/video-dark.svg';
+import videoUniIcon from '../../../../assets/icon/video-uni.png';
+import cameraUniIcon from '../../../../assets/icon/camera-uni.png';
+import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
+import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
+import TUIChatConfig from '../../config';
+
+const props = defineProps({
+  // Video source, only valid for uni-app version, web version only supports selecting videos from files
+  // album: Select from files
+  // camera: Take a video using the camera
+  videoSourceType: {
+    type: String,
+    default: 'album',
+  },
+});
+
+const inputRef = ref();
+const currentConversation = ref<IConversationModel>();
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const handleIcon = (): string => {
+  if (isUniFrameWork) {
+    switch (props.videoSourceType) {
+      case 'album':
+        return videoUniIcon;
+      case 'camera':
+        return cameraUniIcon;
+      default:
+        return videoUniIcon;
+    }
+  } else {
+    const videoIcon = TUIChatConfig.getTheme() === 'dark' ? videoIconDark : videoIconLight;
+    return videoIcon;
+  }
+};
+
+const handleTitle = (): string => {
+  if (isUniFrameWork && props.videoSourceType === 'camera') {
+    return '录制';
+  } else {
+    return '视频';
+  }
+};
+
+const onIconClick = () => {
+  // uni-app send video
+  if (isUniFrameWork) {
+    if (isWeChat && TUIGlobal?.chooseMedia) {
+      TUIGlobal?.chooseMedia({
+        mediaType: ['video'],
+        count: 1,
+        sourceType: [props.videoSourceType],
+        maxDuration: 60,
+        success: function (res: any) {
+          sendVideoMessage(res);
+        },
+      });
+    } else {
+      TUIGlobal?.chooseVideo({
+        count: 1,
+        sourceType: [props.videoSourceType],
+        compressed: false,
+        success: function (res: any) {
+          sendVideoMessage(res);
+        },
+      });
+    }
+  } else {
+    inputRef?.value?.click && inputRef?.value?.click();
+  }
+};
+
+const sendVideoInWeb = (e: any) => {
+  if (e?.target?.files?.length <= 0) {
+    return;
+  }
+  sendVideoMessage(e?.target);
+  e.target.value = '';
+};
+
+const sendVideoMessage = (file: any) => {
+  if (!file) {
+    return;
+  }
+  const options = {
+    to:
+      currentConversation?.value?.groupProfile?.groupID
+      || currentConversation?.value?.userProfile?.userID,
+    conversationType: currentConversation?.value?.type,
+    payload: {
+      file,
+    },
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  } as SendMessageParams;
+  const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+    conversation: currentConversation.value,
+    payload: options.payload,
+    messageType: TUIChatEngine.TYPES.MSG_VIDEO,
+  };
+  const sendMessageOptions: SendMessageOptions = {
+    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+  };
+  TUIChatService.sendVideoMessage(options, sendMessageOptions);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/index.ts b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/index.ts
new file mode 100644
index 00000000..e5744640
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/index.ts
@@ -0,0 +1,2 @@
+import Words from "./index.vue";
+export default Words;
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/index.vue b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/index.vue
new file mode 100644
index 00000000..a57ec928
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/index.vue
@@ -0,0 +1,95 @@
+<template>
+  <ToolbarItemContainer
+    ref="container"
+    :iconFile="wordsIcon"
+    title="常用语"
+    :needBottomPopup="true"
+    :iconWidth="isUniFrameWork ? '26px' : '20px'"
+    :iconHeight="isUniFrameWork ? '26px' : '20px'"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
+  >
+    <div :class="['words', !isPC && 'words-h5']">
+      <div :class="['words-header', !isPC && 'words-h5-header']">
+        <span :class="['words-header-title', !isPC && 'words-h5-header-title']">
+          {{ TUITranslateService.t("Words.常用语-快捷回复工具") }}
+        </span>
+        <span
+          v-if="!isPC"
+          :class="['words-header-close', !isPC && 'words-h5-header-close']"
+          @click="closeDialog"
+        >
+          关闭
+        </span>
+      </div>
+      <ul :class="['words-list', !isPC && 'words-h5-list']">
+        <li
+          v-for="(item, index) in wordsList"
+          :key="index"
+          :class="['words-list-item', !isPC && 'words-h5-list-item']"
+          @click="selectWord(item)"
+        >
+          {{ TUITranslateService.t(`Words.${item.value}`) }}
+        </li>
+      </ul>
+    </div>
+  </ToolbarItemContainer>
+</template>
+<script setup lang="ts">
+import {
+  TUITranslateService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref } from '../../../../adapter-vue';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import wordsIconLight from '../../../../assets/icon/words-light.svg';
+import wordsIconDark from '../../../../assets/icon/words-dark.svg';
+import { wordsList } from '../../utils/wordsList';
+import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
+import { isPC, isUniFrameWork } from '../../../../utils/env';
+import TUIChatConfig from '../../config';
+
+const wordsIcon = TUIChatConfig.getTheme() === 'dark' ? wordsIconDark : wordsIconLight;
+const emits = defineEmits(['onDialogPopupShowOrHide']);
+const currentConversation = ref<IConversationModel>();
+const container = ref();
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const selectWord = (item: any) => {
+  const options = {
+    to:
+      currentConversation?.value?.groupProfile?.groupID
+      || currentConversation?.value?.userProfile?.userID,
+    conversationType: currentConversation?.value?.type,
+    payload: {
+      text: TUITranslateService.t(`Words.${item.value}`),
+    },
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  } as SendMessageParams;
+  TUIChatService.sendTextMessage(options);
+  // close dialog after submit evaluate
+  container?.value?.toggleDialogDisplay(false);
+};
+
+const closeDialog = () => {
+  container?.value?.toggleDialogDisplay(false);
+};
+
+const onDialogShow = () => {
+  emits('onDialogPopupShowOrHide', true);
+};
+
+const onDialogClose = () => {
+  emits('onDialogPopupShowOrHide', false);
+};
+</script>
+<style scoped lang="scss" src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/style/color.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/style/color.scss
new file mode 100644
index 00000000..e71b0ff6
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/style/color.scss
@@ -0,0 +1,8 @@
+.words {
+  background-color: #ffffff;
+  &-header {
+    &-close {
+      color: #3370ff;
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/style/h5.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/style/h5.scss
new file mode 100644
index 00000000..b8e2f8c0
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/style/h5.scss
@@ -0,0 +1,29 @@
+.words-h5 {
+  width: 100%;
+  box-sizing: border-box;
+  max-height: 80vh;
+  height: fit-content;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  &-header {
+    &-title {
+      font-size: 18px;
+      line-height: 40px;
+    }
+  }
+  &-list {
+    flex: 1;
+    overflow-y: scroll;
+    &-item {
+      cursor: none;
+      -webkit-tap-highlight-color: transparent;
+      -moz-tap-highlight-color: transparent;
+      padding: 12px 0;
+      font-size: 16px;
+      color: #50545c;
+      line-height: 18px;
+      border-bottom: 1px solid #eeeeee;
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/style/index.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/style/index.scss
new file mode 100644
index 00000000..d8e8fb17
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/style/index.scss
@@ -0,0 +1,5 @@
+@import url("../../../../../assets/styles/common.scss");
+@import "./color.scss";
+@import "./web.scss";
+@import "./h5.scss";
+
diff --git a/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/style/web.scss b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/style/web.scss
new file mode 100644
index 00000000..238f5993
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input-toolbar/words/style/web.scss
@@ -0,0 +1,32 @@
+.words {
+  z-index: 5;
+  width: 315px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  width: 19.13rem;
+  height: 12.44rem;
+  overflow-y: auto;
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    font-weight: 500;
+  }
+  &-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    &-item {
+      cursor: pointer;
+      padding: 4px 0;
+      font-size: 14px;
+      color: #50545c;
+      line-height: 18px;
+    }
+    &-item:hover {
+      color: #006eff;
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-input/index.ts b/txim/src/TUIKit/components/TUIChat/message-input/index.ts
new file mode 100644
index 00000000..62164cc5
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input/index.ts
@@ -0,0 +1,2 @@
+import MessageInput from './index.vue';
+export default MessageInput;
diff --git a/txim/src/TUIKit/components/TUIChat/message-input/index.vue b/txim/src/TUIKit/components/TUIChat/message-input/index.vue
new file mode 100644
index 00000000..ca1af2e0
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="message-input-wrapper">
+    <div :class="['message-input-container', !isPC && 'message-input-container-h5']">
+      <MessageInputEditor
+        ref="editor"
+        :placeholder="props.placeholder"
+        :isMuted="props.isMuted"
+        :muteText="props.muteText"
+        :enableInput="props.enableInput"
+        :enableAt="props.enableAt"
+        :enableTyping="props.enableTyping"
+        :enableDragUpload="props.enableDragUpload"
+        @sendMessage="sendMessage"
+        @onTyping="onTyping"
+        @onAt="onAt"
+      />
+      <MessageInputButton
+        v-if="!props.isMuted"
+        @sendMessage="sendMessage"
+      />
+      <MessageInputAt
+        v-if="props.enableAt"
+        ref="messageInputAtRef"
+        @insertAt="insertAt"
+        @onAtListOpen="onAtListOpen"
+      />
+    </div>
+    <MessageInputQuote />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  TUIStore,
+  StoreName,
+  IConversationModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref } from '../../../adapter-vue';
+import MessageInputEditor from './message-input-editor.vue';
+import MessageInputAt from './message-input-at/index.vue';
+import MessageInputButton from './message-input-button.vue';
+import MessageInputQuote from './message-input-quote/index.vue';
+import { sendMessages, sendTyping } from '../utils/sendMessage';
+import { transformTextWithEmojiNamesToKeys } from '../emoji-config';
+import { isPC, isH5 } from '../../../utils/env';
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: 'this is placeholder',
+  },
+  isMuted: {
+    type: Boolean,
+    default: true,
+  },
+  muteText: {
+    type: String,
+    default: '',
+  },
+  enableInput: {
+    type: Boolean,
+    default: true,
+  },
+  enableAt: {
+    type: Boolean,
+    default: true,
+  },
+  enableDragUpload: {
+    type: Boolean,
+    default: true,
+  },
+  enableTyping: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['sendMessage', 'resetReplyOrReference', 'onTyping']);
+const editor = ref<InstanceType<typeof MessageInputEditor>>();
+const messageInputAtRef = ref<InstanceType<typeof MessageInputAt>>();
+const currentConversation = ref<IConversationModel>();
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
+  sendTyping(inputContentEmpty, inputBlur);
+};
+
+const onAt = (show: boolean) => {
+  messageInputAtRef.value?.toggleAtList(show);
+};
+
+const sendMessage = async () => {
+  const _editorContentList = editor.value?.getEditorContent();
+  if (!_editorContentList || !currentConversation.value) return;
+  const editorContentList = _editorContentList.map((editor: any) => {
+    if (editor.type === 'text') {
+      editor.payload.text = transformTextWithEmojiNamesToKeys(editor.payload.text);
+    }
+    return editor;
+  });
+  await sendMessages(
+    editorContentList,
+    currentConversation.value,
+  );
+  emit('sendMessage');
+  editor.value?.resetEditor();
+};
+
+const insertEmoji = (emoji: any) => {
+  editor.value?.addEmoji(emoji);
+};
+
+const onAtListOpen = () => {
+  if (isH5) {
+    editor.value?.blur();
+  }
+};
+
+const insertAt = (atInfo: any) => {
+  editor?.value?.insertAt && editor?.value?.insertAt(atInfo);
+};
+
+const reEdit = (content: any) => {
+  editor.value?.resetEditor();
+  editor.value?.setEditorContent(content);
+};
+
+defineExpose({
+  insertEmoji,
+  reEdit,
+});
+</script>
+
+<style scoped lang="scss">
+@import "../../../assets/styles/common";
+
+.message-input-wrapper {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.message-input-container {
+  box-sizing: border-box;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border: none;
+  overflow: hidden;
+}
+
+.message-input-container-h5 {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-end;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input/message-input-at/index.ts b/txim/src/TUIKit/components/TUIChat/message-input/message-input-at/index.ts
new file mode 100644
index 00000000..065efb6c
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input/message-input-at/index.ts
@@ -0,0 +1,187 @@
+import { SuggestionProps, SuggestionKeyDownProps } from '@tiptap/suggestion';
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { isH5 } from '../../../../utils/env';
+
+let currentConversationID = '';
+let memberList: any[] = [];
+let allMemberList: any[] = [];
+let showMemberList: any[] = [];
+let selectedIndex: number = 0;
+let isGroup = false;
+let command:
+  | ((props: {
+    id?: string | undefined;
+    userID?: string | undefined;
+    isAll?: boolean | undefined;
+  }) => void)
+  | ((arg0: { id: any; label: any }) => any);
+const all = {
+  userID: TUIChatEngine.TYPES.MSG_AT_ALL,
+  nick: '所有人',
+  isAll: true,
+  avatar: 'https://web.sdk.qcloud.com/im/assets/images/at.svg',
+};
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversationID: (id: string) => {
+    if (id !== currentConversationID) {
+      currentConversationID = id;
+      if (currentConversationID?.startsWith('GROUP')) {
+        isGroup = true;
+      } else {
+        // c2c chat clear all content within @
+        isGroup = false;
+        memberList = [];
+        allMemberList = [];
+        showMemberList = [];
+      }
+    }
+  },
+});
+
+TUIStore.watch(StoreName.CUSTOM, {
+  memberList: (list: any[]) => {
+    if (isGroup && Array.isArray(list)) {
+      memberList = list;
+      allMemberList = [all, ...memberList];
+      showMemberList = allMemberList;
+    }
+  },
+});
+
+const MessageInputAtSuggestion = () => {
+  return {
+    allowedPrefixes: null,
+    items: (props: { query: string }) => {
+      if (!isGroup) {
+        return;
+      }
+      const queryResult = allMemberList?.filter(
+        (item: { nick: string; userID: string }) =>
+          item?.nick?.toLowerCase()?.startsWith(props?.query?.toLowerCase())
+          || item?.userID?.toLowerCase()?.startsWith(props?.query?.toLowerCase()),
+      );
+      showMemberList = queryResult?.length ? queryResult : allMemberList;
+      TUIGlobal.setShowMemberList(showMemberList);
+      return showMemberList;
+    },
+    render: () => {
+      return {
+        onStart: (
+          props: SuggestionProps<{
+            id?: string;
+            userID?: string;
+            isAll?: boolean;
+          }>,
+        ) => {
+          if (!isGroup) {
+            return;
+          }
+          TUIGlobal.toggleAtList(true);
+          if (!props?.clientRect) {
+            return;
+          }
+          const rect = props?.clientRect();
+          if (rect?.left && rect?.top && !isH5) {
+            TUIGlobal.handleAtListPosition({
+              left: rect?.left,
+              top: rect?.top,
+            });
+          }
+          command = props.command;
+        },
+
+        onUpdate(props: SuggestionProps<any>) {
+          if (!isGroup) {
+            return;
+          }
+          if (!props?.clientRect) {
+            return;
+          }
+          const rect = props?.clientRect();
+          if (rect?.left && rect?.top && !isH5) {
+            TUIGlobal.handleAtListPosition({
+              left: rect?.left,
+              top: rect?.top,
+            });
+          }
+        },
+
+        onKeyDown(props: SuggestionKeyDownProps) {
+          if (!isGroup) {
+            return;
+          }
+          if (props.event.key === 'Enter') {
+            props.event?.stopPropagation();
+            props.event?.preventDefault();
+          }
+          if (props.event.key === 'Escape') {
+            TUIGlobal.toggleAtList(false);
+            showMemberList = allMemberList;
+            return true;
+          }
+          if (props?.event.key === 'ArrowUp') {
+            upHandler();
+            return true;
+          }
+          if (props?.event.key === 'ArrowDown') {
+            downHandler();
+            return true;
+          }
+          if (props?.event.key === 'Enter') {
+            enterHandler();
+            return true;
+          }
+          return false;
+        },
+
+        onExit() {
+          if (!isGroup) {
+            return;
+          }
+          TUIGlobal.toggleAtList(false);
+          showMemberList = allMemberList;
+          TUIGlobal.handleAtListPosition({
+            left: 0,
+            top: 0,
+          });
+        },
+      };
+    },
+  };
+};
+
+const upHandler = () => {
+  if (!showMemberList?.length) return;
+  selectedIndex
+    = (selectedIndex + showMemberList?.length - 1) % showMemberList?.length;
+  TUIGlobal.setCurrentSelectIndex(selectedIndex);
+};
+
+const downHandler = () => {
+  if (!showMemberList?.length) return;
+  selectedIndex = (selectedIndex + 1) % showMemberList?.length;
+  TUIGlobal.setCurrentSelectIndex(selectedIndex);
+};
+
+const enterHandler = () => {
+  selectItem(selectedIndex);
+};
+
+const selectItem = (index: number) => {
+  if (!showMemberList?.length) return;
+  const item = showMemberList[index];
+  if (item) {
+    command
+    && command({
+      id: (item as any)?.userID,
+      label: (item as any)?.nick || (item as any)?.userID,
+    });
+  }
+};
+TUIGlobal.selectItem = selectItem;
+export default MessageInputAtSuggestion;
diff --git a/txim/src/TUIKit/components/TUIChat/message-input/message-input-at/index.vue b/txim/src/TUIKit/components/TUIChat/message-input/message-input-at/index.vue
new file mode 100644
index 00000000..7b82400a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input/message-input-at/index.vue
@@ -0,0 +1,301 @@
+<template>
+  <BottomPopup
+    :show="showAtList"
+    @onClose="closeAt"
+  >
+    <div
+      ref="MessageInputAt"
+      :class="[isPC ? 'message-input-at' : 'message-input-at-h5']"
+    >
+      <div
+        ref="dialog"
+        class="member-list"
+      >
+        <header
+          v-if="!isPC"
+          class="member-list-title"
+        >
+          <span class="title">{{
+            TUITranslateService.t("TUIChat.选择提醒的人")
+          }}</span>
+        </header>
+        <ul class="member-list-box">
+          <li
+            v-for="(item, index) in showMemberList"
+            :key="index"
+            ref="memberListItems"
+            class="member-list-box-body"
+            :class="[index === selectedIndex && 'selected']"
+            @click="selectItem(index)"
+          >
+            <img
+              class="member-list-box-body-avatar"
+              :src="handleMemberAvatar(item)"
+            >
+            <span class="member-list-box-body-name">
+              {{ handleMemberName(item) }}
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </BottomPopup>
+</template>
+<script lang="ts" setup>
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  TUIGroupService,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { ref, watch } from '../../../../adapter-vue';
+import { isPC, isH5 } from '../../../../utils/env';
+import BottomPopup from '../../../common/BottomPopup/index.vue';
+
+const emits = defineEmits(['onAtListOpen', 'insertAt']);
+
+const MessageInputAt = ref();
+const memberListItems = ref();
+
+const showAtList = ref(false);
+const memberList = ref<Array<any>>();
+const allMemberList = ref<Array<any>>();
+const showMemberList = ref<Array<any>>();
+const isGroup = ref(false);
+const position = ref({
+  left: 0,
+  top: 0,
+});
+const selectedIndex = ref(0);
+const currentConversationID = ref('');
+
+const all = {
+  userID: TUIChatEngine.TYPES.MSG_AT_ALL,
+  nick: '所有人',
+  isAll: true,
+  avatar: 'https://web.sdk.qcloud.com/im/assets/images/at.svg',
+};
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversationID: (id: string) => {
+    if (id !== currentConversationID.value) {
+      currentConversationID.value = id;
+      memberList.value = [];
+      allMemberList.value = [];
+      showMemberList.value = [];
+      isGroup.value = false;
+      TUIStore.update(StoreName.CUSTOM, 'memberList', memberList.value);
+      if (currentConversationID?.value?.startsWith('GROUP')) {
+        isGroup.value = true;
+        const groupID = currentConversationID?.value?.substring(5);
+        TUIGroupService.switchGroup(groupID);
+      } else {
+        TUIGroupService.switchGroup('');
+      }
+    }
+  },
+});
+
+TUIStore.watch(StoreName.GRP, {
+  currentGroupMemberList: (list: Array<any>) => {
+    memberList.value = list;
+    allMemberList.value = [all, ...memberList.value];
+    showMemberList.value = allMemberList.value;
+    TUIStore.update(StoreName.CUSTOM, 'memberList', memberList.value);
+  },
+});
+
+const toggleAtList = (show: boolean) => {
+  if (!isGroup.value) {
+    return;
+  }
+  showAtList.value = show;
+  if (showAtList.value) {
+    emits('onAtListOpen');
+  }
+};
+const handleAtListPosition = (positionData: { top: number; left: number }) => {
+  position.value = positionData;
+};
+const setCurrentSelectIndex = (index: any) => {
+  selectedIndex.value = index;
+  memberListItems.value?.[selectedIndex.value]?.scrollIntoView(false);
+};
+const setShowMemberList = (list: any) => {
+  showMemberList.value = list;
+};
+
+TUIGlobal.toggleAtList = toggleAtList;
+TUIGlobal.handleAtListPosition = handleAtListPosition;
+TUIGlobal.setCurrentSelectIndex = setCurrentSelectIndex;
+TUIGlobal.setShowMemberList = setShowMemberList;
+
+defineExpose({
+  toggleAtList,
+});
+
+watch(
+  () => [position.value, MessageInputAt?.value],
+  () => {
+    if (isH5 || !MessageInputAt?.value || !MessageInputAt?.value?.style) {
+      return;
+    }
+    MessageInputAt.value.style.left = position.value.left + 'px';
+    MessageInputAt.value.style.top
+      = position.value.top - MessageInputAt.value.clientHeight + 'px';
+  },
+);
+
+const closeAt = () => {
+  showAtList.value = false;
+  showMemberList.value = allMemberList.value;
+  position.value = {
+    left: 0,
+    top: 0,
+  };
+};
+
+const selectItem = (index: number) => {
+  if (isPC && TUIGlobal.selectItem) {
+    TUIGlobal.selectItem(index);
+  } else {
+    if (showMemberList?.value?.length) {
+      const item = showMemberList?.value[index];
+      emits('insertAt', {
+        id: (item as any)?.userID,
+        label: (item as any)?.nick || (item as any)?.userID,
+      });
+    }
+  }
+  closeAt();
+};
+
+const handleMemberAvatar = (item: any) => {
+  return (
+    (item as any)?.avatar
+    || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+  );
+};
+
+const handleMemberName = (item: any) => {
+  return (item as any)?.nick ? (item as any)?.nick : (item as any)?.userID;
+};
+</script>
+<style scoped lang="scss">
+@import "../../../../assets/styles/common";
+
+.message-input-at {
+  position: fixed;
+  max-width: 15rem;
+  max-height: 10rem;
+  overflow: hidden auto;
+  background: #fff;
+  box-shadow: 0 0.06rem 0.63rem 0 rgba(2,16,43,0.15);
+  border-radius: 0.13rem;
+}
+
+.member-list-box {
+  &-header {
+    height: 2.5rem;
+    padding-top: 5px;
+    cursor: pointer;
+
+    &:hover {
+      background: rgba(0,110,255,0.1);
+    }
+  }
+
+  span {
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    font-size: 12px;
+    color: #000;
+    letter-spacing: 0;
+    padding: 5px;
+  }
+
+  &-body {
+    height: 30px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    .selected,
+    &:hover {
+      background: rgba(0,110,255,0.1);
+    }
+
+    &-name {
+      overflow: hidden;
+      white-space: nowrap;
+      word-wrap: break-word;
+      word-break: break-all;
+      text-overflow: ellipsis;
+    }
+
+    &-avatar {
+      width: 20px;
+      height: 20px;
+      padding-left: 10px;
+    }
+  }
+
+  .selected {
+    background: rgba(0,110,255,0.1);
+  }
+}
+
+.message-input-at-h5 {
+  .member-list {
+    height: auto;
+    max-height: 500px;
+    width: 100%;
+    max-width: 100%;
+    background: white;
+    border-radius: 12px 12px 0 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    &-title {
+      height: fit-content;
+      width: calc(100% - 30px);
+      text-align: center;
+      vertical-align: middle;
+      padding: 15px;
+
+      .title {
+        vertical-align: middle;
+        display: inline-block;
+        font-size: 16px;
+      }
+
+      .close {
+        vertical-align: middle;
+        position: absolute;
+        right: 10px;
+        display: inline-block;
+      }
+    }
+
+    &-box {
+      flex: 1;
+      overflow-y: scroll;
+
+      &-body {
+        padding: 10px;
+
+        img {
+          width: 26px;
+          height: 26px;
+        }
+
+        span {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input/message-input-button.vue b/txim/src/TUIKit/components/TUIChat/message-input/message-input-button.vue
new file mode 100644
index 00000000..f9a7a1df
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input/message-input-button.vue
@@ -0,0 +1,103 @@
+<template>
+  <div :class="['message-input-button', !isPC && 'message-input-button-h5']">
+    <button
+      v-if="props.enableSend"
+      class="message-input-button-cont"
+      data-type="text"
+      :disabled="false"
+      @click="sendMessage"
+    >
+      <p
+        v-if="displayHover"
+        class="message-input-button-hover"
+      >
+        {{ TUITranslateService.t("TUIChat.按Enter发送，Ctrl+Enter换行") }}
+      </p>
+      {{ TUITranslateService.t("发送") }}
+    </button>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from '../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { TUIConstants } from '@tencentcloud/tui-core';
+import { isPC } from '../../../utils/env';
+import TUIChatConfig from '../config';
+
+const props = defineProps({
+  enableSend: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const displayHover = ref(TUIChatConfig.getChatType() !== TUIConstants.TUIChat.TYPE.ROOM);
+
+const emits = defineEmits(['sendMessage']);
+
+const sendMessage = () => {
+  emits('sendMessage');
+};
+</script>
+<style scoped lang="scss">
+@import "../../../assets/styles/common";
+
+.message-input-button {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+
+  &-h5 {
+    position: static;
+  }
+
+  &-cont {
+    padding: 8px 20px;
+    border-radius: 4px;
+    border: none;
+    font-size: 14px;
+    text-align: center;
+    line-height: 20px;
+    font-weight: 400;
+    background: #006eff;
+    color: #fff;
+    letter-spacing: 0;
+    cursor: pointer;
+  }
+
+  &-hover {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: 120%;
+    word-break: keep-all;
+    height: 30px;
+    white-space: nowrap;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    padding: 5px 10px;
+    border-radius: 3px;
+    background: #000;
+    color: #fff;
+    opacity: 0.3;
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      right: -20px;
+      border: 10px solid transparent;
+      border-left: 10px solid #000;
+    }
+  }
+
+  &:hover {
+    .message-input-button-hover {
+      display: flex;
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input/message-input-editor.vue b/txim/src/TUIKit/components/TUIChat/message-input/message-input-editor.vue
new file mode 100644
index 00000000..3f4b33a7
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input/message-input-editor.vue
@@ -0,0 +1,886 @@
+<template>
+  <div
+    :class="['message-input-editor-container', isH5 && 'message-input-editor-container-h5']"
+  >
+    <div
+      v-if="isMuted"
+      class="message-input-mute"
+    >
+      {{ muteText }}
+    </div>
+    <div
+      v-if="!isMuted && enableInput"
+      ref="editorDom"
+      class="message-input-editor-area"
+      :contenteditable="isH5"
+      @keydown.enter="handleEnter"
+      @drop="handlePCFileDrop"
+      @paste="handlePaste"
+      @input="handleH5Input"
+      @blur="handleH5Blur"
+      @focus="handleH5Focus"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { toRefs, ref, onMounted, watch, onUnmounted } from '../../../adapter-vue';
+import {
+  TUIStore,
+  StoreName,
+  IMessageModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { Editor, JSONContent, Extension } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Placeholder from '@tiptap/extension-placeholder';
+import HardBreak from '@tiptap/extension-hard-break';
+import Text from '@tiptap/extension-text';
+import Mention from '@tiptap/extension-mention';
+import CustomImage from './message-input-file';
+import { ITipTapEditorContent } from '../../../interface';
+import MessageInputAtSuggestion from './message-input-at/index';
+import { parseTextToRenderArray } from '../emoji-config';
+import riseInput from '../../../utils/riseInput';
+import { isH5, isPC } from '../../../utils/env';
+import DraftManager from '../utils/conversationDraft';
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: 'this is placeholder',
+  },
+  replayOrReferenceMessage: {
+    type: Object,
+    default: () => ({}),
+  },
+  isMuted: {
+    type: Boolean,
+    default: true,
+  },
+  muteText: {
+    type: String,
+    default: '',
+  },
+  enableInput: {
+    type: Boolean,
+    default: true,
+  },
+  enableAt: {
+    type: Boolean,
+    default: true,
+  },
+  enableDragUpload: {
+    type: Boolean,
+    default: true,
+  },
+  enableTyping: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emits = defineEmits(['sendMessage', 'onTyping', 'onAt']);
+const { placeholder, enableAt, enableDragUpload, enableTyping } = toRefs(props);
+const isEditorEmpty = ref<boolean>(true);
+const isEditorBlur = ref<boolean>(true);
+const isC2C = ref<boolean>(false);
+const currentConversationID = ref<string>('');
+const currentQuoteMessage = ref<{ message: IMessageModel; type: string }>();
+const editorDom = ref();
+let editor: Editor | null = null;
+const fileMap = new Map<string, any>();
+const DisableDefaultEnter = Extension.create({
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => true,
+    };
+  },
+});
+
+function onCurrentConversationIDUpdated(conversationID: string) {
+  if (currentConversationID.value !== conversationID) {
+    if (currentConversationID.value) {
+      DraftManager.setStore(
+        currentConversationID.value,
+        getEditorHTML(),
+        DraftManager.generateAbstract(getEditorContent()),
+        currentQuoteMessage.value,
+      );
+    }
+    resetEditor();
+    if (conversationID) {
+      DraftManager.getStore(conversationID, setEditorContent);
+    }
+  }
+  currentConversationID.value = conversationID;
+}
+
+function onQuoteMessageUpdated(options?: { message: IMessageModel; type: string }) {
+  currentQuoteMessage.value = options;
+}
+
+onMounted(() => {
+  editor = isPC
+    ? new Editor({
+      element: editorDom.value,
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        HardBreak,
+        DisableDefaultEnter,
+        Placeholder.configure({
+          emptyEditorClass: 'is-editor-empty',
+          placeholder: placeholder.value,
+        }),
+        Mention.configure({
+          HTMLAttributes: {
+            class: 'mention',
+          },
+          suggestion: enableAt.value && (MessageInputAtSuggestion() as any),
+        }),
+        CustomImage.configure({
+          inline: true,
+          allowBase64: true,
+        }),
+      ],
+      autofocus: !isH5,
+      editable: true,
+      injectCSS: false,
+      editorProps: {
+        handlePaste() {
+          // prevent editor's default paste for resolve emoji & marked down line break
+          return true;
+        },
+      },
+      // handle input editor typing (only in C2C and enable typing)
+      onUpdate({ editor, transaction }) {
+        if (!enableTyping.value || !isC2C.value) return;
+        isEditorBlur.value = !editor.isFocused;
+        if (transaction?.doc?.content?.size > 2) {
+          isEditorEmpty.value = false;
+        } else {
+          isEditorEmpty.value = true;
+        }
+      },
+      onFocus() {
+        if (isH5 && document?.getElementById('app')?.style) {
+          // set app height when keyboard popup
+          const keyboardHeight = document.body.scrollHeight - window.innerHeight;
+          (
+            document.getElementById('app') as any
+          ).style.marginBottom = `${keyboardHeight}px`;
+          (
+            document.getElementById('app') as any
+          ).style.height = `calc(100% - ${keyboardHeight}px)`;
+        }
+        if (!enableTyping.value || !isC2C.value) return;
+        isEditorBlur.value = true;
+      },
+      onBlur() {
+        if (isH5 && document?.getElementById('app')?.style) {
+          // reset app height to normal
+          (document.getElementById('app') as any).style.marginBottom = ``;
+          (document.getElementById('app') as any).style.height = `100%`;
+        }
+        if (!enableTyping.value || !isC2C.value) return;
+        isEditorBlur.value = true;
+      },
+    })
+    : null;
+
+  if (isH5) {
+    const targetBottomDom = document.querySelector('.message-input-toolbar') as HTMLElement || editorDom.value;
+    riseInput(editorDom.value, targetBottomDom);
+  }
+
+  TUIStore.watch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdated,
+  });
+
+  TUIStore.watch(StoreName.CHAT, {
+    quoteMessage: onQuoteMessageUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdated,
+  });
+
+  TUIStore.unwatch(StoreName.CHAT, {
+    quoteMessage: onQuoteMessageUpdated,
+  });
+
+  // clear map store
+  fileMap.clear();
+});
+
+function handleEnter(e: any) {
+  if (isH5) {
+    return;
+  }
+  e?.preventDefault();
+  e?.stopPropagation();
+  if (e.keyCode === 13 && e.ctrlKey) {
+    // ctrl + enter: warp
+    editor?.commands?.insertContent('<p></p>');
+  } else if (e.keyCode === 13) {
+    // enter only: send message
+    emits('sendMessage');
+  }
+}
+
+function handleH5Input(e: any) {
+  if (isH5) {
+    e.data === '@' && emits('onAt', true);
+    isEditorEmpty.value = editorDom.value?.childNodes ? false : true;
+  }
+}
+
+function handleH5Blur() {
+  isH5 && (isEditorBlur.value = true);
+}
+
+function handleH5Focus() {
+  isH5 && (isEditorBlur.value = false);
+}
+
+function insertAt(atInfo: { id: string; label: string }) {
+  const mentionText = document.createElement('span');
+  mentionText.innerHTML = atInfo.label;
+  mentionText.className = 'mention';
+  mentionText.id = atInfo.id;
+  editorDom.value?.appendChild(mentionText);
+}
+
+function handlePCFileDrop(e: any) {
+  // Only the PC version supports drag and drop upload of rich text
+  isPC && handleFileDropOrPaste(e, 'drop');
+}
+
+function handlePaste(e: ClipboardEvent) {
+  // In the PC version, disable native copy and support rich text copy, and go through rich text copy upload parsing
+  // In the mobile version, only text copy is supported, and default copy parsing is used
+  if (!e.clipboardData) {
+    return;
+  }
+  if (isPC && e.clipboardData.files.length) {
+    handleFileDropOrPaste(e, 'paste');
+  } else {
+    handlePasteText(e);
+    // Caret: https://developer.mozilla.org/en-US/docs/Web/API/CaretPosition
+    scrollToCaret(editorDom.value);
+  }
+}
+
+function handlePasteText(e: ClipboardEvent) {
+  e.preventDefault();
+  const text = e.clipboardData?.getData('text/plain') || '';
+  // if paste text in pc or mobile, parse text to html to render emoji
+  // if paste html, for safety,use text parse to html
+  const renderArray = parseTextToRenderArray(text);
+  insertEditorContent(renderArray);
+}
+
+async function handleFileDropOrPaste(e: any, type: string) {
+  e.preventDefault();
+  e.stopPropagation();
+  if (!enableDragUpload.value && type === 'drop') {
+    return;
+  }
+  if (
+    (type === 'drop' && e.dataTransfer)
+    || (type === 'paste' && e.clipboardData)
+  ) {
+    const files
+      = type === 'drop' ? e?.dataTransfer?.files : e?.clipboardData?.files;
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      const isImage = file.type.startsWith('image/');
+      const fileSrc = isImage
+        ? URL.createObjectURL(file)
+        : await drawFileCanvasToImageUrl(file);
+      editor?.commands?.insertContent({
+        type: 'custom-image',
+        attrs: {
+          src: fileSrc,
+          alt: file?.name,
+          class: isImage ? 'normal' : 'file',
+        },
+      });
+      fileMap.set(fileSrc, file);
+      if (i === files.length - 1) {
+        setTimeout(() => {
+          editor?.commands?.focus('end');
+          editor?.commands?.scrollIntoView();
+        }, 10);
+      }
+    }
+  }
+}
+
+/**
+ * create file icon image
+ * To avoid creating img dom with the same icon repeatedly, record the previous type of icon that has been created.
+ * The format of the record is map<icon type, img dom>.
+*/
+const fileIconDomMap = new Map<string, HTMLImageElement>();
+const addImageProcess = (src: string, type: string) => {
+  return new Promise((resolve, reject) => {
+    if (fileIconDomMap.has(type)) {
+      resolve(fileIconDomMap.get(type));
+    } else {
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.onload = () => {
+        fileIconDomMap.set(type, img);
+        resolve(img);
+      };
+      img.onerror = reject;
+      img.src = src;
+    }
+  });
+};
+
+// draw file tag canvas
+const drawFileCanvasToImageUrl = async (file: any) => {
+  const { name, type } = file;
+  const canvas = document.createElement('canvas');
+  const width = 160;
+  const height = 50;
+  canvas.style.width = width + 'px';
+  canvas.style.height = height + 'px';
+  // Set the actual size in memory (scaled to account for additional pixel density)
+  const scale = window.devicePixelRatio; // Change to 1 to view blurry on a retina screen
+  canvas.width = Math.floor(width * scale);
+  canvas.height = Math.floor(height * scale);
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return '';
+  }
+  // To use CSS pixels, normalize the coordinate system
+  ctx.scale(scale, scale);
+  // draw icon
+  const { iconSrc, iconType } = handleFileIconForShow(type);
+  const img = await addImageProcess(iconSrc, iconType);
+  ctx?.drawImage(img as any, 10, 10, 30, 30);
+  // draw font
+  const nameForShow = handleNameForShow(name);
+  ctx.fillText(nameForShow, 45, 22);
+  // canvas to url
+  const dataURL = canvas.toDataURL();
+  return dataURL;
+};
+
+const handleFileIconForShow = (type: string) => {
+  const urlBase = 'https://web.sdk.qcloud.com/component/TUIKit/assets/file-';
+  const fileTypes = [
+    'image',
+    'pdf',
+    'text',
+    'ppt',
+    'presentation',
+    'sheet',
+    'zip',
+    'word',
+    'video',
+    'unknown',
+  ];
+  let url = '';
+  let iconType = '';
+  fileTypes.forEach((typeName: string) => {
+    if (type.includes(typeName)) {
+      url = urlBase + typeName + '.svg';
+      iconType = typeName;
+    }
+  });
+  return {
+    iconSrc: url ? url : urlBase + 'unknown.svg',
+    iconType: iconType ? iconType : 'unknown',
+  };
+};
+
+const handleNameForShow = (value: string): string => {
+  if (!value) {
+    return value;
+  }
+  let res = '';
+  let length = 0;
+  for (let i = 0; i < value?.length; i++) {
+    if (length > 16) {
+      res += '...';
+      break;
+    }
+    res += value[i];
+    if (/[a-z]|[0-9]|[,;.!@#-+/\\$%^*()<>?:"'{}~]/i.test(value[i])) {
+      length += 1;
+    } else {
+      length += 2;
+    }
+  }
+  return res;
+};
+
+function getEditorContent() {
+  return isPC ? parsePCEditorContent() : parseH5EditorContent();
+}
+
+function parsePCEditorContent(): ITipTapEditorContent[] {
+  const editorJSON = editor?.getJSON();
+  const content: ITipTapEditorContent[] = [];
+  handleEditorContent(editorJSON, content);
+  if (
+    content.length > 0
+    && content[content.length - 1]
+    && content[content.length - 1].type === 'text'
+    && content[content.length - 1].payload?.text?.endsWith('\n')
+  ) {
+    const text = content[content.length - 1].payload.text || '';
+    content[content.length - 1].payload.text = text?.substring(
+      0,
+      text.lastIndexOf('\n'),
+    );
+  }
+  return content;
+}
+
+function handleEditorContent(root: JSONContent, content: ITipTapEditorContent[]) {
+  if (!root || !root.type) {
+    return;
+  }
+  if (
+    root.type !== 'text'
+    && root.type !== 'custom-image'
+    && root.type !== 'mention'
+  ) {
+    if (root.type === 'paragraph' || root.type === 'hardBreak') {
+      handleEditorNode(root, content);
+    }
+    if (root.content?.length) {
+      root.content.forEach((item: JSONContent) => {
+        handleEditorContent(item, content);
+      });
+    }
+    return;
+  } else {
+    handleEditorNode(root, content);
+  }
+}
+
+function handleEditorNode(node: JSONContent, content: ITipTapEditorContent[]) {
+  // handle enter
+  if (node.type === 'hardBreak') {
+    if (content.length > 0
+      && content[content.length - 1]
+      && content[content.length - 1]?.type === 'text'
+    ) {
+      content[content.length - 1].payload.text += '\n';
+    } else {
+      content.push({
+        type: 'text',
+        payload: { text: '\n' },
+      });
+    }
+  } else if (node.type === 'paragraph') {
+    if (
+      content.length > 0
+      && content[content.length - 1]
+      && content[content.length - 1]?.type === 'text'
+    ) {
+      content[content.length - 1].payload.text += '\n';
+    }
+  } else if (
+    node.type === 'text'
+    || (node.type === 'custom-image' && node?.attrs?.class?.includes('emoji'))
+  ) {
+    // Process text and emojis
+    const text = node.type === 'text' ? node?.text : node?.attrs?.alt;
+    if (
+      content.length > 0
+      && content[content.length - 1]
+      && content[content.length - 1]?.type === 'text'
+    ) {
+      content[content.length - 1].payload.text += text;
+    } else {
+      content.push({
+        type: 'text',
+        payload: { text: text },
+      });
+    }
+  } else if (
+    node.type === 'custom-image' && node?.attrs?.class?.includes('normal')
+  ) {
+    // Process rich text images
+    content.push({
+      type: 'image',
+      payload: { file: fileMap?.get(node?.attrs?.src) },
+    });
+  } else if (node.type === 'custom-image' && node?.attrs?.class?.includes('file')) {
+    const file = fileMap?.get(node?.attrs?.src);
+    content.push({
+      type: file?.type?.includes('video') ? 'video' : 'file',
+      payload: { file },
+    });
+  } else if (node.type === 'mention') {
+    const text = '@' + node?.attrs?.label + ' ';
+    if (
+      content.length > 0
+      && content[content.length - 1]
+      && content[content.length - 1]?.type === 'text'
+    ) {
+      content[content.length - 1].payload.text += text;
+    } else {
+      content.push({
+        type: 'text',
+        payload: { text: text },
+      });
+    }
+    if (content[content.length - 1]?.payload?.atUserList) {
+      content[content.length - 1]?.payload?.atUserList?.push(node?.attrs?.id);
+    } else {
+      content[content.length - 1].payload.atUserList = [node?.attrs?.id];
+    }
+  }
+}
+
+function parseH5EditorContent() {
+  const root = editorDom.value;
+  let text: string = '';
+  const atUserList: string[] = [];
+  try {
+    for (const child of root.childNodes) {
+      if (
+        child.nodeName === '#text'
+        || child.nodeName === 'SPAN'
+        || (child as HTMLElement).classList?.contains('custom-image-emoji')
+        || (child as HTMLElement).classList?.contains('mention')
+      ) {
+        text += child.nodeValue || (child as any).alt || child.innerHTML || '';
+        if (child.classList?.contains('mention') && child.id && !atUserList?.includes(child.id)) {
+          atUserList.push(child.id);
+        }
+      }
+    }
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+  }
+  return [
+    {
+      type: 'text',
+      payload: {
+        text,
+        atUserList,
+      },
+    },
+  ];
+}
+
+function addEmoji(emojiData: any) {
+  if (isPC) {
+    editor?.commands?.insertContent({
+      type: 'custom-image',
+      attrs: {
+        src: emojiData?.url,
+        alt: emojiData?.emoji.key,
+        title: emojiData?.emoji.key,
+        class: 'emoji',
+      },
+    });
+  } else {
+    const emojiImgNode = document.createElement('img');
+    emojiImgNode?.setAttribute('src', emojiData?.url);
+    emojiImgNode?.setAttribute('class', 'custom-image custom-image-emoji');
+    emojiImgNode?.setAttribute('alt', emojiData?.emoji.key);
+    emojiImgNode?.setAttribute('title', emojiData?.emoji.key);
+    emojiImgNode?.setAttribute('width', '20px');
+    emojiImgNode?.setAttribute('height', '20px');
+    editorDom.value?.appendChild(emojiImgNode);
+    const spanNode = document.createElement('span');
+    spanNode.contentEditable = 'true';
+    editorDom.value?.appendChild(spanNode);
+  }
+  if (!isH5) {
+    editor?.commands?.focus();
+    editor?.commands?.scrollIntoView();
+  }
+}
+
+function blur() {
+  isPC ? editor?.commands?.blur() : editorDom.value?.blur();
+}
+
+function resetEditor() {
+  editor?.commands?.clearContent(true);
+  isEditorBlur.value = true;
+  isEditorEmpty.value = true;
+  isH5 && (editorDom.value.innerHTML = '');
+}
+
+function getEditorHTML(): string {
+  if (isPC) {
+    return editor?.getHTML();
+  }
+  return editorDom.value.innerHTML;
+}
+
+function setEditorContent(content: any) {
+  if (isPC) {
+    editor?.commands?.setContent(content);
+  } else {
+    editorDom.value!.innerHTML = content;
+  }
+}
+
+function insertEditorContent(content: Array<{ type: 'text' | 'image'; content: string; emojiKey?: string }>) {
+  const selection = window.getSelection();
+  if (selection && selection.rangeCount) {
+    const currentRange = selection.getRangeAt(0);
+    content.forEach((item) => {
+      const nodes: any = [];
+      if (item.type === 'image') {
+        nodes.push(createEmojiNode(item.emojiKey || '', item.content));
+      } else {
+        const blocks = item.content.split(/\n/g);
+        blocks.forEach((block: string, index: number) => {
+          nodes.push(createTextNode(block));
+          if (index !== blocks.length - 1) {
+            nodes.push(document.createElement('br'));
+          }
+        });
+      }
+      nodes.forEach((newNode: any) => {
+        currentRange.insertNode(newNode);
+        currentRange.setStartAfter(newNode);
+        if (item.type === 'image' && isH5) {
+          // insert empty span instead of caret after emoji
+          const textNode = document.createElement('span');
+          textNode.contentEditable = 'true';
+          currentRange.insertNode(textNode);
+          currentRange.setStartAfter(textNode);
+        }
+      });
+    });
+    // update caret to current range and scroll to caret
+    currentRange.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(currentRange);
+  }
+}
+
+function createTextNode(text: string) {
+  return document.createTextNode(text);
+}
+
+function createEmojiNode(key: string, url: string) {
+  const imgNode = document.createElement('img');
+  imgNode.src = url;
+  imgNode.alt = key || '';
+  imgNode.classList.add('custom-image', 'custom-image-emoji');
+  imgNode.width = 20;
+  imgNode.height = 20;
+  return imgNode;
+}
+
+function scrollToCaret(el: HTMLElement) {
+  const selection = window.getSelection();
+  if (selection && selection.rangeCount > 0) {
+    const range = selection.getRangeAt(0);
+    // create a new range with zero width space text node in current caret
+    const newRange = document.createRange();
+    const emptyPlaceholder = '\u200B';
+    const textNode = document.createTextNode(emptyPlaceholder);
+    newRange.setStart(range.startContainer, range.startOffset);
+    newRange.insertNode(textNode);
+    // get new range bounding rect for caret position information
+    const rect = newRange.getBoundingClientRect();
+    // remove text node
+    if (textNode.parentNode) {
+      textNode.parentNode.removeChild(textNode);
+    }
+    // scroll to caret
+    el.scrollTop = rect.top - el.getBoundingClientRect().top;
+  }
+}
+
+watch(
+  () => [isEditorEmpty.value, isEditorBlur.value],
+  (newVal: boolean[], oldVal: boolean[]) => {
+    if (newVal !== oldVal) {
+      emits('onTyping', isEditorEmpty.value, isEditorBlur.value);
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+defineExpose({
+  getEditorContent,
+  addEmoji,
+  resetEditor,
+  insertAt,
+  setEditorContent,
+  getEditorHTML,
+  insertEditorContent,
+  blur,
+});
+</script>
+
+<style scoped lang="scss">
+@import "../../../assets/styles/common";
+
+.message-input-editor {
+  &-container {
+    box-sizing: border-box;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 3px 10px 10px;
+  }
+
+  &-area {
+    box-sizing: border-box;
+    height: 100%;
+    flex: 1;
+    display: flex;
+    overflow-y: auto;
+    border: none;
+    outline: none;
+  }
+
+  &-mute {
+    box-sizing: border-box;
+    flex: 1;
+    display: flex;
+    color: #999;
+    font-size: 14px;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.message-input-editor-container-h5 {
+  box-sizing: border-box;
+  flex: 1;
+  height: auto;
+  background: #f4f5f9;
+  border-radius: 9.4px;
+  padding: 8px 0 8px 10px;
+  font-size: 16px !important;
+  max-height: 86px;
+  margin-right: 7px;
+  overflow: hidden;
+
+  .message-input-editor-area {
+    overflow: auto;
+    user-select: text;
+    hyphens: auto;
+    word-wrap: break-word;
+    word-break: break-word;
+    flex-wrap: wrap;
+
+    .custom-image,
+    .custom-image-emoji {
+      display: inline;
+    }
+  }
+}
+</style>
+<style lang="scss">
+/* stylelint-disable-next-line selector-class-pattern */
+.ProseMirror {
+  min-height: 100%;
+  height: fit-content;
+  flex: 1;
+  font-size: 14px;
+  word-wrap: break-word;
+  word-break: break-all;
+  white-space: pre-wrap;
+
+  div,
+  ul,
+  ol,
+  dt,
+  dd,
+  li,
+  dl,
+  h1,
+  h2,
+  h3,
+  h4,
+  p {
+    margin: 0;
+    padding: 0;
+    font-style: normal;
+  }
+
+  p {
+    * {
+      vertical-align: bottom;
+    }
+  }
+
+  user-select: text;
+
+  &-focused {
+    border: none;
+    outline: none;
+  }
+
+  img {
+
+    /* stylelint-disable-next-line selector-class-pattern */
+    &.ProseMirror-selectednode {
+      outline: 2px solid #68cef8;
+    }
+  }
+
+  .custom-image {
+    &-normal {
+      max-height: 120px;
+      max-width: 200px;
+    }
+
+    &-file {
+      height: 50px;
+      width: 160px;
+      border: 1px solid #e8e8e9;
+      border-radius: 5px;
+    }
+
+    &-emoji {
+      height: 20px;
+      width: 20px;
+    }
+
+    &-image {
+      display: none;
+    }
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  .ProseMirror-selectednode {
+    outline: 2px solid #68cef8;
+    cursor: none;
+  }
+
+  p,
+  [contenteditable] {
+    user-select: text;
+  }
+
+  // placeholder style
+  p.is-editor-empty:first-child::before {
+    color: #adb5bd;
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-input/message-input-file.ts b/txim/src/TUIKit/components/TUIChat/message-input/message-input-file.ts
new file mode 100644
index 00000000..e3c4734e
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input/message-input-file.ts
@@ -0,0 +1,38 @@
+import Image from '@tiptap/extension-image';
+
+export default Image.extend({
+  name: 'custom-image',
+
+  addAttributes() {
+    return {
+      ...(Image.config as any).addAttributes(),
+      class: {
+        default: 'image',
+        rendered: false,
+      },
+    };
+  },
+
+  addCommands() {
+    return {
+      setImage: options => ({ tr, commands }) => {
+        if ((tr.selection as any)?.node?.type?.name == 'custom-image') {
+          return commands.updateAttributes('custom-image', options);
+        } else {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options,
+          });
+        }
+      },
+    };
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    HTMLAttributes.class = (node.attrs.class?.includes('custom-image-') ? '' : 'custom-image-') + node.attrs.class;
+    return [
+      'img',
+      HTMLAttributes,
+    ];
+  },
+});
diff --git a/txim/src/TUIKit/components/TUIChat/message-input/message-input-quote/index.vue b/txim/src/TUIKit/components/TUIChat/message-input/message-input-quote/index.vue
new file mode 100644
index 00000000..3dcc23e8
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-input/message-input-quote/index.vue
@@ -0,0 +1,157 @@
+<template>
+  <div
+    v-if="Boolean(quoteMessage) && props.displayType !== 'audio'"
+    :class="{
+      'input-quote-container': true,
+      'input-quote-container-uni': isUniFrameWork,
+      'input-quote-container-h5': isH5,
+    }"
+  >
+    <div class="input-quote-content">
+      <div class="max-one-line">
+        {{ quoteMessage.nick || quoteMessage.from }}: {{ quoteContentText }}
+      </div>
+      <Icon
+        class="input-quote-close-icon"
+        :file="closeIcon"
+        width="11px"
+        height="11px"
+        @onClick="cancelQuote"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  IMessageModel,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../common/Icon.vue';
+import closeIcon from '../../../../assets/icon/icon-close.svg';
+import { isH5, isUniFrameWork } from '../../../../utils/env';
+import { transformTextWithKeysToEmojiNames } from '../../emoji-config';
+import { InputDisplayType } from '../../../../interface';
+
+interface IProps {
+  displayType?: InputDisplayType;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  displayType: 'editor',
+});
+
+const TYPES = TUIChatEngine.TYPES;
+const quoteMessage = ref<IMessageModel>();
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CHAT, {
+    quoteMessage: onQuoteMessageUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CHAT, {
+    quoteMessage: onQuoteMessageUpdated,
+  });
+});
+
+const quoteContentText = computed(() => {
+  let _quoteContentText;
+  switch (quoteMessage.value?.type) {
+    case TYPES.MSG_TEXT:
+      _quoteContentText = transformTextWithKeysToEmojiNames(quoteMessage.value.payload?.text);
+      break;
+    case TYPES.MSG_IMAGE:
+      _quoteContentText = TUITranslateService.t('TUIChat.图片');
+      break;
+    case TYPES.MSG_AUDIO:
+      _quoteContentText = TUITranslateService.t('TUIChat.语音');
+      break;
+    case TYPES.MSG_VIDEO:
+      _quoteContentText = TUITranslateService.t('TUIChat.视频');
+      break;
+    case TYPES.MSG_FILE:
+      _quoteContentText = TUITranslateService.t('TUIChat.文件');
+      break;
+    case TYPES.MSG_CUSTOM:
+      _quoteContentText = TUITranslateService.t('TUIChat.自定义');
+      break;
+    case TYPES.MSG_FACE:
+      _quoteContentText = TUITranslateService.t('TUIChat.表情');
+      break;
+    case TYPES.MSG_MERGER:
+      _quoteContentText = TUITranslateService.t('TUIChat.聊天记录');
+      break;
+    default:
+      _quoteContentText = TUITranslateService.t('TUIChat.消息');
+      break;
+  }
+  return _quoteContentText;
+});
+
+function cancelQuote() {
+  TUIStore.update(StoreName.CHAT, 'quoteMessage', { message: undefined, type: 'quote' });
+}
+
+function onQuoteMessageUpdated(options?: { message: IMessageModel; type: string }) {
+  if (options?.message && options?.type === 'quote') {
+    quoteMessage.value = options.message;
+  } else {
+    quoteMessage.value = undefined;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+%common-container-style {
+  margin: 5px 100px 5px 8px;
+  display: flex;
+  flex: 0 1 auto;
+
+  .input-quote-content {
+    display: flex;
+    flex: 0 1 auto;
+    background-color: #fafafa;
+    border-radius: 8px;
+    padding: 12px;
+    font-size: 12px;
+    align-items: center;
+    line-height: 16px;
+    max-width: 100%;
+    box-sizing: border-box;
+    min-width: 0;
+
+    .max-one-line {
+      flex: 0 1 auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .input-quote-close-icon {
+    margin-left: 5px;
+    padding: 5px;
+  }
+}
+
+.input-quote-container {
+  @extend %common-container-style;
+}
+
+.input-quote-container-uni {
+  @extend %common-container-style;
+
+  margin: 5px 60px 0 30px;
+}
+
+.input-quote-container-h5 {
+  @extend %common-container-style;
+
+  margin: 5px 0 0;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/index.vue
new file mode 100644
index 00000000..7d2a737d
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/index.vue
@@ -0,0 +1,831 @@
+<template>
+  <div
+    class="tui-chat"
+    :class="[isH5 ? 'tui-chat-h5' : '']"
+  >
+    <!-- <JoinGroupCard v-if="isH5" /> -->
+    <div
+      id="tui-chat-main"
+      class="tui-chat-main"
+      @click="closeChatPop"
+    >
+      <!-- Safe Tips -->
+      <div
+        v-if="isOfficial"
+        class="tui-chat-safe-tips"
+      >
+        <span>
+          {{
+            TUITranslateService.t(
+              "TUIChat.【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。"
+            )
+          }}
+        </span>
+        <a @click="openComplaintLink(Link.complaint)">
+          {{ TUITranslateService.t("TUIChat.点此投诉") }}
+        </a>
+      </div>
+      <MessageGroupApplication
+        v-if="isGroup"
+        :key="props.groupID"
+        :groupID="props.groupID"
+      />
+      <!-- Message List -->
+      <ul
+        id="messageScrollList"
+        ref="messageListRef"
+        class="tui-message-list"
+        @click="onMessageListBackgroundClick"
+      >
+        <p
+          v-if="!isCompleted"
+          class="message-more"
+          @click="getHistoryMessageList"
+        >
+          {{ TUITranslateService.t("TUIChat.查看更多") }}
+        </p>
+        <li
+          v-for="(item, index) in messageList"
+          :id="'tui-' + item.ID"
+          :key="item.ID"
+          ref="messageElementListRef"
+          class="message-li"
+        >
+          <MessageTimestamp
+            :currTime="item.time"
+            :prevTime="index > 0 ? messageList[index - 1].time : 0"
+          />
+          <div class="message-item">
+            <MessageTip
+              v-if="item.type === TYPES.MSG_GRP_TIP || isCreateGroupCustomMessage(item)"
+              :content="item.getMessageContent()"
+              :blinkMessageIDList="blinkMessageIDList"
+              @blinkMessage="blinkMessage"
+            />
+            <MessageRevoked
+              v-else-if="item.isRevoked"
+              :isEdit="item.type === TYPES.MSG_TEXT"
+              :messageItem="shallowCopyMessage(item)"
+              @messageEdit="handleEdit(item)"
+            />
+            <MessagePlugin
+              v-else-if="isPluginMessage(item)"
+              :message="deepCopy(item)"
+              :blinkMessageIDList="blinkMessageIDList"
+              @resendMessage="resendMessage"
+              @handleToggleMessageItem="handleToggleMessageItem"
+              @handleH5LongPress="handleH5LongPress"
+            />
+            <div
+              v-else
+              :class="{
+                'message-event-bind-div': true,
+              }"
+              @longpress="handleToggleMessageItem($event, item, true)"
+              @click.prevent.right="handleToggleMessageItemForPC($event, item)"
+              @touchstart="handleH5LongPress($event, item, 'touchstart')"
+              @touchend="handleH5LongPress($event, item, 'touchend')"
+              @mouseover="handleH5LongPress($event, item, 'touchend')"
+            >
+              <MessageBubble
+                :content="item.getMessageContent()"
+                :isAudioPlayed="Boolean(audioPlayedMapping[item.ID])"
+                :blinkMessageIDList="blinkMessageIDList"
+                :isMultipleSelectMode="isMultipleSelectMode"
+                :messageItem="JSON.parse(JSON.stringify(item))"
+                :multipleSelectedMessageIDList="multipleSelectedMessageIDList"
+                @blinkMessage="blinkMessage"
+                @resendMessage="resendMessage(item)"
+                @changeSelectMessageIDList="changeSelectMessageIDList"
+                @setReadReceiptPanelVisible="setReadReceiptPanelVisible"
+              >
+                <template #messageElement>
+                  <MessageText
+                    v-if="item.type === TYPES.MSG_TEXT"
+                    :content="item.getMessageContent()"
+                    :messageItem="item"
+                  />
+                  <ProgressMessage
+                    v-else-if="item.type === TYPES.MSG_IMAGE"
+                    :content="item.getMessageContent()"
+                    :messageItem="item"
+                  >
+                    <MessageImage
+                      :content="item.getMessageContent()"
+                      :messageItem="item"
+                      @previewImage="handleImagePreview"
+                    />
+                  </ProgressMessage>
+                  <ProgressMessage
+                    v-else-if="item.type === TYPES.MSG_VIDEO"
+                    :content="item.getMessageContent()"
+                    :messageItem="item"
+                  >
+                    <MessageVideo
+                      :content="item.getMessageContent()"
+                      :messageItem="item"
+                    />
+                  </ProgressMessage>
+                  <MessageAudio
+                    v-else-if="item.type === TYPES.MSG_AUDIO"
+                    :content="item.getMessageContent()"
+                    :messageItem="item"
+                    @setAudioPlayed="setAudioPlayed"
+                  />
+                  <ProgressMessage
+                    v-else-if="item.type === TYPES.MSG_FILE"
+                    :content="item.getMessageContent()"
+                    :messageItem="item"
+                  >
+                    <MessageFile
+                      :content="item.getMessageContent()"
+                      :messageItem="item"
+                    />
+                  </ProgressMessage>
+                  <MessageRecord
+                    v-else-if="item.type === TYPES.MSG_MERGER"
+                    :renderData="item.payload"
+                    :messageItem="item"
+                  />
+                  <MessageFace
+                    v-else-if="item.type === TYPES.MSG_FACE"
+                    :content="item.getMessageContent()"
+                  />
+                  <MessageLocation
+                    v-else-if="item.type === TYPES.MSG_LOCATION"
+                    :content="item.getMessageContent()"
+                  />
+                  <MessageStreamMarkdown
+                    v-else-if="isBotMessage(item)"
+                    :payloadData="item.payload.data"
+                    :message="item"
+                    @onStreaming="scrollStreamMessageToBottom"
+                  />
+                  <MessageCustom
+                    v-else-if="item.type === TYPES.MSG_CUSTOM"
+                    :content="item.getMessageContent()"
+                    :messageItem="item"
+                  />
+                </template>
+                <template #TUIEmojiPlugin>
+                  <TUIEmojiPlugin
+                    v-if="isShowEmojiPlugin && item.reactionList.length > 0"
+                    type="reaction-detail"
+                    :emojiConfig="emojiConfig"
+                    :message="shallowCopyMessage(item)"
+                  />
+                </template>
+              </MessageBubble>
+            </div>
+            <!-- message tool -->
+            <MessageTool
+              v-if="item.ID === toggleID"
+              ref="messageToolListRef"
+              :class="{
+                'message-tool': true,
+                'message-tool-out': item.flow === 'out',
+                'message-tool-in': item.flow === 'in',
+                'message-tool-bottom': isTopMessageDom
+              }"
+              :messageItem="item"
+              :isMultipleSelectMode="isMultipleSelectMode"
+              @toggleMultipleSelectMode="() => emits('toggleMultipleSelectMode')"
+            >
+              <template #TUIEmojiPlugin>
+                <TUIEmojiPlugin
+                  v-if="isShowEmojiPlugin"
+                  :message="item"
+                  :emojiConfig="emojiConfig"
+                />
+              </template>
+            </MessageTool>
+          </div>
+        </li>
+      </ul>
+      <ScrollButton
+        ref="scrollButtonInstanceRef"
+        @scrollToLatestMessage="scrollToLatestMessage"
+      />
+      <Dialog
+        v-if="reSendDialogShow"
+        class="resend-dialog"
+        :show="reSendDialogShow"
+        :isH5="!isPC"
+        :center="true"
+        :isHeaderShow="isPC"
+        @submit="resendMessageConfirm()"
+        @update:show="(e) => (reSendDialogShow = e)"
+      >
+        <p class="delDialog-title">
+          {{ TUITranslateService.t("TUIChat.确认重发该消息？") }}
+        </p>
+      </Dialog>
+      <ImagePreviewer
+        v-if="showImagePreview"
+        :currentImage="currentImagePreview"
+        :imageList="imageMessageList"
+        @close="onImagePreviewerClose"
+      />
+      <ReadReceiptPanel
+        v-if="isShowReadUserStatusPanel"
+        :message="Object.assign({}, readStatusMessage)"
+        @setReadReceiptPanelVisible="setReadReceiptPanelVisible"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, computed, onMounted, onUnmounted, watch } from '../../../adapter-vue';
+import TUIChatEngine, {
+  IMessageModel,
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import { outsideClick, getBoundingClientRect, getScrollInfo } from '@tencentcloud/universal-api';
+import { TUIEmojiPlugin } from '@tencentcloud/tui-emoji-plugin';
+// import { JoinGroupCard } from '@tencentcloud/call-uikit-vue';
+import Link from './link';
+import MessageGroupApplication from './message-group-application/index.vue';
+import MessageText from './message-elements/message-text.vue';
+import MessageImage from './message-elements/message-image.vue';
+import MessageAudio from './message-elements/message-audio.vue';
+import MessageRecord from './message-elements/message-record/index.vue';
+import MessageFile from './message-elements/message-file.vue';
+import MessageFace from './message-elements/message-face.vue';
+import MessageCustom from './message-elements/message-custom.vue';
+import MessageTip from './message-elements/message-tip.vue';
+import MessageBubble from './message-elements/message-bubble.vue';
+import MessageLocation from './message-elements/message-location.vue';
+import MessageTimestamp from './message-elements/message-timestamp.vue';
+import MessageVideo from './message-elements/message-video.vue';
+import MessageTool from './message-tool/index.vue';
+import MessageRevoked from './message-tool/message-revoked.vue';
+import MessagePlugin from '../../../plugins/plugin-components/message-plugin.vue';
+import MessageStreamMarkdown from './message-elements/message-stream-markdown/index.vue';
+import { isBotMessage } from './message-elements/message-stream-markdown/index';
+import ScrollButton from './scroll-button/index.vue';
+import ReadReceiptPanel from './read-receipt-panel/index.vue';
+import { isPluginMessage } from '../../../plugins/plugin-components/index';
+import Dialog from '../../common/Dialog/index.vue';
+import ImagePreviewer from '../../common/ImagePreviewer/index.vue';
+import ProgressMessage from '../../common/ProgressMessage/index.vue';
+import { emojiConfig } from '../emoji-config';
+import { isPC, isH5 } from '../../../utils/env';
+import chatStorage from '../utils/chatStorage';
+import { throttle } from '../../../utils/lodash';
+import { isEnabledMessageReadReceiptGlobal, shallowCopyMessage, isCreateGroupCustomMessage, deepCopy } from '../utils/utils';
+
+interface ScrollConfig {
+  scrollToMessage?: IMessageModel;
+  scrollToBottom?: boolean;
+  scrollToOffset?: {
+    top?: number;
+    bottom?: number;
+  };
+}
+
+interface IProps {
+  isGroup: boolean;
+  groupID: string;
+  isNotInGroup: boolean;
+  isMultipleSelectMode: boolean;
+}
+
+interface IEmits {
+  (key: 'closeInputToolBar'): void;
+  (key: 'toggleMultipleSelectMode'): void;
+  (key: 'handleEditor', message: IMessageModel, type: string): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  isGroup: false,
+  groupID: '',
+  isNotInGroup: false,
+  isMultipleSelectMode: false,
+});
+
+let groupType: string | undefined;
+let observer: IntersectionObserver | null = null;
+const sentReceiptMessageIDSet = new Set<string>();
+const isOfficial = TUIStore.getData(StoreName.APP, 'isOfficial');
+const enabledEmojiPlugin = TUIStore.getData(StoreName.APP, 'enabledEmojiPlugin');
+
+const messageListRef = ref<HTMLElement>();
+const messageToolListRef = ref<Array<{ messageToolDom: HTMLElement }>>();
+// The messageList displayed on the screen, not including messages where isDeleted is true
+const messageList = ref<IMessageModel[]>();
+// All messageList, including messages where isDeleted is true
+const allMessageList = ref<IMessageModel[]>();
+const multipleSelectedMessageIDList = ref<string[]>([]);
+const isCompleted = ref(false);
+const currentConversationID = ref('');
+const currentLastMessage = ref<IMessageModel>();
+const nextReqMessageID = ref();
+const toggleID = ref('');
+const TYPES = ref(TUIChatEngine.TYPES);
+const isLongpressing = ref(false);
+const messageTarget = ref<IMessageModel>();
+const messageElementListRef = ref<HTMLElement[] | null>();
+const targetMessageDom = ref<HTMLElement | null>();
+const blinkMessageIDList = ref<string[]>([]);
+const scrollButtonInstanceRef = ref<InstanceType<typeof ScrollButton>>();
+const isShowReadUserStatusPanel = ref<boolean>(false);
+const readStatusMessage = ref<IMessageModel>();
+const beforeHistoryGetScrollHeight = ref<number>(0);
+const isTopMessageDom = ref<boolean>(false);
+const audioPlayedMapping = ref<Record<string, boolean>>({});
+
+// image preview
+const showImagePreview = ref(false);
+const currentImagePreview = ref<IMessageModel>();
+const imageMessageList = computed(() =>
+  messageList?.value?.filter((item: IMessageModel) => {
+    return !item.isRevoked && !item.hasRiskContent && item.type === TYPES.value.MSG_IMAGE;
+  }),
+);
+
+// resend message dialog
+const reSendDialogShow = ref(false);
+const resendMessageData = ref();
+
+const isShowEmojiPlugin = computed(() => {
+  const msgPopMenuExtensionList = TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.MSG_POP_MENU.EXT_ID, {
+    enabledEmojiPlugin,
+  });
+  return msgPopMenuExtensionList.some((item) => {
+    return item.text === 'TUIEmojiPlugin';
+  });
+});
+
+onMounted(() => {
+  // Retrieve the information about whether the audio has been played from localStorage
+  audioPlayedMapping.value = chatStorage.getChatStorage('audioPlayedMapping') || {};
+
+  TUIStore.watch(StoreName.CHAT, {
+    messageList: onMessageListUpdated,
+    messageSource: onMessageSourceUpdated,
+    isCompleted: isCompletedUpdated,
+  });
+
+  TUIStore.watch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdated,
+  });
+
+  TUIStore.watch(StoreName.CUSTOM, {
+    isShowMessagePopMenu: isShowMessagePopMenuUpdated,
+  });
+});
+
+onMounted(() => {
+  messageListRef.value?.addEventListener('scroll', handelScrollListScroll);
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CHAT, {
+    messageList: onMessageListUpdated,
+    messageSource: onMessageSourceUpdated,
+    isCompleted: isCompletedUpdated,
+  });
+
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdated,
+  });
+
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    isShowMessagePopMenu: isShowMessagePopMenuUpdated,
+  });
+
+  messageListRef.value?.removeEventListener('scroll', handelScrollListScroll);
+
+  if (Object.keys(audioPlayedMapping.value).length > 0) {
+    // Synchronize storage about whether the audio has been played when the component is unmounted
+    chatStorage.setChatStorage('audioPlayedMapping', audioPlayedMapping.value);
+  }
+
+  sentReceiptMessageIDSet.clear();
+  observer?.disconnect();
+  observer = null;
+});
+
+async function onMessageListUpdated(list: IMessageModel[]) {
+  observer?.disconnect();
+  const oldLastMessage = currentLastMessage.value;
+  let hasEmojiReaction = false;
+  allMessageList.value = list;
+  messageList.value = list.filter((message) => {
+    if (message.reactionList?.length && !message.isDeleted) {
+      hasEmojiReaction = true;
+    }
+    return !message.isDeleted;
+  });
+  if (!messageList.value?.length) {
+    currentLastMessage.value = {};
+    return;
+  }
+  const newLastMessage = messageList.value?.[messageList.value?.length - 1];
+  if (messageTarget.value) {
+    if (
+      messageList.value?.findIndex(
+        (message: IMessageModel) => message?.ID === messageTarget.value?.ID,
+      ) >= 0
+    ) {
+      const tempMessage = messageTarget.value;
+      messageTarget.value = undefined;
+      await scrollToPosition({ scrollToMessage: tempMessage });
+      await blinkMessage(tempMessage?.ID);
+    }
+  } else if (beforeHistoryGetScrollHeight.value) {
+    await scrollToPosition({
+      scrollToOffset: { bottom: beforeHistoryGetScrollHeight.value },
+    });
+    beforeHistoryGetScrollHeight.value = 0;
+  } else if (scrollButtonInstanceRef.value?.isScrollButtonVisible && newLastMessage?.flow === 'in') {
+    return;
+  } else if (
+    newLastMessage?.ID
+    && JSON.stringify(oldLastMessage) !== JSON.stringify(newLastMessage)
+  ) {
+    await scrollToPosition({ scrollToBottom: true });
+  } else if (hasEmojiReaction && isCurrentListInBottomPosition()) {
+    await scrollToPosition({ scrollToBottom: true });
+  }
+  currentLastMessage.value = Object.assign({}, newLastMessage);
+  if (isEnabledMessageReadReceiptGlobal()) {
+    nextTick(() => bindIntersectionObserver());
+  }
+}
+
+function isCurrentListInBottomPosition() {
+  return (
+    messageListRef.value
+    && typeof messageListRef.value.scrollTop === 'number'
+    && typeof messageListRef.value.scrollHeight === 'number'
+    && typeof messageListRef.value.clientHeight === 'number'
+    && Math.ceil(
+      messageListRef.value.scrollTop + messageListRef.value.clientHeight,
+    ) >= messageListRef.value.scrollHeight
+  );
+}
+
+async function scrollStreamMessageToBottom() {
+  await scrollToPosition({ scrollToBottom: true });
+}
+
+async function scrollToPosition(config: ScrollConfig = {}): Promise<void> {
+  return new Promise((resolve, reject) => {
+    requestAnimationFrame(() => {
+      if (!messageListRef.value) {
+        reject();
+      }
+      const container = messageListRef.value;
+      if (config.scrollToBottom) {
+        container!.scrollTop = container!.scrollHeight;
+      } else if (config.scrollToMessage) {
+        const targetMessageDom = messageElementListRef.value?.find(
+          (dom: HTMLElement) => dom?.id === `tui-${config.scrollToMessage?.ID}`,
+        );
+        if (targetMessageDom?.scrollIntoView) {
+          targetMessageDom.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+      } else if (config.scrollToOffset) {
+        if (config.scrollToOffset?.top) {
+          container!.scrollTop = config.scrollToOffset.top;
+        } else if (config.scrollToOffset?.bottom) {
+          container!.scrollTop = container!.scrollHeight - config.scrollToOffset.bottom;
+        }
+      }
+      resolve();
+    });
+  });
+}
+
+async function onMessageSourceUpdated(message: IMessageModel) {
+  // messageSource change has two cases
+  // 1. messageSource change -> cache miss -> messageList change,
+  // 2. messageSource change -> cache hit -> messageList not change
+  // Only the second case needs to add scrollToTarget when listening here
+  messageTarget.value = message;
+  if (messageTarget.value) {
+    if (
+      messageList.value?.findIndex(
+        (message: IMessageModel) => message?.ID === messageTarget.value?.ID,
+      ) >= 0
+    ) {
+      const tempMessage = messageTarget.value;
+      messageTarget.value = undefined;
+      await scrollToPosition({ scrollToMessage: tempMessage });
+      await blinkMessage(tempMessage?.ID);
+    }
+  }
+}
+
+function isCompletedUpdated(flag: boolean) {
+  isCompleted.value = flag;
+}
+
+function isShowMessagePopMenuUpdated(isShow: boolean) {
+  if (!isShow) {
+    toggleID.value = '';
+  }
+}
+
+const onCurrentConversationIDUpdated = (conversationID: string) => {
+  currentConversationID.value = conversationID;
+  if (!currentConversationID.value) {
+    messageList.value = [];
+  }
+  if (isEnabledMessageReadReceiptGlobal()) {
+    const { groupProfile } = TUIStore.getConversationModel(conversationID) || {};
+    groupType = groupProfile?.type;
+  }
+  if (Object.keys(audioPlayedMapping.value).length > 0) {
+    // Synchronize storage about whether the audio has been played when converstaion switched
+    chatStorage.setChatStorage('audioPlayedMapping', audioPlayedMapping.value);
+  }
+};
+
+const getHistoryMessageList = () => {
+  TUIChatService.getMessageList().then((res: any) => {
+    const { nextReqMessageID: ID } = res.data;
+    nextReqMessageID.value = ID;
+  });
+  // After getting the historical messages, keep the scroll bar in the original position
+  beforeHistoryGetScrollHeight.value = messageListRef.value?.scrollHeight;
+};
+
+const openComplaintLink = (type: any) => {
+  window.open(type.url);
+};
+
+const handleImagePreview = (message: IMessageModel) => {
+  if (showImagePreview.value || currentImagePreview.value || isLongpressing.value) {
+    return;
+  }
+  showImagePreview.value = true;
+  currentImagePreview.value = message;
+};
+
+const onImagePreviewerClose = () => {
+  showImagePreview.value = false;
+  currentImagePreview.value = null;
+};
+
+// toggle message
+const handleToggleMessageItem = (e: any, message: IMessageModel, isLongpress = false) => {
+  if (props.isMultipleSelectMode || props.isNotInGroup) {
+    return;
+  }
+  if (isLongpress) {
+    isLongpressing.value = true;
+  }
+  toggleID.value = message.ID;
+  filterTopMessageDom(e.target);
+};
+
+const handleToggleMessageItemForPC = (e: MouseEvent, message: IMessageModel) => {
+  if (props.isMultipleSelectMode || props.isNotInGroup) {
+    return;
+  }
+  if (isPC) {
+    toggleID.value = message.ID;
+    targetMessageDom.value = messageElementListRef.value?.find((dom: HTMLElement) => dom?.id === `tui-${message.ID}`);
+    nextTick(() => {
+      const ignoreDomRefs = messageToolListRef.value && messageToolListRef.value[0]?.messageToolDom;
+      outsideClick.listen({
+        domRefs: targetMessageDom.value,
+        ignoreDomRefs: ignoreDomRefs,
+        handler: closeChatPop,
+        button: e.button,
+      });
+      filterTopMessageDom(e.target);
+    });
+  }
+};
+
+function filterTopMessageDom(toggleMessageElement: any) {
+  const chatElement = document.getElementById('tui-chat-main');
+  const safeTop = 160;
+  const messageElementRect = toggleMessageElement.getBoundingClientRect();
+  const ChatElementRect = chatElement.getBoundingClientRect();
+  isTopMessageDom.value = messageElementRect.top - ChatElementRect.top < safeTop ? true : false;
+}
+
+// h5 long press
+let timer: number;
+const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
+  if (props.isMultipleSelectMode || props.isNotInGroup) {
+    return;
+  }
+  if (!isH5) return;
+  function longPressHandler() {
+    clearTimeout(timer);
+    handleToggleMessageItem(e, message);
+  }
+  function touchStartHandler() {
+    timer = setTimeout(longPressHandler, 500);
+  }
+  function touchEndHandler() {
+    clearTimeout(timer);
+  }
+  switch (type) {
+    case 'touchstart':
+      touchStartHandler();
+      break;
+    case 'touchend':
+      touchEndHandler();
+      setTimeout(() => {
+        isLongpressing.value = false;
+      }, 200);
+      break;
+  }
+};
+
+// re-edit message
+const handleEdit = (message: IMessageModel) => {
+  emits('handleEditor', message, 'reedit');
+};
+
+const resendMessage = (message: IMessageModel) => {
+  reSendDialogShow.value = true;
+  resendMessageData.value = message;
+};
+
+const resendMessageConfirm = () => {
+  reSendDialogShow.value = !reSendDialogShow.value;
+  const messageModel = resendMessageData.value;
+  messageModel.resendMessage();
+};
+
+function blinkMessage(messageID: string): Promise<void> {
+  return new Promise((resolve) => {
+    const index = blinkMessageIDList.value.indexOf(messageID);
+    if (index < 0) {
+      blinkMessageIDList.value.push(messageID);
+      const timer = setTimeout(() => {
+        blinkMessageIDList.value.splice(blinkMessageIDList.value.indexOf(messageID), 1);
+        clearTimeout(timer);
+        resolve();
+      }, 3000);
+    }
+  });
+}
+
+async function scrollToLatestMessage() {
+  const { scrollHeight } = await getScrollInfo('#messageScrollList');
+  const { height } = await getBoundingClientRect('#messageScrollList');
+  if (messageListRef.value) {
+    messageListRef.value.scrollTop = scrollHeight - height;
+  }
+}
+
+const handelScrollListScroll = throttle(function (e: Event) {
+  scrollButtonInstanceRef.value?.judgeScrollOverOneScreen(e);
+}, 150, { leading: true });
+
+async function bindIntersectionObserver() {
+  if (
+    !messageList.value
+    || !messageListRef.value
+    || messageList.value.length === 0
+  ) {
+    return;
+  }
+
+  if (groupType === TYPES.value.GRP_AVCHATROOM || groupType === TYPES.value.GRP_COMMUNITY) {
+    // AVCHATROOM and COMMUNITY chats do not monitor read receipts for messages.
+    return;
+  }
+
+  const mappingFromIDToMessage: Record<string, {
+    msgDom: HTMLElement;
+    msgModel: IMessageModel | undefined;
+  }> = {};
+
+  observer?.disconnect();
+  observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      const { isIntersecting, target } = entry;
+      if (isIntersecting) {
+        const { msgDom, msgModel } = mappingFromIDToMessage[target.id];
+        if (
+          msgModel
+          && !msgModel.readReceiptInfo?.isPeerRead
+          && !sentReceiptMessageIDSet.has(msgModel.ID)
+        ) {
+          TUIChatService.sendMessageReadReceipt([msgModel]);
+          sentReceiptMessageIDSet.add(msgModel.ID);
+          observer?.unobserve(msgDom);
+        }
+      }
+    });
+  }, {
+    root: messageListRef.value,
+    threshold: 0.7,
+  });
+
+  const arrayOfMessageLi = messageListRef.value?.querySelectorAll('.message-li');
+  if (arrayOfMessageLi) {
+    for (let i = 0; i < arrayOfMessageLi?.length; ++i) {
+      const messageElement = arrayOfMessageLi[i] as HTMLElement;
+      const matchingMessage = messageList.value.find((message: IMessageModel) => {
+        return messageElement.id.slice(4) === message.ID;
+      });
+      if (
+        matchingMessage
+        && matchingMessage.needReadReceipt
+        && matchingMessage.flow === 'in'
+      ) {
+        mappingFromIDToMessage[messageElement.id] = {
+          msgDom: messageElement,
+          msgModel: matchingMessage,
+        };
+        observer?.observe(messageElement);
+      }
+    }
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const isSignalingMessage = (message: IMessageModel) => {
+  return message?.type === TYPES.value.MSG_CUSTOM && message?.getSignalingInfo();
+};
+
+function setReadReceiptPanelVisible(visible: boolean, message?: IMessageModel) {
+  if (visible && props.isNotInGroup) {
+    return;
+  }
+  if (!visible) {
+    readStatusMessage.value = undefined;
+  } else {
+    readStatusMessage.value = message;
+  }
+  isShowReadUserStatusPanel.value = visible;
+}
+
+function closeChatPop() {
+  toggleID.value = '';
+}
+
+function onMessageListBackgroundClick() {
+  emits('closeInputToolBar');
+}
+
+watch(() => props.isMultipleSelectMode, (newValue) => {
+  if (!newValue) {
+    changeSelectMessageIDList({
+      type: 'clearAll',
+      messageID: '',
+    });
+  }
+});
+
+function changeSelectMessageIDList({ type, messageID }: { type: 'add' | 'remove' | 'clearAll'; messageID: string }) {
+  // TODO need to delete this
+  if (type === 'clearAll') {
+    multipleSelectedMessageIDList.value = [];
+  } else if (type === 'add' && !multipleSelectedMessageIDList.value.includes(messageID)) {
+    multipleSelectedMessageIDList.value.push(messageID);
+  } else if (type === 'remove') {
+    multipleSelectedMessageIDList.value = multipleSelectedMessageIDList.value.filter(id => id !== messageID);
+  }
+}
+
+function mergeForwardMessage() {
+  TUIStore.update(StoreName.CUSTOM, 'multipleForwardMessageID', {
+    isMergeForward: true,
+    messageIDList: multipleSelectedMessageIDList.value,
+  });
+}
+
+function oneByOneForwardMessage() {
+  TUIStore.update(StoreName.CUSTOM, 'multipleForwardMessageID', {
+    isMergeForward: false,
+    messageIDList: multipleSelectedMessageIDList.value,
+  });
+}
+
+function setAudioPlayed(messageID: string) {
+  audioPlayedMapping.value = {
+    ...audioPlayedMapping.value,
+    [messageID]: true,
+  };
+}
+
+defineExpose({
+  oneByOneForwardMessage,
+  mergeForwardMessage,
+  scrollToLatestMessage,
+});
+</script>
+
+<style lang="scss" scoped src="./style/index.scss"></style>
+<style>
+.row-reverse {
+  flex-direction: row-reverse;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/link/index.ts b/txim/src/TUIKit/components/TUIChat/message-list/link/index.ts
new file mode 100644
index 00000000..451c490a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/link/index.ts
@@ -0,0 +1,23 @@
+const Link = {
+  product: {
+    label: '产品文档',
+    url: 'https://cloud.tencent.com/document/product/269/1499#.E7.BE.A4.E7.BB.84.E5.8A.9F.E8.83.BD',
+  },
+  customMessage: {
+    label: '自定义消息',
+    url: 'https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#createCustomMessage',
+  },
+  complaint: {
+    label: '点此投诉',
+    url: 'https://cloud.tencent.com/apply/p/xc3oaubi98g',
+  },
+  implement: {
+    label: '集成TUICallKit',
+    url: 'https://cloud.tencent.com/document/product/269/79861',
+  },
+  purchase: {
+    label: '开通腾讯实时音视频服务',
+    url: 'https://cloud.tencent.com/document/product/1640/79968',
+  },
+};
+export default Link;
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-audio.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-audio.vue
new file mode 100644
index 00000000..bdb9e056
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-audio.vue
@@ -0,0 +1,203 @@
+<template>
+  <div
+    class="message-audio"
+    :class="[
+      isMobile && 'message-audio-h5',
+      message.flow === 'out' && 'reserve',
+      message.hasRiskContent && 'disable',
+    ]"
+    @click.stop="play"
+  >
+    <div class="audio-icon-container">
+      <div :class="{ 'mask': true, 'play': isAudioPlaying }" />
+      <Icon
+        class="icon"
+        width="16px"
+        height="20px"
+        :file="audioIcon"
+      />
+    </div>
+    <span
+      class="time"
+      :style="{ width: `${data.second * 10 + 20}px` }"
+    >
+      {{ data.second || 1 }} "
+    </span>
+    <audio
+      ref="audioRef"
+      :src="data.url"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watchEffect, ref, onMounted, onUnmounted } from '../../../../adapter-vue';
+import Icon from '../../../common/Icon.vue';
+import audioIcon from '../../../../assets/icon/msg-audio.svg';
+import { isMobile } from '../../../../utils/env';
+
+interface IEmits {
+  (e: 'setAudioPlayed', messageID: string): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = defineProps({
+  content: {
+    type: Object,
+    default: () => ({}),
+  },
+  messageItem: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const data = ref();
+const message = ref();
+const isAudioPlaying = ref();
+const audioRef = ref<HTMLAudioElement>();
+
+onMounted(() => {
+  if (audioRef.value) {
+    audioRef.value.addEventListener('ended', onAudioEnded);
+    audioRef.value.addEventListener('pause', onAudioPaused);
+  }
+});
+
+onUnmounted(() => {
+  if (audioRef.value) {
+    audioRef.value.removeEventListener('ended', onAudioEnded);
+    audioRef.value.removeEventListener('pause', onAudioPaused);
+  }
+});
+
+watchEffect(() => {
+  message.value = props.messageItem;
+  data.value = props.content;
+});
+
+function play() {
+  if (message.value.hasRiskContent || !audioRef.value) {
+    return;
+  }
+  if (!audioRef.value.paused) {
+    audioRef.value.pause();
+    audioRef.value.currentTime = 0;
+    isAudioPlaying.value = false;
+    return;
+  }
+  const audios = document.getElementsByTagName('audio');
+  Array.from(audios).forEach((audio) => {
+    if (!audio.paused) {
+      audio.pause();
+      audio.currentTime = 0;
+    }
+  });
+  audioRef.value.play();
+  isAudioPlaying.value = true;
+  if (message.value.flow === 'in') {
+    emits('setAudioPlayed', message.value.ID);
+  }
+}
+
+function onAudioEnded() {
+  isAudioPlaying.value = false;
+}
+
+function onAudioPaused() {
+  isAudioPlaying.value = false;
+}
+</script>
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+
+$flow-in-bg-color: #fbfbfb;
+$flow-out-bg-color: #dceafd;
+
+.message-audio {
+  flex-direction: row;
+  display: flex;
+  flex: 0 0 auto;
+  cursor: pointer;
+  overflow: hidden;
+
+  .time {
+    flex: 1 1 auto;
+    max-width: 300px;
+    text-align: start;
+  }
+
+  audio {
+    width: 0;
+    height: 0;
+  }
+}
+
+.disable {
+  cursor: not-allowed;
+}
+
+.audio-icon-container {
+  flex: 0 0 auto;
+  position: relative;
+  margin: 0 7px 0 0;
+  overflow: hidden;
+
+  .mask {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    transform-origin: right;
+    transform: scaleX(0);
+    background-color: $flow-in-bg-color;
+
+    &.play {
+      animation: audio-play 2s steps(1, end) infinite;
+    }
+  }
+}
+
+@keyframes audio-play {
+  0% {
+    transform: scaleX(0.7056);
+  }
+
+  50% {
+    transform: scaleX(0.3953);
+  }
+
+  75% {
+    transform: scaleX(0);
+    visibility: hidden;
+  }
+
+  100% {
+    transform: scaleX(0);
+    visibility: hidden;
+  }
+}
+
+.message-audio.reserve {
+  flex-direction: row-reverse;
+
+  .time {
+    text-align: end;
+  }
+
+  .icon {
+    transform: rotate(180deg);
+  }
+
+  .audio-icon-container {
+    margin: 0 0 0 7px;
+
+    .mask {
+      transform-origin: left;
+      background-color: $flow-out-bg-color;
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue
new file mode 100644
index 00000000..16a39e83
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue
@@ -0,0 +1,483 @@
+<template>
+  <div :class="containerClassNameList">
+    <!-- multiple select radio -->
+    <RadioSelect
+      v-if="props.isMultipleSelectMode"
+      class="multiple-select-radio"
+      :isSelected="isMultipleSelected"
+      @onChange="toggleMultipleSelect"
+    />
+    <div
+      :class="{
+        'control-reverse': message.flow === 'out'
+      }"
+    >
+      <!-- message-bubble-container -->
+      <div class="message-bubble-content">
+        <div
+          class="message-bubble-main-content"
+          :class="[message.flow === 'in' ? '' : 'reverse']"
+        >
+          <Avatar
+            useSkeletonAnimation
+            :url="message.avatar || ''"
+          />
+          <main
+            class="message-body"
+            @click.stop
+          >
+            <div
+              v-if="message.flow === 'in' && message.conversationType === 'GROUP'"
+              class="message-body-nick-name"
+            >
+              {{ props.content.showName }}
+            </div>
+            <div :class="['message-body-main', message.flow === 'out' && 'message-body-main-reverse']">
+              <div
+                :class="[
+                  'blink',
+                  'message-body-content',
+                  message.flow === 'out' ? 'content-out' : 'content-in',
+                  message.hasRiskContent && 'content-has-risk',
+                  isNoPadding ? 'content-no-padding' : '',
+                  isNoPadding && isBlink ? 'blink-shadow' : '',
+                  !isNoPadding && isBlink ? 'blink-content' : '',
+                ]"
+              >
+                <div class="content-main">
+                  <img
+                    v-if="
+                      (message.type === TYPES.MSG_IMAGE || message.type === TYPES.MSG_VIDEO) &&
+                        message.hasRiskContent
+                    "
+                    :class="['message-risk-replace', !isPC && 'message-risk-replace-h5']"
+                    :src="riskImageReplaceUrl"
+                  >
+                  <template v-else>
+                    <slot name="messageElement" />
+                    <slot name="TUIEmojiPlugin" />
+                  </template>
+                </div>
+                <!-- Risk Content Tips -->
+                <div
+                  v-if="message.hasRiskContent"
+                  class="content-has-risk-tips"
+                >
+                  {{ riskContentText }}
+                </div>
+              </div>
+              <!-- audio unplay mark -->
+              <div
+                v-if="isDisplayUnplayMark"
+                class="audio-unplay-mark"
+              />
+              <!-- Send Fail Icon -->
+              <div
+                v-if="message.status === 'fail' || message.hasRiskContent"
+                class="message-label fail"
+                @click="resendMessage()"
+              >
+                !
+              </div>
+              <!-- Loading Icon -->
+              <Icon
+                v-if="message.status === 'unSend' && needLoadingIconMessageType.includes(message.type)"
+                class="message-label loading-circle"
+                :file="loadingIcon"
+                :width="'15px'"
+                :height="'15px'"
+              />
+              <!-- Read & Unread -->
+              <ReadStatus
+                class="message-label align-self-bottom"
+                :message="shallowCopyMessage(message)"
+                @openReadUserPanel="openReadUserPanel"
+              />
+            </div>
+          </main>
+        </div>
+        <!-- message extra area -->
+        <div
+          class="message-bubble-extra-content"
+        >
+          <!-- extra: message translation -->
+          <MessageTranslate
+            :class="message.flow === 'out' ? 'reverse' : 'flex-row'"
+            :message="message"
+          />
+          <!-- extra: message convert voice to text -->
+          <MessageConvert
+            :class="message.flow === 'out' ? 'reverse' : 'flex-row'"
+            :message="message"
+          />
+          <!-- extra: message quote -->
+          <MessageQuote
+            :class="message.flow === 'out' ? 'reverse' : 'flex-row'"
+            :message="message"
+            @blinkMessage="blinkMessage"
+            @scrollTo="scrollTo"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs } from '../../../../adapter-vue';
+import TUIChatEngine, { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../common/Icon.vue';
+import ReadStatus from './read-status/index.vue';
+import MessageQuote from './message-quote/index.vue';
+import Avatar from '../../../common/Avatar/index.vue';
+import MessageTranslate from './message-translate/index.vue';
+import MessageConvert from './message-convert/index.vue';
+import RadioSelect from '../../../common/RadioSelect/index.vue';
+import loadingIcon from '../../../../assets/icon/loading.png';
+import { shallowCopyMessage } from '../../utils/utils';
+import { isPC } from '../../../../utils/env';
+
+interface IProps {
+  messageItem: IMessageModel;
+  content?: any;
+  classNameList?: string[];
+  blinkMessageIDList?: string[];
+  isMultipleSelectMode?: boolean;
+  isAudioPlayed?: boolean | undefined;
+  multipleSelectedMessageIDList?: string[];
+}
+
+interface IEmits {
+  (e: 'resendMessage'): void;
+  (e: 'blinkMessage', messageID: string): void;
+  (e: 'setReadReceiptPanelVisible', visible: boolean, message?: IMessageModel): void;
+  (e: 'changeSelectMessageIDList', options: { type: 'add' | 'remove' | 'clearAll'; messageID: string }): void;
+  // Only for uniapp
+  (e: 'scrollTo', scrollHeight: number): void;
+}
+
+const emits = defineEmits<IEmits>();
+
+const props = withDefaults(defineProps<IProps>(), {
+  messageItem: () => ({} as IMessageModel),
+  content: () => ({}),
+  isAudioPlayed: false,
+  blinkMessageIDList: () => [],
+  classNameList: () => [],
+  isMultipleSelectMode: false,
+  multipleSelectedMessageIDList: () => [],
+});
+
+const TYPES = TUIChatEngine.TYPES;
+const riskImageReplaceUrl = 'https://web.sdk.qcloud.com/component/TUIKit/assets/has_risk_default.png';
+const needLoadingIconMessageType = [
+  TYPES.MSG_LOCATION,
+  TYPES.MSG_TEXT,
+  TYPES.MSG_CUSTOM,
+  TYPES.MSG_MERGER,
+  TYPES.MSG_FACE,
+];
+
+const { blinkMessageIDList, messageItem: message } = toRefs(props);
+
+const isMultipleSelected = computed<boolean>(() => {
+  return props.multipleSelectedMessageIDList.includes(message.value.ID);
+});
+
+const isDisplayUnplayMark = computed<boolean>(() => {
+  return message.value.flow === 'in'
+    && message.value.status === 'success'
+    && message.value.type === TYPES.MSG_AUDIO
+    && !props.isAudioPlayed;
+});
+
+const containerClassNameList = computed(() => {
+  return [
+    'message-bubble',
+    isMultipleSelected.value ? 'multiple-selected' : '',
+    ...props.classNameList,
+  ];
+});
+
+// When an emoji is deleted, the `reactionList` will update the corresponding emoji's `totalUserCount`.
+const hasEmojiReaction = computed(() => {
+  return message.value?.reactionList.some((item: any) => item.totalUserCount !== 0);
+});
+
+const isNoPadding = computed(() => {
+  return !hasEmojiReaction.value && [TYPES.MSG_IMAGE, TYPES.MSG_VIDEO, TYPES.MSG_MERGER].includes(message.value.type);
+});
+
+const riskContentText = computed<string>(() => {
+  let content = TUITranslateService.t('TUIChat.涉及敏感内容') + ', ';
+  if (message.value.flow === 'out') {
+    content += TUITranslateService.t('TUIChat.发送失败');
+  } else {
+    content += TUITranslateService.t(
+      message.value.type === TYPES.MSG_AUDIO ? 'TUIChat.无法收听' : 'TUIChat.无法查看',
+    );
+  }
+  return content;
+});
+
+const isBlink = computed(() => {
+  if (message.value?.ID) {
+    return blinkMessageIDList?.value?.includes(message.value.ID);
+  }
+  return false;
+});
+
+function toggleMultipleSelect(isSelected: boolean) {
+  emits('changeSelectMessageIDList', {
+    type: isSelected ? 'add' : 'remove',
+    messageID: message.value.ID,
+  });
+}
+
+function resendMessage() {
+  if (!message.value?.hasRiskContent) {
+    emits('resendMessage');
+  }
+}
+
+function blinkMessage(messageID: string) {
+  emits('blinkMessage', messageID);
+}
+
+function scrollTo(scrollHeight: number) {
+  emits('scrollTo', scrollHeight);
+}
+
+function openReadUserPanel() {
+  emits('setReadReceiptPanelVisible', true, message.value);
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.message-bubble {
+  padding: 10px 15px;
+  display: flex;
+  flex-direction: row;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  &.multiple-selected {
+    background-color: #f0f0f0;
+  }
+
+  .multiple-select-radio {
+    margin-right: 12px;
+    flex: 0 0 auto;
+  }
+
+  .control-reverse {
+    flex: 1 1 auto;
+    flex-direction: row-reverse;
+  }
+
+  .message-bubble-main-content {
+    display: flex;
+    flex-direction: row;
+
+    .message-avatar {
+      display: block;
+      width: 36px;
+      height: 36px;
+      border-radius: 5px;
+      flex: 0 0 auto;
+    }
+
+    .message-body {
+      display: flex;
+      flex: 0 1 auto;
+      flex-direction: column;
+      align-items: flex-start;
+      margin: 0 8px;
+
+      .message-body-nick-name {
+        display: block;
+        margin-bottom: 4px;
+        font-size: 12px;
+        color: #999;
+        max-width: 150px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .message-body-main {
+        max-width: 100%;
+        display: flex;
+        flex-direction: row;
+        min-width: 0;
+        box-sizing: border-box;
+
+        &-reverse {
+          flex-direction: row-reverse;
+        }
+
+        .audio-unplay-mark {
+          flex: 0 0 auto;
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+          background-color: #f00;
+          margin: 5px;
+        }
+
+        .message-body-content {
+          display: flex;
+          flex-direction: column;
+          min-width: 0;
+          box-sizing: border-box;
+          padding: 12px;
+          font-size: 14px;
+          color: #000;
+          letter-spacing: 0;
+          word-wrap: break-word;
+          word-break: break-all;
+          position: relative;
+
+          .content-main {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-shrink: 0;
+            align-content: flex-start;
+            border: 0 solid black;
+            margin: 0;
+            padding: 0;
+            min-width: 0;
+
+            .message-risk-replace {
+              width: 130px;
+              height: 130px;
+            }
+          }
+
+          .content-has-risk-tips {
+            font-size: 12px;
+            color: #fa5151;
+            font-family: PingFangSC-Regular;
+            margin-top: 5px;
+            border-top: 1px solid #e5c7c7;
+            padding-top: 5px;
+        }
+      }
+
+      .content-in {
+        background: #fbfbfb;
+        border-radius: 0 10px 10px;
+      }
+
+      .content-out {
+        background: #dceafd;
+        border-radius: 10px 0 10px 10px;
+      }
+
+      .content-no-padding {
+        padding: 0;
+        background: transparent;
+        border-radius: 10px;
+        overflow: hidden;
+      }
+
+      .content-no-padding.content-has-risk {
+        padding: 12px;
+      }
+
+      .content-has-risk {
+        background: rgba(250, 81, 81, 0.16);
+      }
+
+      .blink-shadow {
+        @keyframes shadow-blink {
+          50% {
+            box-shadow: rgba(255, 156, 25, 1) 0 0 10px 0;
+          }
+        }
+
+        box-shadow: rgba(255, 156, 25, 0) 0 0 10px 0;
+        animation: shadow-blink 1s linear 3;
+      }
+
+      .blink-content {
+        @keyframes reference-blink {
+          50% {
+            background-color: #ff9c19;
+          }
+        }
+
+        animation: reference-blink 1s linear 3;
+      }
+
+    .message-label {
+      align-self: flex-end;
+      font-family: PingFangSC-Regular;
+      font-size: 12px;
+      color: #b6b8ba;
+      word-break: keep-all;
+      flex: 0 0 auto;
+      margin: 0 8px;
+
+      &.fail {
+        width: 15px;
+        height: 15px;
+        border-radius: 15px;
+        background: red;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+      }
+
+      &.loading-circle {
+        opacity: 0;
+        animation: circle-loading 2s linear 1s infinite;
+      }
+
+      @keyframes circle-loading {
+        0% {
+          transform: rotate(0);
+          opacity: 1;
+        }
+
+        100% {
+          opacity: 1;
+          transform: rotate(360deg);
+        }
+      }
+    }
+
+    .align-self-bottom {
+      align-self: flex-end;
+        }
+      }
+    }
+  }
+
+  .reverse {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+  }
+
+  .message-bubble-extra-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/convert-content.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/convert-content.vue
new file mode 100644
index 00000000..0121b76b
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/convert-content.vue
@@ -0,0 +1,141 @@
+<template>
+  <div
+    class="message-convert-container"
+    :style="{
+      height: calculateHeight > 0 ? `${calculateHeight}px` : 'auto',
+      width: calculateWidth > 0 ? `${calculateWidth}px` : 'auto',
+    }"
+  >
+    <div
+      v-if="convertFinished"
+      ref="convertContentRef"
+      :class="{
+        'convert-content': true,
+        'occur': calculateHeight > 0,
+      }"
+    >
+      {{ convertText }}
+    </div>
+    <div
+      ref="convertLoadingRef"
+      :class="{
+        'loading': true,
+        'loading-end': convertFinished
+      }"
+    >
+      {{ TUITranslateService.t('TUIChat.转换中') }}...
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, nextTick } from '../../../../../adapter-vue';
+import {
+  IMessageModel,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import { getBoundingClientRectSync } from '@tencentcloud/universal-api';
+import { convertor } from '../../../utils/convertVoiceToText';
+
+interface IProps {
+  message: IMessageModel;
+  contentVisible: boolean;
+  convertWrapperRef: HTMLDivElement | undefined;
+  isSingleConvert?: boolean;
+}
+
+interface IEmits {
+  (e: 'toggleErrorStatus', status: boolean): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+  isSingleConvert: false,
+});
+
+const convertFinished = ref<boolean>(false);
+const convertText = ref<string>('');
+const calculateHeight = ref<number>(0);
+const calculateWidth = ref<number>(0);
+
+const convertLoadingRef = ref<HTMLDivElement>();
+const convertContentRef = ref<HTMLDivElement>();
+
+watch(() => props.contentVisible, (newVal: boolean) => {
+  if (newVal) {
+    convertor.get(props.message)
+      .then((text) => {
+        convertFinished.value = true;
+        convertText.value = text;
+        nextTick(() => {
+          const { height: originHeight, width: originWidth } = getBoundingClientRectSync(convertLoadingRef.value!);
+          const { height, width } = getBoundingClientRectSync(convertContentRef.value!);
+          calculateHeight.value = originHeight;
+          calculateWidth.value = originWidth;
+          requestAnimationFrame(() => {
+            calculateHeight.value = height;
+            calculateWidth.value = width;
+            if (props.isSingleConvert) {
+              nextTick(() => {
+                const { bottom } = getBoundingClientRectSync(props.convertWrapperRef);
+                const { bottom: bottomWindow } = getBoundingClientRectSync('#messageScrollList');
+                if (bottom > bottomWindow) {
+                  const timer = setTimeout(() => {
+                    props.convertWrapperRef!.scrollIntoView({ block: 'end', behavior: 'smooth' });
+                    clearTimeout(timer);
+                  }, 150);
+                }
+              });
+            }
+          });
+        });
+      })
+      .catch((err) => {
+        convertFinished.value = true;
+        emits('toggleErrorStatus', true);
+        const { height: originHeight } = getBoundingClientRectSync(convertLoadingRef.value!);
+        calculateHeight.value = originHeight;
+        convertText.value = err.message;
+      });
+  }
+}, {
+  immediate: true,
+});
+</script>
+
+<style lang="scss" scoped>
+.message-convert-container {
+  min-height: 20px;
+  min-width: 80px;
+  position: relative;
+  transition: width 0.15s ease-out, height 0.15s ease-out, ;
+  font-size: 14px;
+
+  .loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 1;
+    transition: opacity 0.3s ease-out;
+
+    &.loading-end {
+      opacity: 0;
+    }
+  }
+
+  .convert-content {
+    opacity: 0;
+
+    &.occur {
+      animation: occur 0.3s ease-out 0.45s forwards;
+
+      @keyframes occur {
+        100% {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/index.vue
new file mode 100644
index 00000000..130a031e
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/index.vue
@@ -0,0 +1,99 @@
+<template>
+  <div
+    v-if="convertVisible"
+    ref="convertWrapperRef"
+    :class="{
+      'message-convert': true,
+      'reverse': props.message.flow === 'out',
+      'error': hasConvertError,
+    }"
+  >
+    <ConvertContent
+      :message="props.message"
+      :contentVisible="convertVisible"
+      :isSingleConvert="isSingleConvert"
+      :convertWrapperRef="convertWrapperRef"
+      @toggleErrorStatus="toggleErrorStatus"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from '../../../../../adapter-vue';
+import {
+  TUIStore,
+  StoreName,
+  IMessageModel,
+} from '@tencentcloud/chat-uikit-engine';
+import ConvertContent from './convert-content.vue';
+import { IConvertInfo } from '../../../../../interface';
+
+interface IProps {
+  message: IMessageModel;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+
+const convertVisible = ref<boolean>(false);
+const hasConvertError = ref<boolean>(false);
+const convertWrapperRef = ref<HTMLDivElement>();
+
+let isSingleConvert = true;
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CHAT, {
+    voiceToTextInfo: onMessageConvertUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CHAT, {
+    voiceToTextInfo: onMessageConvertUpdated,
+  });
+});
+
+function toggleErrorStatus(hasError: boolean) {
+  hasConvertError.value = hasError;
+}
+
+function onMessageConvertUpdated(info: Map<string, IConvertInfo[]>) {
+  if (info === undefined) return;
+  isSingleConvert = false;
+  const convertInfoList = info.get(props.message.conversationID) || [];
+  for (let i = 0; i < convertInfoList.length; ++i) {
+    const { messageID, visible } = convertInfoList[i];
+    if (messageID === props.message.ID && visible !== undefined) {
+      if (convertInfoList.length === 1 && visible) {
+        isSingleConvert = true;
+      }
+      hasConvertError.value = false;
+      convertVisible.value = visible;
+      break;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.message-convert {
+  margin-top: 4px;
+  margin-left: 44px;
+  padding: 10px;
+  background-color: #f2f7ff;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column !important;
+  transition: background-color 0.15s ease-out;
+
+  &.error {
+    background-color: #ffdfdf;
+  }
+}
+
+.message-convert.reverse {
+  margin-right: 44px;
+  margin-left: auto;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
new file mode 100644
index 00000000..35d48915
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="custom">
+    <template v-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
+      <div>
+        <h1>
+          <label>{{ extension.title }}</label>
+          <a
+            v-if="extension.hyperlinks_text"
+            :href="extension.hyperlinks_text.value"
+            target="view_window"
+          >{{ extension.hyperlinks_text.key }}</a>
+        </h1>
+        <ul v-if="extension.item && extension.item.length > 0">
+          <li
+            v-for="(item, index) in extension.item"
+            :key="index"
+          >
+            <a
+              v-if="isUrl(item.value)"
+              :href="item.value"
+              target="view_window"
+            >{{ item.key }}</a>
+            <p v-else>
+              {{ item.key }}
+            </p>
+          </li>
+        </ul>
+        <article>{{ extension.description }}</article>
+      </div>
+    </template>
+    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE">
+      <div class="evaluate">
+        <h1>{{ TUITranslateService.t("message.custom.对本次服务评价") }}</h1>
+        <ul class="evaluate-list">
+          <li
+            v-for="(item, index) in Math.max(customData.score, 0)"
+            :key="index"
+            class="evaluate-list-item"
+          >
+            <Icon
+              :file="star"
+              class="file-icon"
+            />
+          </li>
+        </ul>
+        <article>{{ customData.comment }}</article>
+      </div>
+    </template>
+    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
+      <div
+        class="order"
+        @click="openLink(customData.link)"
+      >
+        <img
+          :src="customData.imageUrl"
+        >
+        <main>
+          <h1>{{ customData.title }}</h1>
+          <p>{{ customData.description }}</p>
+          <span>{{ customData.price }}</span>
+        </main>
+      </div>
+    </template>
+    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.LINK">
+      <div class="textLink">
+        <p>{{ customData.text }}</p>
+        <a
+          :href="customData.link"
+          target="view_window"
+        >{{
+          TUITranslateService.t("message.custom.查看详情>>")
+        }}</a>
+      </div>
+    </template>
+    <template v-else>
+      <span v-html="content.custom" />
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watchEffect, ref } from '../../../../adapter-vue';
+import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { isUrl, JSONToObject } from '../../../../utils/index';
+import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
+import { ICustomMessagePayload } from '../../../../interface';
+import Icon from '../../../common/Icon.vue';
+import star from '../../../../assets/icon/star-light.png';
+interface Props {
+  messageItem: IMessageModel;
+  content: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  messageItem: undefined,
+  content: undefined,
+});
+
+const custom = ref();
+const message = ref<IMessageModel>();
+const extension = ref();
+const customData = ref<ICustomMessagePayload>({
+  businessID: '',
+});
+
+watchEffect(() => {
+  custom.value = props.content;
+  message.value = props.messageItem;
+  const { payload } = props.messageItem;
+  customData.value = payload.data || '';
+  customData.value = JSONToObject(payload.data);
+  if (payload.data === CHAT_MSG_CUSTOM_TYPE.SERVICE) {
+    extension.value = JSONToObject(payload.extension);
+  }
+});
+const openLink = (url: any) => {
+  window.open(url);
+};
+</script>
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+
+a {
+  color: #679ce1;
+}
+
+.custom {
+  font-size: 14px;
+
+  h1 {
+    font-size: 14px;
+    color: #000;
+  }
+
+  h1,
+  a,
+  p {
+    font-size: 14px;
+  }
+
+  .evaluate {
+    ul {
+      display: flex;
+      padding: 10px 0;
+    }
+
+    &-list {
+      display: flex;
+      flex-direction: row;
+
+      &-item {
+        padding: 0 2px;
+      }
+    }
+  }
+
+  .order {
+    display: flex;
+
+    main {
+      padding-left: 5px;
+
+      p {
+        font-family: PingFangSC-Regular;
+        width: 145px;
+        line-height: 17px;
+        font-size: 14px;
+        color: #999;
+        letter-spacing: 0;
+        margin-bottom: 6px;
+        word-break: break-word;
+      }
+
+      span {
+        font-family: PingFangSC-Regular;
+        line-height: 25px;
+        color: #ff7201;
+      }
+    }
+
+    img {
+      width: 67px;
+      height: 67px;
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-face.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-face.vue
new file mode 100644
index 00000000..a9341ffa
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-face.vue
@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="message-image"
+  >
+    <img
+      mode="aspectFit"
+      class="message-image"
+      :src="url"
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from '../../../../adapter-vue';
+import { CUSTOM_BIG_EMOJI_URL } from '../../emoji-config';
+
+const props = defineProps({
+  content: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const url = ref(props.content.url);
+
+onMounted(() => {
+  if (props.content.type === 'custom') {
+    if (!CUSTOM_BIG_EMOJI_URL) {
+      console.warn('CUSTOM_BIG_EMOJI_URL is required for custom emoji, please check your CUSTOM_BIG_EMOJI_URL.');
+    } else {
+      url.value = CUSTOM_BIG_EMOJI_URL + props.content.name;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+
+.message-image {
+  width: 80px;
+  height: 80px;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-file.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-file.vue
new file mode 100644
index 00000000..0288a759
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-file.vue
@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="file-message-montainer"
+    :title="TUITranslateService.t('TUIChat.单击下载')"
+    @click="download"
+  >
+    <Icon
+      :file="files"
+      class="file-icon"
+    />
+    <div>
+      <div>{{ props.content.name }}</div>
+      <div>{{ props.content.size }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { withDefaults } from '../../../../adapter-vue';
+import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../common/Icon.vue';
+import files from '../../../../assets/icon/file-light.svg';
+import type { IFileMessageContent } from '../../../../interface';
+
+const props = withDefaults(
+  defineProps<{
+    content: IFileMessageContent;
+    messageItem: IMessageModel;
+  }>(),
+  {
+    content: () => ({} as IFileMessageContent),
+    messageItem: () => ({} as IMessageModel),
+  },
+);
+
+const download = () => {
+  if (props.messageItem.hasRiskContent) {
+    return;
+  }
+  const option = {
+    mode: 'cors',
+    headers: new Headers({
+      'Content-Type': 'application/x-www-form-urlencoded',
+    }),
+  } as RequestInit;
+  // If the browser supports fetch, use blob to download, so as to avoid the browser clicking the a tag and jumping to the preview of the new page
+  if ((window as any)?.fetch) {
+    fetch(props.content.url, option)
+      .then(res => res.blob())
+      .then((blob) => {
+        const a = document.createElement('a');
+        const url = window.URL.createObjectURL(blob);
+        a.href = url;
+        a.download = props.content.name;
+        a.click();
+      });
+  } else {
+    const a = document.createElement('a');
+    a.href = props.content.url;
+    a.target = '_blank';
+    a.download = props.content.name;
+    a.click();
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+
+.file-message-montainer {
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+
+  .file-icon {
+    margin: auto 8px;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-image.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-image.vue
new file mode 100644
index 00000000..d00c95b0
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-image.vue
@@ -0,0 +1,91 @@
+<template>
+  <div
+    ref="skeletonDomRef"
+    class="image-container"
+    @click.self="toggleShow"
+  >
+    <img
+      :class="['message-image', !isPC && 'message-image-h5']"
+      :src="props.content.url"
+      :width="props.content.width"
+      :height="props.content.height"
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted, withDefaults } from '../../../../adapter-vue';
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { isPC } from '../../../../utils/env';
+import { handleSkeletonSize } from '../../utils/utils';
+import type { IImageMessageContent } from '../../../../interface';
+
+const emits = defineEmits(['previewImage']);
+const props = withDefaults(
+  defineProps<{
+    content: IImageMessageContent;
+    messageItem: IMessageModel;
+  }>(),
+  {
+    content: () => ({}),
+    messageItem: () => ({} as IMessageModel),
+  },
+);
+const skeletonDomRef = ref();
+
+onMounted(() => {
+  if (
+    props.messageItem?.status === 'success'
+    || props.messageItem?.status === 'fail'
+    || props.messageItem?.progress === 1
+  ) {
+    autoFixSkeletonSize();
+  }
+});
+
+watch(
+  () => props.content.height,
+  (newVal: number, oldVal: number) => {
+    if (newVal > oldVal) {
+      autoFixSkeletonSize();
+    }
+  },
+);
+
+function autoFixSkeletonSize() {
+  const { width = 0, height = 0 } = props.content;
+  if (width === 0 || height === 0) return;
+  const containerWidth = document.getElementById('app')?.clientWidth || 0;
+  const max = !isPC ? Math.min(containerWidth - 180, 300) : 300;
+  const size = handleSkeletonSize(width, height, max, max);
+  skeletonDomRef?.value?.style && (skeletonDomRef.value.style.width = `${size.width}px`);
+  skeletonDomRef?.value?.style && (skeletonDomRef.value.style.height = `${size.height}px`);
+}
+
+function toggleShow() {
+  if (props.messageItem?.status === 'success' || props.messageItem?.progress === 1) {
+    emits('previewImage', props.messageItem);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+
+.image-container {
+  overflow: hidden;
+  background-color: #f4f4f4;
+
+  .message-image {
+    max-width: min(calc(100vw - 180px), 300px);
+    max-height: min(calc(100vw - 180px), 300px);
+    width: inherit;
+    height: inherit;
+
+    &-h5 {
+      max-width: calc(100vw - 180px);
+      max-height: calc(100vw - 180px);
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-location.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-location.vue
new file mode 100644
index 00000000..40868c2b
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-location.vue
@@ -0,0 +1,33 @@
+<template>
+  <a
+    class="message-location"
+    :href="data.href"
+    target="_blank"
+    title="点击查看详情"
+  >
+    <span class="el-icon-location-outline">{{ data.description }}</span>
+    <img :src="data.url">
+  </a>
+</template>
+
+<script lang="ts" setup>
+import { watchEffect, ref } from '../../../../adapter-vue';
+const props = defineProps({
+  content: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const data = ref();
+watchEffect(() => {
+  data.value = props.content;
+});
+</script>
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+
+.message-location {
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/index.vue
new file mode 100644
index 00000000..209e8843
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div
+    v-if="hasQuoteContent"
+    :class="{
+      'reference-content': true,
+      'reverse': message.flow === 'out',
+    }"
+    @click="scrollToOriginalMessage"
+  >
+    <div
+      v-if="isMessageRevoked"
+      class="revoked-text"
+    >
+      {{ TUITranslateService.t('TUIChat.引用内容已撤回') }}
+    </div>
+    <div
+      v-else
+      class="max-double-line"
+    >
+      {{ messageQuoteContent.messageSender }}: {{ transformTextWithKeysToEmojiNames(messageQuoteText) }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted } from '../../../../../adapter-vue';
+import {
+  TUIStore,
+  StoreName,
+  IMessageModel,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import { getBoundingClientRect, getScrollInfo } from '@tencentcloud/universal-api';
+import { isUniFrameWork } from '../../../../../utils/env';
+import { Toast, TOAST_TYPE } from '../../../../../components/common/Toast/index';
+import { ICloudCustomData, IQuoteContent, MessageQuoteTypeEnum } from './interface.ts';
+import { transformTextWithKeysToEmojiNames } from '../../../emoji-config';
+
+export interface IProps {
+  message: IMessageModel;
+}
+
+export interface IEmits {
+  (e: 'scrollTo', scrollHeight: number): void;
+  (e: 'blinkMessage', messageID: string | undefined): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+
+let selfAddValue = 0;
+const messageQuoteText = ref<string>('');
+const hasQuoteContent = ref(false);
+const messageQuoteContent = ref<IQuoteContent>({} as IQuoteContent);
+
+const isMessageRevoked = computed<boolean>(() => {
+  try {
+    const cloudCustomData: ICloudCustomData = JSON.parse(props.message?.cloudCustomData || '{}');
+    const quotedMessageModel = TUIStore.getMessageModel(cloudCustomData.messageReply.messageID);
+    return quotedMessageModel?.isRevoked;
+  } catch (error) {
+    return true;
+  }
+});
+
+onMounted(() => {
+  try {
+    const cloudCustomData: ICloudCustomData = JSON.parse(props.message?.cloudCustomData || '{}');
+    hasQuoteContent.value = Boolean(cloudCustomData.messageReply);
+    if (hasQuoteContent.value) {
+      messageQuoteContent.value = cloudCustomData.messageReply;
+      messageQuoteText.value = performQuoteContent(messageQuoteContent.value);
+    }
+  } catch (error) {
+    hasQuoteContent.value = false;
+  }
+});
+
+function performQuoteContent(params: IQuoteContent) {
+  let messageKey: string = '';
+  let quoteContent: string = '';
+  switch (params.messageType) {
+    case MessageQuoteTypeEnum.TYPE_TEXT:
+      messageKey = '[文本]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_CUSTOM:
+      messageKey = '[自定义消息]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_IMAGE:
+      messageKey = '[图片]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_SOUND:
+      messageKey = '[音频]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_VIDEO:
+      messageKey = '[视频]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_FILE:
+      messageKey = '[文件]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_LOCATION:
+      messageKey = '[地理位置]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_FACE:
+      messageKey = '[动画表情]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_GROUP_TIPS:
+      messageKey = '[群提示]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_MERGER:
+      messageKey = '[聊天记录]';
+      break;
+    default:
+      messageKey = '[消息]';
+      break;
+  }
+  if (
+    [
+      MessageQuoteTypeEnum.TYPE_TEXT,
+      MessageQuoteTypeEnum.TYPE_MERGER,
+    ].includes(params.messageType)
+  ) {
+    quoteContent = params.messageAbstract;
+  }
+  return quoteContent ? quoteContent : TUITranslateService.t(`TUIChat.${messageKey}`);
+}
+
+async function scrollToOriginalMessage() {
+  if (isMessageRevoked.value) {
+    return;
+  }
+  const originMessageID = messageQuoteContent.value?.messageID;
+  const currentMessageList = TUIStore.getData(StoreName.CHAT, 'messageList');
+  const isOriginalMessageInScreen = currentMessageList.some(msg => msg.ID === originMessageID);
+  if (originMessageID && isOriginalMessageInScreen) {
+    try {
+      const scrollViewRect = await getBoundingClientRect('#messageScrollList', 'messageList');
+      const originalMessageRect = await getBoundingClientRect('#tui-' + originMessageID, 'messageList');
+      const { scrollTop } = await getScrollInfo('#messageScrollList', 'messageList');
+      const finalScrollTop = originalMessageRect.top + scrollTop - scrollViewRect.top - (selfAddValue++ % 2);
+      const isNeedScroll = originalMessageRect.top < scrollViewRect.top;
+      if (!isUniFrameWork && window) {
+        const scrollView = document.getElementById('messageScrollList');
+        if (isNeedScroll && scrollView) {
+          scrollView.scrollTop = finalScrollTop;
+        }
+      } else if (isUniFrameWork && isNeedScroll) {
+        emits('scrollTo', finalScrollTop);
+      }
+      emits('blinkMessage', originMessageID);
+    } catch (error) {
+      console.error(error);
+    }
+  } else {
+    Toast({
+      message: TUITranslateService.t('TUIChat.无法定位到原消息'),
+      type: TOAST_TYPE.WARNING,
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.reference-content {
+  max-width: 272px;
+  margin-top: 4px;
+  margin-left: 44px;
+  padding: 12px;
+  font-size: 12px;
+  color: #666;
+  word-wrap: break-word;
+  word-break: break-all;
+  background-color: #fbfbfb;
+  border-radius: 8px;
+  line-height: 16.8px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.reverse.reference-content {
+    margin-right: 44px;
+    margin-left: auto;
+}
+
+.revoked-text {
+  color: #999;
+}
+
+.max-double-line {
+  word-break: break-all;
+  overflow: hidden;
+  display: -webkit-box;
+  max-height: 33px;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/interface.ts b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/interface.ts
new file mode 100644
index 00000000..533ff310
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/interface.ts
@@ -0,0 +1,60 @@
+export interface IQuoteContent {
+  messageAbstract: string;
+  messageID: string;
+  messageSender: string;
+  messageSequence: number;
+  messageTime: number;
+  messageType: number;
+  version: number;
+}
+
+export interface ICloudCustomData {
+  messageReply: IQuoteContent;
+}
+
+export enum MessageQuoteTypeEnum {
+  /**
+   * none message
+   */
+  TYPE_NONE = 0,
+  /**
+   * text message
+   */
+  TYPE_TEXT = 1,
+  /**
+   * custom message
+   */
+  TYPE_CUSTOM = 2,
+  /**
+   * image message
+   */
+  TYPE_IMAGE = 3,
+  /**
+   * voice message
+   */
+  TYPE_SOUND = 4,
+  /**
+   * video message
+   */
+  TYPE_VIDEO = 5,
+  /**
+   * file message
+   */
+  TYPE_FILE = 6,
+  /**
+   * location message
+   */
+  TYPE_LOCATION = 7,
+  /**
+   * animation face message
+   */
+  TYPE_FACE = 8,
+  /**
+   * group tips message (save in message list)
+   */
+  TYPE_GROUP_TIPS = 9,
+  /**
+   * merge forward message
+   */
+  TYPE_MERGER = 10,
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue
new file mode 100644
index 00000000..8ab5d497
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue
@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <div
+      class="message-record-container"
+      @click="openMergeDetail"
+    >
+      <div
+        class="record-title"
+      >
+        {{ props.renderData.title }}
+      </div>
+      <div class="record-abstract-container">
+        <div
+          v-for="(item, index) in props.renderData.abstractList.slice(0, 7)"
+          :key="index"
+          class="record-abstract-item"
+        >
+          {{ transformTextWithKeysToEmojiNames(item) }}
+        </div>
+      </div>
+      <div class="record-footer">
+        {{ TUITranslateService.t('TUIChat.聊天记录') }}
+      </div>
+    </div>
+    <Overlay
+      v-if="!props.disabled && isPC"
+      :visible="isMessageListVisible"
+      @onOverlayClick="isMessageListVisible = false"
+    >
+      <SimpleMessageList
+        :isMounted="isMessageListVisible"
+        :renderData="props.renderData"
+        :messageID="props.messageItem.ID"
+        @closeOverlay="closeMergeDetail"
+      />
+    </Overlay>
+    <Drawer
+      v-else-if="!props.disabled && isH5 && !isUniFrameWork"
+      :visible="isMessageListVisible"
+      :isFullScreen="true"
+      :overlayColor="'transparent'"
+      :popDirection="'right'"
+    >
+      <SimpleMessageList
+        :isMounted="isMessageListVisible"
+        :renderData="props.renderData"
+        :messageID="props.messageItem.ID"
+        @closeOverlay="closeMergeDetail"
+      />
+    </Drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, withDefaults } from '../../../../../adapter-vue';
+import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import Overlay from '../../../../common/Overlay/index.vue';
+import Drawer from '../../../../common/Drawer/index.vue';
+import SimpleMessageList from '../simple-message-list/index.vue';
+import { isH5, isPC, isUniFrameWork } from '../../../../../utils/env';
+import { transformTextWithKeysToEmojiNames } from '../../../emoji-config/index';
+import { IMergeMessageContent } from '../../../../../interface';
+
+interface IEmits {
+  (e: 'assignMessageIDInUniapp', messageID: string): void;
+}
+
+interface IProps {
+  // Core data for rendering message record card and message list
+  renderData: IMergeMessageContent;
+  /**
+   * The MessageRecord component has two main functions:
+   * 1. display message record cards primarily.
+   * 2. clicking on it and show the simple message list.
+   * When used as a nested component with the disabled prop
+   * it is only need renderData to render message record cards.
+   * Therefore, 'messageItem' and 'disabled' is not a required prop.
+   */
+  disabled?: boolean;
+  messageItem?: IMessageModel;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  messageItem: () => ({}) as IMessageModel,
+  disabled: false,
+});
+
+const isMessageListVisible = ref(false);
+
+function openMergeDetail() {
+  if (props.disabled) {
+    return;
+  }
+  if (!isUniFrameWork) {
+    isMessageListVisible.value = true;
+  } else {
+    emits('assignMessageIDInUniapp', props.messageItem.ID);
+  }
+}
+
+function closeMergeDetail() {
+  isMessageListVisible.value = false;
+}
+</script>
+<style lang="scss" scoped>
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.message-record-container {
+  padding: 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  cursor: pointer;
+  background-color: #fff;
+  max-width: 400px;
+  min-width: 180px;
+  overflow: hidden;
+
+  .record-abstract-container {
+    color: #bbb;
+    font-size: 12px;
+    margin: 8px 0;
+  }
+
+  .record-footer {
+    color: #888;
+    font-size: 11px;
+    padding-top: 5px;
+    border-top: 1px solid #eee;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.scss b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.scss
new file mode 100644
index 00000000..3f84239f
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.scss
@@ -0,0 +1,201 @@
+/* stylelint-disable */
+.message-stream{
+  overflow: hidden;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+/* message typewriter style*/
+.message-typewriter .typewriter_cursor::after {
+  content: '';
+  border-right: 1px solid;
+  animation: typing 3s steps(30, end), blink-caret 0.5s step-end infinite;
+}
+
+@keyframes typing {
+  from {
+    max-width: 0;
+  }
+
+  to {
+    max-width: 100%;
+  }
+}
+
+@keyframes blink-caret {
+  50% {
+    border-color: transparent;
+  }
+}
+
+/* loading style */
+.loader {
+  width: 40px;
+  height: 20px;
+  aspect-ratio: 5;
+  --_g: no-repeat radial-gradient(circle closest-side,#bbb 90%,transparent);
+  background:
+    var(--_g) 0%   50%,
+    var(--_g) 50%  50%,
+    var(--_g) 100% 50%;
+  background-size: calc(100%/3) 50%;
+  animation: l7 1s infinite linear;
+}
+@keyframes l7 {
+    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 50%,calc(100%/3) 50%}
+    50%{background-size:calc(100%/3) 50%,calc(100%/3) 0%  ,calc(100%/3) 50%}
+    66%{background-size:calc(100%/3) 50%,calc(100%/3) 50%,calc(100%/3) 0%  }
+}
+
+/* message markdown style */
+.message-marked{
+  overflow: hidden;
+  word-break: break-word;
+  white-space: normal;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 0;
+
+  .message-marked_code-container{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    overflow-x: auto;
+    padding: 3px 5px;
+    border-radius: 9px;
+    margin: 0 0 10px;
+    padding: 1em;
+    overflow: hidden;
+  }
+
+  .message-marked_code-header{
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .message-marked_code-content{
+    overflow: auto;
+  }
+
+  .message-marked_copy-btn{
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p {
+    margin: 0 0 1em;
+  }
+
+  ul,ol,li{
+    list-style: disc;
+    list-style-type: disc;
+  }
+
+  ul,ol{
+    padding-left: 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  li{
+    padding: 0 0 5px;
+    margin: 0;
+  }
+
+  img{
+    overflow: hidden;
+    object-fit: contain;
+    max-width: 100%;
+  }
+
+  a{
+    color: #679ce1;
+    cursor: pointer;
+  }
+
+  .hljs {
+    color: #fff;
+    background: #181818;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #5c6370;
+    font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #c678dd;
+  }
+
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+    color: #e06c75;
+  }
+
+  .hljs-literal {
+    color: #56b6c2;
+  }
+
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string {
+    color: #98c379;
+  }
+
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #d19a66;
+  }
+
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+    color: #61aeee;
+  }
+
+  .hljs-built_in,
+  .hljs-title.class_,
+  .hljs-class .hljs-title {
+    color: #e6c07b;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}
+
+.message-marked > *:last-child{
+  margin-bottom: 0;
+}
+/* stylelint-enable */
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.ts b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.ts
new file mode 100644
index 00000000..ebc71970
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.ts
@@ -0,0 +1,15 @@
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+export function isBotMessage(message: IMessageModel): boolean {
+  if (!message || !message.ID || !message.from) {
+    return false;
+  }
+
+  if (message.from.startsWith('@RBT#') && !message.to.startsWith('@RBT#')) {
+    return true;
+  }
+
+  return false;
+}
+
+export * from './index.vue';
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.vue
new file mode 100644
index 00000000..beaac016
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="message-stream">
+    <pre
+      ref="messageContentRef"
+      :class="['message-marked', 'message-typewriter']"
+      v-html="markedContent"
+    />
+    <StreamOperation
+      v-show="isOperationShow"
+      :content="streamContent"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { watch, ref, computed, onMounted, onUnmounted } from '../../../../../adapter-vue';
+import { TUITranslateService, TUIReportService } from '@tencentcloud/chat-uikit-engine';
+import { TypeWriter } from './type-writer';
+import { markedWithPurify } from './marked';
+import { JSONToObject } from '../../../../../utils';
+import StreamOperation from './operation/index.vue';
+import CopyManager from '../../../utils/copy';
+
+interface IProps {
+  payloadData: string;
+  enableMarkdown?: boolean;
+  enableStreaming?: boolean;
+  enableOperation?: boolean;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  payloadData: () => '',
+  enableMarkdown: true,
+  enableStreaming: true,
+  enableOperation: true,
+});
+
+const emits = defineEmits(['onStreaming']);
+
+const messageContentRef = ref();
+const isStreaming = ref<boolean>(false);
+const chunks = ref<string>('');
+const isFinished = ref<boolean>(true);
+const prevChunksLength = ref<number>(0);
+const streamContent = ref<string>('');
+const markedContent = computed(() => generateMarkedContent(streamContent.value));
+const isUnparsedMessage = ref<string>(false);
+const isOperationShow = computed(() => {
+  return props.enableOperation && isFinished.value && !isStreaming.value && !isUnparsedMessage.value;
+});
+
+const typeWriter = new TypeWriter({
+  onTyping: (item: string) => {
+    streamContent.value += item;
+    emits('onStreaming', item, streamContent.value);
+  },
+  onComplete() {
+    isStreaming.value = false;
+  },
+});
+
+const generateMarkedContent = (content: string) => {
+  if (!props.enableMarkdown) {
+    return content;
+  }
+  if (!content && !isFinished.value) {
+    return '<div class="loader"></div>';
+  }
+  return markedWithPurify(content);
+};
+
+function startStreaming(content: string[]) {
+  if (!isStreaming.value) {
+    isStreaming.value = true;
+    typeWriter.add(content);
+    typeWriter.start();
+  } else {
+    typeWriter.add(content);
+  }
+}
+
+watch(() => props.payloadData,
+  (newValue: string, oldValue: string) => {
+    if (newValue === oldValue) {
+      return;
+    }
+
+    if(props.enableMarkdown){
+      TUIReportService.reportFeature(206);
+    }
+    if(props.enableStreaming){
+      TUIReportService.reportFeature(207);
+    }
+
+    const _payloadDataObject = JSONToObject(props.payloadData);
+
+    if (_payloadDataObject.chunks) {
+      const _chunks = _payloadDataObject.chunks;
+      if (typeof _chunks === 'string' || Array.isArray(_chunks)) {
+        chunks.value = Array.isArray(_chunks) ? _chunks.join('') : _chunks;
+      } else {
+        chunks.value = TUITranslateService.t('TUIChat.[机器人自定义消息]');
+        isUnparsedMessage.value = true;
+      }
+    } else if (_payloadDataObject.content) {
+      const _content = _payloadDataObject.content;
+      if (typeof _content === 'string' || Array.isArray(_content)) {
+        chunks.value = Array.isArray(_content) ? _content.join('') : _content;
+      } else {
+        chunks.value = TUITranslateService.t('TUIChat.[机器人自定义消息]');
+        isUnparsedMessage.value = true;
+      }
+    } else if (_payloadDataObject.text) {
+      chunks.value = _payloadDataObject.text;
+    } else {
+      chunks.value = '';
+    }
+
+    isFinished.value = _payloadDataObject.isFinished === 0 ? false : true;
+
+    if (!props.enableStreaming || (newValue && !oldValue && isFinished.value)) {
+      // disable typeWriter style or history message first load
+      streamContent.value = chunks.value;
+    } else {
+      const _newChunksToAdd = chunks.value?.slice(prevChunksLength.value);
+      startStreaming([_newChunksToAdd]);
+    }
+
+    prevChunksLength.value = chunks.value?.length;
+  }, {
+    deep: true,
+    immediate: true,
+  },
+);
+
+onMounted(() => {
+  watch(() => isStreaming.value, (newValue: boolean, oldValue: boolean) => {
+    if (newValue === oldValue) {
+      return;
+    }
+    if (!newValue && oldValue) {
+      emits('onStreaming', streamContent.value, streamContent.value);
+    }
+    if (!newValue) {
+      const codeCopyBtns = messageContentRef.value?.querySelectorAll('.message-marked_copy-btn');
+      codeCopyBtns?.forEach((btn: HTMLElement) => {
+        if (btn.addEventListener) {
+          btn.addEventListener('click', copyCode);
+        }
+      });
+    }
+  }, {
+    immediate: true,
+  });
+});
+
+onUnmounted(() => {
+  const codeCopyBtns = messageContentRef.value?.querySelectorAll('.message-marked_copy-btn');
+  codeCopyBtns?.forEach((btn: HTMLElement) => {
+    if (btn.removeEventListener) {
+      btn.removeEventListener('click', copyCode);
+    }
+  });
+});
+
+function copyCode(event: Event) {
+  const codeContainer = (event.target as HTMLElement)?.closest('.message-marked_code-container');
+  const codeElement = codeContainer?.querySelector('.message-marked_code-content');
+  if (codeElement) {
+    CopyManager.copyTextOrHtml(codeElement.textContent, 'text');
+  }
+}
+
+</script>
+<style lang="scss" src="./index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/marked.ts b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/marked.ts
new file mode 100644
index 00000000..b6845c9f
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/marked.ts
@@ -0,0 +1,70 @@
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+import hljs from 'highlight.js';
+import DOMPurify from 'dompurify';
+
+const escapeTest = /[&<>"']/;
+const escapeReplace = new RegExp(escapeTest.source, 'g');
+const escapeTestNoEncode = /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/;
+const escapeReplaceNoEncode = new RegExp(escapeTestNoEncode.source, 'g');
+type Iescape = {
+  [key: string]: string;
+};
+const escapeReplacements: Iescape = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  '\'': '&#39;',
+};
+const getEscapeReplacement = (ch: string): string => escapeReplacements[ch as keyof Iescape];
+
+export const marked = new Marked(
+  {
+    mangle: false,
+    headerIds: false,
+  },
+  markedHighlight({
+    highlight(code: string) {
+      return hljs.highlightAuto(code).value;
+    },
+  }),
+  {
+    renderer: {
+      code(this: any, code: string, language: string | undefined, isEscaped: boolean) {
+        const lang = language || '';
+        return `
+          <pre class="hljs message-marked_code-container">
+            <div class="message-marked_code-header">
+              <span class="message-marked_language-txt">${escape(lang) || ''}</span>
+              <span class="message-marked_copy-btn">${'copy'}</span>
+            </div>
+            <code class="hljs message-marked_code-content language-${escape(lang)}" >${isEscaped ? code : escape(code)}</code>
+          </pre>
+        `;
+      },
+      image(this: any, href: string | null, title: string | null, text: string) {
+        return `<img class="message-marked_image message-image" src="${href}" alt="${text}" title="${title}" />`;
+      },
+      link(this: any, href: string | null, title: string | null, text: string) {
+        return `<a target="_blank" rel="noreferrer noopenner" class="message-marked_link" href="${href}" title="${title}">${text}</a>`;
+      },
+    },
+  },
+);
+
+export const markedWithPurify = (text: string) => {
+  const parsedContent = marked.parse(text);
+  return DOMPurify.sanitize(parsedContent, { ADD_ATTR: ['target'] });
+};
+
+function escape(html: string, encode: boolean = false) {
+  if (encode) {
+    if (escapeTest.test(html)) {
+      return html.replace(escapeReplace, getEscapeReplacement);
+    }
+  } else if (escapeTestNoEncode.test(html)) {
+    return html.replace(escapeReplaceNoEncode, getEscapeReplacement);
+  }
+  return html;
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/index.ts b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/index.ts
new file mode 100644
index 00000000..a598f77c
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/index.ts
@@ -0,0 +1 @@
+export * from './index.vue';
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/index.vue
new file mode 100644
index 00000000..ff06b85b
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div
+    ref="operationContainerRef"
+    class="message-stream_operation_container"
+  >
+    <div class="message-stream_operation_list">
+      <div
+        v-for="(operation, key) in operationConfig"
+        :key="key"
+        :class="{
+          'message-stream_operation_item': true,
+          'message-stream_operation_item_disabled': operation.isDisabled,
+        }"
+        :title="operation.name"
+        @click="(e) => operation.onClick(e, operation.key)"
+      >
+        <Icon
+          class="message-stream_operation_icon"
+          :file="operation.icon"
+          :name="operation.name"
+          size="14px"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from '../../../../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../../../common/Icon.vue';
+import copySVG from '../../../../../../assets/icon/msg-copy.svg';
+import CopyManager from '../../../../utils/copy';
+import { IOperationType, IOperation } from './type';
+
+interface IProps {
+  // handle the order and display of operations
+  operations?: IOperationType[];
+  // the content of the message to show, used to copy
+  content?: string;
+}
+
+interface IEmits {
+  // callback when operation is clicked
+  (emitKey: 'onOperationClick', e: Event, key: IOperationType): void;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  operations: () => [IOperationType.Copy],
+});
+const emits = defineEmits<IEmits>();
+
+const defaultOperationConfig: Record<string, IOperation> = {
+  [IOperationType.Copy]: {
+    key: IOperationType.Copy,
+    name: TUITranslateService.t('TUIChat.复制'),
+    icon: copySVG,
+    isDisabled: false,
+    onClick: () => {
+      CopyManager.copyTextOrHtml(props.content, 'text');
+    },
+  },
+};
+
+const operationConfig = computed(() => {
+  return props.operations
+    .map((key: IOperationType) => {
+      const config = defaultOperationConfig?.[key];
+      if (!config) {
+        return;
+      }
+      return {
+        ...config,
+        onClick: (e: Event, key: IOperationType) => {
+          if (config.isDisabled) {
+            return;
+          }
+          config.onClick(e, key);
+          emits('onOperationClick', e, key);
+        },
+      };
+    })
+    .filter(Boolean) as IOperation[];
+});
+</script>
+<style lang="scss" scoped>
+  .message-stream_operation_container {
+    display: flex;
+    flex-direction: row;
+    align-self: flex-end;
+    padding: 5px;
+    border-radius: 3px;
+    margin: 3px;
+
+    .message-stream_operation_list {
+      display: flex;
+      flex-direction: row;
+
+      .message-stream_operation_item {
+        display: flex;
+      }
+
+      .message-stream_operation_item_disabled {
+        * {
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/type.ts b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/type.ts
new file mode 100644
index 00000000..de1bd580
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/type.ts
@@ -0,0 +1,13 @@
+/** type & interface */
+export enum IOperationType {
+  Copy = 'copy',
+  // Retry is not supported now
+  // Retry = 'retry',
+}
+export interface IOperation {
+  key: IOperationType;
+  name: string;
+  icon: string;
+  isDisabled: boolean;
+  onClick: (e: Event, key: IOperationType) => void;
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/type-writer.ts b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/type-writer.ts
new file mode 100644
index 00000000..fed576cb
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/type-writer.ts
@@ -0,0 +1,186 @@
+const chineseRegex = /[\u4e00-\u9fa5]/;
+const wordAndNonWordRegex = /\b\w+\b|[^\w]+/g;
+const isStringArray = (test: any): boolean => {
+  return Array.isArray(test) && !test.some(value => typeof value !== 'string');
+};
+
+export class TypeWriter {
+  /**
+   * @property {array} strings strings to be typed
+   */
+  public strings: string[] = [];
+
+  /**
+   * @property {boolean} isTyping current typing status
+   */
+  public isTyping: boolean = false;
+
+  /**
+   * @property {number} typeSpeed type speed in milliseconds. If empty, using dynamic speed.
+   */
+  public typeSpeed?: number = 0;
+
+  /**
+   * @property {number} curArrayPos current typing string's position of all strings.
+   */
+  private curArrayPos: number = 0;
+
+  /**
+   * @property {number} curCharPos current typing character's position in current strings.
+   */
+  private curCharPos: number = 0;
+
+  /**
+   * @property {ReturnType<typeof setTimeout>} timer timer for type writer animation
+   */
+  private timer?: ReturnType<typeof setTimeout>;
+
+  /**
+   * On string is typing
+   * @param {string} curStr
+   * @param {number} arrayPos
+   * @param {number} characterPos
+   * @param {Typed} self
+   */
+  public onTyping?: (curStr: string, arrayPos: number, characterPos: number, self: any) => void;
+
+  /**
+   * After start
+   * @param {number} arrayPos
+   * @param {number} characterPos
+   * @param {TypeWriter} self
+   */
+  public onStart?: (arrayPos: number, characterPos: number, self: any) => void;
+
+  /**
+   * After stop
+   * @param {number} arrayPos
+   * @param {number} characterPos
+   * @param {TypeWriter} self
+   */
+  public onStop?: (arrayPos: number, characterPos: number, self: any) => void;
+
+  /**
+   * All typing is complete
+   * @param {Typed} self
+   */
+  public onComplete?: (self: any) => void;
+
+  constructor(options: {
+    defaultStrings?: string[];
+    typeSpeed?: number;
+    onTyping?: (curStr: string, arrayPos: number, characterPos: number, self: any) => void;
+    onComplete?: (self: any) => void;
+    onStart?: (arrayPos: number, characterPos: number, self: any) => void;
+    onStop?: (arrayPos: number, characterPos: number, self: any) => void;
+  }) {
+    const { defaultStrings, typeSpeed, onTyping, onComplete, onStart, onStop } = options;
+    if (defaultStrings && isStringArray(defaultStrings)) {
+      this.add(defaultStrings);
+    }
+    if (typeof typeSpeed === 'number') {
+      this.typeSpeed = typeSpeed;
+    }
+    if (typeof onTyping === 'function') {
+      this.onTyping = onTyping;
+    }
+    if (typeof onComplete === 'function') {
+      this.onComplete = onComplete;
+    }
+    if (typeof onStart === 'function') {
+      this.onStart = onStart;
+    }
+    if (typeof onStop === 'function') {
+      this.onStop = onStop;
+    }
+  }
+
+  add(addStrings: string[]) {
+    if (!addStrings || !addStrings.length) return;
+    addStrings.forEach((item: string) => {
+      if (chineseRegex.test(item)) {
+        const newValueArray = item.split('');
+        this.strings.push(...newValueArray);
+      } else {
+        const newValueArray = item.match(wordAndNonWordRegex) || item.split('');
+        this.strings.push(...newValueArray);
+      }
+    });
+  }
+
+  start() {
+    if (this.isTyping) {
+      return;
+    }
+    this.isTyping = true;
+    this.onStart && this.onStart(this.curArrayPos, this.curCharPos, this);
+    this._next();
+  }
+
+  stop() {
+    if (!this.isTyping) {
+      return;
+    }
+    this.isTyping = false;
+    clearTimeout(this.timer);
+    this.onStop && this.onStop(this.curArrayPos, this.curCharPos, this);
+  }
+
+  done() {
+    this.stop();
+    let _str = this.strings[this.curArrayPos].slice(this.curCharPos);
+    _str += this.strings.slice(this.curArrayPos + 1).join('');
+    this.curArrayPos = this.strings.length - 1;
+    this.curCharPos = this.strings[this.curArrayPos]?.length - 1;
+    this.onTyping && this.onTyping(_str, this.curArrayPos, this.curCharPos, this);
+    this.strings = [];
+  }
+
+  _consume() {
+    if (!this.strings.length) {
+      return;
+    }
+
+    if ((this.curArrayPos >= this.strings.length)) {
+      this.isTyping = false;
+      this.onComplete?.(this);
+      return;
+    }
+
+    const item = this.strings[this.curArrayPos]?.[this.curCharPos];
+    if (item) {
+      this.onTyping && this.onTyping(item, this.curArrayPos, this.curCharPos, this);
+    }
+
+    if (this.curCharPos < this.strings[this.curArrayPos]?.length - 1) {
+      this.curCharPos++;
+    } else {
+      this.curArrayPos++;
+      this.curCharPos = 0;
+    }
+  }
+
+  _next() {
+    this._consume();
+    this.timer = setTimeout(() => {
+      this._consume();
+      if (this.isTyping) {
+        this._next();
+      }
+    }, this.typeSpeed || this._dynamicSpeed());
+  }
+
+  _dynamicSpeed() {
+    let length = 0;
+    length += (this.strings[this.curArrayPos]?.length || 0) - this.curCharPos - 1;
+    for (let i = this.curArrayPos + 1; i < this.strings.length; i++) {
+      length += this.strings[i]?.length || 0;
+    }
+    const speed = 1500 / length;
+    if (speed > 150) {
+      return 150;
+    } else {
+      return speed;
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-text.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-text.vue
new file mode 100644
index 00000000..6ff4bc34
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-text.vue
@@ -0,0 +1,191 @@
+<template>
+  <div :class="['message-text-container', isPC && 'text-select']">
+    <span
+      v-for="(item, index) in processedContent"
+      :key="index"
+    >
+      <span
+        v-if="item.name === 'text'"
+        class="text"
+      >
+        {{ item.text }}
+      </span>
+      <span
+        v-else-if="item.name === 'url'"
+        class="url-link"
+        @click="navigateToUrl(item.url)"
+      >
+        {{ item.text }}
+      </span>
+      <img
+        v-else
+        class="emoji"
+        :src="item.src"
+        :alt="item.emojiKey"
+      >
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch, ref } from '../../../../adapter-vue';
+import { TUIStore, IMessageModel, TUIReportService } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal, parseTextAndValidateUrls } from '@tencentcloud/universal-api';
+import { CUSTOM_BASIC_EMOJI_URL, CUSTOM_BASIC_EMOJI_URL_MAPPING } from '../../emoji-config';
+import { isPC, isUniFrameWork } from '../../../../utils/env';
+
+interface IProps {
+  content: Record<string, any>;
+  messageItem: IMessageModel;
+  enableURLHighlight?: boolean;
+}
+
+interface TextItem {
+  name: string;
+  text: string;
+  src?: string;
+  type?: string;
+  emojiKey?: string;
+  url?: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  content: () => ({}),
+  messageItem: () => ({} as IMessageModel),
+  enableURLHighlight: false,
+});
+
+const processedContent = ref<TextItem>([]);
+
+watch(
+  () => props.messageItem,
+  (newValue: IMessageModel, oldValue: IMessageModel) => {
+    if (newValue?.ID === oldValue?.ID) {
+      return;
+    }
+
+    if(props.enableURLHighlight){
+      TUIReportService.reportFeature(208);
+    }
+
+    if(props.messageItem.getMessageContent){
+      processedContent.value =  props.messageItem.getMessageContent()?.text;
+    } else {
+      processedContent.value = TUIStore.getMessageModel(props.messageItem.ID)?.getMessageContent()?.text;
+    }
+    processedContent.value = processedContent.value || props.content?.text;
+
+    if (!processedContent.value?.length) {
+      processedContent.value = [];
+      return;
+    }
+
+    processedContent.value = processedContent.value.map((item: TextItem) => {
+      // handle custom emoji
+      if (item.name === 'img' && item?.type === 'custom') {
+        if (!CUSTOM_BASIC_EMOJI_URL) {
+          console.warn('CUSTOM_BASIC_EMOJI_URL is required for custom emoji.');
+          return item;
+        }
+        if (!item.emojiKey || !CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]) {
+          console.warn('emojiKey is required for custom emoji.');
+          return item;
+        }
+        return {
+          ...item,
+          src: CUSTOM_BASIC_EMOJI_URL + CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]
+        };
+      }
+
+      // handle url
+      if (props.enableURLHighlight && item.name === 'text' && item.text) {
+        if(!parseTextAndValidateUrls){
+          console.warn('parseTextAndValidateUrls not found. Please update @tencentcloud/universal-api to 2.3.7 or higher.');
+          return item;
+        }
+        const segments = parseTextAndValidateUrls(item.text);
+        if (segments.length) {
+          return segments.map((segment)=>({
+            name: segment.type,
+            text: segment.text,
+            url: segment.url,
+          }));
+        }
+      }
+
+      return item;
+    })?.flat();
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+// Function to handle navigation
+function navigateToUrl(url: string) {
+  if (url) {
+    if (isUniFrameWork) {
+      // Use UniApp navigation
+      TUIGlobal.navigateTo({
+        url: `/pages/views/webview?url=${url}` // Assuming you have a webview page to handle external URLs
+      });
+    } else {
+      // Use standard browser navigation
+      TUIGlobal.open(url, '_blank');
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.message-text-container {
+  display: inline;
+  font-size: 0;
+  letter-spacing: -1px;
+}
+
+.text-select {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.text,.emoji,.url-link{
+  &::selection {
+    background-color: #b4d5fe;
+    color: inherit;
+    cursor: text;
+  }
+}
+
+.emoji {
+  font-size: 0;
+  vertical-align: bottom;
+  width: 20px;
+  height: 20px;
+}
+
+.text, .url-link {
+  font-size: 14px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  letter-spacing: normal;
+}
+
+.url-link {
+  color: #0366d6;
+  text-decoration: none;
+  word-break: break-all;
+  cursor: text;
+
+  &:hover:not(:active) {
+    cursor: pointer;
+  }
+
+  &:visited {
+    color: #0366d6;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-timestamp.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-timestamp.vue
new file mode 100644
index 00000000..bbeb4c5b
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-timestamp.vue
@@ -0,0 +1,74 @@
+<template>
+  <div
+    v-if="timestampShowFlag"
+    class="message-timestamp"
+  >
+    {{ timestampShowContent }}
+  </div>
+</template>
+<script setup lang="ts">
+import { toRefs, ref, watch } from '../../../../adapter-vue';
+import { calculateTimestamp } from '../../utils/utils';
+
+const props = defineProps({
+  currTime: {
+    type: Number,
+    default: 0,
+  },
+  prevTime: {
+    type: Number,
+    default: 0,
+  },
+});
+const { currTime, prevTime } = toRefs(props);
+const timestampShowFlag = ref(false);
+const timestampShowContent = ref('');
+
+const handleItemTime = (currTime: number, prevTime: number) => {
+  timestampShowFlag.value = false;
+  if (currTime <= 0) {
+    return '';
+  } else if (!prevTime || prevTime <= 0) {
+    timestampShowFlag.value = true;
+    return calculateTimestamp(currTime * 1000);
+  } else {
+    const minDiffToShow = 10 * 60; // 10min 10*60s
+    const diff = currTime - prevTime; // s
+    if (diff >= minDiffToShow) {
+      timestampShowFlag.value = true;
+      return calculateTimestamp(currTime * 1000);
+    }
+  }
+  return '';
+};
+
+watch(
+  () => [currTime.value, prevTime.value],
+  (newVal: any, oldVal: any) => {
+    if (newVal?.toString() === oldVal?.toString()) {
+      return;
+    } else {
+      timestampShowContent.value = handleItemTime(
+        currTime.value,
+        prevTime.value,
+      );
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+
+.message-timestamp {
+  margin: 10px auto;
+  color: #999;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-tip.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-tip.vue
new file mode 100644
index 00000000..fcdd6351
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-tip.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="message-tip">
+    <span>{{ tipContent }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from '../../../../adapter-vue';
+const props = defineProps({
+  content: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const tipContent = computed(() => props.content?.text || props.content?.custom || '');
+</script>
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+
+.message-tip {
+  margin: 0 auto;
+  padding: 0 20px;
+  color: #999;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+  display: flex;
+  place-content: center center;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 10px;
+
+  &-highlight {
+    animation: highlight 1000ms infinite;
+
+    @keyframes highlight {
+      50% {
+        color: #ff9c19;
+      }
+    }
+
+    @keyframes highlight {
+      50% {
+        color: #ff9c19;
+      }
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/index.vue
new file mode 100644
index 00000000..5da752f2
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <div
+    v-if="translationVisible"
+    ref="translationWrapperRef"
+    :class="{
+      'message-translation': true,
+      'reverse': props.message.flow === 'out',
+      'error': hasTranslationError,
+    }"
+  >
+    <TranslationContent
+      :message="props.message"
+      :translationContentVisible="translationVisible"
+      :translationWrapperRef="translationWrapperRef"
+      :isSingleTranslation="isSingleTranslation"
+      @toggleErrorStatus="toggleErrorStatus"
+    />
+    <div class="copyright">
+      <Icon
+        :file="checkIcon"
+        size="13px"
+      />
+      <div class="copyright-text">
+        {{ TUITranslateService.t('TUIChat.由IM提供翻译支持') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from '../../../../../adapter-vue';
+import {
+  TUIStore,
+  StoreName,
+  IMessageModel,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../../common/Icon.vue';
+import TranslationContent from './translation-content.vue';
+import checkIcon from '../../../../../assets/icon/check-sm.svg';
+import { ITranslateInfo } from '../../../../../interface';
+
+interface IProps {
+  message: IMessageModel;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+
+const translationVisible = ref<boolean>(false);
+const hasTranslationError = ref<boolean>(false);
+
+const translationWrapperRef = ref<HTMLDivElement>();
+
+let isSingleTranslation = true;
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CHAT, {
+    translateTextInfo: onMessageTranslationUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CHAT, {
+    translateTextInfo: onMessageTranslationUpdated,
+  });
+});
+
+function toggleErrorStatus(hasError: boolean) {
+  hasTranslationError.value = hasError;
+}
+
+function onMessageTranslationUpdated(info: Map<string, ITranslateInfo[]>) {
+  if (info === undefined) return;
+  isSingleTranslation = false;
+  const translationInfoList = info.get(props.message.conversationID) || [];
+  for (let i = 0; i < translationInfoList.length; ++i) {
+    const { messageID, visible } = translationInfoList[i];
+    if (messageID === props.message.ID && visible !== undefined) {
+      if (translationInfoList.length === 1 && visible) {
+        isSingleTranslation = true;
+      }
+      hasTranslationError.value = false;
+      translationVisible.value = visible;
+      break;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.message-translation {
+  margin-top: 4px;
+  margin-left: 44px;
+  padding: 10px;
+  background-color: #f2f7ff;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column !important;
+  transition: background-color 0.15s ease-out;
+
+  &.error {
+    background-color: #ffdfdf;
+  }
+
+  .copyright {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+
+    .copyright-text {
+      margin-left: 2px;
+      font-size: 12px;
+      color: #999;
+    }
+  }
+}
+
+.message-translation.reverse {
+  margin-right: 44px;
+  margin-left: auto;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/translation-content.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/translation-content.vue
new file mode 100644
index 00000000..ec6e95ec
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/translation-content.vue
@@ -0,0 +1,166 @@
+<template>
+  <div
+    class="message-translation-container"
+    :style="{
+      height: calculateHeight > 0 ? `${calculateHeight}px` : 'auto',
+      width: calculateWidth > 0 ? `${calculateWidth}px` : 'auto',
+    }"
+  >
+    <div
+      v-if="translationFinished"
+      ref="translationContentRef"
+      :class="{
+        'translation-content': true,
+        'occur': calculateHeight > 0,
+      }"
+    >
+      <template
+        v-if="translationTextList.length > 0"
+      >
+        <span
+          v-for="(text, index) in translationTextList"
+          :key="index"
+        >
+          <img
+            v-if="text.type === 'face'"
+            class="text-face"
+            :src="text.value"
+          >
+          <span
+            v-else
+            class="text-plain"
+          >{{ text.value }}</span>
+        </span>
+      </template>
+      <template v-else>
+        {{ translationErrorText }}
+      </template>
+    </div>
+    <div
+      ref="translationLoadingRef"
+      :class="{
+        'loading': true,
+        'loading-end': translationFinished
+      }"
+    >
+      {{ TUITranslateService.t('TUIChat.翻译中') }}...
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, nextTick } from '../../../../../adapter-vue';
+import {
+  IMessageModel,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import { getBoundingClientRectSync } from '@tencentcloud/universal-api';
+import { TranslationTextType, translator } from '../../../utils/translation';
+
+interface IProps {
+  message: IMessageModel;
+  translationContentVisible: boolean;
+  isSingleTranslation: boolean;
+  translationWrapperRef: HTMLDivElement | undefined;
+}
+
+interface IEmits {
+  (e: 'toggleErrorStatus', status: boolean): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+
+const translationFinished = ref<boolean>(false);
+const translationErrorText = ref<string>('');
+const translationTextList = ref<TranslationTextType[]>([]);
+const calculateHeight = ref<number>(0);
+const calculateWidth = ref<number>(0);
+
+const translationLoadingRef = ref<HTMLDivElement>();
+const translationContentRef = ref<HTMLDivElement>();
+
+watch(() => props.translationContentVisible, (newVal: boolean) => {
+  if (newVal) {
+    translator.get(props.message)
+      .then((result) => {
+        translationFinished.value = true;
+        translationTextList.value = result;
+
+        nextTick(() => {
+          const { height: originHeight, width: originWidth } = getBoundingClientRectSync(translationLoadingRef.value!);
+          const { height, width } = getBoundingClientRectSync(translationContentRef.value!);
+          calculateHeight.value = originHeight;
+          calculateWidth.value = originWidth;
+          requestAnimationFrame(() => {
+            calculateHeight.value = height;
+            calculateWidth.value = width;
+            if (props.isSingleTranslation) {
+              nextTick(() => {
+                const { bottom } = getBoundingClientRectSync(props.translationWrapperRef);
+                const { bottom: bottomWindow } = getBoundingClientRectSync('#messageScrollList');
+                if (bottom > bottomWindow) {
+                  const timer = setTimeout(() => {
+                    props.translationWrapperRef!.scrollIntoView({ block: 'end', behavior: 'smooth' });
+                    clearTimeout(timer);
+                  }, 150);
+                }
+              });
+            }
+          });
+        });
+      })
+      .catch((err) => {
+        translationFinished.value = true;
+        const { height: originHeight } = getBoundingClientRectSync(translationLoadingRef.value!);
+        calculateHeight.value = originHeight;
+        translationTextList.value = [];
+        emits('toggleErrorStatus', true);
+        translationErrorText.value = err.message;
+      });
+  }
+}, { immediate: true });
+</script>
+
+<style lang="scss" scoped>
+.message-translation-container {
+  min-height: 16px;
+  min-width: 80px;
+  position: relative;
+  transition: width 0.15s ease-out, height 0.15s ease-out, ;
+  font-size: 14px;
+
+  .loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 1;
+    transition: opacity 0.3s ease-out;
+
+    &.loading-end {
+      opacity: 0;
+    }
+  }
+
+  .translation-content {
+    opacity: 0;
+
+    &.occur {
+      animation: occur 0.3s ease-out 0.45s forwards;
+
+      @keyframes occur {
+        100% {
+          opacity: 1;
+        }
+      }
+    }
+
+    .text-face {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-video.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-video.vue
new file mode 100644
index 00000000..2aba09bb
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/message-video.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="message-video">
+    <div
+      ref="skeleton"
+      class="message-video-box"
+      :class="[
+        (!props.messageItem.progress || props.messageItem.progress === 1)
+          && !isPC
+          && 'message-video-cover',
+      ]"
+      @click="toggleVideoPreviewer"
+    >
+      <img
+        v-if="(props.messageItem.progress > 0 && props.messageItem.progress < 1 && poster) ||
+          (!isPC && poster)
+        "
+        class="message-img"
+        :class="[isWidth ? 'is-width' : 'is-height']"
+        :src="poster"
+      >
+      <video
+        v-else-if="!isPC"
+        ref="videoRef"
+        class="message-img video-h5-uploading"
+        :src="props.content.url + '#t=0.1'"
+        :poster="props.content.url"
+        preload="auto"
+        muted
+      />
+      <video
+        v-else
+        ref="videoRef"
+        class="message-img video-web"
+        :src="props.content.url"
+        controls
+        preload="metadata"
+        :poster="poster"
+      />
+    </div>
+    <div
+      v-if="isShow && !isPC"
+      class="dialog-video"
+    >
+      <div
+        class="dialog-video-close"
+        @click.stop="toggleVideoPreviewer"
+      >
+        <Icon :file="closeSVG" />
+      </div>
+      <div
+        class="dialog-video-box"
+        :class="[!isPC ? 'dialog-video-h5' : '']"
+        @click.self="toggleVideoPreviewer"
+      >
+        <video
+          :class="[isWidth ? 'is-width' : 'is-height']"
+          :src="props.content.url"
+          controls
+          autoplay
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  watch,
+  computed,
+  nextTick,
+  watchEffect,
+  withDefaults,
+} from '../../../../adapter-vue';
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { handleSkeletonSize } from '../../utils/utils';
+import Icon from '../../../common/Icon.vue';
+import closeSVG from '../../../../assets/icon/icon-close.svg';
+import type { IVideoMessageContent } from '../../../../interface';
+import { isPC } from '../../../../utils/env';
+
+const props = withDefaults(
+  defineProps<{
+    content: IVideoMessageContent;
+    messageItem: IMessageModel;
+  }>(),
+  {
+    content: () => ({} as IVideoMessageContent),
+    messageItem: () => ({} as IMessageModel),
+  },
+);
+
+const emits = defineEmits(['uploading']);
+const isShow = ref(false);
+const poster = ref('');
+const posterWidth = ref(0);
+const posterHeight = ref(0);
+const skeleton = ref();
+const videoRef = ref();
+const transparentPosterUrl = 'https://web.sdk.qcloud.com/im/assets/images/transparent.png';
+
+watchEffect(async () => {
+  if (!props.content) return;
+  poster.value = await handlePosterUrl(props.content, props.messageItem);
+  nextTick(async () => {
+    const containerWidth
+      = document.getElementById('messageScrollList')?.clientWidth || 0;
+    const max = !isPC ? Math.min(containerWidth - 172, 300) : 300;
+    let size;
+    if (props.messageItem.status === 'success') {
+      let { snapshotWidth = 0, snapshotHeight = 0 } = props.content;
+      const { snapshotUrl } = props.content;
+      if (snapshotWidth === 0 || snapshotHeight === 0) return;
+      if (snapshotUrl === transparentPosterUrl) {
+        snapshotWidth = posterWidth.value;
+        snapshotHeight = posterHeight.value;
+      }
+      size = handleSkeletonSize(snapshotWidth, snapshotHeight, max, max);
+      skeleton?.value?.style
+      && (skeleton.value.style.width = `${size.width}px`);
+      skeleton?.value?.style
+      && (skeleton.value.style.height = `${size.height}px`);
+      if (isPC) {
+        videoRef?.value?.style && (videoRef.value.style.width = `${size.width}px`);
+        videoRef?.value?.style && (videoRef.value.style.height = `${size.height}px`);
+      }
+    } else {
+      emits('uploading');
+    }
+  });
+});
+
+const isWidth = computed(() => {
+  const { snapshotWidth = 0, snapshotHeight = 0 } = props.messageItem.payload;
+  return snapshotWidth >= snapshotHeight;
+});
+
+watch(() => props.messageItem.status, (newVal: string, oldVal: string) => {
+  if (newVal === 'success' && oldVal !== 'success') {
+    emits('uploading');
+  }
+});
+
+function toggleVideoPreviewer() {
+  // Video upload process does not support full-screen playback.
+  if (props.messageItem.progress > 0 && props.messageItem.progress < 1) {
+    return;
+  }
+  isShow.value = !isShow.value;
+}
+
+// For H5, some browsers (Safari/WeChat) have an issue where the cover image of the<video>` tag is empty before the video is fully uploaded.
+//  A separate processing and clipping method is required to display the cover image before the video upload is complete.
+function getVideoBase64(url: string) {
+  return new Promise((resolve) => {
+    let dataURL = '';
+    const video = document.createElement('video');
+    video.setAttribute('crossOrigin', 'anonymous');
+    video.setAttribute('src', url);
+    video.setAttribute('preload', 'auto');
+    video.addEventListener(
+      'loadeddata',
+      function () {
+        const canvas = document.createElement('canvas'),
+          width = video.videoWidth,
+          height = video.videoHeight;
+        canvas.width = width;
+        canvas.height = height;
+        (canvas as any).getContext('2d').drawImage(video, 0, 0, width, height);
+        dataURL = canvas.toDataURL('image/jpeg');
+        posterWidth.value = width;
+        posterHeight.value = height;
+        resolve(dataURL);
+      },
+      { once: true },
+    );
+  });
+}
+
+async function handlePosterUrl(messgeContent: IVideoMessageContent, messageItem: IMessageModel) {
+  if (!messageItem) return '';
+  if (messageItem.status !== 'success') {
+    return await getVideoBase64(messgeContent.url);
+  } else {
+    return (
+      (messgeContent.snapshotUrl !== transparentPosterUrl && messgeContent.snapshotUrl)
+      || (messageItem?.payload?.snapshotUrl !== transparentPosterUrl
+      && messageItem?.payload?.snapshotUrl)
+      || (messageItem.payload?.thumbUrl !== transparentPosterUrl
+      && messageItem?.payload?.thumbUrl)
+      || (await getVideoBase64(messgeContent.url))
+    );
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+
+.message-video {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+
+  &-box {
+    max-width: min(calc(100vw - 180px), 300px);
+    font-size: 0;
+
+    video {
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
+      width: inherit;
+      height: inherit;
+      border-radius: 10px;
+    }
+
+    img {
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
+      width: inherit;
+      height: inherit;
+      border-radius: 10px;
+    }
+
+    img[src=""],
+    img:not([src]) {
+      opacity: 0;
+    }
+  }
+
+  &-cover {
+    display: inline-block;
+    position: relative;
+
+    &::before {
+      position: absolute;
+      z-index: 1;
+      content: "";
+      width: 0;
+      height: 0;
+      border: 10px solid transparent;
+      border-left: 15px solid #fff;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      margin: auto;
+      transform: translate(5px, 0);
+    }
+
+    video {
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
+      width: inherit;
+      height: inherit;
+      border-radius: 10px;
+    }
+  }
+}
+
+.dialog-video {
+  position: fixed;
+  z-index: 12;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &-close {
+    display: flex;
+    justify-content: flex-end;
+    background: #000;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+
+  &-box {
+    display: flex;
+    flex: 1;
+    max-height: 100%;
+    padding: 6rem;
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+
+    video {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}
+
+.dialog-video-h5 {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  padding: 30px 0;
+}
+
+.is-width {
+  width: 100%;
+}
+
+.is-height {
+  height: 100%;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/read-status/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/read-status/index.vue
new file mode 100644
index 00000000..6bc442e2
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/read-status/index.vue
@@ -0,0 +1,200 @@
+<template>
+  <div
+    v-show="isShowReadStatus"
+    :class="{
+      'message-label': true,
+      'unread': isUseUnreadStyle,
+      'finger-point': isHoverFingerPointer,
+    }"
+    @click="openReadUserPanel"
+  >
+    <span>{{ readStatusText }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from '../../../../../adapter-vue';
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  IMessageModel,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import TUIChatConfig from '../../../config';
+
+interface IProps {
+  message: IMessageModel;
+}
+
+interface IEmits {
+  (e: 'openReadUserPanel'): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({}) as IMessageModel,
+});
+const ReadStatus = TUIChatConfig.getFeatureConfig('ReadStatus');
+
+enum ReadState {
+  Read,
+  Unread,
+  AllRead,
+  NotShow,
+  PartiallyRead,
+}
+
+const TYPES = TUIChatEngine.TYPES;
+// User-level read receipt toggle has the highest priority.
+const isDisplayMessageReadReceipt = ref<boolean>(TUIStore.getData(StoreName.USER, 'displayMessageReadReceipt'));
+
+onMounted(() => {
+  TUIStore.watch(StoreName.USER, {
+    displayMessageReadReceipt: onDisplayMessageReadReceiptUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.USER, {
+    displayMessageReadReceipt: onDisplayMessageReadReceiptUpdate,
+  });
+});
+
+const isShowReadStatus = computed<boolean>(() => {
+  if (!ReadStatus) {
+    return false;
+  }
+  if (!isDisplayMessageReadReceipt.value) {
+    return false;
+  }
+  const {
+    ID,
+    type,
+    flow,
+    status,
+    hasRiskContent,
+    conversationID,
+    conversationType,
+    needReadReceipt = false,
+  } = props.message;
+
+  // Asynchronous message strike: Determine if there is risky content after the message has been sent
+  if (hasRiskContent) {
+    return false;
+  }
+
+  const { groupProfile } = TUIStore.getConversationModel(conversationID) || {};
+  // AVCHATROOM and COMMUNITY chats do not display read status
+  if (groupProfile?.type === TYPES.GRP_AVCHATROOM || groupProfile?.type === TYPES.GRP_COMMUNITY) {
+    return false;
+  }
+
+  if (type === TYPES.MSG_CUSTOM) {
+    const message = TUIStore.getMessageModel(ID);
+    // If it is a signaling message, do not display the read status
+    if (message?.getSignalingInfo() !== null) {
+      return false;
+    }
+  }
+
+  // Unsuccessful message: Received messages do not display read status
+  if (flow !== 'out' || status !== 'success') {
+    return false;
+  }
+
+  if (conversationType === 'GROUP') {
+    return needReadReceipt;
+  } else if (conversationType === 'C2C') {
+    return true;
+  }
+  return false;
+});
+
+const readState = computed<ReadState>(() => {
+  const { conversationType, needReadReceipt = false, isPeerRead = false } = props.message;
+  const { readCount = 0, unreadCount = 0, isPeerRead: isReceiptPeerRead = false } = props.message.readReceiptInfo;
+  if (conversationType === 'C2C') {
+    if (needReadReceipt) {
+      return isReceiptPeerRead ? ReadState.Read : ReadState.Unread;
+    } else {
+      return isPeerRead ? ReadState.Read : ReadState.Unread;
+    }
+  } else if (conversationType === 'GROUP') {
+    if (needReadReceipt) {
+      if (readCount === 0) {
+        return ReadState.Unread;
+      } else if (unreadCount === 0) {
+        return ReadState.AllRead;
+      } else {
+        return ReadState.PartiallyRead;
+      }
+    } else {
+      return ReadState.NotShow;
+    }
+  }
+  return ReadState.Unread;
+});
+
+const readStatusText = computed(() => {
+  const { readCount = 0 } = props.message.readReceiptInfo;
+  switch (readState.value) {
+    case ReadState.Read:
+      return TUITranslateService.t('TUIChat.已读');
+    case ReadState.Unread:
+      return TUITranslateService.t('TUIChat.未读');
+    case ReadState.AllRead:
+      return TUITranslateService.t('TUIChat.全部已读');
+    case ReadState.PartiallyRead:
+      return `${readCount}${TUITranslateService.t('TUIChat.人已读')}`;
+    default:
+      return '';
+  }
+});
+
+const isUseUnreadStyle = computed(() => {
+  const { conversationType } = props.message;
+  if (conversationType === 'C2C') {
+    return readState.value !== ReadState.Read;
+  } else if (conversationType === 'GROUP') {
+    return readState.value !== ReadState.AllRead;
+  }
+  return false;
+});
+
+const isHoverFingerPointer = computed<boolean>(() => {
+  return (
+    props.message.needReadReceipt
+    && props.message.conversationType === 'GROUP'
+    && (readState.value === ReadState.PartiallyRead || readState.value === ReadState.Unread)
+  );
+});
+
+function openReadUserPanel() {
+  if (isHoverFingerPointer.value) {
+    emits('openReadUserPanel');
+  }
+}
+
+function onDisplayMessageReadReceiptUpdate(isDisplay: boolean) {
+  isDisplayMessageReadReceipt.value = isDisplay;
+}
+</script>
+
+<style scoped lang="scss">
+.message-label {
+  align-self: flex-end;
+  font-size: 12px;
+  color: #b6b8ba;
+  word-break: keep-all;
+  flex: 0 0 auto;
+
+  &.unread {
+    color: #679ce1 !important;
+  }
+}
+
+.finger-point {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/index.vue
new file mode 100644
index 00000000..eb4594a0
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/index.vue
@@ -0,0 +1,433 @@
+<template>
+  <div
+    :class="{
+      'simple-message-list-container': true,
+      'simple-message-list-container-mobile': isMobile,
+    }"
+  >
+    <div class="header-container">
+      <span
+        class="back"
+        @click="backPreviousLevel"
+      >
+        <Icon
+          class="close-icon"
+          :file="addIcon"
+          :size="'18px'"
+        />
+        <span v-if="isReturn">{{ TUITranslateService.t('TUIChat.返回') }}</span>
+        <span v-else>{{ TUITranslateService.t('TUIChat.关闭') }}</span>
+      </span>
+
+      <span class="title">
+        {{ currentMergeMessageInfo.title }}
+      </span>
+    </div>
+    <div v-if="isDownloadOccurError">
+      Load Merge Message Error
+    </div>
+    <div
+      v-else-if="isMergeMessageInfoLoaded"
+      ref="simpleMessageListRef"
+      class="message-list"
+    >
+      <div
+        v-for="item in currentMergeMessageInfo.messageList"
+        :key="item.ID"
+        :class="{
+          'message-item': true,
+        }"
+      >
+        <MessageContainer
+          :sender="item.nick"
+          :avatar="item.avatar"
+          :type="item.messageBody[0].type"
+          :time="item.time"
+        >
+          <!-- text -->
+          <div
+            v-if="item.messageBody[0].type === TYPES.MSG_TEXT"
+            class="message-text"
+          >
+            <span
+              v-for="(textInfo, index) in parseTextToRenderArray(item.messageBody[0].payload['text'])"
+              :key="index"
+              class="message-text-container"
+            >
+              <span
+                v-if="textInfo.type === 'text'"
+                class="text"
+              >{{ textInfo.content }}</span>
+              <img
+                v-else
+                class="simple-emoji"
+                :src="textInfo.content"
+                alt="small-face"
+              >
+            </span>
+          </div>
+          <!-- image -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_IMAGE"
+            class="message-image"
+          >
+            <img
+              class="image"
+              :src="(item.messageBody[0].payload)['imageInfoArray'][2]['url']"
+              mode="widthFix"
+              alt="image"
+            >
+          </div>
+          <!-- video -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_VIDEO"
+            class="message-video"
+          >
+            <div
+              v-if="isUniFrameWork"
+              @click="previewVideoInUniapp((item.messageBody[0].payload)['remoteVideoUrl'])"
+            >
+              <image
+                class="image"
+                :src="(item.messageBody[0].payload)['thumbUrl']"
+                mode="widthFix"
+                alt="image"
+              />
+              <Icon
+                class="video-play-icon"
+                :file="playIcon"
+              />
+            </div>
+            <video
+              v-else
+              class="video"
+              controls
+              :poster="(item.messageBody[0].payload)['thumbUrl']"
+            >
+              <source
+                :src="(item.messageBody[0].payload)['remoteVideoUrl']"
+                type="video/mp4"
+              >
+            </video>
+          </div>
+          <!-- audio -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_AUDIO"
+            class="message-audio"
+          >
+            <span>{{ TUITranslateService.t("TUIChat.语音") }}&nbsp;</span>
+            <span>{{ item.messageBody[0].payload.second }}s</span>
+          </div>
+          <!-- big face -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_FACE"
+            class="message-face"
+          >
+            <img
+              class="image"
+              :src="resolveBigFaceUrl(item.messageBody[0].payload.data)"
+              alt="face"
+            >
+          </div>
+          <!-- file -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_FILE"
+            class="message-file"
+          >
+            {{ TUITranslateService.t('TUIChat.[文件]') }}
+          </div>
+          <!-- location -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_LOCATION"
+          >
+            {{ TUITranslateService.t('TUIChat.[地理位置]') }}
+          </div>
+          <!-- merger -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_MERGER"
+            class="message-merger"
+            @click.capture="entryNextLevel($event, item)"
+          >
+            <MessageRecord
+              disabled
+              :renderData="item.messageBody[0].payload"
+            />
+          </div>
+          <!-- custom -->
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_CUSTOM">
+            {{ TUITranslateService.t('TUIChat.[自定义消息]') }}
+          </div>
+        </MessageContainer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from '../../../../../adapter-vue';
+import TUIChatEngine, {
+  TUIStore,
+  TUIChatService,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import addIcon from '../../../../../assets/icon/back.svg';
+import playIcon from '../../../../../assets/icon/video-play.png';
+import Icon from '../../../../common/Icon.vue';
+import MessageContainer from './message-container.vue';
+import MessageRecord from '../message-record/index.vue';
+import { parseTextToRenderArray, DEFAULT_BIG_EMOJI_URL, CUSTOM_BIG_EMOJI_URL } from '../../../emoji-config/index';
+import { isMobile, isUniFrameWork } from '../../../../../utils/env';
+import { IMergeMessageContent } from '../../../../../interface';
+
+interface IProps {
+  /**
+   * only use messageID when first render of simple-message-list
+   * because the nested simple-message-list do not have corresponding message object
+   * need to download message from sdk by constructed message
+   * and use downloaded message object to render nested simple-message-list
+   */
+  messageID?: string;
+  isMounted?: boolean;
+}
+
+interface IEmits {
+  (e: 'closeOverlay'): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  messageID: '',
+  isMounted: false,
+});
+
+const TYPES = TUIChatEngine.TYPES;
+const isDownloadOccurError = ref(false);
+const messageListStack = ref<IMergeMessageContent[]>([]);
+const currentMergeMessageInfo = ref<Partial<IMergeMessageContent>>({
+  title: '',
+  messageList: [],
+});
+const simpleMessageListRef = ref<HTMLElement>();
+
+watch(() => messageListStack.value.length, async (newValue) => {
+  isDownloadOccurError.value = false;
+  if (newValue < 1) {
+    return;
+  }
+  const stackTopMessageInfo = messageListStack.value[messageListStack.value.length - 1];
+  if (stackTopMessageInfo.downloadKey && stackTopMessageInfo.messageList.length === 0) {
+    try {
+      const res = await TUIChatService.downloadMergedMessages({
+        payload: stackTopMessageInfo,
+        type: TUIChatEngine.TYPES.MSG_MERGER,
+      } as any);
+      // if download complete message, cover the original message in stack top
+      messageListStack.value[messageListStack.value.length - 1] = res.payload;
+    } catch (error) {
+      isDownloadOccurError.value = true;
+    }
+  }
+  currentMergeMessageInfo.value = messageListStack.value[messageListStack.value.length - 1];
+});
+
+watch(() => props.isMounted, (newValue) => {
+  // For compatibility with uniapp, use watch to implement onMounted
+  if (newValue) {
+    if (!props.messageID) {
+      throw new Error('messageID is required when first render of simple-message-list.');
+    }
+    const sdkMessagePayload = TUIStore.getMessageModel(props.messageID).getMessage().payload;
+    messageListStack.value = [sdkMessagePayload];
+  } else {
+    messageListStack.value = [];
+  }
+}, {
+  immediate: true,
+});
+
+const isReturn = computed(() => {
+  return messageListStack.value.length > 1;
+});
+
+const isMergeMessageInfoLoaded = computed(() => {
+  return currentMergeMessageInfo.value?.messageList ? currentMergeMessageInfo.value.messageList.length > 0 : false;
+});
+
+function entryNextLevel(e, sdkMessage: any) {
+  messageListStack.value.push(sdkMessage.messageBody[0].payload);
+  e.stopPropagation();
+}
+
+function backPreviousLevel() {
+  messageListStack.value.pop();
+  if (messageListStack.value.length < 1) {
+    emits('closeOverlay');
+  }
+}
+
+function previewVideoInUniapp(url: string) {
+  if (isUniFrameWork) {
+    const encodedUrl = encodeURIComponent(url);
+    uni.navigateTo({
+      url: `/TUIKit/components/TUIChat/video-play?videoUrl=${encodedUrl}`,
+    });
+  }
+}
+
+function resolveBigFaceUrl(bigFaceKey: string): string {
+  let url = '';
+  if (bigFaceKey.indexOf('@custom') > -1) {
+    url = CUSTOM_BIG_EMOJI_URL + bigFaceKey;
+  } else {
+    url = DEFAULT_BIG_EMOJI_URL + bigFaceKey;
+    if (url.indexOf('@2x') === -1) {
+      url += '@2x.png';
+    } else {
+      url += '.png';
+    }
+  }
+  return url;
+}
+</script>
+
+<style scoped lang="scss">
+:not(not){
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.simple-message-list-container {
+  position: relative;
+  overflow: hidden;
+  width: calc(40vw);
+  min-width: 550px;
+  height: calc(100vh - 200px);
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+
+  &-mobile {
+    width: 100vw;
+    height: 100vh;
+    min-width: auto;
+    border-radius: 0;
+  }
+
+  .header-container {
+    width: 100%;
+    text-align: center;
+    font-weight: bold;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    height: 60px;
+    justify-content: center;
+    align-items: center;
+    padding: 0 70px;
+    background-color: #fff;
+
+    .back {
+      flex-direction: row;
+      align-items: center;
+      position: absolute;
+      left: 10px;
+      cursor: pointer;
+    }
+
+    .title {
+      width: 100%;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+  }
+
+  .message-list {
+    padding: 60px 20px 20px;
+    flex: 1 1 auto;
+    overflow: hidden auto;
+  }
+}
+
+.message-item {
+  flex-direction: row;
+  margin: 10px 0;
+}
+
+.message-text {
+  flex-flow: row wrap;
+  display: inline;
+
+  &-container {
+    display: inline;
+    flex: 0 0 auto;
+    flex-direction: row;
+
+    .text {
+      vertical-align: bottom;
+      display: inline;
+      word-break: break-all;
+    }
+
+    .simple-emoji {
+      display: inline-flex;
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+.message-image {
+  max-width: 180px;
+  border-radius: 10px;
+  overflow: hidden;
+
+  .image {
+    max-width: 180px;
+  }
+}
+
+.message-face {
+  max-width: 100px;
+
+  .image {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+.message-audio {
+  flex-direction: row;
+}
+
+.message-video {
+  position: relative;
+
+  .image {
+    max-width: 180px;
+  }
+
+  .video-play-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .video {
+    max-width: 150px;
+    width: inherit;
+    height: inherit;
+    border-radius: 10px;
+  }
+}
+
+.message-combine {
+  max-width: 300px;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/message-container.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/message-container.vue
new file mode 100644
index 00000000..66ddda7f
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/message-container.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="simple-message-container">
+    <div class="simple-message-avatar">
+      <Avatar :url="props.avatar" />
+    </div>
+    <div>
+      <div class="simple-message-sender">
+        {{ props.sender }}
+      </div>
+      <div class="simple-message-body">
+        <div
+          :class="{
+            'simple-message-content': true,
+            'no-padding': isNoPadding
+          }"
+        >
+          <slot />
+        </div>
+        <div class="timestamp">
+          {{ calculateTimestamp(props.time*1000) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from '../../../../../adapter-vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import Avatar from '../../../../common/Avatar/index.vue';
+import { calculateTimestamp } from '../../../utils/utils';
+
+interface IProps {
+  sender: string;
+  avatar: string;
+  type: string;
+  time: number;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  sender: '',
+  avatar: '',
+});
+
+const TYPES = TUIChatEngine.TYPES;
+
+const isNoPadding = computed(() => {
+  return [TYPES.MSG_IMAGE, TYPES.MSG_VIDEO, TYPES.MSG_MERGER].includes(props.type);
+});
+</script>
+
+<style scoped lang="scss">
+:not(not){
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.simple-message-container {
+  flex-direction: row;
+
+  .simple-message-avatar {
+    flex: 0 0 auto;
+    margin-right: 8px;
+  }
+
+  .simple-message-sender {
+    display: block;
+    max-width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 11px;
+    color: #999;
+  }
+
+  .simple-message-body {
+    flex-direction: row;
+    align-items: flex-end;
+  }
+
+  .simple-message-content {
+    margin-top: 8px;
+    background-color: #dceafd;
+    border-radius: 0 10px 10px;
+    padding: 10px 12px;
+  }
+
+  .timestamp {
+    flex: 0 0 auto;
+    font-size: 12px;
+    color: #aaa;
+    margin-left: 6px;
+  }
+
+  .no-padding {
+    padding: 0;
+    background-color: transparent;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-group-application/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-group-application/index.vue
new file mode 100644
index 00000000..3d85c7be
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-group-application/index.vue
@@ -0,0 +1,336 @@
+<template>
+  <div>
+    <div
+      v-if="groupApplicationCount > 0"
+      class="application-tips"
+    >
+      <div>
+        {{ groupApplicationCount }}{{ TUITranslateService.t("TUIChat.条入群申请") }}
+      </div>
+      <div
+        class="application-tips-btn"
+        @click="toggleGroupApplicationDrawerShow"
+      >
+        {{ TUITranslateService.t("TUIChat.点击处理") }}
+      </div>
+    </div>
+    <Drawer
+      ref="drawerDomInstanceRef"
+      :visible="isGroupApplicationDrawerShow"
+      :zIndex="998"
+      :popDirection="isMobile ? 'bottom' : 'right'"
+      :isFullScreen="isMobile"
+      :overlayColor="isMobile ? undefined : 'transparent'"
+      :drawerStyle="{
+        bottom: {
+          minHeight: '60vh',
+          maxHeight: '80vh',
+          borderRadius: '12px 12px 0 0',
+        },
+        right: {
+          width: '360px',
+          borderRadius: '12px 0 0 12px',
+          boxShadow: '0 0 10px 0 #d0d0d0',
+        }
+      }"
+      @onOverlayClick="toggleGroupApplicationDrawerShow"
+    >
+      <div
+        :class="{
+          'application-contaienr': true
+        }"
+      >
+        <header class="application-header">
+          <div
+            @click="toggleGroupApplicationDrawerShow"
+          >
+            <Icon
+              v-if="isPC"
+              :file="closeIcon"
+              :size="'16px'"
+            />
+            <div v-else>
+              {{
+                TUITranslateService.t('关闭')
+              }}
+            </div>
+          </div>
+        </header>
+        <main>
+          <div
+            v-for="(item, index) in customGroupApplicationList"
+            :key="item.nick"
+            :class="{
+              'application-item': true,
+              'removed': item.isRemoved,
+            }"
+          >
+            <Avatar
+              :style="{
+                flex: '0 0 auto',
+              }"
+              :url="item.avatar"
+              :useSkeletonAnimation="true"
+            />
+            <div class="application-item-info">
+              <div class="application-item-nick">
+                {{ item.nick }}
+              </div>
+              <div class="application-item-note">
+                {{ TUITranslateService.t("TUIChat.申请加入") }}
+              </div>
+            </div>
+            <div
+              class="application-item-operation"
+            >
+              <div
+                class="agree"
+                @click="handleApplication(item, 'Agree', index)"
+              >
+                {{ TUITranslateService.t("TUIChat.同意") }}
+              </div>
+              <div
+                class="reject"
+                @click="handleApplication(item, 'Reject', index)"
+              >
+                {{ TUITranslateService.t("TUIChat.拒绝") }}
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </Drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from '../../../../adapter-vue';
+import {
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  TUIUserService,
+  TUIGroupService,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../common/Icon.vue';
+import Avatar from '../../../common/Avatar/index.vue';
+import Drawer from '../../../common/Drawer/index.vue';
+import closeIcon from '../../../../assets/icon/close-dark.svg';
+import { isPC, isMobile } from '../../../../utils/env';
+import { IGroupApplication, IUserProfile, IChatResponese } from '../../../../interface';
+
+interface IProps {
+  groupID: string;
+}
+interface ICustomGroupApplication {
+  nick: string;
+  avatar: string;
+  isRemoved: boolean;
+  application: IGroupApplication;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  groupID: '',
+});
+
+const drawerDomInstanceRef = ref<InstanceType<typeof Drawer>>();
+const groupApplicationCount = ref(0);
+const isGroupApplicationDrawerShow = ref(false);
+const customGroupApplicationList = ref<ICustomGroupApplication[]>([]);
+
+watch(isGroupApplicationDrawerShow, (newVal) => {
+  if (newVal) {
+    generateCustomGroupApplicationList().then((list) => {
+      customGroupApplicationList.value = list;
+      groupApplicationCount.value = list.length;
+    });
+  }
+});
+
+watch(() => customGroupApplicationList.value.length, (newVal, oldVal) => {
+  if (oldVal > 0 && newVal === 0) {
+    isGroupApplicationDrawerShow.value = false;
+  }
+});
+
+/**
+ * Retrieves the current group application list based on the provided groupID.
+ *
+ * @return {Promise<IGroupApplication[]>} The list of group applications for the current group.
+ */
+async function getCurrentGroupApplicationList(): Promise<IGroupApplication[]> {
+  const result: IChatResponese<{ applicationList: IGroupApplication[] }> = await TUIGroupService.getGroupApplicationList();
+  const currentGroupApplicationList = result.data.applicationList.filter(application => application.groupID === props.groupID);
+  return currentGroupApplicationList;
+}
+
+function toggleGroupApplicationDrawerShow() {
+  isGroupApplicationDrawerShow.value = !isGroupApplicationDrawerShow.value;
+}
+
+async function generateCustomGroupApplicationList(): Promise<ICustomGroupApplication[]> {
+  const applicationList = await getCurrentGroupApplicationList();
+  if (applicationList.length === 0) {
+    return [];
+  }
+  const userIDList = applicationList.map(application => application.applicationType === 0 ? application.applicant : application.userID);
+  const { data: userProfileList } = await TUIUserService.getUserProfile({ userIDList }) as IChatResponese<IUserProfile[]>;
+  const mappingFromUserID2Profile: Record<string, IUserProfile> = {};
+  userProfileList.forEach((profile: IUserProfile) => {
+    mappingFromUserID2Profile[profile.userID] = profile;
+  });
+  const groupApplicationList: ICustomGroupApplication[] = applicationList.map((application) => {
+    const profile = mappingFromUserID2Profile[application.applicationType === 0 ? application.applicant : application.userID];
+    return {
+      nick: profile.nick || profile.userID || 'anonymous',
+      avatar: profile.avatar || '',
+      isRemoved: false,
+      application: application,
+    };
+  });
+
+  return groupApplicationList;
+}
+
+function handleApplication(customApplication: ICustomGroupApplication, action: 'Agree' | 'Reject', index: number) {
+  TUIGroupService.handleGroupApplication({
+    handleAction: action,
+    application: customApplication.application,
+  }).then(() => {
+    customGroupApplicationList.value[index].isRemoved = true;
+    setTimeout(() => {
+      customGroupApplicationList.value.splice(index, 1);
+      groupApplicationCount.value -= 1;
+    }, 150);
+  }).catch(() => {
+    // TODO: handle error
+  });
+}
+
+// --------------- mounted function ---------------
+onMounted(() => {
+  // get current group application number on the first time entering the group
+  getCurrentGroupApplicationList().then((applicationList) => {
+    groupApplicationCount.value = applicationList.length;
+  });
+
+  TUIStore.watch(StoreName.GRP, {
+    groupSystemNoticeList: onGroupSystemNoticeListUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.GRP, {
+    groupSystemNoticeList: onGroupSystemNoticeListUpdated,
+  });
+});
+
+function onGroupSystemNoticeListUpdated() {
+  // Approving or rejecting existing applications will not trigger this callback, but new applications can trigger it.
+  generateCustomGroupApplicationList().then((list) => {
+    customGroupApplicationList.value = list;
+    groupApplicationCount.value = list.length;
+  });
+}
+</script>
+
+<style scoped lang="scss">
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.application-tips {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+  padding: 5px 0;
+  font-size: 14px;
+  background-color:  #fce4d3;
+
+  .application-tips-btn {
+    color: #006eff;
+    cursor: pointer;
+    margin-left: 12px;
+  }
+}
+
+.application-contaienr {
+  padding: 50px 18px 10px;
+  background-color: #fff;
+  height: 100%;
+  overflow: hidden auto;
+  font-size: 14px;
+
+  .application-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 10px 20px;
+    flex-direction: row-reverse;
+    color: #679ce1;
+    font-size: 14px;
+  }
+
+  .application-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px 0;
+    transition: transform 0.15s ease-out;
+
+    & + .application-item {
+      border-top: 0.5px solid #d0d0d0;
+    }
+
+    .application-item-info {
+      margin-left: 8px;
+      margin-right: 8px;
+      font-size: 14px;
+
+      .application-item-nick {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .application-item-note {
+        color: #989191;
+        font-size: 12px;
+      }
+    }
+
+    .application-item-operation {
+      flex-direction: row;
+      margin-left: auto;
+      padding: 8px;
+      flex: 0 0 auto;
+      font-size: 14px;
+
+      .agree{
+        color: #679ce1;
+        cursor: pointer
+      }
+
+      .reject{
+        margin-left: 12px;
+        color: #fb355d;
+        cursor: pointer
+      }
+    }
+  }
+
+  .removed {
+    transform: translateX(-100%);
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-tool/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-tool/index.vue
new file mode 100644
index 00000000..2c85c42b
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-tool/index.vue
@@ -0,0 +1,426 @@
+<template>
+  <div
+    v-if="!isAllActionItemInvalid && !messageItem.hasRiskContent"
+    ref="messageToolDom"
+    :class="['dialog-item', !isPC ? 'dialog-item-h5' : 'dialog-item-web']"
+  >
+    <slot
+      v-if="featureConfig.EmojiReaction"
+      name="TUIEmojiPlugin"
+    />
+    <div
+      class="dialog-item-list"
+      :class="!isPC ? 'dialog-item-list-h5' : 'dialog-item-list-web'"
+    >
+      <template v-for="(item, index) in actionItems">
+        <div
+          v-if="item.renderCondition()"
+          :key="item.key"
+          class="list-item"
+          @click="getFunction(index)"
+          @mousedown="beforeCopy(item.key)"
+        >
+          <Icon
+            :file="item.iconUrl"
+            :size="'15px'"
+          />
+          <span class="list-item-text">{{ item.text }}</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  IMessageModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { ref, watchEffect, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
+import Icon from '../../../common/Icon.vue';
+import { Toast, TOAST_TYPE } from '../../../common/Toast/index';
+import delIcon from '../../../../assets/icon/msg-del.svg';
+import copyIcon from '../../../../assets/icon/msg-copy.svg';
+import quoteIcon from '../../../../assets/icon/msg-quote.svg';
+import revokeIcon from '../../../../assets/icon/msg-revoke.svg';
+import forwardIcon from '../../../../assets/icon/msg-forward.svg';
+import translateIcon from '../../../../assets/icon/translate.svg';
+import multipleSelectIcon from '../../../../assets/icon/multiple-select.svg';
+import convertText from '../../../../assets/icon/convertText_zh.svg';
+import { enableSampleTaskStatus } from '../../../../utils/enableSampleTaskStatus';
+import { transformTextWithKeysToEmojiNames } from '../../emoji-config';
+import { isH5, isPC, isUniFrameWork } from '../../../../utils/env';
+import { ITranslateInfo, IConvertInfo } from '../../../../interface';
+import TUIChatConfig from '../../config';
+
+// uni-app conditional compilation will not run the following code
+// #ifndef APP || APP-PLUS || MP || H5
+import CopyManager from '../../utils/copy';
+// #endif
+
+interface IProps {
+  messageItem: IMessageModel;
+  isMultipleSelectMode: boolean;
+}
+
+interface IEmits {
+  (key: 'toggleMultipleSelectMode'): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  isMultipleSelectMode: false,
+  messageItem: () => ({}) as IMessageModel,
+});
+const featureConfig = TUIChatConfig.getFeatureConfig();
+
+const TYPES = TUIChatEngine.TYPES;
+
+const actionItems = ref([
+  {
+    key: 'open',
+    text: TUITranslateService.t('TUIChat.打开'),
+    iconUrl: copyIcon,
+    renderCondition() {
+      if (!featureConfig.DownloadFile || !message.value) return false;
+      return isPC && (message.value?.type === TYPES.MSG_FILE
+        || message.value.type === TYPES.MSG_VIDEO
+        || message.value.type === TYPES.MSG_IMAGE);
+    },
+    clickEvent: openMessage,
+  },
+  {
+    key: 'copy',
+    text: TUITranslateService.t('TUIChat.复制'),
+    iconUrl: copyIcon,
+    renderCondition() {
+      if (!featureConfig.CopyMessage || !message.value) return false;
+      return message.value.type === TYPES.MSG_TEXT;
+    },
+    clickEvent: copyMessage,
+  },
+  {
+    key: 'revoke',
+    text: TUITranslateService.t('TUIChat.撤回'),
+    iconUrl: revokeIcon,
+    renderCondition() {
+      if (!featureConfig.RevokeMessage || !message.value) return false;
+      return message.value.flow === 'out' && message.value.status === 'success';
+    },
+    clickEvent: revokeMessage,
+  },
+  {
+    key: 'delete',
+    text: TUITranslateService.t('TUIChat.删除'),
+    iconUrl: delIcon,
+    renderCondition() {
+      if (!featureConfig.DeleteMessage || !message.value) return false;
+      return message.value.status === 'success';
+    },
+    clickEvent: deleteMessage,
+  },
+  {
+    key: 'forward',
+    text: TUITranslateService.t('TUIChat.转发'),
+    iconUrl: forwardIcon,
+    renderCondition() {
+      if (!featureConfig.ForwardMessage || !message.value) return false;
+      return message.value.status === 'success';
+    },
+    clickEvent: forwardSingleMessage,
+  },
+  {
+    key: 'quote',
+    text: TUITranslateService.t('TUIChat.引用'),
+    iconUrl: quoteIcon,
+    renderCondition() {
+      if (!featureConfig.QuoteMessage || !message.value) return false;
+      const _message = TUIStore.getMessageModel(message.value.ID);
+      return message.value.status === 'success' && !_message.getSignalingInfo();
+    },
+    clickEvent: quoteMessage,
+  },
+  {
+    key: 'translate',
+    text: TUITranslateService.t('TUIChat.翻译'),
+    visible: false,
+    iconUrl: translateIcon,
+    renderCondition() {
+      if (!featureConfig.TranslateMessage || !message.value) return false;
+      return message.value.status === 'success' && message.value.type === TYPES.MSG_TEXT;
+    },
+    clickEvent: translateMessage,
+  },
+  {
+    key: 'convert',
+    text: TUITranslateService.t('TUIChat.转文字'),
+    visible: false,
+    iconUrl: convertText,
+    renderCondition() {
+      if (!featureConfig.VoiceToText || !message.value) return false;
+      return message.value.status === 'success' && message.value.type === TYPES.MSG_AUDIO;
+    },
+    clickEvent: convertVoiceToText,
+  },
+  {
+    key: 'multi-select',
+    text: TUITranslateService.t('TUIChat.多选'),
+    iconUrl: multipleSelectIcon,
+    renderCondition() {
+      if (!featureConfig.MultiSelection || !message.value) return false;
+      return message.value.status === 'success';
+    },
+    clickEvent: multipleSelectMessage,
+  },
+]);
+
+const message = ref<IMessageModel>();
+const messageToolDom = ref<HTMLElement>();
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CHAT, {
+    translateTextInfo: onMessageTranslationInfoUpdated,
+    voiceToTextInfo: onMessageConvertInfoUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CHAT, {
+    translateTextInfo: onMessageTranslationInfoUpdated,
+    voiceToTextInfo: onMessageConvertInfoUpdated,
+  });
+});
+
+watchEffect(() => {
+  message.value = TUIStore.getMessageModel(props.messageItem.ID);
+});
+
+const isAllActionItemInvalid = computed(() => {
+  for (let i = 0; i < actionItems.value.length; ++i) {
+    if (actionItems.value[i].renderCondition()) {
+      return false;
+    }
+  }
+  return true;
+});
+
+function getFunction(index: number) {
+  // Compatible with Vue2 and WeChat Mini Program syntax, dynamic binding is not allowed.
+  actionItems.value[index].clickEvent();
+}
+
+function openMessage() {
+  let url = '';
+  switch (message.value?.type) {
+    case TUIChatEngine.TYPES.MSG_FILE:
+      url = message.value.payload.fileUrl;
+      break;
+    case TUIChatEngine.TYPES.MSG_VIDEO:
+      url = message.value.payload.remoteVideoUrl;
+      break;
+    case TUIChatEngine.TYPES.MSG_IMAGE:
+      url = message.value.payload.imageInfoArray[0].url;
+      break;
+  }
+  window?.open(url, '_blank');
+}
+
+function revokeMessage() {
+  if (!message.value) return;
+  const messageModel = TUIStore.getMessageModel(message.value.ID);
+  messageModel
+    .revokeMessage()
+    .then(() => {
+      enableSampleTaskStatus('revokeMessage');
+    })
+    .catch((error: any) => {
+      // The message cannot be recalled after the time limit was reached, which is 2 minutes by default.
+      if (error.code === 20016 || error.code === 10031) {
+        const message = TUITranslateService.t('TUIChat.已过撤回时限');
+        Toast({
+          message,
+          type: TOAST_TYPE.ERROR,
+        });
+      }
+    });
+}
+
+function deleteMessage() {
+  if (!message.value) return;
+  const messageModel = TUIStore.getMessageModel(message.value.ID);
+  messageModel.deleteMessage();
+}
+
+async function copyMessage() {
+  if (isUniFrameWork) {
+    TUIGlobal?.setClipboardData({
+      data: transformTextWithKeysToEmojiNames(message.value?.payload?.text),
+    });
+  } else {
+    // uni-app conditional compilation will not run the following code
+    // #ifndef APP || APP-PLUS || MP || H5
+    CopyManager.copySelection(message.value?.payload?.text);
+    // #endif
+  }
+}
+
+function beforeCopy(key: string) {
+  // only pc support copy selection or copy full message text
+  // uni-app and h5 only support copy full message text
+  if (key !== 'copy' || isH5) {
+    return;
+  }
+
+  // uni-app conditional compilation will not run the following code
+  // #ifndef APP || APP-PLUS || MP || H5
+  CopyManager.saveCurrentSelection();
+  // #endif
+}
+
+function forwardSingleMessage() {
+  if (!message.value) return;
+  TUIStore.update(StoreName.CUSTOM, 'singleForwardMessageID', message.value.ID);
+}
+
+function quoteMessage() {
+  if (!message.value) return;
+  message.value.quoteMessage();
+}
+
+function translateMessage() {
+  const enable = TUIStore.getData(StoreName.APP, 'enabledTranslationPlugin');
+  if (!enable) {
+    Toast({
+      message: TUITranslateService.t('TUIChat.请开通翻译功能'),
+      type: TOAST_TYPE.WARNING,
+    });
+    return;
+  }
+
+  if (!message.value) return;
+  const index = actionItems.value.findIndex(item => item.key === 'translate');
+  TUIStore.update(StoreName.CHAT, 'translateTextInfo', {
+    conversationID: message.value.conversationID,
+    messageID: message.value.ID,
+    visible: !actionItems.value[index].visible,
+  });
+}
+
+function convertVoiceToText() {
+  const enable = TUIStore.getData(StoreName.APP, 'enabledVoiceToText');
+  if (!enable) {
+    Toast({
+      message: TUITranslateService.t('TUIChat.请开通语音转文字功能'),
+    });
+    return;
+  }
+
+  if (!message.value) return;
+  const index = actionItems.value.findIndex(item => item.key === 'convert');
+  TUIStore.update(StoreName.CHAT, 'voiceToTextInfo', {
+    conversationID: message.value.conversationID,
+    messageID: message.value.ID,
+    visible: !actionItems.value[index].visible,
+  });
+}
+
+function multipleSelectMessage() {
+  emits('toggleMultipleSelectMode');
+}
+
+function onMessageTranslationInfoUpdated(info: Map<string, ITranslateInfo[]>) {
+  if (info === undefined) return;
+  const translationInfoList = info.get(props.messageItem.conversationID) || [];
+  const idx = actionItems.value.findIndex(item => item.key === 'translate');
+  for (let i = 0; i < translationInfoList.length; ++i) {
+    const { messageID, visible } = translationInfoList[i];
+    if (messageID === props.messageItem.ID) {
+      actionItems.value[idx].text = TUITranslateService.t(visible ? 'TUIChat.隐藏' : 'TUIChat.翻译');
+      actionItems.value[idx].visible = !!visible;
+      return;
+    }
+  }
+  actionItems.value[idx].text = TUITranslateService.t('TUIChat.翻译');
+}
+
+function onMessageConvertInfoUpdated(info: Map<string, IConvertInfo[]>) {
+  if (info === undefined) return;
+  const convertInfoList = info.get(props.messageItem.conversationID) || [];
+  const idx = actionItems.value.findIndex(item => item.key === 'convert');
+  for (let i = 0; i < convertInfoList.length; ++i) {
+    const { messageID, visible } = convertInfoList[i];
+    if (messageID === props.messageItem.ID) {
+      actionItems.value[idx].text = TUITranslateService.t(visible ? 'TUIChat.隐藏' : 'TUIChat.转文字');
+      actionItems.value[idx].visible = !!visible;
+      return;
+    }
+  }
+  actionItems.value[idx].text = TUITranslateService.t('TUIChat.转文字');
+}
+
+defineExpose({
+  messageToolDom,
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+
+.dialog-item-web {
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  padding: 12px 0;
+
+  .dialog-item-list {
+    display: flex;
+    align-items: baseline;
+    white-space: nowrap;
+    flex-wrap: wrap;
+    max-width: 280px;
+
+    .list-item {
+      padding: 4px 12px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .list-item-text {
+        padding-left: 4px;
+        font-size: 12px;
+        line-height: 17px;
+        color: #000;
+      }
+    }
+  }
+}
+
+.dialog-item-h5 {
+  @extend .dialog-item-web;
+
+  padding: 0;
+
+  .dialog-item-list {
+    margin: 10px;
+    white-space: nowrap;
+    flex-wrap: wrap;
+    max-width: 280px;
+
+    .list-item {
+      padding: 0 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #4f4f4f;
+
+      .list-item-text {
+        padding-left: 0;
+        color: #000;
+      }
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/message-tool/message-revoked.vue b/txim/src/TUIKit/components/TUIChat/message-list/message-tool/message-revoked.vue
new file mode 100644
index 00000000..1aca156d
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/message-tool/message-revoked.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="revoke">
+    <span v-if="message.flow === 'in'">{{ message.nick || message.from }}</span>
+    <span v-else-if="message.from === message.revoker">{{ TUITranslateService.t("TUIChat.您") }}</span>
+    <span v-else>{{ message.revoker }}</span>
+    <span>{{ TUITranslateService.t("TUIChat.撤回了一条消息") }}</span>
+    <span
+      v-if="message.flow === 'out' && isEditMsg"
+      class="edit"
+      @click="messageEdit"
+    >{{ TUITranslateService.t("TUIChat.重新编辑") }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watchEffect, ref } from '../../../../adapter-vue';
+import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+const props = defineProps({
+  isEdit: {
+    type: Boolean,
+    default: () => false,
+  },
+  messageItem: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const message = ref<IMessageModel>();
+const isEditMsg = ref(false);
+const emits = defineEmits(['messageEdit']);
+
+watchEffect(() => {
+  message.value = props.messageItem;
+  isEditMsg.value = props.isEdit;
+});
+const messageEdit = () => {
+  emits('messageEdit');
+};
+</script>
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+
+.revoke {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  color: #999;
+  font-size: 12px;
+  margin-bottom: 10px;
+  white-space: pre;
+
+  .edit {
+    padding: 0 5px;
+    color: #006eff;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/read-receipt-panel/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/read-receipt-panel/index.vue
new file mode 100644
index 00000000..2729512a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/read-receipt-panel/index.vue
@@ -0,0 +1,456 @@
+<template>
+  <Overlay
+    :maskColor="'transparent'"
+    @onOverlayClick="closeReadReceiptPanel"
+  >
+    <div
+      :class="{
+        'read-receipt-panel': true,
+        'read-receipt-panel-mobile': isMobile,
+        'read-receipt-panel-uni': isUniFrameWork,
+        'read-receipt-panel-close-mobile': isMobile && isPanelClose,
+      }"
+    >
+      <div class="header">
+        <div class="header-text">
+          {{ TUITranslateService.t("TUIChat.消息详情") }}
+        </div>
+        <div class="header-close-icon">
+          <Icon
+            size="12px"
+            hotAreaSize="8"
+            :file="closeIcon"
+            @onClick="closeReadReceiptPanel"
+          />
+        </div>
+      </div>
+      <div class="read-status-counter-container">
+        <div
+          v-for="tabName in tabNameList"
+          :key="tabName"
+          :class="{
+            'read-status-counter': true,
+            'active': tabName === currentTabName,
+          }"
+          @click="toggleTabName(tabName)"
+        >
+          <div class="status-text">
+            {{ tabInfo[tabName].tabName }}
+          </div>
+          <div class="status-count">
+            {{ tabInfo[tabName].count === undefined ? "" : tabInfo[tabName].count }}
+          </div>
+        </div>
+      </div>
+      <div class="read-status-member-list">
+        <div
+          v-if="tabInfo[currentTabName].count === 0 && isFirstLoadFinished"
+          class="empty-list-tip"
+        >
+          - {{ TUITranslateService.t('TUIChat.空') }} -
+        </div>
+        <template v-else-if="isFirstLoadFinished">
+          <template v-if="currentTabName === 'unread'">
+            <div
+              v-for="item in tabInfo[currentTabName].memberList"
+              :key="item.userID"
+              class="read-status-member-container"
+            >
+              <Avatar
+                class="read-status-avatar"
+                useSkeletonAnimation
+                :url="item.avatar || ''"
+              />
+              <div class="username">
+                {{ item.nick || item.userID }}
+              </div>
+            </div>
+          </template>
+          <template v-if="currentTabName === 'read'">
+            <div
+              v-for="item in tabInfo[currentTabName].memberList"
+              :key="item.userID"
+              class="read-status-member-container"
+            >
+              <Avatar
+                class="read-status-avatar"
+                useSkeletonAnimation
+                :url="item.avatar"
+              />
+              <div class="username">
+                {{ item.nick || item.userID }}
+              </div>
+            </div>
+          </template>
+        </template>
+        <div
+          v-if="isFirstLoadFinished"
+          class="fetch-more-container"
+        >
+          <FetchMore
+            :isFetching="isPullDownFetching"
+            :isTerminateObserve="isStopFetchMore"
+            @onExposed="pullDownFetchMoreData"
+          />
+        </div>
+      </div>
+    </div>
+  </Overlay>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, nextTick } from '../../../../adapter-vue';
+
+import { IMessageModel, TUIStore, TUIChatService, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import closeIcon from '../../../../assets/icon/icon-close.svg';
+import Icon from '../../../common/Icon.vue';
+import Overlay from '../../../common/Overlay/index.vue';
+import Avatar from '../../../common/Avatar/index.vue';
+import FetchMore from '../../../common/FetchMore/index.vue';
+import type { IGroupMessageReadMemberData, IMemberData, ITabInfo, TabName } from './interface';
+import { isMobile, isUniFrameWork } from '../../../../utils/env';
+
+type ReadType = 'unread' | 'read' | 'all';
+
+interface IProps {
+  message: IMessageModel;
+}
+
+interface IEmits {
+  (key: 'setReadReceiptPanelVisible', visible: boolean, message?: IMessageModel): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({}) as IMessageModel,
+});
+
+let lastUnreadCursor: string = '';
+let lastReadCursor: string = '';
+const tabNameList: TabName[] = ['unread', 'read'];
+const isListFetchCompleted: Record<TabName, boolean> = {
+  unread: false,
+  read: false,
+  close: false,
+};
+
+const isPullDownFetching = ref<boolean>(false);
+const isPanelClose = ref<boolean>(false);
+const isFirstLoadFinished = ref<boolean>(false);
+const isStopFetchMore = ref<boolean>(false);
+const currentTabName = ref<TabName>('unread');
+const tabInfo = ref<ITabInfo>(generateInitalTabInfo());
+
+onMounted(async () => {
+  await initAndRefetchReceiptInfomation();
+  nextTick(() => {
+    isFirstLoadFinished.value = true;
+  });
+});
+
+watch(
+  () => props.message.readReceiptInfo.readCount,
+  () => {
+    initAndRefetchReceiptInfomation();
+  },
+);
+
+async function fetchGroupMessageRecriptMemberListByType(readType: ReadType = 'all') {
+  const message = TUIStore.getMessageModel(props.message.ID);
+
+  let unreadResult = {} as IGroupMessageReadMemberData;
+  let readResult = {} as IGroupMessageReadMemberData;
+
+  if (readType === 'all' || readType === 'unread') {
+    unreadResult = await TUIChatService.getGroupMessageReadMemberList({
+      message,
+      filter: 1,
+      cursor: lastUnreadCursor,
+      count: 100,
+    });
+    if (unreadResult) {
+      lastUnreadCursor = unreadResult.data.cursor;
+      if (unreadResult.data.isCompleted) {
+        isListFetchCompleted.unread = true;
+      }
+    }
+  }
+
+  if (readType === 'all' || readType === 'read') {
+    readResult = await TUIChatService.getGroupMessageReadMemberList({
+      message,
+      filter: 0,
+      cursor: lastReadCursor,
+      count: 100,
+    });
+    if (readResult) {
+      lastReadCursor = readResult.data.cursor;
+      if (readResult.data.isCompleted) {
+        isListFetchCompleted.read = true;
+      }
+    }
+  }
+
+  // Fetch the total number of read and unread users
+  const { unreadCount: totalUnreadCount, readCount: totalReadCount } = message.readReceiptInfo;
+
+  return {
+    unreadResult: {
+      count: totalUnreadCount,
+      ...unreadResult.data,
+    },
+    readResult: {
+      count: totalReadCount,
+      ...readResult.data,
+    },
+  };
+}
+
+async function pullDownFetchMoreData() {
+  /**
+   * Use isPullDownFetching to control the state of the FetchMore component
+   * Also, implement locking for intersectionObserver under uniapp
+   * Because there is no isIntersecting in uniapp, it is impossible to determine whether the observed element has entered or exited the observation area
+  */
+  if (isListFetchCompleted[currentTabName.value] || isPullDownFetching.value) {
+    return;
+  }
+  isPullDownFetching.value = true;
+  if (currentTabName.value === 'unread' || currentTabName.value === 'read') {
+    const { unreadResult, readResult } = await fetchGroupMessageRecriptMemberListByType(currentTabName.value);
+    checkStopFetchMore();
+    try {
+      tabInfo.value.unread.memberList = tabInfo.value.unread.memberList.concat(unreadResult.unreadUserInfoList || []);
+      tabInfo.value.read.memberList = tabInfo.value.read.memberList.concat(readResult.readUserInfoList || []);
+    } finally {
+      isPullDownFetching.value = false;
+    }
+  }
+}
+
+/**
+ * Initializes and refetches receipt information.
+ *
+ * @return {Promise<void>} A promise that resolves when the function has completed.
+ */
+async function initAndRefetchReceiptInfomation(): Promise<void> {
+  lastUnreadCursor = '';
+  lastReadCursor = '';
+  isStopFetchMore.value = false;
+  isListFetchCompleted.unread = false;
+  isListFetchCompleted.read = false;
+  const { unreadResult, readResult } = await fetchGroupMessageRecriptMemberListByType('all');
+  checkStopFetchMore();
+  resetTabInfo('read', readResult.count, readResult.readUserInfoList);
+  resetTabInfo('unread', unreadResult.count, unreadResult.unreadUserInfoList);
+  resetTabInfo('close');
+}
+
+/**
+ * Checks if the fetch more operation should be stopped
+ * by IntersetctionObserver.disconnect().
+ *
+ * @return {void}
+ */
+function checkStopFetchMore(): void {
+  if (isListFetchCompleted.read && isListFetchCompleted.unread) {
+    isStopFetchMore.value = true;
+  }
+}
+
+/**
+ * Resets the information of a specific tab.
+ *
+ * @param {TabName} tabName - The name of the tab to reset.
+ * @param {number} [count] - The count to assign to the tab. Optional.
+ * @param {IMemberData[]} [memberList] - The list of members to assign to the tab. Optional.
+ * @return {void} - This function does not return anything.
+ */
+function resetTabInfo(tabName: TabName, count?: number, memberList?: IMemberData[]): void {
+  tabInfo.value[tabName].count = count;
+  tabInfo.value[tabName].memberList = memberList || [];
+}
+
+/**
+ * Generates the initial tab information.
+ *
+ * @return {ITabInfo} The initial tab information.
+ */
+function generateInitalTabInfo(): ITabInfo {
+  return {
+    read: {
+      tabName: TUITranslateService.t('TUIChat.已读'),
+      count: undefined,
+      memberList: [],
+    },
+    unread: {
+      tabName: TUITranslateService.t('TUIChat.未读'),
+      count: undefined,
+      memberList: [],
+    },
+    close: {
+      tabName: TUITranslateService.t('TUIChat.关闭'),
+      count: undefined,
+      memberList: [],
+    },
+  };
+}
+
+/**
+ * Toggles the tab name.
+ *
+ * @param {TabName} tabName - The name of the tab to toggle.
+ * @return {void} This function does not return anything.
+ */
+function toggleTabName(tabName: TabName): void {
+  currentTabName.value = tabName;
+}
+
+function closeReadReceiptPanel(): void {
+  isPanelClose.value = true;
+  setTimeout(() => {
+    emits('setReadReceiptPanelVisible', false);
+  }, 200);
+}
+</script>
+
+<style scoped lang="scss">
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.read-receipt-panel {
+  background-color: #fff;
+  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.1);
+  width: 368px;
+  height: 510px;
+  padding: 30px 20px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .header {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    .header-text {
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 30px;
+      color: #333;
+    }
+
+    .header-close-icon {
+      position: absolute;
+      right: 0;
+      margin-right: 10px;
+    }
+  }
+
+  .read-status-counter-container {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    min-height: 59px;
+    margin: 20px 40px 17.5px;
+
+    .read-status-counter {
+      justify-content: flex-start;
+      align-items: center;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+
+      .status-text {
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      .status-count {
+        margin-top: 2px;
+        font-size: 30px;
+        font-weight: bolder;
+        line-height: 37px;
+      }
+
+      &.active {
+        color: #679ce1;
+      }
+    }
+  }
+
+  .read-status-member-list {
+    flex: 1 1 auto;
+    overflow: hidden auto;
+    padding: 20px 0 0;
+    border-top: 0.5px solid #e8e8e9;
+    font-size: 14px;
+
+    .empty-list-tip {
+      align-self: center;
+      color: #b3b3b3;
+    }
+
+    .read-status-member-container {
+      flex-direction: row;
+      align-items: center;
+
+      .read-status-avatar {
+        flex: 0 0 auto;
+      }
+
+      .username {
+        margin-left: 8px;
+        line-height: 20px;
+        flex: 0 1 auto;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-all;
+        white-space: nowrap;
+      }
+
+      & + .read-status-member-container {
+        margin-top: 20px;
+      }
+    }
+
+    .fetch-more-container {
+      justify-content: center;
+      align-items: center;
+      margin-top: auto;
+    }
+  }
+}
+
+.read-receipt-panel-mobile {
+  @extend .read-receipt-panel;
+
+  box-shadow: none;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  animation: slide-in-from-right 0.3s ease-out;
+  transition: transform 0.2s ease-out;
+
+  @keyframes slide-in-from-right {
+    from {
+      transform: translateX(100%);
+    }
+  }
+}
+
+.read-receipt-panel-uni {
+  width: 100vw;
+  height: 100vh;
+}
+
+.read-receipt-panel-close-mobile {
+  transform: translateX(100%);
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/read-receipt-panel/interface.ts b/txim/src/TUIKit/components/TUIChat/message-list/read-receipt-panel/interface.ts
new file mode 100644
index 00000000..7df6df69
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/read-receipt-panel/interface.ts
@@ -0,0 +1,27 @@
+export interface IMemberData {
+  nick: string;
+  userID: string;
+  avatar: string;
+}
+
+export interface IGroupMessageReadMemberData {
+  code: number;
+  data: {
+    cursor: string;
+    isCompleted: boolean;
+    messageID: string;
+    readUserInfoList: IMemberData[];
+    unreadUserInfoList: IMemberData[];
+  };
+}
+
+export type ITabInfo = Record<
+  TabName,
+  {
+    tabName: string;
+    count: number | undefined;
+    memberList: IMemberData[];
+  }
+>;
+
+export type TabName = 'read' | 'unread' | 'close';
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/scroll-button/index.vue b/txim/src/TUIKit/components/TUIChat/message-list/scroll-button/index.vue
new file mode 100644
index 00000000..0ccb56d9
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/scroll-button/index.vue
@@ -0,0 +1,176 @@
+<template>
+  <div
+    v-if="isScrollButtonVisible"
+    class="scroll-button"
+    @click="scrollToMessageListBottom"
+  >
+    <Icon
+      width="10px"
+      height="10px"
+      :file="doubleArrowIcon"
+    />
+    <div class="scroll-button-text">
+      {{ scrollButtonContent }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, computed, watch } from '../../../../adapter-vue';
+import {
+  TUIStore,
+  StoreName,
+  IMessageModel,
+  IConversationModel,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../common/Icon.vue';
+import doubleArrowIcon from '../../../../assets/icon/double-arrow.svg';
+import { getBoundingClientRect } from '@tencentcloud/universal-api';
+import { JSONToObject } from '../../../../utils';
+
+interface IEmits {
+  (key: 'scrollToLatestMessage'): void;
+}
+const emits = defineEmits<IEmits>();
+
+const messageList = ref<IMessageModel[]>([]);
+const currentConversationID = ref<string>('');
+const currentLastMessageTime = ref<number>(0);
+const newMessageCount = ref<number>(0);
+const isScrollOverOneScreen = ref<boolean>(false);
+const isExistLastMessage = ref<boolean>(false);
+const isScrollButtonVisible = ref<boolean>(false);
+const scrollButtonContent = computed(() =>
+  newMessageCount.value ? `${newMessageCount.value}${TUITranslateService.t('TUIChat.条新消息')}` : TUITranslateService.t('TUIChat.回到最新位置'),
+);
+
+watch(() => [isScrollOverOneScreen.value, isExistLastMessage.value],
+  () => {
+    isScrollButtonVisible.value = isScrollOverOneScreen.value || isExistLastMessage.value;
+    if (!isScrollButtonVisible.value) {
+      resetNewMessageCount();
+    }
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CHAT, {
+    messageList: onMessageListUpdated,
+    newMessageList: onNewMessageListUpdated,
+  });
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CHAT, {
+    messageList: onMessageListUpdated,
+    newMessageList: onNewMessageListUpdated,
+  });
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdated,
+  });
+});
+
+function isTypingMessage(message: IMessageModel): boolean {
+  return JSONToObject(message.payload?.data)?.businessID === 'user_typing_status';
+}
+
+function onMessageListUpdated(newMessageList: IMessageModel[]) {
+  messageList.value = newMessageList || [];
+  const lastMessage = messageList.value?.[messageList.value?.length - 1];
+  isExistLastMessage.value = !!(
+    lastMessage && lastMessage?.time < currentLastMessageTime?.value
+  );
+}
+
+function onNewMessageListUpdated(newMessageList: IMessageModel[]) {
+  if (Array.isArray(newMessageList) && isScrollButtonVisible.value) {
+    newMessageList.forEach((message: IMessageModel) => {
+      if (message && message.conversationID === currentConversationID.value && !message.isDeleted && !message.isRevoked && !isTypingMessage(message)) {
+        newMessageCount.value += 1;
+      }
+    });
+  }
+}
+
+function onCurrentConversationUpdated(conversation: IConversationModel | undefined) {
+  if (conversation?.conversationID !== currentConversationID.value) {
+    resetNewMessageCount();
+  }
+  currentConversationID.value = conversation?.conversationID || '';
+  currentLastMessageTime.value = conversation?.lastMessage?.lastTime || 0;
+}
+
+// When the scroll height of the message list upwards is greater than one screen, show scrolling to the latest tips.
+async function judgeScrollOverOneScreen(e: Event) {
+  if (e.target) {
+    try {
+      const { height } = await getBoundingClientRect(`#${(e.target as HTMLElement)?.id}`, 'messageList') || {};
+      const scrollHeight = (e.target as HTMLElement)?.scrollHeight || (e.detail as HTMLElement)?.scrollHeight;
+      const scrollTop = (e.target as HTMLElement)?.scrollTop || (e.detail as HTMLElement)?.scrollTop || 0;
+      // while scroll over one screen show this scroll button.
+      if (scrollHeight - scrollTop > 2 * height) {
+        isScrollOverOneScreen.value = true;
+        return;
+      }
+      isScrollOverOneScreen.value = false;
+    } catch (error) {
+      isScrollOverOneScreen.value = false;
+    }
+  }
+}
+
+// reset messageSource
+function resetMessageSource() {
+  if (TUIStore.getData(StoreName.CHAT, 'messageSource') !== undefined) {
+    TUIStore.update(StoreName.CHAT, 'messageSource', undefined);
+  }
+}
+
+// reset newMessageCount
+function resetNewMessageCount() {
+  newMessageCount.value = 0;
+}
+
+function scrollToMessageListBottom() {
+  resetMessageSource();
+  resetNewMessageCount();
+  emits('scrollToLatestMessage');
+}
+
+defineExpose({
+  judgeScrollOverOneScreen,
+  isScrollButtonVisible,
+});
+</script>
+
+<style scoped lang="scss">
+.scroll-button {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  width: 92px;
+  height: 28px;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 4px 12px -5px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+
+  &-text {
+    font-family: PingFangSC-Regular, system-ui;
+    font-size: 10px;
+    color: #147aff;
+    margin-left: 3px;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/style/color.scss b/txim/src/TUIKit/components/TUIChat/message-list/style/color.scss
new file mode 100644
index 00000000..bc7c6631
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/style/color.scss
@@ -0,0 +1,32 @@
+.tui-chat {
+  .tui-message-list {
+    .message-more {
+      color: #999;
+      cursor: pointer;
+    }
+  }
+
+  .image-dialog {
+    background: rgba(0, 0, 0, 0.6);
+
+    header {
+      background: rgba(0,0,0,0.49);
+    }
+  }
+}
+
+.tui-chat-h5 {
+  .tui-chat-header {
+    background: #FFF;
+  }
+
+  .tui-chat-footer {
+    background: #FFF;
+
+    .input {
+      input {
+        background: #F4F5F9;
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/style/h5.scss b/txim/src/TUIKit/components/TUIChat/message-list/style/h5.scss
new file mode 100644
index 00000000..298ec766
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/style/h5.scss
@@ -0,0 +1,16 @@
+.tui-chat-h5 {
+  flex: 1;
+  position: static;
+
+  .tui-chat-main {
+    .tui-message-list {
+      height: 100%;
+    }
+
+    .message-more {
+      color: #999;
+      cursor: pointer;
+      font-size: 14px;
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/style/index.scss b/txim/src/TUIKit/components/TUIChat/message-list/style/index.scss
new file mode 100644
index 00000000..ac76ca8d
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/style/index.scss
@@ -0,0 +1,11 @@
+@import "../../../../assets/styles/common";
+@import "./color";
+@import "./web";
+@import "./h5";
+
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
diff --git a/txim/src/TUIKit/components/TUIChat/message-list/style/web.scss b/txim/src/TUIKit/components/TUIChat/message-list/style/web.scss
new file mode 100644
index 00000000..529b0e7f
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/message-list/style/web.scss
@@ -0,0 +1,177 @@
+.tui-chat {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &-main {
+    min-height: 0;
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .tui-chat-safe-tips {
+      padding: 12px 20px;
+      background-color: rgba(255, 149, 0, 0.1);
+      color: #ff8c39;
+      line-height: 18px;
+      font-family: PingFangSC-Regular;
+      font-style: normal;
+      font-weight: 400;
+      text-align: justify;
+      font-size: 12px;
+
+      a {
+        color: #006eff;
+        float: right;
+      }
+    }
+
+    .tui-chat-application-tips {
+      text-align: center;
+      width: 100%;
+      background: #fce4d3;
+      padding: 2px;
+      font-size: 12px;
+    }
+
+    .application-tips-btn {
+      color: #006eff;
+      padding-left: 10px;
+    }
+
+    .tui-message-list {
+      flex: 1;
+      height: 100%;
+      overflow: hidden auto;
+
+      .message-more {
+        font-size: 14px;
+        padding: 5px;
+        text-align: center;
+      }
+
+      .to-bottom-tip {
+        position: sticky;
+        bottom: 10px;
+        left: 100%;
+        margin-right: 15px;
+        width: 92px;
+        height: 28px;
+        padding: 0 5px;
+        background: #fff;
+        border: 1px solid #e0e0e0;
+        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        border-radius: 3px;
+        cursor: pointer;
+
+        &-text {
+          font-family: PingFangSC-Regular;
+          font-weight: 400;
+          font-size: 10px;
+          color: #147aff;
+          letter-spacing: 0;
+          text-align: center;
+          padding-left: 3px;
+        }
+      }
+
+      .message-li {
+        &:first-child {
+          margin-top: 5px;
+        }
+
+        display: flex;
+        flex-direction: column;
+
+        .message-item {
+          display: flex;
+          position: relative;
+          flex-direction: column;
+
+          .message-tool {
+            z-index: 5;
+            position: absolute;
+            cursor: pointer;
+            transform: translateY(-100%);
+          }
+
+          .message-tool-out {
+            right: 30px;
+            left: auto;
+          }
+
+          .message-tool-in {
+            left: 30px;
+            right: auto;
+          }
+
+          .message-tool-bottom {
+            z-index: 5;
+            bottom: 0;
+            transform: translateY(100%);
+          }
+        }
+
+        .message-label {
+          max-width: 50px;
+        }
+      }
+
+      .right {
+        flex-direction: row-reverse;
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  .disabled {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.image-dialog {
+  position: fixed;
+  z-index: 5;
+  width: 100vw;
+  height: calc(100vh - 63px);
+  top: 63px;
+  left: 0;
+
+  header {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 140px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #9a999c;
+}
diff --git a/txim/src/TUIKit/components/TUIChat/mulitple-select-panel/index.vue b/txim/src/TUIKit/components/TUIChat/mulitple-select-panel/index.vue
new file mode 100644
index 00000000..467cb233
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/mulitple-select-panel/index.vue
@@ -0,0 +1,134 @@
+<template>
+  <div
+    :class="{
+      'mulitple-select-panel': true,
+      'mulitple-select-panel-mobile': isMobile,
+    }"
+  >
+    <div
+      class="forward-button"
+      @click="oneByOneForwardMessage"
+    >
+      <Icon
+        :file="ForwardEachIcon"
+        :size="iconSize"
+      />
+      <span
+        :class="{
+          'forward-button-text': true,
+          'forward-button-text-mobile': isMobile,
+        }"
+      >{{ TUITranslateService.t('TUIChat.逐条转发') }}</span>
+    </div>
+    <div
+      class="forward-button"
+      @click="mergeForwardMessage"
+    >
+      <Icon
+        :file="ForwardMergeIcon"
+        :size="iconSize"
+      />
+      <span
+        :class="{
+          'forward-button-text': true,
+          'forward-button-text-mobile': isMobile,
+        }"
+      >{{ TUITranslateService.t('TUIChat.合并转发') }}</span>
+    </div>
+    <div
+      class="forward-button"
+      @click="cancelMultipleSelect"
+    >
+      <Icon
+        class="cancel-button-icon"
+        :file="AddIcon"
+        :size="iconSize"
+      />
+      <span
+        :class="{
+          'forward-button-text': true,
+          'forward-button-text-mobile': isMobile,
+        }"
+      >
+        {{ TUITranslateService.t('TUIChat.取消') }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from '../../../adapter-vue';
+import {
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../common/Icon.vue';
+import ForwardEachIcon from '../../../assets/icon/forward-each.svg';
+import ForwardMergeIcon from '../../../assets/icon/forward-merge.svg';
+import AddIcon from '../../../assets/icon/add-circle.svg';
+import { isMobile } from '../../../utils/env';
+
+interface IEmits {
+  (key: 'oneByOneForwardMessage'): void;
+  (key: 'mergeForwardMessage'): void;
+  (key: 'toggleMultipleSelectMode'): void;
+}
+
+const emits = defineEmits<IEmits>();
+
+const iconSize = ref(isMobile ? '25px' : '30px');
+
+function oneByOneForwardMessage() {
+  emits('oneByOneForwardMessage');
+}
+
+function mergeForwardMessage() {
+  emits('mergeForwardMessage');
+}
+
+function cancelMultipleSelect() {
+  emits('toggleMultipleSelectMode');
+}
+</script>
+
+<style lang="scss" scoped>
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.mulitple-select-panel {
+  height: 196px;
+  border-top: 1px solid #ebebeb;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #EBF0F6;
+
+  &-mobile {
+    height: 64px;
+    padding-bottom: 15px;
+    flex-direction: row;
+    align-items: flex-end;
+  }
+}
+
+.forward-button {
+  justify-content: center;
+  align-items: center;
+
+  &-text {
+    margin-top: 8px;
+    font-size: 12px;
+
+    &-mobile {
+      margin-top: 2px;
+    }
+  }
+
+  .cancel-button-icon {
+    transform: rotate(45deg);
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/const.ts b/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/const.ts
new file mode 100644
index 00000000..b711f99b
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/const.ts
@@ -0,0 +1,17 @@
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+export const DEFAULT_DESC: any = {
+  [TUIChatEngine.TYPES.MSG_TEXT]: '[文本]',
+  [TUIChatEngine.TYPES.MSG_FACE]: '[动画表情]',
+  [TUIChatEngine.TYPES.MSG_IMAGE]: '[图片]',
+  [TUIChatEngine.TYPES.MSG_FILE]: '[文件]',
+  [TUIChatEngine.TYPES.MSG_AUDIO]: '[语音]',
+  [TUIChatEngine.TYPES.MSG_VIDEO]: '[视频]',
+  [TUIChatEngine.TYPES.MSG_LOCATION]: '[地理位置]',
+  [TUIChatEngine.TYPES.MSG_MERGER]: '[聊天记录]',
+  [TUIChatEngine.TYPES.MSG_CUSTOM]: '[自定义消息]',
+};
+
+export enum PUSH_SCENE {
+  CHAT = 'chat',
+  CALL = 'call',
+}
diff --git a/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/index.ts b/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/index.ts
new file mode 100644
index 00000000..a0b6184b
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/index.ts
@@ -0,0 +1,6 @@
+import OfflinePushInfoManager from './offlinePushInfoManager';
+
+export * from './const';
+export * from './interface';
+
+export default OfflinePushInfoManager.getInstance();
diff --git a/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/info.ts b/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/info.ts
new file mode 100644
index 00000000..05bf3ba2
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/info.ts
@@ -0,0 +1,8 @@
+import { IChatOfflinePushInfo, ICallOfflinePushInfo } from './interface';
+
+export const chatOfflinePushInfo: IChatOfflinePushInfo = {
+  androidInfo: {},
+  apnsInfo: {},
+};
+
+export const callOfflinePushInfo: ICallOfflinePushInfo = {};
diff --git a/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/interface.ts b/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/interface.ts
new file mode 100644
index 00000000..d7f8da51
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/interface.ts
@@ -0,0 +1,49 @@
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+
+export interface IOfflinePushInfoCreateParams {
+  conversation: IConversationModel;
+  payload?: any;
+  messageType: string;
+}
+
+export interface IOfflinePushApnsInfo {
+  sound?: string;
+  ignoreIOSBadge?: boolean;
+  disableVoipPush?: boolean;
+  image?: string;
+}
+
+export interface IOfflinePushAndroidInfo {
+  sound?: string;
+  XiaoMiChannelID?: string;
+  OPPOChannelID?: string;
+  FCMChannelID?: string;
+  VIVOClassification?: number;
+  VIVOCategory?: string;
+  HuaWeiCategory?: string;
+  HuaWeiImage?: string;
+  HonorImage?: string;
+  GoogleImage?: string;
+}
+
+// https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#sendMessage
+export interface IChatOfflinePushInfo {
+  title?: string;
+  description?: string;
+  extension?: string;
+  androidInfo?: IOfflinePushAndroidInfo;
+  apnsInfo?: IOfflinePushApnsInfo;
+}
+
+// doc: https://cloud.tencent.com/document/product/269/105713
+export interface ICallOfflinePushInfo {
+  title?: string;
+  description?: string;
+  iOSSound?: string;
+  androidSound?: string;
+  androidOPPOChannelID?: string;
+  androidXiaoMiChannelID?: string;
+  androidFCMChannelID?: string;
+  ignoreIOSBadge?: string;
+  isDisablePush?: string;
+}
diff --git a/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/offlinePushInfoManager.ts b/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/offlinePushInfoManager.ts
new file mode 100644
index 00000000..107c1b10
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/offlinePushInfoManager/offlinePushInfoManager.ts
@@ -0,0 +1,76 @@
+import TUIChatEngine, { IConversationModel, StoreName, TUIStore, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { transformTextWithKeysToEmojiNames } from '../emoji-config';
+import {
+  IChatOfflinePushInfo,
+  IOfflinePushInfoCreateParams,
+} from './interface';
+import { chatOfflinePushInfo, callOfflinePushInfo } from './info';
+import { DEFAULT_DESC, PUSH_SCENE } from './const';
+
+class OfflinePushInfoManager {
+  private name = 'OfflinePushInfoManager';
+  private static instance: OfflinePushInfoManager | null = null;
+
+  private offlinePushInfo: any = {};
+
+  private constructor() {
+    this.offlinePushInfo = {
+      [PUSH_SCENE.CHAT]: chatOfflinePushInfo,
+      [PUSH_SCENE.CALL]: callOfflinePushInfo,
+    };
+  }
+
+  public static getInstance(): OfflinePushInfoManager {
+    if (!OfflinePushInfoManager.instance) {
+      OfflinePushInfoManager.instance = new OfflinePushInfoManager();
+    }
+    return OfflinePushInfoManager.instance;
+  }
+
+  public getOfflinePushInfo(scene: PUSH_SCENE) {
+    if (!Object.values(PUSH_SCENE).includes(scene)) {
+      console.error(`${this.name} getOfflinePushInfo scene: ${scene} is invalid`);
+      return null;
+    }
+    return this.offlinePushInfo[scene];
+  }
+
+  private genTitle(conversation: IConversationModel, userInfo: any) {
+    let title = conversation?.getShowName();
+    if (conversation.type === TUIChatEngine.TYPES.CONV_C2C) {
+      title = userInfo?.nick || userInfo?.userID;
+    }
+    return title;
+  }
+
+  private genDesc(messageType: string, payload: any) {
+    let desc = '';
+    if (messageType === TUIChatEngine.TYPES.MSG_TEXT) {
+      desc = transformTextWithKeysToEmojiNames(payload.text);
+    }
+    if (messageType === TUIChatEngine.TYPES.MSG_CUSTOM) {
+      desc = payload.description;
+    }
+    return desc || TUITranslateService.t(`TUIChat.${DEFAULT_DESC[messageType]}`);
+  }
+
+  public create(options: IOfflinePushInfoCreateParams): IChatOfflinePushInfo {
+    const { conversation, messageType = '', payload = {} } = options || {};
+    const userInfo = TUIStore.getData(StoreName.USER, 'userProfile');
+    const entity = {
+      sender: conversation.type === TUIChatEngine.TYPES.CONV_GROUP ? conversation.groupProfile?.groupID : userInfo?.userID,
+      nickName: userInfo?.nick,
+      chatType: conversation.type === TUIChatEngine.TYPES.CONV_GROUP ? 2 : 1,
+      version: 1,
+      action: 1,
+    };
+    return {
+      title: this.genTitle(conversation, userInfo),
+      description: this.genDesc(messageType, payload),
+      extension: JSON.stringify({ entity }),
+      ...this.offlinePushInfo[PUSH_SCENE.CHAT],
+    };
+  }
+}
+
+export default OfflinePushInfoManager;
diff --git a/txim/src/TUIKit/components/TUIChat/server.ts b/txim/src/TUIKit/components/TUIChat/server.ts
new file mode 100644
index 00000000..d8cb78a8
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/server.ts
@@ -0,0 +1,91 @@
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import {
+  IMessageModel,
+  TUIStore,
+  StoreName,
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
+import TUIChatConfig from './config';
+
+export default class TUIChatServer {
+  public currentConversationID: string = '';
+  public currentMessageList: IMessageModel[] = [];
+
+  constructor() {
+    // register service
+    TUICore.registerService(TUIConstants.TUIChat.SERVICE.NAME, this);
+    // register event
+    TUICore.registerEvent(TUIConstants.TUITheme.EVENT.THEME_CHANGED, TUIConstants.TUITheme.EVENT_SUB_KEY.CHANGE_SUCCESS, this);
+    TUICore.registerEvent(TUIConstants.TUIChat.EVENT.CHAT_TYPE_CHANGED, TUIConstants.TUIChat.EVENT_SUB_KEY.CHANGE_SUCCESS, this);
+    // watch current conversationID
+    TUIStore.watch(StoreName.CONV, {
+      currentConversationID: (id: string) => {
+        this.currentConversationID = id;
+      },
+    });
+  }
+
+  public onCall(method: string, params: any, callback: any): any {
+    let message;
+    switch (method) {
+      case TUIConstants.TUIChat.SERVICE.METHOD.UPDATE_MESSAGE_LIST:
+        message = params.message;
+        // Two screen-up situations
+        // 1. If the call message conversationID is currentConversation,
+        // You need to use UPDATE_MESSAGE_LIST to update the messageList of TUIStore in the engine to display it on the screen
+        // (because you cannot get the messages you sent at this time)
+        // 2. If the call message conversationID is not currentConversation,
+        // The next time you switch to the conversation where the call message is located, getMessageList can get all the call messages you sent
+        // No need to process here
+        if (message?.conversationID === this.currentConversationID) {
+          TUIChatService.updateMessageList([message], 'push');
+        }
+        break;
+      case TUIConstants.TUIChat.SERVICE.METHOD.SEND_CUSTOM_MESSAGE:
+        TUIChatService.sendCustomMessage(params).then((res: any) => {
+          callback && callback(res);
+        });
+        break;
+      case TUIConstants.TUIChat.SERVICE.METHOD.SEND_TEXT_MESSAGE:
+        TUIChatService.sendTextMessage(params).then((res: any) => {
+          callback && callback(res);
+        });
+        break;
+      case TUIConstants.TUIChat.SERVICE.METHOD.SET_CHAT_TYPE:
+        TUIChatConfig.setChatType(params?.chatType);
+        break;
+      case TUIConstants.TUIChat.SERVICE.METHOD.CLOSE_MESSAGE_POP_MENU:
+        TUIStore.update(StoreName.CUSTOM, 'isShowMessagePopMenu', false);
+        break;
+      case TUIConstants.TUIChat.SERVICE.METHOD.UPDATE_MESSAGE_INFO:
+        TUIChatService.updateMessageInfo(params?.userInfo);
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+ * Listen for the success notification.
+ */
+  public onNotifyEvent(eventName: string, subKey: string, params?: Record<string, any>) {
+    if (eventName === TUIConstants.TUITheme.EVENT.THEME_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUITheme.EVENT_SUB_KEY.CHANGE_SUCCESS:
+          if (params?.theme) {
+            TUIChatConfig.setTheme(params.theme.toLowerCase()); // Room use 'DARK' or 'LIGHT'
+          }
+          break;
+      }
+    }
+    if (eventName === TUIConstants.TUIChat.EVENT.CHAT_TYPE_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUIChat.EVENT_SUB_KEY.CHANGE_SUCCESS:
+          if (params?.chatType) {
+            TUIChatConfig.setChatType(params?.chatType);
+          }
+          break;
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/style/h5.scss b/txim/src/TUIKit/components/TUIChat/style/h5.scss
new file mode 100644
index 00000000..42cc1eba
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/style/h5.scss
@@ -0,0 +1,47 @@
+.chat {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+}
+
+.tui-chat-h5 {
+  &-message-list {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+  }
+
+  &-message-input {
+    height: auto;
+    padding: 10px 10px 0;
+    border-top: 1px solid #eee;
+  }
+
+  &-message-input-toolbar {
+    order: 1;
+    border: none;
+  }
+}
+
+.tui-chat-uniapp {
+  &-header {
+    display: none;
+  }
+}
+
+.group-profile {
+  position: absolute;
+  top: 14%;
+  right: 0;
+  width: 50px;
+  height: 30px;
+  line-height: 30px;
+  color: #000;
+  font-size: 10px;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  padding-left: 15px;
+  z-index: 100;
+  background-color: #ccc;
+  opacity: 0.5;
+}
diff --git a/txim/src/TUIKit/components/TUIChat/style/index.scss b/txim/src/TUIKit/components/TUIChat/style/index.scss
new file mode 100644
index 00000000..65e80966
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/style/index.scss
@@ -0,0 +1,12 @@
+@import '../../../assets/styles/common';
+@import './web';
+@import './h5';
+@import './uni';
+@import './wx';
+
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
diff --git a/txim/src/TUIKit/components/TUIChat/style/uni.scss b/txim/src/TUIKit/components/TUIChat/style/uni.scss
new file mode 100644
index 00000000..2d649e47
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/style/uni.scss
@@ -0,0 +1,10 @@
+.tui-chat-uni {
+  &-message-input {
+    max-height: 370px;
+    padding: 10px;
+  }
+
+  &-message-input-toolbar {
+    z-index: 100;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/style/web.scss b/txim/src/TUIKit/components/TUIChat/style/web.scss
new file mode 100644
index 00000000..0efc1a51
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/style/web.scss
@@ -0,0 +1,46 @@
+.tui-chat {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &-default {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+  }
+
+  &-header {
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+  }
+
+  &-message-list {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+  }
+
+  &-leave-group {
+    font-size: 14px;
+    height: 160px;
+    border-top: 1px solid #efefef;
+    justify-content: center;
+    align-items: center;
+
+    &-mobile {
+      height: 50px;
+    }
+  }
+
+  &-message-input {
+    height: 160px;
+    display: flex;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/style/wx.scss b/txim/src/TUIKit/components/TUIChat/style/wx.scss
new file mode 100644
index 00000000..df03e389
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/style/wx.scss
@@ -0,0 +1,5 @@
+.tui-chat-wx {
+  &-message-input {
+    padding: 0;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/utils/chatStorage.ts b/txim/src/TUIKit/components/TUIChat/utils/chatStorage.ts
new file mode 100644
index 00000000..a242dd21
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/utils/chatStorage.ts
@@ -0,0 +1,70 @@
+import { isUniFrameWork } from '../../../utils/env';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+
+interface IChatStorage {
+  getChatStorage(key: string): any;
+  setChatStorage(key: string, value: any): void;
+}
+
+class ChatStorage implements IChatStorage {
+  private static instance: ChatStorage | null = null;
+  private static CHAT_STORAGE_KEY: string = 'TUI_CHAT_STORAGE';
+
+  private chatStorage: Record<string, any> | null = null;
+
+  private constructor() {}
+
+  public static getInstance(): ChatStorage {
+    if (!ChatStorage.instance) {
+      ChatStorage.instance = new ChatStorage();
+    }
+    return ChatStorage.instance;
+  }
+
+  public getChatStorage(key: string): any | undefined {
+    if (!this.chatStorage) {
+      this.chatStorage = this.getChatStorageFromLocalStorage();
+    }
+    if (key) {
+      return this.chatStorage[key];
+    } else {
+      throw new Error('No key provided');
+    }
+  }
+
+  public setChatStorage(key: string, value: any): void {
+    if (!this.chatStorage) {
+      this.chatStorage = this.getChatStorageFromLocalStorage();
+    }
+    this.chatStorage[key] = value;
+    try {
+      if (isUniFrameWork) {
+        TUIGlobal.setStorageSync(ChatStorage.CHAT_STORAGE_KEY, JSON.stringify(this.chatStorage));
+      } else {
+        localStorage.setItem(ChatStorage.CHAT_STORAGE_KEY, JSON.stringify(this.chatStorage));
+      }
+    } catch (error) {
+      throw new Error('Fail to set chat storage');
+    }
+  }
+
+  private getChatStorageFromLocalStorage(): Record<string, any> {
+    let chatStorageString: string = '';
+    if (isUniFrameWork) {
+      chatStorageString = TUIGlobal.getStorageSync(ChatStorage.CHAT_STORAGE_KEY) || '';
+    } else {
+      chatStorageString = localStorage.getItem(ChatStorage.CHAT_STORAGE_KEY) || '';
+    }
+    if (!chatStorageString) {
+      return {};
+    }
+    try {
+      this.chatStorage = JSON.parse(chatStorageString);
+    } catch (error) {
+      this.chatStorage = {};
+    }
+    return this.chatStorage as Record<string, any>;
+  }
+}
+
+export default ChatStorage.getInstance();
diff --git a/txim/src/TUIKit/components/TUIChat/utils/conversationDraft.ts b/txim/src/TUIKit/components/TUIChat/utils/conversationDraft.ts
new file mode 100644
index 00000000..4e8b1679
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/utils/conversationDraft.ts
@@ -0,0 +1,86 @@
+import {
+  IMessageModel,
+  SetConversationDraftParams,
+  StoreName,
+  TUIConversationService,
+  TUIStore,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import { transformTextWithKeysToEmojiNames } from '../emoji-config';
+import { JSONToObject } from '../../../utils/index';
+
+class ConversationDraftManager {
+  private static instance: ConversationDraftManager | null = null;
+  private quoteMessageMap = new Map<string, IMessageModel>();
+
+  private constructor() { }
+
+  public static getInstance(): ConversationDraftManager {
+    if (!ConversationDraftManager.instance) {
+      ConversationDraftManager.instance = new ConversationDraftManager();
+    }
+    return ConversationDraftManager.instance;
+  }
+
+  public setStore(conversationID: string, draftContent: string, abstract: string, quoteMessage?: { type: 'quote' | 'reply'; message: IMessageModel }) {
+    if (conversationID && (this.isEditorNotEmpty(draftContent) || quoteMessage?.message?.ID)) {
+      let additionalDraftInfo = {};
+      if (quoteMessage?.message?.ID) {
+        this.quoteMessageMap.set(quoteMessage.message.ID, quoteMessage.message);
+        additionalDraftInfo = { messageID: quoteMessage.message.ID, type: quoteMessage.type };
+      }
+      const draftParams: SetConversationDraftParams = {
+        conversationID: conversationID,
+        draftInfo: {
+          html: draftContent,
+          abstract: abstract,
+          ...additionalDraftInfo,
+        },
+      };
+      TUIConversationService.setConversationDraft(draftParams);
+      TUIStore.update(StoreName.CHAT, 'quoteMessage', { message: undefined, type: 'quote' });
+    }
+  }
+
+  public getStore(conversationID: string, setEditorContentCallback: (...args: any[]) => void) {
+    const conversation = TUIStore.getConversationModel(conversationID);
+    if (!conversation) {
+      return;
+    }
+    if (conversation.conversationID && conversation.draftText) {
+      const draftObject = JSONToObject(conversation.draftText);
+      TUIStore.update(StoreName.CHAT, 'quoteMessage', { message: this.quoteMessageMap.get(draftObject.messageID) || undefined, type: draftObject.type });
+      setEditorContentCallback(draftObject.html);
+    }
+    TUIConversationService.setConversationDraft({ conversationID: conversation.conversationID });
+  }
+
+  public generateAbstract(editorContent: Array<{ type: string; payload: { text?: string; file?: File } }>): string {
+    let abstract = '';
+    editorContent?.forEach((item: { type: string; payload: { text?: string; file?: File } }) => {
+      switch (item.type) {
+        case 'text':
+          abstract += transformTextWithKeysToEmojiNames(item.payload.text || '');
+          break;
+        case 'image':
+          abstract += TUITranslateService.t('TUIChat.图片');
+          break;
+        case 'video':
+          abstract += TUITranslateService.t('TUIChat.视频');
+          break;
+        case 'file':
+          abstract += TUITranslateService.t('TUIChat.文件');
+          break;
+        default:
+          break;
+      }
+    });
+    return abstract;
+  }
+
+  private isEditorNotEmpty(editorHTML: string) {
+    return editorHTML && !editorHTML.includes('is-empty') && editorHTML !== '<p></p>';
+  }
+}
+
+export default ConversationDraftManager.getInstance();
diff --git a/txim/src/TUIKit/components/TUIChat/utils/convertVoiceToText.ts b/txim/src/TUIKit/components/TUIChat/utils/convertVoiceToText.ts
new file mode 100644
index 00000000..35e00bad
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/utils/convertVoiceToText.ts
@@ -0,0 +1,62 @@
+import {
+  IMessageModel,
+  TUIChatService,
+  TUIStore,
+} from '@tencentcloud/chat-uikit-engine';
+import { IChatResponese } from '../../../interface';
+
+class Convertor {
+  public isUseCache = true;
+  private convertCache = new Map<string, string>();
+  private static instance: Convertor | undefined = undefined;
+
+  private constructor() {}
+
+  static getInstance() {
+    if (!Convertor.instance) {
+      Convertor.instance = new Convertor();
+    }
+    return Convertor.instance;
+  }
+
+  async get(message: IMessageModel): Promise<string> {
+    // step1: check in cache if convert result exist
+    if (this.isUseCache) {
+      const cache = this.convertCache.get(message.ID);
+      if (cache !== undefined) {
+        return cache;
+      }
+    }
+
+    // step2: get message model with prototype methods
+    const currentMessage: IMessageModel = TUIStore.getMessageModel(message.ID);
+    if (!currentMessage) {
+      return Promise.reject('message not found');
+    }
+    // step3: get response from api
+    const response: IChatResponese<{ result: string }> = await TUIChatService.convertVoiceToText({
+      message: currentMessage,
+    });
+    let { data: { result } = {} } = response;
+    if (result) {
+      this.convertCache.set(currentMessage.ID, result);
+    } else {
+      result = '';
+    }
+    return result;
+  }
+
+  clear() {
+    this.convertCache.clear();
+  }
+
+  disableCache() {
+    this.isUseCache = false;
+  }
+
+  enableCache() {
+    this.isUseCache = true;
+  }
+}
+
+export const convertor = Convertor.getInstance();
diff --git a/txim/src/TUIKit/components/TUIChat/utils/copy.ts b/txim/src/TUIKit/components/TUIChat/utils/copy.ts
new file mode 100644
index 00000000..53202f94
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/utils/copy.ts
@@ -0,0 +1,149 @@
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { Toast, TOAST_TYPE } from '../../common/Toast';
+import { isH5 } from '../../../utils/env';
+
+type SavedNativeSelection = {
+  anchorNode: Node | null;
+  anchorOffset: number;
+  focusNode: Node | null;
+  focusOffset: number;
+};
+
+class CopyManager {
+  private static instance: CopyManager;
+  private savedSelection: SavedNativeSelection | null;
+
+  private constructor() {
+    this.savedSelection = null;
+  }
+
+  public static getInstance(): CopyManager {
+    if (!CopyManager.instance) {
+      CopyManager.instance = new CopyManager();
+    }
+    return CopyManager.instance;
+  }
+
+  public saveCurrentSelection() {
+    const selection = window.getSelection();
+    if (isH5 || !selection) {
+      return;
+    }
+    this.savedSelection = {
+      anchorNode: selection.anchorNode,
+      anchorOffset: selection.anchorOffset,
+      focusNode: selection.focusNode,
+      focusOffset: selection.focusOffset,
+    };
+  }
+
+  private restoreSelection() {
+    const selection = window.getSelection();
+    if (isH5 || !selection || !this.savedSelection) {
+      return;
+    }
+
+    const { anchorNode, anchorOffset, focusNode, focusOffset } = this.savedSelection;
+    if (!anchorNode || !focusNode) {
+      return;
+    }
+
+    const range = document.createRange();
+    const isForwardSelection = anchorNode === focusNode
+      ? anchorOffset <= focusOffset
+      : anchorNode.compareDocumentPosition(focusNode) & Node.DOCUMENT_POSITION_FOLLOWING;
+    if (isForwardSelection) {
+      range.setStart(anchorNode, anchorOffset);
+      range.setEnd(focusNode, focusOffset);
+    } else {
+      range.setStart(focusNode, focusOffset);
+      range.setEnd(anchorNode, anchorOffset);
+    }
+
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+
+  public async copySelection(defaultContent: string): Promise<void> {
+    this.restoreSelection();
+
+    const selection = window.getSelection();
+
+    if (isH5 || !selection || selection.rangeCount === 0) {
+      await this.copyTextOrHtml(defaultContent, 'text');
+      return;
+    }
+
+    const range = selection.getRangeAt(0);
+    const fragment = range.cloneContents();
+
+    const tempContainer = document.createElement('div');
+    tempContainer.appendChild(fragment);
+    const content = tempContainer.innerHTML || defaultContent;
+    const type = tempContainer.innerHTML ? 'html' : 'text';
+
+    await this.copyTextOrHtml(content, type);
+
+    this.savedSelection = null;
+  }
+
+  public async copyTextOrHtml(content: string, type: 'text' | 'html'): Promise<void> {
+    const mimeType = (type === 'html') ? 'text/html' : 'text/plain';
+    // prefer use clipboard api to copy node or text
+    if (navigator.clipboard) {
+      try {
+        const contentBlob = new Blob([content], { type: mimeType });
+        const clipboardItem = new ClipboardItem({ [mimeType]: contentBlob });
+        await navigator.clipboard.write([clipboardItem]);
+        Toast({
+          message: TUITranslateService.t('TUIChat.复制成功'),
+          type: TOAST_TYPE.SUCCESS,
+        });
+        return;
+      } catch (err) {
+        // ignore error
+      }
+    }
+    // if clipboard api not support, use document.execCommand
+    let tempElement: HTMLTextAreaElement | HTMLDivElement;
+    if (type === 'html') {
+      tempElement = document.createElement('div');
+      tempElement.style.position = 'fixed';
+      tempElement.style.opacity = '0';
+      tempElement.contentEditable = 'true';
+      tempElement.innerHTML = content;
+      document.body.appendChild(tempElement);
+      const range = document.createRange();
+      range.selectNodeContents(tempElement);
+      const selection = window.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+      tempElement.focus();
+    } else {
+      tempElement = document.createElement('textarea');
+      tempElement.value = content;
+      tempElement.style.position = 'fixed';
+      document.body.appendChild(tempElement);
+      tempElement.focus();
+      tempElement.select();
+    }
+
+    try {
+      document.execCommand('copy');
+      Toast({
+        message: TUITranslateService.t('TUIChat.复制成功'),
+        type: TOAST_TYPE.SUCCESS,
+      });
+    } catch (err) {
+      Toast({
+        message: TUITranslateService.t('TUIChat.此机型暂不支持复制'),
+        type: TOAST_TYPE.ERROR,
+      });
+      console.warn('use document.execCommand copy failed:', err);
+    } finally {
+      document.body.removeChild(tempElement);
+    }
+  }
+}
+
+export default CopyManager.getInstance();
diff --git a/txim/src/TUIKit/components/TUIChat/utils/sendMessage.ts b/txim/src/TUIKit/components/TUIChat/utils/sendMessage.ts
new file mode 100644
index 00000000..10795b41
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/utils/sendMessage.ts
@@ -0,0 +1,155 @@
+import TUIChatEngine, {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  IConversationModel,
+  SendMessageParams,
+} from '@tencentcloud/chat-uikit-engine';
+import { Toast, TOAST_TYPE } from '../../common/Toast/index';
+import { isEnabledMessageReadReceiptGlobal } from '../utils/utils';
+import { ITipTapEditorContent } from '../../../interface';
+import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus';
+import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../offlinePushInfoManager/index';
+
+export const sendMessageErrorCodeMap: Map<number, string> = new Map([
+  [3123, '文本包含本地审核拦截词'],
+  [4004, '图片消息失败,无效的图片格式'],
+  [4005, '文件消息失败,禁止发送违规封禁的文件'],
+  [7004, '文件不存在,请检查文件路径是否正确'],
+  [7005, '文件大小超出了限制,如果上传文件,最大限制是100MB'],
+  [8001, '消息长度超出限制,消息长度不要超过12K'],
+  [80001, '消息或者资料中文本存在敏感内容,发送失败'],
+  [80004, '消息中图片存在敏感内容,发送失败'],
+  [10017, '您已被禁止聊天'],
+]);
+
+export const createOfflinePushInfo = (conversation: IConversationModel) => {
+  const androidInfo = {};
+  const apnsInfo = {};
+  const userInfo = TUIStore.getData(StoreName.USER, 'userProfile');
+  const entity = {
+    sender: conversation.type === TUIChatEngine.TYPES.CONV_GROUP ? conversation.groupProfile?.groupID : userInfo.userID,
+    nickName: userInfo.nick,
+    chatType: conversation.type === TUIChatEngine.TYPES.CONV_GROUP ? 2 : 1,
+    version: 1,
+    action: 1,
+  };
+  return {
+    extension: JSON.stringify({ entity }),
+    androidInfo,
+    apnsInfo,
+  };
+};
+
+/**
+ * This function only processes five message types: Text/TextAt/Image/Video/File
+ * @param messageList
+ * @param currentConversation
+ */
+export const sendMessages = async (
+  messageList: ITipTapEditorContent[],
+  currentConversation: IConversationModel,
+) => {
+  // In case of messageJumping, the sent message is automatically cleared and returns to the bottom
+  if (TUIStore.getData(StoreName.CHAT, 'messageSource')) {
+    TUIStore.update(StoreName.CHAT, 'messageSource', undefined);
+  }
+  messageList?.forEach(async (content: ITipTapEditorContent) => {
+    try {
+      const options: SendMessageParams = {
+        to: currentConversation?.groupProfile?.groupID || currentConversation?.userProfile?.userID,
+        conversationType: currentConversation?.type as any,
+        payload: {},
+        needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+      };
+      // handle message typing
+      let textMessageContent;
+      const sendMessageOptions = {
+        offlinePushInfo: {},
+      };
+      const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+        conversation: currentConversation,
+        payload: content.payload,
+        messageType: '',
+      };
+      switch (content?.type) {
+        case 'text':
+          textMessageContent = JSON.parse(JSON.stringify(content.payload?.text));
+          // Do not send empty messages
+          if (!textMessageContent) {
+            break;
+          }
+          options.payload = {
+            text: textMessageContent,
+          };
+          offlinePushInfoCreateParams.messageType = TUIChatEngine.TYPES.MSG_TEXT;
+          sendMessageOptions.offlinePushInfo = OfflinePushInfoManager.create(offlinePushInfoCreateParams);
+          if (content.payload?.atUserList) {
+            options.payload.atUserList = content.payload.atUserList;
+            await TUIChatService.sendTextAtMessage(options, sendMessageOptions);
+          } else {
+            await TUIChatService.sendTextMessage(options, sendMessageOptions);
+          }
+          break;
+        case 'image':
+          options.payload = {
+            file: content.payload?.file,
+          };
+          offlinePushInfoCreateParams.messageType = TUIChatEngine.TYPES.MSG_IMAGE;
+          sendMessageOptions.offlinePushInfo = OfflinePushInfoManager.create(offlinePushInfoCreateParams);
+          await TUIChatService.sendImageMessage(options, sendMessageOptions);
+          break;
+        case 'video':
+          options.payload = {
+            file: content.payload?.file,
+          };
+          offlinePushInfoCreateParams.messageType = TUIChatEngine.TYPES.MSG_VIDEO;
+          sendMessageOptions.offlinePushInfo = OfflinePushInfoManager.create(offlinePushInfoCreateParams);
+          await TUIChatService.sendVideoMessage(options, sendMessageOptions);
+          break;
+        case 'file':
+          options.payload = {
+            file: content.payload?.file,
+          };
+          offlinePushInfoCreateParams.messageType = TUIChatEngine.TYPES.MSG_FILE;
+          sendMessageOptions.offlinePushInfo = OfflinePushInfoManager.create(offlinePushInfoCreateParams);
+          await TUIChatService.sendFileMessage(options, sendMessageOptions);
+          break;
+        default:
+          break;
+      }
+      enableSampleTaskStatus('sendMessage');
+    } catch (error: any) {
+      Toast({
+        message: sendMessageErrorCodeMap.get(error?.code)
+          ? TUITranslateService.t(`TUIChat.${sendMessageErrorCodeMap.get(error.code) as string}`)
+          : error?.message,
+        type: TOAST_TYPE.ERROR,
+      });
+      // If the message fails to be sent and the message is a reference message, clear the reference message information
+      if (TUIStore.getData(StoreName.CHAT, 'quoteMessage')) {
+        TUIStore.update(StoreName.CHAT, 'quoteMessage', {});
+      }
+    }
+  });
+};
+
+export const handleMessageWithTyping = (cloudCustomData: any) => {
+  if (!cloudCustomData) {
+    cloudCustomData = {};
+  }
+  cloudCustomData.messageFeature = {
+    needTyping: 1,
+    version: 1,
+  };
+  return cloudCustomData;
+};
+
+export const sendTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
+  if (!inputContentEmpty && !inputBlur) {
+    TUIChatService.enterTypingState();
+  } else {
+    TUIChatService.leaveTypingState();
+  }
+};
diff --git a/txim/src/TUIKit/components/TUIChat/utils/translation.ts b/txim/src/TUIKit/components/TUIChat/utils/translation.ts
new file mode 100644
index 00000000..5a4a8555
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/utils/translation.ts
@@ -0,0 +1,203 @@
+import TUIChatEngine, {
+  IMessageModel,
+  TUIChatService,
+  TUIStore,
+  TUITranslateService,
+  TUIUserService,
+} from '@tencentcloud/chat-uikit-engine';
+import { IChatResponese, IUserProfile } from '../../../interface';
+
+/**
+ * three type for origin text to be translated
+ * 1. image: small face text
+ * 2. text: plain text
+ * 3. mention: mention '@'
+ */
+interface ITextFace {
+  type: 'face';
+  value: string;
+}
+
+interface ITextPlain {
+  type: 'text';
+  value: string;
+}
+
+interface ITextAt {
+  type: 'mention';
+  value: string;
+}
+
+export type TranslationTextType = ITextFace | ITextPlain | ITextAt;
+
+class Translator {
+  public isUseCache = true;
+  private translationCache = new Map<string, TranslationTextType[]>();
+  private static instance: Translator | undefined = undefined;
+
+  private constructor() {}
+
+  static getInstance() {
+    if (!Translator.instance) {
+      Translator.instance = new Translator();
+    }
+    return Translator.instance;
+  }
+
+  async get(message: IMessageModel): Promise<TranslationTextType[]> {
+    // step1: check in cache if translation exist
+    if (this.isUseCache) {
+      const cache = this.translationCache.get(message.ID);
+      if (cache !== undefined) {
+        return cache;
+      }
+    }
+
+    // step2: get message model with prototype methods
+    const currentMessage: IMessageModel = TUIStore.getMessageModel(message.ID);
+    if (!currentMessage) {
+      return [];
+    }
+
+    const { text } = currentMessage.getMessageContent() || {};
+    const textList: TranslationTextType[] = [];
+    const splittingList = await this.getNickList(currentMessage);
+    // step3: Categorize origin messages to 'plain text', 'face', 'mention'
+    for (let i = 0; i < text.length; ++i) {
+      const item = text[i];
+      if (item.name === 'img') {
+        textList.push({ type: 'face', value: item.src });
+        continue;
+      }
+      const { transSplitingList, atNickList } = this.getSplitResult(item.text, splittingList);
+      for (let j = 0; j < transSplitingList.length; ++j) {
+        textList.push({ type: 'text', value: transSplitingList[j] });
+        if (j < atNickList.length) {
+          textList.push({ type: 'mention', value: atNickList[j] });
+        }
+      }
+    }
+
+    // step4: filter plain text to be translated
+    const needTranslateTextIndex: number[] = [];
+    const needTranslateText = textList.filter((item, index) => {
+      if (item.type === 'text' && item.value.trim() !== '') {
+        needTranslateTextIndex.push(index);
+        return true;
+      }
+      return false;
+    }).map(item => item.value);
+
+    if (needTranslateText.length === 0) {
+      this.translationCache.set(currentMessage.ID, textList);
+      return textList;
+    }
+    // step5: get final translation result
+    const translationResult = await this.getTranslationStandard(needTranslateText) as string[];
+    translationResult.forEach((item, index) => {
+      textList[needTranslateTextIndex[index]].value = item;
+    });
+
+    // step6: cache translation result
+    this.translationCache.set(currentMessage.ID, textList);
+    return textList;
+  }
+
+  /**
+   * Clears the translation cache.
+   */
+  clear() {
+    this.translationCache.clear();
+  }
+
+  disableCache() {
+    this.isUseCache = false;
+  }
+
+  enableCache() {
+    this.isUseCache = true;
+  }
+
+  private getTranslationStandard(originTextList: string[]): Promise<string[]> {
+    return new Promise((resolve, reject) => {
+      TUIChatService.translateText({
+        sourceTextList: originTextList,
+        sourceLanguage: 'auto',
+      })
+        .then((response: IChatResponese<{ translatedTextList: string[] }>) => {
+          const {
+            data: { translatedTextList },
+          } = response;
+          resolve(translatedTextList);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  }
+
+  /**
+   * the nick list is used to split the text by @ + {nick or userID}
+   * @param message
+   * @returns e.g. ['@james', '@john']
+   */
+  private async getNickList(message: IMessageModel): Promise<string[]> {
+    const splittingList: string[] = [];
+    const { atUserList = [] } = message;
+    const atAllID: string = TUIChatEngine.TYPES.MSG_AT_ALL;
+    if (atUserList.includes(atAllID)) {
+      splittingList.push(`@${TUITranslateService.t('TUIChat.所有人')}`);
+    }
+    if (atUserList.length > 0) {
+      const { data: userProfileList } = await TUIUserService.getUserProfile({ userIDList: atUserList }) as IChatResponese<IUserProfile[]>;
+      userProfileList.forEach((user) => {
+        const atNick = `@${user.nick || user.userID}`;
+        splittingList.push(atNick);
+      });
+    }
+    return [...new Set(splittingList)];
+  }
+
+  /**
+   * Splits the given text into substrings based on the provided splitString array.
+   *
+   * @param {string} text - The text to be split.
+   * @param {string[]} splitString - The array of strings to split the text by.
+   * @return {{ transSplitingList: string[]; atNickList: string[] }} - An object containing two arrays:
+   *   - transSplitingList: An array of substrings extracted from the text.
+   *   - atNickList: An array of split strings that were found in the text.
+   */
+  private getSplitResult(text: string, splitString: string[]): { transSplitingList: string[]; atNickList: string[] } {
+    let searchStartPos = 0;
+    const transSplitingList: string[] = [];
+    const atNickList: string[] = [];
+    while (searchStartPos < text.length) {
+      const nextAtCharPos = text.indexOf('@', searchStartPos);
+      if (nextAtCharPos === -1) {
+        transSplitingList.push(text.substring(searchStartPos));
+        break;
+      }
+      let found = false;
+      for (let i = 0; i < splitString.length; ++i) {
+        const pos = text.indexOf(splitString[i], nextAtCharPos);
+        if (pos !== -1 && pos === nextAtCharPos) {
+          transSplitingList.push(text.substring(searchStartPos, pos));
+          atNickList.push(splitString[i]);
+          searchStartPos = pos + splitString[i].length;
+          found = true;
+          break;
+        }
+      }
+      if (!found) {
+        transSplitingList.push(text.substring(searchStartPos));
+        break;
+      }
+    }
+    return {
+      transSplitingList,
+      atNickList,
+    };
+  }
+}
+
+export const translator = Translator.getInstance();
diff --git a/txim/src/TUIKit/components/TUIChat/utils/utils.ts b/txim/src/TUIKit/components/TUIChat/utils/utils.ts
new file mode 100644
index 00000000..62d833f6
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/utils/utils.ts
@@ -0,0 +1,161 @@
+import TUIChatEngine, { TUITranslateService, TUIStore, StoreName, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+export function deepCopy(data: any, hash = new WeakMap()) {
+  if (typeof data !== 'object' || data === null || data === undefined) {
+    return data;
+  }
+  if (hash.has(data)) {
+    return hash.get(data);
+  }
+  const newData: any = Object.create(Object.getPrototypeOf(data));
+  const dataKeys = Object.keys(data);
+  dataKeys.forEach((value) => {
+    const currentDataValue = data[value];
+    if (typeof currentDataValue !== 'object' || currentDataValue === null) {
+      newData[value] = currentDataValue;
+    } else if (Array.isArray(currentDataValue)) {
+      newData[value] = [...currentDataValue];
+    } else if (currentDataValue instanceof Set) {
+      newData[value] = new Set([...currentDataValue]);
+    } else if (currentDataValue instanceof Map) {
+      newData[value] = new Map([...currentDataValue]);
+    } else {
+      hash.set(data, data);
+      newData[value] = deepCopy(currentDataValue, hash);
+    }
+  });
+  return newData;
+}
+
+export const handleSkeletonSize = (
+  width: number,
+  height: number,
+  maxWidth: number,
+  maxHeight: number,
+): { width: number; height: number } => {
+  const widthToHeight = width / height;
+  const maxWidthToHeight = maxWidth / maxHeight;
+  if (width <= maxWidth && height <= maxHeight) {
+    return { width, height };
+  }
+  if (
+    (width <= maxWidth && height > maxHeight)
+    || (width > maxWidth && height > maxHeight && widthToHeight <= maxWidthToHeight)
+  ) {
+    return { width: width * (maxHeight / height), height: maxHeight };
+  }
+  return { width: maxWidth, height: height * (maxWidth / width) };
+};
+
+// Image loading complete
+export function getImgLoad(container: any, className: string, callback: any) {
+  const images = container?.querySelectorAll(`.${className}`) || [];
+  const promiseList = Array.prototype.slice.call(images).map((node: any) => {
+    return new Promise((resolve: any) => {
+      node.onload = () => {
+        resolve(node);
+      };
+      node.onloadeddata = () => {
+        resolve(node);
+      };
+      node.onprogress = () => {
+        resolve(node);
+      };
+      if (node.complete) {
+        resolve(node);
+      }
+    });
+  });
+  return Promise.all(promiseList)
+    .then(() => {
+      callback && callback();
+    })
+    .catch((e) => {
+      console.error('网络异常', e);
+    });
+}
+
+export const isCreateGroupCustomMessage = (message: IMessageModel) => {
+  return (
+    message.type === TUIChatEngine.TYPES.MSG_CUSTOM
+    && message?.getMessageContent()?.businessID === 'group_create'
+  );
+};
+
+/**
+ * displayMessageReadReceipt: User-level control to display message read status
+ * After turning off, the messages you send and receive will not have message read status
+ * You will not be able to see whether the other party has read their messages, and they will also not be able to see whether you have read the messages they sent
+ *
+ * enabledMessageReadReceipt: App-level setting to enable read receipts
+ * @return {boolean} - Returns a boolean value indicating if the message read receipt is enabled globally.
+ */
+export function isEnabledMessageReadReceiptGlobal(): boolean {
+  return TUIStore.getData(StoreName.USER, 'displayMessageReadReceipt')
+    && TUIStore.getData(StoreName.APP, 'enabledMessageReadReceipt');
+}
+
+export function shallowCopyMessage(message: IMessageModel) {
+  return Object.assign({}, message);
+}
+
+// calculate timestamp
+export function calculateTimestamp(timestamp: number): string {
+  const todayZero = new Date().setHours(0, 0, 0, 0);
+  const thisYear = new Date(
+    new Date().getFullYear(),
+    0,
+    1,
+    0,
+    0,
+    0,
+    0,
+  ).getTime();
+  const target = new Date(timestamp);
+
+  const oneDay = 24 * 60 * 60 * 1000;
+  const oneWeek = 7 * oneDay;
+
+  const diff = todayZero - target.getTime();
+
+  function formatNum(num: number): string {
+    return num < 10 ? '0' + num : num.toString();
+  }
+
+  if (diff <= 0) {
+    // today, only display hour:minute
+    return `${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
+  } else if (diff <= oneDay) {
+    // yesterday, display yesterday:hour:minute
+    return `${TUITranslateService.t('time.昨天')} ${formatNum(
+      target.getHours(),
+    )}:${formatNum(target.getMinutes())}`;
+  } else if (diff <= oneWeek - oneDay) {
+    // Within a week, display weekday hour:minute
+    const weekdays = [
+      '星期日',
+      '星期一',
+      '星期二',
+      '星期三',
+      '星期四',
+      '星期五',
+      '星期六',
+    ];
+    const weekday = weekdays[target.getDay()];
+    return `${TUITranslateService.t('time.' + weekday)} ${formatNum(
+      target.getHours(),
+    )}:${formatNum(target.getMinutes())}`;
+  } else if (target.getTime() >= thisYear) {
+    // Over a week, within this year, display mouth/day hour:minute
+    return `${target.getMonth() + 1}/${target.getDate()} ${formatNum(
+      target.getHours(),
+    )}:${formatNum(target.getMinutes())}`;
+  } else {
+    // Not within this year, display year/mouth/day hour:minute
+    return `${target.getFullYear()}/${
+      target.getMonth() + 1
+    }/${target.getDate()} ${formatNum(target.getHours())}:${formatNum(
+      target.getMinutes(),
+    )}`;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIChat/utils/wordsList.ts b/txim/src/TUIKit/components/TUIChat/utils/wordsList.ts
new file mode 100644
index 00000000..78877f0c
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIChat/utils/wordsList.ts
@@ -0,0 +1,29 @@
+export const wordsList = [
+  {
+    value: '在吗？在吗？在吗？重要的话说三遍。',
+  },
+  {
+    value: '好久没聊天了，快来和我说说话～',
+  },
+  {
+    value: '好的，就这么说定了。',
+  },
+  {
+    value: '感恩的心，感谢有你。',
+  },
+  {
+    value: '糟糕！是心动的感觉！',
+  },
+  {
+    value: '心疼地抱抱自己，我太难了！',
+  },
+  {
+    value: '没关系，别在意，事情过去就过去了。',
+  },
+  {
+    value: '早上好，今天也是让人期待的一天呢！',
+  },
+  {
+    value: '熬夜有什么用，又没人陪你聊天，早点休息吧。',
+  },
+];
diff --git a/txim/src/TUIKit/components/TUIContact/contact-info/contact-info-config.ts b/txim/src/TUIKit/components/TUIContact/contact-info/contact-info-config.ts
new file mode 100644
index 00000000..59183110
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-info/contact-info-config.ts
@@ -0,0 +1,201 @@
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import {
+  CONTACT_INFO_LABEL_POSITION,
+  CONTACT_INFO_MORE_EDIT_TYPE,
+  CONTACT_INFO_BUTTON_TYPE,
+} from '../../../constant';
+import {
+  updateFriendRemark,
+  deleteFriend,
+  enterConversation,
+  quitGroup,
+  dismissGroup,
+  joinGroup,
+  addFriend,
+  acceptFriendApplication,
+  refuseFriendApplication,
+  addToBlacklist,
+  removeFromBlacklist,
+} from '../utils/index';
+
+export const contactMoreInfoConfig = {
+  // set friends' remark
+  setRemark: {
+    key: 'setRemark',
+    label: '备注名',
+    data: '',
+    labelPosition: CONTACT_INFO_LABEL_POSITION.LEFT,
+    editable: true,
+    editType: CONTACT_INFO_MORE_EDIT_TYPE.INPUT,
+    editing: false,
+    editSubmitHandler: (props: {
+      item: any;
+      contactInfoData: any;
+      [propsName: string]: any;
+    }) => {
+      if (props?.isBothFriend) {
+        const newRemarkValue = props?.item?.data;
+        updateFriendRemark(props?.contactInfoData?.userID, newRemarkValue);
+        props?.item?.editing && (props.item.editing = false);
+        props?.item?.data && (props.item.data = props?.contactInfoData?.remark);
+      } else {
+        props?.item?.editing && (props.item.editing = false);
+      }
+    },
+  },
+  // blocked list
+  blackList: {
+    key: 'blackList',
+    label: '加入黑名单',
+    data: false,
+    labelPosition: CONTACT_INFO_LABEL_POSITION.LEFT,
+    editable: true,
+    editType: CONTACT_INFO_MORE_EDIT_TYPE.SWITCH,
+    editing: true,
+    editSubmitHandler: (props: {
+      item: any;
+      contactInfoData: any;
+      [propsName: string]: any;
+    }) => {
+      if (props?.isInBlackList) {
+        removeFromBlacklist(props?.contactInfoData?.userID);
+      } else {
+        addToBlacklist(props?.contactInfoData?.userID);
+        TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', 'blackList');
+      }
+    },
+  },
+  // Fill in verification words (applicant)
+  setWords: {
+    key: 'setWords',
+    label: '请填写验证信息',
+    data: '',
+    labelPosition: CONTACT_INFO_LABEL_POSITION.TOP,
+    editable: true,
+    editType: CONTACT_INFO_MORE_EDIT_TYPE.TEXTAREA,
+    editing: true,
+  },
+  // Display verification words (application recipient)
+  displayWords: {
+    key: 'displayWords',
+    label: '验证信息',
+    data: '',
+    labelPosition: CONTACT_INFO_LABEL_POSITION.LEFT,
+    editable: false,
+  },
+};
+
+export const contactButtonConfig = {
+  // ---------------------
+  // group command config
+  // ---------------------
+  dismissGroup: {
+    key: 'dismissGroup',
+    label: '解散群聊',
+    type: CONTACT_INFO_BUTTON_TYPE.CANCEL,
+    onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
+      dismissGroup(props?.contactInfoData?.groupID);
+    },
+  },
+  quitGroup: {
+    key: 'quitGroup',
+    label: '退出群聊',
+    type: CONTACT_INFO_BUTTON_TYPE.CANCEL,
+    onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
+      quitGroup(props?.contactInfoData?.groupID);
+    },
+  },
+  joinGroup: {
+    key: 'joinGroup',
+    label: '发送申请',
+    type: CONTACT_INFO_BUTTON_TYPE.SUBMIT,
+    onClick: (props: {
+      contactInfoData: any;
+      contactInfoMoreList: any;
+      [propsName: string]: any;
+    }) => {
+      joinGroup(
+        props?.contactInfoData?.groupID,
+        props?.contactInfoMoreList[0]?.data,
+      );
+    },
+  },
+  joinAVChatGroup: {
+    key: 'joinAVChatGroup',
+    label: '加入直播群',
+    type: CONTACT_INFO_BUTTON_TYPE.SUBMIT,
+    onClick: (props: {
+      contactInfoData: any;
+      contactInfoMoreList: any;
+      [propsName: string]: any;
+    }) => {
+      joinGroup(props?.contactInfoData?.groupID);
+    },
+  },
+  enterGroupConversation: {
+    key: 'enterGroupConversation',
+    label: '进入群聊',
+    type: CONTACT_INFO_BUTTON_TYPE.SUBMIT,
+    onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
+      enterConversation(props?.contactInfoData);
+    },
+  },
+
+  // ---------------------
+  // friend command config
+  // ---------------------
+  addFriend: {
+    key: 'addFriend',
+    label: '发送申请',
+    type: CONTACT_INFO_BUTTON_TYPE.SUBMIT,
+    onClick: (props: {
+      contactInfoData: any;
+      contactInfoMoreList: any;
+      [propsName: string]: any;
+    }) => {
+      addFriend({
+        to: props?.contactInfoData?.userID,
+        source: 'AddSource_Type_Web',
+        remark: props?.contactInfoMoreList[1]?.data,
+        wording: props?.contactInfoMoreList[0]?.data,
+      });
+    },
+  },
+  deleteFriend: {
+    key: 'deleteFriend',
+    label: '删除好友',
+    type: CONTACT_INFO_BUTTON_TYPE.CANCEL,
+    onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
+      deleteFriend(props?.contactInfoData?.userID);
+    },
+  },
+  enterC2CConversation: {
+    key: 'enterC2CConversation',
+    label: '发送消息',
+    type: CONTACT_INFO_BUTTON_TYPE.SUBMIT,
+    onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
+      enterConversation(props?.contactInfoData);
+    },
+  },
+
+  // ---------------------
+  // friend application command config
+  // ---------------------
+  acceptFriendApplication: {
+    key: 'acceptFriendApplication',
+    label: '同意',
+    type: CONTACT_INFO_BUTTON_TYPE.SUBMIT,
+    onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
+      acceptFriendApplication(props?.contactInfoData?.userID);
+      TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', 'friendList');
+    },
+  },
+  refuseFriendApplication: {
+    key: 'refuseFriendApplication',
+    label: '拒绝',
+    type: CONTACT_INFO_BUTTON_TYPE.CANCEL,
+    onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
+      refuseFriendApplication(props?.contactInfoData?.userID);
+    },
+  },
+};
diff --git a/txim/src/TUIKit/components/TUIContact/contact-info/index.ts b/txim/src/TUIKit/components/TUIContact/contact-info/index.ts
new file mode 100644
index 00000000..b3b56085
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-info/index.ts
@@ -0,0 +1,3 @@
+import ContactInfo from './index.vue';
+
+export default ContactInfo;
diff --git a/txim/src/TUIKit/components/TUIContact/contact-info/index.vue b/txim/src/TUIKit/components/TUIContact/contact-info/index.vue
new file mode 100644
index 00000000..6f1adf79
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-info/index.vue
@@ -0,0 +1,429 @@
+<template>
+  <div
+    v-if="typeof contactInfoData === 'object' && Object.keys(contactInfoData).length"
+    :class="['tui-contact-info', !isPC && 'tui-contact-info-h5']"
+  >
+    <div
+      v-if="!isPC"
+      :class="[
+        'tui-contact-info-header',
+        !isPC && 'tui-contact-info-h5-header',
+      ]"
+    >
+      <div
+        :class="[
+          'tui-contact-info-header-icon',
+          !isPC && 'tui-contact-info-h5-header-icon',
+        ]"
+        @click="resetContactSearchingUIData"
+      >
+        <Icon :file="backSVG" />
+      </div>
+      <div
+        :class="[
+          'tui-contact-info-header-title',
+          !isPC && 'tui-contact-info-h5-header-title',
+        ]"
+      >
+        {{ TUITranslateService.t("TUIContact.添加好友/群聊") }}
+      </div>
+    </div>
+    <div :class="['tui-contact-info-basic', !isPC && 'tui-contact-info-h5-basic']">
+      <div
+        :class="[
+          'tui-contact-info-basic-text',
+          !isPC && 'tui-contact-info-h5-basic-text',
+        ]"
+      >
+        <div
+          :class="[
+            'tui-contact-info-basic-text-name',
+            !isPC && 'tui-contact-info-h5-basic-text-name',
+          ]"
+        >
+          {{ generateContactInfoName(contactInfoData) }}
+        </div>
+        <div
+          v-for="item in contactInfoBasicList"
+          :key="item.label"
+          :class="[
+            'tui-contact-info-basic-text-other',
+            !isPC && 'tui-contact-info-h5-basic-text-other',
+          ]"
+        >
+          {{
+            `${TUITranslateService.t(`TUIContact.${item.label}`)}:
+          ${item.data}`
+          }}
+        </div>
+      </div>
+      <img
+        :class="[
+          'tui-contact-info-basic-avatar',
+          !isPC && 'tui-contact-info-h5-basic-avatar',
+        ]"
+        :src="generateAvatar(contactInfoData)"
+      >
+    </div>
+    <div
+      v-if="contactInfoMoreList[0]"
+      :class="['tui-contact-info-more', !isPC && 'tui-contact-info-h5-more']"
+    >
+      <div
+        v-for="item in contactInfoMoreList"
+        :key="item.key"
+        :class="[
+          'tui-contact-info-more-item',
+          !isPC && 'tui-contact-info-h5-more-item',
+          item.labelPosition === CONTACT_INFO_LABEL_POSITION.TOP
+            ? 'tui-contact-info-more-item-top'
+            : 'tui-contact-info-more-item-left',
+        ]"
+      >
+        <div
+          :class="[
+            'tui-contact-info-more-item-label',
+            !isPC && 'tui-contact-info-h5-more-item-label',
+          ]"
+        >
+          {{ `${TUITranslateService.t(`TUIContact.${item.label}`)}` }}
+        </div>
+        <div
+          :class="[
+            'tui-contact-info-more-item-content',
+            !isPC && 'tui-contact-info-h5-more-item-content',
+          ]"
+        >
+          <div
+            v-if="!item.editing"
+            :class="[
+              'tui-contact-info-more-item-content-text',
+              !isPC && 'tui-contact-info-h5-more-item-content-text',
+            ]"
+          >
+            <div
+              :class="[
+                'tui-contact-info-more-item-content-text-data',
+                !isPC && 'tui-contact-info-h5-more-item-content-text-data',
+              ]"
+            >
+              {{ item.data }}
+            </div>
+            <div
+              v-if="item.editable"
+              :class="[
+                'tui-contact-info-more-item-content-text-icon',
+                !isPC && 'tui-contact-info-h5-more-item-content-text-icon',
+              ]"
+              @click="setEditing(item)"
+            >
+              <Icon
+                :file="editSVG"
+                width="14px"
+                height="14px"
+              />
+            </div>
+          </div>
+          <input
+            v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.INPUT"
+            v-model="item.data"
+            :class="[
+              'tui-contact-info-more-item-content-input',
+              !isPC && 'tui-contact-info-h5-more-item-content-input',
+            ]"
+            type="text"
+            @confirm="onContactInfoEmitSubmit(item)"
+            @keyup.enter="onContactInfoEmitSubmit(item)"
+          >
+          <textarea
+            v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.TEXTAREA"
+            v-model="item.data"
+            :class="[
+              'tui-contact-info-more-item-content-textarea',
+              !isPC && 'tui-contact-info-h5-more-item-content-textarea',
+            ]"
+            confirm-type="done"
+          />
+          <div
+            v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.SWITCH"
+            @click="onContactInfoEmitSubmit(item)"
+          >
+            <SwitchBar :value="item.data" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      :class="[
+        'tui-contact-info-button',
+        !isPC && 'tui-contact-info-h5-button',
+      ]"
+    >
+      <button
+        v-for="item in contactInfoButtonList"
+        :key="item.key"
+        :class="[
+          'tui-contact-info-button-item',
+          !isPC && 'tui-contact-info-h5-button-item',
+          item.type === CONTACT_INFO_BUTTON_TYPE.CANCEL
+            ? `tui-contact-info-button-item-cancel`
+            : `tui-contact-info-button-item-submit`,
+        ]"
+        @click="onContactInfoButtonClicked(item)"
+      >
+        {{ TUITranslateService.t(`TUIContact.${item.label}`) }}
+      </button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  IGroupModel,
+  Friend,
+  FriendApplication,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { ref, computed, onMounted, onUnmounted } from '../../../adapter-vue';
+import { isPC } from '../../../utils/env';
+
+import {
+  generateAvatar,
+  generateContactInfoName,
+  generateContactInfoBasic,
+  isFriend,
+  isApplicationType,
+} from '../utils/index';
+import {
+  contactMoreInfoConfig,
+  contactButtonConfig,
+} from './contact-info-config';
+import Icon from '../../common/Icon.vue';
+import editSVG from '../../../assets/icon/edit.svg';
+import backSVG from '../../../assets/icon/back.svg';
+import SwitchBar from '../../common/SwitchBar/index.vue';
+import {
+  IBlackListUserItem,
+  IContactInfoMoreItem,
+  IContactInfoButton,
+} from '../../../interface';
+import {
+  CONTACT_INFO_LABEL_POSITION,
+  CONTACT_INFO_MORE_EDIT_TYPE,
+  CONTACT_INFO_BUTTON_TYPE,
+} from '../../../constant';
+import { deepCopy } from '../../TUIChat/utils/utils';
+
+type IContactInfoType = IGroupModel | Friend | FriendApplication | IBlackListUserItem;
+
+const emits = defineEmits(['switchConversation']);
+
+const contactInfoData = ref<IContactInfoType>({} as IContactInfoType);
+const contactInfoBasicList = ref<Array<{ label: string; data: string }>>([]);
+const contactInfoMoreList = ref<IContactInfoMoreItem[]>([]);
+const contactInfoButtonList = ref<IContactInfoButton[]>([]);
+
+const setEditing = (item: any) => {
+  item.editing = true;
+};
+
+const isGroup = computed((): boolean =>
+  (contactInfoData.value as IGroupModel)?.groupID ? true : false,
+);
+
+const isApplication = computed((): boolean => {
+  return isApplicationType(contactInfoData?.value);
+});
+
+// is both friend, if is group type always false
+const isBothFriend = ref<boolean>(false);
+
+// is group member, including ordinary member, admin, group owner
+const isGroupMember = computed((): boolean => {
+  return (contactInfoData.value as IGroupModel)?.selfInfo?.userID ? true : false;
+});
+
+// is in black list, if is group type always false
+const isInBlackList = computed((): boolean => {
+  return (
+    !isGroup.value
+    && blackList.value?.findIndex(
+      (item: IBlackListUserItem) =>
+        item?.userID === (contactInfoData.value as IBlackListUserItem)?.userID,
+    ) >= 0
+  );
+});
+
+const blackList = ref<IBlackListUserItem[]>([]);
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CUSTOM, {
+    currentContactInfo: onCurrentContactInfoUpdated,
+  });
+  TUIStore.watch(StoreName.USER, {
+    userBlacklist: onUserBlacklistUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    currentContactInfo: onCurrentContactInfoUpdated,
+  });
+  TUIStore.unwatch(StoreName.USER, {
+    userBlacklist: onUserBlacklistUpdated,
+  });
+});
+
+const resetContactInfoUIData = () => {
+  contactInfoData.value = {} as IContactInfoType;
+  contactInfoBasicList.value = [];
+  contactInfoMoreList.value = [];
+  contactInfoButtonList.value = [];
+};
+
+const resetContactSearchingUIData = () => {
+  TUIStore.update(StoreName.CUSTOM, 'currentContactInfo', {});
+  TUIStore.update(StoreName.CUSTOM, 'currentContactSearchingStatus', false);
+  TUIGlobal?.closeSearching && TUIGlobal?.closeSearching();
+};
+
+const onContactInfoEmitSubmit = (item: any) => {
+  item.editSubmitHandler
+  && item.editSubmitHandler({
+    item,
+    contactInfoData: contactInfoData.value,
+    isBothFriend: isBothFriend.value,
+    isInBlackList: isInBlackList.value,
+  });
+};
+
+const onContactInfoButtonClicked = (item: any) => {
+  item.onClick
+  && item.onClick({
+    contactInfoData: contactInfoData.value,
+    contactInfoMoreList: contactInfoMoreList.value,
+  });
+  if (
+    item.key === 'enterGroupConversation'
+    || item.key === 'enterC2CConversation'
+  ) {
+    emits('switchConversation', contactInfoData.value);
+    resetContactSearchingUIData();
+  }
+};
+
+const generateMoreInfo = async () => {
+  if (!isApplication.value) {
+    if (
+      (!isGroup.value && !isBothFriend.value && !isInBlackList.value)
+      || (isGroup.value
+      && !isGroupMember.value
+      && (contactInfoData.value as IGroupModel)?.type !== TUIChatEngine?.TYPES?.GRP_AVCHATROOM)
+    ) {
+      contactMoreInfoConfig.setWords.data = '';
+      contactInfoMoreList.value.push(contactMoreInfoConfig.setWords);
+    }
+    if (!isGroup.value && !isInBlackList.value) {
+      contactMoreInfoConfig.setRemark.data
+        = (contactInfoData.value as Friend)?.remark || '';
+      contactMoreInfoConfig.setRemark.editing = false;
+      contactInfoMoreList.value.push(contactMoreInfoConfig.setRemark);
+    }
+    if (!isGroup.value && (isBothFriend.value || isInBlackList.value)) {
+      contactMoreInfoConfig.blackList.data = isInBlackList.value || false;
+      contactInfoMoreList.value.push(contactMoreInfoConfig.blackList);
+    }
+  } else {
+    contactMoreInfoConfig.displayWords.data
+      = (contactInfoData.value as FriendApplication)?.wording || '';
+    contactInfoMoreList.value.push(contactMoreInfoConfig.displayWords);
+  }
+};
+
+const generateButton = () => {
+  if (isInBlackList.value) {
+    return;
+  }
+  if (isApplication.value) {
+    if (
+      (contactInfoData.value as FriendApplication)?.type
+      === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
+    ) {
+      contactInfoButtonList?.value?.push(
+        contactButtonConfig.refuseFriendApplication,
+      );
+      contactInfoButtonList?.value?.push(
+        contactButtonConfig.acceptFriendApplication,
+      );
+    }
+  } else {
+    if (isGroup.value && isGroupMember.value) {
+      switch ((contactInfoData.value as IGroupModel)?.selfInfo?.role) {
+        case 'Owner':
+          contactInfoButtonList?.value?.push(contactButtonConfig.dismissGroup);
+          break;
+        default:
+          contactInfoButtonList?.value?.push(contactButtonConfig.quitGroup);
+          break;
+      }
+      contactInfoButtonList?.value?.push(
+        contactButtonConfig.enterGroupConversation,
+      );
+    } else if (!isGroup.value && isBothFriend.value) {
+      contactInfoButtonList?.value?.push(contactButtonConfig.deleteFriend);
+      contactInfoButtonList?.value?.push(
+        contactButtonConfig.enterC2CConversation,
+      );
+    } else {
+      if (isGroup.value) {
+        contactInfoButtonList?.value?.push(
+          (contactInfoData.value as IGroupModel)?.type === TUIChatEngine?.TYPES?.GRP_AVCHATROOM
+            ? contactButtonConfig.joinAVChatGroup
+            : contactButtonConfig.joinGroup,
+        );
+      } else {
+        contactInfoButtonList?.value?.push(contactButtonConfig.addFriend);
+      }
+    }
+  }
+};
+
+function onUserBlacklistUpdated(userBlacklist: IBlackListUserItem[]) {
+  blackList.value = userBlacklist;
+}
+
+async function onCurrentContactInfoUpdated(contactInfo: IContactInfoType) {
+  if (
+    contactInfoData.value
+    && contactInfo
+    && JSON.stringify(contactInfoData.value) === JSON.stringify(contactInfo)
+  ) {
+    return;
+  }
+  resetContactInfoUIData();
+  // deep clone
+  contactInfoData.value = deepCopy(contactInfo) || {};
+  if (!contactInfoData.value || Object.keys(contactInfoData.value)?.length === 0) {
+    return;
+  }
+  contactInfoBasicList.value = generateContactInfoBasic(
+    contactInfoData.value,
+  );
+  isBothFriend.value = await isFriend(contactInfoData.value);
+  generateMoreInfo();
+  generateButton();
+  if (contactInfo.infoKeyList) {
+    contactInfoMoreList.value = contactInfo.infoKeyList.map((key: string) => {
+      return (contactMoreInfoConfig as any)[key];
+    });
+  }
+  if (contactInfo.btnKeyList) {
+    contactInfoButtonList.value = contactInfo.btnKeyList.map((key: string) => {
+      return (contactButtonConfig as any)[key];
+    });
+  }
+}
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIContact/contact-info/style/h5.scss b/txim/src/TUIKit/components/TUIContact/contact-info/style/h5.scss
new file mode 100644
index 00000000..440a2798
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-info/style/h5.scss
@@ -0,0 +1,130 @@
+.tui-contact-info-h5 {
+  padding: 0;
+  overflow: hidden;
+
+  &-header {
+    background-color: #fff;
+    padding: 10px !important;
+    display: flex;
+    flex-direction: row;
+
+    &-title {
+      flex: 1;
+      text-align: center;
+      font-weight: 500;
+      font-size: 14px;
+      margin-right: 30px;
+    }
+  }
+
+  &-basic {
+    padding: 10px !important;
+    background: #fff;
+    margin-top: 10px !important;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: left;
+    border-bottom: none;
+
+    &-text {
+      &-name {
+        font-size: 20px;
+        padding-bottom: 1px;
+      }
+
+      &-other {
+        font-size: 14px;
+        padding: 3px 0;
+      }
+    }
+
+    &-avatar {
+      border-radius: 10px;
+      margin-right: 10px;
+    }
+  }
+
+  &-more {
+    background: #fff;
+    margin-top: 10px !important;
+    overflow: hidden;
+    padding: 0;
+
+    &-item {
+      width: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
+      padding: 10px !important;
+      border-bottom: 1px solid #eee;
+
+      &-label {
+        color: #000;
+      }
+
+      &-content {
+        overflow: hidden;
+        color: #979797;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+
+        &-text {
+          overflow: hidden;
+          display: flex;
+          flex-direction: row;
+
+          &-data {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+
+    &-item:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &-button {
+    margin-top: 10px !important;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    background-color: #fff;
+
+    &-item {
+      width: 100%;
+      margin: 0;
+      border: none;
+      padding: 16px !important;
+      font-size: 16px;
+      border-bottom: 1px solid #eee;
+      height: fit-content;
+
+      &::after {
+        border: none;
+      }
+
+      &-textarea {
+        background-color: #f8f8f8;
+      }
+    }
+
+    &-item:last-child {
+      border-bottom: none;
+    }
+
+    .tui-contact-info-button-item-cancel {
+      background-color: #fff;
+      color: #e54545;
+    }
+
+    .tui-contact-info-button-item-submit {
+      background-color: #fff;
+      color: #006eff;
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIContact/contact-info/style/index.scss b/txim/src/TUIKit/components/TUIContact/contact-info/style/index.scss
new file mode 100644
index 00000000..e3f64c56
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-info/style/index.scss
@@ -0,0 +1,3 @@
+@import "./web";
+@import "./h5";
+@import "../../../../assets/styles/common";
diff --git a/txim/src/TUIKit/components/TUIContact/contact-info/style/web.scss b/txim/src/TUIKit/components/TUIContact/contact-info/style/web.scss
new file mode 100644
index 00000000..d9d9c7f2
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-info/style/web.scss
@@ -0,0 +1,151 @@
+.tui-contact-info {
+  width: 100%;
+  height: 100%;
+  background: #f7f8fa;
+  display: flex;
+  padding: 30px;
+  box-sizing: border-box;
+  flex-direction: column;
+  overflow: hidden;
+
+  &-basic {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ddd;
+    overflow: hidden;
+    box-sizing: border-box;
+    width: 100%;
+
+    &-text {
+      flex: 1;
+
+      &-name {
+        font-size: 24px;
+        padding-bottom: 10px;
+      }
+
+      &-other {
+        font-size: 16px;
+        padding: 6px 0;
+        font-weight: 400;
+        color: #999;
+      }
+    }
+
+    &-avatar {
+      width: 80px;
+      height: 80px;
+    }
+  }
+
+  &-more {
+    padding: 15px 0;
+    overflow: hidden;
+
+    &-item {
+      display: flex;
+      padding: 6px 0;
+      font-size: 16px;
+      font-weight: 400;
+      min-height: 56px;
+
+      &-label {
+        color: #999;
+        height: fit-content;
+      }
+
+      &-left {
+        flex-direction: row;
+        align-items: center;
+
+        .tui-contact-info-more-item-label {
+          width: 80px;
+        }
+      }
+
+      &-top {
+        flex-direction: column;
+      }
+
+      &-content {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        color: #333;
+        overflow: hidden;
+
+        &-text {
+          display: flex;
+          overflow: hidden;
+
+          &-data {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          &-icon {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+
+        &-input,
+        &-textarea {
+          flex: 1;
+          border: 1px solid #e8e8e9;
+          border-radius: 4px;
+          padding: 4px;
+          color: inherit;
+        }
+
+        &-input {
+          height: 22px;
+          font-size: 16px;
+        }
+
+        &-textarea {
+          resize: none;
+          height: 100px;
+        }
+      }
+    }
+  }
+
+  &-button {
+    display: flex;
+    padding: 30px;
+    justify-content: center;
+
+    &-item {
+      margin: 15px;
+      min-width: 142px;
+      height: 36px;
+      padding: 8px 20px;
+      border-radius: 4px;
+      border: none;
+      font-size: 14px;
+      text-align: center;
+      line-height: 20px;
+      font-weight: 400;
+      letter-spacing: 0;
+      cursor: pointer;
+      user-select: none;
+
+      &-submit {
+        border: 1px solid #006eff;
+        background: #006eff;
+        color: #fff;
+      }
+
+      &-cancel {
+        border: 1px solid #e54545;
+        background: transparent;
+        color: #e54545;
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue b/txim/src/TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue
new file mode 100644
index 00000000..c71f2fcb
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue
@@ -0,0 +1,258 @@
+<template>
+  <div :class="['tui-contact-list-card', !isPC && 'tui-contact-list-card-h5']">
+    <div class="tui-contact-list-card-left">
+      <Avatar
+        class="tui-contact-list-card-left-avatar"
+        useSkeletonAnimation
+        :url="generateAvatar(props.item)"
+      />
+      <div
+        v-if="props.displayOnlineStatus && props.item"
+        :class="{
+          'online-status': true,
+          'online-status-online': isOnline,
+          'online-status-offline': !isOnline,
+        }"
+      />
+    </div>
+    <div class="tui-contact-list-card-main">
+      <div class="tui-contact-list-card-main-name">
+        {{ generateName(props.item) }}
+      </div>
+      <div
+        v-if="otherContentForSow"
+        class="tui-contact-list-card-main-other"
+      >
+        {{ otherContentForSow }}
+      </div>
+    </div>
+    <div class="tui-contact-list-card-right">
+      <div
+        v-if="groupTypeForShow"
+        class="tui-contact-list-card-right-group-type"
+      >
+        {{ groupTypeForShow }}
+      </div>
+      <div
+        v-if="showApplicationStatus"
+        class="tui-contact-list-card-right-application"
+      >
+        <div
+          v-if="showApplicationStatus.style === 'text'"
+          class="tui-contact-list-card-right-application-text"
+        >
+          {{ TUITranslateService.t(`TUIContact.${showApplicationStatus.label}`) }}
+        </div>
+        <button
+          v-else-if="showApplicationStatus.style === 'button'"
+          class="tui-contact-list-card-right-application-button"
+          @click.stop="showApplicationStatus.onClick"
+        >
+          {{ TUITranslateService.t(`TUIContact.${showApplicationStatus.label}`) }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, withDefaults, inject, watch, ref, Ref } from '../../../../adapter-vue';
+import TUIChatEngine, {
+  TUITranslateService,
+  IGroupModel,
+  FriendApplication,
+  Friend,
+} from '@tencentcloud/chat-uikit-engine';
+import { IContactInfoType, IUserStatus } from '../../../../interface';
+import Avatar from '../../../common/Avatar/index.vue';
+import { generateAvatar, generateName, acceptFriendApplication } from '../../utils';
+import { isPC } from '../../../../utils/env';
+
+const props = withDefaults(
+  defineProps<{
+    item: IContactInfoType;
+    displayOnlineStatus?: boolean;
+  }>(),
+  {
+    item: () => ({} as IContactInfoType),
+    displayOnlineStatus: false,
+  },
+);
+const userOnlineStatusMap = inject<Ref<Map<string, IUserStatus>>>('userOnlineStatusMap');
+const isOnline = ref<boolean>(false);
+
+const groupType = {
+  [TUIChatEngine.TYPES.GRP_WORK]: 'Work',
+  [TUIChatEngine.TYPES.GRP_AVCHATROOM]: 'AVChatRoom',
+  [TUIChatEngine.TYPES.GRP_PUBLIC]: 'Public',
+  [TUIChatEngine.TYPES.GRP_MEETING]: 'Meeting',
+  [TUIChatEngine.TYPES.GRP_COMMUNITY]: 'Community',
+};
+
+const otherContentForSow = computed((): string => {
+  let content = '';
+  if (
+    (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
+    || (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
+  ) {
+    content = (props.item as FriendApplication)?.wording || '';
+  } else if ((props.item as IGroupModel)?.groupID) {
+    content = `ID:${(props.item as IGroupModel)?.groupID}`;
+  }
+  return content;
+});
+
+const groupTypeForShow = computed((): string => {
+  let type = '';
+  if ((props.item as IGroupModel)?.groupID) {
+    type = groupType[(props.item as IGroupModel)?.type];
+  }
+  return type;
+});
+
+const showApplicationStatus = computed(() => {
+  if (
+    (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
+  ) {
+    return {
+      style: 'text',
+      label: '等待验证',
+    };
+  } else if (
+    (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
+  ) {
+    return {
+      style: 'button',
+      label: '同意',
+      onClick: () => {
+        acceptFriendApplication((props.item as FriendApplication)?.userID);
+      },
+    };
+  }
+  return false;
+});
+
+watch(
+  () => userOnlineStatusMap?.value,
+  () => {
+    isOnline.value = getOnlineStatus();
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+function getOnlineStatus(): boolean {
+  return !!(
+    props.displayOnlineStatus
+    && userOnlineStatusMap?.value
+    && (props.item as Friend)?.userID
+    && userOnlineStatusMap.value?.[(props.item as Friend).userID]?.statusType === TUIChatEngine.TYPES.USER_STATUS_ONLINE
+  );
+}
+</script>
+<style lang="scss" scoped>
+.tui-contact-list-card {
+  padding: 5px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+  flex: 1;
+
+  &-left {
+    position: relative;
+    width: 36px;
+    height: 36px;
+
+    &-avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 5px;
+    }
+
+    .online-status {
+      box-sizing: border-box;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      left: 30px;
+      top: 30px;
+      border: 2px solid #fff;
+      box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+      border-radius: 50%;
+
+      &-online {
+        background: #29cc85;
+      }
+
+      &-offline {
+        background: #a4a4a4;
+      }
+    }
+  }
+
+  &-main {
+    flex: 1;
+    padding: 0 10px;
+    overflow: hidden;
+
+    &-name,
+    &-other {
+      font-size: 14px;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-other {
+      color: #999;
+    }
+  }
+
+  &-right {
+    width: fit-content;
+
+    &-group-type {
+      padding: 0 4px;
+      line-height: 14px;
+      font-size: 12px;
+      border-radius: 1px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(0, 0, 0, 0.3);
+    }
+
+    &-application {
+      &-text {
+        color: #999;
+        font-size: 12px;
+      }
+
+      &-button {
+        border: 1px solid #006eff;
+        background: #006eff;
+        color: #fff;
+        padding: 3px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        text-align: center;
+        cursor: pointer;
+        user-select: none;
+        line-height: 150%;
+
+        &::after {
+          border: none;
+        }
+      }
+    }
+  }
+}
+
+.tui-contact-list-card-h5 {
+  cursor: none !important;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIContact/contact-list/index.ts b/txim/src/TUIKit/components/TUIContact/contact-list/index.ts
new file mode 100644
index 00000000..a096fd1b
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-list/index.ts
@@ -0,0 +1,3 @@
+import ContactList from './index.vue';
+
+export default ContactList;
diff --git a/txim/src/TUIKit/components/TUIContact/contact-list/index.vue b/txim/src/TUIKit/components/TUIContact/contact-list/index.vue
new file mode 100644
index 00000000..a8df01a5
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-list/index.vue
@@ -0,0 +1,365 @@
+<template>
+  <ul
+    v-if="!contactSearchingStatus"
+    :class="['tui-contact-list', !isPC && 'tui-contact-list-h5']"
+  >
+    <li
+      v-for="(contactListObj, key) in contactListMap"
+      :key="key"
+      class="tui-contact-list-item"
+    >
+      <header
+        class="tui-contact-list-item-header"
+        @click="toggleCurrentContactList(key)"
+      >
+        <div class="tui-contact-list-item-header-left">
+          <Icon
+            :file="currentContactListKey === key ? downSVG : rightSVG"
+            width="16px"
+            height="16px"
+          />
+          <div>{{ TUITranslateService.t(`TUIContact.${contactListObj.title}`) }}</div>
+        </div>
+        <div class="tui-contact-list-item-header-right">
+          <span
+            v-if="contactListObj.unreadCount"
+            class="tui-contact-list-item-header-right-unread"
+          >
+            {{ contactListObj.unreadCount }}
+          </span>
+        </div>
+      </header>
+      <ul :class="['tui-contact-list-item-main', currentContactListKey === key ? '' : 'hidden']">
+        <li
+          v-for="contactListItem in contactListObj.list"
+          :key="contactListItem.renderKey"
+          class="tui-contact-list-item-main-item"
+          :class="['selected']"
+          @click="selectItem(contactListItem)"
+        >
+          <ContactListItem
+            :key="contactListItem.renderKey"
+            :item="deepCopy(contactListItem)"
+            :displayOnlineStatus="displayOnlineStatus && key === 'friendList'"
+          />
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <ul
+    v-else
+    class="tui-contact-list"
+  >
+    <li
+      v-for="(item, key) in contactSearchResult"
+      :key="key"
+      class="tui-contact-list-item"
+    >
+      <div
+        v-if="item.list[0]"
+        class="tui-contact-search-list"
+      >
+        <div class="tui-contact-search-list-title">
+          {{ TUITranslateService.t(`TUIContact.${item.label}`) }}
+        </div>
+        <div
+          v-for="(listItem, index) in item.list"
+          :key="index"
+          class="tui-contact-search-list-item"
+          :class="['selected']"
+          @click="selectItem(listItem)"
+        >
+          <ContactListItem
+            :item="listItem"
+            :displayOnlineStatus="false"
+          />
+        </div>
+      </div>
+    </li>
+    <div
+      v-if="isContactSearchNoResult"
+      class="tui-contact-search-list-default"
+    >
+      {{ TUITranslateService.t("TUIContact.无搜索结果") }}
+    </div>
+  </ul>
+</template>
+<script setup lang="ts">
+import {
+  TUITranslateService,
+  TUIStore,
+  StoreName,
+  IGroupModel,
+  TUIFriendService,
+  Friend,
+  FriendApplication,
+  TUIUserService,
+} from '@tencentcloud/chat-uikit-engine';
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import { ref, computed, onMounted, onUnmounted, provide } from '../../../adapter-vue';
+import Icon from '../../common/Icon.vue';
+import downSVG from '../../../assets/icon/down-icon.svg';
+import rightSVG from '../../../assets/icon/right-icon.svg';
+import {
+  IContactList,
+  IContactSearchResult,
+  IBlackListUserItem,
+  IUserStatus,
+  IUserStatusMap,
+  IContactInfoType,
+} from '../../../interface';
+import ContactListItem from './contact-list-item/index.vue';
+import { deepCopy } from '../../TUIChat/utils/utils';
+import { isPC } from '../../../utils/env';
+
+const currentContactListKey = ref<keyof IContactList>('');
+const currentContactInfo = ref<IContactInfoType>({} as IContactInfoType);
+const contactListMap = ref<IContactList>({
+  friendApplicationList: {
+    key: 'friendApplicationList',
+    title: '新的联系人',
+    list: [] as FriendApplication[],
+    unreadCount: 0,
+  },
+  blackList: {
+    key: 'blackList',
+    title: '黑名单',
+    list: [] as IBlackListUserItem[],
+  },
+  groupList: {
+    key: 'groupList',
+    title: '我的群聊',
+    list: [] as IGroupModel[],
+  },
+  friendList: {
+    key: 'friendList',
+    title: '我的好友',
+    list: [] as Friend[],
+  },
+});
+const contactSearchingStatus = ref<boolean>(false);
+const contactSearchResult = ref<IContactSearchResult>();
+const displayOnlineStatus = ref<boolean>(false);
+const userOnlineStatusMap = ref<IUserStatusMap>();
+
+const isContactSearchNoResult = computed((): boolean => {
+  return (
+    !contactSearchResult?.value?.user?.list[0]
+    && !contactSearchResult?.value?.group?.list[0]
+  );
+});
+
+onMounted(() => {
+  TUIStore.watch(StoreName.APP, {
+    enabledCustomerServicePlugin: onCustomerServiceCommercialPluginUpdated,
+  });
+
+  TUIStore.watch(StoreName.GRP, {
+    groupList: onGroupListUpdated,
+  });
+
+  TUIStore.watch(StoreName.USER, {
+    userBlacklist: onUserBlacklistUpdated,
+    displayOnlineStatus: onDisplayOnlineStatusUpdated,
+    userStatusList: onUserStatusListUpdated,
+  });
+
+  TUIStore.watch(StoreName.FRIEND, {
+    friendList: onFriendListUpdated,
+    friendApplicationList: onFriendApplicationListUpdated,
+    friendApplicationUnreadCount: onFriendApplicationUnreadCountUpdated,
+  });
+
+  TUIStore.watch(StoreName.CUSTOM, {
+    currentContactSearchingStatus: onCurrentContactSearchingStatusUpdated,
+    currentContactSearchResult: onCurrentContactSearchResultUpdated,
+    currentContactListKey: onCurrentContactListKeyUpdated,
+    currentContactInfo: onCurrentContactInfoUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.APP, {
+    enabledCustomerServicePlugin: onCustomerServiceCommercialPluginUpdated,
+  });
+
+  TUIStore.unwatch(StoreName.GRP, {
+    groupList: onGroupListUpdated,
+  });
+
+  TUIStore.unwatch(StoreName.USER, {
+    userBlacklist: onUserBlacklistUpdated,
+    displayOnlineStatus: onDisplayOnlineStatusUpdated,
+    userStatusList: onUserStatusListUpdated,
+  });
+
+  TUIStore.unwatch(StoreName.FRIEND, {
+    friendList: onFriendListUpdated,
+    friendApplicationList: onFriendApplicationListUpdated,
+    friendApplicationUnreadCount: onFriendApplicationUnreadCountUpdated,
+  });
+
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    currentContactSearchingStatus: onCurrentContactSearchingStatusUpdated,
+    currentContactSearchResult: onCurrentContactSearchResultUpdated,
+    currentContactListKey: onCurrentContactListKeyUpdated,
+    currentContactInfo: onCurrentContactInfoUpdated,
+  });
+});
+
+function toggleCurrentContactList(key: keyof IContactList) {
+  if (currentContactListKey.value === key) {
+    currentContactListKey.value = '';
+    currentContactInfo.value = {} as IContactInfoType;
+    TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', '');
+    TUIStore.update(StoreName.CUSTOM, 'currentContactInfo', {} as IContactInfoType);
+  } else {
+    currentContactListKey.value = key;
+    TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', key);
+    if (key === 'friendApplicationList') {
+      TUIFriendService.setFriendApplicationRead();
+    }
+  }
+}
+
+function selectItem(item: any) {
+  currentContactInfo.value = item;
+  // For a result in the search list, before viewing the contactInfo details,
+  // it is necessary to update the data for the "already in the group list/already in the friend list" situation to obtain more detailed information
+  if (contactSearchingStatus.value) {
+    let targetListItem;
+    if ((currentContactInfo.value as Friend)?.userID) {
+      targetListItem = contactListMap.value?.friendList?.list?.find(
+        (item: IContactInfoType) => (item as Friend)?.userID === (currentContactInfo.value as Friend)?.userID,
+      );
+    } else if ((currentContactInfo.value as IGroupModel)?.groupID) {
+      targetListItem = contactListMap.value?.groupList?.list?.find(
+        (item: IContactInfoType) => (item as IGroupModel)?.groupID === (currentContactInfo.value as IGroupModel)?.groupID,
+      );
+    }
+    if (targetListItem) {
+      currentContactInfo.value = targetListItem;
+    }
+  }
+  TUIStore.update(StoreName.CUSTOM, 'currentContactInfo', currentContactInfo.value);
+}
+
+function onDisplayOnlineStatusUpdated(status: boolean) {
+  displayOnlineStatus.value = status;
+}
+
+function onUserStatusListUpdated(list: Map<string, IUserStatus>) {
+  if (list?.size > 0) {
+    userOnlineStatusMap.value = Object.fromEntries(list?.entries());
+  }
+}
+
+function onCustomerServiceCommercialPluginUpdated(isEnabled: boolean) {
+  if (!isEnabled) {
+    return;
+  }
+
+  // After the customer purchases the customer service plug-in,
+  // the engine updates the enabledCustomerServicePlugin to true through the commercial capability bit.
+  const contactListExtensionID = TUIConstants.TUIContact.EXTENSION.CONTACT_LIST.EXT_ID;
+  const tuiContactExtensionList = TUICore.getExtensionList(contactListExtensionID);
+
+  const customerData = tuiContactExtensionList.find((extension: any) => {
+    const { name, accountList = [] } = extension.data || {};
+    return name === 'customer' && accountList.length > 0;
+  });
+
+  if (customerData) {
+    const { data, text } = customerData;
+    const { accountList } = (data || {}) as { accountList: string[] };
+
+    TUIUserService.getUserProfile({ userIDList: accountList })
+      .then((res) => {
+        if (res.data.length > 0) {
+          const customerList = {
+            title: text,
+            list: res.data.map((item: any, index: number) => {
+              return {
+                ...item,
+                renderKey: generateRenderKey('customerList', item, index),
+                infoKeyList: [],
+                btnKeyList: ['enterC2CConversation'],
+              };
+            }),
+            key: 'customerList',
+          };
+          contactListMap.value = { ...contactListMap.value, customerList };
+        }
+      })
+      .catch(() => { });
+  }
+}
+
+function onGroupListUpdated(groupList: IGroupModel[]) {
+  updateContactListMap('groupList', groupList);
+}
+
+function onUserBlacklistUpdated(userBlacklist: IBlackListUserItem[]) {
+  updateContactListMap('blackList', userBlacklist);
+}
+
+function onFriendApplicationUnreadCountUpdated(friendApplicationUnreadCount: number) {
+  contactListMap.value.friendApplicationList.unreadCount = friendApplicationUnreadCount;
+}
+
+function onFriendListUpdated(friendList: Friend[]) {
+  updateContactListMap('friendList', friendList);
+}
+
+function onFriendApplicationListUpdated(friendApplicationList: FriendApplication[]) {
+  updateContactListMap('friendApplicationList', friendApplicationList);
+}
+
+function updateContactListMap(key: keyof IContactList, list: IContactInfoType[]) {
+  contactListMap.value[key].list = list;
+  contactListMap.value[key].list.map((item: IContactInfoType, index: number) => item.renderKey = generateRenderKey(key, item, index));
+  updateCurrentContactInfoFromList(contactListMap.value[key].list, key);
+}
+
+function updateCurrentContactInfoFromList(list: IContactInfoType[], type: keyof IContactList) {
+  if (
+    !(currentContactInfo.value as Friend)?.userID
+    && !(currentContactInfo.value as IGroupModel)?.groupID
+  ) {
+    return;
+  }
+  if (type === currentContactListKey.value || contactSearchingStatus.value) {
+    currentContactInfo.value = list?.find(
+      (item: any) =>
+        (item?.groupID && item?.groupID === (currentContactInfo.value as IGroupModel)?.groupID) || (item?.userID && item?.userID === (currentContactInfo.value as Friend)?.userID),
+    ) || {} as IContactInfoType;
+    TUIStore.update(StoreName.CUSTOM, 'currentContactInfo', currentContactInfo.value);
+  }
+}
+
+function generateRenderKey(contactListMapKey: keyof IContactList, contactInfo: IContactInfoType, index: number) {
+  return `${contactListMapKey}-${(contactInfo as Friend).userID || (contactInfo as IGroupModel).groupID || ('index' + index)}`;
+}
+
+function onCurrentContactSearchResultUpdated(searchResult: IContactSearchResult) {
+  contactSearchResult.value = searchResult;
+}
+
+function onCurrentContactSearchingStatusUpdated(searchingStatus: boolean) {
+  contactSearchingStatus.value = searchingStatus;
+  TUIStore.update(StoreName.CUSTOM, 'currentContactInfo', {} as IContactInfoType);
+  TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', '');
+}
+
+function onCurrentContactInfoUpdated(contactInfo: IContactInfoType) {
+  currentContactInfo.value = contactInfo;
+}
+
+function onCurrentContactListKeyUpdated(contactListKey: string) {
+  currentContactListKey.value = contactListKey;
+}
+
+provide('userOnlineStatusMap', userOnlineStatusMap);
+</script>
+
+<style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIContact/contact-list/style/h5.scss b/txim/src/TUIKit/components/TUIContact/contact-list/style/h5.scss
new file mode 100644
index 00000000..1e8a1719
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-list/style/h5.scss
@@ -0,0 +1,12 @@
+.tui-contact-list-h5 {
+  .tui-contact-list-item {
+    .tui-contact-list-item-header {
+      cursor: none;
+    }
+
+    .tui-contact-list-item-header:active,
+    .tui-contact-list-item-main-item:active {
+      background-color: #eef0f3;
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIContact/contact-list/style/index.scss b/txim/src/TUIKit/components/TUIContact/contact-list/style/index.scss
new file mode 100644
index 00000000..ef2a2f6d
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-list/style/index.scss
@@ -0,0 +1,3 @@
+@import './web';
+@import './h5';
+@import '../../../../assets/styles/common';
diff --git a/txim/src/TUIKit/components/TUIContact/contact-list/style/web.scss b/txim/src/TUIKit/components/TUIContact/contact-list/style/web.scss
new file mode 100644
index 00000000..509c312d
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-list/style/web.scss
@@ -0,0 +1,85 @@
+.tui-contact-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  list-style: none;
+
+  &-item {
+    display: flex;
+    flex-direction: column;
+
+    &-header {
+      display: flex;
+      flex-direction: row;
+      font-size: 14px;
+      cursor: pointer;
+      user-select: none;
+      padding: 10px 15px;
+      justify-content: space-between;
+
+      &-left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+
+      &-right {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &-unread {
+          display: flex;
+          min-width: 10px;
+          width: fit-content;
+          padding: 0 2.5px;
+          height: 15px;
+          font-size: 10px;
+          text-align: center;
+          line-height: 15px;
+          border-radius: 7.5px;
+          background: red;
+          align-items: center;
+          justify-content: center;
+          color: #fff;
+        }
+      }
+    }
+
+    &-main {
+      padding: 0 15px !important;
+
+      &.hidden{
+        display: none;
+      }
+
+      &-item {
+        padding: 5px 0;
+      }
+    }
+  }
+}
+
+.tui-contact-search-list {
+  padding: 0 15px !important;
+
+  &-title {
+    font-size: 14px;
+    color: #999;
+    border-bottom: 1px solid #f4f5f9;
+  }
+
+  &-item {
+    padding: 5px 0;
+  }
+
+  &-default {
+    padding: 20px;
+    text-align: center;
+    font-size: 14px;
+    color: #999;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIContact/contact-search/index.ts b/txim/src/TUIKit/components/TUIContact/contact-search/index.ts
new file mode 100644
index 00000000..0628525f
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-search/index.ts
@@ -0,0 +1,2 @@
+import ContactHeader from './index.vue';
+export default ContactHeader;
diff --git a/txim/src/TUIKit/components/TUIContact/contact-search/index.vue b/txim/src/TUIKit/components/TUIContact/contact-search/index.vue
new file mode 100644
index 00000000..99dcc501
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/contact-search/index.vue
@@ -0,0 +1,250 @@
+<template>
+  <div :class="['tui-contact-search', !isPC && 'tui-contact-search-h5']">
+    <div
+      v-if="!isSearching || !isPC"
+      :class="[
+        'tui-contact-search-header',
+        !isPC && 'tui-contact-search-h5-header',
+        isSearching && 'tui-contact-searching-h5-header',
+      ]"
+      @click="changeContactSearchingStatus(true)"
+    >
+      <div
+        :class="[
+          'tui-contact-search-header-icon',
+          !isPC && 'tui-contact-search-h5-header-icon',
+        ]"
+        @click.stop="changeContactSearchingStatus(!isSearching)"
+      >
+        <Icon
+          :file="isSearching ? backSVG : addSVG"
+          :width="isSearching ? '20px' : '14px'"
+          :height="isSearching ? '20px' : '14px'"
+        />
+      </div>
+
+      <div
+        :class="[
+          'tui-contact-search-header-title',
+          !isPC && 'tui-contact-search-h5-header-title',
+        ]"
+      >
+        {{ TUITranslateService.t("TUIContact.添加好友/群聊") }}
+      </div>
+    </div>
+    <div
+      v-if="isSearching"
+      :class="[
+        'tui-contact-search-main',
+        !isPC && 'tui-contact-search-h5-main',
+      ]"
+    >
+      <input
+        v-model="searchValue"
+        class="tui-contact-search-main-input"
+        type="text"
+        :placeholder="searchingPlaceholder"
+        enterkeyhint="search"
+        @keyup.enter="search"
+        @blur="search"
+        @confirm="search"
+      >
+      <div
+        class="tui-contact-search-main-cancel"
+        @click="isSearching = false"
+      >
+        {{ TUITranslateService.t("取消") }}
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from '../../../adapter-vue';
+import {
+  TUITranslateService,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import Icon from '../../common/Icon.vue';
+import addSVG from '../../../assets/icon/add.svg';
+import backSVG from '../../../assets/icon/back.svg';
+import { isPC } from '../../../utils/env';
+import { debounce } from '../../../utils/lodash';
+import { IContactSearchResult } from '../../../interface';
+
+const searchingPlaceholder = TUITranslateService.t('TUIContact.输入ID');
+const isSearching = ref<boolean>(false);
+const searchValue = ref<string>('');
+const searchResult = ref<IContactSearchResult>({
+  user: {
+    label: '联系人',
+    list: [],
+  },
+  group: {
+    label: '群聊',
+    list: [],
+  },
+});
+
+const changeContactSearchingStatus = debounce(function (status: boolean) {
+  isSearching.value = status;
+}, 200);
+
+const search = async () => {
+  if (!searchValue.value) {
+    return;
+  }
+  TUICore.callService({
+    serviceName: TUIConstants.TUISearch.SERVICE.NAME,
+    method: TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_USER,
+    params: {
+      userID: searchValue.value,
+    },
+  })
+    .then((res: any) => {
+      searchResult.value.user.list = res.data;
+    })
+    .catch((error: any) => {
+      searchResult.value.user.list = [];
+      console.warn('search user error', error);
+    });
+  TUICore.callService({
+    serviceName: TUIConstants.TUISearch.SERVICE.NAME,
+    method: TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_GROUP,
+    params: {
+      groupID: searchValue.value,
+    },
+  })
+    .then((res: any) => {
+      searchResult.value.group.list = [res.data.group];
+    })
+    .catch((error: any) => {
+      searchResult.value.group.list = [];
+      console.warn('search group error', error);
+    });
+};
+watch(
+  () => searchResult.value,
+  () => {
+    TUIStore.update(
+      StoreName.CUSTOM,
+      'currentContactSearchResult',
+      searchResult.value,
+    );
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+watch(
+  () => isSearching.value,
+  () => {
+    TUIStore.update(
+      StoreName.CUSTOM,
+      'currentContactSearchingStatus',
+      isSearching.value,
+    );
+    if (isSearching.value) {
+      searchValue.value = '';
+      searchResult.value.user.list = [];
+      searchResult.value.group.list = [];
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+TUIGlobal.updateContactSearch = search;
+TUIGlobal.closeSearching = () => {
+  isSearching.value = false;
+};
+</script>
+<style lang="scss" scoped>
+.tui-contact-search {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  border-bottom: 1px solid #f4f5f9;
+  flex-direction: column;
+
+  &-header,
+  &-main {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &-header {
+    user-select: none;
+    cursor: pointer;
+
+    &-icon {
+      padding-right: 10px;
+    }
+
+    &-title {
+      font-size: 14px;
+    }
+  }
+
+  &-main {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+
+    &-input {
+      flex: 1;
+      font-size: 14px;
+      border-radius: 5px;
+      padding: 7px;
+      border: 1px solid #ddd;
+    }
+
+    &-input:focus {
+      outline: none;
+      border: 1px solid #006eff;
+    }
+
+    &-cancel {
+      padding-left: 10px;
+      user-select: none;
+      cursor: pointer;
+    }
+  }
+
+  &-h5 {
+    &-header {
+      width: 100%;
+    }
+  }
+}
+
+.tui-contact-searching-h5-header {
+  padding-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+
+  .tui-contact-search-h5-header-title {
+    flex: 1;
+    text-align: center;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 30px;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIContact/index.ts b/txim/src/TUIKit/components/TUIContact/index.ts
new file mode 100644
index 00000000..66d43a9a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/index.ts
@@ -0,0 +1,5 @@
+import TUIContact from './index.vue';
+import Server from './server';
+Server.getInstance();
+
+export default TUIContact;
diff --git a/txim/src/TUIKit/components/TUIContact/index.vue b/txim/src/TUIKit/components/TUIContact/index.vue
new file mode 100644
index 00000000..9b4292fd
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <SelectFriend v-if="isShowSelectFriend" />
+  <div
+    v-else-if="isShowContactList"
+    :class="['tui-contact', !isPC && 'tui-contact-h5']"
+  >
+    <div :class="['tui-contact-left', !isPC && 'tui-contact-h5-left']">
+      <ContactSearch />
+      <ContactList :class="['tui-contact-left-list', !isPC && 'tui-contact-h5-left-list']" />
+    </div>
+    <div
+      v-if="isShowContactInfo"
+      :class="['tui-contact-right', !isPC && 'tui-contact-h5-right']"
+    >
+      <ContactInfo @switchConversation="switchConversation" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { ref, watchEffect } from '../../adapter-vue';
+import { isPC, isUniFrameWork } from '../../utils/env';
+
+import SelectFriend from './select-friend/index.vue';
+import ContactSearch from './contact-search/index.vue';
+import ContactList from './contact-list/index.vue';
+import ContactInfo from './contact-info/index.vue';
+
+const emits = defineEmits(['switchConversation']);
+
+const props = defineProps({
+  // web/h5 single page application display format, uniapp please ignore
+  displayType: {
+    type: String,
+    default: 'contactList', // "contactList" /  "selectFriend"
+    require: false,
+  },
+});
+
+const displayTypeRef = ref<string>(props.displayType || 'contactList');
+const isShowSelectFriend = ref(false);
+const isShowContactList = ref(true);
+const isShowContactInfo = ref(true);
+
+watchEffect(() => {
+  isShowContactList.value = props?.displayType !== 'selectFriend';
+});
+
+TUIStore.watch(StoreName.CUSTOM, {
+  isShowSelectFriendComponent: (data: any) => {
+    if (!isUniFrameWork && props?.displayType === 'selectFriend') {
+      isShowSelectFriend.value = data;
+      isShowContactList.value = false;
+      return;
+    }
+    if (data) {
+      isShowSelectFriend.value = true;
+      if (isUniFrameWork) {
+        displayTypeRef.value = 'selectFriend';
+        TUIGlobal?.hideTabBar();
+      }
+    } else {
+      isShowSelectFriend.value = false;
+      if (isUniFrameWork) {
+        displayTypeRef.value = props.displayType;
+        TUIGlobal?.showTabBar()?.catch(() => { /* ignore */ });
+      }
+    }
+  },
+  currentContactInfo: (contactInfo: any) => {
+    isShowContactInfo.value = isPC || (contactInfo && typeof contactInfo === 'object' && Object.keys(contactInfo)?.length > 0);
+  },
+});
+
+const switchConversation = (data: any) => {
+  isUniFrameWork
+  && TUIGlobal?.navigateTo({
+    url: '/TUIKit/components/TUIChat/index',
+  });
+  emits('switchConversation', data);
+};
+
+</script>
+<style lang="scss" scoped>
+@import "../../assets/styles/common";
+
+.tui-contact {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+
+  &-left {
+    min-width: 285px;
+    flex: 0 0 24%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-right {
+    border-left: 1px solid #f4f5f9;
+    flex: 1;
+    overflow: hidden;
+  }
+}
+
+.tui-contact-h5 {
+  position: relative;
+
+  &-left,
+  &-right {
+    width: 100%;
+    height: 100%;
+    flex: 1;
+  }
+
+  &-right {
+    position: absolute;
+    z-index: 100;
+  }
+
+  &-left {
+    &-list {
+      overflow-y: auto;
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIContact/select-friend/index.ts b/txim/src/TUIKit/components/TUIContact/select-friend/index.ts
new file mode 100644
index 00000000..cbc8173f
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/select-friend/index.ts
@@ -0,0 +1,3 @@
+import SelectFriend from './index.vue';
+
+export default SelectFriend;
diff --git a/txim/src/TUIKit/components/TUIContact/select-friend/index.vue b/txim/src/TUIKit/components/TUIContact/select-friend/index.vue
new file mode 100644
index 00000000..7e3f8219
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/select-friend/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <SelectUser
+    :isRadio="selectOptions.isRadio"
+    :isNeedSearch="selectOptions.isNeedSearch"
+    :title="selectOptions.title"
+    :userList="userList"
+    @search="handleSearch"
+    @complete="handleSelectedResult"
+  />
+</template>
+<script lang="ts" setup>
+import {
+  TUIFriendService,
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref, watchEffect } from '../../../adapter-vue';
+import { Toast, TOAST_TYPE } from '../../common/Toast/index';
+import TUICore from '@tencentcloud/tui-core';
+import SelectUser from '../../common/SelectUser/index.vue';
+import Server from '../server';
+const TUIContactServer = Server.getInstance();
+const TUIConstants = TUIContactServer.constants;
+
+const needSearch = ref(false);
+const friendList = ref([]);
+const userList = ref([]);
+const TUISearchServer = ref<any>(null);
+const selectOptions = ref({
+  isRadio: false,
+  isNeedSearch: false,
+  title: '',
+});
+
+const generateSearchServer = (isNeedSearch: any) => {
+  TUISearchServer.value = TUICore.getService(TUIConstants.TUISearch.SERVICE.NAME);
+  if (TUISearchServer.value) {
+    needSearch.value = isNeedSearch;
+  } else {
+    console.warn('请添加 TUISearch 组件');
+  }
+};
+
+watchEffect(() => {
+  const params = TUIContactServer.getOnCallParams(TUIConstants.TUIContact.SERVICE.METHOD.SELECT_FRIEND);
+  selectOptions.value.title = params.title;
+  selectOptions.value.isRadio = params.isRadio;
+  selectOptions.value.isNeedSearch = params.isNeedSearch;
+  if (params.isNeedSearch) {
+    generateSearchServer(params.isNeedSearch);
+  }
+  TUIFriendService.getFriendList().then((res: any) => {
+    friendList.value = res.data.map((item: any) => item.profile);
+    userList.value = friendList.value;
+  }).catch((err: any) => {
+    console.warn('getFriendList error:', err);
+  });
+});
+
+const handleSelectedResult = (memberList: Array<any>) => {
+  TUIStore.update(StoreName.CUSTOM, 'isShowSelectFriendComponent', false);
+  const callback = TUIContactServer.getOnCallCallback(TUIConstants.TUIContact.SERVICE.METHOD.SELECT_FRIEND);
+  callback && callback(memberList);
+};
+
+const searchFail = () => {
+  Toast({
+    message: TUITranslateService.t('TUIGroup.该用户不存在'),
+    type: TOAST_TYPE.ERROR,
+  });
+  userList.value = [...friendList.value];
+};
+
+const handleSearch = async (val: string) => {
+  if (!val) {
+    return userList.value = friendList.value;
+  }
+
+  try {
+    const imResponse: any = await TUISearchServer.value.searchUser(val);
+    if (!imResponse.data[0]) {
+      return searchFail();
+    }
+    userList.value = imResponse.data;
+    const searchAllResult = friendList.value.filter((item: any) => item.userID === imResponse.data[0].userID);
+    friendList.value = searchAllResult.length ? friendList.value : [...friendList.value, ...userList.value];
+  } catch (error) {
+    return searchFail();
+  }
+};
+</script>
diff --git a/txim/src/TUIKit/components/TUIContact/server.ts b/txim/src/TUIKit/components/TUIContact/server.ts
new file mode 100644
index 00000000..f788191c
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/server.ts
@@ -0,0 +1,43 @@
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { isUniFrameWork } from '../../utils/env';
+
+export default class TUIContactServer {
+  static instance: TUIContactServer;
+  private onCallParamsMap: Map<string, any>;
+  private onCallCallbackMap: Map<string, () => void>;
+  public constants: typeof TUIConstants;
+  constructor() {
+    TUICore.registerService(TUIConstants.TUIContact.SERVICE.NAME, this);
+    this.onCallParamsMap = new Map();
+    this.onCallCallbackMap = new Map();
+    this.constants = TUIConstants;
+  }
+
+  static getInstance(): TUIContactServer {
+    if (!TUIContactServer.instance) {
+      TUIContactServer.instance = new TUIContactServer();
+    }
+    return TUIContactServer.instance;
+  }
+
+  public getOnCallParams(method: string): any {
+    return this.onCallParamsMap.get(method);
+  }
+
+  public getOnCallCallback(method: string) {
+    return this.onCallCallbackMap.get(method);
+  }
+
+  public async onCall(method: string, params: Record<string, any>, callback: () => void): Promise<void> {
+    this.onCallParamsMap.set(method, params);
+    this.onCallCallbackMap.set(method, callback);
+    if (method === TUIConstants.TUIContact.SERVICE.METHOD.SELECT_FRIEND) {
+      TUIStore.update(StoreName.CUSTOM, 'isShowSelectFriendComponent', true);
+      isUniFrameWork && TUIGlobal?.reLaunch({
+        url: '/TUIKit/components/TUIContact/index',
+      });
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIContact/utils/index.ts b/txim/src/TUIKit/components/TUIContact/utils/index.ts
new file mode 100644
index 00000000..fa679089
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIContact/utils/index.ts
@@ -0,0 +1,359 @@
+import TUIChatEngine, {
+  TUIFriendService,
+  TUIConversationService,
+  TUIGroupService,
+  TUIUserService,
+  TUITranslateService,
+  AddFriendParams,
+  JoinGroupParams,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { Toast, TOAST_TYPE } from '../../common/Toast/index';
+
+export const generateAvatar = (item: any): string => {
+  return (
+    item?.avatar
+    || item?.profile?.avatar
+    || (item?.groupID && 'https://web.sdk.qcloud.com/im/assets/images/Public.svg')
+    || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+  );
+};
+
+export const generateName = (item: any): string => {
+  return (
+    item?.remark
+    || item?.name
+    || item?.profile?.nick
+    || item?.nick
+    || item?.groupID
+    || item?.userID
+    || ''
+  );
+};
+
+export const generateContactInfoName = (item: any): string => {
+  return (
+    item?.name
+    || item?.profile?.nick
+    || item?.nick
+    || item?.groupID
+    || item?.userID
+    || ''
+  );
+};
+
+// Parse the basic information display content of the contactInfo module
+// Group information display: group ID group type
+// User information display: user ID personal signature
+export const generateContactInfoBasic = (
+  contactInfo: any,
+): any[] => {
+  const res = [
+    {
+      label: contactInfo?.groupID ? '群ID' : 'ID',
+      data: contactInfo?.groupID || contactInfo?.userID || '',
+    },
+  ];
+  if (!isApplicationType(contactInfo)) {
+    res.push({
+      label: contactInfo?.groupID ? '群类型' : '个性签名',
+      data: contactInfo?.type || contactInfo?.profile?.selfSignature || '',
+    });
+  }
+  return res;
+};
+
+export const isApplicationType = (info: any) => {
+  return (
+    info?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
+    || info?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
+  );
+};
+
+export const isFriend = (info: any): Promise<boolean> => {
+  return new Promise((resolve, reject) => {
+    if (info?.groupID || !info?.userID) {
+      resolve(false);
+      return;
+    }
+    if (info?.addTime) {
+      resolve(true);
+      return;
+    }
+    TUIFriendService.checkFriend({
+      userIDList: [info?.userID],
+      type: TUIChatEngine.TYPES.SNS_CHECK_TYPE_BOTH,
+    })
+      .then((res: any) => {
+        switch (res?.data?.successUserIDList[0]?.relation) {
+          // No friend relationship: A does not have B in his friend list, and B does not have A in his friend list
+          case TUIChatEngine.TYPES.SNS_TYPE_NO_RELATION:
+            resolve(false);
+            break;
+          // Single-item friend: A has B in his friend list, but B does not have A in his friend list
+          case TUIChatEngine.TYPES.SNS_TYPE_A_WITH_B:
+            resolve(false);
+            break;
+          // Single-item friend: A does not have B in his friend list, but B has A in his friend list
+          case TUIChatEngine.TYPES.SNS_TYPE_B_WITH_A:
+            resolve(false);
+            break;
+          // Two-way friendship
+          case TUIChatEngine.TYPES.SNS_TYPE_BOTH_WAY:
+            resolve(true);
+            break;
+          default:
+            resolve(false);
+            break;
+        }
+      })
+      .catch((error: any) => {
+        console.warn('checkFriend error', error);
+        reject(error);
+      });
+  });
+};
+
+// Change friend‘s remark
+export const updateFriendRemark = (userID: string, remark: string) => {
+  // eslint-disable-next-line no-control-regex
+  if (remark?.replace(/[^\u0000-\u00ff]/g, 'aa')?.length > 96) {
+    Toast({
+      message: TUITranslateService.t('TUIContact.修改备注失败: 备注长度不得超过 96 字节'),
+      type: TOAST_TYPE.ERROR,
+    });
+    return;
+  }
+  TUIFriendService.updateFriend({
+    userID,
+    remark,
+  })
+    .then(() => {
+      Toast({
+        message: TUITranslateService.t('TUIContact.修改备注成功'),
+        type: TOAST_TYPE.SUCCESS,
+      });
+    })
+    .catch((error: any) => {
+      console.warn('update friend remark failed:', error);
+      Toast({
+        message: TUITranslateService.t('TUIContact.修改备注失败'),
+        type: TOAST_TYPE.ERROR,
+      });
+    });
+};
+
+// Delete one friend
+export const deleteFriend = (userID: string) => {
+  TUIFriendService.deleteFriend({
+    userIDList: [userID],
+    type: TUIChatEngine.TYPES.SNS_DELETE_TYPE_BOTH,
+  })
+    .then((res: any) => {
+      const { successUserIDList } = res.data;
+      if (successUserIDList[0].userID === userID) {
+        Toast({
+          message: TUITranslateService.t('TUIContact.删除好友成功'),
+          type: TOAST_TYPE.SUCCESS,
+        });
+      } else {
+        Toast({
+          message: TUITranslateService.t('TUIContact.删除好友失败'),
+          type: TOAST_TYPE.ERROR,
+        });
+      }
+    })
+    .catch((error: any) => {
+      console.warn('delete friend failed:', error);
+      Toast({
+        message: TUITranslateService.t('TUIContact.删除好友失败'),
+        type: TOAST_TYPE.ERROR,
+      });
+    });
+};
+
+// Add friend
+export const addFriend = (params: AddFriendParams) => {
+  TUIFriendService.addFriend(params)
+    .then(() => {
+      Toast({
+        message: TUITranslateService.t('TUIContact.申请已发送'),
+        type: TOAST_TYPE.SUCCESS,
+      });
+    })
+    .catch((error: any) => {
+      console.warn('delete friend failed:', error);
+      Toast({
+        message: TUITranslateService.t('TUIContact.申请发送失败'),
+        type: TOAST_TYPE.ERROR,
+      });
+    });
+};
+
+// Enter conversation
+export const enterConversation = (item: any) => {
+  const conversationID = item?.groupID
+    ? `GROUP${item?.groupID}`
+    : `C2C${item?.userID}`;
+  TUIConversationService.switchConversation(conversationID).catch(
+    (error: any) => {
+      console.warn('switch conversation failed:', error);
+      Toast({
+        message: TUITranslateService.t('TUIContact.进入会话失败'),
+        type: TOAST_TYPE.ERROR,
+      });
+    },
+  );
+};
+
+// Accept friend application
+export const acceptFriendApplication = (userID: string) => {
+  TUIFriendService.acceptFriendApplication({
+    userID,
+    type: TUIChatEngine.TYPES.SNS_APPLICATION_AGREE_AND_ADD,
+  })
+    .then(() => {
+      Toast({
+        message: TUITranslateService.t('TUIContact.添加好友成功'),
+        type: TOAST_TYPE.SUCCESS,
+      });
+    })
+    .catch((error: any) => {
+      console.warn('accept friend application failed:', error);
+      Toast({
+        message: TUITranslateService.t('TUIContact.同意好友申请失败'),
+        type: TOAST_TYPE.ERROR,
+      });
+    });
+};
+
+// Refuse friend application
+export const refuseFriendApplication = (userID: string) => {
+  TUIFriendService.refuseFriendApplication(userID)
+    .then(() => {
+      Toast({
+        message: TUITranslateService.t('TUIContact.拒绝成功'),
+        type: TOAST_TYPE.SUCCESS,
+      });
+    })
+    .catch((error: any) => {
+      console.warn('accept friend application failed:', error);
+      Toast({
+        message: TUITranslateService.t('TUIContact.拒绝好友申请失败'),
+        type: TOAST_TYPE.ERROR,
+      });
+    });
+};
+
+// Dismiss group
+export const dismissGroup = (groupID: string) => {
+  TUIGroupService.dismissGroup(groupID)
+    .then(() => {
+      Toast({
+        message: TUITranslateService.t('TUIContact.解散群聊成功'),
+        type: TOAST_TYPE.SUCCESS,
+      });
+      TUIGlobal?.updateContactSearch && TUIGlobal?.updateContactSearch();
+    })
+    .catch((error: any) => {
+      console.warn('dismiss group failed:', error);
+      Toast({
+        message: TUITranslateService.t('TUIContact.解散群聊失败'),
+        type: TOAST_TYPE.ERROR,
+      });
+    });
+};
+
+// Quit group
+export const quitGroup = (groupID: string) => {
+  TUIGroupService.quitGroup(groupID)
+    .then(() => {
+      Toast({
+        message: TUITranslateService.t('TUIContact.退出群组成功'),
+        type: TOAST_TYPE.SUCCESS,
+      });
+    })
+    .catch((error: any) => {
+      console.warn('quit group failed:', error);
+      Toast({
+        message: TUITranslateService.t('TUIContact.退出群组失败'),
+        type: TOAST_TYPE.ERROR,
+      });
+    });
+};
+
+// Join group
+export const joinGroup = (groupID: string, applyMessage?: string) => {
+  TUIGroupService.joinGroup({
+    groupID,
+    applyMessage,
+  } as JoinGroupParams)
+    .then((imResponse: { data: { status?: string } }) => {
+      switch (imResponse?.data?.status) {
+        case TUIChatEngine.TYPES.JOIN_STATUS_WAIT_APPROVAL: // Wait for administrator approval
+          Toast({
+            message: TUITranslateService.t('TUIContact.等待管理员同意'),
+            type: TOAST_TYPE.SUCCESS,
+          });
+          break;
+        case TUIChatEngine.TYPES.JOIN_STATUS_SUCCESS: // Join group successfully
+          Toast({
+            message: TUITranslateService.t('TUIContact.加群成功'),
+            type: TOAST_TYPE.SUCCESS,
+          });
+          break;
+        case TUIChatEngine.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // Already in the group
+          Toast({
+            message: TUITranslateService.t('TUIContact.您已是群成员'),
+            type: TOAST_TYPE.SUCCESS,
+          });
+          break;
+        default:
+          break;
+      }
+    })
+    .catch((error: any) => {
+      console.warn('join group failed:', error);
+      Toast({
+        message: '申请入群失败',
+        type: TOAST_TYPE.ERROR,
+      });
+    });
+};
+
+// Add to blacklist
+export const addToBlacklist = (userID: string, successCallBack?: () => void) => {
+  TUIUserService.addToBlacklist({
+    userIDList: [userID],
+  })
+    .then(() => {
+      successCallBack && successCallBack();
+    })
+    .catch((error: any) => {
+      console.warn('add to blacklist failed:', error);
+      Toast({
+        message: TUITranslateService.t('TUIContact.加入黑名单失败'),
+        type: TOAST_TYPE.ERROR,
+      });
+    });
+};
+
+// Remove from Blacklist
+export const removeFromBlacklist = (
+  userID: string,
+  successCallBack?: () => void,
+) => {
+  TUIUserService.removeFromBlacklist({
+    userIDList: [userID],
+  })
+    .then(() => {
+      successCallBack && successCallBack();
+    })
+    .catch((error: any) => {
+      console.warn('remove from blacklist failed:', error);
+      Toast({
+        message: TUITranslateService.t('TUIContact.移除黑名单失败'),
+        type: TOAST_TYPE.ERROR,
+      });
+    });
+};
diff --git a/txim/src/TUIKit/components/TUIConversation/actions-menu/index.vue b/txim/src/TUIKit/components/TUIConversation/actions-menu/index.vue
new file mode 100644
index 00000000..b9c4a48c
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/actions-menu/index.vue
@@ -0,0 +1,232 @@
+<template>
+  <Overlay
+    :maskColor="'transparent'"
+    @onOverlayClick="() => emits('closeConversationActionMenu')"
+  >
+    <div
+      id="conversation-actions-menu"
+      ref="actionsMenuDomRef"
+      :class="[
+        isPC && 'actions-menu-pc',
+        'actions-menu',
+        !isHiddenActionsMenu && 'cancel-hidden',
+      ]"
+      :style="{
+        top: `${_actionsMenuPosition.top}px`,
+        left: `${_actionsMenuPosition.left}px`,
+      }"
+    >
+      <div
+        :class="['actions-menu-item']"
+        @click.stop="deleteConversation()"
+      >
+        {{ TUITranslateService.t("TUIConversation.删除会话") }}
+      </div>
+      <div
+        v-if="!(props.selectedConversation && props.selectedConversation.isPinned)"
+        :class="['actions-menu-item']"
+        @click.stop="handleItem({ name: CONV_OPERATION.ISPINNED })"
+      >
+        {{ TUITranslateService.t("TUIConversation.置顶会话") }}
+      </div>
+      <div
+        v-if="props.selectedConversation && props.selectedConversation.isPinned"
+        :class="['actions-menu-item']"
+        @click.stop="handleItem({ name: CONV_OPERATION.DISPINNED })"
+      >
+        {{ TUITranslateService.t("TUIConversation.取消置顶") }}
+      </div>
+      <div
+        v-if="!(props.selectedConversation && props.selectedConversation.isMuted)"
+        :class="['actions-menu-item']"
+        @click.stop="handleItem({ name: CONV_OPERATION.MUTE })"
+      >
+        {{ TUITranslateService.t("TUIConversation.消息免打扰") }}
+      </div>
+      <div
+        v-if="props.selectedConversation && props.selectedConversation.isMuted"
+        :class="['actions-menu-item']"
+        @click.stop="handleItem({ name: CONV_OPERATION.NOTMUTE })"
+      >
+        {{ TUITranslateService.t("TUIConversation.取消免打扰") }}
+      </div>
+    </div>
+    <Dialog
+      :show="isShowDeleteConversationDialog"
+      :center="true"
+      :isHeaderShow="isPC"
+      @submit="handleItem({ name: CONV_OPERATION.DELETE })"
+      @update:show="updateShowDeleteConversationDialog"
+    >
+      <p class="delDialog-title">
+        {{ TUITranslateService.t(deleteConversationDialogTitle) }}
+      </p>
+    </Dialog>
+  </Overlay>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  nextTick,
+  onMounted,
+  computed,
+  getCurrentInstance,
+} from '../../../adapter-vue';
+import TUIChatEngine, {
+  IConversationModel,
+  TUIStore,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { CONV_OPERATION } from '../../../constant';
+import { isPC, isUniFrameWork } from '../../../utils/env';
+import Overlay from '../../common/Overlay/index.vue';
+import Dialog from '../../common/Dialog/index.vue';
+
+interface IProps {
+  actionsMenuPosition: {
+    top: number;
+    left?: number;
+    conversationHeight?: number;
+  };
+  selectedConversation: IConversationModel | undefined;
+  selectedConversationDomRect: DOMRect | undefined;
+}
+
+const emits = defineEmits(['closeConversationActionMenu']);
+const props = defineProps<IProps>();
+
+const thisInstance = getCurrentInstance()?.proxy || getCurrentInstance();
+const actionsMenuDomRef = ref<HTMLElement | null>();
+const isHiddenActionsMenu = ref(true);
+const isShowDeleteConversationDialog = ref<boolean>(false);
+const currentConversation = TUIStore.getConversationModel(
+  props.selectedConversation?.conversationID || '',
+);
+const _actionsMenuPosition = ref<{
+  top: number;
+  left?: number;
+  conversationHeight?: number;
+}>(props.actionsMenuPosition);
+
+onMounted(() => {
+  checkExceedBounds();
+});
+
+const deleteConversationDialogTitle = computed(() => {
+  return props.selectedConversation?.type === TUIChatEngine.TYPES.CONV_C2C
+    ? 'TUIConversation.删除后，将清空该聊天的消息记录'
+    : props.selectedConversation?.type === TUIChatEngine.TYPES.CONV_GROUP ? 'TUIConversation.删除后，将清空该群聊的消息记录' : '';
+});
+function checkExceedBounds() {
+  // When the component is initially rendered, it executes and self-checks whether the boundary exceeds the screen, and handles it in nextTick.
+  nextTick(() => {
+    if (isUniFrameWork) {
+      // check exceed bounds
+      const query = TUIGlobal?.createSelectorQuery().in(thisInstance);
+      query
+        .select(`#conversation-actions-menu`)
+        .boundingClientRect((data) => {
+          if (data) {
+            // check if actionsMenu is exceed bottom of the screen
+            if (data.bottom > TUIGlobal?.getWindowInfo?.().windowHeight) {
+              _actionsMenuPosition.value = {
+                ...props.actionsMenuPosition,
+                top:
+                  props.actionsMenuPosition.top
+                  - (props.actionsMenuPosition.conversationHeight || 0)
+                  - data.height,
+              };
+            }
+            // check if actionsMenu is exceed right of the screen
+            if (_actionsMenuPosition.value.left + data.width + 5 > TUIGlobal.getWindowInfo().windowWidth) {
+              _actionsMenuPosition.value.left = TUIGlobal.getWindowInfo().windowWidth - data.width - 5;
+            }
+          }
+          isHiddenActionsMenu.value = false;
+        })
+        .exec();
+    } else {
+      // Handling the situation where the native Vue menu is lower than the screen
+      const rect = actionsMenuDomRef.value?.getBoundingClientRect();
+      // The PC side sets the position of actionsMenu according to the position of the mouse click, otherwise the default value of 167px is used
+      if (isPC && typeof props.actionsMenuPosition.left !== 'undefined') {
+        _actionsMenuPosition.value.left = props.actionsMenuPosition.left;
+      }
+      if (rect && rect.bottom > window.innerHeight) {
+        _actionsMenuPosition.value.top
+          = props.actionsMenuPosition.top
+          - (props.actionsMenuPosition.conversationHeight || 0)
+          - rect.height;
+      }
+      isHiddenActionsMenu.value = false;
+    }
+  });
+}
+
+const handleItem = (params: { name: string }) => {
+  const { name } = params;
+  const conversationModel = currentConversation;
+  if (!name || !conversationModel || !conversationModel.conversationID) {
+    return;
+  }
+  switch (name) {
+    case CONV_OPERATION.DELETE:
+      conversationModel?.deleteConversation();
+      break;
+    case CONV_OPERATION.ISPINNED:
+      conversationModel?.pinConversation();
+      break;
+    case CONV_OPERATION.DISPINNED:
+      conversationModel?.pinConversation();
+      break;
+    case CONV_OPERATION.MUTE:
+      conversationModel?.muteConversation();
+      break;
+    case CONV_OPERATION.NOTMUTE:
+      conversationModel?.muteConversation();
+      break;
+  }
+  emits('closeConversationActionMenu');
+};
+
+const deleteConversation = () => {
+  isShowDeleteConversationDialog.value = true;
+};
+
+const updateShowDeleteConversationDialog = (isShow: boolean) => {
+  if (!isShow) {
+    emits('closeConversationActionMenu');
+  }
+  isShowDeleteConversationDialog.value = isShow;
+};
+</script>
+
+<style scoped lang="scss">
+.cancel-hidden {
+  opacity: 1 !important;
+}
+
+.actions-menu {
+  position: absolute;
+  left: 164px;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.06);
+  background-color: #fff;
+  overflow: hidden;
+  opacity: 0;
+
+  .actions-menu-item {
+    cursor: pointer;
+    padding: 10px 20px;
+    font-size: 12px;
+    word-break: keep-all;
+  }
+
+  &.actions-menu-pc .actions-menu-item:hover {
+    background-color: #eee;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIConversation/conversation-header/index.ts b/txim/src/TUIKit/components/TUIConversation/conversation-header/index.ts
new file mode 100644
index 00000000..e9764676
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/conversation-header/index.ts
@@ -0,0 +1,3 @@
+import ConversationHeader from './index.vue';
+
+export default ConversationHeader;
diff --git a/txim/src/TUIKit/components/TUIConversation/conversation-header/index.vue b/txim/src/TUIKit/components/TUIConversation/conversation-header/index.vue
new file mode 100644
index 00000000..4019986a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/conversation-header/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <div
+    :ref="convHeaderRef"
+    class="tui-conversation-header"
+  >
+    <ul
+      v-if="menuList.length > 0"
+      class="list"
+    >
+      <li
+        v-for="(item, index) in menuList"
+        :key="index"
+        class="list-item"
+      >
+        <main
+          class="tui-conversation-header-item"
+          @click.stop="handleMenu(item)"
+        >
+          <Icon
+            v-if="item.icon && !item.data.children"
+            class="tui-conversation-header-item-icon"
+            :file="item.icon"
+          />
+          <i
+            v-else
+            class="plus"
+          />
+          <h1 class="tui-conversation-header-item-title">
+            {{ item.text }}
+          </h1>
+        </main>
+      </li>
+    </ul>
+    <ul
+      v-if="showChildren.length > 0"
+      class="tui-conversation-header-children list"
+    >
+      <li
+        v-for="(childrenItem, childrenIndex) in showChildren"
+        :key="childrenIndex"
+        class="list-item"
+      >
+        <main
+          class="tui-conversation-header-item"
+          @click="handleMenu(childrenItem)"
+        >
+          <Icon
+            v-if="childrenItem.icon"
+            class="tui-conversation-header-item-icon"
+            :file="childrenItem.icon"
+          />
+          <h1 class="tui-conversation-header-item-title">
+            {{ childrenItem.text }}
+          </h1>
+        </main>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, ref, onMounted } from '../../../adapter-vue';
+import Icon from '../../common/Icon.vue';
+import Server, { IMenuItem } from './server';
+
+const showChildren = ref<Array<IMenuItem>>([]);
+const convHeaderRef = ref<HTMLElement | undefined>();
+
+const menuList = computed(() => {
+  return Server.getInstance().getMenu();
+});
+
+onMounted(() => {
+  showChildren.value = [];
+});
+
+const handleMenu = (item: IMenuItem) => {
+  const { data: { children }, listener = { onClicked: () => {} } } = item;
+  if (children) {
+    showChildren.value = showChildren.value.length > 0 ? [] : children;
+  } else {
+    listener.onClicked(item);
+    closeChildren();
+  }
+};
+
+const closeChildren = () => {
+  showChildren.value = [];
+};
+
+defineExpose({
+  closeChildren,
+});
+
+</script>
+
+<style lang="scss" scoped src="../style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIConversation/conversation-header/server.ts b/txim/src/TUIKit/components/TUIConversation/conversation-header/server.ts
new file mode 100644
index 00000000..6f2576c1
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/conversation-header/server.ts
@@ -0,0 +1,78 @@
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { isPC } from '../../../utils/env';
+import createGroup from '../../../assets/icon/start-group.svg';
+import C2C from '../../../assets/icon/icon-c2c.svg';
+import { CONV_CREATE_TYPE } from '../../../constant';
+
+export interface IMenuItem {
+  icon?: string;
+  text: string;
+  data: {
+    name: string;
+    children?: any[];
+  };
+  listener?: {
+    onClicked: (...args: any[]) => void;
+  };
+}
+
+export default class ConversationHeaderServer {
+  static instance: ConversationHeaderServer;
+
+  static getInstance(): ConversationHeaderServer {
+    if (!ConversationHeaderServer.instance) {
+      ConversationHeaderServer.instance = new ConversationHeaderServer();
+    }
+    return ConversationHeaderServer.instance;
+  }
+
+  public getMenu(): any[] {
+    const list = this.generateMenuList();
+    if (!isPC && list.length > 0) {
+      return [{
+        text: TUITranslateService.t('TUIConversation.发起会话'),
+        data: {
+          name: 'all',
+          children: list,
+        },
+      }];
+    }
+    return list;
+  }
+
+  private generateMenuList(): any[] {
+    const list = [
+      {
+        icon: C2C,
+        text: TUITranslateService.t('TUIConversation.发起单聊'),
+        data: {
+          name: CONV_CREATE_TYPE.TYPEC2C,
+        },
+        listener: {
+          onClicked: this.createConversation.bind(this),
+        },
+      },
+      {
+        icon: createGroup,
+        text: TUITranslateService.t('TUIConversation.发起群聊'),
+        data: {
+          name: CONV_CREATE_TYPE.TYPEGROUP,
+        },
+        listener: {
+          onClicked: this.createConversation.bind(this),
+        },
+      },
+    ];
+    return list;
+  }
+
+  private createConversation(item: IMenuItem) {
+    // Create a conversation and notify conversationServer via TUICore.callService
+    TUICore.callService({
+      serviceName: TUIConstants.TUIConversation.SERVICE.NAME,
+      method: TUIConstants.TUIConversation.SERVICE.METHOD.CREATE_CONVERSATION,
+      params: item,
+    });
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIConversation/conversation-list/index.vue b/txim/src/TUIKit/components/TUIConversation/conversation-list/index.vue
new file mode 100644
index 00000000..a0a82374
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/conversation-list/index.vue
@@ -0,0 +1,310 @@
+<template>
+  <div
+    ref="conversationListInnerDomRef"
+    class="tui-conversation-list"
+  >
+    <ActionsMenu
+      v-if="isShowOverlay"
+      :selectedConversation="currentConversation"
+      :actionsMenuPosition="actionsMenuPosition"
+      :selectedConversationDomRect="currentConversationDomRect"
+      @closeConversationActionMenu="closeConversationActionMenu"
+    />
+    <div
+      v-for="(conversation, index) in conversationList"
+      :id="`convlistitem-${index}`"
+      :key="index"
+      :class="[
+        'tui-conversation-content',
+        isMobile && 'tui-conversation-content-h5 disable-select',
+      ]"
+    >
+      <div
+        :class="[
+          isPC && 'isPC',
+          'tui-conversation-item',
+          currentConversationID === conversation.conversationID &&
+            'tui-conversation-item-selected',
+          conversation.isPinned && 'tui-conversation-item-pinned',
+        ]"
+        @click="enterConversationChat(conversation.conversationID)"
+        @longpress="showConversationActionMenu($event, conversation, index)"
+        @contextmenu="showConversationActionMenu($event, conversation, index, true)"
+      >
+        <aside class="left">
+          <Avatar
+            useSkeletonAnimation
+            :url="conversation.getAvatar()"
+            size="30px"
+          />
+          <div
+            v-if="userOnlineStatusMap && isShowUserOnlineStatus(conversation)"
+            :class="[
+              'online-status',
+              Object.keys(userOnlineStatusMap).length > 0 &&
+                Object.keys(userOnlineStatusMap).includes(
+                  conversation.userProfile.userID
+                ) &&
+                userOnlineStatusMap[conversation.userProfile.userID]
+                  .statusType === 1
+                ? 'online-status-online'
+                : 'online-status-offline',
+            ]"
+          />
+          <span
+            v-if="conversation.unreadCount > 0 && !conversation.isMuted"
+            class="num"
+          >
+            {{
+              conversation.unreadCount > 99 ? "99+" : conversation.unreadCount
+            }}
+          </span>
+          <span
+            v-if="conversation.unreadCount > 0 && conversation.isMuted"
+            class="num-notify"
+          />
+        </aside>
+        <div class="content">
+          <div class="content-header">
+            <label class="content-header-label">
+              <p class="name">{{ conversation.getShowName() }}</p>
+            </label>
+            <div class="middle-box">
+              <span
+                v-if="conversation.draftText && conversation.conversationID !== currentConversationID"
+                class="middle-box-draft"
+              >{{ TUITranslateService.t('TUIChat.[草稿]') }}</span>
+              <span
+                v-else-if="
+                  conversation.type === 'GROUP' &&
+                    conversation.groupAtInfoList &&
+                    conversation.groupAtInfoList.length > 0
+                "
+                class="middle-box-at"
+              >{{ conversation.getGroupAtInfo() }}</span>
+              <div class="middle-box-content">
+                {{ conversation.getLastMessage("text") }}
+              </div>
+            </div>
+          </div>
+          <div class="content-footer">
+            <span class="time">{{ conversation.getLastMessage("time") }}</span>
+            <Icon
+              v-if="conversation.isMuted"
+              :file="muteIcon"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface IUserStatus {
+  statusType: number;
+  customStatus: string;
+}
+
+interface IUserStatusMap {
+  [userID: string]: IUserStatus;
+}
+
+import { ref, onMounted, onUnmounted } from '../../../adapter-vue';
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  TUIConversationService,
+  TUITranslateService,
+  IConversationModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal, isIOS, addLongPressListener } from '@tencentcloud/universal-api';
+import Icon from '../../common/Icon.vue';
+import Avatar from '../../common/Avatar/index.vue';
+import ActionsMenu from '../actions-menu/index.vue';
+import muteIcon from '../../../assets/icon/mute.svg';
+import { isPC, isH5, isUniFrameWork, isMobile } from '../../../utils/env';
+
+const emits = defineEmits(['handleSwitchConversation', 'getPassingRef']);
+const currentConversation = ref<IConversationModel>();
+const currentConversationID = ref<string>();
+const currentConversationDomRect = ref<DOMRect>();
+const isShowOverlay = ref<boolean>(false);
+const conversationList = ref<IConversationModel[]>([]);
+const conversationListDomRef = ref<HTMLElement | undefined>();
+const conversationListInnerDomRef = ref<HTMLElement | undefined>();
+const actionsMenuPosition = ref<{
+  top: number;
+  left: number | undefined;
+  conversationHeight: number | undefined;
+}>({
+  top: 0,
+  left: undefined,
+  conversationHeight: undefined,
+});
+const displayOnlineStatus = ref(false);
+const userOnlineStatusMap = ref<IUserStatusMap>();
+
+let lastestOpenActionsMenuTime: number | null = null;
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdated,
+    conversationList: onConversationListUpdated,
+    currentConversation: onCurrentConversationUpdated,
+  });
+
+  TUIStore.watch(StoreName.USER, {
+    displayOnlineStatus: onDisplayOnlineStatusUpdated,
+    userStatusList: onUserStatusListUpdated,
+  });
+
+  if (!isUniFrameWork && isIOS && !isPC) {
+    addLongPressHandler();
+  }
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdated,
+    conversationList: onConversationListUpdated,
+    currentConversation: onCurrentConversationUpdated,
+  });
+
+  TUIStore.unwatch(StoreName.USER, {
+    displayOnlineStatus: onDisplayOnlineStatusUpdated,
+    userStatusList: onUserStatusListUpdated,
+  });
+});
+
+const isShowUserOnlineStatus = (conversation: IConversationModel): boolean => {
+  return (
+    displayOnlineStatus.value
+    && conversation.type === TUIChatEngine.TYPES.CONV_C2C
+  );
+};
+
+const showConversationActionMenu = (
+  event: Event,
+  conversation: IConversationModel,
+  index: number,
+  isContextMenuEvent?: boolean,
+) => {
+  if (isContextMenuEvent) {
+    event.preventDefault();
+    if (isUniFrameWork) {
+      return;
+    }
+  }
+  currentConversation.value = conversation;
+  lastestOpenActionsMenuTime = Date.now();
+  getActionsMenuPosition(event, index);
+};
+
+const closeConversationActionMenu = () => {
+  // Prevent continuous triggering of overlay tap events
+  if (
+    lastestOpenActionsMenuTime
+    && Date.now() - lastestOpenActionsMenuTime > 300
+  ) {
+    currentConversation.value = undefined;
+    isShowOverlay.value = false;
+  }
+};
+
+const getActionsMenuPosition = (event: Event, index: number) => {
+  if (isUniFrameWork) {
+    if (typeof conversationListDomRef.value === 'undefined') {
+      emits('getPassingRef', conversationListDomRef);
+    }
+    const query = TUIGlobal?.createSelectorQuery().in(conversationListDomRef.value);
+    query.select(`#convlistitem-${index}`).boundingClientRect((data) => {
+      if (data) {
+        actionsMenuPosition.value = {
+          // The uni-page-head of uni-h5 is not considered a member of the viewport, so the height of the head is manually increased.
+          top: data.bottom + (isH5 ? 44 : 0),
+          // @ts-expect-error in uniapp event has touches property
+          left: event.touches[0].pageX,
+          conversationHeight: data.height,
+        };
+        isShowOverlay.value = true;
+      }
+    }).exec();
+  } else {
+    const rect = ((event.currentTarget || event.target) as HTMLElement)?.getBoundingClientRect() || {};
+    if (rect) {
+      actionsMenuPosition.value = {
+        top: rect.bottom,
+        left: isPC ? (event as MouseEvent).clientX : undefined,
+        conversationHeight: rect.height,
+      };
+    }
+    isShowOverlay.value = true;
+  }
+};
+
+const enterConversationChat = (conversationID: string) => {
+  emits('handleSwitchConversation', conversationID);
+  TUIConversationService.switchConversation(conversationID);
+};
+
+function addLongPressHandler() {
+  if (!conversationListInnerDomRef.value) {
+    return;
+  }
+  addLongPressListener({
+    element: conversationListInnerDomRef.value,
+    onLongPress: (event, target) => {
+      const index = (Array.from(conversationListInnerDomRef.value!.children) as HTMLElement[]).indexOf(target!);
+      showConversationActionMenu(event, conversationList.value[index], index);
+    },
+    options: {
+      eventDelegation: {
+        subSelector: '.tui-conversation-content',
+      },
+    },
+  });
+}
+
+function onCurrentConversationUpdated(conversation: IConversationModel) {
+  currentConversation.value = conversation;
+}
+
+function onConversationListUpdated(list: IConversationModel[]) {
+  conversationList.value = list;
+}
+
+function onCurrentConversationIDUpdated(id: string) {
+  currentConversationID.value = id;
+}
+
+function onDisplayOnlineStatusUpdated(status: boolean) {
+  displayOnlineStatus.value = status;
+}
+
+function onUserStatusListUpdated(list: Map<string, IUserStatus>) {
+  if (list.size !== 0) {
+    userOnlineStatusMap.value = [...list.entries()].reduce(
+      (obj, [key, value]) => {
+        obj[key] = value;
+        return obj;
+      },
+      {} as IUserStatusMap,
+    );
+  }
+}
+// Expose to the parent component and close actionsMenu when a sliding event is detected
+defineExpose({ closeChildren: closeConversationActionMenu });
+</script>
+
+<style lang="scss" scoped src="./style/index.scss"></style>
+<style lang="scss" scoped>
+.disable-select {
+  -webkit-touch-callout:none;
+  -webkit-user-select:none;
+  -khtml-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIConversation/conversation-list/style/color.scss b/txim/src/TUIKit/components/TUIConversation/conversation-list/style/color.scss
new file mode 100644
index 00000000..2c544c87
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/conversation-list/style/color.scss
@@ -0,0 +1,77 @@
+.tui-conversation {
+  &-item {
+    &-pinned {
+      background: #eef0f3;
+    }
+
+    &-selected,
+    &-toggled {
+      background: rgba(0, 110, 255, 0.1);
+    }
+
+    .left {
+      .num {
+        background: red;
+        color: #fff;
+
+        &-notify {
+          background: red;
+          color: #fff;
+        }
+      }
+    }
+
+    .content-header {
+      &-label {
+        color: #000;
+      }
+
+      .name {
+        font-weight: 400;
+        letter-spacing: 0;
+        color: #000;
+      }
+    }
+
+    .middle-box {
+      &-at, &-draft {
+        color: #fb5059 !important;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+      }
+
+      &-content {
+        font-weight: 400;
+        color: #999;
+        letter-spacing: 0;
+      }
+    }
+
+    .content-footer {
+      color: #999;
+
+      .time {
+        color: #bbb;
+      }
+    }
+  }
+
+  &-content {
+    .dialog {
+      background: #fff;
+
+      &-item {
+        background: #fff;
+        border: 1px solid #e0e0e0;
+        box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.06);
+      }
+
+      .conversation-options {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: #4f4f4f;
+        letter-spacing: 0;
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIConversation/conversation-list/style/h5.scss b/txim/src/TUIKit/components/TUIConversation/conversation-list/style/h5.scss
new file mode 100644
index 00000000..c6433971
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/conversation-list/style/h5.scss
@@ -0,0 +1,43 @@
+.tui-conversation-list-h5 {
+  .tui-conversation-content {
+    .dialog {
+      left: auto;
+      right: 18px;
+      padding: 0;
+
+      .conversation-options {
+        padding: 12px;
+        font-size: 16px;
+      }
+
+      &-item-up {
+        top: -70px;
+      }
+    }
+
+    .tui-conversation-item {
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      .content {
+        .name {
+          font-size: 16px;
+        }
+
+        .middle-box {
+          p {
+            font-size: 14px;
+          }
+        }
+      }
+
+      .time {
+        font-size: 14px;
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIConversation/conversation-list/style/index.scss b/txim/src/TUIKit/components/TUIConversation/conversation-list/style/index.scss
new file mode 100644
index 00000000..51206d94
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/conversation-list/style/index.scss
@@ -0,0 +1,4 @@
+@import '../../../../assets/styles/common';
+@import './color';
+@import './web';
+@import './h5';
diff --git a/txim/src/TUIKit/components/TUIConversation/conversation-list/style/web.scss b/txim/src/TUIKit/components/TUIConversation/conversation-list/style/web.scss
new file mode 100644
index 00000000..af8bcd83
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/conversation-list/style/web.scss
@@ -0,0 +1,186 @@
+.tui-conversation-list {
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  letter-spacing: 0;
+  flex: 1;
+  overflow: auto;
+}
+
+.tui-conversation {
+  &-item {
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .left {
+      position: relative;
+      width: 36px;
+      height: 36px;
+
+      .num {
+        position: absolute;
+        display: inline-block;
+        right: 0;
+        top: -5px;
+        min-width: 10px;
+        width: fit-content;
+        padding: 0 2.5px;
+        height: 15px;
+        font-size: 10px;
+        text-align: center;
+        line-height: 15px;
+        border-radius: 7.5px;
+      }
+
+      .num-notify {
+        position: absolute;
+        display: inline-block;
+        right: 2px;
+        top: -2px;
+        width: 6px;
+        height: 6px;
+        font-size: 10px;
+        text-align: center;
+        line-height: 15px;
+        border-radius: 65%;
+      }
+
+      .avatar {
+        width: 30px;
+        height: 30px;
+        border-radius: 5px;
+      }
+
+      .online-status {
+        box-sizing: border-box;
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        left: 24px;
+        top: 22px;
+        border: 2px solid #fff;
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+        border-radius: 50%;
+
+        &-online {
+          background: #29cc85;
+        }
+
+        &-offline {
+          background: #a4a4a4;
+        }
+      }
+    }
+
+    .content-footer {
+      line-height: 16px;
+      display: flex;
+      flex-direction: column;
+
+      .time {
+        font-size: 12px;
+        line-height: 16px;
+        display: inline-block;
+        white-space: nowrap;
+      }
+    }
+
+    .content {
+      display: flex;
+      flex: 1;
+      padding-left: 8px;
+      justify-content: space-between;
+      box-sizing: border-box;
+      overflow: hidden;
+
+      .content-footer {
+        align-items: flex-end;
+
+        .icon {
+          display: inline-block;
+          width: 16px;
+          height: 16px;
+          margin: 0;
+        }
+      }
+    }
+
+    .content-header {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      box-sizing: border-box;
+
+      &-label {
+        flex: 1;
+        font-size: 14px;
+      }
+
+      .name {
+        width: 110px;
+        letter-spacing: 0;
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .middle-box {
+        flex: 1;
+        display: flex;
+        align-items: center;
+
+        &-at,
+        &-draft {
+          font-size: 12px;
+        }
+
+        &-content {
+          flex: 1;
+          width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 12px;
+          line-height: 16px;
+        }
+      }
+    }
+
+    &-content {
+      position: relative;
+
+      .tui-conversation-item:hover {
+        background: rgba(0, 110, 255, 0.1);
+      }
+
+      .dialog {
+        position: absolute;
+        z-index: 5;
+        padding: 2px 20px;
+        cursor: pointer;
+
+        &-item {
+          top: 30px;
+          left: 164px;
+          border-radius: 8px;
+        }
+
+        .conversation-options {
+          padding: 5px 0;
+          height: 17px;
+          font-size: 12px;
+          line-height: 17px;
+        }
+
+        &-item-up {
+          top: -50px;
+        }
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIConversation/conversation-network/index.ts b/txim/src/TUIKit/components/TUIConversation/conversation-network/index.ts
new file mode 100644
index 00000000..24cb107a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/conversation-network/index.ts
@@ -0,0 +1,3 @@
+import ConversationNetwork from './index.vue';
+
+export default ConversationNetwork;
diff --git a/txim/src/TUIKit/components/TUIConversation/conversation-network/index.vue b/txim/src/TUIKit/components/TUIConversation/conversation-network/index.vue
new file mode 100644
index 00000000..e2a473ff
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/conversation-network/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <div
+    v-if="isNotNetwork"
+    class="network"
+  >
+    <i class="icon icon-error">!</i>
+    <p class="network-content">
+      {{
+        TUITranslateService.t("TUIConversation.网络异常，请您检查网络设置")
+      }}
+    </p>
+  </div>
+</template>
+<script lang="ts" setup>
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import {
+  ref,
+} from '../../../adapter-vue';
+
+const isNotNetwork = ref(false);
+
+TUIStore.watch(StoreName.USER, {
+  netStateChange: (value: string) => {
+    isNotNetwork.value = (value === TUIChatEngine.TYPES.NET_STATE_DISCONNECTED);
+  },
+});
+</script>
+
+<style lang="scss" scoped src="../style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIConversation/index.ts b/txim/src/TUIKit/components/TUIConversation/index.ts
new file mode 100644
index 00000000..c20aa301
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/index.ts
@@ -0,0 +1,5 @@
+import TUIConversation from "./index.vue";
+import TUIConversationServer from "./server";
+new TUIConversationServer();
+
+export default TUIConversation;
diff --git a/txim/src/TUIKit/components/TUIConversation/index.vue b/txim/src/TUIKit/components/TUIConversation/index.vue
new file mode 100644
index 00000000..3dc193b3
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="tui-conversation"
+    @click="handleClickConv"
+  >
+    <ConversationHeader
+      v-if="isShowConversationHeader"
+      ref="headerRef"
+    />
+    <ConversationNetwork />
+    <ConversationList @handleSwitchConversation="handleSwitchConversation" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import { ref } from '../../adapter-vue';
+import ConversationList from './conversation-list/index.vue';
+import ConversationHeader from './conversation-header/index.vue';
+import ConversationNetwork from './conversation-network/index.vue';
+
+const emits = defineEmits(['handleSwitchConversation']);
+
+const totalUnreadCount = ref(0);
+const headerRef = ref<typeof ConversationHeader>();
+const isShowConversationHeader = ref<boolean>(true);
+
+TUIStore.watch(StoreName.CONV, {
+  totalUnreadCount: (count: number) => {
+    totalUnreadCount.value = count;
+  },
+});
+
+TUIStore.watch(StoreName.CUSTOM, {
+  isShowConversationHeader: (showStatus: boolean) => {
+    isShowConversationHeader.value = showStatus !== false;
+  },
+});
+
+const handleSwitchConversation = (conversationID: string) => {
+  emits('handleSwitchConversation', conversationID);
+};
+
+const handleClickConv = () => {
+  headerRef?.value?.closeChildren();
+};
+</script>
+
+<style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIConversation/server.ts b/txim/src/TUIKit/components/TUIConversation/server.ts
new file mode 100644
index 00000000..e5e84135
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/server.ts
@@ -0,0 +1,163 @@
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import {
+  TUITranslateService,
+  TUIConversationService,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { CONV_CREATE_TYPE } from '../../constant';
+import { isUniFrameWork } from '../../utils/env';
+import createGroupIcon from '../../assets/icon/start-group.svg';
+import createC2CIcon from '../../assets/icon/icon-c2c.svg';
+import { enableSampleTaskStatus } from '../../utils/enableSampleTaskStatus';
+
+export default class TUIConversationServer {
+  static instance: TUIConversationServer;
+  private onCallParamsMap: Map<string, any>;
+  private onCallCallbackMap: Map<string, () => void>;
+  public constants: typeof TUIConstants;
+  constructor() {
+    TUICore.registerService(TUIConstants.TUIConversation.SERVICE.NAME, this);
+    TUICore.registerExtension(TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID, this);
+    this.onCallParamsMap = new Map();
+    this.onCallCallbackMap = new Map();
+    this.constants = TUIConstants;
+  }
+
+  static getInstance(): TUIConversationServer {
+    if (!TUIConversationServer.instance) {
+      TUIConversationServer.instance = new TUIConversationServer();
+    }
+    return TUIConversationServer.instance;
+  }
+
+  public getOnCallParams(method: string): any {
+    return this.onCallParamsMap.get(method);
+  }
+
+  public getOnCallCallback(method: string): (() => void) | undefined {
+    return this.onCallCallbackMap.get(method);
+  }
+
+  public onCall(method: string, params: Record<string, any>, callback: () => void): void {
+    this.onCallParamsMap.set(method, params);
+    this.onCallCallbackMap.set(method, callback);
+    switch (method) {
+      case TUIConstants.TUIConversation.SERVICE.METHOD.CREATE_CONVERSATION:
+        this.createConversation(params);
+        break;
+      case TUIConstants.TUIConversation.SERVICE.METHOD.HIDE_CONVERSATION_HEADER:
+        this.hideConversationHeader();
+        break;
+    }
+  }
+
+  public onGetExtension(extensionID: string) {
+    if (extensionID === TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID) {
+      const list = [
+        {
+          weight: 100,
+          icon: createC2CIcon,
+          text: TUITranslateService.t('TUIConversation.发起单聊'),
+          data: {
+            name: CONV_CREATE_TYPE.TYPEC2C,
+          },
+          listener: {
+            onClicked: this.createConversation.bind(this),
+          },
+        },
+        {
+          weight: 100,
+          icon: createGroupIcon,
+          text: TUITranslateService.t('TUIConversation.发起群聊'),
+          data: {
+            name: CONV_CREATE_TYPE.TYPEGROUP,
+          },
+          listener: {
+            onClicked: this.createConversation.bind(this),
+          },
+        },
+      ];
+      return list;
+    }
+  }
+
+  private createConversation(item: any) {
+    // Tell TUIContact to call the SelectFriend component to select a friend
+    TUICore.callService({
+      serviceName: TUIConstants.TUIContact.SERVICE.NAME,
+      method: TUIConstants.TUIContact.SERVICE.METHOD.SELECT_FRIEND,
+      params: {
+        title: item.text,
+        isRadio: item.data.name !== CONV_CREATE_TYPE.TYPEGROUP,
+        isNeedSearch: !TUIStore.getData(StoreName.APP, 'isOfficial'),
+      },
+      callback: async (memberList: any[]) => {
+        if (!memberList || memberList.length === 0) {
+          // Return to the previous page
+          return this.routerForward(null);
+        }
+        if (item.data.name === CONV_CREATE_TYPE.TYPEGROUP) {
+          // After selecting members, if you want to create a group chat, you need to create a group
+          this.createGroup(memberList);
+        } else {
+          const { userID } = memberList[0];
+          // Generate Conversation
+          await this.generateConversation(`C2C${userID}`);
+          this.routerForward(`C2C${userID}`);
+        }
+      },
+    });
+  }
+
+  private createGroup(memberList: any[]) {
+    TUICore.callService({
+      serviceName: TUIConstants.TUIGroup.SERVICE.NAME,
+      method: TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP,
+      params: {
+        title: TUITranslateService.t('TUIConversation.发起群聊'),
+        memberList,
+      },
+      callback: async (group: any) => {
+        let conversationID: string | null = null;
+        if (group) {
+          const { groupID } = group;
+          await this.generateConversation(`GROUP${groupID}`);
+          conversationID = `GROUP${groupID}`;
+        }
+        this.routerForward(conversationID);
+      },
+    });
+  }
+
+  private async routerForward(conversationID: string | null): Promise<void> {
+    if (isUniFrameWork) {
+      await TUIGlobal?.reLaunch({
+        url: '/TUIKit/components/TUIConversation/index',
+      });
+      if (conversationID) {
+        TUIGlobal?.navigateTo({
+          url: '/TUIKit/components/TUIChat/index',
+        });
+      }
+    }
+  }
+
+  private generateConversation(conversationID: string) {
+    TUIConversationService.switchConversation(conversationID)
+      .then(() => {
+        if (conversationID.startsWith('GROUP')) {
+          enableSampleTaskStatus('groupChat');
+        }
+        console.warn('打开会话成功');
+      })
+      .catch((err: any) => {
+        console.warn('打开会话失败', err.code, err.msg);
+      });
+  }
+
+  private hideConversationHeader = () => {
+    TUIStore.update(StoreName.CUSTOM, 'isShowConversationHeader', false);
+  };
+}
diff --git a/txim/src/TUIKit/components/TUIConversation/style/color.scss b/txim/src/TUIKit/components/TUIConversation/style/color.scss
new file mode 100644
index 00000000..7e03e5a9
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/style/color.scss
@@ -0,0 +1,12 @@
+.tui-conversation {
+  background: #fff;
+}
+
+.network {
+  &-content {
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    color: #e54545;
+    letter-spacing: 0;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIConversation/style/index.scss b/txim/src/TUIKit/components/TUIConversation/style/index.scss
new file mode 100644
index 00000000..e1e92ad8
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/style/index.scss
@@ -0,0 +1,3 @@
+@import '../../../assets/styles/common';
+@import './web';
+@import './color';
diff --git a/txim/src/TUIKit/components/TUIConversation/style/web.scss b/txim/src/TUIKit/components/TUIConversation/style/web.scss
new file mode 100644
index 00000000..ac82d58b
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIConversation/style/web.scss
@@ -0,0 +1,107 @@
+.tui-conversation {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &-list {
+    overflow: auto;
+  }
+}
+
+.tui-conversation-header {
+  width: 100%;
+  position: relative;
+
+  .list {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #F4F5F9;
+    padding: 7px 0;
+
+    &-item {
+      flex: 1;
+      display: flex;
+      position: relative;
+      padding: 7px;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+
+  &-item{
+    flex: 1;
+    display: flex;
+    align-items: center;
+
+    &-title {
+      padding: 0 8px;
+      font-size: 16px;
+      font-weight: normal;
+    }
+  }
+
+  &-children {
+    position: absolute;
+    top: 100%;
+    z-index: 3;
+    padding: 7px 9px;
+    border-bottom: none;
+    background-color: #fff;
+    box-shadow: 0 3px 7px 0 #0003;
+    flex-direction: column;
+  }
+}
+
+.network {
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+
+  .icon-error{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 15px;
+    height: 15px;
+    border-radius: 15px;
+    background: red;
+    color: #fff;
+    font-style: normal;
+  }
+
+  &-content {
+    padding: 5px;
+    font-size: 12px;
+    line-height: 22px;
+  }
+}
+
+.plus {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  position: relative;
+}
+
+.plus::before,
+.plus::after {
+  content: "";
+  position: absolute;
+  background-color: #232832;
+  border-radius: 0.5px;
+  width: 1px;
+  height: 14px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.plus::after {
+  transform: rotate(90deg);
+  width: 0.5px;
+}
diff --git a/txim/src/TUIKit/components/TUIGroup/create-group/group-introduction/config.ts b/txim/src/TUIKit/components/TUIGroup/create-group/group-introduction/config.ts
new file mode 100644
index 00000000..9eba8422
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/create-group/group-introduction/config.ts
@@ -0,0 +1,50 @@
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+
+const groupIntroConfig = [
+  {
+    icon: 'https://web.sdk.qcloud.com/im/assets/images/Public.svg',
+    label: '陌生人社交群（Public）',
+    type: TUIChatEngine.TYPES.GRP_PUBLIC,
+    detail: '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见',
+    src: '产品文档',
+  },
+  {
+    icon: 'https://web.sdk.qcloud.com/im/assets/images/Meeting.svg',
+    label: '临时会议群（Meeting）',
+    type: TUIChatEngine.TYPES.GRP_MEETING,
+    detail: '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见',
+    src: '产品文档',
+  },
+  {
+    icon: 'https://web.sdk.qcloud.com/im/assets/images/Work.svg',
+    label: '好友工作群（Work）',
+    type: TUIChatEngine.TYPES.GRP_WORK,
+    detail: '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见',
+    src: '产品文档',
+  },
+  {
+    icon: 'https://web.sdk.qcloud.com/im/assets/images/AVChatroom.svg',
+    label: '直播群（AVChatroom）',
+    type: TUIChatEngine.TYPES.GRP_AVCHATROOM,
+    detail: '创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见',
+    src: '产品文档',
+  },
+  {
+    icon: 'https://web.sdk.qcloud.com/im/assets/images/Community.png',
+    label: '社群（Community）',
+    type: TUIChatEngine.TYPES.GRP_COMMUNITY,
+    detail: '创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见',
+    src: '产品文档',
+  },
+];
+
+const findGroupIntroConfig = (type: string) => {
+  return groupIntroConfig.filter((item: any) => {
+    return item.type === type;
+  })[0];
+};
+
+export {
+  groupIntroConfig,
+  findGroupIntroConfig,
+};
diff --git a/txim/src/TUIKit/components/TUIGroup/create-group/group-introduction/index.vue b/txim/src/TUIKit/components/TUIGroup/create-group/group-introduction/index.vue
new file mode 100644
index 00000000..3c0a88de
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/create-group/group-introduction/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <ul class="group-introduction-list select">
+    <li
+      v-for="(item, index) in type"
+      :key="index"
+      class="select-item"
+      :class="[selectType === item.type && 'selected']"
+      @click="selected(item)"
+    >
+      <main class="select-item-type">
+        <div class="select-item-header">
+          <aside class="left">
+            <Icon
+              class="icon"
+              :file="item.icon"
+            />
+            <span class="select-item-label">{{ TUITranslateService.t(`TUIGroup.${item.label}`) }}</span>
+          </aside>
+          <Icon
+            v-if="selectType === item.type"
+            :file="selectedIcon"
+          />
+        </div>
+        <span class="select-item-detail">{{ TUITranslateService.t(`TUIGroup.${item.detail}`) }}</span>
+        <a
+          class="link"
+          :href="documentLink.product.url"
+          target="_blank"
+          @click="openUrl(documentLink.product.url)"
+        >{{
+          TUITranslateService.t(`TUIGroup.${item.src}`) }}</a>
+      </main>
+    </li>
+  </ul>
+</template>
+<script lang="ts" setup>
+import { ref, watchEffect } from '../../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import documentLink from '../../../../utils/documentLink';
+import Icon from '../../../common/Icon.vue';
+import selectedIcon from '../../../../assets/icon/selected.svg';
+import { groupIntroConfig } from './config';
+import { isUniFrameWork } from '../../../../utils/env';
+
+const props = defineProps({
+  groupType: {
+    type: String,
+    default: '',
+  },
+});
+
+const type = groupIntroConfig;
+
+const selectType = ref();
+
+const emit = defineEmits(['selectType']);
+
+watchEffect(() => {
+  selectType.value = props.groupType;
+});
+
+const selected = (item: any) => {
+  selectType.value = item.type;
+  emit('selectType', item.type);
+};
+
+const openUrl = (link: string) => {
+  if (!isUniFrameWork) {
+    TUIGlobal?.open(link);
+  }
+};
+
+</script>
+<style lang="scss" scoped src="../style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIGroup/create-group/index.ts b/txim/src/TUIKit/components/TUIGroup/create-group/index.ts
new file mode 100644
index 00000000..c41058f8
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/create-group/index.ts
@@ -0,0 +1,3 @@
+import CreateGroup from './index.vue';
+
+export default CreateGroup;
diff --git a/txim/src/TUIKit/components/TUIGroup/create-group/index.vue b/txim/src/TUIKit/components/TUIGroup/create-group/index.vue
new file mode 100644
index 00000000..6e93700a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/create-group/index.vue
@@ -0,0 +1,297 @@
+<template>
+  <Dialog
+    :show="true"
+    :isH5="!isPC"
+    :isHeaderShow="false"
+    :isFooterShow="false"
+    :background="false"
+    @update:show="closeCreated"
+  >
+    <div
+      class="group"
+      :class="[!isPC ? 'group-h5' : '']"
+    >
+      <div class="group-box">
+        <header class="group-box-header">
+          <Icon
+            :file="isPC ? closeIcon : backIcon"
+            class="icon-close"
+            size="16px"
+            @onClick="closeCreated"
+          />
+          <h1 class="group-box-header-title">
+            {{ headerTitle }}
+          </h1>
+        </header>
+        <ul
+          v-if="!groupInfo.isEdit"
+          class="group-list"
+        >
+          <li class="group-list-item">
+            <label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群头像') }}</label>
+            <Avatar :url="groupInfo.profile.avatar" />
+          </li>
+          <ul>
+            <li
+              v-for="(item, index) in createInfo"
+              :key="index"
+              class="group-list-item"
+            >
+              <label class="group-list-item-label">{{ item.name }}</label>
+              <input
+                v-if="isPC"
+                v-model="groupInfo.profile[item.key]"
+                type="text"
+                :placeholder="item.placeholder"
+              >
+              <span
+                v-else
+                class="group-h5-list-item-content"
+                @click="edit(item.key)"
+              >
+                <p class="content">{{ groupInfo.profile[item.key] }}</p>
+                <Icon :file="rightIcon" />
+              </span>
+            </li>
+            <li class="group-list-introduction">
+              <div class="group-list-item">
+                <label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群类型') }}</label>
+                <GroupIntroduction
+                  v-if="isPC"
+                  :groupType="groupInfo.profile.type"
+                  @selectType="selected"
+                />
+                <span
+                  v-else
+                  class="group-h5-list-item-content"
+                  @click="edit('type')"
+                >
+                  <p class="content">{{ groupTypeDetail.label }}</p>
+                  <Icon :file="rightIcon" />
+                </span>
+              </div>
+              <article
+                v-if="!isPC"
+                class="group-h5-list-item-introduction"
+              >
+                <label class="introduction-name">{{ groupTypeDetail.label }}：</label>
+                <span class="introduction-detail">{{ groupTypeDetail.detail }}</span>
+                <a
+                  :href="documentLink.product.url"
+                  target="view_window"
+                >
+                  {{ TUITranslateService.t(`TUIGroup.${groupTypeDetail.src}`) }}
+                </a>
+              </article>
+            </li>
+          </ul>
+        </ul>
+        <!-- Edit Group Name -->
+        <div
+          v-else
+          class="group-list group-list-edit"
+        >
+          <input
+            v-if="groupInfo.groupConfig.type === 'input'"
+            v-model="groupInfo.groupConfig.value"
+            class="group-name-input"
+            type="text"
+            :placeholder="TUITranslateService.t(`TUIGroup.${groupInfo.groupConfig.placeholder}`)"
+          >
+          <GroupIntroduction
+            v-else
+            class="group-introduction-list"
+            :groupType="groupInfo.groupConfig.value"
+            @selectType="selected"
+          />
+        </div>
+        <footer class="group-profile-footer">
+          <button
+            v-if="isPC && !groupInfo.isEdit"
+            class="btn-default"
+            @click="closeCreated"
+          >
+            {{ TUITranslateService.t('TUIGroup.取消') }}
+          </button>
+          <button
+            class="btn-submit"
+            :disabled="submitDisabledStatus"
+            @click="submit"
+          >
+            {{ TUITranslateService.t('TUIGroup.确认') }}
+          </button>
+        </footer>
+      </div>
+    </div>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import TUIChatEngine, {
+  TUITranslateService,
+  TUIGroupService,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { computed, reactive, watchEffect } from '../../../adapter-vue';
+import documentLink from '../../../utils/documentLink';
+import { isPC } from '../../../utils/env';
+import Icon from '../../common/Icon.vue';
+import backIcon from '../../../assets/icon/back.svg';
+import closeIcon from '../../../assets/icon/icon-close.svg';
+import rightIcon from '../../../assets/icon/right-icon.svg';
+import GroupIntroduction from './group-introduction/index.vue';
+import { groupIntroConfig, findGroupIntroConfig } from './group-introduction/config';
+import Dialog from '../../common/Dialog/index.vue';
+import { Toast, TOAST_TYPE } from '../../common/Toast/index';
+import Avatar from '../../common/Avatar/index.vue';
+import Server from '../server';
+import { IUserProfile } from '../../../interface';
+const TUIGroupServer = Server.getInstance();
+const TUIConstants = TUIGroupServer.constants;
+
+const groupInfo = reactive<any>({
+  profile: {
+    groupID: '',
+    name: '',
+    type: groupIntroConfig[0].type,
+    avatar: groupIntroConfig[0].icon,
+    introduction: '',
+    notification: '',
+    // joinOption: '',
+    memberList: [],
+    isSupportTopic: false,
+  },
+  groupConfig: {
+    title: '',
+    value: '',
+    key: '',
+    type: '',
+    placeholder: '',
+  },
+  isEdit: false,
+});
+
+watchEffect(() => {
+  const params = TUIGroupServer.getOnCallParams(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
+  groupInfo.profile.memberList = params.memberList;
+  groupInfo.groupConfig.title = params.title;
+});
+
+const groupTypeDetail = computed(() => {
+  return findGroupIntroConfig(groupInfo.profile.type);
+});
+
+const headerTitle = computed(() => {
+  let name = '添加群聊';
+  if (groupInfo.isEdit) {
+    name = groupInfo.groupConfig.title;
+  }
+  return TUITranslateService.t(`TUIGroup.${name}`);
+});
+
+const createInfo = computed(() => {
+  const groupNameInput = {
+    name: TUITranslateService.t('TUIGroup.群名称'),
+    key: 'name',
+    placeholder: TUITranslateService.t('TUIGroup.请输入群名称'),
+  };
+  const groupIDInput = {
+    name: `${TUITranslateService.t('TUIGroup.群ID')}(${TUITranslateService.t('TUIGroup.选填')})`,
+    key: 'groupID',
+    placeholder: TUITranslateService.t('TUIGroup.请输入群ID'),
+  };
+  return groupInfo.profile.type === TUIChatEngine.TYPES.GRP_COMMUNITY
+    ? [groupNameInput]
+    : [groupNameInput, groupIDInput];
+});
+
+const submitDisabledStatus = computed(() => {
+  return groupInfo.profile.name === '' && !groupInfo.isEdit;
+});
+
+const selected = (type: any) => {
+  if (groupInfo.profile.type !== type) {
+    groupInfo.profile.type = type;
+    groupInfo.profile.avatar = findGroupIntroConfig(type).icon;
+    if (groupInfo.isEdit) {
+      groupInfo.groupConfig.value = type;
+    }
+  }
+};
+
+const createGroup = async (options: any) => {
+  try {
+    options.memberList = options.memberList.map((item: IUserProfile) => {
+      return { userID: item.userID };
+    });
+    if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
+      delete options.groupID;
+    }
+    const res = await TUIGroupService.createGroup(options);
+    const { type } = res.data.group;
+    if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
+      await TUIGroupService.joinGroup({
+        groupID: res.data.group.groupID,
+        applyMessage: '',
+      });
+    }
+    handleCompleteCreate(res.data.group);
+    Toast({
+      message: TUITranslateService.t('TUIGroup.群组创建成功'),
+      type: TOAST_TYPE.SUCCESS,
+    });
+  } catch (err: any) {
+    Toast({
+      message: err.message,
+      type: TOAST_TYPE.ERROR,
+    });
+  }
+};
+
+const submit = () => {
+  const { profile } = groupInfo;
+  if (groupInfo.isEdit) {
+    groupInfo.profile[groupInfo.groupConfig.key] = groupInfo.groupConfig.value;
+    return groupInfo.isEdit = !groupInfo.isEdit;
+  } else {
+    createGroup(profile);
+  }
+};
+
+const closeCreated = () => {
+  if (groupInfo.isEdit) {
+    return groupInfo.isEdit = !groupInfo.isEdit;
+  }
+  handleCompleteCreate(null);
+};
+
+const edit = (label: string) => {
+  groupInfo.isEdit = !groupInfo.isEdit;
+  groupInfo.groupConfig.key = label;
+  groupInfo.groupConfig.value = (groupInfo.profile as any)[label];
+  switch (label) {
+    case 'name':
+      groupInfo.groupConfig.title = '设置群名称';
+      groupInfo.groupConfig.placeholder = '请输入群名称';
+      groupInfo.groupConfig.type = 'input';
+      break;
+    case 'groupID':
+      groupInfo.groupConfig.title = '设置群ID';
+      groupInfo.groupConfig.placeholder = '请输入群ID';
+      groupInfo.groupConfig.type = 'input';
+      break;
+    case 'type':
+      groupInfo.groupConfig.title = '选择群类型';
+      groupInfo.groupConfig.type = 'select';
+      break;
+  }
+};
+
+const handleCompleteCreate = (group: any) => {
+  TUIStore.update(StoreName.GRP, 'isShowCreateComponent', false);
+  const callback = TUIGroupServer.getOnCallCallback(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
+  callback && callback(group);
+};
+
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIGroup/create-group/style/color.scss b/txim/src/TUIKit/components/TUIGroup/create-group/style/color.scss
new file mode 100644
index 00000000..12c50473
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/create-group/style/color.scss
@@ -0,0 +1,104 @@
+.group {
+  background: #FFF;
+
+  &-list {
+    &-item {
+      background: #FFF;
+
+      label {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: #333;
+      }
+    }
+
+    input {
+      border: 1px solid rgba(131, 137, 153, 0.40);
+      font-weight: 400;
+      color: #333;
+    }
+
+    &-edit {
+      background: #FFF;
+    }
+  }
+
+  &-profile-footer {
+    background: #FFF;
+  }
+
+  &-h5 {
+    background: #F7F8FA;
+
+    &-list-item-introduction {
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: #888;
+
+      a {
+        color: #006EFF;
+      }
+    }
+  }
+}
+
+.select {
+  flex: 1;
+
+  a {
+    color: #006EFF;
+  }
+
+  &-item {
+    border: 1px solid rgba(131, 137, 153, 0.40);
+
+    &-header {
+      .left {
+        font-weight: 500;
+        color: #333;
+      }
+    }
+
+    &-detail {
+      color: #4F4F4F;
+    }
+  }
+
+  .selected {
+    border: 1px solid #006EFF;
+  }
+}
+
+header {
+  background: #FFF;
+
+  h1 {
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: #000;
+    letter-spacing: 0;
+  }
+}
+
+.btn-default {
+  background: #FFF;
+  border: 1px solid #DDD;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  color: #828282;
+}
+
+.btn-submit {
+  background: #3370FF;
+  border: 0 solid #2F80ED;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  color: #FFF;
+  letter-spacing: 0;
+
+  &:disabled {
+    background: #e8e8e9;
+    border: 1px solid #DDD;
+    color: #FFF;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIGroup/create-group/style/h5.scss b/txim/src/TUIKit/components/TUIGroup/create-group/style/h5.scss
new file mode 100644
index 00000000..81eefb46
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/create-group/style/h5.scss
@@ -0,0 +1,97 @@
+.group-h5 {
+  max-height: none;
+  height: 100%;
+  border-radius: 0;
+  padding: 0;
+
+  .group-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .group-box-header {
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      padding: 16px 18px;
+
+      .icon-close {
+        position: absolute;
+        left: 18px;
+      }
+    }
+
+    .group-list {
+      flex: 1;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: flex-end;
+      margin-top: 12px;
+      overflow: hidden;
+
+      .group-introduction-list{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        padding: 12px 18px;
+      }
+
+      &-item {
+        padding: 14px 18px;
+        border-bottom: 1px solid #E5E5E5;
+
+        &-label {
+          font-size: 14px;
+        }
+      }
+    }
+
+    .group-list-edit {
+      display: flex;
+      align-items: flex-start;
+
+      .group-name-input {
+        flex: 0 0 auto;
+        width: 100%;
+        height: 40px;
+      }
+    }
+
+    .group-profile-footer {
+      box-shadow: inset 0 1px 0 0 #eee;
+      padding: 12px 18px;
+    }
+  }
+
+  &-list-item-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    .content {
+      width: 0;
+      flex: 1;
+      padding: 0 12px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: end;
+    }
+  }
+
+  &-list-item-introduction {
+    padding: 12px 18px;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+  }
+
+  .select-item-type {
+    text-align: left;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIGroup/create-group/style/index.scss b/txim/src/TUIKit/components/TUIGroup/create-group/style/index.scss
new file mode 100644
index 00000000..51206d94
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/create-group/style/index.scss
@@ -0,0 +1,4 @@
+@import '../../../../assets/styles/common';
+@import './color';
+@import './web';
+@import './h5';
diff --git a/txim/src/TUIKit/components/TUIGroup/create-group/style/web.scss b/txim/src/TUIKit/components/TUIGroup/create-group/style/web.scss
new file mode 100644
index 00000000..0a1fe080
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/create-group/style/web.scss
@@ -0,0 +1,106 @@
+.group {
+  padding: 30px;
+  box-sizing: border-box;
+  width: 750px;
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+  border-radius: 10px;
+
+  .group-box {
+    .group-box-header {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+
+      .group-box-header-title {
+        font-size: 18px;
+        line-height: 30px;
+      }
+    }
+  }
+
+  &-list {
+    &-item {
+      display: flex;
+      padding: 10px 0;
+
+      &-label {
+        width: 84px;
+      }
+    }
+
+    input {
+      flex: 1;
+      box-sizing: border-box;
+      padding: 6px 10px;
+      border-radius: 2px;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}
+
+.select {
+  flex: 1;
+
+  &-item {
+    padding: 12px 20px !important;
+    border-radius: 2px;
+    margin-bottom: 20px !important;
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+
+        .icon {
+          margin-right: 12px;
+        }
+      }
+
+      .icon-selected {
+        position: relative;
+        left: 12px;
+        top: -4px;
+      }
+    }
+
+    &-type {
+      text-align: left;
+    }
+
+    &-detail {
+      padding-top: 6px;
+      font-size: 14px;
+    }
+
+    .link {
+      display: inline-block;
+    }
+  }
+}
+
+.group-profile-footer {
+  padding-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.btn-default {
+  width: 82px;
+  height: 32px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.btn-submit {
+  width: 82px;
+  height: 32px;
+  border-radius: 4px;
+  margin-left: 10px;
+  font-size: 14px;
+}
diff --git a/txim/src/TUIKit/components/TUIGroup/index.ts b/txim/src/TUIKit/components/TUIGroup/index.ts
new file mode 100644
index 00000000..0b150dd4
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/index.ts
@@ -0,0 +1,6 @@
+import TUIGroup from './index.vue';
+import Server from './server';
+
+Server.getInstance();
+
+export default TUIGroup;
diff --git a/txim/src/TUIKit/components/TUIGroup/index.vue b/txim/src/TUIKit/components/TUIGroup/index.vue
new file mode 100644
index 00000000..02a005cd
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <div :class="[(isShowCreateGroup || isShowManageGroup || isShowSelectMember) && 'tui-group']">
+    <CreateGroup v-if="isShowCreateGroup" />
+    <ManageGroup v-if="isShowManageGroup" />
+    <SelectMember v-if="isShowSelectMember" />
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref } from '../../adapter-vue';
+
+import CreateGroup from './create-group/index.vue';
+import ManageGroup from './manage-group/index.vue';
+import SelectMember from './select-member/index.vue';
+
+const isShowCreateGroup = ref(false);
+const isShowManageGroup = ref(false);
+const isShowSelectMember = ref(false);
+
+TUIStore.watch(StoreName.GRP, {
+  isShowCreateComponent: (data: any) => {
+    if (data) {
+      isShowCreateGroup.value = true;
+    } else {
+      isShowCreateGroup.value = false;
+    }
+  },
+  isShowManageComponent: (data: any) => {
+    if (data) {
+      isShowManageGroup.value = true;
+    } else {
+      isShowManageGroup.value = false;
+    }
+  },
+  isShowSelectComponent: (data: any) => {
+    if (data) {
+      isShowSelectMember.value = true;
+    } else {
+      isShowSelectMember.value = false;
+    }
+  },
+});
+
+</script>
+<style lang="scss" scoped>
+.tui-group {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIGroup/manage-group/index.ts b/txim/src/TUIKit/components/TUIGroup/manage-group/index.ts
new file mode 100644
index 00000000..981c0267
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/manage-group/index.ts
@@ -0,0 +1,3 @@
+import ManageGroup from './index.vue';
+
+export default ManageGroup;
diff --git a/txim/src/TUIKit/components/TUIGroup/manage-group/index.vue b/txim/src/TUIKit/components/TUIGroup/manage-group/index.vue
new file mode 100644
index 00000000..3832e73c
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/manage-group/index.vue
@@ -0,0 +1,825 @@
+<template>
+  <div
+    ref="manageRef"
+    class="manage"
+  >
+    <header
+      v-if="!isUniFrameWork || currentTab ==='admin'"
+      class="manage-header"
+    >
+      <Icon
+        :file="backSVG"
+        @onClick="back"
+      />
+      <div class="manage-header-content">
+        {{ TUITranslateService.t(`TUIGroup.${TabName}`) }}
+      </div>
+      <div />
+    </header>
+    <main
+      v-if="!currentTab || (isUniFrameWork && currentTab != 'admin')"
+      class="main"
+    >
+      <ManageName
+        class="space-top"
+        :isAuthor="isOwner || isAdmin || isWorkGroup"
+        :data="currentGroup"
+        @update="updateProfile"
+      />
+      <div class="user-info space-top">
+        <header
+          class="user-info-header"
+          @click="setCurrentTab('member')"
+        >
+          <label class="user-info-header-left">
+            {{ TUITranslateService.t(`TUIGroup.群成员`) }}
+          </label>
+          <div class="user-info-header-right">
+            <span class="span">
+              {{ currentGroup.memberCount || groupMemberList.length }}
+              {{ TUITranslateService.t(`TUIGroup.人`) }}
+            </span>
+            <Icon :file="rightIcon" />
+          </div>
+        </header>
+        <ol class="user-info-list">
+          <dl
+            v-for="(item, index) in groupMemberList.slice(0, showUserNum)"
+            :key="index"
+            class="user-info-list-item"
+          >
+            <dt
+              class="user-info-list-item-main"
+              @click="handleMemberProfileShow(item)"
+            >
+              <img
+                class="avatar"
+                :src="
+                  item.avatar ||
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+                "
+                onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+              >
+            </dt>
+            <dd class="user-info-list-item-info">
+              {{ item.nick || item.userID }}
+            </dd>
+          </dl>
+          <dl
+            v-if="isShowAddMember"
+            class="user-info-list-item"
+          >
+            <dt
+              class="avatar"
+              @click="toggleMask('add')"
+            >
+              +
+            </dt>
+          </dl>
+          <dl
+            v-if="currentSelfRole === 'Owner'"
+            class="user-info-list-item"
+          >
+            <dt
+              class="avatar"
+              @click="toggleMask('remove')"
+            >
+              -
+            </dt>
+          </dl>
+        </ol>
+      </div>
+      <ul
+        class="content list space-top"
+        @click="editLableName = ''"
+      >
+        <li
+          class="list-item"
+          @click="setCurrentTab('notification')"
+        >
+          <aside class="aside">
+            <label class="label">{{
+              TUITranslateService.t(`TUIGroup.群公告`)
+            }}</label>
+            <article class="article">
+              {{ currentGroup.notification }}
+            </article>
+          </aside>
+          <Icon
+            :file="rightIcon"
+            class="end"
+          />
+        </li>
+        <li
+          v-if="(isAdmin || isOwner) && isSetMuteTime"
+          class="list-item"
+          @click="setCurrentTab('admin')"
+        >
+          <label class="label">{{
+            TUITranslateService.t(`TUIGroup.群管理`)
+          }}</label>
+          <Icon :file="rightIcon" />
+        </li>
+        <li class="list-item">
+          <label class="label">{{
+            TUITranslateService.t(`TUIGroup.群ID`)
+          }}</label>
+          <div class="groupID">
+            <span class="span">{{ currentGroupID }}</span>
+          </div>
+        </li>
+        <li class="list-item">
+          <label class="label">{{
+            TUITranslateService.t(`TUIGroup.群头像`)
+          }}</label>
+          <img
+            class="avatar"
+            :src="
+              currentGroup.avatar ||
+                'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'
+            "
+            onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'"
+          >
+        </li>
+        <li class="list-item">
+          <label class="label">{{
+            TUITranslateService.t(`TUIGroup.群类型`)
+          }}</label>
+          <span class="span">{{
+            TUITranslateService.t(`TUIGroup.${typeName[currentGroup.type]}`)
+          }}</span>
+        </li>
+        <li class="list-item">
+          <label class="label">{{
+            TUITranslateService.t(`TUIGroup.加群方式`)
+          }}</label>
+          <span class="span">{{
+            TUITranslateService.t(
+              `TUIGroup.${typeName[currentGroup.joinOption]}`
+            )
+          }}</span>
+        </li>
+      </ul>
+      <ul class="footer list space-top">
+        <li
+          v-if="currentSelfRole === 'Owner' && groupMemberList.length > 1"
+          class="list-item"
+          @click.stop="toggleMask('changeOwner')"
+        >
+          {{ TUITranslateService.t(`TUIGroup.转让群组`) }}
+        </li>
+        <li
+          v-if="canIDissmissGroup"
+          class="list-item"
+          @click.stop="dismissGroup(currentGroup)"
+        >
+          {{ TUITranslateService.t(`TUIGroup.解散群聊`) }}
+        </li>
+        <li
+          v-else
+          class="list-item"
+          @click.stop="quitGroup(currentGroup)"
+        >
+          {{ TUITranslateService.t(`TUIGroup.退出群组`) }}
+        </li>
+      </ul>
+    </main>
+    <ManageMember
+      v-if="currentTab === 'member'"
+      :self="currentGroup.selfInfo"
+      :list="groupMemberList"
+      :total="~~currentGroup.memberCount"
+      :isShowDel="currentSelfRole === 'Owner' && canDelMember"
+      @more="getMember('more')"
+      @del="submit"
+      @handleMemberProfileShow="handleMemberProfileShow"
+      @close="setCurrentTab('')"
+    />
+    <ManageProfile
+      v-if="currentTab === 'profile'"
+      :userInfo="currentMember"
+      @close="setCurrentTab('')"
+    />
+    <ManageNotification
+      v-if="currentTab === 'notification'"
+      :isAuthor="isOwner || isAdmin || isWorkGroup"
+      :data="currentGroup"
+      @update="updateProfile"
+      @close="setCurrentTab('')"
+    />
+    <ManageAdmin
+      v-if="currentTab === 'admin'"
+      v-show="isAdmin"
+      :isSetMuteTime="isSetMuteTime"
+      :member="member"
+      :currentGroup="currentGroup"
+      @addAdmin="toggleMask('addAdmin')"
+      @removeAdmin="toggleMask('removeAdmin')"
+      @setAllMuteTime="setAllMuteTime"
+      @addMute="toggleMask('addMute')"
+      @removeMute="toggleMask('removeMute')"
+      @close="setCurrentTab('')"
+    />
+    <MaskLayer
+      :show="mask"
+      @update:show="(e) => (mask = e)"
+    >
+      <Transfer
+        :title="TUITranslateService.t(`TUIGroup.${transferTitle}`)"
+        :list="transferList"
+        :isSearch="isSearch"
+        :isRadio="isRadio"
+        :selectedList="selectedList"
+        :isH5="!isPC"
+        @submit="submit"
+        @cancel="cancel"
+        @search="handleSearchMember"
+      />
+    </MaskLayer>
+    <Dialog
+      class="deleted-dialog"
+      :title="TUITranslateService.t(`TUIGroup.删除成员`)"
+      :show="delDialogShow"
+      :isH5="!isPC"
+      :center="true"
+      :isHeaderShow="isPC"
+      @submit="handleManage(deletedUserList, 'remove')"
+      @update:show="(e) => (delDialogShow = e)"
+    >
+      <p
+        v-if="deletedUserList.length === 1"
+        class="del-dialog-title"
+      >
+        {{ TUITranslateService.t(`TUIGroup.确定从群聊中删除该成员？`) }}
+      </p>
+      <p
+        v-if="deletedUserList.length > 1"
+        class="del-dialog-title"
+      >
+        {{ TUITranslateService.t(`TUIGroup.确定从群聊中删除所选成员？`) }}
+      </p>
+    </Dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  watchEffect,
+  onMounted,
+  nextTick,
+} from '../../../adapter-vue';
+import TUIChatEngine, {
+  TUITranslateService,
+  TUIGroupService,
+  TUIFriendService,
+  TUIStore,
+  StoreName,
+  IGroupModel,
+  TUIConversationService,
+  IConversationModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal, outsideClick } from '@tencentcloud/universal-api';
+import MaskLayer from '../../common/MaskLayer/index.vue';
+import Dialog from '../../common/Dialog/index.vue';
+import Transfer from '../../common/Transfer/index.vue';
+import ManageName from './manage-name.vue';
+import ManageNotification from './manage-notification.vue';
+import ManageMember from './manage-member.vue';
+import ManageProfile from './manage-profile.vue';
+import ManageAdmin from './manage-admin.vue';
+import Icon from '../../common/Icon.vue';
+import backSVG from '../../../assets/icon/back.svg';
+import rightIcon from '../../../assets/icon/right-icon.svg';
+import { Toast, TOAST_TYPE } from '../../common/Toast/index';
+import { isPC, isUniFrameWork } from '../../../utils/env';
+import Server from '../server';
+import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus';
+import { IFriendProfile, IGroupMember, IUserProfile } from '../../../interface';
+
+const TUIGroupServer = Server.getInstance();
+const TUIConstants = TUIGroupServer.constants;
+
+const props = defineProps({
+  groupID: {
+    type: String,
+    default: '',
+  },
+  groupCurrentTab: {
+    type: String,
+    default: '',
+  },
+});
+
+const manageRef = ref<any>(undefined);
+// type 'profile' | 'member' | 'notification' | 'admin' | ''
+const currentTab = ref('');
+const editLableName = ref('');
+const transferType = ref('');
+const mask = ref(false);
+const currentGroupID = ref('');
+const userInfo = ref({
+  list: [] as IGroupMember[],
+});
+const currentMember = ref<IGroupMember>({});
+const typeName = ref({
+  [TUIChatEngine.TYPES.GRP_WORK]: '好友工作群',
+  [TUIChatEngine.TYPES.GRP_PUBLIC]: '陌生人社交群',
+  [TUIChatEngine.TYPES.GRP_MEETING]: '临时会议群',
+  [TUIChatEngine.TYPES.GRP_AVCHATROOM]: '直播群',
+  [TUIChatEngine.TYPES.GRP_COMMUNITY]: '社群',
+  [TUIChatEngine.TYPES.JOIN_OPTIONS_FREE_ACCESS]: '自由加入',
+  [TUIChatEngine.TYPES.JOIN_OPTIONS_NEED_PERMISSION]: '需要验证',
+  [TUIChatEngine.TYPES.JOIN_OPTIONS_DISABLE_APPLY]: '禁止加群',
+});
+const member = ref({
+  admin: [] as IGroupMember[],
+  member: [] as IGroupMember[],
+  muteMember: [] as IGroupMember[],
+});
+const transferList = ref<IGroupMember[]>([]);
+const transferTitle = ref('');
+const isSearch = ref(false);
+const isRadio = ref(false);
+const selectedList = ref([]);
+const delDialogShow = ref(false);
+const groupMemberList = ref<IGroupMember[]>([]);
+const deletedUserList = ref([]);
+const currentGroup = ref<IGroupModel>();
+const currentSelfRole = ref('');
+const groupIDValue = ref<string>('');
+
+onMounted(() => {
+  nextTick(() => {
+    if (manageRef.value && !isUniFrameWork) {
+      outsideClick.listen({
+        domRefs: manageRef.value,
+        handler: handleCompleteManage,
+      });
+    }
+  });
+});
+
+TUIStore.watch(StoreName.GRP, {
+  currentGroup: (group: IGroupModel) => {
+    if (group) {
+      currentGroup.value = group;
+      currentSelfRole.value = currentGroup.value?.selfInfo?.role;
+    }
+  },
+  currentGroupMemberList: (memberList: IGroupMember[]) => {
+    groupMemberList.value = memberList;
+    member.value = {
+      admin: [],
+      member: [],
+      muteMember: [],
+    };
+    Array.from(memberList).map((item: any) => {
+      switch (item?.role) {
+        case TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN:
+          member.value.admin.push(item);
+          break;
+        case TUIChatEngine.TYPES.GRP_MBR_ROLE_MEMBER:
+          member.value.member.push(item);
+          break;
+        default:
+          break;
+      }
+      return item;
+    });
+    const time: number = new Date().getTime();
+    member.value.muteMember = Array.from(memberList).filter(
+      (item: any) => item?.muteUntil * 1000 - time > 0,
+    );
+  },
+});
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    groupIDValue.value = conversation?.groupProfile?.groupID;
+  },
+});
+
+watchEffect(() => {
+  const params = TUIGroupServer.getOnCallParams(TUIConstants.TUIGroup.SERVICE.METHOD.OPEN_GROUP_MANAGEMENT);
+  currentGroupID.value = params?.groupID || groupIDValue.value;
+  currentTab.value = props.groupCurrentTab;
+});
+
+const TabName = computed(() => {
+  let name = '';
+  switch (currentTab.value) {
+    case 'notification':
+      name = '群公告';
+      break;
+    case 'member':
+      name = '群成员';
+      break;
+    case 'profile':
+      name = '群成员';
+      break;
+    default:
+      name = '群管理';
+      break;
+  }
+  return name;
+});
+
+const isOwner = computed(() => {
+  // Determine whether the person is the group owner/administrator
+  const userRole = currentGroup.value?.selfInfo?.role;
+  return userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER;
+});
+
+const isAdmin = computed(() => {
+  const userRole = currentGroup.value?.selfInfo?.role;
+  return userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER;
+});
+
+const isWorkGroup = computed(() => {
+  return currentGroup.value?.type === TUIChatEngine.TYPES.GRP_WORK;
+});
+
+const isSetMuteTime = computed(() => {
+  if (isWorkGroup.value || !(isOwner.value || isAdmin.value)) {
+    return false;
+  }
+  return true;
+});
+
+const canDelMember = computed(() => {
+  const groupType = currentGroup?.value?.type;
+  const isAVChatRoom = groupType === TUIChatEngine.TYPES.GRP_AVCHATROOM;
+  if (isAVChatRoom) {
+    return false;
+  }
+  return true;
+});
+
+const updateProfile = async (newGroupProfile: any) => {
+  const { key, value } = newGroupProfile;
+  const options: any = {
+    groupID: currentGroup.value.groupID,
+    [key]: value,
+  };
+  TUIGroupService.updateGroupProfile(options)
+    .then((res: any) => {
+      currentGroup.value = res.data.group;
+      editLableName.value = '';
+    })
+    .catch((error: any) => {
+      Toast({
+        message: error?.message,
+        type: TOAST_TYPE.ERROR,
+      });
+    });
+};
+
+const setCurrentTab = (tabName: string) => {
+  currentTab.value = tabName;
+  editLableName.value = '';
+  if (currentTab.value === 'member') {
+    transferType.value = 'remove';
+  }
+  if (!currentTab.value) {
+    transferType.value = '';
+  }
+};
+
+const cancel = () => {
+  toggleMask();
+};
+
+const toggleMask = async (type?: string) => {
+  selectedList.value = [];
+  let memberUserIDList: string[] = [];
+  switch (type) {
+    case 'add':
+      isRadio.value = false;
+      memberUserIDList = [...member.value.admin, ...member.value.member].map((item: IUserProfile) => item.userID);
+      transferList.value = (await friendList()).filter((item: IFriendProfile) => {
+        return item.userID && memberUserIDList.indexOf(item.userID) < 0;
+      });
+      transferTitle.value = '添加成员';
+      break;
+    case 'remove':
+      isRadio.value = false;
+      transferList.value = groupMemberList.value.filter(
+        (item: any) => item.userID !== currentGroup?.value?.selfInfo?.userID,
+      );
+      transferTitle.value = '删除成员';
+      break;
+    case 'addAdmin':
+      isRadio.value = true;
+      transferList.value = member.value.member;
+      transferTitle.value = '新增管理员';
+      break;
+    case 'removeAdmin':
+      isRadio.value = true;
+      transferList.value = member.value.admin;
+      transferTitle.value = '移除管理员';
+      break;
+    case 'changeOwner':
+      isRadio.value = true;
+      transferList.value = [...member.value.admin, ...member.value.member];
+      transferTitle.value = '转让群组';
+      break;
+    case 'addMute':
+      isRadio.value = true;
+      transferList.value = member.value.member;
+      if (currentGroup.value.selfInfo.role === 'Owner') {
+        transferList.value = [...member.value.admin, ...member.value.member];
+      }
+      transferList.value = transferList?.value?.filter((item: any) => {
+        return member?.value?.muteMember?.indexOf(item) < 0;
+      });
+      transferTitle.value = '新增禁言用户';
+      break;
+    case 'removeMute':
+      isRadio.value = true;
+      transferList.value = member.value.muteMember;
+      transferTitle.value = '移除禁言用户';
+      break;
+    default:
+      break;
+  }
+  type && (transferType.value = type);
+  mask.value = !mask.value;
+};
+
+const friendList = async () => {
+  const imResponse = await TUIFriendService.getFriendList();
+  const friendList = imResponse.data.map((item: any) => item?.profile);
+  return friendList.filter(
+    (item: any) =>
+      !userInfo.value.list.some(
+        (infoItem: any) => infoItem.userID === item.userID,
+      ),
+  );
+};
+
+const canIDissmissGroup = computed(() => {
+  const userRole = currentGroup?.value?.selfInfo?.role;
+  const groupType = currentGroup?.value?.type;
+
+  return (
+    userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER
+    && groupType !== TUIChatEngine.TYPES.GRP_WORK
+  );
+});
+
+const isShowAddMember = computed(() => {
+  const groupType = currentGroup?.value?.type;
+  return groupType === TUIChatEngine.TYPES.GRP_WORK;
+});
+
+const showUserNum = computed(() => {
+  let num = 3;
+  if (!isShowAddMember.value) {
+    num += 1;
+  }
+  if (currentGroup?.value?.selfInfo?.role !== 'Owner') {
+    num += 1;
+  }
+  return num;
+});
+
+const getMember = async (type?: string) => {
+  const groupID = currentGroupID.value;
+  const options = {
+    groupID,
+    count: 100,
+    offset: type && type === 'more' ? userInfo.value.list.length : 0,
+  };
+  await TUIGroupService.getGroupMemberList(options).then((res: any) => {
+    if (type && type === 'more') {
+      userInfo.value.list = [...userInfo.value.list, ...res.data.memberList];
+    } else {
+      userInfo.value.list = res.data.memberList;
+    }
+  });
+};
+
+const handleMemberProfileShow = (user: any) => {
+  currentMember.value = user;
+  setCurrentTab('profile');
+};
+
+const submit = (userList: any) => {
+  if (transferType.value === 'remove') {
+    deletedUserList.value = userList;
+    delDialogShow.value = !delDialogShow.value;
+  } else {
+    handleManage(userList, transferType.value);
+  }
+  mask.value = false;
+};
+
+const dismissGroup = async (group: any) => {
+  await TUIGroupService.dismissGroup(group.groupID);
+  enableSampleTaskStatus('dismissGroup');
+  Toast({
+    message: TUITranslateService.t('TUIGroup.群组解散成功'),
+    type: TOAST_TYPE.SUCCESS,
+  });
+  clearGroupInfo();
+};
+
+const clearGroupInfo = () => {
+  if (isUniFrameWork) {
+    TUIGlobal?.switchTab({
+      url: '/TUIKit/components/TUIConversation/index',
+    });
+  } else {
+    handleCompleteManage();
+    TUIConversationService.switchConversation();
+  }
+};
+
+const setAllMuteTime = (value: boolean) => {
+  // Set up a muting time for all members
+  updateProfile({ key: 'muteAllMembers', value });
+  if (value) {
+    enableSampleTaskStatus('muteGroup');
+    Toast({
+      message: TUITranslateService.t('TUIGroup.禁言设置成功'),
+      type: TOAST_TYPE.SUCCESS,
+    });
+  } else {
+    Toast({
+      message: TUITranslateService.t('TUIGroup.取消禁言成功'),
+      type: TOAST_TYPE.SUCCESS,
+    });
+  }
+};
+
+const handleSearchMember = async (value: string) => {
+  let imResponse: any = {};
+  let imMemberResponse: any = {};
+  const options: any = {
+    groupID: currentGroupID.value,
+    userIDList: [value],
+  };
+  switch (transferType.value) {
+    case 'add':
+      try {
+        imMemberResponse = await TUIGroupService.getGroupMemberProfile(options);
+        transferList.value = transferList.value.filter(
+          (item: any) => item.userID !== imResponse.data[0]?.userID,
+        );
+        transferList.value = [...transferList.value, ...imResponse.data];
+        if (imMemberResponse?.data?.memberList.length > 0) {
+          transferList.value = transferList.value.map((item: any) => {
+            if (item.userID === imMemberResponse?.data?.memberList[0].userID) {
+              item.isDisabled = true;
+            }
+            return item;
+          });
+        }
+      } catch (error: any) {
+        const message = TUITranslateService.t('TUIGroup.该用户不存在');
+        Toast({
+          message,
+          type: TOAST_TYPE.ERROR,
+        });
+      }
+      break;
+    case 'remove':
+      try {
+        imResponse = await TUIGroupService.getGroupMemberProfile(options);
+        if (imResponse.data.memberList.length === 0) {
+          const message = TUITranslateService.t('TUIGroup.该用户不在群组内');
+          Toast({
+            message,
+            type: TOAST_TYPE.ERROR,
+          });
+        }
+        transferList.value = transferList.value.filter(
+          (item: any) => item.userID !== imResponse?.data?.memberList[0]?.userID,
+        );
+        if (imResponse?.data?.memberList.length) {
+          transferList.value = [
+            ...transferList.value,
+            ...imResponse.data.memberList,
+          ];
+        }
+      } catch (error: any) {
+        const message = TUITranslateService.t('TUIGroup.该用户不存在');
+        Toast({
+          message,
+          type: TOAST_TYPE.ERROR,
+        });
+      }
+      break;
+    default:
+      break;
+  }
+};
+
+const handleManage = (userList: any, type: any) => {
+  const userIDList: any = [];
+  userList.map((item: any) => {
+    userIDList.push(item.userID);
+    return item;
+  });
+  switch (type) {
+    case 'add':
+      addMember(userIDList);
+      break;
+    case 'remove':
+      deleteGroupMember(userIDList);
+      break;
+    case 'addAdmin':
+      handleAdmin(userList[0]);
+      break;
+    case 'removeAdmin':
+      handleAdmin(userList[0]);
+      break;
+    case 'changeOwner':
+      changeOwner(userIDList[0]);
+      break;
+    case 'addMute':
+      setMemberMuteTime(userIDList[0], 'add');
+      break;
+    case 'removeMute':
+      setMemberMuteTime(userIDList[0], 'remove');
+      break;
+    default:
+      break;
+  }
+};
+
+const addMember = async (userIDList: any) => {
+  const options: any = {
+    groupID: currentGroupID.value,
+    userIDList,
+  };
+  await TUIGroupService.addGroupMember(options);
+};
+
+const changeOwner = async (userID: any) => {
+  const options: any = {
+    groupID: currentGroupID.value,
+    newOwnerID: userID,
+  };
+  const imResponse = await TUIGroupService.changeGroupOwner(options);
+  currentGroup.value = {};
+  currentGroup.value = imResponse.data.group;
+};
+
+const setMemberMuteTime = async (userID: string, type?: string) => {
+  const options: any = {
+    groupID: currentGroupID.value,
+    userID,
+    muteTime: type === 'add' ? 60 * 60 * 24 * 30 : 0,
+  };
+  await TUIGroupService.setGroupMemberMuteTime(options);
+};
+
+const handleAdmin = async (user: any) => {
+  let role = '';
+  switch (user.role) {
+    case TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN:
+      role = TUIChatEngine.TYPES.GRP_MBR_ROLE_MEMBER;
+      break;
+    case TUIChatEngine.TYPES.GRP_MBR_ROLE_MEMBER:
+      role = TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN;
+      break;
+  }
+  const options: any = {
+    groupID: currentGroupID.value,
+    userID: user.userID,
+    role,
+  };
+  await TUIGroupService.setGroupMemberRole(options);
+};
+
+const deleteGroupMember = async (userIDList: any) => {
+  const options: any = {
+    groupID: currentGroupID.value,
+    userIDList,
+    reason: '',
+  };
+  await TUIGroupService.deleteGroupMember(options);
+};
+
+const quitGroup = async (group: any) => {
+  await TUIGroupService.quitGroup(group.groupID);
+  clearGroupInfo();
+};
+
+const back = () => {
+  if (currentTab.value) {
+    setCurrentTab('');
+  } else {
+    handleCompleteManage();
+  }
+};
+
+const handleCompleteManage = () => {
+  TUIStore.update(StoreName.GRP, 'isShowManageComponent', false);
+  const callback = TUIGroupServer.getOnCallCallback(TUIConstants.TUIGroup.SERVICE.METHOD.OPEN_GROUP_MANAGEMENT);
+  callback && callback();
+};
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUIGroup/manage-group/manage-admin.vue b/txim/src/TUIKit/components/TUIGroup/manage-group/manage-admin.vue
new file mode 100644
index 00000000..588e36a0
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/manage-group/manage-admin.vue
@@ -0,0 +1,338 @@
+<template>
+  <div class="admin-main">
+    <div class="admin-manage">
+      <div class="admin-manage-header">
+        {{ TUITranslateService.t(`TUIGroup.群管理员`) }}
+      </div>
+      <ul class="admin-manage-list">
+        <li
+          v-for="(item, index) in memberAdmin.admin"
+          :key="index"
+          class="admin-manage-list-item"
+        >
+          <div class="item-main">
+            <img
+              class="item-main-avatar"
+              :src="
+                item.avatar ||
+                  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+              "
+              onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+            >
+          </div>
+          <div class="item-name">
+            {{ item.nick || item.userID }}
+          </div>
+        </li>
+        <li class="admin-manage-list-item">
+          <div
+            class="item-main"
+            @click="addAdmin"
+          >
+            <Icon
+              :file="plusSVG"
+              width="16px"
+              height="16px"
+            />
+          </div>
+        </li>
+        <li class="admin-manage-list-item">
+          <div
+            v-if="memberAdmin.admin.length > 0"
+            class="item-main"
+            @click="removeAdmin"
+          >
+            <Icon
+              :file="minusSVG"
+              width="16px"
+              height="16px"
+            />
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div
+      v-if="isAdminSetMuteTime"
+      class="admin-mute-all"
+    >
+      <div>
+        <div class="admin-mute-all-title">
+          {{ TUITranslateService.t(`TUIGroup.全员禁言`) }}
+        </div>
+        <div class="admin-mute-all-content">
+          {{
+            TUITranslateService.t(
+              `TUIGroup.全员禁言开启后，只允许群主和管理员发言。`
+            )
+          }}
+        </div>
+      </div>
+      <Slider
+        :open="currentGroupAdmin.muteAllMembers"
+        @change="setAllMuteTime"
+      />
+    </div>
+    <div
+      v-if="isAdminSetMuteTime"
+      class="admin-mute"
+    >
+      <div class="admin-mute-header">
+        {{ TUITranslateService.t(`TUIGroup.单独禁言人员`) }}
+      </div>
+      <ul class="admin-mute-list">
+        <li
+          v-for="(item, index) in memberAdmin.muteMember"
+          :key="index"
+          class="admin-mute-list-item"
+        >
+          <div class="item-main">
+            <img
+              class="item-main-avatar"
+              :src="
+                item.avatar ||
+                  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+              "
+              onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+            >
+          </div>
+          <div class="item-name">
+            {{ item.nick || item.userID }}
+          </div>
+        </li>
+        <li class="admin-mute-list-item">
+          <div
+            class="item-main"
+            @click="addMute"
+          >
+            <Icon
+              :file="plusSVG"
+              width="16px"
+              height="16px"
+            />
+          </div>
+        </li>
+        <li class="admin-mute-list-item">
+          <div
+            v-if="memberAdmin.muteMember.length > 0"
+            class="item-main"
+            @click="removeMute"
+          >
+            <Icon
+              :file="minusSVG"
+              width="16px"
+              height="16px"
+            />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  TUITranslateService,
+  IGroupModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { watchEffect, ref } from '../../../adapter-vue';
+import Slider from '../../common/Slider/index.vue';
+import Icon from '../../common/Icon.vue';
+import plusSVG from '../../../assets/icon/plus.svg';
+import minusSVG from '../../../assets/icon/minus.svg';
+import { IGroupMember } from '../../../interface';
+
+const props = defineProps({
+  member: {
+    type: Object,
+    default: () => {},
+  },
+  isSetMuteTime: {
+    type: Boolean,
+    default: () => false,
+  },
+  currentGroup: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const isAdminSetMuteTime = ref(false);
+const memberAdmin = ref({
+  admin: [] as Array<IGroupMember>,
+  member: [] as Array<IGroupMember>,
+  muteMember: [] as Array<IGroupMember>,
+});
+const currentGroupAdmin = ref<IGroupModel>();
+
+watchEffect(() => {
+  memberAdmin.value = props.member as {
+    admin: Array<IGroupMember>;
+    member: Array<IGroupMember>;
+    muteMember: Array<IGroupMember>;
+  };
+  isAdminSetMuteTime.value = props.isSetMuteTime;
+  currentGroupAdmin.value = props.currentGroup;
+});
+
+const emits = defineEmits([
+  'addAdmin',
+  'removeAdmin',
+  'setAllMuteTime',
+  'addMute',
+  'removeMute',
+  'close',
+]);
+
+const addAdmin = () => {
+  emits('addAdmin');
+};
+
+const removeAdmin = () => {
+  emits('removeAdmin');
+};
+
+const setAllMuteTime = (value: boolean) => {
+  emits('setAllMuteTime', value);
+};
+
+const addMute = () => {
+  emits('addMute');
+};
+
+const removeMute = () => {
+  emits('removeMute');
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../assets/styles/common";
+
+.admin {
+  width: 100%;
+  overflow: hidden;
+
+  &-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 10px;
+
+    &-left {
+      font-family: "PingFang SC", sans-serif;
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 50px;
+      letter-spacing: 0;
+      text-align: left;
+    }
+
+    &-close {
+      font-family: "PingFang SC", sans-serif;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 48px;
+      letter-spacing: 0;
+      text-align: left;
+      color: #3370ff;
+    }
+  }
+
+  &-main {
+    width: 100%;
+    overflow: hidden;
+
+    .admin-manage {
+      border-bottom: 10px solid #f4f5f9;
+    }
+
+    .admin-manage,
+    .admin-mute {
+      padding: 10px;
+      width: calc(100% - 20px);
+      overflow: hidden;
+
+      &-header {
+        padding-left: 10px;
+        font-family: "PingFang SC", sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        letter-spacing: 0;
+        text-align: left;
+      }
+
+      &-list {
+        display: flex;
+        width: 100%;
+        overflow: hidden;
+        flex-wrap: wrap;
+
+        &-item {
+          flex: 0 0 36px;
+          display: flex;
+          flex-direction: column;
+          padding: 10px;
+
+          .item-main {
+            width: 36px;
+            height: 36px;
+            border-radius: 4px;
+            font-size: 12px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: #f4f5f9;
+            color: #000;
+
+            &-avatar {
+              width: 36px;
+              height: 36px;
+              overflow: hidden;
+              border-radius: 4px;
+            }
+          }
+
+          .item-name {
+            text-align: center;
+            max-width: 36px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+
+    .admin-mute-all {
+      margin: 0 10px;
+      padding: 20px 0;
+      border-bottom: 1px solid #e8e8e9;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      &-title {
+        padding-left: 10px;
+        font-family: "PingFang SC", sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        letter-spacing: 0;
+        text-align: left;
+      }
+
+      &-content {
+        color: #999;
+        padding-left: 10px;
+        font-family: "PingFang SC", sans-serif;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 17px;
+        letter-spacing: 0;
+        text-align: left;
+      }
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIGroup/manage-group/manage-member.vue b/txim/src/TUIKit/components/TUIGroup/manage-group/manage-member.vue
new file mode 100644
index 00000000..b72bb317
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/manage-group/manage-member.vue
@@ -0,0 +1,300 @@
+<template>
+  <main
+    v-if="!isUniFrameWork"
+    class="member"
+  >
+    <ul class="list">
+      <li
+        v-for="(item, index) in memberList"
+        :key="index"
+        class="list-item"
+      >
+        <aside
+          class="aside"
+          @click="handleMemberProfileShow(item)"
+        >
+          <img
+            class="avatar"
+            :src="
+              item.avatar ||
+                'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+            "
+            onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+          >
+          <span class="name">{{ item.nick || item.userID }}</span>
+          <span>{{ handleRoleName(item) }}</span>
+        </aside>
+        <div @click="submit(item)">
+          <Icon
+            v-if="item.role !== 'Owner' && isShowDeleteBtn"
+            :file="delIcon"
+            :width="'16px'"
+            :height="'16px'"
+          />
+        </div>
+      </li>
+      <li
+        v-if="memberList.length < totalMember"
+        class="list-item"
+        @click="getMore"
+      >
+        {{ TUITranslateService.t(`TUIGroup.查看更多`) }}
+      </li>
+    </ul>
+  </main>
+  <div
+    v-else
+    class="edit-h5"
+  >
+    <main class="main">
+      <header class="edit-h5-header">
+        <aside class="left">
+          <h1>{{ TUITranslateService.t(`TUIGroup.群成员`) }}</h1>
+        </aside>
+        <span
+          class="close"
+          @click="close('member')"
+        >{{
+          TUITranslateService.t(`关闭`)
+        }}</span>
+      </header>
+      <div class="member">
+        <ul class="list list-uniapp">
+          <li
+            v-for="(item, index) in memberList"
+            :key="index"
+            class="list-item"
+          >
+            <aside
+              class="aside"
+              @click="handleMemberProfileShow(item)"
+            >
+              <img
+                class="avatar"
+                :src="
+                  item.avatar ||
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+                "
+                onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+              >
+              <span class="name">{{ item.nick || item.userID }}</span>
+              <span>{{ handleRoleName(item) }}</span>
+            </aside>
+            <div @click="submit(item)">
+              <Icon
+                v-if="item.role !== 'Owner' && isShowDeleteBtn"
+                :file="delIcon"
+                :width="'16px'"
+                :height="'16px'"
+              />
+            </div>
+          </li>
+          <li
+            v-if="memberList.length < totalMember"
+            class="list-item"
+            @click="getMore"
+          >
+            {{ TUITranslateService.t(`TUIGroup.查看更多`) }}
+          </li>
+        </ul>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import TUIChatEngine, {
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import { watchEffect, ref } from '../../../adapter-vue';
+import Icon from '../../common/Icon.vue';
+import delIcon from '../../../assets/icon/del-icon.svg';
+import { IGroupSelfInfo, IGroupMember } from '../../../interface';
+import { isUniFrameWork } from '../../../utils/env';
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  total: {
+    type: Number,
+    default: () => 0,
+  },
+  isShowDel: {
+    type: Boolean,
+    default: () => false,
+  },
+  self: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const totalMember = ref(0);
+const memberList = ref<Array<IGroupMember>>([]);
+const isShowDeleteBtn = ref(false);
+const selfValue = ref<IGroupSelfInfo>({});
+
+watchEffect(() => {
+  totalMember.value = props.total;
+  isShowDeleteBtn.value = props.isShowDel;
+  memberList.value = props.list as Array<IGroupMember>;
+  selfValue.value = props.self;
+});
+
+const emits = defineEmits(['more', 'del', 'handleMemberProfileShow', 'close']);
+
+const handleRoleName = (item: any) => {
+  let name = '';
+  switch (item?.role) {
+    case TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN:
+      name = TUITranslateService.t('TUIGroup.管理员');
+      break;
+    case TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER:
+      name = TUITranslateService.t('TUIGroup.群主');
+      break;
+  }
+  if (name) {
+    name = `(${name})`;
+  }
+  if (item.userID === selfValue.value.userID) {
+    name += ` (${TUITranslateService.t('TUIGroup.我')})`;
+  }
+  return name;
+};
+
+const getMore = () => {
+  emits('more');
+};
+
+const submit = (item: any) => {
+  emits('del', [item]);
+};
+
+const handleMemberProfileShow = (user: any) => {
+  emits('handleMemberProfileShow', user);
+};
+
+const close = (tabName: string) => {
+  emits('close', tabName);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../assets/styles/common";
+
+.member {
+  flex: 1;
+  background: #fff;
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    background: #f4f5f9;
+    padding-top: 22px;
+
+    &-uniapp {
+      background: none;
+    }
+
+    &-item {
+      padding: 13px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: #fff;
+      font-size: 14px;
+      overflow: hidden;
+      cursor: pointer;
+
+      &:hover {
+        background: #f1f2f6;
+      }
+
+      .aside {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        overflow: hidden;
+
+        .name {
+          margin-left: 8px;
+          font-weight: 400;
+          font-size: 14px;
+          color: #000;
+          flex: 1;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+}
+
+.edit-h5 {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-end;
+  z-index: 1;
+
+  .main {
+    background: #fff;
+    flex: 1;
+    padding: 18px;
+    border-radius: 12px 12px 0 0;
+    overflow: scroll;
+    height: 50%;
+    width: 80vw;
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .close {
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 18px;
+      color: #3370ff;
+      letter-spacing: 0;
+      line-height: 27px;
+    }
+  }
+
+  &-footer {
+    display: flex;
+
+    .btn {
+      flex: 1;
+      border: none;
+      background: #147aff;
+      border-radius: 5px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 16px;
+      color: #fff;
+      letter-spacing: 0;
+      line-height: 27px;
+      padding: 8px 0;
+
+      &:disabled {
+        opacity: 0.3;
+      }
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIGroup/manage-group/manage-name.vue b/txim/src/TUIKit/components/TUIGroup/manage-group/manage-name.vue
new file mode 100644
index 00000000..9c7fa856
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/manage-group/manage-name.vue
@@ -0,0 +1,264 @@
+<template>
+  <div class="group-name">
+    <label>{{ TUITranslateService.t(`TUIGroup.群名称`) }}</label>
+    <div
+      v-if="isEdit"
+      :class="{
+        'edit-h5': isMobile,
+      }"
+    >
+      <main class="edit-h5-main">
+        <header
+          v-if="!isPC"
+          class="edit-h5-header"
+        >
+          <aside class="left">
+            <h1>{{ TUITranslateService.t(`TUIGroup.修改群聊名称`) }}</h1>
+            <span>{{
+              TUITranslateService.t(
+                `TUIGroup.修改群聊名称后，将在群内通知其他成员`
+              )
+            }}</span>
+          </aside>
+          <span
+            class="close"
+            @click="toggleEditStatus"
+          >{{
+            TUITranslateService.t(`关闭`)
+          }}</span>
+        </header>
+        <div class="input-box">
+          <input
+            v-if="isEdit"
+            ref="nameInputRef"
+            v-model="inputGroupName"
+            class="input"
+            type="text"
+            @blur="updateProfile"
+          >
+          <span
+            v-if="!isPC"
+            class="tip"
+          >{{
+            TUITranslateService.t(
+              `TUIGroup.仅限中文、字母、数字和下划线，2-20个字`
+            )
+          }}</span>
+        </div>
+        <footer
+          v-if="!isPC"
+          class="edit-h5-footer"
+        >
+          <button
+            class="btn"
+            @click="updateProfile"
+          >
+            {{ TUITranslateService.t(`确认`) }}
+          </button>
+        </footer>
+      </main>
+    </div>
+    <p
+      v-if="!isEdit || !isPC"
+      class="name"
+      @click="toggleEditStatus"
+    >
+      <span>{{ groupProfile.name }}</span>
+      <Icon
+        v-if="isAuthor"
+        class="icon"
+        :file="editIcon"
+        width="14px"
+        height="14px"
+      />
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watchEffect, ref, nextTick, watch } from '../../../adapter-vue';
+import {
+  TUITranslateService,
+  IGroupModel,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../common/Icon.vue';
+import editIcon from '../../../assets/icon/edit.svg';
+import { Toast, TOAST_TYPE } from '../../common/Toast/index';
+import { isMobile, isPC } from '../../../utils/env';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  isAuthor: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const groupProfile = ref<IGroupModel>({});
+const inputGroupName = ref('');
+const isEdit = ref(false);
+const nameInputRef = ref<HTMLInputElement>(null);
+
+watchEffect(() => {
+  groupProfile.value = props.data;
+});
+
+const emit = defineEmits(['update']);
+const updateProfile = () => {
+  if (!inputGroupName.value) {
+    Toast({
+      message: TUITranslateService.t('TUIGroup.群名称不能为空'),
+      type: TOAST_TYPE.ERROR,
+    });
+  } else {
+    if (inputGroupName.value !== groupProfile.value.name) {
+      emit('update', { key: 'name', value: inputGroupName.value });
+      groupProfile.value.name = inputGroupName.value;
+      inputGroupName.value = '';
+      Toast({
+        message: TUITranslateService.t('TUIGroup.群名称修改成功'),
+        type: TOAST_TYPE.SUCCESS,
+      });
+    }
+    toggleEditStatus();
+  }
+};
+
+const toggleEditStatus = () => {
+  if (props.isAuthor) {
+    isEdit.value = !isEdit.value;
+  }
+  if (isEdit.value) {
+    inputGroupName.value = groupProfile.value.name;
+  }
+};
+
+watch(
+  () => isEdit.value,
+  (newVal: boolean) => {
+    if (newVal) {
+      nextTick(() => {
+        nameInputRef.value?.focus();
+      });
+    }
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+@import "../../../assets/styles/common";
+
+.group-name {
+  padding: 14px 20px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #000;
+  display: flex;
+  flex-direction: column;
+
+  .name {
+    color: #999;
+    display: flex;
+    align-items: center;
+
+    .icon {
+      margin-left: 4px;
+    }
+  }
+}
+
+.input-box {
+  display: flex;
+
+  .input {
+    flex: 1;
+    border: 1px solid #e8e8e9;
+    border-radius: 4px;
+    padding: 4px 16px;
+    font-weight: 400;
+    font-size: 14px;
+    color: #000;
+    opacity: 0.6;
+  }
+}
+
+.space-top {
+  border-top: 10px solid #f4f5f9;
+}
+
+.edit-h5 {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-end;
+  z-index: 1;
+
+  .edit-h5-main {
+    background: #fff;
+    flex: 1;
+    padding: 18px;
+    border-radius: 12px 12px 0 0;
+    width: 80vw;
+
+    .input-box {
+      flex-direction: column;
+      padding: 18px 0;
+
+      .input {
+        background: #f8f8f8;
+        padding: 10px 12px;
+      }
+
+      .tip {
+        font-size: 12px;
+        color: #888;
+        padding-top: 8px;
+      }
+    }
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .close {
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 18px;
+      color: #3370ff;
+      letter-spacing: 0;
+      line-height: 27px;
+    }
+  }
+
+  &-footer {
+    display: flex;
+
+    .btn {
+      flex: 1;
+      border: none;
+      background: #147aff;
+      border-radius: 5px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 16px;
+      color: #fff;
+      letter-spacing: 0;
+      line-height: 27px;
+      padding: 8px 0;
+
+      &:disabled {
+        opacity: 0.3;
+      }
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIGroup/manage-group/manage-notification.vue b/txim/src/TUIKit/components/TUIGroup/manage-group/manage-notification.vue
new file mode 100644
index 00000000..802cc2db
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/manage-group/manage-notification.vue
@@ -0,0 +1,268 @@
+<template>
+  <main
+    v-if="!isUniFrameWork"
+    class="notification"
+  >
+    <textarea
+      v-if="isEdit"
+      v-model="input"
+      class="textarea"
+      @keyup.enter="updateProfile"
+    />
+    <section v-else>
+      <p v-if="!groupProfile.notification">
+        {{ TUITranslateService.t(`TUIGroup.暂无公告`) }}
+      </p>
+      <article v-else>
+        {{ groupProfile.notification }}
+      </article>
+    </section>
+    <footer v-if="isAuthorNotification">
+      <button
+        v-if="isEdit"
+        class="btn"
+        @click="updateProfile"
+      >
+        {{ TUITranslateService.t(`TUIGroup.发布`) }}
+      </button>
+      <button
+        v-else
+        class="btn"
+        @click="isEdit = !isEdit"
+      >
+        {{ TUITranslateService.t(`TUIGroup.编辑`) }}
+      </button>
+    </footer>
+  </main>
+  <div
+    v-else
+    class="edit-h5"
+  >
+    <main class="edit-h5-main">
+      <header class="edit-h5-header">
+        <aside class="left">
+          <h1>{{ TUITranslateService.t(`TUIGroup.群公告`) }}</h1>
+        </aside>
+        <span
+          class="close"
+          @click="close('notification')"
+        >{{
+          TUITranslateService.t(`关闭`)
+        }}</span>
+      </header>
+      <div class="notification">
+        <textarea
+          v-if="isEdit"
+          v-model="input"
+          :class="[isUniFrameWork ? 'uni-height' : '', 'textarea']"
+          @keyup.enter="updateProfile"
+        />
+        <section
+          v-else
+          class="row"
+        >
+          <p
+            v-if="!groupProfile.notification"
+            class="row-p"
+          >
+            {{ TUITranslateService.t(`TUIGroup.暂无公告`) }}
+          </p>
+          <article v-else>
+            {{ groupProfile.notification }}
+          </article>
+        </section>
+        <footer
+          v-if="isAuthorNotification"
+          class="footer"
+        >
+          <button
+            v-if="isEdit"
+            class="btn"
+            @click="updateProfile"
+          >
+            {{ TUITranslateService.t(`TUIGroup.发布`) }}
+          </button>
+          <button
+            v-else
+            class="btn"
+            @click="isEdit = !isEdit"
+          >
+            {{ TUITranslateService.t(`TUIGroup.编辑`) }}
+          </button>
+        </footer>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick } from '../../../adapter-vue';
+import {
+  TUITranslateService,
+  IGroupModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { watchEffect, ref } from '../../../adapter-vue';
+import { Toast, TOAST_TYPE } from '../../common/Toast/index';
+import { isUniFrameWork } from '../../../utils/env';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  isAuthor: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const groupProfile = ref<IGroupModel>({});
+const input = ref('');
+const isAuthorNotification = ref(false);
+const isEdit = ref(false);
+
+watchEffect(() => {
+  groupProfile.value = props.data;
+  input.value = groupProfile.value.notification;
+  isAuthorNotification.value = props.isAuthor;
+});
+
+const emits = defineEmits(['update', 'close']);
+
+const updateProfile = () => {
+  if (input.value.length > 150) {
+    Toast({
+      message: TUITranslateService.t('TUIGroup.群公告字数超出限制，最大长度为150'),
+      type: TOAST_TYPE.ERROR,
+    });
+    return;
+  }
+  if (input.value && input.value !== groupProfile.value.notification) {
+    emits('update', { key: 'notification', value: input.value });
+    nextTick(() => {
+      input.value = '';
+    });
+  }
+  isEdit.value = !isEdit.value;
+};
+
+const close = (tabName: string) => {
+  emits('close', tabName);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../assets/styles/common";
+
+.notification {
+  flex: 1;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  word-break: break-all;
+
+  .row {
+    flex: 1;
+    font-size: 14px;
+
+    .row-p {
+      text-align: center;
+      padding-bottom: 20px;
+    }
+  }
+
+  .textarea {
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    padding: 10px;
+    border: 1px solid #e8e8e9;
+    resize: none;
+    font-size: 14px;
+    height: 100%;
+  }
+
+  .uni-height {
+    height: 20vh;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 20px 10px;
+  }
+}
+
+.btn {
+  background: #3370ff;
+  border: 0 solid #2f80ed;
+  padding: 4px 28px;
+  font-weight: 400;
+  font-size: 12px;
+  color: #fff;
+  line-height: 24px;
+  border-radius: 4px;
+
+  &-cancel {
+    background: #fff;
+    border: 1px solid #ddd;
+    color: #828282;
+  }
+}
+
+.edit-h5 {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-end;
+  z-index: 1;
+
+  .edit-h5-main {
+    background: #fff;
+    flex: 1;
+    padding: 18px;
+    border-radius: 12px 12px 0 0;
+    width: 80vw;
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .close {
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 18px;
+      color: #3370ff;
+      letter-spacing: 0;
+      line-height: 27px;
+    }
+  }
+
+  &-footer {
+    display: flex;
+
+    .btn {
+      flex: 1;
+      border: none;
+      background: #147aff;
+      border-radius: 5px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 16px;
+      color: #fff;
+      letter-spacing: 0;
+      line-height: 27px;
+      padding: 8px 0;
+
+      &:disabled {
+        opacity: 0.3;
+      }
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIGroup/manage-group/manage-profile.vue b/txim/src/TUIKit/components/TUIGroup/manage-group/manage-profile.vue
new file mode 100644
index 00000000..bdb41459
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/manage-group/manage-profile.vue
@@ -0,0 +1,275 @@
+<template>
+  <div
+    v-if="!isUniFrameWork"
+    class="memeber-profile"
+  >
+    <div class="memeber-profile-main">
+      <img
+        class="avatar"
+        :src="
+          userInfoManager.avatar ||
+            'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+        "
+        onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+      >
+      <ul class="list">
+        <h2>{{ userInfoManager.nick || userInfoManager.userID }}</h2>
+        <li>
+          <label>ID：</label>
+          <span>{{ userInfoManager.userID }}</span>
+        </li>
+        <li>
+          <label>{{ TUITranslateService.t("TUIContact.个性签名") }}：</label>
+          <span>{{ userInfoManager.selfSignature }}</span>
+        </li>
+      </ul>
+    </div>
+    <div class="memeber-profile-footer">
+      <div
+        v-if="showEnter()"
+        class="button"
+        @click="enter(userInfoManager.userID, 'C2C')"
+      >
+        {{ TUITranslateService.t("TUIContact.发送消息") }}
+      </div>
+    </div>
+  </div>
+  <div
+    v-else
+    class="edit-h5"
+  >
+    <main class="main">
+      <header class="edit-h5-header">
+        <aside class="left">
+          <h1>{{ TUITranslateService.t(`TUIGroup.群成员`) }}</h1>
+        </aside>
+        <span
+          class="close"
+          @click="close('profile')"
+        >{{
+          TUITranslateService.t(`关闭`)
+        }}</span>
+      </header>
+      <div class="edit-h5-profile">
+        <div class="memeber-profile-main">
+          <Avatar
+            class="avatar"
+            :url="userInfoManager.avatar"
+            size="60px"
+          />
+          <ul class="list">
+            <h1>{{ userInfoManager.nick || userInfoManager.userID }}</h1>
+            <li>
+              <label>ID：</label>
+              <span>{{ userInfoManager.userID }}</span>
+            </li>
+            <li>
+              <label>{{ TUITranslateService.t("TUIContact.个性签名") }}：</label>
+              <span>{{ userInfoManager.selfSignature }}</span>
+            </li>
+          </ul>
+        </div>
+        <div class="memeber-profile-footer">
+          <div
+            v-if="showEnter()"
+            class="button"
+            @click="enter(userInfoManager.userID, 'C2C')"
+          >
+            {{ TUITranslateService.t("TUIContact.发送消息") }}
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, watch, watchEffect } from '../../../adapter-vue';
+import TUIChatEngine, {
+  TUITranslateService,
+  TUIUserService,
+  TUIConversationService,
+  TUIFriendService,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import Avatar from '../../common/Avatar/index.vue';
+import { IUserProfile } from '../../../interface';
+import { isUniFrameWork } from '../../../utils/env';
+
+const props = defineProps({
+  userInfo: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const isFriendShip = ref(false);
+const userInfoManager = ref<IUserProfile>({});
+
+watchEffect(() => {
+  userInfoManager.value = props.userInfo;
+});
+const emits = defineEmits([
+  'handleSwitchConversation',
+  'close',
+  'openConversation',
+]);
+
+watch(
+  () => props.userInfo,
+  async (newVal: any, oldVal: any) => {
+    if (newVal === oldVal) return;
+    const res = await TUIUserService.getUserProfile({
+      userIDList: [props.userInfo.userID],
+    });
+    userInfoManager.value = res?.data[0];
+    checkFriend();
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+const enter = async (ID: any, type: string) => {
+  const name = `${type}${ID}`;
+  TUIConversationService.getConversationProfile(name)
+    .then((res: any) => {
+      TUIConversationService.switchConversation(res.data.conversation.conversationID).then(() => {
+        TUIStore.update(StoreName.GRP, 'isShowManageComponent', false);
+        if (isUniFrameWork) {
+          TUIGlobal?.navigateBack();
+        }
+      });
+    })
+    .catch((err: any) => {
+      console.warn('获取会话资料失败', err.code, err.msg);
+    });
+};
+const checkFriend = async () => {
+  if (!(userInfoManager.value as any).userID) return;
+  TUIFriendService.checkFriend({
+    userIDList: [userInfoManager.value.userID],
+    type: TUIChatEngine.TYPES.SNS_CHECK_TYPE_BOTH,
+  }).then((res: any) => {
+    const relation = res?.data?.successUserIDList?.[0]?.relation;
+    isFriendShip.value = (relation === TUIChatEngine.TYPES.SNS_TYPE_BOTH_WAY);
+  });
+};
+
+const showEnter = () => {
+  return isFriendShip.value || !TUIStore.getData(StoreName.APP, 'isOfficial');
+};
+
+const close = (tabName: string) => {
+  emits('close', tabName);
+};
+</script>
+<style lang="scss" scoped>
+@import "../../../assets/styles/common";
+
+.memeber-profile {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  &-main {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    overflow: hidden;
+
+    .avatar {
+      width: 60px;
+      height: 60px;
+      border-radius: 8px;
+      margin: 20px 10px 20px 20px;
+    }
+
+    .list {
+      flex: 1;
+      overflow: hidden;
+      margin: 20px 10px;
+      font-weight: 400;
+
+      li {
+        color: #999;
+      }
+
+      h1,
+      li {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  &-footer {
+    border-top: 1px solid #f4f5f9;
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .button {
+      width: 100px;
+      cursor: pointer;
+      background-color: #006eff;
+      color: #fff;
+      padding: 8px 20px;
+      border-radius: 4px;
+      border: none;
+      font-size: 14px;
+      text-align: center;
+      line-height: 20px;
+    }
+  }
+}
+
+.edit-h5 {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-end;
+  z-index: 1;
+
+  .main {
+    background: #fff;
+    flex: 1;
+    padding: 18px;
+    border-radius: 12px 12px 0 0;
+    width: 80vw;
+
+    .edit-h5-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .close {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 18px;
+        color: #3370ff;
+        letter-spacing: 0;
+        line-height: 27px;
+      }
+    }
+
+    .edit-h5-profile {
+      .memeber-profile-main {
+        .avatar {
+          margin: 20px;
+        }
+
+      }
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUIGroup/manage-group/style/color.scss b/txim/src/TUIKit/components/TUIGroup/manage-group/style/color.scss
new file mode 100644
index 00000000..8d532b1a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/manage-group/style/color.scss
@@ -0,0 +1,64 @@
+.manage {
+  background: #FFF;
+  box-shadow: 0 1px 10px 0 rgba(2, 16, 43, 0.15);
+
+  &-header {
+    border-bottom: 1px solid #E8E8E9;
+
+    .manage-header-content {
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      color: #000;
+    }
+  }
+
+  .main {
+    .footer {
+      .list-item {
+        font-weight: 400;
+        color: #dc2113;
+        border-bottom: 1px solid #E8E8E9;
+      }
+    }
+  }
+}
+
+.input {
+  border: 1px solid #E8E8E9;
+  font-weight: 400;
+  color: #000;
+  opacity: 0.6;
+}
+
+.avatar {
+  background: #F4F5F9;
+  color: #000;
+}
+
+.space-top {
+  border-top: 10px solid #F4F5F9;
+}
+
+.btn {
+  background: #3370FF;
+  border: 0 solid #2F80ED;
+  color: #FFF;
+
+  &-cancel {
+    background: #FFF;
+    border: 1px solid #DDD;
+    color: #828282;
+  }
+}
+
+.slider {
+  &-box {
+    background: #E1E1E3;
+  }
+
+  &-block {
+    background: #FFF;
+    border: 0 solid rgba(0, 0, 0, 0.85);
+    box-shadow: 0 2px 4px 0 #D1D1D1;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUIGroup/manage-group/style/h5.scss b/txim/src/TUIKit/components/TUIGroup/manage-group/style/h5.scss
new file mode 100644
index 00000000..2e5ea9ac
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/manage-group/style/h5.scss
@@ -0,0 +1,3 @@
+.deleted-dialog {
+  padding: 20%;
+}
diff --git a/txim/src/TUIKit/components/TUIGroup/manage-group/style/index.scss b/txim/src/TUIKit/components/TUIGroup/manage-group/style/index.scss
new file mode 100644
index 00000000..e304d004
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/manage-group/style/index.scss
@@ -0,0 +1,39 @@
+@import '../../../../assets/styles/common';
+@import './color';
+@import './web';
+@import './h5';
+
+
+.icon-close {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  border-radius: 50%;
+}
+
+.icon-close::before,
+.icon-close::after {
+  content: "";
+  position: absolute;
+  background-color: #8F959E;
+  height: 16px;
+  width: 2px;
+  top: 50%;
+  left: 50%;
+  margin-top: -8px;
+  margin-left: -1px;
+}
+
+.icon-close::before {
+  transform: rotate(45deg);
+}
+
+.icon-close::after {
+  transform: rotate(-45deg);
+}
+
+.tab-icon {
+  position: absolute;
+  left: 20px;
+}
diff --git a/txim/src/TUIKit/components/TUIGroup/manage-group/style/web.scss b/txim/src/TUIKit/components/TUIGroup/manage-group/style/web.scss
new file mode 100644
index 00000000..fb315d30
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/manage-group/style/web.scss
@@ -0,0 +1,243 @@
+.btn {
+  padding: 4px 28px;
+  font-size: 12px;
+  line-height: 24px;
+  border-radius: 4px;
+}
+
+.list {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+
+  &-item {
+    padding: 14px 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
+
+  &-between {
+    justify-content: space-between;
+  }
+}
+
+.manage {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  &-header {
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-content {
+      margin-left: -20px;
+      text-align: center;
+      font-size: 16px;
+      line-height: 30px;
+      font-weight: 500;
+    }
+
+    &-left {
+      display: flex;
+    }
+  }
+
+  .main {
+    .user-info {
+      padding: 0 20px;
+      display: flex;
+      flex-direction: column;
+      font-size: 14px;
+
+      &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 14px 0;
+
+        &-right {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      &-list {
+        flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        padding-bottom: 20px;
+
+        &-item {
+          position: relative;
+          flex: 0 0 36px;
+          display: flex;
+          flex-direction: column;
+          padding-right: 20px;
+
+          &:last-child {
+            padding-right: 0;
+          }
+
+          .more {
+            padding-top: 10px;
+          }
+
+          &-info {
+            text-align: center;
+            max-width: 36px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+
+    .content {
+      padding: 0 20px;
+
+      .list-item {
+        justify-content: space-between;
+
+        .btn {
+          flex: 1;
+        }
+
+        .article {
+          opacity: 0.6;
+          width: 246px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .end {
+          align-self: flex-end;
+          margin-bottom: 4px;
+        }
+      }
+    }
+
+    .footer {
+      padding: 0 20px;
+
+      .list-item {
+        cursor: pointer;
+        width: 100%;
+        font-size: 14px;
+        padding: 14px 0;
+        justify-content: center;
+
+        &:last-child {
+          border: none;
+        }
+      }
+    }
+  }
+
+  .admin {
+    padding: 20px 0;
+
+    &-content {
+      padding: 20px 20px 12px;
+      display: flex;
+      align-items: center;
+
+      .aside {
+        flex: 1;
+        font-size: 14px;
+
+        .p {
+          font-size: 12px;
+        }
+      }
+    }
+
+    &-list {
+      padding: 0 20px;
+
+      .label {
+        display: inline-block;
+        font-size: 14px;
+        padding-bottom: 8px;
+      }
+    }
+
+    .last {
+      padding-top: 13px;
+      position: relative;
+
+      &::before {
+        position: absolute;
+        content: "";
+        width: calc(100% - 40px);
+        height: 1px;
+        top: 0;
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+
+.input {
+  border-radius: 4px;
+  padding: 4px 16px;
+  font-size: 14px;
+}
+
+.group-id {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .icon {
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+  }
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  font-size: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.slider {
+  &-box {
+    display: flex;
+    align-items: center;
+    width: 34px;
+    height: 20px;
+    border-radius: 10px;
+  }
+
+  &-block {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    margin: 0 2px;
+  }
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.del-dialog-title {
+  text-align: center;
+  padding: 20px 0;
+}
diff --git a/txim/src/TUIKit/components/TUIGroup/select-member/index.ts b/txim/src/TUIKit/components/TUIGroup/select-member/index.ts
new file mode 100644
index 00000000..1c8a23d8
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/select-member/index.ts
@@ -0,0 +1,3 @@
+import SelectMember from './index.vue';
+
+export default SelectMember;
diff --git a/txim/src/TUIKit/components/TUIGroup/select-member/index.vue b/txim/src/TUIKit/components/TUIGroup/select-member/index.vue
new file mode 100644
index 00000000..b8b3a07a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/select-member/index.vue
@@ -0,0 +1,120 @@
+<template>
+  <SelectUser
+    :isRadio="selectOptions.isRadio"
+    :isNeedSearch="selectOptions.isNeedSearch"
+    :title="selectOptions.title"
+    :userList="userList"
+    :total="group.memberCount"
+    @getMore="getMember"
+    @search="handleSearch"
+    @complete="handleSelectedResult"
+  />
+</template>
+<script lang="ts" setup>
+import {
+  TUIGroupService,
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  IGroupMember,
+  IGroupModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref, watchEffect } from '../../../adapter-vue';
+import { Toast, TOAST_TYPE } from '../../common/Toast/index';
+import TUICore from '@tencentcloud/tui-core';
+import SelectUser from '../../common/SelectUser/index.vue';
+import Server from '../server';
+const TUIContactServer = Server.getInstance();
+const TUIConstants = TUIContactServer.constants;
+
+const needSearch = ref(false);
+const memberList = ref<Array<typeof IGroupMember>>([]);
+const userList = ref<Array<typeof IGroupMember>>([]);
+const group = ref<IGroupModel>({});
+const selectOptions: any = ref({
+  groupID: '',
+  isRadio: false,
+  isNeedSearch: false,
+  title: '',
+  filterUserIDList: [] as Array<string>,
+});
+const TUISearchServer = ref<any>(null);
+
+const generateSearchServer = (isNeedSearch: any) => {
+  TUISearchServer.value = TUICore.getService(TUIConstants.TUISearch.SERVICE.NAME);
+  if (TUISearchServer.value) {
+    needSearch.value = isNeedSearch;
+  } else {
+    console.warn('请添加 TUISearch 组件');
+  }
+};
+
+watchEffect(() => {
+  const params = TUIContactServer.getOnCallParams(TUIConstants.TUIContact.SERVICE.METHOD.SELECT_FRIEND);
+  selectOptions.value.groupID = params.groupID;
+  selectOptions.value.title = params.title;
+  selectOptions.value.isRadio = params.isRadio;
+  selectOptions.value.isNeedSearch = params.isNeedSearch;
+  selectOptions.value.filterUserIDList = params.filterUserIDList;
+  if (params.isNeedSearch) {
+    generateSearchServer(params.isNeedSearch);
+  }
+});
+
+TUIStore.watch(StoreName.GRP, {
+  currentGroup: (data: IGroupModel) => {
+    group.value = data;
+  },
+  currentGroupMemberList: (List: Array<typeof IGroupMember>) => {
+    memberList.value = List.map((item: typeof IGroupMember) => {
+      if (selectOptions.value.filterUserIDList.indexOf(item.userID) > -1) {
+        item.isDisabled = true;
+      }
+    });
+    userList.value = memberList.value;
+  },
+});
+
+const getMember = async () => {
+  const groupID = group.value.groupID;
+  const options = {
+    groupID,
+    count: 100,
+    offset: memberList.value.length,
+  };
+  await TUIGroupService.getGroupMemberList(options);
+};
+
+const handleSelectedResult = (memberList: Array<any>) => {
+  TUIStore.update(StoreName.GRP, 'isShowSelectComponent', false);
+  const callback = TUIContactServer.getOnCallCallback(TUIConstants.TUIGroup.SERVICE.METHOD.SELECT_GROUP_MEMBER);
+  callback && callback(memberList);
+};
+
+const searchFail = () => {
+  Toast({
+    message: TUITranslateService.t('TUIGroup.该用户不存在'),
+    type: TOAST_TYPE.ERROR,
+  });
+  userList.value = [...memberList.value];
+};
+
+const handleSearch = async (val: string) => {
+  if (!val) {
+    return userList.value = memberList.value;
+  }
+
+  try {
+    const imResponse: any = await TUISearchServer.value.searchGroupMember(val);
+    if (!imResponse.data[0]) {
+      return searchFail();
+    }
+    userList.value = imResponse.data;
+    const searchAllResult = memberList.value.filter((item: any) => item.userID === imResponse.data[0].userID);
+    memberList.value = searchAllResult.length ? memberList.value : [...memberList.value, ...userList.value];
+  } catch (error) {
+    return searchFail();
+  }
+};
+
+</script>
diff --git a/txim/src/TUIKit/components/TUIGroup/server.ts b/txim/src/TUIKit/components/TUIGroup/server.ts
new file mode 100644
index 00000000..68188e79
--- /dev/null
+++ b/txim/src/TUIKit/components/TUIGroup/server.ts
@@ -0,0 +1,94 @@
+import TUICore, { TUIConstants, ExtensionInfo } from '@tencentcloud/tui-core';
+import {
+  TUIStore,
+  StoreName,
+  TUIGroupService,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import settingSVG from '../../assets/icon/setting.svg';
+import { isUniFrameWork } from '../../utils/env';
+
+export default class TUIGroupServer {
+  static instance: TUIGroupServer;
+  private onCallParamsMap: Map<string, any>;
+  private onCallCallbackMap: Map<string, () => void>;
+  public constants: typeof TUIConstants;
+  constructor() {
+    TUICore.registerService(TUIConstants.TUIGroup.SERVICE.NAME, this);
+    TUICore.registerExtension(TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID, this);
+    this.onCallParamsMap = new Map();
+    this.onCallCallbackMap = new Map();
+    this.constants = TUIConstants;
+  }
+
+  static getInstance(): TUIGroupServer {
+    if (!TUIGroupServer.instance) {
+      TUIGroupServer.instance = new TUIGroupServer();
+    }
+    return TUIGroupServer.instance;
+  }
+
+  public getOnCallParams(method: string): any {
+    return this.onCallParamsMap.get(method);
+  }
+
+  public getOnCallCallback(method: string): (() => void) | undefined {
+    return this.onCallCallbackMap.get(method);
+  }
+
+  public async onCall(method: string, params: any, callback: () => void): Promise<void> {
+    this.onCallParamsMap.set(method, params);
+    this.onCallCallbackMap.set(method, callback);
+    switch (method) {
+      case TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP:
+        TUIStore.update(StoreName.GRP, 'isShowCreateComponent', true);
+        isUniFrameWork && TUIGlobal?.reLaunch({
+          url: '/TUIKit/components/TUIGroup/index',
+        });
+        break;
+      case TUIConstants.TUIGroup.SERVICE.METHOD.OPEN_GROUP_MANAGEMENT:
+        TUIGroupService.switchGroup(params.groupID);
+        TUIStore.update(StoreName.GRP, 'isShowManageComponent', true);
+        isUniFrameWork && TUIGlobal?.navigateTo({
+          url: '/TUIKit/components/TUIGroup/index',
+        });
+        break;
+      case TUIConstants.TUIGroup.SERVICE.METHOD.SELECT_GROUP_MEMBER:
+        TUIGroupService.switchGroup(params.groupID);
+        TUIStore.update(StoreName.GRP, 'isShowSelectComponent', true);
+        isUniFrameWork && TUIGlobal?.navigateTo({
+          url: '/TUIKit/components/TUIGroup/index',
+        });
+        break;
+    }
+  }
+
+  public onGetExtension(extensionID: string): ExtensionInfo[] {
+    const list: ExtensionInfo[] = [];
+    switch (extensionID) {
+      case TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID:
+        list.push({
+          weight: 100,
+          icon: settingSVG,
+          text: '更多',
+          data: {},
+          listener: {
+            onClicked: this.groupManage.bind(this),
+          },
+        });
+        break;
+    }
+    return list;
+  }
+
+  private groupManage(params: any) {
+    TUICore.callService({
+      serviceName: TUIConstants.TUIGroup.SERVICE.NAME,
+      method: TUIConstants.TUIGroup.SERVICE.METHOD.OPEN_GROUP_MANAGEMENT,
+      params,
+      callback: () => {
+        isUniFrameWork && TUIGlobal?.navigateBack();
+      },
+    });
+  }
+}
diff --git a/txim/src/TUIKit/components/TUINotification/index.ts b/txim/src/TUIKit/components/TUINotification/index.ts
new file mode 100644
index 00000000..60d338fc
--- /dev/null
+++ b/txim/src/TUIKit/components/TUINotification/index.ts
@@ -0,0 +1,387 @@
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  IMessageModel,
+  IConversationModel,
+  TUITranslateService,
+  TUIConversationService,
+} from '@tencentcloud/chat-uikit-engine';
+import {
+  ITUINotification,
+  NotificationType,
+  INotificationConstructorParams,
+} from './interface';
+import { safeParse, isTypingMessage } from './utils';
+
+const TYPES = TUIChatEngine.TYPES;
+
+/**
+   * The TUINotification class.
+   * Just can use in web environment.
+   * @extends {ITUINotification}
+   * @param {INotificationConstructorParams | undefined} params - An optional parameter specifying the options for creating the TUINotification instance.
+   * @return {TUINotification} - The instance of TUINotification.
+   * @example
+   * TUINotification.setNotificationConfiguration({
+   *   showPreviews: true,
+   *   allowNotifications: true
+   * });
+   * TUINotification.getInstance(config).notify(message);
+   */
+class TUINotification implements ITUINotification {
+  public showPreviews = true;
+  public allowNotifications = true;
+  public notificationTitle = TUITranslateService.t('TUIChat.腾讯云 IM');
+  public notificationIcon = 'https://web.sdk.qcloud.com/im/demo/latest/faviconnew.png';
+
+  private static instance: TUINotification | null = null;
+
+  // private constructor implementing the Singleton Pattern
+  private constructor(params?: INotificationConstructorParams) {
+    this.setConfiguration(params);
+  }
+
+  /**
+     * Returns an instance of TUINotification.
+     *
+     * @param {INotificationConstructorParams | undefined} options - An optional parameter specifying the options for creating the TUINotification instance.
+     * @return {TUINotification} - The instance of TUINotification.
+     */
+  static getInstance(options?: INotificationConstructorParams): TUINotification {
+    if (!this.instance) {
+      this.instance = new TUINotification(options);
+    }
+    return this.instance;
+  }
+
+  /**
+     * Notifies the user with a given message.
+     *
+     * @param {IMessageModel} message - The message to be notified.
+     * @return {Promise<void>} - A promise that resolves when the notification is handled.
+     */
+  public async notify(message: IMessageModel): Promise<void> {
+    const browserPermission = await this.requestNotificationPermission();
+    if (
+      !this.allowNotifications
+      || !browserPermission
+      || !this.isMessageNeedNotification(message)
+    ) {
+      return;
+    }
+    await this.handleNotification(message);
+  }
+
+  /**
+     * Handles the notification message.
+     *
+     * @param {IMessageModel} message - The notification message to handle.
+     * @return {Promise<void>} - A Promise that resolves once the notification is handled.
+     */
+  public async handleNotification(message: IMessageModel): Promise<void> {
+    let options = {
+      badge: this.notificationIcon,
+      icon: this.notificationIcon,
+      body: '',
+      requireInteraction: false,
+    };
+    const notificationType = this.getNotificationType(message);
+    let content;
+    let callEnd;
+    switch (notificationType) {
+      case 'call':
+        ({ content, callEnd } = this.getCallNotificationInfo(message));
+        options = {
+          ...options,
+          body: content,
+          requireInteraction: !callEnd,
+        };
+        break;
+      case 'chat':
+        options = {
+          ...options,
+          body: await this.getChatNotificationContent(message),
+          requireInteraction: false,
+        };
+        break;
+    }
+    const notification = new Notification(this.notificationTitle, options);
+    notification.onclick = async () => {
+      window.focus();
+      if (!message || !message.conversationID) {
+        return;
+      }
+      if (
+        message?.conversationType === TYPES.CONV_C2C
+        || message?.conversationType === TYPES.CONV_GROUP
+      ) {
+        const conversationProfile = await TUIConversationService.getConversationProfile(message.conversationID);
+        const { conversationID: clickedMessageConvID } = conversationProfile?.data?.conversation || {};
+        if (clickedMessageConvID) {
+          TUIConversationService.switchConversation(clickedMessageConvID);
+        }
+      }
+      notification.close();
+    };
+  }
+
+  /**
+     * Sets the notification configuration.
+     *
+     * @param {INotificationConstructorParams} params - The parameters for the notification configuration.
+     * @return {void} This function does not return a value.
+     */
+  public setNotificationConfiguration(params?: INotificationConstructorParams): void {
+    this.setConfiguration(params);
+  }
+
+  /**
+     * Checks if the browser supports notifications.
+     *
+     * @return {boolean} true if the browser supports notifications, false otherwise.
+     */
+  public checkNotificationAbility(): boolean {
+    if (window && 'Notification' in window) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+     * Checks if the browser has notification capability
+     * If the browser already has notification permission, returns true
+     * Otherwise, requests permission and returns the result
+     * @return Promise<boolean>
+     */
+  public async requestNotificationPermission(): Promise<boolean> {
+    if (!this.checkNotificationAbility()) {
+      console.error('The browser does not support notifications.');
+      return false;
+    }
+    if (window.Notification.permission === 'granted') {
+      return true;
+    }
+    try {
+      const permission = await Notification.requestPermission();
+      if (permission === 'granted') {
+        return true;
+      }
+    } catch {
+      return false;
+    }
+    return false;
+  }
+
+  /**
+     * Checks if the current page has focus.
+     * @return {boolean}
+     */
+  public checkPageFocus(): boolean {
+    return document.hasFocus();
+  }
+
+  /**
+     * use new configuration to overwrite old configuration
+     * @param params
+     * @return {void}
+     */
+  private setConfiguration(params?: INotificationConstructorParams): void {
+    if (!params) return;
+    if (params.allowNotifications !== undefined) {
+      this.allowNotifications = params.allowNotifications;
+    }
+    if (params.showPreviews !== undefined) {
+      this.showPreviews = params.showPreviews;
+    }
+    if (params.notificationTitle !== undefined) {
+      this.notificationTitle = params.notificationTitle;
+    }
+    if (params.notificationIcon !== undefined) {
+      this.notificationIcon = params.notificationIcon;
+    }
+  }
+
+  /**
+     * Checks if a message needs to be notified.
+     *
+     * A message does not need to be notified if it:
+     *  - is null or undefined
+     *  - does not have an ID or a type
+     *  - is revoked or deleted
+     *  - is a typing message
+     *  - is of type MSG_GRP_TIP or MSG_GRP_SYS_NOTICE
+     *  - the page is focused and the message belongs to the current conversation
+     *
+     * @param {IMessageModel} message - The message to check
+     * @return {boolean} - True if the message needs to be notified, false otherwise
+     */
+  private isMessageNeedNotification(message: IMessageModel): boolean {
+    if (!message || !message.ID || !message.type || message.isRevoked || message.isDeleted || isTypingMessage?.(message)) {
+      return false;
+    }
+
+    if (message.type === TYPES.MSG_GRP_TIP || message.type === TYPES.MSG_GRP_SYS_NOTICE) {
+      return false;
+    }
+
+    const currentConversationID = TUIStore.getData(StoreName.CONV, 'currentConversationID');
+
+    if (this.checkPageFocus() && message?.conversationID === currentConversationID) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+     * Returns the notification type 'call' or 'chat'.
+     * @param {IMessageModel} message
+     * @return {'chat' | 'call'} call' or 'chat'
+     */
+  private getNotificationType(message: IMessageModel): NotificationType {
+    if (message.type === TYPES.MSG_CUSTOM) {
+      const { businessID } = safeParse(message.payload?.data);
+      if (businessID === 1 || businessID === 'av_call') {
+        return 'call';
+      }
+    }
+    return 'chat';
+  }
+
+  /**
+     * Retrieves the content for chat type message notifications.
+     * @param {IMessageModel} message
+     * @return {Promise<string>}
+     */
+  private async getChatNotificationContent(message: IMessageModel): Promise<string> {
+    let content = '';
+    if (!message || !message.ID || !message.type) {
+      return content;
+    }
+    if (this.showPreviews) {
+      content = await this.getChatNotificationContentTitle(message);
+      content += this.getChatNotificationContentText(message);
+    } else {
+      const totalUnreadMessageCount = TUIStore.getData(StoreName.CONV, 'totalUnreadCount');
+      content = `${TUITranslateService.t('TUIChat.您有')} ${totalUnreadMessageCount} ${TUITranslateService.t('TUIChat.条新消息')}`;
+    }
+    return content;
+  }
+
+  /**
+     * Retrieves the content title for chat notifications.
+     * @param {IMessageModel} message - The message object.
+     * @returns {Promise<string>} - The content title for chat notifications.
+     */
+  private async getChatNotificationContentTitle(message: IMessageModel): Promise<string> {
+    let title = '';
+    let conversationProfile;
+    let conversation: IConversationModel;
+    switch (message.conversationType) {
+      case TYPES.CONV_C2C:
+        title = (message.nick || message.from) + ': ';
+        break;
+      case TYPES.CONV_GROUP:
+        conversationProfile = await TUIConversationService.getConversationProfile(message.conversationID);
+        conversation = conversationProfile?.data?.conversation;
+        title = conversation?.groupProfile?.name || message.conversationID;
+        title += ': ';
+        break;
+      case TYPES.CONV_SYSTEM:
+        title = `${TUITranslateService.t('TUIChat.系统消息')}: `;
+        break;
+      default:
+        break;
+    }
+    return title;
+  }
+
+  /**
+     * Get the content of the chat notification
+     * @param {IMessageModel} message
+     * @return {string}
+     */
+  private getChatNotificationContentText(message: IMessageModel): string {
+    let content = '';
+    switch (message.type) {
+      case TYPES.MSG_TEXT:
+        content += message?.payload?.text;
+        break;
+      case TYPES.MSG_CUSTOM:
+        content += TUITranslateService.t('TUIChat.自定义');
+        break;
+      case TYPES.MSG_IMAGE:
+        content += TUITranslateService.t('TUIChat.图片');
+        break;
+      case TYPES.MSG_AUDIO:
+        content += TUITranslateService.t('TUIChat.语音');
+        break;
+      case TYPES.MSG_VIDEO:
+        content += TUITranslateService.t('TUIChat.视频');
+        break;
+      case TYPES.MSG_FILE:
+        content += TUITranslateService.t('TUIChat.文件');
+        break;
+      case TYPES.MSG_FACE:
+        content += TUITranslateService.t('TUIChat.表情');
+        break;
+      case TYPES.MSG_MERGER:
+        content += TUITranslateService.t('TUIChat.聊天记录');
+        break;
+      case TYPES.MSG_LOCATION:
+        content += TUITranslateService.t('TUIChat.位置');
+        break;
+      default:
+        break;
+    }
+    return content;
+  }
+
+  /**
+     * Get the content of the call notification.
+     * @param message - The message object.
+     * @returns An object containing the notification content and call end status.
+     */
+  private getCallNotificationInfo(message: IMessageModel): { content: string; callEnd: boolean } {
+    let content = '';
+    let callEnd = false;
+
+    try {
+      if (message.type !== TYPES.MSG_CUSTOM || !message.payload?.data) {
+        throw new Error();
+      }
+      const callInfo = safeParse(message.payload.data);
+      const callDataInfo = safeParse(callInfo.data);
+      if (callInfo.businessID !== 1) {
+        throw new Error();
+      }
+      switch (callInfo.actionType) {
+        case 1:
+          if (
+            (callInfo.groupID && callInfo.timeout > 0)
+            || (!callInfo.call_end && !callInfo.groupID
+            && !(callDataInfo?.data && (callDataInfo?.data.cmd === 'switchToAudio' || callDataInfo?.data.cmd === 'switchToVideo')))
+          ) {
+            callEnd = false;
+            content = this.showPreviews ? `${callInfo.inviter} ${TUITranslateService.t('TUIChat.发起通话')}` : `${TUITranslateService.t('TUIChat.发起通话')}`;
+          }
+          break;
+        case 2:
+          callEnd = true;
+          content = this.showPreviews ? `${callInfo.inviter} ${TUITranslateService.t('TUIChat.取消通话')}` : `${TUITranslateService.t('TUIChat.取消通话')}`;
+          break;
+        default:
+          throw new Error();
+      }
+    } catch (error: unknown) {
+      console.warn(error);
+    }
+
+    return {
+      content,
+      callEnd,
+    };
+  }
+}
+
+export default TUINotification.getInstance();
diff --git a/txim/src/TUIKit/components/TUINotification/interface.ts b/txim/src/TUIKit/components/TUINotification/interface.ts
new file mode 100644
index 00000000..5c4c6b2d
--- /dev/null
+++ b/txim/src/TUIKit/components/TUINotification/interface.ts
@@ -0,0 +1,15 @@
+export interface ITUINotification {
+  showPreviews: boolean;
+  allowNotifications: boolean;
+  notificationTitle: string;
+  notificationIcon: string;
+}
+
+export interface INotificationConstructorParams {
+  showPreviews?: boolean;
+  allowNotifications?: boolean;
+  notificationTitle?: string;
+  notificationIcon?: string;
+}
+
+export type NotificationType = 'chat' | 'call';
diff --git a/txim/src/TUIKit/components/TUINotification/utils.ts b/txim/src/TUIKit/components/TUINotification/utils.ts
new file mode 100644
index 00000000..ae910060
--- /dev/null
+++ b/txim/src/TUIKit/components/TUINotification/utils.ts
@@ -0,0 +1,20 @@
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+/**
+ * Parses a JSON string and returns the resulting object.
+ *
+ * @param {string} jsonString - The JSON string to parse. Default value is "{}".
+ * @return {Record<string, any>} - The resulting object after parsing the JSON string.
+ */
+export function safeParse(jsonString: string = '{}'): Record<string, any> {
+  try {
+    return JSON.parse(jsonString);
+  } catch {
+    return {};
+  }
+}
+
+export function isTypingMessage(message: IMessageModel): boolean {
+  const { businessID } = safeParse(message.payload?.data);
+  return businessID === 'user_typing_status';
+}
diff --git a/txim/src/TUIKit/components/TUISearch/index.ts b/txim/src/TUIKit/components/TUISearch/index.ts
new file mode 100644
index 00000000..c60e45c6
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/index.ts
@@ -0,0 +1,5 @@
+import TUISearch from './index.vue';
+import Server from './server';
+new Server();
+
+export default TUISearch;
diff --git a/txim/src/TUIKit/components/TUISearch/index.vue b/txim/src/TUIKit/components/TUISearch/index.vue
new file mode 100644
index 00000000..f12c17b3
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/index.vue
@@ -0,0 +1,207 @@
+<template>
+  <div
+    v-if="
+      searchType === 'global' ||
+        ((searchType === 'conversation' || (!searchType && isUniFrameWork)) &&
+          isShowInConversationSearch)
+    "
+    :class="[
+      'tui-search',
+      !isPC && 'tui-search-h5',
+      `tui-search-main-${searchType ? searchType : 'conversation'}`,
+      isFullScreen && 'tui-search-h5-full-screen',
+    ]"
+  >
+    <div
+      v-if="searchType === 'global'"
+      ref="globalSearchRef"
+      :class="['tui-search-global', !isPC && 'tui-search-h5-global']"
+    >
+      <div
+        :class="[
+          'tui-search-global-header',
+          !isPC && 'tui-search-h5-global-header',
+        ]"
+      >
+        <SearchInput
+          class="search-input"
+          :searchType="searchType"
+        />
+        <SearchMore
+          v-if="isPC || !searchingStatus"
+          class="search-more"
+          :searchType="searchType"
+        />
+      </div>
+      <SearchContainer
+        v-if="searchingStatus"
+        class="search-container"
+        popupPosition="bottom"
+        :searchType="searchType"
+      >
+        <template #result>
+          <SearchResult
+            class="search-result"
+            :searchType="searchType"
+          />
+        </template>
+      </SearchContainer>
+    </div>
+    <div
+      v-else-if="
+        (searchType === 'conversation' && isShowInConversationSearch) ||
+          isUniFrameWork
+      "
+      :class="[
+        'tui-search-conversation',
+        !isPC && 'tui-search-h5-conversation',
+      ]"
+    >
+      <SearchContainer
+        class="search-container"
+        popupPosition="aside"
+        :searchType="searchType ? searchType : 'conversation'"
+        @closeInConversationSearch="closeInConversationSearch"
+      >
+        <template #input>
+          <SearchInput
+            :searchType="searchType ? searchType : 'conversation'"
+          />
+        </template>
+        <template #result>
+          <SearchResult
+            class="search-result"
+            :searchType="searchType ? searchType : 'conversation'"
+          />
+        </template>
+      </SearchContainer>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  ref,
+  onMounted,
+  computed,
+  withDefaults,
+  onUnmounted,
+} from '../../adapter-vue';
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal, outsideClick } from '@tencentcloud/universal-api';
+import SearchInput from './search-input/index.vue';
+import SearchContainer from './search-container/index.vue';
+import SearchResult from './search-result/index.vue';
+import SearchMore from './search-more/index.vue';
+import { searchMessageTypeDefault } from './search-type-list';
+import { searchMessageTimeDefault } from './search-time-list';
+import { isPC, isUniFrameWork } from '../../utils/env';
+import { ISearchingStatus, SEARCH_TYPE } from './type';
+
+const props = withDefaults(
+  defineProps<{
+    searchType?: SEARCH_TYPE;
+  }>(),
+  {
+    searchType: () => {
+      return isUniFrameWork ? 'conversation' : 'global';
+    },
+  },
+);
+const globalSearchRef = ref<HTMLElement | null>();
+const currentConversationID = ref<string>('');
+const searchingStatus = ref<boolean>(false);
+// Whether to display the search in the chat
+const isShowInConversationSearch = ref<boolean>(isUniFrameWork);
+// Whether to search in full screen - Search in full screen when the mobile terminal is searching
+const isFullScreen = computed(
+  () =>
+    !isPC
+    && ((props.searchType === 'global' && searchingStatus.value)
+    || (props.searchType === 'conversation' && isShowInConversationSearch.value)),
+);
+
+const initSearchValue = (searchType: SEARCH_TYPE) => {
+  TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
+    value: '',
+    searchType: searchType,
+  });
+  TUIStore.update(StoreName.SEARCH, 'currentSearchMessageType', {
+    value: searchMessageTypeDefault[searchType],
+    searchType: searchType,
+  });
+  TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
+    value: searchMessageTimeDefault,
+    searchType: searchType,
+  });
+};
+
+function onCurrentConversationIDUpdate(conversationID: string) {
+  if (!isUniFrameWork && currentConversationID.value !== conversationID) {
+    // PC side single page switch session, close search
+    closeInConversationSearch();
+  }
+  currentConversationID.value = conversationID;
+}
+
+function onCurrentSearchingStatusChange(value: ISearchingStatus) {
+  if (value?.searchType === props.searchType) {
+    searchingStatus.value = value?.isSearching;
+    // global search ui bind on click outside close
+    if (value?.searchType === 'global' && globalSearchRef.value) {
+      if (isPC && value.isSearching) {
+        outsideClick.listen({
+          domRefs: globalSearchRef.value,
+          handler: closeGlobalSearch,
+        });
+      }
+    }
+    if (value?.searchType === 'global' && isUniFrameWork) {
+      // hide tab bar in uni-app when global searching
+      value.isSearching ? TUIGlobal?.hideTabBar()?.catch(() => { /* ignore */ }) : TUIGlobal?.showTabBar()?.catch(() => { /* ignore */ });
+    }
+  }
+}
+
+function onIsShowInConversationSearchChange(value: boolean) {
+  isShowInConversationSearch.value = value ? true : false;
+  isShowInConversationSearch.value && initSearchValue(props.searchType);
+}
+
+onMounted(() => {
+  // init with default value
+  ['global', 'conversation'].forEach((type: string) => {
+    initSearchValue(type as SEARCH_TYPE);
+  });
+  // watch store change
+  TUIStore.watch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdate,
+  });
+  TUIStore.watch(StoreName.SEARCH, {
+    currentSearchingStatus: onCurrentSearchingStatusChange,
+    isShowInConversationSearch: onIsShowInConversationSearchChange,
+  });
+});
+
+onUnmounted(() => {
+  // unwatch store change
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdate,
+  });
+  TUIStore.unwatch(StoreName.SEARCH, {
+    currentSearchingStatus: onCurrentSearchingStatusChange,
+    isShowInConversationSearch: onIsShowInConversationSearchChange,
+  });
+});
+
+function closeGlobalSearch() {
+  TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
+    isSearching: false,
+    searchType: props.searchType,
+  });
+}
+
+function closeInConversationSearch() {
+  TUIStore.update(StoreName.SEARCH, 'isShowInConversationSearch', false);
+}
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-container/index.ts b/txim/src/TUIKit/components/TUISearch/search-container/index.ts
new file mode 100644
index 00000000..672522dc
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-container/index.ts
@@ -0,0 +1,2 @@
+import SearchContainer from './index.vue';
+export default SearchContainer;
diff --git a/txim/src/TUIKit/components/TUISearch/search-container/index.vue b/txim/src/TUIKit/components/TUISearch/search-container/index.vue
new file mode 100644
index 00000000..eff6d76a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-container/index.vue
@@ -0,0 +1,259 @@
+<template>
+  <div
+    :class="[
+      'tui-search-container',
+      !isPC && 'tui-search-container-h5',
+      isPC && `container-${props.popupPosition}`,
+      `container-${props.searchType}`,
+    ]"
+  >
+    <div
+      :class="[
+        isPC && `tui-search-container-${props.popupPosition}`,
+        !isPC && 'tui-search-container-h5-main',
+      ]"
+    >
+      <div
+        v-if="props.searchType === 'conversation' && !isUniFrameWork"
+        class="tui-search-header"
+      >
+        <div class="tui-search-header-title">
+          {{ TUITranslateService.t("TUISearch.搜索会话内容") }}
+        </div>
+        <div
+          class="tui-search-header-close"
+          @click="closeSearchContainer"
+        >
+          <Icon
+            :file="closeDarkIcon"
+            width="14px"
+            height="14px"
+          />
+        </div>
+      </div>
+      <div class="tui-search-tabs">
+        <div
+          v-for="(tabItem, tabKey) in searchTypeList"
+          :key="tabKey"
+          :class="[
+            'tui-search-tabs-item',
+            currentSearchMessageType.key === tabItem.key && 'tui-search-tabs-item-selected',
+          ]"
+          @click="selectSearchType(tabItem)"
+        >
+          {{ TUITranslateService.t(`TUISearch.${tabItem.label}`) }}
+        </div>
+      </div>
+      <!-- TUISearch search input slot -->
+      <slot name="input" />
+      <div
+        v-if="isTimeTabsShow"
+        class="tui-search-time"
+      >
+        <div
+          v-for="(tabItem, tabKey) in searchMessageTimeList"
+          :key="tabKey"
+          :class="[
+            'tui-search-time-item',
+            currentSearchMessageTime.key === tabItem.key && 'tui-search-time-item-selected',
+          ]"
+          @click="selectSearchTime(tabItem)"
+        >
+          <div
+            v-if="tabItem.key === 'all'"
+            class="tui-search-time-item-picker"
+          >
+            <div
+              v-if="!isDatePickerShow"
+              class="tui-search-time-item-all"
+              @click.stop="handleSelectAllTimeClicked"
+            >
+              {{
+                TUITranslateService.t(`TUISearch.选择时间`) +
+                  ":  " +
+                  TUITranslateService.t(`TUISearch.全部`)
+              }}
+              <Icon
+                :file="downArrowIcon"
+                width="14px"
+                height="14px"
+              />
+            </div>
+            <div @click.stop>
+              <DatePicker
+                v-if="isDatePickerShow"
+                type="range"
+                :rangeTableType="datePickerRangeDisplayType"
+                @pick="pickTimePeriod"
+              />
+            </div>
+            <div
+              v-if="isDatePickerShow"
+              class="tui-search-time-item-close"
+              @click="clearTimePicker"
+            >
+              <Icon
+                class="icon"
+                :file="closeIcon"
+                width="14px"
+                height="14px"
+              />
+            </div>
+          </div>
+          <div v-else>
+            {{ TUITranslateService.t(`TUISearch.${tabItem.label}`) }}
+          </div>
+        </div>
+      </div>
+      <!-- TUISearch search result slot -->
+      <slot name="result" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from '../../../adapter-vue';
+import {
+  TUITranslateService,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { Dayjs } from 'dayjs';
+import {
+  globalSearchTypeList,
+  conversationSearchTypeList,
+  searchMessageTypeDefault,
+} from '../search-type-list';
+import { searchMessageTimeList, searchMessageTimeDefault } from '../search-time-list';
+import Icon from '../../common/Icon.vue';
+import DatePicker from '../../common/DatePicker/index.vue';
+import downArrowIcon from '../../../assets/icon/down-icon.svg';
+import closeIcon from '../../../assets/icon/input-close.svg';
+import closeDarkIcon from '../../../assets/icon/close-dark.svg';
+import { isPC, isUniFrameWork } from '../../../utils/env';
+import { SEARCH_TYPE, ISearchMessageTime, ISearchMessageType, ISearchTimeTab, ISearchTypeTab } from '../type';
+
+const props = defineProps({
+  popupPosition: {
+    type: String, // "bottom" / "aside"
+    default: 'bottom',
+  },
+  searchType: {
+    type: String,
+    default: 'global', // "global" / "conversation"
+    validator(value: string) {
+      return ['global', 'conversation'].includes(value);
+    },
+  },
+});
+
+const emits = defineEmits(['searchConfigChange', 'closeInConversationSearch']);
+
+const searchTypeList = computed(() =>
+  props?.searchType === 'conversation' ? conversationSearchTypeList : globalSearchTypeList,
+);
+const currentSearchMessageType = ref(searchMessageTypeDefault[props?.searchType as SEARCH_TYPE]);
+const currentSearchMessageTime = ref(searchMessageTimeDefault);
+
+const isTimeTabsShow = computed(() => {
+  return (
+    currentSearchMessageType.value.key !== 'contact'
+    && currentSearchMessageType.value.key !== 'group'
+  );
+});
+const datePickerRangeDisplayType = computed((): string =>
+  isPC && props.searchType === 'global' && !isUniFrameWork ? 'two' : 'one',
+);
+const isDatePickerShow = ref<boolean>(false);
+
+function onCurrentSearchMessageTypeChange(typeObject: ISearchMessageType) {
+  if (typeObject?.searchType === props?.searchType) {
+    currentSearchMessageType.value
+        = typeObject?.value || searchMessageTypeDefault[props?.searchType as SEARCH_TYPE];
+  }
+}
+
+function onCurrentSearchMessageTimeChange(timeObject: ISearchMessageTime) {
+  if (timeObject?.searchType === props?.searchType) {
+    currentSearchMessageTime.value = timeObject?.value || searchMessageTimeDefault;
+  }
+}
+
+onMounted(() => {
+  TUIStore.watch(StoreName.SEARCH, {
+    currentSearchMessageType: onCurrentSearchMessageTypeChange,
+    currentSearchMessageTime: onCurrentSearchMessageTimeChange,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.SEARCH, {
+    currentSearchMessageType: onCurrentSearchMessageTypeChange,
+    currentSearchMessageTime: onCurrentSearchMessageTimeChange,
+  });
+});
+
+const selectSearchType = (item: ISearchTypeTab) => {
+  TUIStore.update(StoreName.SEARCH, 'currentSearchMessageType', {
+    value: item,
+    searchType: props.searchType,
+  });
+};
+
+const selectSearchTime = (item: ISearchTimeTab) => {
+  if (isDatePickerShow.value && item.key === 'all') {
+    isDatePickerShow.value = false;
+  } else {
+    isDatePickerShow.value = false;
+    TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
+      value: item,
+      searchType: props.searchType,
+    });
+  }
+};
+
+const handleSelectAllTimeClicked = () => {
+  if (currentSearchMessageTime.value?.key !== 'all') {
+    TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
+      value: searchMessageTimeDefault,
+      searchType: props.searchType,
+    });
+  } else {
+    isDatePickerShow.value = true;
+  }
+};
+
+const pickTimePeriod = (time: typeof Dayjs) => {
+  if (currentSearchMessageTime.value?.key === 'all') {
+    const { startDate, endDate } = time;
+    const timePosition = Number((endDate?.toDate()?.getTime() / 1000).toFixed(0));
+    const timePeriod = timePosition - Number((startDate?.toDate()?.getTime() / 1000).toFixed(0));
+    const newSearchMessageTime = {
+      key: currentSearchMessageTime.value.key,
+      label: currentSearchMessageTime.value.label,
+      value: {
+        timePosition,
+        timePeriod,
+      },
+    };
+    TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
+      value: newSearchMessageTime,
+      searchType: props.searchType,
+    });
+  }
+};
+
+const clearTimePicker = () => {
+  isDatePickerShow.value = false;
+  if (currentSearchMessageTime.value?.key === 'all') {
+    TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
+      value: searchMessageTimeDefault,
+      searchType: props.searchType,
+    });
+  }
+};
+
+const closeSearchContainer = () => {
+  emits('closeInConversationSearch');
+};
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-container/style/h5.scss b/txim/src/TUIKit/components/TUISearch/search-container/style/h5.scss
new file mode 100644
index 00000000..5522f942
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-container/style/h5.scss
@@ -0,0 +1,36 @@
+.tui-search-container-h5 {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+
+  .tui-search-container-h5-main {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .tui-search-tabs {
+      .tui-search-tabs-item {
+        cursor: none;
+      }
+    }
+
+    .tui-search-time {
+      background-color: #f4f4f4;
+
+      .tui-search-time-item {
+        cursor: none;
+        background-color: #fff;
+      }
+
+      .tui-search-time-item-selected {
+        background-color: rgba(0,122,255,0.2);
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUISearch/search-container/style/index.scss b/txim/src/TUIKit/components/TUISearch/search-container/style/index.scss
new file mode 100644
index 00000000..915074b6
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-container/style/index.scss
@@ -0,0 +1,3 @@
+@import '../../../../assets/styles/common';
+@import './web';
+@import './h5';
diff --git a/txim/src/TUIKit/components/TUISearch/search-container/style/web.scss b/txim/src/TUIKit/components/TUISearch/search-container/style/web.scss
new file mode 100644
index 00000000..746df2a0
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-container/style/web.scss
@@ -0,0 +1,114 @@
+.container-bottom {
+  margin: 0 10px;
+  position: relative;
+}
+
+.container-conversation {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.tui-search-container {
+  &-bottom {
+    position: absolute;
+    min-width: 400px;
+    width: fit-content;
+    height: 453px;
+    border-radius: 4px;
+    background-color: #fff;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    box-shadow: rgba(0,0,0,0.16) 0 3px 6px, rgba(0,0,0,0.23) 0 3px 6px;
+    left: 0;
+    top: -5px;
+  }
+
+  &-aside {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .tui-search-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px 10px;
+
+    &-title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 19.6px;
+      font-family: "PingFang SC", sans-serif;
+    }
+
+    &-close {
+      cursor: pointer;
+    }
+  }
+
+  .tui-search-tabs {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+
+    &-item {
+      padding: 10px 0;
+      margin: 0 10px;
+      font-size: 14px;
+      color: #666;
+      user-select: none;
+      cursor: pointer;
+
+      &-selected {
+        color: #007aff;
+        border-bottom: 2px solid #007aff;
+      }
+    }
+  }
+
+  .tui-search-time {
+    width: 100%;
+    height: 43px;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+
+    &-item {
+      height: calc(100% - 20px);
+      padding: 5px;
+      margin: 5px;
+      border-radius: 5px;
+      font-size: 12px;
+      color: #666;
+      user-select: none;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &-picker {
+        display: flex;
+      }
+
+      &-close,
+      &-all {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      &-selected {
+        background-color: rgba(0,122,255,0.2);
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUISearch/search-input/index.ts b/txim/src/TUIKit/components/TUISearch/search-input/index.ts
new file mode 100644
index 00000000..ee6d581a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-input/index.ts
@@ -0,0 +1,2 @@
+import SearchInput from './index.vue';
+export default SearchInput;
diff --git a/txim/src/TUIKit/components/TUISearch/search-input/index.vue b/txim/src/TUIKit/components/TUISearch/search-input/index.vue
new file mode 100644
index 00000000..97f06caa
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-input/index.vue
@@ -0,0 +1,215 @@
+<template>
+  <div
+    :class="[
+      'tui-search-input-container',
+      !isPC && 'tui-search-input-container-h5',
+      props.searchType === 'global'
+        ? 'tui-search-input-container-global'
+        : 'tui-search-input-container-conversation'
+    ]"
+  >
+    <div :class="['tui-search-input', !isPC && 'tui-search-input-h5']">
+      <div class="tui-search-input-left">
+        <Icon
+          class="icon"
+          :file="searchIcon"
+          width="14px"
+          height="14px"
+        />
+      </div>
+      <input
+        v-model="searchValueModel"
+        class="tui-search-input-main"
+        type="text"
+        :placeholder="props.placeholder"
+        :focus="false"
+        enterkeyhint="search"
+        @blur="onBlur"
+        @keyup.enter="search"
+        @confirm="search"
+        @click.stop.prevent="onSearchInputClick"
+      >
+      <div
+        v-if="searchingStatus"
+        class="tui-search-input-right"
+        @click="endSearching"
+      >
+        <Icon
+          class="icon"
+          :file="closeIcon"
+          width="14px"
+          height="14px"
+        />
+      </div>
+    </div>
+    <div
+      v-if="!isPC && searchingStatus && props.searchType === 'global'"
+      :class="[
+        'tui-search-input-cancel',
+        !isPC && 'tui-search-input-h5-cancel',
+      ]"
+      @click="endSearching"
+    >
+      {{ TUITranslateService.t("TUISearch.取消") }}
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from '../../../adapter-vue';
+import {
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import Icon from '../../common/Icon.vue';
+import searchIcon from '../../../assets/icon/search.svg';
+import closeIcon from '../../../assets/icon/input-close.svg';
+import { isPC } from '../../../utils/env';
+import { ISearchInputValue, ISearchingStatus } from '../type';
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: () => TUITranslateService.t('TUISearch.搜索'),
+  },
+  searchType: {
+    type: String,
+    default: 'global', // "global" / "conversation"
+    validator(value: string) {
+      return ['global', 'conversation'].includes(value);
+    },
+  },
+});
+
+const searchValueModel = ref<string>('');
+const currentSearchInputValue = ref<string>('');
+const searchingStatus = ref<boolean>(false);
+
+function onCurrentSearchInputValueChange(obj: ISearchInputValue) {
+  if (obj?.searchType === props?.searchType) {
+    currentSearchInputValue.value = obj?.value;
+    searchValueModel.value = obj?.value;
+  }
+}
+
+function onCurrentSearchingStatusChange(obj: ISearchingStatus) {
+  if (obj?.searchType === props?.searchType) {
+    searchingStatus.value = obj?.isSearching;
+  }
+}
+
+onMounted(() => {
+  TUIStore.watch(StoreName.SEARCH, {
+    currentSearchInputValue: onCurrentSearchInputValueChange,
+    currentSearchingStatus: onCurrentSearchingStatusChange,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.SEARCH, {
+    currentSearchInputValue: onCurrentSearchInputValueChange,
+    currentSearchingStatus: onCurrentSearchingStatusChange,
+  });
+});
+
+const search = () => {
+  // Avoid duplicate searches
+  if (searchValueModel.value === currentSearchInputValue.value) {
+    return;
+  }
+  TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
+    value: searchValueModel.value,
+    searchType: props.searchType,
+  });
+};
+
+const endSearching = () => {
+  searchingStatus.value = false;
+  TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
+    isSearching: false,
+    searchType: props.searchType,
+  });
+  TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
+    value: '',
+    searchType: props.searchType,
+  });
+};
+
+const onSearchInputClick = () => {
+  TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
+    isSearching: true,
+    searchType: props.searchType,
+  });
+};
+
+const onBlur = () => {
+  TUIGlobal?.hideKeyboard?.();
+};
+</script>
+<style lang="scss" scoped>
+.tui-search-input-container {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+
+  &-global {
+    flex: 1;
+  }
+
+  .tui-search-input {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    width: calc(100% - 20px);
+    margin: 10px;
+    background: #ededed;
+    justify-content: center;
+    align-items: center;
+    height: 28px;
+    border-radius: 4px;
+
+    &-main {
+      flex: 1;
+      background: transparent;
+      border: none;
+      caret-color: #007aff;
+      font-size: 14px;
+
+      &:focus {
+        border: none;
+        outline: none;
+      }
+
+      &::placeholder {
+        color: #666;
+        font-size: 12px;
+      }
+    }
+
+    &-left,
+    &-right {
+      display: flex;
+      width: 14px;
+      height: 14px;
+      padding: 0 7px;
+    }
+  }
+}
+
+.tui-search-input-container-h5 {
+  .tui-search-input-h5 {
+    height: 34px;
+  }
+
+  .tui-search-input-cancel {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #007aff;
+    font-size: 16px;
+    padding: 7px 10px 7px 3px;
+    font-family: "PingFang SC", sans-serif;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-more/index.ts b/txim/src/TUIKit/components/TUISearch/search-more/index.ts
new file mode 100644
index 00000000..ca3f342a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-more/index.ts
@@ -0,0 +1,3 @@
+import SearchMore from './index.vue';
+
+export default SearchMore;
diff --git a/txim/src/TUIKit/components/TUISearch/search-more/index.vue b/txim/src/TUIKit/components/TUISearch/search-more/index.vue
new file mode 100644
index 00000000..b715cb4b
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-more/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <div
+    ref="searchMoreRef"
+    :class="['tui-search-more', !isPC && 'tui-search-more-h5']"
+  >
+    <div
+      class="more"
+      @click="toggleMore()"
+    >
+      <Icon
+        class="more-icon"
+        :file="searchMoreSVG"
+        :width="isPC ? '28px' : '34px'"
+        :height="isPC ? '28px' : '34px'"
+      />
+    </div>
+    <ul
+      v-if="isListShow"
+      class="tui-search-more-list"
+    >
+      <li
+        v-for="(extension, index) in extensionList"
+        :key="index"
+        class="list-item"
+        @click="handleMenu(extension)"
+      >
+        <Icon
+          v-if="extension.icon"
+          class="list-item-icon"
+          :file="extension.icon"
+        />
+        <div class="list-item-title">
+          {{ extension.text }}
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, watch, onMounted } from '../../../adapter-vue';
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import TUICore, { ExtensionInfo, TUIConstants } from '@tencentcloud/tui-core';
+import { outsideClick } from '@tencentcloud/universal-api';
+import Icon from '../../common/Icon.vue';
+import searchMoreSVG from '../../../assets/icon/search-more.svg';
+import { isPC, isUniFrameWork } from '../../../utils/env';
+
+const props = defineProps({
+  searchType: {
+    type: String,
+    default: 'global', // "global" / "conversation"
+    validator(value: string) {
+      return ['global', 'conversation'].includes(value);
+    },
+  },
+});
+
+const searchMoreRef = ref<HTMLElement | null>();
+const isListShow = ref<boolean>(false);
+const toggleMore = () => {
+  isListShow.value = !isListShow.value;
+  if (!isUniFrameWork && isListShow.value) {
+    outsideClick.listen({
+      domRefs: searchMoreRef.value,
+      handler: closeSearchMore,
+    });
+  }
+};
+const extensionList = ref<ExtensionInfo[]>([]);
+
+const handleMenu = (item: ExtensionInfo) => {
+  const { listener = { onClicked: () => { } } } = item;
+  listener?.onClicked?.(item);
+  toggleMore();
+};
+
+const closeSearchMore = () => {
+  isListShow.value = false;
+};
+
+onMounted(() => {
+  // extensions
+  extensionList.value = [
+    ...TUICore.getExtensionList(TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID),
+  ];
+  // hide conversation header
+  TUICore.callService({
+    serviceName: TUIConstants.TUIConversation.SERVICE.NAME,
+    method: TUIConstants.TUIConversation.SERVICE.METHOD.HIDE_CONVERSATION_HEADER,
+    params: {},
+  });
+});
+
+watch(
+  () => isListShow.value,
+  () => {
+    if (isListShow.value) {
+      TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
+        isSearching: false,
+        searchType: props.searchType,
+      });
+    }
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+.tui-search-more {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .more {
+    width: 28px;
+    height: 28px;
+    margin-right: 6px;
+  }
+
+  &-list {
+    margin: 10px 0;
+    position: absolute;
+    list-style: none;
+    cursor: pointer;
+    right: 6px;
+    top: 20px;
+    z-index: 1000;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0;
+    box-shadow: rgba(0,0,0,0.16) 0 3px 6px, rgba(0,0,0,0.23) 0 3px 6px;
+
+    .list-item {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      height: 40px;
+      padding: 0 10px;
+
+      &-icon {
+        margin-right: 2px;
+      }
+
+      &-title {
+        font-size: 14px;
+        text-wrap: nowrap;
+        word-break: keep-all;
+      }
+    }
+  }
+}
+
+.tui-search-more-h5{
+  .more{
+    width: 34px;
+    height: 34px;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/index.ts b/txim/src/TUIKit/components/TUISearch/search-result/index.ts
new file mode 100644
index 00000000..37ed5698
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/index.ts
@@ -0,0 +1,2 @@
+import SearchResult from './index.vue';
+export default SearchResult;
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/index.vue b/txim/src/TUIKit/components/TUISearch/search-result/index.vue
new file mode 100644
index 00000000..ade9e872
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/index.vue
@@ -0,0 +1,566 @@
+<template>
+  <SearchResultLoading
+    v-if="isLoading"
+    :class="['search-result-loading', !isPC && 'search-result-loading-h5']"
+  />
+  <SearchResultDefault
+    v-else-if="isSearchDefaultShow"
+    :class="['search-result-default', !isPC && 'search-result-default-h5']"
+  />
+  <div
+    v-else
+    :class="[
+      'tui-search-result',
+      !isPC && 'tui-search-result-h5',
+      isPC && isResultDetailShow && 'tui-search-result-with-border',
+    ]"
+  >
+    <div
+      v-if="props.searchType !== 'conversation' && (isPC || !isResultDetailShow)"
+      class="tui-search-result-main"
+    >
+      <div class="tui-search-result-list">
+        <div
+          v-for="result in searchResult"
+          :key="result.key"
+          class="tui-search-result-list-item"
+        >
+          <div
+            v-if="props.searchType === 'global'"
+            class="header"
+          >
+            {{ TUITranslateService.t(`TUISearch.${result.label}`) }}
+          </div>
+          <div class="list">
+            <div
+              v-for="item in result.list"
+              :key="item.conversation.conversationID"
+              :class="[generateListItemClass(item)]"
+            >
+              <SearchResultItem
+                v-if="result.key === 'contact' || result.key === 'group' || item.conversation"
+                :listItem="item"
+                :type="result.key"
+                displayType="info"
+                :keywordList="keywordList"
+                @showResultDetail="showResultDetail"
+                @navigateToChatPosition="navigateToChatPosition"
+              />
+            </div>
+          </div>
+          <div
+            v-if="currentSearchTabKey === 'all' || result.cursor"
+            class="more"
+            @click="getMoreResult(result)"
+          >
+            <Icon
+              class="more-icon"
+              :file="searchIcon"
+              width="12px"
+              height="12px"
+            />
+            <div class="more-text">
+              <span>{{ TUITranslateService.t("TUISearch.查看更多") }}</span>
+              <span>{{ TUITranslateService.t(`TUISearch.${result.label}`) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="isResultDetailShow || props.searchType === 'conversation'"
+      :class="[
+        'tui-search-result-detail',
+        props.searchType === 'conversation' && 'tui-search-result-in-conversation',
+      ]"
+    >
+      <SearchResultLoading
+        v-if="isSearchDetailLoading"
+        :class="['search-result-loading', !isPC && 'search-result-loading-h5']"
+      />
+      <div
+        v-if="!isSearchDetailLoading && isResultDetailShow && props.searchType !== 'conversation'"
+        class="tui-search-message-header"
+      >
+        <div class="header-content">
+          <div class="header-content-count normal">
+            <span>{{ searchConversationMessageTotalCount }}</span>
+            <span>{{ TUITranslateService.t("TUISearch.条与") }}</span>
+          </div>
+          <div class="header-content-keyword">
+            <span
+              v-for="(keyword, index) in keywordList"
+              :key="index"
+            >
+              <span class="normal">"</span>
+              <span class="highlight">{{ keyword }}</span>
+              <span class="normal">"</span>
+            </span>
+          </div>
+          <div class="header-content-type normal">
+            <span>{{
+              TUITranslateService.t("TUISearch.相关的")
+            }}</span>
+            <span>{{
+              TUITranslateService.t(
+                `TUISearch.${currentSearchTabKey === "allMessage"
+                  ? "结果"
+                  : searchMessageTypeList[currentSearchTabKey].label
+                }`
+              )
+            }}</span>
+          </div>
+        </div>
+        <div
+          class="header-enter"
+          @click="enterConversation({ conversationID: currentSearchConversationID })"
+        >
+          <span>{{ TUITranslateService.t("TUISearch.进入聊天") }}</span>
+          <Icon
+            class="enter-icon"
+            :file="enterIcon"
+            width="14px"
+            height="14px"
+          />
+        </div>
+      </div>
+      <div
+        v-if="!isSearchDetailLoading &&
+          searchConversationMessageList &&
+          searchConversationMessageList[0]
+        "
+        class="tui-search-message-list"
+      >
+        <template
+          v-if="props.searchType === 'global' ||
+            (currentSearchTabKey !== 'imageMessage' && currentSearchTabKey !== 'fileMessage')
+          "
+        >
+          <div
+            v-for="item in searchConversationMessageList"
+            :key="generateVueRenderKey(item.ID)"
+            :class="['list-item']"
+          >
+            <SearchResultItem
+              :listItem="item"
+              :listItemContent="item.getMessageContent()"
+              :type="currentSearchTabKey"
+              :displayType="generateResultItemDisplayType()"
+              :keywordList="keywordList"
+              @showResultDetail="showResultDetail"
+              @navigateToChatPosition="navigateToChatPosition"
+            />
+          </div>
+        </template>
+        <!-- Search within a conversation - messages such as files, pictures, and videos need to be displayed in groups according to time -->
+        <template v-else>
+          <div
+            v-for="group in searchConversationResultGroupByDate"
+            :key="generateVueRenderKey(group.date)"
+            :class="['list-group', currentSearchTabKey === 'fileMessage'? 'list-group-file' : 'list-group-image']"
+          >
+            <div :class="['list-group-date']">
+              {{ group.date }}
+            </div>
+            <div
+              v-for="item in group.list"
+              :key="generateVueRenderKey(item.ID)"
+              :class="['list-group-item']"
+            >
+              <SearchResultItem
+                :listItem="item"
+                :listItemContent="item.getMessageContent()"
+                :type="currentSearchTabKey"
+                :displayType="generateResultItemDisplayType()"
+                :keywordList="keywordList"
+                @showResultDetail="showResultDetail"
+                @navigateToChatPosition="navigateToChatPosition"
+              />
+            </div>
+          </div>
+        </template>
+        <div
+          v-if="searchConversationResult && searchConversationResult.cursor"
+          class="more"
+          @click="getMoreResultInConversation"
+        >
+          <Icon
+            class="more-icon"
+            :file="searchIcon"
+            width="12px"
+            height="12px"
+          />
+          <div class="more-text">
+            {{ TUITranslateService.t("TUISearch.查看更多历史记录") }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch, computed, onMounted, onUnmounted } from '../../../adapter-vue';
+import {
+  TUITranslateService,
+  TUIConversationService,
+  TUIStore,
+  StoreName,
+  IMessageModel,
+  SearchCloudMessagesParams,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import SearchResultItem from './search-result-item/index.vue';
+import SearchResultDefault from './search-result-default/index.vue';
+import SearchResultLoading from './search-result-loading/index.vue';
+import { searchMessageTypeList, searchMessageTypeDefault } from '../search-type-list';
+import Icon from '../../common/Icon.vue';
+import searchIcon from '../../../assets/icon/search.svg';
+import enterIcon from '../../../assets/icon/right-icon.svg';
+import {
+  searchCloudMessages,
+  enterConversation,
+  generateSearchResultYMD,
+  debounce,
+} from '../utils';
+import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus';
+import { isPC, isUniFrameWork } from '../../../utils/env';
+import { SEARCH_TYPE, ISearchInputValue, ISearchMessageType, ISearchMessageTime } from '../type';
+import { ISearchCloudMessageResult, ISearchResultListItem } from '../../../interface';
+
+const props = defineProps({
+  searchType: {
+    type: String,
+    default: 'global', // "global" / "conversation"
+    validator(value: string) {
+      return ['global', 'conversation'].includes(value);
+    },
+  },
+});
+
+// search params
+const keywordList = ref<string[]>([]);
+const messageTypeList = ref<string | string[]>(
+  searchMessageTypeDefault[props.searchType as SEARCH_TYPE]?.value as string[],
+);
+const timePosition = ref<number>(0);
+const timePeriod = ref<number>(0);
+// Search by "and" after splitting the whole string by space
+// For example: enter "111 222", search for messages with both 111 and 222, and also include messages that strictly search for "111 222"
+const keywordListMatchType = ref<string>('and');
+
+// current search tab key
+const currentSearchTabKey = ref<string>(
+  searchMessageTypeDefault[props.searchType as SEARCH_TYPE]?.key,
+);
+
+// search results all
+const searchResult = ref<{
+  [propsName: string]: { key: string; label: string; list: ISearchResultListItem[]; cursor: string | null };
+}>({});
+const searchAllMessageList = ref<ISearchResultListItem[]>([]);
+const searchAllMessageTotalCount = ref<number>(0);
+
+// search results detail
+const currentSearchConversationID = ref<string>('');
+const searchConversationResult = ref<ISearchCloudMessageResult>();
+const searchConversationMessageList = ref<IMessageModel[]>([]);
+const searchConversationMessageTotalCount = ref<number>();
+
+// search results for file messages/image and video messages, grouped by timeline
+const searchConversationResultGroupByDate = ref<
+  Array<{ date: string; list: IMessageModel[] }>
+>([]);
+
+// ui display control
+const isResultDetailShow = ref<boolean>(false);
+const isLoading = ref<boolean>(false);
+const isSearchDetailLoading = ref<boolean>(false);
+const isSearchDefaultShow = computed((): boolean => {
+  if (isLoading.value) {
+    return false;
+  }
+  if (props.searchType === 'global') {
+    if (!keywordList?.value?.length || Object?.keys(searchResult.value)?.length) {
+      return false;
+    } else {
+      return true;
+    }
+  } else {
+    if (searchConversationMessageList?.value?.length) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+});
+
+function onCurrentConversationIDUpdate(id: string) {
+  props.searchType === 'conversation' && (currentSearchConversationID.value = id);
+}
+
+function onCurrentSearchInputValueUpdate(obj: ISearchInputValue) {
+  if (obj?.searchType === props?.searchType) {
+    keywordList.value = obj?.value ? obj.value.trim().split(/\s+/) : [];
+  }
+}
+
+function onCurrentSearchMessageTypeUpdate(typeObject: ISearchMessageType) {
+  if (typeObject?.searchType === props?.searchType) {
+    currentSearchTabKey.value
+        = typeObject?.value?.key || searchMessageTypeDefault[props.searchType as SEARCH_TYPE]?.key;
+    messageTypeList.value
+        = typeObject?.value?.value
+        || searchMessageTypeDefault[props.searchType as SEARCH_TYPE]?.value;
+  }
+}
+
+function onCurrentSearchMessageTimeUpdate(timeObject: ISearchMessageTime) {
+  if (timeObject?.searchType === props?.searchType) {
+    timePosition.value = timeObject?.value?.value?.timePosition;
+    timePeriod.value = timeObject?.value?.value?.timePeriod;
+  }
+}
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdate,
+  });
+  TUIStore.watch(StoreName.SEARCH, {
+    currentSearchInputValue: onCurrentSearchInputValueUpdate,
+    currentSearchMessageType: onCurrentSearchMessageTypeUpdate,
+    currentSearchMessageTime: onCurrentSearchMessageTimeUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdate,
+  });
+  TUIStore.unwatch(StoreName.SEARCH, {
+    currentSearchInputValue: onCurrentSearchInputValueUpdate,
+    currentSearchMessageType: onCurrentSearchMessageTypeUpdate,
+    currentSearchMessageTime: onCurrentSearchMessageTimeUpdate,
+  });
+});
+
+const setMessageSearchResultList = (option?: { conversationID?: string | undefined; cursor?: string | undefined }) => {
+  searchCloudMessages(
+    {
+      keywordList: keywordList?.value?.length ? keywordList.value : undefined,
+      messageTypeList: typeof messageTypeList.value === 'string' ? [messageTypeList.value] : messageTypeList.value,
+      timePosition: timePosition.value,
+      timePeriod: timePeriod.value,
+      conversationID: option?.conversationID || undefined,
+      cursor: option?.cursor || undefined,
+      keywordListMatchType: keywordListMatchType.value,
+    } as SearchCloudMessagesParams,
+  )
+    .then((res: { data: ISearchCloudMessageResult }) => {
+      enableSampleTaskStatus('searchCloudMessage');
+      if (!option?.conversationID) {
+        option?.cursor
+          ? (searchAllMessageList.value = [
+              ...searchAllMessageList.value,
+              ...res.data.searchResultList,
+            ])
+          : (searchAllMessageList.value = res?.data?.searchResultList);
+        searchAllMessageTotalCount.value = res?.data?.totalCount;
+        const key = currentSearchTabKey.value === 'all' ? 'allMessage' : currentSearchTabKey.value;
+        if (
+          searchAllMessageList?.value?.length
+          && currentSearchTabKey.value !== 'contact'
+          && currentSearchTabKey.value !== 'group'
+        ) {
+          searchResult.value = Object.assign({}, searchResult.value, {
+            [key]: {
+              key,
+              label: searchMessageTypeList[key].label,
+              list: currentSearchTabKey.value === 'all'
+                ? searchAllMessageList?.value?.slice(0, 3)
+                : searchAllMessageList?.value,
+              cursor: res?.data?.cursor || null,
+            },
+          });
+        } else {
+          delete searchResult?.value[key];
+        }
+      } else {
+        searchConversationResult.value = res?.data;
+        option?.cursor
+          ? (searchConversationMessageList.value = [
+              ...searchConversationMessageList.value,
+              ...(res?.data?.searchResultList[0]?.messageList as IMessageModel[]),
+            ])
+          : (searchConversationMessageList.value = res?.data?.searchResultList[0]?.messageList);
+        searchConversationMessageTotalCount.value = res?.data?.totalCount;
+        if (
+          props?.searchType === 'conversation'
+          && (currentSearchTabKey.value === 'fileMessage'
+          || currentSearchTabKey.value === 'imageMessage')
+        ) {
+          searchConversationResultGroupByDate.value = groupResultListByDate(
+            searchConversationMessageList.value,
+          );
+        } else {
+          searchConversationResultGroupByDate.value = [];
+        }
+      }
+      isLoading.value = false;
+      isSearchDetailLoading.value = false;
+    });
+};
+
+const setMessageSearchResultListDebounce = debounce(setMessageSearchResultList, 500);
+
+const resetSearchResult = () => {
+  searchResult.value = {};
+  searchConversationResult.value = {} as ISearchCloudMessageResult;
+  searchConversationMessageList.value = [];
+  searchConversationResultGroupByDate.value = [];
+};
+
+watch(
+  () => [keywordList.value, currentSearchTabKey.value, timePosition.value, timePeriod.value],
+  (newValue, oldValue) => {
+    if (newValue === oldValue) {
+      return;
+    }
+    // Global search must have keywords, but search in conversation can be without keywords
+    if (!keywordList?.value?.length && props?.searchType === 'global') {
+      resetSearchResult();
+      return;
+    }
+    isLoading.value = true;
+    if (props.searchType === 'conversation') {
+      resetSearchResult();
+      setMessageSearchResultList({
+        conversationID: currentSearchConversationID.value,
+      });
+    } else {
+      if (oldValue && oldValue[1] === 'all' && newValue && newValue[1] === 'allMessage') {
+        searchResult?.value['allMessage']?.list
+        && (searchResult.value['allMessage'].list = searchAllMessageList?.value);
+        Object?.keys(searchResult?.value)?.forEach((key: string) => {
+          if (key !== 'allMessage') {
+            delete searchResult?.value[key];
+          }
+        });
+        isLoading.value = false;
+        return;
+      } else {
+        isResultDetailShow.value = false;
+        resetSearchResult();
+      }
+      setMessageSearchResultListDebounce();
+    }
+  },
+  { immediate: true },
+);
+
+const getMoreResult = (result: { key: string; label: string; list: ISearchResultListItem[]; cursor: string | null }) => {
+  if (currentSearchTabKey.value === 'all') {
+    // View more at this time: Switch to the result corresponding to the corresponding result to display the full search results of its type
+    TUIStore.update(StoreName.SEARCH, 'currentSearchMessageType', {
+      value: searchMessageTypeList[result.key],
+      searchType: props.searchType,
+    });
+  } else {
+    // View more results for a single category: Use the cursor as the search start position to pull the next part of the results
+    setMessageSearchResultList({ cursor: result?.cursor || undefined });
+  }
+};
+
+const getMoreResultInConversation = () => {
+  setMessageSearchResultList({
+    cursor: searchConversationResult?.value?.cursor,
+    conversationID: currentSearchConversationID?.value,
+  });
+};
+
+const showResultDetail = (isShow: boolean, targetType?: string, targetResult?: IMessageModel | ISearchResultListItem) => {
+  isResultDetailShow.value = isShow;
+  if (targetType) {
+    TUIStore.update(StoreName.SEARCH, 'currentSearchMessageType', {
+      value: searchMessageTypeList[targetType],
+      searchType: props.searchType,
+    });
+  }
+  currentSearchConversationID.value = (targetResult as ISearchResultListItem)?.conversation?.conversationID || '';
+  searchConversationMessageTotalCount.value = (targetResult as ISearchResultListItem)?.messageCount;
+  if (targetResult) {
+    isSearchDetailLoading.value = true;
+    setMessageSearchResultListDebounce({
+      conversationID: currentSearchConversationID.value,
+    });
+  }
+};
+
+const generateListItemClass = (item: ISearchResultListItem): string[] => {
+  return currentSearchConversationID.value === item?.conversation?.conversationID
+    ? ['list-item', 'list-item-selected']
+    : ['list-item'];
+};
+
+const generateResultItemDisplayType = (): string => {
+  if (props.searchType === 'conversation' && currentSearchTabKey.value === 'fileMessage') {
+    return 'file';
+  } else if (props.searchType === 'conversation' && currentSearchTabKey.value === 'imageMessage') {
+    return 'image';
+  } else if (isPC) {
+    return 'bubble';
+  } else {
+    return 'info';
+  }
+};
+
+const groupResultListByDate = (
+  messageList: IMessageModel[],
+): Array<{ date: string; list: IMessageModel[] }> => {
+  const result: Array<{ date: string; list: IMessageModel[] }> = [];
+  if (!messageList?.length) {
+    return result;
+  } else if (messageList?.length === 1) {
+    result.push({ date: generateSearchResultYMD(messageList[0]?.time), list: messageList });
+    return result;
+  }
+  let prevYMD = '';
+  let currYMD = '';
+  for (let i = 0; i < messageList?.length; i++) {
+    currYMD = generateSearchResultYMD(messageList[i]?.time);
+    if (prevYMD !== currYMD) {
+      result.push({ date: currYMD, list: [messageList[i]] });
+    } else {
+      result[result?.length - 1]?.list?.push(messageList[i]);
+    }
+    prevYMD = currYMD;
+  }
+  return result;
+};
+
+const navigateToChatPosition = (message: IMessageModel) => {
+  if (props.searchType === 'global') {
+    // Global search, close the search container
+    TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
+      isSearching: false,
+      searchType: props.searchType,
+    });
+    // switch conversation
+    TUIConversationService.switchConversation(message?.conversationID).then(() => {
+      TUIStore.update(StoreName.CHAT, 'messageSource', message);
+      isUniFrameWork && TUIGlobal?.navigateTo({
+        url: '/TUIKit/components/TUIChat/index',
+      });
+    });
+  } else if (props.searchType === 'conversation') {
+    // Search in conversation, close the search container
+    TUIStore.update(StoreName.SEARCH, 'isShowInConversationSearch', false);
+    TUIStore.update(StoreName.CHAT, 'messageSource', message);
+    isUniFrameWork && TUIGlobal?.navigateBack();
+  }
+};
+
+const generateVueRenderKey = (value: string): string => {
+  return `${currentSearchTabKey}-${value}`;
+};
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-default/index.ts b/txim/src/TUIKit/components/TUISearch/search-result/search-result-default/index.ts
new file mode 100644
index 00000000..4fcb7c29
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-default/index.ts
@@ -0,0 +1,2 @@
+import SearchResultDefault from './index.vue';
+export default SearchResultDefault;
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-default/index.vue b/txim/src/TUIKit/components/TUISearch/search-result/search-result-default/index.vue
new file mode 100644
index 00000000..0aaa4fa6
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-default/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <div :class="['search-result-default', !isPC && 'search-result-default-h5']">
+    <div class="search-result-default-main">
+      <Icon
+        :file="SearchDefaultIcon"
+        width="88px"
+        height="75px"
+      />
+      <div class="default-text">
+        {{ TUITranslateService.t("TUISearch.暂无搜索结果") }}
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { isPC } from '../../../../utils/env';
+import Icon from '../../../common/Icon.vue';
+import SearchDefaultIcon from '../../../../assets/icon/search-default.svg';
+
+</script>
+<style scoped lang="scss">
+.search-result-default {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-h5 {
+    background-color: #f4f4f4;
+  }
+
+  &-main {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+
+    .default-text {
+      font-family: "PingFang SC", sans-serif;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #666;
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/index.vue b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/index.vue
new file mode 100644
index 00000000..3147ace2
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/index.vue
@@ -0,0 +1,211 @@
+<!-- Used to display the search results of [Contacts]/[Groups]/[All Conversations], which is a display of user/group/conversation dimensions -->
+<template>
+  <div
+    :class="[
+      'search-result-list-item',
+      !isPC && 'search-result-list-item-h5',
+      'search-result-list-item-' + displayType,
+      isHovering && 'hover-' + displayType,
+    ]"
+    @click="onResultItemClicked"
+    @mouseenter="setHoverStatus(true)"
+    @mouseleave="setHoverStatus(false)"
+  >
+    <div
+      v-if="displayType === 'info' || displayType === 'bubble'"
+      :class="[displayType]"
+    >
+      <div :class="displayType + '-left'">
+        <img
+          :class="displayType + '-left-avatar'"
+          :src="avatarForShow || ''"
+          onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+        >
+      </div>
+      <div :class="[displayType + '-main']">
+        <div :class="[displayType + '-main-name']">
+          {{ nameForShow }}
+        </div>
+        <div :class="[displayType + '-main-content']">
+          <MessageAbstractText
+            v-if="displayType === 'info' || listItem.type === TYPES.MSG_TEXT"
+            :content="contentForShow"
+            :highlightType="displayType === 'info' ? 'font' : 'background'"
+            :displayType="displayType"
+          />
+          <MessageAbstractFile
+            v-else-if="listItem.type === TYPES.MSG_FILE"
+            :contentText="contentForShow"
+            :messageContent="listItemContent"
+            :displayType="displayType"
+          />
+          <div v-else-if="listItem.type === TYPES.MSG_IMAGE" />
+          <div v-else-if="listItem.type === TYPES.MSG_VIDEO" />
+          <MessageAbstractCustom
+            v-else-if="listItem.type === TYPES.MSG_CUSTOM"
+            :contentText="contentForShow"
+            :message="listItem"
+            :messageContent="listItemContent"
+          />
+          <div v-else>
+            {{ getMessageAbstractType(listItem) }}
+          </div>
+        </div>
+      </div>
+      <div :class="displayType + '-right'">
+        <div :class="displayType + '-right-time'">
+          {{ timeForShow }}
+        </div>
+        <div
+          v-if="displayType === 'bubble' && isHovering"
+          :class="displayType + '-right-to'"
+          @click.stop="navigateToChatPosition"
+        >
+          {{ TUITranslateService.t("TUISearch.定位到聊天位置") }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-else-if="displayType === 'file'"
+      :class="[displayType]"
+    >
+      <div :class="[displayType + '-header']">
+        <img
+          :class="displayType + '-header-avatar'"
+          :src="avatarForShow"
+          onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+        >
+        <div :class="[displayType + '-header-name']">
+          {{ nameForShow }}
+        </div>
+        <div
+          v-if="isHovering"
+          :class="displayType + '-header-to'"
+          @click.stop="navigateToChatPosition"
+        >
+          {{ TUITranslateService.t("TUISearch.定位到聊天位置") }}
+        </div>
+        <div :class="displayType + '-header-time'">
+          {{ timeForShow }}
+        </div>
+      </div>
+      <div :class="[displayType + '-main-content']">
+        <MessageAbstractFile
+          :contentText="contentForShow"
+          :messageContent="listItemContent"
+          displayType="bubble"
+        />
+      </div>
+    </div>
+    <div
+      v-else-if="displayType === 'image'"
+      :class="[displayType]"
+    >
+      <div
+        class="image-container"
+        @click.stop="navigateToChatPosition"
+      >
+        <MessageAbstractImage
+          v-if="listItem.type === TYPES.MSG_IMAGE"
+          :messageContent="listItemContent"
+        />
+        <MessageAbstractVideo
+          v-else-if="listItem.type === TYPES.MSG_VIDEO"
+          :messageContent="listItemContent"
+        />
+        <div
+          v-if="isHovering"
+          class="image-container-hover"
+        >
+          <div class="image-container-hover-text">
+            {{ TUITranslateService.t("TUISearch.定位到聊天位置") }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import TUIChatEngine, { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { ref, watchEffect, withDefaults } from '../../../../adapter-vue';
+import MessageAbstractText from './message-abstract/message-abstract-text.vue';
+import MessageAbstractFile from './message-abstract/message-abstract-file.vue';
+import MessageAbstractCustom from './message-abstract/message-abstract-custom.vue';
+import MessageAbstractImage from './message-abstract/message-abstract-image.vue';
+import MessageAbstractVideo from './message-abstract/message-abstract-video.vue';
+import {
+  generateSearchResultShowName,
+  generateSearchResultAvatar,
+  generateSearchResultShowContent,
+  generateSearchResultTime,
+  enterConversation,
+} from '../../utils';
+import { messageTypeAbstractMap, searchResultItemDisplayTypeValues, searchMessageTypeValues, IHighlightContent } from '../../type';
+import { ISearchResultListItem } from '../../../../interface';
+import { isPC } from '../../../../utils/env';
+interface IProps {
+  listItem: IMessageModel | ISearchResultListItem;
+  listItemContent?: Record<string, unknown>;
+  type: searchMessageTypeValues;
+  displayType: searchResultItemDisplayTypeValues;
+  keywordList: string[];
+}
+const props = withDefaults(defineProps<IProps>(), {
+  listItem: () => ({}) as IMessageModel | ISearchResultListItem,
+  listItemContent: () => ({}) as Record<string, unknown>,
+  type: 'allMessage',
+  displayType: 'info',
+  keywordList: () => ([]) as string[],
+});
+
+const emits = defineEmits(['showResultDetail', 'navigateToChatPosition']);
+const TYPES = ref(TUIChatEngine.TYPES);
+
+const avatarForShow = ref<string>('');
+const nameForShow = ref<string>('');
+const contentForShow = ref<IHighlightContent[]>([]);
+const timeForShow = ref<string>('');
+
+const isHovering = ref<boolean>(false);
+
+watchEffect(() => {
+  avatarForShow.value = generateSearchResultAvatar(props.listItem);
+  nameForShow.value = generateSearchResultShowName(props.listItem, props?.listItemContent);
+  contentForShow.value = generateSearchResultShowContent(
+    props.listItem,
+    props.type,
+    props.keywordList as string[],
+    props?.displayType === 'info',
+  );
+  timeForShow.value = (props.listItem as IMessageModel)?.time
+    ? generateSearchResultTime((props.listItem as IMessageModel)?.time * 1000)
+    : '';
+});
+
+const onResultItemClicked = () => {
+  if (props.type === 'contact' || props.type === 'group') {
+    enterConversation(props.listItem as IMessageModel);
+  } else {
+    if (props.displayType === 'info' && !(props.listItem as IMessageModel)?.ID) {
+      emits('showResultDetail', true, props.type, props.listItem);
+    } else {
+      navigateToChatPosition();
+    }
+  }
+};
+
+const setHoverStatus = (status: boolean) => {
+  isHovering.value = status;
+};
+
+const navigateToChatPosition = () => {
+  emits('navigateToChatPosition', props.listItem);
+};
+
+const getMessageAbstractType = (message: IMessageModel | ISearchResultListItem) => {
+  return message?.type
+    ? TUITranslateService.t(`TUISearch.${messageTypeAbstractMap[message.type]}`)
+    : TUITranslateService.t(`TUISearch.[合并消息]`);
+};
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-custom.vue b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-custom.vue
new file mode 100644
index 00000000..32595d9b
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-custom.vue
@@ -0,0 +1,237 @@
+<template>
+  <!-- Custom message keyword keyword search description, so here only a few custom messages that need to display highlighted description type are parsed -->
+  <div
+    :class="['message-abstract-custom']"
+    @click.capture.stop
+  >
+    <template v-if="businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
+      <div :class="['service']">
+        <h1 :class="['service-header']">
+          <label :class="['service-header-title']">{{ extensionJSON.title }}</label>
+          <a
+            v-if="extensionJSON.hyperlinks_text"
+            :class="['service-header-link', 'link']"
+            :href="extensionJSON.hyperlinks_text.value"
+            target="view_window"
+          >
+            {{ extensionJSON.hyperlinks_text.key }}
+          </a>
+        </h1>
+        <ul
+          v-if="extensionJSON.item && extensionJSON.item.length > 0"
+          :class="['service-list']"
+        >
+          <li
+            v-for="(item, index) in extensionJSON.item"
+            :key="index"
+            :class="['service-list-item']"
+          >
+            <a
+              v-if="isUrl(item.value)"
+              :class="['service-list-item-link', 'link']"
+              :href="item.value"
+              target="view_window"
+            >{{ item.key }}</a>
+            <p
+              v-else
+              :class="['service-list-item-key']"
+            >
+              {{ item.key }}
+            </p>
+          </li>
+        </ul>
+        <div :class="['service-description', 'description']">
+          <span
+            v-for="(contentItem, index) in descriptionForShow"
+            :key="index"
+            :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
+          >
+            {{ contentItem.text }}
+          </span>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE">
+      <div class="evaluate">
+        <div :class="['evaluate-description', 'description']">
+          <span
+            v-for="(contentItem, index) in descriptionForShow"
+            :key="index"
+            :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
+          >
+            {{ contentItem.text }}
+          </span>
+        </div>
+        <ul
+          v-if="extensionJSON.score"
+          class="evaluate-list"
+        >
+          <li
+            v-for="(item, index) in Math.max(extensionJSON.score, 0)"
+            :key="index"
+            class="evaluate-list-item"
+          >
+            <Icon
+              :file="star"
+              class="file-icon"
+            />
+          </li>
+        </ul>
+        <article>{{ extensionJSON.comment }}</article>
+      </div>
+    </template>
+    <template v-else-if="businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
+      <div class="order">
+        <img
+          class="order-image"
+          :src="extensionJSON.imageUrl"
+          alt=""
+        >
+        <main class="order-main">
+          <h1 class="order-main-title">
+            {{ extensionJSON.title }}
+          </h1>
+          <div :class="['order-main-description', 'description']">
+            <span
+              v-for="(contentItem, index) in descriptionForShow"
+              :key="index"
+              :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
+            >
+              {{ contentItem.text }}
+            </span>
+          </div>
+          <span class="order-main-price">{{ extensionJSON.price }}</span>
+        </main>
+      </div>
+    </template>
+    <template v-else-if="businessID === CHAT_MSG_CUSTOM_TYPE.LINK">
+      <div class="text-link">
+        <div :class="['text-link-description', 'description']">
+          <p>{{ extensionJSON.text }}</p>
+        </div>
+        <a
+          :class="['link']"
+          :href="extensionJSON.link"
+          target="view_window"
+        >{{
+          TUITranslateService.t("message.custom.查看详情>>")
+        }}</a>
+      </div>
+    </template>
+    <template v-else>
+      <span>{{ defaultMessageContent }}</span>
+    </template>
+  </div>
+</template>
+<script setup lang="ts">
+import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { ref, computed, withDefaults } from '../../../../../adapter-vue';
+import { CHAT_MSG_CUSTOM_TYPE } from '../../../../../constant';
+import { JSONToObject, isUrl } from '../../../../../utils/index';
+import Icon from '../../../../common/Icon.vue';
+import star from '../../../../../assets/icon/star-light.png';
+import { IHighlightContent } from '../../../type';
+import { ISearchResultListItem } from '../../../../../interface';
+interface IProps {
+  contentText: IHighlightContent[];
+  message: IMessageModel | ISearchResultListItem;
+  messageContent: Record<string, unknown> | undefined;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  contentText: () => ([]) as IHighlightContent[],
+  message: () => ({}) as IMessageModel,
+  messageContent: () => ({}) as Record<string, unknown>,
+});
+
+const custom = ref<{ data?: string; description?: string; extension?: string }>(
+  (props?.message as IMessageModel)?.payload,
+);
+const extensionJSON = computed(() => custom?.value?.data ? JSONToObject(custom.value.data) : custom?.value?.data);
+const businessID = computed(() => extensionJSON?.value?.businessID);
+const descriptionForShow = ref<Array<{ text: string; isHighlight: boolean }>>(props?.contentText);
+const defaultMessageContent = ref<string>(props?.messageContent?.custom as string || '[自定义消息]');
+</script>
+<style scoped lang="scss">
+@import "../../../../../assets/styles/common";
+
+.message-abstract-custom {
+  .service {
+    .service-header {
+      font-size: 14px;
+      color: #000;
+    }
+
+    .service-list {
+      .service-list-item {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .evaluate {
+    .evaluate-list {
+      padding: 5px 0;
+      display: flex;
+      flex-direction: row;
+
+      .evaluate-item {
+        padding: 0 2px;
+      }
+    }
+  }
+
+  .order {
+    display: flex;
+
+    .order-main {
+      padding-left: 5px;
+
+      .order-main-title {
+        font-size: 14px;
+        color: #000;
+      }
+
+      .order-main-description {
+        font-family: PingFangSC-Regular, sans-serif;
+        width: 145px;
+        line-height: 17px;
+        font-size: 14px;
+        color: #999;
+        letter-spacing: 0;
+        margin-bottom: 6px;
+        word-break: break-word;
+      }
+
+      .order-main-price {
+        font-family: PingFangSC-Regular, sans-serif;
+        line-height: 25px;
+        color: #ff7201;
+      }
+    }
+
+    .order-img {
+      width: 67px;
+      height: 67px;
+    }
+  }
+
+  .link {
+    font-size: 14px;
+    color: #679ce1;
+  }
+
+  .description {
+    font-size: 14px;
+    color: #000;
+
+    .highlight {
+      background-color: #007aff33;
+    }
+
+    .normal {
+      font-size: 14px;
+      color: #000;
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-file.vue b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-file.vue
new file mode 100644
index 00000000..91b0536f
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-file.vue
@@ -0,0 +1,152 @@
+<template>
+  <div :class="['message-abstract-file', `message-abstract-file-${displayType}`]">
+    <div :class="['message-abstract-file-left']">
+      <img
+        :class="['message-abstract-file-left-icon']"
+        :src="typeIcon.iconSrc"
+      >
+    </div>
+    <div :class="['message-abstract-file-main']">
+      <div :class="['message-abstract-file-main-name']">
+        <span
+          v-for="(contentItem, index) in contentText"
+          :key="index"
+          :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
+        >
+          {{ contentItem.text }}
+        </span>
+      </div>
+      <div :class="['message-abstract-file-main-size']">
+        {{ fileSize }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, withDefaults } from '../../../../../adapter-vue';
+import { IHighlightContent } from '../../../type';
+interface IProps {
+  contentText: Array<IHighlightContent>;
+  messageContent: Record<string, unknown> | undefined;
+  displayType: 'bubble' | 'info';
+}
+const props = withDefaults(defineProps<IProps>(), {
+  contentText: () => ([]) as Array<IHighlightContent>,
+  messageContent: () => ({}) as Record<string, unknown>,
+  displayType: 'bubble',
+});
+
+const contentText = ref<Array<{ text: string; isHighlight: boolean }>>(props.contentText);
+const typeIcon = computed(() => {
+  const fileUrl = props?.messageContent?.url as string;
+  const index = fileUrl?.lastIndexOf('.');
+  const type = fileUrl?.substring(index + 1);
+  return handleFileIconForShow(type);
+});
+const fileSize = computed(() => props?.messageContent?.size);
+const handleFileIconForShow = (type: string) => {
+  const urlBase = 'https://web.sdk.qcloud.com/component/TUIKit/assets/file-';
+  const fileTypes = [
+    'image',
+    'pdf',
+    'text',
+    'ppt',
+    'presentation',
+    'sheet',
+    'zip',
+    'word',
+    'video',
+    'unknown',
+  ];
+  let url = '';
+  let iconType = '';
+  fileTypes?.forEach((typeName: string) => {
+    if (type?.includes(typeName)) {
+      url = urlBase + typeName + '.svg';
+      iconType = typeName;
+    }
+  });
+  return {
+    iconSrc: url ? url : urlBase + 'unknown.svg',
+    iconType: iconType ? iconType : 'unknown',
+  };
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../../../../assets/styles/common";
+
+.message-abstract-file {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  &-left {
+    width: 42px;
+    height: 32px;
+
+    &-icon {
+      width: 32px;
+      height: 32px;
+      margin-right: 10px;
+      border-radius: 5px;
+    }
+  }
+
+  &-main {
+    flex: 1;
+    overflow: hidden;
+
+    &-name {
+      width: 100%;
+      color: #000;
+      font-size: 14px;
+      height: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .highlight {
+        background-color: #007aff33;
+      }
+
+      .normal {
+        color: #000;
+      }
+    }
+
+    &-size {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #888;
+      font-size: 12px;
+    }
+  }
+
+  &-bubble {
+    background-color: #f1f1f1;
+
+    .message-abstract-file-main {
+      .message-abstract-file-main-name {
+        color: #1f2329;
+
+        .normal {
+          color: #1f2329;
+        }
+      }
+    }
+  }
+
+  &-file {
+    margin: 8px 10px 5px;
+    padding: 10px;
+    background-color: #f1f1f1;
+    height: 51px;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-image.vue b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-image.vue
new file mode 100644
index 00000000..279d03d3
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-image.vue
@@ -0,0 +1,40 @@
+<template>
+  <div :class="['message-abstract-image-container']">
+    <img
+      :class="['message-abstract-image']"
+      :src="imageUrl"
+    >
+  </div>
+</template>
+<script setup lang="ts">
+import { withDefaults, computed } from '../../../../../adapter-vue';
+import { IImageMessageContent } from '../../../../../interface';
+interface IProps {
+  messageContent: Record<string, unknown> | IImageMessageContent | undefined;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  messageContent: () => ({}) as IImageMessageContent,
+});
+
+const imageUrl = computed<string>(() => (props.messageContent as IImageMessageContent).url || '');
+</script>
+<style scoped lang="scss">
+@import "../../../../../assets/styles/common";
+
+.message-abstract-image-container {
+  max-width: 100px;
+  max-height: 100px;
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  background-color: #fff;
+
+  .message-abstract-image {
+    max-width: 100px;
+    max-height: 100px;
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-text.vue b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-text.vue
new file mode 100644
index 00000000..13303bb9
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-text.vue
@@ -0,0 +1,93 @@
+<template>
+  <div
+    :class="[
+      'message-abstract-text',
+      `message-abstract-text-${highlightType}`,
+      `message-abstract-text-${displayType}`,
+    ]"
+  >
+    <span
+      v-for="(contentItem, index) in contentText"
+      :key="index"
+      :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
+    >
+      {{ transformTextWithKeysToEmojiNames(contentItem.text) }}
+    </span>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, withDefaults } from '../../../../../adapter-vue';
+import { transformTextWithKeysToEmojiNames } from '../../../../TUIChat/emoji-config';
+import { IHighlightContent } from '../../../type';
+
+interface IProps {
+  content: IHighlightContent[];
+  highlightType: 'font' | 'background';
+  displayType: 'info' | 'bubble';
+}
+const props = withDefaults(defineProps<IProps>(), {
+  content: () => ([]) as IHighlightContent[],
+  highlightType: 'font',
+  displayType: 'info',
+});
+
+const contentText = ref<Array<{ text: string; isHighlight: boolean }>>(props.content);
+</script>
+<style scoped lang="scss">
+@import "../../../../../assets/styles/common";
+
+.message-abstract-text {
+  justify-content: flex-start;
+
+  &-font {
+    color: #999;
+
+    .highlight {
+      color: #007aff;
+    }
+
+    .normal {
+      color: #999;
+    }
+  }
+
+  &-background {
+    color: #1f2329;
+
+    .highlight {
+      background-color: #007aff33;
+    }
+
+    .normal {
+      font-size: 14px;
+    }
+  }
+
+  &-info {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+
+    .highlight {
+      font-size: 12px;
+    }
+
+    .normal {
+      font-size: 12px;
+    }
+  }
+
+  &-bubble {
+    font-size: 14px;
+
+    .highlight {
+      font-size: 14px;
+    }
+
+    .normal {
+      font-size: 14px;
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-video.vue b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-video.vue
new file mode 100644
index 00000000..8620833c
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-video.vue
@@ -0,0 +1,70 @@
+<template>
+  <div :class="['message-abstract-video']">
+    <div class="message-abstract-video-box">
+      <img
+        :src="videoUrl"
+        :class="['video-snapshot']"
+      >
+      <Icon
+        :file="playIcon"
+        class="video-play"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from '../../../../../adapter-vue';
+import Icon from '../../../../common/Icon.vue';
+import playIcon from '../../../../../assets/icon/video-play.png';
+import { IVideoMessageContent } from '../../../../../interface';
+interface IProps {
+  messageContent: Record<string, unknown> | IVideoMessageContent | undefined;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  messageContent: () => ({}) as IVideoMessageContent,
+});
+const videoUrl = computed<string>(() => {
+  return (props.messageContent as IVideoMessageContent).snapshotUrl || (props.messageContent as IVideoMessageContent).url;
+});
+</script>
+<style scoped lang="scss">
+@import "../../../../../assets/styles/common";
+
+.message-abstract-video {
+  max-width: 100px;
+  max-height: 100px;
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  background-color: #fff;
+
+  &-box {
+    max-width: 100px;
+    max-height: 100px;
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+    background-color: #fff;
+    position: relative;
+
+    .video-snapshot {
+      max-width: 100px;
+      max-height: 100px;
+      width: 100px;
+      height: 100px;
+      object-fit: contain;
+    }
+
+    .video-play {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      z-index: 3;
+      width: 35px;
+      height: 35px;
+      margin: auto;
+    }
+  }
+}</style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/style/h5.scss b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/style/h5.scss
new file mode 100644
index 00000000..0ae8e5c0
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/style/h5.scss
@@ -0,0 +1,24 @@
+.search-result-list-item-h5 {
+  padding: 10px 0;
+  border-radius: 0;
+
+  .bubble {
+    .bubble-left {
+      .bubble-left-avatar {
+        width: 48px;
+        height: 48px;
+      }
+
+      .bubble-main {
+        .bubble-main-name {
+          color: #333;
+          font-family: "PingFang SC", sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          letter-spacing: 0;
+          text-align: left;
+        }
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/style/index.scss b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/style/index.scss
new file mode 100644
index 00000000..aafe63a4
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/style/index.scss
@@ -0,0 +1,3 @@
+@import '../../../../../assets/styles/common';
+@import './web';
+@import './h5';
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/style/web.scss b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/style/web.scss
new file mode 100644
index 00000000..de49195a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-item/style/web.scss
@@ -0,0 +1,262 @@
+.search-result-list-item {
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  cursor: pointer;
+
+  &-image {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    max-width: 100px;
+    max-height: 100px;
+    overflow: hidden;
+    box-sizing: content-box;
+    border: 1px solid #f1f1f1;
+    padding: 0;
+    margin: 5px;
+  }
+
+  &-file {
+    border: none;
+  }
+
+  .info {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    &-left {
+      &-avatar {
+        width: 36px;
+        height: 36px;
+        border-radius: 5px;
+      }
+    }
+
+    &-main {
+      flex: 1;
+      padding: 0 10px;
+      overflow: hidden;
+
+      &-name,
+      &-content {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &-name {
+        color: #333;
+        font-size: 14px;
+        height: 20px;
+      }
+
+      &-content {
+        color: #999;
+        font-size: 12px;
+
+        .highlight {
+          color: #007aff;
+        }
+
+        .normal {
+          color: #999;
+        }
+      }
+    }
+
+    &-right {
+      width: fit-content;
+
+      &-time {
+        font-weight: 400;
+        font-size: 12px;
+        color: #999;
+        letter-spacing: 0;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .bubble {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    &-left {
+      &-avatar {
+        width: 36px;
+        height: 36px;
+        border-radius: 5px;
+      }
+    }
+
+    &-main {
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      padding: 0 8px;
+
+      &-name {
+        max-width: 100%;
+        width: fit-content;
+        padding-bottom: 4px;
+        font-weight: 400;
+        font-size: 12px;
+        color: #999;
+        letter-spacing: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &-content {
+        max-width: 100%;
+        width: fit-content;
+        box-sizing: border-box;
+        padding: 12px;
+        font-weight: 400;
+        font-size: 14px;
+        color: #000;
+        letter-spacing: 0;
+        word-wrap: break-word;
+        word-break: break-all;
+        overflow: hidden;
+        background: #eff0f1;
+        border-radius: 0 10px 10px;
+
+        .highlight {
+          background-color: #007aff33;
+        }
+
+        .normal {
+          color: #1f2329;
+        }
+      }
+    }
+
+    &-right {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+
+      &-time {
+        font-weight: 400;
+        font-size: 12px;
+        color: #999;
+        letter-spacing: 0;
+        white-space: nowrap;
+      }
+
+      &-to {
+        cursor: pointer;
+        font-weight: 400;
+        font-size: 12px;
+        color: #007aff;
+        letter-spacing: 0;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .file {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &-header {
+      flex: 1;
+      padding: 10px 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+
+      &-avatar {
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        margin-right: 3px;
+      }
+
+      &-name {
+        flex: 1;
+      }
+
+      &-name,
+      &-time,
+      &-to {
+        color: #666;
+        font-size: 14px;
+        height: 24px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &-to {
+        cursor: pointer;
+        font-weight: 400;
+        color: #007aff;
+        letter-spacing: 0;
+        white-space: nowrap;
+        padding-right: 3px;
+      }
+    }
+
+    &-main-content {
+      padding: 10px;
+      background-color: #f1f1f1;
+    }
+  }
+
+  .image {
+    width: 100px;
+    height: 100px;
+    max-width: 100px;
+    max-height: 100px;
+    overflow: hidden;
+    box-sizing: content-box;
+
+    .image-container {
+      width: 100px;
+      height: 100px;
+      max-width: 100px;
+      max-height: 100px;
+      overflow: hidden;
+      position: relative;
+
+      .image-container-hover {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 40%;
+        background-color: rgba(0,0,0,0.3);
+
+        .image-container-hover-text {
+          width: 100%;
+          height: 100%;
+          font-size: 12px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #fff;
+          cursor: pointer;
+          user-select: none;
+        }
+      }
+    }
+  }
+}
+
+.hover-info {
+  border-radius: 5px;
+  background-color: #f5f5f5;
+}
+
+.hover-bubble {
+  background-color: #f5f5f5;
+}
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-loading/index.ts b/txim/src/TUIKit/components/TUISearch/search-result/search-result-loading/index.ts
new file mode 100644
index 00000000..ff2d6af7
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-loading/index.ts
@@ -0,0 +1,2 @@
+import SearchResultLoading from './index.vue';
+export default SearchResultLoading;
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/search-result-loading/index.vue b/txim/src/TUIKit/components/TUISearch/search-result/search-result-loading/index.vue
new file mode 100644
index 00000000..271d2e6c
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/search-result-loading/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <div :class="['search-result-loading', !isPC && 'search-result-loading-h5']">
+    <Loading
+      width="40px"
+      height="40px"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import Loading from '../../../common/Loading/index.vue';
+import { isPC } from '../../../../utils/env';
+</script>
+<style scoped lang="scss">
+.search-result-loading {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-h5 {
+    background-color: #f4f4f4;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/style/h5.scss b/txim/src/TUIKit/components/TUISearch/search-result/style/h5.scss
new file mode 100644
index 00000000..4307be4f
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/style/h5.scss
@@ -0,0 +1,67 @@
+.tui-search-result-h5 {
+  background-color: #f4f4f4;
+
+  .tui-search-result-main {
+    background-color: #f4f4f4;
+
+    .tui-search-result-list {
+      .tui-search-result-list-item {
+        background-color: #fff;
+        padding: 0 10px 10px;
+        border-radius: 5px;
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  .tui-search-result-detail {
+    background-color: #f4f4f4;
+    border: none;
+
+    .list-item {
+      margin: 0 10px;
+      width: calc(100% - 20px);
+    }
+
+    .list-group-date {
+      padding: 10px;
+    }
+
+    .list-group-image {
+      .list-group-item {
+        .search-result-list-item-h5 {
+          padding: 0;
+        }
+      }
+    }
+
+    .list-group-file {
+      .list-group-item {
+        background-color: #fff;
+        padding: 0 10px;
+        border-bottom: 1px solid #f4f4f4;
+
+        .search-result-list-item-h5 {
+          padding: 0 0 10px;
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+
+.search-result-loading,
+.search-result-default {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-h5 {
+    background-color: #f4f4f4;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/style/index.scss b/txim/src/TUIKit/components/TUISearch/search-result/style/index.scss
new file mode 100644
index 00000000..915074b6
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/style/index.scss
@@ -0,0 +1,3 @@
+@import '../../../../assets/styles/common';
+@import './web';
+@import './h5';
diff --git a/txim/src/TUIKit/components/TUISearch/search-result/style/web.scss b/txim/src/TUIKit/components/TUISearch/search-result/style/web.scss
new file mode 100644
index 00000000..ef36e3ab
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-result/style/web.scss
@@ -0,0 +1,180 @@
+.tui-search-result {
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  box-sizing: border-box;
+
+  &-with-border {
+    border-top: 1px solid rgba(0,0,0,0.1);
+  }
+
+  &-detail {
+    width: 360px;
+    overflow-y: hidden;
+    border-left: 1px solid rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    .tui-search-message-header {
+      padding: 10px;
+      display: flex;
+      flex-direction: row;
+      place-content: space-between space-between;
+      font-size: 14px;
+      align-items: center;
+
+      .header-content {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1;
+        overflow: hidden;
+        color: #666;
+        white-space: nowrap;
+
+        .header-content-count {
+          width: fit-content;
+          white-space: nowrap;
+        }
+
+        .header-content-keyword {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .header-content-type {
+          width: 110px;
+          white-space: nowrap;
+        }
+
+        .normal {
+          color: #666;
+        }
+
+        .highlight {
+          color: #007aff;
+        }
+      }
+
+      .header-enter {
+        margin-left: 10px;
+        width: 70px;
+        color: #666;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+      }
+    }
+
+    .tui-search-message-list {
+      overflow-y: auto;
+
+      .list-item {
+        width: 100%;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .list-group {
+        &.list-group-image {
+          display: flex;
+          flex-flow: row wrap;
+
+          .list-group-item {
+            width: 111px;
+            height: 111px;
+          }
+        }
+
+        .list-group-date {
+          width: 100%;
+          box-sizing: border-box;
+          font-family: "PingFang SC", sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          letter-spacing: 0;
+          text-align: left;
+          padding: 10px 10px 2px;
+        }
+      }
+
+      .more {
+        display: flex;
+        flex-direction: row;
+        font-size: 14px;
+        padding: 8px 0;
+        justify-content: center;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+
+        .more-text {
+          padding-left: 8px;
+          font-size: 12px;
+          color: #007aff;
+          user-select: none;
+        }
+      }
+    }
+  }
+
+  &-main {
+    width: 350px;
+    padding: 10px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    .tui-search-result-list {
+      &-item {
+        .header {
+          font-size: 14px;
+          padding: 4px 0;
+        }
+
+        .list {
+          display: flex;
+          flex-direction: column;
+
+          .list-item {
+            cursor: pointer;
+          }
+
+          .list-item-selected {
+            background: #f2f2f2;
+            border-radius: 5px;
+          }
+        }
+
+        .more {
+          display: flex;
+          flex-direction: row;
+          font-size: 14px;
+
+          // padding: 8px 0;
+          padding-top: 10px;
+          user-select: none;
+          cursor: pointer;
+
+          .more-text {
+            padding-left: 8px;
+            font-size: 12px;
+            color: #007aff;
+            user-select: none;
+          }
+        }
+      }
+    }
+  }
+
+  .tui-search-result-in-conversation {
+    border: none;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUISearch/search-time-list.ts b/txim/src/TUIKit/components/TUISearch/search-time-list.ts
new file mode 100644
index 00000000..fb43454c
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-time-list.ts
@@ -0,0 +1,45 @@
+// const oneDay = 24 * 60 * 60 * 1000;
+const oneDay = 24 * 60 * 60;
+export const searchMessageTimeList: {
+  [propsName: string]: {
+    key: string;
+    label: string;
+    value: { timePosition: number; timePeriod: number };
+  };
+} = {
+  all: {
+    key: 'all',
+    label: '全部',
+    value: {
+      timePosition: 0,
+      timePeriod: 0,
+    },
+  },
+  oneDay: {
+    key: 'today',
+    label: '今天',
+    value: {
+      timePosition: 0,
+      timePeriod: oneDay,
+    },
+  },
+  threeDay: {
+    key: 'threeDays',
+    label: '近三天',
+    value: {
+      timePosition: 0,
+      timePeriod: 3 * oneDay,
+    },
+  },
+  sevenDay: {
+    key: 'sevenDays',
+    label: '近七天',
+    value: {
+      timePosition: 0,
+      timePeriod: 7 * oneDay,
+    },
+  },
+};
+
+export const searchMessageTimeKeys = Object.keys(searchMessageTimeList);
+export const searchMessageTimeDefault = searchMessageTimeList['all'];
diff --git a/txim/src/TUIKit/components/TUISearch/search-type-list.ts b/txim/src/TUIKit/components/TUISearch/search-type-list.ts
new file mode 100644
index 00000000..2ad66424
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/search-type-list.ts
@@ -0,0 +1,86 @@
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+export interface ISearchMessageTypeList {
+  [propsName: string]: {
+    key: string;
+    label: string;
+    value: any[] | string;
+  };
+}
+export const allMessageTypeList = [
+  TUIChatEngine.TYPES.MSG_TEXT,
+  TUIChatEngine.TYPES.MSG_FILE,
+  TUIChatEngine.TYPES.MSG_IMAGE,
+  TUIChatEngine.TYPES.MSG_VIDEO,
+  TUIChatEngine.TYPES.MSG_AUDIO,
+  TUIChatEngine.TYPES.MSG_LOCATION,
+  TUIChatEngine.TYPES.MSG_CUSTOM,
+  TUIChatEngine.TYPES.MSG_MERGER,
+];
+export const searchMessageTypeList: ISearchMessageTypeList = {
+  allMessage: {
+    key: 'allMessage',
+    label: '全部',
+    value: allMessageTypeList,
+  },
+  textMessage: {
+    key: 'textMessage',
+    label: '文本',
+    value: [TUIChatEngine.TYPES.MSG_TEXT],
+  },
+  fileMessage: {
+    key: 'fileMessage',
+    label: '文件',
+    value: [TUIChatEngine.TYPES.MSG_FILE],
+  },
+  imageMessage: {
+    key: 'imageMessage',
+    label: '图片/视频',
+    value: [TUIChatEngine.TYPES.MSG_IMAGE, TUIChatEngine.TYPES.MSG_VIDEO],
+  },
+  otherMessage: {
+    key: 'otherMessage',
+    label: '其他',
+    value: [
+      TUIChatEngine.TYPES.MSG_AUDIO,
+      TUIChatEngine.TYPES.MSG_LOCATION,
+      TUIChatEngine.TYPES.MSG_CUSTOM,
+      TUIChatEngine.TYPES.MSG_MERGER,
+    ],
+  },
+};
+
+export const searchMessageTypeKeys = Object.keys(searchMessageTypeList);
+export const searchMessageSingleTypeKeys = Object.keys(searchMessageTypeList).filter(
+  (key: string) => key !== 'all',
+);
+export const searchInGlobalDefaultType = searchMessageTypeList['allMessage'];
+export const searchInConversationDefaultType = searchMessageTypeList['textMessage'];
+export const searchMessageTypeDefault = {
+  global: searchInGlobalDefaultType,
+  conversation: searchInConversationDefaultType,
+};
+
+// Global search type key list
+export const globalSearchTypeKeys = ['allMessage', 'textMessage', 'fileMessage', 'otherMessage'];
+// Global search type list
+export const globalSearchTypeList = Object.keys(searchMessageTypeList)
+  .filter((key: string) => globalSearchTypeKeys?.includes(key))
+  .reduce((obj: ISearchMessageTypeList, key: string) => {
+    obj[key] = searchMessageTypeList[key];
+    return obj;
+  }, {});
+
+// Search type key list in session
+export const conversationSearchTypeKeys = [
+  'textMessage',
+  'fileMessage',
+  'imageMessage',
+  'otherMessage',
+];
+// Search type list in session
+export const conversationSearchTypeList = Object.keys(searchMessageTypeList)
+  .filter((key: string) => conversationSearchTypeKeys?.includes(key))
+  .reduce((obj: ISearchMessageTypeList, key: string) => {
+    obj[key] = searchMessageTypeList[key];
+    return obj;
+  }, {});
diff --git a/txim/src/TUIKit/components/TUISearch/server.ts b/txim/src/TUIKit/components/TUISearch/server.ts
new file mode 100644
index 00000000..c0f08212
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/server.ts
@@ -0,0 +1,73 @@
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import {
+  TUIUserService,
+  TUIGroupService,
+  TUIFriendService,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { isUniFrameWork } from '../../utils/env';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+
+export default class TUISearchServer {
+  constructor() {
+    TUICore.registerService(TUIConstants.TUISearch.SERVICE.NAME, this);
+    TUICore.registerExtension(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, this);
+  }
+
+  public onCall(method: string, params: { [propsName: string]: string }) {
+    switch (method) {
+      case TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_GROUP:
+        return this.searchGroup(params?.groupID);
+      case TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_USER:
+        return this.searchUser(params?.userID);
+      case TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_FRIEND:
+        return this.searchFriend(params?.userID);
+      case TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_GROUP_MEMBER:
+        return this.searchGroupMember(params?.groupID, params?.userID);
+    }
+  }
+
+  public onGetExtension(extensionID: string) {
+    if (extensionID === TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID) {
+      const list: any[] = [];
+      const searchExtension = {
+        weight: 3000,
+        text: '搜索',
+        icon: 'https://web.sdk.qcloud.com/component/TUIKit/assets/message-search.svg',
+        data: {
+          name: 'search',
+        },
+        listener: {
+          onClicked: () => {
+            TUIStore.update(StoreName.SEARCH, 'isShowInConversationSearch', true);
+            isUniFrameWork && TUIGlobal?.navigateTo({
+              url: '/TUIKit/components/TUISearch/index',
+            });
+          },
+        },
+      };
+      list.push(searchExtension);
+      return list;
+    }
+  }
+
+  public async searchFriend(userID: string) {
+    return TUIFriendService.getFriendProfile({ userIDList: [userID] });
+  }
+
+  public async searchUser(userID: string) {
+    return TUIUserService.getUserProfile({ userIDList: [userID] });
+  }
+
+  public async searchGroup(groupID: string) {
+    return TUIGroupService.searchGroupByID(groupID);
+  }
+
+  public async searchGroupMember(groupID: string, userID: string) {
+    return TUIGroupService.getGroupMemberProfile({
+      groupID,
+      userIDList: [userID],
+    });
+  }
+}
diff --git a/txim/src/TUIKit/components/TUISearch/style/h5.scss b/txim/src/TUIKit/components/TUISearch/style/h5.scss
new file mode 100644
index 00000000..4ab75bb6
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/style/h5.scss
@@ -0,0 +1,39 @@
+.tui-search-h5 {
+  &-full-screen {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+    background: #fff;
+  }
+
+  &-global,
+  &-conversation {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  &-conversation {
+    overflow: hidden;
+  }
+
+  &.tui-search-main-conversation {
+    box-shadow: none;
+  }
+
+  .search-input,
+  .search-container,
+  .search-result {
+    min-width: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUISearch/style/index.scss b/txim/src/TUIKit/components/TUISearch/style/index.scss
new file mode 100644
index 00000000..0660571a
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/style/index.scss
@@ -0,0 +1,3 @@
+@import '../../../assets/styles/common';
+@import './web';
+@import './h5';
diff --git a/txim/src/TUIKit/components/TUISearch/style/web.scss b/txim/src/TUIKit/components/TUISearch/style/web.scss
new file mode 100644
index 00000000..a6e0e9bc
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/style/web.scss
@@ -0,0 +1,28 @@
+.tui-search {
+  &-main-global {
+    width: 100%;
+    height: fit-content;
+  }
+
+  &-main-conversation {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    box-shadow: 0 1px 10px 0 rgba(2,16,43,0.15);
+  }
+
+  .tui-search-global {
+    &-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .tui-search-conversation {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
diff --git a/txim/src/TUIKit/components/TUISearch/type.ts b/txim/src/TUIKit/components/TUISearch/type.ts
new file mode 100644
index 00000000..32a214fc
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/type.ts
@@ -0,0 +1,76 @@
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+
+export type SEARCH_TYPE = 'global' | 'conversation';
+
+// Message search result type display summary
+// Unsupported type:
+// TYPES.MSG_FACE / TYPES.MSG_GRP_TIP / TYPES.MSG_GRP_SYS_NOTICE
+export const messageTypeAbstractMap: Record<string, string> = {
+  [TUIChatEngine.TYPES.MSG_TEXT]: '[文本]',
+  [TUIChatEngine.TYPES.MSG_IMAGE]: '[图片]',
+  [TUIChatEngine.TYPES.MSG_AUDIO]: '[语音]',
+  [TUIChatEngine.TYPES.MSG_VIDEO]: '[视频]',
+  [TUIChatEngine.TYPES.MSG_FILE]: '[文件]',
+  [TUIChatEngine.TYPES.MSG_CUSTOM]: '[自定义消息]',
+  [TUIChatEngine.TYPES.MSG_SYSTEM]: '[系统消息]',
+  [TUIChatEngine.TYPES.MSG_MERGER]: '[合并消息]',
+  [TUIChatEngine.TYPES.MSG_LOCATION]: '[位置消息]',
+};
+
+export const searchResultItemDisplayType = {
+  INFO: 'info', // Normal information flow display
+  BUBBLE: 'bubble', // Message bubble display
+  FILE: 'file', // File list type display
+  IMAGE: 'image', // Picture collection display
+};
+
+export type searchResultItemDisplayTypeKeys = keyof typeof searchResultItemDisplayType;
+export type searchResultItemDisplayTypeValues = typeof searchResultItemDisplayType[searchResultItemDisplayTypeKeys];
+
+export const searchMessageType = {
+  // CONTACT: "contact", // Contact search, not supported yet
+  // GROUP: "group", // Group search, not supported yet
+  ALL_MESSAGE: 'allMessage',
+  TEXT_MESSAGE: 'textMessage',
+  IMAGE_MESSAGE: 'imageMessage',
+  FILE_MESSAGE: 'fileMessage',
+  OTHER_MESSAGE: 'otherMessage',
+};
+
+export type searchMessageTypeKeys = keyof typeof searchMessageType;
+export type searchMessageTypeValues = typeof searchMessageType[searchMessageTypeKeys];
+
+export interface ISearchInputValue {
+  value: string;
+  searchType: SEARCH_TYPE;
+}
+export interface ISearchTypeTab {
+  key: string;
+  label: string;
+  value: string | string[];
+}
+export interface ISearchMessageType {
+  value: ISearchTypeTab;
+  searchType: SEARCH_TYPE;
+}
+export interface ISearchTimeTab {
+  key: string;
+  label: string;
+  value: {
+    timePosition: number;
+    timePeriod: number;
+  };
+}
+export interface ISearchMessageTime {
+  value: ISearchTimeTab;
+  searchType: SEARCH_TYPE;
+}
+export interface ISearchingStatus {
+  isSearching: boolean;
+  searchType: string;
+}
+
+export interface IHighlightContent {
+  text: string;
+  isHighlight: boolean;
+}
diff --git a/txim/src/TUIKit/components/TUISearch/utils.ts b/txim/src/TUIKit/components/TUISearch/utils.ts
new file mode 100644
index 00000000..bb24e1ca
--- /dev/null
+++ b/txim/src/TUIKit/components/TUISearch/utils.ts
@@ -0,0 +1,346 @@
+import TUIChatEngine, {
+  TUIFriendService,
+  TUIConversationService,
+  TUIGroupService,
+  TUIChatService,
+  TUITranslateService,
+  SearchCloudMessagesParams,
+  IGroupModel,
+  TUIStore,
+  StoreName,
+  IMessageModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { ISearchCloudMessageResult, IFriendType, ISearchResultListItem, IUserProfile } from '../../interface';
+import { searchMessageTypeList } from './search-type-list';
+import { Toast, TOAST_TYPE } from '../common/Toast/index';
+import { messageTypeAbstractMap } from './type';
+import { isUniFrameWork } from '../../utils/env';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+
+/**************************************
+ * TUISearch search logic
+ **************************************/
+
+export const searchCloudMessages = (
+  params: SearchCloudMessagesParams,
+): Promise<{ data: ISearchCloudMessageResult }> => {
+  return TUIChatService.searchCloudMessages(params)
+    .then((imResponse) => {
+      return imResponse;
+    })
+    .catch((error) => {
+      Toast({
+        message: TUITranslateService.t('TUISearch.消息云端搜索失败：') + error?.message,
+        type: TOAST_TYPE.ERROR,
+        duration: 3000,
+      });
+      return null;
+    });
+};
+
+export const searchFriends = (userIDList: any[]): Promise<any[]> => {
+  // Only show users who are already friends
+  return TUIFriendService.getFriendProfile({ userIDList })
+    .then((imResponse) => {
+      return imResponse;
+    })
+    .catch((error) => {
+      console.warn('search user failed:', error?.message);
+      Toast({
+        message: TUITranslateService.t('TUISearch.查找联系人失败：') + error?.message,
+        type: TOAST_TYPE.ERROR,
+        duration: 1000,
+      });
+      return null;
+    });
+};
+
+// Search all joined group chats
+export const searchGroups = (groupIDList: any[]): Promise<any[]> => {
+  const promiseList: any[] = [];
+  groupIDList.forEach((groupID: string) => {
+    const promise = TUIGroupService.searchGroupByID(groupID)
+      .then((imResponse) => {
+        // Only show joined group chats
+        if (imResponse?.data?.group?.isJoinedGroup) {
+          return imResponse?.data?.group;
+        }
+      })
+      .catch((error) => {
+        console.warn('search group failed:', error?.message);
+      });
+    promiseList.push(promise);
+  });
+  return Promise.all(promiseList)
+    .then((imResponse) => {
+      return imResponse.filter(x => x !== undefined);
+    })
+    .catch((error) => {
+      Toast({
+        message: TUITranslateService.t('TUISearch.查找群聊失败：') + error?.message,
+        type: TOAST_TYPE.ERROR,
+        duration: 1000,
+      });
+      return [];
+    });
+};
+
+/**************************************
+ * TUISearch interaction logic
+ **************************************/
+// switch conversation
+export const enterConversation = (item: { conversationID?: string; groupID?: string; userID?: string }) => {
+  const conversationID
+    = item?.conversationID || (item?.groupID ? `GROUP${item?.groupID}` : `C2C${item?.userID}`);
+  TUIConversationService.switchConversation(conversationID)
+    .then(() => {
+      TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
+        isSearching: false,
+        searchType: 'global',
+      });
+      TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
+        value: '',
+        searchType: 'global',
+      });
+      isUniFrameWork && TUIGlobal?.navigateTo({
+        url: '/TUIKit/components/TUIChat/index',
+      });
+    })
+    .catch((error) => {
+      console.warn('switch conversation failed:', error?.message);
+      Toast({
+        message: TUITranslateService.t('TUISearch.进入会话失败'),
+        type: TOAST_TYPE.ERROR,
+        duration: 1000,
+      });
+    });
+};
+
+/**************************************
+ * TUISearch UI display logic
+ **************************************/
+export const generateSearchResultShowName = (result: IMessageModel | ISearchResultListItem | IGroupModel | IFriendType | IUserProfile, resultContent: Record<string, string>): string => {
+  if (!result) {
+    return '';
+  }
+  if ((result as IMessageModel).ID) {
+    return resultContent?.showName;
+  }
+  if ((result as IGroupModel).groupID) {
+    return (result as IGroupModel).name || (result as IGroupModel).groupID;
+  }
+  if ((result as IFriendType | IUserProfile).userID) {
+    return (result as IFriendType).remark || (result as IUserProfile).nick || (result as IFriendType).userID || '';
+  }
+  if ((result as ISearchResultListItem).conversation?.conversationID) {
+    if (typeof (result as ISearchResultListItem).conversation.getShowName === 'function') {
+      return (result as ISearchResultListItem).conversation.getShowName();
+    } else {
+      return TUIStore.getConversationModel((result as ISearchResultListItem).conversation.conversationID)?.getShowName?.() || (result as ISearchResultListItem).conversation.conversationID;
+    }
+  }
+  return '';
+};
+
+export const generateSearchResultAvatar = (result: IMessageModel | ISearchResultListItem | IGroupModel | IFriendType | IUserProfile): string => {
+  if (!result) {
+    return '';
+  }
+  if ((result as IMessageModel).ID) {
+    return (result as IMessageModel).avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png';
+  }
+  if ((result as IGroupModel).groupID) {
+    return (result as IGroupModel).avatar || `https://web.sdk.qcloud.com/im/assets/images/${(result as IGroupModel)?.type}.svg`;
+  }
+  if ((result as IUserProfile).userID) {
+    return (result as IUserProfile).avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png';
+  }
+  if ((result as ISearchResultListItem)?.conversation?.conversationID) {
+    if (typeof (result as ISearchResultListItem).conversation.getAvatar === 'function') {
+      return (result as ISearchResultListItem).conversation?.getAvatar();
+    } else {
+      return TUIStore.getConversationModel((result as ISearchResultListItem).conversation.conversationID)?.getAvatar?.();
+    }
+  }
+  return '';
+};
+
+// Generate the search results and display the content (including highlighting the keyword content matches)
+export const generateSearchResultShowContent = (
+  result: IMessageModel | ISearchResultListItem | IGroupModel | IUserProfile,
+  resultType: string,
+  keywordList: any[],
+  isTypeShow = true,
+): any[] => {
+  if ((result as IGroupModel)?.groupID) {
+    return [
+      { text: 'groupID: ', isHighlight: false },
+      { text: (result as IGroupModel).groupID, isHighlight: true },
+    ];
+  }
+  if ((result as IUserProfile)?.userID) {
+    return [
+      { text: 'userID: ', isHighlight: false },
+      { text: (result as IUserProfile).userID, isHighlight: true },
+    ];
+  }
+  if ((result as ISearchResultListItem)?.conversation || (result as IMessageModel)?.flow) {
+    if ((result as ISearchResultListItem)?.messageCount === 1 || (result as IMessageModel)?.flow) {
+      // Single message summary display result:
+      // Text message, display message content + keyword highlight
+      // File type message, display [file] file name + keyword highlight
+      // Custom type message, display [custom message] description + keyword highlight
+      // Other types of messages, display [message type]
+      const message: IMessageModel = (result as IMessageModel)?.flow
+        ? (result as IMessageModel)
+        : (result as ISearchResultListItem)?.messageList[0];
+      const text
+        = message?.payload?.text || message?.payload?.fileName || message?.payload?.description;
+      const abstract: any[] = [];
+      if (message?.type && isTypeShow && message.type !== TUIChatEngine.TYPES.MSG_TEXT) {
+        abstract.push({
+          text: TUITranslateService.t(`TUISearch.${messageTypeAbstractMap[message.type]}`),
+          isHighlight: false,
+        });
+      }
+      abstract.push(...generateMessageContentHighlight(text, keywordList));
+      return abstract;
+    } else {
+      return [
+        {
+          text: `${(result as ISearchResultListItem)?.messageCount}${TUITranslateService.t(
+            'TUISearch.条相关',
+          )}${TUITranslateService.t(
+            `TUISearch.${resultType === 'allMessage' ? '结果' : searchMessageTypeList[resultType]?.label
+            }`,
+          )}`,
+          isHighlight: false,
+        },
+      ];
+    }
+  }
+  return [];
+};
+
+// Parse the search message results [highlight keywords] position
+export const generateMessageContentHighlight = (
+  content: string,
+  keywordList: any[],
+): any[] => {
+  if (!content || !keywordList || !keywordList.length) {
+    return [{ text: content || '', isHighlight: false }];
+  }
+  // Get the start and end positions of all key matches
+  const matches: any[] = [];
+  for (let i = 0; i < keywordList.length; i++) {
+    // Special character translation
+    const substring = keywordList[i]?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(substring, 'gi'); // Global search and ignore case
+    let match;
+
+    while ((match = regex.exec(content)) !== null) {
+      const start: number = match.index;
+      const end: number = match.index + match[0].length - 1;
+      matches.push([start, end]);
+    }
+  }
+  // Merge repeated range results and arrange them in order of smallest arrival, for example, [[1,3],[2,4]] is merged into [[1,4]]
+  const mergedRanges = [matches[0]];
+  if (matches.length > 1) {
+    matches.sort((a: any[], b: any[]) => a[0] - b[0]);
+    // const mergedRanges = [matches[0]];
+    for (let i = 1; i < matches.length; i++) {
+      const currentRange = matches[i];
+      const lastMergedRange = mergedRanges[mergedRanges.length - 1];
+      // currentRange[0] - 1 is to handle the special case where [[1,2],[3,4]] can be merged into [[1,4]]
+      if (currentRange[0] - 1 <= lastMergedRange[1]) {
+        lastMergedRange[1] = Math.max(lastMergedRange[1], currentRange[1]);
+      } else {
+        mergedRanges.push(currentRange);
+      }
+    }
+  }
+  if (!mergedRanges[0]) {
+    return [{ text: content, isHighlight: false }];
+  }
+  // Split the original content string according to the highlight range and add highlight related identification fields
+  const contentArray: any[] = [];
+  let start = 0;
+  for (let i = 0; i < mergedRanges.length; i++) {
+    const str1 = content.substring(start, mergedRanges[i][0]);
+    str1 && contentArray.push({ text: str1, isHighlight: false });
+    const str2 = content.substring(mergedRanges[i][0], mergedRanges[i][1] + 1);
+    str2 && contentArray.push({ text: str2, isHighlight: true });
+    start = mergedRanges[i][1] + 1;
+  }
+  // Add the last string
+  const lastStr = content.substring(start);
+  lastStr && contentArray.push({ text: lastStr, isHighlight: false });
+  return contentArray;
+};
+
+// calculate timestamp
+export const generateSearchResultTime = (timestamp: number): string => {
+  const todayZero = new Date().setHours(0, 0, 0, 0);
+  const thisYear = new Date(new Date().getFullYear(), 0, 1, 0, 0, 0, 0).getTime();
+  const target = new Date(timestamp);
+
+  const oneDay = 24 * 60 * 60 * 1000;
+  const oneWeek = 7 * oneDay;
+  const diff = todayZero - target.getTime();
+
+  function formatNum(num: number): string {
+    return num < 10 ? '0' + num : num.toString();
+  }
+
+  if (diff <= 0) {
+    // today, only display hour:minute
+    return `${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
+  } else if (diff <= oneDay) {
+    // yesterday, display yesterday:hour:minute
+    return `${TUITranslateService.t('time.昨天')} ${formatNum(target.getHours())}:${formatNum(
+      target.getMinutes(),
+    )}`;
+  } else if (diff <= oneWeek - oneDay) {
+    // Within a week, display weekday hour:minute
+    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+    const weekday = weekdays[target.getDay()];
+    return `${TUITranslateService.t('time.' + weekday)} ${formatNum(target.getHours())}:${formatNum(
+      target.getMinutes(),
+    )}`;
+  } else if (target.getTime() >= thisYear) {
+    // Over a week, within this year, display mouth/day hour:minute
+    return `${target.getMonth() + 1}/${target.getDate()} ${formatNum(
+      target.getHours(),
+    )}:${formatNum(target.getMinutes())}`;
+  } else {
+    // Not within this year, display year/mouth/day hour:minute
+    return `${target.getFullYear()}/${target.getMonth() + 1}/${target.getDate()} ${formatNum(
+      target.getHours(),
+    )}:${formatNum(target.getMinutes())}`;
+  }
+};
+
+// Calculated date functions
+export const generateSearchResultYMD = (timestamp: number): string => {
+  const date = new Date(timestamp * 1000); // Convert timestamp to milliseconds
+  const year = date.getFullYear();
+  const month = ('0' + (date.getMonth() + 1)).slice(-2);
+  const day = ('0' + date.getDate()).slice(-2);
+
+  return `${year}-${month}-${day}`; // Returns a string in year-month-day format
+};
+
+export const debounce = <F extends (...args: any[]) => void>(func: F, waitFor: number) => {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+
+  const debounced = (...args: Parameters<F>) => {
+    if (timeout !== null) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+    timeout = setTimeout(() => func(...args), waitFor);
+  };
+
+  return debounced as (...args: Parameters<F>) => ReturnType<F>;
+};
diff --git a/txim/src/TUIKit/components/common/Avatar/index.vue b/txim/src/TUIKit/components/common/Avatar/index.vue
new file mode 100644
index 00000000..1bd894b5
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Avatar/index.vue
@@ -0,0 +1,147 @@
+<template>
+  <div
+    class="avatar-container"
+    :style="{
+      width: avatarSize,
+      height: avatarSize,
+      borderRadius: avatarBorderRadius,
+    }"
+  >
+    <template v-if="isUniFrameWork">
+      <image
+        v-if="!loadErrorInUniapp"
+        class="avatar-image"
+        :src="avatarImageUrl || defaultAvatarUrl"
+        @load="avatarLoadSuccess"
+        @error="avatarLoadFailed"
+      />
+      <image
+        v-else
+        class="avatar-image"
+        :src="defaultAvatarUrl"
+        @load="avatarLoadSuccess"
+        @error="avatarLoadFailed"
+      />
+    </template>
+    <img
+      v-else
+      class="avatar-image"
+      :src="avatarImageUrl || defaultAvatarUrl"
+      @load="avatarLoadSuccess"
+      @error="avatarLoadFailed"
+    >
+    <div
+      v-if="useAvatarSkeletonAnimation && !isImgLoaded"
+      :class="{
+        placeholder: true,
+        hidden: isImgLoaded,
+        'skeleton-animation': useAvatarSkeletonAnimation
+      }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs } from '../../../adapter-vue';
+import { isUniFrameWork } from '../../../utils/env';
+
+interface IProps {
+  url: string;
+  size?: string;
+  borderRadius?: string;
+  useSkeletonAnimation?: boolean;
+}
+
+interface IEmits {
+  (key: 'onLoad', e: Event): void;
+  (key: 'onError', e: Event): void;
+}
+
+const defaultAvatarUrl = ref('https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png');
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  // uniapp vue2 does not support constants in defineProps
+  url: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png',
+  size: '36px',
+  borderRadius: '5px',
+  useSkeletonAnimation: false,
+});
+
+const {
+  size: avatarSize,
+  url: avatarImageUrl,
+  borderRadius: avatarBorderRadius,
+  useSkeletonAnimation: useAvatarSkeletonAnimation,
+} = toRefs(props);
+
+let reloadAvatarTime = 0;
+const isImgLoaded = ref<boolean>(false);
+const loadErrorInUniapp = ref<boolean>(false);
+
+function avatarLoadSuccess(e: Event) {
+  isImgLoaded.value = true;
+  emits('onLoad', e);
+}
+
+function avatarLoadFailed(e: Event) {
+  reloadAvatarTime += 1;
+  if (reloadAvatarTime > 3) {
+    return;
+  }
+  if (isUniFrameWork) {
+    loadErrorInUniapp.value = true;
+  } else {
+    (e.currentTarget as HTMLImageElement).src = defaultAvatarUrl.value;
+  }
+  emits('onError', e);
+}
+</script>
+
+<style scoped lang="scss">
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.avatar-container {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  flex: 0 0 auto;
+
+  .placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #ececec;
+    transition:
+      opacity 0.3s,
+      background-color 0.1s ease-out;
+
+    &.skeleton-animation {
+      animation: breath 2s linear 0.3s infinite;
+    }
+
+    &.hidden {
+      opacity: 0;
+    }
+  }
+
+  .avatar-image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@keyframes breath {
+  50% {
+    /* stylelint-disable-next-line scss/no-global-function-names */
+    background-color: darken(#ececec, 10%);
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/BottomPopup/index.ts b/txim/src/TUIKit/components/common/BottomPopup/index.ts
new file mode 100644
index 00000000..711089b9
--- /dev/null
+++ b/txim/src/TUIKit/components/common/BottomPopup/index.ts
@@ -0,0 +1,3 @@
+import BottomPopup from './index.vue';
+
+export default BottomPopup;
diff --git a/txim/src/TUIKit/components/common/BottomPopup/index.vue b/txim/src/TUIKit/components/common/BottomPopup/index.vue
new file mode 100644
index 00000000..34392e91
--- /dev/null
+++ b/txim/src/TUIKit/components/common/BottomPopup/index.vue
@@ -0,0 +1,159 @@
+<!--
+  移动端 底部弹出对话框 组件
+  - pc 端，仅展示【插槽】内容，无弹出对话框，无对话框相关 header footer
+  - mobile 端，底部弹出对话框，支持 对话框相关 header footer 定制展示，详情请参见参数列表
+-->
+<template>
+  <div v-if="props.show">
+    <div
+      v-if="!isPC"
+      :class="[
+        'bottom-popup',
+        !isPC && 'bottom-popup-h5',
+        !isPC && props.modal && 'bottom-popup-modal',
+        isUniFrameWork && 'bottom-popup-uni',
+      ]"
+      @click="closeBottomPopup"
+    >
+      <div
+        ref="dialogRef"
+        :class="['bottom-popup-main', !isPC && 'bottom-popup-h5-main']"
+        :style="{
+          height: props.height,
+          borderTopLeftRadius: props.borderRadius,
+          borderTopRightRadius: props.borderRadius,
+        }"
+        @click.stop
+      >
+        <div
+          v-if="title || showHeaderCloseButton"
+          class="header"
+        >
+          <div
+            v-if="title"
+            class="header-title"
+          >
+            {{ title }}
+          </div>
+          <div
+            v-if="showHeaderCloseButton"
+            class="header-close"
+            @click="closeBottomPopup"
+          >
+            {{ TUITranslateService.t("关闭") }}
+          </div>
+        </div>
+        <slot />
+        <div
+          v-if="showFooterSubmitButton"
+          class="footer"
+        >
+          <div
+            class="footer-submit"
+            @click="submit"
+          >
+            {{ submitButtonContent }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot v-else />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch, nextTick } from '../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { outsideClick } from '@tencentcloud/universal-api';
+import { isPC, isH5, isUniFrameWork } from '../../../utils/env';
+
+const props = defineProps({
+  // Whether to display the bottom pop-up dialog box
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  // Whether a mask layer is required, the default is true
+  modal: {
+    type: Boolean,
+    default: true,
+  },
+  // Popup box content area height (excluding mask), default is fit-content
+  height: {
+    type: String,
+    default: 'fit-content',
+  },
+  // Whether the pop-up dialog box can be closed by clicking outside, the default is true
+  // uniapp only supports closing the pop-up dialog box by clicking the mask
+  closeByClickOutside: {
+    type: Boolean,
+    default: true,
+  },
+  // The rounded angle of the top border corners is 0px by default, i.e. right angle by default
+  borderRadius: {
+    type: String,
+    default: '0px',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  // Whether to display the top close button, not displayed by default
+  showHeaderCloseButton: {
+    type: Boolean,
+    default: false,
+  },
+  // Whether to display the submit button at the bottom, not displayed by default
+  showFooterSubmitButton: {
+    type: Boolean,
+    default: false,
+  },
+  // Bottom submit button text, only valid when showFooterSubmitButton is true
+  submitButtonContent: {
+    type: String,
+    default: () => TUITranslateService.t('确定'),
+  },
+});
+
+const emits = defineEmits(['onOpen', 'onClose', 'onSubmit']);
+const dialogRef = ref();
+
+watch(
+  () => props.show,
+  (newVal: boolean, oldVal: boolean) => {
+    if (newVal === oldVal) {
+      return;
+    }
+    switch (newVal) {
+      case true:
+        emits('onOpen', dialogRef);
+        nextTick(() => {
+          // Effective under web h5
+          if (isH5 && !isUniFrameWork) {
+            if (props.closeByClickOutside) {
+              outsideClick.listen({
+                domRefs: dialogRef.value,
+                handler: closeBottomPopup,
+              });
+            }
+          }
+        });
+        break;
+      case false:
+        emits('onClose', dialogRef);
+        break;
+    }
+  },
+);
+
+const closeBottomPopup = () => {
+  if (isUniFrameWork || isH5) {
+    emits('onClose', dialogRef);
+  }
+};
+
+const submit = () => {
+  emits('onSubmit');
+  closeBottomPopup();
+};
+</script>
+<style scoped lang="scss" src="./style/index.scss"></style>
diff --git a/txim/src/TUIKit/components/common/BottomPopup/style/h5.scss b/txim/src/TUIKit/components/common/BottomPopup/style/h5.scss
new file mode 100644
index 00000000..f95e7112
--- /dev/null
+++ b/txim/src/TUIKit/components/common/BottomPopup/style/h5.scss
@@ -0,0 +1,60 @@
+.bottom-popup-h5 {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: stretch;
+  margin: 0;
+  padding: 0;
+  z-index: 10;
+  border-radius: 5px 5px 0 0;
+
+  &-main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+    height: fit-content;
+    background-color: #fff;
+
+    .header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding: 20px;
+      font-size: 16px;
+
+      .header-close {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: #006eff;
+        font-size: 18px;
+      }
+    }
+
+    .footer {
+      padding: 20px;
+
+      .footer-submit {
+        color: #fff;
+        padding: 12px 0;
+        width: 100%;
+        background: #006eff;
+        text-align: center;
+        border-radius: 5px;
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+.bottom-popup-uni {
+  padding-bottom: var(--window-bottom);
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/txim/src/TUIKit/components/common/BottomPopup/style/index.scss b/txim/src/TUIKit/components/common/BottomPopup/style/index.scss
new file mode 100644
index 00000000..6a434167
--- /dev/null
+++ b/txim/src/TUIKit/components/common/BottomPopup/style/index.scss
@@ -0,0 +1,3 @@
+@import "../../../../assets/styles/common";
+@import "./h5";
+@import "./modal";
diff --git a/txim/src/TUIKit/components/common/BottomPopup/style/modal.scss b/txim/src/TUIKit/components/common/BottomPopup/style/modal.scss
new file mode 100644
index 00000000..69cb3b91
--- /dev/null
+++ b/txim/src/TUIKit/components/common/BottomPopup/style/modal.scss
@@ -0,0 +1,3 @@
+.bottom-popup-modal {
+  background: rgba(0, 0, 0, 0.5);
+}
diff --git a/txim/src/TUIKit/components/common/DatePicker/date-picker-panel.vue b/txim/src/TUIKit/components/common/DatePicker/date-picker-panel.vue
new file mode 100644
index 00000000..985e8517
--- /dev/null
+++ b/txim/src/TUIKit/components/common/DatePicker/date-picker-panel.vue
@@ -0,0 +1,308 @@
+<template>
+  <div
+    :class="[n('')]"
+    @mouseup.stop
+  >
+    <div :class="[n('body')]">
+      <div :class="[n('body-header')]">
+        <div :class="[n('body-header-prev')]">
+          <div
+            v-if="canYearLess"
+            :class="[n('icon')]"
+            @click="change('year', -1)"
+          >
+            <Icon
+              :file="dLeftArrowIcon"
+              :width="'12px'"
+              :height="'12px'"
+            />
+          </div>
+          <div
+            v-if="canMonthLess"
+            :class="[n('icon')]"
+            @click="change('month', -1)"
+          >
+            <Icon
+              :file="leftArrowIcon"
+              :width="'10px'"
+              :height="'10px'"
+            />
+          </div>
+        </div>
+        <div :class="[n('body-header-label')]">
+          <div :class="[n('body-header-label-item')]">
+            {{ year }}
+          </div>
+          <div :class="[n('body-header-label-item')]">
+            {{ TUITranslateService.t(`time.${month}`) }}
+          </div>
+        </div>
+        <div :class="[n('body-header-next')]">
+          <div
+            v-if="canMonthMore"
+            :class="[n('icon')]"
+            @click="change('month', 1)"
+          >
+            <Icon
+              :file="rightArrowIcon"
+              :width="'10px'"
+              :height="'10px'"
+            />
+          </div>
+          <div
+            v-if="canYearMore"
+            :class="[n('icon')]"
+            @click="change('year', 1)"
+          >
+            <Icon
+              :file="dRightArrowIcon"
+              :width="'12px'"
+              :height="'12px'"
+            />
+          </div>
+        </div>
+      </div>
+      <div :class="[n('body-content')]">
+        <DateTable
+          :type="props.type"
+          :date="props.date"
+          :startDate="props.startDate"
+          :endDate="props.endDate"
+          :currentPanelDate="currentPanelDate"
+          @pick="handlePick"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, onBeforeMount } from '../../../adapter-vue';
+import dayjs, { Dayjs, ManipulateType } from 'dayjs';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { DateCell } from './date-picker';
+import DateTable from './date-table.vue';
+import Icon from '../Icon.vue';
+import leftArrowIcon from '../../../assets/icon/left-arrow.svg';
+import rightArrowIcon from '../../../assets/icon/right-arrow.svg';
+import dLeftArrowIcon from '../../../assets/icon/d-left-arrow.svg';
+import dRightArrowIcon from '../../../assets/icon/d-right-arrow.svg';
+import { isPC } from '../../../utils/env';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'range', // "single"/"range"
+  },
+  // Unique attribute when type is single
+  date: {
+    type: Dayjs,
+    default: () => dayjs(),
+  },
+  // Unique attribute when type is range
+  startDate: {
+    type: Dayjs,
+    default: null,
+  },
+  endDate: {
+    type: Dayjs,
+    default: null,
+  },
+  rangeType: {
+    type: String,
+    default: '', // "left"/"right"
+  },
+  currentOtherPanelValue: {
+    type: Dayjs,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['pick', 'change']);
+const n = (className: string) => {
+  return className
+    ? [
+        'tui-date-picker-panel-' + className,
+        !isPC && 'tui-date-picker-panel-h5-' + className,
+      ]
+    : ['tui-date-picker-panel', !isPC && 'tui-date-picker-panel-h5'];
+};
+
+const currentPanelDate = ref<typeof Dayjs>();
+const year = computed(() => currentPanelDate.value?.get('year'));
+const month = computed(() => currentPanelDate.value?.format('MMMM'));
+const canYearMore = computed(() => {
+  const prevYearNumber = props.currentOtherPanelValue?.year() - 1;
+  const prevYear = props.currentOtherPanelValue?.year(prevYearNumber);
+  return (
+    props.rangeType === 'right'
+    || currentPanelDate.value?.isBefore(prevYear, 'year')
+  );
+});
+const canMonthMore = computed(() => {
+  const prevMonthNumber = props.currentOtherPanelValue?.month() - 1;
+  const prevMonth = props.currentOtherPanelValue?.month(prevMonthNumber);
+  return (
+    props.rangeType === 'right'
+    || currentPanelDate.value?.isBefore(prevMonth, 'month')
+  );
+});
+const canYearLess = computed(() => {
+  const nextYearNumber = props.currentOtherPanelValue?.year() + 1;
+  const nextYear = props.currentOtherPanelValue?.year(nextYearNumber);
+  return (
+    props.rangeType === 'left'
+    || currentPanelDate.value?.isAfter(nextYear, 'year')
+  );
+});
+const canMonthLess = computed(() => {
+  const nextMonthNumber = props.currentOtherPanelValue?.month() + 1;
+  const nextMonth = props.currentOtherPanelValue?.month(nextMonthNumber);
+  return (
+    props.rangeType === 'left'
+    || currentPanelDate.value?.isAfter(nextMonth, 'month')
+  );
+});
+
+// Range judgment:
+// Premise: If there is only one, it must be the start.
+// If there is a startDate:
+// When the left side of the interface first displays the month/year of the startDate.
+// If there is both a startDate and an endDate:
+// If they are in the same month:
+// Both are displayed on the left, and the next month is displayed on the right.
+// If they are not in the same month:
+// The start is displayed on the left, and the end is displayed on the right.
+// That is, to determine whether the start and end are in the same month.
+// If neither is present, the left displays the current month, and the right displays the next month.
+const handleSingleDate = (): { date: typeof Dayjs } => {
+  if (props.date && dayjs(props.date)?.isValid()) {
+    // props.date year and month
+    return {
+      date: props?.date,
+    };
+  }
+  // nowadays year and month
+  return {
+    date: dayjs(),
+  };
+};
+
+const handleRangeDate = (): { date: typeof Dayjs } => {
+  switch (props.rangeType) {
+    case 'left':
+      if (props.startDate && dayjs.isDayjs(props.startDate)) {
+        return {
+          date: props?.startDate,
+        };
+      } else {
+        return {
+          date: dayjs(),
+        };
+      }
+    case 'right':
+      if (
+        props.endDate
+        && dayjs.isDayjs(props.endDate)
+        && props?.endDate?.isAfter(props.startDate, 'month')
+      ) {
+        return {
+          date: props?.endDate,
+        };
+      } else {
+        const _month = (props.startDate || dayjs()).month();
+        return {
+          date: (props.startDate || dayjs()).month(_month + 1),
+        };
+      }
+    default:
+      return {
+        date: dayjs(),
+      };
+  }
+};
+
+function handlePick(cell: DateCell) {
+  emit('pick', cell);
+}
+
+function change(type: typeof ManipulateType, num: number) {
+  currentPanelDate.value = dayjs(currentPanelDate.value.toDate()).add(
+    num,
+    type,
+  );
+  emit('change', currentPanelDate.value);
+}
+
+onBeforeMount(() => {
+  switch (props.type) {
+    case 'single':
+      currentPanelDate.value = handleSingleDate().date;
+      emit('change', currentPanelDate.value);
+      break;
+    case 'range':
+      currentPanelDate.value = handleRangeDate().date;
+      emit('change', currentPanelDate.value);
+      break;
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.tui-date-picker-panel {
+  width: 200px;
+  margin: 5px;
+
+  &-body {
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+
+    &-header {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      height: 30px;
+      padding: 0 5px;
+      box-sizing: border-box;
+
+      &-prev {
+        display: flex;
+        flex-direction: row;
+        cursor: pointer;
+        width: 24px;
+      }
+
+      &-label {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        user-select: none;
+        color: #666;
+
+        &-item {
+          padding: 0 5px;
+          color: #666;
+        }
+      }
+
+      &-next {
+        display: flex;
+        flex-direction: row;
+        cursor: pointer;
+        width: 24px;
+      }
+    }
+  }
+
+  &-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 12px;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/DatePicker/date-picker.ts b/txim/src/TUIKit/components/common/DatePicker/date-picker.ts
new file mode 100644
index 00000000..7755bc98
--- /dev/null
+++ b/txim/src/TUIKit/components/common/DatePicker/date-picker.ts
@@ -0,0 +1,19 @@
+import { Dayjs } from 'dayjs';
+
+export type DateCellType =
+  | 'normal'
+  | 'today'
+  | 'week'
+  | 'next-month'
+  | 'prev-month';
+export interface DateCell {
+  text?: number;
+  disabled?: boolean;
+  isSelected?: boolean;
+  isSelectedStart?: boolean;
+  isSelectedEnd?: boolean;
+  isInRange?: boolean;
+  isCurrent?: boolean;
+  date: typeof Dayjs;
+  type?: DateCellType;
+}
diff --git a/txim/src/TUIKit/components/common/DatePicker/date-table.vue b/txim/src/TUIKit/components/common/DatePicker/date-table.vue
new file mode 100644
index 00000000..e9a5831e
--- /dev/null
+++ b/txim/src/TUIKit/components/common/DatePicker/date-table.vue
@@ -0,0 +1,321 @@
+<template>
+  <table
+    :class="['tui-date-table', !isPC && 'tui-date-table-h5']"
+    cellspacing="0"
+    cellpadding="0"
+    role="grid"
+  >
+    <tbody class="tui-date-table-body">
+      <tr class="tui-date-table-body-weeks">
+        <th
+          v-for="item in WEEKS"
+          :key="item"
+          class="tui-date-table-body-weeks-item"
+          :aria-label="item + ''"
+          scope="col"
+        >
+          {{ TUITranslateService.t(`time.${item}`) }}
+        </th>
+      </tr>
+      <tr
+        v-for="(row, rowKey) in rows"
+        :key="rowKey"
+        class="tui-date-table-body-days"
+      >
+        <td
+          v-for="(col, colKey) in row"
+          :key="colKey"
+          :class="['tui-date-table-body-days-item', col.type]"
+        >
+          <div
+            :class="[
+              'tui-date-table-body-days-item-cell',
+              col.isSelected && 'selected',
+              col.isSelectedStart && 'selected-start',
+              col.isSelectedEnd && 'selected-end',
+              col.isInRange && 'range',
+            ]"
+            @click="handlePick(col)"
+          >
+            <span class="tui-date-table-body-days-item-cell-text">
+              {{ col.text }}
+            </span>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  ref,
+  getCurrentInstance,
+  nextTick,
+  watch,
+} from '../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import dayjs, { Dayjs } from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import { DateCell, DateCellType } from './date-picker';
+import { isPC } from '../../../utils/env';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'range', // "single"/"range"
+  },
+  currentPanelDate: {
+    type: Dayjs,
+    default: () => dayjs(),
+  },
+  // Unique attribute when type is single
+  date: {
+    type: Dayjs,
+    default: null,
+  },
+  // Unique attribute when type is range
+  startDate: {
+    type: Dayjs,
+    default: null,
+  },
+  endDate: {
+    type: Dayjs,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['pick']);
+// vue instance
+const instance = getCurrentInstance();
+
+const tableRows = ref<DateCell[][]>([[], [], [], [], [], []]);
+const currentPanelDateObject = ref<typeof Dayjs>(
+  dayjs(props.currentPanelDate || null),
+);
+const dateObject = ref<typeof Dayjs>(dayjs(props.date || null));
+const startDateObject = ref<typeof Dayjs>(dayjs(props.startDate || null));
+const endDateObject = ref<typeof Dayjs>(dayjs(props.endDate || null));
+
+const WEEKS_CONSTANT = computed(() => {
+  return dayjs.weekdaysShort();
+});
+
+const WEEKS = computed(() =>
+  WEEKS_CONSTANT.value.map((w: string) => w.substring(1)),
+);
+
+const startDateOnTable = computed(() => {
+  const startDayOfMonth = currentPanelDateObject.value?.startOf('month');
+  return startDayOfMonth?.subtract(startDayOfMonth?.day() || 7, 'day');
+});
+
+// Table data
+const rows = computed(() => {
+  const rows_ = tableRows.value;
+  const cols = WEEKS.value.length;
+
+  const startOfMonth = currentPanelDateObject.value?.startOf('month');
+  const startOfMonthDay = startOfMonth?.day() || 7; // day of this month first day
+  const dateCountOfMonth = startOfMonth?.daysInMonth(); // total days of this month
+
+  let count = 1;
+  for (let row = 0; row < tableRows.value.length; row++) {
+    for (let col = 0; col < cols; col++) {
+      const cellDate = startDateOnTable.value?.add(count, 'day');
+      const text = cellDate?.date();
+      // For type === "single", select the entered date
+      // For type === "range", select the entered start and end dates
+      const isSelected
+        = props.type === 'single'
+        && cellDate?.format('YYYY-MM-DD')
+        === dateObject.value?.format('YYYY-MM-DD');
+      const isSelectedStart
+        = props.type === 'range'
+        && cellDate?.format('YYYY-MM-DD')
+        === startDateObject.value?.format('YYYY-MM-DD');
+      const isSelectedEnd
+        = props.type === 'range'
+        && cellDate?.format('YYYY-MM-DD')
+        === endDateObject.value?.format('YYYY-MM-DD');
+      // For type === "range", check if it is within the selected range.
+      const isInRange
+        = cellDate?.isSameOrBefore(endDateObject.value, 'day')
+        && cellDate?.isSameOrAfter(startDateObject.value, 'day');
+      let type: DateCellType = 'normal';
+      if (count < startOfMonthDay) {
+        // Prev month's date
+        type = 'prev-month';
+      } else if (count - startOfMonthDay >= dateCountOfMonth) {
+        // Next month's date
+        type = 'next-month';
+      }
+      rows_[row][col] = {
+        type,
+        date: cellDate,
+        text,
+        isSelected: isSelected || isSelectedStart || isSelectedEnd,
+        isSelectedStart,
+        isSelectedEnd,
+        isInRange,
+      };
+      count++;
+    }
+  }
+  return rows_;
+});
+
+const handlePick = (cell: DateCell) => {
+  if (cell?.type !== 'normal') {
+    return;
+  }
+  emit('pick', cell);
+};
+
+watch(
+  () => [props.currentPanelDate, props.date, props.startDate, props.endDate],
+  () => {
+    currentPanelDateObject.value = dayjs(props.currentPanelDate || null);
+    dateObject.value = dayjs(props.date || null);
+    startDateObject.value = dayjs(props.startDate || null);
+    endDateObject.value = dayjs(props.endDate || null);
+    nextTick(() => {
+      instance?.proxy?.$forceUpdate();
+    });
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+</script>
+
+<style scoped lang="scss">
+/* stylelint-disable selector-class-pattern */
+.tui-date-table {
+  border-spacing: 0;
+  -webkit-border-horizontal-spacing: 0;
+  -webkit-border-vertical-spacing: 0;
+  font-size: 12px;
+  user-select: none;
+  table-layout: fixed;
+  width: 100%;
+  box-sizing: border-box;
+
+  &::after,
+  &::before {
+    box-sizing: border-box;
+  }
+
+  &-body {
+    width: 100%;
+    background-color: #fff;
+
+    &-weeks,
+    &-days {
+      box-sizing: border-box;
+      min-width: 0;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      overflow: hidden;
+    }
+
+    &-weeks {
+      width: 100%;
+
+      &-item {
+        color: #666;
+        font-size: 12px;
+        font-weight: 400px;
+      }
+    }
+
+    &-days {
+      color: #000;
+
+      &-item {
+        &-cell {
+          text-align: center;
+          padding: 2px;
+          margin: 2px 0;
+
+          &-text {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            user-select: none;
+            cursor: pointer;
+            box-sizing: border-box;
+          }
+        }
+
+        .selected {
+          border-radius: 12px;
+
+          .tui-date-table-body-days-item-cell-text {
+            box-sizing: border-box;
+            color: #007aff;
+            border: 1px solid #007aff;
+            background-color: #fff;
+          }
+        }
+
+        .range {
+          background-color: #007aff33;
+        }
+
+        .selected-start {
+          border-radius: 12px 0 0 12px;
+        }
+
+        .selected-end {
+          border-radius: 0 12px 12px 0;
+        }
+
+        .selected-start.selected-end {
+          border-radius: 12px;
+        }
+      }
+
+      .prev-month,
+      .next-month {
+        color: #666;
+        background-color: #fff;
+
+        .range {
+          color: #666;
+          background-color: #fff;
+        }
+
+        .selected {
+          .tui-date-table-body-days-item-cell-text {
+            box-sizing: border-box;
+            color: #666;
+            border: none;
+          }
+        }
+      }
+
+    }
+  }
+}
+
+.tui-date-table-h5 {
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  .tui-date-table-body-days-item-cell-text {
+    cursor: none !important;
+  }
+}
+
+td,
+._td,
+.tui-date-table-body-days-item {
+  flex: 1;
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/DatePicker/index.ts b/txim/src/TUIKit/components/common/DatePicker/index.ts
new file mode 100644
index 00000000..ffedb002
--- /dev/null
+++ b/txim/src/TUIKit/components/common/DatePicker/index.ts
@@ -0,0 +1,2 @@
+import DatePicker from './index.vue';
+export default DatePicker;
diff --git a/txim/src/TUIKit/components/common/DatePicker/index.vue b/txim/src/TUIKit/components/common/DatePicker/index.vue
new file mode 100644
index 00000000..daaae605
--- /dev/null
+++ b/txim/src/TUIKit/components/common/DatePicker/index.vue
@@ -0,0 +1,270 @@
+<template>
+  <div :class="[n([''])]">
+    <div
+      :class="[n(['input']), isDatePanelShow && n(['input-active'])]"
+      @click="setDatePanelDisplay(!isDatePanelShow)"
+    >
+      <slot name="start-icon" />
+      <input
+        v-model="startFormatDate"
+        :placeholder="startPlaceholderVal"
+        :class="[n(['input-start'])]"
+        style="pointer-events: none"
+        type="text"
+        :readonly="true"
+        :disabled="isUniFrameWork"
+        autocomplete="false"
+      >
+      <span v-if="type !== 'single'">-</span>
+      <input
+        v-if="type !== 'single'"
+        v-model="endFormatDate"
+        :placeholder="endPlaceholderVal"
+        :class="[n(['input-end'])]"
+        style="pointer-events: none"
+        type="text"
+        :readonly="true"
+        :disabled="isUniFrameWork"
+        autocomplete="false"
+      >
+      <slot name="end-icon" />
+    </div>
+    <div
+      v-if="isDatePanelShow"
+      :class="[n(['dialog'])]"
+    >
+      <div
+        :class="[
+          n([
+            'dialog-container',
+            'dialog-container-' + rangeTableType,
+            'dialog-container-' + popupPosition,
+          ]),
+        ]"
+      >
+        <DatePickerPanel
+          :type="props.type"
+          rangeType="left"
+          :date="dateValue"
+          :startDate="startValue"
+          :endDate="endValue"
+          :currentOtherPanelValue="rightCurrentPanelValue"
+          @pick="handlePick"
+          @change="handleLeftPanelChange"
+        />
+        <DatePickerPanel
+          v-if="props.type === 'range' && isPC && rangeTableType === 'two'"
+          :type="props.type"
+          rangeType="right"
+          :date="dateValue"
+          :startDate="startValue"
+          :endDate="endValue"
+          :currentOtherPanelValue="leftCurrentPanelValue"
+          @pick="handlePick"
+          @change="handleRightPanelChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed } from '../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+// dayjs extension
+import dayjs, { Dayjs } from 'dayjs';
+import localeData from 'dayjs/plugin/localeData.js';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter.js';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore.js';
+import 'dayjs/locale/zh-cn';
+import DatePickerPanel from './date-picker-panel.vue';
+import { DateCell } from './date-picker';
+import { isPC, isUniFrameWork } from '../../../utils/env';
+
+dayjs.extend(localeData);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+dayjs.locale('zh-cn');
+
+const emit = defineEmits(['pick', 'change']);
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'range', // "single" / "range"
+  },
+  rangeTableType: {
+    type: String,
+    default: 'one', // "one"/ "two"
+  },
+  startPlaceholder: {
+    type: String,
+    default: () => TUITranslateService.t('开始时间'),
+  },
+  endPlaceholder: {
+    type: String,
+    default: () => TUITranslateService.t('开始时间'),
+  },
+  popupPosition: {
+    type: String,
+    default: 'bottom', // "top" / "bottom"
+  },
+  // Default single-select date
+  defaultSingleDate: {
+    type: Dayjs,
+    default: null,
+    required: false,
+  },
+});
+
+const isDatePanelShow = ref<boolean>(false);
+
+const dateValue = ref<typeof Dayjs>(props.type === 'single' ? props?.defaultSingleDate : null);
+const startValue = ref<typeof Dayjs>(props.type === 'single' ? props?.defaultSingleDate : null);
+const endValue = ref<typeof Dayjs>(props.type === 'single' ? props?.defaultSingleDate : null);
+const startFormatDate = computed(() => startValue?.value?.format('YYYY/MM/DD'));
+const endFormatDate = computed(() => endValue?.value?.format('YYYY/MM/DD'));
+const startPlaceholderVal = props.startPlaceholder;
+const endPlaceholderVal = props.endPlaceholder;
+const leftCurrentPanelValue = ref<typeof Dayjs>();
+const rightCurrentPanelValue = ref<typeof Dayjs>();
+
+const setDatePanelDisplay = (show: boolean) => {
+  isDatePanelShow.value = show;
+};
+
+const n = (classNameList: string[]) => {
+  const resultClassList: string[] = [];
+  classNameList.forEach((className: string) => {
+    if (className) {
+      resultClassList.push('tui-date-picker-' + className);
+      !isPC && resultClassList.push('tui-date-picker-h5-' + className);
+    } else {
+      resultClassList.push('tui-date-picker');
+      !isPC && resultClassList.push('tui-date-picker-h5');
+    }
+  });
+  return resultClassList;
+};
+
+const handlePick = (cell: DateCell) => {
+  switch (props.type) {
+    case 'single':
+      startValue.value = cell.date;
+      endValue.value = cell.date;
+      dateValue.value = cell.date;
+      emit('change', cell);
+      emit('pick', dateValue.value);
+      setTimeout(() => {
+        setDatePanelDisplay(false);
+      }, 300);
+      break;
+    case 'range':
+      if (!startValue?.value) {
+        startValue.value = cell.date;
+      } else if (!endValue?.value) {
+        if (startValue?.value?.isSameOrBefore(cell.date, 'day')) {
+          endValue.value = cell.date;
+        } else {
+          endValue.value = startValue.value;
+          startValue.value = cell.date;
+        }
+        emit('pick', {
+          startDate: startValue?.value?.startOf('date'),
+          endDate: endValue?.value?.endOf('date'),
+        });
+        setTimeout(() => {
+          setDatePanelDisplay(false);
+        }, 200);
+      } else {
+        startValue.value = cell.date;
+        endValue.value = null;
+      }
+      emit('change', {
+        startDate: startValue.value,
+        endDate: endValue.value,
+        leftCurrentPanel: leftCurrentPanelValue.value,
+        rightCurrentPanel: leftCurrentPanelValue.value,
+      });
+      break;
+  }
+};
+
+const handleLeftPanelChange = (value: typeof Dayjs) => {
+  leftCurrentPanelValue.value = value;
+  emit('change', {
+    startDate: startValue.value,
+    endDate: endValue.value,
+    leftCurrentPanel: leftCurrentPanelValue.value,
+    rightCurrentPanel: leftCurrentPanelValue.value,
+  });
+};
+const handleRightPanelChange = (value: typeof Dayjs) => {
+  rightCurrentPanelValue.value = value;
+  emit('change', {
+    startDate: startValue.value,
+    endDate: endValue.value,
+    leftCurrentPanel: leftCurrentPanelValue.value,
+    rightCurrentPanel: leftCurrentPanelValue.value,
+  });
+};
+</script>
+<style scoped lang="scss">
+.tui-date-picker {
+  &-input {
+    min-width: 160px;
+    display: flex;
+    flex-direction: row;
+    color: #666;
+    border-radius: 5px;
+    font-size: 12px;
+
+    &-start,
+    &-end {
+      flex: 1;
+      color: #666;
+      height: 17px;
+      border: none;
+      width: 67px;
+      background-color: transparent;
+      font-size: 12px;
+      text-align: center;
+
+      &:focus {
+        border: none;
+        outline: none;
+      }
+
+      &::placeholder {
+        text-align: center;
+      }
+    }
+  }
+
+  &-dialog {
+    position: relative;
+
+    &-container {
+      position: absolute;
+      display: flex;
+      flex-direction: row;
+      padding: 10px;
+      left: 5px;
+      background-color: #fff;
+      box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
+      z-index: 1000;
+
+      &-bottom {
+        left: 5px;
+      }
+
+      &-top {
+        bottom: 30px;
+      }
+
+      &-one {
+        left: -5px;
+      }
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/Dialog/index.ts b/txim/src/TUIKit/components/common/Dialog/index.ts
new file mode 100644
index 00000000..6bfe4220
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Dialog/index.ts
@@ -0,0 +1,3 @@
+import Dialog from './index.vue';
+
+export default Dialog;
diff --git a/txim/src/TUIKit/components/common/Dialog/index.vue b/txim/src/TUIKit/components/common/Dialog/index.vue
new file mode 100644
index 00000000..ce0962a3
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Dialog/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <div
+    v-if="showDialog"
+    class="dialog"
+    :class="[!isPC ? 'dialog-h5' : '', center ? 'center' : '']"
+    @click.stop.prevent="toggleView(clickType.OUTSIDE)"
+  >
+    <main
+      class="dialog-main"
+      :class="[!backgroundDialog ? 'dialog-main-back' : '']"
+      @click.stop.prevent="toggleView(clickType.INSIDE)"
+    >
+      <header
+        v-if="isHeaderShowDialog"
+        class="dialog-main-header"
+      >
+        <h1 class="dialog-main-title">
+          {{ showTitle }}
+        </h1>
+        <i
+          class="icon icon-close"
+          @click="close"
+        />
+      </header>
+      <div
+        class="dialog-main-content"
+        :class="[isUniFrameWork && isH5 ? 'dialog-main-content-uniapp' : '']"
+      >
+        <slot />
+      </div>
+      <footer
+        v-if="isFooterShowDialog"
+        class="dialog-main-footer"
+      >
+        <button
+          class="btn btn-cancel"
+          @click="close"
+        >
+          {{ TUITranslateService.t('component.取消') }}
+        </button>
+        <button
+          class="btn btn-default"
+          @click="submit"
+        >
+          {{ TUITranslateService.t('component.确定') }}
+        </button>
+      </footer>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watchEffect } from '../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { isPC, isH5, isUniFrameWork } from '../../../utils/env';
+const clickType = {
+  OUTSIDE: 'outside',
+  INSIDE: 'inside',
+};
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  isHeaderShow: {
+    type: Boolean,
+    default: true,
+  },
+  isFooterShow: {
+    type: Boolean,
+    default: true,
+  },
+  background: {
+    type: Boolean,
+    default: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  center: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const showDialog = ref(false);
+const isHeaderShowDialog = ref(true);
+const isFooterShowDialog = ref(true);
+const backgroundDialog = ref(true);
+const showTitle = ref('');
+
+watchEffect(() => {
+  showDialog.value = props.show;
+  showTitle.value = props.title;
+  isHeaderShowDialog.value = props.isHeaderShow;
+  isFooterShowDialog.value = props.isFooterShow;
+  backgroundDialog.value = props.background;
+});
+
+const emit = defineEmits(['update:show', 'submit']);
+
+const toggleView = (type: string) => {
+  if (type === clickType.OUTSIDE) {
+    close();
+  }
+};
+
+const close = () => {
+  showDialog.value = !showDialog.value;
+  emit('update:show', showDialog.value);
+};
+
+const submit = () => {
+  emit('submit');
+  close();
+};
+</script>
+<style lang="scss" scoped src="./style/dialog.scss"></style>
diff --git a/txim/src/TUIKit/components/common/Dialog/style/color.scss b/txim/src/TUIKit/components/common/Dialog/style/color.scss
new file mode 100644
index 00000000..2130fbd4
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Dialog/style/color.scss
@@ -0,0 +1,43 @@
+.dialog {
+  background: rgba(0, 0, 0, 0.6);
+
+  &-main {
+    background: #FFF;
+
+    &-header {
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-title {
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-back {
+      background: none;
+    }
+
+    &-content {
+      font-weight: 400;
+      color: #333;
+    }
+  }
+}
+
+.btn {
+  font-weight: 400;
+  color: #FFF;
+  letter-spacing: 0;
+
+  &-cancel {
+    border: 1px solid #ddd;
+    color: #666;
+  }
+
+  &-default {
+    background: #006EFF;
+    border: 1px solid #006EFF;
+  }
+}
diff --git a/txim/src/TUIKit/components/common/Dialog/style/dialog.scss b/txim/src/TUIKit/components/common/Dialog/style/dialog.scss
new file mode 100644
index 00000000..61335a4c
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Dialog/style/dialog.scss
@@ -0,0 +1,4 @@
+@import '../../../../assets/styles/common';
+@import "./color";
+@import "./web";
+@import "./h5";
diff --git a/txim/src/TUIKit/components/common/Dialog/style/h5.scss b/txim/src/TUIKit/components/common/Dialog/style/h5.scss
new file mode 100644
index 00000000..2e034f9f
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Dialog/style/h5.scss
@@ -0,0 +1,56 @@
+.dialog-h5 {
+  height: 100%;
+  top: 0;
+  align-items: inherit;
+
+  .dialog {
+    &-main {
+      border-radius: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      width: 100%;
+      min-height: 80px;
+      min-width: 120px;
+
+      &-content {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+        overflow: hidden;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 0;
+
+        &-uniapp {
+          padding: 40px 0;
+        }
+      }
+
+      &-footer {
+        border-top: 1px solid #DDD;
+
+        .btn {
+          flex: 1;
+          margin: 0;
+          background: none;
+          border-right: 1px solid #DDD;
+
+          &-default {
+            color: #FF584C;
+            border: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.center {
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
diff --git a/txim/src/TUIKit/components/common/Dialog/style/web.scss b/txim/src/TUIKit/components/common/Dialog/style/web.scss
new file mode 100644
index 00000000..2e283a78
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Dialog/style/web.scss
@@ -0,0 +1,61 @@
+.dialog {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-main {
+    min-width: 368px;
+    border-radius: 10px;
+    padding: 20px 30px;
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 16px;
+      line-height: 30px;
+    }
+
+    &-title {
+      font-size: 16px;
+      line-height: 30px;
+    }
+
+    &-content {
+      font-size: 14px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+
+    &-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.btn {
+  padding: 8px 20px;
+  margin: 0 6px;
+  border-radius: 4px;
+  border: none;
+  font-size: 14px;
+  text-align: center;
+  line-height: 20px;
+
+  &:disabled {
+    opacity: 0.3;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
diff --git a/txim/src/TUIKit/components/common/Drag/index.ts b/txim/src/TUIKit/components/common/Drag/index.ts
new file mode 100644
index 00000000..d6b094bc
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Drag/index.ts
@@ -0,0 +1,2 @@
+import Drag from './index.vue';
+export default Drag;
diff --git a/txim/src/TUIKit/components/common/Drag/index.vue b/txim/src/TUIKit/components/common/Drag/index.vue
new file mode 100644
index 00000000..e116739b
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Drag/index.vue
@@ -0,0 +1,121 @@
+<!-- Drag and drop component, only applicable to web&h5 -->
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  reactive,
+  onMounted,
+  watch,
+  watchEffect,
+  getCurrentInstance,
+  nextTick,
+} from '../../../adapter-vue';
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: () => false,
+  },
+  domClassName: {
+    type: String,
+    default: '',
+  },
+});
+const data = reactive({
+  show: false,
+  domClassName: '',
+  startPosition: {
+    left: '',
+    top: '',
+    cssText: '',
+  },
+});
+
+const ctx = getCurrentInstance();
+
+watchEffect(() => {
+  data.show = props.show;
+  data.domClassName = props.domClassName;
+});
+
+onMounted(() => {
+  let isDrag = false;
+  let dragDom = document?.getElementsByClassName(
+    props.domClassName,
+  )[0] as HTMLElement;
+  watch(
+    () => data.show,
+    (newVal: any, oldVal: any) => {
+      data.show = newVal;
+      if (newVal === oldVal) return;
+      if (data.show === true) {
+        nextTick(() => {
+          dragDom = document?.getElementsByClassName(
+            props.domClassName,
+          )[0] as HTMLElement;
+          if (!dragDom) return;
+          dragDom.style.left = data.startPosition?.left;
+          dragDom.style.top = data.startPosition?.top;
+          dragDom.style.cssText = data.startPosition?.cssText;
+          dragDom.addEventListener('mousedown', mouseDown);
+        });
+      }
+    },
+  );
+  const mouseDown = (e: MouseEvent) => {
+    isDrag = true;
+    const X = e.clientX - dragDom.offsetLeft;
+    const Y = e.clientY - dragDom.offsetTop;
+    const move = (e: MouseEvent) => {
+      e.preventDefault();
+      if (isDrag) {
+        dragDom.style.left = `${e.clientX - X}px`;
+        dragDom.style.top = `${e.clientY - Y}px`;
+      }
+    };
+    document.addEventListener('mousemove', throttle(move, 20), false);
+    document.addEventListener('mouseup', () => {
+      isDrag = false;
+      document.removeEventListener('mousemove', move);
+    });
+  };
+});
+
+function throttle(fn: { (e: MouseEvent): void; apply?: any }, timer: number) {
+  let initTime = 0;
+  return function (...args: any) {
+    const nowTime = +new Date();
+    if (nowTime - initTime > timer) {
+      initTime = nowTime;
+      fn.apply(ctx, args);
+    }
+  };
+}
+
+const positionReset = () => {
+  const dragDom = document?.getElementsByClassName(
+    props.domClassName,
+  )[0] as HTMLElement;
+  data.startPosition = {
+    left: '',
+    top: '',
+    cssText: '',
+  };
+  if (!dragDom) {
+    return;
+  }
+  dragDom.style.left = data.startPosition?.left;
+  dragDom.style.top = data.startPosition?.top;
+  dragDom.style.cssText = data.startPosition?.cssText;
+};
+
+defineExpose({
+  positionReset,
+});
+</script>
+<style lang="scss" scoped>
+@import "../../../assets/styles/common";
+</style>
diff --git a/txim/src/TUIKit/components/common/Drawer/index.vue b/txim/src/TUIKit/components/common/Drawer/index.vue
new file mode 100644
index 00000000..657c08b7
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Drawer/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <Overlay
+    ref="overlayDomInstanceRef"
+    :visible="props.visible"
+    :useMask="props.useMask"
+    :maskColor="props.overlayColor"
+    :isFullScreen="props.isFullScreen"
+    @onOverlayClick="onOverlayClick"
+  >
+    <div
+      v-if="isDrawerShow"
+      ref="drawerDomRef"
+      :class="{
+        'drawer': true,
+        'origin-bottom': props.popDirection === 'bottom',
+        'origin-right': props.popDirection === 'right',
+        'slide-bottom': visible && props.popDirection === 'bottom',
+        'slide-right': visible && props.popDirection === 'right',
+      }"
+      :style="{
+        minHeight: styles.minHeight,
+        maxHeight: styles.maxHeight,
+        borderRadius: styles.borderRadius,
+        boxShadow: styles.boxShadow,
+        width: styles.width,
+      }"
+    >
+      <div class="drawer-container">
+        <slot />
+      </div>
+    </div>
+  </Overlay>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from '../../../adapter-vue';
+import Overlay from '../../common/Overlay/index.vue';
+
+interface IProps {
+  visible: boolean;
+  popDirection: 'top' | 'right' | 'bottom' | 'left';
+  useMask?: boolean;
+  isFullScreen?: boolean | undefined;
+  overlayColor?: string | undefined;
+  drawerStyle?: {
+    bottom?: Record<string, any> | undefined;
+    right?: Record<string, any> | undefined;
+    left?: Record<string, any> | undefined;
+    top?: Record<string, any> | undefined;
+  };
+}
+
+interface IEmits {
+  (e: 'onOverlayClick', event: Event): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  visible: true,
+  useMask: true,
+  isFullScreen: true,
+  popDirection: 'bottom',
+  drawerStyle: () => ({}),
+});
+
+const drawerDomRef = ref<HTMLElement>();
+const overlayDomInstanceRef = ref<InstanceType<typeof Overlay>>();
+const isDrawerShow = ref<boolean>(false);
+
+const styles = ref(props.drawerStyle[props.popDirection] || {});
+
+watch(() => props.visible, (visible: boolean) => {
+  if (visible) {
+    isDrawerShow.value = true;
+  } else {
+    setTimeout(() => {
+      isDrawerShow.value = false;
+    }, 150);
+  }
+}, {
+  immediate: true,
+});
+
+function onOverlayClick(e: Event) {
+  emits('onOverlayClick', e);
+}
+
+defineExpose({
+  drawerDomRef,
+  overlayDomRef: overlayDomInstanceRef.value?.overlayDomRef,
+});
+</script>
+
+<style scoped lang="scss">
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.drawer {
+  position: absolute;
+  z-index: 1;
+  background-color: #fff;
+  overflow: hidden;
+  transition: transform 0.15s ease-out;
+
+  .drawer-container {
+    background-color: #fff;
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.origin-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(100%);
+  animation: slide-from-bottom 0.15s ease-out;
+}
+
+.origin-right {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  transform: translateX(100%);
+  animation: slide-from-right 0.15s ease-out;
+}
+
+.slide-bottom {
+  transform: translateY(0);
+}
+
+.slide-right {
+  transform: translateX(0);
+}
+
+@keyframes slide-from-bottom {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-from-right {
+  0% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/FetchMore/index.vue b/txim/src/TUIKit/components/common/FetchMore/index.vue
new file mode 100644
index 00000000..df4ff1d4
--- /dev/null
+++ b/txim/src/TUIKit/components/common/FetchMore/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <div
+    ref="selfDomRef"
+    class="fetch-more-block"
+  >
+    <template v-if="props.isFetching">
+      <slot name="fetching">
+        <div>{{ TUITranslateService.t("TUIChat.正在加载") }}</div>
+      </slot>
+    </template>
+    <template v-else>
+      <slot name="fetchEnd">
+        <div>{{ TUITranslateService.t("TUIChat.加载结束") }}</div>
+      </slot>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch, getCurrentInstance, withDefaults } from '../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { isUniFrameWork } from '../../../utils/env';
+
+interface IProps {
+  isFetching: boolean;
+  isTerminateObserve?: boolean;
+}
+
+interface IEmits {
+  (e: 'onExposed'): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  isFetching: false,
+  isTerminateObserve: false,
+});
+
+let observer: unknown = null;
+const selfDomRef = ref();
+const thisInstance = getCurrentInstance()?.proxy || getCurrentInstance();
+
+onMounted(() => {
+  if (props.isTerminateObserve) {
+    return;
+  }
+  if (!isUniFrameWork) {
+    observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        emits('onExposed');
+      }
+    }, {
+      threshold: 1.0,
+    });
+    if (selfDomRef.value) {
+      (observer as IntersectionObserver).observe(selfDomRef.value);
+    }
+  } else {
+    observer = uni.createIntersectionObserver(thisInstance).relativeToViewport();
+    (observer as any).observe('.fetch-more-block', () => {
+      emits('onExposed');
+    });
+  }
+});
+
+onUnmounted(() => {
+  if (observer) {
+    (observer as IntersectionObserver).disconnect();
+    observer = null;
+  }
+});
+
+watch(() => props.isTerminateObserve, (isTerminateObserve: boolean) => {
+  if (!observer) {
+    return;
+  }
+  if (isTerminateObserve) {
+    (observer as IntersectionObserver).disconnect();
+  } else if (selfDomRef.value) {
+    (observer as IntersectionObserver).disconnect();
+    if (!isUniFrameWork) {
+      (observer as IntersectionObserver).observe(selfDomRef.value);
+    } else {
+      (observer as any).observe('.fetch-more-block', () => {
+        emits('onExposed');
+      });
+    }
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.fetch-more-block {
+  color: #999;
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/Icon.vue b/txim/src/TUIKit/components/common/Icon.vue
new file mode 100644
index 00000000..a6912c20
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Icon.vue
@@ -0,0 +1,82 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div
+    :class="['common-icon-container', !isPC && 'common-icon-container-mobile']"
+    :style="{
+      padding: iconHotAreaSize,
+    }"
+    @click="handleImgClick"
+  >
+    <image
+      v-if="isApp"
+      class="common-icon"
+      :src="props.file"
+      :style="{ width: iconWidth, height: iconHeight }"
+    />
+    <img
+      v-else
+      class="common-icon"
+      :src="props.file"
+      :style="{ width: iconWidth, height: iconHeight }"
+    >
+  </div>
+</template>
+<script setup lang="ts">
+import { withDefaults, computed } from '../../adapter-vue';
+import { isApp, isPC } from '../../utils/env';
+
+interface IProps {
+  file: string;
+  size?: string;
+  width?: string;
+  height?: string;
+  hotAreaSize?: number | string;
+}
+
+interface IEmits {
+  (key: 'onClick', e: Event): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  file: '',
+  width: '20px',
+  height: '20px',
+});
+
+const iconHotAreaSize = computed<undefined | string>(() => {
+  if (!props.hotAreaSize) {
+    return undefined;
+  }
+  if (isNaN(Number(props.hotAreaSize))) {
+    return String(props.hotAreaSize);
+  }
+  return `${props.hotAreaSize}px`;
+});
+
+const iconWidth = computed(() => {
+  return props.size ? props.size : props.width;
+});
+
+const iconHeight = computed(() => {
+  return props.size ? props.size : props.height;
+});
+
+const handleImgClick = (e: Event) => {
+  emits('onClick', e);
+};
+</script>
+
+<style lang="scss" scoped>
+.common-icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.common-icon-container-mobile{
+  cursor: none;
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/ImagePreviewer/image-item.vue b/txim/src/TUIKit/components/common/ImagePreviewer/image-item.vue
new file mode 100644
index 00000000..438e8e43
--- /dev/null
+++ b/txim/src/TUIKit/components/common/ImagePreviewer/image-item.vue
@@ -0,0 +1,42 @@
+<template>
+  <img
+    class="image-preview"
+    :style="{
+      transform: `scale(${props.zoom}) rotate(${props.rotate}deg)`,
+    }"
+    :src="props.src"
+  >
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  zoom: {
+    type: Number,
+    default: 1,
+  },
+  rotate: {
+    type: Number,
+    default: 0,
+  },
+  src: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<style lang="scss">
+.image-item {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.image-preview {
+  max-width: 100%;
+  max-height: 100%;
+  transition: transform 0.1s ease 0s;
+  pointer-events: auto;
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/ImagePreviewer/index.ts b/txim/src/TUIKit/components/common/ImagePreviewer/index.ts
new file mode 100644
index 00000000..a9d0b85f
--- /dev/null
+++ b/txim/src/TUIKit/components/common/ImagePreviewer/index.ts
@@ -0,0 +1,3 @@
+import ImagePreviewer from './index.vue';
+
+export default ImagePreviewer;
diff --git a/txim/src/TUIKit/components/common/ImagePreviewer/index.vue b/txim/src/TUIKit/components/common/ImagePreviewer/index.vue
new file mode 100644
index 00000000..aea8b2e9
--- /dev/null
+++ b/txim/src/TUIKit/components/common/ImagePreviewer/index.vue
@@ -0,0 +1,678 @@
+<template>
+  <div
+    class="image-previewer"
+    :class="[isMobile && 'image-previewer-h5']"
+  >
+    <div
+      ref="image"
+      class="image-wrapper"
+      @touchstart.stop="handleTouchStart"
+      @touchmove.stop="handleTouchMove"
+      @touchend.stop="handleTouchEnd"
+      @touchcancel.stop="handleTouchCancel"
+      @wheel.stop="handleWheel"
+    >
+      <ul
+        ref="ulRef"
+        class="image-list"
+        :style="{
+          width: `${imageList.length * 100}%`,
+          transform: `translateX(-${
+            (currentImageIndex * 100) / imageList.length
+          }%)`,
+          transition: '0.5s',
+        }"
+      >
+        <li
+          v-for="(item, index) in imageList"
+          :key="index"
+          class="image-item"
+        >
+          <ImageItem
+            :zoom="zoom"
+            :rotate="rotate"
+            :src="getImageUrl(item)"
+            :messageItem="item"
+            :class="[isUniFrameWork ? 'image-item' : '']"
+          />
+        </li>
+      </ul>
+    </div>
+    <div
+      v-show="isPC"
+      class="icon icon-close"
+      @click="close"
+    >
+      <Icon
+        :file="iconClose"
+        width="16px"
+        height="16px"
+      />
+    </div>
+    <div
+      v-if="isPC && currentImageIndex > 0"
+      class="image-button image-button-left"
+      @click="goPrev"
+    >
+      <Icon :file="iconArrowLeft" />
+    </div>
+    <div
+      v-if="isPC && currentImageIndex < imageList.length - 1"
+      class="image-button image-button-right"
+      @click="goNext"
+    >
+      <Icon :file="iconArrowLeft" />
+    </div>
+    <div :class="['actions-bar', isMobile && 'actions-bar-h5']">
+      <div
+        v-if="isPC"
+        class="icon-zoom-in"
+        @click="zoomIn"
+      >
+        <Icon
+          :file="iconZoomIn"
+          width="27px"
+          height="27px"
+        />
+      </div>
+      <div
+        v-if="isPC"
+        class="icon-zoom-out"
+        @click="zoomOut"
+      >
+        <Icon
+          :file="iconZoomOut"
+          width="27px"
+          height="27px"
+        />
+      </div>
+      <div
+        v-if="isPC"
+        class="icon-refresh-left"
+        @click="rotateLeft"
+      >
+        <Icon
+          :file="iconRotateLeft"
+          width="27px"
+          height="27px"
+        />
+      </div>
+      <div
+        v-if="isPC"
+        class="icon-refresh-right"
+        @click="rotateRight"
+      >
+        <Icon
+          :file="iconRotateRight"
+          width="27px"
+          height="27px"
+        />
+      </div>
+      <span class="image-counter">
+        {{ currentImageIndex + 1 }} / {{ imageList.length }}
+      </span>
+    </div>
+    <div
+      class="save"
+      @click.stop.prevent="save"
+    >
+      <Icon
+        :file="iconDownload"
+        width="20px"
+        height="20px"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect, onMounted, onUnmounted, withDefaults } from '../../../adapter-vue';
+import { IMessageModel, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal, getPlatform } from '@tencentcloud/universal-api';
+import Icon from '../../common/Icon.vue';
+import iconClose from '../../../assets/icon/icon-close.svg';
+import iconArrowLeft from '../../../assets/icon/icon-arrow-left.svg';
+import iconZoomIn from '../../../assets/icon/zoom-in.svg';
+import iconZoomOut from '../../../assets/icon/zoom-out.svg';
+import iconRotateLeft from '../../../assets/icon/rotate-left.svg';
+import iconRotateRight from '../../../assets/icon/rotate-right.svg';
+import iconDownload from '../../../assets/icon/download.svg';
+import ImageItem from './image-item.vue';
+import { Toast, TOAST_TYPE } from '../../common/Toast/index';
+import { isPC, isMobile, isUniFrameWork } from '../../../utils/env';
+
+interface touchesPosition {
+  pageX1?: number;
+  pageY1?: number;
+  pageX2?: number;
+  pageY2?: number;
+}
+
+const props = withDefaults(
+  defineProps<{
+    imageList: IMessageModel[];
+    currentImage: IMessageModel;
+  }>(),
+  {
+    imageList: () => ([] as IMessageModel[]),
+    messageItem: () => ({} as IMessageModel),
+  },
+);
+
+const imageFormatMap = new Map([
+  [1, 'jpg'],
+  [2, 'gif'],
+  [3, 'png'],
+  [4, 'bmp'],
+]);
+
+const emit = defineEmits(['close']);
+const zoom = ref(1);
+const rotate = ref(0);
+const minZoom = ref(0.1);
+const currentImageIndex = ref(0);
+const image = ref();
+const ulRef = ref();
+// touch
+let startX = 0;
+const touchStore = {} as touchesPosition;
+let moveFlag = false;
+let twoTouchesFlag = false;
+let timer: number | null = null;
+
+watchEffect(() => {
+  currentImageIndex.value = props.imageList.findIndex((message: any) => {
+    return message.ID === props?.currentImage?.ID;
+  });
+});
+
+const isNumber = (value: any) => {
+  return typeof value === 'number' && isFinite(value);
+};
+
+const handleTouchStart = (e: any) => {
+  e.preventDefault();
+  moveInit(e);
+  twoTouchesInit(e);
+};
+
+const handleTouchMove = (e: any) => {
+  e.preventDefault();
+  moveFlag = true;
+  if (e.touches && e.touches.length === 2) {
+    twoTouchesFlag = true;
+    handleTwoTouches(e);
+  }
+};
+
+const handleTouchEnd = (e: any) => {
+  e.preventDefault();
+  e.stopPropagation();
+  let moveEndX = 0;
+  let X = 0;
+  if (twoTouchesFlag) {
+    if (!timer) {
+      twoTouchesFlag = false;
+      delete touchStore.pageX2;
+      delete touchStore.pageY2;
+      timer = setTimeout(() => {
+        timer = null;
+      }, 200);
+    }
+    return;
+  }
+  // H5 touch move to left to go to prev image
+  // H5 touch move to right to go to next image
+  if (timer === null) {
+    switch (moveFlag) {
+      // touch event
+      case true:
+        moveEndX = e?.changedTouches[0]?.pageX;
+        X = moveEndX - startX;
+        if (X > 100) {
+          goPrev();
+        } else if (X < -100) {
+          goNext();
+        }
+        break;
+      // click event
+      case false:
+        close();
+        break;
+    }
+    timer = setTimeout(() => {
+      timer = null;
+    }, 200);
+  }
+};
+
+const handleTouchCancel = () => {
+  twoTouchesFlag = false;
+  delete touchStore.pageX1;
+  delete touchStore.pageY1;
+};
+
+const handleWheel = (e: any) => {
+  e.preventDefault();
+  if (Math.abs(e.deltaX) !== 0 && Math.abs(e.deltaY) !== 0) return;
+  let scale = zoom.value;
+  scale += e.deltaY * (e.ctrlKey ? -0.01 : 0.002);
+  scale = Math.min(Math.max(0.125, scale), 4);
+  zoom.value = scale;
+};
+
+const moveInit = (e: any) => {
+  startX = e?.changedTouches[0]?.pageX;
+  moveFlag = false;
+};
+
+const twoTouchesInit = (e: any) => {
+  const touch1 = e?.touches[0];
+  const touch2 = e?.touches[1];
+  touchStore.pageX1 = touch1?.pageX;
+  touchStore.pageY1 = touch1?.pageY;
+  if (touch2) {
+    touchStore.pageX2 = touch2?.pageX;
+    touchStore.pageY2 = touch2?.pageY;
+  }
+};
+
+const handleTwoTouches = (e: any) => {
+  const touch1 = e?.touches[0];
+  const touch2 = e?.touches[1];
+  if (touch2) {
+    if (!isNumber(touchStore.pageX2)) {
+      touchStore.pageX2 = touch2.pageX;
+    }
+    if (!isNumber(touchStore.pageY2)) {
+      touchStore.pageY2 = touch2.pageY;
+    }
+  }
+  const getDistance = (
+    startX: number,
+    startY: number,
+    stopX: number,
+    stopY: number,
+  ) => {
+    return Math.hypot(stopX - startX, stopY - startY);
+  };
+  if (
+    !isNumber(touchStore.pageX1)
+    || !isNumber(touchStore.pageY1)
+    || !isNumber(touchStore.pageX2)
+    || !isNumber(touchStore.pageY2)
+  ) {
+    return;
+  }
+  const touchZoom
+    = getDistance(touch1.pageX, touch1.pageY, touch2.pageX, touch2.pageY)
+    / getDistance(
+      touchStore.pageX1 as number,
+      touchStore.pageY1 as number,
+      touchStore.pageX2 as number,
+      touchStore.pageY2 as number,
+    );
+  zoom.value = Math.min(Math.max(0.5, zoom.value * touchZoom), 4);
+};
+
+onMounted(() => {
+  // web: close on esc keydown
+  document?.addEventListener
+  && document?.addEventListener('keydown', handleEsc);
+});
+
+const handleEsc = (e: any) => {
+  e.preventDefault();
+  if (e?.keyCode === 27) {
+    close();
+  }
+};
+const zoomIn = () => {
+  zoom.value += 0.1;
+};
+const zoomOut = () => {
+  zoom.value
+    = zoom.value - 0.1 > minZoom.value ? zoom.value - 0.1 : minZoom.value;
+};
+const close = () => {
+  emit('close');
+};
+const rotateLeft = () => {
+  rotate.value -= 90;
+};
+const rotateRight = () => {
+  rotate.value += 90;
+};
+const goNext = () => {
+  currentImageIndex.value < props.imageList.length - 1
+  && currentImageIndex.value++;
+  initStyle();
+};
+const goPrev = () => {
+  currentImageIndex.value > 0 && currentImageIndex.value--;
+  initStyle();
+};
+const initStyle = () => {
+  zoom.value = 1;
+  rotate.value = 0;
+};
+
+const getImageUrl = (message: IMessageModel) => {
+  if (isPC) {
+    return message?.payload?.imageInfoArray[0]?.url;
+  } else {
+    return message?.payload?.imageInfoArray[2]?.url;
+  }
+};
+
+const save = () => {
+  const imageMessage = props.imageList[
+    currentImageIndex.value
+  ] as IMessageModel;
+  const imageSrc = imageMessage?.payload?.imageInfoArray[0]?.url;
+  if (!imageSrc) {
+    Toast({
+      message: TUITranslateService.t('component.图片 url 不存在'),
+      type: TOAST_TYPE.ERROR,
+    });
+    return;
+  }
+  switch (getPlatform()) {
+    case 'wechat':
+      // Get the user's current settings and get the album permissions
+      TUIGlobal.getSetting({
+        success: (res: any) => {
+          if (!res?.authSetting['scope.writePhotosAlbum']) {
+            TUIGlobal.authorize({
+              scope: 'scope.writePhotosAlbum',
+              success() {
+                downloadImgInUni(imageSrc);
+              },
+              fail() {
+                TUIGlobal.showModal({
+                  title: '您已拒绝获取相册权限',
+                  content: '是否进入权限管理，调整授权？',
+                  success: (res: any) => {
+                    if (res.confirm) {
+                      // Call up the client applet settings interface and return the operation results set by the user.
+                      // Ask the user to authorize again.
+                      TUIGlobal.openSetting({
+                        success: (res: any) => {
+                          console.log(res.authSetting);
+                        },
+                      });
+                    } else if (res.cancel) {
+                      return Toast({
+                        message: TUITranslateService.t('component.已取消'),
+                        type: TOAST_TYPE.ERROR,
+                      });
+                    }
+                  },
+                });
+              },
+            });
+          } else {
+            // If you already have album permission, save directly to the album
+            downloadImgInUni(imageSrc);
+          }
+        },
+        fail: () => {
+          Toast({
+            message: TUITranslateService.t('component.获取权限失败'),
+            type: TOAST_TYPE.ERROR,
+          });
+        },
+      });
+      break;
+    case 'app':
+      downloadImgInUni(imageSrc);
+      break;
+    default:
+      downloadImgInWeb(imageSrc);
+      break;
+  }
+};
+
+const downloadImgInUni = (src: string) => {
+  TUIGlobal.showLoading({
+    title: '大图提取中',
+  });
+  TUIGlobal.downloadFile({
+    url: src,
+    success: function (res: any) {
+      TUIGlobal.hideLoading();
+      TUIGlobal.saveImageToPhotosAlbum({
+        filePath: res.tempFilePath,
+        success: () => {
+          Toast({
+            message: TUITranslateService.t('component.已保存至相册'),
+            type: TOAST_TYPE.SUCCESS,
+          });
+        },
+      });
+    },
+    fail: function () {
+      TUIGlobal.hideLoading();
+      Toast({
+        message: TUITranslateService.t('component.图片下载失败'),
+        type: TOAST_TYPE.ERROR,
+      });
+    },
+  });
+};
+
+const downloadImgInWeb = (src: string) => {
+  const option: any = {
+    mode: 'cors',
+    headers: new Headers({
+      'Content-Type': 'application/x-www-form-urlencoded',
+    }),
+  };
+  const imageMessage = props.imageList[
+    currentImageIndex.value
+  ] as IMessageModel;
+  const imageFormat: number = imageMessage?.payload?.imageFormat;
+  if (!imageFormatMap.has(imageFormat)) {
+    Toast({
+      message: TUITranslateService.t('component.暂不支持下载此类型图片'),
+      type: TOAST_TYPE.ERROR,
+    });
+    return;
+  }
+  // If the browser supports fetch, use blob to download, so as to avoid the browser clicking the a tag and jumping to the preview of the new page
+  if ((window as any).fetch) {
+    fetch(src, option)
+      .then(res => res.blob())
+      .then((blob) => {
+        const a = document.createElement('a');
+        const url = window.URL.createObjectURL(blob);
+        a.href = url;
+        a.download = url + '.' + imageFormatMap.get(imageFormat);
+        a.click();
+      });
+  } else {
+    const a = document.createElement('a');
+    a.href = src;
+    a.target = '_blank';
+    a.download = src + '.' + imageFormatMap.get(imageFormat);
+    a.click();
+  }
+};
+
+onUnmounted(() => {
+  document?.removeEventListener
+  && document?.removeEventListener('keydown', handleEsc);
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../../assets/styles/common";
+
+.actions-bar {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  position: absolute;
+  bottom: 5%;
+  padding: 12px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.8);
+
+  &-h5 {
+    padding: 6px;
+  }
+
+  .icon {
+    position: static;
+    font-size: 24px;
+    cursor: pointer;
+    width: 27px;
+    height: 27px;
+    margin: 5px;
+  }
+
+  .icon-zoom-in,
+  .icon-zoom-out,
+  .icon-refresh-left,
+  .icon-refresh-right {
+    cursor: pointer;
+    user-select: none;
+    padding: 5px;
+  }
+}
+
+.image-previewer {
+  position: fixed;
+  z-index: 101;
+  width: 100%;
+  height: 100%;
+  background: rgba(#000, 0.3);
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  user-select: none;
+
+  .image-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .image-list {
+    position: absolute;
+    height: 100%;
+    left: 0;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+    place-content: center center;
+
+    .image-item {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+  }
+
+  .image-preview {
+    max-width: 100%;
+    max-height: 100%;
+    transition: transform 0.1s ease 0s;
+    pointer-events: auto;
+  }
+
+  .image-button {
+    display: flex;
+    flex-direction: column;
+    min-width: auto;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    top: calc(50% - 20px);
+    background: rgba(255, 255, 255, 0.8);
+
+    &-left {
+      left: 10px;
+    }
+
+    &-right {
+      right: 10px;
+      transform: rotate(180deg);
+    }
+
+    .icon {
+      position: absolute;
+      bottom: 0;
+      top: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      line-height: 40px;
+      display: flex;
+      flex-direction: column;
+      min-width: auto;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .icon-close {
+    position: absolute;
+    cursor: pointer;
+    border-radius: 50%;
+    top: 3%;
+    right: 3%;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.8);
+    display: flex;
+
+    &::before,
+    &::after {
+      background-color: #444;
+    }
+  }
+}
+
+.image-previewer-h5 {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  display: flex;
+  flex-direction: column;
+}
+
+.save {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  position: absolute;
+  bottom: 5%;
+  right: 5%;
+  padding: 12px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.image-counter {
+  background: rgba(20, 18, 20, 0.53);
+  padding: 3px 5px;
+  margin: 5px;
+  border-radius: 3px;
+  color: #fff;
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/Loading/index.ts b/txim/src/TUIKit/components/common/Loading/index.ts
new file mode 100644
index 00000000..9512091b
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Loading/index.ts
@@ -0,0 +1,2 @@
+import Loading from './index.vue';
+export default Loading;
diff --git a/txim/src/TUIKit/components/common/Loading/index.vue b/txim/src/TUIKit/components/common/Loading/index.vue
new file mode 100644
index 00000000..39768cdf
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Loading/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="tui-loading"
+    :style="{
+      width: props.width,
+      height: props.height,
+      border: `2px solid ${props.color}`,
+      borderTopColor: 'transparent',
+    }"
+  />
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  width: {
+    type: String,
+    default: '30px',
+  },
+  height: {
+    type: String,
+    default: '30px',
+  },
+  color: {
+    type: String,
+    default: '#D9D9D9',
+  },
+});
+</script>
+<style scoped lang="scss">
+.tui-loading {
+  width: 30px;
+  height: 30px;
+  border: 2px solid #d9d9d9;
+  border-top-color: transparent;
+  border-radius: 100%;
+  animation: circle infinite 0.75s linear;
+}
+
+@keyframes circle {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/MaskLayer/index.vue b/txim/src/TUIKit/components/common/MaskLayer/index.vue
new file mode 100644
index 00000000..bbd7ed6f
--- /dev/null
+++ b/txim/src/TUIKit/components/common/MaskLayer/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div
+    v-if="showMask"
+    class="mask"
+    @click.self="!isWeChat && toggleView"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watchEffect } from '../../../adapter-vue';
+import { isWeChat } from '../../../utils/env';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: () => false,
+  },
+});
+
+const showMask = ref(false);
+
+watchEffect(() => {
+  showMask.value = props.show;
+});
+
+const emit = defineEmits(['update:show']);
+
+const toggleView = () => {
+  showMask.value = !showMask.value;
+  emit('update:show', showMask.value);
+};
+
+</script>
+
+<style lang="scss" scoped>
+@import '../../../assets/styles/common';
+
+.mask {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  z-index: 99;
+  background: rgba(#000, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  main {
+    position: relative;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/Overlay/index.vue b/txim/src/TUIKit/components/common/Overlay/index.vue
new file mode 100644
index 00000000..5a02d098
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Overlay/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <div
+    v-if="isOverlayShow"
+    ref="overlayDomRef"
+    class="overlay-container"
+    :style="{
+      position: props.isFullScreen ? 'fixed' : 'absolute',
+      zIndex: props.zIndex,
+    }"
+  >
+    <div
+      v-if="props.useMask"
+      :class="{
+        'overlay-mask': true,
+        'fade-in': props.visible,
+      }"
+      :style="{
+        backgroundColor: props.maskColor,
+      }"
+      @click="onOverlayClick"
+      @touchstart.prevent.stop="onOverlayClick"
+    />
+    <div
+      :class="{
+        'overlay-content': true,
+        'full-screen': props.isFullScreen,
+      }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, withDefaults } from '../../../adapter-vue';
+export interface IOverlayProps {
+  visible?: boolean;
+  zIndex?: number | undefined;
+  useMask?: boolean | undefined;
+  maskColor?: string | undefined;
+  isFullScreen?: boolean | undefined;
+  width?: string;
+  height?: string;
+}
+
+const emits = defineEmits(['onOverlayClick']);
+
+const props = withDefaults(defineProps<IOverlayProps>(), {
+  visible: true,
+  zIndex: 9999,
+  useMask: true,
+  isFullScreen: true,
+  maskColor: 'rgba(0, 0, 0, 0.6)',
+  width: 'auto',
+  height: 'auto',
+});
+
+const overlayDomRef = ref<HTMLElement>();
+const isOverlayShow = ref<boolean>(props.visible);
+
+watch(() => props.visible, (visible: boolean) => {
+  if (visible) {
+    isOverlayShow.value = true;
+  } else {
+    setTimeout(() => {
+      isOverlayShow.value = false;
+    }, 150);
+  }
+}, {
+  immediate: true,
+});
+
+function onOverlayClick() {
+  emits('onOverlayClick');
+}
+
+defineExpose({
+  overlayDomRef,
+});
+</script>
+
+<style scoped lang="scss">
+.overlay-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .overlay-mask {
+    z-index: -1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    transition: opacity 0.15s linear;
+    animation: fade-in 0.15s linear;
+  }
+
+  .full-screen{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.overlay-mask.fade-in {
+  opacity: 1;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/Popconfirm/index.vue b/txim/src/TUIKit/components/common/Popconfirm/index.vue
new file mode 100644
index 00000000..1aaef501
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Popconfirm/index.vue
@@ -0,0 +1,188 @@
+<template>
+  <div
+    v-if="_isShow"
+    class="pop"
+    @click.stop.prevent="toggleView(clickType.OUTSIDE)"
+  >
+    <main
+      class="pop-main"
+      :class="[!isPC ? 'pop-main-h5' : '']"
+      @click.stop.prevent="toggleView(clickType.INSIDE)"
+    >
+      <header
+        v-if="isHeaderShow"
+        class="pop-main-header"
+      >
+        <h1 class="pop-main-title">
+          {{ title }}
+        </h1>
+      </header>
+      <div
+        class="pop-main-content"
+        :class="[isUniFrameWork && isH5 ? 'pop-main-content-uniapp' : '']"
+      >
+        <slot />
+      </div>
+      <footer class="pop-main-footer">
+        <button
+          v-if="isConfirmButtonShow"
+          class="btn btn-confirm"
+          @click="popConfirm()"
+        >
+          {{ TUITranslateService.t(confirmButtonText) }}
+        </button>
+        <button
+          v-if="isCancelButtonShow"
+          class="btn btn-cancel"
+          @click="popCancel()"
+        >
+          {{ TUITranslateService.t(cancelButtonText) }}
+        </button>
+      </footer>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRefs, watchEffect } from '../../../adapter-vue';
+import {
+  TUIGlobal,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import { isUniFrameWork } from '../../../utils/env';
+const props = withDefaults(
+  defineProps<{
+    isShow: boolean;
+    title?: string;
+    isHeaderShow?: boolean;
+    isConfirmButtonShow?: boolean;
+    isCancelButtonShow?: boolean;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+  }>(),
+  {
+    isShow: false,
+    isHeaderShow: false,
+    isConfirmButtonShow: true,
+    isCancelButtonShow: true,
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  },
+);
+
+const { isShow } = toRefs(props);
+const clickType = {
+  OUTSIDE: 'outside',
+  INSIDE: 'inside',
+};
+const isPC = ref(TUIGlobal.getPlatform() === 'pc');
+const isH5 = ref(TUIGlobal.getPlatform() === 'h5');
+const _isShow = ref<boolean>(false);
+const emit = defineEmits(['update:show', 'popConfirm']);
+
+const toggleView = (type: string) => {
+  if (type === clickType.OUTSIDE) {
+    popCancel();
+  }
+};
+watchEffect(() => {
+  _isShow.value = isShow.value;
+});
+function popCancel() {
+  _isShow.value = !_isShow.value;
+  emit('update:show', _isShow.value);
+}
+
+function popConfirm() {
+  emit('popConfirm');
+  popCancel();
+}
+</script>
+<style lang="scss" scoped>
+$pop-bg-color: #fff;
+$pop-header: #333;
+$confirm-bg-color: #006EFF;
+$confirm-text-color: #fff;
+$concel-bg-color: #666;
+$content-color: #333;
+
+.pop {
+  background: rgba(0, 0, 0, .3);
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-main {
+    min-width: 368px;
+    border-radius: 10px;
+    padding: 20px 30px;
+    max-width: 380px;
+    background: $pop-bg-color;
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 16px;
+      line-height: 30px;
+      font-weight: 500;
+      color: $pop-header;
+    }
+
+    &-title {
+      font-size: 16px;
+      line-height: 30px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      color: $content-color;
+    }
+
+    &-content {
+      font-size: 14px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 20px;
+      font-weight: 400;
+      color: $content-color;
+    }
+
+    &-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.pop-main-h5 {
+  min-width: 220px;
+  max-width: 260px;
+}
+
+.btn {
+  padding: 8px 20px;
+  margin: 0 6px;
+  border-radius: 4px;
+  border: none;
+  font-size: 14px;
+  text-align: center;
+  line-height: 20px;
+
+  &-cancel {
+    // border: 1px solid #dddddd;
+    color: $concel-bg-color;
+  }
+
+  &-confirm {
+    background: $confirm-bg-color;
+    border: 1px solid $confirm-bg-color;
+    color: $confirm-text-color;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/ProgressMessage/index.vue b/txim/src/TUIKit/components/common/ProgressMessage/index.vue
new file mode 100644
index 00000000..9547a2ac
--- /dev/null
+++ b/txim/src/TUIKit/components/common/ProgressMessage/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="progress-message">
+    <slot />
+    <div
+      v-if="props.messageItem.status === 'unSend' && props.messageItem.progress < 1"
+      class="progress-container"
+    >
+      <progress
+        v-if="!isUniFrameWork"
+        class="progress"
+        :value="props.messageItem.progress"
+        max="1"
+      />
+      <progress
+        v-else
+        activeColor="#006EFF"
+        class="progress-common"
+        :percent="Math.round(props.messageItem.progress*100)"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { withDefaults } from '../../../adapter-vue';
+import { isUniFrameWork } from '../../../utils/env';
+import type { IImageMessageContent } from '../../../interface';
+
+const props = withDefaults(
+  defineProps<{
+    content: IImageMessageContent;
+    messageItem: IMessageModel;
+  }>(),
+  {
+    content: () => ({}),
+    messageItem: () => ({} as IMessageModel),
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+$primary-progress-color: #006eff;
+$primary-progress-bg-color: #fff;
+
+.progress-message {
+  overflow: hidden;
+
+  .progress-container {
+    position: absolute;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 0 15%;
+    left: 0;
+    top: 0;
+    background: rgba(#000, 0.5);
+    display: flex;
+    align-items: center;
+
+    .progress-common {
+      appearance: none;
+      width: 100%;
+      height: 0.5rem;
+    }
+
+    .progress {
+      @extend .progress-common;
+
+      color: $primary-progress-color;
+      border-radius: 0.25rem;
+      background: $primary-progress-bg-color;
+
+      &::-webkit-progress-value {
+        background-color: $primary-progress-color;
+        border-radius: 0.25rem;
+      }
+
+      &::-webkit-progress-bar {
+        border-radius: 0.25rem;
+        background: $primary-progress-bg-color;
+      }
+
+      &::-moz-progress-bar {
+        color: $primary-progress-color;
+        background: $primary-progress-color;
+        border-radius: 0.25rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/RadioSelect/index.vue b/txim/src/TUIKit/components/common/RadioSelect/index.vue
new file mode 100644
index 00000000..a1e78b19
--- /dev/null
+++ b/txim/src/TUIKit/components/common/RadioSelect/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="radio-select"
+    @click="toggleSelect"
+  >
+    <div
+      v-if="!props.isSelected"
+      class="radio-no-select"
+    />
+    <Icon
+      v-else
+      :file="radioIcon"
+      :size="'20px'"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Icon from '../Icon.vue';
+import radioIcon from '../../../assets/icon/radio.svg';
+
+interface IProps {
+  isSelected: boolean;
+}
+
+interface IEmits {
+  (e: 'onChange', value: boolean): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(),
+  {},
+);
+
+function toggleSelect() {
+  emits('onChange', !props.isSelected);
+}
+</script>
+<style lang="scss" scoped>
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  box-sizing: border-box
+}
+
+.radio-select {
+  flex: 1;
+  flex-direction: column;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  justify-content: center;
+
+  .radio-no-select {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    border: 2px solid #ddd;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/SelectUser/index.ts b/txim/src/TUIKit/components/common/SelectUser/index.ts
new file mode 100644
index 00000000..315f8f3f
--- /dev/null
+++ b/txim/src/TUIKit/components/common/SelectUser/index.ts
@@ -0,0 +1,3 @@
+import SelectUser from './index.vue';
+
+export default SelectUser;
diff --git a/txim/src/TUIKit/components/common/SelectUser/index.vue b/txim/src/TUIKit/components/common/SelectUser/index.vue
new file mode 100644
index 00000000..aa25c506
--- /dev/null
+++ b/txim/src/TUIKit/components/common/SelectUser/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <Dialog
+    :show="true"
+    :isH5="!isPC"
+    :isHeaderShow="false"
+    :isFooterShow="false"
+    :background="false"
+    @update:show="reset"
+  >
+    <Transfer
+      :isSearch="props.isNeedSearch"
+      :title="props.title"
+      :list="props.userList"
+      :isH5="!isPC"
+      :isRadio="props.isRadio"
+      :total="props.total"
+      @getMore="handleGetMore"
+      @search="handleSearchUser"
+      @submit="submit"
+      @cancel="reset"
+    />
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { isPC } from '../../../utils/env';
+import Dialog from '../Dialog/index.vue';
+import Transfer from '../Transfer/index.vue';
+
+const emits = defineEmits(['complete', 'search', 'getMore']);
+
+const props = defineProps({
+  isRadio: {
+    type: Boolean,
+    default: false,
+  },
+  isNeedSearch: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  userList: {
+    type: Array,
+    default: () => ([]),
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const reset = () => {
+  emits('complete', []);
+};
+
+const submit = (dataList: any) => {
+  emits('complete', dataList);
+};
+
+const handleSearchUser = (userID: string) => {
+  emits('search', userID);
+};
+
+const handleGetMore = () => {
+  emits('getMore');
+};
+</script>
diff --git a/txim/src/TUIKit/components/common/Slider/index.vue b/txim/src/TUIKit/components/common/Slider/index.vue
new file mode 100644
index 00000000..5f3e68aa
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Slider/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="slider-box"
+    :class="[isSliderOpen && 'slider-open']"
+    @click="toggleSlider"
+  >
+    <span class="slider-block" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watchEffect } from '../../../adapter-vue';
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isSliderOpen = ref(false);
+
+const emits = defineEmits(['change']);
+
+watchEffect(() => {
+  isSliderOpen.value = props.open;
+});
+
+const toggleSlider = () => {
+  isSliderOpen.value = !isSliderOpen.value;
+  emits('change', isSliderOpen.value);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../assets/styles/common";
+
+.slider {
+  &-box {
+    display: flex;
+    align-items: center;
+    width: 40px;
+    height: 20px;
+    border-radius: 10px;
+    background: #e1e1e3;
+  }
+
+  &-open {
+    background: #006eff !important;
+    justify-content: flex-end;
+  }
+
+  &-block {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    margin: 0 2px;
+    background: #fff;
+    border: 0 solid rgba(0, 0, 0, 0.85);
+    box-shadow: 0 2px 4px 0 #d1d1d1;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/SwitchBar/index.ts b/txim/src/TUIKit/components/common/SwitchBar/index.ts
new file mode 100644
index 00000000..6d4278b3
--- /dev/null
+++ b/txim/src/TUIKit/components/common/SwitchBar/index.ts
@@ -0,0 +1,2 @@
+import SwitchBar from './index.vue';
+export default SwitchBar;
diff --git a/txim/src/TUIKit/components/common/SwitchBar/index.vue b/txim/src/TUIKit/components/common/SwitchBar/index.vue
new file mode 100644
index 00000000..c50ad200
--- /dev/null
+++ b/txim/src/TUIKit/components/common/SwitchBar/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <!-- This component only supports external changes to prop value to change the switch state, to avoid the situation where the switchbar display state does not match the expected state due to internal asynchronous problems -->
+  <div :class="['tui-switch', value ? 'tui-switch-checked' : 'tui-switch-no-checked']" />
+</template>
+<script setup lang="ts">
+defineProps({
+  value: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+<style scoped lang="scss">
+.tui-switch {
+  margin: 2px 5px;
+  width: 48px;
+  height: 30px;
+  position: relative;
+  border: 1px solid transparent;
+  box-shadow: #dfdfdf 0 0 0 0 inset;
+  border-radius: 20px;
+  background-clip: content-box;
+  display: inline-block;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  user-select: none;
+  outline: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    background-color: #fff;
+    border-radius: 50%;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    transition: 0.3s;
+  }
+
+  &-checked {
+    background-color: #007aff;
+    transition: 0.6s;
+
+    &::before {
+      transition: 0.3s;
+      left: 20px;
+    }
+
+    &:active::before {
+      width: 28px;
+      left: 16px;
+      transition: 0.3s;
+    }
+  }
+
+  &-no-checked {
+    background-color: #dcdfe6;
+    transition: 0.6s;
+
+    &::before {
+      left: 2px;
+      transition: 0.3s;
+    }
+
+    &:active::before {
+      width: 28px;
+      transition: 0.3s;
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/Toast/index.ts b/txim/src/TUIKit/components/common/Toast/index.ts
new file mode 100644
index 00000000..37755b0d
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Toast/index.ts
@@ -0,0 +1,115 @@
+/* eslint-disable no-case-declarations */
+import { createVNode, render, VNode, vueVersion } from '../../../adapter-vue';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import TOAST_TYPE from './type';
+import MessageConstructor from './index.vue';
+
+interface IToast {
+  message: string;
+  type: string;
+  offset?: number;
+  duration?: number;
+  onClose?(): void;
+}
+
+interface IToastReturnType {
+  close?(): void;
+}
+
+const instances: any[] = [];
+let seed = 1;
+
+const vueVersionInt = Math.trunc(vueVersion);
+const appendTo: HTMLElement | null = document.body;
+
+const Toast = function (options: IToast): IToastReturnType {
+  let verticalOffset = options.offset || 20;
+  instances.forEach(({ vm }: any) => {
+    verticalOffset += (vm?.el?.offsetHeight || vm?.$el?.offsetHeight || 0) + 20;
+  });
+  verticalOffset += 20;
+  const id = `message_${(seed += 1)}`;
+  const userOnClose = options.onClose;
+  const props: any = {
+    zIndex: 20 + seed,
+    offset: verticalOffset,
+    id,
+    ...options,
+    onClose: () => {
+      Toast.close(id, userOnClose);
+    },
+  };
+  let vm: { component: any; props: any; data: any };
+  let container: HTMLDivElement;
+  switch (vueVersionInt) {
+    case 2:
+      const Vue = TUIGlobal?.Vue;
+      if (!Vue) {
+        return {};
+      }
+      const Constructor = Vue.extend(MessageConstructor);
+      const instance = new Constructor({ propsData: props });
+      instance.$mount();
+      appendTo.appendChild(instance.$el);
+      instance.$el.style.zIndex = props.zIndex;
+      instance.verticalOffset = props.verticalOffset;
+      instance.visible = true;
+      instances.push({ vm: instance });
+      return {
+        close: () => {
+          instance.visible = false;
+        },
+      };
+    case 3:
+      vm = createVNode(MessageConstructor, props);
+      container = document.createElement('div');
+      vm?.props
+      && (vm.props!.onDestroy = () => {
+        render(null, container);
+      });
+      vm?.data
+      && (vm.data!.onDestroy = () => {
+        render(null, container);
+      });
+      render(vm, container);
+      instances.push({ vm });
+      appendTo.appendChild(container.firstElementChild!);
+      return {
+        close: () => {
+          vm?.component?.proxy && (vm.component!.proxy.visible = false);
+        },
+      };
+  }
+  return {};
+};
+
+export function close(id: string, userOnClose?: (vm: VNode) => void): void {
+  const idx = instances?.findIndex(
+    ({ vm }: any) => id === vm?.component?.props?.id || id === vm?._props?.id,
+  );
+  if (idx === -1) return;
+  const { vm } = instances[idx];
+  if (!vm) return;
+  userOnClose?.(vm);
+  const removedHeight = vm?.el?.offsetHeight || vm?.$el?.offsetHeight;
+  instances.splice(idx, 1);
+  // adjust other instances vertical offset
+  const len = instances.length;
+  if (len < 1) return;
+  for (let i = idx; i < len; i++) {
+    const pos
+      = Number.parseInt(
+        instances[i]?.vm?.el?.style?.top || instances[i]?.vm?.$el?.style?.top,
+        10,
+      )
+      - removedHeight
+      - 16;
+    instances[i]?.vm?.component?.props?.offset
+    && (instances[i].vm.component!.props.offset = pos);
+    instances[i]?.vm?._props?.offset && (instances[i].vm._props.offset = pos);
+  }
+}
+
+Toast.close = close;
+
+export { Toast, TOAST_TYPE };
diff --git a/txim/src/TUIKit/components/common/Toast/index.vue b/txim/src/TUIKit/components/common/Toast/index.vue
new file mode 100644
index 00000000..3ae38a18
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Toast/index.vue
@@ -0,0 +1,183 @@
+<template>
+  <transition
+    name="fade"
+    @after-leave="$emit('destroy')"
+  >
+    <div
+      v-show="visible"
+      class="message"
+      :class="[handleStyle(type), isH5 && 'message-h5']"
+      :style="customStyle"
+    >
+      <p v-if="!isH5">
+        {{ message }}
+      </p>
+      <span v-if="isH5">{{ message }}</span>
+    </div>
+  </transition>
+</template>
+<script lang="ts" setup>
+import {
+  computed,
+  CSSProperties,
+  onMounted,
+  ref,
+  watch,
+} from '../../../adapter-vue';
+import { isH5 } from '../../../utils/env';
+import TOAST_TYPE from './type';
+
+const props = defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  repeatNum: {
+    type: Number,
+    default: 1,
+  },
+  id: {
+    type: String,
+    default: '',
+  },
+  onClose: {
+    type: Function,
+    required: false,
+  },
+  offset: {
+    type: Number,
+    default: 20,
+  },
+  zIndex: {
+    type: Number,
+    default: 0,
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const visible = ref(false);
+let timer: any;
+
+const startTimer = () => {
+  if (props.duration > 0) {
+    timer = setTimeout(() => {
+      if (visible.value) {
+        close();
+      }
+    }, props.duration);
+  }
+};
+
+const clearTimer = () => {
+  clearTimeout(timer);
+};
+
+const close = () => {
+  visible.value = false;
+  if (typeof props.onClose === 'function') {
+    props.onClose();
+  }
+};
+
+watch(
+  () => props.repeatNum,
+  () => {
+    clearTimer();
+    startTimer();
+  },
+);
+
+const customStyle = computed<CSSProperties>(() => ({
+  top: `${props.offset}px`,
+  zIndex: props.zIndex,
+}));
+
+onMounted(() => {
+  startTimer();
+  visible.value = true;
+});
+
+const handleStyle = (type?: string) => {
+  if (
+    type
+      && (type === TOAST_TYPE.ERROR
+      || type === TOAST_TYPE.SUCCESS
+      || type === TOAST_TYPE.WARNING)
+  )
+    return type;
+  return TOAST_TYPE.NORMAL;
+};
+</script>
+<style lang="scss" scoped>
+@import "../../../assets/styles/common";
+
+.message {
+  position: fixed;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  max-width: 450px;
+  width: fit-content;
+  justify-content: center;
+  align-items: center;
+
+  p {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    padding: 10px 15px;
+    width: fit-content;
+    word-break: break-all;
+  }
+}
+
+.message-h5 {
+  position: absolute;
+  top: 20px !important;
+  margin: 0 auto;
+  max-width: 80%;
+  width: fit-content;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  padding: 10px 15px;
+
+  span {
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    font-size: 14px;
+    letter-spacing: 0;
+    text-align: center;
+    word-break: break-all;
+  }
+}
+
+.success {
+  border: 1px solid #e4f2da;
+  background: #f2f9ec;
+  color: #7ebf50;
+}
+
+.error {
+  border: 1px solid #fde2e2;
+  background: #fef0f0;
+  color: #f46c6e;
+}
+
+.normal {
+  border: 1px solid #e9e9eb;
+  background: #f4f4f5;
+  color: #909398;
+}
+
+.warning {
+  border: 1px solid #faf0e2;
+  background: #fdf8f1;
+  color: #e4b877;
+}
+</style>
diff --git a/txim/src/TUIKit/components/common/Toast/type.ts b/txim/src/TUIKit/components/common/Toast/type.ts
new file mode 100644
index 00000000..e978f133
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Toast/type.ts
@@ -0,0 +1,8 @@
+const TOAST_TYPE = {
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ERROR: 'error',
+  NORMAL: 'normal',
+};
+
+export default TOAST_TYPE;
diff --git a/txim/src/TUIKit/components/common/Transfer/index.ts b/txim/src/TUIKit/components/common/Transfer/index.ts
new file mode 100644
index 00000000..b3053b27
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Transfer/index.ts
@@ -0,0 +1,2 @@
+import Transfer from './index.vue';
+export default Transfer;
diff --git a/txim/src/TUIKit/components/common/Transfer/index.vue b/txim/src/TUIKit/components/common/Transfer/index.vue
new file mode 100644
index 00000000..3cda8ec6
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Transfer/index.vue
@@ -0,0 +1,332 @@
+<template>
+  <div
+    class="transfer"
+    :class="[!isPC ? 'transfer-h5' : '', isWeChat ? 'transfer-h5-wechat' : '']"
+  >
+    <header
+      v-if="!isPC"
+      class="transfer-header transfer-h5-header"
+    >
+      <div
+        v-if="!props.isHiddenBackIcon"
+        @click="cancel"
+      >
+        <Icon
+          class="icon"
+          :file="backIcon"
+          :width="'18px'"
+          :height="'18px'"
+        />
+      </div>
+      <span class="title">{{ transferTitle }}</span>
+      <span class="space" />
+    </header>
+    <main class="main">
+      <div class="left">
+        <header class="transfer-header">
+          <!-- PC triggers @keyup.enter -->
+          <input
+            v-if="isPC && isTransferSearch"
+            type="text"
+            :value="searchValue"
+            :placeholder="TUITranslateService.t('component.请输入userID')"
+            enterkeyhint="search"
+            :class="[isUniFrameWork ? 'left-uniapp-input' : '']"
+            @keyup.enter="handleInput"
+          >
+          <!-- not PC triggers blur -->
+          <input
+            v-if="!isPC && isTransferSearch"
+            type="text"
+            :placeholder="TUITranslateService.t('component.请输入userID')"
+            enterkeyhint="search"
+            :value="searchValue"
+            :class="[isUniFrameWork ? 'left-uniapp-input' : '']"
+            @blur="handleInput"
+            @confirm="handleInput"
+          >
+        </header>
+        <main class="transfer-left-main">
+          <ul class="transfer-list">
+            <li
+              v-if="optional.length > 1 && !isRadio"
+              class="transfer-list-item"
+              @click="selectedAll"
+            >
+              <Icon
+                v-if="transferSelectedList.length === optional.length"
+                :file="selectedIcon"
+                :width="'18px'"
+                :height="'18px'"
+              />
+              <i
+                v-else
+                class="icon-unselected"
+              />
+              <span class="select-all">{{
+                TUITranslateService.t("component.全选")
+              }}</span>
+            </li>
+            <li
+              v-for="item in transferList"
+              :key="item.userID"
+              class="transfer-list-item"
+              @click="selected(item)"
+            >
+              <Icon
+                v-if="transferSelectedList.indexOf(item) > -1"
+                :file="selectedIcon"
+                :class="[item.isDisabled && 'disabled']"
+                :width="'18px'"
+                :height="'18px'"
+              />
+              <i
+                v-else
+                :class="[item.isDisabled && 'disabled', 'icon-unselected']"
+              />
+              <template v-if="!isTransferCustomItem">
+                <img
+                  class="avatar"
+                  :src="
+                    item.avatar ||
+                      'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+                  "
+                  onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+                >
+                <span class="name">{{ item.nick || item.userID }}</span>
+                <span v-if="item.isDisabled">（{{ TUITranslateService.t("component.已在群中") }}）</span>
+              </template>
+              <template v-else>
+                <slot
+                  name="left"
+                  :data="item"
+                />
+              </template>
+            </li>
+            <li
+              v-if="transferTotal > transferList.length"
+              class="transfer-list-item more"
+              @click="getMore"
+            >
+              {{ TUITranslateService.t("component.查看更多") }}
+            </li>
+          </ul>
+        </main>
+      </div>
+      <div class="right">
+        <header
+          v-if="isPC"
+          class="transfer-header"
+        >
+          {{ transferTitle }}
+        </header>
+        <ul
+          v-if="resultShow"
+          class="transfer-list"
+        >
+          <p
+            v-if="transferSelectedList.length > 0 && isPC"
+            class="transfer-text"
+          >
+            {{ TUITranslateService.t("component.已选中")
+            }}{{ transferSelectedList.length
+            }}{{ TUITranslateService.t("component.人") }}
+          </p>
+          <li
+            v-for="(item, index) in transferSelectedList"
+            :key="index"
+            class="transfer-list-item space-between"
+          >
+            <aside class="transfer-list-item-content">
+              <template v-if="!isTransferCustomItem">
+                <img
+                  class="avatar"
+                  :src="
+                    item.avatar ||
+                      'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+                  "
+                  onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+                >
+                <span
+                  v-if="isPC"
+                  class="name"
+                >{{ item.nick || item.userID }}</span>
+              </template>
+              <template v-else>
+                <slot
+                  name="right"
+                  :data="item"
+                />
+              </template>
+            </aside>
+            <span
+              v-if="isPC"
+              @click="selected(item)"
+            >
+              <Icon
+                :file="cancelIcon"
+                :width="'18px'"
+                :height="'18px'"
+              />
+            </span>
+          </li>
+        </ul>
+        <footer class="transfer-right-footer">
+          <button
+            class="btn btn-cancel"
+            @click="cancel"
+          >
+            {{ TUITranslateService.t("component.取消") }}
+          </button>
+          <button
+            v-if="transferSelectedList.length > 0"
+            class="btn"
+            @click="submit"
+          >
+            {{ TUITranslateService.t("component.完成") }}
+          </button>
+          <button
+            v-else
+            class="btn btn-no"
+            @click="submit"
+          >
+            {{ TUITranslateService.t("component.完成") }}
+          </button>
+        </footer>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watchEffect, computed } from '../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { ITransferListItem } from '../../../interface';
+import Icon from '../Icon.vue';
+import selectedIcon from '../../../assets/icon/selected.svg';
+import backIcon from '../../../assets/icon/back.svg';
+import cancelIcon from '../../../assets/icon/cancel.svg';
+import { isPC, isUniFrameWork, isWeChat } from '../../../utils/env';
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  selectedList: {
+    type: Array,
+    default: () => [],
+  },
+  isSearch: {
+    type: Boolean,
+    default: true,
+  },
+  isRadio: {
+    type: Boolean,
+    default: false,
+  },
+  isCustomItem: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+  resultShow: {
+    type: Boolean,
+    default: true,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  isHiddenBackIcon: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const transferList = ref<ITransferListItem[]>([]);
+const transferTotal = ref<number>(0);
+const transferSelectedList = ref<ITransferListItem[]>([]);
+const isTransferSearch = ref(true);
+const isTransferCustomItem = ref(false);
+const transferTitle = ref('');
+const searchValue = ref('');
+
+watchEffect(() => {
+  if (props.isCustomItem) {
+    for (let index = 0; index < props.list.length; index++) {
+      if (
+        (props.list[index] as any).conversationID.indexOf('@TIM#SYSTEM') > -1
+      ) {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.list.splice(index, 1);
+      }
+      transferList.value = props.list as ITransferListItem[];
+    }
+  } else {
+    transferList.value = props.list as ITransferListItem[];
+  }
+  transferTotal.value = props.total ? props.total : props.list.length;
+  transferSelectedList.value = (props.selectedList && props.selectedList.length > 0 ? props.selectedList : transferSelectedList.value) as any;
+  isTransferSearch.value = props.isSearch;
+  isTransferCustomItem.value = props.isCustomItem;
+  transferTitle.value = props.title;
+});
+
+const emit = defineEmits(['search', 'submit', 'cancel', 'getMore']);
+
+const optional = computed(() =>
+  transferList.value.filter((item: any) => !item.isDisabled),
+);
+
+const handleInput = (e: any) => {
+  searchValue.value = e.target.value || e.detail.value;
+  emit('search', searchValue.value);
+};
+const selected = (item: any) => {
+  if (item.isDisabled) {
+    return;
+  }
+  let list: ITransferListItem[] = transferSelectedList.value;
+  const index: number = list.indexOf(item);
+  if (index > -1) {
+    return transferSelectedList.value.splice(index, 1);
+  }
+  if (props.isRadio) {
+    list = [];
+  }
+  list.push(item);
+  transferSelectedList.value = list;
+};
+
+const selectedAll = () => {
+  if (transferSelectedList.value.length === optional.value.length) {
+    transferSelectedList.value = [];
+  } else {
+    transferSelectedList.value = [...optional.value];
+  }
+};
+
+const submit = () => {
+  emit('submit', transferSelectedList.value);
+  searchValue.value = '';
+};
+
+const cancel = () => {
+  emit('cancel');
+  searchValue.value = '';
+};
+
+const getMore = () => {
+  emit('getMore');
+};
+</script>
+
+<style lang="scss" scoped src="./style/transfer.scss"></style>
diff --git a/txim/src/TUIKit/components/common/Transfer/style/color.scss b/txim/src/TUIKit/components/common/Transfer/style/color.scss
new file mode 100644
index 00000000..64406302
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Transfer/style/color.scss
@@ -0,0 +1,68 @@
+.main {
+  background: #FFF;
+  border: 1px solid #E0E0E0;
+  box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.06);
+
+  .left {
+    border-right: 1px solid #E8E8E9;
+  }
+
+  .transfer-header {
+    font-weight: 500;
+    color: #000;
+    letter-spacing: 0;
+
+    input {
+      background: #FFF;
+      border: 1px solid #DEE0E3;
+      font-weight: 500;
+      color: #8F959E;
+      letter-spacing: 0;
+    }
+  }
+
+  .transfer-list {
+    .transfer-text {
+      font-weight: 500;
+      color: #8F959E;
+      letter-spacing: 0;
+    }
+
+    &-item {
+      .disabled {
+        background: #eee;
+      }
+    }
+  }
+}
+
+.btn {
+  background: #3370FF;
+  border: 0 solid #2F80ED;
+  font-weight: 400;
+  color: #FFF;
+
+  &-cancel {
+    background: #FFF;
+    border: 1px solid #DDD;
+    color: #828282;
+  }
+}
+
+.btn-no {
+  background: #e8e8e9;
+  border: 1px solid #DDD;
+  font-weight: 400;
+  color: #FFF;
+}
+
+.transfer-h5-header {
+  background: #FFF;
+
+  .title {
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: #000;
+    letter-spacing: 0;
+  }
+}
diff --git a/txim/src/TUIKit/components/common/Transfer/style/h5.scss b/txim/src/TUIKit/components/common/Transfer/style/h5.scss
new file mode 100644
index 00000000..0ecaa867
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Transfer/style/h5.scss
@@ -0,0 +1,93 @@
+.transfer-h5 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &-wechat {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  &-header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 18px;
+    padding: 16px 18px;
+
+    .space, .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .main {
+    flex: 1;
+    flex-direction: column;
+    width: auto;
+    height: auto;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+    max-height: calc(100% - 50px);
+    padding: 0;
+
+    .avatar {
+      border-radius: 5px;
+    }
+
+    .left {
+      padding: 0;
+      flex: 1;
+      border: none;
+      display: flex;
+      flex-direction: column;
+
+      .transfer-header {
+        position: sticky;
+        top: 0;
+        padding: 0 18px;
+
+        input {
+          border-radius: 5px;
+          font-size: 14px;
+        }
+      }
+
+      &-uniapp-input {
+        height: 36px;
+      }
+    }
+
+    .right {
+      flex: 0;
+      flex-direction: row;
+      align-items: center;
+      box-shadow: inset 0 1px 0 0 #EEE;
+      padding: 8px 18px ;
+
+      .transfer-list {
+        flex-direction: row;
+        width: 0;
+
+        &-item {
+          &-content {
+            flex: none;
+          }
+        }
+      }
+
+      .transfer-right-footer {
+        padding: 6px 0;
+        display: flex;
+        align-items: center;
+
+        .btn {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
diff --git a/txim/src/TUIKit/components/common/Transfer/style/transfer.scss b/txim/src/TUIKit/components/common/Transfer/style/transfer.scss
new file mode 100644
index 00000000..477cbc53
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Transfer/style/transfer.scss
@@ -0,0 +1,13 @@
+@import '../../../../assets/styles/common';
+@import "./color";
+@import "./web";
+@import "./h5";
+
+.icon-unselected {
+    width: 18px;
+    height: 18px;
+    background: #FFF;
+    border: 1px solid #DDD;
+    border-radius: 11px;
+    box-sizing: border-box;
+}
diff --git a/txim/src/TUIKit/components/common/Transfer/style/web.scss b/txim/src/TUIKit/components/common/Transfer/style/web.scss
new file mode 100644
index 00000000..768f5924
--- /dev/null
+++ b/txim/src/TUIKit/components/common/Transfer/style/web.scss
@@ -0,0 +1,141 @@
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 5px;
+  font-size: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.main {
+  box-sizing: border-box;
+  width: 620px;
+  height: 394px;
+  display: flex;
+  border-radius: 8px;
+  padding: 20px 0;
+
+  .transfer-header {
+    font-size: 14px;
+    line-height: 14px;
+    padding-bottom: 20px;
+
+    input {
+      box-sizing: border-box;
+      width: 100%;
+      border-radius: 30px;
+      font-size: 10px;
+      line-height: 14px;
+      padding: 9px 12px;
+    }
+  }
+
+  .transfer-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .transfer-text {
+      font-size: 10px;
+      line-height: 14px;
+    }
+
+    &-item {
+      padding: 6px 0;
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      text-align: left;
+
+      &-content {
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
+
+      .avatar {
+        margin: 0 5px 0 8px;
+        border-radius: 50%;
+      }
+
+      .name {
+        width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+      }
+    }
+  }
+
+  .right {
+    padding: 0 20px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .transfer-right-footer {
+      align-self: flex-end;
+
+      .btn-cancel {
+        margin-right: 12px;
+      }
+    }
+
+    .transfer-list {
+      padding-right: 20px;
+      overflow-y: auto;
+    }
+  }
+
+  .left {
+    flex: 1;
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .transfer-header {
+      padding: 0 20px;
+    }
+
+    .transfer-left-main {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0 13px;
+    }
+  }
+}
+
+
+
+.btn {
+  padding: 4px 28px;
+  font-size: 12px;
+  line-height: 24px;
+  border-radius: 4px;
+}
+
+.btn-no {
+  padding: 4px 28px;
+  font-size: 12px;
+  line-height: 24px;
+  border-radius: 4px;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.select-all {
+  padding-left: 8px;
+  font-size: 14px;
+}
+
+.more {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+}
diff --git a/txim/src/TUIKit/components/index.ts b/txim/src/TUIKit/components/index.ts
new file mode 100644
index 00000000..cfd159a0
--- /dev/null
+++ b/txim/src/TUIKit/components/index.ts
@@ -0,0 +1,23 @@
+import TUIChat from "./TUIChat";
+import TUIConversation from "./TUIConversation";
+import TUISearch from "./TUISearch";
+import TUIContact from "./TUIContact";
+import TUIGroup from "./TUIGroup";
+
+const TUIComponents = {
+  TUIChat,
+  TUIConversation,
+  TUIContact,
+  TUISearch,
+  TUIGroup
+};
+
+export default TUIComponents;
+
+export {
+  TUIChat,
+  TUIConversation,
+  TUIContact,
+  TUISearch,
+  TUIGroup,
+};
diff --git a/txim/src/TUIKit/constant.ts b/txim/src/TUIKit/constant.ts
new file mode 100644
index 00000000..28249252
--- /dev/null
+++ b/txim/src/TUIKit/constant.ts
@@ -0,0 +1,48 @@
+export const CONV_OPERATION = {
+  DELETE: "delete",
+  ISPINNED: "ispinned",
+  DISPINNED: "dispinned",
+  MUTE: "mute",
+  NOTMUTE: "notmute",
+};
+
+export const CONV_CREATE_TYPE = {
+  TYPEC2C: "isC2C",
+  TYPEGROUP: "isGroup",
+  JOINGROUP: "joinGroup",
+};
+
+export const CHAT_MSG_CUSTOM_TYPE = {
+  SERVICE: "consultion",
+  EVALUATE: "evaluation",
+  LINK: "text_link",
+  CALL: 1,
+  ORDER: "order",
+};
+
+export const DIALOG_CONTENT = {
+  USERLIST: "userList",
+  GROUPINFORMATION: "groupInformation",
+};
+
+export const EMOJI_TYPE = {
+  BASIC: "basic",
+  BIG: "big",
+  CUSTOM: "CUSTOM",
+};
+
+export const CONTACT_INFO_LABEL_POSITION = {
+  LEFT: "left",
+  TOP: "top",
+};
+
+export const CONTACT_INFO_MORE_EDIT_TYPE = {
+  INPUT: "input",
+  TEXTAREA: "textarea",
+  SWITCH: "switch",
+};
+
+export const CONTACT_INFO_BUTTON_TYPE = {
+  SUBMIT: "submit",
+  CANCEL: "cancel",
+};
diff --git a/txim/src/TUIKit/debug/GenerateTestUserSig.js b/txim/src/TUIKit/debug/GenerateTestUserSig.js
new file mode 100644
index 00000000..45de9303
--- /dev/null
+++ b/txim/src/TUIKit/debug/GenerateTestUserSig.js
@@ -0,0 +1,37 @@
+import LibGenerateTestUserSig from './lib-generate-test-usersig-es.min.js';
+/**
+ * Signature expiration time, which should not be too short
+ * Time unit: second
+ * Default time: 7 * 24 * 60 * 60 = 604800 = 7days
+ */
+const EXPIRETIME = 604800;
+
+/**
+ * Module: GenerateTestUserSig
+ *
+ * Description: Generates UserSig for testing. UserSig is a security signature designed by Tencent Cloud for its cloud services.
+ * It is calculated based on `SDKAppID`, `UserID`, and `EXPIRETIME` using the HMAC-SHA256 encryption algorithm.
+ *
+ * Attention: For the following reasons, do not use the code below in your commercial application.
+ *
+ * The code may be able to calculate UserSig correctly, but it is only for quick testing of the SDK’s basic features, not for commercial applications.
+ * `SECRETKEY` in client code can be easily decompiled and reversed, especially on web.
+ * Once your key is disclosed, attackers will be able to steal your Tencent Cloud traffic.
+ *
+ * The correct method is to deploy the `UserSig` calculation code and encryption key on your project server so that your application can request from your server a `UserSig` that is calculated whenever one is needed.
+ * Given that it is more difficult to hack a server than a client application, server-end calculation can better protect your key.
+ *
+ * Reference: https://cloud.tencent.com/document/product/647/17275#Server
+ */
+
+function genTestUserSig(options) {
+  const { SDKAppID, secretKey, userID } = options;
+  const generator = new LibGenerateTestUserSig(SDKAppID, secretKey, EXPIRETIME);
+  const userSig = generator.genTestUserSig(userID);
+  return {
+    SDKAppID,
+    userSig,
+  };
+}
+
+export { genTestUserSig, EXPIRETIME };
diff --git a/txim/src/TUIKit/debug/index.d.ts b/txim/src/TUIKit/debug/index.d.ts
new file mode 100644
index 00000000..5b437e14
--- /dev/null
+++ b/txim/src/TUIKit/debug/index.d.ts
@@ -0,0 +1,2 @@
+export function genTestUserSig({ SDKAppID: number, secretKey: string, userID: string }): any;
+export const EXPIRETIME: number;
diff --git a/txim/src/TUIKit/debug/index.js b/txim/src/TUIKit/debug/index.js
new file mode 100644
index 00000000..515203ad
--- /dev/null
+++ b/txim/src/TUIKit/debug/index.js
@@ -0,0 +1 @@
+export * from "./GenerateTestUserSig";
diff --git a/txim/src/TUIKit/debug/lib-generate-test-usersig-es.min.js b/txim/src/TUIKit/debug/lib-generate-test-usersig-es.min.js
new file mode 100644
index 00000000..b01b70b7
--- /dev/null
+++ b/txim/src/TUIKit/debug/lib-generate-test-usersig-es.min.js
@@ -0,0 +1,2 @@
+/*eslint-disable*/
+var e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},t=[],r=[],n="undefined"!=typeof Uint8Array?Uint8Array:Array,i=!1;function o(){i=!0;for(var e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",n=0,o=e.length;n<o;++n)t[n]=e[n],r[e.charCodeAt(n)]=n;r["-".charCodeAt(0)]=62,r["_".charCodeAt(0)]=63}function a(e,r,n){for(var i,o,a=[],s=r;s<n;s+=3)i=(e[s]<<16)+(e[s+1]<<8)+e[s+2],a.push(t[(o=i)>>18&63]+t[o>>12&63]+t[o>>6&63]+t[63&o]);return a.join("")}function s(e){var r;i||o();for(var n=e.length,s=n%3,h="",l=[],f=0,c=n-s;f<c;f+=16383)l.push(a(e,f,f+16383>c?c:f+16383));return 1===s?(r=e[n-1],h+=t[r>>2],h+=t[r<<4&63],h+="=="):2===s&&(r=(e[n-2]<<8)+e[n-1],h+=t[r>>10],h+=t[r>>4&63],h+=t[r<<2&63],h+="="),l.push(h),l.join("")}function h(e,t,r,n,i){var o,a,s=8*i-n-1,h=(1<<s)-1,l=h>>1,f=-7,c=r?i-1:0,u=r?-1:1,d=e[t+c];for(c+=u,o=d&(1<<-f)-1,d>>=-f,f+=s;f>0;o=256*o+e[t+c],c+=u,f-=8);for(a=o&(1<<-f)-1,o>>=-f,f+=n;f>0;a=256*a+e[t+c],c+=u,f-=8);if(0===o)o=1-l;else{if(o===h)return a?NaN:1/0*(d?-1:1);a+=Math.pow(2,n),o-=l}return(d?-1:1)*a*Math.pow(2,o-n)}function l(e,t,r,n,i,o){var a,s,h,l=8*o-i-1,f=(1<<l)-1,c=f>>1,u=23===i?Math.pow(2,-24)-Math.pow(2,-77):0,d=n?0:o-1,p=n?1:-1,_=t<0||0===t&&1/t<0?1:0;for(t=Math.abs(t),isNaN(t)||t===1/0?(s=isNaN(t)?1:0,a=f):(a=Math.floor(Math.log(t)/Math.LN2),t*(h=Math.pow(2,-a))<1&&(a--,h*=2),(t+=a+c>=1?u/h:u*Math.pow(2,1-c))*h>=2&&(a++,h/=2),a+c>=f?(s=0,a=f):a+c>=1?(s=(t*h-1)*Math.pow(2,i),a+=c):(s=t*Math.pow(2,c-1)*Math.pow(2,i),a=0));i>=8;e[r+d]=255&s,d+=p,s/=256,i-=8);for(a=a<<i|s,l+=i;l>0;e[r+d]=255&a,d+=p,a/=256,l-=8);e[r+d-p]|=128*_}var f={}.toString,c=Array.isArray||function(e){return"[object Array]"==f.call(e)};function u(){return p.TYPED_ARRAY_SUPPORT?2147483647:1073741823}function d(e,t){if(u()<t)throw new RangeError("Invalid typed array length");return p.TYPED_ARRAY_SUPPORT?(e=new Uint8Array(t)).__proto__=p.prototype:(null===e&&(e=new p(t)),e.length=t),e}function p(e,t,r){if(!(p.TYPED_ARRAY_SUPPORT||this instanceof p))return new p(e,t,r);if("number"==typeof e){if("string"==typeof t)throw new Error("If encoding is specified then the first argument must be a string");return v(this,e)}return _(this,e,t,r)}function _(e,t,r,n){if("number"==typeof t)throw new TypeError('"value" argument must not be a number');return"undefined"!=typeof ArrayBuffer&&t instanceof ArrayBuffer?function(e,t,r,n){if(t.byteLength,r<0||t.byteLength<r)throw new RangeError("'offset' is out of bounds");if(t.byteLength<r+(n||0))throw new RangeError("'length' is out of bounds");t=void 0===r&&void 0===n?new Uint8Array(t):void 0===n?new Uint8Array(t,r):new Uint8Array(t,r,n);p.TYPED_ARRAY_SUPPORT?(e=t).__proto__=p.prototype:e=w(e,t);return e}(e,t,r,n):"string"==typeof t?function(e,t,r){"string"==typeof r&&""!==r||(r="utf8");if(!p.isEncoding(r))throw new TypeError('"encoding" must be a valid string encoding');var n=0|m(t,r),i=(e=d(e,n)).write(t,r);i!==n&&(e=e.slice(0,i));return e}(e,t,r):function(e,t){if(y(t)){var r=0|b(t.length);return 0===(e=d(e,r)).length?e:(t.copy(e,0,0,r),e)}if(t){if("undefined"!=typeof ArrayBuffer&&t.buffer instanceof ArrayBuffer||"length"in t)return"number"!=typeof t.length||(n=t.length)!=n?d(e,0):w(e,t);if("Buffer"===t.type&&c(t.data))return w(e,t.data)}var n;throw new TypeError("First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.")}(e,t)}function g(e){if("number"!=typeof e)throw new TypeError('"size" argument must be a number');if(e<0)throw new RangeError('"size" argument must not be negative')}function v(e,t){if(g(t),e=d(e,t<0?0:0|b(t)),!p.TYPED_ARRAY_SUPPORT)for(var r=0;r<t;++r)e[r]=0;return e}function w(e,t){var r=t.length<0?0:0|b(t.length);e=d(e,r);for(var n=0;n<r;n+=1)e[n]=255&t[n];return e}function b(e){if(e>=u())throw new RangeError("Attempt to allocate Buffer larger than maximum size: 0x"+u().toString(16)+" bytes");return 0|e}function y(e){return!(null==e||!e._isBuffer)}function m(e,t){if(y(e))return e.length;if("undefined"!=typeof ArrayBuffer&&"function"==typeof ArrayBuffer.isView&&(ArrayBuffer.isView(e)||e instanceof ArrayBuffer))return e.byteLength;"string"!=typeof e&&(e=""+e);var r=e.length;if(0===r)return 0;for(var n=!1;;)switch(t){case"ascii":case"latin1":case"binary":return r;case"utf8":case"utf-8":case void 0:return q(e).length;case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return 2*r;case"hex":return r>>>1;case"base64":return V(e).length;default:if(n)return q(e).length;t=(""+t).toLowerCase(),n=!0}}function k(e,t,r){var n=!1;if((void 0===t||t<0)&&(t=0),t>this.length)return"";if((void 0===r||r>this.length)&&(r=this.length),r<=0)return"";if((r>>>=0)<=(t>>>=0))return"";for(e||(e="utf8");;)switch(e){case"hex":return O(this,t,r);case"utf8":case"utf-8":return C(this,t,r);case"ascii":return I(this,t,r);case"latin1":case"binary":return P(this,t,r);case"base64":return M(this,t,r);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return U(this,t,r);default:if(n)throw new TypeError("Unknown encoding: "+e);e=(e+"").toLowerCase(),n=!0}}function E(e,t,r){var n=e[t];e[t]=e[r],e[r]=n}function S(e,t,r,n,i){if(0===e.length)return-1;if("string"==typeof r?(n=r,r=0):r>2147483647?r=2147483647:r<-2147483648&&(r=-2147483648),r=+r,isNaN(r)&&(r=i?0:e.length-1),r<0&&(r=e.length+r),r>=e.length){if(i)return-1;r=e.length-1}else if(r<0){if(!i)return-1;r=0}if("string"==typeof t&&(t=p.from(t,n)),y(t))return 0===t.length?-1:x(e,t,r,n,i);if("number"==typeof t)return t&=255,p.TYPED_ARRAY_SUPPORT&&"function"==typeof Uint8Array.prototype.indexOf?i?Uint8Array.prototype.indexOf.call(e,t,r):Uint8Array.prototype.lastIndexOf.call(e,t,r):x(e,[t],r,n,i);throw new TypeError("val must be string, number or Buffer")}function x(e,t,r,n,i){var o,a=1,s=e.length,h=t.length;if(void 0!==n&&("ucs2"===(n=String(n).toLowerCase())||"ucs-2"===n||"utf16le"===n||"utf-16le"===n)){if(e.length<2||t.length<2)return-1;a=2,s/=2,h/=2,r/=2}function l(e,t){return 1===a?e[t]:e.readUInt16BE(t*a)}if(i){var f=-1;for(o=r;o<s;o++)if(l(e,o)===l(t,-1===f?0:o-f)){if(-1===f&&(f=o),o-f+1===h)return f*a}else-1!==f&&(o-=o-f),f=-1}else for(r+h>s&&(r=s-h),o=r;o>=0;o--){for(var c=!0,u=0;u<h;u++)if(l(e,o+u)!==l(t,u)){c=!1;break}if(c)return o}return-1}function R(e,t,r,n){r=Number(r)||0;var i=e.length-r;n?(n=Number(n))>i&&(n=i):n=i;var o=t.length;if(o%2!=0)throw new TypeError("Invalid hex string");n>o/2&&(n=o/2);for(var a=0;a<n;++a){var s=parseInt(t.substr(2*a,2),16);if(isNaN(s))return a;e[r+a]=s}return a}function A(e,t,r,n){return G(q(t,e.length-r),e,r,n)}function B(e,t,r,n){return G(function(e){for(var t=[],r=0;r<e.length;++r)t.push(255&e.charCodeAt(r));return t}(t),e,r,n)}function z(e,t,r,n){return B(e,t,r,n)}function L(e,t,r,n){return G(V(t),e,r,n)}function T(e,t,r,n){return G(function(e,t){for(var r,n,i,o=[],a=0;a<e.length&&!((t-=2)<0);++a)r=e.charCodeAt(a),n=r>>8,i=r%256,o.push(i),o.push(n);return o}(t,e.length-r),e,r,n)}function M(e,t,r){return 0===t&&r===e.length?s(e):s(e.slice(t,r))}function C(e,t,r){r=Math.min(e.length,r);for(var n=[],i=t;i<r;){var o,a,s,h,l=e[i],f=null,c=l>239?4:l>223?3:l>191?2:1;if(i+c<=r)switch(c){case 1:l<128&&(f=l);break;case 2:128==(192&(o=e[i+1]))&&(h=(31&l)<<6|63&o)>127&&(f=h);break;case 3:o=e[i+1],a=e[i+2],128==(192&o)&&128==(192&a)&&(h=(15&l)<<12|(63&o)<<6|63&a)>2047&&(h<55296||h>57343)&&(f=h);break;case 4:o=e[i+1],a=e[i+2],s=e[i+3],128==(192&o)&&128==(192&a)&&128==(192&s)&&(h=(15&l)<<18|(63&o)<<12|(63&a)<<6|63&s)>65535&&h<1114112&&(f=h)}null===f?(f=65533,c=1):f>65535&&(f-=65536,n.push(f>>>10&1023|55296),f=56320|1023&f),n.push(f),i+=c}return function(e){var t=e.length;if(t<=D)return String.fromCharCode.apply(String,e);var r="",n=0;for(;n<t;)r+=String.fromCharCode.apply(String,e.slice(n,n+=D));return r}(n)}p.TYPED_ARRAY_SUPPORT=void 0===e.TYPED_ARRAY_SUPPORT||e.TYPED_ARRAY_SUPPORT,p.poolSize=8192,p._augment=function(e){return e.__proto__=p.prototype,e},p.from=function(e,t,r){return _(null,e,t,r)},p.TYPED_ARRAY_SUPPORT&&(p.prototype.__proto__=Uint8Array.prototype,p.__proto__=Uint8Array),p.alloc=function(e,t,r){return function(e,t,r,n){return g(t),t<=0?d(e,t):void 0!==r?"string"==typeof n?d(e,t).fill(r,n):d(e,t).fill(r):d(e,t)}(null,e,t,r)},p.allocUnsafe=function(e){return v(null,e)},p.allocUnsafeSlow=function(e){return v(null,e)},p.isBuffer=$,p.compare=function(e,t){if(!y(e)||!y(t))throw new TypeError("Arguments must be Buffers");if(e===t)return 0;for(var r=e.length,n=t.length,i=0,o=Math.min(r,n);i<o;++i)if(e[i]!==t[i]){r=e[i],n=t[i];break}return r<n?-1:n<r?1:0},p.isEncoding=function(e){switch(String(e).toLowerCase()){case"hex":case"utf8":case"utf-8":case"ascii":case"latin1":case"binary":case"base64":case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return!0;default:return!1}},p.concat=function(e,t){if(!c(e))throw new TypeError('"list" argument must be an Array of Buffers');if(0===e.length)return p.alloc(0);var r;if(void 0===t)for(t=0,r=0;r<e.length;++r)t+=e[r].length;var n=p.allocUnsafe(t),i=0;for(r=0;r<e.length;++r){var o=e[r];if(!y(o))throw new TypeError('"list" argument must be an Array of Buffers');o.copy(n,i),i+=o.length}return n},p.byteLength=m,p.prototype._isBuffer=!0,p.prototype.swap16=function(){var e=this.length;if(e%2!=0)throw new RangeError("Buffer size must be a multiple of 16-bits");for(var t=0;t<e;t+=2)E(this,t,t+1);return this},p.prototype.swap32=function(){var e=this.length;if(e%4!=0)throw new RangeError("Buffer size must be a multiple of 32-bits");for(var t=0;t<e;t+=4)E(this,t,t+3),E(this,t+1,t+2);return this},p.prototype.swap64=function(){var e=this.length;if(e%8!=0)throw new RangeError("Buffer size must be a multiple of 64-bits");for(var t=0;t<e;t+=8)E(this,t,t+7),E(this,t+1,t+6),E(this,t+2,t+5),E(this,t+3,t+4);return this},p.prototype.toString=function(){var e=0|this.length;return 0===e?"":0===arguments.length?C(this,0,e):k.apply(this,arguments)},p.prototype.equals=function(e){if(!y(e))throw new TypeError("Argument must be a Buffer");return this===e||0===p.compare(this,e)},p.prototype.inspect=function(){var e="";return this.length>0&&(e=this.toString("hex",0,50).match(/.{2}/g).join(" "),this.length>50&&(e+=" ... ")),"<Buffer "+e+">"},p.prototype.compare=function(e,t,r,n,i){if(!y(e))throw new TypeError("Argument must be a Buffer");if(void 0===t&&(t=0),void 0===r&&(r=e?e.length:0),void 0===n&&(n=0),void 0===i&&(i=this.length),t<0||r>e.length||n<0||i>this.length)throw new RangeError("out of range index");if(n>=i&&t>=r)return 0;if(n>=i)return-1;if(t>=r)return 1;if(this===e)return 0;for(var o=(i>>>=0)-(n>>>=0),a=(r>>>=0)-(t>>>=0),s=Math.min(o,a),h=this.slice(n,i),l=e.slice(t,r),f=0;f<s;++f)if(h[f]!==l[f]){o=h[f],a=l[f];break}return o<a?-1:a<o?1:0},p.prototype.includes=function(e,t,r){return-1!==this.indexOf(e,t,r)},p.prototype.indexOf=function(e,t,r){return S(this,e,t,r,!0)},p.prototype.lastIndexOf=function(e,t,r){return S(this,e,t,r,!1)},p.prototype.write=function(e,t,r,n){if(void 0===t)n="utf8",r=this.length,t=0;else if(void 0===r&&"string"==typeof t)n=t,r=this.length,t=0;else{if(!isFinite(t))throw new Error("Buffer.write(string, encoding, offset[, length]) is no longer supported");t|=0,isFinite(r)?(r|=0,void 0===n&&(n="utf8")):(n=r,r=void 0)}var i=this.length-t;if((void 0===r||r>i)&&(r=i),e.length>0&&(r<0||t<0)||t>this.length)throw new RangeError("Attempt to write outside buffer bounds");n||(n="utf8");for(var o=!1;;)switch(n){case"hex":return R(this,e,t,r);case"utf8":case"utf-8":return A(this,e,t,r);case"ascii":return B(this,e,t,r);case"latin1":case"binary":return z(this,e,t,r);case"base64":return L(this,e,t,r);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return T(this,e,t,r);default:if(o)throw new TypeError("Unknown encoding: "+n);n=(""+n).toLowerCase(),o=!0}},p.prototype.toJSON=function(){return{type:"Buffer",data:Array.prototype.slice.call(this._arr||this,0)}};var D=4096;function I(e,t,r){var n="";r=Math.min(e.length,r);for(var i=t;i<r;++i)n+=String.fromCharCode(127&e[i]);return n}function P(e,t,r){var n="";r=Math.min(e.length,r);for(var i=t;i<r;++i)n+=String.fromCharCode(e[i]);return n}function O(e,t,r){var n=e.length;(!t||t<0)&&(t=0),(!r||r<0||r>n)&&(r=n);for(var i="",o=t;o<r;++o)i+=X(e[o]);return i}function U(e,t,r){for(var n=e.slice(t,r),i="",o=0;o<n.length;o+=2)i+=String.fromCharCode(n[o]+256*n[o+1]);return i}function H(e,t,r){if(e%1!=0||e<0)throw new RangeError("offset is not uint");if(e+t>r)throw new RangeError("Trying to access beyond buffer length")}function F(e,t,r,n,i,o){if(!y(e))throw new TypeError('"buffer" argument must be a Buffer instance');if(t>i||t<o)throw new RangeError('"value" argument is out of bounds');if(r+n>e.length)throw new RangeError("Index out of range")}function N(e,t,r,n){t<0&&(t=65535+t+1);for(var i=0,o=Math.min(e.length-r,2);i<o;++i)e[r+i]=(t&255<<8*(n?i:1-i))>>>8*(n?i:1-i)}function Z(e,t,r,n){t<0&&(t=4294967295+t+1);for(var i=0,o=Math.min(e.length-r,4);i<o;++i)e[r+i]=t>>>8*(n?i:3-i)&255}function j(e,t,r,n,i,o){if(r+n>e.length)throw new RangeError("Index out of range");if(r<0)throw new RangeError("Index out of range")}function W(e,t,r,n,i){return i||j(e,0,r,4),l(e,t,r,n,23,4),r+4}function Y(e,t,r,n,i){return i||j(e,0,r,8),l(e,t,r,n,52,8),r+8}p.prototype.slice=function(e,t){var r,n=this.length;if((e=~~e)<0?(e+=n)<0&&(e=0):e>n&&(e=n),(t=void 0===t?n:~~t)<0?(t+=n)<0&&(t=0):t>n&&(t=n),t<e&&(t=e),p.TYPED_ARRAY_SUPPORT)(r=this.subarray(e,t)).__proto__=p.prototype;else{var i=t-e;r=new p(i,void 0);for(var o=0;o<i;++o)r[o]=this[o+e]}return r},p.prototype.readUIntLE=function(e,t,r){e|=0,t|=0,r||H(e,t,this.length);for(var n=this[e],i=1,o=0;++o<t&&(i*=256);)n+=this[e+o]*i;return n},p.prototype.readUIntBE=function(e,t,r){e|=0,t|=0,r||H(e,t,this.length);for(var n=this[e+--t],i=1;t>0&&(i*=256);)n+=this[e+--t]*i;return n},p.prototype.readUInt8=function(e,t){return t||H(e,1,this.length),this[e]},p.prototype.readUInt16LE=function(e,t){return t||H(e,2,this.length),this[e]|this[e+1]<<8},p.prototype.readUInt16BE=function(e,t){return t||H(e,2,this.length),this[e]<<8|this[e+1]},p.prototype.readUInt32LE=function(e,t){return t||H(e,4,this.length),(this[e]|this[e+1]<<8|this[e+2]<<16)+16777216*this[e+3]},p.prototype.readUInt32BE=function(e,t){return t||H(e,4,this.length),16777216*this[e]+(this[e+1]<<16|this[e+2]<<8|this[e+3])},p.prototype.readIntLE=function(e,t,r){e|=0,t|=0,r||H(e,t,this.length);for(var n=this[e],i=1,o=0;++o<t&&(i*=256);)n+=this[e+o]*i;return n>=(i*=128)&&(n-=Math.pow(2,8*t)),n},p.prototype.readIntBE=function(e,t,r){e|=0,t|=0,r||H(e,t,this.length);for(var n=t,i=1,o=this[e+--n];n>0&&(i*=256);)o+=this[e+--n]*i;return o>=(i*=128)&&(o-=Math.pow(2,8*t)),o},p.prototype.readInt8=function(e,t){return t||H(e,1,this.length),128&this[e]?-1*(255-this[e]+1):this[e]},p.prototype.readInt16LE=function(e,t){t||H(e,2,this.length);var r=this[e]|this[e+1]<<8;return 32768&r?4294901760|r:r},p.prototype.readInt16BE=function(e,t){t||H(e,2,this.length);var r=this[e+1]|this[e]<<8;return 32768&r?4294901760|r:r},p.prototype.readInt32LE=function(e,t){return t||H(e,4,this.length),this[e]|this[e+1]<<8|this[e+2]<<16|this[e+3]<<24},p.prototype.readInt32BE=function(e,t){return t||H(e,4,this.length),this[e]<<24|this[e+1]<<16|this[e+2]<<8|this[e+3]},p.prototype.readFloatLE=function(e,t){return t||H(e,4,this.length),h(this,e,!0,23,4)},p.prototype.readFloatBE=function(e,t){return t||H(e,4,this.length),h(this,e,!1,23,4)},p.prototype.readDoubleLE=function(e,t){return t||H(e,8,this.length),h(this,e,!0,52,8)},p.prototype.readDoubleBE=function(e,t){return t||H(e,8,this.length),h(this,e,!1,52,8)},p.prototype.writeUIntLE=function(e,t,r,n){(e=+e,t|=0,r|=0,n)||F(this,e,t,r,Math.pow(2,8*r)-1,0);var i=1,o=0;for(this[t]=255&e;++o<r&&(i*=256);)this[t+o]=e/i&255;return t+r},p.prototype.writeUIntBE=function(e,t,r,n){(e=+e,t|=0,r|=0,n)||F(this,e,t,r,Math.pow(2,8*r)-1,0);var i=r-1,o=1;for(this[t+i]=255&e;--i>=0&&(o*=256);)this[t+i]=e/o&255;return t+r},p.prototype.writeUInt8=function(e,t,r){return e=+e,t|=0,r||F(this,e,t,1,255,0),p.TYPED_ARRAY_SUPPORT||(e=Math.floor(e)),this[t]=255&e,t+1},p.prototype.writeUInt16LE=function(e,t,r){return e=+e,t|=0,r||F(this,e,t,2,65535,0),p.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8):N(this,e,t,!0),t+2},p.prototype.writeUInt16BE=function(e,t,r){return e=+e,t|=0,r||F(this,e,t,2,65535,0),p.TYPED_ARRAY_SUPPORT?(this[t]=e>>>8,this[t+1]=255&e):N(this,e,t,!1),t+2},p.prototype.writeUInt32LE=function(e,t,r){return e=+e,t|=0,r||F(this,e,t,4,4294967295,0),p.TYPED_ARRAY_SUPPORT?(this[t+3]=e>>>24,this[t+2]=e>>>16,this[t+1]=e>>>8,this[t]=255&e):Z(this,e,t,!0),t+4},p.prototype.writeUInt32BE=function(e,t,r){return e=+e,t|=0,r||F(this,e,t,4,4294967295,0),p.TYPED_ARRAY_SUPPORT?(this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e):Z(this,e,t,!1),t+4},p.prototype.writeIntLE=function(e,t,r,n){if(e=+e,t|=0,!n){var i=Math.pow(2,8*r-1);F(this,e,t,r,i-1,-i)}var o=0,a=1,s=0;for(this[t]=255&e;++o<r&&(a*=256);)e<0&&0===s&&0!==this[t+o-1]&&(s=1),this[t+o]=(e/a>>0)-s&255;return t+r},p.prototype.writeIntBE=function(e,t,r,n){if(e=+e,t|=0,!n){var i=Math.pow(2,8*r-1);F(this,e,t,r,i-1,-i)}var o=r-1,a=1,s=0;for(this[t+o]=255&e;--o>=0&&(a*=256);)e<0&&0===s&&0!==this[t+o+1]&&(s=1),this[t+o]=(e/a>>0)-s&255;return t+r},p.prototype.writeInt8=function(e,t,r){return e=+e,t|=0,r||F(this,e,t,1,127,-128),p.TYPED_ARRAY_SUPPORT||(e=Math.floor(e)),e<0&&(e=255+e+1),this[t]=255&e,t+1},p.prototype.writeInt16LE=function(e,t,r){return e=+e,t|=0,r||F(this,e,t,2,32767,-32768),p.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8):N(this,e,t,!0),t+2},p.prototype.writeInt16BE=function(e,t,r){return e=+e,t|=0,r||F(this,e,t,2,32767,-32768),p.TYPED_ARRAY_SUPPORT?(this[t]=e>>>8,this[t+1]=255&e):N(this,e,t,!1),t+2},p.prototype.writeInt32LE=function(e,t,r){return e=+e,t|=0,r||F(this,e,t,4,2147483647,-2147483648),p.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8,this[t+2]=e>>>16,this[t+3]=e>>>24):Z(this,e,t,!0),t+4},p.prototype.writeInt32BE=function(e,t,r){return e=+e,t|=0,r||F(this,e,t,4,2147483647,-2147483648),e<0&&(e=4294967295+e+1),p.TYPED_ARRAY_SUPPORT?(this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e):Z(this,e,t,!1),t+4},p.prototype.writeFloatLE=function(e,t,r){return W(this,e,t,!0,r)},p.prototype.writeFloatBE=function(e,t,r){return W(this,e,t,!1,r)},p.prototype.writeDoubleLE=function(e,t,r){return Y(this,e,t,!0,r)},p.prototype.writeDoubleBE=function(e,t,r){return Y(this,e,t,!1,r)},p.prototype.copy=function(e,t,r,n){if(r||(r=0),n||0===n||(n=this.length),t>=e.length&&(t=e.length),t||(t=0),n>0&&n<r&&(n=r),n===r)return 0;if(0===e.length||0===this.length)return 0;if(t<0)throw new RangeError("targetStart out of bounds");if(r<0||r>=this.length)throw new RangeError("sourceStart out of bounds");if(n<0)throw new RangeError("sourceEnd out of bounds");n>this.length&&(n=this.length),e.length-t<n-r&&(n=e.length-t+r);var i,o=n-r;if(this===e&&r<t&&t<n)for(i=o-1;i>=0;--i)e[i+t]=this[i+r];else if(o<1e3||!p.TYPED_ARRAY_SUPPORT)for(i=0;i<o;++i)e[i+t]=this[i+r];else Uint8Array.prototype.set.call(e,this.subarray(r,r+o),t);return o},p.prototype.fill=function(e,t,r,n){if("string"==typeof e){if("string"==typeof t?(n=t,t=0,r=this.length):"string"==typeof r&&(n=r,r=this.length),1===e.length){var i=e.charCodeAt(0);i<256&&(e=i)}if(void 0!==n&&"string"!=typeof n)throw new TypeError("encoding must be a string");if("string"==typeof n&&!p.isEncoding(n))throw new TypeError("Unknown encoding: "+n)}else"number"==typeof e&&(e&=255);if(t<0||this.length<t||this.length<r)throw new RangeError("Out of range index");if(r<=t)return this;var o;if(t>>>=0,r=void 0===r?this.length:r>>>0,e||(e=0),"number"==typeof e)for(o=t;o<r;++o)this[o]=e;else{var a=y(e)?e:q(new p(e,n).toString()),s=a.length;for(o=0;o<r-t;++o)this[o+t]=a[o%s]}return this};var K=/[^+\/0-9A-Za-z-_]/g;function X(e){return e<16?"0"+e.toString(16):e.toString(16)}function q(e,t){var r;t=t||1/0;for(var n=e.length,i=null,o=[],a=0;a<n;++a){if((r=e.charCodeAt(a))>55295&&r<57344){if(!i){if(r>56319){(t-=3)>-1&&o.push(239,191,189);continue}if(a+1===n){(t-=3)>-1&&o.push(239,191,189);continue}i=r;continue}if(r<56320){(t-=3)>-1&&o.push(239,191,189),i=r;continue}r=65536+(i-55296<<10|r-56320)}else i&&(t-=3)>-1&&o.push(239,191,189);if(i=null,r<128){if((t-=1)<0)break;o.push(r)}else if(r<2048){if((t-=2)<0)break;o.push(r>>6|192,63&r|128)}else if(r<65536){if((t-=3)<0)break;o.push(r>>12|224,r>>6&63|128,63&r|128)}else{if(!(r<1114112))throw new Error("Invalid code point");if((t-=4)<0)break;o.push(r>>18|240,r>>12&63|128,r>>6&63|128,63&r|128)}}return o}function V(e){return function(e){var t,a,s,h,l,f;i||o();var c=e.length;if(c%4>0)throw new Error("Invalid string. Length must be a multiple of 4");l="="===e[c-2]?2:"="===e[c-1]?1:0,f=new n(3*c/4-l),s=l>0?c-4:c;var u=0;for(t=0,a=0;t<s;t+=4,a+=3)h=r[e.charCodeAt(t)]<<18|r[e.charCodeAt(t+1)]<<12|r[e.charCodeAt(t+2)]<<6|r[e.charCodeAt(t+3)],f[u++]=h>>16&255,f[u++]=h>>8&255,f[u++]=255&h;return 2===l?(h=r[e.charCodeAt(t)]<<2|r[e.charCodeAt(t+1)]>>4,f[u++]=255&h):1===l&&(h=r[e.charCodeAt(t)]<<10|r[e.charCodeAt(t+1)]<<4|r[e.charCodeAt(t+2)]>>2,f[u++]=h>>8&255,f[u++]=255&h),f}(function(e){if((e=function(e){return e.trim?e.trim():e.replace(/^\s+|\s+$/g,"")}(e).replace(K,"")).length<2)return"";for(;e.length%4!=0;)e+="=";return e}(e))}function G(e,t,r,n){for(var i=0;i<n&&!(i+r>=t.length||i>=e.length);++i)t[i+r]=e[i];return i}function $(e){return null!=e&&(!!e._isBuffer||J(e)||function(e){return"function"==typeof e.readFloatLE&&"function"==typeof e.slice&&J(e.slice(0,0))}(e))}function J(e){return!!e.constructor&&"function"==typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)}"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function Q(e,t){return e(t={exports:{}},t.exports),t.exports}var ee=Q(function(e,t){var r;e.exports=(r=r||function(e,t){var r=Object.create||function(){function e(){}return function(t){var r;return e.prototype=t,r=new e,e.prototype=null,r}}(),n={},i=n.lib={},o=i.Base={extend:function(e){var t=r(this);return e&&t.mixIn(e),t.hasOwnProperty("init")&&this.init!==t.init||(t.init=function(){t.$super.init.apply(this,arguments)}),t.init.prototype=t,t.$super=this,t},create:function(){var e=this.extend();return e.init.apply(e,arguments),e},init:function(){},mixIn:function(e){for(var t in e)e.hasOwnProperty(t)&&(this[t]=e[t]);e.hasOwnProperty("toString")&&(this.toString=e.toString)},clone:function(){return this.init.prototype.extend(this)}},a=i.WordArray=o.extend({init:function(e,t){e=this.words=e||[],this.sigBytes=null!=t?t:4*e.length},toString:function(e){return(e||h).stringify(this)},concat:function(e){var t=this.words,r=e.words,n=this.sigBytes,i=e.sigBytes;if(this.clamp(),n%4)for(var o=0;o<i;o++){var a=r[o>>>2]>>>24-o%4*8&255;t[n+o>>>2]|=a<<24-(n+o)%4*8}else for(var o=0;o<i;o+=4)t[n+o>>>2]=r[o>>>2];return this.sigBytes+=i,this},clamp:function(){var t=this.words,r=this.sigBytes;t[r>>>2]&=4294967295<<32-r%4*8,t.length=e.ceil(r/4)},clone:function(){var e=o.clone.call(this);return e.words=this.words.slice(0),e},random:function(t){for(var r,n=[],i=function(t){var t=t,r=987654321,n=4294967295;return function(){var i=((r=36969*(65535&r)+(r>>16)&n)<<16)+(t=18e3*(65535&t)+(t>>16)&n)&n;return i/=4294967296,(i+=.5)*(e.random()>.5?1:-1)}},o=0;o<t;o+=4){var s=i(4294967296*(r||e.random()));r=987654071*s(),n.push(4294967296*s()|0)}return new a.init(n,t)}}),s=n.enc={},h=s.Hex={stringify:function(e){for(var t=e.words,r=e.sigBytes,n=[],i=0;i<r;i++){var o=t[i>>>2]>>>24-i%4*8&255;n.push((o>>>4).toString(16)),n.push((15&o).toString(16))}return n.join("")},parse:function(e){for(var t=e.length,r=[],n=0;n<t;n+=2)r[n>>>3]|=parseInt(e.substr(n,2),16)<<24-n%8*4;return new a.init(r,t/2)}},l=s.Latin1={stringify:function(e){for(var t=e.words,r=e.sigBytes,n=[],i=0;i<r;i++){var o=t[i>>>2]>>>24-i%4*8&255;n.push(String.fromCharCode(o))}return n.join("")},parse:function(e){for(var t=e.length,r=[],n=0;n<t;n++)r[n>>>2]|=(255&e.charCodeAt(n))<<24-n%4*8;return new a.init(r,t)}},f=s.Utf8={stringify:function(e){try{return decodeURIComponent(escape(l.stringify(e)))}catch(e){throw new Error("Malformed UTF-8 data")}},parse:function(e){return l.parse(unescape(encodeURIComponent(e)))}},c=i.BufferedBlockAlgorithm=o.extend({reset:function(){this._data=new a.init,this._nDataBytes=0},_append:function(e){"string"==typeof e&&(e=f.parse(e)),this._data.concat(e),this._nDataBytes+=e.sigBytes},_process:function(t){var r=this._data,n=r.words,i=r.sigBytes,o=this.blockSize,s=4*o,h=i/s,l=(h=t?e.ceil(h):e.max((0|h)-this._minBufferSize,0))*o,f=e.min(4*l,i);if(l){for(var c=0;c<l;c+=o)this._doProcessBlock(n,c);var u=n.splice(0,l);r.sigBytes-=f}return new a.init(u,f)},clone:function(){var e=o.clone.call(this);return e._data=this._data.clone(),e},_minBufferSize:0}),u=(i.Hasher=c.extend({cfg:o.extend(),init:function(e){this.cfg=this.cfg.extend(e),this.reset()},reset:function(){c.reset.call(this),this._doReset()},update:function(e){return this._append(e),this._process(),this},finalize:function(e){e&&this._append(e);var t=this._doFinalize();return t},blockSize:16,_createHelper:function(e){return function(t,r){return new e.init(r).finalize(t)}},_createHmacHelper:function(e){return function(t,r){return new u.HMAC.init(e,r).finalize(t)}}}),n.algo={});return n}(Math),r)}),te=(Q(function(e,t){var r,n,i,o,a,s;e.exports=(i=(n=r=ee).lib,o=i.Base,a=i.WordArray,(s=n.x64={}).Word=o.extend({init:function(e,t){this.high=e,this.low=t}}),s.WordArray=o.extend({init:function(e,t){e=this.words=e||[],this.sigBytes=null!=t?t:8*e.length},toX32:function(){for(var e=this.words,t=e.length,r=[],n=0;n<t;n++){var i=e[n];r.push(i.high),r.push(i.low)}return a.create(r,this.sigBytes)},clone:function(){for(var e=o.clone.call(this),t=e.words=this.words.slice(0),r=t.length,n=0;n<r;n++)t[n]=t[n].clone();return e}}),r)}),Q(function(e,t){var r;e.exports=(r=ee,function(){if("function"==typeof ArrayBuffer){var e=r.lib.WordArray,t=e.init;(e.init=function(e){if(e instanceof ArrayBuffer&&(e=new Uint8Array(e)),(e instanceof Int8Array||"undefined"!=typeof Uint8ClampedArray&&e instanceof Uint8ClampedArray||e instanceof Int16Array||e instanceof Uint16Array||e instanceof Int32Array||e instanceof Uint32Array||e instanceof Float32Array||e instanceof Float64Array)&&(e=new Uint8Array(e.buffer,e.byteOffset,e.byteLength)),e instanceof Uint8Array){for(var r=e.byteLength,n=[],i=0;i<r;i++)n[i>>>2]|=e[i]<<24-i%4*8;t.call(this,n,r)}else t.apply(this,arguments)}).prototype=e}}(),r.lib.WordArray)}),Q(function(e,t){var r;e.exports=(r=ee,function(){var e=r,t=e.lib.WordArray,n=e.enc;function i(e){return e<<8&4278255360|e>>>8&16711935}n.Utf16=n.Utf16BE={stringify:function(e){for(var t=e.words,r=e.sigBytes,n=[],i=0;i<r;i+=2){var o=t[i>>>2]>>>16-i%4*8&65535;n.push(String.fromCharCode(o))}return n.join("")},parse:function(e){for(var r=e.length,n=[],i=0;i<r;i++)n[i>>>1]|=e.charCodeAt(i)<<16-i%2*16;return t.create(n,2*r)}},n.Utf16LE={stringify:function(e){for(var t=e.words,r=e.sigBytes,n=[],o=0;o<r;o+=2){var a=i(t[o>>>2]>>>16-o%4*8&65535);n.push(String.fromCharCode(a))}return n.join("")},parse:function(e){for(var r=e.length,n=[],o=0;o<r;o++)n[o>>>1]|=i(e.charCodeAt(o)<<16-o%2*16);return t.create(n,2*r)}}}(),r.enc.Utf16)}),Q(function(e,t){var r,n,i;e.exports=(i=(n=r=ee).lib.WordArray,n.enc.Base64={stringify:function(e){var t=e.words,r=e.sigBytes,n=this._map;e.clamp();for(var i=[],o=0;o<r;o+=3)for(var a=(t[o>>>2]>>>24-o%4*8&255)<<16|(t[o+1>>>2]>>>24-(o+1)%4*8&255)<<8|t[o+2>>>2]>>>24-(o+2)%4*8&255,s=0;s<4&&o+.75*s<r;s++)i.push(n.charAt(a>>>6*(3-s)&63));var h=n.charAt(64);if(h)for(;i.length%4;)i.push(h);return i.join("")},parse:function(e){var t=e.length,r=this._map,n=this._reverseMap;if(!n){n=this._reverseMap=[];for(var o=0;o<r.length;o++)n[r.charCodeAt(o)]=o}var a=r.charAt(64);if(a){var s=e.indexOf(a);-1!==s&&(t=s)}return function(e,t,r){for(var n=[],o=0,a=0;a<t;a++)if(a%4){var s=r[e.charCodeAt(a-1)]<<a%4*2,h=r[e.charCodeAt(a)]>>>6-a%4*2;n[o>>>2]|=(s|h)<<24-o%4*8,o++}return i.create(n,o)}(e,t,n)},_map:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="},r.enc.Base64)}),Q(function(e,t){var r;e.exports=(r=ee,function(e){var t=r,n=t.lib,i=n.WordArray,o=n.Hasher,a=t.algo,s=[];!function(){for(var t=0;t<64;t++)s[t]=4294967296*e.abs(e.sin(t+1))|0}();var h=a.MD5=o.extend({_doReset:function(){this._hash=new i.init([1732584193,4023233417,2562383102,271733878])},_doProcessBlock:function(e,t){for(var r=0;r<16;r++){var n=t+r,i=e[n];e[n]=16711935&(i<<8|i>>>24)|4278255360&(i<<24|i>>>8)}var o=this._hash.words,a=e[t+0],h=e[t+1],d=e[t+2],p=e[t+3],_=e[t+4],g=e[t+5],v=e[t+6],w=e[t+7],b=e[t+8],y=e[t+9],m=e[t+10],k=e[t+11],E=e[t+12],S=e[t+13],x=e[t+14],R=e[t+15],A=o[0],B=o[1],z=o[2],L=o[3];A=l(A,B,z,L,a,7,s[0]),L=l(L,A,B,z,h,12,s[1]),z=l(z,L,A,B,d,17,s[2]),B=l(B,z,L,A,p,22,s[3]),A=l(A,B,z,L,_,7,s[4]),L=l(L,A,B,z,g,12,s[5]),z=l(z,L,A,B,v,17,s[6]),B=l(B,z,L,A,w,22,s[7]),A=l(A,B,z,L,b,7,s[8]),L=l(L,A,B,z,y,12,s[9]),z=l(z,L,A,B,m,17,s[10]),B=l(B,z,L,A,k,22,s[11]),A=l(A,B,z,L,E,7,s[12]),L=l(L,A,B,z,S,12,s[13]),z=l(z,L,A,B,x,17,s[14]),A=f(A,B=l(B,z,L,A,R,22,s[15]),z,L,h,5,s[16]),L=f(L,A,B,z,v,9,s[17]),z=f(z,L,A,B,k,14,s[18]),B=f(B,z,L,A,a,20,s[19]),A=f(A,B,z,L,g,5,s[20]),L=f(L,A,B,z,m,9,s[21]),z=f(z,L,A,B,R,14,s[22]),B=f(B,z,L,A,_,20,s[23]),A=f(A,B,z,L,y,5,s[24]),L=f(L,A,B,z,x,9,s[25]),z=f(z,L,A,B,p,14,s[26]),B=f(B,z,L,A,b,20,s[27]),A=f(A,B,z,L,S,5,s[28]),L=f(L,A,B,z,d,9,s[29]),z=f(z,L,A,B,w,14,s[30]),A=c(A,B=f(B,z,L,A,E,20,s[31]),z,L,g,4,s[32]),L=c(L,A,B,z,b,11,s[33]),z=c(z,L,A,B,k,16,s[34]),B=c(B,z,L,A,x,23,s[35]),A=c(A,B,z,L,h,4,s[36]),L=c(L,A,B,z,_,11,s[37]),z=c(z,L,A,B,w,16,s[38]),B=c(B,z,L,A,m,23,s[39]),A=c(A,B,z,L,S,4,s[40]),L=c(L,A,B,z,a,11,s[41]),z=c(z,L,A,B,p,16,s[42]),B=c(B,z,L,A,v,23,s[43]),A=c(A,B,z,L,y,4,s[44]),L=c(L,A,B,z,E,11,s[45]),z=c(z,L,A,B,R,16,s[46]),A=u(A,B=c(B,z,L,A,d,23,s[47]),z,L,a,6,s[48]),L=u(L,A,B,z,w,10,s[49]),z=u(z,L,A,B,x,15,s[50]),B=u(B,z,L,A,g,21,s[51]),A=u(A,B,z,L,E,6,s[52]),L=u(L,A,B,z,p,10,s[53]),z=u(z,L,A,B,m,15,s[54]),B=u(B,z,L,A,h,21,s[55]),A=u(A,B,z,L,b,6,s[56]),L=u(L,A,B,z,R,10,s[57]),z=u(z,L,A,B,v,15,s[58]),B=u(B,z,L,A,S,21,s[59]),A=u(A,B,z,L,_,6,s[60]),L=u(L,A,B,z,k,10,s[61]),z=u(z,L,A,B,d,15,s[62]),B=u(B,z,L,A,y,21,s[63]),o[0]=o[0]+A|0,o[1]=o[1]+B|0,o[2]=o[2]+z|0,o[3]=o[3]+L|0},_doFinalize:function(){var t=this._data,r=t.words,n=8*this._nDataBytes,i=8*t.sigBytes;r[i>>>5]|=128<<24-i%32;var o=e.floor(n/4294967296),a=n;r[15+(i+64>>>9<<4)]=16711935&(o<<8|o>>>24)|4278255360&(o<<24|o>>>8),r[14+(i+64>>>9<<4)]=16711935&(a<<8|a>>>24)|4278255360&(a<<24|a>>>8),t.sigBytes=4*(r.length+1),this._process();for(var s=this._hash,h=s.words,l=0;l<4;l++){var f=h[l];h[l]=16711935&(f<<8|f>>>24)|4278255360&(f<<24|f>>>8)}return s},clone:function(){var e=o.clone.call(this);return e._hash=this._hash.clone(),e}});function l(e,t,r,n,i,o,a){var s=e+(t&r|~t&n)+i+a;return(s<<o|s>>>32-o)+t}function f(e,t,r,n,i,o,a){var s=e+(t&n|r&~n)+i+a;return(s<<o|s>>>32-o)+t}function c(e,t,r,n,i,o,a){var s=e+(t^r^n)+i+a;return(s<<o|s>>>32-o)+t}function u(e,t,r,n,i,o,a){var s=e+(r^(t|~n))+i+a;return(s<<o|s>>>32-o)+t}t.MD5=o._createHelper(h),t.HmacMD5=o._createHmacHelper(h)}(Math),r.MD5)}),Q(function(e,t){var r,n,i,o,a,s,h,l;e.exports=(i=(n=r=ee).lib,o=i.WordArray,a=i.Hasher,s=n.algo,h=[],l=s.SHA1=a.extend({_doReset:function(){this._hash=new o.init([1732584193,4023233417,2562383102,271733878,3285377520])},_doProcessBlock:function(e,t){for(var r=this._hash.words,n=r[0],i=r[1],o=r[2],a=r[3],s=r[4],l=0;l<80;l++){if(l<16)h[l]=0|e[t+l];else{var f=h[l-3]^h[l-8]^h[l-14]^h[l-16];h[l]=f<<1|f>>>31}var c=(n<<5|n>>>27)+s+h[l];c+=l<20?1518500249+(i&o|~i&a):l<40?1859775393+(i^o^a):l<60?(i&o|i&a|o&a)-1894007588:(i^o^a)-899497514,s=a,a=o,o=i<<30|i>>>2,i=n,n=c}r[0]=r[0]+n|0,r[1]=r[1]+i|0,r[2]=r[2]+o|0,r[3]=r[3]+a|0,r[4]=r[4]+s|0},_doFinalize:function(){var e=this._data,t=e.words,r=8*this._nDataBytes,n=8*e.sigBytes;return t[n>>>5]|=128<<24-n%32,t[14+(n+64>>>9<<4)]=Math.floor(r/4294967296),t[15+(n+64>>>9<<4)]=r,e.sigBytes=4*t.length,this._process(),this._hash},clone:function(){var e=a.clone.call(this);return e._hash=this._hash.clone(),e}}),n.SHA1=a._createHelper(l),n.HmacSHA1=a._createHmacHelper(l),r.SHA1)}),Q(function(e,t){var r;e.exports=(r=ee,function(e){var t=r,n=t.lib,i=n.WordArray,o=n.Hasher,a=t.algo,s=[],h=[];!function(){function t(t){for(var r=e.sqrt(t),n=2;n<=r;n++)if(!(t%n))return!1;return!0}function r(e){return 4294967296*(e-(0|e))|0}for(var n=2,i=0;i<64;)t(n)&&(i<8&&(s[i]=r(e.pow(n,.5))),h[i]=r(e.pow(n,1/3)),i++),n++}();var l=[],f=a.SHA256=o.extend({_doReset:function(){this._hash=new i.init(s.slice(0))},_doProcessBlock:function(e,t){for(var r=this._hash.words,n=r[0],i=r[1],o=r[2],a=r[3],s=r[4],f=r[5],c=r[6],u=r[7],d=0;d<64;d++){if(d<16)l[d]=0|e[t+d];else{var p=l[d-15],_=(p<<25|p>>>7)^(p<<14|p>>>18)^p>>>3,g=l[d-2],v=(g<<15|g>>>17)^(g<<13|g>>>19)^g>>>10;l[d]=_+l[d-7]+v+l[d-16]}var w=n&i^n&o^i&o,b=(n<<30|n>>>2)^(n<<19|n>>>13)^(n<<10|n>>>22),y=u+((s<<26|s>>>6)^(s<<21|s>>>11)^(s<<7|s>>>25))+(s&f^~s&c)+h[d]+l[d];u=c,c=f,f=s,s=a+y|0,a=o,o=i,i=n,n=y+(b+w)|0}r[0]=r[0]+n|0,r[1]=r[1]+i|0,r[2]=r[2]+o|0,r[3]=r[3]+a|0,r[4]=r[4]+s|0,r[5]=r[5]+f|0,r[6]=r[6]+c|0,r[7]=r[7]+u|0},_doFinalize:function(){var t=this._data,r=t.words,n=8*this._nDataBytes,i=8*t.sigBytes;return r[i>>>5]|=128<<24-i%32,r[14+(i+64>>>9<<4)]=e.floor(n/4294967296),r[15+(i+64>>>9<<4)]=n,t.sigBytes=4*r.length,this._process(),this._hash},clone:function(){var e=o.clone.call(this);return e._hash=this._hash.clone(),e}});t.SHA256=o._createHelper(f),t.HmacSHA256=o._createHmacHelper(f)}(Math),r.SHA256)}),Q(function(e,t){var r,n,i,o,a,s;e.exports=(i=(n=r=ee).lib.WordArray,o=n.algo,a=o.SHA256,s=o.SHA224=a.extend({_doReset:function(){this._hash=new i.init([3238371032,914150663,812702999,4144912697,4290775857,1750603025,1694076839,3204075428])},_doFinalize:function(){var e=a._doFinalize.call(this);return e.sigBytes-=4,e}}),n.SHA224=a._createHelper(s),n.HmacSHA224=a._createHmacHelper(s),r.SHA224)}),Q(function(e,t){var r;e.exports=(r=ee,function(){var e=r,t=e.lib.Hasher,n=e.x64,i=n.Word,o=n.WordArray,a=e.algo;function s(){return i.create.apply(i,arguments)}var h=[s(1116352408,3609767458),s(1899447441,602891725),s(3049323471,3964484399),s(3921009573,2173295548),s(961987163,4081628472),s(1508970993,3053834265),s(2453635748,2937671579),s(2870763221,3664609560),s(3624381080,2734883394),s(310598401,1164996542),s(607225278,1323610764),s(1426881987,3590304994),s(1925078388,4068182383),s(2162078206,991336113),s(2614888103,633803317),s(3248222580,3479774868),s(3835390401,2666613458),s(4022224774,944711139),s(264347078,2341262773),s(604807628,2007800933),s(770255983,1495990901),s(1249150122,1856431235),s(1555081692,3175218132),s(1996064986,2198950837),s(2554220882,3999719339),s(2821834349,766784016),s(2952996808,2566594879),s(3210313671,3203337956),s(3336571891,1034457026),s(3584528711,2466948901),s(113926993,3758326383),s(338241895,168717936),s(666307205,1188179964),s(773529912,1546045734),s(1294757372,1522805485),s(1396182291,2643833823),s(1695183700,2343527390),s(1986661051,1014477480),s(2177026350,1206759142),s(2456956037,344077627),s(2730485921,1290863460),s(2820302411,3158454273),s(3259730800,3505952657),s(3345764771,106217008),s(3516065817,3606008344),s(3600352804,1432725776),s(4094571909,1467031594),s(275423344,851169720),s(430227734,3100823752),s(506948616,1363258195),s(659060556,3750685593),s(883997877,3785050280),s(958139571,3318307427),s(1322822218,3812723403),s(1537002063,2003034995),s(1747873779,3602036899),s(1955562222,1575990012),s(2024104815,1125592928),s(2227730452,2716904306),s(2361852424,442776044),s(2428436474,593698344),s(2756734187,3733110249),s(3204031479,2999351573),s(3329325298,3815920427),s(3391569614,3928383900),s(3515267271,566280711),s(3940187606,3454069534),s(4118630271,4000239992),s(116418474,1914138554),s(174292421,2731055270),s(289380356,3203993006),s(460393269,320620315),s(685471733,587496836),s(852142971,1086792851),s(1017036298,365543100),s(1126000580,2618297676),s(1288033470,3409855158),s(1501505948,4234509866),s(1607167915,987167468),s(1816402316,1246189591)],l=[];!function(){for(var e=0;e<80;e++)l[e]=s()}();var f=a.SHA512=t.extend({_doReset:function(){this._hash=new o.init([new i.init(1779033703,4089235720),new i.init(3144134277,2227873595),new i.init(1013904242,4271175723),new i.init(2773480762,1595750129),new i.init(1359893119,2917565137),new i.init(2600822924,725511199),new i.init(528734635,4215389547),new i.init(1541459225,327033209)])},_doProcessBlock:function(e,t){for(var r=this._hash.words,n=r[0],i=r[1],o=r[2],a=r[3],s=r[4],f=r[5],c=r[6],u=r[7],d=n.high,p=n.low,_=i.high,g=i.low,v=o.high,w=o.low,b=a.high,y=a.low,m=s.high,k=s.low,E=f.high,S=f.low,x=c.high,R=c.low,A=u.high,B=u.low,z=d,L=p,T=_,M=g,C=v,D=w,I=b,P=y,O=m,U=k,H=E,F=S,N=x,Z=R,j=A,W=B,Y=0;Y<80;Y++){var K=l[Y];if(Y<16)var X=K.high=0|e[t+2*Y],q=K.low=0|e[t+2*Y+1];else{var V=l[Y-15],G=V.high,$=V.low,J=(G>>>1|$<<31)^(G>>>8|$<<24)^G>>>7,Q=($>>>1|G<<31)^($>>>8|G<<24)^($>>>7|G<<25),ee=l[Y-2],te=ee.high,re=ee.low,ne=(te>>>19|re<<13)^(te<<3|re>>>29)^te>>>6,ie=(re>>>19|te<<13)^(re<<3|te>>>29)^(re>>>6|te<<26),oe=l[Y-7],ae=oe.high,se=oe.low,he=l[Y-16],le=he.high,fe=he.low;X=(X=(X=J+ae+((q=Q+se)>>>0<Q>>>0?1:0))+ne+((q+=ie)>>>0<ie>>>0?1:0))+le+((q+=fe)>>>0<fe>>>0?1:0),K.high=X,K.low=q}var ce,ue=O&H^~O&N,de=U&F^~U&Z,pe=z&T^z&C^T&C,_e=L&M^L&D^M&D,ge=(z>>>28|L<<4)^(z<<30|L>>>2)^(z<<25|L>>>7),ve=(L>>>28|z<<4)^(L<<30|z>>>2)^(L<<25|z>>>7),we=(O>>>14|U<<18)^(O>>>18|U<<14)^(O<<23|U>>>9),be=(U>>>14|O<<18)^(U>>>18|O<<14)^(U<<23|O>>>9),ye=h[Y],me=ye.high,ke=ye.low,Ee=j+we+((ce=W+be)>>>0<W>>>0?1:0),Se=ve+_e;j=N,W=Z,N=H,Z=F,H=O,F=U,O=I+(Ee=(Ee=(Ee=Ee+ue+((ce+=de)>>>0<de>>>0?1:0))+me+((ce+=ke)>>>0<ke>>>0?1:0))+X+((ce+=q)>>>0<q>>>0?1:0))+((U=P+ce|0)>>>0<P>>>0?1:0)|0,I=C,P=D,C=T,D=M,T=z,M=L,z=Ee+(ge+pe+(Se>>>0<ve>>>0?1:0))+((L=ce+Se|0)>>>0<ce>>>0?1:0)|0}p=n.low=p+L,n.high=d+z+(p>>>0<L>>>0?1:0),g=i.low=g+M,i.high=_+T+(g>>>0<M>>>0?1:0),w=o.low=w+D,o.high=v+C+(w>>>0<D>>>0?1:0),y=a.low=y+P,a.high=b+I+(y>>>0<P>>>0?1:0),k=s.low=k+U,s.high=m+O+(k>>>0<U>>>0?1:0),S=f.low=S+F,f.high=E+H+(S>>>0<F>>>0?1:0),R=c.low=R+Z,c.high=x+N+(R>>>0<Z>>>0?1:0),B=u.low=B+W,u.high=A+j+(B>>>0<W>>>0?1:0)},_doFinalize:function(){var e=this._data,t=e.words,r=8*this._nDataBytes,n=8*e.sigBytes;return t[n>>>5]|=128<<24-n%32,t[30+(n+128>>>10<<5)]=Math.floor(r/4294967296),t[31+(n+128>>>10<<5)]=r,e.sigBytes=4*t.length,this._process(),this._hash.toX32()},clone:function(){var e=t.clone.call(this);return e._hash=this._hash.clone(),e},blockSize:32});e.SHA512=t._createHelper(f),e.HmacSHA512=t._createHmacHelper(f)}(),r.SHA512)}),Q(function(e,t){var r,n,i,o,a,s,h,l;e.exports=(i=(n=r=ee).x64,o=i.Word,a=i.WordArray,s=n.algo,h=s.SHA512,l=s.SHA384=h.extend({_doReset:function(){this._hash=new a.init([new o.init(3418070365,3238371032),new o.init(1654270250,914150663),new o.init(2438529370,812702999),new o.init(355462360,4144912697),new o.init(1731405415,4290775857),new o.init(2394180231,1750603025),new o.init(3675008525,1694076839),new o.init(1203062813,3204075428)])},_doFinalize:function(){var e=h._doFinalize.call(this);return e.sigBytes-=16,e}}),n.SHA384=h._createHelper(l),n.HmacSHA384=h._createHmacHelper(l),r.SHA384)}),Q(function(e,t){var r;e.exports=(r=ee,function(e){var t=r,n=t.lib,i=n.WordArray,o=n.Hasher,a=t.x64.Word,s=t.algo,h=[],l=[],f=[];!function(){for(var e=1,t=0,r=0;r<24;r++){h[e+5*t]=(r+1)*(r+2)/2%64;var n=(2*e+3*t)%5;e=t%5,t=n}for(e=0;e<5;e++)for(t=0;t<5;t++)l[e+5*t]=t+(2*e+3*t)%5*5;for(var i=1,o=0;o<24;o++){for(var s=0,c=0,u=0;u<7;u++){if(1&i){var d=(1<<u)-1;d<32?c^=1<<d:s^=1<<d-32}128&i?i=i<<1^113:i<<=1}f[o]=a.create(s,c)}}();var c=[];!function(){for(var e=0;e<25;e++)c[e]=a.create()}();var u=s.SHA3=o.extend({cfg:o.cfg.extend({outputLength:512}),_doReset:function(){for(var e=this._state=[],t=0;t<25;t++)e[t]=new a.init;this.blockSize=(1600-2*this.cfg.outputLength)/32},_doProcessBlock:function(e,t){for(var r=this._state,n=this.blockSize/2,i=0;i<n;i++){var o=e[t+2*i],a=e[t+2*i+1];o=16711935&(o<<8|o>>>24)|4278255360&(o<<24|o>>>8),a=16711935&(a<<8|a>>>24)|4278255360&(a<<24|a>>>8),(B=r[i]).high^=a,B.low^=o}for(var s=0;s<24;s++){for(var u=0;u<5;u++){for(var d=0,p=0,_=0;_<5;_++)d^=(B=r[u+5*_]).high,p^=B.low;var g=c[u];g.high=d,g.low=p}for(u=0;u<5;u++){var v=c[(u+4)%5],w=c[(u+1)%5],b=w.high,y=w.low;for(d=v.high^(b<<1|y>>>31),p=v.low^(y<<1|b>>>31),_=0;_<5;_++)(B=r[u+5*_]).high^=d,B.low^=p}for(var m=1;m<25;m++){var k=(B=r[m]).high,E=B.low,S=h[m];S<32?(d=k<<S|E>>>32-S,p=E<<S|k>>>32-S):(d=E<<S-32|k>>>64-S,p=k<<S-32|E>>>64-S);var x=c[l[m]];x.high=d,x.low=p}var R=c[0],A=r[0];for(R.high=A.high,R.low=A.low,u=0;u<5;u++)for(_=0;_<5;_++){var B=r[m=u+5*_],z=c[m],L=c[(u+1)%5+5*_],T=c[(u+2)%5+5*_];B.high=z.high^~L.high&T.high,B.low=z.low^~L.low&T.low}B=r[0];var M=f[s];B.high^=M.high,B.low^=M.low}},_doFinalize:function(){var t=this._data,r=t.words,n=(this._nDataBytes,8*t.sigBytes),o=32*this.blockSize;r[n>>>5]|=1<<24-n%32,r[(e.ceil((n+1)/o)*o>>>5)-1]|=128,t.sigBytes=4*r.length,this._process();for(var a=this._state,s=this.cfg.outputLength/8,h=s/8,l=[],f=0;f<h;f++){var c=a[f],u=c.high,d=c.low;u=16711935&(u<<8|u>>>24)|4278255360&(u<<24|u>>>8),d=16711935&(d<<8|d>>>24)|4278255360&(d<<24|d>>>8),l.push(d),l.push(u)}return new i.init(l,s)},clone:function(){for(var e=o.clone.call(this),t=e._state=this._state.slice(0),r=0;r<25;r++)t[r]=t[r].clone();return e}});t.SHA3=o._createHelper(u),t.HmacSHA3=o._createHmacHelper(u)}(Math),r.SHA3)}),Q(function(e,t){var r;e.exports=(r=ee,function(e){var t=r,n=t.lib,i=n.WordArray,o=n.Hasher,a=t.algo,s=i.create([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,7,4,13,1,10,6,15,3,12,0,9,5,2,14,11,8,3,10,14,4,9,15,8,1,2,7,0,6,13,11,5,12,1,9,11,10,0,8,12,4,13,3,7,15,14,5,6,2,4,0,5,9,7,12,2,10,14,1,3,8,11,6,15,13]),h=i.create([5,14,7,0,9,2,11,4,13,6,15,8,1,10,3,12,6,11,3,7,0,13,5,10,14,15,8,12,4,9,1,2,15,5,1,3,7,14,6,9,11,8,12,2,10,0,4,13,8,6,4,1,3,11,15,0,5,12,2,13,9,7,10,14,12,15,10,4,1,5,8,7,6,2,13,14,0,3,9,11]),l=i.create([11,14,15,12,5,8,7,9,11,13,14,15,6,7,9,8,7,6,8,13,11,9,7,15,7,12,15,9,11,7,13,12,11,13,6,7,14,9,13,15,14,8,13,6,5,12,7,5,11,12,14,15,14,15,9,8,9,14,5,6,8,6,5,12,9,15,5,11,6,8,13,12,5,12,13,14,11,8,5,6]),f=i.create([8,9,9,11,13,15,15,5,7,7,8,11,14,14,12,6,9,13,15,7,12,8,9,11,7,7,12,7,6,15,13,11,9,7,15,11,8,6,6,14,12,13,5,14,13,13,7,5,15,5,8,11,14,14,6,14,6,9,12,9,12,5,15,8,8,5,12,9,12,5,14,6,8,13,6,5,15,13,11,11]),c=i.create([0,1518500249,1859775393,2400959708,2840853838]),u=i.create([1352829926,1548603684,1836072691,2053994217,0]),d=a.RIPEMD160=o.extend({_doReset:function(){this._hash=i.create([1732584193,4023233417,2562383102,271733878,3285377520])},_doProcessBlock:function(e,t){for(var r=0;r<16;r++){var n=t+r,i=e[n];e[n]=16711935&(i<<8|i>>>24)|4278255360&(i<<24|i>>>8)}var o,a,d,y,m,k,E,S,x,R,A,B=this._hash.words,z=c.words,L=u.words,T=s.words,M=h.words,C=l.words,D=f.words;for(k=o=B[0],E=a=B[1],S=d=B[2],x=y=B[3],R=m=B[4],r=0;r<80;r+=1)A=o+e[t+T[r]]|0,A+=r<16?p(a,d,y)+z[0]:r<32?_(a,d,y)+z[1]:r<48?g(a,d,y)+z[2]:r<64?v(a,d,y)+z[3]:w(a,d,y)+z[4],A=(A=b(A|=0,C[r]))+m|0,o=m,m=y,y=b(d,10),d=a,a=A,A=k+e[t+M[r]]|0,A+=r<16?w(E,S,x)+L[0]:r<32?v(E,S,x)+L[1]:r<48?g(E,S,x)+L[2]:r<64?_(E,S,x)+L[3]:p(E,S,x)+L[4],A=(A=b(A|=0,D[r]))+R|0,k=R,R=x,x=b(S,10),S=E,E=A;A=B[1]+d+x|0,B[1]=B[2]+y+R|0,B[2]=B[3]+m+k|0,B[3]=B[4]+o+E|0,B[4]=B[0]+a+S|0,B[0]=A},_doFinalize:function(){var e=this._data,t=e.words,r=8*this._nDataBytes,n=8*e.sigBytes;t[n>>>5]|=128<<24-n%32,t[14+(n+64>>>9<<4)]=16711935&(r<<8|r>>>24)|4278255360&(r<<24|r>>>8),e.sigBytes=4*(t.length+1),this._process();for(var i=this._hash,o=i.words,a=0;a<5;a++){var s=o[a];o[a]=16711935&(s<<8|s>>>24)|4278255360&(s<<24|s>>>8)}return i},clone:function(){var e=o.clone.call(this);return e._hash=this._hash.clone(),e}});function p(e,t,r){return e^t^r}function _(e,t,r){return e&t|~e&r}function g(e,t,r){return(e|~t)^r}function v(e,t,r){return e&r|t&~r}function w(e,t,r){return e^(t|~r)}function b(e,t){return e<<t|e>>>32-t}t.RIPEMD160=o._createHelper(d),t.HmacRIPEMD160=o._createHmacHelper(d)}(),r.RIPEMD160)}),Q(function(e,t){var r,n,i,o,a,s;e.exports=(n=(r=ee).lib,i=n.Base,o=r.enc,a=o.Utf8,s=r.algo,void(s.HMAC=i.extend({init:function(e,t){e=this._hasher=new e.init,"string"==typeof t&&(t=a.parse(t));var r=e.blockSize,n=4*r;t.sigBytes>n&&(t=e.finalize(t)),t.clamp();for(var i=this._oKey=t.clone(),o=this._iKey=t.clone(),s=i.words,h=o.words,l=0;l<r;l++)s[l]^=1549556828,h[l]^=909522486;i.sigBytes=o.sigBytes=n,this.reset()},reset:function(){var e=this._hasher;e.reset(),e.update(this._iKey)},update:function(e){return this._hasher.update(e),this},finalize:function(e){var t=this._hasher,r=t.finalize(e);t.reset();var n=t.finalize(this._oKey.clone().concat(r));return n}})))}),Q(function(e,t){var r,n,i,o,a,s,h,l,f;e.exports=(i=(n=r=ee).lib,o=i.Base,a=i.WordArray,s=n.algo,h=s.SHA1,l=s.HMAC,f=s.PBKDF2=o.extend({cfg:o.extend({keySize:4,hasher:h,iterations:1}),init:function(e){this.cfg=this.cfg.extend(e)},compute:function(e,t){for(var r=this.cfg,n=l.create(r.hasher,e),i=a.create(),o=a.create([1]),s=i.words,h=o.words,f=r.keySize,c=r.iterations;s.length<f;){var u=n.update(t).finalize(o);n.reset();for(var d=u.words,p=d.length,_=u,g=1;g<c;g++){_=n.finalize(_),n.reset();for(var v=_.words,w=0;w<p;w++)d[w]^=v[w]}i.concat(u),h[0]++}return i.sigBytes=4*f,i}}),n.PBKDF2=function(e,t,r){return f.create(r).compute(e,t)},r.PBKDF2)}),Q(function(e,t){var r,n,i,o,a,s,h,l;e.exports=(i=(n=r=ee).lib,o=i.Base,a=i.WordArray,s=n.algo,h=s.MD5,l=s.EvpKDF=o.extend({cfg:o.extend({keySize:4,hasher:h,iterations:1}),init:function(e){this.cfg=this.cfg.extend(e)},compute:function(e,t){for(var r=this.cfg,n=r.hasher.create(),i=a.create(),o=i.words,s=r.keySize,h=r.iterations;o.length<s;){l&&n.update(l);var l=n.update(e).finalize(t);n.reset();for(var f=1;f<h;f++)l=n.finalize(l),n.reset();i.concat(l)}return i.sigBytes=4*s,i}}),n.EvpKDF=function(e,t,r){return l.create(r).compute(e,t)},r.EvpKDF)}),Q(function(e,t){var r,n,i,o,a,s,h,l,f,c,u,d,p,_,g,v,w,b,y,m,k,E,S,x;e.exports=void((r=ee).lib.Cipher||(i=r,o=i.lib,a=o.Base,s=o.WordArray,h=o.BufferedBlockAlgorithm,l=i.enc,l.Utf8,f=l.Base64,c=i.algo,u=c.EvpKDF,d=o.Cipher=h.extend({cfg:a.extend(),createEncryptor:function(e,t){return this.create(this._ENC_XFORM_MODE,e,t)},createDecryptor:function(e,t){return this.create(this._DEC_XFORM_MODE,e,t)},init:function(e,t,r){this.cfg=this.cfg.extend(r),this._xformMode=e,this._key=t,this.reset()},reset:function(){h.reset.call(this),this._doReset()},process:function(e){return this._append(e),this._process()},finalize:function(e){e&&this._append(e);var t=this._doFinalize();return t},keySize:4,ivSize:4,_ENC_XFORM_MODE:1,_DEC_XFORM_MODE:2,_createHelper:function(){function e(e){return"string"==typeof e?x:k}return function(t){return{encrypt:function(r,n,i){return e(n).encrypt(t,r,n,i)},decrypt:function(r,n,i){return e(n).decrypt(t,r,n,i)}}}}()}),o.StreamCipher=d.extend({_doFinalize:function(){var e=this._process(!0);return e},blockSize:1}),p=i.mode={},_=o.BlockCipherMode=a.extend({createEncryptor:function(e,t){return this.Encryptor.create(e,t)},createDecryptor:function(e,t){return this.Decryptor.create(e,t)},init:function(e,t){this._cipher=e,this._iv=t}}),g=p.CBC=function(){var e=_.extend();function t(e,t,r){var i=this._iv;if(i){var o=i;this._iv=n}else var o=this._prevBlock;for(var a=0;a<r;a++)e[t+a]^=o[a]}return e.Encryptor=e.extend({processBlock:function(e,r){var n=this._cipher,i=n.blockSize;t.call(this,e,r,i),n.encryptBlock(e,r),this._prevBlock=e.slice(r,r+i)}}),e.Decryptor=e.extend({processBlock:function(e,r){var n=this._cipher,i=n.blockSize,o=e.slice(r,r+i);n.decryptBlock(e,r),t.call(this,e,r,i),this._prevBlock=o}}),e}(),v=i.pad={},w=v.Pkcs7={pad:function(e,t){for(var r=4*t,n=r-e.sigBytes%r,i=n<<24|n<<16|n<<8|n,o=[],a=0;a<n;a+=4)o.push(i);var h=s.create(o,n);e.concat(h)},unpad:function(e){var t=255&e.words[e.sigBytes-1>>>2];e.sigBytes-=t}},o.BlockCipher=d.extend({cfg:d.cfg.extend({mode:g,padding:w}),reset:function(){d.reset.call(this);var e=this.cfg,t=e.iv,r=e.mode;if(this._xformMode==this._ENC_XFORM_MODE)var n=r.createEncryptor;else{var n=r.createDecryptor;this._minBufferSize=1}this._mode&&this._mode.__creator==n?this._mode.init(this,t&&t.words):(this._mode=n.call(r,this,t&&t.words),this._mode.__creator=n)},_doProcessBlock:function(e,t){this._mode.processBlock(e,t)},_doFinalize:function(){var e=this.cfg.padding;if(this._xformMode==this._ENC_XFORM_MODE){e.pad(this._data,this.blockSize);var t=this._process(!0)}else{var t=this._process(!0);e.unpad(t)}return t},blockSize:4}),b=o.CipherParams=a.extend({init:function(e){this.mixIn(e)},toString:function(e){return(e||this.formatter).stringify(this)}}),y=i.format={},m=y.OpenSSL={stringify:function(e){var t=e.ciphertext,r=e.salt;if(r)var n=s.create([1398893684,1701076831]).concat(r).concat(t);else var n=t;return n.toString(f)},parse:function(e){var t=f.parse(e),r=t.words;if(1398893684==r[0]&&1701076831==r[1]){var n=s.create(r.slice(2,4));r.splice(0,4),t.sigBytes-=16}return b.create({ciphertext:t,salt:n})}},k=o.SerializableCipher=a.extend({cfg:a.extend({format:m}),encrypt:function(e,t,r,n){n=this.cfg.extend(n);var i=e.createEncryptor(r,n),o=i.finalize(t),a=i.cfg;return b.create({ciphertext:o,key:r,iv:a.iv,algorithm:e,mode:a.mode,padding:a.padding,blockSize:e.blockSize,formatter:n.format})},decrypt:function(e,t,r,n){n=this.cfg.extend(n),t=this._parse(t,n.format);var i=e.createDecryptor(r,n).finalize(t.ciphertext);return i},_parse:function(e,t){return"string"==typeof e?t.parse(e,this):e}}),E=i.kdf={},S=E.OpenSSL={execute:function(e,t,r,n){n||(n=s.random(8));var i=u.create({keySize:t+r}).compute(e,n),o=s.create(i.words.slice(t),4*r);return i.sigBytes=4*t,b.create({key:i,iv:o,salt:n})}},x=o.PasswordBasedCipher=k.extend({cfg:k.cfg.extend({kdf:S}),encrypt:function(e,t,r,n){var i=(n=this.cfg.extend(n)).kdf.execute(r,e.keySize,e.ivSize);n.iv=i.iv;var o=k.encrypt.call(this,e,t,i.key,n);return o.mixIn(i),o},decrypt:function(e,t,r,n){n=this.cfg.extend(n),t=this._parse(t,n.format);var i=n.kdf.execute(r,e.keySize,e.ivSize,t.salt);n.iv=i.iv;var o=k.decrypt.call(this,e,t,i.key,n);return o}})))}),Q(function(e,t){var r;e.exports=((r=ee).mode.CFB=function(){var e=r.lib.BlockCipherMode.extend();function t(e,t,r,n){var i=this._iv;if(i){var o=i.slice(0);this._iv=void 0}else o=this._prevBlock;n.encryptBlock(o,0);for(var a=0;a<r;a++)e[t+a]^=o[a]}return e.Encryptor=e.extend({processBlock:function(e,r){var n=this._cipher,i=n.blockSize;t.call(this,e,r,i,n),this._prevBlock=e.slice(r,r+i)}}),e.Decryptor=e.extend({processBlock:function(e,r){var n=this._cipher,i=n.blockSize,o=e.slice(r,r+i);t.call(this,e,r,i,n),this._prevBlock=o}}),e}(),r.mode.CFB)}),Q(function(e,t){var r,n,i;e.exports=((r=ee).mode.CTR=(n=r.lib.BlockCipherMode.extend(),i=n.Encryptor=n.extend({processBlock:function(e,t){var r=this._cipher,n=r.blockSize,i=this._iv,o=this._counter;i&&(o=this._counter=i.slice(0),this._iv=void 0);var a=o.slice(0);r.encryptBlock(a,0),o[n-1]=o[n-1]+1|0;for(var s=0;s<n;s++)e[t+s]^=a[s]}}),n.Decryptor=i,n),r.mode.CTR)}),Q(function(e,t){var r;e.exports=((r=ee).mode.CTRGladman=function(){var e=r.lib.BlockCipherMode.extend();function t(e){if(255==(e>>24&255)){var t=e>>16&255,r=e>>8&255,n=255&e;255===t?(t=0,255===r?(r=0,255===n?n=0:++n):++r):++t,e=0,e+=t<<16,e+=r<<8,e+=n}else e+=1<<24;return e}var n=e.Encryptor=e.extend({processBlock:function(e,r){var n=this._cipher,i=n.blockSize,o=this._iv,a=this._counter;o&&(a=this._counter=o.slice(0),this._iv=void 0),function(e){0===(e[0]=t(e[0]))&&(e[1]=t(e[1]))}(a);var s=a.slice(0);n.encryptBlock(s,0);for(var h=0;h<i;h++)e[r+h]^=s[h]}});return e.Decryptor=n,e}(),r.mode.CTRGladman)}),Q(function(e,t){var r,n,i;e.exports=((r=ee).mode.OFB=(n=r.lib.BlockCipherMode.extend(),i=n.Encryptor=n.extend({processBlock:function(e,t){var r=this._cipher,n=r.blockSize,i=this._iv,o=this._keystream;i&&(o=this._keystream=i.slice(0),this._iv=void 0),r.encryptBlock(o,0);for(var a=0;a<n;a++)e[t+a]^=o[a]}}),n.Decryptor=i,n),r.mode.OFB)}),Q(function(e,t){var r,n;e.exports=((r=ee).mode.ECB=((n=r.lib.BlockCipherMode.extend()).Encryptor=n.extend({processBlock:function(e,t){this._cipher.encryptBlock(e,t)}}),n.Decryptor=n.extend({processBlock:function(e,t){this._cipher.decryptBlock(e,t)}}),n),r.mode.ECB)}),Q(function(e,t){var r;e.exports=((r=ee).pad.AnsiX923={pad:function(e,t){var r=e.sigBytes,n=4*t,i=n-r%n,o=r+i-1;e.clamp(),e.words[o>>>2]|=i<<24-o%4*8,e.sigBytes+=i},unpad:function(e){var t=255&e.words[e.sigBytes-1>>>2];e.sigBytes-=t}},r.pad.Ansix923)}),Q(function(e,t){var r;e.exports=((r=ee).pad.Iso10126={pad:function(e,t){var n=4*t,i=n-e.sigBytes%n;e.concat(r.lib.WordArray.random(i-1)).concat(r.lib.WordArray.create([i<<24],1))},unpad:function(e){var t=255&e.words[e.sigBytes-1>>>2];e.sigBytes-=t}},r.pad.Iso10126)}),Q(function(e,t){var r;e.exports=((r=ee).pad.Iso97971={pad:function(e,t){e.concat(r.lib.WordArray.create([2147483648],1)),r.pad.ZeroPadding.pad(e,t)},unpad:function(e){r.pad.ZeroPadding.unpad(e),e.sigBytes--}},r.pad.Iso97971)}),Q(function(e,t){var r;e.exports=((r=ee).pad.ZeroPadding={pad:function(e,t){var r=4*t;e.clamp(),e.sigBytes+=r-(e.sigBytes%r||r)},unpad:function(e){for(var t=e.words,r=e.sigBytes-1;!(t[r>>>2]>>>24-r%4*8&255);)r--;e.sigBytes=r+1}},r.pad.ZeroPadding)}),Q(function(e,t){var r;e.exports=((r=ee).pad.NoPadding={pad:function(){},unpad:function(){}},r.pad.NoPadding)}),Q(function(e,t){var r,n,i,o;e.exports=(i=(n=r=ee).lib.CipherParams,o=n.enc.Hex,n.format.Hex={stringify:function(e){return e.ciphertext.toString(o)},parse:function(e){var t=o.parse(e);return i.create({ciphertext:t})}},r.format.Hex)}),Q(function(e,t){var r;e.exports=(r=ee,function(){var e=r,t=e.lib.BlockCipher,n=e.algo,i=[],o=[],a=[],s=[],h=[],l=[],f=[],c=[],u=[],d=[];!function(){for(var e=[],t=0;t<256;t++)e[t]=t<128?t<<1:t<<1^283;var r=0,n=0;for(t=0;t<256;t++){var p=n^n<<1^n<<2^n<<3^n<<4;p=p>>>8^255&p^99,i[r]=p,o[p]=r;var _=e[r],g=e[_],v=e[g],w=257*e[p]^16843008*p;a[r]=w<<24|w>>>8,s[r]=w<<16|w>>>16,h[r]=w<<8|w>>>24,l[r]=w,w=16843009*v^65537*g^257*_^16843008*r,f[p]=w<<24|w>>>8,c[p]=w<<16|w>>>16,u[p]=w<<8|w>>>24,d[p]=w,r?(r=_^e[e[e[v^_]]],n^=e[e[n]]):r=n=1}}();var p=[0,1,2,4,8,16,32,64,128,27,54],_=n.AES=t.extend({_doReset:function(){if(!this._nRounds||this._keyPriorReset!==this._key){for(var e=this._keyPriorReset=this._key,t=e.words,r=e.sigBytes/4,n=4*((this._nRounds=r+6)+1),o=this._keySchedule=[],a=0;a<n;a++)if(a<r)o[a]=t[a];else{var s=o[a-1];a%r?r>6&&a%r==4&&(s=i[s>>>24]<<24|i[s>>>16&255]<<16|i[s>>>8&255]<<8|i[255&s]):(s=i[(s=s<<8|s>>>24)>>>24]<<24|i[s>>>16&255]<<16|i[s>>>8&255]<<8|i[255&s],s^=p[a/r|0]<<24),o[a]=o[a-r]^s}for(var h=this._invKeySchedule=[],l=0;l<n;l++)a=n-l,s=l%4?o[a]:o[a-4],h[l]=l<4||a<=4?s:f[i[s>>>24]]^c[i[s>>>16&255]]^u[i[s>>>8&255]]^d[i[255&s]]}},encryptBlock:function(e,t){this._doCryptBlock(e,t,this._keySchedule,a,s,h,l,i)},decryptBlock:function(e,t){var r=e[t+1];e[t+1]=e[t+3],e[t+3]=r,this._doCryptBlock(e,t,this._invKeySchedule,f,c,u,d,o),r=e[t+1],e[t+1]=e[t+3],e[t+3]=r},_doCryptBlock:function(e,t,r,n,i,o,a,s){for(var h=this._nRounds,l=e[t]^r[0],f=e[t+1]^r[1],c=e[t+2]^r[2],u=e[t+3]^r[3],d=4,p=1;p<h;p++){var _=n[l>>>24]^i[f>>>16&255]^o[c>>>8&255]^a[255&u]^r[d++],g=n[f>>>24]^i[c>>>16&255]^o[u>>>8&255]^a[255&l]^r[d++],v=n[c>>>24]^i[u>>>16&255]^o[l>>>8&255]^a[255&f]^r[d++],w=n[u>>>24]^i[l>>>16&255]^o[f>>>8&255]^a[255&c]^r[d++];l=_,f=g,c=v,u=w}_=(s[l>>>24]<<24|s[f>>>16&255]<<16|s[c>>>8&255]<<8|s[255&u])^r[d++],g=(s[f>>>24]<<24|s[c>>>16&255]<<16|s[u>>>8&255]<<8|s[255&l])^r[d++],v=(s[c>>>24]<<24|s[u>>>16&255]<<16|s[l>>>8&255]<<8|s[255&f])^r[d++],w=(s[u>>>24]<<24|s[l>>>16&255]<<16|s[f>>>8&255]<<8|s[255&c])^r[d++],e[t]=_,e[t+1]=g,e[t+2]=v,e[t+3]=w},keySize:8});e.AES=t._createHelper(_)}(),r.AES)}),Q(function(e,t){var r;e.exports=(r=ee,function(){var e=r,t=e.lib,n=t.WordArray,i=t.BlockCipher,o=e.algo,a=[57,49,41,33,25,17,9,1,58,50,42,34,26,18,10,2,59,51,43,35,27,19,11,3,60,52,44,36,63,55,47,39,31,23,15,7,62,54,46,38,30,22,14,6,61,53,45,37,29,21,13,5,28,20,12,4],s=[14,17,11,24,1,5,3,28,15,6,21,10,23,19,12,4,26,8,16,7,27,20,13,2,41,52,31,37,47,55,30,40,51,45,33,48,44,49,39,56,34,53,46,42,50,36,29,32],h=[1,2,4,6,8,10,12,14,15,17,19,21,23,25,27,28],l=[{0:8421888,268435456:32768,536870912:8421378,805306368:2,1073741824:512,1342177280:8421890,1610612736:8389122,1879048192:8388608,2147483648:514,2415919104:8389120,2684354560:33280,2952790016:8421376,3221225472:32770,3489660928:8388610,3758096384:0,4026531840:33282,134217728:0,402653184:8421890,671088640:33282,939524096:32768,1207959552:8421888,1476395008:512,1744830464:8421378,2013265920:2,2281701376:8389120,2550136832:33280,2818572288:8421376,3087007744:8389122,3355443200:8388610,3623878656:32770,3892314112:514,4160749568:8388608,1:32768,268435457:2,536870913:8421888,805306369:8388608,1073741825:8421378,1342177281:33280,1610612737:512,1879048193:8389122,2147483649:8421890,2415919105:8421376,2684354561:8388610,2952790017:33282,3221225473:514,3489660929:8389120,3758096385:32770,4026531841:0,134217729:8421890,402653185:8421376,671088641:8388608,939524097:512,1207959553:32768,1476395009:8388610,1744830465:2,2013265921:33282,2281701377:32770,2550136833:8389122,2818572289:514,3087007745:8421888,3355443201:8389120,3623878657:0,3892314113:33280,4160749569:8421378},{0:1074282512,16777216:16384,33554432:524288,50331648:1074266128,67108864:1073741840,83886080:1074282496,100663296:1073758208,117440512:16,134217728:540672,150994944:1073758224,167772160:1073741824,184549376:540688,201326592:524304,218103808:0,234881024:16400,251658240:1074266112,8388608:1073758208,25165824:540688,41943040:16,58720256:1073758224,75497472:1074282512,92274688:1073741824,109051904:524288,125829120:1074266128,142606336:524304,159383552:0,176160768:16384,192937984:1074266112,209715200:1073741840,226492416:540672,243269632:1074282496,260046848:16400,268435456:0,285212672:1074266128,301989888:1073758224,318767104:1074282496,335544320:1074266112,352321536:16,369098752:540688,385875968:16384,402653184:16400,419430400:524288,436207616:524304,452984832:1073741840,469762048:540672,486539264:1073758208,503316480:1073741824,520093696:1074282512,276824064:540688,293601280:524288,310378496:1074266112,327155712:16384,343932928:1073758208,360710144:1074282512,377487360:16,394264576:1073741824,411041792:1074282496,427819008:1073741840,444596224:1073758224,461373440:524304,478150656:0,494927872:16400,511705088:1074266128,528482304:540672},{0:260,1048576:0,2097152:67109120,3145728:65796,4194304:65540,5242880:67108868,6291456:67174660,7340032:67174400,8388608:67108864,9437184:67174656,10485760:65792,11534336:67174404,12582912:67109124,13631488:65536,14680064:4,15728640:256,524288:67174656,1572864:67174404,2621440:0,3670016:67109120,4718592:67108868,5767168:65536,6815744:65540,7864320:260,8912896:4,9961472:256,11010048:67174400,12058624:65796,13107200:65792,14155776:67109124,15204352:67174660,16252928:67108864,16777216:67174656,17825792:65540,18874368:65536,19922944:67109120,20971520:256,22020096:67174660,23068672:67108868,24117248:0,25165824:67109124,26214400:67108864,27262976:4,28311552:65792,29360128:67174400,30408704:260,31457280:65796,32505856:67174404,17301504:67108864,18350080:260,19398656:67174656,20447232:0,21495808:65540,22544384:67109120,23592960:256,24641536:67174404,25690112:65536,26738688:67174660,27787264:65796,28835840:67108868,29884416:67109124,30932992:67174400,31981568:4,33030144:65792},{0:2151682048,65536:2147487808,131072:4198464,196608:2151677952,262144:0,327680:4198400,393216:2147483712,458752:4194368,524288:2147483648,589824:4194304,655360:64,720896:2147487744,786432:2151678016,851968:4160,917504:4096,983040:2151682112,32768:2147487808,98304:64,163840:2151678016,229376:2147487744,294912:4198400,360448:2151682112,425984:0,491520:2151677952,557056:4096,622592:2151682048,688128:4194304,753664:4160,819200:2147483648,884736:4194368,950272:4198464,1015808:2147483712,1048576:4194368,1114112:4198400,1179648:2147483712,1245184:0,1310720:4160,1376256:2151678016,1441792:2151682048,1507328:2147487808,1572864:2151682112,1638400:2147483648,1703936:2151677952,1769472:4198464,1835008:2147487744,1900544:4194304,1966080:64,2031616:4096,1081344:2151677952,1146880:2151682112,1212416:0,1277952:4198400,1343488:4194368,1409024:2147483648,1474560:2147487808,1540096:64,1605632:2147483712,1671168:4096,1736704:2147487744,1802240:2151678016,1867776:4160,1933312:2151682048,1998848:4194304,2064384:4198464},{0:128,4096:17039360,8192:262144,12288:536870912,16384:537133184,20480:16777344,24576:553648256,28672:262272,32768:16777216,36864:537133056,40960:536871040,45056:553910400,49152:553910272,53248:0,57344:17039488,61440:553648128,2048:17039488,6144:553648256,10240:128,14336:17039360,18432:262144,22528:537133184,26624:553910272,30720:536870912,34816:537133056,38912:0,43008:553910400,47104:16777344,51200:536871040,55296:553648128,59392:16777216,63488:262272,65536:262144,69632:128,73728:536870912,77824:553648256,81920:16777344,86016:553910272,90112:537133184,94208:16777216,98304:553910400,102400:553648128,106496:17039360,110592:537133056,114688:262272,118784:536871040,122880:0,126976:17039488,67584:553648256,71680:16777216,75776:17039360,79872:537133184,83968:536870912,88064:17039488,92160:128,96256:553910272,100352:262272,104448:553910400,108544:0,112640:553648128,116736:16777344,120832:262144,124928:537133056,129024:536871040},{0:268435464,256:8192,512:270532608,768:270540808,1024:268443648,1280:2097152,1536:2097160,1792:268435456,2048:0,2304:268443656,2560:2105344,2816:8,3072:270532616,3328:2105352,3584:8200,3840:270540800,128:270532608,384:270540808,640:8,896:2097152,1152:2105352,1408:268435464,1664:268443648,1920:8200,2176:2097160,2432:8192,2688:268443656,2944:270532616,3200:0,3456:270540800,3712:2105344,3968:268435456,4096:268443648,4352:270532616,4608:270540808,4864:8200,5120:2097152,5376:268435456,5632:268435464,5888:2105344,6144:2105352,6400:0,6656:8,6912:270532608,7168:8192,7424:268443656,7680:270540800,7936:2097160,4224:8,4480:2105344,4736:2097152,4992:268435464,5248:268443648,5504:8200,5760:270540808,6016:270532608,6272:270540800,6528:270532616,6784:8192,7040:2105352,7296:2097160,7552:0,7808:268435456,8064:268443656},{0:1048576,16:33555457,32:1024,48:1049601,64:34604033,80:0,96:1,112:34603009,128:33555456,144:1048577,160:33554433,176:34604032,192:34603008,208:1025,224:1049600,240:33554432,8:34603009,24:0,40:33555457,56:34604032,72:1048576,88:33554433,104:33554432,120:1025,136:1049601,152:33555456,168:34603008,184:1048577,200:1024,216:34604033,232:1,248:1049600,256:33554432,272:1048576,288:33555457,304:34603009,320:1048577,336:33555456,352:34604032,368:1049601,384:1025,400:34604033,416:1049600,432:1,448:0,464:34603008,480:33554433,496:1024,264:1049600,280:33555457,296:34603009,312:1,328:33554432,344:1048576,360:1025,376:34604032,392:33554433,408:34603008,424:0,440:34604033,456:1049601,472:1024,488:33555456,504:1048577},{0:134219808,1:131072,2:134217728,3:32,4:131104,5:134350880,6:134350848,7:2048,8:134348800,9:134219776,10:133120,11:134348832,12:2080,13:0,14:134217760,15:133152,2147483648:2048,2147483649:134350880,2147483650:134219808,2147483651:134217728,2147483652:134348800,2147483653:133120,2147483654:133152,2147483655:32,2147483656:134217760,2147483657:2080,2147483658:131104,2147483659:134350848,2147483660:0,2147483661:134348832,2147483662:134219776,2147483663:131072,16:133152,17:134350848,18:32,19:2048,20:134219776,21:134217760,22:134348832,23:131072,24:0,25:131104,26:134348800,27:134219808,28:134350880,29:133120,30:2080,31:134217728,2147483664:131072,2147483665:2048,2147483666:134348832,2147483667:133152,2147483668:32,2147483669:134348800,2147483670:134217728,2147483671:134219808,2147483672:134350880,2147483673:134217760,2147483674:134219776,2147483675:0,2147483676:133120,2147483677:2080,2147483678:131104,2147483679:134350848}],f=[4160749569,528482304,33030144,2064384,129024,8064,504,2147483679],c=o.DES=i.extend({_doReset:function(){for(var e=this._key.words,t=[],r=0;r<56;r++){var n=a[r]-1;t[r]=e[n>>>5]>>>31-n%32&1}for(var i=this._subKeys=[],o=0;o<16;o++){var l=i[o]=[],f=h[o];for(r=0;r<24;r++)l[r/6|0]|=t[(s[r]-1+f)%28]<<31-r%6,l[4+(r/6|0)]|=t[28+(s[r+24]-1+f)%28]<<31-r%6;for(l[0]=l[0]<<1|l[0]>>>31,r=1;r<7;r++)l[r]=l[r]>>>4*(r-1)+3;l[7]=l[7]<<5|l[7]>>>27}var c=this._invSubKeys=[];for(r=0;r<16;r++)c[r]=i[15-r]},encryptBlock:function(e,t){this._doCryptBlock(e,t,this._subKeys)},decryptBlock:function(e,t){this._doCryptBlock(e,t,this._invSubKeys)},_doCryptBlock:function(e,t,r){this._lBlock=e[t],this._rBlock=e[t+1],u.call(this,4,252645135),u.call(this,16,65535),d.call(this,2,858993459),d.call(this,8,16711935),u.call(this,1,1431655765);for(var n=0;n<16;n++){for(var i=r[n],o=this._lBlock,a=this._rBlock,s=0,h=0;h<8;h++)s|=l[h][((a^i[h])&f[h])>>>0];this._lBlock=a,this._rBlock=o^s}var c=this._lBlock;this._lBlock=this._rBlock,this._rBlock=c,u.call(this,1,1431655765),d.call(this,8,16711935),d.call(this,2,858993459),u.call(this,16,65535),u.call(this,4,252645135),e[t]=this._lBlock,e[t+1]=this._rBlock},keySize:2,ivSize:2,blockSize:2});function u(e,t){var r=(this._lBlock>>>e^this._rBlock)&t;this._rBlock^=r,this._lBlock^=r<<e}function d(e,t){var r=(this._rBlock>>>e^this._lBlock)&t;this._lBlock^=r,this._rBlock^=r<<e}e.DES=i._createHelper(c);var p=o.TripleDES=i.extend({_doReset:function(){var e=this._key.words;this._des1=c.createEncryptor(n.create(e.slice(0,2))),this._des2=c.createEncryptor(n.create(e.slice(2,4))),this._des3=c.createEncryptor(n.create(e.slice(4,6)))},encryptBlock:function(e,t){this._des1.encryptBlock(e,t),this._des2.decryptBlock(e,t),this._des3.encryptBlock(e,t)},decryptBlock:function(e,t){this._des3.decryptBlock(e,t),this._des2.encryptBlock(e,t),this._des1.decryptBlock(e,t)},keySize:6,ivSize:2,blockSize:2});e.TripleDES=i._createHelper(p)}(),r.TripleDES)}),Q(function(e,t){var r;e.exports=(r=ee,function(){var e=r,t=e.lib.StreamCipher,n=e.algo,i=n.RC4=t.extend({_doReset:function(){for(var e=this._key,t=e.words,r=e.sigBytes,n=this._S=[],i=0;i<256;i++)n[i]=i;i=0;for(var o=0;i<256;i++){var a=i%r,s=t[a>>>2]>>>24-a%4*8&255;o=(o+n[i]+s)%256;var h=n[i];n[i]=n[o],n[o]=h}this._i=this._j=0},_doProcessBlock:function(e,t){e[t]^=o.call(this)},keySize:8,ivSize:0});function o(){for(var e=this._S,t=this._i,r=this._j,n=0,i=0;i<4;i++){r=(r+e[t=(t+1)%256])%256;var o=e[t];e[t]=e[r],e[r]=o,n|=e[(e[t]+e[r])%256]<<24-8*i}return this._i=t,this._j=r,n}e.RC4=t._createHelper(i);var a=n.RC4Drop=i.extend({cfg:i.cfg.extend({drop:192}),_doReset:function(){i._doReset.call(this);for(var e=this.cfg.drop;e>0;e--)o.call(this)}});e.RC4Drop=t._createHelper(a)}(),r.RC4)}),Q(function(e,t){var r;e.exports=(r=ee,function(){var e=r,t=e.lib.StreamCipher,n=e.algo,i=[],o=[],a=[],s=n.Rabbit=t.extend({_doReset:function(){for(var e=this._key.words,t=this.cfg.iv,r=0;r<4;r++)e[r]=16711935&(e[r]<<8|e[r]>>>24)|4278255360&(e[r]<<24|e[r]>>>8);var n=this._X=[e[0],e[3]<<16|e[2]>>>16,e[1],e[0]<<16|e[3]>>>16,e[2],e[1]<<16|e[0]>>>16,e[3],e[2]<<16|e[1]>>>16],i=this._C=[e[2]<<16|e[2]>>>16,4294901760&e[0]|65535&e[1],e[3]<<16|e[3]>>>16,4294901760&e[1]|65535&e[2],e[0]<<16|e[0]>>>16,4294901760&e[2]|65535&e[3],e[1]<<16|e[1]>>>16,4294901760&e[3]|65535&e[0]];for(this._b=0,r=0;r<4;r++)h.call(this);for(r=0;r<8;r++)i[r]^=n[r+4&7];if(t){var o=t.words,a=o[0],s=o[1],l=16711935&(a<<8|a>>>24)|4278255360&(a<<24|a>>>8),f=16711935&(s<<8|s>>>24)|4278255360&(s<<24|s>>>8),c=l>>>16|4294901760&f,u=f<<16|65535&l;for(i[0]^=l,i[1]^=c,i[2]^=f,i[3]^=u,i[4]^=l,i[5]^=c,i[6]^=f,i[7]^=u,r=0;r<4;r++)h.call(this)}},_doProcessBlock:function(e,t){var r=this._X;h.call(this),i[0]=r[0]^r[5]>>>16^r[3]<<16,i[1]=r[2]^r[7]>>>16^r[5]<<16,i[2]=r[4]^r[1]>>>16^r[7]<<16,i[3]=r[6]^r[3]>>>16^r[1]<<16;for(var n=0;n<4;n++)i[n]=16711935&(i[n]<<8|i[n]>>>24)|4278255360&(i[n]<<24|i[n]>>>8),e[t+n]^=i[n]},blockSize:4,ivSize:2});function h(){for(var e=this._X,t=this._C,r=0;r<8;r++)o[r]=t[r];for(t[0]=t[0]+1295307597+this._b|0,t[1]=t[1]+3545052371+(t[0]>>>0<o[0]>>>0?1:0)|0,t[2]=t[2]+886263092+(t[1]>>>0<o[1]>>>0?1:0)|0,t[3]=t[3]+1295307597+(t[2]>>>0<o[2]>>>0?1:0)|0,t[4]=t[4]+3545052371+(t[3]>>>0<o[3]>>>0?1:0)|0,t[5]=t[5]+886263092+(t[4]>>>0<o[4]>>>0?1:0)|0,t[6]=t[6]+1295307597+(t[5]>>>0<o[5]>>>0?1:0)|0,t[7]=t[7]+3545052371+(t[6]>>>0<o[6]>>>0?1:0)|0,this._b=t[7]>>>0<o[7]>>>0?1:0,r=0;r<8;r++){var n=e[r]+t[r],i=65535&n,s=n>>>16,h=((i*i>>>17)+i*s>>>15)+s*s,l=((4294901760&n)*n|0)+((65535&n)*n|0);a[r]=h^l}e[0]=a[0]+(a[7]<<16|a[7]>>>16)+(a[6]<<16|a[6]>>>16)|0,e[1]=a[1]+(a[0]<<8|a[0]>>>24)+a[7]|0,e[2]=a[2]+(a[1]<<16|a[1]>>>16)+(a[0]<<16|a[0]>>>16)|0,e[3]=a[3]+(a[2]<<8|a[2]>>>24)+a[1]|0,e[4]=a[4]+(a[3]<<16|a[3]>>>16)+(a[2]<<16|a[2]>>>16)|0,e[5]=a[5]+(a[4]<<8|a[4]>>>24)+a[3]|0,e[6]=a[6]+(a[5]<<16|a[5]>>>16)+(a[4]<<16|a[4]>>>16)|0,e[7]=a[7]+(a[6]<<8|a[6]>>>24)+a[5]|0}e.Rabbit=t._createHelper(s)}(),r.Rabbit)}),Q(function(e,t){var r;e.exports=(r=ee,function(){var e=r,t=e.lib.StreamCipher,n=e.algo,i=[],o=[],a=[],s=n.RabbitLegacy=t.extend({_doReset:function(){var e=this._key.words,t=this.cfg.iv,r=this._X=[e[0],e[3]<<16|e[2]>>>16,e[1],e[0]<<16|e[3]>>>16,e[2],e[1]<<16|e[0]>>>16,e[3],e[2]<<16|e[1]>>>16],n=this._C=[e[2]<<16|e[2]>>>16,4294901760&e[0]|65535&e[1],e[3]<<16|e[3]>>>16,4294901760&e[1]|65535&e[2],e[0]<<16|e[0]>>>16,4294901760&e[2]|65535&e[3],e[1]<<16|e[1]>>>16,4294901760&e[3]|65535&e[0]];this._b=0;for(var i=0;i<4;i++)h.call(this);for(i=0;i<8;i++)n[i]^=r[i+4&7];if(t){var o=t.words,a=o[0],s=o[1],l=16711935&(a<<8|a>>>24)|4278255360&(a<<24|a>>>8),f=16711935&(s<<8|s>>>24)|4278255360&(s<<24|s>>>8),c=l>>>16|4294901760&f,u=f<<16|65535&l;for(n[0]^=l,n[1]^=c,n[2]^=f,n[3]^=u,n[4]^=l,n[5]^=c,n[6]^=f,n[7]^=u,i=0;i<4;i++)h.call(this)}},_doProcessBlock:function(e,t){var r=this._X;h.call(this),i[0]=r[0]^r[5]>>>16^r[3]<<16,i[1]=r[2]^r[7]>>>16^r[5]<<16,i[2]=r[4]^r[1]>>>16^r[7]<<16,i[3]=r[6]^r[3]>>>16^r[1]<<16;for(var n=0;n<4;n++)i[n]=16711935&(i[n]<<8|i[n]>>>24)|4278255360&(i[n]<<24|i[n]>>>8),e[t+n]^=i[n]},blockSize:4,ivSize:2});function h(){for(var e=this._X,t=this._C,r=0;r<8;r++)o[r]=t[r];for(t[0]=t[0]+1295307597+this._b|0,t[1]=t[1]+3545052371+(t[0]>>>0<o[0]>>>0?1:0)|0,t[2]=t[2]+886263092+(t[1]>>>0<o[1]>>>0?1:0)|0,t[3]=t[3]+1295307597+(t[2]>>>0<o[2]>>>0?1:0)|0,t[4]=t[4]+3545052371+(t[3]>>>0<o[3]>>>0?1:0)|0,t[5]=t[5]+886263092+(t[4]>>>0<o[4]>>>0?1:0)|0,t[6]=t[6]+1295307597+(t[5]>>>0<o[5]>>>0?1:0)|0,t[7]=t[7]+3545052371+(t[6]>>>0<o[6]>>>0?1:0)|0,this._b=t[7]>>>0<o[7]>>>0?1:0,r=0;r<8;r++){var n=e[r]+t[r],i=65535&n,s=n>>>16,h=((i*i>>>17)+i*s>>>15)+s*s,l=((4294901760&n)*n|0)+((65535&n)*n|0);a[r]=h^l}e[0]=a[0]+(a[7]<<16|a[7]>>>16)+(a[6]<<16|a[6]>>>16)|0,e[1]=a[1]+(a[0]<<8|a[0]>>>24)+a[7]|0,e[2]=a[2]+(a[1]<<16|a[1]>>>16)+(a[0]<<16|a[0]>>>16)|0,e[3]=a[3]+(a[2]<<8|a[2]>>>24)+a[1]|0,e[4]=a[4]+(a[3]<<16|a[3]>>>16)+(a[2]<<16|a[2]>>>16)|0,e[5]=a[5]+(a[4]<<8|a[4]>>>24)+a[3]|0,e[6]=a[6]+(a[5]<<16|a[5]>>>16)+(a[4]<<16|a[4]>>>16)|0,e[7]=a[7]+(a[6]<<8|a[6]>>>24)+a[5]|0}e.RabbitLegacy=t._createHelper(s)}(),r.RabbitLegacy)}),Q(function(e,t){e.exports=ee}));function re(){throw new Error("setTimeout has not been defined")}function ne(){throw new Error("clearTimeout has not been defined")}var ie=re,oe=ne;function ae(e){if(ie===setTimeout)return setTimeout(e,0);if((ie===re||!ie)&&setTimeout)return ie=setTimeout,setTimeout(e,0);try{return ie(e,0)}catch(t){try{return ie.call(null,e,0)}catch(t){return ie.call(this,e,0)}}}"function"==typeof e.setTimeout&&(ie=setTimeout),"function"==typeof e.clearTimeout&&(oe=clearTimeout);var se,he=[],le=!1,fe=-1;function ce(){le&&se&&(le=!1,se.length?he=se.concat(he):fe=-1,he.length&&ue())}function ue(){if(!le){var e=ae(ce);le=!0;for(var t=he.length;t;){for(se=he,he=[];++fe<t;)se&&se[fe].run();fe=-1,t=he.length}se=null,le=!1,function(e){if(oe===clearTimeout)return clearTimeout(e);if((oe===ne||!oe)&&clearTimeout)return oe=clearTimeout,clearTimeout(e);try{oe(e)}catch(t){try{return oe.call(null,e)}catch(t){return oe.call(this,e)}}}(e)}}function de(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var r=1;r<arguments.length;r++)t[r-1]=arguments[r];he.push(new pe(e,t)),1!==he.length||le||ae(ue)}function pe(e,t){this.fun=e,this.array=t}pe.prototype.run=function(){this.fun.apply(null,this.array)};var _e=e.performance||{};_e.now||_e.mozNow||_e.msNow||_e.oNow||_e.webkitNow;function ge(){}function ve(){ve.init.call(this)}function we(e){return void 0===e._maxListeners?ve.defaultMaxListeners:e._maxListeners}function be(e,t,r){if(t)e.call(r);else for(var n=e.length,i=Ae(e,n),o=0;o<n;++o)i[o].call(r)}function ye(e,t,r,n){if(t)e.call(r,n);else for(var i=e.length,o=Ae(e,i),a=0;a<i;++a)o[a].call(r,n)}function me(e,t,r,n,i){if(t)e.call(r,n,i);else for(var o=e.length,a=Ae(e,o),s=0;s<o;++s)a[s].call(r,n,i)}function ke(e,t,r,n,i,o){if(t)e.call(r,n,i,o);else for(var a=e.length,s=Ae(e,a),h=0;h<a;++h)s[h].call(r,n,i,o)}function Ee(e,t,r,n){if(t)e.apply(r,n);else for(var i=e.length,o=Ae(e,i),a=0;a<i;++a)o[a].apply(r,n)}function Se(e,t,r,n){var i,o,a,s;if("function"!=typeof r)throw new TypeError('"listener" argument must be a function');if((o=e._events)?(o.newListener&&(e.emit("newListener",t,r.listener?r.listener:r),o=e._events),a=o[t]):(o=e._events=new ge,e._eventsCount=0),a){if("function"==typeof a?a=o[t]=n?[r,a]:[a,r]:n?a.unshift(r):a.push(r),!a.warned&&(i=we(e))&&i>0&&a.length>i){a.warned=!0;var h=new Error("Possible EventEmitter memory leak detected. "+a.length+" "+t+" listeners added. Use emitter.setMaxListeners() to increase limit");h.name="MaxListenersExceededWarning",h.emitter=e,h.type=t,h.count=a.length,s=h,"function"==typeof console.warn?console.warn(s):console.log(s)}}else a=o[t]=r,++e._eventsCount;return e}function xe(e,t,r){var n=!1;function i(){e.removeListener(t,i),n||(n=!0,r.apply(e,arguments))}return i.listener=r,i}function Re(e){var t=this._events;if(t){var r=t[e];if("function"==typeof r)return 1;if(r)return r.length}return 0}function Ae(e,t){for(var r=new Array(t);t--;)r[t]=e[t];return r}ge.prototype=Object.create(null),ve.EventEmitter=ve,ve.usingDomains=!1,ve.prototype.domain=void 0,ve.prototype._events=void 0,ve.prototype._maxListeners=void 0,ve.defaultMaxListeners=10,ve.init=function(){this.domain=null,ve.usingDomains&&(void 0).active&&(void 0).Domain,this._events&&this._events!==Object.getPrototypeOf(this)._events||(this._events=new ge,this._eventsCount=0),this._maxListeners=this._maxListeners||void 0},ve.prototype.setMaxListeners=function(e){if("number"!=typeof e||e<0||isNaN(e))throw new TypeError('"n" argument must be a positive number');return this._maxListeners=e,this},ve.prototype.getMaxListeners=function(){return we(this)},ve.prototype.emit=function(e){var t,r,n,i,o,a,s,h="error"===e;if(a=this._events)h=h&&null==a.error;else if(!h)return!1;if(s=this.domain,h){if(t=arguments[1],!s){if(t instanceof Error)throw t;var l=new Error('Uncaught, unspecified "error" event. ('+t+")");throw l.context=t,l}return t||(t=new Error('Uncaught, unspecified "error" event')),t.domainEmitter=this,t.domain=s,t.domainThrown=!1,s.emit("error",t),!1}if(!(r=a[e]))return!1;var f="function"==typeof r;switch(n=arguments.length){case 1:be(r,f,this);break;case 2:ye(r,f,this,arguments[1]);break;case 3:me(r,f,this,arguments[1],arguments[2]);break;case 4:ke(r,f,this,arguments[1],arguments[2],arguments[3]);break;default:for(i=new Array(n-1),o=1;o<n;o++)i[o-1]=arguments[o];Ee(r,f,this,i)}return!0},ve.prototype.addListener=function(e,t){return Se(this,e,t,!1)},ve.prototype.on=ve.prototype.addListener,ve.prototype.prependListener=function(e,t){return Se(this,e,t,!0)},ve.prototype.once=function(e,t){if("function"!=typeof t)throw new TypeError('"listener" argument must be a function');return this.on(e,xe(this,e,t)),this},ve.prototype.prependOnceListener=function(e,t){if("function"!=typeof t)throw new TypeError('"listener" argument must be a function');return this.prependListener(e,xe(this,e,t)),this},ve.prototype.removeListener=function(e,t){var r,n,i,o,a;if("function"!=typeof t)throw new TypeError('"listener" argument must be a function');if(!(n=this._events))return this;if(!(r=n[e]))return this;if(r===t||r.listener&&r.listener===t)0==--this._eventsCount?this._events=new ge:(delete n[e],n.removeListener&&this.emit("removeListener",e,r.listener||t));else if("function"!=typeof r){for(i=-1,o=r.length;o-- >0;)if(r[o]===t||r[o].listener&&r[o].listener===t){a=r[o].listener,i=o;break}if(i<0)return this;if(1===r.length){if(r[0]=void 0,0==--this._eventsCount)return this._events=new ge,this;delete n[e]}else!function(e,t){for(var r=t,n=r+1,i=e.length;n<i;r+=1,n+=1)e[r]=e[n];e.pop()}(r,i);n.removeListener&&this.emit("removeListener",e,a||t)}return this},ve.prototype.removeAllListeners=function(e){var t,r;if(!(r=this._events))return this;if(!r.removeListener)return 0===arguments.length?(this._events=new ge,this._eventsCount=0):r[e]&&(0==--this._eventsCount?this._events=new ge:delete r[e]),this;if(0===arguments.length){for(var n,i=Object.keys(r),o=0;o<i.length;++o)"removeListener"!==(n=i[o])&&this.removeAllListeners(n);return this.removeAllListeners("removeListener"),this._events=new ge,this._eventsCount=0,this}if("function"==typeof(t=r[e]))this.removeListener(e,t);else if(t)do{this.removeListener(e,t[t.length-1])}while(t[0]);return this},ve.prototype.listeners=function(e){var t,r=this._events;return r&&(t=r[e])?"function"==typeof t?[t.listener||t]:function(e){for(var t=new Array(e.length),r=0;r<t.length;++r)t[r]=e[r].listener||e[r];return t}(t):[]},ve.listenerCount=function(e,t){return"function"==typeof e.listenerCount?e.listenerCount(t):Re.call(e,t)},ve.prototype.listenerCount=Re,ve.prototype.eventNames=function(){return this._eventsCount>0?Reflect.ownKeys(this._events):[]};var Be="function"==typeof Object.create?function(e,t){e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}:function(e,t){e.super_=t;var r=function(){};r.prototype=t.prototype,e.prototype=new r,e.prototype.constructor=e},ze=/%[sdj%]/g;function Le(e){if(!Ze(e)){for(var t=[],r=0;r<arguments.length;r++)t.push(De(arguments[r]));return t.join(" ")}r=1;for(var n=arguments,i=n.length,o=String(e).replace(ze,function(e){if("%%"===e)return"%";if(r>=i)return e;switch(e){case"%s":return String(n[r++]);case"%d":return Number(n[r++]);case"%j":try{return JSON.stringify(n[r++])}catch(e){return"[Circular]"}default:return e}}),a=n[r];r<i;a=n[++r])Ne(a)||!Ye(a)?o+=" "+a:o+=" "+De(a);return o}function Te(t,r){if(je(e.process))return function(){return Te(t,r).apply(this,arguments)};var n=!1;return function(){return n||(console.error(r),n=!0),t.apply(this,arguments)}}var Me,Ce={};function De(e,t){var r={seen:[],stylize:Pe};return arguments.length>=3&&(r.depth=arguments[2]),arguments.length>=4&&(r.colors=arguments[3]),Fe(t)?r.showHidden=t:t&&function(e,t){if(!t||!Ye(t))return e;var r=Object.keys(t),n=r.length;for(;n--;)e[r[n]]=t[r[n]]}(r,t),je(r.showHidden)&&(r.showHidden=!1),je(r.depth)&&(r.depth=2),je(r.colors)&&(r.colors=!1),je(r.customInspect)&&(r.customInspect=!0),r.colors&&(r.stylize=Ie),Oe(r,e,r.depth)}function Ie(e,t){var r=De.styles[t];return r?"["+De.colors[r][0]+"m"+e+"["+De.colors[r][1]+"m":e}function Pe(e,t){return e}function Oe(e,t,r){if(e.customInspect&&t&&qe(t.inspect)&&t.inspect!==De&&(!t.constructor||t.constructor.prototype!==t)){var n=t.inspect(r,e);return Ze(n)||(n=Oe(e,n,r)),n}var i=function(e,t){if(je(t))return e.stylize("undefined","undefined");if(Ze(t)){var r="'"+JSON.stringify(t).replace(/^"|"$/g,"").replace(/'/g,"\\'").replace(/\\"/g,'"')+"'";return e.stylize(r,"string")}if(n=t,"number"==typeof n)return e.stylize(""+t,"number");var n;if(Fe(t))return e.stylize(""+t,"boolean");if(Ne(t))return e.stylize("null","null")}(e,t);if(i)return i;var o=Object.keys(t),a=function(e){var t={};return e.forEach(function(e,r){t[e]=!0}),t}(o);if(e.showHidden&&(o=Object.getOwnPropertyNames(t)),Xe(t)&&(o.indexOf("message")>=0||o.indexOf("description")>=0))return Ue(t);if(0===o.length){if(qe(t)){var s=t.name?": "+t.name:"";return e.stylize("[Function"+s+"]","special")}if(We(t))return e.stylize(RegExp.prototype.toString.call(t),"regexp");if(Ke(t))return e.stylize(Date.prototype.toString.call(t),"date");if(Xe(t))return Ue(t)}var h,l,f="",c=!1,u=["{","}"];(h=t,Array.isArray(h)&&(c=!0,u=["[","]"]),qe(t))&&(f=" [Function"+(t.name?": "+t.name:"")+"]");return We(t)&&(f=" "+RegExp.prototype.toString.call(t)),Ke(t)&&(f=" "+Date.prototype.toUTCString.call(t)),Xe(t)&&(f=" "+Ue(t)),0!==o.length||c&&0!=t.length?r<0?We(t)?e.stylize(RegExp.prototype.toString.call(t),"regexp"):e.stylize("[Object]","special"):(e.seen.push(t),l=c?function(e,t,r,n,i){for(var o=[],a=0,s=t.length;a<s;++a)Ge(t,String(a))?o.push(He(e,t,r,n,String(a),!0)):o.push("");return i.forEach(function(i){i.match(/^\d+$/)||o.push(He(e,t,r,n,i,!0))}),o}(e,t,r,a,o):o.map(function(n){return He(e,t,r,a,n,c)}),e.seen.pop(),function(e,t,r){if(e.reduce(function(e,t){return t.indexOf("\n"),e+t.replace(/\u001b\[\d\d?m/g,"").length+1},0)>60)return r[0]+(""===t?"":t+"\n ")+" "+e.join(",\n  ")+" "+r[1];return r[0]+t+" "+e.join(", ")+" "+r[1]}(l,f,u)):u[0]+f+u[1]}function Ue(e){return"["+Error.prototype.toString.call(e)+"]"}function He(e,t,r,n,i,o){var a,s,h;if((h=Object.getOwnPropertyDescriptor(t,i)||{value:t[i]}).get?s=h.set?e.stylize("[Getter/Setter]","special"):e.stylize("[Getter]","special"):h.set&&(s=e.stylize("[Setter]","special")),Ge(n,i)||(a="["+i+"]"),s||(e.seen.indexOf(h.value)<0?(s=Ne(r)?Oe(e,h.value,null):Oe(e,h.value,r-1)).indexOf("\n")>-1&&(s=o?s.split("\n").map(function(e){return"  "+e}).join("\n").substr(2):"\n"+s.split("\n").map(function(e){return"   "+e}).join("\n")):s=e.stylize("[Circular]","special")),je(a)){if(o&&i.match(/^\d+$/))return s;(a=JSON.stringify(""+i)).match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)?(a=a.substr(1,a.length-2),a=e.stylize(a,"name")):(a=a.replace(/'/g,"\\'").replace(/\\"/g,'"').replace(/(^"|"$)/g,"'"),a=e.stylize(a,"string"))}return a+": "+s}function Fe(e){return"boolean"==typeof e}function Ne(e){return null===e}function Ze(e){return"string"==typeof e}function je(e){return void 0===e}function We(e){return Ye(e)&&"[object RegExp]"===Ve(e)}function Ye(e){return"object"==typeof e&&null!==e}function Ke(e){return Ye(e)&&"[object Date]"===Ve(e)}function Xe(e){return Ye(e)&&("[object Error]"===Ve(e)||e instanceof Error)}function qe(e){return"function"==typeof e}function Ve(e){return Object.prototype.toString.call(e)}function Ge(e,t){return Object.prototype.hasOwnProperty.call(e,t)}function $e(){this.head=null,this.tail=null,this.length=0}De.colors={bold:[1,22],italic:[3,23],underline:[4,24],inverse:[7,27],white:[37,39],grey:[90,39],black:[30,39],blue:[34,39],cyan:[36,39],green:[32,39],magenta:[35,39],red:[31,39],yellow:[33,39]},De.styles={special:"cyan",number:"yellow",boolean:"yellow",undefined:"grey",null:"bold",string:"green",date:"magenta",regexp:"red"},$e.prototype.push=function(e){var t={data:e,next:null};this.length>0?this.tail.next=t:this.head=t,this.tail=t,++this.length},$e.prototype.unshift=function(e){var t={data:e,next:this.head};0===this.length&&(this.tail=t),this.head=t,++this.length},$e.prototype.shift=function(){if(0!==this.length){var e=this.head.data;return 1===this.length?this.head=this.tail=null:this.head=this.head.next,--this.length,e}},$e.prototype.clear=function(){this.head=this.tail=null,this.length=0},$e.prototype.join=function(e){if(0===this.length)return"";for(var t=this.head,r=""+t.data;t=t.next;)r+=e+t.data;return r},$e.prototype.concat=function(e){if(0===this.length)return p.alloc(0);if(1===this.length)return this.head.data;for(var t=p.allocUnsafe(e>>>0),r=this.head,n=0;r;)r.data.copy(t,n),n+=r.data.length,r=r.next;return t};var Je=p.isEncoding||function(e){switch(e&&e.toLowerCase()){case"hex":case"utf8":case"utf-8":case"ascii":case"binary":case"base64":case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":case"raw":return!0;default:return!1}};function Qe(e){switch(this.encoding=(e||"utf8").toLowerCase().replace(/[-_]/,""),function(e){if(e&&!Je(e))throw new Error("Unknown encoding: "+e)}(e),this.encoding){case"utf8":this.surrogateSize=3;break;case"ucs2":case"utf16le":this.surrogateSize=2,this.detectIncompleteChar=tt;break;case"base64":this.surrogateSize=3,this.detectIncompleteChar=rt;break;default:return void(this.write=et)}this.charBuffer=new p(6),this.charReceived=0,this.charLength=0}function et(e){return e.toString(this.encoding)}function tt(e){this.charReceived=e.length%2,this.charLength=this.charReceived?2:0}function rt(e){this.charReceived=e.length%3,this.charLength=this.charReceived?3:0}Qe.prototype.write=function(e){for(var t="";this.charLength;){var r=e.length>=this.charLength-this.charReceived?this.charLength-this.charReceived:e.length;if(e.copy(this.charBuffer,this.charReceived,0,r),this.charReceived+=r,this.charReceived<this.charLength)return"";if(e=e.slice(r,e.length),!((i=(t=this.charBuffer.slice(0,this.charLength).toString(this.encoding)).charCodeAt(t.length-1))>=55296&&i<=56319)){if(this.charReceived=this.charLength=0,0===e.length)return t;break}this.charLength+=this.surrogateSize,t=""}this.detectIncompleteChar(e);var n=e.length;this.charLength&&(e.copy(this.charBuffer,0,e.length-this.charReceived,n),n-=this.charReceived);var i;n=(t+=e.toString(this.encoding,0,n)).length-1;if((i=t.charCodeAt(n))>=55296&&i<=56319){var o=this.surrogateSize;return this.charLength+=o,this.charReceived+=o,this.charBuffer.copy(this.charBuffer,o,0,o),e.copy(this.charBuffer,0,0,o),t.substring(0,n)}return t},Qe.prototype.detectIncompleteChar=function(e){for(var t=e.length>=3?3:e.length;t>0;t--){var r=e[e.length-t];if(1==t&&r>>5==6){this.charLength=2;break}if(t<=2&&r>>4==14){this.charLength=3;break}if(t<=3&&r>>3==30){this.charLength=4;break}}this.charReceived=t},Qe.prototype.end=function(e){var t="";if(e&&e.length&&(t=this.write(e)),this.charReceived){var r=this.charReceived,n=this.charBuffer,i=this.encoding;t+=n.slice(0,r).toString(i)}return t},ot.ReadableState=it;var nt=function(e){je(Me)&&(Me=""),e=e.toUpperCase(),Ce[e]||(new RegExp("\\b"+e+"\\b","i").test(Me)?Ce[e]=function(){var t=Le.apply(null,arguments);console.error("%s %d: %s",e,0,t)}:Ce[e]=function(){});return Ce[e]}("stream");function it(e,t){e=e||{},this.objectMode=!!e.objectMode,t instanceof Ct&&(this.objectMode=this.objectMode||!!e.readableObjectMode);var r=e.highWaterMark,n=this.objectMode?16:16384;this.highWaterMark=r||0===r?r:n,this.highWaterMark=~~this.highWaterMark,this.buffer=new $e,this.length=0,this.pipes=null,this.pipesCount=0,this.flowing=null,this.ended=!1,this.endEmitted=!1,this.reading=!1,this.sync=!0,this.needReadable=!1,this.emittedReadable=!1,this.readableListening=!1,this.resumeScheduled=!1,this.defaultEncoding=e.defaultEncoding||"utf8",this.ranOut=!1,this.awaitDrain=0,this.readingMore=!1,this.decoder=null,this.encoding=null,e.encoding&&(this.decoder=new Qe(e.encoding),this.encoding=e.encoding)}function ot(e){if(!(this instanceof ot))return new ot(e);this._readableState=new it(e,this),this.readable=!0,e&&"function"==typeof e.read&&(this._read=e.read),ve.call(this)}function at(e,t,r,n,i){var o=function(e,t){var r=null;$(t)||"string"==typeof t||null==t||e.objectMode||(r=new TypeError("Invalid non-string/buffer chunk"));return r}(t,r);if(o)e.emit("error",o);else if(null===r)t.reading=!1,function(e,t){if(t.ended)return;if(t.decoder){var r=t.decoder.end();r&&r.length&&(t.buffer.push(r),t.length+=t.objectMode?1:r.length)}t.ended=!0,lt(e)}(e,t);else if(t.objectMode||r&&r.length>0)if(t.ended&&!i){var a=new Error("stream.push() after EOF");e.emit("error",a)}else if(t.endEmitted&&i){var s=new Error("stream.unshift() after end event");e.emit("error",s)}else{var h;!t.decoder||i||n||(r=t.decoder.write(r),h=!t.objectMode&&0===r.length),i||(t.reading=!1),h||(t.flowing&&0===t.length&&!t.sync?(e.emit("data",r),e.read(0)):(t.length+=t.objectMode?1:r.length,i?t.buffer.unshift(r):t.buffer.push(r),t.needReadable&&lt(e))),function(e,t){t.readingMore||(t.readingMore=!0,de(ct,e,t))}(e,t)}else i||(t.reading=!1);return function(e){return!e.ended&&(e.needReadable||e.length<e.highWaterMark||0===e.length)}(t)}Be(ot,ve),ot.prototype.push=function(e,t){var r=this._readableState;return r.objectMode||"string"!=typeof e||(t=t||r.defaultEncoding)!==r.encoding&&(e=p.from(e,t),t=""),at(this,r,e,t,!1)},ot.prototype.unshift=function(e){return at(this,this._readableState,e,"",!0)},ot.prototype.isPaused=function(){return!1===this._readableState.flowing},ot.prototype.setEncoding=function(e){return this._readableState.decoder=new Qe(e),this._readableState.encoding=e,this};var st=8388608;function ht(e,t){return e<=0||0===t.length&&t.ended?0:t.objectMode?1:e!=e?t.flowing&&t.length?t.buffer.head.data.length:t.length:(e>t.highWaterMark&&(t.highWaterMark=function(e){return e>=st?e=st:(e--,e|=e>>>1,e|=e>>>2,e|=e>>>4,e|=e>>>8,e|=e>>>16,e++),e}(e)),e<=t.length?e:t.ended?t.length:(t.needReadable=!0,0))}function lt(e){var t=e._readableState;t.needReadable=!1,t.emittedReadable||(nt("emitReadable",t.flowing),t.emittedReadable=!0,t.sync?de(ft,e):ft(e))}function ft(e){nt("emit readable"),e.emit("readable"),pt(e)}function ct(e,t){for(var r=t.length;!t.reading&&!t.flowing&&!t.ended&&t.length<t.highWaterMark&&(nt("maybeReadMore read 0"),e.read(0),r!==t.length);)r=t.length;t.readingMore=!1}function ut(e){nt("readable nexttick read 0"),e.read(0)}function dt(e,t){t.reading||(nt("resume read 0"),e.read(0)),t.resumeScheduled=!1,t.awaitDrain=0,e.emit("resume"),pt(e),t.flowing&&!t.reading&&e.read(0)}function pt(e){var t=e._readableState;for(nt("flow",t.flowing);t.flowing&&null!==e.read(););}function _t(e,t){return 0===t.length?null:(t.objectMode?r=t.buffer.shift():!e||e>=t.length?(r=t.decoder?t.buffer.join(""):1===t.buffer.length?t.buffer.head.data:t.buffer.concat(t.length),t.buffer.clear()):r=function(e,t,r){var n;e<t.head.data.length?(n=t.head.data.slice(0,e),t.head.data=t.head.data.slice(e)):n=e===t.head.data.length?t.shift():r?function(e,t){var r=t.head,n=1,i=r.data;e-=i.length;for(;r=r.next;){var o=r.data,a=e>o.length?o.length:e;if(a===o.length?i+=o:i+=o.slice(0,e),0===(e-=a)){a===o.length?(++n,r.next?t.head=r.next:t.head=t.tail=null):(t.head=r,r.data=o.slice(a));break}++n}return t.length-=n,i}(e,t):function(e,t){var r=p.allocUnsafe(e),n=t.head,i=1;n.data.copy(r),e-=n.data.length;for(;n=n.next;){var o=n.data,a=e>o.length?o.length:e;if(o.copy(r,r.length-e,0,a),0===(e-=a)){a===o.length?(++i,n.next?t.head=n.next:t.head=t.tail=null):(t.head=n,n.data=o.slice(a));break}++i}return t.length-=i,r}(e,t);return n}(e,t.buffer,t.decoder),r);var r}function gt(e){var t=e._readableState;if(t.length>0)throw new Error('"endReadable()" called on non-empty stream');t.endEmitted||(t.ended=!0,de(vt,t,e))}function vt(e,t){e.endEmitted||0!==e.length||(e.endEmitted=!0,t.readable=!1,t.emit("end"))}function wt(e,t){for(var r=0,n=e.length;r<n;r++)if(e[r]===t)return r;return-1}function bt(){}function yt(e,t,r){this.chunk=e,this.encoding=t,this.callback=r,this.next=null}function mt(e,t){Object.defineProperty(this,"buffer",{get:Te(function(){return this.getBuffer()},"_writableState.buffer is deprecated. Use _writableState.getBuffer instead.")}),e=e||{},this.objectMode=!!e.objectMode,t instanceof Ct&&(this.objectMode=this.objectMode||!!e.writableObjectMode);var r=e.highWaterMark,n=this.objectMode?16:16384;this.highWaterMark=r||0===r?r:n,this.highWaterMark=~~this.highWaterMark,this.needDrain=!1,this.ending=!1,this.ended=!1,this.finished=!1;var i=!1===e.decodeStrings;this.decodeStrings=!i,this.defaultEncoding=e.defaultEncoding||"utf8",this.length=0,this.writing=!1,this.corked=0,this.sync=!0,this.bufferProcessing=!1,this.onwrite=function(e){!function(e,t){var r=e._writableState,n=r.sync,i=r.writecb;if(function(e){e.writing=!1,e.writecb=null,e.length-=e.writelen,e.writelen=0}(r),t)!function(e,t,r,n,i){--t.pendingcb,r?de(i,n):i(n);e._writableState.errorEmitted=!0,e.emit("error",n)}(e,r,n,t,i);else{var o=Rt(r);o||r.corked||r.bufferProcessing||!r.bufferedRequest||xt(e,r),n?de(St,e,r,o,i):St(e,r,o,i)}}(t,e)},this.writecb=null,this.writelen=0,this.bufferedRequest=null,this.lastBufferedRequest=null,this.pendingcb=0,this.prefinished=!1,this.errorEmitted=!1,this.bufferedRequestCount=0,this.corkedRequestsFree=new zt(this)}function kt(e){if(!(this instanceof kt||this instanceof Ct))return new kt(e);this._writableState=new mt(e,this),this.writable=!0,e&&("function"==typeof e.write&&(this._write=e.write),"function"==typeof e.writev&&(this._writev=e.writev)),ve.call(this)}function Et(e,t,r,n,i,o,a){t.writelen=n,t.writecb=a,t.writing=!0,t.sync=!0,r?e._writev(i,t.onwrite):e._write(i,o,t.onwrite),t.sync=!1}function St(e,t,r,n){r||function(e,t){0===t.length&&t.needDrain&&(t.needDrain=!1,e.emit("drain"))}(e,t),t.pendingcb--,n(),Bt(e,t)}function xt(e,t){t.bufferProcessing=!0;var r=t.bufferedRequest;if(e._writev&&r&&r.next){var n=t.bufferedRequestCount,i=new Array(n),o=t.corkedRequestsFree;o.entry=r;for(var a=0;r;)i[a]=r,r=r.next,a+=1;Et(e,t,!0,t.length,i,"",o.finish),t.pendingcb++,t.lastBufferedRequest=null,o.next?(t.corkedRequestsFree=o.next,o.next=null):t.corkedRequestsFree=new zt(t)}else{for(;r;){var s=r.chunk,h=r.encoding,l=r.callback;if(Et(e,t,!1,t.objectMode?1:s.length,s,h,l),r=r.next,t.writing)break}null===r&&(t.lastBufferedRequest=null)}t.bufferedRequestCount=0,t.bufferedRequest=r,t.bufferProcessing=!1}function Rt(e){return e.ending&&0===e.length&&null===e.bufferedRequest&&!e.finished&&!e.writing}function At(e,t){t.prefinished||(t.prefinished=!0,e.emit("prefinish"))}function Bt(e,t){var r=Rt(t);return r&&(0===t.pendingcb?(At(e,t),t.finished=!0,e.emit("finish")):At(e,t)),r}function zt(e){var t=this;this.next=null,this.entry=null,this.finish=function(r){var n=t.entry;for(t.entry=null;n;){var i=n.callback;e.pendingcb--,i(r),n=n.next}e.corkedRequestsFree?e.corkedRequestsFree.next=t:e.corkedRequestsFree=t}}ot.prototype.read=function(e){nt("read",e),e=parseInt(e,10);var t=this._readableState,r=e;if(0!==e&&(t.emittedReadable=!1),0===e&&t.needReadable&&(t.length>=t.highWaterMark||t.ended))return nt("read: emitReadable",t.length,t.ended),0===t.length&&t.ended?gt(this):lt(this),null;if(0===(e=ht(e,t))&&t.ended)return 0===t.length&&gt(this),null;var n,i=t.needReadable;return nt("need readable",i),(0===t.length||t.length-e<t.highWaterMark)&&nt("length less than watermark",i=!0),t.ended||t.reading?nt("reading or ended",i=!1):i&&(nt("do read"),t.reading=!0,t.sync=!0,0===t.length&&(t.needReadable=!0),this._read(t.highWaterMark),t.sync=!1,t.reading||(e=ht(r,t))),null===(n=e>0?_t(e,t):null)?(t.needReadable=!0,e=0):t.length-=e,0===t.length&&(t.ended||(t.needReadable=!0),r!==e&&t.ended&&gt(this)),null!==n&&this.emit("data",n),n},ot.prototype._read=function(e){this.emit("error",new Error("not implemented"))},ot.prototype.pipe=function(e,t){var r=this,n=this._readableState;switch(n.pipesCount){case 0:n.pipes=e;break;case 1:n.pipes=[n.pipes,e];break;default:n.pipes.push(e)}n.pipesCount+=1,nt("pipe count=%d opts=%j",n.pipesCount,t);var i=!t||!1!==t.end?a:l;function o(e){nt("onunpipe"),e===r&&l()}function a(){nt("onend"),e.end()}n.endEmitted?de(i):r.once("end",i),e.on("unpipe",o);var s=function(e){return function(){var t=e._readableState;nt("pipeOnDrain",t.awaitDrain),t.awaitDrain&&t.awaitDrain--,0===t.awaitDrain&&e.listeners("data").length&&(t.flowing=!0,pt(e))}}(r);e.on("drain",s);var h=!1;function l(){nt("cleanup"),e.removeListener("close",d),e.removeListener("finish",p),e.removeListener("drain",s),e.removeListener("error",u),e.removeListener("unpipe",o),r.removeListener("end",a),r.removeListener("end",l),r.removeListener("data",c),h=!0,!n.awaitDrain||e._writableState&&!e._writableState.needDrain||s()}var f=!1;function c(t){nt("ondata"),f=!1,!1!==e.write(t)||f||((1===n.pipesCount&&n.pipes===e||n.pipesCount>1&&-1!==wt(n.pipes,e))&&!h&&(nt("false write response, pause",r._readableState.awaitDrain),r._readableState.awaitDrain++,f=!0),r.pause())}function u(t){var r;nt("onerror",t),_(),e.removeListener("error",u),0===(r="error",e.listeners(r).length)&&e.emit("error",t)}function d(){e.removeListener("finish",p),_()}function p(){nt("onfinish"),e.removeListener("close",d),_()}function _(){nt("unpipe"),r.unpipe(e)}return r.on("data",c),function(e,t,r){if("function"==typeof e.prependListener)return e.prependListener(t,r);e._events&&e._events[t]?Array.isArray(e._events[t])?e._events[t].unshift(r):e._events[t]=[r,e._events[t]]:e.on(t,r)}(e,"error",u),e.once("close",d),e.once("finish",p),e.emit("pipe",r),n.flowing||(nt("pipe resume"),r.resume()),e},ot.prototype.unpipe=function(e){var t=this._readableState;if(0===t.pipesCount)return this;if(1===t.pipesCount)return e&&e!==t.pipes?this:(e||(e=t.pipes),t.pipes=null,t.pipesCount=0,t.flowing=!1,e&&e.emit("unpipe",this),this);if(!e){var r=t.pipes,n=t.pipesCount;t.pipes=null,t.pipesCount=0,t.flowing=!1;for(var i=0;i<n;i++)r[i].emit("unpipe",this);return this}var o=wt(t.pipes,e);return-1===o?this:(t.pipes.splice(o,1),t.pipesCount-=1,1===t.pipesCount&&(t.pipes=t.pipes[0]),e.emit("unpipe",this),this)},ot.prototype.on=function(e,t){var r=ve.prototype.on.call(this,e,t);if("data"===e)!1!==this._readableState.flowing&&this.resume();else if("readable"===e){var n=this._readableState;n.endEmitted||n.readableListening||(n.readableListening=n.needReadable=!0,n.emittedReadable=!1,n.reading?n.length&&lt(this):de(ut,this))}return r},ot.prototype.addListener=ot.prototype.on,ot.prototype.resume=function(){var e=this._readableState;return e.flowing||(nt("resume"),e.flowing=!0,function(e,t){t.resumeScheduled||(t.resumeScheduled=!0,de(dt,e,t))}(this,e)),this},ot.prototype.pause=function(){return nt("call pause flowing=%j",this._readableState.flowing),!1!==this._readableState.flowing&&(nt("pause"),this._readableState.flowing=!1,this.emit("pause")),this},ot.prototype.wrap=function(e){var t=this._readableState,r=!1,n=this;for(var i in e.on("end",function(){if(nt("wrapped end"),t.decoder&&!t.ended){var e=t.decoder.end();e&&e.length&&n.push(e)}n.push(null)}),e.on("data",function(i){(nt("wrapped data"),t.decoder&&(i=t.decoder.write(i)),t.objectMode&&null==i)||(t.objectMode||i&&i.length)&&(n.push(i)||(r=!0,e.pause()))}),e)void 0===this[i]&&"function"==typeof e[i]&&(this[i]=function(t){return function(){return e[t].apply(e,arguments)}}(i));return function(e,t){for(var r=0,n=e.length;r<n;r++)t(e[r],r)}(["error","close","destroy","pause","resume"],function(t){e.on(t,n.emit.bind(n,t))}),n._read=function(t){nt("wrapped _read",t),r&&(r=!1,e.resume())},n},ot._fromList=_t,kt.WritableState=mt,Be(kt,ve),mt.prototype.getBuffer=function(){for(var e=this.bufferedRequest,t=[];e;)t.push(e),e=e.next;return t},kt.prototype.pipe=function(){this.emit("error",new Error("Cannot pipe, not readable"))},kt.prototype.write=function(e,t,r){var n=this._writableState,i=!1;return"function"==typeof t&&(r=t,t=null),p.isBuffer(e)?t="buffer":t||(t=n.defaultEncoding),"function"!=typeof r&&(r=bt),n.ended?function(e,t){var r=new Error("write after end");e.emit("error",r),de(t,r)}(this,r):function(e,t,r,n){var i=!0,o=!1;return null===r?o=new TypeError("May not write null values to stream"):p.isBuffer(r)||"string"==typeof r||void 0===r||t.objectMode||(o=new TypeError("Invalid non-string/buffer chunk")),o&&(e.emit("error",o),de(n,o),i=!1),i}(this,n,e,r)&&(n.pendingcb++,i=function(e,t,r,n,i){r=function(e,t,r){return e.objectMode||!1===e.decodeStrings||"string"!=typeof t||(t=p.from(t,r)),t}(t,r,n),p.isBuffer(r)&&(n="buffer");var o=t.objectMode?1:r.length;t.length+=o;var a=t.length<t.highWaterMark;a||(t.needDrain=!0);if(t.writing||t.corked){var s=t.lastBufferedRequest;t.lastBufferedRequest=new yt(r,n,i),s?s.next=t.lastBufferedRequest:t.bufferedRequest=t.lastBufferedRequest,t.bufferedRequestCount+=1}else Et(e,t,!1,o,r,n,i);return a}(this,n,e,t,r)),i},kt.prototype.cork=function(){this._writableState.corked++},kt.prototype.uncork=function(){var e=this._writableState;e.corked&&(e.corked--,e.writing||e.corked||e.finished||e.bufferProcessing||!e.bufferedRequest||xt(this,e))},kt.prototype.setDefaultEncoding=function(e){if("string"==typeof e&&(e=e.toLowerCase()),!(["hex","utf8","utf-8","ascii","binary","base64","ucs2","ucs-2","utf16le","utf-16le","raw"].indexOf((e+"").toLowerCase())>-1))throw new TypeError("Unknown encoding: "+e);return this._writableState.defaultEncoding=e,this},kt.prototype._write=function(e,t,r){r(new Error("not implemented"))},kt.prototype._writev=null,kt.prototype.end=function(e,t,r){var n=this._writableState;"function"==typeof e?(r=e,e=null,t=null):"function"==typeof t&&(r=t,t=null),null!=e&&this.write(e,t),n.corked&&(n.corked=1,this.uncork()),n.ending||n.finished||function(e,t,r){t.ending=!0,Bt(e,t),r&&(t.finished?de(r):e.once("finish",r));t.ended=!0,e.writable=!1}(this,n,r)},Be(Ct,ot);for(var Lt=Object.keys(kt.prototype),Tt=0;Tt<Lt.length;Tt++){var Mt=Lt[Tt];Ct.prototype[Mt]||(Ct.prototype[Mt]=kt.prototype[Mt])}function Ct(e){if(!(this instanceof Ct))return new Ct(e);ot.call(this,e),kt.call(this,e),e&&!1===e.readable&&(this.readable=!1),e&&!1===e.writable&&(this.writable=!1),this.allowHalfOpen=!0,e&&!1===e.allowHalfOpen&&(this.allowHalfOpen=!1),this.once("end",Dt)}function Dt(){this.allowHalfOpen||this._writableState.ended||de(It,this)}function It(e){e.end()}function Pt(e){this.afterTransform=function(t,r){return function(e,t,r){var n=e._transformState;n.transforming=!1;var i=n.writecb;if(!i)return e.emit("error",new Error("no writecb in Transform class"));n.writechunk=null,n.writecb=null,null!=r&&e.push(r);i(t);var o=e._readableState;o.reading=!1,(o.needReadable||o.length<o.highWaterMark)&&e._read(o.highWaterMark)}(e,t,r)},this.needTransform=!1,this.transforming=!1,this.writecb=null,this.writechunk=null,this.writeencoding=null}function Ot(e){if(!(this instanceof Ot))return new Ot(e);Ct.call(this,e),this._transformState=new Pt(this);var t=this;this._readableState.needReadable=!0,this._readableState.sync=!1,e&&("function"==typeof e.transform&&(this._transform=e.transform),"function"==typeof e.flush&&(this._flush=e.flush)),this.once("prefinish",function(){"function"==typeof this._flush?this._flush(function(e){Ut(t,e)}):Ut(t)})}function Ut(e,t){if(t)return e.emit("error",t);var r=e._writableState,n=e._transformState;if(r.length)throw new Error("Calling transform done when ws.length != 0");if(n.transforming)throw new Error("Calling transform done when still transforming");return e.push(null)}function Ht(e){if(!(this instanceof Ht))return new Ht(e);Ot.call(this,e)}function Ft(){ve.call(this)}Be(Ot,Ct),Ot.prototype.push=function(e,t){return this._transformState.needTransform=!1,Ct.prototype.push.call(this,e,t)},Ot.prototype._transform=function(e,t,r){throw new Error("Not implemented")},Ot.prototype._write=function(e,t,r){var n=this._transformState;if(n.writecb=r,n.writechunk=e,n.writeencoding=t,!n.transforming){var i=this._readableState;(n.needTransform||i.needReadable||i.length<i.highWaterMark)&&this._read(i.highWaterMark)}},Ot.prototype._read=function(e){var t=this._transformState;null!==t.writechunk&&t.writecb&&!t.transforming?(t.transforming=!0,this._transform(t.writechunk,t.writeencoding,t.afterTransform)):t.needTransform=!0},Be(Ht,Ot),Ht.prototype._transform=function(e,t,r){r(null,e)},Be(Ft,ve),Ft.Readable=ot,Ft.Writable=kt,Ft.Duplex=Ct,Ft.Transform=Ot,Ft.PassThrough=Ht,Ft.Stream=Ft,Ft.prototype.pipe=function(e,t){var r=this;function n(t){e.writable&&!1===e.write(t)&&r.pause&&r.pause()}function i(){r.readable&&r.resume&&r.resume()}r.on("data",n),e.on("drain",i),e._isStdio||t&&!1===t.end||(r.on("end",a),r.on("close",s));var o=!1;function a(){o||(o=!0,e.end())}function s(){o||(o=!0,"function"==typeof e.destroy&&e.destroy())}function h(e){if(l(),0===ve.listenerCount(this,"error"))throw e}function l(){r.removeListener("data",n),e.removeListener("drain",i),r.removeListener("end",a),r.removeListener("close",s),r.removeListener("error",h),e.removeListener("error",h),r.removeListener("end",l),r.removeListener("close",l),e.removeListener("close",l)}return r.on("error",h),e.on("error",h),r.on("end",l),r.on("close",l),e.on("close",l),e.emit("pipe",r),e};var Nt={2:"need dictionary",1:"stream end",0:"","-1":"file error","-2":"stream error","-3":"data error","-4":"insufficient memory","-5":"buffer error","-6":"incompatible version"};function Zt(){this.input=null,this.next_in=0,this.avail_in=0,this.total_in=0,this.output=null,this.next_out=0,this.avail_out=0,this.total_out=0,this.msg="",this.state=null,this.data_type=2,this.adler=0}function jt(e,t,r,n,i){if(t.subarray&&e.subarray)e.set(t.subarray(r,r+n),i);else for(var o=0;o<n;o++)e[i+o]=t[r+o]}var Wt=Uint8Array,Yt=Uint16Array,Kt=Int32Array,Xt=4,qt=0,Vt=1,Gt=2;function $t(e){for(var t=e.length;--t>=0;)e[t]=0}var Jt=0,Qt=1,er=2,tr=29,rr=256,nr=rr+1+tr,ir=30,or=19,ar=2*nr+1,sr=15,hr=16,lr=7,fr=256,cr=16,ur=17,dr=18,pr=[0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0],_r=[0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13],gr=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,7],vr=[16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15],wr=new Array(2*(nr+2));$t(wr);var br=new Array(2*ir);$t(br);var yr=new Array(512);$t(yr);var mr=new Array(256);$t(mr);var kr=new Array(tr);$t(kr);var Er,Sr,xr,Rr=new Array(ir);function Ar(e,t,r,n,i){this.static_tree=e,this.extra_bits=t,this.extra_base=r,this.elems=n,this.max_length=i,this.has_stree=e&&e.length}function Br(e,t){this.dyn_tree=e,this.max_code=0,this.stat_desc=t}function zr(e){return e<256?yr[e]:yr[256+(e>>>7)]}function Lr(e,t){e.pending_buf[e.pending++]=255&t,e.pending_buf[e.pending++]=t>>>8&255}function Tr(e,t,r){e.bi_valid>hr-r?(e.bi_buf|=t<<e.bi_valid&65535,Lr(e,e.bi_buf),e.bi_buf=t>>hr-e.bi_valid,e.bi_valid+=r-hr):(e.bi_buf|=t<<e.bi_valid&65535,e.bi_valid+=r)}function Mr(e,t,r){Tr(e,r[2*t],r[2*t+1])}function Cr(e,t){var r=0;do{r|=1&e,e>>>=1,r<<=1}while(--t>0);return r>>>1}function Dr(e,t,r){var n,i,o=new Array(sr+1),a=0;for(n=1;n<=sr;n++)o[n]=a=a+r[n-1]<<1;for(i=0;i<=t;i++){var s=e[2*i+1];0!==s&&(e[2*i]=Cr(o[s]++,s))}}function Ir(e){var t;for(t=0;t<nr;t++)e.dyn_ltree[2*t]=0;for(t=0;t<ir;t++)e.dyn_dtree[2*t]=0;for(t=0;t<or;t++)e.bl_tree[2*t]=0;e.dyn_ltree[2*fr]=1,e.opt_len=e.static_len=0,e.last_lit=e.matches=0}function Pr(e){e.bi_valid>8?Lr(e,e.bi_buf):e.bi_valid>0&&(e.pending_buf[e.pending++]=e.bi_buf),e.bi_buf=0,e.bi_valid=0}function Or(e,t,r,n){var i=2*t,o=2*r;return e[i]<e[o]||e[i]===e[o]&&n[t]<=n[r]}function Ur(e,t,r){for(var n=e.heap[r],i=r<<1;i<=e.heap_len&&(i<e.heap_len&&Or(t,e.heap[i+1],e.heap[i],e.depth)&&i++,!Or(t,n,e.heap[i],e.depth));)e.heap[r]=e.heap[i],r=i,i<<=1;e.heap[r]=n}function Hr(e,t,r){var n,i,o,a,s=0;if(0!==e.last_lit)do{n=e.pending_buf[e.d_buf+2*s]<<8|e.pending_buf[e.d_buf+2*s+1],i=e.pending_buf[e.l_buf+s],s++,0===n?Mr(e,i,t):(Mr(e,(o=mr[i])+rr+1,t),0!==(a=pr[o])&&Tr(e,i-=kr[o],a),Mr(e,o=zr(--n),r),0!==(a=_r[o])&&Tr(e,n-=Rr[o],a))}while(s<e.last_lit);Mr(e,fr,t)}function Fr(e,t){var r,n,i,o=t.dyn_tree,a=t.stat_desc.static_tree,s=t.stat_desc.has_stree,h=t.stat_desc.elems,l=-1;for(e.heap_len=0,e.heap_max=ar,r=0;r<h;r++)0!==o[2*r]?(e.heap[++e.heap_len]=l=r,e.depth[r]=0):o[2*r+1]=0;for(;e.heap_len<2;)o[2*(i=e.heap[++e.heap_len]=l<2?++l:0)]=1,e.depth[i]=0,e.opt_len--,s&&(e.static_len-=a[2*i+1]);for(t.max_code=l,r=e.heap_len>>1;r>=1;r--)Ur(e,o,r);i=h;do{r=e.heap[1],e.heap[1]=e.heap[e.heap_len--],Ur(e,o,1),n=e.heap[1],e.heap[--e.heap_max]=r,e.heap[--e.heap_max]=n,o[2*i]=o[2*r]+o[2*n],e.depth[i]=(e.depth[r]>=e.depth[n]?e.depth[r]:e.depth[n])+1,o[2*r+1]=o[2*n+1]=i,e.heap[1]=i++,Ur(e,o,1)}while(e.heap_len>=2);e.heap[--e.heap_max]=e.heap[1],function(e,t){var r,n,i,o,a,s,h=t.dyn_tree,l=t.max_code,f=t.stat_desc.static_tree,c=t.stat_desc.has_stree,u=t.stat_desc.extra_bits,d=t.stat_desc.extra_base,p=t.stat_desc.max_length,_=0;for(o=0;o<=sr;o++)e.bl_count[o]=0;for(h[2*e.heap[e.heap_max]+1]=0,r=e.heap_max+1;r<ar;r++)(o=h[2*h[2*(n=e.heap[r])+1]+1]+1)>p&&(o=p,_++),h[2*n+1]=o,n>l||(e.bl_count[o]++,a=0,n>=d&&(a=u[n-d]),s=h[2*n],e.opt_len+=s*(o+a),c&&(e.static_len+=s*(f[2*n+1]+a)));if(0!==_){do{for(o=p-1;0===e.bl_count[o];)o--;e.bl_count[o]--,e.bl_count[o+1]+=2,e.bl_count[p]--,_-=2}while(_>0);for(o=p;0!==o;o--)for(n=e.bl_count[o];0!==n;)(i=e.heap[--r])>l||(h[2*i+1]!==o&&(e.opt_len+=(o-h[2*i+1])*h[2*i],h[2*i+1]=o),n--)}}(e,t),Dr(o,l,e.bl_count)}function Nr(e,t,r){var n,i,o=-1,a=t[1],s=0,h=7,l=4;for(0===a&&(h=138,l=3),t[2*(r+1)+1]=65535,n=0;n<=r;n++)i=a,a=t[2*(n+1)+1],++s<h&&i===a||(s<l?e.bl_tree[2*i]+=s:0!==i?(i!==o&&e.bl_tree[2*i]++,e.bl_tree[2*cr]++):s<=10?e.bl_tree[2*ur]++:e.bl_tree[2*dr]++,s=0,o=i,0===a?(h=138,l=3):i===a?(h=6,l=3):(h=7,l=4))}function Zr(e,t,r){var n,i,o=-1,a=t[1],s=0,h=7,l=4;for(0===a&&(h=138,l=3),n=0;n<=r;n++)if(i=a,a=t[2*(n+1)+1],!(++s<h&&i===a)){if(s<l)do{Mr(e,i,e.bl_tree)}while(0!=--s);else 0!==i?(i!==o&&(Mr(e,i,e.bl_tree),s--),Mr(e,cr,e.bl_tree),Tr(e,s-3,2)):s<=10?(Mr(e,ur,e.bl_tree),Tr(e,s-3,3)):(Mr(e,dr,e.bl_tree),Tr(e,s-11,7));s=0,o=i,0===a?(h=138,l=3):i===a?(h=6,l=3):(h=7,l=4)}}$t(Rr);var jr=!1;function Wr(e){jr||(!function(){var e,t,r,n,i,o=new Array(sr+1);for(r=0,n=0;n<tr-1;n++)for(kr[n]=r,e=0;e<1<<pr[n];e++)mr[r++]=n;for(mr[r-1]=n,i=0,n=0;n<16;n++)for(Rr[n]=i,e=0;e<1<<_r[n];e++)yr[i++]=n;for(i>>=7;n<ir;n++)for(Rr[n]=i<<7,e=0;e<1<<_r[n]-7;e++)yr[256+i++]=n;for(t=0;t<=sr;t++)o[t]=0;for(e=0;e<=143;)wr[2*e+1]=8,e++,o[8]++;for(;e<=255;)wr[2*e+1]=9,e++,o[9]++;for(;e<=279;)wr[2*e+1]=7,e++,o[7]++;for(;e<=287;)wr[2*e+1]=8,e++,o[8]++;for(Dr(wr,nr+1,o),e=0;e<ir;e++)br[2*e+1]=5,br[2*e]=Cr(e,5);Er=new Ar(wr,pr,rr+1,nr,sr),Sr=new Ar(br,_r,0,ir,sr),xr=new Ar(new Array(0),gr,0,or,lr)}(),jr=!0),e.l_desc=new Br(e.dyn_ltree,Er),e.d_desc=new Br(e.dyn_dtree,Sr),e.bl_desc=new Br(e.bl_tree,xr),e.bi_buf=0,e.bi_valid=0,Ir(e)}function Yr(e,t,r,n){Tr(e,(Jt<<1)+(n?1:0),3),function(e,t,r,n){Pr(e),n&&(Lr(e,r),Lr(e,~r)),jt(e.pending_buf,e.window,t,r,e.pending),e.pending+=r}(e,t,r,!0)}function Kr(e){Tr(e,Qt<<1,3),Mr(e,fr,wr),function(e){16===e.bi_valid?(Lr(e,e.bi_buf),e.bi_buf=0,e.bi_valid=0):e.bi_valid>=8&&(e.pending_buf[e.pending++]=255&e.bi_buf,e.bi_buf>>=8,e.bi_valid-=8)}(e)}function Xr(e,t,r,n){var i,o,a=0;e.level>0?(e.strm.data_type===Gt&&(e.strm.data_type=function(e){var t,r=4093624447;for(t=0;t<=31;t++,r>>>=1)if(1&r&&0!==e.dyn_ltree[2*t])return qt;if(0!==e.dyn_ltree[18]||0!==e.dyn_ltree[20]||0!==e.dyn_ltree[26])return Vt;for(t=32;t<rr;t++)if(0!==e.dyn_ltree[2*t])return Vt;return qt}(e)),Fr(e,e.l_desc),Fr(e,e.d_desc),a=function(e){var t;for(Nr(e,e.dyn_ltree,e.l_desc.max_code),Nr(e,e.dyn_dtree,e.d_desc.max_code),Fr(e,e.bl_desc),t=or-1;t>=3&&0===e.bl_tree[2*vr[t]+1];t--);return e.opt_len+=3*(t+1)+5+5+4,t}(e),i=e.opt_len+3+7>>>3,(o=e.static_len+3+7>>>3)<=i&&(i=o)):i=o=r+5,r+4<=i&&-1!==t?Yr(e,t,r,n):e.strategy===Xt||o===i?(Tr(e,(Qt<<1)+(n?1:0),3),Hr(e,wr,br)):(Tr(e,(er<<1)+(n?1:0),3),function(e,t,r,n){var i;for(Tr(e,t-257,5),Tr(e,r-1,5),Tr(e,n-4,4),i=0;i<n;i++)Tr(e,e.bl_tree[2*vr[i]+1],3);Zr(e,e.dyn_ltree,t-1),Zr(e,e.dyn_dtree,r-1)}(e,e.l_desc.max_code+1,e.d_desc.max_code+1,a+1),Hr(e,e.dyn_ltree,e.dyn_dtree)),Ir(e),n&&Pr(e)}function qr(e,t,r){return e.pending_buf[e.d_buf+2*e.last_lit]=t>>>8&255,e.pending_buf[e.d_buf+2*e.last_lit+1]=255&t,e.pending_buf[e.l_buf+e.last_lit]=255&r,e.last_lit++,0===t?e.dyn_ltree[2*r]++:(e.matches++,t--,e.dyn_ltree[2*(mr[r]+rr+1)]++,e.dyn_dtree[2*zr(t)]++),e.last_lit===e.lit_bufsize-1}function Vr(e,t,r,n){for(var i=65535&e|0,o=e>>>16&65535|0,a=0;0!==r;){r-=a=r>2e3?2e3:r;do{o=o+(i=i+t[n++]|0)|0}while(--a);i%=65521,o%=65521}return i|o<<16|0}var Gr=function(){for(var e,t=[],r=0;r<256;r++){e=r;for(var n=0;n<8;n++)e=1&e?3988292384^e>>>1:e>>>1;t[r]=e}return t}();function $r(e,t,r,n){var i=Gr,o=n+r;e^=-1;for(var a=n;a<o;a++)e=e>>>8^i[255&(e^t[a])];return-1^e}var Jr,Qr=0,en=1,tn=3,rn=4,nn=5,on=0,an=1,sn=-2,hn=-3,ln=-5,fn=-1,cn=1,un=2,dn=3,pn=4,_n=2,gn=8,vn=9,wn=286,bn=30,yn=19,mn=2*wn+1,kn=15,En=3,Sn=258,xn=Sn+En+1,Rn=32,An=42,Bn=69,zn=73,Ln=91,Tn=103,Mn=113,Cn=666,Dn=1,In=2,Pn=3,On=4,Un=3;function Hn(e,t){return e.msg=Nt[t],t}function Fn(e){return(e<<1)-(e>4?9:0)}function Nn(e){for(var t=e.length;--t>=0;)e[t]=0}function Zn(e){var t=e.state,r=t.pending;r>e.avail_out&&(r=e.avail_out),0!==r&&(jt(e.output,t.pending_buf,t.pending_out,r,e.next_out),e.next_out+=r,t.pending_out+=r,e.total_out+=r,e.avail_out-=r,t.pending-=r,0===t.pending&&(t.pending_out=0))}function jn(e,t){Xr(e,e.block_start>=0?e.block_start:-1,e.strstart-e.block_start,t),e.block_start=e.strstart,Zn(e.strm)}function Wn(e,t){e.pending_buf[e.pending++]=t}function Yn(e,t){e.pending_buf[e.pending++]=t>>>8&255,e.pending_buf[e.pending++]=255&t}function Kn(e,t){var r,n,i=e.max_chain_length,o=e.strstart,a=e.prev_length,s=e.nice_match,h=e.strstart>e.w_size-xn?e.strstart-(e.w_size-xn):0,l=e.window,f=e.w_mask,c=e.prev,u=e.strstart+Sn,d=l[o+a-1],p=l[o+a];e.prev_length>=e.good_match&&(i>>=2),s>e.lookahead&&(s=e.lookahead);do{if(l[(r=t)+a]===p&&l[r+a-1]===d&&l[r]===l[o]&&l[++r]===l[o+1]){o+=2,r++;do{}while(l[++o]===l[++r]&&l[++o]===l[++r]&&l[++o]===l[++r]&&l[++o]===l[++r]&&l[++o]===l[++r]&&l[++o]===l[++r]&&l[++o]===l[++r]&&l[++o]===l[++r]&&o<u);if(n=Sn-(u-o),o=u-Sn,n>a){if(e.match_start=t,a=n,n>=s)break;d=l[o+a-1],p=l[o+a]}}}while((t=c[t&f])>h&&0!=--i);return a<=e.lookahead?a:e.lookahead}function Xn(e){var t,r,n,i,o,a,s,h,l,f,c=e.w_size;do{if(i=e.window_size-e.lookahead-e.strstart,e.strstart>=c+(c-xn)){jt(e.window,e.window,c,c,0),e.match_start-=c,e.strstart-=c,e.block_start-=c,t=r=e.hash_size;do{n=e.head[--t],e.head[t]=n>=c?n-c:0}while(--r);t=r=c;do{n=e.prev[--t],e.prev[t]=n>=c?n-c:0}while(--r);i+=c}if(0===e.strm.avail_in)break;if(a=e.strm,s=e.window,h=e.strstart+e.lookahead,l=i,f=void 0,(f=a.avail_in)>l&&(f=l),r=0===f?0:(a.avail_in-=f,jt(s,a.input,a.next_in,f,h),1===a.state.wrap?a.adler=Vr(a.adler,s,f,h):2===a.state.wrap&&(a.adler=$r(a.adler,s,f,h)),a.next_in+=f,a.total_in+=f,f),e.lookahead+=r,e.lookahead+e.insert>=En)for(o=e.strstart-e.insert,e.ins_h=e.window[o],e.ins_h=(e.ins_h<<e.hash_shift^e.window[o+1])&e.hash_mask;e.insert&&(e.ins_h=(e.ins_h<<e.hash_shift^e.window[o+En-1])&e.hash_mask,e.prev[o&e.w_mask]=e.head[e.ins_h],e.head[e.ins_h]=o,o++,e.insert--,!(e.lookahead+e.insert<En)););}while(e.lookahead<xn&&0!==e.strm.avail_in)}function qn(e,t){for(var r,n;;){if(e.lookahead<xn){if(Xn(e),e.lookahead<xn&&t===Qr)return Dn;if(0===e.lookahead)break}if(r=0,e.lookahead>=En&&(e.ins_h=(e.ins_h<<e.hash_shift^e.window[e.strstart+En-1])&e.hash_mask,r=e.prev[e.strstart&e.w_mask]=e.head[e.ins_h],e.head[e.ins_h]=e.strstart),0!==r&&e.strstart-r<=e.w_size-xn&&(e.match_length=Kn(e,r)),e.match_length>=En)if(n=qr(e,e.strstart-e.match_start,e.match_length-En),e.lookahead-=e.match_length,e.match_length<=e.max_lazy_match&&e.lookahead>=En){e.match_length--;do{e.strstart++,e.ins_h=(e.ins_h<<e.hash_shift^e.window[e.strstart+En-1])&e.hash_mask,r=e.prev[e.strstart&e.w_mask]=e.head[e.ins_h],e.head[e.ins_h]=e.strstart}while(0!=--e.match_length);e.strstart++}else e.strstart+=e.match_length,e.match_length=0,e.ins_h=e.window[e.strstart],e.ins_h=(e.ins_h<<e.hash_shift^e.window[e.strstart+1])&e.hash_mask;else n=qr(e,0,e.window[e.strstart]),e.lookahead--,e.strstart++;if(n&&(jn(e,!1),0===e.strm.avail_out))return Dn}return e.insert=e.strstart<En-1?e.strstart:En-1,t===rn?(jn(e,!0),0===e.strm.avail_out?Pn:On):e.last_lit&&(jn(e,!1),0===e.strm.avail_out)?Dn:In}function Vn(e,t){for(var r,n,i;;){if(e.lookahead<xn){if(Xn(e),e.lookahead<xn&&t===Qr)return Dn;if(0===e.lookahead)break}if(r=0,e.lookahead>=En&&(e.ins_h=(e.ins_h<<e.hash_shift^e.window[e.strstart+En-1])&e.hash_mask,r=e.prev[e.strstart&e.w_mask]=e.head[e.ins_h],e.head[e.ins_h]=e.strstart),e.prev_length=e.match_length,e.prev_match=e.match_start,e.match_length=En-1,0!==r&&e.prev_length<e.max_lazy_match&&e.strstart-r<=e.w_size-xn&&(e.match_length=Kn(e,r),e.match_length<=5&&(e.strategy===cn||e.match_length===En&&e.strstart-e.match_start>4096)&&(e.match_length=En-1)),e.prev_length>=En&&e.match_length<=e.prev_length){i=e.strstart+e.lookahead-En,n=qr(e,e.strstart-1-e.prev_match,e.prev_length-En),e.lookahead-=e.prev_length-1,e.prev_length-=2;do{++e.strstart<=i&&(e.ins_h=(e.ins_h<<e.hash_shift^e.window[e.strstart+En-1])&e.hash_mask,r=e.prev[e.strstart&e.w_mask]=e.head[e.ins_h],e.head[e.ins_h]=e.strstart)}while(0!=--e.prev_length);if(e.match_available=0,e.match_length=En-1,e.strstart++,n&&(jn(e,!1),0===e.strm.avail_out))return Dn}else if(e.match_available){if((n=qr(e,0,e.window[e.strstart-1]))&&jn(e,!1),e.strstart++,e.lookahead--,0===e.strm.avail_out)return Dn}else e.match_available=1,e.strstart++,e.lookahead--}return e.match_available&&(n=qr(e,0,e.window[e.strstart-1]),e.match_available=0),e.insert=e.strstart<En-1?e.strstart:En-1,t===rn?(jn(e,!0),0===e.strm.avail_out?Pn:On):e.last_lit&&(jn(e,!1),0===e.strm.avail_out)?Dn:In}function Gn(e,t,r,n,i){this.good_length=e,this.max_lazy=t,this.nice_length=r,this.max_chain=n,this.func=i}function $n(){this.strm=null,this.status=0,this.pending_buf=null,this.pending_buf_size=0,this.pending_out=0,this.pending=0,this.wrap=0,this.gzhead=null,this.gzindex=0,this.method=gn,this.last_flush=-1,this.w_size=0,this.w_bits=0,this.w_mask=0,this.window=null,this.window_size=0,this.prev=null,this.head=null,this.ins_h=0,this.hash_size=0,this.hash_bits=0,this.hash_mask=0,this.hash_shift=0,this.block_start=0,this.match_length=0,this.prev_match=0,this.match_available=0,this.strstart=0,this.match_start=0,this.lookahead=0,this.prev_length=0,this.max_chain_length=0,this.max_lazy_match=0,this.level=0,this.strategy=0,this.good_match=0,this.nice_match=0,this.dyn_ltree=new Yt(2*mn),this.dyn_dtree=new Yt(2*(2*bn+1)),this.bl_tree=new Yt(2*(2*yn+1)),Nn(this.dyn_ltree),Nn(this.dyn_dtree),Nn(this.bl_tree),this.l_desc=null,this.d_desc=null,this.bl_desc=null,this.bl_count=new Yt(kn+1),this.heap=new Yt(2*wn+1),Nn(this.heap),this.heap_len=0,this.heap_max=0,this.depth=new Yt(2*wn+1),Nn(this.depth),this.l_buf=0,this.lit_bufsize=0,this.last_lit=0,this.d_buf=0,this.opt_len=0,this.static_len=0,this.matches=0,this.insert=0,this.bi_buf=0,this.bi_valid=0}function Jn(e){var t,r=function(e){var t;return e&&e.state?(e.total_in=e.total_out=0,e.data_type=_n,(t=e.state).pending=0,t.pending_out=0,t.wrap<0&&(t.wrap=-t.wrap),t.status=t.wrap?An:Mn,e.adler=2===t.wrap?0:1,t.last_flush=Qr,Wr(t),on):Hn(e,sn)}(e);return r===on&&((t=e.state).window_size=2*t.w_size,Nn(t.head),t.max_lazy_match=Jr[t.level].max_lazy,t.good_match=Jr[t.level].good_length,t.nice_match=Jr[t.level].nice_length,t.max_chain_length=Jr[t.level].max_chain,t.strstart=0,t.block_start=0,t.lookahead=0,t.insert=0,t.match_length=t.prev_length=En-1,t.match_available=0,t.ins_h=0),r}function Qn(e,t){var r,n,i,o;if(!e||!e.state||t>nn||t<0)return e?Hn(e,sn):sn;if(n=e.state,!e.output||!e.input&&0!==e.avail_in||n.status===Cn&&t!==rn)return Hn(e,0===e.avail_out?ln:sn);if(n.strm=e,r=n.last_flush,n.last_flush=t,n.status===An)if(2===n.wrap)e.adler=0,Wn(n,31),Wn(n,139),Wn(n,8),n.gzhead?(Wn(n,(n.gzhead.text?1:0)+(n.gzhead.hcrc?2:0)+(n.gzhead.extra?4:0)+(n.gzhead.name?8:0)+(n.gzhead.comment?16:0)),Wn(n,255&n.gzhead.time),Wn(n,n.gzhead.time>>8&255),Wn(n,n.gzhead.time>>16&255),Wn(n,n.gzhead.time>>24&255),Wn(n,9===n.level?2:n.strategy>=un||n.level<2?4:0),Wn(n,255&n.gzhead.os),n.gzhead.extra&&n.gzhead.extra.length&&(Wn(n,255&n.gzhead.extra.length),Wn(n,n.gzhead.extra.length>>8&255)),n.gzhead.hcrc&&(e.adler=$r(e.adler,n.pending_buf,n.pending,0)),n.gzindex=0,n.status=Bn):(Wn(n,0),Wn(n,0),Wn(n,0),Wn(n,0),Wn(n,0),Wn(n,9===n.level?2:n.strategy>=un||n.level<2?4:0),Wn(n,Un),n.status=Mn);else{var a=gn+(n.w_bits-8<<4)<<8;a|=(n.strategy>=un||n.level<2?0:n.level<6?1:6===n.level?2:3)<<6,0!==n.strstart&&(a|=Rn),a+=31-a%31,n.status=Mn,Yn(n,a),0!==n.strstart&&(Yn(n,e.adler>>>16),Yn(n,65535&e.adler)),e.adler=1}if(n.status===Bn)if(n.gzhead.extra){for(i=n.pending;n.gzindex<(65535&n.gzhead.extra.length)&&(n.pending!==n.pending_buf_size||(n.gzhead.hcrc&&n.pending>i&&(e.adler=$r(e.adler,n.pending_buf,n.pending-i,i)),Zn(e),i=n.pending,n.pending!==n.pending_buf_size));)Wn(n,255&n.gzhead.extra[n.gzindex]),n.gzindex++;n.gzhead.hcrc&&n.pending>i&&(e.adler=$r(e.adler,n.pending_buf,n.pending-i,i)),n.gzindex===n.gzhead.extra.length&&(n.gzindex=0,n.status=zn)}else n.status=zn;if(n.status===zn)if(n.gzhead.name){i=n.pending;do{if(n.pending===n.pending_buf_size&&(n.gzhead.hcrc&&n.pending>i&&(e.adler=$r(e.adler,n.pending_buf,n.pending-i,i)),Zn(e),i=n.pending,n.pending===n.pending_buf_size)){o=1;break}o=n.gzindex<n.gzhead.name.length?255&n.gzhead.name.charCodeAt(n.gzindex++):0,Wn(n,o)}while(0!==o);n.gzhead.hcrc&&n.pending>i&&(e.adler=$r(e.adler,n.pending_buf,n.pending-i,i)),0===o&&(n.gzindex=0,n.status=Ln)}else n.status=Ln;if(n.status===Ln)if(n.gzhead.comment){i=n.pending;do{if(n.pending===n.pending_buf_size&&(n.gzhead.hcrc&&n.pending>i&&(e.adler=$r(e.adler,n.pending_buf,n.pending-i,i)),Zn(e),i=n.pending,n.pending===n.pending_buf_size)){o=1;break}o=n.gzindex<n.gzhead.comment.length?255&n.gzhead.comment.charCodeAt(n.gzindex++):0,Wn(n,o)}while(0!==o);n.gzhead.hcrc&&n.pending>i&&(e.adler=$r(e.adler,n.pending_buf,n.pending-i,i)),0===o&&(n.status=Tn)}else n.status=Tn;if(n.status===Tn&&(n.gzhead.hcrc?(n.pending+2>n.pending_buf_size&&Zn(e),n.pending+2<=n.pending_buf_size&&(Wn(n,255&e.adler),Wn(n,e.adler>>8&255),e.adler=0,n.status=Mn)):n.status=Mn),0!==n.pending){if(Zn(e),0===e.avail_out)return n.last_flush=-1,on}else if(0===e.avail_in&&Fn(t)<=Fn(r)&&t!==rn)return Hn(e,ln);if(n.status===Cn&&0!==e.avail_in)return Hn(e,ln);if(0!==e.avail_in||0!==n.lookahead||t!==Qr&&n.status!==Cn){var s=n.strategy===un?function(e,t){for(var r;;){if(0===e.lookahead&&(Xn(e),0===e.lookahead)){if(t===Qr)return Dn;break}if(e.match_length=0,r=qr(e,0,e.window[e.strstart]),e.lookahead--,e.strstart++,r&&(jn(e,!1),0===e.strm.avail_out))return Dn}return e.insert=0,t===rn?(jn(e,!0),0===e.strm.avail_out?Pn:On):e.last_lit&&(jn(e,!1),0===e.strm.avail_out)?Dn:In}(n,t):n.strategy===dn?function(e,t){for(var r,n,i,o,a=e.window;;){if(e.lookahead<=Sn){if(Xn(e),e.lookahead<=Sn&&t===Qr)return Dn;if(0===e.lookahead)break}if(e.match_length=0,e.lookahead>=En&&e.strstart>0&&(n=a[i=e.strstart-1])===a[++i]&&n===a[++i]&&n===a[++i]){o=e.strstart+Sn;do{}while(n===a[++i]&&n===a[++i]&&n===a[++i]&&n===a[++i]&&n===a[++i]&&n===a[++i]&&n===a[++i]&&n===a[++i]&&i<o);e.match_length=Sn-(o-i),e.match_length>e.lookahead&&(e.match_length=e.lookahead)}if(e.match_length>=En?(r=qr(e,1,e.match_length-En),e.lookahead-=e.match_length,e.strstart+=e.match_length,e.match_length=0):(r=qr(e,0,e.window[e.strstart]),e.lookahead--,e.strstart++),r&&(jn(e,!1),0===e.strm.avail_out))return Dn}return e.insert=0,t===rn?(jn(e,!0),0===e.strm.avail_out?Pn:On):e.last_lit&&(jn(e,!1),0===e.strm.avail_out)?Dn:In}(n,t):Jr[n.level].func(n,t);if(s!==Pn&&s!==On||(n.status=Cn),s===Dn||s===Pn)return 0===e.avail_out&&(n.last_flush=-1),on;if(s===In&&(t===en?Kr(n):t!==nn&&(Yr(n,0,0,!1),t===tn&&(Nn(n.head),0===n.lookahead&&(n.strstart=0,n.block_start=0,n.insert=0))),Zn(e),0===e.avail_out))return n.last_flush=-1,on}return t!==rn?on:n.wrap<=0?an:(2===n.wrap?(Wn(n,255&e.adler),Wn(n,e.adler>>8&255),Wn(n,e.adler>>16&255),Wn(n,e.adler>>24&255),Wn(n,255&e.total_in),Wn(n,e.total_in>>8&255),Wn(n,e.total_in>>16&255),Wn(n,e.total_in>>24&255)):(Yn(n,e.adler>>>16),Yn(n,65535&e.adler)),Zn(e),n.wrap>0&&(n.wrap=-n.wrap),0!==n.pending?on:an)}Jr=[new Gn(0,0,0,0,function(e,t){var r=65535;for(r>e.pending_buf_size-5&&(r=e.pending_buf_size-5);;){if(e.lookahead<=1){if(Xn(e),0===e.lookahead&&t===Qr)return Dn;if(0===e.lookahead)break}e.strstart+=e.lookahead,e.lookahead=0;var n=e.block_start+r;if((0===e.strstart||e.strstart>=n)&&(e.lookahead=e.strstart-n,e.strstart=n,jn(e,!1),0===e.strm.avail_out))return Dn;if(e.strstart-e.block_start>=e.w_size-xn&&(jn(e,!1),0===e.strm.avail_out))return Dn}return e.insert=0,t===rn?(jn(e,!0),0===e.strm.avail_out?Pn:On):(e.strstart>e.block_start&&(jn(e,!1),e.strm.avail_out),Dn)}),new Gn(4,4,8,4,qn),new Gn(4,5,16,8,qn),new Gn(4,6,32,32,qn),new Gn(4,4,16,16,Vn),new Gn(8,16,32,32,Vn),new Gn(8,16,128,128,Vn),new Gn(8,32,128,256,Vn),new Gn(32,128,258,1024,Vn),new Gn(32,258,258,4096,Vn)];var ei=30,ti=12;function ri(e,t){var r,n,i,o,a,s,h,l,f,c,u,d,p,_,g,v,w,b,y,m,k,E,S,x,R;r=e.state,n=e.next_in,x=e.input,i=n+(e.avail_in-5),o=e.next_out,R=e.output,a=o-(t-e.avail_out),s=o+(e.avail_out-257),h=r.dmax,l=r.wsize,f=r.whave,c=r.wnext,u=r.window,d=r.hold,p=r.bits,_=r.lencode,g=r.distcode,v=(1<<r.lenbits)-1,w=(1<<r.distbits)-1;e:do{p<15&&(d+=x[n++]<<p,p+=8,d+=x[n++]<<p,p+=8),b=_[d&v];t:for(;;){if(d>>>=y=b>>>24,p-=y,0===(y=b>>>16&255))R[o++]=65535&b;else{if(!(16&y)){if(0==(64&y)){b=_[(65535&b)+(d&(1<<y)-1)];continue t}if(32&y){r.mode=ti;break e}e.msg="invalid literal/length code",r.mode=ei;break e}m=65535&b,(y&=15)&&(p<y&&(d+=x[n++]<<p,p+=8),m+=d&(1<<y)-1,d>>>=y,p-=y),p<15&&(d+=x[n++]<<p,p+=8,d+=x[n++]<<p,p+=8),b=g[d&w];r:for(;;){if(d>>>=y=b>>>24,p-=y,!(16&(y=b>>>16&255))){if(0==(64&y)){b=g[(65535&b)+(d&(1<<y)-1)];continue r}e.msg="invalid distance code",r.mode=ei;break e}if(k=65535&b,p<(y&=15)&&(d+=x[n++]<<p,(p+=8)<y&&(d+=x[n++]<<p,p+=8)),(k+=d&(1<<y)-1)>h){e.msg="invalid distance too far back",r.mode=ei;break e}if(d>>>=y,p-=y,k>(y=o-a)){if((y=k-y)>f&&r.sane){e.msg="invalid distance too far back",r.mode=ei;break e}if(E=0,S=u,0===c){if(E+=l-y,y<m){m-=y;do{R[o++]=u[E++]}while(--y);E=o-k,S=R}}else if(c<y){if(E+=l+c-y,(y-=c)<m){m-=y;do{R[o++]=u[E++]}while(--y);if(E=0,c<m){m-=y=c;do{R[o++]=u[E++]}while(--y);E=o-k,S=R}}}else if(E+=c-y,y<m){m-=y;do{R[o++]=u[E++]}while(--y);E=o-k,S=R}for(;m>2;)R[o++]=S[E++],R[o++]=S[E++],R[o++]=S[E++],m-=3;m&&(R[o++]=S[E++],m>1&&(R[o++]=S[E++]))}else{E=o-k;do{R[o++]=R[E++],R[o++]=R[E++],R[o++]=R[E++],m-=3}while(m>2);m&&(R[o++]=R[E++],m>1&&(R[o++]=R[E++]))}break}}break}}while(n<i&&o<s);n-=m=p>>3,d&=(1<<(p-=m<<3))-1,e.next_in=n,e.next_out=o,e.avail_in=n<i?i-n+5:5-(n-i),e.avail_out=o<s?s-o+257:257-(o-s),r.hold=d,r.bits=p}var ni=15,ii=852,oi=592,ai=0,si=1,hi=2,li=[3,4,5,6,7,8,9,10,11,13,15,17,19,23,27,31,35,43,51,59,67,83,99,115,131,163,195,227,258,0,0],fi=[16,16,16,16,16,16,16,16,17,17,17,17,18,18,18,18,19,19,19,19,20,20,20,20,21,21,21,21,16,72,78],ci=[1,2,3,4,5,7,9,13,17,25,33,49,65,97,129,193,257,385,513,769,1025,1537,2049,3073,4097,6145,8193,12289,16385,24577,0,0],ui=[16,16,16,16,17,17,18,18,19,19,20,20,21,21,22,22,23,23,24,24,25,25,26,26,27,27,28,28,29,29,64,64];function di(e,t,r,n,i,o,a,s){var h,l,f,c,u,d,p,_,g,v=s.bits,w=0,b=0,y=0,m=0,k=0,E=0,S=0,x=0,R=0,A=0,B=null,z=0,L=new Yt(ni+1),T=new Yt(ni+1),M=null,C=0;for(w=0;w<=ni;w++)L[w]=0;for(b=0;b<n;b++)L[t[r+b]]++;for(k=v,m=ni;m>=1&&0===L[m];m--);if(k>m&&(k=m),0===m)return i[o++]=20971520,i[o++]=20971520,s.bits=1,0;for(y=1;y<m&&0===L[y];y++);for(k<y&&(k=y),x=1,w=1;w<=ni;w++)if(x<<=1,(x-=L[w])<0)return-1;if(x>0&&(e===ai||1!==m))return-1;for(T[1]=0,w=1;w<ni;w++)T[w+1]=T[w]+L[w];for(b=0;b<n;b++)0!==t[r+b]&&(a[T[t[r+b]]++]=b);if(e===ai?(B=M=a,d=19):e===si?(B=li,z-=257,M=fi,C-=257,d=256):(B=ci,M=ui,d=-1),A=0,b=0,w=y,u=o,E=k,S=0,f=-1,c=(R=1<<k)-1,e===si&&R>ii||e===hi&&R>oi)return 1;for(;;){p=w-S,a[b]<d?(_=0,g=a[b]):a[b]>d?(_=M[C+a[b]],g=B[z+a[b]]):(_=96,g=0),h=1<<w-S,y=l=1<<E;do{i[u+(A>>S)+(l-=h)]=p<<24|_<<16|g|0}while(0!==l);for(h=1<<w-1;A&h;)h>>=1;if(0!==h?(A&=h-1,A+=h):A=0,b++,0==--L[w]){if(w===m)break;w=t[r+a[b]]}if(w>k&&(A&c)!==f){for(0===S&&(S=k),u+=y,x=1<<(E=w-S);E+S<m&&!((x-=L[E+S])<=0);)E++,x<<=1;if(R+=1<<E,e===si&&R>ii||e===hi&&R>oi)return 1;i[f=A&c]=k<<24|E<<16|u-o|0}}return 0!==A&&(i[u+A]=w-S<<24|64<<16|0),s.bits=k,0}var pi=0,_i=1,gi=2,vi=4,wi=5,bi=6,yi=0,mi=1,ki=2,Ei=-2,Si=-3,xi=-4,Ri=-5,Ai=8,Bi=1,zi=2,Li=3,Ti=4,Mi=5,Ci=6,Di=7,Ii=8,Pi=9,Oi=10,Ui=11,Hi=12,Fi=13,Ni=14,Zi=15,ji=16,Wi=17,Yi=18,Ki=19,Xi=20,qi=21,Vi=22,Gi=23,$i=24,Ji=25,Qi=26,eo=27,to=28,ro=29,no=30,io=31,oo=32,ao=852,so=592;function ho(e){return(e>>>24&255)+(e>>>8&65280)+((65280&e)<<8)+((255&e)<<24)}function lo(){this.mode=0,this.last=!1,this.wrap=0,this.havedict=!1,this.flags=0,this.dmax=0,this.check=0,this.total=0,this.head=null,this.wbits=0,this.wsize=0,this.whave=0,this.wnext=0,this.window=null,this.hold=0,this.bits=0,this.length=0,this.offset=0,this.extra=0,this.lencode=null,this.distcode=null,this.lenbits=0,this.distbits=0,this.ncode=0,this.nlen=0,this.ndist=0,this.have=0,this.next=null,this.lens=new Yt(320),this.work=new Yt(288),this.lendyn=null,this.distdyn=null,this.sane=0,this.back=0,this.was=0}function fo(e){var t;return e&&e.state?((t=e.state).wsize=0,t.whave=0,t.wnext=0,function(e){var t;return e&&e.state?(t=e.state,e.total_in=e.total_out=t.total=0,e.msg="",t.wrap&&(e.adler=1&t.wrap),t.mode=Bi,t.last=0,t.havedict=0,t.dmax=32768,t.head=null,t.hold=0,t.bits=0,t.lencode=t.lendyn=new Kt(ao),t.distcode=t.distdyn=new Kt(so),t.sane=1,t.back=-1,yi):Ei}(e)):Ei}function co(e,t){var r,n;return e?(n=new lo,e.state=n,n.window=null,(r=function(e,t){var r,n;return e&&e.state?(n=e.state,t<0?(r=0,t=-t):(r=1+(t>>4),t<48&&(t&=15)),t&&(t<8||t>15)?Ei:(null!==n.window&&n.wbits!==t&&(n.window=null),n.wrap=r,n.wbits=t,fo(e))):Ei}(e,t))!==yi&&(e.state=null),r):Ei}var uo,po,_o=!0;function go(e){if(_o){var t;for(uo=new Kt(512),po=new Kt(32),t=0;t<144;)e.lens[t++]=8;for(;t<256;)e.lens[t++]=9;for(;t<280;)e.lens[t++]=7;for(;t<288;)e.lens[t++]=8;for(di(_i,e.lens,0,288,uo,0,e.work,{bits:9}),t=0;t<32;)e.lens[t++]=5;di(gi,e.lens,0,32,po,0,e.work,{bits:5}),_o=!1}e.lencode=uo,e.lenbits=9,e.distcode=po,e.distbits=5}function vo(e,t){var r,n,i,o,a,s,h,l,f,c,u,d,p,_,g,v,w,b,y,m,k,E,S,x,R=0,A=new Wt(4),B=[16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15];if(!e||!e.state||!e.output||!e.input&&0!==e.avail_in)return Ei;(r=e.state).mode===Hi&&(r.mode=Fi),a=e.next_out,i=e.output,h=e.avail_out,o=e.next_in,n=e.input,s=e.avail_in,l=r.hold,f=r.bits,c=s,u=h,E=yi;e:for(;;)switch(r.mode){case Bi:if(0===r.wrap){r.mode=Fi;break}for(;f<16;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}if(2&r.wrap&&35615===l){r.check=0,A[0]=255&l,A[1]=l>>>8&255,r.check=$r(r.check,A,2,0),l=0,f=0,r.mode=zi;break}if(r.flags=0,r.head&&(r.head.done=!1),!(1&r.wrap)||(((255&l)<<8)+(l>>8))%31){e.msg="incorrect header check",r.mode=no;break}if((15&l)!==Ai){e.msg="unknown compression method",r.mode=no;break}if(f-=4,k=8+(15&(l>>>=4)),0===r.wbits)r.wbits=k;else if(k>r.wbits){e.msg="invalid window size",r.mode=no;break}r.dmax=1<<k,e.adler=r.check=1,r.mode=512&l?Oi:Hi,l=0,f=0;break;case zi:for(;f<16;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}if(r.flags=l,(255&r.flags)!==Ai){e.msg="unknown compression method",r.mode=no;break}if(57344&r.flags){e.msg="unknown header flags set",r.mode=no;break}r.head&&(r.head.text=l>>8&1),512&r.flags&&(A[0]=255&l,A[1]=l>>>8&255,r.check=$r(r.check,A,2,0)),l=0,f=0,r.mode=Li;case Li:for(;f<32;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}r.head&&(r.head.time=l),512&r.flags&&(A[0]=255&l,A[1]=l>>>8&255,A[2]=l>>>16&255,A[3]=l>>>24&255,r.check=$r(r.check,A,4,0)),l=0,f=0,r.mode=Ti;case Ti:for(;f<16;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}r.head&&(r.head.xflags=255&l,r.head.os=l>>8),512&r.flags&&(A[0]=255&l,A[1]=l>>>8&255,r.check=$r(r.check,A,2,0)),l=0,f=0,r.mode=Mi;case Mi:if(1024&r.flags){for(;f<16;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}r.length=l,r.head&&(r.head.extra_len=l),512&r.flags&&(A[0]=255&l,A[1]=l>>>8&255,r.check=$r(r.check,A,2,0)),l=0,f=0}else r.head&&(r.head.extra=null);r.mode=Ci;case Ci:if(1024&r.flags&&((d=r.length)>s&&(d=s),d&&(r.head&&(k=r.head.extra_len-r.length,r.head.extra||(r.head.extra=new Array(r.head.extra_len)),jt(r.head.extra,n,o,d,k)),512&r.flags&&(r.check=$r(r.check,n,d,o)),s-=d,o+=d,r.length-=d),r.length))break e;r.length=0,r.mode=Di;case Di:if(2048&r.flags){if(0===s)break e;d=0;do{k=n[o+d++],r.head&&k&&r.length<65536&&(r.head.name+=String.fromCharCode(k))}while(k&&d<s);if(512&r.flags&&(r.check=$r(r.check,n,d,o)),s-=d,o+=d,k)break e}else r.head&&(r.head.name=null);r.length=0,r.mode=Ii;case Ii:if(4096&r.flags){if(0===s)break e;d=0;do{k=n[o+d++],r.head&&k&&r.length<65536&&(r.head.comment+=String.fromCharCode(k))}while(k&&d<s);if(512&r.flags&&(r.check=$r(r.check,n,d,o)),s-=d,o+=d,k)break e}else r.head&&(r.head.comment=null);r.mode=Pi;case Pi:if(512&r.flags){for(;f<16;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}if(l!==(65535&r.check)){e.msg="header crc mismatch",r.mode=no;break}l=0,f=0}r.head&&(r.head.hcrc=r.flags>>9&1,r.head.done=!0),e.adler=r.check=0,r.mode=Hi;break;case Oi:for(;f<32;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}e.adler=r.check=ho(l),l=0,f=0,r.mode=Ui;case Ui:if(0===r.havedict)return e.next_out=a,e.avail_out=h,e.next_in=o,e.avail_in=s,r.hold=l,r.bits=f,ki;e.adler=r.check=1,r.mode=Hi;case Hi:if(t===wi||t===bi)break e;case Fi:if(r.last){l>>>=7&f,f-=7&f,r.mode=eo;break}for(;f<3;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}switch(r.last=1&l,f-=1,3&(l>>>=1)){case 0:r.mode=Ni;break;case 1:if(go(r),r.mode=Xi,t===bi){l>>>=2,f-=2;break e}break;case 2:r.mode=Wi;break;case 3:e.msg="invalid block type",r.mode=no}l>>>=2,f-=2;break;case Ni:for(l>>>=7&f,f-=7&f;f<32;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}if((65535&l)!=(l>>>16^65535)){e.msg="invalid stored block lengths",r.mode=no;break}if(r.length=65535&l,l=0,f=0,r.mode=Zi,t===bi)break e;case Zi:r.mode=ji;case ji:if(d=r.length){if(d>s&&(d=s),d>h&&(d=h),0===d)break e;jt(i,n,o,d,a),s-=d,o+=d,h-=d,a+=d,r.length-=d;break}r.mode=Hi;break;case Wi:for(;f<14;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}if(r.nlen=257+(31&l),l>>>=5,f-=5,r.ndist=1+(31&l),l>>>=5,f-=5,r.ncode=4+(15&l),l>>>=4,f-=4,r.nlen>286||r.ndist>30){e.msg="too many length or distance symbols",r.mode=no;break}r.have=0,r.mode=Yi;case Yi:for(;r.have<r.ncode;){for(;f<3;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}r.lens[B[r.have++]]=7&l,l>>>=3,f-=3}for(;r.have<19;)r.lens[B[r.have++]]=0;if(r.lencode=r.lendyn,r.lenbits=7,S={bits:r.lenbits},E=di(pi,r.lens,0,19,r.lencode,0,r.work,S),r.lenbits=S.bits,E){e.msg="invalid code lengths set",r.mode=no;break}r.have=0,r.mode=Ki;case Ki:for(;r.have<r.nlen+r.ndist;){for(;v=(R=r.lencode[l&(1<<r.lenbits)-1])>>>16&255,w=65535&R,!((g=R>>>24)<=f);){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}if(w<16)l>>>=g,f-=g,r.lens[r.have++]=w;else{if(16===w){for(x=g+2;f<x;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}if(l>>>=g,f-=g,0===r.have){e.msg="invalid bit length repeat",r.mode=no;break}k=r.lens[r.have-1],d=3+(3&l),l>>>=2,f-=2}else if(17===w){for(x=g+3;f<x;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}f-=g,k=0,d=3+(7&(l>>>=g)),l>>>=3,f-=3}else{for(x=g+7;f<x;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}f-=g,k=0,d=11+(127&(l>>>=g)),l>>>=7,f-=7}if(r.have+d>r.nlen+r.ndist){e.msg="invalid bit length repeat",r.mode=no;break}for(;d--;)r.lens[r.have++]=k}}if(r.mode===no)break;if(0===r.lens[256]){e.msg="invalid code -- missing end-of-block",r.mode=no;break}if(r.lenbits=9,S={bits:r.lenbits},E=di(_i,r.lens,0,r.nlen,r.lencode,0,r.work,S),r.lenbits=S.bits,E){e.msg="invalid literal/lengths set",r.mode=no;break}if(r.distbits=6,r.distcode=r.distdyn,S={bits:r.distbits},E=di(gi,r.lens,r.nlen,r.ndist,r.distcode,0,r.work,S),r.distbits=S.bits,E){e.msg="invalid distances set",r.mode=no;break}if(r.mode=Xi,t===bi)break e;case Xi:r.mode=qi;case qi:if(s>=6&&h>=258){e.next_out=a,e.avail_out=h,e.next_in=o,e.avail_in=s,r.hold=l,r.bits=f,ri(e,u),a=e.next_out,i=e.output,h=e.avail_out,o=e.next_in,n=e.input,s=e.avail_in,l=r.hold,f=r.bits,r.mode===Hi&&(r.back=-1);break}for(r.back=0;v=(R=r.lencode[l&(1<<r.lenbits)-1])>>>16&255,w=65535&R,!((g=R>>>24)<=f);){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}if(v&&0==(240&v)){for(b=g,y=v,m=w;v=(R=r.lencode[m+((l&(1<<b+y)-1)>>b)])>>>16&255,w=65535&R,!(b+(g=R>>>24)<=f);){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}l>>>=b,f-=b,r.back+=b}if(l>>>=g,f-=g,r.back+=g,r.length=w,0===v){r.mode=Qi;break}if(32&v){r.back=-1,r.mode=Hi;break}if(64&v){e.msg="invalid literal/length code",r.mode=no;break}r.extra=15&v,r.mode=Vi;case Vi:if(r.extra){for(x=r.extra;f<x;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}r.length+=l&(1<<r.extra)-1,l>>>=r.extra,f-=r.extra,r.back+=r.extra}r.was=r.length,r.mode=Gi;case Gi:for(;v=(R=r.distcode[l&(1<<r.distbits)-1])>>>16&255,w=65535&R,!((g=R>>>24)<=f);){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}if(0==(240&v)){for(b=g,y=v,m=w;v=(R=r.distcode[m+((l&(1<<b+y)-1)>>b)])>>>16&255,w=65535&R,!(b+(g=R>>>24)<=f);){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}l>>>=b,f-=b,r.back+=b}if(l>>>=g,f-=g,r.back+=g,64&v){e.msg="invalid distance code",r.mode=no;break}r.offset=w,r.extra=15&v,r.mode=$i;case $i:if(r.extra){for(x=r.extra;f<x;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}r.offset+=l&(1<<r.extra)-1,l>>>=r.extra,f-=r.extra,r.back+=r.extra}if(r.offset>r.dmax){e.msg="invalid distance too far back",r.mode=no;break}r.mode=Ji;case Ji:if(0===h)break e;if(d=u-h,r.offset>d){if((d=r.offset-d)>r.whave&&r.sane){e.msg="invalid distance too far back",r.mode=no;break}d>r.wnext?(d-=r.wnext,p=r.wsize-d):p=r.wnext-d,d>r.length&&(d=r.length),_=r.window}else _=i,p=a-r.offset,d=r.length;d>h&&(d=h),h-=d,r.length-=d;do{i[a++]=_[p++]}while(--d);0===r.length&&(r.mode=qi);break;case Qi:if(0===h)break e;i[a++]=r.length,h--,r.mode=qi;break;case eo:if(r.wrap){for(;f<32;){if(0===s)break e;s--,l|=n[o++]<<f,f+=8}if(u-=h,e.total_out+=u,r.total+=u,u&&(e.adler=r.check=r.flags?$r(r.check,i,u,a-u):Vr(r.check,i,u,a-u)),u=h,(r.flags?l:ho(l))!==r.check){e.msg="incorrect data check",r.mode=no;break}l=0,f=0}r.mode=to;case to:if(r.wrap&&r.flags){for(;f<32;){if(0===s)break e;s--,l+=n[o++]<<f,f+=8}if(l!==(4294967295&r.total)){e.msg="incorrect length check",r.mode=no;break}l=0,f=0}r.mode=ro;case ro:E=mi;break e;case no:E=Si;break e;case io:return xi;case oo:default:return Ei}return e.next_out=a,e.avail_out=h,e.next_in=o,e.avail_in=s,r.hold=l,r.bits=f,(r.wsize||u!==e.avail_out&&r.mode<no&&(r.mode<eo||t!==vi))&&function(e,t,r,n){var i,o=e.state;null===o.window&&(o.wsize=1<<o.wbits,o.wnext=0,o.whave=0,o.window=new Wt(o.wsize)),n>=o.wsize?(jt(o.window,t,r-o.wsize,o.wsize,0),o.wnext=0,o.whave=o.wsize):((i=o.wsize-o.wnext)>n&&(i=n),jt(o.window,t,r-n,i,o.wnext),(n-=i)?(jt(o.window,t,r-n,n,0),o.wnext=n,o.whave=o.wsize):(o.wnext+=i,o.wnext===o.wsize&&(o.wnext=0),o.whave<o.wsize&&(o.whave+=i)))}(e,e.output,e.next_out,u-e.avail_out),c-=e.avail_in,u-=e.avail_out,e.total_in+=c,e.total_out+=u,r.total+=u,r.wrap&&u&&(e.adler=r.check=r.flags?$r(r.check,i,u,e.next_out-u):Vr(r.check,i,u,e.next_out-u)),e.data_type=r.bits+(r.last?64:0)+(r.mode===Hi?128:0)+(r.mode===Xi||r.mode===Zi?256:0),(0===c&&0===u||t===vi)&&E===yi&&(E=Ri),E}var wo,bo=1,yo=7;function mo(e){if(e<bo||e>yo)throw new TypeError("Bad argument");this.mode=e,this.init_done=!1,this.write_in_progress=!1,this.pending_close=!1,this.windowBits=0,this.level=0,this.memLevel=0,this.strategy=0,this.dictionary=null}function ko(e,t){for(var r=0;r<e.length;r++)this[t+r]=e[r]}mo.prototype.init=function(e,t,r,n,i){var o;switch(this.windowBits=e,this.level=t,this.memLevel=r,this.strategy=n,3!==this.mode&&4!==this.mode||(this.windowBits+=16),this.mode===yo&&(this.windowBits+=32),5!==this.mode&&6!==this.mode||(this.windowBits=-this.windowBits),this.strm=new Zt,this.mode){case bo:case 3:case 5:o=function(e,t,r,n,i,o){if(!e)return sn;var a=1;if(t===fn&&(t=6),n<0?(a=0,n=-n):n>15&&(a=2,n-=16),i<1||i>vn||r!==gn||n<8||n>15||t<0||t>9||o<0||o>pn)return Hn(e,sn);8===n&&(n=9);var s=new $n;return e.state=s,s.strm=e,s.wrap=a,s.gzhead=null,s.w_bits=n,s.w_size=1<<s.w_bits,s.w_mask=s.w_size-1,s.hash_bits=i+7,s.hash_size=1<<s.hash_bits,s.hash_mask=s.hash_size-1,s.hash_shift=~~((s.hash_bits+En-1)/En),s.window=new Wt(2*s.w_size),s.head=new Yt(s.hash_size),s.prev=new Yt(s.w_size),s.lit_bufsize=1<<i+6,s.pending_buf_size=4*s.lit_bufsize,s.pending_buf=new Wt(s.pending_buf_size),s.d_buf=1*s.lit_bufsize,s.l_buf=3*s.lit_bufsize,s.level=t,s.strategy=o,s.method=r,Jn(e)}(this.strm,this.level,8,this.windowBits,this.memLevel,this.strategy);break;case 2:case 4:case 6:case yo:o=co(this.strm,this.windowBits);break;default:throw new Error("Unknown mode "+this.mode)}0===o?(this.write_in_progress=!1,this.init_done=!0):this._error(o)},mo.prototype.params=function(){throw new Error("deflateParams Not supported")},mo.prototype._writeCheck=function(){if(!this.init_done)throw new Error("write before init");if(0===this.mode)throw new Error("already finalized");if(this.write_in_progress)throw new Error("write already in progress");if(this.pending_close)throw new Error("close is pending")},mo.prototype.write=function(e,t,r,n,i,o,a){this._writeCheck(),this.write_in_progress=!0;var s=this;return de(function(){s.write_in_progress=!1;var h=s._write(e,t,r,n,i,o,a);s.callback(h[0],h[1]),s.pending_close&&s.close()}),this},mo.prototype.writeSync=function(e,t,r,n,i,o,a){return this._writeCheck(),this._write(e,t,r,n,i,o,a)},mo.prototype._write=function(e,t,r,n,i,o,a){if(this.write_in_progress=!0,0!==e&&1!==e&&2!==e&&3!==e&&4!==e&&5!==e)throw new Error("Invalid flush value");null==t&&(t=new p(0),n=0,r=0),i._set?i.set=i._set:i.set=ko;var s,h=this.strm;switch(h.avail_in=n,h.input=t,h.next_in=r,h.avail_out=a,h.output=i,h.next_out=o,this.mode){case bo:case 3:case 5:s=Qn(h,e);break;case yo:case 2:case 4:case 6:s=vo(h,e);break;default:throw new Error("Unknown mode "+this.mode)}return 1!==s&&0!==s&&this._error(s),this.write_in_progress=!1,[h.avail_in,h.avail_out]},mo.prototype.close=function(){this.write_in_progress?this.pending_close=!0:(this.pending_close=!1,this.mode===bo||3===this.mode||5===this.mode?function(e){var t;e&&e.state&&((t=e.state.status)!==An&&t!==Bn&&t!==zn&&t!==Ln&&t!==Tn&&t!==Mn&&t!==Cn?Hn(e,sn):(e.state=null,t===Mn&&Hn(e,hn)))}(this.strm):function(e){if(!e||!e.state)return Ei;var t=e.state;t.window&&(t.window=null),e.state=null}(this.strm),this.mode=0)},mo.prototype.reset=function(){switch(this.mode){case bo:case 5:wo=Jn(this.strm);break;case 2:case 6:wo=fo(this.strm)}0!==wo&&this._error(wo)},mo.prototype._error=function(e){this.onerror(Nt[e]+": "+this.strm.msg,e),this.write_in_progress=!1,this.pending_close&&this.close()};var Eo=Object.freeze({NONE:0,DEFLATE:bo,INFLATE:2,GZIP:3,GUNZIP:4,DEFLATERAW:5,INFLATERAW:6,UNZIP:yo,Z_NO_FLUSH:0,Z_PARTIAL_FLUSH:1,Z_SYNC_FLUSH:2,Z_FULL_FLUSH:3,Z_FINISH:4,Z_BLOCK:5,Z_TREES:6,Z_OK:0,Z_STREAM_END:1,Z_NEED_DICT:2,Z_ERRNO:-1,Z_STREAM_ERROR:-2,Z_DATA_ERROR:-3,Z_BUF_ERROR:-5,Z_NO_COMPRESSION:0,Z_BEST_SPEED:1,Z_BEST_COMPRESSION:9,Z_DEFAULT_COMPRESSION:-1,Z_FILTERED:1,Z_HUFFMAN_ONLY:2,Z_RLE:3,Z_FIXED:4,Z_DEFAULT_STRATEGY:0,Z_BINARY:0,Z_TEXT:1,Z_UNKNOWN:2,Z_DEFLATED:8,Zlib:mo});var So={};Object.keys(Eo).forEach(function(e){So[e]=Eo[e]}),So.Z_MIN_WINDOWBITS=8,So.Z_MAX_WINDOWBITS=15,So.Z_DEFAULT_WINDOWBITS=15,So.Z_MIN_CHUNK=64,So.Z_MAX_CHUNK=1/0,So.Z_DEFAULT_CHUNK=16384,So.Z_MIN_MEMLEVEL=1,So.Z_MAX_MEMLEVEL=9,So.Z_DEFAULT_MEMLEVEL=8,So.Z_MIN_LEVEL=-1,So.Z_MAX_LEVEL=9,So.Z_DEFAULT_LEVEL=So.Z_DEFAULT_COMPRESSION;var xo={Z_OK:So.Z_OK,Z_STREAM_END:So.Z_STREAM_END,Z_NEED_DICT:So.Z_NEED_DICT,Z_ERRNO:So.Z_ERRNO,Z_STREAM_ERROR:So.Z_STREAM_ERROR,Z_DATA_ERROR:So.Z_DATA_ERROR,Z_MEM_ERROR:So.Z_MEM_ERROR,Z_BUF_ERROR:So.Z_BUF_ERROR,Z_VERSION_ERROR:So.Z_VERSION_ERROR};function Ro(e,t,r){var n=[],i=0;function o(){for(var t;null!==(t=e.read());)n.push(t),i+=t.length;e.once("readable",o)}function a(){var t=p.concat(n,i);n=[],r(null,t),e.close()}e.on("error",function(t){e.removeListener("end",a),e.removeListener("readable",o),r(t)}),e.on("end",a),e.end(t),o()}function Ao(e,t){if("string"==typeof t&&(t=new p(t)),!$(t))throw new TypeError("Not a string or buffer");var r=So.Z_FINISH;return e._processChunk(t,r)}function Bo(e){if(!(this instanceof Bo))return new Bo(e);Io.call(this,e,So.DEFLATE)}function zo(e){if(!(this instanceof zo))return new zo(e);Io.call(this,e,So.INFLATE)}function Lo(e){if(!(this instanceof Lo))return new Lo(e);Io.call(this,e,So.GZIP)}function To(e){if(!(this instanceof To))return new To(e);Io.call(this,e,So.GUNZIP)}function Mo(e){if(!(this instanceof Mo))return new Mo(e);Io.call(this,e,So.DEFLATERAW)}function Co(e){if(!(this instanceof Co))return new Co(e);Io.call(this,e,So.INFLATERAW)}function Do(e){if(!(this instanceof Do))return new Do(e);Io.call(this,e,So.UNZIP)}function Io(e,t){if(this._opts=e=e||{},this._chunkSize=e.chunkSize||So.Z_DEFAULT_CHUNK,Ot.call(this,e),e.flush&&e.flush!==So.Z_NO_FLUSH&&e.flush!==So.Z_PARTIAL_FLUSH&&e.flush!==So.Z_SYNC_FLUSH&&e.flush!==So.Z_FULL_FLUSH&&e.flush!==So.Z_FINISH&&e.flush!==So.Z_BLOCK)throw new Error("Invalid flush flag: "+e.flush);if(this._flushFlag=e.flush||So.Z_NO_FLUSH,e.chunkSize&&(e.chunkSize<So.Z_MIN_CHUNK||e.chunkSize>So.Z_MAX_CHUNK))throw new Error("Invalid chunk size: "+e.chunkSize);if(e.windowBits&&(e.windowBits<So.Z_MIN_WINDOWBITS||e.windowBits>So.Z_MAX_WINDOWBITS))throw new Error("Invalid windowBits: "+e.windowBits);if(e.level&&(e.level<So.Z_MIN_LEVEL||e.level>So.Z_MAX_LEVEL))throw new Error("Invalid compression level: "+e.level);if(e.memLevel&&(e.memLevel<So.Z_MIN_MEMLEVEL||e.memLevel>So.Z_MAX_MEMLEVEL))throw new Error("Invalid memLevel: "+e.memLevel);if(e.strategy&&e.strategy!=So.Z_FILTERED&&e.strategy!=So.Z_HUFFMAN_ONLY&&e.strategy!=So.Z_RLE&&e.strategy!=So.Z_FIXED&&e.strategy!=So.Z_DEFAULT_STRATEGY)throw new Error("Invalid strategy: "+e.strategy);if(e.dictionary&&!$(e.dictionary))throw new Error("Invalid dictionary: it should be a Buffer instance");this._binding=new So.Zlib(t);var r=this;this._hadError=!1,this._binding.onerror=function(e,t){r._binding=null,r._hadError=!0;var n=new Error(e);n.errno=t,n.code=So.codes[t],r.emit("error",n)};var n=So.Z_DEFAULT_COMPRESSION;"number"==typeof e.level&&(n=e.level);var i=So.Z_DEFAULT_STRATEGY;"number"==typeof e.strategy&&(i=e.strategy),this._binding.init(e.windowBits||So.Z_DEFAULT_WINDOWBITS,n,e.memLevel||So.Z_DEFAULT_MEMLEVEL,i,e.dictionary),this._buffer=new p(this._chunkSize),this._offset=0,this._closed=!1,this._level=n,this._strategy=i,this.once("end",this.close)}Object.keys(xo).forEach(function(e){xo[xo[e]]=e}),Be(Io,Ot),Io.prototype.params=function(e,t,r){if(e<So.Z_MIN_LEVEL||e>So.Z_MAX_LEVEL)throw new RangeError("Invalid compression level: "+e);if(t!=So.Z_FILTERED&&t!=So.Z_HUFFMAN_ONLY&&t!=So.Z_RLE&&t!=So.Z_FIXED&&t!=So.Z_DEFAULT_STRATEGY)throw new TypeError("Invalid strategy: "+t);if(this._level!==e||this._strategy!==t){var n=this;this.flush(So.Z_SYNC_FLUSH,function(){n._binding.params(e,t),n._hadError||(n._level=e,n._strategy=t,r&&r())})}else de(r)},Io.prototype.reset=function(){return this._binding.reset()},Io.prototype._flush=function(e){this._transform(new p(0),"",e)},Io.prototype.flush=function(e,t){var r=this._writableState;if(("function"==typeof e||void 0===e&&!t)&&(t=e,e=So.Z_FULL_FLUSH),r.ended)t&&de(t);else if(r.ending)t&&this.once("end",t);else if(r.needDrain){var n=this;this.once("drain",function(){n.flush(t)})}else this._flushFlag=e,this.write(new p(0),"",t)},Io.prototype.close=function(e){if(e&&de(e),!this._closed){this._closed=!0,this._binding.close();var t=this;de(function(){t.emit("close")})}},Io.prototype._transform=function(e,t,r){var n,i=this._writableState,o=(i.ending||i.ended)&&(!e||i.length===e.length);if(null===!e&&!$(e))return r(new Error("invalid input"));o?n=So.Z_FINISH:(n=this._flushFlag,e.length>=i.length&&(this._flushFlag=this._opts.flush||So.Z_NO_FLUSH)),this._processChunk(e,n,r)},Io.prototype._processChunk=function(e,t,r){var n=e&&e.length,i=this._chunkSize-this._offset,o=0,a=this,s="function"==typeof r;if(!s){var h,l=[],f=0;this.on("error",function(e){h=e});do{var c=this._binding.writeSync(t,e,o,n,this._buffer,this._offset,i)}while(!this._hadError&&_(c[0],c[1]));if(this._hadError)throw h;var u=p.concat(l,f);return this.close(),u}var d=this._binding.write(t,e,o,n,this._buffer,this._offset,i);function _(h,c){if(!a._hadError){var u=i-c;if(function(e,t){if(!e)throw new Error(t)}(u>=0,"have should not go down"),u>0){var d=a._buffer.slice(a._offset,a._offset+u);a._offset+=u,s?a.push(d):(l.push(d),f+=d.length)}if((0===c||a._offset>=a._chunkSize)&&(i=a._chunkSize,a._offset=0,a._buffer=new p(a._chunkSize)),0===c){if(o+=n-h,n=h,!s)return!0;var g=a._binding.write(t,e,o,n,a._buffer,a._offset,a._chunkSize);return g.callback=_,void(g.buffer=e)}if(!s)return!1;r()}}d.buffer=e,d.callback=_},Be(Bo,Io),Be(zo,Io),Be(Lo,Io),Be(To,Io),Be(Mo,Io),Be(Co,Io),Be(Do,Io);var Po={codes:xo,createDeflate:function(e){return new Bo(e)},createInflate:function(e){return new zo(e)},createDeflateRaw:function(e){return new Mo(e)},createInflateRaw:function(e){return new Co(e)},createGzip:function(e){return new Lo(e)},createGunzip:function(e){return new To(e)},createUnzip:function(e){return new Do(e)},deflate:function(e,t,r){return"function"==typeof t&&(r=t,t={}),Ro(new Bo(t),e,r)},deflateSync:function(e,t){return Ao(new Bo(t),e)},gzip:function(e,t,r){return"function"==typeof t&&(r=t,t={}),Ro(new Lo(t),e,r)},gzipSync:function(e,t){return Ao(new Lo(t),e)},deflateRaw:function(e,t,r){return"function"==typeof t&&(r=t,t={}),Ro(new Mo(t),e,r)},deflateRawSync:function(e,t){return Ao(new Mo(t),e)},unzip:function(e,t,r){return"function"==typeof t&&(r=t,t={}),Ro(new Do(t),e,r)},unzipSync:function(e,t){return Ao(new Do(t),e)},inflate:function(e,t,r){return"function"==typeof t&&(r=t,t={}),Ro(new zo(t),e,r)},inflateSync:function(e,t){return Ao(new zo(t),e)},gunzip:function(e,t,r){return"function"==typeof t&&(r=t,t={}),Ro(new To(t),e,r)},gunzipSync:function(e,t){return Ao(new To(t),e)},inflateRaw:function(e,t,r){return"function"==typeof t&&(r=t,t={}),Ro(new Co(t),e,r)},inflateRawSync:function(e,t){return Ao(new Co(t),e)},Deflate:Bo,Inflate:zo,Gzip:Lo,Gunzip:To,DeflateRaw:Mo,InflateRaw:Co,Unzip:Do,Zlib:Io};export default class{constructor(e,t,r){this.SDKAPPID=e,this.EXPIRETIME=r,this.PRIVATEKEY=t}genTestUserSig(e){return this._isNumber(this.SDKAPPID)?this._isString(this.PRIVATEKEY)?this._isString(e)?this._isNumber(this.EXPIRETIME)?(console.log("sdkAppID="+this.SDKAPPID+" key="+this.PRIVATEKEY+" userID="+e+" expire="+this.EXPIRETIME),this.genSigWithUserbuf(e,this.EXPIRETIME,null)):(console.error("expireTime must be a number"),""):(console.error("userID must be a string"),""):(console.error("privateKey must be a string"),""):(console.error("sdkAppID must be a number"),"")}newBuffer(e,t){return p.from?p.from(e,t):new p(e,t)}unescape(e){return e.replace(/_/g,"=").replace(/\-/g,"/").replace(/\*/g,"+")}escape(e){return e.replace(/\+/g,"*").replace(/\//g,"-").replace(/=/g,"_")}encode(e){return this.escape(this.newBuffer(e).toString("base64"))}decode(e){return this.newBuffer(this.unescape(e),"base64")}base64encode(e){return this.newBuffer(e).toString("base64")}base64decode(e){return this.newBuffer(e,"base64").toString()}_hmacsha256(e,t,r,n){let i="TLS.identifier:"+e+"\n";i+="TLS.sdkappid:"+this.SDKAPPID+"\n",i+="TLS.time:"+t+"\n",i+="TLS.expire:"+r+"\n",null!=n&&(i+="TLS.userbuf:"+n+"\n");let o=te.HmacSHA256(i,this.PRIVATEKEY);return te.enc.Base64.stringify(o)}_utc(){return Math.round(Date.now()/1e3)}_isNumber(e){return null!==e&&("number"==typeof e&&!isNaN(e-0)||"object"==typeof e&&e.constructor===Number)}_isString(e){return"string"==typeof e}genSigWithUserbuf(e,t,r){let n=this._utc(),i={"TLS.ver":"2.0","TLS.identifier":e,"TLS.sdkappid":this.SDKAPPID,"TLS.time":n,"TLS.expire":t},o="";if(null!=r){let a=this.base64encode(r);i["TLS.userbuf"]=a,o=this._hmacsha256(e,n,t,a)}else o=this._hmacsha256(e,n,t,null);i["TLS.sig"]=o;let a=JSON.stringify(i),s=Po.deflateSync(this.newBuffer(a)).toString("base64"),h=this.escape(s);return console.log("ret="+h),h}validate(e){let t=this.decode(e),r=Po.inflateSync(t);console.log("validate ret="+r)}}
diff --git a/txim/src/TUIKit/index.ts b/txim/src/TUIKit/index.ts
new file mode 100644
index 00000000..f266ebf1
--- /dev/null
+++ b/txim/src/TUIKit/index.ts
@@ -0,0 +1,27 @@
+import { genTestUserSig } from './debug';
+import Server from './server';
+import TUIComponents, {
+  TUIChat,
+  TUIConversation,
+  TUIContact,
+  TUISearch,
+  TUIGroup,
+} from './components';
+import TUIKit from './index.vue';
+import { hideTUIChatFeatures } from './components/TUIChat/config';
+
+const TUIChatKit = new Server();
+TUIChatKit.init();
+
+export {
+  TUIKit,
+  TUIChatKit,
+  TUIComponents,
+  TUIChat,
+  TUIConversation,
+  TUIContact,
+  TUISearch,
+  TUIGroup,
+  hideTUIChatFeatures,
+  genTestUserSig,
+};
diff --git a/txim/src/TUIKit/index.vue b/txim/src/TUIKit/index.vue
new file mode 100644
index 00000000..a74634a9
--- /dev/null
+++ b/txim/src/TUIKit/index.vue
@@ -0,0 +1,194 @@
+<template>
+  <div :key="currentLanguage">
+    <slot>
+      <div :class="['TUIKit', isH5 && 'TUIKit-h5']">
+        <div
+          v-if="!(isH5 && currentConversationID)"
+          class="TUIKit-navbar"
+        >
+        <!-- 左侧 消息 ，通讯录 -->
+          <div
+            v-for="item of navbarList"
+            :key="item.id"
+            :class="['TUIKit-navbar-item', currentNavbar === item.id && 'TUIKit-navbar-item-active']"
+            @click="currentNavbar = item.id"
+          >
+            {{ TUITranslateService.t(item.label) }}
+          </div>
+        </div>
+        <div class="TUIKit-main-container">
+          <div
+            v-if="currentNavbar === 'message'"
+            class="TUIKit-main"
+          >
+            <div
+              v-if="!(isH5 && currentConversationID)"
+              class="TUIKit-main-aside"
+            >
+              <TUISearch searchType="global" />
+              <TUIConversation />
+            </div>
+            <div
+              v-if="!isH5 || currentConversationID"
+              class="TUIKit-main-main"
+            >
+              <TUIChat>
+                <h1>{{ TUITranslateService.t('欢迎使用腾讯云即时通信IM') }}</h1>
+              </TUIChat>
+              <TUIGroup :class="isH5 ? 'chat-popup' : 'chat-aside'" />
+              <TUISearch
+                :class="isH5 ? 'chat-popup' : 'chat-aside'"
+                searchType="conversation"
+              />
+            </div>
+            <TUIGroup
+              v-if="isH5 && !currentConversationID"
+              class="chat-popup"
+            />
+            <TUIContact displayType="selectFriend" />
+          </div>
+          <div
+            v-else-if="currentNavbar === 'contact'"
+            class="TUIKit-main"
+          >
+            <TUIContact
+              displayType="contactList"
+              @switchConversation="currentNavbar = 'message'"
+            />
+          </div>
+        </div>
+      </div>
+    </slot>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, framework } from './adapter-vue';
+import { TUILogin } from '@tencentcloud/tui-core';
+import { TUIStore, StoreName, TUIConversationService, TUITranslateService, TUIReportService } from '@tencentcloud/chat-uikit-engine';
+import { TUISearch, TUIConversation, TUIChat, TUIContact, TUIGroup } from './components';
+import { isH5 } from './utils/env';
+
+const currentConversationID = ref<string>('');
+const currentNavbar = ref<string>('message');
+const currentLanguage = ref<string>('zh');
+const navbarList = [
+  {
+    id: 'message',
+    label: '消息',
+  },
+  {
+    id: 'contact',
+    label: '通讯录',
+  },
+];
+
+const props = defineProps({
+  // When deploying a production environment, you do not need to pass in SDKAppID, userID, and userSig through props.
+  // eslint-disable-next-line vue/prop-name-casing
+  SDKAppID: {
+    type: Number,
+    default: 0,
+    required: false,
+  },
+  userID: {
+    type: String,
+    default: '',
+    required: false,
+  },
+  userSig: {
+    type: String,
+    default: '',
+    required: false,
+  },
+  conversationID: {
+    type: String,
+    default: '',
+    required: false, // When integrating Chat independently, you need to pass the conversationID
+  },
+});
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversationID: (id: string) => {
+      currentConversationID.value = id;
+    },
+  });
+
+  // Default login logic
+  login();
+
+  // init language by SDKAppID
+  initLanguage();
+
+  // Modify CallKit style in H5 environment
+  modifyCallKitStyle();
+});
+
+function login() {
+  const { SDKAppID, userID, userSig, conversationID } = props;
+  console.log(props)
+  if (SDKAppID && userID && userSig) {
+    TUILogin.login({
+      SDKAppID,
+      userID,
+      userSig,
+      useUploadPlugin: true,
+      framework,
+    }).then(() => {
+      // Execute the following code when integrating Chat independently
+      if (conversationID.startsWith('C2C') || conversationID.startsWith('GROUP')) {
+        TUIConversationService.switchConversation(conversationID);
+      }
+      // report language
+      TUIReportService.reportFeature(201, currentLanguage.value);
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    }).catch((error) => { });
+  }
+}
+
+function isIntlSDKAppID(SDKAppID: number) {
+  if ((SDKAppID === 0)
+    || (SDKAppID >= 20000000 && SDKAppID < 90000000)
+    || (SDKAppID >= 1720000000 && SDKAppID < 1790000000)) {
+    return true;
+  }
+  return false;
+}
+
+function initLanguage() {
+  currentLanguage.value = isIntlSDKAppID(props.SDKAppID) ? 'en' : 'zh';
+  TUITranslateService.changeLanguage(currentLanguage.value);
+}
+
+function modifyCallKitStyle() {
+  if (isH5) {
+    const bodyStyle = document.getElementsByTagName('body')[0].style;
+    bodyStyle.setProperty('--callLeft', '0');
+    bodyStyle.setProperty('--callTop', '0');
+    bodyStyle.setProperty('--callWidth', '100%');
+    bodyStyle.setProperty('--callHeight', '100%');
+  }
+}
+</script>
+<style scoped lang="scss">
+  @import "./assets/styles/common";
+  @import "./assets/styles/sample";
+</style>
+<style lang="scss">
+  /* stylelint-disable-next-line */
+  $left: var(--callLeft, calc(50% - 25rem));
+  /* stylelint-disable-next-line */
+  $top: var(--callTop, calc(50% - 18rem));
+  /* stylelint-disable-next-line */
+  $width: var(--callWidth, 50rem);
+  /* stylelint-disable-next-line */
+  $height: var(--callHeight, 36rem);
+
+  .callkit-container {
+    position: fixed !important;
+    left: $left !important;
+    top: $top !important;
+    width: $width !important;
+    height: $height !important;
+  }
+</style>
diff --git a/txim/src/TUIKit/interface.ts b/txim/src/TUIKit/interface.ts
new file mode 100644
index 00000000..2e1483f5
--- /dev/null
+++ b/txim/src/TUIKit/interface.ts
@@ -0,0 +1,326 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IConversationModel, IGroupModel, IMessageModel, Friend, FriendApplication } from '@tencentcloud/chat-uikit-engine';
+
+export interface ITUIComponents {
+  TUIChat?: any;
+  TUIConversation?: any;
+  TUIContact?: any;
+  TUISearch?: any;
+  TUIGroup?: any;
+  TUIProfile?: any;
+  TUICallKit?: any;
+  TUICallKitMini?: any;
+  [propName: string]: any;
+}
+
+export interface ITUIPlugins {
+  TUICallKit?: any;
+  TUINotification?: any;
+  [propName: string]: any;
+}
+
+export interface IEmojiGroup {
+  type: string;
+  emojiGroupID: number;
+  url: string;
+  list: string[];
+}
+
+export type IEmojiGroupList = IEmojiGroup[];
+
+export interface ISendMessagePayload {
+  text?: string;
+  file?: any;
+  atUserList?: string[];
+}
+
+export interface ISendMessageParams {
+  to?: string;
+  conversationType?: string;
+  payload?: ISendMessagePayload;
+  cloudCustomData?: any;
+}
+
+export interface ITransferListItem {
+  isDisabled?: boolean;
+  avatar?: string;
+  nick?: string;
+  userID?: string;
+  [propName: string]: any;
+}
+
+export interface ICustomMessagePayload {
+  businessID?: string;
+  // Evaluation-related custom message fields
+  score?: number;
+  comment?: string;
+  // Order & Hyperlink Class Custom Message Common Fields
+  link?: string;
+  // Order-related custom message fields
+  imageUrl?: string;
+  title?: string;
+  description?: string;
+  price?: string;
+  // Hyperlink custom message related fields
+  text?: string;
+}
+
+export interface IGroupApplication {
+  applicant: string;
+  applicantNick: string;
+  groupID: string;
+  groupName: string;
+  applicationType: 0 | 2; // 0 - group application, 2 - group invite
+  userID: string;
+  note: string;
+  [propName: string]: any;
+}
+
+export interface IGroupApplicationUserProfile {
+  userID: string;
+  avatar: string;
+  nick: string;
+  actionStatus?: string;
+  [propName: string]: any;
+}
+
+export type IGroupApplicationListItem = IGroupApplication;
+
+export interface IFriendType {
+  userID?: string;
+  remark?: string;
+  groupList?: any[];
+  source?: string;
+  wording?: string;
+  profile?: IFriendProfile;
+  friendCustomFriend?: Array<Record<string, any>>;
+}
+
+export interface IFriendProfile {
+  userID?: string;
+  avatar?: string;
+  nick?: string;
+  [propName: string]: unknown;
+}
+
+export interface IGroupMember {
+  userID?: string;
+  avatar?: string;
+  nick?: string;
+  role?: string;
+  joinTime?: number;
+  nameCard?: string;
+  muteUntil?: string;
+  memberCustomField?: Array<Record<string, any>>;
+}
+
+export interface IGroupSelfInfo {
+  role?: string;
+  messageRemindType?: string;
+  joinTime?: number;
+  nameCard?: string;
+  userID?: string;
+  memberCustomField?: Array<Record<string, any>>;
+}
+
+export interface IUserProfile {
+  userID: string;
+  nick: string;
+  gender: string;
+  birthday: number;
+  location: string;
+  selfSignature: string;
+  allowType: string;
+  language: number;
+  avatar: string;
+  messageSettings: number;
+  adminForbidType: string;
+  level: number;
+  role: number;
+  lastUpdatedTime: number;
+  profileCustomField: Array<Record<string, any>>;
+}
+
+export interface IContactListItem {
+  title: string;
+  list: any[];
+  key: string;
+  unreadCount?: number;
+}
+
+export interface IContactList {
+  friendApplicationList: IContactListItem;
+  blackList: IContactListItem;
+  groupList: IContactListItem;
+  friendList: IContactListItem;
+  [key: string]: IContactListItem;
+}
+
+export interface IContactSearchResult {
+  user: {
+    label: string;
+    list: any[];
+  };
+  group: {
+    label: string;
+    list: any[];
+  };
+}
+
+export interface IBlackListUserItem {
+  userID: string;
+  nick?: string;
+  avatar?: string;
+}
+
+export type IContactInfoType = Friend | FriendApplication | IGroupModel | IBlackListUserItem;
+
+export interface IContactInfoMoreItem {
+  key: string;
+  label: string;
+  data: any;
+  labelPosition?: string; // label position："left"/"top"
+  editable?: boolean; // indicates whether it can be edited
+  editType?: string; // edit type: "input"/"switch"/"textarea"
+  editing?: boolean; // Current editing status: true: "Editing" / false:"Not editing"
+  editSubmitHandler?: () => void; // edit submit callback
+}
+
+export interface IContactInfoButton {
+  key: string;
+  label: string; // button label
+  type: string; // button type: "cancel"/"submit"
+  onClick: () => void; // button click callback
+}
+
+export interface ISearchCloudMessageResult {
+  totalCount: number;
+  searchResultList: ISearchResultListItem[];
+  cursor: string;
+}
+
+export interface ISearchResultListItem {
+  conversation: IConversationModel;
+  messageCount: number;
+  messageList: IMessageModel[];
+  type?: string;
+}
+
+export interface IImageMessageContent {
+  showName?: string;
+  url?: string;
+  width?: number;
+  height?: number;
+}
+
+export interface IVideoMessageContent {
+  showName: string; // video message sender name
+  url: string; // video url
+  snapshotUrl: string; // video snapshot url
+  snapshotWidth: number; // video snapshot width
+  snapshotHeight: number; // video snapshot height
+}
+
+export interface ITextMessageContent {
+  text: string;
+}
+
+export interface IMergeMessageContent {
+  abstractList: string[];
+  compatibleText: string;
+  downloadKey: string;
+  layersOverLimit: boolean;
+  messageList: Array<{
+    avatar: string;
+    ID: string;
+    cloudCustomData: string;
+    from: string;
+    messageBody: Array<{
+      type: string;
+      payload: Record<string, any>;
+    }>;
+    messageReceiver: string;
+    messageRandom: number;
+    messageSender: string;
+    messageSequence: number;
+    messageTime: number;
+    nick: string;
+    receiverUserID: string;
+    time: number;
+  }>;
+  pbDownloadKey: string;
+  showName: string;
+  title: string;
+  version: number;
+}
+
+export interface IFileMessageContent {
+  name: string;
+  url: string;
+  size: number;
+}
+
+export interface IAudioMessageContent {
+  showName: string;
+  url: string;
+  second: number;
+}
+
+export interface ICustomMessageContent {
+  showName: string;
+  custom: string;
+  businessID: string;
+}
+
+export interface IAudioContext {
+  src: string | undefined;
+  startTime: number;
+  duration: number;
+  play: () => void;
+  pause: () => void;
+  stop: () => void;
+  destroy: () => void;
+  onPlay: (callback: (...args: any[]) => void) => void;
+  onPause: (callback: (...args: any[]) => void) => void;
+  onStop: (callback: (...args: any[]) => void) => void;
+  onEnded: (callback: (...args: any[]) => void) => void;
+  onError: (callback: (...args: any[]) => void) => void;
+}
+
+export interface ITipTapEditorContent {
+  type: 'text' | 'image' | 'video' | 'file';
+  payload: {
+    text?: string;
+    file?: File;
+    atUserList?: string[];
+  };
+}
+
+export interface IUserStatus {
+  statusType: number;
+  customStatus: string;
+}
+export interface IUserStatusMap {
+  [userID: string]: IUserStatus;
+}
+
+export interface ITranslateInfo {
+  conversationID: string;
+  messageID: string;
+  visible: boolean;
+}
+
+export interface IConvertInfo {
+  conversationID: string;
+  messageID: string;
+  visible: boolean;
+}
+
+export interface IChatResponese<T> {
+  code: string;
+  data: T;
+}
+
+export type ToolbarDisplayType = 'emojiPicker' | 'tools' | 'none';
+
+export type InputDisplayType = 'editor' | 'audio';
diff --git a/txim/src/TUIKit/locales/en/TUIChat.ts b/txim/src/TUIKit/locales/en/TUIChat.ts
new file mode 100644
index 00000000..8c6a4756
--- /dev/null
+++ b/txim/src/TUIKit/locales/en/TUIChat.ts
@@ -0,0 +1,156 @@
+const TUIChat = {
+  '【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。': '【Security Tips】This APP is only used to experience the functions of Tencent Cloud Instant Messaging products, and cannot be used for business negotiation and expansion. Don\'t trust money-related information such as remittances and lottery wins, don\'t make unfamiliar phone calls easily, and beware of being deceived.',
+  '按Enter发送，Ctrl+Enter换行': 'Press Enter to send a message and Ctrl+Enter to start a new line',
+  '表情': '[Face]',
+  '查看更多': 'View more',
+  '撤回': 'Recall',
+  '撤回了一条消息': ' recalled a message',
+  '打开': 'Open',
+  '单击下载': 'Click download',
+  '点此投诉': 'Complain',
+  '点击处理': 'Click action',
+  '对方正在输入': 'Typing...',
+  '发起群视频': 'Make group video call',
+  '发起群语音': 'Make group voice call',
+  '发起通话': 'Start Call',
+  '发送失败': 'send failed',
+  '复制': 'Copy',
+  '复制成功': 'Copied to clipboard',
+  '该消息不存在': 'The message does not exist',
+  '关闭阅读状态': 'Read status closed',
+  '管理员开启全员禁言': 'The admin enables Mute All',
+  '欢迎使用TUICallKit': 'Welcome to TUICallKit',
+  '回到最新位置': 'Back to the latest location',
+  '回复': 'Reply',
+  '回复详情': 'Replies',
+  '集成TUICallKit': ' Integrate TUICallKit ',
+  '检测到您暂未集成TUICallKit，无法体验音视频通话功能': 'It is detected that you have not integrated TUI CallKit yet, so you cannot experience the audio and video call. ',
+  '结束群聊': 'Edit Group Call',
+  '进行体验': 'to experience.',
+  '经度': 'Longitude',
+  '拒绝': 'Reject',
+  '拒绝通话': 'Decline Call',
+  '开通腾讯实时音视频服务': 'Integration Tencent Real-Time Communication',
+  '聊天记录': '[Chat history]',
+  '描述': 'Description',
+  '内容包含敏感词汇': 'Content contains sensitive words',
+  '您': 'You',
+  '您当前购买使用的套餐包暂未开通此功能': 'The package you purchased does not support this ability.',
+  '您当前购买使用的套餐包暂未开通群消息已读回执功能': 'The package you purchased does not support the read receipt of group messages.',
+  '您当前购买使用的套餐包暂未开通在线用户列表功能': 'The package you purchased does not support the online user list.',
+  '您已被管理员禁言': 'You have been muted by the admin',
+  '您有': 'You have',
+  '请点击': 'Please click',
+  '请输入消息': 'Enter a message',
+  '取消': 'Cancel',
+  '取消通话': 'Cancel Call',
+  '全部已读': 'All read',
+  '确定': 'Submit',
+  '确认重发该消息？': 'Confirm to resend the message?',
+  '人关闭阅读状态': ' read status closed',
+  '人未读': ' unread',
+  '人已读': ' read',
+  '删除': 'Delete',
+  '涉及敏感内容': 'Sensitive content',
+  '申请加入': 'Application for join in',
+  '视频': '[video]',
+  '视频通话': 'Video Call',
+  '条回复': 'replies',
+  '条入群申请': 'Item group application',
+  '条新消息': ' new messages',
+  '通话时长': 'Duration',
+  '同意': 'Agree',
+  '图片': '[Image]',
+  '图片消息失败,无效的图片格式': 'Image message failed, invalid image format.',
+  '纬度': 'Latitude',
+  '未读': 'Unread',
+  '位置': '[Location]',
+  '文件': '[File]',
+  '文件不存在,请检查文件路径是否正确': 'The file does not exist, please check if the file path is correct.',
+  '文件大小超出了限制,如果上传文件,最大限制是100MB': 'The file size exceeds the limit; if uploading a file, the maximum limit is 100MB.',
+  '文件消息失败,禁止发送违规封禁的文件': 'File message failed, sending prohibited and banned files is not allowed.',
+  '我': 'I',
+  '无法查看': 'unable to view',
+  '无法定位到原消息': 'Unable to navigate to the original message',
+  '无法收听': 'unable to listen',
+  '正在加载': 'Loading...',
+  '加载结束': 'Load end',
+  '无应答': 'No Answer',
+  '系统消息': 'System message',
+  '消息': '[message]',
+  '消息或者资料中文本存在敏感内容,发送失败': 'Sensitive content found in the message or information text, sending failed.',
+  '消息详情': 'Message Detail',
+  '消息长度超出限制,消息长度不要超过12K': 'Message length exceeds the limit; please keep the message length under 12K.',
+  '消息中图片存在敏感内容,发送失败': ' Sensitive content is found in the picture in the message, sending failed.',
+  '选择提醒的人': 'Select Contact',
+  '已读': 'Read',
+  '已过撤回时限': 'Withdrawal deadline has passed',
+  '已接听': 'Answered',
+  '已拒绝': 'Rejected',
+  '已同意': 'Approved',
+  '引用': 'Reference',
+  '引用失败': 'quote failed',
+  '语音': '[Voice]',
+  '语音通话': 'Voice Call',
+  '重新编辑': 'Re-edit',
+  '重新发送': 'Resend',
+  '转发': 'Forward',
+  '翻译': 'Translate',
+  '转文字': 'Convert',
+  '隐藏': 'Hidden',
+  '转发给': 'Forward to',
+  '自定义': '[custom message]',
+  '自定义消息': 'Custom message',
+  '腾讯云 IM': 'Tencent Cloud Chat',
+  '空': 'Empty',
+  '文本包含本地审核拦截词': 'Text contains local moderation blocking words',
+  '按住说话': 'Hold to speak',
+  '抬起发送': 'Release to send',
+  '抬起取消': 'Release to cancel',
+  '正在录音': 'Recording',
+  '继续上滑可取消': 'Continue to swipe to cancel',
+  '松开手指 取消发送': 'Release to cancel',
+  '此机型暂不支持复制功能': 'This model does not support the copy',
+  '请开通翻译功能': 'Please open the translation feature',
+  '请开通语音转文字功能': 'Please open the convert feature',
+  '翻译中': 'Translating',
+  '转换中': 'Converting',
+  '由IM提供翻译支持': 'support by IM',
+  '所有人': 'All',
+  '已达到表情回应上限数量': 'You have reached the max reaction limit',
+  '等': 'and others',
+  '人': 'users',
+  '返回': 'Back',
+  '关闭': 'Close',
+  '多选': 'Select',
+  '合并转发': 'Combine Forward',
+  '逐条转发': 'One-By-One Forward',
+  '未选择消息': 'No message selected',
+  '[草稿]': '[Drafts]',
+  '[消息]': '[Message]',
+  '[文本]': '[Text]',
+  '[自定义消息]': '[Custom Message]',
+  '[图片]': '[Image]',
+  '[音频]': '[Voice]',
+  '[语音]': '[Voice]',
+  '[视频]': '[Video]',
+  '[文件]': '[File]',
+  '[位置]': '[Location]',
+  '[地理位置]': '[Location]',
+  '[动画表情]': '[Animated Sticker]',
+  '[群提示]': '[Group Tip]',
+  '[群提示消息]': '[Group Notification]',
+  '[聊天记录]': '[Chat History]',
+  '[机器人自定义消息]': '[Robot Custom Message]',
+  '引用内容已撤回': 'The quoted message has been withdrawn',
+  '群聊的聊天记录': 'Chat history for Group Chat',
+  '和': 'and',
+  '的聊天记录': 'chat history',
+  '请升级IMSDK到v2.10.1或更高版本查看此消息': 'Please upgrade IMSDK to v2.10.1 or higher to view this message',
+  '该群聊已被解散': 'The group has been dismissed',
+  '您已被管理员移出群聊': 'You have been removed from the group by the admin.',
+  '您已退出该群聊': 'You have left the group.',
+  '您已被禁止聊天': 'you have been forbidden to speak',
+};
+
+export default TUIChat;
diff --git a/txim/src/TUIKit/locales/en/TUIContact.ts b/txim/src/TUIKit/locales/en/TUIContact.ts
new file mode 100644
index 00000000..18e62ab3
--- /dev/null
+++ b/txim/src/TUIKit/locales/en/TUIContact.ts
@@ -0,0 +1,66 @@
+const TUIContact = {
+  "群聊通知": "Group Chat Notifications",
+  "系统通知": "System Notifications",
+  "我的群聊": "My Group Chats",
+  "输入ID": "Enter a groupID/userID",
+  "群名称": "Group name",
+  "群ID": "Group ID",
+  "加入群聊": "Join group chat",
+  "解散群聊": "Disband group chat",
+  "退出群聊": "Quit group chat",
+  "进入群聊": "Enter group chat",
+  "群类型": "Group type",
+  "请填写验证信息": "Enter the verification info",
+  "申请加入": "Request to join",
+  "已申请":"Requested",
+  "接受": "Accept",
+  "拒绝": "Refuse",
+  "已处理": "Handled",
+  "添加群聊": "add group chat",
+  "已加入": "joined",
+  "该群组不存在": "The group does not exist",
+  "加群": "join",
+  "我的好友": "Friend",
+  "发送消息": "Send Message",
+  "个性签名": "Signature",
+  "等待管理员同意": "Successful application, waiting for the administrator to agree to join the group application",
+  "加群成功": "Join the group successfully",
+  "您已是群成员": "You are already a group member",
+  "新的联系人": "New Contacts",
+  "黑名单": "Blocked List",
+  "无搜索结果": "No Result",
+  "客服号": "Customer Service List",
+  "ID": "ID",
+  "联系人": "User",
+  "群聊": "Group",
+  "添加好友/群聊": "Add friend/group",
+  "备注名": "remark",
+  "加入黑名单": "block",
+  "删除好友": "Delete friend",
+  "等待验证": "waiting for verification",
+  "验证信息": "verification info",
+  "发送申请": "Send application",
+  "加入直播群": "Join AVChatRoom",
+  "同意": "Agree",
+  "删除好友成功": "Delete friend success",
+  "删除好友失败": "Delete friend failed",
+  "申请已发送": "Application has been sent",
+  "申请发送失败": "Application failed to send",
+  "进入会话失败": "Failed to enter session",
+  "添加好友成功": "Add friend success",
+  "同意好友申请失败": "Failed to agree to friend request",
+  "拒绝成功": "Reject friend request success",
+  "拒绝好友申请失败": "Failed to reject friend request",
+  "解散群聊成功": "Dismissed group success",
+  "解散群聊失败": "Dismissed group failed",
+  "退出群组成功": "Quit group success",
+  "退出群组失败": "Quit group failed",
+  "申请入群失败": "Application to join the group failed",
+  "加入黑名单失败": "Add to blocklist failed",
+  "移除黑名单失败": "Remove from blocklist failed",
+  "修改备注失败: 备注长度不得超过 96 字节": "Failed to modify the remark: the length of the remark cannot exceed 96 bytes",
+  "修改备注成功": "Remark modified success",
+  "修改备注失败": "Remark modified failed",
+}
+
+export default TUIContact;
diff --git a/txim/src/TUIKit/locales/en/TUIConversation.ts b/txim/src/TUIKit/locales/en/TUIConversation.ts
new file mode 100644
index 00000000..943b5353
--- /dev/null
+++ b/txim/src/TUIKit/locales/en/TUIConversation.ts
@@ -0,0 +1,24 @@
+const TUIConversation = {
+  "发起会话": "Start chat",
+  "发起单聊": "New one-to-one chat",
+  "发起群聊": "New group chat",
+  "请输入userID": "Enter a user ID",
+  "删除会话": "Delete",
+  "删除后，将清空该聊天的消息记录": "Once deleted, all chat messages will be cleared.",
+  "删除后，将清空该群聊的消息记录": "Once deleted, group chat history will be cleared.",
+  "系统通知": "System notification",
+  "置顶会话": "Pin",
+  "取消置顶": "Unpin",
+  "消息免打扰": "Mute Notifications",
+  "取消免打扰": "Enable Notifications",
+  "有人@我": "Someone @ me",
+  "@所有人": "@All",
+  "条": "strip",
+  "我": "me",
+  "网络异常，请您检查网络设置": "Network exception, please check the network settings",
+  "您已被群管理员移出群聊": "You have been removed from the group chat by the group administrator",
+  "该群聊已被解散": "The group chat has been disband",
+  "您已退出该群聊": "You have left the group chat",
+}
+
+export default TUIConversation;
diff --git a/txim/src/TUIKit/locales/en/TUIGroup.ts b/txim/src/TUIKit/locales/en/TUIGroup.ts
new file mode 100644
index 00000000..d08a2c9f
--- /dev/null
+++ b/txim/src/TUIKit/locales/en/TUIGroup.ts
@@ -0,0 +1,86 @@
+const TUIGroup = {
+ "输入groupID搜索": "Enter groupId search",
+  "群名称": "Group name",
+  "群ID": "Group ID",
+  "加入群聊": "Join",
+  "解散群聊": "Dissolution",
+  "退出群聊": "Quit",
+  "群类型": "Group type",
+  "请填写验证信息": "Please fill in the verification information",
+  "申请加入": "Apply Join",
+  "群公告": "Group notice",
+  "群成员": "Group member",
+  "群管理": "Manage group",
+  "好友工作群": "Work",
+  "陌生人社交群": "Public",
+  "临时会议群": "Meeting",
+  "直播群": "AVChatRoom",
+  "社群": "Community",
+  "自由加入": "Join freely",
+  "需要验证": "Require approval",
+  "禁止加群": "Disallow group joining",
+  "人": "",
+  "确认": "Confirm",
+  "群头像": "Group profile photo",
+  "加群方式": "Group joining mode",
+  "转让群组": "Transfer ownership",
+  "退出群组": "Quit group",
+  "群管理员": "Group admin",
+  "全员禁言": "Mute All",
+  "全员禁言开启后，只允许群主和管理员发言。": "If Mute All is enabled, only the group owner and admin can speak.",
+  "单独禁言人员": "Mute a member",
+  "删除成员": "Remove member",
+  "确定从群聊中删除该成员？": "Are you sure you want to remove this member from the group chat?",
+  "确定从群聊中删除所选成员？": "Are you sure you want to remove selected member(s) from the group chat?",
+  "暂无公告": "No notice",
+  "发布": "Post",
+  "编辑": "Edit",
+  "查看更多": "View more",
+  "管理员": "Admin",
+  "群主": "Group owner",
+  "我": "me",
+  "添加成员": "Add member",
+  "新增管理员": "Add admin",
+  "移除管理员": "Revoke admin",
+  "新增禁言用户": "Add muted member",
+  "移除禁言用户": "Remove muted member",
+  "修改群聊名称": "Edit group name",
+  "修改群聊名称后，将在群内通知其他成员": "After modifying the group chat name, other members will be notified in the group",
+  "仅限中文、字母、数字和下划线，2-20个字": "Chinese, letters, numbers and underscores only, 2-20 words",
+  "请先注册 TUIGroup 模块": "Please register the TUIGroup module first",
+  "该用户不存在": "The user does not exist",
+  "该用户不在群组内": "The user is not in the group",
+  "添加群聊": "Add a group chat",
+  "该群组不存在": "The group does not exist",
+  "创建群聊，请注册 TUIGroup 模块": "To create a group chat, please register the TUIGroup module",
+  "创建成功": "Creation successful",
+  "发起多人会话（群聊）": "New group chat",
+  "选填": "Optional",
+  "取消": "Cancel",
+  "创建": "Create",
+  "类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见": "Similar to a WeChat group. 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.",
+  "类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见": "Similar to a QQ group. 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. ",
+  "创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见": "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 creation, 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. ",
+  "创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见": "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. ",
+  "产品文档": "product documentation",
+  "设置群名称": "Group name",
+  "请输入群名称": "Enter the group name",
+  "设置群ID": "Group ID",
+  "请输入群ID": "Enter the group ID",
+  "选择群类型": "Group type",
+  "陌生人社交群（Public）": "Stranger social group (Public)",
+  "临时会议群（Meeting）": "Temporary meeting group (Meeting)",
+  "好友工作群（Work）": "Friends work group (Work)",
+  "直播群（AVChatroom）": "Live Streaming Group (AVChatroom)",
+  "社群（Community）": "Community（Community）",
+  "群组创建成功": "Create group success",
+  "群组解散成功": "Dismiss group success",
+  "禁言设置成功": "Mute all success",
+  "取消禁言成功": "Remove mute success",
+  "群名称不能为空": "Group name cannot be empty",
+  "群名称修改成功": "Group name modified success",
+  "群公告字数超出限制，最大长度为150": "The number of characters in the group announcement exceeds the limit, the maximum length is 150",
+};
+
+export default TUIGroup;
diff --git a/txim/src/TUIKit/locales/en/TUISearch.ts b/txim/src/TUIKit/locales/en/TUISearch.ts
new file mode 100644
index 00000000..ee8a93a5
--- /dev/null
+++ b/txim/src/TUIKit/locales/en/TUISearch.ts
@@ -0,0 +1,41 @@
+const TUISearch = {
+  搜索: "Search",
+  全部: "All",
+  联系人: "Contacts",
+  群聊: "Groups",
+  聊天记录: "Chat History",
+  文本: "Text",
+  文件: "File",
+  其他: "Other",
+  "图片/视频": "Image/Video",
+  选择时间: "Select time",
+  今天: "Today",
+  近三天: "Nearly three days",
+  近七天: "Nearly seven days",
+  查看更多: "View more ",
+  条相关: " related ",
+  条与: " related to ",
+  相关的: "keywords",
+  进入聊天: "enter",
+  定位到聊天位置: "Navigate to the chat position",
+  搜索会话内容: "Search in conversation",
+  查看更多历史记录: "View more history message",
+  暂无搜索结果: "No Results",
+  结果: "results",
+  取消: "Cancel",
+  "[文本]": "[Text Message]",
+  "[图片]": "[Image Message]",
+  "[语音]": "[Audio Message]",
+  "[视频]": "[Video Message]",
+  "[文件]": "[File Message]",
+  "[自定义消息]": "[Custom Message]",
+  "[系统消息]": "[System Message]",
+  "[合并消息]": "[Merged Message]",
+  "[位置消息]": "[Position Message]",
+  "消息云端搜索失败：": "Message cloud search failed: ",
+  "查找联系人失败：": "Failed to find contact: ",
+  "查找群聊失败：": "Failed to find group: ",
+  "进入会话失败": "Failed to enter conversation",
+};
+
+export default TUISearch;
diff --git a/txim/src/TUIKit/locales/en/component.ts b/txim/src/TUIKit/locales/en/component.ts
new file mode 100644
index 00000000..3c304996
--- /dev/null
+++ b/txim/src/TUIKit/locales/en/component.ts
@@ -0,0 +1,21 @@
+const component = {
+  "取消": "Cancel",
+  "完成": "Done",
+  "已选中": "Selected",
+  "人": "",
+  "保存": "Save",
+  "请输入userID": "Enter a userID",
+  "请输入groupID": "Enter a groupID",
+  "确定": "submit",
+  "全选": "All",
+  "已在群聊中": "exists",
+  "查看更多": "More",
+  "图片 url 不存在": "Image url does not exist",
+  "已取消": "Cancelled",
+  "获取权限失败": "Failed to obtain permission",
+  "已保存至相册": "Saved to album",
+  "图片下载失败": "Image download failed",
+  "暂不支持下载此类型图片": "Downloading this type of pictures is not supported yet",
+}
+
+export default component;
diff --git a/txim/src/TUIKit/locales/en/emoji.ts b/txim/src/TUIKit/locales/en/emoji.ts
new file mode 100644
index 00000000..e0c29739
--- /dev/null
+++ b/txim/src/TUIKit/locales/en/emoji.ts
@@ -0,0 +1,2 @@
+import { default as Emoji } from '../../components/TUIChat/emoji-config/locales/en';
+export default Emoji;
diff --git a/txim/src/TUIKit/locales/en/evaluate.ts b/txim/src/TUIKit/locales/en/evaluate.ts
new file mode 100644
index 00000000..116024e7
--- /dev/null
+++ b/txim/src/TUIKit/locales/en/evaluate.ts
@@ -0,0 +1,11 @@
+const Evaluate = {
+  "请对本次服务进行评价": "Please rate this service",
+  "提交评价": "Feedback",
+  "服务评价工具": "Service rate tool",
+  "使用": "Build with",
+  "自定义消息": "Custom message",
+  "搭建": "",
+  "星": "Star"
+}
+
+export default Evaluate;
diff --git a/txim/src/TUIKit/locales/en/index.ts b/txim/src/TUIKit/locales/en/index.ts
new file mode 100644
index 00000000..880cf17b
--- /dev/null
+++ b/txim/src/TUIKit/locales/en/index.ts
@@ -0,0 +1,41 @@
+import TUIChat from './TUIChat';
+import TUIConversation from './TUIConversation';
+import TUIGroup from './TUIGroup';
+import TUIContact from './TUIContact';
+import TUISearch from './TUISearch';
+
+import message from './message';
+import component from './component';
+import time from './time';
+
+import Words from './words';
+import Evaluate from './evaluate';
+import Emoji from './emoji';
+
+const messages = {
+  en: {
+    取消: 'Cancel',
+    发送: 'Send',
+    系统通知: 'System notification',
+    关闭: 'Close',
+    确定: 'Save',
+    开始时间: 'Start Date',
+    结束时间: 'End Date',
+    消息: 'Messages',
+    通讯录: 'Contacts',
+    欢迎使用腾讯云即时通信IM: 'Welcome to Tencent Cloud Chat',
+    TUIChat,
+    TUIConversation,
+    TUIGroup,
+    TUIContact,
+    message,
+    component,
+    time,
+    Evaluate,
+    Words,
+    TUISearch,
+    Emoji,
+  },
+};
+
+export default messages;
diff --git a/txim/src/TUIKit/locales/en/message.ts b/txim/src/TUIKit/locales/en/message.ts
new file mode 100644
index 00000000..7bbb3c99
--- /dev/null
+++ b/txim/src/TUIKit/locales/en/message.ts
@@ -0,0 +1,62 @@
+const message = {
+  "tip": {
+    "群成员": "group members",
+    "加入群组": "joined the group",
+    "退出群组": "left the group",
+    "被": "by",
+    "踢出群组": "was kicked out of the group",
+    "成为管理员": "was set as an admin",
+    "被撤销管理员": "was revoked",
+    "被禁言": " was muted",
+    "被取消禁言": "cancel the prohibition",
+    "群提示消息": "group prompt message",
+    "管理员": "The admin",
+    "开启全员禁言": "enabled Mute All",
+    "取消全员禁言": "disabled Mute All",
+    "成为新的群主": "became the new group owner",
+    "修改群名为": "changed the group name to",
+    "发布新公告": "posted a new notice",
+    "把群公告修改为": "changed the group notice to",
+    "申请加入群组": "requested to join the group",
+    "成功加入群组": "Successfully joined the group",
+    "被拒绝": "The request to join the group was refused",
+    "你被管理员": "You",
+    "群": "group",
+    "解散": "disbanded",
+    "创建群": "created the group",
+    "邀请你加群": "invite you to join the group",
+    "你退出群组" : "You left the group",
+    "你被": "You were",
+    "设置为群": "set as group",
+    "的管理员": "as an admin",
+    "撤销群": "revoked",
+    "的管理员身份": "admin role of the group",
+    "同意加群": "agreed to join the group",
+    "拒接加群": "refused to join the group",
+    "自定义群系统通知": "Custom group system notification"
+  },
+  "custom": {
+    "自定义消息": "Custom message",
+    "通话时长": "Call duration",
+    "通话结束": "Call End",
+    "切换语音通话": "Switch voice call",
+    "切换视频通话": "Switch video call",
+    "发起通话": "Start a call",
+    "取消通话": "Cancel",
+    "已接听": "Answered",
+    "拒绝通话": "Decline",
+    "无应答": "No answer",
+    "已取消": "Canceled",
+    "对方已取消": "Call canceled by caller",
+    "已拒绝": "Declined",
+    "对方已拒绝": "Call declined by user",
+    "对方忙线中": "Line busy",
+    "忙线未接听": "	Line busy. Call not received.",
+    "对方无应答": "Call wasn't answered",
+    "超时无应答": "Call not answered",
+    "对本次服务评价": "Rate this service",
+    "查看详情>>": "View details >>"
+  }
+}
+
+export default message;
diff --git a/txim/src/TUIKit/locales/en/time.ts b/txim/src/TUIKit/locales/en/time.ts
new file mode 100644
index 00000000..7a3f4041
--- /dev/null
+++ b/txim/src/TUIKit/locales/en/time.ts
@@ -0,0 +1,37 @@
+const time = {
+  "周": "week(s) ",
+  "天": "day(s)",
+  "小时": "hour(s) ",
+  "分钟": "minute(s)",
+  "刚刚": "Just now",
+  "前": " ago",
+  "昨天": "Yesterday",
+  "星期一": "Monday",
+  "星期二": "Tuesday",
+  "星期三": "Wednesday",
+  "星期四": "Thursday",
+  "星期五": "Friday",
+  "星期六": "Saturday",
+  "星期日": "Sunday",
+  "一月": "January",
+  "二月": "February",
+  "三月": "March",
+  "四月": "April",
+  "五月": "May",
+  "六月": "June",
+  "七月": "July",
+  "八月": "August",
+  "九月": "September",
+  "十月": "October",
+  "十一月": "November",
+  "十二月": "December",
+  "一": "Mon",
+  "二": "Tues",
+  "三": "Wed",
+  "四": "Thur",
+  "五": "Fri",
+  "六": "Sat",
+  "日": "Sun",
+}
+
+export default time;
diff --git a/txim/src/TUIKit/locales/en/words.ts b/txim/src/TUIKit/locales/en/words.ts
new file mode 100644
index 00000000..01de3f67
--- /dev/null
+++ b/txim/src/TUIKit/locales/en/words.ts
@@ -0,0 +1,19 @@
+const Words = {
+  "请对本次服务进行评价": "Please rate this service",
+  "提交评价": "Feedback",
+  "常用语-快捷回复工具": "Common Expressions - Quick Reply Tool",
+  "使用": "Build with",
+  "自定义消息": "Custom message",
+  "搭建": "",
+  "在吗？在吗？在吗？重要的话说三遍。": "Are you there? ",
+  "好久没聊天了，快来和我说说话～": "It’s been a long time. How about you?",
+  "好的，就这么说定了。": "Okay. It's a deal.",
+  "感恩的心，感谢有你。": "So grateful! ",
+  "糟糕！是心动的感觉！": "Oh, no. Flipped.",
+  "心疼地抱抱自己，我太难了！": "Give myself a warm hug. ",
+  "没关系，别在意，事情过去就过去了。": "Take it easy.",
+  "早上好，今天也是让人期待的一天呢！": "Good morning. Have a wonderful day.",
+  "熬夜有什么用，又没人陪你聊天，早点休息吧。": "It's better to go to bed early."
+}
+
+export default Words;
diff --git a/txim/src/TUIKit/locales/index.ts b/txim/src/TUIKit/locales/index.ts
new file mode 100644
index 00000000..acc0e700
--- /dev/null
+++ b/txim/src/TUIKit/locales/index.ts
@@ -0,0 +1,16 @@
+
+import en from './en';
+import zh_cn from './zh_cn';
+import zh_tw from './zh_tw';
+
+export interface ILanguageResources {
+  [key: string]: string | ILanguageResources;
+}
+
+const messages: Record<string, ILanguageResources> = {
+  ...en,
+  ...zh_cn,
+  ...zh_tw,
+};
+
+export default messages;
diff --git a/txim/src/TUIKit/locales/zh_cn/TUIChat.ts b/txim/src/TUIKit/locales/zh_cn/TUIChat.ts
new file mode 100644
index 00000000..28110969
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/TUIChat.ts
@@ -0,0 +1,156 @@
+const TUIChat = {
+  '【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。': '【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。',
+  '按Enter发送，Ctrl+Enter换行': '按Enter发送，Ctrl+Enter换行',
+  '表情': '[表情]',
+  '查看更多': '查看更多',
+  '撤回': '撤回',
+  '撤回了一条消息': '撤回了一条消息',
+  '打开': '打开',
+  '单击下载': '单击下载',
+  '点此投诉': '点此投诉',
+  '点击处理': '点击处理',
+  '对方正在输入': '对方正在输入...',
+  '发起群视频': '发起群视频',
+  '发起群语音': '发起群语音',
+  '发起通话': '发起通话',
+  '发送失败': '发送失败',
+  '复制': '复制',
+  '复制成功': '文本复制成功',
+  '该消息不存在': '该消息不存在',
+  '关闭阅读状态': '关闭',
+  '管理员开启全员禁言': '管理员开启全员禁言',
+  '欢迎使用TUICallKit': '欢迎使用腾讯云音视频通话组件TUICallKit ',
+  '回到最新位置': '回到最新位置',
+  '回复': '回复',
+  '回复详情': '回复详情',
+  '集成TUICallKit': '集成 TUICallKit ',
+  '检测到您暂未集成TUICallKit，无法体验音视频通话功能': '检测到您暂未集成TUICallKit，无法体验音视频通话功能。',
+  '结束群聊': '结束群聊',
+  '进行体验': '进行体验。',
+  '经度': '经度',
+  '拒绝': '拒绝',
+  '拒绝通话': '拒绝通话',
+  '开通腾讯实时音视频服务': '开通腾讯实时音视频服务',
+  '聊天记录': '[聊天记录]',
+  '描述': '描述',
+  '内容包含敏感词汇': '内容包含敏感词汇',
+  '您': '您',
+  '您当前购买使用的套餐包暂未开通此功能': '您当前购买使用的套餐包暂未开通此功能。',
+  '您当前购买使用的套餐包暂未开通群消息已读回执功能': '您当前购买使用的套餐包暂未开通【群消息已读回执】功能，请升级至旗舰版进行体验',
+  '您当前购买使用的套餐包暂未开通在线用户列表功能': '您当前购买使用的套餐包暂未开通【在线用户列表】功能，请升级至旗舰版进行体验',
+  '您已被管理员禁言': '您已被管理员禁言',
+  '您有': '您有',
+  '请点击': '请点击',
+  '请输入消息': '请输入消息',
+  '取消': '取消',
+  '取消通话': '取消通话',
+  '全部已读': '全部已读',
+  '确定': '确定',
+  '确认重发该消息？': '确认重发该消息？',
+  '人关闭阅读状态': '人关闭阅读状态',
+  '人未读': '人未读',
+  '人已读': '人已读',
+  '删除': '删除',
+  '涉及敏感内容': '涉及敏感内容',
+  '申请加入': '申请加入',
+  '视频': '[视频]',
+  '视频通话': '视频通话',
+  '条回复': '条回复',
+  '条入群申请': '条入群申请',
+  '条新消息': '条新消息',
+  '通话时长': '通话时长',
+  '同意': '同意',
+  '图片': '[图片]',
+  '图片消息失败,无效的图片格式': '图片消息失败,无效的图片格式',
+  '纬度': '纬度',
+  '未读': '未读',
+  '位置': '[位置]',
+  '文件': '[文件]',
+  '文件不存在,请检查文件路径是否正确': '文件不存在,请检查文件路径是否正确',
+  '文件大小超出了限制,如果上传文件,最大限制是100MB': '文件大小超出了限制,如果上传文件,最大限制是100MB',
+  '文件消息失败,禁止发送违规封禁的文件': '文件消息失败,禁止发送违规封禁的文件',
+  '我': '我',
+  '无法查看': '无法查看',
+  '无法定位到原消息': '无法定位到原消息',
+  '无法收听': '无法收听',
+  '正在加载': '正在加载...',
+  '加载结束': '加载结束',
+  '无应答': '无应答',
+  '系统消息': '系统消息',
+  '消息': 'message',
+  '消息或者资料中文本存在敏感内容,发送失败': '消息或者资料中文本存在敏感内容,发送失败',
+  '消息详情': '消息详情',
+  '消息长度超出限制,消息长度不要超过12K': '消息长度超出限制,消息长度不要超过12K',
+  '消息中图片存在敏感内容,发送失败': '消息中图片存在敏感内容,发送失败',
+  '选择提醒的人': '选择提醒的人',
+  '已读': '已读',
+  '已过撤回时限': '已过撤回时限',
+  '已接听': '已接听',
+  '已拒绝': '已拒绝',
+  '已同意': '已同意',
+  '引用': '引用',
+  '引用失败': '引用失败',
+  '语音': '[语音]',
+  '语音通话': '语音通话',
+  '重新编辑': '重新编辑',
+  '重新发送': '重新发送',
+  '转发': '转发',
+  '翻译': '翻译',
+  '转文字': '转文字',
+  '隐藏': '隐藏',
+  '转发给': '转发给',
+  '自定义': '[自定义消息]',
+  '自定义消息': '自定义消息',
+  '腾讯云 IM': '腾讯云 IM',
+  '空': '空',
+  '文本包含本地审核拦截词': '文本包含本地审核拦截词',
+  '按住说话': '按住说话',
+  '抬起发送': '抬起发送',
+  '抬起取消': '抬起取消',
+  '正在录音': '正在录音',
+  '继续上滑可取消': '继续上滑可取消',
+  '松开手指 取消发送': '松开手指 取消发送',
+  '此机型暂不支持复制功能': '此机型暂不支持复制功能',
+  '请开通翻译功能': '请开通翻译功能',
+  '请开通语音转文字功能': '请开通语音转文字功能',
+  '翻译中': '翻译中',
+  '转换中': '转换中',
+  '由IM提供翻译支持': '由IM提供翻译支持',
+  '所有人': '所有人',
+  '已达到表情回应上限数量': '已达到表情回应上限数量',
+  '等': '等',
+  '人': '人',
+  '返回': '返回',
+  '关闭': '关闭',
+  '多选': '多选',
+  '合并转发': '合并转发',
+  '逐条转发': '逐条转发',
+  '未选择消息': '未选择消息',
+  '引用内容已撤回': '引用内容已撤回',
+  '[草稿]': '[草稿]',
+  '[消息]': '[消息]',
+  '[文本]': '[文本]',
+  '[自定义消息]': '[自定义消息]',
+  '[图片]': '[图片]',
+  '[音频]': '[音频]',
+  '[语音]': '[语音]',
+  '[视频]': '[视频]',
+  '[文件]': '[文件]',
+  '[位置]': '[地理位置]',
+  '[地理位置]': '[地理位置]',
+  '[动画表情]': '[动画表情]',
+  '[群提示]': '[群提示]',
+  '[群提示消息]': '[群提示消息]',
+  '[聊天记录]': '[聊天记录]',
+  '[机器人自定义消息]': '[机器人自定义消息]',
+  '群聊的聊天记录': '群聊的聊天记录',
+  '和': '和',
+  '的聊天记录': '的聊天记录',
+  '请升级IMSDK到v2.10.1或更高版本查看此消息': '请升级IMSDK到v2.10.1或更高版本查看此消息',
+  '您已被管理员移出群聊': '您已被管理员移出群聊',
+  '该群聊已被解散': '该群聊已被解散',
+  '您已退出该群聊': '您已退出该群聊',
+  '您已被禁止聊天': '您已被禁止聊天',
+};
+
+export default TUIChat;
diff --git a/txim/src/TUIKit/locales/zh_cn/TUIContact.ts b/txim/src/TUIKit/locales/zh_cn/TUIContact.ts
new file mode 100644
index 00000000..f0642e01
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/TUIContact.ts
@@ -0,0 +1,68 @@
+import translate from "./translate"
+
+const TUIContact = {
+  "群聊通知": "群聊通知",
+  "系统通知": "系统通知",
+  "我的群聊": "我的群聊",
+  "输入ID": "请输入用户/群聊 ID，回车搜索",
+  "群名称": "群名称",
+  "群ID": "群ID",
+  "加入群聊": "加入群聊",
+  "解散群聊": "解散群聊",
+  "退出群聊": "退出群聊",
+  "进入群聊": "进入群聊",
+  "群类型": "群类型",
+  "请填写验证信息": "请填写验证信息",
+  "申请加入": "申请加入",
+  "已申请":"已申请",
+  "接受": "接受",
+  "拒绝": "拒绝",
+  "已处理": "已处理",
+  "添加群聊": "添加群聊",
+  "已加入": "已加入",
+  "该群组不存在": "该群组不存在",
+  "加群": "加群",
+  "我的好友": "我的好友",
+  "发送消息": "发送消息",
+  "个性签名": "个性签名",
+  "等待管理员同意": "申请成功，等待管理员同意入群申请",
+  "加群成功": "加群成功",
+  "您已是群成员": "您已是群成员",
+  "新的联系人": "新的联系人",
+  "黑名单": "黑名单",
+  "无搜索结果": "无搜索结果",
+  "客服号": "客服号",
+  "ID": "ID",
+  "联系人": "联系人",
+  "群聊": "群聊",
+  "添加好友/群聊": "添加好友/群聊",
+  "备注名": "备注名",
+  "加入黑名单": "加入黑名单",
+  "删除好友": "删除好友",
+  "等待验证": "等待验证",
+  "验证信息": "验证信息",
+  "发送申请": "发送申请",
+  "加入直播群": "加入直播群",
+  "同意": "同意",
+  "删除好友成功": "删除好友成功",
+  "删除好友失败": "删除好友失败",
+  "申请已发送": "申请已发送",
+  "申请发送失败": "申请发送失败",
+  "进入会话失败": "进入会话失败",
+  "添加好友成功": "添加好友成功",
+  "同意好友申请失败": "同意好友申请失败",
+  "拒绝成功": "拒绝成功",
+  "拒绝好友申请失败": "拒绝好友申请失败",
+  "解散群聊成功": "解散群聊成功",
+  "解散群聊失败": "解散群聊失败",
+  "退出群组成功": "退出群组成功",
+  "退出群组失败": "退出群组失败",
+  "申请入群失败": "申请入群失败",
+  "加入黑名单失败": "加入黑名单失败",
+  "移除黑名单失败": "移除黑名单失败",
+  "修改备注失败: 备注长度不得超过 96 字节": "修改备注失败: 备注长度不得超过 96 字节",
+  "修改备注成功": "修改备注成功",
+  "修改备注失败": "修改备注失败",
+}
+
+export default TUIContact;
diff --git a/txim/src/TUIKit/locales/zh_cn/TUIConversation.ts b/txim/src/TUIKit/locales/zh_cn/TUIConversation.ts
new file mode 100644
index 00000000..ef0a7aaf
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/TUIConversation.ts
@@ -0,0 +1,24 @@
+const TUIConversation = {
+  "发起会话": "发起会话",
+  "发起单聊": "发起单聊",
+  "发起群聊": "发起群聊",
+  "请输入userID": "请输入userID",
+  "删除会话": "删除会话",
+  "删除后，将清空该聊天的消息记录": "删除后，将清空该聊天的消息记录",
+  "删除后，将清空该群聊的消息记录": "删除后，将清空该群聊的消息记录",
+  "置顶会话": "置顶会话",
+  "取消置顶": "取消置顶",
+  "消息免打扰": "消息免打扰",
+  "取消免打扰": "取消免打扰",
+  "系统通知": "系统通知",
+  "有人@我": "有人@我",
+  "@所有人": "@所有人",
+  "条": "条",
+  "我": "我",
+  "网络异常，请您检查网络设置": "网络异常，请您检查网络设置",
+  "您已被群管理员移出群聊": "您已被群管理员移出群聊",
+  "该群聊已被解散": "该群聊已被解散",
+  "您已退出该群聊": "您已退出该群聊",
+}
+
+export default TUIConversation;
diff --git a/txim/src/TUIKit/locales/zh_cn/TUIGroup.ts b/txim/src/TUIKit/locales/zh_cn/TUIGroup.ts
new file mode 100644
index 00000000..f6cabd0d
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/TUIGroup.ts
@@ -0,0 +1,87 @@
+const TUIGroup = {
+  "输入groupID搜索": "输入groupID搜索",
+  "群名称": "群名称",
+  "群ID": "群ID",
+  "加入群聊": "加入群聊",
+  "解散群聊": "解散群聊",
+  "退出群聊": "退出群聊",
+  "群类型": "群类型",
+  "请填写验证信息": "请填写验证信息",
+  "申请加入": "申请加入",
+  "已申请": "已申请",
+  "群公告": "群公告",
+  "群成员": "群成员",
+  "群管理": "群管理",
+  "好友工作群": "好友工作群",
+  "陌生人社交群": "陌生人社交群",
+  "临时会议群": "临时会议群",
+  "直播群": "直播群",
+  "社群": "社群",
+  "自由加入": "自由加入",
+  "需要验证": "需要验证",
+  "禁止加群": "禁止加群",
+  "人": "人",
+  "群头像": "群头像",
+  "加群方式": "加群方式",
+  "转让群组": "转让群组",
+  "退出群组": "退出群组",
+  "群管理员": "群管理员",
+  "全员禁言": "全员禁言",
+  "全员禁言开启后，只允许群主和管理员发言。": "全员禁言开启后，只允许群主和管理员发言。",
+  "单独禁言人员": "单独禁言人员",
+  "删除成员": "删除成员",
+  "确定从群聊中删除该成员？": "确定从群聊中删除该成员？",
+  "确定从群聊中删除所选成员？": "确定从群聊中删除所选成员？",
+  "暂无公告": "暂无公告",
+  "发布": "发布",
+  "编辑": "编辑",
+  "查看更多": "查看更多",
+  "管理员": "管理员",
+  "群主": "群主",
+  "我": "我",
+  "确认": "确认",
+  "添加成员": "添加成员",
+  "新增管理员": "新增管理员",
+  "移除管理员": "移除管理员",
+  "新增禁言用户": "新增禁言用户",
+  "移除禁言用户": "移除禁言用户",
+  "修改群聊名称": "修改群聊名称",
+  "修改群聊名称后，将在群内通知其他成员": "修改群聊名称后，将在群内通知其他成员",
+  "仅限中文、字母、数字和下划线，2-20个字": "仅限中文、字母、数字和下划线，2-20个字",
+  "请先注册 TUIGroup 模块": "请先注册 TUIGroup 模块",
+  "该用户不存在": "该用户不存在",
+  "该用户不在群组内": "该用户不在群组内",
+  "添加群聊": "添加群聊",
+  "该群组不存在": "该群组不存在",
+  "创建群聊，请注册 TUIGroup 模块": "创建群聊，请注册 TUIGroup 模块",
+  "创建成功": "创建成功",
+  "发起多人会话（群聊）": "发起多人会话（群聊）",
+  "选填": "选填",
+  "取消": "取消",
+  "创建": "创建",
+  "类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见": "类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见",
+  "类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见": "类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见",
+  "创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见": "创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见",
+  "创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见": "创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见",
+  "创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见": "创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见",
+  "产品文档": "产品文档",
+  "设置群名称": "设置群名称",
+  "请输入群名称": "请输入群名称",
+  "设置群ID": "设置群ID",
+  "请输入群ID": "请输入群ID",
+  "选择群类型": "选择群类型",
+  "陌生人社交群（Public）": "陌生人社交群（Public）",
+  "临时会议群（Meeting）": "临时会议群（Meeting）",
+  "好友工作群（Work）": "好友工作群（Work）",
+  "直播群（AVChatroom）": "直播群（AVChatroom）",
+  "社群（Community）": "社群（Community）",
+  "群组创建成功": "群组创建成功",
+  "群组解散成功": "群组解散成功",
+  "禁言设置成功": "禁言设置成功",
+  "取消禁言成功": "取消禁言成功",
+  "群名称不能为空": "群名称不能为空",
+  "群名称修改成功": "群名称修改成功",
+  "群公告字数超出限制，最大长度为150": "群公告字数超出限制，最大长度为150",
+};
+
+export default TUIGroup;
diff --git a/txim/src/TUIKit/locales/zh_cn/TUISearch.ts b/txim/src/TUIKit/locales/zh_cn/TUISearch.ts
new file mode 100644
index 00000000..6d9c4d69
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/TUISearch.ts
@@ -0,0 +1,41 @@
+const TUISearch = {
+  搜索: "搜索",
+  全部: "全部",
+  联系人: "联系人",
+  群聊: "群聊",
+  聊天记录: "聊天记录",
+  文本: "文本",
+  文件: "文件",
+  "图片/视频": "图片/视频",
+  其他: "其他",
+  选择时间: "选择时间",
+  今天: "今天",
+  近三天: "近三天",
+  近七天: "近七天",
+  查看更多: "查看更多",
+  条相关: "条相关",
+  条与: "条与",
+  相关的: "相关的",
+  进入聊天: "进入聊天",
+  定位到聊天位置: "定位到聊天位置",
+  搜索会话内容: "搜索会话内容",
+  查看更多历史记录: "查看更多历史记录",
+  暂无搜索结果: "暂无搜索结果",
+  结果: "结果",
+  取消: "取消",
+  "[文本]": "[文本]",
+  "[图片]": "[图片]",
+  "[语音]": "[语音]",
+  "[视频]": "[视频]",
+  "[文件]": "[文件]",
+  "[自定义消息]": "[自定义消息]",
+  "[系统消息]": "[系统消息]",
+  "[合并消息]": "[合并消息]",
+  "[位置消息]": "[位置消息]",
+  "消息云端搜索失败：": "消息云端搜索失败：",
+  "查找联系人失败：": "查找联系人失败：",
+  "查找群聊失败：": "查找群聊失败：",
+  "进入会话失败": "进入会话失败",
+};
+
+export default TUISearch;
diff --git a/txim/src/TUIKit/locales/zh_cn/component.ts b/txim/src/TUIKit/locales/zh_cn/component.ts
new file mode 100644
index 00000000..39a0f4e0
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/component.ts
@@ -0,0 +1,21 @@
+const components = {
+  "取消": "取消",
+  "完成": "完成",
+  "已选中": "已选中",
+  "人": "人",
+  "保存": "保存",
+  "请输入userID": "请输入userID",
+  "请输入groupID": "请输入groupID",
+  "确定": "确定",
+  "全选": "全选",
+  "已在群聊中": "已在群聊中",
+  "查看更多": "查看更多",
+  "图片 url 不存在": "图片 url 不存在",
+  "已取消": "已取消",
+  "获取权限失败": "获取权限失败",
+  "已保存至相册": "已保存至相册",
+  "图片下载失败": "图片下载失败",
+  "暂不支持下载此类型图片": "暂不支持下载此类型图片",
+}
+
+export default components;
diff --git a/txim/src/TUIKit/locales/zh_cn/emoji.ts b/txim/src/TUIKit/locales/zh_cn/emoji.ts
new file mode 100644
index 00000000..d4fe38ed
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/emoji.ts
@@ -0,0 +1,2 @@
+import { default as Emoji } from '../../components/TUIChat/emoji-config/locales/zh_cn';
+export default Emoji;
diff --git a/txim/src/TUIKit/locales/zh_cn/evaluate.ts b/txim/src/TUIKit/locales/zh_cn/evaluate.ts
new file mode 100644
index 00000000..253112ba
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/evaluate.ts
@@ -0,0 +1,11 @@
+const Evaluate = {
+  "请对本次服务进行评价": "请对本次服务进行评价",
+  "提交评价": "提交评价",
+  "服务评价工具": "服务评价工具",
+  "使用": "使用",
+  "自定义消息": "自定义消息",
+  "搭建": "搭建",
+  "星": "星"
+}
+
+export default Evaluate;
diff --git a/txim/src/TUIKit/locales/zh_cn/index.ts b/txim/src/TUIKit/locales/zh_cn/index.ts
new file mode 100644
index 00000000..714ae4a1
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/index.ts
@@ -0,0 +1,41 @@
+import TUIChat from './TUIChat';
+import TUIConversation from './TUIConversation';
+import TUIGroup from './TUIGroup';
+import TUIContact from './TUIContact';
+import TUISearch from './TUISearch';
+
+import message from './message';
+import component from './component';
+import time from './time';
+
+import Words from './words';
+import Evaluate from './evaluate';
+import Emoji from './emoji';
+
+const messages = {
+  zh_cn: {
+    取消: '取消',
+    发送: '发送',
+    系统通知: '系统通知',
+    关闭: '关闭',
+    确定: '确定',
+    开始时间: '开始时间',
+    结束时间: '结束时间',
+    消息: '消息',
+    通讯录: '通讯录',
+    欢迎使用腾讯云即时通信IM: '欢迎使用腾讯云即时通信IM',
+    TUIChat,
+    TUIConversation,
+    TUIGroup,
+    TUIContact,
+    message,
+    component,
+    time,
+    Evaluate,
+    Words,
+    TUISearch,
+    Emoji,
+  },
+};
+
+export default messages;
diff --git a/txim/src/TUIKit/locales/zh_cn/message.ts b/txim/src/TUIKit/locales/zh_cn/message.ts
new file mode 100644
index 00000000..7ba190be
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/message.ts
@@ -0,0 +1,62 @@
+const message = {
+  "tip": {
+    "群成员": "群成员",
+    "加入群组": "加入群组",
+    "退出群组": "退出群组",
+    "被": "被",
+    "踢出群组": "踢出群组",
+    "成为管理员": "成为管理员",
+    "被撤销管理员": "被撤销管理员",
+    "被禁言": "被禁言",
+    "被取消禁言": "被取消禁言",
+    "群提示消息": "群提示消息",
+    "管理员": "管理员",
+    "开启全员禁言": "开启全员禁言",
+    "取消全员禁言": "取消全员禁言",
+    "成为新的群主": "成为新的群主",
+    "修改群名为": "修改群名为",
+    "发布新公告": "发布新公告",
+    "把群公告修改为": "把群公告修改为",
+    "申请加入群组": "申请加入群组",
+    "成功加入群组": "成功加入群组",
+    "被拒绝": "被拒绝",
+    "你被管理员": "你被管理员",
+    "群": "群",
+    "解散": "解散",
+    "创建群": "创建群",
+    "邀请你加群": "邀请你加群",
+    "你退出群组" : "你退出群组",
+    "你被": "你被",
+    "设置为群": "设置为群",
+    "的管理员": "的管理员",
+    "撤销群": "撤销群",
+    "的管理员身份": "的管理员身份",
+    "同意加群": "同意加群",
+    "拒接加群": "拒接加群",
+    "自定义群系统通知": "自定义群系统通知"
+  },
+  "custom": {
+    "自定义消息": "自定义消息",
+    "通话时长": "通话时长",
+    "通话结束": "通话结束",
+    "切换语音通话": "切换语音通话",
+    "切换视频通话": "切换视频通话",
+    "发起通话": "发起通话",
+    "取消通话": "取消通话",
+    "已接听": "已接听",
+    "拒绝通话": "拒绝通话",
+    "无应答": "无应答",
+    "对本次服务评价": "对本次服务评价",
+    "查看详情>>": "查看详情>>",
+    "已取消": "已取消",
+    "对方已取消": "对方已取消",
+    "已拒绝": "已拒绝",
+    "对方已拒绝": "对方已拒绝",
+    "对方忙线中": "对方忙线中",
+    "忙线未接听": "忙线未接听",
+    "对方无应答": "对方无应答",
+    "超时无应答": "超时无应答",
+  }
+}
+
+export default message;
diff --git a/txim/src/TUIKit/locales/zh_cn/time.ts b/txim/src/TUIKit/locales/zh_cn/time.ts
new file mode 100644
index 00000000..55b7efb4
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/time.ts
@@ -0,0 +1,37 @@
+const time = {
+  "周": "周",
+  "天": "天",
+  "小时": "小时",
+  "分钟": "分钟",
+  "刚刚": "刚刚",
+  "前": "前",
+  "昨天": "昨天",
+  "星期一": "星期一",
+  "星期二": "星期二",
+  "星期三": "星期三",
+  "星期四": "星期四",
+  "星期五": "星期五",
+  "星期六": "星期六",
+  "星期日": "星期日",
+  "一月": "一月",
+  "二月": "二月",
+  "三月": "三月",
+  "四月": "四月",
+  "五月": "五月",
+  "六月": "六月",
+  "七月": "七月",
+  "八月": "八月",
+  "九月": "九月",
+  "十月": "十月",
+  "十一月": "十一月",
+  "十二月": "十二月",
+  "一": "一",
+  "二": "二",
+  "三": "三",
+  "四": "四",
+  "五": "五",
+  "六": "六",
+  "日": "日",
+}
+
+export default time;
diff --git a/txim/src/TUIKit/locales/zh_cn/translate.ts b/txim/src/TUIKit/locales/zh_cn/translate.ts
new file mode 100644
index 00000000..16d35aa2
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/translate.ts
@@ -0,0 +1,164 @@
+const translate = {
+  "TUIKit-TUIChat-01": "撤回消息",
+  "TUIKit-TUIChat-02": "删除消息",
+  "TUIKit-TUIChat-03": "重新发送",
+  "TUIKit-TUIChat-04": "转发",
+  "TUIKit-TUIChat-05": "打开",
+  "TUIKit-TUIChat-06": "已读",
+  "TUIKit-TUIChat-07": "未读",
+  "TUIKit-TUIChat-08": "您",
+  "TUIKit-TUIChat-09": "撤回了一条消息",
+  "TUIKit-TUIChat-10": "重新编辑",
+  "TUIKit-TUIChat-11": "我",
+  "TUIKit-TUIChat-12": "查看更多",
+  "TUIKit-TUIChat-13": "转发给",
+  "TUIKit-TUIChat-14": "请输入消息",
+  "TUIKit-TUIChat-15": "描述",
+  "TUIKit-TUIChat-16": "经度",
+  "TUIKit-TUIChat-17": "纬度",
+  "TUIKit-TUIChat-18": "管理员开启全员禁言",
+  "TUIKit-TUIChat-19": "您已被管理员禁言",
+  "TUIKit-TUIChat-20": "按Enter发送，Ctrl+Enter换行",
+  "TUIKit-TUIChat-mange-01": "群公告",
+  "TUIKit-TUIChat-mange-02": "群成员",
+  "TUIKit-TUIChat-mange-03": "群管理",
+  "TUIKit-TUIChat-mange-04": "好友工作群",
+  "TUIKit-TUIChat-mange-05": "陌生人社交群",
+  "TUIKit-TUIChat-mange-06": "临时会议群",
+  "TUIKit-TUIChat-mange-07": "直播群",
+  "TUIKit-TUIChat-mange-08": "自由加入",
+  "TUIKit-TUIChat-mange-09": "需要验证",
+  "TUIKit-TUIChat-mange-10": "禁止加群",
+  "TUIKit-TUIChat-mange-11": "人",
+  "TUIKit-TUIChat-mange-12": "群ID",
+  "TUIKit-TUIChat-mange-13": "群头像",
+  "TUIKit-TUIChat-mange-14": "群类型",
+  "TUIKit-TUIChat-mange-15": "加群方式",
+  "TUIKit-TUIChat-mange-16": "转让群组",
+  "TUIKit-TUIChat-mange-17": "解散群聊",
+  "TUIKit-TUIChat-mange-18": "退出群组",
+  "TUIKit-TUIChat-mange-19": "群管理员",
+  "TUIKit-TUIChat-mange-20": "全员禁言",
+  "TUIKit-TUIChat-mange-21": "全员禁言开启后，只允许群主和管理员发言。",
+  "TUIKit-TUIChat-mange-22": "单独禁言人员",
+  "TUIKit-TUIChat-mange-23": "删除成员",
+  "TUIKit-TUIChat-mange-24": "确定从群聊中删除该成员？",
+  "TUIKit-TUIChat-mange-25": "确定从群聊中删除所选成员？",
+  "TUIKit-TUIChat-mange-26": "暂无公告",
+  "TUIKit-TUIChat-mange-27": "发布",
+  "TUIKit-TUIChat-mange-28": "编辑",
+  "TUIKit-TUIChat-mange-29": "群名称",
+  "TUIKit-TUIChat-mange-30": "查看更多",
+  "TUIKit-TUIChat-mange-31": "管理员",
+  "TUIKit-TUIChat-mange-32": "群主",
+  "TUIKit-TUIChat-mange-33": "我",
+  "TUIKit-TUIChat-mange-34": "添加成员",
+  "TUIKit-TUIChat-mange-35": "新增管理员",
+  "TUIKit-TUIChat-mange-36": "移除管理员",
+  "TUIKit-TUIChat-mange-37": "新增禁言用户",
+  "TUIKit-TUIChat-mange-38": "移除禁言用户",
+  "TUIKit-TUIContact-01": "群聊通知",
+  "TUIKit-TUIContact-02": "系统通知",
+  "TUIKit-TUIContact-03": "我的群聊",
+  "TUIKit-TUIContact-04": "输入groupID搜索",
+  "TUIKit-TUIContact-05": "群名称",
+  "TUIKit-TUIContact-06": "群ID",
+  "TUIKit-TUIContact-07": "加入群聊",
+  "TUIKit-TUIContact-08": "解散群聊",
+  "TUIKit-TUIContact-09": "退出群聊",
+  "TUIKit-TUIContact-10": "群类型",
+  "TUIKit-TUIContact-11": "请填写验证信息",
+  "TUIKit-TUIContact-12": "申请加入",
+  "TUIKit-TUIContact-13":"已申请",
+  "TUIKit-TUIContact-14": "接受",
+  "TUIKit-TUIContact-15": "拒绝",
+  "TUIKit-TUIContact-16": "已处理",
+  "TUIKit-TUIConversation-01": "发起单人/多人会话",
+  "TUIKit-TUIConversation-02": "请输入userID",
+  "TUIKit-TUIConversation-03": "删除会话",
+  "TUIKit-TUIConversation-04": "系统通知",
+  "TUIKit-TUIConversation-05": "发起多人会话（群聊）",
+  "TUIKit-TUIConversation-06": "群头像",
+  "TUIKit-TUIConversation-07": "群名称",
+  "TUIKit-TUIConversation-08": "群ID",
+  "TUIKit-TUIConversation-09": "群类型",
+  "TUIKit-TUIConversation-10": "选填",
+  "TUIKit-TUIConversation-11": "取消",
+  "TUIKit-TUIConversation-12": "创建",
+  "TUIKit-TUIConversation-13": "类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见产品文档",
+  "TUIKit-TUIConversation-14": "类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见产品文档",
+  "TUIKit-TUIConversation-15": "创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见产品文档",
+  "TUIKit-TUIConversation-16": "创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见产品文档",
+  "TUIKit-TUIProfile-01": "资料设置",
+  "TUIKit-TUIProfile-02": "头像",
+  "TUIKit-TUIProfile-03": "昵称",
+  "TUIKit-TUIProfile-04": "账号",
+  "TUIKit-TUIProfile-05": "个性签名",
+  "TUIKit-TUIProfile-06": "性别",
+  "TUIKit-TUIProfile-07": "男",
+  "TUIKit-TUIProfile-08": "女",
+  "TUIKit-TUIProfile-09": "不显示",
+  "TUIKit-TUIProfile-10":"出生年月",
+  "TUIKit-TUIProfile-11": "取消",
+  "TUIKit-TUIProfile-12": "保存",
+  "TUIKit-time-01": "周",
+  "TUIKit-time-02": "天",
+  "TUIKit-time-03": "小时",
+  "TUIKit-time-04": "分钟",
+  "TUIKit-time-05": "刚刚",
+  "TUIKit-time-06": "前",
+  "TUIKit-message-tip-01": "群成员",
+  "TUIKit-message-tip-02": "加入群组",
+  "TUIKit-message-tip-03": "退出群组",
+  "TUIKit-message-tip-04": "被",
+  "TUIKit-message-tip-05": "踢出群组",
+  "TUIKit-message-tip-06": "成为管理员",
+  "TUIKit-message-tip-07": "被撤销管理员",
+  "TUIKit-message-tip-08": "被禁言",
+  "TUIKit-message-tip-09": "被取消禁言",
+  "TUIKit-message-tip-10": "群提示消息",
+  "TUIKit-message-tip-11": "管理员",
+  "TUIKit-message-tip-12": "开启全员禁言",
+  "TUIKit-message-tip-13": "取消全员禁言",
+  "TUIKit-message-tip-14": "成为新的群主",
+  "TUIKit-message-tip-15": "修改群名为",
+  "TUIKit-message-tip-16": "发布新公告",
+  "TUIKit-message-tip-17": "申请加入群组",
+  "TUIKit-message-tip-18": "成功加入群组",
+  "TUIKit-message-tip-19": "被拒绝",
+  "TUIKit-message-tip-20": "你被管理员",
+  "TUIKit-message-tip-21": "群",
+  "TUIKit-message-tip-22": "解散",
+  "TUIKit-message-tip-23": "创建群",
+  "TUIKit-message-tip-24": "邀请你加群",
+  "TUIKit-message-tip-25" : "你退出群组",
+  "TUIKit-message-tip-26": "你被",
+  "TUIKit-message-tip-27": "设置为群",
+  "TUIKit-message-tip-28": "的管理员",
+  "TUIKit-message-tip-29": "撤销群",
+  "TUIKit-message-tip-30": "的管理员身份",
+  "TUIKit-message-tip-31": "同意加群",
+  "TUIKit-message-tip-32": "拒接加群",
+  "TUIKit-message-tip-33": "自定义群系统通知",
+  "TUIKit-message-custom-01": "自定义消息",
+  "TUIKit-message-custom-02": "通话时长",
+  "TUIKit-message-custom-03": "结束群聊",
+  "TUIKit-message-custom-04": "切换语音通话",
+  "TUIKit-message-custom-05": "切换视频通话",
+  "TUIKit-message-custom-06": "发起通话",
+  "TUIKit-message-custom-07": "取消通话",
+  "TUIKit-message-custom-08": "已接听",
+  "TUIKit-message-custom-09": "拒绝通话",
+  "TUIKit-message-custom-10": "无应答",
+  "TUIKit-message-custom-11": "对本次服务评价",
+  "TUIKit-message-custom-12": "查看详情>>",
+  "TUIKit-component-01": "取消",
+  "TUIKit-component-02": "完成",
+  "TUIKit-component-03": "已选中",
+  "TUIKit-component-04": "人",
+  "TUIKit-component-05": "保存",
+  "TUIKit-component-06": "发送",
+  "TUIKit-component-07": "系统通知"
+}
+
+export default translate;
diff --git a/txim/src/TUIKit/locales/zh_cn/words.ts b/txim/src/TUIKit/locales/zh_cn/words.ts
new file mode 100644
index 00000000..c0082aed
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_cn/words.ts
@@ -0,0 +1,14 @@
+const Words = {
+  "常用语-快捷回复工具": "常用语-快捷回复工具",
+  "在吗？在吗？在吗？重要的话说三遍。": "在吗？在吗？在吗？重要的话说三遍。",
+  "好久没聊天了，快来和我说说话～": "好久没聊天了，快来和我说说话～",
+  "好的，就这么说定了。": "好的，就这么说定了。",
+  "感恩的心，感谢有你。": "感恩的心，感谢有你。",
+  "糟糕！是心动的感觉！": "糟糕！是心动的感觉！",
+  "心疼地抱抱自己，我太难了！":  "心疼地抱抱自己，我太难了！",
+  "没关系，别在意，事情过去就过去了。": "没关系，别在意，事情过去就过去了。",
+  "早上好，今天也是让人期待的一天呢！": "早上好，今天也是让人期待的一天呢！",
+  "熬夜有什么用，又没人陪你聊天，早点休息吧。": "熬夜有什么用，又没人陪你聊天，早点休息吧。"
+}
+
+export default Words;
diff --git a/txim/src/TUIKit/locales/zh_tw/TUIChat.ts b/txim/src/TUIKit/locales/zh_tw/TUIChat.ts
new file mode 100644
index 00000000..f387d6f4
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/TUIChat.ts
@@ -0,0 +1,156 @@
+const TUIChat = {
+  '【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。': '【安全提示】本 APP 僅用於體驗騰訊雲即時通信 IM 產品功能，不可用於業務洽談與拓展。請勿輕信匯款、中奖等涉及錢款的信息，勿輕易撥打陌生電話，謹防上當受騙。',
+  '按Enter发送，Ctrl+Enter换行': '按Enter發送，Ctrl+Enter換行',
+  '表情': '[表情]',
+  '查看更多': '查看更多',
+  '撤回': '撤回',
+  '撤回了一条消息': '撤回了一條消息',
+  '打开': '打開',
+  '单击下载': '單擊下載',
+  '点此投诉': '點此投訴',
+  '点击处理': '點擊處理',
+  '对方正在输入': '對方正在輸入...',
+  '发起群视频': '發起群視頻',
+  '发起群语音': '發起群語音',
+  '发起通话': '發起通話',
+  '发送失败': '發送失敗',
+  '复制': '複製',
+  '复制成功': '文本複製成功',
+  '该消息不存在': '該消息不存在',
+  '关闭阅读状态': '關閉',
+  '管理员开启全员禁言': '管理員開啟全員禁言',
+  '欢迎使用TUICallKit': '歡迎使用騰訊雲音視頻通話組件TUICallKit',
+  '回到最新位置': '回到最新位置',
+  '回复': '回覆',
+  '回复详情': '回覆詳情',
+  '集成TUICallKit': '集成 TUICallKit',
+  '检测到您暂未集成TUICallKit，无法体验音视频通话功能': '檢測到您暫未集成TUICallKit，無法體驗音視頻通話功能。',
+  '结束群聊': '結束群聊',
+  '进行体验': '進行體驗。',
+  '经度': '經度',
+  '拒绝': '拒絕',
+  '拒绝通话': '拒絕通話',
+  '开通腾讯实时音视频服务': '開通騰訊實時音視頻服務',
+  '聊天记录': '[聊天記錄]',
+  '描述': '描述',
+  '内容包含敏感词汇': '內容包含敏感詞彙',
+  '您': '您',
+  '您当前购买使用的套餐包暂未开通此功能': '您當前購買使用的套餐包暫未開通此功能。',
+  '您当前购买使用的套餐包暂未开通群消息已读回执功能': '您當前購買使用的套餐包暫未開通【群消息已讀回執】功能，請升級至旗艦版進行體驗',
+  '您当前购买使用的套餐包暂未开通在线用户列表功能': '您當前購買使用的套餐包暫未開通【在線用戶列表】功能，請升級至旗艦版進行體驗',
+  '您已被管理员禁言': '您已被管理員禁言',
+  '您有': '您有',
+  '请点击': '請點擊',
+  '请输入消息': '請輸入消息',
+  '取消': '取消',
+  '取消通话': '取消通話',
+  '全部已读': '全部已讀',
+  '确定': '確定',
+  '确认重发该消息？': '確認重發該消息？',
+  '人关闭阅读状态': '人關閉閱讀狀態',
+  '人未读': '人未讀',
+  '人已读': '人已讀',
+  '删除': '刪除',
+  '涉及敏感内容': '涉及敏感內容',
+  '申请加入': '申請加入',
+  '视频': '[視頻]',
+  '视频通话': '視頻通話',
+  '条回复': '條回覆',
+  '条入群申请': '條入群申請',
+  '条新消息': '條新消息',
+  '通话时长': '通話時長',
+  '同意': '同意',
+  '图片': '[圖片]',
+  '图片消息失败,无效的图片格式': '圖片消息失敗,無效的圖片格式',
+  '纬度': '緯度',
+  '未读': '未讀',
+  '位置': '[位置]',
+  '文件': '[文件]',
+  '文件不存在,请检查文件路径是否正确': '文件不存在,請檢查文件路徑是否正確',
+  '文件大小超出了限制,如果上传文件,最大限制是100MB': '文件大小超出了限制,如果上傳文件,最大限制是100MB',
+  '文件消息失败,禁止发送违规封禁的文件': '文件消息失敗,禁止發送違規封禁的文件',
+  '我': '我',
+  '无法查看': '無法查看',
+  '无法定位到原消息': '無法定位到原消息',
+  '无法收听': '無法收聽',
+  '正在加载': '正在加載...',
+  '加载结束': '加載結束',
+  '无应答': '無應答',
+  '系统消息': '系統消息',
+  '消息': 'message',
+  '消息或者资料中文本存在敏感内容,发送失败': '消息或者資料中文本存在敏感內容,發送失敗',
+  '消息详情': '消息詳情',
+  '消息长度超出限制,消息长度不要超过12K': '消息長度超出限制,消息長度不要超過12K',
+  '消息中图片存在敏感内容,发送失败': '消息中圖片存在敏感內容,發送失敗',
+  '选择提醒的人': '選擇提醒的人',
+  '已读': '已讀',
+  '已过撤回时限': '已過撤回時限',
+  '已接听': '已接聽',
+  '已拒绝': '已拒絕',
+  '已同意': '已同意',
+  '引用': '引用',
+  '引用失败': '引用失敗',
+  '语音': '[語音]',
+  '语音通话': '語音通話',
+  '重新编辑': '重新編輯',
+  '重新发送': '重新發送',
+  '转发': '轉發',
+  '翻译': '翻譯',
+  '转文字': '轉文字',
+  '隐藏': '隱藏',
+  '转发给': '轉發給',
+  '自定义': '[自定義消息]',
+  '自定义消息': '自定義消息',
+  '腾讯云 IM': '騰訊雲 IM',
+  '空': '空',
+  '文本包含本地审核拦截词': '文本包含本地審核攔截詞',
+  '按住说话': '按住說話',
+  '抬起发送': '抬起發送',
+  '抬起取消': '抬起取消',
+  '正在录音': '正在錄音',
+  '继续上滑可取消': '繼續上滑可取消',
+  '松开手指 取消发送': '松開手指 取消發送',
+  '此机型暂不支持复制功能': '此機型暫不支持複製功能',
+  '请开通翻译功能': '請開通翻譯功能',
+  '请开通语音转文字功能': '請開通語音轉文字功能',
+  '翻译中': '翻譯中',
+  '转换中': '轉換中',
+  '由IM提供翻译支持': '由IM提供翻譯支持',
+  '所有人': '所有人',
+  '已达到表情回应上限数量': '已達到表情回應上限數量',
+  '等': '等',
+  '人': '人',
+  '返回': '返回',
+  '关闭': '關閉',
+  '多选': '多選',
+  '合并转发': '合併轉發',
+  '逐条转发': '逐條轉發',
+  '未选择消息': '未選擇消息',
+  '引用内容已撤回': '引用內容已撤回',
+  '[草稿]': '[草稿]',
+  '[消息]': '[消息]',
+  '[文本]': '[文本]',
+  '[自定义消息]': '[自定義消息]',
+  '[图片]': '[圖片]',
+  '[音频]': '[音頻]',
+  '[语音]': '[語音]',
+  '[视频]': '[視頻]',
+  '[文件]': '[文件]',
+  '[位置]': '[地理位置]',
+  '[地理位置]': '[地理位置]',
+  '[动画表情]': '[動畫表情]',
+  '[群提示]': '[群提示]',
+  '[群提示消息]': '[群提示消息]',
+  '[聊天记录]': '[聊天記錄]',
+  '[机器人自定义消息]': '[機器人自訂訊息]',
+  '群聊的聊天记录': '群聊的聊天記錄',
+  '和': '和',
+  '的聊天记录': '的聊天記錄',
+  '请升级IMSDK到v2.10.1或更高版本查看此消息': '請升級IMSDK到v2.10.1或更高版本查看此消息',
+  '您已被管理员移出群聊': '您已被管理員移出群聊',
+  '该群聊已被解散': '該群聊已被解散',
+  '您已退出该群聊': '您已退出該群聊',
+  '您已被禁止聊天': '您已被禁止聊天',
+};
+
+export default TUIChat;
diff --git a/txim/src/TUIKit/locales/zh_tw/TUIContact.ts b/txim/src/TUIKit/locales/zh_tw/TUIContact.ts
new file mode 100644
index 00000000..8afff559
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/TUIContact.ts
@@ -0,0 +1,66 @@
+const TUIContact = {
+  "群聊通知": "群聊通知",
+  "系统通知": "系統通知",
+  "我的群聊": "我的群聊",
+  "输入ID": "請輸入用戶/群聊 ID，回車搜索",
+  "群名称": "群名稱",
+  "群ID": "群ID",
+  "加入群聊": "加入群聊",
+  "解散群聊": "解散群聊",
+  "退出群聊": "退出群聊",
+  "进入群聊": "進入群聊",
+  "群类型": "群類型",
+  "请填写验证信息": "請填寫驗證信息",
+  "申请加入": "申請加入",
+  "已申请": "已申請",
+  "接受": "接受",
+  "拒绝": "拒絕",
+  "已处理": "已處理",
+  "添加群聊": "添加群聊",
+  "已加入": "已加入",
+  "该群组不存在": "該群組不存在",
+  "加群": "加群",
+  "我的好友": "我的好友",
+  "发送消息": "發送消息",
+  "个性签名": "個性簽名",
+  "等待管理员同意": "申請成功，等待管理員同意入群申請",
+  "加群成功": "加群成功",
+  "您已是群成员": "您已是群成員",
+  "新的联系人": "新的聯繫人",
+  "黑名单": "黑名單",
+  "无搜索结果": "無搜索結果",
+  "客服号": "客服號",
+  "ID": "ID",
+  "联系人": "聯繫人",
+  "群聊": "群聊",
+  "添加好友/群聊": "添加好友/群聊",
+  "备注名": "備註名",
+  "加入黑名单": "加入黑名單",
+  "删除好友": "刪除好友",
+  "等待验证": "等待驗證",
+  "验证信息": "驗證信息",
+  "发送申请": "發送申請",
+  "加入直播群": "加入直播群",
+  "同意": "同意",
+  "删除好友成功": "刪除好友成功",
+  "删除好友失败": "刪除好友失敗",
+  "申请已发送": "申請已發送",
+  "申请发送失败": "申請發送失敗",
+  "进入会话失败": "進入會話失敗",
+  "添加好友成功": "添加好友成功",
+  "同意好友申请失败": "同意好友申請失敗",
+  "拒绝成功": "拒絕成功",
+  "拒绝好友申请失败": "拒絕好友申請失敗",
+  "解散群聊成功": "解散群聊成功",
+  "解散群聊失败": "解散群聊失敗",
+  "退出群组成功": "退出群組成功",
+  "退出群组失败": "退出群組失敗",
+  "申请入群失败": "申請入群失敗",
+  "加入黑名单失败": "加入黑名單失敗",
+  "移除黑名单失败": "移除黑名單失敗",
+  "修改备注失败: 备注长度不得超过 96 字节": "修改備註失敗: 備註長度不得超過 96 字節",
+  "修改备注成功": "修改備註成功",
+  "修改备注失败": "修改備註失敗",
+}
+
+export default TUIContact;
diff --git a/txim/src/TUIKit/locales/zh_tw/TUIConversation.ts b/txim/src/TUIKit/locales/zh_tw/TUIConversation.ts
new file mode 100644
index 00000000..d508cde9
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/TUIConversation.ts
@@ -0,0 +1,24 @@
+const TUIConversation = {
+  "发起会话": "發起會話",
+  "发起单聊": "發起單聊",
+  "发起群聊": "發起群聊",
+  "请输入userID": "請輸入userID",
+  "删除会话": "刪除會話",
+  "删除后，将清空该聊天的消息记录": "刪除後，將清空該聊天的消息記錄",
+  "删除后，将清空该群聊的消息记录": "刪除後，將清空該群聊的消息記錄",
+  "置顶会话": "置頂會話",
+  "取消置顶": "取消置頂",
+  "消息免打扰": "消息免打擾",
+  "取消免打扰": "取消免打擾",
+  "系统通知": "系統通知",
+  "有人@我": "有人@我",
+  "@所有人": "@所有人",
+  "条": "條",
+  "我": "我",
+  "网络异常，请您检查网络设置": "網絡異常，請您檢查網絡設置",
+  "您已被群管理员移出群聊": "您已被群管理員移出群聊",
+  "该群聊已被解散": "該群聊已被解散",
+  "您已退出该群聊": "您已退出該群聊",
+}
+
+export default TUIConversation;
diff --git a/txim/src/TUIKit/locales/zh_tw/TUIGroup.ts b/txim/src/TUIKit/locales/zh_tw/TUIGroup.ts
new file mode 100644
index 00000000..1db14eda
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/TUIGroup.ts
@@ -0,0 +1,87 @@
+const TUIGroup = {
+  "输入groupID搜索": "輸入groupID搜索",
+  "群名称": "群名稱",
+  "群ID": "群ID",
+  "加入群聊": "加入群聊",
+  "解散群聊": "解散群聊",
+  "退出群聊": "退出群聊",
+  "群类型": "群類型",
+  "请填写验证信息": "請填寫驗證信息",
+  "申请加入": "申請加入",
+  "已申请": "已申請",
+  "群公告": "群公告",
+  "群成员": "群成員",
+  "群管理": "群管理",
+  "好友工作群": "好友工作群",
+  "陌生人社交群": "陌生人社交群",
+  "临时会议群": "臨時會議群",
+  "直播群": "直播群",
+  "社群": "社群",
+  "自由加入": "自由加入",
+  "需要验证": "需要驗證",
+  "禁止加群": "禁止加群",
+  "人": "人",
+  "群头像": "群頭像",
+  "加群方式": "加群方式",
+  "转让群组": "轉讓群組",
+  "退出群组": "退出群組",
+  "群管理员": "群管理員",
+  "全员禁言": "全員禁言",
+  "全员禁言开启后，只允许群主和管理员发言。": "全員禁言開啟後，只允許群主和管理員發言。",
+  "单独禁言人员": "單獨禁言人員",
+  "删除成员": "刪除成員",
+  "确定从群聊中删除该成员？": "確定從群聊中刪除該成員？",
+  "确定从群聊中删除所选成员？": "確定從群聊中刪除所選成員？",
+  "暂无公告": "暫無公告",
+  "发布": "發布",
+  "编辑": "編輯",
+  "查看更多": "查看更多",
+  "管理员": "管理員",
+  "群主": "群主",
+  "我": "我",
+  "确认": "確認",
+  "添加成员": "添加成員",
+  "新增管理员": "新增管理員",
+  "移除管理员": "移除管理員",
+  "新增禁言用户": "新增禁言用戶",
+  "移除禁言用户": "移除禁言用戶",
+  "修改群聊名称": "修改群聊名稱",
+  "修改群聊名称后，将在群内通知其他成员": "修改群聊名稱後，將在群內通知其他成員",
+  "仅限中文、字母、数字和下划线，2-20个字": "僅限中文、字母、數字和下劃線，2-20個字",
+  "请先注册 TUIGroup 模块": "請先註冊 TUIGroup 模塊",
+  "该用户不存在": "該用戶不存在",
+  "该用户不在群组内": "該用戶不在群組內",
+  "添加群聊": "添加群聊",
+  "该群组不存在": "該群組不存在",
+  "创建群聊，请注册 TUIGroup 模块": "創建群聊，請註冊 TUIGroup 模塊",
+  "创建成功": "創建成功",
+  "发起多人会话（群聊）": "發起多人會話（群聊）",
+  "选填": "選填",
+  "取消": "取消",
+  "创建": "創建",
+  "类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见": "類似普通微信群，創建後僅支持已在群內的好友邀請加群，且無需被邀請方同意或群主審批。詳見",
+  "类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见": "類似 QQ 群，創建後群主可以指定群管理員，用戶搜索群 ID 發起加群申請後，需要群主或管理員審批通過才能入群。詳見",
+  "创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见": "創建後可以隨意進出，且支持查看入群前消息；適合用於音視頻會議場景、在線教育場景等與實時音視頻產品結合的場景。詳見",
+  "创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见": "創建後可以隨意進出，沒有群成員數量上限，但不支持歷史消息存儲；適合與直播產品結合，用於彈幕聊天場景。詳見",
+  "创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见": "創建後可以隨意進出，最多支持100000人，支持歷史消息存儲，用戶搜索群 ID 發起加群申請後，無需管理員審批即可進群。詳見",
+  "产品文档": "產品文檔",
+  "设置群名称": "設置群名稱",
+  "请输入群名称": "請輸入群名稱",
+  "设置群ID": "設置群ID",
+  "请输入群ID": "請輸入群ID",
+  "选择群类型": "選擇群類型",
+  "陌生人社交群（Public）": "陌生人社交群（Public）",
+  "临时会议群（Meeting）": "臨時會議群（Meeting）",
+  "好友工作群（Work）": "好友工作群（Work）",
+  "直播群（AVChatroom）": "直播群（AVChatroom）",
+  "社群（Community）": "社群（Community）",
+  "群组创建成功": "群組創建成功",
+  "群组解散成功": "群組解散成功",
+  "禁言设置成功": "禁言設置成功",
+  "取消禁言成功": "取消禁言成功",
+  "群名称不能为空": "群名稱不能為空",
+  "群名称修改成功": "群名稱修改成功",
+  "群公告字数超出限制，最大长度为150": "群公告字數超出限制，最大長度為150",
+};
+
+export default TUIGroup;
diff --git a/txim/src/TUIKit/locales/zh_tw/TUISearch.ts b/txim/src/TUIKit/locales/zh_tw/TUISearch.ts
new file mode 100644
index 00000000..243259de
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/TUISearch.ts
@@ -0,0 +1,41 @@
+const TUISearch = {
+  搜索: "搜索",
+  全部: "全部",
+  联系人: "聯繫人",
+  群聊: "群聊",
+  聊天记录: "聊天記錄",
+  文本: "文本",
+  文件: "文件",
+  "图片/视频": "圖片/視頻",
+  其他: "其他",
+  选择时间: "選擇時間",
+  今天: "今天",
+  近三天: "近三天",
+  近七天: "近七天",
+  查看更多: "查看更多",
+  条相关: "條相關",
+  条与: "條與",
+  相关的: "相關的",
+  进入聊天: "進入聊天",
+  定位到聊天位置: "定位到聊天位置",
+  搜索会话内容: "搜索會話內容",
+  查看更多历史记录: "查看更多歷史記錄",
+  暂无搜索结果: "暫無搜索結果",
+  结果: "結果",
+  取消: "取消",
+  "[文本]": "[文本]",
+  "[图片]": "[圖片]",
+  "[语音]": "[語音]",
+  "[视频]": "[視頻]",
+  "[文件]": "[文件]",
+  "[自定义消息]": "[自定義消息]",
+  "[系统消息]": "[系統消息]",
+  "[合并消息]": "[合併消息]",
+  "[位置消息]": "[位置消息]",
+  "消息云端搜索失败：": "消息雲端搜索失敗：",
+  "查找联系人失败：": "查找聯繫人失敗：",
+  "查找群聊失败：": "查找群聊失敗：",
+  "进入会话失败": "進入會話失敗",
+};
+
+export default TUISearch;
diff --git a/txim/src/TUIKit/locales/zh_tw/component.ts b/txim/src/TUIKit/locales/zh_tw/component.ts
new file mode 100644
index 00000000..749220b3
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/component.ts
@@ -0,0 +1,21 @@
+const components = {
+  "取消": "取消",
+  "完成": "完成",
+  "已选中": "已選中",
+  "人": "人",
+  "保存": "保存",
+  "请输入userID": "請輸入userID",
+  "请输入groupID": "請輸入groupID",
+  "确定": "確定",
+  "全选": "全選",
+  "已在群聊中": "已在群聊中",
+  "查看更多": "查看更多",
+  "图片 url 不存在": "圖片 url 不存在",
+  "已取消": "已取消",
+  "获取权限失败": "獲取權限失敗",
+  "已保存至相册": "已保存至相冊",
+  "图片下载失败": "圖片下載失敗",
+  "暂不支持下载此类型图片": "暫不支持下載此類型圖片",
+};
+
+export default components;
diff --git a/txim/src/TUIKit/locales/zh_tw/emoji.ts b/txim/src/TUIKit/locales/zh_tw/emoji.ts
new file mode 100644
index 00000000..333168b9
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/emoji.ts
@@ -0,0 +1,2 @@
+import { default as Emoji } from '../../components/TUIChat/emoji-config/locales/zh_tw';
+export default Emoji;
diff --git a/txim/src/TUIKit/locales/zh_tw/evaluate.ts b/txim/src/TUIKit/locales/zh_tw/evaluate.ts
new file mode 100644
index 00000000..616bfdf9
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/evaluate.ts
@@ -0,0 +1,11 @@
+const Evaluate = {
+  "请对本次服务进行评价": "請對本次服務進行評價",
+  "提交评价": "提交評價",
+  "服务评价工具": "服務評價工具",
+  "使用": "使用",
+  "自定义消息": "自定義消息",
+  "搭建": "搭建",
+  "星": "星"
+}
+
+export default Evaluate;
diff --git a/txim/src/TUIKit/locales/zh_tw/index.ts b/txim/src/TUIKit/locales/zh_tw/index.ts
new file mode 100644
index 00000000..d2a2f45d
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/index.ts
@@ -0,0 +1,41 @@
+import TUIChat from './TUIChat';
+import TUIConversation from './TUIConversation';
+import TUIGroup from './TUIGroup';
+import TUIContact from './TUIContact';
+import TUISearch from './TUISearch';
+
+import message from './message';
+import component from './component';
+import time from './time';
+
+import Words from './words';
+import Evaluate from './evaluate';
+import Emoji from './emoji';
+
+const messages = {
+  zh_tw: {
+    取消: '取消',
+    发送: '發送',
+    系统通知: '系統通知',
+    关闭: '關閉',
+    确定: '確定',
+    开始时间: '開始時間',
+    结束时间: '結束時間',
+    消息: '消息',
+    通讯录: '通訊錄',
+    欢迎使用腾讯云即时通信IM: '歡迎使用騰訊雲即時通信IM',
+    TUIChat,
+    TUIConversation,
+    TUIGroup,
+    TUIContact,
+    message,
+    component,
+    time,
+    Evaluate,
+    Words,
+    TUISearch,
+    Emoji,
+  },
+};
+
+export default messages;
diff --git a/txim/src/TUIKit/locales/zh_tw/message.ts b/txim/src/TUIKit/locales/zh_tw/message.ts
new file mode 100644
index 00000000..594572c0
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/message.ts
@@ -0,0 +1,62 @@
+const message = {
+  "tip": {
+    "群成员": "群成員",
+    "加入群组": "加入群組",
+    "退出群组": "退出群組",
+    "被": "被",
+    "踢出群组": "踢出群組",
+    "成为管理员": "成為管理員",
+    "被撤销管理员": "被撤銷管理員",
+    "被禁言": "被禁言",
+    "被取消禁言": "被取消禁言",
+    "群提示消息": "群提示消息",
+    "管理员": "管理員",
+    "开启全员禁言": "開啟全員禁言",
+    "取消全员禁言": "取消全員禁言",
+    "成为新的群主": "成為新的群主",
+    "修改群名为": "修改群名為",
+    "发布新公告": "發布新公告",
+    "把群公告修改为": "把群公告修改為",
+    "申请加入群组": "申請加入群組",
+    "成功加入群组": "成功加入群組",
+    "被拒绝": "被拒絕",
+    "你被管理员": "你被管理員",
+    "群": "群",
+    "解散": "解散",
+    "创建群": "創建群",
+    "邀请你加群": "邀請你加群",
+    "你退出群组": "你退出群組",
+    "你被": "你被",
+    "设置为群": "設置為群",
+    "的管理员": "的管理員",
+    "撤销群": "撤銷群",
+    "的管理员身份": "的管理員身份",
+    "同意加群": "同意加群",
+    "拒接加群": "拒接加群",
+    "自定义群系统通知": "自定義群系統通知"
+  },
+  "custom": {
+    "自定义消息": "自定義消息",
+    "通话时长": "通話時長",
+    "通话结束": "通話結束",
+    "切换语音通话": "切換語音通話",
+    "切换视频通话": "切換視頻通話",
+    "发起通话": "發起通話",
+    "取消通话": "取消通話",
+    "已接听": "已接聽",
+    "拒绝通话": "拒絕通話",
+    "无应答": "無應答",
+    "对本次服务评价": "對本次服務評價",
+    "查看详情>>": "查看詳情>>",
+    "已取消": "已取消",
+    "对方已取消": "對方已取消",
+    "已拒绝": "已拒絕",
+    "对方已拒绝": "對方已拒絕",
+    "对方忙线中": "對方忙線中",
+    "忙线未接听": "忙線未接聽",
+    "对方无应答": "對方無應答",
+    "超时无应答": "超時無應答",
+  }
+}
+
+export default message;
diff --git a/txim/src/TUIKit/locales/zh_tw/time.ts b/txim/src/TUIKit/locales/zh_tw/time.ts
new file mode 100644
index 00000000..79f92c0a
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/time.ts
@@ -0,0 +1,37 @@
+const time = {
+  "周": "週",
+  "天": "天",
+  "小时": "小時",
+  "分钟": "分鐘",
+  "刚刚": "剛剛",
+  "前": "前",
+  "昨天": "昨天",
+  "星期一": "星期一",
+  "星期二": "星期二",
+  "星期三": "星期三",
+  "星期四": "星期四",
+  "星期五": "星期五",
+  "星期六": "星期六",
+  "星期日": "星期日",
+  "一月": "一月",
+  "二月": "二月",
+  "三月": "三月",
+  "四月": "四月",
+  "五月": "五月",
+  "六月": "六月",
+  "七月": "七月",
+  "八月": "八月",
+  "九月": "九月",
+  "十月": "十月",
+  "十一月": "十一月",
+  "十二月": "十二月",
+  "一": "一",
+  "二": "二",
+  "三": "三",
+  "四": "四",
+  "五": "五",
+  "六": "六",
+  "日": "日",
+}
+
+export default time;
diff --git a/txim/src/TUIKit/locales/zh_tw/translate.ts b/txim/src/TUIKit/locales/zh_tw/translate.ts
new file mode 100644
index 00000000..e66baaca
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/translate.ts
@@ -0,0 +1,164 @@
+const translate = {
+  "TUIKit-TUIChat-01": "撤回消息",
+  "TUIKit-TUIChat-02": "刪除消息",
+  "TUIKit-TUIChat-03": "重新發送",
+  "TUIKit-TUIChat-04": "轉發",
+  "TUIKit-TUIChat-05": "打開",
+  "TUIKit-TUIChat-06": "已讀",
+  "TUIKit-TUIChat-07": "未讀",
+  "TUIKit-TUIChat-08": "您",
+  "TUIKit-TUIChat-09": "撤回了一條消息",
+  "TUIKit-TUIChat-10": "重新編輯",
+  "TUIKit-TUIChat-11": "我",
+  "TUIKit-TUIChat-12": "查看更多",
+  "TUIKit-TUIChat-13": "轉發給",
+  "TUIKit-TUIChat-14": "請輸入消息",
+  "TUIKit-TUIChat-15": "描述",
+  "TUIKit-TUIChat-16": "經度",
+  "TUIKit-TUIChat-17": "緯度",
+  "TUIKit-TUIChat-18": "管理員開啟全員禁言",
+  "TUIKit-TUIChat-19": "您已被管理員禁言",
+  "TUIKit-TUIChat-20": "按Enter發送，Ctrl+Enter換行",
+  "TUIKit-TUIChat-mange-01": "群公告",
+  "TUIKit-TUIChat-mange-02": "群成員",
+  "TUIKit-TUIChat-mange-03": "群管理",
+  "TUIKit-TUIChat-mange-04": "好友工作群",
+  "TUIKit-TUIChat-mange-05": "陌生人社交群",
+  "TUIKit-TUIChat-mange-06": "臨時會議群",
+  "TUIKit-TUIChat-mange-07": "直播群",
+  "TUIKit-TUIChat-mange-08": "自由加入",
+  "TUIKit-TUIChat-mange-09": "需要驗證",
+  "TUIKit-TUIChat-mange-10": "禁止加群",
+  "TUIKit-TUIChat-mange-11": "人",
+  "TUIKit-TUIChat-mange-12": "群ID",
+  "TUIKit-TUIChat-mange-13": "群頭像",
+  "TUIKit-TUIChat-mange-14": "群類型",
+  "TUIKit-TUIChat-mange-15": "加群方式",
+  "TUIKit-TUIChat-mange-16": "轉讓群組",
+  "TUIKit-TUIChat-mange-17": "解散群聊",
+  "TUIKit-TUIChat-mange-18": "退出群組",
+  "TUIKit-TUIChat-mange-19": "群管理員",
+  "TUIKit-TUIChat-mange-20": "全員禁言",
+  "TUIKit-TUIChat-mange-21": "全員禁言開啟後，只允許群主和管理員發言。",
+  "TUIKit-TUIChat-mange-22": "單獨禁言人員",
+  "TUIKit-TUIChat-mange-23": "刪除成員",
+  "TUIKit-TUIChat-mange-24": "確定從群聊中刪除該成員？",
+  "TUIKit-TUIChat-mange-25": "確定從群聊中刪除所選成員？",
+  "TUIKit-TUIChat-mange-26": "暫無公告",
+  "TUIKit-TUIChat-mange-27": "發布",
+  "TUIKit-TUIChat-mange-28": "編輯",
+  "TUIKit-TUIChat-mange-29": "群名稱",
+  "TUIKit-TUIChat-mange-30": "查看更多",
+  "TUIKit-TUIChat-mange-31": "管理員",
+  "TUIKit-TUIChat-mange-32": "群主",
+  "TUIKit-TUIChat-mange-33": "我",
+  "TUIKit-TUIChat-mange-34": "添加成員",
+  "TUIKit-TUIChat-mange-35": "新增管理員",
+  "TUIKit-TUIChat-mange-36": "移除管理員",
+  "TUIKit-TUIChat-mange-37": "新增禁言用戶",
+  "TUIKit-TUIChat-mange-38": "移除禁言用戶",
+  "TUIKit-TUIContact-01": "群聊通知",
+  "TUIKit-TUIContact-02": "系統通知",
+  "TUIKit-TUIContact-03": "我的群聊",
+  "TUIKit-TUIContact-04": "輸入groupID搜索",
+  "TUIKit-TUIContact-05": "群名稱",
+  "TUIKit-TUIContact-06": "群ID",
+  "TUIKit-TUIContact-07": "加入群聊",
+  "TUIKit-TUIContact-08": "解散群聊",
+  "TUIKit-TUIContact-09": "退出群聊",
+  "TUIKit-TUIContact-10": "群類型",
+  "TUIKit-TUIContact-11": "請填寫驗證信息",
+  "TUIKit-TUIContact-12": "申請加入",
+  "TUIKit-TUIContact-13": "已申請",
+  "TUIKit-TUIContact-14": "接受",
+  "TUIKit-TUIContact-15": "拒絕",
+  "TUIKit-TUIContact-16": "已處理",
+  "TUIKit-TUIConversation-01": "發起單人/多人會話",
+  "TUIKit-TUIConversation-02": "請輸入userID",
+  "TUIKit-TUIConversation-03": "刪除會話",
+  "TUIKit-TUIConversation-04": "系統通知",
+  "TUIKit-TUIConversation-05": "發起多人會話（群聊）",
+  "TUIKit-TUIConversation-06": "群頭像",
+  "TUIKit-TUIConversation-07": "群名稱",
+  "TUIKit-TUIConversation-08": "群ID",
+  "TUIKit-TUIConversation-09": "群類型",
+  "TUIKit-TUIConversation-10": "選填",
+  "TUIKit-TUIConversation-11": "取消",
+  "TUIKit-TUIConversation-12": "創建",
+  "TUIKit-TUIConversation-13": "類似普通微信群，創建後僅支持已在群內的好友邀請加群，且無需被邀請方同意或群主審批。詳見產品文檔",
+  "TUIKit-TUIConversation-14": "類似 QQ 群，創建後群主可以指定群管理員，用戶搜索群 ID 發起加群申請後，需要群主或管理員審批通過才能入群。詳見產品文檔",
+  "TUIKit-TUIConversation-15": "創建後可以隨意進出，且支持查看入群前消息；適合用於音視頻會議場景、在線教育場景等與實時音視頻產品結合的場景。詳見產品文檔",
+  "TUIKit-TUIConversation-16": "創建後可以隨意進出，沒有群成員數量上限，但不支持歷史消息存儲；適合與直播產品結合，用於彈幕聊天場景。詳見產品文檔",
+  "TUIKit-TUIProfile-01": "資料設置",
+  "TUIKit-TUIProfile-02": "頭像",
+  "TUIKit-TUIProfile-03": "昵稱",
+  "TUIKit-TUIProfile-04": "賬號",
+  "TUIKit-TUIProfile-05": "個性簽名",
+  "TUIKit-TUIProfile-06": "性別",
+  "TUIKit-TUIProfile-07": "男",
+  "TUIKit-TUIProfile-08": "女",
+  "TUIKit-TUIProfile-09": "不顯示",
+  "TUIKit-TUIProfile-10": "出生年月",
+  "TUIKit-TUIProfile-11": "取消",
+  "TUIKit-TUIProfile-12": "保存",
+  "TUIKit-time-01": "週",
+  "TUIKit-time-02": "天",
+  "TUIKit-time-03": "小時",
+  "TUIKit-time-04": "分鐘",
+  "TUIKit-time-05": "剛剛",
+  "TUIKit-time-06": "前",
+  "TUIKit-message-tip-01": "群成員",
+  "TUIKit-message-tip-02": "加入群組",
+  "TUIKit-message-tip-03": "退出群組",
+  "TUIKit-message-tip-04": "被",
+  "TUIKit-message-tip-05": "踢出群組",
+  "TUIKit-message-tip-06": "成為管理員",
+  "TUIKit-message-tip-07": "被撤銷管理員",
+  "TUIKit-message-tip-08": "被禁言",
+  "TUIKit-message-tip-09": "被取消禁言",
+  "TUIKit-message-tip-10": "群提示消息",
+  "TUIKit-message-tip-11": "管理員",
+  "TUIKit-message-tip-12": "開啟全員禁言",
+  "TUIKit-message-tip-13": "取消全員禁言",
+  "TUIKit-message-tip-14": "成為新的群主",
+  "TUIKit-message-tip-15": "修改群名為",
+  "TUIKit-message-tip-16": "發布新公告",
+  "TUIKit-message-tip-17": "申請加入群組",
+  "TUIKit-message-tip-18": "成功加入群組",
+  "TUIKit-message-tip-19": "被拒絕",
+  "TUIKit-message-tip-20": "你被管理員",
+  "TUIKit-message-tip-21": "群",
+  "TUIKit-message-tip-22": "解散",
+  "TUIKit-message-tip-23": "創建群",
+  "TUIKit-message-tip-24": "邀請你加群",
+  "TUIKit-message-tip-25": "你退出群組",
+  "TUIKit-message-tip-26": "你被",
+  "TUIKit-message-tip-27": "設置為群",
+  "TUIKit-message-tip-28": "的管理員",
+  "TUIKit-message-tip-29": "撤銷群",
+  "TUIKit-message-tip-30": "的管理員身份",
+  "TUIKit-message-tip-31": "同意加群",
+  "TUIKit-message-tip-32": "拒接加群",
+  "TUIKit-message-tip-33": "自定義群系統通知",
+  "TUIKit-message-custom-01": "自定義消息",
+  "TUIKit-message-custom-02": "通話時長",
+  "TUIKit-message-custom-03": "結束群聊",
+  "TUIKit-message-custom-04": "切換語音通話",
+  "TUIKit-message-custom-05": "切換視頻通話",
+  "TUIKit-message-custom-06": "發起通話",
+  "TUIKit-message-custom-07": "取消通話",
+  "TUIKit-message-custom-08": "已接聽",
+  "TUIKit-message-custom-09": "拒絕通話",
+  "TUIKit-message-custom-10": "無應答",
+  "TUIKit-message-custom-11": "對本次服務評價",
+  "TUIKit-message-custom-12": "查看詳情>>",
+  "TUIKit-component-01": "取消",
+  "TUIKit-component-02": "完成",
+  "TUIKit-component-03": "已選中",
+  "TUIKit-component-04": "人",
+  "TUIKit-component-05": "保存",
+  "TUIKit-component-06": "發送",
+  "TUIKit-component-07": "系統通知",
+}
+
+export default translate;
diff --git a/txim/src/TUIKit/locales/zh_tw/words.ts b/txim/src/TUIKit/locales/zh_tw/words.ts
new file mode 100644
index 00000000..78e69e5a
--- /dev/null
+++ b/txim/src/TUIKit/locales/zh_tw/words.ts
@@ -0,0 +1,14 @@
+const Words = {
+  "常用语-快捷回复工具": "常用語-快捷回覆工具",
+  "在吗？在吗？在吗？重要的话说三遍。": "在嗎？在嗎？在嗎？重要的話說三遍。",
+  "好久没聊天了，快来和我说说话～": "好久沒聊天了，快來和我說說話～",
+  "好的，就这么说定了。": "好的，就這麼說定了。",
+  "感恩的心，感谢有你。": "感恩的心，感謝有你。",
+  "糟糕！是心动的感觉！": "糟糕！是心動的感覺！",
+  "心疼地抱抱自己，我太难了！": "心疼地抱抱自己，我太難了！",
+  "没关系，别在意，事情过去就过去了。": "沒關係，別在意，事情過去就過去了。",
+  "早上好，今天也是让人期待的一天呢！": "早上好，今天也是讓人期待的一天呢！",
+  "熬夜有什么用，又没人陪你聊天，早点休息吧。": "熬夜有什麼用，又沒人陪你聊天，早點休息吧。"
+}
+
+export default Words;
diff --git a/txim/src/TUIKit/plugins/extension-server/callkit.ts b/txim/src/TUIKit/plugins/extension-server/callkit.ts
new file mode 100644
index 00000000..a5d4827f
--- /dev/null
+++ b/txim/src/TUIKit/plugins/extension-server/callkit.ts
@@ -0,0 +1 @@
+export default class CallkitPluginServer {}
diff --git a/txim/src/TUIKit/plugins/plugin-components/index.ts b/txim/src/TUIKit/plugins/plugin-components/index.ts
new file mode 100644
index 00000000..5d89b58f
--- /dev/null
+++ b/txim/src/TUIKit/plugins/plugin-components/index.ts
@@ -0,0 +1,37 @@
+import TUIChatEngine, { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { isCustomerServicePluginMessage } from './message-customer/index';
+import { JSONToObject } from '../../utils/type-check';
+
+export function isCallMessage(message: IMessageModel): boolean {
+  const payloadData = JSONToObject(message?.payload?.data);
+  if (payloadData?.businessID === 1 && payloadData?.data) {
+    const payloadDataData = JSONToObject(payloadData.data);
+    if (payloadDataData.businessID === 'av_call') {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function isRoomSignalingMessage(message: IMessageModel): boolean {
+  const payloadData = JSONToObject(message?.payload?.data);
+  return (
+    payloadData?.businessID === 'ROOM_INVITE_ACTION'
+    || payloadData?.businessID === 'tuikit_engine_room'
+  );
+}
+
+export function isRoomCardMessage(message: IMessageModel): boolean {
+  const payloadData = JSONToObject(message?.payload?.data);
+  return payloadData?.businessID === 'group_room_message';
+}
+
+export function isPluginMessage(message: IMessageModel): boolean {
+  return (
+    message.type === TUIChatEngine.TYPES.MSG_CUSTOM
+    && (isCallMessage(message)
+    || isCustomerServicePluginMessage(message as any)
+    || isRoomCardMessage(message)
+    || isRoomSignalingMessage(message))
+  );
+}
diff --git a/txim/src/TUIKit/plugins/plugin-components/message-call/message-call-c2c.vue b/txim/src/TUIKit/plugins/plugin-components/message-call/message-call-c2c.vue
new file mode 100644
index 00000000..beccd1fb
--- /dev/null
+++ b/txim/src/TUIKit/plugins/plugin-components/message-call/message-call-c2c.vue
@@ -0,0 +1,116 @@
+<template>
+  <div
+    v-if="isCallMessage && conversationType === TYPES.CONV_C2C"
+    class="call"
+    :class="['call-' + conversationType, message.flow === 'out' && 'call-reverse']"
+    @click="callAgain"
+  >
+    <div :class="['icon', message.flow === 'out' && callInfo.type === 2 && 'icon-reverse']">
+      <Icon :file="callInfo.icon" />
+    </div>
+    <span class="call-content">{{ custom }}</span>
+  </div>
+</template>
+<script setup lang="ts">
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { computed, ref } from '../../../adapter-vue';
+import { JSONToObject } from '../../../utils/index';
+import Icon from '../../../components/common/Icon.vue';
+import callVideoSVG from '../../../assets/icon/call-video.svg';
+import callVoiceSVG from '../../../assets/icon/call-voice.svg';
+import OfflinePushInfoManager, { PUSH_SCENE } from '../../../components/TUIChat/offlinePushInfoManager/index';
+const props = defineProps({
+  message: {
+    type: Object,
+    default: () => ({}),
+  },
+  signalingInfo: {
+    type: Object,
+    default: () => ({}),
+  },
+  customContent: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const TYPES = ref(TUIChatEngine.TYPES);
+const isCallMessage = computed(() => props.signalingInfo != null);
+const callInfo = computed((): { type: number; icon: string } => {
+  const callType = JSONToObject(props.signalingInfo?.data)?.call_type;
+  switch (callType) {
+    case 1:
+      return {
+        type: 1,
+        icon: callVoiceSVG,
+      };
+    case 2:
+      return {
+        type: 2,
+        icon: callVideoSVG,
+      };
+    default:
+      break;
+  }
+  return {
+    type: 0,
+    icon: '',
+  };
+});
+const conversationType = computed(() => props.message?.conversationType);
+const custom = computed(() => props.customContent?.custom);
+
+const callAgain = () => {
+  if (conversationType.value === TUIChatEngine.TYPES.CONV_C2C) {
+    const userID = props.message?.flow === 'out' ? props.message?.to : props.message?.from;
+    TUICore.callService({
+      serviceName: TUIConstants.TUICalling.SERVICE.NAME,
+      method: TUIConstants.TUICalling.SERVICE.METHOD.START_CALL,
+      params: {
+        userIDList: [userID],
+        type: callInfo?.value?.type,
+        callParams: {
+          offlinePushInfo: OfflinePushInfoManager.getOfflinePushInfo(PUSH_SCENE.CALL),
+        },
+      },
+    });
+  }
+};
+</script>
+<style scoped lang="scss">
+.call {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  &-C2C {
+    cursor: pointer;
+  }
+
+  &-GROUP {
+    cursor: default;
+  }
+
+  &-content {
+    padding-left: 5px;
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  &-reverse {
+    flex-direction: row-reverse;
+
+    .icon-reverse {
+      transform: rotate(180deg);
+    }
+
+    .call-content {
+      padding-right: 5px;
+      padding-left: 0;
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/plugins/plugin-components/message-call/message-call-group.vue b/txim/src/TUIKit/plugins/plugin-components/message-call/message-call-group.vue
new file mode 100644
index 00000000..b7f9ff55
--- /dev/null
+++ b/txim/src/TUIKit/plugins/plugin-components/message-call/message-call-group.vue
@@ -0,0 +1,51 @@
+<template>
+  <div
+    v-if="isCallMessage && conversationType === TYPES.CONV_GROUP"
+    :class="{ 'blink-text': isBlink }"
+  >
+    {{ custom }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from '../../../adapter-vue';
+import TUIChatEngine, { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IProps {
+  message: IMessageModel;
+  signalingInfo: any;
+  customContent: any;
+  blinkMessageIDList?: string[];
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({}) as IMessageModel,
+  signalingInfo: () => ({}),
+  customContent: () => ({}),
+  blinkMessageIDList: () => [],
+});
+
+const TYPES = TUIChatEngine.TYPES;
+const isCallMessage = computed(() => !!props.signalingInfo);
+const conversationType = computed(() => props.message?.conversationType);
+const custom = computed(() => props.customContent?.custom);
+
+const isBlink = computed(() => {
+  if (props.message?.ID) {
+    return props.blinkMessageIDList?.includes(props.message.ID);
+  }
+  return false;
+});
+</script>
+
+<style scoped lang="scss">
+@keyframes blink-text {
+  50% {
+    color: #ff9c19;
+  }
+}
+
+.blink-text {
+  animation: blinkText 1s linear 3;
+}
+</style>
diff --git a/txim/src/TUIKit/plugins/plugin-components/message-customer/index.ts b/txim/src/TUIKit/plugins/plugin-components/message-customer/index.ts
new file mode 100644
index 00000000..b5e7d025
--- /dev/null
+++ b/txim/src/TUIKit/plugins/plugin-components/message-customer/index.ts
@@ -0,0 +1,5 @@
+import {
+  isCustomerServicePluginMessage,
+  isMessageInvisible as isCustomServiceMessageInvisible,
+} from '@tencentcloud/tui-customer-service-plugin';
+export { isCustomerServicePluginMessage, isCustomServiceMessageInvisible };
diff --git a/txim/src/TUIKit/plugins/plugin-components/message-customer/message-customer-service.vue b/txim/src/TUIKit/plugins/plugin-components/message-customer/message-customer-service.vue
new file mode 100644
index 00000000..c474118e
--- /dev/null
+++ b/txim/src/TUIKit/plugins/plugin-components/message-customer/message-customer-service.vue
@@ -0,0 +1,16 @@
+<template>
+  <TUICustomerServicePlugin :message="props.message" />
+</template>
+<script setup lang="ts">
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import TUICustomerServicePlugin from '@tencentcloud/tui-customer-service-plugin/index.vue';
+interface IProps {
+  message: IMessageModel;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+</script>
+<style lang="scss" scoped>
+/* stylelint-disable-next-line no-empty-source */
+</style>
diff --git a/txim/src/TUIKit/plugins/plugin-components/message-plugin-layout.vue b/txim/src/TUIKit/plugins/plugin-components/message-plugin-layout.vue
new file mode 100644
index 00000000..fa8dfdee
--- /dev/null
+++ b/txim/src/TUIKit/plugins/plugin-components/message-plugin-layout.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="message-plugin">
+    <!-- The following is displayed in the form of messageTip -->
+    <div
+      v-if="props.showStyle === 'tip'"
+      class="message-plugin-tip"
+    >
+      <slot name="messageTip" />
+    </div>
+    <!-- The following is displayed in the form of messageBubble -->
+    <div
+      v-else-if="props.showStyle === 'bubble'"
+      class="message-plugin-bubble-content"
+      @longpress="handleToggleMessageItem($event, messageModel, true)"
+      @click.prevent.right="handleToggleMessageItem($event, messageModel)"
+      @touchstart="handleH5LongPress($event, messageModel, 'touchstart')"
+      @touchend="handleH5LongPress($event, messageModel, 'touchend')"
+      @mouseover="handleH5LongPress($event, messageModel, 'touchend')"
+    >
+      <MessageBubble
+        :messageItem="messageModel"
+        :content="messageModel.getMessageContent()"
+        :blinkMessageIDList="props.blinkMessageIDList"
+        :classNameList="props.bubbleClassNameList"
+        @resendMessage="resendMessage(messageModel)"
+      >
+        <!-- web message-bubble is a named slot, content area slotName is messageElement -->
+        <template #messageElement>
+          <slot
+            v-if="!isUniFrameWork"
+            name="messageBubble"
+          />
+        </template>
+        <!-- uni-app message-bubble is an anonymous slot, no slotName -->
+        <slot
+          v-if="isUniFrameWork"
+          name="messageBubble"
+        />
+      </MessageBubble>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from '../../adapter-vue';
+import { TUIStore, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import MessageBubble from '../../components/TUIChat/message-list/message-elements/message-bubble.vue';
+import { isUniFrameWork } from '../../utils/env';
+
+interface IProps {
+  message: IMessageModel;
+  showStyle: string;
+  bubbleClassNameList?: string[];
+  blinkMessageIDList?: string[];
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+  showStyle: '',
+  bubbleClassNameList: () => [] as string[],
+  blinkMessageIDList: () => [] as string[],
+});
+
+const emits = defineEmits(['resendMessage', 'handleToggleMessageItem', 'handleH5LongPress']);
+const messageModel = computed(() => TUIStore.getMessageModel(props.message?.ID));
+
+// The following is for external interaction such as messageTool, no special processing is required, do not change
+const resendMessage = (message: IMessageModel) => {
+  emits('resendMessage', message);
+};
+const handleToggleMessageItem = (e: any, message: IMessageModel, isLongpress = false) => {
+  emits('handleToggleMessageItem', e, message, isLongpress);
+};
+const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
+  emits('handleH5LongPress', e, message, type);
+};
+</script>
+
+<style lang="scss" scoped>
+.message-plugin-tip {
+  color: #999;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+  display: flex;
+  place-content: center center;
+  align-items: center;
+  text-align: center;
+  margin: 0 10px 10px;
+}
+
+.message-tip-highlight {
+  animation: highlight 1000ms infinite;
+
+  @keyframes highlight {
+    50% {
+      color: #ff9c19;
+    }
+  }
+
+  @keyframes highlight {
+    50% {
+      color: #ff9c19;
+    }
+  }
+}
+
+:deep(.message-bubble-room) {
+  .message-bubble-main-content {
+    .message-body {
+      .message-body-main {
+        .message-body-content {
+          &.content-in,
+          &.content-out {
+            background-color: transparent;
+            border-radius: 0;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/plugins/plugin-components/message-plugin.vue b/txim/src/TUIKit/plugins/plugin-components/message-plugin.vue
new file mode 100644
index 00000000..5953e47e
--- /dev/null
+++ b/txim/src/TUIKit/plugins/plugin-components/message-plugin.vue
@@ -0,0 +1,106 @@
+<template>
+  <MessagePluginLayout
+    :message="props.message"
+    :showStyle="pluginMessageType.showStyle"
+    :bubbleClassNameList="[pluginMessageType.pluginType === 'room' ? 'message-bubble-room':'']"
+    @resendMessage="resendMessage"
+    @handleToggleMessageItem="handleToggleMessageItem"
+    @handleH5LongPress="handleH5LongPress"
+  >
+    <template #messageTip>
+      <MessageCallGroup
+        :message="props.message"
+        :signalingInfo="messageSignalingInfo"
+        :customContent="messageCustomContent"
+        :blinkMessageIDList="props.blinkMessageIDList"
+      />
+    </template>
+    <template #messageBubble>
+      <MessageCallC2C
+        v-if="pluginMessageType.pluginType === 'call'"
+        :message="props.message"
+        :signalingInfo="messageSignalingInfo"
+        :customContent="messageCustomContent"
+      />
+      <MessageCustomerService
+        v-if="pluginMessageType.pluginType === 'customer'"
+        :message="props.message"
+      />
+      <MessageRoom
+        v-if="pluginMessageType.pluginType === 'room'"
+        :message="props.message"
+      />
+    </template>
+  </MessagePluginLayout>
+</template>
+
+<script lang="ts" setup>
+import { computed } from '../../adapter-vue';
+import { TUIStore } from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import {
+  isCustomerServicePluginMessage,
+  isCustomServiceMessageInvisible,
+} from './message-customer/index';
+import { isCallMessage, isRoomCardMessage } from './index';
+import MessagePluginLayout from './message-plugin-layout.vue';
+import MessageCallGroup from './message-call/message-call-group.vue';
+import MessageCallC2C from './message-call/message-call-c2c.vue';
+import MessageCustomerService from './message-customer/message-customer-service.vue';
+// If TUIRoom is not integrated, please introduce the following path
+import MessageRoom from './message-room/message-room-default.vue';
+// After integrating TUIRoom, please comment the above path and open the following path to import
+// import MessageRoom from './message-room/message-room.vue';
+
+interface IProps {
+  message: IMessageModel;
+  blinkMessageIDList?: string[];
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+  blinkMessageIDList: () => [] as string[],
+});
+
+const emits = defineEmits(['resendMessage', 'handleToggleMessageItem', 'handleH5LongPress']);
+const messageModel = computed(() => TUIStore.getMessageModel(props.message.ID));
+const messageSignalingInfo = computed(() => messageModel?.value?.getSignalingInfo());
+const messageCustomContent = computed(() => messageModel?.value?.getMessageContent());
+
+const pluginMessageType = computed<{ pluginType: string; showStyle: string }>(() => {
+  let typeObj = { pluginType: '', showStyle: '' };
+  if (isCallMessage(messageModel.value)) {
+    typeObj = {
+      pluginType: 'call',
+      showStyle:
+        messageModel.value?.conversationType === TUIChatEngine.TYPES.CONV_GROUP ? 'tip' : 'bubble',
+    };
+  } else if (isRoomCardMessage(messageModel.value)) {
+    typeObj = {
+      pluginType: 'room',
+      showStyle: 'bubble',
+    };
+  } else if (isCustomerServicePluginMessage(messageModel.value)) {
+    typeObj = {
+      pluginType: 'customer',
+      showStyle: isCustomServiceMessageInvisible(messageModel.value) ? '' : 'bubble',
+    };
+  }
+  return typeObj;
+});
+
+// The following are for external interaction such as messageTool, no special processing is required, please do not touch
+const resendMessage = (message: IMessageModel) => {
+  emits('resendMessage', message);
+};
+const handleToggleMessageItem = (e: any, message: IMessageModel, isLongpress = false) => {
+  emits('handleToggleMessageItem', e, message, isLongpress);
+};
+const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
+  emits('handleH5LongPress', e, message, type);
+};
+</script>
+
+<style lang="scss" scoped>
+/* stylelint-disable-next-line no-empty-source */
+</style>
diff --git a/txim/src/TUIKit/plugins/plugin-components/message-room/message-room-default.vue b/txim/src/TUIKit/plugins/plugin-components/message-room/message-room-default.vue
new file mode 100644
index 00000000..556cd8e2
--- /dev/null
+++ b/txim/src/TUIKit/plugins/plugin-components/message-room/message-room-default.vue
@@ -0,0 +1,42 @@
+<template>
+  <div
+    :class="[
+      'room-default',
+      isUniFrameWork && 'room-default-uni',
+      props.message.flow === 'in' ? 'room-default-in' : 'room-default-out',
+    ]"
+  >
+    {{ TUITranslateService.t("message.custom.自定义消息") }}
+  </div>
+</template>
+<script setup lang="ts">
+import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { isUniFrameWork } from '../../../utils/env';
+
+interface IProps {
+  message: IMessageModel;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+</script>
+<style lang="scss" scoped>
+.room-default {
+  padding: 12px;
+  font-size: 14px;
+
+  &-uni{
+    padding: 0;
+  }
+
+  &-in {
+    background: #fbfbfb;
+    border-radius: 0 10px;
+  }
+
+  &-out {
+    background: #dceafd;
+    border-radius: 10px 0 10px 10px;
+  }
+}
+</style>
diff --git a/txim/src/TUIKit/plugins/plugin-components/message-room/message-room.vue b/txim/src/TUIKit/plugins/plugin-components/message-room/message-room.vue
new file mode 100644
index 00000000..85e7a2ce
--- /dev/null
+++ b/txim/src/TUIKit/plugins/plugin-components/message-room/message-room.vue
@@ -0,0 +1,19 @@
+<!-- eslint-disable vue/valid-template-root -->
+<template>
+  <RoomMessageCard :message="props.message" />
+</template>
+<script setup lang="ts">
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { RoomMessageCard } from '@tencentcloud/roomkit-web-vue3';
+
+interface IProps {
+  message: IMessageModel;
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+</script>
+<style lang="scss" scoped>
+/* stylelint-disable-next-line no-empty-source */
+</style>
diff --git a/txim/src/TUIKit/server.ts b/txim/src/TUIKit/server.ts
new file mode 100644
index 00000000..e25a4dd7
--- /dev/null
+++ b/txim/src/TUIKit/server.ts
@@ -0,0 +1,173 @@
+import TUICore, { TUILogin, TUIConstants } from '@tencentcloud/tui-core';
+import TUIChatEngine, { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { ITUIComponents, ITUIPlugins } from './interface';
+import { isFunction, isObject } from './utils';
+import { isApp } from './utils/env';
+import CallkitPluginServer from './plugins/extension-server/callkit';
+// #ifndef MP-WEIXIN
+import TUILocales from './locales';
+// #endif
+export default class TUIChatKit {
+  static isInitialized: boolean;
+  public chat: any;
+
+  public SDKAppID: number;
+  public TUICore: any;
+  public TUIChatEngine: any;
+  public TUIGlobal: any;
+  public TUIComponents: ITUIComponents = {};
+  public TUIPlugins: ITUIPlugins = {};
+
+  constructor() {
+    this.TUICore = TUICore;
+    this.TUIChatEngine = TUIChatEngine;
+    this.TUIGlobal = TUIGlobal;
+    this.SDKAppID = 0;
+    this.TUIGlobal._isTIMCallKit = true;
+    TUICore.registerEvent(TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED, TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS, this);
+    TUICore.registerEvent(TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED, TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS, this);
+    // register translate and voiceToText service event tracking
+    TUICore.registerService(TUIConstants.TUITranslatePlugin.SERVICE.NAME, 1);
+    TUICore.registerService(TUIConstants.TUIVoiceToTextPlugin.SERVICE.NAME, 1);
+  }
+
+  /**
+   * Listen for the success notification of TUILogin.login
+   */
+  public onNotifyEvent(eventName: string, subKey: string, params?: Record<string, any>) {
+    if (eventName === TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS:
+          this.login();
+          break;
+      }
+    }
+    if (eventName === TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS:
+          if (params?.language) {
+            TUITranslateService.changeLanguage(params.language);
+          }
+          break;
+      }
+    }
+  }
+
+  /**
+   * init
+   */
+  public init() {
+    // Backward compatibility, the new version executes the init operation by default in index.ts
+    if (TUIChatKit.isInitialized) {
+      return;
+    }
+    TUIChatKit.isInitialized = true;
+    // Execute call server when native plugin TUICallKit exists
+    if (isApp) {
+      new CallkitPluginServer();
+    }
+    // TUITranslateService init
+    // #ifndef MP-WEIXIN
+    TUITranslateService.provideLanguages({ ...TUILocales });
+    TUITranslateService.useI18n();
+    // #endif
+    // TUIComponents global install
+    TUIGlobal.TUIComponents = this.TUIComponents;
+    // TUIPlugins global install
+    TUIGlobal.TUIPlugins = this.TUIPlugins;
+    console.warn('[TUIChatKit]: init success.');
+  }
+
+  /**
+   * login
+   */
+  public login() {
+    const { chat, SDKAppID, userID, userSig } = TUILogin.getContext();
+    this.SDKAppID = SDKAppID;
+    this.TUIChatEngine.login({
+      chat,
+      SDKAppID,
+      userID,
+      userSig,
+    });
+    this.chat = chat;
+    return this.TUIChatEngine;
+  }
+
+  /**
+   * Single component mounting
+   *
+   * @param {string} componentName
+   * @param {any} component
+   * @param {any=} env
+   * @returns {TUICore} mounted instance
+   */
+  public component(componentName: string, component: any, env?: any) {
+    if (this?.TUIComponents?.componentName) {
+      console.warn(
+        `[TUIChatKit]: ${this?.TUIComponents?.componentName} component has already been applied to target TUIChatEngine.`,
+      );
+    } else {
+      this.TUIComponents[componentName] = component;
+      env?.component(componentName, component);
+    }
+    if (env) {
+      !TUIGlobal.Vue && (TUIGlobal.Vue = env);
+    }
+    return this.TUIChatEngine;
+  }
+
+  /**
+   * Component list mount
+   *
+   * @param {object} components
+   * @param {any=} env: Vue2/Vue3 environment
+   * @returns {TUICore} mounted instance
+   */
+  public components(components: object, env?: any) {
+    if (!components || !isObject(components)) {
+      console.warn('[TUIChatKit]: components is empty or not object.');
+    } else {
+      Object?.keys(components)?.forEach((key: string) => {
+        this.component(key, components[key as keyof typeof components], env);
+      });
+    }
+    return this.TUIChatEngine;
+  }
+
+  /**
+   * Plugin Injection
+   *
+   * @param {any} TUIPlugin
+   * @param {any} options
+   * @returns {TUICore} mounted instance
+   */
+  public use(TUIPluginName: string, TUIPlugin: any, options?: any) {
+    if (!this.TUICore) {
+      console.warn(
+        `[TUIChatKit]: Plugin ${this.TUIPlugins[TUIPluginName]} can't be used before init.`,
+      );
+      return;
+    }
+    if (this.TUIPlugins[TUIPluginName]) {
+      console.warn(
+        `[TUIChatKit]: Plugin ${this.TUIPlugins[TUIPluginName]} has already been applied to target TUIChatEngine.`,
+      );
+    } else if (TUIPlugin && isFunction(TUIPlugin?.plugin)) {
+      this.TUIPlugins[TUIPluginName] = TUIPlugin;
+      TUIPlugin?.plugin(this, options);
+    } else if (isFunction(TUIPlugin)) {
+      this.TUIPlugins[TUIPluginName] = TUIPlugin;
+      TUIPlugin(this, options);
+    } else {
+      console.warn(
+        '[TUIChatKit]: A plugin must either be a function or an object with an "plugin" '
+        + 'function.'
+        + this.TUIPlugins[TUIPluginName]
+        + 'does not comply with the above rules.',
+      );
+    }
+    return this.TUIChatEngine;
+  }
+}
diff --git a/txim/src/TUIKit/shims-vue.d.ts b/txim/src/TUIKit/shims-vue.d.ts
new file mode 100644
index 00000000..773505b4
--- /dev/null
+++ b/txim/src/TUIKit/shims-vue.d.ts
@@ -0,0 +1,29 @@
+/* eslint-disable */
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module "*.svg";
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.gif";
+declare module "*.bmp";
+declare module "*.tiff";
+
+declare module "*.json" {
+  const content: any;
+  export default content;
+}
+
+declare module "dayjs";
+declare module "dayjs/plugin/localeData.js";
+declare module "dayjs/plugin/isSameOrAfter.js";
+declare module "dayjs/plugin/isSameOrBefore.js";
+
+declare module "marked-highlight";
+declare module "highlight.js";
+declare module "dompurify";
+declare module "marked";
diff --git a/txim/src/TUIKit/utils/documentLink.ts b/txim/src/TUIKit/utils/documentLink.ts
new file mode 100644
index 00000000..ea9d788a
--- /dev/null
+++ b/txim/src/TUIKit/utils/documentLink.ts
@@ -0,0 +1,23 @@
+const Link = {
+  product: {
+    label: '产品文档',
+    url: 'https://cloud.tencent.com/document/product/269/1499#.E7.BE.A4.E7.BB.84.E5.8A.9F.E8.83.BD',
+  },
+  customMessage: {
+    label: '自定义消息',
+    url: 'https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#createCustomMessage',
+  },
+  complaint: {
+    label: '点此投诉',
+    url: 'https://cloud.tencent.com/apply/p/xc3oaubi98g',
+  },
+  implement: {
+    label: '集成TUICallKit',
+    url: 'https://cloud.tencent.com/document/product/269/79861',
+  },
+  purchase: {
+    label: '开通腾讯实时音视频服务',
+    url: 'https://cloud.tencent.com/document/product/1640/79968',
+  },
+};
+export default Link;
\ No newline at end of file
diff --git a/txim/src/TUIKit/utils/enableSampleTaskStatus.ts b/txim/src/TUIKit/utils/enableSampleTaskStatus.ts
new file mode 100644
index 00000000..68861e9e
--- /dev/null
+++ b/txim/src/TUIKit/utils/enableSampleTaskStatus.ts
@@ -0,0 +1,8 @@
+import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
+export function enableSampleTaskStatus(taskKey: string) {
+  const tasks = TUIStore.getData(StoreName.APP, "tasks");
+  if (taskKey in tasks && !tasks[taskKey]) {
+    tasks[taskKey] = true;
+    TUIStore.update(StoreName.APP, "tasks", tasks);
+  }
+}
diff --git a/txim/src/TUIKit/utils/env.ts b/txim/src/TUIKit/utils/env.ts
new file mode 100644
index 00000000..12bc523a
--- /dev/null
+++ b/txim/src/TUIKit/utils/env.ts
@@ -0,0 +1,17 @@
+import { getPlatform } from '@tencentcloud/universal-api';
+
+declare const uni: any;
+
+export const isPC = getPlatform() === 'pc';
+
+export const isH5 = getPlatform() === 'h5';
+
+export const isWeChat = getPlatform() === 'wechat';
+
+export const isApp = getPlatform() === 'app';
+
+export const isUniFrameWork = typeof uni !== 'undefined';
+
+// H5, mini programs, and apps are all considered mobile.
+// If you need to unify the mobile UI style, you can directly use isMobile to control
+export const isMobile = isH5 || isWeChat || isApp;
diff --git a/txim/src/TUIKit/utils/index.ts b/txim/src/TUIKit/utils/index.ts
new file mode 100644
index 00000000..c506df9b
--- /dev/null
+++ b/txim/src/TUIKit/utils/index.ts
@@ -0,0 +1 @@
+export * from "./type-check";
diff --git a/txim/src/TUIKit/utils/lodash.ts b/txim/src/TUIKit/utils/lodash.ts
new file mode 100644
index 00000000..0c77c6f4
--- /dev/null
+++ b/txim/src/TUIKit/utils/lodash.ts
@@ -0,0 +1,169 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/** Error message constants. */
+const FUNC_ERROR_TEXT = 'Expected a function';
+
+interface IDebounceOptions {
+  leading?: boolean;
+  maxWait?: number;
+  trailing?: boolean;
+}
+
+type IThrottleOptions = IDebounceOptions;
+
+function throttle(func, wait: number, options?: IThrottleOptions) {
+  let leading = true,
+    trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  if (options && isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    leading: leading,
+    maxWait: wait,
+    trailing: trailing,
+  });
+}
+
+function debounce(func, wait: number, options?: IDebounceOptions) {
+  let lastArgs,
+    lastThis,
+    maxWait,
+    result,
+    timerId,
+    lastCallTime,
+    lastInvokeTime = 0,
+    leading = false,
+    maxing = false,
+    trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = wait || 0;
+  if (options && isObject(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? Math.max(options.maxWait || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    const args = lastArgs,
+      thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    const timeSinceLastCall = time - lastCallTime,
+      timeSinceLastInvoke = time - lastInvokeTime,
+      timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    const timeSinceLastCall = time - lastCallTime,
+      timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait)
+      || (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    const time = Date.now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(Date.now());
+  }
+
+  function debounced() {
+    const time = Date.now(),
+      isInvoking = shouldInvoke(time);
+
+    // eslint-disable-next-line prefer-rest-params
+    lastArgs = arguments;
+
+    // @ts-expect-error ignore this type
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+function isObject(value) {
+  const type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
+
+export {
+  debounce,
+  throttle,
+};
diff --git a/txim/src/TUIKit/utils/riseInput.ts b/txim/src/TUIKit/utils/riseInput.ts
new file mode 100644
index 00000000..8014c8cb
--- /dev/null
+++ b/txim/src/TUIKit/utils/riseInput.ts
@@ -0,0 +1,53 @@
+import { isIOS } from '@tencentcloud/universal-api';
+const ua = navigator.userAgent;
+
+function getScrollTypeByPlatform() {
+  if (isIOS) {
+    if (/Safari\//.test(ua) || /IOS 11_[0-3]\D/.test(ua)) {
+      // Safari IOS 11.0-11.3 exclude（`scrollTop`/`scrolIntoView` not working）
+      return 0;
+    }
+    // IOS: use `scrollTop`
+    return 1;
+  }
+  // Android: use `scrollIntoView`
+  return 2;
+}
+
+export default function riseInput(input: HTMLElement, target?: HTMLElement) {
+  const scrollType = getScrollTypeByPlatform();
+  let scrollTimer: ReturnType<typeof setTimeout>;
+
+  if (!target) {
+    // eslint-disable-next-line no-param-reassign
+    target = input;
+  }
+
+  const scrollIntoView = () => {
+    if (scrollType === 0) return;
+    if (scrollType === 1) {
+      document.body.scrollTop = document.body.scrollHeight;
+    } else {
+      target?.scrollIntoView(false);
+    }
+  };
+
+  input.addEventListener('focus', () => {
+    const timer = setTimeout(() => {
+      scrollIntoView();
+      clearTimeout(timer);
+    }, 300);
+    scrollTimer = setTimeout(scrollIntoView, 1000);
+  });
+
+  input.addEventListener('blur', () => {
+    clearTimeout(scrollTimer);
+    // Handle IOS issues about keyboard is hidden but page not refreshed
+    if (scrollType && isIOS) {
+      const timer = setTimeout(() => {
+        document.body.scrollIntoView();
+        clearTimeout(timer);
+      });
+    }
+  });
+}
diff --git a/txim/src/TUIKit/utils/type-check.ts b/txim/src/TUIKit/utils/type-check.ts
new file mode 100644
index 00000000..0969e4e7
--- /dev/null
+++ b/txim/src/TUIKit/utils/type-check.ts
@@ -0,0 +1,44 @@
+const objectToString = Object.prototype.toString;
+const toTypeString = (value: any) => objectToString.call(value);
+
+export const { isArray } = Array;
+export const isMap = (val: any) => toTypeString(val) === '[object Map]';
+export const isSet = (val: any) => toTypeString(val) === '[object Set]';
+export const isDate = (val: any) => val instanceof Date;
+export const isFunction = (val: any) => typeof val === 'function';
+export const isString = (val: any) => typeof val === 'string';
+export const isSymbol = (val: any) => typeof val === 'symbol';
+export const isObject = (val: any) => val !== null && typeof val === 'object';
+export const isPromise = (val: any) =>
+  isObject(val) && isFunction(val.then) && isFunction(val.catch);
+// Determine whether it is url
+export const isUrl = (url: string) => {
+  return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(
+    url,
+  );
+};
+
+// Determine if it is a JSON string
+export const isJSON = (str: string) => {
+  // eslint-disable-next-line no-useless-escape
+  if (typeof str === 'string') {
+    try {
+      const data = JSON.parse(str);
+      if (data) {
+        return true;
+      }
+      return false;
+    } catch (error: any) {
+      return false;
+    }
+  }
+  return false;
+};
+
+// Determine if it is a JSON string
+export const JSONToObject = (str: string) => {
+  if (!str || !isJSON(str)) {
+    return str;
+  }
+  return JSON.parse(str);
+};
diff --git a/txim/src/assets/logo.png b/txim/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/txim/src/assets/logo.png differ
diff --git a/txim/src/components/HelloWorld.vue b/txim/src/components/HelloWorld.vue
new file mode 100644
index 00000000..de9619fe
--- /dev/null
+++ b/txim/src/components/HelloWorld.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class HelloWorld extends Vue {
+  @Prop() private msg!: string;
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/txim/src/main.ts b/txim/src/main.ts
new file mode 100644
index 00000000..63eb05f7
--- /dev/null
+++ b/txim/src/main.ts
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
diff --git a/txim/src/shims-tsx.d.ts b/txim/src/shims-tsx.d.ts
new file mode 100644
index 00000000..64fc0a8a
--- /dev/null
+++ b/txim/src/shims-tsx.d.ts
@@ -0,0 +1,11 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    interface Element extends VNode {}
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}
diff --git a/txim/src/shims-vue.d.ts b/txim/src/shims-vue.d.ts
new file mode 100644
index 00000000..d9f24faa
--- /dev/null
+++ b/txim/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}
diff --git a/txim/tsconfig.json b/txim/tsconfig.json
new file mode 100644
index 00000000..6497d640
--- /dev/null
+++ b/txim/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/txim/vue.config.js b/txim/vue.config.js
new file mode 100644
index 00000000..c17c2cf8
--- /dev/null
+++ b/txim/vue.config.js
@@ -0,0 +1,9 @@
+const { defineConfig } = require("@vue/cli-service");
+module.exports = defineConfig({
+  transpileDependencies: true,
+  devServer: {
+    client: {
+      overlay: false,
+    },
+  },
+});