arebynd/promptstory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sprzątanie projektu - dodanie podglądu gpx - dodanie obsługi logo i avatara - dodanie editable config do prostej edycji tekstów na stronie

Browse Source
This commit is contained in:
Arek Bykowski
2026-02-15 18:43:34 +01:00
parent 78a34498d0
commit 981ce1d1b2
13 changed files with 459 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

198
App.tsx
View File

@@ -11,11 +11,13 @@ import { ChevronLeft, ExternalLink, Sparkles, User, Lock, ArrowRight, AlertCircl
import { generateStoryContent } from './services/geminiService';
import { getEnvVar } from './utils/envUtils';
// --- CONFIG IMPORT ---
import { AUTHOR_CONFIG } from './_EDITABLE_CONFIG/author';
import { UI_TEXT } from './_EDITABLE_CONFIG/ui_text';
const STORAGE_KEY = 'gpx-storyteller-state-v6';
const AUTH_KEY = 'promptstory-auth-token';
// --- PASSWORD CONFIGURATION ---
// STRICT MODE: No fallbacks. The environment variable must be set in Coolify/Vercel/Netlify.
const APP_PASSWORD = getEnvVar('VITE_APP_PASSWORD');
const INITIAL_STATE: WizardState = {
@@ -44,12 +46,9 @@ const INITIAL_STATE: WizardState = {
}
};
// --- LOGIN SCREEN COMPONENT ---
const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogin }) => {
const [input, setInput] = useState('');
const [error, setError] = useState(false);
// Check if password is misconfigured (empty)
const isConfigMissing = !APP_PASSWORD;
const handleSubmit = (e: React.FormEvent) => {
@@ -67,16 +66,10 @@ const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogi
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
<div className="bg-white p-8 rounded-xl shadow-lg border border-red-200 max-w-md w-full text-center">
<Bug className="mx-auto text-red-500 mb-4" size={48} />
<h2 className="text-xl font-bold text-gray-900">Błąd Konfiguracji</h2>
<h2 className="text-xl font-bold text-gray-900">{UI_TEXT.login.configError}</h2>
<p className="text-gray-600 mt-2 text-sm">
Aplikacja nie wykryła hasła w zmiennych środowiskowych.
Missing VITE_APP_PASSWORD.
</p>
<div className="mt-4 bg-gray-100 p-3 rounded text-left text-xs font-mono text-gray-700">
<p>Brakuje zmiennej: <span className="font-bold">VITE_APP_PASSWORD</span></p>
<p className="mt-2">Jeśli używasz Coolify/Vercel:</p>
<p>1. Dodaj zmienną w panelu.</p>
<p>2. Przebuduj projekt (Re-deploy).</p>
</div>
</div>
</div>
);
@@ -85,83 +78,66 @@ const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogi
return (
<div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
<div className="bg-white p-8 rounded-xl shadow-lg border border-gray-100 max-w-md w-full text-center space-y-6 animate-fade-in relative">
<div className="flex justify-center mb-2">
<div className="bg-[#EA4420]/10 p-4 rounded-full text-[#EA4420]">
<Lock size={32} />
</div>
</div>
<div>
<h2 className="text-2xl font-bold text-gray-900">Dostęp Chroniony</h2>
<p className="text-gray-500 mt-2">Wprowadź hasło, aby uzyskać dostęp.</p>
<h2 className="text-2xl font-bold text-gray-900">{UI_TEXT.login.title}</h2>
<p className="text-gray-500 mt-2">{UI_TEXT.login.desc}</p>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="relative">
<input
type="password"
value={input}
onChange={(e) => {
setInput(e.target.value);
setError(false);
}}
placeholder="Hasło..."
className={`w-full p-4 border rounded-lg outline-none transition-all font-medium text-center tracking-widest ${
error
? 'border-red-300 bg-red-50 focus:border-red-500'
: 'border-gray-200 focus:border-[#EA4420] focus:ring-1 focus:ring-[#EA4420]'
}`}
autoFocus
/>
</div>
<input
type="password"
value={input}
onChange={(e) => {
setInput(e.target.value);
setError(false);
}}
placeholder="Hasło..."
className={`w-full p-4 border rounded-lg outline-none transition-all font-medium text-center tracking-widest ${
error
? 'border-red-300 bg-red-50 focus:border-red-500'
: 'border-gray-200 focus:border-[#EA4420] focus:ring-1 focus:ring-[#EA4420]'
}`}
autoFocus
/>
{error && (
<div className="flex items-center justify-center gap-2 text-red-500 text-sm font-medium animate-pulse">
<AlertCircle size={16} />
<span>Nieprawidłowe hasło</span>
<span>{UI_TEXT.login.error}</span>
</div>
)}
<button
type="submit"
className="w-full bg-[#EA4420] text-white py-4 rounded-lg font-bold hover:bg-[#d63b1a] transition-colors flex items-center justify-center gap-2"
>
<span>Odblokuj</span>
<span>{UI_TEXT.login.btn}</span>
<ArrowRight size={20} />
</button>
</form>
<p className="text-xs text-gray-300 pt-4">
PromptStory v1.2 • Secure Production Build
</p>
</div>
</div>
);
};
const App: React.FC = () => {
// Auth State
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [isAuthChecking, setIsAuthChecking] = useState(true);
// App State
const [data, setData] = useState<WizardState>(INITIAL_STATE);
const [generatedContent, setGeneratedContent] = useState<GeneratedContent | null>(null);
const [isGenerating, setIsGenerating] = useState(false);
const [isLoaded, setIsLoaded] = useState(false);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
// Image loading states
const [logoError, setLogoError] = useState(false);
const [avatarError, setAvatarError] = useState(false);
// LOGO & AVATAR STATE
const [logoLoaded, setLogoLoaded] = useState(false);
const [avatarLoaded, setAvatarLoaded] = useState(false);
// 1. Check Auth on Mount
useEffect(() => {
const storedAuth = localStorage.getItem(AUTH_KEY);
if (storedAuth === 'true') {
setIsAuthenticated(true);
}
if (storedAuth === 'true') setIsAuthenticated(true);
setIsAuthChecking(false);
}, []);
@@ -178,21 +154,18 @@ const App: React.FC = () => {
resetApp();
};
// 2. Load Data Persistence Logic
useEffect(() => {
const saved = localStorage.getItem(STORAGE_KEY);
if (saved) {
try {
const parsed = JSON.parse(saved);
parsed.files = []; // Reset files
parsed.files = [];
if (!parsed.stats) parsed.stats = { distance: '', duration: '', elevation: '' };
if (!parsed.waypoints) parsed.waypoints = [];
if (!parsed.tripData) parsed.tripData = { ...INITIAL_STATE.tripData };
if (!parsed.tone) parsed.tone = null;
if (!parsed.goal) parsed.goal = null;
if (!parsed.storyStyle) parsed.storyStyle = null;
setData(parsed);
} catch (e) {
console.error("Failed to load state", e);
@@ -216,37 +189,28 @@ const App: React.FC = () => {
};
const nextStep = () => {
if (data.step < Step.RESULT) {
updateData({ step: data.step + 1 });
}
if (data.step < Step.RESULT) updateData({ step: data.step + 1 });
};
const prevStep = () => {
if (data.step > Step.CONTEXT) {
updateData({ step: data.step - 1 });
}
if (data.step > Step.CONTEXT) updateData({ step: data.step - 1 });
};
const handleGenerate = async () => {
setIsGenerating(true);
setErrorMessage(null);
// STRICT MODE: Use VITE_API_KEY
const apiKey = getEnvVar('VITE_API_KEY');
if (!apiKey) {
setErrorMessage("BŁĄD KRYTYCZNY: Brak klucza API (VITE_API_KEY). Skonfiguruj zmienne w panelu Coolify.");
setErrorMessage("BŁĄD: Brak VITE_API_KEY.");
setIsGenerating(false);
return;
}
try {
const content = await generateStoryContent(data, apiKey);
setGeneratedContent(content);
updateData({ step: Step.RESULT });
} catch (error: any) {
console.error("Generowanie nie powiodło się:", error);
setErrorMessage("Błąd generowania: " + (error.message || 'Sprawdź konsolę'));
setErrorMessage("Błąd: " + (error.message || 'Unknown'));
} finally {
setIsGenerating(false);
}
@@ -255,15 +219,12 @@ const App: React.FC = () => {
const handleRegenerate = async (slideCount: number, feedback: string) => {
setIsGenerating(true);
setErrorMessage(null);
const apiKey = getEnvVar('VITE_API_KEY');
try {
const content = await generateStoryContent(data, apiKey || '', { slideCount, feedback });
setGeneratedContent(content);
} catch (error: any) {
console.error("Regenerowanie nie powiodło się:", error);
setErrorMessage("Błąd regenerowania: " + (error.message || ''));
setErrorMessage("Błąd: " + (error.message || ''));
} finally {
setIsGenerating(false);
}
@@ -277,39 +238,34 @@ const App: React.FC = () => {
};
if (isAuthChecking || !isLoaded) return null;
if (!isAuthenticated) {
return <LoginScreen onLogin={handleLogin} />;
}
const stepsLabels = ['Kontekst', 'Typ', 'Platforma', 'Vibe & Cel', 'Szczegóły'];
if (!isAuthenticated) return <LoginScreen onLogin={handleLogin} />;
return (
<div className="min-h-screen bg-white text-gray-900 flex flex-col font-sans">
<header className="bg-white sticky top-0 z-10 border-b border-gray-100">
<div className="max-w-4xl mx-auto px-6 py-4 flex justify-between items-center">
<div className="flex items-center space-x-3">
{!logoError ? (
<img
{/* LOGO LOGIC: Image is hidden by default. If it loads, it shows and text hides. */}
<img
src="logo.png"
onError={() => setLogoError(true)}
alt="PromptStory Logo"
className="w-10 h-10 object-contain"
/>
) : (
<div className="text-[#EA4420]">
<Sparkles size={32} strokeWidth={2} />
alt="Logo"
onLoad={() => setLogoLoaded(true)}
className={`h-10 object-contain ${logoLoaded ? 'block' : 'hidden'}`}
/>
{!logoLoaded && (
<div className="flex items-center gap-2">
<div className="text-[#EA4420]"><Sparkles size={32} strokeWidth={2} /></div>
<h1 className="text-xl font-bold tracking-tight text-gray-900">{UI_TEXT.header.appTitle}</h1>
</div>
)}
<h1 className="text-xl font-bold tracking-tight text-gray-900">PromptStory</h1>
</div>
<div className="flex items-center gap-4">
<button onClick={resetApp} className="text-xs font-medium text-gray-400 hover:text-[#EA4420] transition-colors uppercase tracking-wide">
Resetuj
{UI_TEXT.header.resetBtn}
</button>
<button onClick={handleLogout} className="text-xs font-medium text-gray-400 hover:text-red-500 transition-colors uppercase tracking-wide">
Wyloguj
{UI_TEXT.header.logoutBtn}
</button>
</div>
</div>
@@ -319,17 +275,14 @@ const App: React.FC = () => {
{data.step !== Step.RESULT && (
<div className="mb-12">
<div className="flex justify-between mb-3">
{stepsLabels.map((label, idx) => (
{UI_TEXT.steps.labels.map((label, idx) => (
<span key={label} className={`text-xs font-bold uppercase tracking-wider transition-colors ${data.step >= idx ? 'text-[#EA4420]' : 'text-gray-300'}`}>
0{idx + 1}. {label}
</span>
))}
</div>
<div className="h-1 bg-gray-100 rounded-full overflow-hidden">
<div
className="h-full bg-[#EA4420] transition-all duration-500 ease-out"
style={{ width: `${((data.step + 1) / 5) * 100}%` }}
/>
<div className="h-full bg-[#EA4420] transition-all duration-500 ease-out" style={{ width: `${((data.step + 1) / 5) * 100}%` }} />
</div>
</div>
)}
@@ -339,22 +292,8 @@ const App: React.FC = () => {
{data.step === Step.EVENT_TYPE && <StepEventType data={data} updateData={updateData} nextStep={nextStep} />}
{data.step === Step.PLATFORM && <StepPlatform data={data} updateData={updateData} nextStep={nextStep} />}
{data.step === Step.TONE_GOAL && <StepToneGoal data={data} updateData={updateData} nextStep={nextStep} />}
{data.step === Step.DETAILS && (
<StepDetails
data={data}
updateData={updateData as any}
onGenerate={handleGenerate}
isGenerating={isGenerating}
/>
)}
{data.step === Step.RESULT && generatedContent && (
<StepResult
content={generatedContent}
onRegenerate={handleRegenerate}
isRegenerating={isGenerating}
tripData={data.tripData}
/>
)}
{data.step === Step.DETAILS && <StepDetails data={data} updateData={updateData as any} onGenerate={handleGenerate} isGenerating={isGenerating} />}
{data.step === Step.RESULT && generatedContent && <StepResult content={generatedContent} onRegenerate={handleRegenerate} isRegenerating={isGenerating} tripData={data.tripData} />}
{errorMessage && (
<div className="mt-6 p-4 bg-red-50 text-red-600 rounded-md border border-red-100 text-sm text-center">
@@ -372,26 +311,28 @@ const App: React.FC = () => {
className="flex items-center space-x-2 text-gray-500 hover:text-gray-900 font-semibold px-6 py-3 rounded-md border border-gray-200 hover:bg-gray-50 transition-colors disabled:opacity-50"
>
<ChevronLeft size={20} />
<span>Wróć</span>
<span>{UI_TEXT.steps.nav.back}</span>
</button>
</div>
</div>
)}
</main>
{/* FOOTER - Uses AUTHOR_CONFIG */}
<footer className="border-t border-gray-100 py-10 bg-gray-50/30 mt-auto">
<div className="max-w-4xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-8">
<div className="flex items-start md:items-center gap-5">
<div className="relative group cursor-pointer flex-shrink-0">
<div className="absolute -inset-0.5 bg-gradient-to-r from-[#EA4420] to-orange-400 rounded-full opacity-30 group-hover:opacity-100 transition duration-500 blur"></div>
{!avatarError ? (
<img
src="avatar.jpeg"
onError={() => setAvatarError(true)}
alt="Arkadiusz Bykowski"
className="relative w-20 h-20 rounded-full object-cover border border-gray-100 bg-white"
/>
) : (
{/* AVATAR LOGIC */}
<img
src={AUTHOR_CONFIG.avatarImage}
alt={AUTHOR_CONFIG.name}
onLoad={() => setAvatarLoaded(true)}
className={`relative w-20 h-20 rounded-full object-cover border border-gray-100 bg-white ${avatarLoaded ? 'block' : 'hidden'}`}
/>
{!avatarLoaded && (
<div className="relative w-20 h-20 rounded-full border border-gray-100 bg-white flex items-center justify-center text-gray-300">
<User size={40} />
</div>
@@ -399,20 +340,25 @@ const App: React.FC = () => {
</div>
<div className="text-left">
<h3 className="text-gray-900 font-bold text-xl leading-tight">Arkadiusz Bykowski</h3>
<h3 className="text-gray-900 font-bold text-xl leading-tight">{AUTHOR_CONFIG.name}</h3>
<p className="text-gray-600 text-sm mt-2 leading-relaxed max-w-lg">
Zamieniam Twoją stronę w maszynkę do zarabiania pieniędzy.
{AUTHOR_CONFIG.description}
</p>
<div className="flex flex-wrap gap-2 mt-3">
{AUTHOR_CONFIG.tags.map(tag => (
<span key={tag} className="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-md">{tag}</span>
))}
</div>
</div>
</div>
<a
href="https://bykowski.pro/"
href={AUTHOR_CONFIG.websiteUrl}
target="_blank"
rel="noopener noreferrer"
className="flex-shrink-0 flex items-center space-x-2 text-sm font-bold text-gray-700 hover:text-[#EA4420] transition-all bg-white border border-gray-200 px-6 py-3 rounded-full hover:shadow-md hover:border-[#EA4420]/30 active:scale-95"
>
<span>Odwiedź stronę</span>
<span>{AUTHOR_CONFIG.websiteLabel}</span>
<ExternalLink size={16} />
</a>
</div>

90
prompts/modular.ts → _EDITABLE_CONFIG/ai_prompts.ts
View File

@@ -1,5 +1,9 @@
// === ELEMENT 1: KONTEKST (RAMY CZASOWE I NARRACYJNE) ===
export const CONTEXT_PROMPTS = {
import { WizardState } from '../types';
// === HELPER CONSTANTS ===
const CONTEXT_PROMPTS = {
relacja: `
### KROK 1: KONTEKST - RELACJA (VLOG)
Twoim zadaniem jest opisanie wydarzenia, w którym brałeś bezpośredni udział. Piszesz z pierwszej osoby ("ja"). Skup się na autentyczności, tym co widziałeś, czułeś i robiłeś. To ma być dynamiczny zapis Twoich doświadczeń, a nie suchy raport.
@@ -13,8 +17,7 @@ Twoim zadaniem jest opisanie wydarzenia, w którym brałeś bezpośredni udział
`
};
// === ELEMENT 1B: STYL OPOWIEŚCI (OPCJONALNY DLA KONTEKSTU OPOWIEŚĆ) ===
export const STORY_STYLE_PROMPTS = {
const STORY_STYLE_PROMPTS = {
noir: `
### KROK 1B: STYL - KRYMINAŁ NOIR
- KLIMAT: Mroczny, deszczowy, cyniczny, pełen cieni i kontrastów.
@@ -31,8 +34,7 @@ export const STORY_STYLE_PROMPTS = {
`
};
// === ELEMENT 2: TYP WYDARZENIA (SŁOWNICTWO I BRANŻA) ===
export const EVENT_PROMPTS = {
const EVENT_PROMPTS = {
sport: `
### KROK 2: TYP - SPORT & WYSIŁEK
- SŁOWNICTWO: Kadencja, strefy tętna, PB (Personal Best), bomba, ściana, endorfiny, laktat, tempo, waty, regeneracja.
@@ -65,8 +67,7 @@ export const EVENT_PROMPTS = {
`
};
// === ELEMENT 3: PLATFORMA (FORMAT TECHNICZNY I STRUKTURA) ===
export const PLATFORM_PROMPTS = {
const PLATFORM_PROMPTS = {
instagram: `
### KROK 3: PLATFORMA - INSTAGRAM (PROFESSIONAL CAROUSEL)
- ZASADA GŁÓWNA: Twoim celem jest zatrzymanie scrollowania (Stop the scroll).
@@ -158,8 +159,7 @@ W polu 'overlay_text' dla Stravy wpisuj tylko krótkie hasła typu: "DANE", "TWA
`
};
// === ELEMENT 4A: TON (VIBE / OSOBOWOŚĆ) ===
export const TONE_PROMPTS = {
const TONE_PROMPTS = {
funny: `
### KROK 4A: TON - LUZAK / ŚMIESZEK (Funny & Casual)
- STYL: Autoironia, żarty sytuacyjne, slang, memiczny język.
@@ -180,8 +180,7 @@ export const TONE_PROMPTS = {
`
};
// === ELEMENT 4B: CEL (STRATEGIA I CTA) ===
export const GOAL_PROMPTS = {
const GOAL_PROMPTS = {
engagement: `
### KROK 4B: CEL - BUDOWANIE SPOŁECZNOŚCI (Engagement)
- STRATEGIA: Zadawaj pytania, bądź kontrowersyjny lub bardzo "relatable" (buduj tożsamość).
@@ -200,4 +199,69 @@ export const GOAL_PROMPTS = {
- CTA: Jasna instrukcja (Kliknij link w BIO, Kup teraz, Zapisz się).
- HOOK: Obietnica korzyści lub rozwiązania palącego problemu.
`
};
};
// === MAIN GENERATOR FUNCTION ===
export const getSystemPrompt = (data: WizardState): string => {
// 1. KROK 1: KONTEKST
let contextPrompt = data.context
? CONTEXT_PROMPTS[data.context]
: CONTEXT_PROMPTS.relacja;
// 1b. KROK 1b: STYL OPOWIEŚCI
if (data.context === 'opowiesc' && data.storyStyle) {
const stylePrompt = STORY_STYLE_PROMPTS[data.storyStyle];
contextPrompt += `\n\n${stylePrompt}`;
}
// 2. KROK 2: TYP WYDARZENIA
const eventPrompt = data.eventType
? EVENT_PROMPTS[data.eventType]
: EVENT_PROMPTS.other;
// 3. KROK 3: PLATFORMA
const platformPrompt = data.platform
? PLATFORM_PROMPTS[data.platform]
: PLATFORM_PROMPTS.instagram;
// 4a. KROK 4a: TON
const tonePrompt = data.tone
? TONE_PROMPTS[data.tone]
: TONE_PROMPTS.funny;
// 4b. KROK 4b: CEL
const goalPrompt = data.goal
? GOAL_PROMPTS[data.goal]
: GOAL_PROMPTS.engagement;
// SKLEJANIE MASTER PROMPTU
return `
Jesteś światowej klasy ekspertem od Content Marketingu i Social Media.
Twoim zadaniem jest stworzenie treści idealnie dopasowanej do poniższej konfiguracji "puzzli".
=== KONFIGURACJA MASTER PROMPT (PUZZLE) ===
${contextPrompt}
${eventPrompt}
${platformPrompt}
${tonePrompt}
${goalPrompt}
=== INSTRUKCJA KOŃCOWA ===
Twoim zadaniem jest synteza powyższych elementów w jedną spójną całość.
1. Przyjmij perspektywę czasową z kroku 1 (KONTEKST).
2. Jeśli zdefiniowano STYL (Noir/Fantasy), bezwzględnie narzuć ten klimat na całą narrację.
3. Użyj słownictwa i atmosfery z kroku 2 (TYP).
4. Sformatuj wynik technicznie zgodnie z wymogami kroku 3 (PLATFORMA).
5. Nadaj wypowiedzi charakter i styl z kroku 4a (TON).
6. Zrealizuj cel biznesowy/społeczny z kroku 4b (CEL).
Nie dodawaj meta-komentarzy. Zwróć czysty JSON zgodny ze schematem zdefiniowanym w sekcji PLATFORMA.
`;
};

10
_EDITABLE_CONFIG/author.ts Normal file
View File

@@ -0,0 +1,10 @@
export const AUTHOR_CONFIG = {
name: "Arkadiusz AreBynd[] Bykowski",
description: "Zamieniam Twoją stronę w maszynkę do zarabiania pieniędzy. Od 12 lat projektuję strony, które sprzedają bez Twojego udziału – póki Ty śpisz, one robią za Ciebie robotę. Specjalizuję się w landing page'ach, które budują zaufanie i zmieniają odwiedzających w płacących klientów.",
tags: ["Product Design", "AI Automation", "No-Code"],
websiteUrl: "https://bykowski.pro/",
websiteLabel: "Odwiedź stronę",
// Nazwa pliku w folderze public
avatarImage: "avatar.jpeg"
};

143
_EDITABLE_CONFIG/ui_text.ts Normal file
View File

@@ -0,0 +1,143 @@
export const UI_TEXT = {
header: {
appTitle: "PromptStory",
resetBtn: "Resetuj",
logoutBtn: "Wyloguj"
},
steps: {
labels: ['Kontekst', 'Typ', 'Platforma', 'Vibe & Cel', 'Szczegóły'],
nav: {
back: "Wróć",
next: "Dalej"
}
},
stepContext: {
title: "Wybierz Kontekst",
subtitle: "Jaki rodzaj historii chcesz opowiedzieć?",
relacja: {
title: "Relacja (Vlog)",
desc: "Tu i teraz, emocje, akcja."
},
opowiesc: {
title: "Opowieść",
desc: "Wspomnienia, refleksja, morał."
},
styles: {
title: "Wybierz Styl Opowieści",
subtitle: "Nadaj historii unikalny klimat.",
noir: {
title: "Kryminał NOIR",
desc: "Mrok, deszcz, cyniczny detektyw."
},
fantasy: {
title: "Przygoda Fantasy",
desc: "Epicka podróż, magia, artefakty."
}
}
},
stepType: {
title: "Rodzaj Wydarzenia",
subtitle: "Czego dotyczy Twoja relacja?",
types: {
sport: "Wydarzenie Sportowe",
culture: "Wydarzenie Kulturalne",
trip: "Wycieczka / Podróż",
party: "Impreza",
work: "Praca / Konferencja",
other: "Inne"
}
},
stepPlatform: {
title: "Wybierz Platformę",
subtitle: "Gdzie opublikujesz materiał?",
instagram: {
title: "Instagram",
desc: "Carousel / Post"
},
youtube: {
title: "YouTube",
desc: "Shorts / Video"
},
strava: {
title: "Strava",
desc: "Activity / Photos"
}
},
stepToneGoal: {
toneTitle: "Wybierz Ton (Vibe)",
toneSubtitle: "Jak chcesz brzmieć?",
goalTitle: "Wybierz Cel",
goalSubtitle: "Co chcesz osiągnąć tym postem?",
nextBtn: "Przejdź do szczegółów",
tones: {
funny: { label: "Luzak", desc: "Humor, dystans, memy" },
serious: { label: "Ekspert", desc: "Konkrety, wiedza, liczby" },
inspirational: { label: "Mentor", desc: "Emocje, głębia, lekcja" }
},
goals: {
engagement: { label: "Społeczność", desc: "Komentarze i dyskusja" },
viral: { label: "Zasięg", desc: "Udostępnienia (Share)" },
sales: { label: "Sprzedaż", desc: "Kliknięcie w link / Zakup" }
}
},
stepDetails: {
title: "Szczegóły",
subtitleTrip: "Zaplanuj trasę i opisz przebieg podróży.",
subtitleEvent: "Uzupełnij informacje o wydarzeniu.",
tripSection: {
title: "Plan Podróży",
apiKeyMissing: "Brak klucza w konfiguracji (VITE_GOOGLE_MAPS_KEY)",
apiKeyMissingDesc: "Wklej klucz ręcznie poniżej, aby mapy zadziałały.",
apiKeyPlaceholder: "Wklej klucz Google Maps API (AIza...)",
modeDriving: "Samochód / Droga",
modeWalking: "Pieszo / Szlak",
modeRequired: "* Wybór rodzaju trasy jest wymagany",
startPoint: "Punkt Startowy (np. Kraków)",
startDesc: "Opis startu (np. Zbiórka o 6:00)",
endPoint: "Punkt Końcowy (np. Zakopane)",
endDesc: "Opis końca (np. Nareszcie piwo)",
stopPlaceholder: "Przystanek",
stopDescPlaceholder: "Co tam robiliście?",
addStop: "Dodaj przystanek"
},
fields: {
title: "Tytuł wydarzenia",
titlePlaceholder: "np. Roadtrip po Bałkanach",
desc: "Krótki opis / Notatki",
descPlaceholder: "Ogólny klimat, emocje, dodatkowe szczegóły...",
files: "Materiały pomocnicze (Max 3)",
filesDrop: "Kliknij, aby dodać pliki",
filesSub: "GPX, PDF, JPG, PNG",
gpxPreviewBtn: "👁️ Podgląd danych dla AI"
},
generateBtn: {
loading: "Generowanie Historii...",
idle: "Generuj Relację"
}
},
stepResult: {
title: "Twój Vibe Gotowy! 🎉",
subtitle: "Oto kompletna struktura Twojego posta. Skopiuj i publikuj.",
editBtn: "Edytuj / Popraw",
captionTitle: "Post Caption (Opis)",
slidesTitle: "Struktura Wizualna (Slajdy / Zdjęcia)",
copy: "Kopiuj",
copied: "Skopiowano!",
editPanel: {
title: "Wprowadź poprawki",
regenerating: "Nanoszę poprawki...",
slidesLabel: "Liczba slajdów / Elementów",
feedbackLabel: "Co chcesz zmienić w treści?",
feedbackPlaceholder: "np. Zmień 'ból szczęki' na 'ból głowy'. Dodaj więcej emoji...",
applyBtn: "Zastosuj poprawki"
}
},
login: {
title: "Dostęp Chroniony",
desc: "Wprowadź hasło, aby uzyskać dostęp.",
btn: "Odblokuj",
error: "Nieprawidłowe hasło",
configError: "Błąd Konfiguracji"
}
};

37
components/StepContext.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { WizardState, Step } from '../types';
import { WizardState } from '../types';
import { Camera, BookOpen, Ghost, Sword } from 'lucide-react';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
interface StepContextProps {
data: WizardState;
@@ -11,13 +13,11 @@ interface StepContextProps {
const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep }) => {
const handleContextSelect = (context: WizardState['context']) => {
// If selecting Relacja, clear storyStyle and move on
if (context === 'relacja') {
updateData({ context, storyStyle: null });
setTimeout(nextStep, 150);
} else {
// If selecting Opowiesc, just update context and stay for sub-step
updateData({ context, storyStyle: null }); // Reset style if switching back to opowiesc
updateData({ context, storyStyle: null });
}
};
@@ -29,10 +29,9 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
return (
<div className="space-y-8 animate-fade-in">
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Kontekst</h2>
<p className="text-gray-500 mb-8 text-lg">Jaki rodzaj historii chcesz opowiedzieć?</p>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepContext.title}</h2>
<p className="text-gray-500 mb-8 text-lg">{UI_TEXT.stepContext.subtitle}</p>
{/* Main Context Selection */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<button
onClick={() => handleContextSelect('relacja')}
@@ -43,8 +42,8 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
}`}
>
<Camera size={48} className={`mb-5 stroke-1 transition-colors ${data.context === 'relacja' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
<span className="text-xl font-bold tracking-tight">Relacja (Vlog)</span>
<span className="text-sm opacity-75 mt-2 font-medium">Tu i teraz, emocje, akcja.</span>
<span className="text-xl font-bold tracking-tight">{UI_TEXT.stepContext.relacja.title}</span>
<span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepContext.relacja.desc}</span>
</button>
<button
@@ -56,16 +55,15 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
}`}
>
<BookOpen size={48} className={`mb-5 stroke-1 transition-colors ${data.context === 'opowiesc' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
<span className="text-xl font-bold tracking-tight">Opowieść</span>
<span className="text-sm opacity-75 mt-2 font-medium">Wspomnienia, refleksja, morał.</span>
<span className="text-xl font-bold tracking-tight">{UI_TEXT.stepContext.opowiesc.title}</span>
<span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepContext.opowiesc.desc}</span>
</button>
</div>
{/* Sub-step for Opowiesc: Story Style */}
{data.context === 'opowiesc' && (
<div className="animate-fade-in border-t border-gray-100 pt-8">
<h3 className="text-xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Styl Opowieści</h3>
<p className="text-gray-500 mb-6 text-sm">Nadaj historii unikalny klimat.</p>
<h3 className="text-xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepContext.styles.title}</h3>
<p className="text-gray-500 mb-6 text-sm">{UI_TEXT.stepContext.styles.subtitle}</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<button
@@ -78,8 +76,8 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
>
<Ghost size={32} className={`mr-4 stroke-1 ${data.storyStyle === 'noir' ? 'text-white' : 'text-gray-400 group-hover:text-gray-900'}`} />
<div>
<span className="text-lg font-bold tracking-tight block">Kryminał NOIR</span>
<span className={`text-xs block mt-1 ${data.storyStyle === 'noir' ? 'text-gray-400' : 'text-gray-500'}`}>Mrok, deszcz, cyniczny detektyw.</span>
<span className="text-lg font-bold tracking-tight block">{UI_TEXT.stepContext.styles.noir.title}</span>
<span className={`text-xs block mt-1 ${data.storyStyle === 'noir' ? 'text-gray-400' : 'text-gray-500'}`}>{UI_TEXT.stepContext.styles.noir.desc}</span>
</div>
</button>
@@ -93,17 +91,16 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
>
<Sword size={32} className={`mr-4 stroke-1 ${data.storyStyle === 'fantasy' ? 'text-purple-600' : 'text-gray-400 group-hover:text-purple-600'}`} />
<div>
<span className="text-lg font-bold tracking-tight block">Przygoda Fantasy</span>
<span className="text-xs text-gray-500 block mt-1">Epicka podróż, magia, artefakty.</span>
<span className="text-lg font-bold tracking-tight block">{UI_TEXT.stepContext.styles.fantasy.title}</span>
<span className="text-xs text-gray-500 block mt-1">{UI_TEXT.stepContext.styles.fantasy.desc}</span>
</div>
</button>
</div>
</div>
)}
</div>
</div>
);
};
export default StepContext;
export default StepContext;

169
components/StepDetails.tsx
View File

@@ -1,9 +1,10 @@
import React, { useRef, useState, useEffect } from 'react';
import { WizardState } from '../types';
import { UploadCloud, FileText, X, Image as ImageIcon, Sparkles, Loader2, MapPin, Navigation, Plus, Trash2, Flag, Target, AlertCircle, CheckCircle2, Car, Footprints } from 'lucide-react';
import { UploadCloud, FileText, X, Image as ImageIcon, Sparkles, Loader2, MapPin, Navigation, Plus, Trash2, Flag, Target, AlertCircle, CheckCircle2, Car, Footprints, Eye } from 'lucide-react';
import { processFile } from '../utils/fileUtils';
import { getEnvVar } from '../utils/envUtils';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
// --- HELPER COMPONENT: PLACE AUTOCOMPLETE INPUT (WIDGET VERSION) ---
interface PlaceAutocompleteInputProps {
@@ -21,33 +22,20 @@ const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value,
const inputRef = useRef<HTMLInputElement>(null);
const autocompleteRef = useRef<any>(null);
// Initialize Google Autocomplete Widget
useEffect(() => {
if (!scriptLoaded || !inputRef.current || !(window as any).google || autocompleteRef.current) return;
try {
const google = (window as any).google;
// Use the standard Autocomplete widget attached to the input
const autocomplete = new google.maps.places.Autocomplete(inputRef.current, {
fields: ["place_id", "geometry", "name", "formatted_address"],
types: ["geocode", "establishment"]
});
autocompleteRef.current = autocomplete;
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
// FIX: Use formatted_address as fallback if name is empty/missing
if (!place.geometry) return;
const name = place.name || place.formatted_address || "";
const address = place.formatted_address;
// Update parent state
onChange(name, address);
});
} catch (e) {
@@ -71,8 +59,6 @@ const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value,
placeholder={placeholder}
autoComplete="off"
/>
{/* Address Confirmation Hint */}
{addressPreview && (
<div className="text-[10px] text-gray-500 mt-1 ml-1 flex items-center gap-1 animate-fade-in">
<CheckCircle2 size={10} className="text-green-500" />
@@ -84,7 +70,6 @@ const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value,
};
// --- MAIN COMPONENT ---
interface StepDetailsProps {
data: WizardState;
updateData: (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => void;
@@ -97,27 +82,24 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
const [error, setError] = useState<string | null>(null);
const [mapError, setMapError] = useState<{title: string, msg: string} | null>(null);
const [scriptLoaded, setScriptLoaded] = useState(false);
// State for GPX Text Preview
const [showGpxPreview, setShowGpxPreview] = useState(false);
// STRICT MODE: Use VITE_GOOGLE_MAPS_KEY
const getEffectiveKey = () => {
if (data.tripData?.googleMapsKey) return data.tripData.googleMapsKey;
return getEnvVar('VITE_GOOGLE_MAPS_KEY');
};
const effectiveKey = getEffectiveKey();
// Warning if no key is found at all
const isKeyMissing = !effectiveKey;
// --- GOOGLE MAPS LOADING ---
const loadMapsScript = (apiKey: string) => {
if (!apiKey) return;
if ((window as any).google?.maps?.places) {
setScriptLoaded(true);
return;
}
const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
if (existingScript) {
const interval = setInterval(() => {
@@ -129,7 +111,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
}, 500);
return;
}
const script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&loading=async&v=weekly`;
script.async = true;
@@ -157,7 +138,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
}
}, [data.eventType, effectiveKey]);
// Initialize Trip Data if missing
useEffect(() => {
if (data.eventType === 'trip') {
if (!data.tripData) {
@@ -167,7 +147,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
endPoint: { place: '', description: '' },
stops: [{ id: crypto.randomUUID(), place: '', description: '' }],
travelMode: null,
googleMapsKey: '' // Don't auto-fill undefined keys
googleMapsKey: ''
}
});
}
@@ -190,7 +170,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
updateData(prev => ({ files: prev.files.filter(f => f.id !== id) }));
};
// --- TRIP DATA HELPERS ---
const updateApiKey = (val: string) => {
updateData(prev => ({
tripData: prev.tripData ? { ...prev.tripData, googleMapsKey: val } : prev.tripData
@@ -202,13 +181,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
updateData(prev => {
if (!prev.tripData) return {};
return {
tripData: {
...prev.tripData,
[pointType]: {
...prev.tripData[pointType],
[field]: value
}
}
tripData: { ...prev.tripData, [pointType]: { ...prev.tripData[pointType], [field]: value } }
};
});
};
@@ -217,79 +190,97 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
updateData(prev => {
if (!prev.tripData) return {};
const newStops = prev.tripData.stops.map(s => s.id === id ? { ...s, [field]: value } : s);
return {
tripData: { ...prev.tripData, stops: newStops }
};
return { tripData: { ...prev.tripData, stops: newStops } };
});
};
const addStop = () => {
updateData(prev => {
if (!prev.tripData) return {};
return {
tripData: {
...prev.tripData,
stops: [...prev.tripData.stops, { id: crypto.randomUUID(), place: '', description: '' }]
}
};
return { tripData: { ...prev.tripData, stops: [...prev.tripData.stops, { id: crypto.randomUUID(), place: '', description: '' }] } };
});
};
const removeStop = (id: string) => {
updateData(prev => {
if (!prev.tripData) return {};
return {
tripData: {
...prev.tripData,
stops: prev.tripData.stops.filter(s => s.id !== id)
}
};
return { tripData: { ...prev.tripData, stops: prev.tripData.stops.filter(s => s.id !== id) } };
});
};
const setTravelMode = (mode: 'DRIVING' | 'WALKING') => {
updateData(prev => {
if (!prev.tripData) return {};
return {
tripData: { ...prev.tripData, travelMode: mode }
};
return { tripData: { ...prev.tripData, travelMode: mode } };
});
};
// Validation Check
const isTripModeValid = data.eventType !== 'trip' || (data.tripData && data.tripData.travelMode !== null);
const isReadyToGenerate = data.title && isTripModeValid;
return (
<div className="space-y-10 animate-fade-in">
<div className="space-y-10 animate-fade-in relative">
{/* GPX PREVIEW MODAL */}
{showGpxPreview && (
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4 backdrop-blur-sm animate-fade-in">
<div className="bg-white rounded-lg shadow-xl max-w-lg w-full overflow-hidden flex flex-col max-h-[80vh]">
<div className="p-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
<h3 className="font-bold text-gray-900 flex items-center gap-2">
<FileText size={18} className="text-[#EA4420]" />
Podgląd kontekstu GPX
</h3>
<button onClick={() => setShowGpxPreview(false)} className="text-gray-400 hover:text-gray-600">
<X size={20} />
</button>
</div>
<div className="p-4 overflow-y-auto font-mono text-xs text-gray-700 bg-gray-50/50">
<p className="mb-2 text-gray-400 font-sans uppercase font-bold tracking-wider">To widzi AI:</p>
<div className="bg-white border border-gray-200 p-3 rounded">
<p>DYSTANS: {data.stats.distance || "0"}</p>
<p>CZAS TRWANIA: {data.stats.duration || "0"}</p>
<p>PRZEWYŻSZENIA: {data.stats.elevation || "0"}</p>
</div>
</div>
<div className="p-4 border-t border-gray-100 flex justify-end">
<button
onClick={() => setShowGpxPreview(false)}
className="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded text-sm font-bold transition-colors"
>
Zamknij
</button>
</div>
</div>
</div>
)}
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Szczegóły</h2>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepDetails.title}</h2>
<p className="text-gray-500 mb-8 text-lg">
{data.eventType === 'trip' ? 'Zaplanuj trasę i opisz przebieg podróży.' : 'Uzupełnij informacje o wydarzeniu.'}
{data.eventType === 'trip' ? UI_TEXT.stepDetails.subtitleTrip : UI_TEXT.stepDetails.subtitleEvent}
</p>
</div>
<div className="space-y-8">
{/* SEKCJA DLA WYCIECZEK (TRIP) */}
{/* TRIP SECTION */}
{data.eventType === 'trip' && data.tripData && (
<div className="bg-gray-50 border border-gray-200 rounded-xl p-6 space-y-6">
{/* Manual Input if Env key is missing */}
{isKeyMissing && !data.tripData.googleMapsKey && (
<div className="bg-yellow-50 p-4 rounded-md border border-yellow-200 mb-2">
<div className="flex items-start gap-3">
<AlertCircle className="text-yellow-600 mt-0.5" size={20} />
<div className="flex-1">
<h4 className="font-bold text-yellow-800 text-sm">Brak klucza w konfiguracji (VITE_GOOGLE_MAPS_KEY)</h4>
<h4 className="font-bold text-yellow-800 text-sm">{UI_TEXT.stepDetails.tripSection.apiKeyMissing}</h4>
<p className="text-xs text-yellow-700 mt-1 mb-2">
Wklej klucz ręcznie poniżej, aby mapy zadziałały.
{UI_TEXT.stepDetails.tripSection.apiKeyMissingDesc}
</p>
<input
type="text"
value={data.tripData?.googleMapsKey || ''}
onChange={(e) => updateApiKey(e.target.value)}
placeholder="Wklej klucz Google Maps API (AIza...)"
placeholder={UI_TEXT.stepDetails.tripSection.apiKeyPlaceholder}
className="w-full p-2 text-sm border border-yellow-300 rounded bg-white focus:border-[#EA4420] outline-none"
/>
</div>
@@ -297,7 +288,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
</div>
)}
{/* Detailed Error Banner for Maps */}
{mapError && (
<div className="bg-red-50 border border-red-200 p-4 rounded-lg flex items-start gap-3 text-red-700">
<AlertCircle className="flex-shrink-0 mt-0.5" size={20} />
@@ -311,7 +301,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
<div className="flex items-center justify-between gap-2 mb-2 pt-1">
<div className="flex items-center gap-2">
<Navigation className="text-[#EA4420]" size={24} />
<h3 className="text-xl font-bold text-gray-900">Plan Podróży</h3>
<h3 className="text-xl font-bold text-gray-900">{UI_TEXT.stepDetails.tripSection.title}</h3>
{scriptLoaded && !mapError && (
<span className="hidden sm:flex text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-bold items-center gap-1">
<CheckCircle2 size={12} /> API OK
@@ -330,7 +320,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
}`}
>
<Car size={32} className="mb-2" />
<span className="font-bold text-sm sm:text-base">Samochód / Droga</span>
<span className="font-bold text-sm sm:text-base">{UI_TEXT.stepDetails.tripSection.modeDriving}</span>
</button>
<button
onClick={() => setTravelMode('WALKING')}
@@ -341,13 +331,13 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
}`}
>
<Footprints size={32} className="mb-2" />
<span className="font-bold text-sm sm:text-base">Pieszo / Szlak</span>
<span className="font-bold text-sm sm:text-base">{UI_TEXT.stepDetails.tripSection.modeWalking}</span>
</button>
</div>
{!data.tripData.travelMode && (
<p className="text-center text-xs text-red-500 font-bold animate-pulse">
* Wybór rodzaju trasy jest wymagany
{UI_TEXT.stepDetails.tripSection.modeRequired}
</p>
)}
@@ -362,7 +352,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
if(preview) updatePoint('startPoint', 'addressPreview', preview);
}}
addressPreview={data.tripData.startPoint.addressPreview}
placeholder="Punkt Startowy (np. Kraków)"
placeholder={UI_TEXT.stepDetails.tripSection.startPoint}
icon={<Flag size={16} className="text-green-600" />}
scriptLoaded={scriptLoaded}
onError={(msg) => setMapError({title: "Błąd API Places", msg})}
@@ -373,7 +363,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
value={data.tripData.startPoint.description}
onChange={(e) => updatePoint('startPoint', 'description', e.target.value)}
className="w-full p-3 border border-gray-300 rounded-md focus:border-[#EA4420] outline-none"
placeholder="Opis startu (np. Zbiórka o 6:00)"
placeholder={UI_TEXT.stepDetails.tripSection.startDesc}
/>
</div>
<div className="w-[42px]"></div>
@@ -390,7 +380,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
if(preview) updateStop(stop.id, 'addressPreview', preview);
}}
addressPreview={stop.addressPreview}
placeholder={`Przystanek ${index + 1}`}
placeholder={`${UI_TEXT.stepDetails.tripSection.stopPlaceholder} ${index + 1}`}
icon={<MapPin size={16} className="text-blue-500" />}
scriptLoaded={scriptLoaded}
onError={(msg) => setMapError({title: "Błąd API Places", msg})}
@@ -401,7 +391,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
value={stop.description}
onChange={(e) => updateStop(stop.id, 'description', e.target.value)}
className="w-full p-3 border border-gray-200 rounded-md focus:border-[#EA4420] outline-none"
placeholder="Co tam robiliście?"
placeholder={UI_TEXT.stepDetails.tripSection.stopDescPlaceholder}
/>
</div>
<button
@@ -420,7 +410,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
className="flex items-center space-x-2 text-sm font-bold text-[#EA4420] hover:bg-[#EA4420]/5 px-4 py-2 rounded-md transition-colors"
>
<Plus size={16} />
<span>Dodaj przystanek</span>
<span>{UI_TEXT.stepDetails.tripSection.addStop}</span>
</button>
</div>
@@ -434,7 +424,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
if(preview) updatePoint('endPoint', 'addressPreview', preview);
}}
addressPreview={data.tripData.endPoint.addressPreview}
placeholder="Punkt Końcowy (np. Zakopane)"
placeholder={UI_TEXT.stepDetails.tripSection.endPoint}
icon={<Target size={16} className="text-red-600" />}
scriptLoaded={scriptLoaded}
onError={(msg) => setMapError({title: "Błąd API Places", msg})}
@@ -445,7 +435,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
value={data.tripData.endPoint.description}
onChange={(e) => updatePoint('endPoint', 'description', e.target.value)}
className="w-full p-3 border border-gray-300 rounded-md focus:border-[#EA4420] outline-none"
placeholder="Opis końca (np. Nareszcie piwo)"
placeholder={UI_TEXT.stepDetails.tripSection.endDesc}
/>
</div>
<div className="w-[42px]"></div>
@@ -457,29 +447,29 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
{/* Standard Fields */}
<div className="space-y-6">
<div>
<label className="block text-sm font-bold text-gray-700 mb-2">Tytuł wydarzenia</label>
<label className="block text-sm font-bold text-gray-700 mb-2">{UI_TEXT.stepDetails.fields.title}</label>
<input
type="text"
value={data.title}
onChange={(e) => updateData({ title: e.target.value })}
className="w-full p-4 border border-gray-200 rounded-md focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none transition-all font-medium text-gray-900 placeholder-gray-300"
placeholder="np. Roadtrip po Bałkanach"
placeholder={UI_TEXT.stepDetails.fields.titlePlaceholder}
/>
</div>
<div>
<label className="block text-sm font-bold text-gray-700 mb-2">Krótki opis / Notatki</label>
<label className="block text-sm font-bold text-gray-700 mb-2">{UI_TEXT.stepDetails.fields.desc}</label>
<textarea
value={data.description}
onChange={(e) => updateData({ description: e.target.value })}
placeholder="Ogólny klimat, emocje, dodatkowe szczegóły, których nie ma w planie wycieczki..."
placeholder={UI_TEXT.stepDetails.fields.descPlaceholder}
rows={4}
className="w-full border border-gray-200 rounded-md p-4 text-base text-gray-700 focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none resize-none placeholder-gray-300"
/>
</div>
<div>
<label className="block text-sm font-bold text-gray-700 mb-2">Materiały pomocnicze (Max 3)</label>
<label className="block text-sm font-bold text-gray-700 mb-2">{UI_TEXT.stepDetails.fields.files}</label>
<div
className={`border-2 border-dashed rounded-md p-8 flex flex-col items-center justify-center text-center transition-all cursor-pointer group ${
error ? 'border-red-300 bg-red-50' : 'border-gray-200 hover:border-[#EA4420] hover:bg-[#EA4420]/5'
@@ -495,8 +485,8 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
className="hidden"
/>
<UploadCloud size={32} className="text-gray-300 group-hover:text-[#EA4420] mb-3 transition-colors" />
<p className="text-gray-600 font-medium">Kliknij, aby dodać pliki</p>
<p className="text-gray-400 text-xs mt-1">GPX, PDF, JPG, PNG</p>
<p className="text-gray-600 font-medium">{UI_TEXT.stepDetails.fields.filesDrop}</p>
<p className="text-gray-400 text-xs mt-1">{UI_TEXT.stepDetails.fields.filesSub}</p>
</div>
{error && <p className="text-red-500 text-sm mt-2">{error}</p>}
@@ -522,6 +512,19 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
</div>
)}
</div>
{/* GPX Preview Button */}
{(data.stats.distance || data.stats.duration || data.files.some(f => f.file.name.endsWith('.gpx'))) && (
<div className="flex justify-end">
<button
onClick={() => setShowGpxPreview(true)}
className="text-xs font-bold text-[#EA4420] flex items-center gap-1 hover:underline"
>
<Eye size={14} />
{UI_TEXT.stepDetails.fields.gpxPreviewBtn}
</button>
</div>
)}
</div>
</div>
@@ -534,12 +537,12 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
{isGenerating ? (
<>
<Loader2 size={24} className="animate-spin" />
<span>Generowanie Historii...</span>
<span>{UI_TEXT.stepDetails.generateBtn.loading}</span>
</>
) : (
<>
<Sparkles size={24} />
<span>Generuj Relację</span>
<span>{UI_TEXT.stepDetails.generateBtn.idle}</span>
</>
)}
</button>

20
components/StepEventType.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { WizardState, EventType } from '../types';
import { Trophy, Tent, Ticket, PartyPopper, Briefcase, Sparkles } from 'lucide-react';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
interface StepEventTypeProps {
data: WizardState;
@@ -16,19 +18,19 @@ const StepEventType: React.FC<StepEventTypeProps> = ({ data, updateData, nextSte
};
const types: { id: EventType; label: string; icon: React.ReactNode }[] = [
{ id: 'sport', label: 'Wydarzenie Sportowe', icon: <Trophy size={32} /> },
{ id: 'culture', label: 'Wydarzenie Kulturalne', icon: <Ticket size={32} /> },
{ id: 'trip', label: 'Wycieczka / Podróż', icon: <Tent size={32} /> },
{ id: 'party', label: 'Impreza', icon: <PartyPopper size={32} /> },
{ id: 'work', label: 'Praca / Konferencja', icon: <Briefcase size={32} /> },
{ id: 'other', label: 'Inne', icon: <Sparkles size={32} /> },
{ id: 'sport', label: UI_TEXT.stepType.types.sport, icon: <Trophy size={32} /> },
{ id: 'culture', label: UI_TEXT.stepType.types.culture, icon: <Ticket size={32} /> },
{ id: 'trip', label: UI_TEXT.stepType.types.trip, icon: <Tent size={32} /> },
{ id: 'party', label: UI_TEXT.stepType.types.party, icon: <PartyPopper size={32} /> },
{ id: 'work', label: UI_TEXT.stepType.types.work, icon: <Briefcase size={32} /> },
{ id: 'other', label: UI_TEXT.stepType.types.other, icon: <Sparkles size={32} /> },
];
return (
<div className="space-y-8 animate-fade-in">
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Rodzaj Wydarzenia</h2>
<p className="text-gray-500 mb-8 text-lg">Czego dotyczy Twoja relacja?</p>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepType.title}</h2>
<p className="text-gray-500 mb-8 text-lg">{UI_TEXT.stepType.subtitle}</p>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{types.map((type) => (
@@ -53,4 +55,4 @@ const StepEventType: React.FC<StepEventTypeProps> = ({ data, updateData, nextSte
);
};
export default StepEventType;
export default StepEventType;

20
components/StepPlatform.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { WizardState } from '../types';
import { Instagram, Youtube, Activity } from 'lucide-react';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
interface StepPlatformProps {
data: WizardState;
@@ -18,8 +20,8 @@ const StepPlatform: React.FC<StepPlatformProps> = ({ data, updateData, nextStep
return (
<div className="space-y-8 animate-fade-in">
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Platformę</h2>
<p className="text-gray-500 mb-8 text-lg">Gdzie opublikujesz materiał?</p>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepPlatform.title}</h2>
<p className="text-gray-500 mb-8 text-lg">{UI_TEXT.stepPlatform.subtitle}</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<button
@@ -31,8 +33,8 @@ const StepPlatform: React.FC<StepPlatformProps> = ({ data, updateData, nextStep
}`}
>
<Instagram size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'instagram' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
<span className="text-xl font-bold tracking-tight">Instagram</span>
<span className="text-sm opacity-75 mt-2 font-medium">Carousel / Post</span>
<span className="text-xl font-bold tracking-tight">{UI_TEXT.stepPlatform.instagram.title}</span>
<span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepPlatform.instagram.desc}</span>
</button>
<button
@@ -44,8 +46,8 @@ const StepPlatform: React.FC<StepPlatformProps> = ({ data, updateData, nextStep
}`}
>
<Youtube size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'youtube' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
<span className="text-xl font-bold tracking-tight">YouTube</span>
<span className="text-sm opacity-75 mt-2 font-medium">Shorts / Video</span>
<span className="text-xl font-bold tracking-tight">{UI_TEXT.stepPlatform.youtube.title}</span>
<span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepPlatform.youtube.desc}</span>
</button>
<button
@@ -57,8 +59,8 @@ const StepPlatform: React.FC<StepPlatformProps> = ({ data, updateData, nextStep
}`}
>
<Activity size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'strava' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
<span className="text-xl font-bold tracking-tight">Strava</span>
<span className="text-sm opacity-75 mt-2 font-medium">Activity / Photos</span>
<span className="text-xl font-bold tracking-tight">{UI_TEXT.stepPlatform.strava.title}</span>
<span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepPlatform.strava.desc}</span>
</button>
</div>
</div>
@@ -66,4 +68,4 @@ const StepPlatform: React.FC<StepPlatformProps> = ({ data, updateData, nextStep
);
};
export default StepPlatform;
export default StepPlatform;

57
components/StepResult.tsx
View File

@@ -3,33 +3,18 @@ import React, { useState } from 'react';
import { GeneratedContent, WizardState } from '../types';
import { Copy, Check, Instagram, Image as ImageIcon, MessageSquare, Edit2, RefreshCw, X } from 'lucide-react';
import TripMap from './TripMap';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
interface StepResultProps {
interface ExtendedStepResultProps {
content: GeneratedContent;
onRegenerate: (slideCount: number, feedback: string) => void;
isRegenerating: boolean;
// We need to access the wizard state to check for trip data
// But standard props here only have content.
// Ideally, StepResult should receive `data` too, but for now I'll check if I can pass it from App.tsx or infer it.
// Wait, I can't access `data` unless I modify App.tsx to pass it to StepResult.
// Let's assume the parent updates the props.
// Actually, I'll modify the StepResultProps in this file, but I also need to modify App.tsx to pass 'data'.
// However, looking at App.tsx, StepResult is rendered inside App.tsx. I can pass `data` there easily.
// But wait, the previous code block for StepResult didn't show 'data' in props.
// I will add `tripData` to the props.
}
// Extending interface to include tripData optionally passed from parent
// Note: I will update App.tsx to pass this prop.
interface ExtendedStepResultProps extends StepResultProps {
tripData?: WizardState['tripData'];
tripData?: WizardState['tripData'];
}
const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate, isRegenerating, tripData }) => {
const [copiedSection, setCopiedSection] = useState<string | null>(null);
const [copiedSlideIndex, setCopiedSlideIndex] = useState<number | null>(null);
// Edit Mode State
const [isEditing, setIsEditing] = useState(false);
const [slideCount, setSlideCount] = useState(content.slides.length || 12);
const [feedback, setFeedback] = useState("");
@@ -48,16 +33,15 @@ const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate,
const handleApplyChanges = () => {
onRegenerate(slideCount, feedback);
setIsEditing(false); // Close edit panel on submit, assumes success or loading state handles visual feedback
setIsEditing(false);
};
return (
<div className="space-y-12 animate-fade-in pb-20 relative">
{/* Top Header with Edit Button */}
<div className="text-center max-w-2xl mx-auto relative">
<h2 className="text-4xl font-bold tracking-tight text-gray-900 mb-3">Twój Vibe Gotowy! 🎉</h2>
<p className="text-gray-500 text-lg mb-6">Oto kompletna struktura Twojego posta. Skopiuj i publikuj.</p>
<h2 className="text-4xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepResult.title}</h2>
<p className="text-gray-500 text-lg mb-6">{UI_TEXT.stepResult.subtitle}</p>
{!isEditing && !isRegenerating && (
<button
@@ -65,25 +49,24 @@ const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate,
className="inline-flex items-center space-x-2 text-sm font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 px-5 py-2.5 rounded-full transition-colors"
>
<Edit2 size={16} />
<span>Edytuj / Popraw</span>
<span>{UI_TEXT.stepResult.editBtn}</span>
</button>
)}
</div>
{/* Edit Panel (Conditional) */}
{(isEditing || isRegenerating) && (
<div className="bg-white border-2 border-[#EA4420]/20 rounded-xl p-6 shadow-sm mb-10 animate-fade-in relative overflow-hidden">
{isRegenerating && (
<div className="absolute inset-0 bg-white/80 z-10 flex flex-col items-center justify-center backdrop-blur-[1px]">
<RefreshCw size={32} className="text-[#EA4420] animate-spin mb-3" />
<p className="font-bold text-gray-800">Nanuszę poprawki...</p>
<p className="font-bold text-gray-800">{UI_TEXT.stepResult.editPanel.regenerating}</p>
</div>
)}
<div className="flex justify-between items-start mb-6">
<h3 className="text-xl font-bold text-gray-900 flex items-center gap-2">
<Edit2 size={20} className="text-[#EA4420]" />
Wprowadź poprawki
{UI_TEXT.stepResult.editPanel.title}
</h3>
{!isRegenerating && (
<button onClick={() => setIsEditing(false)} className="text-gray-400 hover:text-gray-600">
@@ -93,10 +76,9 @@ const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate,
</div>
<div className="space-y-6">
{/* Slider */}
<div>
<label className="flex justify-between text-sm font-bold text-gray-700 mb-3">
<span>Liczba slajdów / Elementów</span>
<span>{UI_TEXT.stepResult.editPanel.slidesLabel}</span>
<span className="text-[#EA4420]">{slideCount}</span>
</label>
<input
@@ -113,50 +95,46 @@ const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate,
</div>
</div>
{/* Feedback Textarea */}
<div>
<label className="block text-sm font-bold text-gray-700 mb-2">Co chcesz zmienić w treści?</label>
<label className="block text-sm font-bold text-gray-700 mb-2">{UI_TEXT.stepResult.editPanel.feedbackLabel}</label>
<textarea
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
placeholder="np. Zmień 'ból szczęki' na 'ból głowy'. Dodaj więcej emoji w slajdzie nr 3. Zrób bardziej agresywny wstęp."
placeholder={UI_TEXT.stepResult.editPanel.feedbackPlaceholder}
rows={3}
className="w-full border border-gray-200 rounded-md p-3 text-sm focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none"
/>
</div>
{/* Action Buttons */}
<div className="flex justify-end pt-2">
<button
onClick={handleApplyChanges}
className="bg-[#EA4420] text-white px-6 py-3 rounded-md font-bold hover:bg-[#d63b1a] transition-colors flex items-center gap-2"
>
<RefreshCw size={18} />
Zastosuj poprawki
{UI_TEXT.stepResult.editPanel.applyBtn}
</button>
</div>
</div>
</div>
)}
{/* TRIP MAP (IF APPLICABLE) */}
{tripData && tripData.startPoint && (
<TripMap tripData={tripData} />
)}
{/* Caption Section */}
<div className="bg-white rounded-md border border-gray-200 overflow-hidden">
<div className="bg-gray-50 px-8 py-5 border-b border-gray-200 flex justify-between items-center">
<div className="flex items-center space-x-3 text-gray-900">
<MessageSquare size={20} className="text-[#EA4420]" />
<span className="font-bold">Post Caption (Opis)</span>
<span className="font-bold">{UI_TEXT.stepResult.captionTitle}</span>
</div>
<button
onClick={() => copyToClipboard(content.caption, 'caption')}
className="flex items-center space-x-2 text-sm font-semibold text-[#EA4420] hover:text-[#d63b1a] transition-colors bg-white border border-gray-200 px-4 py-2 rounded-md hover:bg-gray-50"
>
{copiedSection === 'caption' ? <Check size={16} /> : <Copy size={16} />}
<span>{copiedSection === 'caption' ? 'Skopiowano!' : 'Kopiuj'}</span>
<span>{copiedSection === 'caption' ? UI_TEXT.stepResult.copied : UI_TEXT.stepResult.copy}</span>
</button>
</div>
<div className="p-8 text-gray-700 whitespace-pre-wrap font-sans text-base leading-relaxed">
@@ -164,11 +142,10 @@ const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate,
</div>
</div>
{/* Slides Grid */}
<div>
<div className="flex items-center space-x-3 text-gray-900 mb-8 px-1">
<ImageIcon size={28} className="text-[#EA4420]" />
<h3 className="text-2xl font-bold tracking-tight">Struktura Wizualna (Slajdy / Zdjęcia)</h3>
<h3 className="text-2xl font-bold tracking-tight">{UI_TEXT.stepResult.slidesTitle}</h3>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -186,7 +163,7 @@ const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate,
<button
onClick={() => copySlideText(slide.overlay_text, idx)}
className="text-gray-300 hover:text-[#EA4420] transition-colors"
title="Kopiuj tekst"
title={UI_TEXT.stepResult.copy}
>
{copiedSlideIndex === idx ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
</button>

27
components/StepToneGoal.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { WizardState, Tone, Goal } from '../types';
import { Laugh, Brain, Zap, MessageCircle, Share2, ShoppingBag } from 'lucide-react';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
interface StepToneGoalProps {
data: WizardState;
@@ -21,15 +23,15 @@ const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep
const isComplete = data.tone && data.goal;
const tones: { id: Tone; label: string; desc: string; icon: React.ReactNode }[] = [
{ id: 'funny', label: 'Luzak', desc: 'Humor, dystans, memy', icon: <Laugh size={32} /> },
{ id: 'serious', label: 'Ekspert', desc: 'Konkrety, wiedza, liczby', icon: <Brain size={32} /> },
{ id: 'inspirational', label: 'Mentor', desc: 'Emocje, głębia, lekcja', icon: <Zap size={32} /> },
{ id: 'funny', label: UI_TEXT.stepToneGoal.tones.funny.label, desc: UI_TEXT.stepToneGoal.tones.funny.desc, icon: <Laugh size={32} /> },
{ id: 'serious', label: UI_TEXT.stepToneGoal.tones.serious.label, desc: UI_TEXT.stepToneGoal.tones.serious.desc, icon: <Brain size={32} /> },
{ id: 'inspirational', label: UI_TEXT.stepToneGoal.tones.inspirational.label, desc: UI_TEXT.stepToneGoal.tones.inspirational.desc, icon: <Zap size={32} /> },
];
const goals: { id: Goal; label: string; desc: string; icon: React.ReactNode }[] = [
{ id: 'engagement', label: 'Społeczność', desc: 'Komentarze i dyskusja', icon: <MessageCircle size={32} /> },
{ id: 'viral', label: 'Zasięg', desc: 'Udostępnienia (Share)', icon: <Share2 size={32} /> },
{ id: 'sales', label: 'Sprzedaż', desc: 'Kliknięcie w link / Zakup', icon: <ShoppingBag size={32} /> },
{ id: 'engagement', label: UI_TEXT.stepToneGoal.goals.engagement.label, desc: UI_TEXT.stepToneGoal.goals.engagement.desc, icon: <MessageCircle size={32} /> },
{ id: 'viral', label: UI_TEXT.stepToneGoal.goals.viral.label, desc: UI_TEXT.stepToneGoal.goals.viral.desc, icon: <Share2 size={32} /> },
{ id: 'sales', label: UI_TEXT.stepToneGoal.goals.sales.label, desc: UI_TEXT.stepToneGoal.goals.sales.desc, icon: <ShoppingBag size={32} /> },
];
return (
@@ -37,8 +39,8 @@ const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep
{/* Sekcja 1: TON */}
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Ton (Vibe)</h2>
<p className="text-gray-500 mb-6 text-lg">Jak chcesz brzmieć?</p>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepToneGoal.toneTitle}</h2>
<p className="text-gray-500 mb-6 text-lg">{UI_TEXT.stepToneGoal.toneSubtitle}</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{tones.map((t) => (
@@ -63,8 +65,8 @@ const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep
{/* Sekcja 2: CEL */}
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Cel</h2>
<p className="text-gray-500 mb-6 text-lg">Co chcesz osiągnąć tym postem?</p>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepToneGoal.goalTitle}</h2>
<p className="text-gray-500 mb-6 text-lg">{UI_TEXT.stepToneGoal.goalSubtitle}</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{goals.map((g) => (
@@ -87,14 +89,13 @@ const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep
</div>
</div>
{/* Next Button */}
<div className="flex justify-end pt-4">
<button
onClick={nextStep}
disabled={!isComplete}
className="bg-[#EA4420] text-white px-8 py-3 rounded-md font-bold hover:bg-[#d63b1a] transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-md"
>
Przejdź do szczegółów
{UI_TEXT.stepToneGoal.nextBtn}
</button>
</div>
@@ -102,4 +103,4 @@ const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep
);
};
export default StepToneGoal;
export default StepToneGoal;

72
prompts/index.ts
View File

@@ -1,72 +0,0 @@
import { WizardState } from '../types';
import {
CONTEXT_PROMPTS,
STORY_STYLE_PROMPTS,
EVENT_PROMPTS,
PLATFORM_PROMPTS,
TONE_PROMPTS,
GOAL_PROMPTS
} from './modular';
export const getSystemPrompt = (data: WizardState): string => {
// 1. KROK 1: KONTEKST
let contextPrompt = data.context
? CONTEXT_PROMPTS[data.context]
: CONTEXT_PROMPTS.relacja;
// 1b. KROK 1b: STYL OPOWIEŚCI (Jeśli wybrano Opowieść i podano styl)
if (data.context === 'opowiesc' && data.storyStyle) {
const stylePrompt = STORY_STYLE_PROMPTS[data.storyStyle];
contextPrompt += `\n\n${stylePrompt}`;
}
// 2. KROK 2: TYP WYDARZENIA
const eventPrompt = data.eventType
? EVENT_PROMPTS[data.eventType]
: EVENT_PROMPTS.other;
// 3. KROK 3: PLATFORMA
const platformPrompt = data.platform
? PLATFORM_PROMPTS[data.platform]
: PLATFORM_PROMPTS.instagram;
// 4a. KROK 4a: TON
const tonePrompt = data.tone
? TONE_PROMPTS[data.tone]
: TONE_PROMPTS.funny;
// 4b. KROK 4b: CEL
const goalPrompt = data.goal
? GOAL_PROMPTS[data.goal]
: GOAL_PROMPTS.engagement;
// SKLEJANIE MASTER PROMPTU
return `
Jesteś światowej klasy ekspertem od Content Marketingu i Social Media.
Twoim zadaniem jest stworzenie treści idealnie dopasowanej do poniższej konfiguracji "puzzli".
=== KONFIGURACJA MASTER PROMPT (PUZZLE) ===
${contextPrompt}
${eventPrompt}
${platformPrompt}
${tonePrompt}
${goalPrompt}
=== INSTRUKCJA KOŃCOWA ===
Twoim zadaniem jest synteza powyższych elementów w jedną spójną całość.
1. Przyjmij perspektywę czasową z kroku 1 (KONTEKST).
2. Jeśli zdefiniowano STYL (Noir/Fantasy), bezwzględnie narzuć ten klimat na całą narrację.
3. Użyj słownictwa i atmosfery z kroku 2 (TYP).
4. Sformatuj wynik technicznie zgodnie z wymogami kroku 3 (PLATFORMA).
5. Nadaj wypowiedzi charakter i styl z kroku 4a (TON).
6. Zrealizuj cel biznesowy/społeczny z kroku 4b (CEL).
Nie dodawaj meta-komentarzy. Zwróć czysty JSON zgodny ze schematem zdefiniowanym w sekcji PLATFORMA.
`;
};

2
services/geminiService.ts
View File

@@ -1,7 +1,7 @@
import { GoogleGenAI, Type, Schema } from "@google/genai";
import { WizardState, GeneratedContent } from "../types";
import { getSystemPrompt } from "../prompts";
import { getSystemPrompt } from "../_EDITABLE_CONFIG/ai_prompts"; // Updated path
// SCHEMAT ODPOWIEDZI JSON
const responseSchema: Schema = {