/** * OpenClaw WebUI - Main Application * * A modern chat interface for OpenClaw with: * - Multi-file upload * - Code canvas * - Chat history * - Streaming responses * - LDAP SSO */ // ==================== State Management ==================== const state = { user: null, conversations: [], currentConversation: null, messages: [], isLoading: false, models: [], selectedModel: 'main', files: [], canvasOpen: false, canvasContent: '', canvasLanguage: 'javascript' }; // ==================== API Client ==================== const api = { async request(path, options = {}) { const res = await fetch(path, { ...options, headers: { 'Content-Type': 'application/json', ...options.headers }, body: options.body ? JSON.stringify(options.body) : undefined }); if (!res.ok) { const err = await res.json().catch(() => ({ error: res.statusText })); throw new Error(err.error || 'Request failed'); } if (res.status === 204) return null; return res.json(); }, // Auth async getStatus() { return this.request('/api/auth/status'); }, async login(username, password) { return this.request('/api/auth/login', { method: 'POST', body: { username, password } }); }, async logout() { return this.request('/api/auth/logout', { method: 'POST' }); }, // Conversations async getConversations() { return this.request('/api/conversations'); }, async createConversation(title) { return this.request('/api/conversations', { method: 'POST', body: { title } }); }, async updateConversation(id, data) { return this.request(`/api/conversations/${id}`, { method: 'PUT', body: data }); }, async deleteConversation(id) { return this.request(`/api/conversations/${id}`, { method: 'DELETE' }); }, async getMessages(convId) { return this.request(`/api/conversations/${convId}/messages`); }, async saveMessage(convId, message) { return this.request(`/api/conversations/${convId}/messages`, { method: 'POST', body: message }); }, // Models async getModels() { return this.request('/api/models'); }, // Upload async uploadFile(file) { const res = await fetch(`/api/upload?filename=${encodeURIComponent(file.name)}`, { method: 'POST', headers: { 'Content-Type': file.type }, body: file }); return res.json(); } }; // ==================== Markdown Parser (Simple) ==================== function parseMarkdown(text) { if (!text) return ''; // Escape HTML text = text .replace(/&/g, '&') .replace(//g, '>'); // Code blocks (with language) text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => { const langClass = lang ? `language-${lang}` : ''; return `

${code}

`; }); // Inline code text = text.replace(/`([^`]+)`/g, '$1'); // Bold text = text.replace(/\*\*([^*]+)\*\*/g, '$1'); // Italic text = text.replace(/\*([^*]+)\*/g, '$1'); // Links text = text.replace(/\[([^\]]+)\]$([^)]+)$/g, '$1'); // Line breaks text = text.replace(/\n/g, '
'); return text; } // ==================== Streaming Chat ==================== async function streamChat(messages, onToken, onComplete, onError) { const body = { model: `openclaw:${state.selectedModel}`, stream: true, messages: messages.map(m => ({ role: m.role, content: m.content })) }; try { const res = await fetch('/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer a41984619a5f4b9bf9148ab6eb4abca53eb796d046cbbec5', 'x-openclaw-agent-id': state.selectedModel }, body: JSON.stringify(body) }); if (!res.ok) { const err = await res.json().catch(() => ({ error: res.statusText })); throw new Error(err.error?.message || err.error || 'Request failed'); } const reader = res.body.getReader(); const decoder = new TextDecoder(); let fullContent = ''; while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value); const lines = chunk.split('\n'); for (const line of lines) { if (line.startsWith('data: ')) { const data = line.slice(6); if (data === '[DONE]') continue; try { const json = JSON.parse(data); const content = json.choices?.[0]?.delta?.content; if (content) { fullContent += content; onToken(content, fullContent); } } catch { // Ignore parse errors } } } } onComplete(fullContent); } catch (err) { onError(err); } } // ==================== UI Components ==================== function render(selector, html) { document.querySelector(selector).innerHTML = html; } function renderApp() { const app = document.getElementById('app'); if (!state.user) { app.innerHTML = renderLoginPage(); } else { app.innerHTML = renderMainPage(); } attachEventListeners(); } function renderLoginPage() { return ` `; } function renderMainPage() { return `

Model:

${state.messages.length === 0 ? renderEmptyState() : renderMessages()}

`; } function renderConversationsList() { if (state.conversations.length === 0) { return '

No conversations yet

'; } return state.conversations.map(conv => `

${escapeHtml(conv.title)}

${formatDate(conv.updatedAt)}

`).join(''); } function renderEmptyState() { return `

Welcome to OpenClaw

Start a conversation or upload files to begin

`; } function renderMessages() { return state.messages.map(msg => renderMessage(msg)).join(''); } function renderMessage(msg) { const isUser = msg.role === 'user'; const content = msg.content || ''; let filesHtml = ''; if (msg.files?.length) { filesHtml = `

${msg.files.map(f => `

${escapeHtml(f.name)}

`).join('')}

`; } return `

${isUser ? (state.user.username?.[0]?.toUpperCase() || 'U') : '⚡'}

${filesHtml}

${parseMarkdown(content)}

`; } // ==================== Event Handlers ==================== function attachEventListeners() { // Login form (if on login page) document.getElementById('login-form')?.addEventListener('submit', handleLogin); // Logout // Logout document.getElementById('logout-btn')?.addEventListener('click', handleLogout); // New chat document.getElementById('new-chat-btn')?.addEventListener('click', handleNewChat); // Model selection document.getElementById('model-select')?.addEventListener('change', (e) => { state.selectedModel = e.target.value; localStorage.setItem('selected-model', state.selectedModel); }); // Message input const input = document.getElementById('message-input'); input?.addEventListener('keydown', handleInputKeydown); input?.addEventListener('input', autoResizeTextarea); // Send button document.getElementById('send-btn')?.addEventListener('click', handleSendMessage); // File input document.getElementById('file-input')?.addEventListener('change', handleFileSelect); // Canvas toggle document.getElementById('canvas-toggle')?.addEventListener('click', toggleCanvas); document.getElementById('canvas-close')?.addEventListener('click', () => toggleCanvas(false)); document.getElementById('canvas-copy')?.addEventListener('click', copyCanvasContent); // Conversation clicks document.getElementById('conversations-list')?.addEventListener('click', handleConversationClick); } async function handleLogin(e) { e.preventDefault(); const username = document.getElementById('login-username').value; const password = document.getElementById('login-password').value; const errorDiv = document.getElementById('login-error'); try { const result = await api.login(username, password); if (result.success) { state.user = result.user; await loadInitialData(); renderApp(); } } catch (err) { errorDiv.textContent = err.message; errorDiv.classList.remove('hidden'); } } async function handleLogout() { await api.logout(); state.user = null; renderApp(); } async function handleNewChat() { const conv = await api.createConversation('New Chat'); state.conversations.unshift(conv); state.currentConversation = conv; state.messages = []; renderApp(); } async function handleConversationClick(e) { const deleteBtn = e.target.closest('.conv-delete'); if (deleteBtn) { e.stopPropagation(); await handleDeleteConversation(deleteBtn.dataset.id); return; } const item = e.target.closest('.conversation-item'); if (item) { await selectConversation(item.dataset.id); } } async function handleDeleteConversation(id) { if (!confirm('Delete this conversation?')) return; await api.deleteConversation(id); state.conversations = state.conversations.filter(c => c.id !== id); if (state.currentConversation?.id === id) { state.currentConversation = state.conversations[0] || null; state.messages = state.currentConversation ? await api.getMessages(state.currentConversation.id) : []; } renderApp(); } async function selectConversation(id) { state.currentConversation = state.conversations.find(c => c.id === id); state.messages = await api.getMessages(id); renderApp(); scrollToBottom(); } function handleInputKeydown(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSendMessage(); } } function autoResizeTextarea(e) { const textarea = e.target; textarea.style.height = 'auto'; textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px'; } async function handleFileSelect(e) { const files = Array.from(e.target.files); const MAX_FILE_SIZE = 50000; // 50KB text limit for (const file of files) { try { // Check file size first if (file.size > 1024 * 1024) { // 1MB alert(`File "${file.name}" is too large (${(file.size / 1024 / 1024).toFixed(1)}MB). Maximum size is 1MB.`); continue; } // Read file content const content = await readFileContent(file); // Warn if content will be truncated let finalContent = content; let warning = ''; if (content.length > MAX_FILE_SIZE) { warning = ` (truncated - file is ${Math.round(content.length / 1000)}KB, max ${MAX_FILE_SIZE / 1000}KB per file)`; finalContent = content.substring(0, MAX_FILE_SIZE) + '\n\n... [TRUNCATED - file too large for context window]'; } state.files.push({ id: file.name + '-' + Date.now(), name: file.name + warning, type: file.type, size: file.size, content: finalContent, truncated: content.length > MAX_FILE_SIZE }); } catch (err) { console.error('Failed to read file:', file.name, err); alert(`Failed to read file "${file.name}": ${err.message}`); } } renderFilesPreview(); e.target.value = ''; } function readFileContent(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = () => reject(new Error('Failed to read file')); reader.readAsText(file); }); } function renderFilesPreview() { const container = document.getElementById('files-preview'); if (!container) return; container.innerHTML = state.files.map(f => `

${escapeHtml(f.name)}

`).join(''); container.querySelectorAll('.file-remove').forEach(btn => { btn.addEventListener('click', () => { state.files = state.files.filter(f => f.id !== btn.dataset.id); renderFilesPreview(); }); }); } async function handleSendMessage() { const input = document.getElementById('message-input'); const content = input.value.trim(); if (!content && state.files.length === 0) return; if (state.isLoading) return; // Create conversation if needed if (!state.currentConversation) { const conv = await api.createConversation(content.substring(0, 50)); state.conversations.unshift(conv); state.currentConversation = conv; } // Build message const userMessage = { role: 'user', content: buildMessageContent(content, state.files), files: state.files.length ? [...state.files] : null }; // Add user message state.messages.push(userMessage); await api.saveMessage(state.currentConversation.id, userMessage); // Clear input input.value = ''; input.style.height = 'auto'; state.files = []; renderFilesPreview(); // Add placeholder for assistant response const assistantMessage = { role: 'assistant', content: '' }; state.messages.push(assistantMessage); state.isLoading = true; updateSendButton(true); renderApp(); scrollToBottom(); // Stream response const messagesForApi = state.messages.slice(0, -1).map(m => ({ role: m.role, content: m.content })); await streamChat( messagesForApi, (token, full) => { assistantMessage.content = full; updateLastMessage(full); }, async (fullContent) => { state.isLoading = false; updateSendButton(false); await api.saveMessage(state.currentConversation.id, assistantMessage); // Update conversation title if first message if (state.messages.length === 2) { const title = content.substring(0, 50) + (content.length > 50 ? '...' : ''); await api.updateConversation(state.currentConversation.id, { title }); state.currentConversation.title = title; const titleEl = document.querySelector(`.conv-title[data-id="${state.currentConversation.id}"]`); if (titleEl) titleEl.textContent = title; } }, (err) => { state.isLoading = false; updateSendButton(false); assistantMessage.content = `**Error:** ${err.message}`; updateLastMessage(assistantMessage.content); } ); } function buildMessageContent(text, files) { if (!files.length) return text; const fileContents = files.map(f => { return `--- ${f.name.replace(/ $truncated.*$$/, '')} ---\n${f.content}\n--- end of file ---`; }).join('\n\n'); return `${text}\n\nAttached files:\n\n${fileContents}`; } function updateLastMessage(content) { const container = document.getElementById('messages-container'); const messages = container.querySelectorAll('.message'); const last = messages[messages.length - 1]; if (last) { const textDiv = last.querySelector('.message-text'); if (textDiv) { textDiv.innerHTML = parseMarkdown(content); scrollToBottom(); } } } function updateSendButton(loading) { const btn = document.getElementById('send-btn'); if (btn) { btn.disabled = loading; btn.classList.toggle('loading', loading); } } function toggleCanvas(open) { state.canvasOpen = open ?? !state.canvasOpen; const panel = document.getElementById('canvas-panel'); const btn = document.getElementById('canvas-toggle'); if (state.canvasOpen) { panel?.classList.add('open'); btn?.classList.add('active'); } else { panel?.classList.remove('open'); btn?.classList.remove('active'); } } function copyCanvasContent() { const content = document.getElementById('canvas-content')?.value; if (content) { navigator.clipboard.writeText(content); } } function scrollToBottom() { const container = document.getElementById('messages-container'); if (container) { container.scrollTop = container.scrollHeight; } } // ==================== Utilities ==================== function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } function formatDate(ts) { const date = new Date(ts); const now = new Date(); if (date.toDateString() === now.toDateString()) { return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); } const diff = now - date; if (diff < 7 * 24 * 60 * 60 * 1000) { return date.toLocaleDateString([], { weekday: 'short' }); } return date.toLocaleDateString([], { month: 'short', day: 'numeric' }); } // ==================== Initialization ==================== async function loadInitialData() { try { const [convRes, modelsRes] = await Promise.all([ api.getConversations(), api.getModels() ]); state.conversations = convRes || []; state.models = (modelsRes?.data || []).map(m => ({ id: m.id, name: m.name || m.id })); // Restore selected model const savedModel = localStorage.getItem('selected-model'); if (savedModel && state.models.find(m => m.id === savedModel)) { state.selectedModel = savedModel; } } catch (err) { console.error('Failed to load initial data:', err); } } async function init() { try { const result = await api.getStatus(); if (result.authenticated) { state.user = result.user; await loadInitialData(); } } catch (err) { console.error('Failed to check auth status:', err); } renderApp(); } init();