f027ed99b7
- Extend McpTransport to support "sse" in schemas. - Refactor McpToolClient to handle both "streamable_http" and "sse" transports. - Introduce McpServerDialog for managing MCP server configurations, including transport settings and tool synchronization. - Replace McpServersSection with the new dialog component for improved server management. - Add tests for MCP transport handling and server dialog functionality.
96 lines
2.0 KiB
TypeScript
96 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
|
|
export const TOOL_DIALOG_CONTENT_CLASS =
|
|
"max-h-[calc(100vh-3rem)] grid-rows-[auto_minmax(0,1fr)_auto] overflow-y-auto sm:h-[48.875rem] sm:max-w-6xl lg:overflow-hidden";
|
|
|
|
export function ToolFormField({
|
|
label,
|
|
required,
|
|
children,
|
|
}: {
|
|
label: string;
|
|
required?: boolean;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<label className="block space-y-2">
|
|
<span className="text-sm font-medium text-foreground">
|
|
{label}
|
|
{required && <span className="ml-1 text-destructive">*</span>}
|
|
</span>
|
|
{children}
|
|
</label>
|
|
);
|
|
}
|
|
|
|
export function ToolFormSection({
|
|
title,
|
|
scrollable = false,
|
|
tall = false,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
scrollable?: boolean;
|
|
tall?: boolean;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<section
|
|
className={[
|
|
"rounded-xl border border-hairline bg-surface-strong/20",
|
|
tall ? "lg:flex lg:h-[38rem] lg:flex-col" : "",
|
|
].join(" ")}
|
|
>
|
|
<div className="border-b border-hairline px-4 py-3 text-sm font-medium">
|
|
{title}
|
|
</div>
|
|
<div
|
|
className={[
|
|
"space-y-4 p-4",
|
|
scrollable ? "max-h-72 overflow-y-auto" : "",
|
|
tall ? "lg:max-h-none lg:flex-1" : "",
|
|
].join(" ")}
|
|
>
|
|
{children}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function ToolJsonField({
|
|
label,
|
|
value,
|
|
onChange,
|
|
rows = 4,
|
|
disabled = false,
|
|
placeholder,
|
|
hint,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
rows?: number;
|
|
disabled?: boolean;
|
|
placeholder?: string;
|
|
hint?: string;
|
|
}) {
|
|
return (
|
|
<ToolFormField label={label}>
|
|
<Textarea
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
rows={rows}
|
|
disabled={disabled}
|
|
placeholder={placeholder}
|
|
className="font-mono text-xs"
|
|
spellCheck={false}
|
|
/>
|
|
{hint && <span className="block text-xs text-muted-foreground">{hint}</span>}
|
|
</ToolFormField>
|
|
);
|
|
}
|