@lobehub/chat 1.96.20 → 1.97.0

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

@@ -0,0 +1,76 @@
+import { Block, Icon, Tag } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { CheckIcon, MinusIcon } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import qs from 'query-string';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import InlineTable from '@/components/InlineTable';
+
+import PublishedTime from '../../../../../../../../../../components/PublishedTime';
+import { useDetailContext } from '../../../../../../../../../../features/MCPPluginDetail/DetailProvider';
+import Title from '../../../../../../features/Title';
+
+const Versions = memo(() => {
+  const theme = useTheme();
+  const { t } = useTranslation('discover');
+  const { versions } = useDetailContext();
+  const pathname = usePathname();
+  return (
+    <Flexbox gap={16}>
+      <Title>{t('mcp.details.versions.title')}</Title>
+      <Block variant={'outlined'}>
+        <InlineTable
+          columns={[
+            {
+              dataIndex: 'version',
+              render: (_, record) => (
+                <Link
+                  href={qs.stringifyUrl({
+                    query: {
+                      version: record.version,
+                    },
+                    url: pathname,
+                  })}
+                  style={{ color: 'inherit' }}
+                >
+                  <Flexbox align={'center'} gap={8} horizontal>
+                    <code style={{ fontSize: 14 }}>{record.version}</code>
+                    {record.isLatest && (
+                      <Tag color={'info'}>{t('mcp.details.versions.table.isLatest')}</Tag>
+                    )}
+                  </Flexbox>
+                </Link>
+              ),
+              title: t('mcp.details.versions.table.version'),
+            },
+            {
+              dataIndex: 'isValidated',
+              render: (_, record) => (
+                <Icon
+                  color={record.isValidated ? theme.colorSuccess : theme.colorTextDescription}
+                  icon={record.isValidated ? CheckIcon : MinusIcon}
+                />
+              ),
+              title: t('mcp.details.versions.table.isValidated'),
+            },
+            {
+              align: 'end',
+              dataIndex: 'createdAt',
+              render: (_, record) => <PublishedTime date={record.createdAt} showPrefix={false} />,
+              title: t('mcp.details.versions.table.publishAt'),
+            },
+          ]}
+          dataSource={versions}
+          rowKey={'version'}
+          size={'middle'}
+        />
+      </Block>
+    </Flexbox>
+  );
+});
+
+export default Versions;

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

@@ -0,0 +1,59 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { useQueryState } from 'nuqs';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Deployment from '@/features/MCPPluginDetail/Deployment';
+import Nav from '@/features/MCPPluginDetail/Nav';
+import Overview from '@/features/MCPPluginDetail/Overview';
+import Schema from '@/features/MCPPluginDetail/Schema';
+import Score from '@/features/MCPPluginDetail/Score';
+import { McpNavKey } from '@/types/discover';
+
+import Sidebar from '../Sidebar';
+import Related from './Related';
+import Versions from './Versions';
+
+const Details = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
+  const { mobile = isMobile } = useResponsive();
+  const [activeTab, setActiveTab] = useQueryState('activeTab', {
+    clearOnDefault: true,
+    defaultValue: McpNavKey.Overview,
+  });
+
+  return (
+    <Flexbox gap={24}>
+      <Nav
+        activeTab={activeTab as McpNavKey}
+        mobile={mobile}
+        noSettings
+        setActiveTab={setActiveTab}
+      />
+      <Flexbox
+        gap={48}
+        horizontal={!mobile}
+        style={mobile ? { flexDirection: 'column-reverse' } : undefined}
+      >
+        <Flexbox
+          flex={1}
+          style={{
+            overflow: 'hidden',
+          }}
+          width={'100%'}
+        >
+          {activeTab === McpNavKey.Overview && <Overview />}
+          {activeTab === McpNavKey.Deployment && <Deployment mobile={mobile} />}
+          {activeTab === McpNavKey.Schema && <Schema />}
+          {activeTab === McpNavKey.Related && <Related />}
+          {activeTab === McpNavKey.Score && <Score />}
+          {activeTab === McpNavKey.Version && <Versions />}
+        </Flexbox>
+        <Sidebar mobile={mobile} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Details;

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

@@ -0,0 +1,84 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { Trash2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import MCPInstallProgress from '@/features/MCP/MCPInstallProgress';
+import { useDetailContext } from '@/features/MCPPluginDetail/DetailProvider';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/slices/plugin/selectors';
+
+const useStyles = createStyles(({ css }) => ({
+  button: css`
+    button {
+      width: 100%;
+    }
+  `,
+}));
+
+const ActionButton = memo(() => {
+  const { identifier } = useDetailContext();
+  const { styles } = useStyles();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [installed, installMCPPlugin, uninstallMCPPlugin] = useToolStore((s) => [
+    pluginSelectors.isPluginInstalled(identifier!)(s),
+    s.installMCPPlugin,
+    s.uninstallMCPPlugin,
+  ]);
+
+  const { t } = useTranslation(['discover', 'plugin']);
+
+  const installPlugin = async () => {
+    if (!identifier) return;
+    setIsLoading(true);
+
+    await installMCPPlugin(identifier);
+
+    setIsLoading(false);
+  };
+
+  return installed ? (
+    <Flexbox gap={8} horizontal>
+      <Button block className={styles.button} disabled={isLoading} size={'large'} type={'default'}>
+        {t('plugins.installed')}
+      </Button>
+
+      <Button
+        icon={<Icon icon={Trash2Icon} size={20} />}
+        loading={isLoading}
+        onClick={async () => {
+          setIsLoading(true);
+          await uninstallMCPPlugin(identifier!);
+          setIsLoading(false);
+        }}
+        size={'large'}
+        style={{ minWidth: 45 }}
+        styles={{
+          icon: { height: 20 },
+        }}
+      />
+    </Flexbox>
+  ) : (
+    <>
+      <Button
+        block
+        className={styles.button}
+        loading={isLoading}
+        onClick={installPlugin}
+        size={'large'}
+        type={'primary'}
+      >
+        {t('plugins.install')}
+      </Button>
+      <MCPInstallProgress identifier={identifier!} />
+    </>
+  );
+});
+
+export default ActionButton;

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

@@ -0,0 +1,35 @@
+import { Alert, Icon } from '@lobehub/ui';
+import { Blend, Cloud, LaptopMinimalIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useDetailContext } from '@/features/MCPPluginDetail/DetailProvider';
+
+const icons = {
+  hybrid: Blend,
+  local: LaptopMinimalIcon,
+  remote: Cloud,
+};
+
+const ConnectionTypeAlert = memo(() => {
+  const { t } = useTranslation('discover');
+  const { connectionType } = useDetailContext();
+
+  if (!connectionType || !icons[connectionType]) return null;
+
+  return (
+    <Alert
+      description={t(`mcp.details.connectionType.${connectionType}.desc`)}
+      message={
+        <Flexbox align={'center'} gap={6} horizontal>
+          <Icon icon={icons[connectionType]} size={20} />
+          {t(`mcp.details.connectionType.${connectionType}.title`)}
+        </Flexbox>
+      }
+      showIcon={false}
+    />
+  );
+});
+
+export default ConnectionTypeAlert;

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

@@ -0,0 +1,57 @@
+import { Avatar, Block, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { DiscoverMcpItem } 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<DiscoverMcpItem>(({ name, icon, description, identifier }) => {
+  const { styles } = useStyles();
+  return (
+    <Block gap={12} horizontal key={identifier} padding={12} variant={'outlined'}>
+      <Avatar avatar={icon} size={40} style={{ flex: 'none' }} />
+      <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,
+          }}
+        >
+          {description}
+        </Text>
+      </Flexbox>
+    </Block>
+  );
+});
+
+export default RelatedItem;

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

@@ -0,0 +1,44 @@
+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 { useDetailContext } from '@/features/MCPPluginDetail/DetailProvider';
+
+import Title from '../../../../../../features/Title';
+import Item from './Item';
+
+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>
+      <Flexbox gap={8}>
+        {related?.map((item, index) => {
+          const link = urlJoin('/discover/mcp', 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)/mcp/[slug]/features/Sidebar/ServerConfig.tsx

@@ -0,0 +1,36 @@
+import { usePathname } from 'next/navigation';
+import qs from 'query-string';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { getRecommendedDeployment } from '@/features/MCP/utils';
+import Platform from '@/features/MCPPluginDetail/Deployment/Platform';
+import { useDetailContext } from '@/features/MCPPluginDetail/DetailProvider';
+import { McpNavKey } from '@/types/discover';
+
+import Title from '../../../../../features/Title';
+
+const ServerConfig = memo(() => {
+  const { t } = useTranslation('discover');
+  const pathName = usePathname();
+  const installLink = qs.stringifyUrl({
+    query: {
+      activeTab: McpNavKey.Deployment,
+    },
+    url: pathName,
+  });
+  const { deploymentOptions = [], identifier } = useDetailContext();
+  const recommendedDeployment = getRecommendedDeployment(deploymentOptions);
+
+  return (
+    <Flexbox gap={16}>
+      <Title more={t('mcp.details.sidebar.moreServerConfig')} moreLink={installLink}>
+        {t('mcp.details.sidebar.serverConfig')}
+      </Title>
+      <Platform connection={recommendedDeployment?.connection} identifier={identifier} lite />
+    </Flexbox>
+  );
+});
+
+export default ServerConfig;

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

@@ -0,0 +1,98 @@
+'use client';
+
+import { AnchorProps } from 'antd';
+import { startCase } from 'lodash-es';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToc } from '@/app/[variants]/(main)/discover/(detail)/features/Toc/useToc';
+import { useDetailContext } from '@/features/MCPPluginDetail/DetailProvider';
+import { useQuery } from '@/hooks/useQuery';
+import { McpNavKey } from '@/types/discover';
+
+import Title from '../../../../../../features/Title';
+import Toc from '../../../../../features/Toc';
+
+const TocList = memo(() => {
+  const { t } = useTranslation('discover');
+  const { toc = [] } = useToc();
+  const { activeTab = McpNavKey.Overview } = useQuery() as { activeTab: McpNavKey };
+  const { deploymentOptions = [], tools = [], prompts = [] } = useDetailContext();
+
+  const deployToc: AnchorProps['items'] = useMemo(
+    () =>
+      deploymentOptions?.map((item, index) => ({
+        href: `#deployment-${index}`,
+        key: `deployment-${index}`,
+        level: 2,
+        title: t('mcp.details.deployment.installation', {
+          method: startCase(item.installationMethod),
+        }),
+      })),
+    [deploymentOptions, t],
+  );
+
+  const schemaToc: AnchorProps['items'] = useMemo(() => {
+    return [
+      {
+        href: `#tools`,
+        key: `tools`,
+        level: 2,
+        title: t('mcp.details.schema.tools.title'),
+      },
+      ...tools.map((item) => ({
+        href: `#tools-${item.name}`,
+        key: `tools-${item.name}`,
+        level: 3,
+        title: item.name,
+      })),
+      {
+        href: `#prompts`,
+        key: `prompts`,
+        level: 2,
+        title: t('mcp.details.schema.prompts.title'),
+      },
+      ...prompts.map((item) => ({
+        href: `#prompts-${item.name}`,
+        key: `prompts-${item.name}`,
+        level: 3,
+        title: item.name,
+      })),
+      {
+        href: `#resources`,
+        key: `resources`,
+        level: 2,
+        title: t('mcp.details.schema.resources.title'),
+      },
+    ].filter(Boolean) as AnchorProps['items'];
+  }, [tools, prompts, t]);
+
+  const items: AnchorProps['items'] | undefined = useMemo(() => {
+    switch (activeTab) {
+      case McpNavKey.Overview: {
+        return toc;
+      }
+      case McpNavKey.Deployment: {
+        return deployToc;
+      }
+      case McpNavKey.Schema: {
+        return schemaToc;
+      }
+      default: {
+        return undefined;
+      }
+    }
+  }, [activeTab, toc, deployToc, schemaToc]);
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <Flexbox gap={16}>
+      <Title>{t('mcp.details.sidebar.toc')}</Title>
+      <Toc items={items} />
+    </Flexbox>
+  );
+});
+
+export default TocList;

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

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

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

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

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

@@ -0,0 +1,103 @@
+import { notFound } from 'next/navigation';
+import urlJoin from 'url-join';
+
+import StructuredData from '@/components/StructuredData';
+import { isDesktop } from '@/const/version';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { DiscoverService } from '@/server/services/discover';
+import { translation } from '@/server/translation';
+import { PageProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
+
+import Client from './Client';
+
+type DiscoverPageProps = PageProps<{ slug: string; variants: string }>;
+
+const getSharedProps = async (props: DiscoverPageProps) => {
+  const params = await props.params;
+  const { slug: identifier } = params;
+  const { isMobile, locale: hl } = await RouteVariants.getVariantsFromProps(props);
+  const discoverService = new DiscoverService();
+  const [{ t, locale }, data] = await Promise.all([
+    translation('metadata', hl),
+    discoverService.getMcpDetail({ identifier, locale: hl }),
+  ]);
+  return {
+    data,
+    identifier,
+    isMobile,
+    locale,
+    t,
+  };
+};
+
+export const generateMetadata = async (props: DiscoverPageProps) => {
+  const { data, t, locale, identifier } = await getSharedProps(props);
+  if (!data) return notFound();
+
+  const { tags, createdAt, homepage, author, description, name } = data;
+
+  return {
+    authors: [
+      { name: author, url: homepage },
+      { name: 'LobeHub', url: 'https://github.com/lobehub' },
+      { name: 'LobeChat', url: 'https://github.com/lobehub/lobe-chat' },
+    ],
+    keywords: tags,
+    ...metadataModule.generate({
+      alternate: true,
+      canonical: urlJoin('https://lobehub.com/mcp', identifier),
+      description: description,
+      locale,
+      tags: tags,
+      title: [name, t('discover.mcp.title')].join(' · '),
+      url: urlJoin('/discover/mcp', identifier),
+    }),
+    other: {
+      'article:author': author,
+      'article:published_time': createdAt
+        ? new Date(createdAt).toISOString()
+        : new Date().toISOString(),
+      'robots': 'index,follow,max-image-preview:large',
+    },
+  };
+};
+
+export const generateStaticParams = async () => [];
+
+const Page = async (props: DiscoverPageProps) => {
+  const { data, identifier, isMobile, locale, t } = await getSharedProps(props);
+  if (!data) return notFound();
+
+  const { tags, name, description, createdAt, author } = data;
+
+  const ld = ldModule.generate({
+    article: {
+      author: [author?.name || 'LobeHub'],
+      enable: true,
+      identifier,
+      tags: tags,
+    },
+    date: createdAt ? new Date(createdAt).toISOString() : new Date().toISOString(),
+    description: description || t('discover.mcp.description'),
+    locale,
+    title: [name, t('discover.mcp.title')].join(' · '),
+    url: urlJoin('/discover/mcp', identifier),
+    webpage: {
+      enable: true,
+      search: '/discover/mcp',
+    },
+  });
+
+  return (
+    <>
+      {!isDesktop && <StructuredData ld={ld} />}
+      <Client identifier={identifier} mobile={isMobile} />
+    </>
+  );
+};
+
+Page.displayName = 'DiscoverMCPDetail';
+
+export default Page;