@rimori/react-client 0.4.18 → 0.4.19-next.0

package/dist/components/ai/Assistant.js

@@ -11,7 +11,7 @@ export function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartCo
     var _a;
     const [oralCommunication, setOralCommunication] = React.useState(true);
     const { ai: llm, event } = useRimori();
-    const sender = useMemo(() => new MessageSender(llm.getVoice, voiceId), []);
+    const sender = useMemo(() => new MessageSender(llm.getVoice, voiceId), [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;
     useEffect(() => {

package/dist/components/ai/Avatar.js

@@ -9,7 +9,7 @@ import { getFirstMessages } from './utils';
 import { useTheme } from '../../hooks/ThemeSetter';
 export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, circleSize = '300px', className, cache = false, prompt, promptVariables, }) {
     const { ai, event, plugin, userInfo } = useRimori();
-    const { isDark: isDarkThemeValue } = useTheme(plugin.theme);
+    const { isDark: isDarkThemeValue } = useTheme(plugin.theme, true);
     const [agentReplying, setAgentReplying] = useState(false);
     const [isProcessingMessage, setIsProcessingMessage] = useState(false);
     const dialectTtsInstruction = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.dialect)
@@ -27,6 +27,7 @@ export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversat
         console.log('messages', messages);
     }, [messages]);
     useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         if (!isLoading)
             setIsProcessingMessage(false);
     }, [isLoading]);
@@ -58,6 +59,7 @@ export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversat
             sender.handleNewText(lastMessage.content, isLoading);
             if (lastMessage.toolCalls) {
                 // console.log("unlocking mic", lastMessage)
+                // eslint-disable-next-line react-hooks/set-state-in-effect
                 setAgentReplying(false);
                 setIsProcessingMessage(false);
             }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { Tool } from '@rimori/client';
 export interface BuddyAssistantAutoStart {
     /** Pre-written assistant message shown immediately (no AI call) */

package/dist/components/ai/BuddyAssistant.js

@@ -11,7 +11,7 @@ const genId = () => `ba-${++idCounter}`;
 export function BuddyAssistant({ prompt, promptVariables, autoStartConversation, circleSize = '160px', chatPlaceholder, bottomAction, className, voiceSpeed = 1, tools, showName = false, }) {
     const { ai, event, plugin, userInfo } = useRimori();
     const ttsEnabled = plugin.ttsEnabled;
-    const { isDark } = useTheme(plugin.theme);
+    const { isDark } = useTheme(plugin.theme, true);
     const buddy = userInfo.study_buddy;
     const dialect = userInfo === null || userInfo === void 0 ? void 0 : userInfo.dialect;
     const dialectTtsInstruction = dialect ? `Speak with a ${dialect} accent and pronunciation.` : undefined;
@@ -99,7 +99,7 @@ export function BuddyAssistant({ prompt, promptVariables, autoStartConversation,
         triggerAI(newMessages);
     };
     const lastAssistantMessage = [...messages].filter((m) => m.role === 'assistant').pop();
-    return (_jsxs("div", { className: `flex flex-col items-center ${className || ''}`, children: [_jsx(CircleAudioAvatar, { width: circleSize, imageUrl: buddy.avatarUrl, isDarkTheme: isDark, className: "mx-auto" }), showName && (_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-3xl font-semibold", children: buddy.name }) })), !ttsEnabled ? (_jsx("div", { className: "w-full rounded-xl bg-gray-200/70 dark:bg-gray-800/70 px-4 py-3 text-sm text-gray-800 dark:text-gray-200 leading-relaxed border border-gray-300/40 dark:border-gray-700/40 mt-4", children: !(lastAssistantMessage === null || lastAssistantMessage === void 0 ? void 0 : lastAssistantMessage.content) && isLoading ? (_jsxs("span", { className: "inline-flex gap-1 py-0.5", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce" }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: '0.15s' } }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: '0.3s' } })] })) : (_jsx("span", { className: "whitespace-pre-wrap", children: lastAssistantMessage === null || lastAssistantMessage === void 0 ? void 0 : lastAssistantMessage.content })) })) : null, _jsxs("div", { className: 'w-full relative mt-4 ' + (ttsEnabled ? 'max-w-md' : ''), children: [_jsx("input", { value: chatInput, onChange: (e) => setChatInput(e.target.value), onKeyDown: (e) => {
+    return (_jsxs("div", { className: `flex flex-col items-center ${className || ''}`, children: [_jsx(CircleAudioAvatar, { width: circleSize, imageUrl: buddy.avatarUrl, isDarkTheme: isDark, className: "mx-auto" }), showName && (_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-3xl font-semibold", children: buddy.name }) })), !plugin.ttsEnabled && messages.length > 1 ? (_jsx("div", { className: "w-full rounded-xl bg-gray-200/70 dark:bg-gray-800/70 px-4 py-3 text-sm text-gray-800 dark:text-gray-200 leading-relaxed border border-gray-300/40 dark:border-gray-700/40 mt-4", children: !(lastAssistantMessage === null || lastAssistantMessage === void 0 ? void 0 : lastAssistantMessage.content) && isLoading ? (_jsxs("span", { className: "inline-flex gap-1 py-0.5", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce" }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: '0.15s' } }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: '0.3s' } })] })) : (_jsx("span", { className: "whitespace-pre-wrap", children: lastAssistantMessage === null || lastAssistantMessage === void 0 ? void 0 : lastAssistantMessage.content })) })) : null, _jsxs("div", { className: 'w-full relative mt-4 ' + (ttsEnabled ? 'max-w-md' : ''), children: [_jsx("input", { value: chatInput, onChange: (e) => setChatInput(e.target.value), onKeyDown: (e) => {
                             if (e.key === 'Enter' && !e.shiftKey) {
                                 e.preventDefault();
                                 sendMessage(chatInput);

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

@@ -6,6 +6,32 @@ export function CircleAudioAvatar({ imageUrl, className, isDarkTheme = false, wi
     const currentLoudnessRef = useRef(0);
     const targetLoudnessRef = useRef(0);
     const animationFrameRef = useRef(null);
+    const draw = (ctx, canvas, image, loudness) => {
+        if (canvas && ctx) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            const radius = Math.min(canvas.width, canvas.height) / 3;
+            const centerX = canvas.width / 2;
+            const centerY = canvas.height / 2;
+            const pulseRadius = radius + loudness / 2.5;
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, pulseRadius, 0, Math.PI * 2, true);
+            ctx.strokeStyle = isDarkTheme ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)';
+            ctx.lineWidth = 5;
+            ctx.stroke();
+            ctx.save();
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
+            ctx.closePath();
+            ctx.clip();
+            ctx.drawImage(image, centerX - radius, centerY - radius, radius * 2, radius * 2);
+            ctx.restore();
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
+            ctx.strokeStyle = isDarkTheme ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)';
+            ctx.lineWidth = 5;
+            ctx.stroke();
+        }
+    };
     useEffect(() => {
         const canvas = canvasRef.current;
         if (canvas) {
@@ -49,31 +75,5 @@ export function CircleAudioAvatar({ imageUrl, className, isDarkTheme = false, wi
             }
         }
     }, [imageUrl]);
-    const draw = (ctx, canvas, image, loudness) => {
-        if (canvas && ctx) {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            const radius = Math.min(canvas.width, canvas.height) / 3;
-            const centerX = canvas.width / 2;
-            const centerY = canvas.height / 2;
-            const pulseRadius = radius + loudness / 2.5;
-            ctx.beginPath();
-            ctx.arc(centerX, centerY, pulseRadius, 0, Math.PI * 2, true);
-            ctx.strokeStyle = isDarkTheme ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)';
-            ctx.lineWidth = 5;
-            ctx.stroke();
-            ctx.save();
-            ctx.beginPath();
-            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
-            ctx.closePath();
-            ctx.clip();
-            ctx.drawImage(image, centerX - radius, centerY - radius, radius * 2, radius * 2);
-            ctx.restore();
-            ctx.beginPath();
-            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
-            ctx.strokeStyle = isDarkTheme ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)';
-            ctx.lineWidth = 5;
-            ctx.stroke();
-        }
-    };
     return _jsx("canvas", { ref: canvasRef, className: className, width: 500, height: 500, style: { width } });
 }

package/dist/components/audio/Playbutton.js

@@ -23,6 +23,7 @@ export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, in
     const audioRef = useRef(null);
     const eventBusListenerRef = useRef(null);
     useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         if (audioUrl)
             setAudioUrl(null);
         return () => {
@@ -128,6 +129,7 @@ export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, in
             return;
         isFetchingAudio = true;
         // console.log("playOnMount", playOnMount);
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         togglePlayback();
     }, [playOnMount]);
     return (_jsx("div", { className: "group relative", children: _jsxs("div", { className: "flex flex-row items-end", children: [!hide && (_jsx("button", { className: "text-gray-400", onClick: togglePlayback, disabled: isLoading, children: isLoading ? (_jsx(Spinner, { size: size })) : isPlaying ? (_jsx(FaStopCircle, { size: size })) : (_jsx(FaPlayCircle, { size: size })) })), enableSpeedAdjustment && (_jsxs("div", { className: "ml-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-row text-sm text-gray-500", children: [_jsx("span", { className: "pr-1", children: "Speed: " }), _jsx("select", { value: speed, className: "appearance-none cursor-pointer pr-0 p-0 rounded shadow leading-tight focus:outline-none focus:bg-gray-800 focus:ring bg-transparent border-0", onChange: (e) => setSpeed(parseFloat(e.target.value)), disabled: isLoading, children: AudioPlayOptions.map((s) => (_jsx("option", { value: s, children: s }, s))) })] }))] }) }));

package/dist/components/editor/MarkdownEditor.js

@@ -78,6 +78,7 @@ const InlinePanel = ({ panel, onClose, editor, onUpdate, labels, onTransform, is
     useEffect(() => {
         if (panel === 'link') {
             const href = editor.getAttributes('link').href;
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setValue(typeof href === 'string' ? href : 'https://');
         }
         else {

package/dist/index.d.ts

@@ -12,3 +12,4 @@ export { VoiceRecorder } from './components/ai/EmbeddedAssistent/VoiceRecorder';
 export { MarkdownEditor } from './components/editor/MarkdownEditor';
 export type { MarkdownEditorProps, EditorLabels } from './components/editor/MarkdownEditor';
 export { extractImageUrls } from './components/editor/imageUtils';
+export { injectFederationCss } from './utils/injectFederationCss';

package/dist/index.js

@@ -10,3 +10,4 @@ export { BuddyAssistant } from './components/ai/BuddyAssistant';
 export { VoiceRecorder } from './components/ai/EmbeddedAssistent/VoiceRecorder';
 export { MarkdownEditor } from './components/editor/MarkdownEditor';
 export { extractImageUrls } from './components/editor/imageUtils';
+export { injectFederationCss } from './utils/injectFederationCss';

package/dist/providers/PluginProvider.d.ts

@@ -4,14 +4,12 @@ import type { UserInfo } from '@rimori/client';
 interface PluginProviderProps {
     children: ReactNode;
     pluginId: string;
+    /** Pre-constructed RimoriClient (federation mode). When provided, skips the handshake entirely. */
+    client?: RimoriClient;
+    /** Pre-loaded user info (federation mode). Required when client is provided. */
+    userInfo?: UserInfo;
     settings?: {
         disableContextMenu?: boolean;
-        disableThemeSetting?: boolean;
-        /**
-         * Skip the scrollbar detection that emits 'session.triggerScrollbarChange'.
-         * In federation mode, the host (FederatedPluginRenderer) handles this instead.
-         */
-        disableScrollbarDetection?: boolean;
     };
 }
 export declare const PluginProvider: React.FC<PluginProviderProps>;

package/dist/providers/PluginProvider.js

@@ -14,13 +14,14 @@ import posthog from 'posthog-js';
 import ContextMenu from '../components/ContextMenu';
 import { useTheme } from '../hooks/ThemeSetter';
 const PluginContext = createContext(null);
-export const PluginProvider = ({ children, pluginId, settings }) => {
-    const [client, setClient] = useState(null);
+export const PluginProvider = ({ children, pluginId, client: injectedClient, userInfo: injectedUserInfo, settings, }) => {
+    const isFederated = !!injectedClient;
+    const [client, setClient] = useState(injectedClient !== null && injectedClient !== void 0 ? injectedClient : null);
     const [standaloneClient, setStandaloneClient] = useState(false);
     const [applicationMode, setApplicationMode] = useState(null);
     const [theme, setTheme] = useState(undefined);
-    const [userInfo, setUserInfo] = useState(null);
-    useTheme(theme, settings === null || settings === void 0 ? void 0 : settings.disableThemeSetting);
+    const [userInfo, setUserInfo] = useState(injectedUserInfo !== null && injectedUserInfo !== void 0 ? injectedUserInfo : null);
+    useTheme(theme, isFederated);
     // Init PostHog once per plugin iframe
     useEffect(() => {
         if (!posthog.__loaded) {
@@ -40,6 +41,9 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
     const isSidebar = applicationMode === 'sidebar';
     const isSettings = applicationMode === 'settings';
     useEffect(() => {
+        // In federation mode the client is already ready — skip handshake
+        if (isFederated)
+            return;
         initEventBus(pluginId);
         // Check if we're in an iframe context - if not, we're standalone
         const standaloneDetected = window === window.parent;
@@ -51,7 +55,6 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
         if ((!standaloneDetected && !client) || (standaloneDetected && standaloneClient === true)) {
             void RimoriClient.getInstance(pluginId).then((client) => {
                 setClient(client);
-                // Set initial userInfo
                 setUserInfo(client.plugin.getUserInfo());
                 // Get applicationMode and theme from MessageChannel query params
                 if (!standaloneDetected) {
@@ -61,7 +64,7 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
                 }
             });
         }
-    }, [pluginId, standaloneClient, client]);
+    }, [pluginId, standaloneClient, client, isFederated]);
     // Identify user in PostHog when userInfo is available
     useEffect(() => {
         if (userInfo === null || userInfo === void 0 ? void 0 : userInfo.user_id) {
@@ -73,7 +76,7 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
         if (!client)
             return;
         const unsubscribe = client.plugin.onRimoriInfoUpdate((info) => {
-            console.log('[PluginProvider] Received RimoriInfo update, updating userInfo');
+            // console.log('[PluginProvider] Received RimoriInfo update, updating userInfo + ttsEnabled:', info.ttsEnabled);
             setUserInfo(info.profile);
         });
         return () => unsubscribe();
@@ -83,6 +86,8 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
             return;
         if (isSidebar)
             return; //sidebar pages should not report url changes
+        if (isFederated)
+            return; // federation mode: host handles URL sync
         // react router overwrites native pushstate so it gets wrapped to detect url changes
         const originalPushState = history.pushState;
         history.pushState = (...args) => {
@@ -90,11 +95,11 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
             client.event.emit('session.triggerUrlChange', { url: location.hash });
             return result;
         };
-    }, [client, isSidebar]);
+    }, [client, isSidebar, isFederated]);
     useEffect(() => {
         if (!client)
             return;
-        if (settings === null || settings === void 0 ? void 0 : settings.disableScrollbarDetection)
+        if (isFederated)
             return;
         const checkScrollbar = () => {
             const hasScrollbar = document.documentElement.scrollHeight > window.innerHeight;
@@ -111,7 +116,7 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
             window.removeEventListener('resize', checkScrollbar);
             resizeObserver.disconnect();
         };
-    }, [client, settings === null || settings === void 0 ? void 0 : settings.disableScrollbarDetection]);
+    }, [client, isFederated]);
     if (standaloneClient instanceof StandaloneClient) {
         return (_jsx(StandaloneAuth, { onLogin: (email, password) => __awaiter(void 0, void 0, void 0, function* () {
                 if (yield standaloneClient.login(email, password))
@@ -128,9 +133,9 @@ export const useRimori = () => {
     if (context === null) {
         throw new Error('useRimori must be used within an PluginProvider');
     }
-    // Return client with userInfo at root level for easy access
-    // Maintains backwards compatibility - all client properties are still accessible
-    return Object.assign(context.client, { userInfo: context.userInfo });
+    return Object.assign(context.client, {
+        userInfo: context.userInfo,
+    });
 };
 function getUrlParam(name) {
     // First try to get from URL hash query params (for compatibility)

package/dist/utils/injectFederationCss.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Inject a plugin's Tailwind CSS into the document when a federated module loads.
+ * Inserts BEFORE existing stylesheets so rimori-main's responsive classes (e.g. md:hidden)
+ * keep higher cascade priority and are not overridden by base utility classes from the plugin.
+ *
+ * @param pluginId - Unique plugin identifier used as the <style> element id (e.g. 'rimori-plugin-translator')
+ * @param cssText - The inlined CSS string (imported via `?inline`)
+ */
+export declare function injectFederationCss(pluginId: string, cssText: string): void;

package/dist/utils/injectFederationCss.js

@@ -0,0 +1,25 @@
+/**
+ * Inject a plugin's Tailwind CSS into the document when a federated module loads.
+ * Inserts BEFORE existing stylesheets so rimori-main's responsive classes (e.g. md:hidden)
+ * keep higher cascade priority and are not overridden by base utility classes from the plugin.
+ *
+ * @param pluginId - Unique plugin identifier used as the <style> element id (e.g. 'rimori-plugin-translator')
+ * @param cssText - The inlined CSS string (imported via `?inline`)
+ */
+export function injectFederationCss(pluginId, cssText) {
+    if (typeof document === 'undefined' || !cssText)
+        return;
+    const id = `${pluginId}-css`;
+    if (document.getElementById(id))
+        return;
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = cssText;
+    const firstStyle = document.head.querySelector('style, link[rel="stylesheet"]');
+    if (firstStyle) {
+        document.head.insertBefore(style, firstStyle);
+    }
+    else {
+        document.head.appendChild(style);
+    }
+}

package/eslint.config.js

@@ -1,53 +1,35 @@
-import js from '@eslint/js';
 import globals from 'globals';
 import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
 import tseslint from 'typescript-eslint';
-import prettier from 'eslint-plugin-prettier';
 import prettierConfig from 'eslint-config-prettier';
 
 export default [
-  { ignores: ['dist', 'node_modules', 'build', '*.js'] },
-  js.configs.recommended,
-  ...tseslint.configs.recommended,
+  { ignores: ['dist', 'node_modules', 'build', '*.js', '*.cjs', 'scripts/**'] },
+  ...tseslint.configs.recommended.map((config) => ({
+    ...config,
+    files: ['src/**/*.{ts,tsx}'],
+  })),
   prettierConfig,
   {
-    files: ['**/*.{ts,tsx,js,jsx}'],
+    files: ['src/**/*.{ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,
       globals: {
         ...globals.browser,
         ...globals.node,
-        ...globals.jest,
       },
       sourceType: 'module',
       parserOptions: {
-        projectService: true,
         tsconfigRootDir: import.meta.dirname,
       },
     },
     plugins: {
       'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-      prettier: prettier,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
-      '@typescript-eslint/no-unused-vars': 'warn',
       '@typescript-eslint/no-explicit-any': 'warn',
-      '@typescript-eslint/no-floating-promises': 'warn',
-      '@typescript-eslint/no-unsafe-argument': 'warn',
-      '@typescript-eslint/explicit-function-return-type': 'warn',
-      '@typescript-eslint/explicit-module-boundary-types': 'warn',
-      '@typescript-eslint/no-unsafe-assignment': 'warn',
-      '@typescript-eslint/no-unsafe-member-access': 'warn',
-      '@typescript-eslint/no-unsafe-call': 'warn',
-      '@typescript-eslint/no-unsafe-return': 'warn',
-      '@typescript-eslint/no-inferrable-types': 'warn',
-      '@typescript-eslint/no-non-null-assertion': 'warn',
-      '@typescript-eslint/ban-ts-comment': 'warn',
-      'prettier/prettier': 'error',
+      '@typescript-eslint/no-unused-vars': 'warn',
     },
   },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.4.18",
+  "version": "0.4.19-next.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -21,13 +21,13 @@
     "dev": "tsc -w  --preserveWatchOutput",
     "dev:watch": "tsc -w  --preserveWatchOutput",
     "css-dev": "sass --watch src/style.scss:dist/style.css",
-    "lint": "eslint . --fix",
+    "lint": "npx eslint . --fix",
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "^2.5.29",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "@rimori/client": "^2.5.30",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
     "@tiptap/core": "^2.26.1",
@@ -48,13 +48,10 @@
     "tiptap-markdown": "^0.8.10"
   },
   "devDependencies": {
-    "@eslint/js": "^9.37.0",
-    "@rimori/client": "^2.5.29",
-    "@types/react": "^18.3.21",
+    "@rimori/client": "^2.5.30",
+    "@types/react": "^19.0.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react-hooks": "^7.0.0",
-    "eslint-plugin-react-refresh": "^0.4.23",
     "form-data": "^4.0.2",
     "globals": "^16.4.0",
     "node-fetch": "^3.3.2",

package/src/components/ContextMenu.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { JSX, useState, useEffect, useRef } from 'react';
 import { RimoriClient, MenuEntry } from '@rimori/client';
 
 export interface Position {

package/src/components/ai/Assistant.tsx

@@ -17,7 +17,7 @@ interface Props {
 export function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartConversation }: Props) {
   const [oralCommunication, setOralCommunication] = React.useState(true);
   const { ai: llm, event } = useRimori();
-  const sender = useMemo(() => new MessageSender(llm.getVoice, voiceId), []);
+  const sender = useMemo(() => new MessageSender(llm.getVoice, voiceId), [llm.getVoice, voiceId]);
   const { messages, append, isLoading, setMessages } = useChat();
 
   const lastAssistantMessage = [...messages].filter((m) => m.role === 'assistant').pop()?.content;

package/src/components/ai/Avatar.tsx

@@ -37,7 +37,7 @@ export function Avatar({
   promptVariables,
 }: Props) {
   const { ai, event, plugin, userInfo } = useRimori();
-  const { isDark: isDarkThemeValue } = useTheme(plugin.theme);
+  const { isDark: isDarkThemeValue } = useTheme(plugin.theme, true);
   const [agentReplying, setAgentReplying] = useState(false);
   const [isProcessingMessage, setIsProcessingMessage] = useState(false);
   const dialectTtsInstruction = userInfo?.dialect
@@ -61,6 +61,7 @@ export function Avatar({
   }, [messages]);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (!isLoading) setIsProcessingMessage(false);
   }, [isLoading]);
 
@@ -94,7 +95,9 @@ export function Avatar({
       sender.handleNewText(lastMessage.content, isLoading);
       if (lastMessage.toolCalls) {
         // console.log("unlocking mic", lastMessage)
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setAgentReplying(false);
+         
         setIsProcessingMessage(false);
       }
     }

package/src/components/ai/BuddyAssistant.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import React, { JSX, useState, useEffect, useMemo, useRef } from 'react';
 import { CircleAudioAvatar } from './EmbeddedAssistent/CircleAudioAvatar';
 import { VoiceRecorder } from './EmbeddedAssistent/VoiceRecorder';
 import { MessageSender, Tool } from '@rimori/client';
@@ -48,7 +48,7 @@ export function BuddyAssistant({
 }: BuddyAssistantProps): JSX.Element {
   const { ai, event, plugin, userInfo } = useRimori();
   const ttsEnabled = plugin.ttsEnabled;
-  const { isDark } = useTheme(plugin.theme);
+  const { isDark } = useTheme(plugin.theme, true);
   const buddy = userInfo.study_buddy;
   const dialect = userInfo?.dialect;
   const dialectTtsInstruction = dialect ? `Speak with a ${dialect} accent and pronunciation.` : undefined;
@@ -158,7 +158,7 @@ export function BuddyAssistant({
         </div>
       )}
 
-      {!ttsEnabled ? (
+      {!plugin.ttsEnabled && messages.length > 1 ? (
         <div className="w-full rounded-xl bg-gray-200/70 dark:bg-gray-800/70 px-4 py-3 text-sm text-gray-800 dark:text-gray-200 leading-relaxed border border-gray-300/40 dark:border-gray-700/40 mt-4">
           {!lastAssistantMessage?.content && isLoading ? (
             <span className="inline-flex gap-1 py-0.5">

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

@@ -19,6 +19,41 @@ export function CircleAudioAvatar({
   const targetLoudnessRef = useRef(0);
   const animationFrameRef = useRef<number | null>(null);
 
+  const draw = (
+    ctx: CanvasRenderingContext2D,
+    canvas: HTMLCanvasElement,
+    image: HTMLImageElement,
+    loudness: number,
+  ) => {
+    if (canvas && ctx) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const radius = Math.min(canvas.width, canvas.height) / 3;
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+      const pulseRadius = radius + loudness / 2.5;
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, pulseRadius, 0, Math.PI * 2, true);
+      ctx.strokeStyle = isDarkTheme ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)';
+      ctx.lineWidth = 5;
+      ctx.stroke();
+
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
+      ctx.closePath();
+      ctx.clip();
+      ctx.drawImage(image, centerX - radius, centerY - radius, radius * 2, radius * 2);
+      ctx.restore();
+
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
+      ctx.strokeStyle = isDarkTheme ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)';
+      ctx.lineWidth = 5;
+      ctx.stroke();
+    }
+  };
+
   useEffect(() => {
     const canvas = canvasRef.current;
     if (canvas) {
@@ -68,40 +103,5 @@ export function CircleAudioAvatar({
     }
   }, [imageUrl]);
 
-  const draw = (
-    ctx: CanvasRenderingContext2D,
-    canvas: HTMLCanvasElement,
-    image: HTMLImageElement,
-    loudness: number,
-  ) => {
-    if (canvas && ctx) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      const radius = Math.min(canvas.width, canvas.height) / 3;
-      const centerX = canvas.width / 2;
-      const centerY = canvas.height / 2;
-      const pulseRadius = radius + loudness / 2.5;
-      ctx.beginPath();
-      ctx.arc(centerX, centerY, pulseRadius, 0, Math.PI * 2, true);
-      ctx.strokeStyle = isDarkTheme ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)';
-      ctx.lineWidth = 5;
-      ctx.stroke();
-
-      ctx.save();
-      ctx.beginPath();
-      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
-      ctx.closePath();
-      ctx.clip();
-      ctx.drawImage(image, centerX - radius, centerY - radius, radius * 2, radius * 2);
-      ctx.restore();
-
-      ctx.beginPath();
-      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
-      ctx.strokeStyle = isDarkTheme ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)';
-      ctx.lineWidth = 5;
-      ctx.stroke();
-    }
-  };
-
   return <canvas ref={canvasRef} className={className} width={500} height={500} style={{ width }} />;
 }

package/src/components/audio/Playbutton.tsx

@@ -48,6 +48,7 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
   const eventBusListenerRef = useRef<{ off: () => void } | null>(null);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (audioUrl) setAudioUrl(null);
     return () => {
       if (audioUrl) URL.revokeObjectURL(audioUrl);
@@ -170,6 +171,7 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
     if (!playOnMount || isFetchingAudio) return;
     isFetchingAudio = true;
     // console.log("playOnMount", playOnMount);
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     togglePlayback();
   }, [playOnMount]);
 

package/src/components/editor/MarkdownEditor.tsx

@@ -153,6 +153,7 @@ const InlinePanel = ({
   useEffect(() => {
     if (panel === 'link') {
       const href = editor.getAttributes('link').href as string | undefined;
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setValue(typeof href === 'string' ? href : 'https://');
     } else {
       setValue('');

package/src/index.ts

@@ -13,3 +13,4 @@ export { VoiceRecorder } from './components/ai/EmbeddedAssistent/VoiceRecorder';
 export { MarkdownEditor } from './components/editor/MarkdownEditor';
 export type { MarkdownEditorProps, EditorLabels } from './components/editor/MarkdownEditor';
 export { extractImageUrls } from './components/editor/imageUtils';
+export { injectFederationCss } from './utils/injectFederationCss';

package/src/providers/PluginProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, ReactNode, useEffect, useState } from 'react';
+import React, { createContext, useContext, JSX, ReactNode, useEffect, useState } from 'react';
 import { EventBusHandler, RimoriClient, StandaloneClient } from '@rimori/client';
 import type { UserInfo } from '@rimori/client';
 import posthog from 'posthog-js';
@@ -9,14 +9,12 @@ import { Theme } from '@rimori/client';
 interface PluginProviderProps {
   children: ReactNode;
   pluginId: string;
+  /** Pre-constructed RimoriClient (federation mode). When provided, skips the handshake entirely. */
+  client?: RimoriClient;
+  /** Pre-loaded user info (federation mode). Required when client is provided. */
+  userInfo?: UserInfo;
   settings?: {
     disableContextMenu?: boolean;
-    disableThemeSetting?: boolean;
-    /**
-     * Skip the scrollbar detection that emits 'session.triggerScrollbarChange'.
-     * In federation mode, the host (FederatedPluginRenderer) handles this instead.
-     */
-    disableScrollbarDetection?: boolean;
   };
 }
 
@@ -27,14 +25,21 @@ interface PluginContextValue {
 
 const PluginContext = createContext<PluginContextValue | null>(null);
 
-export const PluginProvider: React.FC<PluginProviderProps> = ({ children, pluginId, settings }) => {
-  const [client, setClient] = useState<RimoriClient | null>(null);
+export const PluginProvider: React.FC<PluginProviderProps> = ({
+  children,
+  pluginId,
+  client: injectedClient,
+  userInfo: injectedUserInfo,
+  settings,
+}) => {
+  const isFederated = !!injectedClient;
+  const [client, setClient] = useState<RimoriClient | null>(injectedClient ?? null);
   const [standaloneClient, setStandaloneClient] = useState<StandaloneClient | boolean>(false);
   const [applicationMode, setApplicationMode] = useState<string | null>(null);
   const [theme, setTheme] = useState<Theme | undefined>(undefined);
-  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
+  const [userInfo, setUserInfo] = useState<UserInfo | null>(injectedUserInfo ?? null);
 
-  useTheme(theme, settings?.disableThemeSetting);
+  useTheme(theme, isFederated);
 
   // Init PostHog once per plugin iframe
   useEffect(() => {
@@ -57,6 +62,9 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
   const isSettings = applicationMode === 'settings';
 
   useEffect(() => {
+    // In federation mode the client is already ready — skip handshake
+    if (isFederated) return;
+
     initEventBus(pluginId);
 
     // Check if we're in an iframe context - if not, we're standalone
@@ -71,7 +79,6 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
     if ((!standaloneDetected && !client) || (standaloneDetected && standaloneClient === true)) {
       void RimoriClient.getInstance(pluginId).then((client) => {
         setClient(client);
-        // Set initial userInfo
         setUserInfo(client.plugin.getUserInfo());
 
         // Get applicationMode and theme from MessageChannel query params
@@ -82,7 +89,7 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
         }
       });
     }
-  }, [pluginId, standaloneClient, client]);
+  }, [pluginId, standaloneClient, client, isFederated]);
 
   // Identify user in PostHog when userInfo is available
   useEffect(() => {
@@ -96,7 +103,7 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
     if (!client) return;
 
     const unsubscribe = client.plugin.onRimoriInfoUpdate((info) => {
-      console.log('[PluginProvider] Received RimoriInfo update, updating userInfo');
+      // console.log('[PluginProvider] Received RimoriInfo update, updating userInfo + ttsEnabled:', info.ttsEnabled);
       setUserInfo(info.profile);
     });
 
@@ -106,6 +113,7 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
   useEffect(() => {
     if (!client) return;
     if (isSidebar) return; //sidebar pages should not report url changes
+    if (isFederated) return; // federation mode: host handles URL sync
 
     // react router overwrites native pushstate so it gets wrapped to detect url changes
     const originalPushState = history.pushState;
@@ -114,11 +122,11 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
       client.event.emit('session.triggerUrlChange', { url: location.hash });
       return result;
     };
-  }, [client, isSidebar]);
+  }, [client, isSidebar, isFederated]);
 
   useEffect(() => {
     if (!client) return;
-    if (settings?.disableScrollbarDetection) return;
+    if (isFederated) return;
 
     const checkScrollbar = (): void => {
       const hasScrollbar = document.documentElement.scrollHeight > window.innerHeight;
@@ -140,7 +148,7 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
       window.removeEventListener('resize', checkScrollbar);
       resizeObserver.disconnect();
     };
-  }, [client, settings?.disableScrollbarDetection]);
+  }, [client, isFederated]);
 
   if (standaloneClient instanceof StandaloneClient) {
     return (
@@ -169,9 +177,9 @@ export const useRimori = (): RimoriClient & { userInfo: UserInfo } => {
   if (context === null) {
     throw new Error('useRimori must be used within an PluginProvider');
   }
-  // Return client with userInfo at root level for easy access
-  // Maintains backwards compatibility - all client properties are still accessible
-  return Object.assign(context.client, { userInfo: context.userInfo }) as RimoriClient & { userInfo: UserInfo };
+  return Object.assign(context.client, {
+    userInfo: context.userInfo,
+  }) as RimoriClient & { userInfo: UserInfo };
 };
 
 function getUrlParam(name: string): string | null {

package/src/utils/injectFederationCss.ts

@@ -0,0 +1,25 @@
+/**
+ * Inject a plugin's Tailwind CSS into the document when a federated module loads.
+ * Inserts BEFORE existing stylesheets so rimori-main's responsive classes (e.g. md:hidden)
+ * keep higher cascade priority and are not overridden by base utility classes from the plugin.
+ *
+ * @param pluginId - Unique plugin identifier used as the <style> element id (e.g. 'rimori-plugin-translator')
+ * @param cssText - The inlined CSS string (imported via `?inline`)
+ */
+export function injectFederationCss(pluginId: string, cssText: string): void {
+  if (typeof document === 'undefined' || !cssText) return;
+
+  const id = `${pluginId}-css`;
+  if (document.getElementById(id)) return;
+
+  const style = document.createElement('style');
+  style.id = id;
+  style.textContent = cssText;
+
+  const firstStyle = document.head.querySelector('style, link[rel="stylesheet"]');
+  if (firstStyle) {
+    document.head.insertBefore(style, firstStyle);
+  } else {
+    document.head.appendChild(style);
+  }
+}