@rimori/client 1.0.2 → 1.0.4

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,9 +1,12 @@
 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
     useEffect(() => {
         let lastHash = window.location.hash;
@@ -11,33 +14,82 @@ 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.plugin.getUserInfo().then((userInfo) => {
+            setContextMenuOnTextSelection(userInfo.contextMenuOnSelect);
+        }).catch(error => {
+            console.error('Error fetching settings:', error);
+        });
+    }, [plugin]);
+    //detect page height change
+    useEffect(() => {
+        const body = document.body;
+        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);
+    }, [plugin]);
     //context menu
     useEffect(() => {
-        let isOpen = false;
+        let lastMouseX = 0;
+        let lastMouseY = 0;
+        let isSelecting = false;
+        // Track mouse position
+        const handleMouseMove = (e) => {
+            lastMouseX = e.clientX;
+            lastMouseY = e.clientY;
+        };
         const handleContextMenu = (e) => {
             var _a;
             const selection = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
             if (selection) {
                 e.preventDefault();
-                // console.log('context menu', selection);
-                plugin === null || plugin === void 0 ? void 0 : plugin.emit('contextMenu', { text: selection, x: e.clientX, y: e.clientY, open: true });
-                isOpen = true;
+                // console.log('context menu handled', selection);
+                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 = () => {
+            var _a;
+            // if (triggerOnTextSelection) {
+            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.event.emit('global.contextMenu.trigger', { text: selection, x: lastMouseX, y: lastMouseY, open });
+            // }
+        };
+        const handleMouseUpDown = (e) => {
+            if (e.type === 'mousedown') {
+                isSelecting = false;
+            }
+            else if (e.type === 'mouseup') {
+                isSelecting = true;
+                // console.log('mouseup, contextMenuOnSelect:', contextMenuOnSelect);
+                if (contextMenuOnSelect) {
+                    handleSelectionChange();
+                }
             }
         };
-        // Hide the menu on click outside
-        const handleClick = () => isOpen && (plugin === null || plugin === void 0 ? void 0 : plugin.emit('contextMenu', { text: '', x: 0, y: 0, open: false }));
-        document.addEventListener("click", handleClick);
         document.addEventListener('contextmenu', handleContextMenu);
+        document.addEventListener('selectionchange', handleSelectionChange);
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener('mousedown', handleMouseUpDown);
+        document.addEventListener('mouseup', handleMouseUpDown);
         return () => {
-            document.removeEventListener("click", handleClick);
+            document.removeEventListener("mousemove", handleMouseMove);
             document.removeEventListener('contextmenu', handleContextMenu);
+            document.removeEventListener('selectionchange', handleSelectionChange);
+            document.removeEventListener('mousedown', handleMouseUpDown);
+            document.removeEventListener('mouseup', handleMouseUpDown);
         };
-    }, [plugin]);
+    }, [plugin, contextMenuOnSelect]);
     if (!plugin) {
         return "";
     }

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.2",
+  "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>
+    );
+};

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

@@ -0,0 +1,75 @@
+import React, { useEffect, useRef } from 'react';
+import { EventBus, EventBusMessage } from '../../../core';
+
+interface CircleAudioAvatarProps {
+    width?: string;
+    imageUrl: string;
+    className?: string;
+}
+
+
+export function CircleAudioAvatar({ imageUrl, className, width = "150px" }: CircleAudioAvatarProps) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                const image = new Image();
+                image.src = imageUrl;
+                image.onload = () => {
+                    draw(ctx, canvas, image, 0);
+                };
+
+                const handleLoudness = (event: EventBusMessage) => {
+                    draw(ctx, canvas, image, event.data.loudness);
+                };
+
+                // Subscribe to loudness changes
+                const listenerId = EventBus.on('self.avatar.triggerLoudness', handleLoudness);
+
+                return () => {
+                    EventBus.off(listenerId);
+                };
+            }
+        }
+    }, [imageUrl]);
+
+    // Function to draw on the canvas
+    const draw = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, image: HTMLImageElement, loudness: number) => {
+        if (canvas && ctx) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            // Draw pulsing circle
+            const radius = Math.min(canvas.width, canvas.height) / 3;
+            const centerX = canvas.width / 2;
+            const centerY = canvas.height / 2;
+            const pulseRadius = radius + loudness / 2.5; // Adjust the divisor for sensitivity
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, pulseRadius, 0, Math.PI * 2, true);
+            ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+            ctx.lineWidth = 5;
+            ctx.stroke();
+
+            // Draw image circle
+            ctx.save();
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
+            ctx.closePath();
+            ctx.clip();
+            ctx.drawImage(image, centerX - radius, centerY - radius, radius * 2, radius * 2);
+            ctx.restore();
+
+            // Draw circular frame around the image
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
+            ctx.strokeStyle = 'rgba(20,20, 20, 0.9)';
+            ctx.lineWidth = 5; // Adjust the width of the frame as needed
+            ctx.stroke();
+        }
+    };
+
+    return <canvas ref={canvasRef} className={className} width={500} height={500} style={{ width }} />;
+};
+

package/src/components/ai/EmbeddedAssistent/TTS/MessageSender.ts

@@ -0,0 +1,91 @@
+import { ChunkedAudioPlayer } from './Player';
+
+type VoiceBackend = (text: string, voice?: string, speed?: number) => Promise<Blob>;
+
+export class MessageSender {
+    private player = new ChunkedAudioPlayer();
+    private fetchedSentences = new Set<string>();
+    private lastLoading = false;
+    private voice: string;
+    private model: string;
+    private voiceBackend: VoiceBackend;
+
+    constructor(voiceBackend: VoiceBackend, voice: string = 'alloy', model = 'openai') {
+        this.voiceBackend = voiceBackend;
+        this.voice = voice;
+        this.model = model;
+    }
+
+    private getCompletedSentences(currentText: string, isLoading: boolean): string[] {
+        // Split the text based on the following characters: .,?!
+        // Only split on : when followed by a space
+        const pattern = /(.+?[,.?!]|.+?:\s+|.+?\n+)/g;
+        const result: string[] = [];
+        let match;
+        while ((match = pattern.exec(currentText)) !== null) {
+            const sentence = match[0].trim();
+            if (sentence.length > 0) {
+                result.push(sentence);
+            }
+        }
+        if (!isLoading) {
+            const lastFullSentence = result[result.length - 1];
+            const leftoverIndex = currentText.lastIndexOf(lastFullSentence) + lastFullSentence.length;
+            if (leftoverIndex < currentText.length) {
+                result.push(currentText.slice(leftoverIndex).trim());
+            }
+        }
+        return result;
+    }
+
+    public async handleNewText(currentText: string | undefined, isLoading: boolean) {
+        if (!this.lastLoading && isLoading) {
+            this.reset();
+        }
+        this.lastLoading = isLoading;
+
+        if (!currentText) {
+            return;
+        }
+
+        const sentences = this.getCompletedSentences(currentText, isLoading);
+
+        for (let i = 0; i < sentences.length; i++) {
+            const sentence = sentences[i];
+            if (!this.fetchedSentences.has(sentence)) {
+                this.fetchedSentences.add(sentence);
+                const audioData = await this.generateSpeech(sentence);
+                await this.player.addChunk(audioData, i);
+            }
+        }
+    }
+
+    private async generateSpeech(sentence: string): Promise<ArrayBuffer> {
+        const blob = await this.voiceBackend(sentence, this.voice, 1.0);
+        return await blob.arrayBuffer();
+    }
+
+    public play() {
+        this.player.playAgain();
+    }
+
+    public stop() {
+        this.player.stopPlayback();
+    }
+
+    private reset() {
+        this.stop();
+        this.fetchedSentences.clear();
+        this.player.reset();
+    }
+
+    public setVolume(volume: number) {
+        this.player.setVolume(volume);
+    }
+
+    public setOnLoudnessChange(callback: (value: number) => void) {
+        this.player.setOnLoudnessChange((loudness) => {
+            callback(loudness);
+        });
+    }
+}