Merge: Resolve conflicts by accepting incoming changes
This commit is contained in:
yenminh269
commit
2d7637ebcf
21 changed files with 133 additions and 180 deletions
4
src/features/gemini/gemini.js
Normal file
4
src/features/gemini/gemini.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import { createPartFromUri, GoogleGenAI } from "@google/genai"
|
||||
import 'dotenv/config'
|
||||
|
||||
const ai = new GoogleGenAI({ apiKey: ${} })
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"name": "codered-astra",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
|
|
|
|||
BIN
web-app/public/pdfs/SRHB.pdf
Normal file
BIN
web-app/public/pdfs/SRHB.pdf
Normal file
Binary file not shown.
BIN
web-app/public/pdfs/falcon-users-guide-2025-05-09.pdf
Normal file
BIN
web-app/public/pdfs/falcon-users-guide-2025-05-09.pdf
Normal file
Binary file not shown.
BIN
web-app/public/pdfs/spacex-falcon-9-data-sheet.pdf
Normal file
BIN
web-app/public/pdfs/spacex-falcon-9-data-sheet.pdf
Normal file
Binary file not shown.
BIN
web-app/public/pdfs/system-safety-handbook.pdf
Normal file
BIN
web-app/public/pdfs/system-safety-handbook.pdf
Normal file
Binary file not shown.
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -3,7 +3,7 @@ import ChatLayout from "src/components/layouts/chat-layout";
|
|||
|
||||
function App() {
|
||||
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 />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default function ChatLayout() {
|
|||
}
|
||||
|
||||
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 />
|
||||
<ChatWindow messages={messages} />
|
||||
<MessageInput onSend={handleSend} />
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
import './ActionButton.css';
|
||||
|
||||
export default function ActionButton({
|
||||
onClick,
|
||||
children,
|
||||
type = 'add', // 'add' or 'delete' or 'send'
|
||||
...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>
|
||||
),
|
||||
},
|
||||
submit: {
|
||||
color: '#3949AB',
|
||||
svg: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send-icon lucide-send"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
const { color, svg } = config[type] || config.add;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="action-btn"
|
||||
style={{ '--btn-color': color }}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{svg}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
9
web-app/src/components/ui/button/delete-button.jsx
Normal file
9
web-app/src/components/ui/button/delete-button.jsx
Normal 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
10
web-app/src/components/ui/button/down-button.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,46 +1,11 @@
|
|||
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 (
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<ActionButton type="add" onClick={handleNewChat}>
|
||||
New Chat
|
||||
</ActionButton>
|
||||
<ActionButton type="delete" onClick={handleDeleteChat}>
|
||||
Delete Chat
|
||||
</ActionButton>
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ function MessageBubble({ message }) {
|
|||
const isUser = message.role === "user";
|
||||
return (
|
||||
<div
|
||||
className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-2`}
|
||||
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-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>
|
||||
|
|
@ -16,22 +16,13 @@ function MessageBubble({ message }) {
|
|||
}
|
||||
|
||||
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">
|
||||
<div className="flex-1 overflow-auto p-2">
|
||||
<div className="">
|
||||
{messages.map((m, i) => (
|
||||
<MessageBubble key={i} message={m} />
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import React, { useState } from "react";
|
||||
import ActionButton from "../Button/ActionButton";
|
||||
import DeleteButton from "src/components/ui/button/delete-button";
|
||||
import DownButton from "../button/down-button";
|
||||
|
||||
export default function MessageInput({ onSend }) {
|
||||
const [text, setText] = useState("");
|
||||
|
||||
|
|
@ -11,17 +13,27 @@ export default function MessageInput({ onSend }) {
|
|||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="p-3 bg-slate-900">
|
||||
<div className="flex gap-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex justify-between">
|
||||
<DeleteButton></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 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"
|
||||
className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
|
||||
/>
|
||||
<ActionButton children="Send" type="submit"></ActionButton>
|
||||
|
||||
<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
65
web-app/src/features/gemini/gemini.js
Normal 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()
|
||||
|
||||
|
|
@ -1,19 +1,16 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import "tailwindcss";
|
||||
|
||||
: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;
|
||||
.dark {
|
||||
--paragraph: 235, 236, 239;
|
||||
--background: 15, 16, 26;
|
||||
--primary: 158, 166, 214;
|
||||
--secondary: 35, 50, 133;
|
||||
--accent: 52, 75, 223;
|
||||
background: rgba(var(--background));
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: rgb(var(--color-background));
|
||||
color: rgb(var(--color-paragraph));
|
||||
font-family:
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue