@rimori/react-client 0.4.6 → 0.4.7

package/README.md

@@ -3,6 +3,7 @@
 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)
@@ -17,6 +18,7 @@ The `@rimori/react-client` package contains the React bindings for the Rimori pl
 ## 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.
@@ -35,6 +37,7 @@ Both React 18 and `@rimori/client` are peer dependencies. Keep them in sync with
 ## 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.
@@ -45,8 +48,8 @@ If you need to interact with the Rimori platform outside of React (workers, CLI,
 ## Quick Start
 
 ```tsx
-import "@rimori/react-client/dist/style.css";
-import { PluginProvider, useRimori, useChat, useTranslation } from "@rimori/react-client";
+import '@rimori/react-client/dist/style.css';
+import { PluginProvider, useRimori, useChat, useTranslation } from '@rimori/react-client';
 
 function Dashboard() {
   const client = useRimori();
@@ -54,14 +57,14 @@ function Dashboard() {
   const { messages, append, isLoading } = useChat();
 
   const send = () => {
-    append([{ role: "user", content: t("discussion.prompts.askForHelp") }]);
+    append([{ role: 'user', content: t('discussion.prompts.askForHelp') }]);
   };
 
   return (
     <div>
-      <h1>{t("discussion.title")}</h1>
+      <h1>{t('discussion.title')}</h1>
       <button onClick={send} disabled={isLoading}>
-        {t("common.buttons.getStarted")}
+        {t('common.buttons.getStarted')}
       </button>
       <pre>{JSON.stringify(messages, null, 2)}</pre>
       <p>{client.plugin.pluginId}</p>
@@ -82,7 +85,7 @@ export function App() {
 
 - `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.
+- `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. If you pass a non-key string (does not match `segment.segment` with at least one dot), the runtime will translate it via AI and cache the result.
 
 ## Components
 
@@ -99,7 +102,7 @@ All components require being rendered inside `PluginProvider` so they can reach
 Import the generated stylesheet once in your app entry point:
 
 ```ts
-import "@rimori/react-client/dist/style.css";
+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.
@@ -115,7 +118,7 @@ The stylesheet contains base styles for the assistant components and ensures the
 ## Example
 
 ```tsx
-import { PluginProvider, Assistant, useRimori } from "@rimori/react-client";
+import { PluginProvider, Assistant, useRimori } from '@rimori/react-client';
 
 function AssistantPanel() {
   const client = useRimori();
@@ -124,7 +127,7 @@ function AssistantPanel() {
     <div className="assistant-panel">
       <Assistant
         placeholderKey="discussion.input.placeholder"
-        onMessage={(message) => client.event.emit("self.discussion.onAssistantMessage", { message })}
+        onMessage={(message) => client.event.emit('self.discussion.onAssistantMessage', { message })}
       />
     </div>
   );

package/dist/hooks/I18nHooks.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useRimori } from '../providers/PluginProvider';
 /**
  * Custom useTranslation hook that provides a translation function and indicates readiness
@@ -7,19 +7,22 @@ import { useRimori } from '../providers/PluginProvider';
 export function useTranslation() {
     const { plugin } = useRimori();
     const [translatorInstance, setTranslatorInstance] = useState(null);
+    const [updateCount, setUpdateCount] = useState(0);
     useEffect(() => {
-        void plugin.getTranslator().then(setTranslatorInstance);
+        void plugin.getTranslator().then((translator) => {
+            setTranslatorInstance(translator);
+            translator.onLanguageChanged(() => setUpdateCount(updateCount + 1));
+        });
     }, [plugin]);
-    const safeT = (key, options) => {
+    const safeT = useCallback((key, options) => {
         // return zero-width space if translator is not initialized to keep text space occupied
         if (!translatorInstance)
             return '\u200B'; // zero-width space
         const result = translatorInstance.t(key, options);
         if (!result) {
-            console.error(`Translation key not found: ${key}`);
             return '\u200B'; // zero-width space
         }
         return result;
-    };
+    }, [translatorInstance, updateCount]);
     return { t: safeT, ready: translatorInstance !== null };
 }

package/dist/hooks/ThemeSetter.js

@@ -3,6 +3,8 @@ export function useTheme(theme = 'system') {
     const dom = document.documentElement;
     dom.style.background = 'hsl(var(--background))';
     dom.classList.add('text-gray-900', 'dark:text-gray-200', 'bg-gray-50', 'dark:bg-gray-950');
+    dom.dataset.theme = isDark ? 'dark' : 'light';
+    dom.style.colorScheme = isDark ? 'dark' : 'light';
     const root = document.querySelector('#root');
     root.style.background = 'hsl(var(--background))';
     dom.classList[isDark ? 'add' : 'remove']('dark');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "^2.5.8",
+    "@rimori/client": "^2.5.10",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "^2.5.8",
+    "@rimori/client": "^2.5.10",
     "@types/react": "^18.3.21",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",

package/src/hooks/I18nHooks.ts

@@ -1,5 +1,5 @@
 import { TOptions } from '@rimori/client';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Translator } from '@rimori/client';
 import { useRimori } from '../providers/PluginProvider';
 
@@ -12,22 +12,28 @@ type TranslatorFn = (key: string, options?: TOptions) => string;
 export function useTranslation(): { t: TranslatorFn; ready: boolean } {
   const { plugin } = useRimori();
   const [translatorInstance, setTranslatorInstance] = useState<Translator | null>(null);
+  const [updateCount, setUpdateCount] = useState(0);
 
   useEffect(() => {
-    void plugin.getTranslator().then(setTranslatorInstance);
+    void plugin.getTranslator().then((translator) => {
+      setTranslatorInstance(translator);
+      translator.onLanguageChanged(() => setUpdateCount(updateCount + 1));
+    });
   }, [plugin]);
 
-  const safeT = (key: string, options?: TOptions): string => {
-    // return zero-width space if translator is not initialized to keep text space occupied
-    if (!translatorInstance) return '\u200B'; // zero-width space
+  const safeT = useCallback(
+    (key: string, options?: TOptions): string => {
+      // return zero-width space if translator is not initialized to keep text space occupied
+      if (!translatorInstance) return '\u200B'; // zero-width space
 
-    const result = translatorInstance.t(key, options);
-    if (!result) {
-      console.error(`Translation key not found: ${key}`);
-      return '\u200B'; // zero-width space
-    }
-    return result;
-  };
+      const result = translatorInstance.t(key, options);
+      if (!result) {
+        return '\u200B'; // zero-width space
+      }
+      return result;
+    },
+    [translatorInstance, updateCount],
+  );
 
   return { t: safeT, ready: translatorInstance !== null };
 }

package/src/hooks/ThemeSetter.ts

@@ -6,6 +6,8 @@ export function useTheme(theme: Theme = 'system'): { isDark: boolean; theme: The
   const dom = document.documentElement;
   dom.style.background = 'hsl(var(--background))';
   dom.classList.add('text-gray-900', 'dark:text-gray-200', 'bg-gray-50', 'dark:bg-gray-950');
+  dom.dataset.theme = isDark ? 'dark' : 'light';
+  dom.style.colorScheme = isDark ? 'dark' : 'light';
 
   const root = document.querySelector('#root') as HTMLDivElement;
   root.style.background = 'hsl(var(--background))';