System prompt panel

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Textarea,
} from "@paxeer/core";

export function SystemPromptPanel({
  value = "You are a trading desk assistant. Cite book levels. Never invent settlement guarantees.",
  onChange,
}: {
  value?: string;
  onChange?: (value: string) => void;
}) {
  return (
    <Card className="gap-3 py-4" data-slot="system-prompt-panel">
      <CardHeader className="px-4">
        <CardTitle className="text-[length:var(--md-sys-typescale-label-large-size)]">
          System prompt
        </CardTitle>
        <CardDescription>Instructions applied to the next turn.</CardDescription>
      </CardHeader>
      <CardContent className="px-4">
        <Textarea
          rows={4}
          value={value}
          onChange={(event) => onChange?.(event.target.value)}
        />
      </CardContent>
    </Card>
  );
}