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

Merge branch 'diagram'

Browse source
This commit is contained in:
JK-le-dev 2025-10-19 00:01:38 -05:00
commit 7ef0c87ded
13 changed files with 9164 additions and 7797 deletions
Download patch file Download diff file Expand all files Collapse all files

1241
web-app/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
web-app/package.json
View file

@ -23,10 +23,12 @@
"express": "^5.1.0",
"helmet": "^8.1.0",
"lucide-react": "^0.546.0",
"motion": "^12.23.24",
"pg": "^8.16.3",
"react": "^19.2.0",
"react-bootstrap": "^2.10.10",
"react-dom": "^19.2.0",
"react-markdown": "^10.1.0",
"react-router": "^7.9.4",
"react-router-dom": "^7.9.4",
"vite-jsconfig-paths": "^2.0.1"

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

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

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

@ -2,7 +2,21 @@ import React, { useState } from "react";
import ChatHeader from "src/components/ui/chat/chat-header";
import ChatWindow from "src/components/ui/chat/chat-window";
import MessageInput from "src/components/ui/chat/message-input";
import '../../index.css'
import { GoogleGenAI } from "@google/genai"
const ai = new GoogleGenAI({ apiKey: import.meta.env.GEMINI_API_KEY })
async function AIRepsponse(userInputArray) {
const response = await ai.models.generateContent({
model: "gemini-2.5-flash",
contents: userInputArray
})
return response.text
}
let userInput = []
export default function ChatLayout() {
const [messages, setMessages] = useState([
{
@ -11,15 +25,17 @@ export default function ChatLayout() {
},
]);
function handleSend(text) {
async function handleSend(text) {
userInput.push(text)
const res = await AIRepsponse(userInput)
const userMsg = { role: "user", content: text };
setMessages((s) => [...s, userMsg]);
// fake assistant reply after short delay
setTimeout(() => {
setMessages((s) => [
...s,
{ role: "assistant", content: `You said: ${text}` },
{ role: "assistant", content: res },
]);
}, 600);
}
@ -30,7 +46,7 @@ export default function ChatLayout() {
}
return (
<div className="flex flex-col">
<div className="w-full max-w-4xl gap-4 p-4">
<ChatHeader />
<ChatWindow messages={messages} />
<MessageInput onSend={handleSend} onDeleteAll={handleDeleteAll} />

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

@ -1,9 +1,15 @@
import { Flame } from "lucide-react";
import { motion } from "motion/react";
export default function FlameButton({ onClick }) {
return (
<button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
<motion.button
onClick={onClick}
className="bg-gray-700 p-2 rounded-2xl"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
<Flame />
</button>
</motion.button>
);
}

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

@ -1,10 +1,16 @@
import React from "react";
import { ArrowDown } from "lucide-react";
import { motion } from "motion/react";
export default function DownButton({ onClick }) {
return (
<button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
<motion.button
onClick={onClick}
className="bg-gray-700 p-2 rounded-2xl"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
<ArrowDown />
</button>
</motion.button>
);
}

16
web-app/src/components/ui/button/schematic-button.jsx Normal file
View file

@ -0,0 +1,16 @@
import React from "react";
import { motion } from "motion/react";
import { FilePlus2 } from "lucide-react";
export default function SchematicButton({ onClick }) {
return (
<motion.button
onClick={onClick}
className=" bg-gray-700 p-2 rounded-2xl"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
<FilePlus2 />
</motion.button>
);
}

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

@ -2,10 +2,14 @@ import React from "react";
export default function ChatHeader({ title = "Title of Chat" }) {
return (
<header className="flex justify-center text-slate-100">
<h1 className="text-lg font-semibold shadow-xl bg-gray-900 px-4 py-2 rounded-4xl">
<div className="w-full flex justify-center">
<header className="text-slate-100 fixed top-4 ">
<div>
<h1 className="text-lg font-semibold shadow-md shadow-indigo-600 bg-gray-900 px-6 py-2 rounded-4xl border-2 border-gray-800">
{title}
</h1>
</div>
</header>
</div>
);
}

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

@ -1,15 +1,21 @@
import React, { useRef, useEffect } from "react";
import ReactMarkdown from "react-markdown";
import { MARKDOWN_COMPONENTS } from "src/config/markdown";
function MessageBubble({ message }) {
const isUser = message.role === "user";
return (
<div className={`flex ${isUser ? "justify-end" : "justify-start"} py-2`}>
<div
className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-8`}
>
<div
className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-gray-700 text-slate-100"}`}
className={`p-3 rounded-xl ${isUser ? "bg-indigo-600 text-white rounded-tr-sm" : "bg-gray-700 text-slate-100 rounded-tl-sm"}`}
>
{isUser ? (
<div className="text-sm">{message.content}</div>
) : (
<ReactMarkdown components={MARKDOWN_COMPONENTS}>
{message.content}
</ReactMarkdown>
)}
</div>
</div>
);
@ -17,7 +23,7 @@ function MessageBubble({ message }) {
export default function ChatWindow({ messages }) {
return (
<div className="flex-1 overflow-auto p-2">
<div className="flex-1 overflow-auto px-2 pt-4 pb-32">
<div className="">
{messages.map((m, i) => (
<MessageBubble key={i} message={m} />

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

@ -1,6 +1,9 @@
import React, { useState } from "react";
import DeleteButton from "src/components/ui/button/delete-button";
import DownButton from "../button/down-button";
import DownButton from "src/components/ui/button/down-button";
import SchematicButton from "src/components/ui/button/schematic-button";
import { motion } from "motion/react";
import { BotMessageSquare } from "lucide-react";
export default function MessageInput({ onSend, onDeleteAll }) {
const [text, setText] = useState("");
@ -30,10 +33,25 @@ export default function MessageInput({ onSend, onDeleteAll }) {
type="submit"
className="px-4 py-2 bg-gray-700 rounded-xl ml-4"
>
Send
</button>
<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"
/>
<motion.button
type="submit"
className="flex gap-2 px-4 py-2 bg-gray-700 rounded-xl ml-4"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
<BotMessageSquare />
</motion.button>
</div>
</form>
</div>
</footer>
</div>
);
}

60
web-app/src/config/markdown.jsx Normal file
View file

@ -0,0 +1,60 @@
export const MARKDOWN_COMPONENTS = {
h1: ({ node, ...props }) => (
<h1 className="text-xl font-semibold mt-2 mb-1" {...props} />
),
h2: ({ node, ...props }) => (
<h2 className="text-lg font-semibold mt-2 mb-1" {...props} />
),
h3: ({ node, ...props }) => (
<h3 className="text-md font-semibold mt-2 mb-1" {...props} />
),
p: ({ node, ...props }) => (
<p className="text-sm leading-relaxed mb-2" {...props} />
),
a: ({ node, href, ...props }) => (
<a
href={href}
className="text-indigo-300 hover:underline"
target="_blank"
rel="noopener noreferrer"
{...props}
/>
),
code: ({ node, inline, className, children, ...props }) => {
if (inline) {
return (
<code
className={`bg-slate-800 px-1 py-0.5 rounded text-sm ${className || ""}`}
{...props}
>
{children}
</code>
);
}
return (
<pre
className="bg-slate-800 p-2 rounded overflow-auto text-sm"
{...props}
>
<code className={className || ""}>{children}</code>
</pre>
);
},
blockquote: ({ node, ...props }) => (
<blockquote
className="border-l-2 border-slate-600 pl-4 italic text-slate-200 my-2"
{...props}
/>
),
ul: ({ node, ...props }) => (
<ul className="list-disc list-inside ml-4 mb-2" {...props} />
),
ol: ({ node, ...props }) => (
<ol className="list-decimal list-inside ml-4 mb-2" {...props} />
),
li: ({ node, ...props }) => <li className="mb-1" {...props} />,
strong: ({ node, ...props }) => (
<strong className="font-semibold" {...props} />
),
em: ({ node, ...props }) => <em className="italic" {...props} />,
};

22
web-app/src/features/gemini/gemini.js
View file

@ -1,8 +1,7 @@
import { createPartFromUri, GoogleGenAI } from "@google/genai"
import 'dotenv/config'
import { GoogleGenAI } from "@google/genai"
import fs from "fs"
const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY })
const ai = new GoogleGenAI({ apiKey: import.meta.env.GEMINI_API_KEY })
async function uploadLocalPDFs() {
var pdfList = fs.readdirSync("public/pdfs")
@ -46,20 +45,3 @@ async function uploadLocalPDFs() {
}
})
}
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()

10
web-app/vite.config.js
View file

@ -3,6 +3,12 @@ import react from "@vitejs/plugin-react";
import jsconfigPaths from "vite-jsconfig-paths";
import tailwindcss from "@tailwindcss/vite";
try {
process.loadEnvFile(".env")
} catch (error) {
console.log("Env file not found!\n" + error)
}
// https://vite.dev/config/
export default defineConfig({
plugins: [tailwindcss(), react(), jsconfigPaths()],
@ -11,4 +17,8 @@ export default defineConfig({
src: "/src",
},
},
// Defines envrionmental files across all src code b/c prefix is usually "VITE"
define: {
'import.meta.env.GEMINI_API_KEY': JSON.stringify(process.env.GEMINI_API_KEY),
}
});