@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.3

package/src/TUIRoom/components/Chat/ChatKit/plugins/plugin-components/message-plugin-layout.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="message-plugin">
+    <!-- The following is displayed in the form of messageTip -->
+    <div
+      v-if="props.showStyle === 'tip'"
+      class="message-plugin-tip"
+    >
+      <slot name="messageTip" />
+    </div>
+    <!-- The following is displayed in the form of messageBubble -->
+    <div
+      v-else-if="props.showStyle === 'bubble'"
+      class="message-plugin-bubble-content"
+      @longpress="handleToggleMessageItem($event, messageModel, true)"
+      @click.prevent.right="handleToggleMessageItem($event, messageModel)"
+      @touchstart="handleH5LongPress($event, messageModel, 'touchstart')"
+      @touchend="handleH5LongPress($event, messageModel, 'touchend')"
+      @mouseover="handleH5LongPress($event, messageModel, 'touchend')"
+    >
+      <MessageBubble
+        :messageItem="messageModel"
+        :content="messageModel.getMessageContent()"
+        :blinkMessageIDList="props.blinkMessageIDList"
+        :classNameList="props.bubbleClassNameList"
+        @resendMessage="resendMessage(messageModel)"
+      >
+        <!-- web message-bubble is a named slot, content area slotName is messageElement -->
+        <template #messageElement>
+          <slot
+            v-if="!isUniFrameWork"
+            name="messageBubble"
+          />
+        </template>
+        <!-- uni-app message-bubble is an anonymous slot, no slotName -->
+        <slot
+          v-if="isUniFrameWork"
+          name="messageBubble"
+        />
+      </MessageBubble>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from '../../adapter-vue';
+import { TUIStore, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import MessageBubble from '../../components/TUIChat/message-list/message-elements/message-bubble.vue';
+import { isUniFrameWork } from '../../utils/env';
+
+interface IProps {
+  message: IMessageModel;
+  showStyle: string;
+  bubbleClassNameList?: string[];
+  blinkMessageIDList?: string[];
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+  showStyle: '',
+  bubbleClassNameList: () => [] as string[],
+  blinkMessageIDList: () => [] as string[],
+});
+
+const emits = defineEmits(['resendMessage', 'handleToggleMessageItem', 'handleH5LongPress']);
+const messageModel = computed(() => TUIStore.getMessageModel(props.message?.ID));
+
+// The following is for external interaction such as messageTool, no special processing is required, do not change
+const resendMessage = (message: IMessageModel) => {
+  emits('resendMessage', message);
+};
+const handleToggleMessageItem = (e: any, message: IMessageModel, isLongpress = false) => {
+  emits('handleToggleMessageItem', e, message, isLongpress);
+};
+const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
+  emits('handleH5LongPress', e, message, type);
+};
+</script>
+
+<style lang="scss" scoped>
+.message-plugin-tip {
+  color: #999;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+  display: flex;
+  place-content: center center;
+  align-items: center;
+  text-align: center;
+  margin: 0 10px 10px;
+}
+
+.message-tip-highlight {
+  animation: highlight 1000ms infinite;
+
+  @keyframes highlight {
+    50% {
+      color: #ff9c19;
+    }
+  }
+
+  @keyframes highlight {
+    50% {
+      color: #ff9c19;
+    }
+  }
+}
+
+:deep(.message-bubble-room) {
+  .message-bubble-main-content {
+    .message-body {
+      .message-body-main {
+        .message-body-content {
+          &.content-in,
+          &.content-out {
+            background-color: transparent;
+            border-radius: 0;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/TUIRoom/components/Chat/ChatKit/plugins/plugin-components/message-plugin.vue

@@ -0,0 +1,106 @@
+<template>
+  <MessagePluginLayout
+    :message="props.message"
+    :showStyle="pluginMessageType.showStyle"
+    :bubbleClassNameList="[pluginMessageType.pluginType === 'room' ? 'message-bubble-room':'']"
+    @resendMessage="resendMessage"
+    @handleToggleMessageItem="handleToggleMessageItem"
+    @handleH5LongPress="handleH5LongPress"
+  >
+    <template #messageTip>
+      <MessageCallGroup
+        :message="props.message"
+        :signalingInfo="messageSignalingInfo"
+        :customContent="messageCustomContent"
+        :blinkMessageIDList="props.blinkMessageIDList"
+      />
+    </template>
+    <template #messageBubble>
+      <MessageCallC2C
+        v-if="pluginMessageType.pluginType === 'call'"
+        :message="props.message"
+        :signalingInfo="messageSignalingInfo"
+        :customContent="messageCustomContent"
+      />
+      <MessageCustomerService
+        v-if="pluginMessageType.pluginType === 'customer'"
+        :message="props.message"
+      />
+      <MessageRoom
+        v-if="pluginMessageType.pluginType === 'room'"
+        :message="props.message"
+      />
+    </template>
+  </MessagePluginLayout>
+</template>
+
+<script lang="ts" setup>
+import { computed } from '../../adapter-vue';
+import { TUIStore } from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+// import {
+//   isCustomerServicePluginMessage,
+//   isCustomServiceMessageInvisible,
+// } from './message-customer/index';
+import { isCallMessage, isRoomCardMessage } from './index';
+import MessagePluginLayout from './message-plugin-layout.vue';
+import MessageCallGroup from './message-call/message-call-group.vue';
+import MessageCallC2C from './message-call/message-call-c2c.vue';
+import MessageCustomerService from './message-customer/message-customer-service.vue';
+// If TUIRoom is not integrated, please introduce the following path
+import MessageRoom from './message-room/message-room-default.vue';
+// After integrating TUIRoom, please comment the above path and open the following path to import
+// import MessageRoom from './message-room/message-room.vue';
+
+interface IProps {
+  message: IMessageModel;
+  blinkMessageIDList?: string[];
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+  blinkMessageIDList: () => [] as string[],
+});
+
+const emits = defineEmits(['resendMessage', 'handleToggleMessageItem', 'handleH5LongPress']);
+const messageModel = computed(() => TUIStore.getMessageModel(props.message.ID));
+const messageSignalingInfo = computed(() => messageModel?.value?.getSignalingInfo());
+const messageCustomContent = computed(() => messageModel?.value?.getMessageContent());
+
+const pluginMessageType = computed<{ pluginType: string; showStyle: string }>(() => {
+  let typeObj = { pluginType: '', showStyle: '' };
+  if (isCallMessage(messageModel.value)) {
+    typeObj = {
+      pluginType: 'call',
+      showStyle:
+        messageModel.value?.conversationType === TUIChatEngine.TYPES.CONV_GROUP ? 'tip' : 'bubble',
+    };
+  } else if (isRoomCardMessage(messageModel.value)) {
+    typeObj = {
+      pluginType: 'room',
+      showStyle: 'bubble',
+    };
+  // } else if (isCustomerServicePluginMessage(messageModel.value)) {
+  //   typeObj = {
+  //     pluginType: 'customer',
+  //     showStyle: isCustomServiceMessageInvisible(messageModel.value) ? '' : 'bubble',
+  //   };
+  }
+  return typeObj;
+});
+
+// The following are for external interaction such as messageTool, no special processing is required, please do not touch
+const resendMessage = (message: IMessageModel) => {
+  emits('resendMessage', message);
+};
+const handleToggleMessageItem = (e: any, message: IMessageModel, isLongpress = false) => {
+  emits('handleToggleMessageItem', e, message, isLongpress);
+};
+const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
+  emits('handleH5LongPress', e, message, type);
+};
+</script>
+
+<style lang="scss" scoped>
+/* stylelint-disable-next-line no-empty-source */
+</style>

package/src/TUIRoom/components/Chat/ChatKit/plugins/plugin-components/message-room/message-room-default.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    :class="[
+      'room-default',
+      isUniFrameWork && 'room-default-uni',
+      props.message.flow === 'in' ? 'room-default-in' : 'room-default-out',
+    ]"
+  >
+    {{ TUITranslateService.t("message.custom.自定义消息") }}
+  </div>
+</template>
+<script setup lang="ts">
+import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { isUniFrameWork } from '../../../utils/env';
+
+interface IProps {
+  message: IMessageModel;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+</script>
+<style lang="scss" scoped>
+.room-default {
+  padding: 12px;
+  font-size: 14px;
+
+  &-uni{
+    padding: 0;
+  }
+
+  &-in {
+    background: #fbfbfb;
+    border-radius: 0 10px;
+  }
+
+  &-out {
+    background: #dceafd;
+    border-radius: 10px 0 10px 10px;
+  }
+}
+</style>

package/src/TUIRoom/components/Chat/ChatKit/plugins/plugin-components/message-room/message-room.vue

@@ -0,0 +1,19 @@
+<!-- eslint-disable vue/valid-template-root -->
+<template>
+  <RoomMessageCard :message="props.message" />
+</template>
+<script setup lang="ts">
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { RoomMessageCard } from '@tencentcloud/roomkit-web-vue3';
+
+interface IProps {
+  message: IMessageModel;
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+</script>
+<style lang="scss" scoped>
+/* stylelint-disable-next-line no-empty-source */
+</style>

package/src/TUIRoom/components/Chat/ChatKit/server.ts

@@ -0,0 +1,173 @@
+import TUICore, { TUILogin, TUIConstants } from '@tencentcloud/tui-core';
+import TUIChatEngine, { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { ITUIComponents, ITUIPlugins } from './interface';
+import { isFunction, isObject } from './utils';
+import { isApp } from './utils/env';
+import CallkitPluginServer from './plugins/extension-server/callkit';
+// #ifndef MP-WEIXIN
+import TUILocales from './locales';
+// #endif
+export default class TUIChatKit {
+  static isInitialized: boolean;
+  public chat: any;
+
+  public SDKAppID: number;
+  public TUICore: any;
+  public TUIChatEngine: any;
+  public TUIGlobal: any;
+  public TUIComponents: ITUIComponents = {};
+  public TUIPlugins: ITUIPlugins = {};
+
+  constructor() {
+    this.TUICore = TUICore;
+    this.TUIChatEngine = TUIChatEngine;
+    this.TUIGlobal = TUIGlobal;
+    this.SDKAppID = 0;
+    this.TUIGlobal._isTIMCallKit = true;
+    TUICore.registerEvent(TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED, TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS, this);
+    TUICore.registerEvent(TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED, TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS, this);
+    // register translate and voiceToText service event tracking
+    TUICore.registerService(TUIConstants.TUITranslatePlugin.SERVICE.NAME, 1);
+    TUICore.registerService(TUIConstants.TUIVoiceToTextPlugin.SERVICE.NAME, 1);
+  }
+
+  /**
+   * Listen for the success notification of TUILogin.login
+   */
+  public onNotifyEvent(eventName: string, subKey: string, params?: Record<string, any>) {
+    if (eventName === TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS:
+          this.login();
+          break;
+      }
+    }
+    if (eventName === TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS:
+          if (params?.language) {
+            TUITranslateService.changeLanguage(params.language);
+          }
+          break;
+      }
+    }
+  }
+
+  /**
+   * init
+   */
+  public init() {
+    // Backward compatibility, the new version executes the init operation by default in index.ts
+    if (TUIChatKit.isInitialized) {
+      return;
+    }
+    TUIChatKit.isInitialized = true;
+    // Execute call server when native plugin TUICallKit exists
+    if (isApp) {
+      new CallkitPluginServer();
+    }
+    // TUITranslateService init
+    // #ifndef MP-WEIXIN
+    TUITranslateService.provideLanguages({ ...TUILocales });
+    TUITranslateService.useI18n();
+    // #endif
+    // TUIComponents global install
+    TUIGlobal.TUIComponents = this.TUIComponents;
+    // TUIPlugins global install
+    TUIGlobal.TUIPlugins = this.TUIPlugins;
+    console.warn('[TUIChatKit]: init success.');
+  }
+
+  /**
+   * login
+   */
+  public login() {
+    const { chat, SDKAppID, userID, userSig } = TUILogin.getContext();
+    this.SDKAppID = SDKAppID;
+    this.TUIChatEngine.login({
+      chat,
+      SDKAppID,
+      userID,
+      userSig,
+    });
+    this.chat = chat;
+    return this.TUIChatEngine;
+  }
+
+  /**
+   * Single component mounting
+   *
+   * @param {string} componentName
+   * @param {any} component
+   * @param {any=} env
+   * @returns {TUICore} mounted instance
+   */
+  public component(componentName: string, component: any, env?: any) {
+    if (this?.TUIComponents?.componentName) {
+      console.warn(
+        `[TUIChatKit]: ${this?.TUIComponents?.componentName} component has already been applied to target TUIChatEngine.`,
+      );
+    } else {
+      this.TUIComponents[componentName] = component;
+      env?.component(componentName, component);
+    }
+    if (env) {
+      !TUIGlobal.Vue && (TUIGlobal.Vue = env);
+    }
+    return this.TUIChatEngine;
+  }
+
+  /**
+   * Component list mount
+   *
+   * @param {object} components
+   * @param {any=} env: Vue2/Vue3 environment
+   * @returns {TUICore} mounted instance
+   */
+  public components(components: object, env?: any) {
+    if (!components || !isObject(components)) {
+      console.warn('[TUIChatKit]: components is empty or not object.');
+    } else {
+      Object?.keys(components)?.forEach((key: string) => {
+        this.component(key, components[key as keyof typeof components], env);
+      });
+    }
+    return this.TUIChatEngine;
+  }
+
+  /**
+   * Plugin Injection
+   *
+   * @param {any} TUIPlugin
+   * @param {any} options
+   * @returns {TUICore} mounted instance
+   */
+  public use(TUIPluginName: string, TUIPlugin: any, options?: any) {
+    if (!this.TUICore) {
+      console.warn(
+        `[TUIChatKit]: Plugin ${this.TUIPlugins[TUIPluginName]} can't be used before init.`,
+      );
+      return;
+    }
+    if (this.TUIPlugins[TUIPluginName]) {
+      console.warn(
+        `[TUIChatKit]: Plugin ${this.TUIPlugins[TUIPluginName]} has already been applied to target TUIChatEngine.`,
+      );
+    } else if (TUIPlugin && isFunction(TUIPlugin?.plugin)) {
+      this.TUIPlugins[TUIPluginName] = TUIPlugin;
+      TUIPlugin?.plugin(this, options);
+    } else if (isFunction(TUIPlugin)) {
+      this.TUIPlugins[TUIPluginName] = TUIPlugin;
+      TUIPlugin(this, options);
+    } else {
+      console.warn(
+        '[TUIChatKit]: A plugin must either be a function or an object with an "plugin" '
+        + 'function.'
+        + this.TUIPlugins[TUIPluginName]
+        + 'does not comply with the above rules.',
+      );
+    }
+    return this.TUIChatEngine;
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/shims-vue.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module "*.svg";
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.gif";
+declare module "*.bmp";
+declare module "*.tiff";
+
+declare module "*.json" {
+  const content: any;
+  export default content;
+}
+
+declare module "dayjs";
+declare module "dayjs/plugin/localeData.js";
+declare module "dayjs/plugin/isSameOrAfter.js";
+declare module "dayjs/plugin/isSameOrBefore.js";

package/src/TUIRoom/components/Chat/ChatKit/utils/documentLink.ts

@@ -0,0 +1,23 @@
+const Link = {
+  product: {
+    label: '产品文档',
+    url: 'https://cloud.tencent.com/document/product/269/1499#.E7.BE.A4.E7.BB.84.E5.8A.9F.E8.83.BD',
+  },
+  customMessage: {
+    label: '自定义消息',
+    url: 'https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#createCustomMessage',
+  },
+  complaint: {
+    label: '点此投诉',
+    url: 'https://cloud.tencent.com/apply/p/xc3oaubi98g',
+  },
+  implement: {
+    label: '集成TUICallKit',
+    url: 'https://cloud.tencent.com/document/product/269/79861',
+  },
+  purchase: {
+    label: '开通腾讯实时音视频服务',
+    url: 'https://cloud.tencent.com/document/product/1640/79968',
+  },
+};
+export default Link;

package/src/TUIRoom/components/Chat/ChatKit/utils/enableSampleTaskStatus.ts

@@ -0,0 +1,8 @@
+import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
+export function enableSampleTaskStatus(taskKey: string) {
+  const tasks = TUIStore.getData(StoreName.APP, "tasks");
+  if (taskKey in tasks && !tasks[taskKey]) {
+    tasks[taskKey] = true;
+    TUIStore.update(StoreName.APP, "tasks", tasks);
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/utils/env.ts

@@ -0,0 +1,17 @@
+import { getPlatform } from '@tencentcloud/universal-api';
+
+declare const uni: any;
+
+export const isPC = getPlatform() === 'pc';
+
+export const isH5 = getPlatform() === 'h5';
+
+export const isWeChat = getPlatform() === 'wechat';
+
+export const isApp = getPlatform() === 'app';
+
+export const isUniFrameWork = typeof uni !== 'undefined';
+
+// H5, mini programs, and apps are all considered mobile.
+// If you need to unify the mobile UI style, you can directly use isMobile to control
+export const isMobile = isH5 || isWeChat || isApp;

package/src/TUIRoom/components/Chat/ChatKit/utils/index.ts

@@ -0,0 +1 @@
+export * from "./type-check";