diff --git a/src/components/playground/Playground.tsx b/src/components/playground/Playground.tsx
index 8986fa1..888fc34 100644
--- a/src/components/playground/Playground.tsx
+++ b/src/components/playground/Playground.tsx
@@ -207,7 +207,7 @@ export default function Playground({
   ]);
 
   const chatTileContent = useMemo(() => {
-    if (voiceAssistant.audioTrack) {
+    if (voiceAssistant.agent) {
       return (
         <TranscriptionTile
           agentAudioTrack={voiceAssistant.audioTrack}
@@ -216,7 +216,7 @@ export default function Playground({
       );
     }
     return <></>;
-  }, [config.settings.theme_color, voiceAssistant.audioTrack]);
+  }, [config.settings.theme_color, voiceAssistant.audioTrack, voiceAssistant.agent]);
 
   const handleRpcCall = useCallback(async () => {
     if (!voiceAssistant.agent || !room) return;
diff --git a/src/transcriptions/TranscriptionTile.tsx b/src/transcriptions/TranscriptionTile.tsx
index b168a85..a0b35b9 100644
--- a/src/transcriptions/TranscriptionTile.tsx
+++ b/src/transcriptions/TranscriptionTile.tsx
@@ -17,10 +17,10 @@ export function TranscriptionTile({
   agentAudioTrack,
   accentColor,
 }: {
-  agentAudioTrack: TrackReferenceOrPlaceholder;
+  agentAudioTrack?: TrackReferenceOrPlaceholder;
   accentColor: string;
 }) {
-  const agentMessages = useTrackTranscription(agentAudioTrack);
+  const agentMessages = useTrackTranscription(agentAudioTrack || undefined);
   const localParticipant = useLocalParticipant();
   const localMessages = useTrackTranscription({
     publication: localParticipant.microphoneTrack,
@@ -36,16 +36,19 @@ export function TranscriptionTile({
 
   // store transcripts
   useEffect(() => {
-    agentMessages.segments.forEach((s) =>
-      transcripts.set(
-        s.id,
-        segmentToChatMessage(
-          s,
-          transcripts.get(s.id),
-          agentAudioTrack.participant
+    if (agentAudioTrack) {
+      agentMessages.segments.forEach((s) =>
+        transcripts.set(
+          s.id,
+          segmentToChatMessage(
+            s,
+            transcripts.get(s.id),
+            agentAudioTrack.participant
+          )
         )
-      )
-    );
+      );
+    }
+    
     localMessages.segments.forEach((s) =>
       transcripts.set(
         s.id,
@@ -59,8 +62,9 @@ export function TranscriptionTile({
 
     const allMessages = Array.from(transcripts.values());
     for (const msg of chatMessages) {
-      const isAgent =
-        msg.from?.identity === agentAudioTrack.participant?.identity;
+      const isAgent = agentAudioTrack
+        ? msg.from?.identity === agentAudioTrack.participant?.identity
+        : msg.from?.identity !== localParticipant.localParticipant.identity;
       const isSelf =
         msg.from?.identity === localParticipant.localParticipant.identity;
       let name = msg.from?.name;
@@ -86,9 +90,10 @@ export function TranscriptionTile({
     transcripts,
     chatMessages,
     localParticipant.localParticipant,
-    agentAudioTrack.participant,
+    agentAudioTrack?.participant,
     agentMessages.segments,
     localMessages.segments,
+    agentAudioTrack,
   ]);
 
   return (