@rimori/react-client 0.3.0 → 0.4.0

package/.github/workflows/pre-release.yml

@@ -0,0 +1,149 @@
+name: Pre-Release Rimori React Client
+
+on:
+  push:
+    branches: [dev]
+    paths:
+      - '**'
+      - '!.github/workflows/**'
+
+jobs:
+  pre-release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'yarn'
+          cache-dependency-path: yarn.lock
+
+      - name: Update npm
+        run: npm install -g npm@latest
+
+      - name: Get latest @rimori/client@next version
+        id: client-version
+        run: |
+          VERSION=$(npm view @rimori/client@next version 2>/dev/null || echo "")
+          if [ -z "$VERSION" ]; then
+            echo "⚠️  Warning: No @rimori/client@next version found. Using current dependency version."
+            VERSION=$(node -p "require('./package.json').peerDependencies['@rimori/client'] || require('./package.json').devDependencies['@rimori/client']")
+            # Remove ^ prefix if present
+            VERSION="${VERSION#^}"
+          fi
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "Using @rimori/client version: $VERSION"
+
+      - name: Update @rimori/client dependency
+        run: |
+          # Update both peerDependencies and devDependencies
+          yarn add "@rimori/client@${{ steps.client-version.outputs.version }}" --dev --exact
+          # Also update peerDependencies using node
+          node -e "const fs = require('fs'); const pkg = JSON.parse(fs.readFileSync('package.json')); if (pkg.peerDependencies && pkg.peerDependencies['@rimori/client']) { pkg.peerDependencies['@rimori/client'] = '${{ steps.client-version.outputs.version }}'; fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n'); }"
+          echo "Updated @rimori/client to ${{ steps.client-version.outputs.version }}"
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build react-client (TypeScript verification)
+        run: yarn build
+
+      - name: Calculate next pre-release version
+        id: version
+        run: |
+          # Read current version from package.json (may be base or pre-release)
+          CURRENT_VERSION=$(node -p "require('./package.json').version")
+
+          # Extract base version (strip any pre-release suffix)
+          # Examples: "0.3.0" -> "0.3.0", "0.3.0-next.5" -> "0.3.0"
+          if [[ "$CURRENT_VERSION" =~ ^([0-9]+\.[0-9]+\.[0-9]+) ]]; then
+            BASE_VERSION="${BASH_REMATCH[1]}"
+          else
+            BASE_VERSION="$CURRENT_VERSION"
+          fi
+
+          # Try to get latest next version from npm
+          PACKAGE_NAME="@rimori/react-client"
+          LATEST_NEXT=$(npm view ${PACKAGE_NAME}@next version 2>/dev/null || echo "none")
+
+          if [ "$LATEST_NEXT" != "none" ]; then
+            # Extract base version and pre-release number from latest next version
+            # Example: "0.3.0-next.5" -> extract "0.3.0" and "5"
+            if [[ "$LATEST_NEXT" =~ ^([0-9]+\.[0-9]+\.[0-9]+)-next\.([0-9]+)$ ]]; then
+              LATEST_BASE="${BASH_REMATCH[1]}"
+              PRERELEASE_NUM="${BASH_REMATCH[2]}"
+
+              # If base version changed, reset to 1, otherwise increment
+              if [ "$LATEST_BASE" != "$BASE_VERSION" ]; then
+                NEW_NUM=1
+              else
+                NEW_NUM=$((PRERELEASE_NUM + 1))
+              fi
+            else
+              # Fallback: if format doesn't match, start at 1
+              NEW_NUM=1
+            fi
+          else
+            # First pre-release
+            NEW_NUM=1
+          fi
+
+          NEW_VERSION="${BASE_VERSION}-next.${NEW_NUM}"
+          echo "new_version=$NEW_VERSION" >> $GITHUB_OUTPUT
+          echo "Base version: $BASE_VERSION"
+          echo "Calculated next version: $NEW_VERSION"
+
+      - name: Update package.json version
+        run: |
+          # Use node to update version directly (yarn version creates git tags)
+          node -e "const fs = require('fs'); const pkg = JSON.parse(fs.readFileSync('package.json')); pkg.version = '${{ steps.version.outputs.new_version }}'; fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n');"
+
+      - name: Publish to npm
+        run: npm publish --tag next --access public
+        # Uses OIDC token automatically (no NODE_AUTH_TOKEN needed)
+        # Requires npm 11.5.1+ and id-token: write permission (already set)
+
+      - name: Output published version
+        run: |
+          echo "✅ Published @rimori/react-client@${{ steps.version.outputs.new_version }} to npm with @next tag"
+          echo "Using @rimori/client@${{ steps.client-version.outputs.version }}"
+
+      - name: Create git tag
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git tag "v${{ steps.version.outputs.new_version }}" -m "Pre-release v${{ steps.version.outputs.new_version }}"
+          git push origin "v${{ steps.version.outputs.new_version }}"
+          echo "🏷️ Created and pushed tag v${{ steps.version.outputs.new_version }}"
+
+      - name: Notify Slack
+        if: always()
+        uses: slackapi/slack-github-action@v1.24.0
+        with:
+          channel-id: ${{ secrets.SLACK_CHANNEL_ID }}
+          payload: |
+            {
+              "text": "Pre-Release Pipeline Status",
+              "blocks": [
+                {
+                  "type": "section",
+                  "text": {
+                    "type": "mrkdwn",
+                    "text": "📦 *@rimori/react-client Pre-Release*\n\n*Branch:* ${{ github.ref_name }}\n*Version:* ${{ steps.version.outputs.new_version }}\n*Using @rimori/client:* ${{ steps.client-version.outputs.version }}\n*Author:* ${{ github.actor }}\n*Pipeline:* <${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}|View Run>\n\n${{ job.status == 'success' && '✅ Successfully published to npm with @next tag!' || '❌ Pipeline failed. Check the logs for details.' }}"
+                  }
+                }
+              ]
+            }
+        env:
+          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}

package/dist/components/ContextMenu.js

@@ -2,12 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 const ContextMenu = ({ client }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [actions, setActions] = useState([]);
     const [position, setPosition] = useState({ x: 0, y: 0 });
-    const [openOnTextSelect, setOpenOnTextSelect] = useState(false);
     const [menuWidth, setMenuWidth] = useState(0);
     const menuRef = useRef(null);
     const isMobile = window.innerWidth < 768;
+    const openOnTextSelect = client.plugin.getUserInfo().context_menu_on_select;
+    const actions = client.plugin
+        .getPluginInfo()
+        .installedPlugins.flatMap((p) => p.context_menu_actions)
+        .filter(Boolean);
     /**
      * Calculates position for mobile context menu based on selected text bounds.
      * Centers the menu horizontally over the selected text and positions it 30px below the text's end.
@@ -29,14 +32,8 @@ const ContextMenu = ({ client }) => {
         return { x: centerX, y: textEndY, text: selectedText };
     };
     useEffect(() => {
-        const actions = client.plugin
-            .getPluginInfo()
-            .installedPlugins.flatMap((p) => p.context_menu_actions)
-            .filter(Boolean);
-        setActions(actions);
-        setOpenOnTextSelect(client.plugin.getUserInfo().context_menu_on_select);
         client.event.on('global.contextMenu.createActions', ({ data }) => {
-            setActions([...data.actions, ...actions]);
+            actions.push(...data.actions);
         });
     }, []);
     // Update menu width when menu is rendered
@@ -44,7 +41,7 @@ const ContextMenu = ({ client }) => {
         if (isOpen && menuRef.current) {
             setMenuWidth(menuRef.current.offsetWidth);
         }
-    }, [isOpen, actions]);
+    }, [isOpen]);
     useEffect(() => {
         // Track mouse position globally
         const handleMouseMove = (e) => {

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

@@ -12,6 +12,7 @@ export declare class ChunkedAudioPlayer {
     private currentIndex;
     private startedPlaying;
     private onEndOfSpeech;
+    private readonly backgroundNoiseLevel;
     constructor();
     private init;
     setOnLoudnessChange(callback: (value: number) => void): void;
@@ -19,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

@@ -19,6 +19,7 @@ export class ChunkedAudioPlayer {
         this.currentIndex = 0;
         this.startedPlaying = false;
         this.onEndOfSpeech = () => { };
+        this.backgroundNoiseLevel = 30; // Background noise level that should be treated as baseline (0)
         this.init();
     }
     init() {
@@ -88,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) {
@@ -162,9 +173,18 @@ export class ChunkedAudioPlayer {
             if (loudnessInDb > maxDb) {
                 loudnessInDb = maxDb;
             }
-            const loudnessScale = ((loudnessInDb - minDb) / (maxDb - minDb)) * 100;
-            // console.log("root:corrent loudness", loudnessScale);
-            this.loudnessCallback(loudnessScale);
+            let loudnessScale = ((loudnessInDb - minDb) / (maxDb - minDb)) * 100;
+            // Adjust loudness: shift zero level up by background noise amount
+            // Values below background noise level are set to 0
+            // Values above are remapped to 0-100 scale
+            if (loudnessScale < this.backgroundNoiseLevel) {
+                loudnessScale = 0;
+            }
+            else {
+                // Remap from [backgroundNoiseLevel, 100] to [0, 100]
+                loudnessScale = ((loudnessScale - this.backgroundNoiseLevel) / (100 - this.backgroundNoiseLevel)) * 100;
+            }
+            this.loudnessCallback(Math.round(loudnessScale));
         }
         // Call this method again at regular intervals if you want continuous loudness monitoring
         this.handle = requestAnimationFrame(() => this.monitorLoudness());

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,11 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.3.0",
+  "version": "0.4.0",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rimori-org/react-client.git"
+  },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -18,17 +23,19 @@
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@rimori/client": "^2.2.0"
+    "@rimori/client": "^2.4.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "dependencies": {
     "html2canvas": "1.4.1",
-    "react-icons": "5.4.0"
+    "react-icons": "5.4.0",
+    "react-markdown": "^10.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "^2.2.0",
+    "@rimori/client": "^2.4.0",
+    "@types/react": "^18.3.21",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react-hooks": "^7.0.0",

package/src/components/ContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { RimoriClient, MenuEntry } from '@rimori/client';
 
 export interface Position {
@@ -9,12 +9,15 @@ export interface Position {
 
 const ContextMenu = ({ client }: { client: RimoriClient }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [actions, setActions] = useState<MenuEntry[]>([]);
   const [position, setPosition] = useState<Position>({ x: 0, y: 0 });
-  const [openOnTextSelect, setOpenOnTextSelect] = useState(false);
   const [menuWidth, setMenuWidth] = useState<number>(0);
   const menuRef = useRef<HTMLDivElement>(null);
   const isMobile = window.innerWidth < 768;
+  const openOnTextSelect = client.plugin.getUserInfo().context_menu_on_select;
+  const actions = client.plugin
+    .getPluginInfo()
+    .installedPlugins.flatMap((p) => p.context_menu_actions)
+    .filter(Boolean);
 
   /**
    * Calculates position for mobile context menu based on selected text bounds.
@@ -23,7 +26,7 @@ const ContextMenu = ({ client }: { client: RimoriClient }) => {
    * @param menuWidth - The width of the menu to center properly
    * @returns Position object with x and y coordinates
    */
-  const calculateMobilePosition = (selectedText: string, menuWidth: number = 0): Position => {
+  const calculateMobilePosition = (selectedText: string, menuWidth = 0): Position => {
     const selection = window.getSelection();
     if (!selection || !selectedText) {
       return { x: 0, y: 0, text: selectedText };
@@ -42,15 +45,8 @@ const ContextMenu = ({ client }: { client: RimoriClient }) => {
   };
 
   useEffect(() => {
-    const actions = client.plugin
-      .getPluginInfo()
-      .installedPlugins.flatMap((p) => p.context_menu_actions)
-      .filter(Boolean);
-    setActions(actions);
-    setOpenOnTextSelect(client.plugin.getUserInfo().context_menu_on_select);
-
     client.event.on<{ actions: MenuEntry[] }>('global.contextMenu.createActions', ({ data }) => {
-      setActions([...data.actions, ...actions]);
+      actions.push(...data.actions);
     });
   }, []);
 
@@ -59,11 +55,11 @@ const ContextMenu = ({ client }: { client: RimoriClient }) => {
     if (isOpen && menuRef.current) {
       setMenuWidth(menuRef.current.offsetWidth);
     }
-  }, [isOpen, actions]);
+  }, [isOpen]);
 
   useEffect(() => {
     // Track mouse position globally
-    const handleMouseMove = (e: MouseEvent) => {
+    const handleMouseMove = (e: MouseEvent): void => {
       const selectedText = window.getSelection()?.toString().trim();
       if (isOpen && selectedText === position.text) return;
 
@@ -74,7 +70,7 @@ const ContextMenu = ({ client }: { client: RimoriClient }) => {
       }
     };
 
-    const handleMouseUp = (e: MouseEvent) => {
+    const handleMouseUp = (e: MouseEvent): void => {
       const selectedText = window.getSelection()?.toString().trim();
       // Check if click is inside the context menu
       if (menuRef.current && menuRef.current.contains(e.target as Node)) {
@@ -112,7 +108,7 @@ const ContextMenu = ({ client }: { client: RimoriClient }) => {
     };
 
     // Add selectionchange listener to close menu if selection is cleared and update position for mobile
-    const handleSelectionChange = () => {
+    const handleSelectionChange = (): void => {
       const selectedText = window.getSelection()?.toString().trim();
       if (!selectedText && isOpen) {
         setIsOpen(false);
@@ -161,7 +157,7 @@ const ContextMenu = ({ client }: { client: RimoriClient }) => {
   );
 };
 
-function MenuEntryItem(props: { iconUrl?: string; text: string; onClick: () => void }) {
+function MenuEntryItem(props: { iconUrl?: string; text: string; onClick: () => void }): JSX.Element {
   return (
     <button
       onClick={props.onClick}

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

@@ -12,6 +12,7 @@ export class ChunkedAudioPlayer {
   private currentIndex = 0;
   private startedPlaying = false;
   private onEndOfSpeech: () => void = () => {};
+  private readonly backgroundNoiseLevel = 30; // Background noise level that should be treated as baseline (0)
 
   constructor() {
     this.init();
@@ -87,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) {
@@ -171,10 +183,19 @@ export class ChunkedAudioPlayer {
         loudnessInDb = maxDb;
       }
 
-      const loudnessScale = ((loudnessInDb - minDb) / (maxDb - minDb)) * 100;
-      // console.log("root:corrent loudness", loudnessScale);
+      let loudnessScale = ((loudnessInDb - minDb) / (maxDb - minDb)) * 100;
+
+      // Adjust loudness: shift zero level up by background noise amount
+      // Values below background noise level are set to 0
+      // Values above are remapped to 0-100 scale
+      if (loudnessScale < this.backgroundNoiseLevel) {
+        loudnessScale = 0;
+      } else {
+        // Remap from [backgroundNoiseLevel, 100] to [0, 100]
+        loudnessScale = ((loudnessScale - this.backgroundNoiseLevel) / (100 - this.backgroundNoiseLevel)) * 100;
+      }
 
-      this.loudnessCallback(loudnessScale);
+      this.loudnessCallback(Math.round(loudnessScale));
     }
 
     // Call this method again at regular intervals if you want continuous loudness monitoring

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