@tencentcloud/roomkit-electron-vue3 2.8.1 → 2.9.0

package/lib/services/types.d.ts

@@ -9,7 +9,7 @@ import { ErrorHandler } from './function/errorHandler';
 import { AITask } from './function/aiTask';
 import { ConferenceInvitationManager } from './manager/conferenceInvitationManager';
 import { DataReportManager } from './manager/dataReportManager';
-
+import { WidgetsManager } from './manager/widgetsManager';
 export interface IRoomService {
     t: any;
     roomEngine: Record<string, any>;
@@ -21,6 +21,7 @@ export interface IRoomService {
     scheduleConferenceManager: ScheduleConferenceManager;
     conferenceInvitationManager: ConferenceInvitationManager;
     dataReportManager: DataReportManager;
+    widgetsManager: WidgetsManager;
     errorHandler: ErrorHandler;
     aiTask: AITask;
     on: (eventType: EventType, callback: (data?: any) => any) => void;
@@ -37,7 +38,7 @@ export interface RoomInitData {
     showHeaderTool?: boolean;
     tim?: ChatSDK;
     theme?: {
-        defaultTheme?: 'black' | 'white';
+        defaultTheme?: 'dark' | 'light';
         isSupportSwitchTheme: boolean;
     };
 }
@@ -66,5 +67,6 @@ export declare enum EventType {
     USER_SIG_EXPIRED = "UserSigExpired",
     USER_LOGOUT = "UserLogout",
     LANGUAGE_CHANGED = "LanguageChanged",
-    THEME_CHANGED = "ThemeChanged"
+    THEME_CHANGED = "ThemeChanged",
+    CONFERENCE_INVITATION_ACCEPTED = "ConferenceInvitationAccepted"
 }

package/lib/services/types.js

@@ -18,6 +18,7 @@ var EventType = /* @__PURE__ */ ((EventType2) => {
   EventType2["USER_LOGOUT"] = "UserLogout";
   EventType2["LANGUAGE_CHANGED"] = "LanguageChanged";
   EventType2["THEME_CHANGED"] = "ThemeChanged";
+  EventType2["CONFERENCE_INVITATION_ACCEPTED"] = "ConferenceInvitationAccepted";
   return EventType2;
 })(EventType || {});
 exports.EventType = EventType;

package/lib/stores/basic.js

@@ -39,13 +39,14 @@ const useBasicStore = pinia.defineStore("basic", {
       delay: 0
     },
     lang: common.getLanguage(),
-    defaultTheme: "black",
+    defaultTheme: "dark",
     isSupportSwitchTheme: true,
     showHeaderTool: true,
     shareLink: "",
     isRoomLinkVisible: !environment.isElectron && !environment.isWeChat,
     isSchemeLinkVisible: !environment.isMobile,
     isShowScreenShareAntiFraud: false,
+    isExperiencedAI: false,
     isOpenMic: false,
     componentConfig: {
       SwitchTheme: {
@@ -127,6 +128,9 @@ const useBasicStore = pinia.defineStore("basic", {
     setIsShowScreenShareAntiFraud(isShowScreenShareAntiFraud) {
       this.isShowScreenShareAntiFraud = isShowScreenShareAntiFraud;
     },
+    setIsExperiencedAI(isExperiencedAI) {
+      this.isExperiencedAI = isExperiencedAI;
+    },
     setBasicInfo(infoObj) {
       if (!infoObj) {
         return;
@@ -195,6 +199,7 @@ const useBasicStore = pinia.defineStore("basic", {
       this.shareLink = "";
       this.isOpenMic = false;
       this.showRoomTool = false;
+      this.isExperiencedAI = false;
     }
   }
 });

package/lib/stores/room.d.ts

@@ -1,10 +1,9 @@
 import { TUIRole, TUIVideoStreamType, TUIInvitationStatus } from '@tencentcloud/tuiroom-engine-electron';
-
 export declare function getNewStreamInfo(userId: string, streamType?: TUIVideoStreamType): {
     userId: string;
     hasAudioStream: boolean;
     hasVideoStream: boolean;
-    streamType: TUIVideoStreamType;
+    streamType: any;
     isLoading: boolean;
     playDomMap: Map<any, any>;
     timestamp: number;
@@ -18,12 +17,12 @@ export declare function getNewUserInfo(userId: string): {
     hasVideoStream: boolean;
     hasScreenStream: boolean;
     isMessageDisabled: boolean;
-    userRole: TUIRole;
+    userRole: any;
     onSeat: boolean;
     isUserApplyingToAnchor: boolean;
     isInvitingUserToAnchor: boolean;
     isInRoom: boolean;
-    status: TUIInvitationStatus;
+    status: any;
     timestamp: number;
 };
 export type StreamInfo = {

package/lib/utils/common.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const utils = require("./utils.js");
 const THEME = {
-  LIGHT: "white",
-  DARK: "black"
+  LIGHT: "light",
+  DARK: "dark"
 };
 function getLanguage() {
   const isWxMiniProgram = typeof wx !== "undefined" && wx.getSystemInfoSync;

package/lib/utils/constants.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Vue = require("vue");
-var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -19,10 +18,5 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const Vue__namespace = /* @__PURE__ */ _interopNamespaceDefault(Vue);
-const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false };
-const isVue27 = /^2\.7\.*/.test(Vue__namespace.version);
 const isVue3 = /^3\.*/.test(Vue__namespace.version);
-const isInnerScene = { url: typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("utils/constants.js", document.baseURI).href } && __vite_import_meta_env__ && false;
-exports.isInnerScene = isInnerScene;
-exports.isVue27 = isVue27;
 exports.isVue3 = isVue3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/roomkit-electron-vue3",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",
@@ -20,10 +20,11 @@
   "dependencies": {
     "@tencentcloud/chat": "latest",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-electron": "^2.8.1",
+    "@tencentcloud/tuiroom-engine-electron": "^2.9.0",
     "@tencentcloud/chat-uikit-engine": "2.3.3",
     "@tencentcloud/chat-uikit-vue": "2.3.3",
     "@tencentcloud/universal-api": "^2.0.9",
+    "@tencentcloud/uikit-base-component-vue3": "^0.3.0",
     "@tiptap/core": "^2.6.6",
     "@tiptap/extension-document": "^2.6.6",
     "@tiptap/extension-image": "^2.6.6",

package/src/TUIRoom/components/Chat/ChatEditor/index.vue

@@ -28,16 +28,6 @@ const {
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-white textarea {
-  --input-border-color: var(--background-color-10);
-  --chat-editor-color: var(--background-color-8);
-}
-
-.tui-theme-black textarea {
-  --input-border-color: rgba(213, 224, 242, 0.2);
-  --chat-editor-color: var(--background-color-2);
-}
-
 .chat-editor {
   position: relative;
   box-sizing: border-box;
@@ -47,7 +37,7 @@ const {
   height: 150px;
   padding: 12px 16px;
   margin-top: 20px;
-  border: 1px solid var(--input-border-color);
+  border: 1px solid var(--stroke-color-module);
   border-radius: 8px;
 
   .chat-emoji {
@@ -63,10 +53,9 @@ const {
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
-    color: var(--textarea-color);
-    caret-color: var(--caret-color);
+    color: var(--text-color-primary);
     resize: none;
-    background: var(--chat-editor-color);
+    background: var(--bg-color-input);
     border: none;
 
     &:focus-visible {
@@ -77,7 +66,7 @@ const {
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
-      color: rgba(143, 154, 178, 0.7);
+      color: var(--uikit-color-gray-5);
     }
 
     &::-webkit-scrollbar {
@@ -86,16 +75,16 @@ const {
   }
 
   &.disable {
-    background-color: var(--disable-color);
+    background-color: var(--text-color-button-disable);
 
     .chat-emoji {
-      color: #8f9ab2;
+      color: var(--uikit-color-gray-7);
       pointer-events: none;
     }
 
     .content-bottom-input {
       &:disabled {
-        background-color: var(--disable-color);
+        background-color: var(--text-color-button-disable);
       }
     }
   }

package/src/TUIRoom/components/Chat/EditorTools/index.vue

@@ -47,17 +47,6 @@ const handleClickOutsideEmojiToobar = () => {
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-white .emoji-list {
-  --emoji-box-shadow: 0px 2px 4px -3px rgba(32, 77, 141, 0.03),
-    0px 6px 10px 1px rgba(32, 77, 141, 0.06),
-    0px 3px 14px 2px rgba(32, 77, 141, 0.05);
-}
-
-.tui-theme-black .emoji-list {
-  --emoji-box-shadow: 0px 8px 40px 0px rgba(23, 25, 31, 0.6),
-    0px 4px 12px 0px rgba(23, 25, 31, 0.8);
-}
-
 .emoji-tool {
   .emoji-icon {
     cursor: pointer;
@@ -75,9 +64,11 @@ const handleClickOutsideEmojiToobar = () => {
     height: 204px;
     padding: 10px;
     overflow-y: auto;
-    background-color: var(--background-color-8);
     border-radius: 8px;
-    box-shadow: var(--emoji-box-shadow);
+    background-color: var(--bg-color-function);
+    box-shadow:
+      0px 8px 40px 0px var(--uikit-color-black-8),
+      0px 4px 12px 0px var(--uikit-color-black-8);
 
     &::-webkit-scrollbar {
       display: none;

package/src/TUIRoom/components/Chat/MessageList/index.vue

@@ -96,18 +96,6 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-white .message-body {
-  --user-chat-color: rgba(213, 224, 242, 0.4);
-  --user-font-color: var(--black-color);
-  --host-font-color: var(--white-color);
-}
-
-.tui-theme-black .message-body {
-  --user-chat-color: rgba(213, 224, 242, 0.1);
-  --user-font-color: var(--background-color-4);
-  --host-font-color: var(--background-color-4);
-}
-
 .message-list-container {
   flex: 1;
   height: 100%;
@@ -144,8 +132,8 @@ onUnmounted(() => {
       .message-body {
         min-width: 24px;
         padding: 10px;
-        color: var(--host-font-color);
-        background-color: var(--active-color-1);
+        background-color: var(--bg-color-bubble-own);
+        color: var(--text-color-primary);
         border-radius: 8px;
       }
     }
@@ -157,7 +145,7 @@ onUnmounted(() => {
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
-      color: var(--font-color-8);
+      color: var(--text-color-warning);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -167,8 +155,8 @@ onUnmounted(() => {
       padding: 10px;
       font-size: 14px;
       font-weight: 400;
-      color: var(--user-font-color);
-      background-color: var(--user-chat-color);
+      background-color: var(--bg-color-bubble-reciprocal);
+      color: var(--text-color-primary);
       border-radius: 8px;
     }
   }
@@ -178,7 +166,7 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   padding: 10px 23px 10px 32px;
-  background-color: var(--message-list-color-h5);
+  background-color: var(--bg-color-operate);
 
   .message-list {
     height: 100%;
@@ -217,9 +205,9 @@ onUnmounted(() => {
           padding: 7px;
           font-size: 14px;
           font-weight: 400;
-          color: #fff;
-          background-color: #4791ff;
           border-radius: 8px;
+          background-color: var(--bg-color-bubble-own);
+          color: var(--text-color-primary);
         }
       }
 
@@ -231,9 +219,9 @@ onUnmounted(() => {
         font-style: normal;
         font-weight: 500;
         line-height: 14px;
-        color: #ff7200;
         text-overflow: ellipsis;
         white-space: nowrap;
+        color: var(--text-color-warning);
       }
 
       .message-body {
@@ -241,9 +229,9 @@ onUnmounted(() => {
         padding: 7px;
         font-size: 14px;
         font-weight: 400;
-        color: #fff;
-        background-color: var(--message-body-h5);
         border-radius: 8px;
+        background-color: var(--bg-color-bubble-reciprocal);
+        color: var(--text-color-primary);
       }
     }
   }

package/src/TUIRoom/components/Chat/index/index.vue

@@ -13,6 +13,10 @@ import { hideTUIChatFeatures } from '../ChatKit/components/TUIChat/config';
 import TUIChatServer from '../ChatKit/components/TUIChat/server';
 
 import { useBasicStore } from '../../../stores/basic';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+const { theme, setTheme } = useUIKit();
+
 import TUIChat from '../ChatKit/components/TUIChat/index.vue';
 
 const basicStore = useBasicStore();
@@ -42,8 +46,14 @@ new TUIChatServer();
 
 TUIConversationService.switchConversation(currentRoomId);
 hideTUIChatFeatures(defaultHideFeaturesButtons);
-roomService.setTheme(basicStore.defaultTheme as Theme);
 roomService.setLanguage(basicStore.lang as LanguageOption);
+
+if (!theme.value) {
+  roomService.setTheme(basicStore.defaultTheme as Theme);
+} else {
+  setTheme(theme.value);
+  roomService.setTheme(theme.value as Theme);
+}
 </script>
 
 <style lang="scss" scoped>

package/src/TUIRoom/components/ManageMember/MemberControl/index.vue

@@ -21,7 +21,7 @@
         v-show="showMoreControl"
         id="operate-list"
         ref="operateListRef"
-        :class="['user-operate-list', 'tui-theme-white', dropdownClass]"
+        :class="['user-operate-list', dropdownClass]"
       >
         <div
           v-for="item in moreControlList"
@@ -168,17 +168,6 @@ async function handleDropDownPosition() {
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-black .user-operate-list {
-  --operation-font-color: var(--font-color-1);
-  --operation-box-shadow: 0px 3px 8px rgba(34, 38, 46, 0.3),
-    0px 6px 40px rgba(34, 38, 46, 0.3);
-}
-
-.tui-theme-white .user-operate-list {
-  --operation-font-color: #6b758a;
-  --operation-box-shadow: 0px 3px 8px #e9f0fb, 0px 6px 40px rgba(0, 0, 0, 0.1);
-}
-
 .member-control-container {
   display: flex;
   flex-direction: row;
@@ -205,9 +194,11 @@ async function handleDropDownPosition() {
       z-index: 1;
       min-width: 160px;
       padding: 20px;
-      background: var(--background-color-1);
       border-radius: 8px;
-      box-shadow: var(--operation-box-shadow);
+      background-color: var(--dropdown-color-default);
+      box-shadow:
+        0px 3px 8px var(--uikit-color-black-8),
+        0px 6px 40px var(--uikit-color-black-8);
 
       &::before {
         position: absolute;
@@ -215,8 +206,8 @@ async function handleDropDownPosition() {
         content: '';
         border-top: 10px solid transparent;
         border-right: 10px solid transparent;
-        border-bottom: 10px solid var(--background-color-1);
         border-left: 10px solid transparent;
+        border-bottom: 10px solid var(--dropdown-color-default);
       }
 
       &::after {
@@ -231,8 +222,8 @@ async function handleDropDownPosition() {
         display: flex;
         align-items: center;
         height: 20px;
-        color: var(--operation-font-color);
         cursor: pointer;
+        color: var(--text-color-secondary);
 
         .operate-text {
           margin-left: 10px;

package/src/TUIRoom/components/ManageMember/MemberInvite/MemberInvite.vue

@@ -66,7 +66,7 @@ watch(props.userInfo, val => {
     padding-right: 10px;
     font-size: 14px;
     font-weight: 400;
-    color: var(--font-color-1);
+    color: var(--text-color-primary);
   }
 
   .member-invite-calling {
@@ -75,7 +75,7 @@ watch(props.userInfo, val => {
     padding-right: 10px;
     font-size: 14px;
     font-weight: 400;
-    color: var(--font-color-1);
+    color: var(--text-color-primary);
   }
 
   .button {

package/src/TUIRoom/components/ManageMember/MemberItem/index.vue

@@ -50,15 +50,7 @@ watch(isMemberControlAccessible, (accessible: boolean) => {
 
   &:hover {
     cursor: pointer;
-    background: var(--hover-bg-color);
+    background-color: var(--list-color-hover);
   }
 }
-
-.tui-theme-black .member-item-container {
-  --hover-bg-color: rgba(79, 88, 107, 0.2);
-}
-
-.tui-theme-white .member-item-container {
-  --hover-bg-color: rgba(213, 224, 242, 0.3);
-}
 </style>

package/src/TUIRoom/components/ManageMember/MemberItemCommon/MemberInfo.vue

@@ -130,14 +130,6 @@ const iconList = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-black .member-av-state {
-  --icon-color: #a3aec7;
-}
-
-.tui-theme-white .member-av-state {
-  --icon-color: #b2bbd1;
-}
-
 .member-info,
 .member-info-mobile {
   display: flex;
@@ -166,9 +158,9 @@ const iconList = computed(() => {
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
-      color: var(--font-color-1);
       text-overflow: ellipsis;
       white-space: nowrap;
+      color: var(--text-color-secondary);
     }
 
     .role-info {
@@ -178,11 +170,11 @@ const iconList = computed(() => {
       .admin-icon {
         display: flex;
         margin-left: 8px;
-        color: var(--active-color-2);
+        color: var(--text-color-link);
       }
 
       .admin-icon {
-        color: var(--orange-color);
+        color: var(--text-color-warning);
       }
 
       .user-extra-info,
@@ -193,12 +185,12 @@ const iconList = computed(() => {
         font-size: 14px;
         font-weight: 400;
         line-height: 20px;
-        color: var(--active-color-2);
+        color: var(--text-color-link);
       }
 
       .user-extra-info-admin {
-        color: var(--orange-color);
         transition: none;
+        color: var(--text-color-warning);
       }
     }
   }
@@ -219,7 +211,7 @@ const iconList = computed(() => {
     display: flex;
     align-items: center;
     height: 100%;
-    color: var(--icon-color);
+    color: var(--uikit-color-gray-7);
 
     .state-icon {
       margin-left: 16px;