Hiyve Components - v1.0.0
    Preparing search index...

    Function TranscriptViewer

    • TranscriptViewer component - displays live transcription entries grouped by speaker.

      Parameters

      Returns ReactElement

      Displays a scrollable list of transcription entries automatically grouped by speaker within configurable time windows. This is the base component that accepts entries directly as props for maximum flexibility.

      Use TranscriptViewer (this component) when:

      • You manage transcription state yourself (not using HiyveProvider)
      • You need to filter, transform, or merge entries from multiple sources
      • You're integrating with a custom WebRTC implementation
      • You want full control over the data flow

      Use ConnectedTranscriptViewer when:

      • You're using HiyveProvider for room/media management
      • You want automatic state synchronization
      • You prefer less boilerplate code
      • Auto-scroll: Automatically scrolls to new entries, with manual override when user scrolls up to review history
      • Speaker grouping: Combines consecutive messages from the same speaker within a configurable time window (default 5s)
      • Date dividers: Shows date separators for multi-day sessions
      • Confidence indicators: Optional visual feedback on transcription accuracy
      • Sentiment indicators: Optional mood/sentiment visualization from mood analysis
      • Full customization: Labels, colors, and styles can all be overridden

      The component receives an array of TranscriptionEntry objects and processes them:

      1. Entries are sorted by timestamp
      2. Consecutive entries from the same speaker within groupingWindowMs are combined
      3. Groups are rendered with speaker names, timestamps, and combined text
      4. Date dividers are inserted when the date changes between groups

      Basic usage with manual state management:

      function TranscriptionPanel() {
        const [entries, setEntries] = useState<TranscriptionEntry[]>([]);

        useEffect(() => {
          client.addEventListener('transcription', (event) => {
            setEntries(prev => [...prev, {
              id: event.detail.id,
              text: event.detail.text,
              speaker: event.detail.userId,
              speakerName: event.detail.userName,
              timestamp: new Date(),
            }]);
          });
        }, [client]);

        return (
          <TranscriptViewer
            entries={entries}
            localUserId={userId}
            showTimestamps
            autoScroll
          />
        );
      }

      With confidence and sentiment indicators:

      <TranscriptViewer
        entries={entries}
        localUserId={userId}
        showTimestamps
        showConfidence  // Shows colored dot based on transcription accuracy
        showSentiment   // Shows sentiment from mood analysis
        autoScroll
        groupingWindowMs={3000}  // Group messages within 3 seconds
        onEntryClick={(entry) => highlightInVideo(entry.timestamp)}
      />

      Full customization with internationalization:

      <TranscriptViewer
        entries={entries}
        localUserId={userId}
        showTimestamps
        emptyMessage="Comienza a hablar para ver transcripciones"
        labels={{
          you: 'Tú',
          today: 'Hoy',
          noTranscriptions: 'Sin transcripciones todavía',
          loading: 'Inicializando...',
        }}
        colors={{
          localUser: '#6366f1',
          confidenceHigh: '#22c55e',
          confidenceMedium: '#f59e0b',
          confidenceLow: '#ef4444',
        }}
        styles={{
          fontSize: '1rem',
          borderRadius: 12,
          maxHeight: 500,
        }}
        sx={{ bgcolor: 'background.paper', borderRadius: 2 }}
      />

    Settings

    Member Visibility

    On This Page

    When to use TranscriptViewer vs ConnectedTranscriptViewerKey FeaturesData Flow