@lobehub/lobehub 2.0.0-next.276 → 2.0.0-next.278

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
 
@@ -77,7 +84,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,

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

@@ -11,34 +11,33 @@ import { Tools } from '../../AssistantGroup/Tools';
 import Reasoning from '../../components/Reasoning';
 import MessageContent from './MessageContent';
 
-const ContentBlock = memo<AssistantContentBlock>(({ id, tools, content, reasoning, error }) => {
-  const errorContent = useErrorContent(error);
-  const isReasoning = useConversationStore(messageStateSelectors.isMessageInReasoning(id));
-  const hasTools = tools && tools.length > 0;
-  const showReasoning =
-    (!!reasoning && reasoning.content?.trim() !== '') || (!reasoning && isReasoning);
-
-  if (error && (content === LOADING_FLAT || !content))
-    return (
-      <ErrorContent
-        error={
-          errorContent && error && (content === LOADING_FLAT || !content) ? errorContent : undefined
-        }
-        id={id}
-      />
-    );
+interface ContentBlockProps extends AssistantContentBlock {
+  disableEditing?: boolean;
+}
+
+const ContentBlock = memo<ContentBlockProps>(
+  ({ id, tools, content, reasoning, error, disableEditing }) => {
+    const errorContent = useErrorContent(error);
+    const isReasoning = useConversationStore(messageStateSelectors.isMessageInReasoning(id));
+    const hasTools = tools && tools.length > 0;
+    const showReasoning =
+      (!!reasoning && reasoning.content?.trim() !== '') || (!reasoning && isReasoning);
 
-  return (
-    <Flexbox gap={8} id={id}>
-      {showReasoning && <Reasoning {...reasoning} id={id} />}
+    if (error && (content === LOADING_FLAT || !content))
+      return <ErrorContent error={errorContent} id={id} />;
 
-      {/* Content - markdown text */}
-      <MessageContent content={content} hasTools={hasTools} id={id} />
+    return (
+      <Flexbox gap={8} id={id}>
+        {showReasoning && <Reasoning {...reasoning} id={id} />}
+
+        {/* Content - markdown text */}
+        <MessageContent content={content} hasTools={hasTools} id={id} />
 
-      {/* Tools */}
-      {hasTools && <Tools messageId={id} tools={tools} />}
-    </Flexbox>
-  );
-});
+        {/* Tools */}
+        {hasTools && <Tools disableEditing={disableEditing} messageId={id} tools={tools} />}
+      </Flexbox>
+    );
+  },
+);
 
 export default ContentBlock;

package/src/features/Conversation/Messages/Supervisor/components/Group.tsx

@@ -29,7 +29,7 @@ interface GroupChildrenProps {
   messageIndex: number;
 }
 
-const Group = memo<GroupChildrenProps>(({ blocks, id, content }) => {
+const Group = memo<GroupChildrenProps>(({ blocks, id, content, disableEditing }) => {
   const isCollapsed = useConversationStore(messageStateSelectors.isMessageCollapsed(id));
   const contextValue = useMemo(() => ({ assistantGroupId: id }), [id]);
 
@@ -46,7 +46,9 @@ const Group = memo<GroupChildrenProps>(({ blocks, id, content }) => {
     <MessageAggregationContext value={contextValue}>
       <Flexbox className={styles.container} gap={8}>
         {blocks.map((item) => {
-          return <ContentBlock {...item} key={id + '.' + item.id} />;
+          return (
+            <ContentBlock {...item} disableEditing={disableEditing} key={id + '.' + item.id} />
+          );
         })}
       </Flexbox>
     </MessageAggregationContext>

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

@@ -20,6 +20,7 @@ const Render = dynamic(() => import('../../AssistantGroup/Tool/Render'), {
 export interface InspectorProps {
   apiName: string;
   arguments?: string;
+  disableEditing?: boolean;
   identifier: string;
   index: number;
   messageId: string;
@@ -32,7 +33,7 @@ export interface InspectorProps {
  * Tool message component - adapts Tool message data to use AssistantGroup/Tool components
  */
 const Tool = memo<InspectorProps>(
-  ({ arguments: requestArgs, apiName, messageId, toolCallId, index, identifier, type }) => {
+  ({ arguments: requestArgs, apiName, disableEditing, messageId, toolCallId, index, identifier, type }) => {
     const [showDebug, setShowDebug] = useState(false);
     const [showPluginRender, setShowPluginRender] = useState(false);
     const [expand, setExpand] = useState(true);
@@ -66,16 +67,18 @@ const Tool = memo<InspectorProps>(
       >
         <AccordionItem
           action={
-            <Actions
-              assistantMessageId={messageId}
-              handleExpand={(expand) => setExpand(!!expand)}
-              identifier={identifier}
-              setShowDebug={setShowDebug}
-              setShowPluginRender={setShowPluginRender}
-              showCustomPluginRender={false}
-              showDebug={showDebug}
-              showPluginRender={showPluginRender}
-            />
+            !disableEditing && (
+              <Actions
+                assistantMessageId={messageId}
+                handleExpand={(expand) => setExpand(!!expand)}
+                identifier={identifier}
+                setShowDebug={setShowDebug}
+                setShowPluginRender={setShowPluginRender}
+                showCustomPluginRender={false}
+                showDebug={showDebug}
+                showPluginRender={showPluginRender}
+              />
+            )
           }
           itemKey={'tool'}
           paddingBlock={4}
@@ -83,7 +86,7 @@ const Tool = memo<InspectorProps>(
           title={<Inspectors apiName={apiName} identifier={identifier} result={result} />}
         >
           <Flexbox gap={8} paddingBlock={8}>
-            {showDebug && (
+            {showDebug && !disableEditing && (
               <Debug
                 apiName={apiName}
                 identifier={identifier}
@@ -96,6 +99,7 @@ const Tool = memo<InspectorProps>(
             <Render
               apiName={apiName}
               arguments={requestArgs}
+              disableEditing={disableEditing}
               identifier={identifier}
               messageId={messageId}
               result={result}

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

@@ -8,11 +8,12 @@ import { dataSelectors, useConversationStore } from '../../store';
 import Tool from './Tool';
 
 interface ToolMessageProps {
+  disableEditing?: boolean;
   id: string;
   index: number;
 }
 
-const ToolMessage = memo<ToolMessageProps>(({ id, index }) => {
+const ToolMessage = memo<ToolMessageProps>(({ disableEditing, id, index }) => {
   const { t } = useTranslation('plugin');
   const item = useConversationStore(dataSelectors.getDbMessageById(id), isEqual) as UIChatMessage;
   const deleteToolMessage = useConversationStore((s) => s.deleteToolMessage);
@@ -29,17 +30,25 @@ const ToolMessage = memo<ToolMessageProps>(({ id, index }) => {
 
   return (
     <Flexbox gap={4} paddingBlock={12}>
-      <Alert
-        action={
-          <Button loading={loading} onClick={handleDelete} size={'small'} type={'primary'}>
-            {t('inspector.delete')}
-          </Button>
-        }
-        title={t('inspector.orphanedToolCall')}
-        type={'secondary'}
-      />
+      {!disableEditing && (
+        <Alert
+          action={
+            <Button loading={loading} onClick={handleDelete} size={'small'} type={'primary'}>
+              {t('inspector.delete')}
+            </Button>
+          }
+          title={t('inspector.orphanedToolCall')}
+          type={'secondary'}
+        />
+      )}
       {item.plugin && (
-        <Tool {...item.plugin} index={index} messageId={id} toolCallId={item.tool_call_id!} />
+        <Tool
+          {...item.plugin}
+          disableEditing={disableEditing}
+          index={index}
+          messageId={id}
+          toolCallId={item.tool_call_id!}
+        />
       )}
     </Flexbox>
   );

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

@@ -158,7 +158,7 @@ const MessageItem = memo<MessageItemProps>(
         }
 
         case 'tool': {
-          return <ToolMessage id={id} index={index} />;
+          return <ToolMessage disableEditing={disableEditing} id={id} index={index} />;
         }
       }
 

package/src/features/Conversation/store/slices/data/action.ts

@@ -103,13 +103,14 @@ export const dataSlice: StateCreator<
   useFetchMessages: (context, skipFetch) => {
     // When skipFetch is true, SWR key is null - no fetch occurs
     // This is used when external messages are provided (e.g., creating new thread)
+    // Allow fetch if: has agentId (both agent topics and group topics have agentId)
     const shouldFetch = !skipFetch && !!context.agentId;
 
     return useClientDataSWRWithSync<UIChatMessage[]>(
       shouldFetch ? ['CONVERSATION_FETCH_MESSAGES', context] : null,
 
       async () => {
-        return messageService.getMessages(context as any);
+        return messageService.getMessages(context);
       },
       {
         onData: (data) => {