@lobehub/chat 1.17.6 → 1.18.0

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/ParameterList/index.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { Collapse, Icon, Tag } from '@lobehub/ui';
+import {
+  ChartColumnBig,
+  Delete,
+  FileMinus,
+  LucideIcon,
+  MessageSquareText,
+  Thermometer,
+} from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { DiscoverModelItem } from '@/types/discover';
+import { formatTokenNumber } from '@/utils/format';
+
+import Block from '../../../../features/Block';
+import ParameterItem from './ParameterItem';
+
+interface ParameterListProps {
+  data: DiscoverModelItem;
+  identifier: string;
+}
+
+interface Parameter {
+  defaultValue: string | number;
+  desc: string;
+  icon: LucideIcon;
+  key: string;
+  label: string;
+  range?: (string | number)[];
+  type: string;
+}
+
+const ParameterList = memo<ParameterListProps>(({ data }) => {
+  const { t } = useTranslation('discover');
+
+  const items: Parameter[] = [
+    {
+      defaultValue: 1,
+      desc: t('models.parameterList.temperature.desc'),
+      icon: Thermometer,
+      key: 'temperature',
+      label: t('models.parameterList.temperature.title'),
+      range: [0, 2],
+      type: 'float',
+    },
+    {
+      defaultValue: 1,
+      desc: t('models.parameterList.top_p.desc'),
+      icon: ChartColumnBig,
+      key: 'top_p',
+      label: t('models.parameterList.top_p.title'),
+      range: [0, 1],
+      type: 'float',
+    },
+    {
+      defaultValue: 0,
+      desc: t('models.parameterList.presence_penalty.desc'),
+      icon: Delete,
+      key: 'presence_penalty',
+      label: t('models.parameterList.presence_penalty.title'),
+      range: [-2, 2],
+      type: 'float',
+    },
+    {
+      defaultValue: 0,
+      desc: t('models.parameterList.frequency_penalty.desc'),
+      icon: FileMinus,
+      key: 'frequency_penalty',
+      label: t('models.parameterList.frequency_penalty.title'),
+      range: [-2, 2],
+      type: 'float',
+    },
+    {
+      defaultValue: '--',
+      desc: t('models.parameterList.max_tokens.desc'),
+      icon: MessageSquareText,
+      key: 'max_tokens',
+      label: t('models.parameterList.max_tokens.title'),
+      range: data?.meta?.maxOutput ? [0, formatTokenNumber(data.meta.maxOutput)] : undefined,
+      type: 'int',
+    },
+  ];
+
+  return (
+    <Block title={t('models.parameterList.title')}>
+      <Collapse
+        defaultActiveKey={items.map((item) => item.key)}
+        expandIconPosition={'right'}
+        gap={16}
+        items={items.map((item) => ({
+          children: <ParameterItem {...item} />,
+          key: item.key,
+          label: (
+            <Flexbox align={'center'} gap={8} horizontal>
+              <Icon icon={item.icon} size={{ fontSize: 16 }} />
+              {item.label}
+              <Tag>{item.key}</Tag>
+            </Flexbox>
+          ),
+        }))}
+      />
+    </Block>
+  );
+});
+
+export default ParameterList;

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/ProviderList/ProviderItem.tsx

@@ -0,0 +1,152 @@
+import { ModelTag, ProviderCombine } from '@lobehub/icons';
+import { ActionIcon, Grid, Icon, Tooltip } from '@lobehub/ui';
+import { Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import { BadgeCheck, BookIcon, ChevronRightIcon, KeyIcon } from 'lucide-react';
+import Link from 'next/link';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import InterceptingLink from '@/components/InterceptingLink';
+import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
+import { BASE_PROVIDER_DOC_URL } from '@/const/url';
+import { DiscoverProviderItem } from '@/types/discover';
+import { formatPriceByCurrency, formatTokenNumber } from '@/utils/format';
+
+import Statistic, { type StatisticProps } from '../../../../../components/Statistic';
+
+const useStyles = createStyles(({ css, token }) => ({
+  tagGreen: css`
+    color: ${token.colorSuccess};
+    background: ${token.colorSuccessBgHover};
+  `,
+}));
+
+interface ProviderItemProps extends DiscoverProviderItem {
+  mobile?: boolean;
+  modelId: string;
+}
+
+const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) => {
+  const { t } = useTranslation('discover');
+  const { styles, theme } = useStyles();
+  const isLobeHub = identifier === 'lobehub';
+
+  const model = useMemo(() => {
+    const prividerItem = DEFAULT_MODEL_PROVIDER_LIST.find((v) => v.id === identifier);
+    if (!prividerItem) return;
+    return prividerItem.chatModels.find((m) => m.id.toLowerCase().includes(modelId.toLowerCase()));
+  }, [identifier, modelId]);
+
+  const items: StatisticProps[] = [
+    {
+      title: t('models.contentLength'),
+      value: model?.tokens ? formatTokenNumber(model.tokens) : '--',
+    },
+    {
+      title: t('models.providerInfo.maxOutput'),
+      tooltip: t('models.providerInfo.maxOutputTooltip'),
+      value: model?.maxOutput ? formatTokenNumber(model.maxOutput) : '--',
+    },
+    {
+      title: t('models.providerInfo.input'),
+      tooltip: t('models.providerInfo.inputTooltip'),
+      value: model?.pricing?.input
+        ? '$' + formatPriceByCurrency(model.pricing.input, model.pricing?.currency)
+        : '--',
+    },
+    {
+      title: t('models.providerInfo.output'),
+      tooltip: t('models.providerInfo.outputTooltip'),
+      value: model?.pricing?.output
+        ? '$' + formatPriceByCurrency(model.pricing.output, model.pricing?.currency)
+        : '--',
+    },
+    /* ↓ cloud slot ↓ */
+    /* ↑ cloud slot ↑ */
+  ];
+
+  const header = (
+    <Flexbox gap={4} style={{ minWidth: 240 }}>
+      <InterceptingLink
+        href={urlJoin('/discover/provider', identifier)}
+        style={{ color: 'inherit' }}
+      >
+        <ProviderCombine provider={identifier} size={24} />
+      </InterceptingLink>
+      <Flexbox align={'center'} gap={6} horizontal>
+        <ModelTag model={modelId} style={{ background: theme.colorFillQuaternary, margin: 0 }} />
+        {isLobeHub && (
+          <Tooltip title={t('models.providerInfo.officialTooltip')}>
+            <Tag
+              bordered={false}
+              className={styles.tagGreen}
+              icon={<Icon icon={BadgeCheck} />}
+              style={{ margin: 0 }}
+            />
+          </Tooltip>
+        )}
+        {!isLobeHub && (
+          <Tooltip title={t('models.providerInfo.apiTooltip')}>
+            <Tag bordered={false} icon={<Icon icon={KeyIcon} />} style={{ margin: 0 }} />
+          </Tooltip>
+        )}
+        <Tooltip title={t('models.guide')}>
+          <Link href={urlJoin(BASE_PROVIDER_DOC_URL, identifier)} target={'_blank'}>
+            <Tag bordered={false} icon={<Icon icon={BookIcon} />} style={{ margin: 0 }} />
+          </Link>
+        </Tooltip>
+      </Flexbox>
+    </Flexbox>
+  );
+
+  const button = (
+    <InterceptingLink href={urlJoin('/discover/provider', 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 ProviderItem;

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/ProviderList/index.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { ModelIcon } from '@lobehub/icons';
+import { Divider } from 'antd';
+import { useTheme } from 'antd-style';
+import { BrainCircuit } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DiscoverProviderItem } from '@/types/discover';
+
+import HighlightBlock from '../../../../features/HighlightBlock';
+import ProviderItem from './ProviderItem';
+
+interface ProviderListProps {
+  data: DiscoverProviderItem[];
+  identifier: string;
+  mobile?: boolean;
+}
+
+const ProviderList = memo<ProviderListProps>(({ mobile, data, identifier }) => {
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+
+  if (data?.length === 0) return null;
+
+  return (
+    <HighlightBlock
+      avatar={<ModelIcon model={identifier} size={300} type={'avatar'} />}
+      icon={BrainCircuit}
+      justify={'space-between'}
+      style={{ background: theme.colorBgContainer }}
+      title={t('models.supportedProviders')}
+    >
+      {data.map((item, index) => (
+        <>
+          <ProviderItem key={item.identifier} mobile={mobile} modelId={identifier} {...item} />
+          {index < data.length - 1 && <Divider key={index} style={{ margin: 0 }} />}
+        </>
+      ))}
+    </HighlightBlock>
+  );
+});
+
+export default ProviderList;

package/src/app/(main)/discover/(detail)/model/[...slugs]/page.tsx

@@ -0,0 +1,114 @@
+import { notFound } from 'next/navigation';
+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 { DiscoverProviderItem } 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 ParameterList from './features/ParameterList';
+import ProviderList from './features/ProviderList';
+
+type Props = { params: { slugs: string[] }; searchParams: { hl?: Locales } };
+
+export const generateMetadata = async ({ params, searchParams }: Props) => {
+  const { slugs } = params;
+  const identifier = decodeURIComponent(slugs.join('/'));
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const { t: td } = await translation('models', searchParams?.hl);
+
+  const discoverService = new DiscoverService();
+  const data = await discoverService.getModelById(locale, identifier);
+  if (!data) return notFound();
+
+  const { meta, createdAt, providers } = data;
+
+  return {
+    authors: [
+      { name: meta.title },
+      { name: 'LobeHub', url: 'https://github.com/lobehub' },
+      { name: 'LobeChat', url: 'https://github.com/lobehub/lobe-chat' },
+    ],
+    webpage: {
+      enable: true,
+      search: '/discover/search',
+    },
+    ...metadataModule.generate({
+      alternate: true,
+      description: td(`${identifier}.description`) || t('discover.models.description'),
+      locale,
+      tags: providers || [],
+      title: [meta.title, t('discover.models.title')].join(' · '),
+      url: urlJoin('/discover/model', 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 { slugs } = params;
+
+  const identifier = decodeURIComponent(slugs.join('/'));
+  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.getModelById(locale, identifier);
+  if (!data) return notFound();
+
+  const { meta, createdAt, providers } = data;
+
+  let providerData: DiscoverProviderItem[] = [];
+  if (providers && providers?.length > 0) {
+    providerData = await discoverService.getProviderByIds(locale, providers);
+  }
+
+  const ld = ldModule.generate({
+    article: {
+      author: [meta.title],
+      enable: true,
+      identifier,
+      tags: providers || [],
+    },
+    date: createdAt ? new Date(createdAt).toISOString() : new Date().toISOString(),
+    description: td(`${identifier}.description`) || t('discover.models.description'),
+    title: [meta.title, t('discover.models.title')].join(' · '),
+    url: urlJoin('/discover/model', identifier),
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <DetailLayout
+        actions={<Actions data={data} identifier={identifier} providerData={providerData} />}
+        header={<Header data={data} identifier={identifier} mobile={mobile} />}
+        mobile={mobile}
+        sidebar={<InfoSidebar data={data} identifier={identifier} mobile={mobile} />}
+        /* ↓ cloud slot ↓ */
+        /* ↑ cloud slot ↑ */
+      >
+        <ProviderList data={providerData} identifier={identifier} mobile={mobile} />
+        <ParameterList data={data} identifier={identifier} />
+      </DetailLayout>
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverModelDetail';
+
+export default Page;

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

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

package/src/app/(main)/discover/(detail)/plugin/[slug]/features/Actions.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { OFFICIAL_URL } from '@/const/url';
+import { DiscoverPlugintem } from '@/types/discover';
+
+import ShareButton from '../../../features/ShareButton';
+import InstallTool from './InstallPlugin';
+
+interface PluginActionsProps extends FlexboxProps {
+  data: DiscoverPlugintem;
+  identifier: string;
+}
+
+const PluginActions = memo<PluginActionsProps>(({ identifier, data }) => {
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      <InstallTool identifier={identifier} />
+      <ShareButton
+        meta={{
+          avatar: data.meta.avatar,
+          desc: data.meta.description,
+          hashtags: data.meta.tags,
+          title: data.meta.title,
+          url: urlJoin(OFFICIAL_URL, '/discover/plugin', identifier),
+        }}
+      />
+    </Flexbox>
+  );
+});
+
+export default PluginActions;

package/src/app/(main)/discover/(detail)/plugin/[slug]/features/Header.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Avatar, Icon, Tag } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { startCase } from 'lodash-es';
+import { ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+import qs from 'query-string';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { DiscoverPlugintem } from '@/types/discover';
+
+import Back from '../../../features/Back';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  tag: css`
+    color: ${token.colorTextSecondary};
+    background: ${token.colorFillSecondary};
+    border: none;
+  `,
+  time: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin-block: 0;
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 1.2;
+  `,
+}));
+
+interface HeaderProps {
+  data: DiscoverPlugintem;
+  identifier: string;
+  mobile?: boolean;
+}
+
+const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
+  const { styles, theme } = useStyles();
+  const { t } = useTranslation('discover');
+
+  return (
+    <Flexbox gap={12} width={'100%'}>
+      {!mobile && <Back href={'/discover/plugins'} />}
+      <Flexbox align={'center'} gap={8} horizontal justify={'space-between'} width={'100%'}>
+        <Flexbox align={'center'} gap={16} horizontal justify={'flex-start'}>
+          <Avatar
+            alt={identifier}
+            animation
+            avatar={data.meta.avatar}
+            background={theme.colorFillTertiary}
+            size={48}
+            style={{ flex: 'none' }}
+          />
+          <Flexbox gap={4}>
+            <h1 className={styles.title}>{data.meta.title}</h1>
+            <Flexbox align={'center'} gap={8} horizontal>
+              <Link href={data.homepage} target={'_blank'}>
+                @{data.author}
+              </Link>
+              <time className={styles.time} dateTime={new Date(data.createdAt).toISOString()}>
+                {data.createdAt}
+              </time>
+            </Flexbox>
+          </Flexbox>
+        </Flexbox>
+        {!mobile && (
+          <Flexbox align={'center'} gap={4} horizontal justify={'flex-end'}>
+            <Link href={'/discover/plugins'}>
+              <Button className={styles.tag} shape={'round'} size={'small'}>
+                {t('tab.plugins')}
+              </Button>
+            </Link>
+            {data.meta?.category && (
+              <>
+                <Icon color={theme.colorTextSecondary} icon={ChevronRight} />
+                <Link href={urlJoin('/discover/plugins', data.meta?.category || '')}>
+                  <Button className={styles.tag} shape={'round'} size={'small'}>
+                    {t(`category.plugin.${data.meta?.category}` as any)}
+                  </Button>
+                </Link>
+              </>
+            )}
+          </Flexbox>
+        )}
+      </Flexbox>
+      <div>{data.meta.description}</div>
+      {data.meta.tags && (
+        <Flexbox gap={4} horizontal wrap={'wrap'}>
+          {data.meta.tags.map((tag) => (
+            <Link
+              href={qs.stringifyUrl({
+                query: { q: tag },
+                url: '/discover/search',
+              })}
+              key={tag}
+            >
+              <Tag key={tag} style={{ margin: 0 }}>
+                {startCase(tag).trim()}
+              </Tag>
+            </Link>
+          ))}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default Header;

package/src/app/(main)/discover/(detail)/plugin/[slug]/features/InfoSidebar/SuggestionItem.tsx

@@ -0,0 +1,62 @@
+import { Avatar } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+import { DiscoverPlugintem } from '@/types/discover';
+
+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%;
+  `,
+  desc: css`
+    margin-block-end: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin-block-end: 0 !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+  `,
+}));
+
+export interface SuggestionItemProps
+  extends Omit<DiscoverPlugintem, 'suggestions' | 'socialData' | 'category' | 'manifest'>,
+    FlexboxProps {}
+
+const SuggestionItem = memo<SuggestionItemProps>(({ className, meta, identifier, ...rest }) => {
+  const { avatar, title, description } = meta;
+
+  const { cx, styles, theme } = useStyles();
+
+  return (
+    <Flexbox className={cx(styles.container, className)} gap={12} key={identifier} {...rest}>
+      <Flexbox align={'center'} gap={12} horizontal width={'100%'}>
+        <Avatar
+          alt={title}
+          avatar={avatar}
+          background={theme.colorFillTertiary}
+          size={36}
+          title={title}
+        />
+        <Title className={styles.title} ellipsis={{ rows: 1, tooltip: title }} level={3}>
+          {title}
+        </Title>
+      </Flexbox>
+      <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+        {description}
+      </Paragraph>
+    </Flexbox>
+  );
+});
+
+export default SuggestionItem;

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

@@ -0,0 +1,49 @@
+'use client';
+
+import { Skeleton } from 'antd';
+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 { DiscoverPlugintem } from '@/types/discover';
+
+import Block from '../../../../features/Block';
+import SuggestionItem from './SuggestionItem';
+
+interface InfoSidebarProps extends FlexboxProps {
+  data: DiscoverPlugintem;
+  identifier: string;
+  mobile?: boolean;
+}
+
+const InfoSidebar = memo<InfoSidebarProps>(({ data, ...rest }) => {
+  const { t } = useTranslation('discover');
+
+  return (
+    <Flexbox gap={48} style={{ position: 'relative' }} width={'100%'} {...rest}>
+      <Block
+        gap={24}
+        more={t('assistants.more')}
+        moreLink={urlJoin('/discover/plugins', data.meta?.category || '')}
+        title={t('assistants.suggestions')}
+      >
+        {data?.suggestions?.length > 0 ? (
+          data?.suggestions.map((item) => (
+            <InterceptingLink
+              href={urlJoin('/discover/plugin', item.identifier)}
+              key={item.identifier}
+            >
+              <SuggestionItem {...item} />
+            </InterceptingLink>
+          ))
+        ) : (
+          <Skeleton active paragraph={{ rows: 5 }} title={false} />
+        )}
+      </Block>
+    </Flexbox>
+  );
+});
+
+export default InfoSidebar;