from flask import Flask, request, jsonify, session, send_from_directory
from flask_cors import CORS
from gradio_client import Client
import secrets

app = Flask(__name__)
CORS(app)

app.secret_key = secrets.token_hex(16)

client = Client("yuntian-deng/o1")

@app.route('/')
def index():
    return send_from_directory('static', 'index.html')

@app.route('/chat', methods=['POST'])
def chat():
    user_input = request.json.get('message')

    if not user_input:
        return jsonify({'error': 'No message provided'}), 400

    if 'chat_history' not in session:
        session['chat_history'] = []
        session['chat_counter'] = 0

    chat_history = session['chat_history']
    chat_counter = session['chat_counter']

    try:
        response = client.predict(
            inputs=user_input,
            top_p=1,
            temperature=1,
            chat_counter=chat_counter,
            chatbot=chat_history,
            api_name="/predict"
        )

        chatbot_response, chat_counter_updated, status_code, reset_input = response

        session['chat_history'] = chatbot_response
        session['chat_counter'] = chat_counter_updated

        bot_reply = chatbot_response[-1][1]

        return jsonify({'response': bot_reply})

    except Exception as e:
        return jsonify({'error': str(e)}), 500

if __name__ == '__main__':
    app.run(debug=True)

I have this code (app.py) and this:
<!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: #1e1e1e;
            font-family: 'Roboto', sans-serif;
            color: #e0e0e0;
            overflow: hidden;
        }
        /* Flex container to hold chat history and chat area */
        .main-container {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }
        /* Chat history styles (design only) */
        .chat-history {
            width: 250px;
            background: #2a2a2a;
            border-right: 1px solid #3c3c3c;
            padding: 20px;
        }
        .chat-history h2 {
            margin-bottom: 20px;
            color: #fff;
            font-weight: normal;
            font-size: 18px;
        }
        .chat-history ul {
            list-style: none;
        }
        .chat-history li {
            padding: 10px;
            margin-bottom: 10px;
            background: #333;
            border-radius: 5px;
            cursor: pointer;
            color: #ccc;
            transition: background-color 0.3s;
        }
        .chat-history li:hover {
            background: #444;
        }
        /* Chat container styles */
        .chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: #1e1e1e;
            overflow: hidden;
        }
        /* 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.1);
            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: #3a3a3a;
            color: #ffffff;
        }
        .bot-message {
            align-self: flex-start;
            background: #2a2a2a;
            color: #ffffff;
        }
        .message-content {
            white-space: pre-wrap;
        }
        /* Code block styling */
        .code-block {
            background-color: #121212;
            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.1);
            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.2);
        }
        /* Input area styling */
        .input-container {
            display: flex;
            padding: 15px 20px;
            background: #1e1e1e;
            border-top: 1px solid #3c3c3c;
            align-items: center;
        }
        .input-container textarea {
            flex: 1;
            padding: 12px 20px;
            background: #2a2a2a;
            color: #ffffff;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            outline: none;
            margin-right: 10px;
            resize: none;
            max-height: 150px;
            overflow-y: auto;
            line-height: 1.5;
            font-family: 'Roboto', sans-serif;
        }
        .input-container textarea::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        .send-button {
            background: #2a2a2a;
            color: #ffffff;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s ease, transform 0.1s ease;
        }
        .send-button:hover {
            background: #3a3a3a;
        }
        .send-button:active {
            transform: scale(0.95);
        }
        /* Send icon */
        .send-icon {
            width: 24px;
            height: 24px;
            fill: #ffffff;
        }
        /* 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%;
            }
            .chat-history {
                display: none;
            }
        }
        /* 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="main-container">
        <!-- Chat History Menu (Design Only) -->
        <div class="chat-history">
            <h2>Chat History</h2>
            <ul>
                <li>Chat 1</li>
                <li>Chat 2</li>
                <li>Chat 3</li>
                <!-- ... -->
            </ul>
        </div>
        <!-- Chat Container -->
        <div class="chat-container">
            <div id="chat-window"></div>
            <div class="input-container">
                <textarea id="user-input" placeholder="Type a message..." autocomplete="off"></textarea>
                <button id="send-button" class="send-button">
                    <!-- Send Icon -->
                    <svg class="send-icon" viewBox="0 0 24 24">
                        <path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>
                    </svg>
                </button>
            </div>
        </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('keydown', function(event) {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault(); // Prevent newline
                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>

I want implement chat history system that fully work, if possible, provide full code