@lobehub/lobehub 2.0.0-next.342 → 2.0.0-next.344

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

@@ -0,0 +1,53 @@
+import { Flexbox } from '@lobehub/ui';
+import { cx } from 'antd-style';
+import { memo, useState } from 'react';
+
+import { EditorModal } from '@/features/EditorModal';
+import { useUserMemoryStore } from '@/store/userMemory';
+
+import PersonaDetail from './PersonaDetail';
+import PersonaSummary from './PersonaSummary';
+
+interface PersonaProps {
+  className?: string;
+  onEditClick?: () => void;
+}
+
+export const usePersonaEditor = () => {
+  const [editOpen, setEditOpen] = useState(false);
+  const persona = useUserMemoryStore((s) => s.persona);
+
+  const openEditor = () => setEditOpen(true);
+  const closeEditor = () => setEditOpen(false);
+
+  const EditorModalElement = persona ? (
+    <EditorModal
+      onCancel={closeEditor}
+      onConfirm={async () => {
+        closeEditor();
+      }}
+      open={editOpen}
+      value={persona.content}
+    />
+  ) : null;
+
+  return { EditorModalElement, openEditor };
+};
+
+const Persona = memo<PersonaProps>(({ className }) => {
+  const useFetchPersona = useUserMemoryStore((s) => s.useFetchPersona);
+  const persona = useUserMemoryStore((s) => s.persona);
+
+  const { isLoading } = useFetchPersona();
+
+  if (isLoading || !persona) return null;
+
+  return (
+    <Flexbox className={cx(className)} gap={24}>
+      {persona.summary && <PersonaSummary>{persona.summary}</PersonaSummary>}
+      <PersonaDetail>{persona.content}</PersonaDetail>
+    </Flexbox>
+  );
+});
+
+export default Persona;

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

@@ -1,12 +1,12 @@
 import { ActionIcon, Block } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { MaximizeIcon, MinimizeIcon } from 'lucide-react';
-import dynamic from '@/libs/next/dynamic';
 import { memo, useEffect, useState } from 'react';
 
 import Loading from '@/components/Loading/BrandTextLoading';
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { type QueryTagsResult } from '@/database/models/userMemory';
+import dynamic from '@/libs/next/dynamic';
 
 const TagCloudCanvas = dynamic(() => import('./TagCloudCanvas'), {
   loading: () => <Loading debugId={'TagCloud'} />,
@@ -36,7 +36,7 @@ const styles = createStaticStyles(({ css }) => ({
     position: relative;
     overflow: hidden;
     width: 100%;
-    height: 480px;
+    height: 400px;
 
     .fullscreen-icon {
       opacity: 0;

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

@@ -1,20 +1,24 @@
 import { Flexbox } from '@lobehub/ui';
+// import { PencilLineIcon } from 'lucide-react';
 import { type FC } from 'react';
 
-import MemoryEmpty from '@/app/[variants]/(main)/memory/features/MemoryEmpty';
-import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/memory/features/TimeLineView/useScrollParent';
 import Loading from '@/components/Loading/BrandTextLoading';
 import NavHeader from '@/features/NavHeader';
 import WideScreenContainer from '@/features/WideScreenContainer';
 import WideScreenButton from '@/features/WideScreenContainer/WideScreenButton';
 import { useUserMemoryStore } from '@/store/userMemory';
 
+import MemoryEmpty from '../features/MemoryEmpty';
+import { SCROLL_PARENT_ID } from '../features/TimeLineView/useScrollParent';
+import Persona from './features/Persona';
+import PersonaHeader from './features/Persona/PersonaHeader';
 import RoleTagCloud from './features/RoleTagCloud';
 
 const Home: FC = () => {
   const useFetchTags = useUserMemoryStore((s) => s.useFetchTags);
   const roles = useUserMemoryStore((s) => s.roles);
   const { isLoading } = useFetchTags();
+  // const { EditorModalElement, openEditor } = usePersonaEditor();
 
   if (isLoading) return <Loading debugId={'Home'} />;
 
@@ -25,7 +29,12 @@ const Home: FC = () => {
   return (
     <Flexbox flex={1} height={'100%'}>
       <NavHeader
-        right={<WideScreenButton />}
+        right={
+          <Flexbox gap={8} horizontal>
+            {/* <ActionIcon icon={PencilLineIcon} onClick={openEditor} /> */}
+            <WideScreenButton />
+          </Flexbox>
+        }
         style={{
           zIndex: 1,
         }}
@@ -37,9 +46,12 @@ const Home: FC = () => {
         width={'100%'}
       >
         <WideScreenContainer gap={32} paddingBlock={48}>
+          <PersonaHeader />
           <RoleTagCloud tags={roles} />
+          <Persona />
         </WideScreenContainer>
       </Flexbox>
+      {/* {EditorModalElement} */}
     </Flexbox>
   );
 };

package/src/app/[variants]/(main)/memory/experiences/features/List/GridView/ExperienceCard.tsx

@@ -1,3 +1,4 @@
+import type { ExperienceListItem } from '@lobechat/types';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { memo } from 'react';
@@ -5,15 +6,14 @@ import { useTranslation } from 'react-i18next';
 
 import GridCard from '@/app/[variants]/(main)/memory/features/GridView/GridCard';
 import ProgressIcon from '@/app/[variants]/(main)/memory/features/ProgressIcon';
-import { type DisplayExperienceMemory } from '@/database/repositories/userMemory';
 
 import ExperienceDropdown from '../../ExperienceDropdown';
 
 dayjs.extend(relativeTime);
 
 interface ExperienceCardProps {
-  experience: DisplayExperienceMemory;
-  onClick: (experience: DisplayExperienceMemory) => void;
+  experience: ExperienceListItem;
+  onClick: (experience: ExperienceListItem) => void;
 }
 
 const ExperienceCard = memo<ExperienceCardProps>(({ experience, onClick }) => {

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

@@ -1,15 +1,15 @@
+import type { ExperienceListItem } from '@lobechat/types';
 import { memo } from 'react';
 
-import { type DisplayExperienceMemory } from '@/database/repositories/userMemory';
 import { useUserMemoryStore } from '@/store/userMemory';
 
 import { GridView } from '../../../../features/GridView';
 import ExperienceCard from './ExperienceCard';
 
 interface GridViewProps {
-  experiences: DisplayExperienceMemory[];
+  experiences: ExperienceListItem[];
   isLoading?: boolean;
-  onClick: (experience: DisplayExperienceMemory) => void;
+  onClick: (experience: ExperienceListItem) => void;
 }
 
 const ExperiencesGridView = memo<GridViewProps>(({ experiences, isLoading, onClick }) => {

package/src/app/[variants]/(main)/memory/experiences/features/List/TimelineView/ExperienceCard.tsx

@@ -1,13 +1,13 @@
+import type { ExperienceListItem } from '@lobechat/types';
 import { memo } from 'react';
 
 import TimeLineCard from '@/app/[variants]/(main)/memory/features/TimeLineView/TimeLineCard';
-import { type DisplayExperienceMemory } from '@/database/repositories/userMemory';
 
 import ExperienceDropdown from '../../ExperienceDropdown';
 
 interface ExperienceCardProps {
-  experience: DisplayExperienceMemory;
-  onClick: (experience: DisplayExperienceMemory) => void;
+  experience: ExperienceListItem;
+  onClick: (experience: ExperienceListItem) => void;
 }
 
 const ExperienceCard = memo<ExperienceCardProps>(({ experience, onClick }) => {

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

@@ -1,8 +1,8 @@
 'use client';
 
+import type { ExperienceListItem } from '@lobechat/types';
 import { memo } from 'react';
 
-import { type DisplayExperienceMemory } from '@/database/repositories/userMemory';
 import { useUserMemoryStore } from '@/store/userMemory';
 
 import { TimelineView as GenericTimelineView } from '../../../../features/TimeLineView';
@@ -10,9 +10,9 @@ import { PeriodHeader, TimelineItemWrapper } from '../../../../features/TimeLine
 import ExperienceCard from './ExperienceCard';
 
 interface ExperienceTimelineViewProps {
-  experiences: DisplayExperienceMemory[];
+  experiences: ExperienceListItem[];
   isLoading?: boolean;
-  onCardClick: (experience: DisplayExperienceMemory) => void;
+  onCardClick: (experience: ExperienceListItem) => void;
 }
 
 const ExperienceTimelineView = memo<ExperienceTimelineViewProps>(

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

@@ -1,28 +1,19 @@
 import { Button, Icon, Text } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { Link2 } from 'lucide-react';
-import Link from '@/libs/router/Link';
 import { memo } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { type MemorySource } from '@/database/repositories/userMemory';
+import Link from '@/libs/router/Link';
 
 const SourceLink = memo<{ source?: MemorySource | null }>(({ source }) => {
-  const navigate = useNavigate();
-
   if (!source) return;
 
   const title = source.title || source.id?.replace('tpc_', '').slice(0, 8);
 
   return (
     <Link
-      href={`/agent/${source.agentId}?topicId=${source.id}`}
-      onClick={(e) => {
-        if (!source) return;
-        e.stopPropagation();
-        e.preventDefault();
-        navigate(`/agent/${source.agentId}?topicId=${source.id}`);
-      }}
+      href={`/agent/${source.agentId}?topic=${source.id}`}
       style={{
         flex: 1,
         maxWidth: '100%',

package/src/app/[variants]/(main)/memory/features/TimeLineView/TimeLineCard.tsx

@@ -1,6 +1,5 @@
-import { Block, Flexbox, Icon, Tag, Text } from '@lobehub/ui';
+import { Block, Flexbox, Tag, Text } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
-import { Link2 } from 'lucide-react';
 import { type ReactNode, memo } from 'react';
 
 import CateTag from '../CateTag';
@@ -67,13 +66,7 @@ const TimeLineCard = memo<TimeLineCardProps>(
             ) : (
               title
             )}
-            {typeof titleAddon === 'string' ? (
-              <Tag icon={<Icon icon={Link2} />} variant="borderless">
-                {titleAddon}
-              </Tag>
-            ) : (
-              titleAddon
-            )}
+            {!!titleAddon ? <Tag>{titleAddon}</Tag> : titleAddon}
           </Flexbox>
         )}
         {typeof children === 'string' ? (

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

@@ -39,7 +39,7 @@ const IdentityRightPanel = memo(() => {
           }}
           weight={'bold'}
         >
-          {identity.role || identity.relationship || 'Identity'}
+          {identity.title}
         </Text>
         <Time capturedAt={identity.capturedAt || identity.updatedAt || identity.createdAt} />
         {identity.description && <HighlightedContent>{identity.description}</HighlightedContent>}

package/src/app/[variants]/(main)/memory/identities/features/List/GridView/IdentityCard.tsx

@@ -1,13 +1,13 @@
+import type { IdentityListItem } from '@lobechat/types';
 import { memo } from 'react';
 
 import GridCard from '@/app/[variants]/(main)/memory/features/GridView/GridCard';
-import { type DisplayIdentityMemory } from '@/database/repositories/userMemory';
 
 import IdentityDropdown from '../../IdentityDropdown';
 
 interface IdentityCardProps {
-  identity: DisplayIdentityMemory;
-  onClick?: (identity: DisplayIdentityMemory) => void;
+  identity: IdentityListItem;
+  onClick?: (identity: IdentityListItem) => void;
 }
 
 const IdentityCard = memo<IdentityCardProps>(({ identity, onClick }) => {
@@ -17,7 +17,8 @@ const IdentityCard = memo<IdentityCardProps>(({ identity, onClick }) => {
       cate={identity.type}
       hashTags={identity.tags}
       onClick={() => onClick?.(identity)}
-      title={identity.role}
+      title={identity.title}
+      titleAddon={identity.role?.toLowerCase()}
     >
       {identity.description}
     </GridCard>

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

@@ -1,15 +1,15 @@
+import type { IdentityListItem } from '@lobechat/types';
 import { memo } from 'react';
 
-import { type DisplayIdentityMemory } from '@/database/repositories/userMemory';
 import { useUserMemoryStore } from '@/store/userMemory';
 
 import { GridView } from '../../../../features/GridView';
 import IdentityCard from './IdentityCard';
 
 interface GridViewProps {
-  identities: DisplayIdentityMemory[];
+  identities: IdentityListItem[];
   isLoading?: boolean;
-  onClick?: (identity: DisplayIdentityMemory) => void;
+  onClick?: (identity: IdentityListItem) => void;
 }
 
 const IdentityGridView = memo<GridViewProps>(({ identities, isLoading, onClick }) => {

package/src/app/[variants]/(main)/memory/identities/features/List/TimelineView/IdentityCard.tsx

@@ -1,13 +1,12 @@
+import type { IdentityListItem } from '@lobechat/types';
 import { memo } from 'react';
 
-import TimeLineCard from '@/app/[variants]/(main)/memory/features/TimeLineView/TimeLineCard';
-import { type DisplayIdentityMemory } from '@/database/repositories/userMemory';
-
+import TimeLineCard from '../../../../features/TimeLineView/TimeLineCard';
 import IdentityDropdown from '../../IdentityDropdown';
 
 interface IdentityCardProps {
-  identity: DisplayIdentityMemory;
-  onClick?: (identity: DisplayIdentityMemory) => void;
+  identity: IdentityListItem;
+  onClick?: (identity: IdentityListItem) => void;
 }
 
 const IdentityCard = memo<IdentityCardProps>(({ identity, onClick }) => {
@@ -18,7 +17,8 @@ const IdentityCard = memo<IdentityCardProps>(({ identity, onClick }) => {
       cate={identity.type}
       hashTags={identity.tags}
       onClick={() => onClick?.(identity)}
-      title={identity.role}
+      title={identity.title}
+      titleAddon={identity.role?.toLowerCase()}
     >
       {identity.description}
     </TimeLineCard>

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

@@ -1,6 +1,6 @@
+import type { IdentityListItem } from '@lobechat/types';
 import { memo } from 'react';
 
-import { type DisplayIdentityMemory } from '@/database/repositories/userMemory';
 import { useUserMemoryStore } from '@/store/userMemory';
 
 import { TimelineView as GenericTimelineView } from '../../../../features/TimeLineView';
@@ -8,9 +8,9 @@ import { PeriodHeader, TimelineItemWrapper } from '../../../../features/TimeLine
 import IdentityCard from './IdentityCard';
 
 interface TimelineViewProps {
-  identities: DisplayIdentityMemory[];
+  identities: IdentityListItem[];
   isLoading?: boolean;
-  onClick?: (identity: DisplayIdentityMemory) => void;
+  onClick?: (identity: IdentityListItem) => void;
 }
 
 const TimelineView = memo<TimelineViewProps>(({ identities, isLoading, onClick }) => {
@@ -20,7 +20,9 @@ const TimelineView = memo<TimelineViewProps>(({ identities, isLoading, onClick }
   return (
     <GenericTimelineView
       data={identities}
-      getDateForGrouping={(identity) => identity.episodicDate || identity.capturedAt || identity.createdAt}
+      getDateForGrouping={(identity) =>
+        identity.episodicDate || identity.capturedAt || identity.createdAt
+      }
       groupBy="month"
       hasMore={identitiesHasMore}
       isLoading={isLoading}

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { isDesktop } from '@lobechat/const';
-import { Flexbox, FormGroup, Text } from '@lobehub/ui';
-import { Skeleton as AntSkeleton, Divider } from 'antd';
+import { Flexbox, FormGroup, Skeleton, Text } from '@lobehub/ui';
+import { Divider } from 'antd';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -28,20 +28,20 @@ const SkeletonRow = ({ mobile }: { mobile?: boolean }) => {
     return (
       <Flexbox gap={12} style={rowStyle}>
         <Flexbox align="center" horizontal justify="space-between">
-          <AntSkeleton.Input active size="small" style={{ height: 22, width: 60 }} />
-          <AntSkeleton.Input active size="small" style={{ height: 22, width: 80 }} />
+          <Skeleton.Button active size="small" style={{ height: 22, width: 60 }} />
+          <Skeleton.Button active size="small" style={{ height: 22, width: 80 }} />
         </Flexbox>
-        <AntSkeleton.Input active size="small" style={{ height: 22, width: 120 }} />
+        <Skeleton.Button active size="small" style={{ height: 22, width: 120 }} />
       </Flexbox>
     );
   }
   return (
     <Flexbox align="center" gap={24} horizontal justify="space-between" style={rowStyle}>
       <Flexbox align="center" gap={24} horizontal style={{ flex: 1 }}>
-        <AntSkeleton.Input active size="small" style={{ ...labelStyle, height: 22 }} />
-        <AntSkeleton.Input active size="small" style={{ height: 22, minWidth: 120, width: 160 }} />
+        <Skeleton.Button active size="small" style={{ ...labelStyle, height: 22 }} />
+        <Skeleton.Button active size="small" style={{ height: 22, minWidth: 120, width: 160 }} />
       </Flexbox>
-      <AntSkeleton.Input active size="small" style={{ height: 22, width: 100 }} />
+      <Skeleton.Button active size="small" style={{ height: 22, width: 100 }} />
     </Flexbox>
   );
 };

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -394,7 +394,6 @@ const ProviderConfig = memo<ProviderConfigProps>(
             ),
             desc: t('providerModels.config.checker.desc'),
             label: t('providerModels.config.checker.title'),
-            minWidth: undefined,
           }
         : undefined,
       showAceGcm && aceGcmItem,

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

@@ -64,7 +64,6 @@ const Actions = memo<ActionsProps>(({ identifier, type, isMCP }) => {
           setSettingsOpen(true);
         }
       }}
-      type="default"
     >
       {t('store.actions.configure')}
     </Button>

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

@@ -3,7 +3,7 @@
 import { type KlavisServerType } from '@lobechat/const';
 import { ActionIcon, Avatar, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
 import { App, Button } from 'antd';
-import { createStyles, cssVar } from 'antd-style';
+import { createStaticStyles, cssVar } from 'antd-style';
 import { Loader2, MoreVerticalIcon, SquareArrowOutUpRight, Unplug } from 'lucide-react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -17,10 +17,10 @@ import { userProfileSelectors } from '@/store/user/selectors';
 const POLL_INTERVAL_MS = 1000;
 const POLL_TIMEOUT_MS = 15_000;
 
-const useStyles = createStyles(({ css, token }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   connected: css`
     font-size: 14px;
-    color: ${token.colorSuccess};
+    color: ${cssVar.colorSuccess};
   `,
   container: css`
     padding-block: 12px;
@@ -28,11 +28,11 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
   disconnected: css`
     font-size: 14px;
-    color: ${token.colorTextTertiary};
+    color: ${cssVar.colorTextTertiary};
   `,
   error: css`
     font-size: 14px;
-    color: ${token.colorError};
+    color: ${cssVar.colorError};
   `,
   icon: css`
     display: flex;
@@ -44,20 +44,20 @@ const useStyles = createStyles(({ css, token }) => ({
     height: 48px;
     border-radius: 12px;
 
-    background: ${token.colorFillTertiary};
+    background: ${cssVar.colorFillTertiary};
   `,
   pending: css`
     font-size: 14px;
-    color: ${token.colorWarning};
+    color: ${cssVar.colorWarning};
   `,
   title: css`
     cursor: pointer;
     font-size: 15px;
     font-weight: 500;
-    color: ${token.colorText};
+    color: ${cssVar.colorText};
 
     &:hover {
-      color: ${token.colorPrimary};
+      color: ${cssVar.colorPrimary};
     }
   `,
 }));
@@ -69,7 +69,6 @@ interface KlavisSkillItemProps {
 
 const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
   const { t } = useTranslation('setting');
-  const { styles } = useStyles();
   const { modal } = App.useApp();
   const [isConnecting, setIsConnecting] = useState(false);
   const [isWaitingAuth, setIsWaitingAuth] = useState(false);

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

@@ -3,7 +3,7 @@
 import { type LobehubSkillProviderType } from '@lobechat/const';
 import { ActionIcon, Avatar, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
 import { App, Button } from 'antd';
-import { createStyles, cssVar } from 'antd-style';
+import { createStaticStyles, cssVar } from 'antd-style';
 import { Loader2, MoreVerticalIcon, SquareArrowOutUpRight, Unplug } from 'lucide-react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,10 +18,10 @@ import {
 const POLL_INTERVAL_MS = 1000;
 const POLL_TIMEOUT_MS = 15_000;
 
-const useStyles = createStyles(({ css, token }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   connected: css`
     font-size: 14px;
-    color: ${token.colorSuccess};
+    color: ${cssVar.colorSuccess};
   `,
   container: css`
     padding-block: 12px;
@@ -29,17 +29,17 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
   disconnected: css`
     font-size: 14px;
-    color: ${token.colorTextTertiary};
+    color: ${cssVar.colorTextTertiary};
   `,
   disconnectedIcon: css`
     opacity: 0.5;
   `,
   disconnectedTitle: css`
-    color: ${token.colorTextTertiary};
+    color: ${cssVar.colorTextTertiary};
   `,
   error: css`
     font-size: 14px;
-    color: ${token.colorError};
+    color: ${cssVar.colorError};
   `,
   icon: css`
     display: flex;
@@ -51,16 +51,16 @@ const useStyles = createStyles(({ css, token }) => ({
     height: 48px;
     border-radius: 12px;
 
-    background: ${token.colorFillTertiary};
+    background: ${cssVar.colorFillTertiary};
   `,
   title: css`
     cursor: pointer;
     font-size: 15px;
     font-weight: 500;
-    color: ${token.colorText};
+    color: ${cssVar.colorText};
 
     &:hover {
-      color: ${token.colorPrimary};
+      color: ${cssVar.colorPrimary};
     }
   `,
 }));
@@ -72,7 +72,6 @@ interface LobehubSkillItemProps {
 
 const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
   const { t } = useTranslation('setting');
-  const { styles } = useStyles();
   const { modal } = App.useApp();
   const [isConnecting, setIsConnecting] = useState(false);
   const [isWaitingAuth, setIsWaitingAuth] = useState(false);

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { Block, Flexbox, Modal } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -15,7 +15,7 @@ import { type LobeToolType } from '@/types/tool/tool';
 
 import Actions from './Actions';
 
-const useStyles = createStyles(({ css, token }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
     padding-block: 12px;
     padding-inline: 0;
@@ -33,10 +33,10 @@ const useStyles = createStyles(({ css, token }) => ({
     cursor: pointer;
     font-size: 15px;
     font-weight: 500;
-    color: ${token.colorText};
+    color: ${cssVar.colorText};
 
     &:hover {
-      color: ${token.colorPrimary};
+      color: ${cssVar.colorPrimary};
     }
   `,
 }));
@@ -52,7 +52,6 @@ interface McpSkillItemProps {
 
 const McpSkillItem = memo<McpSkillItemProps>(
   ({ identifier, title, avatar, type, runtimeType, author }) => {
-    const { styles } = useStyles();
     const { t } = useTranslation('plugin');
     const isMCP = runtimeType === 'mcp';
     const isCustomPlugin = type === 'customPlugin';

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

@@ -11,7 +11,7 @@ import {
   getLobehubSkillProviderById,
 } from '@lobechat/const';
 import { Divider } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -33,7 +33,7 @@ import McpSkillItem from './McpSkillItem';
 import KlavisSkillItem from './KlavisSkillItem';
 import LobehubSkillItem from './LobehubSkillItem';
 
-const useStyles = createStyles(({ css, token }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
     display: flex;
     flex-direction: column;
@@ -41,18 +41,17 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
   description: css`
     margin-block-end: 8px;
-    color: ${token.colorTextSecondary};
+    color: ${cssVar.colorTextSecondary};
   `,
   empty: css`
     padding: 24px;
-    color: ${token.colorTextTertiary};
+    color: ${cssVar.colorTextTertiary};
     text-align: center;
   `,
 }));
 
 const SkillList = memo(() => {
   const { t } = useTranslation('setting');
-  const { styles } = useStyles();
 
   const isLobehubSkillEnabled = useServerConfigStore(serverConfigSelectors.enableLobehubSkill);
   const isKlavisEnabled = useServerConfigStore(serverConfigSelectors.enableKlavis);