Merge branch 'main' of https://github.com/devaine/CodeRED-Astra
This commit is contained in:
Christbru
commit
5eebd85357
13 changed files with 9178 additions and 7814 deletions
16651
web-app/package-lock.json
generated
16651
web-app/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,48 +1,50 @@
|
|||
{
|
||||
"name": "codered-astra",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"dev": "vite",
|
||||
"host": "vite host",
|
||||
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
|
||||
"clean-dist": "find apps/ -type d -name 'dist' -print0 | xargs -r0 -- rm -r",
|
||||
"clean-all": "find apps/ -type d -name 'dist' -print0 | xargs -r0 -- rm -r && find . -path ./node_modules -prune -o -name 'node_modules' | xargs rm -rf "
|
||||
},
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@google/genai": "^1.25.0",
|
||||
"@tailwindcss/postcss": "^4.1.14",
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
"bootstrap": "^5.3.8",
|
||||
"bootstrap-icons": "^1.13.1",
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^17.2.3",
|
||||
"express": "^5.1.0",
|
||||
"helmet": "^8.1.0",
|
||||
"lucide-react": "^0.546.0",
|
||||
"pg": "^8.16.3",
|
||||
"react": "^19.2.0",
|
||||
"react-bootstrap": "^2.10.10",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-router": "^7.9.4",
|
||||
"react-router-dom": "^7.9.4",
|
||||
"vite-jsconfig-paths": "^2.0.1"
|
||||
},
|
||||
"packageManager": ">=npm@10.9.0",
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.38.0",
|
||||
"eslint": "^9.38.0",
|
||||
"eslint-plugin-import": "^2.32.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^7.0.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.4.0",
|
||||
"nodemon": "^3.1.10",
|
||||
"prettier": "^3.6.2",
|
||||
"tailwindcss": "^4.1.14",
|
||||
"vite": "^7.1.10"
|
||||
}
|
||||
"name": "codered-astra",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"dev": "vite",
|
||||
"host": "vite host",
|
||||
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
|
||||
"clean-dist": "find apps/ -type d -name 'dist' -print0 | xargs -r0 -- rm -r",
|
||||
"clean-all": "find apps/ -type d -name 'dist' -print0 | xargs -r0 -- rm -r && find . -path ./node_modules -prune -o -name 'node_modules' | xargs rm -rf "
|
||||
},
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@google/genai": "^1.25.0",
|
||||
"@tailwindcss/postcss": "^4.1.14",
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
"bootstrap": "^5.3.8",
|
||||
"bootstrap-icons": "^1.13.1",
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^17.2.3",
|
||||
"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"
|
||||
},
|
||||
"packageManager": ">=npm@10.9.0",
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.38.0",
|
||||
"eslint": "^9.38.0",
|
||||
"eslint-plugin-import": "^2.32.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^7.0.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.4.0",
|
||||
"nodemon": "^3.1.10",
|
||||
"prettier": "^3.6.2",
|
||||
"tailwindcss": "^4.1.14",
|
||||
"vite": "^7.1.10"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
16
web-app/src/components/ui/button/schematic-button.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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">
|
||||
{title}
|
||||
</h1>
|
||||
</header>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"} px-4 py-8`}
|
||||
>
|
||||
<div className={`flex ${isUser ? "justify-end" : "justify-start"} py-2`}>
|
||||
<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"}`}
|
||||
>
|
||||
<div className="text-sm">{message.content}</div>
|
||||
{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} />
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
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 }) {
|
||||
export default function MessageInput({ onSend }) {
|
||||
const [text, setText] = useState("");
|
||||
|
||||
function handleSubmit(e) {
|
||||
|
|
@ -13,27 +16,39 @@ export default function MessageInput({ onSend, onDeleteAll }) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex justify-between">
|
||||
<DeleteButton onClick={onDeleteAll}></DeleteButton>
|
||||
<DownButton></DownButton>
|
||||
</div>
|
||||
<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"
|
||||
<div className="w-full flex justify-center">
|
||||
<footer className="fixed bottom-6 max-w-2xl w-full px-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex justify-between">
|
||||
<div className="flex gap-2">
|
||||
<SchematicButton></SchematicButton>
|
||||
<DeleteButton></DeleteButton>
|
||||
</div>
|
||||
<DownButton></DownButton>
|
||||
</div>
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-gray-900 rounded-2xl border-2 border-gray-800 shadow-lg shadow-indigo-600"
|
||||
>
|
||||
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>
|
||||
</form>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
60
web-app/src/config/markdown.jsx
Normal file
60
web-app/src/config/markdown.jsx
Normal 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 text-sm" {...props} />
|
||||
),
|
||||
ol: ({ node, ...props }) => (
|
||||
<ol className="list-decimal list-inside ml-4 mb-2 text-sm" {...props} />
|
||||
),
|
||||
li: ({ node, ...props }) => <li className="mb-1 text-sm" {...props} />,
|
||||
strong: ({ node, ...props }) => (
|
||||
<strong className="font-semibold" {...props} />
|
||||
),
|
||||
em: ({ node, ...props }) => <em className="italic" {...props} />,
|
||||
};
|
||||
|
|
@ -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")
|
||||
|
|
@ -45,21 +44,4 @@ async function uploadLocalPDFs() {
|
|||
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()
|
||||
|
||||
}
|
||||
|
|
@ -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),
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue