@lobehub/lobehub 2.0.0-next.277 → 2.0.0-next.279

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

@@ -0,0 +1,54 @@
+'use client';
+
+import { Flexbox } from '@lobehub/ui';
+import { memo, useCallback, useMemo } from 'react';
+
+import { ChatList, ConversationProvider, MessageItem } from '@/features/Conversation';
+import { useChatStore } from '@/store/chat';
+import { messageMapKey } from '@/store/chat/utils/messageMapKey';
+
+interface SharedMessageListProps {
+  agentId: string | null;
+  groupId: string | null;
+  shareId: string;
+  topicId: string;
+}
+
+const SharedMessageList = memo<SharedMessageListProps>(({ agentId, groupId, shareId, topicId }) => {
+  const context = useMemo(
+    () => ({
+      agentId: agentId ?? '',
+      groupId: groupId ?? undefined,
+      topicId,
+      topicShareId: shareId,
+    }),
+    [agentId, groupId, shareId, topicId],
+  );
+
+  // Sync messages to chatStore for artifact selectors to work
+  const chatKey = useMemo(() => messageMapKey(context), [context]);
+  const replaceMessages = useChatStore((s) => s.replaceMessages);
+  const messages = useChatStore((s) => s.dbMessagesMap[chatKey]);
+
+  const itemContent = useCallback(
+    (index: number, id: string) => <MessageItem disableEditing id={id} index={index} key={id} />,
+    [],
+  );
+
+  return (
+    <ConversationProvider
+      context={context}
+      hasInitMessages={!!messages}
+      messages={messages}
+      onMessagesChange={(messages) => {
+        replaceMessages(messages, { context });
+      }}
+    >
+      <Flexbox flex={1}>
+        <ChatList disableActionsBar itemContent={itemContent} />
+      </Flexbox>
+    </ConversationProvider>
+  );
+});
+
+export default SharedMessageList;

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

@@ -0,0 +1,170 @@
+'use client';
+
+import { Avatar, Flexbox } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles, cssVar } from 'antd-style';
+import NextLink from 'next/link';
+import { PropsWithChildren, memo, useEffect, useMemo } 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 { 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;
+  `,
+}));
+
+const ShareTopicLayout = memo<PropsWithChildren>(({ children }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('chat');
+  const { id } = useParams<{ id: string }>();
+  const dispatchAgentMap = useAgentStore((s) => s.internal_dispatchAgentMap);
+  const isLogin = useUserStore(authSelectors.isLogin);
+
+  const { data } = useSWR(
+    id ? ['shared-topic', id] : null,
+    () => lambdaClient.share.getSharedTopic.query({ shareId: id! }),
+    { revalidateOnFocus: false },
+  );
+
+  // Set agent meta to agentStore for avatar display
+  useEffect(() => {
+    if (data?.agentId && data.agentMeta) {
+      const meta = {
+        avatar: data.agentMeta.avatar ?? undefined,
+        backgroundColor: data.agentMeta.backgroundColor ?? undefined,
+        title: data.agentMeta.title ?? undefined,
+      };
+      dispatchAgentMap(data.agentId, meta);
+    }
+  }, [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/assistant/${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>
+        {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>
+        <SharePortal />
+      </Flexbox>
+      <Typography.Text className={styles.footer}>{t('sharePageDisclaimer')}</Typography.Text>
+    </Flexbox>
+  );
+});
+
+export default ShareTopicLayout;

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

@@ -0,0 +1,66 @@
+'use client';
+
+import { DraggablePanel } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+import { CHAT_PORTAL_TOOL_UI_WIDTH } from '@/const/layoutTokens';
+import { PortalContent } from '@/features/Portal/router';
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+
+const useStyles = createStyles(({ css, token }) => ({
+  body: css`
+    overflow: hidden;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    height: 0;
+    padding-block-end: 12px;
+  `,
+  content: css`
+    position: relative;
+
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    min-height: 100%;
+    max-height: 100%;
+
+    background: ${token.colorBgContainer};
+  `,
+  drawer: css`
+    z-index: 10;
+    height: 100%;
+    background: ${token.colorBgContainer};
+  `,
+}));
+
+const SharePortal = memo(() => {
+  const { styles } = useStyles();
+  const showPortal = useChatStore(chatPortalSelectors.showPortal);
+
+  return (
+    <DraggablePanel
+      className={styles.drawer}
+      classNames={{ content: styles.content }}
+      defaultSize={{ width: CHAT_PORTAL_TOOL_UI_WIDTH }}
+      expand={showPortal}
+      expandable={false}
+      minWidth={CHAT_PORTAL_TOOL_UI_WIDTH}
+      placement="right"
+      showHandleWhenCollapsed={false}
+      showHandleWideArea={false}
+      size={{ height: '100%', width: CHAT_PORTAL_TOOL_UI_WIDTH }}
+    >
+      <PortalContent renderBody={(body) => <div className={styles.body}>{body}</div>} />
+    </DraggablePanel>
+  );
+});
+
+SharePortal.displayName = 'SharePortal';
+
+export default SharePortal;

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

@@ -0,0 +1,112 @@
+'use client';
+
+import { Flexbox } from '@lobehub/ui';
+import { TRPCClientError } from '@trpc/client';
+import { Button, Result, Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import useSWR from 'swr';
+
+import { lambdaClient } from '@/libs/trpc/client';
+
+import SharedMessageList from './SharedMessageList';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    flex: 1;
+  `,
+  errorContainer: css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    min-height: 400px;
+    padding: 48px;
+
+    text-align: center;
+  `,
+}));
+
+const ShareTopicPage = memo(() => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('chat');
+  const { id } = useParams<{ id: string }>();
+
+  const { data, error, isLoading } = useSWR(
+    id ? ['shared-topic', id] : null,
+    () => lambdaClient.share.getSharedTopic.query({ shareId: id! }),
+    { revalidateOnFocus: false },
+  );
+
+  if (isLoading) {
+    return (
+      <Flexbox className={styles.container} gap={16}>
+        <Skeleton active paragraph={{ rows: 1 }} title={false} />
+        <Skeleton active paragraph={{ rows: 6 }} />
+      </Flexbox>
+    );
+  }
+
+  if (error) {
+    const trpcError = error instanceof TRPCClientError ? error : null;
+    const errorCode = trpcError?.data?.code;
+
+    if (errorCode === 'UNAUTHORIZED') {
+      return (
+        <Flexbox className={styles.errorContainer}>
+          <Result
+            extra={
+              <Button href="/login" type="primary">
+                {t('sharePage.error.unauthorized.action')}
+              </Button>
+            }
+            status="403"
+            subTitle={t('sharePage.error.unauthorized.subtitle')}
+            title={t('sharePage.error.unauthorized.title')}
+          />
+        </Flexbox>
+      );
+    }
+
+    if (errorCode === 'FORBIDDEN') {
+      return (
+        <Flexbox className={styles.errorContainer}>
+          <Result
+            status="403"
+            subTitle={t('sharePage.error.forbidden.subtitle')}
+            title={t('sharePage.error.forbidden.title')}
+          />
+        </Flexbox>
+      );
+    }
+
+    // NOT_FOUND or other errors
+    return (
+      <Flexbox className={styles.errorContainer}>
+        <Result
+          status="404"
+          subTitle={t('sharePage.error.notFound.subtitle')}
+          title={t('sharePage.error.notFound.title')}
+        />
+      </Flexbox>
+    );
+  }
+
+  if (!data) return null;
+
+  return (
+    <Flexbox className={styles.container}>
+      <SharedMessageList
+        agentId={data.agentId}
+        groupId={data.groupId}
+        shareId={data.shareId}
+        topicId={data.topicId}
+      />
+    </Flexbox>
+  );
+});
+
+export default ShareTopicPage;

package/src/app/robots.tsx

@@ -26,7 +26,7 @@ const robots = (): MetadataRoute.Robots => {
       },
       {
         allow: ['/'],
-        disallow: ['/api/*', '/login', '/signup', '/knowledge/*'],
+        disallow: ['/api/*', '/login', '/signup', '/knowledge/*', '/share/*'],
         userAgent: '*',
       },
     ],

package/src/business/client/BusinessMobileRoutes.tsx

@@ -1,4 +1,4 @@
-import { RouteConfig } from '@/utils/router';
+import { type RouteConfig } from '@/utils/router';
 
 export const BusinessMobileRoutesWithMainLayout: RouteConfig[] = [];
 export const BusinessMobileRoutesWithSettingsLayout: RouteConfig[] = [];

package/src/features/Conversation/ChatList/index.tsx

@@ -15,6 +15,10 @@ import { dataSelectors, useConversationStore } from '../store';
 import VirtualizedList from './components/VirtualizedList';
 
 export interface ChatListProps {
+  /**
+   * Disable the actions bar for all messages (e.g., in share page)
+   */
+  disableActionsBar?: boolean;
   /**
    * Custom item renderer. If not provided, uses default ChatItem.
    */
@@ -29,7 +33,7 @@ export interface ChatListProps {
  *
  * Uses ConversationStore for message data and fetching.
  */
-const ChatList = memo<ChatListProps>(({ welcome, itemContent }) => {
+const ChatList = memo<ChatListProps>(({ disableActionsBar, welcome, itemContent }) => {
   // Fetch messages (SWR key is null when skipFetch is true)
   const context = useConversationStore((s) => s.context);
   const enableUserMemories = useUserStore(settingsSelectors.memoryEnabled);
@@ -39,9 +43,12 @@ const ChatList = memo<ChatListProps>(({ welcome, itemContent }) => {
   ]);
   useFetchMessages(context, skipFetch);
 
-  // Fetch notebook documents when topic is selected
-  useFetchNotebookDocuments(context.topicId!);
-  useFetchTopicMemories(enableUserMemories ? context.topicId : undefined);
+  // Skip fetching notebook and memories for share pages (they require authentication)
+  const isSharePage = !!context.topicShareId;
+
+  // Fetch notebook documents when topic is selected (skip for share pages)
+  useFetchNotebookDocuments(isSharePage ? undefined : context.topicId!);
+  useFetchTopicMemories(enableUserMemories && !isSharePage ? context.topicId : undefined);
 
   // Use selectors for data
 
@@ -56,7 +63,11 @@ const ChatList = memo<ChatListProps>(({ welcome, itemContent }) => {
   );
   const messagesInit = useConversationStore(dataSelectors.messagesInit);
 
-  if (!messagesInit) {
+  // When topicId is null (new conversation), show welcome directly without waiting for fetch
+  // because there's no server data to fetch - only local optimistic updates exist
+  const isNewConversation = !context.topicId;
+
+  if (!messagesInit && !isNewConversation) {
     return <SkeletonList />;
   }
 
@@ -77,7 +88,7 @@ const ChatList = memo<ChatListProps>(({ welcome, itemContent }) => {
   }
 
   return (
-    <MessageActionProvider withSingletonActionsBar>
+    <MessageActionProvider withSingletonActionsBar={!disableActionsBar}>
       <VirtualizedList
         dataSource={displayMessageIds}
         // isGenerating={isGenerating}

package/src/features/Conversation/Messages/AssistantGroup/Tool/Render/index.tsx

@@ -16,6 +16,7 @@ import RejectedResponse from './RejectedResponse';
 interface RenderProps {
   apiName: string;
   arguments?: string;
+  disableEditing?: boolean;
   identifier: string;
   intervention?: ToolIntervention;
   isArgumentsStreaming?: boolean;
@@ -43,6 +44,7 @@ const Render = memo<RenderProps>(
     toolCallId,
     messageId,
     arguments: requestArgs,
+    disableEditing,
     showPluginRender,
     setShowPluginRender,
     identifier,
@@ -54,7 +56,7 @@ const Render = memo<RenderProps>(
     isArgumentsStreaming,
     isToolCalling,
   }) => {
-    if (toolMessageId && intervention?.status === 'pending') {
+    if (toolMessageId && intervention?.status === 'pending' && !disableEditing) {
       return (
         <Intervention
           apiName={apiName}
@@ -150,9 +152,11 @@ const Render = memo<RenderProps>(
             showPluginRender={showPluginRender}
             toolCallId={toolCallId}
           />
-          <div>
-            <ModeSelector />
-          </div>
+          {!disableEditing && (
+            <div>
+              <ModeSelector />
+            </div>
+          )}
         </Flexbox>
       </Suspense>
     );

package/src/features/Conversation/Messages/AssistantGroup/Tool/index.tsx

@@ -30,6 +30,7 @@ export interface GroupToolProps {
   apiName: string;
   arguments?: string;
   assistantMessageId: string;
+  disableEditing?: boolean;
   id: string;
   identifier: string;
   intervention?: ToolIntervention;
@@ -43,6 +44,7 @@ const Tool = memo<GroupToolProps>(
     arguments: requestArgs,
     apiName,
     assistantMessageId,
+    disableEditing,
     id,
     intervention,
     identifier,
@@ -106,16 +108,18 @@ const Tool = memo<GroupToolProps>(
     return (
       <AccordionItem
         action={
-          <Actions
-            assistantMessageId={assistantMessageId}
-            handleExpand={handleExpand}
-            identifier={identifier}
-            setShowDebug={setShowDebug}
-            setShowPluginRender={setShowPluginRender}
-            showCustomPluginRender={showCustomPluginRender}
-            showDebug={showDebug}
-            showPluginRender={showPluginRender}
-          />
+          !disableEditing && (
+            <Actions
+              assistantMessageId={assistantMessageId}
+              handleExpand={handleExpand}
+              identifier={identifier}
+              setShowDebug={setShowDebug}
+              setShowPluginRender={setShowPluginRender}
+              showCustomPluginRender={showCustomPluginRender}
+              showDebug={showDebug}
+              showPluginRender={showPluginRender}
+            />
+          )
         }
         allowExpand={hasCustomRender}
         expand={isToolRenderExpand}
@@ -150,6 +154,7 @@ const Tool = memo<GroupToolProps>(
             <Render
               apiName={apiName}
               arguments={requestArgs}
+              disableEditing={disableEditing}
               identifier={identifier}
               intervention={intervention}
               isArgumentsStreaming={isArgumentsStreaming}

package/src/features/Conversation/Messages/AssistantGroup/Tools.tsx

@@ -5,11 +5,12 @@ import { memo } from 'react';
 import Tool from './Tool';
 
 interface ToolsRendererProps {
+  disableEditing?: boolean;
   messageId: string;
   tools: ChatToolPayloadWithResult[];
 }
 
-export const Tools = memo<ToolsRendererProps>(({ messageId, tools }) => {
+export const Tools = memo<ToolsRendererProps>(({ disableEditing, messageId, tools }) => {
   if (!tools || tools.length === 0) return null;
 
   return (
@@ -19,6 +20,7 @@ export const Tools = memo<ToolsRendererProps>(({ messageId, tools }) => {
           apiName={tool.apiName}
           arguments={tool.arguments}
           assistantMessageId={messageId}
+          disableEditing={disableEditing}
           id={tool.id}
           identifier={tool.identifier}
           intervention={tool.intervention}

package/src/features/Conversation/Messages/AssistantGroup/components/ContentBlock.tsx

@@ -14,9 +14,10 @@ import MessageContent from './MessageContent';
 
 interface ContentBlockProps extends AssistantContentBlock {
   assistantId: string;
+  disableEditing?: boolean;
 }
 const ContentBlock = memo<ContentBlockProps>(
-  ({ id, tools, content, imageList, reasoning, error, assistantId }) => {
+  ({ id, tools, content, imageList, reasoning, error, assistantId, disableEditing }) => {
     const errorContent = useErrorContent(error);
     const showImageItems = !!imageList && imageList.length > 0;
     const [isReasoning, deleteMessage, continueGeneration] = useConversationStore((s) => [
@@ -70,7 +71,7 @@ const ContentBlock = memo<ContentBlockProps>(
         {showImageItems && <ImageFileListViewer items={imageList} />}
 
         {/* Tools */}
-        {hasTools && <Tools messageId={id} tools={tools} />}
+        {hasTools && <Tools disableEditing={disableEditing} messageId={id} tools={tools} />}
       </Flexbox>
     );
   },

package/src/features/Conversation/Messages/AssistantGroup/components/GroupItem.tsx

@@ -25,10 +25,10 @@ const GroupItem = memo<GroupItemProps>(
           toggleMessageEditing(item.id, true);
         }}
       >
-        <ContentBlock {...item} assistantId={assistantId} error={error} />
+        <ContentBlock {...item} assistantId={assistantId} disableEditing={disableEditing} error={error} />
       </Flexbox>
     ) : (
-      <ContentBlock {...item} assistantId={assistantId} error={error} />
+      <ContentBlock {...item} assistantId={assistantId} disableEditing={disableEditing} error={error} />
     );
   },
   isEqual,