@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/CustomerServiceChat/message-input/message-input-file-web.ts

@@ -0,0 +1,38 @@
+import Image from '@tiptap/extension-image';
+
+export default Image.extend({
+  name: 'custom-image',
+
+  addAttributes() {
+    return {
+      ...(Image.config as any).addAttributes(),
+      class: {
+        default: 'image',
+        rendered: false,
+      },
+    };
+  },
+
+  addCommands() {
+    return {
+      setImage: options => ({ tr, commands }) => {
+        if ((tr.selection as any)?.node?.type?.name == 'custom-image') {
+          return commands.updateAttributes('custom-image', options);
+        } else {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options,
+          });
+        }
+      },
+    };
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    HTMLAttributes.class = (node.attrs.class?.includes('custom-image-') ? '' : 'custom-image-') + node.attrs.class;
+    return [
+      'img',
+      HTMLAttributes,
+    ];
+  },
+});

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

@@ -0,0 +1,204 @@
+<template>
+  <div
+    v-if="Boolean(quoteMessage) && props.displayType !== 'audio'"
+    :class="{
+      'input-quote-container': true,
+      // 'input-quote-container-uni': isUniFrameWork,
+      'input-quote-container-h5': isH5 || isUniFrameWork,
+    }"
+  >
+    <div :class="(!isPC) ? 'input-quote-content-h5' :'input-quote-content'">
+      <div>
+          <div v-if="isUniFrameWork" class="input-quote-sender-h5">
+          {{ quoteMessage.nick || quoteMessage.from }}
+        </div>
+        <div class="max-one-line">
+          {{ isUniFrameWork? quoteContentText : (quoteMessage.nick || quoteMessage.from)+ ': ' + quoteContentText  }}
+        </div>
+      </div>
+        <Icon
+          class="input-quote-close-icon"
+          :file="closeIcon"
+          width="11px"
+          height="11px"
+          @onClick="cancelQuote"
+        />
+
+      
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import vue from '../../../../adapter-vue';
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  IMessageModel,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../common/Icon.vue';
+import closeIcon from '../../../../assets/close-quote-icon.svg';
+import { isPC,isH5, isUniFrameWork } from '../../../../utils/env';
+import { transformTextWithKeysToEmojiNames } from '../../emoji-config';
+import { InputDisplayType } from '../../../../interface';
+const { ref, computed, onMounted, onUnmounted } = vue;
+
+interface IProps {
+  displayType?: InputDisplayType;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  displayType: 'editor',
+});
+
+const TYPES = TUIChatEngine.TYPES;
+const quoteMessage = ref<IMessageModel>();
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CHAT, {
+    quoteMessage: onQuoteMessageUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CHAT, {
+    quoteMessage: onQuoteMessageUpdated,
+  });
+});
+
+const quoteContentText = computed(() => {
+  let _quoteContentText;
+  switch (quoteMessage.value?.type) {
+    case TYPES.MSG_TEXT:
+      _quoteContentText = transformTextWithKeysToEmojiNames(
+        quoteMessage.value.payload?.text,
+      );
+      break;
+    case TYPES.MSG_IMAGE:
+      _quoteContentText = TUITranslateService.t('TUIChat.图片');
+      break;
+    case TYPES.MSG_AUDIO:
+      _quoteContentText = TUITranslateService.t('TUIChat.语音');
+      break;
+    case TYPES.MSG_VIDEO:
+      _quoteContentText = TUITranslateService.t('TUIChat.视频');
+      break;
+    case TYPES.MSG_FILE:
+      _quoteContentText = TUITranslateService.t('TUIChat.文件');
+      break;
+    case TYPES.MSG_CUSTOM:
+      _quoteContentText = TUITranslateService.t('TUIChat.自定义');
+      break;
+    case TYPES.MSG_FACE:
+      _quoteContentText = TUITranslateService.t('TUIChat.表情');
+      break;
+    case TYPES.MSG_MERGER:
+      _quoteContentText = TUITranslateService.t('TUIChat.聊天记录');
+      break;
+    default:
+      _quoteContentText = TUITranslateService.t('TUIChat.消息');
+      break;
+  }
+  return _quoteContentText;
+});
+
+function cancelQuote() {
+  TUIStore.update(StoreName.CHAT, 'quoteMessage', {
+    message: undefined,
+    type: 'quote',
+  });
+}
+
+function onQuoteMessageUpdated(options?: {
+  message: IMessageModel;
+  type: string;
+}) {
+  if (options?.message && options?.type === 'quote') {
+    quoteMessage.value = options.message;
+  } else {
+    quoteMessage.value = undefined;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+%common-container-style {
+  margin: 5px 100px 5px 8px;
+  display: flex;
+  flex: 0 1 auto;
+
+  .input-quote-content {
+    display: flex;
+    flex: 0 1 auto;
+    background-color: #fafafa;
+    border-radius: 8px;
+    padding: 12px;
+    font-size: 12px;
+    align-items: center;
+    line-height: 16px;
+    max-width: 100%;
+    box-sizing: border-box;
+    min-width: 0;
+
+    .max-one-line {
+      flex: 0 1 auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-family: PingFangSC-Regular;
+    }
+  }
+  .input-quote-content-h5 {
+    display: flex;
+    justify-content: space-between;
+    background-color: #fafafa;
+    padding: 12px;
+    font-size: 12px;
+    align-items: center;
+    line-height: 16px;
+    max-width: 100%;
+    box-sizing: border-box;
+    width:100%;
+
+    .max-one-line {
+      flex: 0 1 auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-family: PingFangSC-Regular;
+    }
+
+    .input-quote-sender-h5 {
+      font-size: 10px;
+      color:#00000080;
+      font-family: PingFangSC-Regular;
+    }
+  }
+
+  .input-quote-close-icon {
+    
+  }
+}
+
+.input-quote-container {
+  @extend %common-container-style;
+
+  max-width: 500px;
+}
+
+.input-quote-container-uni {
+  @extend %common-container-style;
+
+  width: fit-content;
+  max-width: 250px;
+  margin: 5px 60px 0 30px;
+}
+
+.input-quote-container-h5 {
+  @extend %common-container-style;
+  width:100%;
+  // max-width: 250px;
+  margin: 5px 0 5px 0;
+}
+</style>

package/components/CustomerServiceChat/message-input-toolbar/emoji-dialog-mobile/emoji-dialog-mobile.vue

@@ -0,0 +1,145 @@
+<template>
+
+    <div class="emojiDialog">
+        <ul ref="emojiPickerListRef" class="emojiDialogList">
+            <li
+                v-for="(childrenItem, childrenIndex) in currentEmojiList"
+                :key="childrenIndex"
+                class="emojiDialogList-item"
+                @click="select(childrenItem, childrenIndex)"
+            >
+                <img
+                    v-if="currentTabItem.type === EMOJI_TYPE.BASIC"
+                    class="emoji"
+                    :src="currentTabItem.url + BASIC_EMOJI_URL_MAPPING[childrenItem]"
+                    >
+            </li>
+        </ul>
+        <div class="sendButtonContainer">
+            <div class="sendButton" @click="sendMessage">
+                发送
+            </div>
+        </div>
+    </div>
+    
+</template>
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+import { IEmojiGroupList, IEmojiGroup } from '../../../../interface';
+const { ref, onMounted, onUnmounted } = vue;
+import {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+} from '@tencentcloud/chat-uikit-engine';
+import {
+  EMOJI_GROUP_LIST,
+  BASIC_EMOJI_URL_MAPPING,
+  convertKeyToEmojiName,
+} from '../../emoji-config';
+import { EMOJI_TYPE } from '.././../../../constant';
+import { isPC, isUniFrameWork,isH5 } from '../../../../utils/env';
+
+const emits = defineEmits(['insertEmoji', 'onClose', 'sendMessage']);
+const list = ref<IEmojiGroupList>(initEmojiList());
+const currentConversation = ref();
+const emojiPickerListRef = ref();
+const currentTabIndex = ref<number>(0);
+const currentEmojiList = ref<string[]>(list?.value[0]?.list);
+    const currentTabItem = ref<IEmojiGroup>(list?.value[0]);
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+const select = (item: any, index: number) => {
+  const options: any = {
+    emoji: { key: item, name: convertKeyToEmojiName(item) },
+    type: currentTabItem?.value?.type,
+  };
+  switch (currentTabItem?.value?.type) {
+    case EMOJI_TYPE.BASIC:
+      options.url = currentTabItem?.value?.url + BASIC_EMOJI_URL_MAPPING[item];
+      if (isUniFrameWork) {
+        uni.$emit('insert-emoji', options);
+      } else {
+        emits('insertEmoji', options);
+      }
+      break;
+    case EMOJI_TYPE.BIG:
+    //   sendFaceMessage(index, currentTabItem.value);
+      break;
+    case EMOJI_TYPE.CUSTOM:
+    //   sendFaceMessage(index, currentTabItem.value);
+      break;
+    default:
+      break;
+  }
+  isPC && emits('onClose');
+};
+
+function sendMessage(){
+    emits('sendMessage');
+}
+
+function onCurrentConversationUpdate(conversation: IConversationModel) {
+  currentConversation.value = conversation;
+}
+
+function initEmojiList() {
+  return EMOJI_GROUP_LIST;
+}
+</script>
+<style lang="scss" scoped>
+.emojiDialog {
+    height: 25vh;
+    position:relative;
+    .emojiDialogList {
+        width: 100%;
+        display:flex;
+        flex-wrap: wrap;
+        overflow-y: auto;
+        margin:2px;
+        justify-content: space-between;
+        .emojiDialogList-item {
+            cursor: pointer;
+            padding: 5px;
+            .emoji {
+                width: 30px;
+        height: 30px;
+            }
+        }
+    }
+    .emojiDialogList::after{
+        content: "";
+        display: block;
+        flex: 1 1 auto;
+    }
+}
+.sendButtonContainer {
+    display:flex;
+    justify-content: flex-end;
+    width: 100%;
+    height: 45px;
+    margin-top:5px;
+    .sendButton {
+        background-color: #1C66E5;
+        color: white;
+        border-radius: 5px;
+        margin-right: 10px;
+        align-self: center;
+        padding: 5px 10px;
+    }
+    
+}
+</style>

package/components/CustomerServiceChat/message-input-toolbar/emoji-picker/emoji-picker-dialog.vue

@@ -0,0 +1,180 @@
+<template>
+  <div
+    ref="emojiPickerDialog"
+    :class="{
+      'emoji-picker': true,
+      'emoji-picker-h5': !isPC,
+    }"
+  >
+    <ul
+      ref="emojiPickerListRef"
+      :class="['emoji-picker-list', !isPC && 'emoji-picker-h5-list']"
+    >
+      <li
+        v-for="(childrenItem, childrenIndex) in currentEmojiList"
+        :key="childrenIndex"
+        class="emoji-picker-list-item"
+        @click="select(childrenItem, childrenIndex)"
+      >
+        <img
+          v-if="currentTabItem.type === EMOJI_TYPE.BASIC"
+          class="emoji"
+          :src="currentTabItem.url + BASIC_EMOJI_URL_MAPPING[childrenItem]"
+        >
+        <img
+          v-else-if="currentTabItem.type === EMOJI_TYPE.BIG"
+          class="emoji-big"
+          :src="currentTabItem.url + childrenItem + '@2x.png'"
+        >
+        <img
+          v-else
+          class="emoji-custom emoji-big"
+          :src="currentTabItem.url + childrenItem"
+        >
+      </li>
+    </ul>
+    <ul class="emoji-picker-tab">
+      <li
+        v-for="(item, index) in list"
+        :key="index"
+        class="emoji-picker-tab-item"
+        @click="toggleEmojiTab(index)"
+      >
+        <Icon
+          v-if="item.type === EMOJI_TYPE.BASIC"
+          class="icon"
+          :file="faceIcon"
+        />
+        <img
+          v-else-if="item.type === EMOJI_TYPE.BIG"
+          class="icon-big"
+          :src="item.url + item.list[0] + '@2x.png'"
+        >
+        <img
+          v-else
+          class="icon-custom icon-big"
+          :src="item.url + item.list[0]"
+        >
+      </li>
+      <li
+        v-if="isUniFrameWork || isH5"
+        class="send-btn"
+        @click="sendMessage"
+      >
+        发送
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+import {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../common/Icon.vue';
+import faceIcon from '../../../../assets/face.png';
+import { EMOJI_TYPE } from '.././../../../constant';
+import { isPC, isUniFrameWork,isH5 } from '../../../../utils/env';
+import { IEmojiGroupList, IEmojiGroup } from '../../../../interface';
+import { isEnabledMessageReadReceiptGlobal } from '../../../../utils/utils';
+import {
+  EMOJI_GROUP_LIST,
+  BASIC_EMOJI_URL_MAPPING,
+  convertKeyToEmojiName,
+} from '../../emoji-config';
+const { ref, onMounted, onUnmounted } = vue;
+
+const emits = defineEmits(['insertEmoji', 'onClose', 'sendMessage']);
+const currentTabIndex = ref<number>(0);
+const currentConversation = ref();
+const emojiPickerDialog = ref();
+const emojiPickerListRef = ref();
+const list = ref<IEmojiGroupList>(initEmojiList());
+const currentTabItem = ref<IEmojiGroup>(list?.value[0]);
+const currentEmojiList = ref<string[]>(list?.value[0]?.list);
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+const toggleEmojiTab = (index: number) => {
+  currentTabIndex.value = index;
+  currentTabItem.value = list?.value[index];
+  currentEmojiList.value = list?.value[index]?.list;
+  // web & h5 side scroll to top
+  if (!isUniFrameWork) {
+    emojiPickerListRef?.value && (emojiPickerListRef.value.scrollTop = 0);
+  }
+};
+
+const select = (item: any, index: number) => {
+  const options: any = {
+    emoji: { key: item, name: convertKeyToEmojiName(item) },
+    type: currentTabItem?.value?.type,
+  };
+  switch (currentTabItem?.value?.type) {
+    case EMOJI_TYPE.BASIC:
+      options.url = currentTabItem?.value?.url + BASIC_EMOJI_URL_MAPPING[item];
+      if (isUniFrameWork) {
+        uni.$emit('insert-emoji', options);
+      } else {
+        emits('insertEmoji', options);
+      }
+      break;
+    case EMOJI_TYPE.BIG:
+      sendFaceMessage(index, currentTabItem.value);
+      break;
+    case EMOJI_TYPE.CUSTOM:
+      sendFaceMessage(index, currentTabItem.value);
+      break;
+    default:
+      break;
+  }
+  isPC && emits('onClose');
+};
+
+const sendFaceMessage = (index: number, listItem: IEmojiGroup) => {
+  const options = {
+    to:
+      currentConversation?.value?.groupProfile?.groupID
+      || currentConversation?.value?.userProfile?.userID,
+    conversationType: currentConversation?.value?.type,
+    payload: {
+      index: listItem.emojiGroupID,
+      data: listItem.list[index],
+    },
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  } as SendMessageParams;
+  TUIChatService.sendFaceMessage(options);
+};
+
+function sendMessage() {
+  if (isUniFrameWork) {
+    uni.$emit('send-message-in-emoji-picker');
+  }else{
+    emits('sendMessage');
+  }
+}
+
+function onCurrentConversationUpdate(conversation: IConversationModel) {
+  currentConversation.value = conversation;
+}
+
+function initEmojiList() {
+  return EMOJI_GROUP_LIST;
+}
+</script>
+
+<style lang="scss" scoped src="./style/index.scss"></style>

package/components/CustomerServiceChat/message-input-toolbar/emoji-picker/index.ts

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

package/components/CustomerServiceChat/message-input-toolbar/emoji-picker/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <ToolbarItemContainer
+    ref="container"
+    :iconFile="faceIcon"
+    title="表情"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
+    :isH5EmojiShow="props.isH5EmojiShow"
+    :isH5Emoji="isH5"
+  >
+    <EmojiPickerDialog
+      @insertEmoji="insertEmoji"
+      @sendMessage="sendMessage"
+      @onClose="onClose"
+    />
+  </ToolbarItemContainer>
+</template>
+<script lang="ts" setup>
+import {
+  TUIStore,
+  StoreName,
+  IConversationModel,
+} from '@tencentcloud/chat-uikit-engine';
+import vue from '../../../../adapter-vue';
+import faceIcon from '../../../../assets/face.png';
+import EmojiPickerDialog from './emoji-picker-dialog.vue';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import { isH5 } from '../../../../utils/env';
+import { ToolbarDisplayType } from '../../../../interface';
+const { ref } = vue;
+
+interface IProps {
+  isH5EmojiShow:boolean;
+}
+
+interface IEmits {
+  (e: 'sendMessage'): void;
+  (e: 'toggleComponent'): void;
+  (e: 'insertEmoji', emoji: any): void;
+  (e: 'dialogShowInH5', dialogRef: HTMLElement): void;
+  (e: 'dialogCloseInH5', dialogRef: HTMLElement): void;
+  (e: 'changeToolbarDisplayType', type: ToolbarDisplayType): void;
+}
+
+const emits = defineEmits<IEmits>();
+const currentConversation = ref();
+const container = ref<InstanceType<typeof ToolbarItemContainer>>();
+
+const props = withDefaults(defineProps<IProps>(), {
+  isH5EmojiShow: false,
+});
+
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const onDialogShow = (dialogRef: any) => {
+  if (!isH5) {
+    return;
+  }
+  emits('changeToolbarDisplayType', 'emojiPicker');
+  emits('dialogShowInH5', dialogRef.value);
+};
+
+const onDialogClose = (dialogRef: any) => {
+  if (!isH5) {
+    return;
+  }
+  emits('changeToolbarDisplayType', 'none');
+  emits('dialogCloseInH5', dialogRef.value);
+};
+
+const insertEmoji = (emojiObj) => {
+  emits('insertEmoji', emojiObj);
+};
+const sendMessage = () => {
+  emits('sendMessage');
+};
+const onClose = () => {
+  container.value?.toggleDialogDisplay(false);
+};
+
+defineExpose({
+  closeEmojiPicker: onClose,
+});
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>

package/components/CustomerServiceChat/message-input-toolbar/emoji-picker/style/h5.scss

@@ -0,0 +1,26 @@
+.emoji-picker-h5 {
+  width: 100%;
+
+  &-list {
+    justify-content: space-between;
+  }
+
+  &-list::after {
+    content: "";
+    display: block;
+    flex: 1 1 auto;
+  }
+
+  .send-btn {
+    width: 50px;
+    height: 30px;
+    background-color: #1c66e5;
+    border-radius: 5px;
+    position: absolute;
+    right: 10px;
+    font-size: 14px;
+    color: #fff;
+    text-align: center;
+    line-height: 30px;
+  }
+}

package/components/CustomerServiceChat/message-input-toolbar/emoji-picker/style/index.scss

@@ -0,0 +1,4 @@
+@import "../../../style/common";
+@import "./web";
+@import "./h5";
+