@lobehub/chat 1.96.20 → 1.97.1

package/src/features/MCPPluginDetail/Schema/Resources.tsx

@@ -0,0 +1,70 @@
+import { Block, Highlighter, Tag } from '@lobehub/ui';
+import { Empty } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import InlineTable from '@/components/InlineTable';
+
+import { useDetailContext } from '../DetailProvider';
+import { useStyles } from './style';
+import { ModeType } from './types';
+
+const Resources = memo<{ mode?: ModeType }>(({ mode }) => {
+  const { t } = useTranslation('discover');
+  const { resources } = useDetailContext();
+  const { styles, theme } = useStyles();
+
+  if (!resources)
+    return (
+      <Block variant={'outlined'}>
+        <Empty
+          description={t('mcp.details.schema.resources.empty')}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      </Block>
+    );
+
+  return mode === ModeType.Docs ? (
+    <Block style={{ overflow: 'hidden' }} variant={'outlined'}>
+      <InlineTable
+        columns={[
+          {
+            dataIndex: 'name',
+            key: 'name',
+            render: (text) => (
+              <span className={styles.code} style={{ color: theme.gold }}>
+                {text}
+              </span>
+            ),
+            title: t('mcp.details.schema.resources.table.name'),
+          },
+          {
+            dataIndex: 'mimeType',
+            key: 'mimeType',
+            render: (_, record) => <Tag className={styles.code}>{record.mimeType}</Tag>,
+            title: t('mcp.details.schema.resources.table.mineType'),
+          },
+          {
+            dataIndex: 'uri',
+            key: 'uri',
+            title: t('mcp.details.schema.resources.table.uri'),
+          },
+          {
+            dataIndex: 'description',
+            key: 'description',
+            title: t('mcp.details.schema.resources.table.description'),
+          },
+        ]}
+        dataSource={resources}
+        pagination={false}
+        size={'middle'}
+      />
+    </Block>
+  ) : (
+    <Highlighter language={'json'} style={{ fontSize: 12 }} variant={'outlined'}>
+      {JSON.stringify(resources, null, 2)}
+    </Highlighter>
+  );
+});
+
+export default Resources;

package/src/features/MCPPluginDetail/Schema/Tools.tsx

@@ -0,0 +1,146 @@
+import { Block, Collapse, Highlighter, Icon, Markdown, Tag } from '@lobehub/ui';
+import { Empty } from 'antd';
+import { CheckIcon, MinusIcon } from 'lucide-react';
+import { markdownToTxt } from 'markdown-to-txt';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import InlineTable from '@/components/InlineTable';
+
+import Title from '../../../app/[variants]/(main)/discover/features/Title';
+import CollapseDesc from '../CollapseDesc';
+import CollapseLayout from '../CollapseLayout';
+import { useDetailContext } from '../DetailProvider';
+import { useStyles } from './style';
+import { ModeType } from './types';
+
+const Tools = memo<{
+  activeKey?: string[];
+  mode?: ModeType;
+  setActiveKey?: (key: string[]) => void;
+}>(({ mode, activeKey = [], setActiveKey }) => {
+  const { t } = useTranslation('discover');
+  const { tools } = useDetailContext();
+  const { styles, theme } = useStyles();
+
+  if (!tools)
+    return (
+      <Block variant={'outlined'}>
+        <Empty
+          description={t('mcp.details.schema.tools.empty')}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      </Block>
+    );
+
+  return (
+    <Collapse
+      activeKey={activeKey}
+      expandIconPosition={'end'}
+      gap={8}
+      items={tools.map((item) => {
+        let properties: {
+          description?: string;
+          name: string;
+          required?: boolean;
+          type: string;
+        }[] = [];
+        if (item.inputSchema?.properties) {
+          properties = Object.entries(item.inputSchema.properties).map(([key, value]: any) => {
+            const required = item.inputSchema?.required?.includes(key);
+            return {
+              name: key,
+              required,
+              ...value,
+            };
+          });
+        }
+        return {
+          children: (
+            <CollapseLayout
+              items={[
+                {
+                  children: <Markdown>{item.description || ''}</Markdown>,
+                  key: 'instructions',
+                  title: t('mcp.details.schema.tools.instructions'),
+                },
+                {
+                  children:
+                    mode === ModeType.Docs ? (
+                      <InlineTable
+                        columns={[
+                          {
+                            dataIndex: 'name',
+                            render: (_, record) => (
+                              <span
+                                className={styles.code}
+                                style={{
+                                  color: theme.gold,
+                                }}
+                              >
+                                {record.name}
+                              </span>
+                            ),
+                            title: t('mcp.details.schema.tools.table.name'),
+                          },
+                          {
+                            dataIndex: 'type',
+                            render: (_, record) => <Tag className={styles.code}>{record.type}</Tag>,
+                            title: t('mcp.details.schema.tools.table.type'),
+                          },
+                          {
+                            dataIndex: 'required',
+                            render: (_, record) => (
+                              <Icon
+                                color={
+                                  record.required ? theme.colorSuccess : theme.colorTextDescription
+                                }
+                                icon={record.required ? CheckIcon : MinusIcon}
+                              />
+                            ),
+                            title: t('mcp.details.schema.tools.table.required'),
+                          },
+                          {
+                            dataIndex: 'description',
+                            title: t('mcp.details.schema.tools.table.description'),
+                          },
+                        ]}
+                        dataSource={properties}
+                        pagination={false}
+                        rowKey={'name'}
+                      />
+                    ) : (
+                      <Highlighter
+                        language={'json'}
+                        style={{ fontSize: 12 }}
+                        variant={'borderless'}
+                      >
+                        {JSON.stringify(item.inputSchema, null, 2)}
+                      </Highlighter>
+                    ),
+                  key: 'inputSchema',
+                  title: t('mcp.details.schema.tools.inputSchema'),
+                },
+              ]}
+            />
+          ),
+          desc: item.description && (
+            <CollapseDesc hide={activeKey.includes(item.name)}>
+              {markdownToTxt(item.description)}
+            </CollapseDesc>
+          ),
+          key: item.name,
+          label: (
+            <Title id={`tools-${item.name}`} level={3}>
+              {item.name}
+            </Title>
+          ),
+        };
+      })}
+      onChange={setActiveKey}
+      variant={'outlined'}
+    />
+  );
+});
+
+export default Tools;

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

@@ -0,0 +1,63 @@
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useDetailContext } from '../DetailProvider';
+import Block from './Block';
+import Prompts from './Prompts';
+import Resources from './Resources';
+import Tools from './Tools';
+import { ModeType } from './types';
+
+const Schema = memo(() => {
+  const { t } = useTranslation('discover');
+  const { promptsCount, toolsCount, resourcesCount } = useDetailContext();
+  const [toolsActiveKey, setToolsActiveKey] = useState<string[]>([]);
+  const [toolsMode, setToolsMode] = useState<ModeType>(ModeType.Docs);
+  const [promptsActiveKey, setPromptsActiveKey] = useState<string[]>([]);
+  const [promptsMode, setPromptsMode] = useState<ModeType>(ModeType.Docs);
+  const [resourcesMode, setResourcesMode] = useState<ModeType>(ModeType.Docs);
+
+  return (
+    <Flexbox gap={64}>
+      <Block
+        count={toolsCount || 0}
+        desc={t('mcp.details.schema.tools.desc')}
+        id={'tools'}
+        mode={toolsMode}
+        setMode={setToolsMode}
+        title={t('mcp.details.schema.tools.title')}
+      >
+        <Tools activeKey={toolsActiveKey} mode={toolsMode} setActiveKey={setToolsActiveKey} />
+      </Block>
+
+      <Block
+        count={promptsCount || 0}
+        desc={t('mcp.details.schema.prompts.desc')}
+        id={'prompts'}
+        mode={promptsMode}
+        setMode={setPromptsMode}
+        title={t('mcp.details.schema.prompts.title')}
+      >
+        <Prompts
+          activeKey={promptsActiveKey}
+          mode={promptsMode}
+          setActiveKey={setPromptsActiveKey}
+        />
+      </Block>
+
+      <Block
+        count={resourcesCount || 0}
+        desc={t('mcp.details.schema.resources.desc')}
+        id={'resources'}
+        mode={resourcesMode}
+        setMode={setResourcesMode}
+        title={t('mcp.details.schema.resources.title')}
+      >
+        <Resources mode={resourcesMode} />
+      </Block>
+    </Flexbox>
+  );
+});
+
+export default Schema;

package/src/features/MCPPluginDetail/Schema/style.ts

@@ -0,0 +1,9 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => {
+  return {
+    code: css`
+      font-family: ${token.fontFamilyCode};
+    `,
+  };
+});

package/src/features/MCPPluginDetail/Schema/types.ts

@@ -0,0 +1,4 @@
+export enum ModeType {
+  Docs = 'docs',
+  JSON = 'json',
+}

package/src/features/MCPPluginDetail/Score/GithubBadge/index.tsx

@@ -0,0 +1,82 @@
+import { Markdown, Select, Snippet, Tag } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+
+import { OFFICIAL_SITE } from '@/const/url';
+
+import { useDetailContext } from '../../DetailProvider';
+
+type BadgeStyle = 'flat' | 'flat-square' | 'plastic' | 'for-the-badge';
+type BadgeTheme = 'dark' | 'light';
+
+const GithubBadge = memo(() => {
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+  const { identifier = '' } = useDetailContext();
+  const [selectedStyle, setSelectedStyle] = useState<BadgeStyle>('flat-square');
+  const [selectedTheme, setSelectedTheme] = useState<BadgeTheme>('dark');
+
+  const pageUrl = urlJoin(OFFICIAL_SITE, 'mcp', identifier);
+  const badgeUrl = urlJoin(OFFICIAL_SITE, 'badge/mcp', identifier);
+  const styledBadgeUrl =
+    selectedStyle === 'flat-square' ? badgeUrl : `${badgeUrl}?style=${selectedStyle}`;
+
+  const badgeFullUrl = urlJoin(OFFICIAL_SITE, 'badge/mcp-full', identifier);
+
+  // 构建带主题参数的完整 badge URL
+  const styledBadgeFullUrl =
+    selectedTheme === 'dark' ? badgeFullUrl : `${badgeFullUrl}?theme=${selectedTheme}`;
+
+  const badgeLite = `[![MCP Badge](${styledBadgeUrl})](${pageUrl})`;
+
+  const badge = `[![MCP Badge](${styledBadgeFullUrl})](${pageUrl})`;
+
+  const styleOptions = [
+    { label: 'Flat Square', value: 'flat-square' },
+    { label: 'Flat', value: 'flat' },
+    { label: 'Plastic', value: 'plastic' },
+    { label: 'For The Badge', value: 'for-the-badge' },
+  ];
+
+  const themeOptions = [
+    { label: 'Dark', value: 'dark' },
+    { label: 'Light', value: 'light' },
+  ];
+
+  return (
+    <>
+      <Markdown>{t('mcp.details.githubBadge.desc')}</Markdown>
+
+      <Select
+        onChange={setSelectedStyle}
+        options={styleOptions}
+        prefix={<Tag style={{ marginRight: 4 }}>style</Tag>}
+        value={selectedStyle}
+      />
+      <Snippet language={'md'} style={{ fontSize: 12 }} variant={'outlined'}>
+        {badgeLite}
+      </Snippet>
+      <img
+        alt="MCP Badge"
+        height={selectedStyle === 'for-the-badge' ? 28 : 20}
+        src={styledBadgeUrl}
+      />
+      <Divider style={{ color: theme.colorTextDescription, fontSize: 12 }}>OR</Divider>
+      <Select
+        onChange={setSelectedTheme}
+        options={themeOptions}
+        prefix={<Tag style={{ marginRight: 4 }}>theme</Tag>}
+        value={selectedTheme}
+      />
+      <Snippet language={'md'} style={{ fontSize: 12 }} variant={'outlined'}>
+        {badge}
+      </Snippet>
+      <img alt="MCP Badge" src={styledBadgeFullUrl} />
+    </>
+  );
+});
+
+export default GithubBadge;

package/src/features/MCPPluginDetail/Score/ScoreItem.tsx

@@ -0,0 +1,34 @@
+import { Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { BanIcon, CircleCheckBigIcon, CircleDashedIcon } from 'lucide-react';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Title from '../../../app/[variants]/(main)/discover/features/Title';
+
+export interface ScoreItemProps {
+  check: boolean;
+  desc: ReactNode;
+  key: string;
+  required?: boolean;
+  title: ReactNode;
+}
+
+const ScoreItem = memo<ScoreItemProps>(({ required, check, desc, title }) => {
+  const theme = useTheme();
+  return (
+    <Flexbox align={'center'} gap={16} horizontal paddingInline={16}>
+      <Icon
+        color={check ? theme.colorSuccess : required ? theme.colorError : theme.colorTextQuaternary}
+        icon={check ? CircleCheckBigIcon : required ? BanIcon : CircleDashedIcon}
+        size={24}
+      />
+      <Flexbox gap={4}>
+        <Title level={3}>{title}</Title>
+        <p style={{ color: theme.colorTextSecondary, margin: 0 }}>{desc}</p>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ScoreItem;

package/src/features/MCPPluginDetail/Score/ScoreList.tsx

@@ -0,0 +1,24 @@
+import { Divider } from 'antd';
+import { Fragment, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import ScoreItem, { ScoreItemProps } from './ScoreItem';
+
+interface ScoreListProps {
+  items: ScoreItemProps[];
+}
+
+const ScoreList = memo<ScoreListProps>(({ items }) => {
+  return (
+    <Flexbox gap={16} paddingBlock={16}>
+      {items.map((item, index) => (
+        <Fragment key={item.key}>
+          <ScoreItem {...item} key={item.key} />
+          {index < items.length - 1 && <Divider style={{ margin: 0 }} />}
+        </Fragment>
+      ))}
+    </Flexbox>
+  );
+});
+
+export default ScoreList;