DAO pattern

backend/app_factory.py

@@ -6,6 +6,7 @@ Las rutas son delegadores delgados: validan la entrada, llaman al servicio corre
 import dataclasses
 from datetime import datetime, timezone
 
+import requests as http_requests
 from flask import Flask, jsonify, request
 from flask_cors import CORS
 
@@ -26,11 +27,15 @@ from repositories.history_repository import (
     obtener_relacion_pelicula_emocion,
     añadir_pelicula_a_historial,
 )
+from config import OMDB_API_KEY
 from services.analysis_service import AnalysisService
 from services.emotion_service import analizar_texto, crear_clasificador_emociones
 from services.recommender_service import cargar_dataset_movies
 
 
+_poster_cache: dict[str, str | None] = {}
+
+
 def create_app() -> Flask:
     app = Flask(__name__)
     CORS(app)
@@ -243,6 +248,33 @@ def create_app() -> Flask:
         historial = obtener_peliculas_del_historial(user_id=user_id, limit=limit)
         return jsonify({"items": historial, "count": len(historial)})
 
+    @app.route("/poster/<imdb_id>", methods=["GET"])
+    def get_poster(imdb_id):
+        key = str(imdb_id).strip()
+        if not key or key == "0":
+            return jsonify({"poster_url": None})
+
+        if key in _poster_cache:
+            return jsonify({"poster_url": _poster_cache[key]})
+
+        if not OMDB_API_KEY:
+            _poster_cache[key] = None
+            return jsonify({"poster_url": None})
+
+        try:
+            resp = http_requests.get(
+                "https://www.omdbapi.com/",
+                params={"i": f"tt{key}", "apikey": OMDB_API_KEY},
+                timeout=5,
+            )
+            poster = resp.json().get("Poster") if resp.ok else None
+            url = poster if poster and poster != "N/A" else None
+        except Exception:
+            url = None
+
+        _poster_cache[key] = url
+        return jsonify({"poster_url": url})
+
     @app.route("/historial/transiciones", methods=["GET"])
     def obtener_transiciones():
         user_id = str(request.args.get("user_id", "")).strip()

backend/config.py

@@ -1,10 +1,16 @@
 """
-Este archivo contiene rutas, constantes y configuracion como modelos pre-cargados 
-que se utilizan en varias partes del backend. 
+Este archivo contiene rutas, constantes y configuracion como modelos pre-cargados
+que se utilizan en varias partes del backend.
 """
 
+import os
 from pathlib import Path
 
+from dotenv import load_dotenv
+
+# Load environment variables from .env file
+load_dotenv(Path(__file__).parent / ".env")
+
 # El directorio raiz del proyecto es /ValorSentimental.
 ROOT_DIR = Path(__file__).resolve().parent.parent
 # La base de datos de historial se guarda en /ValorSentimental/backend/history.db.
@@ -32,3 +38,7 @@ OLLAMA_URL = "http://localhost:11434/api/generate"
 LIKE_THRESHOLD = 4.0
 # Prior de suavizado para score global (evita sesgo por pocas valoraciones).
 GLOBAL_PRIOR_COUNT = 50.0
+
+# OMDB API key — set in environment variable OMDB_API_KEY.
+# Free key at https://www.omdbapi.com/apikey.aspx (1000 requests/day)
+OMDB_API_KEY = os.getenv("OMDB_API_KEY", "")

backend/dao/emocion_dao.py

@@ -0,0 +1,8 @@
+from db import obtener_conexion_bd
+
+class EmocionDAO:
+    def __init__(self):
+        self.obtener_conexion = obtener_conexion_bd()
+
+    def añadir(self, user_id: str, texto: str, emocion: str, tiempo: str):
+        con = self.

backend/dao/historial_dao.py

@@ -0,0 +1,26 @@
+from db import obtener_conexion_bd
+from models import PeliculaVista, Emocion
+
+class HistorialDAO:
+    def __init__(self):
+        self.obtener_conexion = obtener_conexion_bd()
+
+    def añadir_pelicula(self, user_id: str, titulo: str, emocion: str, rating: float, texto: str, tiempo: str):
+        con = self.obtener_conexion()
+        con.execute(
+            "INSERT INTO historial_peliculas () "
+        )
+        con.comit()
+        
+    def obtener_por_usuario(self, user_id: str):
+        con = self.obtener_conexion()
+        peliculas = con.execute(
+            "SELECT from historial_peliculas WHERE user_id = ?",
+            (user_id),
+        ).fetchall()
+
+        return [
+            PeliculaVista(
+                id =  peli["id"], user_id = ["user_id"], movie_id = peli["movie_id"], titulo = peli["title"], emocion = peli["emotion"], valoracion = peli["user_rating"], texto = peli["session_text"], tiempo = peli["viewed_at"],
+            ) for peli in peliculas
+        ]

backend/dao/usuario_dao.py

@@ -0,0 +1,94 @@
+from db import obtener_conexion_bd
+from models import Usuario
+import uuid
+import datetime
+
+class UsuarioDao:
+    def __init__(self):
+        self.obtener_conexion = obtener_conexion_bd()
+
+    # Crea usuario
+    def registrar(self, nombre: str, contraseña: str):
+        user_id = str(uuid.uuid4())
+        token = str(uuid.uuid4())
+
+        try:
+            con = self.obtener_conexion()
+            usuario = con.execute(
+                """INSERT INTO usuarios (id, username , password_hash, session_token, created_at)
+                   VALUES (?, ?, ?, ?, ?, ?)""",
+                (user_id, nombre, hashear(contraseña), token, datetime.now().isoformat()),
+            )
+            con.commit()
+            
+            return Usuario(user_id, nombre, token)
+        except Exception:
+            return None
+        
+    # Inicia sesion
+    def login(self, nombre: str, contraseña: str):
+        con = self.obtener_conexion()
+        usuario = con.execute(
+            "SELECT id, username, password_hash FROM usuarios WHERE username = ?",
+                (nombre),
+            ).fetchone()
+        if not usuario or not comprobar_contraseña(usuario["password_hash", contraseña]):
+            return None
+        token = str(uuid.uiid4())
+        con = self.obtener_conexion()
+        con.execute("UPDATE Usuarios SET session_token = ? where id = ?",
+                    (token, usuario["id"]))
+        con.commit()
+        return Usuario(id = usuario["id"], nombre = usuario["username"], token = token)
+    
+    # Obtener por username
+    def obtener_por_nombre(self, nombre: str):
+        con = self.obtener_conexion()
+        usuario = con.execute(
+            "SELECT id, username FROM usuarios WHERE username = ?",
+            (nombre),
+        ).fetchone()
+        if not usuario: return None
+
+        return Usuario(usuario["id"], usuario["name"], usuario["token"])
+    
+    # Obtener por token
+    def obtener_por_token(self, token:str):
+        con = self.obtener_conexion()
+        usuario = con.execute(
+            "SELECT id, username FROM usuarios WHERE token = ?",
+            (token),
+        ).fetchone()
+        if not usuario: return None
+
+        return Usuario(usuario["id"], usuario["name"], usuario["token"])
+    
+    def actualizar_token(self, user_id: str, token: str):
+        con = self.obtener_conexion()
+        con.execute(
+            "UPDATE Usuarios set session_token = ? where user_id = ?",
+            (token, user_id),
+        )
+        con.comit()
+        return Usuario()
+    
+    def actualizar_contraseña(self, user_id: str, contraseña_hash: str):
+        con = self.obtener_conexion()
+        con.execute(
+            "UPDATE Usuarios set password = ? where user_id = ?",
+            (contraseña_hash, user_id)
+        )
+        con.comit()
+        return Usuario()
+    
+    def eliminar(self, user_id: str):
+        con = self.obtener_conexion()
+        con.execute(
+            "DELETE from Usuarios where user_id = ?",
+            (user_id),
+        )
+        con.commit()
+        return 
+
+
+        

backend/models.py

@@ -1,40 +1,45 @@
 from collections import Counter
 from dataclasses import dataclass, field
+from datetime import datetime
 
 
 @dataclass
-class PerfilUsuario:
-    peliculas_vistas: set[str]
-    probabilidades_generos: dict[str, float]
-    contador_generos_gustados: Counter
-    medias_rating_por_genero: dict[str, float]
-    zona_confort: set[str]
-    ranking_generos: dict[str, int]
-    tiene_historial: bool
-
+class Usuario:
+    id: str
+    name: str
+    token: str
 
 @dataclass
-class ContextoEmocional:
-    emocion_es: str
-    arousal_actual: float
-    valencia_actual: float | str | None
-    historico_arousal: list[float] = field(default_factory=list)
+class PeliculaVista:
+    id: int
+    user_id: str
+    movie_id: str
+    titulo: str
+    emocion: str
+    valoracion: float | None
+    texto: str
+    tiempo: str
 
+@dataclass
+class Emocion:
+    id: int
+    user_id: int
+    texto: str
+    emocion: str
+    tiempo: str
 
 @dataclass
-class ResultadoAnalisis:
-    emociones: list[dict]
-    emocion_dominante: str
-    valencia_dominante: str
-    valencia_continua: float
-    arousal_actual: float
-    estrategia: str
-    debug_recomendacion: dict
-    historico_arousal_size: int
-    emocion_anterior: str | None
-    modo_recomendacion: str
-    ciclo_recomendacion_id: int | None
-    chatbot_texto: str
-    chatbot_fuente: str
-    pelicula_transicion: dict | None
-    recomendaciones: list[dict]
+class Ciclo:
+    id: int
+    user_id: str
+    texto_pre: str
+    texto_post: str
+    emocion_pre_: str
+    emocion_post: str
+    valencia_pre: str
+    valencia_post: str
+    tiempo_pre: str
+    tiempo_post: str
+    estrategia: int
+    movie_id: str | None
+    movie_titulo: str | None

backend/services/recommender_service.py

@@ -52,8 +52,26 @@ def _cargar_estadisticas_ratings() -> tuple[dict[str, tuple[float, int]], float]
     return stats, global_mean
 
 
+def _cargar_links() -> dict[str, str]:
+    """Returns {movieId: imdbId} from links.csv (tries full dataset first, then small)."""
+    candidates = [
+        ROOT_DIR / "data" / "ml-latest" / "links.csv",
+        ROOT_DIR / "notebooks" / "data" / "raw" / "ml-latest-small" / "links.csv",
+    ]
+    for path in candidates:
+        if path.exists():
+            with open(path, "r", encoding="utf-8", newline="") as f:
+                return {
+                    str(row.get("movieId", "")).strip(): str(row.get("imdbId", "")).strip()
+                    for row in csv.DictReader(f)
+                    if str(row.get("imdbId", "")).strip()
+                }
+    return {}
+
+
 def cargar_dataset_movies() -> tuple[list[dict], float]:
     rating_stats, global_mean = _cargar_estadisticas_ratings()
+    links = _cargar_links()
     path = ROOT_DIR / "data" / "ml-latest" / "movies.csv"
 
     if path.exists():
@@ -65,6 +83,7 @@ def cargar_dataset_movies() -> tuple[list[dict], float]:
             mean, count = rating_stats.get(movie_id, (0.0, 0))
             row["rating_count"] = int(count)
             row["rating_mean"] = float(mean)
+            row["imdb_id"] = links.get(movie_id, "")
 
         return rows, global_mean
 
@@ -72,6 +91,9 @@ def cargar_dataset_movies() -> tuple[list[dict], float]:
     if fallback_path.exists():
         with open(fallback_path, "r", encoding="utf-8", newline="") as f:
             rows = list(csv.DictReader(f))
+        for row in rows:
+            movie_id = str(row.get("movieId", "")).strip()
+            row["imdb_id"] = links.get(movie_id, "")
         total_w = sum(float(r.get("rating_mean", 0) or 0) * int(r.get("rating_count", 0) or 0) for r in rows)
         total_n = sum(int(r.get("rating_count", 0) or 0) for r in rows)
         fallback_mean = (total_w / total_n) if total_n else 3.5
@@ -257,6 +279,16 @@ def _recomendar_calidad_aleatoria(candidatas: list[dict], media_global: float, l
     return random.sample(pool, k=limit)
 
 
+def _sample_from_ranked(ranked: list[dict], limit: int) -> list[dict]:
+    """Sample randomly from the top pool to avoid always returning identical results."""
+    pool_size = max(limit * 5, 30)
+    pool = ranked[:pool_size]
+    if len(pool) <= limit:
+        random.shuffle(pool)
+        return pool
+    return random.sample(pool, k=limit)
+
+
 # ---------------------------------------------------------------------------
 # Strategy pattern
 # ---------------------------------------------------------------------------
@@ -288,7 +320,7 @@ class EstrategiaV1(EstrategiaRecomendacion):
             base = inside if inside else peliculas_candidatas
 
         ranked = sorted(base, key=lambda r: _puntuacion_calidad_global(r, media_global_ratings), reverse=True)
-        return ranked[:limit]
+        return _sample_from_ranked(ranked, limit)
 
 
 class EstrategiaV2(EstrategiaRecomendacion):
@@ -316,7 +348,7 @@ class EstrategiaV2(EstrategiaRecomendacion):
                 reverse=True,
             )
 
-        return ranked[:limit]
+        return _sample_from_ranked(ranked, limit)
 
 
 class EstrategiaV3(EstrategiaRecomendacion):
@@ -353,7 +385,7 @@ class EstrategiaV3(EstrategiaRecomendacion):
             ) * _puntuacion_calidad_global(peli, media_global_ratings),
             reverse=True,
         )
-        return ranked[:limit]
+        return _sample_from_ranked(ranked, limit)
 
 
 _ESTRATEGIAS: dict[str, EstrategiaRecomendacion] = {

chatbot/src/components/AppHero.vue

@@ -12,6 +12,19 @@
       </div>
 
       <div class="hero-controls">
+        <v-btn
+          v-if="historyCount > 0"
+          icon
+          size="small"
+          variant="text"
+          title="Historial de visionado"
+          @click="$emit('show-history')"
+        >
+          <v-badge :content="historyCount" color="amber-darken-1" :max="99">
+            <v-icon size="18">mdi-history</v-icon>
+          </v-badge>
+        </v-btn>
+
         <v-menu :close-on-content-click="true">
           <template #activator="{ props: menuProps }">
             <v-chip v-bind="menuProps" size="small" class="user-chip" style="cursor:pointer">
@@ -79,9 +92,12 @@ import { useRouter } from "vue-router";
 import { useTheme } from "vuetify";
 
 defineProps({
-  username: { type: String, default: "" },
+  username:     { type: String, default: "" },
+  historyCount: { type: Number, default: 0 },
 });
 
+defineEmits(["show-history"]);
+
 const router      = useRouter();
 const theme       = useTheme();
 const isDark      = computed(() => theme.global.current.value.dark);

chatbot/src/components/MessageFeed.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-col cols="12" md="8">
+  <v-col cols="12">
     <v-card class="chat-card" rounded="xl" elevation="0">
       <v-card-text ref="feedEl" class="feed-scroll">
 
@@ -119,31 +119,48 @@
                 No hay recomendaciones disponibles.
               </v-alert>
 
-              <div v-else class="movie-list">
+              <div v-else class="poster-grid">
                 <div
                   v-for="movie in msg.recommendations.slice(0, 6)"
                   :key="movie.movieId"
-                  class="movie-item"
+                  class="poster-card"
+                  :class="{ 'poster-card--viewed': viewedMovieIds.has(String(movie.movieId)) }"
                 >
-                  <div class="movie-info">
-                    <v-icon size="14" color="blue-grey" class="movie-icon">mdi-filmstrip</v-icon>
-                    <div class="movie-text">
-                      <div class="movie-title">{{ movie.title }}</div>
-                      <div class="movie-genres">{{ movie.genres }}</div>
+                  <!-- Poster thumbnail -->
+                  <div class="poster-thumb" :style="posters[String(movie.imdb_id)] ? {} : posterStyle(movie.title)">
+                    <img
+                      v-if="posters[String(movie.imdb_id)]"
+                      :src="posters[String(movie.imdb_id)]"
+                      :alt="movie.title"
+                      class="poster-real-img"
+                      loading="lazy"
+                    />
+                    <template v-else>
+                      <v-icon size="32" color="white" style="opacity: 0.55;">mdi-filmstrip</v-icon>
+                      <div class="poster-initials">{{ movieInitials(movie.title) }}</div>
+                    </template>
+                    <div v-if="viewedMovieIds.has(String(movie.movieId))" class="poster-seen-badge">
+                      <v-icon size="14" color="white">mdi-check</v-icon>
                     </div>
                   </div>
-                  <v-btn
-                    size="x-small"
-                    :variant="viewedMovieIds.has(String(movie.movieId)) ? 'tonal' : 'flat'"
-                    :color="viewedMovieIds.has(String(movie.movieId)) ? 'success' : 'amber-darken-1'"
-                    :disabled="viewedMovieIds.has(String(movie.movieId))"
-                    rounded="lg"
-                    class="mark-btn"
-                    @click="$emit('mark-viewed', movie, msg.dominantEmotion, msg.text, msg.recommendationCycleId)"
-                  >
-                    <v-icon v-if="viewedMovieIds.has(String(movie.movieId))" size="12" class="mr-1">mdi-check</v-icon>
-                    {{ viewedMovieIds.has(String(movie.movieId)) ? 'Vista' : 'Marcar vista' }}
-                  </v-btn>
+                  <!-- Poster info -->
+                  <div class="poster-body">
+                    <div class="poster-title" :title="movie.title">{{ movie.title }}</div>
+                    <div class="poster-genres">{{ firstGenre(movie.genres) }}</div>
+                    <v-btn
+                      size="x-small"
+                      :variant="viewedMovieIds.has(String(movie.movieId)) ? 'tonal' : 'flat'"
+                      :color="viewedMovieIds.has(String(movie.movieId)) ? 'success' : 'amber-darken-1'"
+                      :disabled="viewedMovieIds.has(String(movie.movieId))"
+                      rounded="lg"
+                      class="poster-btn mt-1"
+                      block
+                      @click="$emit('mark-viewed', movie, msg.dominantEmotion, msg.text, msg.recommendationCycleId)"
+                    >
+                      <v-icon v-if="viewedMovieIds.has(String(movie.movieId))" size="11" class="mr-1">mdi-check</v-icon>
+                      {{ viewedMovieIds.has(String(movie.movieId)) ? 'Vista' : 'Marcar vista' }}
+                    </v-btn>
+                  </div>
                 </div>
               </div>
             </div>
@@ -194,7 +211,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, reactive, ref, watch } from "vue";
 import { useTheme } from "vuetify";
 import { dominantEmotionInfo, emotionInfo } from "../constants/emotions";
 import MessageComposer from "./MessageComposer.vue";
@@ -210,8 +227,34 @@ const props = defineProps({
 
 defineEmits(["mark-viewed", "update:input", "update:estrategia", "analyze", "quick-fill"]);
 
-const theme   = useTheme();
-const feedEl  = ref(null);
+const theme    = useTheme();
+const feedEl   = ref(null);
+const posters  = reactive({}); // { [tmdb_id]: url | null }
+
+async function loadPoster(imdbId) {
+  const key = String(imdbId);
+  if (!imdbId || key in posters) return;
+  posters[key] = null;
+  try {
+    const res  = await fetch(`http://localhost:5000/poster/${key}`);
+    const data = await res.json();
+    posters[key] = data.poster_url || null;
+  } catch { /* keep null */ }
+}
+
+watch(
+  () => props.messages,
+  (msgs) => {
+    for (const msg of msgs) {
+      if (msg.type === "result") {
+        for (const movie of msg.recommendations ?? []) {
+          if (movie.imdb_id) loadPoster(movie.imdb_id);
+        }
+      }
+    }
+  },
+  { immediate: true, deep: true },
+);
 
 const barBgColor = computed(() =>
   theme.global.current.value.dark ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.06)"
@@ -226,6 +269,46 @@ const examples = [
 const strategyMap = { v1: "Básica", v2: "Avanzada", v3: "Experimental" };
 function strategyLabel(key) { return strategyMap[key] || key; }
 
+function firstGenre(genres) {
+  if (!genres) return "";
+  return genres.split("|")[0];
+}
+
+function movieInitials(title) {
+  if (!title) return "?";
+  return title
+    .replace(/\s*\(\d{4}\)\s*$/, "")
+    .split(/\s+/)
+    .filter(w => w.length > 2)
+    .slice(0, 2)
+    .map(w => w[0].toUpperCase())
+    .join("") || title[0].toUpperCase();
+}
+
+const POSTER_GRADIENTS = [
+  ["#667eea", "#764ba2"],
+  ["#f59e0b", "#ef4444"],
+  ["#10b981", "#0d9488"],
+  ["#6366f1", "#8b5cf6"],
+  ["#ec4899", "#a855f7"],
+  ["#14b8a6", "#3b82f6"],
+  ["#f97316", "#dc2626"],
+  ["#3b82f6", "#6366f1"],
+  ["#84cc16", "#059669"],
+  ["#e11d48", "#9333ea"],
+];
+
+function posterStyle(title) {
+  let hash = 0;
+  for (let i = 0; i < (title?.length ?? 0); i++) {
+    hash = (hash * 31 + title.charCodeAt(i)) | 0;
+  }
+  const [c1, c2] = POSTER_GRADIENTS[Math.abs(hash) % POSTER_GRADIENTS.length];
+  return {
+    background: `linear-gradient(145deg, ${c1}, ${c2})`,
+  };
+}
+
 async function scrollToBottom() {
   await nextTick();
   const el = feedEl.value?.$el;
@@ -247,7 +330,8 @@ watch(() => props.loading, val => { if (val) scrollToBottom(); });
 }
 
 .feed-scroll {
-  max-height: 63vh;
+  height: calc(100vh - 360px);
+  min-height: 320px;
   overflow-y: auto;
   padding: 20px;
   scroll-behavior: smooth;
@@ -462,7 +546,7 @@ watch(() => props.loading, val => { if (val) scrollToBottom(); });
   display: flex;
   align-items: center;
   gap: 4px;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
 }
 
 .reco-title {
@@ -473,45 +557,103 @@ watch(() => props.loading, val => { if (val) scrollToBottom(); });
 
 .reco-title strong { color: var(--vs-text); }
 
-.movie-list { display: flex; flex-direction: column; gap: 5px; }
+/* ── Poster grid ─────────────────────────────── */
+.poster-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 12px;
+}
 
-.movie-item {
+.poster-card {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 9px 12px;
-  background: var(--vs-movie-bg);
+  flex-direction: column;
+  border-radius: 12px;
+  overflow: hidden;
   border: 1px solid var(--vs-border);
-  border-radius: 10px;
-  transition: background 0.18s ease;
+  background: var(--vs-movie-bg);
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.poster-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
 }
 
-.movie-item:hover { background: var(--vs-movie-hover); }
+.poster-card--viewed {
+  opacity: 0.65;
+}
 
-.movie-info {
+.poster-thumb {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 2 / 3;
   display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  min-width: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  overflow: hidden;
 }
 
-.movie-icon { flex-shrink: 0; margin-top: 2px; }
+.poster-real-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 0;
+}
 
-.movie-text  { min-width: 0; }
+.poster-initials {
+  color: rgba(255,255,255,0.9);
+  font-weight: 800;
+  font-size: 1.4rem;
+  letter-spacing: 0.04em;
+  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
+  font-family: "Fraunces", serif;
+}
 
-.movie-title {
-  font-weight: 600;
-  font-size: 0.88rem;
+.poster-seen-badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: rgba(34,197,94,0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.poster-body {
+  padding: 8px 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+}
+
+.poster-title {
+  font-weight: 700;
+  font-size: 0.78rem;
   color: var(--vs-text);
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.poster-genres {
+  font-size: 0.68rem;
+  color: var(--vs-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.movie-genres { font-size: 0.74rem; color: var(--vs-muted); margin-top: 1px; }
-
-.mark-btn    { flex-shrink: 0; font-size: 0.72rem !important; }
+.poster-btn { font-size: 0.68rem !important; }
 
 /* ── Loading ─────────────────────────────────── */
 .loading-row {
@@ -524,13 +666,13 @@ watch(() => props.loading, val => { if (val) scrollToBottom(); });
 }
 
 @media (max-width: 960px) {
-  .feed-scroll { max-height: none; min-height: 320px; }
+  .feed-scroll { height: auto; min-height: 320px; }
   .bar-row     { grid-template-columns: 90px 1fr 36px; }
+  .poster-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
 }
 
 @media (max-width: 600px) {
-  .movie-item  { flex-direction: column; align-items: flex-start; gap: 6px; }
-  .mark-btn    { align-self: flex-end; }
   .bar-row     { grid-template-columns: 80px 1fr 32px; }
+  .poster-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
 }
 </style>

chatbot/src/components/SidePanel.vue

@@ -8,23 +8,35 @@
           <v-icon size="14" color="amber-darken-1" class="mr-1">mdi-filmstrip</v-icon>
           Visto recientemente
         </div>
-        <v-btn
-          size="x-small"
-          variant="tonal"
-          color="error"
-          icon
-          :disabled="!history.length || clearLoading"
-          title="Borrar historial"
-          @click="emit('clear-history')"
-        >
-          <v-icon size="15">mdi-delete-sweep-outline</v-icon>
-        </v-btn>
+        <div class="header-actions">
+          <v-btn
+            v-if="history.length"
+            size="x-small"
+            variant="text"
+            color="primary"
+            class="mr-1"
+            @click="emit('show-all-history')"
+          >
+            Ver todo
+          </v-btn>
+          <v-btn
+            size="x-small"
+            variant="tonal"
+            color="error"
+            icon
+            :disabled="!history.length || clearLoading"
+            title="Borrar historial"
+            @click="emit('clear-history')"
+          >
+            <v-icon size="15">mdi-delete-sweep-outline</v-icon>
+          </v-btn>
+        </div>
       </div>
 
       <v-card-text class="pt-1 pb-3">
         <template v-if="history.length">
           <div
-            v-for="item in history.slice(0, 8)"
+            v-for="item in history.slice(0, 3)"
             :key="item.id"
             class="history-item"
           >
@@ -39,6 +51,9 @@
               </div>
             </div>
           </div>
+          <div v-if="history.length > 3" class="more-hint" @click="emit('show-all-history')">
+            +{{ history.length - 3 }} más
+          </div>
         </template>
         <div v-else class="empty-history">
           <v-icon size="26" color="blue-grey" class="mb-2">mdi-movie-open-outline</v-icon>
@@ -47,27 +62,6 @@
       </v-card-text>
     </v-card>
 
-    <!-- How it works -->
-    <v-card class="panel-card mt-3" rounded="xl" elevation="0">
-      <div class="panel-header px-4 pt-4 pb-2">
-        <div class="panel-label">
-          <v-icon size="14" color="primary" class="mr-1">mdi-information-outline</v-icon>
-          Cómo funciona
-        </div>
-      </div>
-      <v-card-text class="pt-1 pb-3">
-        <div v-for="item in howItems" :key="item.title" class="how-item">
-          <div class="how-icon" :style="{ background: item.bg }">
-            <v-icon size="16" :color="item.color">{{ item.icon }}</v-icon>
-          </div>
-          <div>
-            <div class="how-title">{{ item.title }}</div>
-            <div class="how-desc">{{ item.desc }}</div>
-          </div>
-        </div>
-      </v-card-text>
-    </v-card>
-
   </v-col>
 </template>
 
@@ -79,31 +73,7 @@ defineProps({
   clearLoading: { type: Boolean, default: false },
 });
 
-const emit = defineEmits(["clear-history"]);
-
-const howItems = [
-  {
-    icon:  "mdi-emoticon-happy-outline",
-    color: "amber-darken-1",
-    bg:    "rgba(245,158,11,0.1)",
-    title: "Estado positivo",
-    desc:  "Te recomiendo películas nuevas que no hayas visto.",
-  },
-  {
-    icon:  "mdi-heart-outline",
-    color: "primary",
-    bg:    "rgba(102,126,234,0.1)",
-    title: "Estado negativo",
-    desc:  "Busco películas cercanas a lo que ya te gustó.",
-  },
-  {
-    icon:  "mdi-chart-bell-curve",
-    color: "teal-darken-1",
-    bg:    "rgba(20,184,166,0.1)",
-    title: "Seguimiento emocional",
-    desc:  "Compara cómo te sentiste antes y después de ver la película.",
-  },
-];
+const emit = defineEmits(["clear-history", "show-all-history"]);
 </script>
 
 <style scoped>
@@ -121,6 +91,11 @@ const howItems = [
   justify-content: space-between;
 }
 
+.header-actions {
+  display: flex;
+  align-items: center;
+}
+
 .panel-label {
   font-size: 0.72rem;
   font-weight: 700;
@@ -170,6 +145,17 @@ const howItems = [
 
 .history-rating { color: #F59E0B; font-weight: 600; }
 
+.more-hint {
+  font-size: 0.76rem;
+  color: var(--vs-muted);
+  text-align: center;
+  padding: 6px 0 2px;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.more-hint:hover { color: var(--vs-text); }
+
 .empty-history {
   display: flex;
   flex-direction: column;
@@ -185,37 +171,4 @@ const howItems = [
   max-width: 22ch;
   line-height: 1.5;
 }
-
-/* How it works */
-.how-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  margin-bottom: 14px;
-}
-
-.how-item:last-child { margin-bottom: 0; }
-
-.how-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.how-title {
-  font-weight: 600;
-  font-size: 0.86rem;
-  color: var(--vs-text);
-  margin-bottom: 2px;
-}
-
-.how-desc {
-  font-size: 0.78rem;
-  color: var(--vs-muted);
-  line-height: 1.45;
-}
 </style>

chatbot/src/views/ChatView.vue

@@ -1,14 +1,41 @@
 <template>
   <v-main class="chat-main">
     <v-container fluid class="chat-container">
-      <AppHero :username="username" />
+      <AppHero
+        :username="username"
+        :history-count="history.length"
+        @show-history="fullHistoryDialog = true"
+      />
+
+      <!-- Recently viewed bar -->
+      <div v-if="history.length" class="recent-bar mb-3">
+        <span class="recent-label">
+          <v-icon size="13" class="mr-1">mdi-history</v-icon>
+          Visto recientemente
+        </span>
+        <div class="recent-chips">
+          <div
+            v-for="item in history.slice(0, 3)"
+            :key="item.id"
+            class="recent-chip"
+          >
+            <span class="recent-chip-emoji">{{ emotionEmoji(item.emotion) }}</span>
+            <span class="recent-chip-title">{{ item.title || item.movie_id }}</span>
+            <span v-if="item.user_rating != null" class="recent-chip-rating">{{ item.user_rating }}★</span>
+          </div>
+        </div>
+        <v-btn
+          size="x-small"
+          variant="text"
+          color="primary"
+          class="ml-2 flex-shrink-0"
+          @click="fullHistoryDialog = true"
+        >
+          Ver todo
+        </v-btn>
+      </div>
 
       <v-row align="start" class="mt-0">
-        <SidePanel
-          :history="history"
-          :clear-loading="clearHistoryLoading"
-          @clear-history="confirmClearDialog = true"
-        />
         <MessageFeed
           :messages="messages"
           :loading="loading"
@@ -104,6 +131,49 @@
       </v-card>
     </v-dialog>
 
+    <!-- Full History Dialog -->
+    <v-dialog v-model="fullHistoryDialog" max-width="500" scrollable>
+      <v-card class="dialog-card" rounded="xl" elevation="24">
+        <v-card-title class="dialog-title pa-5 pb-3">
+          <v-icon color="amber-darken-1" size="20" class="mr-2">mdi-filmstrip</v-icon>
+          Historial completo
+        </v-card-title>
+        <v-card-text class="px-4 pb-2" style="max-height: 420px; overflow-y: auto;">
+          <template v-if="history.length">
+            <div
+              v-for="item in history"
+              :key="item.id"
+              class="fh-item"
+            >
+              <span class="fh-emoji">{{ emotionEmoji(item.emotion) }}</span>
+              <div class="fh-body">
+                <div class="fh-movie">{{ item.title || item.movie_id }}</div>
+                <div class="fh-meta">
+                  <span>{{ item.emotion || "neutral" }}</span>
+                  <span v-if="item.user_rating != null" class="fh-rating">{{ item.user_rating }}★</span>
+                </div>
+              </div>
+            </div>
+          </template>
+          <div v-else class="fh-empty">No hay películas en el historial.</div>
+        </v-card-text>
+        <v-card-actions class="px-5 pb-4 pt-2">
+          <v-btn
+            variant="tonal"
+            color="error"
+            size="small"
+            :disabled="!history.length || clearHistoryLoading"
+            @click="fullHistoryDialog = false; confirmClearDialog = true"
+          >
+            <v-icon size="16" class="mr-1">mdi-delete-sweep-outline</v-icon>
+            Borrar todo
+          </v-btn>
+          <v-spacer />
+          <v-btn variant="text" color="blue-grey" @click="fullHistoryDialog = false">Cerrar</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
     <!-- Confirm Clear Dialog -->
     <v-dialog v-model="confirmClearDialog" max-width="380">
       <v-card class="dialog-card" rounded="xl" elevation="24">
@@ -149,7 +219,7 @@
 import { computed, onMounted, ref, watch } from "vue";
 import AppHero from "../components/AppHero.vue";
 import MessageFeed from "../components/MessageFeed.vue";
-import SidePanel from "../components/SidePanel.vue";
+import { emotionInfoBySpanish } from "../constants/emotions";
 
 const messages    = ref([]);
 const input       = ref("");
@@ -162,6 +232,7 @@ const followupByCycle    = ref({});
 const clearHistoryLoading = ref(false);
 
 const pendingViewOp  = ref(null);
+const fullHistoryDialog  = ref(false);
 const ratingDialog   = ref({ open: false, value: 3, movieTitle: "" });
 const postDialog     = ref({ open: false, text: "", movieTitle: "", cycleId: null, movieId: null, movieTitleFull: "" });
 const confirmClearDialog = ref(false);
@@ -169,6 +240,10 @@ const snackbar       = ref({ show: false, text: "", color: "success" });
 
 const viewedMovieIds = computed(() => new Set(history.value.map(i => String(i.movie_id))));
 
+function emotionEmoji(emotion) {
+  return emotionInfoBySpanish(emotion)?.emoji ?? "🎬";
+}
+
 function showSnack(text, color = "success") {
   snackbar.value = { show: true, text, color };
 }
@@ -320,7 +395,7 @@ async function confirmClearHistory() {
 }
 
 .chat-container {
-  max-width: 1400px;
+  max-width: 1000px;
   margin: 0 auto;
   padding: 24px 20px 40px;
   position: relative;
@@ -352,4 +427,108 @@ async function confirmClearHistory() {
   pointer-events: none;
   z-index: 0;
 }
+
+/* Recently viewed bar */
+.recent-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  background: var(--vs-panel);
+  border: 1px solid var(--vs-border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.recent-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--vs-muted);
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.recent-chips {
+  display: flex;
+  gap: 6px;
+  overflow: hidden;
+  flex: 1;
+}
+
+.recent-chip {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  background: var(--vs-movie-bg);
+  border: 1px solid var(--vs-border);
+  border-radius: 999px;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  max-width: 200px;
+  overflow: hidden;
+}
+
+.recent-chip-emoji { flex-shrink: 0; font-size: 0.85rem; }
+
+.recent-chip-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--vs-text);
+  font-weight: 500;
+}
+
+.recent-chip-rating {
+  color: #F59E0B;
+  font-weight: 600;
+  font-size: 0.7rem;
+  flex-shrink: 0;
+}
+
+/* Full history dialog */
+.fh-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  margin-bottom: 4px;
+  background: var(--vs-movie-bg);
+  border: 1px solid var(--vs-border);
+}
+
+.fh-emoji { font-size: 1.1rem; line-height: 1.4; flex-shrink: 0; }
+
+.fh-body  { min-width: 0; }
+
+.fh-movie {
+  color: var(--vs-text);
+  font-weight: 600;
+  font-size: 0.88rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fh-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.76rem;
+  color: var(--vs-muted);
+  margin-top: 1px;
+}
+
+.fh-rating { color: #F59E0B; font-weight: 600; }
+
+.fh-empty {
+  text-align: center;
+  padding: 30px 0;
+  font-size: 0.85rem;
+  color: var(--vs-muted);
+}
 </style>

requirements.txt

@@ -1,7 +1,8 @@
 # Backend (API)
-Flask==3.0.2 
+Flask==3.0.2
 flask-cors==4.0.0
 requests==2.31.0
+python-dotenv==1.0.0
 
 # Procesar lenguaje natural y modelos de lenguaje
 transformers==4.35.2