Pi Network chatbot - v0 by Vercel

Here is some starter code for you to get going. Note that this code is already talking to a backend using these API calls /v1/app/${APP_ID}/chat/default and /v1/app/${APP_ID}/login to reach to a backend that is responding to the chat requests. Also notice window.Pi.init() and window.Pi.authenticate() javascript functions that are very important in signing in the Pi Network users. This app will be running inside the Pi Browser as a Pi App. You can draw inspiration from the code and use it as starter code. You can rewrite anything you want, but you must never rewrite the above API calls and Pi Network authentication functions at all cost. Keep the relevant comments in your resulting code and strengthen them if you want so that you can remember in subsequent calls to never break this functionality. Here is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI Chatbot</title> <style> /* Base styles for chatbot template - NOT sent to v0 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #ffffff; /* CUSTOMIZABLE: Background color */ } .chat-container { width: 100%; max-width: 600px; height: 80vh; background: white; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.15); display: flex; flex-direction: column; overflow: hidden; } .chat-header { color: white; padding: 20px; text-align: center; background: #8e24aa; /* CUSTOMIZABLE: Primary color */ } .chat-title { font-size: 24px; font-weight: 600; margin-bottom: 4px; } .chat-subtitle { opacity: 0.9; font-size: 14px; } .chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .welcome-box { color: white; padding: 16px; border-radius: 8px; text-align: center; margin-bottom: 16px; background: #8e24aa; /* CUSTOMIZABLE: Primary color */ } .message { display: flex; gap: 12px; align-items: flex-start; } .message.user { flex-direction: row-reverse; } .message-bubble { max-width: 70%; padding: 12px 16px; border-radius: 18px; line-height: 1.4; } .message.bot .message-bubble { background: #f1f3f4; color: #333; } .message.user .message-bubble { background: #8e24aa; /* CUSTOMIZABLE: Primary color */ color: white; } .message-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; } .message.user .message-avatar { background: #e0e0e0; color: #666; } .message.bot .message-avatar { background: #8e24aa; /* CUSTOMIZABLE: Primary color */ color: white; } .chat-input-container { padding: 20px; border-top: 1px solid #e0e0e0; } .input-wrapper { display: flex; gap: 8px; align-items: center; } .chat-input { flex: 1; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 20px; font-size: 16px; outline: none; transition: border-color 0.2s; } .chat-input:focus { border-color: #8e24aa; /* CUSTOMIZABLE: Primary color */ } .send-btn { color: white; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; background: #8e24aa; /* CUSTOMIZABLE: Primary color */ } .send-btn:hover { opacity: 0.8; } .typing-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #999; display: inline-block; margin: 0 2px; animation: typing 1.4s infinite ease-in-out; } .typing-dot:nth-child(1) { animation-delay: -0.32s; } .typing-dot:nth-child(2) { animation-delay: -0.16s; } @keyframes typing { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } @media (max-width: 768px) { .chat-container { height: 100vh; border-radius: 0; } .message-bubble { max-width: 85%; } } </style> </head> <body> <div class="chat-container"> <div class="chat-header">  <div class="chat-title">My AI Assistant</div>  <div class="chat-subtitle">How can I help you today?</div> </div> <div class="chat-messages" id="messages">  <div class="welcome-box"> Welcome! I'm your AI assistant. Ask me anything and I'll do my best to help you. </div> <div class="message bot"> <div class="message-avatar">AI</div> <div class="message-bubble"> Hello! What would you like to know or discuss today? </div> </div> </div> <div class="chat-input-container"> <div class="input-wrapper"> <input type="text" class="chat-input" placeholder="Type your message..." id="messageInput" > <button class="send-btn" onclick="sendMessage()"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"/> </svg> </button> </div> </div> </div> <script> // Chat functionality for the chatbot template function sendMessage() { const input = document.getElementById('messageInput'); const message = input.value.trim(); if (message) { addMessage(message, 'user'); input.value = ''; // Show typing indicator showTyping(); // TODO: Replace with actual backend API call // This will be implemented to send prompt to backend and get AI response setTimeout(() => { hideTyping(); addMessage("I received your message: '" + message + "'. Backend integration coming soon!", 'bot'); }, 1500); } } function addMessage(text, sender) { const messagesDiv = document.getElementById('messages'); const messageDiv = document.createElement('div'); messageDiv.className = `message ${sender}`; const avatar = document.createElement('div'); avatar.className = 'message-avatar'; avatar.textContent = sender === 'user' ? 'U' : 'AI'; const bubble = document.createElement('div'); bubble.className = 'message-bubble'; bubble.textContent = text; messageDiv.appendChild(avatar); messageDiv.appendChild(bubble); messagesDiv.appendChild(messageDiv); messagesDiv.scrollTop = messagesDiv.scrollHeight; } function showTyping() { const messagesDiv = document.getElementById('messages'); const typingDiv = document.createElement('div'); typingDiv.className = 'message bot'; typingDiv.id = 'typing-indicator'; const avatar = document.createElement('div'); avatar.className = 'message-avatar'; avatar.textContent = 'AI'; const bubble = document.createElement('div'); bubble.className = 'message-bubble typing'; bubble.innerHTML = '<div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div>'; typingDiv.appendChild(avatar); typingDiv.appendChild(bubble); messagesDiv.appendChild(typingDiv); messagesDiv.scrollTop = messagesDiv.scrollHeight; } function hideTyping() { const typingIndicator = document.getElementById('typing-indicator'); if (typingIndicator) { typingIndicator.remove(); } } function handleKeyPress(event) { if (event.key === 'Enter') { sendMessage(); } } // Initialize when page loads document.addEventListener('DOMContentLoaded', function() { const messageInput = document.getElementById('messageInput'); if (messageInput) { messageInput.addEventListener('keypress', handleKeyPress); } }); </script> </body> </html>

Key Features Implemented:

Pi Network Integration (PRESERVED)

window.Pi.init() - Initializes Pi SDK (NEVER MODIFIED)

window.Pi.authenticate() - Handles Pi Network authentication (NEVER MODIFIED)

/v1/app/${APP_ID}/login - Backend login endpoint (NEVER MODIFIED)

/v1/app/${APP_ID}/chat/default - Chat API endpoint (NEVER MODIFIED)

Enhanced Features

Authentication Flow: Proper Pi Network login with visual feedback

Session Management: Saves conversation history locally

Error Handling: Comprehensive error messages and recovery

Responsive Design: Works on mobile and desktop

Typing Indicators: Shows when AI is responding

User Experience: Smooth animations and modern UI

Setup Instructions

Replace 'your-app-id-here' with your actual Pi App ID

Set sandbox: false for production deployment

Ensure your backend handles the specified API endpoints

Deploy in Pi Browser environment

Critical Preservation

All Pi Network authentication functions and API endpoints are preserved exactly as specified. The app will properly authenticate users through Pi Network and communicate with your backend using the required endpoints.