Spaces:

poemsforaphrodite
/

bot

Sleeping

App Files Files Community

poemsforaphrodite commited on 28 days ago

Commit

2b0379e

verified ·

1 Parent(s): ffec92f

Create bot.html

Browse files

Files changed (1) hide show

bot.html +295 -0

bot.html ADDED Viewed

	@@ -0,0 +1,295 @@

+<!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>