@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/CustomerServiceChat/message-input-toolbar/toolbar-item-container/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    ref="toolbarItemRef"
+    :class="[
+      'toolbar-item-container',
+      !isPC && 'toolbar-item-container-h5',
+      isUniFrameWork && 'toolbar-item-container-uni',
+    ]"
+  >
+    <div
+      v-if="isPC || (isH5 && !isH5Emoji && isH5ToolShow) || isUniFrameWork"
+      :class="[
+        'toolbar-item-container-icon',
+        isUniFrameWork && 'toolbar-item-container-uni-icon',
+        isH5 && 'toolbar-item-container-h5-icon'
+      ]"
+      @click="toggleToolbarItem"
+    >
+      <Icon
+        :file="props.iconFile"
+        class="icon"
+        :width="props.iconWidth"
+        :height="props.iconHeight"
+      />
+    </div>
+    <div
+      v-if="isUniFrameWork || (isH5 && !isH5Emoji && isH5ToolShow)"
+      :class="['toolbar-item-container-uni-title']"
+    >
+      {{ props.title }}
+    </div>
+    <div
+      v-show="showDialog || isH5EmojiShow"
+      ref="dialogRef"
+      :class="[
+        'toolbar-item-container-dialog',
+        !isPC && 'toolbar-item-container-h5-dialog',
+        isUniFrameWork && 'toolbar-item-container-uni-dialog',
+      ]"
+    >
+      <BottomPopup
+        v-if="props.needBottomPopup && !isPC"
+        class="toolbar-bottom-popup"
+        :show="showDialog || isH5EmojiShow"
+        @touchmove.stop.prevent
+        @onClose="onPopupClose"
+      >
+        <slot />
+      </BottomPopup>
+      <slot v-else />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+import { outsideClick } from '@tencentcloud/universal-api';
+import Icon from '../../../common/Icon.vue';
+import BottomPopup from '../../../common/BottomPopup/index.vue';
+import { isPC, isUniFrameWork,isH5 } from '../../../../utils/env';
+const { ref } = vue;
+
+const props = defineProps({
+  iconFile: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  needDialog: {
+    type: Boolean,
+    default: true,
+  },
+  iconWidth: {
+    type: String,
+    default: '20px',
+  },
+  iconHeight: {
+    type: String,
+    default: '20px',
+  },
+  // Whether to display the bottom popup dialog on mobile devices
+  // Invalid on PC
+  needBottomPopup: {
+    type: Boolean,
+    default: false,
+  },
+  isH5EmojiShow:{
+    type:Boolean,
+    default:false
+  },
+  isH5Emoji:{
+    type:Boolean,
+    default:false,
+  },
+  isH5ToolShow : {
+    type:Boolean,
+    default:false,
+  }
+});
+
+const emits = defineEmits(['onIconClick', 'onDialogClose', 'onDialogShow']);
+
+const showDialog = ref(false);
+const toolbarItemRef = ref();
+const dialogRef = ref();
+const toggleToolbarItem = () => {
+  emits('onIconClick', dialogRef);
+  if (isPC) {
+    outsideClick.listen({
+      domRefs: toolbarItemRef.value,
+      handler: closeToolbarItem,
+    });
+  }
+  if (!props.needDialog) {
+    return;
+  }
+  toggleDialogDisplay(!showDialog.value);
+};
+
+const closeToolbarItem = () => {
+  showDialog.value = false;
+  emits('onDialogClose', dialogRef);
+};
+
+const toggleDialogDisplay = (showStatus: boolean) => {
+  if (showDialog.value === showStatus) {
+    return;
+  }
+  showDialog.value = showStatus;
+  switch (showStatus) {
+    case true:
+      emits('onDialogShow', dialogRef);
+      break;
+    case false:
+      emits('onDialogClose', dialogRef);
+  }
+};
+
+const onPopupClose = () => {
+  showDialog.value = false;
+};
+
+defineExpose({
+  toggleDialogDisplay,
+});
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>

package/components/CustomerServiceChat/message-input-toolbar/toolbar-item-container/style/color.scss

@@ -0,0 +1,6 @@
+.toolbar-item-container {
+  &-dialog {
+    background: #fff;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+}

package/components/CustomerServiceChat/message-input-toolbar/toolbar-item-container/style/h5.scss

@@ -0,0 +1,20 @@
+.toolbar-item-container-h5 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-right:15px;
+  &-title {
+    margin-top:5px;
+  }
+  &-icon{
+    background-color: #fff;
+    padding:20px;
+    border-radius: 10px;
+  }
+  &-dialog {
+    position: static !important;
+    width: 100%;
+    box-shadow: none;
+  }
+}

package/components/CustomerServiceChat/message-input-toolbar/toolbar-item-container/style/index.scss

@@ -0,0 +1,5 @@
+@import "../../../style/common";
+@import "./color";
+@import "./web";
+@import "./h5";
+@import "./uni";

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

@@ -0,0 +1,36 @@
+.toolbar-item-container-uni {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: static;
+
+  &-icon {
+    background: #fff;
+    border-radius: 15px;
+    width: 60px;
+    height: 60px;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-title {
+    font-size: 14px;
+    color: #8F959D;
+  }
+
+  &-dialog{
+    position: absolute !important;
+    background: transparent;
+    left: -10px;
+    bottom: -5px;
+
+    .toolbar-bottom-popup{
+      position: sticky;
+    }
+  }
+}

package/components/CustomerServiceChat/message-input-toolbar/toolbar-item-container/style/web.scss

@@ -0,0 +1,19 @@
+.toolbar-item-container {
+  position: relative;
+
+  &-icon {
+    padding: 10px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  &-dialog {
+    z-index: 5;
+    position: absolute;
+    background: #fff;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    width: fit-content;
+    height: fit-content;
+    bottom: 35px;
+  }
+}

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

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

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

@@ -0,0 +1,146 @@
+<template>
+  <ToolbarItemContainer
+    :iconFile="handleIcon()"
+    :title="handleTitle()"
+    :needDialog="false"
+    :iconWidth="isUniFrameWork ? '32px' : '21px'"
+    :iconHeight="
+      isUniFrameWork
+        ? props.videoSourceType === 'album'
+          ? '20px'
+          : '25px'
+        : '18px'
+    "
+    @onIconClick="onIconClick"
+  >
+    <div :class="['video-upload', !isPC && 'video-upload-h5']">
+      <input
+        ref="inputRef"
+        title="视频"
+        type="file"
+        data-type="video"
+        accept="video/*"
+        @change="sendVideoInWeb"
+      >
+    </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, isWeChat, isUniFrameWork } from '../../../../utils/env';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import videoIcon from '../../../../assets/video.png';
+import videoUniIcon from '../../../../assets/video-uni.png';
+import cameraUniIcon from '../../../../assets/camera-uni.png';
+import { isEnabledMessageReadReceiptGlobal } from '../../../../utils/utils';
+const { ref } = vue;
+
+const props = defineProps({
+  // Video source, only valid for uni-app version, web version only supports selecting videos from files
+  // album: Select from files
+  // camera: Take a video using the camera
+  videoSourceType: {
+    type: String,
+    default: 'album',
+  },
+});
+
+const inputRef = ref();
+const currentConversation = ref<IConversationModel>();
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const handleIcon = (): string => {
+  if (isUniFrameWork) {
+    switch (props.videoSourceType) {
+      case 'album':
+        return videoUniIcon;
+      case 'camera':
+        return cameraUniIcon;
+      default:
+        return videoUniIcon;
+    }
+  } else {
+    return videoIcon;
+  }
+};
+
+const handleTitle = (): string => {
+  if (isUniFrameWork && props.videoSourceType === 'camera') {
+    return '录制';
+  } else {
+    return '视频';
+  }
+};
+
+const onIconClick = () => {
+  // uni-app send video
+  if (isUniFrameWork) {
+    if (isWeChat && TUIGlobal?.chooseMedia) {
+      TUIGlobal?.chooseMedia({
+        mediaType: ['video'],
+        count: 1,
+        sourceType: [props.videoSourceType],
+        maxDuration: 60,
+        success: function (res: any) {
+          sendVideoMessage(res);
+        },
+      });
+    } else {
+      TUIGlobal?.chooseVideo({
+        count: 1,
+        sourceType: [props.videoSourceType],
+        compressed: false,
+        success: function (res: any) {
+          sendVideoMessage(res);
+        },
+      });
+    }
+  } else {
+    inputRef?.value?.click && inputRef?.value?.click();
+  }
+};
+
+const sendVideoInWeb = (e: any) => {
+  if (e?.target?.files?.length <= 0) {
+    return;
+  }
+  sendVideoMessage(e?.target);
+  e.target.value = '';
+};
+
+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>