[pull] main from olegshulyakov:main

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",

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.

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>
   );

src/components/SpeechToText.tsx → 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;

src/components/TextToSpeech.tsx → 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;

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,