Feat: Adjust the style of the mcp dialog #10703 (#10719)

### What problem does this PR solve?

Feat: Adjust the style of the mcp dialog #10703

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-10-22 12:20:19 +08:00
committed by GitHub
parent 307cdc62ea
commit 02a452993e
14 changed files with 134 additions and 86 deletions

View File

@ -1,7 +1,9 @@
import { Collapse } from '@/components/collapse';
import { Button, ButtonLoading } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
@ -121,36 +123,44 @@ export function EditMcpDialog({
form={form}
setFieldChanged={setFieldChanged}
></EditMcpForm>
<Collapse
title={
<div>
{nextTools?.length || 0} {t('mcp.toolsAvailable')}
</div>
}
open={collapseOpen}
onOpenChange={setCollapseOpen}
rightContent={
<Button
variant={'ghost'}
form={FormId}
type="submit"
onClick={handleTest}
<Card>
<CardContent className="p-3">
<Collapse
title={
<div>
{nextTools?.length || 0} {t('mcp.toolsAvailable')}
</div>
}
open={collapseOpen}
onOpenChange={setCollapseOpen}
rightContent={
<Button
variant={'transparent'}
form={FormId}
type="submit"
onClick={handleTest}
className="border-none p-0 hover:bg-transparent"
>
<RefreshCw
className={cn('text-text-secondary', {
'animate-spin': testLoading,
})}
/>
</Button>
}
>
<RefreshCw
className={cn('text-accent-primary', {
'animate-spin': testLoading,
})}
/>
</Button>
}
>
<div className="space-y-2.5 overflow-auto max-h-80">
{nextTools?.map((x) => (
<McpToolCard key={x.name} data={x}></McpToolCard>
))}
</div>
</Collapse>
<div className="overflow-auto max-h-80 divide-y bg-bg-card rounded-md px-2.5">
{nextTools?.map((x) => (
<McpToolCard key={x.name} data={x}></McpToolCard>
))}
</div>
</Collapse>
</CardContent>
</Card>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">{t('common.cancel')}</Button>
</DialogClose>
<ButtonLoading
type="submit"
form={FormId}