@rimori/react-client 0.4.11 → 0.4.12-next.1

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

@@ -10,6 +10,8 @@ interface Props {
     autoStartConversation?: FirstMessages;
     className?: string;
     knowledgeId?: string;
+    /** Set to true to disable automatic dialect TTS from userInfo. Default: false (dialect enabled). */
+    disableDialect?: boolean;
 }
-export declare function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, circleSize, className, cache, knowledgeId, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, circleSize, className, cache, knowledgeId, disableDialect, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ai/Avatar.js

@@ -7,12 +7,18 @@ 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, }) {
-    const { ai, event, plugin } = useRimori();
+export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, circleSize = '300px', className, cache = false, knowledgeId, disableDialect = false, }) {
+    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 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 });
     useEffect(() => {
         console.log('messages', messages);

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

@@ -0,0 +1,21 @@
+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 {
+    systemPrompt: string;
+    autoStartConversation?: BuddyAssistantAutoStart;
+    circleSize?: string;
+    chatPlaceholder?: string;
+    bottomAction?: React.ReactNode;
+    className?: string;
+    voiceSpeed?: number;
+    tools?: Tool[];
+    /** Set to true to disable automatic dialect from userInfo. Default: false (dialect enabled). */
+    disableDialect?: boolean;
+}
+export declare function BuddyAssistant({ systemPrompt, autoStartConversation, circleSize, chatPlaceholder, bottomAction, className, voiceSpeed, tools, disableDialect, }: BuddyAssistantProps): JSX.Element;

package/dist/components/ai/BuddyAssistant.js

@@ -0,0 +1,115 @@
+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({ systemPrompt, autoStartConversation, circleSize = '160px', chatPlaceholder, bottomAction, className, voiceSpeed = 1, tools, disableDialect = false, }) {
+    var _a;
+    const { ai, event, plugin, userInfo } = useRimori();
+    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 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);
+    const [isSpeaking, setIsSpeaking] = useState(false);
+    const ttsEnabledRef = useRef(ttsEnabled);
+    useEffect(() => {
+        ttsEnabledRef.current = ttsEnabled;
+    }, [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(() => {
+        sender.setInstructions(dialectTtsInstruction);
+    }, [sender, dialectTtsInstruction]);
+    // Setup sender callbacks and cleanup
+    useEffect(() => {
+        sender.setVoiceSpeed(voiceSpeed);
+        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 (dialect appended when enabled)
+    const buildApiMessages = (history) => [
+        { role: 'system', content: systemPrompt + dialectSystemSuffix },
+        ...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
+    }, []);
+    if (!buddy)
+        return _jsx("div", {});
+    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: 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) => {
+                            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: () => {
+                                    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,11 @@ type AudioPlayerProps = {
     initialSpeed?: number;
     enableSpeedAdjustment?: boolean;
     playListenerEvent?: string;
+    size?: string;
+    /** Explicit TTS instruction string. If provided, overrides auto-dialect. */
+    ttsInstructions?: string;
+    /** Set to true to disable automatic dialect from userInfo. Default: false (dialect enabled). */
+    disableDialect?: boolean;
 };
 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,12 +14,12 @@ 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', ttsInstructions, disableDialect = false, }) => {
     const [audioUrl, setAudioUrl] = useState(null);
     const [speed, setSpeed] = useState(initialSpeed);
     const [isPlaying, setIsPlaying] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
-    const { ai } = useRimori();
+    const { ai, userInfo } = useRimori();
     const audioRef = useRef(null);
     const eventBusListenerRef = useRef(null);
     useEffect(() => {
@@ -33,7 +33,8 @@ export const AudioPlayer = ({ text, voice, language, hide, playListenerEvent, in
     // Function to generate audio from text using API
     const generateAudio = () => __awaiter(void 0, void 0, void 0, function* () {
         setIsLoading(true);
-        const blob = yield ai.getVoice(text, voice || (language ? 'aws_default' : 'openai_alloy'), 1, language, cache);
+        const effectiveInstructions = ttsInstructions !== null && ttsInstructions !== void 0 ? ttsInstructions : (!disableDialect && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.dialect) ? `Speak with a ${userInfo.dialect} accent and pronunciation.` : undefined);
+        const blob = yield ai.getVoice(text, voice || (language ? 'aws_default' : 'openai_alloy'), 1, language, cache, effectiveInstructions);
         setAudioUrl(URL.createObjectURL(blob));
         setIsLoading(false);
     });
@@ -129,7 +130,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';
@@ -23,9 +24,31 @@ import { PiCodeBlock } from 'react-icons/pi';
 import { TbBlockquote, TbTable, TbColumnInsertRight, TbRowInsertBottom, TbColumnRemove, TbRowRemove, TbArrowMergeBoth, TbBrandYoutube, TbPhoto, } from 'react-icons/tb';
 import { GoListOrdered } from 'react-icons/go';
 import { AiOutlineUnorderedList } from 'react-icons/ai';
-import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink, LuUnlink } from 'react-icons/lu';
+import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink, LuCopy, LuCheck, LuMaximize2, LuMinimize2, } 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();
 }
@@ -103,16 +126,24 @@ const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }) => {
                                 ? labels.addYoutubeConfirm
                                 : labels.appendMarkdownConfirm })] })] }));
 };
-const MenuBar = ({ editor, onUpdate, uploadImage, labels }) => {
+const MenuBar = ({ editor, onUpdate, uploadImage, labels, onCopy, copied, isFullscreen, onToggleFullscreen, }) => {
     const [activePanel, setActivePanel] = useState(null);
     const toggle = (panel) => setActivePanel((prev) => (prev === panel ? null : panel));
     const inTable = editor.isActive('table');
     const isLink = editor.isActive('link');
     const tableBtnClass = 'w-8 h-8 flex items-center justify-center rounded-md transition-colors duration-150 ' +
         'text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40 disabled:pointer-events-none';
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-muted/50 border-b border-border text-base flex flex-row flex-wrap items-center gap-0.5 p-1.5", children: [_jsx(EditorButton, { editor: editor, action: "toggleBold", isActive: editor.isActive('bold'), label: _jsx(FaBold, {}), disabled: true, title: labels.bold }), _jsx(EditorButton, { editor: editor, action: "toggleItalic", isActive: editor.isActive('italic'), label: _jsx(FaItalic, {}), disabled: true, title: labels.italic }), _jsx(EditorButton, { editor: editor, action: "toggleStrike", isActive: editor.isActive('strike'), label: _jsx(FaStrikethrough, {}), disabled: true, title: labels.strike }), _jsx(EditorButton, { editor: editor, action: "toggleCode", isActive: editor.isActive('code'), label: _jsx(FaCode, {}), disabled: true, title: labels.code }), _jsx(EditorButton, { editor: editor, action: "setParagraph", isActive: editor.isActive('paragraph'), label: _jsx(FaParagraph, {}), title: labels.paragraph }), _jsx(EditorButton, { editor: editor, action: "setHeading1", isActive: editor.isActive('heading', { level: 1 }), label: _jsx(LuHeading1, { size: "24px" }), title: labels.heading1 }), _jsx(EditorButton, { editor: editor, action: "setHeading2", isActive: editor.isActive('heading', { level: 2 }), label: _jsx(LuHeading2, { size: "24px" }), title: labels.heading2 }), _jsx(EditorButton, { editor: editor, action: "setHeading3", isActive: editor.isActive('heading', { level: 3 }), label: _jsx(LuHeading3, { size: "24px" }), title: labels.heading3 }), _jsx(EditorButton, { editor: editor, action: "toggleBulletList", isActive: editor.isActive('bulletList'), label: _jsx(AiOutlineUnorderedList, { size: "24px" }), title: labels.bulletList }), _jsx(EditorButton, { editor: editor, action: "toggleOrderedList", isActive: editor.isActive('orderedList'), label: _jsx(GoListOrdered, { size: "24px" }), title: labels.orderedList }), _jsx(EditorButton, { editor: editor, action: "toggleCodeBlock", isActive: editor.isActive('codeBlock'), label: _jsx(PiCodeBlock, { size: "24px" }), title: labels.codeBlock }), _jsx(EditorButton, { editor: editor, action: "toggleBlockquote", isActive: editor.isActive('blockquote'), label: _jsx(TbBlockquote, { size: "24px" }), title: labels.blockquote }), _jsx("div", { className: "w-px h-5 bg-border mx-0.5" }), _jsxs("div", { className: "inline-flex rounded-md border border-border bg-transparent overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => toggle('link'), title: labels.setLink, className: 'w-8 h-8 flex items-center justify-center rounded-none first:rounded-l-md last:rounded-r-md transition-colors duration-150 ' +
-                                    'text-muted-foreground hover:bg-accent hover:text-accent-foreground border-r border-border last:border-r-0' +
-                                    (isLink ? ' bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground' : ''), children: _jsx(LuLink, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().unsetLink().run(), disabled: !isLink, title: labels.unsetLink, className: "w-8 h-8 flex items-center justify-center rounded-none first:rounded-l-md last:rounded-r-md transition-colors duration-150 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40 disabled:pointer-events-none border-r border-border last:border-r-0", children: _jsx(LuUnlink, { size: 18 }) })] }), _jsx("button", { type: "button", onClick: () => toggle('youtube'), className: tableBtnClass, title: labels.addYoutube, children: _jsx(TbBrandYoutube, { size: 18 }) }), uploadImage && (_jsx("button", { type: "button", onClick: () => triggerImageUpload(uploadImage, editor), className: tableBtnClass, title: labels.insertImage, children: _jsx(TbPhoto, { size: 18 }) })), _jsx("div", { className: "w-px h-5 bg-border mx-0.5" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), className: tableBtnClass, title: labels.insertTable, children: _jsx(TbTable, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().addColumnAfter().run(), className: tableBtnClass, disabled: !inTable, title: labels.addColumnAfter, children: _jsx(TbColumnInsertRight, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().addRowAfter().run(), className: tableBtnClass, disabled: !inTable, title: labels.addRowAfter, children: _jsx(TbRowInsertBottom, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().deleteColumn().run(), className: tableBtnClass, disabled: !inTable, title: labels.deleteColumn, children: _jsx(TbColumnRemove, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().deleteRow().run(), className: tableBtnClass, disabled: !inTable, title: labels.deleteRow, children: _jsx(TbRowRemove, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().mergeOrSplit().run(), className: tableBtnClass, disabled: !inTable, title: labels.mergeOrSplit, children: _jsx(TbArrowMergeBoth, { size: 18 }) }), _jsx("div", { className: "w-px h-5 bg-border mx-0.5" }), _jsx("button", { type: "button", onClick: () => toggle('markdown'), className: tableBtnClass, title: labels.appendMarkdown, children: _jsx(LuClipboardPaste, { size: 18 }) })] }), _jsx(InlinePanel, { panel: activePanel, onClose: () => setActivePanel(null), editor: editor, onUpdate: onUpdate, labels: labels })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-muted/50 border-b border-border text-base flex flex-row flex-wrap items-center gap-0.5 p-1.5", children: [_jsx(EditorButton, { editor: editor, action: "toggleBold", isActive: editor.isActive('bold'), label: _jsx(FaBold, {}), disabled: true, title: labels.bold }), _jsx(EditorButton, { editor: editor, action: "toggleItalic", isActive: editor.isActive('italic'), label: _jsx(FaItalic, {}), disabled: true, title: labels.italic }), _jsx(EditorButton, { editor: editor, action: "toggleStrike", isActive: editor.isActive('strike'), label: _jsx(FaStrikethrough, {}), disabled: true, title: labels.strike }), _jsx(EditorButton, { editor: editor, action: "toggleCode", isActive: editor.isActive('code'), label: _jsx(FaCode, {}), disabled: true, title: labels.code }), _jsx(EditorButton, { editor: editor, action: "setParagraph", isActive: editor.isActive('paragraph'), label: _jsx(FaParagraph, {}), title: labels.paragraph }), _jsx(EditorButton, { editor: editor, action: "setHeading1", isActive: editor.isActive('heading', { level: 1 }), label: _jsx(LuHeading1, { size: "24px" }), title: labels.heading1 }), _jsx(EditorButton, { editor: editor, action: "setHeading2", isActive: editor.isActive('heading', { level: 2 }), label: _jsx(LuHeading2, { size: "24px" }), title: labels.heading2 }), _jsx(EditorButton, { editor: editor, action: "setHeading3", isActive: editor.isActive('heading', { level: 3 }), label: _jsx(LuHeading3, { size: "24px" }), title: labels.heading3 }), _jsx(EditorButton, { editor: editor, action: "toggleBulletList", isActive: editor.isActive('bulletList'), label: _jsx(AiOutlineUnorderedList, { size: "24px" }), title: labels.bulletList }), _jsx(EditorButton, { editor: editor, action: "toggleOrderedList", isActive: editor.isActive('orderedList'), label: _jsx(GoListOrdered, { size: "24px" }), title: labels.orderedList }), _jsx(EditorButton, { editor: editor, action: "toggleCodeBlock", isActive: editor.isActive('codeBlock'), label: _jsx(PiCodeBlock, { size: "24px" }), title: labels.codeBlock }), _jsx(EditorButton, { editor: editor, action: "toggleBlockquote", isActive: editor.isActive('blockquote'), label: _jsx(TbBlockquote, { size: "24px" }), title: labels.blockquote }), _jsx("div", { className: "w-px h-5 bg-border mx-0.5" }), _jsx("button", { type: "button", onClick: () => {
+                            if (isLink) {
+                                editor.chain().focus().unsetLink().run();
+                            }
+                            else {
+                                toggle('link');
+                            }
+                        }, title: isLink ? labels.unsetLink : labels.setLink, className: 'w-8 h-8 flex items-center justify-center rounded-md transition-colors duration-150 ' +
+                            (isLink
+                                ? 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground hover:bg-destructive/10 hover:text-destructive'
+                                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'), children: _jsx(LuLink, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => toggle('youtube'), className: tableBtnClass, title: labels.addYoutube, children: _jsx(TbBrandYoutube, { size: 18 }) }), uploadImage && (_jsx("button", { type: "button", onClick: () => triggerImageUpload(uploadImage, editor), className: tableBtnClass, title: labels.insertImage, children: _jsx(TbPhoto, { size: 18 }) })), _jsx("div", { className: "w-px h-5 bg-border mx-0.5" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), className: tableBtnClass, title: labels.insertTable, children: _jsx(TbTable, { size: 18 }) }), inTable && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => editor.chain().focus().addColumnAfter().run(), className: tableBtnClass, title: labels.addColumnAfter, children: _jsx(TbColumnInsertRight, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().addRowAfter().run(), className: tableBtnClass, title: labels.addRowAfter, children: _jsx(TbRowInsertBottom, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().deleteColumn().run(), className: tableBtnClass, title: labels.deleteColumn, children: _jsx(TbColumnRemove, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().deleteRow().run(), className: tableBtnClass, title: labels.deleteRow, children: _jsx(TbRowRemove, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().mergeOrSplit().run(), className: tableBtnClass, title: labels.mergeOrSplit, children: _jsx(TbArrowMergeBoth, { size: 18 }) })] })), _jsxs("div", { className: 'ml-auto flex items-center gap-0.5 ' + (isFullscreen ? 'pr-10' : ''), children: [_jsx("button", { type: "button", onClick: () => toggle('markdown'), className: tableBtnClass, title: labels.appendMarkdown, children: _jsx(LuClipboardPaste, { size: 18, style: { transform: 'scaleX(-1)' } }) }), _jsx("button", { type: "button", onClick: onCopy, title: "Copy as Markdown", className: tableBtnClass, children: copied ? _jsx(LuCheck, { size: 16, className: "text-green-500" }) : _jsx(LuCopy, { size: 16 }) }), _jsx("button", { type: "button", onClick: onToggleFullscreen, title: isFullscreen ? 'Exit fullscreen' : 'Fullscreen', className: tableBtnClass, children: isFullscreen ? _jsx(LuMinimize2, { size: 16 }) : _jsx(LuMaximize2, { size: 16 }) })] })] }), _jsx(InlinePanel, { panel: activePanel, onClose: () => setActivePanel(null), editor: editor, onUpdate: onUpdate, labels: labels })] }));
 };
 const DEFAULT_LABELS = {
     bold: 'Bold',
@@ -153,6 +184,8 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
     const { storage } = useRimori();
     const mergedLabels = Object.assign(Object.assign({}, DEFAULT_LABELS), labels);
     const lastEmittedRef = useRef(content !== null && content !== void 0 ? content : '');
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [copied, setCopied] = useState(false);
     const stableUpload = useCallback((pngBlob) => __awaiter(void 0, void 0, void 0, function* () {
         const { data, error } = yield storage.uploadImage(pngBlob);
         if (error)
@@ -160,7 +193,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 +218,16 @@ 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
+    const handleCopy = useCallback(() => {
+        if (!editor)
+            return;
+        navigator.clipboard.writeText(getMarkdown(editor)).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    }, [editor]);
+    // 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 +235,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(() => {
@@ -200,8 +243,11 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
             return;
         editor.setEditable(editable);
     }, [editor, editable]);
-    return (_jsxs("div", { className: 'text-md overflow-hidden rounded-lg ' +
+    const wrapperClass = isFullscreen
+        ? 'text-md overflow-hidden rounded-lg border border-border bg-card shadow-sm fixed inset-0 z-50 flex flex-col'
+        : 'text-md overflow-hidden rounded-lg ' +
             (editable ? 'border border-border bg-card shadow-sm' : 'bg-transparent') +
             ' ' +
-            (className !== null && className !== void 0 ? className : ''), onClick: onContentClick, children: [editor && editable && (_jsx(MenuBar, { editor: editor, onUpdate: onUpdate !== null && onUpdate !== void 0 ? onUpdate : (() => { }), uploadImage: stableUpload, labels: mergedLabels })), _jsx(EditorContent, { editor: editor })] }));
+            (className !== null && className !== void 0 ? className : '');
+    return (_jsxs("div", { className: wrapperClass, onClick: onContentClick, children: [editor && editable && (_jsx(MenuBar, { editor: editor, onUpdate: onUpdate !== null && onUpdate !== void 0 ? onUpdate : (() => { }), uploadImage: stableUpload, labels: mergedLabels, onCopy: handleCopy, copied: copied, isFullscreen: isFullscreen, onToggleFullscreen: () => setIsFullscreen((v) => !v) })), _jsx(EditorContent, { editor: editor, className: isFullscreen ? 'flex-1 overflow-y-auto' : '' })] }));
 };

package/dist/hooks/ThemeSetter.js

@@ -1,13 +1,11 @@
 export function useTheme(theme = 'system') {
     const isDark = theme === 'system' ? systenUsesDarkMode() : theme === 'dark';
     const dom = document.documentElement;
-    dom.style.background = 'hsl(var(--background))';
-    dom.classList.add('text-gray-900', 'dark:text-gray-200', 'bg-gray-50', 'dark:bg-gray-950');
     dom.dataset.theme = isDark ? 'dark' : 'light';
     dom.style.colorScheme = isDark ? 'dark' : 'light';
-    const root = document.querySelector('#root');
-    root.style.background = 'hsl(var(--background))';
     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 };
 }
 function systenUsesDarkMode() {

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",
+  "version": "0.4.12-next.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "^2.5.19",
+    "@rimori/client": "2.5.23-next.1",
     "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.23-next.1",
     "@types/react": "^18.3.21",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",

package/src/components/ai/Avatar.tsx

@@ -19,6 +19,8 @@ interface Props {
   autoStartConversation?: FirstMessages;
   className?: string;
   knowledgeId?: string;
+  /** Set to true to disable automatic dialect TTS from userInfo. Default: false (dialect enabled). */
+  disableDialect?: boolean;
 }
 
 export function Avatar({
@@ -31,15 +33,23 @@ export function Avatar({
   className,
   cache = false,
   knowledgeId,
+  disableDialect = false,
 }: Props) {
-  const { ai, event, plugin } = useRimori();
+  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 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 });
 
   useEffect(() => {

package/src/components/ai/BuddyAssistant.tsx

@@ -0,0 +1,239 @@
+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 {
+  systemPrompt: string;
+  autoStartConversation?: BuddyAssistantAutoStart;
+  circleSize?: string;
+  chatPlaceholder?: string;
+  bottomAction?: React.ReactNode;
+  className?: string;
+  voiceSpeed?: number;
+  tools?: Tool[];
+  /** Set to true to disable automatic dialect from userInfo. Default: false (dialect enabled). */
+  disableDialect?: boolean;
+}
+
+let idCounter = 0;
+const genId = () => `ba-${++idCounter}`;
+
+export function BuddyAssistant({
+  systemPrompt,
+  autoStartConversation,
+  circleSize = '160px',
+  chatPlaceholder,
+  bottomAction,
+  className,
+  voiceSpeed = 1,
+  tools,
+  disableDialect = false,
+}: BuddyAssistantProps): JSX.Element {
+  const { ai, event, plugin, userInfo } = useRimori();
+  const { isDark } = useTheme(plugin.theme);
+  const buddy = plugin.getUserInfo()?.study_buddy;
+  const dialect = !disableDialect ? userInfo?.dialect : undefined;
+  const dialectSystemSuffix = dialect
+    ? `\n\nThe user is learning the regional ${dialect} dialect. Occasionally use typical regional vocabulary and expressions from this dialect to help them learn local language naturally.`
+    : '';
+  const 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);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+
+  const ttsEnabledRef = useRef(ttsEnabled);
+  useEffect(() => {
+    ttsEnabledRef.current = ttsEnabled;
+  }, [ttsEnabled]);
+
+  const sender = useMemo(
+    () => new MessageSender((...args) => ai.getVoice(...args), buddy?.voiceId ?? ''),
+    [buddy?.voiceId, ai],
+  );
+
+  useEffect(() => {
+    sender.setInstructions(dialectTtsInstruction);
+  }, [sender, dialectTtsInstruction]);
+
+  // Setup sender callbacks and cleanup
+  useEffect(() => {
+    sender.setVoiceSpeed(voiceSpeed);
+    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 (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 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
+  }, []);
+
+  if (!buddy) return <div />;
+
+  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={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>
+
+      {/* 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 ${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"
+        />
+        <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,11 @@ type AudioPlayerProps = {
   initialSpeed?: number;
   enableSpeedAdjustment?: boolean;
   playListenerEvent?: string;
+  size?: string;
+  /** Explicit TTS instruction string. If provided, overrides auto-dialect. */
+  ttsInstructions?: string;
+  /** Set to true to disable automatic dialect from userInfo. Default: false (dialect enabled). */
+  disableDialect?: boolean;
 };
 
 export const AudioPlayOptions = [0.8, 0.9, 1.0, 1.1, 1.2, 1.5];
@@ -30,12 +35,15 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
   playOnMount = false,
   enableSpeedAdjustment = false,
   cache = true,
+  size = '25px',
+  ttsInstructions,
+  disableDialect = false,
 }) => {
   const [audioUrl, setAudioUrl] = useState<string | null>(null);
   const [speed, setSpeed] = useState(initialSpeed);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const { ai } = useRimori();
+  const { ai, userInfo } = useRimori();
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const eventBusListenerRef = useRef<{ off: () => void } | null>(null);
 
@@ -50,7 +58,9 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
   const generateAudio = async () => {
     setIsLoading(true);
 
-    const blob = await ai.getVoice(text, voice || (language ? 'aws_default' : 'openai_alloy'), 1, language, cache);
+    const effectiveInstructions = ttsInstructions
+      ?? (!disableDialect && userInfo?.dialect ? `Speak with a ${userInfo.dialect} accent and pronunciation.` : undefined);
+    const blob = await ai.getVoice(text, voice || (language ? 'aws_default' : 'openai_alloy'), 1, language, cache, effectiveInstructions);
     setAudioUrl(URL.createObjectURL(blob));
     setIsLoading(false);
   };
@@ -161,11 +171,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';
@@ -24,10 +25,42 @@ import {
 } from 'react-icons/tb';
 import { GoListOrdered } from 'react-icons/go';
 import { AiOutlineUnorderedList } from 'react-icons/ai';
-import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink, LuUnlink } from 'react-icons/lu';
+import {
+  LuClipboardPaste,
+  LuHeading1,
+  LuHeading2,
+  LuHeading3,
+  LuLink,
+  LuCopy,
+  LuCheck,
+  LuMaximize2,
+  LuMinimize2,
+} 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: 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();
 }
@@ -207,9 +240,22 @@ interface MenuBarProps {
   onUpdate: (content: string) => void;
   uploadImage?: (pngBlob: Blob) => Promise<string | null>;
   labels: Required<EditorLabels>;
+  onCopy: () => void;
+  copied: boolean;
+  isFullscreen: boolean;
+  onToggleFullscreen: () => void;
 }
 
-const MenuBar = ({ editor, onUpdate, uploadImage, labels }: MenuBarProps): JSX.Element => {
+const MenuBar = ({
+  editor,
+  onUpdate,
+  uploadImage,
+  labels,
+  onCopy,
+  copied,
+  isFullscreen,
+  onToggleFullscreen,
+}: MenuBarProps): JSX.Element => {
   const [activePanel, setActivePanel] = useState<PanelType>(null);
 
   const toggle = (panel: PanelType): void => setActivePanel((prev) => (prev === panel ? null : panel));
@@ -322,30 +368,26 @@ const MenuBar = ({ editor, onUpdate, uploadImage, labels }: MenuBarProps): JSX.E
 
         <div className="w-px h-5 bg-border mx-0.5" />
 
-        {/* Link buttons */}
-        <div className="inline-flex rounded-md border border-border bg-transparent overflow-hidden">
-          <button
-            type="button"
-            onClick={() => toggle('link')}
-            title={labels.setLink}
-            className={
-              'w-8 h-8 flex items-center justify-center rounded-none first:rounded-l-md last:rounded-r-md transition-colors duration-150 ' +
-              'text-muted-foreground hover:bg-accent hover:text-accent-foreground border-r border-border last:border-r-0' +
-              (isLink ? ' bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground' : '')
+        {/* Link button — opens panel when no link active, removes link when active */}
+        <button
+          type="button"
+          onClick={() => {
+            if (isLink) {
+              editor.chain().focus().unsetLink().run();
+            } else {
+              toggle('link');
             }
-          >
-            <LuLink size={18} />
-          </button>
-          <button
-            type="button"
-            onClick={() => editor.chain().focus().unsetLink().run()}
-            disabled={!isLink}
-            title={labels.unsetLink}
-            className="w-8 h-8 flex items-center justify-center rounded-none first:rounded-l-md last:rounded-r-md transition-colors duration-150 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40 disabled:pointer-events-none border-r border-border last:border-r-0"
-          >
-            <LuUnlink size={18} />
-          </button>
-        </div>
+          }}
+          title={isLink ? labels.unsetLink : labels.setLink}
+          className={
+            'w-8 h-8 flex items-center justify-center rounded-md transition-colors duration-150 ' +
+            (isLink
+              ? 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground hover:bg-destructive/10 hover:text-destructive'
+              : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground')
+          }
+        >
+          <LuLink size={18} />
+        </button>
 
         {/* YouTube */}
         <button type="button" onClick={() => toggle('youtube')} className={tableBtnClass} title={labels.addYoutube}>
@@ -375,63 +417,73 @@ const MenuBar = ({ editor, onUpdate, uploadImage, labels }: MenuBarProps): JSX.E
         >
           <TbTable size={18} />
         </button>
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().addColumnAfter().run()}
-          className={tableBtnClass}
-          disabled={!inTable}
-          title={labels.addColumnAfter}
-        >
-          <TbColumnInsertRight size={18} />
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().addRowAfter().run()}
-          className={tableBtnClass}
-          disabled={!inTable}
-          title={labels.addRowAfter}
-        >
-          <TbRowInsertBottom size={18} />
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().deleteColumn().run()}
-          className={tableBtnClass}
-          disabled={!inTable}
-          title={labels.deleteColumn}
-        >
-          <TbColumnRemove size={18} />
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().deleteRow().run()}
-          className={tableBtnClass}
-          disabled={!inTable}
-          title={labels.deleteRow}
-        >
-          <TbRowRemove size={18} />
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().mergeOrSplit().run()}
-          className={tableBtnClass}
-          disabled={!inTable}
-          title={labels.mergeOrSplit}
-        >
-          <TbArrowMergeBoth size={18} />
-        </button>
-
-        <div className="w-px h-5 bg-border mx-0.5" />
+        {inTable && (
+          <>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().addColumnAfter().run()}
+              className={tableBtnClass}
+              title={labels.addColumnAfter}
+            >
+              <TbColumnInsertRight size={18} />
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().addRowAfter().run()}
+              className={tableBtnClass}
+              title={labels.addRowAfter}
+            >
+              <TbRowInsertBottom size={18} />
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().deleteColumn().run()}
+              className={tableBtnClass}
+              title={labels.deleteColumn}
+            >
+              <TbColumnRemove size={18} />
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().deleteRow().run()}
+              className={tableBtnClass}
+              title={labels.deleteRow}
+            >
+              <TbRowRemove size={18} />
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().mergeOrSplit().run()}
+              className={tableBtnClass}
+              title={labels.mergeOrSplit}
+            >
+              <TbArrowMergeBoth size={18} />
+            </button>
+          </>
+        )}
 
-        {/* Append raw markdown */}
-        <button
-          type="button"
-          onClick={() => toggle('markdown')}
-          className={tableBtnClass}
-          title={labels.appendMarkdown}
-        >
-          <LuClipboardPaste size={18} />
-        </button>
+        <div className={'ml-auto flex items-center gap-0.5 ' + (isFullscreen ? 'pr-10' : '')}>
+          {/* Append raw markdown */}
+          <button
+            type="button"
+            onClick={() => toggle('markdown')}
+            className={tableBtnClass}
+            title={labels.appendMarkdown}
+          >
+            <LuClipboardPaste size={18} style={{ transform: 'scaleX(-1)' }} />
+          </button>
+          <button type="button" onClick={onCopy} title="Copy as Markdown" className={tableBtnClass}>
+            {copied ? <LuCheck size={16} className="text-green-500" /> : <LuCopy size={16} />}
+          </button>
+          <button
+            type="button"
+            onClick={onToggleFullscreen}
+            title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+            className={tableBtnClass}
+          >
+            {isFullscreen ? <LuMinimize2 size={16} /> : <LuMaximize2 size={16} />}
+          </button>
+        </div>
       </div>
 
       <InlinePanel
@@ -547,6 +599,8 @@ export const MarkdownEditor = ({
   const { storage } = useRimori();
   const mergedLabels: Required<EditorLabels> = { ...DEFAULT_LABELS, ...labels };
   const lastEmittedRef = useRef(content ?? '');
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [copied, setCopied] = useState(false);
 
   const stableUpload = useCallback(
     async (pngBlob: Blob): Promise<string | null> => {
@@ -559,7 +613,8 @@ export const MarkdownEditor = ({
 
   const extensions = useMemo(
     () => [
-      StarterKit,
+      StarterKit.configure({ paragraph: false }),
+      ParagraphPreserveEmpty,
       Table.configure({ resizable: false }),
       TableRow,
       TableHeader,
@@ -587,13 +642,22 @@ export const MarkdownEditor = ({
     },
   });
 
-  // Sync external content changes (e.g. AI autofill) without triggering update loop
+  const handleCopy = useCallback(() => {
+    if (!editor) return;
+    navigator.clipboard.writeText(getMarkdown(editor)).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [editor]);
+
+  // 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
@@ -602,20 +666,28 @@ export const MarkdownEditor = ({
     editor.setEditable(editable);
   }, [editor, editable]);
 
+  const wrapperClass = isFullscreen
+    ? 'text-md overflow-hidden rounded-lg border border-border bg-card shadow-sm fixed inset-0 z-50 flex flex-col'
+    : 'text-md overflow-hidden rounded-lg ' +
+      (editable ? 'border border-border bg-card shadow-sm' : 'bg-transparent') +
+      ' ' +
+      (className ?? '');
+
   return (
-    <div
-      className={
-        'text-md overflow-hidden rounded-lg ' +
-        (editable ? 'border border-border bg-card shadow-sm' : 'bg-transparent') +
-        ' ' +
-        (className ?? '')
-      }
-      onClick={onContentClick}
-    >
+    <div className={wrapperClass} onClick={onContentClick}>
       {editor && editable && (
-        <MenuBar editor={editor} onUpdate={onUpdate ?? (() => {})} uploadImage={stableUpload} labels={mergedLabels} />
+        <MenuBar
+          editor={editor}
+          onUpdate={onUpdate ?? (() => {})}
+          uploadImage={stableUpload}
+          labels={mergedLabels}
+          onCopy={handleCopy}
+          copied={copied}
+          isFullscreen={isFullscreen}
+          onToggleFullscreen={() => setIsFullscreen((v) => !v)}
+        />
       )}
-      <EditorContent editor={editor} />
+      <EditorContent editor={editor} className={isFullscreen ? 'flex-1 overflow-y-auto' : ''} />
     </div>
   );
 };

package/src/hooks/ThemeSetter.ts

@@ -4,16 +4,21 @@ export function useTheme(theme: Theme = 'system'): { isDark: boolean; theme: The
   const isDark = theme === 'system' ? systenUsesDarkMode() : theme === 'dark';
 
   const dom = document.documentElement;
-  dom.style.background = 'hsl(var(--background))';
-  dom.classList.add('text-gray-900', 'dark:text-gray-200', 'bg-gray-50', 'dark:bg-gray-950');
   dom.dataset.theme = isDark ? 'dark' : 'light';
   dom.style.colorScheme = isDark ? 'dark' : 'light';
 
-  const root = document.querySelector('#root') as HTMLDivElement;
-  root.style.background = 'hsl(var(--background))';
-
   dom.classList[isDark ? 'add' : 'remove']('dark');
 
+  const root = document.querySelector('#root') as HTMLDivElement;
+  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 };
 }
 

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"]
 }