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

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 (

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