From 286a44df48d1b48727342dff9975baaaff3697bc Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 30 May 2024 16:06:04 +0100
Subject: [PATCH] add custom tooltip for aistatus

---
 .../statusbar/src/lib/components/aiStatus.tsx       | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx b/libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx
index 11f23f1379..5490d5f9d9 100644
--- a/libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx
+++ b/libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { StatusBar } from 'apps/remix-ide/src/app/components/status-bar'
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useEffect, useState } from 'react'
 
 interface AIStatusProps {
@@ -31,9 +32,13 @@ export default function AIStatus(props: AIStatusProps) {
     run()
   }, [props.plugin.isAiActive])
   return (
-    <div className="d-flex flex-row pr-2 text-white justify-content-center align-items-center">
-      <span className={copilotActive === false ? "fa-regular fa-microchip-ai ml-1 text-danger" : "fa-regular fa-microchip-ai ml-1"}></span>
-      <span className={copilotActive === false ? "small mx-1 text-danger semi-bold" : "small mx-1 semi-bold" }>Remix Copilot</span>
-    </div>
+    <CustomTooltip
+      tooltipText={copilotActive ? "Remix Copilot activated" : "Remix Copilot disabled."}
+    >
+      <div className="d-flex flex-row pr-2 text-white justify-content-center align-items-center">
+        <span className={copilotActive === false ? "fa-regular fa-microchip-ai ml-1 text-danger" : "fa-regular fa-microchip-ai ml-1"}></span>
+        <span className={copilotActive === false ? "small mx-1 text-danger semi-bold" : "small mx-1 semi-bold" }>Remix Copilot</span>
+      </div>
+    </CustomTooltip>
   )
 }