feat: add and use ControlledAutosizeTextArea

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

@@ -4,7 +4,7 @@ import { useCallback, useState } from "react";
 import { Agent as AgentType } from "~/lib/model/agents";
 import { cn } from "~/lib/utils";
 
-import { TypographyP } from "~/components/Typography";
+import { TypographyH4, TypographyP } from "~/components/Typography";
 import { AgentProvider, useAgent } from "~/components/agent/AgentContext";
 import { AgentForm } from "~/components/agent/AgentForm";
 import { PastThreads } from "~/components/agent/PastThreads";
@@ -64,10 +64,10 @@ function AgentContent({ className, onRefresh }: AgentProps) {
                 </div>
 
                 <div className="p-4 flex-auto space-y-4">
-                    <span className="flex items-center gap-2 text-xl">
+                    <TypographyH4 className="flex items-center gap-2">
                         <WrenchIcon className="w-5 h-5" />
                         Tools
-                    </span>
+                    </TypographyH4>
                     <TypographyP className="text-muted-foreground flex items-center gap-2">
                         Add tools the allow the agent to perform useful actions
                         such as searching the web, reading files, or interacting
@@ -80,10 +80,10 @@ function AgentContent({ className, onRefresh }: AgentProps) {
                 </div>
 
                 <div className="p-4 flex-auto space-y-4">
-                    <span className="flex items-center gap-2 text-xl">
+                    <TypographyH4 className="flex items-center gap-2">
                         <LibraryIcon className="w-6 h-6" />
                         Knowledge
-                    </span>
+                    </TypographyH4>
                     <TypographyP className="text-muted-foreground flex items-center gap-2">
                         Provide knowledge to the agent in the form of files,
                         website, or external links in order to give it context

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

@@ -1,14 +1,18 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+import { BrainIcon } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { Agent } from "~/lib/model/agents";
 
+import { TypographyH4 } from "~/components/Typography";
+import {
+    ControlledAutosizeTextarea,
+    ControlledInput,
+} from "~/components/form/controlledInputs";
 import { Form } from "~/components/ui/form";
 
-import { ControlledInput, ControlledTextarea } from "../form/controlledInputs";
-
 const formSchema = z.object({
     name: z.string().min(1, {
         message: "Name is required.",
@@ -74,11 +78,15 @@ export function AgentForm({ agent, onSubmit, onChange }: AgentFormProps) {
                     placeholder="Add a description..."
                     className="text-xl text-muted-foreground"
                 />
-                <ControlledTextarea
+                <TypographyH4 className="flex items-center gap-2">
+                    <BrainIcon className="w-5 h-5" />
+                    Instructions
+                </TypographyH4>
+                <ControlledAutosizeTextarea
                     control={form.control}
                     autoComplete="off"
                     name="prompt"
-                    label="Instructions"
+                    maxHeight={300}
                     placeholder="Give the agent instructions on how to behave and respond to input."
                 />
             </form>

ui/admin/app/components/form/controlledInputs.tsx

@@ -18,7 +18,12 @@ import {
     FormMessage,
 } from "~/components/ui/form";
 import { Input, InputProps } from "~/components/ui/input";
-import { Textarea, TextareaProps } from "~/components/ui/textarea";
+import {
+    AutosizeTextAreaProps,
+    AutosizeTextarea,
+    Textarea,
+    TextareaProps,
+} from "~/components/ui/textarea";
 
 type BaseProps<
     TValues extends FieldValues,
@@ -128,6 +133,53 @@ export function ControlledTextarea<
     );
 }
 
+export type ControlledAutosizeTextareaProps<
+    TValues extends FieldValues,
+    TName extends FieldPath<TValues>,
+> = Omit<AutosizeTextAreaProps, keyof ControllerRenderProps<TValues, TName>> &
+    BaseProps<TValues, TName>;
+
+export function ControlledAutosizeTextarea<
+    TValues extends FieldValues,
+    TName extends FieldPath<TValues>,
+>({
+    control,
+    name,
+    label,
+    description,
+    className,
+    ...inputProps
+}: ControlledAutosizeTextareaProps<TValues, TName>) {
+    return (
+        <FormField
+            control={control}
+            name={name}
+            render={({ field, fieldState }) => (
+                <FormItem>
+                    {label && <FormLabel>{label}</FormLabel>}
+
+                    {description && (
+                        <FormDescription>{description}</FormDescription>
+                    )}
+
+                    <FormControl>
+                        <AutosizeTextarea
+                            {...field}
+                            {...inputProps}
+                            className={cn(
+                                getFieldStateClasses(fieldState),
+                                className
+                            )}
+                        />
+                    </FormControl>
+
+                    <FormMessage />
+                </FormItem>
+            )}
+        />
+    );
+}
+
 function getFieldStateClasses(fieldState: ControllerFieldState) {
     return cn({
         "focus-visible:ring-destructive border-destructive": fieldState.invalid,

ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx

@@ -15,7 +15,7 @@ import { Button } from "~/components/ui/button";
 
 import { Avatar } from "../ui/avatar";
 import { Label } from "../ui/label";
-import { Textarea } from "../ui/textarea";
+import { AutosizeTextarea } from "../ui/textarea";
 import FileModal from "./file/FileModal";
 import { NotionModal } from "./notion/NotionModal";
 import { OnedriveModal } from "./onedrive/OneDriveModal";
@@ -366,7 +366,8 @@ export default function AgentKnowledgePanel({
         <div className="flex flex-col gap-4 justify-center items-center">
             <div className="grid w-full gap-2">
                 <Label htmlFor="message">Knowledge Description</Label>
-                <Textarea
+                <AutosizeTextarea
+                    maxHeight={200}
                     placeholder="Provide a brief description of the information contained in this knowledge base. Example: A collection of documents about the human resources policies and procedures for Acme Corporation."
                     id="message"
                     value={knowledgeDescription ?? ""}

ui/admin/app/components/ui/textarea.tsx

@@ -68,7 +68,7 @@ export type AutosizeTextAreaRef = {
     minHeight: number;
 };
 
-type AutosizeTextAreaProps = {
+export type AutosizeTextAreaProps = {
     maxHeight?: number;
     minHeight?: number;
 } & React.TextareaHTMLAttributes<HTMLTextAreaElement>;