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

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

@@ -1,39 +1,37 @@
 <template>
-	<div>
+	<div class="form-pc-container">
 		<div class="title-container">
-		    <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" >
-		        <Icon :src="iconSucess" style="margin:0px 4px"/>
-		        {{TUITranslateService.t("AIDesk.已提交")}}
-		    </div>
+      <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" >
+        <Icon :src="iconSucess" style="margin:0px 4px"/>
+        {{ TUITranslateService.t("AIDesk.已提交") }}
+      </div>
 		</div>
-		
+
 		<div
-		    v-for="(item, index) in props.payload.content.inputVariables"
-		    :key="index"
+      v-for="(item, index) in props.payload.content.inputVariables"
+      :key="index"
 		>
-		    <LabelPC :name="item.name" :is-required="item.isRequired" />
-		    <div v-if="!finishSubmit && item.formType == 0 && props.payload.nodeStatus == 0">
-		        <InputPC :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">
-		        <RadioPC :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">
-		        {{ item.variableValue == '' ||  item.variableValue == null ? mapValue[item.name] : item.variableValue}}
-		    </div>
+      <LabelPC :name="item.name" :is-required="item.isRequired" />
+      <div v-if="!finishSubmit && 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">
+        <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 == 0">
-		    <div class="button" @click="handleSendForm">
-		        {{TUITranslateService.t("AIDesk.提交")}}
-		    </div>
-		    
+		<div class="button-container"v-if="!finishSubmit && props.payload.nodeStatus !== 2">
+      <div :class="props.payload.nodeStatus === 1 ? 'button-disable' : 'button'" @click="handleSendForm">
+        {{ TUITranslateService.t("AIDesk.提交") }}
+      </div>
 		</div>
 	</div>
-    
+
 </template>
 <script lang="ts">
 import vue from '../../../../../../../adapter-vue';
@@ -50,17 +48,17 @@ interface Props {
   payload: customerServicePayloadType;
 }
 export default {
-    components: {
-        LabelPC,
-        InputPC,
-        RadioPC,
-        Icon
-    },
+  components: {
+    LabelPC,
+    InputPC,
+    RadioPC,
+    Icon
+  },
  props: {
-    payload: {
-      type: Object as () => customerServicePayloadType,
-      default: () => ({}),
-    },
+  payload: {
+    type: Object as () => customerServicePayloadType,
+    default: () => ({}),
+  },
   },
   emits: ['sendMessage'],
   setup(props: Props, { emit }) {
@@ -69,73 +67,71 @@ export default {
     const finishSubmit = ref<boolean>(false);
     const hasNullValue = ref<boolean>(true);
     onMounted(()=>{
-        let inputVariables = props.payload.content.inputVariables ?? [];
-        for(let i=0;i<inputVariables.length;i++){
-            const name = inputVariables[i].name;
-            const variableValue = inputVariables[i].variableValue;
-            mapValue.value[name]=variableValue;
-        }
+      let inputVariables = props.payload.content.inputVariables ?? [];
+      for (let i = 0; i < inputVariables.length; i++) {
+        const name = inputVariables[i].name;
+        const variableValue = inputVariables[i].variableValue;
+        mapValue.value[name] = variableValue;
+      }
     });
-	
-	const checkTip = () => {
-		return props.payload.content.tip != '' && props.payload.content.tip != null;
-	}
 
+    const checkTip = () => {
+      return props.payload.content.tip != '' && props.payload.content.tip != null;
+    }
 
     const checkValidator = (name:string) => {
-        hasNullValue.value = false;
-        if(isSubmit.value == true){
-            if(mapValue.value[name] == null || mapValue.value[name] == ''){
-                hasNullValue.value = true;
-                return true;
-                
-            }
+      hasNullValue.value = false;
+      if (isSubmit.value == true) {
+        if (mapValue.value[name] == null || mapValue.value[name] == '') {
+          hasNullValue.value = true;
+          return true;
         }
-        return false;
+      }
+      return false;
     }
 
-    
-
     const handleSendForm = (data: any) => {
-        isSubmit.value = true;
-        let list = props.payload.content.inputVariables;
-        for(let i=0;i<list.length;i++){
-            let value = mapValue.value[list[i].name];
-            if(value !='' && value != null){
-                list[i].variableValue = value;
-            }else {
-                if(list[i].isRequired === 1  && checkValidator(list[i].name)){
-                    return;
-                }
-            }
+      if (props.payload.nodeStatus === 1) {
+        return;
+      }
+      isSubmit.value = true;
+      let list = props.payload.content.inputVariables;
+      for (let i = 0; i < list.length; i++) {
+        let value = mapValue.value[list[i].name];
+        if (value !='' && value != null) {
+          list[i].variableValue = value;
+        } else {
+          if (list[i].isRequired === 1 && checkValidator(list[i].name)) {
+            return;
+          }
         }
-        const submitData = {
-            data: JSON.stringify({
-                src: CUSTOM_MESSAGE_SRC.MULTI_FORM,
-                content: {
-		            inputVariables: list
-	            },
-                customerServicePlugin: 0,
+      }
+      const submitData = {
+        data: JSON.stringify({
+          src: CUSTOM_MESSAGE_SRC.MULTI_FORM,
+          content: {
+            inputVariables: list
+          },
+          customerServicePlugin: 0,
         }),
-        };
-
-            emit('sendMessage', submitData);
-            finishSubmit.value = true;
-
-        isSubmit.value = false;
+      };
+      emit('sendMessage', submitData);
+      finishSubmit.value = true;
+      isSubmit.value = false;
     };
+
     const handleInputChange = ({name,value}) =>{
-        mapValue.value[name] = value;
+      mapValue.value[name] = value;
     }
 
     const showValue = (name:string,variableValue:string) => {
-        if(variableValue != null && variableValue != ''){
-                return variableValue
-        }
-        return mapValue.value[name];
+      if (variableValue != null && variableValue != '') {
+        return variableValue
+      }
+      return mapValue.value[name];
     }
     const isValid = (name:string) => {
-        return isSubmit.value && (mapValue.value[name] == null || mapValue.value[name] == '' || mapValue.value[name] == undefined)
+      return isSubmit.value && (mapValue.value[name] == null || mapValue.value[name] == '' || mapValue.value[name] == undefined);
     }
     return {
       props,
@@ -147,7 +143,7 @@ export default {
       showValue,
       mapValue,
       isSubmit,
-	  checkTip,
+	    checkTip,
       isValid,
       TUITranslateService
     };
@@ -155,32 +151,45 @@ export default {
 };
 </script>
 <style lang="scss">
-.title-container{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-    min-width: 300px;
+.form-pc-container {
+  font-family: PingFangSC-Regular;
+  max-width: 350px;
+}
+.title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
 }
 .form-finish-title-right {
-      display:flex;
-    }
-.button-container{
-    display:flex;
+  display: flex;
+}
+.button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 15px;
+  .button {
+    display: flex;
     justify-content: center;
-    margin-top:15px;
-    .button {
-        display:flex;
-        justify-content: center;
-        width: 87px;
-        padding:6px 10px;
-        background-color: #1c66e5;
-        color:white;
-        border-radius:25px ;
-    }
+    width: 87px;
+    padding: 6px 10px;
+    background-color: #1c66e5;
+    color: white;
+    border-radius: 20px;
+    cursor: pointer;
+  }
+  .button-disable {
+    background-color: #dbdbdb;
+    display: flex;
+    justify-content: center;
+    width: 87px;
+    padding: 6px 10px;
+    color: white;
+    border-radius: 20px;
+  }
 }
-.variable-value-container{
-    padding-bottom: 8px;
-    margin-top:3px;
+.variable-value-container {
+  padding-bottom: 8px;
+  margin-top: 3px;
 }
-</style>
+</style>

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

@@ -1,10 +1,10 @@
 <template>
-    <div v-if="isPC" class="message-input">
-        <FormPC :payload="payloads" @sendMessage="handleSendForm" />
-    </div>
-    <div v-else>
-        <FormMobile :payload="payloads" @sendMessage="handleSendForm" @showFormPopup="handleShowFormPopup"/>
-    </div>
+  <div v-if="isPC" class="message-input">
+    <FormPC :payload="payloads" @sendMessage="handleSendForm" />
+  </div>
+  <div v-else>
+    <FormMobile :payload="payloads" @sendMessage="handleSendForm" @showFormPopup="handleShowFormPopup"/>
+  </div>
 </template>
 
 <script lang="ts">
@@ -13,7 +13,7 @@ import FormPC from './form-pc.vue';
 import FormMobile from './form-mobile.vue';
 import { customerServicePayloadType } from '../../../../../../../interface';
 import { isPC } from '../../../../../../../utils/env';
-const { computed} = vue;
+const { computed } = vue;
 
 interface branchItem {
   content: string;

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

@@ -0,0 +1,141 @@
+<template>
+  <div
+    class="message-order"
+  >
+    <div class="order-guide">
+      {{ props.payload.content.guide }}
+    </div>
+    <div class="order-main">
+      <img
+        v-if="props.payload.content.pic"
+        class="order-img"
+        :src="props.payload.content.pic"
+      >
+      <div class="order-information">
+        <div class="order-name">
+          {{ props.payload.content.name }}
+        </div>
+        <div class="order-description">
+          {{ props.payload.content.desc }}
+        </div>
+      </div>
+    </div>
+    <div class="order-custom" v-for="item in props.payload.content.customField">
+      <div class="order-field">
+        <span class="field-name"> {{ item.name }} </span>
+        <span class="field-value"> {{ item.value }} </span>
+        <span class="field-customer-value"> {{ item.customerValue }} </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { customerServicePayloadType } from '../../../../../../interface';
+
+interface Props {
+  payload: customerServicePayloadType;
+}
+
+export default {
+  props: {
+    payload: {
+      type: Object as () => customerServicePayloadType,
+      default: () => ({}),
+    },
+  },
+  setup(props: Props) {
+    return {
+      props,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.message-order {
+  min-width: 200px;
+  max-width: 400px;
+  color: #000;
+  font-family: PingFangSC-Regular;
+
+  .order-guide {
+    font-size: 14px;
+    margin-bottom: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .order-main {
+    display:flex;
+
+    .order-img {
+      width: 65px;
+      height: 65px;
+      border-radius: 10px;
+      flex-shrink: 0;
+      object-fit: cover;
+      margin-right: 15px;
+    }
+
+    .order-information {
+      width:100%;
+      margin-right:5px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .order-name {
+        max-width: 200px;
+        min-width: 100px;
+        color: #000000;
+        font-size: 14px;
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+      }
+
+      .order-description {
+        font-size: 14px;
+        max-width: 200px;
+        min-width: 100px;
+        color: rgba(0, 0, 0, 0.55);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .order-field {
+    font-size: 12px;
+    font-weight: 500;
+    margin-top: 5px;
+    display: flex;
+    gap: 8px;
+
+    .field-name {
+      color: rgba(0, 0, 0, 0.55);
+      flex: 0 0 auto;
+      width: 70px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .field-value {
+      color: #333;
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      min-width: 0;
+      padding-left: 4px;
+    }
+  }
+}
+</style>

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

@@ -35,7 +35,7 @@ export default {
       default: () => ({}),
     },
   },
-  setup(props: Props) {
+  setup(props: Props, { emit }) {
     const image = ref(false);
     const imageSrc = ref('');
     const imageList = [];
@@ -45,6 +45,10 @@ export default {
         image.value = !image.value;
         imageSrc.value = decodeURIComponent(href);
       }
+      // @ts-ignore
+      window.onMarkdownImageLoad = function() {
+        emit('heightChanged');
+      }
       return parseMarkdown(props.payload.content);
     });
 

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

@@ -1,5 +1,6 @@
 <template>
   <div class="message-stream">
+    <span v-if="isCursorBlinking" class="blinking-cursor">|</span>
     <pre ref="preRef" :class="['message-marked']" v-html="displayedContent" />
   </div>
   <div v-if="image" class="rich-image-previewer" @click="closeImage">
@@ -27,6 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
   payload: () => '',
 });
 
+const isCursorBlinking = ref<boolean>(true);
 const isStreaming = ref<boolean>(false);
 const image = ref(false);
 const imageSrc = ref('');
@@ -40,6 +42,11 @@ const displayedContent = computed(() => {
     image.value = !image.value;
     imageSrc.value = decodeURIComponent(href);
   }
+  // @ts-ignore
+  window.onMarkdownImageLoad = function() {
+    // empty implementation
+    // 已经用 ResizeObserver 观测高度，这里不用重复通知高度变化
+  }
   return parseMarkdown(streamContent.value);
 });
 const preRef = ref();
@@ -78,11 +85,18 @@ watch(() => props.payload, (newValue: string, oldValue: string) => {
       const _payloadObject = JSONToObject(props.payload);
       chunks.value = Array.isArray(_payloadObject.chunks) ? _payloadObject.chunks.join('') : _payloadObject.chunks;
       isFinished.value = _payloadObject.isFinished === 1;
+
+      // hide blinking cursor
+      if (chunks.value.length > 0) {
+        isCursorBlinking.value = false;
+      }
+
       if (newValue && !oldValue && isFinished.value) {
         // disable typeWriter style or history message first load
         streamContent.value = chunks.value;
+        prevChunksLength.value = chunks.value.length;
       } else {
-        // 判断长度是为了防御编辑的内容回退的异常 case
+        // 判断长度是为了防御编辑的内容回退和内容重复的异常 case
         if (chunks.value.length > prevChunksLength.value) {
           const _newChunksToAdd = chunks.value?.slice(prevChunksLength.value);
           prevChunksLength.value = chunks.value.length;
@@ -136,4 +150,14 @@ const closeImage = () => {
   white-space: normal;
   font-size: 14px;
 }
+
+.blinking-cursor {
+  animation: blink 0.8s step-end infinite;
+  color: #000;
+}
+
+@keyframes blink {
+  from, to { opacity: 1; }
+  50% { opacity: 0; }
+}
 </style>

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

@@ -22,7 +22,7 @@ import {
   IMessageModel,
 } from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../../common/Icon.vue';
-import files from '../../../../assets/files.png';
+import files from '../../../../assets/files.svg';
 import { isUniFrameWork } from '../../../../utils/env';
 import type { IFileMessageContent } from '../../../../interface';
 const { withDefaults } = vue;

package/components/CustomerServiceChat/message-list/scroll-button/index.vue

@@ -64,7 +64,7 @@ watch(
 onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
     messageList: onMessageListUpdated,
-    newMessageList: onNewMessageListUpdated,
+    newMessageList: onNewMessageList,
   });
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdated,
@@ -74,7 +74,7 @@ onMounted(() => {
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CHAT, {
     messageList: onMessageListUpdated,
-    newMessageList: onNewMessageListUpdated,
+    newMessageList: onNewMessageList,
   });
   TUIStore.unwatch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdated,
@@ -91,11 +91,13 @@ function onMessageListUpdated(newMessageList: IMessageModel[]) {
   messageList.value = newMessageList || [];
   const lastMessage = messageList.value?.[messageList.value?.length - 1];
   isExistLastMessage.value = !!(
-    lastMessage && lastMessage?.time < currentLastMessageTime?.value
+      // 过滤在线消息
+      // @ts-ignore
+      lastMessage && !lastMessage?._message._onlineOnlyFlag && lastMessage?.time < currentLastMessageTime?.value
   );
 }
 
-function onNewMessageListUpdated(newMessageList: IMessageModel[]) {
+function onNewMessageList(newMessageList: IMessageModel[]) {
   if (Array.isArray(newMessageList) && isScrollButtonVisible.value) {
     newMessageList.forEach((message: IMessageModel) => {
       if (
@@ -104,6 +106,9 @@ function onNewMessageListUpdated(newMessageList: IMessageModel[]) {
         && !message.isDeleted
         && !message.isRevoked
         && !isTypingMessage(message)
+        // 过滤在线消息
+        // @ts-ignore
+        && !message._message._onlineOnlyFlag
       ) {
         newMessageCount.value += 1;
       }
@@ -167,9 +172,17 @@ function scrollToMessageListBottom() {
   emits('scrollToLatestMessage');
 }
 
+function hideScrollButton() {
+  if (isScrollButtonVisible.value) {
+    isScrollButtonVisible.value = false;
+    resetNewMessageCount();
+  }
+}
+
 defineExpose({
   judgeScrollOverOneScreen,
   isScrollButtonVisible,
+  hideScrollButton,
 });
 </script>
 
@@ -179,8 +192,6 @@ defineExpose({
   bottom: 10px;
   right: 10px;
   width: auto;
-  min-width: 92px;
-  max-width: 115px;
   height: 28px;
   background: #fff;
   border: 1px solid #e0e0e0;
@@ -198,6 +209,7 @@ defineExpose({
     font-size: 10px;
     color: #147aff;
     margin-left: 3px;
+    margin-right: 3px;
   }
 }
 </style>

package/components/CustomerServiceChat/message-list/style/web.scss

@@ -48,7 +48,8 @@
     .tui-message-list {
       flex: 1;
       height: 100%;
-      overflow: auto;
+      overflow-y: auto;
+      overflow-x: hidden;
 
       .message-more {
         font-size: 14px;