Merge branch 'main' into dev

lobehub · May 8, 2024 · 280351c · 280351c
2 parents 6795e99 + bf1fe3d
commit 280351c
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 88 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.155.4](https://github.com/lobehub/lobe-chat/compare/v0.155.3...v0.155.4)
+
+<sup>Released on **2024-05-08**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix Agent Settings Form.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix Agent Settings Form ([12c62a0](https://github.com/lobehub/lobe-chat/commit/12c62a0))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.155.3](https://github.com/lobehub/lobe-chat/compare/v0.155.2...v0.155.3)
 
 <sup>Released on **2024-05-08**</sup>

diff --git a/README.md b/README.md
@@ -263,12 +263,12 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 | Recent Submits                                                                                                                                                                             | Description                                                                                                                                                                                                                                                    |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [SF Symbols Finder](https://chat-preview.lobehub.com/market?agent=sf-symbols-finder)<br/><sup>By **[inquiry-paring0a](https://github.com/inquiry-paring0a)** on **2024-05-08**</sup>       | Master Apple SF Symbols, select symbols that match the description<br/>`sf-symbols` `expert` `icon` `symbol` `plugin`                                                                                                                                          |
 | [Video to Blog Post Assistant](https://chat-preview.lobehub.com/market?agent=video-2-blog-assistant)<br/><sup>By **[yayoinoyume](https://github.com/yayoinoyume)** on **2024-05-06**</sup> | Helps you quickly organize messy subtitles into beautiful blog posts<br/>`subtitle-organization` `blog-post-formatting` `video-to-blog`                                                                                                                        |
 | [Art Evaluation Tutor](https://chat-preview.lobehub.com/market?agent=wanwusheng-art)<br/><sup>By **[dingyufei615](https://github.com/dingyufei615)** on **2024-05-06**</sup>               | Specializes in teaching children's art, meticulously evaluates works, pays attention to details, and adapts to students of different age groups.<br/>`art-education` `evaluation` `creativity` `teaching` `painting`                                           |
 | [iOS Code Artist](https://chat-preview.lobehub.com/market?agent=ios-develop)<br/><sup>By **[Alcu1n](https://github.com/Alcu1n)** on **2024-05-03**</sup>                                   | iOS development expert with 15 years of experience, proficient in Swift, SwiftUI, Flutter. Clear logic in code, precise debugging, providing project frameworks from 0 to 1.<br/>`i-os-development` `coding` `debugging` `project-planning` `logical-thinking` |
-| [Sales Description Specialist](https://chat-preview.lobehub.com/market?agent=verkauf-kleinanzeigen)<br/><sup>By **[highseen](https://github.com/highseen)** on **2024-04-30**</sup>        | Assists in the sale of used items through research, pricing, description, and title creation.<br/>`product-sales` `research` `description`                                                                                                                     |
 
-> 📊 Total agents: [<kbd>**247**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**248**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -249,14 +249,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 <!-- AGENT LIST -->
 
-| 最近新增                                                                                                                                                                         | 助手说明                                                                                                                                                       |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [视频转博客文章助手](https://chat-preview.lobehub.com/market?agent=video-2-blog-assistant)<br/><sup>By **[yayoinoyume](https://github.com/yayoinoyume)** on **2024-05-06**</sup> | 帮你快速整理缭乱的字幕，变成精美的博客文章<br/>`字幕整理` `博文格式` `视频变博客`                                                                              |
-| [美术评价导师](https://chat-preview.lobehub.com/market?agent=wanwusheng-art)<br/><sup>By **[dingyufei615](https://github.com/dingyufei615)** on **2024-05-06**</sup>             | 擅长少儿美术教学，细致评价作品，关注细节，适应不同年龄段学生。<br/>`美术教育` `评价` `创意` `教学` `绘画`                                                      |
-| [iOS 代码艺术家](https://chat-preview.lobehub.com/market?agent=ios-develop)<br/><sup>By **[Alcu1n](https://github.com/Alcu1n)** on **2024-05-03**</sup>                          | iOS 开发专家，15 年经验，精通 Swift、SwiftUI、Flutter。逻辑清晰的代码，精准 debug，提供 0 到 1 的项目框架。<br/>`i-os开发` `编码` `调试` `项目规划` `逻辑思维` |
-| [销售描述专家](https://chat-preview.lobehub.com/market?agent=verkauf-kleinanzeigen)<br/><sup>By **[highseen](https://github.com/highseen)** on **2024-04-30**</sup>              | 通过研究、定价、描述和标题设计帮助销售二手物品。<br/>`产品销售` `研究` `描述`                                                                                  |
-
-> 📊 Total agents: [<kbd>**247**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| 最近新增                                                                                                                                                                             | 助手说明                                                                                                                                                       |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [SF Symbols 查找器](https://chat-preview.lobehub.com/market?agent=sf-symbols-finder)<br/><sup>By **[inquiry-paring0a](https://github.com/inquiry-paring0a)** on **2024-05-08**</sup> | 精通苹果 SF Symbols，可根据描述选择符合的 Symbols<br/>`sf-symbols` `专家` `图标` `符号` `插件`                                                                 |
+| [视频转博客文章助手](https://chat-preview.lobehub.com/market?agent=video-2-blog-assistant)<br/><sup>By **[yayoinoyume](https://github.com/yayoinoyume)** on **2024-05-06**</sup>     | 帮你快速整理缭乱的字幕，变成精美的博客文章<br/>`字幕整理` `博文格式` `视频变博客`                                                                              |
+| [美术评价导师](https://chat-preview.lobehub.com/market?agent=wanwusheng-art)<br/><sup>By **[dingyufei615](https://github.com/dingyufei615)** on **2024-05-06**</sup>                 | 擅长少儿美术教学，细致评价作品，关注细节，适应不同年龄段学生。<br/>`美术教育` `评价` `创意` `教学` `绘画`                                                      |
+| [iOS 代码艺术家](https://chat-preview.lobehub.com/market?agent=ios-develop)<br/><sup>By **[Alcu1n](https://github.com/Alcu1n)** on **2024-05-03**</sup>                              | iOS 开发专家，15 年经验，精通 Swift、SwiftUI、Flutter。逻辑清晰的代码，精准 debug，提供 0 到 1 的项目框架。<br/>`i-os开发` `编码` `调试` `项目规划` `逻辑思维` |
+
+> 📊 Total agents: [<kbd>**248**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.155.3",
+  "version": "0.155.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.",
   "keywords": [
     "framework",

diff --git a/src/features/AgentSetting/AgentChat/index.tsx b/src/features/AgentSetting/AgentChat/index.tsx
@@ -3,22 +3,20 @@
 import { Form, ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
 import { Input, Switch } from 'antd';
 import { useThemeMode } from 'antd-style';
-import { debounce } from 'lodash-es';
 import { LayoutList, MessagesSquare } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { imageUrl } from '@/const/url';
 
 import { useStore } from '../store';
+import { useAgentSyncSettings } from '../useSyncAgemtSettings';
 
 const AgentChat = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
   const { isDarkMode } = useThemeMode();
-
   const [
     displayMode,
     enableAutoCreateTopic,
@@ -33,7 +31,7 @@ const AgentChat = memo(() => {
     s.setAgentConfig,
   ]);
 
-  useSyncSettings(form);
+  useAgentSyncSettings(form);
 
   const chat: ItemGroup = {
     children: [
@@ -125,7 +123,7 @@ const AgentChat = memo(() => {
       form={form}
       items={[chat]}
       itemsType={'group'}
-      onValuesChange={debounce(updateConfig, 100)}
+      onValuesChange={updateConfig}
       variant={'pure'}
       {...FORM_STYLE}
     />

diff --git a/src/features/AgentSetting/AgentMeta/index.tsx b/src/features/AgentSetting/AgentMeta/index.tsx
@@ -6,7 +6,7 @@ import isEqual from 'fast-deep-equal';
 import { isString } from 'lodash-es';
 import { Wand2 } from 'lucide-react';
 import dynamic from 'next/dynamic';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
@@ -77,60 +77,57 @@ const AgentMeta = memo(() => {
     };
   });
 
-  const metaData: ItemGroup = useMemo(
-    () => ({
-      children: [
-        {
-          children: (
-            <EmojiPicker
-              backgroundColor={meta.backgroundColor}
-              locale={locale}
-              onChange={(avatar) => updateMeta({ avatar })}
-              value={meta.avatar}
-            />
-          ),
-          label: t('settingAgent.avatar.title'),
-          minWidth: undefined,
-        },
-        {
-          children: (
-            <BackgroundSwatches
-              backgroundColor={meta.backgroundColor}
-              onChange={(backgroundColor) => updateMeta({ backgroundColor })}
-            />
-          ),
-          label: t('settingAgent.backgroundColor.title'),
-          minWidth: undefined,
-        },
-        ...autocompleteItems,
-      ],
-      extra: (
-        <Tooltip
-          title={
-            !hasSystemRole
-              ? t('autoGenerateTooltipDisabled', { ns: 'common' })
-              : t('autoGenerateTooltip', { ns: 'common' })
-          }
-        >
-          <Button
-            disabled={!hasSystemRole}
-            icon={<Icon icon={Wand2} />}
-            loading={Object.values(loading).some((i) => !!i)}
-            onClick={(e: any) => {
-              e.stopPropagation();
+  const metaData: ItemGroup = {
+    children: [
+      {
+        children: (
+          <EmojiPicker
+            backgroundColor={meta.backgroundColor}
+            locale={locale}
+            onChange={(avatar) => updateMeta({ avatar })}
+            value={meta.avatar}
+          />
+        ),
+        label: t('settingAgent.avatar.title'),
+        minWidth: undefined,
+      },
+      {
+        children: (
+          <BackgroundSwatches
+            backgroundColor={meta.backgroundColor}
+            onChange={(backgroundColor) => updateMeta({ backgroundColor })}
+          />
+        ),
+        label: t('settingAgent.backgroundColor.title'),
+        minWidth: undefined,
+      },
+      ...autocompleteItems,
+    ],
+    extra: (
+      <Tooltip
+        title={
+          !hasSystemRole
+            ? t('autoGenerateTooltipDisabled', { ns: 'common' })
+            : t('autoGenerateTooltip', { ns: 'common' })
+        }
+      >
+        <Button
+          disabled={!hasSystemRole}
+          icon={<Icon icon={Wand2} />}
+          loading={Object.values(loading).some((i) => !!i)}
+          onClick={(e: any) => {
+            e.stopPropagation();
 
-              autocompleteAllMeta(true);
-            }}
-            size={'small'}
-          >
-            {t('autoGenerate', { ns: 'common' })}
-          </Button>
-        </Tooltip>
-      ),
-      title: t('settingAgent.title'),
-    }),
-    [autocompleteItems, meta],
-  );
+            autocompleteAllMeta(true);
+          }}
+          size={'small'}
+        >
+          {t('autoGenerate', { ns: 'common' })}
+        </Button>
+      </Tooltip>
+    ),
+    title: t('settingAgent.title'),
+  };
 
   return <Form items={[metaData]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />;
 });

diff --git a/src/features/AgentSetting/AgentModal/index.tsx b/src/features/AgentSetting/AgentModal/index.tsx
@@ -6,10 +6,10 @@ import { debounce } from 'lodash-es';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 
 import { useStore } from '../store';
+import { useAgentSyncSettings } from '../useSyncAgemtSettings';
 import ModelSelect from './ModelSelect';
 
 const AgentModal = memo(() => {
@@ -21,7 +21,7 @@ const AgentModal = memo(() => {
     s.setAgentConfig,
   ]);
 
-  useSyncSettings(form);
+  useAgentSyncSettings(form);
 
   const model: ItemGroup = {
     children: [

diff --git a/src/features/AgentSetting/AgentTTS/index.tsx b/src/features/AgentSetting/AgentTTS/index.tsx
@@ -2,18 +2,18 @@
 
 import { VoiceList } from '@lobehub/tts';
 import { Form, ItemGroup } from '@lobehub/ui';
-import { Form as AFrom, Select, Switch } from 'antd';
-import isEqual from 'fast-deep-equal';
+import { Select, Switch } from 'antd';
 import { debounce } from 'lodash-es';
 import { Mic } from 'lucide-react';
-import { memo, useEffect } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
 import { useStore } from '../store';
+import { useAgentSyncSettings } from '../useSyncAgemtSettings';
 import SelectWithTTSPreview from './SelectWithTTSPreview';
 import { ttsOptions } from './options';
 
@@ -22,21 +22,23 @@ const { openaiVoiceOptions, localeOptions } = VoiceList;
 
 const AgentTTS = memo(() => {
   const { t } = useTranslation('setting');
-  const updateConfig = useStore((s) => s.setAgentConfig);
-  const [form] = AFrom.useForm();
+  const [form] = Form.useForm();
   const voiceList = useUserStore((s) => {
     const locale = settingsSelectors.currentLanguage(s);
     return (all?: boolean) => new VoiceList(all ? undefined : locale);
   });
-  const config = useStore((s) => s.config, isEqual);
+  const [showAllLocaleVoice, ttsService, updateConfig] = useStore((s) => [
+    s.config.tts.showAllLocaleVoice,
+    s.config.tts.ttsService,
+    s.setAgentConfig,
+  ]);
 
-  useEffect(() => {
-    form.setFieldsValue(config);
-  }, [config]);
+  useAgentSyncSettings(form);
 
-  const showAllLocaleVoice = config.tts.showAllLocaleVoice;
-
-  const { edgeVoiceOptions, microsoftVoiceOptions } = voiceList(showAllLocaleVoice);
+  const { edgeVoiceOptions, microsoftVoiceOptions } = useMemo(
+    () => voiceList(showAllLocaleVoice),
+    [showAllLocaleVoice],
+  );
 
   const tts: ItemGroup = {
     children: [
@@ -49,7 +51,7 @@ const AgentTTS = memo(() => {
       {
         children: <Switch />,
         desc: t('settingTTS.showAllLocaleVoice.desc'),
-        hidden: config.tts.ttsService === 'openai',
+        hidden: ttsService === 'openai',
         label: t('settingTTS.showAllLocaleVoice.title'),
         minWidth: undefined,
         name: [TTS_SETTING_KEY, 'showAllLocaleVoice'],
@@ -58,23 +60,23 @@ const AgentTTS = memo(() => {
       {
         children: <SelectWithTTSPreview options={openaiVoiceOptions} server={'openai'} />,
         desc: t('settingTTS.voice.desc'),
-        hidden: config.tts.ttsService !== 'openai',
+        hidden: ttsService !== 'openai',
         label: t('settingTTS.voice.title'),
         name: [TTS_SETTING_KEY, 'voice', 'openai'],
       },
       {
         children: <SelectWithTTSPreview options={edgeVoiceOptions} server={'edge'} />,
         desc: t('settingTTS.voice.desc'),
         divider: false,
-        hidden: config.tts.ttsService !== 'edge',
+        hidden: ttsService !== 'edge',
         label: t('settingTTS.voice.title'),
         name: [TTS_SETTING_KEY, 'voice', 'edge'],
       },
       {
         children: <SelectWithTTSPreview options={microsoftVoiceOptions} server={'microsoft'} />,
         desc: t('settingTTS.voice.desc'),
         divider: false,
-        hidden: config.tts.ttsService !== 'microsoft',
+        hidden: ttsService !== 'microsoft',
         label: t('settingTTS.voice.title'),
         name: [TTS_SETTING_KEY, 'voice', 'microsoft'],
       },

diff --git a/src/features/AgentSetting/useSyncAgemtSettings.ts b/src/features/AgentSetting/useSyncAgemtSettings.ts
@@ -0,0 +1,14 @@
+import { FormInstance } from 'antd/es/form/hooks/useForm';
+import isEqual from 'fast-deep-equal';
+import { useLayoutEffect } from 'react';
+
+import { useStore } from './store';
+
+export const useAgentSyncSettings = (form: FormInstance) => {
+  const config = useStore((s) => s.config, isEqual);
+  useLayoutEffect(() => {
+    form.setFieldsValue(config);
+  }, [config]);
+
+  return config;
+};