@lobehub/chat 0.33.0 → 0.35.0

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

@@ -0,0 +1,128 @@
+import { Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
+import { Button } from 'antd';
+import { UserCircle, Wand2 } from 'lucide-react';
+import { ReactNode, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import EmojiPicker from '@/components/EmojiPicker';
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { AgentAction, SessionLoadingState } from '@/store/session/slices/agentConfig';
+import { MetaData } from '@/types/meta';
+import { LobeAgentConfig } from '@/types/session';
+
+import AutoGenerateInput from './AutoGenerateInput';
+import BackgroundSwatches from './BackgroundSwatches';
+
+export interface Autocomplete {
+  autocompleteMeta: AgentAction['autocompleteMeta'];
+  autocompleteSessionAgentMeta: AgentAction['autocompleteSessionAgentMeta'];
+  id: string | null;
+  loading: SessionLoadingState;
+}
+
+export interface AgentMetaProps {
+  autocomplete?: Autocomplete;
+  config: LobeAgentConfig;
+  meta: MetaData;
+  updateMeta: AgentAction['updateAgentMeta'];
+}
+
+const AgentMeta = memo<AgentMetaProps>(({ config, meta, updateMeta, autocomplete }) => {
+  const { t } = useTranslation('setting');
+
+  const hasSystemRole = useMemo(() => !!config.systemRole, [config]);
+
+  let extra: ReactNode | undefined;
+
+  const basic = [
+    {
+      key: 'title',
+      label: t('settingAgent.name.title'),
+      placeholder: t('settingAgent.name.placeholder'),
+    },
+    {
+      key: 'description',
+      label: t('settingAgent.description.title'),
+      placeholder: t('settingAgent.description.placeholder'),
+    },
+    // { key: 'tag', label: t('agentTag'), placeholder: t('agentTagPlaceholder') },
+  ];
+
+  const autocompleteItems: FormItemProps[] = basic.map((item) => {
+    const handleGenerate = () => autocomplete?.autocompleteMeta(item.key as keyof typeof meta);
+    return {
+      children: (
+        <AutoGenerateInput
+          loading={autocomplete?.loading[item.key as keyof SessionLoadingState]}
+          onChange={(e) => {
+            updateMeta({ [item.key]: e.target.value });
+          }}
+          onGenerate={autocomplete ? handleGenerate : undefined}
+          placeholder={item.placeholder}
+          value={meta[item.key as keyof typeof meta]}
+        />
+      ),
+      label: item.label,
+    };
+  });
+
+  if (autocomplete) {
+    const { autocompleteSessionAgentMeta, loading, id } = autocomplete;
+
+    extra = (
+      <Tooltip title={t('autoGenerateTooltip', { ns: 'common' })}>
+        <Button
+          disabled={!hasSystemRole}
+          icon={<Icon icon={Wand2} />}
+          loading={Object.values(loading).some((i) => !!i)}
+          onClick={(e: any) => {
+            e.stopPropagation();
+            if (!id) return;
+            autocompleteSessionAgentMeta(id, true);
+          }}
+          size={'small'}
+        >
+          {t('autoGenerate', { ns: 'common' })}
+        </Button>
+      </Tooltip>
+    );
+  }
+
+  const metaData: ItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: (
+            <EmojiPicker
+              avatar={meta.avatar}
+              backgroundColor={meta.backgroundColor}
+              onChange={(avatar) => updateMeta({ avatar })}
+            />
+          ),
+          label: t('settingAgent.avatar.title'),
+          minWidth: undefined,
+        },
+        {
+          children: (
+            <BackgroundSwatches
+              backgroundColor={meta.backgroundColor}
+              onChange={(backgroundColor) => updateMeta({ backgroundColor })}
+            />
+          ),
+          divider: false,
+          label: t('settingAgent.backgroundColor.title'),
+          minWidth: undefined,
+        },
+        ...autocompleteItems,
+      ],
+      extra: extra,
+      icon: UserCircle,
+      title: t('settingAgent.title'),
+    }),
+    [autocompleteItems, extra, meta],
+  );
+
+  return <Form items={[metaData]} {...FORM_STYLE} />;
+});
+
+export default AgentMeta;

package/src/{pages/chat/[id]/edit → features/AgentSetting}/AgentPlugin/index.tsx

@@ -1,21 +1,21 @@
 import { Avatar, Form, ItemGroup } from '@lobehub/ui';
 import { Switch } from 'antd';
-import isEqual from 'fast-deep-equal';
 import { ToyBrick } from 'lucide-react';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { PluginsMap } from '@/plugins';
-import { agentSelectors, useSessionStore } from '@/store/session';
+import { AgentAction } from '@/store/session/slices/agentConfig';
+import { LobeAgentConfig } from '@/types/session';
 
-const PluginList = () => {
-  const { t } = useTranslation('setting');
-
-  const config = useSessionStore(agentSelectors.currentAgentConfigSafe, isEqual);
+export interface AgentPluginProps {
+  config: LobeAgentConfig;
+  updateConfig: AgentAction['toggleAgentPlugin'];
+}
 
-  const toggleAgentPlugin = useSessionStore((s) => s.toggleAgentPlugin, shallow);
+const AgentPlugin = memo<AgentPluginProps>(({ config, updateConfig }) => {
+  const { t } = useTranslation('setting');
 
   const plugin: ItemGroup = useMemo(
     () => ({
@@ -24,7 +24,7 @@ const PluginList = () => {
         children: (
           <Switch
             checked={!config.plugins ? false : config.plugins.includes(item.name)}
-            onChange={() => toggleAgentPlugin(item.name)}
+            onChange={() => updateConfig(item.name)}
           />
         ),
         desc: item.schema.description,
@@ -39,6 +39,6 @@ const PluginList = () => {
   );
 
   return <Form items={[plugin]} {...FORM_STYLE} />;
-};
+});
 
-export default PluginList;
+export default AgentPlugin;

package/src/{pages/chat/[id]/edit → features/AgentSetting}/AgentPrompt/index.tsx

@@ -1,13 +1,14 @@
 import { CodeEditor, FormGroup, TokenTag } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import { encode } from 'gpt-tokenizer';
 import { Bot } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { ModelTokens } from '@/const/modelTokens';
-import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
+import { AgentAction } from '@/store/session/slices/agentConfig';
+import { LobeAgentConfig } from '@/types/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
   input: css`
@@ -22,18 +23,16 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const AgentPrompt = memo(() => {
+export interface AgentPromptProps {
+  config: LobeAgentConfig;
+  updateConfig: AgentAction['updateAgentConfig'];
+}
+
+const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
   const { t } = useTranslation('setting');
 
-  const [systemRole, model, systemTokenCount, updateAgentConfig] = useSessionStore(
-    (s) => [
-      agentSelectors.currentAgentSystemRole(s),
-      agentSelectors.currentAgentModel(s),
-      chatSelectors.systemRoleTokenCount(s),
-      s.updateAgentConfig,
-    ],
-    shallow,
-  );
+  const { systemRole, model } = config;
+  const systemTokenCount = useMemo(() => encode(systemRole || '').length, [systemRole]);
 
   return (
     <FormGroup
@@ -46,9 +45,7 @@ const AgentPrompt = memo(() => {
     >
       <CodeEditor
         language={'md'}
-        onValueChange={(e) => {
-          updateAgentConfig({ systemRole: e });
-        }}
+        onValueChange={(e) => updateConfig({ systemRole: e })}
         placeholder={t('settingAgent.name.placeholder')}
         resize={false}
         style={{ marginTop: 16 }}

package/src/features/AgentSetting/index.ts

@@ -0,0 +1,4 @@
+export { default as AgentConfig } from './AgentConfig';
+export { default as AgentMeta } from './AgentMeta';
+export { default as AgentPlugin } from './AgentPlugin';
+export { default as AgentPrompt } from './AgentPrompt';

package/src/features/AgentSetting/test.json

@@ -0,0 +1,40 @@
+{
+  "exportType": "agents",
+  "state": {
+    "sessions": {
+      "9a2def55-ff50-4f7f-ad6c-b97dac817193": {
+        "chats": {},
+        "config": {
+          "model": "gpt-3.5-turbo",
+          "params": { "temperature": 0.6 },
+          "systemRole": "你是一名专业的前端。擅长书写 Typescript JSDoc 代码，代码的示例如下：\n\n```ts\ninterface Props {\n/**\n* 尺寸\n* */\nloading: boolean;\n/**\n* 头像形状\n* @default 'square'\n* @enum [\"square\",\"circle\"]\n* @enumNames [ \"方形\", \"圆形\"]\n*/\nshape?: 'square' | 'circle';\n/**\n* 返回事件\n* @ignore\n*/\nonBack: () => void;\n/**\n* 选择路由的回调函数\n* @param key - 选中的路由\n* @ignore\n*/\nonSelect?: (key: string) => any;\n/**\n* 点击事件回调函数\n* @ignore\n*/\nonClick?: () => void;\n/**\n* 引用\n* @ignore\n*/\nref: any;\n/**\n* Tooltip 提示框位置\n* @enum ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom']\n* @enumNames ['上', '左', '右', '下', '左上', '右上', '左下', '右下', '左上', '左下', '右上', '右下']\n* @default 'top'\n*/\nplacement?: TooltipPlacement;\n}\n```\n\n\n接下来用户会输入一串 interface 代码，需要你补全 jsdoc。其中接口的类型不可改变"
+        },
+        "createAt": 1690184262713,
+        "id": "9a2def55-ff50-4f7f-ad6c-b97dac817193",
+        "meta": { "backgroundColor": "#ec5e41", "avatar": "🥲" },
+        "type": "agent",
+        "updateAt": 1690184262713,
+        "topics": {}
+      },
+      "744fe028-c8a2-410c-8b0a-66cfa00d647b": {
+        "chats": {},
+        "config": {
+          "model": "gpt-3.5-turbo",
+          "params": { "temperature": 0.6 },
+          "systemRole": "- dafdsafa\n- da- dafdsafa\n- da- dafdsafa\n- da- dafdsafa\n- da- dafdsafa\n- da"
+        },
+        "createAt": 1690184730185,
+        "id": "744fe028-c8a2-410c-8b0a-66cfa00d647b",
+        "meta": {
+          "backgroundColor": "#ffef5c",
+          "title": "dafaa",
+          "description": "safsafsafsafsafsafsfasfas"
+        },
+        "type": "agent",
+        "updateAt": 1690184730185,
+        "topics": {}
+      }
+    }
+  },
+  "version": 1
+}

package/src/features/SideBar/{BottomAction.tsx → BottomActions.tsx}

@@ -8,17 +8,24 @@ import {
   Github,
   Heart,
   Settings,
+  Settings2,
 } from 'lucide-react';
 import Router from 'next/router';
-import { ReactNode, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useExportConfig } from '@/hooks/useExportConfig';
 import { useImportConfig } from '@/hooks/useImportConfig';
+import { SettingsStore } from '@/store/settings';
 
 import pkg from '../../../package.json';
 
-const BottomAction = memo<{ children: ReactNode }>(({ children }) => {
+export interface BottomActionProps {
+  setTab: SettingsStore['switchSideBar'];
+  tab: SettingsStore['sidebarKey'];
+}
+
+const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
   const { t } = useTranslation('common');
 
   const { exportSessions, exportSettings, exportAll, exportAgents } = useExportConfig();
@@ -93,7 +100,10 @@ const BottomAction = memo<{ children: ReactNode }>(({ children }) => {
         icon: <Icon icon={Settings} />,
         key: 'setting',
         label: t('setting'),
-        onClick: () => Router.push('/setting'),
+        onClick: () => {
+          setTab('settings');
+          Router.push('/settings');
+        },
       },
     ],
     [],
@@ -103,10 +113,10 @@ const BottomAction = memo<{ children: ReactNode }>(({ children }) => {
     <>
       <ActionIcon icon={Github} onClick={() => window.open(pkg.homepage, '__blank')} />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        {children}
+        <ActionIcon active={tab === 'settings'} icon={Settings2} />
       </Dropdown>
     </>
   );
 });
 
-export default BottomAction;
+export default BottomActions;

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>
     </>