{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "telehealth-video-room", "title": "Telehealth Video Room", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/telehealth-video-room/telehealth-video-room.component.ts", "content": "// HIPAA-compliant telehealth video consultation room with live telemetry\n// vitals, clinical SOAP notes, in-call encrypted chat, and an e-prescription\n// generator. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n AlertCircle,\n CheckCircle2,\n Clock,\n Download,\n FileCheck,\n FileText,\n Heart,\n HeartPulse,\n Lock,\n LucideAngularModule,\n MessageSquare,\n Mic,\n MicOff,\n PanelRightClose,\n PanelRightOpen,\n Paperclip,\n PhoneOff,\n Pill,\n RefreshCw,\n Send,\n Settings,\n Share2,\n ShieldCheck,\n Thermometer,\n Video,\n VideoOff,\n Wifi,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport type TelehealthTab = 'notes' | 'chat' | 'vitals'\n\nexport interface PrescriptionItem {\n id: string\n drugName: string\n dosage: string\n sig: string\n quantity: string\n refills: number\n pharmacy: string\n timestamp: string\n status: 'transmitted' | 'pending'\n rxNumber: string\n}\n\nexport interface ChatMessage {\n id: string\n sender: 'doctor' | 'patient'\n senderName: string\n text: string\n timestamp: string\n attachment?: {\n name: string\n size: string\n type: 'pdf' | 'image'\n }\n}\n\ninterface DrugOption {\n id: string\n name: string\n defaultDosage: string\n defaultQty: string\n refills: string\n}\n\nconst drugOptions: DrugOption[] = [\n {\n id: 'metoprolol',\n name: 'Metoprolol Succinate ER',\n defaultDosage: '25mg PO Daily (Morning)',\n defaultQty: '30 tablets',\n refills: '2',\n },\n {\n id: 'propranolol',\n name: 'Propranolol HCl',\n defaultDosage: '10mg PO BID (Twice Daily)',\n defaultQty: '60 tablets',\n refills: '1',\n },\n {\n id: 'diltiazem',\n name: 'Diltiazem HCl Extended Release',\n defaultDosage: '120mg PO Daily',\n defaultQty: '30 capsules',\n refills: '3',\n },\n { id: 'lisinopril', name: 'Lisinopril', defaultDosage: '10mg PO Daily', defaultQty: '30 tablets', refills: '3' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-telehealth-video-room, [ui-telehealth-video-room]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiSeparatorComponent,\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n \n
\n
\n \n
\n
\n \n @if (!isCallEnded()) {\n \n }\n \n \n
\n \n {{ isCallEnded() ? 'Call Ended' : formattedDuration() }}\n
\n
\n\n
\n\n \n \n \n HIPAA Encrypted · AES-256\n \n\n
\n\n \n
\n
\n Provider:\n Dr. Sarah Jenkins, MD\n (Cardiology)\n
\n
\n Patient:\n David Chen\n (MRN-88412)\n
\n
\n
\n\n \n
\n \n\n @if (!isCallEnded()) {\n \n \n End Consultation\n \n } @else {\n \n \n Reconnect Call\n \n }\n
\n
\n
\n\n \n
\n \n
\n \n
\n \n \n SJ\n \n
\n
\n Dr. Sarah Jenkins, MD\n \n Attending\n \n
\n
\n
\n \n
\n \n \n \n \n
\n Speaking\n
\n ·\n St. Jude Telehealth Clinic\n
\n
\n
\n\n \n \n 1080p 60fps · BAA Protected\n
\n
\n\n \n
\n
\n\n
\n
\n
\n \n \n \n SJ\n \n \n
\n \n
\n\n
\n

Dr. Sarah Jenkins, MD

\n

\n Department of Cardiovascular Medicine · Clinical Telehealth Encounter\n

\n
\n\n \n \n Session: #TH-9021-TX\n ·\n Latency: 24ms (0% loss)\n \n \n \n\n \n \n @if (!isCameraOff()) {\n \n
\n \n You (720p)\n \n \n @if (isMuted()) {\n \n } @else {\n \n }\n
\n \n
\n \n DC\n \n David Chen\n
\n \n } @else {\n \n \n Camera Off\n \n }\n \n\n \n
\n \n \n @if (isMuted()) {\n \n } @else {\n \n }\n \n\n \n @if (isCameraOff()) {\n \n } @else {\n \n }\n \n\n \n \n \n\n
\n\n \n \n SOAP Notes\n \n\n \n \n In-Call Chat\n \n\n \n \n Vitals\n \n\n
\n\n \n \n \n\n \n @if (isSidebarOpen()) {\n \n } @else {\n \n }\n \n
\n \n\n \n @if (showSettingsModal()) {\n
\n
\n

AV Devices & HIPAA

\n \n \n \n
\n
\n
\n \n
\n Default - MacBook Pro Mic (CoreAudio)\n
\n
\n
\n \n
\n FaceTime HD Camera (1080p)\n
\n
\n
\n \n
\n Studio Display Speakers\n
\n
\n
\n
\n }\n \n\n \n @if (isSidebarOpen()) {\n \n }\n \n \n `,\n})\nexport class UiTelehealthVideoRoomComponent {\n protected readonly AlertCircle = AlertCircle\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Download = Download\n protected readonly FileCheck = FileCheck\n protected readonly FileText = FileText\n protected readonly Heart = Heart\n protected readonly HeartPulse = HeartPulse\n protected readonly Lock = Lock\n protected readonly MessageSquare = MessageSquare\n protected readonly Mic = Mic\n protected readonly MicOff = MicOff\n protected readonly PanelRightClose = PanelRightClose\n protected readonly PanelRightOpen = PanelRightOpen\n protected readonly Paperclip = Paperclip\n protected readonly PhoneOff = PhoneOff\n protected readonly Pill = Pill\n protected readonly RefreshCw = RefreshCw\n protected readonly Send = Send\n protected readonly Settings = Settings\n protected readonly Share2 = Share2\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Thermometer = Thermometer\n protected readonly Video = Video\n protected readonly VideoOff = VideoOff\n protected readonly Wifi = Wifi\n protected readonly X = X\n\n protected readonly drugOptions = drugOptions\n\n @Input('class') className?: string\n\n // Interactive State\n readonly isMuted = signal(false)\n readonly isCameraOff = signal(false)\n readonly isScreenSharing = signal(false)\n readonly isSidebarOpen = signal(true)\n readonly activeTab = signal('notes')\n readonly isCallEnded = signal(false)\n readonly showSettingsModal = signal(false)\n readonly callDurationSeconds = signal(868) // 14:28\n readonly unreadChatCount = signal(0)\n readonly lastVitalsUpdate = signal('Just now')\n readonly isRefreshingVitals = signal(false)\n\n // SOAP Notes State\n readonly chiefComplaint = signal(\n 'Recurrent palpitations, sudden resting tachycardia (120-140 bpm), and lightheadedness over the past 2 weeks following morning coffee.',\n )\n readonly soapSubjective = signal(\n 'Patient reports 4 distinct episodes in past 14 days. Episodes last ~5-10 minutes with abrupt onset and offset. No syncope, mild lightheadedness. Denies chest pressure or radiating pain. Reports high work stress and 3-4 espresso shots daily.',\n )\n readonly soapObjective = signal(\n 'In-call vitals: HR 74 bpm regular sinus, BP 128/82 mmHg, SpO2 98%. Telemetry strip transmitted via Smart Hub shows NSR with infrequent PACs. No ST elevation or ischemic changes.',\n )\n readonly soapAssessment = signal(\n '1. Paroxysmal Supraventricular Tachycardia (PSVT) vs. Benign Premature Atrial Contractions (PACs) secondary to high caffeine consumption and sympathetic stress.\\n2. Stage 1 Essential Hypertension - well controlled on current regimen.',\n )\n readonly soapPlan = signal(\n '1. Ordered 14-day continuous Holter monitor patch.\\n2. Titrate Metoprolol Succinate ER to 25mg PO daily.\\n3. Restrict caffeine to ≤1 cup/day; hydration goal 2.5L daily.\\n4. Follow-up video consultation in 3 weeks or ASAP if syncope occurs.',\n )\n\n // Prescription Generator State\n readonly selectedDrugPreset = signal('metoprolol')\n readonly customDosage = signal('25mg PO Daily in Morning')\n readonly customQuantity = signal('30 tablets')\n readonly customRefills = signal('2')\n readonly rxSuccessMessage = signal('')\n\n readonly prescriptions = signal([\n {\n id: 'rx-1',\n drugName: 'Metoprolol Succinate ER 25mg',\n dosage: 'Take 1 tablet by mouth daily in the morning',\n sig: '1 tab PO QAM',\n quantity: '30 tablets',\n refills: 2,\n pharmacy: 'CVS Pharmacy #4021 (Austin, TX)',\n timestamp: '10:24 AM',\n status: 'transmitted',\n rxNumber: 'RX-994182',\n },\n ])\n\n // Chat Thread State\n readonly chatInput = signal('')\n readonly chatMessages = signal([\n {\n id: 'msg-1',\n sender: 'doctor',\n senderName: 'Dr. Sarah Jenkins, MD',\n text: 'Hello David! I have your chart open and we are receiving your continuous telemetry stream. How are you feeling right now?',\n timestamp: '10:15 AM',\n },\n {\n id: 'msg-2',\n sender: 'patient',\n senderName: 'David Chen (You)',\n text: 'Good morning Dr. Jenkins. Feeling better than yesterday, but had another fluttering sensation around 8 AM after my second cup of coffee.',\n timestamp: '10:17 AM',\n },\n {\n id: 'msg-3',\n sender: 'patient',\n senderName: 'David Chen (You)',\n text: 'I captured the rhythm episode on my smart watch and exported the 30-second single lead PDF strip here.',\n timestamp: '10:18 AM',\n attachment: {\n name: 'Apple_Watch_ECG_Lead_I_2026.pdf',\n size: '1.4 MB · PDF ECG Report',\n type: 'pdf',\n },\n },\n {\n id: 'msg-4',\n sender: 'doctor',\n senderName: 'Dr. Sarah Jenkins, MD',\n text: 'Thank you, David! Reviewing the strip now. The baseline is normal sinus rhythm with occasional isolated PACs. This matches our telemetry.',\n timestamp: '10:20 AM',\n },\n ])\n\n private rxTimer: ReturnType | undefined\n private chatTimer: ReturnType | undefined\n private vitalsTimer: ReturnType | undefined\n\n constructor() {\n const destroyRef = inject(DestroyRef)\n const interval = setInterval(() => {\n if (!this.isCallEnded()) this.callDurationSeconds.update((v) => v + 1)\n }, 1000)\n destroyRef.onDestroy(() => {\n clearInterval(interval)\n clearTimeout(this.rxTimer)\n clearTimeout(this.chatTimer)\n clearTimeout(this.vitalsTimer)\n })\n }\n\n readonly formattedDuration = computed(() => {\n const total = this.callDurationSeconds()\n const mins = Math.floor(total / 60)\n const secs = total % 60\n return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`\n })\n\n get rootClass(): string {\n return cn('bg-background text-foreground w-full space-y-4', this.className)\n }\n\n get canvasClass(): string {\n return cn(\n 'relative flex flex-col justify-between overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950 p-4 text-white shadow-lg transition-colors duration-200',\n this.isSidebarOpen() ? 'min-h-[560px] lg:col-span-8 xl:col-span-8' : 'min-h-[600px] lg:col-span-12',\n )\n }\n\n setActiveTab(value: string): void {\n this.activeTab.set(value as TelehealthTab)\n }\n\n handleOpenTab(tab: TelehealthTab): void {\n this.activeTab.set(tab)\n this.isSidebarOpen.set(true)\n }\n\n handleEndCall(): void {\n this.isCallEnded.set(true)\n }\n\n handleRestartCall(): void {\n this.isCallEnded.set(false)\n this.callDurationSeconds.set(0)\n }\n\n handleRefreshVitals(): void {\n this.isRefreshingVitals.set(true)\n clearTimeout(this.vitalsTimer)\n this.vitalsTimer = setTimeout(() => {\n this.isRefreshingVitals.set(false)\n this.lastVitalsUpdate.set('Just now')\n }, 800)\n }\n\n handleSelectDrugPreset(drugId: string): void {\n this.selectedDrugPreset.set(drugId)\n const found = drugOptions.find((d) => d.id === drugId)\n if (found) {\n this.customDosage.set(found.defaultDosage)\n this.customQuantity.set(found.defaultQty)\n this.customRefills.set(found.refills)\n }\n }\n\n handleGeneratePrescription(): void {\n const current = drugOptions.find((d) => d.id === this.selectedDrugPreset())\n const drugName = current ? current.name : 'Custom Medication'\n const dosage = this.customDosage()\n const newRx: PrescriptionItem = {\n id: `rx-${Date.now()}`,\n drugName: `${drugName} (${dosage})`,\n dosage,\n sig: `Take as directed: ${dosage}`,\n quantity: this.customQuantity(),\n refills: parseInt(this.customRefills(), 10) || 1,\n pharmacy: 'CVS Pharmacy #4021 (Austin, TX)',\n timestamp: 'Just now',\n status: 'transmitted',\n rxNumber: `RX-${Math.floor(100000 + Math.random() * 900000)}`,\n }\n this.prescriptions.update((prev) => [newRx, ...prev])\n this.rxSuccessMessage.set(`e-Rx signed & securely transmitted to CVS Pharmacy #4021 (${newRx.rxNumber})`)\n clearTimeout(this.rxTimer)\n this.rxTimer = setTimeout(() => this.rxSuccessMessage.set(''), 4500)\n }\n\n handleSendMessage(): void {\n const text = this.chatInput().trim()\n if (!text) return\n this.chatMessages.update((prev) => [\n ...prev,\n {\n id: `msg-${Date.now()}`,\n sender: 'patient',\n senderName: 'David Chen (You)',\n text,\n timestamp: 'Just now',\n },\n ])\n this.chatInput.set('')\n\n // Simulated provider automated acknowledgment if consultation active\n clearTimeout(this.chatTimer)\n this.chatTimer = setTimeout(() => {\n if (!this.isCallEnded()) {\n this.chatMessages.update((prev) => [\n ...prev,\n {\n id: `msg-doc-${Date.now()}`,\n sender: 'doctor',\n senderName: 'Dr. Sarah Jenkins, MD',\n text: 'Noted! I have added this observation into your encounter notes and prescription schedule.',\n timestamp: 'Just now',\n },\n ])\n }\n }, 1200)\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/telehealth-video-room/telehealth-video-room.component.ts" }, { "path": "packages/registry-angular/blocks/telehealth-video-room/index.ts", "content": "export {\n UiTelehealthVideoRoomComponent,\n type ChatMessage,\n type PrescriptionItem,\n type TelehealthTab,\n} from './telehealth-video-room.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/telehealth-video-room/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/tabs.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "HIPAA-compliant telehealth video consultation room with live telemetry vitals, clinical SOAP notes, in-call encrypted chat, and prescription generator drawer.", "categories": [ "healthcare", "app", "communication" ] }