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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.1.0] (2025-4-23)
+
+### Features
+- 新增 `initWithProfile` 接口，支持用户端带昵称（nickName）和头像（avatar）登录，提升人工客服与用户交互体验。
+- 优化流式消息和 markdown 图文混排的产品体验。
+- 优化发消息体验。
+- 优化组件样式。
+
+## [1.0.1] (2025-4-16)
+
+### Features
+- 简化接入。
+- TUICustomerServer 新增 sendTextMessage/sendCustomMessage/changeLanguage 等接口。
+
 ## [1.0.0] (2025-4-10)
 
 ### Features

package/README.md

@@ -177,37 +177,11 @@ xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-v
 <template>
   <CustomerServiceChat
       :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
-      :toolbarButtonList="toolbarButtonList"
   />
 </template>
 <script setup lang="ts">
-import TUICustomerServer from './ai-desk-customer-vue/server';
-import { CustomerServiceChat } from './ai-desk-customer-vue';
-import { onMounted, ref } from "vue";
-import TUIChatEngine, { TUIChatService } from "@tencentcloud/chat-uikit-engine";
-
-// 配置工具栏 button list，例如【转人工】
-const toolbarButtonList = ref([
-  {
-    title: '转人工',
-    renderCondition: () => {
-      // return true 即渲染，您可以在这里控制 button 显隐时机
-      return true;
-    },
-    clickEvent: () => {
-      // 点击 button 后的回调
-      if (TUIChatEngine.isReady()) {
-        TUIChatService.sendTextMessage({
-          to: '@customer_service_account',
-          conversationType: TUIChatEngine.TYPES.CONV_C2C,
-          payload: {
-            text: '转人工'
-          }
-        });
-      }
-    }
-  }
-]);
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
+import { onMounted } from "vue";
 
 onMounted(() => {
   const SDKAppID = 0; // Your SDKAppID，即开通了智能客服 Desk 的应用 ID
@@ -226,40 +200,14 @@ onMounted(() => {
   <div id="app">
     <CustomerServiceChat
         :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
-        :toolbarButtonList="toolbarButtonList"
     />
   </div>
 </template>
 <script lang="ts" setup>
-import TUICustomerServer from './ai-desk-customer-vue/server';
-import { CustomerServiceChat } from './ai-desk-customer-vue';
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
 import vue from './ai-desk-customer-vue/adapter-vue';
-import TUIChatEngine, { TUIChatService } from "@tencentcloud/chat-uikit-engine";
-
-const { ref, onMounted } = vue;
 
-// 配置工具栏 button list，例如【转人工】
-const toolbarButtonList = ref([
-  {
-    title: '转人工',
-    renderCondition: () => {
-      // return true 即渲染，您可以在这里控制 button 显隐时机
-      return true;
-    },
-    clickEvent: () => {
-      // 点击 button 后的回调
-      if (TUIChatEngine.isReady()) {
-        TUIChatService.sendTextMessage({
-          to: '@customer_service_account',
-          conversationType: TUIChatEngine.TYPES.CONV_C2C,
-          payload: {
-            text: '转人工'
-          }
-        });
-      }
-    }
-  }
-]);
+const { onMounted } = vue;
 
 onMounted(() => {
   const SDKAppID = 0; // Your SDKAppID
@@ -278,40 +226,14 @@ onMounted(() => {
   <div id="app">
     <CustomerServiceChat
         :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
-        :toolbarButtonList="toolbarButtonList"
     />
   </div>
 </template>
 <script lang="ts" setup>
-import TUICustomerServer from './ai-desk-customer-vue/server';
-import { CustomerServiceChat } from './ai-desk-customer-vue';
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
 import vue from './ai-desk-customer-vue/adapter-vue';
-import TUIChatEngine, { TUIChatService } from "@tencentcloud/chat-uikit-engine";
 
-const { ref, onMounted } = vue;
-
-// 配置工具栏 button list，例如【转人工】
-const toolbarButtonList = ref([
-  {
-    title: '转人工',
-    renderCondition: () => {
-      // return true 即渲染，您可以在这里控制 button 显隐时机
-      return true;
-    },
-    clickEvent: () => {
-      // 点击 button 后的回调
-      if (TUIChatEngine.isReady()) {
-        TUIChatService.sendTextMessage({
-          to: '@customer_service_account',
-          conversationType: TUIChatEngine.TYPES.CONV_C2C,
-          payload: {
-            text: '转人工'
-          }
-        });
-      }
-    }
-  }
-]);
+const { onMounted } = vue;
 
 onMounted(() => {
   const SDKAppID = 0; // Your SDKAppID
@@ -433,6 +355,177 @@ npm run serve
 npm run dev
 ```
 
+## 高级特性
+
+### 国际化界面语言
+
+从 v1.0.0 起，UIKit 支持以下界面语言：
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >语言代码（userLang）</td>
+
+<td rowspan="1" colSpan="1" >语言</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >zh_cn</td>
+
+<td rowspan="1" colSpan="1" >简体中文</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >en</td>
+
+<td rowspan="1" colSpan="1" >英文</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >zh_tw</td>
+
+<td rowspan="1" colSpan="1" >繁体中文</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >ja</td>
+
+<td rowspan="1" colSpan="1" >日语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >id</td>
+
+<td rowspan="1" colSpan="1" >印尼语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >ms</td>
+
+<td rowspan="1" colSpan="1" >马来语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >vi</td>
+
+<td rowspan="1" colSpan="1" >越南语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >th</td>
+
+<td rowspan="1" colSpan="1" >泰语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >fil</td>
+
+<td rowspan="1" colSpan="1" >菲律宾语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >ru</td>
+
+<td rowspan="1" colSpan="1" >俄语</td>
+</tr>
+</table>
+
+
+如果您的业务需要出海，且用户语言以英语为主，可在引入智能客服时设置`userLang="en"`。如果您不指定`userLang`, UIKit 会使用浏览器设置的语言。
+``` javascript
+<template>
+    <CustomerServiceChat style="height: 100%;"
+        userLang="en"
+    />
+</template>
+```
+
+如果您需要支持动态切换用户语言，可使用`TUICustomerServer.changeLanguage`接口，并通过切换 页面/组件 key 的方式，实现语言动态修改与展示。
+``` javascript
+<template>
+    <CustomerServiceChat style="height: 100%;"
+        :key="locale"
+        :userLang="locale"
+    />
+</template>
+<script setup lang="ts">
+import TUICustomerServer, { CustomerServiceChat }  from '../../ai-desk-customer-uniapp';
+import { onMounted, ref } from "vue";
+
+const locale = ref('en');
+
+const changeLanguage = (language: string) => {
+  TUICustomerServer.changeLanguage(language).then(() => {
+    locale.value = language;
+  });
+}
+</script>
+<style scoped lang="scss">
+</style>
+```
+
+### 工具栏快捷 button
+
+如果您想实现输入框上方增加快捷 button，方便用户使用，比如增加“人工客服”，“发送订单消息”等，可在引入智能客服时设置 `toolbarButtonList`。效果如下所示：
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/b727aeef19cd11f0abe05254005ef0f7.png)
+
+``` javascript
+<template>
+    <CustomerServiceChat style="height: 100%;"
+        :toolbarButtonList="toolbarButtonList"
+    />
+</template>
+<script setup lang="ts">
+import TUICustomerServer, { CustomerServiceChat }  from '../../ai-desk-customer-uniapp';
+import { ref } from "vue";
+
+const toolbarButtonList = ref([
+  { 
+    title: '人工客服', 
+    renderCondition: () => {
+      return true;
+    },
+    clickEvent: () => {
+      // 点击 button 后的回调
+      TUICustomerServer.sendTextMessage({
+        to: '@customer_service_account',
+        conversationType: 'C2C',
+        payload: {
+          text: '人工客服'
+        }
+      });
+    }
+  },
+  {
+    title: '发送订单',
+    renderCondition: () => {
+      return true;
+    },
+    clickEvent: () => {
+      // 点击 button 后的回调
+      TUICustomerServer.sendCustomMessage({
+        to: '@customer_service_account',
+        conversationType: 'C2C',
+        payload: {
+          data: JSON.stringify({
+            src: '22',
+            customerServicePlugin: 0,
+            content: {
+              desc: "¥3000/月",
+              header: "高级版智能客服",
+              pic: "https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/presale.a4955999.jpeg",
+              url: "https://cloud.tencent.com/document/product/269/116070"
+            }
+          }),
+        }
+      });
+    }
+  }
+]);
+</script>
+<style scoped lang="scss">
+</style>
+```
+
 ## 常见问题
 
 ##### 什么是 UserSig？如何生成 UserSig？

package/assets/send_button_h5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1C66E5"><path d="M440-320h80v-168l64 64 56-56-160-160-160 160 56 56 64-64v168Zm40 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>

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

@@ -18,6 +18,7 @@
         @sendMessage="sendMessage"
         @onTyping="onTyping"
         @blurToolAndEmojiH5="blurToolAndEmojiH5"
+        @isInputNotEmpty="isInputNotEmpty"
       />
       <MessageInputButton
         v-if="!props.isMuted && isPC"
@@ -26,9 +27,12 @@
       <div v-if="isH5" class="emoji-icon" id="emoji-icon-h5" @click="emojiShow">
         <Icon :file="emojiIcon" width="24px" height="24px"/>
       </div>
-      <div v-if="isH5" class="tool-icon" @click="toolShow">
+      <div v-show="isH5 && !showSendButton" class="tool-icon" @click="toolShow">
         <Icon :file="toolIcon" width="24px" height="24px"/>
       </div>
+      <div v-show="isH5 && showSendButton" class="send-button-h5" @click="sendMessage">
+        <Icon :file="sendButtonIcon" width="34px" height="34px"/>
+      </div>
     </div>
 
   </div>
@@ -50,6 +54,7 @@ import { isPC,isH5 } from '../../../utils/env';
 import Icon from '../../common/Icon.vue';
 import emojiIcon from '../../../assets/emoji.png';
 import toolIcon from '../../../assets/more_tools.png';
+import sendButtonIcon from '../../../assets/send_button_h5.svg';
 const { ref,onMounted,onBeforeUnmount } = vue;
 
 const props = defineProps({
@@ -83,6 +88,7 @@ const emit = defineEmits(['sendMessage', 'resetReplyOrReference', 'onTyping','sc
 const editor = ref<InstanceType<typeof MessageInputEditor>>();
 const currentConversation = ref<IConversationModel>();
 const h5Dialog = ref<HTMLElement>();
+const showSendButton = ref(false);
 
 onMounted(() => {
   // document.addEventListener('click', handleClick);
@@ -126,17 +132,23 @@ const sendMessage = async () => {
   await sendMessages(editorContentList, currentConversation.value);
   emit('sendMessage');
   editor.value?.resetEditor();
+  showSendButton.value = false;
 };
 
 const insertEmoji = (emoji: any) => {
   editor.value?.addEmoji(emoji);
+  showSendButton.value = true;
 };
 
 const reEdit = (content: any) => {
   editor.value?.resetEditor();
+  showSendButton.value = false;
   editor.value?.setEditorContent(content);
 };
 
+const isInputNotEmpty = (show: boolean) => {
+  showSendButton.value = show;
+}
 
 const emojiShow = () => {
   emit('emojiShow');
@@ -205,11 +217,8 @@ defineExpose({
   height: fit-content;
     background: #fff;
 }
-.send-btn-h5 {
-  background-color: #1c66e5;
-    color: #fff;
-    padding: 10px 12px;
-    margin-left: 5px;
-    border-radius: 7px;
+.send-button-h5 {
+  margin-right: 10px;
+  margin-left: 5px;
 }
 </style>

package/components/CustomerServiceChat/message-input/message-input-editor-web.vue

@@ -76,7 +76,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['sendMessage', 'onTyping','blurToolAndEmojiH5']);
+const emits = defineEmits(['sendMessage', 'onTyping', 'blurToolAndEmojiH5', 'isInputNotEmpty']);
 const { placeholder, enableDragUpload, enableTyping } = toRefs(props);
 const isEditorEmpty = ref<boolean>(true);
 const isEditorBlur = ref<boolean>(true);
@@ -214,9 +214,12 @@ function handleEnter(e: any) {
   }
 }
 
-function handleH5Input() {
+function handleH5Input(e: any) {
   if (isH5) {
     isEditorEmpty.value = editorDom.value?.childNodes ? false : true;
+    const hasText = e.target.innerText.trim().length > 0;
+    const hasImages = e.target.querySelectorAll('img.custom-image-emoji').length > 0;
+    emits('isInputNotEmpty', hasText || hasImages);
   }
 }
 

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

@@ -47,6 +47,7 @@
               @resendMessage="resendMessage"
               @handleToggleMessageItem="handleToggleMessageItem"
               @handleH5LongPress="handleH5LongPress"
+              @heightChanged="onHeightChanged"
             />
             <div
               v-else
@@ -572,6 +573,10 @@ const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
   }
 };
 
+function onHeightChanged() {
+  scrollToLatestMessage();
+}
+
 // re-edit message
 const handleEdit = (message: IMessageModel) => {
   emits('handleEditor', message, 'reedit');

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

@@ -38,7 +38,10 @@
         <MessageRichText :payload="payload" />
       </div>
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.STREAM_TEXT">
-        <MessageStream :payload="payload" />
+        <MessageStream
+          :payload="payload"
+          @heightChanged="onHeightChanged"
+        />
       </div>
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.MULTI_BRANCH">
         <MessageMultiBranch :payload="payload" @sendMessage="sendTextMessage"/>
@@ -98,7 +101,7 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ['showFormPopup'],
+  emits: ['showFormPopup', 'heightChanged'],
   setup(props: Props, { emit }) {
     const payload = computed<customerServicePayloadType>(() => {
       return props.message && JSONToObject(props.message?.payload?.data);
@@ -111,7 +114,10 @@ export default {
     };
     const handleShowFormPopup = (data: boolean) => {
       emit('showFormPopup', data);
-    }
+    };
+    const onHeightChanged = () => {
+      emit('heightChanged');
+    };
 
     return {
       payload,
@@ -119,7 +125,8 @@ export default {
       sendTextMessage,
       CUSTOM_MESSAGE_SRC,
       sendCustomMessage,
-      handleShowFormPopup
+      handleShowFormPopup,
+      onHeightChanged,
     };
   },
 };

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

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

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

@@ -225,13 +225,14 @@ export default {
 
 .submit-button {
   height: 35px;
-  background-color: #0365f9;
+  background-color: #1c66e5;
   font-size: 14px;
   font-weight: 400;
   color: white;
   border: 0;
   border-radius: 8px;
   cursor: pointer;
+  width: 62%;
 }
 
 </style>

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

@@ -70,7 +70,7 @@ export default {
   z-index: 101;
   width: 100vw;
   height: 100vh;
-  background: rgba(#000, 0.3);
+  background: rgba(#000, 0.8);
   top: 0;
   left: 0;
   display: flex;
@@ -81,14 +81,12 @@ export default {
 }
 
 .rich-image-preview {
-  width: 80%;
-  height:auto;
+  max-width: 90%;
+  height: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  transition: transform 0.1s ease 0s;
   pointer-events: auto;
 }
-
 </style>

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

@@ -1,6 +1,12 @@
 <template>
   <div class="message-stream">
-    <pre :class="['message-marked']" v-html="displayedContent" />
+    <pre ref="preRef" :class="['message-marked']" v-html="displayedContent" />
+  </div>
+  <div v-if="image" class="rich-image-previewer" @click="closeImage">
+    <img
+        class="rich-image-preview"
+        :src="imageSrc"
+    />
   </div>
 </template>
 
@@ -11,7 +17,7 @@ import { parseMarkdown } from './marked'
 import { TypeWriter } from "./type-writer";
 import { JSONToObject } from "../../../../../../utils";
 
-const { ref, computed, withDefaults, defineProps, watch } = vue;
+const { ref, computed, withDefaults, defineProps, watch, onMounted, onUnmounted } = vue;
 
 interface Props {
   payload: customerServicePayloadType;
@@ -22,11 +28,27 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const isStreaming = ref<boolean>(false);
+const image = ref(false);
+const imageSrc = ref('');
 const chunks = ref<string>('');
 const isFinished = ref<boolean>(true);
 const prevChunksLength = ref<number>(0);
 const streamContent = ref<string>('');
-const displayedContent = computed(() => parseMarkdown(streamContent.value));
+const displayedContent = computed(() => {
+  // @ts-ignore
+  window.onMarkdownImageClicked = function(href:string) {
+    image.value = !image.value;
+    imageSrc.value = decodeURIComponent(href);
+  }
+  return parseMarkdown(streamContent.value);
+});
+const preRef = ref();
+const emits = defineEmits(['heightChanged']);
+// 不支持 ResizeObserver 的浏览器太老旧，默认不处理了
+const canIUseResizeObserver = typeof ResizeObserver === 'undefined' ? false : true;
+
+let observer;
+let prevHeight;
 
 const typeWriter = new TypeWriter({
   onTyping: (item: string) => {
@@ -60,15 +82,52 @@ watch(() => props.payload, (newValue: string, oldValue: string) => {
         // disable typeWriter style or history message first load
         streamContent.value = chunks.value;
       } else {
-        const _newChunksToAdd = chunks.value?.slice(prevChunksLength.value);
-        startStreaming([_newChunksToAdd]);
+        // 判断长度是为了防御编辑的内容回退的异常 case
+        if (chunks.value.length > prevChunksLength.value) {
+          const _newChunksToAdd = chunks.value?.slice(prevChunksLength.value);
+          prevChunksLength.value = chunks.value.length;
+          startStreaming([_newChunksToAdd]);
+        }
       }
-      prevChunksLength.value = chunks.value?.length;
     }, {
       deep: true,
       immediate: true,
     },
 );
+
+onMounted(() => {
+  if (canIUseResizeObserver) {
+    observer = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        observeHeightChanged(entry.contentRect.height);
+      }
+    });
+    // 开始观察
+    observer.observe(preRef.value);
+  }
+});
+
+onUnmounted(() => {
+  if (canIUseResizeObserver) {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  }
+});
+
+const observeHeightChanged = (newHeight) => {
+  if (prevHeight !== newHeight) {
+    prevHeight = newHeight;
+    emits('heightChanged');
+  }
+};
+
+const closeImage = () => {
+  image.value = !image.value;
+  imageSrc.value = '';
+};
+
 </script>
 <style lang="scss" scoped>
 .message-stream {

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: pre-wrap;
+  white-space: normal;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

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

@@ -13,6 +13,7 @@
       <MessageCustomerService
         v-if="pluginMessageType.pluginType === 'customer'"
         :message="props.message"
+        @heightChanged="onHeightChanged"
       />
     </template>
   </MessagePluginLayout>
@@ -44,6 +45,7 @@ const emits = defineEmits([
   'resendMessage',
   'handleToggleMessageItem',
   'handleH5LongPress',
+  'heightChanged',
 ]);
 const messageModel = computed(() => TUIStore.getMessageModel(props.message.ID));
 
@@ -76,6 +78,9 @@ const handleToggleMessageItem = (
 const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
   emits('handleH5LongPress', e, message, type);
 };
+const onHeightChanged = () => {
+  emits('heightChanged');
+};
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,7 +1,7 @@
 <template>
     <div class="toolbar-button-container">
         <template v-for="(item, index) in props.toolbarButtonList">
-            <div v-if="item.renderCondition()" :key="index"
+            <div v-if="shouldRender(item)" :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">
@@ -26,7 +26,13 @@ const props = withDefaults(defineProps<IProps>(), {
 });
 
 function onClick(index: number) {
-    props.toolbarButtonList[index].clickEvent();
+    if (typeof props.toolbarButtonList[index].clickEvent === 'function') {
+        props.toolbarButtonList[index].clickEvent();
+    }
+}
+
+function shouldRender(item: ToolbarButtonModel) {
+    return typeof item.renderCondition === 'function' ? item.renderCondition() : false;
 }
 
 </script>

package/index.ts

@@ -13,4 +13,6 @@ export {
   isMessageInvisible,
   CustomerServiceChat,
   isCustomerConversation
-};
+};
+
+export default TUICustomerServer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/ai-desk-customer-vue",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Vue UIKit for AI Desk",
   "main": "index",
   "keywords": [

package/server.ts

@@ -9,22 +9,36 @@ import TUIChatEngine, {
   TUIChatService,
   TUIConversationService,
   IMessageModel,
-  TUITranslateService
+  TUITranslateService,
+  SendMessageParams,
+  SendMessageOptions,
+  TUIUserService,
 } from '@tencentcloud/chat-uikit-engine';
 import Log from './utils/logger';
 import { version } from './package.json'
 import { Toast, TOAST_TYPE } from "./components/common/Toast/index-web";
 
+interface IInitWithProfile {
+  SDKAppID: number,
+  userID: string,
+  userSig: string,
+  nickName?: string,
+  avatar?: string,
+}
+
 export default class TUICustomerServer {
-  static isInitialized: boolean;
+  private isLoggedIn: boolean;
   static instance: TUICustomerServer;
   private customerServiceAccounts: any[];
-  static loggedInUserID: string;
+  private loggedInUserID: string;
+  private myProfile: object;
   constructor() {
     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');
+    this.isLoggedIn = false;
+    this.loggedInUserID = '';
+    this.myProfile = {};
   }
 
   static getInstance(): TUICustomerServer {
@@ -34,7 +48,7 @@ export default class TUICustomerServer {
     return TUICustomerServer.instance;
   }
 
-  static loginCustomerUIKit(SDKAppID:number, userID:string, userSig:string) {
+  private loginCustomerUIKit(SDKAppID:number, userID:string, userSig:string) {
     clearChatStorage(SDKAppID, userID);
     TUIChatEngine.login({
       SDKAppID,
@@ -43,41 +57,71 @@ export default class TUICustomerServer {
       useUploadPlugin: true,
     }).then(() => {
       Log.i(`login success. userID:${userID}`);
-      TUICustomerServer.loggedInUserID = userID;
+      this.isLoggedIn = true;
+      this.loggedInUserID = userID;
       TUIConversationService.switchConversation('C2C@customer_service_account');
       TUIChatEngine.chat.callExperimentalAPI('isFeatureEnabledForStat', Math.pow(2, 42));
     })
-    .catch((error) => {
-      Toast({
-        message: TUITranslateService.t('TUIChat.登录失败'),
-        type: TOAST_TYPE.ERROR,
-        duration: 30000,
-      });
-      Log.l(error);
-    })
+      .catch((error) => {
+        Toast({
+          message: TUITranslateService.t('TUIChat.登录失败'),
+          type: TOAST_TYPE.ERROR,
+          duration: 30000,
+        });
+        Log.l(error);
+      })
   }
 
-  public static init(SDKAppID:number, userID:string, userSig:string) {
-    Log.l(`TUICustomerServer.init version:${version} 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) {
-      if (TUICustomerServer.loggedInUserID === userID) {
+  public init(SDKAppID:number, userID:string, userSig:string) {
+    Log.l(`TUICustomerServer.init version:${version} SDKAppID:${SDKAppID} userID:${userID} isLoggedIn:${this.isLoggedIn} loggedInUserID:${this.loggedInUserID}`);
+    if (this.isLoggedIn) {
+      if (this.loggedInUserID === userID) {
         return;
       }
-      TUICustomerServer.unInit().finally(() => {
+      this.unInit().finally(() => {
+        this.isLoggedIn = false;
         this.loginCustomerUIKit(SDKAppID, userID, userSig);
       });
     } else {
-      TUICustomerServer.isInitialized = true;
-      // Execute call server when native plugin TUICallKit exists
       this.loginCustomerUIKit(SDKAppID, userID, userSig);
     }
   }
 
-  public static async unInit() {
+  public initWithProfile(options: IInitWithProfile) {
+    const { SDKAppID, userID, userSig, nickName, avatar } = options;
+    Log.l(`TUICustomerServer.initWithProfile version:${version}`);
+    if (nickName) {
+      // chat 个人资料的昵称是 nick
+      this.myProfile.nick = nickName;
+    }
+    if (avatar) {
+      this.myProfile.avatar = avatar;
+    }
+    this.init(SDKAppID, userID, userSig);
+  }
+
+  public unInit() {
     return TUIChatEngine.logout();
   }
 
+  public sendTextMessage(options: SendMessageParams, sendMessageOptions?: SendMessageOptions) {
+    return TUIChatService.sendTextMessage(options, sendMessageOptions);
+  }
+
+  public sendCustomMessage(options: SendMessageParams, sendMessageOptions?: SendMessageOptions) {
+    return TUIChatService.sendCustomMessage(options, sendMessageOptions);
+  };
+
+  public changeLanguage(language: string) {
+    return TUITranslateService.changeLanguage(language).then(() => {
+      Log.i(`language changed to ${language}`);
+    });
+  }
+
+  public getLoggedInUserID() {
+    return this.loggedInUserID;
+  }
+
   // Determine if the current session is a customer service session
   public isCustomerConversation(conversationID: string) {
     const userID = (conversationID && conversationID.slice(3)) || '';
@@ -115,18 +159,31 @@ export default class TUICustomerServer {
     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,
-              triggeredContent: typeof params.robotLang === 'undefined' ? undefined : { language: params.robotLang }
-            }),
-          },
-        }, { onlineUserOnly: true});
+        // 如果有资料，确保资料更新完成（或失败）后再激活会话服务流
+        if (Object.keys(this.myProfile).length > 0) {
+          Log.l(`TUICustomerServer.onCall updateMyProfile:${JSON.stringify(this.myProfile)}`);
+          TUIUserService.updateMyProfile({...this.myProfile}).finally(() => {
+            this.activeServiceFlow(params);
+          });
+        } else {
+          this.activeServiceFlow(params);
+        }
       }
     }
   }
+
+  // 激活会话服务流
+  private activeServiceFlow(params: any) {
+    TUIChatService.sendCustomMessage({
+      to: params.conversationID.slice(3),
+      conversationType: TUIChatEngine.TYPES.CONV_C2C,
+      payload: {
+        data: JSON.stringify({
+          src: '7',
+          customerServicePlugin: 0,
+          triggeredContent: typeof params.robotLang === 'undefined' ? undefined : { language: params.robotLang }
+        }),
+      },
+    }, { onlineUserOnly: true });
+  }
 }