Skip to content

Commit c83962e

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor layout
1 parent c830c09 commit c83962e

File tree

6 files changed

+66
-68
lines changed

6 files changed

+66
-68
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/src/app/globals.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@
2222
body {
2323
background: var(--background);
2424
color: var(--foreground);
25-
font-family: Arial, Helvetica, sans-serif;
25+
font-family: var(--font-sans);
2626
}
2727

2828
/* Ensure the monospace font is loaded with proper spacing for terminal output */
2929
.font-mono {
30-
font-family: 'Menlo', 'DejaVu Sans Mono', 'Consolas', 'Courier New', monospace;
30+
font-family: "Menlo", "DejaVu Sans Mono", "Consolas", "Courier New", monospace;
3131
font-size: 0.9rem;
3232
letter-spacing: 0;
3333
line-height: 1.2;

‎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+
}

‎chat/src/components/ChatInterface.tsx

Lines changed: 48 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -217,9 +217,10 @@ export default function ChatInterface() {
217217
};
218218

219219
return (
220-
<div className="flex flex-col h-[80vh] bg-gray-100 rounded-lg overflow-hidden border border-gray-300 shadow-lg w-full max-w-[95vw]">
221-
<div className="p-3 bg-gray-800 text-white text-sm flex items-center justify-between">
222-
<span>AgentAPI Chat</span>
220+
<div className="flex flex-col h-svh">
221+
<header className="p-3 dark:text-white text-sm flex items-center justify-between border-b">
222+
<span className="font-medium">AgentAPI Chat</span>
223+
223224
<div className="flex items-center space-x-3">
224225
<div className="flex items-center">
225226
<span
@@ -232,52 +233,53 @@ export default function ChatInterface() {
232233
<span>Status: {serverStatus}</span>
233234
</div>
234235
</div>
235-
</div>
236-
237-
{(serverStatus === "offline" || serverStatus === "unknown") && (
238-
<div className="bg-yellow-100 border-y border-yellow-400 text-yellow-800 px-4 py-3 flex items-center justify-between font-medium">
239-
<div className="flex items-center">
240-
<svg
241-
className="w-5 h-5 mr-2"
242-
fill="currentColor"
243-
viewBox="0 0 20 20"
244-
xmlns="http://www.w3.org/2000/svg"
236+
</header>
237+
238+
<main className="flex flex-1 flex-col w-full max-w-4xl mx-auto overflow-auto pb-4">
239+
{(serverStatus === "offline" || serverStatus === "unknown") && (
240+
<div className="bg-yellow-100 border-y border-yellow-400 text-yellow-800 px-4 py-3 flex items-center justify-between font-medium">
241+
<div className="flex items-center">
242+
<svg
243+
className="w-5 h-5 mr-2"
244+
fill="currentColor"
245+
viewBox="0 0 20 20"
246+
xmlns="http://www.w3.org/2000/svg"
247+
>
248+
<path
249+
fillRule="evenodd"
250+
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
251+
clipRule="evenodd"
252+
/>
253+
</svg>
254+
<span>
255+
API server is offline. Please start the AgentAPI server.
256+
Attempting to connect to: {agentAPIUrl || "N/A"}.
257+
</span>
258+
</div>
259+
<button
260+
onClick={() => window.location.reload()}
261+
className="bg-yellow-200 px-3 py-1 rounded text-xs hover:bg-yellow-300"
245262
>
246-
<path
247-
fillRule="evenodd"
248-
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
249-
clipRule="evenodd"
250-
/>
251-
</svg>
252-
<span>
253-
API server is offline. Please start the AgentAPI server.
254-
Attempting to connect to: {agentAPIUrl || "N/A"}.
255-
</span>
263+
Retry Connection
264+
</button>
256265
</div>
257-
<button
258-
onClick={() => window.location.reload()}
259-
className="bg-yellow-200 px-3 py-1 rounded text-xs hover:bg-yellow-300"
260-
>
261-
Retry Connection
262-
</button>
263-
</div>
264-
)}
265-
266-
{error && (
267-
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-2 text-sm relative">
268-
<span className="block sm:inline">{error}</span>
269-
<button
270-
onClick={() => setError(null)}
271-
className="absolute top-0 bottom-0 right-0 px-4 py-2"
272-
>
273-
×
274-
</button>
275-
</div>
276-
)}
277-
278-
<MessageList messages={messages} loading={loading} />
266+
)}
267+
268+
{error && (
269+
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-2 text-sm relative">
270+
<span className="block sm:inline">{error}</span>
271+
<button
272+
onClick={() => setError(null)}
273+
className="absolute top-0 bottom-0 right-0 px-4 py-2"
274+
>
275+
×
276+
</button>
277+
</div>
278+
)}
279279

280-
<MessageInput onSendMessage={sendMessage} disabled={loading} />
280+
<MessageList messages={messages} loading={loading} />
281+
<MessageInput onSendMessage={sendMessage} disabled={loading} />
282+
</main>
281283
</div>
282284
);
283285
}

‎chat/src/components/MessageInput.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -137,10 +137,7 @@ export default function MessageInput({
137137
}, [inputMode]);
138138

139139
return (
140-
<form
141-
onSubmit={handleSubmit}
142-
className="border-t border-gray-300 p-4 bg-white"
143-
>
140+
<form onSubmit={handleSubmit} className="bg-gray-900 p-4 rounded-lg border">
144141
<div className="flex flex-col">
145142
<div className="mb-2 flex items-center">
146143
<div className="flex rounded-lg overflow-hidden border border-gray-300">

‎chat/src/components/MessageList.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,17 +94,17 @@ export default function MessageList({
9494
);
9595

9696
return (
97-
<div className="flex-1 overflow-y-auto p-4 bg-white">
97+
<div className="flex-1 overflow-y-auto py-4">
9898
{messages.map((message) => (
9999
<div
100100
key={message.id}
101101
className={`mb-4 ${message.role === "user" ? "text-right" : ""}`}
102102
>
103103
<div
104-
className={`inline-block px-4 py-2 rounded-lg ${
104+
className={`inline-block rounded-lg ${
105105
message.role === "user"
106-
? "bg-blue-500 text-white rounded-tr-none max-w-[90%]"
107-
: "bg-gray-200 text-gray-800 rounded-tl-none max-w-[90%] min-w-[640px]"
106+
? "bg-gray-800 text-white rounded max-w-[90%]"
107+
: "max-w-[90%]"
108108
}`}
109109
>
110110
<div className="text-xs mb-1 font-bold text-left">

0 commit comments

Comments
 (0)