@lobehub/chat 0.33.0 → 0.34.0

package/src/features/SideBar/TopActions.tsx

@@ -0,0 +1,42 @@
+import { ActionIcon } from '@lobehub/ui';
+import { MessageSquare, Sticker } from 'lucide-react';
+import Router from 'next/router';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { SettingsStore } from '@/store/settings';
+
+export interface TopActionProps {
+  setTab: SettingsStore['switchSideBar'];
+  tab: SettingsStore['sidebarKey'];
+}
+
+const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
+  const { t } = useTranslation('common');
+
+  return (
+    <>
+      <ActionIcon
+        active={tab === 'chat'}
+        icon={MessageSquare}
+        onClick={() => {
+          // 如果已经在 chat 路径下了，那么就不用再跳转了
+          if (Router.asPath.startsWith('/chat')) return;
+
+          Router.push('/');
+        }}
+        size="large"
+        title={t('tab.chat')}
+      />
+      <ActionIcon
+        active={tab === 'market'}
+        icon={Sticker}
+        onClick={() => setTab('market')}
+        size="large"
+        title={t('tab.market')}
+      />
+    </>
+  );
+});
+
+export default TopActions;

package/src/features/SideBar/index.tsx

@@ -1,13 +1,12 @@
-import { ActionIcon, SideNav } from '@lobehub/ui';
-import { MessageSquare, Settings2, Sticker } from 'lucide-react';
-import Router from 'next/router';
+import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { useSettings } from '@/store/settings';
 
-import BottomAction from './BottomAction';
+import BottomActions from './BottomActions';
+import TopActions from './TopActions';
 
 export default memo(() => {
   const [tab, setTab] = useSettings((s) => [s.sidebarKey, s.switchSideBar], shallow);
@@ -15,33 +14,9 @@ export default memo(() => {
   return (
     <SideNav
       avatar={<AvatarWithUpload />}
-      bottomActions={
-        <BottomAction>
-          <ActionIcon active={tab === 'setting'} icon={Settings2} />
-        </BottomAction>
-      }
+      bottomActions={<BottomActions setTab={setTab} tab={tab} />}
       style={{ height: '100vh' }}
-      topActions={
-        <>
-          <ActionIcon
-            active={tab === 'chat'}
-            icon={MessageSquare}
-            onClick={() => {
-              // 如果已经在 chat 路径下了，那么就不用再跳转了
-              if (Router.asPath.startsWith('/chat')) return;
-
-              Router.push('/');
-            }}
-            size="large"
-          />
-          <ActionIcon
-            active={tab === 'market'}
-            icon={Sticker}
-            onClick={() => setTab('market')}
-            size="large"
-          />
-        </>
-      }
+      topActions={<TopActions setTab={setTab} tab={tab} />}
     />
   );
 });

package/src/hooks/useImportConfig.ts

@@ -6,13 +6,13 @@ import { importConfigFile } from '@/utils/config';
 
 export const useImportConfig = () => {
   const importSessions = useSessionStore((s) => s.importSessions);
-  const importSettings = useSettings((s) => s.importSettings);
+  const importAppSettings = useSettings((s) => s.importAppSettings);
 
   const importConfig = (info: any) => {
     importConfigFile(info, (config) => {
       switch (config.exportType) {
         case 'settings': {
-          importSettings(config.state.settings);
+          importAppSettings(config.state.settings);
           break;
         }
 
@@ -24,7 +24,7 @@ export const useImportConfig = () => {
 
         case 'all': {
           importSessions(config.state.sessions);
-          importSettings(config.state.settings);
+          importAppSettings(config.state.settings);
 
           break;
         }

package/src/locales/default/common.ts

@@ -49,6 +49,10 @@ export default {
   sendPlaceholder: '输入聊天内容...',
   setting: '设置',
   share: '分享',
+  tab: {
+    chat: '会话',
+    market: '助手市场',
+  },
   temp: '临时',
   tokenDetail: '系统设定: {{systemRoleToken}} 历史消息: {{chatsToken}}',
   topic: {

package/src/locales/default/setting.ts

@@ -162,4 +162,8 @@ export default {
     },
     title: '主题设置',
   },
+  tab: {
+    agent: '默认角色',
+    common: '通用设置',
+  },
 };

package/src/pages/chat/[id]/Conversation/ChatList/index.tsx

@@ -33,7 +33,7 @@ const List = () => {
   const [displayMode, chatLoadingId, deleteMessage, resendMessage, dispatchMessage] =
     useSessionStore(
       (s) => [
-        agentSelectors.currentAgentConfigSafe(s).displayMode,
+        agentSelectors.currentAgentConfig(s).displayMode,
         s.chatLoadingId,
         s.deleteMessage,
         s.resendMessage,

package/src/pages/chat/[id]/Conversation/Input/Action.tsx

@@ -16,7 +16,7 @@ const InputActions = memo(() => {
     shallow,
   );
   const [model, temperature] = useSessionStore((s) => {
-    const config = agentSelectors.currentAgentConfigSafe(s);
+    const config = agentSelectors.currentAgentConfig(s);
     return [
       config.model,
       config.params.temperature,

package/src/pages/chat/[id]/Header.tsx

@@ -67,7 +67,7 @@ const Header = memo(() => {
             <ActionIcon
               icon={Settings}
               onClick={() => {
-                Router.push(`/chat/${id}/edit`);
+                Router.push(`/chat/${id}/setting`);
               }}
               size={{ fontSize: 24 }}
               title={t('header.session', { ns: 'setting' })}

package/src/pages/chat/[id]/{Config/SideBar.tsx → Sidebar/Inner.tsx}

@@ -40,7 +40,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const SideBar = memo(() => {
+const Inner = memo(() => {
   const [openModal, setOpenModal] = useState(false);
   const { styles } = useStyles();
   const [systemRole, updateAgentConfig] = useSessionStore(
@@ -87,4 +87,4 @@ const SideBar = memo(() => {
   );
 });
 
-export default SideBar;
+export default Inner;

package/src/pages/chat/[id]/{Config → Sidebar}/Topic/TopicContent.tsx

@@ -4,6 +4,7 @@ import { createStyles } from 'antd-style';
 import { MoreVertical, PencilLine, Star, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
@@ -82,7 +83,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
   );
 
   return (
-    <>
+    <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
       <ActionIcon
         color={fav ? theme.colorWarning : undefined}
         fill={fav ? theme.colorWarning : 'transparent'}
@@ -93,7 +94,6 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
         }}
         size={'small'}
       />
-
       {!editing ? (
         <Paragraph
           className={styles.title}
@@ -115,11 +115,9 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
           showEditIcon={false}
           size={'small'}
           style={{
-            background: theme.colorBgContainer,
-            borderRadius: 6,
             height: 28,
-            padding: '0 2px',
           }}
+          type={'pure'}
           value={title}
         />
       )}
@@ -144,7 +142,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
           />
         </Dropdown>
       )}
-    </>
+    </Flexbox>
   );
 });
 

package/src/pages/chat/[id]/{Config → Sidebar}/index.tsx

@@ -7,7 +7,7 @@ import HeaderSpacing from '@/components/HeaderSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useSettings } from '@/store/settings';
 
-import SideBar from './SideBar';
+import Inner from './Inner';
 
 const useStyles = createStyles(({ cx, css, token, stylish }) => ({
   drawer: cx(
@@ -38,7 +38,7 @@ const Config = () => {
     >
       <HeaderSpacing />
       <DraggablePanelContainer style={{ flex: 'none', minWidth: CHAT_SIDEBAR_WIDTH }}>
-        <SideBar />
+        <Inner />
       </DraggablePanelContainer>
     </DraggablePanel>
   );

package/src/pages/chat/[id]/index.page.tsx

@@ -7,9 +7,9 @@ import { sessionSelectors, useSessionStore } from '@/store/session';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Layout from '../layout';
-import Config from './Config';
 import Conversation from './Conversation';
 import Header from './Header';
+import Config from './Sidebar';
 
 const Chat = memo(() => {
   const [title] = useSessionStore((s) => {

package/src/pages/chat/[id]/{edit → setting}/index.page.tsx

@@ -1,3 +1,4 @@
+import isEqual from 'fast-deep-equal';
 import Head from 'next/head';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -6,20 +7,28 @@ import { shallow } from 'zustand/shallow';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
+import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import ChatLayout from '../../layout';
-import AgentConfig from './AgentConfig';
-import AgentMeta from './AgentMeta';
-import AgentPlugin from './AgentPlugin';
-import AgentPrompt from './AgentPrompt';
 import Header from './Header';
 
 const EditPage = memo(() => {
   const { t } = useTranslation('setting');
+  const config = useSessionStore(agentSelectors.currentAgentConfig, isEqual);
+  const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
+  const autocomplete = useSessionStore(agentSelectors.currentAutocomplete, shallow);
+  const [updateAgentConfig, toggleAgentPlugin, updateAgentMeta, title] = useSessionStore(
+    (s) => [
+      s.updateAgentConfig,
+      s.toggleAgentPlugin,
+      s.updateAgentMeta,
+      agentSelectors.currentAgentTitle(s),
+    ],
+    shallow,
+  );
 
-  const title = useSessionStore(agentSelectors.currentAgentTitle, shallow);
   const pageTitle = genSiteHeadTitle(t('header.sessionWithName', { name: title }));
 
   return (
@@ -31,10 +40,15 @@ const EditPage = memo(() => {
         <Header />
         <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'auto' }}>
           <HeaderSpacing height={HEADER_HEIGHT - 16} />
-          <AgentPrompt />
-          <AgentMeta />
-          <AgentConfig />
-          <AgentPlugin />
+          <AgentPrompt config={config} updateConfig={updateAgentConfig} />
+          <AgentMeta
+            autocomplete={autocomplete}
+            config={config}
+            meta={meta}
+            updateMeta={updateAgentMeta}
+          />
+          <AgentConfig config={config} updateConfig={updateAgentConfig} />
+          <AgentPlugin config={config} updateConfig={toggleAgentPlugin} />
         </Flexbox>
       </ChatLayout>
     </>

package/src/pages/settings/Settings/Agent.tsx

@@ -0,0 +1,25 @@
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
+import { settingsSelectors, useSettings } from '@/store/settings';
+
+const Agent = memo(() => {
+  const config = useSettings(settingsSelectors.currentAgentConfig, isEqual);
+  const meta = useSettings(settingsSelectors.currentAgentMeta, isEqual);
+  const [setAgentConfig, setAgentMeta, toggleAgentPlugin] = useSettings(
+    (s) => [s.setAgentConfig, s.setAgentMeta, s.toggleAgentPlugin],
+    shallow,
+  );
+  return (
+    <>
+      <AgentPrompt config={config} updateConfig={setAgentConfig} />
+      <AgentMeta config={config} meta={meta} updateMeta={setAgentMeta} />
+      <AgentConfig config={config} updateConfig={setAgentConfig} />
+      <AgentPlugin config={config} updateConfig={toggleAgentPlugin} />
+    </>
+  );
+});
+
+export default Agent;

package/src/pages/{setting/SettingForm.tsx → settings/Settings/Common.tsx}

@@ -1,23 +1,22 @@
 import { Form, type ItemGroup, ThemeSwitch } from '@lobehub/ui';
-import { Form as AntForm, App, Button, Input, Select, Switch } from 'antd';
+import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
-import { AppWindow, BrainCog, MessagesSquare, Palette, Webhook } from 'lucide-react';
+import { AppWindow, Palette, Webhook } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import SliderWithInput from 'src/components/SliderWithInput';
 import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
+import { DEFAULT_SETTINGS } from '@/const/settings';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { options } from '@/locales/options';
 import { useSessionStore } from '@/store/session';
 import { settingsSelectors, useSettings } from '@/store/settings';
-import { DEFAULT_SETTINGS } from '@/store/settings/initialState';
-import { LanguageModel } from '@/types/llm';
 import { ConfigKeys } from '@/types/settings';
 
-import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
+import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../ThemeSwatches';
 
 type SettingItemGroup = ItemGroup & {
   children: {
@@ -25,7 +24,7 @@ type SettingItemGroup = ItemGroup & {
   }[];
 };
 
-const SettingForm = memo(() => {
+const Common = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
   const clearSessions = useSessionStore((s) => s.clearSessions);
@@ -147,111 +146,6 @@ const SettingForm = memo(() => {
     [settings],
   );
 
-  const chat: SettingItemGroup = useMemo(
-    () => ({
-      children: [
-        {
-          children: <Switch />,
-          label: t('settingChat.enableHistoryCount.title'),
-          minWidth: undefined,
-          name: 'enableHistoryCount',
-          valuePropName: 'checked',
-        },
-        {
-          children: <SliderWithInput max={32} min={0} />,
-          desc: t('settingChat.historyCount.desc'),
-          hidden: !settings.enableHistoryCount,
-          label: t('settingChat.historyCount.title'),
-          name: 'historyCount',
-        },
-        {
-          children: <Switch />,
-          label: t('settingChat.enableCompressThreshold.title'),
-          minWidth: undefined,
-          name: 'enableCompressThreshold',
-          valuePropName: 'checked',
-        },
-        {
-          children: <SliderWithInput max={32} min={0} />,
-          desc: t('settingChat.compressThreshold.desc'),
-          hidden: !settings.enableCompressThreshold,
-          label: t('settingChat.compressThreshold.title'),
-          name: 'compressThreshold',
-        },
-      ],
-      icon: MessagesSquare,
-      title: t('settingChat.title'),
-    }),
-    [settings],
-  );
-
-  const model: SettingItemGroup = useMemo(
-    () => ({
-      children: [
-        {
-          children: (
-            <Select
-              options={Object.values(LanguageModel).map((value) => ({
-                label: value,
-                value,
-              }))}
-            />
-          ),
-          desc: t('settingModel.model.desc'),
-          label: t('settingModel.model.title'),
-          name: 'model',
-          tag: 'model',
-        },
-        {
-          children: <SliderWithInput max={1} min={0} step={0.1} />,
-          desc: t('settingModel.temperature.desc'),
-          label: t('settingModel.temperature.title'),
-          name: 'temperature',
-          tag: 'temperature',
-        },
-        {
-          children: <SliderWithInput max={1} min={0} step={0.1} />,
-          desc: t('settingModel.topP.desc'),
-          label: t('settingModel.topP.title'),
-          name: 'topP',
-          tag: 'top_p',
-        },
-        {
-          children: <SliderWithInput max={2} min={-2} step={0.1} />,
-          desc: t('settingModel.presencePenalty.desc'),
-          label: t('settingModel.presencePenalty.title'),
-          name: 'presencePenalty',
-          tag: 'presence_penalty',
-        },
-        {
-          children: <SliderWithInput max={2} min={-2} step={0.1} />,
-          desc: t('settingModel.frequencyPenalty.desc'),
-          label: t('settingModel.frequencyPenalty.title'),
-          name: 'frequencyPenalty',
-          tag: 'frequency_penalty',
-        },
-        {
-          children: <Switch />,
-          label: t('settingModel.enableMaxTokens.title'),
-          minWidth: undefined,
-          name: 'enableMaxTokens',
-          valuePropName: 'checked',
-        },
-        {
-          children: <SliderWithInput max={32_000} min={0} step={100} />,
-          desc: t('settingModel.maxTokens.desc'),
-          hidden: !settings.enableMaxTokens,
-          label: t('settingModel.maxTokens.title'),
-          name: 'maxTokens',
-          tag: 'max_tokens',
-        },
-      ],
-      icon: BrainCog,
-      title: t('settingModel.title'),
-    }),
-    [settings],
-  );
-
   const system: SettingItemGroup = useMemo(
     () => ({
       children: [
@@ -288,7 +182,7 @@ const SettingForm = memo(() => {
     [settings],
   );
 
-  const items = useMemo(() => [theme, openAI, chat, model, system], [settings]);
+  const items = useMemo(() => [theme, openAI, system], [settings]);
 
   return (
     <Form
@@ -301,4 +195,4 @@ const SettingForm = memo(() => {
   );
 });
 
-export default SettingForm;
+export default Common;

package/src/pages/settings/Settings/index.tsx

@@ -0,0 +1,50 @@
+import { Segmented } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+
+import Agent from './Agent';
+import Common from './Common';
+
+const useStyles = createStyles(({ css, token }) => ({
+  tabs: css`
+    padding: 4px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    &:hover {
+      border-color: ${token.colorBorder};
+    }
+  `,
+}));
+
+enum Tabs {
+  common,
+  agent,
+}
+
+const Settings = memo(() => {
+  const [tab, setTab] = useState<Tabs>(Tabs.common);
+  const { styles } = useStyles();
+  const { t } = useTranslation('setting');
+
+  return (
+    <Center gap={16} width={'100%'}>
+      <div className={styles.tabs}>
+        <Segmented
+          onChange={(e) => setTab(e as Tabs)}
+          options={[
+            { label: t('tab.common'), value: Tabs.common },
+            { label: t('tab.agent'), value: Tabs.agent },
+          ]}
+          value={tab}
+        />
+      </div>
+      {tab === Tabs.common && <Common />}
+      {tab === Tabs.agent && <Agent />}
+    </Center>
+  );
+});
+
+export default Settings;

package/src/pages/{setting → settings}/index.page.tsx

@@ -4,7 +4,7 @@ import { Flexbox } from 'react-layout-kit';
 import HeaderSpacing from '@/components/HeaderSpacing';
 
 import Header from './Header';
-import SettingForm from './SettingForm';
+import Settings from './Settings';
 import SettingLayout from './layout';
 
 const Setting = memo(() => {
@@ -13,7 +13,7 @@ const Setting = memo(() => {
       <Header />
       <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
         <HeaderSpacing />
-        <SettingForm />
+        <Settings />
       </Flexbox>
     </SettingLayout>
   );

package/src/pages/{setting → settings}/layout.tsx

@@ -21,7 +21,7 @@ const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
   useEffect(() => {
     const hasRehydrated = useSettings.persist.hasHydrated();
     if (hasRehydrated) {
-      useSettings.setState({ sidebarKey: 'setting' });
+      useSettings.setState({ sidebarKey: 'settings' });
     }
   }, []);
 

package/src/plugins/searchEngine/Render.tsx

@@ -1,4 +1,5 @@
 import { createStyles } from 'antd-style';
+import Image from 'next/image';
 import Link from 'next/link';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -59,11 +60,12 @@ const Render = memo<PluginRenderProps<Result>>(({ content }) => {
               <Flexbox>
                 <Flexbox align={'center'} gap={12} horizontal>
                   {item.favicon && (
-                    <img
+                    <Image
                       alt={item.title || item.link}
                       className={styles.favicon}
                       height={24}
                       src={item.favicon}
+                      unoptimized
                       width={24}
                     />
                   )}

package/src/store/session/slices/agentConfig/action.ts

@@ -6,9 +6,12 @@ import { SessionStore, sessionSelectors } from '@/store/session';
 import { MetaData } from '@/types/meta';
 import { LobeAgentConfig } from '@/types/session';
 import { fetchPresetTaskResult } from '@/utils/fetch';
+import { setNamespace } from '@/utils/storeDebug';
 
 import { SessionLoadingState } from './initialState';
 
+const t = setNamespace('agentConfig');
+
 /**
  * 代理行为接口
  */
@@ -234,6 +237,10 @@ export const createAgentSlice: StateCreator<
     }
   },
   updateLoadingState: (key, value) => {
-    set({ autocompleteLoading: { ...get().autocompleteLoading, [key]: value } });
+    set(
+      { autocompleteLoading: { ...get().autocompleteLoading, [key]: value } },
+      false,
+      t('updateLoadingState', { key, value }),
+    );
   },
 });

package/src/store/session/slices/agentConfig/initialState.ts

@@ -1,4 +1,4 @@
-import { LanguageModel } from '@/types/llm';
+import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { MetaData } from '@/types/meta';
 import { LobeAgentConfig } from '@/types/session';
 
@@ -8,18 +8,7 @@ export interface AgentConfigState {
   autocompleteLoading: SessionLoadingState;
 }
 
-export const initialLobeAgentConfig: LobeAgentConfig = {
-  displayMode: 'chat',
-  model: LanguageModel.GPT3_5,
-  params: {
-    frequency_penalty: 0,
-    presence_penalty: 0,
-    temperature: 0.6,
-    top_p: 1,
-  },
-  plugins: [],
-  systemRole: '',
-};
+export const initialLobeAgentConfig: LobeAgentConfig = DEFAULT_AGENT_CONFIG;
 
 export const initialAgentConfigState: AgentConfigState = {
   // // loading 中间态