@rimori/react-client 0.4.17 → 0.4.18-next.1

package/src/components/ai/BuddyAssistant.tsx

@@ -4,7 +4,6 @@ import { VoiceRecorder } from './EmbeddedAssistent/VoiceRecorder';
 import { MessageSender, Tool } from '@rimori/client';
 import { useRimori } from '../../providers/PluginProvider';
 import { useTheme } from '../../hooks/ThemeSetter';
-import { HiMiniSpeakerWave, HiMiniSpeakerXMark } from 'react-icons/hi2';
 import { BiSolidRightArrow } from 'react-icons/bi';
 
 type ChatMessage = { id: string; role: 'user' | 'assistant'; content: string };
@@ -17,7 +16,10 @@ export interface BuddyAssistantAutoStart {
 }
 
 export interface BuddyAssistantProps {
-  systemPrompt: string;
+  /** Server-side prompt name (e.g. 'studyplan.goalSummary'). The backend resolves the system prompt. */
+  prompt: string;
+  /** Variables for the server-side prompt template. */
+  promptVariables?: Record<string, any>;
   autoStartConversation?: BuddyAssistantAutoStart;
   circleSize?: string;
   chatPlaceholder?: string;
@@ -25,15 +27,16 @@ export interface BuddyAssistantProps {
   className?: string;
   voiceSpeed?: number;
   tools?: Tool[];
-  /** Set to true to disable automatic dialect from userInfo. Default: false (dialect enabled). */
-  disableDialect?: boolean;
+  /** Show the buddy name below the avatar. Default: false. */
+  showName?: boolean;
 }
 
 let idCounter = 0;
 const genId = () => `ba-${++idCounter}`;
 
 export function BuddyAssistant({
-  systemPrompt,
+  prompt,
+  promptVariables,
   autoStartConversation,
   circleSize = '160px',
   chatPlaceholder,
@@ -41,18 +44,14 @@ export function BuddyAssistant({
   className,
   voiceSpeed = 1,
   tools,
-  disableDialect = false,
+  showName = false,
 }: BuddyAssistantProps): JSX.Element {
   const { ai, event, plugin, userInfo } = useRimori();
-  const { isDark } = useTheme(plugin.theme);
-  const buddy = plugin.getUserInfo()?.study_buddy;
-  const dialect = !disableDialect ? userInfo?.dialect : undefined;
-  const dialectSystemSuffix = dialect
-    ? `\n\nThe user is learning the regional ${dialect} dialect. Occasionally use typical regional vocabulary and expressions from this dialect to help them learn local language naturally.`
-    : '';
+  const ttsEnabled = plugin.ttsEnabled;
+  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;
-
-  const [ttsEnabled, setTtsEnabled] = useState(true);
   const [chatInput, setChatInput] = useState('');
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -61,6 +60,11 @@ export function BuddyAssistant({
   const ttsEnabledRef = useRef(ttsEnabled);
   useEffect(() => {
     ttsEnabledRef.current = ttsEnabled;
+    // Stop speaking when TTS is turned off globally
+    if (!ttsEnabled && isSpeaking) {
+      sender.stop();
+      setIsSpeaking(false);
+    }
   }, [ttsEnabled]);
 
   const sender = useMemo(
@@ -80,17 +84,15 @@ export function BuddyAssistant({
     return () => sender.cleanup();
   }, [sender]);
 
-  // Build full API message list with system prompt (dialect appended when enabled)
-  const buildApiMessages = (history: ChatMessage[]) => [
-    { role: 'system' as const, content: systemPrompt + dialectSystemSuffix },
-    ...history.map((m) => ({ role: m.role, content: m.content })),
-  ];
+  const buildApiMessages = (history: ChatMessage[]) => {
+    return history.map((m) => ({ role: m.role, content: m.content }));
+  };
 
   const triggerAI = (history: ChatMessage[]) => {
     setIsLoading(true);
-    void ai.getSteamedText(
-      buildApiMessages(history),
-      (id: string, partial: string, finished: boolean) => {
+    void ai.getStreamedText({
+      messages: buildApiMessages(history),
+      onMessage: (id: string, partial: string, finished: boolean) => {
         setIsLoading(!finished);
         const assistantId = `ai-${id}`;
         setMessages((prev) => {
@@ -106,7 +108,9 @@ export function BuddyAssistant({
         }
       },
       tools,
-    );
+      prompt,
+      variables: promptVariables,
+    });
   };
 
   // Auto-start conversation on mount
@@ -140,14 +144,6 @@ export function BuddyAssistant({
     triggerAI(newMessages);
   };
 
-  const handleToggleTts = () => {
-    if (ttsEnabled && isSpeaking) {
-      sender.stop();
-      setIsSpeaking(false);
-    }
-    setTtsEnabled((prev) => !prev);
-  };
-
   const lastAssistantMessage = [...messages].filter((m) => m.role === 'assistant').pop();
 
   return (
@@ -155,26 +151,15 @@ export function BuddyAssistant({
       {/* Animated circle avatar */}
       <CircleAudioAvatar width={circleSize} imageUrl={buddy.avatarUrl} isDarkTheme={isDark} className="mx-auto" />
 
-      {/* Buddy name + TTS toggle */}
-      <div className="flex items-center gap-2 pl-10">
-        <span className="text-3xl font-semibold">{buddy.name}</span>
-        <button
-          type="button"
-          onClick={handleToggleTts}
-          className="p-1 rounded-md hover:bg-gray-700/50 transition-colors"
-          title={ttsEnabled ? 'Disable voice' : 'Enable voice'}
-        >
-          {ttsEnabled ? (
-            <HiMiniSpeakerWave className={`w-5 h-5 mt-0.5 ${isSpeaking ? 'text-blue-400' : 'text-gray-300'}`} />
-          ) : (
-            <HiMiniSpeakerXMark className="w-5 h-5 mt-0.5 text-gray-500" />
-          )}
-        </button>
-      </div>
+      {/* Buddy name (hidden by default) */}
+      {showName && (
+        <div className="flex items-center gap-2">
+          <span className="text-3xl font-semibold">{buddy.name}</span>
+        </div>
+      )}
 
-      {/* Last buddy message card — only shown when TTS is disabled */}
-      {!ttsEnabled && (
-        <div className="w-full max-w-md rounded-xl bg-gray-800/70 px-4 py-3 text-sm text-gray-200 leading-relaxed border border-gray-700/40 mt-4">
+      {!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">
               <span className="w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce" />
@@ -191,10 +176,10 @@ export function BuddyAssistant({
             <span className="whitespace-pre-wrap">{lastAssistantMessage?.content}</span>
           )}
         </div>
-      )}
+      ) : null}
 
       {/* Chat input */}
-      <div className="w-full max-w-md relative mt-4">
+      <div className={'w-full relative mt-4 ' + (ttsEnabled ? 'max-w-md' : '')}>
         <input
           value={chatInput}
           onChange={(e) => setChatInput(e.target.value)}
@@ -217,7 +202,7 @@ export function BuddyAssistant({
             onVoiceRecorded={(text) => sendMessage(text)}
             onRecordingStatusChange={() => {}}
           />
-          <div className="w-px h-3.5 bg-gray-600" />
+          {/* <div className="w-px h-3.5 bg-gray-600" /> */}
           <button
             type="button"
             onClick={() => {

package/src/components/ai/utils.ts

@@ -1,22 +1,16 @@
-/** @deprecated Use server-side prompt definitions (prompt + variables) instead of building messages client-side. */
 export interface FirstMessages {
-  instructions?: string;
   userMessage?: string;
   assistantMessage?: string;
 }
 
-/** @deprecated Use server-side prompt definitions (prompt + variables) instead of building messages client-side. */
-export function getFirstMessages(instructions: FirstMessages): any[] {
+export function getFirstMessages(config: FirstMessages): any[] {
   const messages = [];
 
-  if (instructions.instructions) {
-    messages.push({ id: '1', role: 'system', content: instructions.instructions });
+  if (config.userMessage) {
+    messages.push({ id: '1', role: 'user', content: config.userMessage });
   }
-  if (instructions.userMessage) {
-    messages.push({ id: '2', role: 'user', content: instructions.userMessage });
-  }
-  if (instructions.assistantMessage) {
-    messages.push({ id: '3', role: 'assistant', content: instructions.assistantMessage });
+  if (config.assistantMessage) {
+    messages.push({ id: '2', role: 'assistant', content: config.assistantMessage });
   }
 
   return messages;

package/src/components/editor/MarkdownEditor.tsx

@@ -717,17 +717,11 @@ export const MarkdownEditor = ({
       if (from === to) return;
       const selectedText = editor.state.doc.textBetween(from, to, '\n');
       setIsTransforming(true);
-      const transformed = await ai.getText([
-        {
-          role: 'system',
-          content:
-            'You are a text editor assistant. Transform the provided text according to the user instruction. Return only the transformed text, no explanations. If formattation is wished, use markdown syntax in the output.',
-        },
-        {
-          role: 'user',
-          content: `Instruction: ${prompt}\n\nText:\n${selectedText}`,
-        },
-      ]);
+      const transformed = await ai.getText({
+        messages: [],
+        prompt: 'global.editor.transform-text',
+        variables: { instruction: prompt, text: selectedText },
+      });
       setIsTransforming(false);
       if (!transformed) return;
       editor.chain().focus().deleteRange({ from, to }).insertContentAt(from, transformed).run();

package/src/hooks/ThemeSetter.ts

@@ -1,8 +1,15 @@
 import { Theme } from '@rimori/client';
 
-export function useTheme(theme: Theme = 'system'): { isDark: boolean; theme: Theme } {
+export function useTheme(
+  theme: Theme = 'system',
+  isDisabled = false,
+): { isDark: boolean; theme: Theme; isDisabled: boolean } {
   const isDark = theme === 'system' ? systenUsesDarkMode() : theme === 'dark';
 
+  if (isDisabled) {
+    return { isDark, theme, isDisabled };
+  }
+
   const dom = document.documentElement;
   dom.dataset.theme = isDark ? 'dark' : 'light';
   dom.style.colorScheme = isDark ? 'dark' : 'light';
@@ -19,7 +26,7 @@ export function useTheme(theme: Theme = 'system'): { isDark: boolean; theme: The
     'bg-fixed',
   );
 
-  return { isDark, theme };
+  return { isDark, theme, isDisabled };
 }
 
 function systenUsesDarkMode(): boolean {

package/src/hooks/UseChatHook.ts

@@ -13,8 +13,6 @@ export interface UseChatConfig {
 export function useChat(
   tools?: Tool[],
   options?: {
-    /** @deprecated Use uuid variable with resolver 'knowledgeEntry' in prompt definitions instead. */
-    knowledgeId?: string;
     /** Server-side prompt name (e.g. 'storytelling.story'). When set, the backend resolves the system prompt. */
     prompt?: string;
     /** Variables for the server-side prompt template. */
@@ -42,13 +40,12 @@ export function useChat(
     const allMessages = [...messages, ...appendMessages];
     setMessages(allMessages);
     setIsLoading(true);
-    const knowledgeId = options?.knowledgeId;
     const promptVariables = configRef.current.promptVariables ?? options?.promptVariables;
     const prompt = configRef.current.prompt ?? options?.prompt;
 
-    void ai.getSteamedText(
-      allMessages,
-      (id, message, finished: boolean, toolInvocations?: ToolInvocation[]) => {
+    void ai.getStreamedText({
+      messages: allMessages,
+      onMessage: (id, message, finished: boolean, toolInvocations?: ToolInvocation[]) => {
         setIsLoading(!finished);
         setMessages((prev) => {
           const last = prev[prev.length - 1];
@@ -59,12 +56,9 @@ export function useChat(
         });
       },
       tools,
-      false,
-      undefined,
-      knowledgeId,
       prompt,
-      promptVariables,
-    );
+      variables: promptVariables,
+    });
   };
 
   return {

package/src/providers/PluginProvider.tsx

@@ -9,6 +9,10 @@ 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;
   };
@@ -21,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);
+  useTheme(theme, isFederated);
 
   // Init PostHog once per plugin iframe
   useEffect(() => {
@@ -51,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
@@ -65,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
@@ -76,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(() => {
@@ -90,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);
     });
 
@@ -100,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;
@@ -108,10 +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 (isFederated) return;
 
     const checkScrollbar = (): void => {
       const hasScrollbar = document.documentElement.scrollHeight > window.innerHeight;
@@ -133,7 +148,7 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
       window.removeEventListener('resize', checkScrollbar);
       resizeObserver.disconnect();
     };
-  }, [client]);
+  }, [client, isFederated]);
 
   if (standaloneClient instanceof StandaloneClient) {
     return (
@@ -162,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 {