添加聊天

src/App.vue

@@ -16,8 +16,8 @@
                 "
               >
                 <n-tab-pane name="message" tab="聊天"></n-tab-pane>
-                <n-tab-pane name="group" tab="群聊" v-if="platform != 'orchestra'"></n-tab-pane>
-                <n-tab-pane name="contact" tab="联系人" v-if="platform != 'orchestra'"></n-tab-pane>
+                <!-- <n-tab-pane name="group" tab="群聊" v-if="platform != 'orchestra'"></n-tab-pane>
+                <n-tab-pane name="contact" tab="联系人" v-if="platform != 'orchestra'"></n-tab-pane> -->
               </n-tabs>
 
               <TUIConversation v-show="currentModel === 'message'" @current="handleCurrentConversation" :displayOnlineStatus="displayOnlineStatus" />

src/TUIKit/TUIComponents/components/transferTUI/style/web.scss

@@ -143,6 +143,6 @@ img,
 
   .emptyImg {
     width: 210px;
-    height: 210px;
+    height: 186px;
   }
 }

src/TUIKit/TUIComponents/container/TUIChat/index.vue

@@ -4,6 +4,7 @@
       <i class="icon icon-back" @click="back" v-if="env.isH5"></i>
       <TypingHeader :needTyping="needTyping" :conversation="conversation" :messageList="messageList" ref="typingRef" />
       <aside class="setting">
+        <i v-if="!conversation.groupProfile" class="icon icon-default-more" @click="showUserDetail"></i>
         <Manage v-if="conversation.groupProfile" :conversation="conversation" :userInfo="userInfo" :isH5="env.isH5" />
         <Replies :message="currentMessage" :conversation="conversation" :show="repliesDialogStatus" :isH5="env.isH5" :messageList="messageList" @closeDialog="closeDialog" ref="repliesDialog" />
       </aside>
@@ -102,7 +103,7 @@ import { MessageSystem, MessageItem, MessageTimestamp } from "./components";
 import { onClickOutside } from "@vueuse/core";
 import { Manage } from "./manage-components";
 
-import { handleAvatar, handleName, getImgLoad, isTypingMessage, deepCopy, isMessageTip, handleReferenceForShow } from "./utils/utils";
+import { handleAvatar, handleName, handleUserID, handleUserType, getImgLoad, isTypingMessage, deepCopy, isMessageTip, handleReferenceForShow } from "./utils/utils";
 
 import { getComponents } from "./index";
 
@@ -335,6 +336,16 @@ const TUIChat: any = defineComponent({
       return handleName(conversation);
     });
 
+    const conversationUserType = computed(() => {
+      const { conversation } = data;
+      return handleUserType(conversation);
+    });
+
+    const conversationUserID = computed(() => {
+      const { conversation } = data;
+      return handleUserID(conversation);
+    });
+
     const messages = computed(() => data.messageList.filter((item: any) => !item.isDeleted && !isTypingMessage(item)));
     const imageList = computed(() =>
       messages?.value?.filter((item: Message) => {
@@ -508,6 +519,22 @@ const TUIChat: any = defineComponent({
       }
     };
 
+    const showUserDetail = () => {
+      if (window.parent) {
+        window.parent?.postMessage(
+          {
+            api: "openUserDetail",
+            data: JSON.stringify({
+              username: conversationName.value,
+              userId: conversationUserID.value,
+              type: conversationUserType.value,
+            }),
+          },
+          "*"
+        );
+      }
+    };
+
     const toggleshowGroupMemberList = () => {
       data.showGroupMemberList = !data.showGroupMemberList;
     };
@@ -801,6 +828,7 @@ const TUIChat: any = defineComponent({
       handleImagePreview,
       imageList,
       resetReplyOrReference,
+      showUserDetail,
     };
   },
 });

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/typingHeader/typingHeader.vue

@@ -1,11 +1,11 @@
 <template>
-  <h1>{{ title === '对方正在输入' ? $t('TUIChat.对方正在输入') : title }}</h1>
+  <h1>{{ title === "对方正在输入" ? $t("TUIChat.对方正在输入") : title }}</h1>
 </template>
 
 <script lang="ts">
-import { defineComponent, watchEffect, watch, reactive, toRefs, computed, nextTick } from 'vue';
-import { handleName, JSONToObject, isTypingMessage } from '../../utils/utils';
-import constant from '../../../constant';
+import { defineComponent, watchEffect, watch, reactive, toRefs, computed, nextTick } from "vue";
+import { handleName, JSONToObject, isTypingMessage, handleUserID } from "../../utils/utils";
+import constant from "../../../constant";
 const TypingHeader = defineComponent({
   props: {
     needTyping: {
@@ -25,7 +25,7 @@ const TypingHeader = defineComponent({
     const data = reactive({
       messageList: [],
       conversation: {},
-      title: '',
+      title: "",
       timeValid: 0,
       myTypingStatus: 0,
       otherTypingStatus: 0,
@@ -41,8 +41,8 @@ const TypingHeader = defineComponent({
           userAction: 0,
           actionParam: constant.typeInputStatusEnd,
         },
-        description: '',
-        extension: '',
+        description: "",
+        extension: "",
       },
     });
 
@@ -53,7 +53,7 @@ const TypingHeader = defineComponent({
     });
     const conversationID = computed(() => {
       const { conversation }: any = data;
-      return conversation?.conversationID ? conversation.conversationID : '';
+      return conversation?.conversationID ? conversation.conversationID : "";
     });
     const conversationName = computed(() => {
       const { conversation }: any = data;
@@ -61,19 +61,23 @@ const TypingHeader = defineComponent({
     });
     const conversationType = computed(() => {
       const { conversation }: any = data;
-      return conversation?.type ? conversation?.type : '';
+      return conversation?.type ? conversation?.type : "";
+    });
+    const conversationUserID = computed(() => {
+      const { conversation }: any = data;
+      return handleUserID(conversation);
     });
 
     const title = computed(() => {
       if (data.needTyping && data.otherTypingStatus) {
-        return '对方正在输入';
+        return "对方正在输入";
       }
-      return conversationName?.value;
-    });
 
+      return conversationName?.value + (conversationUserID.value ? `(${conversationUserID.value})` : "");
+    });
 
     const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
-      if (!data.needTyping || conversationType.value !== 'C2C') return;
+      if (!data.needTyping || conversationType.value !== "C2C") return;
       if (new Date().getTime() / 1000 - data.lastOtherMessageTime < 30) {
         data.timeValid = 1;
       }
@@ -113,11 +117,11 @@ const TypingHeader = defineComponent({
       () => data.messageList,
       (newVal: any, oldVal: any) => {
         nextTick(() => {
-          if (newVal.length === 0 || conversationType.value !== 'C2C') {
+          if (newVal.length === 0 || conversationType.value !== "C2C") {
             return;
           }
           data.lastOtherMessageTime = getLastOtherMessageTime(newVal);
-          if (newVal[newVal.length - 1]?.flow === 'in') {
+          if (newVal[newVal.length - 1]?.flow === "in") {
             if (!isTypingMessage(newVal[newVal.length - 1])) {
               data.lastOtherMessageTime = newVal[newVal.length - 1]?.time;
               data.otherTypingStatus = 0;
@@ -152,8 +156,8 @@ const TypingHeader = defineComponent({
           userAction: isTyping ? 14 : 0,
           actionParam: isTyping ? constant.typeInputStatusIng : constant.typeInputStatusEnd,
         },
-        description: '',
-        extension: '',
+        description: "",
+        extension: "",
       };
       TypingHeader.TUIServer.sendTypingMessage(data.options);
       return;
@@ -162,7 +166,7 @@ const TypingHeader = defineComponent({
     const getLastOtherMessageTime = (messageList: any) => {
       if (!messageList) return 0;
       for (let i = messageList.length - 1; i >= 0; i--) {
-        if (!isTypingMessage(messageList[i]) && messageList[i].flow === 'in') {
+        if (!isTypingMessage(messageList[i]) && messageList[i].flow === "in") {
           return messageList[i].time;
         }
       }
@@ -200,8 +204,8 @@ const TypingHeader = defineComponent({
 export default TypingHeader;
 </script>
 <style scoped>
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');
+@import url("../../../../styles/common.scss");
+@import url("../../../../styles/icon.scss");
 h1 {
   overflow: hidden;
   white-space: nowrap;

src/TUIKit/TUIComponents/container/TUIChat/style/web.scss

@@ -523,4 +523,9 @@
 ::-webkit-scrollbar-thumb {
   border-radius: 10Px;
   background-color: #9a999c;
+}
+
+.icon-default-more {
+  margin-right: 40px;
+  cursor: pointer;
 }

src/TUIKit/TUIComponents/container/TUIChat/utils/utils.ts

@@ -23,7 +23,7 @@ export function handleAvatar(item: any) {
 
 // Handling names
 export function handleName(item: any) {
-  const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
+  // const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
   let name = "";
   switch (item.type) {
     case TIM.TYPES.CONV_C2C:
@@ -33,11 +33,30 @@ export function handleName(item: any) {
       name = item.groupProfile.name || item?.groupProfile?.groupID || "";
       break;
     case TIM.TYPES.CONV_SYSTEM:
-      name = t("系统通知");
+      name = "系统通知";
       break;
   }
   return name;
 }
+
+export function handleUserID(item: any) {
+  const userID = item?.userProfile?.userID || ""
+  if (userID) {
+    const users = userID.split('_')
+    return users[1]
+  }
+  return item?.userProfile?.userID || ""
+}
+
+export function handleUserType(item: any) {
+  const userID = item?.userProfile?.userID || ""
+  if (userID) {
+    const users = userID.split('_')
+    return users[2]
+  }
+  return ""
+}
+
 // Handle whether there is someone@
 export function handleAt(item: any) {
   const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();

src/TUIKit/TUIComponents/container/TUIConversation/components/list-item/index.vue

@@ -1,62 +1,22 @@
 <template>
-  <li
-    ref="content"
-    class="TUI-conversation-content"
-    :class="[
-      currentID === conversation.conversationID && 'selected',
-      conversation.isPinned && 'pinned',
-      isH5 ? 'list-item-h5' : ''
-    ]"
-    :id="conversation.conversationID"
-  >
-    <div
-      class="TUI-conversation-item"
-      @click.prevent.stop="handleListItem(conversation)"
-      v-TUILongPress.self="toggleDialog"
-      @click.prevent.right="toggleDialog"
-    >
+  <li ref="content" class="TUI-conversation-content" :class="[currentID === conversation.conversationID && 'selected', conversation.isPinned && 'pinned', isH5 ? 'list-item-h5' : '']" :id="conversation.conversationID">
+    <div class="TUI-conversation-item" @click.prevent.stop="handleListItem(conversation)" v-TUILongPress.self="toggleDialog" @click.prevent.right="toggleDialog">
       <aside class="left">
         <img class="avatar" :src="handleConversation?.avator(conversation)" />
-        <div
-          class="online-status"
-          :class="
-            userStatusList?.get(conversation?.userProfile?.userID)
-              ?.statusType === 1
-              ? 'online-status-online'
-              : 'online-status-offline'
-          "
-          v-if="showUserOnlineStatus()"
-        ></div>
-        <span
-          class="num"
-          v-if="
-            conversation.unreadCount > 0 &&
-            conversation.messageRemindType !== 'AcceptNotNotify'
-          "
-        >
-          {{ conversation.unreadCount > 99 ? '99+' : conversation.unreadCount }}
+        <div class="online-status" :class="userStatusList?.get(conversation?.userProfile?.userID)?.statusType === 1 ? 'online-status-online' : 'online-status-offline'" v-if="showUserOnlineStatus()"></div>
+        <span class="num" v-if="conversation.unreadCount > 0 && conversation.messageRemindType !== 'AcceptNotNotify'">
+          {{ conversation.unreadCount > 99 ? "99+" : conversation.unreadCount }}
         </span>
-        <span
-          class="num-notify"
-          v-if="
-            conversation.unreadCount > 0 &&
-            conversation.messageRemindType === 'AcceptNotNotify'
-          "
-        ></span>
+        <span class="num-notify" v-if="conversation.unreadCount > 0 && conversation.messageRemindType === 'AcceptNotNotify'"></span>
       </aside>
       <div class="content">
         <div class="content-header">
           <label>
             <p class="name">{{ handleConversation?.name(conversation) }}</p>
+            <span class="userId" v-if="handleConversation?.userID(conversation)">({{ handleConversation?.userID(conversation) }})</span>
           </label>
           <div class="middle-box">
-            <span
-              class="middle-box-at"
-              v-if="
-                conversation.type === 'GROUP' &&
-                conversation.groupAtInfoList.length > 0
-              "
-            >
+            <span class="middle-box-at" v-if="conversation.type === 'GROUP' && conversation.groupAtInfoList.length > 0">
               {{ handleConversation?.showAt(conversation) }}
             </span>
             <p>{{ handleConversation?.showMessage(conversation) }}</p>
@@ -66,111 +26,80 @@
           <span class="time">
             {{ handleConversation?.time(conversation.lastMessage.lastTime) }}
           </span>
-          <img
-            v-if="conversation.messageRemindType === 'AcceptNotNotify'"
-            class="mute-icon"
-            src="../../../../assets/icon/mute.svg"
-          />
+          <img v-if="conversation.messageRemindType === 'AcceptNotNotify'" class="mute-icon" src="../../../../assets/icon/mute.svg" />
           <i></i>
         </div>
       </div>
     </div>
     <div class="dialog dialog-item" v-if="toggle" ref="dialog">
       <p class="conversation-options" @click.stop="handleItem('delete')">
-        {{ $t('TUIConversation.删除会话') }}
+        {{ $t("TUIConversation.删除会话") }}
       </p>
-      <p
-        class="conversation-options"
-        v-if="!conversation.isPinned"
-        @click.stop="handleItem('ispinned')"
-      >
-        {{ $t('TUIConversation.置顶会话') }}
+      <p class="conversation-options" v-if="!conversation.isPinned" @click.stop="handleItem('ispinned')">
+        {{ $t("TUIConversation.置顶会话") }}
       </p>
-      <p
-        class="conversation-options"
-        v-if="conversation.isPinned"
-        @click.stop="handleItem('dispinned')"
-      >
-        {{ $t('TUIConversation.取消置顶') }}
+      <p class="conversation-options" v-if="conversation.isPinned" @click.stop="handleItem('dispinned')">
+        {{ $t("TUIConversation.取消置顶") }}
       </p>
-      <p
-        class="conversation-options"
-        v-if="
-          conversation.messageRemindType === '' ||
-          conversation.messageRemindType === 'AcceptAndNotify'
-        "
-        @click.stop="handleItem('mute')"
-      >
-        {{ $t('TUIConversation.消息免打扰') }}
+      <p class="conversation-options" v-if="conversation.messageRemindType === '' || conversation.messageRemindType === 'AcceptAndNotify'" @click.stop="handleItem('mute')">
+        {{ $t("TUIConversation.消息免打扰") }}
       </p>
-      <p
-        class="conversation-options"
-        v-if="conversation.messageRemindType === 'AcceptNotNotify'"
-        @click.stop="handleItem('notMute')"
-      >
-        {{ $t('TUIConversation.取消免打扰') }}
+      <p class="conversation-options" v-if="conversation.messageRemindType === 'AcceptNotNotify'" @click.stop="handleItem('notMute')">
+        {{ $t("TUIConversation.取消免打扰") }}
       </p>
     </div>
   </li>
 </template>
 <script lang="ts">
-import { onClickOutside, useElementBounding } from '@vueuse/core';
-import {
-  defineComponent,
-  nextTick,
-  reactive,
-  ref,
-  toRefs,
-  watch,
-  watchEffect
-} from 'vue';
-import { Conversation } from '../../interface';
+import { onClickOutside, useElementBounding } from "@vueuse/core";
+import { defineComponent, nextTick, reactive, ref, toRefs, watch, watchEffect } from "vue";
+import { Conversation } from "../../interface";
 const ListItem: any = defineComponent({
   props: {
     conversation: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     handleConversation: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     currentID: {
       type: String,
-      default: () => ''
+      default: () => "",
     },
     toggleID: {
       type: String,
-      default: () => ''
+      default: () => "",
     },
     isH5: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     displayOnlineStatus: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     userStatusList: {
       type: Map,
-      default: () => new Map()
+      default: () => new Map(),
     },
     types: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   setup(props: any, ctx: any) {
     const data = reactive({
       conversation: {} as Conversation,
-      currentID: '',
+      currentID: "",
       currentConversation: {},
       toggle: false,
-      currentuserID: '',
-      conversationType: '',
+      currentuserID: "",
+      conversationType: "",
       loop: 0,
       displayOnlineStatus: false,
-      userStatusList: new Map()
+      userStatusList: new Map(),
     });
 
     const dialog: any = ref();
@@ -178,7 +107,7 @@ const ListItem: any = defineComponent({
 
     onClickOutside(content, () => {
       if (data.toggle === true) {
-        ctx.emit('toggle', '');
+        ctx.emit("toggle", "");
       }
     });
 
@@ -188,8 +117,7 @@ const ListItem: any = defineComponent({
       data.toggle = false;
       data.displayOnlineStatus = props.displayOnlineStatus;
       data.userStatusList = props.userStatusList;
-      props.toggleID === props.conversation.conversationID &&
-        (data.toggle = true);
+      props.toggleID === props.conversation.conversationID && (data.toggle = true);
     });
 
     watch(
@@ -200,15 +128,9 @@ const ListItem: any = defineComponent({
             const DialogBound = useElementBounding(dialog);
             const ParentEle = content?.value?.offsetParent;
             const ParentBound = useElementBounding(ParentEle);
-            if (
-              DialogBound.top.value -
-                ParentBound.top.value -
-                DialogBound.height.value -
-                30 >
-              0
-            ) {
-              dialog.value.style.top = 'auto';
-              dialog.value.style.bottom = '30Px';
+            if (DialogBound.top.value - ParentBound.top.value - DialogBound.height.value - 30 > 0) {
+              dialog.value.style.top = "auto";
+              dialog.value.style.bottom = "30Px";
             }
           });
         }
@@ -216,8 +138,8 @@ const ListItem: any = defineComponent({
     );
 
     const handleListItem = (item: any) => {
-      ctx.emit('open', item);
-      ctx.emit('toggle', '');
+      ctx.emit("open", item);
+      ctx.emit("toggle", "");
     };
 
     const toggleDialog = (e?: any) => {
@@ -226,23 +148,19 @@ const ListItem: any = defineComponent({
           return false;
         };
       }
-      ctx.emit('toggle', (data.conversation as any).conversationID);
+      ctx.emit("toggle", (data.conversation as any).conversationID);
     };
 
     const handleItem = (name: string) => {
-      ctx.emit('handle', {
+      ctx.emit("handle", {
         name,
-        conversation: data.conversation
+        conversation: data.conversation,
       });
-      ctx.emit('toggle', '');
+      ctx.emit("toggle", "");
     };
 
     const showUserOnlineStatus = () => {
-      if (
-        data.displayOnlineStatus &&
-        data.conversation?.type === props.types.CONV_C2C
-      )
-        return true;
+      if (data.displayOnlineStatus && data.conversation?.type === props.types.CONV_C2C) return true;
       return false;
     };
 
@@ -253,9 +171,9 @@ const ListItem: any = defineComponent({
       dialog,
       content,
       toggleDialog,
-      showUserOnlineStatus
+      showUserOnlineStatus,
     };
-  }
+  },
 });
 export default ListItem;
 </script>

src/TUIKit/TUIComponents/container/TUIConversation/components/list-item/style/web.scss

@@ -1,6 +1,10 @@
 .TUI-conversation {
   &-content {
     position: relative;
+
+    &:hover {
+      background: #F5F6FA;
+    }
   }
 
   &-item {
@@ -91,7 +95,8 @@
       }
 
       .name {
-        width: 110Px;
+        max-width: 110Px;
+        display: inline-block;
         letter-spacing: 0;
         font-size: 15Px;
         font-weight: 600;
@@ -100,6 +105,13 @@
         text-overflow: ellipsis;
         white-space: nowrap;
       }
+
+      .userId {
+        max-width: 80px;
+        overflow: hidden;
+        display: inline-block;
+        text-overflow: ellipsis;
+      }
     }
 
     .middle-box {

src/TUIKit/TUIComponents/container/TUIConversation/index.vue

@@ -40,7 +40,7 @@ import { defineComponent, reactive, toRefs, computed, watch, onMounted, onBefore
 import TUIConversationList from "./components/list";
 import { caculateTimeago } from "../utils";
 import { useThrottleFn } from "@vueuse/core";
-import { handleAvatar, handleName, handleShowLastMessage, handleAt } from "../TUIChat/utils/utils";
+import { handleAvatar, handleName, handleShowLastMessage, handleAt, handleUserID } from "../TUIChat/utils/utils";
 
 const TUIConversation = defineComponent({
   name: "TUIConversation",
@@ -74,6 +74,7 @@ const TUIConversation = defineComponent({
           }
           return "";
         },
+        handleItemUserID: (item: any) => handleUserID(item),
       },
       userIDList: [],
       netWork: "",
@@ -97,10 +98,13 @@ const TUIConversation = defineComponent({
 
     const onUpdateCount = (val: any) => {
       if (window.parent) {
-        window.parent?.postMessage({
-          api: "getNoReadMessageCount",
-          count: val,
-        });
+        window.parent?.postMessage(
+          {
+            api: "getNoReadMessageCount",
+            count: val,
+          },
+          "*"
+        );
       }
     };
 
@@ -140,6 +144,15 @@ const TUIConversation = defineComponent({
 
     const handleCurrentConversation = (value: any) => {
       TUIServer.handleCurrentConversation(value);
+
+      if (window.parent) {
+        window.parent?.postMessage(
+          {
+            api: "closeUserDetail",
+          },
+          "*"
+        );
+      }
     };
 
     //

src/TUIKit/TUIComponents/container/TUIConversation/style/web.scss

@@ -125,6 +125,6 @@ input {
 
   .emptyImg {
     width: 210px;
-    height: 210px;
+    height: 186px;
   }
 }

src/TUIKit/TUIComponents/container/TUIGroup/style/web.scss

@@ -362,6 +362,6 @@
 
    .emptyImg {
      width: 210px;
-     height: 210px;
+     height: 186px;
    }
  }

src/TUIKit/TUIComponents/container/TUIPerson/style/web.scss

@@ -358,6 +358,6 @@
 
    .emptyImg {
      width: 210px;
-     height: 210px;
+     height: 186px;
    }
  }

src/TUIKit/TUIComponents/styles/icon.scss

@@ -16,6 +16,11 @@
   background-size: contain;
 }
 
+.icon-default-more {
+  background: url('../assets/icon/icon-default-more.png') no-repeat;
+  background-size: contain;
+}
+
 .icon-image {
   margin: 12Px 10Px 0;
   background: url('../assets/icon/image.png') no-repeat;
@@ -427,6 +432,8 @@
   background-size: contain;
 }
 
+
+
 .icon-close {
   display: inline-block;
   width: 24Px;

src/main.ts

@@ -41,8 +41,8 @@ import { TUIComponents, TUICore, genTestUserSig } from "./TUIKit";
 console.log(import.meta.env.DEV, "import.meta.env.DEV");
 
 // 判断是否是测试环境的
-const SDKAppID = parseSearch.appId || hashSearch.appId || 1400799837; // import.meta.env.DEV ? 1400805079 : 1400799837; // 1400805079; // Your SDKAppID
-const secretKey = parseSearch.secretKey || hashSearch.secretKey || "37bfb220843e25e78768cadd0dc06756e460e55bd631354930a4149565a1d0c9"; //import.meta.env.DEV ? "c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30" : "37bfb220843e25e78768cadd0dc06756e460e55bd631354930a4149565a1d0c9"; //"c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30"; // Your secretKey
+const SDKAppID = parseSearch.appId || hashSearch.appId || 1400805079; // import.meta.env.DEV ? 1400805079 : 1400799837; // 1400805079; // Your SDKAppID
+const secretKey = parseSearch.secretKey || hashSearch.secretKey || "c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30"; //import.meta.env.DEV ? "c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30" : "37bfb220843e25e78768cadd0dc06756e460e55bd631354930a4149565a1d0c9"; //"c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30"; // Your secretKey
 const userID = parseSearch.userID; //|| "KT:140:TEACHER"; // User ID
 
 // init TUIKit