@lobehub/chat 1.96.20 → 1.97.0

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

@@ -1,152 +0,0 @@
-import { ModelIcon } from '@lobehub/icons';
-import { ActionIcon, Grid } from '@lobehub/ui';
-import { Typography } from 'antd';
-import { createStyles, useResponsive } from 'antd-style';
-import { ChevronRightIcon } from 'lucide-react';
-import Link from 'next/link';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox, FlexboxProps } from 'react-layout-kit';
-import urlJoin from 'url-join';
-
-import { ModelInfoTags } from '@/components/ModelSelect';
-import { DiscoverModelItem } from '@/types/discover';
-import { formatPriceByCurrency, formatTokenNumber } from '@/utils/format';
-
-import Statistic, { type StatisticProps } from '../../../../../components/Statistic';
-
-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 } = meta;
-  const { xl = true } = useResponsive();
-  const { t } = useTranslation('discover');
-  const { styles, theme } = useStyles();
-
-  const isMobile = mobile || !xl;
-
-  const items: StatisticProps[] = [
-    {
-      title: t('models.contentLength'),
-      value: meta?.contextWindowTokens ? formatTokenNumber(meta.contextWindowTokens) : '--',
-    },
-    {
-      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}>
-      <Link 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>
-      </Link>
-      <ModelInfoTags directionReverse {...meta} />
-    </Flexbox>
-  );
-
-  const button = (
-    <Link href={urlJoin('/discover/model', identifier)} style={{ color: 'inherit' }}>
-      <ActionIcon color={theme.colorTextDescription} icon={ChevronRightIcon} />
-    </Link>
-  );
-
-  return (
-    <Flexbox
-      align={'center'}
-      gap={16}
-      horizontal
-      justify={'space-between'}
-      padding={16}
-      wrap={'wrap'}
-    >
-      {isMobile && (
-        <Flexbox align={'center'} horizontal justify={'space-between'}>
-          {header}
-          {button}
-        </Flexbox>
-      )}
-      <Grid
-        align={'center'}
-        flex={1}
-        gap={16}
-        horizontal
-        maxItemWidth={100}
-        rows={isMobile ? 2 : items.length + 1}
-        style={{ minWidth: 240 }}
-      >
-        {!isMobile && header}
-        {items.map((item, index) => (
-          <Statistic
-            align={isMobile ? 'flex-start' : 'center'}
-            gap={4}
-            key={index}
-            valuePlacement={'bottom'}
-            valueStyle={{ fontSize: 18 }}
-            {...item}
-          />
-        ))}
-      </Grid>
-      {!isMobile && button}
-    </Flexbox>
-  );
-});
-
-export default ModelItem;

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

@@ -1,60 +0,0 @@
-'use client';
-
-import { ProviderIcon } from '@lobehub/icons';
-import { Button } from '@lobehub/ui';
-import { Divider } from 'antd';
-import { useTheme } from 'antd-style';
-import { Brain, ChevronsUpDown } from 'lucide-react';
-import { Fragment, 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) => (
-        <Fragment key={item.identifier}>
-          <ModelItem mobile={mobile} {...item} />
-          {index < modelData.length - 1 && <Divider style={{ margin: 0 }} />}
-        </Fragment>
-      ))}
-      {modelData.length > DEFAULT_LENGTH && !showAll && (
-        <Flexbox padding={16}>
-          <Button 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/[variants]/(main)/discover/(detail)/provider/[slug]/page.tsx

@@ -1,126 +0,0 @@
-import { notFound } from 'next/navigation';
-import urlJoin from 'url-join';
-
-import StructuredData from '@/components/StructuredData';
-import { CustomMDX } from '@/components/mdx';
-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, DiscoverPageProps } from '@/types/discover';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-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';
-
-const getSharedProps = async (props: DiscoverPageProps) => {
-  const params = await props.params;
-  const searchParams = await props.searchParams;
-  const { isMobile, locale: hl } = await RouteVariants.getVariantsFromProps(props);
-
-  const { slug: identifier } = params;
-  const { t, locale } = await translation('metadata', searchParams?.hl || hl);
-  const { t: td } = await translation('models', searchParams?.hl || hl);
-  const discoverService = new DiscoverService();
-  const data = await discoverService.getProviderById(locale, identifier);
-  return {
-    data,
-    discoverService,
-    identifier,
-    isMobile,
-    locale,
-    t,
-    td,
-  };
-};
-
-export const generateMetadata = async (props: DiscoverPageProps) => {
-  const { data, t, td, locale, identifier } = await getSharedProps(props);
-  if (!data) return;
-
-  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 (props: DiscoverPageProps) => {
-  const { data, t, td, locale, identifier, discoverService, isMobile } =
-    await getSharedProps(props);
-  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'),
-    locale,
-    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={isMobile} />}
-        mobile={isMobile}
-        sidebar={<InfoSidebar data={data} identifier={identifier} />}
-        /* ↓ cloud slot ↓ */
-
-        /* ↑ cloud slot ↑ */
-      >
-        <ModelList identifier={identifier} mobile={isMobile} modelData={modelData} />
-        {doc && <CustomMDX mobile={isMobile} source={doc.content} />}
-      </DetailLayout>
-    </>
-  );
-};
-
-Page.DisplayName = 'DiscoverProviderDetail';
-
-export default Page;

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

@@ -1,33 +0,0 @@
-import { Grid } from '@lobehub/ui';
-import { memo } from 'react';
-import urlJoin from 'url-join';
-
-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) => (
-        <Card
-          href={urlJoin('/discover/assistant/', item.identifier)}
-          key={item.identifier}
-          showCategory
-          {...item}
-        />
-      ))}
-      {data.slice(8, 16).map((item) => (
-        <Card
-          compact
-          href={urlJoin('/discover/assistant/', item.identifier)}
-          key={item.identifier}
-          showCategory
-          {...item}
-        />
-      ))}
-    </Grid>
-  );
-});
-
-export default AssistantList;

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

@@ -1,19 +0,0 @@
-import { Grid } from '@lobehub/ui';
-import { memo } from 'react';
-import urlJoin from 'url-join';
-
-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) => (
-        <Card {...item} href={urlJoin('/discover/model/', item.identifier)} key={item.identifier} />
-      ))}
-    </Grid>
-  );
-});
-
-export default ModelList;

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

@@ -1,25 +0,0 @@
-import { Grid } from '@lobehub/ui';
-import { memo } from 'react';
-import urlJoin from 'url-join';
-
-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) => (
-        <Card
-          compact
-          showCategory
-          {...item}
-          href={urlJoin('/discover/plugin/', item.identifier)}
-          key={item.identifier}
-        />
-      ))}
-    </Grid>
-  );
-});
-
-export default PluginList;

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

@@ -1,75 +0,0 @@
-import urlJoin from 'url-join';
-
-import StructuredData from '@/components/StructuredData';
-import { ldModule } from '@/server/ld';
-import { metadataModule } from '@/server/metadata';
-import { DiscoverService } from '@/server/services/discover';
-import { translation } from '@/server/translation';
-import { AssistantCategory, DiscoverPageProps } from '@/types/discover';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-import List from '../features/List';
-
-const getSharedProps = async (props: DiscoverPageProps) => {
-  const params = await props.params;
-  const { slug: category, variants } = params;
-  const { isMobile, locale: hl } = await RouteVariants.deserializeVariants(variants);
-  const searchParams = await props.searchParams;
-
-  const { t, locale } = await translation('metadata', searchParams?.hl || hl);
-  const { t: td } = await translation('discover', searchParams?.hl || hl);
-  return {
-    category,
-    isMobile,
-    locale,
-    t,
-    td,
-  };
-};
-
-export const generateMetadata = async (props: DiscoverPageProps) => {
-  const { locale, t, td, category } = await getSharedProps(props);
-  return metadataModule.generate({
-    alternate: true,
-    description: t('discover.assistants.description'),
-    locale,
-    title: [td(`category.assistant.${category}`), t('discover.assistants.title')].join(' · '),
-    url: urlJoin('/discover/assistants', category),
-  });
-};
-
-const Page = async (props: DiscoverPageProps<AssistantCategory>) => {
-  const { locale, t, td, category, isMobile } = await getSharedProps(props);
-
-  const discoverService = new DiscoverService();
-  const items = await discoverService.getAssistantCategory(locale, category as AssistantCategory);
-
-  const ld = ldModule.generate({
-    description: t('discover.assistants.description'),
-    locale,
-    title: [td(`category.assistant.${category}`), t('discover.assistants.title')].join(' · '),
-    url: urlJoin('/discover/assistants', category),
-    webpage: {
-      enable: true,
-      search: '/discover/search',
-    },
-  });
-
-  return (
-    <>
-      <StructuredData ld={ld} />
-      <List category={category} items={items} mobile={isMobile} />
-    </>
-  );
-};
-
-export const generateStaticParams = async () => {
-  const cates = Object.values(AssistantCategory);
-  return cates.map((cate) => ({
-    slug: cate,
-  }));
-};
-
-Page.DisplayName = 'DiscoverAssistantsCategory';
-
-export default Page;

package/src/app/[variants]/(main)/discover/(list)/assistants/features/Card.tsx

@@ -1,195 +0,0 @@
-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 { useRouter } from 'next/navigation';
-import qs from 'query-string';
-import { CSSProperties, memo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
-import urlJoin from 'url-join';
-
-import { DiscoverAssistantItem } from '@/types/discover';
-
-import CardBanner from '../../../components/CardBanner';
-import GitHubAvatar from '../../../components/GitHubAvatar';
-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`
-    position: relative;
-
-    overflow: hidden;
-
-    height: 100%;
-    min-height: 162px;
-    border-radius: ${token.borderRadiusLG}px;
-
-    background: ${token.colorBgContainer};
-    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};
-  `,
-
-  time: css`
-    color: ${token.colorTextDescription};
-  `,
-  title: css`
-    margin-block-end: 0 !important;
-    font-weight: bold;
-  `,
-}));
-
-export interface AssistantCardProps
-  extends Omit<DiscoverAssistantItem, 'suggestions' | 'socialData' | 'config'> {
-  className?: string;
-  compact?: boolean;
-  href: string;
-  showCategory?: boolean;
-  style?: CSSProperties;
-}
-
-const AssistantCard = memo<AssistantCardProps>(
-  ({ showCategory, className, meta, createdAt, author, compact, style, href }) => {
-    const { avatar, title, description, tags = [], category } = meta;
-    const { cx, styles, theme } = useStyles();
-    const categoryItem = useCategoryItem(category, 12);
-    const router = useRouter();
-    const user = (
-      <Flexbox
-        align={'center'}
-        gap={6}
-        horizontal
-        style={{ color: theme.colorTextSecondary, fontSize: 12 }}
-      >
-        <GitHubAvatar size={18} username={author} />
-        <span>{author}</span>
-      </Flexbox>
-    );
-
-    return (
-      <Flexbox className={cx(styles.container, className)} gap={24} style={style}>
-        {!compact && (
-          <div
-            onClick={() => {
-              router.push(href);
-            }}
-          >
-            <CardBanner avatar={avatar} />
-          </div>
-        )}
-        <Flexbox gap={12} padding={16}>
-          <Link href={href}>
-            <Flexbox gap={12}>
-              <Flexbox
-                align={compact ? 'flex-start' : 'flex-end'}
-                gap={16}
-                horizontal
-                justify={'space-between'}
-                style={{ position: 'relative' }}
-                width={'100%'}
-              >
-                <Flexbox
-                  gap={8}
-                  style={{
-                    overflow: 'hidden',
-                    paddingTop: compact ? 4 : 0,
-                    position: 'relative',
-                  }}
-                >
-                  <Title
-                    className={styles.title}
-                    ellipsis={{ rows: 1, tooltip: title }}
-                    level={3}
-                    style={{ fontSize: compact ? 16 : 18 }}
-                  >
-                    {title}
-                  </Title>
-                  {compact && user}
-                </Flexbox>
-
-                {compact ? (
-                  <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 avatar={avatar} size={56} style={{ display: 'block' }} title={title} />
-                  </Center>
-                )}
-              </Flexbox>
-
-              {!compact && (
-                <Flexbox gap={8} horizontal style={{ fontSize: 12 }}>
-                  {user}
-                  <time className={styles.time} dateTime={new Date(createdAt).toISOString()}>
-                    {createdAt}
-                  </time>
-                </Flexbox>
-              )}
-              <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
-                {description}
-              </Paragraph>
-            </Flexbox>
-          </Link>
-
-          <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
-            {showCategory && categoryItem ? (
-              <Link href={urlJoin('/discover/assistants', 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: 'assistants' },
-                    url: '/discover/search',
-                  });
-                  return (
-                    <Link href={url} key={index}>
-                      <Tag>{startCase(tag).trim()}</Tag>
-                    </Link>
-                  );
-                })
-            )}
-          </Flexbox>
-        </Flexbox>
-      </Flexbox>
-    );
-  },
-);
-
-export default AssistantCard;