| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Ainew AI - OpenClaw Assistant</title> |
| <style> |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| background: #0f0f1a; |
| color: #e0e0e0; |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| } |
| header { |
| background: linear-gradient(135deg, #1a1a2e, #16213e); |
| padding: 16px 24px; |
| border-bottom: 1px solid #2a2a4a; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| flex-shrink: 0; |
| } |
| header h1 { font-size: 20px; font-weight: 600; } |
| header .badge { |
| background: #e94560; |
| color: white; |
| padding: 2px 10px; |
| border-radius: 12px; |
| font-size: 12px; |
| font-weight: 600; |
| } |
| .status { |
| margin-left: auto; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| font-size: 13px; |
| } |
| .status-dot { |
| width: 8px; height: 8px; |
| border-radius: 50%; |
| background: #4ade80; |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } |
| #chat-container { |
| flex: 1; |
| overflow-y: auto; |
| padding: 20px 24px; |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| } |
| .message { |
| max-width: 80%; |
| padding: 12px 16px; |
| border-radius: 12px; |
| line-height: 1.5; |
| font-size: 14px; |
| animation: fadeIn 0.3s ease; |
| } |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } |
| .user { |
| background: #2a2a4a; |
| align-self: flex-end; |
| border-bottom-right-radius: 4px; |
| } |
| .assistant { |
| background: #1a1a3e; |
| align-self: flex-start; |
| border-bottom-left-radius: 4px; |
| border: 1px solid #2a2a5a; |
| } |
| .assistant .name { |
| font-size: 11px; |
| color: #e94560; |
| font-weight: 600; |
| margin-bottom: 4px; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| .message pre { |
| background: #0a0a1a; |
| padding: 10px; |
| border-radius: 8px; |
| overflow-x: auto; |
| margin: 8px 0; |
| font-size: 13px; |
| } |
| .message code { |
| background: #0a0a1a; |
| padding: 2px 6px; |
| border-radius: 4px; |
| font-size: 13px; |
| } |
| .typing { |
| align-self: flex-start; |
| color: #888; |
| font-size: 14px; |
| padding: 12px 16px; |
| } |
| .typing span { |
| animation: dots 1.5s infinite; |
| } |
| .typing span:nth-child(2) { animation-delay: 0.3s; } |
| .typing span:nth-child(3) { animation-delay: 0.6s; } |
| @keyframes dots { 0%,100% { opacity: 0; } 50% { opacity: 1; } } |
| #input-area { |
| padding: 16px 24px; |
| background: #1a1a2e; |
| border-top: 1px solid #2a2a4a; |
| display: flex; |
| gap: 12px; |
| flex-shrink: 0; |
| } |
| #input { |
| flex: 1; |
| padding: 12px 16px; |
| border: 1px solid #2a2a4a; |
| border-radius: 8px; |
| background: #0f0f1a; |
| color: #e0e0e0; |
| font-size: 14px; |
| outline: none; |
| transition: border-color 0.2s; |
| } |
| #input:focus { border-color: #e94560; } |
| #input::placeholder { color: #666; } |
| #send-btn { |
| padding: 12px 24px; |
| background: #e94560; |
| color: white; |
| border: none; |
| border-radius: 8px; |
| font-size: 14px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: background 0.2s; |
| } |
| #send-btn:hover { background: #d63851; } |
| #send-btn:disabled { background: #555; cursor: not-allowed; } |
| .tool-call { |
| background: #1a1a2e; |
| border: 1px solid #3a3a5a; |
| border-radius: 8px; |
| padding: 8px 12px; |
| margin: 6px 0; |
| font-size: 12px; |
| color: #aaa; |
| } |
| .tool-call .tool-name { color: #e94560; font-weight: 600; } |
| .error-msg { |
| color: #ff6b6b; |
| padding: 8px 12px; |
| background: #2a1a1a; |
| border-radius: 8px; |
| font-size: 13px; |
| } |
| @media (max-width: 600px) { |
| .message { max-width: 95%; } |
| #chat-container { padding: 12px; } |
| #input-area { padding: 12px; } |
| header { padding: 12px 16px; } |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <span style="font-size:24px;">🦞</span> |
| <h1>Ainew AI</h1> |
| <span class="badge">OpenClaw</span> |
| <div class="status"> |
| <span class="status-dot"></span> |
| <span>Online</span> |
| </div> |
| </header> |
|
|
| <div id="chat-container"> |
| <div class="message assistant"> |
| <div class="name">🦞 Ainew</div> |
| Hello! I'm Ainew, a powerful AI assistant running on OpenClaw. I have access to all tools - web browsing, code execution, sandbox, file system, and more. How can I help you today? |
| </div> |
| </div> |
|
|
| <div id="input-area"> |
| <input type="text" id="input" placeholder="Type your message..." autofocus> |
| <button id="send-btn" onclick="sendMessage()">Send</button> |
| </div> |
|
|
| <script> |
| const chatContainer = document.getElementById('chat-container'); |
| const input = document.getElementById('input'); |
| const sendBtn = document.getElementById('send-btn'); |
| |
| let conversationId = 'conv_' + Date.now(); |
| let messageHistory = [ |
| { role: 'assistant', content: "Hello! I'm Ainew, a powerful AI assistant running on OpenClaw. I have access to all tools - web browsing, code execution, sandbox, file system, and more. How can I help you today?" } |
| ]; |
| |
| input.addEventListener('keydown', (e) => { |
| if (e.key === 'Enter') sendMessage(); |
| }); |
| |
| function addMessage(role, content, extra = '') { |
| const div = document.createElement('div'); |
| div.className = `message ${role}`; |
| if (role === 'assistant') { |
| div.innerHTML = `<div class="name">🦞 Ainew</div>${formatContent(content)}${extra}`; |
| } else { |
| div.innerHTML = formatContent(content); |
| } |
| chatContainer.appendChild(div); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| } |
| |
| function formatContent(text) { |
| |
| text = text.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>'); |
| |
| text = text.replace(/`([^`]+)`/g, '<code>$1</code>'); |
| |
| text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>'); |
| |
| text = text.replace(/\n/g, '<br>'); |
| return text; |
| } |
| |
| function showTyping() { |
| const div = document.createElement('div'); |
| div.className = 'typing'; |
| div.id = 'typing-indicator'; |
| div.innerHTML = '🦞 Ainew is thinking<span>.</span><span>.</span><span>.</span>'; |
| chatContainer.appendChild(div); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| } |
| |
| function hideTyping() { |
| const el = document.getElementById('typing-indicator'); |
| if (el) el.remove(); |
| } |
| |
| async function sendMessage() { |
| const text = input.value.trim(); |
| if (!text) return; |
| |
| |
| input.value = ''; |
| input.disabled = true; |
| sendBtn.disabled = true; |
| |
| |
| addMessage('user', text); |
| messageHistory.push({ role: 'user', content: text }); |
| |
| |
| showTyping(); |
| |
| try { |
| |
| const response = await fetch('/api/chat', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ |
| conversation_id: conversationId, |
| message: text, |
| stream: false |
| }) |
| }); |
| |
| hideTyping(); |
| |
| if (response.ok) { |
| const data = await response.json(); |
| const reply = data.response || data.message || data.content || 'No response'; |
| addMessage('assistant', reply); |
| messageHistory.push({ role: 'assistant', content: reply }); |
| } else { |
| |
| const fallbackResp = await fetch('/api/v1/agents/main/chat', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ message: text }) |
| }); |
| |
| if (fallbackResp.ok) { |
| const data = await fallbackResp.json(); |
| const reply = data.response || data.message || data.content || 'No response'; |
| addMessage('assistant', reply); |
| messageHistory.push({ role: 'assistant', content: reply }); |
| } else { |
| const errText = await fallbackResp.text(); |
| addMessage('assistant', `⚠️ Gateway response: ${fallbackResp.status}\n\`\`\`\n${errText || 'Gateway is starting up...'}\n\`\`\`\n\n*Note: The OpenClaw Gateway is starting. Please try again in a moment.*`); |
| } |
| } |
| } catch (err) { |
| hideTyping(); |
| addMessage('assistant', `⚠️ Connection issue: ${err.message}\n\nThe OpenClaw Gateway might still be starting up. Please wait a moment and try again.`); |
| } |
| |
| |
| input.disabled = false; |
| sendBtn.disabled = false; |
| input.focus(); |
| } |
| </script> |
| </body> |
| </html> |
|
|
