Skip to content

S
Son Of Anton
Commit 6c7a9b6e authored by AGLANPC\aglan's avatar AGLANPC\aglan
Browse files
Options

ttttt

parent faa34a43
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1908 additions and 1129 deletions
frontend/src/App.jsx
View file @ 6c7a9b6e
import React, { useEffect } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { AppProvider, useApp } from "./store";
import React, { useEffect, useState } from "react";
import { Routes, Route } from "react-router-dom";
import { useApp } from "./store";
import { getMe } from "./api";
import * as streamManager from "./streamManager";
import LoginPage from "./pages/LoginPage";
import ChatPage from "./pages/ChatPage";
import AdminPage from "./pages/AdminPage";
import KnowledgePage from "./pages/KnowledgePage";
import GitLabPage from "./pages/GitLabPage";
import { Flame } from "lucide-react";
function AuthGate({ children }) {
export default function App() {
const { state, dispatch } = useApp();
const [authChecked, setAuthChecked] = useState(!state.token);
useEffect(() => { streamManager.setDispatch(dispatch); }, [dispatch]);
useEffect(() => {
if (state.token && !state.user) {
getMe(state.token)
.then((user) => dispatch({ type: "SET_USER", user }))
.catch(() => dispatch({ type: "LOGOUT" }));
}
if (!state.token) { setAuthChecked(true); return; }
if (state.user) { setAuthChecked(true); return; }
(async () => {
try {
const user = await getMe(state.token);
dispatch({ type: "SET_USER", user });
} catch { dispatch({ type: "LOGOUT" }); }
finally { setAuthChecked(true); }
})();
}, [state.token, state.user, dispatch]);
if (!state.token) return <LoginPage />;
if (!state.user) {
if (!authChecked) {
return (
<div className="h-screen flex items-center justify-center bg-anton-bg">
<div className="flex items-center gap-3 text-anton-muted">
<div className="w-5 h-5 border-2 border-anton-accent border-t-transparent rounded-full animate-spin" />
Loading...
<div className="h-dvh flex items-center justify-center bg-anton-bg">
<div className="flex flex-col items-center gap-4 animate-fade-in">
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-anton-accent to-red-600 flex items-center justify-center shadow-lg shadow-anton-accent/20">
<Flame size={32} className="text-white animate-pulse" />
</div>
<p className="text-anton-muted text-sm">Loading...</p>
</div>
</div>
);
}
return children;
}
function AppRoutes() {
return (
<AuthGate>
<Routes>
<Route path="/" element={<ChatPage />} />
<Route path="/chat/:chatId" element={<ChatPage />} />
<Route path="/admin" element={<AdminPage />} />
<Route path="/knowledge" element={<KnowledgePage />} />
<Route path="/gitlab" element={<GitLabPage />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</AuthGate>
);
}
if (!state.token) return <LoginPage />;
export default function App() {
return (
<AppProvider>
<BrowserRouter>
<AppRoutes />
</BrowserRouter>
</AppProvider>
<Routes>
<Route path="/admin" element={<AdminPage />} />
<Route path="/knowledge" element={<KnowledgePage />} />
<Route path="/gitlab" element={<GitLabPage />} />
<Route path="/*" element={<ChatPage />} />
</Routes>
);
}
\ No newline at end of file
frontend/src/api.js
View file @ 6c7a9b6e
This diff is collapsed.
frontend/src/components/ChatView.jsx
View file @ 6c7a9b6e
This diff is collapsed.
frontend/src/components/CodeBlock.jsx
View file @ 6c7a9b6e
import React, { useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
import { Copy, Check, Download, FileCode } from "lucide-react";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
import { Copy, Check, Download, GitBranch, Loader2, CheckCircle2, XCircle } from "lucide-react";
import { gitlabFileExists, gitlabCommitSingle } from "../api";
export default function CodeBlock({ language, filename, code }) {
const COMMIT_STATES = { idle: "idle", checking: "checking", committing: "committing", success: "success", error: "error" };
export default function CodeBlock({ language, filename, code, linkedRepo, token }) {
const [copied, setCopied] = useState(false);
const [commitState, setCommitState] = useState(COMMIT_STATES.idle);
const [commitMsg, setCommitMsg] = useState("");
const [commitError, setCommitError] = useState("");
const [showCommitForm, setShowCommitForm] = useState(false);
function handleCopy() {
navigator.clipboard.writeText(code);
......@@ -22,33 +29,120 @@ export default function CodeBlock({ language, filename, code }) {
URL.revokeObjectURL(url);
}
function toggleCommitForm() {
if (!showCommitForm) {
setCommitMsg(`Update ${filename || "file"} via Son of Anton`);
setCommitError("");
setCommitState(COMMIT_STATES.idle);
}
setShowCommitForm(!showCommitForm);
}
async function handleCommit() {
if (!linkedRepo || !token || !filename) return;
setCommitState(COMMIT_STATES.checking);
setCommitError("");
try {
const exists = await gitlabFileExists(token, linkedRepo.id, filename, linkedRepo.default_branch);
const action = exists ? "update" : "create";
setCommitState(COMMIT_STATES.committing);
await gitlabCommitSingle(token, linkedRepo.id, {
branch: linkedRepo.default_branch,
file_path: filename,
content: code,
commit_message: commitMsg || `${action === "create" ? "Create" : "Update"} ${filename} via Son of Anton`,
action,
});
setCommitState(COMMIT_STATES.success);
setTimeout(() => { setCommitState(COMMIT_STATES.idle); setShowCommitForm(false); }, 2500);
} catch (err) {
setCommitState(COMMIT_STATES.error);
setCommitError(err.message || "Commit failed");
}
}
const canCommit = linkedRepo && filename && token;
return (
<div className="my-3 rounded-xl overflow-hidden border border-anton-border bg-[#1a1b26]">
<div className="flex items-center justify-between px-4 py-2 bg-anton-card border-b border-anton-border">
<div className="flex items-center gap-2">
<FileCode size={13} className="text-anton-accent" />
{filename && <span className="text-xs text-white font-mono">{filename}</span>}
{language && !filename && <span className="text-xs text-anton-muted font-mono">{language}</span>}
</div>
<div className="flex items-center gap-1">
<button onClick={handleCopy}
className="flex items-center gap-1 px-2 py-1 text-[10px] text-anton-muted hover:text-white rounded transition">
{copied ? <Check size={11} className="text-green-400" /> : <Copy size={11} />}
{copied ? "Copied" : "Copy"}
</button>
<div className="rounded-lg overflow-hidden border border-anton-border my-3">
{/* Header */}
<div className="flex items-center justify-between bg-[#1e1e2e] px-3 py-2 gap-2">
<span className="text-xs text-anton-muted font-mono truncate min-w-0">
{filename || language || "code"}
</span>
<div className="flex items-center gap-1 shrink-0">
{canCommit && (
<button onClick={toggleCommitForm} title="Commit to repo"
className={`flex items-center gap-1 px-2 py-1 rounded text-[11px] font-medium transition ${showCommitForm
? "bg-green-500/20 text-green-400"
: "text-anton-muted hover:text-green-400 hover:bg-green-500/10"
}`}>
<GitBranch size={12} />
<span className="hidden sm:inline">Push</span>
</button>
)}
{filename && (
<button onClick={handleDownload}
className="flex items-center gap-1 px-2 py-1 text-[10px] text-anton-muted hover:text-white rounded transition">
<Download size={11} /> Save
<button onClick={handleDownload} title="Download file"
className="p-1.5 rounded text-anton-muted hover:text-white hover:bg-white/5 transition">
<Download size={13} />
</button>
)}
<button onClick={handleCopy} title="Copy code"
className="p-1.5 rounded text-anton-muted hover:text-white hover:bg-white/5 transition">
{copied ? <Check size={13} className="text-green-400" /> : <Copy size={13} />}
</button>
</div>
</div>
{/* Commit Form */}
{showCommitForm && canCommit && (
<div className="bg-[#16162a] border-b border-anton-border px-3 py-2.5 space-y-2 animate-fade-in">
<div className="flex items-center gap-2 text-[11px]">
<span className="text-anton-muted">Repo:</span>
<span className="text-green-400 font-mono">{linkedRepo.name}</span>
<span className="text-anton-muted">→</span>
<span className="text-blue-400 font-mono">{linkedRepo.default_branch}</span>
</div>
<input
type="text" value={commitMsg}
onChange={(e) => setCommitMsg(e.target.value)}
placeholder="Commit message..."
className="w-full bg-anton-bg border border-anton-border rounded px-2.5 py-1.5 text-xs text-white placeholder-anton-muted focus:outline-none focus:border-green-500/50"
/>
<div className="flex items-center gap-2">
<button onClick={handleCommit}
disabled={commitState === COMMIT_STATES.checking || commitState === COMMIT_STATES.committing}
className="flex items-center gap-1.5 px-3 py-1.5 rounded bg-green-600 hover:bg-green-500 text-white text-xs font-medium transition disabled:opacity-50 disabled:cursor-not-allowed">
{commitState === COMMIT_STATES.checking && <><Loader2 size={12} className="animate-spin" /> Checking...</>}
{commitState === COMMIT_STATES.committing && <><Loader2 size={12} className="animate-spin" /> Committing...</>}
{commitState === COMMIT_STATES.success && <><CheckCircle2 size={12} /> Committed!</>}
{commitState === COMMIT_STATES.error && <><XCircle size={12} /> Retry</>}
{commitState === COMMIT_STATES.idle && <><GitBranch size={12} /> Commit</>}
</button>
<button onClick={toggleCommitForm} className="px-3 py-1.5 rounded text-xs text-anton-muted hover:text-white transition">
Cancel
</button>
{commitState === COMMIT_STATES.success && (
<span className="text-[11px] text-green-400">✓ Pushed to {linkedRepo.default_branch}</span>
)}
</div>
{commitError && (
<div className="text-[11px] text-red-400 bg-red-500/10 rounded px-2 py-1">{commitError}</div>
)}
</div>
)}
{/* Code */}
<SyntaxHighlighter
language={language || "text"}
style={oneDark}
customStyle={{ margin: 0, padding: "1rem", background: "transparent", fontSize: "0.8rem" }}
wrapLongLines>
style={vscDarkPlus}
customStyle={{ margin: 0, padding: "1rem", fontSize: "0.8rem", background: "#1a1a2e", maxHeight: "500px" }}
showLineNumbers
lineNumberStyle={{ minWidth: "2.5em", paddingRight: "1em", color: "#555" }}
>
{code}
</SyntaxHighlighter>
</div>
......
frontend/src/components/MessageBubble.jsx
View file @ 6c7a9b6e
......@@ -8,9 +8,11 @@ import {
Image, Film, FileText, ExternalLink,
} from "lucide-react";
const FILE_TYPE_ICONS = { image: Image, video: Film, document: FileText, text: FileText };
const FILE_TYPE_ICONS = {
image: Image, video: Film, document: FileText, text: FileText,
};
const MessageBubble = React.memo(function MessageBubble({ message, isStreaming, isThinking, token }) {
const MessageBubble = React.memo(function MessageBubble({ message, isStreaming, isThinking, token, linkedRepo }) {
const { role, content, thinking_content, input_tokens, output_tokens, attachments } = message;
const isUser = role === "user";
const [showThinking, setShowThinking] = useState(false);
......@@ -34,6 +36,7 @@ const MessageBubble = React.memo(function MessageBubble({ message, isStreaming,
</div>
</div>
)}
<div className={`max-w-[80%] ${isUser ? "order-first" : ""}`}>
{thinking_content && (
<div className="mb-2">
......@@ -51,6 +54,7 @@ const MessageBubble = React.memo(function MessageBubble({ message, isStreaming,
)}
</div>
)}
{hasAttachments && (
<div className="mb-2 flex flex-wrap gap-2">
{attachments.map((att) => {
......@@ -90,7 +94,9 @@ const MessageBubble = React.memo(function MessageBubble({ message, isStreaming,
})}
</div>
)}
<div className={`rounded-2xl px-4 py-3 ${isUser ? "bg-anton-accent text-white rounded-br-md" : "bg-anton-card border border-anton-border rounded-bl-md"}`}>
<div className={`rounded-2xl px-4 py-3 ${isUser ? "bg-anton-accent text-white rounded-br-md" : "bg-anton-card border border-anton-border rounded-bl-md"
}`}>
{isUser ? (
<div className="text-sm whitespace-pre-wrap">{_stripPrefixes(content)}</div>
) : (
......@@ -106,7 +112,15 @@ const MessageBubble = React.memo(function MessageBubble({ message, isStreaming,
lang = rawLang.slice(0, idx);
filename = rawLang.slice(idx + 1);
}
return <CodeBlock language={lang} filename={filename} code={String(children).replace(/\n$/, "")} />;
return (
<CodeBlock
language={lang}
filename={filename}
code={String(children).replace(/\n$/, "")}
linkedRepo={linkedRepo}
token={token}
/>
);
},
pre({ children }) { return <>{children}</>; },
}}>
......@@ -118,6 +132,7 @@ const MessageBubble = React.memo(function MessageBubble({ message, isStreaming,
</div>
)}
</div>
{!isUser && !isStreaming && content && (
<div className="flex items-center gap-3 mt-1.5 px-1">
<button onClick={handleCopy} className="flex items-center gap-1 text-[11px] text-anton-muted hover:text-white transition">
......@@ -132,6 +147,7 @@ const MessageBubble = React.memo(function MessageBubble({ message, isStreaming,
</div>
)}
</div>
{isUser && (
<div className="shrink-0 mt-1">
<div className="w-8 h-8 rounded-lg bg-anton-card border border-anton-border flex items-center justify-center">
......
frontend/src/components/Sidebar.jsx
View file @ 6c7a9b6e
This diff is collapsed.
frontend/src/index.css
View file @ 6c7a9b6e
This diff is collapsed.
frontend/src/main.jsx
View file @ 6c7a9b6e
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { AppProvider } from "./store";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
<BrowserRouter>
<AppProvider>
<App />
</AppProvider>
</BrowserRouter>
</React.StrictMode>
);
\ No newline at end of file
frontend/src/pages/AdminPage.jsx
View file @ 6c7a9b6e
This diff is collapsed.
frontend/src/pages/ChatPage.jsx
View file @ 6c7a9b6e
import React, { useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useApp } from "../store";
import { listChats } from "../api";
import { listChats, createChat } from "../api";
import Sidebar from "../components/Sidebar";
import ChatView from "../components/ChatView";
import { Flame } from "lucide-react";
import { Flame, Menu, Plus, MessageSquare } from "lucide-react";
export default function ChatPage() {
const { chatId } = useParams();
const navigate = useNavigate();
const { state, dispatch } = useApp();
useEffect(() => {
listChats(state.token)
.then((chats) => dispatch({ type: "SET_CHATS", chats }))
.catch(() => {});
}, [state.token, dispatch]);
(async () => {
try {
const chats = await listChats(state.token);
dispatch({ type: "SET_CHATS", chats });
if (!state.activeChatId && chats.length > 0) {
dispatch({ type: "SET_ACTIVE_CHAT", chatId: chats[0].id });
}
} catch { /* ignore */ }
})();
}, [state.token]);
function onSelectChat(id) {
if (id) {
navigate(`/chat/${id}`);
} else {
navigate("/");
}
async function handleNewChat() {
try {
const chat = await createChat(state.token);
dispatch({ type: "ADD_CHAT", chat });
} catch { /* ignore */ }
}
return (
<div className="h-screen flex overflow-hidden bg-anton-bg">
<Sidebar activeChatId={chatId} onSelectChat={onSelectChat} />
<div className="flex-1 flex flex-col min-h-0">
{chatId ? (
<ChatView chatId={chatId} />
<div className="h-full h-dvh flex overflow-hidden bg-anton-bg">
{/* Desktop sidebar */}
<div className="hidden sm:flex">
<Sidebar />
</div>
{/* Mobile sidebar overlay */}
{state.sidebarOpen && (
<>
<div
className="sm:hidden fixed inset-0 z-40 bg-black/60 animate-overlay-in"
onClick={() => dispatch({ type: "SET_SIDEBAR_OPEN", open: false })}
/>
<div className="sm:hidden fixed inset-y-0 left-0 z-50 w-[280px] animate-slide-in safe-top safe-bottom">
<Sidebar mobile onClose={() => dispatch({ type: "SET_SIDEBAR_OPEN", open: false })} />
</div>
</>
)}
{/* Main content */}
<div className="flex-1 flex flex-col min-w-0">
{/* Mobile header */}
<div className="sm:hidden flex items-center gap-2 px-3 py-2.5 border-b border-anton-border bg-anton-surface safe-top">
<button
onClick={() => dispatch({ type: "TOGGLE_SIDEBAR" })}
className="p-2 -ml-1 rounded-lg text-anton-muted hover:text-white hover:bg-anton-card transition active:scale-95"
>
<Menu size={20} />
</button>
<div className="flex-1 min-w-0 flex items-center gap-2">
<div className="w-6 h-6 rounded-md bg-gradient-to-br from-anton-accent to-red-600 flex items-center justify-center shrink-0">
<Flame size={12} className="text-white" />
</div>
<span className="text-sm font-medium text-white truncate">
{state.chats.find((c) => c.id === state.activeChatId)?.title || "Son of Anton"}
</span>
</div>
<button
onClick={handleNewChat}
className="p-2 -mr-1 rounded-lg text-anton-muted hover:text-white hover:bg-anton-card transition active:scale-95"
>
<Plus size={20} />
</button>
</div>
{/* Chat or empty state */}
{state.activeChatId ? (
<ChatView chatId={state.activeChatId} />
) : (
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-anton-accent to-red-600 flex items-center justify-center mx-auto mb-4 shadow-lg shadow-anton-accent/20">
<div className="flex-1 flex items-center justify-center p-6">
<div className="text-center max-w-sm">
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-anton-accent to-red-600 flex items-center justify-center shadow-lg shadow-anton-accent/20">
<Flame size={32} className="text-white" />
</div>
<h2 className="text-xl font-bold text-white mb-2">Son of Anton</h2>
<p className="text-anton-muted text-sm">Select a chat or create a new one</p>
<p className="text-anton-muted text-sm mb-6">
Avatar of All Elements of Code
</p>
<button
onClick={handleNewChat}
className="inline-flex items-center gap-2 px-5 py-3 bg-anton-accent text-white rounded-xl font-medium hover:opacity-90 transition active:scale-95"
>
<MessageSquare size={18} /> Start a conversation
</button>
</div>
</div>
)}
......
frontend/src/pages/GitLabPage.jsx
View file @ 6c7a9b6e
This diff is collapsed.
frontend/src/pages/KnowledgePage.jsx
View file @ 6c7a9b6e
This diff is collapsed.
frontend/src/pages/LoginPage.jsx
View file @ 6c7a9b6e
import React, { useState } from "react";
import { useApp } from "../store";
import { login, register } from "../api";
import { Flame, LogIn, UserPlus } from "lucide-react";
import { Flame, Eye, EyeOff, Loader2 } from "lucide-react";
export default function LoginPage() {
const { dispatch } = useApp();
......@@ -9,6 +9,7 @@ export default function LoginPage() {
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [showPw, setShowPw] = useState(false);
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
......@@ -20,55 +21,100 @@ export default function LoginPage() {
const res = isRegister
? await register(username, email, password)
: await login(username, password);
dispatch({ type: "SET_AUTH", token: res.token, user: res.user });
dispatch({ type: "LOGIN", token: res.token, user: res.user });
} catch (err) {
setError(err.message);
setError(err.message || "Authentication failed");
} finally {
setLoading(false);
}
setLoading(false);
}
return (
<div className="h-screen flex items-center justify-center bg-anton-bg">
<div className="w-full max-w-sm mx-4">
<div className="h-full h-dvh flex items-center justify-center bg-anton-bg px-4 safe-top safe-bottom">
<div className="w-full max-w-sm">
{/* Logo */}
<div className="text-center mb-8">
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-anton-accent to-red-600 flex items-center justify-center mx-auto mb-4 shadow-lg shadow-anton-accent/20">
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-anton-accent to-red-600 flex items-center justify-center shadow-lg shadow-anton-accent/20">
<Flame size={32} className="text-white" />
</div>
<h1 className="text-2xl font-bold text-white">Son of Anton</h1>
<p className="text-anton-muted text-sm mt-1">Avatar of All Elements of Code</p>
</div>
<form onSubmit={handleSubmit} className="bg-anton-surface border border-anton-border rounded-2xl p-6 space-y-4">
{error && <div className="bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2 text-red-400 text-xs">{error}</div>}
{/* Form */}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="text-xs text-anton-muted mb-1 block">Username</label>
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} required autoFocus
className="w-full bg-anton-bg border border-anton-border rounded-lg px-3 py-2.5 text-white text-sm focus:outline-none focus:border-anton-accent transition" />
<label className="text-xs text-anton-muted mb-1.5 block">Username</label>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="w-full bg-anton-card border border-anton-border rounded-xl px-4 py-3 text-white focus:outline-none focus:border-anton-accent transition"
placeholder="Enter username"
required
autoComplete="username"
autoCapitalize="off"
/>
</div>
{isRegister && (
<div>
<label className="text-xs text-anton-muted mb-1 block">Email</label>
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required
className="w-full bg-anton-bg border border-anton-border rounded-lg px-3 py-2.5 text-white text-sm focus:outline-none focus:border-anton-accent transition" />
<label className="text-xs text-anton-muted mb-1.5 block">Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full bg-anton-card border border-anton-border rounded-xl px-4 py-3 text-white focus:outline-none focus:border-anton-accent transition"
placeholder="your@email.com"
required
autoComplete="email"
/>
</div>
)}
<div>
<label className="text-xs text-anton-muted mb-1 block">Password</label>
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required
className="w-full bg-anton-bg border border-anton-border rounded-lg px-3 py-2.5 text-white text-sm focus:outline-none focus:border-anton-accent transition" />
<label className="text-xs text-anton-muted mb-1.5 block">Password</label>
<div className="relative">
<input
type={showPw ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full bg-anton-card border border-anton-border rounded-xl px-4 py-3 pr-12 text-white focus:outline-none focus:border-anton-accent transition"
placeholder="••••••••"
required
autoComplete={isRegister ? "new-password" : "current-password"}
/>
<button
type="button"
onClick={() => setShowPw(!showPw)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-anton-muted hover:text-white transition p-1"
>
{showPw ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
</div>
<button type="submit" disabled={loading}
className="w-full flex items-center justify-center gap-2 bg-anton-accent text-white rounded-xl py-2.5 text-sm font-medium hover:opacity-90 transition disabled:opacity-50">
{loading ? (
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
) : isRegister ? (
<><UserPlus size={16} /> Register</>
) : (
<><LogIn size={16} /> Login</>
)}
{error && (
<div className="bg-anton-danger/10 border border-anton-danger/30 text-anton-danger text-sm rounded-lg px-3 py-2.5">
{error}
</div>
)}
<button
type="submit"
disabled={loading}
className="w-full py-3.5 bg-anton-accent text-white rounded-xl font-semibold hover:opacity-90 transition disabled:opacity-50 active:scale-[0.98] flex items-center justify-center gap-2"
>
{loading && <Loader2 size={18} className="animate-spin" />}
{isRegister ? "Create Account" : "Sign In"}
</button>
<button type="button" onClick={() => { setIsRegister(!isRegister); setError(""); }}
className="w-full text-xs text-anton-muted hover:text-white transition text-center">
{isRegister ? "Already have an account? Login" : "Need an account? Register"}
<button
type="button"
onClick={() => { setIsRegister(!isRegister); setError(""); }}
className="w-full text-center text-sm text-anton-muted hover:text-white transition py-2"
>
{isRegister ? "Already have an account? Sign in" : "Need an account? Register"}
</button>
</form>
</div>
......
frontend/src/store.jsx
View file @ 6c7a9b6e
import React, { createContext, useContext, useReducer, useEffect } from "react";
import { setDispatch } from "./streamManager";
import React, { createContext, useContext, useReducer, useCallback } from "react";
const AppContext = createContext(null);
......@@ -10,24 +9,31 @@ const initialState = {
activeChatId: null,
chatMessages: {},
activeStreams: {},
linkedRepos: [],
sidebarOpen: false,
};
function reducer(state, action) {
switch (action.type) {
case "SET_AUTH":
case "LOGIN":
localStorage.setItem("token", action.token);
return { ...state, token: action.token, user: action.user };
case "LOGOUT":
localStorage.removeItem("token");
return { ...initialState, token: null };
case "SET_USER":
return { ...state, user: action.user };
case "SET_CHATS":
return { ...state, chats: action.chats };
case "SET_ACTIVE_CHAT":
return { ...state, activeChatId: action.chatId };
return { ...state, activeChatId: action.chatId, sidebarOpen: false };
case "ADD_CHAT":
return { ...state, chats: [action.chat, ...state.chats] };
return {
...state,
chats: [action.chat, ...state.chats],
activeChatId: action.chat.id,
sidebarOpen: false,
};
case "UPDATE_CHAT":
return {
...state,
......@@ -35,49 +41,49 @@ function reducer(state, action) {
c.id === action.chat.id ? { ...c, ...action.chat } : c
),
};
case "REMOVE_CHAT":
case "REMOVE_CHAT": {
const remaining = state.chats.filter((c) => c.id !== action.chatId);
return {
...state,
chats: state.chats.filter((c) => c.id !== action.chatId),
chats: remaining,
activeChatId:
state.activeChatId === action.chatId ? null : state.activeChatId,
chatMessages: (() => {
const m = { ...state.chatMessages };
delete m[action.chatId];
return m;
})(),
state.activeChatId === action.chatId
? remaining[0]?.id || null
: state.activeChatId,
};
}
case "SET_MESSAGES":
return {
...state,
chatMessages: { ...state.chatMessages, [action.chatId]: action.messages },
};
case "ADD_MESSAGE":
case "ADD_MESSAGE": {
const prev = state.chatMessages[action.chatId] || [];
return {
...state,
chatMessages: {
...state.chatMessages,
[action.chatId]: [
...(state.chatMessages[action.chatId] || []).filter(
(m) => !m.id.startsWith("tmp-") && !m.id.startsWith("err-") && !m.id.startsWith("gen-")
),
action.message,
],
[action.chatId]: [...prev, action.message],
},
};
}
case "SET_STREAMING":
return {
...state,
activeStreams: action.streaming
? { ...state.activeStreams, [action.chatId]: true }
: (() => {
const s = { ...state.activeStreams };
delete s[action.chatId];
return s;
})(),
: Object.fromEntries(
Object.entries(state.activeStreams).filter(([k]) => k !== action.chatId)
),
};
case "SET_LINKED_REPOS":
return { ...state, linkedRepos: action.repos };
case "SET_SIDEBAR_OPEN":
return { ...state, sidebarOpen: action.open };
case "TOGGLE_SIDEBAR":
return { ...state, sidebarOpen: !state.sidebarOpen };
default:
return state;
}
......@@ -85,15 +91,6 @@ function reducer(state, action) {
export function AppProvider({ children }) {
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
setDispatch(dispatch);
}, [dispatch]);
useEffect(() => {
if (state.token) localStorage.setItem("token", state.token);
}, [state.token]);
return (
<AppContext.Provider value={{ state, dispatch }}>
{children}
......@@ -102,5 +99,7 @@ export function AppProvider({ children }) {
}
export function useApp() {
return useContext(AppContext);
const ctx = useContext(AppContext);
if (!ctx) throw new Error("useApp must be inside AppProvider");
return ctx;
}
\ No newline at end of file
frontend/src/streamManager.js
View file @ 6c7a9b6e
import { streamMessage, reconnectStream } from "./api";
import { streamMessage } from "./api";
const _streams = new Map();
const _listeners = new Map();
let _dispatch = null;
export function setDispatch(dispatch) { _dispatch = dispatch; }
export function setDispatch(dispatch) {
_dispatch = dispatch;
}
export function getStreamData(chatId) {
const s = _streams.get(chatId);
......@@ -12,7 +14,9 @@ export function getStreamData(chatId) {
return { streaming: true, text: s.text, thinking: s.thinking, isThinking: s.isThinking };
}
export function isStreaming(chatId) { return _streams.has(chatId); }
export function isStreaming(chatId) {
return _streams.has(chatId);
}
export function subscribe(chatId, cb) {
if (!_listeners.has(chatId)) _listeners.set(chatId, new Set());
......@@ -38,32 +42,24 @@ export function abortStream(chatId) {
}
}
function _processEvents(chatId, eventIterator, ac) {
const s = _streams.get(chatId);
if (!s) return;
export function startStream({ token, chatId, body }) {
if (_streams.has(chatId)) return;
const ac = new AbortController();
_streams.set(chatId, { text: "", thinking: "", isThinking: false, abortController: ac });
if (_dispatch) _dispatch({ type: "SET_STREAMING", chatId, streaming: true });
_notify(chatId);
(async () => {
let usage = {}, msgId = "";
const s = _streams.get(chatId);
if (!s) return;
let usage = {};
let msgId = "";
try {
for await (const evt of eventIterator) {
for await (const evt of streamMessage(token, chatId, body, ac.signal)) {
if (ac.signal.aborted || !_streams.has(chatId)) break;
switch (evt.type) {
case "thinking_start": s.isThinking = true; _notify(chatId); break;
case "thinking_delta": s.thinking += evt.content; _notify(chatId); break;
case "thinking_end": s.isThinking = false; _notify(chatId); break;
case "text_delta": s.text += evt.content; _notify(chatId); break;
case "usage": usage = { input_tokens: evt.input_tokens, output_tokens: evt.output_tokens }; break;
case "title_update":
if (_dispatch) _dispatch({ type: "UPDATE_CHAT", chat: { id: chatId, title: evt.title } });
break;
case "done": msgId = evt.message_id; break;
case "error":
s.text += `\n\n**Error:** ${evt.message}`;
_notify(chatId);
break;
}
_handleEvent(chatId, s, evt, (u) => { usage = u; }, (id) => { msgId = id; });
}
if (!ac.signal.aborted && _dispatch && (s.text || s.thinking)) {
if (!ac.signal.aborted && _dispatch) {
_dispatch({
type: "ADD_MESSAGE", chatId, message: {
id: msgId || `gen-${Date.now()}`, role: "assistant", content: s.text,
......@@ -89,24 +85,75 @@ function _processEvents(chatId, eventIterator, ac) {
})();
}
export function startStream({ token, chatId, body }) {
/**
* Reconnect to an ongoing background generation via GET /stream endpoint.
*/
export function reconnectStream({ token, chatId }) {
if (_streams.has(chatId)) return;
const ac = new AbortController();
_streams.set(chatId, { text: "", thinking: "", isThinking: false, abortController: ac });
if (_dispatch) _dispatch({ type: "SET_STREAMING", chatId, streaming: true });
_notify(chatId);
const iter = streamMessage(token, chatId, body, ac.signal);
_processEvents(chatId, iter, ac);
}
(async () => {
const s = _streams.get(chatId);
if (!s) return;
let usage = {};
let msgId = "";
try {
const res = await fetch(`/api/chats/${chatId}/stream`, {
headers: { Authorization: `Bearer ${token}` },
signal: ac.signal,
});
if (!res.ok) throw new Error("Reconnect failed");
export function reconnectToStream({ token, chatId }) {
if (_streams.has(chatId)) return;
const ac = new AbortController();
_streams.set(chatId, { text: "", thinking: "", isThinking: false, abortController: ac });
if (_dispatch) _dispatch({ type: "SET_STREAMING", chatId, streaming: true });
_notify(chatId);
const reader = res.body.getReader();
const decoder = new TextDecoder();
let buffer = "";
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
const parts = buffer.split("\n\n");
buffer = parts.pop() || "";
for (const part of parts) {
const line = part.trim();
if (line.startsWith("data: ")) {
try {
const evt = JSON.parse(line.slice(6));
if (ac.signal.aborted || !_streams.has(chatId)) break;
_handleEvent(chatId, s, evt, (u) => { usage = u; }, (id) => { msgId = id; });
} catch { /* skip */ }
}
}
}
if (!ac.signal.aborted && s.text && _dispatch) {
_dispatch({
type: "ADD_MESSAGE", chatId, message: {
id: msgId || `gen-${Date.now()}`, role: "assistant", content: s.text,
thinking_content: s.thinking || null, input_tokens: usage.input_tokens || 0,
output_tokens: usage.output_tokens || 0, created_at: new Date().toISOString(), attachments: [],
}
});
}
} catch { /* reconnect failed, generation may be done */ }
finally {
_streams.delete(chatId);
_notify(chatId);
if (_dispatch) _dispatch({ type: "SET_STREAMING", chatId, streaming: false });
}
})();
}
const iter = reconnectStream(token, chatId, ac.signal);
_processEvents(chatId, iter, ac);
function _handleEvent(chatId, s, evt, setUsage, setMsgId) {
switch (evt.type) {
case "thinking_start": s.isThinking = true; _notify(chatId); break;
case "thinking_delta": s.thinking += evt.content; _notify(chatId); break;
case "thinking_end": s.isThinking = false; _notify(chatId); break;
case "text_delta": s.text += evt.content; _notify(chatId); break;
case "usage": setUsage({ input_tokens: evt.input_tokens, output_tokens: evt.output_tokens }); break;
case "title_update": if (_dispatch) _dispatch({ type: "UPDATE_CHAT", chat: { id: chatId, title: evt.title } }); break;
case "done": setMsgId(evt.message_id); break;
case "error": s.text += `\n\n**Error:** ${evt.message}`; _notify(chatId); break;
}
}
\ No newline at end of file
frontend/tailwind.config.js
View file @ 6c7a9b6e
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,jsx}"],
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
"anton-bg": "#09090f",
"anton-surface": "#0f1017",
"anton-card": "#161822",
"anton-border": "#1e2030",
"anton-text": "#e4e4e7",
"anton-muted": "#71717a",
"anton-surface": "#0f0f1a",
"anton-card": "#16162a",
"anton-border": "#1e1e3a",
"anton-text": "#e2e2ea",
"anton-muted": "#6b6b8a",
"anton-accent": "#e53e3e",
"anton-danger": "#dc2626",
"anton-success": "#22c55e",
"anton-success": "#48bb78",
"anton-danger": "#e53e3e",
},
fontFamily: {
sans: ["Inter", "system-ui", "sans-serif"],
mono: ["JetBrains Mono", "monospace"],
sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
mono: ["JetBrains Mono", "Fira Code", "monospace"],
},
screens: {
"xs": "400px",
},
},
},
......
frontend/vite.config.js
View file @ 6c7a9b6e
......@@ -5,14 +5,20 @@ export default defineConfig({
plugins: [react()],
server: {
proxy: {
"/api": {
target: "http://localhost:80",
changeOrigin: true,
},
"/api": "http://localhost:80",
},
},
build: {
outDir: "dist",
// Content-hash all chunks so browsers fetch new versions
rollupOptions: {
output: {
entryFileNames: "assets/[name]-[hash].js",
chunkFileNames: "assets/[name]-[hash].js",
assetFileNames: "assets/[name]-[hash].[ext]",
},
},
// Generate a manifest for cache-busting verification
manifest: true,
sourcemap: false,
},
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment