style: replicate Domino's UI layout with Theo AI branding

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Send, User, Bot, Loader2 } from 'lucide-react';
+import { Send, User, Bot, Loader2, Trash2 } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import axios from 'axios';
 
@@ -24,35 +24,38 @@ const App: React.FC = () => {
     const [isLoading, setIsLoading] = useState(false);
     const [sessionId] = useState<string>(() => Math.random().toString(36).substring(7));
     const [verse, setVerse] = useState(VERSES[0]);
-    const chatEndRef = useRef<HTMLDivElement>(null);
+    const chatBoxRef = useRef<HTMLDivElement>(null);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const isFirstRender = useRef(true);
 
     useEffect(() => {
         const dayOfYear = Math.floor((new Date().getTime() - new Date(new Date().getFullYear(), 0, 0).getTime()) / 86400000);
         setVerse(VERSES[dayOfYear % VERSES.length]);
     }, []);
 
-    const isFirstRender = useRef(true);
-
     useEffect(() => {
         if (isFirstRender.current) {
             isFirstRender.current = false;
             return;
         }
-        if (messages.length > 0) {
-            chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+        if (chatBoxRef.current) {
+            chatBoxRef.current.scrollTo({
+                top: chatBoxRef.current.scrollHeight,
+                behavior: 'smooth'
+            });
         }
-    }, [messages]);
+    }, [messages, isLoading]);
 
     const handleSend = async () => {
         if (!input.trim() || isLoading) return;
 
         const userMessage = input.trim();
         setInput('');
+        if (textareaRef.current) textareaRef.current.style.height = 'auto';
         setMessages(prev => [...prev, { role: 'user', content: userMessage }]);
         setIsLoading(true);
 
         try {
-            // Note: Use relative path for Hugging Face deployment so it hits the same origin backend
             const response = await axios.post('/ai-chat', {
                 query: userMessage,
                 session_id: sessionId,
@@ -76,142 +79,135 @@ const App: React.FC = () => {
         }
     };
 
+    const clearChat = () => {
+        if (window.confirm('Are you sure you want to clear our conversation, beloved?')) {
+            setMessages([]);
+        }
+    };
+
+    const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setInput(e.target.value);
+        e.target.style.height = 'auto';
+        e.target.style.height = `${e.target.scrollHeight}px`;
+    };
+
     return (
-        <div className="h-[100dvh] bg-[#002B22] flex flex-col items-center justify-center p-0 md:p-4 font-outfit text-white overflow-hidden relative">
-            {/* Dynamic Background Elements */}
-            <div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-[#007055]/20 rounded-full blur-[150px] animate-pulse pointer-events-none"></div>
-            <div className="absolute bottom-[-20%] right-[-10%] w-[60%] h-[60%] bg-[#FDFBD4]/5 rounded-full blur-[150px] pointer-events-none"></div>
-
-            <div className="w-full max-w-5xl h-full md:h-[92vh] flex flex-col md:flex-row relative z-10 bg-black/20 backdrop-blur-2xl md:rounded-[2.5rem] overflow-hidden border border-white/5 shadow-[0_32px_64px_-12px_rgba(0,0,0,0.5)]">
-
-                {/* Modern Sidebar-style Header (Desktop) / Top Header (Mobile) */}
-                <aside className="w-full md:w-80 bg-[#00362B]/80 p-4 md:p-8 flex flex-row md:flex-col items-center md:items-start space-x-4 md:space-x-0 md:space-y-8 border-b md:border-b-0 md:border-r border-white/5 shrink-0">
-                    <div className="relative group shrink-0">
-                        <div className="absolute -inset-1 bg-gradient-to-tr from-[#FDFBD4] to-[#007055] rounded-2xl md:rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
-                        <div className="relative w-12 h-12 md:w-32 md:h-32 rounded-xl md:rounded-[2rem] overflow-hidden border border-white/10 shadow-2xl transform transition-transform group-hover:scale-105 duration-500">
+        <div className="h-[100dvh] w-full bg-[#002B22] flex items-center justify-center overflow-hidden font-outfit text-white p-0 sm:p-4">
+            {/* Background Orbs */}
+            <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-[#007055]/20 rounded-full blur-[120px] pointer-events-none"></div>
+            <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-[#FDFBD4]/5 rounded-full blur-[120px] pointer-events-none"></div>
+
+            <div className="w-full max-w-4xl h-full sm:h-[90vh] bg-white/[0.03] backdrop-blur-3xl sm:rounded-[2rem] flex flex-col overflow-hidden border border-white/10 shadow-[0_32px_64px_-12px_rgba(0,0,0,0.5)]">
+
+                {/* Header - Domino's Style */}
+                <header className="flex items-center justify-between px-6 py-4 md:px-10 md:py-6 bg-[#00362B]/60 border-b border-white/10 z-20">
+                    <div className="flex items-center gap-4">
+                        <div className="relative w-10 h-10 md:w-12 md:h-12 rounded-xl overflow-hidden border border-[#FDFBD4]/20 shadow-lg">
                             <img src="/assets/logo.jpg" alt="CLCC Logo" className="w-full h-full object-cover" />
                         </div>
-                    </div>
-                    <div className="flex-1 md:flex-none text-left space-y-1 md:space-y-2">
-                        <h1 className="text-xl md:text-4xl font-black tracking-tighter bg-clip-text text-transparent bg-gradient-to-br from-white via-[#FDFBD4] to-[#007055]">
-                            Theo AI
-                        </h1>
-                        <div className="inline-flex items-center px-2 py-0.5 md:px-3 md:py-1 bg-[#FDFBD4]/10 rounded-full border border-[#FDFBD4]/20">
-                            <span className="text-[8px] md:text-[10px] font-bold text-[#FDFBD4] uppercase tracking-widest whitespace-nowrap">
-                                CLCC - TECHDISCIPLES
-                            </span>
+                        <div className="flex flex-col">
+                            <h1 className="text-xl md:text-2xl font-black tracking-tight text-[#FDFBD4]">Theo AI</h1>
+                            <span className="text-[9px] md:text-[11px] font-bold text-[#FDFBD4]/40 uppercase tracking-[0.2em]">CLCC - TECHDISCIPLES</span>
                         </div>
                     </div>
-                    <div className="hidden md:block flex-1 w-full pt-8">
-                        <div className="p-4 rounded-2xl bg-white/5 border border-white/5 backdrop-blur-sm animate-in fade-in slide-in-from-top-4 duration-1000">
-                            <h3 className="text-[10px] font-bold text-[#FDFBD4]/40 uppercase tracking-widest mb-3">Verse of the Day</h3>
-                            <p className="text-[#FDFBD4]/80 text-xs leading-relaxed font-light italic">
-                                "{verse.text}"
-                                <span className="block mt-2 font-bold not-italic opacity-100 text-[#FDFBD4]">— {verse.ref}</span>
+                    <button
+                        onClick={clearChat}
+                        className="p-2 transition-all hover:bg-white/5 rounded-full border border-white/5 text-[#FDFBD4]/60 hover:text-[#FDFBD4]"
+                        title="Clear Conversation"
+                    >
+                        <Trash2 size={20} />
+                    </button>
+                </header>
+
+                {/* Chat Container */}
+                <div
+                    ref={chatBoxRef}
+                    className="flex-1 overflow-y-auto px-4 py-8 md:px-10 space-y-6 scroll-smooth scrollbar-hide"
+                >
+                    {messages.length === 0 && (
+                        <div className="h-full flex flex-col items-center justify-center text-center p-6 animate-in fade-in zoom-in duration-700">
+                            <div className="w-20 h-20 bg-[#FDFBD4]/5 rounded-3xl flex items-center justify-center border border-[#FDFBD4]/10 shadow-inner mb-6">
+                                <Bot size={40} className="text-[#FDFBD4]" />
+                            </div>
+                            <h2 className="text-3xl font-bold text-white mb-2">Shalom, Beloved</h2>
+                            <p className="text-white/60 text-base max-w-md leading-relaxed mb-8">
+                                I am Theo, centered in Christ to walk with you in faith. How may the Lord's wisdom guide you today?
                             </p>
-                        </div>
-                    </div>
-                </aside>
-
-                {/* Main Interaction Area */}
-                <main className="flex-1 flex flex-col min-w-0 bg-transparent relative">
-                    {/* Chat Messages */}
-                    <div className="flex-1 overflow-y-auto p-4 md:p-10 space-y-8 scroll-smooth scrollbar-hide h-full">
-                        {messages.length === 0 && (
-                            <div className="h-full flex flex-col items-center justify-center space-y-6 text-center animate-in fade-in zoom-in duration-700">
-                                <div className="w-16 h-16 bg-[#FDFBD4]/5 rounded-2xl flex items-center justify-center border border-[#FDFBD4]/10 shadow-inner">
-                                    <Bot size={32} className="text-[#FDFBD4]" />
-                                </div>
-                                <div className="space-y-2 max-w-sm px-4">
-                                    <h2 className="text-2xl font-bold text-white">Shalom, Beloved</h2>
-                                    <p className="text-white/40 text-sm leading-relaxed mb-4">
-                                        I am centered in Christ to provide you with scriptural guidance and faithful encouragement.
-                                    </p>
-                                    <div className="md:hidden p-4 rounded-2xl bg-white/5 border border-white/5 text-left">
-                                        <h3 className="text-[8px] font-bold text-[#FDFBD4]/30 uppercase tracking-[0.2em] mb-2">Today's Word</h3>
-                                        <p className="text-[#FDFBD4]/70 text-xs italic">
-                                            "{verse.text}"
-                                            <span className="block mt-1 font-bold not-italic text-[10px]">— {verse.ref}</span>
-                                        </p>
-                                    </div>
-                                </div>
+
+                            <div className="w-full max-w-sm p-5 rounded-2xl bg-[#00362B]/40 border border-[#FDFBD4]/10 backdrop-blur-sm text-left">
+                                <h3 className="text-[10px] font-bold text-[#FDFBD4]/50 uppercase tracking-widest mb-3">Verse of the Day</h3>
+                                <p className="text-[#FDFBD4]/90 text-sm italic leading-relaxed">
+                                    "{verse.text}"
+                                    <span className="block mt-2 font-bold not-italic opacity-100 text-[#FDFBD4]">-- {verse.ref}</span>
+                                </p>
                             </div>
-                        )}
-
-                        {messages.map((msg, index) => (
-                            <div key={index}
-                                className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-in fade-in slide-in-from-bottom-6 duration-500 fill-mode-both`}
-                                style={{ animationDelay: `${index * 50}ms` }}
-                            >
-                                <div className={`group flex flex-col max-w-[95%] md:max-w-[80%] ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
-                                    <div className={`flex items-center gap-2 mb-2 px-2 ${msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`}>
-                                        <div className={`text-[10px] font-bold uppercase tracking-widest ${msg.role === 'user' ? 'text-[#007055]' : 'text-[#FDFBD4]/60'}`}>
-                                            {msg.role === 'user' ? 'You' : 'Theo'}
-                                        </div>
-                                    </div>
-                                    <div className={`relative p-5 md:p-6 rounded-[2rem] text-sm leading-relaxed shadow-xl transition-all duration-300 ${msg.role === 'user'
-                                        ? 'bg-gradient-to-br from-[#007055] to-[#004D3C] text-white rounded-tr-none border border-white/5'
-                                        : 'bg-white/5 backdrop-blur-md text-white/90 rounded-tl-none border border-white/5 hover:bg-white/10'
-                                        }`}>
-                                        <div className={`markdown-content prose prose-invert prose-sm max-w-none 
-                                            prose-p:leading-relaxed prose-headings:text-[#FDFBD4] prose-strong:text-[#FDFBD4]
-                                            prose-li:text-white/90 prose-ul:my-2
-                                            ${msg.role === 'assistant' ? 'selection:bg-[#FDFBD4]/30' : 'selection:bg-white/20'}
-                                        `}>
-                                            <ReactMarkdown>{msg.content}</ReactMarkdown>
+                        </div>
+                    )}
+
+                    {messages.map((msg, index) => (
+                        <div key={index} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-in slide-in-from-bottom-4 duration-500 fill-mode-both`}>
+                            <div className={`flex flex-col max-w-[85%] md:max-w-[75%] ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
+                                <div className={`relative px-5 py-4 rounded-2xl shadow-lg ${msg.role === 'user'
+                                        ? 'bg-[#007055] text-white rounded-br-none border border-white/10'
+                                        : 'bg-[#FDFBD4]/95 text-[#002B22] rounded-bl-none border-l-4 border-[#007055]'
+                                    }`}>
+                                    {msg.role === 'assistant' && (
+                                        <div className="flex items-center gap-2 mb-2 opacity-40">
+                                            <Bot size={14} />
+                                            <span className="text-[10px] font-black uppercase tracking-tighter">Theo</span>
                                         </div>
+                                    )}
+                                    <div className={`prose prose-sm max-w-none ${msg.role === 'user' ? 'prose-invert' : 'prose-teal'}`}>
+                                        <ReactMarkdown>{msg.content}</ReactMarkdown>
                                     </div>
                                 </div>
                             </div>
-                        ))}
-
-                        {isLoading && (
-                            <div className="flex justify-start animate-in fade-in duration-300">
-                                <div className="bg-white/5 p-4 rounded-3xl border border-white/5 flex items-center gap-3">
-                                    <div className="flex gap-1.5">
-                                        <div className="w-1.5 h-1.5 bg-[#FDFBD4] rounded-full animate-bounce"></div>
-                                        <div className="w-1.5 h-1.5 bg-[#FDFBD4]/60 rounded-full animate-bounce [animation-delay:0.2s]"></div>
-                                        <div className="w-1.5 h-1.5 bg-[#FDFBD4]/30 rounded-full animate-bounce [animation-delay:0.4s]"></div>
-                                    </div>
+                        </div>
+                    ))}
+
+                    {isLoading && (
+                        <div className="flex justify-start animate-in slide-in-from-bottom-2 duration-300">
+                            <div className="bg-[#FDFBD4]/95 p-4 rounded-2xl rounded-bl-none flex items-center gap-2">
+                                <div className="flex gap-1">
+                                    <div className="w-2 h-2 bg-[#007055] rounded-full animate-bounce [animation-delay:-0.3s]"></div>
+                                    <div className="w-2 h-2 bg-[#007055] rounded-full animate-bounce [animation-delay:-0.15s]"></div>
+                                    <div className="w-2 h-2 bg-[#007055] rounded-full animate-bounce"></div>
                                 </div>
                             </div>
-                        )}
-                        <div ref={chatEndRef} />
-                    </div>
-
-                    {/* Sophisticated Input Box */}
-                    <div className="p-4 md:p-10 shrink-0">
-                        <div className="relative group max-w-3xl mx-auto">
-                            <div className="absolute -inset-0.5 bg-gradient-to-r from-[#007055] via-[#FDFBD4]/20 to-[#004D3C] rounded-3xl blur opacity-20 group-focus-within:opacity-40 transition duration-500"></div>
-                            <div className="relative flex items-center bg-[#00362B]/60 backdrop-blur-xl border border-white/10 rounded-3xl p-1.5 md:p-2 transition-all duration-300 group-focus-within:border-[#FDFBD4]/30 group-focus-within:bg-[#00362B]/80 shadow-2xl">
-                                <input
-                                    type="text"
-                                    value={input}
-                                    onChange={(e) => setInput(e.target.value)}
-                                    onKeyPress={(e) => e.key === 'Enter' && handleSend()}
-                                    placeholder="Type your spiritual inquiry here..."
-                                    className="flex-1 bg-transparent py-3 md:py-4 px-4 md:px-6 focus:outline-none text-white placeholder:text-white/20 text-sm md:text-base"
-                                    disabled={isLoading}
-                                />
-                                <button
-                                    onClick={handleSend}
-                                    disabled={isLoading || !input.trim()}
-                                    className={`p-3 md:p-4 rounded-2xl transition-all duration-500 ${input.trim()
-                                        ? 'bg-[#FDFBD4] text-[#002B22] shadow-[0_0_20px_rgba(253,251,212,0.3)] hover:scale-105 active:scale-95'
-                                        : 'bg-white/5 text-white/20 shadow-none'
-                                        }`}
-                                >
-                                    <Send size={18} className={isLoading ? 'animate-pulse' : ''} />
-                                </button>
-                            </div>
-                            <div className="flex justify-center mt-3 md:mt-4">
-                                <p className="text-[8px] md:text-[9px] uppercase tracking-[0.4em] text-white/20 font-black">
-                                    Faith-based Intelligence • CLCC
-                                </p>
-                            </div>
                         </div>
+                    )}
+                </div>
+
+                {/* Input Area - Domino's Style */}
+                <div className="p-4 md:p-8 bg-white/5 border-top border-white/10 backdrop-blur-md">
+                    <div className="max-w-3xl mx-auto flex items-end gap-3 md:gap-4 relative group">
+                        <textarea
+                            ref={textareaRef}
+                            value={input}
+                            onChange={handleTextareaChange}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' && !e.shiftKey) {
+                                    e.preventDefault();
+                                    handleSend();
+                                }
+                            }}
+                            placeholder="How can Theo help you today?"
+                            className="flex-1 bg-[#00362B]/60 border-2 border-white/5 rounded-2xl p-4 md:px-6 md:py-4 focus:outline-none focus:border-[#FDFBD4]/30 text-white placeholder:text-white/20 text-sm md:text-base resize-none max-h-[150px] transition-all scrollbar-hide"
+                            rows={1}
+                            disabled={isLoading}
+                        />
+                        <button
+                            onClick={handleSend}
+                            disabled={isLoading || !input.trim()}
+                            className="w-12 h-12 md:w-14 md:h-14 bg-[#FDFBD4] text-[#002B22] rounded-full flex items-center justify-center shrink-0 shadow-[0_8px_20px_-4px_rgba(253,251,212,0.4)] hover:scale-105 active:scale-95 transition-all disabled:opacity-20 disabled:grayscale disabled:scale-100"
+                        >
+                            <Send size={24} className={isLoading ? 'animate-pulse' : ''} />
+                        </button>
+                    </div>
+                    <div className="text-center mt-4">
+                        <p className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">Faith-Based Intelligence</p>
                     </div>
-                </main>
+                </div>
             </div>
         </div>
     );