@lobehub/chat 1.17.6 → 1.18.0

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

@@ -0,0 +1,72 @@
+'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 { DiscoverModelItem } from '@/types/discover';
+
+import SearchResultCount from '../../../components/SearchResultCount';
+import Title from '../../../components/Title';
+import VirtuosoGridList from '../../../components/VirtuosoGridList';
+import Card from './Card';
+
+export interface ListProps {
+  category?: string;
+  items?: DiscoverModelItem[];
+  mobile?: boolean;
+  searchKeywords?: string;
+}
+
+const List = memo<ListProps>(({ category, searchKeywords, items = [] }) => {
+  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} />
+        <VirtuosoGridList
+          data={items}
+          initialItemCount={24}
+          itemContent={(_, item) => (
+            <InterceptingLink
+              href={urlJoin('/discover/model/', item.identifier)}
+              key={item.identifier}
+            >
+              <Card showCategory {...item} />
+            </InterceptingLink>
+          )}
+          style={{
+            minHeight: '75vh',
+          }}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Title tag={items.length}>{t('models.list')}</Title>
+      <VirtuosoGridList
+        data={items}
+        initialItemCount={24}
+        itemContent={(_, item) => (
+          <InterceptingLink
+            href={urlJoin('/discover/model/', item.identifier)}
+            key={item.identifier}
+          >
+            <Card showCategory={!category} {...item} />
+          </InterceptingLink>
+        )}
+        style={{
+          minHeight: '75vh',
+        }}
+      />
+    </>
+  );
+});
+
+export default List;

package/src/app/(main)/discover/(list)/models/features/const.ts

@@ -0,0 +1,9 @@
+import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
+
+const providerMap: { [key: string]: string } = {};
+
+DEFAULT_MODEL_PROVIDER_LIST.filter((item) => item.chatModels.length > 0).forEach((item) => {
+  providerMap[item.id] = item.name;
+});
+
+export { providerMap };

package/src/app/(main)/discover/(list)/models/layout.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const MainLayout = ServerLayout<PropsWithChildren>({ Desktop, Mobile });
+
+MainLayout.displayName = 'DiscoverModelsLayout';
+
+export default MainLayout;

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

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

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

@@ -0,0 +1,61 @@
+import StructuredData from '@/components/StructuredData';
+import { DEFAULT_LANG } from '@/const/locale';
+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.models.description'),
+    locale,
+    title: t('discover.models.title'),
+    url: '/discover/models',
+  });
+};
+
+const Page = async ({ searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const mobile = isMobileDevice();
+
+  const discoverService = new DiscoverService();
+  const items = await discoverService.getModelList(locale);
+
+  const ld = ldModule.generate({
+    description: t('discover.models.description'),
+    title: t('discover.models.title'),
+    url: '/discover/models',
+    webpage: {
+      enable: true,
+      search: '/discover/search',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <List items={items} mobile={mobile} />
+    </>
+  );
+};
+
+export const generateStaticParams = async () => {
+  const discoverService = new DiscoverService();
+  const cates = await discoverService.getProviderList(DEFAULT_LANG);
+  return cates.map((cate) => ({
+    slug: cate,
+  }));
+};
+
+Page.DisplayName = 'DiscoverModels';
+
+export default Page;

package/src/app/(main)/discover/(list)/not-found.tsx

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/404'));

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

@@ -0,0 +1,64 @@
+import urlJoin from 'url-join';
+
+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 { PluginCategory } from '@/types/discover';
+import { isMobileDevice } from '@/utils/responsive';
+
+import List from '../features/List';
+
+type Props = { params: { slug: PluginCategory }; searchParams: { hl?: Locales } };
+
+export const generateMetadata = async ({ params, searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const { t: td } = await translation('discover', searchParams?.hl);
+
+  return metadataModule.generate({
+    alternate: true,
+    description: t('discover.plugins.description'),
+    locale,
+    title: [td(`category.plugin.${params.slug}`), t('discover.plugins.title')].join(' · '),
+    url: urlJoin('/discover/plugins', params.slug),
+  });
+};
+
+const Page = async ({ params, searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const { t: td } = await translation('discover', searchParams?.hl);
+  const mobile = isMobileDevice();
+
+  const discoverService = new DiscoverService();
+  const items = await discoverService.getPluginCategory(locale, params.slug);
+
+  const ld = ldModule.generate({
+    description: t('discover.plugins.description'),
+    title: [td(`category.plugin.${params.slug}`), t('discover.plugins.title')].join(' · '),
+    url: urlJoin('/discover/plugins', params.slug),
+    webpage: {
+      enable: true,
+      search: '/discover/search',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <List category={params.slug} items={items} mobile={mobile} />
+    </>
+  );
+};
+
+export const generateStaticParams = async () => {
+  const cates = Object.values(PluginCategory);
+  return cates.map((cate) => ({
+    slug: cate,
+  }));
+};
+
+Page.DisplayName = 'DiscoverToolsCategory';
+
+export default Page;

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

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import CategoryContainer from '../../../components/CategoryContainer';
+import Category from '../features/Category';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
+      <CategoryContainer>
+        <Category />
+      </CategoryContainer>
+      <Flexbox flex={1} gap={16}>
+        {children}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+Layout.displayName = 'DesktopDiscoverToolsLayout';
+
+export default Layout;

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

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

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

@@ -0,0 +1,154 @@
+import { Avatar, Tag } from '@lobehub/ui';
+import { Skeleton, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { startCase } from 'lodash-es';
+import dynamic from 'next/dynamic';
+import qs from 'query-string';
+import { memo } from 'react';
+import { Center, Flexbox, FlexboxProps } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { DiscoverPlugintem } from '@/types/discover';
+
+import CardBanner from '../../../components/CardBanner';
+import { useCategoryItem } from './useCategory';
+
+const Link = dynamic(() => import('next/link'), {
+  loading: () => <Skeleton.Button size={'small'} style={{ height: 22 }} />,
+  ssr: false,
+});
+
+const { Paragraph, Title } = 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};
+  `,
+  inner: css`
+    padding: 16px;
+  `,
+  time: css`
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin-block-end: 0 !important;
+    font-size: 18px !important;
+    font-weight: bold;
+  `,
+}));
+
+interface PluginCardProps
+  extends Omit<DiscoverPlugintem, 'manifest' | 'suggestions' | 'socialData'>,
+    Omit<FlexboxProps, 'children'> {
+  showCategory?: boolean;
+  variant?: 'default' | 'compact';
+}
+
+const PluginCard = memo<PluginCardProps>(
+  ({ className, showCategory, meta, createdAt, author, variant, ...rest }) => {
+    const { avatar, title, description, tags = [], category } = meta;
+    const categoryItem = useCategoryItem(category, 12);
+    const { cx, styles, theme } = useStyles();
+    const isCompact = variant === 'compact';
+
+    return (
+      <Flexbox className={cx(styles.container, className)} gap={24} {...rest}>
+        {!isCompact && <CardBanner avatar={avatar} />}
+        <Flexbox className={styles.inner} gap={12}>
+          <Flexbox align={'flex-end'} gap={16} horizontal justify={'space-between'} width={'100%'}>
+            <Title className={styles.title} ellipsis={{ rows: 1, tooltip: title }} level={3}>
+              {title}
+            </Title>
+            {isCompact ? (
+              <Avatar avatar={avatar} size={40} style={{ display: 'block' }} title={title} />
+            ) : (
+              <Center
+                flex={'none'}
+                height={64}
+                style={{
+                  background: theme.colorBgContainer,
+                  borderRadius: '50%',
+                  marginTop: -6,
+                  overflow: 'hidden',
+                  zIndex: 2,
+                }}
+                width={64}
+              >
+                <Avatar
+                  alt={title}
+                  avatar={avatar}
+                  size={56}
+                  style={{ display: 'block' }}
+                  title={title}
+                />
+              </Center>
+            )}
+          </Flexbox>
+          <Flexbox gap={8} horizontal style={{ fontSize: 12 }}>
+            <div style={{ color: theme.colorTextSecondary }}>@{author}</div>
+            {!isCompact && (
+              <time className={styles.time} dateTime={new Date(createdAt).toISOString()}>
+                {createdAt}
+              </time>
+            )}
+          </Flexbox>
+          <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+            {description}
+          </Paragraph>
+          <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
+            {showCategory && categoryItem ? (
+              <Link href={urlJoin('/discover/plugins', categoryItem.key)}>
+                <Tag icon={categoryItem.icon} style={{ margin: 0 }}>
+                  {categoryItem.label}
+                </Tag>
+              </Link>
+            ) : (
+              tags
+                .slice(0, 4)
+                .filter(Boolean)
+                .map((tag: string, index) => {
+                  const url = qs.stringifyUrl({
+                    query: { q: tag, type: 'plugins' },
+                    url: '/discover/search',
+                  });
+                  return (
+                    <Link href={url} key={index}>
+                      <Tag style={{ margin: 0 }}>{startCase(tag).trim()}</Tag>
+                    </Link>
+                  );
+                })
+            )}
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+
+export default PluginCard;

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

@@ -0,0 +1,45 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { memo, useMemo } from 'react';
+import urlJoin from 'url-join';
+
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { PluginCategory } from '@/types/discover';
+
+import CategoryMenu from '../../../components/CategoryMenu';
+import { useCategory } from './useCategory';
+
+const Category = memo(() => {
+  const items = useCategory();
+  const pathname = usePathname();
+  const selectedKey = useMemo(() => {
+    if (pathname.includes('/discover/plugins/')) {
+      return pathname.split('/')[3]?.split('?')[0];
+    }
+    return 'all';
+  }, [pathname]);
+  const router = useQueryRoute();
+
+  return (
+    <CategoryMenu
+      items={items.map((item: any) => ({
+        ...item,
+        label: (
+          <Link
+            href={urlJoin('/discover/plugins', item.key === PluginCategory.All ? '' : item.key)}
+          >
+            {item.label}
+          </Link>
+        ),
+      }))}
+      onSelect={({ key }) =>
+        router.push(urlJoin('/discover/plugins', key === PluginCategory.All ? '' : key))
+      }
+      selectedKeys={[selectedKey || 'all']}
+    />
+  );
+});
+
+export default Category;

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

@@ -0,0 +1,96 @@
+'use client';
+
+import { Grid } from '@lobehub/ui';
+import { Empty } from 'antd';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+
+import InterceptingLink from '@/components/InterceptingLink';
+import { DiscoverPlugintem } from '@/types/discover';
+
+import SearchResultCount from '../../../components/SearchResultCount';
+import Title from '../../../components/Title';
+import VirtuosoGridList from '../../../components/VirtuosoGridList';
+import Card from './Card';
+
+export interface ListProps {
+  category?: string;
+  items: DiscoverPlugintem[];
+  mobile?: boolean;
+  searchKeywords?: string;
+}
+
+const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] }) => {
+  const { t } = useTranslation('discover');
+  const recentLength = mobile ? 4 : 8;
+  const { all, recent, last } = useMemo(() => {
+    return {
+      all: items,
+      last: items.slice(recentLength),
+      recent: items.slice(0, recentLength),
+    };
+  }, [items, mobile]);
+
+  if (searchKeywords) {
+    if (!items || items?.length === 0) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+    return (
+      <>
+        <SearchResultCount count={all.length} keyword={searchKeywords} />
+        <VirtuosoGridList
+          data={all}
+          initialItemCount={24}
+          itemContent={(_, item) => (
+            <InterceptingLink
+              href={urlJoin('/discover/plugin/', item.identifier)}
+              key={item.identifier}
+            >
+              <Card showCategory variant={'compact'} {...item} />
+            </InterceptingLink>
+          )}
+          style={{
+            minHeight: '75vh',
+          }}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Title>{t('plugins.recentSubmits')}</Title>
+      <Grid maxItemWidth={280} rows={4}>
+        {recent.map((item) => (
+          <InterceptingLink
+            href={urlJoin('/discover/plugin/', item.identifier)}
+            key={item.identifier}
+          >
+            <Card showCategory={!category} {...item} />
+          </InterceptingLink>
+        ))}
+      </Grid>
+      {last && last?.length > 0 && (
+        <>
+          <Title tag={last.length}>{t('plugins.list')}</Title>
+          <VirtuosoGridList
+            data={last}
+            initialItemCount={12}
+            itemContent={(_, item) => (
+              <InterceptingLink
+                href={urlJoin('/discover/plugin/', item.identifier)}
+                key={item.identifier}
+              >
+                <Card showCategory={!category} variant={'compact'} {...item} />
+              </InterceptingLink>
+            )}
+            style={{
+              minHeight: '75vh',
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+});
+
+export default List;

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

@@ -0,0 +1,80 @@
+import { Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import {
+  Gamepad2,
+  ImagePlay,
+  LayoutPanelTop,
+  MicroscopeIcon,
+  PocketKnife,
+  Receipt,
+  ScanSearch,
+  TwitterIcon,
+  Umbrella,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { PluginCategory } from '@/types/discover';
+
+import { ICON_SIZE } from '../../../components/CategoryMenu';
+
+export const useCategory = (fontsize?: number) => {
+  const theme = useTheme();
+
+  const { t } = useTranslation('discover');
+
+  const size = fontsize ? { fontSize: fontsize } : ICON_SIZE;
+
+  return [
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={LayoutPanelTop} size={size} />,
+      key: PluginCategory.All,
+      label: t('category.plugin.all'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={ImagePlay} size={size} />,
+      key: PluginCategory.MediaGenerate,
+      label: t('category.plugin.media-generate'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={ScanSearch} size={size} />,
+      key: PluginCategory.WebSearch,
+      label: t('category.plugin.web-search'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={Receipt} size={size} />,
+      key: PluginCategory.StocksFinance,
+      label: t('category.plugin.stocks-finance'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={PocketKnife} size={size} />,
+      key: PluginCategory.Tools,
+      label: t('category.plugin.tools'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={Umbrella} size={size} />,
+      key: PluginCategory.LifeStyle,
+      label: t('category.plugin.life-style'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={MicroscopeIcon} size={size} />,
+      key: PluginCategory.ScienceEducation,
+      label: t('category.plugin.science-education'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={TwitterIcon} size={size} />,
+      key: PluginCategory.Social,
+      label: t('category.plugin.social'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={Gamepad2} size={size} />,
+      key: PluginCategory.GamingEntertainment,
+      label: t('category.plugin.gaming-entertainment'),
+    },
+  ];
+};
+
+export const useCategoryItem = (key?: PluginCategory, fontsize?: number) => {
+  const items = useCategory(fontsize);
+  if (!key) return;
+  return items.find((item) => item.key === key);
+};

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

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const MainLayout = ServerLayout<PropsWithChildren>({ Desktop, Mobile });
+
+MainLayout.displayName = 'DiscoverToolsLayout';
+
+export default MainLayout;

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

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