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

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

@@ -0,0 +1,117 @@
+<template>
+  <div class="form-branch-container">
+    <p
+      v-if="props.title"
+      class="form-card-title"
+    >
+      {{ props.title }}
+    </p>
+    <div
+      v-for="(item, index) in props.list"
+      :key="index"
+      :class="getItemClass(item)"
+      @click="listItemClick(item)"
+    >
+      {{ item.content }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import vue from '../../../../../../../adapter-vue';
+const { computed, ref } = vue;
+
+interface branchItem {
+  content: string;
+  desc: string;
+}
+
+interface Props {
+  title: string;
+  list: branchItem[];
+  selectedContent: string;
+}
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    selectedContent: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['input-click'],
+  setup(props: Props, { emit }) {
+    const disabled = ref<boolean>(false);
+    const selectedItem = ref<string>('');
+    const listItemClick = (branch: branchItem): void => {
+      if (disabled.value || props.selectedContent) {
+        return;
+      }
+      emit('input-click', branch);
+      disabled.value = true;
+      selectedItem.value = branch.content;
+    };
+    const getItemClass = (item: branchItem) => {
+      const classes:string[] = [];
+      if (props.selectedContent) {
+        classes.push(item.content === props.selectedContent ? 'item-selected' : 'item-disabled');
+      } else if (disabled.value) {
+        classes.push(item.content === selectedItem.value ? 'item-selected' : 'item-disabled');
+      }
+      classes.push('ivr-form-branch-item');
+      return classes;
+    };
+    return {
+      props,
+      listItemClick,
+      disabled,
+      selectedItem,
+      getItemClass
+    };
+  },
+};
+</script>
+<style lang="scss">
+.form-branch-container {
+  .form-card-title {
+    margin-bottom: 8px;
+  }
+
+  .ivr-form-branch-item {
+    cursor: pointer;
+    color: #1C66E5;
+    background-color: #fff;
+    border: 1px solid rgba(0, 110, 255, 0.3);
+    padding: 12px;
+    border-radius: 20px;
+    margin-top: 8px;
+    line-height: 16px;
+    width: -moz-fit-content;
+    max-width: fit-content;
+    font-family: PingFangSC-Regular;
+    min-width: 50px;
+    text-align: center;
+    word-wrap: break-word;
+  }
+  .item-disabled {
+    cursor: default !important;
+    opacity: 0.6;
+    color: #94BFFF;
+    background-color: #F5F9FF;
+    border: 1px solid rgba(0, 110, 255, 0.15);
+  }
+  .item-selected {
+    background-color: rgba(54, 141, 255, 0.15) !important;
+    position: relative;
+    cursor: default !important;
+  }
+}
+</style>

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/{message-single-form → message-ivr-form}/form-input.vue

@@ -1,37 +1,25 @@
 <template>
-  <div class="form-container" v-if="!isShowForm && !isFinish">
-      <Icon :src="iconForm" width="65px" height="65px"/>
-    
-    <div class="right-container">
-      <div class="card-title">
-        {{ props.title }}
-      </div>
-      <div class="form-button" @click="showForm">
-        {{ TUITranslateService.t("AIDesk.立即填写") }}
-      </div>
-    </div>
-    
-  </div>
-  <div class="form-input-container" v-else-if="isShowForm && !isFinish">
+  <div class="form-input-container" v-if="!isFinish && !props.selectedContent">
     <div class="card-title">
-      <!-- {{ props.title }} -->
-        title
+      {{ props.title }}
     </div>
     <div class="form-input-box">
-      <div class="form-input-line">
-        <div class="form-label">
-          <span class="required-icon" v-if="true" >{{'*'}}</span>
-          <label>label</label>
-        </div>
+      <div class="form-input-text">
         <input
           v-model="text"
-          class="form-input"
+          :class="['form-input', isH5 ? 'form-input-h5' : '']"
           :placeholder="TUITranslateService.t('AIDesk.请输入内容')"
         >
+        <div v-if="validator" class="validator-line">
+          {{ TUITranslateService.t("AIDesk.请填写必填项") }}
+        </div>
+      </div>
+      <div @click="submitForm()" class="submit-icon">
+        <Icon :src="iconSend" width="30px" height="30px"/>
       </div>
     </div>
   </div>
-  <div class="form-finish-container" v-else-if="isFinish">
+  <div class="form-finish-container" v-else-if="isFinish || props.selectedContent">
     <div class="card-title">
       <div>
         {{ props.title }}
@@ -42,7 +30,7 @@
       </div>
     </div>
     <div>
-      {{ text }}
+      {{ props.selectedContent || text }}
     </div>
   </div>
 </template>
@@ -52,11 +40,14 @@ import vue from '../../../../../../../adapter-vue';
 import iconForm from '../../../../../../../assets/icon_form.png';
 import Icon from '../customer-icon.vue';
 import iconSucess from '../../../../../../../assets/icon_success.png';
+import iconSend from '../../../../../../../assets/send_button_h5.svg';
 import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-const { computed, ref} = vue;
+import { isH5 } from '../../../../../../../utils/env';
+const { ref } = vue;
 
 interface Props {
   title: string;
+  selectedContent: string;
 }
 export default {
   components: {
@@ -67,6 +58,10 @@ export default {
       type: String,
       default: '',
     },
+    selectedContent: {
+      type: String,
+      default: '',
+    },
   },
   emits: ['input-submit'],
   setup(props: Props, { emit }) {
@@ -74,29 +69,36 @@ export default {
     const text = ref<string>('');
     const isShowForm = ref<boolean>(false);
     const isFinish  = ref<boolean>(false);
-
-    const listItemClick = (): void => {
-      disabled.value = true;
-      isShowForm.value = false;
-      isFinish.value = true;
-      // emit('input-submit', text.value);
-    };
+    const validator = ref<boolean>(false);
 
     const showForm = (): void => {
       isShowForm.value = true;
     }
 
+    const submitForm = (): void => {
+      if (text.value.trim() === '') {
+        validator.value = true;
+        return;
+      }
+      emit('input-submit', text.value);
+      isFinish.value = true;
+      validator.value = false;
+    }
+
     return {
       disabled,
       text,
-      listItemClick,
       props,
       iconForm,
       isShowForm,
       showForm,
       iconSucess,
+      iconSend,
       isFinish,
-      TUITranslateService
+      TUITranslateService,
+      submitForm,
+      validator,
+      isH5,
     };
   },
 };
@@ -111,9 +113,11 @@ export default {
     margin-left: 10px;
     .form-button {
       background-color: #1c66e5;
-      color:#ffffff;
-      padding:2px 12px;
-      border-radius: 12px;
+      display: flex;
+      color: #ffffff;
+      padding: 4px 12px;
+      border-radius: 20px;
+      justify-content: center;
     }
   }
 }
@@ -124,47 +128,25 @@ export default {
   }
 
   .form-input-box {
+    display: flex;
+    gap: 5px;
     button:disabled {
       background: #d8d8d8;
     }
-    .form-input-line {
+    .form-input-text {
       display:flex;
-      margin-bottom: 10px;
-    }
-    .form-label {
-      align-self: center;
-      display:flex;
-      width:66px;
-      label {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-      
-      .required-icon {
-        color: #e54545; 
-        font-size: 16px;
-      }
+      flex:1;
+      flex-direction: column;
+      min-width: 200px;
     }
     .form-input {
       flex:1;
-      margin-left:10px;
       height: 27px;
       border-radius: 8px;
       border: 0px;
     }
-    .form-input-radio {
-      margin-left:10px;
-      display:flex;
-      align-items: center;
-      flex-flow: wrap;
-      label {
-        margin-right: 5px;
-      }
-
-      .form-radio {
-        margin:0px 5px 0px 0px;
-      }
+    .form-input-h5 {
+      background: #f3f4f7;
     }
   }
 
@@ -194,51 +176,23 @@ export default {
 }
 
 .form-finish-container {
-    .card-title {
-      display:flex;
-      justify-content: space-between;
-      margin-bottom: 10px;
-    }
-    .form-finish-title-right {
-      display:flex;
-    }
+  .card-title {
+    display:flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    align-items: flex-start;
   }
-  input[type="radio"] { 
-    +label { 
-      position: relative; 
-      cursor: pointer; 
-      margin-left: 20px; 
-      &::before { 
-        content: ""; 
-        position: absolute; 
-        left: -20px; 
-        top:2px;
-        border-radius: 50%;
-        // border: 1px solid #6f686a;
-        width: 16px; 
-        height: 16px;
-        background-image: url('../../../../../../../assets/radio-uncheck.png');
-        background-size: cover;
-        background-position: center;
-    } 
-    &::after {
-      content: "";
-      position: absolute;
-      left: -20px;
-      top: 2px;
-      border-radius: 50%;
-      width: 16px;
-      height: 16px;
-      }
-  } 
-  &:checked {
-    + label::after {
-      background-image: url('../../../../../../../assets/radio-check.png');
-      background-size: cover;
-    }
+  .form-finish-title-right {
+    display: flex;
+    word-break: keep-all;
   }
 }
-
-
-
+.validator-line {
+  font-size: 12px;
+  color: #e54545;
+  margin-top: 3px;
+}
+.submit-icon {
+  cursor: pointer;
+}
 </style>

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/{message-single-form → message-ivr-form}/index.vue

@@ -7,16 +7,18 @@
       <FormBranch
         :title="content.header"
         :list="content.items"
+        :selectedContent="content.selected?.content"
         @input-click="handleContentListItemClick"
       />
     </div>
   </div>
   <div
     v-else
-    class="message-form"
+    class="message-form-input"
   >
     <FormInput
       :title="content.header"
+      :selectedContent="content.selected?.content"
       @input-submit="handleFormSaveInputSubmit"
     />
   </div>
@@ -55,6 +57,9 @@ export default {
         type: 0,
         header: '',
         items: [],
+        selected:{
+          content: '',
+        }
       };
     });
 
@@ -74,7 +79,7 @@ export default {
 };
 </script>
 <style lang="scss">
-.message-form {
+.message-form-input {
   max-width: 300px;
 }
 </style>

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

@@ -76,10 +76,12 @@ export default {
 <style lang="scss">
 .form-branch-container {
   .card-title-container {
-    padding: 12px;
+    padding: 8px 16px;
     border-radius: 0 10px 10px;
-    width:fit-content;
     font-family: PingFangSC-Regular;
+    overflow-wrap: break-word;
+    word-break: normal;
+    max-width: fit-content;
   }
   .card-title {
     background-color: #f3f4f7;
@@ -98,13 +100,13 @@ export default {
     margin-top: 8px;
     cursor: pointer;
     line-height: 16px;
-    width:fit-content;
     font-family: PingFangSC-Regular;
     min-width: 50px;
     text-align: center;
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: normal;
+    max-width: fit-content;
   }
   .warning-item {
     color: #ff9800;

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

@@ -56,5 +56,7 @@ export default {
 };
 </script>
 <style lang="scss">
-
+.message-form {
+  max-width: 100%
+}
 </style>

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

@@ -86,6 +86,7 @@ export default {
 }
 .form-input-mobile {
   border-color: transparent;
+  background-color: transparent;
   padding: 5px 8px;
   font-size: 14px;
 }

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

@@ -22,8 +22,10 @@
 </script>
 <style lang="scss">
 .form-label {
-  display:flex;
-  width:70px;
+  width: 100px;
   padding-bottom: 8px;
+  margin-right: 8px;
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-label">
+  <div class="form-label-pc">
     <div v-if="isRequired" style="color: red;">
       *&nbsp;
     </div>
@@ -21,9 +21,11 @@
   }
 </script>
 <style lang="scss">
-.form-label {
+.form-label-pc {
   display:flex;
   padding-bottom: 8px;
-  margin-top:12px;
+  margin-top: 12px;
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 </style>

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

@@ -17,7 +17,7 @@
         >
           <div style="height:100%;overflow-y: auto;">
             <div class="dialog-title">
-              <div>
+              <div class="dialog-title-tip">
                 {{ props.payload.content.tip }}
               </div>
               <div @click="closeDialog">
@@ -35,7 +35,7 @@
                 <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">
-                <div class="variable-value-label">
+                <div class="variable-value-label-mobile">
                   {{ item.name }}
                 </div>
                 <div class="variable-value">
@@ -365,6 +365,11 @@ export default {
   padding: 20px;
   font-size: 16px;
   font-weight: 500;
+  .dialog-title-tip {
+    width: 100%;
+    overflow-wrap: anywhere;
+    word-break: normal;
+  }
   .dialog-close {
     color: rgba(153,153,153,1);
   }
@@ -376,13 +381,20 @@ export default {
   align-items: center;
   border-bottom: 1px solid #e7e7e7;
   gap: 5px;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
 }
-.variable-value-label {
-  width: 70px;
-  white-space: nowrap;
+.variable-value-label-mobile {
+  width: 100px;
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 .variable-value {
   flex: 1;
+  overflow-wrap: break-word;
+  word-break: normal;
+  min-width: 0;
 }
 .button-container {
   display: flex;

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

@@ -6,7 +6,9 @@
       </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 class="form-finish-title">
+          {{ TUITranslateService.t("AIDesk.已提交") }}
+        </div>
       </div>
 		</div>
 
@@ -160,9 +162,21 @@ export default {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
+  width: 100%;
+}
+.form-title {
+  flex: 1;
+  min-width: 0; 
+  overflow-wrap: break-word;
+  word-break: normal;
+  padding-right: 8px;
+  box-sizing: border-box;
 }
 .form-finish-title-right {
   display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  max-width: 100%;
 }
 .button-container {
   display: flex;
@@ -191,5 +205,11 @@ export default {
 .variable-value-container {
   padding-bottom: 8px;
   margin-top: 3px;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+.form-finish-title {
+  word-break: keep-all;
+  white-space: nowrap;
 }
 </style>

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

@@ -95,7 +95,8 @@ export default {
         text-overflow: ellipsis;
         -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
-        word-break: break-all;
+        overflow-wrap: break-word;
+        word-break: normal;
       }
 
       .order-description {

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

@@ -104,7 +104,8 @@ export default {
       text-overflow: ellipsis;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
-      word-break: break-all;
+      overflow-wrap: break-word;
+      word-break: normal;
     }
 
     .product-card-description-block {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="message-rating-star">
-    <p class="rating-head">
+    <p class="rating-head-tail">
       {{ props.ratingTemplate.head }}
     </p>
 
@@ -46,7 +46,7 @@
     </div>
     <p
       v-if="hasReply"
-      class="rating-tail"
+      class="rating-head-tail"
       :style="{
         marginTop: 20 + 'px',
       }"
@@ -108,13 +108,13 @@ export default {
     });
 
     const setValue = (val: number) => {
-      if (!hasReply.value) {
+      if (!hasReply.value && !hasExpire.value) {
         selectValue.value = val;
       }
     };
 
     const setHoverValue = (value: number) => {
-      if (!hasReply.value) {
+      if (!hasReply.value && !hasExpire.value) {
         hoverValue.value = value;
       }
     };
@@ -155,16 +155,11 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.rating-head {
-  font-size: 14px;
-  font-weight: 400;
-  color: #999;
-}
-
-.rating-tail {
+.rating-head-tail {
   font-size: 14px;
   font-weight: 400;
   color: #999;
+  word-break: break-word;
 }
 
 .card-title {
@@ -178,11 +173,12 @@ export default {
   border-radius: 20px;
   border: 0;
   margin-top: 10px;
-  padding-top: 20px;
-  padding-bottom: 20px;
+  min-width: 240px;
+  padding: 10px;
 
   button:disabled {
     background: #d8d8d8;
+    cursor: default;
   }
 }