Tech Stack Advisor - Code Viewer

#!/usr/bin/env python3
"""Fix choice button visibility and add multi-select support"""

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()
    
    # Fix CSS - add color and better visibility
    old_css = """        .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%;
        }"""
    
    new_css = """        .choice-btn {
            flex: 0 1 calc(50% - 5px);
            padding: 12px 16px;
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            color: #1e293b;
            cursor: pointer;
            transition: all 0.2s;
            text-align: left;
        }

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

        .choice-btn.selected {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: #667eea;
            color: white;
        }

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

        .choice-btn.wide {
            flex: 1 1 100%;
        }

        .choice-done-btn {
            width: 100%;
            padding: 12px 24px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
            transition: all 0.2s;
        }

        .choice-done-btn:hover {
            transform: translateY(-2px);
        }

        .choice-done-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }"""
    
    html = html.replace(old_css, new_css)
    
    # Replace selectChoice to support multi-select
    old_select_choice = """
        // 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();
        }
"""
    
    new_select_choice = """
        // Track selected choices for multi-select
        let selectedChoices = [];
        let isMultiSelect = false;

        // Handle choice button click
        function selectChoice(choice, allowMultiple = false) {
            const choicesDiv = document.getElementById('chatChoices');
            if (!choicesDiv) return;

            // Check if this is a multi-select question (has "Other" option or multiple feature-like options)
            const buttons = choicesDiv.querySelectorAll('.choice-btn:not(.wide)');
            isMultiSelect = allowMultiple || buttons.length > 4; // More than 4 options usually means multi-select

            if (isMultiSelect) {
                // Toggle selection
                const clickedBtn = Array.from(choicesDiv.querySelectorAll('.choice-btn'))
                    .find(btn => btn.textContent === choice);
                
                if (clickedBtn) {
                    if (clickedBtn.classList.contains('selected')) {
                        clickedBtn.classList.remove('selected');
                        selectedChoices = selectedChoices.filter(c => c !== choice);
                    } else {
                        // If it's a "None"/"Skip" type option, deselect others
                        if (choice.toLowerCase().includes('none') || 
                            choice.toLowerCase().includes('skip') ||
                            choice.toLowerCase().includes('not sure') ||
                            choice.toLowerCase().includes('no preference')) {
                            // Deselect all others
                            choicesDiv.querySelectorAll('.choice-btn').forEach(btn => {
                                btn.classList.remove('selected');
                            });
                            selectedChoices = [choice];
                            clickedBtn.classList.add('selected');
                        } else {
                            // Normal selection
                            clickedBtn.classList.add('selected');
                            selectedChoices.push(choice);
                            // Remove "None" if it was selected
                            choicesDiv.querySelectorAll('.choice-btn.wide').forEach(btn => {
                                btn.classList.remove('selected');
                            });
                            selectedChoices = selectedChoices.filter(c => 
                                !c.toLowerCase().includes('none') && 
                                !c.toLowerCase().includes('skip') &&
                                !c.toLowerCase().includes('not sure'));
                        }
                    }
                }

                // Add/update "Done" button
                let doneBtn = document.getElementById('choiceDoneBtn');
                if (!doneBtn && selectedChoices.length > 0) {
                    doneBtn = document.createElement('button');
                    doneBtn.id = 'choiceDoneBtn';
                    doneBtn.className = 'choice-done-btn';
                    doneBtn.textContent = `Continue with ${selectedChoices.length} selected`;
                    doneBtn.onclick = submitMultipleChoices;
                    choicesDiv.appendChild(doneBtn);
                } else if (doneBtn) {
                    if (selectedChoices.length > 0) {
                        doneBtn.textContent = `Continue with ${selectedChoices.length} selected`;
                        doneBtn.disabled = false;
                    } else {
                        doneBtn.remove();
                    }
                }
            } else {
                // Single select - submit immediately
                choicesDiv.remove();
                const input = document.getElementById('chatInput');
                input.value = choice;
                sendChatMessage();
            }
        }

        // Submit multiple selected choices
        function submitMultipleChoices() {
            const choicesDiv = document.getElementById('chatChoices');
            if (choicesDiv) {
                choicesDiv.remove();
            }

            // Set input value with comma-separated choices
            const input = document.getElementById('chatInput');
            input.value = selectedChoices.join(', ');
            
            // Reset for next question
            selectedChoices = [];
            isMultiSelect = false;
            
            sendChatMessage();
        }
"""
    
    html = html.replace(old_select_choice, new_select_choice)
    
    with open(input_file, 'w', encoding='utf-8') as f:
        f.write(html)
    
    print("✓ Fixed choice button visibility and added multi-select!")

if __name__ == '__main__':
    main()