@lobehub/chat 0.120.0 → 0.120.1
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 +24 -26
- package/README.zh-CN.md +24 -26
- package/docs/Deployment/Common-Error.md +18 -1
- package/docs/Deployment/Common-Error.zh-CN.md +18 -0
- package/docs/Deployment/Environment-Variable.md +14 -3
- package/docs/Deployment/Environment-Variable.zh-CN.md +14 -3
- package/docs/Development/Contributing-Guidelines.zh-CN.md +72 -0
- package/docs/Development/Internationalization-Implementation.zh-CN.md +117 -0
- package/docs/Development/State-Management/Selectors.zh-CN.md +49 -0
- package/docs/Development/State-Management/index.zh-CN.md +219 -0
- package/docs/Development/index.zh-CN.md +66 -1
- package/docs/Home.md +3 -3
- package/docs/_Sidebar.md +4 -4
- package/package.json +6 -3
- package/src/features/Conversation/components/ChatItem/index.tsx +12 -1
- package/src/features/Conversation/components/VirtualizedList/index.tsx +4 -1
- package/docs/Development/Data-Store-Selectors.zh-CN.md +0 -68
- /package/docs/{Add-New-Locale.md → Development/Add-New-Locale.md} +0 -0
- /package/docs/{Add-New-Locale.zh-CN.md → Development/Add-New-Locale.zh-CN.md} +0 -0
- /package/docs/Development/{Data-Store-Selectors.md → State-Management/Selectors.md} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,31 @@
|
|
|
2
2
|
|
|
3
3
|
# Changelog
|
|
4
4
|
|
|
5
|
+
### [Version 0.120.1](https://github.com/lobehub/lobe-chat/compare/v0.120.0...v0.120.1)
|
|
6
|
+
|
|
7
|
+
<sup>Released on **2024-01-16**</sup>
|
|
8
|
+
|
|
9
|
+
#### 🐛 Bug Fixes
|
|
10
|
+
|
|
11
|
+
- **misc**: Fix list scrolling white screen on mobile.
|
|
12
|
+
|
|
13
|
+
<br/>
|
|
14
|
+
|
|
15
|
+
<details>
|
|
16
|
+
<summary><kbd>Improvements and Fixes</kbd></summary>
|
|
17
|
+
|
|
18
|
+
#### What's fixed
|
|
19
|
+
|
|
20
|
+
- **misc**: Fix list scrolling white screen on mobile, closes [#1072](https://github.com/lobehub/lobe-chat/issues/1072) ([af10947](https://github.com/lobehub/lobe-chat/commit/af10947))
|
|
21
|
+
|
|
22
|
+
</details>
|
|
23
|
+
|
|
24
|
+
<div align="right">
|
|
25
|
+
|
|
26
|
+
[](#readme-top)
|
|
27
|
+
|
|
28
|
+
</div>
|
|
29
|
+
|
|
5
30
|
## [Version 0.120.0](https://github.com/lobehub/lobe-chat/compare/v0.119.13...v0.120.0)
|
|
6
31
|
|
|
7
32
|
<sup>Released on **2024-01-15**</sup>
|
package/README.md
CHANGED
|
@@ -169,14 +169,14 @@ e-commerce platform data access, and various third-party services.
|
|
|
169
169
|
|
|
170
170
|
<!-- PLUGIN LIST -->
|
|
171
171
|
|
|
172
|
-
| Recent Submits | Description
|
|
173
|
-
| ------------------------------------------------------------------------------------------------------------------ |
|
|
174
|
-
| [
|
|
175
|
-
| [
|
|
176
|
-
| [
|
|
177
|
-
| [
|
|
172
|
+
| Recent Submits | Description |
|
|
173
|
+
| ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
174
|
+
| [TikZJax](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Arvin Xu** on **2024-01-14**</sup> | Convert LaTeX TikZ code into SVG images for crisp, scalable mathematical diagrams and visualizations.<br/>`latex` `svg` `visualization` `diagram` `math` |
|
|
175
|
+
| [weather GPT](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Steven Tey** on **2023-12-16**</sup> | Get current weather information for a specific location.<br/>`weather` |
|
|
176
|
+
| [Ask Your PDF](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **AskYourPDF** on **2023-12-16**</sup> | Unlock the power of your PDFs!, dive into your documents, find answers, and bring information to your fingertips.<br/>`pdf` `document` `web` |
|
|
177
|
+
| [Clock Time](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-11-01**</sup> | Display a clock to show current time<br/>`clock` `time` |
|
|
178
178
|
|
|
179
|
-
> 📊 Total plugins: [<kbd>**
|
|
179
|
+
> 📊 Total plugins: [<kbd>**10**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
|
|
180
180
|
|
|
181
181
|
<!-- PLUGIN LIST -->
|
|
182
182
|
|
|
@@ -208,14 +208,14 @@ Our marketplace is not just a showcase platform but also a collaborative space.
|
|
|
208
208
|
|
|
209
209
|
<!-- AGENT LIST -->
|
|
210
210
|
|
|
211
|
-
| Recent Submits
|
|
212
|
-
|
|
|
213
|
-
| [
|
|
214
|
-
| [
|
|
215
|
-
| [
|
|
216
|
-
| [
|
|
211
|
+
| Recent Submits | Description |
|
|
212
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
213
|
+
| [William](https://chat-preview.lobehub.com/market?agent=unreal-engine-development-engineer)<br/><sup>By **[Wutpeach](https://github.com/Wutpeach)** on **2024-01-16**</sup> | Unreal Engine expert, proficient in C++ programming, rendering, memory, thread and other pipeline architectures, UE application on Android platform, comprehensive artistic cognition, familiar with Shader writing, proficient in 3D art asset production process and tools.<br/>`unreal-engine` `c-programming` `rendering-pipeline` `memory-management` `thread-architecture` |
|
|
214
|
+
| [Chad](https://chat-preview.lobehub.com/market?agent=chad)<br/><sup>By **[HerIsDia](https://github.com/HerIsDia)** on **2024-01-15**</sup> | Just chad<br/>`humor` `funny` |
|
|
215
|
+
| [English Analyst](https://chat-preview.lobehub.com/market?agent=english-teacher)<br/><sup>By **[fmaxyou](https://github.com/fmaxyou)** on **2024-01-11**</sup> | Specializes in explaining and memorization techniques for English words and phrases<br/>`english-teaching` `explanation` `memorization-techniques` |
|
|
216
|
+
| [Life Decision Advisor](https://chat-preview.lobehub.com/market?agent=life-decision-advisor)<br/><sup>By **[amitalokbera](https://github.com/amitalokbera)** on **2024-01-11**</sup> | A Life Decision Advisor is a virtual guide designed to assist users in making informed life decisions<br/>`prompt` |
|
|
217
217
|
|
|
218
|
-
> 📊 Total agents: [<kbd>**
|
|
218
|
+
> 📊 Total agents: [<kbd>**98**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
|
|
219
219
|
|
|
220
220
|
<!-- AGENT LIST -->
|
|
221
221
|
|
|
@@ -395,12 +395,12 @@ $ docker run -d -p 3210:3210 \
|
|
|
395
395
|
|
|
396
396
|
This project provides some additional configuration items set with environment variables:
|
|
397
397
|
|
|
398
|
-
| Environment Variable | Required | Description | Example
|
|
399
|
-
| -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
400
|
-
| `OPENAI_API_KEY` | Yes | This is the API key you apply on the OpenAI account page | `sk-xxxxxx...xxxxxx`
|
|
401
|
-
| `OPENAI_PROXY_URL` | No | If you manually configure the OpenAI interface proxy, you can use this configuration item to override the default OpenAI API request base URL | `https://api.chatanywhere.cn/v1
|
|
402
|
-
| `ACCESS_CODE` | No | Add a password to access this service; you can set a long password to avoid leaking. If this value contains a comma, it is a password array. | `awCTe)re_r74` or `rtrt_ewee3@09!` or `code1,code2,code3`
|
|
403
|
-
| `CUSTOM_MODELS` | No | Used to control the model list. Use `+` to add a model, `-` to hide a model, and `model_name=display_name` to customize the display name of a model, separated by commas. | `qwen-7b-chat,+glm-6b,-gpt-3.5-turbo`
|
|
398
|
+
| Environment Variable | Required | Description | Example |
|
|
399
|
+
| -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
|
|
400
|
+
| `OPENAI_API_KEY` | Yes | This is the API key you apply on the OpenAI account page | `sk-xxxxxx...xxxxxx` |
|
|
401
|
+
| `OPENAI_PROXY_URL` | No | If you manually configure the OpenAI interface proxy, you can use this configuration item to override the default OpenAI API request base URL | `https://api.chatanywhere.cn` or `https://aihubmix.com/v1` <br/>The default value is<br/>`https://api.openai.com/v1` |
|
|
402
|
+
| `ACCESS_CODE` | No | Add a password to access this service; you can set a long password to avoid leaking. If this value contains a comma, it is a password array. | `awCTe)re_r74` or `rtrt_ewee3@09!` or `code1,code2,code3` |
|
|
403
|
+
| `CUSTOM_MODELS` | No | Used to control the model list. Use `+` to add a model, `-` to hide a model, and `model_name=display_name` to customize the display name of a model, separated by commas. | `qwen-7b-chat,+glm-6b,-gpt-3.5-turbo` |
|
|
404
404
|
|
|
405
405
|
> \[!NOTE]
|
|
406
406
|
>
|
|
@@ -458,15 +458,15 @@ You can use GitHub Codespaces for online development:
|
|
|
458
458
|
|
|
459
459
|
Or clone it for local development:
|
|
460
460
|
|
|
461
|
-
[![][bun-shield]][bun-link]
|
|
462
|
-
|
|
463
461
|
```fish
|
|
464
462
|
$ git clone https://github.com/lobehub/lobe-chat.git
|
|
465
463
|
$ cd lobe-chat
|
|
466
|
-
$
|
|
467
|
-
$
|
|
464
|
+
$ pnpm install
|
|
465
|
+
$ pnpm dev
|
|
468
466
|
```
|
|
469
467
|
|
|
468
|
+
If you would like to learn more details, please feel free to look at our [LobeChat Development Guide](https://github.com/lobehub/lobe-chat/wiki/index)
|
|
469
|
+
|
|
470
470
|
<div align="right">
|
|
471
471
|
|
|
472
472
|
[![][back-to-top]](#readme-top)
|
|
@@ -562,8 +562,6 @@ This project is [MIT](./LICENSE) licensed.
|
|
|
562
562
|
<!-- LINK GROUP -->
|
|
563
563
|
|
|
564
564
|
[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
|
|
565
|
-
[bun-link]: https://bun.sh
|
|
566
|
-
[bun-shield]: https://img.shields.io/badge/-speedup%20with%20bun-black?logo=bun&style=for-the-badge
|
|
567
565
|
[chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
|
|
568
566
|
[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
|
|
569
567
|
[chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
|
package/README.zh-CN.md
CHANGED
|
@@ -150,14 +150,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
|
|
|
150
150
|
|
|
151
151
|
<!-- PLUGIN LIST -->
|
|
152
152
|
|
|
153
|
-
| 最近新增 | 插件描述
|
|
154
|
-
| --------------------------------------------------------------------------------------------------------------- |
|
|
155
|
-
| [
|
|
156
|
-
| [
|
|
157
|
-
| [
|
|
158
|
-
| [
|
|
153
|
+
| 最近新增 | 插件描述 |
|
|
154
|
+
| --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
155
|
+
| [TikZJax](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Arvin Xu** on **2024-01-14**</sup> | 将 LaTeX TikZ 代码转换为 SVG 图像，用于创建清晰、可缩放的数学图表和可视化效果。<br/>`latex` `svg` `可视化` `图表` `数学` |
|
|
156
|
+
| [天气 GPT](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Steven Tey** on **2023-12-16**</sup> | 获取特定位置的当前天气信息。<br/>`天气` |
|
|
157
|
+
| [AskYouPDF](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **AskYourPDF** on **2023-12-16**</sup> | 释放您的 PDF 的力量！深入您的文档，找到答案，并将信息带到您的指尖。<br/>`pdf` `文档` `web` |
|
|
158
|
+
| [时钟时间](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2023-11-01**</sup> | 显示一个时钟来展示当前时间<br/>`时钟` `时间` |
|
|
159
159
|
|
|
160
|
-
> 📊 Total plugins: [<kbd>**
|
|
160
|
+
> 📊 Total plugins: [<kbd>**10**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
|
|
161
161
|
|
|
162
162
|
<!-- PLUGIN LIST -->
|
|
163
163
|
|
|
@@ -185,14 +185,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
|
|
|
185
185
|
|
|
186
186
|
<!-- AGENT LIST -->
|
|
187
187
|
|
|
188
|
-
| 最近新增 | 助手说明
|
|
189
|
-
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
190
|
-
| [
|
|
191
|
-
| [
|
|
192
|
-
| [
|
|
193
|
-
| [
|
|
188
|
+
| 最近新增 | 助手说明 |
|
|
189
|
+
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
190
|
+
| [William](https://chat-preview.lobehub.com/market?agent=unreal-engine-development-engineer)<br/><sup>By **[Wutpeach](https://github.com/Wutpeach)** on **2024-01-16**</sup> | 虚幻引擎专家，精通 C++ 编程，渲染、内存、线程等管线架构，UE 在安卓平台应用，全面的美术认知，熟悉 Shader 编写，熟练掌握 3D 美术资产制作流程与工具。<br/>`虚幻引擎` `c-编程` `渲染管线` `内存管理` `线程架构` |
|
|
191
|
+
| [乍得](https://chat-preview.lobehub.com/market?agent=chad)<br/><sup>By **[HerIsDia](https://github.com/HerIsDia)** on **2024-01-15**</sup> | 只是乍得<br/>`幽默` `搞笑` |
|
|
192
|
+
| [英语解析师](https://chat-preview.lobehub.com/market?agent=english-teacher)<br/><sup>By **[fmaxyou](https://github.com/fmaxyou)** on **2024-01-11**</sup> | 擅长英语单词和短语解释与记忆技巧<br/>`英语教学` `解释` `记忆技巧` |
|
|
193
|
+
| [生活决策顾问](https://chat-preview.lobehub.com/market?agent=life-decision-advisor)<br/><sup>By **[amitalokbera](https://github.com/amitalokbera)** on **2024-01-11**</sup> | 生活决策顾问是一个虚拟指南，旨在帮助用户做出明智的生活决策<br/>`提示` |
|
|
194
194
|
|
|
195
|
-
> 📊 Total agents: [<kbd>**
|
|
195
|
+
> 📊 Total agents: [<kbd>**98**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
|
|
196
196
|
|
|
197
197
|
<!-- AGENT LIST -->
|
|
198
198
|
|
|
@@ -367,12 +367,12 @@ $ docker run -d -p 3210:3210 \
|
|
|
367
367
|
|
|
368
368
|
本项目提供了一些额外的配置项，使用环境变量进行设置：
|
|
369
369
|
|
|
370
|
-
| 环境变量 | 类型 | 描述 | 示例
|
|
371
|
-
| ------------------ | ---- | ----------------------------------------------------------------------------------------------------------------------------- |
|
|
372
|
-
| `OPENAI_API_KEY` | 必选 | 这是你在 OpenAI 账户页面申请的 API 密钥 | `sk-xxxxxx...xxxxxx`
|
|
373
|
-
| `OPENAI_PROXY_URL` | 可选 | 如果你手动配置了 OpenAI 接口代理，可以使用此配置项来覆盖默认的 OpenAI API 请求基础 URL | `https://api.chatanywhere.cn/v1`<br/>默认值:<br/>`https://api.openai.com/v1` |
|
|
374
|
-
| `ACCESS_CODE` | 可选 | 添加访问此服务的密码，你可以设置一个长密码以防被爆破，该值用逗号分隔时为密码数组 | `awCTe)re_r74` or `rtrt_ewee3@09!` or `code1,code2,code3`
|
|
375
|
-
| `CUSTOM_MODELS` | 可选 | 用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。 | `qwen-7b-chat,+glm-6b,-gpt-3.5-turbo`
|
|
370
|
+
| 环境变量 | 类型 | 描述 | 示例 |
|
|
371
|
+
| ------------------ | ---- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
|
|
372
|
+
| `OPENAI_API_KEY` | 必选 | 这是你在 OpenAI 账户页面申请的 API 密钥 | `sk-xxxxxx...xxxxxx` |
|
|
373
|
+
| `OPENAI_PROXY_URL` | 可选 | 如果你手动配置了 OpenAI 接口代理，可以使用此配置项来覆盖默认的 OpenAI API 请求基础 URL | `https://api.chatanywhere.cn` 或 `https://aihubmix.com/v1`<br/>默认值:<br/>`https://api.openai.com/v1` |
|
|
374
|
+
| `ACCESS_CODE` | 可选 | 添加访问此服务的密码，你可以设置一个长密码以防被爆破，该值用逗号分隔时为密码数组 | `awCTe)re_r74` or `rtrt_ewee3@09!` or `code1,code2,code3` |
|
|
375
|
+
| `CUSTOM_MODELS` | 可选 | 用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。 | `qwen-7b-chat,+glm-6b,-gpt-3.5-turbo` |
|
|
376
376
|
|
|
377
377
|
> \[!NOTE]
|
|
378
378
|
>
|
|
@@ -472,15 +472,15 @@ API Key 是使用 LobeChat 进行大语言模型会话的必要信息，本节
|
|
|
472
472
|
|
|
473
473
|
或者使用以下命令进行本地开发：
|
|
474
474
|
|
|
475
|
-
[![][bun-shield]][bun-link]
|
|
476
|
-
|
|
477
475
|
```fish
|
|
478
476
|
$ git clone https://github.com/lobehub/lobe-chat.git
|
|
479
477
|
$ cd lobe-chat
|
|
480
|
-
$
|
|
481
|
-
$
|
|
478
|
+
$ pnpm install
|
|
479
|
+
$ pnpm run dev
|
|
482
480
|
```
|
|
483
481
|
|
|
482
|
+
如果你希望了解更多详情，欢迎可以查阅我们的 [LobeChat 开发指南](https://github.com/lobehub/lobe-chat/wiki/index.zh-CN)
|
|
483
|
+
|
|
484
484
|
<div align="right">
|
|
485
485
|
|
|
486
486
|
[![][back-to-top]](#readme-top)
|
|
@@ -576,8 +576,6 @@ This project is [MIT](./LICENSE) licensed.
|
|
|
576
576
|
<!-- LINK GROUP -->
|
|
577
577
|
|
|
578
578
|
[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
|
|
579
|
-
[bun-link]: https://bun.sh
|
|
580
|
-
[bun-shield]: https://img.shields.io/badge/-speedup%20with%20bun-black?logo=bun&style=for-the-badge
|
|
581
579
|
[chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
|
|
582
580
|
[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
|
|
583
581
|
[chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
|
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# Frequently Asked Questions
|
|
2
2
|
|
|
3
|
+
## Configuring the `OPENAI_PROXY_URL` Environment Variable but Receiving an Empty Response
|
|
4
|
+
|
|
5
|
+
### Problem Description
|
|
6
|
+
|
|
7
|
+
After configuring the `OPENAI_PROXY_URL` environment variable, you may encounter a situation where the response from the AI is empty. This could be due to an incorrect configuration of the `OPENAI_PROXY_URL`.
|
|
8
|
+
|
|
9
|
+
### Solution
|
|
10
|
+
|
|
11
|
+
Recheck and confirm if the `OPENAI_PROXY_URL` is set correctly, including the correct addition of the `/v1` suffix (if required).
|
|
12
|
+
|
|
13
|
+
### Related Discussion Links
|
|
14
|
+
|
|
15
|
+
- [Why is the response blank after installing and configuring Docker and environment variables?](https://github.com/lobehub/lobe-chat/discussions/623)
|
|
16
|
+
- [Reasons for errors when using third-party APIs](https://github.com/lobehub/lobe-chat/discussions/734)
|
|
17
|
+
- [No response from the chat when the proxy server address is filled](https://github.com/lobehub/lobe-chat/discussions/1065)
|
|
18
|
+
|
|
19
|
+
If the issue persists, it is recommended to raise the problem in the community with relevant logs and configuration information for other developers or maintainers to provide assistance.
|
|
20
|
+
|
|
3
21
|
## When using a proxy(e.g. Surge), I encounter the `UNABLE_TO_VERIFY_LEAF_SIGNATURE` error
|
|
4
22
|
|
|
5
23
|
### Problem Description
|
|
@@ -67,4 +85,3 @@ If possible, it is recommended to address certificate issues using the following
|
|
|
67
85
|
3. Properly configure the certificate chain in the code to ensure that Node.js can validate to the root certificate.
|
|
68
86
|
|
|
69
87
|
Implementing these methods can resolve certificate validation issues without sacrificing security.
|
|
70
|
-
|
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# 常见问题
|
|
2
2
|
|
|
3
|
+
## 配置 `OPENAI_PROXY_URL` 环境变量但返回值为空
|
|
4
|
+
|
|
5
|
+
### 问题描述
|
|
6
|
+
|
|
7
|
+
配置 `OPENAI_PROXY_URL` 环境变量后，可能会遇到 AI 的返回消息为空的情况。这可能是由于 `OPENAI_PROXY_URL` 配置不正确导致。
|
|
8
|
+
|
|
9
|
+
### 解决方案
|
|
10
|
+
|
|
11
|
+
重新检查并确认 `OPENAI_PROXY_URL` 是否设置正确，包括是否正确地添加了 `/v1` 后缀（如果需要）。
|
|
12
|
+
|
|
13
|
+
### 相关讨论链接
|
|
14
|
+
|
|
15
|
+
- [Docker 安装，配置好环境变量后，为何返回值是空白？](https://github.com/lobehub/lobe-chat/discussions/623)
|
|
16
|
+
- [使用第三方接口报错的原因](https://github.com/lobehub/lobe-chat/discussions/734)
|
|
17
|
+
- [代理服务器地址填了聊天没任何反应](https://github.com/lobehub/lobe-chat/discussions/1065)
|
|
18
|
+
|
|
19
|
+
如果问题依旧无法解决，建议在社区中提出问题，附上相关日志和配置信息，以便其他开发者或维护者提供帮助。
|
|
20
|
+
|
|
3
21
|
## 使用代理中转请求时（例如：Surge），报 `UNABLE_TO_VERIFY_LEAF_SIGNATURE` 错误
|
|
4
22
|
|
|
5
23
|
### 问题描述
|
|
@@ -54,10 +54,21 @@ The above example adds `qwen-7b-chat` and `glm-6b` to the model list, removes `g
|
|
|
54
54
|
|
|
55
55
|
- Type: Optional
|
|
56
56
|
- Description: If you manually configure the OpenAI interface proxy, you can use this configuration item to override the default OpenAI API request base URL
|
|
57
|
-
- Default: `https://api.openai.com`
|
|
58
|
-
- Example: `https://api.chatanywhere.cn`
|
|
57
|
+
- Default: `https://api.openai.com/v1`
|
|
58
|
+
- Example: `https://api.chatanywhere.cn` or `https://aihubmix.com/v1`
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
> !\[NOTE]
|
|
61
|
+
>
|
|
62
|
+
> Please check the request suffix of your proxy service provider. Some proxy service providers may add `/v1` to the request suffix, while others may not.
|
|
63
|
+
> If you find that the AI returns an empty message during testing, try adding the `/v1` suffix and retrying.
|
|
64
|
+
|
|
65
|
+
Whether to fill in `/v1` is closely related to the model service provider. For example, the default address of OpenAI is `api.openai.com/v1`. If your proxy forwards this interface, you can directly fill in `proxy.com`. However, if the model service provider directly forwards the `api.openai.com` domain, you need to add the `/v1` URL by yourself.
|
|
66
|
+
|
|
67
|
+
Related discussions:
|
|
68
|
+
|
|
69
|
+
- [Why is the return value blank after installing Docker, configuring the environment variables?](https://github.com/lobehub/lobe-chat/discussions/623)
|
|
70
|
+
- [Reasons for errors when using third-party interfaces](https://github.com/lobehub/lobe-chat/discussions/734)
|
|
71
|
+
- [No response when filling in the proxy server address for chatting](https://github.com/lobehub/lobe-chat/discussions/1065)
|
|
61
72
|
|
|
62
73
|
## Azure OpenAI
|
|
63
74
|
|
|
@@ -54,10 +54,21 @@ LobeChat 在部署时提供了一些额外的配置项，使用环境变量进
|
|
|
54
54
|
|
|
55
55
|
- 类型：可选
|
|
56
56
|
- 描述：如果你手动配置了 OpenAI 接口代理，可以使用此配置项来覆盖默认的 OpenAI API 请求基础 URL
|
|
57
|
-
- 默认值：`https://api.openai.com`
|
|
58
|
-
- 示例：`https://api.chatanywhere.cn`
|
|
57
|
+
- 默认值：`https://api.openai.com/v1`
|
|
58
|
+
- 示例：`https://api.chatanywhere.cn` 或 `https://aihubmix.com/v1`
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
> !\[NOTE] 注意事项：
|
|
61
|
+
>
|
|
62
|
+
> 请检查你的代理服务商的请求后缀，有的代理服务商会在请求后缀添加 `/v1`，有的则不会。
|
|
63
|
+
> 如果你在测试时发现 AI 返回的消息为空，请尝试添加 `/v1` 后缀后重试。
|
|
64
|
+
|
|
65
|
+
是否填写 `/v1` 跟模型服务商有很大关系，比如 openai 的默认地址是 `api.openai.com/v1` 。如果你的代理上是转发了 `/v1` 这个接口，那么直接填 `proxy.com` 即可。 但如果模型服务商是直接转发了 `api.openai.com` 域名，那么你就要自己加上 `/v1` 这个 url。
|
|
66
|
+
|
|
67
|
+
相关讨论：
|
|
68
|
+
|
|
69
|
+
- [Docker 安装，配置好环境变量后，为何返回值是空白？](https://github.com/lobehub/lobe-chat/discussions/623)
|
|
70
|
+
- [使用第三方接口报错的原因](https://github.com/lobehub/lobe-chat/discussions/734)
|
|
71
|
+
- [代理服务器地址填了聊天没任何反应](https://github.com/lobehub/lobe-chat/discussions/1065)
|
|
61
72
|
|
|
62
73
|
## Azure OpenAI
|
|
63
74
|
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# 代码风格与贡献指南
|
|
2
|
+
|
|
3
|
+
欢迎来到 LobeChat 的代码风格与贡献指南。本指南将帮助您理解我们的代码规范和贡献流程，确保代码的一致性和项目的顺利进行。
|
|
4
|
+
|
|
5
|
+
## 代码风格
|
|
6
|
+
|
|
7
|
+
在 LobeChat 中，我们使用 `@lobehub/lint` 程序包来统一代码风格。该程序包内置了 `ESLint`、`Prettier`、`remarklint` 和 `stylelint` 的配置，以确保我们的 JavaScript、Markdown 和 CSS 文件遵循相同的编码标准。
|
|
8
|
+
|
|
9
|
+
### ESLint
|
|
10
|
+
|
|
11
|
+
我们的项目使用 ESLint 来检查 JavaScript 代码中的问题。您可以在项目根目录下找到 `.eslintrc.js` 文件，其中包含了我们对 `@lobehub/lint` 的 ESLint 配置的扩展和自定义规则。
|
|
12
|
+
|
|
13
|
+
为了与 Next.js 框架兼容，我们在配置中添加了 `plugin:@next/next/recommended`。此外，我们禁用了一些规则，以适应我们项目的特定需求。
|
|
14
|
+
|
|
15
|
+
请在提交代码前运行 ESLint，以确保您的代码符合项目规范。
|
|
16
|
+
|
|
17
|
+
### Prettier
|
|
18
|
+
|
|
19
|
+
Prettier 负责代码格式化，以保证代码的一致性。您可以在 `.prettierrc.js` 中找到我们的 Prettier 配置，它是从 `@lobehub/lint` 导入的。
|
|
20
|
+
|
|
21
|
+
在保存文件时，建议您配置您的编辑器以自动运行 Prettier，或者在提交前手动运行它。
|
|
22
|
+
|
|
23
|
+
### remarklint
|
|
24
|
+
|
|
25
|
+
对于 Markdown 文件，我们使用 remarklint 来确保文档格式的统一。您可以在项目中找到相应的配置文件。
|
|
26
|
+
|
|
27
|
+
### stylelint
|
|
28
|
+
|
|
29
|
+
我们使用 stylelint 来规范 CSS 代码的风格。在 `stylelint` 的配置文件中，我们基于 `@lobehub/lint` 的配置进行了一些自定义规则的调整。
|
|
30
|
+
|
|
31
|
+
确保您的样式代码在提交前通过了 stylelint 的检查。
|
|
32
|
+
|
|
33
|
+
## 贡献流程
|
|
34
|
+
|
|
35
|
+
LobeChat 采用 gitmoji 和 semantic release 作为我们的代码提交和发布流程。
|
|
36
|
+
|
|
37
|
+
### Gitmoji
|
|
38
|
+
|
|
39
|
+
在提交代码时，请使用 gitmoji 来标注您的提交信息。这有助于其他贡献者快速理解您提交的内容和目的。
|
|
40
|
+
|
|
41
|
+
Gitmoji commit messages 使用特定的 emoji 来表示提交的类型或意图。以下是一个示例：
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
📝 Update README with contribution guidelines
|
|
45
|
+
|
|
46
|
+
- Added section about code style preferences
|
|
47
|
+
- Included instructions for running tests
|
|
48
|
+
- Corrected typos and improved formatting
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
在这个示例中，📝 emoji 代表了文档的更新。提交信息清晰地描述了更改的内容，提供了具体的细节。
|
|
52
|
+
|
|
53
|
+
### Semantic Release
|
|
54
|
+
|
|
55
|
+
我们使用 semantic release 来自动化版本控制和发布流程。请确保您的提交信息遵循 semantic release 的规范，这样当代码合并到主分支后，系统就可以自动创建新的版本并发布。
|
|
56
|
+
|
|
57
|
+
### Commitlint
|
|
58
|
+
|
|
59
|
+
为了确保提交信息的一致性，我们使用 `commitlint` 来检查提交信息格式。您可以在 `.commitlintrc.js` 配置文件中找到相关规则。
|
|
60
|
+
|
|
61
|
+
在您提交代码之前，请确保您的提交信息遵循我们的规范。
|
|
62
|
+
|
|
63
|
+
### 如何贡献
|
|
64
|
+
|
|
65
|
+
1. Fork 项目到您的账户。
|
|
66
|
+
2. 创建一个新的分支进行开发。
|
|
67
|
+
3. 开发完成后，确保您的代码通过了上述的代码风格检查。
|
|
68
|
+
4. 提交您的更改，并使用合适的 gitmoji 标注您的提交信息。
|
|
69
|
+
5. 创建一个 Pull Request 到原项目的主分支。
|
|
70
|
+
6. 等待代码审查，并根据反馈进行必要的修改。
|
|
71
|
+
|
|
72
|
+
感谢您遵循这些指导原则，它们有助于我们维护项目的质量和一致性。我们期待您的贡献！
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# LobeChat 国际化实现指南
|
|
2
|
+
|
|
3
|
+
欢迎阅读 LobeChat 国际化实现指南。本文档将指导你了解 LobeChat 的国际化机制，包括文件结构、如何添加新语种。LobeChat 采用 `i18next` 和 `lobe-i18n` 作为国际化解决方案，旨在为用户提供流畅的多语言支持。
|
|
4
|
+
|
|
5
|
+
## 国际化概述
|
|
6
|
+
|
|
7
|
+
国际化（Internationalization，简称为 i18n）是一个让应用能够适应不同语言和地区的过程。在 LobeChat 中，我们支持多种语言，并通过 `i18next` 库来实现语言的动态切换和内容的本地化。我们的目标是让 LobeChat 能够为全球用户提供本地化的体验。
|
|
8
|
+
|
|
9
|
+
## 文件结构
|
|
10
|
+
|
|
11
|
+
在 LobeChat 的项目中，国际化相关的文件被组织如下：
|
|
12
|
+
|
|
13
|
+
- `src/locales/default`: 包含默认开发语言（中文）的翻译文件，我们作为中文。
|
|
14
|
+
- `locales`: 包含所有支持的语言文件夹，每个语言文件夹中包含相应语言的翻译文件，这些翻译文件通过 lobe-i18n 自动生成。
|
|
15
|
+
|
|
16
|
+
在 `src/locales` 这个目录结构中，`default` 文件夹包含了原始的翻译文件（中文），其他每个语言文件夹则包含了相应语言的 JSON 翻译文件。每个语言文件夹中的文件对应 `default` 文件夹中的 TypeScript 文件，确保了各语种之间的翻译文件结构一致性。
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
src/locales
|
|
20
|
+
├── create.ts
|
|
21
|
+
├── default
|
|
22
|
+
│ ├── chat.ts
|
|
23
|
+
│ ├── common.ts
|
|
24
|
+
│ ├── error.ts
|
|
25
|
+
│ ├── index.ts
|
|
26
|
+
│ ├── market.ts
|
|
27
|
+
│ ├── migration.ts
|
|
28
|
+
│ ├── plugin.ts
|
|
29
|
+
│ ├── setting.ts
|
|
30
|
+
│ ├── tool.ts
|
|
31
|
+
│ └── welcome.ts
|
|
32
|
+
└── resources.ts
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
通过 lobe-i18n 自动生成的文件结构如下：
|
|
36
|
+
|
|
37
|
+
```
|
|
38
|
+
locales
|
|
39
|
+
├── ar
|
|
40
|
+
│ ├── chat.json
|
|
41
|
+
│ ├── common.json
|
|
42
|
+
│ ├── error.json
|
|
43
|
+
│ └── ... (其他翻译文件)
|
|
44
|
+
├── de-DE
|
|
45
|
+
│ ├── chat.json
|
|
46
|
+
│ ├── common.json
|
|
47
|
+
│ ├── error.json
|
|
48
|
+
│ └── ... (其他翻译文件)
|
|
49
|
+
├── en-US
|
|
50
|
+
├── ... (其他语种目录）
|
|
51
|
+
├── zh-CN
|
|
52
|
+
└── zh-TW
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## 核心实现逻辑
|
|
56
|
+
|
|
57
|
+
LobeChat 的国际化核心实现逻辑如下：
|
|
58
|
+
|
|
59
|
+
- 使用 `i18next` 库进行初始化和配置。
|
|
60
|
+
- 使用 `i18next-browser-languagedetector` 自动检测用户的语言偏好。
|
|
61
|
+
- 使用 `i18next-resources-to-backend` 动态加载翻译资源。
|
|
62
|
+
- 根据用户的语言偏好，设置 HTML 文档的方向（LTR 或 RTL）。
|
|
63
|
+
|
|
64
|
+
以下是一个简化的伪代码示例，用以说明 LobeChat 国际化的核心实现逻辑：
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
import i18n from 'i18next';
|
|
68
|
+
import LanguageDetector from 'i18next-browser-languagedetector';
|
|
69
|
+
import resourcesToBackend from 'i18next-resources-to-backend';
|
|
70
|
+
import { isRtlLang } from 'rtl-detect';
|
|
71
|
+
|
|
72
|
+
// 创建 i18n 实例并配置
|
|
73
|
+
const createI18nInstance = (lang) => {
|
|
74
|
+
const i18nInstance = i18n
|
|
75
|
+
.use(LanguageDetector) // 使用语言检测
|
|
76
|
+
.use(
|
|
77
|
+
resourcesToBackend((language, namespace) => {
|
|
78
|
+
// 动态加载对应语言的翻译资源
|
|
79
|
+
return import(`path/to/locales/${language}/${namespace}.json`);
|
|
80
|
+
}),
|
|
81
|
+
);
|
|
82
|
+
|
|
83
|
+
// 监听语言变化事件，动态设置文档方向
|
|
84
|
+
i18nInstance.on('languageChanged', (language) => {
|
|
85
|
+
const direction = isRtlLang(language) ? 'rtl' : 'ltr';
|
|
86
|
+
document.documentElement.dir = direction; // 设置 HTML 文档方向
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
// 初始化 i18n 实例
|
|
90
|
+
i18nInstance.init({
|
|
91
|
+
// 相关配置
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
return i18nInstance;
|
|
95
|
+
};
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
在这个示例中，我们展示了如何使用 `i18next` 和相关插件来初始化国际化设置。我们动态导入了翻译资源，并响应语言变化事件来调整页面的文本方向。这个过程为 LobeChat 提供了灵活的多语言支持能力。
|
|
99
|
+
|
|
100
|
+
## 添加新的语言支持
|
|
101
|
+
|
|
102
|
+
我们通过以下工作，已经支持了全球多种语言：
|
|
103
|
+
|
|
104
|
+
- [✨ feat: adding Arabic Language Support #1049](https://github.com/lobehub/lobe-chat/pull/1049)
|
|
105
|
+
- [🌐 style: Add Vietnamese files and add the vi-VN option in the General Settings #860](https://github.com/lobehub/lobe-chat/pull/860)
|
|
106
|
+
- [🌐 style: support it-IT nl-NL and pl-PL locales #759](https://github.com/lobehub/lobe-chat/pull/759)
|
|
107
|
+
- [🌐 feat(locale): Add fr-FR (#637) #645](https://github.com/lobehub/lobe-chat/pull/645)
|
|
108
|
+
- [🌐 Add russian localy #137](https://github.com/lobehub/lobe-chat/pull/137)
|
|
109
|
+
|
|
110
|
+
要添加新的语种支持， 详细步骤请参考：[新语种添加指南](Add-New-Locale.zh-CN)。
|
|
111
|
+
|
|
112
|
+
## 资源和进一步阅读
|
|
113
|
+
|
|
114
|
+
- [i18next 官方文档](https://www.i18next.com/)
|
|
115
|
+
- [lobe-i18n 工具说明](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n)
|
|
116
|
+
|
|
117
|
+
通过遵循本指南，你可以更好地理解和参与到 LobeChat 的国际化工作中，为全球用户提供无缝的多语言体验。
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# 数据存储取数模块
|
|
2
|
+
|
|
3
|
+
selectors 是 LobeChat 数据流研发框架下的取数模块，它的作用是从 store 中以特定特务逻辑取出数据，供组件消费使用。
|
|
4
|
+
|
|
5
|
+
以 `src/store/tool/slices/plugin/selectors.ts` 为例：
|
|
6
|
+
|
|
7
|
+
这个 TypeScript 代码段定义了一个名为 `pluginSelectors` 的对象，该对象包含一系列用于从插件存储状态中检索数据的选择器函数。选择器是一种从 zustand 中提取和派生数据的函数。这个特定的例子是为了管理与前端应用程序的插件系统相关的状态。
|
|
8
|
+
|
|
9
|
+
下面是一些关键点的说明：
|
|
10
|
+
|
|
11
|
+
- `getCustomPluginById`: 根据插件 ID 返回自定义插件信息。
|
|
12
|
+
- `getInstalledPluginById`: 根据插件 ID 返回已安装插件的信息。
|
|
13
|
+
- `getPluginManifestById`: 根据插件 ID 返回插件清单。
|
|
14
|
+
- `getPluginMetaById`: 根据插件 ID 返回插件元数据。
|
|
15
|
+
- `getPluginSettingsById`: 根据插件 ID 返回插件设置。
|
|
16
|
+
- `installedCustomPluginMetaList`: 返回所有已安装的自定义插件的元数据列表。
|
|
17
|
+
- `installedPluginManifestList`: 返回所有已安装插件的清单列表。
|
|
18
|
+
- `installedPluginMetaList`: 返回所有已安装插件的元数据列表。
|
|
19
|
+
- `installedPlugins`: 返回所有已安装插件的列表。
|
|
20
|
+
- `isPluginHasUI`: 根据插件 ID 确定插件是否有 UI 组件。
|
|
21
|
+
- `isPluginInstalled`: 根据插件 ID 检查插件是否已安装。
|
|
22
|
+
- `storeAndInstallPluginsIdList`: 返回 store 中和已安装插件的所有 ID 列表。
|
|
23
|
+
|
|
24
|
+
选择器通过将复杂的状态选择逻辑封装在单独的函数中，使得在应用程序的其他部分调用状态数据时，代码更加简洁和直观。此外，由于使用了 TypeScript，每个函数都可以具有明确的输入和输出类型，这有助于提高代码的可靠性和开发效率。
|
|
25
|
+
|
|
26
|
+
在组件中，只需引入相应的选择器即可直接获取最终消费的数据：
|
|
27
|
+
|
|
28
|
+
```tsx | pure
|
|
29
|
+
import { useToolStore } from '@/store/tool';
|
|
30
|
+
import { pluginSelectors } from '@/store/tool/selectors';
|
|
31
|
+
|
|
32
|
+
const Render = () => {
|
|
33
|
+
const list = useToolStore(pluginSelectors.installedPluginMetaList);
|
|
34
|
+
|
|
35
|
+
return <> ... </>;
|
|
36
|
+
};
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
这样实现的好处在于：
|
|
40
|
+
|
|
41
|
+
1. **解耦和重用**：通过将选择器独立于组件，我们可以在多个组件之间复用这些选择器而不需要重写取数逻辑。这减少了重复代码，提高了开发效率，并且使得代码库更加干净和易于维护。
|
|
42
|
+
2. **性能优化**：选择器可以用来计算派生数据，这样可以避免在每个组件中重复计算相同的数据。当状态发生变化时，只有依赖于这部分状态的选择器才会重新计算，从而减少不必要的渲染和计算。
|
|
43
|
+
3. **易于测试**：选择器是纯函数，它们仅依赖于传入的参数。这意味着它们可以在隔离的环境中进行测试，无需模拟整个 store 或组件树。
|
|
44
|
+
4. **类型安全**：由于 LobeChat 使用 TypeScript，每个选择器都有明确的输入和输出类型定义。这为开发者提供了自动完成和编译时检查的优势，减少了运行时错误。
|
|
45
|
+
5. **可维护性**：选择器集中了状态的读取逻辑，使得跟踪状态的变化和管理更加直观。如果状态结构发生变化，我们只需要更新相应的选择器，而不是搜索和替换整个代码库中的多个位置。
|
|
46
|
+
6. **可组合性**：选择器可以组合其他选择器，以创建更复杂的选择逻辑。这种模式允许开发者构建一个选择器层次结构，使得状态选择更加灵活和强大。
|
|
47
|
+
7. **简化组件逻辑**：组件不需要知道状态的结构或如何获取和计算需要的数据。组件只需调用选择器即可获取渲染所需的数据，这使得组件逻辑变得更简单和清晰。
|
|
48
|
+
|
|
49
|
+
通过这样的设计，LobeChat 的开发者可以更专注于构建用户界面和业务逻辑，而不必担心数据的获取和处理细节。这种模式也为未来可能的状态结构变更提供了更好的适应性和扩展性。
|
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
# 状态管理最佳实践
|
|
2
|
+
|
|
3
|
+
LobeChat 不同于传统 CRUD 的网页，存在大量的富交互能力，如何设计一个易于开发与易于维护的数据流架构非常重要。本篇文档将介绍 LobeChat 中的数据流管理最佳实践。
|
|
4
|
+
|
|
5
|
+
## 概念要素
|
|
6
|
+
|
|
7
|
+
| 概念名词 | 解释 |
|
|
8
|
+
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
9
|
+
| store | 状态库 (store)，包含存储应用的状态、动作。允许在应用渲染中访问和修改状态。 |
|
|
10
|
+
| state | 状态 (state) 是指应用程序的数据，存储了应用程序的当前状态，状态的变化**一定会触发应用的重新渲染**，以反映新的状态。 |
|
|
11
|
+
| action | 动作 (action) 是一个操作函数，它描述了应用程序中发生的交互事件。动作通常是由用户交互、网络请求或定时器等触发。 action 可以是**同步**的，也可以是**异步**的。 |
|
|
12
|
+
| reducer | 归约器 (reducer) 是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。它用于根据动作类型来更新应用程序的状态。Reducer 是一个纯函数，不存在副作用，因此一定是 **同步** 函数。 |
|
|
13
|
+
| selector | 选择器 (selector) 是一个函数，用于从应用程序的状态中获取特定的数据。它接收应用程序的状态作为参数，并返回经过计算或转换后的数据。Selector 可以将状态的一部分或多个状态组合起来，以生成派生的数据。Selector 通常用于将应用程序的状态映射到组件的 props，以供组件使用。 |
|
|
14
|
+
| slice | 切片 (slice) 是一个概念，用于表达数据模型状态的一部分。它指定了一个状态切片（slice），以及与该切片相关的 state、action、reducer 和 selector。使用 Slice 可以将大型的 Store 拆分为更小的、可维护的子类型。 |
|
|
15
|
+
|
|
16
|
+
## 结构分层
|
|
17
|
+
|
|
18
|
+
在不同的复杂度下，我们可以将 Store 的结构组织可以由很大的不同：
|
|
19
|
+
|
|
20
|
+
- **较低复杂度**：一般包含 2\~5 个 state 、3 \~ 4 个 action。此时的结构一般直接一个 `store.ts` + 一个 `initialState.ts` 即可。
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
DataFill/store
|
|
24
|
+
├── index.ts
|
|
25
|
+
└── initialState.ts
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
- **一般复杂度** ：一般复杂度存在 5 \~ 15 个 state、 5 \~ 10 个 action，可能会存在 selector 实现派生状态，也有可能存在 reducer 简化部分数据变更的复杂度。此时的结构一般为一个 `store.ts` + 一个 `initialState.ts` + 一个 `selectors.ts`/`reducer.ts`。
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
IconPicker/store
|
|
32
|
+
├── index.ts
|
|
33
|
+
├── initialState.ts
|
|
34
|
+
├── selectors.ts
|
|
35
|
+
└── store.ts
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
SortableList/store
|
|
40
|
+
├── index.ts
|
|
41
|
+
├── initialState.ts
|
|
42
|
+
├── listDataReducer.ts
|
|
43
|
+
└── store.ts
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
- **中等复杂度** ： 中等复杂度存在 15 \~ 30 个 state、 10 \~ 20 个 action，大概率会存在 selector 来聚合派生状态，大概率存在 reducer 简化部分数据变更的复杂度。
|
|
47
|
+
|
|
48
|
+
此时结构，用单一的 action store 已经较难维护，往往会拆解出来多个 slice 用于管理不同的 action。 下方的代码代表了 `SortableTree` 组件的内部数据流：
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
SortableTree/store
|
|
52
|
+
├── index.ts
|
|
53
|
+
├── initialState.ts
|
|
54
|
+
├── selectors.ts
|
|
55
|
+
├── slices
|
|
56
|
+
├── crudSlice.ts
|
|
57
|
+
├── dndSlice.ts
|
|
58
|
+
└── selectionSlice.ts
|
|
59
|
+
├── store.ts
|
|
60
|
+
└── treeDataReducer.ts
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
- 高等复杂度：高等复杂度存在 30 个以上的 state、 20 个以上的 action。必然需要 slice 做模块化内聚。在每个 slice 中都各自声明了各自的 initState、 action、reducer 与 selector。
|
|
64
|
+
|
|
65
|
+
下述这个数据流的目录结构是之前一版 SessionStore，具有很高的复杂度，实现了大量的业务逻辑。但借助于 slice 的模块化和分形架构的心智，我们可以很容易地找到对应的模块，新增功能与迭代都很易于维护。
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
LobeChat SessionStore
|
|
69
|
+
├── index.ts
|
|
70
|
+
├── initialState.ts
|
|
71
|
+
├── selectors.ts
|
|
72
|
+
├── slices
|
|
73
|
+
│ ├── agentConfig
|
|
74
|
+
│ │ ├── action.ts
|
|
75
|
+
│ │ ├── index.ts
|
|
76
|
+
│ │ ├── initialState.ts
|
|
77
|
+
│ │ └── selectors.ts
|
|
78
|
+
│ ├── chat
|
|
79
|
+
│ │ ├── actions
|
|
80
|
+
│ │ │ ├── index.ts
|
|
81
|
+
│ │ │ ├── message.ts
|
|
82
|
+
│ │ │ └── topic.ts
|
|
83
|
+
│ │ ├── index.ts
|
|
84
|
+
│ │ ├── initialState.ts
|
|
85
|
+
│ │ ├── reducers
|
|
86
|
+
│ │ │ ├── message.ts
|
|
87
|
+
│ │ │ └── topic.ts
|
|
88
|
+
│ │ ├── selectors
|
|
89
|
+
│ │ │ ├── chat.ts
|
|
90
|
+
│ │ │ ├── index.ts
|
|
91
|
+
│ │ │ ├── token.ts
|
|
92
|
+
│ │ │ ├── topic.ts
|
|
93
|
+
│ │ │ └── utils.ts
|
|
94
|
+
│ │ └── utils.ts
|
|
95
|
+
│ └── session
|
|
96
|
+
│ ├── action.ts
|
|
97
|
+
│ ├── index.ts
|
|
98
|
+
│ ├── initialState.ts
|
|
99
|
+
│ ├── reducers
|
|
100
|
+
│ │ └── session.ts
|
|
101
|
+
│ └── selectors
|
|
102
|
+
│ ├── export.ts
|
|
103
|
+
│ ├── index.ts
|
|
104
|
+
│ └── list.ts
|
|
105
|
+
└── store.ts
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
根据您提供的 LobeChat SessionStore 的目录结构，我们可以更新前面的文档，并将示例转换为 LobeChat 的 SessionStore 的实现案例。以下是转换后的文档部分：
|
|
109
|
+
|
|
110
|
+
### LobeChat SessionStore 目录结构最佳实践
|
|
111
|
+
|
|
112
|
+
在 LobeChat 应用中，由于会话管理是一个复杂的功能模块，因此我们采用了 Slice 模式来组织数据流。下面是 LobeChat SessionStore 的目录结构，其中每个目录和文件都有其特定的用途：
|
|
113
|
+
|
|
114
|
+
```bash
|
|
115
|
+
src/store/session
|
|
116
|
+
├── helpers.ts # 辅助函数
|
|
117
|
+
├── hooks # 自定义 React 钩子
|
|
118
|
+
│ ├── index.ts # 钩子的出口文件
|
|
119
|
+
│ ├── useEffectAfterHydrated.ts # 会话加载后的效果钩子
|
|
120
|
+
│ ├── useOnFinishHydrationSession.ts # 会话水合完成钩子
|
|
121
|
+
│ ├── useSessionChatInit.ts # 会话聊天初始化钩子
|
|
122
|
+
│ └── useSessionHydrated.ts # 会话水合状态钩子
|
|
123
|
+
├── index.ts # SessionStore 的聚合导出文件
|
|
124
|
+
├── initialState.ts # 聚合了所有 slice 的 initialState
|
|
125
|
+
├── selectors.ts # 从各个 slices 导出的 selector
|
|
126
|
+
├── slices # 分离的功能模块
|
|
127
|
+
│ ├── agent # 代理相关的状态和操作
|
|
128
|
+
│ │ ├── action.ts # 代理相关的 action 定义
|
|
129
|
+
│ │ ├── index.ts # 代理 slice 的入口文件
|
|
130
|
+
│ │ ├── selectors.test.ts # 代理相关 selector 的测试
|
|
131
|
+
│ │ └── selectors.ts # 代理相关的 selector 定义
|
|
132
|
+
│ └── session # 会话相关的状态和操作
|
|
133
|
+
│ ├── action.test.ts # 会话相关 action 的测试
|
|
134
|
+
│ ├── action.ts # 会话相关的 action 定义
|
|
135
|
+
│ ├── helpers.ts # 会话相关的辅助函数
|
|
136
|
+
│ ├── initialState.ts # 会话 slice 的 initialState
|
|
137
|
+
│ └── selectors # 会话相关的 selector 与其测试
|
|
138
|
+
│ ├── export.ts # 会话 selector 的聚合导出
|
|
139
|
+
│ ├── index.ts # 会话 selector 的入口文件
|
|
140
|
+
│ ├── list.test.ts # 列表 selector 的测试
|
|
141
|
+
│ └── list.ts # 列表相关的 selector 定义
|
|
142
|
+
└── store.ts # SessionStore 的创建和使用
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## SessionStore 的实现
|
|
146
|
+
|
|
147
|
+
在 LobeChat 中，SessionStore 被设计为管理会话状态和逻辑的核心模块。它由多个 Slices 组成，每个 Slice 管理一部分相关的状态和逻辑。下面是一个简化的 SessionStore 的实现示例：
|
|
148
|
+
|
|
149
|
+
#### store.ts
|
|
150
|
+
|
|
151
|
+
```ts
|
|
152
|
+
import { PersistOptions, devtools, persist, subscribeWithSelector } from 'zustand/middleware';
|
|
153
|
+
import { shallow } from 'zustand/shallow';
|
|
154
|
+
import { devtools } from 'zustand/middleware';
|
|
155
|
+
import { createWithEqualityFn } from 'zustand/traditional';
|
|
156
|
+
|
|
157
|
+
import { SessionStoreState, initialState } from './initialState';
|
|
158
|
+
import { AgentAction, createAgentSlice } from './slices/agent/action';
|
|
159
|
+
import { SessionAction, createSessionSlice } from './slices/session/action';
|
|
160
|
+
|
|
161
|
+
// =============== 聚合 createStoreFn ============ //
|
|
162
|
+
|
|
163
|
+
export type SessionStore = SessionAction & AgentAction & SessionStoreState;
|
|
164
|
+
const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (...parameters) => ({
|
|
165
|
+
...initialState,
|
|
166
|
+
...createAgentSlice(...parameters),
|
|
167
|
+
...createSessionSlice(...parameters),
|
|
168
|
+
});
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
// =============== 实装 useStore ============ //
|
|
173
|
+
|
|
174
|
+
export const useSessionStore = createWithEqualityFn<SessionStore>()(
|
|
175
|
+
persist(
|
|
176
|
+
subscribeWithSelector(
|
|
177
|
+
devtools(createStore, {
|
|
178
|
+
name: 'LobeChat_Session' + (isDev ? '_DEV' : ''),
|
|
179
|
+
}),
|
|
180
|
+
),
|
|
181
|
+
persistOptions,
|
|
182
|
+
),
|
|
183
|
+
shallow,
|
|
184
|
+
);
|
|
185
|
+
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
在这个 `store.ts` 文件中，我们创建了一个 `useSessionStore` 钩子，它使用 `zustand` 库来创建一个全局状态管理器。我们将 initialState 和每个 Slice 的状态和动作合并，以创建完整的 SessionStore。
|
|
189
|
+
|
|
190
|
+
#### slices/session/action.ts
|
|
191
|
+
|
|
192
|
+
```ts
|
|
193
|
+
import { StateCreator } from 'zustand';
|
|
194
|
+
|
|
195
|
+
import { SessionStore } from '@/store/session';
|
|
196
|
+
|
|
197
|
+
export interface SessionActions {
|
|
198
|
+
/**
|
|
199
|
+
* A custom hook that uses SWR to fetch sessions data.
|
|
200
|
+
*/
|
|
201
|
+
useFetchSessions: () => SWRResponse<any>;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
export const createSessionSlice: StateCreator<
|
|
205
|
+
SessionStore,
|
|
206
|
+
[['zustand/devtools', never]],
|
|
207
|
+
[],
|
|
208
|
+
SessionAction
|
|
209
|
+
> = (set, get) => ({
|
|
210
|
+
useFetchSessions: () => {
|
|
211
|
+
// ...初始化会话的逻辑
|
|
212
|
+
},
|
|
213
|
+
// ...其他动作的实现
|
|
214
|
+
});
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
在 `action.ts` 文件中，我们定义了一个 `SessionActions` 接口来描述会话相关的动作，并且实现了一个 `useFetchSessions` 函数来创建这些动作。然后，我们将这些动作与初始状态合并，以形成会话相关的 Slice。
|
|
218
|
+
|
|
219
|
+
通过这种结构分层和模块化的方法，我们可以确保 LobeChat 的 SessionStore 是清晰、可维护的，同时也便于扩展和测试。
|
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
|
|
7
7
|
- [基础技术栈](#基础技术栈)
|
|
8
8
|
- [文件夹目录架构](#文件夹目录架构)
|
|
9
|
+
- [本地开发环境设置](#本地开发环境设置)
|
|
10
|
+
- [代码风格与贡献指南](#代码风格与贡献指南)
|
|
11
|
+
- [国际化实现指南](#国际化实现指南)
|
|
12
|
+
- [附录：资源与参考](#附录资源与参考)
|
|
9
13
|
|
|
10
14
|
## 基础技术栈
|
|
11
15
|
|
|
@@ -40,4 +44,65 @@ src
|
|
|
40
44
|
└── utils # 通用的工具函数
|
|
41
45
|
```
|
|
42
46
|
|
|
43
|
-
有关目录架构的详细介绍，详见： [文件夹目录架构](Folder-Structure.zh-CN
|
|
47
|
+
有关目录架构的详细介绍，详见： [文件夹目录架构](Folder-Structure.zh-CN)
|
|
48
|
+
|
|
49
|
+
## 本地开发环境设置
|
|
50
|
+
|
|
51
|
+
本节将概述搭建开发环境并进行本地开发。 在开始之前，请确保你的本地环境中已安装 Node.js、Git 以及你选择的包管理器（Bun 或 PNPM）。
|
|
52
|
+
|
|
53
|
+
我们推荐使用 WebStorm 作为你的集成开发环境（IDE）。
|
|
54
|
+
|
|
55
|
+
1. **获取代码**：克隆 LobeChat 的代码库到本地：
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
git clone https://github.com/lobehub/lobe-chat.git
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
2. **安装依赖**：进入项目目录，并安装所需依赖：
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
cd lobe-chat
|
|
65
|
+
# 如果你使用 Bun
|
|
66
|
+
bun install
|
|
67
|
+
# 如果你使用 PNPM
|
|
68
|
+
pnpm install
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
3. **运行与调试**：启动本地开发服务器，开始你的开发之旅：
|
|
72
|
+
|
|
73
|
+
```bash
|
|
74
|
+
# 使用 Bun 启动开发服务器
|
|
75
|
+
bun run dev
|
|
76
|
+
# 访问 http://localhost:3010 查看应用
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
现在，你应该可以在浏览器中看到 LobeChat 的欢迎页面。详细的环境配置指南，请参考 [开发环境设置指南](Setup-Development.zh-CN)。
|
|
80
|
+
|
|
81
|
+
## 代码风格与贡献指南
|
|
82
|
+
|
|
83
|
+
在 LobeChat 项目中，我们十分重视代码的质量和一致性。为此，我们制定了一系列的代码风格规范和贡献流程，以确保每位开发者都能顺利地参与到项目中。以下是你作为开发者需要遵守的代码风格和贡献准则。
|
|
84
|
+
|
|
85
|
+
- **代码风格**：我们使用 `@lobehub/lint` 统一代码风格，包括 ESLint、Prettier、remarklint 和 stylelint 配置。请遵守我们的代码规范，以保持代码的一致性和可读性。
|
|
86
|
+
- **贡献流程**：我们采用 gitmoji 和 semantic release 作为代码提交和发布流程。请使用 gitmoji 标注您的提交信息，并确保遵循 semantic release 的规范，以便我们的自动化系统能够正确处理版本控制和发布。
|
|
87
|
+
|
|
88
|
+
所有的贡献都将经过代码审查。维护者可能会提出修改建议或要求。请积极响应审查意见，并及时做出调整，我们期待你的参与和贡献。
|
|
89
|
+
|
|
90
|
+
详细的代码风格和贡献指南，请参考 [代码风格与贡献指南](Contributing-Guidelines.zh-CN)。
|
|
91
|
+
|
|
92
|
+
## 国际化实现指南
|
|
93
|
+
|
|
94
|
+
LobeChat 采用 `i18next` 和 `lobe-i18n` 实现多语言支持，确保用户全球化体验。
|
|
95
|
+
|
|
96
|
+
国际化文件位于 `src/locales`，包含默认语言（中文）。 我们会通过 `lobe-i18n` 自动生成其他的语言 JSON 文件。
|
|
97
|
+
|
|
98
|
+
如果要添加新语种，需遵循特定步骤，详见 [新语种添加指南](Add-New-Locale.zh-CN)。 我们鼓励你参与我们的国际化努力，共同为全球用户提供更好的服务。
|
|
99
|
+
|
|
100
|
+
详细的国际化实现指南指南，请参考 [国际化实现指南](Internationalization-Implementation.zh-CN)。
|
|
101
|
+
|
|
102
|
+
## 附录：资源与参考
|
|
103
|
+
|
|
104
|
+
为了支持开发者更好地理解和使用 LobeChat 的技术栈，我们提供了一份详尽的资源与参考列表 —— [LobeChat 资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN) - 访问我们维护的资源列表，包括教程、文章和其他有用的链接。
|
|
105
|
+
|
|
106
|
+
我们鼓励开发者利用这些资源深入学习和提升技能，通过 [LobeChat GitHub Discussions](https://github.com/lobehub/lobe-chat/discussions) 或者 [Discord](https://discord.com/invite/AYFPHvv2jT) 加入社区讨论，提出问题或分享你的经验。
|
|
107
|
+
|
|
108
|
+
如果你有任何疑问，或者需要进一步的帮助，请不要犹豫，请通过上述渠道与我们联系。
|
package/docs/Home.md
CHANGED
|
@@ -12,8 +12,6 @@ LobeChat is a open-source, extensible ([Function Calling][fc-url]), high-perform
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
[New Locale Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale) | [新语种添加指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale.zh-CN)
|
|
16
|
-
|
|
17
15
|
<!-- DOCS LIST -->
|
|
18
16
|
|
|
19
17
|
### 🤯 Usage
|
|
@@ -40,10 +38,12 @@ LobeChat is a open-source, extensible ([Function Calling][fc-url]), high-perform
|
|
|
40
38
|
- [Environment Setup Guide](https://github.com/lobehub/lobe-chat/wiki/Setup-Development) | [开发环境设置](https://github.com/lobehub/lobe-chat/wiki/Setup-Development.zh-CN)
|
|
41
39
|
- [Architecture Design](https://github.com/lobehub/lobe-chat/wiki/Architecture) | [架构设计](https://github.com/lobehub/lobe-chat/wiki/Architecture.zh-CN)
|
|
42
40
|
- [Directory Structure](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure) | [目录架构](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure.zh-CN)
|
|
43
|
-
- [
|
|
41
|
+
- [State-Management](https://github.com/lobehub/lobe-chat/wiki/State-Management) | [状态管理](https://github.com/lobehub/lobe-chat/wiki/State-Management.zh-CN)
|
|
42
|
+
- [Selectors](https://github.com/lobehub/lobe-chat/wiki/State-Management/Selectors) | [取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management/Selectors.zh-CN)
|
|
44
43
|
- [Conversation API Implementation Logic](https://github.com/lobehub/lobe-chat/wiki/Chat-API) | [会话 API 实现逻辑](https://github.com/lobehub/lobe-chat/wiki/Chat-API.zh-CN)
|
|
45
44
|
- [How to Develop a New Feature](https://github.com/lobehub/lobe-chat/wiki/Feature-Development) | [如何开发一个新功能](https://github.com/lobehub/lobe-chat/wiki/Feature-Development.zh-CN)
|
|
46
45
|
- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.zh-CN)
|
|
46
|
+
- [New Locale Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale) | [新语种添加指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale.zh-CN)
|
|
47
47
|
- [Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources) | [资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN)
|
|
48
48
|
|
|
49
49
|
<br/>
|
package/docs/_Sidebar.md
CHANGED
|
@@ -6,8 +6,6 @@
|
|
|
6
6
|
|
|
7
7
|
<!-- DOCS LIST -->
|
|
8
8
|
|
|
9
|
-
[New Locale Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale) | [新语种添加指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale.zh-CN)
|
|
10
|
-
|
|
11
9
|
#### 🤯 Usage
|
|
12
10
|
|
|
13
11
|
- [Custom Agents Guide](https://github.com/lobehub/lobe-chat/wiki/Usage-Agents) | [自定义助手指南](https://github.com/lobehub/lobe-chat/wiki/Usage-Agents.zh-CN)
|
|
@@ -28,10 +26,12 @@
|
|
|
28
26
|
- [Environment Setup Guide](https://github.com/lobehub/lobe-chat/wiki/Setup-Development) | [开发环境设置](https://github.com/lobehub/lobe-chat/wiki/Setup-Development.zh-CN)
|
|
29
27
|
- [Architecture Design](https://github.com/lobehub/lobe-chat/wiki/Architecture) | [架构设计](https://github.com/lobehub/lobe-chat/wiki/Architecture.zh-CN)
|
|
30
28
|
- [Directory Structure](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure) | [目录架构](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure.zh-CN)
|
|
31
|
-
- [
|
|
29
|
+
- [State-Management](https://github.com/lobehub/lobe-chat/wiki/State-Management) | [状态管理](https://github.com/lobehub/lobe-chat/wiki/State-Management.zh-CN)
|
|
30
|
+
- [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/State-Management/Selectors) | [取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management/Selectors.zh-CN)
|
|
32
31
|
- [Conversation API Implementation Logic](https://github.com/lobehub/lobe-chat/wiki/Chat-API) | [会话 API 实现逻辑](https://github.com/lobehub/lobe-chat/wiki/Chat-API.zh-CN)
|
|
33
32
|
- [How to Develop a New Feature](https://github.com/lobehub/lobe-chat/wiki/Feature-Development) | [如何开发一个新功能](https://github.com/lobehub/lobe-chat/wiki/Feature-Development.zh-CN)
|
|
34
|
-
- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [
|
|
33
|
+
- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.zh-CN)
|
|
34
|
+
- [New Locale Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale) | [新语种添加指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale.zh-CN)
|
|
35
35
|
- [Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources) | [资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN)
|
|
36
36
|
|
|
37
37
|
#### 🤖 Agents
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lobehub/chat",
|
|
3
|
-
"version": "0.120.
|
|
3
|
+
"version": "0.120.1",
|
|
4
4
|
"description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"framework",
|
|
@@ -44,8 +44,11 @@
|
|
|
44
44
|
"release": "semantic-release",
|
|
45
45
|
"start": "next start",
|
|
46
46
|
"stylelint": "stylelint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
|
|
47
|
-
"test": "vitest
|
|
48
|
-
"test
|
|
47
|
+
"test": "npm run test-temp-fixture-ci && vitest",
|
|
48
|
+
"test-a-local": "vitest",
|
|
49
|
+
"test-temp-fixture-ci": "echo 'please remove this script after new bun@1.0.24 released' && rm -rf node_modules && npx bun@1.0.22 install",
|
|
50
|
+
"test:coverage": "npm run test-temp-fixture-ci && vitest run --coverage",
|
|
51
|
+
"test:coverage-local": "vitest run --coverage",
|
|
49
52
|
"test:update": "vitest -u",
|
|
50
53
|
"type-check": "tsc --noEmit",
|
|
51
54
|
"workflow:docs": "bun scripts/docsWorkflow/index.ts",
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type AlertProps, ChatItem } from '@lobehub/ui';
|
|
2
|
+
import { createStyles } from 'antd-style';
|
|
2
3
|
import isEqual from 'fast-deep-equal';
|
|
3
4
|
import { ReactNode, memo, useCallback, useMemo, useState } from 'react';
|
|
4
5
|
import { useTranslation } from 'react-i18next';
|
|
@@ -15,6 +16,15 @@ import { renderMessages, useAvatarsClick } from '../../Messages';
|
|
|
15
16
|
import ActionsBar from './ActionsBar';
|
|
16
17
|
import HistoryDivider from './HistoryDivider';
|
|
17
18
|
|
|
19
|
+
const useStyles = createStyles(({ css, prefixCls }) => ({
|
|
20
|
+
message: css`
|
|
21
|
+
// prevent the textarea too long
|
|
22
|
+
.${prefixCls}-input {
|
|
23
|
+
max-height: 900px;
|
|
24
|
+
}
|
|
25
|
+
`,
|
|
26
|
+
}));
|
|
27
|
+
|
|
18
28
|
export interface ChatListItemProps {
|
|
19
29
|
id: string;
|
|
20
30
|
index: number;
|
|
@@ -22,7 +32,7 @@ export interface ChatListItemProps {
|
|
|
22
32
|
|
|
23
33
|
const Item = memo<ChatListItemProps>(({ index, id }) => {
|
|
24
34
|
const { t } = useTranslation('common');
|
|
25
|
-
|
|
35
|
+
const { styles } = useStyles();
|
|
26
36
|
const [editing, setEditing] = useState(false);
|
|
27
37
|
const [type = 'chat'] = useSessionStore((s) => {
|
|
28
38
|
const config = agentSelectors.currentAgentConfig(s);
|
|
@@ -111,6 +121,7 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
|
|
|
111
121
|
<ChatItem
|
|
112
122
|
actions={<ActionsBar index={index} setEditing={setEditing} />}
|
|
113
123
|
avatar={item.meta}
|
|
124
|
+
className={styles.message}
|
|
114
125
|
editing={editing}
|
|
115
126
|
error={error}
|
|
116
127
|
errorMessage={<ErrorMessage data={item} />}
|
|
@@ -42,6 +42,9 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
|
|
|
42
42
|
}
|
|
43
43
|
}, [id]);
|
|
44
44
|
|
|
45
|
+
// overscan should be 1.5 times the height of the window
|
|
46
|
+
const overscan = typeof window !== 'undefined' ? window.innerHeight * 1.5 : 0;
|
|
47
|
+
|
|
45
48
|
return chatLoading && data.length === 2 ? null : (
|
|
46
49
|
<Flexbox height={'100%'}>
|
|
47
50
|
<Virtuoso
|
|
@@ -52,7 +55,7 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
|
|
|
52
55
|
followOutput={'auto'}
|
|
53
56
|
initialTopMostItemIndex={data?.length - 1}
|
|
54
57
|
itemContent={itemContent}
|
|
55
|
-
overscan={
|
|
58
|
+
overscan={overscan}
|
|
56
59
|
ref={virtuosoRef}
|
|
57
60
|
/>
|
|
58
61
|
<AutoScroll
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
# 数据存储取数模块
|
|
2
|
-
|
|
3
|
-
selectors 是 LobeChat 数据流研发框架下的取数模块，它的作用是从 store 中以特定特务逻辑取出数据，供组件消费使用。
|
|
4
|
-
|
|
5
|
-
以 `src/store/plugin/selectors.ts` 为例：
|
|
6
|
-
|
|
7
|
-
这个 TypeScript 代码段定义了一个名为 `pluginSelectors` 的对象，该对象包含一系列用于从插件存储状态中检索数据的选择器函数。选择器是一种从 Redux store（或类似的状态管理库）中提取和派生数据的函数。这个特定的例子是为了管理与前端应用程序的插件系统相关的状态。
|
|
8
|
-
|
|
9
|
-
下面是一些关键点的说明：
|
|
10
|
-
|
|
11
|
-
- `enabledSchema`: 一个函数，返回一个基于启用插件列表 `enabledPlugins` 过滤后的 `ChatCompletionFunctions` 数组。它将插件标识符作为前缀添加到 API 名称，以确保唯一性，并使用 `uniqBy` 函数从 Lodash 库中删除重复项。
|
|
12
|
-
- `onlinePluginStore`: 返回当前在线插件列表。
|
|
13
|
-
- `pluginList`: 返回插件列表，包括自定义插件和标准插件。
|
|
14
|
-
- `getPluginMetaById`: 根据插件 ID 返回插件元数据。
|
|
15
|
-
- `getDevPluginById`: 返回开发中的自定义插件信息。
|
|
16
|
-
- `getPluginManifestById`: 根据插件 ID 返回插件清单。
|
|
17
|
-
- `getPluginSettingsById`: 根据插件 ID 返回插件设置。
|
|
18
|
-
- `getPluginManifestLoadingStatus`: 根据插件 ID 返回插件清单的加载状态（加载中、成功或错误）。
|
|
19
|
-
- `isCustomPlugin`: 检查给定 ID 的插件是否为自定义插件。
|
|
20
|
-
- `displayPluginList`: 返回一个处理过的插件列表，包括作者、头像、创建时间、描述、首页 URL、标识符和标题。
|
|
21
|
-
- `hasPluginUI`: 根据插件 ID 确定插件是否有 UI 组件。
|
|
22
|
-
|
|
23
|
-
selectors 是高度模块化和可维护的，它通过将复杂的状态选择逻辑封装在单独的函数中，使得在应用程序的其他部分调用状态数据时，代码更加简洁和直观。此外，由于使用了 TypeScript，每个函数都可以具有明确的输入和输出类型，这有助于提高代码的可靠性和开发效率。
|
|
24
|
-
|
|
25
|
-
以 `displayPluginList` 方法为例。其代码如下：
|
|
26
|
-
|
|
27
|
-
```ts
|
|
28
|
-
const pluginList = (s: PluginStoreState) => [...s.pluginList, ...s.customPluginList];
|
|
29
|
-
|
|
30
|
-
const displayPluginList = (s: PluginStoreState) =>
|
|
31
|
-
pluginList(s).map((p) => ({
|
|
32
|
-
author: p.author,
|
|
33
|
-
avatar: p.meta?.avatar,
|
|
34
|
-
createAt: p.createAt,
|
|
35
|
-
desc: pluginHelpers.getPluginDesc(p.meta),
|
|
36
|
-
homepage: p.homepage,
|
|
37
|
-
identifier: p.identifier,
|
|
38
|
-
title: pluginHelpers.getPluginTitle(p.meta),
|
|
39
|
-
}));
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
- `pluginList` 方法：用于从插件状态存储 PluginStoreState 中获取所有插件的列表。 它通过结合两个数组：pluginList 和 customPluginList 来创建一个新的插件列表；
|
|
43
|
-
- `displayPluginList` 方法：调用 pluginList 方法来获取合并后的插件列表，转换其中的 title 和 desc 变成显示在 UI 上的文本。
|
|
44
|
-
|
|
45
|
-
在组件中，只需引入便可直接获取最终消费的数据：
|
|
46
|
-
|
|
47
|
-
```tsx | pure
|
|
48
|
-
import { usePluginStore } from '@/store/plugin';
|
|
49
|
-
import { pluginSelectors } from '@/store/plugin/selectors';
|
|
50
|
-
|
|
51
|
-
const Render = ({ plugins }) => {
|
|
52
|
-
const list = usePluginStore(pluginSelectors.displayPluginList);
|
|
53
|
-
|
|
54
|
-
return <> ... </>;
|
|
55
|
-
};
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
这样实现的好处在于：
|
|
59
|
-
|
|
60
|
-
1. **解耦和重用**：通过将选择器独立于组件，我们可以在多个组件之间复用这些选择器而不需要重写取数逻辑。这减少了重复代码，提高了开发效率，并且使得代码库更加干净和易于维护。
|
|
61
|
-
2. **性能优化**：选择器可以用来计算派生数据，这样可以避免在每个组件中重复计算相同的数据。当状态发生变化时，只有依赖于这部分状态的选择器才会重新计算，从而减少不必要的渲染和计算。
|
|
62
|
-
3. **易于测试**：选择器是纯函数，它们仅依赖于传入的参数。这意味着它们可以在隔离的环境中进行测试，无需模拟整个 store 或组件树。
|
|
63
|
-
4. **类型安全**：由于 LobeChat 使用 TypeScript，每个选择器都有明确的输入和输出类型定义。这为开发者提供了自动完成和编译时检查的优势，减少了运行时错误。
|
|
64
|
-
5. **可维护性**：选择器集中了状态的读取逻辑，使得跟踪状态的变化和管理更加直观。如果状态结构发生变化，我们只需要更新相应的选择器，而不是搜索和替换整个代码库中的多个位置。
|
|
65
|
-
6. **可组合性**：选择器可以组合其他选择器，以创建更复杂的选择逻辑。这种模式允许开发者构建一个选择器层次结构，使得状态选择更加灵活和强大。
|
|
66
|
-
7. **简化组件逻辑**：组件不需要知道状态的结构或如何获取和计算需要的数据。组件只需调用选择器即可获取渲染所需的数据，这使得组件逻辑变得更简单和清晰。
|
|
67
|
-
|
|
68
|
-
通过这样的设计，LobeChat 的开发者可以更专注于构建用户界面和业务逻辑，而不必担心数据的获取和处理细节。这种模式也为未来可能的状态结构变更提供了更好的适应性和扩展性。
|
|
File without changes
|
|
File without changes
|
|
File without changes
|