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

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,102 @@
+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/dist/components/audio/Playbutton.d.ts

@@ -9,6 +9,7 @@ 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, }) => {
+export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, initialSpeed = 1.0, playOnMount = false, enableSpeedAdjustment = false, cache = true, size = '25px', }) => {
     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: "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))) })] }))] }) }));
+    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))) })] }))] }) }));
 };
 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,6 +12,7 @@ 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';
@@ -26,6 +27,28 @@ 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();
 }
@@ -160,7 +183,8 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
         return data.url;
     }), [storage]);
     const extensions = useMemo(() => [
-        StarterKit,
+        StarterKit.configure({ paragraph: false }),
+        ParagraphPreserveEmpty,
         Table.configure({ resizable: false }),
         TableRow,
         TableHeader,
@@ -184,7 +208,8 @@ 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
+    // 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.
     useEffect(() => {
         if (!editor)
             return;
@@ -192,7 +217,7 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
         if (incoming === lastEmittedRef.current)
             return;
         lastEmittedRef.current = incoming;
-        editor.commands.setContent(incoming);
+        editor.commands.setContent(incoming, false);
     }, [editor, content]);
     // Sync editable prop
     useEffect(() => {

package/dist/index.d.ts

@@ -5,6 +5,8 @@ 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,6 +5,7 @@ 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.0",
+  "version": "0.4.11-next.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "^2.5.19",
+    "@rimori/client": "2.5.19-next.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
@@ -32,6 +32,7 @@
     "@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",
@@ -46,7 +47,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "^2.5.19",
+    "@rimori/client": "2.5.19-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

@@ -0,0 +1,226 @@
+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>
+  );
+}

package/src/components/audio/Playbutton.tsx

@@ -13,6 +13,7 @@ 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];
@@ -30,6 +31,7 @@ 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);
@@ -161,11 +163,11 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
         {!hide && (
           <button className="text-gray-400" onClick={togglePlayback} disabled={isLoading}>
             {isLoading ? (
-              <Spinner size="25px" />
+              <Spinner size={size} />
             ) : isPlaying ? (
-              <FaStopCircle size="25px" />
+              <FaStopCircle size={size} />
             ) : (
-              <FaPlayCircle size="25px" />
+              <FaPlayCircle size={size} />
             )}
           </button>
         )}

package/src/components/editor/MarkdownEditor.tsx

@@ -2,6 +2,7 @@ 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';
@@ -28,6 +29,28 @@ 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();
 }
@@ -559,7 +582,8 @@ export const MarkdownEditor = ({
 
   const extensions = useMemo(
     () => [
-      StarterKit,
+      StarterKit.configure({ paragraph: false }),
+      ParagraphPreserveEmpty,
       Table.configure({ resizable: false }),
       TableRow,
       TableHeader,
@@ -587,13 +611,14 @@ export const MarkdownEditor = ({
     },
   });
 
-  // Sync external content changes (e.g. AI autofill) without triggering update loop
+  // 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.
   useEffect(() => {
     if (!editor) return;
     const incoming = content ?? '';
     if (incoming === lastEmittedRef.current) return;
     lastEmittedRef.current = incoming;
-    editor.commands.setContent(incoming);
+    editor.commands.setContent(incoming, false);
   }, [editor, content]);
 
   // Sync editable prop

package/src/index.ts

@@ -6,6 +6,8 @@ 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,5 +14,6 @@
   },
   "include": [
     "src/**/*"
-  ]
+  ],
+  "exclude": ["node_modules", "dist", "build"]
 }