From 81d066074cf93daa49981eebf3fe0a33deffc168 Mon Sep 17 00:00:00 2001
From: James Hush <james@daily.co>
Date: Mon, 14 Apr 2025 11:48:55 +0800
Subject: [PATCH] Fix lint

---
 .../react/src/components/DebugDisplay.tsx     | 32 ++++++++++++-------
 examples/simple-chatbot/server/bot-openai.py  | 14 +++++++-
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/examples/simple-chatbot/client/react/src/components/DebugDisplay.tsx b/examples/simple-chatbot/client/react/src/components/DebugDisplay.tsx
index c5dcfef01..144e7cb2e 100644
--- a/examples/simple-chatbot/client/react/src/components/DebugDisplay.tsx
+++ b/examples/simple-chatbot/client/react/src/components/DebugDisplay.tsx
@@ -1,13 +1,13 @@
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback } from "react";
 import {
   Participant,
   RTVIEvent,
   TransportState,
   TranscriptData,
   BotLLMTextData,
-} from '@pipecat-ai/client-js';
-import { useRTVIClient, useRTVIClientEvent } from '@pipecat-ai/client-react';
-import './DebugDisplay.css';
+} from "@pipecat-ai/client-js";
+import { useRTVIClient, useRTVIClientEvent } from "@pipecat-ai/client-react";
+import "./DebugDisplay.css";
 
 export function DebugDisplay() {
   const debugLogRef = useRef<HTMLDivElement>(null);
@@ -16,14 +16,14 @@ export function DebugDisplay() {
   const log = useCallback((message: string) => {
     if (!debugLogRef.current) return;
 
-    const entry = document.createElement('div');
+    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
+    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);
@@ -68,7 +68,7 @@ export function DebugDisplay() {
     useCallback(
       (track: MediaStreamTrack, participant?: Participant) => {
         log(
-          `Track started: ${track.kind} from ${participant?.name || 'unknown'}`
+          `Track started: ${track.kind} from ${participant?.name || "unknown"}`
         );
       },
       [log]
@@ -80,7 +80,7 @@ export function DebugDisplay() {
     useCallback(
       (track: MediaStreamTrack, participant?: Participant) => {
         log(
-          `Track stopped: ${track.kind} from ${participant?.name || 'unknown'}`
+          `Track stopped: ${track.kind} from ${participant?.name || "unknown"}`
         );
       },
       [log]
@@ -135,6 +135,16 @@ export function DebugDisplay() {
     )
   );
 
+  useRTVIClientEvent(
+    RTVIEvent.ServerMessage,
+    useCallback(
+      (data: unknown) => {
+        log(`Server Message: ${data}`);
+      },
+      [log]
+    )
+  );
+
   return (
     <div className="debug-panel">
       <h3>Debug Info</h3>
diff --git a/examples/simple-chatbot/server/bot-openai.py b/examples/simple-chatbot/server/bot-openai.py
index 3ad29a28d..923a32c6f 100644
--- a/examples/simple-chatbot/server/bot-openai.py
+++ b/examples/simple-chatbot/server/bot-openai.py
@@ -40,7 +40,12 @@ 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 RTVIConfig, RTVIObserver, RTVIProcessor
+from pipecat.processors.frameworks.rtvi import (
+    RTVIConfig,
+    RTVIObserver,
+    RTVIProcessor,
+    RTVIServerMessageFrame,
+)
 from pipecat.services.elevenlabs.tts import ElevenLabsTTSService
 from pipecat.services.openai.llm import OpenAILLMService
 from pipecat.transports.services.daily import DailyParams, DailyTransport
@@ -90,15 +95,22 @@ class TalkingAnimation(FrameProcessor):
         """
         await super().process_frame(frame, direction)
 
+        # Send a custom message to client
+        animation_frame = RTVIServerMessageFrame(
+            data={"type": "animation", "payload": {"is_talking": self._is_talking}}
+        )
+
         # Switch to talking animation when bot starts speaking
         if isinstance(frame, BotStartedSpeakingFrame):
             if not self._is_talking:
                 await self.push_frame(talking_frame)
                 self._is_talking = True
+                await self.push_frame(animation_frame)
         # Return to static frame when bot stops speaking
         elif isinstance(frame, BotStoppedSpeakingFrame):
             await self.push_frame(quiet_frame)
             self._is_talking = False
+            await self.push_frame(animation_frame)
 
         await self.push_frame(frame, direction)