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.

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">
      <CardHeader className="pb-4">
        <CardTitle className="text-xl text-white">Live Conversation</CardTitle>
      </CardHeader>
      <CardContent>
    

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

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

Get a free API key