feat: overhaul agent edit UX

ui/admin/app/components/Typography.tsx

@@ -1,114 +1,183 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 
 import { cn } from "~/lib/utils";
 
-interface TypographyProps {
+type TypographyElement = keyof JSX.IntrinsicElements;
+
+type TypographyProps<T extends TypographyElement> = {
     children: ReactNode;
     className?: string;
-}
+} & React.JSX.IntrinsicElements[T];
 
-export function TypographyH1({ children, className }: TypographyProps) {
+export function TypographyH1({
+    children,
+    className,
+    ...props
+}: TypographyProps<"h1">) {
     return (
         <h1
             className={cn(
                 `scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl`,
                 className
             )}
+            {...props}
         >
             {children}
         </h1>
     );
 }
 
-export function TypographyH2({ children, className }: TypographyProps) {
+export function TypographyH2({
+    children,
+    className,
+    ...props
+}: TypographyProps<"h2">) {
     return (
         <h2
             className={cn(
                 `scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0`,
                 className
             )}
+            {...props}
         >
             {children}
         </h2>
     );
 }
 
-export function TypographyH3({ children, className }: TypographyProps) {
+export function TypographyH3({
+    children,
+    className,
+    ...props
+}: TypographyProps<"h3">) {
     return (
         <h3
             className={cn(
                 `scroll-m-20 text-2xl font-semibold tracking-tight`,
                 className
             )}
+            {...props}
         >
             {children}
         </h3>
     );
 }
 
-export function TypographyH4({ children, className }: TypographyProps) {
+export function TypographyH4({
+    children,
+    className,
+    ...props
+}: TypographyProps<"h4">) {
     return (
         <h4
             className={cn(
                 `scroll-m-20 text-xl font-semibold tracking-tight`,
                 className
             )}
+            {...props}
         >
             {children}
         </h4>
     );
 }
 
-export function TypographyP({ children, className }: TypographyProps) {
-    return <p className={cn(`leading-7`, className)}>{children}</p>;
+export function TypographyP({
+    children,
+    className,
+    ...props
+}: TypographyProps<"p">) {
+    return (
+        <p className={cn(`leading-7`, className)} {...props}>
+            {children}
+        </p>
+    );
 }
 
-export function TypographyBlockquote({ children, className }: TypographyProps) {
+export function TypographyBlockquote({
+    children,
+    className,
+    ...props
+}: TypographyProps<"blockquote">) {
     return (
-        <blockquote className={cn(`mt-6 border-l-2 pl-6 italic`, className)}>
+        <blockquote
+            className={cn(`mt-6 border-l-2 pl-6 italic`, className)}
+            {...props}
+        >
             {children}
         </blockquote>
     );
 }
 
-export function TypographyInlineCode({ children, className }: TypographyProps) {
+export function TypographyInlineCode({
+    children,
+    className,
+    ...props
+}: TypographyProps<"code">) {
     return (
         <code
             className={cn(
                 `relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold`,
                 className
             )}
+            {...props}
         >
             {children}
         </code>
     );
 }
 
-export function TypographyLead({ children, className }: TypographyProps) {
+export function TypographyLead({
+    children,
+    className,
+    ...props
+}: TypographyProps<"p">) {
     return (
-        <p className={cn(`text-xl text-muted-foreground`, className)}>
+        <p
+            className={cn(`text-xl text-muted-foreground`, className)}
+            {...props}
+        >
             {children}
         </p>
     );
 }
 
-export function TypographyLarge({ children, className }: TypographyProps) {
+export function TypographyLarge({
+    children,
+    className,
+    ...props
+}: TypographyProps<"div">) {
     return (
-        <div className={cn(`text-lg font-semibold`, className)}>{children}</div>
+        <div className={cn(`text-lg font-semibold`, className)} {...props}>
+            {children}
+        </div>
     );
 }
 
-export function TypographySmall({ children, className }: TypographyProps) {
+export function TypographySmall({
+    children,
+    className,
+    ...props
+}: TypographyProps<"small">) {
     return (
-        <small className={cn(`text-sm font-medium leading-none`, className)}>
+        <small
+            className={cn(`text-sm font-medium leading-none`, className)}
+            {...props}
+        >
             {children}
         </small>
     );
 }
 
-export function TypographyMuted({ children, className }: TypographyProps) {
+export function TypographyMuted({
+    children,
+    className,
+    ...props
+}: TypographyProps<"p">) {
     return (
-        <p className={cn(`text-sm text-muted-foreground`, className)}>
+        <p
+            className={cn(`text-sm text-muted-foreground`, className)}
+            {...props}
+        >
             {children}
         </p>
     );

ui/admin/app/components/agent/AdvancedForm.tsx

@@ -0,0 +1,65 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Agent } from "~/lib/model/agents";
+
+import { ControlledTextarea } from "~/components/form/controlledInputs";
+import { Form } from "~/components/ui/form";
+
+const formSchema = z.object({
+    prompt: z.string().optional(),
+});
+
+export type AdvancedFormValues = z.infer<typeof formSchema>;
+
+type AdvancedFormProps = {
+    agent: Agent;
+    onSubmit?: (values: AdvancedFormValues) => void;
+    onChange?: (values: AdvancedFormValues) => void;
+};
+
+export function AdvancedForm({ agent, onSubmit, onChange }: AdvancedFormProps) {
+    const form = useForm<AdvancedFormValues>({
+        resolver: zodResolver(formSchema),
+        mode: "onChange",
+        defaultValues: {
+            prompt: agent.prompt || "",
+        },
+    });
+
+    useEffect(() => {
+        if (agent) form.reset({ prompt: agent.prompt || "" });
+    }, [agent, form]);
+
+    useEffect(() => {
+        return form.watch((values) => {
+            if (!onChange) return;
+
+            const { data, success } = formSchema.safeParse(values);
+
+            if (!success) return;
+
+            onChange(data);
+        }).unsubscribe;
+    }, [onChange, form]);
+
+    const handleSubmit = form.handleSubmit((values: AdvancedFormValues) =>
+        onSubmit?.({ ...values })
+    );
+
+    return (
+        <Form {...form}>
+            <form onSubmit={handleSubmit} className="space-y-8">
+                <ControlledTextarea
+                    control={form.control}
+                    name="prompt"
+                    label="Additional Instructions"
+                    description="Give the agent additional instructions on how it should behave."
+                    placeholder="Talk like a pirate."
+                />
+            </form>
+        </Form>
+    );
+}