✨ feat(agent-card): Add and modify features for agent card

- Add and modify configurations, dependencies, styles, and metadata - Remove and modify props and styles in AgentCardBanner, AvatarBanner, and Hero components - Adjust height of elements in the layout The changes are made to enhance the agent card feature in the market application.
weijihailanzhou · Oct 12, 2023 · 3e3090a · 3e3090a
1 parent f05368a
commit 3e3090a
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 81 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -16,8 +16,9 @@ const withPWA = nextPWA({
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  compress: isProd,
+  productionBrowserSourceMaps: true,
   reactStrictMode: true,
-  swcMinify: true,
   images: {
     unoptimized: !isProd,
     remotePatterns: [
@@ -39,12 +40,20 @@ const nextConfig = {
         port: '',
         pathname: '/@lobehub/assets-logo/1.1.0/files/assets/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'registry.npmmirror.com',
+        port: '',
+        pathname: '/@lobehub/assets-favicons/latest/files/assets/**',
+      },
     ],
   },
   experimental: {
+    webVitalsAttribution: ['CLS', 'LCP'],
     forceSwcTransforms: true,
+    optimizePackageImports: ['modern-screenshot','emoji-mart','@emoji-mart/react','@emoji-mart/data','@icons-pack/react-simple-icons','gpt-tokenizer','chroma-js'],
   },
-  transpilePackages: ['@lobehub/ui', 'antd-style'],
+  transpilePackages: ['@lobehub/ui', 'antd-style', 'lodash-es'],
 
   webpack(config) {
     config.experiments = {

diff --git a/package.json b/package.json
@@ -66,7 +66,6 @@
   },
   "dependencies": {
     "@ant-design/colors": "^7",
-    "@ant-design/icons": "^5",
     "@emoji-mart/data": "^1",
     "@emoji-mart/react": "^1",
     "@icons-pack/react-simple-icons": "^9",

diff --git a/src/app/market/(mobile)/features/AgentCard.tsx b/src/app/market/(mobile)/features/AgentCard.tsx
@@ -3,11 +3,11 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css`
     overflow: hidden;
     background: ${token.colorBgContainer};
-    border: 1px solid ${token.colorFillTertiary};
+    border: 1px solid ${isDarkMode ? token.colorFillTertiary : token.colorFillSecondary};
     border-radius: ${token.borderRadiusLG}px;
   `,
 }));

diff --git a/src/app/market/features/AgentCard/AgentCardBanner.tsx b/src/app/market/features/AgentCard/AgentCardBanner.tsx
@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { MetaData } from '@/types/meta';
 
-export const useStyles = createStyles(({ css, token }, maskColor: string) => ({
+export const useStyles = createStyles(({ css, token }) => ({
   banner: css`
     position: relative;
 
@@ -14,20 +14,14 @@ export const useStyles = createStyles(({ css, token }, maskColor: string) => ({
     height: 64px;
     margin-bottom: -56px;
 
-    background: ${token.colorFill};
+    background: ${token.colorFillSecondary};
+
+    mask-image: linear-gradient(to bottom, #fff, transparent);
   `,
   bannerImg: css`
-    filter: blur(6px) saturate(1.6);
-  `,
-  bannerMask: css`
     position: absolute;
-    bottom: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-
-    background: linear-gradient(to bottom, transparent, ${maskColor || token.colorBgLayout});
+    top: -50%;
+    filter: blur(50px) saturate(2);
   `,
 }));
 
@@ -39,8 +33,8 @@ interface AgentCardBannerProps extends DivProps {
 }
 
 const AgentCardBanner = memo<AgentCardBannerProps>(
-  ({ meta, className, mask, size = 8, maskColor, children, ...props }) => {
-    const { styles, theme, cx } = useStyles(maskColor);
+  ({ meta, className, size = 200, children, ...props }) => {
+    const { styles, cx } = useStyles();
 
     return (
       <Flexbox
@@ -49,14 +43,7 @@ const AgentCardBanner = memo<AgentCardBannerProps>(
         justify={'center'}
         {...props}
       >
-        <Avatar
-          alt={'banner'}
-          avatar={meta.avatar}
-          background={meta.backgroundColor || theme.colorBgContainer}
-          className={styles.bannerImg}
-          style={{ transform: `scale(${size})` }}
-        />
-        {mask && <div className={styles.bannerMask} />}
+        <Avatar alt={'banner'} avatar={meta.avatar} className={styles.bannerImg} size={size} />
         {children}
       </Flexbox>
     );

diff --git a/src/app/market/features/AgentCard/AgentCardItem.tsx b/src/app/market/features/AgentCard/AgentCardItem.tsx
@@ -22,12 +22,7 @@ const AgentCardItem = memo<AgentsMarketIndexItem>(({ meta, identifier }) => {
   const { isDarkMode } = useThemeMode();
   return (
     <Flexbox className={styles.container} onClick={() => onAgentCardClick(identifier)}>
-      <AgentCardBanner
-        mask
-        maskColor={theme.colorBgContainer}
-        meta={meta}
-        style={{ opacity: isDarkMode ? 0.9 : 0.4 }}
-      />
+      <AgentCardBanner meta={meta} style={{ opacity: isDarkMode ? 0.9 : 0.4 }} />
       <Flexbox className={styles.inner} gap={8} ref={ref}>
         <Avatar
           animation={isHovering}

diff --git a/src/app/market/features/AgentDetailContent/AgentInfo/index.tsx b/src/app/market/features/AgentDetailContent/AgentInfo/index.tsx
@@ -1,5 +1,4 @@
 import { Markdown, TabsNav } from '@lobehub/ui';
-import { useResponsive } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -23,8 +22,8 @@ const AgentModalInner = memo(() => {
     s.useFetchAgent,
     s.currentIdentifier,
   ]);
-  const { styles, theme } = useStyles();
-  const { mobile } = useResponsive();
+  const { styles } = useStyles();
+
   const { data, isLoading } = useFetchAgent(currentIdentifier);
   const { t } = useTranslation('market');
   const [tab, setTab] = useState<string>(InfoTabs.prompt);
@@ -36,13 +35,7 @@ const AgentModalInner = memo(() => {
 
   return (
     <>
-      <AgentCardBanner
-        mask
-        maskColor={mobile ? theme.colorBgContainer : undefined}
-        meta={meta}
-        size={10}
-        style={{ height: 120, marginBottom: -60 }}
-      />
+      <AgentCardBanner meta={meta} size={400} style={{ height: 120, marginBottom: -60 }} />
       <Header />
       <Flexbox align={'center'}>
         <TabsNav

diff --git a/src/app/metadata.ts b/src/app/metadata.ts
@@ -9,9 +9,9 @@ const { description, homepage } = pkg;
 const metadata: Metadata = {
   appleWebApp: {
     statusBarStyle: 'black-translucent',
-    title: title,
+    title,
   },
-  description: description,
+  description,
   icons: {
     apple:
       'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/apple-touch-icon.png',
@@ -26,13 +26,13 @@ const metadata: Metadata = {
       {
         alt: title,
         height: 360,
-        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.4.0/files/assets/og-480x270.png',
+        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-480x270.png',
         width: 480,
       },
       {
         alt: title,
         height: 720,
-        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.4.0/files/assets/og-960x540.png',
+        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-960x540.png',
         width: 960,
       },
     ],
@@ -50,6 +50,15 @@ const metadata: Metadata = {
     default: title,
     template: '%s · LobeChat',
   },
+  twitter: {
+    card: 'summary_large_image',
+    creator: '@lobehub',
+    description,
+    images: [
+      'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-960x540.png',
+    ],
+    title,
+  },
   viewport: {
     initialScale: 1,
     maximumScale: 1,

diff --git a/src/app/settings/(mobile)/features/AvatarBanner.tsx b/src/app/settings/(mobile)/features/AvatarBanner.tsx
@@ -6,7 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
 
-export const useStyles = createStyles(({ css, token }, maskColor: string) => ({
+export const useStyles = createStyles(({ css, token }) => ({
   banner: css`
     position: relative;
 
@@ -15,36 +15,32 @@ export const useStyles = createStyles(({ css, token }, maskColor: string) => ({
     height: 172px;
     min-height: 172px;
     max-height: 172px;
+  `,
+  bannerBox: css`
+    position: relative;
+
+    width: 100%;
+    height: 100%;
 
     background: ${token.colorBgLayout};
+
+    mask-image: linear-gradient(to bottom, #fff, transparent);
   `,
   bannerImg: css`
     position: absolute;
     top: -50%;
     filter: blur(100px) saturate(2);
   `,
-  bannerMask: css`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-
-    background: linear-gradient(to bottom, transparent, ${maskColor || token.colorBgLayout});
-  `,
 }));
 
 interface AgentCardBannerProps extends DivProps {
   avatar: string;
-  mask?: boolean;
-  maskColor?: string;
   size?: number;
 }
 
 const AvatarBanner = memo<AgentCardBannerProps>(
-  ({ avatar, className, mask, size = 200, maskColor, children, ...props }) => {
-    const { styles, cx } = useStyles(maskColor);
+  ({ avatar, className, size = 200, children, ...props }) => {
+    const { styles, cx } = useStyles();
 
     return (
       <Flexbox
@@ -53,14 +49,15 @@ const AvatarBanner = memo<AgentCardBannerProps>(
         justify={'center'}
         {...props}
       >
-        <Image
-          alt={'banner'}
-          className={styles.bannerImg}
-          height={size}
-          src={avatar || DEFAULT_USER_AVATAR_URL}
-          width={size}
-        />
-        {mask && <div className={styles.bannerMask} />}
+        <Flexbox align={'center'} className={styles.bannerBox} justify={'center'}>
+          <Image
+            alt={'banner'}
+            className={styles.bannerImg}
+            height={size}
+            src={avatar || DEFAULT_USER_AVATAR_URL}
+            width={size}
+          />
+        </Flexbox>
         {children}
       </Flexbox>
     );

diff --git a/src/app/settings/(mobile)/mobile/index.tsx b/src/app/settings/(mobile)/mobile/index.tsx
@@ -33,7 +33,7 @@ const Setting = memo(() => {
 
   return (
     <Layout>
-      <AvatarBanner avatar={avatar} mask>
+      <AvatarBanner avatar={avatar}>
         <Center style={{ position: 'absolute', zIndex: 2 }}>
           <AvatarWithUpload size={88} />
         </Center>

diff --git a/src/app/welcome/features/Banner/Hero.tsx b/src/app/welcome/features/Banner/Hero.tsx
@@ -24,7 +24,7 @@ const Hero = memo<{ mobile?: boolean; width: number }>(({ width, mobile }) => {
     <>
       <LogoThree size={size.logo} style={{ marginTop: -size.logo / 5 }} />
       <div className={styles.title} style={{ fontSize: size.title }}>
-        <span style={mobile ? { fontSize: '1.2em' } : {}}>LobeChat</span>
+        <strong style={mobile ? { fontSize: '1.2em' } : {}}>LobeChat</strong>
         {mobile ? <br /> : ' '}
         {t('slogan.title')}
       </div>

diff --git a/src/app/welcome/features/Banner/index.tsx b/src/app/welcome/features/Banner/index.tsx
@@ -1,11 +1,10 @@
 'use client';
 
 import { Icon } from '@lobehub/ui';
-import { useSize } from 'ahooks';
 import { Button, Upload } from 'antd';
 import { SendHorizonal } from 'lucide-react';
 import dynamic from 'next/dynamic';
-import { memo, useCallback, useRef } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -18,9 +17,6 @@ const Hero = dynamic(() => import('./Hero'));
 
 const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { importConfig } = useImportConfig();
-  const ref = useRef(null);
-  const domSize = useSize(ref);
-  const width = domSize?.width || 1024;
   const { t } = useTranslation('welcome');
   const { styles } = useStyles();
   const [switchSession, switchBackToChat, router, isMobile] = useSessionStore((s) => [
@@ -36,8 +32,8 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
 
   return (
     <>
-      <div className={styles.container} ref={ref}>
-        <Hero mobile={mobile} width={width} />
+      <div className={styles.container}>
+        <Hero mobile={mobile} width={mobile ? 640 : 1024} />
       </div>
       <Flexbox
         className={styles.buttonGroup}

diff --git a/src/const/layoutTokens.ts b/src/const/layoutTokens.ts
@@ -2,9 +2,9 @@ import type { FormProps } from '@lobehub/ui';
 
 export const HEADER_HEIGHT = 64;
 export const MOBILE_NABBAR_HEIGHT = 44;
-export const MOBILE_TABBAR_HEIGHT = 60;
+export const MOBILE_TABBAR_HEIGHT = 48;
 export const CHAT_TEXTAREA_HEIGHT = 200;
-export const CHAT_TEXTAREA_HEIGHT_MOBILE = 120;
+export const CHAT_TEXTAREA_HEIGHT_MOBILE = 108;
 export const CHAT_SIDEBAR_WIDTH = 280;
 export const MARKET_SIDEBAR_WIDTH = 400;
 export const FOLDER_WIDTH = 256;