@lobehub/chat 1.17.7 → 1.18.1

package/src/app/(main)/discover/(list)/plugins/page.tsx

@@ -0,0 +1,52 @@
+import StructuredData from '@/components/StructuredData';
+import { Locales } from '@/locales/resources';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { DiscoverService } from '@/server/services/discover';
+import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/responsive';
+
+import List from './features/List';
+
+type Props = { searchParams: { hl?: Locales } };
+
+export const generateMetadata = async ({ searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+
+  return metadataModule.generate({
+    alternate: true,
+    description: t('discover.plugins.description'),
+    locale,
+    title: t('discover.plugins.title'),
+    url: '/discover/plugins',
+  });
+};
+
+const Page = async ({ searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const mobile = isMobileDevice();
+
+  const discoverService = new DiscoverService();
+  const items = await discoverService.getPluginList(locale);
+
+  const ld = ldModule.generate({
+    description: t('discover.plugins.description'),
+    title: t('discover.plugins.title'),
+    url: '/discover/plugins',
+    webpage: {
+      enable: true,
+      search: '/discover/search',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <List items={items} mobile={mobile} />
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverTools';
+
+export default Page;

package/src/app/(main)/discover/(list)/providers/features/Card.tsx

@@ -0,0 +1,117 @@
+import { ModelTag, ProviderCombine } from '@lobehub/icons';
+import { Tag } from '@lobehub/ui';
+import { Skeleton, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { DiscoverProviderItem } from '@/types/discover';
+
+const Link = dynamic(() => import('next/link'), {
+  loading: () => <Skeleton.Button size={'small'} style={{ height: 22 }} />,
+  ssr: false,
+});
+
+const { Paragraph } = Typography;
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  banner: css`
+    opacity: ${isDarkMode ? 0.9 : 0.4};
+  `,
+  container: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    height: 100%;
+    min-height: 162px;
+
+    background: ${token.colorBgContainer};
+    border-radius: ${token.borderRadiusLG}px;
+    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 ${isDarkMode ? token.colorFillSecondary : token.colorFill} inset;
+    }
+  `,
+  desc: css`
+    min-height: 44px;
+    margin-block-end: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+  tagBlue: css`
+    color: ${token.geekblue};
+    background: ${token.geekblue1};
+  `,
+  tagGreen: css`
+    color: ${token.green};
+    background: ${token.green1};
+  `,
+  time: css`
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    zoom: 1.2;
+    margin-block-end: 0 !important;
+    font-size: 18px !important;
+    font-weight: bold;
+  `,
+  token: css`
+    font-family: ${token.fontFamilyCode};
+  `,
+}));
+
+export interface ProviderCardProps extends DiscoverProviderItem, FlexboxProps {
+  mobile?: boolean;
+}
+
+const ProviderCard = memo<ProviderCardProps>(({ models, className, meta, identifier, ...rest }) => {
+  const { description } = meta;
+  const { t } = useTranslation(['discover', 'providers']);
+  const { cx, styles, theme } = useStyles();
+
+  return (
+    <Flexbox className={cx(styles.container, className)} gap={24} {...rest}>
+      <Flexbox gap={12} padding={16} width={'100%'}>
+        <ProviderCombine
+          provider={identifier}
+          size={28}
+          style={{ color: theme.colorText }}
+          title={meta.title}
+        />
+        <Flexbox gap={8} horizontal style={{ fontSize: 12, marginTop: -8 }}>
+          <div style={{ color: theme.colorTextSecondary }}>@{meta.title}</div>
+          <div style={{ color: theme.colorTextDescription }}>
+            {t('providers.modelCount', { count: models.length })}
+          </div>
+        </Flexbox>
+        {description && (
+          <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+            {t(`${identifier}.description`, { ns: 'providers' })}
+          </Paragraph>
+        )}
+        <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
+          {models
+            .slice(0, 3)
+            .filter(Boolean)
+            .map((tag: string) => (
+              <Link href={urlJoin('/discover/model', tag)} key={tag}>
+                <ModelTag model={tag} style={{ margin: 0 }} />
+              </Link>
+            ))}
+          {models.length > 3 && <Tag>...</Tag>}
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ProviderCard;

package/src/app/(main)/discover/(list)/providers/features/List.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { Empty } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+
+import InterceptingLink from '@/components/InterceptingLink';
+import { DiscoverProviderItem } from '@/types/discover';
+
+import SearchResultCount from '../../../components/SearchResultCount';
+import Title from '../../../components/Title';
+import { VirtuosoList } from '../../../components/VirtuosoGridList';
+import Card from './Card';
+
+export interface ListProps {
+  items?: DiscoverProviderItem[];
+  mobile?: boolean;
+  searchKeywords?: string;
+}
+
+const List = memo<ListProps>(({ searchKeywords, items = [], mobile }) => {
+  const { t } = useTranslation('discover');
+
+  if (searchKeywords) {
+    if (!items || items?.length === 0) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+    return (
+      <>
+        <SearchResultCount count={items.length} keyword={searchKeywords} />
+        <VirtuosoList
+          data={items}
+          initialItemCount={6}
+          itemContent={(_, item) => (
+            <InterceptingLink
+              href={urlJoin('/discover/provider/', item.identifier)}
+              key={item.identifier}
+            >
+              <Card {...item} mobile={mobile} style={{ minHeight: 'unset' }} />
+            </InterceptingLink>
+          )}
+          style={{
+            minHeight: '75vh',
+          }}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Title tag={items.length}>{t('providers.list')}</Title>
+      <VirtuosoList
+        data={items}
+        initialItemCount={6}
+        itemContent={(_, item) => (
+          <InterceptingLink
+            href={urlJoin('/discover/provider/', item.identifier)}
+            key={item.identifier}
+          >
+            <Card {...item} mobile={mobile} style={{ minHeight: 'unset' }} />
+          </InterceptingLink>
+        )}
+        style={{
+          minHeight: '75vh',
+        }}
+      />
+    </>
+  );
+});
+
+export default List;

package/src/app/(main)/discover/(list)/providers/loading.tsx

@@ -0,0 +1 @@
+export { ProviderListLoading as default } from '../../components/ListLoading';

package/src/app/(main)/discover/(list)/providers/page.tsx

@@ -0,0 +1,52 @@
+import StructuredData from '@/components/StructuredData';
+import { Locales } from '@/locales/resources';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { DiscoverService } from '@/server/services/discover';
+import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/responsive';
+
+import List from './features/List';
+
+type Props = { searchParams: { hl?: Locales } };
+
+export const generateMetadata = async ({ searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+
+  return metadataModule.generate({
+    alternate: true,
+    description: t('discover.providers.description'),
+    locale,
+    title: t('discover.providers.title'),
+    url: '/discover/providers',
+  });
+};
+
+const Page = async ({ searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const mobile = isMobileDevice();
+
+  const discoverService = new DiscoverService();
+  const items = await discoverService.getProviderList(locale);
+
+  const ld = ldModule.generate({
+    description: t('discover.providers.description'),
+    title: t('discover.providers.title'),
+    url: '/discover/providers',
+    webpage: {
+      enable: true,
+      search: '/discover/search',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <List items={items} mobile={mobile} />
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverProviders';
+
+export default Page;

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

@@ -0,0 +1,36 @@
+'use client';
+
+import { ChatHeader } from '@lobehub/ui';
+import Link from 'next/link';
+import { memo } from 'react';
+
+import { ProductLogo } from '@/components/Branding';
+
+import CreateButton from '../../features/CreateButton';
+import StoreSearchBar from '../../features/StoreSearchBar';
+
+const Header = memo(() => {
+  return (
+    <ChatHeader
+      left={
+        <Link href={'/discover'} style={{ color: 'inherit' }}>
+          <ProductLogo extra={'Discover'} size={36} type={'text'} />
+        </Link>
+      }
+      right={<CreateButton />}
+      style={{
+        position: 'relative',
+        zIndex: 10,
+      }}
+      styles={{
+        center: { flex: 1, maxWidth: 1440 },
+        left: { flex: 1, maxWidth: 240 },
+        right: { flex: 1, maxWidth: 240 },
+      }}
+    >
+      <StoreSearchBar />
+    </ChatHeader>
+  );
+});
+
+export default Header;

package/src/app/(main)/discover/_layout/Desktop/index.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Header from './Header';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <>
+      <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
+        <Header />
+        {children}
+      </Flexbox>
+      {/* ↓ cloud slot ↓ */}
+      {/* ↑ cloud slot ↑ */}
+    </>
+  );
+};
+
+Layout.displayName = 'DesktopDiscoverStoreLayout';
+
+export default Layout;

package/src/app/(main)/discover/_layout/Mobile/index.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return children;
+};
+
+Layout.displayName = 'MobileDiscoverStoreLayout';
+
+export default Layout;

package/src/app/(main)/{market/features/AgentCard/AgentCardBanner.tsx → discover/components/CardBanner.tsx}

@@ -1,6 +1,6 @@
 import { Avatar, DivProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -20,15 +20,15 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-interface AgentCardBannerProps extends DivProps {
-  avatar?: string;
+interface CardBannerProps extends DivProps {
+  avatar?: string | ReactNode;
   loading?: boolean;
   mask?: boolean;
   maskColor?: string;
   size?: number;
 }
 
-const AgentCardBanner = memo<AgentCardBannerProps>(
+const CardBanner = memo<CardBannerProps>(
   ({ avatar, className, size = 600, children, ...props }) => {
     const { styles, theme, cx } = useStyles();
 
@@ -56,4 +56,4 @@ const AgentCardBanner = memo<AgentCardBannerProps>(
   },
 );
 
-export default AgentCardBanner;
+export default CardBanner;

package/src/app/(main)/discover/components/CategoryContainer.tsx

@@ -0,0 +1,18 @@
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const CategoryContainer = memo<PropsWithChildren<{ top?: number }>>(({ children, top = 64 }) => {
+  return (
+    <Flexbox
+      as={'aside'}
+      flex={'none'}
+      height={`calc(100vh - ${top * 2 + 4}px)`}
+      style={{ overflowX: 'hidden', overflowY: 'hidden', position: 'sticky', top }}
+      width={220}
+    >
+      {children}
+    </Flexbox>
+  );
+});
+
+export default CategoryContainer;

package/src/app/(main)/discover/components/CategoryMenu.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { ConfigProvider, Menu, MenuProps } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+
+export const ICON_SIZE = { fontSize: '1.25em' };
+
+const CategoryMenu = memo<MenuProps>(({ style, ...rest }) => {
+  const theme = useTheme();
+
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Menu: {
+            itemSelectedBg: theme.colorFillTertiary,
+          },
+        },
+      }}
+    >
+      <Menu
+        mode="inline"
+        style={{
+          background: 'transparent',
+          border: 'none',
+          fontSize: 16,
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          width: '100%',
+          ...style,
+        }}
+        {...rest}
+      />
+    </ConfigProvider>
+  );
+});
+
+export default CategoryMenu;

package/src/app/(main)/discover/components/GitHubAvatar.tsx

@@ -0,0 +1,19 @@
+import { Avatar, type AvatarProps } from '@lobehub/ui';
+import qs from 'query-string';
+import { memo } from 'react';
+import urlJoin from 'url-join';
+
+interface GitHubAvatarProps extends Omit<AvatarProps, 'avatar'> {
+  username: string;
+}
+
+const GitHubAvatar = memo<GitHubAvatarProps>(({ username, size = 24 }) => {
+  const url = qs.stringifyUrl({
+    query: { size: size * 2 },
+    url: urlJoin('https://github.com', `${username}.png`),
+  });
+
+  return <Avatar alt={username} avatar={url} size={size} />;
+});
+
+export default GitHubAvatar;

package/src/app/(main)/discover/components/GridLoadingCard.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Grid } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  container: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    background: ${token.colorBgContainer};
+    border-radius: ${token.borderRadiusLG}px;
+    box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
+      inset;
+
+    transition: box-shadow 0.2s ${token.motionEaseInOut};
+  `,
+  desc: css`
+    min-height: 44px;
+    margin-block-end: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+
+  time: css`
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin-block-end: 0 !important;
+    font-weight: bold;
+  `,
+}));
+
+const Card = memo<{ banner?: boolean }>(({ banner }) => {
+  const { styles } = useStyles();
+  return (
+    <Flexbox className={styles.container}>
+      {banner && (
+        <Flexbox width={'100%'}>
+          <Skeleton.Button style={{ height: 64, width: '100%' }} />
+        </Flexbox>
+      )}
+      <Flexbox padding={16}>
+        <Skeleton active />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+interface GridLoadingCardProps {
+  banner?: boolean;
+  count?: number;
+  rows?: number;
+}
+
+const GridLoadingCard = memo<GridLoadingCardProps>(({ count = 8, rows = 4, banner }) => (
+  <Grid maxItemWidth={280} rows={rows}>
+    {Array.from({ length: count }).map((_, index) => (
+      <Card banner={banner} key={index} />
+    ))}
+  </Grid>
+));
+
+export default GridLoadingCard;

package/src/app/(main)/discover/components/ListLoading.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import GridLoadingCard from './GridLoadingCard';
+
+const ListLoading = memo(() => {
+  return (
+    <Flexbox gap={16}>
+      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
+        <Skeleton.Button active style={{ minWidth: 150 }} />
+      </Flexbox>
+      <GridLoadingCard banner />
+      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
+        <Skeleton.Button active style={{ minWidth: 150 }} />
+      </Flexbox>
+      <GridLoadingCard />
+    </Flexbox>
+  );
+});
+
+export const ListLoadingWithoutBanner = memo<{ banner?: boolean }>(() => {
+  return (
+    <Flexbox gap={16}>
+      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
+        <Skeleton.Button active style={{ minWidth: 150 }} />
+      </Flexbox>
+      <GridLoadingCard count={16} />
+    </Flexbox>
+  );
+});
+
+export const ProviderListLoading = memo<{ banner?: boolean }>(() => {
+  return (
+    <Flexbox gap={16}>
+      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
+        <Skeleton.Button active style={{ minWidth: 150 }} />
+      </Flexbox>
+      <GridLoadingCard count={6} rows={1} />
+    </Flexbox>
+  );
+});
+
+export const HomeLoading = memo<{ banner?: boolean }>(() => {
+  return (
+    <Flexbox gap={16}>
+      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
+        <Skeleton.Button active style={{ minWidth: 150 }} />
+      </Flexbox>
+      <GridLoadingCard banner />
+      <GridLoadingCard />
+      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
+        <Skeleton.Button active style={{ minWidth: 150 }} />
+      </Flexbox>
+      <GridLoadingCard />
+      <Flexbox justify={'center'} style={{ minHeight: 62 }}>
+        <Skeleton.Button active style={{ minWidth: 150 }} />
+      </Flexbox>
+      <GridLoadingCard />
+    </Flexbox>
+  );
+});
+
+export default ListLoading;

package/src/app/(main)/discover/components/Loading.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+
+import Title from './Title';
+
+const Loading = memo<{ title: string }>(({ title }) => {
+  return (
+    <>
+      <Title>{title}</Title>
+      <Skeleton active paragraph={{ rows: 8 }} title={false} />
+    </>
+  );
+});
+
+export default Loading;

package/src/app/(main)/discover/components/SearchResultCount.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Trans } from 'react-i18next';
+
+import Title from './Title';
+
+const useStyles = createStyles(({ css, token }) => ({
+  highlight: css`
+    color: ${token.colorInfo};
+
+    &::before,
+    &::after {
+      content: '\`';
+    }
+  `,
+}));
+
+const SearchResultCount = memo<{ count: number; keyword: string }>(({ keyword, count }) => {
+  const { styles } = useStyles();
+  return (
+    <Title>
+      <Trans
+        components={{ highlight: <span className={styles.highlight} /> }}
+        i18nKey={'search.result'}
+        ns={'discover'}
+        values={{
+          count,
+          keyword,
+        }}
+      />
+    </Title>
+  );
+});
+
+export default SearchResultCount;