diff --git a/package-lock.json b/package-lock.json
index 9632e02c..93d7d0f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "llama.ui",
-  "version": "2.36.0",
+  "version": "2.37.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "llama.ui",
-      "version": "2.36.0",
+      "version": "2.37.0",
       "license": "MIT",
       "dependencies": {
         "dexie": "^4.0.11",
diff --git a/package.json b/package.json
index 5d3985ae..67d3994d 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "name": "llama.ui",
   "description": "A minimal Interface for AI Companion that runs entirely in your browser.",
-  "version": "2.36.0",
+  "version": "2.37.0",
   "homepage": "https://llama-ui.js.org/",
   "license": "MIT",
   "type": "module",
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index 1af993fb..1141f67e 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -13,13 +13,13 @@ import { useNavigate } from 'react-router';
 import { useChatContext } from '../context/chat';
 import { ChatTextareaApi, useChatTextarea } from '../hooks/useChatTextarea';
 import { useFileUpload } from '../hooks/useFileUpload';
-import { MessageExtra } from '../types';
-import { classNames, cleanCurrentUrl } from '../utils';
-import { DropzoneArea } from './DropzoneArea';
 import SpeechToText, {
   IS_SPEECH_RECOGNITION_SUPPORTED,
   SpeechRecordCallback,
-} from './SpeechToText';
+} from '../hooks/useSpeechToText';
+import { MessageExtra } from '../types';
+import { classNames, cleanCurrentUrl } from '../utils';
+import { DropzoneArea } from './DropzoneArea';
 
 /**
  * If the current URL contains "?m=...", prefill the message input with the value.
diff --git a/src/components/ChatMessage.tsx b/src/components/ChatMessage.tsx
index b4c91277..55b1b632 100644
--- a/src/components/ChatMessage.tsx
+++ b/src/components/ChatMessage.tsx
@@ -1,4 +1,4 @@
-import { Fragment, memo, useMemo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import {
   LuAtom,
@@ -20,6 +20,10 @@ import { useChatContext } from '../context/chat';
 import { useModals } from '../context/modal';
 import IndexedDB from '../database/indexedDB';
 import { useFileUpload } from '../hooks/useFileUpload';
+import TextToSpeech, {
+  getSpeechSynthesisVoiceByName,
+  IS_SPEECH_SYNTHESIS_SUPPORTED,
+} from '../hooks/useTextToSpeech';
 import {
   Message,
   MessageDisplay,
@@ -36,10 +40,6 @@ import ChatInputExtraContextItem from './ChatInputExtraContextItem';
 import { IntlIconButton } from './common';
 import { DropzoneArea } from './DropzoneArea';
 import MarkdownDisplay from './MarkdownDisplay';
-import TextToSpeech, {
-  getSpeechSynthesisVoiceByName,
-  IS_SPEECH_SYNTHESIS_SUPPORTED,
-} from './TextToSpeech';
 
 interface SplitMessage {
   content: PendingMessage['content'];
@@ -559,7 +559,7 @@ const PlayButton = memo(function PlayButton({
       volume={ttsVolume}
     >
       {({ isPlaying, play, stop }) => (
-        <Fragment>
+        <>
           {!isPlaying && (
             <IntlIconButton
               className={className}
@@ -582,7 +582,7 @@ const PlayButton = memo(function PlayButton({
               icon={LuVolumeX}
             />
           )}
-        </Fragment>
+        </>
       )}
     </TextToSpeech>
   );
diff --git a/src/components/SpeechToText.tsx b/src/hooks/useSpeechToText.tsx
similarity index 98%
rename from src/components/SpeechToText.tsx
rename to src/hooks/useSpeechToText.tsx
index a4bf137e..aa5b5ea8 100644
--- a/src/components/SpeechToText.tsx
+++ b/src/hooks/useSpeechToText.tsx
@@ -1,6 +1,5 @@
 import {
   forwardRef,
-  Fragment,
   ReactNode,
   useCallback,
   useEffect,
@@ -161,7 +160,7 @@ const SpeechToText = forwardRef<
 
   useImperativeHandle(ref, () => speechToText, [speechToText]);
 
-  return <Fragment>{children(speechToText)}</Fragment>;
+  return <>{children(speechToText)}</>;
 });
 
 export default SpeechToText;
diff --git a/src/components/TextToSpeech.tsx b/src/hooks/useTextToSpeech.tsx
similarity index 98%
rename from src/components/TextToSpeech.tsx
rename to src/hooks/useTextToSpeech.tsx
index 9fdc0abf..37ef3399 100644
--- a/src/components/TextToSpeech.tsx
+++ b/src/hooks/useTextToSpeech.tsx
@@ -1,6 +1,5 @@
 import {
   forwardRef,
-  Fragment,
   ReactNode,
   useCallback,
   useEffect,
@@ -178,7 +177,7 @@ const TextToSpeech = forwardRef<
     [isPlaying, play, stop]
   );
 
-  return <Fragment>{children({ isPlaying, play, stop })}</Fragment>;
+  return <>{children({ isPlaying, play, stop })}</>;
 });
 
 export default TextToSpeech;
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index ef748b21..1e15e3e5 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -41,17 +41,17 @@ import {
 import { ImportExportComponent } from '../components/settings/ImportExportComponent';
 import { PresetManager } from '../components/settings/PresetManager';
 import { ThemeController } from '../components/settings/ThemeController';
-import TextToSpeech, {
-  getSpeechSynthesisVoiceByName,
-  getSpeechSynthesisVoices,
-  IS_SPEECH_SYNTHESIS_SUPPORTED,
-} from '../components/TextToSpeech';
 import { CONFIG_DEFAULT, INFERENCE_PROVIDERS } from '../config';
 import { useAppContext } from '../context/app';
 import { useChatContext } from '../context/chat';
 import { useInferenceContext } from '../context/inference';
 import { useModals } from '../context/modal';
 import { useDebouncedCallback } from '../hooks/useDebouncedCallback';
+import TextToSpeech, {
+  getSpeechSynthesisVoiceByName,
+  getSpeechSynthesisVoices,
+  IS_SPEECH_SYNTHESIS_SUPPORTED,
+} from '../hooks/useTextToSpeech';
 import { SUPPORTED_LANGUAGES } from '../i18n';
 import {
   Configuration,