@tencentcloud/ai-desk-customer-vue 0.2.1 → 0.7.0

package/README.md

@@ -1,9 +1,6 @@
 ## 介绍
 
-智能客服用户端 Web UIKit。使用此 UIKit，您可以在一天内将智能客服的能力集成到您的 Web 或 Hybrid 项目。极简接入，用 AI 为您的产品降本增效。其流程如下图所示：
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/7de563a1f4cf11efa8355254001c06ec.png)
-
+智能客服用户端 Web UIKit。使用此 UIKit，您可以在一天内将智能客服的能力集成到您的 Web 或 Hybrid 项目。极简接入，用 AI 为您的产品增收提效。
 
 ## 效果展示
 
@@ -107,13 +104,25 @@ npm install
 npm i -D sass sass-loader
 ```
 
-> **说明：**
-> 
+清除项目默认的样式，避免样式问题：
 
-> 请删除 **src/style.css** 内的项目默认样式，避免样式问题。
-> 
 
 
+【macOS 端】
+``` bash
+echo -n > src/style.css
+```
+
+【Windows 端（PowerShell）​】
+``` bash
+Clear-Content -Path src/style.css
+```
+
+【Windows 端（CMD）】
+``` bash
+echo. > src\style.css
+```
+
 ### 步骤2：下载 UI 组件
 
 通过 npm 方式下载 UI 组件，并将 UI 组件复制到自己工程的 src 目录下：
@@ -170,7 +179,7 @@ xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-v
     :SDKAppID=""
     userID=""
     userSig=""
-    :style="{ width: '600px', height: '970px', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
     />
 </template>
 <script setup lang="ts">
@@ -188,7 +197,7 @@ xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-v
     :SDKAppID=""
     userID=""
     userSig=""
-    :style="{ width: '600px', height: '970px', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
     />
   </div>
 </template>
@@ -210,7 +219,7 @@ body {
     :SDKAppID=""
     userID=""
     userSig=""
-    :style="{ width: '600px', height: '970px', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
     />
   </div>
 </template>
@@ -223,18 +232,13 @@ body {
 }
 </style>
 ```
-1. 安装支持 composition-api 以及 script setup 的相关依赖，以及 vue2.6 相关依赖。
-
-``` javascript
-npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
-```
-2. 在 `main.ts/mian.js `中引入 VueCompositionAPI。
+1. 在 `main.ts/mian.js `中引入 VueCompositionAPI。
 
 ``` javascript
 import VueCompositionAPI from "@vue/composition-api";
 Vue.use(VueCompositionAPI);
 ```
-3. 在 `vue.config.js `中增加，若没有该文件请新建。
+2. 在 `vue.config.js `中增加，若没有该文件请新建。
 
 ``` javascript
 const ScriptSetup = require("unplugin-vue2-script-setup/webpack").default;
@@ -253,7 +257,7 @@ module.exports = {
   },
 };
 ```
-4. 在 `src/ai-desk-customer-vue/adapter-vue.ts` 文件最后, 替换导出源：
+3. 在 `src/ai-desk-customer-vue/adapter-vue-web.ts` 文件最后, 替换导出源：
 
 ``` javascript
 // 初始写法
@@ -317,12 +321,6 @@ export * from "@vue/composition-api";
 > 在 tsconfig.json 中关闭 ai-desk-customer-vue  的ts检测。
 > 
 > `{`
-> `    "compilerOptions": {`
-> `      ...`
-> `      "preserveValueImports": false,`
-> `      "importsNotUsedAsValues": "preserve",`
-> `      "noImplicitAny": false,`
-> `    },`
 > `    "exclude": [`
 > `      "node_modules",`
 > `      "src/ai-desk-customer-vue",`

package/assets/loading_message.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#CCCCCC"><path d="M480.2-240Q380-240 310-309.8q-70-69.8-70-170T309.8-650q69.8-70 170-70T650-650.2q70 69.8 70 170T650.2-310q-69.8 70-170 70Z"/></svg>

package/components/CustomerServiceChat/index-web.vue

@@ -18,6 +18,9 @@
         @handleEditor="handleEditor"
         @closeInputToolBar="() => changeToolbarDisplayType('none')"
       />
+      <MessageToolbarButton
+        :toolbarButtonList="props.toolbarButtonList"
+      />
       <MessageInputToolbar
         v-if="isInputToolbarShow"
         :class="[
@@ -87,8 +90,10 @@ import MessageInput from './message-input/index-web.vue';
 import MessageInputToolbar from './message-input-toolbar/index-web.vue';
 import EmojiDialog from './message-input-toolbar/emoji-dialog-mobile/emoji-dialog-mobile.vue';
 import { isPC, isH5} from '../../utils/env';
-import { ToolbarDisplayType } from '../../interface';
-
+import { ToolbarButtonModel, ToolbarDisplayType } from '../../interface';
+import { isSupportedLang } from '../../utils/';
+import Log from '../../utils/logger';
+import MessageToolbarButton from './message-toolbar-button/index.vue';
 
 const { ref, onMounted, onUnmounted, computed } = vue;
 
@@ -97,6 +102,8 @@ interface IProps {
   SDKAppID?:number;
   userID?:string;
   userSig?:string;
+  robotLang?:string;
+  toolbarButtonList?:ToolbarButtonModel[];
 }
 
 const emits = defineEmits(['closeChat']);
@@ -112,6 +119,8 @@ const props = withDefaults(defineProps<IProps>(), {
   SDKAppID: 0,
   userID: '',
   userSig: '',
+  robotLang: '',
+  toolbarButtonList:() => [] as ToolbarButtonModel[]
 });
 
 const loginCustomerUIKit = () => {
@@ -121,7 +130,7 @@ const loginCustomerUIKit = () => {
     userSig: props.userSig,
     useUploadPlugin: true,
   }).then(() => {
-    console.log("ai-desk-customer login success");
+    Log.i(`login success, robotLang:${props.robotLang}`);
     let conversationID = 'C2C@customer_service_account';
     TUIConversationService.switchConversation(conversationID);
     TUIChatEngine.chat.callExperimentalAPI('isFeatureEnabledForStat', Math.pow(2, 42));
@@ -134,6 +143,9 @@ try {
   const userContext = TUILogin.getContext();
   if(userContext.userID == '' && props.SDKAppID!==0 && props.userID!=='' && props.userSig!==''){
     loginCustomerUIKit();
+    if (props.robotLang && !isSupportedLang(props.robotLang)) {
+      Log.w(`robotLang:${props.robotLang} is not supported`);
+    }
   }
 } catch (e) {
   console.log(e)
@@ -200,6 +212,10 @@ function scrollToLatestMessage() {
 }
 
 function onCurrentConversationIDUpdate(conversationID: string) {
+  if (!conversationID) {
+    return;
+  }
+
   if (currentConversationID.value === conversationID) {
     return;
   }
@@ -210,7 +226,10 @@ function onCurrentConversationIDUpdate(conversationID: string) {
   TUICore.callService({
     serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
     method: TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION,
-    params: { conversationID: conversationID },
+    params: {
+      conversationID: conversationID,
+      robotLang: props.robotLang && isSupportedLang(props.robotLang) ? props.robotLang : undefined,
+    },
   });
 }
 

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

@@ -68,8 +68,9 @@
                 @resendMessage="resendMessage(item)"
               >
                 <template #messageElement>
+                  <MessageThinking v-if="isThinkingMessage(item)"/>
                   <MessageText
-                    v-if="item.type === TYPES.MSG_TEXT"
+                    v-else-if="item.type === TYPES.MSG_TEXT"
                     :content="item.getMessageContent()"
                   />
                   <ProgressMessage
@@ -175,7 +176,7 @@
 
 <script lang="ts" setup>
 import vue from '../../../adapter-vue';
-const { ref, nextTick, computed, onMounted, onUnmounted }  = vue;
+const { ref, nextTick, computed, onMounted, onUnmounted } = vue;
 import TUIChatEngine, {
   IMessageModel,
   TUIStore,
@@ -203,6 +204,7 @@ import MessageVideo from './message-elements/message-video-web.vue';
 import MessageTool from './message-tool/index-web.vue';
 import MessageRevoked from './message-tool/message-revoked.vue';
 import MessagePlugin from '../message-list/message-elements/message-desk/message-plugin-web.vue';
+import MessageThinking from './message-elements/message-thinking.vue';
 import ScrollButton from './scroll-button/index.vue';
 import { isPluginMessage } from './message-elements/message-desk/index';
 import Dialog from '../../common/Dialog/index.vue';
@@ -214,9 +216,8 @@ import {
   isEnabledMessageReadReceiptGlobal,
   deepCopy,
 } from '../../../utils/utils';
-import { isMessageInvisible } from '../../../utils/index';
-// import {TUICustomerServer} from '../../../server';
-import {isCustomerConversation} from '../../../index';
+import { isMessageInvisible, isThinkingMessage, isThinkingMessageOverTime } from '../../../utils/index';
+import { isCustomerConversation } from '../../../index';
 
 interface ScrollConfig {
   scrollToMessage?: IMessageModel;
@@ -328,19 +329,26 @@ onUnmounted(() => {
 });
 
 async function onMessageListUpdated(list: IMessageModel[]) {
-  if(!isCustomerConversation(currentConversationID.value)){
+  if (!isCustomerConversation(currentConversationID.value)) {
     return;
   }
   observer?.disconnect();
   const oldLastMessage = currentLastMessage.value;
   let hasEmojiReaction = false;
   allMessageList.value = list;
-  messageList.value = list.filter((message) => {
+
+  messageList.value = list.filter((message, index) => {
     if (message.reactionList?.length && !message.isDeleted) {
       hasEmojiReaction = true;
     }
+
+    // 判断是否结束
+    if (isThinkingMessage(message)) {
+      return isThinkingMessageOverTime(message);
+    }
     return !message.isDeleted && !isMessageInvisible(message as any);
   });
+
   if (!messageList.value?.length) {
     currentLastMessage.value = {};
     return;
@@ -695,6 +703,7 @@ function setAudioPlayed(messageID: string) {
   };
 }
 
+
 defineExpose({
   scrollToLatestMessage,
 });

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-file.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="['file-message-montainer',messageItem.flow === 'in'?'file-in' :'']"
+    :class="['file-message-container']"
     :title="TUITranslateService.t('TUIChat.单击下载')"
     @click="download"
   >
@@ -23,7 +23,7 @@ import {
 } from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../../common/Icon.vue';
 import files from '../../../../assets/files.png';
-import { isUniFrameWork,isWeChat } from '../../../../utils/env';
+import { isUniFrameWork } from '../../../../utils/env';
 import type { IFileMessageContent } from '../../../../interface';
 const { withDefaults } = vue;
 
@@ -39,10 +39,10 @@ const props = withDefaults(
 );
 
 const download = () => {
-  if (props.messageItem.hasRiskContent || props.messageItem.flow === 'out') {
+  if (props.messageItem.hasRiskContent) {
     return;
   }
-  
+
   // If the browser supports fetch, use blob to download, so as to avoid the browser clicking the a tag and jumping to the preview of the new page
   if (!isUniFrameWork && (window as any)?.fetch) {
     const option = {
@@ -60,89 +60,15 @@ const download = () => {
         a.download = props.content.name;
         a.click();
       });
-  } else if(isWeChat){
-    console.log("isWechat",props.content.url)
-    
-    wx.downloadFile({
-      url: props.content.url,
-      filePath: wx.env.USER_DATA_PATH + '/' + props.content.name,
-      success: function (res) {
-        var filePath = res.filePath;
-        const lastIndex = filePath.lastIndexOf('.');
-        const fileType = filePath.substring(lastIndex + 1);
-        console.log(fileType)
-        wx.openDocument({
-          filePath: filePath,
-          showMenu:true,
-          fileType:fileType,
-          success: function (res) {
-            console.log('打开文档成功');
-          },
-          fail:function(){
-            console.log("fail")
-          }
-        });
-      }
-    });
-  }else if(isUniFrameWork){
-    const lastIndex = props.content.url.lastIndexOf('.');
-    const fileType = props.content.url.substring(lastIndex + 1);
-    uni.downloadFile({
-      url:props.content.url,
-      success:function(res){
-        if(res.statusCode == 200){
-          console.log(res)
-          const tempFilePaths = res.tempFilePath;
-          uni.showToast({
-            title: '下载成功'+tempFilePaths,
-            icon: 'success',
-            duration: 2000
-          });
-          console.log(tempFilePaths);
-          uni.openDocument({
-            filePath: tempFilePaths,
-            fileType: fileType,
-            success: function () {
-                console.log('打开文档成功');
-            },
-            fail: function () {
-                console.log('打开文档失败');
-            }
-          });
-        }
-      }
-    });
-    // uni.openDocument({
-    //     filePath: tempFilePaths[0],
-    //     fileType: 'pdf',
-    //     success: function () {
-    //         console.log('打开文档成功');
-    //     },
-    //     fail: function () {
-    //         console.log('打开文档失败');
-    //     }
-    // });
-  } 
-  
-  else {
-    console.log("no window here")
-    const a = document.createElement('a');
-    a.href = props.content.url;
-    a.target = '_blank';
-    a.download = props.content.name;
-    a.click();
   }
 };
 </script>
 <style lang="scss" scoped>
 @import "../../style/common";
-.file-in{
-  cursor: pointer;
-}
-.file-message-montainer {
+.file-message-container {
   display: flex;
   flex-direction: row;
-  
+  cursor: pointer;
 
   .file-icon {
     margin: auto 8px;

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="16px" height="16px"/>
+            </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-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;
+    display: flex ;
+    align-items: center ;
+}
+
+.toolbar-button {
+    border: 1px solid #E7EAEF;
+    padding: 5px;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+    white-space: nowrap;
+}
+
+.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/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

package/interface.ts

@@ -8,6 +8,7 @@ export interface customerServicePayloadType {
   chunks?: string[];
   status?:number;
   nodeStatus?:number;
+  thinkingStatus?:number;
 }
 
 interface IMenuItem {
@@ -174,3 +175,10 @@ export interface ISendMessagePayload {
   file?: any;
   atUserList?: string[];
 }
+
+export interface ToolbarButtonModel {
+  title:string,
+  icon?:string,
+  renderCondition:()=>{},
+  clickEvent:()=>void
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tencentcloud/ai-desk-customer-vue",
-  "version": "0.2.1",
-  "description": "chat uikit ai-desk-customer",
+  "version": "0.7.0",
+  "description": "chat uikit ai-desk-customer web-mui-uikit",
   "main": "index",
   "keywords": [
     "customer service",
@@ -9,10 +9,9 @@
     "chatbot",
     "vue",
     "tencentcloud",
-    "客服",
     "智能客服",
-    "人工客服",
-    "智能机器人"
+    "智能机器人",
+    "deepseek"
   ],
   "scripts": {
     "sync": "node ./script/fileCopy.js",

package/server.ts

@@ -1,19 +1,23 @@
-import TUICore, { TUIConstants, TUILogin } from '@tencentcloud/tui-core';
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
 import {
   isCustomerServiceMessage,
+  isThinkingMessage,
   isMessageInvisible,
+  clearChatStorage,
 } from './utils/index';
 import TUIChatEngine, { TUIChatService, TUIConversationService,IMessageModel  } from '@tencentcloud/chat-uikit-engine';
+import Log from './utils/logger';
 
 export default class TUICustomerServer {
   static isInitialized: boolean;
   static instance: TUICustomerServer;
   private customerServiceAccounts: any[];
+  static loggedInUserID: string;
   constructor() {
-    console.log('TUICustomerServer.init ok');
     TUICore.registerService(TUIConstants.TUICustomerServicePlugin.SERVICE.NAME, this);
     TUICore.registerExtension(TUIConstants.TUIContact.EXTENSION.CONTACT_LIST.EXT_ID, this);
     this.customerServiceAccounts = ['@customer_service_account'];
+    Log.i('TUICustomerServer.init ok');
   }
 
   static getInstance(): TUICustomerServer {
@@ -24,34 +28,43 @@ export default class TUICustomerServer {
   }
 
   static loginCustomerUIKit(SDKAppID:number, userID:string, userSig:string) {
+    clearChatStorage(SDKAppID, userID);
     TUIChatEngine.login({
       SDKAppID,
       userID,
       userSig,
       useUploadPlugin: true,
     }).then(() => {
-      console.log("login success");
+      Log.i(`login success. userID:${userID}`);
+      TUICustomerServer.loggedInUserID = userID;
       TUIConversationService.switchConversation('C2C@customer_service_account');
       TUIChatEngine.chat.callExperimentalAPI('isFeatureEnabledForStat', Math.pow(2, 42));
     })
     .catch((error) => {
-      console.log(error);
+      Log.l(error);
     })
   }
 
-  /**
-   * init
-   */
   public static init(SDKAppID:number, userID:string, userSig:string) {
+    Log.l(`TUICustomerServer.init SDKAppID:${SDKAppID} userID:${userID} isInitialized:${TUICustomerServer.isInitialized} loggedInUserID:${TUICustomerServer.loggedInUserID}`);
     // Backward compatibility, the new version executes the init operation by default in index.ts
     if (TUICustomerServer.isInitialized) {
-      return;
+      if (TUICustomerServer.loggedInUserID === userID) {
+        return;
+      }
+      TUICustomerServer.unInit().finally(() => {
+        this.loginCustomerUIKit(SDKAppID, userID, userSig);
+      });
+    } else {
+      TUICustomerServer.isInitialized = true;
+      // Execute call server when native plugin TUICallKit exists
+      this.loginCustomerUIKit(SDKAppID, userID, userSig);
     }
-    TUICustomerServer.isInitialized = true;
-    // Execute call server when native plugin TUICallKit exists
-    this.loginCustomerUIKit(SDKAppID, userID, userSig);
   }
 
+  public static async unInit() {
+    return TUIChatEngine.logout();
+  }
 
   // Determine if the current session is a customer service session
   public isCustomerConversation(conversationID: string) {
@@ -64,6 +77,9 @@ export default class TUICustomerServer {
     if (!message || !this.isCustomerConversation(message.conversationID)) {
       return false;
     }
+    if (isThinkingMessage(message)) {
+      return false;
+    }
     return isCustomerServiceMessage(message) || isMessageInvisible(message);
   }
 
@@ -73,7 +89,7 @@ export default class TUICustomerServer {
         {
           weight: 0,
           icon: '',
-          text: '客服号',
+          text: '智能客服',
           data: {
             name: 'customer',
             accountList: this.customerServiceAccounts,
@@ -84,16 +100,21 @@ export default class TUICustomerServer {
   }
 
   public onCall(method: string, params: any) {
+    Log.l(`TUICustomerServer.onCall method:${method} params:`, params);
     if (method === TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION) {
       if (this.isCustomerConversation(params.conversationID)) {
         TUIChatService.sendCustomMessage({
           to: params.conversationID.slice(3),
           conversationType: TUIChatEngine.TYPES.CONV_C2C,
           payload: {
-            data: JSON.stringify({src: '7', customerServicePlugin: 0}),
+            data: JSON.stringify({
+              src: '7',
+              customerServicePlugin: 0,
+              triggeredContent: typeof params.robotLang === 'undefined' ? undefined : { language: params.robotLang }
+            }),
           },
         }, { onlineUserOnly: true});
       }
     }
   }
-}
+}

package/utils/console.js

@@ -0,0 +1,28 @@
+let _console; let method;
+if (typeof console !== 'undefined') {
+  _console = console;
+} else if (typeof global !== 'undefined' && global.console) {
+  _console = global.console;
+} else if (typeof window !== 'undefined' && window.console) {
+  _console = window.console;
+} else {
+  _console = {};
+}
+
+const noop = function() {};
+const methods = [
+  'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'group',
+  'groupCollapsed', 'groupEnd', 'info', 'log', 'profile', 'profileEnd',
+  'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn',
+];
+let length = methods.length;
+
+while (length--) {
+  method = methods[length];
+
+  if (!console[method]) {
+    _console[method] = noop;
+  }
+}
+
+export default _console;

package/utils/index.ts

@@ -37,6 +37,22 @@ export const isMessageRating = (message: IMessageModel): boolean => {
   return isCustomerServiceMessage(message) && customerServicePayload.src === CUSTOM_MESSAGE_SRC.MENU;
 };
 
+export const isThinkingMessage = (message: IMessageModel): boolean => {
+  const isCustomerMessage = message?.type === TYPES.MSG_CUSTOM;
+  const customerServicePayload: customerServicePayloadType = JSONToObject(message?.payload?.data);
+  return isCustomerMessage && customerServicePayload?.src === CUSTOM_MESSAGE_SRC.THINKING && customerServicePayload?.thinkingStatus === 0;
+}
+
+export const isThinkingMessageOverTime = (message: IMessageModel): boolean => {
+  const messageTime = message.time * 1000;
+  const minute = 60 * 1000;
+  const now = Date.now();
+  if (now - messageTime > minute) {
+    return false;
+  }
+  return true;
+}
+
 export const isMessageInvisible = (message: IMessageModel): boolean => {
   const customerServicePayload: customerServicePayloadType = JSONToObject(message?.payload?.data);
   const robotCommandArray = ['feedback', 'updateBotStatus'];
@@ -50,11 +66,42 @@ export const isMessageInvisible = (message: IMessageModel): boolean => {
     CUSTOM_MESSAGE_SRC.RICH_TEXT,
     CUSTOM_MESSAGE_SRC.STREAM_TEXT,
     CUSTOM_MESSAGE_SRC.MULTI_BRANCH,
-    CUSTOM_MESSAGE_SRC.MULTI_FORM
+    CUSTOM_MESSAGE_SRC.MULTI_FORM,
   ];
   const isCustomerMessage = message?.type === TYPES.MSG_CUSTOM;
   const isCustomerInvisible = customerServicePayload?.src && !whiteList.includes(customerServicePayload?.src);
-  const isMultiFormMessage:boolean =  customerServicePayload?.src !== null &&  customerServicePayload?.src === CUSTOM_MESSAGE_SRC.MULTI_FORM && message.flow === 'out';
+  const isMultiFormMessage: boolean = customerServicePayload?.src !== null && customerServicePayload?.src === CUSTOM_MESSAGE_SRC.MULTI_FORM && message.flow === 'out';
   const isRobot = customerServicePayload?.src === CUSTOM_MESSAGE_SRC.ROBOT && robotCommandArray.indexOf(customerServicePayload?.content?.command) !== -1;
   return isCustomerMessage && (isCustomerInvisible || isRobot || isMultiFormMessage);
 };
+
+export const isSupportedLang = (lang: string): boolean => {
+  return [
+    'zh', // Simplified Chinese中文简体：zh
+    'zh-TW', // Traditional Chinese中文繁体：zh-TW
+    'en', // English英语：en
+    'id', // Indonesian印度尼西亚语：id
+    'vi', // Vietnamese越南语：vi
+    'ja', // Japanese日语：ja
+    'fil' // Filipino菲律宾语：fil
+  ].indexOf(lang) !== -1;
+}
+
+// 如果用户选择 block cookies，此时访问 localStorage 浏览器会抛错
+// Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document
+// 通过 navigator.cookieEnabled 短路逻辑规避
+const canIUseCookies = () => {
+  // When the browser is configured to block third-party cookies, and navigator.cookieEnabled is invoked inside a third-party iframe,
+  // it returns true in Safari, Edge Spartan and IE (while trying to set a cookie in such scenario would fail).
+  // It returns false in Firefox and Chromium-based browsers.
+  if (typeof window !== 'undefined') {
+    return window.navigator?.cookieEnabled && localStorage;
+  }
+  return false;
+}
+
+export const clearChatStorage = (SDKAppID, userID) => {
+  if (canIUseCookies()) {
+    localStorage.removeItem(`TIM_${SDKAppID}_${userID}_conversationMap`);
+  }
+}

package/utils/logger.js

@@ -0,0 +1,178 @@
+import console from './console';
+import { getDate } from './time';
+
+const USER_AGENT = window && window.navigator && window.navigator.userAgent || '';
+const IS_IE = /MSIE/.test(USER_AGENT) || (USER_AGENT.indexOf('Trident') > -1 && USER_AGENT.indexOf('rv:11.0') > -1);
+
+const canIUseConsoleStyle = function() {
+  // ie 浏览器不支持 console css style
+  // 小程序仅部分支持 console css style (console.warn/console.error 不支持)
+  return !IS_IE;
+}
+
+const getType = function(input) {
+  return Object.prototype.toString
+    .call(input)
+    .match(/^\[object (.*)\]$/)[1]
+    .toLowerCase();
+};
+
+const isArray = function(input) {
+  if (typeof Array.isArray === 'function') {
+    return Array.isArray(input);
+  }
+  return getType(input) === 'array';
+};
+
+const isObject = function(input) {
+  // null is object, hence the extra check
+  return input !== null && typeof input === 'object';
+};
+
+/**
+ * 检测input是否为Error的实例
+ * @param {*} input 任意类型的输入
+ * @returns {Boolean} true->input is an instance of Error
+ */
+const isInstanceOfError = function(input) {
+  return (input instanceof Error);
+};
+
+/**
+ * 检测input类型是否为数组或者object
+ * @param {*} input 任意类型的输入
+ * @returns {Boolean} true->input is an array or an object
+ */
+const isArrayOrObject = function(input) {
+  return isArray(input) || isObject(input);
+};
+
+/**
+ * 对齐毫秒字符串
+ * @param {*} ms 毫秒
+ * @returns {String} 对齐后的毫秒时间字符串
+ */
+function padMs(ms) {
+  const len = ms.toString().length;
+  let ret;
+  switch (len) {
+    case 1:
+      ret = '00' + ms;
+      break;
+    case 2:
+      ret = '0' + ms;
+      break;
+    default:
+      ret = ms;
+      break;
+  }
+
+  return ret;
+}
+
+/**
+ * log前缀
+ * @returns {String} 日志前缀
+ */
+function getPrefix() {
+  if (!canIUseConsoleStyle()) {
+    return 'ai-desk-customer';
+  }
+  return '%c ai-desk-customer %c';
+}
+
+function getPrefixStyle() {
+  return 'background:#0052d9; padding:1px; border-radius:3px; color: #fff';
+}
+
+function getBgStyle() {
+  return 'background:transparent';
+}
+
+function getTime() {
+  const date = getDate();
+  return date.toLocaleTimeString('en-US', { hour12: false }) + '.' + padMs(date.getMilliseconds());
+}
+
+const Log = {
+  // 将函数参数拼成字符串
+  arguments2String(args) {
+    let s = '';
+    if (args.length === 1) {
+      s = args[0];
+    } else {
+      for (let i = 0, length = args.length; i < length; i++) {
+        if (isArrayOrObject(args[i])) {
+          try {
+            s += isInstanceOfError(args[i]) ? JSON.stringify(args[i], ['message', 'code']) : JSON.stringify(args[i]);
+          } catch (error) {
+            s += error ? error.message : '';
+            break;
+          }
+        } else {
+          s += args[i];
+        }
+        s += ' ';
+      }
+    }
+    return s;
+  },
+
+  _exec(api, log) {
+    if (!canIUseConsoleStyle()) {
+      console[api](`${getPrefix()} ${getTime()} ${log}`);
+    } else {
+      console[api](getPrefix(), getPrefixStyle(), getBgStyle(), getTime(), log);
+    }
+  },
+
+  /**
+   * 打印调试日志
+   */
+  d: function() {
+    const s = this.arguments2String(arguments);
+    this._exec('debug', s);
+  },
+
+  /**
+   * 打印普通日志
+   */
+  l: function() {
+    const s = this.arguments2String(arguments);
+    this._exec('log', s);
+  },
+
+  /**
+   * 打印普通日志，等同于 Log.i，为了兼容低版本的本地审核插件（其内部调用了 Logger.log）
+   */
+  log: function() {
+    const s = this.arguments2String(arguments);
+    this._exec('log', s);
+  },
+
+  /**
+   * 打印release日志
+   */
+  i: function() {
+    const s = this.arguments2String(arguments);
+    this._exec('info', s);
+  },
+
+  /**
+   * 打印告警日志
+   */
+  w: function() {
+    const s = this.arguments2String(arguments);
+    this._exec('warn', s);
+  },
+
+  /**
+   * 打印错误日志
+   */
+  e: function() {
+    const s = this.arguments2String(arguments);
+    this._exec('error', s);
+  },
+};
+
+export default Log;

package/utils/time.js

@@ -0,0 +1,15 @@
+// user system clock may be inaccurate, so we need to adjust the timestamp
+// based on the baseTime received from login server
+
+let _offset = 0;
+
+export const getTimestamp = function() {
+  return new Date().getTime() + _offset;
+};
+
+export const getDate = function() {
+  const now = new Date();
+  now.setTime(getTimestamp());
+  return now;
+};
+