@lobehub/chat 0.102.1 → 0.102.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/README.md +119 -38
- package/README.zh-CN.md +99 -44
- package/package.json +3 -3
- package/src/app/chat/features/Conversation/ChatList/Extras/Assistant.test.tsx +86 -0
- package/src/app/chat/features/Conversation/ChatList/Extras/Assistant.tsx +5 -1
- package/tests/setup.ts +6 -1
- package/src/app/chat/features/Conversation/ChatList/Extras/AudioPlayer.tsx +0 -139
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,31 @@
|
|
|
2
2
|
|
|
3
3
|
# Changelog
|
|
4
4
|
|
|
5
|
+
### [Version 0.102.2](https://github.com/lobehub/lobe-chat/compare/v0.102.1...v0.102.2)
|
|
6
|
+
|
|
7
|
+
<sup>Released on **2023-11-20**</sup>
|
|
8
|
+
|
|
9
|
+
#### 🐛 Bug Fixes
|
|
10
|
+
|
|
11
|
+
- **misc**: Fix model tag missing.
|
|
12
|
+
|
|
13
|
+
<br/>
|
|
14
|
+
|
|
15
|
+
<details>
|
|
16
|
+
<summary><kbd>Improvements and Fixes</kbd></summary>
|
|
17
|
+
|
|
18
|
+
#### What's fixed
|
|
19
|
+
|
|
20
|
+
- **misc**: Fix model tag missing, closes [#481](https://github.com/lobehub/lobe-chat/issues/481) ([8c96cf0](https://github.com/lobehub/lobe-chat/commit/8c96cf0))
|
|
21
|
+
|
|
22
|
+
</details>
|
|
23
|
+
|
|
24
|
+
<div align="right">
|
|
25
|
+
|
|
26
|
+
[](#readme-top)
|
|
27
|
+
|
|
28
|
+
</div>
|
|
29
|
+
|
|
5
30
|
### [Version 0.102.1](https://github.com/lobehub/lobe-chat/compare/v0.102.0...v0.102.1)
|
|
6
31
|
|
|
7
32
|
<sup>Released on **2023-11-19**</sup>
|
package/README.md
CHANGED
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
|
|
9
9
|
<h1>Lobe Chat</h1>
|
|
10
10
|
|
|
11
|
-
LobeChat is an open-source,
|
|
11
|
+
LobeChat is an open-source, high-performance chatbot framework<br/>that supports speech synthesis, multimodal, and extensible ([Function Call][fc-link]) plugin system. <br/>
|
|
12
|
+
Supports one-click free deployment of your private ChatGPT/LLM web application.
|
|
12
13
|
|
|
13
14
|
**English** · [简体中文](./README.zh-CN.md) · [Changelog](./CHANGELOG.md) · [Wiki][github-wiki-link] · [Report Bug][github-issues-link] · [Request Feature][github-issues-link]
|
|
14
15
|
|
|
@@ -95,11 +96,7 @@ Please be aware that LobeChat is currently under active development, and feedbac
|
|
|
95
96
|
- [x] 🧩 **Plugin Support & Custom Plugin Development**: Conversations are extendable with plugins. Users can install and use various plugins, such as search engines, web extraction, etc. It also supports the development of custom plugins to meet custom needs.
|
|
96
97
|
- [x] 🏬 **Agent Market**: A Agent Market is provided where users can select their preferred dialogue agent roles, enriching the content and style of the dialogue.
|
|
97
98
|
- [x] 👁️ **Visual Recognition**: With the integration of visual recognition capabilities, your agent can now analyze and understand images provided during the conversation. This allows for more interactive and context-aware conversations, enabling the dialogue agent to provide relevant and accurate responses based on visual content.
|
|
98
|
-
- [
|
|
99
|
-
|
|
100
|
-
> \[!NOTE]
|
|
101
|
-
>
|
|
102
|
-
> You can find our upcoming [Roadmap][github-project-link] plans in the Projects section.
|
|
99
|
+
- [x] 📢 **TTS & STT Conversation**: LobeChat are supporting Text-to-Speech and Speech-to-Text technology, allowing users to have voice-based conversations with the dialogue agent. This feature enhances the user experience by providing a more natural and immersive conversation environment. Users can choose from a variety of voices and adjust the speech rate to suit their preferences.
|
|
103
100
|
|
|
104
101
|
---
|
|
105
102
|
|
|
@@ -109,6 +106,10 @@ Beside these features, LobeChat also have much better basic technique undergroun
|
|
|
109
106
|
- [x] 🌐 **Custom Domain**: If users have their own domain, they can bind it to the platform for quick access to the dialogue agent from anywhere.
|
|
110
107
|
- [x] 🔒 **Privacy Protection**: All data is stored locally in the user's browser, ensuring user privacy.
|
|
111
108
|
|
|
109
|
+
> \[!NOTE]
|
|
110
|
+
>
|
|
111
|
+
> You can find our upcoming [Roadmap][github-project-link] plans in the Projects section.
|
|
112
|
+
|
|
112
113
|
<div align="right">
|
|
113
114
|
|
|
114
115
|
[![][back-to-top]](#readme-top)
|
|
@@ -117,14 +118,89 @@ Beside these features, LobeChat also have much better basic technique undergroun
|
|
|
117
118
|
|
|
118
119
|
## 📸 Snapshot
|
|
119
120
|
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
#### `1` Visual Model Support
|
|
124
|
+
|
|
125
|
+
LobeChat now supports OpenAI's latest [`gpt-4-vision`](https://platform.openai.com/docs/guides/vision) model with visual recognition capabilities,
|
|
126
|
+
a multimodal intelligence that can perceive visuals. Users can easily upload or drag and drop images into the dialogue box,
|
|
127
|
+
and the agent will be able to recognize the content of the images and engage in intelligent conversation based on this,
|
|
128
|
+
creating smarter and more diversified chat scenarios.
|
|
129
|
+
|
|
130
|
+
This feature opens up new interactive methods, allowing communication to transcend text and include a wealth of visual elements.
|
|
131
|
+
Whether it's sharing images in daily use or interpreting images within specific industries, the agent provides an outstanding conversational experience.
|
|
132
|
+
|
|
133
|
+
<div align="right">
|
|
134
|
+
|
|
135
|
+
[![][back-to-top]](#readme-top)
|
|
136
|
+
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
#### `2` TTS & STT Voice Speech
|
|
142
|
+
|
|
143
|
+
LobeChat supports Text-to-Speech (TTS) and Speech-to-Text (STT) technologies, enabling our application to convert text messages into clear voice outputs,
|
|
144
|
+
allowing users to interact with our conversational agent as if they were talking to a real person. Users can choose from a variety of voices to pair with the agent.
|
|
145
|
+
|
|
146
|
+
Moreover, TTS offers an excellent solution for those who prefer auditory learning or desire to receive information while busy.
|
|
147
|
+
In LobeChat, we have meticulously selected a range of high-quality voice options (OpenAI Audio, Microsoft Edge Speech) to meet the needs of users from different regions and cultural backgrounds.
|
|
148
|
+
Users can choose the voice that suits their personal preferences or specific scenarios, resulting in a personalized communication experience.
|
|
149
|
+
|
|
150
|
+
> \[!NOTE]
|
|
151
|
+
>
|
|
152
|
+
> In the process of implementing this feature, we found that there was no satisfactory TTS (Text-to-Speech) frontend library available on the market.
|
|
153
|
+
> As a result, we invested a lot of effort, including data conversion, audio progress management, and speech visualization, among other tasks.
|
|
154
|
+
|
|
155
|
+
> \[!IMPORTANT]
|
|
156
|
+
> Therefore, we decided to refine our implementation and make it open source, hoping to assist developers who wish to implement TTS.
|
|
157
|
+
> [@lobehub/tts][lobe-tts-link] is a high-quality TTS toolkit developed in TypeScript, which supports usage both on the server-side and in the browser.
|
|
158
|
+
>
|
|
159
|
+
> - **Server-side:** With just 15 lines of code, you can achieve high-quality voice generation capabilities comparable to OpenAI's TTS service. It currently supports EdgeSpeechTTS, MicrosoftTTS, OpenAITTS, and OpenAISTT.
|
|
160
|
+
> - **Browser-side:** It provides high-quality React Hooks and visual audio components, supporting common functions such as loading, playing, pausing, and dragging the timeline. Additionally, it offers a very rich set of capabilities for adjusting the audio track styles.
|
|
161
|
+
|
|
162
|
+
<div align="right">
|
|
163
|
+
|
|
164
|
+
[![][back-to-top]](#readme-top)
|
|
165
|
+
|
|
166
|
+
</div>
|
|
167
|
+
|
|
120
168
|
|
|
121
169
|
|
|
122
|
-
#### `
|
|
170
|
+
#### `3` Function Calling Plugin System
|
|
171
|
+
|
|
172
|
+
The plugin ecosystem of LobeChat is a significant extension of its core functionalities, greatly enhancing the practicality and flexibility of ChatGPT.
|
|
173
|
+
By leveraging plugins, ChatGPT can perform real-time information retrieval and processing,
|
|
174
|
+
such as automatically fetching the latest news headlines to provide users with immediate and relevant information.
|
|
175
|
+
Moreover, these plugins are not limited to news aggregation but can also extend to other practical functions, such as quick document retrieval,
|
|
176
|
+
e-commerce platform data access, and various third-party services.
|
|
177
|
+
|
|
178
|
+
> \[!TIP]
|
|
179
|
+
>
|
|
180
|
+
> To aid developers in joining this ecosystem, we provide comprehensive development resources in the [🧩 Plugin System](#-plugins) section.
|
|
181
|
+
> This includes detailed component development documentation,
|
|
182
|
+
> a fully-featured software development kit (SDK), and template files—all designed to simplify the development process and lower the barrier to entry for developers.
|
|
123
183
|
|
|
124
|
-
|
|
184
|
+
> \[!IMPORTANT]
|
|
185
|
+
>
|
|
186
|
+
> We welcome developers to use these resources to unleash their creativity and write feature-rich, user-friendly plugins.
|
|
187
|
+
> With collective efforts, we can continuously expand the boundaries of chat applications and explore a more intelligent and efficient creativity platform.
|
|
125
188
|
|
|
126
189
|
<https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2>
|
|
127
190
|
|
|
191
|
+
<!-- PLUGIN LIST -->
|
|
192
|
+
|
|
193
|
+
| Official Plugin | Repository | Description |
|
|
194
|
+
| ------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
|
|
195
|
+
| [Clock Time](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-11-01**</sup> | [lobehub/chat-plugin-clock-time](https://github.com/lobehub/chat-plugin-clock-time) | Display a clock to show current time<br/>`clock` `time` |
|
|
196
|
+
| [Website Crawler](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-08-17**</sup> | [lobehub/chat-plugin-web-crawler](https://github.com/lobehub/chat-plugin-web-crawler) | Extract content from web links<br/>`web` `content-crawler` |
|
|
197
|
+
| [Search Engine](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-08-15**</sup> | [lobehub/chat-plugin-search-engine](https://github.com/lobehub/chat-plugin-search-engine) | Query search engine to get information<br/>`web` `search` |
|
|
198
|
+
| [Realtime Weather](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-08-12**</sup> | [lobehub/chat-plugin-realtime-weather](https://github.com/lobehub/chat-plugin-realtime-weather) | Get realtime weather information<br/>`weather` `realtime` |
|
|
199
|
+
|
|
200
|
+
> 📊 Total plugins: [<kbd>**4**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
|
|
201
|
+
|
|
202
|
+
<!-- PLUGIN LIST -->
|
|
203
|
+
|
|
128
204
|
<div align="right">
|
|
129
205
|
|
|
130
206
|
[![][back-to-top]](#readme-top)
|
|
@@ -133,9 +209,23 @@ By establishing a versatile plugin system, ChatGPT becomes capable of delivering
|
|
|
133
209
|
|
|
134
210
|
|
|
135
211
|
|
|
136
|
-
#### `
|
|
212
|
+
#### `4` Prompt Agent Market
|
|
137
213
|
|
|
138
|
-
In
|
|
214
|
+
In the LobeChat Agent Marketplace, creators can discover a vibrant and innovative community that brings together a multitude of well-designed agents,
|
|
215
|
+
which not only play an important role in work scenarios but also offer great convenience in learning processes.
|
|
216
|
+
Our marketplace is not just a showcase platform but also a collaborative space. Here, everyone can contribute their wisdom and share the agents they have developed.
|
|
217
|
+
|
|
218
|
+
> \[!TIP]
|
|
219
|
+
>
|
|
220
|
+
> By [🤖/🏪 Submit Agents][submit-agents-link], you can easily submit your agent creations to our platform.
|
|
221
|
+
> Importantly, LobeChat has established a sophisticated automated internationalization (i18n) workflow,
|
|
222
|
+
> capable of seamlessly translating your agent into multiple language versions.
|
|
223
|
+
> This means that no matter what language your users speak, they can experience your agent without barriers.
|
|
224
|
+
|
|
225
|
+
> \[!IMPORTANT]
|
|
226
|
+
>
|
|
227
|
+
> We welcome all users to join this growing ecosystem and participate in the iteration and optimization of agents.
|
|
228
|
+
> Together, we can create more interesting, practical, and innovative agents, further enriching the diversity and practicality of the agent offerings.
|
|
139
229
|
|
|
140
230
|
<!-- AGENT LIST -->
|
|
141
231
|
|
|
@@ -158,9 +248,15 @@ In our agent market. We have accumulated a large number of practical, prompt age
|
|
|
158
248
|
|
|
159
249
|
|
|
160
250
|
|
|
161
|
-
#### `
|
|
251
|
+
#### `5` Progress Web App
|
|
252
|
+
|
|
253
|
+
We deeply understand the importance of providing a seamless experience for users in today's multi-device environment.
|
|
254
|
+
Therefore, we have adopted Progressive Web Application ([PWA](https://support.google.com/chrome/answer/9658361)) technology,
|
|
255
|
+
a modern web technology that elevates web applications to an experience close to that of native apps.
|
|
162
256
|
|
|
163
|
-
|
|
257
|
+
Through PWA, LobeChat can offer a highly optimized user experience on both desktop and mobile devices while maintaining its lightweight and high-performance characteristics.
|
|
258
|
+
Visually and in terms of feel, we have also meticulously designed the interface to ensure it is indistinguishable from native apps,
|
|
259
|
+
providing smooth animations, responsive layouts, and adapting to different device screen resolutions.
|
|
164
260
|
|
|
165
261
|
> \[!NOTE]
|
|
166
262
|
>
|
|
@@ -179,9 +275,17 @@ Utilize the Progressive Web Application ([PWA](https://support.google.com/chrome
|
|
|
179
275
|
|
|
180
276
|
|
|
181
277
|
|
|
182
|
-
#### `
|
|
278
|
+
#### `6` Theme Mode Selection
|
|
279
|
+
|
|
280
|
+
As a design-engineering-oriented application, LobeChat places great emphasis on users' personalized experiences,
|
|
281
|
+
hence introducing flexible and diverse theme modes, including a light mode for daytime and a dark mode for nighttime.
|
|
282
|
+
Beyond switching theme modes, a range of color customization options allow users to adjust the application's theme colors according to their preferences.
|
|
283
|
+
Whether it's a desire for a sober dark blue, a lively peach pink, or a professional gray-white, users can find their style of color choices in LobeChat.
|
|
183
284
|
|
|
184
|
-
|
|
285
|
+
> \[!TIP]
|
|
286
|
+
>
|
|
287
|
+
> The default configuration can intelligently recognize the user's system color mode and automatically switch themes to ensure a consistent visual experience with the operating system.
|
|
288
|
+
> For users who like to manually control details, LobeChat also offers intuitive setting options and a choice between chat bubble mode and document mode for conversation scenarios.
|
|
185
289
|
|
|
186
290
|
<div align="right">
|
|
187
291
|
|
|
@@ -191,20 +295,10 @@ LobeChat offers two unique theme modes - Light Mode and Dark Mode, as well as ri
|
|
|
191
295
|
|
|
192
296
|
|
|
193
297
|
|
|
194
|
-
#### `
|
|
298
|
+
#### `7` Mobile Device Adaptation
|
|
195
299
|
|
|
196
300
|
We have carried out a series of optimization designs for mobile devices to enhance the user's mobile experience. Currently, we are iterating on the mobile user experience to achieve smoother and more intuitive interactions. If you have any suggestions or ideas, we welcome you to provide feedback through GitHub Issues or Pull Requests.
|
|
197
301
|
|
|
198
|
-
<div align="right">
|
|
199
|
-
|
|
200
|
-
[![][back-to-top]](#readme-top)
|
|
201
|
-
|
|
202
|
-
</div>
|
|
203
|
-
|
|
204
|
-
#### `6` Visual Model Support
|
|
205
|
-
|
|
206
|
-
We have support [`gpt-4-vision`](https://platform.openai.com/docs/guides/vision) model.You can just upload, drag/drop or just paste your image to chat.
|
|
207
|
-
|
|
208
302
|
> 🚧 Additional snapshots and demonstrations are being progressively added...
|
|
209
303
|
|
|
210
304
|
<div align="right">
|
|
@@ -344,19 +438,6 @@ Plugins provide a means to extend the [Function Calling][fc-link] capabilities o
|
|
|
344
438
|
> - [x] [**Plugin Phase 2**](https://github.com/lobehub/lobe-chat/issues/97): The security and stability of the plugin's use, more accurately presenting abnormal states, the maintainability of the plugin architecture, and developer-friendly.
|
|
345
439
|
> - [ ] [**Plugin Phase 3**](https://github.com/lobehub/lobe-chat/issues/149): Higher-level and more comprehensive customization capabilities, support for plugin authentication, and examples.
|
|
346
440
|
|
|
347
|
-
<!-- PLUGIN LIST -->
|
|
348
|
-
|
|
349
|
-
| Official Plugin | Repository | Description |
|
|
350
|
-
| ------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
|
|
351
|
-
| [Clock Time](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-11-01**</sup> | [lobehub/chat-plugin-clock-time](https://github.com/lobehub/chat-plugin-clock-time) | Display a clock to show current time<br/>`clock` `time` |
|
|
352
|
-
| [Website Crawler](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-08-17**</sup> | [lobehub/chat-plugin-web-crawler](https://github.com/lobehub/chat-plugin-web-crawler) | Extract content from web links<br/>`web` `content-crawler` |
|
|
353
|
-
| [Search Engine](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-08-15**</sup> | [lobehub/chat-plugin-search-engine](https://github.com/lobehub/chat-plugin-search-engine) | Query search engine to get information<br/>`web` `search` |
|
|
354
|
-
| [Realtime Weather](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-08-12**</sup> | [lobehub/chat-plugin-realtime-weather](https://github.com/lobehub/chat-plugin-realtime-weather) | Get realtime weather information<br/>`weather` `realtime` |
|
|
355
|
-
|
|
356
|
-
> 📊 Total plugins: [<kbd>**4**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
|
|
357
|
-
|
|
358
|
-
<!-- PLUGIN LIST -->
|
|
359
|
-
|
|
360
441
|
<div align="right">
|
|
361
442
|
|
|
362
443
|
[![][back-to-top]](#readme-top)
|
package/README.zh-CN.md
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
<h1>Lobe Chat</h1>
|
|
10
10
|
|
|
11
|
-
LobeChat
|
|
11
|
+
LobeChat 是开源的高性能聊天机器人框架，支持语音合成、多模态、可扩展的（[Function Call][fc-link]）插件系统。<br/> 支持一键免费部署私人 ChatGPT/LLM 网页应用程序。
|
|
12
12
|
|
|
13
13
|
[English](./README.md) · **简体中文** · [更新日志](./CHANGELOG.md) · [文档][github-wiki-link] · [报告问题][github-issues-link] · [请求功能][github-issues-link]
|
|
14
14
|
|
|
@@ -87,25 +87,42 @@ LobeChat 是一个开源的、可扩展的（[Function Calling][fc-link]）高
|
|
|
87
87
|
|
|
88
88
|
## ✨ 功能特性
|
|
89
89
|
|
|
90
|
-
- [x] 💎 **精致 UI 设计**：经过精心设计的界面，具有优雅的外观和流畅的交互效果，支持亮暗色主题，适配移动端。支持 PWA
|
|
91
|
-
- [x] 🗣️ **流畅的对话体验**：流式响应带来流畅的对话体验，并且支持完整的 Markdown 渲染，包括代码高亮、LaTex 公式、Mermaid
|
|
92
|
-
- [x] 🧩
|
|
90
|
+
- [x] 💎 **精致 UI 设计**：经过精心设计的界面，具有优雅的外观和流畅的交互效果，支持亮暗色主题，适配移动端。支持 PWA，提供更加接近原生应用的体验。
|
|
91
|
+
- [x] 🗣️ **流畅的对话体验**：流式响应带来流畅的对话体验，并且支持完整的 Markdown 渲染，包括代码高亮、LaTex 公式、Mermaid 流程图等。
|
|
92
|
+
- [x] 🧩 **支持插件与自定义插件开发**：会话支持插件扩展，用户可以安装和使用各种插件，例如搜索引擎、网页提取等，同时也支持自定义插件的开发，满足自定义需求。
|
|
93
93
|
- [x] 🤖 **自定义助手角色**：用户可以根据自己的需求创建、分享和调试个性化的对话助手角色，提供更加灵活和个性化的对话功能 .
|
|
94
|
-
- [x] 🏬
|
|
94
|
+
- [x] 🏬 **角色市场**：提供角色市场，用户可以在市场上选择自己喜欢的对话助手角色，丰富对话的内容和风格。
|
|
95
95
|
- [x] 👁️ **视觉识别**: 通过集成视觉识别能力，AI 助手现在可以分析和理解对话过程中提供的图像。这使得对话代理能够进行更具交互性和上下文感知的对话，根据视觉内容提供相关和准确的回答。
|
|
96
|
-
- [ ]
|
|
96
|
+
- [ ] 📢 **语音会话**: 我们支持文本转语音技术，允许用户与对话代理进行语音对话。这个功能通过提供更自然和沉浸式的对话环境来增强用户体验。用户可以选择多种声音并调整语速以适应自己的偏好。
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
除了上述功能特性以外，我们的底层技术方案为你带来了更多使用保障：
|
|
101
|
+
|
|
102
|
+
- [x] 💨 **快速部署**：使用 Vercel 平台或者我们的 Docker 镜像，只需点击一键部署按钮，即可在 1 分钟内完成部署，无需复杂的配置过程。
|
|
103
|
+
- [x] 🔒 **隐私安全**：所有数据保存在用户浏览器本地，保证用户的隐私安全。
|
|
104
|
+
- [x] 🌐 **自定义域名**：如果用户拥有自己的域名，可以将其绑定到平台上，方便在任何地方快速访问对话助手。
|
|
97
105
|
|
|
98
106
|
> \[!NOTE]
|
|
99
107
|
>
|
|
100
108
|
> 你可以在 Projects 中找到我们后续的 [Roadmap][github-project-link] 计划
|
|
101
109
|
|
|
102
|
-
|
|
110
|
+
<div align="right">
|
|
103
111
|
|
|
104
|
-
|
|
112
|
+
[![][back-to-top]](#readme-top)
|
|
113
|
+
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
## 📸 快照预览
|
|
117
|
+
|
|
118
|
+
#### `1` GPT 视觉认知
|
|
119
|
+
|
|
120
|
+
|
|
105
121
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
122
|
+
LobeChat 已经支持 OpenAI 最新的 [`gpt-4-vsion`](https://platform.openai.com/docs/guides/vision) 支持视觉识别的模型，这是一个具备视觉识别能力的多模态智能。
|
|
123
|
+
用户可以轻松上传图片或者拖拽图片到对话框中，助手将能够识别图片内容，并在此基础上进行智能对话，构建更智能、更多元化的聊天场景。
|
|
124
|
+
|
|
125
|
+
这一特性打开了新的互动方式，使得交流不再局限于文字，而是可以涵盖丰富的视觉元素。无论是日常使用中的图片分享，还是在特定行业内的图像解读，助手都能提供出色的对话体验。
|
|
109
126
|
|
|
110
127
|
<div align="right">
|
|
111
128
|
|
|
@@ -113,16 +130,60 @@ LobeChat 是一个开源的、可扩展的（[Function Calling][fc-link]）高
|
|
|
113
130
|
|
|
114
131
|
</div>
|
|
115
132
|
|
|
116
|
-
|
|
133
|
+
#### `2` TTS & STT 语音会话
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
LobeChat 支持文字转语音（Text-to-Speech，TTS）和语音转文字（Speech-to-Text，STT）技术，我们的应用能够将文本信息转化为清晰的语音输出，用户可以像与真人交谈一样与我们的对话代理进行交流。
|
|
138
|
+
用户可以从多种声音中选择，给助手搭配合适的音源。 同时，对于那些倾向于听觉学习或者想要在忙碌中获取信息的用户来说，TTS 提供了一个极佳的解决方案。
|
|
139
|
+
|
|
140
|
+
在 LobeChat 中，我们精心挑选了一系列高品质的声音选项 (OpenAI Audio, Microsoft Edge Speech)，以满足不同地域和文化背景用户的需求。用户可以根据个人喜好或者特定场景来选择合适的语音，从而获得个性化的交流体验。
|
|
141
|
+
|
|
142
|
+
> \[!NOTE]
|
|
143
|
+
>
|
|
144
|
+
> 我们在实现该功能过程中，发现市面上并没有一款很好的 TTS 前端库。因此我们实现上耗费了很多精力，包括数据转换、音频进度管理、语音可视化等。
|
|
145
|
+
> 于是我们决定把这套实现打磨并开源出来，希望能帮助到想要实现 TTS 的开发者们，[@lobehub/tts][lobe-tts-link] 是一个使用 TS 语言开发的，高质量 TTS 工具包，支持在服务端和浏览器中使用。
|
|
146
|
+
>
|
|
147
|
+
> - **服务端**：只要使用 15 行代码，即可实现对标 OpenAI TTS 服务的高质量语音生成能力。目前支持 EdgeSpeechTTS 与 MicrosoftTTS 与 OpenAITTS、OpenAISTT。
|
|
148
|
+
> - **浏览器**：提供了高质量的 React Hooks 与可视化音频组件，支持加载、播放、暂停、拖动时间轴等常用功能，且提供了非常丰富的音轨样式调整能力。
|
|
149
|
+
|
|
150
|
+
<div align="right">
|
|
151
|
+
|
|
152
|
+
[![][back-to-top]](#readme-top)
|
|
153
|
+
|
|
154
|
+
</div>
|
|
117
155
|
|
|
118
156
|
|
|
119
157
|
|
|
120
|
-
#### `
|
|
158
|
+
#### `3` Function Calling 插件系统
|
|
121
159
|
|
|
122
|
-
|
|
160
|
+
LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地增强了 ChatGPT 的实用性和灵活性。通过利用插件，ChatGPT 能够实现实时信息的获取和处理，例如自动获取最新新闻头条，为用户提供即时且相关的资讯。
|
|
161
|
+
此外，这些插件不仅局限于新闻聚合，还可以扩展到其他实用的功能，如快速检索文档、获取电商平台数据、以及其他各式各样的第三方服务。
|
|
162
|
+
|
|
163
|
+
> \[!TIP]
|
|
164
|
+
>
|
|
165
|
+
> 为了帮助开发者更好地参与到这个生态中来，我们在 [🧩 插件体系](#-插件体系) 部分提供了全面的开发资源。
|
|
166
|
+
> 这包括详尽的组件开发文档、功能齐全的软件开发工具包（SDK），以及样板文件，这些都是为了简化开发过程，降低开发者的入门门槛。
|
|
167
|
+
|
|
168
|
+
> \[!IMPORTANT]
|
|
169
|
+
>
|
|
170
|
+
> 我们欢迎开发者利用这些资源，发挥创造力，编写出功能丰富、用户友好的插件。通过共同的努力，我们可以不断扩展聊天应用的功能界限，探索一个更加智能、高效的创造力平台。
|
|
123
171
|
|
|
124
172
|
<https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2>
|
|
125
173
|
|
|
174
|
+
<!-- PLUGIN LIST -->
|
|
175
|
+
|
|
176
|
+
| 官方插件 | 仓库 | 插件描述 |
|
|
177
|
+
| ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------- |
|
|
178
|
+
| [时钟时间](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-11-01**</sup> | [lobehub/chat-plugin-clock-time](https://github.com/lobehub/chat-plugin-clock-time) | 显示一个时钟来展示当前时间<br/>`时钟` `时间` |
|
|
179
|
+
| [网站爬虫](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-08-17**</sup> | [lobehub/chat-plugin-web-crawler](https://github.com/lobehub/chat-plugin-web-crawler) | 从网页链接中提取内容<br/>`网页` `内容爬取器` |
|
|
180
|
+
| [搜索引擎](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-08-15**</sup> | [lobehub/chat-plugin-search-engine](https://github.com/lobehub/chat-plugin-search-engine) | 查询搜索引擎以获取信息<br/>`网络` `搜索` |
|
|
181
|
+
| [实时天气](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-08-12**</sup> | [lobehub/chat-plugin-realtime-weather](https://github.com/lobehub/chat-plugin-realtime-weather) | 获取实时天气信息<br/>`天气` `实时` |
|
|
182
|
+
|
|
183
|
+
> 📊 Total plugins: [<kbd>**4**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
|
|
184
|
+
|
|
185
|
+
<!-- PLUGIN LIST -->
|
|
186
|
+
|
|
126
187
|
<div align="right">
|
|
127
188
|
|
|
128
189
|
[![][back-to-top]](#readme-top)
|
|
@@ -131,9 +192,19 @@ LobeChat 是一个开源的、可扩展的（[Function Calling][fc-link]）高
|
|
|
131
192
|
|
|
132
193
|
|
|
133
194
|
|
|
134
|
-
#### `
|
|
195
|
+
#### `4` 助手市场
|
|
196
|
+
|
|
197
|
+
在 LobeChat 的助手市场中，创作者们可以发现一个充满活力和创新的社区，它汇聚了众多精心设计的助手，这些助手不仅在工作场景中发挥着重要作用，也在学习过程中提供了极大的便利。
|
|
198
|
+
我们的市场不仅是一个展示平台，更是一个协作的空间。在这里，每个人都可以贡献自己的智慧，分享个人开发的助手。
|
|
135
199
|
|
|
136
|
-
|
|
200
|
+
> \[!TIP]
|
|
201
|
+
>
|
|
202
|
+
> 通过 [🤖/🏪 提交助手][submit-agents-link] ，你可以轻松地将你的助手作品提交到我们的平台。我们特别强调的是，LobeChat 建立了一套精密的自动化国际化（i18n）工作流程， 它的强大之处在于能够无缝地将你的助手转化为多种语言版本。
|
|
203
|
+
> 这意味着，不论你的用户使用何种语言，他们都能无障碍地体验到你的助手。
|
|
204
|
+
|
|
205
|
+
> \[!IMPORTANT]
|
|
206
|
+
>
|
|
207
|
+
> 我欢迎所有用户加入这个不断成长的生态系统，共同参与到助手的迭代与优化中来。共同创造出更多有趣、实用且具有创新性的助手，进一步丰富助手的多样性和实用性。
|
|
137
208
|
|
|
138
209
|
<!-- AGENT LIST -->
|
|
139
210
|
|
|
@@ -156,9 +227,11 @@ LobeChat 是一个开源的、可扩展的（[Function Calling][fc-link]）高
|
|
|
156
227
|
|
|
157
228
|
|
|
158
229
|
|
|
159
|
-
#### `
|
|
230
|
+
#### `5` PWA 渐进式 Web 应用
|
|
160
231
|
|
|
161
|
-
|
|
232
|
+
我们利深知在当今多设备环境下为用户提供无缝体验的重要性。为此，我们采用了渐进式 Web 应用 [PWA](https://support.google.com/chrome/answer/9658361) 技术，
|
|
233
|
+
这是一种能够将网页应用提升至接近原生应用体验的现代 Web 技术。通过 PWA，LobeChat 能够在桌面和移动设备上提供高度优化的用户体验，同时保持轻量级和高性能的特点。
|
|
234
|
+
在视觉和感觉上，我们也经过精心设计，以确保它的界面与原生应用无差别，提供流畅的动画、响应式布局和适配不同设备的屏幕分辨率。
|
|
162
235
|
|
|
163
236
|
> \[!NOTE]
|
|
164
237
|
>
|
|
@@ -177,9 +250,14 @@ LobeChat 是一个开源的、可扩展的（[Function Calling][fc-link]）高
|
|
|
177
250
|
|
|
178
251
|
|
|
179
252
|
|
|
180
|
-
#### `
|
|
253
|
+
#### `6` 主题模式选择
|
|
181
254
|
|
|
182
|
-
LobeChat
|
|
255
|
+
作为设计工程师出身 LobeChat 在界面设计上十分考虑用户的个性化体验，因此引入了灵活多变的主题模式，其中包括日间的亮色模式和夜间的深色模式。
|
|
256
|
+
除了主题模式的切换，提供了一系列的颜色定制选项，允许用户根据自己的喜好来调整应用的主题色彩。无论是想要沉稳的深蓝，还是希望活泼的桃粉，或者是专业的灰白，用户都能够在 LobeChat 中找到匹配自己风格的颜色选择。
|
|
257
|
+
|
|
258
|
+
> \[!TIP]
|
|
259
|
+
>
|
|
260
|
+
> 默认配置能够智能地识别用户系统的颜色模式，自动进行主题切换，以确保应用界面与操作系统保持一致的视觉体验。对于喜欢手动调控细节的用户，LobeChat 同样提供了直观的设置选项，针对聊天场景也提供了对话气泡模式和文档模式的选择。
|
|
183
261
|
|
|
184
262
|
<div align="right">
|
|
185
263
|
|
|
@@ -189,20 +267,10 @@ LobeChat 提供了丰富的主题模式 - 亮色 / 深色模式 与丰富的颜
|
|
|
189
267
|
|
|
190
268
|
|
|
191
269
|
|
|
192
|
-
#### `
|
|
270
|
+
#### `7` 移动设备适配
|
|
193
271
|
|
|
194
272
|
针对移动设备进行了一系列的优化设计，以提升用户的移动体验。目前，我们正在对移动端的用户体验进行版本迭代，以实现更加流畅和直观的交互。如果您有任何建议或想法，我们非常欢迎您通过 GitHub Issues 或者 Pull Requests 提供反馈。
|
|
195
273
|
|
|
196
|
-
<div align="right">
|
|
197
|
-
|
|
198
|
-
[![][back-to-top]](#readme-top)
|
|
199
|
-
|
|
200
|
-
</div>
|
|
201
|
-
|
|
202
|
-
#### `6` 图片识别
|
|
203
|
-
|
|
204
|
-
LobeChat 已经支持 OpenAI 最新的 [`gpt-4-vsion`](https://platform.openai.com/docs/guides/vision) 支持视觉识别的模型。你可以上传图片，或者直接粘贴图片，与助手进行对话。
|
|
205
|
-
|
|
206
274
|
> 🚧 更多快照和演示正在陆续添加中...
|
|
207
275
|
|
|
208
276
|
<div align="right">
|
|
@@ -344,19 +412,6 @@ $ docker run -d -p 3210:3210 \
|
|
|
344
412
|
> - [x] [**插件二期**](https://github.com/lobehub/lobe-chat/issues/97): 插件的安全性与使用的稳定性，更加精准地呈现异常状态，插件架构的可维护性与开发者友好
|
|
345
413
|
> - [ ] [**插件三期**](https://github.com/lobehub/lobe-chat/issues/149)：更高阶与完善的自定义能力，支持插件鉴权与示例
|
|
346
414
|
|
|
347
|
-
<!-- PLUGIN LIST -->
|
|
348
|
-
|
|
349
|
-
| 官方插件 | 仓库 | 插件描述 |
|
|
350
|
-
| ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------- |
|
|
351
|
-
| [时钟时间](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-11-01**</sup> | [lobehub/chat-plugin-clock-time](https://github.com/lobehub/chat-plugin-clock-time) | 显示一个时钟来展示当前时间<br/>`时钟` `时间` |
|
|
352
|
-
| [网站爬虫](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-08-17**</sup> | [lobehub/chat-plugin-web-crawler](https://github.com/lobehub/chat-plugin-web-crawler) | 从网页链接中提取内容<br/>`网页` `内容爬取器` |
|
|
353
|
-
| [搜索引擎](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-08-15**</sup> | [lobehub/chat-plugin-search-engine](https://github.com/lobehub/chat-plugin-search-engine) | 查询搜索引擎以获取信息<br/>`网络` `搜索` |
|
|
354
|
-
| [实时天气](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-08-12**</sup> | [lobehub/chat-plugin-realtime-weather](https://github.com/lobehub/chat-plugin-realtime-weather) | 获取实时天气信息<br/>`天气` `实时` |
|
|
355
|
-
|
|
356
|
-
> 📊 Total plugins: [<kbd>**4**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
|
|
357
|
-
|
|
358
|
-
<!-- PLUGIN LIST -->
|
|
359
|
-
|
|
360
415
|
<div align="right">
|
|
361
416
|
|
|
362
417
|
[![][back-to-top]](#readme-top)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lobehub/chat",
|
|
3
|
-
"version": "0.102.
|
|
3
|
+
"version": "0.102.2",
|
|
4
4
|
"description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chatbot",
|
|
@@ -128,8 +128,8 @@
|
|
|
128
128
|
"@ducanh2912/next-pwa": "^9.7.2",
|
|
129
129
|
"@lobehub/i18n-cli": "latest",
|
|
130
130
|
"@lobehub/lint": "latest",
|
|
131
|
-
"@next/bundle-analyzer": "14.0.3",
|
|
132
|
-
"@next/eslint-plugin-next": "14.0.3",
|
|
131
|
+
"@next/bundle-analyzer": "^14.0.3",
|
|
132
|
+
"@next/eslint-plugin-next": "^14.0.3",
|
|
133
133
|
"@testing-library/jest-dom": "^6",
|
|
134
134
|
"@testing-library/react": "^14",
|
|
135
135
|
"@types/chroma-js": "^2",
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { render, screen } from '@testing-library/react';
|
|
2
|
+
import { Mock, beforeEach, describe, expect, it, vi } from 'vitest';
|
|
3
|
+
|
|
4
|
+
import { useSessionStore } from '@/store/session';
|
|
5
|
+
import { agentSelectors } from '@/store/session/selectors';
|
|
6
|
+
import { ChatMessage } from '@/types/chatMessage';
|
|
7
|
+
|
|
8
|
+
import { AssistantMessageExtra } from './Assistant';
|
|
9
|
+
|
|
10
|
+
// Mock TTS and Translate components
|
|
11
|
+
vi.mock('./TTS', () => ({
|
|
12
|
+
default: vi.fn(() => <div>TTS Component</div>),
|
|
13
|
+
}));
|
|
14
|
+
vi.mock('./Translate', () => ({
|
|
15
|
+
default: vi.fn(() => <div>Translate Component</div>),
|
|
16
|
+
}));
|
|
17
|
+
|
|
18
|
+
// Mock dependencies
|
|
19
|
+
vi.mock('@/store/session', () => ({
|
|
20
|
+
useSessionStore: vi.fn(),
|
|
21
|
+
}));
|
|
22
|
+
vi.mock('@/store/session/selectors', () => ({
|
|
23
|
+
agentSelectors: {
|
|
24
|
+
currentAgentModel: vi.fn(),
|
|
25
|
+
},
|
|
26
|
+
}));
|
|
27
|
+
|
|
28
|
+
const mockData: ChatMessage = {
|
|
29
|
+
content: 'test-content',
|
|
30
|
+
createAt: 0,
|
|
31
|
+
id: 'abc',
|
|
32
|
+
meta: { avatar: '', backgroundColor: '', description: '', tags: [], title: '' },
|
|
33
|
+
role: 'assistant',
|
|
34
|
+
updateAt: 0,
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
describe('AssistantMessageExtra', () => {
|
|
38
|
+
beforeEach(() => {
|
|
39
|
+
// Set default mock return values
|
|
40
|
+
(useSessionStore as unknown as Mock).mockImplementation(() => ({
|
|
41
|
+
chatLoadingId: null,
|
|
42
|
+
}));
|
|
43
|
+
(agentSelectors.currentAgentModel as Mock).mockReturnValue('defaultModel');
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
it('should not render content if extra is undefined', async () => {
|
|
47
|
+
render(<AssistantMessageExtra {...mockData} />);
|
|
48
|
+
expect(screen.queryByText('defaultModel')).toBeNull();
|
|
49
|
+
expect(screen.queryByText('TTS Component')).toBeNull();
|
|
50
|
+
expect(screen.queryByText('Translate Component')).toBeNull();
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
it('should not render content if extra is defined but does not contain fromModel, tts, or translate', async () => {
|
|
54
|
+
render(<AssistantMessageExtra {...mockData} />);
|
|
55
|
+
expect(screen.queryByText('defaultModel')).toBeNull();
|
|
56
|
+
expect(screen.queryByText('TTS Component')).toBeNull();
|
|
57
|
+
expect(screen.queryByText('Translate Component')).toBeNull();
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
it('should render Tag component if extra.fromModel exists and does not match the current model', async () => {
|
|
61
|
+
render(<AssistantMessageExtra {...mockData} extra={{ fromModel: 'otherModel' }} />);
|
|
62
|
+
|
|
63
|
+
expect(screen.getByText('otherModel')).toBeInTheDocument();
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
it('should render TTS component if extra.fromModel and extra.tts coexist', async () => {
|
|
67
|
+
render(<AssistantMessageExtra {...mockData} extra={{ fromModel: 'otherModel', tts: {} }} />);
|
|
68
|
+
|
|
69
|
+
expect(screen.getByText('otherModel')).toBeInTheDocument();
|
|
70
|
+
expect(screen.getByText('TTS Component')).toBeInTheDocument();
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
it('should render Translate component if extra.translate exists', async () => {
|
|
74
|
+
render(<AssistantMessageExtra {...mockData} extra={{ translate: {} }} />);
|
|
75
|
+
expect(screen.getByText('Translate Component')).toBeInTheDocument();
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
it('should receive the correct loading attribute if loading is true for TTS and Translate components', async () => {
|
|
79
|
+
(useSessionStore as unknown as Mock).mockImplementation(() => ({
|
|
80
|
+
chatLoadingId: 'test-id',
|
|
81
|
+
}));
|
|
82
|
+
render(<AssistantMessageExtra {...mockData} extra={{ translate: {}, tts: {} }} />);
|
|
83
|
+
expect(screen.getByText('TTS Component')).toBeInTheDocument();
|
|
84
|
+
expect(screen.getByText('Translate Component')).toBeInTheDocument();
|
|
85
|
+
});
|
|
86
|
+
});
|
|
@@ -17,7 +17,11 @@ export const AssistantMessageExtra: RenderMessageExtra = memo<ChatMessage>(
|
|
|
17
17
|
const loading = useSessionStore((s) => s.chatLoadingId === id);
|
|
18
18
|
|
|
19
19
|
const showModelTag = extra?.fromModel && model !== extra?.fromModel;
|
|
20
|
-
const
|
|
20
|
+
const showTranslate = !!extra?.translate;
|
|
21
|
+
const showTTS = !!extra?.tts;
|
|
22
|
+
|
|
23
|
+
const showExtra = showModelTag || showTranslate || showTTS;
|
|
24
|
+
|
|
21
25
|
if (!showExtra) return;
|
|
22
26
|
|
|
23
27
|
return (
|
package/tests/setup.ts
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
|
+
/* eslint-disable import/newline-after-import,import/first */
|
|
1
2
|
import '@testing-library/jest-dom';
|
|
2
|
-
// remove antd hash on test
|
|
3
3
|
import { theme } from 'antd';
|
|
4
4
|
// mock indexedDB to test with dexie
|
|
5
5
|
// refs: https://github.com/dumbmatter/fakeIndexedDB#dexie-and-other-indexeddb-api-wrappers
|
|
6
6
|
import 'fake-indexeddb/auto';
|
|
7
|
+
import React from 'react';
|
|
7
8
|
|
|
9
|
+
// remove antd hash on test
|
|
8
10
|
theme.defaultConfig.hashed = false;
|
|
11
|
+
|
|
12
|
+
// 将 React 设置为全局变量，这样就不需要在每个测试文件中导入它了
|
|
13
|
+
global.React = React;
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
import { ActionIcon, ActionIconProps, Icon, Tag } from '@lobehub/ui';
|
|
2
|
-
import { Dropdown, Slider } from 'antd';
|
|
3
|
-
import { Download, PauseCircle, Play, StopCircle } from 'lucide-react';
|
|
4
|
-
import React, { memo, useCallback, useMemo } from 'react';
|
|
5
|
-
import { Flexbox } from 'react-layout-kit';
|
|
6
|
-
|
|
7
|
-
const secondsToMinutesAndSeconds = (num: number) => Math.floor(num);
|
|
8
|
-
export interface AudioProps {
|
|
9
|
-
currentTime: number;
|
|
10
|
-
download: () => void;
|
|
11
|
-
duration: number;
|
|
12
|
-
isPlaying: boolean;
|
|
13
|
-
pause: () => void;
|
|
14
|
-
play: () => void;
|
|
15
|
-
setTime: (time: number) => void;
|
|
16
|
-
stop: () => void;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export interface AudioPlayerProps {
|
|
20
|
-
allowPause?: boolean;
|
|
21
|
-
audio: AudioProps;
|
|
22
|
-
buttonSize?: ActionIconProps['size'];
|
|
23
|
-
className?: string;
|
|
24
|
-
isLoading?: boolean;
|
|
25
|
-
onInitPlay?: () => void;
|
|
26
|
-
onPause?: () => void;
|
|
27
|
-
onPlay?: () => void;
|
|
28
|
-
onStop?: () => void;
|
|
29
|
-
showSlider?: boolean;
|
|
30
|
-
style?: React.CSSProperties;
|
|
31
|
-
timeRender?: 'tag' | 'text';
|
|
32
|
-
timeStyle?: React.CSSProperties;
|
|
33
|
-
timeType?: 'left' | 'current' | 'combine';
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
const AudioPlayer = memo<AudioPlayerProps>(
|
|
37
|
-
({
|
|
38
|
-
isLoading,
|
|
39
|
-
style,
|
|
40
|
-
timeStyle,
|
|
41
|
-
buttonSize,
|
|
42
|
-
className,
|
|
43
|
-
audio,
|
|
44
|
-
allowPause = true,
|
|
45
|
-
timeType = 'left',
|
|
46
|
-
showSlider = true,
|
|
47
|
-
timeRender = 'text',
|
|
48
|
-
onInitPlay,
|
|
49
|
-
onPause,
|
|
50
|
-
onStop,
|
|
51
|
-
onPlay,
|
|
52
|
-
}) => {
|
|
53
|
-
const { isPlaying, play, stop, pause, duration, setTime, currentTime, download } = audio;
|
|
54
|
-
|
|
55
|
-
const formatedLeftTime = secondsToMinutesAndSeconds(duration - currentTime);
|
|
56
|
-
const formatedCurrentTime = secondsToMinutesAndSeconds(currentTime);
|
|
57
|
-
const formatedDuration = secondsToMinutesAndSeconds(duration);
|
|
58
|
-
|
|
59
|
-
const Time = useMemo(
|
|
60
|
-
() => (timeRender === 'tag' ? Tag : (props: any) => <div {...props} />),
|
|
61
|
-
[timeRender],
|
|
62
|
-
);
|
|
63
|
-
|
|
64
|
-
const handlePlay = useCallback(() => {
|
|
65
|
-
if ((!duration || duration === 0) && !isLoading) {
|
|
66
|
-
onInitPlay?.();
|
|
67
|
-
} else {
|
|
68
|
-
play?.();
|
|
69
|
-
onPlay?.();
|
|
70
|
-
}
|
|
71
|
-
}, [play, duration]);
|
|
72
|
-
|
|
73
|
-
const handlePause = useCallback(() => {
|
|
74
|
-
pause?.();
|
|
75
|
-
onPause?.();
|
|
76
|
-
}, [pause]);
|
|
77
|
-
|
|
78
|
-
const handleStop = useCallback(() => {
|
|
79
|
-
stop?.();
|
|
80
|
-
onStop?.();
|
|
81
|
-
}, [stop]);
|
|
82
|
-
|
|
83
|
-
return (
|
|
84
|
-
<Flexbox
|
|
85
|
-
align={'center'}
|
|
86
|
-
className={className}
|
|
87
|
-
gap={8}
|
|
88
|
-
horizontal
|
|
89
|
-
style={{ paddingRight: 8, width: '100%', ...style }}
|
|
90
|
-
>
|
|
91
|
-
<ActionIcon
|
|
92
|
-
icon={isPlaying ? (allowPause ? PauseCircle : StopCircle) : Play}
|
|
93
|
-
loading={isLoading}
|
|
94
|
-
onClick={isPlaying ? (allowPause ? handlePause : handleStop) : handlePlay}
|
|
95
|
-
size={buttonSize || { blockSize: 32, fontSize: 16 }}
|
|
96
|
-
style={{ flex: 'none' }}
|
|
97
|
-
/>
|
|
98
|
-
{showSlider && (
|
|
99
|
-
<Slider
|
|
100
|
-
disabled={duration === 0}
|
|
101
|
-
max={duration}
|
|
102
|
-
min={0}
|
|
103
|
-
onChange={(e) => setTime(e)}
|
|
104
|
-
step={0.01}
|
|
105
|
-
style={{ flex: 1 }}
|
|
106
|
-
tooltip={{ formatter: secondsToMinutesAndSeconds as any }}
|
|
107
|
-
value={currentTime}
|
|
108
|
-
/>
|
|
109
|
-
)}
|
|
110
|
-
<Dropdown
|
|
111
|
-
disabled={duration === 0}
|
|
112
|
-
menu={{
|
|
113
|
-
items: [
|
|
114
|
-
{
|
|
115
|
-
key: 'download',
|
|
116
|
-
label: <Icon icon={Download} size={{ fontSize: 16 }} />,
|
|
117
|
-
onClick: download,
|
|
118
|
-
},
|
|
119
|
-
],
|
|
120
|
-
}}
|
|
121
|
-
placement="top"
|
|
122
|
-
>
|
|
123
|
-
<Time style={{ cursor: 'pointer', flex: 'none', ...timeStyle }}>
|
|
124
|
-
{timeType === 'left' && formatedLeftTime}
|
|
125
|
-
{timeType === 'current' && formatedCurrentTime}
|
|
126
|
-
{timeType === 'combine' && (
|
|
127
|
-
<span>
|
|
128
|
-
{formatedCurrentTime}
|
|
129
|
-
<span style={{ opacity: 0.66 }}>{` / ${formatedDuration}`}</span>
|
|
130
|
-
</span>
|
|
131
|
-
)}
|
|
132
|
-
</Time>
|
|
133
|
-
</Dropdown>
|
|
134
|
-
</Flexbox>
|
|
135
|
-
);
|
|
136
|
-
},
|
|
137
|
-
);
|
|
138
|
-
|
|
139
|
-
export default AudioPlayer;
|