chat.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArmaForge Assistant - Live Chat</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <style>
        .chat-container {
            height: calc(100vh - 180px);
        }
        .code-block {
            font-family: 'Courier New', monospace;
            background-color: #1e293b;
            border-left: 3px solid #10b981;
        }
        .user-bubble {
            background-color: #1e40af;
            border-radius: 1rem 1rem 0 1rem;
        }
        .ai-bubble {
            background-color: #334155;
            border-radius: 1rem 1rem 1rem 0;
        }
        .typing-indicator span {
            height: 8px;
            width: 8px;
            background-color: #6ee7b7;
            border-radius: 50%;
            display: inline-block;
            margin: 0 2px;
            animation: bounce 1.4s infinite ease-in-out both;
        }
        .typing-indicator span:nth-child(1) {
            animation-delay: -0.32s;
        }
        .typing-indicator span:nth-child(2) {
            animation-delay: -0.16s;
        }
        @keyframes bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-6">
        <!-- Header -->
        <header class="flex justify-between items-center mb-6 border-b border-teal-500 pb-4">
            <div class="flex items-center space-x-3">
                <i data-feather="cpu" class="w-8 h-8 text-teal-400"></i>
                <h1 class="text-2xl font-bold text-teal-400">ArmaForge Assistant</h1>
            </div>
            <button class="text-teal-300 hover:text-white flex items-center">
                <i data-feather="settings" class="mr-2"></i> Settings
            </button>
        </header>

        <!-- Chat Area -->
        <div class="chat-container overflow-y-auto mb-4 space-y-4">
            <!-- Welcome Message -->
            <div class="flex">
                <div class="ai-bubble max-w-3xl p-4">
                    <p class="font-medium">Welcome to ArmaForge Assistant! 👋</p>
                    <p class="mt-1">I'm here to help with all your Arma Reforger modding questions. You can ask about:</p>
                    <ul class="list-disc pl-5 mt-2 space-y-1">
                        <li>Script debugging and optimization</li>
                        <li>Workbench setup and configuration</li>
                        <li>Mod packaging and deployment</li>
                        <li>Game mechanics implementation</li>
                    </ul>
                    <p class="mt-2">What would you like to know about today?</p>
                </div>
            </div>

            <!-- Sample Conversation -->
            <div class="flex justify-end">
                <div class="user-bubble max-w-3xl p-4">
                    <p>How do I spawn AI units in a mission script?</p>
                </div>
            </div>
            
            <div class="flex">
                <div class="ai-bubble max-w-3xl p-4">
                    <p>Here's a basic example of spawning AI units in Arma Reforger:</p>
                    <div class="code-block p-4 rounded-lg mt-2 text-sm overflow-x-auto">
                        <pre class="text-green-400">
// Create a group for the AI
auto group = GetGame().CreateGroup();

// Spawn a soldier at position [0,0,0]
auto unit = GetGame().CreateCharacter(group, "Faction_US_Soldier_Rifleman_M4A1");
unit.SetPosition(vector.Zero);

// Add waypoints
auto waypoint = group.AddWaypoint(vector(100, 0, 100));
waypoint.SetType(EWaypointType.MOVE);</pre>
                    </div>
                    <p class="mt-3">Remember to set appropriate faction templates and loadouts for your units.</p>
                </div>
            </div>

            <!-- Typing Indicator -->
            <div class="flex items-center space-x-2 opacity-75 hidden" id="typingIndicator">
                <div class="ai-bubble px-4 py-2">
                    <div class="typing-indicator">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Input Area -->
        <div class="bg-gray-800 rounded-lg p-4">
            <form id="chatForm" class="flex items-center space-x-2">
                <input type="text" id="userInput" placeholder="Ask about Arma Reforger modding..." 
                       class="flex-grow bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-500">
                <button type="submit" class="bg-teal-600 hover:bg-teal-500 p-3 rounded-lg">
                    <i data-feather="send" class="w-5 h-5"></i>
                </button>
            </form>
            <div class="flex justify-between mt-2 text-xs text-gray-400">
                <div class="flex space-x-2">
                    <button class="hover:text-teal-400 flex items-center">
                        <i data-feather="code" class="w-3 h-3 mr-1"></i> Code
                    </button>
                    <button class="hover:text-teal-400 flex items-center">
                        <i data-feather="image" class="w-3 h-3 mr-1"></i> Image
                    </button>
                </div>
                <div>
                    <button class="hover:text-teal-400 flex items-center">
                        <i data-feather="trash-2" class="w-3 h-3 mr-1"></i> Clear
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        // Initialize feather icons
        feather.replace();
        // Connect to OLLAMA API
        const API_URL = 'http://localhost:11434/api/chat'; // Default OLLAMA endpoint
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: "llama2", // or any other model you have installed
                        messages: [
                            {
                                role: "user",
                                content: prompt
                            }
                        ],
                        stream: false
                    })
});

                if (!response.ok) throw new Error('Network response was not ok');
                const data = await response.json();
                return data.message?.content || "Sorry, I couldn't process the response.";
} catch (error) {
                console.error('Error:', error);
                return "Sorry, I encountered an error. Please ensure OLLAMA is running and accessible at http://localhost:11434";
} finally {
                typingIndicator.classList.add('hidden');
            }
        }

        // Handle form submission
        chatForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            const message = userInput.value.trim();
            
            if (message) {
                addMessage('user', message);
                userInput.value = '';
                
                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>
</body>
</html>