@lobehub/chat 1.17.6 → 1.18.0

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

@@ -0,0 +1,97 @@
+'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 { DiscoverAssistantItem } 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?: DiscoverAssistantItem[];
+  mobile?: boolean;
+  searchKeywords?: string;
+}
+
+const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] }) => {
+  const { t } = useTranslation('discover');
+
+  const { all, recent, last } = useMemo(() => {
+    const recentLength = mobile ? 4 : 8;
+    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/assistant/', item.identifier)}
+              key={item.identifier}
+            >
+              <Card showCategory variant={'compact'} {...item} />
+            </InterceptingLink>
+          )}
+          style={{
+            minHeight: '75vh',
+          }}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Title>{t('assistants.recentSubmits')}</Title>
+      <Grid maxItemWidth={280} rows={4}>
+        {recent.map((item) => (
+          <InterceptingLink
+            href={urlJoin('/discover/assistant/', item.identifier)}
+            key={item.identifier}
+          >
+            <Card showCategory={!category} {...item} />
+          </InterceptingLink>
+        ))}
+      </Grid>
+      {last && last?.length > 0 && (
+        <>
+          <Title tag={last.length}>{t('assistants.list')}</Title>
+          <VirtuosoGridList
+            data={last}
+            initialItemCount={12}
+            itemContent={(_, item) => (
+              <InterceptingLink
+                href={urlJoin('/discover/assistant/', item.identifier)}
+                key={item.identifier}
+              >
+                <Card showCategory={!category} variant={'compact'} {...item} />
+              </InterceptingLink>
+            )}
+            style={{
+              minHeight: '75vh',
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+});
+
+export default List;

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

@@ -0,0 +1,116 @@
+import { Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import {
+  BadgeDollarSignIcon,
+  BriefcaseIcon,
+  Coffee,
+  DramaIcon,
+  GamepadIcon,
+  GraduationCapIcon,
+  ImageIcon,
+  LanguagesIcon,
+  LaughIcon,
+  Layers,
+  LayoutPanelTop,
+  MicroscopeIcon,
+  PencilIcon,
+  PrinterIcon,
+  TerminalSquareIcon,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { AssistantCategory } 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: AssistantCategory.All,
+      label: t('category.assistant.all'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={MicroscopeIcon} size={size} />,
+      key: AssistantCategory.Academic,
+      label: t('category.assistant.academic'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={BriefcaseIcon} size={size} />,
+      key: AssistantCategory.Career,
+      label: t('category.assistant.career'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={PencilIcon} size={size} />,
+      key: AssistantCategory.CopyWriting,
+      label: t('category.assistant.copywriting'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={ImageIcon} size={size} />,
+      key: AssistantCategory.Design,
+      label: t('category.assistant.design'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={GraduationCapIcon} size={size} />,
+      key: AssistantCategory.Education,
+      label: t('category.assistant.education'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={LaughIcon} size={size} />,
+      key: AssistantCategory.Emotions,
+      label: t('category.assistant.emotions'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={DramaIcon} size={size} />,
+      key: AssistantCategory.Entertainment,
+      label: t('category.assistant.entertainment'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={GamepadIcon} size={size} />,
+      key: AssistantCategory.Games,
+      label: t('category.assistant.games'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={Layers} size={size} />,
+      key: AssistantCategory.General,
+      label: t('category.assistant.general'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={Coffee} size={size} />,
+      key: AssistantCategory.Life,
+      label: t('category.assistant.life'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={BadgeDollarSignIcon} size={size} />,
+      key: AssistantCategory.Marketing,
+      label: t('category.assistant.marketing'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={PrinterIcon} size={size} />,
+      key: AssistantCategory.Office,
+      label: t('category.assistant.office'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={TerminalSquareIcon} size={size} />,
+      key: AssistantCategory.Programming,
+      label: t('category.assistant.programming'),
+    },
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={LanguagesIcon} size={size} />,
+      key: AssistantCategory.Translation,
+      label: t('category.assistant.translation'),
+    },
+  ];
+};
+
+export const useCategoryItem = (key?: AssistantCategory, fontsize?: number) => {
+  const items = useCategory(fontsize);
+  if (!key) return;
+  return items.find((item) => item.key === key);
+};

package/src/app/(main)/discover/(list)/assistants/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 = 'DiscoverAssistantsLayout';
+
+export default MainLayout;

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

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

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

@@ -0,0 +1,51 @@
+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.assistants.description'),
+    locale,
+    title: t('discover.assistants.title'),
+    url: '/discover/assistants',
+  });
+};
+
+const Page = async ({ searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const mobile = isMobileDevice();
+
+  const discoverService = new DiscoverService();
+  const items = await discoverService.getAssistantList(locale);
+
+  const ld = ldModule.generate({
+    description: t('discover.assistants.description'),
+    title: t('discover.assistants.title'),
+    url: '/discover/assistants',
+    webpage: {
+      enable: true,
+      search: '/discover/search',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <List items={items} mobile={mobile} />
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverAssistants';
+
+export default Page;

package/src/app/(main)/discover/(list)/error.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));

package/src/app/(main)/{market → discover/(list)}/layout.tsx

@@ -1,11 +1,12 @@
+import { PropsWithChildren } from 'react';
+
 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<PropsWithChildren>({ Desktop, Mobile });
 
-MainLayout.displayName = 'MarketLayout';
+MainLayout.displayName = 'DiscoverLayout';
 
 export default MainLayout;

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

@@ -0,0 +1,39 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { usePathname } from 'next/navigation';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useServerConfigStore } from '@/store/serverConfig';
+
+import CategoryContainer from '../components/CategoryContainer';
+
+export default memo(() => {
+  const pathname = usePathname();
+  const mobile = useServerConfigStore((s) => s.isMobile);
+  const withoutCategory =
+    pathname === '/discover' ||
+    pathname === '/discover/providers' ||
+    pathname === '/discover/search';
+
+  if (mobile || withoutCategory)
+    return (
+      <Flexbox flex={1} gap={16}>
+        <Skeleton.Button active style={{ minWidth: 150 }} />
+        <Skeleton paragraph={{ rows: 16 }} style={{ marginBlock: 24 }} title={false} />
+      </Flexbox>
+    );
+
+  return (
+    <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
+      <CategoryContainer>
+        <Skeleton paragraph={{ rows: 10 }} title={false} />
+      </CategoryContainer>
+      <Flexbox flex={1} gap={16}>
+        <Skeleton.Button active style={{ minWidth: 150 }} />
+        <Skeleton paragraph={{ rows: 16 }} style={{ marginBlock: 24 }} title={false} />
+      </Flexbox>
+    </Flexbox>
+  );
+});

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

@@ -0,0 +1,70 @@
+import urlJoin from 'url-join';
+
+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 { AssistantCategory } from '@/types/discover';
+import { isMobileDevice } from '@/utils/responsive';
+
+import List from '../features/List';
+
+type Props = { params: { slug: AssistantCategory }; searchParams: { hl?: Locales } };
+
+export const generateMetadata = async ({ params, searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+
+  const discoverService = new DiscoverService();
+  const list = await discoverService.getProviderList(locale);
+  const cate = list.find((cate) => cate.identifier === params.slug);
+
+  return metadataModule.generate({
+    alternate: true,
+    description: t('discover.models.description'),
+    locale,
+    title: [cate?.meta.title, t('discover.models.title')].join(' · '),
+    url: urlJoin('/discover/models', params.slug),
+  });
+};
+
+const Page = async ({ params, searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const mobile = isMobileDevice();
+
+  const discoverService = new DiscoverService();
+  const list = await discoverService.getProviderList(locale);
+  const cate = list.find((cate) => cate.identifier === params.slug);
+  const items = await discoverService.getModelCategory(locale, params.slug);
+
+  const ld = ldModule.generate({
+    description: t('discover.models.description'),
+    title: [cate?.meta.title, t('discover.models.title')].join(' · '),
+    url: urlJoin('/discover/models', 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 discoverService = new DiscoverService();
+  const cates = await discoverService.getProviderList(DEFAULT_LANG);
+  return cates.map((cate) => ({
+    slug: cate.identifier,
+  }));
+};
+
+Page.DisplayName = 'DiscoverModelsCategory';
+
+export default Page;

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

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { DEFAULT_LANG } from '@/const/locale';
+import { DiscoverService } from '@/server/services/discover';
+
+import CategoryContainer from '../../../components/CategoryContainer';
+import Category from '../features/Category';
+
+const Layout = async ({ children }: PropsWithChildren) => {
+  const discoverService = new DiscoverService();
+  const categoryList = await discoverService.getProviderList(DEFAULT_LANG);
+
+  return (
+    <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
+      <CategoryContainer>
+        <Category data={categoryList} />
+      </CategoryContainer>
+      <Flexbox flex={1} gap={16}>
+        {children}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+Layout.displayName = 'DesktopDiscoverModelsLayout';
+
+export default Layout;

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

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

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

@@ -0,0 +1,116 @@
+import { ModelIcon } from '@lobehub/icons';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+import { DiscoverModelItem } from '@/types/discover';
+
+import ModelFeatureTags from '../../../features/ModelFeatureTags';
+
+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};
+  `,
+  id: css`
+    margin-block-end: 0 !important;
+    font-size: 12px;
+    color: ${token.colorTextSecondary};
+  `,
+  tagBlue: css`
+    color: ${token.geekblue};
+    background: ${token.geekblue1};
+  `,
+  tagGreen: css`
+    color: ${token.green};
+    background: ${token.green1};
+  `,
+  time: css`
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin-block-end: 0 !important;
+    font-size: 18px !important;
+    font-weight: bold;
+  `,
+  token: css`
+    font-family: ${token.fontFamilyCode};
+  `,
+}));
+
+export interface ModelCardProps extends DiscoverModelItem, FlexboxProps {
+  showCategory?: boolean;
+}
+
+const ModelCard = memo<ModelCardProps>(({ className, meta, identifier, ...rest }) => {
+  const { description, title, functionCall, vision, tokens } = meta;
+  const { t } = useTranslation('models');
+  const { cx, styles } = useStyles();
+
+  return (
+    <Flexbox className={cx(styles.container, className)} gap={24} key={identifier} {...rest}>
+      <Flexbox
+        gap={12}
+        padding={16}
+        style={{ overflow: 'hidden', position: 'relative' }}
+        width={'100%'}
+      >
+        <Flexbox
+          align={'center'}
+          gap={12}
+          horizontal
+          style={{ overflow: 'hidden', position: 'relative' }}
+          width={'100%'}
+        >
+          <ModelIcon model={identifier} size={32} type={'avatar'} />
+          <Flexbox style={{ overflow: 'hidden', position: 'relative' }}>
+            <Title className={styles.title} ellipsis={{ rows: 1, tooltip: title }} level={3}>
+              {title}
+            </Title>
+            <Paragraph className={styles.id} ellipsis={{ rows: 1 }}>
+              {identifier}
+            </Paragraph>
+          </Flexbox>
+        </Flexbox>
+        {description && (
+          <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+            {t(`${identifier}.description`)}
+          </Paragraph>
+        )}
+
+        <ModelFeatureTags functionCall={functionCall} tokens={tokens} vision={vision} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ModelCard;

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

@@ -0,0 +1,67 @@
+'use client';
+
+import { ProviderIcon } from '@lobehub/icons';
+import { Icon } from '@lobehub/ui';
+import { MenuProps } from 'antd';
+import { useTheme } from 'antd-style';
+import { LayoutPanelTop } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { DiscoverProviderItem } from '@/types/discover';
+
+import CategoryMenu, { ICON_SIZE } from '../../../components/CategoryMenu';
+
+const Category = memo<{ data: DiscoverProviderItem[] }>(({ data }) => {
+  const pathname = usePathname();
+  const selectedKey = useMemo(() => {
+    if (pathname.includes('/discover/models/')) {
+      return pathname.split('/')[3]?.split('?')[0];
+    }
+    return 'all';
+  }, [pathname]);
+  const router = useQueryRoute();
+  const theme = useTheme();
+
+  const { t } = useTranslation('discover');
+  const items: MenuProps['items'] = [
+    {
+      icon: <Icon color={theme.colorTextSecondary} icon={LayoutPanelTop} size={ICON_SIZE} />,
+      key: 'all',
+      label: t('category.plugin.all'),
+    },
+    ...data.map((item) => ({
+      icon: (
+        <ProviderIcon
+          provider={item.identifier}
+          size={18}
+          style={{ color: theme.colorTextSecondary }}
+          type={'mono'}
+        />
+      ),
+      key: item.identifier,
+      label: item.meta.title,
+    })),
+  ];
+
+  return (
+    <CategoryMenu
+      items={items.map((item: any) => ({
+        ...item,
+        label: (
+          <Link href={urlJoin('/discover/models', item.key === 'all' ? '' : item.key)}>
+            {item.label}
+          </Link>
+        ),
+      }))}
+      onSelect={({ key }) => router.push(urlJoin('/discover/models', key === 'all' ? '' : key))}
+      selectedKeys={[selectedKey || 'all']}
+    />
+  );
+});
+
+export default Category;