Merge branch 'main' of https://github.com/devaine/CodeRED-Astra
This commit is contained in:
yenminh269
commit
5a9da85f07
31 changed files with 2831 additions and 54 deletions
15
web-app/Dockerfile
Normal file
15
web-app/Dockerfile
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
FROM node:23-alpine
|
||||
|
||||
COPY . /codered-astra
|
||||
|
||||
WORKDIR /codered-astra
|
||||
|
||||
RUN npm i
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
RUN npm run format
|
||||
|
||||
RUN npm run build
|
||||
|
||||
CMD ["npm", "run", "host"]
|
||||
16
web-app/README.md
Normal file
16
web-app/README.md
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
27
web-app/eslint.config.js
Normal file
27
web-app/eslint.config.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import js from "@eslint/js";
|
||||
import globals from "globals";
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(["dist"]),
|
||||
{
|
||||
files: ["**/*.{js,jsx}"],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
reactHooks.configs["recommended-latest"],
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: "module",
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
"no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
|
||||
},
|
||||
},
|
||||
]);
|
||||
14
web-app/index.html
Normal file
14
web-app/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href="/src/index.css" rel="stylesheet" />
|
||||
<title>codered-astra</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
6
web-app/jsconfig.json
Normal file
6
web-app/jsconfig.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./"
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
7692
web-app/package-lock.json
generated
Normal file
7692
web-app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
45
web-app/package.json
Normal file
45
web-app/package.json
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"name": "codered-astra",
|
||||
"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": "^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",
|
||||
"nodemon": "^3.1.10",
|
||||
"prettier": "^3.6.2",
|
||||
"tailwindcss": "^4.1.14",
|
||||
"vite": "^7.1.10"
|
||||
}
|
||||
}
|
||||
1
web-app/public/vite.svg
Normal file
1
web-app/public/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
16
web-app/src/app/index.jsx
Normal file
16
web-app/src/app/index.jsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import React from "react";
|
||||
<<<<<<< HEAD:src/app/index.jsx
|
||||
import ChatLayout from "../components/ui/ChatLayout";
|
||||
=======
|
||||
import ChatLayout from "src/components/layouts/chat-layout";
|
||||
>>>>>>> cb9cff44215b6de81ed81ef2a1c6abe090fbf1b1:web-app/src/app/index.jsx
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900 text-white flex items-center justify-center p-6">
|
||||
<ChatLayout />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
34
web-app/src/components/layouts/chat-layout.jsx
Normal file
34
web-app/src/components/layouts/chat-layout.jsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
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";
|
||||
|
||||
export default function ChatLayout() {
|
||||
const [messages, setMessages] = useState([
|
||||
{
|
||||
role: "assistant",
|
||||
content: "Hello — I can help you with code, explanations, and more.",
|
||||
},
|
||||
]);
|
||||
|
||||
function handleSend(text) {
|
||||
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}` },
|
||||
]);
|
||||
}, 600);
|
||||
}
|
||||
|
||||
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">
|
||||
<ChatHeader />
|
||||
<ChatWindow messages={messages} />
|
||||
<MessageInput onSend={handleSend} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
0
web-app/src/components/layouts/dashboard-layout.jsx
Normal file
0
web-app/src/components/layouts/dashboard-layout.jsx
Normal file
29
web-app/src/components/ui/Button/ActionButton.css
Normal file
29
web-app/src/components/ui/Button/ActionButton.css
Normal 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
web-app/src/components/ui/Button/ActionButton.jsx
Normal file
57
web-app/src/components/ui/Button/ActionButton.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
40
web-app/src/components/ui/chat/chat-header.jsx
Normal file
40
web-app/src/components/ui/chat/chat-header.jsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
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">
|
||||
<div className="w-10 h-10 bg-indigo-500 rounded flex items-center justify-center font-bold">
|
||||
AI
|
||||
</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>
|
||||
);
|
||||
}
|
||||
38
web-app/src/components/ui/chat/chat-window.jsx
Normal file
38
web-app/src/components/ui/chat/chat-window.jsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import React, { useRef, useEffect } from "react";
|
||||
|
||||
|
||||
function MessageBubble({ message }) {
|
||||
const isUser = message.role === "user";
|
||||
return (
|
||||
<div
|
||||
className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-2`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-slate-700 text-slate-100"}`}
|
||||
>
|
||||
<div className="text-sm">{message.content}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<main className="flex-1 overflow-auto p-2 bg-gradient-to-b from-slate-900 to-slate-800">
|
||||
<div className="space-y-2">
|
||||
{messages.map((m, i) => (
|
||||
<MessageBubble key={i} message={m} />
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
31
web-app/src/components/ui/chat/message-input.jsx
Normal file
31
web-app/src/components/ui/chat/message-input.jsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
export default function MessageInput({ onSend }) {
|
||||
const [text, setText] = useState("");
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!text.trim()) return;
|
||||
onSend(text.trim());
|
||||
setText("");
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="p-3 bg-slate-900">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
value={text}
|
||||
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>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
24
web-app/src/index.css
Normal file
24
web-app/src/index.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
@import "tailwindcss/preflight";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
:root {
|
||||
--color-primary: 15 40 98;
|
||||
--color-secondary: 79 95 118;
|
||||
--color-accent: 158 54 58;
|
||||
--color-paragraph: 255 255 255;
|
||||
--color-background: 9 31 54;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: rgb(var(--color-background));
|
||||
color: rgb(var(--color-paragraph));
|
||||
font-family:
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
"Helvetica Neue",
|
||||
Arial;
|
||||
}
|
||||
10
web-app/src/main.jsx
Normal file
10
web-app/src/main.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./app/index.jsx";
|
||||
|
||||
createRoot(document.getElementById("root")).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
);
|
||||
7
web-app/src/styles/theme.css
Normal file
7
web-app/src/styles/theme.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@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);
|
||||
}
|
||||
14
web-app/vite.config.js
Normal file
14
web-app/vite.config.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import jsconfigPaths from "vite-jsconfig-paths";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [tailwindcss(), react(), jsconfigPaths()],
|
||||
resolve: {
|
||||
alias: {
|
||||
src: "/src",
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue