@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.3

package/src/TUIRoom/extension/chatExtension.ts

@@ -16,6 +16,8 @@ import {
   RoomParam,
   roomService,
   RoomService,
+  JoinParams,
+  StartParams,
 } from '../services';
 import { setDragAndResize } from './utils/interact';
 import { Conversation, Message, Profile } from '@tencentcloud/chat';
@@ -95,6 +97,7 @@ export class ChatExtension {
   };
   public myProfile = {} as Profile;
   private customMessages: Record<string, MessageData> = {};
+  private isInit = false;
   private chatExtensionSetting: Record<ChatType, boolean> = {
     [ChatType.C2C]: true,
     [ChatType.GROUP]: true,
@@ -169,6 +172,7 @@ export class ChatExtension {
     );
     this.unBindRoomServiceEvent();
     this.unBindRoomEngineEvent();
+    this.isInit = false;
   }
 
   public setHistoryMeetingMessageList(
@@ -303,10 +307,41 @@ export class ChatExtension {
       },
     };
     if (!chatType) return extension; // Old version chatType === undefined ignores configuration and returns directly
-    if (!this.chatExtensionSetting[chatType]) return;
+    if (!this.chatExtensionSetting[chatType]) return [];
+    this.mixinInit(chatType);
     return extension;
   }
 
+  private async mixinInit(chatType: ChatType) {
+    if (this.isInit) return;
+    if (chatType !== TUIConstants.TUIChat.TYPE.ROOM) {
+      !isMobile && setDragAndResize('#roomContainer');
+      TUIRoomEngine?.callExperimentalAPI(
+        JSON.stringify({
+          api: 'setFramework',
+          params: {
+            component: 'TIMRoomKit',
+            language: `vue${VueVersion}`,
+          },
+        })
+      );
+      this.bindRoomEngineEvent();
+      this.bindRoomServiceEvent();
+      roomService.basicStore.setScene('chat');
+      roomService.componentManager.setComponentConfig({
+        SwitchTheme: { visible: false },
+        Language: { visible: false },
+        InviteControl: { visible: false },
+        RoomLink: { visible: false },
+        UserInfo: { visible: false },
+      });
+      this.chatContext = TUILogin.getContext();
+      this.myProfile = await this.getMyProfile();
+      this.roomInit(true);
+      this.isInit = true;
+    }
+  }
+
   private setAnotherMessageRoomState(state: RoomState) {
     Object.keys(this.customMessages).forEach(key => {
       const { roomState, isRoomCreateByMe, isInnerRoom } =
@@ -352,8 +387,9 @@ export class ChatExtension {
         roomState: RoomState.CREATING,
       });
       this.updateMessageList(message);
-      await this.service?.createRoom(roomOptions);
-      await this.service?.enterRoom(roomOptions);
+      await this.service?.start(roomOptions.roomId, {
+        roomOptions,
+      } as StartParams);
       this.message = message;
       this.messagePayload = this.parseMessageData(message);
       await this.sendMessage(message);
@@ -380,34 +416,6 @@ export class ChatExtension {
     subKey: string,
     params?: Record<string, any>
   ) {
-    if (eventName === TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED) {
-      if (subKey === TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS) {
-        // Execute your own business logic processing when receiving successful login
-        !isMobile && setDragAndResize('#roomContainer');
-        TUIRoomEngine?.callExperimentalAPI(
-          JSON.stringify({
-            api: 'setFramework',
-            params: {
-              component: 'TIMRoomKit',
-              language: `vue${VueVersion}`,
-            },
-          })
-        );
-        this.bindRoomEngineEvent();
-        this.bindRoomServiceEvent();
-        roomService.basicStore.setScene('chat');
-        roomService.componentManager.setComponentConfig({
-          SwitchTheme: { visible: false },
-          Language: { visible: false },
-          InviteControl: { visible: false },
-          RoomLink: { visible: false },
-          UserInfo: { visible: false },
-        });
-        this.chatContext = TUILogin.getContext();
-        this.myProfile = await this.getMyProfile();
-        this.roomInit(true);
-      }
-    }
     if (eventName === TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED) {
       if (subKey === TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS) {
         const language = params?.language;
@@ -458,7 +466,7 @@ export class ChatExtension {
     };
     this.roomInit();
     try {
-      await this.service?.enterRoom({ roomId, roomParam });
+      await this.service?.join(roomId, { roomParam } as JoinParams);
     } catch (err: any) {
       if (err.code === TUIErrorCode.ERR_ROOM_ID_NOT_EXIST) {
         this.modifyMessage(this.message.ID, { roomState: RoomState.DESTROYED });

package/src/TUIRoom/extension/index.ts

@@ -1,6 +1,7 @@
 import RoomMessageCardVue from './RoomMessageCard/RoomMessageCard.vue';
+import { chatExtension } from './chatExtension';
 import VoidTemplate from './VoidTemplate.vue';
 import { VueVersion } from './utils/common';
 
 const RoomMessageCard = VueVersion >= 3 ? RoomMessageCardVue : VoidTemplate;
-export { RoomMessageCard };
+export { RoomMessageCard, chatExtension };

package/src/TUIRoom/index.ts

@@ -9,6 +9,7 @@ import {
   ThemeOption,
 } from './conference';
 import RoomMessageCard from './extension/RoomMessageCard/RoomMessageCard.vue';
+import { chatExtension } from './extension';
 import { roomService } from './services';
 export * from './components/common/base/index';
 export * from './services/manager/scheduleConferenceManager';
@@ -23,6 +24,7 @@ export {
   FeatureButton,
   RoomMessageCard,
   WhiteboardView,
+  chatExtension,
 };
 export type { ThemeOption };
 

package/src/TUIRoom/locales/en-US.ts

@@ -71,6 +71,12 @@ export default {
   Me: 'Me',
   me: 'me',
   More: 'More',
+  'AI Assistant': 'AI Assistant',
+  'AI real-time conference content': 'AI real-time conference content',
+  'Turn on AI real-time subtitles': 'Turn on AI real-time subtitles',
+  'Turn off AI real-time subtitles': 'Turn off AI real-time subtitles',
+  'Enable AI real-time meeting recording':
+    'Enable AI real-time meeting recording',
   'Raise hand': 'Raise hand',
   Agree: 'Agree',
   Chat: 'Chat',
@@ -505,4 +511,19 @@ export default {
   'Close whiteboard': 'Close whiteboard',
   'Start annotating': 'Start annotating',
   'End annotating': 'End annotating',
+  'You are sharing the whiteboard, please stop sharing first':
+    'You are sharing the whiteboard, please stop sharing first',
+  // Beauty
+  Beauty: 'Beauty',
+  'Beauty Effects': 'Beauty Effects',
+  Smoother: 'Smoother',
+  Whitening: 'Whitening',
+  Ruddy: 'ruddy',
+  Compare: 'Compare',
+  Reset: 'Reset',
+  Degree: 'Degree',
+  'Sure you want to reset the beauty effect?':
+    'Sure you want to reset the beauty effect?',
+  'All beauty parameters will revert to default after reset':
+    'All beauty parameters will revert to default after reset',
 };

package/src/TUIRoom/locales/zh-CN.ts

@@ -65,6 +65,11 @@ export default {
   Admin: '管理员',
   RoomOwner: '主持人',
   More: '更多',
+  'AI Assistant': 'AI 助手',
+  'AI real-time conference content': 'AI 实时会议内容',
+  'Turn on AI real-time subtitles': '开启AI实时字幕',
+  'Turn off AI real-time subtitles': '关闭AI实时字幕',
+  'Enable AI real-time meeting recording': '开启AI实时会议记录',
   'Raise hand': '举手',
   Agree: '同意',
   Chat: '聊天',
@@ -484,4 +489,18 @@ export default {
   'Close whiteboard': '关闭白板',
   'Start annotating': '开始批注',
   'End annotating': '结束批注',
+  'You are sharing the whiteboard, please stop sharing first':
+    '您正在共享白板，请先停止共享',
+  // Beauty
+  Beauty: '美颜',
+  'Beauty Effects': '美颜特效',
+  Smoother: '磨皮',
+  Whitening: '美白',
+  Ruddy: '红润',
+  Compare: '对比',
+  Reset: '重置',
+  Degree: '程度',
+  'Sure you want to reset the beauty effect?': '确定要重置美颜效果吗?',
+  'All beauty parameters will revert to default after reset':
+    '重置后所有美颜参数将恢复至默认',
 };

package/src/TUIRoom/services/function/aiTask.ts

@@ -0,0 +1,233 @@
+import { IRoomService } from '../';
+import mitt from 'mitt';
+import { isElectron, isMobile } from '../../utils/environment';
+
+interface SubtitleMessage {
+  userid: string;
+  text: string;
+  translation_text: string;
+}
+interface DataPayload {
+  end: boolean;
+  text: string;
+  translation_text: string;
+  start_time: string;
+  end_time: string;
+}
+
+interface MessageData {
+  type: number | string;
+  payload: DataPayload;
+  sender: string;
+  userid: string;
+  text: string;
+  translation_text: string;
+  start_time: string;
+  end_time: string;
+  start_ms_ts: number;
+  end_ms_ts: number;
+}
+
+export enum AI_TASK {
+  TRANSCRIPTION_TASK = 'transcription',
+}
+
+export interface AITaskEvent {
+  [AI_TASK.TRANSCRIPTION_TASK]: {
+    subtitleMsg: SubtitleMessage[];
+    subtitleText: { value: string };
+    transcriptionText: { value: string };
+  };
+  [key: string]: unknown;
+  [key: symbol]: unknown;
+}
+
+export class AITask {
+  private emitter = mitt<AITaskEvent>();
+
+  private trtc: any;
+  private service: IRoomService;
+  public subtitleMsg: SubtitleMessage[] = [];
+  public subtitleText: { value: string } = { value: '' };
+  public transcriptionText: { value: string } = { value: '' };
+
+  constructor(service: IRoomService) {
+    this.service = service;
+    if (isElectron || isMobile) return;
+    this.bindCtx();
+    this.bindEvent();
+  }
+
+  private bindCtx() {
+    this.handleMount = this.handleMount.bind(this);
+    this.handleUnmount = this.handleUnmount.bind(this);
+    this.handleAIMessage = this.handleAIMessage.bind(this);
+  }
+
+  public on<T extends keyof AITaskEvent>(
+    eventType: T,
+    callback: (data?: AITaskEvent[T]) => void
+  ) {
+    this.emitter.on(eventType, callback);
+  }
+
+  public off<T extends keyof AITaskEvent>(
+    eventType: T,
+    callback: (data?: AITaskEvent[T]) => void
+  ) {
+    this.emitter.off(eventType, callback);
+  }
+
+  public emit<T extends keyof AITaskEvent>(eventType: T, data: AITaskEvent[T]) {
+    this.emitter.emit(eventType, data);
+  }
+
+  public dispose() {
+    this.service.lifeCycleManager.off('mount', this.handleMount);
+    this.service.lifeCycleManager.off('unmount', this.handleUnmount);
+  }
+
+  private handleMount() {
+    // todo trtccloud adds custom-message event
+    if (
+      typeof this.service.roomEngine.instance?.getTRTCCloud === 'undefined' ||
+      typeof this.service.roomEngine.instance?.getTRTCCloud()?._trtc ===
+        'undefined'
+    ) {
+      return;
+    }
+    const trtc = this.service.roomEngine.instance?.getTRTCCloud()._trtc;
+    this.trtc = trtc;
+    trtc.on('custom-message', this.handleAIMessage);
+  }
+  private handleUnmount() {
+    this.subtitleMsg = [];
+    this.subtitleText.value = '';
+    this.transcriptionText.value = '';
+    this.trtc?.off('custom-message', this.handleAIMessage);
+  }
+
+  private bindEvent() {
+    this.service.lifeCycleManager.on('mount', this.handleMount);
+    this.service.lifeCycleManager.on('unmount', this.handleUnmount);
+  }
+
+  // todo trtc defines this type as any
+  private handleAIMessage(event: any) {
+    if (event.cmdId !== 1) return;
+    const data = new TextDecoder().decode(event.data);
+    const jsonData = JSON.parse(data);
+    this.handleMessage(jsonData);
+    this.emit(AI_TASK.TRANSCRIPTION_TASK, {
+      subtitleText: this.subtitleText,
+      transcriptionText: this.transcriptionText,
+      subtitleMsg: this.subtitleMsg,
+    });
+  }
+
+  private handleMessage(data: MessageData): void {
+    const refreshSubtitle = (): void => {
+      let displayText = '';
+      for (let i = 0; i < this.subtitleMsg.length; i++) {
+        displayText += `${this.service.roomStore.getDisplayName(this.subtitleMsg[i].userid)}: ${this.subtitleMsg[i].text}\n`;
+        if (this.subtitleMsg[i].translation_text !== '') {
+          displayText += `${this.service.roomStore.getDisplayName(this.subtitleMsg[i].userid)}: ${this.subtitleMsg[i].translation_text}\n`;
+        }
+      }
+      this.subtitleText.value = displayText;
+    };
+
+    if (data.type === 10000 && data.payload.end === false) {
+      // Real-time subtitles
+      let exist = false;
+      for (let i = 0; i < this.subtitleMsg.length; i++) {
+        if (data.sender === this.subtitleMsg[i].userid) {
+          this.subtitleMsg[i].text = data.payload.text;
+          this.subtitleMsg[i].translation_text = data.payload.translation_text;
+          exist = true;
+          break;
+        }
+      }
+      if (!exist) {
+        this.subtitleMsg.push({
+          userid: data.sender,
+          text: data.payload.text,
+          translation_text: data.payload.translation_text,
+        });
+      }
+
+      refreshSubtitle();
+    } else if (data.type === 10000 && data.payload.end === true) {
+      // One sentence recognition completed
+      let index = 0;
+      for (let i = 0; i < this.subtitleMsg.length; i++) {
+        if (data.sender === this.subtitleMsg[i].userid) {
+          this.subtitleMsg[i].text = data.payload.text;
+          this.subtitleMsg[i].translation_text = data.payload.translation_text;
+          index = i;
+          break;
+        }
+      }
+      refreshSubtitle();
+      // todo start_ms_ts end_ms_ts
+
+      let content = `${data.payload.start_time}->${data.payload.end_time}  ${data.sender}: ${data.payload.text}\n`;
+      if (data.payload.translation_text !== '') {
+        content += `${data.payload.start_time}->${data.payload.end_time}  ${data.sender}: ${data.payload.translation_text}\n`;
+      }
+      this.transcriptionText.value += content;
+    }
+
+    // subtitle and transcription  is deprecated
+    if (data.type === 'subtitle') {
+      let exist = false;
+      for (let i = 0; i < this.subtitleMsg.length; i++) {
+        if (data.userid === this.subtitleMsg[i].userid) {
+          this.subtitleMsg[i].text = data.text;
+          this.subtitleMsg[i].translation_text = data.translation_text;
+          exist = true;
+          break;
+        }
+      }
+      if (!exist) {
+        this.subtitleMsg.push({
+          userid: data.userid,
+          text: data.text,
+          translation_text: data.translation_text,
+        });
+      }
+
+      refreshSubtitle();
+    } else if (data.type === 'transcription') {
+      let index = 0;
+      for (let i = 0; i < this.subtitleMsg.length; i++) {
+        if (data.userid === this.subtitleMsg[i].userid) {
+          this.subtitleMsg[i].text = data.text;
+          this.subtitleMsg[i].translation_text = data.translation_text;
+          index = i;
+          break;
+        }
+      }
+      refreshSubtitle();
+
+      let content = `${formatTimestampToTime(data.start_ms_ts)}->${formatTimestampToTime(data.end_ms_ts)}  ${this.service.roomStore.getDisplayName(data.userid)}: ${data.text}\n`;
+      if (data.translation_text !== '') {
+        content += `${formatTimestampToTime(data.start_ms_ts)}->${formatTimestampToTime(data.end_ms_ts)}  ${this.service.roomStore.getDisplayName(data.userid)}: ${data.translation_text}\n`;
+      }
+      this.transcriptionText.value += content;
+    }
+  }
+
+  public StartAITranscription(): void {
+    // Implementation for starting AI transcription
+  }
+}
+
+// utils
+function formatTimestampToTime(timestamp: number): string {
+  const date = new Date(timestamp);
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const seconds = date.getSeconds().toString().padStart(2, '0');
+  return `${hours}:${minutes}:${seconds}`;
+}

package/src/TUIRoom/services/function/basicBeauty.ts

@@ -0,0 +1,90 @@
+import { isElectron, isWeChat } from '../../utils/environment';
+import { IRoomService } from '../types';
+import { TRTCBeautyStyle } from '../../constants/room';
+
+interface IBasicBeauty {
+  dispose(): void;
+  initBasicBeauty(): Promise<void>;
+  setBasicBeauty(
+    style: TRTCBeautyStyle,
+    beautyLevel: number,
+    whitenessLevel: number,
+    ruddinessLevel: number
+  ): Promise<void>;
+  setTestBasicBeauty(
+    style: TRTCBeautyStyle,
+    beautyLevel: number,
+    whitenessLevel: number,
+    ruddinessLevel: number
+  ): Promise<void>;
+}
+
+export class BasicBeauty implements IBasicBeauty {
+  constructor(service: IRoomService) {
+    this.service = service;
+    if (isElectron || isWeChat) return;
+    this.bindEvent();
+  }
+
+  public dispose() {
+    this.service.lifeCycleManager.off('unmount', this.handleUnmount);
+  }
+
+  public async initBasicBeauty(): Promise<void> {
+    if (!this.basicBeautyPluginReady && this.trtcCloud?.useBeautyStyle) {
+      await this.trtcCloud.useBeautyStyle();
+      this.basicBeautyPluginReady = true;
+    }
+  }
+
+  public async setBasicBeauty(
+    style: TRTCBeautyStyle,
+    beautyLevel: number,
+    whitenessLevel: number,
+    ruddinessLevel: number
+  ): Promise<void> {
+    await this.initBasicBeauty();
+    await this.trtcCloud.setBeautyStyle(
+      style,
+      beautyLevel,
+      whitenessLevel,
+      ruddinessLevel
+    );
+  }
+
+  public async setTestBasicBeauty(
+    style: TRTCBeautyStyle,
+    beautyLevel: number,
+    whitenessLevel: number,
+    ruddinessLevel: number
+  ): Promise<void> {
+    await this.initBasicBeauty();
+    await this.trtcCloud.callExperimentalAPI(
+      JSON.stringify({
+        api: 'enableTestBeautyStyle',
+        params: { style, beautyLevel, whitenessLevel, ruddinessLevel },
+      })
+    );
+  }
+
+  private service: IRoomService;
+  private basicBeautyPluginReady = false;
+
+  private get trtcCloud() {
+    return this.service.roomEngine?.instance?.getTRTCCloud();
+  }
+
+  private bindEvent() {
+    this.service.lifeCycleManager.on('unmount', this.handleUnmount);
+  }
+
+  private handleUnmount = async () => {
+    await this.setBasicBeauty(TRTCBeautyStyle.TRTCBeautyStyleNature, 0, 0, 0);
+    await this.setTestBasicBeauty(
+      TRTCBeautyStyle.TRTCBeautyStyleNature,
+      0,
+      0,
+      0
+    );
+  };
+}

package/src/TUIRoom/services/index.ts

@@ -8,3 +8,5 @@ export * from './manager/userManager';
 export * from './manager/lifeCycleManager';
 export * from './manager/roomActionManager';
 export * from './manager/scheduleConferenceManager';
+export * from './manager/chatManager';
+export * from './function/aiTask';

package/src/TUIRoom/services/manager/chatManager.ts

@@ -0,0 +1,140 @@
+import { TUIConstants, TUICore } from '@tencentcloud/tui-core';
+import { EventType, IRoomService } from '../types';
+import TUIRoomEngine, {
+  TUIRoomEvents,
+} from '@tencentcloud/tuiroom-engine-electron';
+import { UserInfo } from '../../stores/room';
+import defaultAvatar from '../../assets/imgs/avatar.png';
+
+const THEME = {
+  LIGHT: 'LIGHT',
+  DARK: 'DARK',
+};
+
+export class ChatManager {
+  static instance?: ChatManager;
+  private service: IRoomService;
+  private isRoomType = false;
+
+  constructor(service: IRoomService) {
+    this.service = service;
+    this.bindEventContext();
+    this.bindEvent();
+    TUICore.registerEvent(
+      TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED,
+      TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED,
+      this
+    );
+  }
+
+  static getInstance(ctx: IRoomService): ChatManager {
+    if (!ChatManager.instance) {
+      ChatManager.instance = new ChatManager(ctx);
+    }
+    return ChatManager.instance;
+  }
+
+  static destroyInstance(): void {
+    if (!ChatManager.instance) return;
+    ChatManager.instance = undefined;
+  }
+
+  public dispose() {
+    this.unbindEvent();
+  }
+
+  public reset() {
+    TUICore.unregisterExtension(
+      TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED,
+      this
+    );
+  }
+
+  public setChatType(type: boolean) {
+    this.isRoomType = type;
+  }
+
+  public async onNotifyEvent(eventName: string, subKey: string, options?: any) {
+    if (!this.isRoomType) return;
+    if (eventName === TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED) {
+      if (subKey === TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED) {
+        TUICore.callService({
+          serviceName: TUIConstants.TUIChat.SERVICE.NAME,
+          method: TUIConstants.TUIChat.SERVICE.METHOD.SET_CHAT_TYPE,
+          params: {
+            chatType: TUIConstants.TUIChat.TYPE.ROOM,
+          },
+        });
+        const result = Object.fromEntries(
+          this.service.roomStore.userList.map(item => [
+            item.userId,
+            {
+              nick: item.userName,
+              nameCard: item.nameCard,
+              avatar: item.avatarUrl || defaultAvatar,
+            },
+          ])
+        );
+        TUICore.callService({
+          serviceName: TUIConstants.TUIChat.SERVICE.NAME,
+          method: TUIConstants.TUIChat.SERVICE.METHOD.UPDATE_MESSAGE_INFO,
+          params: { userInfo: result },
+        });
+      }
+    }
+  }
+
+  private onLanguageChanged(language: string) {
+    TUICore.notifyEvent(
+      TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED,
+      TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS,
+      { language }
+    );
+  }
+
+  private onThemeChanged(theme: string) {
+    const currentTheme = theme === 'black' ? THEME.DARK : THEME.LIGHT;
+    TUICore.notifyEvent(
+      TUIConstants.TUITheme.EVENT.THEME_CHANGED,
+      TUIConstants.TUITheme.EVENT_SUB_KEY.CHANGE_SUCCESS,
+      { theme: currentTheme }
+    );
+  }
+
+  private onUserNameCardChanged(eventInfo: { userInfo: UserInfo }) {
+    const { userId, nameCard } = eventInfo.userInfo;
+    const result = { [userId]: { nameCard } };
+
+    TUICore.callService({
+      serviceName: TUIConstants.TUIChat.SERVICE.NAME,
+      method: TUIConstants.TUIChat.SERVICE.METHOD.UPDATE_MESSAGE_INFO,
+      params: { userInfo: result },
+    });
+  }
+
+  private bindEventContext() {
+    this.onLanguageChanged = this.onLanguageChanged.bind(this);
+    this.onThemeChanged = this.onThemeChanged.bind(this);
+    this.onUserNameCardChanged = this.onUserNameCardChanged.bind(this);
+  }
+
+  private bindEvent() {
+    this.service.on(EventType.LANGUAGE_CHANGED, this.onLanguageChanged);
+    this.service.on(EventType.THEME_CHANGED, this.onThemeChanged);
+    TUIRoomEngine.once('ready', () => {
+      this.service.roomEngine.instance?.on(
+        TUIRoomEvents.onUserInfoChanged,
+        this.onUserNameCardChanged
+      );
+    });
+  }
+
+  private unbindEvent() {
+    this.service.off(EventType.LANGUAGE_CHANGED, this.onLanguageChanged);
+    this.service.off(EventType.THEME_CHANGED, this.onThemeChanged);
+    this.service.roomEngine.instance?.off(
+      TUIRoomEvents.onUserInfoChanged,
+      this.onUserNameCardChanged
+    );
+  }
+}