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

feat: Market Intel UI Polish - Hide History in Modal & Better Project Naming

Browse Source
This commit is contained in:
Floke
2025-12-29 15:17:04 +00:00
parent 79efda5060
commit 1b1a779ae0
2 changed files with 252 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
general-market-intelligence/App.tsx
View File

@@ -46,9 +46,25 @@ const App: React.FC = () => {
const saveData = async () => {
if (!referenceUrl) return;
let dynamicName = projectName;
try {
const refHost = new URL(referenceUrl).hostname.replace('www.', '');
if (analysisResults && analysisResults.length > 0) {
// Use the first analyzed company as the title anchor
dynamicName = `${analysisResults[0].companyName} (Ref: ${refHost})`;
} else if (competitors && competitors.length > 0) {
dynamicName = `Search: ${refHost} Lookalikes`;
} else if (!projectName || projectName === "New Project") {
dynamicName = `Draft: ${refHost}`;
}
} catch (e) {
dynamicName = projectName || "Untitled Project";
}
const dataToSave = {
id: projectId,
name: projectName || new URL(referenceUrl).hostname,
name: dynamicName,
created_at: new Date().toISOString(), // DB updates updated_at automatically
currentStep: step,
language,

116
general-market-intelligence/components/StepInput.tsx
View File

@@ -1,32 +1,8 @@
import React, { useState, useEffect } from 'react';
import { Search, ArrowRight, Loader2, Globe, Link as LinkIcon, Languages, Upload, FileText, X, FolderOpen, FileUp, History, Clock } from 'lucide-react';
import { Language, AnalysisResult, SearchStrategy } from '../types';
import { parseMarkdownReport } from '../utils/reportParser';
import { listProjects, loadProject } from '../services/geminiService';
interface StepInputProps {
onSearch: (url: string, context: string, market: string, language: Language) => void;
onLoadReport: (strategy: SearchStrategy, results: AnalysisResult[]) => void;
isLoading: boolean;
}
const COUNTRIES = [
"Germany", "Austria", "Switzerland", "United Kingdom", "France", "Spain", "Italy", "Netherlands", "Europe (General)", "USA"
];
export const StepInput: React.FC<StepInputProps> = ({ onSearch, onLoadReport, isLoading }) => {
const [activeMode, setActiveMode] = useState<'new' | 'load'>('new');
const [url, setUrl] = useState('');
const [fileContent, setFileContent] = useState('');
const [fileName, setFileName] = useState('');
const [market, setMarket] = useState(COUNTRIES[0]);
const [language, setLanguage] = useState<Language>('de');
const [recentProjects, setRecentProjects] = useState<any[]>([]);
const [isLoadingProjects, setIsLoadingProjects] = useState(false);
const [showHistory, setShowHistory] = useState(false);
useEffect(() => {
if (showHistory) {
const fetchProjects = async () => {
setIsLoadingProjects(true);
try {
@@ -39,7 +15,8 @@ export const StepInput: React.FC<StepInputProps> = ({ onSearch, onLoadReport, is
}
};
fetchProjects();
}, []);
}
}, [showHistory]);
const handleProjectSelect = async (projectId: string) => {
try {
@@ -55,39 +32,7 @@ export const StepInput: React.FC<StepInputProps> = ({ onSearch, onLoadReport, is
}
};
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
setFileContent(event.target?.result as string);
setFileName(file.name);
};
reader.readAsText(file);
}
};
const handleLoadReport = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
const content = event.target?.result as string;
const parsed = parseMarkdownReport(content);
if (parsed) {
onLoadReport(parsed.strategy, parsed.results);
} else {
alert("Could not parse report. Please make sure it's a valid ProspectIntel MD file.");
}
};
reader.readAsText(file);
}
};
const handleRemoveFile = () => {
setFileContent('');
setFileName('');
};
// ... (file handlers remain same)
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
@@ -97,10 +42,8 @@ export const StepInput: React.FC<StepInputProps> = ({ onSearch, onLoadReport, is
};
return (
<div className="max-w-6xl mx-auto mt-12 p-6 flex flex-col md:flex-row gap-8">
<div className="max-w-4xl mx-auto mt-12 p-6 relative">
{/* LEFT: Main Action Area */}
<div className="flex-1 max-w-2xl mx-auto">
<div className="text-center mb-10">
<h2 className="text-3xl font-bold text-slate-900 mb-4">Market Intelligence Agent</h2>
<div className="flex justify-center gap-2 mb-6">
@@ -116,6 +59,12 @@ export const StepInput: React.FC<StepInputProps> = ({ onSearch, onLoadReport, is
>
Load .MD File
</button>
<button
onClick={() => setShowHistory(true)}
className="px-4 py-2 rounded-lg text-sm font-bold bg-slate-800 text-white shadow-md hover:bg-slate-700 flex items-center gap-2"
>
<History size={16} /> Load History
</button>
</div>
{activeMode === 'new' ? (
@@ -132,6 +81,7 @@ export const StepInput: React.FC<StepInputProps> = ({ onSearch, onLoadReport, is
<div className="bg-white shadow-xl rounded-2xl p-8 border border-slate-100">
{activeMode === 'new' ? (
<form onSubmit={handleSubmit} className="space-y-8">
{/* Form Fields (kept same) */}
<div>
<label className="block text-sm font-semibold text-slate-700 mb-3">
1. Strategic Context (Markdown/Text)
@@ -275,43 +225,51 @@ export const StepInput: React.FC<StepInputProps> = ({ onSearch, onLoadReport, is
</div>
)}
</div>
{/* History Modal */}
{showHistory && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm">
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col max-h-[80vh]">
<div className="p-4 border-b border-slate-200 flex justify-between items-center bg-slate-50">
<h3 className="font-bold text-slate-900 text-lg flex items-center gap-2">
<History className="text-indigo-600" size={20} />
Project History
</h3>
<button onClick={() => setShowHistory(false)} className="text-slate-400 hover:text-slate-600 p-1">
<X size={20} />
</button>
</div>
{/* RIGHT: Recent Projects Sidebar */}
<div className="w-full md:w-80 flex flex-col gap-4">
<div className="bg-white rounded-2xl shadow-lg border border-slate-200 p-6 h-full max-h-[800px] flex flex-col">
<div className="flex items-center gap-3 mb-6">
<History className="text-indigo-600" size={24} />
<h3 className="font-bold text-slate-900 text-lg">Past Runs</h3>
</div>
<div className="flex-1 overflow-y-auto pr-2 space-y-3">
<div className="flex-1 overflow-y-auto p-4 space-y-3">
{isLoadingProjects ? (
<div className="flex justify-center p-4">
<Loader2 className="animate-spin text-slate-400" />
<div className="flex justify-center p-8">
<Loader2 className="animate-spin text-indigo-500" size={32} />
</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 hover:bg-indigo-50 border border-slate-100 hover:border-indigo-200 transition-all group"
className="w-full text-left p-4 rounded-xl bg-slate-50 hover:bg-indigo-50 border border-slate-200 hover:border-indigo-200 transition-all group relative"
>
<div className="font-semibold text-slate-800 group-hover:text-indigo-700 truncate">{p.name}</div>
<div className="flex items-center gap-2 mt-2 text-xs text-slate-400">
<div className="font-semibold text-slate-800 group-hover:text-indigo-700 pr-8">{p.name}</div>
<div className="flex items-center gap-2 mt-1.5 text-xs 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>
<ArrowRight className="absolute right-4 top-1/2 -translate-y-1/2 text-indigo-300 group-hover:text-indigo-600 opacity-0 group-hover:opacity-100 transition-all" size={20} />
</button>
))
) : (
<div className="text-center text-slate-400 text-sm py-10">
No saved runs yet.
<div className="text-center text-slate-400 py-10">
<History size={48} className="mx-auto mb-4 opacity-20" />
No past projects found.
</div>
)}
</div>
</div>
</div>
)}
</div>
);