Update frontend/src/App.tsx

frontend/src/App.tsx

@@ -4,7 +4,7 @@ import { AppStep } from './types';
 import { IconFileUp, IconSend, IconBot, IconGear, IconSparkles, IconArrowRight, IconLayers, IconDatabase, IconWorkflow, IconGlobe } from './components/Icons';
 import ReactMarkdown from 'react-markdown';
 
-// COSTANTE BACKEND: Lasciata vuota perché frontend e backend sono nello stesso container su HF
+// COSTANTE BACKEND: Vuota perché il frontend è servito dallo stesso server su HF
 const BACKEND_URL = '';
 
 const App: React.FC = () => {
@@ -157,20 +157,14 @@ const App: React.FC = () => {
       
       {/* Header */}
       <header className={`glass-header fixed top-0 w-full z-50 py-3 md:py-4 px-4 md:px-12 flex justify-between items-center transition-opacity ${step === AppStep.CHAT || step === AppStep.HOW_IT_WORKS ? 'opacity-30 hover:opacity-100' : 'opacity-100'}`}>
-        <div 
-          onClick={handleHomeClick}
-          className="flex items-center gap-2 cursor-pointer group"
-        >
+        <div onClick={handleHomeClick} className="flex items-center gap-2 cursor-pointer group">
           <div className="bg-[#FF6600] text-white p-1.5 md:p-2 rounded-lg group-hover:scale-105 transition-transform flex items-center justify-center">
             <IconBot className="w-6 h-6 md:w-8 h-8" />
           </div>
           <span className="text-xl md:text-2xl font-extrabold tracking-tighter transition-colors group-hover:text-[#FF6600]">RAG Chatbot</span>
         </div>
         <div>
-          <button 
-            onClick={handleHowItWorksClick}
-            className="group bg-[#FF6600] text-white w-10 h-10 md:w-auto md:px-4 md:py-2 rounded-lg font-bold text-sm hover:bg-black transition-all active:scale-95 shadow-lg shadow-[#FF6600]/20 flex items-center justify-center"
-          >
+          <button onClick={handleHowItWorksClick} className="group bg-[#FF6600] text-white w-10 h-10 md:w-auto md:px-4 md:py-2 rounded-lg font-bold text-sm hover:bg-black transition-all active:scale-95 shadow-lg shadow-[#FF6600]/20 flex items-center justify-center">
             <span className="md:hidden text-black font-black text-lg group-hover:text-white transition-colors">?</span>
             <span className="hidden md:inline">Come funziona</span>
           </button>
@@ -182,7 +176,7 @@ const App: React.FC = () => {
         
         <div className={`w-full ${(step === AppStep.CHAT || step === AppStep.HOW_IT_WORKS) ? 'h-full flex flex-col' : 'max-w-4xl'}`}>
           
-          {/* INITIAL STEPS (NAME & UPLOAD) */}
+          {/* INITIAL STEPS */}
           {(step === AppStep.NAME_INPUT || step === AppStep.PDF_UPLOAD) && (
             <div className="text-center mb-10 md:mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700 px-6">
               <h1 className="text-4xl md:text-6xl font-black mb-4 leading-tight">
@@ -195,10 +189,10 @@ const App: React.FC = () => {
 
               <div className="flex flex-row items-center justify-center gap-2 md:gap-8 mb-12">
                 <div className="flex flex-col items-center gap-3 w-20 md:w-32 group cursor-default">
-                  <div className={`w-12 h-12 md:w-16 md:h-16 rounded-full border-2 flex items-center justify-center transition-all bg-gray-50 border-gray-100 text-gray-400 group-hover:text-[#FF6600] group-hover:border-[#FF6600]/30 group-hover:bg-[#FF6600]/5`}>
+                  <div className="w-12 h-12 md:w-16 md:h-16 rounded-full border-2 flex items-center justify-center transition-all bg-gray-50 border-gray-100 text-gray-400 group-hover:text-[#FF6600] group-hover:border-[#FF6600]/30 group-hover:bg-[#FF6600]/5">
                     <IconFileUp className="w-5 h-5 md:w-7 md:h-7" />
                   </div>
-                  <p className={`text-[8px] md:text-[10px] font-bold tracking-widest uppercase transition-colors text-gray-400 group-hover:text-[#FF6600]`}>1. Upload</p>
+                  <p className="text-[8px] md:text-[10px] font-bold tracking-widest uppercase text-gray-400 group-hover:text-[#FF6600]">1. Upload</p>
                 </div>
                 <div><IconArrowRight className="text-gray-200 w-3 h-3 md:w-5 md:h-5 animate-pulse" /></div>
                 <div className="flex flex-col items-center gap-3 w-20 md:w-32 group cursor-default">
@@ -223,18 +217,11 @@ const App: React.FC = () => {
 
           {step === AppStep.NAME_INPUT && (
             <div className="flex justify-center py-2 animate-in fade-in slide-in-from-top-4 duration-500 px-6">
-              <div className="bg-white border border-black/5 p-8 md:p-10 rounded-[2.5rem] shadow-2xl max-w-md w-full orange-glow transition-all">
+              <div className="bg-white border border-black/5 p-8 md:p-10 rounded-[2.5rem] shadow-2xl max-w-md w-full orange-glow">
                 <form onSubmit={handleNameSubmit} className="flex flex-col gap-6 md:gap-8">
                   <div>
                     <label className="block text-xs font-bold uppercase tracking-[0.2em] text-gray-400 mb-4 ml-2">Inserisci il tuo nome o User ID</label>
-                    <input 
-                      type="text" 
-                      value={userData.name}
-                      onChange={(e) => setUserData({...userData, name: e.target.value})}
-                      placeholder="Es: Laura"
-                      className="w-full bg-gray-50 border-2 border-transparent focus:border-[#FF6600]/30 focus:bg-white outline-none px-6 md:px-8 py-4 md:py-5 rounded-[1.5rem] text-lg md:text-xl font-semibold text-black placeholder:text-gray-300 transition-all shadow-sm"
-                      autoFocus
-                    />
+                    <input type="text" value={userData.name} onChange={(e) => setUserData({...userData, name: e.target.value})} placeholder="Es: Laura" className="w-full bg-gray-50 border-2 border-transparent focus:border-[#FF6600]/30 focus:bg-white outline-none px-6 md:px-8 py-4 md:py-5 rounded-[1.5rem] text-lg md:text-xl font-semibold text-black shadow-sm" autoFocus />
                   </div>
                   <button type="submit" disabled={!userData.name.trim()} className="bg-[#FF6600] text-white font-bold py-4 md:py-5 rounded-[1.5rem] hover:bg-black shadow-lg shadow-[#FF6600]/20 transition-all transform active:scale-95 disabled:opacity-30">Continua</button>
                 </form>
@@ -245,7 +232,7 @@ const App: React.FC = () => {
           {step === AppStep.PDF_UPLOAD && (
             <div className="flex flex-col items-center py-2 animate-in fade-in slide-in-from-bottom-8 duration-700 px-6">
               <div className="text-center mb-8">
-                <h3 className="text-2xl md:text-3xl font-black text-black mb-2 tracking-tighter uppercase font-outfit">Ciao <span className="text-[#FF6600]">{userData.name}</span></h3>
+                <h3 className="text-2xl md:text-3xl font-black text-black mb-2 tracking-tighter uppercase">Ciao <span className="text-[#FF6600]">{userData.name}</span></h3>
                 <p className="text-gray-400 font-medium">Siamo pronti ad analizzare il tuo file.</p>
               </div>
               <div className="bg-white border-2 border-dashed border-gray-200 p-8 md:p-12 rounded-[3rem] max-w-2xl w-full flex flex-col items-center justify-center gap-6 hover:border-[#FF6600] group transition-all cursor-pointer relative shadow-sm">
@@ -295,41 +282,28 @@ const App: React.FC = () => {
                            <div className="flex flex-col gap-1 pt-1">
                             <h2 className="text-xl font-normal text-gray-500 font-verdana leading-tight">
                               <span className="text-[#FF6600] font-medium">{userData.name}</span>, il file{" "}
-                              <span className="text-black font-medium hover:text-[#FF6600] cursor-pointer transition-colors" title={userData.fileName}>
+                              <span className="text-black font-medium hover:text-[#FF6600] cursor-pointer" title={userData.fileName}>
                                 "{truncateFileName(userData.fileName || '', 40)}" 
-                              </span>{" "}
-                              è pronto.
+                              </span> è pronto.
                             </h2>
-                            <p className="text-sm font-light text-gray-400">
-                              Chiedimi qualunque cosa!
-                            </p>
+                            <p className="text-sm font-light text-gray-400">Chiedimi qualunque cosa!</p>
                           </div>
                         </div>
                       </div>
                     );
                   }
-
                   const isUser = msg.role === 'user';
                   return (
-                    <div 
-                      key={idx} 
-                      className={`flex ${isUser ? 'justify-end' : 'justify-start'} animate-in fade-in duration-300`}
-                    >
+                    <div key={idx} className={`flex ${isUser ? 'justify-end' : 'justify-start'} animate-in fade-in duration-300`}>
                       <div className={`flex gap-4 max-w-[85%] ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
                         {!isUser && (
                           <div className="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center flex-shrink-0 mt-1">
                             <IconBot className="w-7 h-7" />
                           </div>
                         )}
-                        <div className={`p-4 ${
-                          isUser 
-                          ? 'bg-gray-100 text-gray-800 rounded-2xl rounded-tr-none' 
-                          : 'text-gray-700 leading-relaxed text-[15px] markdown-container'
-                        }`}>
+                        <div className={`p-4 ${isUser ? 'bg-gray-100 text-gray-800 rounded-2xl rounded-tr-none' : 'text-gray-700 markdown-container'}`}>
                           <div className="font-verdana">
-                            <ReactMarkdown>
-                              {msg.content}
-                            </ReactMarkdown>
+                            <ReactMarkdown>{msg.content}</ReactMarkdown>
                           </div>
                           <p className="text-[9px] mt-2 opacity-30 font-bold tracking-tighter">
                             {msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
@@ -358,54 +332,30 @@ const App: React.FC = () => {
 
               <div className="px-6 pb-10 pt-4 bg-white">
                 <form onSubmit={handleSendMessage} className="relative max-w-2xl mx-auto">
-                  <div className="relative flex items-center bg-gray-50 border border-gray-100 rounded-[2.5rem] p-2 focus-within:bg-white focus-within:ring-2 focus-within:ring-[#FF6600]/10 transition-all shadow-sm">
+                  <div className="relative flex items-center bg-gray-50 border border-gray-100 rounded-[2.5rem] p-2 focus-within:bg-white focus-within:ring-2 focus-within:ring-[#FF6600]/10 shadow-sm">
                     <div className="relative flex-shrink-0">
-                      <button 
-                        type="button" 
-                        onClick={() => setShowPlusMenu(!showPlusMenu)}
-                        className={`w-12 h-12 flex items-center justify-center rounded-full transition-all ${showPlusMenu ? 'bg-black text-white' : 'bg-[#FF6600] text-white hover:bg-black'}`}
-                      >
+                      <button type="button" onClick={() => setShowPlusMenu(!showPlusMenu)} className={`w-12 h-12 flex items-center justify-center rounded-full transition-all ${showPlusMenu ? 'bg-black text-white' : 'bg-[#FF6600] text-white hover:bg-black'}`}>
                         <span className={`text-2xl transition-transform font-light ${showPlusMenu ? 'rotate-45' : ''}`}>+</span>
                       </button>
                       {showPlusMenu && (
-                        <div className="absolute bottom-full left-0 mb-4 bg-white border border-gray-100 rounded-2xl shadow-xl p-2 min-w-[150px] animate-in fade-in slide-in-from-bottom-2">
-                          <button 
-                            onClick={() => {
-                              setStep(AppStep.PDF_UPLOAD);
-                              setShowPlusMenu(false);
-                            }}
-                            className="w-full text-left px-4 py-3 text-sm font-semibold hover:bg-gray-50 rounded-xl transition-colors flex items-center gap-3 text-gray-700"
-                          >
-                            <IconFileUp className="w-4 h-4 text-[#FF6600]" />
-                            Cambia PDF
+                        <div className="absolute bottom-full left-0 mb-4 bg-white border border-gray-100 rounded-2xl shadow-xl p-2 min-w-[150px] animate-in fade-in">
+                          <button onClick={() => { setStep(AppStep.PDF_UPLOAD); setShowPlusMenu(false); }} className="w-full text-left px-4 py-3 text-sm font-semibold hover:bg-gray-50 rounded-xl flex items-center gap-3 text-gray-700">
+                            <IconFileUp className="w-4 h-4 text-[#FF6600]" /> Cambia PDF
                           </button>
                         </div>
                       )}
                     </div>
-                    <input 
-                      type="text" 
-                      value={inputValue}
-                      onChange={(e) => setInputValue(e.target.value)}
-                      placeholder="Scrivi un messaggio..."
-                      className="flex-grow bg-transparent border-none outline-none px-4 md:px-6 py-4 text-[14px] md:text-[15px] text-gray-800 placeholder:text-gray-300 font-verdana"
-                    />
-                    <button 
-                      type="submit"
-                      disabled={!inputValue.trim() || isTyping}
-                      className="text-[#FF6600] w-10 h-10 md:w-12 md:h-12 flex items-center justify-center flex-shrink-0 rounded-full hover:bg-[#FF6600]/10 disabled:opacity-10 transition-all"
-                    >
+                    <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} placeholder="Scrivi un messaggio..." className="flex-grow bg-transparent border-none outline-none px-4 md:px-6 py-4 text-[14px] text-gray-800 font-verdana" />
+                    <button type="submit" disabled={!inputValue.trim() || isTyping} className="text-[#FF6600] w-10 h-10 md:w-12 md:h-12 flex items-center justify-center flex-shrink-0 rounded-full hover:bg-[#FF6600]/10 disabled:opacity-10">
                       <IconSend className="w-5 h-5 md:w-6 md:h-6" />
                     </button>
                   </div>
-                  <p className="text-[6px] text-center text-gray-300 mt-4 tracking-[0.2em] uppercase font-bold px-4">
-                    Qualsiasi sistema, per quanto sofisticato sia, può commettere errori e non può sostituirsi ad un attenta lettura del documento
-                  </p>
                 </form>
               </div>
             </div>
           )}
 
-          {/* HOW IT WORKS STEP - AGGIORNATA */}
+          {/* HOW IT WORKS STEP - AGGIORNATA CON LE TUE SPIEGAZIONI */}
           {step === AppStep.HOW_IT_WORKS && (
             <div className="flex-grow overflow-y-auto px-6 py-10 chat-scroll animate-in fade-in duration-700">
               <div className="max-w-4xl mx-auto space-y-12 pb-20">
@@ -415,52 +365,57 @@ const App: React.FC = () => {
                 </div>
 
                 <div className="grid md:grid-cols-2 gap-8">
+                  {/* Step 1 */}
                   <div className="bg-white border border-gray-100 p-8 rounded-3xl shadow-sm hover:orange-glow transition-all">
                     <div className="bg-[#FF6600] text-white w-12 h-12 rounded-xl flex items-center justify-center mb-6">
                       <IconFileUp className="w-6 h-6" />
                     </div>
                     <h3 className="text-xl font-bold mb-3">Ingestion & Struttura</h3>
                     <p className="text-gray-600 font-light text-sm leading-relaxed">
-                      Il PDF viene processato per estrarre la <strong>gerarchia logica</strong>. Ricostruiamo tabelle e sezioni, garantendo che l'informazione non perda mai il suo contesto originale durante la scomposizione.
+                      Il PDF non viene solo "letto", ma processato per estrarre la <strong>gerarchia logica</strong>. Utilizziamo librerie specializzate per ricostruire tabelle, titoli e sezioni, garantendo che l'informazione non perda mai il suo contesto originale durante la scomposizione.
                     </p>
                   </div>
 
+                  {/* Step 2 */}
                   <div className="bg-white border border-gray-100 p-8 rounded-3xl shadow-sm hover:orange-glow transition-all">
                     <div className="bg-black text-white w-12 h-12 rounded-xl flex items-center justify-center mb-6">
                       <IconLayers className="w-6 h-6" />
                     </div>
-                    <h3 className="text-xl font-bold mb-3">Chunking Ricorsivo</h3>
+                    <h3 className="text-xl font-bold mb-3">Chunking</h3>
                     <p className="text-gray-600 font-light text-sm leading-relaxed">
-                      Il testo viene diviso in frammenti ottimizzati per gli embedding, mantenendo sovrapposizioni intelligenti per non interrompere la coerenza semantica tra i nodi del database.
+                      Applichiamo una strategia di <strong>chunking ricorsivo</strong>. Il testo viene diviso in frammenti ottimizzati per gli embedding, mantenendo sovrapposizioni intelligenti tra i paragrafi per non interrompere la coerenza semantica tra i nodi del database.
                     </p>
                   </div>
 
+                  {/* Step 3 */}
                   <div className="bg-white border border-gray-100 p-8 rounded-3xl shadow-sm hover:orange-glow transition-all">
                     <div className="bg-black text-white w-12 h-12 rounded-xl flex items-center justify-center mb-6">
                       <IconDatabase className="w-6 h-6" />
                     </div>
                     <h3 className="text-xl font-bold mb-3">Knowledge Graph (Neo4j)</h3>
                     <p className="text-gray-600 font-light text-sm leading-relaxed">
-                      I frammenti diventano nodi in <strong>Neo4j</strong> collegati per relazione logica e semantica, permettendo una navigazione dei dati multimodale a grafo.
+                      I chunk e le entità vengono mappati in <strong>Neo4j</strong>. Ogni frammento diventa un nodo collegato non solo vettorialmente, ma anche per relazione logica (es. "appartiene alla sezione X"). Questo permette una navigazione dei dati multimodale: semantica e a grafo.
                     </p>
                   </div>
 
+                  {/* Step 4 */}
                   <div className="bg-white border border-gray-100 p-8 rounded-3xl shadow-sm hover:orange-glow transition-all">
                     <div className="bg-black text-white w-12 h-12 rounded-xl flex items-center justify-center mb-6">
                       <IconWorkflow className="w-6 h-6" />
                     </div>
-                    <h3 className="text-xl font-bold mb-3">LangGraph Orchestration</h3>
+                    <h3 className="text-xl font-bold mb-3">LangGraph</h3>
                     <p className="text-gray-500 font-light text-sm leading-relaxed">
-                      L'intero flusso è gestito da un sistema a stati finiti che coordina i nodi di analisi, recupero e validazione per percorsi logici rigorosi.
+                      L'intero flusso è gestito da <strong>LangGraph</strong>. Un sistema a stati finiti che coordina i nodi di analisi, recupero e validazione. Questo garantisce che ogni query segua un percorso logico rigoroso prima di produrre un output.
                     </p>
                   </div>
                 </div>
 
+                {/* Sezione Strategia Ibrida */}
                 <div className="bg-gray-50 border border-gray-100 p-10 rounded-[3rem] shadow-inner">
                   <div className="text-center mb-10">
                     <h3 className="text-2xl font-black mb-2 font-outfit">Recupero <span className="text-[#FF6600]">Ibrido & Intelligente</span></h3>
                     <p className="text-gray-500 text-sm font-light max-w-2xl mx-auto">
-                      L'LLM agisce come Orchestratore Decisionale per determinare la rotta di recupero ottimale.
+                      l'LLM agisce esclusivamente come Orchestratore Decisionale: analizza l'intento della domanda per determinare la rotta di recupero ottimale. Non 'pesca' i dati dalla sua memoria, non 'inventa' nulla. Piuttosto, sceglie se azionare il motore di Ricerca Vettoriale o se comporre una Query per interrogare direttamente il DB.
                     </p>
                   </div>
 
@@ -469,19 +424,20 @@ const App: React.FC = () => {
                       <div className="bg-white p-6 rounded-2xl shadow-sm border border-black/5">
                         <div className="flex items-center gap-3 mb-3">
                           <div className="bg-[#FF6600]/10 px-2 py-1 rounded md font-bold text-[#FF6600] text-[10px] uppercase">Routing</div>
-                          <h4 className="font-bold text-sm">Mistral Strategic Router</h4>
+                          <h4 className="font-bold text-sm">Mistral come Router Strategico</h4>
                         </div>
                         <p className="text-xs text-gray-600 leading-relaxed font-light">
-                          Utilizziamo Mistral per decidere la via di recupero: se la domanda contiene entità specifiche, formula una <strong>Query Cypher</strong> diretta.
+                          Utilizziamo <strong>Mistral</strong> per decidere la via di recupero. Se la domanda contiene entità specifiche già mappate nel DB, Mistral formula una <strong>Query Cypher</strong> basata sulle NE estratte, ottenendo dati certi in millisecondi direttamente dal database a grafo. Altrimenti, si prioritizza una strategia di recupero vettoriale, o ibrida.
                         </p>
                       </div>
+                      
                       <div className="bg-white p-6 rounded-2xl shadow-sm border border-black/5">
                         <div className="flex items-center gap-3 mb-3">
                           <div className="bg-black/5 px-2 py-1 rounded md font-bold text-gray-500 text-[10px] uppercase">Vector</div>
                           <h4 className="font-bold text-sm">Ricerca Vettoriale</h4>
                         </div>
                         <p className="text-xs text-gray-600 leading-relaxed font-light">
-                          Attivata per quesiti concettuali o descrittivi per identificare i frammenti semanticamente più vicini alla query.
+                          Il sistema attiva una ricerca vettoriale quando il router identifica quesiti di natura concettuale o descrittiva. Utilizziamo il modello <strong>multilingual-e5-large</strong> (1024 dim), permettendo di individuare correlazioni semantiche profonde tra la domanda e il documento.
                         </p>
                       </div>
                     </div>
@@ -490,19 +446,20 @@ const App: React.FC = () => {
                       <div className="bg-white p-6 rounded-2xl shadow-sm border border-black/5">
                         <div className="flex items-center gap-3 mb-3">
                           <div className="bg-[#FF6600]/10 px-2 py-1 rounded md font-bold text-[#FF6600] text-[10px] uppercase">Entities</div>
-                          <h4 className="font-bold text-sm">GLiNER Extraction</h4>
+                          <h4 className="font-bold text-sm">Named Entity Extraction (GLiNER)</h4>
                         </div>
                         <p className="text-xs text-gray-600 leading-relaxed font-light">
-                          Identifichiamo entità chiave (nomi, luoghi, termini tecnici) per mappare accuratamente la query sul grafo di conoscenza.
+                          Sfruttiamo <strong>GLiNER</strong> per identificare entità chiave (nomi, luoghi, termini tecnici). Queste entità permettono a Mistral di generare istantaneamente Query Cypher mirate, garantendo un recupero dati deterministico direttamente dal database a grafo Neo4j.
                         </p>
                       </div>
+
                       <div className="bg-white p-6 rounded-2xl shadow-sm border border-black/5">
                         <div className="flex items-center gap-3 mb-3">
                           <div className="bg-black/5 px-2 py-1 rounded md font-bold text-gray-500 text-[10px] uppercase">Rerank</div>
-                          <h4 className="font-bold text-sm">BGE-Reranker-v2-m3</h4>
+                          <h4 className="font-bold text-sm">Reranking-v2-m3</h4>
                         </div>
                         <p className="text-xs text-gray-600 leading-relaxed font-light">
-                          I risultati grezzi vengono filtrati da un <strong>Cross-Encoder</strong> per garantire che solo il contesto più pertinente arrivi alla sintesi.
+                          I risultati grezzi del database vengono filtrati da un <strong>Cross-Encoder (BGE-Reranker-v2-m3)</strong>. Questo modello ri-analizza la pertinenza di ogni chunk rispetto alla domanda originale, scartando il "rumore" e passando solo il contesto più pertinente.
                         </p>
                       </div>
                     </div>
@@ -516,7 +473,7 @@ const App: React.FC = () => {
                     </div>
                     <h3 className="text-2xl font-black mb-3 font-outfit">Ricerca Globale</h3>
                     <p className="text-gray-600 font-light text-sm leading-relaxed">
-                      Se lo score di pertinenza locale è basso, il sistema attiva automaticamente una ricerca globale sull'intera base di conoscenza del documento.
+                      Se la ricerca vettoriale sul documento attivo produce uno score di pertinenza basso (inferiore a 0.7), il sistema attiva automaticamente una <strong>Ricerca globale</strong>. Questa scansione estende l'analisi a tutti i documenti precedentemente indicizzati nel database Neo4j per verificare se l'informazione necessaria è presente in altri PDF.
                     </p>
                   </div>
                 </div>
@@ -527,15 +484,12 @@ const App: React.FC = () => {
                   </div>
                   <h3 className="text-2xl font-black font-outfit">Sintesi Finale</h3>
                   <p className="text-gray-600 font-light leading-relaxed">
-                    L'LLM finale agisce esclusivamente da sintetizzatore, producendo una risposta ancorata a fonti certe e validate dal processo di recupero.
+                    L'LLM finale non genera testo libero ma agisce esclusivamente da sintetizzatore: riceve i dati filtrati dal Reranker e produce una risposta che è una diretta conseguenza dei documenti. Ogni affermazione è ancorata a una fonte certa, riducendo drasticamente il rischio di allucinazioni.
                   </p>
                 </div>
 
                 <div className="flex justify-center pt-10">
-                  <button 
-                    onClick={returnFromHowItWorks}
-                    className="bg-black text-white px-12 py-5 rounded-2xl font-bold hover:bg-[#FF6600] transition-all shadow-xl active:scale-95"
-                  >
+                  <button onClick={returnFromHowItWorks} className="bg-black text-white px-12 py-5 rounded-2xl font-bold hover:bg-[#FF6600] transition-all shadow-xl active:scale-95">
                     Torna alla Chat
                   </button>
                 </div>