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

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

@@ -17,5 +17,7 @@ export interface BuddyAssistantProps {
     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({ systemPrompt, autoStartConversation, circleSize, chatPlaceholder, bottomAction, className, voiceSpeed, tools, disableDialect, showName, }: BuddyAssistantProps): JSX.Element;

package/dist/components/ai/BuddyAssistant.js

@@ -5,21 +5,19 @@ 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({ systemPrompt, autoStartConversation, circleSize = '160px', chatPlaceholder, bottomAction, className, voiceSpeed = 1, tools, disableDialect = false, 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 buddy = userInfo.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 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 +25,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(() => {
@@ -94,21 +97,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.4.16",
+  "version": "0.4.17-next.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -18,14 +18,14 @@
   },
   "scripts": {
     "build": "tsc && sass src/style.scss:dist/style.css",
-    "dev": "git pull && tsc -w  --preserveWatchOutput",
+    "dev": "tsc -w  --preserveWatchOutput",
     "dev:watch": "tsc -w  --preserveWatchOutput",
     "css-dev": "sass --watch src/style.scss:dist/style.css",
     "lint": "eslint . --fix",
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "^2.5.27",
+    "@rimori/client": "2.5.28-next.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "^2.5.27",
+    "@rimori/client": "2.5.28-next.5",
     "@types/react": "^18.3.21",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",

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 };
@@ -27,6 +26,8 @@ export interface BuddyAssistantProps {
   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;
@@ -42,17 +43,17 @@ export function BuddyAssistant({
   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 buddy = userInfo.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 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 +62,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(
@@ -140,14 +146,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 +153,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 +178,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 +204,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={() => {