Skip to content

Commit ef3d380

Browse files
BrunoQuaresmaBrunoQuaresma
authored
feat(chat): redesign chat and add theme support
2 parents c830c09 + f1c124b commit ef3d380

18 files changed

+1072
-341
lines changed

‎.vscode/settings.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
22
"editor.formatOnSave": true,
3+
"editor.defaultFormatter": "esbenp.prettier-vscode"
34
}

‎chat/bun.lock

Lines changed: 102 additions & 4 deletions
Large diffs are not rendered by default.

‎chat/components.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "src/app/globals.css",
9+
"baseColor": "slate",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎chat/package.json

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,18 @@
1212
"deploy-gh-pages": "GITHUB_PAGES=true next build && gh-pages -d out --nojekyll -e chat -f"
1313
},
1414
"dependencies": {
15+
"@radix-ui/react-dropdown-menu": "^2.1.14",
16+
"@radix-ui/react-slot": "^1.2.2",
17+
"@radix-ui/react-tabs": "^1.1.11",
18+
"class-variance-authority": "^0.7.1",
19+
"clsx": "^2.1.1",
20+
"lucide-react": "^0.511.0",
1521
"next": "15.2.4",
22+
"next-themes": "^0.4.6",
1623
"react": "^19.0.0",
17-
"react-dom": "^19.0.0"
24+
"react-dom": "^19.0.0",
25+
"sonner": "^2.0.3",
26+
"tailwind-merge": "^3.3.0"
1827
},
1928
"devDependencies": {
2029
"@eslint/eslintrc": "^3",
@@ -26,6 +35,7 @@
2635
"eslint-config-next": "15.2.4",
2736
"gh-pages": "^6.3.0",
2837
"tailwindcss": "^4",
38+
"tw-animate-css": "^1.3.0",
2939
"typescript": "^5"
3040
}
3141
}

‎chat/src/app/globals.css

Lines changed: 108 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,122 @@
11
@import "tailwindcss";
2+
@import "tw-animate-css";
23

3-
:root {
4-
--background: #ffffff;
5-
--foreground: #171717;
6-
}
4+
@custom-variant dark (&:is(.dark *));
75

86
@theme inline {
97
--color-background: var(--background);
108
--color-foreground: var(--foreground);
119
--font-sans: var(--font-geist-sans);
12-
--font-mono: var(--font-geist-mono);
10+
--font-mono: "Menlo", "DejaVu Sans Mono", "Consolas", "Courier New", monospace;
11+
--color-sidebar-ring: var(--sidebar-ring);
12+
--color-sidebar-border: var(--sidebar-border);
13+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
14+
--color-sidebar-accent: var(--sidebar-accent);
15+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
16+
--color-sidebar-primary: var(--sidebar-primary);
17+
--color-sidebar-foreground: var(--sidebar-foreground);
18+
--color-sidebar: var(--sidebar);
19+
--color-chart-5: var(--chart-5);
20+
--color-chart-4: var(--chart-4);
21+
--color-chart-3: var(--chart-3);
22+
--color-chart-2: var(--chart-2);
23+
--color-chart-1: var(--chart-1);
24+
--color-ring: var(--ring);
25+
--color-input: var(--input);
26+
--color-border: var(--border);
27+
--color-destructive: var(--destructive);
28+
--color-accent-foreground: var(--accent-foreground);
29+
--color-accent: var(--accent);
30+
--color-muted-foreground: var(--muted-foreground);
31+
--color-muted: var(--muted);
32+
--color-secondary-foreground: var(--secondary-foreground);
33+
--color-secondary: var(--secondary);
34+
--color-primary-foreground: var(--primary-foreground);
35+
--color-primary: var(--primary);
36+
--color-popover-foreground: var(--popover-foreground);
37+
--color-popover: var(--popover);
38+
--color-card-foreground: var(--card-foreground);
39+
--color-card: var(--card);
40+
--radius-sm: calc(var(--radius) - 4px);
41+
--radius-md: calc(var(--radius) - 2px);
42+
--radius-lg: var(--radius);
43+
--radius-xl: calc(var(--radius) + 4px);
1344
}
1445

15-
@media (prefers-color-scheme: dark) {
16-
:root {
17-
--background: #0a0a0a;
18-
--foreground: #ededed;
19-
}
46+
:root {
47+
--radius: 0.625rem;
48+
--background: oklch(1 0 0);
49+
--foreground: oklch(0.129 0.042 264.695);
50+
--card: oklch(1 0 0);
51+
--card-foreground: oklch(0.129 0.042 264.695);
52+
--popover: oklch(1 0 0);
53+
--popover-foreground: oklch(0.129 0.042 264.695);
54+
--primary: oklch(0.208 0.042 265.755);
55+
--primary-foreground: oklch(0.984 0.003 247.858);
56+
--secondary: oklch(0.968 0.007 247.896);
57+
--secondary-foreground: oklch(0.208 0.042 265.755);
58+
--muted: oklch(0.968 0.007 247.896);
59+
--muted-foreground: oklch(0.554 0.046 257.417);
60+
--accent: oklch(0.968 0.007 247.896);
61+
--accent-foreground: oklch(0.208 0.042 265.755);
62+
--destructive: oklch(0.577 0.245 27.325);
63+
--border: oklch(0.929 0.013 255.508);
64+
--input: oklch(0.929 0.013 255.508);
65+
--ring: oklch(0.704 0.04 256.788);
66+
--chart-1: oklch(0.646 0.222 41.116);
67+
--chart-2: oklch(0.6 0.118 184.704);
68+
--chart-3: oklch(0.398 0.07 227.392);
69+
--chart-4: oklch(0.828 0.189 84.429);
70+
--chart-5: oklch(0.769 0.188 70.08);
71+
--sidebar: oklch(0.984 0.003 247.858);
72+
--sidebar-foreground: oklch(0.129 0.042 264.695);
73+
--sidebar-primary: oklch(0.208 0.042 265.755);
74+
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
75+
--sidebar-accent: oklch(0.968 0.007 247.896);
76+
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
77+
--sidebar-border: oklch(0.929 0.013 255.508);
78+
--sidebar-ring: oklch(0.704 0.04 256.788);
2079
}
2180

22-
body {
23-
background: var(--background);
24-
color: var(--foreground);
25-
font-family: Arial, Helvetica, sans-serif;
81+
.dark {
82+
--background: oklch(0.129 0.042 264.695);
83+
--foreground: oklch(0.984 0.003 247.858);
84+
--card: oklch(0.208 0.042 265.755);
85+
--card-foreground: oklch(0.984 0.003 247.858);
86+
--popover: oklch(0.208 0.042 265.755);
87+
--popover-foreground: oklch(0.984 0.003 247.858);
88+
--primary: oklch(0.929 0.013 255.508);
89+
--primary-foreground: oklch(0.208 0.042 265.755);
90+
--secondary: oklch(0.279 0.041 260.031);
91+
--secondary-foreground: oklch(0.984 0.003 247.858);
92+
--muted: oklch(0.279 0.041 260.031);
93+
--muted-foreground: oklch(0.704 0.04 256.788);
94+
--accent: oklch(0.279 0.041 260.031);
95+
--accent-foreground: oklch(0.984 0.003 247.858);
96+
--destructive: oklch(0.704 0.191 22.216);
97+
--border: oklch(1 0 0 / 10%);
98+
--input: oklch(1 0 0 / 15%);
99+
--ring: oklch(0.551 0.027 264.364);
100+
--chart-1: oklch(0.488 0.243 264.376);
101+
--chart-2: oklch(0.696 0.17 162.48);
102+
--chart-3: oklch(0.769 0.188 70.08);
103+
--chart-4: oklch(0.627 0.265 303.9);
104+
--chart-5: oklch(0.645 0.246 16.439);
105+
--sidebar: oklch(0.208 0.042 265.755);
106+
--sidebar-foreground: oklch(0.984 0.003 247.858);
107+
--sidebar-primary: oklch(0.488 0.243 264.376);
108+
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
109+
--sidebar-accent: oklch(0.279 0.041 260.031);
110+
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
111+
--sidebar-border: oklch(1 0 0 / 10%);
112+
--sidebar-ring: oklch(0.551 0.027 264.364);
26113
}
27114

28-
/* Ensure the monospace font is loaded with proper spacing for terminal output */
29-
.font-mono {
30-
font-family: 'Menlo', 'DejaVu Sans Mono', 'Consolas', 'Courier New', monospace;
31-
font-size: 0.9rem;
32-
letter-spacing: 0;
33-
line-height: 1.2;
115+
@layer base {
116+
* {
117+
@apply border-border outline-ring/50;
118+
}
119+
body {
120+
@apply bg-background text-foreground;
121+
}
34122
}

‎chat/src/app/layout.tsx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
import type { Metadata } from "next";
2-
import { Geist, Geist_Mono } from "next/font/google";
2+
import { Geist } from "next/font/google";
33
import "./globals.css";
4+
import { Toaster } from "@/components/ui/sonner";
5+
import { ThemeProvider } from "@/components/theme-provider";
46

57
const geistSans = Geist({
68
variable: "--font-geist-sans",
79
subsets: ["latin"],
810
});
911

10-
const geistMono = Geist_Mono({
11-
variable: "--font-geist-mono",
12-
subsets: ["latin"],
13-
});
14-
1512
export const metadata: Metadata = {
1613
title: "AgentAPI Chat",
1714
description: "A ChatGPT-like interface for AgentAPI",
@@ -23,12 +20,18 @@ export default function RootLayout({
2320
children: React.ReactNode;
2421
}>) {
2522
return (
26-
<html lang="en">
27-
<body
28-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
29-
>
30-
{children}
23+
<html lang="en" suppressHydrationWarning>
24+
<body className={`${geistSans.variable} antialiased`}>
25+
<ThemeProvider
26+
attribute="class"
27+
defaultTheme="system"
28+
enableSystem
29+
disableTransitionOnChange
30+
>
31+
{children}
32+
<Toaster richColors />
33+
</ThemeProvider>
3134
</body>
3235
</html>
3336
);
34-
}
37+
}

‎chat/src/app/page.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
1-
import { Suspense } from 'react';
2-
import ChatInterface from '@/components/ChatInterface';
1+
import { Suspense } from "react";
2+
import ChatInterface from "@/components/ChatInterface";
33

44
export default function Home() {
55
return (
6-
<main className="flex min-h-screen flex-col items-center justify-between p-4 md:p-12">
7-
<div className="w-full max-w-5xl">
8-
<h1 className="text-3xl font-bold mb-6 text-center">AgentAPI Chat</h1>
9-
{/* Use Suspense boundary for useSearchParams in ChatInterface */}
10-
<Suspense fallback={<div className="text-center p-4">Loading chat interface...</div>}>
11-
<ChatInterface />
12-
</Suspense>
13-
</div>
14-
</main>
6+
<Suspense
7+
fallback={
8+
<div className="text-center p-4">Loading chat interface...</div>
9+
}
10+
>
11+
<ChatInterface />
12+
</Suspense>
1513
);
16-
}
14+
}

0 commit comments

Comments
 (0)