airefactor #19
@ -125,10 +125,39 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
|
||||
<a href="https://mistral.ai/privacy-policy/" target="_blank" rel="noopener noreferrer" style="color: var(--color-primary);">Datenschutzrichtlinien</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ai-restore-section" style="margin-top: 1rem; margin-bottom: 1.5rem; text-align: center;">
|
||||
<div style="display: inline-flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 0.5rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-secondary); font-size: 0.875rem;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="17 8 12 3 7 8"/>
|
||||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||||
</svg>
|
||||
Vorherige Analyse wiederherstellen:
|
||||
</div>
|
||||
|
||||
<label for="upload-previous-analysis" class="btn btn-secondary" style="margin: 0; font-size: 0.875rem; padding: 0.5rem 1rem;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<path d="M16 13H8"/>
|
||||
<path d="M16 17H8"/>
|
||||
<path d="M10 9H8"/>
|
||||
</svg>
|
||||
JSON-Datei hochladen
|
||||
<input type="file" id="upload-previous-analysis" accept=".json" style="display: none;" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary);">
|
||||
Laden Sie eine zuvor heruntergeladene Analyse-Datei, um Ergebnisse und Audit-Trail anzuzeigen
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div style="display: flex; justify-content: center; gap: 1rem;">
|
||||
<button id="ai-submit-btn" class="btn btn-accent" style="padding: 0.75rem 2rem;">
|
||||
<div style="display: flex; justify-content: center; gap: 1rem; margin-top: 1rem;">
|
||||
<button id="ai-submit-btn" class="btn btn-accent" style="padding: 0.75rem 2rem; font-size: 1rem;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<path d="M14.828 14.828a4 4 0 0 1-5.656 0"/>
|
||||
<path d="M9 9a3 3 0 1 1 6 0c0 .749-.269 1.433-.73 1.96L11 14v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1l-3.27-3.04A3 3 0 0 1 5 9a3 3 0 0 1 6 0"/>
|
||||
@ -136,7 +165,6 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
|
||||
<span id="submit-btn-text">Empfehlungen generieren</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div id="ai-loading" class="ai-loading hidden">
|
||||
@ -345,6 +373,7 @@ class AIQueryInterface {
|
||||
console.log('[AI Interface] Initializing...');
|
||||
this.initializeElements();
|
||||
this.setupEventListeners();
|
||||
this.setupUnifiedUploadSystem();
|
||||
this.updateModeUI();
|
||||
console.log('[AI Interface] Initialized successfully');
|
||||
}
|
||||
@ -421,6 +450,9 @@ class AIQueryInterface {
|
||||
|
||||
this.elements.dismissSuggestions?.addEventListener('click', () => this.hideSmartPrompting());
|
||||
|
||||
// CRITICAL: Setup upload for previous analysis (always available)
|
||||
this.setupPreviousAnalysisUpload();
|
||||
|
||||
console.log('[AI Interface] Event listeners setup complete');
|
||||
}
|
||||
|
||||
@ -987,28 +1019,6 @@ class AIQueryInterface {
|
||||
${this.renderPhaseGroups(rawAuditTrail, stats)}
|
||||
</div>
|
||||
|
||||
<!-- Download/Upload Controls -->
|
||||
<div class="ai-results-controls" style="margin-top: 1.5rem; text-align: center; border-top: 1px solid var(--color-border); padding-top: 1rem;">
|
||||
<button id="download-results-btn" class="btn btn-secondary" style="margin-right: 0.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 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="7 10 12 15 17 10"/>
|
||||
<line x1="12" y1="15" x2="12" y2="3"/>
|
||||
</svg>
|
||||
Analyse herunterladen
|
||||
</button>
|
||||
|
||||
<label for="upload-results" 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="17 8 12 3 7 8"/>
|
||||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||||
</svg>
|
||||
Analyse hochladen
|
||||
<input type="file" id="upload-results" accept=".json" style="display: none;" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Technical Details Toggle -->
|
||||
<div class="technical-toggle">
|
||||
<button class="technical-toggle-btn" onclick="this.parentElement.parentElement.querySelector('.technical-details').classList.toggle('collapsed'); this.textContent = this.parentElement.parentElement.querySelector('.technical-details').classList.contains('collapsed') ? 'Technische Details anzeigen' : 'Technische Details verbergen';">
|
||||
@ -1023,9 +1033,6 @@ class AIQueryInterface {
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Setup download functionality
|
||||
this.setupDownloadUpload();
|
||||
|
||||
} catch (error) {
|
||||
console.error('[AI Interface] Error rendering audit trail:', error);
|
||||
@ -1049,6 +1056,50 @@ class AIQueryInterface {
|
||||
}
|
||||
}
|
||||
|
||||
setupUnifiedUploadSystem() {
|
||||
// Setup the always-available upload (previous analysis)
|
||||
const previousUploadInput = document.getElementById('upload-previous-analysis');
|
||||
if (previousUploadInput) {
|
||||
previousUploadInput.addEventListener('change', (event) => {
|
||||
const files = event.target.files;
|
||||
const file = files ? files[0] : null;
|
||||
if (file) {
|
||||
this.handlePreviousAnalysisUpload(file);
|
||||
}
|
||||
event.target.value = ''; // Reset for reuse
|
||||
});
|
||||
console.log('[AI Interface] Previous analysis upload setup complete');
|
||||
}
|
||||
|
||||
// Setup download buttons automatically when they appear
|
||||
const setupDownloadBtn = () => {
|
||||
const downloadBtn = document.getElementById('download-results-btn');
|
||||
if (downloadBtn && !downloadBtn.hasAttribute('data-setup')) {
|
||||
downloadBtn.setAttribute('data-setup', 'true');
|
||||
downloadBtn.addEventListener('click', () => this.downloadResults());
|
||||
console.log('[AI Interface] Download button setup complete');
|
||||
}
|
||||
};
|
||||
|
||||
// Try to setup immediately (if already present)
|
||||
setupDownloadBtn();
|
||||
|
||||
// Watch for dynamically added download buttons
|
||||
const observer = new MutationObserver(() => {
|
||||
setupDownloadBtn();
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
|
||||
// Store observer for cleanup
|
||||
this.uploadObserver = observer;
|
||||
|
||||
console.log('[AI Interface] Unified upload system setup complete');
|
||||
}
|
||||
|
||||
calculateAuditStats(auditTrail) {
|
||||
if (!auditTrail || auditTrail.length === 0) {
|
||||
return {
|
||||
@ -1270,26 +1321,6 @@ class AIQueryInterface {
|
||||
return actions[action] || action;
|
||||
}
|
||||
|
||||
setupDownloadUpload() {
|
||||
const downloadBtn = document.getElementById('download-results-btn');
|
||||
const uploadInput = document.getElementById('upload-results');
|
||||
|
||||
if (downloadBtn) {
|
||||
downloadBtn.addEventListener('click', () => this.downloadResults());
|
||||
}
|
||||
|
||||
if (uploadInput) {
|
||||
uploadInput.addEventListener('change', (event) => {
|
||||
// FIXED: Remove TypeScript casting
|
||||
const files = event.target.files;
|
||||
const file = files ? files[0] : null;
|
||||
if (file) {
|
||||
this.handleFileUpload(file);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
downloadResults() {
|
||||
if (!this.currentRecommendation) {
|
||||
alert('Keine Analyse zum Herunterladen verfügbar.');
|
||||
@ -1334,7 +1365,105 @@ class AIQueryInterface {
|
||||
console.log('[AI Interface] Analysis downloaded');
|
||||
}
|
||||
|
||||
async handleFileUpload(file) {
|
||||
validateUploadStructure(data) {
|
||||
try {
|
||||
return !!(
|
||||
data &&
|
||||
typeof data === 'object' &&
|
||||
data.metadata &&
|
||||
typeof data.metadata === 'object' &&
|
||||
typeof data.metadata.timestamp === 'string' &&
|
||||
data.recommendation &&
|
||||
typeof data.recommendation === 'object' &&
|
||||
Array.isArray(data.auditTrail)
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('[AI Interface] Structure validation error:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
displayUploadedResults(data) {
|
||||
try {
|
||||
console.log('[AI Interface] Displaying uploaded results');
|
||||
|
||||
// Show upload banner
|
||||
this.showUploadedBanner(data.metadata);
|
||||
|
||||
// Restore interface state
|
||||
this.currentRecommendation = data.recommendation;
|
||||
|
||||
// Display the uploaded analysis
|
||||
this.showResults();
|
||||
|
||||
// Update the recommendation display based on mode
|
||||
if (data.metadata.mode === 'workflow') {
|
||||
this.displayWorkflowResults(data.recommendation, data.metadata.userQuery);
|
||||
} else {
|
||||
this.displayToolResults(data.recommendation, data.metadata.userQuery);
|
||||
}
|
||||
|
||||
// Render the uploaded audit trail
|
||||
setTimeout(() => {
|
||||
try {
|
||||
this.renderAuditTrail(data.auditTrail);
|
||||
console.log('[AI Interface] Audit trail from upload rendered successfully');
|
||||
} catch (error) {
|
||||
console.error('[AI Interface] Failed to render uploaded audit trail:', error);
|
||||
}
|
||||
}, 200);
|
||||
|
||||
console.log('[AI Interface] Uploaded analysis displayed successfully');
|
||||
} catch (error) {
|
||||
console.error('[AI Interface] Error displaying uploaded results:', error);
|
||||
this.showError('Fehler beim Anzeigen der hochgeladenen Analyse: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
showUploadedBanner(metadata) {
|
||||
const banner = `
|
||||
<div class="uploaded-results-banner" style="background: var(--color-bg-secondary); border: 1px solid var(--color-warning); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;">
|
||||
<div style="font-size: 1.5rem;">📁</div>
|
||||
<div style="flex: 1;">
|
||||
<strong style="color: var(--color-warning);">Hochgeladene Analyse</strong>
|
||||
<div style="font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 0.25rem;">
|
||||
Erstellt: ${new Date(metadata.timestamp).toLocaleString('de-DE')} |
|
||||
Modus: ${metadata.mode} |
|
||||
${metadata.toolsDataHash ? `Hash: ${metadata.toolsDataHash.slice(0, 8)}...` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="this.parentElement.remove()" style="background: none; border: none; color: var(--color-text-secondary); cursor: pointer; font-size: 1.25rem;">×</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (this.elements && this.elements.results) {
|
||||
this.elements.results.insertAdjacentHTML('afterbegin', banner);
|
||||
}
|
||||
}
|
||||
|
||||
setupPreviousAnalysisUpload() {
|
||||
const uploadInput = document.getElementById('upload-previous-analysis');
|
||||
|
||||
if (uploadInput) {
|
||||
uploadInput.addEventListener('change', (event) => {
|
||||
const files = event.target.files;
|
||||
const file = files ? files[0] : null;
|
||||
if (file) {
|
||||
this.handlePreviousAnalysisUpload(file);
|
||||
}
|
||||
// Reset the input so the same file can be uploaded again
|
||||
event.target.value = '';
|
||||
});
|
||||
|
||||
console.log('[AI Interface] Previous analysis upload setup complete');
|
||||
} else {
|
||||
console.warn('[AI Interface] Previous analysis upload input not found');
|
||||
}
|
||||
}
|
||||
|
||||
async handlePreviousAnalysisUpload(file) {
|
||||
console.log('[AI Interface] Handling previous analysis upload:', file.name);
|
||||
|
||||
try {
|
||||
// Security validation
|
||||
if (file.size > 10 * 1024 * 1024) {
|
||||
@ -1358,82 +1487,30 @@ class AIQueryInterface {
|
||||
throw new Error('Ungültiges Analyse-Dateiformat');
|
||||
}
|
||||
|
||||
console.log('[AI Interface] Valid analysis file uploaded');
|
||||
this.displayUploadedResults(data);
|
||||
console.log('[AI Interface] Valid previous analysis file uploaded');
|
||||
|
||||
} catch (error) {
|
||||
console.error('[AI Interface] Upload failed:', error);
|
||||
alert(`Upload fehlgeschlagen: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
validateUploadStructure(data) {
|
||||
try {
|
||||
return !!(
|
||||
data &&
|
||||
typeof data === 'object' &&
|
||||
data.metadata &&
|
||||
typeof data.metadata === 'object' &&
|
||||
typeof data.metadata.timestamp === 'string' &&
|
||||
data.recommendation &&
|
||||
typeof data.recommendation === 'object' &&
|
||||
Array.isArray(data.auditTrail)
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('[AI Interface] Structure validation error:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
displayUploadedResults(data) {
|
||||
try {
|
||||
// Show upload banner
|
||||
this.showUploadedBanner(data.metadata);
|
||||
|
||||
// Restore interface state
|
||||
this.currentRecommendation = data.recommendation;
|
||||
// Hide any existing results or errors
|
||||
this.hideResults();
|
||||
this.hideError();
|
||||
this.hideLoading();
|
||||
|
||||
// Display the uploaded analysis
|
||||
this.showResults();
|
||||
this.displayUploadedResults(data);
|
||||
|
||||
// Update the recommendation display
|
||||
if (data.metadata.mode === 'workflow') {
|
||||
this.displayWorkflowResults(data.recommendation, data.metadata.userQuery);
|
||||
} else {
|
||||
this.displayToolResults(data.recommendation, data.metadata.userQuery);
|
||||
// Update mode if different
|
||||
if (data.metadata.mode && data.metadata.mode !== this.currentMode) {
|
||||
this.setMode(data.metadata.mode);
|
||||
}
|
||||
|
||||
// Render the uploaded audit trail
|
||||
setTimeout(() => {
|
||||
this.renderAuditTrail(data.auditTrail);
|
||||
}, 100);
|
||||
// Optionally restore the query in the input field
|
||||
if (data.metadata.userQuery && this.elements.input) {
|
||||
this.elements.input.value = data.metadata.userQuery;
|
||||
this.updateCharacterCount();
|
||||
}
|
||||
|
||||
console.log('[AI Interface] Uploaded analysis displayed successfully');
|
||||
} catch (error) {
|
||||
console.error('[AI Interface] Error displaying uploaded results:', error);
|
||||
alert('Fehler beim Anzeigen der hochgeladenen Analyse');
|
||||
}
|
||||
}
|
||||
|
||||
showUploadedBanner(metadata) {
|
||||
const banner = `
|
||||
<div class="uploaded-results-banner" style="background: var(--color-bg-secondary); border: 1px solid var(--color-warning); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;">
|
||||
<div style="font-size: 1.5rem;">📁</div>
|
||||
<div style="flex: 1;">
|
||||
<strong style="color: var(--color-warning);">Hochgeladene Analyse</strong>
|
||||
<div style="font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 0.25rem;">
|
||||
Erstellt: ${new Date(metadata.timestamp).toLocaleString('de-DE')} |
|
||||
Modus: ${metadata.mode} |
|
||||
${metadata.toolsDataHash ? `Hash: ${metadata.toolsDataHash.slice(0, 8)}...` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="this.parentElement.remove()" style="background: none; border: none; color: var(--color-text-secondary); cursor: pointer; font-size: 1.25rem;">×</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// FIXED: Add null checking
|
||||
if (this.elements && this.elements.results) {
|
||||
this.elements.results.insertAdjacentHTML('afterbegin', banner);
|
||||
console.error('[AI Interface] Previous analysis upload failed:', error);
|
||||
this.showError(`Upload fehlgeschlagen: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user