<!doctype html>
<html class="dark:bg-gray-900 dark:text-gray-100">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class'
        }

        // Check initial theme
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark')
        } else {
            document.documentElement.classList.remove('dark')
        }

        // Listen for toggle
        function toggleDarkMode() {
            const themeText = document.getElementById('theme-text');
            if (document.documentElement.classList.contains('dark')) {
                document.documentElement.classList.remove('dark')
                localStorage.theme = 'light'
                themeText.textContent = 'Dark Mode'
            } else {
                document.documentElement.classList.add('dark')
                localStorage.theme = 'dark'
                themeText.textContent = 'Light Mode'
            }

            // Toggle code highlighting theme
            const lightTheme = document.querySelector('link[href*="github.min.css"]');
            const darkTheme = document.querySelector('link[href*="github-dark.min.css"]');
            
            if (document.documentElement.classList.contains('dark')) {
                lightTheme.disabled = true;
                darkTheme.disabled = false;
            } else {
                lightTheme.disabled = false;
                darkTheme.disabled = true;
            }
        }

        // Set initial button text
        window.addEventListener('DOMContentLoaded', () => {
            const themeText = document.getElementById('theme-text');
            themeText.textContent = document.documentElement.classList.contains('dark') ? 'Light Mode' : 'Dark Mode';
        });
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css" 
          class="code-theme-dark" disabled>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        .message-bubble {
            max-width: 85%;
            margin: 4px;
            padding: 16px;
            border-radius: 10px;
            line-height: 1.5;
            position: relative;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            word-wrap: break-word;
            font-size: 0.9rem; /* Add this line to make the font smaller */
        }
        .user-message {
            margin-left: auto;
            background: #f0f0f0;
            color: #1a1a1a;
            border-bottom-right-radius: 4px;
        }
        .dark .user-message {
            background: #2d3748;
            color: #e2e8f0;
        }
        .assistant-message {
            margin-right: auto;
            background: #f0f0f0;
            color: #1a1a1a;
            border-bottom-left-radius: 4px;
            line-height: 1.6;
        }
        .dark .assistant-message {
            background: #2d3748;
            color: #e2e8f0;
        }
        .assistant-message pre {
            margin: 1em 0;
            padding: 1em;
            border-radius: 6px;
            background: #f6f8fa;
            overflow-x: auto;
            border: 1px solid #e5e7eb;
            position: relative;
        }
        .dark .assistant-message pre {
            background: #1a1f2e;
            border-color: #374151;
            color: #e5e7eb;
        }
        .assistant-message code {
            font-family: monospace;
            padding: 2px 4px;
            background: rgba(0,0,0,0.05);
            border-radius: 3px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 0.9em;
            padding: 0.2em 0.4em;
            border-radius: 3px;
            background: rgba(0,0,0,0.05);
            color: inherit;
        }
        .dark .assistant-message code {
            background: rgba(0,0,0,0.2);
            background: rgba(255,255,255,0.1);
            color: inherit;
        }
        .assistant-message pre code {
            padding: 0;
            background: transparent;
            color: inherit;
        }
        .message-bubble p:first-child {
            margin-top: 0;
        }
        .message-bubble p:last-child {
            margin-bottom: 0;
        }
        .file-preview {
            max-width: 200px;
            max-height: 200px;
            object-fit: contain;
            margin: 8px 0;
        }
        .file-input-button {
            padding: 8px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .file-input-button:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
        .dark .file-input-button:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }

        /* Mobile-friendly adjustments */
        @media (max-width: 640px) {
            .message-bubble {
                max-width: 95%;
                padding: 12px;
                margin: 6px;
            }
            
            .assistant-message pre {
                padding: 8px;
                font-size: 14px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            #chat-form {
                padding: 8px;
            }

            #message-input {
                font-size: 16px; /* Prevent iOS zoom on input */
            }

            #system-prompt {
                font-size: 14px;
            }

            .file-input-button {
                padding: 6px;
            }

            #send-button {
                padding: 8px 16px;
            }
        }

        /* Update input and textarea styling */
        input[type="text"], 
        input[type="number"], 
        input[type="password"],
        textarea {
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            transition: all 0.2s ease;
        }

        input[type="text"]:hover, 
        input[type="number"]:hover, 
        input[type="password"]:hover,
        textarea:hover {
            background-color: #f1f5f9;
            border-color: #cbd5e1;
        }

        input[type="text"]:focus, 
        input[type="number"]:focus, 
        input[type="password"]:focus,
        textarea:focus {
            background-color: white;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            outline: none;
        }

        .dark input[type="text"],
        .dark input[type="number"],
        .dark input[type="password"],
        .dark textarea {
            background-color: #1e293b;
            border-color: #334155;
        }

        .dark input[type="text"]:hover,
        .dark input[type="number"]:hover,
        .dark input[type="password"]:hover,
        .dark textarea:hover {
            background-color: #1e293b;
            border-color: #475569;
        }

        .dark input[type="text"]:focus,
        .dark input[type="number"]:focus,
        .dark input[type="password"]:focus,
        .dark textarea:focus {
            background-color: #1e293b;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }

        /* Update range input (slider) styling */
        input[type="range"] {
            height: 6px;
            background: #e2e8f0;
            border-radius: 3px;
            cursor: pointer;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            background: #3b82f6;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            background: #2563eb;
        }

        .dark input[type="range"] {
            background: #334155;
        }

        /* Add these new styles for better Markdown rendering */
        .assistant-message h1,
        .assistant-message h2,
        .assistant-message h3,
        .assistant-message h4 {
            margin-top: 1.5em;
            margin-bottom: 0.75em;
            font-weight: 600;
        }

        .assistant-message h1 { font-size: 1.5em; }
        .assistant-message h2 { font-size: 1.3em; }
        .assistant-message h3 { font-size: 1.1em; }

        .assistant-message p {
            margin: 1em 0;
        }

        .assistant-message ul,
        .assistant-message ol {
            margin: 1em 0;
            padding-left: 2em;
        }

        .assistant-message ul { list-style-type: disc; }
        .assistant-message ol { list-style-type: decimal; }

        .assistant-message table {
            margin: 1em 0;
            border-collapse: collapse;
            width: 100%;
        }

        .assistant-message th,
        .assistant-message td {
            padding: 0.5em;
            border: 1px solid #e5e7eb;
        }

        .dark .assistant-message th,
        .dark .assistant-message td {
            border-color: #374151;
        }

        .assistant-message th {
            background: #f9fafb;
            font-weight: 600;
        }

        .dark .assistant-message th {
            background: #374151;
        }

        .assistant-message blockquote {
            margin: 1em 0;
            padding-left: 1em;
            border-left: 4px solid #e5e7eb;
            color: #6b7280;
        }

        .dark .assistant-message blockquote {
            border-left-color: #4b5563;
            color: #9ca3af;
        }

        /* Override highlight.js theme colors for dark mode */
        .dark .hljs {
            background: transparent;
            color: #e5e7eb;
        }
        
        .dark .hljs-keyword,
        .dark .hljs-operator {
            color: #c678dd;  /* Purple */
        }
        
        .dark .hljs-string {
            color: #98c379;  /* Green */
        }
        
        .dark .hljs-comment {
            color: #7f8c98;  /* Muted gray */
        }
        
        .dark .hljs-function,
        .dark .hljs-class {
            color: #61afef;  /* Blue */
        }
        
        .dark .hljs-number {
            color: #d19a66;  /* Orange */
        }
        
        .dark .hljs-title {
            color: #e5c07b;  /* Yellow */
        }

        /* Override highlight.js default borders */
        .hljs {
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
        }

        /* Add these new styles for the copy button */
        .copy-button {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            padding: 0.25rem 0.5rem;
            background-color: #f3f4f6;
            border: 1px solid #e5e7eb;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .dark .copy-button {
            background-color: #374151;
            border-color: #4b5563;
            color: #e5e7eb;
        }

        pre:hover .copy-button {
            opacity: 1;
        }

        .copy-button:hover {
            background-color: #e5e7eb;
        }

        .dark .copy-button:hover {
            background-color: #4b5563;
        }

        /* Update pre style to support copy button */
        .assistant-message pre {
            position: relative;
        }

        /* Add these new styles for the collapsible sidebar */
        .settings-sidebar {
            transition: transform 0.3s ease-in-out;
        }

        .settings-sidebar.collapsed {
            transform: translateX(calc(100% - 24px));
        }

        .settings-toggle {
            position: absolute;
            left: -12px;
            top: auto; /* Remove top positioning */
            bottom: 72px; /* Position from bottom */
            width: 40px;
            height: 40px;
            background: #f8fafc;
            border: 0px solid #e2e8f0;
            border-radius: 10px 0 0 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s;
        }

        .dark .settings-toggle {
            background: #1e293b;
            border-color: #334155;
        }

        .settings-toggle:hover {
            background: #f1f5f9;
        }

        .dark .settings-toggle:hover {
            background: #2d3748;
        }

        .settings-toggle svg {
            width: 3px; /* Make arrow icon smaller */
            height: 12px; /* Make arrow icon smaller */
            transition: transform 0.3s;
        }

        .settings-sidebar.collapsed .settings-toggle svg {
            transform: rotate(180deg);
        }

        /* Update main chat area transition */
        .chat-area {
            transition: margin-right 0.3s ease-in-out;
        }

        .chat-area.sidebar-collapsed {
            margin-right: 24px !important;
        }

        /* Add these new styles for scroll behavior */
        #chat-messages {
            scroll-behavior: smooth;
        }

        /* Jump to bottom button */
        .jump-to-bottom {
            position: fixed;
            bottom: 140px; /* Position above the chat input */
            right: 280px; /* Position considering the right sidebar */
            background: rgba(59, 130, 246, 0.9);
            color: white;
            padding: 0.5rem;
            border-radius: 9999px;
            cursor: pointer;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.2s, transform 0.2s;
            z-index: 50;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .jump-to-bottom.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .dark .jump-to-bottom {
            background: rgba(59, 130, 246, 0.8);
        }

        @media (max-width: 640px) {
            .jump-to-bottom {
                right: 20px;
                bottom: 160px;
            }
        }

        /* When settings sidebar is collapsed */
        .chat-area.sidebar-collapsed .jump-to-bottom {
            right: 40px;
        }
    </style>
</head>

<body class="bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
    <!-- Left sidebar toggle button -->
    <button data-drawer-target="left-sidebar" data-drawer-toggle="left-sidebar"
        aria-controls="left-sidebar" type="button"
        class="inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200">
        <span class="sr-only">Open sidebar</span>
        <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
            <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
        </svg>
    </button>

    <!-- Left Sidebar -->
    <aside id="left-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0">
        <div class="h-[calc(100vh-2rem)] my-4 mx-3 px-3 py-4 bg-gray-50 dark:bg-gray-800 rounded-lg flex flex-col">
            <!-- App title -->
            <a href="#" class="flex items-center ps-2.5 mb-4">
                <span class="font-['Orbitron'] text-2xl font-semibold bg-gradient-to-r from-blue-500 to-purple-600 text-transparent bg-clip-text">aiaio</span>
            </a>
            <hr class="mb-4 border-gray-200 dark:border-gray-700">
            
            <!-- New Chat Button - Moved here -->
            <button onclick="startNewConversation()" 
                    class="mb-4 w-full px-3 py-2 text-sm 
                           bg-white dark:bg-gray-700 rounded-lg 
                           hover:bg-gray-50 dark:hover:bg-gray-600 
                           border border-gray-200 dark:border-gray-600
                           transition-colors duration-200 flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
                New Chat
            </button>
            
            <!-- Scrollable conversations container -->
            <div class="flex-1 overflow-y-auto mb-4">
                <div class="mb-4">
                    <div class="flex items-center justify-between px-2 mb-2">
                        <h3 class="text-sm font-semibold text-gray-600 dark:text-gray-400">Conversations</h3>
                    </div>
                    <div id="conversations-list" class="space-y-1 pr-2">
                        <!-- Conversations will be listed here -->
                    </div>
                </div>
            </div>

            <!-- Fixed dark mode toggle at bottom -->
            <div class="pt-2">
                <button id="theme-toggle" 
                    onclick="toggleDarkMode()"
                    class="w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-600 
                    hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 
                    focus:ring-gray-200 dark:focus:ring-gray-700 transition-colors duration-200
                    flex items-center justify-between">
                    <span id="theme-text" class="text-sm font-medium text-gray-700 dark:text-gray-300">Dark Mode</span>
                    <svg id="theme-toggle-icon" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <!-- Moon icon -->
                        <path class="hidden dark:block" d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
                        <!-- Sun icon -->
                        <path class="block dark:hidden" fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path>
                    </svg>
                </button>
            </div>
        </div>
    </aside>

    <!-- Main Chat Area - Update padding and margins for mobile -->
    <div class="chat-area sm:ml-64 sm:mr-64 px-2 sm:px-0">
        <div class="h-[calc(100vh-1rem)] sm:h-[calc(100vh-2rem)] my-2 sm:my-4 flex flex-col relative">
            <!-- Combined Container for System Prompt and Chat Messages -->
            <div class="flex-grow bg-white dark:bg-gray-800 rounded-lg overflow-hidden flex flex-col min-h-0 mb-[120px] sm:mb-0">
                <!-- System Prompt Section -->
                <div class="flex-none border-b border-gray-200 dark:border-gray-700">
                    <div class="p-3 sm:p-4">
                        <button onclick="toggleSystemPrompt()" 
                                class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 mb-2 hover:text-gray-900 dark:hover:text-gray-200">
                            <svg id="system-prompt-chevron" class="w-4 h-4 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                            System Prompt
                        </button>
                        <div id="system-prompt-container" class="transition-all duration-200 overflow-hidden">
                            <textarea id="system-prompt" 
                                class="w-full p-2 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100" 
                                rows="2"
                                placeholder="Enter system prompt..."
                            ></textarea>
                        </div>
                    </div>
                </div>
                <!-- Chat Messages Section -->
                <div id="chat-messages" class="flex-grow overflow-y-auto p-2 sm:p-4">
                    <!-- Chat messages will be inserted here -->
                </div>
                <!-- Add jump-to-bottom button here, after chat-messages -->
                <button id="jump-to-bottom" class="jump-to-bottom" onclick="scrollToBottom()">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
                    </svg>
                </button>
            </div>
            <!-- Chat Input Area - Fixed on mobile -->
            <div class="flex-none bg-white dark:bg-gray-800 rounded-lg p-2 sm:p-4 mt-2 sm:mt-4 fixed sm:relative bottom-0 left-0 right-0 sm:left-auto sm:right-auto mx-2 sm:mx-0">
                <form id="chat-form" class="space-y-2">
                    <div id="file-preview-container" class="hidden space-y-2"></div>
                    <div class="flex gap-1 sm:gap-2">
                        <label class="file-input-button">
                            <input type="file" 
                                id="file-input" 
                                class="hidden" 
                                accept=".txt,.csv,.json,.pdf,.doc,.docx,.xls,.xlsx,image/*"
                                multiple>
                            <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
                            </svg>
                        </label>
                        <input type="text" 
                            id="message-input" 
                            class="flex-1 p-2 text-base sm:text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600" 
                            placeholder="Send a message...">
                        <button type="submit" 
                            id="send-button"
                            class="px-4 sm:px-6 py-2 bg-gradient-to-r from-blue-500 to-blue-600 
                                text-white rounded-lg hover:from-blue-600 hover:to-blue-700 
                                transition-all duration-200 transform hover:scale-105 
                                flex items-center gap-2 shadow-lg hover:shadow-blue-500/50 
                                disabled:hover:scale-100 text-sm sm:text-base">
                            <svg class="w-4 h-4 transform rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                            </svg>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Right Sidebar -->
    <aside class="settings-sidebar fixed top-0 right-0 z-40 w-64 hidden sm:block">
        <div class="h-[calc(100vh-2rem)] my-4 mx-3 px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800 rounded-lg flex flex-col relative">
            
            <!-- Settings header -->
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-sm font-semibold">Settings</h3>
                <button onclick="resetSettings()" 
                        class="p-2 text-gray-500 hover:text-blue-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200"
                        title="Reset to defaults">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                </button>
            </div>
            

            <!-- Settings content - flex-1 makes it take available space -->
            <div class="flex-1 space-y-4 overflow-y-auto">
                <div>
                    <label for="temperature" class="block text-xs font-medium mb-2">
                        Temperature: <span id="temperature-value">1.0</span>
                    </label>
                    <input type="range" id="temperature" 
                        min="0" max="2" step="0.05" value="1.0"
                        class="w-full"
                        oninput="document.getElementById('temperature-value').textContent=this.value">
                </div>

                <div>
                    <label for="top_p" class="block text-xs font-medium mb-2">
                        Top P: <span id="top_p-value">0.95</span>
                    </label>
                    <input type="range" id="top_p" 
                        min="0" max="1" step="0.05" value="0.95"
                        class="w-full"
                        oninput="document.getElementById('top_p-value').textContent=this.value">
                </div>

                <div>
                    <label for="max_tokens" class="block text-xs font-medium mb-2">Max Tokens</label>
                    <input type="number" id="max_tokens" 
                        value="4096" min="1"
                        class="w-full p-2 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100">
                </div>

                <div>
                    <label for="host" class="block text-xs font-medium mb-2">Host</label>
                    <input type="text" id="host" 
                        value="http://localhost:8000/v1"
                        class="w-full p-2 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100">
                </div>

                <div>
                    <label for="model_name" class="block text-xs font-medium mb-2">Model Name</label>
                    <input type="text" id="model_name" 
                        value="meta-llama/Llama-3.2-1B-Instruct"
                        class="w-full p-2 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100">
                </div>

                <div>
                    <label for="api_key" class="block text-xs font-medium mb-2">API Key</label>
                    <input type="password" id="api_key" 
                        placeholder="Enter API key"
                        class="w-full p-2 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100">
                </div>
            </div>
            <!-- Version display -->
            <div class="text-xs text-gray-600 dark:text-gray-400 text-center" id="version-display">
                version: loading...
            </div>
            <!-- Save button at bottom -->
            <div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-700">
                <!-- Add warning message -->
                <div id="settings-warning" class="hidden mb-2 text-xs text-yellow-600 dark:text-yellow-400">
                    <div class="flex items-center gap-1">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                        <span>You have unsaved changes</span>
                    </div>
                </div>
                <button onclick="saveSettings()" 
                    class="w-full px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 
                           text-white rounded-lg hover:from-blue-600 hover:to-blue-700 
                           transition-all duration-200 transform hover:scale-[1.02] 
                           flex items-center justify-center gap-2 shadow-lg hover:shadow-blue-500/50">
                    Save Settings
                </button>
                <!-- Add toggle button after the save button -->
                <button class="settings-toggle" onclick="toggleSettingsSidebar()" title="Toggle Settings">
                    <i class="fas fa-chevron-left w-4 h-4 transition-transform duration-300"></i>
                </button>
            </div>
        </div>
    </aside>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
    <script src="/static/script.js?cb={{ time }}" defer></script>
    <script>
    function toggleSystemPrompt() {
        const container = document.getElementById('system-prompt-container');
        const chevron = document.getElementById('system-prompt-chevron');
        const textarea = document.getElementById('system-prompt');
        
        // Toggle the collapsed state
        const isCollapsed = container.classList.toggle('h-0');
        
        if (isCollapsed) {
            container.classList.add('mb-0');
            chevron.classList.remove('rotate-180');
            textarea.classList.add('hidden');
        } else {
            container.classList.remove('mb-0');
            chevron.classList.add('rotate-180');
            textarea.classList.remove('hidden');
        }
        
        // Save preference to localStorage
        localStorage.setItem('systemPromptCollapsed', isCollapsed);
    }

    // Set initial state on page load
    document.addEventListener('DOMContentLoaded', () => {
        const isCollapsed = localStorage.getItem('systemPromptCollapsed');
        // If no preference is stored, or if preference is true, collapse it
        if (isCollapsed === null || isCollapsed === 'true') {
            const container = document.getElementById('system-prompt-container');
            const chevron = document.getElementById('system-prompt-chevron');
            const textarea = document.getElementById('system-prompt');
            
            container.classList.add('h-0', 'mb-0');
            textarea.classList.add('hidden');
        } else {
            document.getElementById('system-prompt-chevron').classList.add('rotate-180');
        }
    });

    function toggleSettingsSidebar() {
        const sidebar = document.querySelector('.settings-sidebar');
        const chatArea = document.querySelector('.chat-area');
        const chevron = document.querySelector('.settings-toggle i');
        const isCollapsed = sidebar.classList.toggle('collapsed');
        chatArea.classList.toggle('sidebar-collapsed');
        
        // Rotate the chevron icon
        chevron.style.transform = isCollapsed ? 'rotate(180deg)' : '';
        
        // Save the state to localStorage
        localStorage.setItem('settingsSidebarCollapsed', isCollapsed);
    }

    // Restore sidebar state on page load
    document.addEventListener('DOMContentLoaded', () => {
        const sidebar = document.querySelector('.settings-sidebar');
        const chatArea = document.querySelector('.chat-area');
        const chevron = document.querySelector('.settings-toggle i');
        const isCollapsed = localStorage.getItem('settingsSidebarCollapsed') === 'true';
        
        if (isCollapsed) {
            sidebar.classList.add('collapsed');
            chatArea.classList.add('sidebar-collapsed');
            chevron.style.transform = 'rotate(180deg)';
        }
    });
    </script>
</body>

</html>