@lobehub/chat 1.83.8 → 1.84.1

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

@@ -1,19 +1,16 @@
 'use client';
 
-import { Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
-import { Button, Skeleton } from 'antd';
+import { Button, Form, type FormGroupItemType, type FormItemProps, Tooltip } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
-import { isString } from 'lodash-es';
 import { Wand2 } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { INBOX_SESSION_ID } from '@/const/session';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
-import { useStore } from '../store';
-import { SessionLoadingState } from '../store/initialState';
+import { selectors, useStore } from '../store';
 import AutoGenerateAvatar from './AutoGenerateAvatar';
 import AutoGenerateInput from './AutoGenerateInput';
 import AutoGenerateSelect from './AutoGenerateSelect';
@@ -21,21 +18,17 @@ import BackgroundSwatches from './BackgroundSwatches';
 
 const AgentMeta = memo(() => {
   const { t } = useTranslation('setting');
-
+  const [form] = Form.useForm();
   const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
-
   const [hasSystemRole, updateMeta, autocompleteMeta, autocompleteAllMeta] = useStore((s) => [
     !!s.config.systemRole,
     s.setAgentMeta,
     s.autocompleteMeta,
     s.autocompleteAllMeta,
   ]);
-  const [isInbox, isIniting, autocompleteLoading] = useStore((s) => [
-    s.id === INBOX_SESSION_ID,
-    s.loading,
-    s.autocompleteLoading,
-  ]);
-  const meta = useStore((s) => s.meta, isEqual);
+  const [isInbox, loadingState] = useStore((s) => [s.id === INBOX_SESSION_ID, s.loadingState]);
+  const meta = useStore(selectors.currentMetaConfig, isEqual);
+  const [background, setBackground] = useState(meta.backgroundColor);
 
   if (isInbox) return;
 
@@ -44,21 +37,20 @@ const AgentMeta = memo(() => {
       Render: AutoGenerateInput,
       key: 'title',
       label: t('settingAgent.name.title'),
-      onChange: (value: string) => updateMeta({ title: value }),
       placeholder: t('settingAgent.name.placeholder'),
     },
     {
       Render: AutoGenerateInput,
+      desc: t('settingAgent.description.desc'),
       key: 'description',
       label: t('settingAgent.description.title'),
-      onChange: (value: string) => updateMeta({ description: value }),
       placeholder: t('settingAgent.description.placeholder'),
     },
     {
       Render: AutoGenerateSelect,
+      desc: t('settingAgent.tag.desc'),
       key: 'tags',
       label: t('settingAgent.tag.title'),
-      onChange: (e: any) => updateMeta({ tags: isString(e) ? e.split(',') : e }),
       placeholder: t('settingAgent.tag.placeholder'),
     },
   ];
@@ -66,57 +58,46 @@ const AgentMeta = memo(() => {
   const autocompleteItems: FormItemProps[] = basic.map((item) => {
     const AutoGenerate = item.Render;
     return {
-      children: isIniting ? (
-        <Skeleton.Button active block size={'small'} />
-      ) : (
+      children: (
         <AutoGenerate
           canAutoGenerate={hasSystemRole}
-          loading={autocompleteLoading[item.key as keyof SessionLoadingState]}
-          onChange={item.onChange}
+          loading={loadingState?.[item.key]}
           onGenerate={() => {
             autocompleteMeta(item.key as keyof typeof meta);
           }}
           placeholder={item.placeholder}
-          value={meta[item.key as keyof typeof meta]}
         />
       ),
       label: item.label,
+      name: item.key,
     };
   });
 
-  const metaData: ItemGroup = {
+  const metaData: FormGroupItemType = {
     children: [
       {
-        children: isIniting ? (
-          <Skeleton.Button active block size={'small'} />
-        ) : (
+        children: (
           <AutoGenerateAvatar
-            background={meta.backgroundColor}
+            background={background}
             canAutoGenerate={hasSystemRole}
-            loading={autocompleteLoading['avatar']}
-            onChange={(avatar) => updateMeta({ avatar })}
+            loading={loadingState?.['avatar']}
             onGenerate={() => autocompleteMeta('avatar')}
-            value={meta.avatar}
           />
         ),
         label: t('settingAgent.avatar.title'),
+        layout: 'horizontal',
         minWidth: undefined,
+        name: 'avatar',
       },
       {
-        children: isIniting ? (
-          <Skeleton.Button active block size={'small'} />
-        ) : (
-          <BackgroundSwatches
-            backgroundColor={meta.backgroundColor}
-            onChange={(backgroundColor) => updateMeta({ backgroundColor })}
-          />
-        ),
+        children: <BackgroundSwatches onValuesChange={(c) => setBackground(c)} />,
         label: t('settingAgent.backgroundColor.title'),
         minWidth: undefined,
+        name: 'backgroundColor',
       },
       ...autocompleteItems,
     ],
-    extra: !isIniting && (
+    extra: (
       <Tooltip
         title={
           !hasSystemRole
@@ -126,11 +107,14 @@ const AgentMeta = memo(() => {
       >
         <Button
           disabled={!hasSystemRole}
-          icon={<Icon icon={Wand2} />}
-          loading={Object.values(autocompleteLoading).some((i) => !!i)}
+          icon={Wand2}
+          iconPosition={'end'}
+          iconProps={{
+            size: 12,
+          }}
+          loading={Object.values(loadingState as any).some((i) => !!i)}
           onClick={(e: any) => {
             e.stopPropagation();
-
             autocompleteAllMeta(true);
           }}
           size={'small'}
@@ -145,9 +129,22 @@ const AgentMeta = memo(() => {
   return (
     <Form
       disabled={!isAgentEditable}
+      footer={
+        <Form.SubmitFooter
+          texts={{
+            reset: t('submitFooter.reset'),
+            submit: t('settingAgent.submit'),
+            unSaved: t('submitFooter.unSaved'),
+            unSavedWarning: t('submitFooter.unSavedWarning'),
+          }}
+        />
+      }
+      form={form}
+      initialValues={meta}
       items={[metaData]}
       itemsType={'group'}
-      variant={'pure'}
+      onFinish={updateMeta}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

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

@@ -1,38 +1,32 @@
 'use client';
 
-import { Form, ItemGroup, SliderWithInput } from '@lobehub/ui';
-import { Select, Switch } from 'antd';
+import { Form, type FormGroupItemType, Select, SliderWithInput } from '@lobehub/ui';
+import { Switch } from 'antd';
+import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
+import ModelSelect from '@/features/ModelSelect';
 import { useProviderName } from '@/hooks/useProviderName';
 
-import { useStore } from '../store';
-import { selectors } from '../store/selectors';
-import { useAgentSyncSettings } from '../useSyncAgemtSettings';
-import ModelSelect from './ModelSelect';
+import { selectors, useStore } from '../store';
 
 const AgentModal = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
+  const config = useStore(selectors.currentAgentConfig, isEqual);
 
-  const [enableMaxTokens, enableReasoningEffort, updateConfig] = useStore((s) => {
-    const config = selectors.chatConfig(s);
-    return [config.enableMaxTokens, config.enableReasoningEffort, s.setAgentConfig];
-  });
-
+  const updateConfig = useStore((s) => s.setAgentConfig);
   const providerName = useProviderName(useStore((s) => s.config.provider) as string);
 
-  useAgentSyncSettings(form);
-
-  const model: ItemGroup = {
+  const model: FormGroupItemType = {
     children: [
       {
         children: <ModelSelect />,
         desc: t('settingModel.model.desc', { provider: providerName }),
         label: t('settingModel.model.title'),
-        name: 'model',
+        name: '_modalConfig',
         tag: 'model',
       },
       {
@@ -66,6 +60,7 @@ const AgentModal = memo(() => {
       {
         children: <Switch />,
         label: t('settingModel.enableMaxTokens.title'),
+        layout: 'horizontal',
         minWidth: undefined,
         name: ['chatConfig', 'enableMaxTokens'],
         valuePropName: 'checked',
@@ -74,7 +69,7 @@ const AgentModal = memo(() => {
         children: <SliderWithInput max={32_000} min={0} step={100} />,
         desc: t('settingModel.maxTokens.desc'),
         divider: false,
-        hidden: !enableMaxTokens,
+        hidden: !config.chatConfig.enableMaxTokens,
         label: t('settingModel.maxTokens.title'),
         name: ['params', 'max_tokens'],
         tag: 'max_tokens',
@@ -82,6 +77,7 @@ const AgentModal = memo(() => {
       {
         children: <Switch />,
         label: t('settingModel.enableReasoningEffort.title'),
+        layout: 'horizontal',
         minWidth: undefined,
         name: ['chatConfig', 'enableReasoningEffort'],
         valuePropName: 'checked',
@@ -89,7 +85,7 @@ const AgentModal = memo(() => {
       {
         children: (
           <Select
-            defaultValue='medium'
+            defaultValue="medium"
             options={[
               { label: t('settingModel.reasoningEffort.options.low'), value: 'low' },
               { label: t('settingModel.reasoningEffort.options.medium'), value: 'medium' },
@@ -98,7 +94,7 @@ const AgentModal = memo(() => {
           />
         ),
         desc: t('settingModel.reasoningEffort.desc'),
-        hidden: !enableReasoningEffort,
+        hidden: !config.chatConfig.enableReasoningEffort,
         label: t('settingModel.reasoningEffort.title'),
         name: ['params', 'reasoning_effort'],
         tag: 'reasoning_effort',
@@ -109,11 +105,34 @@ const AgentModal = memo(() => {
 
   return (
     <Form
+      footer={
+        <Form.SubmitFooter
+          texts={{
+            reset: t('submitFooter.reset'),
+            submit: t('settingModel.submit'),
+            unSaved: t('submitFooter.unSaved'),
+            unSavedWarning: t('submitFooter.unSavedWarning'),
+          }}
+        />
+      }
       form={form}
+      initialValues={{
+        ...config,
+        _modalConfig: {
+          model: config.model,
+          provider: config.provider,
+        },
+      }}
       items={[model]}
       itemsType={'group'}
-      onValuesChange={updateConfig}
-      variant={'pure'}
+      onFinish={({ _modalConfig, ...rest }) => {
+        updateConfig({
+          model: _modalConfig?.model,
+          provider: _modalConfig?.provider,
+          ...rest,
+        });
+      }}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

package/src/features/AgentSetting/AgentOpening/OpeningMessage.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { EditableMessage } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
+import { EditableMessage } from '@lobehub/ui/chat';
 import { createStyles } from 'antd-style';
 import { PencilLine } from 'lucide-react';
 import { memo, useCallback, useState } from 'react';
@@ -60,7 +60,6 @@ const OpeningMessage = memo(() => {
           editButtonSize={'small'}
           editing={editing}
           height={'auto'}
-          inputType={'pure'}
           onChange={setOpeningMessage}
           onEditingChange={setEditing}
           placeholder={t('settingOpening.openingMessage.placeholder')}
@@ -70,6 +69,7 @@ const OpeningMessage = memo(() => {
             confirm: t('ok', { ns: 'common' }),
           }}
           value={openingMessage ?? ''}
+          variant={'borderless'}
         />
         {editIconButton}
       </Flexbox>

package/src/features/AgentSetting/AgentOpening/OpeningQuestions.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import { SortableList } from '@lobehub/ui';
-import { Button, Empty, Input } from 'antd';
+import { ActionIcon, Button, Input, SortableList } from '@lobehub/ui';
+import { Empty, Space } from 'antd';
 import { createStyles } from 'antd-style';
+import { PlusIcon, Trash } from 'lucide-react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
 
 import { useStore } from '../store';
 import { selectors } from '../store/selectors';
@@ -17,10 +18,8 @@ const useStyles = createStyles(({ css, token }) => ({
     margin-inline: 0;
   `,
   questionItemContainer: css`
-    margin-block-end: 8px;
-    padding-block: 2px;
-    padding-inline: 10px 0;
-    background: ${token.colorBgContainer};
+    padding-block: 8px;
+    padding-inline-end: 8px;
   `,
   questionItemContent: css`
     flex: 1;
@@ -37,7 +36,7 @@ const useStyles = createStyles(({ css, token }) => ({
 
 interface QuestionItem {
   content: string;
-  id: number;
+  id: string | number;
 }
 
 const OpeningQuestions = memo(() => {
@@ -47,12 +46,19 @@ const OpeningQuestions = memo(() => {
 
   const openingQuestions = useStore(selectors.openingQuestions);
   const updateConfig = useStore((s) => s.setAgentConfig);
-  const setQuestions = useCallback(
-    (questions: string[]) => {
-      updateConfig({ openingQuestions: questions });
-    },
-    [updateConfig],
-  );
+
+  // 乐观更新，不然会抖
+  const [questions, setQuestions] = useMergeState(openingQuestions, {
+    onChange: (questions: string[]) => updateConfig({ openingQuestions: questions }),
+    value: openingQuestions,
+  });
+
+  const items: QuestionItem[] = useMemo(() => {
+    return questions.map((item, index) => ({
+      content: item,
+      id: item || index,
+    }));
+  }, [questions]);
 
   const addQuestion = useCallback(() => {
     if (!questionInput.trim()) return;
@@ -79,34 +85,25 @@ const OpeningQuestions = memo(() => {
     [setQuestions],
   );
 
-  const items: QuestionItem[] = useMemo(() => {
-    return openingQuestions.map((item, index) => ({
-      content: item,
-      id: index,
-    }));
-  }, [openingQuestions]);
-
   const isRepeat = openingQuestions.includes(questionInput.trim());
 
   return (
     <Flexbox gap={8}>
       <Flexbox gap={4}>
-        <Input
-          addonAfter={
-            <Button
-              // don't allow repeat
-              disabled={openingQuestions.includes(questionInput.trim())}
-              icon={<PlusOutlined />}
-              onClick={addQuestion}
-              size="small"
-              type="text"
-            />
-          }
-          onChange={(e) => setQuestionInput(e.target.value)}
-          onPressEnter={addQuestion}
-          placeholder={t('settingOpening.openingQuestions.placeholder')}
-          value={questionInput}
-        />
+        <Space.Compact>
+          <Input
+            onChange={(e) => setQuestionInput(e.target.value)}
+            onPressEnter={addQuestion}
+            placeholder={t('settingOpening.openingQuestions.placeholder')}
+            value={questionInput}
+          />
+          <Button
+            // don't allow repeat
+            disabled={openingQuestions.includes(questionInput.trim())}
+            icon={PlusIcon}
+            onClick={addQuestion}
+          />
+        </Space.Compact>
 
         {isRepeat && (
           <p className={styles.repeatError}>{t('settingOpening.openingQuestions.repeat')}</p>
@@ -119,13 +116,17 @@ const OpeningQuestions = memo(() => {
             items={items}
             onChange={handleSortEnd}
             renderItem={(item) => (
-              <SortableList.Item className={styles.questionItemContainer} id={item.id}>
+              <SortableList.Item
+                className={styles.questionItemContainer}
+                id={item.id}
+                variant={'filled'}
+              >
                 <SortableList.DragHandle />
                 <div className={styles.questionItemContent}>{item.content}</div>
-                <Button
-                  icon={<DeleteOutlined />}
+                <ActionIcon
+                  icon={Trash}
                   onClick={() => removeQuestion(item.content)}
-                  type="text"
+                  size={'small'}
                 />
               </SortableList.Item>
             )}
@@ -134,6 +135,7 @@ const OpeningQuestions = memo(() => {
           <Empty
             className={styles.empty}
             description={t('settingOpening.openingQuestions.empty')}
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
           />
         )}
       </div>

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

@@ -43,7 +43,7 @@ const AgentOpening = memo(() => {
         },
       ]}
       itemsType={'group'}
-      variant={'pure'}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

package/src/features/AgentSetting/AgentPlugin/AddPluginButton.tsx

@@ -1,5 +1,4 @@
-import { Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import { PackagePlus } from 'lucide-react';
 import { forwardRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -33,7 +32,7 @@ const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
         open={showModal}
       />
       <Button
-        icon={<Icon icon={PackagePlus} />}
+        icon={PackagePlus}
         onClick={() => {
           setModal(true);
         }}

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { Avatar, Form, Icon, ItemGroup, Tooltip } from '@lobehub/ui';
-import { Button, Empty, Space, Switch, Tag, Typography } from 'antd';
+import { Avatar, Button, Form, type FormGroupItemType, Tag, Tooltip } from '@lobehub/ui';
+import { Empty, Space, Switch, Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { LucideTrash2, Store } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -10,6 +10,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import PluginStore from '@/features/PluginStore';
+import PluginAvatar from '@/features/PluginStore/PluginItem/PluginAvatar';
 import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
@@ -45,7 +46,7 @@ const AgentPlugin = memo(() => {
     const isCustomPlugin = type === 'customPlugin';
 
     return {
-      avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta)} style={{ flex: 'none' }} />,
+      avatar: <PluginAvatar avatar={pluginHelpers.getPluginAvatar(meta)} size={40} />,
       children: isCustomPlugin ? (
         <LocalPluginItem id={identifier} />
       ) : (
@@ -58,6 +59,7 @@ const AgentPlugin = memo(() => {
           <PluginTag author={author} type={type} />
         </Flexbox>
       ),
+      layout: 'horizontal',
       minWidth: undefined,
     };
   });
@@ -68,7 +70,7 @@ const AgentPlugin = memo(() => {
   const deprecatedList = userEnabledPlugins
     .filter((pluginId) => !installedPlugins.some((p) => p.identifier === pluginId))
     .map((id) => ({
-      avatar: <Avatar avatar={'♻️'} />,
+      avatar: <Avatar avatar={'♻️'} size={40} />,
       children: (
         <Switch
           checked={true}
@@ -80,11 +82,10 @@ const AgentPlugin = memo(() => {
       label: (
         <Flexbox align={'center'} gap={8} horizontal>
           {id}
-          <Tag bordered={false} color={'red'}>
-            {t('plugin.installStatus.deprecated')}
-          </Tag>
+          <Tag color={'red'}>{t('plugin.installStatus.deprecated')}</Tag>
         </Flexbox>
       ),
+      layout: 'horizontal',
       minWidth: undefined,
       tag: id,
     }));
@@ -99,7 +100,7 @@ const AgentPlugin = memo(() => {
       {hasDeprecated ? (
         <Tooltip title={t('plugin.clearDeprecated')}>
           <Button
-            icon={<Icon icon={LucideTrash2} />}
+            icon={LucideTrash2}
             onClick={(e) => {
               e.stopPropagation();
               for (const i of deprecatedList) {
@@ -112,7 +113,7 @@ const AgentPlugin = memo(() => {
       ) : null}
       <Tooltip title={t('plugin.store')}>
         <Button
-          icon={<Icon icon={Store} />}
+          icon={Store}
           onClick={(e) => {
             e.stopPropagation();
             setShowStore(true);
@@ -146,7 +147,7 @@ const AgentPlugin = memo(() => {
     </Center>
   );
 
-  const plugin: ItemGroup = {
+  const plugin: FormGroupItemType = {
     children: isLoading ? loadingSkeleton : isEmpty ? empty : [...deprecatedList, ...list],
     extra,
     title: t('settingPlugin.title'),
@@ -155,7 +156,7 @@ const AgentPlugin = memo(() => {
   return (
     <>
       <PluginStore open={showStore} setOpen={setShowStore} />
-      <Form items={[plugin]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />
+      <Form items={[plugin]} itemsType={'group'} variant={'borderless'} {...FORM_STYLE} />
     </>
   );
 });

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

@@ -1,38 +1,21 @@
-import { TokenTag } from '@lobehub/ui';
+import { Tag } from '@lobehub/ui';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { useTokenCount } from '@/hooks/useTokenCount';
-import { useUserStore } from '@/store/user';
-import { modelProviderSelectors } from '@/store/user/selectors';
 
-import { useStore } from '../store';
-
-const Tokens = memo(() => {
-  const { t } = useTranslation('chat');
-  const [systemRole, model] = useStore((s) => [s.config.systemRole, s.config.model]);
-  const systemTokenCount = useTokenCount(systemRole);
-
-  const showTag = useUserStore(modelProviderSelectors.isModelHasMaxToken(model));
-  const modelMaxTokens = useUserStore(modelProviderSelectors.modelMaxToken(model));
+const Tokens = memo<{ value: string }>(({ value }) => {
+  const systemTokenCount = useTokenCount(value);
+  if (!value || !systemTokenCount) return;
 
   return (
-    <Flexbox align={'center'} gap={8} horizontal>
-      {showTag && (
-        <TokenTag
-          displayMode={'used'}
-          maxValue={modelMaxTokens}
-          shape={'square'}
-          text={{
-            overload: t('tokenTag.overload'),
-            remained: t('tokenTag.remained'),
-            used: t('tokenTag.used'),
-          }}
-          value={systemTokenCount}
-        />
-      )}
-    </Flexbox>
+    <Tag
+      style={{
+        marginTop: 24,
+        width: 'fit-content',
+      }}
+    >
+      Token: {systemTokenCount}
+    </Tag>
   );
 });