konnosDashboard
McpTabContent.tsx77 lines · main
1// @ts-nocheck
2import { IS_PLATFORM, useParams } from 'common'
3import { useTheme } from 'next-themes'
4import { useMemo, useState } from 'react'
5import { createMcpCopyHandler, McpConfigPanel, type McpClient } from 'ui-patterns/McpUrlBuilder'
6import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
7
8import type { projectKeys } from './Connect.types'
9import Panel from '@/components/ui/Panel'
10import { useTrack } from '@/lib/telemetry/track'
11
12export const McpTabContent = ({ projectKeys }: { projectKeys: projectKeys }) => {
13 const { ref: projectRef } = useParams()
14
15 return (
16 <Panel className="bg-inherit border-none shadow-none">
17 {projectRef ? (
18 <McpTabContentInnerLoaded projectRef={projectRef} projectKeys={projectKeys} />
19 ) : (
20 <McpTabContentInnerLoading />
21 )}
22 </Panel>
23 )
24}
25
26const McpTabContentInnerLoading = () => {
27 return (
28 <div className="flex flex-col gap-2">
29 <ShimmeringLoader className="w-3/4" />
30 <ShimmeringLoader className="w-1/2" />
31 </div>
32 )
33}
34
35const McpTabContentInnerLoaded = ({
36 projectRef,
37 projectKeys,
38}: {
39 projectRef: string
40 projectKeys: projectKeys
41}) => {
42 const { resolvedTheme } = useTheme()
43 const track = useTrack()
44 const [selectedClient, setSelectedClient] = useState<McpClient | null>(null)
45
46 const handleCopy = useMemo(
47 () =>
48 createMcpCopyHandler({
49 selectedClient,
50 source: 'studio',
51 onTrack: (event) => track(event.action, event.properties, event.groups),
52 projectRef,
53 }),
54 [selectedClient, track, projectRef]
55 )
56
57 const handleInstall = () => {
58 if (selectedClient?.label) {
59 track('mcp_install_button_clicked', {
60 client: selectedClient.label,
61 source: 'studio',
62 })
63 }
64 }
65
66 return (
67 <McpConfigPanel
68 projectRef={projectRef}
69 theme={resolvedTheme as 'light' | 'dark'}
70 isPlatform={IS_PLATFORM}
71 apiUrl={projectKeys.apiUrl ?? undefined}
72 onCopyCallback={handleCopy}
73 onInstallCallback={handleInstall}
74 onClientSelect={setSelectedClient}
75 />
76 )
77}