Skip to main content

​
Overview

GIMA’s AI Diagnostics feature provides intelligent support for equipment troubleshooting and asset management queries. Accessible at /asistencia, this dual-mode interface combines conversational AI chat with specialized diagnostic capabilities powered by GIMA-AI.

Conversational Chat

Ask questions about equipment status, procedures, and maintenance requirements

Intelligent Diagnostics

Describe problems in natural language and receive AI-powered failure analysis

24/7 Availability

Get instant answers without waiting for human support staff

Learning System

AI improves over time by learning from equipment history and maintenance patterns

​
Accessing AI Assistance

1

Navigate to AI Assistance

Access the feature from the Reports page:
<Link href="/asistencia">
  <button className="bg-gima-navy text-white px-8 py-2.5 rounded-full text-sm font-bold hover:bg-slate-800 transition shadow-lg shadow-gima-navy/20 flex items-center gap-2 transform hover:scale-105 active:scale-95">
    Asistencia IA
  </button>
</Link>
2

Choose Your Mode

Select between two interaction modes:
  • Chat: For general questions and guidance
  • Diagnóstico: For specific equipment failure analysis
3

Interact with GIMA-AI

Type your query or describe the problem in natural language
4

Review Recommendations

Review AI-generated insights and recommended actions

​
Chat Mode

The Chat interface provides a conversational experience with GIMA-AI: 
{activeTab === 'chat' ? (
  <div className="h-full flex flex-col animate-in fade-in slide-in-from-left-4 duration-300">
    <div className="flex-1 bg-slate-50/50 rounded-2xl p-8 mb-4 border border-slate-100 flex flex-col gap-6 overflow-y-auto">
      <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 max-w-3xl w-full">
        <div className="flex items-center gap-3 mb-3 border-b border-slate-50 pb-3">
          <Bot size={20} className="text-gima-navy" />
          <span className="font-bold text-gima-navy text-sm uppercase tracking-wider">GIMA bot</span>
        </div>
        <p className="text-slate-600 text-sm leading-relaxed">
          ¡Hola! Soy GIMA-AI. ¿En qué puedo ayudarte hoy? Puedes preguntarme sobre el estado de equipos o procedimientos de mantenimiento.
        </p>
      </div>
    </div>
    
    <div className="relative mb-1">
      <input 
        type="text" 
        placeholder="Escribe tu consulta..." 
        className="w-full bg-gima-light/50 pl-6 pr-14 py-3 rounded-xl text-slate-700 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-gima-blue/20 transition-all border border-transparent focus:border-gima-blue/10"
      />
      <button className="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-gima-blue text-white rounded-lg hover:bg-blue-600 transition active:scale-95 shadow-md shadow-gima-blue/20">
        <Send size={16} />
      </button>
    </div>
  </div>
)

​
Chat Use Cases

Ask about current asset status:Examples:
  • “¿Cuántos equipos tenemos en mantenimiento?”
  • “¿Cuál es el estado del servidor CAT-001?”
  • “¿Qué activos están disponibles en la categoría COMPUTO?”
Get guidance on maintenance tasks:Examples:
  • “¿Cómo realizo el mantenimiento preventivo de un aire acondicionado?”
  • “¿Cuál es el procedimiento para cambiar aceite del generador?”
  • “¿Con qué frecuencia debo inspeccionar los vehículos?”
Retrieve asset details and history:Examples:
  • “¿Cuándo fue el último mantenimiento del equipo X?”
  • “¿Qué categoría incluye routers y switches?”
  • “¿Cuántos activos tenemos en total?”
Get help generating and understanding reports:Examples:
  • “¿Cómo genero un reporte de mantenimiento mensual?”
  • “¿Qué significa la tendencia de +12% en activos?”
  • “¿Cuál es el presupuesto ejecutado este mes?”
The chat interface uses smooth animations (animate-in fade-in slide-in-from-left-4 duration-300) when switching modes, providing a polished user experience.

​
Diagnostic Mode

The Diagnostic interface specializes in analyzing equipment failures: 
{activeTab === 'diagnostico' ? (
  <div className="h-full flex flex-col items-center justify-center max-w-2xl mx-auto animate-in fade-in zoom-in-95 duration-300">
    <div className="w-16 h-16 bg-red-50 rounded-2xl flex items-center justify-center mb-6 shadow-sm">
      <Wrench className="text-red-400" size={32} />
    </div>
    <h3 className="font-microgramma text-2xl text-black mb-3">Diagnóstico Inteligente</h3>
    <p className="text-slate-500 text-sm mb-8">Describe el problema. Nuestra IA analizará los síntomas.</p>
    
    <textarea 
      className="w-full h-40 bg-[#E8EEEF] rounded-2xl p-6 text-slate-700 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-gima-blue/30 resize-none transition-all text-sm mb-6" 
      placeholder="Ej: el aire acondicionado hace ruido metalico..."
    />
    
    <button className="w-full bg-gima-blue text-white py-4 rounded-xl font-bold text-base hover:bg-blue-600 transition shadow-xl shadow-gima-blue/20 flex items-center justify-center gap-2 active:scale-95 duration-200">
      <Sparkles size={20} /> Analizar Falla
    </button>
  </div>
)

​
Diagnostic Workflow

1

Switch to Diagnostic Tab

Click the “Diagnóstico” tab with the lightning bolt icon:
<button 
  onClick={() => setActiveTab('diagnostico')}
  className={`pb-3 flex items-center gap-2 transition-all border-b-2 ${
    activeTab === 'diagnostico' 
      ? "text-gima-navy font-bold border-gima-navy scale-105" 
      : "text-slate-400 hover:text-slate-600 border-transparent hover:border-slate-200"
  }`}
>
  <Zap size={18} /> Diagnóstico
</button>
2

Describe the Problem

Enter a detailed description of the issue in the textarea:
  • What symptoms are you observing?
  • When did the problem start?
  • Has anything changed recently?
  • What is the asset ID or category?
3

Analyze the Failure

Click the “Analizar Falla” button with the sparkles icon to submit
4

Review AI Recommendations

The AI will analyze the symptoms and provide:
  • Probable causes
  • Recommended troubleshooting steps
  • Suggested maintenance actions
  • Priority level

​
Example Diagnostic Queries

Problem Description:
El aire acondicionado de la sala de servidores hace un ruido 
metálico intermitente y no enfría adecuadamente. El problema 
comenzó hace 2 días.
AI Analysis Might Include:
  • Check fan bearings for wear
  • Inspect compressor mounting
  • Verify refrigerant levels
  • Check air filter condition
  • Priority: High (server room)

​
User Interface Components

​
Tab Navigation

The interface uses a polished tab system with active state indicators: 
<div className="px-10 flex gap-8 border-b border-slate-100 mb-6">
  <button 
    onClick={() => setActiveTab('chat')}
    className={`pb-3 flex items-center gap-2 transition-all border-b-2 ${
      activeTab === 'chat' 
        ? "text-gima-navy font-bold border-gima-navy scale-105" 
        : "text-slate-400 hover:text-slate-600 border-transparent hover:border-slate-200"
    }`}
  >
    <MessageSquare size={18} /> Chat
  </button>
  
  <button 
    onClick={() => setActiveTab('diagnostico')}
    className={`pb-3 flex items-center gap-2 transition-all border-b-2 ${
      activeTab === 'diagnostico' 
        ? "text-gima-navy font-bold border-gima-navy scale-105" 
        : "text-slate-400 hover:text-slate-600 border-transparent hover:border-slate-200"
    }`}
  >
    <Zap size={18} /> Diagnóstico
  </button>
</div>
The active tab scales slightly larger (scale-105) and uses bold font with brand colors for clear visual feedback.

​
Message Bubbles

Chat messages from GIMA-AI feature branded styling: 
<div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 max-w-3xl w-full">
  <div className="flex items-center gap-3 mb-3 border-b border-slate-50 pb-3">
    <Bot size={20} className="text-gima-navy" />
    <span className="font-bold text-gima-navy text-sm uppercase tracking-wider">
      GIMA bot
    </span>
  </div>
  <p className="text-slate-600 text-sm leading-relaxed">
    {/* AI response */}
  </p>
</div>

​
Input Components

Both modes feature carefully designed input areas: Chat Input:
  • Inline send button with icon
  • Focus states with ring and border color changes
  • Shadow effects for depth
Diagnostic Textarea:
  • Large input area (h-40) for detailed descriptions
  • Soft background color (#E8EEEF)
  • No resize handle for consistent layout
  • Prominent submit button with sparkles icon

​
State Management

The component uses React hooks for tab state: 
const [activeTab, setActiveTab] = useState<'chat' | 'diagnostico'>('diagnostico');
The default is ‘diagnostico’, guiding users toward the specialized diagnostic feature first.

​
Best Practices

Be Specific

Provide detailed descriptions including asset IDs, symptoms, and timeframes

Include Context

Mention recent changes, environmental factors, or related events

Follow Recommendations

Implement AI suggestions systematically and document results

Provide Feedback

Help improve the AI by reporting whether recommendations resolved issues
AI diagnostics provide suggestions based on patterns and should not replace professional judgment, especially for safety-critical systems or complex failures.

​
Integration with Reports

The AI Assistance feature is prominently accessible from the Reports page: 
<div className="mx-6 mt-6 mb-8 bg-gima-light rounded-full px-8 py-3 flex items-center justify-between">
  <div className="flex gap-24 text-sm font-medium text-slate-500">
    <button className="hover:text-gima-navy hover:bg-white/50 px-4 py-2 rounded-full transition-all">Historial de Reportes</button>
    <button className="hover:text-gima-navy hover:bg-white/50 px-4 py-2 rounded-full transition-all">Generar Reportes</button>
    <button className="hover:text-gima-navy hover:bg-white/50 px-4 py-2 rounded-full transition-all">Programados</button>
  </div>
  
  <Link href="/asistencia">
    <button className="bg-gima-navy text-white px-8 py-2.5 rounded-full text-sm font-bold hover:bg-slate-800 transition shadow-lg shadow-gima-navy/20 flex items-center gap-2 transform hover:scale-105 active:scale-95">
      Asistencia IA
    </button>
  </Link>
</div>
The strategic placement in the Reports section allows users to get AI help while reviewing asset and maintenance data.

​
Future Enhancements

Potential improvements to the AI Diagnostics feature:
  • Historical Context: AI access to complete asset maintenance history
  • Image Analysis: Upload photos of equipment issues for visual diagnosis
  • Predictive Alerts: Proactive notifications about potential failures
  • Multi-language Support: Diagnostics in multiple languages
  • Voice Input: Describe problems using voice commands
  • Integration with IoT: Real-time sensor data analysis
  • Dashboard - View equipment metrics that inform diagnostics
  • Maintenance - Create maintenance tickets from diagnostic results
  • Reports - Access AI assistance while reviewing reports
  • Asset Management - Look up asset details for diagnostic context

Build docs developers (and LLMs) love

Get started for freeTalk to us