@rimori/react-client 0.1.0 → 0.2.0

package/src/components/audio/Playbutton.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { FaPlayCircle, FaStopCircle } from 'react-icons/fa';
 import { useRimori } from '../../providers/PluginProvider';
-import { Spinner } from '../Spinner';
 import { EventBus } from '@rimori/client';
 
 type AudioPlayerProps = {
@@ -124,3 +123,31 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
     </div>
   );
 };
+
+interface SpinnerProps {
+  text?: string;
+  size?: string;
+  className?: string;
+}
+
+const Spinner = ({ text, className, size = '30px' }: SpinnerProps) => {
+  return (
+    <div className={'flex items-center space-x-2 ' + className}>
+      <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"
+      >
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+        <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"
+        ></path>
+      </svg>
+      {text && <span className="">{text}</span>}
+    </div>
+  );
+};

package/src/hooks/ThemeSetter.ts

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+export function useTheme(theme?: string | null): boolean {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const nextIsDark = isDarkTheme(theme);
+
+    setIsDark(nextIsDark);
+    root.classList.add('dark:text-gray-200');
+
+    if (nextIsDark) {
+      root.setAttribute('data-theme', 'dark');
+      root.classList.add('dark', 'dark:bg-gray-950');
+      root.style.background = 'hsl(var(--background))';
+      return;
+    }
+
+    root.removeAttribute('data-theme');
+    root.classList.remove('dark', 'dark:bg-gray-950');
+    root.style.background = '';
+  }, [theme]);
+
+  return isDark;
+}
+
+export function isDarkTheme(theme?: string | null): boolean {
+  // 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/src/index.ts

@@ -0,0 +1,10 @@
+// Re-export everything
+export * from './hooks/UseChatHook';
+export * from './providers/PluginProvider';
+export * from './components/audio/Playbutton';
+export * from './components/ai/EmbeddedAssistent/TTS/Player';
+export * from './components/ai/Avatar';
+export { FirstMessages } from './components/ai/utils';
+export { useTranslation } from './hooks/I18nHooks';
+export { Avatar } from './components/ai/Avatar';
+export { VoiceRecorder } from './components/ai/EmbeddedAssistent/VoiceRecorder';

package/src/providers/PluginProvider.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, ReactNode, useEffect, useState } from 'react';
 import { EventBusHandler, RimoriClient, StandaloneClient } from '@rimori/client';
 import ContextMenu from '../components/ContextMenu';
+import { useTheme } from '../hooks/ThemeSetter';
 
 interface PluginProviderProps {
   children: ReactNode;
@@ -18,6 +19,8 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
   const [applicationMode, setApplicationMode] = useState<string | null>(null);
   const [theme, setTheme] = useState<string | null>(null);
 
+  useTheme(theme);
+
   const isSidebar = applicationMode === 'sidebar';
   const isSettings = applicationMode === 'settings';
 
@@ -28,13 +31,13 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
     const standaloneDetected = window === window.parent;
 
     if (standaloneDetected && !standaloneClient) {
-      StandaloneClient.getInstance().then((client) => {
-        client.needsLogin().then((needLogin) => setStandaloneClient(needLogin ? client : true));
+      void StandaloneClient.getInstance().then((client) => {
+        void client.needsLogin().then((needLogin) => setStandaloneClient(needLogin ? client : true));
       });
     }
 
     if ((!standaloneDetected && !plugin) || (standaloneDetected && standaloneClient === true)) {
-      RimoriClient.getInstance(pluginId).then((client) => {
+      void RimoriClient.getInstance(pluginId).then((client) => {
         setPlugin(client);
         // Get applicationMode and theme from MessageChannel query params
         if (!standaloneDetected) {
@@ -42,10 +45,11 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
           const themeParam = client.getQueryParam('rm_theme');
           setApplicationMode(mode);
           setTheme(themeParam);
+          client.event.emit('self.rimori.triggerInitFinished');
         }
       });
     }
-  }, [pluginId, standaloneClient]);
+  }, [pluginId, standaloneClient, plugin]);
 
   //route change
   useEffect(() => {
@@ -66,7 +70,7 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
 
     emitUrlChange(lastHash);
     return () => clearInterval(interval);
-  }, [plugin]);
+  }, [plugin, isSidebar]);
 
   if (standaloneClient instanceof StandaloneClient) {
     return (
@@ -98,7 +102,7 @@ export const useRimori = () => {
   return context;
 };
 
-function getUrlParam(name: string) {
+function getUrlParam(name: string): string | null {
   // First try to get from URL hash query params (for compatibility)
   const hashParts = window.location.hash.split('?');
   if (hashParts.length > 1) {
@@ -112,13 +116,13 @@ function getUrlParam(name: string) {
   return url.searchParams.get(name);
 }
 
-function initEventBus(pluginId: string) {
+function initEventBus(pluginId: string): void {
   // 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 }: { onLogin: (user: string, password: string) => void }) {
+function StandaloneAuth({ onLogin }: { onLogin: (user: string, password: string) => void }): JSX.Element {
   const [user, setUser] = useState('');
   const [password, setPassword] = useState('');
   return (

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "outDir": "dist",
+    "rootDir": "src",
     "module": "ESNext",
     "target": "ES6",
     "declaration": true,
@@ -8,16 +9,9 @@
     "moduleResolution": "node",
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "strict": true,
-    "baseUrl": ".",
-    "paths": {
-      "@rimori/client": [
-        "../rimori-client/src/index.ts"
-      ],
-      "@rimori/client/*": [
-        "../rimori-client/src/*"
-      ]
-    }
+    "strict": true
   },
-  "include": ["src/**/*"]
-}
+  "include": [
+    "src/**/*"
+  ]
+}

package/dist/components/components/ContextMenu.d.ts

@@ -1,10 +0,0 @@
-import { RimoriClient } from '../../plugin/RimoriClient';
-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/components/components/ContextMenu.js

@@ -1,135 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import { EventBus } from '../../fromRimori/EventBus';
-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/plugin/ThemeSetter.js

@@ -1,19 +0,0 @@
-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/MarkdownEditor.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +0,0 @@
-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 {};