@lobehub/lobehub 2.0.0-next.71 → 2.0.0-next.73

package/src/app/[variants]/(main)/(mobile)/me/settings/layout.tsx

@@ -1,13 +1,15 @@
-import { PropsWithChildren } from 'react';
-
-import MobileContentLayout from '@/components/server/MobileNavLayout';
-
-import Header from './features/Header';
-
-const Layout = ({ children }: PropsWithChildren) => {
-  return <MobileContentLayout header={<Header />}>{children}</MobileContentLayout>;
-};
-
-Layout.displayName = 'MeSettingsLayout';
-
-export default Layout;
+import MobileContentLayout from "@/components/server/MobileNavLayout";
+import Loading from "@/components/Loading/BrandTextLoading";
+import { Outlet } from "react-router-dom";
+import Header from "./features/Header";
+import { Suspense } from "react";
+
+const Layout = () => {
+    return <MobileContentLayout header={<Header />} withNav>
+        <Suspense fallback={<Loading />}>
+            <Outlet />
+        </Suspense>
+    </MobileContentLayout>
+}
+
+export default Layout;

package/src/app/[variants]/(main)/changelog/_layout/Desktop/index.tsx

@@ -1,15 +1,16 @@
-import { ReactNode } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import { Locales } from '@/locales/resources';
 
 import Hero from '../../features/Hero';
 import Container from './Container';
 
-type Props = { children: ReactNode };
-
-const Layout = ({ children }: Props) => {
+const Layout = (props: { locale: Locales }) => {
+  const { locale } = props;
   return (
     <Container>
       <Hero />
-      {children}
+      <Outlet context={{ locale }} />
     </Container>
   );
 };

package/src/app/[variants]/(main)/changelog/_layout/Mobile/Header.tsx

@@ -1,17 +1,17 @@
 'use client';
 
 import { ChatHeader } from '@lobehub/ui/mobile';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 const Header = memo(() => {
   const { t } = useTranslation('changelog');
 
-  const router = useRouter();
+  const navigate = useNavigate();
   return (
     <ChatHeader
       center={
@@ -23,7 +23,7 @@ const Header = memo(() => {
           }
         />
       }
-      onBackClick={() => router.back()}
+      onBackClick={() => navigate(-1)}
       showBackButton
       style={mobileHeaderSticky}
     />

package/src/app/[variants]/(main)/changelog/_layout/Mobile/index.tsx

@@ -1,17 +1,17 @@
-import { ReactNode } from 'react';
+import { Outlet } from 'react-router-dom';
 
 import MobileContentLayout from '@/components/server/MobileNavLayout';
+import { Locales } from '@/locales/resources';
 
 import Hero from '../../features/Hero';
 import Header from './Header';
 
-type Props = { children: ReactNode };
-
-const Layout = ({ children }: Props) => {
+const Layout = (props: { locale: Locales }) => {
+  const { locale } = props;
   return (
     <MobileContentLayout header={<Header />} padding={16}>
       <Hero />
-      {children}
+      <Outlet context={{ locale }} />
     </MobileContentLayout>
   );
 };

package/src/app/[variants]/(main)/changelog/features/Post.tsx

@@ -1,10 +1,11 @@
 import { Typography } from '@lobehub/ui';
+import { Image } from '@lobehub/ui/mdx';
 import { Divider } from 'antd';
 import Link from 'next/link';
+import useSWR from 'swr';
 import urlJoin from 'url-join';
 
 import { CustomMDX } from '@/components/mdx';
-import Image from '@/components/mdx/Image';
 import { OFFICIAL_SITE } from '@/const/url';
 import { Locales } from '@/locales/resources';
 import { ChangelogService } from '@/server/services/changelog';
@@ -14,14 +15,16 @@ import GridLayout from './GridLayout';
 import PublishedTime from './PublishedTime';
 import VersionTag from './VersionTag';
 
-const Post = async ({
+const Post = ({
   id,
   mobile,
   versionRange,
   locale,
 }: ChangelogIndexItem & { branch?: string; locale: Locales; mobile?: boolean }) => {
-  const changelogService = new ChangelogService();
-  const data = await changelogService.getPostById(id, { locale });
+  const { data } = useSWR([`changelog-post-${id}`, locale], async () => {
+    const changelogService = new ChangelogService();
+    return await changelogService.getPostById(id, { locale });
+  });
 
   if (!data || !data.title) return null;
 

package/src/app/[variants]/(main)/changelog/index.tsx

@@ -0,0 +1,55 @@
+import { Fragment } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useOutletContext } from 'react-router-dom';
+import useSWR from 'swr';
+
+import NotFound from '@/components/404';
+import { Locales } from '@/locales/resources';
+import { ChangelogService } from '@/server/services/changelog';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+
+import GridLayout from './features/GridLayout';
+import Pagination from './features/Pagination';
+import Post from './features/Post';
+import UpdateChangelogStatus from './features/UpdateChangelogStatus';
+
+const Page = (props: { isMobile: boolean }) => {
+  const { locale } = useOutletContext<{ locale: Locales }>();
+  const { isMobile } = props;
+  const { hideDocs } = useServerConfigStore(featureFlagsSelectors);
+
+  const { data } = useSWR('changelog-index', async () => {
+    const changelogService = new ChangelogService();
+    return await changelogService.getChangelogIndex();
+  });
+
+  if (hideDocs) return <NotFound />;
+
+  if (!data) return <NotFound />;
+
+  return (
+    <>
+      <Flexbox gap={isMobile ? 16 : 48}>
+        {data?.map((item) => (
+          <Fragment key={item.id}>
+            <Post locale={locale} mobile={isMobile} {...item} />
+          </Fragment>
+        ))}
+      </Flexbox>
+      <GridLayout>
+        <Pagination />
+      </GridLayout>
+      <UpdateChangelogStatus currentId={data[0]?.id} />
+    </>
+  );
+};
+
+const DesktopPage = () => {
+  return <Page isMobile={false} />;
+};
+
+const MobilePage = () => {
+  return <Page isMobile={true} />;
+};
+
+export { DesktopPage, MobilePage };

package/src/app/[variants]/(main)/chat/_layout/Desktop/index.tsx

@@ -1,15 +1,14 @@
-import { Suspense } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { Outlet } from 'react-router-dom';
 
 import { isDesktop } from '@/const/version';
 import ProtocolUrlHandler from '@/features/ProtocolUrlHandler';
 
-import { LayoutProps } from '../type';
 import RegisterHotkeys from './RegisterHotkeys';
 import SessionPanel from './SessionPanel';
 import Workspace from './Workspace';
 
-const Layout = ({ children }: LayoutProps) => {
+const Layout = () => {
   return (
     <>
       <Flexbox
@@ -19,14 +18,14 @@ const Layout = ({ children }: LayoutProps) => {
         width={'100%'}
       >
         <SessionPanel />
-        <Workspace>{children}</Workspace>
+        <Workspace>
+          <Outlet />
+        </Workspace>
       </Flexbox>
       {/* ↓ cloud slot ↓ */}
 
       {/* ↑ cloud slot ↑ */}
-      <Suspense>
-        <RegisterHotkeys />
-      </Suspense>
+      <RegisterHotkeys />
       {isDesktop && <ProtocolUrlHandler />}
     </>
   );

package/src/app/[variants]/(main)/chat/_layout/Mobile.tsx

@@ -8,7 +8,7 @@ import { withSuspense } from '@/components/withSuspense';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 
 import SessionPanelContent from '../components/SessionPanel';
-import { LayoutProps } from './type';
+import { Outlet } from 'react-router-dom';
 
 const useStyles = createStyles(({ css, token }) => ({
   main: css`
@@ -18,7 +18,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Layout = memo<LayoutProps>(({ children }) => {
+const Layout = memo(( ) => {
   const showMobileWorkspace = useShowMobileWorkspace();
   const { styles } = useStyles();
 
@@ -38,7 +38,7 @@ const Layout = memo<LayoutProps>(({ children }) => {
         style={showMobileWorkspace ? undefined : { display: 'none' }}
         width="100%"
       >
-        {children}
+        <Outlet />
       </Flexbox>
     </>
   );

package/src/app/[variants]/(main)/chat/components/WorkspaceLayout.tsx

@@ -14,9 +14,6 @@ import ConversationArea from './ConversationArea';
 import PortalPanel from './PortalPanel';
 import TopicSidebar from './TopicSidebar';
 
-interface WorkspaceLayoutProps {
-  mobile?: boolean;
-}
 
 const DesktopWorkspace = memo(() => (
   <>
@@ -60,14 +57,4 @@ const MobileWorkspace = memo(() => (
 
 MobileWorkspace.displayName = 'MobileWorkspace';
 
-const WorkspaceLayout = memo<WorkspaceLayoutProps>(({ mobile }) => {
-  if (mobile) {
-    return <MobileWorkspace />;
-  }
-
-  return <DesktopWorkspace />;
-});
-
-WorkspaceLayout.displayName = 'WorkspaceLayout';
-
-export default WorkspaceLayout;
+export { DesktopWorkspace, MobileWorkspace };

package/src/app/[variants]/(main)/chat/components/conversation/features/ChatHydration/index.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
 import { memo, useLayoutEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useChatStore } from '@/store/chat';
 
 // sync outside state to useChatStore
@@ -34,7 +34,7 @@ const ChatHydration = memo(() => {
       unsubscribeTopic();
       unsubscribeThread();
     };
-  }, []);
+  }, [setTopic, setThread]); // ✅ 现在 setValue 是稳定的，可以安全地添加到依赖数组
 
   return null;
 });

package/src/app/[variants]/(main)/chat/components/conversation/features/ChatInput/Desktop/MessageFromUrl.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
 import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import { useChatStore } from '@/store/chat';
 
@@ -10,21 +10,19 @@ import { useSend } from '../useSend';
 const MessageFromUrl = () => {
   const updateMessageInput = useChatStore((s) => s.updateMessageInput);
   const { send: sendMessage } = useSend();
-  const searchParams = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
 
   useEffect(() => {
     const message = searchParams.get('message');
-    if (message) {
-      // Remove message from URL
-      const params = new URLSearchParams(searchParams.toString());
-      params.delete('message');
-      const newUrl = `${window.location.pathname}?${params.toString()}`;
-      window.history.replaceState({}, '', newUrl);
-
-      updateMessageInput(message);
-      sendMessage();
-    }
-  }, [searchParams, updateMessageInput, sendMessage]);
+    if (!message) return;
+
+    const params = new URLSearchParams(searchParams.toString());
+    params.delete('message');
+    setSearchParams(params, { replace: true });
+
+    updateMessageInput(message);
+    sendMessage();
+  }, [searchParams, setSearchParams, updateMessageInput, sendMessage]);
 
   return null;
 };

package/src/app/[variants]/(main)/chat/components/conversation/features/ChatInput/Desktop/index.tsx

@@ -10,7 +10,6 @@ import GroupChatInput from './GroupChat';
 
 const Desktop = memo((props: { targetMemberId?: string }) => {
   const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
-
   return isGroupSession ? <GroupChatInput {...props} /> : <ClassicChatInput />;
 });
 

package/src/app/[variants]/(main)/chat/components/conversation/features/ThreadHydration.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
 import { memo, useEffect, useLayoutEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
 import { useFetchThreads } from '@/hooks/useFetchThreads';
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useChatStore } from '@/store/chat';
 
 // sync outside state to useChatStore
@@ -26,7 +26,7 @@ const ThreadHydration = memo(() => {
     return () => {
       unsubscribe();
     };
-  }, []);
+  }, [setThread]); // ✅ 现在 setValue 是稳定的，可以安全地添加到依赖数组
 
   // should open portal automatically when portalThread is set
   useEffect(() => {

package/src/app/[variants]/(main)/chat/components/topic/features/Topic/TopicListContent/TopicItem/TopicContent.tsx

@@ -97,15 +97,15 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
       },
       ...(isDesktop
         ? [
-          {
-            icon: <Icon icon={ExternalLink} />,
-            key: 'openInNewWindow',
-            label: t('actions.openInNewWindow'),
-            onClick: () => {
-              openTopicInNewWindow(activeId, id);
+            {
+              icon: <Icon icon={ExternalLink} />,
+              key: 'openInNewWindow',
+              label: t('actions.openInNewWindow'),
+              onClick: () => {
+                openTopicInNewWindow(activeId, id);
+              },
             },
-          },
-        ]
+          ]
         : []),
       {
         type: 'divider',
@@ -153,7 +153,16 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
         },
       },
     ],
-    [id, activeId, autoRenameTopicTitle, duplicateTopic, removeTopic, t, toggleEditing, openTopicInNewWindow],
+    [
+      id,
+      activeId,
+      autoRenameTopicTitle,
+      duplicateTopic,
+      removeTopic,
+      t,
+      toggleEditing,
+      openTopicInNewWindow,
+    ],
   );
 
   return (
@@ -180,7 +189,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
         spin={isLoading}
       />
       {!editing ? (
-        title === LOADING_FLAT ? (
+        title === LOADING_FLAT || (isLoading && !title) ? (
           <Flexbox flex={1} height={28} justify={'center'}>
             <BubblesLoading />
           </Flexbox>
@@ -190,7 +199,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
             ellipsis={{ rows: 1, tooltip: { placement: 'left', title } }}
             onDoubleClick={() => {
               if (isDesktop) {
-                openTopicInNewWindow(activeId, id)
+                openTopicInNewWindow(activeId, id);
               }
             }}
             style={{ margin: 0 }}

package/src/app/[variants]/(main)/chat/features/PageTitle/index.tsx

@@ -3,7 +3,6 @@
 import { memo } from 'react';
 
 import PageTitle from '@/components/PageTitle';
-import { withSuspense } from '@/components/withSuspense';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
@@ -16,4 +15,4 @@ const Title = memo(() => {
   return <PageTitle title={[topicTitle, agentTitle].filter(Boolean).join(' · ')} />;
 });
 
-export default withSuspense(Title);
+export default Title;

package/src/app/[variants]/(main)/chat/index.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { memo } from 'react';
+
+import { DesktopWorkspace, MobileWorkspace } from './components/WorkspaceLayout';
+import TelemetryNotification from './components/features/TelemetryNotification';
+import PageTitle from './features/PageTitle';
+
+const MobileChatPage = memo(() => {
+  return (
+    <>
+      <PageTitle />
+      <MobileWorkspace />
+      <TelemetryNotification mobile={true} />
+    </>
+  );
+});
+
+const DesktopChatPage = memo(() => {
+  return (
+    <>
+      <PageTitle />
+      <DesktopWorkspace />
+      <TelemetryNotification mobile={false} />
+    </>
+  );
+});
+
+export { DesktopChatPage, MobileChatPage };

package/src/app/[variants]/(main)/chat/session/features/SessionHydration.tsx

@@ -1,14 +1,15 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
-import { parseAsString } from 'nuqs/server';
 import { memo, useEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
+import { parseAsString, useQueryParam } from '@/hooks/useQueryParam';
 import { useAgentStore } from '@/store/agent';
 import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 
+const THROTTLE_DELAY = 50;
+
 // sync outside state to useSessionStore
 const SessionHydration = memo(() => {
   const useStoreUpdater = createStoreUpdater(useSessionStore);
@@ -17,10 +18,11 @@ const SessionHydration = memo(() => {
   const [switchTopic] = useChatStore((s) => [s.switchTopic]);
 
   // two-way bindings the url and session store
-  const [session, setSession] = useQueryState(
-    'session',
-    parseAsString.withDefault('inbox').withOptions({ history: 'replace', throttleMs: 50 }),
-  );
+  const [session, setSession] = useQueryParam('session', parseAsString.withDefault('inbox'), {
+    history: 'replace',
+    throttleMs: THROTTLE_DELAY,
+  });
+
   useStoreUpdater('activeId', session);
   useAgentStoreUpdater('activeId', session);
   useChatStoreUpdater('activeId', session);

package/src/app/[variants]/(main)/chat/session/features/SessionListContent/Inbox/index.tsx

@@ -1,6 +1,6 @@
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
@@ -24,15 +24,12 @@ const Inbox = memo(() => {
   return (
     <Link
       aria-label={t('inbox.title')}
-      href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
       onClick={async (e) => {
         e.preventDefault();
-
         if (activeId === INBOX_SESSION_ID && !mobile) {
           // If user tap the inbox again, open a new topic.
           // Only for desktop.
           const inboxMessages = chatSelectors.inboxActiveTopicMessages(getChatStoreState());
-
           if (inboxMessages.length > 0) {
             await openNewTopicOrSaveTopic();
           }
@@ -40,6 +37,7 @@ const Inbox = memo(() => {
           switchSession(INBOX_SESSION_ID);
         }
       }}
+      to={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
     >
       <ListItem
         active={activeId === INBOX_SESSION_ID}

package/src/app/[variants]/(main)/chat/session/features/SessionListContent/List/index.tsx

@@ -9,8 +9,8 @@ import LazyLoad from 'react-lazy-load';
 
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useSwitchSession } from '@/hooks/useSwitchSession';
+import { useSessionStore, getSessionStoreState } from '@/store/session';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
-import { getSessionStoreState, useSessionStore } from '@/store/session';
 import { sessionGroupSelectors, sessionSelectors } from '@/store/session/selectors';
 import { getUserStoreState } from '@/store/user';
 import { userProfileSelectors } from '@/store/user/selectors';

package/src/app/[variants]/(main)/chat/session/layout/Mobile/SessionHeader.tsx

@@ -3,8 +3,8 @@
 import { ActionIcon } from '@lobehub/ui';
 import { ChatHeader } from '@lobehub/ui/mobile';
 import { MessageSquarePlus } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
 
 import { ProductLogo } from '@/components/Branding';
@@ -16,14 +16,14 @@ import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 const Header = memo(() => {
   const [createSession] = useSessionStore((s) => [s.createSession]);
-  const router = useRouter();
+  const navigate = useNavigate();
   const { showCreateSession } = useServerConfigStore(featureFlagsSelectors);
 
   return (
     <ChatHeader
       left={
         <Flexbox align={'center'} gap={8} horizontal style={{ marginLeft: 8 }}>
-          <UserAvatar onClick={() => router.push('/me')} size={32} />
+          <UserAvatar onClick={() => navigate('/me')} size={32} />
           <ProductLogo type={'text'} />
         </Flexbox>
       }

package/src/app/[variants]/(main)/chat/settings/_layout/Desktop/Header.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui/chat';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import { pathString } from '@/utils/url';
 
@@ -11,12 +11,12 @@ import HeaderContent from '../../features/HeaderContent';
 
 const Header = memo(() => {
   const { t } = useTranslation('setting');
-  const router = useRouter();
+  const navigate = useNavigate();
 
   return (
     <ChatHeader
       left={<ChatHeaderTitle title={t('header.session')} />}
-      onBackClick={() => router.push(pathString('/chat', { search: location.search }))}
+      onBackClick={() => navigate(pathString('/chat', { search: location.search }))}
       right={<HeaderContent />}
       showBackButton
     />

package/src/app/[variants]/(main)/chat/settings/_layout/Mobile/Header.tsx

@@ -3,20 +3,20 @@
 import { ChatHeader } from '@lobehub/ui/mobile';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
-import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 import HeaderContent from '../../features/HeaderContent';
 
 const Header = memo(() => {
   const { t } = useTranslation('setting');
-  const router = useQueryRoute();
+  const navigate = useNavigate();
 
   return (
     <ChatHeader
       center={<ChatHeader.Title title={t('header.session')} />}
-      onBackClick={() => router.push('/chat')}
+      onBackClick={() => navigate(-1)}
       right={<HeaderContent />}
       showBackButton
       style={mobileHeaderSticky}