index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LMSA</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- CodeMirror CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
    <!-- CodeMirror JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        darkBg: '#121212',
                        darkSecondary: '#1e1e1e',
                        darkTertiary: '#2c2c2c',
                    },
                },
            },
        }
    </script>
</head>
<body class="bg-darkBg text-gray-100 dark custom-dark-mode">
    <div class="flex flex-col h-screen">
        <!-- Header -->
        <header class="bg-darkSecondary p-4 flex justify-between items-center animate-fade-in">
            <div class="flex items-center">
                <img src="icon22.png" alt="LMSA Icon" class="w-8 h-8 mr-2">
                <h1 class="text-2xl font-bold">LMSA</h1>
            </div>
            <button id="sidebar-toggle" class="md:hidden text-gray-100 p-2 rounded-md hover:bg-darkTertiary focus:outline-none" aria-label="Toggle Sidebar">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
        </header>

        <!-- Model display bar -->
        <div id="loaded-model" class="bg-darkTertiary text-blue-400 font-bold py-2 px-4 text-center animate-fade-in"></div>

        <div class="flex flex-1 overflow-hidden">
            <!-- Sidebar -->
            <div id="sidebar" class="w-full md:w-64 bg-darkSecondary p-4 hidden md:flex md:flex-col animate-slide-in">
                <div class="flex justify-between items-center mb-4 md:hidden">
                    <h2 class="text-xl font-bold">Menu</h2>
                    <button id="close-sidebar" class="text-gray-100 p-2 rounded-md hover:bg-darkTertiary focus:outline-none" aria-label="Close Sidebar">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div id="sidebar-buttons" class="flex flex-col h-full">
                    <div>
                        <button id="new-chat" class="w-full bg-blue-600 text-gray-100 rounded-lg px-4 py-2 mb-4 hover:bg-blue-700 focus:outline-none transition-all duration-300 ease-in-out">
                            <i class="fas fa-plus-circle mr-2"></i>New Chat
                        </button>
                        <button id="settings-btn" class="w-full bg-darkTertiary text-gray-100 rounded-lg px-4 py-2 mb-4 hover:bg-gray-600 focus:outline-none transition-all duration-300 ease-in-out">
                            <i class="fas fa-cog mr-2"></i>Settings
                        </button>
                        <button id="help-btn" class="w-full bg-darkTertiary text-gray-100 rounded-lg px-4 py-2 mb-4 hover:bg-gray-600 focus:outline-none transition-all duration-300 ease-in-out">
                            <i class="fas fa-question-circle mr-2"></i>Help
                        </button>
                        <button id="about-btn" class="w-full bg-darkTertiary text-gray-100 rounded-lg px-4 py-2 mb-4 hover:bg-gray-600 focus:outline-none transition-all duration-300 ease-in-out">
                            <i class="fas fa-info-circle mr-2"></i>About
                        </button>
                    </div>
                    <div id="chat-history" class="flex-grow overflow-y-auto"></div>
                    </div>
            </div>

            <!-- Main content -->
            <div class="flex-1 flex flex-col overflow-hidden bg-darkBg">
                <!-- Chat container -->
                <div id="chat-container" class="flex-1 overflow-y-auto p-4 flex flex-col">
                    <div id="welcome-message" class="flex-1 flex items-center justify-center text-center text-gray-400 animate-fade-in">
                        <div>
                            <i class="fas fa-comment-dots text-5xl mb-4"></i>
                            <p>
                                <strong>Welcome to LM Studio Assistant!</strong><br><br>
                                Start a new chat or select an existing one from the side menu.
                            </p>
                        </div>
                    </div>
                    <div id="messages"></div>
                    <div id="loading-indicator" class="hidden">
                        <span class="loading-ellipsis">...</span>
                    </div>
                </div>

                <!-- Input area -->
                <div class="border-t border-darkTertiary animate-fade-in">
                    <form id="chat-form" class="flex p-4">
                        <div class="flex-grow relative">
                            <input type="text" id="user-input" class="w-full bg-darkTertiary text-gray-100 border border-gray-600 rounded-l-lg px-4 py-2 focus:outline-none" placeholder="Type your message..." aria-label="Type your message" autocomplete="off">
                        </div>
                        <button type="submit" id="send-button" class="bg-blue-600 text-white rounded-r-lg px-6 py-2 hover:bg-blue-700 focus:outline-none transition-all duration-300 ease-in-out">
                            <i class="fas fa-paper-plane mr-2"></i>Send
                        </button>
                        <button type="button" id="stop-button" class="bg-red-600 text-white rounded-r-lg px-6 py-2 hover:bg-red-700 focus:outline-none transition-all duration-300 ease-in-out hidden">
                            <i class="fas fa-stop mr-2"></i>Stop
                        </button>
                    </form>

                    <!-- Empty message modal -->
                    <div id="empty-message-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" aria-labelledby="empty-message-title" role="dialog" aria-modal="true">
                        <div class="modal-content">
                            <div class="modal-header">
                                <i class="fas fa-exclamation-circle"></i>
                                <h3 id="empty-message-title" class="modal-title">Empty Message</h3>
                            </div>
                            <div class="modal-body">
                                Please enter a message before sending.
                            </div>
                            <div class="modal-footer">
                                <button class="close-modal" aria-label="Close modal">
                                    <i class="fas fa-times mr-2"></i>Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Settings modal -->
    <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden animate-fade-in" aria-labelledby="settings-title" role="dialog" aria-modal="true">
        <div class="bg-darkSecondary p-6 rounded-lg w-96 max-w-[90%] shadow-lg">
            <h2 id="settings-title" class="text-xl font-bold mb-4 flex items-center">
                <i class="fas fa-cog mr-2 text-blue-500"></i>Settings
            </h2>
            <div class="mb-4">
                <label class="block text-sm font-medium mb-1">LM Studio Server Connection:</label>
                <div class="flex space-x-2">
                    <div class="flex-grow">
                        <label for="server-ip" class="block text-xs text-gray-400 mb-1">IP Address</label>
                        <input type="text" id="server-ip" class="w-full bg-darkTertiary text-gray-100 border border-gray-600 rounded px-3 py-2 focus:outline-none" placeholder="e.g. 192.168.1.100" pattern="^[0-9.]*$" onkeypress="return event.charCode === 46 || (event.charCode >= 48 && event.charCode <= 57)">
                    </div>
                    <div class="w-24">
                        <label for="server-port" class="block text-xs text-gray-400 mb-1">Port</label>
                        <input type="text" id="server-port" class="w-full bg-darkTertiary text-gray-100 border border-gray-600 rounded px-3 py-2 focus:outline-none" placeholder="e.g. 1234" pattern="^[0-9]*$" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                    </div>
                </div>
                <p class="text-xs text-gray-400 mt-1">The complete URL will be automatically formatted as: http://<span class="text-blue-400">[IP]:[PORT]</span>/v1/chat/completions</p>
            </div>
            <div class="mb-4">
                <label for="system-prompt" class="block text-sm font-medium mb-1">System Prompt:</label>
                <div class="relative">
                    <textarea id="system-prompt" class="w-full bg-darkTertiary text-gray-100 border border-gray-600 rounded px-3 py-2 focus:outline-none" rows="4" placeholder="Enter system prompt"></textarea>
                </div>
            </div>
            <div class="mb-4">
                <label for="temperature" class="block text-sm font-medium mb-1">Temperature: <span id="temperature-value">0.9</span></label>
                <div class="flex items-center">
                    <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.9" class="w-full bg-darkTertiary text-gray-100 rounded-lg appearance-none cursor-pointer" disabled>
                    <button id="temperature-lock" class="ml-2 text-gray-100 focus:outline-none" aria-label="Toggle Temperature Lock">
                        <i class="fas fa-lock"></i>
                    </button>
                </div>
            </div>
            <button id="clear-chat" class="w-full bg-darkTertiary text-gray-100 rounded-lg px-4 py-2 hover:bg-gray-600 focus:outline-none mb-2 transition-all duration-300 ease-in-out">
                <i class="fas fa-trash-alt mr-2"></i>Clear Chat
            </button>
            <button id="close-settings" class="w-full bg-blue-600 text-white rounded-lg px-4 py-2 hover:bg-blue-700 focus:outline-none transition-all duration-300 ease-in-out">
                <i class="fas fa-check mr-2"></i>Close
            </button>
        </div>
    </div>

    <!-- Confirmation modal for delete all chats -->
    <div id="delete-all-confirmation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden animate-fade-in" role="dialog" aria-modal="true">
        <div class="bg-darkSecondary p-6 rounded-lg w-96 max-w-[90%] shadow-lg">
            <h2 class="text-xl font-bold mb-4 flex items-center text-red-500">
                <i class="fas fa-exclamation-triangle mr-2"></i>Confirm Delete All
            </h2>
            <p class="text-gray-300 mb-6">Are you sure you want to delete all chats? This action cannot be undone.</p>
            <div class="flex justify-end space-x-4">
                <button id="cancel-delete-all" class="bg-gray-600 text-white rounded px-4 py-2 hover:bg-gray-700 transition-colors duration-300">Cancel</button>
                <button id="confirm-delete-all" class="bg-red-600 text-white rounded px-4 py-2 hover:bg-red-700 transition-colors duration-300">Delete All</button>
            </div>
        </div>
    </div>

    <!-- Confirmation modal -->
    <div id="confirmation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden animate-fade-in" aria-labelledby="confirmation-title" role="dialog" aria-modal="true">
        <div class="bg-darkSecondary p-6 rounded-lg w-96 max-w-[90%] shadow-lg">
            <h2 id="confirmation-title" class="text-xl font-bold mb-4 flex items-center">
                <i class="fas fa-exclamation-triangle mr-2 text-yellow-500"></i>Confirm Action
            </h2>
            <p id="confirmation-message" class="mb-4"></p>
            <div class="flex justify-end space-x-4">
                <button id="cancel-action" class="bg-darkTertiary text-gray-100 rounded-lg px-4 py-2 hover:bg-gray-600 focus:outline-none transition-all duration-300 ease-in-out">
                    Cancel
                </button>
                <button id="confirm-action" class="bg-red-600 text-white rounded-lg px-4 py-2 hover:bg-red-700 focus:outline-none transition-all duration-300 ease-in-out">
                    Confirm
                </button>
            </div>
        </div>
    </div>

    <!-- Help modal -->
    <div id="help-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden animate-fade-in" aria-labelledby="help-title" role="dialog" aria-modal="true">
        <div class="bg-darkSecondary p-6 rounded-lg w-[800px] max-w-[95%] max-h-[90vh] shadow-lg overflow-hidden flex flex-col">
            <h2 id="help-title" class="text-2xl font-bold mb-4 flex items-center sticky top-0 bg-darkSecondary z-10">
                <i class="fas fa-question-circle mr-2 text-blue-500"></i>Welcome to LMSA!
            </h2>
            <div class="space-y-6 overflow-y-auto pr-4 flex-grow">
                <p class="text-gray-300">Quick guide to using LMSA:</p>
                
                <div class="space-y-4">
                    <section>
                        <h3 class="text-lg font-semibold mb-2 text-blue-400">Quick Start</h3>
                        <ul class="list-disc pl-5 space-y-1 text-gray-300">
                            <li>Load model in LM Studio & start server</li>
                            <li>Enter server URL in Settings (IP:Port)</li>
                            <li>Start chatting!</li>
                        </ul>
                    </section>

                    <section>
                        <h3 class="text-lg font-semibold mb-2 text-blue-400">Features</h3>
                        <ul class="list-disc pl-5 space-y-1 text-gray-300">
                            <li>Send/Stop messages, Copy/Regenerate responses</li>
                            <li>Manage chats in sidebar</li>
                            <li>Customize settings & system prompt</li>
                        </ul>
                    </section>
                </div>
            </div>
            <button id="close-help" class="w-full bg-blue-600 text-white rounded-lg px-4 py-2 hover:bg-blue-700 focus:outline-none mt-4 transition-all duration-300 ease-in-out sticky bottom-0">
                <i class="fas fa-times mr-2"></i>Close
            </button>
        </div>
    </div>

    <!-- Context menu for LLM-generated text -->
    <div id="context-menu" class="hidden fixed bg-darkSecondary border border-gray-600 rounded-lg shadow-lg z-50">
        <button id="copy-text" class="w-full text-left px-4 py-2 hover:bg-darkTertiary focus:outline-none">
            <i class="fas fa-copy mr-2"></i>Copy
        </button>
        <button id="regenerate-text" class="w-full text-left px-4 py-2 hover:bg-darkTertiary focus:outline-none">
            <i class="fas fa-redo mr-2"></i>Regenerate
        </button>
    </div>

    <!-- About modal -->
    <div id="about-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden animate-fade-in" aria-labelledby="about-title" role="dialog" aria-modal="true">
        <div class="bg-darkSecondary p-6 rounded-lg w-96 max-w-[90%] shadow-lg">
            <h2 id="about-title" class="text-xl font-bold mb-4 flex items-center">
                <i class="fas fa-info-circle mr-2 text-blue-500"></i>About LMSA
            </h2>
            <div class="space-y-4 text-gray-300">
                <p class="text-center">© 2025 TechRay Apps LLC</p>
                <p class="text-center">Need help? <a href="https://github.com/techcow2/lmsa/issues" target="_blank" class="text-blue-400 hover:text-blue-300">Open an issue on GitHub</a></p>
                <p class="text-center"><a href="https://github.com/techcow2/lmsa/blob/main/LICENSE" target="_blank" class="text-blue-400 hover:text-blue-300">MIT License</a></p>
            </div>
            <div class="mt-6">
                <button id="close-about" class="w-full bg-blue-600 text-white rounded-lg px-4 py-2 hover:bg-blue-700 focus:outline-none transition-all duration-300 ease-in-out">
                    <i class="fas fa-times mr-2"></i>Close
                </button>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
    <script src="about.js"></script>
    <script src="help.js"></script>
    <script src="empty-message-modal.js"></script>
    <script src="delete-all-chats.js"></script>
</body>
</html>