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

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);

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { Flexbox } from '@lobehub/ui';
 import { memo, useCallback, useMemo } from 'react';
 
 import { ChatList, ConversationProvider, MessageItem } from '@/features/Conversation';
@@ -44,9 +43,7 @@ const SharedMessageList = memo<SharedMessageListProps>(({ agentId, groupId, shar
         replaceMessages(messages, { context: ctx });
       }}
     >
-      <Flexbox flex={1}>
-        <ChatList disableActionsBar itemContent={itemContent} />
-      </Flexbox>
+      <ChatList disableActionsBar itemContent={itemContent} />
     </ConversationProvider>
   );
 });

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

@@ -1,52 +1,27 @@
 'use client';
 
-import { Avatar, Flexbox } from '@lobehub/ui';
-import { Typography } from 'antd';
-import { createStyles, cssVar } from 'antd-style';
+import { Alert, Center, Flexbox, Text } from '@lobehub/ui';
+import { cx } from 'antd-style';
 import NextLink from 'next/link';
-import { PropsWithChildren, memo, useEffect, useMemo } from 'react';
+import { PropsWithChildren, memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, Outlet, useParams } from 'react-router-dom';
 import useSWR from 'swr';
 
 import { ProductLogo } from '@/components/Branding';
-import { DEFAULT_AVATAR } from '@/const/meta';
-import GroupAvatar from '@/features/GroupAvatar';
 import UserAvatar from '@/features/User/UserAvatar';
+import { useIsDark } from '@/hooks/useIsDark';
 import { lambdaClient } from '@/libs/trpc/client';
 import { useAgentStore } from '@/store/agent';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/slices/auth/selectors';
 
 import SharePortal from '../features/Portal';
-
-const useStyles = createStyles(({ css, token }) => ({
-  container: css`
-    width: 100vw;
-    min-height: 100vh;
-    background: ${token.colorBgLayout};
-  `,
-  content: css`
-    flex: 1;
-    width: 100%;
-    padding-block: 24px;
-    padding-inline: 24px;
-  `,
-  footer: css`
-    padding-block: 16px;
-    padding-inline: 24px;
-    color: ${token.colorTextTertiary};
-    text-align: center;
-  `,
-  header: css`
-    height: 52px;
-    padding: 8px;
-  `,
-}));
+import { styles } from './style';
 
 const ShareTopicLayout = memo<PropsWithChildren>(({ children }) => {
-  const { styles } = useStyles();
   const { t } = useTranslation('chat');
+  const isDarkMode = useIsDark();
   const { id } = useParams<{ id: string }>();
   const dispatchAgentMap = useAgentStore((s) => s.internal_dispatchAgentMap);
   const isLogin = useUserStore(authSelectors.isLogin);
@@ -69,100 +44,51 @@ const ShareTopicLayout = memo<PropsWithChildren>(({ children }) => {
     }
   }, [data?.agentId, data?.agentMeta, dispatchAgentMap]);
 
-  const isGroup = !!data?.groupId;
-  const isInboxAgent = !isGroup && data?.agentMeta?.slug === 'inbox';
-  const agentOrGroupTitle =
-    data?.groupMeta?.title || (isInboxAgent ? 'LobeAI' : data?.agentMeta?.title);
-  const agentMarketIdentifier = data?.agentMeta?.marketIdentifier;
-
-  // Build group avatars for GroupAvatar component
-  const groupAvatars = useMemo(() => {
-    if (!isGroup || !data?.groupMeta?.members) return [];
-    return data.groupMeta.members.map((member) => ({
-      avatar: member.avatar || DEFAULT_AVATAR,
-      backgroundColor: member.backgroundColor || undefined,
-    }));
-  }, [isGroup, data?.groupMeta?.members]);
-
-  const renderAgentOrGroupAvatar = () => {
-    // For group: use GroupAvatar with members
-    if (isGroup && groupAvatars.length > 0) {
-      return <GroupAvatar avatars={groupAvatars} size={24} />;
-    }
-
-    // For inbox agent: skip avatar as it's the same as product icon
-    if (isInboxAgent) {
-      return null;
-    }
-
-    // For agent: use single Avatar
-    if (data?.agentMeta?.avatar) {
-      return (
-        <Avatar
-          avatar={data.agentMeta.avatar}
-          background={data.agentMeta.backgroundColor || cssVar.colorFillTertiary}
-          shape="square"
-          size={24}
-        />
-      );
-    }
-
-    return null;
-  };
-
-  const renderAgentOrGroupTitle = () => {
-    if (!agentOrGroupTitle) return null;
-
-    // If agent has marketIdentifier, render as link to assistant page
-    if (agentMarketIdentifier && !data?.groupMeta?.title) {
-      return (
-        <a href={`/community/agent/${agentMarketIdentifier}`} rel="noreferrer" target="_blank">
-          <Typography.Text ellipsis strong>
-            {agentOrGroupTitle}
-          </Typography.Text>
-        </a>
-      );
-    }
-
-    return (
-      <Typography.Text ellipsis strong>
-        {agentOrGroupTitle}
-      </Typography.Text>
-    );
-  };
-
   return (
-    <Flexbox className={styles.container}>
-      <Flexbox align="center" className={styles.header} gap={12} horizontal justify="space-between">
-        <Flexbox align="center" flex={1} gap={12} horizontal>
-          {isLogin ? (
-            <Link to="/">
-              <ProductLogo size={24} />
-            </Link>
-          ) : (
-            <NextLink href="/login">
-              <ProductLogo size={24} />
-            </NextLink>
-          )}
-          {renderAgentOrGroupAvatar()}
-          {renderAgentOrGroupTitle()}
+    <Flexbox className={styles.outerContainer} height={'100%'} padding={8} width={'100%'}>
+      <Flexbox
+        className={cx(isDarkMode ? styles.innerContainerDark : styles.innerContainerLight)}
+        height={'100%'}
+        width={'100%'}
+      >
+        <Flexbox
+          align={'center'}
+          gap={8}
+          horizontal
+          justify={'space-between'}
+          padding={8}
+          width={'100%'}
+        >
+          <Flexbox align="center" flex={1} gap={12} horizontal>
+            {isLogin ? (
+              <Link to="/">
+                <UserAvatar size={32} />
+              </Link>
+            ) : (
+              <NextLink href="/login">
+                <ProductLogo size={32} />
+              </NextLink>
+            )}
+          </Flexbox>
+          <Center flex={2} gap={12} horizontal>
+            {data?.title && (
+              <Text align={'center'} ellipsis style={{ textAlign: 'center' }} weight={500}>
+                {data.title}
+              </Text>
+            )}
+          </Center>
+          <Flexbox align="center" flex={1} gap={12} horizontal justify={'flex-end'} />
         </Flexbox>
-        {data?.title && (
-          <Typography.Text ellipsis strong style={{ textAlign: 'center' }}>
-            {data.title}
-          </Typography.Text>
-        )}
-        <Flexbox align="center" flex={1} horizontal justify="flex-end">
-          {isLogin && <UserAvatar size={24} />}
-        </Flexbox>
-      </Flexbox>
-      <Flexbox className={styles.content} horizontal style={{ overflow: 'hidden' }}>
-        <Flexbox flex={1} style={{ overflow: 'hidden' }}>
-          {children ?? <Outlet />}
+        <Flexbox className={styles.content} horizontal style={{ overflow: 'hidden' }}>
+          <Flexbox flex={1} style={{ overflow: 'hidden' }}>
+            {children ?? <Outlet />}
+          </Flexbox>
+          <SharePortal />
         </Flexbox>
-        <SharePortal />
+        <Center padding={8} style={{ opacity: 0.25 }}>
+          <Alert title={t('sharePageDisclaimer')} type={'secondary'} variant={'borderless'} />
+        </Center>
       </Flexbox>
-      <Typography.Text className={styles.footer}>{t('sharePageDisclaimer')}</Typography.Text>
     </Flexbox>
   );
 });

package/src/app/[variants]/share/t/[id]/_layout/style.ts

@@ -0,0 +1,59 @@
+import { createStaticStyles } from 'antd-style';
+
+export const styles = createStaticStyles(({ css, cssVar }) => ({
+  container: css`
+    width: 100vw;
+    min-height: 100vh;
+    background: ${cssVar.colorBgLayout};
+  `,
+
+  content: css`
+    flex: 1;
+    width: 100%;
+  `,
+
+  // Divider 样式
+  divider: css`
+    height: 24px;
+  `,
+
+  footer: css`
+    padding-block: 16px;
+    padding-inline: 24px;
+    color: ${cssVar.colorTextTertiary};
+    text-align: center;
+  `,
+
+  header: css`
+    height: 52px;
+    padding: 8px;
+  `,
+
+  // 内层容器 - 深色模式
+  innerContainerDark: css`
+    position: relative;
+
+    overflow: hidden;
+
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: ${cssVar.borderRadius};
+
+    background: ${cssVar.colorBgContainer};
+  `,
+
+  // 内层容器 - 浅色模式
+  innerContainerLight: css`
+    position: relative;
+
+    overflow: hidden;
+
+    border: 1px solid ${cssVar.colorBorder};
+    border-radius: ${cssVar.borderRadius};
+
+    background: ${cssVar.colorBgContainer};
+  `,
+  // 外层容器
+  outerContainer: css`
+    position: relative;
+  `,
+}));

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { DraggablePanel } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { memo } from 'react';
 
 import { CHAT_PORTAL_TOOL_UI_WIDTH } from '@/const/layoutTokens';
@@ -9,7 +9,7 @@ import { PortalContent } from '@/features/Portal/router';
 import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/selectors';
 
-const useStyles = createStyles(({ css, token }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   body: css`
     overflow: hidden;
     display: flex;
@@ -30,17 +30,16 @@ const useStyles = createStyles(({ css, token }) => ({
     min-height: 100%;
     max-height: 100%;
 
-    background: ${token.colorBgContainer};
+    background: ${cssVar.colorBgContainer};
   `,
   drawer: css`
     z-index: 10;
     height: 100%;
-    background: ${token.colorBgContainer};
+    background: ${cssVar.colorBgContainer};
   `,
 }));
 
 const SharePortal = memo(() => {
-  const { styles } = useStyles();
   const showPortal = useChatStore(chatPortalSelectors.showPortal);
 
   return (