devaine/CodeRED-Astra
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

"combine button components"

Browse source
This commit is contained in:
yenminh269 2025-10-18 17:44:11 -05:00
commit 3df311634d
8 changed files with 111 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/index.jsx
View file

@ -1,5 +1,5 @@
import React from "react";
import ChatLayout from "src/components/ui/ChatLayout";
import ChatLayout from "../components/ui/ChatLayout";
function App() {
return (

29
src/components/ui/Button/ActionButton.css Normal file
View file

@ -0,0 +1,29 @@
.action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 2px solid var(--btn-color);
border-radius: 6px;
background-color: white;
color: var(--btn-color);
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
}
.action-btn:hover,
.action-btn:focus {
background-color: var(--btn-color);
color: white;
border-color: var(--btn-color);
}
.action-btn svg {
fill: currentColor;
transition: fill 0.25s ease;
}
.action-btn:hover {
transform: translateY(-1px);
}

57
src/components/ui/Button/ActionButton.jsx Normal file
View file

@ -0,0 +1,57 @@
import './ActionButton.css';
export default function ActionButton({
onClick,
children,
type = 'add', // 'add' or 'delete'
...props
}) {
// Define color and icon based on type
const config = {
add: {
color: '#0F2862',
svg: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
fillRule="evenodd"
d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"
/>
</svg>
),
},
delete: {
color: '#9E363A',
svg: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
</svg>
),
},
};
const { color, svg } = config[type] || config.add;
return (
<button
onClick={onClick}
className="action-btn"
style={{ '--btn-color': color }}
{...props}
>
{ type === 'add' ? 'New Chat' : 'Delete Chat'}
{svg}
</button>
);
}

19
src/components/ui/Button/DeleteButton.jsx
View file

@ -1,19 +0,0 @@
import Button from 'react-bootstrap/Button';
export default function DeleteButton({ onClick, variant = "outline-danger", children, ...props }) {
return (
<Button onClick={onClick} variant={variant} {...props}>
{children || "Delete"}{" "}
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-trash3"
viewBox="0 0 16 16"
>
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
</svg>
</Button>
);
}

13
src/components/ui/Button/NewChatButton.css
View file

@ -1,13 +0,0 @@
.custom-btn {
background-color: white !important;
border: 2px solid #0F2862 !important;
color: #0F2862 !important;
transition: all 0.25s ease;
}
.custom-btn:hover,
.custom-btn:focus {
background-color: #0F2862 !important;
color: white !important;
border-color: #0F2862 !important;
}

19
src/components/ui/Button/NewChatButton.jsx
View file

@ -1,19 +0,0 @@
import Button from 'react-bootstrap/Button';
import './NewChatButton.css'
export default function NewChatButton({ onClick, variant = "outline-light", children, ...props }) {
return (
<Button onClick={onClick} className="custom-btn" {...props}>
{children || "New Chat"}{" "}
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-plus-lg"
viewBox="0 0 16 16"
>
<path fillRule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>
</svg>
</Button>
);
}

21
src/components/ui/ChatHeader.jsx
View file

@ -1,6 +1,24 @@
import React from "react";
import ActionButton from "./Button/ActionButton.jsx";
export default function ChatHeader({ title = "AI Assistant" }) {
// Delete chat log (frontend + backend)
const handleDeleteChat = async () => {
if (!window.confirm("Delete all messages?")) return;
await fetch(`/api/chat/${conversationId}`, { method: "DELETE" });
setMessages([]);
};
// Restart chat (new conversation)
const handleNewChat = async () => {
const res = await fetch("/api/chat/new", { method: "POST" });
const data = await res.json();
if (data.success) {
setConversationId(data.conversationId);
setMessages([]);
}
};
return (
<header className="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-slate-800 to-slate-900 text-white">
<div className="flex items-center gap-3">
@ -13,7 +31,10 @@ 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>
</div>
</header>
);
}

5
src/components/ui/ChatWindow.jsx
View file

@ -1,5 +1,6 @@
import React from "react";
import { useRef } from "react";
import React, { useRef, useEffect } from "react";
function MessageBubble({ message }) {
const isUser = message.role === "user";
return (