@rimori/react-client 0.1.0

package/dist/providers/PluginProvider.js

@@ -0,0 +1,142 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from 'react';
+import { RimoriClient, StandaloneClient } from '@rimori/client';
+import ContextMenu from '../components/components/ContextMenu';
+const PluginContext = createContext(null);
+export const PluginProvider = ({ children, pluginId, settings }) => {
+    const [plugin, setPlugin] = useState(null);
+    const [standaloneClient, setStandaloneClient] = useState(false);
+    const [applicationMode, setApplicationMode] = useState(null);
+    const [theme, setTheme] = useState(null);
+    const isSidebar = applicationMode === 'sidebar';
+    const isSettings = applicationMode === 'settings';
+    useEffect(() => {
+        initEventBus(pluginId);
+        // Check if we're in an iframe context - if not, we're standalone
+        const standaloneDetected = window === window.parent;
+        if (standaloneDetected && !standaloneClient) {
+            StandaloneClient.getInstance().then((client) => {
+                client.needsLogin().then((needLogin) => setStandaloneClient(needLogin ? client : true));
+            });
+        }
+        if ((!standaloneDetected && !plugin) || (standaloneDetected && standaloneClient === true)) {
+            RimoriClient.getInstance(pluginId, standaloneDetected).then((client) => {
+                setPlugin(client);
+                // Get applicationMode and theme from MessageChannel query params
+                if (!standaloneDetected) {
+                    const mode = client.getQueryParam('applicationMode');
+                    const themeParam = client.getQueryParam('rm_theme');
+                    setApplicationMode(mode);
+                    setTheme(themeParam);
+                }
+            });
+        }
+    }, [pluginId, standaloneClient]);
+    //route change
+    useEffect(() => {
+        if (!plugin)
+            return;
+        //sidebar pages should not report url changes
+        if (isSidebar)
+            return;
+        let lastHash = window.location.hash;
+        const emitUrlChange = (url) => plugin.event.emit('session.triggerUrlChange', { url });
+        const interval = setInterval(() => {
+            if (lastHash === window.location.hash)
+                return;
+            lastHash = window.location.hash;
+            // console.log('url changed:', lastHash);
+            emitUrlChange(lastHash);
+        }, 1000);
+        emitUrlChange(lastHash);
+        return () => clearInterval(interval);
+    }, [plugin]);
+    if (standaloneClient instanceof StandaloneClient) {
+        return (_jsx(StandaloneAuth, { onLogin: (email, password) => __awaiter(void 0, void 0, void 0, function* () {
+                if (yield standaloneClient.login(email, password))
+                    setStandaloneClient(true);
+            }) }));
+    }
+    if (!plugin) {
+        return '';
+    }
+    return (_jsxs(PluginContext.Provider, { value: plugin, children: [!(settings === null || settings === void 0 ? void 0 : settings.disableContextMenu) && !isSidebar && !isSettings && _jsx(ContextMenu, { client: plugin }), children] }));
+};
+export const useRimori = () => {
+    const context = useContext(PluginContext);
+    if (context === null) {
+        throw new Error('useRimori must be used within an PluginProvider');
+    }
+    return context;
+};
+function getUrlParam(name) {
+    // First try to get from URL hash query params (for compatibility)
+    const hashParts = window.location.hash.split('?');
+    if (hashParts.length > 1) {
+        const hashParams = new URLSearchParams(hashParts[1]);
+        const hashValue = hashParams.get(name);
+        if (hashValue)
+            return hashValue;
+    }
+    // Fallback to regular URL search params
+    const url = new URL(window.location.href);
+    return url.searchParams.get(name);
+}
+function initEventBus(pluginId) {
+    // For now, use URL fallback for EventBus naming - this will be updated once MessageChannel is ready
+    const isSidebar = getUrlParam('applicationMode') === 'sidebar';
+    EventBusHandler.getInstance('Plugin EventBus ' + pluginId + ' ' + (isSidebar ? 'sidebar' : 'main'));
+}
+function StandaloneAuth({ onLogin }) {
+    const [user, setUser] = useState('');
+    const [password, setPassword] = useState('');
+    return (_jsx("div", { style: {
+            position: 'fixed',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        }, children: _jsxs("div", { style: {
+                backgroundColor: '#343534',
+                padding: '1rem',
+                borderRadius: '0.5rem',
+                width: '500px',
+                flexDirection: 'column',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: [_jsx("p", { style: { fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem', textAlign: 'center' }, children: "Rimori Login" }), _jsx("p", { style: { marginBottom: '1rem', textAlign: 'center' }, children: "Please login with your Rimori developer account for this plugin to be able to access the Rimori platform the same it will operate in the Rimori platform." }), _jsx("input", { style: {
+                        marginBottom: '1rem',
+                        width: '100%',
+                        padding: '0.5rem',
+                        borderRadius: '0.5rem',
+                        border: 'none',
+                        backgroundColor: '#444444',
+                    }, type: "email", placeholder: "Email", onChange: (e) => setUser(e.target.value) }), _jsx("input", { style: {
+                        marginBottom: '1rem',
+                        width: '100%',
+                        padding: '0.5rem',
+                        borderRadius: '0.5rem',
+                        border: 'none',
+                        backgroundColor: '#444444',
+                    }, type: "password", placeholder: "Password", onChange: (e) => setPassword(e.target.value) }), _jsx("button", { style: {
+                        marginBottom: '1rem',
+                        width: '100%',
+                        padding: '0.5rem',
+                        borderRadius: '0.5rem',
+                        border: 'none',
+                        backgroundColor: '#928358',
+                    }, onClick: () => {
+                        onLogin(user, password);
+                    }, children: "Login" })] }) }));
+}

package/dist/react-client/plugin/ThemeSetter.d.ts

@@ -0,0 +1,2 @@
+export declare function setTheme(theme?: string | null): void;
+export declare function isDarkTheme(theme?: string | null): boolean;

package/dist/react-client/plugin/ThemeSetter.js

@@ -0,0 +1,19 @@
+export function setTheme(theme) {
+    document.documentElement.classList.add('dark:text-gray-200');
+    if (isDarkTheme(theme)) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        document.documentElement.classList.add('dark', 'dark:bg-gray-950');
+        document.documentElement.style.background = 'hsl(var(--background))';
+    }
+}
+export function isDarkTheme(theme) {
+    // If no theme provided, try to get from URL as fallback (for standalone mode)
+    if (!theme) {
+        const urlParams = new URLSearchParams(window.location.search);
+        theme = urlParams.get('theme');
+    }
+    if (!theme || theme === 'system') {
+        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return theme === 'dark';
+}

package/dist/react-client/src/components/ContextMenu.d.ts

@@ -0,0 +1,10 @@
+import { RimoriClient } from '@rimori/client';
+export interface Position {
+    x: number;
+    y: number;
+    text?: string;
+}
+declare const ContextMenu: ({ client }: {
+    client: RimoriClient;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default ContextMenu;

package/dist/react-client/src/components/ContextMenu.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { EventBus } from '@rimori/client';
+const ContextMenu = ({ client }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [actions, setActions] = useState([]);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [openOnTextSelect, setOpenOnTextSelect] = useState(false);
+    const [menuWidth, setMenuWidth] = useState(0);
+    const menuRef = useRef(null);
+    const isMobile = window.innerWidth < 768;
+    /**
+     * Calculates position for mobile context menu based on selected text bounds.
+     * Centers the menu horizontally over the selected text and positions it 30px below the text's end.
+     * @param selectedText - The currently selected text
+     * @param menuWidth - The width of the menu to center properly
+     * @returns Position object with x and y coordinates
+     */
+    const calculateMobilePosition = (selectedText, menuWidth = 0) => {
+        const selection = window.getSelection();
+        if (!selection || !selectedText) {
+            return { x: 0, y: 0, text: selectedText };
+        }
+        const range = selection.getRangeAt(0);
+        const rect = range.getBoundingClientRect();
+        // Center horizontally over the selected text, accounting for menu width
+        const centerX = rect.left + rect.width / 2 - menuWidth / 2;
+        // Position 12px below where the text ends vertically
+        const textEndY = rect.bottom + 12;
+        return { x: centerX, y: textEndY, text: selectedText };
+    };
+    useEffect(() => {
+        const actions = client.plugin
+            .getPluginInfo()
+            .installedPlugins.flatMap((p) => p.context_menu_actions)
+            .filter(Boolean);
+        setActions(actions);
+        setOpenOnTextSelect(client.plugin.getUserInfo().context_menu_on_select);
+        EventBus.on('global.contextMenu.createActions', ({ data }) => {
+            setActions([...data.actions, ...actions]);
+        });
+    }, []);
+    // Update menu width when menu is rendered
+    useEffect(() => {
+        if (isOpen && menuRef.current) {
+            setMenuWidth(menuRef.current.offsetWidth);
+        }
+    }, [isOpen, actions]);
+    useEffect(() => {
+        // Track mouse position globally
+        const handleMouseMove = (e) => {
+            var _a;
+            const selectedText = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
+            if (isOpen && selectedText === position.text)
+                return;
+            if (isMobile && selectedText) {
+                setPosition(calculateMobilePosition(selectedText, menuWidth));
+            }
+            else {
+                setPosition({ x: e.clientX, y: e.clientY, text: selectedText });
+            }
+        };
+        const handleMouseUp = (e) => {
+            var _a, _b;
+            const selectedText = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
+            // Check if click is inside the context menu
+            if (menuRef.current && menuRef.current.contains(e.target)) {
+                // Don't close the menu if clicking inside
+                return;
+            }
+            // Prevent context menu on textarea or text input selection
+            const target = e.target;
+            const isTextInput = target &&
+                (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && target.type === 'text'));
+            if (isTextInput) {
+                setIsOpen(false);
+                return;
+            }
+            if (e.button === 0 && isOpen) {
+                setIsOpen(false);
+                (_b = window.getSelection()) === null || _b === void 0 ? void 0 : _b.removeAllRanges();
+            }
+            else if (selectedText && (openOnTextSelect || e.button === 2)) {
+                if (e.button === 2) {
+                    e.preventDefault();
+                }
+                if (isMobile) {
+                    setPosition(calculateMobilePosition(selectedText, menuWidth));
+                }
+                else {
+                    setPosition({ x: e.clientX, y: e.clientY, text: selectedText });
+                }
+                setIsOpen(true);
+            }
+            else {
+                setIsOpen(false);
+            }
+        };
+        // Add selectionchange listener to close menu if selection is cleared and update position for mobile
+        const handleSelectionChange = () => {
+            var _a;
+            const selectedText = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
+            if (!selectedText && isOpen) {
+                setIsOpen(false);
+            }
+            else if (selectedText && isOpen && isMobile) {
+                // Update position in real-time as text selection changes on mobile
+                setPosition(calculateMobilePosition(selectedText, menuWidth));
+            }
+        };
+        document.addEventListener('mouseup', handleMouseUp);
+        window.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('contextmenu', handleMouseUp);
+        document.addEventListener('selectionchange', handleSelectionChange);
+        return () => {
+            document.removeEventListener('mouseup', handleMouseUp);
+            window.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('contextmenu', handleMouseUp);
+            document.removeEventListener('selectionchange', handleSelectionChange);
+        };
+    }, [openOnTextSelect, isOpen, position.text]);
+    if (!isOpen) {
+        return null;
+    }
+    return (_jsx("div", { ref: menuRef, className: "fixed bg-gray-400 dark:bg-gray-700 shadow-lg border border-gray-400 rounded-md overflow-hidden dark:text-white z-50", style: { top: position.y, left: position.x }, children: actions.map((action, index) => (_jsx(MenuEntryItem, { icon: action.icon, text: action.text, onClick: () => {
+                var _a;
+                setIsOpen(false);
+                (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+                client.event.emitSidebarAction(action.plugin_id, action.action_key, position.text);
+            } }, index))) }));
+};
+function MenuEntryItem(props) {
+    return (_jsxs("button", { onClick: props.onClick, className: "px-4 py-2 text-left hover:bg-gray-500 dark:hover:bg-gray-600 w-full flex flex-row", children: [_jsx("span", { className: "flex-grow", children: props.icon }), _jsx("span", { className: "flex-grow", children: props.text })] }));
+}
+export default ContextMenu;

package/dist/react-client/src/components/MarkdownEditor.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    content?: string;
+    editable: boolean;
+    className?: string;
+    onUpdate?: (content: string) => void;
+}
+export declare const MarkdownEditor: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react-client/src/components/MarkdownEditor.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Markdown } from 'tiptap-markdown';
+import StarterKit from '@tiptap/starter-kit';
+import { PiCodeBlock } from 'react-icons/pi';
+import { TbBlockquote } from 'react-icons/tb';
+import { GoListOrdered } from 'react-icons/go';
+import { AiOutlineUnorderedList } from 'react-icons/ai';
+import { EditorProvider, useCurrentEditor } from '@tiptap/react';
+import { LuHeading1, LuHeading2, LuHeading3 } from 'react-icons/lu';
+import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
+const EditorButton = ({ action, isActive, label, disabled }) => {
+    const { editor } = useCurrentEditor();
+    if (!editor) {
+        return null;
+    }
+    if (action.includes('heading')) {
+        const level = parseInt(action[action.length - 1]);
+        return (_jsx("button", { onClick: () => editor.chain().focus().toggleHeading({ level: level }).run(), className: `pl-2 ${isActive ? 'is-active' : ''}`, children: label }));
+    }
+    return (_jsx("button", { onClick: () => editor.chain().focus()[action]().run(), disabled: disabled ? !editor.can().chain().focus()[action]().run() : false, className: `pl-2 ${isActive ? 'is-active' : ''}`, children: label }));
+};
+const MenuBar = () => {
+    const { editor } = useCurrentEditor();
+    if (!editor) {
+        return null;
+    }
+    return (_jsxs("div", { className: "bg-gray-400 dark:bg-gray-800 dark:text-white text-lg flex flex-row flex-wrap items-center p-1", children: [_jsx(EditorButton, { action: "toggleBold", isActive: editor.isActive('bold'), label: _jsx(FaBold, {}), disabled: true }), _jsx(EditorButton, { action: "toggleItalic", isActive: editor.isActive('italic'), label: _jsx(FaItalic, {}), disabled: true }), _jsx(EditorButton, { action: "toggleStrike", isActive: editor.isActive('strike'), label: _jsx(FaStrikethrough, {}), disabled: true }), _jsx(EditorButton, { action: "toggleCode", isActive: editor.isActive('code'), label: _jsx(FaCode, {}), disabled: true }), _jsx(EditorButton, { action: "setParagraph", isActive: editor.isActive('paragraph'), label: _jsx(FaParagraph, {}) }), _jsx(EditorButton, { action: "setHeading1", isActive: editor.isActive('heading', { level: 1 }), label: _jsx(LuHeading1, { size: '24px' }) }), _jsx(EditorButton, { action: "setHeading2", isActive: editor.isActive('heading', { level: 2 }), label: _jsx(LuHeading2, { size: '24px' }) }), _jsx(EditorButton, { action: "setHeading3", isActive: editor.isActive('heading', { level: 3 }), label: _jsx(LuHeading3, { size: '24px' }) }), _jsx(EditorButton, { action: "toggleBulletList", isActive: editor.isActive('bulletList'), label: _jsx(AiOutlineUnorderedList, { size: '24px' }) }), _jsx(EditorButton, { action: "toggleOrderedList", isActive: editor.isActive('orderedList'), label: _jsx(GoListOrdered, { size: '24px' }) }), _jsx(EditorButton, { action: "toggleCodeBlock", isActive: editor.isActive('codeBlock'), label: _jsx(PiCodeBlock, { size: '24px' }) }), _jsx(EditorButton, { action: "toggleBlockquote", isActive: editor.isActive('blockquote'), label: _jsx(TbBlockquote, { size: '24px' }) })] }));
+};
+const extensions = [
+    StarterKit.configure({
+        bulletList: {
+            HTMLAttributes: {
+                class: 'list-disc list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
+            },
+        },
+        orderedList: {
+            HTMLAttributes: {
+                className: 'list-decimal list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
+            },
+        },
+    }),
+    Markdown,
+];
+export const MarkdownEditor = (props) => {
+    return (_jsx("div", { className: 'text-md border border-gray-800 overflow-hidden ' + props.className, style: { borderWidth: props.editable ? 1 : 0 }, children: _jsx(EditorProvider, { slotBefore: props.editable ? _jsx(MenuBar, {}) : null, extensions: extensions, content: props.content, editable: props.editable, onUpdate: (e) => {
+                props.onUpdate && props.onUpdate(e.editor.storage.markdown.getMarkdown());
+            } }, (props.editable ? 'editable' : 'readonly') + props.content) }));
+};

package/dist/react-client/src/components/Spinner.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SpinnerProps {
+    text?: string;
+    size?: string;
+    className?: string;
+}
+export declare const Spinner: React.FC<SpinnerProps>;
+export {};

package/dist/react-client/src/components/Spinner.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export 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/react-client/src/components/ai/Assistant.d.ts

@@ -0,0 +1,9 @@
+import { FirstMessages } from './utils';
+interface Props {
+    voiceId: any;
+    avatarImageUrl: string;
+    onComplete: (result: any) => void;
+    autoStartConversation?: FirstMessages;
+}
+export declare function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartConversation }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react-client/src/components/ai/Assistant.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo } from 'react';
+import { CircleAudioAvatar } from './EmbeddedAssistent/CircleAudioAvatar';
+import { AudioInputField } from './EmbeddedAssistent/AudioInputField';
+import { MessageSender } from './EmbeddedAssistent/TTS/MessageSender';
+import Markdown from 'react-markdown';
+import { useChat } from '../../hooks/UseChatHook';
+import { useRimori } from '../../providers/PluginProvider';
+import { getFirstMessages } from './utils';
+export function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartConversation }) {
+    var _a;
+    const [oralCommunication, setOralCommunication] = React.useState(true);
+    const { ai: llm, event } = useRimori();
+    const sender = useMemo(() => new MessageSender(llm.getVoice, voiceId), []);
+    const { messages, append, isLoading, setMessages } = useChat();
+    const lastAssistantMessage = (_a = [...messages].filter((m) => m.role === 'assistant').pop()) === null || _a === void 0 ? void 0 : _a.content;
+    useEffect(() => {
+        sender.setOnLoudnessChange((value) => event.emit('self.avatar.triggerLoudness', { loudness: value }));
+        if (!autoStartConversation) {
+            return;
+        }
+        setMessages(getFirstMessages(autoStartConversation));
+        // append([{ role: 'user', content: autoStartConversation.userMessage }]);
+        if (autoStartConversation.assistantMessage) {
+            // console.log("autostartmessages", { autoStartConversation, isLoading });
+            sender.handleNewText(autoStartConversation.assistantMessage, isLoading);
+        }
+    }, []);
+    useEffect(() => {
+        var _a;
+        let message = lastAssistantMessage;
+        if (message !== ((_a = messages[messages.length - 1]) === null || _a === void 0 ? void 0 : _a.content)) {
+            message = undefined;
+        }
+        sender.handleNewText(message, isLoading);
+    }, [messages, isLoading]);
+    const lastMessage = messages[messages.length - 1];
+    useEffect(() => {
+        console.log('lastMessage', lastMessage);
+        const toolInvocations = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.toolCalls;
+        if (toolInvocations && toolInvocations.length > 0) {
+            console.log('toolInvocations', toolInvocations);
+            onComplete(toolInvocations[0].args);
+        }
+    }, [lastMessage]);
+    if ((lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.toolCalls) && lastMessage.toolCalls.length > 0) {
+        console.log('lastMessage test2', lastMessage);
+        const args = lastMessage.toolCalls[0].args;
+        const success = args.explanationUnderstood === 'TRUE' || args.studentKnowsTopic === 'TRUE';
+        return (_jsxs("div", { className: "px-5 pt-5 overflow-y-auto text-center", style: { height: '478px' }, children: [_jsx("h1", { className: "text-center mt-5 mb-5", children: success ? 'Great job!' : 'You failed' }), _jsx("p", { children: args.improvementHints })] }));
+    }
+    return (_jsxs("div", { children: [oralCommunication && _jsx(CircleAudioAvatar, { imageUrl: avatarImageUrl, className: "mx-auto my-10" }), _jsx("div", { className: "w-full", children: lastAssistantMessage && (_jsx("div", { className: "px-5 pt-5 overflow-y-auto remirror-theme", style: { height: '4k78px' }, children: _jsx(Markdown, { children: lastAssistantMessage }) })) }), _jsx(AudioInputField, { blockSubmission: isLoading, onSubmit: (message) => {
+                    append([{ role: 'user', content: message, id: messages.length.toString() }]);
+                }, onAudioControl: (voice) => {
+                    setOralCommunication(voice);
+                    sender.setVolume(voice ? 1 : 0);
+                } })] }));
+}

package/dist/react-client/src/components/ai/Avatar.d.ts

@@ -0,0 +1,14 @@
+import { Tool } from '@rimori/client';
+import { FirstMessages } from './utils';
+interface Props {
+    voiceId: string;
+    agentTools: Tool[];
+    avatarImageUrl: string;
+    circleSize?: string;
+    isDarkTheme?: boolean;
+    children?: React.ReactNode;
+    autoStartConversation?: FirstMessages;
+    className?: string;
+}
+export declare function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, isDarkTheme, circleSize, className, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react-client/src/components/ai/Avatar.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { VoiceRecorder } from './EmbeddedAssistent/VoiceRecoder';
+import { MessageSender } from './EmbeddedAssistent/TTS/MessageSender';
+import { CircleAudioAvatar } from './EmbeddedAssistent/CircleAudioAvatar';
+import { useChat } from '../../hooks/UseChatHook';
+import { useRimori } from '../../providers/PluginProvider';
+import { getFirstMessages } from './utils';
+export function Avatar({ avatarImageUrl, voiceId, agentTools, autoStartConversation, children, isDarkTheme = false, circleSize = '300px', className, }) {
+    const { ai, event } = useRimori();
+    const [agentReplying, setAgentReplying] = useState(false);
+    const [isProcessingMessage, setIsProcessingMessage] = useState(false);
+    const sender = useMemo(() => new MessageSender(ai.getVoice, voiceId), [voiceId]);
+    const { messages, append, isLoading, lastMessage, setMessages } = useChat(agentTools);
+    useEffect(() => {
+        console.log('messages', messages);
+    }, [messages]);
+    useEffect(() => {
+        if (!isLoading)
+            setIsProcessingMessage(false);
+    }, [isLoading]);
+    useEffect(() => {
+        if (!voiceId)
+            return; //at the beginning when being mounted the voiceId is undefined
+        sender.setOnLoudnessChange((value) => event.emit('self.avatar.triggerLoudness', { loudness: value }));
+        sender.setOnEndOfSpeech(() => setAgentReplying(false));
+        if (!autoStartConversation)
+            return;
+        setMessages(getFirstMessages(autoStartConversation));
+        // append([{ role: 'user', content: autoStartConversation.userMessage }]);
+        if (autoStartConversation.assistantMessage) {
+            // console.log("autostartmessages", { autoStartConversation, isLoading });
+            sender.handleNewText(autoStartConversation.assistantMessage, isLoading);
+        }
+        else if (autoStartConversation.userMessage) {
+            append([{ role: 'user', content: autoStartConversation.userMessage, id: messages.length.toString() }]);
+        }
+    }, [autoStartConversation, voiceId]);
+    useEffect(() => {
+        if ((lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.role) === 'assistant') {
+            sender.handleNewText(lastMessage.content, isLoading);
+            if (lastMessage.toolCalls) {
+                // console.log("unlocking mic", lastMessage)
+                setAgentReplying(false);
+                setIsProcessingMessage(false);
+            }
+        }
+    }, [lastMessage, isLoading]);
+    return (_jsxs("div", { className: `md:pb-8 ${className || ''}`, children: [_jsx(CircleAudioAvatar, { width: circleSize, className: "mx-auto", imageUrl: avatarImageUrl, isDarkTheme: isDarkTheme }), children, _jsx(VoiceRecorder, { iconSize: "30", className: "w-16 h-16 shadow-lg rounded-full bg-gray-400 dark:bg-gray-800", disabled: agentReplying, loading: isProcessingMessage, enablePushToTalk: true, onVoiceRecorded: (message) => {
+                    setAgentReplying(true);
+                    append([
+                        {
+                            role: 'user',
+                            content: 'Message(' + Math.floor((messages.length + 1) / 2) + '): ' + message,
+                            id: messages.length.toString(),
+                        },
+                    ]);
+                }, onRecordingStatusChange: (running) => !running && setIsProcessingMessage(true) })] }));
+}

package/dist/react-client/src/components/ai/EmbeddedAssistent/AudioInputField.d.ts

@@ -0,0 +1,7 @@
+interface AudioInputFieldProps {
+    onSubmit: (text: string) => void;
+    onAudioControl?: (voice: boolean) => void;
+    blockSubmission?: boolean;
+}
+export declare function AudioInputField({ onSubmit, onAudioControl, blockSubmission }: AudioInputFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react-client/src/components/ai/EmbeddedAssistent/AudioInputField.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { VoiceRecorder } from './VoiceRecoder';
+import { BiSolidRightArrow } from 'react-icons/bi';
+import { HiMiniSpeakerXMark, HiMiniSpeakerWave } from 'react-icons/hi2';
+export function AudioInputField({ onSubmit, onAudioControl, blockSubmission = false }) {
+    const [text, setText] = useState('');
+    const [audioEnabled, setAudioEnabled] = useState(true);
+    const handleSubmit = (manualText) => {
+        if (blockSubmission)
+            return;
+        const sendableText = manualText || text;
+        if (sendableText.trim()) {
+            onSubmit(sendableText);
+            setTimeout(() => {
+                setText('');
+            }, 100);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (blockSubmission)
+            return;
+        if (e.key === 'Enter' && e.ctrlKey) {
+            setText(text + '\n');
+        }
+        else if (e.key === 'Enter') {
+            handleSubmit();
+        }
+    };
+    return (_jsxs("div", { className: "flex items-center bg-gray-600 pt-2 pb-2 p-2", children: [onAudioControl && (_jsx("button", { onClick: () => {
+                    onAudioControl(!audioEnabled);
+                    setAudioEnabled(!audioEnabled);
+                }, className: "cursor-default", children: audioEnabled ? (_jsx(HiMiniSpeakerWave, { className: "w-9 h-9 cursor-pointer" })) : (_jsx(HiMiniSpeakerXMark, { className: "w-9 h-9 cursor-pointer" })) })), _jsx(VoiceRecorder, { onRecordingStatusChange: () => { }, onVoiceRecorded: (m) => {
+                    console.log('onVoiceRecorded', m);
+                    handleSubmit(m);
+                } }), _jsx("textarea", { value: text, onChange: (e) => setText(e.target.value), onKeyDown: handleKeyDown, className: "flex-1 border-none rounded-lg p-2 text-gray-800 focus::outline-none", placeholder: "Type a message...", disabled: blockSubmission }), _jsx("button", { onClick: () => handleSubmit(), className: "cursor-default", disabled: blockSubmission, children: _jsx(BiSolidRightArrow, { className: "w-9 h-10 cursor-pointer" }) })] }));
+}

package/dist/react-client/src/components/ai/EmbeddedAssistent/CircleAudioAvatar.d.ts

@@ -0,0 +1,8 @@
+interface CircleAudioAvatarProps {
+    width?: string;
+    imageUrl: string;
+    className?: string;
+    isDarkTheme?: boolean;
+}
+export declare function CircleAudioAvatar({ imageUrl, className, isDarkTheme, width, }: CircleAudioAvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};