fix: add hover state to a capability with an action

Author: Ni-2

apps/xen-tg-app/src/components/Agent.tsx

@@ -73,10 +73,17 @@ const Agent: FC<TAgentProps> = ({ capabilitiy }) => {
   // })
   return (
     <div className="flex w-full items-center justify-between gap-3.5 rounded-[10px] bg-(--color-light-white-bg) p-2.5">
-      <button className="flex flex-1 flex-col gap-0.5 overflow-hidden" onClick={action}>
-        <div className="flex items-center gap-2 py-0.25 text-left text-[14px]/[100%] font-semibold wrap-anywhere">
+      <button
+        className={`flex flex-1 ${action ? 'cursor-pointer' : 'cursor-default'} flex-col gap-0.5 overflow-hidden`}
+        onClick={action}
+      >
+        <div className="group flex items-center gap-2 py-0.25 text-left text-[14px]/[100%] font-semibold wrap-anywhere">
           {capabilitiy.title ?? capabilitiy.name}
-          {action ? <ArrowForwardIcon /> : null}
+          {action ? (
+            <div className="text-[#7A818B] transition group-hover:text-(--color-main-text)">
+              <ArrowForwardIcon />
+            </div>
+          ) : null}
         </div>
         <div className="flex py-0.25 text-[12px]/[100%] font-normal text-(--color-gray-text)">
           {capabilitiy.domain}