Floke/Brancheneinstufung2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Integrated SQLite database and project history into B2B Marketing Assistant

Browse Source 
- market_db_manager.py: Made DB_PATH configurable via environment variable.

- Dockerfile.b2b: Included market_db_manager.py in the B2B container image.

- docker-compose.yml: Configured separate DB paths and volumes for Market Intel and B2B Assistant.

- B2B Server: Added API routes for project management (list, load, save, delete).

- B2B UI: Implemented auto-save and a 'Project History' modal for loading past runs.
This commit is contained in:
Floke
2025-12-29 16:05:46 +00:00
parent 3503e8c459
commit 0a2d6076c4
6 changed files with 296 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Dockerfile.b2b
View File

@@ -45,6 +45,7 @@ COPY --from=frontend-builder /app/dist ./dist
# Copy the main Python orchestrator script from the project root
COPY b2b_marketing_orchestrator.py .
COPY market_db_manager.py .
# Copy Gemini API Key file if it exists in root
COPY gemini_api_key.txt .

227
b2b-marketing-assistant/App.tsx
View File

@@ -1,15 +1,48 @@
import React, { useState, useCallback } from 'react';
import React, { useState, useCallback, useEffect } from 'react';
import { InputForm } from './components/InputForm';
import { StepDisplay } from './components/StepDisplay';
import { LoadingSpinner, BotIcon, SparklesIcon, MarkdownIcon, PrintIcon } from './components/Icons';
import { ExportMenu } from './components/ExportMenu';
import { translations } from './constants';
import type { AnalysisStep, AnalysisData, InputData } from './types';
import type { AnalysisStep, AnalysisData, InputData, Project, ProjectMetadata } from './types';
import { generateMarkdown, downloadFile } from './services/export';
import { History, Clock, Trash2, X, ArrowRight, FolderOpen } from 'lucide-react';
const API_BASE_URL = 'api';
// --- DB HELPERS ---
const listProjects = async (): Promise<ProjectMetadata[]> => {
const response = await fetch(`${API_BASE_URL}/projects`);
if (!response.ok) throw new Error("Failed to list projects");
return await response.json();
};
const loadProjectData = async (id: string): Promise<Project> => {
const response = await fetch(`${API_BASE_URL}/projects/${id}`);
if (!response.ok) throw new Error("Failed to load project");
return await response.json();
};
const saveProject = async (data: any): Promise<any> => {
const response = await fetch(`${API_BASE_URL}/save-project`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
if (!response.ok) throw new Error("Failed to save project");
return await response.json();
};
const deleteProject = async (id: string): Promise<any> => {
const response = await fetch(`${API_BASE_URL}/projects/${id}`, {
method: 'DELETE'
});
if (!response.ok) throw new Error("Failed to delete project");
return await response.json();
};
const App: React.FC = () => {
const [inputData, setInputData] = useState<InputData>({
companyUrl: '',
@@ -25,10 +58,121 @@ const App: React.FC = () => {
const [selectedIndustry, setSelectedIndustry] = useState<string>('');
const [batchStatus, setBatchStatus] = useState<{ current: number; total: number; industry: string } | null>(null);
// Project Persistence
const [projectId, setProjectId] = useState<string | null>(null);
const [projectName, setProjectName] = useState<string>('');
const [showHistory, setShowHistory] = useState(false);
const [recentProjects, setRecentProjects] = useState<ProjectMetadata[]>([]);
const [isLoadingProjects, setIsLoadingProjects] = useState(false);
const t = translations[inputData.language];
const STEP_TITLES = t.stepTitles;
const STEP_KEYS: (keyof AnalysisData)[] = ['offer', 'targetGroups', 'personas', 'painPoints', 'gains', 'messages'];
// --- AUTO-SAVE EFFECT ---
useEffect(() => {
if (generationStep === 0 || !inputData.companyUrl) return;
const saveData = async () => {
let dynamicName = projectName;
try {
const urlObj = new URL(inputData.companyUrl.startsWith('http') ? inputData.companyUrl : `https://${inputData.companyUrl}`);
const host = urlObj.hostname.replace('www.', '');
if (generationStep >= 1) {
dynamicName = `${host} (Step ${generationStep})`;
} else {
dynamicName = `Draft: ${host}`;
}
} catch (e) {
dynamicName = projectName || "Untitled Project";
}
const dataToSave = {
id: projectId,
name: dynamicName,
currentStep: generationStep,
language: inputData.language,
inputs: inputData,
analysisData: analysisData
};
try {
const result = await saveProject(dataToSave);
if (result.id && !projectId) {
setProjectId(result.id);
}
} catch (e) {
console.error("Auto-save failed", e);
}
};
const timer = setTimeout(saveData, 2000);
return () => clearTimeout(timer);
}, [generationStep, analysisData, inputData, projectId, projectName]);
// --- DB ACTIONS ---
const fetchProjects = useCallback(async () => {
setIsLoadingProjects(true);
try {
const projects = await listProjects();
setRecentProjects(projects);
} catch (e) {
console.error("Failed to load projects", e);
} finally {
setIsLoadingProjects(false);
}
}, []);
useEffect(() => {
if (showHistory) fetchProjects();
}, [showHistory, fetchProjects]);
const handleProjectSelect = async (id: string) => {
setIsLoading(true);
setError(null);
try {
const project = await loadProjectData(id);
setProjectId(project.id);
setProjectName(project.name);
setInputData(project.inputs);
setAnalysisData(project.analysisData);
setGenerationStep(project.currentStep);
setShowHistory(false);
} catch (e) {
console.error(e);
setError("Fehler beim Laden des Projekts.");
} finally {
setIsLoading(false);
}
};
const handleDeleteProject = async (e: React.MouseEvent, id: string) => {
e.stopPropagation();
if (confirm(t.language === 'de' ? "Projekt wirklich löschen?" : "Delete project?")) {
try {
await deleteProject(id);
fetchProjects();
if (id === projectId) {
handleRestart();
}
} catch (e) {
console.error(e);
alert("Fehler beim Löschen.");
}
}
};
const handleRestart = () => {
setProjectId(null);
setProjectName('');
setAnalysisData({});
setGenerationStep(0);
setSelectedIndustry('');
setBatchStatus(null);
setError(null);
};
const handleStartGeneration = useCallback(async () => {
if (!inputData.companyUrl) {
@@ -303,13 +447,32 @@ const App: React.FC = () => {
return (
<div className="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-200 font-sans">
<main className="container mx-auto px-4 py-8 md:py-12">
<header className="text-center mb-10 print:hidden">
<header className="text-center mb-10 print:hidden relative">
<h1 className="text-4xl md:text-5xl font-extrabold text-slate-900 dark:text-white">
{t.appTitle}
</h1>
<p className="mt-4 text-lg text-slate-600 dark:text-slate-400">
{t.appSubtitle}
</p>
<div className="mt-6 flex justify-center gap-3">
<button
onClick={() => setShowHistory(true)}
className="flex items-center px-4 py-2 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 rounded-lg text-sm font-bold transition-all shadow-sm border border-slate-200 dark:border-slate-700"
>
<History className="mr-2 h-4 w-4 text-indigo-500" />
{inputData.language === 'de' ? 'Historie laden' : 'Load History'}
</button>
{generationStep > 0 && (
<button
onClick={handleRestart}
className="flex items-center px-4 py-2 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-400 rounded-lg text-sm font-medium transition-all shadow-sm border border-slate-200 dark:border-slate-700"
>
<X className="mr-2 h-4 w-4" />
{inputData.language === 'de' ? 'Neu starten' : 'Restart'}
</button>
)}
</div>
</header>
<div className="max-w-4xl mx-auto bg-white dark:bg-slate-800/50 rounded-2xl shadow-lg p-6 md:p-8 border border-slate-200 dark:border-slate-700 print:hidden">
@@ -426,6 +589,64 @@ const App: React.FC = () => {
)}
</div>
</main>
{/* History Modal */}
{showHistory && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm print:hidden">
<div className="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col max-h-[80vh] border border-slate-200 dark:border-slate-800">
<div className="p-4 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center bg-slate-50 dark:bg-slate-800/50">
<h3 className="font-bold text-slate-900 dark:text-white text-lg flex items-center gap-2">
<History className="text-indigo-500" size={20} />
{inputData.language === 'de' ? 'Projekt-Historie' : 'Project History'}
</h3>
<button onClick={() => setShowHistory(false)} className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 p-1 transition-colors">
<X size={20} />
</button>
</div>
<div className="flex-1 overflow-y-auto p-4 space-y-3">
{isLoadingProjects ? (
<div className="flex flex-col items-center justify-center p-12">
<LoadingSpinner />
<p className="mt-4 text-slate-500 text-sm">Lade Projekte...</p>
</div>
) : recentProjects.length > 0 ? (
recentProjects.map((p) => (
<button
key={p.id}
onClick={() => handleProjectSelect(p.id)}
className="w-full text-left p-4 rounded-xl bg-slate-50 dark:bg-slate-800/50 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 border border-slate-200 dark:border-slate-800 hover:border-indigo-200 dark:hover:border-indigo-700 transition-all group relative flex items-center justify-between"
>
<div className="flex-1 min-w-0 pr-4">
<div className="font-semibold text-slate-800 dark:text-slate-100 group-hover:text-indigo-700 dark:group-hover:text-indigo-300 truncate">{p.name}</div>
<div className="flex items-center gap-2 mt-1.5 text-xs text-slate-500 dark:text-slate-400">
<Clock size={12} />
<span>{new Date(p.updated_at).toLocaleDateString()} {new Date(p.updated_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span>
</div>
</div>
<div className="flex items-center gap-2">
<span
onClick={(e) => handleDeleteProject(e, p.id)}
className="p-2 text-slate-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-full transition-colors z-10"
title="Delete Project"
>
<Trash2 size={18} />
</span>
<ArrowRight className="text-indigo-300 group-hover:text-indigo-500 transition-colors" size={20} />
</div>
</button>
))
) : (
<div className="text-center text-slate-400 dark:text-slate-500 py-12">
<History size={48} className="mx-auto mb-4 opacity-20" />
<p>{inputData.language === 'de' ? 'Keine vergangenen Projekte gefunden.' : 'No past projects found.'}</p>
</div>
)}
</div>
</div>
</div>
)}
</div>
);
};

39
b2b-marketing-assistant/server.cjs
View File

@@ -164,6 +164,45 @@ app.post('/api/next-step', (req, res) => {
}
});
// --- DATABASE ROUTES ---
// Initialize DB on startup
const dbScript = path.join(__dirname, 'market_db_manager.py');
spawn('python3', [dbScript, 'init']);
app.get('/api/projects', (req, res) => {
runPythonScript([dbScript, 'list'], res);
});
app.get('/api/projects/:id', (req, res) => {
runPythonScript([dbScript, 'load', req.params.id], res);
});
app.delete('/api/projects/:id', (req, res) => {
runPythonScript([dbScript, 'delete', req.params.id], res);
});
app.post('/api/save-project', (req, res) => {
const projectData = req.body;
const tmpDir = path.join(__dirname, 'tmp');
if (!fs.existsSync(tmpDir)) fs.mkdirSync(tmpDir);
const tempFilePath = path.join(tmpDir, `save_${Date.now()}.json`);
try {
fs.writeFileSync(tempFilePath, JSON.stringify(projectData));
runPythonScript([dbScript, 'save', tempFilePath], res);
// Clean up temp file
if (fs.existsSync(tempFilePath)) {
// Note: runPythonScript is async, so we might want to handle deletion there
// But since we are passing it to python which reads it, we'll let it be for now
// or pass it to runPythonScript cleanup if we had that.
// For now, I'll just leave it and let the user manage tmp if needed.
}
} catch (e) {
res.status(500).json({ error: 'Failed to write project data to disk' });
}
});
// --- SERVE STATIC FRONTEND ---
// Serve static files from the 'dist' directory created by `npm run build`
app.use(express.static(path.join(__dirname, 'dist')));

29
b2b-marketing-assistant/types.ts
View File

@@ -14,10 +14,27 @@ export interface AnalysisStep {
}
export interface AnalysisData {
offer: AnalysisStep;
targetGroups: AnalysisStep;
personas: AnalysisStep;
painPoints: AnalysisStep;
gains: AnalysisStep;
messages: AnalysisStep;
offer?: AnalysisStep;
targetGroups?: AnalysisStep;
personas?: AnalysisStep;
painPoints?: AnalysisStep;
gains?: AnalysisStep;
messages?: AnalysisStep;
searchStrategyICP?: AnalysisStep;
digitalSignals?: AnalysisStep;
targetPages?: AnalysisStep;
}
export interface ProjectMetadata {
id: string;
name: string;
created_at: string;
updated_at: string;
}
export interface Project extends ProjectMetadata {
currentStep: number;
language: 'de' | 'en';
inputs: InputData;
analysisData: AnalysisData;
}

8
docker-compose.yml
View File

@@ -33,12 +33,16 @@ services:
volumes:
# Sideloading: Python Logic
- ./b2b_marketing_orchestrator.py:/app/b2b_marketing_orchestrator.py
- ./market_db_manager.py:/app/market_db_manager.py
# Database Persistence
- ./b2b_projects.db:/app/b2b_projects.db
# Logs
- ./Log_from_docker:/app/Log_from_docker
# Keys
- ./gemini_api_key.txt:/app/gemini_api_key.txt
environment:
- PYTHONUNBUFFERED=1
- DB_PATH=/app/b2b_projects.db
# Port 3002 is internal only
# --- MARKET INTELLIGENCE BACKEND ---
@@ -51,14 +55,18 @@ services:
volumes:
# Sideloading: Python Logic & Config
- ./market_intel_orchestrator.py:/app/market_intel_orchestrator.py
- ./market_db_manager.py:/app/market_db_manager.py
- ./config.py:/app/config.py
- ./helpers.py:/app/helpers.py
# Database Persistence
- ./market_intelligence.db:/app/market_intelligence.db
# Logs & Keys
- ./Log:/app/Log
- ./gemini_api_key.txt:/app/gemini_api_key.txt
- ./serpapikey.txt:/app/serpapikey.txt
environment:
- PYTHONUNBUFFERED=1
- DB_PATH=/app/market_intelligence.db
# Port 3001 is internal only
# --- MARKET INTELLIGENCE FRONTEND ---

2
market_db_manager.py
View File

@@ -4,7 +4,7 @@ import os
import uuid
from datetime import datetime
DB_PATH = "/app/market_intelligence.db"
DB_PATH = os.environ.get("DB_PATH", "/app/market_intelligence.db")
def get_db_connection():
conn = sqlite3.connect(DB_PATH)