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

package/src/features/SharePopover/index.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import { Button, Flexbox, Popover, copyToClipboard, usePopoverContext } from '@lobehub/ui';
+import { App, Divider, Select, Skeleton, Typography } from 'antd';
+import { CopyIcon, ExternalLinkIcon, LinkIcon, LockIcon } from 'lucide-react';
+import { type ReactNode, memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import useSWR from 'swr';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { topicService } from '@/services/topic';
+import { useChatStore } from '@/store/chat';
+
+import { useStyles } from './style';
+
+type Visibility = 'private' | 'link';
+
+interface SharePopoverContentProps {
+  onOpenModal?: () => void;
+}
+
+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);
+
+  const activeTopicId = useChatStore((s) => s.activeTopicId);
+
+  const {
+    data: shareInfo,
+    isLoading,
+    mutate,
+  } = useSWR(
+    activeTopicId ? ['topic-share-info', activeTopicId] : null,
+    () => topicService.getShareInfo(activeTopicId!),
+    { revalidateOnFocus: false },
+  );
+
+  // Auto-create share record if not exists
+  useEffect(() => {
+    if (!isLoading && !shareInfo && activeTopicId) {
+      topicService.enableSharing(activeTopicId, 'private').then(() => mutate());
+    }
+  }, [isLoading, shareInfo, activeTopicId, mutate]);
+
+  const shareUrl = shareInfo?.id ? `${window.location.origin}/share/t/${shareInfo.id}` : '';
+  const currentVisibility = (shareInfo?.visibility as Visibility) || 'private';
+
+  const updateVisibility = useCallback(
+    async (visibility: Visibility) => {
+      if (!activeTopicId) return;
+
+      setUpdating(true);
+      try {
+        await topicService.updateShareVisibility(activeTopicId, visibility);
+        await mutate();
+        message.success(t('shareModal.link.visibilityUpdated'));
+      } catch {
+        message.error(t('shareModal.link.updateError'));
+      } finally {
+        setUpdating(false);
+      }
+    },
+    [activeTopicId, mutate, message, t],
+  );
+
+  const handleVisibilityChange = useCallback(
+    (visibility: Visibility) => {
+      // Show confirmation when changing from private to link
+      if (currentVisibility === 'private' && visibility === 'link') {
+        modal.confirm({
+          cancelText: t('cancel', { ns: 'common' }),
+          content: t('shareModal.popover.privacyWarning.content'),
+          okText: t('shareModal.popover.privacyWarning.confirm'),
+          onOk: () => updateVisibility(visibility),
+          title: t('shareModal.popover.privacyWarning.title'),
+          type: 'warning',
+        });
+      } else {
+        updateVisibility(visibility);
+      }
+    },
+    [currentVisibility, modal, t, updateVisibility],
+  );
+
+  const handleCopyLink = useCallback(async () => {
+    if (!shareUrl) return;
+    await copyToClipboard(shareUrl);
+    message.success(t('shareModal.copyLinkSuccess'));
+  }, [shareUrl, message, t]);
+
+  const handleOpenModal = useCallback(() => {
+    close();
+    onOpenModal?.();
+  }, [close, onOpenModal]);
+
+  // Loading state
+  if (isLoading || !shareInfo) {
+    return (
+      <Flexbox className={styles.container} gap={16}>
+        <Typography.Text strong>{t('share', { ns: 'common' })}</Typography.Text>
+        <Skeleton active paragraph={{ rows: 2 }} />
+      </Flexbox>
+    );
+  }
+
+  const visibilityOptions = [
+    {
+      icon: <LockIcon size={14} />,
+      label: t('shareModal.link.permissionPrivate'),
+      value: 'private',
+    },
+    {
+      icon: <LinkIcon size={14} />,
+      label: t('shareModal.link.permissionLink'),
+      value: 'link',
+    },
+  ];
+
+  const getVisibilityHint = () => {
+    switch (currentVisibility) {
+      case 'private': {
+        return t('shareModal.link.privateHint');
+      }
+      case 'link': {
+        return t('shareModal.link.linkHint');
+      }
+    }
+  };
+
+  return (
+    <Flexbox className={styles.container} gap={12} ref={containerRef}>
+      <Typography.Text strong>{t('shareModal.popover.title')}</Typography.Text>
+
+      <Flexbox gap={4}>
+        <Typography.Text type="secondary">{t('shareModal.popover.visibility')}</Typography.Text>
+        <Select
+          disabled={updating}
+          getPopupContainer={() => containerRef.current || document.body}
+          labelRender={({ value }) => {
+            const option = visibilityOptions.find((o) => o.value === value);
+            return (
+              <Flexbox align="center" gap={8} horizontal>
+                {option?.icon}
+                {option?.label}
+              </Flexbox>
+            );
+          }}
+          onChange={handleVisibilityChange}
+          optionRender={(option) => (
+            <Flexbox align="center" gap={8} horizontal>
+              {visibilityOptions.find((o) => o.value === option.value)?.icon}
+              {option.label}
+            </Flexbox>
+          )}
+          options={visibilityOptions}
+          style={{ width: '100%' }}
+          value={currentVisibility}
+        />
+      </Flexbox>
+
+      <Typography.Text className={styles.hint} type="secondary">
+        {getVisibilityHint()}
+      </Typography.Text>
+
+      <Divider style={{ margin: '4px 0' }} />
+
+      <Flexbox align="center" horizontal justify="space-between">
+        <Button
+          icon={ExternalLinkIcon}
+          onClick={handleOpenModal}
+          size="small"
+          type="text"
+          variant="text"
+        >
+          {t('shareModal.popover.moreOptions')}
+        </Button>
+        <Button icon={CopyIcon} onClick={handleCopyLink} size="small" type="primary">
+          {t('shareModal.copyLink')}
+        </Button>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+interface SharePopoverProps {
+  children?: ReactNode;
+  onOpenModal?: () => void;
+}
+
+const SharePopover = memo<SharePopoverProps>(({ children, onOpenModal }) => {
+  const isMobile = useIsMobile();
+
+  return (
+    <Popover
+      arrow={false}
+      content={<SharePopoverContent onOpenModal={onOpenModal} />}
+      placement={isMobile ? 'top' : 'bottomRight'}
+      styles={{
+        content: {
+          padding: 0,
+          width: isMobile ? '100vw' : 366,
+        },
+      }}
+      trigger={['click']}
+    >
+      {children}
+    </Popover>
+  );
+});
+
+export default SharePopover;

package/src/features/SharePopover/style.ts

@@ -0,0 +1,10 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css }) => ({
+  container: css`
+    padding: 16px;
+  `,
+  hint: css`
+    font-size: 12px;
+  `,
+}));

package/src/hooks/useNavigateToAgent.ts

@@ -5,15 +5,15 @@ import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useChatStore } from '@/store/chat';
 
 export const useNavigateToAgent = () => {
-  const togglePortal = useChatStore((s) => s.togglePortal);
+  const clearPortalStack = useChatStore((s) => s.clearPortalStack);
   const router = useQueryRoute();
 
   return useCallback(
     (agentId: string) => {
-      togglePortal(false);
+      clearPortalStack();
 
       router.push(SESSION_CHAT_URL(agentId, false));
     },
-    [togglePortal, router],
+    [clearPortalStack, router],
   );
 };

package/src/libs/next/proxy/define-config.ts

@@ -8,7 +8,7 @@ import { auth } from '@/auth';
 import { LOBE_LOCALE_COOKIE } from '@/const/locale';
 import { isDesktop } from '@/const/version';
 import { appEnv } from '@/envs/app';
-import { OAUTH_AUTHORIZED , authEnv } from '@/envs/auth';
+import { OAUTH_AUTHORIZED, authEnv } from '@/envs/auth';
 import NextAuth from '@/libs/next-auth';
 import { type Locales } from '@/locales/resources';
 import { parseBrowserLanguage } from '@/utils/locale';
@@ -107,6 +107,7 @@ export function defineConfig() {
       '/me',
       '/desktop-onboarding',
       '/onboarding',
+      '/share',
     ];
     const isSpaRoute = spaRoutes.some((route) => url.pathname.startsWith(route));
 
@@ -184,6 +185,8 @@ export function defineConfig() {
     '/oidc/token',
     // market
     '/market-auth-callback',
+    // public share pages
+    '/share(.*)',
   ]);
 
   const isProtectedRoute = createRouteMatcher([

package/src/locales/default/chat.ts

@@ -283,6 +283,8 @@ export default {
   'sessionGroup.sorting': 'Group sorting updating...',
   'sessionGroup.tooLong': 'Group name length should be between 1-20',
   'shareModal.copy': 'Copy',
+  'shareModal.copyLink': 'Copy Link',
+  'shareModal.copyLinkSuccess': 'Link copied',
   'shareModal.download': 'Download Screenshot',
   'shareModal.downloadError': 'Download failed',
   'shareModal.downloadFile': 'Download File',
@@ -298,12 +300,27 @@ export default {
   'shareModal.imageType': 'Image Format',
   'shareModal.includeTool': 'Include Skill messages',
   'shareModal.includeUser': 'Include User Messages',
+  'shareModal.link': 'Link',
+  'shareModal.link.linkHint': 'Anyone with the link can view this topic',
+  'shareModal.link.noTopic': 'Start a conversation first to share',
+  'shareModal.link.permissionLink': 'Anyone with the link',
+  'shareModal.link.permissionPrivate': 'Private',
+  'shareModal.link.privateHint': 'Only you can access this link',
+  'shareModal.link.updateError': 'Failed to update sharing settings',
+  'shareModal.link.visibilityUpdated': 'Visibility updated',
   'shareModal.loadingPdf': 'Loading PDF...',
   'shareModal.noPdfData': 'No PDF data available',
   'shareModal.pdf': 'PDF',
   'shareModal.pdfErrorDescription': 'An error occurred while generating the PDF, please try again',
   'shareModal.pdfGenerationError': 'PDF generation failed',
   'shareModal.pdfReady': 'PDF is ready',
+  'shareModal.popover.moreOptions': 'More share options',
+  'shareModal.popover.privacyWarning.confirm': 'I understand, continue',
+  'shareModal.popover.privacyWarning.content':
+    'Please ensure the conversation does not contain any private or sensitive information before sharing. LobeHub is not responsible for any security issues that may arise from sharing.',
+  'shareModal.popover.privacyWarning.title': 'Privacy Notice',
+  'shareModal.popover.title': 'Share Topic',
+  'shareModal.popover.visibility': 'Visibility',
   'shareModal.regeneratePdf': 'Regenerate PDF',
   'shareModal.screenshot': 'Screenshot',
   'shareModal.settings': 'Export Settings',
@@ -316,6 +333,15 @@ export default {
   'shareModal.withPluginInfo': 'Include Skill Information',
   'shareModal.withRole': 'Include Message Role',
   'shareModal.withSystemRole': 'Include Agent Profile',
+  'sharePage.error.forbidden.subtitle': 'This share is private and not accessible.',
+  'sharePage.error.forbidden.title': 'Access Denied',
+  'sharePage.error.notFound.subtitle': 'This topic does not exist or has been removed.',
+  'sharePage.error.notFound.title': 'Topic Not Found',
+  'sharePage.error.unauthorized.action': 'Sign In',
+  'sharePage.error.unauthorized.subtitle': 'Please sign in to view this shared topic.',
+  'sharePage.error.unauthorized.title': 'Sign In Required',
+  'sharePageDisclaimer':
+    'This content is shared by a user and does not represent the views of LobeHub. LobeHub is not responsible for any consequences arising from this shared content.',
   'stt.action': 'Voice Input',
   'stt.loading': 'Recognizing...',
   'stt.prettifying': 'Polishing...',

package/src/proxy.ts

@@ -26,6 +26,7 @@ export const config = {
     '/page(.*)',
     '/me',
     '/me(.*)',
+    '/share(.*)',
     '/desktop-onboarding',
     '/desktop-onboarding(.*)',
     '/onboarding',

package/src/server/routers/lambda/__tests__/message.test.ts

@@ -1,13 +1,21 @@
 import { CreateMessageParams, UIChatMessage, UpdateMessageRAGParams } from '@lobechat/types';
+import { TRPCError } from '@trpc/server';
 import { describe, expect, it, vi } from 'vitest';
 
 import { MessageModel } from '@/database/models/message';
+import { TopicShareModel } from '@/database/models/topicShare';
 import { FileService } from '@/server/services/file';
 
 vi.mock('@/database/models/message', () => ({
   MessageModel: vi.fn(),
 }));
 
+vi.mock('@/database/models/topicShare', () => ({
+  TopicShareModel: {
+    findByShareIdWithAccessCheck: vi.fn(),
+  },
+}));
+
 vi.mock('@/server/services/file', () => ({
   FileService: vi.fn(),
 }));
@@ -345,4 +353,148 @@ describe('messageRouter', () => {
       expect(result.rowCount).toBe(5);
     });
   });
+
+  describe('topicShareId support', () => {
+    it('should get messages via topicShareId for link share', async () => {
+      const mockShare = {
+        visibility: 'link',
+        ownerId: 'owner-user',
+        shareId: 'share-123',
+        topicId: 'topic-1',
+      };
+
+      const mockMessages = [
+        { id: 'msg1', content: 'Hello', role: 'user' },
+        { id: 'msg2', content: 'Hi there', role: 'assistant' },
+      ];
+
+      const mockQuery = vi.fn().mockResolvedValue(mockMessages);
+      const mockGetFullFileUrl = vi
+        .fn()
+        .mockImplementation((path: string) => `https://cdn/${path}`);
+
+      vi.mocked(TopicShareModel.findByShareIdWithAccessCheck).mockResolvedValue(mockShare as any);
+      vi.mocked(MessageModel).mockImplementation(
+        () =>
+          ({
+            query: mockQuery,
+          }) as any,
+      );
+      vi.mocked(FileService).mockImplementation(
+        () =>
+          ({
+            getFullFileUrl: mockGetFullFileUrl,
+          }) as any,
+      );
+
+      // Simulate the router logic
+      const share = await TopicShareModel.findByShareIdWithAccessCheck(
+        {} as any,
+        'share-123',
+        undefined,
+      );
+
+      expect(share).toBeDefined();
+      expect(share.topicId).toBe('topic-1');
+      expect(share.ownerId).toBe('owner-user');
+
+      // Create model using owner's id
+      const messageModel = new MessageModel({} as any, share.ownerId);
+      const result = await messageModel.query(
+        { topicId: share.topicId },
+        { postProcessUrl: mockGetFullFileUrl },
+      );
+
+      expect(result).toEqual(mockMessages);
+    });
+
+    it('should allow owner to access private share messages', async () => {
+      const mockShare = {
+        visibility: 'private',
+        ownerId: 'owner-user',
+        shareId: 'private-share',
+        topicId: 'topic-private',
+      };
+
+      vi.mocked(TopicShareModel.findByShareIdWithAccessCheck).mockResolvedValue(mockShare as any);
+
+      const share = await TopicShareModel.findByShareIdWithAccessCheck(
+        {} as any,
+        'private-share',
+        'owner-user', // Owner accessing
+      );
+
+      expect(share).toBeDefined();
+      expect(share.visibility).toBe('private');
+    });
+
+    it('should throw FORBIDDEN for private share accessed by non-owner', async () => {
+      vi.mocked(TopicShareModel.findByShareIdWithAccessCheck).mockRejectedValue(
+        new TRPCError({ code: 'FORBIDDEN', message: 'This share is private' }),
+      );
+
+      await expect(
+        TopicShareModel.findByShareIdWithAccessCheck({} as any, 'private-share', 'other-user'),
+      ).rejects.toThrow(TRPCError);
+
+      try {
+        await TopicShareModel.findByShareIdWithAccessCheck(
+          {} as any,
+          'private-share',
+          'other-user',
+        );
+      } catch (error) {
+        expect((error as TRPCError).code).toBe('FORBIDDEN');
+      }
+    });
+
+    it('should throw NOT_FOUND for non-existent share', async () => {
+      vi.mocked(TopicShareModel.findByShareIdWithAccessCheck).mockRejectedValue(
+        new TRPCError({ code: 'NOT_FOUND', message: 'Share not found' }),
+      );
+
+      await expect(
+        TopicShareModel.findByShareIdWithAccessCheck({} as any, 'non-existent', 'user1'),
+      ).rejects.toThrow(TRPCError);
+
+      try {
+        await TopicShareModel.findByShareIdWithAccessCheck({} as any, 'non-existent', 'user1');
+      } catch (error) {
+        expect((error as TRPCError).code).toBe('NOT_FOUND');
+      }
+    });
+
+    it('should use owner id to query messages for shared topic', async () => {
+      const mockShare = {
+        visibility: 'link',
+        ownerId: 'topic-owner',
+        shareId: 'share-abc',
+        topicId: 'shared-topic',
+      };
+
+      const mockQuery = vi.fn().mockResolvedValue([{ id: 'msg1' }]);
+
+      vi.mocked(TopicShareModel.findByShareIdWithAccessCheck).mockResolvedValue(mockShare as any);
+      vi.mocked(MessageModel).mockImplementation(
+        () =>
+          ({
+            query: mockQuery,
+          }) as any,
+      );
+
+      const share = await TopicShareModel.findByShareIdWithAccessCheck(
+        {} as any,
+        'share-abc',
+        undefined,
+      );
+
+      // Verify we use the owner's id to create MessageModel
+      const messageModel = new MessageModel({} as any, share.ownerId);
+      await messageModel.query({ topicId: share.topicId }, {});
+
+      // Verify MessageModel was instantiated with owner's id
+      expect(MessageModel).toHaveBeenCalledWith({} as any, 'topic-owner');
+      expect(mockQuery).toHaveBeenCalledWith({ topicId: 'shared-topic' }, {});
+    });
+  });
 });