LiveTranscript.tsx

prank-your-dad · ui, live-transcript, card-layout, real-time-display, realtime

Renders live transcript UI, displaying real-time text within card layout.

// Source: https://github.com/VapiAI/prank-your-dad | License: MIT | Copyright 2025 Vapi
// Provided via justclaw.it.com; keep this notice with the code.
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import type { TranscriptEntry } from '@/types';

interface LiveTranscriptProps {
  transcript: TranscriptEntry[];
  partialTranscript?: TranscriptEntry | null;
}

export function LiveTranscript({ transcript, partialTranscript }: LiveTranscriptProps) {
  if (transcript.length === 0 && !partialTranscript) {
    return null;
  }

  return (
    <Card className="bg-gray-800/50 backdrop-blur-sm border-gray-700 shadow-2xl mt-8">
      

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search 40K more like it.

Get a free API key