Embed

<div id="yandex_rtb_R-A-13738993-5"></div>
<script>
window.yaContextCb.push(() => {
    Ya.Context.AdvManager.render({
        "blockId": "R-A-13738993-5",
        "renderTo": "yandex_rtb_R-A-13738993-5"
    })
})
</script>

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="theme-color" content="rgb(249, 250, 251)" />
    <style>
        /* Оставляем ширину iframe без изменений */
        iframe {
            width: 120%;
            height: 100vh; /* Устанавливаем высоту на 100% от высоты окна браузера */
        }
    </style>
    <script>
        if (
            localStorage.theme === "dark" ||
            (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
        ) {
            document.documentElement.classList.add("dark");
            document
                .querySelector('meta[name="theme-color"]')
                .setAttribute("content", "rgb(26, 36, 50)");
        }

        window.gaId = "G-8Q63TH4CSL";
    </script>
    <script>
        function copyToClipboard(text) {
            const el = document.createElement('textarea');
            el.value = text;
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
            alert('Code copied to clipboard!');
        }

        function addCopyButton() {
            const chatMessage = document.querySelector('.chat-message');
            if (chatMessage) {
                const codeElement = chatMessage.querySelector('code');
                if (codeElement) {
                    const copyButton = document.createElement('button');
                    copyButton.classList.add('copy-button');
                    copyButton.textContent = 'Copy';
                    copyButton.addEventListener('click', function() {
                        copyToClipboard(codeElement.textContent);
                    });
                    chatMessage.appendChild(copyButton);
                }
            }
        }

        window.addEventListener('DOMContentLoaded', addCopyButton);
    </script>
    <style>
        .chat-message .copy-button {
            background-color: #e0e0e0;
            color: #333;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    

    
    <iframe src="https://ai-chatterbox.ru:3004/" frameborder="0"></iframe>
</body>
</html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Support Widget</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #121212; /* Темный фон */
            color: #c0c0c0; /* Серый текст */
            margin: 0;
            padding: 0;
        }
        #widget-container {
            width: 840px;
            background-color: #1e1e1e; /* Темный фон для виджета */
            border: 1px solid #333333; /* Темная граница */
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            height: 540px;
            overflow: hidden;
            margin: 0 auto; /* Центрируем виджет */
        }
        #widget-header {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #2b2b2b; /* Темный фон заголовка */
            border-bottom: 1px solid #444444;
            position: relative;
        }
        #widget-header img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            border-radius: 50%;
        }
        .title-container {
            display: flex;
            align-items: center;
        }
        .title {
            font-size: 18px;
            color: #c0c0c0; /* Серый текст */
            display: flex;
            flex-direction: column;
            margin-right: 20px;
        }
        .online-text {
            font-size: 12px;
            color: #8f8f8f; /* Светло-серый текст */
            margin-top: 5px;
            display: flex;
            align-items: center;
        }
        .online-indicator {
            width: 12px;
            height: 12px;
            background-color: green;
            border-radius: 50%;
            margin-left: 5px;
        }
        #messages {
            flex-grow: 1;
            overflow-y: auto;
            padding: 10px;
            border-bottom: 1px solid #444444;
            background-color: #1e1e1e; /* Темный фон сообщений */
            color: #c0c0c0; /* Серый текст сообщений */
        }
        #inputArea {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #2b2b2b; /* Темный фон ввода */
            border-top: 1px solid #444444;
        }
        #messageInput {
            flex: 1;
            padding: 10px;
            border: 1px solid #555555;
            border-radius: 4px;
            background-color: #1e1e1e; /* Темный фон поля ввода */
            color: #c0c0c0; /* Серый текст */
            margin-right: 10px;
        }
        #sendButton {
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.2); /* Темно-прозрачный фон */
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #sendButton:hover {
            background-color: rgba(255, 255, 255, 0.4); /* Светлее при наведении */
        }
        .message {
            margin-bottom: 10px;
            display: flex;
            justify-content: flex-start;
            position: relative;
        }
        .message.sent {
            justify-content: flex-end;
        }
        .message img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        .message .text {
            background-color: #333333; /* Темный фон сообщений */
            padding: 10px;
            border-radius: 4px;
            max-width: 70%;
            word-break: break-word;
            color: #c0c0c0; /* Серый текст */
        }
        .copy-button {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 4px;
            font-size: 12px;
            padding: 2px 5px;
            cursor: pointer;
            display: none;
        }
        .message:hover .copy-button {
            display: block;
        }

        /* Мобильная версия */
        @media (max-width: 600px) {
            #widget-container {
                width: 100%;
                height: 90vh;
                bottom: 0;
                right: 0;
                border-radius: 0;
            }
            #messages {
                height: calc(90vh - 110px);
                overflow-y: auto;
            }
            #inputArea {
                flex-direction: column;
                padding: 5px;
            }
            #messageInput {
                font-size: 14px;
                margin-right: 0;
                margin-bottom: 5px;
            }
            #sendButton {
                font-size: 14px;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div id="widget-container">
        <div id="widget-header">
            <div class="title-container">
                <img src="https://i.postimg.cc/6pLLh6gs/mstile-144x144.png" alt="Bot Icon">
                <div class="title">
                    AI assistant 
                    <span class="online-text">
                        Online
                        <div class="online-indicator"></div>
                    </span>
                </div>
            </div>
        </div>
        <div id="messages"></div>
        <div id="inputArea">
            <input type="text" id="messageInput" placeholder="Type your message...">
            <button id="sendButton">Send</button>
        </div>
    </div>

    <script>
        const widgetContainer = document.getElementById('widget-container');
        const sendButton = document.getElementById('sendButton');
        const messageInput = document.getElementById('messageInput');
        const messagesDiv = document.getElementById('messages');

        function escapeHtml(text) {
            return text.replace(/&/g, '&amp;')
                       .replace(/</g, '&lt;')
                       .replace(/>/g, '&gt;')
                       .replace(/"/g, '&quot;')
                       .replace(/'/g, '&#039;');
        }

        function decodeHtml(html) {
            const txt = document.createElement('textarea');
            txt.innerHTML = html;
            return txt.value;
        }

        function appendMessage(content, sender) {
            const messageElement = document.createElement('div');
            messageElement.className = 'message ' + (sender === 'You' ? 'sent' : 'received');

            const imgElement = document.createElement('img');
            imgElement.src = sender === 'You' 
                ? 'https://i.postimg.cc/BvTKFGDk/android-icon-96x96.png' 
                : 'https://i.postimg.cc/6pLLh6gs/mstile-144x144.png';
            imgElement.style.borderRadius = '50%';

            const textElement = document.createElement('div');
            textElement.className = 'text';
            textElement.textContent = decodeHtml(content);

            const copyButton = document.createElement('button');
            copyButton.className = 'copy-button';
            copyButton.textContent = 'Copy';
            copyButton.addEventListener('click', () => {
                navigator.clipboard.writeText(content);
            });

            messageElement.appendChild(imgElement);
            messageElement.appendChild(textElement);
            messageElement.appendChild(copyButton);
            messagesDiv.appendChild(messageElement);

            messagesDiv.scrollTop = messagesDiv.scrollHeight; // Auto scroll to the bottom
        }

        sendButton.addEventListener('click', async () => {
            const userMessage = messageInput.value.trim();
            if (userMessage !== '') {
                appendMessage(userMessage, 'You');
                messageInput.value = '';

                try {
                    const response = await fetch('https://ai-chatterbox.ru/chat/', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ user_id: 'some_unique_user_id', message: userMessage })
                    });
                    const data = await response.json();
                    appendMessage(data.response, 'Bot');
                } catch (error) {
                    console.error('Error:', error);
                }
            }
        });

        messageInput.addEventListener('keydown', (event) => {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault();
                sendButton.click();
            }
        });

        window.addEventListener('load', () => {
            const greetingMessage = "Hello! Welcome to our chat. Would you like me to generate a prompt for creating an image?";
            appendMessage(greetingMessage, 'Bot');

            setTimeout(() => {
                const followUpMessage = "Send me: Write a prompt to generate a piece of art. To create an image, click 'Start creating!'";
                appendMessage(followUpMessage, 'Bot');
            }, 5000);
        });
    </script>
</body>
</html>

No AI Artificial Intelligence, Ban AI, Stop AI, Technology, Robot, Futuristic, Data Science, Data Analytics, A.I.