mstoeck3/forensic-pathways
2
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Activity

phase 3

Browse Source
This commit is contained in:
overcuriousity 2025-07-26 21:16:20 +02:00
parent 867a651a55
commit d1b0998d9a
1 changed files with 23 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/AIQueryInterface.astro
View File

@ -54,23 +54,21 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
></textarea> ></textarea>
<!-- Smart Prompting Container --> <!-- Smart Prompting Container -->
<div id="smart-prompting-container" style="display: none; margin-top: 1rem;"> <div id="smart-prompting-container" class="smart-prompting-container" style="display: none;">
<div class="card" style="border-left: 4px solid var(--color-accent); padding: 1rem;"> <div class="card contextual-analysis-card approach">
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;"> <div id="prompting-status" class="prompting-status">
<span id="prompting-status">💡 KI analysiert Ihre Eingabe...</span> 💡 KI analysiert Ihre Eingabe...
<div id="prompting-spinner" style="display: none;"> <div id="prompting-spinner" class="prompting-spinner" style="display: none;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2" style="animation: spin 1s linear infinite;"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
<path d="M21 12a9 9 0 11-6.219-8.56"/> <path d="M21 12a9 9 0 11-6.219-8.56"/>
</svg> </svg>
</div> </div>
</div> </div>
<div id="suggested-questions" style="display: none;"> <div id="suggested-questions" class="suggested-questions" style="display: none;">
<p style="margin: 0 0 0.75rem 0; font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.5;"> <p style="margin: 0 0 0.75rem 0; font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.5;">
Zur besseren Analyse Ihres Szenarios könnten diese Informationen hilfreich sein: Zur besseren Analyse Ihres Szenarios könnten diese Informationen hilfreich sein:
</p> </p>
<div id="questions-list" style="display: flex; flex-direction: column; gap: 0.5rem;"> <div id="questions-list"></div>
<!-- Questions will be populated here -->
</div>
<div style="margin-top: 1rem; text-align: right;"> <div style="margin-top: 1rem; text-align: right;">
<button id="dismiss-suggestions" class="btn-icon" style="font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; background-color: var(--color-bg-secondary);"> <button id="dismiss-suggestions" class="btn-icon" style="font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; background-color: var(--color-bg-secondary);">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
@ -302,38 +300,19 @@ document.addEventListener('DOMContentLoaded', () => {
suggestions.forEach((question, index) => { suggestions.forEach((question, index) => {
const questionElement = document.createElement('div'); const questionElement = document.createElement('div');
questionElement.style.cssText = ` questionElement.className = 'suggestion-item';
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.375rem;
padding: 0.75rem;
cursor: pointer;
transition: var(--transition-fast);
font-size: 0.875rem;
line-height: 1.4;
`;
questionElement.innerHTML = ` questionElement.innerHTML = `
<div style="display: flex; align-items: start; gap: 0.5rem;"> <div style="display: flex; align-items: start; gap: 0.5rem;">
<span style="color: var(--color-accent); font-weight: bold; flex-shrink: 0;">${index + 1}.</span> <span class="suggestion-number">${index + 1}.</span>
<span style="flex: 1;">${question}</span> <span class="suggestion-text">${question}</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-secondary)" stroke-width="2" style="flex-shrink: 0; margin-top: 0.125rem;"> <svg class="suggestion-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"/> <line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/> <line x1="5" y1="12" x2="19" y2="12"/>
</svg> </svg>
</div> </div>
`; `;
questionElement.addEventListener('mouseenter', () => {
questionElement.style.backgroundColor = 'var(--color-bg-tertiary)';
questionElement.style.borderColor = 'var(--color-accent)';
});
questionElement.addEventListener('mouseleave', () => {
questionElement.style.backgroundColor = 'var(--color-bg-secondary)';
questionElement.style.borderColor = 'var(--color-border)';
});
questionElement.addEventListener('click', () => { questionElement.addEventListener('click', () => {
const currentText = aiInput.value.trim(); const currentText = aiInput.value.trim();
const newText = currentText ? `${currentText}\n\n${question}` : question; const newText = currentText ? `${currentText}\n\n${question}` : question;
@ -402,7 +381,7 @@ document.addEventListener('DOMContentLoaded', () => {
} catch (error) { } catch (error) {
if (error.name === 'AbortError') { if (error.name === 'AbortError') {
return; return; // User cancelled, ignore
} }
console.warn('Smart prompting failed:', error); console.warn('Smart prompting failed:', error);
@ -505,9 +484,8 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
} }
// ... [Keep all existing display functions - formatWorkflowSuggestion, renderBackgroundKnowledge, renderContextualAnalysis, displayWorkflowResults, displayToolResults] ...
function formatWorkflowSuggestion(text) { function formatWorkflowSuggestion(text) {
// Improved handling for different list formats
const numberedListPattern = /(\d+\.\s)/g; const numberedListPattern = /(\d+\.\s)/g;
if (numberedListPattern.test(text)) { if (numberedListPattern.test(text)) {
@ -522,6 +500,7 @@ document.addEventListener('DOMContentLoaded', () => {
} }
} }
// Handle bullet points
const bulletPattern = /^[\s]*[-\*•]\s/gm; const bulletPattern = /^[\s]*[-\*•]\s/gm;
if (bulletPattern.test(text)) { if (bulletPattern.test(text)) {
const items = text.split(/^[\s]*[-\*•]\s/gm).filter(item => item.trim().length > 0); const items = text.split(/^[\s]*[-\*•]\s/gm).filter(item => item.trim().length > 0);
@ -535,6 +514,7 @@ document.addEventListener('DOMContentLoaded', () => {
} }
} }
// Handle line breaks as lists
if (text.includes('\n')) { if (text.includes('\n')) {
const lines = text.split('\n').filter(line => line.trim().length > 0); const lines = text.split('\n').filter(line => line.trim().length > 0);
if (lines.length > 1) { if (lines.length > 1) {
@ -546,6 +526,7 @@ document.addEventListener('DOMContentLoaded', () => {
} }
} }
// Default paragraph formatting
return `<p style="margin: 0; line-height: 1.6; color: var(--color-text);">${text}</p>`; return `<p style="margin: 0; line-height: 1.6; color: var(--color-text);">${text}</p>`;
} }
@ -586,7 +567,6 @@ document.addEventListener('DOMContentLoaded', () => {
`; `;
} }
// Enhanced function to render contextual analysis sections
function renderContextualAnalysis(recommendation, mode) { function renderContextualAnalysis(recommendation, mode) {
let html = ''; let html = '';
@ -594,8 +574,8 @@ document.addEventListener('DOMContentLoaded', () => {
const analysisField = mode === 'workflow' ? recommendation.scenario_analysis : recommendation.problem_analysis; const analysisField = mode === 'workflow' ? recommendation.scenario_analysis : recommendation.problem_analysis;
if (analysisField) { if (analysisField) {
html += ` html += `
<div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-primary);"> <div class="card contextual-analysis-card scenario">
<h4 style="margin: 0 0 1rem 0; color: var(--color-primary); display: flex; align-items: center; gap: 0.5rem;"> <h4 class="analysis-header scenario">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 20h9"/> <path d="M12 20h9"/>
<path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/> <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
@ -610,8 +590,8 @@ document.addEventListener('DOMContentLoaded', () => {
// Investigation Approach Section // Investigation Approach Section
if (recommendation.investigation_approach) { if (recommendation.investigation_approach) {
html += ` html += `
<div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-accent);"> <div class="card contextual-analysis-card approach">
<h4 style="margin: 0 0 1rem 0; color: var(--color-accent); display: flex; align-items: center; gap: 0.5rem;"> <h4 class="analysis-header approach">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9,11 12,14 22,4"/> <polyline points="9,11 12,14 22,4"/>
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/> <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
@ -626,8 +606,8 @@ document.addEventListener('DOMContentLoaded', () => {
// Critical Considerations Section // Critical Considerations Section
if (recommendation.critical_considerations) { if (recommendation.critical_considerations) {
html += ` html += `
<div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-warning);"> <div class="card contextual-analysis-card critical">
<h4 style="margin: 0 0 1rem 0; color: var(--color-warning); display: flex; align-items: center; gap: 0.5rem;"> <h4 class="analysis-header critical">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/> <circle cx="12" cy="12" r="10"/>
<line x1="12" y1="8" x2="12" y2="12"/> <line x1="12" y1="8" x2="12" y2="12"/>