@rimori/react-client 0.4.0-next.1 → 0.4.0-next.3

package/dist/components/audio/Playbutton.js

@@ -125,7 +125,7 @@ export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, in
         // console.log("playOnMount", playOnMount);
         togglePlayback();
     }, [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))) })] }))] }) }));
+    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: "25px" })) : 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/providers/PluginProvider.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { RimoriClient } from '@rimori/client';
+import type { UserInfo } from '@rimori/client';
 interface PluginProviderProps {
     children: ReactNode;
     pluginId: string;
@@ -8,5 +9,7 @@ interface PluginProviderProps {
     };
 }
 export declare const PluginProvider: React.FC<PluginProviderProps>;
-export declare const useRimori: () => RimoriClient;
+export declare const useRimori: () => RimoriClient & {
+    userInfo: UserInfo;
+};
 export {};

package/dist/providers/PluginProvider.js

@@ -18,6 +18,7 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
     const [standaloneClient, setStandaloneClient] = useState(false);
     const [applicationMode, setApplicationMode] = useState(null);
     const [theme, setTheme] = useState(null);
+    const [userInfo, setUserInfo] = useState(null);
     useTheme(theme);
     const isSidebar = applicationMode === 'sidebar';
     const isSettings = applicationMode === 'settings';
@@ -33,6 +34,8 @@ 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) {
                     const mode = client.getQueryParam('applicationMode');
@@ -44,6 +47,16 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
             });
         }
     }, [pluginId, standaloneClient, client]);
+    // Listen for RimoriInfo updates and update userInfo
+    useEffect(() => {
+        if (!client)
+            return;
+        const unsubscribe = client.plugin.onRimoriInfoUpdate((info) => {
+            console.log('[PluginProvider] Received RimoriInfo update, updating userInfo');
+            setUserInfo(info.profile);
+        });
+        return () => unsubscribe();
+    }, [client]);
     useEffect(() => {
         if (!client)
             return;
@@ -63,17 +76,19 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
                     setStandaloneClient(true);
             }) }));
     }
-    if (!client) {
+    if (!client || !userInfo) {
         return '';
     }
-    return (_jsxs(PluginContext.Provider, { value: client, children: [!(settings === null || settings === void 0 ? void 0 : settings.disableContextMenu) && !isSidebar && !isSettings && _jsx(ContextMenu, { client: client }), children] }));
+    return (_jsxs(PluginContext.Provider, { value: { client, userInfo }, children: [!(settings === null || settings === void 0 ? void 0 : settings.disableContextMenu) && !isSidebar && !isSettings && _jsx(ContextMenu, { client: client }), children] }));
 };
 export const useRimori = () => {
     const context = useContext(PluginContext);
     if (context === null) {
         throw new Error('useRimori must be used within an PluginProvider');
     }
-    return context;
+    // 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 });
 };
 function getUrlParam(name) {
     // First try to get from URL hash query params (for compatibility)

package/package.json

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

package/src/components/audio/Playbutton.tsx

@@ -152,8 +152,14 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
     <div className="group relative">
       <div className="flex flex-row items-end">
         {!hide && (
-          <button className="text-gray-500" onClick={togglePlayback} disabled={isLoading}>
-            {isLoading ? <Spinner /> : isPlaying ? <FaStopCircle size={'25px'} /> : <FaPlayCircle size={'25px'} />}
+          <button className="text-gray-400" onClick={togglePlayback} disabled={isLoading}>
+            {isLoading ? (
+              <Spinner size="25px" />
+            ) : isPlaying ? (
+              <FaStopCircle size="25px" />
+            ) : (
+              <FaPlayCircle size="25px" />
+            )}
           </button>
         )}
         {enableSpeedAdjustment && (

package/src/providers/PluginProvider.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, ReactNode, useEffect, useState } from 'react';
 import { EventBusHandler, RimoriClient, StandaloneClient } from '@rimori/client';
+import type { UserInfo } from '@rimori/client';
 import ContextMenu from '../components/ContextMenu';
 import { useTheme } from '../hooks/ThemeSetter';
 
@@ -11,13 +12,19 @@ interface PluginProviderProps {
   };
 }
 
-const PluginContext = createContext<RimoriClient | null>(null);
+interface PluginContextValue {
+  client: RimoriClient;
+  userInfo: UserInfo;
+}
+
+const PluginContext = createContext<PluginContextValue | null>(null);
 
 export const PluginProvider: React.FC<PluginProviderProps> = ({ children, pluginId, settings }) => {
   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 [userInfo, setUserInfo] = useState<UserInfo | null>(null);
 
   useTheme(theme);
 
@@ -39,6 +46,9 @@ 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
         if (!standaloneDetected) {
           const mode = client.getQueryParam('applicationMode');
@@ -51,6 +61,18 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
     }
   }, [pluginId, standaloneClient, client]);
 
+  // Listen for RimoriInfo updates and update userInfo
+  useEffect(() => {
+    if (!client) return;
+
+    const unsubscribe = client.plugin.onRimoriInfoUpdate((info) => {
+      console.log('[PluginProvider] Received RimoriInfo update, updating userInfo');
+      setUserInfo(info.profile);
+    });
+
+    return (): void => unsubscribe();
+  }, [client]);
+
   useEffect(() => {
     if (!client) return;
     if (isSidebar) return; //sidebar pages should not report url changes
@@ -74,24 +96,26 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
     );
   }
 
-  if (!client) {
+  if (!client || !userInfo) {
     return '';
   }
 
   return (
-    <PluginContext.Provider value={client}>
+    <PluginContext.Provider value={{ client, userInfo }}>
       {!settings?.disableContextMenu && !isSidebar && !isSettings && <ContextMenu client={client} />}
       {children}
     </PluginContext.Provider>
   );
 };
 
-export const useRimori = () => {
+export const useRimori = (): RimoriClient & { userInfo: UserInfo } => {
   const context = useContext(PluginContext);
   if (context === null) {
     throw new Error('useRimori must be used within an PluginProvider');
   }
-  return context;
+  // 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 };
 };
 
 function getUrlParam(name: string): string | null {