diff --git a/TUIKit/assets/icon/unopened-envelope.svg b/TUIKit/assets/icon/unopened-envelope.svg
new file mode 100644
index 0000000..36a5c10
--- /dev/null
+++ b/TUIKit/assets/icon/unopened-envelope.svg
@@ -0,0 +1 @@
+<?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 t="1767794579271" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17300" width="80" height="80" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M792.7 960.2H232.6c-22.1 0-40-17.9-40-40v-816c0-22.1 17.9-40 40-40h560.1c22.1 0 40 17.9 40 40v816c0 22.1-17.9 40-40 40z" fill="#CE302F" p-id="17301"></path><path d="M792.7 965.2H232.6c-24.8 0-45-20.2-45-45v-816c0-24.8 20.2-45 45-45h560.1c24.8 0 45 20.2 45 45v816c0 24.8-20.2 45-45 45z m-560.1-896c-19.3 0-35 15.7-35 35v816c0 19.3 15.7 35 35 35h560.1c19.3 0 35-15.7 35-35v-816c0-19.3-15.7-35-35-35H232.6z" fill="#333333" p-id="17302"></path><path d="M827.1 336.5S640 403.9 511.9 404.1c-125.7 0.2-313.3-67.6-313.3-67.6V87c0-12.6 9.4-22.7 21-22.7h586.5c11.6 0 21 10.2 21 22.7v249.5z" fill="#C12727" p-id="17303"></path><path d="M832.7 320.2s-190.6 63.4-321.1 63.6c-128 0.2-319.1-63.6-319.1-63.6V85.6c0-11.8 9.6-21.4 21.4-21.4h597.4c11.8 0 21.4 9.6 21.4 21.4v234.6z" fill="#CE302F" p-id="17304"></path><path d="M511 388.8c-127.3 0-318.1-63.2-320-63.8l-3.4-1.1V85.6c0-14.5 11.8-26.4 26.4-26.4h597.4c14.5 0 26.4 11.8 26.4 26.4v238.2l-3.4 1.1c-1.9 0.6-192.8 63.6-322.6 63.8-0.3 0.1-0.6 0.1-0.8 0.1z m-313.4-72.2c26.2 8.5 197.1 62.2 313.4 62.2h0.6c118.7-0.2 289.8-53.7 316.1-62.2v-231c0-9-7.3-16.4-16.4-16.4H214c-9 0-16.4 7.3-16.4 16.4v231z" fill="#333333" p-id="17305"></path><path d="M512.7 394.8m-97.1 0a97.1 97.1 0 1 0 194.2 0 97.1 97.1 0 1 0-194.2 0Z" fill="#C12727" p-id="17306"></path><path d="M512.7 383.8m-90.7 0a90.7 90.7 0 1 0 181.4 0 90.7 90.7 0 1 0-181.4 0Z" fill="#F8B739" p-id="17307"></path><path d="M512.7 479.5c-52.8 0-95.7-42.9-95.7-95.7s42.9-95.7 95.7-95.7c52.8 0 95.7 42.9 95.7 95.7s-43 95.7-95.7 95.7z m0-181.4c-47.2 0-85.7 38.4-85.7 85.7s38.4 85.7 85.7 85.7c47.2 0 85.7-38.4 85.7-85.7s-38.5-85.7-85.7-85.7z" fill="#333333" p-id="17308"></path><path d="M512.7 372.8m-74.3 0a74.3 74.3 0 1 0 148.6 0 74.3 74.3 0 1 0-148.6 0Z" fill="#F7B034" p-id="17309"></path></svg>
\ No newline at end of file
diff --git a/TUIKit/components/TUIChat/index.vue b/TUIKit/components/TUIChat/index.vue
index 722f8c7..149b196 100644
--- a/TUIKit/components/TUIChat/index.vue
+++ b/TUIKit/components/TUIChat/index.vue
@@ -288,14 +288,15 @@
     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
@@ -304,7 +305,6 @@
         ''
       )
     }
-
     headerExtensionList.value = []
     isMultipleSelectMode.value = false
     // Initialize chatType
@@ -350,6 +350,4 @@
   }
 </script>
 
-<style scoped lang="scss" src="./style/index.scss">
-
-</style>
+<style scoped lang="scss" src="./style/index.scss"></style>
diff --git a/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue b/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue
index d1350f3..0da2eb0 100644
--- a/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue
@@ -213,7 +213,6 @@
       )
     }
 
-
     TUIChatService.sendCustomMessage(
       options as SendMessageParams,
       sendMessageOptions
diff --git a/TUIKit/components/TUIChat/message-input-toolbar/index.vue b/TUIKit/components/TUIChat/message-input-toolbar/index.vue
index 09c721a..54699d0 100644
--- a/TUIKit/components/TUIChat/message-input-toolbar/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/index.vue
@@ -59,10 +59,10 @@
             v-if="featureConfig.InputQuickReplies"
             @onDialogPopupShowOrHide="handleSwiperDotShow"
           />
-          <Evaluate
+          <!-- <Evaluate
             v-if="featureConfig.InputEvaluation"
             @onDialogPopupShowOrHide="handleSwiperDotShow"
-          />
+          /> -->
           <!-- 红包 -->
           <RedEnvelope />
         </template>
diff --git a/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
index d7098fe..37ee8e7 100644
--- a/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
@@ -3,17 +3,50 @@
   import ToolbarItemContainer from '../toolbar-item-container/index.vue'
   import custom from '../../../../assets/icon/red-packet.svg'
   import { isUniFrameWork } from '../../../../utils/env'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
+  import TUIChatEngine, {
+    type IConversationModel,
+    type SendMessageParams,
+    SendMessageOptions,
+    StoreName,
+    TUIChatService,
+    TUIStore
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils'
+  import OfflinePushInfoManager, {
+    type IOfflinePushInfoCreateParams
+  } from '../../offlinePushInfoManager'
+  import { getUserPayPwd } from '@/api/my-index'
+  import { useUI } from '@/utils/use-ui'
+  import { navigateTo } from '@/utils/router'
+  import { sendRedEnvelope } from '../../../../../api/tui-kit'
 
-  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666; font-size: 32rpx; font-style: normal; text-transform: none;`
+  const { showDialog } = useUI()
 
+  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #a9a9a9; font-size: 32rpx; font-style: normal; text-transform: none;`
   const evaluateIcon = custom
 
-  /** 提示框 */
-  const message = ref()
+  const currentConversation = ref<IConversationModel>()
+
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: (conversation: IConversationModel) => {
+      currentConversation.value = conversation
+    }
+  })
+
+  const tixian = ref()
+  /** 错误提示 */
+  const errorData = reactive({
+    integralShow: false,
+    numShow: false,
+    color: '#f56c6c'
+  })
   const container = ref()
   const formData = reactive({
     //  积分
     integral: '',
+    // 红包数量
+    num: '',
     // 红包标题
     title: ''
   })
@@ -27,16 +60,49 @@
     if (!formData.integral) {
       data.valid = true
       data.message = '请输入积分'
-      message.value.open()
       return data
     }
     if (Number(formData.integral) > 2000) {
       data.valid = true
       data.message = '积分不能大于2000'
-      message.value.open()
+
+      return data
+    }
+    return data
+  })
+
+  /** 监听是否是群组 */
+  const isGroup = computed(
+    () => currentConversation?.value?.type === 'GROUP'
+  )
+  /** 监听群人数 */
+  const memberCount = computed(
+    () => currentConversation?.value?.groupProfile?.memberCount
+  )
+
+  /** 监听红包个数 */
+  const monitorNum = computed(() => {
+    const data = {
+      valid: false,
+      message: ''
+    }
+    if (!formData.num) {
+      data.valid = true
+      data.message = '请输入红包个数'
       return data
     }
 
+    if (Number(formData.num) === 0) {
+      data.valid = true
+      data.message = '红包个数不能为 0'
+      return data
+    }
+
+    if (Number(formData.num) > memberCount.value) {
+      data.valid = true
+      data.message = '红包个数不能大于群人数'
+      return data
+    }
     return data
   })
 
@@ -44,6 +110,9 @@
     console.log('弹出窗口')
     formData.integral = ''
     formData.title = ''
+    formData.num = ''
+    errorData.integralShow = false
+    errorData.numShow = false
   }
 
   const onDialogClose = () => {
@@ -54,9 +123,106 @@
     container?.value?.toggleDialogDisplay(false)
   }
 
-  const onSubmit = () => {
-    if (!formData.integral) return
-    console.log('确认')
+  /** 监听输入 */
+  const monitorInput = () => {
+    if (monitorPoints.value.valid) {
+      errorData.integralShow = true
+      return
+    }
+
+    errorData.integralShow = false
+  }
+
+  /** 监听红包个数输入值 */
+  const numInput = () => {
+    if (monitorNum.value.valid) {
+      errorData.numShow = true
+      return
+    }
+    errorData.numShow = false
+  }
+
+  const onSubmit = async () => {
+    if (isGroup.value) {
+      if (monitorNum.value.valid) {
+        errorData.numShow = true
+        return
+      }
+    }
+
+    if (monitorPoints.value.valid) {
+      errorData.integralShow = true
+      return
+    }
+
+    const res = await getUserPayPwd()
+    if (res?.data) {
+      tixian.value.open()
+    } else {
+      const show = await showDialog('提示', '请先设置支付密码')
+      if (show) {
+        navigateTo('/pages/my-index/wallet/edit-password', { type: 0 })
+      }
+    }
+  }
+
+  const pwdModalSubmit = async (e: number[]) => {
+    // 默认文本
+    const text = `${formData.title || '恭喜发财，大吉大利'}`
+    const payload = {
+      data: JSON.stringify({
+        businessID: CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE,
+        version: 1,
+        // 积分
+        integral: Number(formData.integral),
+        // 红包个数
+        num: Number(formData.num || '1'),
+        // 发送类型
+        type: currentConversation?.value?.type,
+        title: text
+      }),
+      description: text,
+      extension: text
+    }
+    const options = {
+      to:
+        currentConversation?.value?.groupProfile?.groupID ||
+        currentConversation?.value?.userProfile?.userID,
+      conversationType: currentConversation?.value?.type,
+      payload,
+      needReadReceipt: isEnabledMessageReadReceiptGlobal()
+    }
+    const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+      conversation: currentConversation.value as IConversationModel,
+      payload: options.payload,
+      messageType: TUIChatEngine.TYPES.MSG_CUSTOM
+    }
+
+    const sendMessageOptions: SendMessageOptions = {
+      offlinePushInfo: OfflinePushInfoManager.create(
+        offlinePushInfoCreateParams
+      )
+    }
+    const isGroup = currentConversation?.value?.type === 'GROUP'
+    const data = {
+      password: e.join(''),
+      title: text,
+      packetType: isGroup ? 2 : 1,
+      receiverType: isGroup ? 2 : 1,
+      totalAmount: Number(formData.integral),
+      totalCount: Number(formData.num || '1')
+    }
+    try {
+      tixian.value.close()
+      await sendRedEnvelope(data)
+      TUIChatService.sendCustomMessage(
+        options as SendMessageParams,
+        sendMessageOptions
+      )
+      container?.value?.toggleDialogDisplay(false)
+    } catch (error) {
+      tixian.value.close()
+    }
   }
 </script>
 
@@ -71,6 +237,11 @@
     @onDialogShow="onDialogShow"
     @onDialogClose="onDialogClose"
   >
+    <uu-pwdModal
+      ref="tixian"
+      class="pwd-modal"
+      @success="pwdModalSubmit"
+    ></uu-pwdModal>
     <view class="red-envelope">
       <view class="top-title">
         <text class="title">发红包</text>
@@ -81,22 +252,59 @@
           @click.stop="closeDialog"
         ></uni-icons>
       </view>
-      <!-- 输入框 -->
-      <view
-        :class="{ 'on-reminder': monitorPoints.valid }"
-        class="input-box"
-      >
-        <text>积分</text>
-        <input
-          v-model="formData.integral"
-          :placeholder-style="placeholderStyle"
-          confirm-type="done"
-          type="number"
-          placeholder="0.00"
-          @confirm="onSubmit"
-        />
+      <!-- 红包个数 -->
+      <view v-if="isGroup" class="group-box">
+        <view
+          :class="{ 'on-reminder': errorData.numShow }"
+          class="input-box"
+        >
+          <view class="form-box">
+            <text>红包个数</text>
+            <view class="num-box">
+              <input
+                v-model="formData.num"
+                :placeholder-style="`font-family: PingFang SC, PingFang SC; font-weight: 500; color: ${
+                  errorData.numShow ? '#f56c6c' : '#a9a9a9'
+                }; font-size: 32rpx; font-style: normal; text-transform: none;`"
+                confirm-type="done"
+                type="number"
+                placeholder="填写红包个数"
+                @input="numInput"
+                @confirm="onSubmit"
+              />
+              <text>个</text>
+            </view>
+          </view>
+          <text v-if="errorData.numShow" class="error-text">
+            {{ monitorNum.message }}
+          </text>
+        </view>
+        <text class="num">本群共{{ memberCount }}人</text>
       </view>
 
+      <!-- 输入框 -->
+      <view
+        :class="{ 'on-reminder': errorData.integralShow }"
+        class="input-box"
+      >
+        <view class="form-box">
+          <text>积分</text>
+          <input
+            v-model="formData.integral"
+            :placeholder-style="`font-family: PingFang SC, PingFang SC; font-weight: 500; color: ${
+              errorData.integralShow ? '#f56c6c' : '#a9a9a9'
+            }; font-size: 32rpx; font-style: normal; text-transform: none;`"
+            confirm-type="done"
+            type="digit"
+            placeholder="0.00"
+            @input="monitorInput"
+            @confirm="onSubmit"
+          />
+        </view>
+        <text v-if="errorData.integralShow" class="error-text">
+          {{ monitorPoints.message }}
+        </text>
+      </view>
       <view class="input-box title-box">
         <input
           v-model="formData.title"
@@ -115,15 +323,6 @@
         <button class="btn" @click.stop="onSubmit">塞进红包</button>
       </view>
     </view>
-
-    <!-- 提示框 -->
-    <uni-popup ref="message" type="message">
-      <uni-popup-message
-        type="error"
-        :message="monitorPoints.message"
-        :duration="2000"
-      ></uni-popup-message>
-    </uni-popup>
   </ToolbarItemContainer>
 </template>
 
diff --git a/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss
index e436121..8b686d9 100644
--- a/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss
+++ b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss
@@ -5,7 +5,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 26rpx;
+    margin-bottom: 30rpx;
     .title {
       font-size: 32rpx;
       color: #1c1c1c;
@@ -13,13 +13,19 @@
   }
 
   .input-box {
-    margin-bottom: 26rpx;
+    margin-bottom: 60rpx;
     background: #ffffff;
     border-radius: 16rpx;
     padding: 24rpx 34rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    .form-box {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
     text {
       font-size: 32rpx;
       color: #1c1c1c;
@@ -30,6 +36,16 @@
       color: #1c1c1c;
       text-align: right;
     }
+    .num-box {
+      display: flex;
+      align-items: center;
+      justify-content: right;
+      text {
+        margin-left: 10rpx;
+        margin-bottom: 1rpx;
+        color: #1c1c1c;
+      }
+    }
   }
 
   .title-box {
@@ -73,11 +89,40 @@
 
   // 警告提现
   .on-reminder {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
     text {
-      color: #f56c6c;
+      color: #f56c6c !important;
     }
     input {
       color: #f56c6c;
     }
+    .error-text {
+      margin-top: 10rpx;
+      font-size: 24rpx;
+    }
+  }
+
+  // 群红包个数
+  .group-box {
+    display: flex;
+    flex-direction: column;
+    .input-box {
+      margin-bottom: 10rpx;
+    }
+    .num {
+      margin-bottom: 30rpx;
+      margin-left: 34rpx;
+      font-size: 28rpx;
+      color: #5e5e5e;
+    }
+  }
+}
+
+.pwd-modal {
+  :deep(.modal) {
+    position: relative;
+    right: 20rpx;
   }
 }
diff --git a/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue b/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue
index 3222601..d5d0aa1 100644
--- a/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue
@@ -4,13 +4,13 @@
     :class="[
       'toolbar-item-container',
       !isPC && 'toolbar-item-container-h5',
-      isUniFrameWork && 'toolbar-item-container-uni',
+      isUniFrameWork && 'toolbar-item-container-uni'
     ]"
   >
     <div
       :class="[
         'toolbar-item-container-icon',
-        isUniFrameWork && 'toolbar-item-container-uni-icon',
+        isUniFrameWork && 'toolbar-item-container-uni-icon'
       ]"
       @click="toggleToolbarItem"
     >
@@ -34,7 +34,7 @@
         'toolbar-item-container-dialog',
         isDark && 'toolbar-item-container-dialog-dark',
         !isPC && 'toolbar-item-container-h5-dialog',
-        isUniFrameWork && 'toolbar-item-container-uni-dialog',
+        isUniFrameWork && 'toolbar-item-container-uni-dialog'
       ]"
     >
       <BottomPopup
@@ -51,88 +51,95 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } 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';
+  import { ref, watch } 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 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 emits = defineEmits([
+    'onIconClick',
+    'onDialogClose',
+    'onDialogShow'
+  ])
 
-const isDark = ref(TUIChatConfig.getTheme() === 'dark');
-const showDialog = ref(false);
-const toolbarItemRef = ref();
-const dialogRef = ref();
+  const isDark = ref(TUIChatConfig.getTheme() === 'dark')
+  const showDialog = ref(false)
+  const toolbarItemRef = ref()
+  const dialogRef = ref()
 
-watch(() => showDialog.value, (newVal) => {
-  if (!newVal) {
-    emits('onDialogClose', dialogRef);
-  } else {
-    emits('onDialogShow', dialogRef);
+  watch(
+    () => showDialog.value,
+    newVal => {
+      if (!newVal) {
+        emits('onDialogClose', dialogRef)
+      } else {
+        emits('onDialogShow', dialogRef)
+      }
+    }
+  )
+
+  const toggleToolbarItem = () => {
+    emits('onIconClick', dialogRef)
+    if (isPC) {
+      outsideClick.listen({
+        domRefs: toolbarItemRef.value,
+        handler: closeToolbarItem
+      })
+    }
+    if (!props.needDialog) {
+      return
+    }
+    toggleDialogDisplay(!showDialog.value)
   }
-});
 
-const toggleToolbarItem = () => {
-  emits('onIconClick', dialogRef);
-  if (isPC) {
-    outsideClick.listen({
-      domRefs: toolbarItemRef.value,
-      handler: closeToolbarItem,
-    });
+  const closeToolbarItem = () => {
+    showDialog.value = false
   }
-  if (!props.needDialog) {
-    return;
+
+  const toggleDialogDisplay = (showStatus: boolean) => {
+    if (showDialog.value === showStatus) {
+      return
+    }
+    showDialog.value = showStatus
   }
-  toggleDialogDisplay(!showDialog.value);
-};
 
-const closeToolbarItem = () => {
-  showDialog.value = false;
-};
-
-const toggleDialogDisplay = (showStatus: boolean) => {
-  if (showDialog.value === showStatus) {
-    return;
+  const onPopupClose = () => {
+    showDialog.value = false
   }
-  showDialog.value = showStatus;
-};
 
-const onPopupClose = () => {
-  showDialog.value = false;
-};
-
-defineExpose({
-  toggleDialogDisplay,
-});
+  defineExpose({
+    toggleDialogDisplay
+  })
 </script>
 <style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/TUIKit/components/TUIChat/message-input/message-input-quote/index.vue b/TUIKit/components/TUIChat/message-input/message-input-quote/index.vue
index d1743e5..5ceba0e 100644
--- a/TUIKit/components/TUIChat/message-input/message-input-quote/index.vue
+++ b/TUIKit/components/TUIChat/message-input/message-input-quote/index.vue
@@ -4,13 +4,20 @@
     :class="{
       'input-quote-container': true,
       'input-quote-container-uni': isUniFrameWork,
-      'input-quote-container-h5': isH5,
+      'input-quote-container-h5': isH5
     }"
   >
     <div class="input-quote-content">
       <div class="max-one-line">
-        {{ quoteMessage.nick || quoteMessage.from }}: {{ quoteContentText }}
+        {{ quoteMessage.nick || quoteMessage.from }}:
+        {{ quoteContentText }}
       </div>
+      <Icon
+        v-if="isRedEnvelope"
+        :file="unopenedEnvelope"
+        width="44rpx"
+        height="55rpx"
+      />
       <Icon
         class="input-quote-close-icon"
         :file="closeIcon"
@@ -23,135 +30,174 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
-import TUIChatEngine, {
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  IMessageModel,
-} from '@tencentcloud/chat-uikit-engine-lite';
-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';
+  import {
+    ref,
+    computed,
+    onMounted,
+    onUnmounted
+  } from '../../../../adapter-vue'
+  import TUIChatEngine, {
+    TUIStore,
+    StoreName,
+    TUITranslateService,
+    IMessageModel
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  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'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
+  import unopenedEnvelope from '../../../../assets/icon/unopened-envelope.svg'
 
-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;
+  interface IProps {
+    displayType?: InputDisplayType
   }
-  return _quoteContentText;
-});
 
-function cancelQuote() {
-  TUIStore.update(StoreName.CHAT, 'quoteMessage', { message: undefined, type: 'quote' });
-}
+  const props = withDefaults(defineProps<IProps>(), {
+    displayType: 'editor'
+  })
 
-function onQuoteMessageUpdated(options?: { message: IMessageModel; type: string }) {
-  if (options?.message && options?.type === 'quote') {
-    quoteMessage.value = options.message;
-  } else {
-    quoteMessage.value = undefined;
+  const TYPES = TUIChatEngine.TYPES
+  const quoteMessage = ref<IMessageModel>()
+
+  onMounted(() => {
+    TUIStore.watch(StoreName.CHAT, {
+      quoteMessage: onQuoteMessageUpdated
+    })
+  })
+
+  onUnmounted(() => {
+    TUIStore.unwatch(StoreName.CHAT, {
+      quoteMessage: onQuoteMessageUpdated
+    })
+  })
+
+  /** 是否是红包 */
+  const isRedEnvelope = computed(() => {
+    if (quoteMessage.value?.payload?.data) {
+      const businessID = JSON?.parse(
+        quoteMessage.value?.payload?.data
+      )?.businessID
+      return businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
+    }
+    return false
+  })
+  /** 红包内容 */
+  const quoteRedEnvelopeContentText = computed(() => {
+    if (isRedEnvelope.value) {
+      const data = JSON.parse(quoteMessage.value?.payload?.data)
+      return `${data.title}`
+    }
+    return ''
+  })
+
+  const quoteContentText = computed(() => {
+    let _quoteContentText
+    if (isRedEnvelope.value) {
+      _quoteContentText = `${quoteRedEnvelopeContentText.value}`
+    } else {
+      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 {
+  %common-container-style {
+    margin: 5px 100px 5px 8px;
     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 {
+    .input-quote-content {
+      display: flex;
       flex: 0 1 auto;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      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-close-icon {
-    margin-left: 5px;
-    padding: 5px;
+  .input-quote-container {
+    @extend %common-container-style;
   }
-}
 
-.input-quote-container {
-  @extend %common-container-style;
-}
+  .input-quote-container-uni {
+    @extend %common-container-style;
 
-.input-quote-container-uni {
-  @extend %common-container-style;
+    margin: 5px 60px 0 30px;
+  }
 
-  margin: 5px 60px 0 30px;
-}
+  .input-quote-container-h5 {
+    @extend %common-container-style;
 
-.input-quote-container-h5 {
-  @extend %common-container-style;
-
-  margin: 5px 0 0;
-}
+    margin: 5px 0 0;
+  }
 </style>
diff --git a/TUIKit/components/TUIChat/message-list/index.vue b/TUIKit/components/TUIChat/message-list/index.vue
index 7a68792..b3310ab 100644
--- a/TUIKit/components/TUIChat/message-list/index.vue
+++ b/TUIKit/components/TUIChat/message-list/index.vue
@@ -2,26 +2,23 @@
   <div
     :class="{
       'tui-chat': true,
-      'tui-chat-h5': isMobile,
+      'tui-chat-h5': isMobile
     }"
     @click="onMessageListBackgroundClick"
   >
     <!-- <JoinGroupCard /> -->
     <div class="tui-chat-main">
-      <div
-        v-if="isOfficial"
-        class="tui-chat-safe-tips"
-      >
+      <div v-if="isOfficial" class="tui-chat-safe-tips">
         <span>
           {{
             TUITranslateService.t(
-              "TUIChat.【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。"
+              'TUIChat.【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。'
             )
           }}
         </span>
-        <a @click="openComplaintLink(Link.complaint)">{{
-          TUITranslateService.t("TUIChat.点此投诉")
-        }}</a>
+        <a @click="openComplaintLink(Link.complaint)">
+          {{ TUITranslateService.t('TUIChat.点此投诉') }}
+        </a>
       </div>
       <MessageGroupApplication
         v-if="isGroup"
@@ -41,7 +38,7 @@
           class="message-more"
           @click="getHistoryMessageList"
         >
-          {{ TUITranslateService.t("TUIChat.查看更多") }}
+          {{ TUITranslateService.t('TUIChat.查看更多') }}
         </p>
         <li
           v-for="(item, index) in messageList"
@@ -53,12 +50,10 @@
             :currTime="item.time"
             :prevTime="index > 0 ? messageList[index - 1].time : 0"
           />
-          <div
-            class="message-item"
-            @click="toggleID = ''"
-          >
+          <div class="message-item" @click="toggleID = ''">
             <MessageTip
-              v-if="item.type === TYPES.MSG_GRP_TIP ||
+              v-if="
+                item.type === TYPES.MSG_GRP_TIP ||
                 isCreateGroupCustomMessage(item)
               "
               :content="item.getMessageContent()"
@@ -67,10 +62,18 @@
               v-else-if="!item.isRevoked && !isPluginMessage(item)"
               :id="`msg-bubble-${item.ID}`"
               class="message-bubble-container"
-              @longpress="handleToggleMessageItem($event, item, index, true)"
-              @touchstart="handleH5LongPress($event, item, index, 'touchstart')"
-              @touchend="handleH5LongPress($event, item, index, 'touchend')"
-              @mouseover="handleH5LongPress($event, item, index, 'touchend')"
+              @longpress="
+                handleToggleMessageItem($event, item, index, true)
+              "
+              @touchstart="
+                handleH5LongPress($event, item, index, 'touchstart')
+              "
+              @touchend="
+                handleH5LongPress($event, item, index, 'touchend')
+              "
+              @mouseover="
+                handleH5LongPress($event, item, index, 'touchend')
+              "
             >
               <MessageBubble
                 :messageItem="deepCopy(item)"
@@ -78,7 +81,9 @@
                 :isAudioPlayed="audioPlayedMapping[item.ID]"
                 :blinkMessageIDList="blinkMessageIDList"
                 :isMultipleSelectMode="isMultipleSelectMode"
-                :multipleSelectedMessageIDList="multipleSelectedMessageIDList"
+                :multipleSelectedMessageIDList="
+                  multipleSelectedMessageIDList
+                "
                 @resendMessage="resendMessage(item)"
                 @blinkMessage="blinkMessage"
                 @scrollTo="scrollTo"
@@ -163,11 +168,13 @@
               :class="{
                 'message-tool': true,
                 'message-tool-out': item.flow === 'out',
-                'message-tool-in': item.flow === 'in',
+                'message-tool-in': item.flow === 'in'
               }"
               :messageItem="item"
               :isMultipleSelectMode="isMultipleSelectMode"
-              @toggleMultipleSelectMode="() => emits('toggleMultipleSelectMode')"
+              @toggleMultipleSelectMode="
+                () => emits('toggleMultipleSelectMode')
+              "
             />
           </div>
         </li>
@@ -184,10 +191,10 @@
         :center="true"
         :isHeaderShow="isPC"
         @submit="resendMessageConfirm()"
-        @update:show="(e) => (reSendDialogShow = e)"
+        @update:show="e => (reSendDialogShow = e)"
       >
         <p class="delDialog-title">
-          {{ TUITranslateService.t("TUIChat.确认重发该消息？") }}
+          {{ TUITranslateService.t('TUIChat.确认重发该消息？') }}
         </p>
       </Dialog>
       <!-- read receipt panel -->
@@ -203,7 +210,7 @@
         :popDirection="'right'"
       >
         <SimpleMessageList
-          :style="{height: '100%'}"
+          :style="{ height: '100%' }"
           :isMounted="isShowSimpleMessageList"
           :messageID="simpleMessageListRenderMessageID"
           @closeOverlay="isShowSimpleMessageList = false"
@@ -214,532 +221,577 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  ref,
-  watch,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  getCurrentInstance,
-} from '../../../adapter-vue';
-import TUIChatEngine, {
-  IMessageModel,
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  TUIChatService,
-} from '@tencentcloud/chat-uikit-engine-lite';
-import {
-  setInstanceMapping,
-  getBoundingClientRect,
-  getScrollInfo,
-} from '@tencentcloud/universal-api';
-// import { JoinGroupCard } from '@trtc/calls-uikit-wx';
-import Link from './link';
-import SimpleMessageList from './message-elements/simple-message-list/index.vue';
-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 ReadReceiptPanel from './read-receipt-panel/index.vue';
-import ScrollButton from './scroll-button/index.vue';
-import { isPluginMessage } from '../../../plugins/plugin-components/index';
-import Dialog from '../../common/Dialog/index.vue';
-import Drawer from '../../common/Drawer/index.vue';
-import { Toast, TOAST_TYPE } from '../../common/Toast/index';
-import ProgressMessage from '../../common/ProgressMessage/index.vue';
-import { isCreateGroupCustomMessage } from '../utils/utils';
-import { isEnabledMessageReadReceiptGlobal, deepCopy } from '../utils/utils';
-import { throttle } from '../../../utils/lodash';
-import { isPC, isH5, isMobile } from '../../../utils/env';
-import chatStorage from '../utils/chatStorage';
-import { IAudioContext } from '../../../interface';
+  import {
+    ref,
+    watch,
+    nextTick,
+    onMounted,
+    onUnmounted,
+    getCurrentInstance
+  } from '../../../adapter-vue'
+  import TUIChatEngine, {
+    IMessageModel,
+    TUIStore,
+    StoreName,
+    TUITranslateService,
+    TUIChatService
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import {
+    setInstanceMapping,
+    getBoundingClientRect,
+    getScrollInfo
+  } from '@tencentcloud/universal-api'
+  // import { JoinGroupCard } from '@trtc/calls-uikit-wx';
+  import Link from './link'
+  import SimpleMessageList from './message-elements/simple-message-list/index.vue'
+  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 ReadReceiptPanel from './read-receipt-panel/index.vue'
+  import ScrollButton from './scroll-button/index.vue'
+  import { isPluginMessage } from '../../../plugins/plugin-components/index'
+  import Dialog from '../../common/Dialog/index.vue'
+  import Drawer from '../../common/Drawer/index.vue'
+  import { Toast, TOAST_TYPE } from '../../common/Toast/index'
+  import ProgressMessage from '../../common/ProgressMessage/index.vue'
+  import { isCreateGroupCustomMessage } from '../utils/utils'
+  import {
+    isEnabledMessageReadReceiptGlobal,
+    deepCopy
+  } from '../utils/utils'
+  import { throttle } from '../../../utils/lodash'
+  import { isPC, isH5, isMobile } from '../../../utils/env'
+  import chatStorage from '../utils/chatStorage'
+  import { IAudioContext } from '../../../interface'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../constant'
 
-interface IEmits {
-  (e: 'closeInputToolBar'): void;
-  (e: 'handleEditor', message: IMessageModel, type: string): void;
-  (key: 'toggleMultipleSelectMode'): void;
-}
-
-interface IProps {
-  isGroup: boolean;
-  groupID: string;
-  isNotInGroup: boolean;
-  isMultipleSelectMode: boolean;
-}
-
-const emits = defineEmits<IEmits>();
-const props = withDefaults(defineProps<IProps>(), {
-  isGroup: false,
-  groupID: '',
-  isNotInGroup: false,
-  isMultipleSelectMode: false,
-});
-
-let selfAddValue = 0;
-let observer: any = null;
-let groupType: string | undefined;
-const sentReceiptMessageID = new Set<string>();
-const isOfficial = TUIStore.getData(StoreName.APP, 'isOfficial');
-const thisInstance = getCurrentInstance()?.proxy || getCurrentInstance();
-
-const messageList = ref<IMessageModel[]>();
-const multipleSelectedMessageIDList = ref<string[]>([]);
-const isCompleted = ref(false);
-const currentConversationID = ref('');
-const toggleID = ref('');
-const scrollTop = ref(5000); // The initial number of messages is 15, and the maximum message height is 300.
-const TYPES = ref(TUIChatEngine.TYPES);
-const isLoadingMessage = ref(false);
-const isLongpressing = ref(false);
-const blinkMessageIDList = ref<string[]>([]);
-const messageTarget = ref<IMessageModel>();
-const scrollButtonInstanceRef = ref<InstanceType<typeof ScrollButton>>();
-const historyFirstMessageID = ref<string>('');
-const isShowSimpleMessageList = ref<boolean>(false);
-const simpleMessageListRenderMessageID = ref<string>();
-const audioPlayedMapping = ref<Record<string, boolean>>({});
-
-// audio control
-const broadcastNewAudioSrc = ref<string>('');
-
-const readStatusMessage = ref<IMessageModel>();
-const isShowReadUserStatusPanel = ref<boolean>(false);
-
-// Resend Message Dialog
-const reSendDialogShow = ref(false);
-const resendMessageData = ref();
-
-const scrollToBottom = () => {
-  scrollTop.value += 300;
-  // Solve the issue where swiping to the bottom for the first time after packaging Uniapp into an app has a delay,
-  // which can be set to 300 ms.
-  const timer = setTimeout(() => {
-    scrollTop.value += 1;
-    clearTimeout(timer);
-  }, 300);
-};
-
-const onCurrentConversationIDUpdated = (conversationID: string) => {
-  currentConversationID.value = conversationID;
-  if (isEnabledMessageReadReceiptGlobal()) {
-    const { groupProfile }
-      = TUIStore.getConversationModel(conversationID) || {};
-    groupType = groupProfile?.type;
+  interface IEmits {
+    (e: 'closeInputToolBar'): void
+    (e: 'handleEditor', message: IMessageModel, type: string): void
+    (key: 'toggleMultipleSelectMode'): void
   }
 
-  if (Object.keys(audioPlayedMapping.value).length > 0) {
-    // Synchronize storage about whether the audio has been played when converstaion switched
-    chatStorage.setChatStorage('audioPlayedMapping', audioPlayedMapping.value);
+  interface IProps {
+    isGroup: boolean
+    groupID: string
+    isNotInGroup: boolean
+    isMultipleSelectMode: boolean
   }
-};
 
-onMounted(() => {
-  // Retrieve the information about whether the audio has been played from localStorage
-  audioPlayedMapping.value = chatStorage.getChatStorage('audioPlayedMapping') || {};
+  const emits = defineEmits<IEmits>()
+  const props = withDefaults(defineProps<IProps>(), {
+    isGroup: false,
+    groupID: '',
+    isNotInGroup: false,
+    isMultipleSelectMode: false
+  })
 
-  TUIStore.watch(StoreName.CHAT, {
-    messageList: onMessageListUpdated,
-    messageSource: onMessageSourceUpdated,
-    isCompleted: onChatCompletedUpdated,
-  });
+  let selfAddValue = 0
+  let observer: any = null
+  let groupType: string | undefined
+  const sentReceiptMessageID = new Set<string>()
+  const isOfficial = TUIStore.getData(StoreName.APP, 'isOfficial')
+  const thisInstance = getCurrentInstance()?.proxy || getCurrentInstance()
 
-  TUIStore.watch(StoreName.CONV, {
-    currentConversationID: onCurrentConversationIDUpdated,
-  });
+  const messageList = ref<IMessageModel[]>()
+  const multipleSelectedMessageIDList = ref<string[]>([])
+  const isCompleted = ref(false)
+  const currentConversationID = ref('')
+  const toggleID = ref('')
+  const scrollTop = ref(5000) // The initial number of messages is 15, and the maximum message height is 300.
+  const TYPES = ref(TUIChatEngine.TYPES)
+  const isLoadingMessage = ref(false)
+  const isLongpressing = ref(false)
+  const blinkMessageIDList = ref<string[]>([])
+  const messageTarget = ref<IMessageModel>()
+  const scrollButtonInstanceRef = ref<InstanceType<typeof ScrollButton>>()
+  const historyFirstMessageID = ref<string>('')
+  const isShowSimpleMessageList = ref<boolean>(false)
+  const simpleMessageListRenderMessageID = ref<string>()
+  const audioPlayedMapping = ref<Record<string, boolean>>({})
 
-  setInstanceMapping('messageList', thisInstance);
+  // audio control
+  const broadcastNewAudioSrc = ref<string>('')
 
-  uni.$on('scroll-to-bottom', scrollToLatestMessage);
-});
+  const readStatusMessage = ref<IMessageModel>()
+  const isShowReadUserStatusPanel = ref<boolean>(false)
 
-onUnmounted(() => {
-  TUIStore.unwatch(StoreName.CHAT, {
-    messageList: onMessageListUpdated,
-    isCompleted: onChatCompletedUpdated,
-  });
+  // Resend Message Dialog
+  const reSendDialogShow = ref(false)
+  const resendMessageData = ref()
 
-  TUIStore.unwatch(StoreName.CONV, {
-    currentConversationID: onCurrentConversationIDUpdated,
-  });
-
-  observer?.disconnect();
-  observer = null;
-
-  uni.$off('scroll-to-bottom');
-
-  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);
+  const scrollToBottom = () => {
+    scrollTop.value += 300
+    // Solve the issue where swiping to the bottom for the first time after packaging Uniapp into an app has a delay,
+    // which can be set to 300 ms.
+    const timer = setTimeout(() => {
+      scrollTop.value += 1
+      clearTimeout(timer)
+    }, 300)
   }
-});
 
-const handelScrollListScroll = throttle(
-  function (e: Event) {
-    scrollButtonInstanceRef.value?.judgeScrollOverOneScreen(e);
-  },
-  500,
-  { leading: true },
-);
-
-function getGlobalAudioContext(
-  audioMap: Map<string, IAudioContext>,
-  options?: { newAudioSrc: string },
-) {
-  if (options?.newAudioSrc) {
-    broadcastNewAudioSrc.value = options.newAudioSrc;
-  }
-}
-
-async function onMessageListUpdated(list: IMessageModel[]) {
-  observer?.disconnect();
-  messageList.value = list
-    .filter(message => !message.isDeleted)
-    .map((message) => {
-      message.vueForRenderKey = `${message.ID}`;
-      return message;
-    });
-  const newLastMessage = messageList.value?.[messageList.value?.length - 1];
-  if (messageTarget.value) {
-    // scroll to target message
-    scrollAndBlinkMessage(messageTarget.value);
-  } else if (!isLoadingMessage.value && !(scrollButtonInstanceRef.value?.isScrollButtonVisible && newLastMessage?.flow === 'in')) {
-    // scroll to bottom
-    nextTick(() => {
-      scrollToBottom();
-    });
-  }
-  if (isEnabledMessageReadReceiptGlobal()) {
-    nextTick(() => bindIntersectionObserver());
-  }
-}
-
-async function scrollToLatestMessage() {
-  try {
-    const { scrollHeight } = await getScrollInfo(
-      '#messageScrollList',
-      'messageList',
-    );
-    if (scrollHeight) {
-      scrollTop.value === scrollHeight
-        ? (scrollTop.value = scrollHeight + 1)
-        : (scrollTop.value = scrollHeight);
-    } else {
-      scrollToBottom();
+  const onCurrentConversationIDUpdated = (conversationID: string) => {
+    currentConversationID.value = conversationID
+    if (isEnabledMessageReadReceiptGlobal()) {
+      const { groupProfile } =
+        TUIStore.getConversationModel(conversationID) || {}
+      groupType = groupProfile?.type
     }
-  } catch (error) {
-    scrollToBottom();
-  }
-}
 
-async function onMessageSourceUpdated(message: IMessageModel) {
-  messageTarget.value = message;
-  scrollAndBlinkMessage(messageTarget.value);
-}
-
-function scrollAndBlinkMessage(message: IMessageModel) {
-  if (
-    messageList.value?.some(
-      messageListItem => messageListItem?.ID === message?.ID,
-    )
-  ) {
-    nextTick(async () => {
-      await scrollToTargetMessage(message);
-      await blinkMessage(message?.ID);
-      messageTarget.value = undefined;
-    });
-  }
-}
-
-function onChatCompletedUpdated(flag: boolean) {
-  isCompleted.value = flag;
-}
-
-const getHistoryMessageList = () => {
-  isLoadingMessage.value = true;
-  const currentFirstMessageID = messageList.value?.[0]?.ID || '';
-  TUIChatService.getMessageList().then(() => {
-    nextTick(() => {
-      historyFirstMessageID.value = currentFirstMessageID;
-      const timer = setTimeout(() => {
-        historyFirstMessageID.value = '';
-        isLoadingMessage.value = false;
-        clearTimeout(timer);
-      }, 500);
-    });
-  });
-};
-
-const openComplaintLink = () => { };
-
-// toggle message
-const handleToggleMessageItem = (
-  e: any,
-  message: IMessageModel,
-  index: number,
-  isLongpress = false,
-) => {
-  if (props.isMultipleSelectMode || props.isNotInGroup) {
-    return;
-  }
-  if (isLongpress) {
-    isLongpressing.value = true;
-  }
-  toggleID.value = message.ID;
-};
-
-// h5 long press
-let timer: number;
-const handleH5LongPress = (
-  e: any,
-  message: IMessageModel,
-  index: number,
-  type: string,
-) => {
-  if (props.isMultipleSelectMode || props.isNotInGroup) {
-    return;
-  }
-  if (!isH5) return;
-  function longPressHandler() {
-    clearTimeout(timer);
-    handleToggleMessageItem(e, message, index, true);
-  }
-  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;
-  }
-};
-
-// reedit message
-const handleEdit = (message: IMessageModel) => {
-  emits('handleEditor', message, 'reedit');
-};
-
-const resendMessage = (message: IMessageModel) => {
-  reSendDialogShow.value = true;
-  resendMessageData.value = message;
-};
-
-const handleImagePreview = (index: number) => {
-  if (!messageList.value) {
-    return;
-  }
-  const imageMessageIndex: number[] = [];
-  const imageMessageList: IMessageModel[] = messageList.value.filter((item, index) => {
-    if (
-      !item.isRevoked
-      && !item.hasRiskContent
-      && item.type === TYPES.value.MSG_IMAGE
-    ) {
-      imageMessageIndex.push(index);
-      return true;
+    if (Object.keys(audioPlayedMapping.value).length > 0) {
+      // Synchronize storage about whether the audio has been played when converstaion switched
+      chatStorage.setChatStorage(
+        'audioPlayedMapping',
+        audioPlayedMapping.value
+      )
     }
-    return false;
-  });
-  uni.previewImage({
-    current: imageMessageIndex.indexOf(index),
-    urls: imageMessageList.map(message => message.payload.imageInfoArray?.[2].url),
-    // #ifdef APP-PLUS
-    indicator: 'number',
-    // #endif
-  });
-};
-
-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);
-    }
-  });
-}
-
-function scrollTo(scrollHeight: number) {
-  scrollTop.value = scrollHeight;
-}
-
-async function bindIntersectionObserver() {
-  if (!messageList.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;
-  }
+  onMounted(() => {
+    // Retrieve the information about whether the audio has been played from localStorage
+    audioPlayedMapping.value =
+      chatStorage.getChatStorage('audioPlayedMapping') || {}
 
-  observer?.disconnect();
-  observer = uni
-    .createIntersectionObserver(thisInstance, {
-      threshold: [0.7],
-      observeAll: true,
-      // In Uni-app, the `safetip` is also included, so a negative margin is needed to exclude it.
+    TUIStore.watch(StoreName.CHAT, {
+      messageList: onMessageListUpdated,
+      messageSource: onMessageSourceUpdated,
+      isCompleted: onChatCompletedUpdated
     })
-    .relativeTo('#messageScrollList', { top: -70 });
 
-  observer?.observe('.message-li.in .message-bubble-container', (res: any) => {
-    if (sentReceiptMessageID.has(res.id)) {
-      return;
+    TUIStore.watch(StoreName.CONV, {
+      currentConversationID: onCurrentConversationIDUpdated
+    })
+
+    setInstanceMapping('messageList', thisInstance)
+
+    uni.$on('scroll-to-bottom', scrollToLatestMessage)
+  })
+
+  onUnmounted(() => {
+    TUIStore.unwatch(StoreName.CHAT, {
+      messageList: onMessageListUpdated,
+      isCompleted: onChatCompletedUpdated
+    })
+
+    TUIStore.unwatch(StoreName.CONV, {
+      currentConversationID: onCurrentConversationIDUpdated
+    })
+
+    observer?.disconnect()
+    observer = null
+
+    uni.$off('scroll-to-bottom')
+
+    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
+      )
     }
-    const matchingMessage = messageList.value.find((message: IMessageModel) => {
-      return res.id.indexOf(message.ID) > -1;
-    });
-    if (
-      matchingMessage
-      && matchingMessage.needReadReceipt
-      && matchingMessage.flow === 'in'
-      && !matchingMessage.readReceiptInfo?.isPeerRead
+  })
+
+  const handelScrollListScroll = throttle(
+    function (e: Event) {
+      scrollButtonInstanceRef.value?.judgeScrollOverOneScreen(e)
+    },
+    500,
+    { leading: true }
+  )
+
+  function getGlobalAudioContext(
+    audioMap: Map<string, IAudioContext>,
+    options?: { newAudioSrc: string }
+  ) {
+    if (options?.newAudioSrc) {
+      broadcastNewAudioSrc.value = options.newAudioSrc
+    }
+  }
+
+  async function onMessageListUpdated(list: IMessageModel[]) {
+    observer?.disconnect()
+    messageList.value = list
+      .filter(message => !message.isDeleted)
+      .map(message => {
+        message.vueForRenderKey = `${message.ID}`
+        return message
+      })
+
+    //  messageList
+    const newLastMessage =
+      messageList.value?.[messageList.value?.length - 1]
+    if (messageTarget.value) {
+      // scroll to target message
+      scrollAndBlinkMessage(messageTarget.value)
+    } else if (
+      !isLoadingMessage.value &&
+      !(
+        scrollButtonInstanceRef.value?.isScrollButtonVisible &&
+        newLastMessage?.flow === 'in'
+      )
     ) {
-      TUIChatService.sendMessageReadReceipt([matchingMessage]);
-      sentReceiptMessageID.add(res.id);
+      // scroll to bottom
+      nextTick(() => {
+        scrollToBottom()
+      })
+    }
+    if (isEnabledMessageReadReceiptGlobal()) {
+      nextTick(() => bindIntersectionObserver())
     }
-  });
-}
-
-function setReadReceiptPanelVisible(visible: boolean, message?: IMessageModel) {
-  if (visible && props.isNotInGroup) {
-    return;
   }
-  if (!visible) {
-    readStatusMessage.value = undefined;
-  } else {
-    readStatusMessage.value = message;
-  }
-  isShowReadUserStatusPanel.value = visible;
-}
 
-async function scrollToTargetMessage(message: IMessageModel) {
-  const targetMessageID = message.ID;
-  const isTargetMessageInScreen
-    = messageList.value
-    && messageList.value.some(msg => msg.ID === targetMessageID);
-  if (targetMessageID && isTargetMessageInScreen) {
-    const timer = setTimeout(async () => {
-      try {
-        const scrollViewRect = await getBoundingClientRect(
-          '#messageScrollList',
-          'messageList',
-        );
-        const originalMessageRect = await getBoundingClientRect(
-          '#tui-' + targetMessageID,
-          'messageList',
-        );
-        const { scrollTop } = await getScrollInfo(
-          '#messageScrollList',
-          'messageList',
-        );
-        const finalScrollTop
-          = originalMessageRect.top
-          + scrollTop
-          - scrollViewRect.top
-          - (selfAddValue++ % 2);
-        scrollTo(finalScrollTop);
-        clearTimeout(timer);
-      } catch (error) {
-        // todo
+  async function scrollToLatestMessage() {
+    try {
+      const { scrollHeight } = await getScrollInfo(
+        '#messageScrollList',
+        'messageList'
+      )
+      if (scrollHeight) {
+        scrollTop.value === scrollHeight
+          ? (scrollTop.value = scrollHeight + 1)
+          : (scrollTop.value = scrollHeight)
+      } else {
+        scrollToBottom()
       }
-    }, 500);
-  } else {
-    Toast({
-      message: TUITranslateService.t('TUIChat.无法定位到原消息'),
-      type: TOAST_TYPE.WARNING,
-    });
+    } catch (error) {
+      scrollToBottom()
+    }
   }
-}
 
-function onMessageListBackgroundClick() {
-  emits('closeInputToolBar');
-}
-
-watch(() => props.isMultipleSelectMode, (newValue) => {
-  if (!newValue) {
-    changeSelectMessageIDList({
-      type: 'clearAll',
-      messageID: '',
-    });
+  async function onMessageSourceUpdated(message: IMessageModel) {
+    messageTarget.value = message
+    scrollAndBlinkMessage(messageTarget.value)
   }
-});
 
-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 scrollAndBlinkMessage(message: IMessageModel) {
+    if (
+      messageList.value?.some(
+        messageListItem => messageListItem?.ID === message?.ID
+      )
+    ) {
+      nextTick(async () => {
+        await scrollToTargetMessage(message)
+        await blinkMessage(message?.ID)
+        messageTarget.value = undefined
+      })
+    }
   }
-}
 
-function mergeForwardMessage() {
-  TUIStore.update(StoreName.CUSTOM, 'multipleForwardMessageID', {
-    isMergeForward: true,
-    messageIDList: multipleSelectedMessageIDList.value,
-  });
-}
+  function onChatCompletedUpdated(flag: boolean) {
+    isCompleted.value = flag
+  }
 
-function oneByOneForwardMessage() {
-  TUIStore.update(StoreName.CUSTOM, 'multipleForwardMessageID', {
-    isMergeForward: false,
-    messageIDList: multipleSelectedMessageIDList.value,
-  });
-}
+  const getHistoryMessageList = () => {
+    isLoadingMessage.value = true
+    const currentFirstMessageID = messageList.value?.[0]?.ID || ''
+    TUIChatService.getMessageList().then(() => {
+      nextTick(() => {
+        historyFirstMessageID.value = currentFirstMessageID
+        const timer = setTimeout(() => {
+          historyFirstMessageID.value = ''
+          isLoadingMessage.value = false
+          clearTimeout(timer)
+        }, 500)
+      })
+    })
+  }
 
-function assignMessageIDInUniapp(messageID: string) {
-  simpleMessageListRenderMessageID.value = messageID;
-  isShowSimpleMessageList.value = true;
-}
+  const openComplaintLink = () => {}
 
-function setAudioPlayed(messageID: string) {
-  audioPlayedMapping.value[messageID] = true;
-}
+  // toggle message
+  const handleToggleMessageItem = (
+    e: any,
+    message: IMessageModel,
+    index: number,
+    isLongpress = false
+  ) => {
+    if (props.isMultipleSelectMode || props.isNotInGroup) {
+      return
+    }
+    if (isLongpress) {
+      isLongpressing.value = true
+    }
+    toggleID.value = message.ID
+  }
 
-defineExpose({
-  oneByOneForwardMessage,
-  mergeForwardMessage,
-  scrollToLatestMessage,
-});
+  // h5 long press
+  let timer: number
+  const handleH5LongPress = (
+    e: any,
+    message: IMessageModel,
+    index: number,
+    type: string
+  ) => {
+    if (props.isMultipleSelectMode || props.isNotInGroup) {
+      return
+    }
+    if (!isH5) return
+    function longPressHandler() {
+      clearTimeout(timer)
+      handleToggleMessageItem(e, message, index, true)
+    }
+    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
+    }
+  }
+
+  // reedit message
+  const handleEdit = (message: IMessageModel) => {
+    emits('handleEditor', message, 'reedit')
+  }
+
+  const resendMessage = (message: IMessageModel) => {
+    reSendDialogShow.value = true
+    resendMessageData.value = message
+  }
+
+  const handleImagePreview = (index: number) => {
+    if (!messageList.value) {
+      return
+    }
+    const imageMessageIndex: number[] = []
+    const imageMessageList: IMessageModel[] = messageList.value.filter(
+      (item, index) => {
+        if (
+          !item.isRevoked &&
+          !item.hasRiskContent &&
+          item.type === TYPES.value.MSG_IMAGE
+        ) {
+          imageMessageIndex.push(index)
+          return true
+        }
+        return false
+      }
+    )
+    uni.previewImage({
+      current: imageMessageIndex.indexOf(index),
+      urls: imageMessageList.map(
+        message => message.payload.imageInfoArray?.[2].url
+      ),
+      // #ifdef APP-PLUS
+      indicator: 'number'
+      // #endif
+    })
+  }
+
+  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)
+      }
+    })
+  }
+
+  function scrollTo(scrollHeight: number) {
+    scrollTop.value = scrollHeight
+  }
+
+  async function bindIntersectionObserver() {
+    if (!messageList.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
+    }
+
+    observer?.disconnect()
+    observer = uni
+      .createIntersectionObserver(thisInstance, {
+        threshold: [0.7],
+        observeAll: true
+        // In Uni-app, the `safetip` is also included, so a negative margin is needed to exclude it.
+      })
+      .relativeTo('#messageScrollList', { top: -70 })
+
+    observer?.observe(
+      '.message-li.in .message-bubble-container',
+      (res: any) => {
+        if (sentReceiptMessageID.has(res.id)) {
+          return
+        }
+        const matchingMessage = messageList.value.find(
+          (message: IMessageModel) => {
+            return res.id.indexOf(message.ID) > -1
+          }
+        )
+        if (
+          matchingMessage &&
+          matchingMessage.needReadReceipt &&
+          matchingMessage.flow === 'in' &&
+          !matchingMessage.readReceiptInfo?.isPeerRead
+        ) {
+          TUIChatService.sendMessageReadReceipt([matchingMessage])
+          sentReceiptMessageID.add(res.id)
+        }
+      }
+    )
+  }
+
+  function setReadReceiptPanelVisible(
+    visible: boolean,
+    message?: IMessageModel
+  ) {
+    if (visible && props.isNotInGroup) {
+      return
+    }
+    if (!visible) {
+      readStatusMessage.value = undefined
+    } else {
+      readStatusMessage.value = message
+    }
+    isShowReadUserStatusPanel.value = visible
+  }
+
+  async function scrollToTargetMessage(message: IMessageModel) {
+    const targetMessageID = message.ID
+    const isTargetMessageInScreen =
+      messageList.value &&
+      messageList.value.some(msg => msg.ID === targetMessageID)
+    if (targetMessageID && isTargetMessageInScreen) {
+      const timer = setTimeout(async () => {
+        try {
+          const scrollViewRect = await getBoundingClientRect(
+            '#messageScrollList',
+            'messageList'
+          )
+          const originalMessageRect = await getBoundingClientRect(
+            '#tui-' + targetMessageID,
+            'messageList'
+          )
+          const { scrollTop } = await getScrollInfo(
+            '#messageScrollList',
+            'messageList'
+          )
+          const finalScrollTop =
+            originalMessageRect.top +
+            scrollTop -
+            scrollViewRect.top -
+            (selfAddValue++ % 2)
+          scrollTo(finalScrollTop)
+          clearTimeout(timer)
+        } catch (error) {
+          // todo
+        }
+      }, 500)
+    } else {
+      Toast({
+        message: TUITranslateService.t('TUIChat.无法定位到原消息'),
+        type: TOAST_TYPE.WARNING
+      })
+    }
+  }
+
+  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 assignMessageIDInUniapp(messageID: string) {
+    simpleMessageListRenderMessageID.value = messageID
+    isShowSimpleMessageList.value = true
+  }
+
+  function setAudioPlayed(messageID: string) {
+    audioPlayedMapping.value[messageID] = true
+  }
+
+  defineExpose({
+    oneByOneForwardMessage,
+    mergeForwardMessage,
+    scrollToLatestMessage
+  })
 </script>
 <style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue b/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
index d7cc619..614cdb7 100644
--- a/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
@@ -72,6 +72,22 @@
         </a>
       </div>
     </template>
+    <template
+      v-else-if="
+        customData.businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
+      "
+    >
+      <!-- 红包 -->
+      <view class="red-envelope">
+        <view class="top-title">
+          <Icon :file="unopenedEnvelope" width="78rpx" height="80rpx" />
+          <text class="title">
+            {{ customData.title }}
+          </text>
+        </view>
+        <text class="bottom-text">积分红包</text>
+      </view>
+    </template>
     <template v-else>
       <span v-html="content.custom" />
     </template>
@@ -89,6 +105,8 @@
   import { ICustomMessagePayload } from '../../../../interface'
   import Icon from '../../../common/Icon.vue'
   import star from '../../../../assets/icon/star-light.png'
+  import unopenedEnvelope from '../../../../assets/icon/unopened-envelope.svg'
+
   interface Props {
     messageItem: IMessageModel
     content: any
@@ -187,4 +205,32 @@
       }
     }
   }
+
+  .red-envelope {
+    display: flex;
+    flex-direction: column;
+    background: #f3901f;
+    border-radius: 16rpx;
+    padding: 20rpx;
+    .top-title {
+      display: flex;
+      align-items: center;
+      padding-bottom: 10rpx;
+      margin-bottom: 10rpx;
+      border-bottom: 2rpx solid #ffffff;
+      .title {
+        width: 40vw;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #ffffff;
+      }
+    }
+    .bottom-text {
+      font-size: 24rpx;
+      color: #ffffff;
+    }
+  }
 </style>
diff --git a/TUIKit/components/TUIChat/message-list/message-elements/message-image.vue b/TUIKit/components/TUIChat/message-list/message-elements/message-image.vue
index 8ac47ec..3b0d142 100644
--- a/TUIKit/components/TUIChat/message-list/message-elements/message-image.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-image.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="image-container"
-    @click="handleImagePreview"
-  >
+  <div class="image-container" @click="handleImagePreview">
     <image
       class="message-image"
       mode="aspectFit"
@@ -14,72 +11,72 @@
 </template>
 
 <script lang="ts" setup>
-import { watchEffect, ref } from '../../../../adapter-vue';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine-lite';
-import type { IImageMessageContent } from '../../../../interface';
+  import { watchEffect, ref } from '../../../../adapter-vue'
+  import type { IMessageModel } from '@tencentcloud/chat-uikit-engine-lite'
+  import type { IImageMessageContent } from '../../../../interface'
 
-interface IProps {
-  content: IImageMessageContent;
-  messageItem: IMessageModel;
-}
-interface IEmit {
-  (key: 'previewImage'): void;
-}
+  interface IProps {
+    content: IImageMessageContent
+    messageItem: IMessageModel
+  }
+  interface IEmit {
+    (key: 'previewImage'): void
+  }
 
-const emits = defineEmits<IEmit>();
-const props = withDefaults(
-  defineProps<IProps>(),
-  {
+  const emits = defineEmits<IEmit>()
+  const props = withDefaults(defineProps<IProps>(), {
     content: () => ({}),
-    messageItem: () => ({} as IMessageModel),
-  },
-);
+    messageItem: () => ({} as IMessageModel)
+  })
 
-const DEFAULT_MAX_SIZE = 155;
-const imageStyles = ref({ width: 'auto', height: 'auto' });
+  const DEFAULT_MAX_SIZE = 155
+  const imageStyles = ref({ width: 'auto', height: 'auto' })
 
-const genImageStyles = (value: { width?: any; height?: any }) => {
-  const { width, height } = value;
-  if (width === 0 || height === 0) {
-    return;
+  const genImageStyles = (value: { width?: any; height?: any }) => {
+    const { width, height } = value
+    if (width === 0 || height === 0) {
+      return
+    }
+
+    let imageWidth = 0
+    let imageHeight = 0
+    if (width >= height) {
+      imageWidth = DEFAULT_MAX_SIZE
+      imageHeight = (DEFAULT_MAX_SIZE * height) / width
+    } else {
+      imageWidth = (DEFAULT_MAX_SIZE * width) / height
+      imageHeight = DEFAULT_MAX_SIZE
+    }
+    imageStyles.value.width = imageWidth + 'px'
+    imageStyles.value.height = imageHeight + 'px'
   }
 
-  let imageWidth = 0;
-  let imageHeight = 0;
-  if (width >= height) {
-    imageWidth = DEFAULT_MAX_SIZE;
-    imageHeight = (DEFAULT_MAX_SIZE * height) / width;
-  } else {
-    imageWidth = (DEFAULT_MAX_SIZE * width) / height;
-    imageHeight = DEFAULT_MAX_SIZE;
+  watchEffect(() => {
+    genImageStyles(props.content)
+  })
+
+  const imageLoad = (event: Event) => {
+    genImageStyles(event.detail)
   }
-  imageStyles.value.width = imageWidth + 'px';
-  imageStyles.value.height = imageHeight + 'px';
-};
 
-watchEffect(() => {
-  genImageStyles(props.content);
-});
-
-const imageLoad = (event: Event) => {
-  genImageStyles(event.detail);
-};
-
-const handleImagePreview = () => {
-  if (props.messageItem?.status === 'success' || props.messageItem.progress === 1) {
-    emits('previewImage');
+  const handleImagePreview = () => {
+    if (
+      props.messageItem?.status === 'success' ||
+      props.messageItem.progress === 1
+    ) {
+      emits('previewImage')
+    }
   }
-};
 </script>
 
 <style lang="scss" scoped>
-.image-container {
-  position: relative;
-  background-color: #f4f4f4;
-  font-size: 0;
+  .image-container {
+    position: relative;
+    background-color: #f4f4f4;
+    font-size: 0;
 
-  .message-image {
-    max-width: 150px;
+    .message-image {
+      max-width: 150px;
+    }
   }
-}
 </style>
diff --git a/TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue b/TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue
index 768abf4..7f991f2 100644
--- a/TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue
@@ -1,21 +1,20 @@
 <template>
   <div>
-    <div
-      class="message-record-container"
-      @click="openMergeDetail"
-    >
-      <div
-        class="record-title"
-      >
+    <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)"
+          v-for="(item, index) in props.renderData.abstractList.slice(
+            0,
+            7
+          )"
           :key="index"
           class="record-abstract-item"
         >
-          {{ transformTextWithKeysToEmojiNames(item) }}
+          <!-- {{ transformTextWithKeysToEmojiNames(item) }} -->
+          {{ topName(item) }}
         </div>
       </div>
       <div class="record-footer">
@@ -52,86 +51,98 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, withDefaults } from '../../../../../adapter-vue';
-import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine-lite';
-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';
+  import { ref, computed, withDefaults } from '../../../../../adapter-vue'
+  import {
+    TUITranslateService,
+    IMessageModel
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  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'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../../constant'
 
-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;
+  interface IEmits {
+    (e: 'assignMessageIDInUniapp', messageID: string): void
   }
-  if (!isUniFrameWork) {
-    isMessageListVisible.value = true;
-  } else {
-    emits('assignMessageIDInUniapp', props.messageItem.ID);
-  }
-}
 
-function closeMergeDetail() {
-  isMessageListVisible.value = false;
-}
+  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)
+
+  // 把替[自定义消息]替换为积分红包
+  const topName = (str: string) => {
+    if (str.includes('[自定义消息]')) {
+      return str.replace('[自定义消息]', '[积分红包]')
+    } else {
+      return transformTextWithKeysToEmojiNames(str)
+    }
+  }
+
+  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;
+  :not(not) {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-width: 0;
   }
 
-  .record-footer {
-    color: #888;
-    font-size: 11px;
-    padding-top: 5px;
-    border-top: 1px solid #eee;
+  .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/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/index.vue b/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/index.vue
index 579ee84..aa39066 100644
--- a/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/index.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/index.vue
@@ -2,20 +2,15 @@
   <div
     :class="{
       'simple-message-list-container': true,
-      'simple-message-list-container-mobile': isMobile,
+      '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 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>
 
@@ -23,9 +18,7 @@
         {{ currentMergeMessageInfo.title }}
       </span>
     </div>
-    <div v-if="isDownloadOccurError">
-      Load Merge Message Error
-    </div>
+    <div v-if="isDownloadOccurError">Load Merge Message Error</div>
     <div
       v-else-if="isMergeMessageInfoLoaded"
       ref="simpleMessageListRef"
@@ -35,7 +28,7 @@
         v-for="item in currentMergeMessageInfo.messageList"
         :key="item.ID"
         :class="{
-          'message-item': true,
+          'message-item': true
         }"
       >
         <MessageContainer
@@ -50,20 +43,21 @@
             class="message-text"
           >
             <span
-              v-for="(textInfo, index) in parseTextToRenderArray(item.messageBody[0].payload['text'])"
+              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>
+              <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 -->
@@ -73,10 +67,12 @@
           >
             <img
               class="image"
-              :src="(item.messageBody[0].payload)['imageInfoArray'][2]['url']"
+              :src="
+                item.messageBody[0].payload['imageInfoArray'][2]['url']
+              "
               mode="widthFix"
               alt="image"
-            >
+            />
           </div>
           <!-- video -->
           <div
@@ -85,29 +81,30 @@
           >
             <div
               v-if="isUniFrameWork"
-              @click="previewVideoInUniapp((item.messageBody[0].payload)['remoteVideoUrl'])"
+              @click="
+                previewVideoInUniapp(
+                  item.messageBody[0].payload['remoteVideoUrl']
+                )
+              "
             >
               <image
                 class="image"
-                :src="(item.messageBody[0].payload)['thumbUrl']"
+                :src="item.messageBody[0].payload['thumbUrl']"
                 mode="widthFix"
                 alt="image"
               />
-              <Icon
-                class="video-play-icon"
-                :file="playIcon"
-              />
+              <Icon class="video-play-icon" :file="playIcon" />
             </div>
             <video
               v-else
               class="video"
               controls
-              :poster="(item.messageBody[0].payload)['thumbUrl']"
+              :poster="item.messageBody[0].payload['thumbUrl']"
             >
               <source
-                :src="(item.messageBody[0].payload)['remoteVideoUrl']"
+                :src="item.messageBody[0].payload['remoteVideoUrl']"
                 type="video/mp4"
-              >
+              />
             </video>
           </div>
           <!-- audio -->
@@ -115,7 +112,7 @@
             v-else-if="item.messageBody[0].type === TYPES.MSG_AUDIO"
             class="message-audio"
           >
-            <span>{{ TUITranslateService.t("TUIChat.语音") }}&nbsp;</span>
+            <span>{{ TUITranslateService.t('TUIChat.语音') }}&nbsp;</span>
             <span>{{ item.messageBody[0].payload.second }}s</span>
           </div>
           <!-- big face -->
@@ -127,7 +124,7 @@
               class="image"
               :src="resolveBigFaceUrl(item.messageBody[0].payload.data)"
               alt="face"
-            >
+            />
           </div>
           <!-- file -->
           <div
@@ -153,6 +150,10 @@
               :renderData="item.messageBody[0].payload"
             />
           </div>
+          <!-- 红包 -->
+          <div v-else-if="isRedEnvelope(item)">
+            {{ redEnvelopeText(item) }}
+          </div>
           <!-- custom -->
           <div v-else-if="item.messageBody[0].type === TYPES.MSG_CUSTOM">
             {{ TUITranslateService.t('TUIChat.[自定义消息]') }}
@@ -164,270 +165,309 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from '../../../../../adapter-vue';
-import TUIChatEngine, {
-  TUIStore,
-  TUIChatService,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine-lite';
-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';
+  import { computed, ref, watch } from '../../../../../adapter-vue'
+  import TUIChatEngine, {
+    TUIStore,
+    TUIChatService,
+    TUITranslateService
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  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'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../../constant'
 
-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;
+  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
   }
-  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;
+
+  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')
     }
   }
-  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.');
+  function previewVideoInUniapp(url: string) {
+    if (isUniFrameWork) {
+      const encodedUrl = encodeURIComponent(url)
+      uni.navigateTo({
+        url: `/TUIKit/components/TUIChat/video-play?videoUrl=${encodedUrl}`
+      })
     }
-    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';
+  function resolveBigFaceUrl(bigFaceKey: string): string {
+    let url = ''
+    if (bigFaceKey.indexOf('@custom') > -1) {
+      url = CUSTOM_BIG_EMOJI_URL + bigFaceKey
     } else {
-      url += '.png';
+      url = DEFAULT_BIG_EMOJI_URL + bigFaceKey
+      if (url.indexOf('@2x') === -1) {
+        url += '@2x.png'
+      } else {
+        url += '.png'
+      }
     }
+    return url
+  }
+
+  /** 是否红包 */
+  const isRedEnvelope = (item: any) => {
+    if (item.messageBody[0]?.payload?.data) {
+      const businessID = JSON?.parse(
+        item.messageBody[0]?.payload?.data
+      )?.businessID
+      return businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
+    }
+    return false
+  }
+  /** 红包文案 */
+  const redEnvelopeText = (item: any) => {
+    const payload = JSON.parse(item.messageBody[0]?.payload?.data)
+    return `[积分红包] ${payload.title}`
   }
-  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;
+  :not(not) {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    box-sizing: border-box;
   }
 
-  .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;
+  .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;
 
-    .back {
-      flex-direction: row;
-      align-items: center;
-      position: absolute;
-      left: 10px;
-      cursor: pointer;
+    &-mobile {
+      width: 100vw;
+      height: 100vh;
+      min-width: auto;
+      border-radius: 0;
     }
 
-    .title {
+    .header-container {
       width: 100%;
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      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-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;
+  .message-item {
     flex-direction: row;
+    margin: 10px 0;
+  }
 
-    .text {
-      vertical-align: bottom;
+  .message-text {
+    flex-flow: row wrap;
+    display: inline;
+
+    &-container {
       display: inline;
-      word-break: break-all;
-    }
+      flex: 0 0 auto;
+      flex-direction: row;
 
-    .simple-emoji {
-      display: inline-flex;
-      width: 20px;
-      height: 20px;
+      .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 {
+  .message-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;
-  }
-}
+    overflow: hidden;
 
-.message-combine {
-  max-width: 300px;
-}
+    .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/TUIKit/components/TUIContact/utils/index.ts b/TUIKit/components/TUIContact/utils/index.ts
index 1cc7b6f..7e0c19a 100644
--- a/TUIKit/components/TUIContact/utils/index.ts
+++ b/TUIKit/components/TUIContact/utils/index.ts
@@ -250,7 +250,23 @@ export const refuseFriendApplication = (userID: string) => {
 
 // Dismiss group
 export const dismissGroup = (groupID: string) => {
-  deleteImGroup(groupID)
+  // deleteImGroup(groupID)
+  //   .then(() => {
+  //     Toast({
+  //       message: TUITranslateService.t('TUIContact.解散群聊成功'),
+  //       type: TOAST_TYPE.SUCCESS
+  //     })
+  //     TUIGlobal?.updateContactSearch && TUIGlobal?.updateContactSearch()
+  //     switchTab('/TUIKit/components/TUIConversation/index')
+  //   })
+  //   .catch((error: any) => {
+  //     console.warn('dismiss group failed:', error)
+  //     Toast({
+  //       message: TUITranslateService.t('TUIContact.解散群聊失败'),
+  //       type: TOAST_TYPE.ERROR
+  //     })
+  //   })
+  TUIGroupService.dismissGroup(groupID)
     .then(() => {
       Toast({
         message: TUITranslateService.t('TUIContact.解散群聊成功'),
@@ -266,33 +282,34 @@ export const dismissGroup = (groupID: string) => {
         type: TOAST_TYPE.ERROR
       })
     })
-  // 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) => {
-  console.log('222')
-  quitImGroup(groupID)
+  // console.log('222')
+  // quitImGroup(groupID)
+  //   .then(() => {
+  //     Toast({
+  //       message: TUITranslateService.t('TUIContact.退出群组成功'),
+  //       type: TOAST_TYPE.SUCCESS
+  //     })
+
+  //     switchTab('/TUIKit/components/TUIConversation/index')
+  //   })
+  //   .catch((error: any) => {
+  //     console.warn('quit group failed:', error)
+  //     Toast({
+  //       message: TUITranslateService.t('TUIContact.退出群组失败'),
+  //       type: TOAST_TYPE.ERROR
+  //     })
+  //   })
+
+  TUIGroupService.quitGroup(groupID)
     .then(() => {
       Toast({
         message: TUITranslateService.t('TUIContact.退出群组成功'),
         type: TOAST_TYPE.SUCCESS
       })
-
       switchTab('/TUIKit/components/TUIConversation/index')
     })
     .catch((error: any) => {
@@ -302,21 +319,6 @@ export const quitGroup = (groupID: string) => {
         type: TOAST_TYPE.ERROR
       })
     })
-
-  // 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
diff --git a/TUIKit/components/TUIConversation/conversation-list/index.vue b/TUIKit/components/TUIConversation/conversation-list/index.vue
index 78e9493..7483570 100644
--- a/TUIKit/components/TUIConversation/conversation-list/index.vue
+++ b/TUIKit/components/TUIConversation/conversation-list/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="conversationListInnerDomRef"
-    class="tui-conversation-list"
-  >
+  <div ref="conversationListInnerDomRef" class="tui-conversation-list">
     <ActionsMenu
       v-if="isShowOverlay"
       :selectedConversation="currentConversation"
@@ -16,7 +13,7 @@
       :key="index"
       :class="[
         'tui-conversation-content',
-        isMobile && 'tui-conversation-content-h5 disable-select',
+        isMobile && 'tui-conversation-content-h5 disable-select'
       ]"
     >
       <div
@@ -25,11 +22,15 @@
           'tui-conversation-item',
           currentConversationID === conversation.conversationID &&
             'tui-conversation-item-selected',
-          conversation.isPinned && 'tui-conversation-item-pinned',
+          conversation.isPinned && 'tui-conversation-item-pinned'
         ]"
         @click="enterConversationChat(conversation.conversationID)"
-        @longpress="showConversationActionMenu($event, conversation, index)"
-        @contextmenu="showConversationActionMenu($event, conversation, index, true)"
+        @longpress="
+          showConversationActionMenu($event, conversation, index)
+        "
+        @contextmenu="
+          showConversationActionMenu($event, conversation, index, true)
+        "
       >
         <aside class="left">
           <Avatar
@@ -38,17 +39,19 @@
             size="40px"
           />
           <div
-            v-if="userOnlineStatusMap && isShowUserOnlineStatus(conversation)"
+            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
+              Object.keys(userOnlineStatusMap).includes(
+                conversation.userProfile.userID
+              ) &&
+              userOnlineStatusMap[conversation.userProfile.userID]
+                .statusType === 1
                 ? 'online-status-online'
-                : 'online-status-offline',
+                : 'online-status-offline'
             ]"
           />
           <span
@@ -56,7 +59,9 @@
             class="num"
           >
             {{
-              conversation.unreadCount > 99 ? "99+" : conversation.unreadCount
+              conversation.unreadCount > 99
+                ? '99+'
+                : conversation.unreadCount
             }}
           </span>
           <span
@@ -69,26 +74,40 @@
             <label class="content-header-label">
               <p class="name">{{ conversation.getShowName() }}</p>
             </label>
-            <div class="middle-box">
+            <div v-if="isRedEnvelope(conversation)" class="middle-box">
+              <div class="middle-box-content">
+                {{ redEnvelopeText(conversation) }}
+              </div>
+            </div>
+            <div v-else class="middle-box">
               <span
-                v-if="conversation.draftText && conversation.conversationID !== currentConversationID"
+                v-if="
+                  conversation.draftText &&
+                  conversation.conversationID !== currentConversationID
+                "
                 class="middle-box-draft"
-              >{{ TUITranslateService.t('TUIChat.[草稿]') }}</span>
+              >
+                {{ TUITranslateService.t('TUIChat.[草稿]') }}
+              </span>
               <span
                 v-else-if="
                   conversation.type === 'GROUP' &&
-                    conversation.groupAtInfoList &&
-                    conversation.groupAtInfoList.length > 0
+                  conversation.groupAtInfoList &&
+                  conversation.groupAtInfoList.length > 0
                 "
                 class="middle-box-at"
-              >{{ conversation.getGroupAtInfo() }}</span>
+              >
+                {{ conversation.getGroupAtInfo() }}
+              </span>
               <div class="middle-box-content">
-                {{ conversation.getLastMessage("text") }}
+                {{ conversation.getLastMessage('text') }}
               </div>
             </div>
           </div>
           <div class="content-footer">
-            <span class="time">{{ conversation.getLastMessage("time") }}</span>
+            <span class="time">
+              {{ conversation.getLastMessage('time') }}
+            </span>
             <Icon
               v-if="conversation.isMuted"
               :file="muteIcon"
@@ -102,210 +121,262 @@
 </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-lite';
-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();
+  interface IUserStatus {
+    statusType: number
+    customStatus: string
   }
-});
 
-onUnmounted(() => {
-  TUIStore.unwatch(StoreName.CONV, {
-    currentConversationID: onCurrentConversationIDUpdated,
-    conversationList: onConversationListUpdated,
-    currentConversation: onCurrentConversationUpdated,
-  });
+  interface IUserStatusMap {
+    [userID: string]: IUserStatus
+  }
 
-  TUIStore.unwatch(StoreName.USER, {
-    displayOnlineStatus: onDisplayOnlineStatusUpdated,
-    userStatusList: onUserStatusListUpdated,
-  });
-});
+  import { ref, onMounted, onUnmounted } from '../../../adapter-vue'
+  import TUIChatEngine, {
+    TUIStore,
+    StoreName,
+    TUIConversationService,
+    TUITranslateService,
+    IConversationModel
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  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'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../constant'
 
-const isShowUserOnlineStatus = (conversation: IConversationModel): boolean => {
-  return (
-    displayOnlineStatus.value
-    && conversation.type === TUIChatEngine.TYPES.CONV_C2C
-  );
-};
+  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>()
 
-const showConversationActionMenu = (
-  event: Event,
-  conversation: IConversationModel,
-  index: number,
-  isContextMenuEvent?: boolean,
-) => {
-  if (isContextMenuEvent) {
-    event.preventDefault();
-    if (isUniFrameWork) {
-      return;
+  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()
     }
-  }
-  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;
-  }
-};
+  onUnmounted(() => {
+    TUIStore.unwatch(StoreName.CONV, {
+      currentConversationID: onCurrentConversationIDUpdated,
+      conversationList: onConversationListUpdated,
+      currentConversation: onCurrentConversationUpdated
+    })
 
-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 - 44,
-          // @ts-expect-error in uniapp event has touches property
-          left: event.touches[0].pageX,
-          conversationHeight: data.height,
-        };
-        isShowOverlay.value = true;
+    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
       }
-    }).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;
+    currentConversation.value = conversation
+    lastestOpenActionsMenuTime = Date.now()
+    getActionsMenuPosition(event, index)
   }
-};
 
-const enterConversationChat = (conversationID: string) => {
-  emits('handleSwitchConversation', conversationID);
-  TUIConversationService.switchConversation(conversationID);
-};
-
-function addLongPressHandler() {
-  if (!conversationListInnerDomRef.value) {
-    return;
+  const closeConversationActionMenu = () => {
+    // Prevent continuous triggering of overlay tap events
+    if (
+      lastestOpenActionsMenuTime &&
+      Date.now() - lastestOpenActionsMenuTime > 300
+    ) {
+      currentConversation.value = undefined
+      isShowOverlay.value = false
+    }
   }
-  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',
+
+  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 - 44,
+              // @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
+        )
       },
-    },
-  });
-}
-
-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,
-    );
+      options: {
+        eventDelegation: {
+          subSelector: '.tui-conversation-content'
+        }
+      }
+    })
   }
-}
-// Expose to the parent component and close actionsMenu when a sliding event is detected
-defineExpose({ closeChildren: closeConversationActionMenu });
+
+  function onCurrentConversationUpdated(
+    conversation: IConversationModel
+  ) {
+    currentConversation.value = conversation
+  }
+
+  /** 是否红包 */
+  const isRedEnvelope = (item: IConversationModel) => {
+    if (item?.lastMessage?.payload?.data) {
+      const businessID = JSON?.parse(
+        item?.lastMessage?.payload?.data
+      )?.businessID
+      return businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
+    }
+    return false
+  }
+  /** 红包文案 */
+  const redEnvelopeText = (item: IConversationModel) => {
+    const payload = JSON.parse(item.lastMessage?.payload?.data)
+    const text = item.getLastMessage('text')?.split(':')
+    console.log(text)
+    if (text && text.length > 1) {
+      return `${text[0]}:[积分红包] ${payload.title}`
+    } else {
+      return `[积分红包] ${payload.title}`
+    }
+  }
+
+  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;
-}
+  .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/TUIKit/components/TUIGroup/create-group/index.vue b/TUIKit/components/TUIGroup/create-group/index.vue
index 4b1c508..df6a0c7 100644
--- a/TUIKit/components/TUIGroup/create-group/index.vue
+++ b/TUIKit/components/TUIGroup/create-group/index.vue
@@ -30,13 +30,13 @@
               <Icon :file="rightIcon" />
             </span>
           </li>
-          <li class="group-list-item" @click="cbPopupShow.open('bottom')">
+          <!-- <li class="group-list-item" @click="cbPopupShow.open('bottom')">
             <label class="group-list-item-label">申请加群方式</label>
             <span class="group-h5-list-item-content">
               <p class="content">{{ applyJoinOptionName }}</p>
               <Icon :file="rightIcon" />
             </span>
-          </li>
+          </li> -->
           <li class="group-list-introduction">
             <div class="group-list-item">
               <label class="group-list-item-label">
@@ -261,59 +261,55 @@
 
   const createGroup = async (options: any) => {
     try {
-      const data = {
-        applyJoinOption: applyJoinOption.value,
-        faceUrl: groupAvatar.value,
-        groupName: options.name,
-        groupType: options.type,
-        memberList: options.memberList.map((item: IUserProfile) => {
-          return { memberAccount: item.userID }
-        })
-      }
-
-      const res = await createImGroup(data)
-      const e = res.data
-      // const type = e.groupType
-      // if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
-      //   await TUIGroupService.joinGroup({
-      //     groupID: e.groupID,
-      //     applyMessage: ''
+      // const data = {
+      //   applyJoinOption: applyJoinOption.value,
+      //   faceUrl: groupAvatar.value,
+      //   groupName: options.name,
+      //   groupType: options.type,
+      //   memberList: options.memberList.map((item: IUserProfile) => {
+      //     return { memberAccount: item.userID }
       //   })
       // }
 
-      const newRes = await TUIGroupService.getGroupProfile({
-        groupID: e.groupId
-      })
+      // const res = await createImGroup(data)
+      // const e = res.data
 
-      handleCompleteCreate(newRes.data.group)
-      Toast({
-        message: TUITranslateService.t('TUIGroup.群组创建成功'),
-        type: TOAST_TYPE.SUCCESS
-      })
+      // const newRes = await TUIGroupService.getGroupProfile({
+      //   groupID: e.groupId
+      // })
 
-      // ========= 原本逻辑
-      // 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)
-      // console.log(res)
-      // const { type } = res.data.group
-      // if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
-      //   await TUIGroupService.joinGroup({
-      //     groupID: res.data.group.groupID,
-      //     applyMessage: ''
-      //   })
-      // }
-      // handleCompleteCreate(res.data.group)
+      // handleCompleteCreate(newRes.data.group)
       // Toast({
       //   message: TUITranslateService.t('TUIGroup.群组创建成功'),
       //   type: TOAST_TYPE.SUCCESS
       // })
+
+      // ========= 原本逻辑
+      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,
+        avatar: groupAvatar.value
+      })
+      console.log(res)
+      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,
diff --git a/TUIKit/components/TUIGroup/manage-group/index.vue b/TUIKit/components/TUIGroup/manage-group/index.vue
index a26786c..5eddff0 100644
--- a/TUIKit/components/TUIGroup/manage-group/index.vue
+++ b/TUIKit/components/TUIGroup/manage-group/index.vue
@@ -238,7 +238,11 @@
   import Server from '../server'
   import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus'
   import { IFriendProfile, IGroupMember } from '../../../interface'
-  import { createImGroup, deleteImGroup, quitImGroup } from '../../../../api/tui-kit'
+  import {
+    createImGroup,
+    deleteImGroup,
+    quitImGroup
+  } from '../../../../api/tui-kit'
 
   const TUIGroupServer = Server.getInstance()
   const TUIConstants = TUIGroupServer.constants
@@ -400,47 +404,63 @@
 
   const updateProfile = async (newGroupProfile: any) => {
     const { key, value } = newGroupProfile
-    if (key === 'muteAllMembers') {
-      const options: any = {
-        groupID: currentGroup.value.groupID,
-        [key]: value
-      }
-      TUIGroupService.updateGroupProfile(options)
-        .then((res: any) => {
-          console.log(res.data)
-          currentGroup.value = res.data.group
-          editLableName.value = ''
-        })
-        .catch((error: any) => {
-          Toast({
-            message: error?.message,
-            type: TOAST_TYPE.ERROR
-          })
-        })
-    } else {
-      const newKey = {
-        notification: 'notification',
-        name: 'groupName'
-      }[key]
-      const options: any = {
-        groupId: currentGroup.value.groupID,
-        [newKey]: value
-      }
-      await createImGroup(options, 'put')
-      TUIGroupService.getGroupProfile({
-        groupID: currentGroup.value.groupID
-      })
-        .then((res: any) => {
-          currentGroup.value = res.data.group
-          editLableName.value = ''
-        })
-        .catch((error: any) => {
-          Toast({
-            message: error?.message,
-            type: TOAST_TYPE.ERROR
-          })
-        })
+    const options: any = {
+      groupID: currentGroup.value.groupID,
+      [key]: value
     }
+    TUIGroupService.updateGroupProfile(options)
+      .then((res: any) => {
+        console.log(res.data)
+        currentGroup.value = res.data.group
+        editLableName.value = ''
+      })
+      .catch((error: any) => {
+        Toast({
+          message: error?.message,
+          type: TOAST_TYPE.ERROR
+        })
+      })
+    // if (key === 'muteAllMembers') {
+    //   const options: any = {
+    //     groupID: currentGroup.value.groupID,
+    //     [key]: value
+    //   }
+    //   TUIGroupService.updateGroupProfile(options)
+    //     .then((res: any) => {
+    //       console.log(res.data)
+    //       currentGroup.value = res.data.group
+    //       editLableName.value = ''
+    //     })
+    //     .catch((error: any) => {
+    //       Toast({
+    //         message: error?.message,
+    //         type: TOAST_TYPE.ERROR
+    //       })
+    //     })
+    // } else {
+    //   const newKey = {
+    //     notification: 'notification',
+    //     name: 'groupName'
+    //   }[key]
+    //   const options: any = {
+    //     groupId: currentGroup.value.groupID,
+    //     [newKey]: value
+    //   }
+    //   await createImGroup(options, 'put')
+    //   TUIGroupService.getGroupProfile({
+    //     groupID: currentGroup.value.groupID
+    //   })
+    //     .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) => {
@@ -656,8 +676,8 @@
   }
 
   const dismissGroup = async (group: any) => {
-    await deleteImGroup(group.groupID)
-    // await TUIGroupService.dismissGroup(group.groupID);
+    // await deleteImGroup(group.groupID)
+    await TUIGroupService.dismissGroup(group.groupID)
     enableSampleTaskStatus('dismissGroup')
     Toast({
       message: TUITranslateService.t('TUIGroup.群组解散成功'),
@@ -874,8 +894,8 @@
   }
 
   const quitGroup = async (group: any) => {
-    await quitImGroup(group.groupID)
-    // await TUIGroupService.quitGroup(group.groupID)
+    // await quitImGroup(group.groupID)
+    await TUIGroupService.quitGroup(group.groupID)
     clearGroupInfo()
   }
 
diff --git a/TUIKit/constant.ts b/TUIKit/constant.ts
index c05e123..8215021 100644
--- a/TUIKit/constant.ts
+++ b/TUIKit/constant.ts
@@ -18,6 +18,8 @@ export const CHAT_MSG_CUSTOM_TYPE = {
   LINK: "text_link",
   CALL: 1,
   ORDER: "order",
+  /** 红包 */
+  RED_ENVELOPE: "redEnvelope"
 };
 
 export const DIALOG_CONTENT = {
diff --git a/api/tui-kit.js b/api/tui-kit.js
index 7695327..7d998ba 100644
--- a/api/tui-kit.js
+++ b/api/tui-kit.js
@@ -40,3 +40,12 @@ export const deleteImGroupMember = (groupId, memberId) => {
     data: { groupId, memberId }
   })
 }
+
+/** 发红包 */
+export const sendRedEnvelope = data => {
+  return http({
+    url: '/api/system/pointsRedPacket/send',
+    method: 'post',
+    data
+  })
+}
diff --git a/uni_modules/uu-pwdModal/components/uu-pwdModal/uu-pwdModal.vue b/uni_modules/uu-pwdModal/components/uu-pwdModal/uu-pwdModal.vue
index 6245e62..f83ec76 100644
--- a/uni_modules/uu-pwdModal/components/uu-pwdModal/uu-pwdModal.vue
+++ b/uni_modules/uu-pwdModal/components/uu-pwdModal/uu-pwdModal.vue
@@ -1,48 +1,46 @@
 <template>
-  <view>
-    <uni-popup ref="popup" type="bottom">
-      <view class="modal">
-        <view class="title">
-          请输入支付密码
-          <view class="close" @click="close">
-            <uni-icons type="closeempty" size="20"></uni-icons>
-          </view>
-        </view>
-
-        <view class="input">
-          <view
-            class="row"
-            v-for="i in 6"
-            :class="current == i ? 'active' : ''"
-          >
-            <view class="pwd" v-if="current > i"></view>
-          </view>
-        </view>
-
-        <view class="tip" @click="forgetPwd">忘记密码？</view>
-
-        <view class="keyboard">
-          <view
-            class="row"
-            v-for="i in key"
-            :key="i"
-            :class="{ 'no-i': i === -2 }"
-            @click="i !== -2 && input(i)"
-          >
-            <uni-icons
-              v-if="i == -1"
-              type="closeempty"
-              size="24"
-            ></uni-icons>
-            <text v-if="i != -1">
-              {{ i >= 0 ? i : '' }}
-            </text>
-          </view>
+  <uni-popup ref="popup" type="bottom">
+    <view class="modal">
+      <view class="title">
+        请输入支付密码
+        <view class="close" @click="close">
+          <uni-icons type="closeempty" size="20"></uni-icons>
         </view>
       </view>
-      <view></view>
-    </uni-popup>
-  </view>
+
+      <view class="input">
+        <view
+          class="row"
+          v-for="i in 6"
+          :class="current == i ? 'active' : ''"
+        >
+          <view class="pwd" v-if="current > i"></view>
+        </view>
+      </view>
+
+      <view class="tip" @click="forgetPwd">忘记密码？</view>
+
+      <view class="keyboard">
+        <view
+          class="row"
+          v-for="i in key"
+          :key="i"
+          :class="{ 'no-i': i === -2 }"
+          @click="i !== -2 && input(i)"
+        >
+          <uni-icons
+            v-if="i == -1"
+            type="closeempty"
+            size="24"
+          ></uni-icons>
+          <text v-if="i != -1">
+            {{ i >= 0 ? i : '' }}
+          </text>
+        </view>
+      </view>
+    </view>
+    <view></view>
+  </uni-popup>
 </template>
 <script>
   export default {
@@ -55,9 +53,9 @@
     },
     methods: {
       forgetPwd() {
-        uni.navigateTo({
-          url: '/pages/myInfo/changePayPwd'
-        })
+        // uni.navigateTo({
+        //   url: '/pages/myInfo/changePayPwd'
+        // })
       },
       open() {
         this.$refs.popup.open()