@lobehub/chat 1.96.20 → 1.97.0

package/src/features/MCPPluginDetail/Nav.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import { Icon, Tabs, TabsProps, Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import {
+  BookOpenIcon,
+  CodeIcon,
+  DownloadIcon,
+  HistoryIcon,
+  ListIcon,
+  PackageCheckIcon,
+  SettingsIcon,
+} from 'lucide-react';
+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 { SOCIAL_URL } from '@/const/branding';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+import { McpNavKey } from '@/types/discover';
+
+import { useDetailContext } from './DetailProvider';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    link: css`
+      color: ${token.colorTextDescription};
+
+      &:hover {
+        color: ${token.colorInfo};
+      }
+    `,
+    nav: css`
+      border-block-end: 1px solid ${token.colorBorder};
+    `,
+  };
+});
+
+interface NavProps {
+  activeTab?: McpNavKey;
+  inModal?: boolean;
+  mobile?: boolean;
+  noSettings?: boolean;
+  setActiveTab?: (tab: McpNavKey) => void;
+}
+const Nav = memo<NavProps>(
+  ({ mobile, noSettings, setActiveTab, activeTab = McpNavKey.Overview, inModal }) => {
+    const { t } = useTranslation('discover');
+    const {
+      versions,
+      deploymentOptions,
+      toolsCount,
+      resourcesCount,
+      promptsCount,
+      github,
+      identifier,
+    } = useDetailContext();
+    const { styles } = useStyles();
+
+    // 检查插件是否已安装
+    const installedPlugin = useToolStore(pluginSelectors.getInstalledPluginById(identifier));
+
+    const deploymentCount = deploymentOptions?.length || 0;
+    const schemaCount = Number(toolsCount) + Number(promptsCount) + Number(resourcesCount);
+    const versionCount = versions?.length || 0;
+
+    const nav = (
+      <Tabs
+        activeKey={activeTab}
+        compact={mobile}
+        items={
+          [
+            // 只有已安装的插件才显示设置 tab
+            !noSettings &&
+              installedPlugin && {
+                icon: <Icon icon={SettingsIcon} size={16} />,
+                key: McpNavKey.Settings,
+                label: t('mcp.details.settings.title'),
+              },
+            {
+              icon: <Icon icon={BookOpenIcon} size={16} />,
+              key: McpNavKey.Overview,
+              label: t('mcp.details.overview.title'),
+            },
+            {
+              icon: <Icon icon={DownloadIcon} size={16} />,
+              key: McpNavKey.Deployment,
+              label:
+                deploymentCount > 1 ? (
+                  <Flexbox
+                    align={'center'}
+                    gap={6}
+                    horizontal
+                    style={{
+                      display: 'inline-flex',
+                    }}
+                  >
+                    {t('mcp.details.deployment.title')}
+                    <Tag>{deploymentCount}</Tag>
+                  </Flexbox>
+                ) : (
+                  t('mcp.details.deployment.title')
+                ),
+            },
+            {
+              icon: <Icon icon={CodeIcon} size={16} />,
+              key: McpNavKey.Schema,
+              label:
+                schemaCount > 1 ? (
+                  <Flexbox
+                    align={'center'}
+                    gap={6}
+                    horizontal
+                    style={{
+                      display: 'inline-flex',
+                    }}
+                  >
+                    {t('mcp.details.schema.title')}
+                    <Tag>{schemaCount}</Tag>
+                  </Flexbox>
+                ) : (
+                  t('mcp.details.schema.title')
+                ),
+            },
+            !inModal && {
+              icon: <Icon icon={ListIcon} size={16} />,
+              key: McpNavKey.Related,
+              label: t('mcp.details.related.title'),
+            },
+            {
+              icon: <Icon icon={PackageCheckIcon} size={16} />,
+              key: McpNavKey.Score,
+              label: t('mcp.details.score.title'),
+            },
+
+            !inModal && {
+              icon: <Icon icon={HistoryIcon} size={16} />,
+              key: McpNavKey.Version,
+              label:
+                versionCount > 1 ? (
+                  <Flexbox
+                    align={'center'}
+                    gap={6}
+                    horizontal
+                    style={{
+                      display: 'inline-flex',
+                    }}
+                  >
+                    {t('mcp.details.versions.title')}
+                    <Tag>{versionCount}</Tag>
+                  </Flexbox>
+                ) : (
+                  t('mcp.details.versions.title')
+                ),
+            },
+          ].filter(Boolean) as TabsProps['items']
+        }
+        onChange={(key) => setActiveTab?.(key as McpNavKey)}
+      />
+    );
+
+    return mobile ? (
+      nav
+    ) : (
+      <Flexbox align={'center'} className={styles.nav} horizontal justify={'space-between'}>
+        {nav}
+        {!inModal && (
+          <Flexbox gap={12} horizontal>
+            <Link className={styles.link} href={SOCIAL_URL.discord} target={'_blank'}>
+              {t('mcp.details.nav.needHelp')}
+            </Link>
+            {github?.url && (
+              <>
+                <Link className={styles.link} href={github.url} target={'_blank'}>
+                  {t('mcp.details.nav.viewSourceCode')}
+                </Link>
+                <Link
+                  className={styles.link}
+                  href={urlJoin(github.url, 'issues')}
+                  target={'_blank'}
+                >
+                  {t('mcp.details.nav.reportIssue')}
+                </Link>
+              </>
+            )}
+          </Flexbox>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default Nav;

package/src/features/MCPPluginDetail/Overview/TagList.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import qs from 'query-string';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    tag: css`
+      margin: 0;
+      padding-block: 4px;
+      padding-inline: 12px;
+      border-radius: 16px;
+
+      color: ${token.colorTextSecondary};
+    `,
+  };
+});
+
+const TagList = memo<{ tags: string[] }>(({ tags }) => {
+  const { styles } = useStyles();
+  const showTags = Boolean(tags?.length && tags?.length > 0);
+  return (
+    showTags && (
+      <Flexbox gap={8} horizontal wrap={'wrap'}>
+        {tags.map((tag) => (
+          <Link
+            href={qs.stringifyUrl({
+              query: {
+                q: tag,
+              },
+              url: '/discover/mcp',
+            })}
+            key={tag}
+          >
+            <Tag className={styles.tag}>{tag}</Tag>
+          </Link>
+        ))}
+      </Flexbox>
+    )
+  );
+});
+
+export default TagList;

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

@@ -0,0 +1,57 @@
+import { Collapse, Markdown } from '@lobehub/ui';
+import qs from 'query-string';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import MarkdownRender from '../../../app/[variants]/(main)/discover/(detail)/features/MakedownRender';
+import McpList from '../../../app/[variants]/(main)/discover/(list)/mcp/features/List';
+import Title from '../../../app/[variants]/(main)/discover/features/Title';
+import { useDetailContext } from '../DetailProvider';
+import TagList from './TagList';
+
+const Overview = memo<{ inModal?: boolean }>(({ inModal }) => {
+  const { t } = useTranslation('discover');
+  const { related = [], category, tags = [], description, overview } = useDetailContext();
+
+  const summary = overview?.summary || description;
+
+  return (
+    <Flexbox gap={48}>
+      <Collapse
+        defaultActiveKey={['summary']}
+        expandIconPosition={'end'}
+        items={[
+          {
+            children: !!summary ? <Markdown>{summary}</Markdown> : summary,
+            key: 'summary',
+            label: t('mcp.details.summary.title'),
+          },
+        ]}
+        variant={'outlined'}
+      />
+      <Flexbox gap={16}>
+        {overview?.readme && <MarkdownRender>{overview.readme.trimEnd()}</MarkdownRender>}
+        <TagList tags={tags} />
+      </Flexbox>
+      {!inModal && (
+        <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>
+      )}
+    </Flexbox>
+  );
+});
+
+export default Overview;

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

@@ -0,0 +1,50 @@
+import { Segmented, Tag } from '@lobehub/ui';
+import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import Title from '../../../app/[variants]/(main)/discover/features/Title';
+import { ModeType } from './types';
+
+interface BlockProps {
+  children?: ReactNode;
+  count: number;
+  desc: string;
+  id?: string;
+  mode?: ModeType;
+  setMode?: (mode: ModeType) => void;
+  title: string;
+}
+
+const Block = memo<BlockProps>(({ title, count, desc, children, mode, setMode, id }) => {
+  const { t } = useTranslation('discover');
+  return (
+    <Flexbox gap={8}>
+      <Flexbox align={'center'} gap={12} horizontal justify={'space-between'}>
+        <Title id={id} tag={<Tag>{count}</Tag>}>
+          {title}
+        </Title>
+        <Segmented
+          onChange={(v) => setMode?.(v as ModeType)}
+          options={[
+            {
+              label: t('mcp.details.schema.mode.docs'),
+              value: ModeType.Docs,
+            },
+            {
+              label: 'JSON',
+              value: ModeType.JSON,
+            },
+          ]}
+          shape={'round'}
+          value={mode}
+          variant={'outlined'}
+        />
+      </Flexbox>
+      <p style={{ marginBottom: 24 }}>{desc}</p>
+      {children}
+    </Flexbox>
+  );
+});
+
+export default Block;

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

@@ -0,0 +1,125 @@
+import { Block, Collapse, Highlighter, Icon, Markdown } 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 Prompts = memo<{
+  activeKey?: string[];
+  mode?: ModeType;
+  setActiveKey?: (key: string[]) => void;
+}>(({ mode, activeKey = [], setActiveKey }) => {
+  const { t } = useTranslation('discover');
+  const { prompts } = useDetailContext();
+  const { styles, theme } = useStyles();
+
+  if (!prompts)
+    return (
+      <Block variant={'outlined'}>
+        <Empty
+          description={t('mcp.details.schema.prompts.empty')}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      </Block>
+    );
+
+  return (
+    <Collapse
+      activeKey={activeKey}
+      expandIconPosition={'end'}
+      gap={8}
+      items={prompts.map((item) => {
+        return {
+          children: (
+            <CollapseLayout
+              items={[
+                {
+                  children: <Markdown>{item.description || ''}</Markdown>,
+                  key: 'instructions',
+                  title: t('mcp.details.schema.prompts.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.prompts.table.name'),
+                          },
+                          {
+                            dataIndex: 'required',
+                            render: (_, record) => (
+                              <Icon
+                                color={
+                                  record.required ? theme.colorSuccess : theme.colorTextDescription
+                                }
+                                icon={record.required ? CheckIcon : MinusIcon}
+                              />
+                            ),
+                            title: t('mcp.details.schema.prompts.table.required'),
+                          },
+                          {
+                            dataIndex: 'description',
+                            title: t('mcp.details.schema.prompts.table.description'),
+                          },
+                        ]}
+                        dataSource={item.arguments}
+                        pagination={false}
+                        rowKey={'name'}
+                      />
+                    ) : (
+                      <Highlighter
+                        language={'json'}
+                        style={{ fontSize: 12 }}
+                        variant={'borderless'}
+                      >
+                        {JSON.stringify(item.arguments, null, 2)}
+                      </Highlighter>
+                    ),
+                  key: 'arguments',
+                  title: t('mcp.details.schema.prompts.arguments'),
+                },
+              ]}
+            />
+          ),
+          desc: item.description && (
+            <CollapseDesc hide={activeKey.includes(item.name)}>
+              {markdownToTxt(item.description)}
+            </CollapseDesc>
+          ),
+          key: item.name,
+          label: (
+            <Title id={`prompts-${item.name}`} level={3}>
+              {item.name}
+            </Title>
+          ),
+        };
+      })}
+      onChange={setActiveKey}
+      variant={'outlined'}
+    />
+  );
+});
+
+export default Prompts;

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;