kexsh/agent-chat-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: get styles working

Browse Source
This commit is contained in:
bracesproul
2025-02-26 17:42:29 -08:00
parent c0cd027fde
commit 4e6a831214
10 changed files with 254 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components.json
View File

@@ -5,7 +5,7 @@
"tsx": true, "tsx": true,
"tailwind": { "tailwind": {
"config": "tailwind.config.js", "config": "tailwind.config.js",
"css": "agent/ui.css", "css": "src/index.css",
"baseColor": "neutral", "baseColor": "neutral",
"cssVariables": true, "cssVariables": true,
"prefix": "" "prefix": ""

1
index.html
View File

@@ -5,6 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Vite + React + TS</title>
<link href="/src/styles.css" rel="stylesheet">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
package.json
View File

@@ -23,6 +23,7 @@
"@radix-ui/react-slot": "^1.1.2", "@radix-ui/react-slot": "^1.1.2",
"@radix-ui/react-tooltip": "^1.1.8", "@radix-ui/react-tooltip": "^1.1.8",
"@tailwindcss/postcss": "^4.0.9", "@tailwindcss/postcss": "^4.0.9",
"@tailwindcss/vite": "^4.0.9",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"esbuild": "^0.25.0", "esbuild": "^0.25.0",
@@ -52,7 +53,6 @@
"eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.18", "eslint-plugin-react-refresh": "^0.4.18",
"globals": "^15.14.0", "globals": "^15.14.0",
"postcss": "^8.5.3",
"tailwindcss": "^4.0.6", "tailwindcss": "^4.0.6",
"typescript": "~5.7.2", "typescript": "~5.7.2",
"typescript-eslint": "^8.22.0", "typescript-eslint": "^8.22.0",

19
pnpm-lock.yaml generated
View File

@@ -49,6 +49,9 @@ importers:
'@tailwindcss/postcss': '@tailwindcss/postcss':
specifier: ^4.0.9 specifier: ^4.0.9
version: 4.0.9 version: 4.0.9
'@tailwindcss/vite':
specifier: ^4.0.9
version: 4.0.9(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(tsx@4.19.3)(yaml@2.7.0))
class-variance-authority: class-variance-authority:
specifier: ^0.7.1 specifier: ^0.7.1
version: 0.7.1 version: 0.7.1
@@ -116,9 +119,6 @@ importers:
globals: globals:
specifier: ^15.14.0 specifier: ^15.14.0
version: 15.15.0 version: 15.15.0
postcss:
specifier: ^8.5.3
version: 8.5.3
tailwindcss: tailwindcss:
specifier: ^4.0.6 specifier: ^4.0.6
version: 4.0.9 version: 4.0.9
@@ -1156,6 +1156,11 @@ packages:
'@tailwindcss/postcss@4.0.9': '@tailwindcss/postcss@4.0.9':
resolution: {integrity: sha512-BT/E+pdMqulavEAVM5NCpxmGEwHiLDPpkmg/c/X25ZBW+izTe+aZ+v1gf/HXTrihRoCxrUp5U4YyHsBTzspQKQ==} resolution: {integrity: sha512-BT/E+pdMqulavEAVM5NCpxmGEwHiLDPpkmg/c/X25ZBW+izTe+aZ+v1gf/HXTrihRoCxrUp5U4YyHsBTzspQKQ==}
'@tailwindcss/vite@4.0.9':
resolution: {integrity: sha512-BIKJO+hwdIsN7V6I7SziMZIVHWWMsV/uCQKYEbeiGRDRld+TkqyRRl9+dQ0MCXbhcVr+D9T/qX2E84kT7V281g==}
peerDependencies:
vite: ^5.2.0 || ^6
'@types/babel__core@7.20.5': '@types/babel__core@7.20.5':
resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
@@ -3926,6 +3931,14 @@ snapshots:
postcss: 8.5.3 postcss: 8.5.3
tailwindcss: 4.0.9 tailwindcss: 4.0.9
'@tailwindcss/vite@4.0.9(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(tsx@4.19.3)(yaml@2.7.0))':
dependencies:
'@tailwindcss/node': 4.0.9
'@tailwindcss/oxide': 4.0.9
lightningcss: 1.29.1
tailwindcss: 4.0.9
vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(tsx@4.19.3)(yaml@2.7.0)
'@types/babel__core@7.20.5': '@types/babel__core@7.20.5':
dependencies: dependencies:
'@babel/parser': 7.26.9 '@babel/parser': 7.26.9

5
postcss.config.js
View File

@@ -1,5 +0,0 @@
export default {
plugins: {
autoprefixer: {},
},
}

51
src/components/ui/avatar.tsx
View File

@@ -3,46 +3,49 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
const Avatar = React.forwardRef< function Avatar({
React.ElementRef<typeof AvatarPrimitive.Root>, className,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> ...props
>(({ className, ...props }, ref) => ( }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
return (
<AvatarPrimitive.Root <AvatarPrimitive.Root
ref={ref} data-slot="avatar"
className={cn( className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", "relative flex size-8 shrink-0 overflow-hidden rounded-full",
className className
)} )}
{...props} {...props}
/> />
)) )
Avatar.displayName = AvatarPrimitive.Root.displayName }
const AvatarImage = React.forwardRef< function AvatarImage({
React.ElementRef<typeof AvatarPrimitive.Image>, className,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> ...props
>(({ className, ...props }, ref) => ( }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
return (
<AvatarPrimitive.Image <AvatarPrimitive.Image
ref={ref} data-slot="avatar-image"
className={cn("aspect-square h-full w-full", className)} className={cn("aspect-square size-full", className)}
{...props} {...props}
/> />
)) )
AvatarImage.displayName = AvatarPrimitive.Image.displayName }
const AvatarFallback = React.forwardRef< function AvatarFallback({
React.ElementRef<typeof AvatarPrimitive.Fallback>, className,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> ...props
>(({ className, ...props }, ref) => ( }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
return (
<AvatarPrimitive.Fallback <AvatarPrimitive.Fallback
ref={ref} data-slot="avatar-fallback"
className={cn( className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted", "bg-muted flex size-full items-center justify-center rounded-full",
className className
)} )}
{...props} {...props}
/> />
)) )
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName }
export { Avatar, AvatarImage, AvatarFallback } export { Avatar, AvatarImage, AvatarFallback }

39
src/components/ui/button.tsx
View File

@@ -5,26 +5,26 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{ {
variants: { variants: {
variant: { variant: {
default: default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90", "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive: destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
outline: outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
secondary: secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground", ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline", link: "text-primary underline-offset-4 hover:underline",
}, },
size: { size: {
default: "h-9 px-4 py-2", default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md px-3 text-xs", sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-8", lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "h-9 w-9", icon: "size-9",
}, },
}, },
defaultVariants: { defaultVariants: {
@@ -34,24 +34,25 @@ const buttonVariants = cva(
} }
) )
export interface ButtonProps function Button({
extends React.ButtonHTMLAttributes<HTMLButtonElement>, className,
VariantProps<typeof buttonVariants> { variant,
size,
asChild = false,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean asChild?: boolean
} }) {
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button" const Comp = asChild ? Slot : "button"
return ( return (
<Comp <Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))} className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props} {...props}
/> />
) )
} }
)
Button.displayName = "Button"
export { Button, buttonVariants } export { Button, buttonVariants }

53
src/components/ui/tooltip.tsx
View File

@@ -3,28 +3,57 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
const TooltipProvider = TooltipPrimitive.Provider function TooltipProvider({
delayDuration = 0,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return (
<TooltipPrimitive.Provider
data-slot="tooltip-provider"
delayDuration={delayDuration}
{...props}
/>
)
}
const Tooltip = TooltipPrimitive.Root function Tooltip({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
return (
<TooltipProvider>
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
</TooltipProvider>
)
}
const TooltipTrigger = TooltipPrimitive.Trigger function TooltipTrigger({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}
const TooltipContent = React.forwardRef< function TooltipContent({
React.ElementRef<typeof TooltipPrimitive.Content>, className,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> sideOffset = 0,
>(({ className, sideOffset = 4, ...props }, ref) => ( children,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
return (
<TooltipPrimitive.Portal> <TooltipPrimitive.Portal>
<TooltipPrimitive.Content <TooltipPrimitive.Content
ref={ref} data-slot="tooltip-content"
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
className className
)} )}
{...props} {...props}
/> >
{children}
<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal> </TooltipPrimitive.Portal>
)) )
TooltipContent.displayName = TooltipPrimitive.Content.displayName }
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

161
src/index.css
View File

@@ -1,60 +1,117 @@
@import "tailwindcss/preflight"; @import "tailwindcss";
@tailwind utilities;
@plugin "tailwindcss-animate";
@custom-variant dark (&:is(.dark *));
@layer base {
:root { :root {
--background: 0 0% 100%; --background: oklch(1 0 0);
--foreground: 0 0% 3.9%; --foreground: oklch(0.145 0 0);
--card: 0 0% 100%; --card: oklch(1 0 0);
--card-foreground: 0 0% 3.9%; --card-foreground: oklch(0.145 0 0);
--popover: 0 0% 100%; --popover: oklch(1 0 0);
--popover-foreground: 0 0% 3.9%; --popover-foreground: oklch(0.145 0 0);
--primary: 0 0% 9%; --primary: oklch(0.205 0 0);
--primary-foreground: 0 0% 98%; --primary-foreground: oklch(0.985 0 0);
--secondary: 0 0% 96.1%; --secondary: oklch(0.97 0 0);
--secondary-foreground: 0 0% 9%; --secondary-foreground: oklch(0.205 0 0);
--muted: 0 0% 96.1%; --muted: oklch(0.97 0 0);
--muted-foreground: 0 0% 45.1%; --muted-foreground: oklch(0.556 0 0);
--accent: 0 0% 96.1%; --accent: oklch(0.97 0 0);
--accent-foreground: 0 0% 9%; --accent-foreground: oklch(0.205 0 0);
--destructive: 0 84.2% 60.2%; --destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: 0 0% 98%; --destructive-foreground: oklch(0.577 0.245 27.325);
--border: 0 0% 89.8%; --border: oklch(0.922 0 0);
--input: 0 0% 89.8%; --input: oklch(0.922 0 0);
--ring: 0 0% 3.9%; --ring: oklch(0.87 0 0);
--chart-1: 12 76% 61%; --chart-1: oklch(0.646 0.222 41.116);
--chart-2: 173 58% 39%; --chart-2: oklch(0.6 0.118 184.704);
--chart-3: 197 37% 24%; --chart-3: oklch(0.398 0.07 227.392);
--chart-4: 43 74% 66%; --chart-4: oklch(0.828 0.189 84.429);
--chart-5: 27 87% 67%; --chart-5: oklch(0.769 0.188 70.08);
--radius: 0.5rem --radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.87 0 0);
} }
.dark { .dark {
--background: 0 0% 3.9%; --background: oklch(0.145 0 0);
--foreground: 0 0% 98%; --foreground: oklch(0.985 0 0);
--card: 0 0% 3.9%; --card: oklch(0.145 0 0);
--card-foreground: 0 0% 98%; --card-foreground: oklch(0.985 0 0);
--popover: 0 0% 3.9%; --popover: oklch(0.145 0 0);
--popover-foreground: 0 0% 98%; --popover-foreground: oklch(0.985 0 0);
--primary: 0 0% 98%; --primary: oklch(0.985 0 0);
--primary-foreground: 0 0% 9%; --primary-foreground: oklch(0.205 0 0);
--secondary: 0 0% 14.9%; --secondary: oklch(0.269 0 0);
--secondary-foreground: 0 0% 98%; --secondary-foreground: oklch(0.985 0 0);
--muted: 0 0% 14.9%; --muted: oklch(0.269 0 0);
--muted-foreground: 0 0% 63.9%; --muted-foreground: oklch(0.708 0 0);
--accent: 0 0% 14.9%; --accent: oklch(0.269 0 0);
--accent-foreground: 0 0% 98%; --accent-foreground: oklch(0.985 0 0);
--destructive: 0 62.8% 30.6%; --destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: 0 0% 98%; --destructive-foreground: oklch(0.637 0.237 25.331);
--border: 0 0% 14.9%; --border: oklch(0.269 0 0);
--input: 0 0% 14.9%; --input: oklch(0.269 0 0);
--ring: 0 0% 83.1%; --ring: oklch(0.439 0 0);
--chart-1: 220 70% 50%; --chart-1: oklch(0.488 0.243 264.376);
--chart-2: 160 60% 45%; --chart-2: oklch(0.696 0.17 162.48);
--chart-3: 30 80% 55%; --chart-3: oklch(0.769 0.188 70.08);
--chart-4: 280 65% 60%; --chart-4: oklch(0.627 0.265 303.9);
--chart-5: 340 75% 55% --chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.269 0 0);
--sidebar-ring: oklch(0.439 0 0);
} }
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
} }
@layer base { @layer base {

3
vite.config.ts
View File

@@ -1,10 +1,11 @@
import path from "path" import path from "path"
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react(), tailwindcss()],
resolve: { resolve: {
alias: { alias: {
"@": path.resolve(__dirname, "./src"), "@": path.resolve(__dirname, "./src"),