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:
|
services:
|
||||||
web-app:
|
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
|
restart: always
|
||||||
ports:
|
ports:
|
||||||
- "127.0.0.1:3033:3000"
|
- "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 ChatHeader from "src/components/ui/chat/chat-header";
|
||||||
import ChatWindow from "src/components/ui/chat/chat-window";
|
import ChatWindow from "src/components/ui/chat/chat-window";
|
||||||
import MessageInput from "src/components/ui/chat/message-input";
|
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() {
|
export default function ChatLayout() {
|
||||||
const [messages, setMessages] = useState([
|
const [messages, setMessages] = useState([
|
||||||
|
|
@ -11,21 +25,13 @@ export default function ChatLayout() {
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
function addMessage(role, content) {
|
async function handleSend(text) {
|
||||||
const msg = { role, content };
|
|
||||||
setMessages((s) => [...s, msg]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSend(text) {
|
|
||||||
const userMsg = { role: "user", content: text };
|
const userMsg = { role: "user", content: text };
|
||||||
|
userInput.push(text);
|
||||||
|
const res = await AIResponse(userInput);
|
||||||
setMessages((s) => [...s, userMsg]);
|
setMessages((s) => [...s, userMsg]);
|
||||||
|
|
||||||
// fake assistant reply after short delay
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setMessages((s) => [
|
setMessages((s) => [...s, { role: "assistant", content: res }]);
|
||||||
...s,
|
|
||||||
{ role: "assistant", content: `You said: ${text}` },
|
|
||||||
]);
|
|
||||||
}, 600);
|
}, 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">
|
<div className="flex flex-col flex-start w-full max-w-3xl gap-4 p-4">
|
||||||
<ChatHeader />
|
<ChatHeader />
|
||||||
<ChatWindow messages={messages} />
|
<ChatWindow messages={messages} />
|
||||||
<MessageInput
|
<MessageInput onSend={handleSend} onDeleteAll={handleDeleteAll} />
|
||||||
onSend={handleSend}
|
|
||||||
onMessage={addMessage}
|
|
||||||
onDeleteAll={handleDeleteAll}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ export default function DownButton({ onClick }) {
|
||||||
return (
|
return (
|
||||||
<motion.button
|
<motion.button
|
||||||
onClick={handleClick}
|
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 }}
|
whileHover={{ scale: 1.1 }}
|
||||||
whileTap={{ scale: 0.9 }}
|
whileTap={{ scale: 0.9 }}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import { motion } from "motion/react";
|
||||||
import { Rocket } from "lucide-react";
|
import { Rocket } from "lucide-react";
|
||||||
import DeleteButton from "src/components/ui/button/delete-button";
|
import DeleteButton from "src/components/ui/button/delete-button";
|
||||||
import SchematicButton from "../button/schematic-button";
|
import SchematicButton from "../button/schematic-button";
|
||||||
|
import FileList from "../file/file-list";
|
||||||
|
|
||||||
export default function ChatHeader({ title = "Title of Chat" }) {
|
export default function ChatHeader({ title = "Title of Chat" }) {
|
||||||
const isDebug = useMemo(() => {
|
const isDebug = useMemo(() => {
|
||||||
|
|
@ -17,7 +18,9 @@ export default function ChatHeader({ title = "Title of Chat" }) {
|
||||||
setIngesting(true);
|
setIngesting(true);
|
||||||
const res = await fetch("/api/files/import-demo", { method: "POST" });
|
const res = await fetch("/api/files/import-demo", { method: "POST" });
|
||||||
const json = await res.json().catch(() => ({}));
|
const json = await res.json().catch(() => ({}));
|
||||||
setToast(`Imported: ${json.imported ?? "?"}, Skipped: ${json.skipped ?? "?"}`);
|
setToast(
|
||||||
|
`Imported: ${json.imported ?? "?"}, Skipped: ${json.skipped ?? "?"}`
|
||||||
|
);
|
||||||
setTimeout(() => setToast(""), 4000);
|
setTimeout(() => setToast(""), 4000);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setToast("Import failed");
|
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">
|
<header className="text-slate-100 fixed top-4 max-w-3xl w-full px-4">
|
||||||
<div className="flex justify-between items-center gap-4">
|
<div className="flex justify-between items-center gap-4">
|
||||||
<SchematicButton />
|
<SchematicButton />
|
||||||
<div className="flex items-center gap-3">
|
<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">
|
<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}
|
{title}
|
||||||
</h1>
|
</h1>
|
||||||
<DeleteButton />
|
<DeleteButton />
|
||||||
{isDebug && (
|
{isDebug && (
|
||||||
<motion.button
|
<motion.button
|
||||||
onClick={triggerDemoIngest}
|
onClick={triggerDemoIngest}
|
||||||
className="bg-gray-800 border-2 border-gray-700 rounded-xl px-3 py-2 flex items-center gap-2"
|
className="bg-gray-800 border-2 border-gray-700 rounded-xl px-3 py-2 flex items-center gap-2"
|
||||||
whileHover={{ scale: 1.05 }}
|
whileHover={{ scale: 1.05 }}
|
||||||
whileTap={{ scale: 0.95 }}
|
whileTap={{ scale: 0.95 }}
|
||||||
disabled={ingesting}
|
disabled={ingesting}
|
||||||
>
|
>
|
||||||
<Rocket size={16} />
|
<Rocket size={16} />
|
||||||
{ingesting ? "Seeding…" : "Seed Demo Data"}
|
{ingesting ? "Seeding…" : "Seed Demo Data"}
|
||||||
</motion.button>
|
</motion.button>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{toast && (
|
{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">
|
<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 { motion } from "motion/react";
|
||||||
import { BotMessageSquare } from "lucide-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 [text, setText] = useState("");
|
||||||
const textareaRef = useRef(null);
|
const textareaRef = useRef(null);
|
||||||
|
|
||||||
|
|
@ -13,53 +17,10 @@ export default function MessageInput({ onSend, onMessage }) {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
async function handleSubmit(e) {
|
async function handleSubmit(e) {
|
||||||
e.preventDefault();
|
|
||||||
if (!text.trim()) return;
|
|
||||||
|
|
||||||
// send user message locally
|
// send user message locally
|
||||||
|
e.preventDefault();
|
||||||
|
if (text.trim() === "") return;
|
||||||
onSend(text.trim());
|
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("");
|
setText("");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -67,7 +28,12 @@ export default function MessageInput({ onSend, onMessage }) {
|
||||||
<div className="w-full flex justify-center">
|
<div className="w-full flex justify-center">
|
||||||
<footer className="fixed bottom-6 max-w-3xl w-full px-4">
|
<footer className="fixed bottom-6 max-w-3xl w-full px-4">
|
||||||
<div className="flex flex-col gap-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
|
<form
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
className="bg-gray-900 rounded-2xl border-2 border-gray-800 shadow-lg shadow-indigo-600"
|
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 { createRoot } from "react-dom/client";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
import App from "./app/index.jsx";
|
import App from "./app/index.jsx";
|
||||||
|
|
||||||
createRoot(document.getElementById("root")).render(
|
createRoot(document.getElementById("root")).render(<App />);
|
||||||
<StrictMode>
|
|
||||||
<App />
|
|
||||||
</StrictMode>
|
|
||||||
);
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue