@rimori/react-client 0.4.11-next.2 → 0.4.11

package/dist/components/audio/Playbutton.d.ts

@@ -9,7 +9,6 @@ type AudioPlayerProps = {
     initialSpeed?: number;
     enableSpeedAdjustment?: boolean;
     playListenerEvent?: string;
-    size?: string;
 };
 export declare const AudioPlayOptions: number[];
 export type AudioPlayOptionType = 0.8 | 0.9 | 1.0 | 1.1 | 1.2 | 1.5;

package/dist/components/audio/Playbutton.js

@@ -14,7 +14,7 @@ import { useRimori } from '../../providers/PluginProvider';
 import { EventBus } from '@rimori/client';
 export const AudioPlayOptions = [0.8, 0.9, 1.0, 1.1, 1.2, 1.5];
 let isFetchingAudio = false;
-export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, initialSpeed = 1.0, playOnMount = false, enableSpeedAdjustment = false, cache = true, size = '25px', }) => {
+export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, initialSpeed = 1.0, playOnMount = false, enableSpeedAdjustment = false, cache = true, }) => {
     const [audioUrl, setAudioUrl] = useState(null);
     const [speed, setSpeed] = useState(initialSpeed);
     const [isPlaying, setIsPlaying] = useState(false);
@@ -129,7 +129,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-400", onClick: togglePlayback, disabled: isLoading, children: isLoading ? (_jsx(Spinner, { size: size })) : isPlaying ? (_jsx(FaStopCircle, { size: size })) : (_jsx(FaPlayCircle, { size: size })) })), 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/components/editor/MarkdownEditor.js

@@ -12,7 +12,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRimori } from '../../providers/PluginProvider';
 import { Markdown } from 'tiptap-markdown';
 import StarterKit from '@tiptap/starter-kit';
-import { Paragraph } from '@tiptap/extension-paragraph';
 import Table from '@tiptap/extension-table';
 import TableCell from '@tiptap/extension-table-cell';
 import TableHeader from '@tiptap/extension-table-header';
@@ -27,28 +26,6 @@ import { AiOutlineUnorderedList } from 'react-icons/ai';
 import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink, LuUnlink } from 'react-icons/lu';
 import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
 import { ImageUploadExtension, triggerImageUpload } from './ImageUploadExtension';
-// Extends TipTap's Paragraph to serialize empty paragraphs as <p></p>.
-// Standard markdown collapses consecutive blank lines, losing empty paragraph nodes.
-// Since tiptap-markdown enables html:true by default, <p></p> survives the round-trip.
-const ParagraphPreserveEmpty = Paragraph.extend({
-    addStorage() {
-        return {
-            markdown: {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                serialize(state, node) {
-                    if (node.childCount === 0) {
-                        state.write('<p></p>');
-                    }
-                    else {
-                        state.renderInline(node);
-                    }
-                    state.closeBlock(node);
-                },
-                parse: {},
-            },
-        };
-    },
-});
 function getMarkdown(editor) {
     return editor.storage.markdown.getMarkdown();
 }
@@ -183,8 +160,7 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
         return data.url;
     }), [storage]);
     const extensions = useMemo(() => [
-        StarterKit.configure({ paragraph: false }),
-        ParagraphPreserveEmpty,
+        StarterKit,
         Table.configure({ resizable: false }),
         TableRow,
         TableHeader,
@@ -208,8 +184,7 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(markdown);
         },
     });
-    // Sync external content changes (e.g. AI autofill) without triggering update loop.
-    // Pass false to setContent to prevent onUpdate from firing and re-normalizing the content.
+    // Sync external content changes (e.g. AI autofill) without triggering update loop
     useEffect(() => {
         if (!editor)
             return;
@@ -217,7 +192,7 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
         if (incoming === lastEmittedRef.current)
             return;
         lastEmittedRef.current = incoming;
-        editor.commands.setContent(incoming, false);
+        editor.commands.setContent(incoming);
     }, [editor, content]);
     // Sync editable prop
     useEffect(() => {

package/dist/index.d.ts

@@ -5,8 +5,6 @@ export * from './components/ai/Avatar';
 export { FirstMessages } from './components/ai/utils';
 export { useTranslation } from './hooks/I18nHooks';
 export { Avatar } from './components/ai/Avatar';
-export { BuddyAssistant } from './components/ai/BuddyAssistant';
-export type { BuddyAssistantProps, BuddyAssistantAutoStart } from './components/ai/BuddyAssistant';
 export { VoiceRecorder } from './components/ai/EmbeddedAssistent/VoiceRecorder';
 export { MarkdownEditor } from './components/editor/MarkdownEditor';
 export type { MarkdownEditorProps, EditorLabels } from './components/editor/MarkdownEditor';

package/dist/index.js

@@ -5,7 +5,6 @@ export * from './components/audio/Playbutton';
 export * from './components/ai/Avatar';
 export { useTranslation } from './hooks/I18nHooks';
 export { Avatar } from './components/ai/Avatar';
-export { BuddyAssistant } from './components/ai/BuddyAssistant';
 export { VoiceRecorder } from './components/ai/EmbeddedAssistent/VoiceRecorder';
 export { MarkdownEditor } from './components/editor/MarkdownEditor';
 export { extractImageUrls } from './components/editor/imageUtils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.4.11-next.2",
+  "version": "0.4.11",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "2.5.19-next.5",
+    "@rimori/client": "^2.5.19",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
@@ -32,7 +32,6 @@
     "@tiptap/core": "^2.26.1",
     "@tiptap/extension-image": "^2.26.1",
     "@tiptap/extension-link": "^2.26.1",
-    "@tiptap/extension-paragraph": "^2.26.1",
     "@tiptap/extension-table": "^2.26.1",
     "@tiptap/extension-table-cell": "^2.26.1",
     "@tiptap/extension-table-header": "^2.26.1",
@@ -47,7 +46,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "2.5.19-next.5",
+    "@rimori/client": "^2.5.19",
     "@types/react": "^18.3.21",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",

package/src/components/audio/Playbutton.tsx

@@ -13,7 +13,6 @@ type AudioPlayerProps = {
   initialSpeed?: number;
   enableSpeedAdjustment?: boolean;
   playListenerEvent?: string;
-  size?: string;
 };
 
 export const AudioPlayOptions = [0.8, 0.9, 1.0, 1.1, 1.2, 1.5];
@@ -31,7 +30,6 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
   playOnMount = false,
   enableSpeedAdjustment = false,
   cache = true,
-  size = '25px',
 }) => {
   const [audioUrl, setAudioUrl] = useState<string | null>(null);
   const [speed, setSpeed] = useState(initialSpeed);
@@ -163,11 +161,11 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
         {!hide && (
           <button className="text-gray-400" onClick={togglePlayback} disabled={isLoading}>
             {isLoading ? (
-              <Spinner size={size} />
+              <Spinner size="25px" />
             ) : isPlaying ? (
-              <FaStopCircle size={size} />
+              <FaStopCircle size="25px" />
             ) : (
-              <FaPlayCircle size={size} />
+              <FaPlayCircle size="25px" />
             )}
           </button>
         )}

package/src/components/editor/MarkdownEditor.tsx

@@ -2,7 +2,6 @@ import { JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRimori } from '../../providers/PluginProvider';
 import { Markdown } from 'tiptap-markdown';
 import StarterKit from '@tiptap/starter-kit';
-import { Paragraph } from '@tiptap/extension-paragraph';
 import Table from '@tiptap/extension-table';
 import TableCell from '@tiptap/extension-table-cell';
 import TableHeader from '@tiptap/extension-table-header';
@@ -29,28 +28,6 @@ import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink, LuUnlink
 import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
 import { ImageUploadExtension, triggerImageUpload } from './ImageUploadExtension';
 
-// Extends TipTap's Paragraph to serialize empty paragraphs as <p></p>.
-// Standard markdown collapses consecutive blank lines, losing empty paragraph nodes.
-// Since tiptap-markdown enables html:true by default, <p></p> survives the round-trip.
-const ParagraphPreserveEmpty = Paragraph.extend({
-  addStorage() {
-    return {
-      markdown: {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        serialize(state: any, node: any) {
-          if (node.childCount === 0) {
-            state.write('<p></p>');
-          } else {
-            state.renderInline(node);
-          }
-          state.closeBlock(node);
-        },
-        parse: {},
-      },
-    };
-  },
-});
-
 function getMarkdown(editor: Editor): string {
   return (editor.storage as { markdown: { getMarkdown: () => string } }).markdown.getMarkdown();
 }
@@ -582,8 +559,7 @@ export const MarkdownEditor = ({
 
   const extensions = useMemo(
     () => [
-      StarterKit.configure({ paragraph: false }),
-      ParagraphPreserveEmpty,
+      StarterKit,
       Table.configure({ resizable: false }),
       TableRow,
       TableHeader,
@@ -611,14 +587,13 @@ export const MarkdownEditor = ({
     },
   });
 
-  // Sync external content changes (e.g. AI autofill) without triggering update loop.
-  // Pass false to setContent to prevent onUpdate from firing and re-normalizing the content.
+  // Sync external content changes (e.g. AI autofill) without triggering update loop
   useEffect(() => {
     if (!editor) return;
     const incoming = content ?? '';
     if (incoming === lastEmittedRef.current) return;
     lastEmittedRef.current = incoming;
-    editor.commands.setContent(incoming, false);
+    editor.commands.setContent(incoming);
   }, [editor, content]);
 
   // Sync editable prop

package/src/index.ts

@@ -6,8 +6,6 @@ export * from './components/ai/Avatar';
 export { FirstMessages } from './components/ai/utils';
 export { useTranslation } from './hooks/I18nHooks';
 export { Avatar } from './components/ai/Avatar';
-export { BuddyAssistant } from './components/ai/BuddyAssistant';
-export type { BuddyAssistantProps, BuddyAssistantAutoStart } from './components/ai/BuddyAssistant';
 export { VoiceRecorder } from './components/ai/EmbeddedAssistent/VoiceRecorder';
 export { MarkdownEditor } from './components/editor/MarkdownEditor';
 export type { MarkdownEditorProps, EditorLabels } from './components/editor/MarkdownEditor';

package/tsconfig.json

@@ -14,6 +14,5 @@
   },
   "include": [
     "src/**/*"
-  ],
-  "exclude": ["node_modules", "dist", "build"]
+  ]
 }

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Tool } from '@rimori/client';
-export interface BuddyAssistantAutoStart {
-    /** Pre-written assistant message shown immediately (no AI call) */
-    assistantMessage?: string;
-    /** Silently sent as the first user message to trigger an AI-generated intro */
-    userMessage?: string;
-}
-export interface BuddyAssistantProps {
-    buddyName: string;
-    avatarImageUrl: string;
-    voiceId: string;
-    systemPrompt: string;
-    autoStartConversation?: BuddyAssistantAutoStart;
-    circleSize?: string;
-    chatPlaceholder?: string;
-    bottomAction?: React.ReactNode;
-    className?: string;
-    voiceSpeed?: number;
-    tools?: Tool[];
-}
-export declare function BuddyAssistant({ buddyName, avatarImageUrl, voiceId, systemPrompt, autoStartConversation, circleSize, chatPlaceholder, bottomAction, className, voiceSpeed, tools, }: BuddyAssistantProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ai/BuddyAssistant.js

@@ -1,102 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useMemo, useRef } from 'react';
-import { CircleAudioAvatar } from './EmbeddedAssistent/CircleAudioAvatar';
-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({ buddyName, avatarImageUrl, voiceId, systemPrompt, autoStartConversation, circleSize = '160px', chatPlaceholder, bottomAction, className, voiceSpeed = 1, tools, }) {
-    const { ai, event, plugin } = useRimori();
-    const { isDark } = useTheme(plugin.theme);
-    const [ttsEnabled, setTtsEnabled] = useState(true);
-    const [chatInput, setChatInput] = useState('');
-    const [messages, setMessages] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isSpeaking, setIsSpeaking] = useState(false);
-    const ttsEnabledRef = useRef(ttsEnabled);
-    useEffect(() => {
-        ttsEnabledRef.current = ttsEnabled;
-    }, [ttsEnabled]);
-    const sender = useMemo(() => new MessageSender((...args) => ai.getVoice(...args), voiceId), [voiceId, ai]);
-    // Setup sender callbacks and cleanup
-    useEffect(() => {
-        sender.setOnLoudnessChange((value) => event.emit('self.avatar.triggerLoudness', { loudness: value }));
-        sender.setOnEndOfSpeech(() => setIsSpeaking(false));
-        return () => sender.cleanup();
-    }, [sender]);
-    // Build full API message list with system prompt
-    const buildApiMessages = (history) => [
-        { role: 'system', content: systemPrompt },
-        ...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 })];
-                }
-                return [...prev, { id: assistantId, role: 'assistant', content: partial }];
-            });
-            if (ttsEnabledRef.current) {
-                void sender.handleNewText(partial, !finished);
-                if (partial)
-                    setIsSpeaking(true);
-            }
-        }, tools);
-    };
-    // Auto-start conversation on mount
-    const autoStartedRef = useRef(false);
-    useEffect(() => {
-        if (autoStartedRef.current)
-            return;
-        autoStartedRef.current = true;
-        if (autoStartConversation === null || autoStartConversation === void 0 ? void 0 : autoStartConversation.assistantMessage) {
-            const initMsg = { id: 'init', role: 'assistant', content: autoStartConversation.assistantMessage };
-            setMessages([initMsg]);
-            if (ttsEnabledRef.current) {
-                void sender.handleNewText(autoStartConversation.assistantMessage, false);
-                setIsSpeaking(true);
-            }
-        }
-        else if (autoStartConversation === null || autoStartConversation === void 0 ? void 0 : autoStartConversation.userMessage) {
-            const userMsg = { id: 'auto-start', role: 'user', content: autoStartConversation.userMessage };
-            setMessages([userMsg]);
-            triggerAI([userMsg]);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const sendMessage = (text) => {
-        if (!text.trim() || isLoading)
-            return;
-        const userMsg = { id: genId(), role: 'user', content: text };
-        const newMessages = [...messages, userMsg];
-        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: avatarImageUrl, isDarkTheme: isDark, className: "mx-auto" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-3xl font-semibold", children: buddyName }), _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) => {
-                            if (e.key === 'Enter' && !e.shiftKey) {
-                                e.preventDefault();
-                                sendMessage(chatInput);
-                                setChatInput('');
-                            }
-                        }, placeholder: chatPlaceholder !== null && chatPlaceholder !== void 0 ? chatPlaceholder : `Ask ${buddyName} 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: () => {
-                                    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/src/components/ai/BuddyAssistant.tsx

@@ -1,226 +0,0 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { CircleAudioAvatar } from './EmbeddedAssistent/CircleAudioAvatar';
-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 };
-
-export interface BuddyAssistantAutoStart {
-  /** Pre-written assistant message shown immediately (no AI call) */
-  assistantMessage?: string;
-  /** Silently sent as the first user message to trigger an AI-generated intro */
-  userMessage?: string;
-}
-
-export interface BuddyAssistantProps {
-  buddyName: string;
-  avatarImageUrl: string;
-  voiceId: string;
-  systemPrompt: string;
-  autoStartConversation?: BuddyAssistantAutoStart;
-  circleSize?: string;
-  chatPlaceholder?: string;
-  bottomAction?: React.ReactNode;
-  className?: string;
-  voiceSpeed?: number;
-  tools?: Tool[];
-}
-
-let idCounter = 0;
-const genId = () => `ba-${++idCounter}`;
-
-export function BuddyAssistant({
-  buddyName,
-  avatarImageUrl,
-  voiceId,
-  systemPrompt,
-  autoStartConversation,
-  circleSize = '160px',
-  chatPlaceholder,
-  bottomAction,
-  className,
-  voiceSpeed = 1,
-  tools,
-}: BuddyAssistantProps) {
-  const { ai, event, plugin } = useRimori();
-  const { isDark } = useTheme(plugin.theme);
-
-  const [ttsEnabled, setTtsEnabled] = useState(true);
-  const [chatInput, setChatInput] = useState('');
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSpeaking, setIsSpeaking] = useState(false);
-
-  const ttsEnabledRef = useRef(ttsEnabled);
-  useEffect(() => {
-    ttsEnabledRef.current = ttsEnabled;
-  }, [ttsEnabled]);
-
-  const sender = useMemo(() => new MessageSender((...args) => ai.getVoice(...args), voiceId), [voiceId, ai]);
-
-  // Setup sender callbacks and cleanup
-  useEffect(() => {
-    sender.setOnLoudnessChange((value: number) => event.emit('self.avatar.triggerLoudness', { loudness: value }));
-    sender.setOnEndOfSpeech(() => setIsSpeaking(false));
-    return () => sender.cleanup();
-  }, [sender]);
-
-  // Build full API message list with system prompt
-  const buildApiMessages = (history: ChatMessage[]) => [
-    { role: 'system' as const, content: systemPrompt },
-    ...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) => {
-        setIsLoading(!finished);
-        const assistantId = `ai-${id}`;
-        setMessages((prev) => {
-          const last = prev[prev.length - 1];
-          if (last?.id === assistantId) {
-            return [...prev.slice(0, -1), { ...last, content: partial }];
-          }
-          return [...prev, { id: assistantId, role: 'assistant', content: partial }];
-        });
-        if (ttsEnabledRef.current) {
-          void sender.handleNewText(partial, !finished);
-          if (partial) setIsSpeaking(true);
-        }
-      },
-      tools,
-    );
-  };
-
-  // Auto-start conversation on mount
-  const autoStartedRef = useRef(false);
-  useEffect(() => {
-    if (autoStartedRef.current) return;
-    autoStartedRef.current = true;
-
-    if (autoStartConversation?.assistantMessage) {
-      const initMsg: ChatMessage = { id: 'init', role: 'assistant', content: autoStartConversation.assistantMessage };
-      setMessages([initMsg]);
-      if (ttsEnabledRef.current) {
-        void sender.handleNewText(autoStartConversation.assistantMessage, false);
-        setIsSpeaking(true);
-      }
-    } else if (autoStartConversation?.userMessage) {
-      const userMsg: ChatMessage = { id: 'auto-start', role: 'user', content: autoStartConversation.userMessage };
-      setMessages([userMsg]);
-      triggerAI([userMsg]);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const sendMessage = (text: string) => {
-    if (!text.trim() || isLoading) return;
-    const userMsg: ChatMessage = { id: genId(), role: 'user', content: text };
-    const newMessages = [...messages, userMsg];
-    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 (
-    <div className={`flex flex-col items-center ${className || ''}`}>
-      {/* Animated circle avatar */}
-      <CircleAudioAvatar width={circleSize} imageUrl={avatarImageUrl} isDarkTheme={isDark} className="mx-auto" />
-
-      {/* Buddy name + TTS toggle */}
-      <div className="flex items-center gap-2">
-        <span className="text-3xl font-semibold">{buddyName}</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>
-
-      {/* 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">
-          {!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" />
-              <span
-                className="w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce"
-                style={{ animationDelay: '0.15s' }}
-              />
-              <span
-                className="w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce"
-                style={{ animationDelay: '0.3s' }}
-              />
-            </span>
-          ) : (
-            <span className="whitespace-pre-wrap">{lastAssistantMessage?.content}</span>
-          )}
-        </div>
-      )}
-
-      {/* Chat input */}
-      <div className="w-full max-w-md relative mt-4">
-        <input
-          value={chatInput}
-          onChange={(e) => setChatInput(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-              e.preventDefault();
-              sendMessage(chatInput);
-              setChatInput('');
-            }
-          }}
-          placeholder={chatPlaceholder ?? `Ask ${buddyName} 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"
-        />
-        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
-          <VoiceRecorder
-            iconSize="14"
-            className="p-1 text-gray-400 hover:text-white transition-colors"
-            disabled={isLoading}
-            onVoiceRecorded={(text) => sendMessage(text)}
-            onRecordingStatusChange={() => {}}
-          />
-          <div className="w-px h-3.5 bg-gray-600" />
-          <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"
-          >
-            <BiSolidRightArrow className="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-
-      {/* Optional bottom action (e.g. a CTA button) */}
-      {bottomAction && <div className="w-full max-w-md border-t border-gray-700/60 pt-3">{bottomAction}</div>}
-    </div>
-  );
-}