Floke
6a7d56a9c9
Resolved multiple issues preventing the 'competitor-analysis' app from running and serving its frontend:
1. **Fixed Python SyntaxError in Prompts:** Corrected unterminated string literals and ensure proper multi-line string formatting (using .format() instead of f-strings for complex prompts) in .
2. **Addressed Python SDK Compatibility (google-generativeai==0.3.0):**
* Removed for and by adapting the orchestrator to pass JSON schemas as direct Python dictionaries, as required by the older SDK version.
* Updated with detailed guidance on handling / imports and dictionary-based schema definitions for older SDKs.
3. **Corrected Frontend Build Dependencies:** Moved critical build dependencies (like , , ) from to in .
* Updated to include this pitfall, ensuring frontend build tools are installed in Docker.
4. **Updated Documentation:**
* : Added comprehensive lessons learned regarding dependencies, Python SDK versioning (specifically and imports for ), and robust multi-line prompt handling.
* : Integrated specific details of the encountered errors and their solutions, making the migration report a more complete historical record and guide.
These changes collectively fix the 404 error by ensuring the Python backend starts correctly and serves the frontend assets after a successful build.
50 lines
2.3 KiB
TypeScript
50 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
|
|
interface StepIndicatorProps {
|
|
currentStep: number;
|
|
highestStep: number;
|
|
onStepClick: (step: number) => void;
|
|
t: {
|
|
title: string;
|
|
steps: string[];
|
|
}
|
|
}
|
|
|
|
const StepIndicator: React.FC<StepIndicatorProps> = ({ currentStep, highestStep, onStepClick, t }) => {
|
|
|
|
const steps = t.steps.map((name, index) => ({ id: index + 1, name }));
|
|
|
|
return (
|
|
<div className="bg-light-secondary dark:bg-brand-secondary p-4 rounded-lg shadow-md border border-light-accent dark:border-brand-accent">
|
|
<h3 className="font-bold text-lg mb-4">{t.title}</h3>
|
|
<ol className="space-y-3">
|
|
{steps.map((step) => {
|
|
const isCompleted = step.id < currentStep;
|
|
const isActive = step.id === currentStep;
|
|
const isClickable = step.id <= highestStep;
|
|
|
|
return (
|
|
<li
|
|
key={step.id}
|
|
className={`flex items-center p-1 rounded-md transition-colors ${isClickable ? 'cursor-pointer hover:bg-light-accent dark:hover:bg-brand-accent' : 'cursor-default'}`}
|
|
onClick={() => isClickable && onStepClick(step.id)}
|
|
>
|
|
<span className={`flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full mr-3 text-sm font-bold ${
|
|
isCompleted ? 'bg-green-500 text-white' :
|
|
isActive ? 'bg-brand-highlight text-white ring-2 ring-offset-2 ring-offset-light-secondary dark:ring-offset-brand-secondary ring-brand-highlight' :
|
|
'bg-light-accent dark:bg-brand-accent text-light-text dark:text-brand-text'
|
|
}`}>
|
|
{isCompleted ? '✓' : step.id}
|
|
</span>
|
|
<span className={`font-medium ${isActive ? 'text-light-text dark:text-white' : 'text-light-subtle dark:text-brand-light'}`}>
|
|
{step.name}
|
|
</span>
|
|
</li>
|
|
)
|
|
})}
|
|
</ol>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StepIndicator; |