Se agrega realtime para chat de ia plan
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useEffect } from 'react'
|
||||
|
||||
import {
|
||||
ai_plan_chat_v2,
|
||||
@@ -19,9 +20,9 @@ import {
|
||||
ai_subject_chat_v2,
|
||||
create_subject_conversation,
|
||||
} from '../api/ai.api'
|
||||
import { supabaseBrowser } from '../supabase/client'
|
||||
|
||||
// eslint-disable-next-line node/prefer-node-protocol
|
||||
import type { UUID } from 'crypto'
|
||||
import type { UUID } from 'node:crypto'
|
||||
|
||||
export function useAIPlanImprove() {
|
||||
return useMutation({ mutationFn: ai_plan_improve })
|
||||
@@ -95,22 +96,58 @@ export function useConversationByPlan(planId: string | null) {
|
||||
}
|
||||
|
||||
export function useMessagesByChat(conversationId: string | null) {
|
||||
return useQuery({
|
||||
// La queryKey debe ser única; incluimos el ID para que se refresque al cambiar de chat
|
||||
queryKey: ['conversation-messages', conversationId],
|
||||
const queryClient = useQueryClient()
|
||||
const supabase = supabaseBrowser()
|
||||
|
||||
// Solo ejecutamos la función si el ID no es null o undefined
|
||||
const query = useQuery({
|
||||
queryKey: ['conversation-messages', conversationId],
|
||||
queryFn: () => {
|
||||
if (!conversationId) throw new Error('Conversation ID is required')
|
||||
return getMessagesByConversation(conversationId)
|
||||
},
|
||||
|
||||
// Importante: 'enabled' controla que no se dispare la petición si no hay ID
|
||||
enabled: !!conversationId,
|
||||
|
||||
// Opcional: Mantener los datos previos mientras se carga la nueva conversación
|
||||
placeholderData: (previousData) => previousData,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (!conversationId) return
|
||||
|
||||
// Suscribirse a cambios en los mensajes de ESTA conversación
|
||||
const channel = supabase
|
||||
.channel(`realtime-messages-${conversationId}`)
|
||||
.on(
|
||||
'postgres_changes',
|
||||
{
|
||||
event: '*', // Escuchamos INSERT y UPDATE
|
||||
schema: 'public',
|
||||
table: 'plan_mensajes_ia',
|
||||
filter: `conversacion_plan_id=eq.${conversationId}`,
|
||||
},
|
||||
(payload) => {
|
||||
// Opción A: Invalidar la query para que React Query haga refetch (más seguro)
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ['conversation-messages', conversationId],
|
||||
})
|
||||
|
||||
/* Opción B: Actualización manual del caché (más rápido/fluido)
|
||||
if (payload.eventType === 'INSERT') {
|
||||
queryClient.setQueryData(['conversation-messages', conversationId], (old: any) => [...old, payload.new])
|
||||
} else if (payload.eventType === 'UPDATE') {
|
||||
queryClient.setQueryData(['conversation-messages', conversationId], (old: any) =>
|
||||
old.map((m: any) => m.id === payload.new.id ? payload.new : m)
|
||||
)
|
||||
}
|
||||
*/
|
||||
},
|
||||
)
|
||||
.subscribe()
|
||||
|
||||
return () => {
|
||||
supabase.removeChannel(channel)
|
||||
}
|
||||
}, [conversationId, queryClient, supabase])
|
||||
|
||||
return query
|
||||
}
|
||||
|
||||
export function useUpdateRecommendationApplied() {
|
||||
|
||||
@@ -98,14 +98,14 @@ function RouteComponent() {
|
||||
const [openIA, setOpenIA] = useState(false)
|
||||
const { mutateAsync: sendChat, isPending: isLoading } = useAIPlanChat()
|
||||
const { mutate: updateStatusMutation } = useUpdateConversationStatus()
|
||||
|
||||
const [isSyncing, setIsSyncing] = useState(false)
|
||||
const [activeChatId, setActiveChatId] = useState<string | undefined>(
|
||||
undefined,
|
||||
)
|
||||
const { data: lastConversation, isLoading: isLoadingConv } =
|
||||
useConversationByPlan(planId)
|
||||
const { data: mensajesDelChat, isLoading: isLoadingMessages } =
|
||||
useMessagesByChat(activeChatId)
|
||||
useMessagesByChat(activeChatId ?? null) // Si es undefined, pasa null
|
||||
const [selectedArchivoIds, setSelectedArchivoIds] = useState<Array<string>>(
|
||||
[],
|
||||
)
|
||||
@@ -152,10 +152,6 @@ function RouteComponent() {
|
||||
)
|
||||
}, [availableFields, filterQuery, selectedFields])
|
||||
|
||||
const activeChatData = useMemo(() => {
|
||||
return lastConversation?.find((chat: any) => chat.id === activeChatId)
|
||||
}, [lastConversation, activeChatId])
|
||||
|
||||
const chatMessages = useMemo(() => {
|
||||
if (!activeChatId || !mensajesDelChat) return []
|
||||
|
||||
@@ -274,6 +270,7 @@ function RouteComponent() {
|
||||
isSending,
|
||||
messages.length,
|
||||
chatMessages.length,
|
||||
messages,
|
||||
])
|
||||
|
||||
useEffect(() => {
|
||||
@@ -288,7 +285,7 @@ function RouteComponent() {
|
||||
setInput((prev) =>
|
||||
injectFieldsIntoInput(prev || 'Mejora este campo:', [field]),
|
||||
)
|
||||
}, [availableFields])
|
||||
}, [availableFields, routerState.location.state])
|
||||
|
||||
const createNewChat = () => {
|
||||
setActiveChatId(undefined) // Al ser undefined, el próximo handleSend creará uno nuevo
|
||||
@@ -404,17 +401,16 @@ function RouteComponent() {
|
||||
if (isSending || (!rawText.trim() && selectedFields.length === 0)) return
|
||||
|
||||
const currentFields = [...selectedFields]
|
||||
const finalContent = buildPrompt(rawText, currentFields)
|
||||
setIsSending(true)
|
||||
setOptimisticMessage(rawText)
|
||||
|
||||
// Limpiar input inmediatamente para feedback visual
|
||||
setOptimisticMessage(finalContent)
|
||||
setInput('')
|
||||
setSelectedFields([])
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
planId,
|
||||
content: buildPrompt(rawText, currentFields),
|
||||
planId: planId as any,
|
||||
content: finalContent,
|
||||
conversacionId: activeChatId,
|
||||
campos:
|
||||
currentFields.length > 0
|
||||
@@ -423,13 +419,12 @@ function RouteComponent() {
|
||||
}
|
||||
|
||||
const response = await sendChat(payload)
|
||||
|
||||
// IMPORTANTE: Si es un chat nuevo, actualizar el ID antes de invalidar
|
||||
setIsSyncing(true)
|
||||
if (response.conversacionId && response.conversacionId !== activeChatId) {
|
||||
setActiveChatId(response.conversacionId)
|
||||
}
|
||||
|
||||
// Invalidar ambas para asegurar que la lista de la izquierda y los mensajes se
|
||||
// ESPERAMOS a que la caché se actualice antes de quitar el "isSending"
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ['conversation-by-plan', planId],
|
||||
@@ -440,12 +435,27 @@ function RouteComponent() {
|
||||
])
|
||||
} catch (error) {
|
||||
console.error('Error:', error)
|
||||
} finally {
|
||||
setIsSending(false)
|
||||
setOptimisticMessage(null)
|
||||
} finally {
|
||||
// Solo ahora quitamos los indicadores de carga
|
||||
setIsSending(false)
|
||||
// setOptimisticMessage(null)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!isSyncing || !mensajesDelChat || mensajesDelChat.length === 0) return
|
||||
|
||||
// Forzamos el tipo a 'any' o a tu interfaz de mensaje para saltarnos la unión de tipos compleja
|
||||
const ultimoMensajeDB = mensajesDelChat[mensajesDelChat.length - 1] as any
|
||||
|
||||
// Ahora la validación es directa y no debería dar avisos de "unnecessary"
|
||||
if (ultimoMensajeDB?.respuesta) {
|
||||
setIsSyncing(false)
|
||||
setOptimisticMessage(null)
|
||||
}
|
||||
}, [mensajesDelChat, isSyncing])
|
||||
|
||||
const totalReferencias = useMemo(() => {
|
||||
return (
|
||||
selectedArchivoIds.length +
|
||||
@@ -647,42 +657,55 @@ function RouteComponent() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{chatMessages.map((msg: any) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
className={`flex max-w-[85%] flex-col ${
|
||||
msg.role === 'user'
|
||||
? 'ml-auto items-end'
|
||||
: 'items-start'
|
||||
}`}
|
||||
>
|
||||
{chatMessages.map((msg: any) => {
|
||||
const isAI = msg.role === 'assistant'
|
||||
const isUser = msg.role === 'user'
|
||||
// IMPORTANTE: Asegúrate de que msg.id contenga la info de procesamiento o pásala en el map
|
||||
const isProcessing = msg.isProcessing
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm transition-all duration-300 ${
|
||||
msg.role === 'user'
|
||||
? 'rounded-tr-none bg-teal-600 text-white'
|
||||
: `rounded-tl-none border bg-white text-slate-700 ${
|
||||
// --- LÓGICA DE REFUSAL ---
|
||||
msg.isRefusal
|
||||
? 'border-red-200 bg-red-50/50 ring-1 ring-red-100'
|
||||
: 'border-slate-100'
|
||||
}`
|
||||
key={msg.id}
|
||||
className={`flex max-w-[85%] flex-col ${
|
||||
isUser ? 'ml-auto items-end' : 'items-start'
|
||||
}`}
|
||||
>
|
||||
{/* Icono opcional de advertencia si es refusal */}
|
||||
{msg.isRefusal && (
|
||||
<div className="mb-1 flex items-center gap-1 text-[10px] font-bold text-red-500 uppercase">
|
||||
<span>Aviso del Asistente</span>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`relative rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm transition-all duration-300 ${
|
||||
isUser
|
||||
? 'rounded-tr-none bg-teal-600 text-white'
|
||||
: `rounded-tl-none border bg-white text-slate-700 ${
|
||||
msg.isRefusal
|
||||
? 'border-red-200 bg-red-50/50 ring-1 ring-red-100'
|
||||
: 'border-slate-100'
|
||||
}`
|
||||
}`}
|
||||
>
|
||||
{/* Aviso de Refusal */}
|
||||
{msg.isRefusal && (
|
||||
<div className="mb-1 flex items-center gap-1 text-[10px] font-bold text-red-500 uppercase">
|
||||
<span>Aviso del Asistente</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{msg.content}
|
||||
{/* CONTENIDO CORRECTO: Usamos msg.content */}
|
||||
{isAI && isProcessing ? (
|
||||
<div className="flex items-center gap-2 py-1">
|
||||
<div className="flex gap-1">
|
||||
<span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500" />
|
||||
<span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500 [animation-delay:-0.15s]" />
|
||||
<span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500 [animation-delay:-0.3s]" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
msg.content // <--- CAMBIO CLAVE
|
||||
)}
|
||||
|
||||
{!msg.isRefusal &&
|
||||
msg.suggestions &&
|
||||
msg.suggestions.length > 0 && (
|
||||
{/* Recomendaciones */}
|
||||
{isAI && msg.suggestions?.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<ImprovementCard
|
||||
suggestions={msg.suggestions}
|
||||
suggestions={msg.suggestions} // Usamos el nombre normalizado en el flatMap
|
||||
dbMessageId={msg.dbMessageId}
|
||||
planId={planId}
|
||||
currentDatos={data?.datos}
|
||||
@@ -693,19 +716,24 @@ function RouteComponent() {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
|
||||
{optimisticMessage && (
|
||||
<div className="animate-in fade-in slide-in-from-right-2 ml-auto flex max-w-[85%] flex-col items-end">
|
||||
<div className="rounded-2xl rounded-tr-none bg-teal-600/70 p-3 text-sm whitespace-pre-wrap text-white shadow-sm">
|
||||
{optimisticMessage}
|
||||
{(isSending || isSyncing) &&
|
||||
optimisticMessage &&
|
||||
!chatMessages.some(
|
||||
(m) => m.content === optimisticMessage,
|
||||
) && (
|
||||
<div className="animate-in fade-in slide-in-from-right-2 ml-auto flex max-w-[85%] flex-col items-end">
|
||||
<div className="rounded-2xl rounded-tr-none bg-teal-600/70 p-3 text-sm whitespace-pre-wrap text-white shadow-sm">
|
||||
{optimisticMessage}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{isSending && (
|
||||
{(isSending || isSyncing) && (
|
||||
<div className="animate-in fade-in slide-in-from-left-2 flex flex-col items-start duration-300">
|
||||
<div className="rounded-2xl rounded-tl-none border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -715,7 +743,9 @@ function RouteComponent() {
|
||||
<span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500" />
|
||||
</div>
|
||||
<span className="text-[10px] font-medium tracking-tight text-slate-400 uppercase">
|
||||
Esperando respuesta...
|
||||
{isSyncing
|
||||
? 'Actualizando historial...'
|
||||
: 'Esperando respuesta...'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user