Mejoras en NeoWhatsappMenu

// NeoWhatsappMenu.js

import React, { useState, useEffect, useCallback } from 'react';
import {
Box,
Typography,
Switch,
FormControl,
InputLabel,
Select,
MenuItem,
TextField,
Button,
Paper,
CircularProgress
} from '@mui/material';
import axios from 'axios';

const API_BASE_URL = 'http://localhost:3007/api'; // Nuevo puerto

const NeoWhatsappMenu = ({ selectedContacts, allMessages, onAnalyzeMessages, isIaActive, setIsIaActive }) => {
const [iaProfile, setIaProfile] = useState('');
const [profiles, setProfiles] = useState([]);
const [contextos, setContextos] = useState([]);
const [palabrasClave, setPalabrasClave] = useState([]);
const [question, setQuestion] = useState('');
const [analysisResult, setAnalysisResult] = useState('');
const [summary, setSummary] = useState('');

// Estados para manejo de carga y errores
const [loadingProfiles, setLoadingProfiles] = useState(false);
const [errorProfiles, setErrorProfiles] = useState(null);
const [loadingContextos, setLoadingContextos] = useState(false);
const [errorContextos, setErrorContextos] = useState(null);
const [loadingAnalysis, setLoadingAnalysis] = useState(false);
const [errorAnalysis, setErrorAnalysis] = useState(null);
const [loadingSummary, setLoadingSummary] = useState(false);
const [errorSummary, setErrorSummary] = useState(null);

// Fetch profiles on component mount
useEffect(() => {
const fetchProfiles = async () => {
setLoadingProfiles(true);
setErrorProfiles(null);
try {
const response = await axios.get(`${API_BASE_URL}/profiles`);
setProfiles(response.data);
} catch (error) {
console.error('Error fetching profiles:', error);
setErrorProfiles('No se pudieron cargar los perfiles.');
} finally {
setLoadingProfiles(false);
}
};
fetchProfiles();
}, []);

// Fetch contextos and palabras clave when iaProfile changes
useEffect(() => {
if (iaProfile) {
const fetchContextos = async () => {
setLoadingContextos(true);
setErrorContextos(null);
try {
const response = await axios.get(`${API_BASE_URL}/contextos/${iaProfile}`);
setContextos(response.data.contextos);
setPalabrasClave(response.data.palabrasClave);
} catch (error) {
console.error('Error fetching contextos and palabras clave:', error);
setErrorContextos('No se pudieron cargar los contextos y palabras clave.');
} finally {
setLoadingContextos(false);
}
};
fetchContextos();
} else {
setContextos([]);
setPalabrasClave([]);
}
}, [iaProfile]);

// Toggle IA activation
const handleIaToggle = async () => {
const newState = !isIaActive;
setIsIaActive(newState);

try {
await axios.post(`${API_BASE_URL}/toggle-ia`, { isIaActive: newState, iaProfile });
} catch (error) {
console.error('Error toggling IA state:', error);
// Opcional: manejar el error de manera más amigable para el usuario
}
};

// Handle IA profile change
const handleIaProfileChange = async (event) => {
const selectedProfile = event.target.value;
setIaProfile(selectedProfile);
onAnalyzeMessages(selectedProfile);

try {
await axios.post(`${API_BASE_URL}/toggle-ia`, { isIaActive, iaProfile: selectedProfile });
} catch (error) {
console.error('Error updating IA profile:', error);
// Opcional: manejar el error de manera más amigable para el usuario
}
};

// Handle question input change
const handleQuestionChange = (event) => {
setQuestion(event.target.value);
};

// Fetch conversation history for a contact
const fetchConversationHistory = useCallback(async (contactId) => {
try {
const response = await axios.get(`http://localhost:3007/messages/${contactId}`); // Endpoint sin /api
return response.data.map(msg => msg.message).join('\n');
} catch (error) {
console.error('Error fetching conversation history:', error);
return '';
}
}, []);

// Generate summary of conversations
const handleGenerateSummary = async () => {
setLoadingSummary(true);
setErrorSummary(null);
const selectedMessages = selectedContacts.flatMap(contactId => allMessages[contactId] || []);
const conversationText = selectedMessages.map(msg => msg.message).join('\n');

try {
const response = await fetch('http://localhost:3007/summarize', { // Endpoint sin /api
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: conversationText }),
});
const data = await response.json();
setSummary(data.summary);
} catch (error) {
console.error('Error generating summary:', error);
setErrorSummary('Error al generar el resumen.');
} finally {
setLoadingSummary(false);
}
};

// Ask a question based on conversation
const handleAskQuestion = async () => {
if (!question.trim()) {
setAnalysisResult('Por favor, ingresa una pregunta válida.');
return;
}

setLoadingAnalysis(true);
setErrorAnalysis(null);
setAnalysisResult('');

const selectedMessages = selectedContacts.flatMap(contactId => allMessages[contactId] || []);
const conversationText = selectedMessages.map(msg => msg.message).join('\n');

try {
const histories = await Promise.all(selectedContacts.map(fetchConversationHistory));
const combinedHistory = histories.join('\n');

const response = await axios.post(`${API_BASE_URL}/analyze`, { // Endpoint con /api
question,
text: combinedHistory + '\n' + conversationText,
contextos,
palabrasClave,
});
setAnalysisResult(response.data.result);
} catch (error) {
console.error('Error analyzing question:', error);
setAnalysisResult('Error al analizar la pregunta.');
setErrorAnalysis('Error al analizar la pregunta.');
} finally {
setLoadingAnalysis(false);
}
};

return (
<Box
sx={{
width: '600px',
height: '100vh',
display: 'flex',
flexDirection: 'column',
bgcolor: 'background.paper',
overflow: 'auto'
}}
>
<Typography variant="h6" sx={{ p: 2 }}>Funcionalidades Adicionales</Typography>

{/* IA Activation and Profile Selection */}
<Paper sx={{ m: 2, p: 2 }}>
<Box display="flex" alignItems="center">
<Typography variant="body1">IA Activa</Typography>
<Switch
checked={isIaActive}
onChange={handleIaToggle}
inputProps={{ 'aria-label': 'Activar IA' }}
/>
</Box>

{/* Profiles Loading and Error Handling */}
{loadingProfiles ? (
<Box display="flex" justifyContent="center" sx={{ mt: 2 }}>
<CircularProgress />
</Box>
) : errorProfiles ? (
<Typography color="error" sx={{ mt: 2 }}>{errorProfiles}</Typography>
) : (
<FormControl fullWidth sx={{ mt: 2 }} disabled={!isIaActive}>
<InputLabel id="ia-profile-label">Perfil de IA</InputLabel>
<Select
labelId="ia-profile-label"
value={iaProfile}
label="Perfil de IA"
onChange={handleIaProfileChange}
>
{profiles.map(profile => (
<MenuItem key={profile.id} value={profile.id}>{profile.nombre}</MenuItem>
))}
</Select>
</FormControl>
)}

{/* Contextos Loading and Error Handling */}
{iaProfile && (
<>
{loadingContextos ? (
<Box display="flex" justifyContent="center" sx={{ mt: 2 }}>
<CircularProgress size={24} />
</Box>
) : errorContextos ? (
<Typography color="error" sx={{ mt: 2 }}>{errorContextos}</Typography>
) : null}
</>
)}

{/* Question Input */}
<TextField
label="Pregunta para el análisis"
variant="outlined"
fullWidth
value={question}
onChange={handleQuestionChange}
disabled={!isIaActive}
sx={{ mt: 2 }}
inputProps={{ 'aria-label': 'Pregunta para el análisis' }}
/>

{/* Ask Question Button */}
<Button
variant="contained"
color="primary"
onClick={handleAskQuestion}
sx={{ mt: 2 }}
disabled={!isIaActive || loadingAnalysis}
>
{loadingAnalysis ? 'Analizando...' : 'Realizar Pregunta'}
</Button>

{/* Analysis Result */}
{analysisResult && (
<Paper sx={{ mt: 2, p: 2 }}>
<Typography variant="body1">Resultado del Análisis</Typography>
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
{analysisResult}
</Typography>
</Paper>
)}

{/* Error Analysis */}
{errorAnalysis && (
<Typography color="error" sx={{ mt: 2 }}>{errorAnalysis}</Typography>
)}
</Paper>

{/* Sentiment Analysis and Summary */}
<Paper sx={{ m: 2, p: 2 }}>
<Typography variant="h6">Análisis de sentimientos</Typography>

{/* Generate Summary Button */}
<Button
variant="contained"
color="primary"
onClick={handleGenerateSummary}
sx={{ mt: 2 }}
disabled={loadingSummary}
>
{loadingSummary ? 'Generando...' : 'Generar análisis'}
</Button>

{/* Summary Result */}
{summary && (
<Paper sx={{ mt: 2, p: 2 }}>
<Typography variant="body1">Resumen:</Typography>
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
{summary}
</Typography>
</Paper>
)}

{/* Error Summary */}
{errorSummary && (
<Typography color="error" sx={{ mt: 2 }}>{errorSummary}</Typography>
)}
</Paper>
</Box>
);
};

export default NeoWhatsappMenu;