feat: goose web for local terminal alternative (#2718)
This commit is contained in:
Michael Neale
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Goose Chat</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1 id="session-title">Goose Chat</h1>
|
||||
<div class="status" id="connection-status">Connecting...</div>
|
||||
</header>
|
||||
|
||||
<div class="chat-container">
|
||||
<div class="messages" id="messages">
|
||||
<div class="welcome-message">
|
||||
<h2>Welcome to Goose!</h2>
|
||||
<p>I'm your AI assistant. How can I help you today?</p>
|
||||
|
||||
<div class="suggestion-pills">
|
||||
<div class="suggestion-pill" onclick="sendSuggestion('What can you do?')">What can you do?</div>
|
||||
<div class="suggestion-pill" onclick="sendSuggestion('Demo writing and reading files')">Demo writing and reading files</div>
|
||||
<div class="suggestion-pill" onclick="sendSuggestion('Make a snake game in a new folder')">Make a snake game in a new folder</div>
|
||||
<div class="suggestion-pill" onclick="sendSuggestion('List files in my current directory')">List files in my current directory</div>
|
||||
<div class="suggestion-pill" onclick="sendSuggestion('Take a screenshot and summarize')">Take a screenshot and summarize</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<textarea
|
||||
id="message-input"
|
||||
placeholder="Type your message here..."
|
||||
rows="3"
|
||||
autofocus
|
||||
></textarea>
|
||||
<button id="send-button" type="button">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,523 @@
|
||||
// WebSocket connection and chat functionality
|
||||
let socket = null;
|
||||
let sessionId = getSessionId();
|
||||
let isConnected = false;
|
||||
|
||||
// DOM elements
|
||||
const messagesContainer = document.getElementById('messages');
|
||||
const messageInput = document.getElementById('message-input');
|
||||
const sendButton = document.getElementById('send-button');
|
||||
const connectionStatus = document.getElementById('connection-status');
|
||||
|
||||
// Track if we're currently processing
|
||||
let isProcessing = false;
|
||||
|
||||
// Get session ID - either from URL parameter, injected session name, or generate new one
|
||||
function getSessionId() {
|
||||
// Check if session name was injected by server (for /session/:name routes)
|
||||
if (window.GOOSE_SESSION_NAME) {
|
||||
return window.GOOSE_SESSION_NAME;
|
||||
}
|
||||
|
||||
// Check URL parameters
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const sessionParam = urlParams.get('session') || urlParams.get('name');
|
||||
if (sessionParam) {
|
||||
return sessionParam;
|
||||
}
|
||||
|
||||
// Generate new session ID using CLI format
|
||||
return generateSessionId();
|
||||
}
|
||||
|
||||
// Generate a session ID using timestamp format (yyyymmdd_hhmmss) like CLI
|
||||
function generateSessionId() {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(now.getDate()).padStart(2, '0');
|
||||
const hour = String(now.getHours()).padStart(2, '0');
|
||||
const minute = String(now.getMinutes()).padStart(2, '0');
|
||||
const second = String(now.getSeconds()).padStart(2, '0');
|
||||
|
||||
return `${year}${month}${day}_${hour}${minute}${second}`;
|
||||
}
|
||||
|
||||
// Format timestamp
|
||||
function formatTimestamp(date) {
|
||||
return date.toLocaleTimeString('en-US', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
// Create message element
|
||||
function createMessageElement(content, role, timestamp) {
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `message ${role}`;
|
||||
|
||||
// Create content div
|
||||
const contentDiv = document.createElement('div');
|
||||
contentDiv.className = 'message-content';
|
||||
contentDiv.innerHTML = formatMessageContent(content);
|
||||
messageDiv.appendChild(contentDiv);
|
||||
|
||||
// Add timestamp
|
||||
const timestampDiv = document.createElement('div');
|
||||
timestampDiv.className = 'timestamp';
|
||||
timestampDiv.textContent = formatTimestamp(new Date(timestamp || Date.now()));
|
||||
messageDiv.appendChild(timestampDiv);
|
||||
|
||||
return messageDiv;
|
||||
}
|
||||
|
||||
// Format message content (handle markdown-like formatting)
|
||||
function formatMessageContent(content) {
|
||||
// Escape HTML
|
||||
let formatted = content
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
|
||||
// Handle code blocks
|
||||
formatted = formatted.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
|
||||
return `<pre><code class="language-${lang || 'plaintext'}">${code.trim()}</code></pre>`;
|
||||
});
|
||||
|
||||
// Handle inline code
|
||||
formatted = formatted.replace(/`([^`]+)`/g, '<code>$1</code>');
|
||||
|
||||
// Handle line breaks
|
||||
formatted = formatted.replace(/\n/g, '<br>');
|
||||
|
||||
return formatted;
|
||||
}
|
||||
|
||||
// Add message to chat
|
||||
function addMessage(content, role, timestamp) {
|
||||
// Remove welcome message if it exists
|
||||
const welcomeMessage = messagesContainer.querySelector('.welcome-message');
|
||||
if (welcomeMessage) {
|
||||
welcomeMessage.remove();
|
||||
}
|
||||
|
||||
const messageElement = createMessageElement(content, role, timestamp);
|
||||
messagesContainer.appendChild(messageElement);
|
||||
|
||||
// Scroll to bottom
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
|
||||
// Add thinking indicator
|
||||
function addThinkingIndicator() {
|
||||
removeThinkingIndicator(); // Remove any existing one first
|
||||
|
||||
const thinkingDiv = document.createElement('div');
|
||||
thinkingDiv.id = 'thinking-indicator';
|
||||
thinkingDiv.className = 'message thinking-message';
|
||||
thinkingDiv.innerHTML = `
|
||||
<div class="thinking-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<span class="thinking-text">Goose is thinking...</span>
|
||||
`;
|
||||
messagesContainer.appendChild(thinkingDiv);
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
|
||||
// Remove thinking indicator
|
||||
function removeThinkingIndicator() {
|
||||
const thinking = document.getElementById('thinking-indicator');
|
||||
if (thinking) {
|
||||
thinking.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Connect to WebSocket
|
||||
function connectWebSocket() {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${protocol}//${window.location.host}/ws`;
|
||||
|
||||
socket = new WebSocket(wsUrl);
|
||||
|
||||
socket.onopen = () => {
|
||||
console.log('WebSocket connected');
|
||||
isConnected = true;
|
||||
connectionStatus.textContent = 'Connected';
|
||||
connectionStatus.className = 'status connected';
|
||||
sendButton.disabled = false;
|
||||
|
||||
// Check if this session exists and load history if it does
|
||||
loadSessionIfExists();
|
||||
};
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
handleServerMessage(data);
|
||||
} catch (e) {
|
||||
console.error('Failed to parse message:', e);
|
||||
}
|
||||
};
|
||||
|
||||
socket.onclose = () => {
|
||||
console.log('WebSocket disconnected');
|
||||
isConnected = false;
|
||||
connectionStatus.textContent = 'Disconnected';
|
||||
connectionStatus.className = 'status disconnected';
|
||||
sendButton.disabled = true;
|
||||
|
||||
// Attempt to reconnect after 3 seconds
|
||||
setTimeout(connectWebSocket, 3000);
|
||||
};
|
||||
|
||||
socket.onerror = (error) => {
|
||||
console.error('WebSocket error:', error);
|
||||
};
|
||||
}
|
||||
|
||||
// Handle messages from server
|
||||
function handleServerMessage(data) {
|
||||
switch (data.type) {
|
||||
case 'response':
|
||||
// For streaming responses, we need to handle partial messages
|
||||
handleStreamingResponse(data);
|
||||
break;
|
||||
case 'tool_request':
|
||||
handleToolRequest(data);
|
||||
break;
|
||||
case 'tool_response':
|
||||
handleToolResponse(data);
|
||||
break;
|
||||
case 'tool_confirmation':
|
||||
handleToolConfirmation(data);
|
||||
break;
|
||||
case 'thinking':
|
||||
handleThinking(data);
|
||||
break;
|
||||
case 'context_exceeded':
|
||||
handleContextExceeded(data);
|
||||
break;
|
||||
case 'cancelled':
|
||||
handleCancelled(data);
|
||||
break;
|
||||
case 'complete':
|
||||
handleComplete(data);
|
||||
break;
|
||||
case 'error':
|
||||
removeThinkingIndicator();
|
||||
resetSendButton();
|
||||
addMessage(`Error: ${data.message}`, 'assistant', Date.now());
|
||||
break;
|
||||
default:
|
||||
console.log('Unknown message type:', data.type);
|
||||
}
|
||||
}
|
||||
|
||||
// Track current streaming message
|
||||
let currentStreamingMessage = null;
|
||||
|
||||
// Handle streaming responses
|
||||
function handleStreamingResponse(data) {
|
||||
removeThinkingIndicator();
|
||||
|
||||
// If this is the first chunk of a new message, or we don't have a current streaming message
|
||||
if (!currentStreamingMessage) {
|
||||
// Create a new message element
|
||||
const messageElement = createMessageElement(data.content, data.role || 'assistant', data.timestamp);
|
||||
messageElement.setAttribute('data-streaming', 'true');
|
||||
messagesContainer.appendChild(messageElement);
|
||||
|
||||
currentStreamingMessage = {
|
||||
element: messageElement,
|
||||
content: data.content,
|
||||
role: data.role || 'assistant',
|
||||
timestamp: data.timestamp
|
||||
};
|
||||
} else {
|
||||
// Append to existing streaming message
|
||||
currentStreamingMessage.content += data.content;
|
||||
|
||||
// Update the message content using the proper content div
|
||||
const contentDiv = currentStreamingMessage.element.querySelector('.message-content');
|
||||
if (contentDiv) {
|
||||
contentDiv.innerHTML = formatMessageContent(currentStreamingMessage.content);
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll to bottom
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
|
||||
// Handle tool requests
|
||||
function handleToolRequest(data) {
|
||||
removeThinkingIndicator(); // Remove thinking when tool starts
|
||||
|
||||
// Reset streaming message so tool doesn't interfere with message flow
|
||||
currentStreamingMessage = null;
|
||||
|
||||
const toolDiv = document.createElement('div');
|
||||
toolDiv.className = 'message assistant tool-message';
|
||||
|
||||
const headerDiv = document.createElement('div');
|
||||
headerDiv.className = 'tool-header';
|
||||
headerDiv.innerHTML = `🔧 <strong>${data.tool_name}</strong>`;
|
||||
|
||||
const contentDiv = document.createElement('div');
|
||||
contentDiv.className = 'tool-content';
|
||||
|
||||
// Format the arguments
|
||||
if (data.tool_name === 'developer__shell' && data.arguments.command) {
|
||||
contentDiv.innerHTML = `<pre><code>${escapeHtml(data.arguments.command)}</code></pre>`;
|
||||
} else if (data.tool_name === 'developer__text_editor') {
|
||||
const action = data.arguments.command || 'unknown';
|
||||
const path = data.arguments.path || 'unknown';
|
||||
contentDiv.innerHTML = `<div class="tool-param"><strong>action:</strong> ${action}</div>`;
|
||||
contentDiv.innerHTML += `<div class="tool-param"><strong>path:</strong> ${escapeHtml(path)}</div>`;
|
||||
if (data.arguments.file_text) {
|
||||
contentDiv.innerHTML += `<div class="tool-param"><strong>content:</strong> <pre><code>${escapeHtml(data.arguments.file_text.substring(0, 200))}${data.arguments.file_text.length > 200 ? '...' : ''}</code></pre></div>`;
|
||||
}
|
||||
} else {
|
||||
contentDiv.innerHTML = `<pre><code>${JSON.stringify(data.arguments, null, 2)}</code></pre>`;
|
||||
}
|
||||
|
||||
toolDiv.appendChild(headerDiv);
|
||||
toolDiv.appendChild(contentDiv);
|
||||
|
||||
// Add a "running" indicator
|
||||
const runningDiv = document.createElement('div');
|
||||
runningDiv.className = 'tool-running';
|
||||
runningDiv.innerHTML = '⏳ Running...';
|
||||
toolDiv.appendChild(runningDiv);
|
||||
|
||||
messagesContainer.appendChild(toolDiv);
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
|
||||
// Handle tool responses
|
||||
function handleToolResponse(data) {
|
||||
// Remove the "running" indicator from the last tool message
|
||||
const toolMessages = messagesContainer.querySelectorAll('.tool-message');
|
||||
if (toolMessages.length > 0) {
|
||||
const lastToolMessage = toolMessages[toolMessages.length - 1];
|
||||
const runningIndicator = lastToolMessage.querySelector('.tool-running');
|
||||
if (runningIndicator) {
|
||||
runningIndicator.remove();
|
||||
}
|
||||
}
|
||||
|
||||
if (data.is_error) {
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'message tool-error';
|
||||
errorDiv.innerHTML = `<strong>Tool Error:</strong> ${escapeHtml(data.result.error || 'Unknown error')}`;
|
||||
messagesContainer.appendChild(errorDiv);
|
||||
} else {
|
||||
// Handle successful tool response
|
||||
if (Array.isArray(data.result)) {
|
||||
data.result.forEach(content => {
|
||||
if (content.type === 'text' && content.text) {
|
||||
const responseDiv = document.createElement('div');
|
||||
responseDiv.className = 'message tool-result';
|
||||
responseDiv.innerHTML = `<pre>${escapeHtml(content.text)}</pre>`;
|
||||
messagesContainer.appendChild(responseDiv);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
|
||||
// Reset streaming message so next assistant response creates a new message
|
||||
currentStreamingMessage = null;
|
||||
|
||||
// Show thinking indicator because assistant will likely follow up with explanation
|
||||
// Only show if we're still processing (cancel button is active)
|
||||
if (isProcessing) {
|
||||
addThinkingIndicator();
|
||||
}
|
||||
}
|
||||
|
||||
// Handle tool confirmations
|
||||
function handleToolConfirmation(data) {
|
||||
const confirmDiv = document.createElement('div');
|
||||
confirmDiv.className = 'message tool-confirmation';
|
||||
confirmDiv.innerHTML = `
|
||||
<div class="tool-confirm-header">⚠️ Tool Confirmation Required</div>
|
||||
<div class="tool-confirm-content">
|
||||
<strong>${data.tool_name}</strong> wants to execute with:
|
||||
<pre><code>${JSON.stringify(data.arguments, null, 2)}</code></pre>
|
||||
</div>
|
||||
<div class="tool-confirm-note">Auto-approved in web mode (UI coming soon)</div>
|
||||
`;
|
||||
messagesContainer.appendChild(confirmDiv);
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
|
||||
// Handle thinking messages
|
||||
function handleThinking(data) {
|
||||
// For now, just log thinking messages
|
||||
console.log('Thinking:', data.message);
|
||||
}
|
||||
|
||||
// Handle context exceeded
|
||||
function handleContextExceeded(data) {
|
||||
const contextDiv = document.createElement('div');
|
||||
contextDiv.className = 'message context-warning';
|
||||
contextDiv.innerHTML = `
|
||||
<div class="context-header">⚠️ Context Length Exceeded</div>
|
||||
<div class="context-content">${escapeHtml(data.message)}</div>
|
||||
<div class="context-note">Auto-summarizing conversation...</div>
|
||||
`;
|
||||
messagesContainer.appendChild(contextDiv);
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
|
||||
// Handle cancelled operation
|
||||
function handleCancelled(data) {
|
||||
removeThinkingIndicator();
|
||||
resetSendButton();
|
||||
|
||||
const cancelDiv = document.createElement('div');
|
||||
cancelDiv.className = 'message system-message cancelled';
|
||||
cancelDiv.innerHTML = `<em>${escapeHtml(data.message)}</em>`;
|
||||
messagesContainer.appendChild(cancelDiv);
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
|
||||
// Handle completion of response
|
||||
function handleComplete(data) {
|
||||
removeThinkingIndicator();
|
||||
resetSendButton();
|
||||
// Finalize any streaming message
|
||||
if (currentStreamingMessage) {
|
||||
currentStreamingMessage = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset send button to normal state
|
||||
function resetSendButton() {
|
||||
isProcessing = false;
|
||||
sendButton.textContent = 'Send';
|
||||
sendButton.classList.remove('cancel-mode');
|
||||
}
|
||||
|
||||
// Escape HTML to prevent XSS
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Send message or cancel
|
||||
function sendMessage() {
|
||||
if (isProcessing) {
|
||||
// Cancel the current operation
|
||||
socket.send(JSON.stringify({
|
||||
type: 'cancel',
|
||||
session_id: sessionId
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
const message = messageInput.value.trim();
|
||||
if (!message || !isConnected) return;
|
||||
|
||||
// Add user message to chat
|
||||
addMessage(message, 'user', Date.now());
|
||||
|
||||
// Clear input
|
||||
messageInput.value = '';
|
||||
messageInput.style.height = 'auto';
|
||||
|
||||
// Add thinking indicator
|
||||
addThinkingIndicator();
|
||||
|
||||
// Update button to show cancel
|
||||
isProcessing = true;
|
||||
sendButton.textContent = 'Cancel';
|
||||
sendButton.classList.add('cancel-mode');
|
||||
|
||||
// Send message through WebSocket
|
||||
socket.send(JSON.stringify({
|
||||
type: 'message',
|
||||
content: message,
|
||||
session_id: sessionId,
|
||||
timestamp: Date.now()
|
||||
}));
|
||||
}
|
||||
|
||||
// Handle suggestion pill clicks
|
||||
function sendSuggestion(text) {
|
||||
if (!isConnected || isProcessing) return;
|
||||
|
||||
messageInput.value = text;
|
||||
sendMessage();
|
||||
}
|
||||
|
||||
// Load session history if the session exists (like --resume in CLI)
|
||||
async function loadSessionIfExists() {
|
||||
try {
|
||||
const response = await fetch(`/api/sessions/${sessionId}`);
|
||||
if (response.ok) {
|
||||
const sessionData = await response.json();
|
||||
if (sessionData.messages && sessionData.messages.length > 0) {
|
||||
// Remove welcome message since we're resuming
|
||||
const welcomeMessage = messagesContainer.querySelector('.welcome-message');
|
||||
if (welcomeMessage) {
|
||||
welcomeMessage.remove();
|
||||
}
|
||||
|
||||
// Display session resumed message
|
||||
const resumeDiv = document.createElement('div');
|
||||
resumeDiv.className = 'message system-message';
|
||||
resumeDiv.innerHTML = `<em>Session resumed: ${sessionData.messages.length} messages loaded</em>`;
|
||||
messagesContainer.appendChild(resumeDiv);
|
||||
|
||||
|
||||
// Update page title with session description if available
|
||||
if (sessionData.metadata && sessionData.metadata.description) {
|
||||
document.title = `Goose Chat - ${sessionData.metadata.description}`;
|
||||
}
|
||||
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('No existing session found or error loading:', error);
|
||||
// This is fine - just means it's a new session
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Event listeners
|
||||
sendButton.addEventListener('click', sendMessage);
|
||||
|
||||
messageInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-resize textarea
|
||||
messageInput.addEventListener('input', () => {
|
||||
messageInput.style.height = 'auto';
|
||||
messageInput.style.height = messageInput.scrollHeight + 'px';
|
||||
});
|
||||
|
||||
// Initialize WebSocket connection
|
||||
connectWebSocket();
|
||||
|
||||
// Focus on input
|
||||
messageInput.focus();
|
||||
|
||||
// Update session title
|
||||
function updateSessionTitle() {
|
||||
const titleElement = document.getElementById('session-title');
|
||||
// Just show "Goose Chat" - no need to show session ID
|
||||
titleElement.textContent = 'Goose Chat';
|
||||
}
|
||||
|
||||
// Update title on load
|
||||
updateSessionTitle();
|
||||
@@ -0,0 +1,480 @@
|
||||
:root {
|
||||
/* Dark theme colors (matching the dark.png) */
|
||||
--bg-primary: #000000;
|
||||
--bg-secondary: #0a0a0a;
|
||||
--bg-tertiary: #1a1a1a;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a0a0a0;
|
||||
--text-muted: #666666;
|
||||
--border-color: #333333;
|
||||
--border-subtle: #1a1a1a;
|
||||
--accent-color: #ffffff;
|
||||
--accent-hover: #f0f0f0;
|
||||
--user-bg: #1a1a1a;
|
||||
--assistant-bg: #0a0a0a;
|
||||
--input-bg: #0a0a0a;
|
||||
--input-border: #333333;
|
||||
--button-bg: #ffffff;
|
||||
--button-text: #000000;
|
||||
--button-hover: #e0e0e0;
|
||||
--pill-bg: transparent;
|
||||
--pill-border: #333333;
|
||||
--pill-hover: #1a1a1a;
|
||||
--tool-bg: #0f0f0f;
|
||||
--code-bg: #0f0f0f;
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #fafafa;
|
||||
--bg-tertiary: #f5f5f5;
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #999999;
|
||||
--border-color: #e1e5e9;
|
||||
--border-subtle: #f0f0f0;
|
||||
--accent-color: #000000;
|
||||
--accent-hover: #333333;
|
||||
--user-bg: #f0f0f0;
|
||||
--assistant-bg: #fafafa;
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #e1e5e9;
|
||||
--button-bg: #000000;
|
||||
--button-text: #ffffff;
|
||||
--button-hover: #333333;
|
||||
--pill-bg: #f5f5f5;
|
||||
--pill-border: #e1e5e9;
|
||||
--pill-hover: #e8eaed;
|
||||
--tool-bg: #f8f9fa;
|
||||
--code-bg: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: var(--bg-primary);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
header h1::before {
|
||||
content: "🪿";
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.status.connected {
|
||||
color: #10b981;
|
||||
border-color: #10b981;
|
||||
background-color: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.status.disconnected {
|
||||
color: #ef4444;
|
||||
border-color: #ef4444;
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.welcome-message h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.welcome-message p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Suggestion pills like in the design */
|
||||
.suggestion-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.suggestion-pill {
|
||||
padding: 0.75rem 1.25rem;
|
||||
background-color: var(--pill-bg);
|
||||
border: 1px solid var(--pill-border);
|
||||
border-radius: 2rem;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.suggestion-pill:hover {
|
||||
background-color: var(--pill-hover);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 80%;
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 1rem;
|
||||
word-wrap: break-word;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
align-self: flex-end;
|
||||
background-color: var(--user-bg);
|
||||
margin-left: auto;
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.message.assistant {
|
||||
align-self: flex-start;
|
||||
background-color: var(--assistant-bg);
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.message .timestamp {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.5rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.message pre {
|
||||
background-color: var(--code-bg);
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
overflow-x: auto;
|
||||
margin: 0.75rem 0;
|
||||
border: 1px solid var(--border-color);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.message code {
|
||||
background-color: var(--code-bg);
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
|
||||
font-size: 0.8125rem;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
background-color: var(--bg-primary);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
#message-input {
|
||||
flex: 1;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 0.75rem;
|
||||
background-color: var(--input-bg);
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
resize: none;
|
||||
min-height: 2.75rem;
|
||||
max-height: 8rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
#message-input:focus {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
#message-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#send-button {
|
||||
padding: 0.875rem 1.5rem;
|
||||
background-color: var(--button-bg);
|
||||
color: var(--button-text);
|
||||
border: none;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 4rem;
|
||||
}
|
||||
|
||||
#send-button:hover {
|
||||
background-color: var(--button-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
#send-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#send-button.cancel-mode {
|
||||
background-color: #ef4444;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#send-button.cancel-mode:hover {
|
||||
background-color: #dc2626;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.messages::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.messages::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.messages::-webkit-scrollbar-thumb {
|
||||
background: var(--border-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.messages::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Tool call styling */
|
||||
.tool-message, .tool-result, .tool-error, .tool-confirmation, .context-warning {
|
||||
background-color: var(--tool-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin: 0.75rem 0;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.tool-header, .tool-confirm-header, .context-header {
|
||||
font-weight: 600;
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.tool-content {
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tool-param {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tool-param strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tool-running {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--accent-color);
|
||||
margin-top: 0.75rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tool-error {
|
||||
border-color: #ef4444;
|
||||
background-color: rgba(239, 68, 68, 0.05);
|
||||
}
|
||||
|
||||
.tool-error strong {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.tool-result {
|
||||
background-color: var(--tool-bg);
|
||||
border-left: 3px solid var(--accent-color);
|
||||
margin-left: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.tool-confirmation {
|
||||
border-color: #f59e0b;
|
||||
background-color: rgba(245, 158, 11, 0.05);
|
||||
}
|
||||
|
||||
.tool-confirm-note, .context-note {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.75rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.context-warning {
|
||||
border-color: #f59e0b;
|
||||
background-color: rgba(245, 158, 11, 0.05);
|
||||
}
|
||||
|
||||
.context-header {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.system-message {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
margin: 1rem 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.cancelled {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Thinking indicator */
|
||||
.thinking-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
padding: 1rem 1.25rem;
|
||||
background-color: var(--bg-secondary);
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--border-subtle);
|
||||
max-width: 80%;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.thinking-dots {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.thinking-dots span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--text-secondary);
|
||||
animation: thinking-bounce 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.thinking-dots span:nth-child(1) {
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.thinking-dots span:nth-child(2) {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@keyframes thinking-bounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0.6);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Keep the old loading indicator for backwards compatibility */
|
||||
.loading-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.messages {
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 90%;
|
||||
padding: 0.875rem 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user