Initial MVP skeleton with auth, chat persistence, UI and text LLM integration
This commit is contained in:
17
frontend/Dockerfile
Normal file
17
frontend/Dockerfile
Normal file
@@ -0,0 +1,17 @@
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json package-lock.json* ./
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
ARG NEXT_PUBLIC_API_BASE_URL
|
||||
ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
|
||||
|
||||
RUN npm run build
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD ["npm", "start"]
|
||||
248
frontend/app/chat/[id]/ChatView.tsx
Normal file
248
frontend/app/chat/[id]/ChatView.tsx
Normal file
@@ -0,0 +1,248 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
|
||||
interface Message {
|
||||
id: string;
|
||||
role: string;
|
||||
content: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface Chat {
|
||||
id: string;
|
||||
title: string;
|
||||
model_alias: string;
|
||||
}
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "http://127.0.0.1:18000";
|
||||
|
||||
export default function ChatView({ chat, initialMessages }: { chat: Chat, initialMessages: Message[] }) {
|
||||
const [messages, setMessages] = useState<Message[]>(initialMessages);
|
||||
const [input, setInput] = useState("");
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
}
|
||||
}, [messages, isGenerating]); // Also scroll when isGenerating changes
|
||||
|
||||
const handleSend = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!input.trim() || isSending || isGenerating) return;
|
||||
|
||||
setIsSending(true);
|
||||
const content = input;
|
||||
setInput("");
|
||||
|
||||
// Eagerly show user message map
|
||||
const tempUserMsg: Message = {
|
||||
id: "temp-" + Date.now(),
|
||||
role: "user",
|
||||
content: content,
|
||||
created_at: new Date().toISOString()
|
||||
};
|
||||
setMessages(prev => [...prev, tempUserMsg]);
|
||||
setIsGenerating(true);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/chats/${chat.id}/messages`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ content, role: "user" }),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error("Failed to send message");
|
||||
|
||||
const data = await res.json();
|
||||
if (!Array.isArray(data) || data.length < 2) {
|
||||
throw new Error("Invalid response format from server");
|
||||
}
|
||||
const [userMsg, assistantMsg] = data;
|
||||
|
||||
// Replace the temp user msg and append the actual user and assistant messages from backend
|
||||
setMessages(prev => [...prev.filter(m => m.id !== tempUserMsg.id), userMsg, assistantMsg]);
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert("Failed to send message: " + err);
|
||||
setInput(content); // restore input
|
||||
setMessages(prev => prev.filter(m => m.id !== tempUserMsg.id)); // Remove failed message
|
||||
} finally {
|
||||
setIsSending(false);
|
||||
setIsGenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }}>
|
||||
{/* Dynamic Chat Header */}
|
||||
<div style={{
|
||||
height: 64,
|
||||
padding: '0 24px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
borderBottom: '1px solid var(--border-color)',
|
||||
backgroundColor: 'var(--panel-bg)'
|
||||
}}>
|
||||
<h2 style={{ fontSize: 18, fontWeight: 600, margin: 0, color: 'var(--text-main)' }}>{chat.title}</h2>
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8,
|
||||
padding: '6px 12px', backgroundColor: 'var(--bg-color)',
|
||||
borderRadius: 20, fontSize: 13, color: 'var(--primary)', fontWeight: 500
|
||||
}}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M12 16V12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M12 8H12.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
Модель: {chat.model_alias}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Messages Scroll Area */}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
style={{ flex: 1, overflowY: "auto", padding: '24px 10%', backgroundColor: 'var(--bg-color)' }}
|
||||
>
|
||||
{messages.length === 0 ? (
|
||||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', color: 'var(--text-muted)' }}>
|
||||
Напишите первое сообщение, чтобы начать диалог.
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 24, paddingBottom: 24 }}>
|
||||
{messages.map(msg => {
|
||||
const isUser = msg.role === 'user';
|
||||
return (
|
||||
<div key={msg.id} style={{ display: 'flex', flexDirection: 'column', alignItems: isUser ? 'flex-end' : 'flex-start' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color: isUser ? 'var(--primary)' : 'var(--text-main)' }}>
|
||||
{isUser ? 'Вы' : 'AI Помощник'}
|
||||
</span>
|
||||
<span style={{ fontSize: 12, color: 'var(--text-muted)' }}>
|
||||
{new Date(msg.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{
|
||||
backgroundColor: isUser ? 'var(--primary)' : 'var(--panel-bg)',
|
||||
color: isUser ? '#fff' : 'var(--text-main)',
|
||||
padding: '12px 16px',
|
||||
borderRadius: isUser ? '16px 16px 0 16px' : '16px 16px 16px 0',
|
||||
maxWidth: '85%',
|
||||
lineHeight: '1.5',
|
||||
fontSize: 15,
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
border: isUser ? 'none' : '1px solid var(--border-color)',
|
||||
whiteSpace: 'pre-wrap'
|
||||
}}>
|
||||
{msg.content}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Loading Indicator for AI Response */}
|
||||
{isGenerating && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-main)' }}>
|
||||
AI Помощник
|
||||
</span>
|
||||
</div>
|
||||
<div style={{
|
||||
backgroundColor: 'var(--panel-bg)',
|
||||
color: 'var(--text-muted)',
|
||||
padding: '12px 16px',
|
||||
borderRadius: '16px 16px 16px 0',
|
||||
maxWidth: '85%',
|
||||
lineHeight: '1.5',
|
||||
fontSize: 15,
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
border: '1px solid var(--border-color)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px'
|
||||
}}>
|
||||
<i>Печатает...</i>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Composer */}
|
||||
<div style={{
|
||||
padding: '16px 10%',
|
||||
backgroundColor: 'var(--panel-bg)',
|
||||
borderTop: '1px solid var(--border-color)'
|
||||
}}>
|
||||
<form onSubmit={handleSend} style={{
|
||||
display: "flex",
|
||||
position: "relative",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
placeholder="Спросите о чем-нибудь..."
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '14px 110px 14px 20px',
|
||||
borderRadius: 24,
|
||||
border: "1px solid var(--border-color)",
|
||||
backgroundColor: "var(--bg-color)",
|
||||
fontSize: 15,
|
||||
outline: "none",
|
||||
transition: "border-color 0.2s"
|
||||
}}
|
||||
disabled={isSending}
|
||||
onFocus={e => e.target.style.borderColor = 'var(--primary)'}
|
||||
onBlur={e => e.target.style.borderColor = 'var(--border-color)'}
|
||||
/>
|
||||
|
||||
<div style={{ position: 'absolute', right: 8, display: 'flex', gap: 8 }}>
|
||||
<button
|
||||
type="button"
|
||||
disabled
|
||||
title="Вложения пока не поддерживаются"
|
||||
style={{
|
||||
width: 36, height: 36, borderRadius: '50%', backgroundColor: 'transparent',
|
||||
border: 'none', cursor: 'not-allowed', color: 'var(--text-muted)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.4354 2.58198C20.9402 2.06941 20.1492 2.06941 19.654 2.58198L10.3168 12.2359C9.89423 12.6728 9.89423 13.3854 10.3168 13.8224C10.7394 14.2593 11.4284 14.2593 11.851 13.8224L20.5977 4.77443C20.893 4.469 21.3748 4.469 21.6701 4.77443C21.9654 5.07985 21.9654 5.57813 21.6701 5.88355L12.9234 14.9315C11.9079 15.9818 10.2524 15.9818 9.23692 14.9315C8.22144 13.8812 8.22144 12.1697 9.23692 11.1193L18.5741 1.46543C19.6701 0.33202 21.4616 0.33202 22.5576 1.46543C23.6535 2.59884 23.6535 4.45307 22.5576 5.58648L11.5332 17.0267C9.92358 18.6917 7.29124 18.6917 5.68161 17.0267C4.07198 15.3618 4.07198 12.6393 5.68161 10.9743L14.8812 1.45511C15.1765 1.14968 15.6583 1.14968 15.9536 1.45511C16.2489 1.76054 16.2489 2.25881 15.9536 2.56424L6.75399 12.0835C5.74836 13.1237 5.74836 14.823 6.75399 15.8633C7.75962 16.9035 9.40232 16.9035 10.4079 15.8633L21.4324 4.42316C21.944 3.89363 21.944 3.09151 21.4324 2.58198H21.4354Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSending || !input.trim()}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
width: 36, height: 36, borderRadius: '50%',
|
||||
backgroundColor: isSending || !input.trim() ? '#e5e7eb' : 'var(--primary)',
|
||||
color: isSending || !input.trim() ? '#a1a1aa' : '#fff',
|
||||
border: 'none', cursor: (isSending || !input.trim()) ? 'default' : 'pointer',
|
||||
transition: 'background-color 0.2s'
|
||||
}}
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: 2 }}>
|
||||
<path d="M22 2L11 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M22 2L15 22L11 13L2 9L22 2Z" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
115
frontend/app/chat/[id]/page.tsx
Normal file
115
frontend/app/chat/[id]/page.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { cookies } from "next/headers";
|
||||
import { redirect } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import ChatView from "./ChatView";
|
||||
import Layout from "../../../components/Layout";
|
||||
|
||||
async function getAuthState() {
|
||||
const baseUrl = process.env.INTERNAL_API_URL || process.env.NEXT_PUBLIC_API_BASE_URL || "http://127.0.0.1:18000";
|
||||
const cookieStore = await cookies();
|
||||
const sessionCookie = cookieStore.get("ai_chat_session");
|
||||
|
||||
if (!sessionCookie) return null;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${baseUrl}/api/auth/me`, {
|
||||
headers: {
|
||||
Cookie: `${sessionCookie.name}=${sessionCookie.value}`
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
if (!res.ok) return null;
|
||||
return await res.json();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function getChat(id: string) {
|
||||
const baseUrl = process.env.INTERNAL_API_URL || process.env.NEXT_PUBLIC_API_BASE_URL || "http://127.0.0.1:18000";
|
||||
const cookieStore = await cookies();
|
||||
const sessionCookie = cookieStore.get("ai_chat_session");
|
||||
|
||||
if (!sessionCookie) return null;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${baseUrl}/api/chats/${id}`, {
|
||||
headers: {
|
||||
Cookie: `${sessionCookie.name}=${sessionCookie.value}`
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
if (!res.ok) return null;
|
||||
return await res.json();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function getMessages(id: string) {
|
||||
const baseUrl = process.env.INTERNAL_API_URL || process.env.NEXT_PUBLIC_API_BASE_URL || "http://127.0.0.1:18000";
|
||||
const cookieStore = await cookies();
|
||||
const sessionCookie = cookieStore.get("ai_chat_session");
|
||||
|
||||
if (!sessionCookie) return [];
|
||||
|
||||
try {
|
||||
const res = await fetch(`${baseUrl}/api/chats/${id}/messages`, {
|
||||
headers: {
|
||||
Cookie: `${sessionCookie.name}=${sessionCookie.value}`
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
if (!res.ok) return [];
|
||||
return await res.json();
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function getChats() {
|
||||
const baseUrl = process.env.INTERNAL_API_URL || process.env.NEXT_PUBLIC_API_BASE_URL || "http://127.0.0.1:18000";
|
||||
const cookieStore = await cookies();
|
||||
const sessionCookie = cookieStore.get("ai_chat_session");
|
||||
|
||||
if (!sessionCookie) return [];
|
||||
|
||||
try {
|
||||
const res = await fetch(`${baseUrl}/api/chats`, {
|
||||
headers: { Cookie: `${sessionCookie.name}=${sessionCookie.value}` },
|
||||
cache: "no-store",
|
||||
});
|
||||
if (!res.ok) return [];
|
||||
return await res.json();
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export default async function ChatPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const auth = await getAuthState();
|
||||
if (!auth) {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
const { id } = await params;
|
||||
|
||||
const chat = await getChat(id);
|
||||
if (!chat) {
|
||||
return (
|
||||
<main style={{ padding: 24, fontFamily: "Arial, sans-serif" }}>
|
||||
<h1>Chat Not Found</h1>
|
||||
<Link href="/">Back to Home</Link>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const messages = await getMessages(id);
|
||||
const chats = await getChats();
|
||||
|
||||
return (
|
||||
<Layout chats={chats} user={auth}>
|
||||
<ChatView chat={chat} initialMessages={messages} />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
36
frontend/app/globals.css
Normal file
36
frontend/app/globals.css
Normal file
@@ -0,0 +1,36 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-color: #f5f6f8;
|
||||
--panel-bg: #ffffff;
|
||||
--text-main: #333333;
|
||||
--text-muted: #888888;
|
||||
--border-color: #e5e7eb;
|
||||
--primary: #4a76a8;
|
||||
--primary-hover: #3d628f;
|
||||
--sidebar-w: 260px;
|
||||
}
|
||||
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-main);
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
18
frontend/app/layout.tsx
Normal file
18
frontend/app/layout.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata = {
|
||||
title: "AI Chat MVP",
|
||||
description: "AI Chat MVP",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
268
frontend/app/login/page.tsx
Normal file
268
frontend/app/login/page.tsx
Normal file
@@ -0,0 +1,268 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const API_BASE_URL =
|
||||
process.env.NEXT_PUBLIC_API_BASE_URL || "http://127.0.0.1:18000";
|
||||
|
||||
export default function LoginPage() {
|
||||
const [login, setLogin] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/auth/login`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ login, password }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
let message = "Неверный логин или пароль";
|
||||
try {
|
||||
const data = await res.json();
|
||||
if (data?.detail && typeof data.detail === "string") {
|
||||
message = data.detail;
|
||||
}
|
||||
} catch {
|
||||
// ignore malformed/non-json body
|
||||
}
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
router.push("/");
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
setError(err?.message || "Ошибка входа");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
minHeight: "100vh",
|
||||
backgroundColor: "var(--bg-color)",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 24,
|
||||
left: 32,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
color: "var(--text-main)",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12 4C16.418 4 20 7.582 20 12C20 16.418 16.418 20 12 20C7.582 20 4 16.418 4 12C4 7.582 7.582 4 12 4Z"
|
||||
fill="var(--primary)"
|
||||
/>
|
||||
<path
|
||||
d="M15 13H9C8.448 13 8 12.552 8 12C8 11.448 8.448 11 9 11H15C15.552 11 16 11.448 16 12C16 12.552 15.552 13 15 13Z"
|
||||
fill="var(--primary)"
|
||||
/>
|
||||
</svg>
|
||||
AI Chat MVP
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: "#fff",
|
||||
padding: "40px",
|
||||
borderRadius: "16px",
|
||||
boxShadow: "0 4px 20px rgba(0,0,0,0.05)",
|
||||
width: "100%",
|
||||
maxWidth: "420px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
style={{
|
||||
fontSize: "24px",
|
||||
fontWeight: 500,
|
||||
marginBottom: "32px",
|
||||
color: "var(--text-main)",
|
||||
}}
|
||||
>
|
||||
Вход в систему
|
||||
</h1>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: "block",
|
||||
fontSize: "14px",
|
||||
marginBottom: "8px",
|
||||
color: "var(--text-main)",
|
||||
}}
|
||||
>
|
||||
Логин
|
||||
</label>
|
||||
<input
|
||||
value={login}
|
||||
onChange={(e) => setLogin(e.target.value)}
|
||||
type="text"
|
||||
placeholder="admin"
|
||||
required
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "12px 16px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid var(--border-color)",
|
||||
fontSize: "15px",
|
||||
outline: "none",
|
||||
transition: "border-color 0.2s",
|
||||
}}
|
||||
onFocus={(e) => (e.target.style.borderColor = "var(--primary)")}
|
||||
onBlur={(e) =>
|
||||
(e.target.style.borderColor = "var(--border-color)")
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
<label style={{ fontSize: "14px", color: "var(--text-main)" }}>
|
||||
Пароль
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "13px",
|
||||
color: "var(--text-muted)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "4px",
|
||||
padding: 0,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
{showPassword ? "Скрыть" : "Показать"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="••••••••"
|
||||
required
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "12px 16px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid var(--border-color)",
|
||||
fontSize: "15px",
|
||||
outline: "none",
|
||||
transition: "border-color 0.2s",
|
||||
}}
|
||||
onFocus={(e) => (e.target.style.borderColor = "var(--primary)")}
|
||||
onBlur={(e) =>
|
||||
(e.target.style.borderColor = "var(--border-color)")
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div
|
||||
style={{
|
||||
color: "#d32f2f",
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
style={{
|
||||
padding: "14px",
|
||||
marginTop: "8px",
|
||||
backgroundColor: isSubmitting
|
||||
? "var(--border-color)"
|
||||
: "var(--primary)",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "8px",
|
||||
fontSize: "15px",
|
||||
fontWeight: 500,
|
||||
transition: "background-color 0.2s",
|
||||
cursor: isSubmitting ? "not-allowed" : "pointer",
|
||||
}}
|
||||
onMouseOver={(e) => {
|
||||
if (!isSubmitting) {
|
||||
e.currentTarget.style.backgroundColor = "var(--primary-hover)";
|
||||
}
|
||||
}}
|
||||
onMouseOut={(e) => {
|
||||
if (!isSubmitting) {
|
||||
e.currentTarget.style.backgroundColor = "var(--primary)";
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? "Вход..." : "Войти"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginTop: "24px",
|
||||
fontSize: "14px",
|
||||
color: "var(--text-muted)",
|
||||
}}
|
||||
>
|
||||
Вход доступен только для пользователей, созданных администратором.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
67
frontend/app/page.tsx
Normal file
67
frontend/app/page.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import { cookies } from "next/headers";
|
||||
import { redirect } from "next/navigation";
|
||||
import Layout from "../components/Layout";
|
||||
|
||||
async function getAuthState() {
|
||||
const baseUrl = process.env.INTERNAL_API_URL || process.env.NEXT_PUBLIC_API_BASE_URL || "http://127.0.0.1:18000";
|
||||
const cookieStore = await cookies();
|
||||
const sessionCookie = cookieStore.get("ai_chat_session");
|
||||
|
||||
if (!sessionCookie) return null;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${baseUrl}/api/auth/me`, {
|
||||
headers: {
|
||||
Cookie: `${sessionCookie.name}=${sessionCookie.value}`
|
||||
},
|
||||
cache: "no-store"
|
||||
});
|
||||
if (!res.ok) return null;
|
||||
return await res.json();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function getChats() {
|
||||
const baseUrl = process.env.INTERNAL_API_URL || process.env.NEXT_PUBLIC_API_BASE_URL || "http://127.0.0.1:18000";
|
||||
const cookieStore = await cookies();
|
||||
const sessionCookie = cookieStore.get("ai_chat_session");
|
||||
|
||||
if (!sessionCookie) return [];
|
||||
|
||||
try {
|
||||
const res = await fetch(`${baseUrl}/api/chats`, {
|
||||
headers: {
|
||||
Cookie: `${sessionCookie.name}=${sessionCookie.value}`
|
||||
},
|
||||
cache: "no-store"
|
||||
});
|
||||
if (!res.ok) return [];
|
||||
return await res.json();
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export default async function Home() {
|
||||
const auth = await getAuthState();
|
||||
if (!auth) {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
const chats = await getChats();
|
||||
|
||||
return (
|
||||
<Layout chats={chats} user={auth}>
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', color: 'var(--text-muted)' }}>
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ opacity: 0.3, marginBottom: 16 }}>
|
||||
<path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12 4C16.418 4 20 7.582 20 12C20 16.418 16.418 20 12 20C7.582 20 4 16.418 4 12C4 7.582 7.582 4 12 4Z" fill="currentColor"/>
|
||||
<path d="M15 13H9C8.448 13 8 12.552 8 12C8 11.448 8.448 11 9 11H15C15.552 11 16 11.448 16 12C16 12.552 15.552 13 15 13Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<div style={{ fontSize: 18, fontWeight: 500, color: 'var(--text-main)', marginBottom: 8 }}>Чем я могу помочь?</div>
|
||||
<div style={{ fontSize: 14 }}>Выберите чат в меню слева или создайте новый.</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
228
frontend/components/Layout.tsx
Normal file
228
frontend/components/Layout.tsx
Normal file
@@ -0,0 +1,228 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
|
||||
interface Chat {
|
||||
id: string;
|
||||
title: string;
|
||||
model_alias: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface User {
|
||||
login: string;
|
||||
}
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "http://127.0.0.1:18000";
|
||||
|
||||
// Global modal state since Sidebar and Topbar both might need logic, but let's keep it simple
|
||||
export default function Layout({ children, chats: initialChats, user }: { children: React.ReactNode, chats: Chat[], user: User }) {
|
||||
const [chats, setChats] = useState<Chat[]>(initialChats);
|
||||
const [models, setModels] = useState<{alias: string, name: string}[]>([]);
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [newChatTitle, setNewChatTitle] = useState("");
|
||||
const [newChatModel, setNewChatModel] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE_URL}/api/models`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setModels(data);
|
||||
if (data.length > 0) setNewChatModel(data[0].alias);
|
||||
})
|
||||
.catch(console.error);
|
||||
}, []);
|
||||
|
||||
const handleLogout = async () => {
|
||||
await fetch(`${API_BASE_URL}/api/auth/logout`, { method: "POST" });
|
||||
window.location.href = "/";
|
||||
};
|
||||
|
||||
const createChat = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newChatTitle.trim() || !newChatModel) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/chats`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ title: newChatTitle, model_alias: newChatModel }),
|
||||
});
|
||||
if (res.ok) {
|
||||
const chat = await res.json();
|
||||
setChats([chat, ...chats]);
|
||||
setIsModalOpen(false);
|
||||
setNewChatTitle("");
|
||||
router.push(`/chat/${chat.id}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to create chat", err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', height: '100vh', flexDirection: 'column', backgroundColor: 'var(--bg-color)' }}>
|
||||
{/* Top Bar */}
|
||||
<header style={{
|
||||
height: 56,
|
||||
backgroundColor: 'var(--panel-bg)',
|
||||
borderBottom: '1px solid var(--border-color)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 24px',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 18, fontWeight: 600, color: 'var(--primary)' }}>
|
||||
<Link href="/" style={{ color: 'inherit', textDecoration: 'none' }}>AI Chat MVP</Link>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<div style={{ fontSize: 14, color: 'var(--text-main)', display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<div style={{ width: 28, height: 28, borderRadius: '50%', backgroundColor: '#e2e8f0', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600, color: 'var(--text-main)' }}>
|
||||
{user.login.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
{user.login}
|
||||
</div>
|
||||
<button onClick={handleLogout} style={{ background: 'none', border: 'none', color: 'var(--text-muted)', fontSize: 14, display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
Выход
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Container */}
|
||||
<div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside style={{
|
||||
width: 'var(--sidebar-w)',
|
||||
backgroundColor: 'var(--panel-bg)',
|
||||
borderRight: '1px solid var(--border-color)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
zIndex: 10
|
||||
}}>
|
||||
<div style={{ padding: '16px 16px 8px 16px' }}>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 16px',
|
||||
backgroundColor: 'var(--bg-color)',
|
||||
border: '1px solid var(--border-color)',
|
||||
borderRadius: '8px',
|
||||
color: 'var(--text-main)',
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
transition: 'background 0.2s',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
onMouseOver={e => e.currentTarget.style.backgroundColor = '#e8eaed'}
|
||||
onMouseOut={e => e.currentTarget.style.backgroundColor = 'var(--bg-color)'}
|
||||
>
|
||||
<span style={{ fontSize: 18, color: 'var(--primary)', fontWeight: 300 }}>+</span> Новый чат
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '16px', fontSize: 13, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
||||
Мои чаты
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, overflowY: 'auto' }}>
|
||||
{chats.map(chat => (
|
||||
<Link key={chat.id} href={`/chat/${chat.id}`} style={{
|
||||
display: 'block',
|
||||
padding: '12px 16px',
|
||||
fontSize: 14,
|
||||
textDecoration: 'none',
|
||||
color: 'var(--text-main)',
|
||||
backgroundColor: pathname === `/chat/${chat.id}` ? 'var(--bg-color)' : 'transparent',
|
||||
borderLeft: pathname === `/chat/${chat.id}` ? '3px solid var(--primary)' : '3px solid transparent',
|
||||
}}
|
||||
onMouseOver={e => { if (pathname !== `/chat/${chat.id}`) e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.02)' }}
|
||||
onMouseOut={e => { if (pathname !== `/chat/${chat.id}`) e.currentTarget.style.backgroundColor = 'transparent' }}
|
||||
>
|
||||
<div style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: pathname === `/chat/${chat.id}` ? 500 : 400 }}>
|
||||
{chat.title}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>
|
||||
{chat.model_alias}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* New Chat Modal */}
|
||||
{isModalOpen && (
|
||||
<div style={{
|
||||
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.4)', zIndex: 100,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center'
|
||||
}}>
|
||||
<div style={{
|
||||
backgroundColor: '#fff', borderRadius: 16, width: '100%', maxWidth: 480,
|
||||
boxShadow: '0 10px 40px rgba(0,0,0,0.1)', padding: 32
|
||||
}}>
|
||||
<h2 style={{ fontSize: 20, margin: '0 0 24px 0', fontWeight: 600 }}>Новый чат</h2>
|
||||
<form onSubmit={createChat} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: 14, marginBottom: 8, color: 'var(--text-main)', fontWeight: 500 }}>Название чата</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newChatTitle}
|
||||
onChange={e => setNewChatTitle(e.target.value)}
|
||||
placeholder="Введите название..."
|
||||
required
|
||||
style={{ width: '100%', padding: '10px 14px', borderRadius: 8, border: '1px solid var(--border-color)', fontSize: 14, outline: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: 14, marginBottom: 8, color: 'var(--text-main)', fontWeight: 500 }}>Модель</label>
|
||||
<select
|
||||
value={newChatModel}
|
||||
onChange={e => setNewChatModel(e.target.value)}
|
||||
style={{ width: '100%', padding: '10px 14px', borderRadius: 8, border: '1px solid var(--border-color)', fontSize: 14, outline: 'none', backgroundColor: '#fff' }}
|
||||
>
|
||||
{models.map(m => (
|
||||
<option key={m.alias} value={m.alias}>{m.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 12, marginTop: 12, justifyContent: 'flex-end' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
style={{ padding: '10px 20px', backgroundColor: 'transparent', border: '1px solid var(--border-color)', borderRadius: 8, fontSize: 14, fontWeight: 500, color: 'var(--text-main)' }}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
style={{ padding: '10px 20px', backgroundColor: 'var(--primary)', border: 'none', borderRadius: 8, fontSize: 14, fontWeight: 500, color: '#fff' }}
|
||||
>
|
||||
Создать чат
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
frontend/package.json
Normal file
19
frontend/package.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "ai-chat-mvp-frontend",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev -H 0.0.0.0 -p 3000",
|
||||
"build": "next build",
|
||||
"start": "next start -p 3000"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "15.2.0",
|
||||
"react": "19.0.0",
|
||||
"react-dom": "19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user