Merge branch 'main' of https://github.com/lobehub/lobe-chat

CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 1.47.12](https://github.com/lobehub/lobe-chat/compare/v1.47.11...v1.47.12)
+
+<sup>Released on **2025-01-21**</sup>
+
+#### 💄 Styles
+
+- **misc**: Refactor `[@nav](https://github.com/nav)` layout and improve pin list style.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Refactor `[@nav](https://github.com/nav)` layout and improve pin list style, closes [#5533](https://github.com/lobehub/lobe-chat/issues/5533) ([cc8a7f4](https://github.com/lobehub/lobe-chat/commit/cc8a7f4))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 1.47.11](https://github.com/lobehub/lobe-chat/compare/v1.47.10...v1.47.11)
+
+<sup>Released on **2025-01-21**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Improve code for ai provider.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Improve code for ai provider, closes [#5532](https://github.com/lobehub/lobe-chat/issues/5532) ([ea59e24](https://github.com/lobehub/lobe-chat/commit/ea59e24))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.47.10](https://github.com/lobehub/lobe-chat/compare/v1.47.9...v1.47.10)
 
 <sup>Released on **2025-01-21**</sup>

changelog/v1.json

@@ -1,4 +1,18 @@
 [
+  {
+    "children": {
+      "improvements": ["Refactor [@nav](https://github.com/nav) layout and improve pin list style."]
+    },
+    "date": "2025-01-21",
+    "version": "1.47.12"
+  },
+  {
+    "children": {
+      "improvements": ["Improve code for ai provider."]
+    },
+    "date": "2025-01-21",
+    "version": "1.47.11"
+  },
   {
     "children": {
       "improvements": ["Support assistant blacklist."]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.47.10",
+  "version": "1.47.12",
   "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",

src/app/(main)/@nav/_layout/Desktop/PinList/index.tsx → src/app/(main)/_layout/Desktop/SideBar/PinList/index.tsx

@@ -21,9 +21,29 @@ const useStyles = createStyles(({ css, token }) => ({
       box-shadow: 0 0 0 2px ${token.colorPrimary};
     }
   `,
-  avatarActive: css`
-    background: ${token.colorFillQuaternary};
-    box-shadow: 0 0 0 2px ${token.colorPrimaryBorder};
+  ink: css`
+    &::before {
+      content: '';
+
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline: -${12 + 3}px;
+      transform: translateY(-50%);
+
+      width: 4px;
+      height: 0;
+      border-radius: 50px;
+
+      background: ${token.colorPrimary};
+
+      transition: height 150ms ease-out;
+    }
+  `,
+  inkActive: css`
+    &::before {
+      width: 8px;
+      height: 32px;
+    }
   `,
 }));
 
@@ -61,28 +81,33 @@ const PinList = () => {
         <Divider style={{ margin: '8px 12px' }} />
         <Flexbox flex={1} gap={12} height={'100%'}>
           {list.slice(0, 9).map((item, index) => (
-            <Tooltip
-              key={item.id}
-              placement={'right'}
-              title={
-                <Flexbox gap={8} horizontal>
-                  {sessionHelpers.getTitle(item.meta)}
-                  <HotKeys inverseTheme keys={`ctrl+${index + 1}`} />
+            <Flexbox key={item.id} style={{ position: 'relative' }}>
+              <Tooltip
+                placement={'right'}
+                title={
+                  <Flexbox gap={8} horizontal>
+                    {sessionHelpers.getTitle(item.meta)}
+                    <HotKeys inverseTheme keys={`ctrl+${index + 1}`} />
+                  </Flexbox>
+                }
+              >
+                <Flexbox
+                  className={cx(
+                    styles.ink,
+                    isPinned && activeId === item.id ? styles.inkActive : undefined,
+                  )}
+                >
+                  <Avatar
+                    avatar={sessionHelpers.getAvatar(item.meta)}
+                    background={item.meta.backgroundColor}
+                    className={cx(styles.avatar)}
+                    onClick={() => {
+                      switchAgent(item.id);
+                    }}
+                  />
                 </Flexbox>
-              }
-            >
-              <Avatar
-                avatar={sessionHelpers.getAvatar(item.meta)}
-                background={item.meta.backgroundColor}
-                className={cx(
-                  styles.avatar,
-                  isPinned && activeId === item.id ? styles.avatarActive : undefined,
-                )}
-                onClick={() => {
-                  switchAgent(item.id);
-                }}
-              />
-            </Tooltip>
+              </Tooltip>
+            </Flexbox>
           ))}
         </Flexbox>
       </>

src/app/(main)/_layout/Desktop.tsx → src/app/(main)/_layout/Desktop/index.tsx

@@ -2,18 +2,18 @@
 
 import { useTheme } from 'antd-style';
 import dynamic from 'next/dynamic';
-import { memo } from 'react';
+import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { BANNER_HEIGHT } from '@/features/AlertBanner/CloudBanner';
 import { usePlatform } from '@/hooks/usePlatform';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
-import { LayoutProps } from './type';
+import SideBar from './SideBar';
 
 const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'));
 
-const Layout = memo<LayoutProps>(({ children, nav }) => {
+const Layout = memo<PropsWithChildren>(({ children }) => {
   const { isPWA } = usePlatform();
   const theme = useTheme();
 
@@ -31,7 +31,7 @@ const Layout = memo<LayoutProps>(({ children, nav }) => {
         }}
         width={'100%'}
       >
-        {nav}
+        <SideBar />
         {children}
       </Flexbox>
     </>

src/app/(main)/@nav/_layout/Mobile.tsx → src/app/(main)/_layout/Mobile/NavBar.tsx

@@ -27,7 +27,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Nav = memo(() => {
+const NavBar = memo(() => {
   const { t } = useTranslation('common');
   const { styles } = useStyles();
   const activeKey = useActiveTabKey();
@@ -75,6 +75,6 @@ const Nav = memo(() => {
   return <MobileTabBar activeKey={activeKey} className={styles.container} items={items} />;
 });
 
-Nav.displayName = 'MobileNav';
+NavBar.displayName = 'NavBar';
 
-export default Nav;
+export default NavBar;

src/app/(main)/_layout/Mobile.tsx → src/app/(main)/_layout/Mobile/index.tsx

@@ -3,12 +3,12 @@
 import dynamic from 'next/dynamic';
 import { usePathname } from 'next/navigation';
 import qs from 'query-string';
-import { memo } from 'react';
+import { PropsWithChildren, memo } from 'react';
 
 import { useQuery } from '@/hooks/useQuery';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
-import { LayoutProps } from './type';
+import NavBar from './NavBar';
 
 const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'));
 const MOBILE_NAV_ROUTES = new Set([
@@ -21,7 +21,7 @@ const MOBILE_NAV_ROUTES = new Set([
   '/me',
 ]);
 
-const Layout = memo(({ children, nav }: LayoutProps) => {
+const Layout = memo(({ children }: PropsWithChildren) => {
   const { showMobileWorkspace } = useQuery();
   const pathname = usePathname();
   const { url } = qs.parseUrl(pathname);
@@ -33,7 +33,7 @@ const Layout = memo(({ children, nav }: LayoutProps) => {
     <>
       {showCloudPromotion && <CloudBanner mobile />}
       {children}
-      {showNav && nav}
+      {showNav && <NavBar />}
     </>
   );
 });

src/app/(main)/layout.tsx

@@ -2,9 +2,8 @@ import ServerLayout from '@/components/server/ServerLayout';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
-import { LayoutProps } from './_layout/type';
 
-const MainLayout = ServerLayout<LayoutProps>({ Desktop, Mobile });
+const MainLayout = ServerLayout({ Desktop, Mobile });
 
 MainLayout.displayName = 'MainLayout';
 

src/app/(main)/settings/provider/(list)/ProviderGrid/Card.tsx

@@ -6,10 +6,9 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import InstantSwitch from '@/components/InstantSwitch';
-import { useAiInfraStore } from '@/store/aiInfra';
 import { AiProviderListItem } from '@/types/aiProvider';
 
+import EnableSwitch from './EnableSwitch';
 import { useStyles } from './style';
 
 const { Paragraph } = Typography;
@@ -21,7 +20,6 @@ const ProviderCard = memo<ProviderCardProps>(
   ({ id, description, name, enabled, source, logo, loading }) => {
     const { t } = useTranslation('providers');
     const { cx, styles, theme } = useStyles();
-    const toggleProviderEnabled = useAiInfraStore((s) => s.toggleProviderEnabled);
 
     if (loading)
       return (
@@ -73,13 +71,7 @@ const ProviderCard = memo<ProviderCardProps>(
           <Divider style={{ margin: '4px 0' }} />
           <Flexbox horizontal justify={'space-between'} paddingBlock={'8px 0'}>
             <div />
-            <InstantSwitch
-              enabled={enabled}
-              onChange={async (checked) => {
-                await toggleProviderEnabled(id, checked);
-              }}
-              size={'small'}
-            />
+            <EnableSwitch enabled={enabled} id={id} />
           </Flexbox>
         </Flexbox>
       </Flexbox>

src/app/(main)/settings/provider/(list)/ProviderGrid/EnableSwitch.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+
+import InstantSwitch from '@/components/InstantSwitch';
+import { useAiInfraStore } from '@/store/aiInfra';
+
+interface SwitchProps {
+  Component?: FC<{ enabled: boolean, id: string; }>;
+  enabled: boolean;
+  id: string;
+}
+
+const Switch = ({ id, Component, enabled }: SwitchProps) => {
+  const [toggleProviderEnabled] = useAiInfraStore((s) => [s.toggleProviderEnabled]);
+
+  // slot for cloud
+  if (Component) return <Component enabled={enabled} id={id} />;
+
+  return (
+    <InstantSwitch
+      enabled={enabled}
+      onChange={async (checked) => {
+        await toggleProviderEnabled(id, checked);
+      }}
+      size={'small'}
+    />
+  );
+};
+
+export default Switch;

src/app/(main)/settings/provider/(list)/ProviderGrid/index.tsx

@@ -29,6 +29,10 @@ const useStyles = createStyles(({ css, responsive, token }) => ({
     ${responsive.desktop} {
       grid-template-columns: repeat(3, 1fr);
     }
+
+    ${responsive.md} {
+      grid-template-columns: repeat(1, 1fr);
+    }
   `,
 }));
 
@@ -51,7 +55,7 @@ const List = memo(() => {
             {t('list.title.enabled')}
           </Typography.Text>
         </Flexbox>
-        <Grid>
+        <Grid className={styles.grid}>
           {loadingArr.map((item) => (
             <Card enabled={false} id={item} key={item} loading source={'builtin'} />
           ))}