@rimori/client 1.3.1 → 1.4.3

package/src/components/MarkdownEditor.tsx

@@ -1,12 +1,12 @@
 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";
+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';
 
 // This inplementation is rooted in the Tiptap editor basic example https://codesandbox.io/p/devbox/editor-9x9dkd
 
@@ -24,12 +24,12 @@ const EditorButton = ({ action, isActive, label, disabled }: EditorButtonProps)
     return null;
   }
 
-  if (action.includes("heading")) {
+  if (action.includes('heading')) {
     const level = parseInt(action[action.length - 1]);
     return (
       <button
         onClick={() => editor.chain().focus().toggleHeading({ level: level }).run()}
-        className={`pl-2 ${isActive ? "is-active" : ""}`}
+        className={`pl-2 ${isActive ? 'is-active' : ''}`}
       >
         {label}
       </button>
@@ -40,7 +40,7 @@ const EditorButton = ({ action, isActive, label, disabled }: EditorButtonProps)
     <button
       onClick={() => editor.chain().focus()[action]().run()}
       disabled={disabled ? !editor.can().chain().focus()[action]().run() : false}
-      className={`pl-2 ${isActive ? "is-active" : ""}`}
+      className={`pl-2 ${isActive ? 'is-active' : ''}`}
     >
       {label}
     </button>
@@ -56,18 +56,46 @@ const MenuBar = () => {
 
   return (
     <div className="bg-gray-400 dark:bg-gray-800 dark:text-white text-lg flex flex-row flex-wrap items-center p-1">
-      <EditorButton action="toggleBold" isActive={editor.isActive("bold")} label={<FaBold />} disabled />
-      <EditorButton action="toggleItalic" isActive={editor.isActive("italic")} label={<FaItalic />} disabled />
-      <EditorButton action="toggleStrike" isActive={editor.isActive("strike")} label={<FaStrikethrough />} disabled />
-      <EditorButton action="toggleCode" isActive={editor.isActive("code")} label={<FaCode />} disabled />
-      <EditorButton action="setParagraph" isActive={editor.isActive("paragraph")} label={<FaParagraph />} />
-      <EditorButton action='setHeading1' isActive={editor.isActive("heading", { level: 1 })} label={<LuHeading1 size={"24px"} />} />
-      <EditorButton action='setHeading2' isActive={editor.isActive("heading", { level: 2 })} label={<LuHeading2 size={"24px"} />} />
-      <EditorButton action='setHeading3' isActive={editor.isActive("heading", { level: 3 })} label={<LuHeading3 size={"24px"} />} />
-      <EditorButton action="toggleBulletList" isActive={editor.isActive("bulletList")} label={<AiOutlineUnorderedList size={"24px"} />} />
-      <EditorButton action="toggleOrderedList" isActive={editor.isActive("orderedList")} label={<GoListOrdered size={"24px"} />} />
-      <EditorButton action="toggleCodeBlock" isActive={editor.isActive("codeBlock")} label={<PiCodeBlock size={"24px"} />} />
-      <EditorButton action="toggleBlockquote" isActive={editor.isActive("blockquote")} label={<TbBlockquote size={"24px"} />} />
+      <EditorButton action="toggleBold" isActive={editor.isActive('bold')} label={<FaBold />} disabled />
+      <EditorButton action="toggleItalic" isActive={editor.isActive('italic')} label={<FaItalic />} disabled />
+      <EditorButton action="toggleStrike" isActive={editor.isActive('strike')} label={<FaStrikethrough />} disabled />
+      <EditorButton action="toggleCode" isActive={editor.isActive('code')} label={<FaCode />} disabled />
+      <EditorButton action="setParagraph" isActive={editor.isActive('paragraph')} label={<FaParagraph />} />
+      <EditorButton
+        action="setHeading1"
+        isActive={editor.isActive('heading', { level: 1 })}
+        label={<LuHeading1 size={'24px'} />}
+      />
+      <EditorButton
+        action="setHeading2"
+        isActive={editor.isActive('heading', { level: 2 })}
+        label={<LuHeading2 size={'24px'} />}
+      />
+      <EditorButton
+        action="setHeading3"
+        isActive={editor.isActive('heading', { level: 3 })}
+        label={<LuHeading3 size={'24px'} />}
+      />
+      <EditorButton
+        action="toggleBulletList"
+        isActive={editor.isActive('bulletList')}
+        label={<AiOutlineUnorderedList size={'24px'} />}
+      />
+      <EditorButton
+        action="toggleOrderedList"
+        isActive={editor.isActive('orderedList')}
+        label={<GoListOrdered size={'24px'} />}
+      />
+      <EditorButton
+        action="toggleCodeBlock"
+        isActive={editor.isActive('codeBlock')}
+        label={<PiCodeBlock size={'24px'} />}
+      />
+      <EditorButton
+        action="toggleBlockquote"
+        isActive={editor.isActive('blockquote')}
+        label={<TbBlockquote size={'24px'} />}
+      />
     </div>
   );
 };
@@ -76,12 +104,12 @@ 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",
+        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",
+        className: 'list-decimal list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
       },
     },
   }),
@@ -97,9 +125,12 @@ interface Props {
 
 export const MarkdownEditor = (props: Props) => {
   return (
-    <div className={"text-md border border-gray-800 overflow-hidden " + props.className} style={{ borderWidth: props.editable ? 1 : 0 }}>
+    <div
+      className={'text-md border border-gray-800 overflow-hidden ' + props.className}
+      style={{ borderWidth: props.editable ? 1 : 0 }}
+    >
       <EditorProvider
-        key={(props.editable ? "editable" : "readonly") + props.content}
+        key={(props.editable ? 'editable' : 'readonly') + props.content}
         slotBefore={props.editable ? <MenuBar /> : null}
         extensions={extensions}
         content={props.content}

package/src/components/Spinner.tsx

@@ -1,22 +1,29 @@
 import React from 'react';
 
 interface SpinnerProps {
-    text?: string;
-    size?: string
-    className?: string;
+  text?: string;
+  size?: string;
+  className?: string;
 }
 
-export const Spinner: React.FC<SpinnerProps> = ({ text, className, size = "30px" }) => {
-    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>
-    );
-};
+export const Spinner: React.FC<SpinnerProps> = ({ text, className, size = '30px' }) => {
+  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/components/ai/Assistant.tsx

@@ -8,89 +8,89 @@ import { useRimori } from '../../components';
 import { FirstMessages, getFirstMessages } from './utils';
 
 interface Props {
-    voiceId: any;
-    avatarImageUrl: string;
-    onComplete: (result: any) => void;
-    autoStartConversation?: FirstMessages;
+  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 { ai: llm, event } = useRimori();
-    const sender = useMemo(() => new MessageSender(llm.getVoice, voiceId), []);
-    const { messages, append, isLoading, setMessages } = useChat();
+  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 = [...messages].filter((m) => m.role === 'assistant').pop()?.content;
+  const lastAssistantMessage = [...messages].filter((m) => m.role === 'assistant').pop()?.content;
 
-    useEffect(() => {
-        sender.setOnLoudnessChange((value: number) => event.emit('self.avatar.triggerLoudness', { loudness: value }));
+  useEffect(() => {
+    sender.setOnLoudnessChange((value: number) => event.emit('self.avatar.triggerLoudness', { loudness: value }));
 
-        if (!autoStartConversation) {
-            return;
-        }
-
-        setMessages(getFirstMessages(autoStartConversation));
-        // append([{ role: 'user', content: autoStartConversation.userMessage }]);
+    if (!autoStartConversation) {
+      return;
+    }
 
-        if (autoStartConversation.assistantMessage) {
-            // console.log("autostartmessages", { autoStartConversation, isLoading });
-            sender.handleNewText(autoStartConversation.assistantMessage, isLoading);
-        }
-    }, []);
+    setMessages(getFirstMessages(autoStartConversation));
+    // append([{ role: 'user', content: autoStartConversation.userMessage }]);
 
-    useEffect(() => {
-        let message = lastAssistantMessage;
-        if (message !== messages[messages.length - 1]?.content) {
-            message = undefined;
-        }
-        sender.handleNewText(message, isLoading);
-    }, [messages, isLoading]);
+    if (autoStartConversation.assistantMessage) {
+      // console.log("autostartmessages", { autoStartConversation, isLoading });
+      sender.handleNewText(autoStartConversation.assistantMessage, isLoading);
+    }
+  }, []);
 
-    const lastMessage = messages[messages.length - 1];
+  useEffect(() => {
+    let message = lastAssistantMessage;
+    if (message !== messages[messages.length - 1]?.content) {
+      message = undefined;
+    }
+    sender.handleNewText(message, isLoading);
+  }, [messages, isLoading]);
 
-    useEffect(() => {
-        console.log("lastMessage", lastMessage);
-        const toolInvocations = lastMessage?.toolCalls;
-        if (toolInvocations && toolInvocations.length > 0) {
-            console.log("toolInvocations", toolInvocations);
-            onComplete(toolInvocations[0].args);
-        }
-    }, [lastMessage]);
+  const lastMessage = messages[messages.length - 1];
 
-    if (lastMessage?.toolCalls && lastMessage.toolCalls.length > 0) {
-        console.log("lastMessage test2", lastMessage);
-        const args = lastMessage.toolCalls[0].args;
+  useEffect(() => {
+    console.log('lastMessage', lastMessage);
+    const toolInvocations = lastMessage?.toolCalls;
+    if (toolInvocations && toolInvocations.length > 0) {
+      console.log('toolInvocations', toolInvocations);
+      onComplete(toolInvocations[0].args);
+    }
+  }, [lastMessage]);
 
-        const success = args.explanationUnderstood === "TRUE" || args.studentKnowsTopic === "TRUE";
+  if (lastMessage?.toolCalls && lastMessage.toolCalls.length > 0) {
+    console.log('lastMessage test2', lastMessage);
+    const args = lastMessage.toolCalls[0].args;
 
-        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>
-    }
+    const success = args.explanationUnderstood === 'TRUE' || args.studentKnowsTopic === 'TRUE';
 
     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>
+      <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

@@ -9,7 +9,7 @@ import { getFirstMessages } from './utils';
 import { FirstMessages } from './utils';
 
 interface Props {
-  voiceId: any;
+  voiceId: string;
   agentTools: Tool[];
   avatarImageUrl: string;
   circleSize?: string;
@@ -26,8 +26,8 @@ export function Avatar({
   autoStartConversation,
   children,
   isDarkTheme = false,
-  circleSize = "300px",
-  className
+  circleSize = '300px',
+  className,
 }: Props) {
   const { ai, event } = useRimori();
   const [agentReplying, setAgentReplying] = useState(false);
@@ -36,7 +36,7 @@ export function Avatar({
   const { messages, append, isLoading, lastMessage, setMessages } = useChat(agentTools);
 
   useEffect(() => {
-    console.log("messages", messages);
+    console.log('messages', messages);
   }, [messages]);
 
   useEffect(() => {
@@ -44,6 +44,7 @@ export function Avatar({
   }, [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));
 
@@ -58,13 +59,13 @@ export function Avatar({
     } else if (autoStartConversation.userMessage) {
       append([{ role: 'user', content: autoStartConversation.userMessage, id: messages.length.toString() }]);
     }
-  }, [autoStartConversation]);
+  }, [autoStartConversation, voiceId]);
 
   useEffect(() => {
     if (lastMessage?.role === 'assistant') {
       sender.handleNewText(lastMessage.content, isLoading);
       if (lastMessage.toolCalls) {
-        console.log("unlocking mic",lastMessage)
+        // console.log("unlocking mic", lastMessage)
         setAgentReplying(false);
         setIsProcessingMessage(false);
       }
@@ -73,23 +74,26 @@ export function Avatar({
 
   return (
     <div className={`md:pb-8 ${className || ''}`}>
-      <CircleAudioAvatar
-        width={circleSize}
-        className='mx-auto'
-        imageUrl={avatarImageUrl}
-        isDarkTheme={isDarkTheme} />
+      <CircleAudioAvatar width={circleSize} className="mx-auto" imageUrl={avatarImageUrl} isDarkTheme={isDarkTheme} />
       {children}
       <VoiceRecorder
-        iconSize='30'
-        className='w-16 h-16 shadow-lg rounded-full bg-gray-400 dark:bg-gray-800'
+        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() }]);
+          append([
+            {
+              role: 'user',
+              content: 'Message(' + Math.floor((messages.length + 1) / 2) + '): ' + message,
+              id: messages.length.toString(),
+            },
+          ]);
         }}
-        onRecordingStatusChange={(running) => !running && setIsProcessingMessage(true)} />
+        onRecordingStatusChange={(running) => !running && setIsProcessingMessage(true)}
+      />
     </div>
   );
-};
+}

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

@@ -1,64 +1,73 @@
 import React, { useState } from 'react';
 import { VoiceRecorder } from './VoiceRecoder';
-import { BiSolidRightArrow } from "react-icons/bi";
-import { HiMiniSpeakerXMark, HiMiniSpeakerWave } from "react-icons/hi2";
+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;
+  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 [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 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();
-        }
-    };
+  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 onRecordingStatusChange={() => {}} 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>
-    );
-};
+  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
+        onRecordingStatusChange={() => {}}
+        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

@@ -8,7 +8,12 @@ interface CircleAudioAvatarProps {
   isDarkTheme?: boolean;
 }
 
-export function CircleAudioAvatar({ imageUrl, className, isDarkTheme = false, width = "150px" }: CircleAudioAvatarProps) {
+export function CircleAudioAvatar({
+  imageUrl,
+  className,
+  isDarkTheme = false,
+  width = '150px',
+}: CircleAudioAvatarProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const currentLoudnessRef = useRef(0);
   const targetLoudnessRef = useRef(0);
@@ -31,7 +36,7 @@ export function CircleAudioAvatar({ imageUrl, className, isDarkTheme = false, wi
             if (currentLoudnessRef.current > targetLoudnessRef.current) {
               currentLoudnessRef.current = Math.max(
                 targetLoudnessRef.current,
-                currentLoudnessRef.current - decayRate * currentLoudnessRef.current
+                currentLoudnessRef.current - decayRate * currentLoudnessRef.current,
               );
             } else {
               currentLoudnessRef.current = targetLoudnessRef.current;
@@ -63,7 +68,12 @@ export function CircleAudioAvatar({ imageUrl, className, isDarkTheme = false, wi
     }
   }, [imageUrl]);
 
-  const draw = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, image: HTMLImageElement, loudness: number) => {
+  const draw = (
+    ctx: CanvasRenderingContext2D,
+    canvas: HTMLCanvasElement,
+    image: HTMLImageElement,
+    loudness: number,
+  ) => {
     if (canvas && ctx) {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -94,5 +104,4 @@ export function CircleAudioAvatar({ imageUrl, className, isDarkTheme = false, wi
   };
 
   return <canvas ref={canvasRef} className={className} width={500} height={500} style={{ width }} />;
-};
-
+}