<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MIYA CHAT</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #1e1e1e;
            color: #ffffff;
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 250px;
            background-color: #252526;
            padding: 20px;
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            overflow-y: auto;
        }
        .main-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            margin-left: 290px;
            height: 100vh;
        }
        .chat-container {
            flex-grow: 1;
            overflow-y: auto;
            padding: 20px;
            background-color: #2d2d2d;
            border-radius: 5px;
        }
        .input-container {
            display: flex;
            padding: 20px;
            background-color: #252526;
        }
        #user-input {
            flex-grow: 1;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #3c3c3c;
            color: #ffffff;
            resize: vertical;
            min-height: 60px;
        }
        button {
            padding: 10px 20px;
            background-color: #0078d4;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 10px;
        }
        button:hover {
            background-color: #005a9e;
        }
        .config-input {
            margin-bottom: 15px;
        }
        .config-input label {
            display: block;
            margin-bottom: 5px;
        }
        .config-input input, .config-input select {
            width: 100%;
            padding: 5px;
            background-color: #3c3c3c;
            color: #ffffff;
            border: none;
            border-radius: 3px;
        }
        .message {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            max-width: 80%;
        }
        .user-message {
            background-color: #264f78;
            align-self: flex-end;
        }
        .bot-message {
            background-color: #3c3c3c;
            align-self: flex-start;
        }
        #image-preview {
            max-width: 200px;
            max-height: 200px;
            margin-top: 10px;
            border-radius: 5px;
        }
        .app-title {
            font-size: 24px;
            font-weight: 500;
            margin-bottom: 20px;
        }
        pre {
            background-color: #1e1e1e;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
        code {
            font-family: 'Courier New', Courier, monospace;
        }
        .chat-list {
            margin-top: 20px;
            margin-bottom: 20px;
            flex-grow: 1;
            overflow-y: auto;
        }
        .chat-list-item {
            cursor: pointer;
            padding: 5px;
            margin-bottom: 5px;
            background-color: #3c3c3c;
            border-radius: 3px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .chat-list-item:hover {
            background-color: #4c4c4c;
        }
        .chat-list-item .delete-chat {
            color: #ff4444;
            cursor: pointer;
        }
        .chat-list-item .delete-chat:hover {
            color: #ff0000;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="app-title">MIYA Chat</div>
        <div class="config-input">
            <label for="aws-region">AWS Region:</label>
            <input type="text" id="aws-region" value="us-east-1">
        </div>
        <div class="config-input">
            <label for="profile-name">Profile Name:</label>
            <input type="text" id="profile-name" value="ziya">
        </div>
        <div class="config-input">
            <label for="model-id">Model:</label>
            <select id="model-id">
                <option value="anthropic.claude-3-sonnet-20240229-v1:0">Claude 3</option>
                <option value="anthropic.claude-3-5-sonnet-20240620-v1:0">Claude 3.5</option>
            </select>
        </div>
        <button id="new-chat-btn">New Chat</button>
        <div class="chat-list" id="chat-list"></div>
        <button id="clear-all-chats-btn">Clear All Chats</button>
    </div>
    <div class="main-content">
        <div class="chat-container" id="chat-container"></div>
        <div class="input-container">
            <textarea id="user-input" placeholder="Send a message..."></textarea>
            <button id="send-btn">Send</button>
            <input type="file" id="file-input" accept="image/*" style="display: none;">
            <button id="upload-btn">Upload Image</button>
        </div>
        <img id="image-preview" style="display: none;">
    </div>

    <script>
        $(document).ready(function() {
            var uploadedImage = null;
            var currentChatId = null;

            marked.setOptions({
                highlight: function (code, language) {
                    const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
                    return hljs.highlight(validLanguage, code).value;
                }
            });

            function addMessage(sender, message, isUser = false) {
                var messageClass = isUser ? 'user-message' : 'bot-message';
                var renderedMessage = isUser ? message : marked.parse(message);
                $('#chat-container').append(`<div class="message ${messageClass}"><strong>${sender}:</strong> ${renderedMessage}</div>`);
                $('#chat-container').scrollTop($('#chat-container')[0].scrollHeight);
                
                if (!isUser) {
                    $('pre code').each(function(i, block) {
                        hljs.highlightBlock(block);
                    });
                }
            }

            function sendMessageWithImage() {
                var message = $('#user-input').val();
                if (message || uploadedImage) {
                    var formData = new FormData();
                    formData.append('message', message);
                    formData.append('aws_region', $('#aws-region').val());
                    formData.append('profile_name', $('#profile-name').val());
                    formData.append('model_id', $('#model-id').val());
                    formData.append('chat_id', currentChatId);
                    if (uploadedImage) {
                        formData.append('image', uploadedImage);
                    }

                    addMessage('You', message + (uploadedImage ? ' [Image attached]' : ''), true);

                    $.ajax({
                        url: '/chat',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            addMessage('AI', data.response);
                            loadChatList();
                        }
                    });

                    $('#user-input').val('');
                    $('#image-preview').hide();
                    uploadedImage = null;
                }
            }

            function loadChatList() {
                $.get('/get_chat_history', function(data) {
                    $('#chat-list').empty();
                    for (var chatId in data) {
                        var firstMessage = data[chatId][0].content;
                        var preview = firstMessage.length > 30 ? firstMessage.substring(0, 30) + '...' : firstMessage;
                        $('#chat-list').append(`
                            <div class="chat-list-item" data-chat-id="${chatId}">
                                <span class="chat-preview">${preview}</span>
                                <span class="delete-chat" data-chat-id="${chatId}">×</span>
                            </div>
                        `);
                    }
                });
            }

            function loadChat(chatId) {
                currentChatId = chatId;
                $('#chat-container').empty();
                $.get('/get_chat_history', function(data) {
                    if (data[chatId]) {
                        data[chatId].forEach(function(message) {
                            addMessage(message.role === 'user' ? 'You' : 'AI', message.content, message.role === 'user');
                        });
                    }
                });
            }

            $('#send-btn').click(sendMessageWithImage);

            $('#upload-btn').click(function() {
                $('#file-input').click();
            });

            $('#file-input').change(function() {
                uploadedImage = this.files[0];
                if (uploadedImage) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#image-preview').attr('src', e.target.result).show();
                    }
                    reader.readAsDataURL(uploadedImage);
                    addMessage('System', 'Image uploaded and ready to send');
                }
            });

            $('#user-input').keydown(function(e) {
                if (e.ctrlKey && e.keyCode == 13) {
                    sendMessageWithImage();
                }
            });

            $('#new-chat-btn').click(function() {
                currentChatId = Date.now().toString();
                $('#chat-container').empty();
                loadChatList();
            });

            $('#clear-all-chats-btn').click(function() {
                if (confirm('Are you sure you want to clear all chats?')) {
                    $.post('/clear_all_chats', function(data) {
                        $('#chat-list').empty();
                        $('#chat-container').empty();
                        currentChatId = null;
                    });
                }
            });

            $(document).on('click', '.chat-list-item', function(e) {
                if (!$(e.target).hasClass('delete-chat')) {
                    var chatId = $(this).data('chat-id');
                    loadChat(chatId);
                }
            });

            $(document).on('click', '.delete-chat', function(e) {
                e.stopPropagation();
                var chatId = $(this).data('chat-id');
                if (confirm('Are you sure you want to delete this chat?')) {
                    $.post('/delete_chat', { chat_id: chatId }, function(data) {
                        loadChatList();
                        if (currentChatId === chatId) {
                            $('#chat-container').empty();
                            currentChatId = null;
                        }
                    });
                }
            });

            // Initialize
            loadChatList();
            $('#new-chat-btn').click();
        });
    </script>
</body>
</html>