add gemini back
This commit is contained in:
parent
eb48d61dcf
commit
c993b3e048
6 changed files with 56 additions and 91 deletions
|
|
@ -1,6 +1,6 @@
|
|||
services:
|
||||
web-app:
|
||||
image: ghcr.io/${REPO_NAME_LOWER}/web-app:${IMAGE_TAG}
|
||||
image: ghcr.io/${REPO_NAME_LOWER}/fallback-web-app:${IMAGE_TAG}
|
||||
restart: always
|
||||
ports:
|
||||
- "127.0.0.1:3033:3000"
|
||||
|
|
|
|||
|
|
@ -2,6 +2,20 @@ 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 { GoogleGenAI } from "@google/genai";
|
||||
|
||||
let userInput = [];
|
||||
|
||||
const ai = new GoogleGenAI({ apiKey: import.meta.env.GEMINI_API_KEY });
|
||||
|
||||
async function AIResponse(userInputArray) {
|
||||
const response = await ai.models.generateContent({
|
||||
model: "gemini-2.5-flash",
|
||||
contents: userInputArray,
|
||||
});
|
||||
|
||||
return response.text;
|
||||
}
|
||||
|
||||
export default function ChatLayout() {
|
||||
const [messages, setMessages] = useState([
|
||||
|
|
@ -11,21 +25,13 @@ export default function ChatLayout() {
|
|||
},
|
||||
]);
|
||||
|
||||
function addMessage(role, content) {
|
||||
const msg = { role, content };
|
||||
setMessages((s) => [...s, msg]);
|
||||
}
|
||||
|
||||
function handleSend(text) {
|
||||
async function handleSend(text) {
|
||||
const userMsg = { role: "user", content: text };
|
||||
userInput.push(text);
|
||||
const res = await AIResponse(userInput);
|
||||
setMessages((s) => [...s, userMsg]);
|
||||
|
||||
// fake assistant reply after short delay
|
||||
setTimeout(() => {
|
||||
setMessages((s) => [
|
||||
...s,
|
||||
{ role: "assistant", content: `You said: ${text}` },
|
||||
]);
|
||||
setMessages((s) => [...s, { role: "assistant", content: res }]);
|
||||
}, 600);
|
||||
}
|
||||
|
||||
|
|
@ -38,11 +44,7 @@ export default function ChatLayout() {
|
|||
<div className="flex flex-col flex-start w-full max-w-3xl gap-4 p-4">
|
||||
<ChatHeader />
|
||||
<ChatWindow messages={messages} />
|
||||
<MessageInput
|
||||
onSend={handleSend}
|
||||
onMessage={addMessage}
|
||||
onDeleteAll={handleDeleteAll}
|
||||
/>
|
||||
<MessageInput onSend={handleSend} onDeleteAll={handleDeleteAll} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default function DownButton({ onClick }) {
|
|||
return (
|
||||
<motion.button
|
||||
onClick={handleClick}
|
||||
className="bg-gray-700 p-2 rounded-2xl file-input border-2 border-gray-600 size-10"
|
||||
className="bg-gray-700 p-2 rounded-2xl file-input border-2 border-gray-600"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { motion } from "motion/react";
|
|||
import { Rocket } from "lucide-react";
|
||||
import DeleteButton from "src/components/ui/button/delete-button";
|
||||
import SchematicButton from "../button/schematic-button";
|
||||
import FileList from "../file/file-list";
|
||||
|
||||
export default function ChatHeader({ title = "Title of Chat" }) {
|
||||
const isDebug = useMemo(() => {
|
||||
|
|
@ -17,7 +18,9 @@ export default function ChatHeader({ title = "Title of Chat" }) {
|
|||
setIngesting(true);
|
||||
const res = await fetch("/api/files/import-demo", { method: "POST" });
|
||||
const json = await res.json().catch(() => ({}));
|
||||
setToast(`Imported: ${json.imported ?? "?"}, Skipped: ${json.skipped ?? "?"}`);
|
||||
setToast(
|
||||
`Imported: ${json.imported ?? "?"}, Skipped: ${json.skipped ?? "?"}`
|
||||
);
|
||||
setTimeout(() => setToast(""), 4000);
|
||||
} catch (e) {
|
||||
setToast("Import failed");
|
||||
|
|
@ -32,24 +35,23 @@ export default function ChatHeader({ title = "Title of Chat" }) {
|
|||
<header className="text-slate-100 fixed top-4 max-w-3xl w-full px-4">
|
||||
<div className="flex justify-between items-center gap-4">
|
||||
<SchematicButton />
|
||||
<div className="flex items-center gap-3">
|
||||
<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>
|
||||
<DeleteButton />
|
||||
{isDebug && (
|
||||
<motion.button
|
||||
onClick={triggerDemoIngest}
|
||||
className="bg-gray-800 border-2 border-gray-700 rounded-xl px-3 py-2 flex items-center gap-2"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
disabled={ingesting}
|
||||
>
|
||||
<Rocket size={16} />
|
||||
{ingesting ? "Seeding…" : "Seed Demo Data"}
|
||||
</motion.button>
|
||||
)}
|
||||
</div>
|
||||
<FileList />
|
||||
<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>
|
||||
<DeleteButton />
|
||||
{isDebug && (
|
||||
<motion.button
|
||||
onClick={triggerDemoIngest}
|
||||
className="bg-gray-800 border-2 border-gray-700 rounded-xl px-3 py-2 flex items-center gap-2"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
disabled={ingesting}
|
||||
>
|
||||
<Rocket size={16} />
|
||||
{ingesting ? "Seeding…" : "Seed Demo Data"}
|
||||
</motion.button>
|
||||
)}
|
||||
</div>
|
||||
{toast && (
|
||||
<div className="mt-2 text-xs text-slate-300 bg-gray-800/80 border border-gray-700 rounded px-2 py-1 inline-block">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@ import DownButton from "src/components/ui/button/down-button";
|
|||
import { motion } from "motion/react";
|
||||
import { BotMessageSquare } from "lucide-react";
|
||||
|
||||
export default function MessageInput({ onSend, onMessage }) {
|
||||
import { GoogleGenAI } from "@google/genai";
|
||||
|
||||
const ai = new GoogleGenAI({ apiKey: import.meta.env.GEMINI_API_KEY });
|
||||
|
||||
export default function MessageInput({ onSend }) {
|
||||
const [text, setText] = useState("");
|
||||
const textareaRef = useRef(null);
|
||||
|
||||
|
|
@ -13,53 +17,10 @@ export default function MessageInput({ onSend, onMessage }) {
|
|||
}, []);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!text.trim()) return;
|
||||
|
||||
// send user message locally
|
||||
e.preventDefault();
|
||||
if (text.trim() === "") return;
|
||||
onSend(text.trim());
|
||||
|
||||
// create query on backend
|
||||
try {
|
||||
if (onMessage)
|
||||
onMessage("assistant", "Queued: sending request to server...");
|
||||
const createRes = await fetch(`/api/query/create`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ q: text, top_k: 5 }),
|
||||
});
|
||||
const createJson = await createRes.json();
|
||||
const id = createJson.id;
|
||||
if (!id) throw new Error("no id returned");
|
||||
|
||||
// poll status
|
||||
let status = "Queued";
|
||||
if (onMessage) onMessage("assistant", `Status: ${status}`);
|
||||
while (status !== "Completed" && status !== "Failed") {
|
||||
await new Promise((r) => setTimeout(r, 1000));
|
||||
const sRes = await fetch(`/api/query/status?id=${id}`);
|
||||
const sJson = await sRes.json();
|
||||
status = sJson.status;
|
||||
if (onMessage) onMessage("assistant", `Status: ${status}`);
|
||||
if (status === "Cancelled") break;
|
||||
}
|
||||
|
||||
if (status === "Completed") {
|
||||
const resultRes = await fetch(`/api/query/result?id=${id}`);
|
||||
const resultJson = await resultRes.json();
|
||||
const final =
|
||||
resultJson?.result?.final_answer ||
|
||||
JSON.stringify(resultJson?.result || {});
|
||||
if (onMessage) onMessage("assistant", final);
|
||||
} else {
|
||||
if (onMessage)
|
||||
onMessage("assistant", `Query status ended as: ${status}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
if (onMessage) onMessage("assistant", `Error: ${err.message}`);
|
||||
}
|
||||
|
||||
setText("");
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +28,12 @@ export default function MessageInput({ onSend, onMessage }) {
|
|||
<div className="w-full flex justify-center">
|
||||
<footer className="fixed bottom-6 max-w-3xl w-full px-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<DownButton></DownButton>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<DownButton />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-gray-900 rounded-2xl border-2 border-gray-800 shadow-lg shadow-indigo-600"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
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>
|
||||
);
|
||||
createRoot(document.getElementById("root")).render(<App />);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue