@rimori/react-client 0.3.0-next.6 → 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/dist/providers/PluginProvider.js

@@ -14,7 +14,7 @@ import ContextMenu from '../components/ContextMenu';
 import { useTheme } from '../hooks/ThemeSetter';
 const PluginContext = createContext(null);
 export const PluginProvider = ({ children, pluginId, settings }) => {
-    const [plugin, setPlugin] = useState(null);
+    const [client, setClient] = useState(null);
     const [standaloneClient, setStandaloneClient] = useState(false);
     const [applicationMode, setApplicationMode] = useState(null);
     const [theme, setTheme] = useState(null);
@@ -30,9 +30,9 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
                 void client.needsLogin().then((needLogin) => setStandaloneClient(needLogin ? client : true));
             });
         }
-        if ((!standaloneDetected && !plugin) || (standaloneDetected && standaloneClient === true)) {
+        if ((!standaloneDetected && !client) || (standaloneDetected && standaloneClient === true)) {
             void RimoriClient.getInstance(pluginId).then((client) => {
-                setPlugin(client);
+                setClient(client);
                 // Get applicationMode and theme from MessageChannel query params
                 if (!standaloneDetected) {
                     const mode = client.getQueryParam('applicationMode');
@@ -43,36 +43,30 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
                 }
             });
         }
-    }, [pluginId, standaloneClient, plugin]);
-    //route change
+    }, [pluginId, standaloneClient, client]);
     useEffect(() => {
-        if (!plugin)
+        if (!client)
             return;
-        //sidebar pages should not report url changes
         if (isSidebar)
-            return;
-        let lastHash = window.location.hash;
-        const emitUrlChange = (url) => plugin.event.emit('session.triggerUrlChange', { url });
-        const interval = setInterval(() => {
-            if (lastHash === window.location.hash)
-                return;
-            lastHash = window.location.hash;
-            // console.log('url changed:', lastHash);
-            emitUrlChange(lastHash);
-        }, 1000);
-        emitUrlChange(lastHash);
-        return () => clearInterval(interval);
-    }, [plugin, isSidebar]);
+            return; //sidebar pages should not report url changes
+        // react router overwrites native pushstate so it gets wrapped to detect url changes
+        const originalPushState = history.pushState;
+        history.pushState = (...args) => {
+            const result = originalPushState.apply(history, args);
+            client.event.emit('session.triggerUrlChange', { url: location.hash });
+            return result;
+        };
+    }, [client, isSidebar]);
     if (standaloneClient instanceof StandaloneClient) {
         return (_jsx(StandaloneAuth, { onLogin: (email, password) => __awaiter(void 0, void 0, void 0, function* () {
                 if (yield standaloneClient.login(email, password))
                     setStandaloneClient(true);
             }) }));
     }
-    if (!plugin) {
+    if (!client) {
         return '';
     }
-    return (_jsxs(PluginContext.Provider, { value: plugin, children: [!(settings === null || settings === void 0 ? void 0 : settings.disableContextMenu) && !isSidebar && !isSettings && _jsx(ContextMenu, { client: plugin }), children] }));
+    return (_jsxs(PluginContext.Provider, { value: client, children: [!(settings === null || settings === void 0 ? void 0 : settings.disableContextMenu) && !isSidebar && !isSettings && _jsx(ContextMenu, { client: client }), children] }));
 };
 export const useRimori = () => {
     const context = useContext(PluginContext);
@@ -118,7 +112,7 @@ function StandaloneAuth({ onLogin }) {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            }, children: [_jsx("p", { style: { fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem', textAlign: 'center' }, children: "Rimori Login" }), _jsx("p", { style: { marginBottom: '1rem', textAlign: 'center' }, children: "Please login with your Rimori developer account for this plugin to be able to access the Rimori platform the same it will operate in the Rimori platform." }), _jsx("input", { style: {
+            }, children: [_jsx("p", { style: { fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem', textAlign: 'center' }, children: "Rimori Login Required" }), _jsx("p", { style: { marginBottom: '1rem', textAlign: 'center' }, children: "Please login with your Rimori developer account for this plugin to be able to access the Rimori platform the same way it would when being deployed." }), _jsx("input", { style: {
                         marginBottom: '1rem',
                         width: '100%',
                         padding: '0.5rem',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.3.0-next.6",
+  "version": "0.3.0-next.8",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "2.2.0-next.3",
+    "@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.2.0-next.3",
+    "@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(() => {

package/src/providers/PluginProvider.tsx

@@ -14,7 +14,7 @@ interface PluginProviderProps {
 const PluginContext = createContext<RimoriClient | null>(null);
 
 export const PluginProvider: React.FC<PluginProviderProps> = ({ children, pluginId, settings }) => {
-  const [plugin, setPlugin] = useState<RimoriClient | null>(null);
+  const [client, setClient] = useState<RimoriClient | null>(null);
   const [standaloneClient, setStandaloneClient] = useState<StandaloneClient | boolean>(false);
   const [applicationMode, setApplicationMode] = useState<string | null>(null);
   const [theme, setTheme] = useState<string | null>(null);
@@ -36,9 +36,9 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
       });
     }
 
-    if ((!standaloneDetected && !plugin) || (standaloneDetected && standaloneClient === true)) {
+    if ((!standaloneDetected && !client) || (standaloneDetected && standaloneClient === true)) {
       void RimoriClient.getInstance(pluginId).then((client) => {
-        setPlugin(client);
+        setClient(client);
         // Get applicationMode and theme from MessageChannel query params
         if (!standaloneDetected) {
           const mode = client.getQueryParam('applicationMode');
@@ -49,28 +49,20 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
         }
       });
     }
-  }, [pluginId, standaloneClient, plugin]);
+  }, [pluginId, standaloneClient, client]);
 
-  //route change
   useEffect(() => {
-    if (!plugin) return;
-
-    //sidebar pages should not report url changes
-    if (isSidebar) return;
-
-    let lastHash = window.location.hash;
-    const emitUrlChange = (url: string) => plugin.event.emit('session.triggerUrlChange', { url });
-
-    const interval = setInterval(() => {
-      if (lastHash === window.location.hash) return;
-      lastHash = window.location.hash;
-      // console.log('url changed:', lastHash);
-      emitUrlChange(lastHash);
-    }, 1000);
-
-    emitUrlChange(lastHash);
-    return () => clearInterval(interval);
-  }, [plugin, isSidebar]);
+    if (!client) return;
+    if (isSidebar) return; //sidebar pages should not report url changes
+
+    // react router overwrites native pushstate so it gets wrapped to detect url changes
+    const originalPushState = history.pushState;
+    history.pushState = (...args) => {
+      const result = originalPushState.apply(history, args);
+      client.event.emit('session.triggerUrlChange', { url: location.hash });
+      return result;
+    };
+  }, [client, isSidebar]);
 
   if (standaloneClient instanceof StandaloneClient) {
     return (
@@ -82,13 +74,13 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
     );
   }
 
-  if (!plugin) {
+  if (!client) {
     return '';
   }
 
   return (
-    <PluginContext.Provider value={plugin}>
-      {!settings?.disableContextMenu && !isSidebar && !isSettings && <ContextMenu client={plugin} />}
+    <PluginContext.Provider value={client}>
+      {!settings?.disableContextMenu && !isSidebar && !isSettings && <ContextMenu client={client} />}
       {children}
     </PluginContext.Provider>
   );
@@ -148,10 +140,12 @@ function StandaloneAuth({ onLogin }: { onLogin: (user: string, password: string)
           justifyContent: 'center',
         }}
       >
-        <p style={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem', textAlign: 'center' }}>Rimori Login</p>
+        <p style={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem', textAlign: 'center' }}>
+          Rimori Login Required
+        </p>
         <p style={{ marginBottom: '1rem', textAlign: 'center' }}>
           Please login with your Rimori developer account for this plugin to be able to access the Rimori platform the
-          same it will operate in the Rimori platform.
+          same way it would when being deployed.
         </p>
         {/* email and password input */}
         <input