From 2f7155c5c17f7c9b1068e04637dbd8fa521a56c2 Mon Sep 17 00:00:00 2001
From: tylerslaton <mtslaton1@gmail.com>
Date: Tue, 22 Oct 2024 14:20:29 -0400
Subject: [PATCH] feat: add ghost variant to input

Signed-off-by: tylerslaton <mtslaton1@gmail.com>
---
 ui/admin/app/components/agent/AgentForm.tsx   |  6 ++--
 ui/admin/app/components/agent/PastThreads.tsx |  2 +-
 ui/admin/app/components/ui/input.tsx          | 29 ++++++++++++++-----
 ui/admin/app/routes/_auth.agents.$agent.tsx   |  1 -
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/ui/admin/app/components/agent/AgentForm.tsx b/ui/admin/app/components/agent/AgentForm.tsx
index 8387a16c..d9ad593e 100644
--- a/ui/admin/app/components/agent/AgentForm.tsx
+++ b/ui/admin/app/components/agent/AgentForm.tsx
@@ -60,17 +60,19 @@ export function AgentForm({ agent, onSubmit, onChange }: AgentFormProps) {
         <Form {...form}>
             <form onSubmit={handleSubmit} className="space-y-4">
                 <ControlledInput
+                    variant="ghost"
                     autoComplete="off"
                     control={form.control}
                     name="name"
-                    className="text-3xl shadow-none cursor-pointer hover:border-primary px-0 mb-0 font-bold outline-none border-transparent focus:border-primary"
+                    className="text-3xl"
                 />
                 <ControlledInput
+                    variant="ghost"
                     control={form.control}
                     autoComplete="off"
                     name="description"
                     placeholder="Add a description..."
-                    className="text-xl text-muted-foreground font-semibold shadow-none cursor-pointer hover:border-primary px-0 outline-none border-transparent focus:border-primary"
+                    className="text-xl text-muted-foreground"
                 />
             </form>
         </Form>
diff --git a/ui/admin/app/components/agent/PastThreads.tsx b/ui/admin/app/components/agent/PastThreads.tsx
index 83ac6772..61d4386f 100644
--- a/ui/admin/app/components/agent/PastThreads.tsx
+++ b/ui/admin/app/components/agent/PastThreads.tsx
@@ -21,7 +21,7 @@ import {
     PopoverTrigger,
 } from "~/components/ui/popover";
 
-import { TypographyH4, TypographyP } from "../Typography";
+import { TypographyP } from "../Typography";
 
 interface PastThreadsProps {
     agentId: string;
diff --git a/ui/admin/app/components/ui/input.tsx b/ui/admin/app/components/ui/input.tsx
index 4db24b77..2612d11e 100644
--- a/ui/admin/app/components/ui/input.tsx
+++ b/ui/admin/app/components/ui/input.tsx
@@ -1,18 +1,33 @@
+import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "~/lib/utils";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+const inputVariants = cva(
+    "flex h-9 w-full rounded-md px-3 bg-transparent border border-input text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                default: "",
+                ghost: "shadow-none cursor-pointer hover:border-primary px-0 mb-0 font-bold outline-none border-transparent focus:border-primary",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+);
+
+export interface InputProps
+    extends React.InputHTMLAttributes<HTMLInputElement>,
+        VariantProps<typeof inputVariants> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ className, type, ...props }, ref) => {
+    ({ className, variant, type, ...props }, ref) => {
         return (
             <input
                 type={type}
-                className={cn(
-                    "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-                    className
-                )}
+                className={cn(inputVariants({ variant, className }))}
                 ref={ref}
                 {...props}
             />
@@ -21,4 +36,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 );
 Input.displayName = "Input";
 
-export { Input };
+export { Input, inputVariants };
diff --git a/ui/admin/app/routes/_auth.agents.$agent.tsx b/ui/admin/app/routes/_auth.agents.$agent.tsx
index 9dcb5ca4..63d959f4 100644
--- a/ui/admin/app/routes/_auth.agents.$agent.tsx
+++ b/ui/admin/app/routes/_auth.agents.$agent.tsx
@@ -6,7 +6,6 @@ import {
 } from "@remix-run/react";
 import { useCallback } from "react";
 import { $params, $path } from "remix-routes";
-import { z } from "zod";
 
 import { AgentService } from "~/lib/service/api/agentService";
 import { QueryParamSchemas } from "~/lib/service/routeQueryParams";