Agregar estilo cuando la respuesta del asistente sea refusal

fix #139

src/routes/planes/$planId/_detalle/iaplan.tsx

@@ -126,16 +126,16 @@ function RouteComponent() {
 
   const conversacionJson = activeChatData?.conversacion_json || []
   const chatMessages = useMemo(() => {
-    const json = activeChatData?.conversacion_json
+    const json = activeChatData?.conversacion_json || []
-    if (!Array.isArray(json)) return []
-
     return json.map((msg: any, index: number) => {
       const isAssistant = msg.user === 'assistant'
 
       return {
-        id: `${activeChatId}-${index}-${msg.timestamp}`, // ID estable
+        id: `${activeChatId}-${index}`,
         role: isAssistant ? 'assistant' : 'user',
         content: isAssistant ? msg.message : msg.prompt,
+        // EXTRAEMOS EL CAMPO REFUSAL
+        isRefusal: isAssistant && msg.refusal === true,
         suggestions:
           isAssistant && msg.recommendations
             ? msg.recommendations.map((rec: any) => ({
@@ -275,7 +275,7 @@ function RouteComponent() {
     // Si no hay campos, enviamos el texto tal cual
     if (fields.length === 0) return userInput
 
-    return `Instrucción del usuario: ${userInput}`
+    return ` ${userInput}`
   }
 
   const handleSend = async (promptOverride?: string) => {
@@ -504,28 +504,41 @@ function RouteComponent() {
               {chatMessages.map((msg) => (
                 <div
                   key={msg.id}
-                  className={`flex max-w-[85%] flex-col ${msg.role === 'user' ? 'ml-auto items-end' : 'items-start'}`}
+                  className={`flex max-w-[85%] flex-col ${
-                >
+                    msg.role === 'user' ? 'ml-auto items-end' : 'items-start'
-                  <div
-                    className={`rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm ${
-                      msg.role === 'user'
-                        ? 'rounded-tr-none bg-teal-600 text-white'
-                        : 'rounded-tl-none border bg-white text-slate-700'
                   }`}
                 >
-                    {/* Contenido de texto normal */}
+                  <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'
+                          }`
+                    }`}
+                  >
+                    {/* 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>
+                    )}
+
                     {msg.content}
 
-                    {/* Si el mensaje tiene sugerencias (ImprovementCard) */}
+                    {/* Renderizado de sugerencias (ImprovementCard) */}
-                    {msg.suggestions && msg.suggestions.length > 0 && (
+                    {!msg.isRefusal &&
+                      msg.suggestions &&
+                      msg.suggestions.length > 0 && (
                         <div className="mt-4">
                           <ImprovementCard
                             suggestions={msg.suggestions}
                             planId={planId}
                             currentDatos={data?.datos}
-                          activeChatId={activeChatId}
+                            conversacionId={activeChatId}
-                          // Puedes pasar una prop nueva si tu ImprovementCard la soporta:
-                          // isReadOnly={msg.suggestions.every(s => s.applied)}
                           />
                         </div>
                       )}