Renderizado Markdown agregado al chat

Cambios:

 Agregada dependencia react-markdown v9.0.1
 Import de ReactMarkdown en App.jsx
 Mensajes del asistente ahora renderizan Markdown
 Mensajes del usuario siguen en texto plano
 Estilos Tailwind prose para formato limpio
 Soporte para: negrita, cursiva, listas, código, encabezados, etc.
Versión: Frontend 1.0.93 → 1.0.94
This commit is contained in:
2025-12-02 15:23:59 -03:00
parent c374909fa8
commit 7f50bfd8c6
4 changed files with 16 additions and 7 deletions

View File

@@ -1,7 +1,7 @@
{
"name": "checklist-frontend",
"private": true,
"version": "1.0.93",
"version": "1.0.94",
"type": "module",
"scripts": {
"dev": "vite",
@@ -15,7 +15,8 @@
"axios": "^1.6.5",
"react-signature-canvas": "^1.0.6",
"lucide-react": "^0.303.0",
"clsx": "^2.1.0"
"clsx": "^2.1.0",
"react-markdown": "^9.0.1"
},
"devDependencies": {
"@types/react": "^18.2.48",

View File

@@ -1,6 +1,6 @@
// Service Worker para PWA con detección de actualizaciones
// IMPORTANTE: Actualizar esta versión cada vez que se despliegue una nueva versión
const CACHE_NAME = 'ayutec-v1.0.93';
const CACHE_NAME = 'ayutec-v1.0.94';
const urlsToCache = [
'/',
'/index.html'

View File

@@ -1,6 +1,7 @@
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import { useState, useEffect, useRef } from 'react'
import SignatureCanvas from 'react-signature-canvas'
import ReactMarkdown from 'react-markdown'
import Sidebar from './Sidebar'
import QuestionTypeEditor from './QuestionTypeEditor'
import QuestionAnswerInput from './QuestionAnswerInput'
@@ -5467,9 +5468,16 @@ function AIAssistantChatModal({ question, inspection, allAnswers, messages, setM
: 'bg-white border border-gray-200 text-gray-800'
}`}
>
<div className="text-sm sm:text-base whitespace-pre-wrap break-words">
{msg.content}
</div>
{/* Renderizar contenido con Markdown para mensajes del asistente */}
{msg.role === 'assistant' && !msg.isError ? (
<div className="text-sm sm:text-base prose prose-sm max-w-none prose-headings:text-gray-800 prose-p:text-gray-800 prose-strong:text-gray-900 prose-code:text-gray-800 prose-pre:bg-gray-100 prose-pre:text-gray-800">
<ReactMarkdown>{msg.content}</ReactMarkdown>
</div>
) : (
<div className="text-sm sm:text-base whitespace-pre-wrap break-words">
{msg.content}
</div>
)}
{/* Mostrar archivos adjuntos si existen */}
{msg.files && msg.files.length > 0 && (
<div className="mt-2 space-y-1">

View File

@@ -140,7 +140,7 @@ export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, se
{sidebarOpen && (
<div className="mb-3 px-2 py-1.5 bg-indigo-900/30 rounded-lg border border-indigo-700/30">
<p className="text-xs text-indigo-300 text-center font-medium">
Ayutec v1.0.93
Ayutec v1.0.94
</p>
</div>
)}