@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.2

package/lib/services/manager/chatManager.js

@@ -0,0 +1,130 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const TUICore = require("@tencentcloud/tui-core");
+const types = require("../types.js");
+const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
+const avatar = require("../../assets/imgs/avatar.png.js");
+const THEME = {
+  LIGHT: "LIGHT",
+  DARK: "DARK"
+};
+const _ChatManager = class _ChatManager {
+  constructor(service) {
+    __publicField(this, "service");
+    __publicField(this, "isRoomType", false);
+    this.service = service;
+    this.bindEventContext();
+    this.bindEvent();
+    TUICore.TUICore.registerEvent(
+      TUICore.TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED,
+      TUICore.TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED,
+      this
+    );
+  }
+  static getInstance(ctx) {
+    if (!_ChatManager.instance) {
+      _ChatManager.instance = new _ChatManager(ctx);
+    }
+    return _ChatManager.instance;
+  }
+  static destroyInstance() {
+    if (!_ChatManager.instance) return;
+    _ChatManager.instance = void 0;
+  }
+  dispose() {
+    this.unbindEvent();
+  }
+  reset() {
+    TUICore.TUICore.unregisterExtension(
+      TUICore.TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED,
+      this
+    );
+  }
+  setChatType(type) {
+    this.isRoomType = type;
+  }
+  async onNotifyEvent(eventName, subKey, options) {
+    if (!this.isRoomType) return;
+    if (eventName === TUICore.TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED) {
+      if (subKey === TUICore.TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED) {
+        TUICore.TUICore.callService({
+          serviceName: TUICore.TUIConstants.TUIChat.SERVICE.NAME,
+          method: TUICore.TUIConstants.TUIChat.SERVICE.METHOD.SET_CHAT_TYPE,
+          params: {
+            chatType: TUICore.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 || avatar.default
+            }
+          ])
+        );
+        TUICore.TUICore.callService({
+          serviceName: TUICore.TUIConstants.TUIChat.SERVICE.NAME,
+          method: TUICore.TUIConstants.TUIChat.SERVICE.METHOD.UPDATE_MESSAGE_INFO,
+          params: { userInfo: result }
+        });
+      }
+    }
+  }
+  onLanguageChanged(language) {
+    TUICore.TUICore.notifyEvent(
+      TUICore.TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED,
+      TUICore.TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS,
+      { language }
+    );
+  }
+  onThemeChanged(theme) {
+    const currentTheme = theme === "black" ? THEME.DARK : THEME.LIGHT;
+    TUICore.TUICore.notifyEvent(
+      TUICore.TUIConstants.TUITheme.EVENT.THEME_CHANGED,
+      TUICore.TUIConstants.TUITheme.EVENT_SUB_KEY.CHANGE_SUCCESS,
+      { theme: currentTheme }
+    );
+  }
+  onUserNameCardChanged(eventInfo) {
+    const { userId, nameCard } = eventInfo.userInfo;
+    const result = { [userId]: { nameCard } };
+    TUICore.TUICore.callService({
+      serviceName: TUICore.TUIConstants.TUIChat.SERVICE.NAME,
+      method: TUICore.TUIConstants.TUIChat.SERVICE.METHOD.UPDATE_MESSAGE_INFO,
+      params: { userInfo: result }
+    });
+  }
+  bindEventContext() {
+    this.onLanguageChanged = this.onLanguageChanged.bind(this);
+    this.onThemeChanged = this.onThemeChanged.bind(this);
+    this.onUserNameCardChanged = this.onUserNameCardChanged.bind(this);
+  }
+  bindEvent() {
+    this.service.on(types.EventType.LANGUAGE_CHANGED, this.onLanguageChanged);
+    this.service.on(types.EventType.THEME_CHANGED, this.onThemeChanged);
+    TUIRoomEngine.once("ready", () => {
+      var _a;
+      (_a = this.service.roomEngine.instance) == null ? void 0 : _a.on(
+        TUIRoomEngine.TUIRoomEvents.onUserInfoChanged,
+        this.onUserNameCardChanged
+      );
+    });
+  }
+  unbindEvent() {
+    var _a;
+    this.service.off(types.EventType.LANGUAGE_CHANGED, this.onLanguageChanged);
+    this.service.off(types.EventType.THEME_CHANGED, this.onThemeChanged);
+    (_a = this.service.roomEngine.instance) == null ? void 0 : _a.off(
+      TUIRoomEngine.TUIRoomEvents.onUserInfoChanged,
+      this.onUserNameCardChanged
+    );
+  }
+};
+__publicField(_ChatManager, "instance");
+let ChatManager = _ChatManager;
+exports.ChatManager = ChatManager;

package/lib/services/manager/componentManager.d.ts

@@ -1,10 +1,10 @@
-import { IRoomService } from '..';
+import { IRoomService } from '../';
 
 interface IComponentManager {
     getComponentConfig(name: ComponentName): ComponentConfigItem;
     setComponentConfig(options: Partial<ComponentConfig>): boolean;
 }
-declare const componentNames: readonly ["SwitchTheme", "LayoutControl", "RoomInfo", "RoomLink", "Language", "UserInfo", "ScreenShare", "FullScreen", "ManageMemberControl", "InviteControl", "ChatControl", "MoreControl", "VirtualBackground"];
+declare const componentNames: readonly ["SwitchTheme", "LayoutControl", "RoomInfo", "RoomLink", "Language", "UserInfo", "ScreenShare", "FullScreen", "ManageMemberControl", "InviteControl", "ChatControl", "MoreControl", "VirtualBackground", "BasicBeauty", "AIControl"];
 export type ComponentName = (typeof componentNames)[number];
 type ComponentConfigItem = {
     visible: boolean;

package/lib/services/manager/componentManager.js

@@ -17,7 +17,9 @@ const componentNames = [
   "InviteControl",
   "ChatControl",
   "MoreControl",
-  "VirtualBackground"
+  "VirtualBackground",
+  "BasicBeauty",
+  "AIControl"
 ];
 const logPrefix = "[RoomService ComponentManager]";
 const defaultConfig = {
@@ -33,7 +35,9 @@ const defaultConfig = {
   InviteControl: { visible: true },
   ChatControl: { visible: true },
   MoreControl: { visible: true },
-  VirtualBackground: { visible: false }
+  VirtualBackground: { visible: false },
+  AIControl: { visible: false },
+  BasicBeauty: { visible: true }
 };
 const _ComponentManager = class _ComponentManager {
   constructor(service) {

package/lib/services/manager/configManager.js

@@ -27,7 +27,6 @@ class ConfigManager {
     );
   }
   setLanguage(language) {
-    if (language === index.default.global.locale.value) return;
     index.default.global.locale.value = language;
     this.service.basicStore.setLang(language);
     this.service.emit(types.EventType.LANGUAGE_CHANGED, language);

package/lib/services/manager/dataReportManager.d.ts

@@ -0,0 +1,10 @@
+export declare enum MetricsKey {
+    startSharingWhiteboard = 106000,
+    stopSharingWhiteboard = 106001,
+    startAnnotating = 106002,
+    stopAnnotating = 106003,
+    saveWhiteboard = 106004
+}
+export declare class DataReportManager {
+    static reportCount(key: MetricsKey): void;
+}

package/lib/services/manager/dataReportManager.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
+const _package = require("../../package.json.js");
+const appVersion = _package.default.version;
+const KEY_METRICS_API = "KeyMetricsStats";
+var MetricsKey = /* @__PURE__ */ ((MetricsKey2) => {
+  MetricsKey2[MetricsKey2["startSharingWhiteboard"] = 106e3] = "startSharingWhiteboard";
+  MetricsKey2[MetricsKey2["stopSharingWhiteboard"] = 106001] = "stopSharingWhiteboard";
+  MetricsKey2[MetricsKey2["startAnnotating"] = 106002] = "startAnnotating";
+  MetricsKey2[MetricsKey2["stopAnnotating"] = 106003] = "stopAnnotating";
+  MetricsKey2[MetricsKey2["saveWhiteboard"] = 106004] = "saveWhiteboard";
+  return MetricsKey2;
+})(MetricsKey || {});
+class DataReportManager {
+  static reportCount(key) {
+    TUIRoomEngine.callExperimentalAPI(
+      JSON.stringify({
+        api: KEY_METRICS_API,
+        params: {
+          opt: "count",
+          key,
+          version: appVersion
+        }
+      })
+    );
+  }
+}
+exports.DataReportManager = DataReportManager;
+exports.MetricsKey = MetricsKey;

package/lib/services/manager/roomActionManager.d.ts

@@ -11,6 +11,7 @@ export interface DeviceParams {
 export interface StartParams extends DeviceParams {
     roomName?: string;
     isSeatEnabled?: boolean;
+    password?: string;
 }
 export interface JoinParams extends DeviceParams {
     password?: string;
@@ -30,7 +31,7 @@ export declare class RoomActionManager {
         roomId: string;
         roomName?: string;
         roomMode?: 'FreeToSpeak' | 'SpeakAfterTakingSeat';
-        roomParam?: DeviceParams;
+        roomParam?: StartParams;
     }): Promise<void>;
     private handleRoomCreation;
     enterRoom(options: {

package/lib/services/manager/roomActionManager.js

@@ -25,7 +25,8 @@ class RoomActionManager {
       isOpenMicrophone = false,
       defaultCameraId,
       defaultMicrophoneId,
-      defaultSpeakerId
+      defaultSpeakerId,
+      password
     } = params;
     const roomMode = isSeatEnabled ? "SpeakAfterTakingSeat" : "FreeToSpeak";
     await this.createRoom({
@@ -37,7 +38,8 @@ class RoomActionManager {
         isOpenMicrophone,
         defaultCameraId,
         defaultMicrophoneId,
-        defaultSpeakerId
+        defaultSpeakerId,
+        password
       }
     });
     await this.enterRoom({
@@ -47,10 +49,11 @@ class RoomActionManager {
         isOpenMicrophone,
         defaultCameraId,
         defaultMicrophoneId,
-        defaultSpeakerId
+        defaultSpeakerId,
+        password
       }
     });
-    this.service.emit(types.EventType.ROOM_START);
+    this.service.emit(types.EventType.ROOM_START, { roomId });
   }
   async join(roomId, params = {}) {
     const {
@@ -72,7 +75,7 @@ class RoomActionManager {
         password
       }
     });
-    this.service.emit(types.EventType.ROOM_JOIN);
+    this.service.emit(types.EventType.ROOM_JOIN, { roomId });
   }
   async leaveRoom() {
     var _a;
@@ -100,13 +103,14 @@ class RoomActionManager {
   }
   async createRoom(options) {
     try {
-      const { roomId, roomName, roomMode } = options;
+      const { roomId, roomName, roomMode, roomParam } = options;
       const roomParams = {
         roomId,
         roomName,
         roomType: TUIRoomEngine.TUIRoomType.kConference,
         isSeatEnabled: roomMode !== "FreeToSpeak",
-        seatMode: roomMode === "SpeakAfterTakingSeat" ? TUIRoomEngine.TUISeatMode.kApplyToTake : void 0
+        seatMode: roomMode === "SpeakAfterTakingSeat" ? TUIRoomEngine.TUISeatMode.kApplyToTake : void 0,
+        password: (roomParam == null ? void 0 : roomParam.password) || ""
       };
       await this.handleRoomCreation(roomParams, options);
     } catch (error) {

package/lib/services/roomService.d.ts

@@ -9,9 +9,12 @@ import { MediaManager } from './manager/MediaManager';
 import { JoinParams, RoomActionManager, StartParams, RoomParamsInfo } from './manager/roomActionManager';
 import { WaterMark } from './function/waterMark';
 import { VirtualBackground } from './function/virtualBackground';
+import { BasicBeauty } from './function/basicBeauty';
 import { ScheduleConferenceManager } from './manager/scheduleConferenceManager';
 import { ConferenceInvitationManager } from './manager/conferenceInvitationManager';
 import { ErrorHandler } from './function/errorHandler';
+import { ChatManager } from './manager/chatManager';
+import { AITask } from './function/aiTask';
 
 export declare const roomEngine: Record<string, TUIRoomEngine | null>;
 export declare class RoomService implements IRoomService {
@@ -25,9 +28,12 @@ export declare class RoomService implements IRoomService {
     roomActionManager: RoomActionManager;
     waterMark: WaterMark;
     virtualBackground: VirtualBackground;
+    basicBeauty: BasicBeauty;
     scheduleConferenceManager: ScheduleConferenceManager;
     conferenceInvitationManager: ConferenceInvitationManager;
     errorHandler: ErrorHandler;
+    chatManager: ChatManager;
+    aiTask: AITask;
     roomEngine: Record<string, TUIRoomEngine | null>;
     t: any;
     get basicStore(): any;

package/lib/services/roomService.js

@@ -23,9 +23,13 @@ const MediaManager = require("./manager/MediaManager.js");
 const roomActionManager = require("./manager/roomActionManager.js");
 const waterMark = require("./function/waterMark.js");
 const virtualBackground = require("./function/virtualBackground.js");
+const basicBeauty = require("./function/basicBeauty.js");
 const scheduleConferenceManager = require("./manager/scheduleConferenceManager.js");
 const conferenceInvitationManager = require("./manager/conferenceInvitationManager.js");
 const errorHandler = require("./function/errorHandler.js");
+const chatManager = require("./manager/chatManager.js");
+const TUICore = require("@tencentcloud/tui-core");
+const aiTask = require("./function/aiTask.js");
 const { t } = index.default.global;
 const logPrefix = "[RoomService]";
 const roomEngine = useRoomEngine.default();
@@ -40,9 +44,12 @@ const _RoomService = class _RoomService {
     __publicField(this, "roomActionManager", new roomActionManager.RoomActionManager(this));
     __publicField(this, "waterMark", new waterMark.WaterMark(this));
     __publicField(this, "virtualBackground", new virtualBackground.VirtualBackground(this));
+    __publicField(this, "basicBeauty", new basicBeauty.BasicBeauty(this));
     __publicField(this, "scheduleConferenceManager", new scheduleConferenceManager.ScheduleConferenceManager(this));
     __publicField(this, "conferenceInvitationManager", new conferenceInvitationManager.ConferenceInvitationManager(this));
     __publicField(this, "errorHandler", new errorHandler.ErrorHandler(this));
+    __publicField(this, "chatManager", new chatManager.ChatManager(this));
+    __publicField(this, "aiTask", new aiTask.AITask(this));
     __publicField(this, "roomEngine", roomEngine);
     __publicField(this, "t", t);
     this.lifeCycleManager.start();
@@ -88,9 +95,11 @@ const _RoomService = class _RoomService {
     _RoomService.instance.unBindRoomEngineEvents();
     _RoomService.instance.waterMark.dispose();
     _RoomService.instance.virtualBackground.dispose();
+    _RoomService.instance.basicBeauty.dispose();
     _RoomService.instance.scheduleConferenceManager.dispose();
     _RoomService.instance.conferenceInvitationManager.dispose();
     _RoomService.instance.mediaManager.dispose();
+    _RoomService.instance.chatManager.dispose();
     _RoomService.instance = void 0;
   }
   useExtension(extension) {
@@ -355,7 +364,14 @@ const _RoomService = class _RoomService {
       userName = userId,
       avatarUrl = ""
     } = option;
-    await TUIRoomEngine.login({ sdkAppId, userId, userSig });
+    TUICore.TUILogin.login({
+      SDKAppID: sdkAppId,
+      userID: userId,
+      userSig,
+      useUploadPlugin: true
+    });
+    const { chat: chat2 } = TUICore.TUILogin.getContext();
+    await TUIRoomEngine.login({ sdkAppId, userId, userSig, tim: chat2 });
     await TUIRoomEngine.setSelfInfo({ userName, avatarUrl });
     this.emit(types.EventType.ROOM_LOGIN);
   }

package/lib/services/types.d.ts

@@ -6,6 +6,7 @@ import { LifeCycleManager } from './manager/lifeCycleManager';
 import { ScheduleConferenceManager } from './manager/scheduleConferenceManager';
 import { RoomActionManager } from './manager/roomActionManager';
 import { ErrorHandler } from './function/errorHandler';
+import { AITask } from './function/aiTask';
 import { ConferenceInvitationManager } from './manager/conferenceInvitationManager';
 
 export interface IRoomService {
@@ -19,6 +20,7 @@ export interface IRoomService {
     scheduleConferenceManager: ScheduleConferenceManager;
     conferenceInvitationManager: ConferenceInvitationManager;
     errorHandler: ErrorHandler;
+    aiTask: AITask;
     on: (eventType: EventType, callback: (data?: any) => any) => void;
     off: (eventType: EventType, callback: (data?: any) => void) => void;
     emit: (eventType: EventType, data?: any) => void;

package/lib/stores/basic.js

@@ -58,10 +58,7 @@ const useBasicStore = pinia.defineStore("basic", {
         visible: true
       }
     },
-    scene: "default",
-    isSharing: false,
-    isWhiteboardVisiable: false,
-    isSharingScreen: false
+    scene: "default"
   }),
   getters: {},
   actions: {
@@ -176,15 +173,6 @@ const useBasicStore = pinia.defineStore("basic", {
     setScene(scene) {
       this.scene = scene;
     },
-    setIsSharing(isSharing) {
-      this.isSharing = isSharing;
-    },
-    setWhiteboardVisiable(visible) {
-      this.isWhiteboardVisiable = visible;
-    },
-    setIsSharingScreen(isSharingScreen) {
-      this.isSharingScreen = isSharingScreen;
-    },
     reset() {
       this.isSidebarOpen = false;
       this.layout = getDefaultLayout();
@@ -202,9 +190,6 @@ const useBasicStore = pinia.defineStore("basic", {
       this.showHeaderTool = true;
       this.shareLink = "";
       this.isOpenMic = false;
-      this.isSharing = false;
-      this.isWhiteboardVisiable = false;
-      this.isSharingScreen = false;
     }
   }
 });

package/lib/stores/room.js

@@ -86,7 +86,11 @@ const useRoomStore = pinia.defineStore("room", {
     roomName: "",
     // Visual area user flow list
     hasOtherScreenShare: false,
-    isOnStateTabActive: true
+    isOnStateTabActive: true,
+    isLocalUserSharing: false,
+    isWhiteboardVisiable: false,
+    isSharingScreen: false,
+    isAnnotationVisiable: false
   }),
   getters: {
     localUser(state) {
@@ -544,6 +548,10 @@ const useRoomStore = pinia.defineStore("room", {
       this.maxSeatCount = 20;
       this.password = "";
       this.roomName = "";
+      this.isLocalUserSharing = false;
+      this.isWhiteboardVisiable = false;
+      this.isSharingScreen = false;
+      this.isAnnotationVisiable = false;
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/roomkit-electron-vue3",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",
@@ -18,10 +18,23 @@
     "javascript"
   ],
   "dependencies": {
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@tencentcloud/chat": "latest",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-electron": "^2.6.0",
+    "@tencentcloud/tuiroom-engine-electron": "^2.6.2",
+    "@tencentcloud/chat-uikit-engine": "2.2.7",
+    "@tencentcloud/chat-uikit-vue": "2.2.7",
     "@tencentcloud/universal-api": "^2.0.9",
+    "@tiptap/core": "^2.6.6",
+    "@tiptap/extension-document": "^2.6.6",
+    "@tiptap/extension-image": "^2.6.6",
+    "@tiptap/extension-mention": "^2.6.6",
+    "@tiptap/extension-paragraph": "^2.6.6",
+    "@tiptap/extension-placeholder": "^2.6.6",
+    "@tiptap/extension-text": "^2.6.6",
+    "@tiptap/pm": "^2.6.6",
+    "@tiptap/suggestion": "^2.6.6",
+    "dayjs": "^1.11.13",
     "interactjs": "^1.10.26",
     "mitt": "^3.0.0",
     "fabric": "^5.3.0",

package/src/TUIRoom/assets/style/black-theme.scss

@@ -11,6 +11,7 @@
   --background-color-10: #2B2F38;
   --background-color-11: #2B303A;
   --background-color-12: #4F586B;
+  --background-color-13: #F9FAFD;
   --hover-background-colo-1: rgba(213, 224, 242, 0.5);
   --font-color-1: #D5E0F2;
   --font-color-2: #6B758A;
@@ -26,6 +27,7 @@
   --stroke-color: rgba(79, 88, 107, 0.30);
   --stroke-color-2: #434956;
   --border-color: #2E323D;
+  --border-color-2: #E4E8EE;
   --disable-color: #2B2F38;
   --active-color-1: #1C66E5;
   --active-color-2: #4791FF;

package/src/TUIRoom/assets/style/white-theme.scss

@@ -11,6 +11,7 @@
   --background-color-10: #E7EAF7;
   --background-color-11: #F0F3FA;
   --background-color-12: #FFF;
+  --background-color-13: #F9FAFD;
   --hover-background-color-1: rgba(213, 224, 242, 0.5);
   --font-color-1: #4F586B;
   --font-color-2: #B2BBD1;
@@ -26,6 +27,7 @@
   --stroke-color: #E4EAF7;
   --stroke-color-2: #EAEFF8;
   --border-color: #E4E8EE;
+  --border-color-2: #E4E8EE;
   --disable-color: #F7F9FC;
   --active-color-1: #1C66E5;
   --active-color-2: #1C66E5;

package/src/TUIRoom/components/AITools/AISubtitles.vue

@@ -0,0 +1,52 @@
+<template>
+  <div v-if="subtitleLines.length" class="ai-subtitles">
+    <div v-for="(line, index) in subtitleLines" :key="index">{{ line }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue';
+import { roomService, AI_TASK, AITaskEvent } from '../../services';
+
+const rawSubtitleText = ref('');
+const subtitleLines = computed(() =>
+  rawSubtitleText.value.split('\n').filter(item => item)
+);
+
+let subtitleTimeout: ReturnType<typeof setTimeout> | null = null;
+
+const resetSubtitleTimeout = () => {
+  if (subtitleTimeout) {
+    clearTimeout(subtitleTimeout);
+  }
+
+  subtitleTimeout = setTimeout(() => {
+    rawSubtitleText.value = '';
+  }, 3000);
+};
+
+const handleAISubtitles = (data?: AITaskEvent[AI_TASK.TRANSCRIPTION_TASK]) => {
+  if (!data) return;
+  rawSubtitleText.value = data.subtitleText.value;
+  resetSubtitleTimeout();
+};
+
+roomService.aiTask.on(AI_TASK.TRANSCRIPTION_TASK, handleAISubtitles);
+
+onUnmounted(() => {
+  roomService.aiTask.off(AI_TASK.TRANSCRIPTION_TASK, handleAISubtitles);
+});
+</script>
+
+<style scoped lang="scss">
+.ai-subtitles {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  padding: 10px 12px;
+  color: #fff;
+  background-color: rgba(79, 88, 107, 0.7);
+  border-radius: 8px;
+  transform: translateX(-50%);
+}
+</style>