tryassay 0.22.0 → 0.22.2

package/demo/js/chat.js

@@ -1,98 +1,62 @@
-// chat.js — Conversational chat for requirements gathering
-// Renders in #plan-overlay, replaces question-cards.js for planning phase
+// chat.js — Chat-first interface for requirements gathering + build
+// Renders in #chat-panel (left side of split screen)
 
 const AppState = window.AppState;
 
 let chatConfig = { apiBase: '', apiKey: '' };
 let currentSessionId = null;
 let pendingCardAnswers = [];
+let pendingAttachments = [];
+
+const MAX_FILE_SIZE = 500 * 1024; // 500KB
+const ALLOWED_EXTENSIONS = ['.txt', '.md', '.markdown', '.csv', '.json'];
+
+// ── Public API ──────────────────────────────────────────────
 
-/**
- * Configure API connection (called from sse-client.js)
- */
 export function configureChat(apiBase, apiKey) {
   chatConfig.apiBase = apiBase || '';
   chatConfig.apiKey = apiKey || '';
 }
 
-/**
- * Open the chat interface in #plan-overlay.
- * Called once when the first chat_message SSE event arrives.
- */
-export function openChat(sessionId) {
-  const overlay = document.getElementById('plan-overlay');
-  if (!overlay) return;
+export function initChat(apiBase, apiKey) {
+  chatConfig.apiBase = apiBase || '';
+  chatConfig.apiKey = apiKey || '';
+
+  renderWelcomeMessage();
+  wireInputHandlers();
+}
 
+export function openChat(sessionId) {
   currentSessionId = sessionId;
   pendingCardAnswers = [];
-
-  overlay.innerHTML = `
-    <div class="chat-container">
-      <div class="chat-messages" id="chat-messages"></div>
-      <div class="chat-input-bar">
-        <input
-          type="text"
-          id="chat-input"
-          placeholder="Type a message..."
-          autocomplete="off"
-        >
-        <button id="chat-send-btn">Send</button>
-      </div>
-    </div>
-  `;
-
-  overlay.classList.add('visible');
-
-  // Bind send button
-  const sendBtn = document.getElementById('chat-send-btn');
-  const chatInput = document.getElementById('chat-input');
-
-  sendBtn.addEventListener('click', () => sendMessage());
-  chatInput.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') sendMessage();
-  });
-
-  // Hide the header input bar during chat
-  const header = document.getElementById('header');
-  if (header) header.classList.add('chat-active');
 }
 
-/**
- * Add an architect message to the chat.
- * Called on each chat_message SSE event.
- */
 export function addArchitectMessage(data) {
-  let messagesEl = document.getElementById('chat-messages');
-  if (!messagesEl) {
-    // Chat not open yet — open it first
+  const messagesEl = document.getElementById('chat-messages');
+  if (!messagesEl) return;
+
+  if (!currentSessionId) {
     openChat(data.sessionId || window.__appId);
-    messagesEl = document.getElementById('chat-messages');
-    if (!messagesEl) return; // openChat failed, bail
   }
 
   const msgDiv = document.createElement('div');
   msgDiv.className = 'chat-msg chat-msg-architect';
 
-  // Message text
   const textDiv = document.createElement('div');
   textDiv.className = 'chat-msg-text';
   textDiv.textContent = data.content;
   msgDiv.appendChild(textDiv);
 
-  // Structured cards (if any)
   if (data.cards && data.cards.length > 0) {
     const cardsDiv = document.createElement('div');
     cardsDiv.className = 'chat-cards';
-
     for (const card of data.cards) {
       const cardEl = renderCard(card);
       cardsDiv.appendChild(cardEl);
     }
-
     msgDiv.appendChild(cardsDiv);
   }
 
-  // "Start Building" button (if ready)
   if (data.readiness && data.readiness.ready) {
     const buildBtn = document.createElement('button');
     buildBtn.className = 'chat-build-btn';
@@ -111,25 +75,374 @@ export function addArchitectMessage(data) {
   messagesEl.scrollTop = messagesEl.scrollHeight;
 }
 
-/**
- * Close the chat and proceed to build phase.
- */
 export function closeChat() {
-  const overlay = document.getElementById('plan-overlay');
-  if (overlay) {
-    overlay.classList.remove('visible');
-    setTimeout(() => { overlay.innerHTML = ''; }, 500);
+  currentSessionId = null;
+  pendingCardAnswers = [];
+}
+
+export function lockChat() {
+  const inputArea = document.getElementById('chat-input-area');
+  if (inputArea) inputArea.classList.add('hidden');
+
+  const messagesEl = document.getElementById('chat-messages');
+  if (messagesEl) {
+    const separator = document.createElement('div');
+    separator.className = 'activity-separator';
+    separator.innerHTML = '<span>Build started</span>';
+    messagesEl.appendChild(separator);
+    messagesEl.scrollTop = messagesEl.scrollHeight;
   }
+}
 
-  // Restore header input bar
-  const header = document.getElementById('header');
-  if (header) header.classList.remove('chat-active');
+export function unlockChat() {
+  const inputArea = document.getElementById('chat-input-area');
+  if (inputArea) inputArea.classList.remove('hidden');
+
+  const chatInput = document.getElementById('chat-input');
+  const sendBtn = document.getElementById('chat-send-btn');
+  const attachBtn = document.getElementById('attach-btn');
+
+  if (chatInput) {
+    chatInput.disabled = false;
+    chatInput.value = '';
+    chatInput.placeholder = 'Build something else...';
+  }
+  if (sendBtn) sendBtn.disabled = false;
+  if (attachBtn) attachBtn.disabled = false;
 
   currentSessionId = null;
-  pendingCardAnswers = [];
+  pendingAttachments = [];
+  clearAttachmentChips();
+}
+
+// ── Initialization ──────────────────────────────────────────
+
+function renderWelcomeMessage() {
+  const messagesEl = document.getElementById('chat-messages');
+  if (!messagesEl) return;
+
+  const msgDiv = document.createElement('div');
+  msgDiv.className = 'chat-msg chat-msg-architect';
+
+  const textDiv = document.createElement('div');
+  textDiv.className = 'chat-msg-text';
+  textDiv.textContent = "What would you like to build? Describe your app and I'll help design it. You can also attach a specification document.";
+  msgDiv.appendChild(textDiv);
+
+  messagesEl.appendChild(msgDiv);
+}
+
+function wireInputHandlers() {
+  const sendBtn = document.getElementById('chat-send-btn');
+  const chatInput = document.getElementById('chat-input');
+  const attachBtn = document.getElementById('attach-btn');
+  const fileInput = document.getElementById('file-input');
+
+  if (sendBtn) {
+    sendBtn.addEventListener('click', () => handleSend());
+  }
+  if (chatInput) {
+    chatInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') handleSend();
+    });
+  }
+  if (attachBtn && fileInput) {
+    attachBtn.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', (e) => handleFileSelected(e));
+  }
+}
+
+// ── Send Routing ────────────────────────────────────────────
+
+function handleSend() {
+  if (currentSessionId === null) {
+    sendInitialMessage();
+  } else {
+    sendMessage();
+  }
 }
 
-// ── Internal ──
+// ── Initial Message (creates session) ───────────────────────
+
+function buildAppDescription(prompt) {
+  const name = prompt
+    .replace(/^(build|create|make|generate)\s+(a|an|me|my)?\s*/i, '')
+    .split(/[.,!?\n]/)[0]
+    .trim()
+    .slice(0, 50)
+    .replace(/\s+/g, '-')
+    .toLowerCase() || 'my-app';
+
+  const features = [];
+  const lower = prompt.toLowerCase();
+  if (/auth|login|signup|sign.?up|register|password/.test(lower)) features.push('User authentication with email/password');
+  if (/todo|task|checklist/.test(lower)) features.push('Todo/task CRUD with completion tracking');
+  if (/blog|post|article|cms/.test(lower)) features.push('Blog post management with markdown');
+  if (/chat|message|real.?time/.test(lower)) features.push('Real-time chat messaging');
+  if (/e.?commerce|shop|cart|product|payment/.test(lower)) features.push('Product catalog with shopping cart');
+  if (/dashboard|admin|analytics/.test(lower)) features.push('Admin dashboard with analytics');
+  if (/api|rest|endpoint/.test(lower)) features.push('REST API endpoints');
+  if (/search|filter/.test(lower)) features.push('Search and filtering');
+  if (/upload|file|image/.test(lower)) features.push('File upload handling');
+  if (/notification|email|alert/.test(lower)) features.push('Notification system');
+  if (features.length === 0) features.push(prompt);
+
+  let framework = 'next.js';
+  let database = 'supabase';
+  if (/express|node/.test(lower)) framework = 'express';
+  if (/svelte/.test(lower)) framework = 'sveltekit';
+  if (/electron|desktop/.test(lower)) framework = 'electron';
+  if (/postgres(?!.*supa)/.test(lower)) database = 'postgresql';
+  if (/sqlite/.test(lower)) database = 'sqlite';
+
+  return {
+    name,
+    description: prompt,
+    techStack: { language: 'typescript', framework, database, styling: 'tailwind' },
+    features,
+  };
+}
+
+async function sendInitialMessage() {
+  const chatInput = document.getElementById('chat-input');
+  if (!chatInput) return;
+
+  const text = chatInput.value.trim();
+  if (!text && pendingAttachments.length === 0) return;
+
+  // Render user bubble
+  renderUserBubble(text, pendingAttachments);
+
+  // Disable input during session creation
+  chatInput.value = '';
+  chatInput.disabled = true;
+  const sendBtn = document.getElementById('chat-send-btn');
+  const attachBtn = document.getElementById('attach-btn');
+  if (sendBtn) sendBtn.disabled = true;
+  if (attachBtn) attachBtn.disabled = true;
+
+  AppState.reset();
+
+  const appDesc = buildAppDescription(text);
+  const headers = { 'Content-Type': 'application/json' };
+  if (chatConfig.apiKey) headers['Authorization'] = `Bearer ${chatConfig.apiKey}`;
+
+  const body = { ...appDesc, autoApprove: false };
+  if (pendingAttachments.length > 0) {
+    body.documents = pendingAttachments.map(a => ({ name: a.name, content: a.content }));
+  }
+
+  const attachments = [...pendingAttachments];
+  pendingAttachments = [];
+  clearAttachmentChips();
+
+  try {
+    const res = await fetch(`${chatConfig.apiBase}/api/v1/app/create`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(body),
+    });
+
+    if (!res.ok) {
+      const err = await res.text();
+      throw new Error(`API ${res.status}: ${err}`);
+    }
+
+    const data = await res.json();
+    window.__appId = data.id || data.sessionId;
+    currentSessionId = window.__appId;
+
+    window.__connectSSE(window.__appId);
+    AppState.update({ phase: 'initializing' });
+    AppState.addLog({ type: 'system', message: `Session started: ${window.__appId}` });
+
+    // Re-enable input for chat conversation
+    chatInput.disabled = false;
+    chatInput.placeholder = 'Type a message...';
+    if (sendBtn) sendBtn.disabled = false;
+    if (attachBtn) attachBtn.disabled = false;
+  } catch (err) {
+    console.error('[Chat] Session creation error:', err.message);
+    showErrorInChat(`Failed to start session: ${err.message}`);
+    chatInput.disabled = false;
+    if (sendBtn) sendBtn.disabled = false;
+    if (attachBtn) attachBtn.disabled = false;
+    // Restore attachments on failure
+    pendingAttachments = attachments;
+    if (attachments.length > 0) {
+      for (const a of attachments) renderAttachmentChip(a.name);
+    }
+  }
+}
+
+// ── Ongoing Chat Messages ───────────────────────────────────
+
+async function sendMessage() {
+  const input = document.getElementById('chat-input');
+  if (!input) return;
+
+  const message = input.value.trim();
+  if (!message && pendingCardAnswers.length === 0 && pendingAttachments.length === 0) return;
+
+  const sessionId = currentSessionId || window.__appId;
+  if (!sessionId) return;
+
+  renderUserBubble(message, pendingAttachments);
+  input.value = '';
+
+  const body = { message: message || '' };
+  if (pendingCardAnswers.length > 0) {
+    body.cardAnswers = [...pendingCardAnswers];
+    pendingCardAnswers = [];
+  }
+  if (pendingAttachments.length > 0) {
+    body.documents = pendingAttachments.map(a => ({ name: a.name, content: a.content }));
+    pendingAttachments = [];
+    clearAttachmentChips();
+  }
+
+  // Disable card options after sending
+  const allCards = document.querySelectorAll('.chat-card');
+  allCards.forEach(card => {
+    card.querySelectorAll('.chat-card-option').forEach(opt => {
+      opt.style.pointerEvents = 'none';
+      opt.style.opacity = '0.6';
+    });
+  });
+
+  const headers = { 'Content-Type': 'application/json' };
+  if (chatConfig.apiKey) headers['Authorization'] = `Bearer ${chatConfig.apiKey}`;
+
+  try {
+    const res = await fetch(`${chatConfig.apiBase}/api/v1/app/${sessionId}/chat`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) {
+      console.error('[Chat] Send failed:', res.status);
+      showErrorInChat(`Message failed to send (${res.status})`);
+    }
+  } catch (err) {
+    console.error('[Chat] Send error:', err);
+    showErrorInChat(`Message failed: ${err.message}`);
+  }
+}
+
+// ── File Attachment ─────────────────────────────────────────
+
+function showErrorInChat(message) {
+  const messagesEl = document.getElementById('chat-messages');
+  if (!messagesEl) return;
+
+  const msgDiv = document.createElement('div');
+  msgDiv.className = 'chat-msg chat-msg-architect';
+
+  const textDiv = document.createElement('div');
+  textDiv.className = 'chat-msg-text';
+  textDiv.style.color = 'var(--accent-red)';
+  textDiv.textContent = message;
+  msgDiv.appendChild(textDiv);
+
+  messagesEl.appendChild(msgDiv);
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+
+function handleFileSelected(event) {
+  const file = event.target.files?.[0];
+  if (!file) return;
+
+  // Reset input so same file can be re-selected
+  event.target.value = '';
+
+  const ext = '.' + file.name.split('.').pop().toLowerCase();
+  if (!ALLOWED_EXTENSIONS.includes(ext)) {
+    showErrorInChat(`Unsupported file type: ${ext}. Allowed: ${ALLOWED_EXTENSIONS.join(', ')}`);
+    return;
+  }
+
+  if (file.size > MAX_FILE_SIZE) {
+    showErrorInChat(`File too large: ${(file.size / 1024).toFixed(0)}KB. Max: ${MAX_FILE_SIZE / 1024}KB`);
+    return;
+  }
+
+  const reader = new FileReader();
+  reader.onload = () => {
+    pendingAttachments.push({ name: file.name, content: reader.result });
+    renderAttachmentChip(file.name);
+  };
+  reader.readAsText(file);
+}
+
+function renderAttachmentChip(filename) {
+  const preview = document.getElementById('attachment-preview');
+  if (!preview) return;
+
+  preview.classList.remove('hidden');
+
+  const chip = document.createElement('div');
+  chip.className = 'attachment-chip';
+  chip.dataset.filename = filename;
+
+  const nameSpan = document.createElement('span');
+  nameSpan.textContent = filename;
+  chip.appendChild(nameSpan);
+
+  const removeBtn = document.createElement('button');
+  removeBtn.className = 'attachment-chip-remove';
+  removeBtn.textContent = '\u00d7';
+  removeBtn.addEventListener('click', () => {
+    pendingAttachments = pendingAttachments.filter(a => a.name !== filename);
+    chip.remove();
+    if (pendingAttachments.length === 0) {
+      preview.classList.add('hidden');
+    }
+  });
+  chip.appendChild(removeBtn);
+
+  preview.appendChild(chip);
+}
+
+function clearAttachmentChips() {
+  const preview = document.getElementById('attachment-preview');
+  if (!preview) return;
+  preview.innerHTML = '';
+  preview.classList.add('hidden');
+}
+
+// ── User Bubble ─────────────────────────────────────────────
+
+function renderUserBubble(text, attachments) {
+  const messagesEl = document.getElementById('chat-messages');
+  if (!messagesEl) return;
+  if (!text && (!attachments || attachments.length === 0)) return;
+
+  const msgDiv = document.createElement('div');
+  msgDiv.className = 'chat-msg chat-msg-user';
+
+  if (text) {
+    const textDiv = document.createElement('div');
+    textDiv.className = 'chat-msg-text';
+    textDiv.textContent = text;
+    msgDiv.appendChild(textDiv);
+  }
+
+  if (attachments && attachments.length > 0) {
+    for (const att of attachments) {
+      const attDiv = document.createElement('div');
+      attDiv.className = 'chat-msg-text';
+      attDiv.style.fontSize = '12px';
+      attDiv.style.opacity = '0.7';
+      attDiv.textContent = `\uD83D\uDCCE ${att.name}`;
+      msgDiv.appendChild(attDiv);
+    }
+  }
+
+  messagesEl.appendChild(msgDiv);
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+
+// ── Cards ───────────────────────────────────────────────────
 
 function renderCard(card) {
   const cardEl = document.createElement('div');
@@ -176,99 +489,29 @@ function renderCard(card) {
 
 function handleCardOptionClick(optEl, card) {
   const cardId = optEl.dataset.cardId;
-  const label = optEl.dataset.label;
   const isMulti = optEl.dataset.multi === 'true';
 
   if (isMulti) {
     optEl.classList.toggle('selected');
   } else {
-    // Deselect siblings
     const siblings = optEl.parentElement.querySelectorAll('.chat-card-option');
     siblings.forEach(s => s.classList.remove('selected'));
     optEl.classList.add('selected');
   }
 
-  // Update pending card answers
   const existingIdx = pendingCardAnswers.findIndex(a => a.questionId === cardId);
-  if (existingIdx >= 0) {
-    pendingCardAnswers.splice(existingIdx, 1);
-  }
+  if (existingIdx >= 0) pendingCardAnswers.splice(existingIdx, 1);
 
-  // Collect all selected options for this card
   const cardEl = optEl.closest('.chat-card');
   const selectedOpts = cardEl.querySelectorAll('.chat-card-option.selected');
   const selectedLabels = Array.from(selectedOpts).map(el => el.dataset.label);
 
   if (selectedLabels.length > 0) {
-    pendingCardAnswers.push({
-      questionId: cardId,
-      selectedOptions: selectedLabels,
-    });
+    pendingCardAnswers.push({ questionId: cardId, selectedOptions: selectedLabels });
   }
 }
 
-async function sendMessage() {
-  const input = document.getElementById('chat-input');
-  if (!input) return;
-
-  const message = input.value.trim();
-  if (!message && pendingCardAnswers.length === 0) return;
-
-  const sessionId = currentSessionId || window.__appId;
-  if (!sessionId) return;
-
-  // Add user message to chat
-  const messagesEl = document.getElementById('chat-messages');
-  if (messagesEl && message) {
-    const msgDiv = document.createElement('div');
-    msgDiv.className = 'chat-msg chat-msg-user';
-    const textDiv = document.createElement('div');
-    textDiv.className = 'chat-msg-text';
-    textDiv.textContent = message;
-    msgDiv.appendChild(textDiv);
-    messagesEl.appendChild(msgDiv);
-    messagesEl.scrollTop = messagesEl.scrollHeight;
-  }
-
-  // Clear input
-  input.value = '';
-
-  // Build request body
-  const body = { message: message || '' };
-  if (pendingCardAnswers.length > 0) {
-    body.cardAnswers = [...pendingCardAnswers];
-    pendingCardAnswers = [];
-  }
-
-  // Disable all card options after submitting
-  const allCards = document.querySelectorAll('.chat-card');
-  allCards.forEach(card => {
-    card.querySelectorAll('.chat-card-option').forEach(opt => {
-      opt.style.pointerEvents = 'none';
-      opt.style.opacity = '0.6';
-    });
-  });
-
-  // Send to API
-  const headers = { 'Content-Type': 'application/json' };
-  if (chatConfig.apiKey) headers['Authorization'] = `Bearer ${chatConfig.apiKey}`;
-
-  try {
-    const res = await fetch(`${chatConfig.apiBase}/api/v1/app/${sessionId}/chat`, {
-      method: 'POST',
-      headers,
-      body: JSON.stringify(body),
-    });
-
-    if (!res.ok) {
-      console.error('[Chat] Send failed:', res.status);
-      AppState.addLog({ level: 'error', message: `Chat send failed: ${res.status}` });
-    }
-  } catch (err) {
-    console.error('[Chat] Send error:', err);
-    AppState.addLog({ level: 'error', message: `Chat error: ${err.message}` });
-  }
-}
+// ── Build Trigger ───────────────────────────────────────────
 
 async function startBuilding() {
   const sessionId = currentSessionId || window.__appId;
@@ -287,6 +530,6 @@ async function startBuilding() {
     console.error('[Chat] Start build error:', err);
   }
 
-  closeChat();
+  lockChat();
   AppState.addLog({ level: 'success', message: 'Requirements confirmed — starting build...' });
 }