Spaces:
Sleeping
Sleeping
File size: 3,549 Bytes
0cc234e 351d460 c8ed728 351d460 c8ed728 351d460 c8ed728 351d460 c8ed728 351d460 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
import { Container, TextArea, Button, IconButton, Spinner } from '@ifrc-go/ui';
import { DeleteBinLineIcon } from '@ifrc-go/icons';
import styles from '../../pages/UploadPage/UploadPage.module.css';
interface GeneratedTextSectionProps {
description: string;
analysis: string;
recommendedActions: string;
onDescriptionChange: (value: string | undefined) => void;
onAnalysisChange: (value: string | undefined) => void;
onRecommendedActionsChange: (value: string | undefined) => void;
onBack: () => void;
onDelete: () => void;
onSubmit: () => void;
onEditRatings?: () => void;
isPerformanceConfirmed?: boolean;
isSubmitting?: boolean;
}
export default function GeneratedTextSection({
description,
analysis,
recommendedActions,
onDescriptionChange,
onAnalysisChange,
onRecommendedActionsChange,
onBack,
onDelete,
onSubmit,
onEditRatings,
isPerformanceConfirmed = false,
isSubmitting = false,
}: GeneratedTextSectionProps) {
const handleTextChange = (value: string | undefined) => {
if (value) {
const lines = value.split('\n');
const descIndex = lines.findIndex(line => line.startsWith('Description:'));
const analysisIndex = lines.findIndex(line => line.startsWith('Analysis:'));
const actionsIndex = lines.findIndex(line => line.startsWith('Recommended Actions:'));
if (descIndex !== -1 && analysisIndex !== -1 && actionsIndex !== -1) {
onDescriptionChange(lines.slice(descIndex + 1, analysisIndex).join('\n').trim());
onAnalysisChange(lines.slice(analysisIndex + 1, actionsIndex).join('\n').trim());
onRecommendedActionsChange(lines.slice(actionsIndex + 1).join('\n').trim());
}
}
};
return (
<Container
heading="Generated Text"
headingLevel={3}
withHeaderBorder
withInternalPadding
>
<div className="text-left space-y-4">
<div>
<TextArea
name="generatedContent"
value={`Description:\n${description || 'AI-generated description will appear here...'}\n\nAnalysis:\n${analysis || 'AI-generated analysis will appear here...'}\n\nRecommended Actions:\n${recommendedActions || 'AI-generated recommended actions will appear here...'}`}
onChange={handleTextChange}
rows={12}
placeholder="AI-generated content will appear here..."
/>
</div>
</div>
{/* ────── SUBMIT BUTTONS ────── */}
<div className={styles.submitSection}>
<Button
name="back"
variant="secondary"
onClick={onBack}
>
Back
</Button>
{isPerformanceConfirmed && onEditRatings && (
<Button
name="edit-ratings"
variant="secondary"
onClick={onEditRatings}
>
Edit Ratings
</Button>
)}
<IconButton
name="delete"
variant="tertiary"
onClick={onDelete}
title="Delete"
ariaLabel="Delete uploaded image"
>
<DeleteBinLineIcon />
</IconButton>
<Button
name="submit"
onClick={onSubmit}
disabled={isSubmitting}
>
{isSubmitting ? (
<div className="flex items-center gap-2">
<Spinner className="w-4 h-4" />
<span>Submitting...</span>
</div>
) : (
"Submit"
)}
</Button>
</div>
</Container>
);
}
|