@lobehub/chat 1.83.8 → 1.84.1

package/src/app/[variants]/(main)/discover/search/_layout/Mobile/Header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MobileNavBar } from '@lobehub/ui/mobile';
+import { ChatHeader } from '@lobehub/ui/mobile';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import urlJoin from 'url-join';
@@ -15,8 +15,7 @@ const Header = memo(() => {
   const type = useDiscoverTab();
 
   return (
-    <MobileNavBar
-      contentStyles={{ center: { display: 'none' }, left: { flex: 'none' } }}
+    <ChatHeader
       onBackClick={() => router.push(urlJoin('/discover', type as string))}
       right={<StoreSearchBar autoFocus={false} mobile style={{ width: '100%' }} />}
       showBackButton
@@ -24,6 +23,7 @@ const Header = memo(() => {
         ...mobileHeaderSticky,
         overflow: 'unset',
       }}
+      styles={{ center: { display: 'none' }, left: { flex: 'none' } }}
     />
   );
 });

package/src/app/[variants]/(main)/discover/search/_layout/Mobile/Nav.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { TabsNav } from '@lobehub/ui';
+import { Tabs } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -35,8 +35,9 @@ const Nav = memo(() => {
 
   return (
     <Flexbox style={{ paddingInline: 16 }}>
-      <TabsNav
+      <Tabs
         activeKey={activeKey}
+        compact
         items={items
           .filter((item: any) => item?.key !== DiscoverTab.Home)
           .map((item: any) => ({
@@ -47,7 +48,6 @@ const Nav = memo(() => {
               </div>
             ),
           }))}
-        variant={'compact'}
       />
     </Flexbox>
   );

package/src/app/[variants]/(main)/files/(content)/@menu/features/FileMenu/index.tsx

@@ -82,13 +82,13 @@ const FileMenu = memo(() => {
   return (
     <Flexbox>
       <Menu
+        compact
         items={items}
         onClick={({ key }) => {
           setActiveKey(key);
         }}
         selectable
         selectedKeys={[activeKey]}
-        variant={'compact'}
       />
     </Flexbox>
   );

package/src/app/[variants]/(main)/files/(content)/@menu/features/KnowledgeBase/Item/Content.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, EditableText, Icon } from '@lobehub/ui';
-import { App, Dropdown, type MenuProps, Typography } from 'antd';
+import { ActionIcon, Dropdown, EditableText, Icon, type MenuProps } from '@lobehub/ui';
+import { App, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { LucideLoader2, MoreVertical, PencilLine, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
@@ -129,6 +129,10 @@ const Content = memo<KnowledgeBaseItemProps>(({ id, name, showMore }) => {
       ) : (
         <EditableText
           editing={editing}
+          inputProps={{
+            autoFocus: true,
+            maxLength: 64,
+          }}
           onChangeEnd={(v) => {
             if (name !== v) {
               updateKnowledgeBase(id, { name: v });
@@ -140,9 +144,7 @@ const Content = memo<KnowledgeBaseItemProps>(({ id, name, showMore }) => {
           }}
           onEditingChange={toggleEditing}
           showEditIcon={false}
-          size={'small'}
           style={{ height: 28 }}
-          type={'pure'}
           value={name}
         />
       )}

package/src/app/[variants]/(main)/files/(content)/NotSupportClient.tsx

@@ -13,7 +13,7 @@ import { LOBE_CHAT_CLOUD } from '@/const/branding';
 import { DATABASE_SELF_HOSTING_URL, OFFICIAL_URL, UTM_SOURCE } from '@/const/url';
 
 const BLOCK_SIZE = 100;
-const ICON_SIZE = 72;
+const ICON_SIZE = { size: 72, strokeWidth: 1.5 };
 
 const useStyles = createStyles(({ css, token }) => ({
   actionTitle: css`
@@ -100,7 +100,7 @@ const NotSupportClient = () => {
           }}
           width={BLOCK_SIZE}
         >
-          <Icon icon={FileImage} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+          <Icon icon={FileImage} size={ICON_SIZE} />
         </Center>
         <Center
           className={styles.icon}
@@ -112,7 +112,7 @@ const NotSupportClient = () => {
           }}
           width={BLOCK_SIZE}
         >
-          <Icon icon={FileUpIcon} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+          <Icon icon={FileUpIcon} size={ICON_SIZE} />
         </Center>
         <Center
           className={styles.icon}
@@ -123,7 +123,7 @@ const NotSupportClient = () => {
           }}
           width={BLOCK_SIZE}
         >
-          <Icon icon={FileText} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+          <Icon icon={FileText} size={ICON_SIZE} />
         </Center>
       </Flexbox>
 

package/src/app/[variants]/(main)/files/(content)/_layout/Desktop/Container.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const Container = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+
+  return (
+    <Flexbox
+      flex={1}
+      style={{
+        background: theme.colorBgContainerSecondary,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      {children}
+    </Flexbox>
+  );
+});
+
+export default Container;

package/src/app/[variants]/(main)/files/(content)/_layout/Desktop/RegisterHotkeys.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { useRegisterFilesHotkeys } from '@/hooks/useHotkeys';
+
+const RegisterHotkeys = () => {
+  useRegisterFilesHotkeys();
+  return null;
+};
+
+export default RegisterHotkeys;

package/src/app/[variants]/(main)/files/(content)/_layout/Desktop/index.tsx

@@ -3,6 +3,8 @@ import { Flexbox } from 'react-layout-kit';
 import FilePanel from '@/features/FileSidePanel';
 
 import { LayoutProps } from '../type';
+import Container from './Container';
+import RegisterHotkeys from './RegisterHotkeys';
 
 const Layout = ({ children, menu, modal }: LayoutProps) => {
   return (
@@ -10,14 +12,13 @@ const Layout = ({ children, menu, modal }: LayoutProps) => {
       <Flexbox
         height={'100%'}
         horizontal
-        style={{ maxWidth: 'calc(100vw - 64px)', overflow: 'hidden', position: 'relative' }}
+        style={{ maxWidth: '100%', overflow: 'hidden', position: 'relative' }}
         width={'100%'}
       >
         <FilePanel>{menu}</FilePanel>
-        <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
-          {children}
-        </Flexbox>
+        <Container>{children}</Container>
       </Flexbox>
+      <RegisterHotkeys />
       {modal}
     </>
   );

package/src/app/[variants]/(main)/files/[id]/Header.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Button, Divider, Typography } from 'antd';
+import { ActionIcon, Button } from '@lobehub/ui';
+import { Divider, Typography } from 'antd';
 import { useTheme } from 'antd-style';
 import { ArrowLeftIcon, DownloadIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
@@ -32,7 +32,7 @@ const Header = memo<HeaderProps>(({ filename, url }) => {
     >
       <Flexbox align={'baseline'} horizontal>
         <Button
-          icon={<Icon icon={ArrowLeftIcon} />}
+          icon={ArrowLeftIcon}
           onClick={() => {
             router.push('/files');
           }}

package/src/app/[variants]/(main)/files/features/FileDetail.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
-import { Descriptions, Divider, Tag } from 'antd';
+import { Icon, Tag } from '@lobehub/ui';
+import { Descriptions, Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import dayjs from 'dayjs';
 import { BoltIcon } from 'lucide-react';

package/src/app/[variants]/(main)/profile/(home)/Client.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { Form, type ItemGroup } from '@lobehub/ui';
+import { Form, type FormGroupItemType, Input } from '@lobehub/ui';
+import { Skeleton } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -13,39 +14,49 @@ import { authSelectors, userProfileSelectors } from '@/store/user/selectors';
 
 import SSOProvidersList from './features/SSOProvidersList';
 
-type SettingItemGroup = ItemGroup;
-
-const Client = memo<{ mobile?: boolean }>(() => {
+const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
   const [isLoginWithNextAuth, isLogin] = useUserStore((s) => [
     authSelectors.isLoginWithNextAuth(s),
     authSelectors.isLogin(s),
   ]);
-  const [nickname, username, userProfile] = useUserStore((s) => [
+  const [nickname, username, userProfile, loading] = useUserStore((s) => [
     userProfileSelectors.nickName(s),
     userProfileSelectors.username(s),
     userProfileSelectors.userProfile(s),
+    !s.isLoaded,
   ]);
 
   const [form] = Form.useForm();
   const { t } = useTranslation('auth');
 
-  const profile: SettingItemGroup = {
+  if (loading)
+    return (
+      <Skeleton
+        active
+        paragraph={{ rows: 6 }}
+        style={{ padding: mobile ? 16 : undefined }}
+        title={false}
+      />
+    );
+
+  const profile: FormGroupItemType = {
     children: [
       {
         children: enableAuth && !isLogin ? <UserAvatar /> : <AvatarWithUpload />,
         label: t('profile.avatar'),
+        layout: 'horizontal',
         minWidth: undefined,
       },
       {
-        children: nickname || username,
+        children: <Input disabled />,
         label: t('profile.username'),
-        minWidth: undefined,
+        name: 'username',
       },
       {
-        children: userProfile?.email || '--',
+        children: <Input disabled />,
         hidden: !isLoginWithNextAuth || !userProfile?.email,
         label: t('profile.email'),
-        minWidth: undefined,
+        name: 'email',
       },
       {
         children: <SSOProvidersList />,
@@ -58,7 +69,17 @@ const Client = memo<{ mobile?: boolean }>(() => {
     title: t('tab.profile'),
   };
   return (
-    <Form form={form} items={[profile]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />
+    <Form
+      form={form}
+      initialValues={{
+        email: userProfile?.email || '--',
+        username: nickname || username,
+      }}
+      items={[profile]}
+      itemsType={'group'}
+      variant={'borderless'}
+      {...FORM_STYLE}
+    />
   );
 });
 

package/src/app/[variants]/(main)/profile/(home)/features/SSOProvidersList/index.tsx

@@ -5,13 +5,12 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { modal, notification } from '@/components/AntdStaticMethods';
+import AuthIcons from '@/components/NextAuth/AuthIcons';
 import { useOnlyFetchOnceSWR } from '@/libs/swr';
 import { userService } from '@/services/user';
 import { useUserStore } from '@/store/user';
 import { userProfileSelectors } from '@/store/user/selectors';
 
-import AuthIcons from '@/components/NextAuth/AuthIcons';
-
 const { Item } = List;
 
 const providerNameStyle: CSSProperties = {
@@ -69,7 +68,7 @@ export const SSOProvidersList = memo(() => {
             <Flexbox gap={4} horizontal>
               <CopyButton content={item.providerAccountId} size={'small'} />
               <ActionIcon
-                disable={!allowUnlink}
+                disabled={!allowUnlink}
                 icon={Unlink}
                 onClick={() => handleUnlinkSSO(item.provider, item.providerAccountId)}
                 size={'small'}
@@ -79,7 +78,7 @@ export const SSOProvidersList = memo(() => {
           avatar={AuthIcons(item.provider)}
           date={item.expires_at}
           description={item.providerAccountId}
-          key={index}
+          key={[item.provider, item.providerAccountId].join('-')}
           onMouseEnter={() => setHoveredIndex(index)}
           onMouseLeave={() => setHoveredIndex(null)}
           showAction={hoveredIndex === index}

package/src/app/[variants]/(main)/profile/@category/features/CategoryContent.tsx

@@ -17,6 +17,7 @@ const CategoryContent = memo(() => {
 
   return (
     <Menu
+      compact
       items={cateItems}
       onClick={({ key }) => {
         const activeKey = key === ProfileTabs.Profile ? '/' : key;
@@ -25,7 +26,6 @@ const CategoryContent = memo(() => {
       }}
       selectable
       selectedKeys={[activeTab]}
-      variant={'compact'}
     />
   );
 });

package/src/app/[variants]/(main)/profile/_layout/Desktop/Header.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { ActionIcon, ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
+import { ActionIcon } from '@lobehub/ui';
+import { ChatHeader } from '@lobehub/ui/chat';
 import { Drawer, type DrawerProps } from 'antd';
 import { createStyles } from 'antd-style';
 import { Menu } from 'lucide-react';
@@ -37,14 +38,14 @@ const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
       <ChatHeader
         className={styles.container}
         left={
-          <ChatHeaderTitle
+          <ChatHeader.Title
             title={
               <Flexbox align={'center'} className={styles.title} gap={4} horizontal>
                 <ActionIcon
                   color={theme.colorText}
                   icon={Menu}
                   onClick={() => setOpen(true)}
-                  size={{ blockSize: 32, fontSize: 18 }}
+                  size={{ blockSize: 32, size: 18 }}
                 />
                 {title}
               </Flexbox>

package/src/app/[variants]/(main)/profile/_layout/Desktop/SideBar.tsx

@@ -13,8 +13,8 @@ const useStyles = createStyles(({ token, css }) => ({
   container: css`
     padding-block: 0 16px;
     padding-inline: 12px;
-    border-inline-end: 1px solid ${token.colorBorder};
-    background: ${token.colorBgContainer};
+    border-inline-end: 1px solid ${token.colorBorderSecondary};
+    background: ${token.colorBgLayout};
   `,
 }));
 

package/src/app/[variants]/(main)/profile/_layout/Mobile/Header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { ChatHeader } from '@lobehub/ui/mobile';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -23,9 +23,9 @@ const Header = memo(() => {
   };
 
   return (
-    <MobileNavBar
+    <ChatHeader
       center={
-        <MobileNavBarTitle
+        <ChatHeader.Title
           title={
             <Flexbox align={'center'} gap={8} horizontal>
               <span style={{ lineHeight: 1.2 }}> {t(`tab.${activeSettingsKey}`)}</span>

package/src/app/[variants]/(main)/profile/features/ClerkProfile.tsx

@@ -5,7 +5,6 @@ import { ElementsConfig } from '@clerk/types';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 
-
 export const useStyles = createStyles(
   ({ css, responsive, token }) =>
     ({

package/src/app/[variants]/(main)/profile/stats/Client.tsx

@@ -31,7 +31,7 @@ const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
           <ShareButton />
         </Flexbox>
       )}
-      <FormGroup style={FORM_STYLE.style} title={t('tab.stats')} variant={'pure'}>
+      <FormGroup style={FORM_STYLE.style} title={t('tab.stats')} variant={'borderless'}>
         <Grid maxItemWidth={150} paddingBlock={16} rows={4}>
           <TotalAssistants mobile={mobile} />
           <TotalTopics mobile={mobile} />

package/src/app/[variants]/(main)/profile/stats/features/AiHeatmaps.tsx

@@ -1,6 +1,5 @@
 import { Heatmaps, HeatmapsProps } from '@lobehub/charts';
-import { FormGroup, Icon } from '@lobehub/ui';
-import { Tag } from 'antd';
+import { FormGroup, Icon, Tag } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { FlameIcon } from 'lucide-react';
 import { readableColor } from 'polished';
@@ -119,7 +118,7 @@ const AiHeatmaps = memo<Omit<HeatmapsProps, 'data'> & { inShare?: boolean; mobil
         extra={tags}
         style={FORM_STYLE.style}
         title={t('stats.lastYearActivity')}
-        variant={'pure'}
+        variant={'borderless'}
       >
         <Flexbox paddingBlock={24}>{content}</Flexbox>
       </FormGroup>

package/src/app/[variants]/(main)/profile/stats/features/AssistantsRank.tsx

@@ -68,13 +68,13 @@ export const AssistantsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
             <ActionIcon
               icon={MaximizeIcon}
               onClick={() => setOpen(true)}
-              size={{ blockSize: 28, fontSize: 20 }}
+              size={{ blockSize: 28, size: 20 }}
             />
           )
         }
         style={FORM_STYLE.style}
         title={t('stats.assistantsRank.title')}
-        variant={'pure'}
+        variant={'borderless'}
       >
         <Flexbox paddingBlock={16}>
           <BarList

package/src/app/[variants]/(main)/profile/stats/features/ModelsRank.tsx

@@ -38,13 +38,13 @@ export const TopicsRank = memo(() => {
             <ActionIcon
               icon={MaximizeIcon}
               onClick={() => setOpen(true)}
-              size={{ blockSize: 28, fontSize: 20 }}
+              size={{ blockSize: 28, size: 20 }}
             />
           ) : undefined
         }
         style={FORM_STYLE.style}
         title={t('stats.modelsRank.title')}
-        variant={'pure'}
+        variant={'borderless'}
       >
         <Flexbox horizontal paddingBlock={16}>
           <BarList

package/src/app/[variants]/(main)/profile/stats/features/ShareButton/ShareModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { type FormItemProps, FormModal, FormModalProps } from '@lobehub/ui';
-import { Segmented, Skeleton } from 'antd';
+import { type FormItemProps, FormModal, FormModalProps, Segmented } from '@lobehub/ui';
+import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import dynamic from 'next/dynamic';
 import { memo, useState } from 'react';

package/src/app/[variants]/(main)/profile/stats/features/TopicsRank.tsx

@@ -36,9 +36,7 @@ export const TopicsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
       url: '/chat',
     });
     return {
-      icon: (
-        <Icon color={theme.colorTextDescription} icon={MessageSquareIcon} size={{ fontSize: 16 }} />
-      ),
+      icon: <Icon color={theme.colorTextDescription} icon={MessageSquareIcon} size={16} />,
       link,
       name: (
         <Link href={link} style={{ color: 'inherit' }}>
@@ -57,13 +55,13 @@ export const TopicsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
             <ActionIcon
               icon={MaximizeIcon}
               onClick={() => setOpen(true)}
-              size={{ blockSize: 28, fontSize: 20 }}
+              size={{ blockSize: 28, size: 20 }}
             />
           )
         }
         style={FORM_STYLE.style}
         title={t('stats.topicsRank.title')}
-        variant={'pure'}
+        variant={'borderless'}
       >
         <Flexbox paddingBlock={16}>
           <BarList

package/src/app/[variants]/(main)/repos/[id]/@menu/Menu/index.tsx

@@ -50,13 +50,13 @@ const FileMenu = memo<{ id: string }>(({ id }) => {
   return (
     <Flexbox>
       <Menu
+        compact
         items={items}
         onClick={({ key }) => {
           setActiveKey(key);
         }}
         selectable
         selectedKeys={[activeKey]}
-        variant={'compact'}
       />
     </Flexbox>
   );

package/src/app/[variants]/(main)/repos/[id]/evals/components/Tabs.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { TabsNav } from '@lobehub/ui';
+import { Tabs as TabsNav } from '@lobehub/ui';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 

package/src/app/[variants]/(main)/repos/[id]/evals/dataset/CreateDataset/CreateForm.tsx

@@ -1,22 +1,10 @@
-import { Button, Form, Input } from 'antd';
-import { css, cx } from 'antd-style';
+import { Button, Form, Input } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
 import { CreateNewEvalDatasets } from '@/types/eval';
 
-const formItem = css`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  .ant-form-item {
-    margin-block-end: 0;
-  }
-`;
-
 interface CreateFormProps {
   knowledgeBaseId: string;
   onClose?: () => void;
@@ -41,31 +29,30 @@ const CreateForm = memo<CreateFormProps>(({ onClose, knowledgeBaseId }) => {
   };
 
   return (
-    <Flexbox gap={8}>
-      <Form className={cx(formItem)} onFinish={onFinish}>
-        <Form.Item
-          name={'name'}
-          rules={[{ message: t('addDataset.name.required'), required: true }]}
-        >
-          <Input autoFocus placeholder={t('addDataset.name.placeholder')} />
-        </Form.Item>
-        <Form.Item name={'description'}>
-          <Input.TextArea
-            placeholder={t('addDataset.description.placeholder')}
-            style={{ minHeight: 120 }}
-          />
-        </Form.Item>
-        <Button
-          block
-          htmlType={'submit'}
-          loading={loading}
-          style={{ marginTop: 16 }}
-          type={'primary'}
-        >
+    <Form
+      footer={
+        <Button block htmlType={'submit'} loading={loading} type={'primary'}>
           {t('addDataset.confirm')}
         </Button>
-      </Form>
-    </Flexbox>
+      }
+      gap={16}
+      items={[
+        {
+          children: <Input autoFocus placeholder={t('addDataset.name.placeholder')} />,
+          label: t('addDataset.name.placeholder'),
+          name: 'name',
+          rules: [{ message: t('addDataset.name.required'), required: true }],
+        },
+        {
+          children: <Input placeholder={t('addDataset.description.placeholder')} />,
+          label: t('addDataset.description.placeholder'),
+          name: 'description',
+        },
+      ]}
+      itemsType={'flat'}
+      layout={'vertical'}
+      onFinish={onFinish}
+    />
   );
 });
 

package/src/app/[variants]/(main)/repos/[id]/evals/dataset/CreateDataset/index.tsx

@@ -24,7 +24,7 @@ interface CreateDatasetModalProps {
 
 export const useCreateDatasetModal = createModal<CreateDatasetModalProps>((instance, params) => ({
   content: (
-    <Flexbox paddingInline={16} style={{ marginBlock: 24 }}>
+    <Flexbox paddingInline={16} style={{ paddingBottom: 16 }}>
       <CreateForm
         knowledgeBaseId={params!.knowledgeBaseId}
         onClose={() => {

package/src/app/[variants]/(main)/repos/[id]/evals/dataset/DatasetDetail/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { ProColumns, ProTable } from '@ant-design/pro-components';
-import { ActionIcon } from '@lobehub/ui';
-import { Button, Typography, Upload } from 'antd';
+import { ActionIcon, Button } from '@lobehub/ui';
+import { Typography, Upload } from 'antd';
 import { createStyles } from 'antd-style';
 import { Edit2Icon, Trash2Icon } from 'lucide-react';
 import { parseAsInteger, useQueryState } from 'nuqs';