<!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: linear-gradient(135deg, #1f1c2c 0%, #928dab 100%);
            font-family: 'Roboto', sans-serif;
            color: #ffffff;
            overflow: hidden;
        }
        .chat-container {
            position: relative;
            width: 90%;
            max-width: 800px;
            height: 90vh;
            margin: 5vh auto;
            display: flex;
            flex-direction: column;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 20px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        }
        /* 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.3);
            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: rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }
        .bot-message {
            align-self: flex-start;
            background: rgba(255, 255, 255, 0.15);
            color: #ffffff;
        }
        .message-content {
            white-space: pre-wrap;
        }
        /* Code block styling */
        .code-block {
            background-color: rgba(0, 0, 0, 0.6);
            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.3);
            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.5);
        }
        /* Input area styling */
        .input-container {
            display: flex;
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.3);
        }
        .input-container input {
            flex: 1;
            padding: 15px;
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            outline: none;
            margin-right: 10px;
            transition: background-color 0.3s ease;
        }
        .input-container input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        .input-container input:focus {
            background: rgba(255, 255, 255, 0.3);
        }
        .input-container button {
            padding: 0 20px;
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }
        .input-container button:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        /* 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;
        }
        @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%;
            }
        }
        /* 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="chat-container">
        <div id="chat-window"></div>
        <div class="input-container">
            <input type="text" id="user-input" placeholder="Type a message..." autocomplete="off" />
            <button id="send-button">Send</button>
        </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');

        sendButton.addEventListener('click', sendMessage);
        userInput.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                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;

            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 })
            })
            .then(response => response.json())
            .then(data => {
                // Remove typing indicator
                chatWindow.removeChild(typingIndicator);

                if (data.response) {
                    addMessage('bot', data.response);
                } else {
                    addMessage('bot', 'Error: ' + data.error);
                }
            })
            .catch(error => {
                // Remove typing indicator
                chatWindow.removeChild(typingIndicator);

                addMessage('bot', 'Error: ' + error);
            });
        }
    </script>
</body>
</html>

Make chatbot in dark-grey styles, fix issue when i'm pasting text into my input field and it's not wrapping (also i can't use SHIFT + ENTER to add new line), fix that, expand chat window on all screen but in left add chat history vertical menu (not implemented right now, just add the design)