@tencentcloud/ai-desk-customer-vue 1.4.0 → 1.5.1

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 1.5.1 @2025.6.23
+
+### Fixed
+- 修复 vue2.6 项目接入时报错。
+
+## 1.5.0 @2025.6.19
+
+### Features
+- 支持转人工后会话超时提醒。
+- 优化消息气泡、欢迎卡片、评价消息等样式。
+- 优化引用消息的交互体验。
+- 优化流式消息 url 的识别提取。
+
+### Fixed
+- vue2 接入报错问题。
+- 转人工成功后，消息从已读变为未读的问题。
+
 ## 1.4.0 @2025.5.27
 
 ### Features

package/assets/feedback_dialog_close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6878C16.5236 21.6878 20.3 17.8597 20.3 13.0001C20.3 8.14041 16.5236 4.3123 12 4.3123C7.47641 4.3123 3.7 8.14041 3.7 13.0001C3.7 17.8597 7.47641 21.6878 12 21.6878ZM12 23.3878C17.5228 23.3878 22 18.7371 22 13.0001C22 7.26306 17.5228 2.6123 12 2.6123C6.47715 2.6123 2 7.26306 2 13.0001C2 18.7371 6.47715 23.3878 12 23.3878ZM12 14.2248L9.05435 17.2847L7.87534 16.06L10.821 13.0001L7.87459 9.93943L9.05359 8.71471L12 11.7754L14.9464 8.71471L16.1254 9.93943L13.179 13.0001L16.1247 16.06L14.9457 17.2847L12 14.2248Z" fill="#8F9AB2"/>
+</svg>

package/assets/feedback_dislike_after.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.93575 12.8076C5.98695 14.02 6.63253 14.5243 7.164 14.734C7.5547 14.8882 7.92273 14.5824 7.99512 14.1686L8.18994 13.0553C8.42499 11.7119 9.42462 10.6306 10.7454 10.2909L10.8549 10.2627L10.8549 3.07497L3.82176 3.07497C3.25596 3.07497 2.77309 3.48403 2.68007 4.04214L1.71554 8.96129C1.59796 9.66679 2.142 10.309 2.85723 10.309L5.93575 10.3091C5.93575 10.3091 5.84768 10.7223 5.93575 12.8076ZM12.9133 2.49994L12.9132 10.4999L14.2466 10.4999L14.2466 2.49994L12.9133 2.49994Z" fill="#727A8A"/>
+</svg>

package/assets/feedback_dislike_before.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8053_26348)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.95155 14.2724C6.34804 14.4288 6.74452 14.3465 7.03909 14.1325C7.32135 13.9274 7.50548 13.6096 7.56518 13.2684L7.76 12.155C7.95587 11.0356 8.7889 10.1344 9.88953 9.85137L9.99901 9.82321L10.4336 9.71144L10.4336 9.26273L10.4336 2.07497L10.4336 1.49626L9.85486 1.49625L2.82176 1.49625C1.97608 1.49625 1.2539 2.10548 1.11074 2.93808L0.147638 7.84993L0.146053 7.85802L0.144699 7.86615C-0.0316758 8.92438 0.784381 9.88773 1.85722 9.88774L1.85723 9.88774L4.32106 9.88777C4.31328 10.2799 4.3178 10.891 4.35754 11.832C4.38755 12.5424 4.59551 13.0903 4.91143 13.5001C5.22412 13.9058 5.61379 14.1391 5.95155 14.2724ZM6.42506 13.0689C6.41914 13.1027 6.4075 13.132 6.39372 13.155C6.38304 13.1727 6.37254 13.1843 6.3649 13.1911C6.17486 13.1143 5.98079 12.9915 5.82812 12.7935C5.67558 12.5956 5.53515 12.2851 5.51395 11.7831C5.47028 10.7491 5.47073 10.1393 5.48118 9.79384C5.48639 9.62136 5.49402 9.51761 5.49941 9.46178C5.50165 9.4385 5.50345 9.42423 5.50438 9.41735L5.65078 8.73035L4.93576 8.73034L1.85724 8.7303L1.85723 8.7303C1.50191 8.7303 1.23107 8.41328 1.2853 8.06319L2.24798 3.15349L2.24956 3.1454L2.25092 3.13728C2.29743 2.85822 2.53887 2.65369 2.82176 2.65369L9.27614 2.65369L9.27614 8.82866C7.89788 9.30898 6.87447 10.5005 6.61988 11.9555L6.42506 13.0689ZM11.9133 1.49994L11.9132 9.49994L13.2466 9.49994L13.2466 1.49994L11.9133 1.49994Z" fill="#727A8A"/>
+</g>
+<defs>
+<clipPath id="clip0_8053_26348">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/feedback_dislike_hover.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8984_1331)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.95155 14.2724C6.34804 14.4288 6.74452 14.3465 7.03909 14.1325C7.32135 13.9274 7.50548 13.6096 7.56518 13.2684L7.76 12.155C7.95587 11.0356 8.7889 10.1344 9.88953 9.85137L9.99901 9.82321L10.4336 9.71144L10.4336 9.26273L10.4336 2.07497L10.4336 1.49626L9.85486 1.49625L2.82176 1.49625C1.97608 1.49625 1.2539 2.10548 1.11074 2.93808L0.147638 7.84993L0.146053 7.85802L0.144699 7.86615C-0.0316758 8.92438 0.784381 9.88773 1.85722 9.88774L1.85723 9.88774L4.32106 9.88777C4.31328 10.2799 4.3178 10.891 4.35754 11.832C4.38755 12.5424 4.59551 13.0903 4.91143 13.5001C5.22412 13.9058 5.61379 14.1391 5.95155 14.2724ZM6.42506 13.0689C6.41914 13.1027 6.4075 13.132 6.39372 13.155C6.38304 13.1727 6.37254 13.1843 6.3649 13.1911C6.17486 13.1143 5.98079 12.9915 5.82812 12.7935C5.67558 12.5956 5.53515 12.2851 5.51395 11.7831C5.47028 10.7491 5.47073 10.1393 5.48118 9.79384C5.48639 9.62136 5.49402 9.51761 5.49941 9.46178C5.50165 9.4385 5.50345 9.42423 5.50438 9.41735L5.65078 8.73035L4.93576 8.73034L1.85724 8.7303L1.85723 8.7303C1.50191 8.7303 1.23107 8.41328 1.2853 8.06319L2.24798 3.15349L2.24956 3.1454L2.25092 3.13728C2.29743 2.85822 2.53887 2.65369 2.82176 2.65369L9.27614 2.65369L9.27614 8.82866C7.89788 9.30898 6.87447 10.5005 6.61988 11.9555L6.42506 13.0689ZM11.9133 1.49994L11.9132 9.49994L13.2466 9.49994L13.2466 1.49994L11.9133 1.49994Z" fill="#22262E"/>
+</g>
+<defs>
+<clipPath id="clip0_8984_1331">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/feedback_like_after.svg

@@ -0,0 +1,14 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8053_26576)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.06425 3.19243C9.01305 1.98001 8.36747 1.47571 7.836 1.26596C7.4453 1.11177 7.07727 1.41761 7.00488 1.83136L6.81006 2.94473C6.57501 4.28806 5.57538 5.36942 4.25462 5.70911L4.14514 5.73727L4.14514 12.925L11.1782 12.925C11.744 12.925 12.2269 12.516 12.3199 11.9579L13.2845 7.03871C13.402 6.33321 12.858 5.69098 12.1428 5.69098L9.06425 5.69094C9.06425 5.69094 9.15232 5.27767 9.06425 3.19243ZM2.08675 13.5001L2.08675 5.50006L0.753417 5.50006L0.753416 13.5001L2.08675 13.5001Z" fill="url(#paint0_linear_8053_26576)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_8053_26576" x1="7.31638" y1="16.2105" x2="18.4078" y2="-7.26721" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1C66E5"/>
+<stop offset="1" stop-color="#03C8FD"/>
+</linearGradient>
+<clipPath id="clip0_8053_26576">
+<rect width="14" height="14" fill="white" transform="translate(14 14) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>

package/assets/feedback_like_before.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8053_26340)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.04845 0.727649C7.65196 0.57117 7.25548 0.653472 6.96091 0.867493C6.67865 1.07257 6.49452 1.39045 6.43482 1.73161L6.24001 2.84498C6.04413 3.96442 5.2111 4.86556 4.11047 5.14863L4.00099 5.17679L3.56643 5.28856L3.56643 5.73727L3.56642 12.925L3.56642 13.5037L4.14514 13.5037L11.1782 13.5037C12.0239 13.5037 12.7461 12.8945 12.8893 12.0619L13.8524 7.15007L13.8539 7.14198L13.8553 7.13385C14.0317 6.07561 13.2156 5.11227 12.1428 5.11226L12.1428 5.11226L9.67894 5.11223C9.68672 4.72009 9.6822 4.109 9.64246 3.16801C9.61245 2.45757 9.40449 1.90968 9.08857 1.49987C8.77588 1.09424 8.38621 0.860948 8.04845 0.727649ZM7.57494 1.93111C7.58086 1.89728 7.5925 1.86796 7.60628 1.84505C7.61696 1.82729 7.62746 1.81573 7.6351 1.80888C7.82514 1.88567 8.01921 2.00846 8.17188 2.20652C8.32442 2.40439 8.46485 2.71487 8.48605 3.21685C8.52972 4.25092 8.52927 4.86069 8.51882 5.20616C8.51361 5.37864 8.50598 5.48239 8.50059 5.53822C8.49835 5.5615 8.49656 5.57577 8.49562 5.58265L8.34922 6.26965L9.06424 6.26966L12.1428 6.2697L12.1428 6.2697C12.4981 6.2697 12.7689 6.58672 12.7147 6.93681L11.752 11.8465L11.7504 11.8546L11.7491 11.8627C11.7026 12.1418 11.4611 12.3463 11.1782 12.3463L4.72386 12.3463L4.72386 6.17134C6.10212 5.69102 7.12553 4.49946 7.38012 3.04447L7.57494 1.93111ZM2.08675 13.5001L2.08675 5.50006L0.753417 5.50006L0.753416 13.5001L2.08675 13.5001Z" fill="#727A8A"/>
+</g>
+<defs>
+<clipPath id="clip0_8053_26340">
+<rect width="14" height="14" fill="white" transform="translate(14 14) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>

package/assets/feedback_like_hover.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8984_1289)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.04845 0.727649C7.65196 0.57117 7.25548 0.653472 6.96091 0.867493C6.67865 1.07257 6.49452 1.39045 6.43482 1.73161L6.24001 2.84498C6.04413 3.96442 5.2111 4.86556 4.11047 5.14863L4.00099 5.17679L3.56643 5.28856L3.56643 5.73727L3.56642 12.925L3.56642 13.5037L4.14514 13.5037L11.1782 13.5037C12.0239 13.5037 12.7461 12.8945 12.8893 12.0619L13.8524 7.15007L13.8539 7.14198L13.8553 7.13385C14.0317 6.07561 13.2156 5.11227 12.1428 5.11226L12.1428 5.11226L9.67894 5.11223C9.68672 4.72009 9.6822 4.109 9.64246 3.16801C9.61245 2.45757 9.40449 1.90968 9.08857 1.49987C8.77588 1.09424 8.38621 0.860948 8.04845 0.727649ZM7.57494 1.93111C7.58086 1.89728 7.5925 1.86796 7.60628 1.84505C7.61696 1.82729 7.62746 1.81573 7.6351 1.80888C7.82514 1.88567 8.01921 2.00846 8.17188 2.20652C8.32442 2.40439 8.46485 2.71487 8.48605 3.21685C8.52972 4.25092 8.52927 4.86069 8.51882 5.20616C8.51361 5.37864 8.50598 5.48239 8.50059 5.53822C8.49835 5.5615 8.49656 5.57577 8.49562 5.58265L8.34922 6.26965L9.06424 6.26966L12.1428 6.2697L12.1428 6.2697C12.4981 6.2697 12.7689 6.58672 12.7147 6.93681L11.752 11.8465L11.7504 11.8546L11.7491 11.8627C11.7026 12.1418 11.4611 12.3463 11.1782 12.3463L4.72386 12.3463L4.72386 6.17134C6.10212 5.69102 7.12553 4.49946 7.38012 3.04447L7.57494 1.93111ZM2.08675 13.5001L2.08675 5.50006L0.753417 5.50006L0.753416 13.5001L2.08675 13.5001Z" fill="#22262E"/>
+</g>
+<defs>
+<clipPath id="clip0_8984_1289">
+<rect width="14" height="14" fill="white" transform="translate(14 14) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>

package/assets/green_check.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="12" fill="#11A885"/>
+<path d="M10.6037 14.1523L16.665 7.7085L17.5347 8.49115L10.6371 16.4473L6.47656 11.8036L7.32312 10.996L10.6037 14.1523Z" fill="white"/>
+</svg>

package/components/CustomerServiceChat/index-web.vue

@@ -19,6 +19,7 @@
         @closeInputToolBar="() => changeToolbarDisplayType('none')"
       />
       <MessageToolbarButton
+        v-if="!(isH5 && Boolean(quoteMessage))"
         :toolbarButtonList="props.toolbarButtonList"
       />
       <MessageInputToolbar
@@ -137,6 +138,7 @@ const messageListRef = ref<InstanceType<typeof MessageList>>();
 const emojiOpen = ref(false);
 const toolShowH5 = ref(false);
 const languages = Object.keys(TUILocales);
+const quoteMessage = ref<IMessageModel>();
 const props = withDefaults(defineProps<IProps>(), {
   canCloseChat: true,
   SDKAppID: 0,
@@ -256,6 +258,9 @@ onMounted(() => {
   TUIStore.watch(StoreName.USER, {
     kickedOut: onKickedOut
   });
+  TUIStore.watch(StoreName.CHAT, {
+    quoteMessage: onQuoteMessageUpdated,
+  });
 });
 
 onUnmounted(() => {
@@ -265,6 +270,9 @@ onUnmounted(() => {
   TUIStore.unwatch(StoreName.USER, {
     kickedOut: onKickedOut
   });
+  TUIStore.unwatch(StoreName.CHAT, {
+    quoteMessage: onQuoteMessageUpdated,
+  });
 });
 
 const isInputToolbarShow = computed<boolean>(() => {
@@ -369,7 +377,17 @@ function blurToolAndEmojiH5(){
     emojiOpen.value = false;
   }
   toolShowH5.value = false;
+}
 
+function onQuoteMessageUpdated(options?: {
+  message: IMessageModel;
+  type: string;
+}) {
+  if (options?.message && options?.type === 'quote') {
+    quoteMessage.value = options.message;
+  } else {
+    quoteMessage.value = undefined;
+  }
 }
 </script>
 

package/components/CustomerServiceChat/message-input/message-input-editor-web.vue

@@ -781,6 +781,7 @@ defineExpose({
     hyphens: auto;
     word-break: keep-all;
     overflow-wrap: break-word;
+    word-break: normal;
     flex-wrap: wrap;
     .custom-image,
     .custom-image-emoji {

package/components/CustomerServiceChat/message-input/message-input-quote/index.vue

@@ -7,20 +7,24 @@
     }"
   >
     <div :class="(!isPC) ? 'input-quote-content-h5' :'input-quote-content'">
-      <div>
+      <div v-if="isPC" class="max-one-line">
+        {{ (quoteMessage.nick || quoteMessage.from)+ ': ' + quoteContentText  }}
+      </div>
+      <div v-else class="input-quote-message-h5 max-one-line">
+        <div class="input-quote-sender-h5">
+          {{ (quoteMessage.nick || quoteMessage.from) }}
+        </div>
         <div class="max-one-line">
-          {{ (quoteMessage.nick || quoteMessage.from)+ ': ' + quoteContentText  }}
+           {{ quoteContentText }}
         </div>
       </div>
-        <Icon
-          class="input-quote-close-icon"
-          :file="closeIcon"
-          width="11px"
-          height="11px"
-          @onClick="cancelQuote"
-        />
-
-      
+      <Icon
+        class="input-quote-close-icon"
+        :file="closeIcon"
+        width="11px"
+        height="11px"
+        @onClick="cancelQuote"
+      />
     </div>
   </div>
 </template>
@@ -120,7 +124,7 @@ function onQuoteMessageUpdated(options?: {
 
 <style lang="scss" scoped>
 %common-container-style {
-  margin: 5px 100px 5px 8px;
+  margin: 5px 30px 5px 8px;
   display: flex;
   flex: 0 1 auto;
 
@@ -148,15 +152,22 @@ function onQuoteMessageUpdated(options?: {
   .input-quote-content-h5 {
     display: flex;
     justify-content: space-between;
-    background-color: #fafafa;
-    padding: 12px;
+    background-color: #fff;
+    padding: 8px 16px 8px 8px;
     font-size: 12px;
     align-items: center;
-    line-height: 16px;
     max-width: 100%;
+    height: 60px;
     box-sizing: border-box;
     width:100%;
 
+    .input-quote-message-h5 {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
     .max-one-line {
       flex: 0 1 auto;
       overflow: hidden;
@@ -173,21 +184,19 @@ function onQuoteMessageUpdated(options?: {
   }
 
   .input-quote-close-icon {
-    
+    margin-left: 8px;
   }
 }
 
 .input-quote-container {
   @extend %common-container-style;
-
-  max-width: 500px;
+  max-width: 700px;
 }
 
 
 .input-quote-container-h5 {
   @extend %common-container-style;
   width:100%;
-  // max-width: 250px;
-  margin: 5px 0 5px 0;
+  margin: 0px 0 5px 5px;
 }
 </style>

package/components/CustomerServiceChat/message-input-toolbar/emoji-picker/emoji-picker-dialog.vue

@@ -21,41 +21,41 @@
           class="emoji"
           :src="currentTabItem.url + BASIC_EMOJI_URL_MAPPING[childrenItem]"
         >
-        <img
-          v-else-if="currentTabItem.type === EMOJI_TYPE.BIG"
-          class="emoji-big"
-          :src="currentTabItem.url + childrenItem + '@2x.png'"
-        >
-        <img
-          v-else
-          class="emoji-custom emoji-big"
-          :src="currentTabItem.url + childrenItem"
-        >
+<!--        <img-->
+<!--          v-else-if="currentTabItem.type === EMOJI_TYPE.BIG"-->
+<!--          class="emoji-big"-->
+<!--          :src="currentTabItem.url + childrenItem + '@2x.png'"-->
+<!--        >-->
+<!--        <img-->
+<!--          v-else-->
+<!--          class="emoji-custom emoji-big"-->
+<!--          :src="currentTabItem.url + childrenItem"-->
+<!--        >-->
       </li>
     </ul>
     <ul class="emoji-picker-tab">
-      <li
-        v-for="(item, index) in list"
-        :key="index"
-        class="emoji-picker-tab-item"
-        @click="toggleEmojiTab(index)"
-      >
-        <Icon
-          v-if="item.type === EMOJI_TYPE.BASIC"
-          class="icon"
-          :file="faceIcon"
-        />
-        <img
-          v-else-if="item.type === EMOJI_TYPE.BIG"
-          class="icon-big"
-          :src="item.url + item.list[0] + '@2x.png'"
-        >
-        <img
-          v-else
-          class="icon-custom icon-big"
-          :src="item.url + item.list[0]"
-        >
-      </li>
+<!--      <li-->
+<!--        v-for="(item, index) in list"-->
+<!--        :key="index"-->
+<!--        class="emoji-picker-tab-item"-->
+<!--        @click="toggleEmojiTab(index)"-->
+<!--      >-->
+<!--        <Icon-->
+<!--          v-if="item.type === EMOJI_TYPE.BASIC"-->
+<!--          class="icon"-->
+<!--          :file="faceIcon"-->
+<!--        />-->
+<!--        <img-->
+<!--          v-else-if="item.type === EMOJI_TYPE.BIG"-->
+<!--          class="icon-big"-->
+<!--          :src="item.url + item.list[0] + '@2x.png'"-->
+<!--        >-->
+<!--        <img-->
+<!--          v-else-->
+<!--          class="icon-custom icon-big"-->
+<!--          :src="item.url + item.list[0]"-->
+<!--        >-->
+<!--      </li>-->
       <li
         v-if="isH5"
         class="send-btn"
@@ -116,7 +116,7 @@ const toggleEmojiTab = (index: number) => {
   currentEmojiList.value = list?.value[index]?.list;
   // web & h5 side scroll to top
   emojiPickerListRef?.value && (emojiPickerListRef.value.scrollTop = 0);
-  
+
 };
 
 const select = (item: any, index: number) => {
@@ -128,7 +128,7 @@ const select = (item: any, index: number) => {
     case EMOJI_TYPE.BASIC:
       options.url = currentTabItem?.value?.url + BASIC_EMOJI_URL_MAPPING[item];
       emits('insertEmoji', options);
-      
+
       break;
     case EMOJI_TYPE.BIG:
       sendFaceMessage(index, currentTabItem.value);
@@ -159,7 +159,7 @@ const sendFaceMessage = (index: number, listItem: IEmojiGroup) => {
 
 function sendMessage() {
   emits('sendMessage');
-  
+
 }
 
 function onCurrentConversationUpdate(conversation: IConversationModel) {

package/components/CustomerServiceChat/message-input-toolbar/index-web.vue

@@ -27,7 +27,7 @@
         <ImageUpload imageSourceType="album" :isH5ToolShow="isH5ToolShow"/>
         <FileUpload :isH5ToolShow="isH5ToolShow"/>
       </template>
-      <template v-else v-for="(item, index) in props.inputToolbarList" :key="index">
+      <template v-else v-for="(item, index) in props.inputToolbarList">
         <EmojiPicker
           v-if="isPC && item.presetId === INPUT_TOOLBAR_TYPE.EMOJI && item.isEnabled === 1"
           ref="emojiPickerRef"

package/components/CustomerServiceChat/message-list/index-web.vue

@@ -48,6 +48,7 @@
               @handleToggleMessageItem="handleToggleMessageItem"
               @handleH5LongPress="handleH5LongPress"
               @heightChanged="onHeightChanged"
+              @messageSent="onMessageSent"
             />
             <div
               v-else
@@ -604,6 +605,10 @@ function onHeightChanged() {
   scrollToLatestMessage();
 }
 
+function onMessageSent() {
+  scrollToLatestMessage();
+}
+
 // re-edit message
 const handleEdit = (message: IMessageModel) => {
   emits('handleEditor', message, 'reedit');