Lizandro GuarnizoandClaude Opus 5
c78fcce89b
AgenteDetail tenía 1026 líneas con las siete pestañas adentro: el estado de todas mezclado en un solo <script setup>, y cualquier cambio en una obligaba a leer las otras seis para saber qué se rompía. Reorganizarla en ese estado sería trabajar a ciegas. Queda en 514 líneas —el encabezado, las pestañas y la carga de datos— más un componente por zona: conocimiento sigue adentro por ahora, y salen auditoría, conexiones, chat, conversaciones, herramientas y canales. El padre sigue siendo dueño de los datos y cada pestaña emite "recargar" en vez de tener su propia copia: con copias por pestaña, ir y volver entre dos mostraba estados distintos de lo mismo. Sin un solo cambio visible, y verificado como tal: se capturaron las siete pestañas antes de empezar y se compararon píxel a píxel después de cada extracción. Las siete dan idénticas — la única diferencia que reporta el comparador está por debajo del umbral y cae exactamente sobre el punto que late en una fuente "procesando", o sea la animación fotografiada en otro instante. Este commit no cambia nada para el usuario. Es la base para poder reorganizar la pantalla sin romperla. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
56 lines
1.9 KiB
Vue
56 lines
1.9 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { api } from '../../lib/api.js'
|
|
import { apiUmind } from '../../lib/contexto.js'
|
|
import UiEmptyState from '../../components/ui/UiEmptyState.vue'
|
|
|
|
const props = defineProps({
|
|
agenteId: { type: Number, required: true },
|
|
sesiones: { type: Array, default: () => [] },
|
|
})
|
|
|
|
// El historial se pide al abrir cada conversación, no de entrada: cargar todas
|
|
// las conversaciones completas para mostrar una lista sería traer de más.
|
|
const historial = ref([])
|
|
const sesionActiva = ref(null)
|
|
|
|
async function verHistorial(sessionId) {
|
|
sesionActiva.value = sessionId
|
|
const r = await api.get(apiUmind(`/umind/historial?agente_id=${props.agenteId}&session_id=${sessionId}`))
|
|
historial.value = r.items || []
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="col-span-1 card divide-y divide-borde max-h-[28rem] overflow-y-auto">
|
|
<UiEmptyState
|
|
v-if="sesiones.length === 0"
|
|
titulo="Nadie escribió todavía"
|
|
detalle="Acá vas a ver todo lo que le preguntan y qué contestó."
|
|
/>
|
|
<button
|
|
v-for="s in sesiones"
|
|
:key="s.session_id"
|
|
class="w-full text-left p-3 hover:bg-elevado text-sm"
|
|
:class="sesionActiva === s.session_id ? 'bg-gray-50 dark:bg-gray-800' : ''"
|
|
@click="verHistorial(s.session_id)"
|
|
>
|
|
<div class="text-texto truncate">{{ s.content }}</div>
|
|
<div class="text-xs text-tenue mt-0.5">{{ s.session_id }}</div>
|
|
</button>
|
|
</div>
|
|
<div class="col-span-2 card p-4 max-h-[28rem] overflow-y-auto space-y-2">
|
|
<p v-if="!sesionActiva" class="text-sm text-tenue">Elegí una conversación de la izquierda.</p>
|
|
<div
|
|
v-for="m in historial"
|
|
:key="m.ID"
|
|
class="max-w-[80%] px-3 py-2 rounded-lg text-sm"
|
|
:class="m.role === 'user' ? 'bg-brand text-white ml-auto' : 'bg-elevado text-texto'"
|
|
>
|
|
{{ m.content }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|