Skip to content

Commit

Permalink
feat: add ghost variant to input
Browse files Browse the repository at this point in the history 
Signed-off-by: tylerslaton <[email protected]>
  • Loading branch information
@tylerslaton
tylerslaton committed Oct 22, 2024
1 parent ddeb7e2 commit 7ac2d2e
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 67 deletions.
6 changes: 4 additions & 2 deletions ui/admin/app/components/agent/AgentForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
118 changes: 66 additions & 52 deletions ui/admin/app/components/agent/PastThreads.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import useSWR from "swr";
import { Thread } from "~/lib/model/threads";
import { ThreadsService } from "~/lib/service/api/threadsService";

import { TypographyP } from "~/components/Typography";
import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
import { Button } from "~/components/ui/button";
import {
Expand All @@ -20,8 +21,12 @@ import {
PopoverContent,
PopoverTrigger,
} from "~/components/ui/popover";

import { TypographyH4, TypographyP } from "../Typography";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "~/components/ui/tooltip";

interface PastThreadsProps {
agentId: string;
Expand Down Expand Up @@ -55,55 +60,64 @@ export const PastThreads: React.FC<PastThreadsProps> = ({
};

return (
<Popover open={open} onOpenChange={handleOpenChange}>
<PopoverTrigger asChild>
<Button variant="secondary" size="icon">
<ChevronUpIcon className="w-4 h-4" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-80 p-0">
<Command className="flex-col-reverse">
<CommandInput placeholder="Search threads..." />
<CommandList>
<CommandEmpty>No threads found.</CommandEmpty>
{isLoading ? (
<div className="flex justify-center items-center h-20">
<LoadingSpinner size={24} />
</div>
) : error ? (
<div className="text-center text-red-500 p-2">
Failed to load threads
</div>
) : threads && threads.length > 0 ? (
<CommandGroup>
{threads.map((thread: Thread) => (
<CommandItem
key={thread.id}
onSelect={() =>
handleThreadSelect(thread.id)
}
className="cursor-pointer"
>
<div>
<TypographyP className="font-semibold">
Thread
<span className="ml-2 text-muted-foreground">
{thread.id}
</span>
</TypographyP>
<TypographyP className="text-sm text-gray-500">
{new Date(
thread.created
).toLocaleString()}
</TypographyP>
</div>
</CommandItem>
))}
</CommandGroup>
) : null}
</CommandList>
</Command>
</PopoverContent>
</Popover>
<TooltipProvider>
<Tooltip>
<Popover open={open} onOpenChange={handleOpenChange}>
<PopoverTrigger asChild>
<TooltipTrigger asChild>
<Button variant="secondary" size="icon">
<ChevronUpIcon className="w-4 h-4" />
</Button>
</TooltipTrigger>
</PopoverTrigger>
<TooltipContent>Switch threads</TooltipContent>
<PopoverContent className="w-80 p-0">
<Command className="flex-col-reverse">
<CommandInput placeholder="Search threads..." />
<CommandList>
<CommandEmpty>No threads found.</CommandEmpty>
{isLoading ? (
<div className="flex justify-center items-center h-20">
<LoadingSpinner size={24} />
</div>
) : error ? (
<div className="text-center text-red-500 p-2">
Failed to load threads
</div>
) : threads && threads.length > 0 ? (
<CommandGroup>
{threads.map((thread: Thread) => (
<CommandItem
key={thread.id}
onSelect={() =>
handleThreadSelect(
thread.id
)
}
className="cursor-pointer"
>
<div>
<TypographyP className="font-semibold">
Thread
<span className="ml-2 text-muted-foreground">
{thread.id}
</span>
</TypographyP>
<TypographyP className="text-sm text-gray-500">
{new Date(
thread.created
).toLocaleString()}
</TypographyP>
</div>
</CommandItem>
))}
</CommandGroup>
) : null}
</CommandList>
</Command>
</PopoverContent>
</Popover>
</Tooltip>
</TooltipProvider>
);
};
29 changes: 22 additions & 7 deletions ui/admin/app/components/ui/input.tsx
View file
Original file line number Diff line number Diff line change
@@ -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}
/>
Expand All @@ -21,4 +36,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
);
Input.displayName = "Input";

export { Input };
export { Input, inputVariants };
1 change: 0 additions & 1 deletion ui/admin/app/routes/_auth.agents.$agent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
5 changes: 0 additions & 5 deletions ui/admin/app/routes/_auth.agents._index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { SquarePen, Trash } from "lucide-react";
import { useMemo } from "react";
import { $path } from "remix-routes";
import useSWR, { preload } from "swr";
import { z } from "zod";

import { Agent } from "~/lib/model/agents";
import { AgentService } from "~/lib/service/api/agentService";
Expand All @@ -23,10 +22,6 @@ import {
} from "~/components/ui/tooltip";
import { useAsync } from "~/hooks/useAsync";

export const agentEditParamSchema = z.object({
from: z.string().optional(),
});

export async function clientLoader() {
await Promise.all([
preload(AgentService.getAgents.key(), AgentService.getAgents),
Expand Down

0 comments on commit 7ac2d2e

Please sign in to comment.