@tencentcloud/ai-desk-customer-vue 1.0.1 → 1.3.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,142 @@
+<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: 2;
+        -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;
+        white-space: nowrap;
+        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-rating/message-rating-number.vue

@@ -204,13 +204,14 @@ export default {
 
 .submit-button {
   height: 50px;
-  background-color: #0365f9;
+  background-color: #1c66e5;
   font-size: 18px;
   font-weight: 400;
   color: white;
   border: 0;
   border-radius: 8px;
   cursor: pointer;
+  width: 62%;
 }
 
 .de-active {

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

@@ -225,13 +225,14 @@ export default {
 
 .submit-button {
   height: 35px;
-  background-color: #0365f9;
+  background-color: #1c66e5;
   font-size: 14px;
   font-weight: 400;
   color: white;
   border: 0;
   border-radius: 8px;
   cursor: pointer;
+  width: 62%;
 }
 
 </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);
     });
 
@@ -70,7 +74,7 @@ export default {
   z-index: 101;
   width: 100vw;
   height: 100vh;
-  background: rgba(#000, 0.3);
+  background: rgba(#000, 0.8);
   top: 0;
   left: 0;
   display: flex;
@@ -81,14 +85,12 @@ export default {
 }
 
 .rich-image-preview {
-  width: 80%;
-  height:auto;
+  max-width: 90%;
+  height: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  transition: transform 0.1s ease 0s;
   pointer-events: auto;
 }
-
 </style>

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

@@ -1,6 +1,13 @@
 <template>
   <div class="message-stream">
-    <pre :class="['message-marked']" v-html="displayedContent" />
+    <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">
+    <img
+        class="rich-image-preview"
+        :src="imageSrc"
+    />
   </div>
 </template>
 
@@ -11,7 +18,7 @@ import { parseMarkdown } from './marked'
 import { TypeWriter } from "./type-writer";
 import { JSONToObject } from "../../../../../../utils";
 
-const { ref, computed, withDefaults, defineProps, watch } = vue;
+const { ref, computed, withDefaults, defineProps, watch, onMounted, onUnmounted } = vue;
 
 interface Props {
   payload: customerServicePayloadType;
@@ -21,12 +28,34 @@ const props = withDefaults(defineProps<Props>(), {
   payload: () => '',
 });
 
+const isCursorBlinking = ref<boolean>(true);
 const isStreaming = ref<boolean>(false);
+const image = ref(false);
+const imageSrc = ref('');
 const chunks = ref<string>('');
 const isFinished = ref<boolean>(true);
 const prevChunksLength = ref<number>(0);
 const streamContent = ref<string>('');
-const displayedContent = computed(() => parseMarkdown(streamContent.value));
+const displayedContent = computed(() => {
+  // @ts-ignore
+  window.onMarkdownImageClicked = function(href:string) {
+    image.value = !image.value;
+    imageSrc.value = decodeURIComponent(href);
+  }
+  // @ts-ignore
+  window.onMarkdownImageLoad = function() {
+    // empty implementation
+    // 已经用 ResizeObserver 观测高度，这里不用重复通知高度变化
+  }
+  return parseMarkdown(streamContent.value);
+});
+const preRef = ref();
+const emits = defineEmits(['heightChanged']);
+// 不支持 ResizeObserver 的浏览器太老旧，默认不处理了
+const canIUseResizeObserver = typeof ResizeObserver === 'undefined' ? false : true;
+
+let observer;
+let prevHeight;
 
 const typeWriter = new TypeWriter({
   onTyping: (item: string) => {
@@ -56,19 +85,63 @@ 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 {
-        const _newChunksToAdd = chunks.value?.slice(prevChunksLength.value);
-        startStreaming([_newChunksToAdd]);
+        // 判断长度是为了防御编辑的内容回退和内容重复的异常 case
+        if (chunks.value.length > prevChunksLength.value) {
+          const _newChunksToAdd = chunks.value?.slice(prevChunksLength.value);
+          prevChunksLength.value = chunks.value.length;
+          startStreaming([_newChunksToAdd]);
+        }
       }
-      prevChunksLength.value = chunks.value?.length;
     }, {
       deep: true,
       immediate: true,
     },
 );
+
+onMounted(() => {
+  if (canIUseResizeObserver) {
+    observer = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        observeHeightChanged(entry.contentRect.height);
+      }
+    });
+    // 开始观察
+    observer.observe(preRef.value);
+  }
+});
+
+onUnmounted(() => {
+  if (canIUseResizeObserver) {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  }
+});
+
+const observeHeightChanged = (newHeight) => {
+  if (prevHeight !== newHeight) {
+    prevHeight = newHeight;
+    emits('heightChanged');
+  }
+};
+
+const closeImage = () => {
+  image.value = !image.value;
+  imageSrc.value = '';
+};
+
 </script>
 <style lang="scss" scoped>
 .message-stream {
@@ -77,4 +150,14 @@ watch(() => props.payload, (newValue: string, oldValue: string) => {
   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>