@rimori/react-client 0.4.2-next.1 → 0.4.2

package/dist/components/ai/Avatar.js

@@ -6,14 +6,14 @@ import { CircleAudioAvatar } from './EmbeddedAssistent/CircleAudioAvatar';
 import { useChat } from '../../hooks/UseChatHook';
 import { useRimori } from '../../providers/PluginProvider';
 import { getFirstMessages } from './utils';
-import { useTheme } from '../../hooks/ThemeSetter';
+import { isDarkTheme } from '../../hooks/ThemeSetter';
 export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, circleSize = '300px', className, }) {
-    const { ai, event, plugin } = useRimori();
-    const { isDark: isDarkThemeValue } = useTheme(plugin.theme);
+    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]);

package/dist/hooks/ThemeSetter.d.ts

@@ -1,5 +1,2 @@
-import { Theme } from '@rimori/client';
-export declare function useTheme(theme?: Theme): {
-    isDark: boolean;
-    theme: Theme;
-};
+export declare function useTheme(theme?: string | null): boolean;
+export declare function isDarkTheme(theme?: string | null): boolean;

package/dist/hooks/ThemeSetter.js

@@ -1,13 +1,31 @@
-export function useTheme(theme = 'system') {
-    const isDark = theme === 'system' ? systenUsesDarkMode() : theme === 'dark';
-    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');
-    const root = document.querySelector('#root');
-    root.style.background = 'hsl(var(--background))';
-    dom.classList[isDark ? 'add' : 'remove']('dark');
-    return { isDark, theme };
+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;
 }
-function systenUsesDarkMode() {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+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.js

@@ -17,7 +17,7 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
     const [client, setClient] = useState(null);
     const [standaloneClient, setStandaloneClient] = useState(false);
     const [applicationMode, setApplicationMode] = useState(null);
-    const [theme, setTheme] = useState(undefined);
+    const [theme, setTheme] = useState(null);
     const [userInfo, setUserInfo] = useState(null);
     useTheme(theme);
     const isSidebar = applicationMode === 'sidebar';
@@ -38,8 +38,10 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
                 setUserInfo(client.plugin.getUserInfo());
                 // Get applicationMode and theme from MessageChannel query params
                 if (!standaloneDetected) {
-                    setTheme(client.plugin.theme);
-                    setApplicationMode(client.plugin.applicationMode);
+                    const mode = client.getQueryParam('applicationMode');
+                    const themeParam = client.getQueryParam('rm_theme');
+                    setApplicationMode(mode);
+                    setTheme(themeParam);
                     client.event.emit('self.rimori.triggerInitFinished');
                 }
             });

package/package.json

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

package/src/components/ai/Avatar.tsx

@@ -7,7 +7,7 @@ import { useChat } from '../../hooks/UseChatHook';
 import { useRimori } from '../../providers/PluginProvider';
 import { getFirstMessages } from './utils';
 import { FirstMessages } from './utils';
-import { useTheme } from '../../hooks/ThemeSetter';
+import { isDarkTheme } from '../../hooks/ThemeSetter';
 
 interface Props {
   voiceId: string;
@@ -28,12 +28,12 @@ export function Avatar({
   circleSize = '300px',
   className,
 }: Props) {
-  const { ai, event, plugin } = useRimori();
-  const { isDark: isDarkThemeValue } = useTheme(plugin.theme);
+  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);

package/src/hooks/ThemeSetter.ts

@@ -1,20 +1,40 @@
-import { Theme } from '@rimori/client';
+import { useEffect, useState } from 'react';
 
-export function useTheme(theme: Theme = 'system'): { isDark: boolean; theme: Theme } {
-  const isDark = theme === 'system' ? systenUsesDarkMode() : theme === 'dark';
+export function useTheme(theme?: string | null): boolean {
+  const [isDark, setIsDark] = useState(false);
 
-  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');
+  useEffect(() => {
+    const root = document.documentElement;
+    const nextIsDark = isDarkTheme(theme);
 
-  const root = document.querySelector('#root') as HTMLDivElement;
-  root.style.background = 'hsl(var(--background))';
+    setIsDark(nextIsDark);
+    root.classList.add('dark:text-gray-200');
 
-  dom.classList[isDark ? 'add' : 'remove']('dark');
+    if (nextIsDark) {
+      root.setAttribute('data-theme', 'dark');
+      root.classList.add('dark', 'dark:bg-gray-950');
+      root.style.background = 'hsl(var(--background))';
+      return;
+    }
 
-  return { isDark, theme };
+    root.removeAttribute('data-theme');
+    root.classList.remove('dark', 'dark:bg-gray-950');
+    root.style.background = '';
+  }, [theme]);
+
+  return isDark;
 }
 
-function systenUsesDarkMode(): boolean {
-  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+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/providers/PluginProvider.tsx

@@ -3,7 +3,6 @@ import { EventBusHandler, RimoriClient, StandaloneClient } from '@rimori/client'
 import type { UserInfo } from '@rimori/client';
 import ContextMenu from '../components/ContextMenu';
 import { useTheme } from '../hooks/ThemeSetter';
-import { Theme } from '@rimori/client';
 
 interface PluginProviderProps {
   children: ReactNode;
@@ -24,7 +23,7 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
   const [client, setClient] = useState<RimoriClient | null>(null);
   const [standaloneClient, setStandaloneClient] = useState<StandaloneClient | boolean>(false);
   const [applicationMode, setApplicationMode] = useState<string | null>(null);
-  const [theme, setTheme] = useState<Theme | undefined>(undefined);
+  const [theme, setTheme] = useState<string | null>(null);
   const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
 
   useTheme(theme);
@@ -52,8 +51,10 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
 
         // Get applicationMode and theme from MessageChannel query params
         if (!standaloneDetected) {
-          setTheme(client.plugin.theme);
-          setApplicationMode(client.plugin.applicationMode);
+          const mode = client.getQueryParam('applicationMode');
+          const themeParam = client.getQueryParam('rm_theme');
+          setApplicationMode(mode);
+          setTheme(themeParam);
           client.event.emit('self.rimori.triggerInitFinished');
         }
       });