tuikit-atomicx-vue3 4.4.0 → 4.5.1

package/src/components/MessageList/MessageList.vue

@@ -14,7 +14,11 @@ import cs from 'classnames';
 import { ObserverView } from '../../baseComp/ObserverView';
 import { View } from '../../baseComp/View';
 import { useScroll } from '../../hooks/useScroll';
+import { useConversationListState } from '../../states/ConversationListState';
+import { useGroupSettingState } from '../../states/GroupSettingState';
 import { useMessageListState } from '../../states/MessageListState';
+import { ConversationType, MessageType } from '../../types/engine';
+import { isCallMessage } from '../../utils/call';
 import { throttle } from '../../utils/lodash';
 import { Message as DefaultMessage } from './Message';
 import { MessageForward } from './MessageForward';
@@ -22,7 +26,7 @@ import { MessageListContextSymbol } from './MessageListContext';
 import { MessageTimeDivider as DefaultMessageTimeDivider } from './MessageTimeDivider';
 import { ScrollToBottom } from './ScrollToBottom';
 import type { MessageAction } from '../../hooks/useMessageActions';
-import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../types/engine';
 
 // Define message chunk interface
 interface MessageChunk {
@@ -80,8 +84,12 @@ const {
   setEnableReadReceipt,
 } = useMessageListState();
 
+const { getGroupMemberList } = useGroupSettingState();
+
 const { scrollToBottom } = useScroll();
+const { activeConversation } = useConversationListState();
 
+const isGroup = computed(() => activeConversation.value?.type === ConversationType.GROUP);
 const enableMessageAggregation = computed(() => props.messageAggregationTime && props.messageAggregationTime > 0);
 
 // Message aggregation logic
@@ -110,18 +118,21 @@ const messageChunks = computed(() => {
 
   filteredMessageList.forEach((message, index, messages) => {
     const messageTime = message.time;
-    const lastChunk = chunks.length > 0 ? chunks[chunks.length - 1] : undefined;
-    const lastMessage = index > 0 ? messages[index - 1] : undefined;
+    const prevChunk = chunks.length > 0 ? chunks[chunks.length - 1] : undefined;
+    const prevMessage = index > 0 ? messages[index - 1] : undefined;
 
-    const shouldCreateNewChunk = !lastChunk
-      || messageTime - lastChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP
-      || lastChunk.messages[0].from !== message.from
+    const shouldCreateNewChunk = !prevChunk
+      || messageTime - prevChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP
+      || prevChunk.messages[0].from !== message.from
       || message.isRevoked
-      || (lastMessage && lastMessage.isRevoked)
+      || (prevMessage && prevMessage.isRevoked)
       || message.status === 'fail'
-      || (lastMessage && lastMessage.status === 'fail')
+      || (prevMessage && prevMessage.status === 'fail')
       || message.hasRiskContent
-      || (lastMessage && lastMessage.hasRiskContent);
+      || (prevMessage && prevMessage.hasRiskContent)
+      || isCallMessage(message)
+      || (prevMessage && isCallMessage(prevMessage))
+      || (prevMessage && prevMessage.type === MessageType.CUSTOM && prevMessage.getMessageContent().businessID === 'group_create');
 
     if (shouldCreateNewChunk) {
       chunks.push({
@@ -130,7 +141,7 @@ const messageChunks = computed(() => {
         key: `chunk-${message.ID}`,
       });
     } else {
-      lastChunk.messages.push(message);
+      prevChunk.messages.push(message);
     }
   });
 
@@ -222,6 +233,9 @@ watch(messageList, (newMessages, oldMessages) => {
       scrollToBottom({ behavior: 'instant' });
       isFinishFirstRender.value = true;
     });
+    if (isGroup.value) {
+      getGroupMemberList();
+    }
     return;
   }
 
@@ -306,14 +320,22 @@ onUnmounted(() => {
               :message="message"
               :alignment="props.alignment"
               :messageActionList="props.messageActionList"
-              :isAggregated="Boolean(enableMessageAggregation && messageIndex !== chunk.messages.length - 1)"
+              :isAggregated="Boolean(enableMessageAggregation && messageIndex !== 0)"
               :is-first-in-chunk="Boolean(messageIndex === 0)"
               :is-last-in-chunk="Boolean(messageIndex === chunk.messages.length - 1)"
               :isHiddenMessageAvatar="
                 Boolean(
                   alignment === 'two-sided'
-                    ? (enableMessageAggregation && messageIndex !== chunk.messages.length - 1 || message.flow === 'out')
-                    : (enableMessageAggregation && messageIndex !== chunk.messages.length - 1 )
+                    ? (enableMessageAggregation && messageIndex !== 0 || message.flow === 'out')
+                    : (enableMessageAggregation && messageIndex !== 0 )
+                )
+              "
+              :is-hidden-message-nick="
+                Boolean(
+                  !isGroup
+                    || (alignment === 'two-sided'
+                      ? enableMessageAggregation && messageIndex !== 0 || message.flow === 'out'
+                      : enableMessageAggregation && messageIndex !== 0)
                 )
               "
               :isHiddenMessageMeta="
@@ -354,7 +376,7 @@ onUnmounted(() => {
   @include scrollbar.scrollbar-hidden();
 }
 .message-chunk--container {
-  margin-top: 10px;
+  margin-top: 25px;
 }
 .message-chunk {
   display: flex;

package/src/components/MessageList/i18n/en-US.ts

@@ -72,7 +72,73 @@ const CallMessage = {
   no_answer_timeout: 'Call not answered (timeout)',
 };
 
+const Emoji = {
+  '[TUIEmoji_Smile]': '[Smile]',
+  '[TUIEmoji_Expect]': '[Expect]',
+  '[TUIEmoji_Blink]': '[Blink]',
+  '[TUIEmoji_Guffaw]': '[Guffaw]',
+  '[TUIEmoji_KindSmile]': '[KindSmile]',
+  '[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]': '[TearsLaugh]',
+  '[TUIEmoji_Trapped]': '[Trapped]',
+  '[TUIEmoji_Mask]': '[Mask]',
+  '[TUIEmoji_Fear]': '[Fear]',
+  '[TUIEmoji_BareTeeth]': '[BareTeeth]',
+  '[TUIEmoji_FlareUp]': '[FlareUp]',
+  '[TUIEmoji_Yawn]': '[Yawn]',
+  '[TUIEmoji_Tact]': '[Tact]',
+  '[TUIEmoji_Stareyes]': '[StarEyes]',
+  '[TUIEmoji_ShutUp]': '[ShutUp]',
+  '[TUIEmoji_Sigh]': '[Sigh]',
+  '[TUIEmoji_Hehe]': '[Hehe]',
+  '[TUIEmoji_Silent]': '[Silent]',
+  '[TUIEmoji_Surprised]': '[Surprised]',
+  '[TUIEmoji_Askance]': '[Askance]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[Shit]',
+  '[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]': '[RedPacket]',
+  '[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]',
+};
+
 export {
   MessageList,
   CallMessage,
+  Emoji,
 };

package/src/components/MessageList/i18n/index.ts

@@ -1,9 +1,9 @@
-import { MessageList as MessageListEn, CallMessage as CallMessageEn } from './en-US';
-import { MessageList as MessageListZh, CallMessage as CallMessageZh } from './zh-CN';
+import { MessageList as MessageListEn, CallMessage as CallMessageEn, Emoji as EmojiEn } from './en-US';
+import { MessageList as MessageListZh, CallMessage as CallMessageZh, Emoji as EmojiZh } from './zh-CN';
 
 const resources = {
-  'en-US': { MessageList: MessageListEn, CallMessage: CallMessageEn },
-  'zh-CN': { MessageList: MessageListZh, CallMessage: CallMessageZh },
+  'en-US': { MessageList: MessageListEn, CallMessage: CallMessageEn, Emoji: EmojiEn},
+  'zh-CN': { MessageList: MessageListZh, CallMessage: CallMessageZh, Emoji: EmojiZh },
 };
 
 export { resources };

package/src/components/MessageList/i18n/zh-CN.ts

@@ -71,7 +71,73 @@ const CallMessage = {
   no_answer_timeout: '超时无应答',
 };
 
+const Emoji = {
+  '[TUIEmoji_Smile]': '[微笑]',
+  '[TUIEmoji_Expect]': '[期待]',
+  '[TUIEmoji_Blink]': '[眨眼]',
+  '[TUIEmoji_Guffaw]': '[大笑]',
+  '[TUIEmoji_KindSmile]': '[姨母笑]',
+  '[TUIEmoji_Haha]': '[哈哈哈]',
+  '[TUIEmoji_Cheerful]': '[愉快]',
+  '[TUIEmoji_Speechless]': '[无语]',
+  '[TUIEmoji_Amazed]': '[惊讶]',
+  '[TUIEmoji_Sorrow]': '[悲伤]',
+  '[TUIEmoji_Complacent]': '[得意]',
+  '[TUIEmoji_Silly]': '[傻了]',
+  '[TUIEmoji_Lustful]': '[色]',
+  '[TUIEmoji_Giggle]': '[憨笑]',
+  '[TUIEmoji_Kiss]': '[亲亲]',
+  '[TUIEmoji_Wail]': '[大哭]',
+  '[TUIEmoji_TearsLaugh]': '[哭笑]',
+  '[TUIEmoji_Trapped]': '[困]',
+  '[TUIEmoji_Mask]': '[口罩]',
+  '[TUIEmoji_Fear]': '[恐惧]',
+  '[TUIEmoji_BareTeeth]': '[龇牙]',
+  '[TUIEmoji_FlareUp]': '[发怒]',
+  '[TUIEmoji_Yawn]': '[打哈欠]',
+  '[TUIEmoji_Tact]': '[机智]',
+  '[TUIEmoji_Stareyes]': '[星星眼]',
+  '[TUIEmoji_ShutUp]': '[闭嘴]',
+  '[TUIEmoji_Sigh]': '[叹气]',
+  '[TUIEmoji_Hehe]': '[呵呵]',
+  '[TUIEmoji_Silent]': '[收声]',
+  '[TUIEmoji_Surprised]': '[惊喜]',
+  '[TUIEmoji_Askance]': '[白眼]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[便便]',
+  '[TUIEmoji_Monster]': '[怪兽]',
+  '[TUIEmoji_Daemon]': '[恶魔]',
+  '[TUIEmoji_Rage]': '[恶魔怒]',
+  '[TUIEmoji_Fool]': '[衰]',
+  '[TUIEmoji_Pig]': '[猪]',
+  '[TUIEmoji_Cow]': '[牛]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[骷髅]',
+  '[TUIEmoji_Bombs]': '[炸弹]',
+  '[TUIEmoji_Coffee]': '[咖啡]',
+  '[TUIEmoji_Cake]': '[蛋糕]',
+  '[TUIEmoji_Beer]': '[啤酒]',
+  '[TUIEmoji_Flower]': '[花]',
+  '[TUIEmoji_Watermelon]': '[瓜]',
+  '[TUIEmoji_Rich]': '[壕]',
+  '[TUIEmoji_Heart]': '[爱心]',
+  '[TUIEmoji_Moon]': '[月亮]',
+  '[TUIEmoji_Sun]': '[太阳]',
+  '[TUIEmoji_Star]': '[星星]',
+  '[TUIEmoji_RedPacket]': '[红包]',
+  '[TUIEmoji_Celebrate]': '[庆祝]',
+  '[TUIEmoji_Bless]': '[福]',
+  '[TUIEmoji_Fortune]': '[发]',
+  '[TUIEmoji_Convinced]': '[服]',
+  '[TUIEmoji_Prohibit]': '[禁]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[刀]',
+  '[TUIEmoji_Like]': '[赞]',
+};
+
 export {
   MessageList,
   CallMessage,
+  Emoji,
 }

package/src/components/RoomParticipantList/ParticipantAction.vue

@@ -0,0 +1,196 @@
+<template>
+  <TUIButton
+    v-if="singleControl"
+    type="primary"
+    @click="singleControl?.handler"
+  >
+    {{ singleControl?.label }}
+  </TUIButton>
+  <div class="actions">
+    <!-- 更多操作 -->
+    <div
+      v-if="showMoreActions"
+      class="more-actions"
+      @click.stop
+    >
+      <TUIButton @click="toggleMoreMenu">
+        {{ t('ParticipantList.More') }}
+        <IconArrowUp
+          size="12"
+          :class="['more-arrow', showMenu ? 'up' : 'down']"
+        />
+      </TUIButton>
+
+      <!-- 下拉菜单 -->
+      <div v-show="showMenu" class="dropdown-menu">
+        <div
+          v-for="item in moreControlList"
+          :key="item.key"
+          class="menu-item"
+          :style="item?.style || {}"
+          @click="item.handler"
+        >
+          <TUIIcon
+            v-if="item?.icon"
+            :icon="item?.icon"
+            size="16"
+          />
+          <span class="operate-text">{{ item.label }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineOptions, onUnmounted } from 'vue';
+import { TUIButton, IconArrowUp, useUIKit, TUIIcon } from '@tencentcloud/uikit-base-component-vue3';
+import { useParticipantAction } from './useParticpantAction';
+import type { RoomParticipant } from '../../types/participant';
+
+defineOptions({
+  name: 'ParticipantAction',
+});
+
+interface Props {
+  participant: RoomParticipant;
+  isLocal: boolean;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useUIKit();
+
+const showMenu = ref(false);
+
+const toggleMoreMenu = () => {
+  showMenu.value = !showMenu.value;
+};
+
+const { controlList } = useParticipantAction({ targetParticipant: props.participant });
+const singleControl = computed(() => !props.isLocal ? controlList.value[0] : null);
+const moreControlList = computed(() => !props.isLocal ? controlList.value.slice(1) : controlList.value);
+const showMoreActions = computed(() => moreControlList.value.length >= 1);
+
+// 点击外部关闭菜单
+const handleClickOutside = () => {
+  if (showMenu.value) {
+    showMenu.value = false;
+  }
+};
+
+// 监听点击外部事件
+if (typeof window !== 'undefined') {
+  window.addEventListener('click', handleClickOutside);
+}
+
+// 组件卸载时清理事件监听
+onUnmounted(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('click', handleClickOutside);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.action-btn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #e0e0e0;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666666;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #f5f5f5;
+    border-color: #d0d0d0;
+  }
+
+  &.active {
+    background: #1890ff;
+    border-color: #1890ff;
+    color: white;
+  }
+}
+
+.more-actions {
+  position: relative;
+}
+
+.more-arrow {
+  margin-left: 2px;
+
+  &.down {
+    transform: rotate(180deg);
+  }
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  max-width: 160px;
+  padding: 20px;
+  background-color: var(--dropdown-color-default);
+  border-radius: 8px;
+  box-shadow:
+    0 3px 8px var(--uikit-color-black-8),
+    0 6px 40px var(--uikit-color-black-8);
+  z-index: 1;
+  margin-top: 10px;
+
+  &::before {
+    position: absolute;
+    top: -20px;
+    right: 20px;
+    width: 0;
+    content: '';
+    border-top: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid var(--dropdown-color-default);
+    border-left: 10px solid transparent;
+  }
+
+  &::after {
+    position: absolute;
+    top: -20px;
+    right: 0;
+    width: 100%;
+    height: 20px;
+    content: '';
+    background-color: transparent;
+  }
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  height: 20px;
+  color: var(--text-color-secondary);
+  cursor: pointer;
+  gap: 10px;
+
+  .operate-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 14px;
+    white-space: nowrap;
+  }
+
+  &:not(:first-child) {
+    margin-top: 20px;
+  }
+}
+</style>

package/src/components/RoomParticipantList/ParticipantItem.vue

@@ -0,0 +1,205 @@
+<template>
+  <div
+    :class="['participant-item', { 'hovered': isHovered }]"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <div class="user-info">
+      <Avatar :src="participant.avatarUrl" :size="40" />
+      <span class="user-name">{{ displayName }}</span>
+      <div class="role-info">
+        <IconUser
+          v-if="isOwner || isAdmin"
+          size="20"
+          :class="isAdmin ? 'admin-icon' : 'master-icon'"
+        />
+        <div
+          :class="`user-extra-info ${isAdmin ? 'user-extra-info-admin' : ''}`"
+        >
+          {{ roleLabel }}
+        </div>
+      </div>
+    </div>
+
+    <div v-if="!isHovered" class="member-av-state">
+      <component
+        :is="item.icon"
+        v-for="(item, index) in iconList"
+        :key="index"
+        :class="['state-icon']"
+      />
+    </div>
+
+    <div v-if="isHovered" class="action-area">
+      <slot name="actions" :participant="participant" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineOptions } from 'vue';
+import { IconUser, useUIKit,
+  IconVideoOpen,
+  IconVideoClose,
+  IconAudioOpen,
+  IconAudioClose,
+  IconScreenOpen,
+} from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomParticipantState } from '../../states/RoomParticipantState';
+import { RoomParticipantRole, DeviceStatus } from '../../types';
+import { Avatar } from '../Avatar';
+import type { RoomParticipant } from '../../types/participant';
+
+defineOptions({
+  name: 'ParticipantItem',
+});
+
+interface Props {
+  participant: RoomParticipant;
+}
+
+const props = defineProps<Props>();
+
+const { localParticipant } = useRoomParticipantState();
+
+const { t } = useUIKit();
+
+const displayName = computed(() => props.participant?.nameCard || props.participant?.userName || props.participant?.userId);
+
+const isOwner = computed(() => props.participant?.role === RoomParticipantRole.Owner);
+const isAdmin = computed(() => props.participant?.role === RoomParticipantRole.Admin);
+const isMe = computed(() => localParticipant.value?.userId === props.participant.userId);
+
+const roleLabel = computed(() => {
+  if (isOwner.value && isMe.value) {
+    return `${t('ParticipantList.Host')}, ${t('ParticipantList.Me')}`;
+  }
+  if (isOwner.value) {
+    return t('ParticipantList.Host');
+  }
+  if (isAdmin.value && isMe.value) {
+    return `${t('ParticipantList.Admin')}, ${t('ParticipantList.Me')}`;
+  }
+  if (isAdmin.value) {
+    return t('ParticipantList.Admin');
+  }
+  if (isMe.value) {
+    return t('ParticipantList.Me');
+  }
+  return '';
+});
+const isHovered = ref(false);
+
+const handleMouseEnter = () => {
+  isHovered.value = true;
+};
+
+const handleMouseLeave = () => {
+  isHovered.value = false;
+};
+
+const iconList = computed(() => {
+  const list = [];
+  if (props.participant?.screenShareStatus && props.participant?.screenShareStatus === DeviceStatus.On) {
+    list.push({ icon: IconScreenOpen });
+  }
+  list.push({
+    icon: props.participant?.microphoneStatus && props.participant?.microphoneStatus === DeviceStatus.On ? IconAudioOpen : IconAudioClose,
+  });
+  list.push({
+    icon: props.participant?.cameraStatus && props.participant?.cameraStatus === DeviceStatus.On ? IconVideoOpen : IconVideoClose,
+  });
+  return list;
+});
+</script>
+
+<style scoped lang="scss">
+.participant-item {
+  display: flex;
+  align-items: center;
+  padding: 0px 20px;
+  height: 52px;
+  box-sizing: border-box;
+  gap: 12px;
+  position: relative;
+  cursor: pointer;
+
+  &.hovered {
+    background: var(--list-color-hover);
+  }
+}
+
+.user-info {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+
+  .user-name {
+    min-width: 0;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color-secondary);
+    overflow: hidden;
+    margin-left: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .role-info {
+    display: flex;
+    flex-shrink: 0;
+    margin-left: 8px;
+
+    .master-icon,
+    .admin-icon {
+      display: flex;
+      color: var(--text-color-link);
+    }
+
+    .admin-icon {
+      color: var(--text-color-warning);
+    }
+
+    .user-extra-info,
+    .user-extra-info-admin {
+      margin-left: 4px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: var(--text-color-link);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    .user-extra-info-admin {
+      color: var(--text-color-warning);
+      transition: none;
+    }
+  }
+}
+
+.member-av-state {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: var(--uikit-color-gray-7);
+
+    .state-icon {
+      margin-left: 16px;
+    }
+
+    .disable-icon {
+      opacity: 0.4;
+    }
+  }
+
+.action-area {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+</style>