@ndscnj/roomkit-web-vue3 3.2.0

package/src/TUIRoom/components/Chat/ChatKit/components/TUIGroup/select-member/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <SelectUser
+    :isRadio="selectOptions.isRadio"
+    :isNeedSearch="selectOptions.isNeedSearch"
+    :title="selectOptions.title"
+    :userList="userList"
+    :total="group.memberCount"
+    @getMore="getMember"
+    @search="handleSearch"
+    @complete="handleSelectedResult"
+  />
+</template>
+<script lang="ts" setup>
+import {
+  TUIGroupService,
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  IGroupMember,
+  IGroupModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref, watchEffect } from '../../../adapter-vue';
+import {
+  TUIToast,
+  TOAST_TYPE,
+} from '@tencentcloud/uikit-base-component-vue3';
+import TUICore from '@tencentcloud/tui-core';
+import SelectUser from '../../common/SelectUser/index.vue';
+import Server from '../server';
+const TUIContactServer = Server.getInstance();
+const TUIConstants = TUIContactServer.constants;
+
+const needSearch = ref(false);
+const memberList = ref<Array<typeof IGroupMember>>([]);
+const userList = ref<Array<typeof IGroupMember>>([]);
+const group = ref<IGroupModel>({});
+const selectOptions: any = ref({
+  groupID: '',
+  isRadio: false,
+  isNeedSearch: false,
+  title: '',
+  filterUserIDList: [] as Array<string>,
+});
+const TUISearchServer = ref<any>(null);
+
+const generateSearchServer = (isNeedSearch: any) => {
+  TUISearchServer.value = TUICore.getService(
+    TUIConstants.TUISearch.SERVICE.NAME
+  );
+  if (TUISearchServer.value) {
+    needSearch.value = isNeedSearch;
+  } else {
+    console.warn('请添加 TUISearch 组件');
+  }
+};
+
+watchEffect(() => {
+  const params = TUIContactServer.getOnCallParams(
+    TUIConstants.TUIContact.SERVICE.METHOD.SELECT_FRIEND
+  );
+  selectOptions.value.groupID = params.groupID;
+  selectOptions.value.title = params.title;
+  selectOptions.value.isRadio = params.isRadio;
+  selectOptions.value.isNeedSearch = params.isNeedSearch;
+  selectOptions.value.filterUserIDList = params.filterUserIDList;
+  if (params.isNeedSearch) {
+    generateSearchServer(params.isNeedSearch);
+  }
+});
+
+TUIStore.watch(StoreName.GRP, {
+  currentGroup: (data: IGroupModel) => {
+    group.value = data;
+  },
+  currentGroupMemberList: (List: Array<typeof IGroupMember>) => {
+    memberList.value = List.map((item: typeof IGroupMember) => {
+      if (selectOptions.value.filterUserIDList.indexOf(item.userID) > -1) {
+        item.isDisabled = true;
+      }
+    });
+    userList.value = memberList.value;
+  },
+});
+
+const getMember = async () => {
+  const { groupID } = group.value;
+  const options = {
+    groupID,
+    count: 100,
+    offset: memberList.value.length,
+  };
+  await TUIGroupService.getGroupMemberList(options);
+};
+
+const handleSelectedResult = (memberList: Array<any>) => {
+  TUIStore.update(StoreName.GRP, 'isShowSelectComponent', false);
+  const callback = TUIContactServer.getOnCallCallback(
+    TUIConstants.TUIGroup.SERVICE.METHOD.SELECT_GROUP_MEMBER
+  );
+  callback && callback(memberList);
+};
+
+const searchFail = () => {
+  TUIToast({
+    message: TUITranslateService.t('TUIGroup.该用户不存在'),
+    type: TOAST_TYPE.ERROR,
+  });
+  userList.value = [...memberList.value];
+};
+
+const handleSearch = async (val: string) => {
+  if (!val) {
+    return (userList.value = memberList.value);
+  }
+
+  try {
+    const imResponse: any = await TUISearchServer.value.searchGroupMember(val);
+    if (!imResponse.data[0]) {
+      return searchFail();
+    }
+    userList.value = imResponse.data;
+    const searchAllResult = memberList.value.filter(
+      (item: any) => item.userID === imResponse.data[0].userID
+    );
+    memberList.value = searchAllResult.length
+      ? memberList.value
+      : [...memberList.value, ...userList.value];
+  } catch (error) {
+    return searchFail();
+  }
+};
+</script>

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

@@ -0,0 +1,94 @@
+import TUICore, { TUIConstants, ExtensionInfo } from '@tencentcloud/tui-core';
+import {
+  TUIStore,
+  StoreName,
+  TUIGroupService,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import settingSVG from '../../assets/icon/setting.svg';
+import { isUniFrameWork } from '../../utils/env';
+
+export default class TUIGroupServer {
+  static instance: TUIGroupServer;
+  private onCallParamsMap: Map<string, any>;
+  private onCallCallbackMap: Map<string, () => void>;
+  public constants: typeof TUIConstants;
+  constructor() {
+    TUICore.registerService(TUIConstants.TUIGroup.SERVICE.NAME, this);
+    TUICore.registerExtension(TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID, this);
+    this.onCallParamsMap = new Map();
+    this.onCallCallbackMap = new Map();
+    this.constants = TUIConstants;
+  }
+
+  static getInstance(): TUIGroupServer {
+    if (!TUIGroupServer.instance) {
+      TUIGroupServer.instance = new TUIGroupServer();
+    }
+    return TUIGroupServer.instance;
+  }
+
+  public getOnCallParams(method: string): any {
+    return this.onCallParamsMap.get(method);
+  }
+
+  public getOnCallCallback(method: string): (() => void) | undefined {
+    return this.onCallCallbackMap.get(method);
+  }
+
+  public async onCall(method: string, params: any, callback: () => void): Promise<void> {
+    this.onCallParamsMap.set(method, params);
+    this.onCallCallbackMap.set(method, callback);
+    switch (method) {
+      case TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP:
+        TUIStore.update(StoreName.GRP, 'isShowCreateComponent', true);
+        isUniFrameWork && TUIGlobal?.reLaunch({
+          url: '/TUIKit/components/TUIGroup/index',
+        });
+        break;
+      case TUIConstants.TUIGroup.SERVICE.METHOD.OPEN_GROUP_MANAGEMENT:
+        TUIGroupService.switchGroup(params.groupID);
+        TUIStore.update(StoreName.GRP, 'isShowManageComponent', true);
+        isUniFrameWork && TUIGlobal?.navigateTo({
+          url: '/TUIKit/components/TUIGroup/index',
+        });
+        break;
+      case TUIConstants.TUIGroup.SERVICE.METHOD.SELECT_GROUP_MEMBER:
+        TUIGroupService.switchGroup(params.groupID);
+        TUIStore.update(StoreName.GRP, 'isShowSelectComponent', true);
+        isUniFrameWork && TUIGlobal?.navigateTo({
+          url: '/TUIKit/components/TUIGroup/index',
+        });
+        break;
+    }
+  }
+
+  public onGetExtension(extensionID: string): ExtensionInfo[] {
+    const list: ExtensionInfo[] = [];
+    switch (extensionID) {
+      case TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID:
+        list.push({
+          weight: 100,
+          icon: settingSVG,
+          text: '更多',
+          data: {},
+          listener: {
+            onClicked: this.groupManage.bind(this),
+          },
+        });
+        break;
+    }
+    return list;
+  }
+
+  private groupManage(params: any) {
+    TUICore.callService({
+      serviceName: TUIConstants.TUIGroup.SERVICE.NAME,
+      method: TUIConstants.TUIGroup.SERVICE.METHOD.OPEN_GROUP_MANAGEMENT,
+      params,
+      callback: () => {
+        isUniFrameWork && TUIGlobal?.navigateBack();
+      },
+    });
+  }
+}

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

@@ -0,0 +1,387 @@
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  IMessageModel,
+  IConversationModel,
+  TUITranslateService,
+  TUIConversationService,
+} from '@tencentcloud/chat-uikit-engine';
+import {
+  ITUINotification,
+  NotificationType,
+  INotificationConstructorParams,
+} from './interface';
+import { safeParse, isTypingMessage } from './utils';
+
+const TYPES = TUIChatEngine.TYPES;
+
+/**
+   * The TUINotification class.
+   * Just can use in web environment.
+   * @extends {ITUINotification}
+   * @param {INotificationConstructorParams | undefined} params - An optional parameter specifying the options for creating the TUINotification instance.
+   * @return {TUINotification} - The instance of TUINotification.
+   * @example
+   * TUINotification.setNotificationConfiguration({
+   *   showPreviews: true,
+   *   allowNotifications: true
+   * });
+   * TUINotification.getInstance(config).notify(message);
+   */
+class TUINotification implements ITUINotification {
+  public showPreviews = true;
+  public allowNotifications = true;
+  public notificationTitle = TUITranslateService.t('TUIChat.腾讯云 IM');
+  public notificationIcon = 'https://web.sdk.qcloud.com/im/demo/latest/faviconnew.png';
+
+  private static instance: TUINotification | null = null;
+
+  // private constructor implementing the Singleton Pattern
+  private constructor(params?: INotificationConstructorParams) {
+    this.setConfiguration(params);
+  }
+
+  /**
+     * Returns an instance of TUINotification.
+     *
+     * @param {INotificationConstructorParams | undefined} options - An optional parameter specifying the options for creating the TUINotification instance.
+     * @return {TUINotification} - The instance of TUINotification.
+     */
+  static getInstance(options?: INotificationConstructorParams): TUINotification {
+    if (!this.instance) {
+      this.instance = new TUINotification(options);
+    }
+    return this.instance;
+  }
+
+  /**
+     * Notifies the user with a given message.
+     *
+     * @param {IMessageModel} message - The message to be notified.
+     * @return {Promise<void>} - A promise that resolves when the notification is handled.
+     */
+  public async notify(message: IMessageModel): Promise<void> {
+    const browserPermission = await this.requestNotificationPermission();
+    if (
+      !this.allowNotifications
+      || !browserPermission
+      || !this.isMessageNeedNotification(message)
+    ) {
+      return;
+    }
+    await this.handleNotification(message);
+  }
+
+  /**
+     * Handles the notification message.
+     *
+     * @param {IMessageModel} message - The notification message to handle.
+     * @return {Promise<void>} - A Promise that resolves once the notification is handled.
+     */
+  public async handleNotification(message: IMessageModel): Promise<void> {
+    let options = {
+      badge: this.notificationIcon,
+      icon: this.notificationIcon,
+      body: '',
+      requireInteraction: false,
+    };
+    const notificationType = this.getNotificationType(message);
+    let content;
+    let callEnd;
+    switch (notificationType) {
+      case 'call':
+        ({ content, callEnd } = this.getCallNotificationInfo(message));
+        options = {
+          ...options,
+          body: content,
+          requireInteraction: !callEnd,
+        };
+        break;
+      case 'chat':
+        options = {
+          ...options,
+          body: await this.getChatNotificationContent(message),
+          requireInteraction: false,
+        };
+        break;
+    }
+    const notification = new Notification(this.notificationTitle, options);
+    notification.onclick = async () => {
+      window.focus();
+      if (!message || !message.conversationID) {
+        return;
+      }
+      if (
+        message?.conversationType === TYPES.CONV_C2C
+        || message?.conversationType === TYPES.CONV_GROUP
+      ) {
+        const conversationProfile = await TUIConversationService.getConversationProfile(message.conversationID);
+        const { conversationID: clickedMessageConvID } = conversationProfile?.data?.conversation || {};
+        if (clickedMessageConvID) {
+          TUIConversationService.switchConversation(clickedMessageConvID);
+        }
+      }
+      notification.close();
+    };
+  }
+
+  /**
+     * Sets the notification configuration.
+     *
+     * @param {INotificationConstructorParams} params - The parameters for the notification configuration.
+     * @return {void} This function does not return a value.
+     */
+  public setNotificationConfiguration(params?: INotificationConstructorParams): void {
+    this.setConfiguration(params);
+  }
+
+  /**
+     * Checks if the browser supports notifications.
+     *
+     * @return {boolean} true if the browser supports notifications, false otherwise.
+     */
+  public checkNotificationAbility(): boolean {
+    if (window && 'Notification' in window) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+     * Checks if the browser has notification capability
+     * If the browser already has notification permission, returns true
+     * Otherwise, requests permission and returns the result
+     * @return Promise<boolean>
+     */
+  public async requestNotificationPermission(): Promise<boolean> {
+    if (!this.checkNotificationAbility()) {
+      console.error('The browser does not support notifications.');
+      return false;
+    }
+    if (window.Notification.permission === 'granted') {
+      return true;
+    }
+    try {
+      const permission = await Notification.requestPermission();
+      if (permission === 'granted') {
+        return true;
+      }
+    } catch {
+      return false;
+    }
+    return false;
+  }
+
+  /**
+     * Checks if the current page has focus.
+     * @return {boolean}
+     */
+  public checkPageFocus(): boolean {
+    return document.hasFocus();
+  }
+
+  /**
+     * use new configuration to overwrite old configuration
+     * @param params
+     * @return {void}
+     */
+  private setConfiguration(params?: INotificationConstructorParams): void {
+    if (!params) return;
+    if (params.allowNotifications !== undefined) {
+      this.allowNotifications = params.allowNotifications;
+    }
+    if (params.showPreviews !== undefined) {
+      this.showPreviews = params.showPreviews;
+    }
+    if (params.notificationTitle !== undefined) {
+      this.notificationTitle = params.notificationTitle;
+    }
+    if (params.notificationIcon !== undefined) {
+      this.notificationIcon = params.notificationIcon;
+    }
+  }
+
+  /**
+     * Checks if a message needs to be notified.
+     *
+     * A message does not need to be notified if it:
+     *  - is null or undefined
+     *  - does not have an ID or a type
+     *  - is revoked or deleted
+     *  - is a typing message
+     *  - is of type MSG_GRP_TIP or MSG_GRP_SYS_NOTICE
+     *  - the page is focused and the message belongs to the current conversation
+     *
+     * @param {IMessageModel} message - The message to check
+     * @return {boolean} - True if the message needs to be notified, false otherwise
+     */
+  private isMessageNeedNotification(message: IMessageModel): boolean {
+    if (!message || !message.ID || !message.type || message.isRevoked || message.isDeleted || isTypingMessage?.(message)) {
+      return false;
+    }
+
+    if (message.type === TYPES.MSG_GRP_TIP || message.type === TYPES.MSG_GRP_SYS_NOTICE) {
+      return false;
+    }
+
+    const currentConversationID = TUIStore.getData(StoreName.CONV, 'currentConversationID');
+
+    if (this.checkPageFocus() && message?.conversationID === currentConversationID) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+     * Returns the notification type 'call' or 'chat'.
+     * @param {IMessageModel} message
+     * @return {'chat' | 'call'} call' or 'chat'
+     */
+  private getNotificationType(message: IMessageModel): NotificationType {
+    if (message.type === TYPES.MSG_CUSTOM) {
+      const { businessID } = safeParse(message.payload?.data);
+      if (businessID === 1 || businessID === 'av_call') {
+        return 'call';
+      }
+    }
+    return 'chat';
+  }
+
+  /**
+     * Retrieves the content for chat type message notifications.
+     * @param {IMessageModel} message
+     * @return {Promise<string>}
+     */
+  private async getChatNotificationContent(message: IMessageModel): Promise<string> {
+    let content = '';
+    if (!message || !message.ID || !message.type) {
+      return content;
+    }
+    if (this.showPreviews) {
+      content = await this.getChatNotificationContentTitle(message);
+      content += this.getChatNotificationContentText(message);
+    } else {
+      const totalUnreadMessageCount = TUIStore.getData(StoreName.CONV, 'totalUnreadCount');
+      content = `${TUITranslateService.t('TUIChat.您有')} ${totalUnreadMessageCount} ${TUITranslateService.t('TUIChat.条新消息')}`;
+    }
+    return content;
+  }
+
+  /**
+     * Retrieves the content title for chat notifications.
+     * @param {IMessageModel} message - The message object.
+     * @returns {Promise<string>} - The content title for chat notifications.
+     */
+  private async getChatNotificationContentTitle(message: IMessageModel): Promise<string> {
+    let title = '';
+    let conversationProfile;
+    let conversation: IConversationModel;
+    switch (message.conversationType) {
+      case TYPES.CONV_C2C:
+        title = (message.nick || message.from) + ': ';
+        break;
+      case TYPES.CONV_GROUP:
+        conversationProfile = await TUIConversationService.getConversationProfile(message.conversationID);
+        conversation = conversationProfile?.data?.conversation;
+        title = conversation?.groupProfile?.name || message.conversationID;
+        title += ': ';
+        break;
+      case TYPES.CONV_SYSTEM:
+        title = `${TUITranslateService.t('TUIChat.系统消息')}: `;
+        break;
+      default:
+        break;
+    }
+    return title;
+  }
+
+  /**
+     * Get the content of the chat notification
+     * @param {IMessageModel} message
+     * @return {string}
+     */
+  private getChatNotificationContentText(message: IMessageModel): string {
+    let content = '';
+    switch (message.type) {
+      case TYPES.MSG_TEXT:
+        content += message?.payload?.text;
+        break;
+      case TYPES.MSG_CUSTOM:
+        content += TUITranslateService.t('TUIChat.自定义');
+        break;
+      case TYPES.MSG_IMAGE:
+        content += TUITranslateService.t('TUIChat.图片');
+        break;
+      case TYPES.MSG_AUDIO:
+        content += TUITranslateService.t('TUIChat.语音');
+        break;
+      case TYPES.MSG_VIDEO:
+        content += TUITranslateService.t('TUIChat.视频');
+        break;
+      case TYPES.MSG_FILE:
+        content += TUITranslateService.t('TUIChat.文件');
+        break;
+      case TYPES.MSG_FACE:
+        content += TUITranslateService.t('TUIChat.表情');
+        break;
+      case TYPES.MSG_MERGER:
+        content += TUITranslateService.t('TUIChat.聊天记录');
+        break;
+      case TYPES.MSG_LOCATION:
+        content += TUITranslateService.t('TUIChat.位置');
+        break;
+      default:
+        break;
+    }
+    return content;
+  }
+
+  /**
+     * Get the content of the call notification.
+     * @param message - The message object.
+     * @returns An object containing the notification content and call end status.
+     */
+  private getCallNotificationInfo(message: IMessageModel): { content: string; callEnd: boolean } {
+    let content = '';
+    let callEnd = false;
+
+    try {
+      if (message.type !== TYPES.MSG_CUSTOM || !message.payload?.data) {
+        throw new Error();
+      }
+      const callInfo = safeParse(message.payload.data);
+      const callDataInfo = safeParse(callInfo.data);
+      if (callInfo.businessID !== 1) {
+        throw new Error();
+      }
+      switch (callInfo.actionType) {
+        case 1:
+          if (
+            (callInfo.groupID && callInfo.timeout > 0)
+            || (!callInfo.call_end && !callInfo.groupID
+            && !(callDataInfo?.data && (callDataInfo?.data.cmd === 'switchToAudio' || callDataInfo?.data.cmd === 'switchToVideo')))
+          ) {
+            callEnd = false;
+            content = this.showPreviews ? `${callInfo.inviter} ${TUITranslateService.t('TUIChat.发起通话')}` : `${TUITranslateService.t('TUIChat.发起通话')}`;
+          }
+          break;
+        case 2:
+          callEnd = true;
+          content = this.showPreviews ? `${callInfo.inviter} ${TUITranslateService.t('TUIChat.取消通话')}` : `${TUITranslateService.t('TUIChat.取消通话')}`;
+          break;
+        default:
+          throw new Error();
+      }
+    } catch (error: unknown) {
+      console.warn(error);
+    }
+
+    return {
+      content,
+      callEnd,
+    };
+  }
+}
+
+export default TUINotification.getInstance();

package/src/TUIRoom/components/Chat/ChatKit/components/TUINotification/interface.ts

@@ -0,0 +1,15 @@
+export interface ITUINotification {
+  showPreviews: boolean;
+  allowNotifications: boolean;
+  notificationTitle: string;
+  notificationIcon: string;
+}
+
+export interface INotificationConstructorParams {
+  showPreviews?: boolean;
+  allowNotifications?: boolean;
+  notificationTitle?: string;
+  notificationIcon?: string;
+}
+
+export type NotificationType = 'chat' | 'call';

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

@@ -0,0 +1,20 @@
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+/**
+ * Parses a JSON string and returns the resulting object.
+ *
+ * @param {string} jsonString - The JSON string to parse. Default value is "{}".
+ * @return {Record<string, any>} - The resulting object after parsing the JSON string.
+ */
+export function safeParse(jsonString: string = '{}'): Record<string, any> {
+  try {
+    return JSON.parse(jsonString);
+  } catch {
+    return {};
+  }
+}
+
+export function isTypingMessage(message: IMessageModel): boolean {
+  const { businessID } = safeParse(message.payload?.data);
+  return businessID === 'user_typing_status';
+}

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

@@ -0,0 +1,5 @@
+import TUISearch from './index.vue';
+import Server from './server';
+new Server();
+
+export default TUISearch;