@lobehub/chat 1.116.1 → 1.116.3

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 # Changelog
 
+### [Version 1.116.3](https://github.com/lobehub/lobe-chat/compare/v1.116.2...v1.116.3)
+
+<sup>Released on **2025-08-28**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix desktop route error.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix desktop route error, closes [#8962](https://github.com/lobehub/lobe-chat/issues/8962) ([27a4b34](https://github.com/lobehub/lobe-chat/commit/27a4b34))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 1.116.2](https://github.com/lobehub/lobe-chat/compare/v1.116.1...v1.116.2)
+
+<sup>Released on **2025-08-28**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.116.1](https://github.com/lobehub/lobe-chat/compare/v1.116.0...v1.116.1)
 
 <sup>Released on **2025-08-27**</sup>

package/apps/desktop/package.json

@@ -51,7 +51,7 @@
     "@typescript/native-preview": "7.0.0-dev.20250711.1",
     "consola": "^3.1.0",
     "cookie": "^1.0.2",
-    "electron": "^37.2.0",
+    "electron": "^37.4.0",
     "electron-builder": "^26.0.12",
     "electron-is": "^3.0.0",
     "electron-log": "^5.3.3",

package/changelog/v1.json

@@ -1,4 +1,18 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Fix desktop route error."
+      ]
+    },
+    "date": "2025-08-28",
+    "version": "1.116.3"
+  },
+  {
+    "children": {},
+    "date": "2025-08-28",
+    "version": "1.116.2"
+  },
   {
     "children": {},
     "date": "2025-08-27",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.116.1",
+  "version": "1.116.3",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(backend)/trpc/desktop/[trpc]/route.ts

@@ -0,0 +1,26 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import type { NextRequest } from 'next/server';
+
+import { pino } from '@/libs/logger';
+import { createLambdaContext } from '@/libs/trpc/lambda/context';
+import { desktopRouter } from '@/server/routers/desktop';
+
+const handler = (req: NextRequest) =>
+  fetchRequestHandler({
+    /**
+     * @link https://trpc.io/docs/v11/context
+     */
+    createContext: () => createLambdaContext(req),
+
+    endpoint: '/trpc/desktop',
+
+    onError: ({ error, path, type }) => {
+      pino.info(`Error in tRPC handler (desktop) on path: ${path}, type: ${type}`);
+      console.error(error);
+    },
+
+    req,
+    router: desktopRouter,
+  });
+
+export { handler as GET, handler as POST };

package/src/app/(backend)/trpc/trpc.test.ts

@@ -0,0 +1,10 @@
+import { existsSync } from 'fs';
+import { join } from 'path';
+import { describe, expect, it } from 'vitest';
+
+describe('Desktop TRPC Route', () => {
+  it('should have desktop directory', () => {
+    const desktopPath = join(__dirname, 'desktop');
+    expect(existsSync(desktopPath)).toBe(true);
+  });
+});

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

@@ -0,0 +1,30 @@
+import { useTheme } from 'antd-style';
+import { usePathname } from 'next/navigation';
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import SideBar from './SideBar';
+
+const DesktopLayoutContainer = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+  const pathname = usePathname();
+  const hideSideBar = pathname.startsWith('/settings');
+  return (
+    <>
+      {!hideSideBar && <SideBar />}
+      <Flexbox
+        style={{
+          background: theme.colorBgLayout,
+          borderInlineStart: `1px solid ${theme.colorBorderSecondary}`,
+          borderStartStartRadius: !hideSideBar ? 12 : undefined,
+          borderTop: `1px solid ${theme.colorBorderSecondary}`,
+          overflow: 'hidden',
+        }}
+        width={'100%'}
+      >
+        {children}
+      </Flexbox>
+    </>
+  );
+});
+export default DesktopLayoutContainer;

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

@@ -2,7 +2,6 @@
 
 import { useTheme } from 'antd-style';
 import dynamic from 'next/dynamic';
-import { usePathname } from 'next/navigation';
 import { PropsWithChildren, Suspense, memo } from 'react';
 import { HotkeysProvider } from 'react-hotkeys-hook';
 import { Flexbox } from 'react-layout-kit';
@@ -15,6 +14,7 @@ import { usePlatform } from '@/hooks/usePlatform';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { HotkeyScopeEnum } from '@/types/hotkey';
 
+import DesktopLayoutContainer from './DesktopLayoutContainer';
 import RegisterHotkeys from './RegisterHotkeys';
 import SideBar from './SideBar';
 
@@ -24,11 +24,7 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
   const { isPWA } = usePlatform();
   const theme = useTheme();
 
-  const pathname = usePathname();
   const { showCloudPromotion } = useServerConfigStore(featureFlagsSelectors);
-
-  // setting page not show sidebar
-  const hideSideBar = isDesktop && pathname.startsWith('/settings');
   return (
     <HotkeysProvider initiallyActiveScopes={[HotkeyScopeEnum.Global]}>
       {isDesktop && <TitleBar />}
@@ -48,22 +44,13 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
         }}
         width={'100%'}
       >
-        {!hideSideBar && <SideBar />}
         {isDesktop ? (
-          <Flexbox
-            style={{
-              background: theme.colorBgLayout,
-              borderInlineStart: `1px solid ${theme.colorBorderSecondary}`,
-              borderStartStartRadius: !hideSideBar ? 12 : undefined,
-              borderTop: `1px solid ${theme.colorBorderSecondary}`,
-              overflow: 'hidden',
-            }}
-            width={'100%'}
-          >
-            {children}
-          </Flexbox>
+          <DesktopLayoutContainer>{children}</DesktopLayoutContainer>
         ) : (
-          children
+          <>
+            <SideBar />
+            {children}
+          </>
         )}
       </Flexbox>
       <HotkeyHelperPanel />

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

@@ -3,7 +3,7 @@
 import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { PropsWithChildren, memo, useEffect, useState } from 'react';
+import { PropsWithChildren, memo, useEffect, useMemo, useState } from 'react';
 
 import { withSuspense } from '@/components/withSuspense';
 import { FOLDER_WIDTH } from '@/const/layoutTokens';
@@ -69,26 +69,30 @@ const SessionPanel = memo<PropsWithChildren>(({ children }) => {
     if (!md) updatePreference({ showSessionPanel: false });
   }, [md, cacheExpand]);
 
-  return (
-    <DraggablePanel
-      className={styles.panel}
-      defaultSize={{ width: tmpWidth }}
-      // 当进入 pin 模式下，不可展开
-      expand={!isPinned && sessionExpandable}
-      expandable={!isPinned}
-      maxWidth={400}
-      minWidth={FOLDER_WIDTH}
-      mode={md ? 'fixed' : 'float'}
-      onExpandChange={handleExpand}
-      onSizeChange={handleSizeChange}
-      placement="left"
-      size={{ height: '100%', width: sessionsWidth }}
-    >
-      <DraggablePanelContainer style={{ flex: 'none', height: '100%', minWidth: FOLDER_WIDTH }}>
-        {children}
-      </DraggablePanelContainer>
-    </DraggablePanel>
-  );
+  const SessionPanel = useMemo(() => {
+    return (
+      <DraggablePanel
+        className={styles.panel}
+        defaultSize={{ width: tmpWidth }}
+        // 当进入 pin 模式下，不可展开
+        expand={!isPinned && sessionExpandable}
+        expandable={!isPinned}
+        maxWidth={400}
+        minWidth={FOLDER_WIDTH}
+        mode={md ? 'fixed' : 'float'}
+        onExpandChange={handleExpand}
+        onSizeChange={handleSizeChange}
+        placement="left"
+        size={{ height: '100%', width: sessionsWidth }}
+      >
+        <DraggablePanelContainer style={{ flex: 'none', height: '100%', minWidth: FOLDER_WIDTH }}>
+          {children}
+        </DraggablePanelContainer>
+      </DraggablePanel>
+    );
+  }, [sessionsWidth, md, isPinned, sessionExpandable, tmpWidth]);
+
+  return SessionPanel;
 });
 
 export default withSuspense(SessionPanel);

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

@@ -1,14 +1,20 @@
 'use client';
 
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, Tag } from '@lobehub/ui';
 import { ChatHeader } from '@lobehub/ui/chat';
 import { Drawer, type DrawerProps } from 'antd';
 import { createStyles } from 'antd-style';
 import { Menu } from 'lucide-react';
+import { usePathname } from 'next/navigation';
 import { ReactNode, memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
+// 新增：引入 SettingsTabs
+import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
+import { useProviderName } from '@/hooks/useProviderName';
+import { SettingsTabs } from '@/store/global/initialState';
 
 const useStyles = createStyles(({ token, css }) => ({
   container: css`
@@ -26,12 +32,31 @@ const useStyles = createStyles(({ token, css }) => ({
 
 interface HeaderProps extends Pick<DrawerProps, 'getContainer'> {
   children: ReactNode;
-  title: ReactNode;
+  title?: ReactNode;
 }
 
 const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
   const [open, setOpen] = useState(false);
   const { styles, theme } = useStyles();
+  const activeKey = useActiveSettingsKey();
+  const providerName = useProviderName(activeKey);
+
+  const pathname = usePathname();
+  const { t } = useTranslation('setting');
+
+  const isProvider = pathname.includes('/settings/provider/');
+  const dynamicTitle = title ? (
+    title
+  ) : (
+    <>
+      {isProvider ? providerName : t(`tab.${activeKey}`)}
+      {activeKey === SettingsTabs.Sync && (
+        <Tag bordered={false} color={'gold'}>
+          {t('tab.experiment')}
+        </Tag>
+      )}
+    </>
+  );
 
   return (
     <>
@@ -47,7 +72,7 @@ const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
                   onClick={() => setOpen(true)}
                   size={{ blockSize: 32, size: 18 }}
                 />
-                {title}
+                {dynamicTitle}
               </Flexbox>
             }
           />

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

@@ -1,18 +1,13 @@
 'use client';
 
-import { Tag } from '@lobehub/ui';
 import { useResponsive, useTheme } from 'antd-style';
 import { usePathname } from 'next/navigation';
-import { memo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { PropsWithChildren, memo, useEffect, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 import SettingContainer from '@/features/Setting/SettingContainer';
-import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
-import { useProviderName } from '@/hooks/useProviderName';
-import { SettingsTabs } from '@/store/global/initialState';
 
 import { LayoutProps } from '../type';
 import Header from './Header';
@@ -20,17 +15,25 @@ import SideBar from './SideBar';
 
 const SKIP_PATHS = ['/settings/provider', '/settings/agent'];
 
+const ContentContainer = memo<PropsWithChildren>(({ children }) => {
+  const pathname = usePathname();
+  const isSkip = SKIP_PATHS.some((path) => pathname.includes(path));
+
+  return isSkip ? (
+    children
+  ) : (
+    <SettingContainer addonAfter={<Footer />}>{children}</SettingContainer>
+  );
+});
+
 const Layout = memo<LayoutProps>(({ children, category }) => {
   const ref = useRef<any>(null);
   const { md = true } = useResponsive();
-  const { t } = useTranslation('setting');
-  const activeKey = useActiveSettingsKey();
   const theme = useTheme();
-  const pathname = usePathname();
 
-  const isSkip = SKIP_PATHS.some((path) => pathname.includes(path));
-  const isProvider = pathname.includes('/settings/provider/');
-  const providerName = useProviderName(activeKey);
+  useEffect(() => {
+    console.log('settings render');
+  });
 
   return (
     <Flexbox
@@ -42,19 +45,9 @@ const Layout = memo<LayoutProps>(({ children, category }) => {
       {md ? (
         <SideBar>{category}</SideBar>
       ) : (
-        <Header
-          getContainer={() => ref.current}
-          title={
-            <>
-              {isProvider ? providerName : t(`tab.${activeKey}`)}
-              {activeKey === SettingsTabs.Sync && <Tag color={'gold'}>{t('tab.experiment')}</Tag>}
-            </>
-          }
-        >
-          {category}
-        </Header>
+        <Header getContainer={() => ref.current!}>{category}</Header>
       )}
-      {isSkip ? children : <SettingContainer addonAfter={<Footer />}>{children}</SettingContainer>}
+      <ContentContainer>{children}</ContentContainer>
       <InitClientDB />
     </Flexbox>
   );

package/src/app/desktop/devtools/page.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { ActionIcon, SideNav } from '@lobehub/ui';
+import { Cog, DatabaseIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { BRANDING_NAME } from '@/const/branding';
+import PostgresViewer from '@/features/DevPanel/PostgresViewer';
+import SystemInspector from '@/features/DevPanel/SystemInspector';
+import { useStyles } from '@/features/DevPanel/features/FloatPanel';
+import { electronStylish } from '@/styles/electron';
+
+const DevTools = memo(() => {
+  const { styles, theme, cx } = useStyles();
+
+  const items = [
+    {
+      children: <PostgresViewer />,
+      icon: <DatabaseIcon size={16} />,
+      key: 'Postgres Viewer',
+    },
+    {
+      children: <SystemInspector />,
+      icon: <Cog size={16} />,
+      key: 'System Status',
+    },
+  ];
+
+  const [tab, setTab] = useState<string>(items[0].key);
+
+  return (
+    <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
+      <Flexbox
+        align={'center'}
+        className={cx(`panel-drag-handle`, styles.header, electronStylish.draggable)}
+        horizontal
+        justify={'center'}
+      >
+        <Flexbox align={'baseline'} gap={6} horizontal>
+          <b>{BRANDING_NAME} Dev Tools</b>
+          <span style={{ color: theme.colorTextDescription }}>/</span>
+          <span style={{ color: theme.colorTextDescription }}>{tab}</span>
+        </Flexbox>
+      </Flexbox>
+      <Flexbox
+        height={'100%'}
+        horizontal
+        style={{ background: theme.colorBgLayout, overflow: 'hidden', position: 'relative' }}
+        width={'100%'}
+      >
+        <SideNav
+          bottomActions={[]}
+          style={{
+            background: 'transparent',
+            width: 48,
+          }}
+          topActions={items.map((item) => (
+            <ActionIcon
+              active={tab === item.key}
+              icon={item.icon}
+              key={item.key}
+              onClick={() => setTab(item.key)}
+              title={item.key}
+              tooltipProps={{
+                placement: 'right',
+              }}
+            />
+          ))}
+        />
+        {items.map((item) => (
+          <Flexbox
+            flex={1}
+            height={'100%'}
+            key={item.key}
+            style={{
+              display: tab === item.key ? 'flex' : 'none',
+              overflow: 'hidden',
+            }}
+          >
+            {item.children}
+          </Flexbox>
+        ))}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default DevTools;

package/src/app/desktop/layout.tsx

@@ -0,0 +1,31 @@
+import { notFound } from 'next/navigation';
+import { NuqsAdapter } from 'nuqs/adapters/next/app';
+import { ReactNode } from 'react';
+
+import { isDesktop } from '@/const/version';
+import GlobalLayout from '@/layout/GlobalProvider';
+import { ServerConfigStoreProvider } from '@/store/serverConfig/Provider';
+
+interface RootLayoutProps {
+  children: ReactNode;
+}
+
+const RootLayout = async ({ children }: RootLayoutProps) => {
+  if (!isDesktop) return notFound();
+
+  return (
+    <html dir="ltr" suppressHydrationWarning>
+      <body>
+        <NuqsAdapter>
+          <ServerConfigStoreProvider>
+            <GlobalLayout appearance={'auto'} isMobile={false} locale={''}>
+              {children}
+            </GlobalLayout>
+          </ServerConfigStoreProvider>
+        </NuqsAdapter>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;