@tencentcloud/roomkit-electron-vue3 2.3.3

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@tencentcloud/roomkit-electron-vue3",
+  "version": "2.3.3",
+  "main": "./lib/index.js",
+  "module": "./es/index.mjs",
+  "types": "./es/index.d.ts",
+  "homepage": "https://cloud.tencent.com/document/product/647/81962",
+  "author": "Tencent Cloud Client R&D Center",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:tencentyun/TUIRoomKit.git"
+  },
+  "keywords": [
+    "conference",
+    "tuiroomkit",
+    "webrtc",
+    "javascript"
+  ],
+  "dependencies": {
+    "@tencentcloud/chat": "latest",
+    "@tencentcloud/tui-core": "latest",
+    "@tencentcloud/tuiroom-engine-electron": "^2.3.3",
+    "@tencentcloud/universal-api": "^2.0.9",
+    "interactjs": "^1.10.26",
+    "mitt": "^3.0.0"
+  },
+  "peerDependencies": {
+    "pinia": "^2.1.7",
+    "vue": "~3.3.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "sass": "^1.72.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-css-injected-by-js": "^3.5.0",
+    "vite-plugin-dts": "^3.7.3",
+    "vue": "~3.3.13",
+    "vue-tsc": "^2.0.6"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build"
+  }
+}

package/scripts/eject.js

@@ -0,0 +1,67 @@
+/**
+ * Copy the TUIRoomKit source code into the src/components/TUIRoom directory.
+ * cd ${your_project}
+ * node node_modules/@tencentcloud/roomkit-web-vue3/scripts/eject.js
+ */
+
+const path = require('path');
+const fs = require('fs');
+const readline = require('readline').createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+const defaultTargetDir = './src/components/TUIRoom';
+
+readline.question(`This script copies the TUIRoomKit source code to the ${defaultTargetDir} path, do you want to change the copy path? (y|n)`, (answer) => {
+  if (answer.toLocaleLowerCase() === 'y' || answer.toLocaleLowerCase() === 'yes') {
+    readline.question('Please enter your copy path: ', (targetDir) => {
+      copyTUIRoomKit(targetDir);
+      readline.close();
+    });
+  } else {
+    copyTUIRoomKit();
+    readline.close();
+  }
+});
+
+
+function copyTUIRoomKit(targetDir) {
+  if (!targetDir) {
+    targetDir = defaultTargetDir;
+  }
+  const sourcePath = path.resolve(__dirname, '../src/TUIRoom');
+  const targetPath = path.resolve(process.cwd(), targetDir);
+
+  try {
+    fs.accessSync(targetPath);
+    errorLog(`${targetDir} path already exists, if you want to copy it, please delete the target path first or re-specify it!`);
+    return;
+  } catch (error) {
+    fs.mkdirSync(targetPath, { recursive: true });
+  }
+  copyExitsFolder(sourcePath, targetPath);
+  successLog(`The TUIRoomKit source code has been successfully copied to the ${targetDir} path!`);
+}
+
+function copyExitsFolder(src, dest) {
+  const files = fs.readdirSync(src);
+  files.forEach((file) => {
+    const srcPath = path.join(src, file);
+    const destPath = path.join(dest, file);
+    if (fs.statSync(srcPath).isDirectory()) {
+      fs.mkdirSync(destPath);
+      copyExitsFolder(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  });
+}
+
+function errorLog(info) {
+  console.log('\x1B[31m%s\x1B[0m', `【ERROR】${info}`);
+}
+
+function successLog(info) {
+  console.log('\x1B[32m', `【SUCCESS】${info}`);
+}

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

@@ -0,0 +1,160 @@
+.tui-theme-black {
+  --background-color-1: #0F1014;
+  --background-color-2: #22262E;
+  --background-color-3: #4F586B;
+  --background-color-4: #D5E0F2;
+  --background-color-5: transparent;
+  --background-color-6: #373942;
+  --background-color-7: #2E323D;
+  --background-color-8: #22262E;
+  --background-color-9: #2E323D;
+  --background-color-10: #2B2F38;
+  --background-color-11: #2B303A;
+  --background-color-12: #4F586B;
+  --font-color-1: #D5E0F2;
+  --font-color-2: #6B758A;
+  --font-color-3: #B3B8C8;
+  --font-color-4: #4F586B;
+  --font-color-5: #7C85A6;
+  --font-color-6: #CFD5E6;
+  --font-color-7: #FFFFFF;
+  --font-color-8: #8F9AB2;
+  --title-color: #000000;
+  --stroke-color: rgba(79, 88, 107, 0.30);
+  --stroke-color-2: #434956;
+  --border-color: #2E323D;
+  --disable-color: #2B2F38;
+  --active-color-1: #1C66E5;
+  --active-color-2: #4791FF;
+  --green-color: #27C39F;
+  --orange-color: #F06C4B;
+  --white-color: #FFFFFF;
+  --black-color: #000000;
+  --red-color: #ED414D;
+  --red-color-2: #F23C5B;
+  --red-color-3: #E5395C;
+
+  --color-font: #D5E0F2;
+  --control-content: rgba(27, 30, 38, 0.9);
+  --background-image-color: rgba(61,119,255,0.53);
+  --input-color: rgba(27,30,38,0.90);
+  --create-room-mode-color-bg:#1D2437;
+  --user-control-container-color-bg: rgba(46,50,61,0.60);
+  --user-control-container-shadow: none;
+  --stream-container-flatten-bg-color: #0D0F15;
+  --room-header-bg-color: #1D2029;
+  --room-footer-bg-color: #1D2029;
+  --room-network-bg-color: #1D2029;
+  --room-audiotab-bg-color: #1D2029;
+  --room-videotab-bg-color: #1D2029;
+  --stop-share-region-bg-color: #1D2029;
+  --setting-dialog-bg-color: #1D2029;
+  --icon-arrow-hover: rgba(46,50,61,0.70);
+  --el-dialog-bg-color: #1D2029;
+  --tabs-title-font-color: #7C85A6;
+  --center-user-info-container-bg-color: #0D0F15;
+  --stream-info-bg-color: #0D0F15;
+  --el-dialog-bg-color-select: #1D2029;
+  --el-text-color-primary-select: #CFD4E6;
+  --el-text-color-regular-select: #7C85A6;
+  --el-fill-color-blank-select: #2E323D;
+  --el-border-color-select: #2E323D;
+  --setting-name-color: #CFD4E6;
+  --el-drawer-header-color: #CFD4E6;
+  --user-extra-info-bg-color: #4D70FF;
+  --user-extra-info-color: #2E323D;
+  --check-select-color: #FFFFFF;
+  --member-item-container-hover-bg-color: rgba(46,50,61,0.70);
+  --el-bg-color-select: #1D2029;
+  --el-bg-color-overlay-select: #1D2029;
+  --el-border-color-light-select: #2E323D;
+  --el-fill-color-light-select: #2E323D;
+  --input-bg-color: #2E323D;
+  --input-font-color: #CFD5E6;
+  --input-border-color: #2E323D;
+  --invite-title-color: #CFD4E6;
+  --chat-editor-bg-color: #2E323D;
+  --chat-editor-input-color:#292D38;
+  --message-list-color: #1D2029;
+  --textarea-color: #fff;
+  --send-btn-color: #3D4352;
+  --message-color: #3D4352;
+  --background-color-style: #010101;
+  --stream-container-border: #1B1E26;
+  --apply-list-container-bg-color: #1D2029;
+  --apply-list-container-color: #CFD4E6;
+  --room-sidebar-bg-color: #1D2029;
+  --create-room-option: rgba(50,59,84,0.60);
+  --create-room-option-color: #EEEEEE;
+  --create-room-option-tab: #006EFF;
+  --create-room-option-icon: #EEEEEE;
+  --create-room-option-icon-color:#EEEEEE;
+  --control-region-bg-color: rgba(13,16,21,0.60);
+  --dialog-tabs-bg-color: rgba(0,0,0,0.20);
+  --divide-line-color: #2E323D;
+  --divice-line: #CFD4E6;
+  --el-drawer-divide: #0D0F15;
+  --send-btn: #CFD4E6;
+  --invite-region: #FFFFFF;
+  --layout-list: #1D2029;
+  --layout-item: #2E323D;
+  --stream-list-container: #1D2029;
+  --more-btn-background: rgba(173,182,204,0.10);
+  --user-operate-list: #2E323D;
+  --user-operate-item: #CFD4E6;
+  --active-blur-background-color: rgba(27,93,172,0.85);
+  --divide-line-color-setting: transparent;
+  --el-disabled-background: #606266;
+  --el-disabled-border: #909399;
+  --el-border-lighter: #2E323D;
+  --title-active: #B3B8C8;
+  --mic-bar-color: #2E323D;
+  --more-notice-color: #7C85A6;
+  --setting-dialog: none;
+  --caret-color: #ffffff;
+  --apply-container-primary: #CFD4E6;
+  --apply-container-outline: #CFD4E6;
+  --el-drawer-body: #1D2029;
+  --input-color-setting: #1D2029;
+  --input-color-setting-hover: #2E323D;
+  --switch-core-bg: #2E323D;
+  --input-color-font: #CFD4E6;
+  --input-color-setting-border: #2E323D;
+  --el-message-box: #1D2029;
+  --el-message-box-title: #CFD4E6;
+  --el-button-text-color: #7C85A6;
+  --selected-screen-share-dialog: #006EFF;
+  /* H5 New Content */
+  --log-out-mobile: rgba(0, 0, 0, 0.7);
+  --log-out: #2C2C2E;
+  --log-out-cancel: #2C2C2E;
+  --room-detail: #292D38;
+  --room-detail-background: black;
+  --room-detail-title: white;
+  --choose-type: #4F515A;
+  --emoji-background-color:#2f313b;
+  --chat-editor-input-color-h5:#292D38;
+  --chat-editor-bg-color-h5: #0D1015;
+  --message-list-color-h5: #1B1E26;
+  --popup-mute-background-color-h5: #FFFFFF;
+  --mute-button-color-h5: #CFD5E6;
+  --member-control-background-color-h5: #1B1E26;
+  --member-border-color-h5:rgba(207, 212, 230, 0.1);
+  --member-title-content-h5: #CFD5E6;
+  --end-control-text-h5: #292D38;
+  --end-control-title-h5: #CACACB;
+  --end-control-cancel-h5: #FFFFFF;
+  --transfer-input-color-h5: #292D38;
+  --popup-background-color-h5: #1B1E26;
+  --popup-title-color-h5: #CFD4E6;
+  --popup-content-color-h5: #7C85A6;
+  --close-cancel-h5: #5a5a5e;
+  --dialog-title-h5: #FFFFFF;
+  --manage-member-button-h5:#292D38;
+  --message-body-h5: #292D38;
+  --user-extra-info-bg-color-h5: #0565FA;
+  --user-extra-info-color-h5: #FFFFFF;
+  --apply-container-background-outline-h5: #292D38;
+  --apply-container-outline-h5: #CFD5E6;
+  --mute-all-h5: #FF2E2E
+}

package/src/TUIRoom/assets/style/global.scss

@@ -0,0 +1,23 @@
+body, html {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+#roomContainer {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  overflow: auto;
+  touch-action: manipulation;
+}
+
+#roomContainer *, ::before, ::after{
+	box-sizing: border-box;
+}
+
+.pre-conference-container *, ::before, ::after{
+	box-sizing: border-box;
+}

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

@@ -0,0 +1,158 @@
+.tui-theme-white {
+  --background-color-1: #FFFFFF;
+  --background-color-2: #FBFCFE;
+  --background-color-3: #F0F3FA;
+  --background-color-4: #D5E0F2;
+  --background-color-5: transparent;
+  --background-color-6: #BDBDBD;
+  --background-color-7: #F9FAFC;
+  --background-color-8: #FFFFFF;
+  --background-color-9: #F7F9FC;
+  --background-color-10: #E7EAF7;
+  --background-color-11: #F0F3FA;
+  --background-color-12: #FFFFFF;
+  --font-color-1: #4F586B;
+  --font-color-2: #B2BBD1;
+  --font-color-3: #000000;
+  --font-color-4: #4F586B;
+  --font-color-5: #4F586B;
+  --font-color-6: #0F1014;
+  --font-color-7: #FFFFFF;
+  --font-color-8: #4F586B;
+  --title-color: #0F1014;
+  --stroke-color: #E4EAF7;
+  --stroke-color-2: #EAEFF8;
+  --border-color: #E4E8EE;
+  --disable-color: #F7F9FC;
+  --active-color-1: #1C66E5;
+  --active-color-2: #1C66E5;
+  --green-color: #27C39F;
+  --orange-color: #F06C4B;
+  --white-color: #FFFFFF;
+  --black-color: #000000;
+  --red-color: #ED414D;
+  --red-color-2: #F23C5B;
+  --red-color-3: #E5395C;
+
+  --control-content: #FFFFFF;
+  --background-image-color: transparent;
+  --input-color: #FFFFFF;
+  --create-room-mode-color-bg: #FFFFFF;
+  --user-control-container-color-bg: #E8E8E8;
+  --user-control-container-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px;
+  --stream-container-flatten-bg-color: rgba(242,242,242,1);
+  --room-header-bg-color: #FFFFFF;
+  --room-footer-bg-color: #FFFFFF;
+  --room-network-bg-color: #FFFFFF;
+  --room-audiotab-bg-color: #FFFFFF;
+  --room-videotab-bg-color: #FFFFFF;
+  --stop-share-region-bg-color: #FFFFFF;
+  --setting-dialog-bg-color: #FFFFFF;
+  --icon-arrow-hover: rgba(232, 232, 232, 0.7);
+  --el-dialog-bg-color: #FFFFFF;
+  --tabs-title-font-color: #000000;
+  --center-user-info-container-bg-color: #F2F2F2;
+  --stream-info-bg-color: #FFFFFF;
+  --title-color-bg: #666666;
+  --title-color-font: #000000;
+  --el-dialog-bg-color-select: #FFFFFF;
+  --el-text-color-primary-select: #000000;
+  --el-text-color-regular-select: #596174;
+  --el-fill-color-blank-select: #FFFFFF;
+  --el-border-color-select: #C8CACC;
+  --setting-name-color: #000000;
+  --el-drawer-header-color: #000000;
+  --user-extra-info-bg-color: #006EFF;
+  --user-extra-info-color: #FFFFFF;
+  --member-item-container-hover-bg-color: #F3F3F3;
+  --el-bg-color-select: #FFFFFF;
+  --el-bg-color-overlay-select: #F2F2F2;
+  --el-border-color-light-select: #F2F2F2;
+  --el-fill-color-light-select: rgba(222, 222, 215, 0.7);
+  --input-bg-color: #F2F2F2;
+  --input-font-color: #000000;
+  --input-border-color: #F2F2F2;
+  --invite-title-color: #7C85A6;
+  --chat-editor-bg-color: #FFFFFF;
+  --message-list-color: #F6F6F6;
+  --textarea-color: #000000;
+  --send-btn-color: #006EFF;
+  --message-color: #006EFF;
+  --stream-container-border: #ffffff;
+  --apply-list-container-bg-color: #F2F2F2;
+  --apply-list-container-color: #000000;
+  --room-sidebar-bg-color: #F2F2F2;
+  --create-room-option: #eeeeee;
+  --create-room-option-tab: #006EFF;
+  --create-room-option-color: #006EFF;
+  --create-room-option-icon: #000000;
+  --create-room-option-icon-color:#006EFF;
+  --control-region-bg-color: #EEEEEE;
+  --dialog-tabs-bg-color: #F0F3FA;
+  --divide-line-color: transparent;
+  --divice-line: #dcdcdc;
+  --el-drawer-divide: transparent;
+  --send-btn: #FFFFFF;
+  --invite-region: #000000;
+  --layout-list: #EEEEEE;
+  --layout-item: #FFFFFF;
+  --stream-list-container: #EEEEEE;
+  --more-btn-background: #006EFF;
+  --user-operate-list: #EEEEEE;
+  --user-operate-item: #1D1029;
+  --active-blur-background-color: transparent;
+  --divide-line-color-setting: #dcdcdc;
+  --el-disabled-border: #b6b6b6;
+  --el-disabled-background: #dcdcdc;
+  --el-border-lighter: #dcdcdc;
+  --title-active: #666666;
+  --mic-bar-color: #babbbe;
+  --more-notice-color: #000000;
+  --setting-dialog: 8px;
+  --caret-color: #000000;
+  --apply-container-primary: #FFFFFF;
+  --apply-container-outline: #000000;
+  --el-drawer-body: #FFFFFF;
+  --input-color-setting: #FFFFFF;
+  --input-color-setting-hover: #f5f7fa;
+  --switch-core-bg: #dcdfe6;
+  --input-color-font: #646366;
+  --input-color-setting-border: #babebe;
+  --el-message-box: #FFFFFF;
+  --el-message-box-title: #000000;
+  --el-button-text-color: #646366;
+  --selected-screen-share-dialog: #006EFF;
+  /* H5 New Content */
+  --log-out-mobile: rgba(0, 0, 0, 0.7);
+  --log-out: #F9F9F9C7;
+  --log-out-cancel: #FFFFFF;
+  --room-detail: #F5F5F5;
+  --room-detail-background: white;
+  --room-detail-title: black;
+  --choose-type: #E1E1E3;
+  --emoji-background-color:#efecec;
+  --chat-editor-input-color-h5:#dfdcdc;
+  --chat-editor-bg-color-h5: #f1f1f1;
+  --message-list-color-h5: #d4d4d4;
+  --popup-mute-background-color-h5: #ececed;
+  --mute-button-color-h5: #FFFFFF;
+  --member-control-background-color-h5: #F2F2F2;
+  --member-border-color-h5: #FFFFFF;
+  --member-title-content-h5: #5f5c5c;
+  --end-control-text-h5: #CFD4E6;
+  --end-control-title-h5: rgba(37, 37, 37, 0.78);
+  --end-control-cancel-h5: #2C2C2E;
+  --transfer-input-color-h5: #d4d4d4;
+  --popup-background-color-h5: #d4d4d4;
+  --popup-title-color-h5: #141313;
+  --popup-content-color-h5: #636060;
+  --close-cancel-h5: #006EFF;
+  --dialog-title-h5: #2B2E38;
+  --manage-member-button-h5:#006EFF;
+  --message-body-h5: #817e7e;
+  --user-extra-info-bg-color-h5: #006EFF;
+  --user-extra-info-color-h5: #FFFFFF;
+  --apply-container-background-outline-h5: #006EFF;
+  --apply-container-outline-h5: #FFFFFF;
+  --mute-all-h5: #FFFFFF
+}

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

@@ -0,0 +1,92 @@
+<template>
+  <div :class="['chat-editor', { 'disable': cannotSendMessage }]">
+    <emoji class="chat-emoji" @choose-emoji="handleChooseEmoji"></emoji>
+    <textarea
+      ref="editorInputEle"
+      v-model="sendMsg"
+      :disabled="cannotSendMessage"
+      class="content-bottom-input"
+      :placeholder="cannotSendMessage ? t('Muted by the moderator') : t('Type a message')"
+      @keyup.enter="sendMessage"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import emoji from '../EditorTools/index.vue';
+import useChatEditor from './useChatEditor';
+const {
+  t,
+  editorInputEle,
+  sendMsg,
+  cannotSendMessage,
+  sendMessage,
+  handleChooseEmoji,
+} = useChatEditor();
+</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 {
+  width: 100%;
+  height: 150px;
+  box-sizing: border-box;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--input-border-color);
+  border-radius: 8px;
+  padding: 12px 16px;
+  position: relative;
+  .chat-emoji {
+    display: flex;
+  }
+  .content-bottom-input {
+    height: 100%;
+    border: none;
+    background: var(--chat-editor-color);
+    color: var(--textarea-color);
+    box-sizing: border-box;
+    caret-color: var(--caret-color);
+    resize: none;
+    padding: 0;
+    margin-top: 8px;
+    font-family: 'PingFang SC';
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    &:focus-visible {
+      outline: none;
+    }
+    &::placeholder {
+      color: rgba(143, 154, 178, 0.7);
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  &.disable {
+    background-color: var(--disable-color);
+    .chat-emoji {
+      color: #8f9ab2;
+      pointer-events: none;
+    }
+    .content-bottom-input {
+      &:disabled {
+        background-color: var(--disable-color);
+      }
+    }
+  }
+}
+</style>

package/src/TUIRoom/components/Chat/ChatEditor/useChatEditor.ts

@@ -0,0 +1,95 @@
+import { computed, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import TUIMessage from '../../common/base/Message/index';
+
+import { TencentCloudChat } from '@tencentcloud/tuiroom-engine-electron';
+import useGetRoomEngine from '../../../hooks/useRoomEngine';
+import { useChatStore } from '../../../stores/chat';
+import { useRoomStore } from '../../../stores/room';
+import { useI18n } from '../../../locales';
+import { useBasicStore } from '../../../stores/basic';
+import { decodeSendTextMsg } from '../util';
+export default function useChatEditor() {
+  const roomEngine = useGetRoomEngine();
+
+  const { t } = useI18n();
+  const basicStore = useBasicStore();
+  const chatStore = useChatStore();
+  const roomStore = useRoomStore();
+
+  const { roomId } = storeToRefs(basicStore);
+  const { isMessageDisableByAdmin } = storeToRefs(chatStore);
+  const { isMessageDisableForAllUser } = storeToRefs(roomStore);
+  const editorInputEle = ref();
+  const sendMsg = ref('');
+  const isEmojiToolbarVisible = ref(false);
+  watch(isMessageDisableByAdmin, (value) => {
+    if (value) {
+      sendMsg.value = '';
+    }
+  });
+
+  watch(isMessageDisableForAllUser, (value) => {
+    if (value) {
+      sendMsg.value = '';
+    }
+  });
+  const cannotSendMessage = computed(() => Boolean(isMessageDisableByAdmin.value || isMessageDisableForAllUser.value));
+  const sendMessage = async () => {
+    const result = decodeSendTextMsg(sendMsg.value);
+    if (result === '') {
+      return;
+    }
+    sendMsg.value = '';
+    isEmojiToolbarVisible.value = false;
+    try {
+      const tim = roomEngine.instance?.getTIM();
+      if (!tim) {
+        throw new Error('tim is null');
+      }
+      const message = tim.createTextMessage({
+        to: roomId.value,
+        conversationType: TencentCloudChat.TYPES.CONV_GROUP,
+        payload: {
+          text: result,
+        },
+      });
+      await tim.sendMessage(message);
+      chatStore.updateMessageList({
+        ID: Math.random().toString(),
+        type: 'TIMTextElem',
+        payload: {
+          text: result,
+        },
+        nick: roomStore.localUser.userName || roomStore.localUser.userId,
+        from: roomStore.localUser.userId,
+        flow: 'out',
+        sequence: Math.random(),
+      });
+    } catch (e) {
+    /**
+     * Message delivery failure
+    **/
+      TUIMessage({ type: 'error', message: t('Failed to send the message') });
+    }
+  };
+
+  const handleChooseEmoji = (emojiName: string) => {
+    sendMsg.value += emojiName;
+    editorInputEle.value.focus();
+  };
+  const togglePopover = () => {
+    isEmojiToolbarVisible.value = !isEmojiToolbarVisible.value;
+  };
+  return {
+    t,
+    editorInputEle,
+    sendMsg,
+    isMessageDisableByAdmin,
+    cannotSendMessage,
+    sendMessage,
+    handleChooseEmoji,
+    isEmojiToolbarVisible,
+    togglePopover,
+  };
+}