Tech Stack Advisor - Code Viewer

#!/usr/bin/env python3
"""Add choice button support to chat interface"""

def main():
    input_file = '/Users/admin/codeprojects/tech-stack-advisor/backend/static/index.html'
    
    with open(input_file, 'r', encoding='utf-8') as f:
        html = f.read()
    
    # Add CSS for choice buttons before </style>
    choice_css = """
        /* Choice Button Styles */
        .chat-choices {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
            padding: 0 10px;
        }

        .choice-btn {
            flex: 0 1 calc(50% - 5px);
            padding: 12px 16px;
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: left;
        }

        .choice-btn:hover {
            border-color: #667eea;
            background: #f8f9ff;
            transform: translateY(-2px);
        }

        .choice-btn:active {
            transform: translateY(0);
        }

        .choice-btn.wide {
            flex: 1 1 100%;
        }
"""
    
    html = html.replace('    </style>', choice_css + '\n    </style>')
    
    # Update addChatMessage to handle choices
    old_add_message = """        // Add chat message to UI
        function addChatMessage(role, content) {
            const messagesDiv = document.getElementById('chatMessages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `chat-message ${role}`;

            const avatar = role === 'assistant' ? '🤖' : '👤';
            messageDiv.innerHTML = `
                <div class="avatar">${avatar}</div>
                <div class="chat-bubble">${content}</div>
            `;

            messagesDiv.appendChild(messageDiv);
            scrollChatToBottom();
        }"""
    
    new_add_message = """        // Add chat message to UI
        function addChatMessage(role, content, options = null) {
            const messagesDiv = document.getElementById('chatMessages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `chat-message ${role}`;

            const avatar = role === 'assistant' ? '🤖' : '👤';
            
            let messageHTML = `
                <div class="avatar">${avatar}</div>
                <div class="chat-bubble">${content}</div>
            `;

            messageDiv.innerHTML = messageHTML;
            messagesDiv.appendChild(messageDiv);

            // Add choice buttons if provided
            if (options && options.length > 0) {
                const choicesDiv = document.createElement('div');
                choicesDiv.className = 'chat-choices';
                choicesDiv.id = 'chatChoices';

                options.forEach(option => {
                    const btn = document.createElement('button');
                    btn.className = 'choice-btn';
                    btn.textContent = option;
                    btn.onclick = () => selectChoice(option);
                    
                    // Make last option (usually "None"/"Skip") full width
                    if (option.toLowerCase().includes('none') || 
                        option.toLowerCase().includes('skip') || 
                        option.toLowerCase().includes('not sure') ||
                        option.toLowerCase().includes('no preference')) {
                        btn.classList.add('wide');
                    }
                    
                    choicesDiv.appendChild(btn);
                });

                messagesDiv.appendChild(choicesDiv);
            }

            scrollChatToBottom();
        }"""
    
    html = html.replace(old_add_message, new_add_message)
    
    # Add selectChoice function
    select_choice_func = """
        // Handle choice button click
        function selectChoice(choice) {
            // Remove choice buttons
            const choicesDiv = document.getElementById('chatChoices');
            if (choicesDiv) {
                choicesDiv.remove();
            }

            // Set input value and send
            const input = document.getElementById('chatInput');
            input.value = choice;
            sendChatMessage();
        }
"""
    
    # Find startConversation function and add selectChoice before it
    html = html.replace(
        '        // Start conversation flow\n        async function startConversation()',
        select_choice_func + '\n        // Start conversation flow\n        async function startConversation()'
    )
    
    # Update the places where addChatMessage is called to pass options
    # Update in startConversation
    old_start_conv = """                // Add initial messages
                addChatMessage('user', initialMessage);
                addChatMessage('assistant', data.question);"""
    
    new_start_conv = """                // Add initial messages
                addChatMessage('user', initialMessage);
                addChatMessage('assistant', data.question, data.options || null);"""
    
    html = html.replace(old_start_conv, new_start_conv)
    
    # Update in sendChatMessage
    old_send_msg = """                } else {
                    // Add next question
                    addChatMessage('assistant', data.question);

                    // Re-enable input"""
    
    new_send_msg = """                } else {
                    // Add next question
                    addChatMessage('assistant', data.question, data.options || null);

                    // Re-enable input"""
    
    html = html.replace(old_send_msg, new_send_msg)
    
    with open(input_file, 'w', encoding='utf-8') as f:
        f.write(html)
    
    print("✓ Successfully added choice button support!")

if __name__ == '__main__':
    main()