diff --git a/packages/twenty-front/public/images/ai/ai-mcp-cover-dark.svg b/packages/twenty-front/public/images/ai/ai-mcp-cover-dark.svg deleted file mode 100644 index 4a94912207..0000000000 --- a/packages/twenty-front/public/images/ai/ai-mcp-cover-dark.svg +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file diff --git a/packages/twenty-front/public/images/ai/ai-mcp-cover-light.svg b/packages/twenty-front/public/images/ai/ai-mcp-cover-light.svg deleted file mode 100644 index 96d553552c..0000000000 --- a/packages/twenty-front/public/images/ai/ai-mcp-cover-light.svg +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsAiMCP.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsAiMCP.tsx deleted file mode 100644 index 2fa533707e..0000000000 --- a/packages/twenty-front/src/pages/settings/ai/components/SettingsAiMCP.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import { useContext, useState } from 'react'; - -import { Select } from '@/ui/input/components/Select'; -import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; -import { styled } from '@linaria/react'; -import { useLingui } from '@lingui/react/macro'; -import { H2Title, IconCopy } from 'twenty-ui/display'; -import { CodeEditor, IconButton } from 'twenty-ui/input'; -import { Card, CardContent, Section } from 'twenty-ui/layout'; -import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; -import { REACT_APP_SERVER_BASE_URL } from '~/config'; -import { useCopyToClipboard } from '~/hooks/useCopyToClipboard'; - -const StyledCoverImage = styled.div` - background-position: center; - background-size: cover; - height: 160px; - overflow: hidden; -`; - -const StyledConfigButtonsContainer = styled.div` - display: flex; - flex-direction: row; - gap: ${themeCssVariables.spacing[2]}; - position: absolute; - right: ${themeCssVariables.spacing[3]}; - top: ${themeCssVariables.spacing[3]}; - z-index: 1; -`; - -const StyledCoverCardContent = styled(CardContent)` - padding: 0; -`; - -const StyledCopyButton = styled(IconButton)` - background-color: ${themeCssVariables.background.transparent.lighter}; - border: 1px solid ${themeCssVariables.border.color.medium}; -`; - -const StyledEditorContainer = styled.div` - .monaco-editor, - .monaco-editor .overflow-guard { - background-color: transparent !important; - border: none !important; - } - - .monaco-editor .line-hover { - background-color: transparent !important; - } -`; - -type McpAuthMethod = 'oauth' | 'api-key'; - -export const SettingsAiMCP = () => { - const { t } = useLingui(); - const { copyToClipboard } = useCopyToClipboard(); - const [authMethod, setAuthMethod] = useState('oauth'); - const { colorScheme } = useContext(ThemeContext); - const coverImage = - colorScheme === 'light' - ? '/images/ai/ai-mcp-cover-light.svg' - : '/images/ai/ai-mcp-cover-dark.svg'; - - const oauthConfig = JSON.stringify( - { - mcpServers: { - twenty: { - type: 'streamable-http', - url: `${REACT_APP_SERVER_BASE_URL}/mcp`, - }, - }, - }, - null, - 2, - ); - - const apiKeyConfig = JSON.stringify( - { - mcpServers: { - twenty: { - type: 'streamable-http', - url: `${REACT_APP_SERVER_BASE_URL}/mcp`, - headers: { - Authorization: 'Bearer [API_KEY]', - }, - }, - }, - }, - null, - 2, - ); - - const isOAuth = authMethod === 'oauth'; - const activeConfig = isOAuth ? oauthConfig : apiKeyConfig; - const editorHeight = isOAuth ? 170 : 230; - - const codeEditorOptions = { - readOnly: true, - domReadOnly: true, - renderLineHighlight: 'none' as const, - renderLineHighlightOnlyWhenFocus: false, - lineNumbers: 'off' as const, - folding: false, - selectionHighlight: false, - occurrencesHighlight: 'off' as const, - scrollBeyondLastLine: false, - hover: { - enabled: false, - }, - guides: { - indentation: false, - bracketPairs: false, - bracketPairsHorizontal: false, - }, - padding: { - top: 12, - }, - }; - - return ( -
- - - - - - - - -