@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.3

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-input-toolbar/evaluate/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <ToolbarItemContainer
+    ref="container"
+    :iconFile="evaluateIcon"
+    title="评价"
+    :needBottomPopup="true"
+    :iconWidth="isUniFrameWork ? '26px' : '20px'"
+    :iconHeight="isUniFrameWork ? '26px' : '20px'"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
+  >
+    <div :class="['evaluate', !isPC && 'evaluate-h5']">
+      <div :class="['evaluate-header', !isPC && 'evaluate-h5-header']">
+        <div
+          :class="[
+            'evaluate-header-content',
+            !isPC && 'evaluate-h5-header-content',
+          ]"
+        >
+          {{ TUITranslateService.t("Evaluate.请对本次服务进行评价") }}
+        </div>
+        <div
+          v-if="!isPC"
+          :class="[
+            'evaluate-header-close',
+            !isPC && 'evaluate-h5-header-close',
+          ]"
+          @click.stop="closeDialog"
+        >
+          {{ TUITranslateService.t("关闭") }}
+        </div>
+      </div>
+      <div :class="['evaluate-content', !isPC && 'evaluate-h5-content']">
+        <ul
+          :class="[
+            'evaluate-content-list',
+            !isPC && 'evaluate-h5-content-list',
+          ]"
+        >
+          <li
+            v-for="(item, index) in starList"
+            :key="index"
+            :class="[
+              'evaluate-content-list-item',
+              !isPC && 'evaluate-h5-content-list-item',
+            ]"
+            @click.stop="selectStar(index)"
+          >
+            <Icon
+              v-if="index <= currentStarIndex"
+              :file="starLightIcon"
+              :width="isPC ? '20px' : '30px'"
+              :height="isPC ? '20px' : '30px'"
+            />
+            <Icon
+              v-else
+              :file="starIcon"
+              :width="isPC ? '20px' : '30px'"
+              :height="isPC ? '20px' : '30px'"
+            />
+          </li>
+        </ul>
+        <textarea
+          v-model="comment"
+          :class="[
+            'evaluate-content-text',
+            !isPC && 'evaluate-h5-content-text',
+          ]"
+        />
+        <div
+          :class="[
+            'evaluate-content-button',
+            !isPC && 'evaluate-h5-content-button',
+          ]"
+        >
+          <button
+            :class="['btn', isEvaluateValid ? 'btn-valid' : 'btn-invalid']"
+            @click="submitEvaluate"
+          >
+            {{ TUITranslateService.t("Evaluate.提交评价") }}
+          </button>
+        </div>
+      </div>
+      <div :class="['evaluate-adv', !isPC && 'evaluate-h5-adv']">
+        {{ TUITranslateService.t("Evaluate.服务评价工具") }}
+        {{ "(" + TUITranslateService.t("Evaluate.使用") }}
+        <a @click="openLink(Link.customMessage)">
+          {{ TUITranslateService.t(`Evaluate.${Link.customMessage.label}`) }}
+        </a>
+        {{ TUITranslateService.t("Evaluate.搭建") + ")" }}
+      </div>
+    </div>
+  </ToolbarItemContainer>
+</template>
+<script setup lang="ts">
+import TUIChatEngine, {
+  TUITranslateService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  TUIChatService,
+  SendMessageParams,
+  SendMessageOptions,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref, computed } from '../../../../adapter-vue';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import evaluateIconLight from '../../../../assets/icon/evalute-light.svg';
+import evaluateIconDark from '../../../../assets/icon/evalute-dark.svg';
+import Link from '../../../../utils/documentLink';
+import Icon from '../../../common/Icon.vue';
+import starIcon from '../../../../assets/icon/star.png';
+import starLightIcon from '../../../../assets/icon/star-light.png';
+import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
+import { isPC, isH5, isUniFrameWork } from '../../../../utils/env';
+import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
+import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
+import TUIChatConfig from '../../config';
+
+const evaluateIcon = TUIChatConfig.getTheme() === 'dark' ? evaluateIconDark : evaluateIconLight;
+const props = defineProps({
+  starTotal: {
+    type: Number,
+    default: 5,
+  },
+});
+const emits = defineEmits(['onDialogPopupShowOrHide']);
+
+const container = ref();
+
+const starList = ref<number>(props.starTotal);
+const currentStarIndex = ref<number>(-1);
+const comment = ref('');
+const currentConversation = ref<IConversationModel>();
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const isEvaluateValid = computed(() => comment.value.length || currentStarIndex.value >= 0);
+
+const onDialogShow = () => {
+  emits('onDialogPopupShowOrHide', true);
+};
+
+const onDialogClose = () => {
+  resetEvaluate();
+  emits('onDialogPopupShowOrHide', false);
+};
+
+const openLink = () => {
+  if (isPC || isH5) {
+    window.open(Link?.customMessage?.url);
+  }
+};
+
+const closeDialog = () => {
+  container?.value?.toggleDialogDisplay(false);
+};
+
+const resetEvaluate = () => {
+  currentStarIndex.value = -1;
+  comment.value = '';
+};
+
+const selectStar = (starIndex?: any) => {
+  if (currentStarIndex.value === starIndex) {
+    currentStarIndex.value = currentStarIndex.value - 1;
+  } else {
+    currentStarIndex.value = starIndex;
+  }
+};
+
+const submitEvaluate = () => {
+  // The evaluate message must have at least one star or comment to be submitted.
+  if (currentStarIndex.value < 0 && !comment.value.length) {
+    return;
+  }
+  const payload = {
+    data: JSON.stringify({
+      businessID: CHAT_MSG_CUSTOM_TYPE.EVALUATE,
+      version: 1,
+      score: currentStarIndex.value + 1,
+      comment: comment.value,
+    }),
+    description: '对本次的服务评价',
+    extension: '对本次的服务评价',
+  };
+  const options = {
+    to:
+      currentConversation?.value?.groupProfile?.groupID
+      || currentConversation?.value?.userProfile?.userID,
+    conversationType: currentConversation?.value?.type,
+    payload,
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  };
+  const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+    conversation: currentConversation.value,
+    payload: options.payload,
+    messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
+  };
+  const sendMessageOptions: SendMessageOptions = {
+    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+  };
+  TUIChatService.sendCustomMessage(options as SendMessageParams, sendMessageOptions);
+  // close dialog after submit evaluate
+  container?.value?.toggleDialogDisplay(false);
+};
+</script>
+<style scoped lang="scss" src="./style/index.scss"></style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-input-toolbar/evaluate/style/color.scss

@@ -0,0 +1,57 @@
+.evaluate {
+  background: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+  &-header {
+    &-content {
+      font-weight: 500;
+      color: #1c1c1c;
+    }
+  }
+
+  &-adv {
+    font-weight: 500;
+    color: #999;
+
+    a {
+      color: #006eff;
+    }
+  }
+
+  &-content {
+    &-text {
+      background: #f8f8f8;
+      border: 1px solid #ececec;
+    }
+
+    &-list {
+      &-item {
+        font-weight: 400;
+        color: #50545c;
+      }
+    }
+  }
+
+  &-H5 {
+    &-main {
+      background: rgba(0, 0, 0, 0.5);
+
+      .evaluate-main-content {
+        background: #fff;
+
+        p {
+          a {
+            color: #3370ff;
+          }
+        }
+
+        .close {
+          font-family: PingFangSC-Regular;
+          font-weight: 400;
+          color: #3370ff;
+          letter-spacing: 0;
+        }
+      }
+    }
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-input-toolbar/evaluate/style/h5.scss

@@ -0,0 +1,63 @@
+.evaluate-h5 {
+  position: static;
+  width: 100%;
+  height: fit-content;
+  border-radius: 0;
+  background: #fff;
+  padding: 23px !important;
+  box-sizing: border-box;
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+
+    &-content {
+      font-size: 18px;
+    }
+
+    &-close {
+      font-size: 18px;
+      line-height: 27px;
+      font-weight: 400;
+      color: #3370ff;
+    }
+  }
+
+  &-content {
+    order: 1;
+
+    &-list {
+      &-item {
+        width: 40px;
+        height: 24px;
+        text-align: center;
+        cursor: auto;
+        font-size: 12px;
+      }
+    }
+
+    &-text {
+      font-size: 16px;
+      width: 100%;
+    }
+
+    &-button {
+      width: 100%;
+      display: flex;
+
+      .btn {
+        flex: 1;
+        padding: 14px 0;
+        font-size: 18px;
+        cursor: auto;
+      }
+    }
+  }
+
+  &-adv {
+    font-size: 14px;
+    font-weight: normal;
+    text-align: left;
+    color: #000;
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-input-toolbar/evaluate/style/index.scss

@@ -0,0 +1,4 @@
+@import "./color";
+@import "./web";
+@import "./h5";
+@import "../../../../../assets/styles/common";

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-input-toolbar/evaluate/style/web.scss

@@ -0,0 +1,93 @@
+.evaluate {
+  position: absolute;
+  z-index: 5;
+  width: 315px;
+  top: -255px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  background: url("https://web.sdk.qcloud.com/im/assets/images/login-background.png") no-repeat;
+  background-color: #fff;
+  background-size: cover;
+  background-position-x: 128px;
+  background-position-y: 77px;
+  user-select: none;
+
+  &-header {
+    &-content {
+      font-style: normal;
+      font-size: 12px;
+      line-height: 17px;
+      text-align: center;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 0;
+
+    &-list {
+      flex: 1;
+      display: flex;
+
+      &-item {
+        width: 24px;
+        height: 24px;
+        text-align: center;
+        cursor: pointer;
+        padding: 4px 0;
+        font-size: 12px;
+        padding-right: 15px;
+
+        &:last-child {
+          padding-right: 0 !important;
+        }
+      }
+    }
+
+    &-text {
+      box-sizing: border-box;
+      width: 288px;
+      height: 90px;
+      margin: 12px 0;
+      padding: 12px;
+      border-radius: 2px;
+      resize: none;
+    }
+
+    &-button {
+      .btn {
+        border: none;
+        border-radius: 5px;
+        font-size: 12px;
+        text-align: center;
+        line-height: 24px;
+        padding: 2px 46px;
+        font-weight: 400;
+        color: #fff;
+      }
+
+      .btn-valid {
+        background-color: #3370ff;
+        cursor: pointer;
+      }
+
+      .btn-invalid{
+        background-color: rgb(160, 207, 255);
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-adv {
+    font-size: 12px;
+    text-align: center;
+
+    a {
+      display: inline-block;
+    }
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-input-toolbar/file-upload/index.ts

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

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-input-toolbar/file-upload/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <ToolbarItemContainer
+    :iconFile="fileIcon"
+    title="文件"
+    :iconWidth="isUniFrameWork ? '32px' : '20px'"
+    :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 TUIChatEngine, {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+  SendMessageOptions,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref } from '../../../../adapter-vue';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import fileIconLight from '../../../../assets/icon/file-light.svg';
+import fileIconDark from '../../../../assets/icon/file-dark.svg';
+import { isPC, isUniFrameWork } from '../../../../utils/env';
+import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
+import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
+import TUIChatConfig from '../../config';
+
+const fileIcon = TUIChatConfig.getTheme() === 'dark' ? fileIconDark : fileIconLight;
+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 offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+    conversation: currentConversation.value,
+    payload: options.payload,
+    messageType: TUIChatEngine.TYPES.MSG_FILE,
+  };
+  const sendMessageOptions: SendMessageOptions = {
+    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+  };
+  TUIChatService.sendFileMessage(options, sendMessageOptions);
+  e.target.value = '';
+};
+</script>
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+</style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-input-toolbar/image-upload/index.ts

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

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-input-toolbar/image-upload/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <ToolbarItemContainer
+    :iconFile="imageToolbarForShow.icon"
+    :title="imageToolbarForShow.title"
+    :iconWidth="isUniFrameWork ? '32px' : '20px'"
+    :iconHeight="isUniFrameWork ? '25px' : '18px'"
+    :needDialog="false"
+    @onIconClick="onIconClick"
+  >
+    <div
+      v-if="!isUniFrameWork"
+      :class="['image-upload', !isPC && 'image-upload-h5']"
+    >
+      <input
+        ref="inputRef"
+        title="图片"
+        type="file"
+        data-type="image"
+        accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp,image/webp"
+        @change="sendImageInWeb"
+      >
+    </div>
+  </ToolbarItemContainer>
+</template>
+<script lang="ts" setup>
+import TUIChatEngine, {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+  SendMessageOptions,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { ref, computed } from '../../../../adapter-vue';
+import { isPC, isWeChat, isUniFrameWork } from '../../../../utils/env';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import imageIconLight from '../../../../assets/icon/image-light.svg';
+import imageIconDark from '../../../../assets/icon/image-dark.svg';
+import imageUniIcon from '../../../../assets/icon/image-uni.png';
+import cameraUniIcon from '../../../../assets/icon/camera-uni.png';
+import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
+import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
+import TUIChatConfig from '../../config';
+
+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',
+  },
+});
+
+const inputRef = ref();
+const currentConversation = ref<IConversationModel>();
+const theme = TUIChatConfig.getTheme();
+const IMAGE_TOOLBAR_SHOW_MAP = {
+  web_album: {
+    icon: theme === 'dark' ? imageIconDark : imageIconLight,
+    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 {
+    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'],
+        sizeType: ['original', 'compressed'],
+        sourceType: [props.imageSourceType], // Use camera or select from album.
+        success: function (res: any) {
+          sendImageMessage(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 {
+    if (inputRef.value?.click) {
+      inputRef.value.click();
+    }
+  }
+};
+
+const sendImageInWeb = (e: any) => {
+  if (e?.target?.files?.length <= 0) {
+    return;
+  }
+  sendImageMessage(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 offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+    conversation: currentConversation.value,
+    payload: options.payload,
+    messageType: TUIChatEngine.TYPES.MSG_IMAGE,
+  };
+  const sendMessageOptions: SendMessageOptions = {
+    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+  };
+  TUIChatService.sendImageMessage(options, sendMessageOptions);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+</style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-input-toolbar/index.ts

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