@lobehub/chat 1.17.6 → 1.18.0

package/src/app/(main)/discover/(detail)/provider/[slug]/features/ModelList/ModelItem.tsx

@@ -0,0 +1,148 @@
+import { ModelIcon } from '@lobehub/icons';
+import { ActionIcon, Grid } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { ChevronRightIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import InterceptingLink from '@/components/InterceptingLink';
+import { DiscoverModelItem } from '@/types/discover';
+import { formatPriceByCurrency, formatTokenNumber } from '@/utils/format';
+
+import Statistic, { type StatisticProps } from '../../../../../components/Statistic';
+import ModelFeatureTags from '../../../../../features/ModelFeatureTags';
+
+const { Paragraph, Title } = Typography;
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  banner: css`
+    opacity: ${isDarkMode ? 0.9 : 0.4};
+  `,
+  desc: css`
+    margin-block-end: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+  id: css`
+    margin-block-end: 0 !important;
+    font-size: 12px;
+    color: ${token.colorTextSecondary};
+  `,
+  title: css`
+    margin-block-end: 0 !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+  `,
+  token: css`
+    font-family: ${token.fontFamilyCode};
+  `,
+}));
+
+export interface SuggestionItemProps
+  extends Omit<DiscoverModelItem, 'suggestions' | 'socialData' | 'providers'>,
+    FlexboxProps {
+  mobile?: boolean;
+}
+
+const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
+  const { title, tokens, vision, functionCall } = meta;
+  const { t } = useTranslation('discover');
+  const { styles, theme } = useStyles();
+
+  const items: StatisticProps[] = [
+    {
+      title: t('models.contentLength'),
+      value: meta?.tokens ? formatTokenNumber(meta.tokens) : '--',
+    },
+    {
+      title: t('models.providerInfo.maxOutput'),
+      tooltip: t('models.providerInfo.maxOutputTooltip'),
+      value: meta?.maxOutput ? formatTokenNumber(meta.maxOutput) : '--',
+    },
+    {
+      title: t('models.providerInfo.input'),
+      tooltip: t('models.providerInfo.inputTooltip'),
+      value: meta?.pricing?.input
+        ? '$' + formatPriceByCurrency(meta.pricing.input, meta.pricing?.currency)
+        : '--',
+    },
+    {
+      title: t('models.providerInfo.output'),
+      tooltip: t('models.providerInfo.outputTooltip'),
+      value: meta?.pricing?.output
+        ? '$' + formatPriceByCurrency(meta.pricing.output, meta.pricing?.currency)
+        : '--',
+    },
+    /* ↓ cloud slot ↓ */
+    /* ↑ cloud slot ↑ */
+  ];
+
+  const header = (
+    <Flexbox gap={12}>
+      <InterceptingLink href={urlJoin('/discover/model', identifier)} style={{ color: 'inherit' }}>
+        <Flexbox align={'center'} gap={12} horizontal width={'100%'}>
+          <ModelIcon model={identifier} size={36} type={'avatar'} />
+          <Flexbox style={{ overflow: 'hidden' }}>
+            <Title className={styles.title} ellipsis={{ rows: 1, tooltip: title }} level={3}>
+              {title}
+            </Title>
+            <Paragraph className={styles.id} ellipsis={{ rows: 1 }}>
+              {identifier}
+            </Paragraph>
+          </Flexbox>
+        </Flexbox>
+      </InterceptingLink>
+      <ModelFeatureTags functionCall={functionCall} tokens={tokens} vision={vision} />
+    </Flexbox>
+  );
+
+  const button = (
+    <InterceptingLink href={urlJoin('/discover/model', identifier)} style={{ color: 'inherit' }}>
+      <ActionIcon color={theme.colorTextDescription} icon={ChevronRightIcon} />
+    </InterceptingLink>
+  );
+
+  return (
+    <Flexbox
+      align={'center'}
+      gap={16}
+      horizontal
+      justify={'space-between'}
+      padding={16}
+      wrap={'wrap'}
+    >
+      {mobile && (
+        <Flexbox align={'center'} horizontal justify={'space-between'}>
+          {header}
+          {button}
+        </Flexbox>
+      )}
+      <Grid
+        align={'center'}
+        flex={1}
+        gap={16}
+        horizontal
+        maxItemWidth={100}
+        rows={mobile ? 2 : items.length + 1}
+        style={{ minWidth: 240 }}
+      >
+        {!mobile && header}
+        {items.map((item, index) => (
+          <Statistic
+            align={mobile ? 'flex-start' : 'center'}
+            gap={4}
+            key={index}
+            valuePlacement={'bottom'}
+            valueStyle={{ fontSize: 18 }}
+            {...item}
+          />
+        ))}
+      </Grid>
+      {!mobile && button}
+    </Flexbox>
+  );
+});
+
+export default ModelItem;

package/src/app/(main)/discover/(detail)/provider/[slug]/features/ModelList/index.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { ProviderIcon } from '@lobehub/icons';
+import { Icon } from '@lobehub/ui';
+import { Button, Divider } from 'antd';
+import { useTheme } from 'antd-style';
+import { Brain, ChevronsUpDown } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { DiscoverModelItem } from '@/types/discover';
+
+import HighlightBlock from '../../../../features/HighlightBlock';
+import ModelItem from './ModelItem';
+
+const DEFAULT_LENGTH = 4;
+
+interface ModelListProps {
+  identifier: string;
+  mobile?: boolean;
+  modelData: DiscoverModelItem[];
+}
+
+const ModelList = memo<ModelListProps>(({ mobile, modelData, identifier }) => {
+  const [showAll, setShowAll] = useState(false);
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+
+  const list = showAll ? modelData : modelData.slice(0, DEFAULT_LENGTH);
+
+  return (
+    <HighlightBlock
+      avatar={<ProviderIcon provider={identifier} size={300} type={'avatar'} />}
+      icon={Brain}
+      justify={'space-between'}
+      style={{ background: theme.colorBgContainer }}
+      title={t('providers.supportedModels')}
+    >
+      {list.map((item, index) => (
+        <>
+          <ModelItem key={item.identifier} mobile={mobile} {...item} />
+          {index < modelData.length - 1 && <Divider key={index} style={{ margin: 0 }} />}
+        </>
+      ))}
+      {modelData.length > DEFAULT_LENGTH && !showAll && (
+        <Flexbox padding={16}>
+          <Button icon={<Icon icon={ChevronsUpDown} />} onClick={() => setShowAll(true)}>
+            {t('providers.showAllModels')}{' '}
+            <span style={{ color: theme.colorTextDescription }}>
+              (+{modelData.length - DEFAULT_LENGTH})
+            </span>
+          </Button>
+        </Flexbox>
+      )}
+    </HighlightBlock>
+  );
+});
+
+export default ModelList;

package/src/app/(main)/discover/(detail)/provider/[slug]/features/ProviderConfig.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Button, Dropdown } from 'antd';
+import { createStyles } from 'antd-style';
+import { ChevronDownIcon, SquareArrowOutUpRight } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FlexboxProps } from 'react-layout-kit';
+
+import { useOpenSettings } from '@/hooks/useInterceptingRoutes';
+import { SettingsTabs } from '@/store/global/initialState';
+import { DiscoverProviderItem } from '@/types/discover';
+
+const useStyles = createStyles(({ css }) => ({
+  button: css`
+    button {
+      width: 100%;
+    }
+  `,
+}));
+
+interface ProviderConfigProps extends FlexboxProps {
+  data: DiscoverProviderItem;
+  identifier: string;
+}
+
+const ProviderConfig = memo<ProviderConfigProps>(({ data }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('discover');
+  const openSettings = useOpenSettings(SettingsTabs.LLM);
+
+  const icon = <Icon icon={SquareArrowOutUpRight} size={{ fontSize: 16 }} />;
+
+  const items = [
+    data.meta?.url && {
+      icon,
+      key: 'officialSite',
+      label: (
+        <Link href={data.meta.url} target={'_blank'}>
+          {t('providers.officialSite')}
+        </Link>
+      ),
+    },
+    data.meta?.modelsUrl && {
+      icon,
+      key: 'modelSite',
+      label: (
+        <Link href={data.meta.modelsUrl} target={'_blank'}>
+          {t('providers.modelSite')}
+        </Link>
+      ),
+    },
+  ].filter(Boolean) as any;
+
+  if (!items || items?.length === 0)
+    return (
+      <Button onClick={openSettings} size={'large'} style={{ flex: 1 }} type={'primary'}>
+        {t('providers.config')}
+      </Button>
+    );
+
+  return (
+    <Dropdown.Button
+      className={styles.button}
+      icon={<Icon icon={ChevronDownIcon} />}
+      menu={{ items }}
+      onClick={openSettings}
+      overlayStyle={{ minWidth: 267 }}
+      size={'large'}
+      style={{ flex: 1, width: 'unset' }}
+      type={'primary'}
+    >
+      {t('providers.config')}
+    </Dropdown.Button>
+  );
+});
+
+export default ProviderConfig;

package/src/app/(main)/discover/(detail)/provider/[slug]/page.tsx

@@ -0,0 +1,116 @@
+import { notFound } from 'next/navigation';
+import urlJoin from 'url-join';
+
+import StructuredData from '@/components/StructuredData';
+import { CustomMDX } from '@/components/mdx';
+import { Locales } from '@/locales/resources';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { DiscoverService } from '@/server/services/discover';
+import { DocService } from '@/server/services/doc';
+import { translation } from '@/server/translation';
+import { DiscoverModelItem } from '@/types/discover';
+import { isMobileDevice } from '@/utils/responsive';
+
+import DetailLayout from '../../features/DetailLayout';
+import Actions from './features/Actions';
+import Header from './features/Header';
+import InfoSidebar from './features/InfoSidebar';
+import ModelList from './features/ModelList';
+
+type Props = { params: { slug: string }; searchParams: { hl?: Locales } };
+
+export const generateMetadata = async ({ params, searchParams }: Props) => {
+  const { slug: identifier } = params;
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const { t: td } = await translation('models', searchParams?.hl);
+
+  const discoverService = new DiscoverService();
+  const data = await discoverService.getProviderById(locale, identifier);
+  if (!data) return notFound();
+
+  const { meta, createdAt, models } = data;
+
+  return {
+    authors: [
+      { name: meta.title },
+      { name: 'LobeHub', url: 'https://github.com/lobehub' },
+      { name: 'LobeChat', url: 'https://github.com/lobehub/lobe-chat' },
+    ],
+    ...metadataModule.generate({
+      alternate: true,
+      description: td(`${identifier}.description`) || t('discover.providers.description'),
+      locale,
+      tags: models || [],
+      title: [meta.title, t('discover.providers.title')].join(' · '),
+      url: urlJoin('/discover/provider', identifier),
+    }),
+    other: {
+      'article:author': meta.title,
+      'article:published_time': createdAt
+        ? new Date(createdAt).toISOString()
+        : new Date().toISOString(),
+      'robots': 'index,follow,max-image-preview:large',
+    },
+  };
+};
+
+const Page = async ({ params, searchParams }: Props) => {
+  const { slug: identifier } = params;
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const { t: td } = await translation('models', searchParams?.hl);
+  const mobile = isMobileDevice();
+
+  const discoverService = new DiscoverService();
+  const data = await discoverService.getProviderById(locale, identifier);
+  if (!data) return notFound();
+
+  const docService = new DocService();
+
+  const { meta, createdAt, models } = data;
+
+  let modelData: DiscoverModelItem[] = [];
+  if (models && models?.length > 0) {
+    modelData = await discoverService.getModelByIds(locale, models);
+  }
+
+  const doc = await docService.getDocByPath(locale, `usage/providers/${identifier}`);
+
+  const ld = ldModule.generate({
+    article: {
+      author: [meta.title],
+      enable: true,
+      identifier,
+      tags: models || [],
+    },
+    date: createdAt ? new Date(createdAt).toISOString() : new Date().toISOString(),
+    description: td(`${identifier}.description`) || t('discover.providers.description'),
+    title: [meta.title, t('discover.providers.title')].join(' · '),
+    url: urlJoin('/discover/provider', identifier),
+    webpage: {
+      enable: true,
+      search: '/discover/search',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <DetailLayout
+        actions={<Actions data={data} identifier={identifier} />}
+        header={<Header data={data} identifier={identifier} mobile={mobile} />}
+        mobile={mobile}
+        sidebar={<InfoSidebar data={data} identifier={identifier} />}
+        /* ↓ cloud slot ↓ */
+        /* ↑ cloud slot ↑ */
+      >
+        <ModelList identifier={identifier} mobile={mobile} modelData={modelData} />
+        {doc && <CustomMDX mobile={mobile} source={doc.content} />}
+      </DetailLayout>
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverProviderDetail';
+
+export default Page;

package/src/app/(main)/discover/(list)/(home)/Client.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DiscoverAssistantItem, DiscoverModelItem, DiscoverPlugintem } from '@/types/discover';
+
+import Title from '../../components/Title';
+import AssistantList from './features/AssistantList';
+import ModelList from './features/ModelList';
+import PluginList from './features/PluginList';
+
+interface ClientProps {
+  assistantList: DiscoverAssistantItem[];
+  modelList: DiscoverModelItem[];
+  pluginList: DiscoverPlugintem[];
+}
+
+const Client = memo<ClientProps>(({ modelList, assistantList, pluginList }) => {
+  const { t } = useTranslation('discover');
+  return (
+    <>
+      <Title more={t('home.more')} moreLink={'/discover/assistants'}>
+        {t('home.featuredAssistants')}
+      </Title>
+      <AssistantList data={assistantList} />
+      <div />
+      <Title more={t('home.more')} moreLink={'/discover/plugins'}>
+        {t('home.featuredTools')}
+      </Title>
+      <PluginList data={pluginList} />
+      <div />
+      <Title more={t('home.more')} moreLink={'/discover/models'}>
+        {t('home.featuredModels')}
+      </Title>
+      <div />
+      <ModelList data={modelList} />
+    </>
+  );
+});
+
+export default Client;

package/src/app/(main)/discover/(list)/(home)/features/AssistantList.tsx

@@ -0,0 +1,33 @@
+import { Grid } from '@lobehub/ui';
+import { memo } from 'react';
+import urlJoin from 'url-join';
+
+import InterceptingLink from '@/components/InterceptingLink';
+import { DiscoverAssistantItem } from '@/types/discover';
+
+import Card from '../../assistants/features/Card';
+
+const AssistantList = memo<{ data: DiscoverAssistantItem[] }>(({ data }) => {
+  return (
+    <Grid maxItemWidth={280} rows={4}>
+      {data.slice(0, 8).map((item) => (
+        <InterceptingLink
+          href={urlJoin('/discover/assistant/', item.identifier)}
+          key={item.identifier}
+        >
+          <Card showCategory {...item} />
+        </InterceptingLink>
+      ))}
+      {data.slice(8, 16).map((item) => (
+        <InterceptingLink
+          href={urlJoin('/discover/assistant/', item.identifier)}
+          key={item.identifier}
+        >
+          <Card showCategory variant={'compact'} {...item} />
+        </InterceptingLink>
+      ))}
+    </Grid>
+  );
+});
+
+export default AssistantList;

package/src/app/(main)/discover/(list)/(home)/features/ModelList.tsx

@@ -0,0 +1,22 @@
+import { Grid } from '@lobehub/ui';
+import { memo } from 'react';
+import urlJoin from 'url-join';
+
+import InterceptingLink from '@/components/InterceptingLink';
+import { DiscoverModelItem } from '@/types/discover';
+
+import Card from '../../models/features/Card';
+
+const ModelList = memo<{ data: DiscoverModelItem[] }>(({ data }) => {
+  return (
+    <Grid maxItemWidth={280} rows={4}>
+      {data.map((item) => (
+        <InterceptingLink href={urlJoin('/discover/model/', item.identifier)} key={item.identifier}>
+          <Card {...item} />
+        </InterceptingLink>
+      ))}
+    </Grid>
+  );
+});
+
+export default ModelList;

package/src/app/(main)/discover/(list)/(home)/features/PluginList.tsx

@@ -0,0 +1,25 @@
+import { Grid } from '@lobehub/ui';
+import { memo } from 'react';
+import urlJoin from 'url-join';
+
+import InterceptingLink from '@/components/InterceptingLink';
+import { DiscoverPlugintem } from '@/types/discover';
+
+import Card from '../../plugins/features/Card';
+
+const PluginList = memo<{ data: DiscoverPlugintem[] }>(({ data }) => {
+  return (
+    <Grid maxItemWidth={280} rows={4}>
+      {data.map((item) => (
+        <InterceptingLink
+          href={urlJoin('/discover/plugin/', item.identifier)}
+          key={item.identifier}
+        >
+          <Card showCategory variant={'compact'} {...item} />
+        </InterceptingLink>
+      ))}
+    </Grid>
+  );
+});
+
+export default PluginList;

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

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

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

@@ -0,0 +1,54 @@
+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 Client from './Client';
+
+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.description'),
+    locale,
+    title: t('discover.title'),
+    url: '/discover',
+  });
+};
+
+const Page = async ({ searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const ld = ldModule.generate({
+    description: t('discover.description'),
+    title: t('discover.title'),
+    url: '/discover',
+    webpage: {
+      enable: true,
+      search: '/discover/search',
+    },
+  });
+
+  const discoverService = new DiscoverService();
+  const assistantList = await discoverService.getAssistantList(locale);
+  const pluginList = await discoverService.getPluginList(locale);
+  const modelList = await discoverService.getModelList(locale);
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <Client
+        assistantList={assistantList.slice(0, 16)}
+        modelList={modelList.slice(0, 8)}
+        pluginList={pluginList.slice(0, 8)}
+      />
+    </>
+  );
+};
+
+Page.DisplayName = 'Discover';
+
+export default Page;