@rimori/react-client 0.1.0

package/dist/react-client/src/components/ai/EmbeddedAssistent/CircleAudioAvatar.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { EventBus } from '@rimori/client';
+export function CircleAudioAvatar({ imageUrl, className, isDarkTheme = false, width = '150px', }) {
+    const canvasRef = useRef(null);
+    const currentLoudnessRef = useRef(0);
+    const targetLoudnessRef = useRef(0);
+    const animationFrameRef = useRef(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                const image = new Image();
+                image.src = imageUrl;
+                let isMounted = true;
+                image.onload = () => {
+                    if (!isMounted)
+                        return;
+                    draw(ctx, canvas, image, 0);
+                    const animate = () => {
+                        const decayRate = 0.06;
+                        if (currentLoudnessRef.current > targetLoudnessRef.current) {
+                            currentLoudnessRef.current = Math.max(targetLoudnessRef.current, currentLoudnessRef.current - decayRate * currentLoudnessRef.current);
+                        }
+                        else {
+                            currentLoudnessRef.current = targetLoudnessRef.current;
+                        }
+                        draw(ctx, canvas, image, currentLoudnessRef.current);
+                        animationFrameRef.current = requestAnimationFrame(animate);
+                    };
+                    animationFrameRef.current = requestAnimationFrame(animate);
+                };
+                const handleLoudness = ({ data }) => {
+                    const newLoudness = data.loudness;
+                    if (newLoudness > currentLoudnessRef.current) {
+                        currentLoudnessRef.current = newLoudness;
+                    }
+                    targetLoudnessRef.current = newLoudness;
+                };
+                const listener = EventBus.on('self.avatar.triggerLoudness', handleLoudness);
+                return () => {
+                    isMounted = false;
+                    listener.off();
+                    if (animationFrameRef.current) {
+                        cancelAnimationFrame(animationFrameRef.current);
+                    }
+                };
+            }
+        }
+    }, [imageUrl]);
+    const draw = (ctx, canvas, image, loudness) => {
+        if (canvas && ctx) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            const radius = Math.min(canvas.width, canvas.height) / 3;
+            const centerX = canvas.width / 2;
+            const centerY = canvas.height / 2;
+            const pulseRadius = radius + loudness / 2.5;
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, pulseRadius, 0, Math.PI * 2, true);
+            ctx.strokeStyle = isDarkTheme ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)';
+            ctx.lineWidth = 5;
+            ctx.stroke();
+            ctx.save();
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
+            ctx.closePath();
+            ctx.clip();
+            ctx.drawImage(image, centerX - radius, centerY - radius, radius * 2, radius * 2);
+            ctx.restore();
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
+            ctx.strokeStyle = isDarkTheme ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)';
+            ctx.lineWidth = 5;
+            ctx.stroke();
+        }
+    };
+    return _jsx("canvas", { ref: canvasRef, className: className, width: 500, height: 500, style: { width } });
+}

package/dist/react-client/src/components/ai/EmbeddedAssistent/TTS/MessageSender.d.ts

@@ -0,0 +1,19 @@
+type VoiceBackend = (text: string, voice?: string, speed?: number) => Promise<Blob>;
+export declare class MessageSender {
+    private player;
+    private fetchedSentences;
+    private lastLoading;
+    private voice;
+    private voiceBackend;
+    constructor(voiceBackend: VoiceBackend, voice: string);
+    private getCompletedSentences;
+    handleNewText(currentText: string | undefined, isLoading: boolean): Promise<void>;
+    private generateSpeech;
+    play(): void;
+    stop(): void;
+    private reset;
+    setVolume(volume: number): void;
+    setOnLoudnessChange(callback: (value: number) => void): void;
+    setOnEndOfSpeech(callback: () => void): void;
+}
+export {};

package/dist/react-client/src/components/ai/EmbeddedAssistent/TTS/MessageSender.js

@@ -0,0 +1,91 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { ChunkedAudioPlayer } from './Player';
+export class MessageSender {
+    constructor(voiceBackend, voice) {
+        this.player = new ChunkedAudioPlayer();
+        this.fetchedSentences = new Set();
+        this.lastLoading = false;
+        if ((voice === null || voice === void 0 ? void 0 : voice.split('_').length) !== 2) {
+            throw new Error("Invalid voice id format '" + voice + "'. Voice id needs to look like <provider>_<voice_id>");
+        }
+        this.voiceBackend = voiceBackend;
+        this.voice = voice;
+    }
+    getCompletedSentences(currentText, isLoading) {
+        // Split the text based on the following characters: .?!
+        // Only split on : when followed by a space
+        const pattern = /(.+?[.?!]|.+?:\s+|.+?\n+)/g;
+        const result = [];
+        let match;
+        while ((match = pattern.exec(currentText)) !== null) {
+            const sentence = match[0].trim();
+            if (sentence.length > 0) {
+                result.push(sentence);
+            }
+        }
+        if (!isLoading) {
+            const lastFullSentence = result[result.length - 1];
+            const leftoverIndex = currentText.lastIndexOf(lastFullSentence) + lastFullSentence.length;
+            if (leftoverIndex < currentText.length) {
+                result.push(currentText.slice(leftoverIndex).trim());
+            }
+        }
+        return result;
+    }
+    handleNewText(currentText, isLoading) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.lastLoading && isLoading) {
+                this.reset();
+            }
+            this.lastLoading = isLoading;
+            if (!currentText) {
+                return;
+            }
+            const sentences = this.getCompletedSentences(currentText, isLoading);
+            for (let i = 0; i < sentences.length; i++) {
+                const sentence = sentences[i];
+                if (!this.fetchedSentences.has(sentence)) {
+                    this.fetchedSentences.add(sentence);
+                    const audioData = yield this.generateSpeech(sentence);
+                    yield this.player.addChunk(audioData, i);
+                }
+            }
+        });
+    }
+    generateSpeech(sentence) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const blob = yield this.voiceBackend(sentence, this.voice, 1.0);
+            return yield blob.arrayBuffer();
+        });
+    }
+    play() {
+        this.player.playAgain();
+    }
+    stop() {
+        this.player.stopPlayback();
+    }
+    reset() {
+        this.stop();
+        this.fetchedSentences.clear();
+        this.player.reset();
+    }
+    setVolume(volume) {
+        this.player.setVolume(volume);
+    }
+    setOnLoudnessChange(callback) {
+        this.player.setOnLoudnessChange((loudness) => {
+            callback(loudness);
+        });
+    }
+    setOnEndOfSpeech(callback) {
+        this.player.setOnEndOfSpeech(callback);
+    }
+}

package/dist/react-client/src/components/ai/EmbeddedAssistent/TTS/Player.d.ts

@@ -0,0 +1,27 @@
+export declare class ChunkedAudioPlayer {
+    private audioContext;
+    private chunkQueue;
+    private isPlaying;
+    private analyser;
+    private dataArray;
+    private shouldMonitorLoudness;
+    private isMonitoring;
+    private handle;
+    private volume;
+    private loudnessCallback;
+    private currentIndex;
+    private startedPlaying;
+    private onEndOfSpeech;
+    constructor();
+    private init;
+    setOnLoudnessChange(callback: (value: number) => void): void;
+    setVolume(volume: number): void;
+    addChunk(chunk: ArrayBuffer, position: number): Promise<void>;
+    private playChunks;
+    stopPlayback(): void;
+    private playChunk;
+    playAgain(): Promise<void>;
+    private monitorLoudness;
+    reset(): void;
+    setOnEndOfSpeech(callback: () => void): void;
+}

package/dist/react-client/src/components/ai/EmbeddedAssistent/TTS/Player.js

@@ -0,0 +1,185 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+export class ChunkedAudioPlayer {
+    constructor() {
+        this.chunkQueue = [];
+        this.isPlaying = false;
+        this.shouldMonitorLoudness = true;
+        this.isMonitoring = false;
+        this.handle = 0;
+        this.volume = 1.0;
+        this.loudnessCallback = () => { };
+        this.currentIndex = 0;
+        this.startedPlaying = false;
+        this.onEndOfSpeech = () => { };
+        this.init();
+    }
+    init() {
+        this.audioContext = new AudioContext();
+        this.analyser = this.audioContext.createAnalyser();
+        this.analyser.fftSize = 256; // Set the FFT size (smaller values provide faster updates, larger ones give better resolution)
+        const bufferLength = this.analyser.frequencyBinCount;
+        this.dataArray = new Uint8Array(bufferLength); // Array to hold frequency data
+    }
+    setOnLoudnessChange(callback) {
+        this.loudnessCallback = callback;
+    }
+    setVolume(volume) {
+        this.volume = volume;
+    }
+    addChunk(chunk, position) {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log('Adding chunk', position, chunk);
+            this.chunkQueue[position] = chunk;
+            // console.log("received chunk", {
+            //     chunkQueue: this.chunkQueue.length,
+            //     isPlaying: this.isPlaying,
+            // })
+            if (position === 0 && !this.startedPlaying) {
+                this.startedPlaying = true;
+                this.playChunks();
+            }
+        });
+    }
+    playChunks() {
+        // console.log({ isPlaying: this.isPlaying });
+        if (this.isPlaying)
+            return;
+        if (!this.chunkQueue[this.currentIndex]) {
+            // wait until the correct chunk arrives
+            setTimeout(() => this.playChunks(), 10);
+        }
+        this.isPlaying = true;
+        this.playChunk(this.chunkQueue[this.currentIndex]).then(() => {
+            this.isPlaying = false;
+            this.currentIndex++;
+            if (this.chunkQueue[this.currentIndex]) {
+                this.shouldMonitorLoudness = true;
+                this.playChunks();
+            }
+            else {
+                // console.log('Playback finished', { currentIndex: this.currentIndex, chunkQueue: this.chunkQueue });
+                setTimeout(() => {
+                    // console.log('Check again if really playback finished', { currentIndex: this.currentIndex, chunkQueue: this.chunkQueue });
+                    if (this.chunkQueue.length > this.currentIndex) {
+                        this.playChunks();
+                    }
+                    else {
+                        this.startedPlaying = false;
+                        this.shouldMonitorLoudness = false;
+                    }
+                }, 1000);
+            }
+        });
+    }
+    stopPlayback() {
+        // console.log('Stopping playback');
+        // Implement logic to stop the current playback
+        this.isPlaying = false;
+        this.chunkQueue = [];
+        this.startedPlaying = false;
+        this.shouldMonitorLoudness = false;
+        cancelAnimationFrame(this.handle);
+    }
+    playChunk(chunk) {
+        // console.log({queue: this.chunkQueue})
+        if (!chunk) {
+            return Promise.resolve();
+        }
+        // console.log('Playing chunk', chunk);
+        return new Promise((resolve) => {
+            const source = this.audioContext.createBufferSource();
+            this.audioContext.decodeAudioData(chunk.slice(0)).then((audioBuffer) => {
+                source.buffer = audioBuffer;
+                // Create a GainNode for volume control
+                const gainNode = this.audioContext.createGain();
+                gainNode.gain.value = this.volume;
+                // Connect the source to the GainNode, then to the analyser node, then to the destination (speakers)
+                source.connect(gainNode);
+                gainNode.connect(this.analyser);
+                this.analyser.connect(this.audioContext.destination);
+                source.start(0);
+                // console.log('Playing chunk', this.currentIndex);
+                gainNode.gain.value = this.volume;
+                source.onended = () => {
+                    // console.log('Chunk ended');
+                    resolve();
+                };
+                // Start monitoring loudness only once
+                if (!this.isMonitoring) {
+                    this.isMonitoring = true;
+                    this.shouldMonitorLoudness = true;
+                    this.monitorLoudness();
+                }
+            });
+        });
+    }
+    playAgain() {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log('Playing again');
+            if (this.chunkQueue.length > 0 && !this.isPlaying) {
+                this.playChunks();
+            }
+        });
+    }
+    monitorLoudness() {
+        // Stop monitoring when the flag is false
+        if (!this.shouldMonitorLoudness) {
+            // console.log('Loudness monitoring stopped.');
+            cancelAnimationFrame(this.handle);
+            this.loudnessCallback(0);
+            this.onEndOfSpeech();
+            return;
+        }
+        // Get the time domain data from the analyser (this is a snapshot of the waveform)
+        this.analyser.getByteTimeDomainData(this.dataArray);
+        // Calculate the RMS (root mean square) of the waveform values to get the perceived loudness
+        let sum = 0;
+        for (let i = 0; i < this.dataArray.length; i++) {
+            const value = this.dataArray[i] / 128.0 - 1.0; // Normalize between -1 and 1
+            sum += value * value;
+        }
+        const rms = Math.sqrt(sum / this.dataArray.length);
+        // Handle the case where RMS is 0 to avoid log10(0)
+        if (rms === 0) {
+            // console.log('Current loudness: Silent');
+        }
+        else {
+            let loudnessInDb = 20 * Math.log10(rms); // Convert to dB
+            // console.log('Current loudness:' + loudnessInDb);
+            const minDb = -57;
+            const maxDb = -15;
+            if (loudnessInDb < minDb) {
+                loudnessInDb = minDb;
+            }
+            if (loudnessInDb > maxDb) {
+                loudnessInDb = maxDb;
+            }
+            const loudnessScale = ((loudnessInDb - minDb) / (maxDb - minDb)) * 100;
+            // console.log("root:corrent loudness", loudnessScale);
+            this.loudnessCallback(loudnessScale);
+        }
+        // Call this method again at regular intervals if you want continuous loudness monitoring
+        this.handle = requestAnimationFrame(() => this.monitorLoudness());
+    }
+    reset() {
+        // console.log('Resetting player');
+        this.stopPlayback();
+        this.currentIndex = 0;
+        this.shouldMonitorLoudness = true;
+        //reset to the beginning when the class gets initialized
+        this.isMonitoring = false;
+        this.isPlaying = false;
+        this.init();
+    }
+    setOnEndOfSpeech(callback) {
+        this.onEndOfSpeech = callback;
+    }
+}

package/dist/react-client/src/components/ai/EmbeddedAssistent/VoiceRecoder.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    iconSize?: string;
+    className?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    enablePushToTalk?: boolean;
+    onRecordingStatusChange: (running: boolean) => void;
+    onVoiceRecorded: (message: string) => void;
+}
+export declare const VoiceRecorder: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
+export {};

package/dist/react-client/src/components/ai/EmbeddedAssistent/VoiceRecoder.js

@@ -0,0 +1,95 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRimori } from '../../../providers/PluginProvider';
+import { FaMicrophone, FaSpinner } from 'react-icons/fa6';
+import { AudioController } from '@rimori/client';
+import { useState, useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
+export const VoiceRecorder = forwardRef(({ onVoiceRecorded, iconSize, className, disabled, loading, onRecordingStatusChange, enablePushToTalk = false, }, ref) => {
+    const [isRecording, setIsRecording] = useState(false);
+    const [internalIsProcessing, setInternalIsProcessing] = useState(false);
+    const audioControllerRef = useRef(null);
+    const { ai, plugin } = useRimori();
+    // Ref for latest onVoiceRecorded callback
+    const onVoiceRecordedRef = useRef(onVoiceRecorded);
+    useEffect(() => {
+        onVoiceRecordedRef.current = onVoiceRecorded;
+    }, [onVoiceRecorded]);
+    const startRecording = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (!audioControllerRef.current) {
+                audioControllerRef.current = new AudioController(plugin.pluginId);
+            }
+            yield audioControllerRef.current.startRecording();
+            setIsRecording(true);
+            onRecordingStatusChange(true);
+        }
+        catch (error) {
+            console.error('Failed to start recording:', error);
+            // Handle permission denied or other errors
+        }
+    });
+    const stopRecording = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (audioControllerRef.current && isRecording) {
+                const audioResult = yield audioControllerRef.current.stopRecording();
+                // console.log("audioResult: ", audioResult);
+                setInternalIsProcessing(true);
+                // Play the recorded audio from the Blob
+                // const blobUrl = URL.createObjectURL(audioResult.recording);
+                // const audioRef = new Audio(blobUrl);
+                // audioRef.onended = () => URL.revokeObjectURL(blobUrl);
+                // audioRef.play().catch((e) => console.error('Playback error:', e));
+                // console.log("audioBlob: ", audioResult.recording);
+                const text = yield ai.getTextFromVoice(audioResult.recording);
+                // console.log("stt result", text);
+                // throw new Error("test");
+                setInternalIsProcessing(false);
+                onVoiceRecordedRef.current(text);
+            }
+        }
+        catch (error) {
+            console.error('Failed to stop recording:', error);
+        }
+        finally {
+            setIsRecording(false);
+            onRecordingStatusChange(false);
+        }
+    });
+    useImperativeHandle(ref, () => ({
+        startRecording,
+        stopRecording,
+    }));
+    // push to talk feature
+    const spacePressedRef = useRef(false);
+    useEffect(() => {
+        if (!enablePushToTalk)
+            return;
+        const handleKeyDown = (event) => __awaiter(void 0, void 0, void 0, function* () {
+            if (event.code === 'Space' && !spacePressedRef.current) {
+                spacePressedRef.current = true;
+                yield startRecording();
+            }
+        });
+        const handleKeyUp = (event) => {
+            if (event.code === 'Space' && spacePressedRef.current) {
+                spacePressedRef.current = false;
+                stopRecording();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+        };
+    }, [enablePushToTalk]);
+    return (_jsx("button", { className: 'flex flex-row justify-center items-center rounded-full mx-auto disabled:opacity-50 ' + className, onClick: isRecording ? stopRecording : startRecording, disabled: disabled || loading || internalIsProcessing, children: loading || internalIsProcessing ? (_jsx(FaSpinner, { className: "animate-spin" })) : (_jsx(FaMicrophone, { size: iconSize, className: isRecording ? 'text-red-600' : '' })) }));
+});

package/dist/react-client/src/components/ai/utils.d.ts

@@ -0,0 +1,6 @@
+export interface FirstMessages {
+    instructions?: string;
+    userMessage?: string;
+    assistantMessage?: string;
+}
+export declare function getFirstMessages(instructions: FirstMessages): any[];

package/dist/react-client/src/components/ai/utils.js

@@ -0,0 +1,13 @@
+export function getFirstMessages(instructions) {
+    const messages = [];
+    if (instructions.instructions) {
+        messages.push({ id: '1', role: 'system', content: instructions.instructions });
+    }
+    if (instructions.userMessage) {
+        messages.push({ id: '2', role: 'user', content: instructions.userMessage });
+    }
+    if (instructions.assistantMessage) {
+        messages.push({ id: '3', role: 'assistant', content: instructions.assistantMessage });
+    }
+    return messages;
+}

package/dist/react-client/src/components/audio/Playbutton.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type AudioPlayerProps = {
+    text: string;
+    voice?: string;
+    language?: string;
+    hide?: boolean;
+    playOnMount?: boolean;
+    initialSpeed?: number;
+    enableSpeedAdjustment?: boolean;
+    playListenerEvent?: string;
+};
+export declare const AudioPlayOptions: number[];
+export type AudioPlayOptionType = 0.8 | 0.9 | 1.0 | 1.1 | 1.2 | 1.5;
+export declare const AudioPlayer: React.FC<AudioPlayerProps>;
+export {};

package/dist/react-client/src/components/audio/Playbutton.js

@@ -0,0 +1,82 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { FaPlayCircle, FaStopCircle } from 'react-icons/fa';
+import { useRimori } from '../../providers/PluginProvider';
+import { Spinner } from '../Spinner';
+import { EventBus } from '@rimori/client';
+export const AudioPlayOptions = [0.8, 0.9, 1.0, 1.1, 1.2, 1.5];
+let isFetchingAudio = false;
+export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, initialSpeed = 1.0, playOnMount = false, enableSpeedAdjustment = false, }) => {
+    const [audioUrl, setAudioUrl] = useState(null);
+    const [speed, setSpeed] = useState(initialSpeed);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const { ai } = useRimori();
+    useEffect(() => {
+        if (audioUrl)
+            setAudioUrl(null);
+        return () => {
+            if (audioUrl)
+                URL.revokeObjectURL(audioUrl);
+        };
+    }, [text]);
+    // Function to generate audio from text using API
+    const generateAudio = () => __awaiter(void 0, void 0, void 0, function* () {
+        setIsLoading(true);
+        const blob = yield ai.getVoice(text, voice || (language ? 'aws_default' : 'openai_alloy'), 1, language);
+        setAudioUrl(URL.createObjectURL(blob));
+        setIsLoading(false);
+    });
+    // Effect to play audio when audioUrl changes and play state is true
+    useEffect(() => {
+        if (!audioUrl || !isPlaying)
+            return;
+        const audio = new Audio(audioUrl);
+        audio.playbackRate = speed;
+        audio
+            .play()
+            .then(() => {
+            audio.onended = () => {
+                setIsPlaying(false);
+                isFetchingAudio = false;
+            };
+        })
+            .catch((e) => {
+            console.warn('Error playing audio:', e);
+            setIsPlaying(false);
+        });
+        return () => {
+            audio.pause();
+        };
+    }, [audioUrl, isPlaying, speed]);
+    const togglePlayback = () => {
+        if (!isPlaying && !audioUrl) {
+            generateAudio().then(() => setIsPlaying(true));
+        }
+        else {
+            setIsPlaying((prev) => !prev);
+        }
+    };
+    useEffect(() => {
+        if (!playListenerEvent)
+            return;
+        EventBus.on(playListenerEvent, () => togglePlayback());
+    }, [playListenerEvent]);
+    useEffect(() => {
+        if (!playOnMount || isFetchingAudio)
+            return;
+        isFetchingAudio = true;
+        // console.log("playOnMount", playOnMount);
+        togglePlayback();
+    }, [playOnMount]);
+    return (_jsx("div", { className: "group relative", children: _jsxs("div", { className: "flex flex-row items-end", children: [!hide && (_jsx("button", { className: "text-gray-500", onClick: togglePlayback, disabled: isLoading, children: isLoading ? _jsx(Spinner, {}) : isPlaying ? _jsx(FaStopCircle, { size: '25px' }) : _jsx(FaPlayCircle, { size: '25px' }) })), enableSpeedAdjustment && (_jsxs("div", { className: "ml-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-row text-sm text-gray-500", children: [_jsx("span", { className: "pr-1", children: "Speed: " }), _jsx("select", { value: speed, className: "appearance-none cursor-pointer pr-0 p-0 rounded shadow leading-tight focus:outline-none focus:bg-gray-800 focus:ring bg-transparent border-0", onChange: (e) => setSpeed(parseFloat(e.target.value)), disabled: isLoading, children: AudioPlayOptions.map((s) => (_jsx("option", { value: s, children: s }, s))) })] }))] }) }));
+};

package/dist/react-client/src/components/components/ContextMenu.d.ts

@@ -0,0 +1,10 @@
+import { RimoriClient } from '@rimori/client';
+export interface Position {
+    x: number;
+    y: number;
+    text?: string;
+}
+declare const ContextMenu: ({ client }: {
+    client: RimoriClient;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default ContextMenu;