@rimori/react-client 0.1.1 → 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/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/Avatar.d.ts

@@ -5,10 +5,9 @@ interface Props {
     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 '../../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/VoiceRecorder.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/components/ai/EmbeddedAssistent/VoiceRecorder.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/components/audio/Playbutton.js

@@ -11,7 +11,6 @@ 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;
@@ -80,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/ThemeSetter.d.ts

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

@@ -1,10 +1,9 @@
 export * from './hooks/UseChatHook';
 export * from './providers/PluginProvider';
-export * from './utils/FullscreenUtils';
 export * from './components/audio/Playbutton';
 export * from './components/ai/EmbeddedAssistent/TTS/Player';
-export * from './components/ContextMenu';
-export * from './components/MarkdownEditor';
-export * from './components/Spinner';
+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

@@ -1,10 +1,9 @@
 // Re-export everything
 export * from './hooks/UseChatHook';
 export * from './providers/PluginProvider';
-export * from './utils/FullscreenUtils';
 export * from './components/audio/Playbutton';
 export * from './components/ai/EmbeddedAssistent/TTS/Player';
-export * from './components/ContextMenu';
-export * from './components/MarkdownEditor';
-export * from './components/Spinner';
+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/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

@@ -1,10 +1,22 @@
-export function setTheme(theme) {
-    document.documentElement.classList.add('dark:text-gray-200');
-    if (isDarkTheme(theme)) {
-        document.documentElement.setAttribute('data-theme', 'dark');
-        document.documentElement.classList.add('dark', 'dark:bg-gray-950');
-        document.documentElement.style.background = 'hsl(var(--background))';
-    }
+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)

package/dist/providers/PluginProvider.js

@@ -11,12 +11,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState } from 'react';
 import { EventBusHandler, RimoriClient, StandaloneClient } from '@rimori/client';
 import ContextMenu from '../components/ContextMenu';
-import { setTheme } from '../plugin/ThemeSetter';
+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(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.1.1",
+  "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/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';
 

package/src/components/audio/Playbutton.tsx

@@ -1,7 +1,6 @@
 import React, { 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';
 
 type AudioPlayerProps = {
@@ -124,3 +123,31 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
     </div>
   );
 };
+
+interface SpinnerProps {
+  text?: string;
+  size?: string;
+  className?: string;
+}
+
+const Spinner = ({ text, className, size = '30px' }: SpinnerProps) => {
+  return (
+    <div className={'flex items-center space-x-2 ' + className}>
+      <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"
+      >
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+        <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"
+        ></path>
+      </svg>
+      {text && <span className="">{text}</span>}
+    </div>
+  );
+};

package/src/hooks/ThemeSetter.ts

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+export function useTheme(theme?: string | null): boolean {
+  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?: string | null): boolean {
+  // 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/src/index.ts

@@ -1,11 +1,10 @@
 // Re-export everything
 export * from './hooks/UseChatHook';
 export * from './providers/PluginProvider';
-export * from './utils/FullscreenUtils';
 export * from './components/audio/Playbutton';
 export * from './components/ai/EmbeddedAssistent/TTS/Player';
-export * from './components/ContextMenu';
-export * from './components/MarkdownEditor';
-export * from './components/Spinner';
+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/src/providers/PluginProvider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, ReactNode, useEffect, useState } from 'react';
 import { EventBusHandler, RimoriClient, StandaloneClient } from '@rimori/client';
 import ContextMenu from '../components/ContextMenu';
-import { setTheme } from '../plugin/ThemeSetter';
+import { useTheme } from '../hooks/ThemeSetter';
 
 interface PluginProviderProps {
   children: ReactNode;
@@ -17,6 +17,9 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
   const [plugin, setPlugin] = useState<RimoriClient | null>(null);
   const [standaloneClient, setStandaloneClient] = useState<StandaloneClient | boolean>(false);
   const [applicationMode, setApplicationMode] = useState<string | null>(null);
+  const [theme, setTheme] = useState<string | null>(null);
+
+  useTheme(theme);
 
   const isSidebar = applicationMode === 'sidebar';
   const isSettings = applicationMode === 'settings';

package/src/components/MarkdownEditor.tsx

@@ -1,144 +0,0 @@
-import { Markdown } from 'tiptap-markdown';
-import StarterKit from '@tiptap/starter-kit';
-import { PiCodeBlock } from 'react-icons/pi';
-import { TbBlockquote } from 'react-icons/tb';
-import { GoListOrdered } from 'react-icons/go';
-import { AiOutlineUnorderedList } from 'react-icons/ai';
-import { EditorProvider, useCurrentEditor } from '@tiptap/react';
-import { LuHeading1, LuHeading2, LuHeading3 } from 'react-icons/lu';
-import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
-
-// This inplementation is rooted in the Tiptap editor basic example https://codesandbox.io/p/devbox/editor-9x9dkd
-
-interface EditorButtonProps {
-  action: string;
-  isActive?: boolean;
-  label: string | React.ReactNode;
-  disabled?: boolean;
-}
-
-const EditorButton = ({ action, isActive, label, disabled }: EditorButtonProps) => {
-  const { editor } = useCurrentEditor() as any;
-
-  if (!editor) {
-    return null;
-  }
-
-  if (action.includes('heading')) {
-    const level = parseInt(action[action.length - 1]);
-    return (
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: level }).run()}
-        className={`pl-2 ${isActive ? 'is-active' : ''}`}
-      >
-        {label}
-      </button>
-    );
-  }
-
-  return (
-    <button
-      onClick={() => editor.chain().focus()[action]().run()}
-      disabled={disabled ? !editor.can().chain().focus()[action]().run() : false}
-      className={`pl-2 ${isActive ? 'is-active' : ''}`}
-    >
-      {label}
-    </button>
-  );
-};
-
-const MenuBar = () => {
-  const { editor } = useCurrentEditor();
-
-  if (!editor) {
-    return null;
-  }
-
-  return (
-    <div className="bg-gray-400 dark:bg-gray-800 dark:text-white text-lg flex flex-row flex-wrap items-center p-1">
-      <EditorButton action="toggleBold" isActive={editor.isActive('bold')} label={<FaBold />} disabled />
-      <EditorButton action="toggleItalic" isActive={editor.isActive('italic')} label={<FaItalic />} disabled />
-      <EditorButton action="toggleStrike" isActive={editor.isActive('strike')} label={<FaStrikethrough />} disabled />
-      <EditorButton action="toggleCode" isActive={editor.isActive('code')} label={<FaCode />} disabled />
-      <EditorButton action="setParagraph" isActive={editor.isActive('paragraph')} label={<FaParagraph />} />
-      <EditorButton
-        action="setHeading1"
-        isActive={editor.isActive('heading', { level: 1 })}
-        label={<LuHeading1 size={'24px'} />}
-      />
-      <EditorButton
-        action="setHeading2"
-        isActive={editor.isActive('heading', { level: 2 })}
-        label={<LuHeading2 size={'24px'} />}
-      />
-      <EditorButton
-        action="setHeading3"
-        isActive={editor.isActive('heading', { level: 3 })}
-        label={<LuHeading3 size={'24px'} />}
-      />
-      <EditorButton
-        action="toggleBulletList"
-        isActive={editor.isActive('bulletList')}
-        label={<AiOutlineUnorderedList size={'24px'} />}
-      />
-      <EditorButton
-        action="toggleOrderedList"
-        isActive={editor.isActive('orderedList')}
-        label={<GoListOrdered size={'24px'} />}
-      />
-      <EditorButton
-        action="toggleCodeBlock"
-        isActive={editor.isActive('codeBlock')}
-        label={<PiCodeBlock size={'24px'} />}
-      />
-      <EditorButton
-        action="toggleBlockquote"
-        isActive={editor.isActive('blockquote')}
-        label={<TbBlockquote size={'24px'} />}
-      />
-    </div>
-  );
-};
-
-const extensions = [
-  StarterKit.configure({
-    bulletList: {
-      HTMLAttributes: {
-        class: 'list-disc list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
-      },
-    },
-    orderedList: {
-      HTMLAttributes: {
-        className: 'list-decimal list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
-      },
-    },
-  }),
-  Markdown,
-];
-
-interface Props {
-  content?: string;
-  editable: boolean;
-  className?: string;
-  onUpdate?: (content: string) => void;
-}
-
-export const MarkdownEditor = (props: Props) => {
-  return (
-    <div
-      className={'text-md border border-gray-800 overflow-hidden ' + props.className}
-      style={{ borderWidth: props.editable ? 1 : 0 }}
-    >
-      <EditorProvider
-        key={(props.editable ? 'editable' : 'readonly') + props.content}
-        slotBefore={props.editable ? <MenuBar /> : null}
-        extensions={extensions}
-        content={props.content}
-        editable={props.editable}
-        onUpdate={(e) => {
-          props.onUpdate && props.onUpdate(e.editor.storage.markdown.getMarkdown());
-        }}
-      ></EditorProvider>
-    </div>
-  );
-};

package/src/components/Spinner.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-interface SpinnerProps {
-  text?: string;
-  size?: string;
-  className?: string;
-}
-
-export const Spinner: React.FC<SpinnerProps> = ({ text, className, size = '30px' }) => {
-  return (
-    <div className={'flex items-center space-x-2 ' + className}>
-      <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"
-      >
-        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-        <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"
-        ></path>
-      </svg>
-      {text && <span className="">{text}</span>}
-    </div>
-  );
-};

package/src/plugin/ThemeSetter.ts

@@ -1,23 +0,0 @@
-export function setTheme(theme?: string | null): void {
-  document.documentElement.classList.add('dark:text-gray-200');
-
-  if (isDarkTheme(theme)) {
-    document.documentElement.setAttribute('data-theme', 'dark');
-    document.documentElement.classList.add('dark', 'dark:bg-gray-950');
-    document.documentElement.style.background = 'hsl(var(--background))';
-  }
-}
-
-export function isDarkTheme(theme?: string | null): boolean {
-  // 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/src/utils/FullscreenUtils.ts

@@ -1,22 +0,0 @@
-export function isFullscreen(): boolean {
-  return !!document.fullscreenElement;
-}
-
-export function triggerFullscreen(onStateChange: (isFullscreen: boolean) => void, selector?: string): void {
-  document.addEventListener('fullscreenchange', () => {
-    onStateChange(isFullscreen());
-  });
-  try {
-    const ref = document.querySelector(selector || '#root') as HTMLElement;
-    if (!isFullscreen()) {
-      // @ts-ignore
-      void (ref.requestFullscreen() || ref.webkitRequestFullscreen());
-    } else {
-      // @ts-ignore
-      void (document.exitFullscreen() || document.webkitExitFullscreen());
-    }
-  } catch (error: any) {
-    console.error('Failed to enter fullscreen', error.message);
-  }
-  onStateChange(isFullscreen());
-}