@rimori/client 1.2.0 → 1.3.0

package/README.md

@@ -163,6 +163,43 @@ If you encounter release issues:
 3. **Build errors**: Run `yarn build` successfully before releasing
 4. **Authentication**: Your token may have expired - re-run `rimori-init` if needed
 
+#### Worker Process Errors
+
+If you encounter errors like:
+```
+ReferenceError: process is not defined
+```
+
+**Root Cause**: Your plugin is importing a library that tries to access `process` or `process.env` in the worker context. Web workers don't have access to Node.js globals like `process`.
+
+**Debugging Steps**:
+
+1. **Check your imports**: Look through the files used in the worker which might import libraries that might access `process.env`:
+   - React libraries (React Router, React Query, etc.)
+   - UI component libraries (Material-UI, Ant Design, etc.)
+   - Utility libraries that check for environment variables
+
+2. **Verify Rimori Client imports**: Ensure you're importing from `@rimori/client/core` and not from `@rimori/client`:
+   ```typescript
+   // ✅ Correct - import from rimori client
+   import { RimoriClient } from '@rimori/client/core';
+   
+   // ❌ Incorrect - direct imports that might access process.env directly or through their dependencies
+   import { Avatar } from '@rimori/client';
+   import { useQuery } from '@tanstack/react-query';
+   ```
+
+3. **Check your dependencies**: Look at your `package.json` for libraries that might be bundled into the worker:
+   - UI frameworks (React, Vue, etc.)
+   - State management libraries
+   - Routing libraries
+   - Any library that checks `process.env.NODE_ENV`
+
+
+**Solution**: Use only `@rimori/client/core` exports in your worker code. The Rimori client provides all necessary functionality without requiring Node.js globals.
+
+**Note**: The worker bundling order is determined by the build system and cannot be controlled. Libraries that access `process.env` will always cause this error in the worker context.
+
 
 
 
@@ -171,13 +208,13 @@ If you encounter release issues:
 
 ## Core API - usePlugin Hook
 
-The `usePlugin()` hook is the main interface for accessing Rimori platform features:
+The `useRimori()` hook is the main interface for accessing Rimori platform features:
 
 ```typescript
-import { usePlugin } from "@rimori/client";
+import { useRimori } from "@rimori/client";
 
 const MyComponent = () => {
-  const client = usePlugin();
+  const client = useRimori();
   
   // Access all client features
   const { db, llm, event, community, plugin } = client;
@@ -189,7 +226,7 @@ const MyComponent = () => {
 ### Plugin Interface
 
 ```typescript
-const { plugin } = usePlugin();
+const { plugin } = useRimori();
 
 // Plugin information and settings
 plugin.pluginId: string                              // Current plugin ID
@@ -211,7 +248,7 @@ interface FlashcardSettings {
 }
 
 const FlashcardSettingsComponent = () => {
-  const { plugin } = usePlugin();
+  const { plugin } = useRimori();
   const [settings, setSettings] = useState<FlashcardSettings>();
 
   useEffect(() => {
@@ -280,7 +317,7 @@ const FlashcardSettingsComponent = () => {
 Access your plugin's dedicated database tables with full TypeScript support:
 
 ```typescript
-const { db } = usePlugin();
+const { db } = useRimori();
 
 // Database interface
 db.from(tableName)                    // Query builder for tables/views - supports ALL Supabase operations
@@ -298,6 +335,12 @@ The `db.from()` method provides access to the complete Supabase PostgREST API, s
 
 All operations automatically use your plugin's table prefix for security and isolation.
 
+**Column deprecation and removal (short policy)**
+
+- To remove a column, use a two-step process:
+  1. Mark the column with `deprecated: true` in your `rimori/db.config.ts` and release. The backend renames the column to `<name>_old`.
+  2. In a subsequent release, remove the column from the config. The backend drops `<name>_old`.
+
 **Example: CRUD Operations**
 
 ```typescript
@@ -310,7 +353,7 @@ interface StudySession {
 }
 
 const StudySessionManager = () => {
-  const { db } = usePlugin();
+  const { db } = useRimori();
   
   // Create a new study session
   const createSession = async (session: Omit<StudySession, 'id'>) => {
@@ -361,7 +404,7 @@ const StudySessionManager = () => {
 
 ```typescript
 const FileManager = () => {
-  const { db } = usePlugin();
+  const { db } = useRimori();
   
   const uploadFile = async (file: File) => {
     const fileName = `uploads/${Date.now()}-${file.name}`;
@@ -392,7 +435,7 @@ const FileManager = () => {
 Powerful AI/Language Model capabilities built-in:
 
 ```typescript
-const { llm } = usePlugin();
+const { llm } = useRimori();
 
 // Text generation
 llm.getText(messages: Message[], tools?: Tool[]): Promise<string>
@@ -461,7 +504,7 @@ const ChatAssistant = () => {
 
 ```typescript
 const QuizGenerator = () => {
-  const { llm } = usePlugin();
+  const { llm } = useRimori();
   
   const generateQuiz = async (topic: string) => {
     const quiz = await llm.getObject({
@@ -497,7 +540,7 @@ const QuizGenerator = () => {
 
 ```typescript
 const VoiceAssistant = () => {
-  const { llm } = usePlugin();
+  const { llm } = useRimori();
   
   const speakText = async (text: string) => {
     const audioBlob = await llm.getVoice(text, "alloy", 1, "en");
@@ -520,7 +563,7 @@ const VoiceAssistant = () => {
 Robust inter-plugin communication and platform integration:
 
 ```typescript
-const { event } = usePlugin();
+const { event } = useRimori();
 
 // Event methods
 event.emit(topic: string, data?: any, eventId?: number): void
@@ -541,7 +584,7 @@ event.emitSidebarAction(pluginId: string, actionKey: string, text?: string): voi
 
 ```typescript
 const PluginCommunicator = () => {
-  const { event } = usePlugin();
+  const { event } = useRimori();
   
   useEffect(() => {
     // Listen for messages from other plugins
@@ -591,7 +634,7 @@ const PluginCommunicator = () => {
 
 ```typescript
 const AccomplishmentTracker = () => {
-  const { event } = usePlugin();
+  const { event } = useRimori();
   
   const trackAccomplishment = () => {
     event.emitAccomplishment({
@@ -622,7 +665,7 @@ const AccomplishmentTracker = () => {
 
 ```typescript
 const SidebarIntegration = () => {
-  const { event } = usePlugin();
+  const { event } = useRimori();
   
   const openTranslator = (text: string) => {
     // Trigger translator plugin in sidebar
@@ -652,7 +695,7 @@ const SidebarIntegration = () => {
 Share and discover content created by other users:
 
 ```typescript
-const { community } = usePlugin();
+const { community } = useRimori();
 
 // Shared content methods
 community.sharedContent.get<T>(contentType: string, id: string): Promise<BasicAssignment<T>>
@@ -679,7 +722,7 @@ interface Exercise {
 }
 
 const ExerciseManager = () => {
-  const { community } = usePlugin();
+  const { community } = useRimori();
   const [exercises, setExercises] = useState<BasicAssignment<Exercise>[]>([]);
 
   // Load community exercises
@@ -997,7 +1040,7 @@ import {
 import { HashRouter, Route, Routes } from 'react-router-dom';
 
 const StudyNotesPlugin = () => {
-  const { db, llm, plugin, community } = usePlugin();
+  const { db, llm, plugin, community } = useRimori();
   const [notes, setNotes] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const { messages, append } = useChat();

package/dist/cli/scripts/init/dev-registration.js

@@ -143,7 +143,6 @@ export function registerDeveloper(jwtToken, port) {
     return __awaiter(this, void 0, void 0, function* () {
         console.log('🚀 Registering developer and creating plugin...');
         try {
-            console.log('port', port, typeof port);
             const currentFolderName = path.basename(process.cwd());
             const body = { port, pluginName: currentFolderName };
             const backendUrl = process.env.RIMORI_BACKEND_URL || "https://api.rimori.se";

package/dist/cli/scripts/init/main.d.ts

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-export {};
+import 'dotenv/config';

package/dist/cli/scripts/init/main.js

@@ -18,6 +18,7 @@ import { updatePackageJson } from './package-setup.js';
 import { transformAppRouter } from './router-transformer.js';
 import { updateTailwindConfig } from './tailwind-config.js';
 import { updateViteConfigBase } from './vite-config.js';
+import 'dotenv/config';
 /**
  * Main function that handles the complete plugin setup flow.
  */

package/dist/components/LoggerExample.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Example component demonstrating Logger usage in a React component.
+ * Shows how console methods are automatically captured by the Logger.
+ */
+export declare const LoggerExample: React.FC;

package/dist/components/LoggerExample.js

@@ -0,0 +1,79 @@
+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 } from 'react';
+import { useLogging, useLogger } from '../hooks/UseLogger';
+/**
+ * Example component demonstrating Logger usage in a React component.
+ * Shows how console methods are automatically captured by the Logger.
+ */
+export const LoggerExample = () => {
+    const [logMessage, setLogMessage] = useState('Hello from Logger Example');
+    const [logData, setLogData] = useState('{"key": "value"}');
+    // Initialize the logger - this overrides console methods globally
+    const logger = useLogger(process.env.NODE_ENV === 'production');
+    // Get logging utilities
+    const { sendAllLogs, getStats, clearLogs, exportLogs, sendLogsByLevel } = useLogging(process.env.NODE_ENV === 'production');
+    const handleConsoleLog = () => {
+        // This will be automatically captured by the Logger
+        console.log(logMessage, logData ? JSON.parse(logData) : '');
+    };
+    const handleConsoleInfo = () => {
+        // This will be automatically captured by the Logger
+        console.info(logMessage, logData ? JSON.parse(logData) : '');
+    };
+    const handleConsoleWarn = () => {
+        // This will be automatically captured by the Logger and include screenshot + mouse position
+        console.warn(logMessage, logData ? JSON.parse(logData) : '');
+    };
+    const handleConsoleError = () => {
+        // This will be automatically captured by the Logger and include screenshot + mouse position
+        console.error(logMessage, logData ? JSON.parse(logData) : '');
+    };
+    const handleConsoleDebug = () => {
+        // This will be automatically captured by the Logger
+        console.debug(logMessage, logData ? JSON.parse(logData) : '');
+    };
+    const handleSendLogs = () => __awaiter(void 0, void 0, void 0, function* () {
+        yield sendAllLogs();
+        alert('Logs sent to Rimori!');
+    });
+    const handleGetStats = () => {
+        const stats = getStats();
+        alert(`Log Statistics:\nTotal: ${stats.total}\nDebug: ${stats.byLevel.debug}\nInfo: ${stats.byLevel.info}\nWarn: ${stats.byLevel.warn}\nError: ${stats.byLevel.error}`);
+    };
+    const handleClearLogs = () => {
+        clearLogs();
+        alert('Logs cleared!');
+    };
+    const handleExportLogs = () => {
+        const exportedLogs = exportLogs();
+        const blob = new Blob([exportedLogs], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'rimori-logs.json';
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+    const handleSendErrorLogs = () => __awaiter(void 0, void 0, void 0, function* () {
+        yield sendLogsByLevel('error');
+        alert('Error logs sent to Rimori!');
+    });
+    const handleTriggerError = () => {
+        // This will trigger an unhandled error that the logger will catch via console.error override
+        throw new Error('This is a test error for the logger');
+    };
+    const handleTriggerPromiseRejection = () => {
+        // This will trigger an unhandled promise rejection that the logger will catch
+        Promise.reject(new Error('This is a test promise rejection'));
+    };
+    return (_jsxs("div", { style: { padding: '20px', maxWidth: '800px' }, children: [_jsx("h2", { children: "Logger Example - Console Override Demo" }), _jsxs("div", { style: { marginBottom: '20px', padding: '15px', backgroundColor: '#e3f2fd', borderRadius: '5px' }, children: [_jsx("h4", { children: "\uD83C\uDFAF Key Feature: Console Methods Override" }), _jsxs("p", { children: ["The Logger automatically overrides ", _jsx("code", { children: "console.log" }), ", ", _jsx("code", { children: "console.info" }), ",", _jsx("code", { children: "console.warn" }), ", ", _jsx("code", { children: "console.error" }), ", and ", _jsx("code", { children: "console.debug" }), " globally. All console calls are automatically captured and stored with context information."] })] }), _jsx("div", { style: { marginBottom: '20px' }, children: _jsxs("label", { children: ["Log Message:", _jsx("input", { type: "text", value: logMessage, onChange: (e) => setLogMessage(e.target.value), placeholder: "Enter log message", style: { width: '100%', marginTop: '5px' } })] }) }), _jsx("div", { style: { marginBottom: '20px' }, children: _jsxs("label", { children: ["Log Data (JSON):", _jsx("textarea", { value: logData, onChange: (e) => setLogData(e.target.value), placeholder: '{"key": "value"}', style: { width: '100%', height: '60px', marginTop: '5px' } })] }) }), _jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h3", { children: "Console Method Calls (Automatically Captured)" }), _jsx("button", { onClick: handleConsoleLog, style: { margin: '5px' }, children: "console.log()" }), _jsx("button", { onClick: handleConsoleInfo, style: { margin: '5px' }, children: "console.info()" }), _jsx("button", { onClick: handleConsoleWarn, style: { margin: '5px', backgroundColor: '#ff9800' }, children: "console.warn() \uD83D\uDCF8" }), _jsx("button", { onClick: handleConsoleError, style: { margin: '5px', backgroundColor: '#f44336' }, children: "console.error() \uD83D\uDCF8" }), _jsx("button", { onClick: handleConsoleDebug, style: { margin: '5px' }, children: "console.debug()" })] }), _jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h3", { children: "Log Management" }), _jsx("button", { onClick: handleSendLogs, style: { margin: '5px' }, children: "Send All Logs to Rimori" }), _jsx("button", { onClick: handleSendErrorLogs, style: { margin: '5px', backgroundColor: '#f44336' }, children: "Send Error Logs Only" }), _jsx("button", { onClick: handleGetStats, style: { margin: '5px' }, children: "Get Log Statistics" }), _jsx("button", { onClick: handleClearLogs, style: { margin: '5px' }, children: "Clear Logs" }), _jsx("button", { onClick: handleExportLogs, style: { margin: '5px' }, children: "Export Logs (JSON)" })] }), _jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h3", { children: "Test Error Handling" }), _jsx("button", { onClick: handleTriggerError, style: { margin: '5px', backgroundColor: '#ff6b6b' }, children: "Trigger Unhandled Error" }), _jsx("button", { onClick: handleTriggerPromiseRejection, style: { margin: '5px', backgroundColor: '#ff6b6b' }, children: "Trigger Promise Rejection" })] }), _jsxs("div", { style: { marginTop: '30px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '5px' }, children: [_jsx("h4", { children: "\uD83D\uDCCB How It Works:" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Automatic Capture:" }), " All console calls are automatically captured by the Logger"] }), _jsxs("li", { children: [_jsx("strong", { children: "No Manual Logging:" }), " Just use ", _jsx("code", { children: "console.log()" }), " as usual - no need to call Logger methods"] }), _jsxs("li", { children: [_jsx("strong", { children: "Production Filtering:" }), " In production, only warnings and errors show in console, but all are stored"] }), _jsxs("li", { children: [_jsx("strong", { children: "Screenshot Capture:" }), " Errors and warnings automatically capture screenshots + mouse position"] }), _jsxs("li", { children: [_jsx("strong", { children: "Browser Context:" }), " Each log includes URL, user agent, screen resolution, etc."] }), _jsxs("li", { children: [_jsx("strong", { children: "Rimori Integration:" }), " Logs can be sent to Rimori for centralized logging"] })] }), _jsx("h4", { children: "\uD83C\uDFAF Screenshot & Mouse Position:" }), _jsxs("p", { children: ["When you call ", _jsx("code", { children: "console.warn()" }), " or ", _jsx("code", { children: "console.error()" }), ", the Logger automatically:"] }), _jsxs("ul", { children: [_jsx("li", { children: "Captures a screenshot of the current page (if html2canvas is available)" }), _jsx("li", { children: "Records the current mouse position (x, y coordinates)" }), _jsx("li", { children: "Includes timestamp for both screenshot and mouse position" })] })] }), _jsxs("div", { style: { marginTop: '20px', padding: '15px', backgroundColor: '#fff3e0', borderRadius: '5px' }, children: [_jsx("h4", { children: "\uD83D\uDD27 Setup Required:" }), _jsx("p", { children: "To enable screenshot capture, include html2canvas in your plugin:" }), _jsx("pre", { style: { backgroundColor: '#f5f5f5', padding: '10px', borderRadius: '3px' }, children: `<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>` })] })] }));
+};

package/dist/components/ai/Assistant.js

@@ -5,12 +5,12 @@ import { AudioInputField } from './EmbeddedAssistent/AudioInputField';
 import { MessageSender } from './EmbeddedAssistent/TTS/MessageSender';
 import Markdown from 'react-markdown';
 import { useChat } from '../../hooks/UseChatHook';
-import { usePlugin } from '../../components';
+import { useRimori } from '../../components';
 import { getFirstMessages } from './utils';
 export function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartConversation }) {
     var _a;
     const [oralCommunication, setOralCommunication] = React.useState(true);
-    const { ai: llm, event } = usePlugin();
+    const { ai: llm, event } = useRimori();
     const sender = useMemo(() => new MessageSender(llm.getVoice, voiceId), []);
     const { messages, append, isLoading, setMessages } = useChat();
     const lastAssistantMessage = (_a = [...messages].filter((m) => m.role === 'assistant').pop()) === null || _a === void 0 ? void 0 : _a.content;

package/dist/components/ai/Avatar.js

@@ -4,10 +4,10 @@ import { VoiceRecorder } from './EmbeddedAssistent/VoiceRecoder';
 import { MessageSender } from './EmbeddedAssistent/TTS/MessageSender';
 import { CircleAudioAvatar } from './EmbeddedAssistent/CircleAudioAvatar';
 import { useChat } from '../../hooks/UseChatHook';
-import { usePlugin } from '../../components';
+import { useRimori } from '../../components';
 import { getFirstMessages } from './utils';
 export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, isDarkTheme = false, circleSize = "300px", className }) {
-    const { ai, event } = usePlugin();
+    const { ai, event } = useRimori();
     const [agentReplying, setAgentReplying] = useState(false);
     const [isProcessingMessage, setIsProcessingMessage] = useState(false);
     const sender = useMemo(() => new MessageSender(ai.getVoice, voiceId), [voiceId]);

package/dist/components/ai/EmbeddedAssistent/VoiceRecoder.js

@@ -8,52 +8,61 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
+import { useRimori } from '../../../components';
 import { FaMicrophone, FaSpinner } from 'react-icons/fa6';
-import { usePlugin } from '../../../components';
+import { AudioController } from '../../../plugin/AudioController';
+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 mediaRecorderRef = useRef(null);
-    const audioChunksRef = useRef([]);
-    const mediaStreamRef = useRef(null);
-    const { ai: llm } = usePlugin();
+    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* () {
-        const stream = yield navigator.mediaDevices.getUserMedia({ audio: true });
-        mediaStreamRef.current = stream;
-        const mediaRecorder = new MediaRecorder(stream);
-        mediaRecorderRef.current = mediaRecorder;
-        mediaRecorder.ondataavailable = (event) => {
-            audioChunksRef.current.push(event.data);
-        };
-        mediaRecorder.onstop = () => __awaiter(void 0, void 0, void 0, function* () {
-            const audioBlob = new Blob(audioChunksRef.current);
-            audioChunksRef.current = [];
-            setInternalIsProcessing(true);
-            const text = yield llm.getTextFromVoice(audioBlob);
-            setInternalIsProcessing(false);
-            onVoiceRecordedRef.current(text);
-        });
-        mediaRecorder.start();
-        setIsRecording(true);
-        onRecordingStatusChange(true);
+        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 = () => {
-        if (mediaRecorderRef.current) {
-            mediaRecorderRef.current.stop();
+    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);
         }
-        if (mediaStreamRef.current) {
-            mediaStreamRef.current.getTracks().forEach(track => track.stop());
-            mediaStreamRef.current = null;
-        }
-    };
+    });
     useImperativeHandle(ref, () => ({
         startRecording,
         stopRecording,

package/dist/components/audio/Playbutton.js

@@ -10,7 +10,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 { FaPlayCircle, FaStopCircle } from "react-icons/fa";
-import { usePlugin } from "../../providers/PluginProvider";
+import { useRimori } from "../../providers/PluginProvider";
 import { Spinner } from '../Spinner';
 import { EventBus } from '../../fromRimori/EventBus';
 export const AudioPlayOptions = [0.8, 0.9, 1.0, 1.1, 1.2, 1.5];
@@ -20,7 +20,7 @@ export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, in
     const [speed, setSpeed] = useState(initialSpeed);
     const [isPlaying, setIsPlaying] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
-    const { ai } = usePlugin();
+    const { ai } = useRimori();
     useEffect(() => {
         if (!playListenerEvent)
             return;

package/dist/components/components/ContextMenu.js

@@ -6,18 +6,43 @@ const ContextMenu = ({ client }) => {
     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(() => {
-        client.plugin.getInstalled().then(plugins => {
-            setActions(plugins.flatMap(p => p.context_menu_actions).filter(Boolean));
-        });
-        client.plugin.getUserInfo().then((userInfo) => {
-            setOpenOnTextSelect(userInfo.context_menu_on_select);
-        });
+        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) => {
@@ -25,7 +50,12 @@ const ContextMenu = ({ client }) => {
             const selectedText = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
             if (isOpen && selectedText === position.text)
                 return;
-            setPosition({ x: e.clientX, y: e.clientY, text: selectedText });
+            if (isMobile && selectedText) {
+                setPosition(calculateMobilePosition(selectedText, menuWidth));
+            }
+            else {
+                setPosition({ x: e.clientX, y: e.clientY, text: selectedText });
+            }
         };
         const handleMouseUp = (e) => {
             var _a, _b;
@@ -51,20 +81,29 @@ const ContextMenu = ({ client }) => {
                 if (e.button === 2) {
                     e.preventDefault();
                 }
-                setPosition({ x: e.clientX, y: e.clientY, text: selectedText });
+                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
+        // 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);