Add RTVI transcripts, align styling

examples/simple-chatbot/examples/javascript/src/app.js

@@ -63,6 +63,14 @@ class ChatbotClient {
   log(message) {
     const entry = document.createElement('div');
     entry.textContent = `${new Date().toISOString()} - ${message}`;
+
+    // Add styling based on message type
+    if (message.startsWith('User: ')) {
+      entry.style.color = '#2196F3'; // blue for user
+    } else if (message.startsWith('Bot: ')) {
+      entry.style.color = '#4CAF50'; // green for bot
+    }
+
     this.debugLog.appendChild(entry);
     this.debugLog.scrollTop = this.debugLog.scrollHeight;
     console.log(message);
@@ -221,6 +229,23 @@ class ChatbotClient {
             this.log(`Bot ready: ${JSON.stringify(data)}`);
             this.setupMediaTracks();
           },
+          // Transcript events
+          onUserTranscript: (data) => {
+            // Only log final transcripts
+            if (data.final) {
+              this.log(`User: ${data.text}`);
+            }
+          },
+          onBotTranscript: (data) => {
+            this.log(`Bot: ${data.text}`);
+          },
+          // Error handling
+          onMessageError: (error) => {
+            console.log('Message error:', error);
+          },
+          onError: (error) => {
+            console.log('Error:', error);
+          },
         },
       });
 

examples/simple-chatbot/examples/javascript/src/style.css

@@ -80,6 +80,12 @@ button:disabled {
   padding: 20px;
 }
 
+.debug-panel h3 {
+  margin: 0 0 10px 0;
+  font-size: 16px;
+  font-weight: bold;
+}
+
 #debug-log {
   height: 200px;
   overflow-y: auto;
@@ -87,4 +93,6 @@ button:disabled {
   padding: 10px;
   border-radius: 4px;
   font-family: monospace;
+  font-size: 12px;
+  line-height: 1.4;
 }

examples/simple-chatbot/examples/react/src/components/DebugDisplay.tsx

@@ -1,5 +1,11 @@
 import { useRef, useCallback } from 'react';
-import { Participant, RTVIEvent, TransportState } from 'realtime-ai';
+import {
+  Participant,
+  RTVIEvent,
+  TransportState,
+  TranscriptData,
+  BotLLMTextData,
+} from 'realtime-ai';
 import { useRTVIClient, useRTVIClientEvent } from 'realtime-ai-react';
 import './DebugDisplay.css';
 
@@ -12,6 +18,14 @@ export function DebugDisplay() {
 
     const entry = document.createElement('div');
     entry.textContent = `${new Date().toISOString()} - ${message}`;
+
+    // Add styling based on message type
+    if (message.startsWith('User: ')) {
+      entry.style.color = '#2196F3'; // blue for user
+    } else if (message.startsWith('Bot: ')) {
+      entry.style.color = '#4CAF50'; // green for bot
+    }
+
     debugLogRef.current.appendChild(entry);
     debugLogRef.current.scrollTop = debugLogRef.current.scrollHeight;
   }, []);
@@ -97,6 +111,30 @@ export function DebugDisplay() {
     }, [client, log])
   );
 
+  // Log transcripts
+  useRTVIClientEvent(
+    RTVIEvent.UserTranscript,
+    useCallback(
+      (data: TranscriptData) => {
+        // Only log final transcripts
+        if (data.final) {
+          log(`User: ${data.text}`);
+        }
+      },
+      [log]
+    )
+  );
+
+  useRTVIClientEvent(
+    RTVIEvent.BotTranscript,
+    useCallback(
+      (data: BotLLMTextData) => {
+        log(`Bot: ${data.text}`);
+      },
+      [log]
+    )
+  );
+
   return (
     <div className="debug-panel">
       <h3>Debug Info</h3>

examples/simple-chatbot/server/bot.py

@@ -29,6 +29,10 @@ from pipecat.pipeline.runner import PipelineRunner
 from pipecat.pipeline.task import PipelineParams, PipelineTask
 from pipecat.processors.aggregators.openai_llm_context import OpenAILLMContext
 from pipecat.processors.frame_processor import FrameDirection, FrameProcessor
+from pipecat.processors.frameworks.rtvi import (
+    RTVIBotTranscriptionProcessor,
+    RTVIUserTranscriptionProcessor,
+)
 from pipecat.services.elevenlabs import ElevenLabsTTSService
 from pipecat.services.openai import OpenAILLMService
 from pipecat.transports.services.daily import DailyParams, DailyTransport
@@ -143,11 +147,21 @@ async def main():
 
         ta = TalkingAnimation()
 
+        # RTVI
+
+        # This will emit UserTranscript events.
+        rtvi_user_transcription = RTVIUserTranscriptionProcessor()
+
+        # This will emit BotTranscript events.
+        rtvi_bot_transcription = RTVIBotTranscriptionProcessor()
+
         pipeline = Pipeline(
             [
                 transport.input(),
+                rtvi_user_transcription,
                 context_aggregator.user(),
                 llm,
+                rtvi_bot_transcription,
                 tts,
                 ta,
                 transport.output(),