У меня есть скрипт, сделай, пожалуйста, чтобы вывод был верным, например ** это жирный шрифт, когда перенос текста идёт, у меня также, чтобы оформлено было согласно правилам вывод. убери мыслительный процес, потому что он автоматически выводится в сообщении.
Не допускай ошибок, чтобы не было такого, что переносится или пробел не ставится там где не нужно.
И когда печатает ИИ сообщение, чтобы страница опускалась вниз и я мог видеть. Название модели и другие функции НЕ меняй!

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Персональный чат с ИИ</title>
    <style>
        body {
            display: flex;
            margin: 0;
            font-family: Arial, sans-serif;
            height: 100vh;
            overflow: hidden;
        }
        /* Стили для левой панели с чатами */
        .chat-list {
            width: 250px;
            background-color: #2c3e50;
            color: #ecf0f1;
            overflow-y: auto;
        }
        .chat-list h2 {
            text-align: center;
            padding: 10px 0;
            margin: 0;
            background-color: #34495e;
        }
        .chat-item {
            padding: 15px;
            cursor: pointer;
            border-bottom: 1px solid #34495e;
        }
        .chat-item:hover, .chat-item.active {
            background-color: #1abc9c;
        }
        .new-chat {
            padding: 15px;
            text-align: center;
            background-color: #16a085;
            cursor: pointer;
        }
        .new-chat:hover {
            background-color: #1abc9c;
        }
        /* Стили для основного окна чата */
        .chat-window {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .chat-header {
            background-color: #3498db;
            padding: 10px;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .chat-header button {
            padding: 5px 10px;
            background-color: #2980b9;
            border: none;
            color: #fff;
            cursor: pointer;
        }
        .chat-header button:hover {
            background-color: #1abc9c;
        }
        .chat-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #ecf0f1;
        }
        .message {
            margin-bottom: 15px;
        }
        .message.user .text {
            background-color: #d1f2eb;
            align-self: flex-end;
        }
        .message.ai .text {
            background-color: #f0d7d7;
            align-self: flex-start;
        }
        .text {
            max-width: 60%;
            padding: 10px;
            border-radius: 10px;
            display: inline-block;
        }
        .chat-input {
            display: flex;
            padding: 10px;
            background-color: #bdc3c7;
        }
        .chat-input textarea {
            flex: 1;
            resize: none;
            padding: 10px;
            border: none;
            border-radius: 5px;
        }
        .chat-input button {
            margin-left: 10px;
            padding: 10px 20px;
            background-color: #27ae60;
            border: none;
            color: #fff;
            cursor: pointer;
            border-radius: 5px;
        }
        .chat-input button:hover {
            background-color: #2ecc71;
        }
        .thinking-process {
            background-color: #f9e79f;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 5px;
            display: none;
        }
    </style>
</head>
<body>

    <!-- Левая панель с чатами -->
    <div class="chat-list">
        <h2>Мои чаты</h2>
        <div id="chats"></div>
        <div class="new-chat" onclick="createNewChat()">+ Новый чат</div>
    </div>

    <!-- Основное окно чата -->
    <div class="chat-window">
        <div class="chat-header">
            <div id="chat-title">Выберите чат</div>
            <button onclick="toggleThinkingProcess()">Показать мыслительный процесс</button>
        </div>
        <div class="chat-content" id="chat-content">
            <!-- Сообщения будут добавляться здесь -->
        </div>
        <div class="chat-input">
            <textarea id="user-input" rows="2" placeholder="Введите сообщение..."></textarea>
            <button onclick="sendMessage()">Отправить</button>
        </div>
    </div>

    <!-- Подключение JavaScript -->
    <script>
        let chats = {};
        let currentChatId = null;
        let showThinking = false;

        function createNewChat() {
            const chatId = 'chat_' + new Date().getTime();
            chats[chatId] = {
                messages: []
            };
            currentChatId = chatId;
            renderChatList();
            renderChatWindow();
        }

        function selectChat(chatId) {
            currentChatId = chatId;
            renderChatList();
            renderChatWindow();
        }

        function renderChatList() {
            const chatsDiv = document.getElementById('chats');
            chatsDiv.innerHTML = '';
            for (let chatId in chats) {
                const chatItem = document.createElement('div');
                chatItem.className = 'chat-item' + (chatId === currentChatId ? ' active' : '');
                chatItem.innerText = 'Чат ' + chatId.split('_')[1];
                chatItem.onclick = () => selectChat(chatId);
                chatsDiv.appendChild(chatItem);
            }
        }

        function renderChatWindow() {
            const chatContent = document.getElementById('chat-content');
            const chatTitle = document.getElementById('chat-title');
            chatContent.innerHTML = '';
            if (currentChatId) {
                chatTitle.innerText = 'Чат ' + currentChatId.split('_')[1];
                const chat = chats[currentChatId];
                chat.messages.forEach(message => {
                    const messageDiv = document.createElement('div');
                    messageDiv.className = 'message ' + message.sender;
                    const textDiv = document.createElement('div');
                    textDiv.className = 'text';
                    textDiv.innerHTML = message.text;
                    messageDiv.appendChild(textDiv);
                    chatContent.appendChild(messageDiv);
                });
            } else {
                chatTitle.innerText = 'Выберите чат';
            }
        }

        function sendMessage() {
            const input = document.getElementById('user-input');
            const text = input.value.trim();
            if (text && currentChatId) {
                const chat = chats[currentChatId];
                chat.messages.push({ sender: 'user', text: text });
                input.value = '';
                renderChatWindow();
                getAIResponse(text);
            }
        }

        async function getAIResponse(userText) {
            const chat = chats[currentChatId];
            // Добавляем сообщение о мыслительном процессе, если он включен
            let thinkingDiv;
            if (showThinking) {
                thinkingDiv = document.createElement('div');
                thinkingDiv.className = 'thinking-process';
                thinkingDiv.innerText = 'ИИ обдумывает...';
                document.getElementById('chat-content').appendChild(thinkingDiv);
            }

            // Отправляем запрос к API
            const apiUrl = 'https://openaio1api.com/v1/chat/completions';
            try {
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer YOUR_API_KEY' // Замените на ваш API-ключ
                    },
                    body: JSON.stringify({
                        model: 'o1-preview',
                        messages: chat.messages.map(msg => ({
                            role: msg.sender === 'user' ? 'user' : 'assistant',
                            content: msg.text
                        })),
                        stream: true
                    })
                });

                if (!response.ok) {
                    throw new Error('Сетевая ошибка: ' + response.status);
                }

                const reader = response.body.getReader();
                const decoder = new TextDecoder('utf-8');
                let aiMessage = '';
                let done = false;

                while (!done) {
                    const { value, done: readerDone } = await reader.read();
                    done = readerDone;
                    if (value) {
                        const chunk = decoder.decode(value);
                        const lines = chunk.split('\n').filter(line => line.trim() !== '');
                        for (const line of lines) {
                            if (line.startsWith('data: ')) {
                                const data = line.slice(6);
                                if (data === '[DONE]') {
                                    done = true;
                                    break;
                                }
                                try {
                                    const json = JSON.parse(data);
                                    const content = json.choices[0].delta.content;
                                    if (content) {
                                        aiMessage += content;
                                        renderStreamingMessage(aiMessage);
                                    }
                                    // Обработка мыслительного процесса
                                    if (json.thinking_process && showThinking) {
                                        thinkingDiv.innerText = json.thinking_process;
                                    }
                                } catch (e) {
                                    console.error('Ошибка парсинга JSON:', e);
                                }
                            }
                        }
                    }
                }

                // Удаляем "ИИ обдумывает...", если оно отображается
                if (thinkingDiv) {
                    thinkingDiv.style.display = 'none';
                }
                // Сохраняем окончательный ответ
                chat.messages.push({ sender: 'ai', text: aiMessage });
                renderChatWindow();

            } catch (error) {
                console.error('Ошибка получения ответа от API:', error);
            }
        }

        function renderStreamingMessage(aiMessage) {
            const chatContent = document.getElementById('chat-content');
            // Проверяем, есть ли уже сообщение от ИИ в процессе
            let lastMessageDiv = chatContent.querySelector('.message.ai.streaming');
            if (!lastMessageDiv) {
                lastMessageDiv = document.createElement('div');
                lastMessageDiv.className = 'message ai streaming';
                const textDiv = document.createElement('div');
                textDiv.className = 'text';
                lastMessageDiv.appendChild(textDiv);
                chatContent.appendChild(lastMessageDiv);
                chatContent.scrollTop = chatContent.scrollHeight;
            }
            lastMessageDiv.querySelector('.text').innerHTML = aiMessage;
        }

        function toggleThinkingProcess() {
            showThinking = !showThinking;
            const button = document.querySelector('.chat-header button');
            button.innerText = showThinking ? 'Скрыть мыслительный процесс' : 'Показать мыслительный процесс';
        }

        // Инициализируем первый чат при загрузке страницы
        window.onload = () => {
            createNewChat();
        };
    </script>
</body>
</html>