merge text boxes

frontend/src/pages/MapDetailsPage/MapDetailPage.tsx

@@ -965,75 +965,34 @@ export default function MapDetailPage() {
                       </div>
                     </Container>
 
-                    {/* Three-Part Analysis Structure */}
+                    {/* Combined Analysis Structure */}
                     {filteredMap.raw_json ? (
                       <>
                         {/* Try to extract three parts from edited field first (new format) */}
                         {filteredMap.edited && filteredMap.edited.includes('Description:') ? (
-                          <>
-                            <Container
-                              heading="Description"
-                              headingLevel={3}
-                              withHeaderBorder
-                              withInternalPadding
-                              spacing="comfortable"
-                            >
-                              <div className={styles.captionContainer}>
-                                {(() => {
-                                  const descMatch = filteredMap.edited.match(/Description:\s*(.*?)(?=\n\nAnalysis:|$)/s);
-                                  return descMatch ? (
-                                    <div className={styles.captionText}>
-                                      <p>{descMatch[1].trim()}</p>
-                                    </div>
-                                  ) : (
-                                    <p className="text-gray-500 italic">— no description available —</p>
-                                  );
-                                })()}
-                              </div>
-                            </Container>
-
-                            <Container
-                              heading="Analysis"
-                              headingLevel={3}
-                              withHeaderBorder
-                              withInternalPadding
-                              spacing="comfortable"
-                            >
-                              <div className={styles.captionContainer}>
-                                {(() => {
-                                  const analysisMatch = filteredMap.edited.match(/Analysis:\s*(.*?)(?=\n\nRecommended Actions:|$)/s);
-                                  return analysisMatch ? (
-                                    <div className={styles.captionText}>
-                                      <p>{analysisMatch[1].trim()}</p>
-                                    </div>
-                                  ) : (
-                                    <p className="text-gray-500 italic">— no analysis available —</p>
-                                  );
-                                })()}
-                              </div>
-                            </Container>
-
-                            <Container
-                              heading="Recommended Actions"
-                              headingLevel={3}
-                              withHeaderBorder
-                              withInternalPadding
-                              spacing="comfortable"
-                            >
-                              <div className={styles.captionContainer}>
-                                {(() => {
-                                  const actionsMatch = filteredMap.edited.match(/Recommended Actions:\s*(.*?)$/s);
-                                  return actionsMatch ? (
-                                    <div className={styles.captionText}>
-                                      <p>{actionsMatch[1].trim()}</p>
-                                    </div>
-                                  ) : (
-                                    <p className="text-gray-500 italic">— no recommended actions available —</p>
-                                  );
-                                })()}
+                          <Container
+                            heading="AI Generated Content"
+                            headingLevel={3}
+                            withHeaderBorder
+                            withInternalPadding
+                            spacing="comfortable"
+                          >
+                            <div className={styles.captionContainer}>
+                              <div className={styles.captionText}>
+                                {filteredMap.edited.split('\n').map((line, index) => (
+                                  <div key={index}>
+                                    {line.startsWith('Description:') || line.startsWith('Analysis:') || line.startsWith('Recommended Actions:') ? (
+                                      <h4 className="font-semibold text-gray-800 mt-4 mb-2">{line}</h4>
+                                    ) : line.trim() === '' ? (
+                                      <br />
+                                    ) : (
+                                      <p className="mb-2">{line}</p>
+                                    )}
+                                  </div>
+                                ))}
                               </div>
-                            </Container>
-                          </>
+                            </div>
+                          </Container>
                         ) : (
                           <Container
                             heading="Description"

frontend/src/pages/UploadPage/UploadPage.tsx

@@ -1353,41 +1353,26 @@ export default function UploadPage() {
                 >
                   <div className="text-left space-y-4">
                     <div>
-                      <label className="block text-sm font-medium text-gray-700 mb-2">
-                        Description
-                      </label>
                       <TextArea
-                        name="description"
-                        value={description}
-                        onChange={(value) => setDescription(value || '')}
-                        rows={4}
-                        placeholder="AI-generated description will appear here..."
-                      />
-                    </div>
-                    
-                    <div>
-                      <label className="block text-sm font-medium text-gray-700 mb-2">
-                        Analysis
-                      </label>
-                      <TextArea
-                        name="analysis"
-                        value={analysis}
-                        onChange={(value) => setAnalysis(value || '')}
-                        rows={4}
-                        placeholder="AI-generated analysis will appear here..."
-                      />
-                    </div>
-                    
-                    <div>
-                      <label className="block text-sm font-medium text-gray-700 mb-2">
-                        Recommended Actions
-                      </label>
-                      <TextArea
-                        name="recommendedActions"
-                        value={recommendedActions}
-                        onChange={(value) => setRecommendedActions(value || '')}
-                        rows={4}
-                        placeholder="AI-generated recommended actions will appear here..."
+                        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={(value) => {
+                          // Parse the combined text back into separate fields
+                          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) {
+                              setDescription(lines.slice(descIndex + 1, analysisIndex).join('\n').trim());
+                              setAnalysis(lines.slice(analysisIndex + 1, actionsIndex).join('\n').trim());
+                              setRecommendedActions(lines.slice(actionsIndex + 1).join('\n').trim());
+                            }
+                          }
+                        }}
+                        rows={12}
+                        placeholder="AI-generated content will appear here..."
                       />
                     </div>
                   </div>