@lobehub/lobehub 2.0.0-next.376 → 2.0.0-next.378

package/src/app/[variants]/(main)/home/features/InputArea/SkillInstallBanner.tsx

@@ -1,18 +1,30 @@
 'use client';
 
 import { getKlavisServerByServerIdentifier, getLobehubSkillProviderById } from '@lobechat/const';
-import { Avatar, Flexbox, Icon } from '@lobehub/ui';
+import { Flexbox, Icon } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
 import { Blocks } from 'lucide-react';
-import { type ReactNode, createElement, memo, useCallback, useMemo } from 'react';
+import React, { createElement, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { createSkillStoreModal } from '@/features/SkillStore';
 import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
 
+const ICON_SIZE = 16;
+const AVATAR_SIZE = 24;
+
 const styles = createStaticStyles(({ css, cssVar }) => ({
   avatar: css`
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: ${AVATAR_SIZE}px;
+    height: ${AVATAR_SIZE}px;
+    border-radius: 50%;
+
     background: ${cssVar.colorBgContainer};
     box-shadow:
       0 0 8px -2px rgba(0, 0, 0, 5%),
@@ -43,6 +55,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   icon: css`
     color: ${cssVar.colorTextSecondary};
   `,
+  iconGroup: css`
+    display: flex;
+    align-items: center;
+  `,
   text: css`
     font-size: 13px;
     color: ${cssVar.colorTextSecondary};
@@ -51,10 +67,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
 const BANNER_SKILL_IDS = [
   { id: 'gmail', type: 'klavis' },
-  { id: 'notion', type: 'klavis' },
   { id: 'google-drive', type: 'klavis' },
   { id: 'google-calendar', type: 'klavis' },
   { id: 'slack', type: 'klavis' },
+  { id: 'notion', type: 'klavis' },
   { id: 'twitter', type: 'lobehub' },
   { id: 'github', type: 'klavis' },
 ] as const;
@@ -73,38 +89,24 @@ const SkillInstallBanner = memo(() => {
   useFetchLobehubSkillConnections(isLobehubSkillEnabled);
   useFetchUserKlavisServers(isKlavisEnabled);
 
-  const avatarItems = useMemo(() => {
-    const items: Array<{ avatar: ReactNode; key: string; title: string }> = [];
+  const skillIcons = useMemo(() => {
+    const icons: Array<{ icon: string | React.ComponentType<{ size?: number }>; key: string }> = [];
 
     for (const skill of BANNER_SKILL_IDS) {
       if (skill.type === 'lobehub') {
         const provider = getLobehubSkillProviderById(skill.id);
         if (provider) {
-          items.push({
-            avatar:
-              typeof provider.icon === 'string'
-                ? provider.icon
-                : createElement(provider.icon, { size: 14 }),
-            key: provider.id,
-            title: provider.label,
-          });
+          icons.push({ icon: provider.icon, key: provider.id });
         }
       } else {
         const server = getKlavisServerByServerIdentifier(skill.id);
         if (server) {
-          items.push({
-            avatar:
-              typeof server.icon === 'string'
-                ? server.icon
-                : createElement(server.icon, { size: 14 }),
-            key: server.identifier,
-            title: server.label,
-          });
+          icons.push({ icon: server.icon, key: server.identifier });
         }
       }
     }
 
-    return items;
+    return icons;
   }, []);
 
   const handleOpenStore = useCallback(() => {
@@ -120,16 +122,22 @@ const SkillInstallBanner = memo(() => {
         <Icon className={styles.icon} icon={Blocks} size={18} />
         <span className={styles.text}>{t('skillInstallBanner.title')}</span>
       </Flexbox>
-      {avatarItems.length > 0 && (
-        <Avatar.Group
-          classNames={{
-            avatar: styles.avatar,
-          }}
-          items={avatarItems}
-          shape="circle"
-          size={24}
-          variant={'outlined'}
-        />
+      {skillIcons.length > 0 && (
+        <div className={styles.iconGroup}>
+          {skillIcons.map(({ icon, key }, index) => (
+            <div
+              className={styles.avatar}
+              key={key}
+              style={{ marginLeft: index === 0 ? 0 : -6, zIndex: index }}
+            >
+              {typeof icon === 'string' ? (
+                <img alt={key} height={ICON_SIZE} src={icon} width={ICON_SIZE} />
+              ) : (
+                createElement(icon, { size: ICON_SIZE })
+              )}
+            </div>
+          ))}
+        </div>
       )}
     </div>
   );

package/src/app/[variants]/(main)/memory/(home)/index.tsx

@@ -37,6 +37,7 @@ const Home: FC = () => {
         right={
           <Flexbox gap={8} horizontal>
             {/* <ActionIcon icon={PencilLineIcon} onClick={openEditor} /> */}
+            <MemoryAnalysis iconOnly />
             <WideScreenButton />
           </Flexbox>
         }
@@ -44,7 +45,6 @@ const Home: FC = () => {
           zIndex: 1,
         }}
       />
-      <MemoryAnalysis />
       <Flexbox
         height={'100%'}
         id={SCROLL_PARENT_ID}

package/src/app/[variants]/(main)/memory/contexts/index.tsx

@@ -3,6 +3,7 @@ import { BrainCircuitIcon } from 'lucide-react';
 import { type FC, memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import MemoryAnalysis from '@/app/[variants]/(main)/memory/features/MemoryAnalysis';
 import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/memory/features/TimeLineView/useScrollParent';
 import NavHeader from '@/features/NavHeader';
 import WideScreenContainer from '@/features/WideScreenContainer';
@@ -87,6 +88,7 @@ const ContextsArea = memo(() => {
         }
         right={
           <>
+            <MemoryAnalysis iconOnly />
             <ViewModeSwitcher onChange={setViewMode} value={viewMode} />
             <WideScreenButton />
           </>

package/src/app/[variants]/(main)/memory/experiences/index.tsx

@@ -3,6 +3,7 @@ import { BrainCircuitIcon } from 'lucide-react';
 import { type FC, memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import MemoryAnalysis from '@/app/[variants]/(main)/memory/features/MemoryAnalysis';
 import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/memory/features/TimeLineView/useScrollParent';
 import NavHeader from '@/features/NavHeader';
 import WideScreenContainer from '@/features/WideScreenContainer';
@@ -85,6 +86,7 @@ const ExperiencesArea = memo(() => {
         }
         right={
           <>
+            <MemoryAnalysis iconOnly />
             <ViewModeSwitcher onChange={setViewMode} value={viewMode} />
             <WideScreenButton />
           </>

package/src/app/[variants]/(main)/memory/features/MemoryAnalysis/Action.tsx

@@ -5,7 +5,11 @@ import { useTranslation } from 'react-i18next';
 
 import AnalysisTrigger from './AnalysisTrigger';
 
-const AnalysisAction = memo(() => {
+interface Props {
+  iconOnly?: boolean;
+}
+
+const AnalysisAction = memo<Props>(({ iconOnly }) => {
   const { t } = useTranslation('memory');
   const [range, setRange] = useState<[Date | null, Date | null]>([null, null]);
 
@@ -23,7 +27,14 @@ const AnalysisAction = memo(() => {
     [range, t],
   );
 
-  return <AnalysisTrigger footerNote={footerNote} onRangeChange={setRange} range={range} />;
+  return (
+    <AnalysisTrigger
+      footerNote={footerNote}
+      iconOnly={iconOnly}
+      onRangeChange={setRange}
+      range={range}
+    />
+  );
 });
 
 AnalysisAction.displayName = 'AnalysisAction';

package/src/app/[variants]/(main)/memory/features/MemoryAnalysis/AnalysisTrigger.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Button, Icon } from '@lobehub/ui';
-import { App } from 'antd';
+import { ActionIcon, Button, Icon } from '@lobehub/ui';
+import { Tooltip , App } from 'antd';
 import { CalendarClockIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -13,11 +13,12 @@ import DateRangeModal from './DateRangeModal';
 
 interface Props {
   footerNote: string;
+  iconOnly?: boolean;
   onRangeChange: (range: [Date | null, Date | null]) => void;
   range: [Date | null, Date | null];
 }
 
-const AnalysisTrigger = memo<Props>(({ footerNote, range, onRangeChange }) => {
+const AnalysisTrigger = memo<Props>(({ footerNote, range, onRangeChange, iconOnly }) => {
   const { t } = useTranslation('memory');
   const { message } = App.useApp();
   const { isValidating, refresh } = useMemoryAnalysisAsyncTask();
@@ -45,18 +46,30 @@ const AnalysisTrigger = memo<Props>(({ footerNote, range, onRangeChange }) => {
     }
   };
 
+  const loading = submitting || isValidating;
+
   return (
     <>
-      <Button
-        icon={<Icon icon={CalendarClockIcon} />}
-        loading={submitting || isValidating}
-        onClick={() => setOpen(true)}
-        size={'large'}
-        style={{ maxWidth: 300 }}
-        type={'primary'}
-      >
-        {t('analysis.action.button')}
-      </Button>
+      {iconOnly ? (
+        <Tooltip title={t('analysis.action.button')}>
+          <ActionIcon
+            icon={CalendarClockIcon}
+            loading={loading}
+            onClick={() => setOpen(true)}
+          />
+        </Tooltip>
+      ) : (
+        <Button
+          icon={<Icon icon={CalendarClockIcon} />}
+          loading={loading}
+          onClick={() => setOpen(true)}
+          size={'large'}
+          style={{ maxWidth: 300 }}
+          type={'primary'}
+        >
+          {t('analysis.action.button')}
+        </Button>
+      )}
 
       <DateRangeModal
         footerNote={footerNote}

package/src/app/[variants]/(main)/memory/features/MemoryAnalysis/index.tsx

@@ -8,7 +8,11 @@ import AnalysisAction from './Action';
 import { MemoryAnalysisStatus } from './Status';
 import { useMemoryAnalysisAsyncTask } from './useTask';
 
-const MemoryAnalysis = memo(() => {
+interface Props {
+  iconOnly?: boolean;
+}
+
+const MemoryAnalysis = memo<Props>(({ iconOnly }) => {
   const { data, isValidating } = useMemoryAnalysisAsyncTask();
 
   const { showAction, showStatus } = useMemo(() => {
@@ -26,6 +30,11 @@ const MemoryAnalysis = memo(() => {
 
   if (!showAction && !showStatus) return null;
 
+  // For iconOnly mode, only show the action button
+  if (iconOnly) {
+    return showAction ? <AnalysisAction iconOnly /> : null;
+  }
+
   return (
     <Flexbox gap={12} style={{ paddingTop: 16, width: '100%' }}>
       {showStatus && <MemoryAnalysisStatus task={data} />}

package/src/app/[variants]/(main)/memory/identities/index.tsx

@@ -3,6 +3,7 @@ import { BrainCircuitIcon } from 'lucide-react';
 import { type FC, memo, useCallback, useEffect, useState } from 'react';
 
 import CommonFilterBar from '@/app/[variants]/(main)/memory/features/FilterBar';
+import MemoryAnalysis from '@/app/[variants]/(main)/memory/features/MemoryAnalysis';
 import NavHeader from '@/features/NavHeader';
 import WideScreenContainer from '@/features/WideScreenContainer';
 import WideScreenButton from '@/features/WideScreenContainer/WideScreenButton';
@@ -75,6 +76,7 @@ const IdentitiesArea = memo(() => {
         }
         right={
           <>
+            <MemoryAnalysis iconOnly />
             <ViewModeSwitcher onChange={setViewMode} value={viewMode} />
             <WideScreenButton />
           </>

package/src/app/[variants]/(main)/memory/preferences/index.tsx

@@ -3,6 +3,7 @@ import { BrainCircuitIcon } from 'lucide-react';
 import { type FC, memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import MemoryAnalysis from '@/app/[variants]/(main)/memory/features/MemoryAnalysis';
 import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/memory/features/TimeLineView/useScrollParent';
 import NavHeader from '@/features/NavHeader';
 import WideScreenContainer from '@/features/WideScreenContainer';
@@ -85,6 +86,7 @@ const PreferencesArea = memo(() => {
         }
         right={
           <>
+            <MemoryAnalysis iconOnly />
             <ViewModeSwitcher onChange={setViewMode} value={viewMode} />
             <WideScreenButton />
           </>

package/src/app/[variants]/(main)/resource/library/_layout/Header/LibraryHead.tsx

@@ -39,7 +39,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 const Head = memo<{ id: string }>(({ id }) => {
   const navigate = useNavigate();
   const name = useKnowledgeBaseStore(knowledgeBaseSelectors.getKnowledgeBaseNameById(id));
-  const setMode = useResourceManagerStore((s) => s.setMode);
+  const [setMode, setLibraryId] = useResourceManagerStore((s) => [s.setMode, s.setLibraryId]);
   const isDragActive = useDragActive();
   const [isDropZoneActive, setIsDropZoneActive] = useState(false);
 
@@ -53,10 +53,14 @@ const Head = memo<{ id: string }>(({ id }) => {
 
   const handleLibrarySwitch = useCallback(
     (libraryId: string) => {
-      navigate(`/resource/library/${libraryId}`);
+      setLibraryId(libraryId);
       setMode('explorer');
+      // 使用 setTimeout 确保在下一个事件循环中执行 navigate
+      setTimeout(() => {
+        navigate(`/resource/library/${libraryId}`);
+      }, 0);
     },
-    [navigate, setMode],
+    [navigate, setLibraryId, setMode],
   );
 
   // Native HTML5 drag-and-drop handlers for root directory drop

package/src/app/[variants]/(main)/settings/skill/features/KlavisSkillItem.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { type KlavisServerType } from '@lobechat/const';
-import { ActionIcon, Avatar, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
+import { Avatar, DropdownMenu, Flexbox, Icon, Button as LobeButton } from '@lobehub/ui';
 import { App, Button } from 'antd';
 import { createStaticStyles, cssVar } from 'antd-style';
-import { Loader2, MoreVerticalIcon, SquareArrowOutUpRight, Unplug } from 'lucide-react';
+import { Loader2, MoreHorizontalIcon, SquareArrowOutUpRight, Unplug } from 'lucide-react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -301,7 +301,7 @@ const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
           ]}
           placement="bottomRight"
         >
-          <ActionIcon icon={MoreVerticalIcon} />
+          <LobeButton icon={MoreHorizontalIcon} />
         </DropdownMenu>
       );
     }
@@ -313,35 +313,35 @@ const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
 
   return (
     <Flexbox
-        align="center"
-        className={styles.container}
-        gap={16}
-        horizontal
-        justify="space-between"
-      >
-        <Flexbox align="center" gap={16} horizontal style={{ flex: 1, overflow: 'hidden' }}>
-          <div className={styles.icon}>{renderIcon()}</div>
-          <Flexbox gap={4} style={{ overflow: 'hidden' }}>
-            <span
-              className={styles.title}
-              onClick={() =>
-                createIntegrationDetailModal({
-                  identifier: serverType.identifier,
-                  serverName: serverType.serverName,
-                  type: 'klavis',
-                })
-              }
-            >
-              {serverType.label}
-            </span>
-            {!isConnected && renderStatus()}
-          </Flexbox>
-        </Flexbox>
-        <Flexbox align="center" gap={12} horizontal>
-          {isConnected && renderStatus()}
-          {renderAction()}
+      align="center"
+      className={styles.container}
+      gap={16}
+      horizontal
+      justify="space-between"
+    >
+      <Flexbox align="center" gap={16} horizontal style={{ flex: 1, overflow: 'hidden' }}>
+        <div className={styles.icon}>{renderIcon()}</div>
+        <Flexbox gap={4} style={{ overflow: 'hidden' }}>
+          <span
+            className={styles.title}
+            onClick={() =>
+              createIntegrationDetailModal({
+                identifier: serverType.identifier,
+                serverName: serverType.serverName,
+                type: 'klavis',
+              })
+            }
+          >
+            {serverType.label}
+          </span>
+          {!isConnected && renderStatus()}
         </Flexbox>
       </Flexbox>
+      <Flexbox align="center" gap={12} horizontal>
+        {isConnected && renderStatus()}
+        {renderAction()}
+      </Flexbox>
+    </Flexbox>
   );
 });
 

package/src/app/[variants]/(main)/settings/skill/features/LobehubSkillItem.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { type LobehubSkillProviderType } from '@lobechat/const';
-import { ActionIcon, Avatar, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
+import { Avatar, DropdownMenu, Flexbox, Icon, Button as LobeButton } from '@lobehub/ui';
 import { App, Button } from 'antd';
 import { createStaticStyles, cssVar } from 'antd-style';
-import { Loader2, MoreVerticalIcon, SquareArrowOutUpRight, Unplug } from 'lucide-react';
+import { Loader2, MoreHorizontalIcon, SquareArrowOutUpRight, Unplug } from 'lucide-react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -290,7 +290,7 @@ const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
         ]}
         placement="bottomRight"
       >
-        <ActionIcon icon={MoreVerticalIcon} />
+        <LobeButton icon={MoreHorizontalIcon} />
       </DropdownMenu>
     );
   };
@@ -299,36 +299,36 @@ const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
 
   return (
     <Flexbox
-        align="center"
-        className={styles.container}
-        gap={16}
-        horizontal
-        justify="space-between"
-      >
-        <Flexbox align="center" gap={16} horizontal style={{ flex: 1, overflow: 'hidden' }}>
-          <div className={`${styles.icon} ${!isConnected ? styles.disconnectedIcon : ''}`}>
-            {renderIcon()}
-          </div>
-          <Flexbox gap={4} style={{ overflow: 'hidden' }}>
-            <span
-              className={`${styles.title} ${!isConnected ? styles.disconnectedTitle : ''}`}
-              onClick={() =>
-                createIntegrationDetailModal({
-                  identifier: provider.id,
-                  type: 'lobehub',
-                })
-              }
-            >
-              {provider.label}
-            </span>
-            {!isConnected && renderStatus()}
-          </Flexbox>
-        </Flexbox>
-        <Flexbox align="center" gap={12} horizontal>
-          {isConnected && renderStatus()}
-          {renderAction()}
+      align="center"
+      className={styles.container}
+      gap={16}
+      horizontal
+      justify="space-between"
+    >
+      <Flexbox align="center" gap={16} horizontal style={{ flex: 1, overflow: 'hidden' }}>
+        <div className={`${styles.icon} ${!isConnected ? styles.disconnectedIcon : ''}`}>
+          {renderIcon()}
+        </div>
+        <Flexbox gap={4} style={{ overflow: 'hidden' }}>
+          <span
+            className={`${styles.title} ${!isConnected ? styles.disconnectedTitle : ''}`}
+            onClick={() =>
+              createIntegrationDetailModal({
+                identifier: provider.id,
+                type: 'lobehub',
+              })
+            }
+          >
+            {provider.label}
+          </span>
+          {!isConnected && renderStatus()}
         </Flexbox>
       </Flexbox>
+      <Flexbox align="center" gap={12} horizontal>
+        {isConnected && renderStatus()}
+        {renderAction()}
+      </Flexbox>
+    </Flexbox>
   );
 });
 

package/src/app/[variants]/(main)/settings/skill/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Button, Icon } from '@lobehub/ui';
-import { PlusIcon } from 'lucide-react';
+import { Store } from 'lucide-react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -21,7 +21,7 @@ const Page = () => {
     <>
       <SettingHeader
         extra={
-          <Button icon={<Icon icon={PlusIcon} />} onClick={handleOpenStore}>
+          <Button icon={<Icon icon={Store} />} onClick={handleOpenStore}>
             {t('skillStore.button')}
           </Button>
         }

package/src/components/FileParsingStatus/EmbeddingStatus.tsx

@@ -4,27 +4,17 @@ import { BoltIcon, RotateCwIcon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useIsDark } from '@/hooks/useIsDark';
 import { AsyncTaskStatus, type FileParsingTask } from '@/types/asyncTask';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
-  errorReasonDark: css`
+  errorReason: css`
     padding: 4px;
     border-radius: 4px;
 
     font-family: monospace;
     font-size: 12px;
 
-    background: color-mix(in srgb, ${cssVar.colorText} 90%, black);
-  `,
-  errorReasonLight: css`
-    padding: 4px;
-    border-radius: 4px;
-
-    font-family: monospace;
-    font-size: 12px;
-
-    background: color-mix(in srgb, ${cssVar.colorText} 90%, white);
+    background: ${cssVar.colorFillTertiary};
   `,
 }));
 
@@ -37,7 +27,6 @@ interface EmbeddingStatusProps extends FileParsingTask {
 const EmbeddingStatus = memo<EmbeddingStatusProps>(
   ({ chunkCount, embeddingStatus, embeddingError, onClick, onErrorClick, className }) => {
     const { t } = useTranslation(['components', 'common']);
-    const isDarkMode = useIsDark();
 
     switch (embeddingStatus) {
       case AsyncTaskStatus.Processing: {
@@ -73,9 +62,7 @@ const EmbeddingStatus = memo<EmbeddingStatusProps>(
               <Flexbox gap={4}>
                 {t('FileParsingStatus.chunks.embeddingStatus.errorResult')}
                 {embeddingError && (
-                  <Flexbox
-                    className={isDarkMode ? styles.errorReasonDark : styles.errorReasonLight}
-                  >
+                  <Flexbox className={styles.errorReason}>
                     [{embeddingError.name}]:{' '}
                     {embeddingError.body && typeof embeddingError.body !== 'string'
                       ? embeddingError.body.detail

package/src/components/FileParsingStatus/index.tsx

@@ -5,7 +5,6 @@ import { BoltIcon, Loader2Icon, RotateCwIcon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useIsDark } from '@/hooks/useIsDark';
 import { AsyncTaskStatus, type FileParsingTask } from '@/types/asyncTask';
 
 import EmbeddingStatus from './EmbeddingStatus';
@@ -18,13 +17,7 @@ const styles = createStaticStyles(({ css }) => ({
     font-family: monospace;
     font-size: 12px;
 
-    background: var(--error-reason-bg, ${cssVar.colorText});
-  `,
-  errorReasonDark: css`
-    --error-reason-bg: color-mix(in srgb, ${cssVar.colorText} 90%, black);
-  `,
-  errorReasonLight: css`
-    --error-reason-bg: color-mix(in srgb, ${cssVar.colorText} 90%, white);
+    background: ${cssVar.colorFillTertiary};
   `,
 }));
 
@@ -53,7 +46,6 @@ const FileParsingStatus = memo<FileParsingStatusProps>(
     hideEmbeddingButton,
   }) => {
     const { t } = useTranslation(['components', 'common']);
-    const isDarkMode = useIsDark();
 
     switch (chunkingStatus) {
       case AsyncTaskStatus.Processing: {
@@ -77,12 +69,7 @@ const FileParsingStatus = memo<FileParsingStatusProps>(
               <Flexbox gap={4}>
                 {t('FileParsingStatus.chunks.status.errorResult')}
                 {chunkingError && (
-                  <Flexbox
-                    className={cx(
-                      styles.errorReason,
-                      isDarkMode ? styles.errorReasonDark : styles.errorReasonLight,
-                    )}
-                  >
+                  <Flexbox className={styles.errorReason}>
                     [{chunkingError.name}]:{' '}
                     {chunkingError.body && typeof chunkingError.body !== 'string'
                       ? chunkingError.body.detail