@tencentcloud/ai-desk-customer-vue 0.3.0 → 1.0.0

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

@@ -50,8 +50,8 @@ const { ref, onMounted, onUnmounted, watch } = vue;
 
 interface IProps {
   displayType: ToolbarDisplayType;
-  isH5EmojiShow:boolean;
-  isH5ToolShow:boolean;
+  isH5EmojiShow?:boolean;
+  isH5ToolShow?:boolean;
 }
 interface IEmits {
   (e: 'scrollToLatestMessage'): void;

package/components/CustomerServiceChat/message-input-toolbar/video-upload/index.vue

@@ -10,7 +10,7 @@
     <div :class="['video-upload', !isPC && 'video-upload-h5']">
       <input
         ref="inputRef"
-        title="视频"
+        :title="TUITranslateService.t('视频')"
         type="file"
         data-type="video"
         accept="video/*"
@@ -27,8 +27,8 @@ import {
   IConversationModel,
   SendMessageParams,
   SendMessageOptions,
+  TUITranslateService
 } from '@tencentcloud/chat-uikit-engine';
-import { TUIGlobal } from '@tencentcloud/universal-api';
 import vue from '../../../../adapter-vue';
 import { isPC } from '../../../../utils/env';
 import ToolbarItemContainer from '../toolbar-item-container/index.vue';

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

@@ -68,8 +68,9 @@
                 @resendMessage="resendMessage(item)"
               >
                 <template #messageElement>
+                  <MessageThinking v-if="isThinkingMessage(item)"/>
                   <MessageText
-                    v-if="item.type === TYPES.MSG_TEXT"
+                    v-else-if="item.type === TYPES.MSG_TEXT"
                     :content="item.getMessageContent()"
                   />
                   <ProgressMessage
@@ -175,7 +176,7 @@
 
 <script lang="ts" setup>
 import vue from '../../../adapter-vue';
-const { ref, nextTick, computed, onMounted, onUnmounted }  = vue;
+const { ref, nextTick, computed, onMounted, onUnmounted } = vue;
 import TUIChatEngine, {
   IMessageModel,
   TUIStore,
@@ -203,6 +204,7 @@ import MessageVideo from './message-elements/message-video-web.vue';
 import MessageTool from './message-tool/index-web.vue';
 import MessageRevoked from './message-tool/message-revoked.vue';
 import MessagePlugin from '../message-list/message-elements/message-desk/message-plugin-web.vue';
+import MessageThinking from './message-elements/message-thinking.vue';
 import ScrollButton from './scroll-button/index.vue';
 import { isPluginMessage } from './message-elements/message-desk/index';
 import Dialog from '../../common/Dialog/index.vue';
@@ -214,9 +216,8 @@ import {
   isEnabledMessageReadReceiptGlobal,
   deepCopy,
 } from '../../../utils/utils';
-import { isMessageInvisible } from '../../../utils/index';
-// import {TUICustomerServer} from '../../../server';
-import {isCustomerConversation} from '../../../index';
+import { isMessageInvisible, isThinkingMessage, isThinkingMessageOverTime } from '../../../utils/index';
+import { isCustomerConversation } from '../../../index';
 
 interface ScrollConfig {
   scrollToMessage?: IMessageModel;
@@ -328,19 +329,26 @@ onUnmounted(() => {
 });
 
 async function onMessageListUpdated(list: IMessageModel[]) {
-  if(!isCustomerConversation(currentConversationID.value)){
+  if (!isCustomerConversation(currentConversationID.value)) {
     return;
   }
   observer?.disconnect();
   const oldLastMessage = currentLastMessage.value;
   let hasEmojiReaction = false;
   allMessageList.value = list;
-  messageList.value = list.filter((message) => {
+
+  messageList.value = list.filter((message, index) => {
     if (message.reactionList?.length && !message.isDeleted) {
       hasEmojiReaction = true;
     }
+
+    // 判断是否结束
+    if (isThinkingMessage(message)) {
+      return isThinkingMessageOverTime(message);
+    }
     return !message.isDeleted && !isMessageInvisible(message as any);
   });
+
   if (!messageList.value?.length) {
     currentLastMessage.value = {};
     return;
@@ -695,6 +703,7 @@ function setAudioPlayed(messageID: string) {
   };
 }
 
+
 defineExpose({
   scrollToLatestMessage,
 });

package/components/CustomerServiceChat/message-list/message-elements/message-bubble-web.vue

@@ -44,6 +44,7 @@
                   isNoPadding && isBlink ? 'blink-shadow' : '',
                   !isNoPadding && isBlink ? 'blink-content' : '',
                   isMultiBranchMsg?'multi-branch-message':'',
+                  (isProductCardMessage && isH5) ? 'product-message-bubble-h5' : (isProductCardMessage ? 'product-message-bubble' : ''),
                   isPC ? '':'body-mobile',
                 ]"
               >
@@ -141,6 +142,7 @@ import loadingIcon from '../../../../assets/loading.png';
 import customerAvatar from '../../../../assets/customer_avatar.png';
 import { shallowCopyMessage } from '../../../../utils/utils';
 import { isPC,isH5 } from '../../../../utils/env';
+import { CUSTOM_MESSAGE_SRC } from '../../../../constant';
 const { computed, toRefs } = vue;
 
 interface IProps {
@@ -213,6 +215,15 @@ const isMultiBranchMsg = computed(()=>{
 });
 
 
+const isProductCardMessage = computed(()=>{
+  if (message.value?.type == "TIMCustomElem") {
+    if (JSON.parse(message.value.payload.data).src === CUSTOM_MESSAGE_SRC.PRODUCT_CARD) {
+      return true;
+    }
+  }
+  return false;
+});
+
 const isNoPadding = computed(() => {
   return (
     !hasEmojiReaction.value
@@ -400,6 +411,14 @@ function scrollTo(scrollHeight: number) {
           border-radius: 0 10px 10px;
           padding: 0px;
         }
+        
+        .product-message-bubble {
+          background: #f3f4f7 !important ;
+        }
+
+        .product-message-bubble-h5 {
+          background: #fff !important ;
+        }
 
         .content-out {
           background: linear-gradient(26deg, #1C66E5 2.07%, #03C8FD 152.75%);

package/components/CustomerServiceChat/message-list/message-elements/message-custom.vue

@@ -1,5 +1,9 @@
 <template>
-  <div>[自定义消息]</div>
+  <div>{{TUITranslateService.t("TUIChat.[自定义消息]")}}</div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import {
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+</script>

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/marked.ts

@@ -15,6 +15,10 @@ export const marked = new Marked(
                 `;
       },
       link(this: any, href: string | null, title: string | null, text: string) {
+        // a 标签 href 如果异常（包含非 ASCII 字符），则当成普通文本处理
+        if (href && /[^\x00-\x7F]/g.test(href)) {
+          return text;
+        }
         return `<a target="_blank" rel="noreferrer noopenner" class="message-marked_link" href="${href || ''}" title="${title}">${text}</a>`;
       },
     },

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-branch.vue

@@ -8,10 +8,9 @@
       {{ content.header || content.title }}
   </div>
     <div
-      v-if="!isSelected"
       v-for="(item, index) in content.items"
       :key="index"
-      class="branch-body branch-bubble branch-item"
+      :class="['branch-body','branch-bubble','branch-item',isSelected ? 'branch-item-selected' : '']"
       :style="{ borderWidth: content.header ? '1px 0 0px 0' : '' }"
       @click="handleContentListItemClick(item)"
     >
@@ -61,8 +60,10 @@ export default {
     });
 
     const handleContentListItemClick = (branch: branchItem) => {
-      isSelected.value = true;
-      emit('sendMessage', { text: branch.content });
+      if(!isSelected.value) {
+        isSelected.value = true;
+        emit('sendMessage', { text: branch.content });
+      }
     };
 
     return {
@@ -117,4 +118,12 @@ export default {
   flex-direction:column;
   align-items: flex-start;
 }
+.branch-item-selected {
+  cursor:none;
+  color: #a0a7b8;
+  opacity:0.6;
+}
+.branch-title-icon {
+  margin-right: 5px;
+}
 </style>

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/component-mobile/input-mobile.vue

@@ -9,7 +9,7 @@
           @input="onInputChanged"
         >
         <div v-if="validator" class="validator-line">
-            请填写必填项
+            {{TUITranslateService.t("AIDesk.请填写必填项")}}
         </div>
       </div>
       
@@ -18,6 +18,7 @@
 <script lang="ts">
 import vue from '../../../../../../../../adapter-vue';
 import LabelMobile from './label-mobile.vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 const { computed, ref} = vue;
 
 interface FormItem{
@@ -68,7 +69,8 @@ export default {
         return {
             text,
             onInputChanged,
-            props
+            props,
+            TUITranslateService
         }
     }
 }

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/component-mobile/radios-mobile.vue

@@ -5,7 +5,7 @@
         </div>
         <div class="radio-container">
             <div v-if="validator" class="validator-line">
-                请填写必填项
+                {{ TUITranslateService.t("AIDesk.请填写必填项") }}
             </div>
                 <div class="form-radio-box-mobile" v-for="(item,index) in chooseItemList" :key="index">
                     <div class="radio-container-uni" @click="clickItem(index)">
@@ -33,6 +33,7 @@ import Icon from '../../customer-icon.vue';
 import radioUncheckIcon from '../../../../../../../../assets/radio-uncheck.png';
 import radioCheckIcon from '../../../../../../../../assets/radio-check.png';
 import { isPC, isH5,isWeChat, isUniFrameWork } from '../../../../../../../../utils/env';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 const {  ref} = vue;
 export default {
     components:{
@@ -84,7 +85,8 @@ export default {
             radioUncheckIcon,
             radioCheckIcon,
             changeSelectedIcon,
-            checkedIcon
+            checkedIcon,
+            TUITranslateService
         }
     }
 }

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/component-pc/input-pc.vue

@@ -8,7 +8,7 @@
           @change="onInputChanged"
         >
         <div v-if="validator" class="validator-line">
-        请填写必填项
+            {{ TUITranslateService.t("AIDesk.请填写必填项") }}
       </div>
       </div>
       
@@ -16,6 +16,7 @@
 </template>
 <script lang="ts">
 import vue from '../../../../../../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 const { computed, ref} = vue;
 
 interface FormItem{
@@ -62,7 +63,8 @@ export default {
         };
         return {
             text,
-            onInputChanged
+            onInputChanged,
+            TUITranslateService
         }
     }
 }

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/component-pc/radio-pc.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="radio-container-pc">
             <div v-if="validator" class="validator-line">
-                请填写必填项
+                {{ TUITranslateService.t("AIDesk.请填写必填项") }}
             </div>
                 <div class="form-radio-box-pc" v-for="(item,index) in chooseItemList" :key="index">
                     <div class="radio-container-pc-icon" @click="clickItem(index)">
@@ -22,7 +22,8 @@
 import vue from '../../../../../../../../adapter-vue';
 import radioUncheckIcon from '../../../../../../../../assets/radio-uncheck.png';
 import radioCheckIcon from '../../../../../../../../assets/radio-check.png';
-const {  ref} = vue;
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+const {  ref } = vue;
 export default {
     props:{
         chooseItemList:{
@@ -68,7 +69,8 @@ export default {
             radioUncheckIcon,
             radioCheckIcon,
             changeSelectedIcon,
-            checkedIcon
+            checkedIcon,
+            TUITranslateService
         }
     }
 }

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/form-mobile.vue

@@ -3,7 +3,7 @@
 		<div v-if="!finishSubmit && props.payload.nodeStatus == 0" class="before-form">
 		    <Icon :src="iconForm" width="60px" height="60px" style="margin:5px 4px"/>
 		    <div class="form-button" @click="clickShowDialog">
-		        立即填写
+          {{TUITranslateService.t("AIDesk.立即填写")}}
 		    </div>
 		</div>
 		<div class="edit-form">
@@ -46,7 +46,7 @@
 		            </div>
 		            <div class="button-container"v-if="!finishSubmit && props.payload.nodeStatus == 0">
 		                <div class="button" @click="handleSendForm">
-		                    提交
+                      {{TUITranslateService.t("AIDesk.提交")}}
 		                </div>
 		                
 		            </div>
@@ -62,7 +62,7 @@
 		    </div>
 		    
 		    <div class="form-button" @click="clickShowDialog">
-		        查看内容
+          {{TUITranslateService.t("AIDesk.查看内容")}}
 		    </div>
 		</div>
 	</div>
@@ -80,6 +80,7 @@ import RadioMobile from './component-mobile/radios-mobile.vue';
 import LabelMobile from './component-mobile/label-mobile.vue';
 import FormPopup from './component-mobile/form-popup.vue';
 import { CUSTOM_MESSAGE_SRC } from '../../../../../../../constant';
+import {TUITranslateService} from '@tencentcloud/chat-uikit-engine';
 const { ref , onMounted,computed} = vue;
 interface Props {
   payload: customerServicePayloadType;
@@ -194,7 +195,8 @@ export default {
       handleInputChange,
       handleSendForm,
       closeDialog,
-      isValid
+      isValid,
+      TUITranslateService
     }
   }
 }

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/form-pc.vue

@@ -6,7 +6,7 @@
 		    </div>
 		    <div class="form-finish-title-right" v-if="finishSubmit || props.payload.nodeStatus == 2" >
 		        <Icon :src="iconSucess" style="margin:0px 4px"/>
-		        已提交
+		        {{TUITranslateService.t("AIDesk.已提交")}}
 		    </div>
 		</div>
 		
@@ -28,7 +28,7 @@
 		
 		<div class="button-container"v-if="!finishSubmit && props.payload.nodeStatus == 0">
 		    <div class="button" @click="handleSendForm">
-		        提交
+		        {{TUITranslateService.t("AIDesk.提交")}}
 		    </div>
 		    
 		</div>
@@ -44,6 +44,7 @@ import RadioPC from './component-pc/radio-pc.vue';
 import Icon from '../customer-icon.vue';
 import iconSucess from '../../../../../../../assets/icon_success.png';
 import { CUSTOM_MESSAGE_SRC } from '../../../../../../../constant';
+import {TUITranslateService} from '@tencentcloud/chat-uikit-engine';
 const { ref, onMounted } = vue;
 interface Props {
   payload: customerServicePayloadType;
@@ -147,7 +148,8 @@ export default {
       mapValue,
       isSubmit,
 	  checkTip,
-      isValid
+      isValid,
+      TUITranslateService
     };
   },
 };

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-product-card.vue

@@ -21,7 +21,7 @@
           {{ props.payload.content.desc }}
         </div>
         <div class="product-card-link"  @click="jumpProductCard">
-              跳转
+          {{TUITranslateService.t("AIDesk.跳转")}}
             </div>
       </div>
     </div>
@@ -31,7 +31,7 @@
 <script lang="ts">
 import { customerServicePayloadType } from '../../../../../../interface';
 import { isApp } from '../../../../../../utils/env';
-
+import {TUITranslateService} from '@tencentcloud/chat-uikit-engine';
 // eslint-disable-next-line
 declare var uni: any;
 
@@ -67,38 +67,42 @@ export default {
       props,
       isApp,
       jumpProductCard,
+      TUITranslateService
     };
   },
 };
 </script>
 <style lang="scss" scoped>
 .message-product-card {
-  min-width: 224px;
-  max-width: 288px;
+  min-width: 200px;
+  max-width: 400px;
   display: flex;
-  padding: 10px;
 
   .product-img {
     width: 75px;
     height: 75px;
     border-radius: 10px;
+    flex-shrink: 0;
+    object-fit: cover;
   }
 
   .product-card-information {
     width:100%;
-    margin-left: 12px;
+    margin-left: 15px;
     margin-right:5px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 
     .product-card-title {
-      font-size: 16px;
-      max-width: 165px;
+      max-width: 200px;
+      min-width: 100px;
+      color: #000000;
+      font-size: 14px;
       display: -webkit-box;
       overflow: hidden;
       text-overflow: ellipsis;
-      -webkit-line-clamp: 3;
+      -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       word-break: break-all;
     }
@@ -106,23 +110,29 @@ export default {
     .product-card-description-block {
       display:flex;
       justify-content: space-between;
+      align-items: center;
+      gap: 5px;
     }
 
     .product-card-description {
-      font-size: 14px;
-      max-width: 165px;
+      font-size: 12px;
+      max-width: 60px;
       color: #1c66e5;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font-weight: 600;
+      flex: 0 1 60px;
     }
 
     .product-card-link {
+      cursor: pointer;
       background-color: #1c66e5;
       color:#ffffff;
       padding:2px 12px;
       border-radius: 12px;
+      flex: 0 0 auto;
+      margin-left: auto;
     }
   }
 }

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-rating/message-rating-number.vue

@@ -5,7 +5,7 @@
     </p>
 
     <div class="rating-card">
-      <span class="card-title">请对本次服务进行评价</span>
+      <span class="card-title">{{ TUITranslateService.t("AIDesk.请对本次服务进行评价") }}</span>
       <div class="card-wrapper">
         <div style="max-width: 250px">
           <div
@@ -27,11 +27,11 @@
           </div>
         </div>
       </div>
-      <div :style="{ marginTop: 10 + 'px', marginBottom: 10 + 'px' }">
+      <div :style="{ marginTop: 10 + 'px', marginBottom: 10 + 'px', wordBreak: 'normal' }">
         {{
           hoverValue === -1
             ? selectValue === -1
-              ? "如果满意请给好评哦～"
+              ? TUITranslateService.t("AIDesk.如果满意请给好评哦～")
               : desc[selectValue]
             : desc[hoverValue]
         }}
@@ -41,7 +41,7 @@
         :disabled="hasReply || hasExpire"
         @click="submitRatingStar"
       >
-        提交评价
+      {{ TUITranslateService.t("AIDesk.提交评价") }}
       </button>
     </div>
     <p
@@ -60,6 +60,7 @@
 import vue from '../../../../../../../adapter-vue';
 import { CUSTOM_MESSAGE_SRC } from '../../../../../../../constant';
 import { ratingTemplateType } from '../../../../../../../interface';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 const { computed, ref, watchEffect } = vue;
 
 interface Props {
@@ -148,6 +149,7 @@ export default {
       setValue,
       setHoverValue,
       submitRatingStar,
+      TUITranslateService
     };
   },
 };
@@ -172,7 +174,6 @@ export default {
 
 .rating-card {
   min-width: 270px;
-  width: 50%;
   background: #fbfbfb;
   border-radius: 20px;
   border: 0;
@@ -202,7 +203,6 @@ export default {
 }
 
 .submit-button {
-  width: 50%;
   height: 50px;
   background-color: #0365f9;
   font-size: 18px;

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-rating/message-rating-star.vue

@@ -4,7 +4,7 @@
       {{ props.ratingTemplate.head }}
     </p>
     <div class="rating-card">
-      <span class="card-title">请对本次服务进行评价</span>
+      <span class="card-title">{{ TUITranslateService.t("AIDesk.请对本次服务进行评价") }}</span>
       <div class="card-wrapper">
         <div style="max-width: 200px">
           <div
@@ -30,11 +30,11 @@
           </div>
         </div>
       </div>
-      <div :style="{ marginTop: 10 + 'px', marginBottom: 10 + 'px' }">
+      <div :style="{ marginTop: 10 + 'px', marginBottom: 10 + 'px', wordBreak: 'normal' }">
         {{
           hoverValue === -1
             ? value === -1
-              ? "如果满意请给好评哦～"
+              ? TUITranslateService.t("AIDesk.如果满意请给好评哦～")
               : desc[value]
             : desc[hoverValue]
         }}
@@ -44,7 +44,7 @@
         :disabled="hasReply || hasExpire"
         @click="submitRatingStar"
       >
-        提交评价
+      {{ TUITranslateService.t("AIDesk.提交评价") }}
       </button>
     </div>
     <p
@@ -66,6 +66,7 @@ import { ratingTemplateType } from '../../../../../../../interface';
 import star from '../../../../../../../assets/star.png';
 import starLine from '../../../../../../../assets/starLine.png';
 import Icon from '../customer-icon.vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 const { computed, ref, watchEffect } = vue;
 
 interface Props {
@@ -169,6 +170,7 @@ export default {
       submitRatingStar,
       star,
       starLine,
+      TUITranslateService
     };
   },
 };
@@ -193,7 +195,6 @@ export default {
 
 .rating-card {
   min-width: 250px;
-  width: 50%;
   background: #fbfbfb;
   border-radius: 20px;
   border: 0;
@@ -223,15 +224,14 @@ export default {
 }
 
 .submit-button {
-  width: 40%;
-    height: 35px;
-    background-color: #0365f9;
-    font-size: 14px;
-    font-weight: 400;
-    color: white;
-    border: 0;
-    border-radius: 8px;
-    cursor: pointer;
+  height: 35px;
+  background-color: #0365f9;
+  font-size: 14px;
+  font-weight: 400;
+  color: white;
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
 }
 
 </style>