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

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

@@ -2,31 +2,32 @@
   <div class="branch-card">
     <div
       v-if="content.header || content.title"
-      class="branch-body branch-bubble"
+      :class="['branch-body',isPC ? 'branch-bubble':'branch-bubble-h5']"
     >
       <Icon :src="iconQuestion" class="branch-title-icon"/>
       {{ content.header || content.title }}
-  </div>
+    </div>
     <div
       v-for="(item, index) in content.items"
       :key="index"
-      :class="['branch-body','branch-bubble','branch-item',isSelected ? 'branch-item-selected' : '']"
+      :class="['branch-body',isPC ? 'branch-bubble':'branch-bubble-h5','branch-item',isSelected ? 'branch-item-selected' : '', item.content ? '' : 'warning-item']"
       :style="{ borderWidth: content.header ? '1px 0 0px 0' : '' }"
       @click="handleContentListItemClick(item)"
     >
-      {{ item.content }}
+      {{ item.content || TUITranslateService.t('AIDesk.分支选项异常') }}
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import vue from '../../../../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { customerServicePayloadType } from '../../../../../../interface';
 import iconRight from '../../../../../../assets/iconRight.svg';
 import iconQuestion from '../../../../../../assets/icon_question.png';
 import Icon from './customer-icon.vue';
+import { isPC } from '../../../../../../utils/env';
 const { computed, ref} = vue;
-// const { computed,ref } = vue;
 
 interface Props {
   payload: customerServicePayloadType;
@@ -47,7 +48,7 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ['sendMessage'],
+  emits: ['sendMessage', 'heightChanged'],
   setup(props: Props, { emit }) {
     const isSelected = ref<boolean>(false);
     const content = computed(() => {
@@ -60,6 +61,9 @@ export default {
     });
 
     const handleContentListItemClick = (branch: branchItem) => {
+      if (!branch.content) {
+        return;
+      }
       if(!isSelected.value) {
         isSelected.value = true;
         emit('sendMessage', { text: branch.content });
@@ -72,8 +76,13 @@ export default {
       iconRight,
       iconQuestion,
       isSelected,
+      isPC,
+      TUITranslateService
     };
   },
+  mounted() {
+    this.$emit('heightChanged');
+  },
 };
 </script>
 
@@ -107,23 +116,33 @@ export default {
   border-radius: 0 10px 10px;
   margin-bottom: 8px;
 }
+.branch-bubble-h5 {
+  background: #fff;
+  border-radius: 0 10px 10px;
+  margin-bottom: 8px;
+}
 .branch-item {
-  color:#1c66e5;
+  color: #1c66e5;
   cursor: pointer;
 }
+.warning-item {
+    color: #ff9800;
+}
 .branch-card {
   min-width: 250px;
   max-width: 350px;
-  display:flex;
-  flex-direction:column;
+  display: flex;
+  flex-direction: column;
   align-items: flex-start;
 }
 .branch-item-selected {
-  cursor:none;
+  cursor: default;
   color: #a0a7b8;
-  opacity:0.6;
+  opacity: 0.6;
 }
 .branch-title-icon {
   margin-right: 5px;
+  align-items: flex-start !important;
+  margin-top: 2px;
 }
 </style>

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

@@ -0,0 +1,40 @@
+<template>
+  <div :class="['message-text-container']">
+    <span class="text">{{ TUITranslateService.t('AIDesk.并发限制') }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {TUITranslateService} from "@tencentcloud/chat-uikit-engine";
+
+</script>
+<style lang="scss" scoped>
+.message-text-container {
+  display: inline;
+}
+
+.text-select {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.text {
+  white-space: pre-wrap;
+  font-size: 14px;
+  text-size-adjust: none;
+  font-family: PingFangSC-Regular;
+  overflow-wrap: break-word;
+  word-break: break-all;
+}
+
+.text:lang(en) {
+  white-space: pre-wrap;
+  font-size: 14px;
+  text-size-adjust: none;
+  font-family: PingFangSC-Regular;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+</style>

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

@@ -1,6 +1,5 @@
 <template>
   <div class="message-custom">
-
     <div class="custom">
       <div
         v-if="
@@ -13,6 +12,7 @@
         <MessageBranch
           :payload="payload"
           @sendMessage="sendTextMessage"
+          @heightChanged="onHeightChanged"
         />
       </div>
       <div
@@ -35,7 +35,10 @@
         <MessageProductCard :payload="payload" />
       </div>
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.RICH_TEXT">
-        <MessageRichText :payload="payload" />
+        <MessageRichText
+          :payload="payload"
+          @heightChanged="onHeightChanged"
+        />
       </div>
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.STREAM_TEXT">
         <MessageStream
@@ -44,7 +47,11 @@
         />
       </div>
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.MULTI_BRANCH">
-        <MessageMultiBranch :payload="payload" @sendMessage="sendTextMessage"/>
+        <MessageMultiBranch
+          :payload="payload"
+          @sendMessage="sendTextMessage"
+          @heightChanged="onHeightChanged"
+        />
       </div>
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.MULTI_FORM && message.flow == 'in'">
         <MessageMultiForm :payload="payload"
@@ -58,6 +65,12 @@
           @sendMessage="sendCustomMessage"
         />
       </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.CONCURRENCY_LIMIT">
+        <MessageConcurrencyLimit />
+      </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.ORDER">
+        <MessageOrder :payload="payload" />
+      </div>
   </div>
   </div>
 </template>
@@ -66,6 +79,7 @@ import { CustomMessagePayload, TextMessagePayload, customerServicePayloadType }
 import MessageRating from './message-rating/index.vue';
 import vue from '../../../../../../adapter-vue';
 import { JSONToObject } from '../../../../../../utils/index';
+import { isEnabledMessageReadReceiptGlobal } from '../../../../../../utils/utils';
 import { CUSTOM_MESSAGE_SRC } from '../../../../../../constant';
 import MessageBranch from './message-branch.vue';
 import MessageForm from './message-single-form/index.vue';
@@ -75,6 +89,8 @@ import MessageRichText from './message-rich-text.vue';
 import MessageStream from './message-stream.vue';
 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 {
   IMessageModel,
   TUIChatService,
@@ -93,7 +109,9 @@ export default {
     MessageStream,
     MessageMultiBranch,
     MessageMultiForm,
-    MessageRating
+    MessageRating,
+    MessageConcurrencyLimit,
+    MessageOrder,
   },
   props: {
     message: {
@@ -106,11 +124,15 @@ export default {
     const payload = computed<customerServicePayloadType>(() => {
       return props.message && JSONToObject(props.message?.payload?.data);
     });
-    const sendTextMessage = (payload: TextMessagePayload) => {
-      TUIChatService.sendTextMessage({payload});
+    const sendTextMessage = (payload: TextMessagePayload, cloudCustomData?: string) => {
+      TUIChatService.sendTextMessage({ 
+        payload, 
+        cloudCustomData: cloudCustomData || '',
+        needReadReceipt: isEnabledMessageReadReceiptGlobal() 
+      });
     };
     const sendCustomMessage = (payload: CustomMessagePayload) => {
-      TUIChatService.sendCustomMessage({payload});
+      TUIChatService.sendCustomMessage({ payload });
     };
     const handleShowFormPopup = (data: boolean) => {
       emit('showFormPopup', data);

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

@@ -1,79 +1,113 @@
 <template>
-    <div class="form-branch-container">
-      <div
-        v-if="props.payload.content.header"
-        class="card-title"
-      >
-            {{ props.payload.content.header }}
-        </div>
-      <div
-        v-if="props.payload.status == 0 && !isClicked"
-        v-for="(item, index) in props.payload.content.items"
-        :key="index"
-        class="form-branch-item"
-        @click="listItemClick(item)"
-      >
-        {{ item.content }}
-      </div>
+  <div class="form-branch-container">
+    <div
+      v-if="props.payload.content.header"
+      :class="['card-title-container',isPC ? 'card-title' : 'card-title-h5']"
+    >
+      {{ props.payload.content.header }}
     </div>
-  </template>
-  
-  <script lang="ts">
+    <div
+      v-if="props.payload.status === 0 && canSelect"
+      v-for="(item, index) in props.payload.content.items"
+      :key="index"
+      :class="['form-branch-item', item.content ? '' : 'warning-item']"
+      @click="listItemClick(item)"
+    >
+    {{ item.content || TUITranslateService.t('AIDesk.分支选项异常') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import vue from '../../../../../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { customerServicePayloadType } from '../../../../../../../interface';
-  interface branchItem {
-    content: string;
-    desc: string;
+import { isPC } from '../../../../../../../utils/env'
+const { ref } = vue;
+interface branchItem {
+  content: string;
+  desc: string;
+}
+
+interface Props {
+  payload: customerServicePayloadType;
+}
+
+export default {
+  props: {
+    payload: {
+      type: Object as () => customerServicePayloadType,
+      default: () => ({optionType: 0, taskInfo: { taskID: 0, nodeID: '', env: '' }, content: { header: '', items: [] }, status: 0}),
+    },
+  },
+  emits: ['input-click'],
+  setup(props: Props, { emit }) {
+    let canSelect = ref(true);
+    const listItemClick = (branch: branchItem): void => {
+      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,
+          }
+        });
+      }
+      emit('input-click', branch, cloudCustomData); 
+    };
+
+    return {
+      props,
+      canSelect,
+      listItemClick,
+      isPC,
+      TUITranslateService
+    };
+  },
+};
+</script>
+<style lang="scss">
+.form-branch-container {
+  .card-title-container {
+    padding: 12px;
+    border-radius: 0 10px 10px;
+    width:fit-content;
+    font-family: PingFangSC-Regular;
   }
-  
-  interface Props {
-    payload: customerServicePayloadType;
+  .card-title {
+    background-color: #f3f4f7;
   }
-  
-  export default {
-    props: {
-        payload: {
-            type: Object as () => customerServicePayloadType,
-            default: () => ({content: { header: '', items: [] },status:0}),
-        },
-    },
-    emits: ['input-click'],
-    setup(props: Props, { emit }) {
-        let isClicked = false;
-      const listItemClick = (branch: branchItem): void => {
-        emit('input-click', branch);
-        isClicked = true;
-      };
-      
-      return {
-        props,
-        isClicked,
-        listItemClick,
-      };
-    },
-  };
-  </script>
-  <style lang="scss">
-  .form-branch-container {
-    .card-title {
-        background-color: #fbfbfb;
-        padding: 12px;
-      border-radius: 0 10px 10px;
-      width:fit-content;
-      font-family: PingFangSC-Regular;
-    }
-  
-    .form-branch-item {
-      font-weight: 500;
-      color: rgba(54, 141, 255, 1);
-      background-color: #fbfbfb;
-      border: 1px solid rgba(0, 110, 255, 0.3);
-        padding: 12px;
-        border-radius: 25px;
-        margin-top: 8px;
-      cursor: pointer;
-        width:fit-content;
-        font-family: PingFangSC-Regular;
-    }
+  .card-title-h5 {
+    background-color: #fff;
+  }
+
+  .form-branch-item {
+    font-weight: 500;
+    color: #1C66E5;
+    background-color: #fff;
+    border: 1px solid rgba(0, 110, 255, 0.3);
+    padding: 12px;
+    border-radius: 20px;
+    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;
+  }
+  .warning-item {
+    color: #ff9800;
   }
-  </style>
-  
+}
+</style>

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

@@ -1,59 +1,60 @@
 <template>
-      <div class="message-form">
-        <branchPc
-          :payload ="payload"
-          @input-click="handleContentListItemClick"
-        />
+  <div class="message-form">
+    <BranchPc
+      :payload ="payload"
+      @input-click="handleContentListItemClick"
+    />
+  </div>
+</template>
 
-      </div>
-  </template>
-  
-  <script lang="ts">
-  import vue from '../../../../../../../adapter-vue';
-  import BranchPc from './branch-pc.vue';
-  import { customerServicePayloadType } from '../../../../../../../interface';
-  const { computed} = vue;
-  
-  interface branchItem {
-    content: string;
-    desc: string;
-  }
-  
-  interface Props {
-    payload: customerServicePayloadType;
-  }
-  
-  export default {
-    components: {
-        BranchPc
-    },
-    props: {
-      payload: {
-        type: Object,
-        default: () => ({}),
-      },
+<script lang="ts">
+import vue from '../../../../../../../adapter-vue';
+import BranchPc from './branch-pc.vue';
+import { customerServicePayloadType } from '../../../../../../../interface';
+const { computed} = vue;
+
+interface branchItem {
+  content: string;
+  desc: string;
+}
+
+interface Props {
+  payload: customerServicePayloadType;
+}
+
+export default {
+  components: {
+    BranchPc
+  },
+  props: {
+    payload: {
+      type: Object,
+      default: () => ({}),
     },
-    emits: ['sendMessage'],
-    setup(props: Props, { emit }) {
+  },
+  emits: ['sendMessage', 'heightChanged'],
+  setup(props: Props, { emit }) {
     const payload = computed<customerServicePayloadType>(() => {
       return props.payload;
     });
-      const handleContentListItemClick = (branch: branchItem) => {
-        emit('sendMessage', { text: branch.content });
-      };
-  
-      const handleFormSaveInputSubmit = (text: string) => {
-        emit('sendMessage', { text });
-      };
-      return {
-        payload,
-        handleContentListItemClick,
-        handleFormSaveInputSubmit,
-      };
-    },
-  };
-  </script>
-  <style lang="scss">
+    const handleContentListItemClick = (branch: branchItem, cloudCustomData?: string) => {
+      emit('sendMessage', { text: branch.content },  cloudCustomData || '');
+    };
+
+    const handleFormSaveInputSubmit = (text: string) => {
+      emit('sendMessage', { text });
+    };
+    return {
+      payload,
+      handleContentListItemClick,
+      handleFormSaveInputSubmit,
+    };
+  },
+  mounted() {
+    this.$emit('heightChanged');
+  }
+};
+</script>
+<style lang="scss">
 
-  </style>
-  
+</style>