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

package/src/app/[variants]/share/t/[id]/index.tsx

@@ -1,29 +1,27 @@
 'use client';
 
-import { Flexbox } from '@lobehub/ui';
+import { Button, Center } from '@lobehub/ui';
 import { TRPCClientError } from '@trpc/client';
-import { Button, Result, Skeleton } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import useSWR from 'swr';
 
+import NotFound from '@/components/404';
+import Loading from '@/components/Loading/BrandTextLoading';
 import { lambdaClient } from '@/libs/trpc/client';
 
 import SharedMessageList from './SharedMessageList';
 
-const useStyles = createStyles(({ css }) => ({
-  container: css`
-    flex: 1;
-  `,
+const styles = createStaticStyles(({ css }) => ({
   errorContainer: css`
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 
-    min-height: 400px;
+    height: 80vh;
     padding: 48px;
 
     text-align: center;
@@ -31,7 +29,6 @@ const useStyles = createStyles(({ css }) => ({
 }));
 
 const ShareTopicPage = memo(() => {
-  const { styles } = useStyles();
   const { t } = useTranslation('chat');
   const { id } = useParams<{ id: string }>();
 
@@ -41,12 +38,11 @@ const ShareTopicPage = memo(() => {
     { revalidateOnFocus: false },
   );
 
-  if (isLoading) {
+  if (!error && isLoading) {
     return (
-      <Flexbox className={styles.container} gap={16}>
-        <Skeleton active paragraph={{ rows: 1 }} title={false} />
-        <Skeleton active paragraph={{ rows: 6 }} />
-      </Flexbox>
+      <Center className={styles.errorContainer}>
+        <Loading debugId="share" />
+      </Center>
     );
   }
 
@@ -56,56 +52,53 @@ const ShareTopicPage = memo(() => {
 
     if (errorCode === 'UNAUTHORIZED') {
       return (
-        <Flexbox className={styles.errorContainer}>
-          <Result
+        <Center className={styles.errorContainer}>
+          <NotFound
+            desc={t('sharePage.error.unauthorized.subtitle')}
             extra={
               <Button href="/login" type="primary">
                 {t('sharePage.error.unauthorized.action')}
               </Button>
             }
-            status="403"
-            subTitle={t('sharePage.error.unauthorized.subtitle')}
+            status={''}
             title={t('sharePage.error.unauthorized.title')}
           />
-        </Flexbox>
+        </Center>
       );
     }
 
     if (errorCode === 'FORBIDDEN') {
       return (
-        <Flexbox className={styles.errorContainer}>
-          <Result
-            status="403"
-            subTitle={t('sharePage.error.forbidden.subtitle')}
+        <Center className={styles.errorContainer}>
+          <NotFound
+            desc={t('sharePage.error.forbidden.subtitle')}
+            status={403}
             title={t('sharePage.error.forbidden.title')}
           />
-        </Flexbox>
+        </Center>
       );
     }
 
     // NOT_FOUND or other errors
     return (
-      <Flexbox className={styles.errorContainer}>
-        <Result
-          status="404"
-          subTitle={t('sharePage.error.notFound.subtitle')}
+      <Center className={styles.errorContainer}>
+        <NotFound
+          desc={t('sharePage.error.notFound.subtitle')}
           title={t('sharePage.error.notFound.title')}
         />
-      </Flexbox>
+      </Center>
     );
   }
 
   if (!data) return null;
 
   return (
-    <Flexbox className={styles.container}>
-      <SharedMessageList
-        agentId={data.agentId}
-        groupId={data.groupId}
-        shareId={data.shareId}
-        topicId={data.topicId}
-      />
-    </Flexbox>
+    <SharedMessageList
+      agentId={data.agentId}
+      groupId={data.groupId}
+      shareId={data.shareId}
+      topicId={data.topicId}
+    />
   );
 });
 

package/src/components/404/index.tsx

@@ -1,12 +1,17 @@
 'use client';
 
 import { Button, Flexbox, FluentEmoji } from '@lobehub/ui';
-import { memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MAX_WIDTH } from '@/const/layoutTokens';
 
-const NotFound = memo(() => {
+const NotFound = memo<{
+  desc?: string;
+  extra?: ReactNode;
+  status?: number | string;
+  title?: string;
+}>(({ extra, status = 404, title, desc }) => {
   const { t } = useTranslation('error');
   return (
     <Flexbox align={'center'} justify={'center'} style={{ minHeight: '100%', width: '100%' }}>
@@ -21,20 +26,21 @@ const NotFound = memo(() => {
           zIndex: 0,
         }}
       >
-        404
+        {status}
       </h1>
       <FluentEmoji emoji={'👀'} size={64} />
       <h2 style={{ fontWeight: 'bold', marginTop: '1em', textAlign: 'center' }}>
-        {t('notFound.title')}
+        {title || t('notFound.title')}
       </h2>
       <div style={{ lineHeight: '1.8', marginBottom: '2em', textAlign: 'center' }}>
-        <div>{t('notFound.desc')}</div>
+        <div>{desc || t('notFound.desc')}</div>
         <div style={{ marginTop: '0.5em' }}>{t('notFound.check')}</div>
       </div>
-
-      <Button onClick={() => (window.location.href = '/')} type={'primary'}>
-        {t('notFound.backHome')}
-      </Button>
+      {extra || (
+        <Button onClick={() => (window.location.href = '/')} type={'primary'}>
+          {t('notFound.backHome')}
+        </Button>
+      )}
     </Flexbox>
   );
 });

package/src/components/DragUpload/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
 import { Center, Flexbox, Icon } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { FileImage, FileText, FileUpIcon } from 'lucide-react';
 import { memo } from 'react';
 import { createPortal } from 'react-dom';
@@ -11,22 +11,22 @@ import { getContainer, useDragUpload } from './useDragUpload';
 const BLOCK_SIZE = 64;
 const ICON_SIZE = { size: 36, strokeWidth: 1.5 };
 
-const useStyles = createStyles(({ css, token }) => {
+const styles = createStaticStyles(({ css, cssVar }) => {
   return {
     container: css`
       width: 320px;
       height: 200px;
-      padding: calc(${token.borderRadiusLG}px + 4px);
+      padding: calc(${cssVar.borderRadiusLG} + 4px);
       border-radius: 16px;
 
-      background: ${token.geekblue};
+      background: ${cssVar.geekblue};
     `,
     content: css`
       width: 100%;
       height: 100%;
       padding: 16px;
       border: 1.5px dashed #fff;
-      border-radius: ${token.borderRadiusLG}px;
+      border-radius: ${cssVar.borderRadiusLG};
     `,
     desc: css`
       font-size: 14px;
@@ -34,24 +34,24 @@ const useStyles = createStyles(({ css, token }) => {
       color: #fff;
     `,
     icon: css`
-      border-radius: ${token.borderRadiusLG}px;
-      color: color-mix(in srgb, ${token.geekblue} 95%, black);
-      background: color-mix(in srgb, ${token.geekblue} 38%, white);
+      border-radius: ${cssVar.borderRadiusLG};
+      color: color-mix(in srgb, ${cssVar.geekblue} 95%, black);
+      background: color-mix(in srgb, ${cssVar.geekblue} 38%, white);
     `,
     iconGroup: css`
       margin-block-start: -44px;
     `,
     iconLeft: css`
       transform: rotateZ(-20deg) translateX(10px);
-      border-radius: ${token.borderRadiusLG}px;
-      color: color-mix(in srgb, ${token.geekblue} 95%, black);
-      background: color-mix(in srgb, ${token.geekblue} 68%, white);
+      border-radius: ${cssVar.borderRadiusLG};
+      color: color-mix(in srgb, ${cssVar.geekblue} 95%, black);
+      background: color-mix(in srgb, ${cssVar.geekblue} 68%, white);
     `,
     iconRight: css`
       transform: rotateZ(20deg) translateX(-10px);
-      border-radius: ${token.borderRadiusLG}px;
-      color: color-mix(in srgb, ${token.geekblue} 95%, black);
-      background: color-mix(in srgb, ${token.geekblue} 68%, white);
+      border-radius: ${cssVar.borderRadiusLG};
+      color: color-mix(in srgb, ${cssVar.geekblue} 95%, black);
+      background: color-mix(in srgb, ${cssVar.geekblue} 68%, white);
     `,
     title: css`
       font-size: 20px;
@@ -66,7 +66,7 @@ const useStyles = createStyles(({ css, token }) => {
       width: 100%;
       height: 100%;
 
-      background: ${token.colorBgMask};
+      background: ${cssVar.colorBgMask};
 
       transition: all 0.3s ease-in-out;
     `,
@@ -80,7 +80,6 @@ interface DragUploadProps {
 
 const DragUpload = memo<DragUploadProps>(({ enabledFiles = true, onUploadFiles }) => {
   const { t } = useTranslation('components');
-  const { styles } = useStyles();
 
   const isDragging = useDragUpload(onUploadFiles);
 

package/src/features/EditorCanvas/DocumentIdMode.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { type IEditor } from '@lobehub/editor';
-import { Alert } from '@lobehub/ui';
-import { Skeleton } from 'antd';
+import { Alert, Skeleton } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createStoreUpdater } from 'zustand-utils';

package/src/features/IntegrationDetailModal/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '@lobechat/const';
 import { Flexbox, Icon, Image, Modal, Tag, Text, Typography } from '@lobehub/ui';
 import { Button, Divider } from 'antd';
-import { createStyles, cssVar } from 'antd-style';
+import { createStaticStyles, cssVar } from 'antd-style';
 import { ExternalLink, Loader2, SquareArrowOutUpRight } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,7 +18,7 @@ import { klavisStoreSelectors, lobehubSkillStoreSelectors } from '@/store/tool/s
 import { KlavisServerStatus } from '@/store/tool/slices/klavisStore';
 import { LobehubSkillStatus } from '@/store/tool/slices/lobehubSkillStore/types';
 
-const useStyles = createStyles(({ css, token }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   authorLink: css`
     cursor: pointer;
 
@@ -26,7 +26,7 @@ const useStyles = createStyles(({ css, token }) => ({
     gap: 4px;
     align-items: center;
 
-    color: ${token.colorPrimary};
+    color: ${cssVar.colorPrimary};
 
     &:hover {
       text-decoration: underline;
@@ -39,7 +39,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
   detailLabel: css`
     font-size: 12px;
-    color: ${token.colorTextTertiary};
+    color: ${cssVar.colorTextTertiary};
   `,
   header: css`
     display: flex;
@@ -49,7 +49,7 @@ const useStyles = createStyles(({ css, token }) => ({
     padding: 16px;
     border-radius: 12px;
 
-    background: ${token.colorFillTertiary};
+    background: ${cssVar.colorFillTertiary};
   `,
   icon: css`
     display: flex;
@@ -61,25 +61,25 @@ const useStyles = createStyles(({ css, token }) => ({
     height: 56px;
     border-radius: 12px;
 
-    background: ${token.colorBgContainer};
+    background: ${cssVar.colorBgContainer};
   `,
   introduction: css`
     font-size: 14px;
     line-height: 1.8;
-    color: ${token.colorText};
+    color: ${cssVar.colorText};
   `,
   sectionTitle: css`
     font-size: 14px;
     font-weight: 600;
-    color: ${token.colorText};
+    color: ${cssVar.colorText};
   `,
   title: css`
     font-size: 18px;
     font-weight: 600;
-    color: ${token.colorText};
+    color: ${cssVar.colorText};
   `,
   toolTag: css`
-    font-family: ${token.fontFamilyCode};
+    font-family: ${cssVar.fontFamilyCode};
     font-size: 12px;
   `,
   toolsContainer: css`
@@ -90,7 +90,7 @@ const useStyles = createStyles(({ css, token }) => ({
   trustWarning: css`
     font-size: 12px;
     line-height: 1.6;
-    color: ${token.colorTextTertiary};
+    color: ${cssVar.colorTextTertiary};
   `,
 }));
 
@@ -107,7 +107,6 @@ export interface IntegrationDetailModalProps {
 
 const IntegrationDetailModal = memo<IntegrationDetailModalProps>(
   ({ open, onClose, type, identifier, isConnecting, onConnect }) => {
-    const { styles } = useStyles();
     const { t } = useTranslation(['plugin', 'setting']);
 
     // Get static config based on type

package/src/features/ResourceManager/index.tsx

@@ -2,8 +2,8 @@
 
 import { BRANDING_NAME } from '@lobechat/business-const';
 import { Flexbox } from '@lobehub/ui';
-import { createStyles, cssVar } from 'antd-style';
-import { memo, useEffect } from 'react';
+import { createStaticStyles, useTheme } from 'antd-style';
+import { memo, useEffect, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
@@ -19,7 +19,7 @@ import UploadDock from './components/UploadDock';
 
 const ChunkDrawer = dynamic(() => import('./components/ChunkDrawer'), { ssr: false });
 
-const useStyles = createStyles(({ css, token }) => {
+const styles = createStaticStyles(({ css, cssVar }) => {
   return {
     container: css`
       position: relative;
@@ -33,7 +33,7 @@ const useStyles = createStyles(({ css, token }) => {
       width: 100%;
       height: 100%;
 
-      background-color: ${token.colorBgContainerSecondary};
+      background-color: var(--editor-overlay-bg, ${cssVar.colorBgContainer});
     `,
     pageEditorOverlay: css`
       position: absolute;
@@ -56,7 +56,7 @@ export type ResouceManagerMode = 'editor' | 'explorer' | 'page';
  * Business component, no need be reusable.
  */
 const ResourceManager = memo(() => {
-  const { styles } = useStyles();
+  const theme = useTheme();
   const [, setSearchParams] = useSearchParams();
   const [mode, currentViewItemId, libraryId, setMode, setCurrentViewItemId] =
     useResourceManagerStore((s) => [
@@ -69,6 +69,13 @@ const ResourceManager = memo(() => {
 
   const currentDocument = useFileStore(documentSelectors.getDocumentById(currentViewItemId));
 
+  const cssVariables = useMemo<Record<string, string>>(
+    () => ({
+      '--editor-overlay-bg': theme.colorBgContainerSecondary,
+    }),
+    [theme.colorBgContainerSecondary],
+  );
+
   // Fetch specific document when switching to page mode if not already loaded
   useEffect(() => {
     if (mode === 'page' && currentViewItemId && !currentDocument) {
@@ -98,7 +105,7 @@ const ResourceManager = memo(() => {
 
   return (
     <>
-      <Flexbox className={styles.container} height={'100%'}>
+      <Flexbox className={styles.container} height={'100%'} style={cssVariables}>
         {/* Explorer is always rendered to preserve its state */}
         <Explorer />
 

package/src/features/ShareModal/ShareImage/Preview.tsx

@@ -1,9 +1,7 @@
 import { ModelTag } from '@lobehub/icons';
-import { Avatar, Flexbox, Markdown } from '@lobehub/ui';
-import { ChatHeaderTitle } from '@lobehub/ui/chat';
+import { Avatar, Flexbox, Markdown, Text } from '@lobehub/ui';
 import { cx } from 'antd-style';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { ProductLogo } from '@/components/Branding';
 import PluginTag from '@/features/PluginTag';
@@ -19,21 +17,17 @@ import { type FieldType } from './type';
 
 const Preview = memo<FieldType & { title?: string }>(
   ({ title, withSystemRole, withBackground, withFooter, widthMode }) => {
-    const [model, plugins, systemRole, isInbox, description, avatar, backgroundColor] =
-      useAgentStore((s) => [
-        agentSelectors.currentAgentModel(s),
-        agentSelectors.displayableAgentPlugins(s),
-        agentSelectors.currentAgentSystemRole(s),
-        builtinAgentSelectors.isInboxAgent(s),
-        agentSelectors.currentAgentDescription(s),
-        agentSelectors.currentAgentAvatar(s),
-        agentSelectors.currentAgentBackgroundColor(s),
-      ]);
-
-    const { t } = useTranslation('chat');
+    const [model, plugins, systemRole, isInbox, avatar, backgroundColor] = useAgentStore((s) => [
+      agentSelectors.currentAgentModel(s),
+      agentSelectors.displayableAgentPlugins(s),
+      agentSelectors.currentAgentSystemRole(s),
+      builtinAgentSelectors.isInboxAgent(s),
+      agentSelectors.currentAgentDescription(s),
+      agentSelectors.currentAgentAvatar(s),
+      agentSelectors.currentAgentBackgroundColor(s),
+    ]);
 
     const displayTitle = isInbox ? 'Lobe AI' : title;
-    const displayDesc = isInbox ? t('inbox.desc') : description;
 
     return (
       <div
@@ -50,24 +44,21 @@ const Preview = memo<FieldType & { title?: string }>(
             gap={16}
           >
             <div className={styles.header}>
-              <Flexbox align={'flex-start'} gap={12} horizontal>
+              <Flexbox align={'center'} gap={12} horizontal>
                 <Avatar
                   avatar={avatar}
                   background={backgroundColor}
                   shape={'square'}
-                  size={40}
+                  size={28}
                   title={title}
                 />
-                <ChatHeaderTitle
-                  desc={displayDesc}
-                  tag={
-                    <Flexbox gap={4} horizontal>
-                      <ModelTag model={model} />
-                      {plugins?.length > 0 && <PluginTag plugins={plugins} />}
-                    </Flexbox>
-                  }
-                  title={displayTitle}
-                />
+                <Text fontSize={16} strong>
+                  {displayTitle}
+                </Text>
+                <Flexbox gap={4} horizontal>
+                  <ModelTag model={model} />
+                  {plugins?.length > 0 && <PluginTag plugins={plugins} />}
+                </Flexbox>
               </Flexbox>
               {withSystemRole && systemRole && (
                 <div className={styles.role}>

package/src/features/ShareModal/ShareImage/style.ts

@@ -12,7 +12,7 @@ export const styles = createStaticStyles(({ css, cssVar }) => ({
     background-size: 120% 120%;
   `,
   container: css`
-    background: ${cssVar.colorBgLayout};
+    background: ${cssVar.colorBgContainer};
   `,
   container_withBackground_true: css`
     overflow: hidden;
@@ -25,8 +25,10 @@ export const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
   header: css`
     margin-block-end: -24px;
-    padding: 16px;
+    padding-block: 16px;
+    padding-inline: 24px;
     border-block-end: 1px solid ${cssVar.colorBorder};
+
     background: ${cssVar.colorBgContainer};
   `,
   role: css`

package/src/features/ShareModal/index.tsx

@@ -60,7 +60,11 @@ const ShareModal = memo<ModalProps>(({ onCancel, open }) => {
       title={t('share', { ns: 'common' })}
       width={'min(90vw, 1024px)'}
     >
-      <Flexbox gap={isMobile ? 8 : 24} style={{ overflow: 'hidden', position: 'relative' }}>
+      <Flexbox
+        gap={isMobile ? 8 : 24}
+        height={'100%'}
+        style={{ overflow: 'hidden', position: 'relative' }}
+      >
         <Segmented
           block
           onChange={(value) => setTab(value as Tab)}

package/src/features/ShareModal/style.ts

@@ -5,6 +5,7 @@ export { styles as containerStyles } from './useContainerStyles';
 
 export const styles = createStaticStyles(({ css, cssVar }) => ({
   body: css`
+    height: 100%;
     ${responsive.sm} {
       padding-block-end: 68px;
     }

package/src/features/ShareModal/useContainerStyles.ts

@@ -14,7 +14,7 @@ export const styles = createStaticStyles(({ css, cssVar }) => ({
       border: 1px solid ${cssVar.colorBorder};
       border-radius: ${cssVar.borderRadiusLG};
 
-      background: ${cssVar.colorBgLayout};
+      background: ${cssVar.colorBgContainer};
 
       /* stylelint-disable selector-class-pattern */
       .react-pdf__Document *,

package/src/features/SharePopover/index.tsx

@@ -1,7 +1,15 @@
 'use client';
 
-import { Button, Flexbox, Popover, copyToClipboard, usePopoverContext } from '@lobehub/ui';
-import { App, Divider, Select, Skeleton, Typography } from 'antd';
+import {
+  Button,
+  Flexbox,
+  Popover,
+  Skeleton,
+  Text,
+  copyToClipboard,
+  usePopoverContext,
+} from '@lobehub/ui';
+import { App, Divider, Select } from 'antd';
 import { ExternalLinkIcon, LinkIcon, LockIcon } from 'lucide-react';
 import { type ReactNode, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,7 +20,7 @@ import { useIsMobile } from '@/hooks/useIsMobile';
 import { topicService } from '@/services/topic';
 import { useChatStore } from '@/store/chat';
 
-import { useStyles } from './style';
+import { styles } from './style';
 
 type Visibility = 'private' | 'link';
 
@@ -23,7 +31,6 @@ interface SharePopoverContentProps {
 const SharePopoverContent = memo<SharePopoverContentProps>(({ onOpenModal }) => {
   const { t } = useTranslation('chat');
   const { message, modal } = App.useApp();
-  const { styles } = useStyles();
   const [updating, setUpdating] = useState(false);
   const { close } = usePopoverContext();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -103,7 +110,7 @@ const SharePopoverContent = memo<SharePopoverContentProps>(({ onOpenModal }) =>
   if (isLoading || !shareInfo) {
     return (
       <Flexbox className={styles.container} gap={16}>
-        <Typography.Text strong>{t('share', { ns: 'common' })}</Typography.Text>
+        <Text strong>{t('share', { ns: 'common' })}</Text>
         <Skeleton active paragraph={{ rows: 2 }} />
       </Flexbox>
     );
@@ -135,10 +142,10 @@ const SharePopoverContent = memo<SharePopoverContentProps>(({ onOpenModal }) =>
 
   return (
     <Flexbox className={styles.container} gap={12} ref={containerRef}>
-      <Typography.Text strong>{t('shareModal.popover.title')}</Typography.Text>
+      <Text strong>{t('shareModal.popover.title')}</Text>
 
       <Flexbox gap={4}>
-        <Typography.Text type="secondary">{t('shareModal.popover.visibility')}</Typography.Text>
+        <Text type="secondary">{t('shareModal.popover.visibility')}</Text>
         <Select
           disabled={updating}
           getPopupContainer={() => containerRef.current || document.body}
@@ -164,9 +171,9 @@ const SharePopoverContent = memo<SharePopoverContentProps>(({ onOpenModal }) =>
         />
       </Flexbox>
 
-      <Typography.Text className={styles.hint} type="secondary">
+      <Text className={styles.hint} type="secondary">
         {getVisibilityHint()}
-      </Typography.Text>
+      </Text>
 
       <Divider style={{ margin: '4px 0' }} />
 

package/src/features/SharePopover/style.ts

@@ -1,6 +1,6 @@
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css }) => ({
+export const styles = createStaticStyles(({ css }) => ({
   container: css`
     padding: 16px;
   `,

package/src/features/SkillStore/CommunityList/Item.tsx

@@ -17,10 +17,10 @@ import { useToolStore } from '@/store/tool';
 import { mcpStoreSelectors, pluginSelectors } from '@/store/tool/selectors';
 import { type DiscoverMcpItem } from '@/types/discover';
 
-import { useItemStyles } from '../style';
+import { itemStyles } from '../style';
 
 const Item = memo<DiscoverMcpItem>(({ name, description, icon, identifier }) => {
-  const { styles } = useItemStyles();
+  const styles = itemStyles;
   const { t } = useTranslation('plugin');
   const { modal } = App.useApp();
   const [detailOpen, setDetailOpen] = useState(false);