@tencentcloud/ai-desk-customer-vue 0.1.0

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

@@ -0,0 +1,55 @@
+.emoji-picker {
+  width: 405px;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+
+  &-list {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    overflow-y: auto;
+    margin: 2px;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &-item {
+      cursor: pointer;
+      padding: 5px;
+
+      .emoji {
+        width: 30px;
+        height: 30px;
+      }
+
+      .emoji-big {
+        width: 70px;
+        height: 70px;
+      }
+    }
+  }
+
+  &-tab {
+    display: flex;
+    align-items: center;
+
+    &-item {
+      padding: 0 10px;
+      cursor: pointer;
+
+      .icon {
+        margin: 10px;
+        width: 20px;
+        height: 20px;
+
+        &-big {
+          margin: 2px 0;
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+  }
+}

package/components/CustomerServiceChat/message-input-toolbar/file-upload/index.ts

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

package/components/CustomerServiceChat/message-input-toolbar/file-upload/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <ToolbarItemContainer
+    :iconFile="isH5?fileIconH5:fileIcon"
+    title="文件"
+    :iconWidth="isUniFrameWork ? '32px' : '21px'"
+    :iconHeight="isUniFrameWork ? '25px' : '18px'"
+    :needDialog="false"
+    @onIconClick="onIconClick"
+  >
+    <div :class="['file-upload', !isPC && 'file-upload-h5']">
+      <input
+        ref="inputRef"
+        title="文件"
+        type="file"
+        data-type="file"
+        accept="*"
+        @change="sendFileMessage"
+      >
+    </div>
+  </ToolbarItemContainer>
+</template>
+<script lang="ts" setup>
+import {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+  SendMessageOptions,
+} from '@tencentcloud/chat-uikit-engine';
+import vue from '../../../../adapter-vue';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import fileIcon from '../../../../assets/files.png';
+import fileIconH5 from '../../../../assets/file-h5.png';
+import { isPC, isUniFrameWork,isH5 } from '../../../../utils/env';
+import { isEnabledMessageReadReceiptGlobal } from '../../../../utils/utils';
+const { ref } = vue;
+
+const inputRef = ref();
+const currentConversation = ref<IConversationModel>();
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const onIconClick = () => {
+  if (isUniFrameWork) {
+    return;
+  } else {
+    inputRef?.value?.click && inputRef?.value?.click();
+  }
+};
+
+const sendFileMessage = (e: any) => {
+  if (e?.target?.files?.length <= 0) {
+    return;
+  }
+  const options = {
+    to:
+      currentConversation?.value?.groupProfile?.groupID
+      || currentConversation?.value?.userProfile?.userID,
+    conversationType: currentConversation?.value?.type,
+    payload: {
+      file: e?.target,
+    },
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  } as SendMessageParams;
+  const sendMessageOptions: SendMessageOptions = {};
+  TUIChatService.sendFileMessage(options, sendMessageOptions);
+  e.target.value = '';
+};
+</script>
+<style lang="scss" scoped>
+@import "../../style/common";
+</style>

package/components/CustomerServiceChat/message-input-toolbar/image-upload/index.ts

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

package/components/CustomerServiceChat/message-input-toolbar/image-upload/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <ToolbarItemContainer
+    :iconFile="imageToolbarForShow.icon"
+    :title="imageToolbarForShow.title"
+    :iconWidth="isUniFrameWork ? '32px' : '21px'"
+    :iconHeight="isUniFrameWork ? '25px' : '18px'"
+    :needDialog="false"
+    @onIconClick="onIconClick"
+    :isH5ToolShow="isH5ToolShow"
+  >
+    <div
+      v-if="!isUniFrameWork"
+      :class="['image-upload', !isPC && 'image-upload-h5','image-video']"
+    >
+      <input
+        ref="inputRef"
+        title="图片"
+        type="file"
+        accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp,image/webp,video/mov,video/mp4"
+        @change="sendImageInWeb"
+      >
+    </div>
+  </ToolbarItemContainer>
+</template>
+<script lang="ts" setup>
+import {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+  SendMessageOptions,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import vue from '../../../../adapter-vue';
+import { isPC, isH5,isWeChat, isUniFrameWork } from '../../../../utils/env';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import imageIcon from '../../../../assets/image.png';
+import imageUniIcon from '../../../../assets/image-uni.png';
+import cameraUniIcon from '../../../../assets/camera-uni.png';
+import { isEnabledMessageReadReceiptGlobal } from '../../../../utils/utils';
+const { ref, computed } = vue;
+
+const props = defineProps({
+  // Image source: only valid for uni-app version, web version only supports selecting images from the album.
+  // album: Select from album
+  // camera: Take a photo using the camera
+  imageSourceType: {
+    type: String,
+    default: 'album',
+  },
+  isH5ToolShow:{
+    type:Boolean,
+    default:false,
+  }
+});
+
+const inputRef = ref();
+const currentConversation = ref<IConversationModel>();
+const IMAGE_TOOLBAR_SHOW_MAP = {
+  web_album: {
+    icon: imageIcon,
+    title: '图片',
+  },
+  uni_album: {
+    icon: imageUniIcon,
+    title: '图片',
+  },
+  uni_camera: {
+    icon: cameraUniIcon,
+    title: '拍照',
+  },
+};
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const imageToolbarForShow = computed((): { icon: string; title: string } => {
+  if (isUniFrameWork) {
+    return props.imageSourceType === 'camera'
+      ? IMAGE_TOOLBAR_SHOW_MAP['uni_camera']
+      : IMAGE_TOOLBAR_SHOW_MAP['uni_album'];
+  } else if(isH5){
+    return IMAGE_TOOLBAR_SHOW_MAP['uni_album'];
+  }
+  else {
+    return IMAGE_TOOLBAR_SHOW_MAP['web_album'];
+  }
+});
+
+const onIconClick = () => {
+  // uni-app send image
+  if (isUniFrameWork) {
+    if (isWeChat && TUIGlobal?.chooseMedia) {
+      TUIGlobal?.chooseMedia({
+        count: 1,
+        mediaType: ['image','video'],
+        sizeType: ['original', 'compressed'],
+        sourceType: [props.imageSourceType], // Use camera or select from album.
+        success: function (res: any) {
+          if(res.tempFiles[0].fileType == 'image'){
+            sendImageMessage(res);
+          } else if(res.tempFiles[0].fileType == 'video'){
+            sendVideoMessage(res);
+          }
+        },
+      });
+    } else {
+      // uni-app H5/App send image
+      TUIGlobal?.chooseImage({
+        count: 1,
+        sourceType: [props.imageSourceType], // Use camera or select from album.
+        success: function (res) {
+          sendImageMessage(res);
+        },
+      });
+    }
+  } else {
+    console.log("imageToolbarForShow.value.icon")
+    if (inputRef.value?.click) {
+      inputRef.value.click();
+    }
+  }
+};
+
+const sendImageInWeb = (e: any) => {
+  if (e?.target?.files?.length <= 0) {
+    return;
+  }
+  const file = e.target.files[0];
+  console.log("file")
+  console.log(file)
+    if (file.type.startsWith('image/')) {
+      // 处理图片文件
+      sendImageMessage(e?.target);
+    } else if (file.type.startsWith('video/')) {
+      // 处理视频文件
+      sendVideoMessage(e?.target);
+    }
+  
+  e.target.value = '';
+};
+
+const sendImageMessage = (files: any) => {
+  if (!files) {
+    return;
+  }
+  const options = {
+    to:
+      currentConversation?.value?.groupProfile?.groupID
+      || currentConversation?.value?.userProfile?.userID,
+    conversationType: currentConversation?.value?.type,
+    payload: {
+      file: files,
+    },
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  } as SendMessageParams;
+  const sendMessageOptions: SendMessageOptions = {};
+  TUIChatService.sendImageMessage(options, sendMessageOptions);
+};
+const sendVideoMessage = (file: any) => {
+  if (!file) {
+    return;
+  }
+  const options = {
+    to:
+      currentConversation?.value?.groupProfile?.groupID
+      || currentConversation?.value?.userProfile?.userID,
+    conversationType: currentConversation?.value?.type,
+    payload: {
+      file,
+    },
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  } as SendMessageParams;
+  const sendMessageOptions: SendMessageOptions = {};
+  TUIChatService.sendVideoMessage(options, sendMessageOptions);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../style/common";
+</style>

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

@@ -0,0 +1,191 @@
+<template>
+  <div
+    :class="[
+      'message-input-toolbar',
+      !isPC && 'message-input-toolbar-h5',
+      isUniFrameWork && 'message-input-toolbar-uni',
+    ]"
+  >
+    <div
+      :class="[
+        'message-input-toolbar-list',
+        !isPC && 'message-input-toolbar-h5-list',
+        isUniFrameWork && 'message-input-toolbar-uni-list',
+      ]"
+    >
+      <EmojiPicker
+        ref="emojiPickerRef"
+        @insertEmoji="insertEmoji"
+        @dialogShowInH5="dialogShowInH5"
+        @dialogCloseInH5="dialogCloseInH5"
+        @changeToolbarDisplayType="
+          (type) => emits('changeToolbarDisplayType', type)
+        "
+        :isH5EmojiShow="isH5EmojiShow"
+        @sendMessage="sendMessage"
+      />
+      <ImageUpload imageSourceType="album" :isH5ToolShow="isH5ToolShow"/>
+      <FileUpload :isH5ToolShow="isH5ToolShow"/>
+      <!-- <VideoUpload videoSourceType="album" /> -->
+    </div>
+    <div
+      v-if="isH5"
+      ref="h5Dialog"
+      :class="['message-input-toolbar-h5-dialog']"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import vue from '../../../adapter-vue';
+import TUIChatEngine, {
+  IConversationModel,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import EmojiPicker from './emoji-picker/index.vue';
+import ImageUpload from './image-upload/index.vue';
+import FileUpload from './file-upload/index.vue';
+import VideoUpload from './video-upload/index.vue';
+import { isPC, isH5, isUniFrameWork } from '../../../utils/env';
+import { ToolbarDisplayType } from '../../../interface';
+const { ref, onMounted, onUnmounted, watch } = vue;
+
+interface IProps {
+  displayType: ToolbarDisplayType;
+  isH5EmojiShow:boolean;
+  isH5ToolShow:boolean;
+}
+interface IEmits {
+  (e: 'scrollToLatestMessage'): void;
+  (e: 'changeToolbarDisplayType', type: ToolbarDisplayType): void;
+  (e: 'insertEmoji', emoji: any): void;
+  (e:'sendMessage'):void;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  displayType: 'none',
+  isH5EmojiShow:false,
+  isH5ToolShow:false,
+});
+
+const emits = defineEmits<IEmits>();
+const h5Dialog = ref<HTMLElement>();
+const currentConversation = ref<IConversationModel>();
+const isGroup = ref<boolean>(false);
+const emojiPickerRef = ref<InstanceType<typeof EmojiPicker>>();
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+watch(
+  () => props.displayType,
+  (newValue) => {
+    if (newValue === 'none') {
+      emojiPickerRef.value?.closeEmojiPicker();
+    } else {
+      emits('scrollToLatestMessage');
+    }
+  },
+);
+
+watch(
+  () => props.isH5EmojiShow,
+  (newValue) => {
+    if (newValue === false) {
+      emojiPickerRef.value?.closeEmojiPicker();
+    } 
+  },
+);
+
+const onCurrentConversationUpdate = (conversation: IConversationModel) => {
+  currentConversation.value = conversation;
+  isGroup.value
+    = currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_GROUP;
+};
+
+const insertEmoji = (emojiObj: object) => {
+  emits('insertEmoji', emojiObj);
+};
+
+const sendMessage = () =>{
+  emits('sendMessage');
+}
+
+const dialogShowInH5 = (dialogDom: any) => {
+  if (!isH5) {
+    return;
+  }
+  h5Dialog.value?.appendChild && h5Dialog.value?.appendChild(dialogDom);
+};
+
+const dialogCloseInH5 = (dialogDom: any) => {
+  if (!isH5) {
+    return;
+  }
+  if (dialogDom) {
+    h5Dialog.value?.removeChild && h5Dialog.value?.removeChild(dialogDom);
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "../style/common";
+
+.message-input-toolbar {
+  border-top: 1px solid #f4f5f9;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  &-list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .extension-list {
+      list-style: none;
+      display: flex;
+
+      &-item {
+        width: 20px;
+        height: 20px;
+        padding: 12px 10px 1px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.message-input-toolbar-h5 {
+  padding: 5px 10px;
+  box-sizing: border-box;
+  flex-direction: column;
+}
+
+.message-input-toolbar-uni {
+  background-color: #ebf0f6;
+  flex-direction: column;
+
+  &-list {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(4, 25%);
+    grid-template-rows: repeat(2, 100px);
+  }
+}
+</style>

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

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

package/components/CustomerServiceChat/message-input-toolbar/style/uni.scss

@@ -0,0 +1,111 @@
+/* stylelint-disable */
+.message-input-toolbar {
+  border-top: 1px solid #f4f5f9;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  z-index: 100;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  &-list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .extension-list {
+      list-style: none;
+      display: flex;
+
+      &-item {
+        width: 20px;
+        height: 20px;
+        padding: 12px 10px 1px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.message-input-toolbar-h5 {
+  padding: 5px 10px;
+  box-sizing: border-box;
+  flex-direction: column;
+}
+
+.message-input-toolbar-uni {
+  background-color: transparent;
+  flex-direction: column;
+  z-index: 100;
+
+  &-list {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(4, 25%);
+    grid-template-rows: repeat(2, 100px);
+  }
+}
+
+// uniapp swiper style
+wx-swiper .wx-swiper-wrapper,
+wx-swiper .wx-swiper-slides,
+wx-swiper .wx-swiper-slide-frame,
+.message-input-toolbar-list {
+  overflow: visible !important;
+}
+
+.message-input-toolbar {
+
+  .bottom-popup,
+  .bottom-popup-h5,
+  .bottom-popup-uni {
+    position: sticky !important;
+  }
+}
+
+.message-input-toolbar-swiper {
+  width: 100%;
+  height: 220px;
+
+  ::v-deep .uni-swiper-wrapper,
+  wx-swiper .wx-swiper-wrapper {
+    overflow: visible !important;
+
+    .uni-swiper-slides,
+    .wx-swiper-slides,
+    wx-swiper .wx-swiper-slides {
+      overflow: visible !important;
+
+      .uni-swiper-slide-frame,
+      .wx-swiper-slide-frame,
+      wx-swiper .wx-swiper-slide-frame {
+        overflow: visible !important;
+
+        .message-input-toolbar-list {
+          overflow: visible !important;
+        }
+
+        .toolbar-item-container-uni {
+          position: static !important;
+        }
+
+        .toolbar-item-container-dialog {
+          position: absolute !important;
+          background: transparent;
+          left: -10px;
+          bottom: -5px;
+
+          .bottom-popup-uni {
+            position: sticky !important;
+          }
+        }
+      }
+    }
+  }
+}