The below code does not render correctly and is unnecessarily overbloated. The main issue with the code rendering is that you have two elements with the class line-numbers, one being the actual line number container and the other being the parent of your highlight-container. The CSS for line-numbers applies to both, causing the highlighted code to be positioned incorrectly and partially obscured. There are some other issues too. With the following changes made, the code should be able to render properly. Removed Duplicate line-numbers Class: The highlight-container div no longer has the line-numbers class. This prevents the line number styling from being applied to the highlighted code.
Targeted <code> Element: The CSS should specifically targets the <code> element within .highlight-container pre to apply the necessary styles. This ensures only the highlighted code is affected.
Fixed Misplaced Closing Tag: In the original code, a <div> missing its closing </div>. Corrected version Should fix the HTML structure.
With these changes, the highlighted code should render correctly, and the line numbers will appear as intended. The iframe preview should also work properly.
Other Potential Improvements:
Simplify CSS: There might be some redundant CSS rules that can be cleaned up.
JavaScript Cleanup: The JavaScript code has some duplication (e.g., updateHighlighting is defined twice). Consolidating these functions would improve maintainability.
Accessibility: Ensure proper ARIA attributes are used for accessibility. Review existing ARIA attributes and add where needed.
Code Editor Library: Consider using a dedicated code editor library (like CodeMirror or Ace Editor) for a richer editing experience with features like syntax highlighting, autocompletion, and more. This would simplify our code significantly.
CodeMirror Integration: CodeMirror to be used for the code editor, providing syntax highlighting, line numbers, and autocompletion.
HTML Mode: The htmlmixed mode is set for proper HTML editing.
Auto Close Tags: Explore if html tags can be automatically closed, implement that feature
Ctrl+Space Autocomplete: Autocompletion is triggered with Ctrl+Space.
Simplified Code: The JavaScript is significantly simplified, as CodeMirror handles highlighting and line numbers.
Updated updatePreview: The updatePreview function now takes the code as an argument, making it more flexible.
change Listener: The CodeMirror change listener now updates the preview whenever the code changes.
Initial Code: Sets initial HTML code in the editor.
CSS Adjustments: The CSS should be adjusted to style the CodeMirror editor and autocomplete hints.

Please output a full, untruncated version of the below code, with these issues fixed. also suggest other enhancements we can make to the interface.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Chat & Code Viewer</title>
    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Prism.js for Syntax Highlighting -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css">
    <!-- Prism.js Line Numbers Plugin -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.min.css">
    <style>
    :root {
        --bg: #f5f5f7; /* Light background */
        --text: #1d1d1f; /* Dark text */
        --card: #ffffff; /* Card background */
        --user-bubble: #0071e3; /* User bubble color */
        --bot-bubble: #f5f5f7; /* Bot bubble color */
        --input-bg: #ffffff; /* Input background */
        --button-bg: #0071e3; /* Button background */
        --icon-color: #1d1d1f; /* Icon color */
        --transition: 0.3s; /* Transition duration */
        --textarea-text: #1d1d1f; /* Textarea text color */
        --border-color: rgba(0, 0, 0, 0.1); /* Border color */
        --code-editor-bg: #f6f6f6; /* Code editor background */
        --code-editor-text: #1d1d1f; /* Code editor text color */
        --line-number-bg: #e8e8e8; /* Line numbers background */
        --line-number-text: #666; /* Line numbers text color */
        --suggestion-bg: #ffffff; /* Autocomplete suggestion background */
        --suggestion-hover: #f0f0f0; /* Autocomplete suggestion hover background */
        --suggestion-border: #ddd; /* Autocomplete suggestion border */
    }

    [data-theme="dark"] {
        --bg: #000000;
        --text: #f5f5f7;
        --card: #1d1d1f;
        --user-bubble: #0a84ff;
        --bot-bubble: #1d1d1f;
        --input-bg: #1d1d1f;
        --button-bg: #0a84ff;
        --icon-color: #f5f5f7;
        --textarea-text: #f5f5f7;
        --border-color: rgba(255, 255, 255, 0.1);
        --code-editor-bg: #1d1d1f;
        --code-editor-text: #f5f5f7;
        --line-number-bg: #2d2d2d;
        --line-number-text: #888;
        --suggestion-bg: #2d2d2d;
        --suggestion-hover: #3d3d3d;
        --suggestion-border: #444;
    }

    [data-theme="high-contrast"] {
        --bg: #000000;
        --text: #ffffff;
        --card: #000000;
        --user-bubble: #ffffff;
        --bot-bubble: #000000;
        --input-bg: #000000;
        --button-bg: #ffffff;
        --icon-color: #ffffff;
        --textarea-text: #ffffff;
        --border-color: #ffffff;
        --code-editor-bg: #000000;
        --code-editor-text: #ffffff;
        --line-number-bg: #333;
        --line-number-text: #fff;
        --suggestion-bg: #333;
        --suggestion-hover: #444;
        --suggestion-border: #fff;
    }

    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: 'Roboto', sans-serif;
        background: var(--bg);
        color: var(--text);
        display: flex;
        flex-direction: column;
        height: 100vh;
        transition: background 0.3s ease, color 0.3s ease;
    }

    header {
        position: sticky;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--card);
        padding: 5px 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        transition: background 0.3s ease;
    }

    header h1 {
        font-size: 18px;
        margin: 0;
    }

    header button {
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--icon-color);
        font-size: 18px;
        padding: 5px;
        margin-left: 10px;
        transition: color 0.3s ease;
    }

    header button:focus {
        outline: none;
    }

    header button:focus-visible {
        outline: 4px solid rgba(0, 125, 250, 0.6);
    }

    header button:hover {
        color: var(--button-bg);
    }

    main {
        display: flex;
        flex: 1;
        padding: 15px;
        position: relative;
        overflow: hidden;
    }

    .container {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 15px;
        background: var(--card);
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .chat-container {
        width: 50%;
        transition: transform 0.3s ease, width 0.3s ease;
        position: relative;
        margin-right: 15px;
    }

    .chat-container.collapsed {
        width: 0;
        transform: translateX(-100%);
        padding: 0;
        margin: 0;
        opacity: 0;
    }

    .code-container {
        position: relative;
        transition: width 0.3s ease;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .code-container.expanded {
        min-width: 100%;
    }

    .code-editor-wrapper {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        overflow: hidden;
        background: var(--code-editor-bg);
    }

    .line-numbers {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 32px;
        width: 40px;
        background: var(--line-number-bg);
        color: var(--line-number-text);
        font-family: monospace;
        font-size: 14px;
        padding: 10px 5px;
        text-align: right;
        user-select: none;
        border-right: 1px solid var(--border-color);
        overflow: hidden;
    }

    #code-input {
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
        color: var(--code-editor-text);
        padding: 10px 10px 10px 50px;
        font-family: monospace;
        font-size: 14px;
        line-height: 1.5;
        resize: none;
        tab-size: 4;
        -moz-tab-size: 4;
        position: relative;
        z-index: 1;
    }

    #code-input:focus {
        outline: none;
        border-color: #0071e3;
    }

    .highlight-container {
        position: absolute;
        top: 0;
        left: 40px;
        right: 0;
        bottom: 32px;
        pointer-events: none;
        overflow: auto;
        padding: 10px;
        z-index: 2;
        background: transparent;
    }

    .highlight-container pre {
        margin: 0;
        background: transparent;
        font-size: 14px;
        line-height: 1.5;
        tab-size: 4;
        -moz-tab-size: 4;
    }

    .char-count {
        position: relative;
        height: 32px;
        font-size: 12px;
        color: var(--text);
        background: var(--code-editor-bg);
        padding: 8px 15px;
        border-top: 1px solid var(--border-color);
        text-align: right;
        margin-top: auto;
    }

    #render-output {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border: none;
        background: white;
    }

    .send-button {
        padding: 10px 15px;
        background: var(--button-bg);
        border: none;
        color: white;
        border-radius: 13px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        transition: background 0.3s ease, filter 0.3s ease;
    }

    .send-button:hover {
        filter: brightness(1.1);
        outline: 4px solid rgba(0, 125, 250, 0.6);
        border-color: #0071e3;
    }

    .collapse-button {
        position: fixed;
        left: 30px;
        bottom: 30px;
        width: 43.34px;
        height: 37px;
        border: none;
        border-radius: 13px;
        background: var(--button-bg);
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .collapse-button:hover {
        outline: 4px solid rgba(0, 125, 250, 0.6);
        border-color: #0071e3;
        filter: brightness(1.1);
    }

    .collapse-button.floating {
        transform: translateX(-30px);
        border-radius: 0px 13px 13px 0px;
    }

    iframe {
        flex: 1;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        background: white;
        transition: border-color 0.3s ease;
    }

    .hidden {
        display: none !important;
    }

    [data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px 10px;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        border-radius: 5px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
    }

    .message-timestamp {
        font-size: 10px;
        opacity: 0.7;
        margin-top: 5px;
    }

    .message-status {
        font-size: 12px;
        margin-left: 5px;
    }

    .scroll-bottom {
        position: absolute;
        bottom: 60px;
        right: 20px;
        background: var(--button-bg);
        color: white;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
    }

    /* Focus indicators */
    *:focus {
        outline: 4px solid rgba(0, 125, 250, 0.6);
    }

    /* Syntax highlighting tweaks */
    .code-container pre {
        margin: 0;
        background: transparent;
    }

    .code-container {
        position: relative;
        overflow: hidden;
    }

    /* Autocomplete Suggestions */
    .tag-suggestions {
        position: absolute;
        top: 10px;
        left: 50px;
        max-height: 200px;
        overflow-y: auto;
        background: var(--suggestion-bg);
        border: 1px solid var(--suggestion-border);
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        display: none;
    }

    .tag-suggestion {
        padding: 8px 12px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .tag-suggestion:hover,
    .tag-suggestion.selected {
        background: var(--suggestion-hover);
    }

    .tag-suggestion .tag-name {
        color: var(--text);
        font-weight: bold;
    }

    .tag-suggestion .tag-description {
        color: var(--line-number-text);
        font-size: 12px;
        margin-top: 2px;
    }
    </style>
</head>
<body data-theme="light">
    <header>
        <h1>Interactive Chat & Code Viewer</h1>
        <div>
            <button class="search-toggle" aria-label="Toggle Search" data-tooltip="Search Messages">
                <i class="fas fa-search"></i>
            </button>
            <button class="theme-toggle" aria-label="Toggle Theme" data-tooltip="Toggle Theme">
                <i class="fas fa-moon"></i>
            </button>
            <button class="contrast-toggle" aria-label="Toggle High Contrast" data-tooltip="High Contrast">
                <i class="fas fa-adjust"></i>
            </button>
            <button class="toggle-view" aria-label="Toggle Code/Preview" data-tooltip="Toggle Code/Preview">
                <i class="fas fa-code"></i>
            </button>
        </div>
    </header>
    <main>
        <div class="container chat-container">
            <div class="messages" id="messages"></div>
            <div class="search-container hidden">
                <input type="search" id="message-search" placeholder="Search messages..." aria-label="Search messages">
            </div>
            <div class="input-container">
                <input type="text" id="user-input" placeholder="Type your message..." data-tooltip="Press Enter to send">
                <button id="send-button" class="send-button" data-tooltip="Send Message">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
        <div class="container code-container">
            <div class="code-editor-wrapper">
                <div class="line-numbers"></div>
                <textarea id="code-input" data-tooltip="Edit HTML Code" spellcheck="false"></textarea>
                <div class="highlight-container line-numbers">
                    <pre><code class="language-html line-numbers"></code></pre>
                </div>
                <div class="tag-suggestions"></div>
                <div class="char-count" aria-live="polite">0</div>
                <iframe id="render-output" class="hidden" title="Rendered Output"></iframe>
            </div>
        </div>
        <button id="collapse-button" class="collapse-button" data-tooltip="Toggle Chat">
            <i class="fas fa-chevron-left"></i>
        </button>
    </main>
    <!-- Prism.js Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-markup.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const messages = document.getElementById('messages');
        const userInput = document.getElementById('user-input');
        const sendButton = document.getElementById('send-button');
        const themeToggle = document.querySelector('.theme-toggle');
        const contrastToggle = document.querySelector('.contrast-toggle');
        const searchToggle = document.querySelector('.search-toggle');
        const searchContainer = document.querySelector('.search-container');
        const messageSearch = document.getElementById('message-search');
        const toggleView = document.querySelector('.toggle-view');
        const codeInput = document.getElementById('code-input');
        const renderOutput = document.getElementById('render-output');
        const body = document.body;
        const collapseButton = document.getElementById('collapse-button');
        const chatContainer = document.querySelector('.chat-container');
        const codeContainer = document.querySelector('.code-container');
        const lineNumbers = document.querySelector('.line-numbers');
        const tagSuggestions = document.querySelector('.tag-suggestions');
        const highlightContainer = document.querySelector('.highlight-container code');
        const charCount = document.querySelector('.char-count');

        // Initialize Scroll Bottom Button
        const scrollBottom = document.createElement('button');
        scrollBottom.className = 'scroll-bottom';
        scrollBottom.innerHTML = '<i class="fas fa-chevron-down"></i>';
        scrollBottom.setAttribute('aria-label', 'Scroll to bottom');
        messages.parentElement.appendChild(scrollBottom);

        let previewMode = false;

        const appendMessage = (content, role) => {
            const message = document.createElement('div');
            message.classList.add('message', role);
            
            const messageContent = document.createElement('div');
            messageContent.textContent = content;
            
            const timestamp = document.createElement('div');
            timestamp.classList.add('message-timestamp');
            timestamp.textContent = new Date().toLocaleTimeString();
            
            const status = document.createElement('span');
            status.classList.add('message-status');
            status.innerHTML = role === 'user' ? '<i class="fas fa-check"></i>' : '';
            
            message.appendChild(messageContent);
            message.appendChild(timestamp);
            message.appendChild(status);
            messages.appendChild(message);
            
            if (messages.scrollHeight - messages.scrollTop > messages.clientHeight + 100) {
                scrollBottom.style.display = 'flex';
            }
            
            messages.scrollTop = messages.scrollHeight;
        };

        const sendMessage = () => {
            const text = userInput.value.trim();
            if (!text) return;
            appendMessage(text, 'user');
            userInput.value = '';
            setTimeout(() => appendMessage(`Processing: ${text}`, 'bot'), 500);
        };

        const updatePreview = () => {
            if (!previewMode) return;
            const code = codeInput.value;
            renderOutput.srcdoc = code;
        };

        const initializeCodeHighlighting = () => {
            const codeElement = highlightContainer;
            
            const updateHighlighting = () => {
                const text = codeInput.value;
                codeElement.textContent = text;
                Prism.highlightElement(codeElement);
                
                // Update Line Numbers
                const lines = text.split('\n').length;
                let lineNumbersContent = '';
                for (let i = 1; i <= lines; i++) {
                    lineNumbersContent += i + '\n';
                }
                lineNumbers.textContent = lineNumbersContent;
            };
            
            codeInput.addEventListener('input', updateHighlighting);
            codeInput.addEventListener('scroll', () => {
                highlightContainer.parentElement.scrollTop = codeInput.scrollTop;
                highlightContainer.parentElement.scrollLeft = codeInput.scrollLeft;
                lineNumbers.scrollTop = codeInput.scrollTop;
            });
            updateHighlighting(); // Initial highlighting
        };

        // Autocomplete Feature
        const htmlTags = [
            { name: 'div', description: 'Generic container element' },
            { name: 'p', description: 'Paragraph element' },
            { name: 'span', description: 'Inline container element' },
            { name: 'a', description: 'Hyperlink element' },
            { name: 'img', description: 'Image element' },
            { name: 'ul', description: 'Unordered list' },
            { name: 'ol', description: 'Ordered list' },
            { name: 'li', description: 'List item' },
            { name: 'h1', description: 'Heading level 1' },
            { name: 'h2', description: 'Heading level 2' },
            { name: 'h3', description: 'Heading level 3' },
            { name: 'button', description: 'Clickable button element' },
            { name: 'input', description: 'Input form element' },
            { name: 'form', description: 'Form container element' },
            { name: 'table', description: 'Table element' },
            { name: 'tr', description: 'Table row' },
            { name: 'td', description: 'Table cell' },
            { name: 'th', description: 'Table header cell' },
            { name: 'section', description: 'Document section container' },
            { name: 'article', description: 'Article content container' },
            { name: 'header', description: 'Header section container' },
            { name: 'footer', description: 'Footer section container' },
            { name: 'nav', description: 'Navigation section container' },
            { name: 'script', description: 'Script element' },
            { name: 'style', description: 'Style element' },
            { name: 'link', description: 'Link to external resource' },
            { name: 'meta', description: 'Metadata element' },
            { name: 'br', description: 'Line break' },
            { name: 'hr', description: 'Horizontal rule' },
            { name: 'canvas', description: 'Canvas element for graphics' },
            { name: 'video', description: 'Video element' },
            { name: 'audio', description: 'Audio element' },
            { name: 'iframe', description: 'Inline frame' },
            { name: 'blockquote', description: 'Block quotation' },
            { name: 'code', description: 'Inline code snippet' },
            { name: 'pre', description: 'Preformatted text' },
            { name: 'strong', description: 'Strong importance' },
            { name: 'em', description: 'Emphasized text' },
            { name: 'label', description: 'Form label' },
            { name: 'select', description: 'Dropdown selection' },
            { name: 'option', description: 'Option in dropdown' },
            { name: 'textarea', description: 'Multiline text input' },
            // Add more tags as needed
        ];

        let currentSuggestionIndex = -1;
        let filteredSuggestions = [];

        const showSuggestions = (suggestions, position) => {
            if (suggestions.length === 0) {
                tagSuggestions.style.display = 'none';
                return;
            }
            tagSuggestions.innerHTML = '';
            suggestions.forEach((suggestion, index) => {
                const div = document.createElement('div');
                div.classList.add('tag-suggestion');
                if (index === currentSuggestionIndex) {
                    div.classList.add('selected');
                }
                div.innerHTML = `<div class="tag-name">&lt;${suggestion.name}&gt;</div>
                                 <div class="tag-description">${suggestion.description}</div>`;
                div.addEventListener('mousedown', (e) => {
                    e.preventDefault();
                    insertTag(suggestion.name);
                    tagSuggestions.style.display = 'none';
                });
                tagSuggestions.appendChild(div);
            });
            // Position the suggestions dropdown
            const rect = codeInput.getBoundingClientRect();
            tagSuggestions.style.top = `${codeInput.scrollTop + 10}px`;
            tagSuggestions.style.left = '50px';
            tagSuggestions.style.display = 'block';
        };

        const insertTag = (tagName) => {
            const cursorPos = codeInput.selectionStart;
            const textBefore = codeInput.value.substring(0, cursorPos);
            const textAfter = codeInput.value.substring(cursorPos);
            const newText = textBefore + `<${tagName}></${tagName}>` + textAfter;
            codeInput.value = newText;
            codeInput.selectionStart = codeInput.selectionEnd = textBefore.length + tagName.length + 2;
            codeInput.focus();
            updateAutocomplete();
            updateHighlighting();
        };

        const updateAutocomplete = () => {
            const cursorPos = codeInput.selectionStart;
            const text = codeInput.value.substring(0, cursorPos);
            const lastLT = text.lastIndexOf('<');
            const lastSpace = text.lastIndexOf(' ', lastLT);
            const tagFragment = text.substring(lastSpace + 1, cursorPos);
            if (tagFragment.startsWith('<')) {
                const query = tagFragment.substring(1).toLowerCase();
                filteredSuggestions = htmlTags.filter(tag => tag.name.startsWith(query));
                currentSuggestionIndex = -1;
                showSuggestions(filteredSuggestions, cursorPos);
            } else {
                tagSuggestions.style.display = 'none';
                filteredSuggestions = [];
            }
        };

        const handleKeyDown = (e) => {
            if (tagSuggestions.style.display === 'block') {
                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    currentSuggestionIndex = (currentSuggestionIndex + 1) % filteredSuggestions.length;
                    updateSuggestionSelection();
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    currentSuggestionIndex = (currentSuggestionIndex - 1 + filteredSuggestions.length) % filteredSuggestions.length;
                    updateSuggestionSelection();
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    if (currentSuggestionIndex >= 0 && currentSuggestionIndex < filteredSuggestions.length) {
                        insertTag(filteredSuggestions[currentSuggestionIndex].name);
                        tagSuggestions.style.display = 'none';
                    }
                } else if (e.key === 'Escape') {
                    tagSuggestions.style.display = 'none';
                }
            }
        };

        const updateSuggestionSelection = () => {
            const suggestions = tagSuggestions.querySelectorAll('.tag-suggestion');
            suggestions.forEach((suggestion, index) => {
                if (index === currentSuggestionIndex) {
                    suggestion.classList.add('selected');
                    suggestion.scrollIntoView({ block: 'nearest' });
                } else {
                    suggestion.classList.remove('selected');
                }
            });
        };

        // Initialize Autocomplete
        codeInput.addEventListener('input', () => {
            updateAutocomplete();
            updateCharCount();
        });

        codeInput.addEventListener('keydown', handleKeyDown);

        document.addEventListener('click', (e) => {
            if (!tagSuggestions.contains(e.target) && e.target !== codeInput) {
                tagSuggestions.style.display = 'none';
            }
        });

        // Update Character Count
        const updateCharCount = () => {
            const count = codeInput.value.length;
            charCount.textContent = `${count} character${count !== 1 ? 's' : ''}`;
        };

        // Initialize Code Highlighting
        const updateHighlighting = () => {
            const text = codeInput.value;
            highlightContainer.textContent = text;
            Prism.highlightElement(highlightContainer);
            updateLineNumbers();
            updateCharCount();
        };

        const updateLineNumbers = () => {
            const lines = codeInput.value.split('\n').length;
            let lineNumbersContent = '';
            for (let i = 1; i <= lines; i++) {
                lineNumbersContent += i + '\n';
            }
            lineNumbers.textContent = lineNumbersContent;
        };

        codeInput.addEventListener('input', () => {
            updateHighlighting();
            updatePreview();
        });

        codeInput.addEventListener('scroll', () => {
            highlightContainer.parentElement.scrollTop = codeInput.scrollTop;
            highlightContainer.parentElement.scrollLeft = codeInput.scrollLeft;
            lineNumbers.scrollTop = codeInput.scrollTop;
        });

        // Initialize on Load
        codeInput.value = `<!DOCTYPE html>
<html>
<head>
    <title>Preview</title>
</head>
<body>
    <h1>Welcome to the Interactive Code Editor</h1>
    <p>Edit your HTML code on the left, and see the preview on the right in real-time!</p>
</body>
</html>`;
        updateHighlighting();

        // Handle Theme Toggle
        themeToggle.addEventListener('click', () => {
            const darkMode = body.getAttribute('data-theme') === 'dark';
            body.setAttribute('data-theme', darkMode ? 'light' : 'dark');
            themeToggle.innerHTML = `<i class="fas fa-${darkMode ? 'moon' : 'sun'}"></i>`;
        });

        // Handle High Contrast Toggle
        contrastToggle.addEventListener('click', () => {
            const currentTheme = body.getAttribute('data-theme');
            body.setAttribute('data-theme', currentTheme === 'high-contrast' ? 'light' : 'high-contrast');
        });

        // Handle Search Toggle
        searchToggle.addEventListener('click', () => {
            searchContainer.classList.toggle('hidden');
            if (!searchContainer.classList.contains('hidden')) {
                messageSearch.focus();
            }
        });

        // Handle Message Search
        messageSearch.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            document.querySelectorAll('.message').forEach(msg => {
                const text = msg.textContent.toLowerCase();
                msg.style.display = text.includes(searchTerm) ? 'block' : 'none';
            });
        });

        // Handle Code/Preview Toggle
        toggleView.addEventListener('click', () => {
            previewMode = !previewMode;
            codeInput.classList.toggle('hidden');
            highlightContainer.parentElement.classList.toggle('hidden');
            renderOutput.classList.toggle('hidden');
            charCount.classList.toggle('hidden');
            toggleView.innerHTML = `<i class="fas fa-${previewMode ? 'code' : 'eye'}"></i>`;
            updatePreview();
        });

        // Handle Collapse Chat
        collapseButton.addEventListener('click', () => {
            chatContainer.classList.toggle('collapsed');
            collapseButton.classList.toggle('floating');
            
            const icon = collapseButton.querySelector('i');
            icon.classList.toggle('fa-chevron-left');
            icon.classList.toggle('fa-chevron-right');
            
            collapseButton.setAttribute('data-tooltip', 
                chatContainer.classList.contains('collapsed') ? 'Expand Chat' : 'Collapse Chat'
            );
        });

        // Handle Scroll Bottom Button
        scrollBottom.addEventListener('click', () => {
            messages.scrollTop = messages.scrollHeight;
            scrollBottom.style.display = 'none';
        });

        // Handle Message Input
        sendButton.addEventListener('click', sendMessage);
        
        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });

        // Handle Scroll Event to Show/Hide Scroll Bottom Button
        messages.addEventListener('scroll', () => {
            if (messages.scrollTop + messages.clientHeight < messages.scrollHeight - 100) {
                scrollBottom.style.display = 'flex';
            } else {
                scrollBottom.style.display = 'none';
            }
        });

        // Update Character Count on Load
        updateCharCount();

        // Update Preview Function with Debounce
        let debounceTimeout;
        const debounceUpdate = () => {
            clearTimeout(debounceTimeout);
            debounceTimeout = setTimeout(() => {
                updatePreview();
            }, 300);
        };

        codeInput.addEventListener('input', debounceUpdate);

        // Initialize Code Highlighting
        initializeCodeHighlighting();
    });
    </script>
</body>
</html>