diff --git a/web-app/src/app/app.component.ts b/web-app/src/app/app.component.ts
index 4f75cfae024..d5076ef3054 100644
--- a/web-app/src/app/app.component.ts
+++ b/web-app/src/app/app.component.ts
@@ -1,3 +1,4 @@
+import { HttpClient } from '@angular/common/http';
 import { Component, ElementRef, Inject, OnInit, Renderer2 } from '@angular/core';
 import { NavigationEnd, NavigationError, RouteConfigLoadStart, Router } from '@angular/router';
 import { I18NService } from '@core';
@@ -10,7 +11,10 @@ import { ThemeService } from './service/theme.service';
 
 @Component({
   selector: 'app-root',
-  template: ` <router-outlet></router-outlet> `
+  template: `
+    <router-outlet></router-outlet>
+    <app-chatbot></app-chatbot>
+  `
 })
 export class AppComponent implements OnInit {
   constructor(
diff --git a/web-app/src/app/shared/components/chat-message/chat-message.component.css b/web-app/src/app/shared/components/chat-message/chat-message.component.css
new file mode 100644
index 00000000000..f9ec38ef1ca
--- /dev/null
+++ b/web-app/src/app/shared/components/chat-message/chat-message.component.css
@@ -0,0 +1,46 @@
+.message {
+  margin-bottom: 5px;
+  padding: 5px;
+  border-radius: 4px;
+  background-color: #f1f1f1;
+  max-width: 100%;
+  word-wrap: break-word;
+  display: flex;
+  align-items: center;
+}
+
+.message p {
+  margin: 0;
+  flex-grow: 1;
+}
+
+.copy-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1rem;
+  margin-right: 5px;
+  color: #3f51b5;
+}
+
+.copy-btn:hover {
+  color: #0056b3;
+}
+
+.hint {
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #3f51b5;
+  color: white;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.copy-btn .hint {
+  opacity: 1;
+}
diff --git a/web-app/src/app/shared/components/chat-message/chat-message.component.html b/web-app/src/app/shared/components/chat-message/chat-message.component.html
new file mode 100644
index 00000000000..79dcc93254f
--- /dev/null
+++ b/web-app/src/app/shared/components/chat-message/chat-message.component.html
@@ -0,0 +1,10 @@
+<div class="message" *ngIf="message.sender === 'AI'">
+  <p><strong>{{ message.sender }}:</strong> {{ message.text }}</p>
+  <button class="copy-btn" (click)="copyToClipboard(message.text)">
+    📋
+    <span class="hint" *ngIf="copied">Copied!</span>
+  </button>
+</div>
+<div class="message" *ngIf="message.sender !== 'AI'">
+  <p><strong>{{ message.sender }}:</strong> {{ message.text }}</p>
+</div>
diff --git a/web-app/src/app/shared/components/chat-message/chat-message.component.ts b/web-app/src/app/shared/components/chat-message/chat-message.component.ts
new file mode 100644
index 00000000000..51eaebb4a4f
--- /dev/null
+++ b/web-app/src/app/shared/components/chat-message/chat-message.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-chat-message',
+  templateUrl: './chat-message.component.html',
+  styleUrls: ['./chat-message.component.css'],
+})
+export class ChatMessageComponent {
+  @Input() message!: { sender: string; text: string };
+  copied: boolean = false;
+
+  copyToClipboard(text: string) {
+    navigator.clipboard.writeText(text).then(
+      () => {
+        this.copied = true;
+        setTimeout(() => this.copied = false, 2000); // Reset hint after 2 seconds
+      },
+      (err) => {
+        console.error('Failed to copy text: ', err);
+      }
+    );
+  }
+}
diff --git a/web-app/src/app/shared/components/chatbot/chatbot.component.css b/web-app/src/app/shared/components/chatbot/chatbot.component.css
new file mode 100644
index 00000000000..b77bfa9bbf4
--- /dev/null
+++ b/web-app/src/app/shared/components/chatbot/chatbot.component.css
@@ -0,0 +1,96 @@
+.float {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+
+.float img {
+  width: 3rem;
+  height: 3rem;
+}
+
+.popup {
+  position: fixed;
+  bottom: 5rem;
+  right: 2rem;
+  width: 310px;
+  max-height: 400px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  background-color: white;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.popup-content {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: 100%;
+}
+
+.close-btn {
+  align-self: flex-end;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.chat-window {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.chat-messages {
+  flex-grow: 1;
+  overflow-y: auto; /* Enables vertical scrolling */
+  max-height: 200px; /* Set a maximum height for the chat window */
+  margin-bottom: 10px;
+  width: 100%;
+  padding-right: 5px; /* Optional: Adds some padding for better readability */
+}
+
+.input-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+input[type='text'] {
+  flex-grow: 1;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-right: 5px;
+}
+
+button {
+  border: none;
+  background-color: #3f51b5;
+  color: white;
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 5px;
+  height: 34px;
+}
+
+.reset-btn {
+  background-color: #dc3545;
+  margin-right: 0;
+}
+
+.reset-btn:hover {
+  background-color: #c82333;
+}
diff --git a/web-app/src/app/shared/components/chatbot/chatbot.component.html b/web-app/src/app/shared/components/chatbot/chatbot.component.html
new file mode 100644
index 00000000000..daf50b7a9af
--- /dev/null
+++ b/web-app/src/app/shared/components/chatbot/chatbot.component.html
@@ -0,0 +1,19 @@
+<button class="float" (click)="togglePopup()">
+  <img src="../assets/img/chatbot-icon.svg" alt="Ai Chat" />
+</button>
+<div class="popup" *ngIf="isPopupVisible">
+  <div class="popup-content">
+    <button class="close-btn" (click)="togglePopup()">✖</button>
+    <h3>Chatbot</h3>
+    <div class="chat-window">
+      <div class="chat-messages">
+        <app-chat-message *ngFor="let message of messages" [message]="message"></app-chat-message>
+      </div>
+      <div class="input-container">
+        <input type="text" [(ngModel)]="userInput" (keydown.enter)="sendMessage()" placeholder="Type your message..." />
+        <button (click)="sendMessage()">Send</button>
+        <button class="reset-btn" (click)="resetChat()">Reset</button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/web-app/src/app/shared/components/chatbot/chatbot.component.ts b/web-app/src/app/shared/components/chatbot/chatbot.component.ts
new file mode 100644
index 00000000000..3562193a057
--- /dev/null
+++ b/web-app/src/app/shared/components/chatbot/chatbot.component.ts
@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-chatbot',
+  templateUrl: './chatbot.component.html',
+  styleUrls: ['./chatbot.component.css'],
+})
+export class ChatbotComponent {
+  isPopupVisible = false;
+  userInput = '';
+  messages: { sender: string; text: string }[] = [];
+
+  constructor(private http: HttpClient) { }
+
+  togglePopup() {
+    this.isPopupVisible = !this.isPopupVisible;
+  }
+
+  sendMessage() {
+    if (this.userInput.trim()) {
+      // Add user's message to the chat window
+      this.messages.push({ sender: 'You', text: this.userInput });
+
+      // Send the message to the AI backend
+      this.http.post('/api/ai', { text: this.userInput }).subscribe(
+        (response: any) => {
+          // Add AI's response to the chat window
+          this.messages.push({ sender: 'AI', text: "sample answer" });
+        },
+        (error) => {
+          // Handle error response
+          this.messages.push({ sender: 'AI', text: 'Error communicating with AI' });
+          console.error('Error communicating with AI:', error);
+        }
+      );
+
+      // Clear the input field
+      this.userInput = '';
+    }
+  }
+
+  resetChat() {
+    this.messages = [];
+  }
+}
diff --git a/web-app/src/app/shared/shared.module.ts b/web-app/src/app/shared/shared.module.ts
index bea3cd89d07..baf17b18b45 100644
--- a/web-app/src/app/shared/shared.module.ts
+++ b/web-app/src/app/shared/shared.module.ts
@@ -24,6 +24,8 @@ import { I18nElsePipe } from './pipe/i18n-else.pipe';
 import { TimezonePipe } from './pipe/timezone.pipe';
 import { SHARED_DELON_MODULES } from './shared-delon.module';
 import { SHARED_ZORRO_MODULES } from './shared-zorro.module';
+import { ChatbotComponent } from './components/chatbot/chatbot.component';
+import { ChatMessageComponent } from './components/chat-message/chat-message.component';
 
 const ThirdModules: Array<Type<void>> = [];
 const COMPONENTS: Array<Type<void>> = [
@@ -34,7 +36,9 @@ const COMPONENTS: Array<Type<void>> = [
   MetricsFieldInputComponent,
   ToolbarComponent,
   FormFieldComponent,
-  MonitorSelectMenuComponent
+  MonitorSelectMenuComponent,
+  ChatbotComponent,
+  ChatMessageComponent
 ];
 const DIRECTIVES: Array<Type<void>> = [TimezonePipe, I18nElsePipe, ElapsedTimePipe];
 
@@ -73,4 +77,4 @@ const DIRECTIVES: Array<Type<void>> = [TimezonePipe, I18nElsePipe, ElapsedTimePi
     ...DIRECTIVES
   ]
 })
-export class SharedModule {}
+export class SharedModule { }
diff --git a/web-app/src/assets/img/chatbot-icon.svg b/web-app/src/assets/img/chatbot-icon.svg
new file mode 100644
index 00000000000..b3de5b15fec
--- /dev/null
+++ b/web-app/src/assets/img/chatbot-icon.svg
@@ -0,0 +1,7 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 119.35">
+  <title>chatbot</title>
+  <path
+    d="M57.49,29.2V23.53a14.41,14.41,0,0,1-2-.93A12.18,12.18,0,0,1,50.44,7.5a12.39,12.39,0,0,1,2.64-3.95A12.21,12.21,0,0,1,57,.92,12,12,0,0,1,61.66,0,12.14,12.14,0,0,1,72.88,7.5a12.14,12.14,0,0,1,0,9.27,12.08,12.08,0,0,1-2.64,3.94l-.06.06a12.74,12.74,0,0,1-2.36,1.83,11.26,11.26,0,0,1-2,.93V29.2H94.3a15.47,15.47,0,0,1,15.42,15.43v2.29H115a7.93,7.93,0,0,1,7.9,7.91V73.2A7.93,7.93,0,0,1,115,81.11h-5.25v2.07A15.48,15.48,0,0,1,94.3,98.61H55.23L31.81,118.72a2.58,2.58,0,0,1-3.65-.29,2.63,2.63,0,0,1-.63-1.85l1.25-18h-.21A15.45,15.45,0,0,1,13.16,83.18V81.11H7.91A7.93,7.93,0,0,1,0,73.2V54.83a7.93,7.93,0,0,1,7.9-7.91h5.26v-2.3A15.45,15.45,0,0,1,28.57,29.2H57.49ZM82.74,47.32a9.36,9.36,0,1,1-9.36,9.36,9.36,9.36,0,0,1,9.36-9.36Zm-42.58,0a9.36,9.36,0,1,1-9.36,9.36,9.36,9.36,0,0,1,9.36-9.36Zm6.38,31.36a2.28,2.28,0,0,1-.38-.38,2.18,2.18,0,0,1-.52-1.36,2.21,2.21,0,0,1,.46-1.39,2.4,2.4,0,0,1,.39-.39,3.22,3.22,0,0,1,3.88-.08A22.36,22.36,0,0,0,56,78.32a14.86,14.86,0,0,0,5.47,1A16.18,16.18,0,0,0,67,78.22,25.39,25.39,0,0,0,72.75,75a3.24,3.24,0,0,1,3.89.18,3,3,0,0,1,.37.41,2.22,2.22,0,0,1,.42,1.4,2.33,2.33,0,0,1-.58,1.35,2.29,2.29,0,0,1-.43.38,30.59,30.59,0,0,1-7.33,4,22.28,22.28,0,0,1-7.53,1.43A21.22,21.22,0,0,1,54,82.87a27.78,27.78,0,0,1-7.41-4.16l0,0ZM94.29,34.4H28.57A10.26,10.26,0,0,0,18.35,44.63V83.18A10.26,10.26,0,0,0,28.57,93.41h3.17a2.61,2.61,0,0,1,2.41,2.77l-1,14.58L52.45,94.15a2.56,2.56,0,0,1,1.83-.75h40a10.26,10.26,0,0,0,10.22-10.23V44.62A10.24,10.24,0,0,0,94.29,34.4Z"
+    fill="#3f51b5"
+  />
+</svg>