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

Merge pull request #1 from devaine/mincy

Browse source 
"add delete button functionality"
This commit is contained in:
Minh Ho 2025-10-18 21:51:07 -05:00 • committed by GitHub
commit b214242d38
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 140 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/features/gemini/gemini.js Normal file
View file

@ -0,0 +1,4 @@
import { createPartFromUri, GoogleGenAI } from "@google/genai"
import 'dotenv/config'
const ai = new GoogleGenAI({ apiKey: ${} })

1
web-app/index.html
View file

@ -4,7 +4,6 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/src/index.css" rel="stylesheet" />
<title>codered-astra</title> <title>codered-astra</title>
</head> </head>
<body> <body>

1
web-app/package.json
View file

@ -1,5 +1,6 @@
{ {
"name": "codered-astra", "name": "codered-astra",
"type": "module",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "vite build", "build": "vite build",

BIN
web-app/public/pdfs/SRHB.pdf Normal file
View file

Binary file not shown.

BIN
web-app/public/pdfs/falcon-users-guide-2025-05-09.pdf Normal file
View file

Binary file not shown.

BIN
web-app/public/pdfs/spacex-falcon-9-data-sheet.pdf Normal file
View file

Binary file not shown.

BIN
web-app/public/pdfs/system-safety-handbook.pdf Normal file
View file

Binary file not shown.

1
web-app/public/vite.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

2
web-app/src/app/index.jsx
View file

@ -3,7 +3,7 @@ import ChatLayout from "src/components/layouts/chat-layout";
function App() { function App() {
return ( return (
<div className="min-h-screen bg-slate-900 text-white flex items-center justify-center p-6"> <div className="dark min-h-screen bg-gray-950 text-white flex items-center justify-center p-6">
<ChatLayout /> <ChatLayout />
</div> </div>
); );

11
web-app/src/components/layouts/chat-layout.jsx
View file

@ -2,7 +2,7 @@ import React, { useState } from "react";
import ChatHeader from "src/components/ui/chat/chat-header"; import ChatHeader from "src/components/ui/chat/chat-header";
import ChatWindow from "src/components/ui/chat/chat-window"; import ChatWindow from "src/components/ui/chat/chat-window";
import MessageInput from "src/components/ui/chat/message-input"; import MessageInput from "src/components/ui/chat/message-input";
import '../../index.css'
export default function ChatLayout() { export default function ChatLayout() {
const [messages, setMessages] = useState([ const [messages, setMessages] = useState([
{ {
@ -24,11 +24,16 @@ export default function ChatLayout() {
}, 600); }, 600);
} }
function handleDeleteAll() {
if (!window.confirm("Delete all messages?")) return;
setMessages([]);
}
return ( return (
<div className="flex flex-col h-[80vh] w-full max-w-3xl mx-auto rounded-lg overflow-hidden shadow-lg border border-slate-700"> <div className="flex flex-col">
<ChatHeader /> <ChatHeader />
<ChatWindow messages={messages} /> <ChatWindow messages={messages} />
<MessageInput onSend={handleSend} /> <MessageInput onSend={handleSend} onDeleteAll={handleDeleteAll} />
</div> </div>
); );
} }

0
web-app/src/components/layouts/dashboard-layout.jsx
View file

29
web-app/src/components/ui/Button/ActionButton.css
View file

@ -1,29 +0,0 @@
.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
web-app/src/components/ui/Button/ActionButton.jsx
View file

@ -1,57 +0,0 @@
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>
);
}

9
web-app/src/components/ui/button/delete-button.jsx Normal file
View file

@ -0,0 +1,9 @@
import { Flame } from "lucide-react";
export default function FlameButton({ onClick }) {
return (
<button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
<Flame />
</button>
);
}

10
web-app/src/components/ui/button/down-button.jsx Normal file
View file

@ -0,0 +1,10 @@
import React from "react";
import { ArrowDown } from "lucide-react";
export default function DownButton({ onClick }) {
return (
<button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
<ArrowDown />
</button>
);
}

38
web-app/src/components/ui/chat/chat-header.jsx
View file

@ -1,39 +1,11 @@
import React from "react"; import React from "react";
import ActionButton from "src/components/ui/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([]);
}
};
export default function ChatHeader({ title = "Title of Chat" }) {
return ( return (
<header className="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-slate-800 to-slate-900 text-white"> <header className="flex justify-center text-slate-100">
<div className="flex items-center gap-3"> <h1 className="text-lg font-semibold shadow-xl bg-gray-900 px-4 py-2 rounded-4xl">
<div className="w-10 h-10 bg-indigo-500 rounded flex items-center justify-center font-bold"> {title}
AI </h1>
</div>
<div>
<h1 className="text-lg font-semibold">{title}</h1>
<p className="text-sm text-slate-300">
Ask anything — AI is listening
</p>
</div>
<ActionButton type="add" onClick={handleNewChat}></ActionButton>
<ActionButton type="delete" onClick={handleDeleteChat}></ActionButton>
</div>
</header> </header>
); );
} }

20
web-app/src/components/ui/chat/chat-window.jsx
View file

@ -1,14 +1,13 @@
import React, { useRef, useEffect } from "react"; import React, { useRef, useEffect } from "react";
function MessageBubble({ message }) { function MessageBubble({ message }) {
const isUser = message.role === "user"; const isUser = message.role === "user";
return ( return (
<div <div
className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-2`} className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-8`}
> >
<div <div
className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-slate-700 text-slate-100"}`} className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-gray-700 text-slate-100"}`}
> >
<div className="text-sm">{message.content}</div> <div className="text-sm">{message.content}</div>
</div> </div>
@ -17,22 +16,13 @@ function MessageBubble({ message }) {
} }
export default function ChatWindow({ messages }) { export default function ChatWindow({ messages }) {
const chatRef = useRef(null);
// Auto-scroll to bottom when new messages appear
useEffect(() => {
chatRef.current?.scrollTo({
top: chatRef.current.scrollHeight,
behavior: "smooth",
});
}, [messages]);
return ( return (
<main className="flex-1 overflow-auto p-2 bg-gradient-to-b from-slate-900 to-slate-800"> <div className="flex-1 overflow-auto p-2">
<div className="space-y-2"> <div className="">
{messages.map((m, i) => ( {messages.map((m, i) => (
<MessageBubble key={i} message={m} /> <MessageBubble key={i} message={m} />
))} ))}
</div> </div>
</main> </div>
); );
} }

40
web-app/src/components/ui/chat/message-input.jsx
View file

@ -1,6 +1,8 @@
import React, { useState } from "react"; import React, { useState } from "react";
import DeleteButton from "src/components/ui/button/delete-button";
import DownButton from "../button/down-button";
export default function MessageInput({ onSend }) { export default function MessageInput({ onSend, onDeleteAll }) {
const [text, setText] = useState(""); const [text, setText] = useState("");
function handleSubmit(e) { function handleSubmit(e) {
@ -11,21 +13,27 @@ export default function MessageInput({ onSend }) {
} }
return ( return (
<form onSubmit={handleSubmit} className="p-3 bg-slate-900"> <div className="flex flex-col gap-2">
<div className="flex gap-2"> <div className="flex justify-between">
<input <DeleteButton onClick={onDeleteAll}></DeleteButton>
value={text} <DownButton></DownButton>
onChange={(e) => setText(e.target.value)}
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>
</div> </div>
</form> <form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
<div className="flex p-2 shadow-xl">
<input
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Type a message..."
className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
/>
<button
type="submit"
className="px-4 py-2 bg-gray-700 rounded-xl ml-4"
>
Send
</button>
</div>
</form>
</div>
); );
} }

65
web-app/src/features/gemini/gemini.js Normal file
View file

@ -0,0 +1,65 @@
import { createPartFromUri, GoogleGenAI } from "@google/genai"
import 'dotenv/config'
import fs from "fs"
const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY })
async function uploadLocalPDFs() {
var pdfList = fs.readdirSync("public/pdfs")
// Upload each file in /public
pdfList.forEach(async (path) => {
console.log("file names: " + path)
console.log("file names: " + path.slice(0, path.length - 4))
console.log("UPLOADING")
const file = await ai.files.upload({
file: "public/pdfs/" + path,
config: {
displayName: path.slice(0, path.length - 4)
}
})
console.log("FETCHING: public/pdfs/" + path)
// Wait for the file to be processed
let getFile = await ai.files.get({
name: file.name
})
while (getFile.state === "PROCESSING") {
let getFile = await ai.files.get({
name: file.name
})
console.log(`Current file status: ${getFile.state}`)
console.log("File is currently processing, retrying in 5 seconds")
await new Promise((resolve) => {
setTimeout(resolve, 5000) // Checks every 5 seconds
})
// Error handling
if (getFile.state === "FAILED") {
throw new Error("File has failed to process!")
}
return file
}
})
}
async function main() {
const prompts = [
"If possible, using Gemini's Javascript API, how would you grab an image from a PDF sent to the API?"
]
const response = await ai.models.generateContent({
model: "gemini-2.5-flash",
contents: prompts
})
console.log(response.text)
}
uploadLocalPDFs()
main()

18
web-app/src/index.css
View file

@ -1,18 +1,16 @@
@import "tailwindcss/preflight"; @import "tailwindcss";
@import "tailwindcss/utilities";
:root { .dark {
--color-primary: 15 40 98; --paragraph: 235, 236, 239;
--color-secondary: 79 95 118; --background: 15, 16, 26;
--color-accent: 158 54 58; --primary: 158, 166, 214;
--color-paragraph: 255 255 255; --secondary: 35, 50, 133;
--color-background: 9 31 54; --accent: 52, 75, 223;
background: rgba(var(--background));
} }
body { body {
margin: 0; margin: 0;
background-color: rgb(var(--color-background));
color: rgb(var(--color-paragraph));
font-family: font-family:
ui-sans-serif, ui-sans-serif,
system-ui, system-ui,

7
web-app/src/styles/theme.css
View file

@ -1,7 +0,0 @@
@theme {
--color-primary: rgba(15, 40, 98);
--color-secondary: rgba(79, 95, 118);
--color-accent: rgba(158, 54, 58);
--color-paragraph: rgba(255, 255, 255);
--color-background: rgba(9, 31, 54);
}