@rimori/react-client 0.1.0 → 0.2.0

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

@@ -1,79 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,185 +0,0 @@
-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/utils.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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;

package/dist/react-client/src/components/components/ContextMenu.js

@@ -1,135 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import { EventBus } from '@rimori/client';
-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;
-    /**
-     * 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.
-     * @param selectedText - The currently selected text
-     * @param menuWidth - The width of the menu to center properly
-     * @returns Position object with x and y coordinates
-     */
-    const calculateMobilePosition = (selectedText, menuWidth = 0) => {
-        const selection = window.getSelection();
-        if (!selection || !selectedText) {
-            return { x: 0, y: 0, text: selectedText };
-        }
-        const range = selection.getRangeAt(0);
-        const rect = range.getBoundingClientRect();
-        // Center horizontally over the selected text, accounting for menu width
-        const centerX = rect.left + rect.width / 2 - menuWidth / 2;
-        // Position 12px below where the text ends vertically
-        const textEndY = rect.bottom + 12;
-        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);
-        EventBus.on('global.contextMenu.createActions', ({ data }) => {
-            setActions([...data.actions, ...actions]);
-        });
-    }, []);
-    // Update menu width when menu is rendered
-    useEffect(() => {
-        if (isOpen && menuRef.current) {
-            setMenuWidth(menuRef.current.offsetWidth);
-        }
-    }, [isOpen, actions]);
-    useEffect(() => {
-        // Track mouse position globally
-        const handleMouseMove = (e) => {
-            var _a;
-            const selectedText = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
-            if (isOpen && selectedText === position.text)
-                return;
-            if (isMobile && selectedText) {
-                setPosition(calculateMobilePosition(selectedText, menuWidth));
-            }
-            else {
-                setPosition({ x: e.clientX, y: e.clientY, text: selectedText });
-            }
-        };
-        const handleMouseUp = (e) => {
-            var _a, _b;
-            const selectedText = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
-            // Check if click is inside the context menu
-            if (menuRef.current && menuRef.current.contains(e.target)) {
-                // Don't close the menu if clicking inside
-                return;
-            }
-            // Prevent context menu on textarea or text input selection
-            const target = e.target;
-            const isTextInput = target &&
-                (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && target.type === 'text'));
-            if (isTextInput) {
-                setIsOpen(false);
-                return;
-            }
-            if (e.button === 0 && isOpen) {
-                setIsOpen(false);
-                (_b = window.getSelection()) === null || _b === void 0 ? void 0 : _b.removeAllRanges();
-            }
-            else if (selectedText && (openOnTextSelect || e.button === 2)) {
-                if (e.button === 2) {
-                    e.preventDefault();
-                }
-                if (isMobile) {
-                    setPosition(calculateMobilePosition(selectedText, menuWidth));
-                }
-                else {
-                    setPosition({ x: e.clientX, y: e.clientY, text: selectedText });
-                }
-                setIsOpen(true);
-            }
-            else {
-                setIsOpen(false);
-            }
-        };
-        // Add selectionchange listener to close menu if selection is cleared and update position for mobile
-        const handleSelectionChange = () => {
-            var _a;
-            const selectedText = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
-            if (!selectedText && isOpen) {
-                setIsOpen(false);
-            }
-            else if (selectedText && isOpen && isMobile) {
-                // Update position in real-time as text selection changes on mobile
-                setPosition(calculateMobilePosition(selectedText, menuWidth));
-            }
-        };
-        document.addEventListener('mouseup', handleMouseUp);
-        window.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('contextmenu', handleMouseUp);
-        document.addEventListener('selectionchange', handleSelectionChange);
-        return () => {
-            document.removeEventListener('mouseup', handleMouseUp);
-            window.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('contextmenu', handleMouseUp);
-            document.removeEventListener('selectionchange', handleSelectionChange);
-        };
-    }, [openOnTextSelect, isOpen, position.text]);
-    if (!isOpen) {
-        return null;
-    }
-    return (_jsx("div", { ref: menuRef, className: "fixed bg-gray-400 dark:bg-gray-700 shadow-lg border border-gray-400 rounded-md overflow-hidden dark:text-white z-50", style: { top: position.y, left: position.x }, children: actions.map((action, index) => (_jsx(MenuEntryItem, { icon: action.icon, text: action.text, onClick: () => {
-                var _a;
-                setIsOpen(false);
-                (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
-                client.event.emitSidebarAction(action.plugin_id, action.action_key, position.text);
-            } }, index))) }));
-};
-function MenuEntryItem(props) {
-    return (_jsxs("button", { onClick: props.onClick, className: "px-4 py-2 text-left hover:bg-gray-500 dark:hover:bg-gray-600 w-full flex flex-row", children: [_jsx("span", { className: "flex-grow", children: props.icon }), _jsx("span", { className: "flex-grow", children: props.text })] }));
-}
-export default ContextMenu;