tuikit-atomicx-vue3 3.4.1 → 3.5.0-beta.7

package/src/components/BarrageList/Message/MessageLayout/MessageLayout.vue

@@ -1,67 +1,49 @@
 <script lang="ts" setup>
 import { toRefs, computed, withDefaults, defineProps } from 'vue';
-import TencentCloudChat from '@tencentcloud/chat-uikit-engine';
 import cs from 'classnames';
+import { BarrageType } from '../../../../states/BarrageState';
+import { useLoginState } from '../../../../states/LoginState';
 import { CustomMessage } from '../CustomMessage';
-import { FaceMessage } from '../FaceMessage';
-import { GroupTipMessage } from '../GroupTipMessage';
-import { ImageMessage } from '../ImageMessage';
-import { MergerMessage } from '../MergerMessage';
-import { RecalledMessage } from '../RecalledMessage';
 import { TextMessage } from '../TextMessage';
 import { MessageBubble } from './MessageBubble';
-import { MessageMeta } from './MessageMeta';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { Barrage } from '../../../../states/BarrageState';
 
 interface IMessageLayoutProps {
-  message: IMessageModel;
+  message: Barrage;
   isLastInChunk?: boolean;
-  // messageActionList?: IMessageAction[];
   className?: string;
   style?: Record<string, any>;
 }
 
 const props = withDefaults(defineProps<IMessageLayoutProps>(), {
-  message: () => ({}) as IMessageModel,
+  message: () => ({}) as Barrage,
   isLastInChunk: true,
-  messageActionList: () => [],
   className: '',
   style: () => ({}),
 });
 
+const { loginUserInfo } = useLoginState();
 const {
   message,
   isLastInChunk,
-  // messageActionList,
   className,
   style,
 } = toRefs(props);
 
 const MessageComponentsFactory = {
-  [TencentCloudChat.TYPES.MSG_TEXT]: TextMessage,
-  [TencentCloudChat.TYPES.MSG_IMAGE]: ImageMessage,
-  [TencentCloudChat.TYPES.MSG_FACE]: FaceMessage,
-  [TencentCloudChat.TYPES.MSG_MERGER]: MergerMessage,
-  [TencentCloudChat.TYPES.MSG_CUSTOM]: CustomMessage,
-  [TencentCloudChat.TYPES.MSG_GRP_TIP]: GroupTipMessage,
+  [BarrageType.text]: TextMessage,
+  [BarrageType.custom]: CustomMessage,
 };
 
-const MessageComponent = computed(() => MessageComponentsFactory[message.value.type as any]);
+const MessageComponent = computed(() => MessageComponentsFactory[message.value.messageType]);
 
-const isMessageOwner = computed(() => message.value.flow === 'out');
+const isMessageOwner = computed(() => message.value.sender.userId === loginUserInfo.value?.userId);
 </script>
 
 <template>
-  <RecalledMessage v-if="message.isRevoked" class="message-recalled" :message="message" />
-  <GroupTipMessage
-    v-else-if="
-      message.type === TencentCloudChat.TYPES.MSG_GRP_TIP || message.type === TencentCloudChat.TYPES.MSG_CUSTOM
-    "
-    :message="message"
-  />
   <div
-    v-else-if="MessageComponent"
-    :data-message-id="message.ID"
+    v-if="MessageComponent"
+    :data-message-id="message.sequence"
     :class="
       cs(
         'message-layout',
@@ -83,10 +65,10 @@ const isMessageOwner = computed(() => message.value.flow === 'out');
         "
       >
         <div
-          v-if="isLastInChunk && message.type !== TencentCloudChat.TYPES.MSG_TEXT"
+          v-if="isLastInChunk && message.messageType !== BarrageType.text"
           :class="cs('message-layout__nick')"
         >
-          {{ message.nick + ': ' }}
+          {{ message.sender.nameCard || message.sender.userName || message.sender.userId + ': ' }}
         </div>
         <MessageBubble
           :class="
@@ -97,20 +79,13 @@ const isMessageOwner = computed(() => message.value.flow === 'out');
           :message="message"
           :is-last-in-chunk="isLastInChunk"
         >
-          <component :is="MessageComponent" :message="message" :is-last-in-chunk="isLastInChunk" />
+          <component
+            :is="MessageComponent"
+            :message="message"
+            :is-last-in-chunk="isLastInChunk"
+          />
         </MessageBubble>
       </div>
-      <MessageMeta
-        v-if="isLastInChunk"
-        :class="
-          cs('message-layout__meta', {
-            'message-layout__meta--self': isMessageOwner,
-          })
-        "
-        :status="message.status"
-        :is-show-read-status="true"
-        :timestamp="message.time"
-      />
     </div>
   </div>
 </template>

package/src/components/BarrageList/Message/TextMessage/TextMessage.vue

@@ -1,41 +1,20 @@
 <template>
   <div class="text-message">
-    <div
-      v-if="referencedInfo.content"
-      :class="
-        cs('text-message__reference', {
-          'text-danger': isOriginMessageHasRecalled,
-        })
-      "
-      @click="handleReferenceClick"
-    >
-      <template v-if="isOriginMessageHasRecalled">
-        {{ t('TUIChat.origin message has been recalled') }}
-      </template>
-      <template v-else>
-        <div class="text-message__reference__header">
-          {{ referencedInfo.sender }}
-        </div>
-        <div class="text-message__reference__content">
-          {{ referencedInfo.content }}
-        </div>
-      </template>
-    </div>
     <div class="text-message__content">
       <component
         :is="context.slots['user-badge']"
         :message="message"
       />
-      <span class="user-badge" v-if="message.from === currentLive?.liveOwner.userId && !context.slots['user-badge']">{{ t('Anchor') }}</span>
+      <span v-if="message.sender.userId === currentLive?.liveOwner.userId && !context.slots['user-badge']" class="user-badge">{{ t('Anchor') }}</span>
       <span
         class="text-message__content__nick"
         @click="handleNickClick"
       >
         {{
-          `${message.nick || message.from}: `
+          `${message.sender.nameCard || message.sender.userName || message.sender.userId}: `
         }}</span>
       <template
-        v-for="(item, index) in messageContent.text"
+        v-for="(item, index) in messageContent"
         :key="index"
       >
         <span
@@ -58,98 +37,92 @@
 <script lang="ts" setup>
 import type { VueElement } from 'vue';
 import { computed, withDefaults, defineProps } from 'vue';
-import { TUIStore } from '@tencentcloud/chat-uikit-engine';
-import { useUIKit, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
-import cs from 'classnames';
-import { useScroll } from '../../../../hooks/useScroll';
-import { useBarrageListState } from '../../../../states/BarrageListState';
-import { useLiveState } from '../../../../states/LiveState';
-import { safeJSONParse } from '../../../../utils/json';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useLiveListState } from '../../../../states/LiveListState';
 import { useMessageListContext } from '../../MessageListContext';
-import type { ICloudCustomData } from '../../../../types/message';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { BASEURL, BASIC_EMOJI_URL_MAPPING } from './emoji';
+import type { Barrage } from '../../../../states/BarrageState';
 
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 const context: {
   slots: Record<string, () => VueElement>;
-  nickClick: (payload: { message: IMessageModel; event: MouseEvent }) => void;
+  nickClick: (data: { message: Barrage; event: MouseEvent }) => void;
 } = useMessageListContext('');
 
 const props = withDefaults(
   defineProps<{
-    message: IMessageModel;
+    message: Barrage;
     isLastInChunk: boolean;
   }>(),
   {
-    message: () => ({}) as IMessageModel,
+    message: () => ({}) as Barrage,
     isLastInChunk: false,
   },
 );
 
 const { t } = useUIKit();
-const { scrollToMessage } = useScroll();
-const { highlightMessageIDList, recalledMessageIDSet } = useBarrageListState();
 
-const messageContent = computed(
-  () =>
-    props.message.getMessageContent() as {
-      showName: string;
-      text: Array<
-        | {
-          name: 'text';
-          text: string;
-        }
-        | {
-          name: 'img';
-          src: string;
-          emojiKey?: string;
+const messageContent = computed(() => {
+  const renderDom = [];
+  let temp = props.message.textContent || '';
+  let left = -1;
+  let right = -1;
+  while (temp !== '') {
+    left = temp.indexOf('[');
+    right = temp.indexOf(']');
+    switch (left) {
+      case 0:
+        if (right === -1) {
+          renderDom.push({
+            name: 'text',
+            text: temp,
+          });
+          temp = '';
+        } else {
+          const emojiKey = temp.slice(0, right + 1);
+          // 自定义 emoji 表情 emojiKey 必须带 @custom 标识，比如：'[@custom_Smile]'
+          if (emojiKey.indexOf('@custom') > -1) {
+            renderDom.push({
+              name: 'img',
+              src: '',
+              type: 'custom',
+              emojiKey,
+            });
+            temp = temp.substring(right + 1);
+          } else if (BASIC_EMOJI_URL_MAPPING[emojiKey]) {
+            renderDom.push({
+              name: 'img',
+              src: BASEURL.emoji + BASIC_EMOJI_URL_MAPPING[emojiKey],
+              emojiKey,
+            });
+            temp = temp.substring(right + 1);
+          } else {
+            renderDom.push({
+              name: 'text',
+              text: '[',
+            });
+            temp = temp.slice(1);
+          }
         }
-      >;
-    },
-);
-
-const referencedInfo = computed(() => {
-  const cloudCustomData = safeJSONParse(props.message?.cloudCustomData, {}) as Partial<ICloudCustomData>;
-  const content = cloudCustomData?.messageReply?.messageAbstract || '';
-  const sender = cloudCustomData?.messageReply?.messageSender || '';
-  const messageID = cloudCustomData?.messageReply?.messageID || '';
-  return {
-    content,
-    sender,
-    messageID,
-  };
-});
-
-const isOriginMessageHasRecalled = computed(() => recalledMessageIDSet.value.has(referencedInfo.value.messageID));
-
-const handleReferenceClick = () => {
-  if (referencedInfo.value.messageID) {
-    const { messageID } = referencedInfo.value;
-
-    const messageModel = TUIStore.getMessageModel(messageID);
-    if (isOriginMessageHasRecalled.value || !messageModel || messageModel.isDeleted || messageModel.isRevoked) {
-      TUIToast.error({
-        message: t('TUIChat.Message has been deleted or recalled'),
-      });
-      return;
-    }
-
-    const isExist = highlightMessageIDList.value.includes(messageID);
-
-    if (!isExist) {
-      highlightMessageIDList.value.push(messageID);
-      setTimeout(() => {
-        highlightMessageIDList.value = highlightMessageIDList.value.filter(id => id !== messageID);
-      }, 3000);
+        break;
+      case -1:
+        renderDom.push({
+          name: 'text',
+          text: temp,
+        });
+        temp = '';
+        break;
+      default:
+        renderDom.push({
+          name: 'text',
+          text: temp.slice(0, left),
+        });
+        temp = temp.substring(left);
+        break;
     }
-
-    scrollToMessage(messageID, {
-      block: 'center',
-      skipIfVisible: true,
-      behavior: 'instant',
-    }).catch(() => {});
   }
-};
+  return renderDom;
+});
 
 const handleNickClick = (event: MouseEvent) => {
   context.nickClick({

package/src/components/BarrageList/Message/TextMessage/emoji.ts

@@ -0,0 +1,132 @@
+export const BASEURL = {
+  emoji: 'https://web.sdk.qcloud.com/im/assets/emoji-plugin/',
+};
+export const BASIC_EMOJI_URL_MAPPING: Record<string, string> = {
+  '[TUIEmoji_Expect]': 'emoji_0@2x.png',
+  '[TUIEmoji_Blink]': 'emoji_1@2x.png',
+  '[TUIEmoji_Guffaw]': 'emoji_2@2x.png',
+  '[TUIEmoji_KindSmile]': 'emoji_3@2x.png',
+  '[TUIEmoji_Haha]': 'emoji_4@2x.png',
+  '[TUIEmoji_Cheerful]': 'emoji_5@2x.png',
+  '[TUIEmoji_Smile]': 'emoji_6@2x.png',
+  '[TUIEmoji_Sorrow]': 'emoji_7@2x.png',
+  '[TUIEmoji_Speechless]': 'emoji_8@2x.png',
+  '[TUIEmoji_Amazed]': 'emoji_9@2x.png',
+  '[TUIEmoji_Complacent]': 'emoji_10@2x.png',
+  '[TUIEmoji_Lustful]': 'emoji_11@2x.png',
+  '[TUIEmoji_Stareyes]': 'emoji_12@2x.png',
+  '[TUIEmoji_Giggle]': 'emoji_13@2x.png',
+  '[TUIEmoji_Daemon]': 'emoji_14@2x.png',
+  '[TUIEmoji_Rage]': 'emoji_15@2x.png',
+  '[TUIEmoji_Yawn]': 'emoji_16@2x.png',
+  '[TUIEmoji_TearsLaugh]': 'emoji_17@2x.png',
+  '[TUIEmoji_Silly]': 'emoji_18@2x.png',
+  '[TUIEmoji_Wail]': 'emoji_19@2x.png',
+  '[TUIEmoji_Kiss]': 'emoji_20@2x.png',
+  '[TUIEmoji_Trapped]': 'emoji_21@2x.png',
+  '[TUIEmoji_Fear]': 'emoji_22@2x.png',
+  '[TUIEmoji_BareTeeth]': 'emoji_23@2x.png',
+  '[TUIEmoji_FlareUp]': 'emoji_24@2x.png',
+  '[TUIEmoji_Tact]': 'emoji_25@2x.png',
+  '[TUIEmoji_Shit]': 'emoji_26@2x.png',
+  '[TUIEmoji_ShutUp]': 'emoji_27@2x.png',
+  '[TUIEmoji_Sigh]': 'emoji_28@2x.png',
+  '[TUIEmoji_Hehe]': 'emoji_29@2x.png',
+  '[TUIEmoji_Silent]': 'emoji_30@2x.png',
+  '[TUIEmoji_Skull]': 'emoji_31@2x.png',
+  '[TUIEmoji_Mask]': 'emoji_32@2x.png',
+  '[TUIEmoji_Beer]': 'emoji_33@2x.png',
+  '[TUIEmoji_Cake]': 'emoji_34@2x.png',
+  '[TUIEmoji_RedPacket]': 'emoji_35@2x.png',
+  '[TUIEmoji_Bombs]': 'emoji_36@2x.png',
+  '[TUIEmoji_Ai]': 'emoji_37@2x.png',
+  '[TUIEmoji_Celebrate]': 'emoji_38@2x.png',
+  '[TUIEmoji_Bless]': 'emoji_39@2x.png',
+  '[TUIEmoji_Flower]': 'emoji_40@2x.png',
+  '[TUIEmoji_Watermelon]': 'emoji_41@2x.png',
+  '[TUIEmoji_Cow]': 'emoji_42@2x.png',
+  '[TUIEmoji_Fool]': 'emoji_43@2x.png',
+  '[TUIEmoji_Surprised]': 'emoji_44@2x.png',
+  '[TUIEmoji_Askance]': 'emoji_45@2x.png',
+  '[TUIEmoji_Monster]': 'emoji_46@2x.png',
+  '[TUIEmoji_Pig]': 'emoji_47@2x.png',
+  '[TUIEmoji_Coffee]': 'emoji_48@2x.png',
+  '[TUIEmoji_Ok]': 'emoji_49@2x.png',
+  '[TUIEmoji_Heart]': 'emoji_50@2x.png',
+  '[TUIEmoji_Sun]': 'emoji_51@2x.png',
+  '[TUIEmoji_Moon]': 'emoji_52@2x.png',
+  '[TUIEmoji_Star]': 'emoji_53@2x.png',
+  '[TUIEmoji_Rich]': 'emoji_54@2x.png',
+  '[TUIEmoji_Fortune]': 'emoji_55@2x.png',
+  '[TUIEmoji_857]': 'emoji_56@2x.png',
+  '[TUIEmoji_666]': 'emoji_57@2x.png',
+  '[TUIEmoji_Prohibit]': 'emoji_58@2x.png',
+  '[TUIEmoji_Convinced]': 'emoji_59@2x.png',
+  '[TUIEmoji_Knife]': 'emoji_60@2x.png',
+  '[TUIEmoji_Like]': 'emoji_61@2x.png',
+};
+
+export const BASIC_EMOJI_NAME_MAPPING: Record<string, string> = {
+  '[TUIEmoji_Smile]': '[Smile]',
+  '[TUIEmoji_Expect]': '[Expect]',
+  '[TUIEmoji_Blink]': '[Blink]',
+  '[TUIEmoji_Guffaw]': '[Laugh]',
+  '[TUIEmoji_KindSmile]': '[Kind Smile]',
+  '[TUIEmoji_Haha]': '[Haha]',
+  '[TUIEmoji_Cheerful]': '[Cheerful]',
+  '[TUIEmoji_Speechless]': '[Speechless]',
+  '[TUIEmoji_Amazed]': '[Amazed]',
+  '[TUIEmoji_Sorrow]': '[Sorrow]',
+  '[TUIEmoji_Complacent]': '[Complacent]',
+  '[TUIEmoji_Silly]': '[Silly]',
+  '[TUIEmoji_Lustful]': '[Lustful]',
+  '[TUIEmoji_Giggle]': '[Giggle]',
+  '[TUIEmoji_Kiss]': '[Kiss]',
+  '[TUIEmoji_Wail]': '[Wail]',
+  '[TUIEmoji_TearsLaugh]': '[Tears of Laughter]',
+  '[TUIEmoji_Trapped]': '[Trapped]',
+  '[TUIEmoji_Mask]': '[Mask]',
+  '[TUIEmoji_Fear]': '[Fear]',
+  '[TUIEmoji_BareTeeth]': '[Bare Teeth]',
+  '[TUIEmoji_FlareUp]': '[Flare Up]',
+  '[TUIEmoji_Yawn]': '[Yawn]',
+  '[TUIEmoji_Tact]': '[Tact]',
+  '[TUIEmoji_Stareyes]': '[Star Eyes]',
+  '[TUIEmoji_ShutUp]': '[Shut Up]',
+  '[TUIEmoji_Sigh]': '[Sigh]',
+  '[TUIEmoji_Hehe]': '[Hehe]',
+  '[TUIEmoji_Silent]': '[Silent]',
+  '[TUIEmoji_Surprised]': '[Surprised]',
+  '[TUIEmoji_Askance]': '[Askance]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[Poop]',
+  '[TUIEmoji_Monster]': '[Monster]',
+  '[TUIEmoji_Daemon]': '[Daemon]',
+  '[TUIEmoji_Rage]': '[Rage]',
+  '[TUIEmoji_Fool]': '[Fool]',
+  '[TUIEmoji_Pig]': '[Pig]',
+  '[TUIEmoji_Cow]': '[Cow]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[Skull]',
+  '[TUIEmoji_Bombs]': '[Bombs]',
+  '[TUIEmoji_Coffee]': '[Coffee]',
+  '[TUIEmoji_Cake]': '[Cake]',
+  '[TUIEmoji_Beer]': '[Beer]',
+  '[TUIEmoji_Flower]': '[Flower]',
+  '[TUIEmoji_Watermelon]': '[Watermelon]',
+  '[TUIEmoji_Rich]': '[Rich]',
+  '[TUIEmoji_Heart]': '[Heart]',
+  '[TUIEmoji_Moon]': '[Moon]',
+  '[TUIEmoji_Sun]': '[Sun]',
+  '[TUIEmoji_Star]': '[Star]',
+  '[TUIEmoji_RedPacket]': '[Red Packet]',
+  '[TUIEmoji_Celebrate]': '[Celebrate]',
+  '[TUIEmoji_Bless]': '[Bless]',
+  '[TUIEmoji_Fortune]': '[Fortune]',
+  '[TUIEmoji_Convinced]': '[Convinced]',
+  '[TUIEmoji_Prohibit]': '[Prohibit]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[Knife]',
+  '[TUIEmoji_Like]': '[Like]',
+};

package/src/components/CameraButton/index.vue

@@ -16,7 +16,6 @@ import { DeviceStatus, DeviceError } from '../../types';
 
 const {
   cameraStatus,
-  hasPublishVideoPermission,
   cameraLastError,
   closeLocalCamera,
   openLocalCamera,

package/src/components/ChatSetting/GroupChatSetting/GroupChatSetting.vue

@@ -272,6 +272,7 @@ const userPickerDialogTitle = computed(() => {
       >
         <UserPicker
           ref="userPickerRef"
+          class="user-picker-dialog__content"
           display-mode="list"
           :data-source="memberDataSource"
           :locked-items="userPickerLockedItems"
@@ -292,5 +293,9 @@ const userPickerDialogTitle = computed(() => {
 <style lang="scss">
 .user-picker-dialog {
   height: 70vh;
+
+  &__content {
+    width: 100%;
+  }
 }
 </style>

package/src/components/CoGuestPanel/CoGuestPanel.vue

@@ -22,12 +22,12 @@
         class="applications-content"
       >
         <div
-          v-if="receivedCoGuestUserList.length > 0"
+          v-if="applicants.length > 0"
           class="user-list-container"
         >
           <div class="user-list">
             <div
-              v-for="user in receivedCoGuestUserList"
+              v-for="user in applicants"
               :key="user.userId"
               class="user-item"
             >
@@ -73,13 +73,13 @@
           <div class="user-list-title">
             <span class="user-list-title-text">{{ t('Current seat') }}</span>
             <span class="user-list-title-count">
-              {{ `(${userListInCoGuest.length})` }}
-              <!-- {{ `(${userListInCoGuest.length}/${ seatList.length})` }} -->
+              {{ `(${connected.length})` }}
+              <!-- {{ `(${connected.length}/${ seatList.length})` }} -->
             </span>
           </div>
           <div class="user-list">
             <div
-              v-for="user in userListInCoGuest"
+              v-for="user in connected"
               :key="user.userId"
               class="user-item"
             >
@@ -112,83 +112,12 @@
             </div>
           </div>
           <div
-            v-if="userListInCoGuest.length === 0"
+            v-if="connected.length === 0"
             class="empty-state"
           >
             <span>{{ t('Seat is empty') }}</span>
           </div>
         </div>
-        <!-- <div
-          v-if="sentCoGuestUserList.length > 0"
-          class="user-list-container"
-        >
-          <div class="user-list-title">
-            <span class="user-list-title-text">{{ t('Inviting') }}</span>
-          </div>
-          <div class="user-list">
-            <div
-              v-for="user in sentCoGuestUserList"
-              :key="user.userId"
-              class="user-item"
-            >
-              <div class="user-item-left">
-                <Avatar :src="user.avatarUrl" :size="40" />
-              </div>
-              <div class="user-item-right">
-                <div class="user-info">
-                  <span class="user-name">{{ user.userName || user.userId }}</span>
-                </div>
-                <div class="user-actions">
-                  <TUIButton
-                    color="gray"
-                    @click="cancelCoGuestRequest({ userId: user.userId })"
-                  >
-                    {{
-                      t('Cancel')
-                    }}
-                  </TUIButton>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="user-list-container">
-          <div class="user-list-title">
-            <span class="user-list-title-text">{{ t('Invite more') }}</span>
-          </div>
-          <div class="user-list">
-            <div
-              v-for="user in availableCoGuestUserList"
-              :key="user.userId"
-              class="user-item"
-            >
-              <div class="user-item-left">
-                <Avatar :src="user.avatarUrl" :size="40" />
-              </div>
-              <div class="user-item-right">
-                <div class="user-info">
-                  <span class="user-name">{{ user.userName || user.userId }}</span>
-                </div>
-                <div class="user-actions">
-                  <TUIButton
-                    color="gray"
-                    @click="sendCoGuestRequest({ userId: user.userId })"
-                  >
-                    {{
-                      t('Invite')
-                    }}
-                  </TUIButton>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            v-if="availableCoGuestUserList.length === 0"
-            class="empty-state"
-          >
-            <span>{{ t('No invited users yet') }}</span>
-          </div>
-        </div> -->
       </div>
     </div>
   </div>
@@ -199,32 +128,28 @@ import { ref } from 'vue';
 import { TUIButton, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useCoGuestState } from '../../states/CoGuestState';
 import { useLoginState } from '../../states/LoginState';
-import { useSeatStore } from '../../states/SeatStore';
+import { useLiveSeatState } from '../../states/LiveSeatState';
 import { Avatar } from '../Avatar';
 import { ERROR_MESSAGE } from './constants';
 
 const { t } = useUIKit();
 
 const { loginUserInfo } = useLoginState();
-const { seatList } = useSeatStore();
 
 const {
-  receivedCoGuestUserList,
-  availableCoGuestUserList,
-  sentCoGuestUserList,
-  userListInCoGuest,
-  sendCoGuestRequest,
-  acceptCoGuestRequest,
-  rejectCoGuestRequest,
-  cancelCoGuestRequest,
-  disconnect,
+  connected,
+  applicants,
+  acceptApplication,
+  rejectApplication,
 } = useCoGuestState();
 
+const { kickUserOutOfSeat } = useLiveSeatState();
+
 const activeTab = ref('applications');
 
 const handleAcceptCoGuestRequest = async (userId: string) => {
   try {
-    await acceptCoGuestRequest({ userId });
+    await acceptApplication({ userId });
   } catch (error: any) {
     const message = t(ERROR_MESSAGE[error.code as keyof typeof ERROR_MESSAGE] || 'Accept co-guest request failed');
     TUIToast.error({ message });
@@ -233,7 +158,7 @@ const handleAcceptCoGuestRequest = async (userId: string) => {
 
 const handleRejectCoGuestRequest = async (userId: string) => {
   try {
-    await rejectCoGuestRequest({ userId });
+    await rejectApplication({ userId });
   } catch (error) {
     console.error('[CoGuestPanel] handleRejectCoGuestRequest error', error);
     TUIToast.error({
@@ -244,7 +169,7 @@ const handleRejectCoGuestRequest = async (userId: string) => {
 
 const handleDisconnect = async (userId: string) => {
   try {
-    await disconnect(userId);
+    await kickUserOutOfSeat({ userId });
   } catch (error) {
     console.error('[CoGuestPanel] handleDisconnect error', error);
     TUIToast.error({