@rimori/react-client 0.3.0-next.7 → 0.3.0-next.8

package/dist/components/ai/Assistant.js

@@ -26,6 +26,12 @@ export function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartCo
             sender.handleNewText(autoStartConversation.assistantMessage, isLoading);
         }
     }, []);
+    // Cleanup: stop audio playback and clean up resources on unmount
+    useEffect(() => {
+        return () => {
+            sender.cleanup();
+        };
+    }, [sender]);
     useEffect(() => {
         var _a;
         let message = lastAssistantMessage;

package/dist/components/ai/Avatar.js

@@ -38,6 +38,12 @@ export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversat
             append([{ role: 'user', content: autoStartConversation.userMessage, id: messages.length.toString() }]);
         }
     }, [autoStartConversation, voiceId]);
+    // Cleanup: stop audio playback and clean up resources on unmount
+    useEffect(() => {
+        return () => {
+            sender.cleanup();
+        };
+    }, [sender]);
     useEffect(() => {
         if ((lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.role) === 'assistant') {
             sender.handleNewText(lastMessage.content, isLoading);

package/dist/components/ai/EmbeddedAssistent/TTS/MessageSender.d.ts

@@ -11,6 +11,7 @@ export declare class MessageSender {
     private generateSpeech;
     play(): void;
     stop(): void;
+    cleanup(): void;
     private reset;
     setVolume(volume: number): void;
     setOnLoudnessChange(callback: (value: number) => void): void;

package/dist/components/ai/EmbeddedAssistent/TTS/MessageSender.js

@@ -72,6 +72,9 @@ export class MessageSender {
     stop() {
         this.player.stopPlayback();
     }
+    cleanup() {
+        this.player.cleanup();
+    }
     reset() {
         this.stop();
         this.fetchedSentences.clear();

package/dist/components/ai/EmbeddedAssistent/TTS/Player.d.ts

@@ -20,6 +20,7 @@ export declare class ChunkedAudioPlayer {
     addChunk(chunk: ArrayBuffer, position: number): Promise<void>;
     private playChunks;
     stopPlayback(): void;
+    cleanup(): void;
     private playChunk;
     playAgain(): Promise<void>;
     private monitorLoudness;

package/dist/components/ai/EmbeddedAssistent/TTS/Player.js

@@ -89,6 +89,16 @@ export class ChunkedAudioPlayer {
         this.shouldMonitorLoudness = false;
         cancelAnimationFrame(this.handle);
     }
+    cleanup() {
+        // Stop playback first
+        this.stopPlayback();
+        // Close AudioContext to free resources
+        if (this.audioContext && this.audioContext.state !== 'closed') {
+            this.audioContext.close().catch((e) => {
+                console.warn('Error closing AudioContext:', e);
+            });
+        }
+    }
     playChunk(chunk) {
         // console.log({queue: this.chunkQueue})
         if (!chunk) {

package/dist/components/audio/Playbutton.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { FaPlayCircle, FaStopCircle } from 'react-icons/fa';
 import { useRimori } from '../../providers/PluginProvider';
 import { EventBus } from '@rimori/client';
@@ -20,6 +20,8 @@ export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, in
     const [isPlaying, setIsPlaying] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const { ai } = useRimori();
+    const audioRef = useRef(null);
+    const eventBusListenerRef = useRef(null);
     useEffect(() => {
         if (audioUrl)
             setAudioUrl(null);
@@ -37,9 +39,22 @@ export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, in
     });
     // Effect to play audio when audioUrl changes and play state is true
     useEffect(() => {
-        if (!audioUrl || !isPlaying)
+        if (!audioUrl || !isPlaying) {
+            // Stop any existing audio when not playing
+            if (audioRef.current) {
+                audioRef.current.pause();
+                audioRef.current.currentTime = 0;
+                audioRef.current = null;
+            }
             return;
+        }
+        // Clean up previous audio instance if it exists
+        if (audioRef.current) {
+            audioRef.current.pause();
+            audioRef.current.currentTime = 0;
+        }
         const audio = new Audio(audioUrl);
+        audioRef.current = audio;
         audio.playbackRate = speed;
         audio
             .play()
@@ -47,16 +62,41 @@ export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, in
             audio.onended = () => {
                 setIsPlaying(false);
                 isFetchingAudio = false;
+                audioRef.current = null;
             };
         })
             .catch((e) => {
             console.warn('Error playing audio:', e);
             setIsPlaying(false);
+            audioRef.current = null;
         });
         return () => {
-            audio.pause();
+            if (audioRef.current) {
+                audioRef.current.pause();
+                audioRef.current.currentTime = 0;
+                audioRef.current = null;
+            }
         };
     }, [audioUrl, isPlaying, speed]);
+    // Cleanup on unmount - stop audio and revoke object URL
+    useEffect(() => {
+        return () => {
+            if (audioRef.current) {
+                audioRef.current.pause();
+                audioRef.current.currentTime = 0;
+                audioRef.current = null;
+            }
+            setIsPlaying(false);
+        };
+    }, []);
+    // Cleanup audioUrl on unmount
+    useEffect(() => {
+        return () => {
+            if (audioUrl) {
+                URL.revokeObjectURL(audioUrl);
+            }
+        };
+    }, [audioUrl]);
     const togglePlayback = () => {
         if (!isPlaying && !audioUrl) {
             generateAudio().then(() => setIsPlaying(true));
@@ -68,7 +108,15 @@ export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, in
     useEffect(() => {
         if (!playListenerEvent)
             return;
-        EventBus.on(playListenerEvent, () => togglePlayback());
+        const handler = () => togglePlayback();
+        const listener = EventBus.on(playListenerEvent, handler);
+        eventBusListenerRef.current = listener;
+        return () => {
+            if (eventBusListenerRef.current) {
+                eventBusListenerRef.current.off();
+                eventBusListenerRef.current = null;
+            }
+        };
     }, [playListenerEvent]);
     useEffect(() => {
         if (!playOnMount || isFetchingAudio)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.3.0-next.7",
+  "version": "0.3.0-next.8",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "2.3.0-next.2",
+    "@rimori/client": "2.3.0-next.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "2.3.0-next.2",
+    "@rimori/client": "2.3.0-next.3",
     "@types/react": "^18.3.21",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",

package/src/components/ai/Assistant.tsx

@@ -38,6 +38,13 @@ export function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartCo
     }
   }, []);
 
+  // Cleanup: stop audio playback and clean up resources on unmount
+  useEffect(() => {
+    return () => {
+      sender.cleanup();
+    };
+  }, [sender]);
+
   useEffect(() => {
     let message = lastAssistantMessage;
     if (message !== messages[messages.length - 1]?.content) {

package/src/components/ai/Avatar.tsx

@@ -61,6 +61,13 @@ export function Avatar({
     }
   }, [autoStartConversation, voiceId]);
 
+  // Cleanup: stop audio playback and clean up resources on unmount
+  useEffect(() => {
+    return () => {
+      sender.cleanup();
+    };
+  }, [sender]);
+
   useEffect(() => {
     if (lastMessage?.role === 'assistant') {
       sender.handleNewText(lastMessage.content, isLoading);

package/src/components/ai/EmbeddedAssistent/TTS/MessageSender.ts

@@ -74,6 +74,10 @@ export class MessageSender {
     this.player.stopPlayback();
   }
 
+  public cleanup() {
+    this.player.cleanup();
+  }
+
   private reset() {
     this.stop();
     this.fetchedSentences.clear();

package/src/components/ai/EmbeddedAssistent/TTS/Player.ts

@@ -88,6 +88,17 @@ export class ChunkedAudioPlayer {
     cancelAnimationFrame(this.handle);
   }
 
+  public cleanup(): void {
+    // Stop playback first
+    this.stopPlayback();
+    // Close AudioContext to free resources
+    if (this.audioContext && this.audioContext.state !== 'closed') {
+      this.audioContext.close().catch((e) => {
+        console.warn('Error closing AudioContext:', e);
+      });
+    }
+  }
+
   private playChunk(chunk: ArrayBuffer): Promise<void> {
     // console.log({queue: this.chunkQueue})
     if (!chunk) {

package/src/components/audio/Playbutton.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { FaPlayCircle, FaStopCircle } from 'react-icons/fa';
 import { useRimori } from '../../providers/PluginProvider';
 import { EventBus } from '@rimori/client';
@@ -34,6 +34,8 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
   const [isPlaying, setIsPlaying] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const { ai } = useRimori();
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const eventBusListenerRef = useRef<{ off: () => void } | null>(null);
 
   useEffect(() => {
     if (audioUrl) setAudioUrl(null);
@@ -53,8 +55,24 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
 
   // Effect to play audio when audioUrl changes and play state is true
   useEffect(() => {
-    if (!audioUrl || !isPlaying) return;
+    if (!audioUrl || !isPlaying) {
+      // Stop any existing audio when not playing
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+        audioRef.current = null;
+      }
+      return;
+    }
+
+    // Clean up previous audio instance if it exists
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+    }
+
     const audio = new Audio(audioUrl);
+    audioRef.current = audio;
     audio.playbackRate = speed;
     audio
       .play()
@@ -62,18 +80,45 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
         audio.onended = () => {
           setIsPlaying(false);
           isFetchingAudio = false;
+          audioRef.current = null;
         };
       })
       .catch((e) => {
         console.warn('Error playing audio:', e);
         setIsPlaying(false);
+        audioRef.current = null;
       });
 
     return () => {
-      audio.pause();
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+        audioRef.current = null;
+      }
     };
   }, [audioUrl, isPlaying, speed]);
 
+  // Cleanup on unmount - stop audio and revoke object URL
+  useEffect(() => {
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+        audioRef.current = null;
+      }
+      setIsPlaying(false);
+    };
+  }, []);
+
+  // Cleanup audioUrl on unmount
+  useEffect(() => {
+    return () => {
+      if (audioUrl) {
+        URL.revokeObjectURL(audioUrl);
+      }
+    };
+  }, [audioUrl]);
+
   const togglePlayback = () => {
     if (!isPlaying && !audioUrl) {
       generateAudio().then(() => setIsPlaying(true));
@@ -84,7 +129,16 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
 
   useEffect(() => {
     if (!playListenerEvent) return;
-    EventBus.on(playListenerEvent, () => togglePlayback());
+    const handler = () => togglePlayback();
+    const listener = EventBus.on(playListenerEvent, handler);
+    eventBusListenerRef.current = listener;
+
+    return () => {
+      if (eventBusListenerRef.current) {
+        eventBusListenerRef.current.off();
+        eventBusListenerRef.current = null;
+      }
+    };
   }, [playListenerEvent]);
 
   useEffect(() => {