diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/DecisionFormControls.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/DecisionFormControls.tsx new file mode 100644 index 000000000000..af821e779169 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/DecisionFormControls.tsx @@ -0,0 +1,43 @@ +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/cva.config"; +import { Plus, Trash2 } from "lucide-react"; +import { useId, type ReactNode } from "react"; +import { IssueList, ValidationStatus } from "./JsonEditor"; +import type { PayloadValidation } from "./lib/validatePayload"; + +export function RemoveButton({ label, onClick }: { label: string; onClick: () => void }) { + return ( + + ); +} + +export function AddButton({ children, onClick }: { children: ReactNode; onClick: () => void }) { + return ( + + ); +} + +export function FormFrame({ validation, children }: { validation: PayloadValidation; children: ReactNode }) { + const issuesId = useId(); + + return ( +
+
+ Request form + +
+
{children}
+ +
+ ); +} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx index cc7bebb0bb82..7311c3a055a1 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx @@ -7,7 +7,7 @@ import { createElement, PrismLight as SyntaxHighlighter } from "react-syntax-hig import type { SyntaxHighlighterProps } from "react-syntax-highlighter"; import json from "react-syntax-highlighter/dist/esm/languages/prism/json"; import { vs, vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"; -import type { SystemOnePayloadValidation } from "./lib/validatePayload"; +import type { PayloadValidation } from "./lib/validatePayload"; SyntaxHighlighter.registerLanguage("json", json); @@ -57,10 +57,12 @@ const TRANSPARENT_PRE = { interface JsonEditorProps { value: string; onChange: (value: string) => void; - validation: SystemOnePayloadValidation; + validation: PayloadValidation; + label?: string; + placeholder?: string; } -export function ValidationStatus({ validation }: { validation: SystemOnePayloadValidation }) { +export function ValidationStatus({ validation }: { validation: PayloadValidation }) { const errorCount = validation.issues.filter((issue) => issue.severity === "error").length; if (errorCount > 0) { return ( @@ -72,7 +74,7 @@ export function ValidationStatus({ validation }: { validation: SystemOnePayloadV return Valid payload; } -export function IssueList({ id, validation }: { id: string; validation: SystemOnePayloadValidation }) { +export function IssueList({ id, validation }: { id: string; validation: PayloadValidation }) { if (validation.issues.length === 0) { return (

@@ -112,7 +114,13 @@ function LineRows({ rows, stylesheet, useInlineStyles }: LineRendererProps) { }); } -export default function JsonEditor({ value, onChange, validation }: JsonEditorProps) { +export default function JsonEditor({ + value, + onChange, + validation, + label = "System One JSON payload", + placeholder = "Paste or write a System One request", +}: JsonEditorProps) { const issuesId = useId(); const highlightRef = useRef(null); const syntaxTheme = useTheme().resolvedTheme === "dark" ? VS_CODE_DARK_PLUS : VS_CODE_LIGHT_PLUS; @@ -156,7 +164,7 @@ export default function JsonEditor({ value, onChange, validation }: JsonEditorPr