@tencentcloud/ai-desk-customer-vue 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,10 +1,29 @@
-## [1.3.0] (2025-5-21)
+## 1.5.0 @2025.6.19
+
+### Features
+- 支持转人工后会话超时提醒。
+- 优化消息气泡、欢迎卡片、评价消息等样式。
+- 优化引用消息的交互体验。
+- 优化流式消息 url 的识别提取。
+
+### Fixed
+- vue2 接入报错问题。
+- 转人工成功后，消息从已读变为未读的问题。
+
+## 1.4.0 @2025.5.27
+
+### Features
+- 支持自定义配置。
+- 支持任务流分支选择后不隐藏。
+- 优化消息列表的样式的滚动体验。
+
+## 1.3.0 @2025.5.21
 
 ### Features
 - 支持订单消息。
 - 优化表单消息、任务流消息、流式消息、Markdown 图文混排等的交互体验。
 
-## [1.1.0] (2025-4-23)
+## 1.1.0 @2025.4.23
 
 ### Features
 - 新增 `initWithProfile` 接口，支持用户端带昵称（nickName）和头像（avatar）登录，提升人工客服与用户交互体验。
@@ -12,13 +31,13 @@
 - 优化发消息体验。
 - 优化组件样式。
 
-## [1.0.1] (2025-4-16)
+## 1.0.1 @2025.4.16
 
 ### Features
 - 简化接入。
 - TUICustomerServer 新增 sendTextMessage/sendCustomMessage/changeLanguage 等接口。
 
-## [1.0.0] (2025-4-10)
+## 1.0.0 @2025.4.10
 
 ### Features
 - 国际化语言，支持简体中文、繁体中文、英语、日语、马来西亚语、印尼语、越南语、泰语、俄语、菲律宾语。

package/assets/face.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#161;&#168;&#230;&#131;&#133;">
+<g id="Union">
+<path d="M5.83268 7.83332C6.29292 7.83332 6.66602 7.46023 6.66602 6.99999C6.66602 6.53975 6.29292 6.16666 5.83268 6.16666C5.37245 6.16666 4.99935 6.53975 4.99935 6.99999C4.99935 7.46023 5.37245 7.83332 5.83268 7.83332Z" fill="black" fill-opacity="0.4"/>
+<path d="M10.9993 6.99999C10.9993 7.46023 10.6263 7.83332 10.166 7.83332C9.70578 7.83332 9.33268 7.46023 9.33268 6.99999C9.33268 6.53975 9.70578 6.16666 10.166 6.16666C10.6263 6.16666 10.9993 6.53975 10.9993 6.99999Z" fill="black" fill-opacity="0.4"/>
+<path d="M7.99945 10.5001C8.74027 10.5001 9.41053 10.198 9.89378 9.71027L10.7634 10.7248C10.0452 11.4116 9.0716 11.8334 7.99945 11.8334C6.92723 11.8334 5.95353 11.4115 5.23532 10.7247L6.10497 9.71011C6.58822 10.1979 7.25855 10.5001 7.99945 10.5001Z" fill="black" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3327 8.49999C15.3327 12.5501 12.0494 15.8333 7.99935 15.8333C3.94926 15.8333 0.666016 12.5501 0.666016 8.49999C0.666016 4.4499 3.94926 1.16666 7.99935 1.16666C12.0494 1.16666 15.3327 4.4499 15.3327 8.49999ZM13.9993 8.49999C13.9993 11.8137 11.3131 14.5 7.99935 14.5C4.68564 14.5 1.99935 11.8137 1.99935 8.49999C1.99935 5.18628 4.68564 2.49999 7.99935 2.49999C11.3131 2.49999 13.9993 5.18628 13.9993 8.49999Z" fill="black" fill-opacity="0.4"/>
+</g>
+</g>
+</svg>

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/files.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#150;&#135;&#228;&#187;&#182;">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M7.00065 3.49999L6.33398 2.16666H1.33398V14.5H14.6673V3.49999H7.00065ZM6.17661 4.83332H13.334V6.49999H2.66732V3.49999H5.50994L6.17661 4.83332ZM2.66732 7.83332V13.1667H13.334V7.83332H2.66732Z" fill="black" fill-opacity="0.4"/>
+</g>
+</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/assets/image.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#155;&#190;&#231;&#137;&#135;">
+<g id="Union">
+<path d="M5.66602 7.16667C6.2183 7.16667 6.66602 6.71895 6.66602 6.16667C6.66602 5.61438 6.2183 5.16667 5.66602 5.16667C5.11373 5.16667 4.66602 5.61438 4.66602 6.16667C4.66602 6.71895 5.11373 7.16667 5.66602 7.16667Z" fill="black" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.666016 2.5V14.5H15.3327V2.5H0.666016ZM13.9993 3.83333H1.99935V10.4027L4.24217 8.51871L6.43497 9.9221L10.914 5.62228L13.9993 7.99186V3.83333ZM1.99935 13.1667V12.144L4.34912 10.1702L6.60076 11.6112L11.0107 7.37772L13.9993 9.67303V13.1667H1.99935Z" fill="black" fill-opacity="0.4"/>
+</g>
+</g>
+</svg>

package/assets/rating_tool_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#181;&#158;">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M7.25305 1.42188L8.10572 1.56398C9.39152 1.77829 10.334 2.8908 10.334 4.19437V5.83345H13.8803C14.7043 5.83345 15.331 6.57327 15.1955 7.38595L14.0845 14.0526C14.0377 14.3329 13.8803 15.1667 13.8803 15.1667H1.33398V6.5H5.16207L7.25305 1.42188ZM2.66732 13.8333H4.66732V7.83333H2.66732V13.8333ZM8.07605 2.92511L6.00065 7.96535V13.8334H12.7693L13.8803 7.16675H9.00065V4.19437C9.00065 3.60851 8.61992 3.09984 8.07605 2.92511Z" fill="black" fill-opacity="0.4"/>
+</g>
+</svg>

package/assets/rating_tool_icon_h5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5C6168"><path d="M720-120H320v-520l280-280 50 50q7 7 11.5 19t4.5 23v14l-44 174h218q32 0 56 24t24 56v80q0 7-1.5 15t-4.5 15L794-168q-9 20-30 34t-44 14ZM240-640v520H80v-520h160Z"/></svg>

package/assets/video.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#167;&#134;&#233;&#162;&#145;-&#230;&#137;&#147;&#229;&#188;&#128;">
+<g id="Union">
+<path d="M2.66667 6.5H5.33333V5.16667H2.66667V6.5Z" fill="black" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6667 5.37037L16 4.16667V12.8333L12.6667 11.6296V14.5H0V2.5H12.6667V5.37037ZM14.6667 6.06575V10.9342L11.3333 9.73054V13.1667H1.33333V3.83333H11.3333V7.26946L14.6667 6.06575Z" fill="black" fill-opacity="0.4"/>
+</g>
+</g>
+</svg>

package/assets/video_h5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5C6168"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h480q33 0 56.5 23.5T720-720v180l160-160v440L720-420v180q0 33-23.5 56.5T640-160H160Z"/></svg>

package/components/CustomerServiceChat/chat-header/index-web.vue

@@ -6,12 +6,11 @@
       @click="closeChat(currentConversation.conversationID)"
     >
       <Icon :file="backSVG" />
-
     </div>
     <div class="chat-header-container">
       <Icon v-if="!isPC" style="width:32px;" :file="customerAvatarMobile" />
       <div :class="['chat-header-content', !isPC && 'chat-header-h5-content']">
-         {{ isPC?  currentConversationName : TUITranslateService.t('AIDesk.Hi，我是') + currentConversationName }}
+         {{ currentConversationName }}
       </div>
     </div>
   </div>
@@ -28,6 +27,7 @@ import Icon from '../../common/Icon.vue';
 import backSVG from '../../../assets/back.svg';
 import customerAvatarMobile from '../../../assets/customer_avatar_mobile.png';
 import { isPC } from '../../../utils/env';
+import state from '../../../utils/state';
 const { ref, onMounted, onUnmounted } = vue;
 
 interface IProps {
@@ -37,7 +37,7 @@ interface IProps {
 const emits = defineEmits(['closeChat']);
 const currentConversation = ref<IConversationModel>();
 const currentConversationName = ref('');
-const typingStatus = ref(false);
+const isTyping = ref(false);
 
 const props = withDefaults(defineProps<IProps>(), {
   canCloseChat: true,
@@ -48,8 +48,8 @@ onMounted(() => {
     currentConversation: onCurrentConversationUpdated,
   });
 
-  TUIStore.watch(StoreName.CHAT, {
-    typingStatus: onTypingStatusUpdated,
+  TUIStore.watch(StoreName.CUSTOM, {
+    isTyping: onTypingStatusUpdated,
   });
 });
 
@@ -58,8 +58,8 @@ onUnmounted(() => {
     currentConversation: onCurrentConversationUpdated,
   });
 
-  TUIStore.unwatch(StoreName.CHAT, {
-    typingStatus: onTypingStatusUpdated,
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    isTyping: onTypingStatusUpdated,
   });
 });
 
@@ -69,17 +69,19 @@ const closeChat = (conversationID: string | undefined) => {
 
 function onCurrentConversationUpdated(conversation: IConversationModel) {
   currentConversation.value = conversation;
-  currentConversationName.value = currentConversation?.value?.getShowName();
+  currentConversationName.value = currentConversation.value?.getShowName();
 }
 
 function onTypingStatusUpdated(status: boolean) {
-  typingStatus.value = status;
-  if (typingStatus.value) {
-    currentConversationName.value
-      = TUITranslateService.t('TUIChat.对方正在输入');
+  isTyping.value = status;
+  if (isTyping.value && state.get('showTyping') === 1) {
+    currentConversationName.value = TUITranslateService.t('TUIChat.对方正在输入');
   } else {
-    currentConversationName.value
-      = currentConversation.value?.getShowName() || '';
+    if (isPC) {
+      currentConversationName.value = currentConversation.value?.getShowName();
+    } else {
+      currentConversationName.value = TUITranslateService.t('AIDesk.Hi，我是') + currentConversation.value?.getShowName();
+    }
   }
 }
 </script>

package/components/CustomerServiceChat/index-web.vue

@@ -19,6 +19,7 @@
         @closeInputToolBar="() => changeToolbarDisplayType('none')"
       />
       <MessageToolbarButton
+        v-if="!(isH5 && Boolean(quoteMessage))"
         :toolbarButtonList="props.toolbarButtonList"
       />
       <MessageInputToolbar
@@ -28,6 +29,7 @@
           !isPC && 'tui-chat-h5-message-input-toolbar'
         ]"
         :displayType="inputToolbarDisplayType"
+        :inputToolbarList="props.inputToolbarList"
         @insertEmoji="insertEmoji"
         @changeToolbarDisplayType="changeToolbarDisplayType"
         @scrollToLatestMessage="scrollToLatestMessage"
@@ -42,10 +44,12 @@
         :muteText="muteText"
         :placeholder="TUITranslateService.t('TUIChat.请输入消息')"
         :inputToolbarDisplayType="inputToolbarDisplayType"
+        :inputToolbarList="props.inputToolbarList"
         @changeToolbarDisplayType="changeToolbarDisplayType"
         @emojiShow="emojiShow"
         @toolShow="toolShow"
         @blurToolAndEmojiH5="blurToolAndEmojiH5"
+        @messageSent="onMessageSent"
       />
       <div class="input-toolbar-h5">
         <div :class="['emoji-dialog-h5',(toolShowH5 && !emojiOpen)?'tool-dialog-h5':'']">
@@ -63,6 +67,7 @@
             ]"
             :isH5ToolShow="toolShowH5"
             :displayType="inputToolbarDisplayType"
+            :inputToolbarList="props.inputToolbarList"
             @insertEmoji="insertEmoji"
             @changeToolbarDisplayType="changeToolbarDisplayType"
             @scrollToLatestMessage="scrollToLatestMessage"
@@ -81,7 +86,7 @@ import {
   TUIChatEngine,
   TUIConversationService,
   TUIStore,
-  TUITranslateService
+  TUITranslateService,
 } from '@tencentcloud/chat-uikit-engine';
 import TUICore, {TUIConstants, TUILogin} from '@tencentcloud/tui-core';
 import ChatHeader from './chat-header/index-web.vue';
@@ -89,24 +94,37 @@ import MessageList from './message-list/index-web.vue';
 import MessageInput from './message-input/index-web.vue';
 import MessageInputToolbar from './message-input-toolbar/index-web.vue';
 import EmojiDialog from './message-input-toolbar/emoji-dialog-mobile/emoji-dialog-mobile.vue';
-import {isH5, isPC} from '../../utils/env';
-import {ToolbarButtonModel, ToolbarDisplayType} from '../../interface';
-import {isSupportedLang} from '../../utils/';
+import { isH5, isPC } from '../../utils/env';
+import { ToolbarButtonModel, ToolbarDisplayType, InputToolbarModel } from '../../interface';
+import { isSupportedLang } from '../../utils/';
 import Log from '../../utils/logger';
 import MessageToolbarButton from './message-toolbar-button/index.vue';
 import TUILocales from '../../locales';
 import { Toast, TOAST_TYPE } from '../common/Toast/index-web';
+import state from '../../utils/state.js';
+import { switchReadStatus } from '../../utils/utils';
 
 const { ref, onMounted, onUnmounted, computed, nextTick } = vue;
 
 interface IProps {
   canCloseChat?: boolean;
-  SDKAppID?:number;
-  userID?:string;
-  userSig?:string;
-  robotLang?:string;
-  userLang?:string;
-  toolbarButtonList?:ToolbarButtonModel[];
+  SDKAppID?: number;
+  userID?: string;
+  userSig?: string;
+  robotLang?: string;
+  userLang?: string;
+  toolbarButtonList?: ToolbarButtonModel[];
+  showAvatar?: number;
+  robotAvatar?: string;
+  staffAvatar?: string;
+  userAvatar?: string;
+  showNickName?: number;
+  robotNickName?: string;
+  staffNickName?: string;
+  userNickName?: string;
+  inputToolbarList?: InputToolbarModel[];
+  showReadStatus?: number;
+  showTyping?: number;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -120,14 +138,24 @@ 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,
   userID: '',
   userSig: '',
   robotLang: '',
-  userLang:'',
-  toolbarButtonList:() => [] as ToolbarButtonModel[]
+  userLang: '',
+  showReadStatus: 1,
+  showAvatar: 1,
+  robotAvatar: '',
+  staffAvatar: '',
+  userAvatar: '',
+  showNickName: 0,
+  robotNickName: '',
+  staffNickName: '',
+  userNickName: '',
+  showTyping: 0,
 });
 
 const loginCustomerUIKit = () => {
@@ -140,6 +168,7 @@ const loginCustomerUIKit = () => {
     Log.i(`login success, robotLang:${props.robotLang}`);
     let conversationID = 'C2C@customer_service_account';
     TUIConversationService.switchConversation(conversationID);
+    switchReadStatus(props.showReadStatus);
     TUIChatEngine.chat.callExperimentalAPI('isFeatureEnabledForStat', Math.pow(2, 42));
   }).catch((error) => {
     Toast({
@@ -185,15 +214,39 @@ const initLanguage = () => {
   TUITranslateService.changeLanguage(language);
 }
 
+const setAvatarNickName = () => {
+  state.set('avatarNickName', {
+    showAvatar: props.showAvatar,
+    showNickName: props.showNickName,
+    userAvatar: props.userAvatar,
+    staffAvatar: props.staffAvatar,
+    robotAvatar: props.robotAvatar,
+    userNickName: props.userNickName,
+    staffNickName: props.staffNickName,
+    robotNickName: props.robotNickName,
+  });
+}
+
+const setShowReadStatus = () => {
+  state.set('showReadStatus', props.showReadStatus);
+}
+
+const setShowTyping = () => {
+  state.set('showTyping', props.showTyping);
+}
+
 try {
   const userContext = TUILogin.getContext();
-  if(userContext.userID == '' && props.SDKAppID!==0 && props.userID!=='' && props.userSig!==''){
+  if (userContext.userID == '' && props.SDKAppID !==0 && props.userID !=='' && props.userSig !==''){
     loginCustomerUIKit();
     if (props.robotLang && !isSupportedLang(props.robotLang)) {
       Log.w(`robotLang:${props.robotLang} is not supported`);
     }
   }
   initLanguage();
+  setAvatarNickName();
+  setShowReadStatus();
+  setShowTyping();
 } catch (e) {
   console.log(e)
 }
@@ -205,6 +258,9 @@ onMounted(() => {
   TUIStore.watch(StoreName.USER, {
     kickedOut: onKickedOut
   });
+  TUIStore.watch(StoreName.CHAT, {
+    quoteMessage: onQuoteMessageUpdated,
+  });
 });
 
 onUnmounted(() => {
@@ -214,6 +270,9 @@ onUnmounted(() => {
   TUIStore.unwatch(StoreName.USER, {
     kickedOut: onKickedOut
   });
+  TUIStore.unwatch(StoreName.CHAT, {
+    quoteMessage: onQuoteMessageUpdated,
+  });
 });
 
 const isInputToolbarShow = computed<boolean>(() => {
@@ -236,6 +295,11 @@ const sendMessage = () => {
   messageInputRef.value?.sendMessage();
 }
 
+const onMessageSent = () => {
+  // 发送消息后列表滚动到底部
+  messageListRef.value?.scrollToLatestMessage();
+}
+
 const handleEditor = (message: IMessageModel, type: string) => {
   if (!message || !type) return;
   switch (type) {
@@ -313,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/index-web.vue

@@ -15,6 +15,8 @@
         :enableInput="props.enableInput"
         :enableTyping="props.enableTyping"
         :enableDragUpload="props.enableDragUpload"
+        :hasInputTool="shouldShowToolbar"
+        :hasEmojiTool="shouldShowEmoji"
         @sendMessage="sendMessage"
         @onTyping="onTyping"
         @blurToolAndEmojiH5="blurToolAndEmojiH5"
@@ -24,10 +26,10 @@
         v-if="!props.isMuted && isPC"
         @sendMessage="sendMessage"
       />
-      <div v-if="isH5" class="emoji-icon" id="emoji-icon-h5" @click="emojiShow">
+      <div v-if="isH5 && shouldShowEmoji" :class="['emoji-icon',!shouldShowToolbar && isH5 ? 'emoji-h5-no-toolbar' : '']" id="emoji-icon-h5" @click="emojiShow">
         <Icon :file="emojiIcon" width="24px" height="24px"/>
       </div>
-      <div v-show="isH5 && !showSendButton" class="tool-icon" @click="toolShow">
+      <div v-show="isH5 && shouldShowToolbar && !showSendButton" class="tool-icon" @click="toolShow">
         <Icon :file="toolIcon" width="24px" height="24px"/>
       </div>
       <div v-show="isH5 && showSendButton" class="send-button-h5" @click="sendMessage">
@@ -55,7 +57,8 @@ import Icon from '../../common/Icon.vue';
 import emojiIcon from '../../../assets/emoji.png';
 import toolIcon from '../../../assets/more_tools.png';
 import sendButtonIcon from '../../../assets/send_button_h5.svg';
-const { ref,onMounted,onBeforeUnmount } = vue;
+import { INPUT_TOOLBAR_TYPE } from '../../../constant';
+const { ref, onMounted, onBeforeUnmount, computed } = vue;
 
 const props = defineProps({
   placeholder: {
@@ -82,9 +85,13 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  inputToolbarList: {
+    type: Array,
+    default: undefined,
+  },
 });
 
-const emit = defineEmits(['sendMessage', 'resetReplyOrReference', 'onTyping','scrollToLatestMessage','changeToolbarDisplayType','insertEmoji','emojiShow','toolShow','blurToolAndEmojiH5']);
+const emit = defineEmits(['messageSent', 'resetReplyOrReference', 'onTyping','scrollToLatestMessage','changeToolbarDisplayType','insertEmoji','emojiShow','toolShow','blurToolAndEmojiH5']);
 const editor = ref<InstanceType<typeof MessageInputEditor>>();
 const currentConversation = ref<IConversationModel>();
 const h5Dialog = ref<HTMLElement>();
@@ -130,7 +137,8 @@ const sendMessage = async () => {
     return editor;
   });
   await sendMessages(editorContentList, currentConversation.value);
-  emit('sendMessage');
+  // 注意这里不要 emit 'sendMessage'，避免写出死循环
+  emit('messageSent');
   editor.value?.resetEditor();
   showSendButton.value = false;
 };
@@ -162,6 +170,20 @@ const blurToolAndEmojiH5 = () =>{
   emit('blurToolAndEmojiH5');
 }
 
+const shouldShowToolbar = computed(() => {
+  if (props.inputToolbarList !== undefined && props.inputToolbarList.length === 0) {
+    return false;
+  }
+  if (props.inputToolbarList !== undefined && props.inputToolbarList.length === 1 && props.inputToolbarList[0]?.presetId === INPUT_TOOLBAR_TYPE.EMOJI) {
+    return false;
+  }
+  return true;
+});
+
+const shouldShowEmoji = computed(() => {
+  return props.inputToolbarList === undefined || props.inputToolbarList.some(item => item.presetId === INPUT_TOOLBAR_TYPE.EMOJI && item.isEnabled === 1);
+});
+
 defineExpose({
   insertEmoji,
   reEdit,
@@ -202,6 +224,10 @@ defineExpose({
   border: none;
 }
 
+.emoji-h5-no-toolbar {
+  margin-right: 10px;
+}
+
 .tool-icon {
   background: #fff;
   margin-left: 5px;

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

@@ -2,7 +2,10 @@
   <div
     :class="[
       'message-input-editor-container',
+      isPC && !props.hasInputTool && 'message-input-editor-container-no-inputTool',
       isH5 && 'message-input-editor-container-h5',
+      isH5 && !props.hasEmojiTool && props.hasInputTool && 'message-input-editor-container-h5-no-emoji-no-tool',
+      isH5 && !props.hasEmojiTool && !props.hasInputTool && 'message-input-editor-container-h5-no-emoji',
     ]"
   >
     <div
@@ -74,6 +77,14 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  hasEmojiTool: {
+    type: Boolean,
+    default: true,
+  },
+  hasInputTool: {
+    type: Boolean,
+    default: true,
+  }
 });
 
 const emits = defineEmits(['sendMessage', 'onTyping', 'blurToolAndEmojiH5', 'isInputNotEmpty']);
@@ -715,6 +726,10 @@ defineExpose({
     padding: 3px 10px 10px;
   }
 
+  &-container-no-inputTool {
+    padding: 10px 10px 10px;
+  }
+
   &-area {
     box-sizing: border-box;
     font-family: PingFangSC-Regular;
@@ -766,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 {
@@ -787,6 +803,15 @@ defineExpose({
     }
   }
 }
+
+.message-input-editor-container-h5-no-emoji {
+  border-radius: 10px;
+  margin: 10px 10px 0 10px;
+}
+
+.message-input-editor-container-h5-no-emoji-no-tool {
+  border-radius: 10px;
+}
 </style>
 <style lang="scss">
 /* stylelint-disable-next-line selector-class-pattern */