@lobehub/chat 0.109.0 → 0.110.0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 0.110.0](https://github.com/lobehub/lobe-chat/compare/v0.109.1...v0.110.0)
+
+<sup>Released on **2023-12-07**</sup>
+
+#### ✨ Features
+
+- **misc**: Local TTS Player.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Local TTS Player, closes [#587](https://github.com/lobehub/lobe-chat/issues/587) ([87b51bd](https://github.com/lobehub/lobe-chat/commit/87b51bd))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.109.1](https://github.com/lobehub/lobe-chat/compare/v0.109.0...v0.109.1)
+
+<sup>Released on **2023-12-07**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix agent settings crash with old pluginManifest.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix agent settings crash with old pluginManifest ([8b80dfd](https://github.com/lobehub/lobe-chat/commit/8b80dfd))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.109.0](https://github.com/lobehub/lobe-chat/compare/v0.108.0...v0.109.0)
 
 <sup>Released on **2023-12-06**</sup>

package/README.md

@@ -27,7 +27,7 @@ Supports one-click free deployment of your private ChatGPT/LLM web application.
 [![][github-stars-shield]][github-stars-link]
 [![][github-issues-shield]][github-issues-link]
 [![][github-license-shield]][github-license-link]<br>
-[![](https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square)](https://opencollective.com/lobehub 'Sponsor LobeHub on open-collective')
+[![][sponsor-shield]][sponsor-link]
 
 **Share LobeChat Repository**
 
@@ -59,6 +59,7 @@ Supports one-click free deployment of your private ChatGPT/LLM web application.
 - [🧩 Plugins](#-plugins)
 - [⌨️ Local Development](#️-local-development)
 - [🤝 Contributing](#-contributing)
+- [🩷 Sponsor](#-sponsor)
 - [🔗 More Products](#-more-products)
 
 ####
@@ -205,12 +206,12 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 | Recent Submits                                                                                                                                                                            | Description                                                                                                                                                                                                                                                                                  |
 | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Mr. Feynman](https://chat-preview.lobehub.com/market?agent=mrfeynman)<br/><sup>By **[jjy1000](https://github.com/jjy1000)** on **2023-12-04**</sup>                                      | Explains complex knowledge concepts in a popular way to help you understand complex knowledge concepts. It can also explain knowledge types containing answers and questions.<br/>`general-teacher-assistant`                                                                                |
 | [Organic Chemistry Researcher](https://chat-preview.lobehub.com/market?agent=organic-chemistry-researcher)<br/><sup>By **[y22emc2](https://github.com/y22emc2)** on **2023-12-02**</sup>  | Specializes in academic translation and writing in the field of organic chemistry<br/>`organic-chemistry` `research` `translation` `writing` `academic-articles`                                                                                                                             |
 | [JS Code Quality Optimization](https://chat-preview.lobehub.com/market?agent=js-code-quality)<br/><sup>By **[canisminor1990](https://github.com/canisminor1990)** on **2023-11-22**</sup> | Dedicated to clean and elegant code refactoring<br/>`refactoring` `code-optimization` `code-quality`                                                                                                                                                                                         |
 | [LobeChat Test Engineer](https://chat-preview.lobehub.com/market?agent=lobe-chat-unit-test-dev)<br/><sup>By **[arvinxx](https://github.com/arvinxx)** on **2023-11-22**</sup>             | Proficient in writing frontend automation tests, especially comprehensive test coverage for TypeScript applications. Skilled in using the Vitest testing framework with a deep understanding of testing principles and strategies.<br/>`automation-testing` `testing` `lobe-chat` `frontend` |
-| [Q\&A Document Conversion Expert](https://chat-preview.lobehub.com/market?agent=q-a-helper)<br/><sup>By **[barryWang12138](https://github.com/barryWang12138)** on **2023-11-22**</sup>   | Please provide your document content, and I will segment and clean it according to your requirements, and provide answers in a standardized format.<br/>`q-a` `document`                                                                                                                     |
 
-> 📊 Total agents: [<kbd>**53**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**54**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 
@@ -512,6 +513,23 @@ Contributions of all types are more than welcome; if you are interested in contr
 
 </div>
 
+## 🩷 Sponsor
+
+Every bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time.
+
+<a href="https://opencollective.com/lobehub" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://readme-wizard.lobehub.com/api/sponsor?themeMode=dark">
+    <img  src="https://readme-wizard.lobehub.com/api/sponsor">
+  </picture>
+</a>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
 ## 🔗 More Products
 
 - **[🤯 Lobe Theme][lobe-theme]:** The modern theme for Stable Diffusion WebUI, exquisite interface design, highly customizable UI, and efficiency-boosting features.
@@ -613,6 +631,8 @@ This project is [MIT](./LICENSE) licensed.
 [share-whatsapp-shield]: https://img.shields.io/badge/-share%20on%20whatsapp-black?labelColor=black&logo=whatsapp&logoColor=white&style=flat-square
 [share-x-link]: https://x.com/intent/tweet?hashtags=chatbot%2CchatGPT%2CopenAI&text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
 [share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black&logo=x&logoColor=white&style=flat-square
+[sponsor-link]: https://opencollective.com/lobehub 'Become 🩷 LobeHub Sponsor'
+[sponsor-shield]: https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square
 [submit-agents-link]: https://github.com/lobehub/lobe-chat-agents
 [submit-agents-shield]: https://img.shields.io/badge/🤖/🏪_submit_agent-%E2%86%92-c4f042?labelColor=black&style=for-the-badge
 [submit-plugin-link]: https://github.com/lobehub/lobe-chat-plugins

package/README.zh-CN.md

@@ -26,7 +26,7 @@ LobeChat 是开源的高性能聊天机器人框架，支持语音合成、多
 [![][github-stars-shield]][github-stars-link]
 [![][github-issues-shield]][github-issues-link]
 [![][github-license-shield]][github-license-link]<br>
-[![](https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square)](https://opencollective.com/lobehub 'Sponsor LobeHub on open-collective')
+[![][sponsor-shield]][sponsor-link]
 
 **分享 LobeChat 给你的好友**
 
@@ -56,6 +56,7 @@ LobeChat 是开源的高性能聊天机器人框架，支持语音合成、多
 - [🧩 插件体系](#-插件体系)
 - [⌨️ 本地开发](#️-本地开发)
 - [🤝 参与贡献](#-参与贡献)
+- [🩷 感谢赞助](#-感谢赞助)
 - [🔗 更多工具](#-更多工具)
 
 ####
@@ -182,12 +183,12 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 | 最近新增                                                                                                                                                                     | 助手说明                                                                                                                                                          |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Mr. Feynman](https://chat-preview.lobehub.com/market?agent=mrfeynman)<br/><sup>By **[jjy1000](https://github.com/jjy1000)** on **2023-12-04**</sup>                         | 对你提出的复杂知识概念进行通俗性解释，帮助你理解复杂的知识概念。同时可以对包含答案和问题的知识类型进行解释。<br/>`通用教师助手`                                   |
 | [有机化学研究员](https://chat-preview.lobehub.com/market?agent=organic-chemistry-researcher)<br/><sup>By **[y22emc2](https://github.com/y22emc2)** on **2023-12-02**</sup>   | 擅长有机化学领域的学术翻译和写作<br/>`有机化学` `科研` `翻译` `写作` `学术文章`                                                                                   |
 | [JS 代码质量优化](https://chat-preview.lobehub.com/market?agent=js-code-quality)<br/><sup>By **[canisminor1990](https://github.com/canisminor1990)** on **2023-11-22**</sup> | 致力于干净和优雅的代码重构<br/>`重构` `代码优化` `代码质量`                                                                                                       |
 | [LobeChat 测试工程师](https://chat-preview.lobehub.com/market?agent=lobe-chat-unit-test-dev)<br/><sup>By **[arvinxx](https://github.com/arvinxx)** on **2023-11-22**</sup>   | 擅长编写前端自动化测试，特别是 TypeScript 应用的全面测试覆盖。熟练使用 Vitest 测试框架，具备深入的测试原理和策略理解。<br/>`自动化测试` `测试` `lobe-chat` `前端` |
-| [问答文档转换专家](https://chat-preview.lobehub.com/market?agent=q-a-helper)<br/><sup>By **[barryWang12138](https://github.com/barryWang12138)** on **2023-11-22**</sup>     | 请提供您的文档内容，我将根据您的要求进行分段和清洗，并按照规范的格式回答。<br/>`q-a` `文档`                                                                       |
 
-> 📊 Total agents: [<kbd>**53**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**54**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 
@@ -484,6 +485,23 @@ $ bun run dev
 
 </div>
 
+## 🩷 感谢赞助
+
+每一分支持都珍贵无比，汇聚成我们支持的璀璨银河！你就像一颗划破夜空的流星，瞬间点亮我们前行的道路。感谢你对我们的信任 —— 你的支持笔就像星辰导航，一次又一次地为项目指明前进的光芒。
+
+<a href="https://opencollective.com/lobehub" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://readme-wizard.lobehub.com/api/sponsor?themeMode=dark">
+    <img  src="https://readme-wizard.lobehub.com/api/sponsor">
+  </picture>
+</a>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
 ## 🔗 更多工具
 
 - [🤯 Lobe Theme][lobe-theme] : Stable Diffusion WebUI 的现代主题，精致的界面设计，高度可定制的 UI，以及提高效率的功能。
@@ -585,6 +603,8 @@ This project is [MIT](./LICENSE) licensed.
 [share-whatsapp-shield]: https://img.shields.io/badge/-share%20on%20whatsapp-black?labelColor=black&logo=whatsapp&logoColor=white&style=flat-square
 [share-x-link]: https://x.com/intent/tweet?hashtags=chatbot%2CchatGPT%2CopenAI&text=%E6%8E%A8%E8%8D%90%E4%B8%80%E4%B8%AA%20GitHub%20%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%20%F0%9F%A4%AF%20LobeChat%20-%20%E5%BC%80%E6%BA%90%E7%9A%84%E3%80%81%E5%8F%AF%E6%89%A9%E5%B1%95%E7%9A%84%EF%BC%88Function%20Calling%EF%BC%89%E9%AB%98%E6%80%A7%E8%83%BD%E8%81%8A%E5%A4%A9%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%A1%86%E6%9E%B6%E3%80%82%0A%E5%AE%83%E6%94%AF%E6%8C%81%E4%B8%80%E9%94%AE%E5%85%8D%E8%B4%B9%E9%83%A8%E7%BD%B2%E7%A7%81%E4%BA%BA%20ChatGPT%2FLLM%20%E7%BD%91%E9%A1%B5%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
 [share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black&logo=x&logoColor=white&style=flat-square
+[sponsor-link]: https://opencollective.com/lobehub 'Become 🩷 LobeHub Sponsor'
+[sponsor-shield]: https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square
 [submit-agents-link]: https://github.com/lobehub/lobe-chat-agents
 [submit-agents-shield]: https://img.shields.io/badge/🤖/🏪_submit_agent-%E2%86%92-c4f042?labelColor=black&style=for-the-badge
 [submit-plugin-link]: https://github.com/lobehub/lobe-chat-plugins

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.109.0",
+  "version": "0.110.0",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",
@@ -106,12 +106,12 @@
     "react-intersection-observer": "^9",
     "react-layout-kit": "^1",
     "react-lazy-load": "^4",
-    "react-wrap-balancer": "^1.1.0",
+    "react-wrap-balancer": "^1",
     "remark": "^14",
     "remark-gfm": "^3",
     "remark-html": "^15",
     "semver": "^7",
-    "sharp": "^0.33.0",
+    "sharp": "^0.33",
     "swr": "^2",
     "systemjs": "^6",
     "ts-md5": "^1",
@@ -126,11 +126,11 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^18",
-    "@ducanh2912/next-pwa": "^9.7.2",
+    "@ducanh2912/next-pwa": "^9",
     "@lobehub/i18n-cli": "latest",
     "@lobehub/lint": "latest",
-    "@next/bundle-analyzer": "^14.0.3",
-    "@next/eslint-plugin-next": "^14.0.3",
+    "@next/bundle-analyzer": "^14",
+    "@next/eslint-plugin-next": "^14",
     "@testing-library/jest-dom": "^6",
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",

package/src/app/chat/features/Conversation/ChatList/Extras/TTS/FilePlayer.tsx

@@ -0,0 +1,25 @@
+import { useAudioPlayer } from '@lobehub/tts/react';
+import { memo, useCallback } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { useFileStore } from '@/store/file';
+
+import { TTSProps } from './InitPlayer';
+import Player from './Player';
+
+const FilePlayer = memo<TTSProps>(({ file, id }) => {
+  const useFetchTTSFile = useFileStore((s) => s.useFetchTTSFile);
+  const [clearTTS] = useChatStore((s) => [s.clearTTS]);
+  const { data, isLoading: isFileLoading } = useFetchTTSFile(file || null);
+  const { isLoading, ...audio } = useAudioPlayer({ src: data ? data.url : '' });
+
+  const handleDelete = useCallback(() => {
+    clearTTS(id);
+  }, [id]);
+
+  if (!audio || isFileLoading) return;
+
+  return <Player audio={audio} isLoading={isLoading} onDelete={handleDelete} />;
+});
+
+export default FilePlayer;

package/src/app/chat/features/Conversation/ChatList/Extras/TTS/InitPlayer.tsx

@@ -0,0 +1,93 @@
+import { memo, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useTTS } from '@/hooks/useTTS';
+import { useChatStore } from '@/store/chat';
+import { useFileStore } from '@/store/file';
+import { ChatMessageError, ChatTTS } from '@/types/chatMessage';
+import { getMessageError } from '@/utils/fetch';
+
+import Player from './Player';
+
+export interface TTSProps extends ChatTTS {
+  content: string;
+  id: string;
+  loading?: boolean;
+}
+
+const InitPlayer = memo<TTSProps>(({ id, content, contentMd5, file }) => {
+  const [isStart, setIsStart] = useState(false);
+  const [error, setError] = useState<ChatMessageError>();
+  const uploadTTS = useFileStore((s) => s.uploadTTSByArrayBuffers);
+  const { t } = useTranslation('chat');
+
+  const [ttsMessage, clearTTS] = useChatStore((s) => [s.ttsMessage, s.clearTTS]);
+
+  const setDefaultError = useCallback(
+    (err?: any) => {
+      setError({ body: err, message: t('tts.responseError', { ns: 'error' }), type: 500 });
+    },
+    [t],
+  );
+
+  const { isGlobalLoading, audio, start, stop, response } = useTTS(content, {
+    onError: (err) => {
+      stop();
+      setDefaultError(err);
+    },
+    onErrorRetry: (err) => {
+      stop();
+      setDefaultError(err);
+    },
+    onSuccess: async () => {
+      if (!response || response.ok) return;
+      const message = await getMessageError(response);
+      if (message) {
+        setError(message);
+      } else {
+        setDefaultError();
+      }
+      stop();
+    },
+    onUpload: async (currentVoice, arrayBuffers) => {
+      const fileID = await uploadTTS(id, arrayBuffers);
+      ttsMessage(id, { contentMd5, file: fileID, voice: currentVoice });
+    },
+  });
+
+  const handleInitStart = useCallback(() => {
+    if (isStart) return;
+    start();
+    setIsStart(true);
+  }, [isStart, start]);
+
+  const handleDelete = useCallback(() => {
+    stop();
+    clearTTS(id);
+  }, [stop, id]);
+
+  const handleRetry = useCallback(() => {
+    setError(undefined);
+    start();
+  }, [start]);
+
+  useEffect(() => {
+    if (file) return;
+    setTimeout(() => {
+      handleInitStart();
+    }, 100);
+  }, [file]);
+
+  return (
+    <Player
+      audio={audio}
+      error={error}
+      isLoading={isGlobalLoading}
+      onDelete={handleDelete}
+      onInitPlay={handleInitStart}
+      onRetry={handleRetry}
+    />
+  );
+});
+
+export default InitPlayer;

package/src/app/chat/features/Conversation/ChatList/Extras/TTS/Player.tsx

@@ -0,0 +1,61 @@
+import { AudioPlayer, AudioPlayerProps } from '@lobehub/tts/react';
+import { ActionIcon, Alert, Highlighter } from '@lobehub/ui';
+import { Button } from 'antd';
+import { TrashIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { ChatMessageError } from '@/types/chatMessage';
+
+interface PlayerProps extends AudioPlayerProps {
+  error?: ChatMessageError;
+  onDelete: () => void;
+  onRetry?: () => void;
+}
+
+const Player = memo<PlayerProps>(({ onRetry, error, onDelete, audio, isLoading, onInitPlay }) => {
+  const { t } = useTranslation('chat');
+
+  return (
+    <Flexbox align={'center'} horizontal style={{ minWidth: 160, width: '100%' }}>
+      {error ? (
+        <Alert
+          action={
+            <Button onClick={onRetry} size={'small'} type={'primary'}>
+              {t('retry', { ns: 'common' })}
+            </Button>
+          }
+          closable
+          extra={
+            error.body && (
+              <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+                {JSON.stringify(error.body, null, 2)}
+              </Highlighter>
+            )
+          }
+          message={error.message}
+          onClose={onDelete}
+          style={{ alignItems: 'center', width: '100%' }}
+          type="error"
+        />
+      ) : (
+        <>
+          <AudioPlayer
+            allowPause={false}
+            audio={audio}
+            buttonSize={'small'}
+            isLoading={isLoading}
+            onInitPlay={onInitPlay}
+            onLoadingStop={stop}
+            timeRender={'tag'}
+            timeStyle={{ margin: 0 }}
+          />
+          <ActionIcon icon={TrashIcon} onClick={onDelete} size={'small'} title={t('tts.clear')} />
+        </>
+      )}
+    </Flexbox>
+  );
+});
+
+export default Player;

package/src/app/chat/features/Conversation/ChatList/Extras/TTS/index.tsx

@@ -0,0 +1,31 @@
+import { memo, useMemo } from 'react';
+import { Md5 } from 'ts-md5';
+
+import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/slices/agent';
+
+import FilePlayer from './FilePlayer';
+import InitPlayer, { TTSProps } from './InitPlayer';
+
+const TTS = memo<TTSProps>(
+  (props) => {
+    const { file, voice, content, contentMd5 } = props;
+    const lang = useGlobalStore(settingsSelectors.currentLanguage);
+    const currentVoice = useSessionStore(agentSelectors.currentAgentTTSVoice(lang));
+
+    const md5 = useMemo(() => Md5.hashStr(content).toString(), [content]);
+
+    const isContentEqual = contentMd5 === md5;
+    const isVoiceEqual = currentVoice === voice;
+    const isEqual = isVoiceEqual && isContentEqual;
+
+    const PlayerRender = file && isEqual ? FilePlayer : InitPlayer;
+
+    return <PlayerRender {...props} contentMd5={md5} />;
+  },
+  (prevProps, nextProps) => {
+    return prevProps.id === nextProps.id && prevProps.content === nextProps.content;
+  },
+);
+export default TTS;

package/src/features/AgentSetting/AgentPlugin/index.tsx

@@ -34,7 +34,7 @@ const AgentPlugin = memo(() => {
   //  =========== Plugin List =========== //
 
   const list = installedPlugins.map(({ identifier, meta }) => ({
-    avatar: <Avatar avatar={meta.avatar} />,
+    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta)} />,
     children: <PluginAction identifier={identifier} />,
     desc: pluginHelpers.getPluginDesc(meta),
     label: pluginHelpers.getPluginTitle(meta),
@@ -45,7 +45,7 @@ const AgentPlugin = memo(() => {
   //  =========== Custom Plugin List =========== //
 
   const customList = customPluginList.map(({ identifier, meta }) => ({
-    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta) || '🧩'} />,
+    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta)} />,
     children: <LocalPluginItem id={identifier} />,
     desc: pluginHelpers.getPluginDesc(meta),
     label: (

package/src/hooks/useTTS.ts

@@ -1,14 +1,13 @@
-import { VoiceList } from '@lobehub/tts';
 import {
   EdgeSpeechOptions,
   MicrosoftSpeechOptions,
   OpenAITTSOptions,
+  TTSOptions,
   useEdgeSpeech,
   useMicrosoftSpeech,
   useOpenAITTS,
 } from '@lobehub/tts/react';
 import isEqual from 'fast-deep-equal';
-import { SWRConfiguration } from 'swr';
 
 import { createHeaderWithOpenAI } from '@/services/_header';
 import { OPENAI_URLS, TTS_URL } from '@/services/_url';
@@ -17,7 +16,8 @@ import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { TTSServer } from '@/types/agent';
 
-interface TTSConfig extends SWRConfiguration {
+interface TTSConfig extends TTSOptions {
+  onUpload?: (currentVoice: string, arraybuffers: ArrayBuffer[]) => void;
   server?: TTSServer;
   voice?: string;
 }
@@ -25,8 +25,8 @@ interface TTSConfig extends SWRConfiguration {
 export const useTTS = (content: string, config?: TTSConfig) => {
   const ttsSettings = useGlobalStore(settingsSelectors.currentTTS, isEqual);
   const ttsAgentSettings = useSessionStore(agentSelectors.currentAgentTTS, isEqual);
-  const voiceList = useGlobalStore((s) => new VoiceList(settingsSelectors.currentLanguage(s)));
-
+  const lang = useGlobalStore(settingsSelectors.currentLanguage);
+  const voice = useSessionStore(agentSelectors.currentAgentTTSVoice(lang));
   let useSelectedTTS;
   let options: any = {};
   switch (config?.server || ttsAgentSettings.ttsService) {
@@ -39,10 +39,7 @@ export const useTTS = (content: string, config?: TTSConfig) => {
         },
         options: {
           model: ttsSettings.openAI.ttsModel,
-          voice:
-            config?.voice ||
-            ttsAgentSettings.voice.openai ||
-            VoiceList.openaiVoiceOptions?.[0].value,
+          voice: config?.voice || voice,
         },
       } as OpenAITTSOptions;
       break;
@@ -57,8 +54,7 @@ export const useTTS = (content: string, config?: TTSConfig) => {
            */
         },
         options: {
-          voice:
-            config?.voice || ttsAgentSettings.voice.edge || voiceList.edgeVoiceOptions?.[0].value,
+          voice: config?.voice || voice,
         },
       } as EdgeSpeechOptions;
       break;
@@ -70,10 +66,7 @@ export const useTTS = (content: string, config?: TTSConfig) => {
           serviceUrl: TTS_URL.microsoft,
         },
         options: {
-          voice:
-            config?.voice ||
-            ttsAgentSettings.voice.microsoft ||
-            voiceList.microsoftVoiceOptions?.[0].value,
+          voice: config?.voice || voice,
         },
       } as MicrosoftSpeechOptions;
       break;
@@ -83,5 +76,8 @@ export const useTTS = (content: string, config?: TTSConfig) => {
   return useSelectedTTS(content, {
     ...config,
     ...options,
+    onFinish: (arraybuffers) => {
+      config?.onUpload?.(options.voice || 'alloy', arraybuffers);
+    },
   });
 };