@lobehub/chat 0.120.5 → 0.121.0

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.
Files changed (122) hide show
  1. package/.github/ISSUE_TEMPLATE/2_feature_request_cn.yml +1 -1
  2. package/CHANGELOG.md +50 -0
  3. package/README.md +9 -9
  4. package/README.zh-CN.md +9 -9
  5. package/docs/Development/Feature-Development-Frontend.zh-CN.md +126 -0
  6. package/docs/Development/Feature-Development.zh-CN.md +664 -83
  7. package/docs/Development/{State-Management/State-Management-Intro.zh-CN.md → State-Management-Intro.zh-CN.md} +9 -9
  8. package/docs/Home.md +1 -0
  9. package/docs/_Sidebar.md +1 -0
  10. package/locales/ar/chat.json +13 -1
  11. package/locales/ar/common.json +1 -0
  12. package/locales/de-DE/chat.json +13 -1
  13. package/locales/de-DE/common.json +1 -0
  14. package/locales/en-US/chat.json +13 -1
  15. package/locales/en-US/common.json +1 -0
  16. package/locales/es-ES/chat.json +13 -1
  17. package/locales/es-ES/common.json +1 -0
  18. package/locales/fr-FR/chat.json +13 -1
  19. package/locales/fr-FR/common.json +1 -0
  20. package/locales/it-IT/chat.json +13 -1
  21. package/locales/it-IT/common.json +1 -0
  22. package/locales/ja-JP/chat.json +13 -1
  23. package/locales/ja-JP/common.json +1 -0
  24. package/locales/ko-KR/chat.json +13 -1
  25. package/locales/ko-KR/common.json +1 -0
  26. package/locales/nl-NL/chat.json +13 -1
  27. package/locales/nl-NL/common.json +1 -0
  28. package/locales/pl-PL/chat.json +13 -1
  29. package/locales/pl-PL/common.json +1 -0
  30. package/locales/pt-BR/chat.json +13 -1
  31. package/locales/pt-BR/common.json +1 -0
  32. package/locales/ru-RU/chat.json +13 -1
  33. package/locales/ru-RU/common.json +1 -0
  34. package/locales/tr-TR/chat.json +13 -1
  35. package/locales/tr-TR/common.json +1 -0
  36. package/locales/vi-VN/chat.json +13 -1
  37. package/locales/vi-VN/common.json +1 -0
  38. package/locales/zh-CN/chat.json +13 -1
  39. package/locales/zh-CN/common.json +1 -0
  40. package/locales/zh-TW/chat.json +13 -1
  41. package/locales/zh-TW/common.json +1 -0
  42. package/package.json +4 -6
  43. package/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx +18 -5
  44. package/src/app/chat/(desktop)/features/ChatInput/index.tsx +1 -1
  45. package/src/app/chat/features/ChatHeader/ShareButton/index.tsx +0 -1
  46. package/src/app/chat/features/ChatHeader/ShareButton/style.ts +0 -1
  47. package/src/app/chat/features/Migration/Failed.tsx +2 -0
  48. package/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx +115 -0
  49. package/src/app/chat/features/SessionListContent/CollapseGroup/index.tsx +6 -0
  50. package/src/app/chat/features/SessionListContent/DefaultMode.tsx +63 -23
  51. package/src/app/chat/features/SessionListContent/List/AddButton.tsx +3 -3
  52. package/src/app/chat/features/SessionListContent/List/Item/Actions.tsx +89 -35
  53. package/src/app/chat/features/SessionListContent/List/Item/index.tsx +35 -15
  54. package/src/app/chat/features/SessionListContent/List/index.tsx +4 -2
  55. package/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/GroupItem.tsx +84 -0
  56. package/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/index.tsx +79 -0
  57. package/src/app/chat/features/SessionListContent/Modals/CreateGroupModal.tsx +63 -0
  58. package/src/app/chat/features/SessionListContent/Modals/RenameGroupModal.tsx +50 -0
  59. package/src/app/chat/features/SessionListContent/SearchMode.tsx +1 -1
  60. package/src/app/settings/common/Common.tsx +5 -1
  61. package/src/components/FullscreenLoading/index.tsx +1 -1
  62. package/src/database/core/__tests__/db-upgrade.test.ts +42 -0
  63. package/src/database/core/db.ts +26 -4
  64. package/src/database/core/schemas.ts +14 -1
  65. package/src/database/core/types/db.ts +2 -0
  66. package/src/database/models/__tests__/message.test.ts +42 -0
  67. package/src/database/models/__tests__/plugin.test.ts +77 -0
  68. package/src/database/models/__tests__/session.test.ts +202 -63
  69. package/src/database/models/__tests__/sessionGroup.test.ts +195 -0
  70. package/src/database/models/__tests__/topic.test.ts +76 -1
  71. package/src/database/models/message.ts +7 -8
  72. package/src/database/models/session.ts +103 -7
  73. package/src/database/models/sessionGroup.ts +76 -0
  74. package/src/database/schemas/session.ts +1 -0
  75. package/src/database/schemas/sessionGroup.ts +8 -0
  76. package/src/features/ChatInput/ActionBar/Clear.tsx +2 -1
  77. package/src/features/Conversation/Actions/Assistant.tsx +1 -1
  78. package/src/features/Conversation/Actions/Function.tsx +2 -2
  79. package/src/features/Conversation/Actions/User.tsx +1 -1
  80. package/src/features/Conversation/hooks/useChatListActionsBar.tsx +3 -3
  81. package/src/features/PluginDevModal/index.tsx +3 -0
  82. package/src/features/PluginStore/PluginItem/Action.tsx +2 -0
  83. package/src/locales/default/chat.ts +13 -1
  84. package/src/locales/default/common.ts +1 -0
  85. package/src/migrations/FromV2ToV3/fixtures/input-v2-session.json +72 -0
  86. package/src/migrations/FromV2ToV3/fixtures/output-v3-from-v1.json +203 -0
  87. package/src/migrations/FromV2ToV3/fixtures/output-v3.json +74 -0
  88. package/src/migrations/FromV2ToV3/index.ts +30 -0
  89. package/src/migrations/FromV2ToV3/migrations.test.ts +42 -0
  90. package/src/migrations/FromV2ToV3/types/v3.ts +27 -0
  91. package/src/migrations/index.ts +7 -1
  92. package/src/services/__tests__/session.test.ts +198 -7
  93. package/src/services/config.ts +23 -7
  94. package/src/services/session.ts +67 -14
  95. package/src/store/global/slices/common/action.test.ts +130 -0
  96. package/src/store/global/slices/common/action.ts +14 -0
  97. package/src/store/global/slices/common/initialState.ts +6 -2
  98. package/src/store/global/slices/common/selectors.ts +1 -4
  99. package/src/store/global/slices/settings/__snapshots__/selectors.test.ts.snap +83 -0
  100. package/src/store/global/slices/settings/action.ts +2 -2
  101. package/src/store/global/slices/settings/selectors.test.ts +132 -182
  102. package/src/store/global/store.ts +7 -0
  103. package/src/store/session/initialState.ts +5 -30
  104. package/src/store/session/selectors.ts +2 -1
  105. package/src/store/session/slices/session/action.test.ts +56 -0
  106. package/src/store/session/slices/session/action.ts +13 -9
  107. package/src/store/session/slices/session/helpers.ts +2 -3
  108. package/src/store/session/slices/session/initialState.ts +31 -23
  109. package/src/store/session/slices/session/selectors/index.ts +0 -1
  110. package/src/store/session/slices/session/selectors/list.ts +11 -18
  111. package/src/store/session/slices/sessionGroup/action.ts +54 -0
  112. package/src/store/session/slices/sessionGroup/initialState.ts +5 -0
  113. package/src/store/session/slices/sessionGroup/selectors.ts +15 -0
  114. package/src/store/session/store.ts +9 -2
  115. package/src/styles/antdOverride.ts +0 -7
  116. package/src/types/exportConfig.ts +3 -1
  117. package/src/types/session.ts +27 -3
  118. package/src/store/session/slices/session/selectors/export.ts +0 -31
  119. /package/docs/Development/{Feature-Development.md → Feature-Development-Frontend.md} +0 -0
  120. /package/docs/Development/{State-Management/State-Management-Intro.md → State-Management-Intro.md} +0 -0
  121. /package/docs/Development/{State-Management/Selectors.md → State-Management-Selectors.md} +0 -0
  122. /package/docs/Development/{State-Management/Selectors.zh-CN.md → State-Management-Selectors.zh-CN.md} +0 -0
@@ -1,7 +1,7 @@
1
1
  name: '🌠 功能需求'
2
2
  description: '提出需求或建议'
3
3
  title: '[Request] '
4
- labels: ['🌠 功能需求']
4
+ labels: ['🌠 Feature Request']
5
5
  body:
6
6
  - type: textarea
7
7
  attributes:
package/CHANGELOG.md CHANGED
@@ -2,6 +2,56 @@
2
2
 
3
3
  # Changelog
4
4
 
5
+ ## [Version 0.121.0](https://github.com/lobehub/lobe-chat/compare/v0.120.6...v0.121.0)
6
+
7
+ <sup>Released on **2024-01-24**</sup>
8
+
9
+ #### ✨ Features
10
+
11
+ - **misc**: Add session group manager.
12
+
13
+ <br/>
14
+
15
+ <details>
16
+ <summary><kbd>Improvements and Fixes</kbd></summary>
17
+
18
+ #### What's improved
19
+
20
+ - **misc**: Add session group manager, closes [#1055](https://github.com/lobehub/lobe-chat/issues/1055) [#1045](https://github.com/lobehub/lobe-chat/issues/1045) [#1126](https://github.com/lobehub/lobe-chat/issues/1126) [#1120](https://github.com/lobehub/lobe-chat/issues/1120) ([e3281fc](https://github.com/lobehub/lobe-chat/commit/e3281fc))
21
+
22
+ </details>
23
+
24
+ <div align="right">
25
+
26
+ [![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
27
+
28
+ </div>
29
+
30
+ ### [Version 0.120.6](https://github.com/lobehub/lobe-chat/compare/v0.120.5...v0.120.6)
31
+
32
+ <sup>Released on **2024-01-22**</sup>
33
+
34
+ #### 💄 Styles
35
+
36
+ - **misc**: Fix share image tags not align.
37
+
38
+ <br/>
39
+
40
+ <details>
41
+ <summary><kbd>Improvements and Fixes</kbd></summary>
42
+
43
+ #### Styles
44
+
45
+ - **misc**: Fix share image tags not align, closes [#1047](https://github.com/lobehub/lobe-chat/issues/1047) ([28206b6](https://github.com/lobehub/lobe-chat/commit/28206b6))
46
+
47
+ </details>
48
+
49
+ <div align="right">
50
+
51
+ [![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
52
+
53
+ </div>
54
+
5
55
  ### [Version 0.120.5](https://github.com/lobehub/lobe-chat/compare/v0.120.4...v0.120.5)
6
56
 
7
57
  <sup>Released on **2024-01-21**</sup>
package/README.md CHANGED
@@ -184,14 +184,14 @@ e-commerce platform data access, and various third-party services.
184
184
 
185
185
  <!-- PLUGIN LIST -->
186
186
 
187
- | Recent Submits | Description |
188
- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
189
- | [AskYourPDF](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **askyourpdf** on **2024-01-20**</sup> | Unlock the power of your PDFs!, dive into your documents, find answers, and bring information to your fingertips.<br/>`pdf` `document` `web` |
190
- | [Savvy Trader AI](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **savvytrader** on **2024-01-20**</sup> | Realtime stock, crypto and other investment data.<br/>`stock` `analyze` |
191
- | [Midjourney](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2024-01-18**</sup> | Unleash creativity with Midjourney, effortlessly generating unique AI-driven images through simple prompts. Add visual flair to your conversations with Midjourney's artistic touch.<br/>`ai-image-generation` `midjourney` `visualization` |
192
- | [GIF Search](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **efficiency** on **2024-01-17**</sup> | Search through a wide range of gifs - Powered by Giphy.<br/>`gif` `image` `search` |
187
+ | Recent Submits | Description |
188
+ | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
189
+ | [GameSight](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **tapapis** on **2024-01-23**</sup> | Discover games, game-related content, get recommendations, and compare games based on player reviews.<br/>`game` `search` |
190
+ | [txyz.ai](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **txyz** on **2024-01-23**</sup> | Explore the universe of research. Search and compare papers, and answer questions.<br/>`research-paper` `search` |
191
+ | [SEO](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **orrenprunckun** on **2024-01-23**</sup> | Enter any URL and keyword and get an On-Page SEO analysis & insights!<br/>`seo` |
192
+ | [Video Captions](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **maila** on **2024-01-23**</sup> | Convert Youtube links into transcribed text, enable asking questions, create chapters, and summarize its content.<br/>`video-to-text` `youtube` |
193
193
 
194
- > 📊 Total plugins: [<kbd>**20**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
194
+ > 📊 Total plugins: [<kbd>**40**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
195
195
 
196
196
  <!-- PLUGIN LIST -->
197
197
 
@@ -225,12 +225,12 @@ Our marketplace is not just a showcase platform but also a collaborative space.
225
225
 
226
226
  | Recent Submits | Description |
227
227
  | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
228
+ | [Shopping Assistant](https://chat-preview.lobehub.com/market?agent=shop)<br/><sup>By **[guluahljj](https://github.com/guluahljj)** on **2024-01-22**</sup> | Shopping assistant, specializing in product search, price comparison, and providing purchase links<br/>`shopping-assistant` `product-search` `price-comparison` `purchase-advice` `customer-consultation` `agulu` |
228
229
  | [Accounting Expert Assistant](https://chat-preview.lobehub.com/market?agent=accounting)<br/><sup>By **[MYSeaIT](https://github.com/MYSeaIT)** on **2024-01-21**</sup> | Accountant Agent: Comprehensive accounting support and expertise for individuals and businesses worldwide.<br/>`accounting` `financial-management` `tax-planning` `budgeting` |
229
230
  | [Business Guru](https://chat-preview.lobehub.com/market?agent=business-guru)<br/><sup>By **[MYSeaIT](https://github.com/MYSeaIT)** on **2024-01-21**</sup> | Business Consultant: Providing comprehensive business support and expertise worldwide.Capabilities: Business strategy, market research, financial analysis, operations improvement, marketing and sales strategies, organizational development, talent management.Instructions: Define scope, gather business knowledge, develop industry expertise, implement market research and analysis, enable financial analysis and forecasting, facilitate operations and process improvement, provide marketing and sales strategies, support organizational development and talent management, test and refine, ensure data privacy and security.<br/>`business-consultant` |
230
231
  | [DIY Guide Assistant](https://chat-preview.lobehub.com/market?agent=diy)<br/><sup>By **[guluahljj](https://github.com/guluahljj)** on **2024-01-21**</sup> | DIY project assistant, providing detailed guidance, programming support, and personalized customization<br/>`diy` `guide` `project` `programming` `assembly` |
231
- | [Financial Expert](https://chat-preview.lobehub.com/market?agent=finnance)<br/><sup>By **[MYSeaIT](https://github.com/MYSeaIT)** on **2024-01-21**</sup> | Finance Expert with Global Financial Expertise, Multilingual Communication, Financial Analysis and Reporting, Investment Planning and Portfolio Management, Financial Planning and Retirement Strategies, and Risk Management and Insurance capabilities.<br/>`inancial-management` |
232
232
 
233
- > 📊 Total agents: [<kbd>**111**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
233
+ > 📊 Total agents: [<kbd>**112**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
234
234
 
235
235
  <!-- AGENT LIST -->
236
236
 
package/README.zh-CN.md CHANGED
@@ -168,14 +168,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展,它极大地
168
168
 
169
169
  <!-- PLUGIN LIST -->
170
170
 
171
- | 最近新增 | 插件描述 |
172
- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
173
- | [AskYourPDF](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **askyourpdf** on **2024-01-20**</sup> | 释放 PDF 的力量!深入文档,寻找答案,让信息触手可及。<br/>`pdf` `document` `web` |
174
- | [Savvy Trader AI](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **savvytrader** on **2024-01-20**</sup> | 实时股票、加密货币和其他投资数据。<br/>`股票` `分析` |
175
- | [Midjourney](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2024-01-18**</sup> | 通过简单的提示轻松释放创造力,利用 Midjourney 生成独特的 AI 驱动图像。通过 Midjourney 的艺术触感为您的对话增添视觉魅力。<br/>`ai-image-generation` `midjourney` `visualization` |
176
- | [GIF 搜索](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **efficiency** on **2024-01-17**</sup> | 搜索各种各样的 GIF - 由 Giphy 提供动力。<br/>`gif` `图片` `搜索` |
171
+ | 最近新增 | 插件描述 |
172
+ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
173
+ | [GameSight](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **tapapis** on **2024-01-23**</sup> | 发现游戏、与游戏相关的内容、获取推荐,并根据玩家评价比较游戏。<br/>`游戏` `搜索` |
174
+ | [txyz.ai](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **txyz** on **2024-01-23**</sup> | 探索研究的宇宙。搜索和比较论文,并回答问题。<br/>`research-paper` `search` |
175
+ | [SEO](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **orrenprunckun** on **2024-01-23**</sup> | 输入任何 URL 和关键词,获取页面 SEO 分析和见解!<br/>`seo` |
176
+ | [视频字幕](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **maila** on **2024-01-23**</sup> | 将 Youtube 链接转换为转录文本,使其能够提问,创建章节,并总结其内容。<br/>`视频转文字` `you-tube` |
177
177
 
178
- > 📊 Total plugins: [<kbd>**20**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
178
+ > 📊 Total plugins: [<kbd>**40**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
179
179
 
180
180
  <!-- PLUGIN LIST -->
181
181
 
@@ -205,12 +205,12 @@ LobeChat 的插件生态系统是其核心功能的重要扩展,它极大地
205
205
 
206
206
  | 最近新增 | 助手说明 |
207
207
  | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
208
+ | [购物助手](https://chat-preview.lobehub.com/market?agent=shop)<br/><sup>By **[guluahljj](https://github.com/guluahljj)** on **2024-01-22**</sup> | 购物助手,擅长商品搜索、比价和提供购买链接<br/>`购物助手` `商品搜索` `比价` `购买建议` `客户咨询` `agulu` |
208
209
  | [会计专家助手](https://chat-preview.lobehub.com/market?agent=accounting)<br/><sup>By **[MYSeaIT](https://github.com/MYSeaIT)** on **2024-01-21**</sup> | 会计代理:为全球个人和企业提供全面的会计支持和专业知识。<br/>`会计` `财务管理` `税务规划` `预算编制` |
209
210
  | [商业顾问](https://chat-preview.lobehub.com/market?agent=business-guru)<br/><sup>By **[MYSeaIT](https://github.com/MYSeaIT)** on **2024-01-21**</sup> | 商业顾问:为全球提供全面的商业支持和专业知识。能力:商业战略、市场研究、财务分析、运营改善、营销和销售策略、组织发展、人才管理。说明:定义范围,收集商业知识,发展行业专长,实施市场研究和分析,启用财务分析和预测,促进运营和流程改善,提供营销和销售策略,支持组织发展和人才管理,测试和完善,确保数据隐私和安全。<br/>`business-consultant` |
210
211
  | [DIY 指导助手](https://chat-preview.lobehub.com/market?agent=diy)<br/><sup>By **[guluahljj](https://github.com/guluahljj)** on **2024-01-21**</sup> | DIY 项目助手,提供详细指导、编程支持和个性化定制<br/>`diy` `指导` `项目` `编程` `组装` |
211
- | [金融专家](https://chat-preview.lobehub.com/market?agent=finnance)<br/><sup>By **[MYSeaIT](https://github.com/MYSeaIT)** on **2024-01-21**</sup> | 具有全球金融专业知识、多语沟通能力、财务分析和报告、投资规划和投资组合管理、财务规划和退休策略、以及风险管理和保险能力的金融专家。<br/>`金融管理` |
212
212
 
213
- > 📊 Total agents: [<kbd>**111**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
213
+ > 📊 Total agents: [<kbd>**112**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
214
214
 
215
215
  <!-- AGENT LIST -->
216
216
 
@@ -0,0 +1,126 @@
1
+ # 如何开发一个新功能:前端实现
2
+
3
+ LobeChat 基于 Next.js 框架构建,使用 TypeScript 作为主要开发语言。在开发新功能时,我们需要遵循一定的开发流程,以确保代码的质量和稳定性。大致的流程分为以下五步:
4
+
5
+ 1. 路由:定义路由 (`src/app`)
6
+ 2. 数据结构: 定义数据结构 ( `src/types` )
7
+ 3. 业务功能实现: zustand store (`src/store`)
8
+ 4. 页面展示:书写静态组件 / 页面 (`src/app/<new-page>/features/<new-feature>.tsx`)
9
+ 5. 功能绑定:绑定 store 与页面的触发 (`const [state,function]= useNewStore(s=>[s.state,s.function])`)
10
+
11
+ 我们以 "会话消息" 功能为例,以下是实现这个功能的简要步骤:
12
+
13
+ #### TOC
14
+
15
+ - [1. 定义路由](#1-定义路由)
16
+ - [2. 定义数据结构](#2-定义数据结构)
17
+ - [3. 创建 Zustand Store](#3-创建-zustand-store)
18
+ - [4. 创建页面与组件](#4-创建页面与组件)
19
+ - [5. 功能绑定](#5-功能绑定)
20
+
21
+ ## 1. 定义路由
22
+
23
+ 在 `src/app` 目录下,我们需要定义一个新的路由来承载 "会话消息" 页面。一般来说,我们会在 `src/app` 下创建一个新的文件夹,例如 `chat`,并且在这个文件夹中创建 `page.tsx`文件,在该文件中导出 React 组件作为页面的主体。
24
+
25
+ ```tsx
26
+ // src/app/chat/page.tsx
27
+ import ChatPage from './features/chat';
28
+
29
+ export default ChatPage;
30
+ ```
31
+
32
+ ## 2. 定义数据结构
33
+
34
+ 在 `src/types` 目录下,我们需要定义 "会话消息" 的数据结构。例如,我们创建一个 `chat.ts` 文件,并在其中定义 `ChatMessage` 类型:
35
+
36
+ ```ts
37
+ // src/types/chat.ts
38
+
39
+ export type ChatMessage = {
40
+ id: string;
41
+ content: string;
42
+ timestamp: number;
43
+ sender: 'user' | 'bot';
44
+ };
45
+ ```
46
+
47
+ ## 3. 创建 Zustand Store
48
+
49
+ 在 `src/store` 目录下,我们需要创建一个新的 Zustand Store 来管理 "会话消息" 的状态。例如,我们创建一个 `chatStore.ts` 文件,并在其中定义一个 Zustand Store:
50
+
51
+ ```ts
52
+ // src/store/chatStore.ts
53
+ import create from 'zustand';
54
+
55
+ type ChatState = {
56
+ messages: ChatMessage[];
57
+ addMessage: (message: ChatMessage) => void;
58
+ };
59
+
60
+ export const useChatStore = create<ChatState>((set) => ({
61
+ messages: [],
62
+ addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })),
63
+ }));
64
+ ```
65
+
66
+ ## 4. 创建页面与组件
67
+
68
+ 在 `src/app/<new-page>/features/<new-feature>.tsx` 中,我们需要创建一个新的页面或组件来显示 "会话消息"。在这个文件中,我们可以使用上面创建的 Zustand Store,以及 Ant Design 的组件来构建 UI:
69
+
70
+ ```jsx
71
+ // src/features/chat/index.tsx
72
+ import { List, Typography } from 'antd';
73
+ import { useChatStore } from 'src/store/chatStore';
74
+
75
+ const ChatPage = () => {
76
+ const messages = useChatStore((state) => state.messages);
77
+
78
+ return (
79
+ <List
80
+ dataSource={messages}
81
+ renderItem={(message) => (
82
+ <List.Item>
83
+ <Typography.Text>{message.content}</Typography.Text>
84
+ </List.Item>
85
+ )}
86
+ />
87
+ );
88
+ };
89
+
90
+ export default ChatPage;
91
+ ```
92
+
93
+ ## 5. 功能绑定
94
+
95
+ 在页面或组件中,我们需要将 Zustand Store 的状态和方法绑定到 UI 上。在上面的示例中,我们已经将 `messages` 状态绑定到了列表的 `dataSource` 属性上。现在,我们还需要一个方法来添加新的消息。我们可以在 Zustand Store 中定义这个方法,然后在页面或组件中使用它:
96
+
97
+ ```jsx
98
+ import { Button } from 'antd';
99
+
100
+ const ChatPage = () => {
101
+ const messages = useChatStore((state) => state.messages);
102
+ const addMessage = useChatStore((state) => state.addMessage);
103
+
104
+ const handleSend = () => {
105
+ addMessage({ id: '1', content: 'Hello, world!', timestamp: Date.now(), sender: 'user' });
106
+ };
107
+
108
+ return (
109
+ <>
110
+ <List
111
+ dataSource={messages}
112
+ renderItem={(message) => (
113
+ <List.Item>
114
+ <Typography.Text>{message.content}</Typography.Text>
115
+ </List.Item>
116
+ )}
117
+ />
118
+ <Button onClick={handleSend}>Send</Button>
119
+ </>
120
+ );
121
+ };
122
+
123
+ export default ChatPage;
124
+ ```
125
+
126
+ 以上就是在 LobeChat 中实现 "会话消息" 功能的步骤。当然,在 LobeChat 的实际开发中,真实场景所面临的业务诉求和场景远比上述 demo 复杂,请根据实际情况进行开发。