@lobehub/chat 1.83.8 → 1.84.1

package/src/features/Conversation/Messages/Assistant/FileChunks/Item/index.tsx

@@ -31,7 +31,7 @@ const ChunkItem = memo<ChunkItemProps>(({ id, fileId, similarity, text, filename
         openFilePreview({ chunkId: id, chunkText: text, fileId });
       }}
     >
-      <FileIcon fileName={filename} fileType={fileType} size={20} variant={'pure'} />
+      <FileIcon fileName={filename} fileType={fileType} size={20} variant={'raw'} />
       <Flexbox gap={12} horizontal justify={'space-between'} style={{ maxWidth: 200 }}>
         <Typography.Text ellipsis={{ tooltip: false }}>{filename}</Typography.Text>
         {/*<Typography.Text*/}

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/ToolTitle.tsx

@@ -56,7 +56,7 @@ const ToolTitle = memo<ToolTitleProps>(({ identifier, messageId, index, apiName,
   if (identifier === WebBrowsingManifest.identifier) {
     return (
       <Flexbox align={'center'} className={isLoading ? styles.shinyText : ''} gap={4} horizontal>
-        {isLoading ? <Loader /> : <Icon icon={Globe} size={{ fontSize: 13 }} />}
+        {isLoading ? <Loader /> : <Icon icon={Globe} size={13} />}
         <div>{t('search.title')}</div>/<span className={styles.apiName}>{apiName}</span>
       </Flexbox>
     );

package/src/features/Conversation/Messages/Assistant/Tool/Render/ErrorResponse.tsx

@@ -22,7 +22,7 @@ const ErrorResponse = memo<ErrorResponseProps>(({ id, type, body, message, plugi
     <Alert
       extra={
         <Flexbox>
-          <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+          <Highlighter actionIconSize={'small'} language={'json'} variant={'borderless'}>
             {JSON.stringify(body || { message, type }, null, 2)}
           </Highlighter>
         </Flexbox>

package/src/features/Conversation/Messages/Assistant/Tool/Render/KeyValueEditor.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { App, Button, Form, FormInstance, Input } from 'antd';
+import { ActionIcon, Button, Icon, Input } from '@lobehub/ui';
+import { App, Form, FormInstance } from 'antd';
 import { createStyles } from 'antd-style';
 import { LucidePlus, LucideTrash } from 'lucide-react';
 import { memo, useEffect, useRef, useState } from 'react';

package/src/features/Conversation/Messages/Assistant/Tool/Render/PluginSettings.tsx

@@ -1,5 +1,5 @@
-import { Avatar } from '@lobehub/ui';
-import { Button, Divider } from 'antd';
+import { Avatar, Button } from '@lobehub/ui';
+import { Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';

package/src/features/Conversation/Messages/User/ImageFileListViewer.tsx

@@ -1,4 +1,4 @@
-import { ImageGallery } from '@lobehub/ui';
+import { PreviewGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
 import GalleyGrid from '@/components/GalleyGrid';
@@ -18,9 +18,9 @@ interface FileListProps {
 
 const ImageFileListViewer = memo<FileListProps>(({ items }) => {
   return (
-    <ImageGallery>
+    <PreviewGroup>
       <GalleyGrid items={items} renderItem={ImageItem} />
-    </ImageGallery>
+    </PreviewGroup>
   );
 });
 

package/src/features/Conversation/Messages/User/MarkdownRender/ContentPreview.tsx

@@ -1,31 +1,8 @@
-import { Markdown } from '@lobehub/ui';
-import { Button } from 'antd';
-import { createStyles } from 'antd-style';
+import { Button, Markdown, MaskShadow } from '@lobehub/ui';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
-import { convertAlphaToSolid } from '@/utils/colorUtils';
-
-const useStyles = createStyles(({ css, token, isDarkMode }, displayMode: 'chat' | 'docs') => {
-  const darkBg = convertAlphaToSolid(token.colorFillSecondary, token.colorBgContainer);
-
-  const maskBgColor =
-    displayMode === 'docs' ? token.colorBgLayout : isDarkMode ? darkBg : token.colorBgContainer;
-
-  return {
-    mask: css`
-      pointer-events: none;
-
-      position: absolute;
-      inset-block: 0 0;
-
-      width: 100%;
-
-      background: linear-gradient(0deg, ${maskBgColor} 0%, transparent 50%);
-    `,
-  };
-});
 
 interface ContentPreviewProps {
   content: string;
@@ -33,18 +10,16 @@ interface ContentPreviewProps {
   id: string;
 }
 
-const ContentPreview = ({ content, id, displayMode }: ContentPreviewProps) => {
+const ContentPreview = ({ content, id }: ContentPreviewProps) => {
   const { t } = useTranslation('chat');
 
   const [openMessageDetail] = useChatStore((s) => [s.openMessageDetail]);
 
-  const { styles } = useStyles(displayMode);
   return (
     <Flexbox>
-      <Flexbox style={{ position: 'relative' }}>
+      <MaskShadow>
         <Markdown variant={'chat'}>{content.slice(0, 1000)}</Markdown>
-        <div className={styles.mask} />
-      </Flexbox>
+      </MaskShadow>
       <Flexbox padding={4}>
         <Button
           block

package/src/features/Conversation/components/BackBottom/index.tsx

@@ -1,5 +1,4 @@
-import { Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
 import { ListEnd } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/features/Conversation/components/ChatItem/ActionsBar.tsx

@@ -1,4 +1,4 @@
-import { ActionEvent, ActionIconGroup, type ActionIconGroupProps } from '@lobehub/ui';
+import { ActionIconGroup, type ActionIconGroupEvent, type ActionIconGroupProps } from '@lobehub/ui';
 import { App } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { memo, use, useCallback } from 'react';
@@ -19,9 +19,10 @@ const ActionsBar = memo<ActionsBarProps>((props) => {
 
   return (
     <ActionIconGroup
-      dropdownMenu={[edit, copy, regenerate, divider, del]}
       items={[regenerate, edit]}
-      type="ghost"
+      menu={{
+        items: [edit, copy, regenerate, divider, del],
+      }}
       {...props}
     />
   );
@@ -63,7 +64,7 @@ const Actions = memo<ActionsProps>(({ id, inPortalThread, index }) => {
   const virtuosoRef = use(VirtuosoContext);
 
   const handleActionClick = useCallback(
-    async (action: ActionEvent) => {
+    async (action: ActionIconGroupEvent) => {
       switch (action.key) {
         case 'edit': {
           toggleMessageEditing(id, true);

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChatItem } from '@lobehub/ui';
+import { ChatItem } from '@lobehub/ui/chat';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { MouseEventHandler, ReactNode, memo, use, useCallback, useMemo } from 'react';
@@ -248,7 +248,7 @@ const Item = memo<ChatListItemProps>(
               renderMessage={renderMessage}
               text={text}
               time={item.updatedAt || item.createdAt}
-              type={type === 'chat' ? 'block' : 'pure'}
+              variant={type === 'chat' ? 'bubble' : 'docs'}
             />
             {endRender}
           </Flexbox>

package/src/features/Conversation/components/History/index.tsx

@@ -42,11 +42,7 @@ const History = memo(() => {
         <Flexbox className={styles.container} gap={8}>
           <Flexbox align={'flex-start'} gap={8} horizontal>
             <Center height={20} width={20}>
-              <Icon
-                icon={ScrollText}
-                size={{ fontSize: 16 }}
-                style={{ color: theme.colorTextDescription }}
-              />
+              <Icon icon={ScrollText} size={16} style={{ color: theme.colorTextDescription }} />
             </Center>
             <Typography.Text type={'secondary'}>{t('historySummary')}</Typography.Text>
             {model && (

package/src/features/Conversation/components/MarkdownElements/LobeArtifact/Render/Icon.tsx

@@ -42,24 +42,11 @@ const ArtifactIcon = memo<ArtifactProps>(({ type }) => {
   const { theme } = useStyles();
 
   if (!type)
-    return (
-      <Icon
-        icon={Loader2}
-        size={{ fontSize: SIZE }}
-        spin
-        style={{ color: theme.colorTextSecondary }}
-      />
-    );
+    return <Icon icon={Loader2} size={SIZE} spin style={{ color: theme.colorTextSecondary }} />;
 
   switch (type) {
     case 'application/lobe.artifacts.code': {
-      return (
-        <Icon
-          icon={CodeXml}
-          size={{ fontSize: SIZE }}
-          style={{ color: theme.colorTextSecondary }}
-        />
-      );
+      return <Icon icon={CodeXml} size={SIZE} style={{ color: theme.colorTextSecondary }} />;
     }
 
     case 'application/lobe.artifacts.react': {
@@ -67,26 +54,14 @@ const ArtifactIcon = memo<ArtifactProps>(({ type }) => {
     }
 
     case 'image/svg+xml': {
-      return (
-        <Icon
-          icon={ImageIcon}
-          size={{ fontSize: SIZE }}
-          style={{ color: theme.colorTextSecondary }}
-        />
-      );
+      return <Icon icon={ImageIcon} size={SIZE} style={{ color: theme.colorTextSecondary }} />;
     }
     case 'text/html': {
-      return (
-        <Icon
-          icon={GlobeIcon}
-          size={{ fontSize: SIZE }}
-          style={{ color: theme.colorTextSecondary }}
-        />
-      );
+      return <Icon icon={GlobeIcon} size={SIZE} style={{ color: theme.colorTextSecondary }} />;
     }
     default: {
       return (
-        <Icon color={theme.purple} icon={OrigamiIcon} size={{ fontSize: SIZE, strokeWidth: 1.2 }} />
+        <Icon color={theme.purple} icon={OrigamiIcon} size={{ size: SIZE, strokeWidth: 1.2 }} />
       );
     }
   }

package/src/features/Conversation/components/MarkdownElements/LocalFile/Render/LocalFile.tsx

@@ -54,7 +54,7 @@ const LocalFile = ({
       onClick={handleClick}
       style={{ display: 'inline-flex', verticalAlign: 'middle' }}
     >
-      <FileIcon fileName={name} isDirectory={isDirectory} size={22} variant={'pure'} />
+      <FileIcon fileName={name} isDirectory={isDirectory} size={22} variant={'raw'} />
       <Flexbox align={'baseline'} gap={4} horizontal style={{ overflow: 'hidden', width: '100%' }}>
         <div className={styles.title}>{name}</div>
       </Flexbox>

package/src/features/Conversation/components/VirtualizedList/index.tsx

@@ -60,12 +60,7 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
     ) : (
       // in client mode and switch page, using the center loading for smooth transition
       <Center height={'100%'} width={'100%'}>
-        <Icon
-          icon={Loader2Icon}
-          size={{ fontSize: 32 }}
-          spin
-          style={{ color: theme.colorTextTertiary }}
-        />
+        <Icon icon={Loader2Icon} size={32} spin style={{ color: theme.colorTextTertiary }} />
       </Center>
     );
 

package/src/features/Conversation/hooks/useChatListActionsBar.tsx

@@ -1,4 +1,4 @@
-import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
+import type { ActionIconGroupItemType } from '@lobehub/ui';
 import { Copy, Edit, ListRestart, RotateCcw, Split, Trash } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -6,13 +6,13 @@ import { useTranslation } from 'react-i18next';
 import { isDeprecatedEdition } from '@/const/version';
 
 interface ChatListActionsBar {
-  branching: ActionIconGroupItems;
-  copy: ActionIconGroupItems;
-  del: ActionIconGroupItems;
-  delAndRegenerate: ActionIconGroupItems;
+  branching: ActionIconGroupItemType;
+  copy: ActionIconGroupItemType;
+  del: ActionIconGroupItemType;
+  delAndRegenerate: ActionIconGroupItemType;
   divider: { type: 'divider' };
-  edit: ActionIconGroupItems;
-  regenerate: ActionIconGroupItems;
+  edit: ActionIconGroupItemType;
+  regenerate: ActionIconGroupItemType;
 }
 
 export const useChatListActionsBar = ({

package/src/features/Conversation/types/index.tsx

@@ -1,5 +1,5 @@
-import { type ChatItemProps } from '@lobehub/ui';
-import { ActionEvent } from '@lobehub/ui';
+import { type ActionIconGroupEvent } from '@lobehub/ui';
+import { type ChatItemProps } from '@lobehub/ui/chat';
 import { FC, ReactNode } from 'react';
 
 import { LLMRoleType } from '@/types/llm';
@@ -7,7 +7,7 @@ import { ChatMessage } from '@/types/message';
 
 import { type ActionsBarProps } from '../components/ChatItem/ActionsBar';
 
-export type OnActionsClick = (action: ActionEvent, message: ChatMessage) => void;
+export type OnActionsClick = (action: ActionIconGroupEvent, message: ChatMessage) => void;
 export type OnAvatarsClick = (role: RenderRole) => ChatItemProps['onAvatarClick'];
 export type RenderRole = LLMRoleType | 'default' | 'history' | string;
 export type RenderMessage = FC<ChatMessage & { editableContent: ReactNode }>;

package/src/features/DataImporter/Error.tsx

@@ -1,5 +1,5 @@
-import { Alert, Highlighter, Icon } from '@lobehub/ui';
-import { Button, Result } from 'antd';
+import { Alert, Button, Highlighter, Icon } from '@lobehub/ui';
+import { Result } from 'antd';
 import { ShieldAlert } from 'lucide-react';
 import Link from 'next/link';
 import React, { memo } from 'react';
@@ -24,7 +24,7 @@ const Error = memo<ErrorProps>(({ error, onClick }) => {
         <Flexbox gap={12} style={{ textAlign: 'start' }}>
           <Alert
             extra={
-              <Highlighter copyButtonSize={'small'} language={'json'}>
+              <Highlighter actionIconSize={'small'} language={'json'}>
                 {JSON.stringify(error, null, 2)}
               </Highlighter>
             }

package/src/features/DataImporter/ImportDetail.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Modal } from '@lobehub/ui';
-import { Button, Table, Typography } from 'antd';
+import { Button, Modal } from '@lobehub/ui';
+import { Table, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { Info } from 'lucide-react';
 import { useState } from 'react';

package/src/features/DataImporter/SuccessResult.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
-import { Button, Result, Table } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
+import { Result, Table } from 'antd';
 import { createStyles } from 'antd-style';
 import { CheckCircle } from 'lucide-react';
 import React, { memo } from 'react';

package/src/features/DevPanel/FeatureFlagViewer/Form.tsx

@@ -78,7 +78,7 @@ const FeatureFlagForm = memo<{ flags: any }>(({ flags }) => {
           })}
           itemsType={'flat'}
           onValuesChange={(_, v) => setData(v)}
-          variant={'pure'}
+          variant={'borderless'}
         />
       </Flexbox>
       <Highlighter

package/src/features/DevPanel/MetadataViewer/Ld.tsx

@@ -16,7 +16,7 @@ const Ld = memo(() => {
     );
 
   return (
-    <Highlighter language="json" type={'pure'}>
+    <Highlighter language="json" variant={'borderless'}>
       {JSON.stringify(JSON.parse(ld), null, 2)}
     </Highlighter>
   );

package/src/features/DevPanel/MetadataViewer/MetaData.tsx

@@ -1,5 +1,4 @@
-import { Form } from '@lobehub/ui';
-import { Input } from 'antd';
+import { Form, Input, TextArea } from '@lobehub/ui';
 import { memo } from 'react';
 
 import { useHead, useTitle } from './useHead';
@@ -17,12 +16,12 @@ const MetaData = memo(() => {
           label: `Title (${title.length})`,
         },
         {
-          children: <Input.TextArea rows={2} value={description} variant={'filled'} />,
+          children: <TextArea rows={2} value={description} variant={'filled'} />,
           label: `Description (${description.length})`,
         },
       ]}
       itemsType={'flat'}
-      variant={'pure'}
+      variant={'borderless'}
     />
   );
 });

package/src/features/DevPanel/MetadataViewer/Og.tsx

@@ -1,5 +1,4 @@
-import { Form } from '@lobehub/ui';
-import { Input } from 'antd';
+import { Form, Input, TextArea } from '@lobehub/ui';
 import Image from 'next/image';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -20,7 +19,7 @@ const MetaData = memo(() => {
           label: `OG Title (${ogTitle.length})`,
         },
         {
-          children: <Input.TextArea rows={2} value={ogDescription} variant={'filled'} />,
+          children: <TextArea rows={2} value={ogDescription} variant={'filled'} />,
           label: `OG Description (${ogDescription.length})`,
         },
         {
@@ -67,7 +66,7 @@ const MetaData = memo(() => {
         },
       ]}
       itemsType={'flat'}
-      variant={'pure'}
+      variant={'borderless'}
     />
   );
 });

package/src/features/DevPanel/MetadataViewer/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { TabsNav } from '@lobehub/ui';
+import { Tabs } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -40,8 +40,9 @@ const MetadataViewer = memo(() => {
       <Header
         style={{ paddingInlineStart: 0 }}
         title={
-          <TabsNav
+          <Tabs
             activeKey={active}
+            compact
             items={[
               {
                 key: Tab.Og,
@@ -58,7 +59,6 @@ const MetadataViewer = memo(() => {
             ]}
             onChange={(v) => setActive(v as Tab)}
             style={{ margin: 16 }}
-            variant={'compact'}
           />
         }
       />

package/src/features/DevPanel/PostgresViewer/SchemaSidebar/Columns.tsx

@@ -1,4 +1,4 @@
-import { Tag } from 'antd';
+import { Tag } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import React from 'react';
 import { Flexbox } from 'react-layout-kit';

package/src/features/DevPanel/SystemInspector/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { TabsNav } from '@lobehub/ui';
+import { Tabs } from '@lobehub/ui';
 import { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -20,8 +20,9 @@ const SystemInspector = () => {
 
   return (
     <Flexbox gap={4} height={'100%'}>
-      <TabsNav
+      <Tabs
         activeKey={activeTab}
+        compact
         items={[
           {
             key: TabKey.AiProviderRuntimeConfig,
@@ -46,7 +47,6 @@ const SystemInspector = () => {
           },
         ]}
         onChange={(activeTab) => setActiveTab(activeTab as TabKey)}
-        variant={'compact'}
       />
 
       {activeTab === TabKey.AiProviderRuntimeConfig && <AiProviderRuntimeConfig />}

package/src/features/DevPanel/features/FloatPanel.tsx

@@ -166,13 +166,14 @@ const CollapsibleFloatPanel = memo<CollapsibleFloatPanelProps>(({ items }) => {
               topActions={items.map((item) => (
                 <ActionIcon
                   active={tab === item.key}
+                  icon={item.icon}
                   key={item.key}
                   onClick={() => setTab(item.key)}
-                  placement={'right'}
                   title={item.key}
-                >
-                  {item.icon}
-                </ActionIcon>
+                  tooltipProps={{
+                    placement: 'right',
+                  }}
+                />
               ))}
             />
             <Flexbox

package/src/features/DevPanel/features/Header.tsx

@@ -36,11 +36,7 @@ const Header = ({ title, actions = [], extra, ...rest }: HeaderProps) => {
       <Flexbox align={'center'} gap={4} horizontal>
         {extra}
         {actions.map((action, index) => (
-          <ActionIcon
-            {...action}
-            key={action.title || index}
-            size={{ blockSize: 28, fontSize: 16 }}
-          />
+          <ActionIcon {...action} key={index} size={{ blockSize: 28, size: 16 }} />
         ))}
       </Flexbox>
     </Flexbox>

package/src/features/DevPanel/features/Table/TooltipContent.tsx

@@ -35,7 +35,7 @@ const TooltipContent = memo<{ children: ReactNode }>(({ children }) => {
           maxHeight: 400,
           overflow: 'auto',
         }}
-        type={'pure'}
+        variant={'borderless'}
       >
         {JSON.stringify(JSON.parse(code), null, 2)}
       </Highlighter>

package/src/features/ElectronTitlebar/Connection/ConnectionMode.tsx

@@ -1,7 +1,6 @@
 import { StorageMode, StorageModeEnum } from '@lobechat/electron-client-ipc';
-import { Input } from '@lobehub/ui';
+import { Button, Input } from '@lobehub/ui';
 import { LobeHub } from '@lobehub/ui/brand';
-import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import { ComputerIcon, Server } from 'lucide-react';
 import { memo, useCallback, useState } from 'react';

package/src/features/ElectronTitlebar/Connection/RemoteStatus.tsx

@@ -26,7 +26,6 @@ const RemoteStatus = memo<SyncProps>(({ onClick }) => {
       icon={isIniting ? Loader : isSyncActive ? Wifi : WifiOffIcon}
       loading={isIniting}
       onClick={onClick}
-      placement={'bottomRight'}
       size="small"
       title={
         isIniting
@@ -35,6 +34,9 @@ const RemoteStatus = memo<SyncProps>(({ onClick }) => {
             ? t('sync.inCloud')
             : t('sync.inLocalStorage')
       }
+      tooltipProps={{
+        placement: 'bottomRight',
+      }}
     />
   );
 });

package/src/features/ElectronTitlebar/Connection/Waiting.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useWatchBroadcast } from '@lobechat/electron-client-ipc';
-import { Icon } from '@lobehub/ui';
-import { Button, Typography } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
+import { Typography } from 'antd';
 import { createStyles, cx, keyframes } from 'antd-style';
 import { WifiIcon } from 'lucide-react';
 import { memo } from 'react';
@@ -187,7 +187,7 @@ const WaitingOAuth = memo<WaitingOAuthProps>(({ setWaiting, setIsOpen }) => {
           <div className={cx(styles.pulseBase, styles.pulse2)} />
           <div className={cx(styles.pulseBase, styles.pulse3)} />
 
-          <Icon className={styles.radarIcon} icon={WifiIcon} size={{ fontSize: 40 }} />
+          <Icon className={styles.radarIcon} icon={WifiIcon} size={40} />
         </div>
         <Title className={styles.title} level={4}>
           {t('waitingOAuth.title')}

package/src/features/ElectronTitlebar/UpdateModal.tsx

@@ -1,5 +1,6 @@
 import { ProgressInfo, UpdateInfo, useWatchBroadcast } from '@lobechat/electron-client-ipc';
-import { App, Button, Modal, Progress, Spin } from 'antd';
+import { Button } from '@lobehub/ui';
+import { App, Modal, Progress, Spin } from 'antd';
 import React, { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/features/ElectronTitlebar/UpdateNotification.tsx

@@ -1,7 +1,7 @@
 import { DownloadOutlined } from '@ant-design/icons';
 import { UpdateInfo, useWatchBroadcast } from '@lobechat/electron-client-ipc';
-import { Icon } from '@lobehub/ui';
-import { Badge, Button, Popover, Progress, Tooltip, theme } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
+import { Badge, Popover, Progress, Tooltip, theme } from 'antd';
 import { createStyles } from 'antd-style';
 import { Download } from 'lucide-react';
 import React, { useState } from 'react';

package/src/features/FileManager/ChunkDrawer/Content.tsx

@@ -28,6 +28,7 @@ const Content = memo(() => {
             useFileStore.setState({ isSimilaritySearch: !!text });
             semanticSearch(text, fileId);
           }}
+          variant={'filled'}
         />
       </Flexbox>
       {showSimilaritySearch ? <SimilaritySearchList /> : <ChunkList fileId={fileId} />}

package/src/features/FileManager/ChunkDrawer/SimilaritySearchList/Item.tsx

@@ -1,4 +1,4 @@
-import { Tag } from 'antd';
+import { Tag } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';

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

@@ -1,5 +1,5 @@
-import { ActionIcon, Icon, copyToClipboard } from '@lobehub/ui';
-import { App, Dropdown } from 'antd';
+import { ActionIcon, Dropdown, Icon, copyToClipboard } from '@lobehub/ui';
+import { App } from 'antd';
 import { ItemType } from 'antd/es/menu/interface';
 import {
   BookMinusIcon,