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

package/dist/components/ai/Avatar.d.ts

@@ -9,9 +9,10 @@ interface Props {
     children?: React.ReactNode;
     autoStartConversation?: FirstMessages;
     className?: string;
-    knowledgeId?: string;
-    /** Set to true to disable automatic dialect TTS from userInfo. Default: false (dialect enabled). */
-    disableDialect?: boolean;
+    /** Server-side prompt name (e.g. 'studyplan.reflection'). When set, the backend resolves the system prompt. */
+    prompt?: string;
+    /** Variables for the server-side prompt template. */
+    promptVariables?: Record<string, any>;
 }
-export declare function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, circleSize, className, cache, knowledgeId, disableDialect, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, circleSize, className, cache, prompt, promptVariables, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ai/Avatar.js

@@ -7,17 +7,22 @@ import { useChat } from '../../hooks/UseChatHook';
 import { useRimori } from '../../providers/PluginProvider';
 import { getFirstMessages } from './utils';
 import { useTheme } from '../../hooks/ThemeSetter';
-export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, circleSize = '300px', className, cache = false, knowledgeId, disableDialect = false, }) {
+export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, circleSize = '300px', className, cache = false, prompt, promptVariables, }) {
     const { ai, event, plugin, userInfo } = useRimori();
     const { isDark: isDarkThemeValue } = useTheme(plugin.theme);
     const [agentReplying, setAgentReplying] = useState(false);
     const [isProcessingMessage, setIsProcessingMessage] = useState(false);
-    const dialectTtsInstruction = !disableDialect && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.dialect) ? `Speak with a ${userInfo.dialect} accent and pronunciation.` : undefined;
+    const dialectTtsInstruction = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.dialect)
+        ? `Speak with a ${userInfo.dialect} accent and pronunciation.`
+        : undefined;
     const sender = useMemo(() => new MessageSender((...args) => ai.getVoice(...args), voiceId, cache), [voiceId, ai, cache]);
     useEffect(() => {
         sender.setInstructions(dialectTtsInstruction);
     }, [sender, dialectTtsInstruction]);
-    const { messages, append, isLoading, lastMessage, setMessages } = useChat(agentTools, { knowledgeId });
+    const { messages, append, isLoading, lastMessage, setMessages } = useChat(agentTools, {
+        prompt,
+        promptVariables,
+    });
     useEffect(() => {
         console.log('messages', messages);
     }, [messages]);

package/dist/components/ai/BuddyAssistant.d.ts

@@ -7,7 +7,10 @@ export interface BuddyAssistantAutoStart {
     userMessage?: string;
 }
 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;
@@ -15,7 +18,7 @@ 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;
 }
-export declare function BuddyAssistant({ systemPrompt, autoStartConversation, circleSize, chatPlaceholder, bottomAction, className, voiceSpeed, tools, disableDialect, }: BuddyAssistantProps): JSX.Element;
+export declare function BuddyAssistant({ prompt, promptVariables, autoStartConversation, circleSize, chatPlaceholder, bottomAction, className, voiceSpeed, tools, showName, }: BuddyAssistantProps): JSX.Element;

package/dist/components/ai/BuddyAssistant.js

@@ -5,21 +5,16 @@ import { VoiceRecorder } from './EmbeddedAssistent/VoiceRecorder';
 import { MessageSender } 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';
 let idCounter = 0;
 const genId = () => `ba-${++idCounter}`;
-export function BuddyAssistant({ systemPrompt, autoStartConversation, circleSize = '160px', chatPlaceholder, bottomAction, className, voiceSpeed = 1, tools, disableDialect = false, }) {
-    var _a;
+export function BuddyAssistant({ prompt, promptVariables, autoStartConversation, circleSize = '160px', chatPlaceholder, bottomAction, className, voiceSpeed = 1, tools, showName = false, }) {
     const { ai, event, plugin, userInfo } = useRimori();
+    const ttsEnabled = plugin.ttsEnabled;
     const { isDark } = useTheme(plugin.theme);
-    const buddy = (_a = plugin.getUserInfo()) === null || _a === void 0 ? void 0 : _a.study_buddy;
-    const dialect = !disableDialect ? userInfo === null || userInfo === void 0 ? void 0 : 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 buddy = userInfo.study_buddy;
+    const dialect = userInfo === null || userInfo === void 0 ? void 0 : 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([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -27,6 +22,11 @@ export function BuddyAssistant({ systemPrompt, autoStartConversation, circleSize
     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(() => { var _a; return new MessageSender((...args) => ai.getVoice(...args), (_a = buddy === null || buddy === void 0 ? void 0 : buddy.voiceId) !== null && _a !== void 0 ? _a : ''); }, [buddy === null || buddy === void 0 ? void 0 : buddy.voiceId, ai]);
     useEffect(() => {
@@ -39,29 +39,33 @@ export function BuddyAssistant({ systemPrompt, autoStartConversation, circleSize
         sender.setOnEndOfSpeech(() => setIsSpeaking(false));
         return () => sender.cleanup();
     }, [sender]);
-    // Build full API message list with system prompt (dialect appended when enabled)
-    const buildApiMessages = (history) => [
-        { role: 'system', content: systemPrompt + dialectSystemSuffix },
-        ...history.map((m) => ({ role: m.role, content: m.content })),
-    ];
+    const buildApiMessages = (history) => {
+        return history.map((m) => ({ role: m.role, content: m.content }));
+    };
     const triggerAI = (history) => {
         setIsLoading(true);
-        void ai.getSteamedText(buildApiMessages(history), (id, partial, finished) => {
-            setIsLoading(!finished);
-            const assistantId = `ai-${id}`;
-            setMessages((prev) => {
-                const last = prev[prev.length - 1];
-                if ((last === null || last === void 0 ? void 0 : last.id) === assistantId) {
-                    return [...prev.slice(0, -1), Object.assign(Object.assign({}, last), { content: partial })];
+        void ai.getStreamedText({
+            messages: buildApiMessages(history),
+            onMessage: (id, partial, finished) => {
+                setIsLoading(!finished);
+                const assistantId = `ai-${id}`;
+                setMessages((prev) => {
+                    const last = prev[prev.length - 1];
+                    if ((last === null || last === void 0 ? void 0 : last.id) === assistantId) {
+                        return [...prev.slice(0, -1), Object.assign(Object.assign({}, last), { content: partial })];
+                    }
+                    return [...prev, { id: assistantId, role: 'assistant', content: partial }];
+                });
+                if (ttsEnabledRef.current) {
+                    void sender.handleNewText(partial, !finished);
+                    if (partial)
+                        setIsSpeaking(true);
                 }
-                return [...prev, { id: assistantId, role: 'assistant', content: partial }];
-            });
-            if (ttsEnabledRef.current) {
-                void sender.handleNewText(partial, !finished);
-                if (partial)
-                    setIsSpeaking(true);
-            }
-        }, tools);
+            },
+            tools,
+            prompt,
+            variables: promptVariables,
+        });
     };
     // Auto-start conversation on mount
     const autoStartedRef = useRef(false);
@@ -94,21 +98,14 @@ export function BuddyAssistant({ systemPrompt, autoStartConversation, circleSize
         setMessages(newMessages);
         triggerAI(newMessages);
     };
-    const handleToggleTts = () => {
-        if (ttsEnabled && isSpeaking) {
-            sender.stop();
-            setIsSpeaking(false);
-        }
-        setTtsEnabled((prev) => !prev);
-    };
     const lastAssistantMessage = [...messages].filter((m) => m.role === 'assistant').pop();
-    return (_jsxs("div", { className: `flex flex-col items-center ${className || ''}`, children: [_jsx(CircleAudioAvatar, { width: circleSize, imageUrl: buddy.avatarUrl, isDarkTheme: isDark, className: "mx-auto" }), _jsxs("div", { className: "flex items-center gap-2 pl-10", children: [_jsx("span", { className: "text-3xl font-semibold", children: buddy.name }), _jsx("button", { type: "button", onClick: handleToggleTts, className: "p-1 rounded-md hover:bg-gray-700/50 transition-colors", title: ttsEnabled ? 'Disable voice' : 'Enable voice', children: ttsEnabled ? (_jsx(HiMiniSpeakerWave, { className: `w-5 h-5 mt-0.5 ${isSpeaking ? 'text-blue-400' : 'text-gray-300'}` })) : (_jsx(HiMiniSpeakerXMark, { className: "w-5 h-5 mt-0.5 text-gray-500" })) })] }), !ttsEnabled && (_jsx("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", children: !(lastAssistantMessage === null || lastAssistantMessage === void 0 ? void 0 : lastAssistantMessage.content) && isLoading ? (_jsxs("span", { className: "inline-flex gap-1 py-0.5", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce" }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: '0.15s' } }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: '0.3s' } })] })) : (_jsx("span", { className: "whitespace-pre-wrap", children: lastAssistantMessage === null || lastAssistantMessage === void 0 ? void 0 : lastAssistantMessage.content })) })), _jsxs("div", { className: "w-full max-w-md relative mt-4", children: [_jsx("input", { value: chatInput, onChange: (e) => setChatInput(e.target.value), onKeyDown: (e) => {
+    return (_jsxs("div", { className: `flex flex-col items-center ${className || ''}`, children: [_jsx(CircleAudioAvatar, { width: circleSize, imageUrl: buddy.avatarUrl, isDarkTheme: isDark, className: "mx-auto" }), showName && (_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-3xl font-semibold", children: buddy.name }) })), !ttsEnabled ? (_jsx("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", children: !(lastAssistantMessage === null || lastAssistantMessage === void 0 ? void 0 : lastAssistantMessage.content) && isLoading ? (_jsxs("span", { className: "inline-flex gap-1 py-0.5", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce" }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: '0.15s' } }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: '0.3s' } })] })) : (_jsx("span", { className: "whitespace-pre-wrap", children: lastAssistantMessage === null || lastAssistantMessage === void 0 ? void 0 : lastAssistantMessage.content })) })) : null, _jsxs("div", { className: 'w-full relative mt-4 ' + (ttsEnabled ? 'max-w-md' : ''), children: [_jsx("input", { value: chatInput, onChange: (e) => setChatInput(e.target.value), onKeyDown: (e) => {
                             if (e.key === 'Enter' && !e.shiftKey) {
                                 e.preventDefault();
                                 sendMessage(chatInput);
                                 setChatInput('');
                             }
-                        }, placeholder: chatPlaceholder !== null && chatPlaceholder !== void 0 ? chatPlaceholder : `Ask ${buddy.name} a question…`, disabled: isLoading, className: "w-full bg-gray-800/50 border border-gray-700 rounded-lg px-3 py-2 pr-16 text-sm text-gray-200 placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-60" }), _jsxs("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [_jsx(VoiceRecorder, { iconSize: "14", className: "p-1 text-gray-400 hover:text-white transition-colors", disabled: isLoading, onVoiceRecorded: (text) => sendMessage(text), onRecordingStatusChange: () => { } }), _jsx("div", { className: "w-px h-3.5 bg-gray-600" }), _jsx("button", { type: "button", onClick: () => {
+                        }, placeholder: chatPlaceholder !== null && chatPlaceholder !== void 0 ? chatPlaceholder : `Ask ${buddy.name} a question…`, disabled: isLoading, className: "w-full bg-gray-800/50 border border-gray-700 rounded-lg px-3 py-2 pr-16 text-sm text-gray-200 placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-60" }), _jsxs("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [_jsx(VoiceRecorder, { iconSize: "14", className: "p-1 text-gray-400 hover:text-white transition-colors", disabled: isLoading, onVoiceRecorded: (text) => sendMessage(text), onRecordingStatusChange: () => { } }), _jsx("button", { type: "button", onClick: () => {
                                     sendMessage(chatInput);
                                     setChatInput('');
                                 }, disabled: isLoading || !chatInput.trim(), className: "p-1 text-gray-400 hover:text-white disabled:opacity-40 transition-colors", children: _jsx(BiSolidRightArrow, { className: "w-4 h-4" }) })] })] }), bottomAction && _jsx("div", { className: "w-full max-w-md border-t border-gray-700/60 pt-3", children: bottomAction })] }));

package/dist/components/ai/utils.d.ts

@@ -1,8 +1,5 @@
-/** @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 declare function getFirstMessages(instructions: FirstMessages): any[];
+export declare function getFirstMessages(config: FirstMessages): any[];

package/dist/components/ai/utils.js

@@ -1,14 +1,10 @@
-/** @deprecated Use server-side prompt definitions (prompt + variables) instead of building messages client-side. */
-export function getFirstMessages(instructions) {
+export function getFirstMessages(config) {
     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/dist/components/editor/MarkdownEditor.js

@@ -250,16 +250,11 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
             return;
         const selectedText = editor.state.doc.textBetween(from, to, '\n');
         setIsTransforming(true);
-        const transformed = yield 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 = yield ai.getText({
+            messages: [],
+            prompt: 'global.editor.transform-text',
+            variables: { instruction: prompt, text: selectedText },
+        });
         setIsTransforming(false);
         if (!transformed)
             return;

package/dist/hooks/ThemeSetter.d.ts

@@ -1,5 +1,6 @@
 import { Theme } from '@rimori/client';
-export declare function useTheme(theme?: Theme): {
+export declare function useTheme(theme?: Theme, isDisabled?: boolean): {
     isDark: boolean;
     theme: Theme;
+    isDisabled: boolean;
 };

package/dist/hooks/ThemeSetter.js

@@ -1,12 +1,15 @@
-export function useTheme(theme = 'system') {
+export function useTheme(theme = 'system', isDisabled = false) {
     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';
     dom.classList[isDark ? 'add' : 'remove']('dark');
     const root = document.querySelector('#root');
     root.classList.add('dark:bg-gradient-to-br', 'dark:from-gray-900', 'dark:to-gray-800', 'dark:text-white', 'min-h-screen', 'bg-fixed');
-    return { isDark, theme };
+    return { isDark, theme, isDisabled };
 }
 function systenUsesDarkMode() {
     return window.matchMedia('(prefers-color-scheme: dark)').matches;

package/dist/hooks/UseChatHook.d.ts

@@ -8,8 +8,6 @@ export interface UseChatConfig {
     promptVariables?: Record<string, any>;
 }
 export declare 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. */

package/dist/hooks/UseChatHook.js

@@ -21,19 +21,24 @@ export function useChat(tools, options) {
         const allMessages = [...messages, ...appendMessages];
         setMessages(allMessages);
         setIsLoading(true);
-        const knowledgeId = options === null || options === void 0 ? void 0 : options.knowledgeId;
         const promptVariables = (_a = configRef.current.promptVariables) !== null && _a !== void 0 ? _a : options === null || options === void 0 ? void 0 : options.promptVariables;
         const prompt = (_b = configRef.current.prompt) !== null && _b !== void 0 ? _b : options === null || options === void 0 ? void 0 : options.prompt;
-        void ai.getSteamedText(allMessages, (id, message, finished, toolInvocations) => {
-            setIsLoading(!finished);
-            setMessages((prev) => {
-                const last = prev[prev.length - 1];
-                if ((last === null || last === void 0 ? void 0 : last.id) === id) {
-                    return [...prev.slice(0, -1), Object.assign(Object.assign({}, last), { content: message, toolCalls: toolInvocations })];
-                }
-                return [...prev, { id, role: 'assistant', content: message, toolCalls: toolInvocations }];
-            });
-        }, tools, false, undefined, knowledgeId, prompt, promptVariables);
+        void ai.getStreamedText({
+            messages: allMessages,
+            onMessage: (id, message, finished, toolInvocations) => {
+                setIsLoading(!finished);
+                setMessages((prev) => {
+                    const last = prev[prev.length - 1];
+                    if ((last === null || last === void 0 ? void 0 : last.id) === id) {
+                        return [...prev.slice(0, -1), Object.assign(Object.assign({}, last), { content: message, toolCalls: toolInvocations })];
+                    }
+                    return [...prev, { id, role: 'assistant', content: message, toolCalls: toolInvocations }];
+                });
+            },
+            tools,
+            prompt,
+            variables: promptVariables,
+        });
     };
     return {
         messages,

package/dist/providers/PluginProvider.d.ts

@@ -6,6 +6,12 @@ interface PluginProviderProps {
     pluginId: string;
     settings?: {
         disableContextMenu?: boolean;
+        disableThemeSetting?: boolean;
+        /**
+         * Skip the scrollbar detection that emits 'session.triggerScrollbarChange'.
+         * In federation mode, the host (FederatedPluginRenderer) handles this instead.
+         */
+        disableScrollbarDetection?: boolean;
     };
 }
 export declare const PluginProvider: React.FC<PluginProviderProps>;

package/dist/providers/PluginProvider.js

@@ -20,7 +20,7 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
     const [applicationMode, setApplicationMode] = useState(null);
     const [theme, setTheme] = useState(undefined);
     const [userInfo, setUserInfo] = useState(null);
-    useTheme(theme);
+    useTheme(theme, settings === null || settings === void 0 ? void 0 : settings.disableThemeSetting);
     // Init PostHog once per plugin iframe
     useEffect(() => {
         if (!posthog.__loaded) {
@@ -94,6 +94,8 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
     useEffect(() => {
         if (!client)
             return;
+        if (settings === null || settings === void 0 ? void 0 : settings.disableScrollbarDetection)
+            return;
         const checkScrollbar = () => {
             const hasScrollbar = document.documentElement.scrollHeight > window.innerHeight;
             client.event.emit('session.triggerScrollbarChange', { hasScrollbar });
@@ -109,7 +111,7 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
             window.removeEventListener('resize', checkScrollbar);
             resizeObserver.disconnect();
         };
-    }, [client]);
+    }, [client, settings === null || settings === void 0 ? void 0 : settings.disableScrollbarDetection]);
     if (standaloneClient instanceof StandaloneClient) {
         return (_jsx(StandaloneAuth, { onLogin: (email, password) => __awaiter(void 0, void 0, void 0, function* () {
                 if (yield standaloneClient.login(email, password))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.4.17",
+  "version": "0.4.18-next.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "^2.5.28",
+    "@rimori/client": "^2.5.29",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "^2.5.28",
+    "@rimori/client": "^2.5.29",
     "@types/react": "^18.3.21",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",

package/src/components/ai/Avatar.tsx

@@ -18,9 +18,10 @@ interface Props {
   children?: React.ReactNode;
   autoStartConversation?: FirstMessages;
   className?: string;
-  knowledgeId?: string;
-  /** Set to true to disable automatic dialect TTS from userInfo. Default: false (dialect enabled). */
-  disableDialect?: boolean;
+  /** Server-side prompt name (e.g. 'studyplan.reflection'). When set, the backend resolves the system prompt. */
+  prompt?: string;
+  /** Variables for the server-side prompt template. */
+  promptVariables?: Record<string, any>;
 }
 
 export function Avatar({
@@ -32,15 +33,16 @@ export function Avatar({
   circleSize = '300px',
   className,
   cache = false,
-  knowledgeId,
-  disableDialect = false,
+  prompt,
+  promptVariables,
 }: Props) {
   const { ai, event, plugin, userInfo } = useRimori();
   const { isDark: isDarkThemeValue } = useTheme(plugin.theme);
   const [agentReplying, setAgentReplying] = useState(false);
   const [isProcessingMessage, setIsProcessingMessage] = useState(false);
-  const dialectTtsInstruction =
-    !disableDialect && userInfo?.dialect ? `Speak with a ${userInfo.dialect} accent and pronunciation.` : undefined;
+  const dialectTtsInstruction = userInfo?.dialect
+    ? `Speak with a ${userInfo.dialect} accent and pronunciation.`
+    : undefined;
   const sender = useMemo(
     () => new MessageSender((...args) => ai.getVoice(...args), voiceId, cache),
     [voiceId, ai, cache],
@@ -49,7 +51,10 @@ export function Avatar({
   useEffect(() => {
     sender.setInstructions(dialectTtsInstruction);
   }, [sender, dialectTtsInstruction]);
-  const { messages, append, isLoading, lastMessage, setMessages } = useChat(agentTools, { knowledgeId });
+  const { messages, append, isLoading, lastMessage, setMessages } = useChat(agentTools, {
+    prompt,
+    promptVariables,
+  });
 
   useEffect(() => {
     console.log('messages', messages);

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 ttsEnabled = plugin.ttsEnabled;
   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 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">
+      {!ttsEnabled ? (
+        <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={() => {