@lobehub/chat 1.96.20 → 1.97.1

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

@@ -0,0 +1,92 @@
+'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 'nextjs-toploader/app';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+
+import { useDetailContext } from '../../DetailProvider';
+
+const useStyles = createStyles(({ css }) => ({
+  button: css`
+    button {
+      width: 100%;
+    }
+  `,
+}));
+
+const ChatWithModel = memo(() => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('discover');
+  const { providers = [] } = useDetailContext();
+  const includeLobeHub = providers.some((item) => item.id === 'lobehub');
+  const route = useRouter();
+  const list = providers.filter((provider) => provider.id !== 'lobehub');
+
+  const items = list.map((item) => ({
+    icon: <ProviderIcon provider={item.id} size={20} type={'avatar'} />,
+    key: item.id,
+    label: (
+      <Link href={urlJoin('/discover/provider', item.id)}>
+        {[item.name, 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/Sidebar/ActionButton/index.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { ModelIcon } from '@lobehub/icons';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { OFFICIAL_URL } from '@/const/url';
+
+import ShareButton from '../../../../../features/ShareButton';
+import { useDetailContext } from '../../DetailProvider';
+import ChatWithModel from './ChatWithModel';
+
+const ActionButton = memo(() => {
+  const { description, providers, displayName, identifier } = useDetailContext();
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      <ChatWithModel />
+      <ShareButton
+        meta={{
+          avatar: <ModelIcon model={identifier} size={64} type={'avatar'} />,
+          desc: description,
+          hashtags: providers?.map((item) => item.name) || [],
+          title: displayName || identifier,
+          url: urlJoin(OFFICIAL_URL, '/discover/model', identifier as string),
+        }}
+      />
+    </Flexbox>
+  );
+});
+
+export default ActionButton;

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

@@ -0,0 +1,60 @@
+import { ModelIcon } from '@lobehub/icons';
+import { Block, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { DiscoverModelItem } from '@/types/discover';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    desc: css`
+      flex: 1;
+      margin: 0 !important;
+      font-size: 14px !important;
+      color: ${token.colorTextSecondary};
+    `,
+    title: css`
+      margin: 0 !important;
+      font-size: 14px !important;
+      font-weight: 500 !important;
+
+      &:hover {
+        color: ${token.colorLink};
+      }
+    `,
+  };
+});
+
+const RelatedItem = memo<DiscoverModelItem>(({ identifier, displayName }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('models');
+  return (
+    <Block gap={12} horizontal key={identifier} padding={12} variant={'outlined'}>
+      <ModelIcon model={identifier} size={40} style={{ flex: 'none' }} type={'avatar'} />
+      <Flexbox
+        flex={1}
+        gap={6}
+        style={{
+          overflow: 'hidden',
+        }}
+      >
+        <Text as={'h2'} className={styles.title} ellipsis>
+          {displayName || identifier}
+        </Text>
+        <Text
+          as={'p'}
+          className={styles.desc}
+          ellipsis={{
+            rows: 2,
+          }}
+        >
+          {t(`${identifier}.description`)}
+        </Text>
+      </Flexbox>
+    </Block>
+  );
+});
+
+export default RelatedItem;

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

@@ -0,0 +1,43 @@
+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 Title from '../../../../../../features/Title';
+import { useDetailContext } from '../../DetailProvider';
+import Item from './Item';
+
+const Related = memo(() => {
+  const { t } = useTranslation('discover');
+  const { related, category } = useDetailContext();
+
+  return (
+    <Flexbox gap={16}>
+      <Title
+        more={t('models.details.related.more')}
+        moreLink={qs.stringifyUrl({
+          query: {
+            category,
+          },
+          url: '/discover/model',
+        })}
+      >
+        {t('models.details.related.listTitle')}
+      </Title>
+      <Flexbox gap={8}>
+        {related?.map((item, index) => {
+          const link = urlJoin('/discover/model', item.identifier);
+          return (
+            <Link href={link} key={index} style={{ color: 'inherit', overflow: 'hidden' }}>
+              <Item {...item} />
+            </Link>
+          );
+        })}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Related;

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

@@ -0,0 +1,60 @@
+import { ProviderIcon } from '@lobehub/icons';
+import { Block, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { DiscoverModelDetailProviderItem } from '@/types/discover';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    desc: css`
+      flex: 1;
+      margin: 0 !important;
+      font-size: 14px !important;
+      color: ${token.colorTextSecondary};
+    `,
+    title: css`
+      margin: 0 !important;
+      font-size: 14px !important;
+      font-weight: 500 !important;
+
+      &:hover {
+        color: ${token.colorLink};
+      }
+    `,
+  };
+});
+
+const RelatedItem = memo<DiscoverModelDetailProviderItem>(({ id, name }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('providers');
+  return (
+    <Block gap={12} horizontal key={id} padding={12} variant={'outlined'}>
+      <ProviderIcon provider={id} size={40} style={{ flex: 'none' }} type={'avatar'} />
+      <Flexbox
+        flex={1}
+        gap={6}
+        style={{
+          overflow: 'hidden',
+        }}
+      >
+        <Text as={'h2'} className={styles.title} ellipsis>
+          {name}
+        </Text>
+        <Text
+          as={'p'}
+          className={styles.desc}
+          ellipsis={{
+            rows: 2,
+          }}
+        >
+          {t(`${id}.description`)}
+        </Text>
+      </Flexbox>
+    </Block>
+  );
+});
+
+export default RelatedItem;

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

@@ -0,0 +1,34 @@
+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 Title from '../../../../../../features/Title';
+import { useDetailContext } from '../../DetailProvider';
+import Item from './Item';
+
+const Related = memo(() => {
+  const { t } = useTranslation('discover');
+  const { providers = [] } = useDetailContext();
+
+  return (
+    <Flexbox gap={16}>
+      <Title more={t('providers.details.related.more')} moreLink={'/discover/provider'}>
+        {t('providers.details.related.listTitle')}
+      </Title>
+      <Flexbox gap={8}>
+        {providers.slice(0, 6).map((item, index) => {
+          const link = urlJoin('/discover/provider', item.id);
+          return (
+            <Link href={link} key={index} style={{ color: 'inherit', overflow: 'hidden' }}>
+              <Item {...item} />
+            </Link>
+          );
+        })}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Related;

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

@@ -0,0 +1,44 @@
+import { ScrollShadow } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useQuery } from '@/hooks/useQuery';
+import { ModelNavKey } from '@/types/discover';
+
+import ActionButton from './ActionButton';
+import Related from './Related';
+import RelatedProviders from './RelatedProviders';
+
+const Sidebar = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { activeTab = ModelNavKey.Overview } = useQuery() as { activeTab: ModelNavKey };
+
+  if (mobile) {
+    return (
+      <Flexbox gap={32}>
+        <ActionButton />
+      </Flexbox>
+    );
+  }
+
+  return (
+    <ScrollShadow
+      flex={'none'}
+      gap={32}
+      hideScrollBar
+      size={4}
+      style={{
+        maxHeight: 'calc(100vh - 76px)',
+        paddingBottom: 24,
+        position: 'sticky',
+        top: 0,
+      }}
+      width={360}
+    >
+      <ActionButton />
+      {activeTab !== ModelNavKey.Related && <Related />}
+      {activeTab !== ModelNavKey.Overview && <RelatedProviders />}
+    </ScrollShadow>
+  );
+});
+
+export default Sidebar;

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

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

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

@@ -2,36 +2,28 @@ 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 { PageProps } from '@/types/next';
 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 ParameterList from './features/ParameterList';
-import ProviderList from './features/ProviderList';
+import Client from './Client';
 
-type DiscoverPageProps = PageProps<{ slugs: string[]; variants: string }, { hl?: Locales }>;
+type DiscoverPageProps = PageProps<{ slugs: string[]; variants: string }>;
 
 const getSharedProps = async (props: DiscoverPageProps) => {
   const params = await props.params;
-  const searchParams = await props.searchParams;
   const { isMobile, locale: hl } = await RouteVariants.getVariantsFromProps(props);
 
   const { slugs } = params;
   const identifier = decodeURIComponent(slugs.join('/'));
-  const { t, locale } = await translation('metadata', searchParams?.hl || hl);
-  const { t: td } = await translation('models', searchParams?.hl || hl);
+  const { t, locale } = await translation('metadata', hl);
+  const { t: td } = await translation('models', hl);
 
   const discoverService = new DiscoverService();
-  const data = await discoverService.getModelById(locale, identifier);
+  const data = await discoverService.getModelDetail({ identifier });
   return {
     data,
     discoverService,
@@ -47,77 +39,62 @@ export const generateMetadata = async (props: DiscoverPageProps) => {
   const { data, locale, identifier, t, td } = await getSharedProps(props);
   if (!data) return;
 
-  const { meta, createdAt, providers } = data;
+  const { displayName, releasedAt, providers } = data;
 
   return {
     authors: [
-      { name: meta.title },
+      { name: displayName || identifier },
       { name: 'LobeHub', url: 'https://github.com/lobehub' },
       { name: 'LobeChat', url: 'https://github.com/lobehub/lobe-chat' },
     ],
     webpage: {
       enable: true,
-      search: '/discover/search',
+      search: true,
     },
     ...metadataModule.generate({
       alternate: true,
       description: td(`${identifier}.description`) || t('discover.models.description'),
       locale,
-      tags: providers || [],
-      title: [meta.title, t('discover.models.title')].join(' · '),
+      tags: providers.map((item) => item.name) || [],
+      title: [displayName || identifier, t('discover.models.title')].join(' · '),
       url: urlJoin('/discover/model', identifier),
     }),
     other: {
-      'article:author': meta.title,
-      'article:published_time': createdAt
-        ? new Date(createdAt).toISOString()
+      'article:author': displayName || identifier,
+      'article:published_time': releasedAt
+        ? new Date(releasedAt).toISOString()
         : new Date().toISOString(),
       'robots': 'index,follow,max-image-preview:large',
     },
   };
 };
 
+export const generateStaticParams = async () => [];
+
 const Page = async (props: DiscoverPageProps) => {
-  const { data, locale, identifier, t, td, discoverService, isMobile } =
-    await getSharedProps(props);
+  const { data, locale, identifier, t, td, isMobile } = await getSharedProps(props);
   if (!data) return notFound();
 
-  const { meta, createdAt, providers } = data;
-
-  let providerData: DiscoverProviderItem[] = [];
-  if (providers && providers?.length > 0) {
-    providerData = await discoverService.getProviderByIds(locale, providers);
-  }
+  const { displayName, releasedAt, providers } = data;
 
   const ld = ldModule.generate({
     article: {
-      author: [meta.title],
+      author: [displayName || identifier],
       enable: true,
       identifier,
-      tags: providers || [],
+      tags: providers.map((item) => item.name) || [],
     },
-    date: createdAt ? new Date(createdAt).toISOString() : new Date().toISOString(),
+    date: releasedAt ? new Date(releasedAt).toISOString() : new Date().toISOString(),
     description: td(`${identifier}.description`) || t('discover.models.description'),
     locale,
-    title: [meta.title, t('discover.models.title')].join(' · '),
+    title: [displayName || identifier, 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={isMobile} />}
-        mobile={isMobile}
-        sidebar={<InfoSidebar data={data} identifier={identifier} />}
-        /* ↓ cloud slot ↓ */
-
-        /* ↑ cloud slot ↑ */
-      >
-        <ProviderList data={providerData} identifier={identifier} mobile={isMobile} />
-        <ParameterList data={data} identifier={identifier} />
-      </DetailLayout>
+      <Client identifier={identifier} mobile={isMobile} />
     </>
   );
 };

package/src/app/[variants]/(main)/discover/(detail)/provider/[...slugs]/Client.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { notFound } from 'next/navigation';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Breadcrumb from '@/app/[variants]/(main)/discover/(detail)/features/Breadcrumb';
+import { withSuspense } from '@/components/withSuspense';
+import { useDiscoverStore } from '@/store/discover';
+import { DiscoverTab } from '@/types/discover';
+
+import { DetailProvider } from './features/DetailProvider';
+import Details from './features/Details';
+import Header from './features/Header';
+import Loading from './loading';
+
+interface ClientProps {
+  identifier: string;
+  mobile?: boolean;
+}
+
+const Client = memo<ClientProps>(({ identifier, mobile }) => {
+  const useProviderDetail = useDiscoverStore((s) => s.useProviderDetail);
+  const { data, isLoading } = useProviderDetail({ identifier, withReadme: true });
+
+  if (isLoading) return <Loading />;
+  if (!data) return notFound();
+
+  return (
+    <DetailProvider config={data}>
+      {!mobile && <Breadcrumb identifier={identifier} tab={DiscoverTab.Providers} />}
+      <Flexbox gap={16}>
+        <Header mobile={mobile} />
+        <Details mobile={mobile} />
+      </Flexbox>
+    </DetailProvider>
+  );
+});
+
+export default withSuspense(Client);

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

@@ -0,0 +1,19 @@
+'use client';
+
+import { type ReactNode, createContext, memo, use } from 'react';
+
+import { DiscoverProviderDetail } from '@/types/discover';
+
+export type DetailContextConfig = Partial<DiscoverProviderDetail>;
+
+export const DetailContext = createContext<DetailContextConfig>({});
+
+export const DetailProvider = memo<{ children: ReactNode; config?: DetailContextConfig }>(
+  ({ children, config = {} }) => {
+    return <DetailContext value={config}>{children}</DetailContext>;
+  },
+);
+
+export const useDetailContext = () => {
+  return use(DetailContext);
+};

package/src/app/[variants]/(main)/discover/(detail)/provider/[...slugs]/features/Details/Guide/index.tsx

@@ -0,0 +1,25 @@
+import { Block } from '@lobehub/ui';
+import { Mdx } from '@lobehub/ui/mdx';
+import { Empty } from 'antd';
+import { memo } from 'react';
+
+import { useDetailContext } from '../../DetailProvider';
+
+const Guide = memo(() => {
+  const { readme = '' } = useDetailContext();
+
+  if (!readme)
+    return (
+      <Block variant={'outlined'}>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Block>
+    );
+
+  return (
+    <Mdx enableImageGallery={false} enableLatex={false} fontSize={14} headerMultiple={0.3}>
+      {readme}
+    </Mdx>
+  );
+});
+
+export default Guide;