From 3bcd4087deb5cbb2993c7f5b22104ddf65177a6d Mon Sep 17 00:00:00 2001
From: yenminh269 <hhyenminh2001@gmail.com>
Date: Sat, 18 Oct 2025 18:35:52 -0500
Subject: [PATCH] style send button

---
 web-app/src/components/ui/Button/ActionButton.jsx | 10 ++++++++--
 web-app/src/components/ui/chat/chat-header.jsx    |  4 ++--
 web-app/src/components/ui/chat/message-input.jsx  | 10 +++-------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/web-app/src/components/ui/Button/ActionButton.jsx b/web-app/src/components/ui/Button/ActionButton.jsx
index a14b1fe..334f9e8 100644
--- a/web-app/src/components/ui/Button/ActionButton.jsx
+++ b/web-app/src/components/ui/Button/ActionButton.jsx
@@ -3,7 +3,7 @@ import './ActionButton.css';
 export default function ActionButton({
   onClick,
   children,
-  type = 'add', // 'add' or 'delete'
+  type = 'add', // 'add' or 'delete' or 'send'
   ...props
 }) {
   // Define color and icon based on type
@@ -39,6 +39,12 @@ export default function ActionButton({
         </svg>
       ),
     },
+    submit: {
+      color: '#3949AB',
+      svg: (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send-icon lucide-send"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>
+      ),
+    },
   };
 
   const { color, svg } = config[type] || config.add;
@@ -50,7 +56,7 @@ export default function ActionButton({
       style={{ '--btn-color': color }}
       {...props}
     >
-      { type === 'add' ? 'New Chat' : 'Delete Chat'}
+      {children}
       {svg}
     </button>
   );
diff --git a/web-app/src/components/ui/chat/chat-header.jsx b/web-app/src/components/ui/chat/chat-header.jsx
index 2952cc6..d4a3564 100644
--- a/web-app/src/components/ui/chat/chat-header.jsx
+++ b/web-app/src/components/ui/chat/chat-header.jsx
@@ -31,8 +31,8 @@ export default function ChatHeader({ title = "AI Assistant" }) {
             Ask anything — AI is listening
           </p>
         </div>
-        <ActionButton type="add" onClick={handleNewChat}></ActionButton>
-        <ActionButton type="delete" onClick={handleDeleteChat}></ActionButton>
+        <ActionButton children='New Chat' type="add" onClick={handleNewChat}></ActionButton>
+        <ActionButton children='Delete Chat'type="delete" onClick={handleDeleteChat}></ActionButton>
       </div>
 
     </header>
diff --git a/web-app/src/components/ui/chat/message-input.jsx b/web-app/src/components/ui/chat/message-input.jsx
index 2ca272e..3dd4f84 100644
--- a/web-app/src/components/ui/chat/message-input.jsx
+++ b/web-app/src/components/ui/chat/message-input.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-
+import ActionButton from "../Button/ActionButton";
 export default function MessageInput({ onSend }) {
   const [text, setText] = useState("");
 
@@ -19,12 +19,8 @@ export default function MessageInput({ onSend }) {
           placeholder="Type a message..."
           className="flex-1 rounded-md bg-slate-800 border border-slate-700 px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
         />
-        <button
-          type="submit"
-          className="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md"
-        >
-          Send
-        </button>
+        <ActionButton children="Send" type="submit"></ActionButton>
+      
       </div>
     </form>
   );