@rimori/react-client 0.1.0 → 0.2.0

package/README.md

@@ -1 +1,142 @@
-# react-client
+# Rimori React Client
+
+The `@rimori/react-client` package contains the React bindings for the Rimori plugin runtime. Wrap your plugin UI with the provided context, use the hooks to talk to the Rimori platform, and drop in prebuilt assistant components without writing your own wiring.
+
+## Table of Contents
+- [Overview](#overview)
+- [Installation](#installation)
+- [When to Use](#when-to-use)
+- [Quick Start](#quick-start)
+- [Hooks](#hooks)
+- [Components](#components)
+- [Styling](#styling)
+- [Standalone Development](#standalone-development)
+- [Additional Exports](#additional-exports)
+- [Example](#example)
+
+## Overview
+
+`@rimori/react-client` builds on top of `@rimori/client` and provides:
+- `PluginProvider` that initializes the Rimori runtime, sets up the event bus, and injects the Rimori context into React.
+- React hooks for AI chat, translation, and direct access to the Rimori client instance.
+- Prebuilt components for voice-enabled assistants, avatars, audio playback, and the Rimori context menu.
+- Automatic handling of theme propagation, standalone authentication, and URL tracking inside the Rimori shell.
+
+## Installation
+
+```bash
+npm install @rimori/react-client @rimori/client react react-dom
+# or
+yarn add @rimori/react-client @rimori/client react react-dom
+```
+
+Both React 18 and `@rimori/client` are peer dependencies. Keep them in sync with the versions used by the Rimori platform.
+
+## When to Use
+
+Choose this package whenever your plugin UI is written in React and you need:
+- Access to the `RimoriClient` through idiomatic hooks (`useRimori`).
+- Streamed AI chat experiences without managing the event bus yourself.
+- Drop-in UI for the Rimori assistant, avatars, contextual menus, and audio controls.
+- A translation helper that respects the Rimori i18next pipeline.
+
+If you need to interact with the Rimori platform outside of React (workers, CLI, background scripts), keep using `@rimori/client` directly.
+
+## Quick Start
+
+```tsx
+import "@rimori/react-client/dist/style.css";
+import { PluginProvider, useRimori, useChat, useTranslation } from "@rimori/react-client";
+
+function Dashboard() {
+  const client = useRimori();
+  const { t } = useTranslation();
+  const { messages, append, isLoading } = useChat();
+
+  const send = () => {
+    append([{ role: "user", content: t("discussion.prompts.askForHelp") }]);
+  };
+
+  return (
+    <div>
+      <h1>{t("discussion.title")}</h1>
+      <button onClick={send} disabled={isLoading}>
+        {t("common.buttons.getStarted")}
+      </button>
+      <pre>{JSON.stringify(messages, null, 2)}</pre>
+      <p>{client.plugin.pluginId}</p>
+    </div>
+  );
+}
+
+export function App() {
+  return (
+    <PluginProvider pluginId="your-plugin-id">
+      <Dashboard />
+    </PluginProvider>
+  );
+}
+```
+
+## Hooks
+
+- `useRimori()` – returns the underlying `RimoriClient` instance (database, AI, community, event bus, translator access, etc.). Throws if used outside `PluginProvider`.
+- `useChat(tools?)` – manages streaming conversations with the Rimori AI. Provides `messages`, `append`, `isLoading`, `setMessages`, and `lastMessage`.
+- `useTranslation()` – returns `{ t, ready }` where `t` is a safe translator bound to the current user language. Use it for every user-visible string, following the Rimori translation key conventions.
+
+## Components
+
+All components require being rendered inside `PluginProvider` so they can reach the shared client instance.
+
+- `Assistant` – full chat UI shell with streaming responses and optional tool invocation support.
+- `Avatar` – status-aware avatar component that reflects assistant state.
+- `EmbeddedAssistent` utilities – granular building blocks (`CircleAudioAvatar`, `VoiceRecorder`, TTS `Player`, etc.) for composing your own assistant flows.
+- `PlayButton` – accessible audio playback button that integrates with Rimori's audio controller.
+- `ContextMenu` – automatically injected by `PluginProvider` (can be disabled via `settings.disableContextMenu`).
+
+## Styling
+
+Import the generated stylesheet once in your app entry point:
+
+```ts
+import "@rimori/react-client/dist/style.css";
+```
+
+The stylesheet contains base styles for the assistant components and ensures they respond to the Rimori theme tokens that are passed through the sandbox handshake.
+
+## Standalone Development
+
+`PluginProvider` detects when the plugin is not hosted inside Rimori and automatically spins up `StandaloneClient`. During local development it shows a login overlay that lets you authenticate with your Rimori developer account before establishing the runtime connection.
+
+## Additional Exports
+
+- `FirstMessages` – helper preset with common greeting messages for assistant onboarding flows.
+
+## Example
+
+```tsx
+import { PluginProvider, Assistant, useRimori } from "@rimori/react-client";
+
+function AssistantPanel() {
+  const client = useRimori();
+
+  return (
+    <div className="assistant-panel">
+      <Assistant
+        placeholderKey="discussion.input.placeholder"
+        onMessage={(message) => client.event.emit("self.discussion.onAssistantMessage", { message })}
+      />
+    </div>
+  );
+}
+
+export function Root() {
+  return (
+    <PluginProvider pluginId="your-plugin-id">
+      <AssistantPanel />
+    </PluginProvider>
+  );
+}
+```
+
+Pair this React package with the updated `@rimori/client` README to understand every controller that is available on the returned `RimoriClient` instance.

package/dist/{react-client/src/components → components}/ContextMenu.js

@@ -1,6 +1,5 @@
 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([]);
@@ -36,7 +35,7 @@ const ContextMenu = ({ client }) => {
             .filter(Boolean);
         setActions(actions);
         setOpenOnTextSelect(client.plugin.getUserInfo().context_menu_on_select);
-        EventBus.on('global.contextMenu.createActions', ({ data }) => {
+        client.event.on('global.contextMenu.createActions', ({ data }) => {
             setActions([...data.actions, ...actions]);
         });
     }, []);

package/dist/components/Spinner.d.ts

@@ -1,8 +1 @@
-import React from 'react';
-interface SpinnerProps {
-    text?: string;
-    size?: string;
-    className?: string;
-}
-export declare const Spinner: React.FC<SpinnerProps>;
 export {};

package/dist/components/Spinner.js

@@ -1,4 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Spinner = ({ text, className, size = '30px' }) => {
-    return (_jsxs("div", { className: 'flex items-center space-x-2 ' + className, children: [_jsxs("svg", { style: { width: size, height: size }, className: "animate-spin -ml-1 mr-3 h-5 w-5 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), text && _jsx("span", { className: "", children: text })] }));
-};
+export {};

package/dist/components/ai/Assistant.js

@@ -5,7 +5,7 @@ import { AudioInputField } from './EmbeddedAssistent/AudioInputField';
 import { MessageSender } from './EmbeddedAssistent/TTS/MessageSender';
 import Markdown from 'react-markdown';
 import { useChat } from '../../hooks/UseChatHook';
-import { useRimori } from '../../components';
+import { useRimori } from '../../providers/PluginProvider';
 import { getFirstMessages } from './utils';
 export function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartConversation }) {
     var _a;

package/dist/components/ai/Avatar.d.ts

@@ -1,14 +1,13 @@
-import { Tool } from '../../fromRimori/PluginTypes';
+import { Tool } from '@rimori/client';
 import { FirstMessages } from './utils';
 interface Props {
     voiceId: string;
     agentTools: Tool[];
     avatarImageUrl: string;
     circleSize?: string;
-    isDarkTheme?: boolean;
     children?: React.ReactNode;
     autoStartConversation?: FirstMessages;
     className?: string;
 }
-export declare function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, isDarkTheme, circleSize, className, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, circleSize, className, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ai/Avatar.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { VoiceRecorder } from './EmbeddedAssistent/VoiceRecoder';
+import { VoiceRecorder } from './EmbeddedAssistent/VoiceRecorder';
 import { MessageSender } from './EmbeddedAssistent/TTS/MessageSender';
 import { CircleAudioAvatar } from './EmbeddedAssistent/CircleAudioAvatar';
 import { useChat } from '../../hooks/UseChatHook';
-import { useRimori } from '../../components';
+import { useRimori } from '../../providers/PluginProvider';
 import { getFirstMessages } from './utils';
-export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, isDarkTheme = false, circleSize = '300px', className, }) {
+import { isDarkTheme } from '../../hooks/ThemeSetter';
+export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, circleSize = '300px', className, }) {
     const { ai, event } = useRimori();
     const [agentReplying, setAgentReplying] = useState(false);
     const [isProcessingMessage, setIsProcessingMessage] = useState(false);
     const sender = useMemo(() => new MessageSender(ai.getVoice, voiceId), [voiceId]);
     const { messages, append, isLoading, lastMessage, setMessages } = useChat(agentTools);
+    const isDarkThemeValue = useMemo(() => isDarkTheme(), []);
     useEffect(() => {
         console.log('messages', messages);
     }, [messages]);
@@ -46,7 +48,7 @@ export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversat
             }
         }
     }, [lastMessage, isLoading]);
-    return (_jsxs("div", { className: `md:pb-8 ${className || ''}`, children: [_jsx(CircleAudioAvatar, { width: circleSize, className: "mx-auto", imageUrl: avatarImageUrl, isDarkTheme: isDarkTheme }), children, _jsx(VoiceRecorder, { iconSize: "30", className: "w-16 h-16 shadow-lg rounded-full bg-gray-400 dark:bg-gray-800", disabled: agentReplying, loading: isProcessingMessage, enablePushToTalk: true, onVoiceRecorded: (message) => {
+    return (_jsxs("div", { className: `md:pb-8 ${className || ''}`, children: [_jsx(CircleAudioAvatar, { width: circleSize, className: "mx-auto", imageUrl: avatarImageUrl, isDarkTheme: isDarkThemeValue }), children, _jsx(VoiceRecorder, { iconSize: "30", className: "w-16 h-16 shadow-lg rounded-full bg-gray-400 dark:bg-gray-800", disabled: agentReplying, loading: isProcessingMessage, enablePushToTalk: true, onVoiceRecorded: (message) => {
                     setAgentReplying(true);
                     append([
                         {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { VoiceRecorder } from './VoiceRecoder';
+import { VoiceRecorder } from './VoiceRecorder';
 import { BiSolidRightArrow } from 'react-icons/bi';
 import { HiMiniSpeakerXMark, HiMiniSpeakerWave } from 'react-icons/hi2';
 export function AudioInputField({ onSubmit, onAudioControl, blockSubmission = false }) {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { EventBus } from '../../../fromRimori/EventBus';
+import { EventBus } from '@rimori/client';
 export function CircleAudioAvatar({ imageUrl, className, isDarkTheme = false, width = '150px', }) {
     const canvasRef = useRef(null);
     const currentLoudnessRef = useRef(0);

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

@@ -8,9 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRimori } from '../../../components';
+import { useRimori } from '../../../providers/PluginProvider';
 import { FaMicrophone, FaSpinner } from 'react-icons/fa6';
-import { AudioController } from '../../../plugin/AudioController';
+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);

package/dist/components/audio/Playbutton.js

@@ -11,8 +11,7 @@ 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 '../../fromRimori/EventBus';
+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, }) => {
@@ -22,14 +21,11 @@ export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, in
     const [isLoading, setIsLoading] = useState(false);
     const { ai } = useRimori();
     useEffect(() => {
-        if (!playListenerEvent)
-            return;
-        EventBus.on(playListenerEvent, () => togglePlayback());
-    }, [playListenerEvent]);
-    useEffect(() => {
-        audioUrl && setAudioUrl(null);
+        if (audioUrl)
+            setAudioUrl(null);
         return () => {
-            audioUrl && URL.revokeObjectURL(audioUrl);
+            if (audioUrl)
+                URL.revokeObjectURL(audioUrl);
         };
     }, [text]);
     // Function to generate audio from text using API
@@ -69,6 +65,11 @@ export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, in
             setIsPlaying((prev) => !prev);
         }
     };
+    useEffect(() => {
+        if (!playListenerEvent)
+            return;
+        EventBus.on(playListenerEvent, () => togglePlayback());
+    }, [playListenerEvent]);
     useEffect(() => {
         if (!playOnMount || isFetchingAudio)
             return;
@@ -78,3 +79,6 @@ export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, in
     }, [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))) })] }))] }) }));
 };
+const Spinner = ({ text, className, size = '30px' }) => {
+    return (_jsxs("div", { className: 'flex items-center space-x-2 ' + className, children: [_jsxs("svg", { style: { width: size, height: size }, className: "animate-spin -ml-1 mr-3 h-5 w-5 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), text && _jsx("span", { className: "", children: text })] }));
+};

package/dist/hooks/I18nHooks.d.ts

@@ -1,4 +1,4 @@
-import { TOptions } from 'i18next';
+import { TOptions } from '@rimori/client';
 type TranslatorFn = (key: string, options?: TOptions) => string;
 /**
  * Custom useTranslation hook that provides a translation function and indicates readiness

package/dist/{react-client/src/plugin → hooks}/ThemeSetter.d.ts

@@ -1,2 +1,2 @@
-export declare function setTheme(theme?: string | null): void;
+export declare function useTheme(theme?: string | null): boolean;
 export declare function isDarkTheme(theme?: string | null): boolean;

package/dist/hooks/ThemeSetter.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+export function useTheme(theme) {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        const root = document.documentElement;
+        const nextIsDark = isDarkTheme(theme);
+        setIsDark(nextIsDark);
+        root.classList.add('dark:text-gray-200');
+        if (nextIsDark) {
+            root.setAttribute('data-theme', 'dark');
+            root.classList.add('dark', 'dark:bg-gray-950');
+            root.style.background = 'hsl(var(--background))';
+            return;
+        }
+        root.removeAttribute('data-theme');
+        root.classList.remove('dark', 'dark:bg-gray-950');
+        root.style.background = '';
+    }, [theme]);
+    return isDark;
+}
+export function isDarkTheme(theme) {
+    // If no theme provided, try to get from URL as fallback (for standalone mode)
+    if (!theme) {
+        const urlParams = new URLSearchParams(window.location.search);
+        theme = urlParams.get('theme');
+    }
+    if (!theme || theme === 'system') {
+        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return theme === 'dark';
+}

package/dist/hooks/UseChatHook.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Tool } from '../fromRimori/PluginTypes';
-import { Message } from '../core/controller/AIController';
+import { Tool } from '@rimori/client';
+import { Message } from '@rimori/client';
 export declare function useChat(tools?: Tool[]): {
     messages: Message[];
     append: (appendMessages: Message[]) => void;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from './hooks/UseChatHook';
+export * from './providers/PluginProvider';
+export * from './components/audio/Playbutton';
+export * from './components/ai/EmbeddedAssistent/TTS/Player';
+export * from './components/ai/Avatar';
+export { FirstMessages } from './components/ai/utils';
+export { useTranslation } from './hooks/I18nHooks';
+export { Avatar } from './components/ai/Avatar';
+export { VoiceRecorder } from './components/ai/EmbeddedAssistent/VoiceRecorder';

package/dist/index.js

@@ -0,0 +1,9 @@
+// Re-export everything
+export * from './hooks/UseChatHook';
+export * from './providers/PluginProvider';
+export * from './components/audio/Playbutton';
+export * from './components/ai/EmbeddedAssistent/TTS/Player';
+export * from './components/ai/Avatar';
+export { useTranslation } from './hooks/I18nHooks';
+export { Avatar } from './components/ai/Avatar';
+export { VoiceRecorder } from './components/ai/EmbeddedAssistent/VoiceRecorder';

package/dist/{react-client/plugin → plugin}/ThemeSetter.d.ts

@@ -1,2 +1,2 @@
-export declare function setTheme(theme?: string | null): void;
+export declare function useTheme(theme?: string | null): boolean;
 export declare function isDarkTheme(theme?: string | null): boolean;

package/dist/plugin/ThemeSetter.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+export function useTheme(theme) {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        const root = document.documentElement;
+        const nextIsDark = isDarkTheme(theme);
+        setIsDark(nextIsDark);
+        root.classList.add('dark:text-gray-200');
+        if (nextIsDark) {
+            root.setAttribute('data-theme', 'dark');
+            root.classList.add('dark', 'dark:bg-gray-950');
+            root.style.background = 'hsl(var(--background))';
+            return;
+        }
+        root.removeAttribute('data-theme');
+        root.classList.remove('dark', 'dark:bg-gray-950');
+        root.style.background = '';
+    }, [theme]);
+    return isDark;
+}
+export function isDarkTheme(theme) {
+    // If no theme provided, try to get from URL as fallback (for standalone mode)
+    if (!theme) {
+        const urlParams = new URLSearchParams(window.location.search);
+        theme = urlParams.get('theme');
+    }
+    if (!theme || theme === 'system') {
+        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return theme === 'dark';
+}

package/dist/providers/PluginProvider.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { RimoriClient } from '@rimori/client';
 interface PluginProviderProps {
     children: ReactNode;
     pluginId: string;
@@ -7,5 +8,5 @@ interface PluginProviderProps {
     };
 }
 export declare const PluginProvider: React.FC<PluginProviderProps>;
-export declare const useRimori: () => any;
+export declare const useRimori: () => RimoriClient;
 export {};

package/dist/providers/PluginProvider.js

@@ -9,14 +9,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState } from 'react';
-import { RimoriClient, StandaloneClient } from '@rimori/client';
-import ContextMenu from '../components/components/ContextMenu';
+import { EventBusHandler, RimoriClient, StandaloneClient } from '@rimori/client';
+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 [standaloneClient, setStandaloneClient] = useState(false);
     const [applicationMode, setApplicationMode] = useState(null);
     const [theme, setTheme] = useState(null);
+    useTheme(theme);
     const isSidebar = applicationMode === 'sidebar';
     const isSettings = applicationMode === 'settings';
     useEffect(() => {
@@ -24,12 +26,12 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
         // Check if we're in an iframe context - if not, we're standalone
         const standaloneDetected = window === window.parent;
         if (standaloneDetected && !standaloneClient) {
-            StandaloneClient.getInstance().then((client) => {
-                client.needsLogin().then((needLogin) => setStandaloneClient(needLogin ? client : true));
+            void StandaloneClient.getInstance().then((client) => {
+                void client.needsLogin().then((needLogin) => setStandaloneClient(needLogin ? client : true));
             });
         }
         if ((!standaloneDetected && !plugin) || (standaloneDetected && standaloneClient === true)) {
-            RimoriClient.getInstance(pluginId, standaloneDetected).then((client) => {
+            void RimoriClient.getInstance(pluginId).then((client) => {
                 setPlugin(client);
                 // Get applicationMode and theme from MessageChannel query params
                 if (!standaloneDetected) {
@@ -37,10 +39,11 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
                     const themeParam = client.getQueryParam('rm_theme');
                     setApplicationMode(mode);
                     setTheme(themeParam);
+                    client.event.emit('self.rimori.triggerInitFinished');
                 }
             });
         }
-    }, [pluginId, standaloneClient]);
+    }, [pluginId, standaloneClient, plugin]);
     //route change
     useEffect(() => {
         if (!plugin)
@@ -59,7 +62,7 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
         }, 1000);
         emitUrlChange(lastHash);
         return () => clearInterval(interval);
-    }, [plugin]);
+    }, [plugin, 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))

package/dist/{react-client/src/utils → utils}/FullscreenUtils.js

@@ -9,11 +9,11 @@ export function triggerFullscreen(onStateChange, selector) {
         const ref = document.querySelector(selector || '#root');
         if (!isFullscreen()) {
             // @ts-ignore
-            ref.requestFullscreen() || ref.webkitRequestFullscreen();
+            void (ref.requestFullscreen() || ref.webkitRequestFullscreen());
         }
         else {
             // @ts-ignore
-            document.exitFullscreen() || document.webkitExitFullscreen();
+            void (document.exitFullscreen() || document.webkitExitFullscreen());
         }
     }
     catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -20,18 +20,15 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@rimori/client": "^2.0.0"
+    "@rimori/client": "^2.1.0"
   },
   "dependencies": {
-    "@tiptap/react": "2.10.3",
-    "@tiptap/starter-kit": "2.10.3",
     "html2canvas": "1.4.1",
-    "react-icons": "5.4.0",
-    "tiptap-markdown": "0.8.10"
+    "react-icons": "5.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "^2.0.0",
+    "@rimori/client": "^2.1.0",
     "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,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { EventBus, RimoriClient, MenuEntry } from '@rimori/client';
+import { RimoriClient, MenuEntry } from '@rimori/client';
 
 export interface Position {
   x: number;
@@ -49,7 +49,7 @@ const ContextMenu = ({ client }: { client: RimoriClient }) => {
     setActions(actions);
     setOpenOnTextSelect(client.plugin.getUserInfo().context_menu_on_select);
 
-    EventBus.on<{ actions: MenuEntry[] }>('global.contextMenu.createActions', ({ data }) => {
+    client.event.on<{ actions: MenuEntry[] }>('global.contextMenu.createActions', ({ data }) => {
       setActions([...data.actions, ...actions]);
     });
   }, []);

package/src/components/ai/Avatar.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { VoiceRecorder } from './EmbeddedAssistent/VoiceRecoder';
+import { VoiceRecorder } from './EmbeddedAssistent/VoiceRecorder';
 import { MessageSender } from './EmbeddedAssistent/TTS/MessageSender';
 import { CircleAudioAvatar } from './EmbeddedAssistent/CircleAudioAvatar';
 import { Tool } from '@rimori/client';
@@ -7,13 +7,13 @@ import { useChat } from '../../hooks/UseChatHook';
 import { useRimori } from '../../providers/PluginProvider';
 import { getFirstMessages } from './utils';
 import { FirstMessages } from './utils';
+import { isDarkTheme } from '../../hooks/ThemeSetter';
 
 interface Props {
   voiceId: string;
   agentTools: Tool[];
   avatarImageUrl: string;
   circleSize?: string;
-  isDarkTheme?: boolean;
   children?: React.ReactNode;
   autoStartConversation?: FirstMessages;
   className?: string;
@@ -25,7 +25,6 @@ export function Avatar({
   agentTools,
   autoStartConversation,
   children,
-  isDarkTheme = false,
   circleSize = '300px',
   className,
 }: Props) {
@@ -34,6 +33,7 @@ export function Avatar({
   const [isProcessingMessage, setIsProcessingMessage] = useState(false);
   const sender = useMemo(() => new MessageSender(ai.getVoice, voiceId), [voiceId]);
   const { messages, append, isLoading, lastMessage, setMessages } = useChat(agentTools);
+  const isDarkThemeValue = useMemo(() => isDarkTheme(), []);
 
   useEffect(() => {
     console.log('messages', messages);
@@ -74,7 +74,12 @@ export function Avatar({
 
   return (
     <div className={`md:pb-8 ${className || ''}`}>
-      <CircleAudioAvatar width={circleSize} className="mx-auto" imageUrl={avatarImageUrl} isDarkTheme={isDarkTheme} />
+      <CircleAudioAvatar
+        width={circleSize}
+        className="mx-auto"
+        imageUrl={avatarImageUrl}
+        isDarkTheme={isDarkThemeValue}
+      />
       {children}
       <VoiceRecorder
         iconSize="30"

package/src/components/ai/EmbeddedAssistent/AudioInputField.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { VoiceRecorder } from './VoiceRecoder';
+import { VoiceRecorder } from './VoiceRecorder';
 import { BiSolidRightArrow } from 'react-icons/bi';
 import { HiMiniSpeakerXMark, HiMiniSpeakerWave } from 'react-icons/hi2';