@lobehub/chat 1.57.0 → 1.58.0

package/src/app/[variants]/(main)/chat/settings/page.tsx

@@ -1,7 +1,97 @@
-import EditPage from './features/EditPage';
+'use client';
 
-const Page = () => {
-  return <EditPage />;
-};
+import { TabsNav } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
-export default Page;
+import PageTitle from '@/components/PageTitle';
+import { INBOX_SESSION_ID } from '@/const/session';
+import { AgentSettingsProvider } from '@/features/AgentSetting';
+import AgentChat from '@/features/AgentSetting/AgentChat';
+import AgentMeta from '@/features/AgentSetting/AgentMeta';
+import AgentModal from '@/features/AgentSetting/AgentModal';
+import AgentPlugin from '@/features/AgentSetting/AgentPlugin';
+import AgentPrompt from '@/features/AgentSetting/AgentPrompt';
+import AgentTTS from '@/features/AgentSetting/AgentTTS';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { ChatSettingsTabs } from '@/store/global/initialState';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+import { useSessionStore } from '@/store/session';
+import { sessionMetaSelectors } from '@/store/session/selectors';
+
+const EditPage = memo(() => {
+  const { t } = useTranslation('setting');
+  const [tab, setTab] = useState(ChatSettingsTabs.Prompt);
+
+  const [id, updateAgentMeta, title] = useSessionStore((s) => [
+    s.activeId,
+    s.updateSessionMeta,
+    sessionMetaSelectors.currentAgentTitle(s),
+  ]);
+  const [useFetchAgentConfig, updateAgentConfig] = useAgentStore((s) => [
+    s.useFetchAgentConfig,
+    s.updateAgentConfig,
+  ]);
+
+  const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
+  const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
+
+  const { isLoading } = useFetchAgentConfig(id);
+  const { enablePlugins } = useServerConfigStore(featureFlagsSelectors);
+
+  return (
+    <>
+      <PageTitle title={t('header.sessionWithName', { name: title })} />
+
+      <TabsNav
+        items={[
+          {
+            key: ChatSettingsTabs.Prompt,
+            label: t('settingAgent.prompt.title'),
+          },
+          (id !== INBOX_SESSION_ID && {
+            key: ChatSettingsTabs.Meta,
+            label: t('settingAgent.title'),
+          }) as any,
+          {
+            key: ChatSettingsTabs.Chat,
+            label: t('settingChat.title'),
+          },
+          {
+            key: ChatSettingsTabs.Modal,
+            label: t('settingModel.title'),
+          },
+          {
+            key: ChatSettingsTabs.TTS,
+            label: t('settingTTS.title'),
+          },
+          (enablePlugins && {
+            key: ChatSettingsTabs.Plugin,
+            label: t('settingPlugin.title'),
+          }) as any,
+        ]}
+        onChange={(value) => setTab(value as ChatSettingsTabs)}
+        variant={'compact'}
+      />
+      <AgentSettingsProvider
+        config={config}
+        id={id}
+        loading={isLoading}
+        meta={meta}
+        onConfigChange={updateAgentConfig}
+        onMetaChange={updateAgentMeta}
+      >
+        {tab === ChatSettingsTabs.Prompt && <AgentPrompt modal />}
+        {tab === ChatSettingsTabs.Meta && <AgentMeta />}
+        {tab === ChatSettingsTabs.Chat && <AgentChat />}
+        {tab === ChatSettingsTabs.Modal && <AgentModal />}
+        {tab === ChatSettingsTabs.TTS && <AgentTTS />}
+        {tab === ChatSettingsTabs.Plugin && <AgentPlugin />}
+      </AgentSettingsProvider>
+    </>
+  );
+});
+
+export default EditPage;

package/src/app/[variants]/(main)/settings/provider/(detail)/azureai/page.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+
+import { FormInput, FormPassword } from '@/components/FormInput';
+import { AzureAIProviderCard } from '@/config/modelProviders';
+import { ModelProvider } from '@/libs/agent-runtime';
+import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
+
+import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
+import { SkeletonInput } from '../../features/ProviderConfig';
+import { ProviderItem } from '../../type';
+import ProviderDetail from '../[id]';
+
+const providerKey = ModelProvider.AzureAI;
+
+const useProviderCard = (): ProviderItem => {
+  const { t } = useTranslation('modelProvider');
+
+  const isLoading = useAiInfraStore(aiProviderSelectors.isAiProviderConfigLoading(providerKey));
+
+  return {
+    ...AzureAIProviderCard,
+    apiKeyItems: [
+      {
+        children: isLoading ? (
+          <SkeletonInput />
+        ) : (
+          <FormPassword
+            autoComplete={'new-password'}
+            placeholder={t('azureai.token.placeholder')}
+          />
+        ),
+        desc: t('azureai.token.desc'),
+        label: t('azureai.token.title'),
+        name: [KeyVaultsConfigKey, LLMProviderApiTokenKey],
+      },
+      {
+        children: isLoading ? (
+          <SkeletonInput />
+        ) : (
+          <FormInput allowClear placeholder={t('azureai.endpoint.placeholder')} />
+        ),
+        desc: t('azureai.endpoint.desc'),
+        label: t('azureai.endpoint.title'),
+        name: [KeyVaultsConfigKey, LLMProviderBaseUrlKey],
+      },
+    ],
+  };
+};
+
+const Page = () => {
+  const card = useProviderCard();
+
+  return <ProviderDetail {...card} />;
+};
+
+export default Page;

package/src/app/[variants]/(main)/settings/provider/features/CreateNewProvider/index.tsx

@@ -1,6 +1,7 @@
+import { ProviderIcon } from '@lobehub/icons';
 import { FormModal, Icon } from '@lobehub/ui';
 import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
-import { App, Input, Radio } from 'antd';
+import { App, Input, Select } from 'antd';
 import { BrainIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
@@ -87,15 +88,25 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
   const configItems: FormItemProps[] = [
     {
       children: (
-        <Radio.Group
+        <Select
+          optionRender={({ label, value }) => (
+            <Flexbox align={'center'} gap={8} horizontal>
+              <ProviderIcon provider={value as string} size={18} />
+              {label}
+            </Flexbox>
+          )}
           options={[
             { label: 'OpenAI', value: 'openai' },
             { label: 'Anthropic', value: 'anthropic' },
             { label: 'Ollama', value: 'ollama' },
+            // { label: 'Azure AI', value: 'azureai' },
           ]}
+          placeholder={t('createNewAiProvider.sdkType.placeholder')}
+          variant={'filled'}
         />
       ),
       label: t('createNewAiProvider.sdkType.title'),
+      minWidth: 400,
       name: 'sdkType',
       rules: [{ message: t('createNewAiProvider.sdkType.required'), required: true }],
     },

package/src/app/[variants]/(main)/settings/provider/features/ModelList/CreateNewModelModal/Form.tsx

@@ -11,12 +11,12 @@ interface ModelConfigFormProps {
   idEditable?: boolean;
   initialValues?: ChatModelCard;
   onFormInstanceReady: (instance: FormInstance) => void;
-  showAzureDeployName?: boolean;
+  showDeployName?: boolean;
   type?: AiModelType;
 }
 
 const ModelConfigForm = memo<ModelConfigFormProps>(
-  ({ showAzureDeployName, idEditable = true, onFormInstanceReady, initialValues }) => {
+  ({ showDeployName, idEditable = true, onFormInstanceReady, initialValues }) => {
     const { t } = useTranslation('modelProvider');
 
     const [formInstance] = Form.useForm();
@@ -55,15 +55,13 @@ const ModelConfigForm = memo<ModelConfigFormProps>(
               placeholder={t('providerModels.item.modelConfig.id.placeholder')}
             />
           </Form.Item>
-          {showAzureDeployName && (
+          {showDeployName && (
             <Form.Item
-              extra={t('providerModels.item.modelConfig.azureDeployName.extra')}
-              label={t('providerModels.item.modelConfig.azureDeployName.title')}
+              extra={t('providerModels.item.modelConfig.deployName.extra')}
+              label={t('providerModels.item.modelConfig.deployName.title')}
               name={['config', 'deploymentName']}
             >
-              <Input
-                placeholder={t('providerModels.item.modelConfig.azureDeployName.placeholder')}
-              />
+              <Input placeholder={t('providerModels.item.modelConfig.deployName.placeholder')} />
             </Form.Item>
           )}
           <Form.Item

package/src/app/[variants]/(main)/settings/provider/features/ModelList/CreateNewModelModal/index.tsx

@@ -1,11 +1,11 @@
 import { Modal } from '@lobehub/ui';
 import { Button, FormInstance } from 'antd';
-import { memo, useState } from 'react';
+import { memo, use, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ModelProvider } from '@/libs/agent-runtime';
 import { useAiInfraStore } from '@/store/aiInfra';
 
+import { ProviderSettingsContext } from '../ProviderSettingsContext';
 import ModelConfigForm from './Form';
 
 interface ModelConfigModalProps {
@@ -26,6 +26,8 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ open, setOpen }) => {
     setOpen(false);
   };
 
+  const { showDeployName } = use(ProviderSettingsContext);
+
   return (
     <Modal
       destroyOnClose
@@ -65,10 +67,7 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ open, setOpen }) => {
       title={t('providerModels.createNew.title')}
       zIndex={1251} // Select is 1150
     >
-      <ModelConfigForm
-        onFormInstanceReady={setFormInstance}
-        showAzureDeployName={editingProvider === ModelProvider.Azure}
-      />
+      <ModelConfigForm onFormInstanceReady={setFormInstance} showDeployName={showDeployName} />
     </Modal>
   );
 });

package/src/app/[variants]/(main)/settings/provider/features/ModelList/ModelConfigModal/index.tsx

@@ -1,13 +1,13 @@
 import { Modal } from '@lobehub/ui';
 import { Button, FormInstance } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { memo, useState } from 'react';
+import { memo, use, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ModelProvider } from '@/libs/agent-runtime';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 
 import ModelConfigForm from '../CreateNewModelModal/Form';
+import { ProviderSettingsContext } from '../ProviderSettingsContext';
 
 interface ModelConfigModalProps {
   id: string;
@@ -28,6 +28,7 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ id, open, setOpen }) =>
   const closeModal = () => {
     setOpen(false);
   };
+  const { showDeployName } = use(ProviderSettingsContext);
 
   return (
     <Modal
@@ -66,7 +67,7 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ id, open, setOpen }) =>
         idEditable={false}
         initialValues={model}
         onFormInstanceReady={setFormInstance}
-        showAzureDeployName={editingProvider === ModelProvider.Azure || editingProvider === ModelProvider.Doubao}
+        showDeployName={showDeployName}
         type={model?.type}
       />
     </Modal>

package/src/app/[variants]/(main)/settings/provider/features/ModelList/ProviderSettingsContext.ts

@@ -2,7 +2,9 @@ import { createContext } from 'react';
 
 export interface ProviderSettingsContextValue {
   modelEditable?: boolean;
+  sdkType?: string;
   showAddNewModel?: boolean;
+  showDeployName?: boolean;
   showModelFetcher?: boolean;
 }
 

package/src/app/[variants]/(main)/settings/provider/features/ModelList/index.tsx

@@ -3,7 +3,6 @@
 import { Suspense, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { ProviderSettingsContext } from '@/app/[variants]/(main)/settings/provider/features/ModelList/ProviderSettingsContext';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 
@@ -11,6 +10,7 @@ import DisabledModels from './DisabledModels';
 import EmptyModels from './EmptyModels';
 import EnabledModelList from './EnabledModelList';
 import ModelTitle from './ModelTitle';
+import { ProviderSettingsContext, ProviderSettingsContextValue } from './ProviderSettingsContext';
 import SearchResult from './SearchResult';
 import SkeletonList from './SkeletonList';
 
@@ -41,19 +41,18 @@ const Content = memo<ContentProps>(({ id }) => {
   );
 });
 
-interface ModelListProps {
+interface ModelListProps extends ProviderSettingsContextValue {
   id: string;
-  modelEditable?: boolean;
-  showAddNewModel?: boolean;
-  showModelFetcher?: boolean;
 }
 
 const ModelList = memo<ModelListProps>(
-  ({ id, showModelFetcher, showAddNewModel, modelEditable = true }) => {
+  ({ id, showModelFetcher, sdkType, showAddNewModel, showDeployName, modelEditable = true }) => {
     const mobile = useIsMobile();
 
     return (
-      <ProviderSettingsContext value={{ modelEditable, showAddNewModel, showModelFetcher }}>
+      <ProviderSettingsContext
+        value={{ modelEditable, sdkType, showAddNewModel, showDeployName, showModelFetcher }}
+      >
         <Flexbox gap={16} paddingInline={mobile ? 12 : 0}>
           <ModelTitle
             provider={id}

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -127,7 +127,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
       defaultShowBrowserRequest,
       disableBrowserRequest,
       showChecker = true,
-    } = settings;
+    } = settings || {};
     const { t } = useTranslation('modelProvider');
     const [form] = Form.useForm();
     const { cx, styles, theme } = useStyles();

package/src/config/aiModels/azureai.ts

@@ -0,0 +1,18 @@
+import { AIChatModelCard } from '@/types/aiModel';
+
+const azureChatModels: AIChatModelCard[] = [
+  {
+    abilities: {
+      reasoning: true,
+    },
+    contextWindowTokens: 128_000,
+    displayName: 'DeepSeek R1',
+    id: 'DeepSeek-R1',
+    maxOutput: 4096,
+    type: 'chat',
+  },
+];
+
+export const allModels = [...azureChatModels];
+
+export default allModels;

package/src/config/aiModels/index.ts

@@ -4,6 +4,7 @@ import { default as ai21 } from './ai21';
 import { default as ai360 } from './ai360';
 import { default as anthropic } from './anthropic';
 import { default as azure } from './azure';
+import { default as azureai } from './azureai';
 import { default as baichuan } from './baichuan';
 import { default as bedrock } from './bedrock';
 import { default as cloudflare } from './cloudflare';
@@ -68,6 +69,7 @@ export const LOBE_DEFAULT_MODEL_LIST = buildDefaultModelList({
   ai360,
   anthropic,
   azure,
+  azureai,
   baichuan,
   bedrock,
   cloudflare,
@@ -113,6 +115,7 @@ export { default as ai21 } from './ai21';
 export { default as ai360 } from './ai360';
 export { default as anthropic } from './anthropic';
 export { default as azure } from './azure';
+export { default as azureai } from './azureai';
 export { default as baichuan } from './baichuan';
 export { default as bedrock } from './bedrock';
 export { default as cloudflare } from './cloudflare';

package/src/config/modelProviders/azure.ts

@@ -58,10 +58,11 @@ const Azure: ModelProviderCard = {
     'Azure 提供多种先进的AI模型，包括GPT-3.5和最新的GPT-4系列，支持多种数据类型和复杂任务，致力于安全、可靠和可持续的AI解决方案。',
   id: 'azure',
   modelsUrl: 'https://learn.microsoft.com/azure/ai-services/openai/concepts/models',
-  name: 'Azure',
+  name: 'Azure OpenAI',
   settings: {
     defaultShowBrowserRequest: true,
     sdkType: 'azure',
+    showDeployName: true,
   },
   url: 'https://azure.microsoft.com',
 };

package/src/config/modelProviders/azureai.ts

@@ -0,0 +1,19 @@
+import { ModelProviderCard } from '@/types/llm';
+
+// ref: https://learn.microsoft.com/azure/ai-services/openai/concepts/models
+const Azure: ModelProviderCard = {
+  chatModels: [],
+  description:
+    'Azure 提供多种先进的AI模型，包括GPT-3.5和最新的GPT-4系列，支持多种数据类型和复杂任务，致力于安全、可靠和可持续的AI解决方案。',
+  id: 'azureai',
+  modelsUrl: 'https://ai.azure.com/explore/models',
+  name: 'Azure AI',
+  settings: {
+    defaultShowBrowserRequest: true,
+    sdkType: 'azureai',
+    showDeployName: true,
+  },
+  url: 'https://ai.azure.com',
+};
+
+export default Azure;

package/src/config/modelProviders/index.ts

@@ -4,6 +4,7 @@ import Ai21Provider from './ai21';
 import Ai360Provider from './ai360';
 import AnthropicProvider from './anthropic';
 import AzureProvider from './azure';
+import AzureAIProvider from './azureai';
 import BaichuanProvider from './baichuan';
 import BedrockProvider from './bedrock';
 import CloudflareProvider from './cloudflare';
@@ -92,6 +93,7 @@ export const LOBE_DEFAULT_MODEL_LIST: ChatModelCard[] = [
 export const DEFAULT_MODEL_PROVIDER_LIST = [
   OpenAIProvider,
   { ...AzureProvider, chatModels: [] },
+  AzureAIProvider,
   OllamaProvider,
   VLLMProvider,
   AnthropicProvider,
@@ -148,6 +150,7 @@ export { default as Ai21ProviderCard } from './ai21';
 export { default as Ai360ProviderCard } from './ai360';
 export { default as AnthropicProviderCard } from './anthropic';
 export { default as AzureProviderCard } from './azure';
+export { default as AzureAIProviderCard } from './azureai';
 export { default as BaichuanProviderCard } from './baichuan';
 export { default as BedrockProviderCard } from './bedrock';
 export { default as CloudflareProviderCard } from './cloudflare';

package/src/database/server/models/aiProvider.ts

@@ -1,4 +1,5 @@
 import { and, asc, desc, eq } from 'drizzle-orm/expressions';
+import { isEmpty } from 'lodash-es';
 
 import { LobeChatDatabase } from '@/database/type';
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -207,6 +208,7 @@ export class AiProviderModel {
       ...result,
       fetchOnClient: typeof result.fetchOnClient === 'boolean' ? result.fetchOnClient : undefined,
       keyVaults,
+      settings: isEmpty(result.settings) ? undefined : result.settings,
     } as AiProviderDetailItem;
   };
 

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, Skeleton } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { isString } from 'lodash-es';
 import { Wand2 } from 'lucide-react';
@@ -27,7 +27,11 @@ const AgentMeta = memo(() => {
     s.autocompleteMeta,
     s.autocompleteAllMeta,
   ]);
-  const [isInbox, loading] = useStore((s) => [s.id === INBOX_SESSION_ID, s.autocompleteLoading]);
+  const [isInbox, isIniting, autocompleteLoading] = useStore((s) => [
+    s.id === INBOX_SESSION_ID,
+    s.loading,
+    s.autocompleteLoading,
+  ]);
   const meta = useStore((s) => s.meta, isEqual);
 
   if (isInbox) return;
@@ -59,10 +63,12 @@ const AgentMeta = memo(() => {
   const autocompleteItems: FormItemProps[] = basic.map((item) => {
     const AutoGenerate = item.Render;
     return {
-      children: (
+      children: isIniting ? (
+        <Skeleton.Button active block size={'small'} />
+      ) : (
         <AutoGenerate
           canAutoGenerate={hasSystemRole}
-          loading={loading[item.key as keyof SessionLoadingState]}
+          loading={autocompleteLoading[item.key as keyof SessionLoadingState]}
           onChange={item.onChange}
           onGenerate={() => {
             autocompleteMeta(item.key as keyof typeof meta);
@@ -78,11 +84,13 @@ const AgentMeta = memo(() => {
   const metaData: ItemGroup = {
     children: [
       {
-        children: (
+        children: isIniting ? (
+          <Skeleton.Button active block size={'small'} />
+        ) : (
           <AutoGenerateAvatar
             background={meta.backgroundColor}
             canAutoGenerate={hasSystemRole}
-            loading={loading['avatar']}
+            loading={autocompleteLoading['avatar']}
             onChange={(avatar) => updateMeta({ avatar })}
             onGenerate={() => autocompleteMeta('avatar')}
             value={meta.avatar}
@@ -92,7 +100,9 @@ const AgentMeta = memo(() => {
         minWidth: undefined,
       },
       {
-        children: (
+        children: isIniting ? (
+          <Skeleton.Button active block size={'small'} />
+        ) : (
           <BackgroundSwatches
             backgroundColor={meta.backgroundColor}
             onChange={(backgroundColor) => updateMeta({ backgroundColor })}
@@ -103,7 +113,7 @@ const AgentMeta = memo(() => {
       },
       ...autocompleteItems,
     ],
-    extra: (
+    extra: !isIniting && (
       <Tooltip
         title={
           !hasSystemRole
@@ -114,7 +124,7 @@ const AgentMeta = memo(() => {
         <Button
           disabled={!hasSystemRole}
           icon={<Icon icon={Wand2} />}
-          loading={Object.values(loading).some((i) => !!i)}
+          loading={Object.values(autocompleteLoading).some((i) => !!i)}
           onClick={(e: any) => {
             e.stopPropagation();
 

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { EditableMessage, Form } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -40,7 +40,37 @@ const AgentPrompt = memo<{ modal?: boolean }>(({ modal }) => {
   const { t } = useTranslation('setting');
   const { styles } = useStyles();
   const [editing, setEditing] = useState(false);
-  const [systemRole, updateConfig] = useStore((s) => [s.config.systemRole, s.setAgentConfig]);
+  const [loading, systemRole, updateConfig] = useStore((s) => [
+    s.loading,
+    s.config.systemRole,
+    s.setAgentConfig,
+  ]);
+
+  if (loading) {
+    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

package/src/features/AgentSetting/AgentSettings.tsx

@@ -5,23 +5,22 @@ import AgentMeta from './AgentMeta';
 import AgentModal from './AgentModal';
 import AgentPlugin from './AgentPlugin';
 import AgentPrompt from './AgentPrompt';
+import { AgentSettingsProvider } from './AgentSettingsProvider';
 import AgentTTS from './AgentTTS';
-import StoreUpdater, { StoreUpdaterProps } from './StoreUpdater';
-import { Provider, createStore } from './store';
+import { StoreUpdaterProps } from './StoreUpdater';
 
 type AgentSettingsProps = StoreUpdaterProps;
 
 export const AgentSettings = (props: AgentSettingsProps) => {
   const { enablePlugins } = useServerConfigStore(featureFlagsSelectors);
   return (
-    <Provider createStore={createStore}>
-      <StoreUpdater {...props} />
+    <AgentSettingsProvider {...props}>
       <AgentPrompt />
       <AgentMeta />
       <AgentChat />
       <AgentModal />
       <AgentTTS />
       {enablePlugins && <AgentPlugin />}
-    </Provider>
+    </AgentSettingsProvider>
   );
 };

package/src/features/AgentSetting/AgentSettingsProvider.tsx

@@ -0,0 +1,17 @@
+import { ReactNode, memo } from 'react';
+
+import StoreUpdater, { StoreUpdaterProps } from './StoreUpdater';
+import { Provider, createStore } from './store';
+
+interface AgentSettingsProps extends StoreUpdaterProps {
+  children: ReactNode;
+}
+
+export const AgentSettingsProvider = memo<AgentSettingsProps>(({ children, ...props }) => {
+  return (
+    <Provider createStore={createStore}>
+      <StoreUpdater {...props} />
+      {children}
+    </Provider>
+  );
+});