@lobehub/chat 1.83.7 → 1.84.0

package/src/config/modelProviders/stepfun.ts

@@ -83,7 +83,7 @@ const Stepfun: ModelProviderCard = {
     },
     {
       contextWindowTokens: 8000,
-      description: 
+      description:
         '基于新一代自研Attention架构MFA的极速大模型，用极低成本达到和step1类似的效果，同时保持了更高的吞吐和更快响应时延。能够处理通用任务，在代码能力上具备特长。',
       displayName: 'Step 2 Mini',
       enabled: true,

package/src/config/modelProviders/vllm.ts

@@ -17,4 +17,4 @@ const VLLM: ModelProviderCard = {
   url: 'https://docs.vllm.ai',
 };
 
-export default VLLM; 
+export default VLLM;

package/src/config/modelProviders/wenxin.ts

@@ -139,8 +139,7 @@ const BaiduWenxin: ModelProviderCard = {
     },
     {
       contextWindowTokens: 8192,
-      description:
-        'ERNIE Tiny是百度自研的超高性能大语言模型，部署与精调成本在文心系列模型中最低。',
+      description: 'ERNIE Tiny是百度自研的超高性能大语言模型，部署与精调成本在文心系列模型中最低。',
       displayName: 'ERNIE Tiny 8K',
       id: 'ernie-tiny-8k',
       pricing: {
@@ -199,8 +198,7 @@ const BaiduWenxin: ModelProviderCard = {
     },
     {
       contextWindowTokens: 8192,
-      description:
-        '百度自研通用大语言模型，在小说续写能力上有明显优势，也可用在短剧、电影等场景。',
+      description: '百度自研通用大语言模型，在小说续写能力上有明显优势，也可用在短剧、电影等场景。',
       displayName: 'ERNIE Novel 8K',
       id: 'ernie-novel-8k',
       pricing: {

package/src/config/modelProviders/xinference.ts

@@ -2,7 +2,8 @@ import { ModelProviderCard } from '@/types/llm';
 
 const Xinference: ModelProviderCard = {
   chatModels: [],
-  description: 'Xorbits Inference (Xinference) 是一个开源平台，用于简化各种 AI 模型的运行和集成。借助 Xinference，您可以使用任何开源 LLM、嵌入模型和多模态模型在云端或本地环境中运行推理，并创建强大的 AI 应用。',
+  description:
+    'Xorbits Inference (Xinference) 是一个开源平台，用于简化各种 AI 模型的运行和集成。借助 Xinference，您可以使用任何开源 LLM、嵌入模型和多模态模型在云端或本地环境中运行推理，并创建强大的 AI 应用。',
   id: 'xinference',
   modelsUrl: 'https://inference.readthedocs.io/zh-cn/latest/models/builtin/index.html',
   name: 'Xinference',

package/src/config/modelProviders/zhipu.ts

@@ -216,7 +216,7 @@ const ZhiPu: ModelProviderCard = {
   name: 'ZhiPu',
   settings: {
     sdkType: 'openai',
-    showModelFetcher: true
+    showModelFetcher: true,
   },
   url: 'https://zhipuai.cn',
 };

package/src/const/hotkeys.ts

@@ -34,7 +34,7 @@ export const HOTKEYS_REGISTRATION: HotkeyRegistration = [
     group: HotkeyGroupEnum.Essential,
     id: HotkeyEnum.ToggleLeftPanel,
     keys: combineKeys([KeyEnum.Mod, KeyEnum.BracketLeft]),
-    scopes: [HotkeyScopeEnum.Chat],
+    scopes: [HotkeyScopeEnum.Chat, HotkeyScopeEnum.Files],
   },
   {
     group: HotkeyGroupEnum.Essential,

package/src/const/layoutTokens.test.ts

@@ -2,10 +2,10 @@ import { HEADER_ICON_SIZE } from './layoutTokens';
 
 describe('HEADER_ICON_SIZE', () => {
   it('mobile', () => {
-    expect(HEADER_ICON_SIZE(true)).toEqual({ blockSize: 36, fontSize: 22 });
+    expect(HEADER_ICON_SIZE(true)).toEqual({ blockSize: 36, size: 22 });
   });
 
   it('desktop', () => {
-    expect(HEADER_ICON_SIZE(false)).toEqual({ blockSize: 32, fontSize: 20 });
+    expect(HEADER_ICON_SIZE(false)).toEqual({ blockSize: 36, size: 22 });
   });
 });

package/src/const/layoutTokens.ts

@@ -1,4 +1,4 @@
-import type { FormProps } from '@lobehub/ui';
+import type { ActionIconProps, FormProps } from '@lobehub/ui';
 
 export const HEADER_HEIGHT = 64;
 export const MOBILE_NABBAR_HEIGHT = 44;
@@ -19,8 +19,8 @@ export const FORM_STYLE: FormProps = {
   itemMinWidth: 'max(30%,240px)',
   style: { maxWidth: MAX_WIDTH, width: '100%' },
 };
-export const MOBILE_HEADER_ICON_SIZE = { blockSize: 36, fontSize: 22 };
-export const DESKTOP_HEADER_ICON_SIZE = { blockSize: 32, fontSize: 20 };
+export const MOBILE_HEADER_ICON_SIZE: ActionIconProps['size'] = { blockSize: 36, size: 22 };
+export const DESKTOP_HEADER_ICON_SIZE: ActionIconProps['size'] = { blockSize: 36, size: 22 };
 export const HEADER_ICON_SIZE = (mobile?: boolean) =>
   mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE;
 export const PWA_INSTALL_ID = 'pwa-install';

package/src/const/message.ts

@@ -8,5 +8,4 @@ export const MESSAGE_WELCOME_GUIDE_ID = 'welcome';
 
 export const THREAD_DRAFT_ID = '__THREAD_DRAFT_ID__';
 
-
-export const MESSAGE_FLAGGED_THINKING='FLAGGED_THINKING'
+export const MESSAGE_FLAGGED_THINKING = 'FLAGGED_THINKING';

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

@@ -0,0 +1,29 @@
+'use client';
+
+import { memo } from 'react';
+
+import Menu from '@/components/Menu';
+import { ChatSettingsTabs } from '@/store/global/initialState';
+
+import { useCategory } from './useCategory';
+
+interface CategoryContentProps {
+  setTab: (tab: ChatSettingsTabs) => void;
+  tab: string;
+}
+const AgentCategory = memo<CategoryContentProps>(({ setTab, tab }) => {
+  const cateItems = useCategory();
+  return (
+    <Menu
+      compact
+      items={cateItems}
+      onClick={({ key }) => {
+        setTab(key as ChatSettingsTabs);
+      }}
+      selectable
+      selectedKeys={[tab as any]}
+    />
+  );
+});
+
+export default AgentCategory;

package/src/{app/[variants]/(main)/chat/(workspace)/features/AgentSettings/CategoryContent → features/AgentSetting/AgentCategory}/useCategory.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import type { MenuProps } from '@/components/Menu';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { ChatSettingsTabs } from '@/store/global/initialState';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 
 interface UseCategoryOptions {
@@ -15,18 +16,19 @@ interface UseCategoryOptions {
 
 export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
   const { t } = useTranslation('setting');
-  const iconSize = mobile ? { fontSize: 20 } : undefined;
+  const iconSize = mobile ? 20 : undefined;
   const id = useSessionStore((s) => s.activeId);
   const isInbox = id === INBOX_SESSION_ID;
+  const { enablePlugins } = useServerConfigStore(featureFlagsSelectors);
 
   const cateItems: MenuProps['items'] = useMemo(
     () =>
       [
-        (!isInbox && {
+        !isInbox && {
           icon: <Icon icon={UserCircle} size={iconSize} />,
           key: ChatSettingsTabs.Meta,
           label: t('agentTab.meta'),
-        }) as MenuItemType,
+        },
         {
           icon: <Icon icon={Bot} size={iconSize} />,
           key: ChatSettingsTabs.Prompt,
@@ -52,13 +54,13 @@ export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
           key: ChatSettingsTabs.TTS,
           label: t('agentTab.tts'),
         },
-        {
+        enablePlugins && {
           icon: <Icon icon={Blocks} size={iconSize} />,
           key: ChatSettingsTabs.Plugin,
           label: t('agentTab.plugin'),
         },
-      ].filter(Boolean),
-    [t, isInbox],
+      ].filter(Boolean) as MenuProps['items'],
+    [t, isInbox, enablePlugins],
   );
 
   return cateItems;

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

@@ -1,47 +1,31 @@
 'use client';
 
-import { Form, ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
-import { Input, Switch } from 'antd';
+import { Form, type FormGroupItemType, ImageSelect, SliderWithInput, TextArea } from '@lobehub/ui';
+import { Switch } from 'antd';
 import { useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { LayoutList, MessagesSquare } from 'lucide-react';
-import { memo, useLayoutEffect } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { imageUrl } from '@/const/url';
 
-import { useStore } from '../store';
-import { selectors } from '../store/selectors';
+import { selectors, useStore } from '../store';
 
 const AgentChat = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
   const { isDarkMode } = useThemeMode();
-  const [displayMode, enableAutoCreateTopic, enableHistoryCount, updateConfig] = useStore((s) => {
-    const config = selectors.chatConfig(s);
+  const updateConfig = useStore((s) => s.setChatConfig);
+  const config = useStore(selectors.currentChatConfig, isEqual);
 
-    return [
-      config.displayMode,
-      config.enableAutoCreateTopic,
-      config.enableHistoryCount,
-      s.setChatConfig,
-    ];
-  });
-
-  const config = useStore(selectors.chatConfig, isEqual);
-
-  useLayoutEffect(() => {
-    form.setFieldsValue(config);
-  }, [config]);
-
-  const chat: ItemGroup = {
+  const chat: FormGroupItemType = {
     children: [
       {
         children: (
-          <SelectWithImg
+          <ImageSelect
             height={86}
-            onChange={(mode) => updateConfig({ displayMode: mode })}
             options={[
               {
                 icon: MessagesSquare,
@@ -56,16 +40,19 @@ const AgentChat = memo(() => {
                 value: 'docs',
               },
             ]}
+            style={{
+              marginRight: 2,
+            }}
             unoptimized={false}
-            value={displayMode}
             width={144}
           />
         ),
         label: t('settingChat.chatStyleType.title'),
         minWidth: undefined,
+        name: 'displayMode',
       },
       {
-        children: <Input.TextArea placeholder={t('settingChat.inputTemplate.placeholder')} />,
+        children: <TextArea placeholder={t('settingChat.inputTemplate.placeholder')} />,
         desc: t('settingChat.inputTemplate.desc'),
         label: t('settingChat.inputTemplate.title'),
         name: 'inputTemplate',
@@ -74,6 +61,7 @@ const AgentChat = memo(() => {
         children: <Switch />,
         desc: t('settingChat.enableAutoCreateTopic.desc'),
         label: t('settingChat.enableAutoCreateTopic.title'),
+        layout: 'horizontal',
         minWidth: undefined,
         name: 'enableAutoCreateTopic',
         valuePropName: 'checked',
@@ -82,13 +70,14 @@ const AgentChat = memo(() => {
         children: <SliderWithInput max={8} min={0} />,
         desc: t('settingChat.autoCreateTopicThreshold.desc'),
         divider: false,
-        hidden: !enableAutoCreateTopic,
+        hidden: !config.enableAutoCreateTopic,
         label: t('settingChat.autoCreateTopicThreshold.title'),
         name: 'autoCreateTopicThreshold',
       },
       {
         children: <Switch />,
         label: t('settingChat.enableHistoryCount.title'),
+        layout: 'horizontal',
         minWidth: undefined,
         name: 'enableHistoryCount',
         valuePropName: 'checked',
@@ -97,14 +86,15 @@ const AgentChat = memo(() => {
         children: <SliderWithInput max={20} min={0} />,
         desc: t('settingChat.historyCount.desc'),
         divider: false,
-        hidden: !enableHistoryCount,
+        hidden: !config.enableHistoryCount,
         label: t('settingChat.historyCount.title'),
         name: 'historyCount',
       },
       {
         children: <Switch />,
-        hidden: !enableHistoryCount,
+        hidden: !config.enableHistoryCount,
         label: t('settingChat.enableCompressHistory.title'),
+        layout: 'horizontal',
         minWidth: undefined,
         name: 'enableCompressHistory',
         valuePropName: 'checked',
@@ -115,11 +105,22 @@ const AgentChat = memo(() => {
 
   return (
     <Form
+      footer={
+        <Form.SubmitFooter
+          texts={{
+            reset: t('submitFooter.reset'),
+            submit: t('settingChat.submit'),
+            unSaved: t('submitFooter.unSaved'),
+            unSavedWarning: t('submitFooter.unSavedWarning'),
+          }}
+        />
+      }
       form={form}
+      initialValues={config}
       items={[chat]}
       itemsType={'group'}
-      onValuesChange={updateConfig}
-      variant={'pure'}
+      onFinish={updateConfig}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

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

@@ -27,28 +27,37 @@ const AutoGenerateAvatar = memo<AutoGenerateAvatarProps>(
     const locale = useGlobalStore(globalGeneralSelectors.currentLanguage);
 
     return (
-      <Flexbox>
-        <div style={{ opacity: loading ? 0.6 : undefined }}>
-          <EmojiPicker
-            backgroundColor={background}
-            locale={locale}
-            onChange={onChange}
-            value={value}
-          />
-        </div>
+      <Flexbox
+        align={'center'}
+        flex={'none'}
+        gap={2}
+        horizontal
+        padding={2}
+        style={{
+          background: theme.colorBgContainer,
+          border: `1px solid ${theme.colorBorderSecondary}`,
+          borderRadius: 32,
+          paddingRight: 8,
+          width: 'fit-content',
+        }}
+      >
+        <EmojiPicker
+          background={background || theme.colorFillTertiary}
+          loading={loading}
+          locale={locale}
+          onChange={onChange}
+          size={48}
+          style={{
+            background: theme.colorFillTertiary,
+          }}
+          value={value}
+        />
         <ActionIcon
-          active
-          disable={!canAutoGenerate}
+          disabled={!canAutoGenerate}
           icon={Wand2}
           loading={loading}
           onClick={onGenerate}
           size="small"
-          style={{
-            bottom: -4,
-            color: theme.colorInfo,
-            insetInlineEnd: -4,
-            position: 'absolute',
-          }}
           title={!canAutoGenerate ? t('autoGenerateTooltipDisabled') : t('autoGenerate')}
         />
       </Flexbox>

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

@@ -1,6 +1,4 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Input, InputProps } from 'antd';
-import { useTheme } from 'antd-style';
+import { ActionIcon, Input, InputProps } from '@lobehub/ui';
 import { Wand2 } from 'lucide-react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +14,6 @@ export interface AutoGenerateInputProps extends Omit<InputProps, 'onChange'> {
 const AutoGenerateInput = memo<AutoGenerateInputProps>(
   ({ loading, value, onChange, onGenerate, canAutoGenerate, ...props }) => {
     const { t } = useTranslation('common');
-    const theme = useTheme();
 
     const [input, setInput] = useState<string>(value || '');
 
@@ -36,21 +33,18 @@ const AutoGenerateInput = memo<AutoGenerateInputProps>(
         suffix={
           onGenerate && (
             <ActionIcon
-              active
-              disable={!canAutoGenerate}
+              disabled={!canAutoGenerate}
               icon={Wand2}
               loading={loading}
               onClick={onGenerate}
               size="small"
               style={{
-                color: theme.colorInfo,
                 marginRight: -4,
               }}
               title={!canAutoGenerate ? t('autoGenerateTooltipDisabled') : t('autoGenerate')}
             />
           )
         }
-        type="block"
         {...props}
         onBlur={() => {
           updateValue();

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

@@ -1,6 +1,4 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Select, SelectProps } from 'antd';
-import { useTheme } from 'antd-style';
+import { ActionIcon, Select, type SelectProps } from '@lobehub/ui';
 import { isString } from 'lodash-es';
 import { Wand2 } from 'lucide-react';
 import { memo } from 'react';
@@ -13,26 +11,26 @@ export interface AutoGenerateInputProps extends SelectProps {
 }
 
 const AutoGenerateSelect = memo<AutoGenerateInputProps>(
-  ({ loading, onGenerate, value, canAutoGenerate, ...props }) => {
+  ({ loading, onGenerate, value, canAutoGenerate, onChange, ...props }) => {
     const { t } = useTranslation('common');
-    const theme = useTheme();
 
     return (
       <Select
         mode="tags"
+        onChange={(v) => {
+          onChange?.(isString(v) ? v.split(',') : v);
+        }}
         open={false}
         style={{ width: '100%' }}
         suffixIcon={
           onGenerate && (
             <ActionIcon
-              active
-              disable={!canAutoGenerate}
+              disabled={!canAutoGenerate}
               icon={Wand2}
               loading={loading}
               onClick={onGenerate}
               size={'small'}
               style={{
-                color: theme.colorInfo,
                 marginRight: -4,
               }}
               title={!canAutoGenerate ? t('autoGenerateTooltipDisabled') : t('autoGenerate')}

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

@@ -1,24 +1,84 @@
-import { Swatches, primaryColorsSwatches } from '@lobehub/ui';
+import { ColorSwatches, ColorSwatchesProps, primaryColors } from '@lobehub/ui';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
 
-interface BackgroundSwatchesProps {
-  backgroundColor?: string;
-  onChange: (color: string) => void;
+interface BackgroundSwatchesProps
+  extends Pick<ColorSwatchesProps, 'defaultValue' | 'value' | 'onChange'> {
+  onValuesChange?: ColorSwatchesProps['onChange'];
 }
 
 const BackgroundSwatches = memo<BackgroundSwatchesProps>(
-  ({ backgroundColor = DEFAULT_BACKGROUND_COLOR, onChange }) => {
-    const handleSelect = (v: any) => {
-      onChange(v || DEFAULT_BACKGROUND_COLOR);
-    };
-
+  ({ defaultValue = DEFAULT_BACKGROUND_COLOR, value, onChange, onValuesChange }) => {
+    const { t } = useTranslation('color');
     return (
-      <Swatches
-        activeColor={backgroundColor}
-        colors={primaryColorsSwatches}
-        onSelect={handleSelect}
+      <ColorSwatches
+        colors={[
+          {
+            color: 'rgba(0, 0, 0, 0)',
+            title: t('default'),
+          },
+          {
+            color: primaryColors.red,
+            title: t('red'),
+          },
+          {
+            color: primaryColors.orange,
+            title: t('orange'),
+          },
+          {
+            color: primaryColors.gold,
+            title: t('gold'),
+          },
+          {
+            color: primaryColors.yellow,
+            title: t('yellow'),
+          },
+          {
+            color: primaryColors.lime,
+            title: t('lime'),
+          },
+          {
+            color: primaryColors.green,
+            title: t('green'),
+          },
+          {
+            color: primaryColors.cyan,
+            title: t('cyan'),
+          },
+          {
+            color: primaryColors.blue,
+            title: t('blue'),
+          },
+          {
+            color: primaryColors.geekblue,
+            title: t('geekblue'),
+          },
+          {
+            color: primaryColors.purple,
+            title: t('purple'),
+          },
+          {
+            color: primaryColors.magenta,
+            title: t('magenta'),
+          },
+          {
+            color: primaryColors.volcano,
+            title: t('volcano'),
+          },
+        ]}
+        defaultValue={defaultValue}
+        enableColorPicker
+        onChange={(v) => {
+          onChange?.(v);
+          onValuesChange?.(v);
+        }}
+        texts={{
+          custom: t('custom'),
+          presets: t('presets'),
+        }}
+        value={value}
       />
     );
   },