@lobehub/chat 1.96.20 → 1.97.1

package/src/features/MCP/utils.ts

@@ -0,0 +1,225 @@
+import { ConnectionConfig, DeploymentOption } from '@lobehub/market-types';
+
+export const genServerConfig = (identifier?: string, connection?: ConnectionConfig) =>
+  JSON.stringify(
+    {
+      mcpServers: {
+        [String(identifier)]: {
+          args: connection?.args || [],
+          command: connection?.command || {},
+        },
+      },
+    },
+    null,
+    2,
+  );
+
+export const getRecommendedDeployment = (deploymentOptions: DeploymentOption[]) =>
+  deploymentOptions?.find((item) => item.isRecommended) || deploymentOptions?.[0];
+
+const languageColors: Record<string, string> = {
+  'abap': '#e8274b',
+  'actionscript': '#882b0f',
+  'ada': '#02f88c',
+  'agda': '#315665',
+  'ags script': '#b9d9ff',
+  'alloy': '#64c800',
+  'ampl': '#e6efbb',
+  'antlr': '#9dc3ff',
+  'api blueprint': '#2acca8',
+  'apl': '#5a8164',
+  'arc': '#aa2afe',
+  'arduino': '#bd79d1',
+  'asp': '#6a40fd',
+  'aspectj': '#a957b0',
+  'assembly': '#6e4c13',
+  'ats': '#1ac620',
+  'autohotkey': '#6594b9',
+  'autoit': '#1c3552',
+  'blitzmax': '#cd6400',
+  'boo': '#d4bec1',
+  'brainfuck': '#2f2530',
+  'c': '#555555',
+  'c sharp': '#178600',
+  'chapel': '#8dc63f',
+  'cirru': '#ccccff',
+  'clarion': '#db901e',
+  'clean': '#3f85af',
+  'click': '#e4e6f3',
+  'clojure': '#db5855',
+  'coffeescript': '#244776',
+  'coldfusion': '#ed2cd6',
+  'coldfusion cfc': '#ed2cd6',
+  'common lisp': '#3fb68b',
+  'component pascal': '#b0ce4e',
+  'cpp': '#f34b7d',
+  'crystal': '#776791',
+  'css': '#563d7c',
+  'd': '#ba595e',
+  'dart': '#00b4ab',
+  'diff': '#88dddd',
+  'dm': '#447265',
+  'dogescript': '#cca760',
+  'dylan': '#6c616e',
+  'e': '#ccce35',
+  'eagle': '#814c05',
+  'ec': '#913960',
+  'ecl': '#8a1267',
+  'edn': '#db5855',
+  'eiffel': '#946d57',
+  'elixir': '#6e4a7e',
+  'elm': '#60b5cc',
+  'emacs lisp': '#c065db',
+  'emberscript': '#fff4f3',
+  'erlang': '#b83998',
+
+  'f#': '#b845fc',
+  'factor': '#636746',
+  'fancy': '#7b9db4',
+  'fantom': '#dbded5',
+  'flux': '#88ccff',
+  'forth': '#341708',
+  'fortran': '#4d41b1',
+  'freemarker': '#0050b2',
+  'frege': '#00cafe',
+  'game maker language': '#8fb200',
+  'glyph': '#e4cc98',
+  'gnuplot': '#f0a9f0',
+  'go': '#375eab',
+  'golo': '#88562a',
+  'gosu': '#82937f',
+  'grammatical framework': '#79aa7a',
+  'groovy': '#e69f56',
+  'handlebars': '#01a9d6',
+  'harbour': '#0e60e3',
+  'haskell': '#29b544',
+  'haxe': '#df7900',
+  'html': '#e44b23',
+  'hy': '#7790b2',
+  'idl': '#a3522f',
+  'io': '#a9188d',
+  'ioke': '#078193',
+  'isabelle': '#fefe00',
+  'j': '#9eedff',
+  'java': '#b07219',
+  'javascript': '#f1e05a',
+  'jflex': '#dbca00',
+  'jsoniq': '#40d47e',
+  'julia': '#a270ba',
+  'jupyter notebook': '#da5b0b',
+  'kotlin': '#f18e33',
+  'krl': '#28431f',
+  'lasso': '#999999',
+  'latte': '#a8ff97',
+  'lex': '#dbca00',
+  'lfe': '#004200',
+  'livescript': '#499886',
+  'lols code': '#cc9900',
+  'lookml': '#652b81',
+  'lsl': '#3d9970',
+  'lua': '#000080',
+  'makefile': '#427819',
+  'mask': '#f97732',
+  'matlab': '#bb92ac',
+  'max': '#c4a79c',
+  'maxscript': '#00a6a6',
+  'mercury': '#ff2b2b',
+  'metal': '#8f14e9',
+  'mirah': '#c7a938',
+  'mtml': '#b7e1f4',
+  'ncl': '#28431f',
+  'nemerle': '#3d3c6e',
+  'nesc': '#94b0c7',
+  'netlinx': '#0aa0ff',
+  'netlinx+erb': '#747faa',
+  'netlogo': '#ff6375',
+  'newlisp': '#87aed7',
+  'nimrod': '#37775b',
+  'nit': '#009917',
+  'nix': '#7e7eff',
+  'nu': '#c9df40',
+  'objective-c': '#438eff',
+  'objective-c++': '#6866fb',
+  'objective-j': '#ff0c5a',
+  'ocaml': '#3be133',
+  'omgrofl': '#cabbff',
+  'ooc': '#b0b77e',
+  'opal': '#f7ede0',
+  'oxygene': '#cdd0e3',
+  'oz': '#fab738',
+  'pan': '#cc0000',
+  'papyrus': '#6600cc',
+  'parrot': '#f3ca0a',
+  'pascal': '#b0ce4e',
+  'pawn': '#dbb284',
+  'perl': '#0298c3',
+  'perl6': '#0000fb',
+  'php': '#4f5d95',
+  'piglatin': '#fcd7de',
+  'pike': '#005390',
+  'plsql': '#dad8d8',
+  'pogoscript': '#d80074',
+  'processing': '#0096d8',
+  'prolog': '#74283c',
+  'propeller spin': '#7fa2a7',
+  'puppet': '#302b6d',
+  'pure data': '#91de79',
+  'purebasic': '#5a6986',
+  'purescript': '#1d222d',
+  'python': '#3572a5',
+  'qml': '#44a51c',
+  'r': '#198ce7',
+  'racket': '#22228f',
+  'ragel in ruby host': '#9d5200',
+  'raml': '#77d9fb',
+  'rebol': '#358a5b',
+  'red': '#ee0000',
+  "ren'py": '#ff7f7f',
+  'rouge': '#cc0088',
+  'ruby': '#701516',
+  'rust': '#dea584',
+  'saltstack': '#646464',
+  'sas': '#b34936',
+  'scala': '#dc322f',
+  'scheme': '#1e4aec',
+  'self': '#0579aa',
+  'shell': '#89e051',
+  'shen': '#120f14',
+  'slash': '#007eff',
+  'slim': '#ff8f77',
+  'smalltalk': '#596706',
+  'sourcepawn': '#5c7611',
+  'sqf': '#3f3f3f',
+  'squirrel': '#800000',
+  'stan': '#b2011d',
+  'standard ml': '#dc566d',
+  'supercollider': '#46390b',
+  'swift': '#ffac45',
+  'systemverilog': '#dae1c2',
+  'tcl': '#e4cc98',
+  'tex': '#3d6117',
+  'turing': '#45f715',
+  'typescript': '#2b7489',
+  'unified parallel c': '#4e3617',
+  'unity3d asset': '#ab69a1',
+  'unrealscript': '#a54c4d',
+  'vala': '#fbe5cd',
+  'verilog': '#b2b7f8',
+  'vhdl': '#adb2cb',
+  'viml': '#199f4b',
+  'visual basic': '#945db7',
+  'volt': '#1f1f1f',
+  'vue': '#2c3e50',
+  'web ontology language': '#9cc9dd',
+  'wisp': '#7582d1',
+  'x10': '#4b6bef',
+  'xbase': '#403a40',
+  'xc': '#99da07',
+  'xquery': '#5232e7',
+  'zephir': '#118f9e',
+};
+
+export const getLanguageColor = (lang?: string): string => {
+  if (!lang) return '#000000';
+  return languageColors[lang.toLowerCase()] || '#000000'; // Default to black if not found
+};

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);
+};