Update

firebase.json

@@ -7,6 +7,10 @@
       "**/node_modules/**"
     ],
     "rewrites": [
+      {
+        "source": "/webpushr-sw.js",
+        "destination": "/webpushr-sw.js"
+      },
       {
         "source": "**",
         "destination": "/index.html"

package.json

@@ -9,7 +9,8 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "lint": "ng lint"
+    "lint": "ng lint",
+    "postbuild": "copy .\\webpushr-sw.js .\\www\\ "
   },
   "private": true,
   "dependencies": {

src/app/app.component.ts

@@ -61,6 +61,11 @@ export class AppComponent implements OnInit {
       url:'/load-test-chooser',
       icon:'barbell'
     },
+    {
+      title:'Incident Manager',
+      url:'/incident-manager-chooser',
+      icon:'alert-circle'
+    },
     {
       title: 'My Team',
       url: '/myteam',

src/app/pages/incident_manager/incident-manager-chooser/incident-manager-chooser-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IncidentManagerChooserPage } from './incident-manager-chooser.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: IncidentManagerChooserPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class IncidentManagerChooserPageRoutingModule {}

src/app/pages/incident_manager/incident-manager-chooser/incident-manager-chooser.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { IncidentManagerChooserPageRoutingModule } from './incident-manager-chooser-routing.module';
+
+import { IncidentManagerChooserPage } from './incident-manager-chooser.page';
+import {ComponentsModule} from "../../../components/components.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        IonicModule,
+        IncidentManagerChooserPageRoutingModule,
+        ComponentsModule
+    ],
+  declarations: [IncidentManagerChooserPage]
+})
+export class IncidentManagerChooserPageModule {}

src/app/pages/incident_manager/incident-manager-chooser/incident-manager-chooser.page.html

@@ -0,0 +1,8 @@
+<script src="../../settings/settings.page.ts"></script>
+<app-header [title]="'Incident Manager Chooser'"></app-header>
+
+<ion-content [fullscreen]="true">
+  <ion-grid>
+    <app-title [title]="'Incident Manager Chooser'"></app-title>
+  </ion-grid>
+</ion-content>

src/app/pages/incident_manager/incident-manager-chooser/incident-manager-chooser.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IncidentManagerChooserPage } from './incident-manager-chooser.page';
+
+describe('IncidentManagerChooserPage', () => {
+  let component: IncidentManagerChooserPage;
+  let fixture: ComponentFixture<IncidentManagerChooserPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IncidentManagerChooserPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/incident_manager/incident-manager-chooser/incident-manager-chooser.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-incident-manager-chooser',
+  templateUrl: './incident-manager-chooser.page.html',
+  styleUrls: ['./incident-manager-chooser.page.scss'],
+})
+export class IncidentManagerChooserPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/load_test/load-test-history/load-test-history.module.ts

@@ -9,6 +9,7 @@ import { LoadTestHistoryPageRoutingModule } from './load-test-history-routing.mo
 import { LoadTestHistoryPage } from './load-test-history.page';
 import {ComponentsModule} from "../../../components/components.module";
 import {NgxEchartsDirective} from "ngx-echarts";
+import {MarkdownComponent} from "ngx-markdown";
 
 @NgModule({
     imports: [
@@ -17,7 +18,8 @@ import {NgxEchartsDirective} from "ngx-echarts";
         IonicModule,
         LoadTestHistoryPageRoutingModule,
         ComponentsModule,
-        NgxEchartsDirective
+        NgxEchartsDirective,
+        MarkdownComponent
     ],
   declarations: [LoadTestHistoryPage]
 })

src/app/pages/load_test/load-test-history/load-test-history.page.html

@@ -17,6 +17,12 @@ <h1 class="text-2xl text-white">{{ totalNumberOfRequests | number:'1.0-0' }}</h1
 
 
     <ion-row class="lg:m-10 md:m-10">
+      <ion-col size="12" class="relative flex flex-row justify-center">
+        <div class="absolute z-10 w-full flex flex-row justify-end " >
+          <ion-avatar class="h-12 w-12 bg-purple-400 p-2" (click)="toggleAiModal('httpCodesOptions')">
+            <ion-icon class="w-full h-full" name="color-wand-outline"></ion-icon>
+          </ion-avatar>
+        </div>
       <ion-card class="w-full  p-6 flex flex-col justify-center items-center">
         <ion-card-header>
           <ion-card-title class="text-3xl">HTTP Status Codes</ion-card-title>
@@ -25,9 +31,18 @@ <h1 class="text-2xl text-white">{{ totalNumberOfRequests | number:'1.0-0' }}</h1
           <div id="httpCodesChartHistory" echarts [options]="statusCodesOptions" class="demo-chart h-full w-full"></div>
         </ion-card-content>
       </ion-card>
+      </ion-col>
     </ion-row>
 
+
+
     <ion-row class="lg:m-10 md:m-10">
+      <ion-col size="12" class="relative flex flex-row justify-center">
+        <div class="absolute z-10 w-full flex flex-row justify-end " >
+          <ion-avatar class="h-12 w-12 bg-purple-400 p-2" (click)="toggleAiModal('httpResponseTimeOptions')">
+            <ion-icon class="w-full h-full" name="color-wand-outline"></ion-icon>
+          </ion-avatar>
+        </div>
       <ion-card class="w-full  p-6 flex flex-col justify-center items-center">
         <ion-card-header>
           <ion-card-title class="text-3xl">HTTP Response Time</ion-card-title>
@@ -36,9 +51,62 @@ <h1 class="text-2xl text-white">{{ totalNumberOfRequests | number:'1.0-0' }}</h1
           <div id="httpResponseTimeChartHistory" echarts [options]="responseTimeOptions" class="demo-chart h-full w-full"></div>
         </ion-card-content>
       </ion-card>
+      </ion-col>
     </ion-row>
 
 
 
   </ion-grid>
+
+
+  @if(hasBeenOpened){
+    <ion-fab class="m-2 z-10" vertical="bottom" horizontal="end" slot="fixed"  (click)="toggleAiModal()">
+      <ion-avatar class="bg-purple-300 p-1 lg:p-4 md:p-4">
+        <ion-icon class="w-full h-full" name="chatbubble-outline"></ion-icon>
+      </ion-avatar>
+    </ion-fab>
+  }
+
 </ion-content>
+
+
+<div class="fixed bottom-0 right-0 h-full w-full bg-black bg-opacity-60 z-10 r" id="ai-modal" [class.hidden]="!aiModal">
+  <div class="h-full md:h-3/4 lg:h-3/4 w-full  bg-gray-900 p-4 absolute right-0 bottom-0 z-50 flex flex-col rounded-tl-2xl rounded-tr-2xl">
+
+    <div  class="w-full bg-gray-500 flex flex-row justify-center items-center p-2 mb-2 rounded-3xl" >
+      <div class="flex flex-row p-2 items-center bg-gray-800 w-full  rounded-3xl h-full">
+        <h1 class="text-white">DevProbe AI</h1>
+      </div>
+      <div class="m-2"></div>
+      <div class="flex flex-row justify-center items-center bg-gray-800 hover:bg-gray-600 w-1/6 h-full  rounded-3xl" (click)="toggleAiModal()">
+        <ion-icon name="close-outline"></ion-icon>
+      </div>
+    </div>
+
+    <!-- El contenedor de mensajes con scroll -->
+    <div class="flex-grow overflow-y-auto bg-gray-400 p-2 rounded-3xl" #messagesContainer>
+      <div *ngFor="let msg of messages" class="flex flex-col">
+        <!-- Mensajes de usuario -->
+        <div *ngIf="msg.from === 'User'" class="rounded-3xl bg-gray-800 w-2/3 m-1 ml-auto p-2">
+          <markdown class="text-white p-4 m-2">{{ msg.message }}</markdown>
+        </div>
+
+        <!-- Mensajes de AI -->
+        <div *ngIf="msg.from === 'AI'" class="rounded-3xl bg-gray-500 w-2/3 m-1 p-2 pr-2">
+          <markdown id="mk-{{msg.id}}"  class="text-white p-4 m-2">{{ msg.message }}</markdown>
+        </div>
+      </div>
+    </div>
+
+    <!-- Input y botón en la parte inferior -->
+    <div class="flex flex-row mt-2 p-2">
+      <ion-textarea  placeholder="Ask..." class="flex-grow bg-gray-700 rounded-2xl"  [(ngModel)]="message"></ion-textarea>
+      <div class="m-1"></div>
+      <div class="w-1/3 bg-gray-500 rounded-3xl flex flex-row justify-center items-center hover:bg-gray-300" (click)="sendMessage()">
+        <span class="text-white">Send</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+