@tencentcloud/ai-desk-customer-vue 1.5.3 → 1.5.5

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="TUITranslateService.t('视频')"
+        :title="props.title || TUITranslateService.t('视频')"
         type="file"
         data-type="video"
         accept="video/*"
@@ -47,6 +47,9 @@ const props = defineProps({
     type: String,
     default: 'album',
   },
+  title: {
+    type: String,
+  },
 });
 
 const inputRef = ref();
@@ -63,7 +66,7 @@ const handleIcon = (): string => {
 };
 
 const handleTitle = (): string => {
-  return TUITranslateService.t('视频');
+  return props.title || TUITranslateService.t('视频');
 };
 
 const onIconClick = () => {
@@ -74,7 +77,11 @@ const sendVideoInWeb = (e: any) => {
   if (e?.target?.files?.length <= 0) {
     return;
   }
-  sendVideoMessage(e?.target);
+  const file = e?.target?.files[0];
+  if (!file || !file.size) {
+    return;
+  }
+  sendVideoMessage(e.target);
   e.target.value = '';
 };
 

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

@@ -227,7 +227,7 @@ import {
   deepCopy,
   isNonEmptyObject,
 } from '../../../utils/utils';
-import { isMessageInvisible, isThinkingMessage, isThinkingMessageOverTime, JSONToObject } from '../../../utils/index';
+import { isMessageInvisible, isThinkingMessage, isThinkingMessageOverTime, JSONToObject, isTransferMessageWithoutDesc } from '../../../utils/index';
 import { isCustomerConversation } from '../../../index';
 import { CUSTOM_MESSAGE_SRC } from '../../../constant';
 import { QuickOrderModel } from '../../../interface';
@@ -352,21 +352,31 @@ onUnmounted(() => {
 
 function onNewMessageList(list: IMessageModel[]) {
   list.forEach((message:IMessageModel) => {
-    if (message?.type === TUIChatEngine.TYPES.MSG_CUSTOM) {
-      const data = JSONToObject(message?.payload?.data);
-      if (data?.src === CUSTOM_MESSAGE_SRC.SEAT_STATUS) {
-        if (data?.content.command === "updateSeatStatus") {
-          if (data.content.content === 'inSeat') {
-            TUIStore.update(StoreName.CUSTOM, "isInHumanService", true);
-          } else if (data.content.content === 'outSeat') {
+    if (message.type === TUIChatEngine.TYPES.MSG_CUSTOM) {
+      const data = JSONToObject(message.payload.data);
+      if (data) {
+        if (data.src === CUSTOM_MESSAGE_SRC.BOT_STATUS) {
+          if (data.content.content === 'inBot') {
             TUIStore.update(StoreName.CUSTOM, "isInHumanService", false);
           }
-        }
-      } else if (data?.src === CUSTOM_MESSAGE_SRC.TYPING_STATE) {
-        if (data?.typingStatus === 1) {
-          TUIStore.update(StoreName.CUSTOM, 'isTyping', true);
-        } else {
-          TUIStore.update(StoreName.CUSTOM, 'isTyping', false);
+        } else if (data.src === CUSTOM_MESSAGE_SRC.SEAT_STATUS) {
+          if (data.content.command === "updateSeatStatus") {
+            if (data.content.content === 'inSeat') {
+              TUIStore.update(StoreName.CUSTOM, "isInHumanService", true);
+            } else if (data.content.content === 'outSeat') {
+              TUIStore.update(StoreName.CUSTOM, "isInHumanService", false);
+            }
+          }
+        } else if (data.src === CUSTOM_MESSAGE_SRC.TYPING_STATE) {
+          if (data.typingStatus === 1) {
+            TUIStore.update(StoreName.CUSTOM, 'isTyping', true);
+          } else {
+            TUIStore.update(StoreName.CUSTOM, 'isTyping', false);
+          }
+        } else if (data.src === CUSTOM_MESSAGE_SRC.NO_SEAT_ONLINE || data.src === CUSTOM_MESSAGE_SRC.TIMEOUT || data.src === CUSTOM_MESSAGE_SRC.END) {
+          TUIStore.update(StoreName.CUSTOM, "isInSession", false);
+        } else if (data.src === CUSTOM_MESSAGE_SRC.SESSION_RESTARTED) {
+          TUIStore.update(StoreName.CUSTOM, "isInSession", true);
         }
       }
     }
@@ -391,6 +401,9 @@ async function onMessageListUpdated(list: IMessageModel[]) {
     if (isThinkingMessage(message)) {
       return isThinkingMessageOverTime(message);
     }
+    if (isTransferMessageWithoutDesc(message)) {
+      return false;
+    }
     return !message.isDeleted && !isMessageInvisible(message as any);
   });
 

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

@@ -382,6 +382,7 @@ function setStatus(status: ReadState) {
       }
 
       .message-body-nick-name {
+        font-family: PingFangSC-Regular;
         display: block;
         margin-bottom: 4px;
         font-size: 12px;

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

@@ -71,7 +71,10 @@
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.ORDER">
         <MessageOrder :payload="payload" />
       </div>
-  </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.TRANSFER_TO_HUMAN || payload.src === CUSTOM_MESSAGE_SRC.TRANSFER_TO_TASK_FLOW">
+        <MessageTransferWithDesc :payload="payload" />
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -91,6 +94,7 @@ import MessageMultiBranch from './message-multi-branch/index.vue';
 import MessageMultiForm from './message-multi-form/index.vue';
 import MessageConcurrencyLimit from "./message-concurrency-limit.vue";
 import MessageOrder from './message-order.vue';
+import MessageTransferWithDesc from './message-transfer-with-desc.vue';
 import {
   IMessageModel,
   TUIChatService,
@@ -112,6 +116,7 @@ export default {
     MessageRating,
     MessageConcurrencyLimit,
     MessageOrder,
+    MessageTransferWithDesc
   },
   props: {
     message: {

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

@@ -23,10 +23,12 @@ import vue from '../../../../../../../adapter-vue';
 import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { customerServicePayloadType } from '../../../../../../../interface';
 import { isPC } from '../../../../../../../utils/env'
+import { openSafeUrl } from '../../../../../../../utils/utils';
 const { ref } = vue;
 interface branchItem {
   content: string;
   desc: string;
+  url?: string;
 }
 
 interface Props {
@@ -47,20 +49,25 @@ export default {
       if (!branch.content) {
         return;
       }
-      let cloudCustomData;
-      if (props.payload.optionType === 0) {
-        cloudCustomData = '';
-        canSelect.value = false;
-      } else if (props.payload.optionType === 1) {
-        cloudCustomData = JSON.stringify({
-          BranchOptionInfo: {
-            taskID: props.payload.taskInfo?.taskID,
-            nodeID: props.payload.taskInfo?.nodeID,
-            env: props.payload.taskInfo?.env,
-          }
-        });
+      if (branch.url) {
+        openSafeUrl(branch.url);
+      } else {
+        let cloudCustomData;
+        if (props.payload.optionType === 0) {
+          cloudCustomData = '';
+          canSelect.value = false;
+        } else if (props.payload.optionType === 1) {
+          cloudCustomData = JSON.stringify({
+            BranchOptionInfo: {
+              taskID: props.payload.taskInfo?.taskID,
+              nodeID: props.payload.taskInfo?.nodeID,
+              env: props.payload.taskInfo?.env,
+            }
+          });
+        }
+        emit('input-click', branch, cloudCustomData); 
       }
-      emit('input-click', branch, cloudCustomData); 
+      
     };
 
     return {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="message-form">
     <BranchPc
-      :payload ="payload"
+      :payload ="forwardPayload"
       @input-click="handleContentListItemClick"
     />
   </div>
@@ -11,11 +11,12 @@
 import vue from '../../../../../../../adapter-vue';
 import BranchPc from './branch-pc.vue';
 import { customerServicePayloadType } from '../../../../../../../interface';
-const { computed} = vue;
+const { computed } = vue;
 
 interface branchItem {
   content: string;
   desc: string;
+  url?: string;
 }
 
 interface Props {
@@ -34,9 +35,6 @@ export default {
   },
   emits: ['sendMessage', 'heightChanged'],
   setup(props: Props, { emit }) {
-    const payload = computed<customerServicePayloadType>(() => {
-      return props.payload;
-    });
     const handleContentListItemClick = (branch: branchItem, cloudCustomData?: string) => {
       emit('sendMessage', { text: branch.content },  cloudCustomData || '');
     };
@@ -44,8 +42,11 @@ export default {
     const handleFormSaveInputSubmit = (text: string) => {
       emit('sendMessage', { text });
     };
+    const forwardPayload = computed(() => {
+      return props.payload;
+    });
     return {
-      payload,
+      forwardPayload,
       handleContentListItemClick,
       handleFormSaveInputSubmit,
     };

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

@@ -1,6 +1,6 @@
 <template>
 	<div class="form-mobile-container">
-		<div v-if="!finishSubmit && props.payload.nodeStatus !== 2" class="before-form">
+		<div v-if="props.payload.nodeStatus !== 2" class="before-form">
       <Icon :src="iconForm" width="60px" height="60px" style="margin:5px 4px"/>
       <div :class="props.payload.nodeStatus === 1 ? 'form-button-disable': 'form-button'" @click="clickShowDialog">
         {{ TUITranslateService.t("AIDesk.立即填写") }}
@@ -28,10 +28,10 @@
               v-for="(item, index) in props.payload.content.inputVariables"
               :key="index"
             >
-              <div v-if="!finishSubmit && item.formType == 0 && props.payload.nodeStatus == 0">
+              <div v-if="item.formType == 0 && props.payload.nodeStatus == 0">
                 <InputMobile :placeholder="item.placeholder" :variableValue="item.variableValue" :name="item.name" :isRequired="item.isRequired" @input-change="handleInputChange" :validator="item.isRequired == 1 && isValid(item.name)"/>
               </div>
-              <div v-else-if="!finishSubmit && item.formType == 1 && props.payload.nodeStatus == 0">
+              <div v-else-if="item.formType == 1 && props.payload.nodeStatus == 0">
                 <RadioMobile :chooseItemList="item.chooseItemList" :name="item.name" :isRequired="item.isRequired" @input-change="handleInputChange" :validator="item.isRequired == 1 && isValid(item.name)"/>
               </div>
               <div v-else class="variable-value-container-mobile">
@@ -43,7 +43,7 @@
                 </div>
               </div>
             </div>
-            <div class="button-container"v-if="!finishSubmit && props.payload.nodeStatus === 0">
+            <div class="button-container" v-if="props.payload.nodeStatus === 0">
               <div class="button" @click="handleSendForm">
                 {{ TUITranslateService.t("AIDesk.提交") }}
               </div>
@@ -52,10 +52,10 @@
         </FormPopup>
       </div>
 		</div>
-		<div v-if="finishSubmit || props.payload.nodeStatus == 2" class="before-form">
+		<div v-if="props.payload.nodeStatus == 2" class="before-form">
       <div class="icon-container">
         <Icon class="form-icon" :src="iconForm" width="60px" height="60px" style="margin:5px 4px"/>
-        <Icon v-if="finishSubmit || props.payload.nodeStatus == 2" class="form-icon-check" width="26px" height="26px" :src="iconFormFilled"/>
+        <Icon v-if="props.payload.nodeStatus == 2" class="form-icon-check" width="26px" height="26px" :src="iconFormFilled"/>
       </div>
       <div class="form-button" @click="clickShowDialog">
         {{ TUITranslateService.t("AIDesk.查看内容") }}
@@ -102,7 +102,6 @@ export default {
     const showDialog = ref<boolean>(false);
     const mapValue=ref({});
     const isSubmit = ref<boolean>(false);
-    const finishSubmit = ref<boolean>(false);
     const hasNullValue = ref<boolean>(true);
     onMounted(() => {
       let inputVariables = props.payload.content.inputVariables ?? [];
@@ -163,7 +162,6 @@ export default {
         }),
       };
       emit('sendMessage', submitData);
-      finishSubmit.value = true;
       isSubmit.value = false;
     };
     const handleInputChange = ({name,value}) => {
@@ -184,7 +182,6 @@ export default {
       clickShowDialog,
       iconClose,
       checkValidator,
-      finishSubmit,
       showValue,
       mapValue,
       isSubmit,
@@ -314,6 +311,7 @@ export default {
   display:flex;
   flex-direction: column;
   justify-content: center;
+  font-family: PingFangSC-Regular;
   .form-button {
     display:flex;
     justify-content: center;
@@ -321,6 +319,7 @@ export default {
     background-color: #1c66e5;
     color:white;
     border-radius:20px;
+    min-width: 100px;
   }
   .form-button-disable {
     background-color: #dbdbdb;

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

@@ -4,7 +4,7 @@
       <div class="form-title" v-if="checkTip()">
         {{ props.payload.content.tip }}
       </div>
-      <div class="form-finish-title-right" v-if="finishSubmit || props.payload.nodeStatus == 2" >
+      <div class="form-finish-title-right" v-if="props.payload.nodeStatus == 2" >
         <Icon :src="iconSucess" style="margin:0px 4px"/>
         <div class="form-finish-title">
           {{ TUITranslateService.t("AIDesk.已提交") }}
@@ -17,17 +17,17 @@
       :key="index"
 		>
       <LabelPC :name="item.name" :is-required="item.isRequired" />
-      <div v-if="!finishSubmit && item.formType == 0 && props.payload.nodeStatus !== 2">
+      <div v-if="item.formType == 0 && props.payload.nodeStatus !== 2">
         <InputPC :placeholder="item.placeholder" :variableValue="item.variableValue" :name="item.name" :isRequired="item.isRequired" @input-change="handleInputChange" :validator="item.isRequired == 1 && isValid(item.name)" :isDisabled="props.payload.nodeStatus === 1"/>
       </div>
-      <div v-else-if="!finishSubmit && item.formType == 1 && props.payload.nodeStatus !== 2">
+      <div v-else-if="item.formType == 1 && props.payload.nodeStatus !== 2">
         <RadioPC :chooseItemList="item.chooseItemList" :name="item.name" :isRequired="item.isRequired" @input-change="handleInputChange" :validator="item.isRequired == 1 && isValid(item.name)" :isDisabled="props.payload.nodeStatus === 1"/>
       </div>
       <div v-else class="variable-value-container">
         {{ item.variableValue == '' ||  item.variableValue == null ? mapValue[item.name] : item.variableValue}}
       </div>
 		</div>
-		<div class="button-container"v-if="!finishSubmit && props.payload.nodeStatus !== 2">
+		<div class="button-container" v-if="props.payload.nodeStatus !== 2">
       <div :class="props.payload.nodeStatus === 1 ? 'button-disable' : 'button'" @click="handleSendForm">
         {{ TUITranslateService.t("AIDesk.提交") }}
       </div>
@@ -66,7 +66,6 @@ export default {
   setup(props: Props, { emit }) {
     const mapValue=ref({});
     const isSubmit = ref<boolean>(false);
-    const finishSubmit = ref<boolean>(false);
     const hasNullValue = ref<boolean>(true);
     onMounted(()=>{
       let inputVariables = props.payload.content.inputVariables ?? [];
@@ -118,7 +117,6 @@ export default {
         }),
       };
       emit('sendMessage', submitData);
-      finishSubmit.value = true;
       isSubmit.value = false;
     };
 
@@ -141,7 +139,6 @@ export default {
       handleInputChange,
       iconSucess,
       checkValidator,
-      finishSubmit,
       showValue,
       mapValue,
       isSubmit,

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

@@ -1,9 +1,9 @@
 <template>
   <div v-if="isPC" class="message-input">
-    <FormPC :payload="payloads" @sendMessage="handleSendForm" />
+    <FormPC :payload="forwardPayload" @sendMessage="handleSendForm" />
   </div>
   <div v-else>
-    <FormMobile :payload="payloads" @sendMessage="handleSendForm" @showFormPopup="handleShowFormPopup"/>
+    <FormMobile :payload="forwardPayload" @sendMessage="handleSendForm" @showFormPopup="handleShowFormPopup"/>
   </div>
 </template>
 
@@ -15,11 +15,6 @@ import { customerServicePayloadType } from '../../../../../../../interface';
 import { isPC } from '../../../../../../../utils/env';
 const { computed } = vue;
 
-interface branchItem {
-  content: string;
-  desc: string;
-}
-
 interface Props {
   payload: customerServicePayloadType;
 }
@@ -37,18 +32,17 @@ export default {
   },
   emits: ['sendMessage','showFormPopup'],
   setup(props: Props, { emit }) {
-  const payloads = computed<customerServicePayloadType>(() => {
-    return props.payload;
-  });
     const handleSendForm = (data: any) => {
       emit('sendMessage', data);
     };
     const handleShowFormPopup = (data: boolean) => {
       emit('showFormPopup', data);
     }
-
+    const forwardPayload = computed(() => {
+      return props.payload;
+    });
     return {
-      payloads,
+      forwardPayload,
       handleSendForm,
       isPC,
       handleShowFormPopup

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

@@ -30,15 +30,21 @@
           </div>
         </div>
       </div>
-      <div :style="{ marginTop: 10 + 'px', marginBottom: 10 + 'px', wordBreak: 'normal' }">
-        {{
-          hoverValue === -1
-            ? value === -1
-              ? TUITranslateService.t("AIDesk.如果满意请给好评哦～")
-              : desc[value]
-            : desc[hoverValue]
-        }}
+      <div>
+        <div :style="{ marginTop: 10 + 'px', marginBottom: 10 + 'px', wordBreak: 'normal' }">
+          {{
+            hoverValue === -1
+              ? value === -1
+                ? TUITranslateService.t("AIDesk.如果满意请给好评哦～")
+                : desc[value]
+              : desc[hoverValue]
+          }}
+        </div>
+        <div class="hidden-desc">
+          {{ TUITranslateService.t("AIDesk.如果满意请给好评哦～") }}
+        </div>
       </div>
+      
       <button
         class="submit-button"
         :disabled="hasReply || hasExpire"
@@ -201,11 +207,11 @@ export default {
 }
 
 .message-rating-star {
+  font-family: PingFangSC-Regular;
   text-align: center;
   display: flex;
   flex-flow: column wrap;
   justify-content: center;
-
   align-items: center;
 }
 
@@ -228,4 +234,14 @@ export default {
   width: 62%;
 }
 
+.hidden-desc {
+  width: 100%;
+  overflow-wrap: break-word;
+  word-break: normal;
+  visibility: hidden;
+  padding: 0;
+  margin: 0;
+  height: 0;
+}
+
 </style>

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-robot-welcome.vue

@@ -17,13 +17,18 @@
         <Icon :src="iconRefresh" />
       </div>
     </div>
-    <div
-      v-for="(item, index) in showList"
-      :key="index"
-      class="welcome-item"
-      @click="handleContentListItemClick(item)"
-    >
-      <div>{{ item.content }}</div>
+    <div class="welcome-items-container">
+      <div
+        v-for="(item, index) in showList"
+        :key="index"
+        class="welcome-item"
+        @click="handleContentListItemClick(item)"
+      >
+        <div class="item-content">{{ item.content }}</div>
+      </div>
+      <div class="welcome-item welcome-item-hidden">
+        {{ longestContent }}
+      </div>
     </div>
   </div>
 </template>
@@ -37,7 +42,7 @@ import Icon from './customer-icon.vue';
 import iconQuestion from '../../../../../../assets/icon_question.png';
 import iconRefresh from '../../../../../../assets/icon_refresh.png';
 import { customerServicePayloadType } from '../../../../../../interface';
-const { reactive, toRefs } = vue;
+const { reactive, toRefs, computed } = vue;
 
 interface Props {
   payload: customerServicePayloadType;
@@ -56,7 +61,7 @@ export default {
   props: {
     payload: {
       type: Object as () => customerServicePayloadType,
-      default: () => ({ content: { title: '', items: [] } }),
+      default: () => ({ content: { title: '', items: [] }}),
     },
   },
   emits: ['sendMessage'],
@@ -86,6 +91,19 @@ export default {
       );
       data.pageNumber += 1;
     };
+    
+    const longestContent = computed(() => {
+      if (!data.list) {
+        return '';
+      }
+      let longestContent = '';
+      data.list.forEach((item) => {
+        if (item.content.length > longestContent.length) {
+          longestContent = item.content;
+        }
+      });
+      return longestContent;
+    });
 
     return {
       ...toRefs(data),
@@ -96,6 +114,7 @@ export default {
       changeBranchList,
       iconQuestion,
       iconRefresh,
+      longestContent
     };
   },
 };
@@ -104,6 +123,9 @@ export default {
 <style lang="scss">
 .welcome-card {
   max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   .welcome-title {
     display: flex;
@@ -111,6 +133,8 @@ export default {
     margin-bottom: 10px;
     justify-content: space-between;
     align-items: center;
+    width: 100%;
+    gap: 10px;
   }
 
   .welcome-title-left-container {
@@ -151,28 +175,49 @@ export default {
     cursor: pointer;
   }
 
-  .welcome-item {
-    padding: 6px;
+  .welcome-items-container {
+    width: 100%;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
     align-items: center;
-    cursor: pointer;
-    background-color: #ffffff;
-    margin-bottom: 10px;
-    border:1px solid #adcfff;
-    border-radius: 20px;
-    font-weight: 500;
-    color: #1c66e5;
-    gap: 10px;
-    word-break: break-word;
-  }
-
-  .welcome-item:hover {
-    background: #f2f7ff;
-  }
-
-  .welcome-item:last-child {
-    margin-bottom: 0;
+    .welcome-item {
+      width: 100%;
+      padding: 6px 10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      background-color: #ffffff;
+      margin-bottom: 10px;
+      border:1px solid #adcfff;
+      border-radius: 20px;
+      font-weight: 500;
+      color: #1c66e5;
+      gap: 10px;
+      box-sizing: border-box;
+      .item-content {
+        text-align: center; 
+        overflow-wrap: break-word;
+        word-break: normal;
+        width: 100%;
+        padding: 0 10px;
+      }
+    }
+
+    .welcome-item:hover {
+      background: #f2f7ff;
+    }
+
+    .welcome-item:last-child {
+      margin-bottom: 0;
+    }
+
+    .welcome-item-hidden {
+      visibility: hidden;
+      padding: 0;
+      margin: 0;
+      height: 0;
+    }
   }
 }
 </style>