manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style AI page like other pages

Browse source 
- Add dark mode support throughout
- Add consistent header with back button
- Add modal dark mode styling

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-11 09:17:14 +05:30
parent 5984a8ea13
commit 75909615b4
1 changed files with 25 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/app/ai/page.tsx
View file

@ -161,17 +161,29 @@ export default function AIChatPage() {
};
return (
<div className="flex h-screen bg-gradient-to-br from-rose-50 to-amber-50">
<div className="flex min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
{error && (
<div className="p-4 bg-red-100 text-red-700">
<div className="p-4 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200">
Error: {error}
</div>
)}
{/* Header - same pattern as other pages */}
<div className="p-4 flex items-center justify-between">
<div className="flex items-center gap-4">
<a href="/menu" className="p-2 dark:text-white">←</a>
<h1 className="text-xl font-bold dark:text-white">AI Chat</h1>
</div>
<button onClick={() => setSidebarOpen(!sidebarOpen)} className="p-2 bg-white dark:bg-gray-800 rounded-lg dark:text-white">
☰
</button>
</div>
{/* Sidebar */}
<div className={`${sidebarOpen ? "w-64" : "w-0"} overflow-hidden transition-all`}>
<div className="w-64 p-4 border-r bg-white h-full overflow-y-auto">
<div className="w-64 p-4 border-r bg-white dark:bg-gray-800 h-full overflow-y-auto">
<div className="flex justify-between items-center mb-4">
<h1 className="font-bold">AI Chat</h1>
<h1 className="font-bold dark:text-white">Chats</h1>
<button onClick={createNewSession} className="text-rose-400">+</button>
</div>
<div className="space-y-2">
@ -179,7 +191,7 @@ export default function AIChatPage() {
<div
key={session.id}
onClick={() => setCurrentSessionId(session.id)}
className={`p-2 rounded-lg cursor-pointer flex justify-between items-center ${session.id === currentSessionId ? "bg-rose-100" : ""}`}
className={`p-2 rounded-lg cursor-pointer flex justify-between items-center dark:text-gray-100 ${session.id === currentSessionId ? "bg-rose-100 dark:bg-rose-900" : ""}`}
>
<div className="flex-1">
<div className="text-sm font-medium truncate">{session.title}</div>
@ -193,11 +205,11 @@ export default function AIChatPage() {
</button>
{deleteConfirm === session.id && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-white p-4 rounded-lg">
<p className="mb-4">Delete this conversation?</p>
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg">
<p className="mb-4 dark:text-white">Delete this conversation?</p>
<div className="flex gap-2">
<button onClick={() => deleteSession(session.id)} className="bg-red-500 text-white px-3 py-1 rounded">Delete</button>
<button onClick={() => setDeleteConfirm(null)} className="bg-gray-200 px-3 py-1 rounded">Cancel</button>
<button onClick={() => setDeleteConfirm(null)} className="bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">Cancel</button>
</div>
</div>
</div>
@ -210,28 +222,26 @@ export default function AIChatPage() {
{/* Main chat */}
<div className="flex-1 flex flex-col">
<div className="p-4 flex items-center border-b bg-white">
<a href="/menu" className="p-2">←</a>
<button onClick={() => setSidebarOpen(!sidebarOpen)} className="p-2">☰</button>
<span className="ml-2 font-medium">{currentSession?.title || "AI Chat"}</span>
<div className="p-4 flex items-center border-b bg-white dark:bg-gray-800">
<span className="ml-2 font-medium dark:text-white">{currentSession?.title || "AI Chat"}</span>
</div>
<div className="flex-1 overflow-y-auto p-4 space-y-4">
{currentSession?.messages.map((msg, i) => (
<div key={i} className={`${msg.role === "user" ? "ml-auto bg-rose-100" : "mr-auto bg-gray-100"} p-3 rounded-lg max-w-[80%] whitespace-pre-wrap`}>
<div key={i} className={`${msg.role === "user" ? "ml-auto bg-rose-100 dark:bg-rose-900" : "mr-auto bg-gray-100 dark:bg-gray-800 dark:text-gray-100"} p-3 rounded-lg max-w-[80%] whitespace-pre-wrap`}>
{msg.content}
</div>
))}
</div>
<div className="p-4 border-t bg-white">
<div className="p-4 border-t bg-white dark:bg-gray-800">
<div className="flex gap-2">
<input
value={input}
onChange={e => setInput(e.target.value)}
onKeyDown={e => e.key === "Enter" && handleSend()}
placeholder="Ask about your baby..."
className="flex-1 p-3 border rounded-lg"
className="flex-1 p-3 border rounded-lg dark:bg-gray-700 dark:text-white"
disabled={loading}
/>
<button onClick={handleSend} disabled={loading || !input.trim()} className={`px-4 py-2 text-white rounded-lg ${loading || !input.trim() ? "bg-gray-300 cursor-not-allowed" : "bg-rose-400"}`}>