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

package/dist/components/ContextMenu.js

@@ -126,6 +126,6 @@ const ContextMenu = ({ client }) => {
             } }, index))) }));
 };
 function MenuEntryItem(props) {
-    return (_jsxs("button", { onClick: props.onClick, className: "px-4 py-2 text-left hover:bg-gray-500 dark:hover:bg-gray-600 w-full flex flex-row", children: [_jsx("span", { className: "flex-grow", children: props.iconUrl && _jsx("img", { src: props.iconUrl, alt: props.text, className: "w-4 h-4 mr-2" }) }), _jsx("span", { className: "flex-grow", children: props.text })] }));
+    return (_jsxs("button", { onClick: props.onClick, className: "px-2 md:px-4 py-2 text-left hover:bg-gray-500 dark:hover:bg-gray-600 w-full flex flex-row", children: [props.iconUrl && (_jsx("span", { className: "flex-grow", children: _jsx("img", { src: props.iconUrl, alt: props.text, className: "w-4 h-4 mr-2" }) })), _jsx("span", { className: "flex-grow", children: props.text })] }));
 }
 export default ContextMenu;

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 { isDarkTheme } from '../../hooks/ThemeSetter';
+import { useTheme } from '../../hooks/ThemeSetter';
 export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, circleSize = '300px', className, }) {
-    const { ai, event } = useRimori();
+    const { ai, event, plugin } = useRimori();
+    const { isDark: isDarkThemeValue } = useTheme(plugin.theme);
     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,2 +1,5 @@
-export declare function useTheme(theme?: string | null): boolean;
-export declare function isDarkTheme(theme?: string | null): boolean;
+import { Theme } from '@rimori/client';
+export declare function useTheme(theme?: Theme): {
+    isDark: boolean;
+    theme: Theme;
+};

package/dist/hooks/ThemeSetter.js

@@ -1,31 +1,13 @@
-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 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 };
 }
-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';
+function systenUsesDarkMode() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
 }

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

package/package.json

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

package/src/components/ContextMenu.tsx

@@ -161,11 +161,13 @@ function MenuEntryItem(props: { iconUrl?: string; text: string; onClick: () => v
   return (
     <button
       onClick={props.onClick}
-      className="px-4 py-2 text-left hover:bg-gray-500 dark:hover:bg-gray-600 w-full flex flex-row"
+      className="px-2 md:px-4 py-2 text-left hover:bg-gray-500 dark:hover:bg-gray-600 w-full flex flex-row"
     >
-      <span className="flex-grow">
-        {props.iconUrl && <img src={props.iconUrl} alt={props.text} className="w-4 h-4 mr-2" />}
-      </span>
+      {props.iconUrl && (
+        <span className="flex-grow">
+          <img src={props.iconUrl} alt={props.text} className="w-4 h-4 mr-2" />
+        </span>
+      )}
       <span className="flex-grow">{props.text}</span>
       {/* <span className="text-sm">Ctrl+Shift+xxxx</span> */}
     </button>

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

package/src/providers/PluginProvider.tsx

@@ -3,6 +3,7 @@ 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;
@@ -23,7 +24,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<string | null>(null);
+  const [theme, setTheme] = useState<Theme | undefined>(undefined);
   const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
 
   useTheme(theme);
@@ -51,10 +52,8 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
 
         // Get applicationMode and theme from MessageChannel query params
         if (!standaloneDetected) {
-          const mode = client.getQueryParam('applicationMode');
-          const themeParam = client.getQueryParam('rm_theme');
-          setApplicationMode(mode);
-          setTheme(themeParam);
+          setTheme(client.plugin.theme);
+          setApplicationMode(client.plugin.applicationMode);
           client.event.emit('self.rimori.triggerInitFinished');
         }
       });