@lobehub/chat 0.152.8 → 0.152.10

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 # Changelog
 
+### [Version 0.152.10](https://github.com/lobehub/lobe-chat/compare/v0.152.9...v0.152.10)
+
+<sup>Released on **2024-05-03**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve market layout styles and mobile style.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve market layout styles and mobile style, closes [#2347](https://github.com/lobehub/lobe-chat/issues/2347) ([79b8115](https://github.com/lobehub/lobe-chat/commit/79b8115))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.152.9](https://github.com/lobehub/lobe-chat/compare/v0.152.8...v0.152.9)
+
+<sup>Released on **2024-05-03**</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 0.152.8](https://github.com/lobehub/lobe-chat/compare/v0.152.7...v0.152.8)
 
 <sup>Released on **2024-05-03**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.152.8",
+  "version": "0.152.10",
   "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",
@@ -103,7 +103,7 @@
     "@vercel/speed-insights": "^1.0.10",
     "ahooks": "^3.7.11",
     "ai": "3.0.19",
-    "antd": "^5.16.5",
+    "antd": "5.16.5",
     "antd-style": "^3.6.2",
     "brotli-wasm": "^3.0.0",
     "chroma-js": "^2.4.2",
@@ -179,7 +179,7 @@
     "@next/bundle-analyzer": "^14.2.3",
     "@next/eslint-plugin-next": "^14.2.3",
     "@peculiar/webcrypto": "^1.4.6",
-    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "^15.0.5",
     "@types/chroma-js": "^2.4.4",
     "@types/debug": "^4.1.12",

package/src/app/(main)/(mobile)/me/features/AvatarBanner.tsx

@@ -4,20 +4,24 @@ import { createStyles } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
-export const useStyles = createStyles(({ css, token }) => ({
+export const AVATAR_SIZE = 80;
+
+export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   avatar: css`
-    position: absolute;
     z-index: 10;
 
     flex: none;
 
-    background: ${token.colorBgContainer};
-    border: 6px solid ${token.colorBgContainer};
+    margin-top: -${AVATAR_SIZE / 2 + 6}px;
+
+    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
+    border: 6px solid ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
     border-radius: 50%;
   `,
   banner: css`
     position: relative;
     flex: none;
+    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
   `,
   bannerBox: css`
     position: relative;
@@ -25,7 +29,7 @@ export const useStyles = createStyles(({ css, token }) => ({
     overflow: hidden;
 
     width: 100%;
-    height: 180px;
+    height: 100px;
 
     background: ${token.colorBgLayout};
   `,

package/src/app/(main)/(mobile)/me/features/Cate.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from 'antd-style';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -11,12 +10,11 @@ import Cell from '@/components/Cell';
 import Divider from '@/components/Cell/Divider';
 
 const SettingCate = memo(() => {
-  const theme = useTheme();
   const settingItems = useCategory({ mobile: true });
   const router = useRouter();
 
   return (
-    <Flexbox style={{ background: theme.colorBgContainer }} width={'100%'}>
+    <Flexbox width={'100%'}>
       {settingItems?.map(({ key, icon, label, type }: any, index) => {
         if (type === 'divider') return <Divider key={index} />;
         return (

package/src/app/(main)/(mobile)/me/features/ExtraCate.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -10,11 +9,10 @@ import Divider from '@/components/Cell/Divider';
 import { useExtraCate } from './useExtraCate';
 
 const ExtraCate = memo(() => {
-  const theme = useTheme();
   const mainItems = useExtraCate();
 
   return (
-    <Flexbox style={{ background: theme.colorBgContainer }} width={'100%'}>
+    <Flexbox width={'100%'}>
       {mainItems?.map(({ key, icon, label, type, onClick }: any, index) => {
         if (type === 'divider') return <Divider key={index} />;
         return <Cell icon={icon} key={key} label={label} onClick={onClick} />;

package/src/app/(main)/(mobile)/me/page.tsx

@@ -5,7 +5,7 @@ import BrandWatermark from '@/components/BrandWatermark';
 import Avatar from '@/features/AvatarWithUpload';
 import { isMobileDevice } from '@/utils/responsive';
 
-import AvatarBanner from './features/AvatarBanner';
+import AvatarBanner, { AVATAR_SIZE } from './features/AvatarBanner';
 import Cate from './features/Cate';
 import ExtraCate from './features/ExtraCate';
 
@@ -17,7 +17,7 @@ const Page = () => {
   return (
     <>
       <AvatarBanner>
-        <Avatar size={88} />
+        <Avatar size={AVATAR_SIZE} />
       </AvatarBanner>
       <Cate />
       <ExtraCate />

package/src/app/(main)/chat/features/SessionListContent/ListItem/index.tsx

@@ -21,11 +21,14 @@ const useStyles = createStyles(({ css, token, responsive }) => {
         border-radius: 0;
       }
     `,
+    title: css`
+      line-height: 1.2;
+    `,
   };
 });
 
 const ListItem = memo<ListItemProps & { avatar: string; avatarBackground?: string }>(
-  ({ avatar, avatarBackground, active, showAction, actions, ...props }) => {
+  ({ avatar, avatarBackground, active, showAction, actions, title, ...props }) => {
     const ref = useRef(null);
     const isHovering = useHover(ref);
     const { mobile } = useResponsive();
@@ -52,6 +55,7 @@ const ListItem = memo<ListItemProps & { avatar: string; avatarBackground?: strin
         className={styles.container}
         ref={ref}
         showAction={actions && (isHovering || showAction)}
+        title={<span className={styles.title}>{title}</span>}
         {...(props as any)}
       />
     );

package/src/app/(main)/market/features/AgentCard/index.tsx

@@ -28,12 +28,13 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
     background: ${token.colorBgContainer};
     border-radius: ${token.borderRadiusLG}px;
-    box-shadow: 0 0 1px 1px ${token.colorFillQuaternary} inset;
+    box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
+      inset;
 
     transition: box-shadow 0.2s ${token.motionEaseInOut};
 
     &:hover {
-      box-shadow: 0 0 1px 1px ${token.colorFillSecondary} inset;
+      box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillSecondary : token.colorFill} inset;
     }
   `,
   desc: css`
@@ -50,6 +51,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   title: css`
     margin-bottom: 0 !important;
     font-size: 18px !important;
+    font-weight: bold;
   `,
 }));
 

package/src/app/(main)/market/features/AgentList.tsx

@@ -58,7 +58,16 @@ const AgentList = memo<AgentListProps>(({ mobile }) => {
     [],
   );
 
-  if (isLoading) return <Skeleton paragraph={{ rows: 8 }} title={false} />;
+  if (isLoading || (!searchKeywords && agentList?.length === 0)) {
+    return (
+      <>
+        <h2 className={styles.title}>{t('title.recentSubmits')}</h2>
+        <Skeleton paragraph={{ rows: 8 }} title={false} />
+        <h2 className={styles.title}>{t('title.allAgents')}</h2>
+        <Skeleton paragraph={{ rows: 8 }} title={false} />
+      </>
+    );
+  }
 
   if (searchKeywords) {
     if (agentList.length === 0) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;

package/src/app/(main)/market/features/TagList.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from 'antd';
+import { Button, Skeleton } from 'antd';
 import { createStyles, useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { startCase } from 'lodash-es';
@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   active: css`
     color: ${token.colorBgLayout};
     background: ${token.colorPrimary};
@@ -20,11 +20,11 @@ const useStyles = createStyles(({ css, token }) => ({
     }
   `,
   tag: css`
-    background: ${token.colorBgContainer};
+    background: ${isDarkMode ? token.colorBgContainer : token.colorFillTertiary};
     border: none;
 
     &:hover {
-      background: ${token.colorBgElevated} !important;
+      background: ${isDarkMode ? token.colorBgElevated : token.colorFill} !important;
     }
   `,
 }));
@@ -38,6 +38,10 @@ const TagList = memo(() => {
   ]);
   const agentTagList = useMarketStore(agentMarketSelectors.getAgentTagList, isEqual);
 
+  if (agentTagList?.length === 0) {
+    return <Skeleton paragraph={{ rows: 4 }} title={false} />;
+  }
+
   const list = md ? agentTagList : agentTagList.slice(0, 20);
 
   return (

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

@@ -21,6 +21,7 @@ const useStyles = createStyles(({ token, css }) => ({
   title: css`
     font-size: 18px;
     font-weight: 700;
+    line-height: 1.2;
   `,
 }));
 

package/src/app/(main)/settings/_layout/Mobile/Header.tsx

@@ -22,7 +22,7 @@ const Header = memo(() => {
         <MobileNavBarTitle
           title={
             <Flexbox align={'center'} gap={4} horizontal>
-              {t(`tab.${activeSettingsKey}`)}
+              <span style={{ lineHeight: 1.2 }}> {t(`tab.${activeSettingsKey}`)}</span>
               {activeSettingsKey === SettingsTabs.Sync && (
                 <Tag color={'gold'}>{t('tab.experiment')}</Tag>
               )}

package/src/components/Cell/Divider.tsx

@@ -4,9 +4,9 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 
 const useStyles = createStyles(
-  ({ css, token }) => css`
+  ({ css, token, isDarkMode }) => css`
     height: 6px;
-    background: ${token.colorBgLayout};
+    background: ${isDarkMode ? token.colorBgContainer : token.colorBgLayout};
   `,
 );
 

package/src/components/Cell/index.tsx

@@ -5,10 +5,11 @@ import { ReactNode, memo } from 'react';
 
 const { Item } = List;
 
-const useStyles = createStyles(({ css }) => ({
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css`
     position: relative;
     padding-block: 16px !important;
+    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
     border-radius: 0;
   `,
 }));