Spaces:

lablab-ai-amd-developer-hackathon
/

RasoSpeak

Sleeping

File size: 26,142 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>RasoSpeak — Documents</title>
  <link rel="icon" type="image/png" href="logo.png"/>
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
  <style>
    * { font-family: 'Inter', system-ui, sans-serif; }
    body { background: #FAFAFA; }
    .nav-link { @apply px-4 py-2 rounded-lg text-sm font-medium transition-colors; }
    .nav-link:hover { @apply bg-gray-100; }
    .nav-link.active { @apply bg-emerald-50 text-emerald-700; }
  </style>
</head>
<body class="min-h-screen">

<!-- Skip to main content -->
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-emerald-500 focus:text-white focus:rounded-lg focus:font-medium">Skip to main content</a>

<!-- Navigation -->
<nav class="bg-white border-b border-gray-200 sticky top-0 z-50" aria-label="Main navigation">
  <div class="max-w-5xl mx-auto px-6">
    <div class="flex items-center justify-between h-16">
      <a href="index.html" class="flex items-center gap-3">
        <img src="logo.png" alt="RasoSpeak" class="w-8 h-8">
        <span class="font-bold text-lg">RasoSpeak</span>
      </a>
      <div class="flex items-center gap-1">
        <a href="index.html" class="nav-link" aria-label="Home">Home</a>
        <a href="chat.html" class="nav-link" aria-label="Chat">Chat</a>
        <a href="memory.html" class="nav-link" aria-label="Memory">Memory</a>
        <a href="coach.html" class="nav-link" aria-label="Coach">Coach</a>
        <a href="docs.html" class="nav-link active" aria-label="Docs">Docs</a>
        <a href="settings.html" class="nav-link" aria-label="Settings">Settings</a>
      </div>
    </div>
  </div>
</nav>

<!-- Main Content -->
<main id="main-content" class="max-w-4xl mx-auto px-6 py-8">

  <!-- Header -->
  <div class="mb-8">
    <h1 class="text-2xl font-bold mb-2">Knowledge Base</h1>
    <p class="text-gray-600">Import documents, URLs, and notes to expand your AI's knowledge</p>
  </div>

  <!-- Import URL -->
  <div class="bg-white rounded-lg border border-gray-200 p-6 mb-6">
    <h2 class="text-lg font-semibold mb-4">Import from URL</h2>
    <div class="flex gap-3">
      <input type="text" id="doc-url" placeholder="Paste URL to import (article, blog, etc.)"
        class="flex-1 px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500">
      <button onclick="importUrl()" class="px-6 py-3 bg-emerald-500 text-white rounded-lg font-medium hover:bg-emerald-600 transition-colors">
        Import
      </button>
    </div>
    <p id="url-status" class="text-xs text-gray-400 mt-2"></p>
  </div>

  <!-- Import Text -->
  <div class="bg-white rounded-lg border border-gray-200 p-6 mb-6">
    <h2 class="text-lg font-semibold mb-4">Import Text</h2>
    <textarea id="doc-text" placeholder="Paste text, notes, or any content to add to your memory..."
      class="w-full h-32 px-4 py-3 border border-gray-200 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-emerald-500 mb-3"></textarea>
    <div class="flex gap-3">
      <input type="text" id="doc-title" placeholder="Title (optional)" class="flex-1 px-3 py-2 border border-gray-200 rounded-lg">
      <select id="doc-category" class="px-3 py-2 border border-gray-200 rounded-lg text-sm">
        <option value="note">Note</option>
        <option value="article">Article</option>
        <option value="book">Book</option>
        <option value="research">Research</option>
        <option value="other">Other</option>
      </select>
      <button onclick="importText()" class="flex-1 py-2 bg-emerald-500 text-white rounded-lg font-medium hover:bg-emerald-600 transition-colors">
        Add to Memory
      </button>
    </div>
  </div>

  <!-- Upload File -->
  <div class="bg-white rounded-lg border border-gray-200 p-6 mb-6">
    <h2 class="text-lg font-semibold mb-4">Upload Document</h2>
    <div id="upload-area" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-emerald-500 transition-colors cursor-pointer" onclick="document.getElementById('doc-upload').click()" role="button" tabindex="0" aria-label="Click to upload a document" onkeydown="if(event.key==='Enter'||event.key===' '){document.getElementById('doc-upload').click()}">
      <input type="file" id="doc-upload" accept=".pdf,.txt,.md,.doc,.docx" class="hidden" onchange="handleFileUpload(this)">
      <div class="text-gray-400 mb-2">
        <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
        </svg>
      </div>
      <p class="text-gray-600 font-medium">Click to upload or drag and drop</p>
      <p class="text-sm text-gray-400 mt-1">PDF, TXT, MD, DOC, DOCX</p>
    </div>
    <div id="upload-progress" class="hidden mt-4">
      <div class="flex items-center gap-3">
        <div class="flex-1 bg-gray-200 rounded-full h-2">
          <div id="progress-bar" class="bg-emerald-500 h-2 rounded-full transition-all" style="width: 0%"></div>
        </div>
        <span id="progress-text" class="text-sm text-gray-500">0%</span>
      </div>
    </div>
  </div>

  <!-- Document List -->
  <div class="bg-white rounded-lg border border-gray-200 p-6">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-lg font-semibold">Knowledge Base</h2>
      <div class="flex items-center gap-2">
        <div class="relative flex items-center">
          <input type="text" id="doc-search" placeholder="Search knowledge..."
            class="pl-10 pr-32 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 w-72"
            aria-label="Search documents">
          <button id="voice-search-btn" onclick="toggleVoiceSearch()" class="absolute left-2 p-1 text-gray-400 hover:text-emerald-500" aria-label="Toggle voice search">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
            </svg>
          </button>
          <div class="absolute right-1 flex gap-1">
            <button onclick="searchDocs('wiki')" class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs hover:bg-blue-200" aria-label="Search Wikipedia">📚</button>
            <button onclick="searchDocs('web')" class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs hover:bg-green-200" aria-label="Search web">🌐</button>
            <button onclick="searchDocs('rag')" class="px-2 py-1 bg-purple-100 text-purple-700 rounded text-xs hover:bg-purple-200" aria-label="RAG search">🤖</button>
          </div>
        </div>
        <button onclick="searchDocs('docs')" class="px-4 py-2 bg-gray-100 rounded-lg text-sm hover:bg-gray-200" aria-label="Search documents">📄 Docs</button>
        <button onclick="loadDocuments()" class="px-4 py-2 bg-gray-100 rounded-lg text-sm hover:bg-gray-200" aria-label="Refresh document list">Refresh</button>
      </div>
    </div>
    <div id="search-type-label" class="text-xs text-gray-400 mb-2">
      📚 Wikipedia | 🌐 Web | 🤖 RAG | 📄 Docs search
    </div>
    <div id="wiki-results" class="hidden mb-4 p-4 bg-blue-50 rounded-lg">
      <h3 class="font-medium text-blue-800 mb-2">📚 Wikipedia Results</h3>
      <div id="wiki-results-list"></div>
      <button onclick="addWikiToMemory()" class="mt-2 px-3 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600">Add to Memory</button>
    </div>
    <div id="web-results" class="hidden mb-4 p-4 bg-green-50 rounded-lg">
      <h3 class="font-medium text-green-800 mb-2">🌐 Web Results</h3>
      <div id="web-results-list"></div>
    </div>
    <div id="docs-list" class="space-y-3">
      <div class="text-center text-gray-400 py-8">
        <p>No documents yet</p>
        <p class="text-sm mt-1">Import URLs, text, or upload files above</p>
      </div>
    </div>
    <div id="docs-pagination" class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100">
      <p id="docs-count" class="text-sm text-gray-500"></p>
      <div class="flex gap-2">
        <button id="prev-page" onclick="prevPage()" class="px-3 py-1 bg-gray-100 rounded text-sm hover:bg-gray-200 disabled:opacity-50" disabled aria-label="Previous page">Previous</button>
        <button id="next-page" onclick="nextPage()" class="px-3 py-1 bg-gray-100 rounded text-sm hover:bg-gray-200 disabled:opacity-50" disabled aria-label="Next page">Next</button>
      </div>
    </div>
  </div>

</main>

<!-- Toast -->
<div id="toast" class="fixed bottom-6 left-1/2 -translate-x-1/2 bg-gray-900 text-white px-6 py-3 rounded-full text-sm font-medium shadow-xl transition-all duration-300 opacity-0 pointer-events-none translate-y-4 z-50" role="status" aria-live="polite" aria-atomic="true"></div>

<!-- Scripts -->
<script src="state.js"></script>
<script src="nlp.js"></script>
<script src="speech.js"></script>
<script src="ui.js"></script>
<script src="app.js"></script>

<script>
let currentPage = 1;
let totalDocs = 0;
const pageSize = 10;
let voiceSearchActive = false;
let voiceSearchRecognition = null;

// Toast notification
function showToast(msg) {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
  setTimeout(() => t.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none'), 3000);
}

// Voice search toggle
function toggleVoiceSearch() {
  if (voiceSearchActive) {
    // Turn off
    voiceSearchActive = false;
    if (voiceSearchRecognition) {
      try { voiceSearchRecognition.stop(); } catch(e) {}
      voiceSearchRecognition = null;
    }
    document.getElementById('voice-search-btn').classList.remove('text-emerald-500');
    return;
  }

  // Request permission
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      stream.getTracks().forEach(track => track.stop());
      startVoiceSearch();
    })
    .catch(err => {
      showToast('Microphone permission denied');
    });
}

function startVoiceSearch() {
  const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
  if (!SR) {
    showToast('Voice not supported - use Chrome');
    return;
  }

  voiceSearchActive = true;
  document.getElementById('voice-search-btn').classList.add('text-emerald-500');
  showToast('Speak to search...');

  voiceSearchRecognition = new SR();
  voiceSearchRecognition.continuous = false;
  voiceSearchRecognition.interimResults = false;
  voiceSearchRecognition.lang = 'en-US';

  voiceSearchRecognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    document.getElementById('doc-search').value = transcript;
    searchDocuments('web'); // Default to web search
  };

  voiceSearchRecognition.onerror = (event) => {
    console.error('Voice search error:', event.error);
    if (event.error !== 'no-speech' && event.error !== 'aborted') {
      showToast('Voice error: ' + event.error);
    }
    voiceSearchActive = false;
    document.getElementById('voice-search-btn').classList.remove('text-emerald-500');
  };

  voiceSearchRecognition.onend = () => {
    voiceSearchActive = false;
    document.getElementById('voice-search-btn').classList.remove('text-emerald-500');
  };

  voiceSearchRecognition.start();
}

// Import URL
async function importUrl() {
  const url = document.getElementById('doc-url').value.trim();
  const status = document.getElementById('url-status');

  if (!url) {
    showToast('Please enter a URL');
    return;
  }

  if (!url.startsWith('http://') && !url.startsWith('https://')) {
    showToast('Please enter a valid URL starting with http:// or https://');
    return;
  }

  status.textContent = 'Importing...';

  try {
    const resp = await fetch('/documents/url', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ url })
    });

    const data = await resp.json();

    if (resp.ok) {
      status.textContent = `Imported: ${data.title || 'Document'}`;
      showToast(`Imported: ${data.title || 'Document'}`);
      document.getElementById('doc-url').value = '';
      loadDocuments();
    } else {
      status.textContent = 'Failed to import URL';
      showToast(data.error || 'Failed to import URL');
    }
  } catch (err) {
    status.textContent = 'Error importing URL';
    showToast('Error importing URL');
    console.error(err);
  }
}

// Import Text
async function importText() {
  const text = document.getElementById('doc-text').value.trim();
  const title = document.getElementById('doc-title').value.trim() || 'Untitled Note';
  const category = document.getElementById('doc-category').value;

  if (!text) {
    showToast('Please enter some text');
    return;
  }

  try {
    const resp = await fetch('/documents/text', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        content: text,
        title,
        category,
        tags: []
      })
    });

    if (resp.ok) {
      showToast(`Added: ${title}`);
      document.getElementById('doc-text').value = '';
      document.getElementById('doc-title').value = '';
      loadDocuments();
    } else {
      showToast('Failed to add note');
    }
  } catch (err) {
    showToast('Error adding note');
    console.error(err);
  }
}

// Handle File Upload
async function handleFileUpload(input) {
  const file = input.files?.[0];
  if (!file) return;

  const progress = document.getElementById('upload-progress');
  const progressBar = document.getElementById('progress-bar');
  const progressText = document.getElementById('progress-text');

  progress.classList.remove('hidden');
  progressBar.style.width = '0%';
  progressText.textContent = '0%';

  try {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('title', file.name.replace(/\.[^/.]+$/, ''));
    formData.append('category', 'document');

    // Simulate progress
    let prog = 0;
    const interval = setInterval(() => {
      prog = Math.min(prog + 10, 90);
      progressBar.style.width = `${prog}%`;
      progressText.textContent = `${prog}%`;
    }, 100);

    const resp = await fetch('/documents/upload', {
      method: 'POST',
      body: formData
    });

    clearInterval(interval);
    progressBar.style.width = '100%';
    progressText.textContent = '100%';

    if (resp.ok) {
      const data = await resp.json();
      showToast(`Uploaded: ${data.title || file.name}`);
      loadDocuments();
    } else {
      showToast('Failed to upload file');
    }
  } catch (err) {
    showToast('Error uploading file');
    console.error(err);
  }

  setTimeout(() => {
    progress.classList.add('hidden');
  }, 2000);
}

// Load Documents
async function loadDocuments(page = 1) {
  const container = document.getElementById('docs-list');
  container.innerHTML = '<div class="text-center text-gray-400 py-8"><p>Loading documents...</p></div>';

  try {
    const resp = await fetch('/documents');
    const data = await resp.json();

    const docs = data.documents || [];
    totalDocs = docs.length;
    currentPage = page;

    if (docs.length === 0) {
      container.innerHTML = `
        <div class="text-center text-gray-400 py-8">
          <p>No documents yet</p>
          <p class="text-sm mt-1">Import URLs, text, or upload files above</p>
        </div>
      `;
      document.getElementById('docs-count').textContent = '0 documents';
      return;
    }

    // Paginate
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    const pageDocs = docs.slice(start, end);

    container.innerHTML = pageDocs.map(doc => `
      <div class="flex items-start justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
        <div class="flex-1">
          <h3 class="font-medium text-gray-900">${doc.title || 'Untitled'}</h3>
          <p class="text-sm text-gray-500 mt-1 line-clamp-2">${doc.content || doc.snippet || ''}</p>
          <div class="flex items-center gap-2 mt-2">
            <span class="px-2 py-0.5 bg-gray-100 rounded text-xs text-gray-600">${doc.category || 'other'}</span>
            ${doc.created_at ? `<span class="text-xs text-gray-400">${new Date(doc.created_at).toLocaleDateString()}</span>` : ''}
          </div>
        </div>
        <div class="flex items-center gap-2 ml-4">
          <button onclick="deleteDocument('${doc.id}')" class="p-2 text-gray-400 hover:text-red-500 transition-colors" aria-label="Delete document">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
            </svg>
          </button>
        </div>
      </div>
    `).join('');

    // Update pagination
    document.getElementById('docs-count').textContent = `${totalDocs} documents`;
    document.getElementById('prev-page').disabled = page <= 1;
    document.getElementById('next-page').disabled = end >= totalDocs;

  } catch (err) {
    container.innerHTML = '<div class="text-center text-red-400 py-8"><p>Failed to load documents</p></div>';
    console.error(err);
  }
}

// Search with multiple methods
async function searchDocs(type = 'docs') {
  const query = document.getElementById('doc-search').value.trim();
  const searchLabel = document.getElementById('search-type-label');
  const wikiResults = document.getElementById('wiki-results');
  const webResults = document.getElementById('web-results');
  const docsList = document.getElementById('docs-list');

  if (!query) {
    showToast('Enter a search term');
    return;
  }

  // Hide all result areas
  wikiResults.classList.add('hidden');
  webResults.classList.add('hidden');

  if (type === 'wiki') {
    // Wikipedia search with RAG
    searchLabel.textContent = '📚 Searching Wikipedia...';
    wikiResults.classList.remove('hidden');
    docsList.innerHTML = '<div class="text-center text-gray-400 py-4"><p>Searching Wikipedia...</p></div>';

    try {
      const resp = await fetch('/rag/wikipedia', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query, max_results: 5 })
      });
      const data = await resp.json();

      if (data.answer) {
        document.getElementById('wiki-results-list').innerHTML = `
          <div class="mb-3 p-3 bg-white rounded">
            <p class="text-gray-800">${data.answer}</p>
          </div>
          <div class="text-sm text-gray-600">Sources:</div>
          ${(data.sources || []).map(s => `
            <a href="${s.url}" target="_blank" class="block text-blue-600 hover:underline text-sm mt-1">• ${s.title}</a>
          `).join('')}
        `;
        searchLabel.textContent = `📚 Wiki complete (${data.context_chunks} chunks) | 🌐 Web | 🤖 RAG | 📄 Docs`;
      } else {
        document.getElementById('wiki-results-list').innerHTML = '<p class="text-gray-500">No Wikipedia results found</p>';
      }
    } catch (err) {
      console.error(err);
      showToast('Wikipedia search failed');
    }

  } else if (type === 'web') {
    // Web search
    searchLabel.textContent = '🌐 Searching web...';
    webResults.classList.remove('hidden');
    docsList.innerHTML = '<div class="text-center text-gray-400 py-4"><p>Searching web...</p></div>';

    try {
      const resp = await fetch('/search', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query, num_results: 8, include_summary: true })
      });
      const data = await resp.json();
      const results = data.results || [];

      document.getElementById('web-results-list').innerHTML = results.map(r => `
        <div class="p-3 bg-white rounded mb-2">
          <a href="${r.url}" target="_blank" class="font-medium text-blue-600 hover:underline">${r.title}</a>
          <p class="text-sm text-gray-600 mt-1">${r.snippet || ''}</p>
        </div>
      `).join('') || '<p class="text-gray-500">No results found</p>';

      docsList.innerHTML = '';
      searchLabel.textContent = `🌐 ${results.length} web results | 📚 Wiki | 🤖 RAG | 📄 Docs`;
    } catch (err) {
      console.error(err);
      showToast('Web search failed');
    }

  } else if (type === 'rag') {
    // RAG search with LangChain
    searchLabel.textContent = '🤖 Searching RAG knowledge base...';
    docsList.innerHTML = '<div class="text-center text-gray-400 py-4"><p>Searching knowledge base...</p></div>';

    try {
      const resp = await fetch('/rag/comprehensive', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query })
      });
      const data = await resp.json();

      let html = '';

      // Wikipedia results
      if (data.wikipedia && data.wikipedia.answer) {
        html += `
          <div class="mb-4 p-4 bg-blue-50 rounded-lg">
            <h4 class="font-medium text-blue-800 mb-2">📚 From Wikipedia</h4>
            <p class="text-gray-700">${data.wikipedia.answer}</p>
          </div>
        `;
      }

      // Local documents
      if (data.local_documents && data.local_documents.length > 0) {
        html += `
          <div class="mb-4">
            <h4 class="font-medium text-gray-700 mb-2">📄 From Your Documents</h4>
            ${data.local_documents.map(d => `
              <div class="p-3 border border-gray-200 rounded mb-2">
                <p class="text-sm font-medium">${d.title}</p>
                <p class="text-sm text-gray-600 mt-1">${d.content?.substring(0, 200)}...</p>
              </div>
            `).join('')}
          </div>
        `;
      }

      // Web results
      if (data.web && data.web.length > 0) {
        html += `
          <div class="mb-4">
            <h4 class="font-medium text-gray-700 mb-2">🌐 From Web</h4>
            ${data.web.slice(0, 3).map(r => `
              <a href="${r.url}" target="_blank" class="block text-blue-600 hover:underline text-sm">${r.title}</a>
            `).join('')}
          </div>
        `;
      }

      if (!html) {
        html = '<div class="text-center text-gray-400 py-4"><p>No results from any source</p></div>';
      }

      docsList.innerHTML = html;
      searchLabel.textContent = `🤖 RAG complete | 📚 Wiki | 🌐 Web | 📄 Docs`;
    } catch (err) {
      console.error(err);
      showToast('RAG search failed - try other methods');
    }

  } else {
    // Search local documents
    searchLabel.textContent = '📄 Searching documents...';
    docsList.innerHTML = '<div class="text-center text-gray-400 py-8"><p>Searching...</p></div>';

    try {
      const resp = await fetch(`/documents/search?query=${encodeURIComponent(query)}`);
      const data = await resp.json();
      const results = data.results || [];

      if (results.length === 0) {
        docsList.innerHTML = '<div class="text-center text-gray-400 py-8"><p>No matches in your documents</p></div>';
        searchLabel.textContent = '📄 No doc results | 📚 Wiki | 🌐 Web | 🤖 RAG';
        return;
      }

      docsList.innerHTML = results.map(doc => `
        <div class="flex items-start justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
          <div class="flex-1">
            <h3 class="font-medium text-gray-900">${doc.title || 'Untitled'}</h3>
            <p class="text-sm text-gray-500 mt-1 line-clamp-2">${doc.snippet || doc.content || ''}</p>
          </div>
        </div>
      `).join('');

      searchLabel.textContent = `📄 ${results.length} doc results | 📚 Wiki | 🌐 Web | 🤖 RAG`;
    } catch (err) {
      console.error(err);
      showToast('Doc search failed');
    }
  }
}

// Add Wikipedia results to memory
async function addWikiToMemory() {
  const query = document.getElementById('doc-search').value;
  try {
    const resp = await fetch('/rag/comprehensive', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ query })
    });
    const data = await resp.json();

    if (data.wikipedia && data.wikipedia.sources) {
      for (const source of data.wikipedia.sources) {
        await fetch('/rag/add', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            content: source.title,
            title: source.title,
            source: 'wikipedia',
            url: source.url
          })
        });
      }
      showToast('Added to knowledge base!');
    }
  } catch (err) {
    showToast('Failed to add to memory');
  }
}

// Delete Document
async function deleteDocument(docId) {
  if (!confirm('Delete this document?')) return;

  try {
    const resp = await fetch(`/documents/${docId}`, { method: 'DELETE' });
    if (resp.ok) {
      showToast('Document deleted');
      loadDocuments(currentPage);
    }
  } catch (err) {
    showToast('Failed to delete');
    console.error(err);
  }
}

// Pagination
function prevPage() {
  if (currentPage > 1) loadDocuments(currentPage - 1);
}

function nextPage() {
  if ((currentPage * pageSize) < totalDocs) loadDocuments(currentPage + 1);
}

// Initialize
window.addEventListener('load', () => {
  loadDocuments();
});
</script>

</body>
</html>