@rimori/client 1.0.3 → 1.0.4

package/dist/plugin/fromRimori/EventBus.js

@@ -0,0 +1,240 @@
+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());
+    });
+};
+export class EventBusHandler {
+    constructor() {
+        this.listeners = new Map();
+        this.responseResolvers = new Map();
+        this.debugEnabled = false;
+        this.evName = "";
+        //private constructor
+    }
+    static getInstance(name) {
+        if (!EventBusHandler.instance) {
+            EventBusHandler.instance = new EventBusHandler();
+            EventBusHandler.instance.on("global.system.requestDebug", () => {
+                EventBusHandler.instance.debugEnabled = true;
+                console.log(`[${EventBusHandler.instance.evName}] Debug mode enabled. Make sure debugging messages are enabled in the browser console.`);
+            });
+        }
+        if (name && EventBusHandler.instance.evName === "") {
+            EventBusHandler.instance.evName = name;
+        }
+        return EventBusHandler.instance;
+    }
+    createEvent(sender, topic, data, eventId) {
+        const generatedEventId = eventId || Math.floor(Math.random() * 10000000000);
+        return {
+            eventId: generatedEventId,
+            timestamp: new Date().toISOString(),
+            sender,
+            topic,
+            data,
+            debug: this.debugEnabled,
+        };
+    }
+    /**
+     * Emits an event to the event bus. Can be a new event or a response to a request.
+     * @param sender - The sender of the event.
+     * @param topic - The topic of the event.
+     * @param data - The data of the event.
+     * @param eventId - The event id of the event.
+     *
+     * The topic format is: **pluginId.area.action**
+     *
+     * Example topics:
+     * - pl1234.card.requestHard
+     * - pl1234.card.requestNew
+     * - pl1234.card.requestAll
+     * - pl1234.card.create
+     * - pl1234.card.update
+     * - pl1234.card.delete
+     * - pl1234.card.triggerBackup
+     */
+    emit(sender, topic, data, eventId) {
+        this.emitInternal(sender, topic, data || {}, eventId);
+    }
+    emitInternal(sender, topic, data, eventId, skipResponseTrigger = false) {
+        if (!this.validateTopic(topic)) {
+            this.logAndThrowError(false, `Invalid topic: ` + topic);
+            return;
+        }
+        const event = this.createEvent(sender, topic, data, eventId);
+        const handlers = this.getMatchingHandlers(event.topic);
+        handlers.forEach(handler => {
+            if (handler.ignoreSender && handler.ignoreSender.includes(sender)) {
+                // console.log("ignore event as its in the ignoreSender list", { event, ignoreList: handler.ignoreSender });
+                return;
+            }
+            handler.handler(event);
+        });
+        this.logIfDebug(`Emitting event to ` + topic, event);
+        if (handlers.size === 0) {
+            this.logAndThrowError(false, `No handlers found for topic: ` + topic);
+        }
+        // If it's a response to a request
+        if (eventId && this.responseResolvers.has(eventId) && !skipResponseTrigger) {
+            // console.log("[Rimori] Resolving response to request: " + eventId, event.data);
+            this.responseResolvers.get(eventId)(event);
+            this.responseResolvers.delete(eventId);
+        }
+    }
+    /**
+     * Subscribes to an event on the event bus.
+     * @param topics - The topic of the event.
+     * @param handler - The handler to be called when the event is emitted.
+     * @param ignoreSender - The senders to ignore.
+     * @returns The ids of the listeners.
+     */
+    on(topics, handler, ignoreSender = []) {
+        return this.toArray(topics).map(topic => {
+            if (!this.validateTopic(topic)) {
+                this.logAndThrowError(true, `Invalid topic: ` + topic);
+            }
+            if (!this.listeners.has(topic)) {
+                this.listeners.set(topic, new Set());
+            }
+            const id = Math.floor(Math.random() * 10000000000);
+            // Type assertion to handle the generic type mismatch
+            const eventHandler = handler;
+            this.listeners.get(topic).add({ id, handler: eventHandler, ignoreSender });
+            this.logIfDebug(`Subscribed to ` + topic, { listenerId: id, ignoreSender });
+            return btoa(JSON.stringify({ topic, id }));
+        });
+    }
+    /**
+     * Subscribes to an event, processes the data and emits a response on the event bus.
+     * @param sender - The sender of the event.
+     * @param topic - The topic of the event.
+     * @param handler - The handler to be called when the event is received. The handler returns the data to be emitted. Can be a static object or a function.
+     * @returns The ids of the listeners.
+     */
+    respond(sender, topic, handler) {
+        const ids = this.on(topic, (data) => __awaiter(this, void 0, void 0, function* () {
+            const response = typeof handler === "function" ? yield handler(data) : handler;
+            this.emit(sender, topic, response, data.eventId);
+        }), [sender]);
+        this.logIfDebug(`Added respond listener ` + sender + " to topic " + topic, { listenerIds: ids, sender });
+        return ids;
+    }
+    /**
+     * Subscribes to an event on the event bus. The handler will be called once and then removed.
+     * @param topic - The topic of the event.
+     * @param handler - The handler to be called when the event is emitted.
+     */
+    once(topic, handler) {
+        if (!this.validateTopic(topic)) {
+            this.logAndThrowError(false, `Invalid topic: ` + topic);
+            return;
+        }
+        let ids = [];
+        const wrapper = (event) => {
+            handler(event);
+            this.off(ids);
+        };
+        ids = this.on(topic, wrapper);
+        this.logIfDebug(`Added once listener ` + topic, { listenerIds: ids, topic });
+    }
+    /**
+     * Unsubscribes from an event on the event bus.
+     * @param listenerIds - The ids of the listeners to unsubscribe from.
+     */
+    off(listenerIds) {
+        this.toArray(listenerIds).forEach(fullId => {
+            const { topic, id } = JSON.parse(atob(fullId));
+            const listeners = this.listeners.get(topic) || new Set();
+            listeners.forEach(listener => {
+                if (listener.id === Number(id)) {
+                    listeners.delete(listener);
+                    this.logIfDebug(`Removed listener ` + fullId, { topic, listenerId: id });
+                }
+            });
+        });
+    }
+    toArray(item) {
+        return Array.isArray(item) ? item : [item];
+    }
+    /**
+     * Requests data from the event bus.
+     * @param sender - The sender of the event.
+     * @param topic - The topic of the event.
+     * @param data - The data of the event.
+     * @returns A promise that resolves to the event.
+     */
+    request(sender, topic, data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.validateTopic(topic)) {
+                this.logAndThrowError(true, `Invalid topic: ` + topic);
+            }
+            const event = this.createEvent(sender, topic, data || {});
+            this.logIfDebug(`Requesting data from ` + topic, { event });
+            return new Promise(resolve => {
+                this.responseResolvers.set(event.eventId, (value) => resolve(value));
+                this.emitInternal(sender, topic, data || {}, event.eventId, true);
+            });
+        });
+    }
+    /**
+     * Gets the matching handlers for an event.
+     * @param topic - The topic of the event.
+     * @returns A set of handlers that match the event type.
+     */
+    getMatchingHandlers(topic) {
+        const exact = this.listeners.get(topic) || new Set();
+        // Find wildcard matches
+        const wildcard = [...this.listeners.entries()]
+            .filter(([key]) => key.endsWith("*") && topic.startsWith(key.slice(0, -1)))
+            .flatMap(([_, handlers]) => [...handlers]);
+        return new Set([...exact, ...wildcard]);
+    }
+    /**
+     * Validates the topic of an event.
+     * @param topic - The topic of the event.
+     * @returns True if the topic is valid, false otherwise.
+     */
+    validateTopic(topic) {
+        // Split event type into parts
+        const parts = topic.split(".");
+        const [plugin, area, action] = parts;
+        if (parts.length !== 3) {
+            if (parts.length === 1 && plugin === "*") {
+                return true;
+            }
+            if (parts.length === 2 && plugin !== "*" && area === "*") {
+                return true;
+            }
+            this.logAndThrowError(false, `Event type must have 3 parts separated by dots. Received: ` + topic);
+            return false;
+        }
+        if (action === "*") {
+            return true;
+        }
+        // Validate action part
+        const validActions = ["request", "create", "update", "delete", "trigger"];
+        if (validActions.some(a => action.startsWith(a))) {
+            return true;
+        }
+        this.logAndThrowError(false, `Invalid event topic name. The action: ` + action + ". Must be or start with one of: " + validActions.join(", "));
+        return false;
+    }
+    logIfDebug(...args) {
+        if (this.debugEnabled) {
+            console.debug(`[${this.evName}] ` + args[0], ...args.slice(1));
+        }
+    }
+    logAndThrowError(throwError, ...args) {
+        const message = `[${this.evName}] ` + args[0];
+        console.error(message, ...args.slice(1));
+        if (throwError) {
+            throw new Error(message);
+        }
+    }
+}
+EventBusHandler.instance = null;
+export const EventBus = EventBusHandler.getInstance();

package/dist/providers/PluginProvider.d.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { RimoriClient } from '../plugin/RimoriClient';
 interface PluginProviderProps {
     children: ReactNode;
+    pluginId: string;
 }
 export declare const PluginProvider: React.FC<PluginProviderProps>;
 export declare const usePlugin: () => RimoriClient;

package/dist/providers/PluginProvider.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState } from 'react';
 import { PluginController } from '../plugin/PluginController';
+import { EventBusHandler } from '../plugin/fromRimori/EventBus';
+EventBusHandler.getInstance("Plugin EventBus");
 const PluginContext = createContext(null);
-export const PluginProvider = ({ children }) => {
+export const PluginProvider = ({ children, pluginId }) => {
     const [plugin, setPlugin] = useState(null);
     const [contextMenuOnSelect, setContextMenuOnTextSelection] = useState(false);
     //route change
@@ -12,21 +14,17 @@ export const PluginProvider = ({ children }) => {
             if (lastHash !== window.location.hash) {
                 lastHash = window.location.hash;
                 console.log('url changed:', lastHash);
-                plugin === null || plugin === void 0 ? void 0 : plugin.emit('urlChange', window.location.hash);
+                plugin === null || plugin === void 0 ? void 0 : plugin.event.emit('session.triggerUrlChange', window.location.hash);
             }
         }, 100);
-        PluginController.getInstance().then(setPlugin);
+        PluginController.getInstance(pluginId).then(setPlugin);
     }, []);
     //check if context menu opens on text selection
     useEffect(() => {
         if (!plugin)
             return;
-        plugin.getSettings({
-            languageLevel: "A1",
-            motherTongue: "English",
-            contextMenuOnSelect: false,
-        }, "user").then((settings) => {
-            setContextMenuOnTextSelection(settings.contextMenuOnSelect);
+        plugin.plugin.getUserInfo().then((userInfo) => {
+            setContextMenuOnTextSelection(userInfo.contextMenuOnSelect);
         }).catch(error => {
             console.error('Error fetching settings:', error);
         });
@@ -34,7 +32,7 @@ export const PluginProvider = ({ children }) => {
     //detect page height change
     useEffect(() => {
         const body = document.body;
-        const handleResize = () => plugin === null || plugin === void 0 ? void 0 : plugin.emit('heightAdjustment', body.clientHeight);
+        const handleResize = () => plugin === null || plugin === void 0 ? void 0 : plugin.event.emit('session.triggerHeightChange', body.clientHeight);
         body.addEventListener('resize', handleResize);
         handleResize();
         return () => body.removeEventListener('resize', handleResize);
@@ -55,7 +53,7 @@ export const PluginProvider = ({ children }) => {
             if (selection) {
                 e.preventDefault();
                 // console.log('context menu handled', selection);
-                plugin === null || plugin === void 0 ? void 0 : plugin.emit('contextMenu', { text: selection, x: e.clientX, y: e.clientY, open: true });
+                plugin === null || plugin === void 0 ? void 0 : plugin.event.emit('global.contextMenu.trigger', { text: selection, x: e.clientX, y: e.clientY, open: true });
             }
         };
         const handleSelectionChange = () => {
@@ -64,7 +62,7 @@ export const PluginProvider = ({ children }) => {
             const selection = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
             const open = !!selection && isSelecting;
             // console.log('Selection change, contextMenuOnSelect:', contextMenuOnSelect);
-            plugin === null || plugin === void 0 ? void 0 : plugin.emit('contextMenu', { text: selection, x: lastMouseX, y: lastMouseY, open });
+            plugin === null || plugin === void 0 ? void 0 : plugin.event.emit('global.contextMenu.trigger', { text: selection, x: lastMouseX, y: lastMouseY, open });
             // }
         };
         const handleMouseUpDown = (e) => {

package/dist/worker/WorkerSetup.d.ts

@@ -0,0 +1,6 @@
+import { RimoriClient } from "../plugin/RimoriClient";
+/**
+ * Sets up the web worker for the plugin to be able receive and send messages to Rimori.
+ * @param init - The function containing the subscription logic.
+ */
+export declare function setupWorker(init: (controller: RimoriClient) => void | Promise<void>): void;

package/dist/worker/WorkerSetup.js

@@ -0,0 +1,79 @@
+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 { PluginController } from "../plugin/PluginController";
+import { EventBus, EventBusHandler } from "../plugin/fromRimori/EventBus";
+let controller = null;
+const listeners = [];
+let debugEnabled = false;
+/**
+ * Sets up the web worker for the plugin to be able receive and send messages to Rimori.
+ * @param init - The function containing the subscription logic.
+ */
+export function setupWorker(init) {
+    // Mock of the window object for the worker context to be able to use the PluginController.
+    const mockWindow = {
+        location: { search: '?secret=123' },
+        parent: {
+            postMessage: (message) => {
+                message.event.sender = "worker." + message.event.sender;
+                checkDebugMode(message.event);
+                logIfDebug('[Worker] sending event to Rimori', message.event);
+                self.postMessage(message);
+            }
+        },
+        addEventListener: (_, listener) => {
+            listeners.push(listener);
+        },
+        APP_CONFIG: {
+            SUPABASE_URL: 'NOT_SET',
+            SUPABASE_ANON_KEY: 'NOT_SET',
+        },
+    };
+    // Assign the mock to globalThis.
+    Object.assign(globalThis, { window: mockWindow });
+    EventBusHandler.getInstance("Worker EventBus");
+    // Handle init message from Rimori.
+    self.onmessage = (response) => __awaiter(this, void 0, void 0, function* () {
+        checkDebugMode(response.data);
+        logIfDebug('[Worker] message received', response.data);
+        const event = response.data;
+        if (event.topic === 'global.worker.requestInit') {
+            if (!controller) {
+                mockWindow.APP_CONFIG.SUPABASE_URL = event.data.supabaseUrl;
+                mockWindow.APP_CONFIG.SUPABASE_ANON_KEY = event.data.supabaseAnonKey;
+                controller = yield PluginController.getInstance(event.data.pluginId);
+                logIfDebug('[Worker] Worker initialized.');
+                yield init(controller);
+                logIfDebug('[Worker] Plugin listeners initialized.');
+            }
+            const initEvent = {
+                timestamp: new Date().toISOString(),
+                eventId: event.eventId,
+                sender: "worker." + event.sender,
+                topic: 'global.worker.requestInit',
+                data: { success: true },
+                debug: debugEnabled
+            };
+            return self.postMessage({ secret: "123", event: initEvent });
+        }
+        listeners.forEach(listener => listener({ data: { event: response.data, secret: "123" } }));
+    });
+}
+function checkDebugMode(event) {
+    if (event.topic === 'global.system.requestDebug' || event.debug) {
+        debugEnabled = true;
+        EventBus.emit("worker", "global.system.requestDebug");
+    }
+}
+function logIfDebug(...args) {
+    if (debugEnabled) {
+        console.debug('[Worker] ' + args[0], ...args.slice(1));
+    }
+}

package/package.json

@@ -1,8 +1,22 @@
 {
   "name": "@rimori/client",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "default": "./dist/core.js"
+    },
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "default": "./dist/components.js"
+    }
+  },
   "scripts": {
     "build": "tsc && sass src/style.scss:dist/style.css",
     "dev": "tsc -w",
@@ -16,7 +30,6 @@
     "@supabase/supabase-js": "^2.48.1",
     "@tiptap/react": "2.10.3",
     "@tiptap/starter-kit": "2.10.3",
-    "ibridge-flex": "0.0.1",
     "uuid": "11.1.0",
     "react-icons": "^5.4.0",
     "tiptap-markdown": "^0.8.10",
@@ -27,4 +40,4 @@
     "@types/react-dom": "^18.0.1",
     "sass": "^1.82.0"
   }
-}
+}

package/src/components/CRUDModal.tsx

@@ -1,6 +1,4 @@
-"use client";
-
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef } from "react";
 
 interface Props {
     title: string;

package/src/components/ai/Assistant.tsx

@@ -0,0 +1,96 @@
+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 { usePlugin } from '../../components';
+import { FirstMessages, getFirstMessages } from './utils';
+
+interface Props {
+    voiceId: any;
+    avatarImageUrl: string;
+    onComplete: (result: any) => void;
+    autoStartConversation?: FirstMessages;
+}
+
+export function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartConversation }: Props) {
+    const [oralCommunication, setOralCommunication] = React.useState(true);
+    const { llm, event } = usePlugin();
+    const sender = useMemo(() => new MessageSender(llm.getVoice, voiceId), []);
+    const { messages, append, isLoading, setMessages } = useChat();
+
+    const lastAssistantMessage = [...messages].filter((m) => m.role === 'assistant').pop()?.content;
+
+    useEffect(() => {
+        sender.setOnLoudnessChange((value: number) => event.emit('self.avatar.triggerLoudness', 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(() => {
+        let message = lastAssistantMessage;
+        if (message !== messages[messages.length - 1]?.content) {
+            message = undefined;
+        }
+        sender.handleNewText(message, isLoading);
+    }, [messages, isLoading]);
+
+    const lastMessage = messages[messages.length - 1];
+
+    useEffect(() => {
+        console.log("lastMessage", lastMessage);
+        const toolInvocations = lastMessage?.toolInvocations;
+        if (toolInvocations && toolInvocations.length > 0) {
+            console.log("toolInvocations", toolInvocations);
+            onComplete(toolInvocations[0].args);
+        }
+    }, [lastMessage]);
+
+    if (lastMessage?.toolInvocations && lastMessage.toolInvocations.length > 0) {
+        console.log("lastMessage test2", lastMessage);
+        const args = lastMessage.toolInvocations[0].args;
+
+        const success = args.explanationUnderstood === "TRUE" || args.studentKnowsTopic === "TRUE";
+
+        return <div className="px-5 pt-5 overflow-y-auto text-center" style={{ height: "478px" }}>
+            <h1 className='text-center mt-5 mb-5'>
+                {success ? "Great job!" : "You failed"}
+            </h1>
+            <p>{args.improvementHints}</p>
+        </div>
+    }
+
+    return (
+        <div>
+            {oralCommunication && <CircleAudioAvatar imageUrl={avatarImageUrl} className='mx-auto my-10' />}
+            <div className="w-full">
+                {lastAssistantMessage && <div className="px-5 pt-5 overflow-y-auto remirror-theme" style={{ height: "4k78px" }}>
+                    <Markdown>{lastAssistantMessage}</Markdown>
+                </div>}
+            </div>
+            <AudioInputField
+                blockSubmission={isLoading}
+                onSubmit={message => {
+                    append([{ role: 'user', content: message, id: messages.length.toString() }]);
+                }}
+                onAudioControl={voice => {
+                    setOralCommunication(voice);
+                    sender.setVolume(voice ? 1 : 0);
+                }} />
+        </div>
+    );
+};
+
+
+

package/src/components/ai/Avatar.tsx

@@ -0,0 +1,61 @@
+import { Tool } from '../../core';
+import { useEffect, useMemo } from 'react';
+import { VoiceRecorder } from './EmbeddedAssistent/VoiceRecoder';
+import { MessageSender } from './EmbeddedAssistent/TTS/MessageSender';
+import { CircleAudioAvatar } from './EmbeddedAssistent/CircleAudioAvatar';
+import { useChat } from '../../hooks/UseChatHook';
+import { usePlugin } from '../../components';
+import { getFirstMessages } from './utils';
+import { FirstMessages } from './utils';
+
+interface Props {
+    title?: string;
+    voiceId: any;
+    avatarImageUrl: string;
+    agentTools: Tool[];
+    autoStartConversation?: FirstMessages;
+}
+
+export function Avatar({ avatarImageUrl, voiceId, title, agentTools, autoStartConversation }: Props) {
+    const { llm, event } = usePlugin();
+    const sender = useMemo(() => new MessageSender(llm.getVoice, voiceId), []);
+    const { messages, append, isLoading, lastMessage, setMessages } = useChat(agentTools);
+
+    useEffect(() => {
+        console.log("messages", messages);
+    }, [messages]);
+
+    useEffect(() => {
+        sender.setOnLoudnessChange((value: number) => event.emit('self.avatar.triggerLoudness', 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);
+        } else if (autoStartConversation.userMessage) {
+            append([{ role: 'user', content: autoStartConversation.userMessage, id: messages.length.toString() }]);
+        }
+    }, []);
+
+    useEffect(() => {
+        if (lastMessage?.role === 'assistant') {
+            sender.handleNewText(lastMessage.content, isLoading);
+        }
+    }, [lastMessage, isLoading]);
+
+    return (
+        <div className='pb-8'>
+            {title && <p className="text-center mt-5 w-3/4 mx-auto rounded-lg dark:text-gray-100">{title}</p>}
+            <CircleAudioAvatar imageUrl={avatarImageUrl} width={"250px"} className='mx-auto' />
+            <div className='w-16 h-16 flex text-4xl shadow-lg flex-row justify-center items-center rounded-full mx-auto bg-gray-400 dark:bg-gray-800'>
+                <VoiceRecorder className='w-7' iconSize='300' onVoiceRecorded={(message) => {
+                    append([{ role: 'user', content: "Message(" + Math.floor((messages.length + 1) / 2) + "): " + message, id: messages.length.toString() }]);
+                }} />
+            </div>
+        </div>
+    );
+};

package/src/components/ai/EmbeddedAssistent/AudioInputField.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { VoiceRecorder } from './VoiceRecoder';
+import { BiSolidRightArrow } from "react-icons/bi";
+import { HiMiniSpeakerXMark, HiMiniSpeakerWave } from "react-icons/hi2";
+
+interface AudioInputFieldProps {
+    onSubmit: (text: string) => void;
+    onAudioControl?: (voice: boolean) => void;
+    blockSubmission?: boolean;
+}
+
+export function AudioInputField({ onSubmit, onAudioControl, blockSubmission = false }: AudioInputFieldProps) {
+    const [text, setText] = useState('');
+    const [audioEnabled, setAudioEnabled] = useState(true);
+
+    const handleSubmit = (manualText?: string) => {
+        if (blockSubmission) return;
+        const sendableText = manualText || text;
+        if (sendableText.trim()) {
+            onSubmit(sendableText);
+            setTimeout(() => {
+                setText('');
+            }, 100);
+        }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (blockSubmission) return;
+        if (e.key === 'Enter' && e.ctrlKey) {
+            setText(text + '\n');
+        } else if (e.key === 'Enter') {
+            handleSubmit();
+        }
+    };
+
+    return (
+        <div className="flex items-center bg-gray-600 pt-2 pb-2 p-2">
+            {onAudioControl && <button
+                onClick={() => {
+                    onAudioControl(!audioEnabled);
+                    setAudioEnabled(!audioEnabled);
+                }}
+                className="cursor-default">
+                {audioEnabled ? <HiMiniSpeakerWave className='w-9 h-9 cursor-pointer' /> : <HiMiniSpeakerXMark className='w-9 h-9 cursor-pointer' />}
+            </button>}
+            <VoiceRecorder onVoiceRecorded={(m: string) => {
+                console.log('onVoiceRecorded', m);
+                handleSubmit(m);
+            }}
+            />
+            <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}
+            />
+            <button onClick={() => handleSubmit()} className="cursor-default" disabled={blockSubmission}>
+                <BiSolidRightArrow className='w-9 h-10 cursor-pointer' />
+            </button>
+        </div>
+    );
+};