@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/CustomerServiceChat/index-web.vue

@@ -0,0 +1,250 @@
+<template>
+  <div :class="['tui-chat', !isPC && 'tui-chat-h5']">
+    <div
+      v-if="currentConversationID"
+      :class="['tui-chat', !isPC && 'tui-chat-h5']"
+    >
+      <ChatHeader
+        :class="[
+          'tui-chat-header',
+          !isPC && 'tui-chat-H5-header',
+          isUniFrameWork && 'tui-chat-uniapp-header',
+        ]"
+        :canCloseChat="props.canCloseChat"
+        @closeChat="closeChat"
+      />
+      <MessageList
+        ref="messageListRef"
+        :class="['tui-chat-message-list', !isPC && 'tui-chat-h5-message-list']"
+        @handleEditor="handleEditor"
+        @closeInputToolBar="() => changeToolbarDisplayType('none')"
+      />
+      <MessageInputToolbar
+        v-if="isInputToolbarShow"
+        :class="[
+          'tui-chat-message-input-toolbar',
+          !isPC && 'tui-chat-h5-message-input-toolbar',
+          isUniFrameWork && 'tui-chat-uni-message-input-toolbar',
+        ]"
+        :displayType="inputToolbarDisplayType"
+        @insertEmoji="insertEmoji"
+        @changeToolbarDisplayType="changeToolbarDisplayType"
+        @scrollToLatestMessage="scrollToLatestMessage"
+      />
+      <MessageInput
+        ref="messageInputRef"
+        :class="[
+          'tui-chat-message-input',
+          !isPC && 'tui-chat-h5-message-input',
+          isUniFrameWork && 'tui-chat-uni-message-input',
+          isWeChat && 'tui-chat-wx-message-input',
+        ]"
+        :isMuted="false"
+        :muteText="TUITranslateService.t('TUIChat.您已被管理员禁言')"
+        :placeholder="TUITranslateService.t('TUIChat.请输入消息')"
+        :inputToolbarDisplayType="inputToolbarDisplayType"
+        @changeToolbarDisplayType="changeToolbarDisplayType"
+        @emojiShow="emojiShow"
+        @toolShow="toolShow"
+        @blurToolAndEmojiH5="blurToolAndEmojiH5"
+      />
+      <div class="input-toolbar-h5">
+        <div :class="['emoji-dialog-h5',(toolShowH5 && !emojiOpen)?'tool-dialog-h5':'']">
+          <div v-if="emojiOpen">
+            <EmojiDialog
+              @insertEmoji="insertEmoji"
+               @sendMessage="sendMessage"
+            />
+          </div>
+          <MessageInputToolbar
+            v-if="!isPC"
+            :class="[
+              'tui-chat-message-input-toolbar',
+              !isPC && 'tui-chat-h5-message-input-toolbar',
+              isUniFrameWork && 'tui-chat-uni-message-input-toolbar',
+            ]"
+            :isH5ToolShow="toolShowH5"
+            :displayType="inputToolbarDisplayType"
+            @insertEmoji="insertEmoji"
+            @changeToolbarDisplayType="changeToolbarDisplayType"
+            @scrollToLatestMessage="scrollToLatestMessage"
+            @sendMessage="sendMessage"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import vue from '../../adapter-vue';
+import {
+  TUITranslateService,
+  TUIConversationService,
+  TUIStore,
+  StoreName,
+  IMessageModel,
+  TUIChatEngine
+} from '@tencentcloud/chat-uikit-engine';
+import TUICore, { TUIConstants, TUILogin } from '@tencentcloud/tui-core';
+import ChatHeader from './chat-header/index-web.vue';
+import MessageList from './message-list/index-web.vue';
+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 ,isWeChat, isUniFrameWork } from '../../utils/env';
+import { ToolbarDisplayType } from '../../interface';
+
+
+const { ref, onMounted, onUnmounted, computed } = vue;
+
+interface IProps {
+  canCloseChat?: boolean;
+  SDKAppID?:number;
+  userID?:string;
+  userSig?:string;
+}
+
+const emits = defineEmits(['closeChat']);
+
+const currentConversationID = ref();
+const inputToolbarDisplayType = ref<ToolbarDisplayType>('none');
+const messageInputRef = ref();
+const messageListRef = ref<InstanceType<typeof MessageList>>();
+const emojiOpen = ref(false);
+const toolShowH5 = ref(false);
+const props = withDefaults(defineProps<IProps>(), {
+  canCloseChat: true,
+  SDKAppID: 0,
+  userID: '',
+  userSig: '',
+});
+
+const loginCustomerUIKit = () => {
+  TUIChatEngine.login({
+    SDKAppID: props.SDKAppID as number,
+    userID: props.userID,
+    userSig: props.userSig,
+    useUploadPlugin: true,
+  }).then(() => {
+    console.log("ai-desk-customer login success");
+    let conversationID = 'C2C@customer_service_account';
+    TUIConversationService.switchConversation(conversationID);
+  }).catch((error) => {
+    console.log(error);
+  })
+}
+
+try {
+  const userContext = TUILogin.getContext();
+  if(userContext.userID == '' && props.SDKAppID!==0 && props.userID!=='' && props.userSig!==''){
+    loginCustomerUIKit();
+  }
+} catch (e) {
+  console.log(e)
+}
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdate,
+  });
+});
+
+const isInputToolbarShow = computed<boolean>(() => {
+  return (isUniFrameWork || isH5) ? inputToolbarDisplayType.value !== 'none' : true;
+});
+
+const reset = () => {
+  TUIConversationService.switchConversation('');
+};
+
+const closeChat = (conversationID: string) => {
+  emits('closeChat', conversationID);
+  reset();
+};
+
+const insertEmoji = (emojiObj: object) => {
+  messageInputRef.value?.insertEmoji(emojiObj);
+};
+const sendMessage = () => {
+  messageInputRef.value?.sendMessage();
+}
+
+const handleEditor = (message: IMessageModel, type: string) => {
+  if (!message || !type) return;
+  switch (type) {
+    case 'reference':
+      // todo
+      break;
+    case 'reply':
+      // todo
+      break;
+    case 'reedit':
+      if (message?.payload?.text) {
+        messageInputRef?.value?.reEdit(message?.payload?.text);
+      }
+      break;
+    default:
+      break;
+  }
+};
+
+function changeToolbarDisplayType(type: ToolbarDisplayType) {
+  inputToolbarDisplayType.value
+    = inputToolbarDisplayType.value === type ? 'none' : type;
+  if (inputToolbarDisplayType.value !== 'none' && isUniFrameWork) {
+    uni.$emit('scroll-to-bottom');
+  }
+}
+
+function scrollToLatestMessage() {
+  messageListRef.value?.scrollToLatestMessage();
+}
+
+function onCurrentConversationIDUpdate(conversationID: string) {
+  if (currentConversationID.value === conversationID) {
+    return;
+  }
+
+  currentConversationID.value = conversationID;
+
+  // The TUICustomerServicePlugin plugin determines if the current conversation is a customer service conversation, then sets chatType and activates the conversation.
+  TUICore.callService({
+    serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
+    method: TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION,
+    params: { conversationID: conversationID },
+  });
+}
+
+function emojiShow(){
+  if(toolShowH5.value === true){
+    toolShowH5.value = false;
+  }
+  emojiOpen.value = !emojiOpen.value;
+
+}
+
+function toolShow(){
+  if(emojiOpen.value === true){
+    emojiOpen.value = false;
+  }
+  toolShowH5.value = !toolShowH5.value;
+}
+
+function blurToolAndEmojiH5(){
+  if(emojiOpen.value === true){
+    emojiOpen.value = false;
+  }
+  toolShowH5.value = false;
+
+}
+</script>
+
+<style scoped lang="scss" src="./style/index.scss">
+
+</style>

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

@@ -0,0 +1,214 @@
+<template>
+  <div class="message-input-wrapper">
+    <MessageInputQuote />
+    <div
+      :class="[
+        'message-input-container',
+        !isPC && 'message-input-container-h5',
+      ]"
+    >
+      <MessageInputEditor
+        ref="editor"
+        :placeholder="props.placeholder"
+        :isMuted="props.isMuted"
+        :muteText="props.muteText"
+        :enableInput="props.enableInput"
+        :enableTyping="props.enableTyping"
+        :enableDragUpload="props.enableDragUpload"
+        @sendMessage="sendMessage"
+        @onTyping="onTyping"
+        @blurToolAndEmojiH5="blurToolAndEmojiH5"
+      />
+      <MessageInputButton
+        v-if="!props.isMuted && isPC"
+        @sendMessage="sendMessage"
+      />
+      <div v-if="isH5" class="emoji-icon" id="emoji-icon-h5" @click="emojiShow">
+        <Icon :file="emojiIcon" width="20px" height="20px"/>
+      </div>
+      <div v-if="isH5" class="tool-icon" @click="toolShow">
+        <Icon :file="toolIcon" width="20px" height="20px"/>
+      </div>
+      <div v-if="isH5" class="send-btn-h5" @click="sendMessage">
+        发送
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  TUIStore,
+  StoreName,
+  IConversationModel,
+} from '@tencentcloud/chat-uikit-engine';
+import vue from '../../../adapter-vue';
+import MessageInputEditor from './message-input-editor-web.vue';
+import MessageInputButton from './message-input-button.vue';
+import MessageInputQuote from './message-input-quote/index.vue';
+import { sendMessages, sendTyping } from '../utils/sendMessage';
+import { transformTextWithEmojiNamesToKeys } from '../emoji-config';
+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';
+const { ref,onMounted,onBeforeUnmount } = vue;
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: 'this is placeholder',
+  },
+  isMuted: {
+    type: Boolean,
+    default: true,
+  },
+  muteText: {
+    type: String,
+    default: '',
+  },
+  enableInput: {
+    type: Boolean,
+    default: true,
+  },
+  enableDragUpload: {
+    type: Boolean,
+    default: true,
+  },
+  enableTyping: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['sendMessage', 'resetReplyOrReference', 'onTyping','scrollToLatestMessage','changeToolbarDisplayType','insertEmoji','emojiShow','toolShow','blurToolAndEmojiH5']);
+const editor = ref<InstanceType<typeof MessageInputEditor>>();
+const currentConversation = ref<IConversationModel>();
+const h5Dialog = ref<HTMLElement>();
+
+onMounted(() => {
+  // document.addEventListener('click', handleClick);
+})
+
+onBeforeUnmount(() => {
+  // document.removeEventListener('click', handleClick);
+})
+
+function handleClick(e: any) {
+  var div = document.getElementById('emoji-icon-h5'); // 替换为你的 div 元素的 ID
+    var targetElement = e.target;
+
+    if (div!=null && targetElement!=null && !div.contains(targetElement instanceof Node ? targetElement : null)) {
+      // 在这里执行你想要触发的函数
+      emit('blurToolAndEmojiH5');
+    }
+}
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
+  sendTyping(inputContentEmpty, inputBlur);
+};
+
+const sendMessage = async () => {
+  const _editorContentList = editor.value?.getEditorContent();
+  if (!_editorContentList || !currentConversation.value) return;
+  const editorContentList = _editorContentList.map((editor: any) => {
+    if (editor.type === 'text') {
+      editor.payload.text = transformTextWithEmojiNamesToKeys(
+        editor.payload.text,
+      );
+    }
+    return editor;
+  });
+  await sendMessages(editorContentList, currentConversation.value);
+  emit('sendMessage');
+  editor.value?.resetEditor();
+};
+
+const insertEmoji = (emoji: any) => {
+  editor.value?.addEmoji(emoji);
+};
+
+const reEdit = (content: any) => {
+  editor.value?.resetEditor();
+  editor.value?.setEditorContent(content);
+};
+
+
+const emojiShow = () => {
+  emit('emojiShow');
+}
+
+const toolShow = () => {
+  emit('toolShow');
+}
+
+const blurToolAndEmojiH5 = () =>{
+  emit('blurToolAndEmojiH5');
+}
+
+defineExpose({
+  insertEmoji,
+  reEdit,
+  sendMessage,
+});
+</script>
+
+<style scoped lang="scss">
+@import "../style/common";
+
+.message-input-wrapper {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.message-input-container {
+  box-sizing: border-box;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border: none;
+  overflow: hidden;
+}
+
+.message-input-container-h5 {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-end;
+}
+.emoji-icon {
+  background: #fff;
+    border-radius: 0 9.4px 9.4px 0;
+    padding: 9.4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.tool-icon {
+  background: #fff;
+  margin-left: 4px;
+    border-radius: 9.4px;
+    padding: 9.4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.input-tool-dialog{
+  height: fit-content;
+    background: #fff;
+}
+.send-btn-h5 {
+  background-color: #1c66e5;
+    color: #fff;
+    padding: 10px 12px;
+    margin-left: 5px;
+    border-radius: 7px;
+}
+</style>

package/components/CustomerServiceChat/message-input/index.ts

@@ -0,0 +1,2 @@
+import MessageInput from './index.vue';
+export default MessageInput;

package/components/CustomerServiceChat/message-input/message-input-button.vue

@@ -0,0 +1,95 @@
+<template>
+  <div :class="['message-input-button', !isPC && 'message-input-button-h5']">
+    <button
+      v-if="props.enableSend"
+      class="message-input-button-cont"
+      data-type="text"
+      :disabled="false"
+      @click="sendMessage"
+    >
+      <p class="message-input-button-hover">
+        {{ TUITranslateService.t("TUIChat.按Enter发送，Ctrl+Enter换行") }}
+      </p>
+      {{ TUITranslateService.t("发送") }}
+    </button>
+  </div>
+</template>
+<script setup lang="ts">
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { isPC } from '../../../utils/env';
+
+const props = defineProps({
+  enableSend: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emits = defineEmits(['sendMessage']);
+
+const sendMessage = () => {
+  emits('sendMessage');
+};
+</script>
+<style scoped lang="scss">
+@import "../style/common";
+
+.message-input-button {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+
+  &-h5 {
+    position: static;
+  }
+
+  &-cont {
+    padding: 8px 20px;
+    border-radius: 4px;
+    border: none;
+    font-size: 14px;
+    text-align: center;
+    line-height: 20px;
+    font-weight: 400;
+    background: #1c66e5;
+    color: #fff;
+    letter-spacing: 0;
+    cursor: pointer;
+  }
+
+  &-hover {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: 120%;
+    word-break: keep-all;
+    height: 30px;
+    white-space: nowrap;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    padding: 5px 10px;
+    border-radius: 3px;
+    background: #000;
+    color: #fff;
+    opacity: 0.3;
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      right: -20px;
+      border: 10px solid transparent;
+      border-left: 10px solid #000;
+    }
+  }
+
+  &:hover {
+    .message-input-button-hover {
+      display: flex;
+    }
+  }
+}
+</style>