@lobehub/chat 1.83.8 → 1.84.0

package/src/features/AgentSetting/AgentPrompt/index.tsx

@@ -1,122 +1,31 @@
 'use client';
 
-import { EditableMessage, Form } from '@lobehub/ui';
-import { Button, Skeleton } from 'antd';
-import { createStyles } from 'antd-style';
+import { Button, Form } from '@lobehub/ui';
+import { EditableMessage } from '@lobehub/ui/chat';
+import { PenLineIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
+import Tokens from '@/features/AgentSetting/AgentPrompt/TokenTag';
+import { useServerConfigStore } from '@/store/serverConfig';
 
 import { useStore } from '../store';
 
-export const useStyles = createStyles(({ css, token, responsive }) => ({
-  container: css`
-    position: relative;
-    width: 100%;
-    border-radius: ${token.borderRadiusLG}px;
-    background: ${token.colorFillSecondary};
-  `,
-  content: css`
-    z-index: 2;
-    padding: 8px;
-    border-radius: ${token.borderRadiusLG - 1}px;
-    background: ${token.colorBgContainer};
-  `,
-  markdown: css`
-    border: unset;
-  `,
-  wrapper: css`
-    width: 100%;
-    ${responsive.mobile} {
-      padding-block: 8px;
-      padding-inline: 4px;
-    }
-  `,
-}));
-
-const AgentPrompt = memo<{ modal?: boolean }>(({ modal }) => {
+const AgentPrompt = memo(() => {
   const { t } = useTranslation('setting');
-  const { styles } = useStyles();
+  const isMobile = useServerConfigStore((s) => s.isMobile);
   const [editing, setEditing] = useState(false);
-  const [loading, systemRole, updateConfig] = useStore((s) => [
-    s.loading,
-    s.config.systemRole,
-    s.setAgentConfig,
-  ]);
-
-  if (loading) {
-    if (modal)
-      return (
-        <Form
-          items={[
-            {
-              children: (
-                <>
-                  <div style={{ height: 24 }} />
-                  <Skeleton active title={false} />
-                </>
-              ),
-              title: t('settingAgent.prompt.title'),
-            },
-          ]}
-          itemsType={'group'}
-          variant={'pure'}
-          {...FORM_STYLE}
-        />
-      );
-
-    return (
-      <div className={styles.wrapper}>
-        <Flexbox className={styles.container} padding={4}>
-          <Flexbox horizontal justify={'space-between'} paddingBlock={8} paddingInline={12}>
-            <h1 style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 4 }}>
-              {t('settingAgent.prompt.title')}
-            </h1>
-          </Flexbox>
-          <Flexbox
-            align={'center'}
-            className={styles.content}
-            flex={1}
-            gap={16}
-            horizontal
-            justify={'space-between'}
-            padding={12}
-            wrap={'wrap'}
-          >
-            <Skeleton active style={{ paddingTop: 12 }} title={false} />
-          </Flexbox>
-        </Flexbox>
-      </div>
-    );
-  }
-
-  const content = (
-    <EditableMessage
-      classNames={{
-        markdown: styles.markdown,
-      }}
-      editButtonSize={'small'}
-      editing={editing}
-      height={'auto'}
-      inputType={'pure'}
-      onChange={(e) => {
-        updateConfig({ systemRole: e });
-      }}
-      onEditingChange={setEditing}
-      placeholder={t('settingAgent.prompt.placeholder')}
-      showEditWhenEmpty
-      text={{
-        cancel: t('cancel', { ns: 'common' }),
-        confirm: t('ok', { ns: 'common' }),
-      }}
-      value={systemRole}
-    />
-  );
+  const [systemRole, updateConfig] = useStore((s) => [s.config.systemRole, s.setAgentConfig]);
 
   const editButton = !editing && !!systemRole && (
     <Button
+      icon={PenLineIcon}
+      iconPosition={'end'}
+      iconProps={{
+        size: 12,
+      }}
       onClick={(e) => {
         e.stopPropagation();
         setEditing(true);
@@ -128,50 +37,42 @@ const AgentPrompt = memo<{ modal?: boolean }>(({ modal }) => {
     </Button>
   );
 
-  if (modal)
-    return (
-      <Form
-        items={[
-          {
-            children: (
-              <>
-                <div style={{ height: 24 }} />
-                {content}
-              </>
-            ),
-            extra: editButton,
-            title: t('settingAgent.prompt.title'),
-          },
-        ]}
-        itemsType={'group'}
-        variant={'pure'}
-        {...FORM_STYLE}
-      />
-    );
-
   return (
-    <div className={styles.wrapper}>
-      <Flexbox className={styles.container} padding={4}>
-        <Flexbox horizontal justify={'space-between'} paddingBlock={8} paddingInline={12}>
-          <h1 style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 4 }}>
-            {t('settingAgent.prompt.title')}
-          </h1>
-          {editButton}
-        </Flexbox>
-        <Flexbox
-          align={'center'}
-          className={styles.content}
-          flex={1}
-          gap={16}
-          horizontal
-          justify={'space-between'}
-          padding={12}
-          wrap={'wrap'}
-        >
-          {content}
-        </Flexbox>
-      </Flexbox>
-    </div>
+    <Form
+      items={[
+        {
+          children: (
+            <Flexbox paddingBlock={isMobile ? 16 : 0}>
+              <EditableMessage
+                editing={editing}
+                height={'auto'}
+                markdownProps={{
+                  variant: 'chat',
+                }}
+                onChange={(e) => {
+                  updateConfig({ systemRole: e });
+                }}
+                onEditingChange={setEditing}
+                placeholder={t('settingAgent.prompt.placeholder')}
+                showEditWhenEmpty
+                text={{
+                  cancel: t('cancel', { ns: 'common' }),
+                  confirm: t('ok', { ns: 'common' }),
+                }}
+                value={systemRole}
+                variant={'borderless'}
+              />
+              {!editing && !!systemRole && <Tokens value={systemRole} />}
+            </Flexbox>
+          ),
+          extra: editButton,
+          title: t('settingAgent.prompt.title'),
+        },
+      ]}
+      itemsType={'group'}
+      variant={'borderless'}
+      {...FORM_STYLE}
+    />
   );
 });
 

package/src/features/AgentSetting/AgentSettings.tsx

@@ -1,26 +1,30 @@
-import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+import { Skeleton } from 'antd';
+import { Suspense, memo } from 'react';
 
-import AgentChat from './AgentChat';
-import AgentMeta from './AgentMeta';
-import AgentModal from './AgentModal';
-import AgentPlugin from './AgentPlugin';
-import AgentPrompt from './AgentPrompt';
+import { ChatSettingsTabs } from '@/store/global/initialState';
+import { useServerConfigStore } from '@/store/serverConfig';
+
+import AgentSettingsContent from './AgentSettingsContent';
 import { AgentSettingsProvider } from './AgentSettingsProvider';
-import AgentTTS from './AgentTTS';
 import { StoreUpdaterProps } from './StoreUpdater';
 
-type AgentSettingsProps = StoreUpdaterProps;
+export interface AgentSettingsProps extends StoreUpdaterProps {
+  tab: ChatSettingsTabs;
+}
+
+const AgentSettings = memo<AgentSettingsProps>(({ tab = ChatSettingsTabs.Meta, ...rest }) => {
+  const isMobile = useServerConfigStore((s) => s.isMobile);
+  const loadingSkeleton = (
+    <Skeleton active paragraph={{ rows: 6 }} style={{ padding: isMobile ? 16 : 0 }} title={false} />
+  );
 
-export const AgentSettings = (props: AgentSettingsProps) => {
-  const { enablePlugins } = useServerConfigStore(featureFlagsSelectors);
   return (
-    <AgentSettingsProvider {...props}>
-      <AgentPrompt />
-      <AgentMeta />
-      <AgentChat />
-      <AgentModal />
-      <AgentTTS />
-      {enablePlugins && <AgentPlugin />}
+    <AgentSettingsProvider {...rest}>
+      <Suspense fallback={loadingSkeleton}>
+        <AgentSettingsContent loadingSkeleton={loadingSkeleton} tab={tab} />
+      </Suspense>
     </AgentSettingsProvider>
   );
-};
+});
+
+export default AgentSettings;

package/src/features/AgentSetting/AgentSettingsContent.tsx

@@ -0,0 +1,39 @@
+import { ReactNode, memo } from 'react';
+
+import { useStore } from '@/features/AgentSetting/store';
+import { ChatSettingsTabs } from '@/store/global/initialState';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+
+import AgentChat from './AgentChat';
+import AgentMeta from './AgentMeta';
+import AgentModal from './AgentModal';
+import AgentOpening from './AgentOpening';
+import AgentPlugin from './AgentPlugin';
+import AgentPrompt from './AgentPrompt';
+import AgentTTS from './AgentTTS';
+
+export interface AgentSettingsContentProps {
+  loadingSkeleton: ReactNode;
+  tab: ChatSettingsTabs;
+}
+
+const AgentSettingsContent = memo<AgentSettingsContentProps>(({ tab, loadingSkeleton }) => {
+  const loading = useStore((s) => s.loading);
+  const { enablePlugins } = useServerConfigStore(featureFlagsSelectors);
+
+  if (loading) return loadingSkeleton;
+
+  return (
+    <>
+      {tab === ChatSettingsTabs.Meta && <AgentMeta />}
+      {tab === ChatSettingsTabs.Prompt && <AgentPrompt />}
+      {tab === ChatSettingsTabs.Opening && <AgentOpening />}
+      {tab === ChatSettingsTabs.Chat && <AgentChat />}
+      {tab === ChatSettingsTabs.Modal && <AgentModal />}
+      {tab === ChatSettingsTabs.TTS && <AgentTTS />}
+      {enablePlugins && tab === ChatSettingsTabs.Plugin && <AgentPlugin />}
+    </>
+  );
+});
+
+export default AgentSettingsContent;

package/src/features/AgentSetting/AgentTTS/SelectWithTTSPreview.tsx

@@ -1,6 +1,6 @@
 import { AudioPlayer } from '@lobehub/tts/react';
-import { Alert, Highlighter } from '@lobehub/ui';
-import { Button, RefSelectProps, Select, SelectProps } from 'antd';
+import { Alert, Button, Highlighter, Select, SelectProps } from '@lobehub/ui';
+import { RefSelectProps } from 'antd';
 import { useTheme } from 'antd-style';
 import { forwardRef, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -79,8 +79,11 @@ const SelectWithTTSPreview = forwardRef<RefSelectProps, SelectWithTTSPreviewProp
             allowPause={false}
             audio={audio}
             buttonActive
-            buttonSize={{ blockSize: 36, fontSize: 16 }}
-            buttonStyle={{ border: `1px solid ${theme.colorBorder}` }}
+            buttonSize={{ blockSize: 36, size: 16 }}
+            buttonStyle={{
+              background: theme.colorBgContainer,
+              border: `1px solid ${theme.colorBorder}`,
+            }}
             isLoading={isGlobalLoading}
             onInitPlay={start}
             onLoadingStop={stop}
@@ -101,7 +104,7 @@ const SelectWithTTSPreview = forwardRef<RefSelectProps, SelectWithTTSPreviewProp
             closable
             extra={
               error.body && (
-                <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+                <Highlighter actionIconSize={'small'} language={'json'} variant={'borderless'}>
                   {JSON.stringify(error.body, null, 2)}
                 </Highlighter>
               )

package/src/features/AgentSetting/AgentTTS/index.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { VoiceList } from '@lobehub/tts';
-import { Form, ItemGroup } from '@lobehub/ui';
-import { Select, Switch } from 'antd';
-import { debounce } from 'lodash-es';
+import { Form, type FormGroupItemType, Select } from '@lobehub/ui';
+import { Switch } from 'antd';
+import isEqual from 'fast-deep-equal';
 import { Mic } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,8 +12,7 @@ import { FORM_STYLE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
 
-import { useStore } from '../store';
-import { useAgentSyncSettings } from '../useSyncAgemtSettings';
+import { selectors, useStore } from '../store';
 import SelectWithTTSPreview from './SelectWithTTSPreview';
 import { ttsOptions } from './options';
 
@@ -27,20 +26,15 @@ const AgentTTS = memo(() => {
     const locale = globalGeneralSelectors.currentLanguage(s);
     return (all?: boolean) => new VoiceList(all ? undefined : locale);
   });
-  const [showAllLocaleVoice, ttsService, updateConfig] = useStore((s) => [
-    s.config.tts?.showAllLocaleVoice,
-    s.config.tts?.ttsService,
-    s.setAgentConfig,
-  ]);
-
-  useAgentSyncSettings(form);
+  const config = useStore(selectors.currentTtsConfig, isEqual);
+  const updateConfig = useStore((s) => s.setAgentConfig);
 
   const { edgeVoiceOptions, microsoftVoiceOptions } = useMemo(
-    () => voiceList(showAllLocaleVoice),
-    [showAllLocaleVoice],
+    () => voiceList(config.showAllLocaleVoice),
+    [config.showAllLocaleVoice],
   );
 
-  const tts: ItemGroup = {
+  const tts: FormGroupItemType = {
     children: [
       {
         children: <Select options={ttsOptions} />,
@@ -51,8 +45,9 @@ const AgentTTS = memo(() => {
       {
         children: <Switch />,
         desc: t('settingTTS.showAllLocaleVoice.desc'),
-        hidden: ttsService === 'openai',
+        hidden: config.ttsService === 'openai',
         label: t('settingTTS.showAllLocaleVoice.title'),
+        layout: 'horizontal',
         minWidth: undefined,
         name: [TTS_SETTING_KEY, 'showAllLocaleVoice'],
         valuePropName: 'checked',
@@ -60,7 +55,7 @@ const AgentTTS = memo(() => {
       {
         children: <SelectWithTTSPreview options={openaiVoiceOptions} server={'openai'} />,
         desc: t('settingTTS.voice.desc'),
-        hidden: ttsService !== 'openai',
+        hidden: config.ttsService !== 'openai',
         label: t('settingTTS.voice.title'),
         name: [TTS_SETTING_KEY, 'voice', 'openai'],
       },
@@ -68,7 +63,7 @@ const AgentTTS = memo(() => {
         children: <SelectWithTTSPreview options={edgeVoiceOptions} server={'edge'} />,
         desc: t('settingTTS.voice.desc'),
         divider: false,
-        hidden: ttsService !== 'edge',
+        hidden: config.ttsService !== 'edge',
         label: t('settingTTS.voice.title'),
         name: [TTS_SETTING_KEY, 'voice', 'edge'],
       },
@@ -76,7 +71,7 @@ const AgentTTS = memo(() => {
         children: <SelectWithTTSPreview options={microsoftVoiceOptions} server={'microsoft'} />,
         desc: t('settingTTS.voice.desc'),
         divider: false,
-        hidden: ttsService !== 'microsoft',
+        hidden: config.ttsService !== 'microsoft',
         label: t('settingTTS.voice.title'),
         name: [TTS_SETTING_KEY, 'voice', 'microsoft'],
       },
@@ -100,20 +95,24 @@ const AgentTTS = memo(() => {
 
   return (
     <Form
+      footer={
+        <Form.SubmitFooter
+          texts={{
+            reset: t('submitFooter.reset'),
+            submit: t('settingTTS.submit'),
+            unSaved: t('submitFooter.unSaved'),
+            unSavedWarning: t('submitFooter.unSavedWarning'),
+          }}
+        />
+      }
       form={form}
       initialValues={{
-        [TTS_SETTING_KEY]: {
-          voice: {
-            edge: edgeVoiceOptions?.[0].value,
-            microsoft: microsoftVoiceOptions?.[0].value,
-            openai: openaiVoiceOptions?.[0].value,
-          },
-        },
+        [TTS_SETTING_KEY]: config,
       }}
       items={[tts]}
       itemsType={'group'}
-      onValuesChange={debounce(updateConfig, 100)}
-      variant={'pure'}
+      onFinish={updateConfig}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

package/src/features/AgentSetting/AgentTTS/options.tsx

@@ -1,5 +1,5 @@
 import { Azure, OpenAI } from '@lobehub/icons';
-import { SelectProps } from 'antd';
+import type { SelectProps } from '@lobehub/ui';
 
 import { LabelRenderer } from '@/components/ModelSelect';
 

package/src/features/AgentSetting/index.tsx

@@ -1,3 +1,4 @@
-export { AgentSettings } from './AgentSettings';
+export { default as AgentCategory } from './AgentCategory';
+export { default as AgentSettings } from './AgentSettings';
 export { AgentSettingsProvider } from './AgentSettingsProvider';
 export type { AgentSettingsInstance } from './hooks/useAgentSettings';

package/src/features/AgentSetting/store/action.ts

@@ -16,7 +16,7 @@ import { MessageTextChunk } from '@/utils/fetch';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
-import { SessionLoadingState } from '../store/initialState';
+import { LoadingState } from '../store/initialState';
 import { State, initialState } from './initialState';
 import { ConfigDispatch, configReducer } from './reducers/config';
 import { MetaDataDispatch, metaDataReducer } from './reducers/meta';
@@ -48,18 +48,18 @@ export interface PublicAction {
 }
 
 export interface Action extends PublicAction {
-  dispatchConfig: (payload: ConfigDispatch) => void;
-  dispatchMeta: (payload: MetaDataDispatch) => void;
+  dispatchConfig: (payload: ConfigDispatch) => Promise<void>;
+  dispatchMeta: (payload: MetaDataDispatch) => Promise<void>;
   getCurrentTracePayload: (data: Partial<TracePayload>) => TracePayload;
 
   internal_getSystemAgentForMeta: () => SystemAgentItem;
-  resetAgentConfig: () => void;
+  resetAgentConfig: () => Promise<void>;
 
-  resetAgentMeta: () => void;
-  setAgentConfig: (config: DeepPartial<LobeAgentConfig>) => void;
-  setAgentMeta: (meta: Partial<MetaData>) => void;
+  resetAgentMeta: () => Promise<void>;
+  setAgentConfig: (config: DeepPartial<LobeAgentConfig>) => Promise<void>;
+  setAgentMeta: (meta: Partial<MetaData>) => Promise<void>;
 
-  setChatConfig: (config: Partial<LobeAgentChatConfig>) => void;
+  setChatConfig: (config: Partial<LobeAgentChatConfig>) => Promise<void>;
   streamUpdateMetaArray: (key: keyof MetaData) => any;
   streamUpdateMetaString: (key: keyof MetaData) => any;
   toggleAgentPlugin: (pluginId: string, state?: boolean) => void;
@@ -69,7 +69,7 @@ export interface Action extends PublicAction {
    * @param key - SessionLoadingState 的键
    * @param value - 加载状态的值
    */
-  updateLoadingState: (key: keyof SessionLoadingState, value: boolean) => void;
+  updateLoadingState: (key: keyof LoadingState, value: boolean) => void;
 }
 
 export type Store = Action & State;
@@ -225,19 +225,19 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
       }
     }
   },
-  dispatchConfig: (payload) => {
+  dispatchConfig: async (payload) => {
     const nextConfig = configReducer(get().config, payload);
 
     set({ config: nextConfig }, false, payload);
 
-    get().onConfigChange?.(nextConfig);
+    await get().onConfigChange?.(nextConfig);
   },
-  dispatchMeta: (payload) => {
+  dispatchMeta: async (payload) => {
     const nextValue = metaDataReducer(get().meta, payload);
 
     set({ meta: nextValue }, false, payload);
 
-    get().onMetaChange?.(nextValue);
+    await get().onMetaChange?.(nextValue);
   },
   getCurrentTracePayload: (data) => ({
     sessionId: get().id,
@@ -249,22 +249,22 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     return systemAgentSelectors.agentMeta(useUserStore.getState());
   },
 
-  resetAgentConfig: () => {
-    get().dispatchConfig({ type: 'reset' });
+  resetAgentConfig: async () => {
+    await get().dispatchConfig({ type: 'reset' });
   },
 
-  resetAgentMeta: () => {
-    get().dispatchMeta({ type: 'reset' });
+  resetAgentMeta: async () => {
+    await get().dispatchMeta({ type: 'reset' });
   },
-  setAgentConfig: (config) => {
-    get().dispatchConfig({ config, type: 'update' });
+  setAgentConfig: async (config) => {
+    await get().dispatchConfig({ config, type: 'update' });
   },
-  setAgentMeta: (meta) => {
-    get().dispatchMeta({ type: 'update', value: meta });
+  setAgentMeta: async (meta) => {
+    await get().dispatchMeta({ type: 'update', value: meta });
   },
 
-  setChatConfig: (config) => {
-    get().setAgentConfig({ chatConfig: config });
+  setChatConfig: async (config) => {
+    await get().setAgentConfig({ chatConfig: config });
   },
 
   streamUpdateMetaArray: (key: keyof MetaData) => {
@@ -297,7 +297,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
 
   updateLoadingState: (key, value) => {
     set(
-      { autocompleteLoading: { ...get().autocompleteLoading, [key]: value } },
+      { loadingState: { ...get().loadingState, [key]: value } },
       false,
       t('updateLoadingState', { key, value }),
     );

package/src/features/AgentSetting/store/index.ts

@@ -14,3 +14,5 @@ export type { State } from './initialState';
 export const createStore = () => createWithEqualityFn(subscribeWithSelector(store), shallow);
 
 export const { useStore, useStoreApi, Provider } = createContext<StoreApiWithSelector<Store>>();
+
+export { selectors } from './selectors';

package/src/features/AgentSetting/store/initialState.ts

@@ -3,28 +3,27 @@ import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { LobeAgentConfig } from '@/types/agent';
 import { MetaData } from '@/types/meta';
 
+export type LoadingState = Record<Partial<keyof MetaData> | string, boolean>;
+
 export interface State {
-  autocompleteLoading: SessionLoadingState;
   config: LobeAgentConfig;
   id?: string;
   loading?: boolean;
-
+  loadingState?: LoadingState;
   meta: MetaData;
   onConfigChange?: (config: LobeAgentConfig) => void;
   onMetaChange?: (meta: MetaData) => void;
 }
-export type SessionLoadingState = Record<Partial<keyof MetaData>, boolean>;
 
 export const initialState: State = {
-  // loading 中间态
-  autocompleteLoading: {
+  config: DEFAULT_AGENT_CONFIG,
+  loading: true,
+  loadingState: {
     avatar: false,
     backgroundColor: false,
     description: false,
     tags: false,
     title: false,
   },
-  config: DEFAULT_AGENT_CONFIG,
-  loading: true,
   meta: DEFAULT_AGENT_META,
 };

package/src/features/AgentSetting/store/selectors.ts

@@ -1,14 +1,32 @@
-import { DEFAULT_AGENT_CHAT_CONFIG } from '@/const/settings';
+import { DEFAULT_AGENT_META } from '@/const/meta';
+import {
+  DEFAULT_AGENT_CHAT_CONFIG,
+  DEFAULT_AGENT_CONFIG,
+  DEFAUTT_AGENT_TTS_CONFIG,
+} from '@/const/settings';
 import { LobeAgentChatConfig } from '@/types/agent';
+import { merge } from '@/utils/merge';
 
 import { Store } from './action';
 
 const chatConfig = (s: Store): LobeAgentChatConfig =>
   s.config.chatConfig || DEFAULT_AGENT_CHAT_CONFIG;
 
+const currentAgentConfig = (s: Store) => merge(DEFAULT_AGENT_CONFIG, s.config);
+
+const currentChatConfig = (s: Store) => merge(DEFAULT_AGENT_CHAT_CONFIG, s.config.chatConfig);
+
+const currentMetaConfig = (s: Store) => merge(DEFAULT_AGENT_META, s.meta);
+
+const currentTtsConfig = (s: Store) => merge(DEFAUTT_AGENT_TTS_CONFIG, s.config.tts);
+
 export const DEFAULT_OPENING_QUESTIONS: string[] = [];
 export const selectors = {
   chatConfig,
+  currentAgentConfig,
+  currentChatConfig,
+  currentMetaConfig,
+  currentTtsConfig,
   openingMessage: (s: Store) => s.config.openingMessage,
   openingQuestions: (s: Store) => s.config.openingQuestions || DEFAULT_OPENING_QUESTIONS,
 };

package/src/features/AlertBanner/CloudBanner.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
+import { Button, Icon } from '@lobehub/ui';
 import { useSize } from 'ahooks';
-import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import { ArrowRightIcon } from 'lucide-react';
 import Link from 'next/link';