chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: migrate page components to Design System v4

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:04:16 -04:00
parent fd28921373
commit e4ef904707
58 changed files with 1416 additions and 1416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/pages/AssistantChatPage.tsx
View File

@@ -250,13 +250,13 @@ export default function AssistantChatPage() {
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
{messages.length === 0 && !loading && (
<div className="flex flex-col items-center justify-center h-full text-center">
<div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<Sparkles size={28} className="text-primary" />
<div className="w-16 h-16 rounded-full bg-[rgba(34,211,238,0.10)] flex items-center justify-center mb-4">
<Sparkles size={28} className="text-[#22d3ee]" />
</div>
<h2 className="text-lg font-heading font-semibold text-foreground mb-2">
<h2 className="text-lg font-heading font-semibold text-[#e2e5eb] mb-2">
AI Assistant
</h2>
<p className="text-sm text-muted-foreground max-w-md">
<p className="text-sm text-[#848b9b] max-w-md">
Ask me anything about IT infrastructure, networking, Active Directory,
cloud platforms, or troubleshooting. I'll also suggest relevant flows from your team's library.
</p>
@@ -273,10 +273,10 @@ export default function AssistantChatPage() {
{loading && (
<div className="flex gap-3">
<div className="w-8 h-8 rounded-full bg-primary/15 flex items-center justify-center">
<Sparkles size={14} className="text-primary" />
<Sparkles size={14} className="text-[#22d3ee]" />
</div>
<div className="bg-white/[0.04] border border-brand-border rounded-2xl px-4 py-3">
<Loader2 size={16} className="animate-spin text-primary" />
<Loader2 size={16} className="animate-spin text-[#22d3ee]" />
</div>
</div>
)}
@@ -294,7 +294,7 @@ export default function AssistantChatPage() {
onKeyDown={handleKeyDown}
placeholder="Ask about IT, networking, troubleshooting..."
rows={3}
className="flex-1 resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-primary/30"
className="flex-1 resize-none rounded-xl border bg-[#14161d] text-[#e2e5eb] text-sm placeholder:text-[#848b9b] px-4 py-3 focus:outline-hidden focus:border-primary/30"
style={{ borderColor: 'var(--glass-border)' }}
disabled={loading}
/>
@@ -302,7 +302,7 @@ export default function AssistantChatPage() {
<button
onClick={handleSend}
disabled={!input.trim() || loading}
className="bg-gradient-brand text-brand-dark p-3 rounded-xl hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40"
className="bg-[#22d3ee] text-brand-dark p-3 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
title="Send message"
>
<Send size={18} />
@@ -311,7 +311,7 @@ export default function AssistantChatPage() {
<button
onClick={() => setShowConclude(true)}
disabled={loading}
className="p-3 rounded-xl border text-muted-foreground hover:text-amber-400 hover:border-amber-400/30 hover:bg-amber-400/10 transition-all disabled:opacity-40"
className="p-3 rounded-xl border text-[#848b9b] hover:text-amber-400 hover:border-amber-400/30 hover:bg-amber-400/10 transition-all disabled:opacity-40"
style={{ borderColor: 'var(--glass-border)' }}
title="Conclude session"
>
@@ -320,25 +320,25 @@ export default function AssistantChatPage() {
)}
</div>
</div>
<p className="text-[0.625rem] text-muted-foreground mt-1.5 px-1">Shift + Enter for a new line</p>
<p className="text-[0.625rem] text-[#848b9b] mt-1.5 px-1">Shift + Enter for a new line</p>
</div>
</div>
</>
) : (
<div className="flex flex-col items-center justify-center h-full text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<Sparkles size={32} className="text-primary" />
<div className="w-20 h-20 rounded-full bg-[rgba(34,211,238,0.10)] flex items-center justify-center mb-4">
<Sparkles size={32} className="text-[#22d3ee]" />
</div>
<h2 className="text-xl font-heading font-semibold text-foreground mb-2">
<h2 className="text-xl font-heading font-semibold text-[#e2e5eb] mb-2">
AI Assistant
</h2>
<p className="text-sm text-muted-foreground max-w-md mb-6">
<p className="text-sm text-[#848b9b] max-w-md mb-6">
Your Senior Systems & Network Engineer. Ask anything about IT infrastructure,
or start a new chat to get personalized help with your team's flows.
</p>
<button
onClick={handleNewChat}
className="bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-6 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all"
className="bg-[#22d3ee] text-brand-dark font-semibold text-sm rounded-lg px-6 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
>
Start a Conversation
</button>