From b8538e6ac5f474d1cbac3846a2558b14cd0e5241 Mon Sep 17 00:00:00 2001
From: Chandrapal Badshah <12944530+Chan9390@users.noreply.github.com>
Date: Wed, 4 Jun 2025 15:13:42 +0530
Subject: [PATCH] Use CustomButton component

---
 ui/components/lighthouse/chat.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/ui/components/lighthouse/chat.tsx b/ui/components/lighthouse/chat.tsx
index 8893495088..5797d4b959 100644
--- a/ui/components/lighthouse/chat.tsx
+++ b/ui/components/lighthouse/chat.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useEffect, useRef } from "react";
 
 import { MemoizedMarkdown } from "@/components/lighthouse/memoized-markdown";
+import { CustomButton } from "@/components/ui/custom";
 
 interface SuggestedAction {
   title: string;
@@ -113,9 +114,10 @@ export const Chat = ({ hasApiKey }: ChatProps) => {
             <h2 className="mb-4 text-center font-sans text-xl">Suggestions</h2>
             <div className="grid gap-2 sm:grid-cols-2">
               {suggestedActions.map((action, index) => (
-                <button
+                <CustomButton
                   key={`suggested-action-${index}`}
-                  onClick={() => {
+                  ariaLabel={`Send message: ${action.action}`}
+                  onPress={() => {
                     append({
                       role: "user",
                       content: action.action,
@@ -125,7 +127,7 @@ export const Chat = ({ hasApiKey }: ChatProps) => {
                 >
                   <span>{action.title}</span>
                   <span className="text-muted-foreground">{action.label}</span>
-                </button>
+                </CustomButton>
               ))}
             </div>
           </div>
@@ -199,13 +201,16 @@ export const Chat = ({ hasApiKey }: ChatProps) => {
               }
             }}
           />
-          <button
+          <CustomButton
             type="submit"
-            disabled={status === "submitted" || !input.trim()}
+            ariaLabel={
+              status === "submitted" ? "Stop generation" : "Send message"
+            }
+            isDisabled={status === "submitted" || !input.trim()}
             className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-primary p-2 text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
           >
             {status === "submitted" ? <span>■</span> : <span>➤</span>}
-          </button>
+          </CustomButton>
         </div>
       </form>
     </div>