@lobehub/chat 1.83.8 → 1.84.1

package/src/features/FileManager/FileList/FileListItem/index.tsx

@@ -1,5 +1,5 @@
-import { Icon, Tooltip } from '@lobehub/ui';
-import { Button, Checkbox } from 'antd';
+import { Button, Tooltip } from '@lobehub/ui';
+import { Checkbox } from 'antd';
 import { createStyles } from 'antd-style';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -35,6 +35,7 @@ const useStyles = createStyles(({ css, token, cx, isDarkMode }) => {
       cursor: pointer;
       margin-inline: 24px;
       border-block-end: 1px solid ${isDarkMode ? token.colorSplit : rgba(token.colorSplit, 0.06)};
+      border-radius: ${token.borderRadius}px;
 
       &:hover {
         background: ${token.colorFillTertiary};
@@ -121,6 +122,7 @@ const FileRenderItem = memo<FileRenderItemProps>(
         className={cx(styles.container, selected && styles.selected)}
         height={64}
         horizontal
+        paddingInline={8}
       >
         <Flexbox
           align={'center'}
@@ -173,7 +175,7 @@ const FileRenderItem = memo<FileRenderItemProps>(
                 >
                   <Button
                     disabled={!isSupportedForChunking}
-                    icon={<Icon icon={FileBoxIcon} />}
+                    icon={FileBoxIcon}
                     loading={isCreatingFileParseTask}
                     onClick={() => {
                       parseFiles([id]);

package/src/features/FileManager/FileList/FileSkeleton.tsx

@@ -8,7 +8,7 @@ const FileSkeleton = () => (
     {Array.from({ length: 4 }).map((_, index) => (
       <Flexbox align={'center'} distribution={'space-between'} height={64} horizontal key={index}>
         <Flexbox align={'center'} flex={1} gap={12} horizontal paddingInline={12}>
-          <Skeleton.Avatar active size={'large'} />
+          <Skeleton.Avatar active shape={'square'} size={48} />
           <Skeleton.Button active style={{ height: 20, width: 300 }} />
         </Flexbox>
         <Flexbox paddingInline={24} width={FILE_DATE_WIDTH}>

package/src/features/FileManager/FileList/ToolBar/Config.tsx

@@ -13,14 +13,15 @@ const Config = memo<ConfigProps>(({ config, onConfigChange }) => {
 
   return (
     <Flexbox
-      gap={6}
+      align={'center'}
+      gap={8}
       horizontal
       onClick={() => {
         onConfigChange({ showFilesInKnowledgeBase: !config.showFilesInKnowledgeBase });
       }}
     >
-      <Switch size={'small'} value={config.showFilesInKnowledgeBase} />
       {t('FileManager.config.showFilesInKnowledgeBase')}
+      <Switch size={'small'} value={config.showFilesInKnowledgeBase} />
     </Flexbox>
   );
 });

package/src/features/FileManager/FileList/ToolBar/MultiSelectActions.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@lobehub/ui';
-import { App, Button, Checkbox, Skeleton } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
+import { App, Checkbox, Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { BookMinusIcon, BookPlusIcon, FileBoxIcon, Trash2Icon } from 'lucide-react';
 import { rgba } from 'polished';
@@ -74,7 +74,7 @@ const MultiSelectActions = memo<MultiSelectActionsProps>(
             {isInKnowledgeBase ? (
               <>
                 <Button
-                  icon={<Icon icon={BookMinusIcon} />}
+                  icon={BookMinusIcon}
                   onClick={() => {
                     modal.confirm({
                       okButtonProps: {
@@ -94,36 +94,43 @@ const MultiSelectActions = memo<MultiSelectActionsProps>(
                   {t('FileManager.actions.removeFromKnowledgeBase')}
                 </Button>
                 <Button
+                  color={'default'}
                   icon={<Icon icon={BookPlusIcon} />}
                   onClick={() => {
                     onActionClick('addToOtherKnowledgeBase');
                   }}
                   size={'small'}
+                  variant={'filled'}
                 >
                   {t('FileManager.actions.addToOtherKnowledgeBase')}
                 </Button>
               </>
             ) : (
               <Button
+                color={'default'}
                 icon={<Icon icon={BookPlusIcon} />}
                 onClick={() => {
                   onActionClick('addToKnowledgeBase');
                 }}
                 size={'small'}
+                variant={'filled'}
               >
                 {t('FileManager.actions.addToKnowledgeBase')}
               </Button>
             )}
             <Button
+              color={'default'}
               icon={<Icon icon={FileBoxIcon} />}
               onClick={async () => {
                 await onActionClick('batchChunking');
               }}
               size={'small'}
+              variant={'filled'}
             >
               {t('FileManager.actions.batchChunking')}
             </Button>
             <Button
+              color={'danger'}
               danger
               icon={<Icon icon={Trash2Icon} />}
               onClick={async () => {
@@ -139,6 +146,7 @@ const MultiSelectActions = memo<MultiSelectActionsProps>(
                 });
               }}
               size={'small'}
+              variant={'filled'}
             >
               {t('batchDelete', { ns: 'common' })}
             </Button>

package/src/features/FileManager/FileList/index.tsx

@@ -90,7 +90,7 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category }) => {
           total={data?.length}
           totalFileIds={data?.map((item) => item.id) || []}
         />
-        <Flexbox align={'center'} className={styles.header} horizontal>
+        <Flexbox align={'center'} className={styles.header} horizontal paddingInline={8}>
           <Flexbox className={styles.headerItem} flex={1} style={{ paddingInline: 32 }}>
             {t('FileManager.title.title')}
           </Flexbox>

package/src/features/FileManager/Header/FilesSearchBar.tsx

@@ -22,22 +22,17 @@ const FilesSearchBar = memo<{ mobile?: boolean }>(({ mobile }) => {
     <SearchBar
       allowClear
       enableShortKey={!mobile}
-      // loading={isValidating}
       onChange={(e) => {
         setKeywords(e.target.value);
-
-        if (!e.target.value) {
-          setQuery(null);
-        }
-      }}
-      onPressEnter={() => {
-        setQuery(keywords);
+        if (!e.target.value) setQuery(null);
       }}
+      onPressEnter={() => setQuery(keywords)}
       placeholder={t('searchFilePlaceholder')}
       shortKey={hotkey}
       spotlight={!mobile}
       style={{ width: 320 }}
       value={keywords}
+      variant={'filled'}
     />
   );
 });

package/src/features/FileManager/Header/TogglePanelButton.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { ActionIcon, Tooltip } from '@lobehub/ui';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DESKTOP_HEADER_ICON_SIZE, FOLDER_WIDTH } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum } from '@/types/hotkey';
+
+export const TOOGLE_PANEL_BUTTON_ID = 'toggle-panel-button';
+
+const TogglePanelButton = memo(() => {
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ToggleLeftPanel));
+
+  const { t } = useTranslation(['file', 'hotkey']);
+
+  const showFilePanel = useGlobalStore(systemStatusSelectors.showFilePanel);
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+
+  return (
+    <Tooltip hotkey={hotkey} title={t('toggleLeftPanel.title', { ns: 'hotkey' })}>
+      <ActionIcon
+        icon={showFilePanel ? PanelLeftClose : PanelLeftOpen}
+        id={TOOGLE_PANEL_BUTTON_ID}
+        onClick={() => {
+          updateSystemStatus({
+            filePanelWidth: showFilePanel ? 0 : FOLDER_WIDTH,
+            showFilePanel: !showFilePanel,
+          });
+        }}
+        size={DESKTOP_HEADER_ICON_SIZE}
+      />
+    </Tooltip>
+  );
+});
+
+export default TogglePanelButton;

package/src/features/FileManager/Header/UploadFileButton.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
-import { Button, Dropdown, MenuProps, Upload } from 'antd';
+import { Button, Dropdown, Icon, MenuProps } from '@lobehub/ui';
+import { Upload } from 'antd';
 import { css, cx } from 'antd-style';
-import { FileUp, FolderUp, PlusCircleIcon } from 'lucide-react';
+import { FileUp, FolderUp, UploadIcon } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -66,7 +66,7 @@ const UploadFileButton = ({ knowledgeBaseId }: { knowledgeBaseId?: string }) =>
   return (
     <>
       <Dropdown menu={{ items }} placement="bottomRight">
-        <Button icon={<Icon icon={PlusCircleIcon} />}>{t('header.uploadButton')}</Button>
+        <Button icon={UploadIcon}>{t('header.uploadButton')}</Button>
       </Dropdown>
       <DragUpload
         enabledFiles

package/src/features/FileManager/Header/index.tsx

@@ -1,38 +1,26 @@
 'use client';
 
-import { ActionIcon } from '@lobehub/ui';
-import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { ChatHeader } from '@lobehub/ui/chat';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { DESKTOP_HEADER_ICON_SIZE, FOLDER_WIDTH } from '@/const/layoutTokens';
-import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
 
 import FilesSearchBar from './FilesSearchBar';
+import TogglePanelButton from './TogglePanelButton';
 import UploadFileButton from './UploadFileButton';
 
 const Header = memo<{ knowledgeBaseId?: string }>(({ knowledgeBaseId }) => {
-  const showFilePanel = useGlobalStore(systemStatusSelectors.showFilePanel);
-  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
-
   return (
-    <Flexbox distribution={'space-between'} horizontal paddingBlock={12} paddingInline={24}>
-      <Flexbox gap={8} horizontal>
-        <ActionIcon
-          icon={showFilePanel ? PanelLeftClose : PanelLeftOpen}
-          onClick={() => {
-            updateSystemStatus({
-              filePanelWidth: showFilePanel ? 0 : FOLDER_WIDTH,
-              showFilePanel: !showFilePanel,
-            });
-          }}
-          size={DESKTOP_HEADER_ICON_SIZE}
-        />
-        <FilesSearchBar />
-      </Flexbox>
-      <UploadFileButton knowledgeBaseId={knowledgeBaseId} />
-    </Flexbox>
+    <ChatHeader
+      left={
+        <>
+          <TogglePanelButton />
+          <FilesSearchBar />
+        </>
+      }
+      right={<UploadFileButton knowledgeBaseId={knowledgeBaseId} />}
+      styles={{
+        left: { padding: 0 },
+      }}
+    />
   );
 });
 

package/src/features/FileManager/index.tsx

@@ -26,7 +26,6 @@ const FileManager = memo<FileManagerProps>(({ title, knowledgeBaseId, category }
         >
           {title}
         </Typography.Text>
-
         <FileList category={category} knowledgeBaseId={knowledgeBaseId} />
       </Flexbox>
       <UploadDock />

package/src/features/FileSidePanel/index.tsx

@@ -12,7 +12,7 @@ import { systemStatusSelectors } from '@/store/global/selectors';
 export const useStyles = createStyles(({ css, token }) => ({
   panel: css`
     height: 100%;
-    background: ${token.colorBgContainer};
+    background: ${token.colorBgLayout};
   `,
 }));
 

package/src/features/FileViewer/NotSupport/index.tsx

@@ -1,6 +1,5 @@
 import { IDocument } from '@cyntler/react-doc-viewer';
-import { FluentEmoji } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, FluentEmoji } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import Link from 'next/link';
 import React, { ComponentType, useState } from 'react';

package/src/features/FileViewer/Renderer/TXT/index.tsx

@@ -22,7 +22,12 @@ const TXTViewer: DocRenderer = ({ mainState: { currentDocument } }) => {
   return (
     <Flexbox className={styles.page} id="txt-renderer">
       {!!currentDocument?.fileData ? (
-        <Highlighter language={'txt'} showLanguage={false} style={{ height: '100%' }} type={'pure'}>
+        <Highlighter
+          language={'txt'}
+          showLanguage={false}
+          style={{ height: '100%' }}
+          variant={'borderless'}
+        >
           {currentDocument?.fileData as string}
         </Highlighter>
       ) : (

package/src/features/HotkeyHelperPanel/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Drawer, Grid, TabsNav } from '@lobehub/ui';
+import { Drawer, Grid, Tabs } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -32,8 +32,9 @@ const HotkeyHelperPanel = memo(() => {
         title: { paddingBlock: 0 },
       }}
       title={
-        <TabsNav
+        <Tabs
           activeKey={active}
+          compact
           items={[
             {
               key: HotkeyGroupEnum.Essential,
@@ -45,7 +46,6 @@ const HotkeyHelperPanel = memo(() => {
             },
           ]}
           onChange={(key) => setActive(key as HotkeyGroupId)}
-          variant={'compact'}
         />
       }
     >

package/src/features/InitClientDB/EnableModal.tsx

@@ -1,5 +1,4 @@
-import { Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { CpuIcon, LibraryBig, ShieldCheck } from 'lucide-react';
 import { memo } from 'react';
@@ -95,7 +94,7 @@ const EnableClientDBModal = memo<EnableClientDBModalProps>(({ open }) => {
           {features.map((item) => (
             <Flexbox align={'flex-start'} gap={24} horizontal key={item.title}>
               <Center className={styles.iconCtn}>
-                <Icon className={styles.icon} icon={item.avatar} size={{ fontSize: 36 }} />
+                <Icon className={styles.icon} icon={item.avatar} size={36} />
               </Center>
               <Flexbox gap={8}>
                 <p className={styles.title}>{item.title}</p>

package/src/features/InitClientDB/ErrorResult.tsx

@@ -1,5 +1,5 @@
-import { Alert, Highlighter, Icon, Modal } from '@lobehub/ui';
-import { Button, Spin } from 'antd';
+import { Alert, Button, Highlighter, Icon, Modal } from '@lobehub/ui';
+import { Spin } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { PenToolIcon, TriangleAlert } from 'lucide-react';
@@ -75,7 +75,7 @@ const ErrorResult = memo<FailedModalProps>(({ children }) => {
           }}
         >
           <Center height={40} width={24}>
-            <Icon icon={TriangleAlert} size={{ fontSize: 20 }} />
+            <Icon icon={TriangleAlert} size={20} />
           </Center>
           <span className={styles.text}>{t('clientDB.initing.error')}</span>
         </Flexbox>
@@ -101,7 +101,7 @@ const ErrorResult = memo<FailedModalProps>(({ children }) => {
                 description={`[${error?.name}] ${error?.message}`}
                 extra={
                   <Flexbox gap={8} style={{ marginTop: 8, overflow: 'scroll' }} width={'100%'}>
-                    <Highlighter copyButtonSize={'small'} language={'json'}>
+                    <Highlighter actionIconSize={'small'} language={'json'}>
                       {JSON.stringify(error, null, 2)}
                     </Highlighter>
                   </Flexbox>

package/src/features/InitClientDB/features/DatabaseRepair/Backup.tsx

@@ -1,5 +1,5 @@
-import { Alert } from '@lobehub/ui';
-import { App, Button, Card, Typography } from 'antd';
+import { Alert, Button } from '@lobehub/ui';
+import { App, Card, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { AlertCircle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -45,7 +45,7 @@ const Backup = () => {
             message={t('clientDB.solve.backup.reset.alert')}
             showIcon
             type="error"
-            variant={'pure'}
+            variant={'borderless'}
           />
 
           <Button

package/src/features/InitClientDB/features/DatabaseRepair/Diagnosis.tsx

@@ -1,5 +1,5 @@
-import { Highlighter } from '@lobehub/ui';
-import { Card, List, Popover, Tag } from 'antd';
+import { Highlighter, Tag } from '@lobehub/ui';
+import { Card, List, Popover } from 'antd';
 import { createStyles } from 'antd-style';
 import dayjs from 'dayjs';
 import isEqual from 'fast-deep-equal';

package/src/features/InitClientDB/features/DatabaseRepair/Repair.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Alert, CodeEditor, Icon } from '@lobehub/ui';
-import { Button, Card, List, Typography } from 'antd';
+import { Alert, Button, CodeEditor, Icon } from '@lobehub/ui';
+import { Card, List, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import dayjs from 'dayjs';
 import isEqual from 'fast-deep-equal';

package/src/features/InitClientDB/features/DatabaseRepair/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, Segmented } from 'antd';
+import { Button, Segmented } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { AlertCircle, ArrowLeft, PenToolIcon as Tool } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -19,6 +19,12 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
+enum DatabaseRepairTab {
+  Backup = 'backup',
+  Diagnosis = 'diagnosis',
+  Repair = 'repair',
+}
+
 interface DatabaseRepairProps {
   setShowRepair: (value: boolean) => void;
 }
@@ -26,7 +32,7 @@ interface DatabaseRepairProps {
 const DatabaseRepair = memo<DatabaseRepairProps>(({ setShowRepair }) => {
   const { t } = useTranslation('common');
   const { styles } = useStyles();
-  const [activeTab, setActiveTab] = useState('diagnosis');
+  const [activeTab, setActiveTab] = useState<DatabaseRepairTab>(DatabaseRepairTab.Diagnosis);
 
   return (
     <Flexbox gap={12}>
@@ -40,7 +46,7 @@ const DatabaseRepair = memo<DatabaseRepairProps>(({ setShowRepair }) => {
           {t('back')}
         </Button>
         <Segmented
-          onChange={setActiveTab}
+          onChange={(v) => setActiveTab(v as DatabaseRepairTab)}
           options={[
             {
               label: (
@@ -75,9 +81,9 @@ const DatabaseRepair = memo<DatabaseRepairProps>(({ setShowRepair }) => {
         <Flexbox width={36} />
       </Flexbox>
 
-      {activeTab === 'diagnosis' && <Diagnosis />}
-      {activeTab === 'repair' && <Repair />}
-      {activeTab === 'backup' && <Backup />}
+      {activeTab === DatabaseRepairTab.Diagnosis && <Diagnosis />}
+      {activeTab === DatabaseRepairTab.Repair && <Repair />}
+      {activeTab === DatabaseRepairTab.Backup && <Backup />}
     </Flexbox>
   );
 });

package/src/features/KnowledgeBaseModal/AddFilesToKnowledgeBase/SelectForm.tsx

@@ -1,6 +1,5 @@
-import { MaterialFileTypeIcon } from '@lobehub/ui';
-import { App, Button, Form, Select } from 'antd';
-import { createStyles } from 'antd-style';
+import { Block, Button, Form, MaterialFileTypeIcon, Select } from '@lobehub/ui';
+import { App } from 'antd';
 import Link from 'next/link';
 import { memo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -9,25 +8,6 @@ import { Flexbox } from 'react-layout-kit';
 import RepoIcon from '@/components/RepoIcon';
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
 
-const useStyles = createStyles(({ css, token }) => ({
-  files: css`
-    height: 48px;
-    padding-block: 4px;
-    padding-inline: 8px;
-    border: 1px solid ${token.colorSplit};
-    border-radius: 6px;
-  `,
-  formItem: css`
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    .ant-form-item {
-      margin-block-end: 0;
-    }
-  `,
-}));
-
 interface CreateFormProps {
   fileIds: string[];
   knowledgeBaseId?: string;
@@ -36,7 +16,6 @@ interface CreateFormProps {
 
 const SelectForm = memo<CreateFormProps>(({ onClose, knowledgeBaseId, fileIds }) => {
   const { t } = useTranslation('knowledgeBase');
-  const { styles } = useStyles();
   const [loading, setLoading] = useState(false);
 
   const { message } = App.useApp();
@@ -67,47 +46,51 @@ const SelectForm = memo<CreateFormProps>(({ onClose, knowledgeBaseId, fileIds })
   };
 
   return (
-    <Flexbox gap={24}>
-      <Flexbox align={'center'} className={styles.files} gap={8} horizontal>
-        <MaterialFileTypeIcon filename={''} size={32} />
-        {t('addToKnowledgeBase.totalFiles', { count: fileIds.length })}
-      </Flexbox>
-      <Form className={styles.formItem} layout={'vertical'} onFinish={onFinish}>
-        <Form.Item
-          label={t('addToKnowledgeBase.id.title')}
-          name={'id'}
-          required={false}
-          rules={[{ message: t('addToKnowledgeBase.id.required'), required: true }]}
-        >
-          <Select
-            autoFocus
-            loading={isLoading}
-            options={(data || [])
-              .filter((item) => item.id !== knowledgeBaseId)
-              .map((item) => ({
-                label: (
-                  <Flexbox gap={8} horizontal>
-                    <RepoIcon />
-                    {item.name}
-                  </Flexbox>
-                ),
-                value: item.id,
-              }))}
-            placeholder={t('addToKnowledgeBase.id.placeholder')}
-          />
-        </Form.Item>
-
-        <Button
-          block
-          htmlType={'submit'}
-          loading={loading}
-          style={{ marginTop: 16 }}
-          type={'primary'}
-        >
+    <Form
+      footer={
+        <Button block htmlType={'submit'} loading={loading} type={'primary'}>
           {t('addToKnowledgeBase.confirm')}
         </Button>
-      </Form>
-    </Flexbox>
+      }
+      gap={16}
+      items={[
+        {
+          children: (
+            <Block align={'center'} gap={8} horizontal padding={16} variant={'filled'}>
+              <MaterialFileTypeIcon filename={''} size={32} />
+              {t('addToKnowledgeBase.totalFiles', { count: fileIds.length })}
+            </Block>
+          ),
+          noStyle: true,
+        },
+        {
+          children: (
+            <Select
+              autoFocus
+              loading={isLoading}
+              options={(data || [])
+                .filter((item) => item.id !== knowledgeBaseId)
+                .map((item) => ({
+                  label: (
+                    <Flexbox gap={8} horizontal>
+                      <RepoIcon />
+                      {item.name}
+                    </Flexbox>
+                  ),
+                  value: item.id,
+                }))}
+              placeholder={t('addToKnowledgeBase.id.placeholder')}
+            />
+          ),
+          label: t('addToKnowledgeBase.id.title'),
+          name: 'id',
+          rules: [{ message: t('addToKnowledgeBase.id.required'), required: true }],
+        },
+      ]}
+      itemsType={'flat'}
+      layout={'vertical'}
+      onFinish={onFinish}
+    />
   );
 });
 

package/src/features/KnowledgeBaseModal/AddFilesToKnowledgeBase/index.tsx

@@ -27,7 +27,7 @@ interface AddFilesToKnowledgeBaseModalProps {
 export const useAddFilesToKnowledgeBaseModal = createModal<AddFilesToKnowledgeBaseModalProps>(
   (instance, params) => ({
     content: (
-      <Flexbox paddingInline={16} style={{ marginBlock: 24 }}>
+      <Flexbox padding={16}>
         <SelectForm
           fileIds={params?.fileIds || []}
           knowledgeBaseId={params?.knowledgeBaseId}

package/src/features/KnowledgeBaseModal/AssignKnowledgeBase/Item/Action.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Button, Dropdown } from 'antd';
+import { ActionIcon, Button, Dropdown, Icon } from '@lobehub/ui';
 import { InfoIcon, MoreVerticalIcon, Trash2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/features/KnowledgeBaseModal/AssignKnowledgeBase/List.tsx

@@ -26,7 +26,7 @@ export const List = memo(() => {
     <Center gap={12} padding={40}>
       {error ? (
         <>
-          <Icon icon={ServerCrash} size={{ fontSize: 80 }} />
+          <Icon icon={ServerCrash} size={80} />
           {t('networkError')}
         </>
       ) : (