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

package/CHANGELOG.md

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

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-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/package.json

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

package/server.ts

@@ -12,22 +12,33 @@ import TUIChatEngine, {
   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 {
   private isLoggedIn: boolean;
   static instance: TUICustomerServer;
   private customerServiceAccounts: any[];
   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'];
     this.isLoggedIn = false;
     this.loggedInUserID = '';
+    this.myProfile = {};
   }
 
   static getInstance(): TUICustomerServer {
@@ -61,12 +72,8 @@ export default class TUICustomerServer {
       })
   }
 
-  /**
-   * init
-   */
   public init(SDKAppID:number, userID:string, userSig:string) {
     Log.l(`TUICustomerServer.init version:${version} SDKAppID:${SDKAppID} userID:${userID} isLoggedIn:${this.isLoggedIn} loggedInUserID:${this.loggedInUserID}`);
-    // Backward compatibility, the new version executes the init operation by default in index.ts
     if (this.isLoggedIn) {
       if (this.loggedInUserID === userID) {
         return;
@@ -76,11 +83,23 @@ export default class TUICustomerServer {
         this.loginCustomerUIKit(SDKAppID, userID, userSig);
       });
     } else {
-      // Execute call server when native plugin TUICallKit exists
       this.loginCustomerUIKit(SDKAppID, userID, userSig);
     }
   }
 
+  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();
   }
@@ -140,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 });
+  }
 }