[WIP] Fix HTML/CSS Issues in Chat Interface Files

[Copilot]

Overview

Multiple HTML files contain CSS and JavaScript issues that need to be addressed for better functionality and user experience.

Issues Found

ai-chat-launcher.html

1. Broken CSS scrollbar syntax - Lines 109-113 have malformed CSS
2. Dark mode variable inconsistencies - Some CSS variables are undefined
3. Missing semicolons in CSS declarations
4. Redundant CSS rules causing conflicts

plugin-chat.html

1. Missing error handling for API calls
2. File upload functionality needs validation
3. Plugin loading may fail silently

Proposed Fixes

1. Fix CSS Scrollbar Syntax

Replace the broken scrollbar CSS with proper syntax:

#chatLog::-webkit-scrollbar {
    width: 8px;
}

#chatLog::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#chatLog::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

/* For Firefox */
@supports (scrollbar-width: thin) {
    #chatLog {
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 #f1f1f1;
    }
}

2. Complete Dark Mode Variables

Add missing CSS variables to the :root selector:

:root {
    /* Existing light theme variables */
    --light-bg: #f5f5f5;
    --light-card-bg: #ffffff;
    /* ... other existing variables ... */
    
    /* Add missing dark theme variables */
    --dark-bg: #0b0b11;
    --dark-card-bg: #16161f;
    --dark-text: #eaeaf3;
    --dark-border: rgba(98, 97, 164, 0.35);
    --dark-primary: #8155ff;
    /* ... complete set of dark variables ... */
}

3. Add Error Handling to JavaScript

Improve error handling in plugin-chat.html:

async function loadPlugins() {
    try {
        const response = await fetch('http://localhost:8000/api/plugins');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        // ... existing code ...
    } catch (error) {
        console.error('Error loading plugins:', error);
        document.getElementById('pluginsList').innerHTML = 
            '<p style="color: red;">Failed to load plugins</p>';
    }
}

4. File Upload Validation

Add proper file validation:

function validateFile(file) {
    const maxSize = 10 * 1024 * 1024; // 10MB
    const allowedTypes = ['text/plain', 'application/json', 'text/csv', 'image/jpeg', 'image/png'];
    
    if (file.size > maxSize) {
        throw new Error('File size exceeds 10MB limit');
    }
    
    if (!allowedTypes.includes(file.type)) {
        throw new Error('File type not supported');
    }
    
    return true;
}

Files to Update

• ai-chat-launcher.html
• plugin-chat.html
• plugins-guide.html (minor improvements)

Testing Required

• Test dark mode toggle functionality
• Verify scrollbar appearance in different browsers
• Test file upload with various file types
• Validate plugin loading and error states
• Check responsive design on mobile devices

Issue #730 from Bryan-Roe-ai/semantic-kernel

[Copilot]

Copilot wasn't able to review any files in this pull request.