update ai stuff
This commit is contained in:
overcuriousity
parent
073f52bada
commit
89f45b85be
@ -0,0 +1,556 @@
|
||||
---
|
||||
// src/components/AIQueryInterface.astro
|
||||
import { promises as fs } from 'fs';
|
||||
import { load } from 'js-yaml';
|
||||
import path from 'path';
|
||||
|
||||
// Load tools data for tool details
|
||||
const yamlPath = path.join(process.cwd(), 'src/data/tools.yaml');
|
||||
const yamlContent = await fs.readFile(yamlPath, 'utf8');
|
||||
const data = load(yamlContent) as any;
|
||||
const tools = data.tools;
|
||||
const phases = data.phases.filter((phase: any) => phase.id !== 'collaboration-general');
|
||||
---
|
||||
|
||||
<div id="ai-interface" class="ai-interface" style="display: none;">
|
||||
<!-- AI Query Input Section -->
|
||||
<div class="ai-query-section">
|
||||
<div style="text-align: center; margin-bottom: 2rem;">
|
||||
<h2 style="margin-bottom: 1rem; color: var(--color-primary);">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: text-top;">
|
||||
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
|
||||
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
|
||||
</svg>
|
||||
KI-gestützte Tool-Empfehlungen
|
||||
</h2>
|
||||
<p class="text-muted" style="max-width: 600px; margin: 0 auto; line-height: 1.6;">
|
||||
Beschreiben Sie Ihr Ermittlungsszenario auf Deutsch oder Englisch und erhalten Sie
|
||||
personalisierte Tool-Empfehlungen basierend auf dem NIST-Framework.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ai-input-container" style="max-width: 800px; margin: 0 auto 2rem;">
|
||||
<div style="position: relative;">
|
||||
<textarea
|
||||
id="ai-query-input"
|
||||
placeholder="Beschreiben Sie Ihr Ermittlungsszenario...
|
||||
|
||||
Beispiele:
|
||||
• Ich untersuche einen Ransomware-Angriff auf Windows-Systeme und brauche Tools für Memory-Analyse
|
||||
• We need to investigate suspicious network traffic from an IoT device
|
||||
• Ein Smartphone wurde kompromittiert - welche Tools für Mobile Forensik?"
|
||||
style="width: 100%; min-height: 120px; padding: 1rem; border: 2px solid var(--color-border); border-radius: 0.5rem; resize: vertical; font-family: inherit; font-size: 0.875rem; line-height: 1.5;"
|
||||
maxlength="2000"
|
||||
></textarea>
|
||||
<div style="position: absolute; bottom: 0.75rem; right: 0.75rem; font-size: 0.75rem; color: var(--color-text-secondary);">
|
||||
<span id="char-count">0</span>/2000
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 1rem; margin-top: 1rem; justify-content: center;">
|
||||
<button id="ai-submit-btn" class="btn btn-primary" style="padding: 0.75rem 2rem;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<path d="M22 2L11 13"/>
|
||||
<path d="M22 2l-7 20-4-9-9-4 20-7z"/>
|
||||
</svg>
|
||||
Empfehlungen abrufen
|
||||
</button>
|
||||
<button id="ai-clear-btn" class="btn btn-secondary">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<path d="M3 6h18"/>
|
||||
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
|
||||
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
|
||||
</svg>
|
||||
Zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div id="ai-loading" class="ai-loading" style="display: none; text-align: center; padding: 2rem;">
|
||||
<div class="loading-spinner" style="margin-bottom: 1rem;">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2" style="animation: spin 1s linear infinite;">
|
||||
<path d="M12 2v4"/>
|
||||
<path d="M12 18v4"/>
|
||||
<path d="M4.93 4.93l2.83 2.83"/>
|
||||
<path d="M16.24 16.24l2.83 2.83"/>
|
||||
<path d="M2 12h4"/>
|
||||
<path d="M18 12h4"/>
|
||||
<path d="M4.93 19.07l2.83-2.83"/>
|
||||
<path d="M16.24 7.76l2.83-2.83"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 style="margin-bottom: 0.5rem; color: var(--color-primary);">KI analysiert Ihr Szenario...</h3>
|
||||
<p class="text-muted">Dies kann einige Sekunden dauern.</p>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div id="ai-error" class="ai-error" style="display: none; text-align: center; padding: 2rem;">
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--color-error)" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="15" y1="9" x2="9" y2="15"/>
|
||||
<line x1="9" y1="9" x2="15" y2="15"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 style="margin-bottom: 0.5rem; color: var(--color-error);">Fehler bei der Analyse</h3>
|
||||
<p class="text-muted" id="ai-error-message">Ein unerwarteter Fehler ist aufgetreten.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Results Section -->
|
||||
<div id="ai-results" class="ai-results" style="display: none;">
|
||||
<!-- Scenario Analysis -->
|
||||
<div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-primary);">
|
||||
<h3 style="margin-bottom: 1rem; color: var(--color-primary);">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
|
||||
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
|
||||
</svg>
|
||||
Szenario-Analyse
|
||||
</h3>
|
||||
<div id="scenario-analysis" style="line-height: 1.7;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Workflow Visualization -->
|
||||
<div style="margin-bottom: 2rem;">
|
||||
<h3 style="margin-bottom: 1.5rem; text-align: center; color: var(--color-text);">
|
||||
Empfohlener DFIR-Workflow
|
||||
</h3>
|
||||
|
||||
<!-- Phase Flow -->
|
||||
<div class="workflow-container">
|
||||
{phases.map((phase: any, index: number) => (
|
||||
<div class="workflow-phase" data-phase={phase.id}>
|
||||
<div class="phase-header">
|
||||
<div class="phase-number">{index + 1}</div>
|
||||
<div class="phase-info">
|
||||
<h4 class="phase-title">{phase.name}</h4>
|
||||
<div class="phase-tools" id={`phase-tools-${phase.id}`}>
|
||||
<!-- Tools will be populated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{index < phases.length - 1 && (
|
||||
<div class="workflow-arrow">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2">
|
||||
<path d="M5 12h14"/>
|
||||
<path d="M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Information -->
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
||||
<div class="card">
|
||||
<h4 style="margin-bottom: 1rem; color: var(--color-accent);">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</svg>
|
||||
Workflow-Empfehlung
|
||||
</h4>
|
||||
<div id="workflow-suggestion" style="line-height: 1.6;"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4 style="margin-bottom: 1rem; color: var(--color-warning);">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M12 16v-4"/>
|
||||
<path d="M12 8h.01"/>
|
||||
</svg>
|
||||
Wichtige Hinweise
|
||||
</h4>
|
||||
<div id="additional-notes" style="line-height: 1.6;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New Query Button -->
|
||||
<div style="text-align: center; margin-top: 2rem;">
|
||||
<button id="new-query-btn" class="btn btn-secondary">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
|
||||
<path d="M21 3v5h-5"/>
|
||||
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
|
||||
<path d="M3 21v-5h5"/>
|
||||
</svg>
|
||||
Neue Anfrage starten
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Loading spinner animation */
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Workflow styling */
|
||||
.workflow-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.workflow-phase {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.phase-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
background-color: var(--color-bg);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.phase-header:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.phase-number {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.phase-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.phase-title {
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--color-text);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.phase-tools {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.workflow-arrow {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* Tool recommendation cards */
|
||||
.tool-recommendation {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tool-recommendation:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.tool-recommendation.hosted {
|
||||
background-color: var(--color-hosted-bg);
|
||||
border-color: var(--color-hosted);
|
||||
}
|
||||
|
||||
.tool-recommendation.oss {
|
||||
background-color: var(--color-oss-bg);
|
||||
border-color: var(--color-oss);
|
||||
}
|
||||
|
||||
.tool-rec-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.tool-rec-name {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.tool-rec-priority {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tool-rec-priority.high {
|
||||
background-color: var(--color-error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tool-rec-priority.medium {
|
||||
background-color: var(--color-warning);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tool-rec-priority.low {
|
||||
background-color: var(--color-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tool-rec-justification {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 0.75rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tool-rec-metadata {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.workflow-container {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.phase-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.phase-number {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.phase-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.tool-rec-header {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script define:vars={{ toolsData: tools }}>
|
||||
// Global tool data for quick lookup
|
||||
window.aiToolsData = toolsData;
|
||||
|
||||
// Authentication check function
|
||||
async function checkAuthentication() {
|
||||
try {
|
||||
const response = await fetch('/api/auth/status');
|
||||
const data = await response.json();
|
||||
return data.authenticated;
|
||||
} catch (error) {
|
||||
console.error('Auth check failed:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize AI interface
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const queryInput = document.getElementById('ai-query-input');
|
||||
const submitBtn = document.getElementById('ai-submit-btn');
|
||||
const clearBtn = document.getElementById('ai-clear-btn');
|
||||
const charCount = document.getElementById('char-count');
|
||||
const loadingEl = document.getElementById('ai-loading');
|
||||
const errorEl = document.getElementById('ai-error');
|
||||
const resultsEl = document.getElementById('ai-results');
|
||||
const newQueryBtn = document.getElementById('new-query-btn');
|
||||
|
||||
// Character counter
|
||||
if (queryInput && charCount) {
|
||||
queryInput.addEventListener('input', () => {
|
||||
charCount.textContent = queryInput.value.length;
|
||||
});
|
||||
}
|
||||
|
||||
// Submit query
|
||||
if (submitBtn) {
|
||||
submitBtn.addEventListener('click', async () => {
|
||||
const query = queryInput?.value?.trim();
|
||||
if (!query) {
|
||||
alert('Bitte geben Sie eine Beschreibung Ihres Ermittlungsszenarios ein.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check authentication
|
||||
const isAuthenticated = await checkAuthentication();
|
||||
if (!isAuthenticated) {
|
||||
// Redirect to login
|
||||
window.location.href = `/api/auth/login?returnTo=${encodeURIComponent(window.location.pathname)}`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
showLoadingState();
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/ai/query', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ query }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showResults(data.recommendation);
|
||||
} else {
|
||||
showError(data.error || 'Unbekannter Fehler');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('AI query failed:', error);
|
||||
showError('Verbindungsfehler. Bitte versuchen Sie es erneut.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Clear button
|
||||
if (clearBtn) {
|
||||
clearBtn.addEventListener('click', () => {
|
||||
queryInput.value = '';
|
||||
charCount.textContent = '0';
|
||||
hideAllStates();
|
||||
});
|
||||
}
|
||||
|
||||
// New query button
|
||||
if (newQueryBtn) {
|
||||
newQueryBtn.addEventListener('click', () => {
|
||||
hideAllStates();
|
||||
queryInput?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
// State management functions
|
||||
function showLoadingState() {
|
||||
hideAllStates();
|
||||
loadingEl.style.display = 'block';
|
||||
submitBtn.disabled = true;
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
hideAllStates();
|
||||
errorEl.style.display = 'block';
|
||||
document.getElementById('ai-error-message').textContent = message;
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
|
||||
function showResults(recommendation) {
|
||||
hideAllStates();
|
||||
populateResults(recommendation);
|
||||
resultsEl.style.display = 'block';
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
|
||||
function hideAllStates() {
|
||||
loadingEl.style.display = 'none';
|
||||
errorEl.style.display = 'none';
|
||||
resultsEl.style.display = 'none';
|
||||
}
|
||||
|
||||
// Populate results
|
||||
function populateResults(recommendation) {
|
||||
// Scenario analysis
|
||||
document.getElementById('scenario-analysis').textContent = recommendation.scenario_analysis || 'Keine Analyse verfügbar.';
|
||||
|
||||
// Workflow suggestion
|
||||
document.getElementById('workflow-suggestion').textContent = recommendation.workflow_suggestion || 'Keine Workflow-Empfehlung verfügbar.';
|
||||
|
||||
// Additional notes
|
||||
document.getElementById('additional-notes').textContent = recommendation.additional_notes || 'Keine zusätzlichen Hinweise verfügbar.';
|
||||
|
||||
// Populate phase tools
|
||||
populatePhaseTools(recommendation.recommended_tools || []);
|
||||
}
|
||||
|
||||
// Populate tools by phase
|
||||
function populatePhaseTools(recommendedTools) {
|
||||
const phases = ['data-collection', 'examination', 'analysis', 'reporting'];
|
||||
|
||||
phases.forEach(phaseId => {
|
||||
const container = document.getElementById(`phase-tools-${phaseId}`);
|
||||
if (!container) return;
|
||||
|
||||
const phaseTools = recommendedTools.filter(tool => tool.phase === phaseId);
|
||||
|
||||
if (phaseTools.length === 0) {
|
||||
container.innerHTML = '<p class="text-muted" style="font-size: 0.875rem; margin: 0; font-style: italic;">Keine spezifischen Tools für diese Phase empfohlen.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = phaseTools.map(recTool => {
|
||||
const toolData = window.aiToolsData.find(t => t.name === recTool.name);
|
||||
if (!toolData) return '';
|
||||
|
||||
const hasValidProjectUrl = toolData.projectUrl && toolData.projectUrl.trim() !== '';
|
||||
const isOSS = toolData.license !== 'Proprietary';
|
||||
const hasKnowledgebase = toolData.knowledgebase === true;
|
||||
|
||||
const cardClass = hasValidProjectUrl ? 'hosted' : (isOSS ? 'oss' : '');
|
||||
|
||||
return `
|
||||
<div class="tool-recommendation ${cardClass}" onclick="window.showToolDetails('${toolData.name}')">
|
||||
<div class="tool-rec-header">
|
||||
<h5 class="tool-rec-name">${toolData.name}</h5>
|
||||
<span class="tool-rec-priority ${recTool.priority}">${recTool.priority.toUpperCase()}</span>
|
||||
</div>
|
||||
|
||||
<div class="tool-rec-justification">
|
||||
"${recTool.justification}"
|
||||
</div>
|
||||
|
||||
<div class="tool-rec-metadata">
|
||||
<span>💻 ${(toolData.platforms || []).join(', ')}</span>
|
||||
<span>•</span>
|
||||
<span>📈 ${toolData.skillLevel}</span>
|
||||
<span>•</span>
|
||||
<span>📄 ${toolData.license}</span>
|
||||
${hasValidProjectUrl ? '<span class="badge badge-primary">Self-Hosted</span>' : ''}
|
||||
${isOSS ? '<span class="badge badge-success">Open Source</span>' : ''}
|
||||
${hasKnowledgebase ? '<span class="badge badge-error">Infos 📖</span>' : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -108,9 +108,23 @@ const sortedTags = Object.entries(tagFrequency)
|
||||
</div>
|
||||
|
||||
<!-- View Toggle -->
|
||||
<div style="display: flex; gap: 1rem; margin-bottom: 1.5rem;">
|
||||
<div style="display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: center; flex-wrap: wrap;">
|
||||
<button class="btn btn-secondary view-toggle active" data-view="grid">Kachelansicht</button>
|
||||
<button class="btn btn-secondary view-toggle" data-view="matrix">Matrix-Ansicht</button>
|
||||
|
||||
<!-- AI Recommendations Button (only visible when authenticated) -->
|
||||
<button
|
||||
id="ai-view-toggle"
|
||||
class="btn btn-secondary view-toggle"
|
||||
data-view="ai"
|
||||
style="display: none; background-color: var(--color-accent); color: white; border-color: var(--color-accent);"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
|
||||
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
|
||||
</svg>
|
||||
KI-Empfehlungen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -129,12 +143,30 @@ const sortedTags = Object.entries(tagFrequency)
|
||||
const tagCloud = document.getElementById('tag-cloud');
|
||||
const tagCloudToggle = document.getElementById('tag-cloud-toggle');
|
||||
const viewToggles = document.querySelectorAll('.view-toggle');
|
||||
const aiViewToggle = document.getElementById('ai-view-toggle');
|
||||
|
||||
// Track selected tags and phase
|
||||
let selectedTags = new Set();
|
||||
let selectedPhase = '';
|
||||
let isTagCloudExpanded = false;
|
||||
|
||||
// Check authentication status and show/hide AI button
|
||||
async function checkAuthAndShowAIButton() {
|
||||
try {
|
||||
const response = await fetch('/api/auth/status');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.authenticated && aiViewToggle) {
|
||||
aiViewToggle.style.display = 'inline-flex';
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Auth check failed, AI button remains hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// Call auth check on page load
|
||||
checkAuthAndShowAIButton();
|
||||
|
||||
// Initialize tag cloud state
|
||||
function initTagCloud() {
|
||||
const visibleCount = 22;
|
||||
|
||||
@ -5,10 +5,8 @@ import { promises as fs } from 'fs';
|
||||
import { load } from 'js-yaml';
|
||||
import path from 'path';
|
||||
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
|
||||
function getEnv(key: string): string {
|
||||
const value = process.env[key];
|
||||
if (!value) {
|
||||
@ -211,7 +209,7 @@ export const POST: APIRoute = async ({ request }) => {
|
||||
'Authorization': `Bearer ${process.env.AI_API_KEY}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: AI_MODEL, // or whatever model is available
|
||||
model: 'gpt-4o-mini', // or whatever model is available
|
||||
messages: [
|
||||
{
|
||||
role: 'system',
|
||||
@ -248,8 +246,7 @@ export const POST: APIRoute = async ({ request }) => {
|
||||
// Parse AI JSON response
|
||||
let recommendation;
|
||||
try {
|
||||
const cleanedContent = stripMarkdownJson(aiContent);
|
||||
recommendation = JSON.parse(cleanedContent);
|
||||
recommendation = JSON.parse(aiContent);
|
||||
} catch (error) {
|
||||
console.error('Failed to parse AI response:', aiContent);
|
||||
return new Response(JSON.stringify({ error: 'Invalid AI response format' }), {
|
||||
|
||||
@ -1,13 +1,31 @@
|
||||
// src/pages/api/auth/status.ts
|
||||
import type { APIRoute } from 'astro';
|
||||
import { getSessionFromRequest, verifySession } from '../../../utils/auth.js';
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
export const GET: APIRoute = async ({ request }) => {
|
||||
try {
|
||||
// Check if authentication is required
|
||||
const authRequired = process.env.AUTHENTICATION_NECESSARY !== 'false';
|
||||
|
||||
if (!authRequired) {
|
||||
// If authentication is not required, always return authenticated
|
||||
return new Response(JSON.stringify({
|
||||
authenticated: true,
|
||||
authRequired: false
|
||||
}), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
const sessionToken = getSessionFromRequest(request);
|
||||
|
||||
if (!sessionToken) {
|
||||
return new Response(JSON.stringify({
|
||||
authenticated: false
|
||||
authenticated: false,
|
||||
authRequired: true
|
||||
}), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
@ -18,6 +36,7 @@ export const GET: APIRoute = async ({ request }) => {
|
||||
|
||||
return new Response(JSON.stringify({
|
||||
authenticated: session !== null,
|
||||
authRequired: true,
|
||||
expires: session?.exp ? new Date(session.exp * 1000).toISOString() : null
|
||||
}), {
|
||||
status: 200,
|
||||
@ -27,6 +46,7 @@ export const GET: APIRoute = async ({ request }) => {
|
||||
} catch (error) {
|
||||
return new Response(JSON.stringify({
|
||||
authenticated: false,
|
||||
authRequired: process.env.AUTHENTICATION_NECESSARY !== 'false',
|
||||
error: 'Session verification failed'
|
||||
}), {
|
||||
status: 200,
|
||||
|
||||
@ -3,6 +3,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import ToolCard from '../components/ToolCard.astro';
|
||||
import ToolFilters from '../components/ToolFilters.astro';
|
||||
import ToolMatrix from '../components/ToolMatrix.astro';
|
||||
import AIQueryInterface from '../components/AIQueryInterface.astro';
|
||||
import { promises as fs } from 'fs';
|
||||
import { load } from 'js-yaml';
|
||||
import path from 'path';
|
||||
@ -45,6 +46,16 @@ const tools = data.tools;
|
||||
</svg>
|
||||
SSO & Zugang erfahren
|
||||
</a>
|
||||
|
||||
<!-- New AI Query Button -->
|
||||
<button id="ai-query-btn" class="btn btn-accent" style="padding: 0.75rem 1.5rem; background-color: var(--color-accent); color: white;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
|
||||
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
|
||||
</svg>
|
||||
KI befragen
|
||||
</button>
|
||||
|
||||
<a href="#filters-section" class="btn btn-secondary" style="padding: 0.75rem 1.5rem;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
|
||||
@ -61,6 +72,9 @@ const tools = data.tools;
|
||||
<section id="filters-section" style="padding: 2rem 0;">
|
||||
<ToolFilters />
|
||||
</section>
|
||||
|
||||
<!-- AI Query Interface -->
|
||||
<AIQueryInterface />
|
||||
|
||||
<!-- Tools Grid -->
|
||||
<section id="tools-grid" style="padding-bottom: 2rem;">
|
||||
@ -86,10 +100,13 @@ const tools = data.tools;
|
||||
const toolsContainer = document.getElementById('tools-container');
|
||||
const toolsGrid = document.getElementById('tools-grid');
|
||||
const matrixContainer = document.getElementById('matrix-container');
|
||||
const aiInterface = document.getElementById('ai-interface');
|
||||
const filtersSection = document.getElementById('filters-section');
|
||||
const noResults = document.getElementById('no-results');
|
||||
const aiQueryBtn = document.getElementById('ai-query-btn');
|
||||
|
||||
// Guard against null elements
|
||||
if (!toolsContainer || !toolsGrid || !matrixContainer || !noResults) {
|
||||
if (!toolsContainer || !toolsGrid || !matrixContainer || !noResults || !aiInterface || !filtersSection) {
|
||||
console.error('Required DOM elements not found');
|
||||
return;
|
||||
}
|
||||
@ -97,14 +114,90 @@ const tools = data.tools;
|
||||
// Initial tools HTML
|
||||
const initialToolsHTML = toolsContainer.innerHTML;
|
||||
|
||||
// Authentication check function
|
||||
async function checkAuthentication() {
|
||||
try {
|
||||
const response = await fetch('/api/auth/status');
|
||||
const data = await response.json();
|
||||
return data.authenticated;
|
||||
} catch (error) {
|
||||
console.error('Auth check failed:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// AI Query Button Handler
|
||||
if (aiQueryBtn) {
|
||||
aiQueryBtn.addEventListener('click', async () => {
|
||||
const isAuthenticated = await checkAuthentication();
|
||||
|
||||
if (!isAuthenticated) {
|
||||
// Redirect to login, then back to AI view
|
||||
const returnUrl = `${window.location.pathname}?view=ai`;
|
||||
window.location.href = `/api/auth/login?returnTo=${encodeURIComponent(returnUrl)}`;
|
||||
} else {
|
||||
// Switch to AI view
|
||||
switchToView('ai');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Check URL parameters on page load for view switching
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const viewParam = urlParams.get('view');
|
||||
if (viewParam === 'ai') {
|
||||
// User was redirected after authentication, switch to AI view
|
||||
switchToView('ai');
|
||||
}
|
||||
|
||||
// Function to switch between different views
|
||||
function switchToView(view) {
|
||||
// Hide all views first (using non-null assertions since we've already checked)
|
||||
toolsGrid!.style.display = 'none';
|
||||
matrixContainer!.style.display = 'none';
|
||||
aiInterface!.style.display = 'none';
|
||||
filtersSection!.style.display = 'none';
|
||||
|
||||
// Update view toggle buttons
|
||||
const viewToggles = document.querySelectorAll('.view-toggle');
|
||||
viewToggles.forEach(btn => {
|
||||
btn.classList.toggle('active', btn.getAttribute('data-view') === view);
|
||||
});
|
||||
|
||||
// Show appropriate view
|
||||
switch (view) {
|
||||
case 'ai':
|
||||
aiInterface!.style.display = 'block';
|
||||
// Focus on the input
|
||||
const aiInput = document.getElementById('ai-query-input');
|
||||
if (aiInput) {
|
||||
setTimeout(() => aiInput.focus(), 100);
|
||||
}
|
||||
break;
|
||||
case 'matrix':
|
||||
matrixContainer!.style.display = 'block';
|
||||
filtersSection!.style.display = 'block';
|
||||
break;
|
||||
default: // grid
|
||||
toolsGrid!.style.display = 'block';
|
||||
filtersSection!.style.display = 'block';
|
||||
break;
|
||||
}
|
||||
|
||||
// Clear URL parameters after switching
|
||||
if (window.location.search) {
|
||||
window.history.replaceState({}, '', window.location.pathname);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle filtered results
|
||||
window.addEventListener('toolsFiltered', (event: Event) => {
|
||||
const customEvent = event as CustomEvent;
|
||||
const filtered = customEvent.detail;
|
||||
const currentView = document.querySelector('.view-toggle.active')?.getAttribute('data-view');
|
||||
|
||||
if (currentView === 'matrix') {
|
||||
// Matrix view handles its own rendering
|
||||
if (currentView === 'matrix' || currentView === 'ai') {
|
||||
// Matrix and AI views handle their own rendering
|
||||
return;
|
||||
}
|
||||
|
||||
@ -128,16 +221,12 @@ const tools = data.tools;
|
||||
window.addEventListener('viewChanged', (event: Event) => {
|
||||
const customEvent = event as CustomEvent;
|
||||
const view = customEvent.detail;
|
||||
|
||||
if (view === 'matrix') {
|
||||
toolsGrid.style.display = 'none';
|
||||
matrixContainer.style.display = 'block';
|
||||
} else {
|
||||
toolsGrid.style.display = 'block';
|
||||
matrixContainer.style.display = 'none';
|
||||
}
|
||||
switchToView(view);
|
||||
});
|
||||
|
||||
// Make switchToView available globally for the AI button
|
||||
(window as any).switchToAIView = () => switchToView('ai');
|
||||
|
||||
function createToolCard(tool) {
|
||||
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
||||
tool.projectUrl !== null &&
|
||||
|
||||
@ -590,6 +590,28 @@ footer {
|
||||
100% { background-color: transparent; }
|
||||
}
|
||||
|
||||
/* Loading spinner enhancement */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* AI Interface animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.kb-content {
|
||||
line-height: 1.7;
|
||||
}
|
||||
@ -925,6 +947,47 @@ footer {
|
||||
.tag-header {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.ai-interface {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.workflow-container {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.phase-header {
|
||||
padding: 1rem;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.phase-number {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: 1rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.phase-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.tool-rec-header {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.tool-rec-metadata {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.ai-input-container textarea {
|
||||
min-height: 100px;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@ -956,4 +1019,243 @@ footer {
|
||||
.phase-button {
|
||||
width: 100%;
|
||||
}
|
||||
.ai-query-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.phase-header {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.tool-recommendation {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.tool-rec-justification {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* AI Interface Styles - Add to global.css */
|
||||
|
||||
/* AI Interface Container */
|
||||
.ai-interface {
|
||||
padding: 2rem 0;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ai-query-section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.ai-input-container textarea {
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.ai-input-container textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
/* Loading, Error, and Results States */
|
||||
.ai-loading, .ai-error, .ai-results {
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
/* Workflow Visualization */
|
||||
.workflow-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.workflow-phase {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.phase-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
background-color: var(--color-bg);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.phase-header:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.phase-number {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.phase-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.phase-title {
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--color-text);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.phase-tools {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.workflow-arrow {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* Tool Recommendation Cards */
|
||||
.tool-recommendation {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tool-recommendation:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tool-recommendation.hosted {
|
||||
background-color: var(--color-hosted-bg);
|
||||
border-color: var(--color-hosted);
|
||||
}
|
||||
|
||||
.tool-recommendation.oss {
|
||||
background-color: var(--color-oss-bg);
|
||||
border-color: var(--color-oss);
|
||||
}
|
||||
|
||||
.tool-rec-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.tool-rec-name {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.tool-rec-priority {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tool-rec-priority.high {
|
||||
background-color: var(--color-error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tool-rec-priority.medium {
|
||||
background-color: var(--color-warning);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tool-rec-priority.low {
|
||||
background-color: var(--color-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tool-rec-justification {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 0.75rem;
|
||||
font-style: italic;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
border-left: 3px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.tool-rec-metadata {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.tool-rec-metadata .badge {
|
||||
font-size: 0.625rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
}
|
||||
|
||||
/* Enhanced button styling for AI context */
|
||||
.btn-accent {
|
||||
background-color: var(--color-accent);
|
||||
color: white;
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.btn-accent:hover {
|
||||
background-color: var(--color-accent-hover);
|
||||
border-color: var(--color-accent-hover);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Character counter styling */
|
||||
.ai-input-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ai-results {
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.tool-recommendation {
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.tool-recommendation:nth-child(1) { animation-delay: 0.1s; }
|
||||
.tool-recommendation:nth-child(2) { animation-delay: 0.2s; }
|
||||
.tool-recommendation:nth-child(3) { animation-delay: 0.3s; }
|
||||
|
||||
|
||||
|
||||
.ai-loading p {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user