@tencent-rtc/trtc-agent-skills 0.1.0

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/features/consultation/components/ConsultationMembersPanel.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import {
+  Camera,
+  CameraOff,
+  Mic,
+  MicOff,
+  UserPlus,
+  UserX,
+  Video,
+} from '@/shared/icons';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { DeviceType } from 'tuikit-atomicx-vue3';
+import LoadingSpinner from '@/components/LoadingSpinner.vue';
+import type {
+  ConsultationMemberCard,
+  ConsultationPermissions,
+} from '@/features/consultation/types';
+
+defineProps<{
+  memberCards: ConsultationMemberCard[];
+  permissions: ConsultationPermissions;
+  inviteFeedback?: string;
+  kickingUserId?: string | null;
+  cancellingDoctorId?: string | null;
+  patientDeviceInvitePending: { camera: boolean; microphone: boolean };
+  patientDeviceInviteLoading: { camera: boolean; microphone: boolean };
+}>();
+const { t } = useUIKit();
+
+const emit = defineEmits<{
+  openInvite: [];
+  requestKick: [member: { userId: string; userName: string }];
+  cancelInvite: [userId: string];
+  invitePatientOpenDevice: [deviceType: DeviceType];
+  cancelPatientOpenDeviceInvitation: [deviceType: DeviceType];
+  closePatientDevice: [deviceType: DeviceType];
+}>();
+</script>
+
+<template>
+  <div class="h-full min-h-0 flex flex-col">
+    <div class="p-4 border-b border-gray-100 flex items-center justify-between">
+      <h3 class="font-semibold text-gray-900">
+        {{ t('Medical.Manage.MemberManagement') }}
+      </h3>
+      <span class="px-3 py-1 rounded-full border border-gray-200 text-sm font-medium">
+        {{ t('Medical.Manage.MemberCount', { count: memberCards.length }) }}
+      </span>
+    </div>
+
+    <div class="p-4 space-y-3 min-h-0 overflow-y-auto">
+      <button
+        v-if="permissions.canInviteDoctor"
+        @click="emit('openInvite')"
+        class="w-full h-11 rounded-xl border border-dashed border-[#0D9488] text-[#0D9488] font-semibold hover:bg-[#F0FDFA] transition-colors inline-flex items-center justify-center gap-2"
+      >
+        <UserPlus :size="18" />
+        {{ t('Medical.Manage.InviteDoctor') }}
+      </button>
+
+      <div class="space-y-3">
+        <div
+          v-for="member in memberCards"
+          :key="member.userId"
+          class="rounded-[28px] border border-[#E9EEF5] bg-white px-4 py-4 flex items-center gap-3"
+        >
+          <div class="relative shrink-0">
+            <div
+              :class="[
+                'w-16 h-16 rounded-full bg-gradient-to-br text-white text-[30px] flex items-center justify-center font-semibold',
+                member.avatarClass,
+              ]"
+            >
+              {{ member.userName.charAt(0) }}
+            </div>
+          </div>
+
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center justify-between gap-2">
+              <div class="flex items-center gap-2 min-w-0">
+                <p class="font-semibold text-[16px] text-[#0F172A] truncate">
+                  {{ member.userName }}
+                </p>
+                <span
+                  :class="[
+                    'px-3 py-1 rounded-full text-[12px] leading-none border',
+                    member.roleClass,
+                    member.isPatient ? 'border-[#BFDBFE]' : 'border-transparent',
+                  ]"
+                >
+                  {{ member.roleLabel }}
+                </span>
+              </div>
+
+              <button
+                v-if="member.isPatient && permissions.canKickMember"
+                @click="
+                  emit('requestKick', {
+                    userId: member.userId,
+                    userName: member.userName,
+                  })
+                "
+                :disabled="kickingUserId === member.userId"
+                class="w-8 h-8 rounded-full text-[#94A3B8] hover:bg-red-50 hover:text-red-500 disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center"
+                :title="t('Medical.Manage.KickMember')"
+              >
+                <LoadingSpinner v-if="kickingUserId === member.userId" />
+                <UserX v-else :size="18" />
+              </button>
+            </div>
+
+            <div class="mt-2 flex items-center gap-2">
+              <button
+                v-if="member.isPatient && permissions.canManagePatientDevice"
+                @click="
+                  member.cameraOn
+                    ? emit('closePatientDevice', DeviceType.Camera)
+                    : patientDeviceInvitePending.camera
+                      ? emit('cancelPatientOpenDeviceInvitation', DeviceType.Camera)
+                      : emit('invitePatientOpenDevice', DeviceType.Camera)
+                "
+                :disabled="member.pending || patientDeviceInviteLoading.camera"
+                :class="[
+                  'w-11 h-11 rounded-full border flex items-center justify-center transition-colors disabled:opacity-60 disabled:cursor-not-allowed',
+                  member.cameraOn
+                    ? 'bg-white border-[#CBD5E1] text-[#64748B]'
+                    : patientDeviceInvitePending.camera
+                      ? 'bg-[#FFF7ED] border-[#FDBA74] text-[#EA580C]'
+                      : 'bg-[#FEE2E2] border-[#FCA5A5] text-[#EF4444]',
+                ]"
+                :title="
+                  member.cameraOn
+                    ? t('Medical.Manage.ClosePatientCamera')
+                    : t('Medical.Manage.InvitePatientCamera')
+                "
+              >
+                <LoadingSpinner v-if="patientDeviceInviteLoading.camera" />
+                <component
+                  v-else
+                  :is="member.cameraOn ? Camera : CameraOff"
+                  :size="18"
+                />
+              </button>
+              <Video
+                v-else
+                :size="20"
+                :class="member.cameraOn ? 'text-[#475569]' : 'text-[#CBD5E1]'"
+              />
+
+              <button
+                v-if="member.isPatient && permissions.canManagePatientDevice"
+                @click="
+                  member.microphoneOn
+                    ? emit('closePatientDevice', DeviceType.Microphone)
+                    : patientDeviceInvitePending.microphone
+                      ? emit(
+                          'cancelPatientOpenDeviceInvitation',
+                          DeviceType.Microphone
+                        )
+                      : emit('invitePatientOpenDevice', DeviceType.Microphone)
+                "
+                :disabled="
+                  member.pending || patientDeviceInviteLoading.microphone
+                "
+                :class="[
+                  'w-11 h-11 rounded-full border flex items-center justify-center transition-colors disabled:opacity-60 disabled:cursor-not-allowed',
+                  member.microphoneOn
+                    ? 'bg-white border-[#CBD5E1] text-[#334155]'
+                    : patientDeviceInvitePending.microphone
+                      ? 'bg-[#FFF7ED] border-[#FDBA74] text-[#EA580C]'
+                      : 'bg-[#FEE2E2] border-[#FCA5A5] text-[#EF4444]',
+                ]"
+                :title="
+                  member.microphoneOn
+                    ? t('Medical.Manage.ClosePatientMicrophone')
+                    : t('Medical.Manage.InvitePatientMicrophone')
+                "
+              >
+                <LoadingSpinner v-if="patientDeviceInviteLoading.microphone" />
+                <component
+                  v-else
+                  :is="member.microphoneOn ? Mic : MicOff"
+                  :size="18"
+                />
+              </button>
+              <Mic
+                v-else
+                :size="20"
+                :class="
+                  member.microphoneOn ? 'text-[#475569]' : 'text-[#CBD5E1]'
+                "
+              />
+            </div>
+          </div>
+
+          <button
+            v-if="
+              member.pending &&
+              member.cancelable &&
+              permissions.canCancelInvite
+            "
+            @click="emit('cancelInvite', member.userId)"
+            :disabled="cancellingDoctorId === member.userId"
+            class="h-8 px-3 rounded-full border border-red-200 text-red-500 text-xs font-medium hover:bg-red-50 disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            <LoadingSpinner
+              v-if="cancellingDoctorId === member.userId"
+              class="mr-1"
+            />
+            {{
+              cancellingDoctorId === member.userId
+                ? t('Medical.Common.Canceling')
+                : t('Medical.Manage.CancelInvite')
+            }}
+          </button>
+        </div>
+      </div>
+
+      <p v-if="inviteFeedback" class="text-xs text-[#64748B] px-1">
+        {{ inviteFeedback }}
+      </p>
+
+      <div class="pt-2 text-xs text-gray-500 leading-6">
+        <p>• {{ t('Medical.Manage.PermissionTip1') }}</p>
+        <p>• {{ t('Medical.Manage.PermissionTip2') }}</p>
+        <p>• {{ t('Medical.Manage.PermissionTip3') }}</p>
+      </div>
+    </div>
+  </div>
+</template>

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/features/consultation/components/ConsultationTranscriptionPanel.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { Copy, Download, Mic, MicOff } from '@/shared/icons';
+import LoadingSpinner from '@/components/LoadingSpinner.vue';
+import { formatConsultationClock } from '@/features/consultation/utils';
+import type { ConsultationTranscriptItem } from '@/features/consultation/types';
+
+defineProps<{
+  transcriptList: ConsultationTranscriptItem[];
+  transcriptText: string;
+  transcriberRunning: boolean;
+  transcriberBusy: boolean;
+  transcriberHint?: string;
+  isCopyingDraft: boolean;
+  isExportingDraft: boolean;
+  getSpeakerName: (userId: string) => string;
+}>();
+const { t } = useUIKit();
+
+const emit = defineEmits<{
+  toggle: [];
+  copy: [];
+  export: [];
+}>();
+</script>
+
+<template>
+  <div class="h-full min-h-0 flex flex-col">
+    <div class="p-4 border-b border-gray-100 flex items-center justify-between">
+      <h3 class="font-semibold text-gray-900">
+        {{ t('Medical.Manage.TranscriptionTitle') }}
+      </h3>
+      <button
+        @click="emit('toggle')"
+        :disabled="transcriberBusy"
+        :class="[
+          'inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm border transition-colors',
+          transcriberRunning
+            ? 'bg-[#0D9488] text-white border-[#0D9488]'
+            : 'bg-white text-gray-700 border-gray-200 hover:border-[#0D9488] hover:text-[#0D9488]',
+        ]"
+      >
+        <LoadingSpinner v-if="transcriberBusy" />
+        <component v-else :is="transcriberRunning ? Mic : MicOff" :size="14" />
+        {{
+          transcriberBusy
+            ? t('Medical.Common.Processing')
+            : transcriberRunning
+              ? t('Medical.Manage.Transcribing')
+              : t('Medical.Manage.StartTranscription')
+        }}
+      </button>
+    </div>
+    <div class="px-4 py-2 text-xs text-[#0D9488] min-h-6">
+      {{ transcriberHint }}
+    </div>
+    <div class="px-4 pb-3">
+      <div
+        class="h-[330px] rounded-3xl border border-[#E6EEF5] overflow-y-auto bg-white"
+      >
+        <div
+          class="flex items-center justify-between px-4 py-3 border-b border-[#EEF2F6] text-sm text-gray-500"
+        >
+          <span class="inline-flex items-center gap-2">
+            <span class="w-2 h-2 rounded-full bg-[#86EFAC]"></span>
+            {{ t('Medical.Manage.RealtimeTranscribing') }}
+          </span>
+          <span>{{ t('Medical.Manage.TranscriptCount', { count: transcriptList.length }) }}</span>
+        </div>
+        <div class="p-4 space-y-3">
+          <div
+            v-for="item in transcriptList"
+            :key="item.segmentId"
+            class="flex items-start gap-2"
+          >
+            <div
+              class="w-6 h-6 rounded-full bg-[#3B82F6] text-white text-xs font-semibold flex items-center justify-center shrink-0"
+            >
+              {{ getSpeakerName(item.speakerUserId).charAt(0) }}
+            </div>
+            <div class="max-w-[85%]">
+              <div class="text-xs text-[#64748B] mb-1">
+                {{ getSpeakerName(item.speakerUserId) }}
+                {{ formatConsultationClock(item.timestamp) }}
+              </div>
+              <div
+                class="rounded-2xl bg-[#0D9488] text-white px-3 py-2 text-sm leading-6"
+              >
+                {{ item.sourceText }}
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="transcriptList.length === 0"
+            class="h-[250px] flex items-center justify-center text-center text-gray-400"
+          >
+            <div>
+              <MicOff :size="44" class="mx-auto mb-2 text-gray-300" />
+              <p class="text-sm">
+                {{
+                  transcriberRunning
+                    ? t('Medical.Manage.WaitingSpeech')
+                    : t('Medical.Manage.ClickStartTranscription')
+                }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="px-4 pb-3 grid grid-cols-2 gap-3">
+      <button
+        @click="emit('copy')"
+        :disabled="isCopyingDraft || !transcriptText"
+        class="h-10 rounded-2xl border border-[#E2E8F0] text-[#0F172A] font-medium inline-flex items-center justify-center gap-2 hover:border-[#0D9488] hover:text-[#0D9488] disabled:opacity-60 disabled:cursor-not-allowed"
+      >
+        <LoadingSpinner v-if="isCopyingDraft" />
+        <Copy v-else :size="16" />
+        {{ isCopyingDraft ? t('Medical.Common.Copying') : t('Medical.Common.Copy') }}
+      </button>
+      <button
+        @click="emit('export')"
+        :disabled="isExportingDraft || !transcriptText"
+        class="h-10 rounded-2xl border border-[#E2E8F0] text-[#0F172A] font-medium inline-flex items-center justify-center gap-2 hover:border-[#0D9488] hover:text-[#0D9488] disabled:opacity-60 disabled:cursor-not-allowed"
+      >
+        <LoadingSpinner v-if="isExportingDraft" />
+        <Download v-else :size="16" />
+        {{ isExportingDraft ? t('Medical.Common.Exporting') : t('Medical.Common.Export') }}
+      </button>
+    </div>
+    <div class="px-4 pb-4 text-xs text-gray-500 leading-6">
+      <p>• {{ t('Medical.Manage.TranscriptionFooterTip') }}</p>
+    </div>
+  </div>
+</template>

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/features/consultation/components/ConsultationVideoStage.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { RoomParticipantView, FillMode, VideoStreamType } from 'tuikit-atomicx-vue3';
+import type { ConsultationVideoMember } from '@/features/consultation/types';
+
+withDefaults(
+  defineProps<{
+    mainMember: ConsultationVideoMember | null;
+    thumbnailMembers: ConsultationVideoMember[];
+    thumbnailListClass?: string;
+    thumbnailCardClass?: string;
+  }>(),
+  {
+    thumbnailListClass: 'top-6 right-6 max-h-[calc(100%-150px)] w-56',
+    thumbnailCardClass: 'h-36',
+  }
+);
+
+const emit = defineEmits<{
+  focus: [userId: string];
+}>();
+const { t } = useUIKit();
+</script>
+
+<template>
+  <div
+    class="absolute inset-0 cursor-pointer bg-gradient-to-br from-gray-800 to-gray-900"
+    @click="mainMember && emit('focus', mainMember.userId)"
+  >
+    <RoomParticipantView
+      v-if="mainMember?.participant"
+      class="absolute inset-0"
+      :participant="mainMember.participant"
+      :stream-type="VideoStreamType.Camera"
+      :fill-mode="FillMode.Fill"
+    />
+  </div>
+
+  <div
+    v-if="mainMember && !mainMember.videoReady"
+    class="absolute inset-0 z-10 flex cursor-pointer items-center justify-center px-6"
+    @click="emit('focus', mainMember.userId)"
+  >
+    <div class="text-center">
+      <div
+        class="mx-auto mb-6 flex h-48 w-48 items-center justify-center rounded-full bg-gradient-to-br from-primary to-primary-hover shadow-2xl"
+      >
+        <span class="text-7xl font-semibold text-white">
+          {{ mainMember.avatarText }}
+        </span>
+      </div>
+      <h3 class="mb-2 text-3xl font-semibold text-white">
+        {{ mainMember.displayName }}
+      </h3>
+      <span
+        class="inline-flex items-center rounded-full bg-medical-success px-3 py-1 text-sm font-semibold text-white"
+      >
+        {{ t('Medical.Consultation.CameraOff', { role: mainMember.roleLabel }) }}
+      </span>
+    </div>
+  </div>
+
+  <div
+    v-if="thumbnailMembers.length"
+    :class="[
+      'absolute z-20 flex flex-col gap-3 overflow-y-auto',
+      thumbnailListClass,
+    ]"
+  >
+    <button
+      v-for="member in thumbnailMembers"
+      :key="member.userId"
+      :class="[
+        'relative w-full cursor-pointer overflow-hidden rounded-2xl border border-white/25 bg-gradient-to-br from-gray-700 to-gray-800 shadow-xl',
+        thumbnailCardClass,
+      ]"
+      @click="emit('focus', member.userId)"
+    >
+      <RoomParticipantView
+        v-if="member.participant"
+        class="absolute inset-0"
+        :participant="member.participant"
+        :stream-type="VideoStreamType.Camera"
+        :fill-mode="FillMode.Fill"
+      />
+      <div
+        v-if="!member.videoReady"
+        class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-gray-700 to-gray-800 px-3"
+      >
+        <div class="text-center w-full">
+          <div
+            class="mx-auto mb-2 flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-primary to-primary-hover text-xl font-semibold text-white"
+          >
+            {{ member.avatarText }}
+          </div>
+          <p class="truncate text-xs font-semibold leading-none text-white">
+            {{ member.displayName }}
+          </p>
+        </div>
+      </div>
+      <div
+        class="absolute bottom-2 left-2 right-2 rounded-xl bg-black/45 px-3 py-2 text-left backdrop-blur-md"
+      >
+        <p class="truncate text-sm font-semibold text-white">
+          {{ member.displayName }}
+        </p>
+        <p class="mt-1 text-xs leading-none text-white/65">
+          {{ member.roleLabel }}
+        </p>
+      </div>
+    </button>
+  </div>
+</template>

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/features/consultation/components/InviteDoctorDialog.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { Search, X } from '@/shared/icons';
+import LoadingSpinner from '@/components/LoadingSpinner.vue';
+import type { DoctorInviteListItem } from '@/features/consultation/types';
+
+defineProps<{
+  visible: boolean;
+  doctorInviteList: DoctorInviteListItem[];
+  inviteFeedback?: string;
+  invitingDoctorId?: string | null;
+  cancellingDoctorId?: string | null;
+}>();
+const { t } = useUIKit();
+
+const inviteKeyword = defineModel<string>('inviteKeyword', { default: '' });
+const emit = defineEmits<{
+  close: [];
+  invite: [userId: string];
+  cancelInvite: [userId: string];
+}>();
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    class="fixed inset-0 z-[100] bg-black/55 backdrop-blur-sm flex items-center justify-center p-4"
+    @click.self="emit('close')"
+  >
+    <div
+      class="w-full max-w-[760px] bg-white rounded-[24px] shadow-[0_20px_60px_rgba(15,23,42,0.25)] overflow-hidden"
+    >
+      <div
+        class="h-[72px] px-6 flex items-center justify-between border-b border-[#EEF2F6]"
+      >
+        <h3 class="text-[18px] leading-none font-semibold text-[#0F172A]">
+          {{ t('Medical.Manage.InviteDoctor') }}
+        </h3>
+        <button
+          @click="emit('close')"
+          class="w-8 h-8 rounded-full text-[#94A3B8] hover:bg-[#F1F5F9] hover:text-[#334155] transition-colors flex items-center justify-center"
+        >
+          <X :size="20" />
+        </button>
+      </div>
+
+      <div class="p-6">
+        <div class="relative">
+          <Search
+            class="absolute left-4 top-1/2 -translate-y-1/2 text-[#94A3B8]"
+            :size="20"
+          />
+          <input
+            v-model="inviteKeyword"
+            class="w-full h-12 rounded-2xl bg-[#F8FAFC] border border-[#EEF2F6] pl-11 pr-4 text-[15px] text-[#0F172A] outline-none focus:border-[#0D9488]"
+            :placeholder="t('Medical.Manage.SearchDoctorPlaceholder')"
+          />
+        </div>
+
+        <div class="mt-4 space-y-3 max-h-[300px] overflow-y-auto">
+          <div
+            v-for="item in doctorInviteList"
+            :key="item.userId"
+            class="h-[92px] rounded-2xl border border-[#EEF2F6] px-5 flex items-center justify-between"
+          >
+            <div class="flex items-center gap-4 min-w-0">
+              <div
+                class="w-12 h-12 rounded-full bg-[#0D9488] text-white flex items-center justify-center text-[24px] font-semibold shrink-0"
+              >
+                {{ item.userName.charAt(0) }}
+              </div>
+              <div class="min-w-0">
+                <p
+                  class="text-[20px] leading-none font-semibold text-[#0F172A] truncate"
+                >
+                  {{ item.userName }}
+                </p>
+                <p
+                  class="mt-1.5 text-[17px] leading-none text-[#6B7280] truncate"
+                >
+                  {{ item.department }} · {{ item.title }}
+                </p>
+              </div>
+            </div>
+            <button
+              @click="
+                item.inviteStatus === 'pending'
+                  ? emit('cancelInvite', item.userId)
+                  : emit('invite', item.userId)
+              "
+              :disabled="
+                invitingDoctorId === item.userId ||
+                cancellingDoctorId === item.userId
+              "
+              :class="[
+                'w-[104px] h-[44px] rounded-full text-[16px] font-semibold disabled:opacity-60 disabled:cursor-not-allowed transition-colors',
+                item.inviteStatus === 'pending'
+                  ? 'bg-red-50 text-red-500 border border-red-200 hover:bg-red-100'
+                  : 'bg-[#0D9488] text-white hover:bg-[#0F766E]',
+              ]"
+            >
+              <LoadingSpinner
+                v-if="
+                  invitingDoctorId === item.userId ||
+                  cancellingDoctorId === item.userId
+                "
+                class="mr-1"
+              />
+              {{
+                invitingDoctorId === item.userId
+                  ? t('Medical.Common.Inviting')
+                  : cancellingDoctorId === item.userId
+                    ? t('Medical.Common.Canceling')
+                    : item.inviteStatus === 'pending'
+                      ? t('Medical.Common.Cancel')
+                      : t('Medical.Common.Invite')
+              }}
+            </button>
+          </div>
+
+          <div
+            v-if="doctorInviteList.length === 0"
+            class="h-[140px] flex items-center justify-center text-[14px] text-[#94A3B8]"
+          >
+            {{ t('Medical.Manage.NoInviteDoctor') }}
+          </div>
+        </div>
+        <p class="mt-3 text-xs text-[#0D9488] min-h-5">{{ inviteFeedback }}</p>
+      </div>
+    </div>
+  </div>
+</template>

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/features/consultation/components/KickMemberConfirmDialog.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import LoadingSpinner from '@/components/LoadingSpinner.vue';
+
+defineProps<{
+  target: { userId: string; userName: string } | null;
+  kickingUserId?: string | null;
+}>();
+
+const emit = defineEmits<{
+  cancel: [];
+  confirm: [];
+}>();
+
+const { t } = useUIKit();
+</script>
+
+<template>
+  <div
+    v-if="target"
+    class="fixed inset-0 z-[110] bg-black/45 flex items-center justify-center p-4"
+    @click.self="emit('cancel')"
+  >
+    <div
+      class="w-full max-w-[360px] rounded-2xl bg-white shadow-[0_16px_40px_rgba(15,23,42,0.24)] p-5"
+    >
+      <h3 class="text-base font-semibold text-[#0F172A]">{{ t('Medical.Member.ConfirmKickTitle') }}</h3>
+      <p class="mt-2 text-sm text-[#64748B] leading-6">
+        {{ t('Medical.Member.ConfirmKickMessage', { userName: target.userName }) }}
+      </p>
+      <div class="mt-5 grid grid-cols-2 gap-3">
+        <button
+          @click="emit('cancel')"
+          :disabled="!!kickingUserId"
+          class="h-10 rounded-xl border border-[#E2E8F0] text-[#475569] font-medium disabled:opacity-60"
+        >
+          {{ t('Medical.Member.CancelButton') }}
+        </button>
+        <button
+          @click="emit('confirm')"
+          :disabled="!!kickingUserId"
+          class="h-10 rounded-xl bg-red-500 text-white font-medium hover:bg-red-600 disabled:opacity-60"
+        >
+          <LoadingSpinner v-if="kickingUserId" class="mr-1" />
+          {{ kickingUserId ? t('Medical.Member.ProcessingButton') : t('Medical.Member.ConfirmButton') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>