Sending Search Response to RTVI

2025-01-24 18:59:46 -03:00
parent 7c52736ff6
commit 07c84b733b
17 changed files with 2328 additions and 12 deletions
--- a/examples/news-chatbot/client/javascript/README.md
+++ b/examples/news-chatbot/client/javascript/README.md
@@ -0,0 +1,27 @@
+# JavaScript Implementation
+
+Basic implementation using the [Pipecat JavaScript SDK](https://docs.pipecat.ai/client/js/introduction).
+
+## Setup
+
+1. Run the bot server. See the [server README](../../README).
+
+2. Navigate to the `client/javascript` directory:
+
+```bash
+cd client/javascript
+```
+
+3. Install dependencies:
+
+```bash
+npm install
+```
+
+4. Run the client app:
+
+```
+npm run dev
+```
+
+5. Visit http://localhost:5173 in your browser.
--- a/examples/news-chatbot/client/javascript/index.html
+++ b/examples/news-chatbot/client/javascript/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Chatbot</title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="status-bar">
+      <div class="status">
+        Status: <span id="connection-status">Disconnected</span>
+      </div>
+      <div class="controls">
+        <button id="connect-btn">Connect</button>
+        <button id="disconnect-btn" disabled>Disconnect</button>
+      </div>
+    </div>
+
+    <div class="main-content">
+      <div class="bot-container">
+        <div id="search-result-container">
+        </div>
+        <audio id="bot-audio" autoplay></audio>
+      </div>
+    </div>
+
+    <div class="debug-panel">
+      <h3>Debug Info</h3>
+      <div id="debug-log"></div>
+    </div>
+  </div>
+
+  <script type="module" src="/src/app.js"></script>
+  <link rel="stylesheet" href="/src/style.css">
+</body>
+
+</html>
--- a/examples/news-chatbot/client/javascript/package-lock.json
+++ b/examples/news-chatbot/client/javascript/package-lock.json
--- a/examples/news-chatbot/client/javascript/package.json
+++ b/examples/news-chatbot/client/javascript/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "vite": "^6.0.2"
+  },
+  "dependencies": {
+    "@pipecat-ai/client-js": "^0.3.2",
+    "@pipecat-ai/daily-transport": "^0.3.4"
+  }
+}
--- a/examples/news-chatbot/client/javascript/src/app.js
+++ b/examples/news-chatbot/client/javascript/src/app.js
@@ -0,0 +1,341 @@
+/**
+ * Copyright (c) 2024–2025, Daily
+ *
+ * SPDX-License-Identifier: BSD 2-Clause License
+ */
+
+/**
+ * RTVI Client Implementation
+ *
+ * This client connects to an RTVI-compatible bot server using WebRTC (via Daily).
+ * It handles audio/video streaming and manages the connection lifecycle.
+ *
+ * Requirements:
+ * - A running RTVI bot server (defaults to http://localhost:7860)
+ * - The server must implement the /connect endpoint that returns Daily.co room credentials
+ * - Browser with WebRTC support
+ */
+
+import {LogLevel, RTVIClient, RTVIClientHelper, RTVIEvent} from '@pipecat-ai/client-js';
+import { DailyTransport } from '@pipecat-ai/daily-transport';
+
+class SearchResponseHelper extends RTVIClientHelper {
+
+  constructor(contentPanel) {
+    super()
+    this.contentPanel = contentPanel
+  }
+
+  handleMessage(rtviMessage) {
+    console.log("SearchResponseHelper, received message:", rtviMessage)
+    if (rtviMessage.data) {
+      // Clear existing content
+      this.contentPanel.innerHTML = "";
+
+      // Create a container for all content
+      const contentContainer = document.createElement('div');
+      contentContainer.className = "content-container";
+
+      // Add the search_result
+      if (rtviMessage.data.search_result) {
+        const searchResultDiv = document.createElement('div');
+        searchResultDiv.className = "search-result";
+        searchResultDiv.textContent = rtviMessage.data.search_result;
+        contentContainer.appendChild(searchResultDiv);
+      }
+
+      // Add the sources
+      if (rtviMessage.data.origins) {
+        const sourcesDiv = document.createElement('div');
+        sourcesDiv.className = "sources";
+
+        const sourcesTitle = document.createElement('h3');
+        sourcesTitle.className = "sources-title";
+        sourcesTitle.textContent = "Sources:";
+        sourcesDiv.appendChild(sourcesTitle);
+
+        rtviMessage.data.origins.forEach(origin => {
+          const sourceLink = document.createElement('a');
+          sourceLink.className = "source-link";
+          sourceLink.href = origin.site_uri;
+          sourceLink.target = "_blank";
+          sourceLink.textContent = origin.site_title;
+          sourcesDiv.appendChild(sourceLink);
+        });
+
+        contentContainer.appendChild(sourcesDiv);
+      }
+
+      // Add the rendered_content in an iframe
+      if (rtviMessage.data.rendered_content) {
+        const iframe = document.createElement('iframe');
+        iframe.className = "iframe-container";
+        iframe.srcdoc = rtviMessage.data.rendered_content;
+        contentContainer.appendChild(iframe);
+      }
+
+      // Append the content container to the content panel
+      this.contentPanel.appendChild(contentContainer);
+    }
+  }
+
+  getMessageTypes() {
+    return ["bot-llm-search-response"]
+  }
+}
+
+/**
+ * ChatbotClient handles the connection and media management for a real-time
+ * voice and video interaction with an AI bot.
+ */
+class ChatbotClient {
+  constructor() {
+    // Initialize client state
+    this.rtviClient = null;
+    this.setupDOMElements();
+    this.setupEventListeners();
+  }
+
+  /**
+   * Set up references to DOM elements and create necessary media elements
+   */
+  setupDOMElements() {
+    // Get references to UI control elements
+    this.connectBtn = document.getElementById('connect-btn');
+    this.disconnectBtn = document.getElementById('disconnect-btn');
+    this.statusSpan = document.getElementById('connection-status');
+    this.debugLog = document.getElementById('debug-log');
+    this.searchResultContainer = document.getElementById('search-result-container');
+
+    // Create an audio element for bot's voice output
+    this.botAudio = document.createElement('audio');
+    this.botAudio.autoplay = true;
+    this.botAudio.playsInline = true;
+    document.body.appendChild(this.botAudio);
+  }
+
+  /**
+   * Set up event listeners for connect/disconnect buttons
+   */
+  setupEventListeners() {
+    this.connectBtn.addEventListener('click', () => this.connect());
+    this.disconnectBtn.addEventListener('click', () => this.disconnect());
+  }
+
+  /**
+   * Add a timestamped message to the debug log
+   */
+  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);
+  }
+
+  /**
+   * Update the connection status display
+   */
+  updateStatus(status) {
+    this.statusSpan.textContent = status;
+    this.log(`Status: ${status}`);
+  }
+
+  /**
+   * Check for available media tracks and set them up if present
+   * This is called when the bot is ready or when the transport state changes to ready
+   */
+  setupMediaTracks() {
+    if (!this.rtviClient) return;
+
+    // Get current tracks from the client
+    const tracks = this.rtviClient.tracks();
+
+    // Set up any available bot tracks
+    if (tracks.bot?.audio) {
+      this.setupAudioTrack(tracks.bot.audio);
+    }
+  }
+
+  /**
+   * Set up listeners for track events (start/stop)
+   * This handles new tracks being added during the session
+   */
+  setupTrackListeners() {
+    if (!this.rtviClient) return;
+
+    // Listen for new tracks starting
+    this.rtviClient.on(RTVIEvent.TrackStarted, (track, participant) => {
+      // Only handle non-local (bot) tracks
+      if (!participant?.local && track.kind === 'audio') {
+        this.setupAudioTrack(track);
+      }
+    });
+
+    // Listen for tracks stopping
+    this.rtviClient.on(RTVIEvent.TrackStopped, (track, participant) => {
+      this.log(
+        `Track stopped event: ${track.kind} from ${
+          participant?.name || 'unknown'
+        }`
+      );
+    });
+  }
+
+  /**
+   * Set up an audio track for playback
+   * Handles both initial setup and track updates
+   */
+  setupAudioTrack(track) {
+    this.log('Setting up audio track');
+    // Check if we're already playing this track
+    if (this.botAudio.srcObject) {
+      const oldTrack = this.botAudio.srcObject.getAudioTracks()[0];
+      if (oldTrack?.id === track.id) return;
+    }
+    // Create a new MediaStream with the track and set it as the audio source
+    this.botAudio.srcObject = new MediaStream([track]);
+  }
+
+  /**
+   * Initialize and connect to the bot
+   * This sets up the RTVI client, initializes devices, and establishes the connection
+   */
+  async connect() {
+    try {
+      // Create a new Daily transport for WebRTC communication
+      const transport = new DailyTransport();
+
+      // Initialize the RTVI client with our configuration
+      this.rtviClient = new RTVIClient({
+        transport,
+        params: {
+          // The baseURL and endpoint of your bot server that the client will connect to
+          baseUrl: 'http://localhost:7860',
+          endpoints: {
+            connect: '/connect',
+          },
+        },
+        enableMic: true, // Enable microphone for user input
+        enableCam: false,
+        callbacks: {
+          // Handle connection state changes
+          onConnected: () => {
+            this.updateStatus('Connected');
+            this.connectBtn.disabled = true;
+            this.disconnectBtn.disabled = false;
+            this.log('Client connected');
+          },
+          onDisconnected: () => {
+            this.updateStatus('Disconnected');
+            this.connectBtn.disabled = false;
+            this.disconnectBtn.disabled = true;
+            this.log('Client disconnected');
+          },
+          // Handle transport state changes
+          onTransportStateChanged: (state) => {
+            this.updateStatus(`Transport: ${state}`);
+            this.log(`Transport state changed: ${state}`);
+            if (state === 'ready') {
+              this.setupMediaTracks();
+            }
+          },
+          // Handle bot connection events
+          onBotConnected: (participant) => {
+            this.log(`Bot connected: ${JSON.stringify(participant)}`);
+          },
+          onBotDisconnected: (participant) => {
+            this.log(`Bot disconnected: ${JSON.stringify(participant)}`);
+          },
+          onBotReady: (data) => {
+            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);
+          },
+        },
+      });
+      //this.rtviClient.setLogLevel(LogLevel.DEBUG)
+      this.rtviClient.registerHelper("llm", new SearchResponseHelper(this.searchResultContainer))
+
+      // Set up listeners for media track events
+      this.setupTrackListeners();
+
+      // Initialize audio devices
+      this.log('Initializing devices...');
+      await this.rtviClient.initDevices();
+
+      // Connect to the bot
+      this.log('Connecting to bot...');
+      await this.rtviClient.connect();
+
+      this.log('Connection complete');
+    } catch (error) {
+      // Handle any errors during connection
+      this.log(`Error connecting: ${error.message}`);
+      this.log(`Error stack: ${error.stack}`);
+      this.updateStatus('Error');
+
+      // Clean up if there's an error
+      if (this.rtviClient) {
+        try {
+          await this.rtviClient.disconnect();
+        } catch (disconnectError) {
+          this.log(`Error during disconnect: ${disconnectError.message}`);
+        }
+      }
+    }
+  }
+
+  /**
+   * Disconnect from the bot and clean up media resources
+   */
+  async disconnect() {
+    if (this.rtviClient) {
+      try {
+        // Disconnect the RTVI client
+        await this.rtviClient.disconnect();
+        this.rtviClient = null;
+
+        // Clean up audio
+        if (this.botAudio.srcObject) {
+          this.botAudio.srcObject.getTracks().forEach((track) => track.stop());
+          this.botAudio.srcObject = null;
+        }
+
+        // Clean up video
+        this.searchResultContainer.innerHTML = '';
+      } catch (error) {
+        this.log(`Error disconnecting: ${error.message}`);
+      }
+    }
+  }
+}
+
+// Initialize the client when the page loads
+window.addEventListener('DOMContentLoaded', () => {
+  new ChatbotClient();
+});
--- a/examples/news-chatbot/client/javascript/src/style.css
+++ b/examples/news-chatbot/client/javascript/src/style.css
@@ -0,0 +1,134 @@
+body {
+  margin: 0;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.controls button {
+  padding: 8px 16px;
+  margin-left: 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+#connect-btn {
+  background-color: #4caf50;
+  color: white;
+}
+
+#disconnect-btn {
+  background-color: #f44336;
+  color: white;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.main-content {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.bot-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#search-result-container {
+  background-color: #e0e0e0;
+  padding: 20px;
+  width: calc(100% - 40px);
+  height: 450px;
+  overflow: auto;
+}
+
+/* Container for all content */
+.content-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px; /* Space between elements */
+    font-family: Arial, sans-serif;
+}
+
+/* Styles for the search result */
+.search-result {
+    font-size: 16px;
+    line-height: 1.5;
+    color: #333;
+}
+
+/* Styles for the sources container */
+.sources {
+    display: flex;
+    flex-direction: column;
+    gap: 8px; /* Space between source links */
+}
+
+.sources-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #444;
+}
+
+/* Styles for source links */
+.source-link {
+    text-decoration: none;
+    color: #1a73e8;
+}
+
+.source-link:hover {
+    text-decoration: underline;
+}
+
+/* Styles for the iframe container */
+.iframe-container {
+    flex: none;
+    width: 100%;
+    height: 400px; /* Adjust height as needed */
+    border: none;
+}
+
+.debug-panel {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.debug-panel h3 {
+  margin: 0 0 10px 0;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+#debug-log {
+  height: 200px;
+  overflow-y: auto;
+  background-color: #f8f8f8;
+  padding: 10px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 1.4;
+}
--- a/examples/news-chatbot/client/javascript/vite.config.js
+++ b/examples/news-chatbot/client/javascript/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    server: {
+        proxy: {
+            // Proxy /api requests to the backend server
+            '/connect': {
+                target: 'http://0.0.0.0:7860', // Replace with your backend URL
+                changeOrigin: true,
+            },
+        },
+    },
+});