@@ -24,7 +24,6 @@ import { useMcpUrl } from "@/pages/mcp/MCPDetails";
2424import { Dialog } from "@/components/ui/dialog" ;
2525import { Toolset } from "@/lib/toolTypes" ;
2626import { GramError } from "@gram/client/models/errors/gramerror.js" ;
27- import { Block , BlockInner } from "../block" ;
2827
2928interface ConfigFormProps {
3029 toolset : Toolset ;
@@ -213,7 +212,7 @@ function useMcpMetadataMetadataForm(
213212}
214213
215214export function ConfigForm ( { toolset } : ConfigFormProps ) {
216- const { installPageUrl } = useMcpUrl ( toolset ) ;
215+ const { url : mcpUrl } = useMcpUrl ( toolset ) ;
217216 const [ open , setOpen ] = useState ( false ) ;
218217
219218 const result = useGetMcpMetadata ( { toolsetSlug : toolset . slug } , undefined , {
@@ -229,104 +228,95 @@ export function ConfigForm({ toolset }: ConfigFormProps) {
229228 const form = useMcpMetadataMetadataForm ( toolset . slug , result . data ?. metadata ) ;
230229 const isLoading = result . isLoading || form . isLoading ;
231230
232- if ( ! installPageUrl ) {
233- return null ;
234- }
235-
236231 return (
237- < Block label = "Install URL" className = "p-0" >
238- < BlockInner >
239- < Stack direction = "horizontal" align = "center" gap = { 2 } >
240- < CodeBlock
241- className = "flex-grow overflow-hidden pr-10"
242- preClassname = "whitespace-nowrap overflow-auto"
243- copyable = { true }
232+ < Stack direction = "vertical" justify = "space-between" align = "start" gap = { 2 } >
233+ < CodeBlock
234+ copyable = { toolset . mcpIsPublic }
235+ > { `${ mcpUrl } /install` } </ CodeBlock >
236+ < Stack direction = "horizontal" gap = { 2 } >
237+ < Link external to = { `${ mcpUrl } /install` } noIcon >
238+ < Button
239+ variant = "secondary"
240+ className = "px-4"
241+ disabled = { ! toolset . mcpIsPublic }
244242 >
245- { installPageUrl }
246- </ CodeBlock >
247- < Link external to = { installPageUrl } noIcon >
248- < Button variant = "secondary" className = "px-4" >
249- < Button . Text > View</ Button . Text >
250- < Button . RightIcon >
251- < Icon name = "external-link" className = "w-4 h-4" />
252- </ Button . RightIcon >
243+ < Button . Text > View</ Button . Text >
244+ < Button . RightIcon >
245+ < Icon name = "external-link" className = "w-4 h-4" />
246+ </ Button . RightIcon >
247+ </ Button >
248+ </ Link >
249+ < Dialog open = { open } onOpenChange = { setOpen } >
250+ < Dialog . Trigger asChild >
251+ < Button variant = "tertiary" >
252+ < Button . Text >
253+ < Icon name = "settings" />
254+ </ Button . Text >
253255 </ Button >
254- </ Link >
255- < Dialog open = { open } onOpenChange = { setOpen } >
256- < Dialog . Trigger asChild >
257- < Button variant = "secondary" >
258- Edit
259- < Button . Text >
260- < Icon name = "settings" />
261- </ Button . Text >
256+ </ Dialog . Trigger >
257+ < Dialog . Content >
258+ < Dialog . Header >
259+ < Dialog . Title > Install Page Configuration</ Dialog . Title >
260+ < Dialog . Description >
261+ Customize your MCP install page
262+ </ Dialog . Description >
263+ </ Dialog . Header >
264+ < Stack className = { cn ( "gap-4" , isLoading && "animate-pulse" ) } >
265+ < div >
266+ < Heading > MCP Logo </ Heading >
267+ < Type muted small className = "max-w-2xl" >
268+ The logo presented on this page
269+ </ Type >
270+ </ div >
271+ < div className = "inline-block" >
272+ < CompactUpload
273+ allowedExtensions = { [ "png" , "jpg" , "jpeg" ] }
274+ onUpload = { form . logoUploadHandlers . onUpload }
275+ renderFilePreview = { form . logoUploadHandlers . renderFilePreview }
276+ />
277+ </ div >
278+ < div >
279+ < Heading > Documentation Link </ Heading >
280+ < Type muted small className = "max-w-2xl" >
281+ A link to your own MCP documentation that will be featured at
282+ the top of the page
283+ </ Type >
284+ </ div >
285+ < div className = "relative" >
286+ < Input
287+ type = "text"
288+ placeholder = "https://my-documentation.link"
289+ className = "w-full"
290+ { ...form . urlInputHandlers }
291+ />
292+ { form . valid . message && (
293+ < span className = "absolute -bottom-4 left-0 text-xs text-destructive" >
294+ { form . valid . message }
295+ </ span >
296+ ) }
297+ </ div >
298+ </ Stack >
299+ < Dialog . Footer >
300+ < Button
301+ variant = "tertiary"
302+ disabled = { ! form . dirty }
303+ onClick = { form . reset }
304+ >
305+ < Button . Text > Discard</ Button . Text >
306+ </ Button >
307+ < Button
308+ onClick = { ( ) => {
309+ form . save ( ) ;
310+ setOpen ( false ) ;
311+ } }
312+ disabled = { isLoading || ! form . valid . valid || ! form . dirty }
313+ >
314+ < Button . Text > Save</ Button . Text >
262315 </ Button >
263- </ Dialog . Trigger >
264- < Dialog . Content >
265- < Dialog . Header >
266- < Dialog . Title > Install Page Configuration</ Dialog . Title >
267- < Dialog . Description >
268- Customize your MCP install page
269- </ Dialog . Description >
270- </ Dialog . Header >
271- < Stack className = { cn ( "gap-4" , isLoading && "animate-pulse" ) } >
272- < div >
273- < Heading > MCP Logo </ Heading >
274- < Type muted small className = "max-w-2xl" >
275- The logo presented on this page
276- </ Type >
277- </ div >
278- < div className = "inline-block" >
279- < CompactUpload
280- allowedExtensions = { [ "png" , "jpg" , "jpeg" ] }
281- onUpload = { form . logoUploadHandlers . onUpload }
282- renderFilePreview = {
283- form . logoUploadHandlers . renderFilePreview
284- }
285- />
286- </ div >
287- < div >
288- < Heading > Documentation Link </ Heading >
289- < Type muted small className = "max-w-2xl" >
290- A link to your own MCP documentation that will be featured
291- at the top of the page
292- </ Type >
293- </ div >
294- < div className = "relative" >
295- < Input
296- type = "text"
297- placeholder = "https://my-documentation.link"
298- className = "w-full"
299- { ...form . urlInputHandlers }
300- />
301- { form . valid . message && (
302- < span className = "absolute -bottom-4 left-0 text-xs text-destructive" >
303- { form . valid . message }
304- </ span >
305- ) }
306- </ div >
307- </ Stack >
308- < Dialog . Footer >
309- < Button
310- variant = "tertiary"
311- disabled = { ! form . dirty }
312- onClick = { form . reset }
313- >
314- < Button . Text > Discard</ Button . Text >
315- </ Button >
316- < Button
317- onClick = { ( ) => {
318- form . save ( ) ;
319- setOpen ( false ) ;
320- } }
321- disabled = { isLoading || ! form . valid . valid || ! form . dirty }
322- >
323- < Button . Text > Save</ Button . Text >
324- </ Button >
325- </ Dialog . Footer >
326- </ Dialog . Content >
327- </ Dialog >
328- </ Stack >
329- </ BlockInner >
330- </ Block >
316+ </ Dialog . Footer >
317+ </ Dialog . Content >
318+ </ Dialog >
319+ </ Stack >
320+ </ Stack >
331321 ) ;
332322}
0 commit comments