<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chatbot</title>

    <!-- Include Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <!-- Include Prism.js CSS for syntax highlighting -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />

    <style>
        /* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: #1e1e1e;
            font-family: 'Roboto', sans-serif;
            color: #e0e0e0;
            overflow: hidden;
        }
        /* Flex container to hold chat history and chat area */
        .main-container {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }
        /* Chat history styles (design only) */
        .chat-history {
            width: 250px;
            background: #2a2a2a;
            border-right: 1px solid #3c3c3c;
            padding: 20px;
        }
        .chat-history h2 {
            margin-bottom: 20px;
            color: #fff;
            font-weight: normal;
            font-size: 18px;
        }
        .chat-history ul {
            list-style: none;
        }
        .chat-history li {
            padding: 10px;
            margin-bottom: 10px;
            background: #333;
            border-radius: 5px;
            cursor: pointer;
            color: #ccc;
            transition: background-color 0.3s;
        }
        .chat-history li:hover {
            background: #444;
        }
        /* Chat container styles */
        .chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: #1e1e1e;
            overflow: hidden;
        }
        /* Chat window styles */
        #chat-window {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            scrollbar-width: thin;
        }
        #chat-window::-webkit-scrollbar {
            width: 8px;
        }
        #chat-window::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
        .message {
            margin: 10px 0;
            padding: 15px;
            border-radius: 15px;
            max-width: 70%;
            word-wrap: break-word;
            word-break: break-word;
            position: relative;
            opacity: 0;
            animation: fadeInUp 0.5s forwards;
        }
        .user-message {
            align-self: flex-end;
            background: #3a3a3a;
            color: #ffffff;
        }
        .bot-message {
            align-self: flex-start;
            background: #2a2a2a;
            color: #ffffff;
        }
        .message-content {
            white-space: pre-wrap;
        }
        /* Code block styling */
        .code-block {
            background-color: #121212;
            color: #ffffff;
            font-family: 'Courier New', monospace;
            padding: 15px;
            border-radius: 10px;
            overflow-x: auto;
            margin-top: 10px;
            position: relative;
        }
        /* Copy button styling */
        .copy-button {
            background-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .copy-button:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        /* Input area styling */
        .input-container {
            display: flex;
            padding: 15px 20px;
            background: #1e1e1e;
            border-top: 1px solid #3c3c3c;
            align-items: center;
        }
        .input-container textarea {
            flex: 1;
            padding: 12px 20px;
            background: #2a2a2a;
            color: #ffffff;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            outline: none;
            margin-right: 10px;
            resize: none;
            max-height: 150px;
            overflow-y: auto;
            line-height: 1.5;
            font-family: 'Roboto', sans-serif;
        }
        .input-container textarea::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        .send-button {
            background: #2a2a2a;
            color: #ffffff;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s ease, transform 0.1s ease;
        }
        .send-button:hover {
            background: #3a3a3a;
        }
        .send-button:active {
            transform: scale(0.95);
        }

        /* Styles for the New Chat button */
        #new-chat-button {
            background-color: #333;
            color: #ccc;
            padding: 12px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
            margin-bottom: 20px;
            transition: background-color 0.3s ease;
        }

        #new-chat-button:hover {
            background-color: #444;
        }

        /* Send icon */
        .send-icon {
            width: 24px;
            height: 24px;
            fill: #ffffff;
        }
        /* Animations */
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        /* Typing indicator */
        .typing-indicator {
            font-style: italic;
            color: #ffffff;
            margin: 10px 0;
            display: flex;
            align-items: center;
        }
        .typing-indicator span {
            margin-left: 5px;
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #ffffff;
            border-radius: 50%;
            opacity: 0.5;
            animation: typingDots 1s infinite;
        }
        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }
        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }

        /* Styles for the model selection */
        .model-selection {
            margin-bottom: 15px;
            padding: 0 20px;
            color: #e0e0e0;
            display: flex;
            align-items: center;
        }

        .model-selection label {
            margin-right: 10px;
            font-size: 16px;
        }

        .model-selection select,
        .model-selection input {
            background-color: #2a2a2a;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            padding: 8px;
            font-size: 16px;
            outline: none;
        }

        @keyframes typingDots {
            0% {
                opacity: 0.2;
                transform: scale(1);
            }
            20% {
                opacity: 1;
                transform: scale(1.3);
            }
            100% {
                opacity: 0.2;
                transform: scale(1);
            }
        }
        /* Responsive design */
        @media (max-width: 600px) {
            .message {
                max-width: 85%;
            }
            .chat-history {
                display: none;
            }
        }
        /* Prism.js code block adjustments */
        pre[class*="language-"] {
            background: none;
            padding: 0;
            margin: 0;
            overflow: auto;
        }
        code[class*="language-"] {
            background: none;
            padding: 0;
            margin: 0;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- Chat History Menu -->
        <div class="chat-history">
            <h2>Chat History</h2>
            <button id="new-chat-button">New Chat</button>
            <ul id="chat-list">
                <!-- Chat histories will be dynamically populated here -->
            </ul>
        </div>
        <!-- Add this inside your HTML where appropriate, e.g., above the chat window -->
        <div class="model-selection">
            <label for="model-select">Choose a model:</label>
            <select id="model-select">
                <option value="yuntian-deng/o1">yuntian-deng/o1</option>
                <option value="gpt2">gpt2</option>
                <!-- Add more models to the list as needed -->
            </select>
        </div>
        <!-- Chat Container -->
        <div class="chat-container">
            <div id="chat-window"></div>
            <div class="input-container">
                <textarea id="user-input" placeholder="Type a message..." autocomplete="off"></textarea>
                <button id="send-button" class="send-button">
                    <!-- Send Icon -->
                    <svg class="send-icon" viewBox="0 0 24 24">
                        <path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Include Prism.js and necessary components -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <!-- Include languages -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
    <!-- ... [Include other languages as needed] ... -->

    <script>
        const sendButton = document.getElementById('send-button');
        const userInput = document.getElementById('user-input');
        const chatWindow = document.getElementById('chat-window');
        const modelSelect = document.getElementById('model-select'); // Make sure this line is included
        
        let currentChatId = null; // Track the current chat ID

        sendButton.addEventListener('click', sendMessage);

        userInput.addEventListener('keydown', function(event) {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault(); // Prevent newline
                sendMessage();
            }
        });

        function addMessage(sender, message) {
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message');
            messageDiv.classList.add(sender === 'user' ? 'user-message' : 'bot-message');

            const messageContent = document.createElement('div');
            messageContent.classList.add('message-content');

            if (sender === 'bot') {
                // Process the message content
                processMessageContent(message, messageContent);
            } else {
                messageContent.textContent = message;
            }

            messageDiv.appendChild(messageContent);
            chatWindow.appendChild(messageDiv);
            chatWindow.scrollTop = chatWindow.scrollHeight;

            // Highlight code blocks within this message
            Prism.highlightAllUnder(messageDiv);
        }

        function processMessageContent(message, container) {
            // Split message into code blocks and text
            const codeRegex = /```(\w+)?\n([\s\S]*?)```/g;
            let lastIndex = 0;
            let match;

            while ((match = codeRegex.exec(message)) !== null) {
                // Process text before code block
                if (match.index > lastIndex) {
                    let textSegment = message.substring(lastIndex, match.index);

                    // Remove '#' symbols outside code blocks
                    textSegment = textSegment.replace(/#/g, '');

                    // Escape HTML in text segments
                    textSegment = textSegment.replace(/&/g, "&amp;")
                                             .replace(/</g, "&lt;")
                                             .replace(/>/g, "&gt;");

                    const formattedText = formatText(textSegment);

                    const textNode = document.createElement('div');
                    textNode.innerHTML = formattedText;
                    container.appendChild(textNode);
                }

                // Process code block
                const language = match[1] || 'plaintext';
                const codeContent = match[2];

                const codeBlockDiv = document.createElement('div');
                codeBlockDiv.classList.add('code-block');

                // Copy button
                const copyButton = document.createElement('button');
                copyButton.classList.add('copy-button');
                copyButton.textContent = 'Copy';
                copyButton.addEventListener('click', () => {
                    copyToClipboard(codeContent);
                });

                codeBlockDiv.appendChild(copyButton);

                // Code element
                const pre = document.createElement('pre');
                pre.classList.add(`language-${language}`);
                const code = document.createElement('code');
                code.classList.add(`language-${language}`);
                code.textContent = codeContent; // Use textContent to prevent HTML entities

                pre.appendChild(code);

                codeBlockDiv.appendChild(pre);
                container.appendChild(codeBlockDiv);

                lastIndex = codeRegex.lastIndex;
            }

            // Process remaining text after last code block
            if (lastIndex < message.length) {
                let textSegment = message.substring(lastIndex);

                // Remove '#' symbols outside code blocks
                textSegment = textSegment.replace(/#/g, '');

                // Escape HTML in text segments
                textSegment = textSegment.replace(/&/g, "&amp;")
                                         .replace(/</g, "&lt;")
                                         .replace(/>/g, "&gt;");

                const formattedText = formatText(textSegment);

                const textNode = document.createElement('div');
                textNode.innerHTML = formattedText;
                container.appendChild(textNode);
            }
        }

        function formatText(text) {
            // Transform markdown syntax to HTML
            let formattedText = text
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')            // Bold
                .replace(/\*(.*?)\*/g, '<em>$1</em>')                        // Italic
                .replace(/__(.*?)__/g, '<u>$1</u>')                          // Underline
                .replace(/\~\~(.*?)\~\~/g, '<del>$1</del>')                  // Strikethrough
                .replace(/`([^`]+)`/g, '<code>$1</code>')                    // Inline code
                .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>'); // Links

            return formattedText;
        }

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                // Optionally, display a tooltip or message
                alert('Code copied to clipboard!');
            }).catch(err => {
                alert('Failed to copy code to clipboard.');
            });
        }

        function sendMessage() {
            const message = userInput.value.trim();
            if (!message) return;

            const selectedModel = modelSelect.value;
            addMessage('user', message);
            userInput.value = '';

            // Show typing indicator
            const typingIndicator = document.createElement('div');
            typingIndicator.classList.add('typing-indicator');
            typingIndicator.innerHTML = 'Bot is typing<span></span><span></span><span></span>';
            chatWindow.appendChild(typingIndicator);
            chatWindow.scrollTop = chatWindow.scrollHeight;

            fetch('/chat', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ message, model: selectedModel })
            })
            .then(response => response.json())
            .then(data => {
                // Remove typing indicator
                chatWindow.removeChild(typingIndicator);

                if (data.response) {
                    addMessage('bot', data.response);
                    // Refresh chat list to update titles if needed
                    fetchChats();
                } else {
                    addMessage('bot', 'Error: ' + data.error);
                }
            })
            .catch(error => {
                // Remove typing indicator
                chatWindow.removeChild(typingIndicator);

                addMessage('bot', 'Error: ' + error);
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            fetchChats(function(data) {
                // If there are existing chats, load the most recent one
                if (data.chats.length > 0) {
                    currentChatId = data.chats[0].id;
                    loadChat(currentChatId);
                }
            });

            // Set up event listener for starting a new chat
            const newChatButton = document.getElementById('new-chat-button');
            newChatButton.addEventListener('click', function() {
                startNewChat();
            });
        });

        function fetchChats(callback) {
            fetch('/chats')
            .then(response => response.json())
            .then(data => {
                const chatList = document.getElementById('chat-list');
                chatList.innerHTML = ''; // Clear existing list

                data.chats.forEach(chat => {
                    const li = document.createElement('li');
                    li.textContent = chat.title;
                    li.dataset.chatId = chat.id;
                    li.addEventListener('click', function() {
                        loadChat(chat.id);
                    });
                    if (currentChatId == chat.id) {
                        li.classList.add('selected');
                    }
                    chatList.appendChild(li);
                });

                if (callback) {
                    callback(data);
                }
            })
            .catch(error => {
                console.error('Error fetching chats:', error);
            });
        }

        function loadChat(chatId) {
            currentChatId = chatId;
            fetch(`/get_chat/${chatId}`)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                    return;
                }
                // Clear chat window
                chatWindow.innerHTML = '';

                data.messages.forEach(message => {
                    addMessage(message.sender, message.content);
                });

                // Update selected chat in the chat list
                const chatListItems = document.querySelectorAll('#chat-list li');
                chatListItems.forEach(item => {
                    if (item.dataset.chatId == chatId) {
                        item.classList.add('selected');
                    } else {
                        item.classList.remove('selected');
                    }
                });
            })
            .catch(error => {
                console.error('Error loading chat:', error);
            });
        }

        function startNewChat() {
            fetch('/start_new_chat', {
                method: 'POST',
            })
            .then(response => response.json())
            .then(data => {
                currentChatId = data.chat_id;
                // Clear the chat window
                chatWindow.innerHTML = '';
                // Fetch updated chat list
                fetchChats();
                // Load the new chat
                loadChat(currentChatId);
            })
            .catch(error => {
                console.error('Error starting new chat:', error);
            });
        }
    </script>
</body>
</html>

Make my model-selection element on right place and not in center