@rimori/react-client 0.1.0

package/README.md

@@ -0,0 +1 @@
+# react-client

package/dist/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/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/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/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/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/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 '../../components';
+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/components/ai/Avatar.d.ts

@@ -0,0 +1,14 @@
+import { Tool } from '../../fromRimori/PluginTypes';
+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/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 '../../components';
+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/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/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/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 {};

package/dist/components/ai/EmbeddedAssistent/CircleAudioAvatar.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { EventBus } from '../../../fromRimori/EventBus';
+export function CircleAudioAvatar({ imageUrl, className, isDarkTheme = false, width = '150px', }) {
+    const canvasRef = useRef(null);
+    const currentLoudnessRef = useRef(0);
+    const targetLoudnessRef = useRef(0);
+    const animationFrameRef = useRef(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                const image = new Image();
+                image.src = imageUrl;
+                let isMounted = true;
+                image.onload = () => {
+                    if (!isMounted)
+                        return;
+                    draw(ctx, canvas, image, 0);
+                    const animate = () => {
+                        const decayRate = 0.06;
+                        if (currentLoudnessRef.current > targetLoudnessRef.current) {
+                            currentLoudnessRef.current = Math.max(targetLoudnessRef.current, currentLoudnessRef.current - decayRate * currentLoudnessRef.current);
+                        }
+                        else {
+                            currentLoudnessRef.current = targetLoudnessRef.current;
+                        }
+                        draw(ctx, canvas, image, currentLoudnessRef.current);
+                        animationFrameRef.current = requestAnimationFrame(animate);
+                    };
+                    animationFrameRef.current = requestAnimationFrame(animate);
+                };
+                const handleLoudness = ({ data }) => {
+                    const newLoudness = data.loudness;
+                    if (newLoudness > currentLoudnessRef.current) {
+                        currentLoudnessRef.current = newLoudness;
+                    }
+                    targetLoudnessRef.current = newLoudness;
+                };
+                const listener = EventBus.on('self.avatar.triggerLoudness', handleLoudness);
+                return () => {
+                    isMounted = false;
+                    listener.off();
+                    if (animationFrameRef.current) {
+                        cancelAnimationFrame(animationFrameRef.current);
+                    }
+                };
+            }
+        }
+    }, [imageUrl]);
+    const draw = (ctx, canvas, image, loudness) => {
+        if (canvas && ctx) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            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;
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, pulseRadius, 0, Math.PI * 2, true);
+            ctx.strokeStyle = isDarkTheme ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)';
+            ctx.lineWidth = 5;
+            ctx.stroke();
+            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();
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
+            ctx.strokeStyle = isDarkTheme ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)';
+            ctx.lineWidth = 5;
+            ctx.stroke();
+        }
+    };
+    return _jsx("canvas", { ref: canvasRef, className: className, width: 500, height: 500, style: { width } });
+}

package/dist/components/ai/EmbeddedAssistent/TTS/MessageSender.d.ts

@@ -0,0 +1,19 @@
+type VoiceBackend = (text: string, voice?: string, speed?: number) => Promise<Blob>;
+export declare class MessageSender {
+    private player;
+    private fetchedSentences;
+    private lastLoading;
+    private voice;
+    private voiceBackend;
+    constructor(voiceBackend: VoiceBackend, voice: string);
+    private getCompletedSentences;
+    handleNewText(currentText: string | undefined, isLoading: boolean): Promise<void>;
+    private generateSpeech;
+    play(): void;
+    stop(): void;
+    private reset;
+    setVolume(volume: number): void;
+    setOnLoudnessChange(callback: (value: number) => void): void;
+    setOnEndOfSpeech(callback: () => void): void;
+}
+export {};

package/dist/components/ai/EmbeddedAssistent/TTS/MessageSender.js

@@ -0,0 +1,91 @@
+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 { ChunkedAudioPlayer } from './Player';
+export class MessageSender {
+    constructor(voiceBackend, voice) {
+        this.player = new ChunkedAudioPlayer();
+        this.fetchedSentences = new Set();
+        this.lastLoading = false;
+        if ((voice === null || voice === void 0 ? void 0 : voice.split('_').length) !== 2) {
+            throw new Error("Invalid voice id format '" + voice + "'. Voice id needs to look like <provider>_<voice_id>");
+        }
+        this.voiceBackend = voiceBackend;
+        this.voice = voice;
+    }
+    getCompletedSentences(currentText, isLoading) {
+        // Split the text based on the following characters: .?!
+        // Only split on : when followed by a space
+        const pattern = /(.+?[.?!]|.+?:\s+|.+?\n+)/g;
+        const result = [];
+        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;
+    }
+    handleNewText(currentText, isLoading) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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 = yield this.generateSpeech(sentence);
+                    yield this.player.addChunk(audioData, i);
+                }
+            }
+        });
+    }
+    generateSpeech(sentence) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const blob = yield this.voiceBackend(sentence, this.voice, 1.0);
+            return yield blob.arrayBuffer();
+        });
+    }
+    play() {
+        this.player.playAgain();
+    }
+    stop() {
+        this.player.stopPlayback();
+    }
+    reset() {
+        this.stop();
+        this.fetchedSentences.clear();
+        this.player.reset();
+    }
+    setVolume(volume) {
+        this.player.setVolume(volume);
+    }
+    setOnLoudnessChange(callback) {
+        this.player.setOnLoudnessChange((loudness) => {
+            callback(loudness);
+        });
+    }
+    setOnEndOfSpeech(callback) {
+        this.player.setOnEndOfSpeech(callback);
+    }
+}

package/dist/components/ai/EmbeddedAssistent/TTS/Player.d.ts

@@ -0,0 +1,27 @@
+export declare class ChunkedAudioPlayer {
+    private audioContext;
+    private chunkQueue;
+    private isPlaying;
+    private analyser;
+    private dataArray;
+    private shouldMonitorLoudness;
+    private isMonitoring;
+    private handle;
+    private volume;
+    private loudnessCallback;
+    private currentIndex;
+    private startedPlaying;
+    private onEndOfSpeech;
+    constructor();
+    private init;
+    setOnLoudnessChange(callback: (value: number) => void): void;
+    setVolume(volume: number): void;
+    addChunk(chunk: ArrayBuffer, position: number): Promise<void>;
+    private playChunks;
+    stopPlayback(): void;
+    private playChunk;
+    playAgain(): Promise<void>;
+    private monitorLoudness;
+    reset(): void;
+    setOnEndOfSpeech(callback: () => void): void;
+}