Привет. Помоги пожалуйста максимально доработать адекватно этот код, чтобы общение с моделью было максимально удобно. 
```<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Chat with Claude</title>
    <script src="https://js.puter.com/v2/"></script>
    <style>
        #chatHistory {
            width: 95%; /* Ширина окна чата */
            height: 80vh; /* Высота окна чата */
            max-width: 1000px;
            overflow-y: scroll;
            border: 1px solid black;
            padding: 10px;
            margin: 0 auto; /* Центрируем окно по горизонтали */

        }
        .message {
            margin-bottom: 10px;
            padding: 8px 12px;
            border-radius: 10px;
            clear: both;
        }
        .userMessage {
            background-color: #DCF8C6;
            float: right;
        }
        .claudeMessage {
            background-color: #E0E0E0;
            float: left;
        }
        .avatar {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            font-weight: bold;
            margin-right: 5px;
        }
        .userAvatar {
            background-color: #0F9D58;
            color: white;
        }
        .claudeAvatar {
            background-color: #4285F4;
            color: white;
        }
        pre {
            background-color: #f5f5f5;
            padding: 5px;
            border-radius: 5px;
            overflow-x: auto;
            white-space: pre-wrap;
            font-family: monospace;
        }
        code {
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div id="chatHistory"></div>
    <textarea id="userInput" placeholder="Enter your message here" style="width: 485px; margin-top: 10px;"></textarea>
    <button id="sendButton" style="margin-top: 5px;">Send</button>

    <script>
        const chatHistory = document.getElementById('chatHistory');
        const userInput = document.getElementById('userInput');
        const sendButton = document.getElementById('sendButton');

        async function streamClaudeResponse(userMessage) {
            addToChatHistory("You: " + userMessage, 'user');

            const response = await puter.ai.chat(
                userMessage,
                { model: 'claude-3-5-sonnet', stream: true }
            );

            let claudeResponse = "Claude: ";
            addToChatHistory(claudeResponse, 'claude');
            for await (const part of response) {
                claudeResponse += part?.text;
                updateLastMessage(claudeResponse)
            }
        }

        function addToChatHistory(message, sender) {
            const messageElement = document.createElement('div');
            messageElement.classList.add('message');

            const avatarElement = document.createElement('div');
            avatarElement.classList.add('avatar');
            if (sender === 'user') {
                messageElement.classList.add('userMessage');
                avatarElement.classList.add('userAvatar');
                avatarElement.textContent = 'Y';
            } else {
                messageElement.classList.add('claudeMessage');
                avatarElement.classList.add('claudeAvatar');
                avatarElement.textContent = 'C';
            }
            messageElement.appendChild(avatarElement);

            const textElement = document.createElement('span');
            
            if (message.startsWith("Claude: ```") && message.endsWith("```")) {
                const code = message.substring(message.indexOf("```") + 3, message.lastIndexOf("```"));
                const preElement = document.createElement('pre');
                const codeElement = document.createElement('code');
                codeElement.textContent = code;
                preElement.appendChild(codeElement);
                textElement.appendChild(preElement);
            } else if (message.startsWith("Claude: ")) {
                textElement.textContent = message.replace("Claude: ", "");
            } else {
                textElement.textContent = message;
            }
            messageElement.appendChild(textElement);
            if (sender === "claude") {
                messageElement.id = "lastMessage";
            }

            chatHistory.appendChild(messageElement);
            chatHistory.scrollTop = chatHistory.scrollHeight;
        }

        function updateLastMessage(message) {
            const lastMessage = document.getElementById("lastMessage");
            const codeRegex = /```([\s\S]+?)```/g; // Регулярное выражение для блоков кода
            let formattedText = message.replace("Claude: ", "");
            let lastMatchIndex = 0;
            let newContent = document.createElement('span');
            
            // Проходим по всем блокам кода в сообщении
            for (let match; (match = codeRegex.exec(formattedText)) !== null;) {
                // Добавляем текст, который находится перед блоком кода
                newContent.appendChild(document.createTextNode(formattedText.substring(lastMatchIndex, match.index)));

                // Создаем и добавляем элемент <pre><code></code> для блока кода
                const preElement = document.createElement('pre');
                const codeElement = document.createElement('code');
                codeElement.textContent = match[1]; // Текст внутри блока кода
                preElement.appendChild(codeElement);
                newContent.appendChild(preElement);

                lastMatchIndex = codeRegex.lastIndex;
            }

            // Добавляем оставшийся текст после последнего блока кода
            newContent.appendChild(document.createTextNode(formattedText.substring(lastMatchIndex)));

            // Обновляем содержимое последнего сообщения
            if (lastMessage && lastMessage.classList.contains('claudeMessage')) {
                lastMessage.lastElementChild.replaceWith(newContent);
            } else {
                addToChatHistory(message, 'claude');
            }
        }

        sendButton.addEventListener('click', async () => {
            const userMessage = userInput.value;
            userInput.value = '';
            await streamClaudeResponse(userMessage);
        });
    </script>
</body>
</html>
```