@tencent-rtc/trtc-agent-skills 0.1.0

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/services/adapters/types.ts

@@ -0,0 +1,135 @@
+export type UserRole = 'doctor' | 'patient';
+export type DoctorStatus = 'online' | 'busy';
+export type LaunchMode = 'mock' | 'integration';
+export type BusinessPanelMode = 'demo' | 'slot';
+
+export interface MedicalUser {
+  userId: string;
+  userName: string;
+  avatarUrl: string;
+  role: UserRole;
+  title?: string;
+  department?: string;
+  hospital?: string;
+  experience?: string;
+  rating?: string;
+  consultations?: string;
+  price?: string;
+  tags?: string[];
+  specialty?: string;
+  status?: DoctorStatus;
+}
+
+export interface MedicalAppointment {
+  id: string;
+  roomId: string;
+  doctorId: string;
+  patientId: string;
+  scheduleStartTime: number;
+  scheduleEndTime: number;
+  chiefComplaint: string;
+  allergyHistory: string;
+  medicalHistory: string;
+  patientAge: number;
+  patientGender: string;
+  patientPhone: string;
+}
+
+export interface BackendMedicalUserDTO {
+  userId: string;
+  userName: string;
+  avatarUrl?: string;
+  role: UserRole;
+  title?: string;
+  department?: string;
+  hospital?: string;
+}
+
+export interface BackendMedicalAppointmentDTO {
+  appointmentId: string;
+  roomId?: string;
+  doctorId: string;
+  patientId: string;
+  scheduleStartTime: number;
+  scheduleEndTime: number;
+  chiefComplaint?: string;
+  allergyHistory?: string;
+  medicalHistory?: string;
+  patientAge?: number;
+  patientGender?: string;
+  patientPhone?: string;
+}
+
+export interface BackendLaunchContextDTO {
+  role: UserRole;
+  userId: string;
+  appointmentId?: string;
+  token?: string;
+  doctorId?: string;
+  patientId?: string;
+  userName?: string;
+  avatarUrl?: string;
+}
+
+export interface MedicalBackendAdapter {
+  getLaunchContext(): Promise<BackendLaunchContextDTO | null>;
+  getCurrentUser(context: BackendLaunchContextDTO): Promise<BackendMedicalUserDTO>;
+  getAppointment(
+    context: BackendLaunchContextDTO
+  ): Promise<BackendMedicalAppointmentDTO | null>;
+  listDoctors(context: BackendLaunchContextDTO): Promise<BackendMedicalUserDTO[]>;
+}
+
+export interface SessionData {
+  role: UserRole;
+  userId: string;
+  appointmentId?: string;
+  token?: string;
+  launchMode?: LaunchMode;
+  user?: MedicalUser;
+}
+
+export interface LaunchContext {
+  role: UserRole;
+  userId: string;
+  appointmentId?: string;
+  token?: string;
+  doctorId?: string;
+  patientId?: string;
+  userName?: string;
+  avatarUrl?: string;
+}
+
+/**
+ * View-facing service contract used by the demo pages.
+ *
+ * Customer integration should map backend DTOs into these view models inside
+ * `services/adapters/integration/*`, keeping API/auth/field differences away
+ * from Vue pages.
+ */
+export interface AuthService {
+  getLaunchContext(): LaunchContext | null;
+  login(context: LaunchContext): Promise<SessionData>;
+  logout(): Promise<void>;
+}
+
+export interface UserService {
+  listDoctors(): MedicalUser[];
+  listPatients(): MedicalUser[];
+  getUserById(userId: string): MedicalUser | null;
+  getDoctorById(userId: string): MedicalUser | null;
+  getPatientById(userId: string): MedicalUser | null;
+}
+
+export interface AppointmentService {
+  getAppointmentById(appointmentId: string): MedicalAppointment | null;
+  getAppointmentByRoomId(roomId: string): MedicalAppointment | null;
+  getAppointmentsByDoctor(doctorId: string): MedicalAppointment[];
+  getAppointmentsByPatient(patientId: string): MedicalAppointment[];
+}
+
+export interface MedicalServiceAdapter {
+  auth: AuthService;
+  user: UserService;
+  appointment: AppointmentService;
+}

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/shared/icons.ts

@@ -0,0 +1,53 @@
+export {
+  Activity,
+  AlertCircle,
+  Award,
+  Bell,
+  Camera,
+  CameraOff,
+  CheckCircle,
+  CheckCircle2,
+  ChevronDown,
+  ChevronLeft,
+  Clock,
+  Copy,
+  Download,
+  Eye,
+  FileText,
+  FolderOpen,
+  House,
+  ImageIcon,
+  LayoutPanelLeft,
+  Lock,
+  LogOut,
+  MessageCircle,
+  MessageSquare,
+  Mic,
+  MicOff,
+  MoreVertical,
+  PenLine,
+  Phone,
+  PhoneOff,
+  Pill,
+  Plus,
+  Save,
+  Search,
+  Send,
+  Settings,
+  Shield,
+  ShieldAlert,
+  Star,
+  Stethoscope,
+  ThumbsUp,
+  TrendingUp,
+  Trash2,
+  Upload,
+  User,
+  UserPlus,
+  Users,
+  UserX,
+  Video,
+  Volume2,
+  VolumeX,
+  X,
+} from 'lucide-vue-next';

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/styles/index.css

@@ -0,0 +1,106 @@
+@import './tailwind.css';
+
+.medical-language-selector {
+  position: relative;
+  z-index: 30;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.medical-language-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  height: 34px;
+  min-width: 94px;
+  padding: 0 10px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 999px;
+  color: #334155;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  backdrop-filter: blur(10px);
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.medical-language-trigger:hover {
+  border-color: rgba(15, 23, 42, 0.18);
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
+}
+
+.medical-language-trigger:focus-visible,
+.medical-language-option:focus-visible {
+  outline: 2px solid rgba(13, 148, 136, 0.36);
+  outline-offset: 2px;
+}
+
+.medical-language-current {
+  min-width: 42px;
+  text-align: left;
+}
+
+.medical-language-chevron {
+  color: #64748b;
+  transition: transform 0.2s ease;
+}
+
+.medical-language-chevron-open {
+  transform: rotate(180deg);
+}
+
+.medical-language-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 50;
+  width: 148px;
+  padding: 6px;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
+}
+
+.medical-language-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 36px;
+  padding: 0 8px;
+  border-radius: 10px;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 600;
+  text-align: left;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.medical-language-option:hover {
+  background: #f1f5f9;
+}
+
+.medical-language-option-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 22px;
+  border-radius: 7px;
+  background: #e2e8f0;
+  color: #475569;
+  font-size: 11px;
+}
+
+.medical-language-check {
+  margin-left: auto;
+  color: #0d9488;
+}

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/styles/tailwind.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import './theme.css';

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/styles/theme.css

@@ -0,0 +1,209 @@
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --font-size: 16px;
+  --background: #f8fafb;
+  --foreground: #1f2937;
+  --card: #ffffff;
+  --card-foreground: #1f2937;
+  --popover: #ffffff;
+  --popover-foreground: #1f2937;
+  --primary: #0d9488;
+  --primary-foreground: #ffffff;
+  --primary-hover: #0f766e;
+  --secondary: #475569;
+  --secondary-foreground: #ffffff;
+  --muted: #e2e8f0;
+  --muted-foreground: #64748b;
+  --accent: #f1f5f9;
+  --accent-foreground: #334155;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --medical-success: #10b981;
+  --medical-warning: #f59e0b;
+  --medical-info: #3b82f6;
+  --medical-urgent: #dc2626;
+  --border: #e2e8f0;
+  --input: transparent;
+  --input-background: #f8fafc;
+  --switch-background: #cbd5e1;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --ring: #0d9488;
+  --chart-1: #0d9488;
+  --chart-2: #3b82f6;
+  --chart-3: #8b5cf6;
+  --chart-4: #f59e0b;
+  --chart-5: #ef4444;
+  --radius: 1rem;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #1f2937;
+  --sidebar-primary: #0d9488;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #f1f5f9;
+  --sidebar-accent-foreground: #1f2937;
+  --sidebar-border: #e2e8f0;
+  --sidebar-ring: #0d9488;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-switch-background: var(--switch-background);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-medical-success: var(--medical-success);
+  --color-medical-warning: var(--medical-warning);
+  --color-medical-info: var(--medical-info);
+  --color-medical-urgent: var(--medical-urgent);
+  --color-primary-hover: var(--primary-hover);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  html {
+    font-size: var(--font-size);
+  }
+
+  h1 {
+    font-size: var(--text-2xl);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  h2 {
+    font-size: var(--text-xl);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  h3 {
+    font-size: var(--text-lg);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  h4 {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  label {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  button {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  input {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.5;
+  }
+
+  .custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 transparent;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: #cbd5e1;
+    border-radius: 3px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: #94a3b8;
+  }
+}

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/utils/auth.ts

@@ -0,0 +1,50 @@
+import { useLoginState } from 'tuikit-atomicx-vue3';
+import { getBasicInfo } from '@/config/basic-info-config';
+import { clearSession, getSession, getSessionUser } from '@/utils/session';
+
+let restorePromise: Promise<boolean> | null = null;
+
+export async function bootstrapSession() {
+  const session = getSession();
+  if (!session) {
+    return false;
+  }
+  return restoreLoginBySession();
+}
+
+export async function restoreLoginBySession(): Promise<boolean> {
+  const session = getSession();
+  const sessionUser = getSessionUser();
+
+  if (!session || !sessionUser) {
+    clearSession();
+    return false;
+  }
+
+  const { loginUserInfo, login, setSelfInfo } = useLoginState();
+  if (loginUserInfo.value?.userId === session.userId) {
+    return true;
+  }
+
+  if (restorePromise) {
+    return restorePromise;
+  }
+
+  restorePromise = (async () => {
+    try {
+      await login(getBasicInfo(session.userId));
+      await setSelfInfo({
+        userName: sessionUser?.userName || session.userId,
+        avatarUrl: sessionUser?.avatarUrl || '',
+      });
+      return true;
+    } catch {
+      clearSession();
+      return false;
+    } finally {
+      restorePromise = null;
+    }
+  })();
+
+  return restorePromise;
+}

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/utils/format.ts

@@ -0,0 +1,24 @@
+function normalizeToMs(timestamp: number) {
+  return timestamp < 1_000_000_000_000 ? timestamp * 1000 : timestamp;
+}
+
+export function formatTimeRange(start: number, end: number) {
+  const startValue = new Date(normalizeToMs(start));
+  const endValue = new Date(normalizeToMs(end));
+  const date = `${startValue.getFullYear()}-${String(startValue.getMonth() + 1).padStart(2, '0')}-${String(startValue.getDate()).padStart(2, '0')}`;
+  const startLabel = `${String(startValue.getHours()).padStart(2, '0')}:${String(startValue.getMinutes()).padStart(2, '0')}`;
+  const endLabel = `${String(endValue.getHours()).padStart(2, '0')}:${String(endValue.getMinutes()).padStart(2, '0')}`;
+  return `${date} ${startLabel} - ${endLabel}`;
+}
+
+export function formatDuration(seconds: number) {
+  const minutes = Math.floor(seconds / 60);
+  const remain = seconds % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(remain).padStart(2, '0')}`;
+}
+
+export function formatWaiting(seconds: number) {
+  const minutes = Math.floor(seconds / 60);
+  const remain = seconds % 60;
+  return `${minutes}:${String(remain).padStart(2, '0')}`;
+}

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/utils/navigation.ts

@@ -0,0 +1,12 @@
+import type { UserRole } from '@/services/adapters';
+
+export function getDefaultRoute(role: UserRole, appointmentId?: string) {
+  if (role === 'doctor') {
+    return appointmentId
+      ? `/doctor/consultation/${appointmentId}`
+      : '/doctor/dashboard';
+  }
+  return appointmentId
+    ? `/patient/waiting/${appointmentId}`
+    : '/patient/select-doctor';
+}

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/utils/session.ts

@@ -0,0 +1,28 @@
+import type { MedicalUser, SessionData } from '@/services/adapters';
+
+const STORAGE_KEY = 'medical-demo-session';
+
+export function saveSession(session: SessionData) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(session));
+}
+
+export function clearSession() {
+  localStorage.removeItem(STORAGE_KEY);
+}
+
+export function getSession(): SessionData | null {
+  const value = localStorage.getItem(STORAGE_KEY);
+  if (!value) {
+    return null;
+  }
+  try {
+    return JSON.parse(value) as SessionData;
+  } catch {
+    clearSession();
+    return null;
+  }
+}
+
+export function getSessionUser(): MedicalUser | null {
+  return getSession()?.user ?? null;
+}