@tencentcloud/ai-desk-customer-vue 0.3.0 → 1.0.0

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

@@ -14,9 +14,6 @@
         class="change-wrapper"
         @click="changeBranchList()"
       >
-      <div style="margin-right: 3px;">
-        换一换
-      </div>
         <Icon :src="iconRefresh" />
       </div>
     </div>
@@ -98,7 +95,7 @@ export default {
       iconRight,
       changeBranchList,
       iconQuestion,
-      iconRefresh
+      iconRefresh,
     };
   },
 };
@@ -106,7 +103,6 @@ export default {
 
 <style lang="scss">
 .welcome-card {
-  min-width: 300px;
   max-width: 400px;
 
   .welcome-title {
@@ -125,7 +121,7 @@ export default {
   .card-title {
     display: inline-block;
     margin-left: 8px;
-    font-size: 16px;
+    font-size: 14px;
   }
 
   .el-link {

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-single-form/form-input.vue

@@ -7,7 +7,7 @@
         {{ props.title }}
       </div>
       <div class="form-button" @click="showForm">
-        立即填写
+        {{ TUITranslateService.t("AIDesk.立即填写") }}
       </div>
     </div>
     
@@ -26,7 +26,7 @@
         <input
           v-model="text"
           class="form-input"
-          placeholder="请输入内容"
+          :placeholder="TUITranslateService.t('AIDesk.请输入内容')"
         >
       </div>
     </div>
@@ -38,7 +38,7 @@
       </div>
       <div class="form-finish-title-right">
         <Icon :src="iconSucess" style="margin:0px 4px"/>
-        已提交
+        {{ TUITranslateService.t("AIDesk.已提交") }}
       </div>
     </div>
     <div>
@@ -52,6 +52,7 @@ 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 { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 const { computed, ref} = vue;
 
 interface Props {
@@ -94,7 +95,8 @@ export default {
       isShowForm,
       showForm,
       iconSucess,
-      isFinish
+      isFinish,
+      TUITranslateService
     };
   },
 };

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

@@ -1,61 +1,74 @@
 <template>
   <div class="message-stream">
     <pre :class="['message-marked']" v-html="displayedContent" />
-    <span
-      v-if="!isFinished"
-      class="blinking-cursor"
-    />
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import vue from '../../../../../../adapter-vue';
 import { customerServicePayloadType } from '../../../../../../interface';
 import { parseMarkdown } from './marked'
+import { TypeWriter } from "./type-writer";
+import { JSONToObject } from "../../../../../../utils";
 
-const { ref, watchEffect, onMounted } = vue;
+const { ref, computed, withDefaults, defineProps, watch } = vue;
 
 interface Props {
   payload: customerServicePayloadType;
 }
 
-export default {
-  props: {
-    payload: {
-      type: Object as () => customerServicePayloadType,
-      default: () => ({}),
-    },
+const props = withDefaults(defineProps<Props>(), {
+  payload: () => '',
+});
+
+const isStreaming = ref<boolean>(false);
+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 typeWriter = new TypeWriter({
+  onTyping: (item: string) => {
+    streamContent.value += item;
+    // emits('onStreaming', item, streamContent.value);
+  },
+  onComplete() {
+    isStreaming.value = false;
   },
-  setup(props: Props) {
-    const displayedContent = ref<string>('');
-    const isFinished = ref<boolean>(false);
-    let currentIndex = 0;
+});
 
-    onMounted(() => {
-      displayedContent.value = parseMarkdown(props?.payload?.chunks?.join('') ?? '');
-      currentIndex = displayedContent.value.length;
-    });
+function startStreaming(content: string[]) {
+  if (!isStreaming.value) {
+    isStreaming.value = true;
+    typeWriter.add(content);
+    typeWriter.start();
+  } else {
+    typeWriter.add(content);
+  }
+}
 
-    watchEffect(() => {
-      const newContent = props?.payload?.chunks?.join('') ?? '';
-      const parsedContent = parseMarkdown(newContent);
-      if (parsedContent.length > currentIndex) {
-        displayedContent.value = parsedContent;
-        currentIndex = parsedContent.length;
+watch(() => props.payload, (newValue: string, oldValue: string) => {
+      if (newValue === oldValue) {
+        return;
       }
-    });
-
-    watchEffect(() => {
-      isFinished.value = props?.payload?.isFinished === 1;
-    });
 
-    return {
-      props,
-      isFinished,
-      displayedContent,
-    };
-  },
-};
+      const _payloadObject = JSONToObject(props.payload);
+      chunks.value = Array.isArray(_payloadObject.chunks) ? _payloadObject.chunks.join('') : _payloadObject.chunks;
+      isFinished.value = _payloadObject.isFinished === 1;
+      if (newValue && !oldValue && isFinished.value) {
+        // disable typeWriter style or history message first load
+        streamContent.value = chunks.value;
+      } else {
+        const _newChunksToAdd = chunks.value?.slice(prevChunksLength.value);
+        startStreaming([_newChunksToAdd]);
+      }
+      prevChunksLength.value = chunks.value?.length;
+    }, {
+      deep: true,
+      immediate: true,
+    },
+);
 </script>
 <style lang="scss" scoped>
 .message-stream {
@@ -63,19 +76,5 @@ export default {
   word-break: keep-all;
   white-space: normal;
   font-size: 14px;
-
-  .blinking-cursor {
-    display: inline-block;
-    width: 1px;
-    height: 1em;
-    background-color: black;
-    animation: blink 1s step-end infinite;
-    vertical-align: sub;
-  }
-
-  @keyframes blink {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0; }
-  }
 }
 </style>

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/styles/common.scss

@@ -118,7 +118,7 @@
 .message-marked {
   overflow: hidden;
   word-break: break-word;
-  white-space: normal;
+  white-space: pre-wrap;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/type-writer.ts

@@ -0,0 +1,189 @@
+const chineseRegex = /[\u4e00-\u9fa5]/;
+const wordAndNonWordRegex = /\b\w+\b|[^\w]+/g;
+const isStringArray = (test: any): boolean => {
+  return Array.isArray(test) && !test.some(value => typeof value !== 'string');
+};
+
+export class TypeWriter {
+  /**
+   * @property {array} strings strings to be typed
+   */
+  public strings: string[] = [];
+
+  /**
+   * @property {boolean} isTyping current typing status
+   */
+  public isTyping: boolean = false;
+
+  /**
+   * @property {number} typeSpeed type speed in milliseconds. If empty, using dynamic speed.
+   */
+  public typeSpeed?: number = 0;
+
+  /**
+   * @property {number} curArrayPos current typing string's position of all strings.
+   */
+  private curArrayPos: number = 0;
+
+  /**
+   * @property {number} curCharPos current typing character's position in current strings.
+   */
+  private curCharPos: number = 0;
+
+  /**
+   * @property {ReturnType<typeof setTimeout>} timer timer for type writer animation
+   */
+  private timer?: ReturnType<typeof setTimeout>;
+
+  /**
+   * On string is typing
+   * @param {string} curStr
+   * @param {number} arrayPos
+   * @param {number} characterPos
+   * @param {Typed} self
+   */
+  public onTyping?: (curStr: string, arrayPos: number, characterPos: number, self: any) => void;
+
+  /**
+   * After start
+   * @param {number} arrayPos
+   * @param {number} characterPos
+   * @param {TypeWriter} self
+   */
+  public onStart?: (arrayPos: number, characterPos: number, self: any) => void;
+
+  /**
+   * After stop
+   * @param {number} arrayPos
+   * @param {number} characterPos
+   * @param {TypeWriter} self
+   */
+  public onStop?: (arrayPos: number, characterPos: number, self: any) => void;
+
+  /**
+   * All typing is complete
+   * @param {Typed} self
+   */
+  public onComplete?: (self: any) => void;
+
+  constructor(options: {
+    defaultStrings?: string[];
+    typeSpeed?: number;
+    onTyping?: (curStr: string, arrayPos: number, characterPos: number, self: any) => void;
+    onComplete?: (self: any) => void;
+    onStart?: (arrayPos: number, characterPos: number, self: any) => void;
+    onStop?: (arrayPos: number, characterPos: number, self: any) => void;
+  }) {
+    const { defaultStrings, typeSpeed, onTyping, onComplete, onStart, onStop } = options;
+    if (defaultStrings && isStringArray(defaultStrings)) {
+      this.add(defaultStrings);
+    }
+    if (typeof typeSpeed === 'number') {
+      this.typeSpeed = typeSpeed;
+    }
+    if (typeof onTyping === 'function') {
+      this.onTyping = onTyping;
+    }
+    if (typeof onComplete === 'function') {
+      this.onComplete = onComplete;
+    }
+    if (typeof onStart === 'function') {
+      this.onStart = onStart;
+    }
+    if (typeof onStop === 'function') {
+      this.onStop = onStop;
+    }
+  }
+
+  add(addStrings: string[]) {
+    if (!addStrings || !addStrings.length) return;
+    addStrings.forEach((item: string) => {
+      if (chineseRegex.test(item)) {
+        const newValueArray = item.split('');
+        this.strings.push(...newValueArray);
+      } else {
+        const newValueArray = item.match(wordAndNonWordRegex) || item.split('');
+        this.strings.push(...newValueArray);
+      }
+    });
+  }
+
+  start() {
+    if (this.isTyping) {
+      return;
+    }
+    this.isTyping = true;
+    this.onStart && this.onStart(this.curArrayPos, this.curCharPos, this);
+    this._next();
+  }
+
+  stop() {
+    if (!this.isTyping) {
+      return;
+    }
+    this.isTyping = false;
+    clearTimeout(this.timer);
+    this.onStop && this.onStop(this.curArrayPos, this.curCharPos, this);
+  }
+
+  done() {
+    this.stop();
+    let _str = this.strings[this.curArrayPos].slice(this.curCharPos);
+    _str += this.strings.slice(this.curArrayPos + 1).join('');
+    this.curArrayPos = this.strings.length - 1;
+    this.curCharPos = this.strings[this.curArrayPos]?.length - 1;
+    this.onTyping && this.onTyping(_str, this.curArrayPos, this.curCharPos, this);
+    this.strings = [];
+  }
+
+  _consume() {
+    if (!this.strings.length) {
+      return;
+    }
+
+    if ((this.curArrayPos >= this.strings.length)) {
+      this.isTyping = false;
+      this.onComplete?.(this);
+      return;
+    }
+
+    const item = this.strings[this.curArrayPos]?.[this.curCharPos];
+    if (item) {
+      this.onTyping && this.onTyping(item, this.curArrayPos, this.curCharPos, this);
+    }
+
+    if (this.curCharPos < this.strings[this.curArrayPos]?.length - 1) {
+      this.curCharPos++;
+    } else {
+      this.curArrayPos++;
+      this.curCharPos = 0;
+    }
+  }
+
+  _next() {
+    this._consume();
+    this.timer = setTimeout(() => {
+      this._consume();
+      if (this.isTyping) {
+        this._next();
+      }
+    }, this.typeSpeed || this._dynamicSpeed());
+  }
+
+  _dynamicSpeed() {
+    let length = 0;
+    length += (this.strings[this.curArrayPos]?.length || 0) - this.curCharPos - 1;
+    for (let i = this.curArrayPos + 1; i < this.strings.length; i++) {
+      length += this.strings[i]?.length || 0;
+    }
+    if (length <= 0) {
+      length = 10;
+    }
+    const speed = 1500 / length;
+    if (speed >= 150) {
+      return 150;
+    } else {
+      return speed;
+    }
+  }
+}

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

@@ -3,7 +3,7 @@
     class="message-location"
     :href="data.href"
     target="_blank"
-    title="点击查看详情"
+    :title="TUITranslateService.t('AIDesk.跳转')"
   >
     <span class="el-icon-location-outline">{{ data.description }}</span>
     <img :src="data.url">
@@ -11,6 +11,7 @@
 </template>
 
 <script lang="ts" setup>
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import vue from '../../../../adapter-vue';
 const { watchEffect, ref } = vue;
 const props = defineProps({

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

@@ -98,6 +98,6 @@ watchEffect(() => {
   text-size-adjust: none;
   font-family: PingFangSC-Regular;
   overflow-wrap: break-word;
-  word-break: keep-all;
+  word-break: normal;
 }
 </style>

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

@@ -0,0 +1,59 @@
+<template>
+    <div class="message-thinking">
+        <div v-for="(icon, index) in icons" :key="index">
+            <transition name="fade">
+                <Icon v-if="icon" :file="loading_message" width="14px" height="14px"/>
+            </transition>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import vue from '../../../../adapter-vue';
+import Icon from '../../../common/Icon.vue';
+import loading_message from '../../../../assets/loading_message.svg';
+const { ref, watchEffect,onMounted,onUnmounted} = vue;
+export default {
+    components:{
+        Icon
+    },
+  setup() {
+    const icons = ref([false, false, false]);
+    const index = ref(0);
+
+    let intervalId:any;
+
+    onMounted(() => {
+      intervalId = setInterval(() => {
+        if (index.value < icons.value.length) {
+          icons.value = icons.value.map((v, i) => (i === index.value ? true : v));
+          index.value += 1;
+        } else {
+          icons.value = icons.value.map(() => false);
+          index.value = 0;
+        }
+      }, 500);
+    });
+
+    onUnmounted(() => {
+      intervalId && clearInterval(intervalId)
+      intervalId = null;
+    });
+
+    return { icons,loading_message };
+  }
+}
+</script>
+<style lang="scss" scoped>
+.message-thinking{
+    display: flex;
+    flex-direction: row;
+    width: 45px;
+    height: 16px;
+}
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+</style>

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

@@ -120,7 +120,7 @@ const actionItems = ref([
     clickEvent: quoteMessage,
   },{
     key:'download',
-    text: '下载',
+    text: TUITranslateService.t('TUIChat.下载'),
     iconUrl: downloadIcon,
     renderCondition(){
       if (!message.value) return false;

package/components/CustomerServiceChat/message-list/message-tool/message-revoked.vue

@@ -54,6 +54,7 @@ const messageEdit = () => {
   color: #999;
   font-size: 12px;
   margin-bottom: 10px;
+  white-space: pre;
 
   .edit {
     padding: 0 5px;

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

@@ -178,7 +178,9 @@ defineExpose({
   position: absolute;
   bottom: 10px;
   right: 10px;
-  width: 92px;
+  width: auto;
+  min-width: 92px;
+  max-width: 115px;
   height: 28px;
   background: #fff;
   border: 1px solid #e0e0e0;

package/components/CustomerServiceChat/message-toolbar-button/index.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="toolbar-button-container">
+        <template v-for="(item, index) in props.toolbarButtonList">
+            <div v-if="item.renderCondition()" :key="index"
+                :class="['toolbar-button', isH5 ? 'toolbar-button-h5' : '']" @click="onClick(index)">
+                <Icon v-if="item.icon" class="toolbar-button-icon" :file="item.icon" width="18px" height="18px"/>
+                <div class="toolbar-button-text">
+                    {{ item.title }}
+                </div>
+
+            </div>
+        </template>
+    </div>
+</template>
+<script lang="ts" setup>
+import { isH5 } from '../../../utils/env';
+import { ToolbarButtonModel } from '../../../interface';
+import Icon from '../../common/Icon.vue';
+
+interface IProps {
+    toolbarButtonList?: ToolbarButtonModel[]
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    toolbarButtonList: () => [] as ToolbarButtonModel[]
+});
+
+function onClick(index: number) {
+    props.toolbarButtonList[index].clickEvent();
+}
+
+</script>
+<style>
+.toolbar-button-container {
+    display: flex;
+    flex-direction: row !important;
+    margin: 5px !important;
+    align-items: center ;
+}
+
+.toolbar-button {
+    border: 1px solid #E7EAEF;
+    padding: 5px 10px;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+    white-space: nowrap;
+    user-select: none;
+}
+
+.toolbar-button-h5 {
+    border: none;
+    background-color: #fff;
+    box-shadow: 0px 2px 2px 0px rgba(70, 98, 140, 0.06);
+}
+
+.toolbar-button-icon {
+    margin-right: 3px;
+}
+.toolbar-button-text {
+    font-size: 12px;
+    text-overflow: ellipsis;
+    max-width: 100px;
+    overflow: hidden;
+    font-family: PingFangSC-Regular;
+}
+</style>

package/components/common/Dialog/index.vue

@@ -36,13 +36,13 @@
           class="btn btn-cancel"
           @click="close"
         >
-          {{ TUITranslateService.t("component.取消") }}
+          {{ TUITranslateService.t('取消') }}
         </button>
         <button
           class="btn btn-default"
           @click="submit"
         >
-          {{ TUITranslateService.t("component.确定") }}
+          {{ TUITranslateService.t('确定') }}
         </button>
       </footer>
     </main>

package/components/common/ImagePreviewer/index-web.vue

@@ -374,7 +374,7 @@ const save = () => {
   const imageSrc = imageMessage?.payload?.imageInfoArray[0]?.url;
   if (!imageSrc) {
     Toast({
-      message: TUITranslateService.t('component.图片 url 不存在'),
+      message: TUITranslateService.t('Component.图片 url 不存在'),
       type: TOAST_TYPE.ERROR,
     });
     return;
@@ -396,7 +396,7 @@ const downloadImgInWeb = (src: string) => {
   const imageFormat: number = imageMessage?.payload?.imageFormat;
   if (!imageFormatMap.has(imageFormat)) {
     Toast({
-      message: TUITranslateService.t('component.暂不支持下载此类型图片'),
+      message: TUITranslateService.t('Component.暂不支持下载此类型图片'),
       type: TOAST_TYPE.ERROR,
     });
     return;

package/constant.ts

@@ -28,6 +28,7 @@ export const CUSTOM_MESSAGE_SRC = {
   STREAM_TEXT: '31',
   MULTI_BRANCH:'32',
   MULTI_FORM:'33',
+  THINKING:'35',
 };
 
 // im message extra type
@@ -113,6 +114,7 @@ export const ROBOT_STATUS = {
 // message type
 export const TYPES = {
   MSG_CUSTOM: 'TIMCustomElem',
+  MSG_GROUP_TIP:'TIMGroupTipElem'
 };
 
 export const EMOJI_TYPE = {
@@ -120,3 +122,16 @@ export const EMOJI_TYPE = {
   BIG: 'big',
   CUSTOM: 'CUSTOM',
 };
+
+export const WHITE_LIST = [
+  CUSTOM_MESSAGE_SRC.MENU,
+  CUSTOM_MESSAGE_SRC.BRANCH,
+  CUSTOM_MESSAGE_SRC.BRANCH_NUMBER,
+  CUSTOM_MESSAGE_SRC.FROM_INPUT,
+  CUSTOM_MESSAGE_SRC.PRODUCT_CARD,
+  CUSTOM_MESSAGE_SRC.ROBOT_MSG,
+  CUSTOM_MESSAGE_SRC.RICH_TEXT,
+  CUSTOM_MESSAGE_SRC.STREAM_TEXT,
+  CUSTOM_MESSAGE_SRC.MULTI_BRANCH,
+  CUSTOM_MESSAGE_SRC.MULTI_FORM,
+];

package/excluded-list.txt

@@ -1,5 +1,4 @@
 .\node_modules\@tencentcloud\ai-desk-customer-vue\node_modules
-.\node_modules\@tencentcloud\ai-desk-customer-vue\package.json
 .\node_modules\@tencentcloud\ai-desk-customer-vue\excluded-list.txt