@lobehub/chat 1.96.20 → 1.97.1

package/src/app/[variants]/(main)/discover/(detail)/assistant/[slug]/features/SystemRole.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { Markdown } from '@lobehub/ui';
-import { Skeleton } from 'antd';
-import { useTheme } from 'antd-style';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import Block from '../../../features/Block';
-
-const SystemRole = memo<{ children?: string }>(({ children }) => {
-  const { t } = useTranslation('discover');
-  const theme = useTheme();
-
-  return (
-    <Block title={t('assistants.systemRole')}>
-      {children ? (
-        <Markdown
-          fontSize={theme.fontSize}
-          style={{
-            border: `1px solid ${theme.colorBorderSecondary}`,
-            borderRadius: theme.borderRadiusLG,
-            paddingInline: 16,
-          }}
-        >
-          {children}
-        </Markdown>
-      ) : (
-        <Skeleton paragraph={{ rows: 4 }} title={false} />
-      )}
-    </Block>
-  );
-});
-
-export default SystemRole;

package/src/app/[variants]/(main)/discover/(detail)/assistant/[slug]/features/Temp.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import { Markdown } from '@lobehub/ui';
-import { Skeleton } from 'antd';
-import { useTheme } from 'antd-style';
-import { BotMessageSquare } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox, FlexboxProps } from 'react-layout-kit';
-
-import { DiscoverAssistantItem } from '@/types/discover';
-
-import HighlightBlock from '../../../features/HighlightBlock';
-
-interface ConversationExampleProps extends FlexboxProps {
-  data: DiscoverAssistantItem;
-  identifier: string;
-  mobile?: boolean;
-}
-
-const ConversationExample = memo<ConversationExampleProps>(({ data }) => {
-  const { t } = useTranslation('discover');
-  const theme = useTheme();
-
-  return (
-    <HighlightBlock
-      avatar={data?.meta.avatar}
-      icon={BotMessageSquare}
-      justify={'space-between'}
-      style={{ background: theme.colorBgContainer }}
-      title={t('assistants.systemRole')}
-    >
-      <Flexbox paddingInline={16}>
-        {data.config.systemRole ? (
-          <Markdown fontSize={theme.fontSize}>{data.config.systemRole}</Markdown>
-        ) : (
-          <Skeleton paragraph={{ rows: 4 }} title={false} />
-        )}
-      </Flexbox>
-    </HighlightBlock>
-  );
-});
-
-export default ConversationExample;

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

@@ -1,124 +0,0 @@
-import { notFound } from 'next/navigation';
-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 { DiscoverPageProps, DiscoverPlugintem } 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 Temp from './features/Temp';
-
-// import ConversationExample from './features/ConversationExample';
-// import SystemRole from './features/SystemRole';
-
-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 discoverService = new DiscoverService();
-  const data = await discoverService.getAssistantById(locale, identifier);
-  return {
-    data,
-    discoverService,
-    identifier,
-    isMobile,
-    locale,
-    t,
-  };
-};
-
-export const generateMetadata = async (props: DiscoverPageProps) => {
-  const { data, t, locale, identifier } = await getSharedProps(props);
-  if (!data) return;
-
-  const { meta, createdAt, homepage, author } = data;
-
-  return {
-    authors: [
-      { name: author, url: homepage },
-      { name: 'LobeHub', url: 'https://github.com/lobehub' },
-      { name: 'LobeChat', url: 'https://github.com/lobehub/lobe-chat' },
-    ],
-    keywords: meta.tags,
-    ...metadataModule.generate({
-      alternate: true,
-      description: meta.description,
-      locale,
-      tags: meta.tags,
-      title: [meta.title, t('discover.assistants.title')].join(' · '),
-      url: urlJoin('/discover/assistant', identifier),
-    }),
-    other: {
-      'article:author': author,
-      '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, locale, discoverService, identifier, isMobile } = await getSharedProps(props);
-  if (!data) return notFound();
-
-  const { meta, createdAt, author, config } = data;
-
-  let pluginData: DiscoverPlugintem[] = [];
-  if (config?.plugins && config.plugins?.length > 0) {
-    pluginData = await discoverService.getPluginByIds(locale, config.plugins);
-  }
-
-  const ld = ldModule.generate({
-    article: {
-      author: [author],
-      enable: true,
-      identifier,
-      tags: meta.tags,
-    },
-    date: createdAt ? new Date(createdAt).toISOString() : new Date().toISOString(),
-    description: meta.description || t('discover.assistants.description'),
-    locale,
-    title: [meta.title, t('discover.assistants.title')].join(' · '),
-    url: urlJoin('/discover/assistant', 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} pluginData={pluginData} />}
-        /* ↓ cloud slot ↓ */
-
-        /* ↑ cloud slot ↑ */
-      >
-        <Temp data={data} identifier={identifier} />
-        {/* TODO: Chat Preview */}
-        {/*<ConversationExample data={data} identifier={identifier} />*/}
-        {/*<SystemRole>{data?.config?.systemRole}</SystemRole>*/}
-      </DetailLayout>
-    </>
-  );
-};
-
-Page.DisplayName = 'DiscoverAssistantsDetail';
-
-export default Page;

package/src/app/[variants]/(main)/discover/(detail)/loading.tsx

@@ -1,38 +0,0 @@
-'use client';
-
-import { Skeleton } from 'antd';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { useServerConfigStore } from '@/store/serverConfig';
-
-import DetailLayout from './features/DetailLayout';
-
-const Loading = memo(() => {
-  const mobile = useServerConfigStore((s) => s.isMobile);
-  return (
-    <DetailLayout
-      actions={<Skeleton.Button block />}
-      header={
-        <Flexbox gap={12} width={'100%'}>
-          <Flexbox align={'center'} gap={8} horizontal justify={'space-between'} width={'100%'}>
-            <Flexbox align={'center'} gap={12} horizontal justify={'flex-start'}>
-              <Skeleton.Avatar active shape={'circle'} size={48} />
-              <Skeleton.Button active />
-            </Flexbox>
-            <Flexbox align={'center'} gap={4} horizontal justify={'flex-end'}>
-              <Skeleton.Button active />
-            </Flexbox>
-          </Flexbox>
-          <Skeleton active title={false} />
-        </Flexbox>
-      }
-      mobile={mobile}
-      sidebar={<Skeleton paragraph={{ rows: 5 }} />}
-    >
-      <Skeleton paragraph={{ rows: 16 }} title={false} />
-    </DetailLayout>
-  );
-});
-
-export default Loading;

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

@@ -1,40 +0,0 @@
-'use client';
-
-import { ModelIcon } from '@lobehub/icons';
-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 { OFFICIAL_URL } from '@/const/url';
-import { DiscoverModelItem, DiscoverProviderItem } from '@/types/discover';
-
-import ShareButton from '../../../features/ShareButton';
-import ChatWithModel from './ChatWithModel';
-
-interface ModelActionsProps extends FlexboxProps {
-  data: DiscoverModelItem;
-  identifier: string;
-  providerData: DiscoverProviderItem[];
-}
-
-const ModelActions = memo<ModelActionsProps>(({ identifier, providerData, data }) => {
-  const { t } = useTranslation('models');
-  return (
-    <Flexbox align={'center'} gap={8} horizontal>
-      <ChatWithModel providerData={providerData} providers={data.providers} />
-      <ShareButton
-        meta={{
-          avatar: <ModelIcon model={identifier} size={64} type={'avatar'} />,
-          desc: data.meta.description && t(`${identifier}.description`),
-          tags: <ModelInfoTags directionReverse {...data.meta} />,
-          title: data.meta.title,
-          url: urlJoin(OFFICIAL_URL, '/discover/model', identifier),
-        }}
-      />
-    </Flexbox>
-  );
-});
-
-export default ModelActions;

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

@@ -1,93 +0,0 @@
-'use client';
-
-import { ProviderIcon } from '@lobehub/icons';
-import { Button, Icon } from '@lobehub/ui';
-import { Dropdown } from 'antd';
-import { createStyles } from 'antd-style';
-import { ChevronDownIcon } from 'lucide-react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import urlJoin from 'url-join';
-
-import { DiscoverProviderItem } from '@/types/discover';
-
-const useStyles = createStyles(({ css }) => ({
-  button: css`
-    button {
-      width: 100%;
-    }
-  `,
-}));
-
-const ChatWithModel = memo<{ providerData: DiscoverProviderItem[]; providers?: string[] }>(
-  ({ providerData, providers = [] }) => {
-    const { styles } = useStyles();
-    const { t } = useTranslation('discover');
-    const includeLobeHub = providers?.includes('lobehub');
-    const route = useRouter();
-    const list = providerData.filter((provider) => provider.identifier !== 'lobehub');
-
-    const items = list.map((item) => ({
-      icon: <ProviderIcon provider={item.identifier} size={20} type={'avatar'} />,
-      key: item.identifier,
-      label: (
-        <Link href={urlJoin('/discover/provider', item.identifier)}>
-          {[item.meta.title, t('models.guide')].join(' ')}
-        </Link>
-      ),
-    }));
-
-    const handleLobeHubChat = () => {
-      route.push('/chat');
-    };
-
-    if (includeLobeHub)
-      return (
-        <Dropdown.Button
-          className={styles.button}
-          icon={<Icon icon={ChevronDownIcon} />}
-          menu={{
-            items,
-          }}
-          onClick={handleLobeHubChat}
-          overlayStyle={{ minWidth: 267 }}
-          size={'large'}
-          style={{ flex: 1, width: 'unset' }}
-          type={'primary'}
-        >
-          {t('models.chat')}
-        </Dropdown.Button>
-      );
-
-    if (items.length === 1)
-      return (
-        <Link href={urlJoin('/discover/provider', items[0].key)} style={{ flex: 1 }}>
-          <Button block className={styles.button} size={'large'} type={'primary'}>
-            {t('models.guide')}
-          </Button>
-        </Link>
-      );
-
-    return (
-      <Dropdown
-        menu={{
-          items,
-        }}
-        trigger={['click']}
-      >
-        <Button
-          className={styles.button}
-          size={'large'}
-          style={{ flex: 1, width: 'unset' }}
-          type={'primary'}
-        >
-          {t('models.guide')}
-        </Button>
-      </Dropdown>
-    );
-  },
-);
-
-export default ChatWithModel;

package/src/app/[variants]/(main)/discover/(detail)/model/[...slugs]/features/InfoSidebar/SuggestionItem.tsx

@@ -1,74 +0,0 @@
-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 { ModelInfoTags } from '@/components/ModelSelect';
-import { DiscoverModelItem } 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};
-  `,
-  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 {}
-
-const SuggestionItem = memo<SuggestionItemProps>(({ className, meta, identifier }) => {
-  const { title, description } = meta;
-  const { t } = useTranslation('models');
-  const { cx, styles } = useStyles();
-
-  return (
-    <Flexbox className={cx(styles.container, className)} gap={12} key={identifier}>
-      <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>
-      {description && (
-        <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
-          {t(`${identifier}.description`)}
-        </Paragraph>
-      )}
-      <ModelInfoTags directionReverse {...meta} />
-    </Flexbox>
-  );
-});
-
-export default SuggestionItem;

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

@@ -1,45 +0,0 @@
-'use client';
-
-import { Skeleton } from 'antd';
-import Link from 'next/link';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-import urlJoin from 'url-join';
-
-import { DiscoverModelItem } from '@/types/discover';
-
-import Block from '../../../../features/Block';
-import SuggestionItem from './SuggestionItem';
-
-interface InfoSidebarProps {
-  data: DiscoverModelItem;
-  identifier: string;
-}
-
-const InfoSidebar = memo<InfoSidebarProps>(({ data }) => {
-  const { t } = useTranslation('discover');
-
-  return (
-    <Flexbox gap={48} style={{ position: 'relative' }} width={'100%'}>
-      <Block
-        gap={24}
-        more={t('models.more')}
-        moreLink={urlJoin('/discover/models', data.meta?.category || '')}
-        title={t('models.suggestions')}
-      >
-        {data?.suggestions?.length > 0 ? (
-          data?.suggestions.map((item) => (
-            <Link href={urlJoin('/discover/model', item.identifier)} key={item.identifier}>
-              <SuggestionItem {...item} />
-            </Link>
-          ))
-        ) : (
-          <Skeleton active paragraph={{ rows: 5 }} title={false} />
-        )}
-      </Block>
-    </Flexbox>
-  );
-});
-
-export default InfoSidebar;

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

@@ -1,139 +0,0 @@
-import { ModelTag, ProviderCombine } from '@lobehub/icons';
-import { ActionIcon, Grid, Icon, Tag, Tooltip } from '@lobehub/ui';
-import { useResponsive, useTheme } 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 { 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';
-
-interface ProviderItemProps extends DiscoverProviderItem {
-  mobile?: boolean;
-  modelId: string;
-}
-
-const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) => {
-  const { t } = useTranslation('discover');
-  const { xl = true } = useResponsive();
-  const theme = useTheme();
-  const isLobeHub = identifier === 'lobehub';
-
-  const isMobile = mobile || !xl;
-
-  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?.contextWindowTokens ? formatTokenNumber(model.contextWindowTokens) : '--',
-    },
-    {
-      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 }}>
-      <Link href={urlJoin('/discover/provider', identifier)} style={{ color: 'inherit' }}>
-        <ProviderCombine provider={identifier} size={24} />
-      </Link>
-      <Flexbox align={'center'} gap={6} horizontal wrap={'wrap'}>
-        <ModelTag model={modelId} style={{ background: theme.colorFillQuaternary, margin: 0 }} />
-        {isLobeHub && (
-          <Tooltip title={t('models.providerInfo.officialTooltip')}>
-            <Tag color={'success'} icon={<Icon icon={BadgeCheck} />} />
-          </Tooltip>
-        )}
-        {!isLobeHub && (
-          <Tooltip title={t('models.providerInfo.apiTooltip')}>
-            <Tag icon={<Icon icon={KeyIcon} />} />
-          </Tooltip>
-        )}
-        <Tooltip title={t('models.guide')}>
-          <Link href={urlJoin(BASE_PROVIDER_DOC_URL, identifier)} target={'_blank'}>
-            <Tag icon={<Icon icon={BookIcon} />} />
-          </Link>
-        </Tooltip>
-      </Flexbox>
-    </Flexbox>
-  );
-
-  const button = (
-    <Link href={urlJoin('/discover/provider', 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 ProviderItem;

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

@@ -1,45 +0,0 @@
-'use client';
-
-import { ModelIcon } from '@lobehub/icons';
-import { Divider } from 'antd';
-import { useTheme } from 'antd-style';
-import { BrainCircuit } from 'lucide-react';
-import { Fragment, 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) => (
-        <Fragment key={item.identifier}>
-          <ProviderItem mobile={mobile} modelId={identifier} {...item} />
-          {index < data.length - 1 && <Divider style={{ margin: 0 }} />}
-        </Fragment>
-      ))}
-    </HighlightBlock>
-  );
-});
-
-export default ProviderList;