OK NOW MAK IT A WORKING 100 PERCENT WITH LM STIDIOS

chat.html

@@ -140,57 +140,92 @@ waypoint.SetType(EWaypointType.MOVE);</pre>
             </div>
         </div>
     </div>
-
     <script>
         // Initialize feather icons
         feather.replace();
 
-        // Simple chat interaction
-        document.getElementById('chatForm').addEventListener('submit', function(e) {
+        // Connect to LM Studio API
+        const API_URL = 'http://localhost:1234/v1/chat/completions';
+        const chatContainer = document.querySelector('.chat-container');
+        const chatForm = document.getElementById('chatForm');
+        const userInput = document.getElementById('userInput');
+        const typingIndicator = document.getElementById('typingIndicator');
+
+        // Add message to chat
+        function addMessage(role, content) {
+            const msgDiv = document.createElement('div');
+            msgDiv.className = role === 'user' ? 'flex justify-end' : 'flex';
+            
+            const bubbleClass = role === 'user' ? 'user-bubble' : 'ai-bubble';
+            msgDiv.innerHTML = `
+                <div class="${bubbleClass} max-w-3xl p-4">
+                    <p>${content}</p>
+                </div>
+            `;
+            
+            chatContainer.appendChild(msgDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+
+        // Get AI response
+        async function getAIResponse(prompt) {
+            typingIndicator.classList.remove('hidden');
+            
+            try {
+                const response = await fetch(API_URL, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        model: 'local-model', // Should match your LM Studio model
+                        messages: [
+                            {
+                                role: 'system',
+                                content: 'You are ArmaForge Assistant, an expert in Arma Reforger modding and scripting. Provide detailed, technical answers with code examples when possible. Format code blocks properly.'
+                            },
+                            {
+                                role: 'user',
+                                content: prompt
+                            }
+                        ],
+                        temperature: 0.7,
+                        max_tokens: 2000,
+                        stream: false
+                    })
+                });
+
+                if (!response.ok) throw new Error('Network response was not ok');
+                
+                const data = await response.json();
+                return data.choices[0].message.content;
+            } catch (error) {
+                console.error('Error:', error);
+                return "Sorry, I encountered an error. Please ensure LM Studio is running and the API is accessible at http://localhost:1234";
+            } finally {
+                typingIndicator.classList.add('hidden');
+            }
+        }
+
+        // Handle form submission
+        chatForm.addEventListener('submit', async function(e) {
             e.preventDefault();
-            const input = document.getElementById('userInput');
-            const message = input.value.trim();
+            const message = userInput.value.trim();
             
             if (message) {
-                // Add user message to chat
-                const chatContainer = document.querySelector('.chat-container');
-                const userMsg = document.createElement('div');
-                userMsg.className = 'flex justify-end';
-                userMsg.innerHTML = `
-                    <div class="user-bubble max-w-3xl p-4">
-                        <p>${message}</p>
-                    </div>
-                `;
-                chatContainer.appendChild(userMsg);
-                
-                // Clear input
-                input.value = '';
+                addMessage('user', message);
+                userInput.value = '';
                 
-                // Show typing indicator
-                const typingIndicator = document.getElementById('typingIndicator');
-                typingIndicator.classList.remove('hidden');
-                
-                // Scroll to bottom
-                chatContainer.scrollTop = chatContainer.scrollHeight;
-                
-                // Simulate AI response after delay
-                setTimeout(() => {
-                    typingIndicator.classList.add('hidden');
-                    
-                    // Add AI response
-                    const aiMsg = document.createElement('div');
-                    aiMsg.className = 'flex';
-                    aiMsg.innerHTML = `
-                        <div class="ai-bubble max-w-3xl p-4">
-                            <p>Thanks for your question about Arma Reforger modding. I'm currently a demo interface, but in a real implementation, I would provide detailed guidance on "${message}".</p>
-                            <p class="mt-2">For real help, this would connect to an AI backend trained on Arma Reforger documentation and modding resources.</p>
-                        </div>
-                    `;
-                    chatContainer.appendChild(aiMsg);
-                    
-                    // Scroll to bottom
-                    chatContainer.scrollTop = chatContainer.scrollHeight;
-                }, 2000);
+                const aiResponse = await getAIResponse(message);
+                addMessage('assistant', aiResponse);
+            }
+        });
+
+        // Allow Shift+Enter for new lines, Enter to submit
+        userInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                chatForm.dispatchEvent(new Event('submit'));
             }
         });
     </script>

index.html

@@ -46,10 +46,10 @@
                 <a href="#" class="text-teal-300 hover:text-white font-medium flex items-center">
                     <i data-feather="book" class="mr-2"></i> Docs
                 </a>
-                <a href="#" class="text-teal-300 hover:text-white font-medium flex items-center">
-                    <i data-feather="message-square" class="mr-2"></i> Community
+                <a href="chat.html" class="text-teal-300 hover:text-white font-medium flex items-center">
+                    <i data-feather="message-square" class="mr-2"></i> Chat
                 </a>
-            </nav>
+</nav>
         </header>
 
         <!-- Hero Section -->
@@ -59,10 +59,10 @@
                 Get instant help with script debugging, mod creation, and troubleshooting for Arma Reforger.
             </p>
             <div class="flex justify-center space-x-4">
-                <button class="bg-teal-600 hover:bg-teal-500 text-white px-6 py-3 rounded-lg font-medium flex items-center transition">
+                <a href="chat.html" class="bg-teal-600 hover:bg-teal-500 text-white px-6 py-3 rounded-lg font-medium flex items-center transition">
                     <i data-feather="terminal" class="mr-2"></i> Start Modding Chat
-                </button>
-                <button class="border border-teal-400 text-teal-400 hover:bg-teal-900/50 px-6 py-3 rounded-lg font-medium flex items-center transition">
+                </a>
+<button class="border border-teal-400 text-teal-400 hover:bg-teal-900/50 px-6 py-3 rounded-lg font-medium flex items-center transition">
                     <i data-feather="download" class="mr-2"></i> Get Templates
                 </button>
             </div>