DGCchat

Running

App Files Files Community

John2121 commited on Oct 7, 2025

Commit

96843ff

verified ·

1 Parent(s): 9859de1

Update index.html

Browse files

Files changed (1) hide show

index.html +105 -416

index.html CHANGED Viewed

@@ -2,441 +2,130 @@
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contractor Project Quote & Planning</title>
-    <link rel="stylesheet" href="../llama-universal-netlify-proxy/style.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.3/dist/tailwind.min.css">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-        body {
-            font-family: 'Inter', Arial, sans-serif;
-            background: #0a0f0a;
-            color: #d1fae5;
         }
-        .main-card,
-        .mobile-section {
-            background: #101d10 !important;
-            border: 4px solid #10b981 !important;
-            border-radius: 1.25rem !important;
-            box-shadow: 0 4px 32px 0 #000a, 0 1.5px 6px 0 #10b981;
-            padding: 2rem !important;
-        }
-        .form-group .form-toggle {
-            background: #134e13 !important;
-            color: #6ee7b7 !important;
-            border-radius: 0.5rem !important;
-        }
-        .form-group .form-content {
-            background: #0f1a0f !important;
-            border-radius: 0.5rem !important;
-        }
-        .form-group.open .form-content {
-            background: #18181b !important;
-        }
-        .apt-btn,
-        .mobile-btn,
-        .form-content button[type=submit] {
-            background: #10b981 !important;
-            color: #0a0f0a !important;
-            font-weight: 700;
-            border-radius: 0.5rem !important;
-            padding: 0.9rem 1.2rem !important;
-            border: none;
-            cursor: pointer;
-            transition: background 0.2s;
-            font-size: 1.15rem;
-            box-shadow: 0 2px 8px #10b98144;
-            text-transform: uppercase;
-            letter-spacing: 0.04em;
-        }
-        .apt-btn:hover,
-        .mobile-btn:hover,
-        .form-content button[type=submit]:hover {
-            background: #047857 !important;
-            color: #d1fae5 !important;
-        }
-        .form-group input,
-        .form-group select,
-        .form-group textarea {
-            background: #1a2b1a !important;
-            color: #d1fae5 !important;
-            border: 1.5px solid #10b981 !important;
-            border-radius: 0.5rem !important;
-            font-size: 1.05rem;
-        }
-        .form-group input::placeholder,
-        .form-group textarea::placeholder {
-            color: #6ee7b7 !important;
-        }
-        .form-group label {
-            color: #6ee7b7 !important;
-            font-weight: 600;
-        }
-        .form-group {
-            border-radius: 0.5rem !important;
-        }
-        .form-content {
-            border-radius: 0.5rem !important;
-        }
-        .form-group.open .form-content {
-            border-radius: 0.5rem !important;
-        }
-        .text-accent-green {
-            color: #10b981 !important;
-        }
-        .bg-accent-green {
-            background: #10b981 !important;
-        }
-        .text-dark {
-            color: #0a0f0a !important;
-        }
-        .bg-dark {
-            background: #0a0f0a !important;
-        }
-        .shadow-xl {
-            box-shadow: 0 4px 32px 0 #000a, 0 1.5px 6px 0 #10b981 !important;
         }
     </style>
 </head>
-<body class="font-body bg-automotive-700 text-automotive-50 min-h-screen flex items-center justify-center py-8">
-    <!-- Consistent Call/Text Contact Block -->
-    <div class="w-full flex flex-col items-center mb-6">
-    </div>
-    <!-- APT Step-by-Step Automotive Problem Calculator -->
-    <main class="w-full flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white py-8">
-        <section class="w-full max-w-lg mobile-section bg-automotive-600/90 p-6 rounded-xl shadow-lg">
-            <h1 class="text-2xl font-bold text-accent-green mb-4 mobile-title">Project Quote & Planning Tool</h1>
-            <div id="apt-flow">
-                <!-- Llama AI Chat Integration -->
-                <div id="llama-chat-container" class="mt-8">
-                    <h2 class="text-xl font-bold text-accent-green mb-2">Llama AI Chat</h2>
-                    <div id="llama-messages"></div>
-                    <div id="llama-input-row">
-                        <input id="llama-user-input" type="text" placeholder="Type your message..." />
-                        <button id="llama-send-btn">Send</button>
-                    </div>
-                </div>
-                <!-- Step 1: Select Problem Category -->
-                <div id="step1" class="mb-4">
-                    <label class="block text-accent-green font-semibold mb-2">What type of project do you need?</label>
-                    <div class="grid grid-cols-2 gap-2">
-                        <button class="apt-btn" data-category="Remodeling">Remodeling</button>
-                        <button class="apt-btn" data-category="New Construction">New Construction</button>
-                        <button class="apt-btn" data-category="Exterior">Exterior</button>
-                        <button class="apt-btn" data-category="Interior">Interior</button>
-                        <button class="apt-btn" data-category="Plumbing/Electrical">Plumbing/Electrical</button>
-                        <button class="apt-btn" data-category="Other">Other</button>
-                    </div>
-                </div>
-                <!-- Step 2: Select Symptom -->
-                <div id="step2" class="mb-4 hidden">
-                    <label class="block text-accent-green font-semibold mb-2">What best describes your project?</label>
-                    <div id="symptom-options" class="grid grid-cols-1 gap-2"></div>
-                </div>
-                <!-- Step 3: Vehicle Info -->
-                <div id="step3" class="mb-4 hidden">
-                    <label class="block text-accent-green font-semibold mb-1">Project Address / Site Info</label>
-                    <input type="text" id="site-info"
-                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50 mb-2"
-                        placeholder="e.g. 123 Main St, City, State">
-                    <label class="block text-accent-green font-semibold mb-1">Project Details</label>
-                    <textarea id="project-details" rows="3"
-                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50 mb-2"
-                        placeholder="Describe your project, timeline, or special needs..."></textarea>
-                    <button id="step3-next" class="apt-btn w-full mt-2">Next</button>
-                </div>
-                <!-- Step 4: Output Recommendation -->
-                <div id="step4" class="mb-4 hidden">
-                    <form id="apt-form" action="https://formspree.io/f/mjkaolga" method="POST"
-                        class="bg-green-900/80 p-6 rounded-xl shadow-lg space-y-2 mobile-form overflow-visible">
-                        <h1 class="text-2xl font-bold text-accent-green mb-2 mobile-title">Request a Project Quote</h1>
-                        <p class="text-accent-green mb-2">Get a fast, friendly quote! Tell us about your construction
-                            project and how we can help you.</p>
-                        <div class="form-group open">
-                            <div class="form-toggle" onclick="toggleGroup(this)">Contact Info <span
-                                    class="arrow">▶</span></div>
-                            <div class="form-content">
-                                <label for="user-name" class="block text-accent-green font-semibold mb-1">Name <span
-                                        aria-hidden="true" class="text-accent-green">*</span></label>
-                                <input type="text" id="user-name" name="name" required autocomplete="name"
-                                    aria-required="true"
-                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
-                                    placeholder="Your Name">
-                                <label for="user-email" class="block text-accent-green font-semibold mb-1">Email <span
-                                        aria-hidden="true" class="text-accent-green">*</span></label>
-                                <input type="email" id="user-email" name="email" required autocomplete="email"
-                                    aria-required="true"
-                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
-                                    placeholder="you@email.com">
-                                <label for="user-phone" class="block text-accent-green font-semibold mb-1">Phone</label>
-                                <input type="tel" id="user-phone" name="phone" autocomplete="tel"
-                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition"
-                                    placeholder="(optional)">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="form-toggle" onclick="toggleGroup(this)">Service & Price <span
-                                    class="arrow">▶</span></div>
-                            <div class="form-content">
-                                <label for="form-service" class="block text-accent-green font-semibold mb-1">Service
-                                    Requested <span aria-hidden="true" class="text-accent-green">*</span></label>
-                                <input type="text" id="form-service" name="service" required
-                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
-                                    placeholder="Service">
-                                <label for="form-price" class="block text-accent-green font-semibold mb-1">Price</label>
-                                <input type="text" id="form-price" name="price"
-                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
-                                    placeholder="Price">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="form-toggle" onclick="toggleGroup(this)">Project Details <span
-                                    class="arrow">▶</span></div>
-                            <div class="form-content">
-                                <label for="form-site" class="block text-accent-green font-semibold mb-1">Project
-                                    Address /
-                                    Site Info</label>
-                                <input type="text" id="form-site" name="site"
-                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
-                                    placeholder="e.g. 123 Main St, City, State">
-                                <label for="form-details" class="block text-accent-green font-semibold mb-1">Project
-                                    Details</label>
-                                <textarea id="form-details" name="details" rows="3"
-                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition"
-                                    placeholder="Describe your project, timeline, or special needs..."></textarea>
-                            </div>
-                        </div>
-                        <div class="form-group open">
-                            <div class="form-content">
-                                <button type="submit"
-                                    class="w-full bg-accent-green hover:bg-dark text-dark font-bold py-3 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-accent-green focus:ring-offset-2 mobile-btn">Send
-                                    Request</button>
-                            </div>
-                        </div>
-                        <div id="apt-success" class="hidden text-green-200 text-center font-semibold mt-2">Request sent!
-                            Dondlinger General Contracting LLC will contact you soon.<br>Email: <a
-                                href="mailto:dondlingergeneralcontracting@gmail.com"
-                                class="underline">dondlingergeneralcontracting@gmail.com</a><br>Phone:
-                            (715) 459-3050 (texts are best!)</div>
-                    </form>
-                </div>
-            </div>
-        </section>
-    </main>
-    <!-- Header / Contact -->
-    <header class="w-full flex flex-col items-center py-6 bg-dark text-accent-green">
-        <h1 class="text-3xl font-extrabold tracking-tight mb-2">Dondlinger General Contracting LLC</h1>
-        <div class="flex flex-col items-center gap-1">
-            <a href="tel:+17154593050" class="text-lg font-semibold hover:underline">(715) 459-3050 <span
-                    class="text-xs">(texts are best!)</span></a>
-            <a href="mailto:dondlingergeneralcontracting@gmail.com"
-                class="text-sm hover:underline">dondlingergeneralcontracting@gmail.com</a>
-            <span class="text-xs text-green-300">Wisconsin Rapids, WI</span>
         </div>
-    </header>
-    <!-- End APT Calculator -->
-    <!--
-    Previous form code commented out for reference
-    ...existing code...
-    -->
     <script>
-        // --- Llama AI Chat Only ---
-        (function () {
-            const messagesDiv = document.getElementById('llama-messages');
-            const userInput = document.getElementById('llama-user-input');
-            const sendBtn = document.getElementById('llama-send-btn');
-            const API_URL = "https://llama-universal-netlify-project.netlify.app/.netlify/functions/llama-proxy?path=/chat/completions";
-            function appendMessage(text, sender) {
-                const div = document.createElement('div');
-                div.className = 'msg ' + sender;
-                // Support markdown and preserve line breaks for AI output
-                if (sender === 'ai') {
-                    // If text is markdown, render as HTML (basic)
-                    div.innerHTML = text.replace(/\n/g, '<br>');
-                } else {
-                    div.textContent = (sender === 'user' ? 'You: ' : 'AI: ') + text;
-                }
-                messagesDiv.appendChild(div);
-                messagesDiv.scrollTop = messagesDiv.scrollHeight;
-            }
-            async function sendMessage() {
-                const text = userInput.value.trim();
-                if (!text) return;
-                appendMessage(text, 'user');
-                userInput.value = '';
-                sendBtn.disabled = true;
-                try {
-                    const body = {
-                        model: "Llama-3.3-8B-Instruct",
-                        messages: [
-                            { role: 'system', content: "You are a helpful, friendly representative for Dondlinger General Contracting LLC. Greet the customer, ask clarifying questions about their construction or remodeling project, and provide expert advice on contracting, planning, and building services." },
-                            { role: 'user', content: text }
-                        ]
-                    };
-                    const res = await fetch(API_URL, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(body)
-                    });
-                    let data, aiMsg;
-                    try {
-                        data = await res.json();
-                    } catch (jsonErr) {
-                        appendMessage('Non-JSON response: ' + await res.text(), 'ai');
-                        return;
-                    }
-                    // Industry-standard: handle OpenAI and HF-style, fallback to completion_message.content.text
-                    if (data.choices?.[0]?.message?.content) {
-                        aiMsg = data.choices[0].message.content;
-                    } else if (data.completion_message?.content?.text) {
-                        aiMsg = data.completion_message.content.text;
-                    } else if (data.completion_message?.content) {
-                        aiMsg = data.completion_message.content;
-                    } else if (data.error) {
-                        aiMsg = 'API error: ' + (data.error.message || JSON.stringify(data.error));
-                    } else {
-                        aiMsg = 'Raw response: ' + JSON.stringify(data);
                     }
-                    appendMessage(aiMsg, 'ai');
                 } catch (e) {
-                    appendMessage('Error: ' + e.message, 'ai');
-                } finally {
-                    sendBtn.disabled = false;
                 }
-            }
-            sendBtn.onclick = sendMessage;
-            userInput.addEventListener('keydown', e => {
-                if (e.key === 'Enter') sendMessage();
-            });
-        })();
-        // --- APT Step-by-Step Calculator ---
-        // Variables: x1=projectType, x2=projectDetail, r1=service/price, x3=site info, y1=output
-        // Pipeline: y1 = f(r1(x1, x2), x3)
-        // Construction project types and details
-        const aptSymptoms = {
-            "Remodeling": [
-                { sym: "Kitchen Remodel", svc: "Kitchen Renovation", price: "$10,000-$50,000" },
-                { sym: "Bathroom Remodel", svc: "Bathroom Renovation", price: "$7,000-$25,000" },
-                { sym: "Basement Finish", svc: "Basement Finishing", price: "$15,000-$40,000" },
-                { sym: "Room Addition", svc: "Room Addition", price: "$20,000-$80,000" }
-            ],
-            "New Construction": [
-                { sym: "Custom Home", svc: "Home Construction", price: "$150,000-$500,000+" },
-                { sym: "Garage Build", svc: "Garage Construction", price: "$15,000-$40,000" },
-                { sym: "Deck/Porch", svc: "Deck/Porch Build", price: "$5,000-$25,000" }
-            ],
-            "Exterior": [
-                { sym: "Roof Replacement", svc: "Roofing", price: "$8,000-$25,000" },
-                { sym: "Siding", svc: "Siding Installation", price: "$7,000-$30,000" },
-                { sym: "Window/Door", svc: "Window/Door Install", price: "$3,000-$20,000" }
-            ],
-            "Interior": [
-                { sym: "Flooring", svc: "Flooring Install", price: "$3,000-$15,000" },
-                { sym: "Painting", svc: "Interior Painting", price: "$2,000-$10,000" },
-                { sym: "Drywall", svc: "Drywall Install/Repair", price: "$1,500-$8,000" }
-            ],
-            "Plumbing/Electrical": [
-                { sym: "Plumbing Upgrade", svc: "Plumbing Work", price: "$2,000-$15,000" },
-                { sym: "Electrical Upgrade", svc: "Electrical Work", price: "$2,000-$12,000" }
-            ],
-            "Other": [
-                { sym: "General Consultation", svc: "Consultation", price: "$100-$500" },
-                { sym: "Site Inspection", svc: "Site Inspection", price: "$150-$400" }
-            ]
-        };
-        // Step state
-        let selectedCategory = null;
-        let selectedSymptom = null;
-        let selectedService = null;
-        let selectedPrice = null;
-        // Step 1: Category
-        document.querySelectorAll('.apt-btn[data-category]').forEach(btn => {
-            btn.onclick = function () {
-                selectedCategory = btn.getAttribute('data-category');
-                // Show project details for this category
-                const opts = aptSymptoms[selectedCategory] || [];
-                const so = document.getElementById('symptom-options');
-                so.innerHTML = '';
-                opts.forEach((o, i) => {
-                    const b = document.createElement('button');
-                    b.className = 'apt-btn';
-                    b.textContent = o.sym;
-                    b.onclick = function () {
-                        selectedSymptom = o.sym;
-                        selectedService = o.svc;
-                        selectedPrice = o.price;
-                        document.getElementById('step2').classList.add('hidden');
-                        document.getElementById('step3').classList.remove('hidden');
-                    };
-                    so.appendChild(b);
-                });
-                document.getElementById('step1').classList.add('hidden');
-                document.getElementById('step2').classList.remove('hidden');
-            };
-        });
-        // Step 3: Vehicle info
-        document.getElementById('step3-next').onclick = function (e) {
-            e.preventDefault();
-            // Collect site/project info
-            const siteInfo = document.getElementById('site-info').value;
-            const projectDetails = document.getElementById('project-details').value;
-            if (!siteInfo) {
-                alert('Please enter project/site details.');
-                return;
             }
-            document.getElementById('step3').classList.add('hidden');
-            // Output recommendation
-            // Autofill form fields for Formspree
-            document.getElementById('form-service').value = selectedService || '';
-            document.getElementById('form-price').value = selectedPrice || '';
-            document.getElementById('form-site').value = siteInfo;
-            document.getElementById('form-details').value = projectDetails;
-            document.getElementById('step4').classList.remove('hidden');
-        };
-        // Collapsible form groups (BuckRub style)
-        function toggleGroup(el) {
-            const group = el.parentElement;
-            group.classList.toggle('open');
         }
-        // Show success message after submit
-        const aptForm = document.getElementById('apt-form');
-        if (aptForm) {
-            aptForm.addEventListener('submit', function (e) {
-                setTimeout(() => {
-                    document.getElementById('apt-success').classList.remove('hidden');
-                }, 500);
-            });
-        }
-        // Style for APT buttons
-        const style = document.createElement('style');
-        style.textContent = `.apt-btn { background: #e11d48; color: #fff; font-weight: 600; border-radius: 0.5rem; padding: 0.7rem 1rem; border: none; cursor: pointer; transition: background 0.2s; font-size: 1.1rem; } .apt-btn:hover { background: #fbbf24; color: #1f2937; }`;
-        document.head.appendChild(style);
     </script>
 </body>

 <html lang="en">
 <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Llama AI Chat</title>
+    <script src="https://cdn.tailwindcss.com"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        .typing-cursor:after {
+            content: "";
+            display: inline-block;
+            width: 6px;
+            height: 1.1em;
+            margin-left: 4px;
+            background: #10b981;
+            animation: blink 1s steps(1, end) infinite;
+            vertical-align: bottom;
         }
+        @keyframes blink {
+            50% {
+                opacity: 0;
+            }
         }
     </style>
 </head>
+<body>
+    <main class="min-h-screen flex items-center justify-center bg-[#101825] font-[Inter,sans-serif]">
+        <div class="w-full max-w-md mx-auto bg-[#16222e] rounded-2xl shadow-2xl p-8">
+            <div class="text-2xl font-bold text-emerald-400 mb-1 tracking-tight">Llama AI Chat</div>
+            <div class="text-base text-emerald-200 mb-6">Ask anything about your project, estimate, or construction.
+                Fast, friendly, and private.</div>
+            <div id="llama-messages" role="log" aria-live="polite"
+                class="min-h-[180px] max-h-80 overflow-y-auto mb-5 flex flex-col gap-3"></div>
+            <form id="chat-form" class="flex gap-3">
+                <input id="llama-user-input" type="text" autocomplete="off" placeholder="Type your message..."
+                    class="flex-1 rounded-xl border border-emerald-700 bg-[#101825] text-emerald-100 px-4 py-3 text-base focus:outline-none focus:border-emerald-400" />
+                <button id="llama-send-btn" type="submit" disabled
+                    class="rounded-xl bg-emerald-400 hover:bg-emerald-500 text-emerald-900 font-bold px-6 py-3 text-base transition disabled:opacity-50">Send</button>
+            </form>
         </div>
+    </main>
     <script>
+        const API_URL = "https://llama-universal-netlify-project.netlify.app/.netlify/functions/llama-proxy?path=/chat/completions";
+        const messagesDiv = document.getElementById('llama-messages');
+        const chatForm = document.getElementById('chat-form');
+        const userInput = document.getElementById('llama-user-input');
+        const sendBtn = document.getElementById('llama-send-btn');
+        function appendMessage(text, sender, streaming = false) {
+            const wrap = document.createElement('div');
+            wrap.className = `px-4 py-3 rounded-xl text-base whitespace-pre-line ${sender === 'user' ? 'bg-emerald-900/40 border border-emerald-700 text-emerald-100 self-end' : 'bg-gray-800/80 border border-emerald-800 text-emerald-200'} transition`;
+            if (streaming) wrap.classList.add('typing-cursor');
+            messagesDiv.appendChild(wrap);
+            messagesDiv.scrollTop = messagesDiv.scrollHeight;
+            if (streaming) {
+                let i = 0;
+                const interval = setInterval(() => {
+                    wrap.textContent = text.slice(0, i++);
+                    if (i > text.length) {
+                        clearInterval(interval);
+                        wrap.classList.remove('typing-cursor');
                     }
+                }, 18);
+            } else wrap.textContent = text;
+        }
+        async function sendMessage() {
+            const text = userInput.value.trim();
+            if (!text) return;
+            appendMessage(text, 'user');
+            userInput.value = '';
+            sendBtn.disabled = true;
+            try {
+                const body = {
+                    model: 'Llama-4-Maverick-17B-128E-Instruct-FP8',
+                    messages: [
+                        { role: 'system', content: 'You are Stanlee from Dondlinger General Contracting LLC in Wisconsin Rapids. You\'re a natural conversationalist - the kind of guy people actually want to talk to. You used to be the Midwest\'s best door-to-door salesman because you genuinely connect with people, not because you\'re pushy.\n\nTalk like a real person:\n- Use contractions (I\'ll, we\'ve, can\'t, that\'s)\n- Ask follow-up questions naturally\n- Share quick personal insights or experiences\n- Use casual phrases (\"you know,\" \"honestly,\" \"here\'s the thing\")\n- React to what people tell you with genuine interest\n- Don\'t sound like a brochure - sound like you\'re having coffee with a neighbor\n\nYou offer three main services but bring them up organically when relevant:\n1. CONSTRUCTION SERVICES - Remodels, additions, repairs. You\'ve seen it all.\n2. SOFTWARE & AUTOMATION - Apps, websites, business systems. The digital side of building.\n3. CONSULTING - Helping people figure out what they actually need.\n\nYour natural conversation style:\n- Listen first, then offer solutions that actually fit\n- Share quick stories or examples when they help\n- Admit when something might not be the best fit\n- Be curious about their situation before jumping to solutions\n- Use humor appropriately\n- Sound confident but not cocky\n\nYour goal isn\'t to sell immediately - it\'s to build trust through genuine conversation. If someone needs help, you want to earn the right to help them. Sometimes that means steering them toward a consultation, sometimes it\'s just giving good advice.\n\nTalk like Stanlee - the guy who actually cares about getting the job done right.' },
+                        { role: 'user', content: text }
+                    ]
+                };
+                const res = await fetch(API_URL, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(body)
+                });
+                let data, aiMsg = '(No response)';
+                try {
+                    data = await res.json();
                 } catch (e) {
+                    console.error('JSON parse error:', e);
+                    appendMessage('Error: Invalid response from server', 'ai');
+                    return;
                 }
+                // Check for API errors first
+                if (data.status && data.status >= 400) {
+                    appendMessage('API Error: ' + (data.detail || data.title || 'Unknown error'), 'ai');
+                    return;
+                }
+                if (data?.choices?.[0]?.message?.content) aiMsg = data.choices[0].message.content;
+                else if (data?.completion_message?.content?.text) aiMsg = data.completion_message.content.text;
+                else if (data?.completion_message?.content) aiMsg = data.completion_message.content;
+                else if (data?.response) aiMsg = data.response;
+                else if (data?.text) aiMsg = data.text;
+                else if (data?.content) aiMsg = data.content;
+                if (aiMsg !== '(No response)') {
+                    appendMessage(aiMsg, 'ai', true);
+                } else {
+                    appendMessage('No valid response received from AI', 'ai');
+                }
+            } catch (e) {
+                appendMessage('Error: ' + e.message, 'ai');
+            } finally {
+                sendBtn.disabled = false;
+                userInput.focus();
             }
         }
+        // Enable/disable send button based on input
+        userInput.addEventListener('input', () => {
+            sendBtn.disabled = userInput.value.trim() === '';
+        });
+        chatForm.addEventListener('submit', e => { e.preventDefault(); sendMessage(); });
+        userInput.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); sendMessage(); } });
     </script>
 </body>