記載のコードはAIとロールプレイするためのコードです。
改良点をアドバイスして欲しいです。
※現時点ではUIの方を重点的に固めています。

index.html：
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>実験サイト</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="sidebar">
        <div class="menu-icon" onclick="toggleNewSidebar()">☰</div>
        <div class="sidebar-items">
            <div class="sidebar-item" data-chat-id="chat1"></div>
            <div class="sidebar-item" data-chat-id="chat2"></div>
            <div class="sidebar-item" data-chat-id="chat3"></div>
            <div class="sidebar-item" data-chat-id="chat4"></div>
            <div class="sidebar-item plus">+</div>
        </div>
    </div>

    <div class="new-sidebar" id="newSidebar">
        <div class="new-sidebar-item"></div>
    </div>

    <div class="chat-character-newchat-UI" id="chat1">
        <div class="tabs">
            <div class="tab active" data-content="chat">Chat</div>
            <div class="tab" data-content="character">Character</div>
        </div>
        <div class="content active" id="chat-content">
            <div class="new-chat-button" onclick="addNewChat('chat1')">New Chat</div>
            <ul class="chat-list" id="chat1-list">
                <li class="chat-list-item" data-chat-item-id="chat1-item1">Chat Item 1</li>
            </ul>
        </div>
        <div class="content" id="character-content">
            <textarea class="description-box" placeholder="Description (instruction)"></textarea>
        </div>
    </div>
    <div class="chat-character-newchat-UI" id="chat2">
        <div class="tabs">
            <div class="tab active" data-content="chat">Chat</div>
            <div class="tab" data-content="character">Character</div>
        </div>
        <div class="content active" id="chat-content">
            <div class="new-chat-button" onclick="addNewChat('chat2')">New Chat</div>
            <ul class="chat-list" id="chat2-list">
                <li class="chat-list-item" data-chat-item-id="chat2-item1">Chat Item 1</li>
            </ul>
        </div>
        <div class="content" id="character-content">
            <textarea class="description-box" placeholder="Description (instruction)"></textarea>
        </div>
    </div>
    <div class="chat-character-newchat-UI" id="chat3">
        <div class="tabs">
            <div class="tab active" data-content="chat">Chat</div>
            <div class="tab" data-content="character">Character</div>
        </div>
        <div class="content active" id="chat-content">
            <div class="new-chat-button" onclick="addNewChat('chat3')">New Chat</div>
            <ul class="chat-list" id="chat3-list">
                <li class="chat-list-item" data-chat-item-id="chat3-item1">Chat Item 1</li>
            </ul>
        </div>
        <div class="content" id="character-content">
            <textarea class="description-box" placeholder="Description (instruction)"></textarea>
        </div>
    </div>
    <div class="chat-character-newchat-UI" id="chat4">
        <div class="tabs">
            <div class="tab active" data-content="chat">Chat</div>
            <div class="tab" data-content="character">Character</div>
        </div>
        <div class="content active" id="chat-content">
            <div class="new-chat-button" onclick="addNewChat('chat4')">New Chat</div>
            <ul class="chat-list" id="chat4-list">
                <li class="chat-list-item" data-chat-item-id="chat4-item1">Chat Item 1</li>
            </ul>
        </div>
        <div class="content" id="character-content">
            <textarea class="description-box" placeholder="Description (instruction)"></textarea>
        </div>
    </div>

    <div class="main-content" id="mainContent">
        <div class="chat-area" id="chatArea1"></div>
        <div class="chat-area" id="chatArea2" style="display:none;"></div>
        <div class="chat-area" id="chatArea3" style="display:none;"></div>
        <div class="chat-area" id="chatArea4" style="display:none;"></div>

        <div class="input-area">
            <textarea class="input-box" id="inputBox" placeholder="メッセージを入力..."></textarea>
            <button class="send-button" onclick="sendMessage()">➤</button>
        </div>
    </div>

    <script src="scripts.js"></script>
</body>
</html>

styles.css：
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
    display: flex;
}

.sidebar {
    width: 80px;
    height: 100%;
    background-color: #2c2c2c;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
}

.menu-icon {
    color: white;
    font-size: 24px;
    padding: 20px 0;
    width: 50px;
    height: 20px;
    text-align: center;
    background-color: #2c2c2c;
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: pointer;
}

.sidebar-items {
    overflow-y: auto;
    height: calc(100% - 64px);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
}

.sidebar-item {
    width: 60px;
    height: 60px;
    background-color: #3e3e3e;
    border-radius: 50%;
    margin-bottom: 10px;
    flex-shrink: 0;
    cursor: pointer;
}

.sidebar-item.plus {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    background-color: #2c2c2c;
    border: 2px solid #CECECE;
    border-radius: 50%;
    cursor: pointer;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.sidebar-item.plus:active {
    animation: pulse 0.3s ease;
}

.new-sidebar {
    width: 80px;
    height: 250px;
    background-color: #2c2c2c;
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 101;
    padding: 20px;
    box-sizing: border-box;
    display: none;
}

.new-sidebar.open {
    display: block;
}

.new-sidebar-item {
    width: 60px;
    height: 60px;
    background-color: #3e3e3e;
    border-radius: 15px;
    position: absolute;
    left: 10px;
    top: 20px;
}

.chat-character-newchat-UI {
    width: 0;
    height: 100%;
    background-color: #1c1c1c;
    position: fixed;
    top: 0;
    left: 80px;
    overflow: hidden;
    transition: width 0.3s ease;
    z-index: 3;
    display: flex;
    flex-direction: column;
    color: white;
}

.chat-character-newchat-UI.open {
    width: 300px;
}

.tabs {
    display: flex;
    background-color: #333;
}

.tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    background-color: #444;
    border-bottom: 2px solid transparent;
}

.tab.active {
    border-bottom: 2px solid #00aaff;
    background-color: #555;
}

.content {
    flex: 1;
    padding: 10px;
    display: none;
}

.content.active {
    display: block;
}

.new-chat-button {
    padding: 10px;
    background-color: #00aaff;
    color: white;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.chat-list {
    list-style-type: none;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}

.chat-list-item {
    padding: 10px;
    background-color: #333;
    margin-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.description-box {
    width: 100%;
    height: 100px;
    background-color: #333;
    border: none;
    color: white;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
}

.main-content {
    margin-left: 80px;
    flex: 1;
    display: none;
    flex-direction: column;
    height: 100%;
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
}

.main-content.active {
    display: flex;
}

.chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 165px;
    box-sizing: border-box;
}

.chat-message {
    background-color: #e0e0e0;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    max-width: 60%;
    word-wrap: break-word;
}

.input-area {
    display: flex;
    padding: 20px;
    background-color: #ddd;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
}

.input-box {
    flex: 1;
    padding: 10px;
    border-radius: 20px;
    border: none;
    outline: none;
    resize: none;
    height: 40px;
    box-sizing: border-box;
}

.send-button {
    padding: 10px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: #00aaff;
    color: white;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.send-button:active {
    background-color: #0088cc;
}

scripts.js：
let activeChatId = 'chat1'; // 初期状態でアクティブなチャットを設定
let activeChatItemId = null; // アクティブなチャットアイテムIDを保存

const chatMessages = {}; // 各チャットアイテムのメッセージを保存するオブジェクト

function toggleNewSidebar() {
    const sidebar = document.getElementById('newSidebar');
    sidebar.classList.toggle('open');
}

document.querySelectorAll('.sidebar-item').forEach(item => {
    item.addEventListener('click', function() {
        const chatId = this.getAttribute('data-chat-id');
        if (chatId) {
            document.querySelectorAll('.chat-character-newchat-UI').forEach(chatUI => {
                chatUI.classList.remove('open');
            });

            document.getElementById(chatId).classList.add('open');
            document.getElementById('mainContent').classList.add('active');
            document.querySelectorAll('.chat-area').forEach(area => {
                area.style.display = 'none';
            });
            document.getElementById(`chatArea${chatId.slice(-1)}`).style.display = 'block';
            activeChatId = chatId;

            if (!activeChatItemId) {
                const firstChatItem = document.getElementById(`${chatId}-list`).querySelector('.chat-list-item');
                if (firstChatItem) {
                    firstChatItem.click();
                }
            }
        }
    });
});

document.querySelector('.sidebar-item.plus').addEventListener('click', function() {
    const newSidebarItem = document.createElement('div');
    newSidebarItem.classList.add('sidebar-item');
    const newChatId = `chat${document.querySelectorAll('.sidebar-item').length}`;
    newSidebarItem.setAttribute('data-chat-id', newChatId);
    document.querySelector('.sidebar-items').insertBefore(newSidebarItem, this);

    const newChatUI = document.createElement('div');
    newChatUI.classList.add('chat-character-newchat-UI');
    newChatUI.id = newChatId;

    newChatUI.innerHTML = `
        <div class="tabs">
            <div class="tab active" data-content="chat">Chat</div>
            <div class="tab" data-content="character">Character</div>
        </div>
        <div class="content active" id="chat-content">
            <div class="new-chat-button" onclick="addNewChat('${newChatId}')">New Chat</div>
            <ul class="chat-list" id="${newChatId}-list">
                <li class="chat-list-item" data-chat-item-id="${newChatId}-item1">Chat Item 1</li>
            </ul>
        </div>
        <div class="content" id="character-content">
            <textarea class="description-box" placeholder="Description (instruction)"></textarea>
        </div>
    `;

    document.body.appendChild(newChatUI);

    const newChatArea = document.createElement('div');
    newChatArea.classList.add('chat-area');
    newChatArea.id = `chatArea${newChatId.slice(-1)}`;
    newChatArea.style.display = 'none';
    document.getElementById('mainContent').insertBefore(newChatArea, document.querySelector('.input-area'));

    newSidebarItem.addEventListener('click', function() {
        document.querySelectorAll('.chat-character-newchat-UI').forEach(chatUI => {
            chatUI.classList.remove('open');
        });

        document.getElementById(newChatId).classList.add('open');
        document.getElementById('mainContent').classList.add('active');
        document.querySelectorAll('.chat-area').forEach(area => {
            area.style.display = 'none';
        });
        document.getElementById(`chatArea${newChatId.slice(-1)}`).style.display = 'block';
        activeChatId = newChatId;

        if (!activeChatItemId) {
            const firstChatItem = document.getElementById(`${newChatId}-list`).querySelector('.chat-list-item');
            if (firstChatItem) {
                firstChatItem.click();
            }
        }
    });

    newChatUI.querySelectorAll('.tab').forEach(tab => {
        tab.addEventListener('click', function() {
            const contentId = this.getAttribute('data-content');
            const parent = this.closest('.chat-character-newchat-UI');

            parent.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            parent.querySelectorAll('.content').forEach(c => c.classList.remove('active'));

            this.classList.add('active');
            parent.querySelector(`#${contentId}-content`).classList.add('active');
        });
    });

    newChatUI.querySelector('.chat-list-item').click();
});

function addNewChat(chatId) {
    const chatList = document.getElementById(`${chatId}-list`);
    const newChatItem = document.createElement('li');
    newChatItem.classList.add('chat-list-item');
    const chatItemId = `${chatId}-item${chatList.children.length + 1}`;
    newChatItem.setAttribute('data-chat-item-id', chatItemId);
    newChatItem.textContent = `Chat Item ${chatList.children.length + 1}`;
    chatList.appendChild(newChatItem);

    newChatItem.addEventListener('click', function() {
        const chatItemId = this.getAttribute('data-chat-item-id');
        activeChatItemId = chatItemId;

        const chatArea = document.getElementById(`chatArea${activeChatId.slice(-1)}`);
        chatArea.innerHTML = '';
        if (chatMessages[chatItemId]) {
            chatMessages[chatItemId].forEach(message => {
                const newMessage = document.createElement('div');
                newMessage.classList.add('chat-message');
                newMessage.textContent = message;
                chatArea.appendChild(newMessage);
            });
        }
    });

    newChatItem.click();
}

function sendMessage() {
    const inputBox = document.getElementById('inputBox');
    const chatArea = document.getElementById(`chatArea${activeChatId.slice(-1)}`);
    const message = inputBox.value.trim();

    if (message) {
        const newMessage = document.createElement('div');
        newMessage.classList.add('chat-message');
        newMessage.textContent = message;
        chatArea.appendChild(newMessage);

        chatArea.scrollTop = chatArea.scrollHeight;

        if (!chatMessages[activeChatItemId]) {
            chatMessages[activeChatItemId] = [];
        }
        chatMessages[activeChatItemId].push(message);

        inputBox.value = '';
    }
}

document.addEventListener('click', function(event) {
    if (!event.target.closest('.sidebar-item') && !event.target.closest('.chat-character-newchat-UI')) {
        document.querySelectorAll('.chat-character-newchat-UI').forEach(chatUI => {
            chatUI.classList.remove('open');
        });
    }
});

document.querySelectorAll('.sidebar-item, .chat-character-newchat-UI').forEach(item => {
    item.addEventListener('click', function(event) {
        event.stopPropagation();
    });
});

document.querySelectorAll('.chat-character-newchat-UI .tab').forEach(tab => {
    tab.addEventListener('click', function() {
        const contentId = this.getAttribute('data-content');
        const parent = this.closest('.chat-character-newchat-UI');

        parent.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        parent.querySelectorAll('.content').forEach(c => c.classList.remove('active'));

        this.classList.add('active');
        parent.querySelector(`#${contentId}-content`).classList.add('active');
    });
});

document.querySelectorAll('.chat-list-item').forEach(item => {
    item.addEventListener('click', function() {
        const chatItemId = this.getAttribute('data-chat-item-id');
        activeChatItemId = chatItemId;

        const chatArea = document.getElementById(`chatArea${activeChatId.slice(-1)}`);
        chatArea.innerHTML = '';
        if (chatMessages[chatItemId]) {
            chatMessages[chatItemId].forEach(message => {
                const newMessage = document.createElement('div');
                newMessage.classList.add('chat-message');
                newMessage.textContent = message;
                chatArea.appendChild(newMessage);
            });
        }

        const parent = this.closest('.chat-character-newchat-UI');
        parent.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        parent.querySelectorAll('.content').forEach(c => c.classList.remove('active'));
        parent.querySelector('.tab[data-content="chat"]').classList.add('active');
        parent.querySelector('#chat-content').classList.add('active');
    });
});

let startX = 0;
let isDragging = false;

document.addEventListener('touchstart', function(event) {
    startX = event.touches[0].clientX;
    isDragging = true;
});

document.addEventListener('touchmove', function(event) {
    if (isDragging) {
        const currentX = event.touches[0].clientX;
        const diffX = currentX - startX;

        if (diffX > 50) {
            document.querySelectorAll('.chat-character-newchat-UI').forEach(chatUI => {
                chatUI.classList.add('open');
            });
            isDragging = false;
        }
    }
});

document.addEventListener('touchend', function() {
    isDragging = false;
});

document.querySelector('#chat1 .chat-list-item').click();