Spaces:

poemsforaphrodite
/

bot

Sleeping

bot

File size: 8,655 Bytes

2b0379e

<!DOCTYPE html>
<html>
<head>
    <title>SmartlyQ Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root {
            --primary-color: #4F46E5;
            --primary-hover: #4338CA;
            --bg-color: #F9FAFB;
            --user-msg-bg: #EEF2FF;
            --bot-msg-bg: #ffffff;
            --text-primary: #111827;
            --text-secondary: #6B7280;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            margin: 0;
            background-color: var(--bg-color);
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: white;
            padding: 1rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .header h1 {
            font-size: 1.5rem;
            color: var(--text-primary);
            font-weight: 600;
        }

        #chat-container {
            flex: 1;
            padding: 1.5rem;
            overflow-y: auto;
            scroll-behavior: smooth;
            background: var(--bg-color);
        }

        .message {
            margin: 1rem 0;
            max-width: 80%;
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .message-content {
            padding: 1rem;
            border-radius: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            line-height: 1.5;
        }

        .message-timestamp {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
            margin-left: 0.5rem;
        }

        .user-message {
            margin-left: auto;
        }

        .bot-message {
            margin-right: auto;
        }

        .user-message .message-content {
            background: var(--user-msg-bg);
            color: var(--text-primary);
        }

        .bot-message .message-content {
            background: var(--bot-msg-bg);
            color: var(--text-primary);
        }

        #input-container {
            background: white;
            padding: 1rem;
            box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
            position: sticky;
            bottom: 0;
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }

        #query-input {
            flex: 1;
            padding: 0.75rem 1rem;
            border: 2px solid #E5E7EB;
            border-radius: 0.75rem;
            font-size: 1rem;
            transition: border-color 0.2s ease;
            outline: none;
        }

        #query-input:focus {
            border-color: var(--primary-color);
        }

        #send-button {
            padding: 0.75rem 1.5rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 0.75rem;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.2s ease, transform 0.1s ease;
        }

        #send-button:hover {
            background-color: var(--primary-hover);
        }

        #send-button:active {
            transform: scale(0.98);
        }

        #send-button:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .typing-indicator {
            display: flex;
            gap: 0.5rem;
            padding: 1rem;
            background: var(--bot-msg-bg);
            border-radius: 1rem;
            width: fit-content;
            margin: 1rem 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .typing-dot {
            width: 8px;
            height: 8px;
            background: var(--text-secondary);
            border-radius: 50%;
            animation: typingAnimation 1.4s infinite;
        }

        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typingAnimation {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-4px); }
        }

        @media (max-width: 640px) {
            .message {
                max-width: 90%;
            }
            
            #input-container {
                padding: 0.75rem;
            }
            
            #send-button {
                padding: 0.75rem 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>SmartlyQ Assistant</h1>
    </div>
    <div id="chat-container"></div>
    <div id="input-container">
        <input type="text" id="query-input" placeholder="Type your message...">
        <button id="send-button">Send</button>
    </div>

    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const botId = urlParams.get('botid');
        const chatContainer = document.getElementById('chat-container');
        const queryInput = document.getElementById('query-input');
        const sendButton = document.getElementById('send-button');

        function getTimestamp() {
            return new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        }

        function createTypingIndicator() {
            const indicator = document.createElement('div');
            indicator.className = 'typing-indicator';
            indicator.innerHTML = `
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
            `;
            return indicator;
        }

        function addMessage(text, isUser) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
            
            const messageContent = document.createElement('div');
            messageContent.className = 'message-content';
            messageContent.textContent = text;
            
            const timestamp = document.createElement('div');
            timestamp.className = 'message-timestamp';
            timestamp.textContent = getTimestamp();
            
            messageDiv.appendChild(messageContent);
            messageDiv.appendChild(timestamp);
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        async function sendQuery() {
            const query = queryInput.value.trim();
            if (!query) return;

            addMessage(query, true);
            queryInput.value = '';
            queryInput.disabled = true;
            sendButton.disabled = true;

            // Add typing indicator
            const typingIndicator = createTypingIndicator();
            chatContainer.appendChild(typingIndicator);
            chatContainer.scrollTop = chatContainer.scrollHeight;

            try {
                const formData = new FormData();
                formData.append('botid', botId);
                formData.append('query', query);

                const response = await fetch('/query', {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();
                // Remove typing indicator
                typingIndicator.remove();
                
                if (data.error) {
                    addMessage(`Error: ${data.error}`, false);
                } else {
                    addMessage(data.response, false);
                }
            } catch (error) {
                // Remove typing indicator
                typingIndicator.remove();
                addMessage('Sorry, there was an error processing your request.', false);
            }

            queryInput.disabled = false;
            sendButton.disabled = false;
            queryInput.focus();
        }

        // Add welcome message
        window.addEventListener('load', () => {
            addMessage("👋 Hi! I'm your SmartlyQ Assistant. How can I help you today?", false);
        });

        sendButton.addEventListener('click', sendQuery);
        queryInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendQuery();
        });
    </script>
</body>
</html>