@rimori/react-client 0.4.11-next.3 → 0.4.11-next.5

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

@@ -15,5 +15,7 @@ export interface BuddyAssistantProps {
     className?: string;
     voiceSpeed?: number;
     tools?: Tool[];
+    /** Set to true to disable automatic dialect from userInfo. Default: false (dialect enabled). */
+    disableDialect?: boolean;
 }
-export declare function BuddyAssistant({ systemPrompt, autoStartConversation, circleSize, chatPlaceholder, bottomAction, className, voiceSpeed, tools, }: BuddyAssistantProps): JSX.Element;
+export declare function BuddyAssistant({ systemPrompt, autoStartConversation, circleSize, chatPlaceholder, bottomAction, className, voiceSpeed, tools, disableDialect, }: BuddyAssistantProps): JSX.Element;

package/dist/components/ai/BuddyAssistant.js

@@ -9,11 +9,16 @@ 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, }) {
+export function BuddyAssistant({ systemPrompt, autoStartConversation, circleSize = '160px', chatPlaceholder, bottomAction, className, voiceSpeed = 1, tools, disableDialect = false, }) {
     var _a;
-    const { ai, event, plugin } = useRimori();
+    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([]);
@@ -24,6 +29,9 @@ export function BuddyAssistant({ systemPrompt, autoStartConversation, circleSize
         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);
@@ -31,9 +39,9 @@ export function BuddyAssistant({ systemPrompt, autoStartConversation, circleSize
         sender.setOnEndOfSpeech(() => setIsSpeaking(false));
         return () => sender.cleanup();
     }, [sender]);
-    // Build full API message list with system prompt
+    // Build full API message list with system prompt (dialect appended when enabled)
     const buildApiMessages = (history) => [
-        { role: 'system', content: systemPrompt },
+        { role: 'system', content: systemPrompt + dialectSystemSuffix },
         ...history.map((m) => ({ role: m.role, content: m.content })),
     ];
     const triggerAI = (history) => {

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

@@ -10,6 +10,10 @@ type AudioPlayerProps = {
     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, size = '25px', }) => {
+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);
     });

package/dist/components/editor/MarkdownEditor.js

@@ -24,7 +24,7 @@ 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, LuUnlink, 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>.
@@ -126,7 +126,7 @@ 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');
@@ -135,7 +135,7 @@ const MenuBar = ({ editor, onUpdate, uploadImage, labels }) => {
         '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 })] }));
+                                    (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, style: { transform: 'scaleX(-1)' } }) }), _jsxs("div", { className: 'ml-auto flex items-center gap-0.5 ' + (isFullscreen ? 'pr-10' : ''), children: [_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',
@@ -176,6 +176,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)
@@ -208,6 +210,14 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(markdown);
         },
     });
+    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(() => {
@@ -225,8 +235,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/package.json

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

@@ -25,6 +25,8 @@ export interface BuddyAssistantProps {
   className?: string;
   voiceSpeed?: number;
   tools?: Tool[];
+  /** Set to true to disable automatic dialect from userInfo. Default: false (dialect enabled). */
+  disableDialect?: boolean;
 }
 
 let idCounter = 0;
@@ -39,10 +41,16 @@ export function BuddyAssistant({
   className,
   voiceSpeed = 1,
   tools,
+  disableDialect = false,
 }: BuddyAssistantProps): JSX.Element {
-  const { ai, event, plugin } = useRimori();
+  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('');
@@ -60,6 +68,10 @@ export function BuddyAssistant({
     [buddy?.voiceId, ai],
   );
 
+  useEffect(() => {
+    sender.setInstructions(dialectTtsInstruction);
+  }, [sender, dialectTtsInstruction]);
+
   // Setup sender callbacks and cleanup
   useEffect(() => {
     sender.setVoiceSpeed(voiceSpeed);
@@ -68,9 +80,9 @@ export function BuddyAssistant({
     return () => sender.cleanup();
   }, [sender]);
 
-  // Build full API message list with system prompt
+  // Build full API message list with system prompt (dialect appended when enabled)
   const buildApiMessages = (history: ChatMessage[]) => [
-    { role: 'system' as const, content: systemPrompt },
+    { role: 'system' as const, content: systemPrompt + dialectSystemSuffix },
     ...history.map((m) => ({ role: m.role, content: m.content })),
   ];
 

package/src/components/audio/Playbutton.tsx

@@ -14,6 +14,10 @@ type AudioPlayerProps = {
   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];
@@ -32,12 +36,14 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
   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);
 
@@ -52,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);
   };

package/src/components/editor/MarkdownEditor.tsx

@@ -25,7 +25,18 @@ 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,
+  LuUnlink,
+  LuCopy,
+  LuCheck,
+  LuMaximize2,
+  LuMinimize2,
+} from 'react-icons/lu';
 import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
 import { ImageUploadExtension, triggerImageUpload } from './ImageUploadExtension';
 
@@ -230,9 +241,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));
@@ -453,8 +477,22 @@ const MenuBar = ({ editor, onUpdate, uploadImage, labels }: MenuBarProps): JSX.E
           className={tableBtnClass}
           title={labels.appendMarkdown}
         >
-          <LuClipboardPaste size={18} />
+          <LuClipboardPaste size={18} style={{ transform: 'scaleX(-1)' }} />
         </button>
+
+        <div className={'ml-auto flex items-center gap-0.5 ' + (isFullscreen ? 'pr-10' : '')}>
+          <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
@@ -570,6 +608,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> => {
@@ -611,6 +651,14 @@ export const MarkdownEditor = ({
     },
   });
 
+  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(() => {
@@ -627,20 +675,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>
   );
 };