@lobehub/chat 1.96.20 → 1.97.1

package/src/app/[variants]/(main)/discover/(detail)/{plugin/[slug] → assistant/[...slugs]}/page.tsx

@@ -2,30 +2,33 @@ 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 { DiscoverPageProps } from '@/types/discover';
+import { DiscoverTab } 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 Schema from './features/Schema';
+import Breadcrumb from '../../features/Breadcrumb';
+import Client from './Client';
+
+type DiscoverPageProps = PageProps<
+  { slugs: string[]; variants: string },
+  { hl?: Locales; version?: string }
+>;
 
 const getSharedProps = async (props: DiscoverPageProps) => {
   const params = await props.params;
-  const searchParams = await props.searchParams;
+  const { slugs } = params;
+  const identifier = decodeURIComponent(slugs.join('/'));
   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.getPluginById(locale, identifier);
+  const [{ t, locale }, data] = await Promise.all([
+    translation('metadata', hl),
+    discoverService.getAssistantDetail({ identifier, locale: hl }),
+  ]);
   return {
     data,
     identifier,
@@ -39,7 +42,7 @@ export const generateMetadata = async (props: DiscoverPageProps) => {
   const { data, t, locale, identifier } = await getSharedProps(props);
   if (!data) return;
 
-  const { meta, createdAt, homepage, author } = data;
+  const { tags, createdAt, homepage, author, description, title } = data;
 
   return {
     authors: [
@@ -47,18 +50,15 @@ export const generateMetadata = async (props: DiscoverPageProps) => {
       { name: 'LobeHub', url: 'https://github.com/lobehub' },
       { name: 'LobeChat', url: 'https://github.com/lobehub/lobe-chat' },
     ],
-    keywords: meta.tags,
-    webpage: {
-      enable: true,
-      search: '/discover/search',
-    },
+    keywords: tags,
     ...metadataModule.generate({
       alternate: true,
-      description: meta.description,
+      canonical: urlJoin('https://lobehub.com/agent', identifier),
+      description: description,
       locale,
-      tags: meta.tags,
-      title: [meta.title, t('discover.plugins.title')].join(' · '),
-      url: urlJoin('/discover/plugin', identifier),
+      tags: tags,
+      title: [title, t('discover.assistants.title')].join(' · '),
+      url: urlJoin('/discover/assistant', identifier),
     }),
     other: {
       'article:author': author,
@@ -71,43 +71,40 @@ export const generateMetadata = async (props: DiscoverPageProps) => {
 };
 
 const Page = async (props: DiscoverPageProps) => {
-  const { data, t, identifier, isMobile, locale } = await getSharedProps(props);
+  const { data, t, locale, identifier, isMobile } = await getSharedProps(props);
   if (!data) return notFound();
 
-  const { meta, createdAt, author } = data;
+  const { tags, title, description, createdAt, author } = data;
+
   const ld = ldModule.generate({
     article: {
       author: [author],
       enable: true,
       identifier,
-      tags: meta.tags,
+      tags: tags,
     },
     date: createdAt ? new Date(createdAt).toISOString() : new Date().toISOString(),
-    description: meta.description || t('discover.plugins.description'),
+    description: description || t('discover.assistants.description'),
     locale,
-    title: [meta.title, t('discover.plugins.title')].join(' · '),
-    url: urlJoin('/discover/plugin', identifier),
+    title: [title, t('discover.assistants.title')].join(' · '),
+    url: urlJoin('/discover/assistant', identifier),
+    webpage: {
+      enable: true,
+      search: '/discover/assistant',
+    },
   });
 
   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 ↑ */
-      >
-        <ParameterList data={data} />
-        <Schema>{JSON.stringify(data.manifest.api, null, 2)}</Schema>
-      </DetailLayout>
+      {!isMobile && <Breadcrumb identifier={identifier} tab={DiscoverTab.Assistants} />}
+      <Client identifier={identifier} mobile={isMobile} />
     </>
   );
 };
 
-Page.DisplayName = 'DiscoverToolsDetail';
+export const generateStaticParams = async () => [];
+
+Page.DisplayName = 'DiscoverAssistantsDetail';
 
 export default Page;

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

@@ -0,0 +1,56 @@
+'use client';
+
+import { CopyButton } from '@lobehub/ui';
+import { Breadcrumb as AntdBreadcrumb } from 'antd';
+import { useTheme } from 'antd-style';
+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 { DiscoverTab } from '@/types/discover';
+
+const Breadcrumb = memo<{ identifier: string; tab: DiscoverTab }>(({ tab, identifier }) => {
+  const theme = useTheme();
+  const { t } = useTranslation('discover');
+  return (
+    <AntdBreadcrumb
+      items={[
+        {
+          title: <Link href={'/discover'}>Discover</Link>,
+        },
+        {
+          title: (
+            <Link href={urlJoin('/discover', tab)}>
+              {tab === DiscoverTab.Mcp ? 'MCP Servers' : t(`tab.${tab}` as any)}
+            </Link>
+          ),
+        },
+        {
+          title: (
+            <Flexbox
+              align={'center'}
+              gap={4}
+              horizontal
+              style={{
+                color: theme.colorTextSecondary,
+              }}
+            >
+              {identifier}
+              <CopyButton
+                content={identifier}
+                size={{
+                  blockSize: 22,
+                  size: 14,
+                }}
+              />
+            </Flexbox>
+          ),
+        },
+      ]}
+    />
+  );
+});
+
+export default Breadcrumb;

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

@@ -41,7 +41,6 @@ const DetailLayout = memo<DetailLayoutProps>(
         <Flexbox gap={32} horizontal width={'100%'}>
           <Flexbox flex={1} gap={48} style={{ overflow: 'hidden', position: 'relative' }}>
             {children}
-            <Footer />
           </Flexbox>
           <SidebarContainer>
             <Flexbox gap={16} width={'100%'}>

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

@@ -0,0 +1,44 @@
+import { Markdown } from '@lobehub/ui';
+import { Empty } from 'antd';
+import Link from 'next/link';
+import { ReactNode, memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import { H1, H2, H3, H4, H5 } from './Toc/Heading';
+
+const MarkdownRender = memo<{ children?: string }>(({ children }) => {
+  if (!children)
+    return (
+      <Center paddingBlock={32} width={'100%'}>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Center>
+    );
+  return (
+    <Markdown
+      allowHtml
+      components={{
+        a: ({ href, ...rest }: { children: ReactNode; href: string }) => {
+          if (href && href.startsWith('http'))
+            return <Link {...rest} href={href} target={'_blank'} />;
+          return rest?.children;
+        },
+        h1: H1,
+        h2: H2,
+        h3: H3,
+        h4: H4,
+        h5: H5,
+        img: ({ src, ...rest }: { src: string }) => {
+          if (src.includes('glama.ai')) return;
+          if (src && src.startsWith('http')) return <img src={src} {...rest} />;
+          return;
+        },
+      }}
+      enableImageGallery={false}
+      enableLatex={false}
+    >
+      {children}
+    </Markdown>
+  );
+});
+
+export default MarkdownRender;

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

@@ -7,8 +7,9 @@ import {
   Input,
   Modal,
   Tag,
+  Text,
 } from '@lobehub/ui';
-import { Skeleton, Typography } from 'antd';
+import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { startCase } from 'lodash-es';
 import { LinkIcon, Share2Icon } from 'lucide-react';
@@ -103,9 +104,9 @@ const ShareButton = memo<ShareButtonProps>(({ meta, ...rest }) => {
           </Center>
           <Center padding={12} width={'100%'}>
             <h3 style={{ fontWeight: 'bold', textAlign: 'center' }}>{meta.title}</h3>
-            <Typography.Paragraph style={{ color: theme.colorTextSecondary, textAlign: 'center' }}>
+            <Text as={'p'} style={{ color: theme.colorTextSecondary, textAlign: 'center' }}>
               {meta.desc}
-            </Typography.Paragraph>
+            </Text>
             {meta.hashtags && (
               <Flexbox align={'center'} gap={4} horizontal justify={'center'} wrap={'wrap'}>
                 {meta.hashtags.map((tag, index) => (

package/src/app/[variants]/(main)/discover/(detail)/features/Toc/Heading.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { createStyles, useTheme } from 'antd-style';
+import { kebabCase } from 'lodash-es';
+import { Heading2, Heading3, Heading4, Heading5 } from 'lucide-react';
+import Link from 'next/link';
+import { Children, ComponentProps, FC, ReactNode, isValidElement, useEffect, useMemo } from 'react';
+
+import { useToc } from './useToc';
+
+const extractTextChildren = (children: ReactNode) => {
+  let text = '';
+
+  Children.forEach(children, (child) => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      text += child;
+    } else if (isValidElement(child) && (child as any).props.children) {
+      text += extractTextChildren((child as any).props.children);
+    }
+  });
+
+  return text;
+};
+
+const HeadingIcon: any = {
+  h2: Heading2,
+  h3: Heading3,
+  h4: Heading4,
+  h5: Heading5,
+};
+
+const useStyles = createStyles(({ css, cx, token }) => {
+  const anchor = cx(css`
+    display: none;
+    margin-inline-start: 0.5rem;
+    color: ${token.colorTextDescription} !important;
+  `);
+  return {
+    anchor,
+    container: css`
+      &:hover {
+        .${anchor} {
+          display: inline;
+        }
+      }
+    `,
+  };
+});
+
+const createHeading = (Tag: `h${1 | 2 | 3 | 4 | 5 | 6}`) => {
+  const Heading: FC<ComponentProps<'h2'>> = ({ children, className, style, ...props }) => {
+    const { setToc, setFinished } = useToc();
+    const { cx, styles } = useStyles();
+    const text = useMemo(() => extractTextChildren(children), [children]);
+    const id = kebabCase(text);
+    const theme = useTheme();
+
+    useEffect(() => {
+      if (!setToc) return;
+      if (Tag === 'h2' || Tag === 'h3') {
+        setToc?.((prev = []) => [
+          ...prev,
+          {
+            href: `#${id}`,
+            level: Tag === 'h2' ? 2 : 3,
+            title: text,
+          },
+        ]);
+      }
+      setFinished();
+    }, [id]);
+
+    if (Tag === 'h1')
+      return (
+        <Tag style={{ color: theme.colorText, ...style }} {...props} id={id}>
+          {children}
+        </Tag>
+      );
+
+    return (
+      <Tag
+        className={cx(styles.container, className)}
+        style={{ color: theme.colorText, ...style }}
+        {...props}
+        id={id}
+      >
+        {children}
+        <Link
+          aria-label="Permalink for this section"
+          className={styles.anchor}
+          href={`#${id}`}
+          style={{ scrollMarginTop: 96 }}
+        >
+          <Icon icon={HeadingIcon[Tag]} />
+        </Link>
+      </Tag>
+    );
+  };
+
+  return Heading;
+};
+
+export const H1 = createHeading('h1');
+export const H2 = createHeading('h2');
+export const H3 = createHeading('h3');
+export const H4 = createHeading('h4');
+export const H5 = createHeading('h5');

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

@@ -0,0 +1,92 @@
+'use client';
+
+import { Anchor, AnchorProps } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo, useMemo } from 'react';
+
+import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/discover/features/const';
+import { isOnServerSide } from '@/utils/env';
+
+import { createTOCTree } from './useToc';
+
+const useStyles = createStyles(({ css, token, responsive, prefixCls }) => {
+  return {
+    toc: css`
+      a {
+        line-height: 1.4 !important;
+        white-space: normal !important;
+      }
+
+      .${prefixCls}-anchor {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        &::before {
+          display: none;
+        }
+
+        .${prefixCls}-anchor-ink {
+          display: none !important;
+        }
+
+        .${prefixCls}-anchor-link-title {
+          overflow: hidden;
+          display: box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+
+          word-break: break-word;
+        }
+
+        .${prefixCls}-anchor-link-title,.${prefixCls}-anchor-link {
+          margin: 0 !important;
+          padding-block: 0 !important;
+        }
+
+        > .${prefixCls}-anchor-link {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          padding-inline-start: 0 !important;
+        }
+
+        .${prefixCls}-anchor-link-title-active {
+          color: ${token.colorText} !important;
+        }
+
+        .${prefixCls}-anchor-link-title:not(.${prefixCls}-anchor-link-title-active) {
+          color: ${token.colorTextSecondary};
+
+          &:hover {
+            color: ${token.colorText};
+          }
+        }
+      }
+
+      ${responsive.lg} {
+        display: none;
+      }
+    `,
+  };
+});
+
+const Toc = memo<AnchorProps>(({ items, className, ...rest }) => {
+  const { cx, styles } = useStyles();
+
+  const toc = useMemo(() => createTOCTree(items as any), [items]);
+
+  return (
+    <Anchor
+      affix={false}
+      className={cx(className, styles.toc)}
+      getContainer={
+        isOnServerSide ? undefined : () => document.querySelector(`#${SCROLL_PARENT_ID}`) as any
+      }
+      items={toc}
+      {...rest}
+    />
+  );
+});
+
+export default Toc;

package/src/app/[variants]/(main)/discover/(detail)/features/Toc/useToc.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { AnchorProps } from 'antd';
+import { unionBy } from 'lodash-es';
+import { FC, PropsWithChildren, createContext, useContext, useState } from 'react';
+
+const TocContext = createContext<{
+  isLoading: boolean;
+  setFinished: () => void;
+  setToc: (data: any) => void;
+  toc?: AnchorProps['items'];
+}>({ isLoading: true, setFinished: () => {}, setToc: () => {}, toc: [] });
+
+export interface TOCItem {
+  href: string;
+  level: number;
+  title: string;
+}
+
+export const TocProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [loading, setLoading] = useState(true);
+  const [toc, setToc] = useState<AnchorProps['items']>([]);
+  return (
+    <TocContext.Provider
+      value={{
+        isLoading: loading,
+        setFinished: () => setLoading(false),
+        setToc: (data: AnchorProps['items']) => {
+          setToc(data);
+        },
+        toc,
+      }}
+    >
+      {children}
+    </TocContext.Provider>
+  );
+};
+
+export const useToc = () => {
+  return useContext(TocContext);
+};
+
+export function createTOCTree(items: TOCItem[]): AnchorProps['items'] {
+  const tocTree: AnchorProps['items'] = [];
+  let index = 1;
+
+  for (const item of unionBy(items, 'href')) {
+    const tocItem = { href: item.href, key: index, title: item.title };
+
+    const preNode = tocTree.at(-1);
+
+    if (item.level === 2) {
+      tocTree.push({ ...tocItem, children: [] });
+    } else {
+      // @ts-ignore
+      if (preNode && preNode.children) {
+        preNode.children.push(tocItem);
+      } else {
+        tocTree.push(tocItem);
+      }
+    }
+
+    index++;
+  }
+  return tocTree;
+}

package/src/app/[variants]/(main)/discover/(detail)/mcp/[slug]/Client.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { notFound } from 'next/navigation';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { withSuspense } from '@/components/withSuspense';
+import { DetailProvider } from '@/features/MCPPluginDetail/DetailProvider';
+import Header from '@/features/MCPPluginDetail/Header';
+import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
+import { useQuery } from '@/hooks/useQuery';
+import { useDiscoverStore } from '@/store/discover';
+import { DiscoverTab } from '@/types/discover';
+
+import Breadcrumb from '../../features/Breadcrumb';
+import { TocProvider } from '../../features/Toc/useToc';
+import Details from './features/Details';
+import Loading from './loading';
+
+const Client = memo<{ identifier: string; mobile?: boolean }>(({ identifier, mobile }) => {
+  const { version } = useQuery() as { version?: string };
+  const useMcpDetail = useDiscoverStore((s) => s.useFetchMcpDetail);
+  const { data, isLoading } = useMcpDetail({ identifier, version });
+
+  useFetchInstalledPlugins();
+
+  if (isLoading) return <Loading />;
+  if (!data) return notFound();
+
+  return (
+    <TocProvider>
+      <DetailProvider config={data}>
+        {!mobile && <Breadcrumb identifier={identifier} tab={DiscoverTab.Mcp} />}
+        <Flexbox gap={16}>
+          <Header mobile={mobile} />
+          <Details mobile={mobile} />
+        </Flexbox>
+      </DetailProvider>
+    </TocProvider>
+  );
+});
+
+export default withSuspense(Client);

package/src/app/[variants]/(main)/discover/(detail)/mcp/[slug]/features/Details/Related/index.tsx

@@ -0,0 +1,32 @@
+import qs from 'query-string';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useDetailContext } from '@/features/MCPPluginDetail/DetailProvider';
+
+import McpList from '../../../../../../(list)/mcp/features/List';
+import Title from '../../../../../../features/Title';
+
+const Related = memo(() => {
+  const { t } = useTranslation('discover');
+  const { related, category } = useDetailContext();
+  return (
+    <Flexbox gap={16}>
+      <Title
+        more={t('mcp.details.related.more')}
+        moreLink={qs.stringifyUrl({
+          query: {
+            category,
+          },
+          url: '/discover/mcp',
+        })}
+      >
+        {t('mcp.details.related.listTitle')}
+      </Title>
+      <McpList data={related} />
+    </Flexbox>
+  );
+});
+
+export default Related;