@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.2

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

@@ -0,0 +1,308 @@
+<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
+        v-if="isRenderedEmojiPicker"
+        ref="emojiPickerRef"
+        @insertEmoji="insertEmoji"
+        @dialogShowInH5="dialogShowInH5"
+        @dialogCloseInH5="dialogCloseInH5"
+        @changeToolbarDisplayType="(type) => emits('changeToolbarDisplayType', type)"
+      />
+      <ImageUpload
+        v-if="featureConfig.InputImage"
+        imageSourceType="album"
+      />
+      <FileUpload v-if="featureConfig.InputFile" />
+      <VideoUpload
+        v-if="featureConfig.InputVideo"
+        videoSourceType="album"
+      />
+      <Evaluate v-if="featureConfig.InputEvaluation" />
+      <Words v-if="featureConfig.InputQuickReplies" />
+      <template v-if="extensionListShowInStart[0]">
+        <ToolbarItemContainer
+          v-for="extension in extensionListShowInStart"
+          :key="extension.id"
+          :iconFile="genExtensionIcon(extension)"
+          :title="genExtensionText(extension)"
+          :iconWidth="isUniFrameWork ? '25px' : '20px'"
+          :iconHeight="isUniFrameWork ? '25px' : '20px'"
+          :needDialog="false"
+          @onIconClick="onExtensionClick(extension)"
+        />
+      </template>
+    </div>
+    <div
+      v-if="extensionListShowInEnd[0] && isPC"
+      :class="['message-input-toolbar-list-end']"
+    >
+      <ToolbarItemContainer
+        v-for="(extension, index) in extensionListShowInEnd"
+        :key="index"
+        :iconFile="genExtensionIcon(extension)"
+        :title="genExtensionText(extension)"
+        :iconWidth="isUniFrameWork ? '25px' : '20px'"
+        :iconHeight="isUniFrameWork ? '25px' : '20px'"
+        :needDialog="false"
+        @onIconClick="onExtensionClick(extension)"
+      />
+    </div>
+    <UserSelector
+      ref="userSelectorRef"
+      :type="selectorShowType"
+      :currentConversation="currentConversation"
+      :isGroup="isGroup"
+      @submit="onUserSelectorSubmit"
+      @cancel="onUserSelectorCancel"
+    />
+    <div
+      v-if="isH5"
+      ref="h5Dialog"
+      :class="['message-input-toolbar-h5-dialog']"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from '../../../adapter-vue';
+import TUIChatEngine, {
+  IConversationModel,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import TUICore, { ExtensionInfo, TUIConstants } from '@tencentcloud/tui-core';
+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 Evaluate from './evaluate/index.vue';
+import Words from './words/index.vue';
+import ToolbarItemContainer from './toolbar-item-container/index.vue';
+import UserSelector from './user-selector/index.vue';
+import { isPC, isH5, isUniFrameWork } from '../../../utils/env';
+import TUIChatConfig from '../config';
+import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus';
+import { ToolbarDisplayType } from '../../../interface';
+
+interface IProps {
+  displayType: ToolbarDisplayType;
+}
+interface IEmits {
+  (e: 'scrollToLatestMessage'): void;
+  (e: 'changeToolbarDisplayType', type: ToolbarDisplayType): void;
+  (e: 'insertEmoji', emoji: any): void;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  displayType: 'none',
+});
+
+const emits = defineEmits<IEmits>();
+const h5Dialog = ref<HTMLElement>();
+const currentConversation = ref<IConversationModel>();
+const isGroup = ref<boolean>(false);
+const selectorShowType = ref<string>('');
+const userSelectorRef = ref();
+const emojiPickerRef = ref<InstanceType<typeof EmojiPicker>>();
+const currentUserSelectorExtension = ref<ExtensionInfo>();
+const currentExtensionList = ref<ExtensionInfo[]>([]);
+const featureConfig = TUIChatConfig.getFeatureConfig();
+const isRenderedEmojiPicker = ref<boolean>(true);
+isRenderedEmojiPicker.value = featureConfig.InputEmoji || featureConfig.InputStickers;
+
+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');
+  }
+});
+
+const onCurrentConversationUpdate = (conversation: IConversationModel) => {
+  if (conversation?.conversationID && conversation.conversationID !== currentConversation.value?.conversationID) {
+    getExtensionList(conversation.conversationID);
+  }
+  currentConversation.value = conversation;
+  isGroup.value = currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_GROUP;
+};
+
+const getExtensionList = (conversationID: string) => {
+  if (!conversationID) {
+    return;
+  }
+  const chatType = TUIChatConfig.getChatType();
+  const params: Record<string, boolean | string> = { chatType };
+  // Backward compatibility: When callkit does not have chatType judgment, use filterVoice and filterVideo to filter
+  if (chatType === TUIConstants.TUIChat.TYPE.CUSTOMER_SERVICE) {
+    params.filterVoice = true;
+    params.filterVideo = true;
+    enableSampleTaskStatus('customerService');
+  }
+  currentExtensionList.value = [
+    ...TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, params),
+  ].filter((extension: ExtensionInfo) => {
+    if (extension?.data?.name === 'search') {
+      return featureConfig.MessageSearch;
+    }
+    return true;
+  });
+};
+
+const extensionListShowInStart = computed<ExtensionInfo[]>(() => {
+  if (isPC) {
+    const extensionList = currentExtensionList.value.filter((extension: ExtensionInfo) => extension?.data?.name !== 'search');
+    return extensionList;
+  }
+  return currentExtensionList.value;
+});
+
+const extensionListShowInEnd = computed<ExtensionInfo[]>(() => {
+  if (isPC) {
+    const searchExtension = currentExtensionList.value.find(extension => extension?.data?.name === 'search');
+    return searchExtension ? [searchExtension] : [];
+  }
+  return [];
+});
+
+// handle extensions onclick
+const onExtensionClick = (extension: ExtensionInfo) => {
+  switch (extension?.data?.name) {
+    case 'voiceCall':
+      onCallExtensionClicked(extension, 1);
+      break;
+    case 'videoCall':
+      onCallExtensionClicked(extension, 2);
+      break;
+    default:
+      (extension as any)?.listener?.onClicked(currentConversation.value?._conversation);
+      break;
+  }
+};
+
+const onCallExtensionClicked = (extension: ExtensionInfo, callType: number) => {
+  selectorShowType.value = extension?.data?.name;
+  if (currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_C2C) {
+    extension.listener?.onClicked?.({
+      userIDList: [currentConversation?.value?.conversationID?.slice(3)],
+      type: callType,
+    });
+  } else if (isGroup.value) {
+    currentUserSelectorExtension.value = extension;
+    userSelectorRef?.value?.toggleShow && userSelectorRef.value.toggleShow(true);
+  }
+};
+
+const genExtensionIcon = (extension: any) => {
+  return extension?.icon;
+};
+
+const genExtensionText = (extension: any) => {
+  return extension?.text;
+};
+
+const onUserSelectorSubmit = (selectedInfo: any) => {
+  currentUserSelectorExtension.value?.listener?.onClicked?.(selectedInfo);
+  currentUserSelectorExtension.value = undefined;
+};
+
+const onUserSelectorCancel = () => {
+  currentUserSelectorExtension.value = undefined;
+};
+
+const insertEmoji = (emojiObj: object) => {
+  emits('insertEmoji', emojiObj);
+};
+
+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 "../../../assets/styles/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/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/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: #ebf0f6;
+  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;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,138 @@
+<template>
+  <div
+    ref="toolbarItemRef"
+    :class="[
+      'toolbar-item-container',
+      !isPC && 'toolbar-item-container-h5',
+      isUniFrameWork && 'toolbar-item-container-uni',
+    ]"
+  >
+    <div
+      :class="[
+        'toolbar-item-container-icon',
+        isUniFrameWork && 'toolbar-item-container-uni-icon',
+      ]"
+      @click="toggleToolbarItem"
+    >
+      <Icon
+        :file="props.iconFile"
+        class="icon"
+        :width="props.iconWidth"
+        :height="props.iconHeight"
+      />
+    </div>
+    <div
+      v-if="isUniFrameWork"
+      :class="['toolbar-item-container-uni-title']"
+    >
+      {{ props.title }}
+    </div>
+    <div
+      v-show="showDialog"
+      ref="dialogRef"
+      :class="[
+        'toolbar-item-container-dialog',
+        isDark && 'toolbar-item-container-dialog-dark',
+        !isPC && 'toolbar-item-container-h5-dialog',
+        isUniFrameWork && 'toolbar-item-container-uni-dialog',
+      ]"
+    >
+      <BottomPopup
+        v-if="props.needBottomPopup && !isPC"
+        class="toolbar-bottom-popup"
+        :show="showDialog"
+        @touchmove.stop.prevent
+        @onClose="onPopupClose"
+      >
+        <slot />
+      </BottomPopup>
+      <slot v-else />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } 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 } from '../../../../utils/env';
+import TUIChatConfig from '../../config';
+
+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,
+  },
+});
+
+const emits = defineEmits(['onIconClick', 'onDialogClose', 'onDialogShow']);
+
+const isDark = ref(TUIChatConfig.getTheme() === 'dark');
+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/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/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/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/h5.scss

@@ -0,0 +1,7 @@
+.toolbar-item-container-h5 {
+  &-dialog {
+    position: static !important;
+    width: 100%;
+    box-shadow: none;
+  }
+}

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

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

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/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/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-input-toolbar/toolbar-item-container/style/web.scss

@@ -0,0 +1,24 @@
+.toolbar-item-container {
+  position: relative;
+
+  &-icon {
+    padding: 8px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  &-dialog {
+    z-index: 5;
+    position: absolute;
+    background: #fff;
+    box-shadow: 0 2px 4px -3px rgba(32, 77, 141, 0.03), 0 6px 10px 1px rgba(32, 77, 141, 0.06), 0 3px 14px 2px rgba(32, 77, 141, 0.05);
+    width: fit-content;
+    height: fit-content;
+    bottom: 35px;
+  }
+
+  &-dialog-dark {
+    background: #22262E;
+    box-shadow: 0 8px 40px 0 rgba(23, 25, 31, 0.6), 0 4px 12px 0 rgba(23, 25, 31, 0.8);
+  }
+}

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

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