@lobehub/chat 1.96.19 → 1.97.0

package/src/features/MCPPluginDetail/CollapseDesc.tsx

@@ -0,0 +1,44 @@
+import { Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    desc: css`
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+
+      height: 28px;
+      margin-block: 4px 0 !important;
+
+      font-size: 14px;
+      line-height: 28px;
+      color: ${token.colorTextSecondary};
+      text-overflow: ellipsis;
+
+      transition:
+        margin-block-start 0.3s ${token.motionEaseInOut},
+        height 0.3s ${token.motionEaseInOut},
+        opacity 0.2s ${token.motionEaseInOut};
+    `,
+    hideDesc: css`
+      height: 0;
+      margin-block-start: 0;
+      opacity: 0;
+    `,
+  };
+});
+
+const CollapseDesc = memo<PropsWithChildren<{ hide?: boolean }>>(({ children, hide }) => {
+  const { cx, styles } = useStyles();
+
+  return (
+    <Text as={'p'} className={cx(styles.desc, hide && styles.hideDesc)}>
+      {children}
+    </Text>
+  );
+});
+
+export default CollapseDesc;

package/src/features/MCPPluginDetail/CollapseLayout.tsx

@@ -0,0 +1,34 @@
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Title, { TitleProps } from '../../app/[variants]/(main)/discover/features/Title';
+
+export type CollapseItemType = {
+  children: ReactNode;
+  key: string;
+  title: ReactNode;
+  titleProps?: TitleProps;
+};
+
+export interface CollapseLayoutProps {
+  items: CollapseItemType[];
+}
+
+const CollapseLayout = memo<CollapseLayoutProps>(({ items }) => {
+  return (
+    <Flexbox gap={24}>
+      {items.map((item) => (
+        <Flexbox gap={12} key={item.key}>
+          {item.title && (
+            <Title level={3} {...item.titleProps}>
+              {item.title}
+            </Title>
+          )}
+          {item.children}
+        </Flexbox>
+      ))}
+    </Flexbox>
+  );
+});
+
+export default CollapseLayout;

package/src/features/MCPPluginDetail/Deployment/Platform/index.tsx

@@ -0,0 +1,47 @@
+import { ConnectionConfig } from '@lobehub/market-types';
+import { Block, Highlighter } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+import { genServerConfig } from '@/features/MCP/utils';
+
+const useStyles = createStyles(({ css }) => {
+  return {
+    lite: css`
+      pre {
+        padding: 12px !important;
+      }
+    `,
+  };
+});
+
+interface PlatformProps {
+  connection?: ConnectionConfig;
+  identifier?: string;
+  lite?: boolean;
+  mobile?: boolean;
+}
+
+const Platform = memo<PlatformProps>(({ lite, identifier, connection }) => {
+  const serverConfig = genServerConfig(identifier, connection);
+  const { cx, styles } = useStyles();
+
+  return (
+    <Block gap={lite ? 0 : 16} padding={4} variant={lite ? 'outlined' : 'borderless'}>
+      <Highlighter
+        className={cx(lite && styles.lite)}
+        fileName={'MCP server config'}
+        fullFeatured
+        language={'json'}
+        style={{
+          fontSize: 12,
+        }}
+        variant={'filled'}
+      >
+        {serverConfig}
+      </Highlighter>
+    </Block>
+  );
+});
+
+export default Platform;

package/src/features/MCPPluginDetail/Deployment/index.tsx

@@ -0,0 +1,322 @@
+import { SiApple, SiLinux } from '@icons-pack/react-simple-icons';
+import { Microsoft } from '@lobehub/icons';
+import { ActionIcon, Block, Collapse, Icon, Snippet, Tag } from '@lobehub/ui';
+import { Divider, Empty, Popover, Steps } from 'antd';
+import { createStyles } from 'antd-style';
+import { startCase } from 'lodash-es';
+import {
+  CheckIcon,
+  CloudIcon,
+  CodeIcon,
+  DownloadIcon,
+  MinusIcon,
+  TerminalIcon,
+} from 'lucide-react';
+import { markdownToTxt } from 'markdown-to-txt';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import Descriptions from '@/components/Descriptions';
+import InlineTable from '@/components/InlineTable';
+
+import Title from '../../../app/[variants]/(main)/discover/features/Title';
+import InstallationIcon from '../../../components/MCPDepsIcon';
+import CollapseDesc from '../CollapseDesc';
+import CollapseLayout from '../CollapseLayout';
+import { useDetailContext } from '../DetailProvider';
+import Platform from './Platform';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    code: css`
+      font-family: ${token.fontFamilyCode};
+    `,
+  };
+});
+
+const Deployment = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { styles, theme } = useStyles();
+  const { t } = useTranslation('discover');
+  const { deploymentOptions = [], identifier } = useDetailContext();
+  const [activeKey, setActiveKey] = useState<string[]>(['0']);
+
+  if (!deploymentOptions)
+    return (
+      <Block variant="outlined">
+        <Empty
+          description={t('mcp.details.deployment.empty')}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      </Block>
+    );
+
+  const getConnectionTypeIcon = (type: string) => {
+    switch (type.toLowerCase()) {
+      case 'stdio': {
+        return <Icon icon={TerminalIcon} />;
+      }
+      default: {
+        return <Icon icon={CloudIcon} />;
+      }
+    }
+  };
+
+  const getPlatformIcon = (type: string) => {
+    switch (type.toLowerCase()) {
+      case 'macos': {
+        return <SiApple color={theme.colorTextDescription} size={16} />;
+      }
+      case 'windows': {
+        return <Microsoft color={theme.colorTextDescription} size={16} />;
+      }
+      case 'linux_debian': {
+        return <SiLinux color={theme.colorTextDescription} size={16} />;
+      }
+      case 'manual': {
+        return <CodeIcon color={theme.colorTextDescription} size={16} />;
+      }
+      default: {
+        return <CodeIcon color={theme.colorTextDescription} size={16} />;
+      }
+    }
+  };
+
+  return (
+    <Collapse
+      activeKey={activeKey}
+      expandIconPosition={'end'}
+      gap={24}
+      items={deploymentOptions.map((item, index) => {
+        let properties: {
+          description?: string;
+          name: string;
+          required?: boolean;
+          type: string;
+        }[] = [];
+        if (item.connection?.configSchema?.properties) {
+          properties = Object.entries(item.connection.configSchema.properties).map(
+            ([key, value]: any) => {
+              const required = item.connection.configSchema?.required?.includes(key);
+              return {
+                name: key,
+                required,
+                ...value,
+              };
+            },
+          );
+        }
+        const setupSteps = item?.installationDetails?.setupSteps || [];
+        const installCommand = [item.connection.command, item.connection.args?.join(' ')].join(' ');
+        const showSystemDependencies =
+          item?.systemDependencies && item.systemDependencies.length > 0;
+        return {
+          children: (
+            <CollapseLayout
+              items={[
+                {
+                  children: (
+                    <Platform
+                      connection={item.connection}
+                      identifier={identifier}
+                      mobile={mobile}
+                    />
+                  ),
+                  key: 'platform',
+                },
+                {
+                  children: (
+                    <>
+                      <p style={{ margin: 0 }}>{item.description}</p>
+                      {setupSteps && setupSteps.length > 0 && (
+                        <Steps
+                          current={-1}
+                          direction="vertical"
+                          items={setupSteps.map((i) => ({
+                            title: <p style={{ color: theme.colorText }}>{i}</p>,
+                          }))}
+                          progressDot
+                          size={'small'}
+                          style={{ marginTop: 12 }}
+                        />
+                      )}
+                      {item.connection.command && (
+                        <Snippet language={'shell'} prefix={'$'}>
+                          {installCommand}
+                        </Snippet>
+                      )}
+                    </>
+                  ),
+                  key: 'guide',
+                  title: t('mcp.details.deployment.guide'),
+                },
+                item.connection.configSchema && {
+                  children: (
+                    <InlineTable
+                      columns={[
+                        {
+                          dataIndex: 'name',
+                          render: (_, record) => (
+                            <span
+                              className={styles.code}
+                              style={{
+                                color: theme.gold,
+                              }}
+                            >
+                              {record.name}
+                            </span>
+                          ),
+                          title: t('mcp.details.deployment.table.name'),
+                        },
+                        {
+                          dataIndex: 'type',
+                          render: (_, record) => <Tag className={styles.code}>{record.type}</Tag>,
+                          title: t('mcp.details.deployment.table.type'),
+                        },
+                        {
+                          dataIndex: 'required',
+                          render: (_, record) => (
+                            <Icon
+                              color={
+                                record.required ? theme.colorSuccess : theme.colorTextDescription
+                              }
+                              icon={record.required ? CheckIcon : MinusIcon}
+                            />
+                          ),
+                          title: t('mcp.details.deployment.table.required'),
+                        },
+                        {
+                          dataIndex: 'description',
+                          title: t('mcp.details.deployment.table.description'),
+                        },
+                      ]}
+                      dataSource={properties}
+                      pagination={false}
+                      rowKey={'name'}
+                    />
+                  ),
+                  key: 'env',
+                  title: t('mcp.details.deployment.env'),
+                },
+                showSystemDependencies && {
+                  children: (
+                    <Descriptions
+                      bordered
+                      items={(item.systemDependencies || []).map((dep, i) => {
+                        return {
+                          icon: <InstallationIcon size={16} type={dep.name} />,
+                          key: `system-dependency-${i}`,
+                          label: dep.name,
+                          value: (
+                            <Flexbox align="center" gap={8} horizontal>
+                              <span
+                                style={{
+                                  fontFamily: theme.fontFamilyCode,
+                                  fontSize: 12,
+                                }}
+                              >
+                                {dep.requiredVersion || 'installed'}
+                              </span>
+                              {dep.installInstructions && (
+                                <Popover
+                                  arrow={false}
+                                  content={
+                                    <Flexbox gap={8}>
+                                      <Descriptions
+                                        items={Object.entries(dep.installInstructions).map(
+                                          ([system, code]) => ({
+                                            copyable: true,
+                                            icon: getPlatformIcon(system),
+                                            key: system,
+                                            label: (
+                                              <span style={{ fontSize: 13, fontWeight: 500 }}>
+                                                {system.toUpperCase()}
+                                              </span>
+                                            ),
+                                            style: {
+                                              fontFamily: theme.fontFamilyCode,
+                                              fontSize: 12,
+                                            },
+                                            value: code,
+                                          }),
+                                        )}
+                                        rows={1}
+                                      />
+                                      {dep.checkCommand && (
+                                        <>
+                                          <Divider style={{ margin: 0 }} />
+                                          <Descriptions
+                                            items={[
+                                              {
+                                                copyable: true,
+                                                key: 'check',
+                                                label: t('mcp.details.deployment.checkCommand'),
+                                                style: {
+                                                  fontFamily: theme.fontFamilyCode,
+                                                  fontSize: 12,
+                                                },
+                                                value: dep.checkCommand,
+                                              },
+                                            ]}
+                                            rows={1}
+                                          />
+                                        </>
+                                      )}
+                                    </Flexbox>
+                                  }
+                                  trigger={['hover']}
+                                >
+                                  <ActionIcon
+                                    color={theme.colorTextDescription}
+                                    icon={DownloadIcon}
+                                    size={'small'}
+                                  />
+                                </Popover>
+                              )}
+                            </Flexbox>
+                          ),
+                        };
+                      })}
+                    />
+                  ),
+                  key: 'commandLine',
+                  title: t('mcp.details.deployment.commandLine'),
+                },
+              ].filter(Boolean)}
+            />
+          ),
+          desc: (
+            <CollapseDesc hide={activeKey.includes(String(index))}>
+              {item.description && markdownToTxt(item.description)}
+            </CollapseDesc>
+          ),
+          key: String(index),
+          label: (
+            <Title
+              icon={<InstallationIcon size={20} type={item.installationMethod} />}
+              id={`deployment-${index}`}
+              tag={
+                <>
+                  <Tag icon={getConnectionTypeIcon(item.connection.type)}>
+                    {item.connection.type}
+                  </Tag>
+                  {item.isRecommended && (
+                    <Tag color="success">{t('mcp.details.deployment.recommended')}</Tag>
+                  )}
+                </>
+              }
+            >
+              {t('mcp.details.deployment.installation', {
+                method: startCase(item.installationMethod),
+              })}
+            </Title>
+          ),
+        };
+      })}
+      onChange={setActiveKey}
+      variant={'outlined'}
+    />
+  );
+});
+
+export default Deployment;

package/src/features/MCPPluginDetail/DetailProvider.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { type ReactNode, createContext, memo, use } from 'react';
+
+import { DiscoverMcpDetail } from '@/types/discover';
+
+export type DetailContextConfig = Partial<DiscoverMcpDetail>;
+
+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/features/MCPPluginDetail/Header.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { Github } from '@lobehub/icons';
+import { ActionIcon, Avatar, Button, Icon, Tag, Text, Tooltip } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import { CircleIcon, DotIcon, DownloadIcon, ScaleIcon, StarIcon } 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 OfficialIcon from '@/components/OfficialIcon';
+import Scores from '@/features/MCP/Scores';
+import { getLanguageColor, getRecommendedDeployment } from '@/features/MCP/utils';
+import { useCategory } from '@/hooks/useMCPCategory';
+
+import InstallationIcon from '../../components/MCPDepsIcon';
+import PublishedTime from '../../components/PublishedTime';
+import { useDetailContext } from './DetailProvider';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    desc: css`
+      color: ${token.colorTextSecondary};
+    `,
+    time: css`
+      font-size: 12px;
+      color: ${token.colorTextDescription};
+    `,
+    version: css`
+      font-family: ${token.fontFamilyCode};
+      font-size: 13px;
+    `,
+  };
+});
+
+const Header = memo<{ inModal?: boolean; mobile?: boolean }>(({ mobile: isMobile, inModal }) => {
+  const { t } = useTranslation('discover');
+  const {
+    name,
+    author,
+    version,
+    identifier,
+    icon,
+    updatedAt,
+    createdAt,
+    github,
+    isValidated,
+    promptsCount,
+    resourcesCount,
+    toolsCount,
+    deploymentOptions = [],
+    category,
+    installCount,
+    overview,
+    isClaimed,
+    isOfficial,
+  } = useDetailContext();
+  const { styles, theme } = useStyles();
+  const { mobile = isMobile } = useResponsive();
+
+  const recommendedDeployment = getRecommendedDeployment(deploymentOptions);
+  const categories = useCategory();
+  const cate = categories.find((c) => c.key === category);
+
+  const scores = (
+    <Scores
+      deploymentOptions={deploymentOptions}
+      github={github}
+      identifier={identifier as string}
+      isClaimed={isClaimed}
+      isValidated={isValidated}
+      overview={overview}
+      promptsCount={promptsCount}
+      resourcesCount={resourcesCount}
+      toolsCount={toolsCount}
+    />
+  );
+
+  const cateButton = (
+    <Link
+      href={qs.stringifyUrl({
+        query: { category: cate?.key },
+        url: '/discover/mcp',
+      })}
+    >
+      <Button icon={cate?.icon} size={'middle'} variant={'outlined'}>
+        {cate?.label}
+      </Button>
+    </Link>
+  );
+
+  return (
+    <Flexbox gap={12}>
+      <Flexbox align={'flex-start'} gap={16} horizontal width={'100%'}>
+        <Avatar avatar={icon} size={mobile ? 48 : 64} />
+        <Flexbox
+          flex={1}
+          gap={4}
+          style={{
+            overflow: 'hidden',
+          }}
+        >
+          <Flexbox
+            align={'center'}
+            gap={8}
+            horizontal
+            justify={'space-between'}
+            style={{
+              overflow: 'hidden',
+              position: 'relative',
+            }}
+          >
+            <Flexbox
+              align={'center'}
+              flex={1}
+              gap={12}
+              horizontal
+              style={{
+                overflow: 'hidden',
+                position: 'relative',
+              }}
+            >
+              <Text
+                as={'h1'}
+                ellipsis
+                style={{ fontSize: inModal ? 20 : mobile ? 18 : 24, margin: 0 }}
+                title={identifier}
+              >
+                {name}
+              </Text>
+              {isOfficial && (
+                <Tooltip title={t('isOfficial')}>
+                  <OfficialIcon size={24} />
+                </Tooltip>
+              )}
+              {!mobile && scores}
+            </Flexbox>
+            <Flexbox align={'center'} gap={6} horizontal>
+              {recommendedDeployment?.installationMethod && (
+                <InstallationIcon type={recommendedDeployment.installationMethod} />
+              )}
+              {github?.url && (
+                <Link href={github.url} onClick={(e) => e.stopPropagation()} target={'_blank'}>
+                  <ActionIcon fill={theme.colorTextDescription} icon={Github} />
+                </Link>
+              )}
+            </Flexbox>
+          </Flexbox>
+          <Flexbox align={'center'} gap={4} horizontal>
+            <div className={styles.version}>{version}</div>
+            <Icon icon={DotIcon} />
+            {author?.url ? (
+              <Link href={author?.url} target={'_blank'}>
+                {author?.name}
+              </Link>
+            ) : (
+              <span>{author?.name}</span>
+            )}
+            {isClaimed && <Tag size={'small'}>{t('isClaimed')}</Tag>}
+            <Icon icon={DotIcon} />
+            <PublishedTime
+              className={styles.time}
+              date={(updatedAt || createdAt) as string}
+              template={'MMM DD, YYYY'}
+            />
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+      <Flexbox
+        align={'center'}
+        gap={mobile ? 12 : 24}
+        horizontal
+        style={{
+          color: theme.colorTextSecondary,
+        }}
+        wrap={'wrap'}
+      >
+        {mobile && scores}
+        {!mobile && cateButton}
+        <Flexbox align={'center'} gap={mobile ? 12 : 24} horizontal wrap={'wrap'}>
+          {Boolean(github?.language) && (
+            <Flexbox align={'center'} gap={6} horizontal>
+              <Icon
+                color={theme.colorFillTertiary}
+                fill={getLanguageColor(github?.language)}
+                icon={CircleIcon}
+                size={12}
+              />
+              {github?.language}
+            </Flexbox>
+          )}
+          {Boolean(github?.license) && (
+            <Flexbox align={'center'} gap={6} horizontal>
+              <Icon icon={ScaleIcon} size={14} />
+              {github?.license}
+            </Flexbox>
+          )}
+          {Boolean(installCount) && (
+            <Flexbox align={'center'} gap={6} horizontal>
+              <Icon icon={DownloadIcon} size={14} />
+              {installCount}
+            </Flexbox>
+          )}
+          {Boolean(github?.stars) && (
+            <Flexbox align={'center'} gap={6} horizontal>
+              <Icon icon={StarIcon} size={14} />
+              {github?.stars}
+            </Flexbox>
+          )}
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Header;