feat(ai): server-side chat history + assistant UX fixes
Server-side, per-user chat history (the thread now survives reload): - new ai_chat_messages table + migration; getChatHistory/appendChatMessages/ clearChatHistory; GET/POST/DELETE /api/admin/ai/history (ai.use-guarded); service + HTTP tests (isolation, ordering, clear, perm, validation). - DashAssistant loads the thread on mount and persists each turn; "Vymazat" clears it. gcTime:0 so each mount re-reads the DB (no stale-cache resurrection); composer gated until history settles + seed flag flipped on submit (no seed/submit race clobbering a freshly-sent turn). UX + correctness fixes from review/feedback: - review cards moved OUT of the scrollable thread into a "Faktury k potvrzení" section so Uložit is always reachable; chat auto-scroll no longer fires on field edits. - chat bubble text colour set on the Typography (GlobalStyles pins `p` to text.secondary, which was overriding the inherited bubble colour → unreadable). - never clear input/staged PDFs on a failed submit (rollback + keep), so a budget error can't wipe staged invoices; roll back the optimistic user turn. - stable attachment ids (no crypto.randomUUID — undefined over plain HTTP). - editable Datum splatnosti + Popis fields; client-side extraction summary. Security: DashProfile clipboard copy now uses an execCommand fallback (works over plain HTTP) and only shows the success toast when the copy actually succeeded — previously it falsely claimed to copy 2FA codes / the TOTP secret. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
@@ -14,15 +14,28 @@ import {
|
||||
getBudgetUsd,
|
||||
assertBudgetAvailable,
|
||||
isConfigured,
|
||||
getChatHistory,
|
||||
appendChatMessages,
|
||||
clearChatHistory,
|
||||
} from "../services/ai.service";
|
||||
|
||||
const KIND = "test_ai"; // marker so we only clean our own rows
|
||||
// Synthetic, FK-free user ids for chat-history service tests (no users row needed).
|
||||
const HIST_UID_A = 999999991;
|
||||
const HIST_UID_B = 999999992;
|
||||
const HIST_MARKER = "「test-hist」"; // marker for HTTP-test rows on real users
|
||||
|
||||
beforeEach(async () => {
|
||||
await prisma.ai_usage.deleteMany({ where: { kind: KIND } });
|
||||
});
|
||||
afterAll(async () => {
|
||||
await prisma.ai_usage.deleteMany({ where: { kind: KIND } });
|
||||
await prisma.ai_chat_messages.deleteMany({
|
||||
where: { user_id: { in: [HIST_UID_A, HIST_UID_B] } },
|
||||
});
|
||||
await prisma.ai_chat_messages.deleteMany({
|
||||
where: { content: { contains: HIST_MARKER } },
|
||||
});
|
||||
});
|
||||
|
||||
describe("ai.service cost + budget", () => {
|
||||
@@ -99,6 +112,46 @@ describe("ai.service cost + budget", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("ai.service chat history", () => {
|
||||
beforeEach(async () => {
|
||||
await prisma.ai_chat_messages.deleteMany({
|
||||
where: { user_id: { in: [HIST_UID_A, HIST_UID_B] } },
|
||||
});
|
||||
});
|
||||
|
||||
it("appends and returns a user's thread oldest → newest", async () => {
|
||||
await appendChatMessages(HIST_UID_A, [
|
||||
{ role: "user", content: "ahoj" },
|
||||
{ role: "assistant", content: "Dobrý den" },
|
||||
]);
|
||||
await appendChatMessages(HIST_UID_A, [
|
||||
{ role: "user", content: "jak se máš" },
|
||||
]);
|
||||
const hist = await getChatHistory(HIST_UID_A);
|
||||
expect(hist.map((m) => m.content)).toEqual([
|
||||
"ahoj",
|
||||
"Dobrý den",
|
||||
"jak se máš",
|
||||
]);
|
||||
expect(hist[0].role).toBe("user");
|
||||
});
|
||||
|
||||
it("isolates history per user", async () => {
|
||||
await appendChatMessages(HIST_UID_A, [{ role: "user", content: "A1" }]);
|
||||
await appendChatMessages(HIST_UID_B, [{ role: "user", content: "B1" }]);
|
||||
const a = await getChatHistory(HIST_UID_A);
|
||||
const b = await getChatHistory(HIST_UID_B);
|
||||
expect(a.map((m) => m.content)).toEqual(["A1"]);
|
||||
expect(b.map((m) => m.content)).toEqual(["B1"]);
|
||||
});
|
||||
|
||||
it("clears a user's thread", async () => {
|
||||
await appendChatMessages(HIST_UID_A, [{ role: "user", content: "x" }]);
|
||||
await clearChatHistory(HIST_UID_A);
|
||||
expect(await getChatHistory(HIST_UID_A)).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("HTTP /api/admin/ai", () => {
|
||||
let app: Awaited<ReturnType<typeof buildAiApp>>;
|
||||
let adminToken: string;
|
||||
@@ -212,4 +265,83 @@ describe("HTTP /api/admin/ai", () => {
|
||||
expect(res.statusCode).toBe(503);
|
||||
(appConfig.anthropic as { apiKey: string }).apiKey = savedKey;
|
||||
});
|
||||
|
||||
it("GET /history requires ai.use", async () => {
|
||||
const res = await app.inject({
|
||||
method: "GET",
|
||||
url: "/api/admin/ai/history",
|
||||
headers: { Authorization: `Bearer ${noPermToken}` },
|
||||
});
|
||||
expect(res.statusCode).toBe(403);
|
||||
});
|
||||
|
||||
it("POST /history appends and GET /history returns the thread", async () => {
|
||||
const post = await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/admin/ai/history",
|
||||
headers: {
|
||||
Authorization: `Bearer ${adminToken}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
payload: {
|
||||
messages: [
|
||||
{ role: "user", content: `${HIST_MARKER} dotaz` },
|
||||
{ role: "assistant", content: `${HIST_MARKER} odpoved` },
|
||||
],
|
||||
},
|
||||
});
|
||||
expect(post.statusCode).toBe(200);
|
||||
|
||||
const get = await app.inject({
|
||||
method: "GET",
|
||||
url: "/api/admin/ai/history",
|
||||
headers: { Authorization: `Bearer ${adminToken}` },
|
||||
});
|
||||
expect(get.statusCode).toBe(200);
|
||||
const contents = get
|
||||
.json()
|
||||
.data.messages.map((m: { content: string }) => m.content);
|
||||
expect(contents).toContain(`${HIST_MARKER} dotaz`);
|
||||
expect(contents).toContain(`${HIST_MARKER} odpoved`);
|
||||
});
|
||||
|
||||
it("POST /history rejects an empty messages array", async () => {
|
||||
const res = await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/admin/ai/history",
|
||||
headers: {
|
||||
Authorization: `Bearer ${adminToken}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
payload: { messages: [] },
|
||||
});
|
||||
expect(res.statusCode).toBe(400);
|
||||
});
|
||||
|
||||
it("DELETE /history clears the thread", async () => {
|
||||
await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/admin/ai/history",
|
||||
headers: {
|
||||
Authorization: `Bearer ${adminToken}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
payload: { messages: [{ role: "user", content: `${HIST_MARKER} x` }] },
|
||||
});
|
||||
const del = await app.inject({
|
||||
method: "DELETE",
|
||||
url: "/api/admin/ai/history",
|
||||
headers: { Authorization: `Bearer ${adminToken}` },
|
||||
});
|
||||
expect(del.statusCode).toBe(200);
|
||||
const get = await app.inject({
|
||||
method: "GET",
|
||||
url: "/api/admin/ai/history",
|
||||
headers: { Authorization: `Bearer ${adminToken}` },
|
||||
});
|
||||
const contents = get
|
||||
.json()
|
||||
.data.messages.map((m: { content: string }) => m.content);
|
||||
expect(contents).not.toContain(`${HIST_MARKER} x`);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Chip from "@mui/material/Chip";
|
||||
import CircularProgress from "@mui/material/CircularProgress";
|
||||
import { Card, Button, TextField } from "../../ui";
|
||||
import apiFetch from "../../utils/api";
|
||||
import { useAlert } from "../../context/AlertContext";
|
||||
import { aiUsageOptions, type ExtractedInvoice } from "../../lib/queries/ai";
|
||||
import {
|
||||
aiUsageOptions,
|
||||
aiHistoryOptions,
|
||||
type ExtractedInvoice,
|
||||
} from "../../lib/queries/ai";
|
||||
|
||||
interface ChatTurn {
|
||||
role: "user" | "assistant";
|
||||
@@ -37,104 +43,240 @@ type EditableField =
|
||||
| "due_date"
|
||||
| "description";
|
||||
|
||||
// A staged file carries a stable id so chip keys survive mid-list removal.
|
||||
interface StagedFile {
|
||||
id: string;
|
||||
file: File;
|
||||
}
|
||||
|
||||
// Stable, monotonic id. NOT crypto.randomUUID() — that only exists in a secure
|
||||
// context (HTTPS/localhost) and throws over plain HTTP on a LAN. A counter is
|
||||
// unique within the session and context-independent.
|
||||
let uidSeq = 0;
|
||||
const nextUid = () => `ai-${(uidSeq += 1)}`;
|
||||
|
||||
// How many recent turns to send the model as context (bounds tokens/cost).
|
||||
const MODEL_CONTEXT = 20;
|
||||
// Server schema caps a stored message at 8000 chars.
|
||||
const MAX_STORE = 8000;
|
||||
|
||||
const plural = (n: number) =>
|
||||
n === 1 ? "fakturu" : n >= 2 && n <= 4 ? "faktury" : "faktur";
|
||||
|
||||
/** A human, Czech summary of an extraction so the assistant "reports back". */
|
||||
function summaryNote(reviews: ReviewInvoice[]): string {
|
||||
if (reviews.length === 0) return "V přílohách jsem nenašel žádnou fakturu.";
|
||||
const suppliers = [
|
||||
...new Set(reviews.map((r) => r.supplier_name).filter(Boolean)),
|
||||
];
|
||||
const supTxt =
|
||||
suppliers.length === 1
|
||||
? ` od ${suppliers[0]}`
|
||||
: suppliers.length > 1
|
||||
? ` od ${suppliers[0]} a dalších`
|
||||
: "";
|
||||
const totals: Record<string, number> = {};
|
||||
for (const r of reviews) {
|
||||
const cur = r.currency || "CZK";
|
||||
totals[cur] = (totals[cur] || 0) + (Number(r.amount) || 0);
|
||||
}
|
||||
const totalsTxt = Object.entries(totals)
|
||||
.map(
|
||||
([cur, sum]) =>
|
||||
`${sum.toLocaleString("cs-CZ", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})} ${cur}`,
|
||||
)
|
||||
.join(" + ");
|
||||
return `Načetl jsem ${reviews.length} ${plural(reviews.length)}${supTxt}, celkem ${totalsTxt}. Zkontrolujte údaje a uložte.`;
|
||||
}
|
||||
|
||||
export default function DashAssistant() {
|
||||
const alert = useAlert();
|
||||
const qc = useQueryClient();
|
||||
const { data: usage } = useQuery(aiUsageOptions());
|
||||
const { data: historyData, isPending: historyPending } =
|
||||
useQuery(aiHistoryOptions());
|
||||
|
||||
const [turns, setTurns] = useState<ChatTurn[]>([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [review, setReview] = useState<ReviewInvoice[]>([]);
|
||||
const [attachments, setAttachments] = useState<StagedFile[]>([]);
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
const threadRef = useRef<HTMLDivElement>(null);
|
||||
const seeded = useRef(false);
|
||||
|
||||
// Seed the thread from server history exactly once (first time it arrives).
|
||||
useEffect(() => {
|
||||
if (!seeded.current && historyData) {
|
||||
seeded.current = true;
|
||||
setTurns(
|
||||
historyData.messages.map((m) => ({ role: m.role, content: m.content })),
|
||||
);
|
||||
}
|
||||
}, [historyData]);
|
||||
|
||||
// Keep the thread scrolled to the latest message. Deliberately NOT keyed on
|
||||
// `review` — editing a review-card field must not yank the thread to bottom.
|
||||
useEffect(() => {
|
||||
const el = threadRef.current;
|
||||
if (el) el.scrollTop = el.scrollHeight;
|
||||
}, [turns, busy]);
|
||||
|
||||
// AI is hidden entirely when the backend isn't configured.
|
||||
if (usage && usage.configured === false) return null;
|
||||
|
||||
const sendChat = async () => {
|
||||
// Best-effort: persist the given turns to the server thread. A persistence
|
||||
// blip must not fail the user's interaction, but must not be swallowed.
|
||||
const persist = (msgs: ChatTurn[]) => {
|
||||
apiFetch("/api/admin/ai/history", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
messages: msgs.map((m) => ({
|
||||
role: m.role,
|
||||
content: m.content.slice(0, MAX_STORE),
|
||||
})),
|
||||
}),
|
||||
})
|
||||
.then((r) => {
|
||||
if (!r.ok) return r.json().then((b) => Promise.reject(b?.error));
|
||||
})
|
||||
.catch((e) => console.error("[ai] history persist failed", e));
|
||||
};
|
||||
|
||||
// Attaching only *stages* files — nothing is sent until the user presses
|
||||
// Odeslat. We append (multiple picks accumulate) and clear the input element.
|
||||
const onFiles = (files: FileList | null) => {
|
||||
if (!files || files.length === 0) return;
|
||||
setAttachments((a) => [
|
||||
...a,
|
||||
...Array.from(files).map((file) => ({ id: nextUid(), file })),
|
||||
]);
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
};
|
||||
|
||||
const removeAttachment = (id: string) =>
|
||||
setAttachments((a) => a.filter((s) => s.id !== id));
|
||||
|
||||
// Disabled until history has settled, so the user can't send a turn before
|
||||
// the seed runs (which would otherwise let a late history load clobber it).
|
||||
const canSubmit =
|
||||
!historyPending && !busy && (!!input.trim() || attachments.length > 0);
|
||||
|
||||
// Single submit (Odeslat). With staged attachments → extract invoices for
|
||||
// review (the typed message is shown as a caption; the assistant's summary is
|
||||
// the reply to it). Otherwise → a normal chat turn.
|
||||
const submit = async () => {
|
||||
if (busy) return;
|
||||
const text = input.trim();
|
||||
if (!text || busy) return;
|
||||
const next = [...turns, { role: "user" as const, content: text }];
|
||||
setTurns(next);
|
||||
setInput("");
|
||||
const files = attachments.map((a) => a.file);
|
||||
if (!text && files.length === 0) return;
|
||||
|
||||
// Any interaction means the thread is "live"; a late-arriving history load
|
||||
// must not overwrite it (belt-and-suspenders alongside the canSubmit gate).
|
||||
seeded.current = true;
|
||||
const prevTurns = turns; // snapshot for rollback on failure
|
||||
setBusy(true);
|
||||
|
||||
const userContent = [
|
||||
text,
|
||||
files.length > 0 ? `📎 ${files.map((f) => f.name).join(", ")}` : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join("\n");
|
||||
const optimistic: ChatTurn[] = [
|
||||
...turns,
|
||||
{ role: "user", content: userContent },
|
||||
];
|
||||
setTurns(optimistic);
|
||||
|
||||
try {
|
||||
const res = await apiFetch("/api/admin/ai/chat", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ messages: next }),
|
||||
});
|
||||
const body = await res.json();
|
||||
if (!res.ok) throw new Error(body?.error || "Chyba AI");
|
||||
setTurns((t) => [...t, { role: "assistant", content: body.data.reply }]);
|
||||
qc.invalidateQueries({ queryKey: ["ai", "usage"] });
|
||||
if (files.length > 0) {
|
||||
const fd = new FormData();
|
||||
files.forEach((f) => fd.append("files", f));
|
||||
const res = await apiFetch("/api/admin/ai/extract-invoices", {
|
||||
method: "POST",
|
||||
body: fd,
|
||||
});
|
||||
const body = await res.json();
|
||||
if (!res.ok) throw new Error(body?.error || "Chyba čtení faktur");
|
||||
// The server iterates parts serially and pushes one result per file in
|
||||
// submission order (truncating only if budget runs out mid-batch), so
|
||||
// files[i] is reliably this result's File — more robust than matching by
|
||||
// name, which would collide on duplicate filenames.
|
||||
const reviews: ReviewInvoice[] = (
|
||||
body.data.invoices as Array<{
|
||||
file_name: string;
|
||||
fields?: ExtractedInvoice;
|
||||
error?: string;
|
||||
}>
|
||||
)
|
||||
.map((r, i): ReviewInvoice | null => {
|
||||
const f = r.fields;
|
||||
return f
|
||||
? {
|
||||
uid: nextUid(),
|
||||
supplier_name: f.supplier_name ?? "",
|
||||
invoice_number: f.invoice_number ?? "",
|
||||
amount: f.amount != null ? String(f.amount) : "",
|
||||
currency: f.currency ?? "",
|
||||
vat_rate: f.vat_rate != null ? String(f.vat_rate) : "",
|
||||
issue_date: f.issue_date ?? "",
|
||||
due_date: f.due_date ?? "",
|
||||
description: f.description ?? "",
|
||||
file_name: r.file_name,
|
||||
file: files[i],
|
||||
}
|
||||
: null;
|
||||
})
|
||||
.filter((x): x is ReviewInvoice => x !== null);
|
||||
setReview((prev) => [...prev, ...reviews]);
|
||||
const note = summaryNote(reviews);
|
||||
setTurns((t) => [...t, { role: "assistant", content: note }]);
|
||||
setInput("");
|
||||
setAttachments([]);
|
||||
persist([
|
||||
{ role: "user", content: userContent },
|
||||
{ role: "assistant", content: note },
|
||||
]);
|
||||
qc.invalidateQueries({ queryKey: ["ai", "usage"] });
|
||||
} else {
|
||||
// Send only recent context, and ensure it starts on a user turn (the
|
||||
// Anthropic API requires the first message to be from the user).
|
||||
let ctx = optimistic.slice(-MODEL_CONTEXT);
|
||||
while (ctx.length && ctx[0].role !== "user") ctx = ctx.slice(1);
|
||||
const res = await apiFetch("/api/admin/ai/chat", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ messages: ctx }),
|
||||
});
|
||||
const body = await res.json();
|
||||
if (!res.ok) throw new Error(body?.error || "Chyba AI");
|
||||
const reply: string = body.data.reply;
|
||||
setTurns((t) => [...t, { role: "assistant", content: reply }]);
|
||||
setInput("");
|
||||
persist([
|
||||
{ role: "user", content: userContent },
|
||||
{ role: "assistant", content: reply },
|
||||
]);
|
||||
qc.invalidateQueries({ queryKey: ["ai", "usage"] });
|
||||
}
|
||||
} catch (e) {
|
||||
alert.error(e instanceof Error ? e.message : "Chyba AI");
|
||||
// Roll back the optimistic user turn and KEEP input + attachments so the
|
||||
// user can retry without losing their typed text or staged PDFs.
|
||||
setTurns(prevTurns);
|
||||
const fallback = files.length > 0 ? "Chyba čtení faktur" : "Chyba AI";
|
||||
alert.error(e instanceof Error ? e.message : fallback);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onFiles = async (files: FileList | null) => {
|
||||
if (!files || files.length === 0 || busy) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const fd = new FormData();
|
||||
Array.from(files).forEach((f) => fd.append("files", f));
|
||||
const res = await apiFetch("/api/admin/ai/extract-invoices", {
|
||||
method: "POST",
|
||||
body: fd,
|
||||
});
|
||||
const body = await res.json();
|
||||
if (!res.ok) throw new Error(body?.error || "Chyba čtení faktur");
|
||||
// The server iterates the multipart parts serially and pushes one result
|
||||
// per file in submission order (truncating only if the budget runs out
|
||||
// mid-batch), so arr[i] is reliably this result's original File — more
|
||||
// robust than name-matching, which would collide on duplicate filenames.
|
||||
const arr = Array.from(files);
|
||||
const reviews: ReviewInvoice[] = (
|
||||
body.data.invoices as Array<{
|
||||
file_name: string;
|
||||
fields?: ExtractedInvoice;
|
||||
error?: string;
|
||||
}>
|
||||
)
|
||||
.map((r, i): ReviewInvoice | null => {
|
||||
const f = r.fields;
|
||||
return f
|
||||
? {
|
||||
uid: crypto.randomUUID(),
|
||||
supplier_name: f.supplier_name ?? "",
|
||||
invoice_number: f.invoice_number ?? "",
|
||||
amount: f.amount != null ? String(f.amount) : "",
|
||||
currency: f.currency ?? "",
|
||||
vat_rate: f.vat_rate != null ? String(f.vat_rate) : "",
|
||||
issue_date: f.issue_date ?? "",
|
||||
due_date: f.due_date ?? "",
|
||||
description: f.description ?? "",
|
||||
file_name: r.file_name,
|
||||
file: arr[i],
|
||||
}
|
||||
: null;
|
||||
})
|
||||
.filter((x): x is ReviewInvoice => x !== null);
|
||||
setReview((prev) => [...prev, ...reviews]);
|
||||
setTurns((t) => [
|
||||
...t,
|
||||
{
|
||||
role: "assistant",
|
||||
content: `Načetl jsem ${reviews.length} faktur k potvrzení.`,
|
||||
},
|
||||
]);
|
||||
qc.invalidateQueries({ queryKey: ["ai", "usage"] });
|
||||
} catch (e) {
|
||||
alert.error(e instanceof Error ? e.message : "Chyba čtení faktur");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const saveInvoice = async (inv: ReviewInvoice, idx: number) => {
|
||||
const saveInvoice = async (inv: ReviewInvoice) => {
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const fd = new FormData();
|
||||
@@ -161,7 +303,7 @@ export default function DashAssistant() {
|
||||
const body = await res.json();
|
||||
if (!res.ok) throw new Error(body?.error || "Uložení selhalo");
|
||||
alert.success("Faktura uložena");
|
||||
setReview((r) => r.filter((_, i) => i !== idx));
|
||||
setReview((r) => r.filter((x) => x.uid !== inv.uid));
|
||||
qc.invalidateQueries({ queryKey: ["received-invoices"] });
|
||||
} catch (e) {
|
||||
alert.error(e instanceof Error ? e.message : "Uložení selhalo");
|
||||
@@ -170,45 +312,116 @@ export default function DashAssistant() {
|
||||
}
|
||||
};
|
||||
|
||||
const patch = (idx: number, field: EditableField, value: string) =>
|
||||
const clearHistory = async () => {
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const res = await apiFetch("/api/admin/ai/history", { method: "DELETE" });
|
||||
if (!res.ok) throw new Error("Nepodařilo se vymazat historii");
|
||||
setTurns([]);
|
||||
setReview([]);
|
||||
} catch (e) {
|
||||
alert.error(e instanceof Error ? e.message : "Chyba");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const patch = (uid: string, field: EditableField, value: string) =>
|
||||
setReview((r) =>
|
||||
r.map((inv, i) => (i === idx ? { ...inv, [field]: value } : inv)),
|
||||
r.map((inv) => (inv.uid === uid ? { ...inv, [field]: value } : inv)),
|
||||
);
|
||||
|
||||
const fieldCols = { xs: "1fr", sm: "1fr 1fr" };
|
||||
|
||||
return (
|
||||
<Card sx={{ mb: 3 }}>
|
||||
{/* Header */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: 1,
|
||||
mb: 1.5,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
sx={{ fontWeight: 600, color: "text.secondary" }}
|
||||
>
|
||||
AI asistent
|
||||
</Typography>
|
||||
{usage && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Utraceno: ${usage.month_spend_usd.toFixed(2)} / $
|
||||
{usage.budget_usd.toFixed(2)}
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Box
|
||||
sx={{
|
||||
px: 0.75,
|
||||
py: 0.25,
|
||||
borderRadius: 1,
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
letterSpacing: 0.5,
|
||||
color: "common.white",
|
||||
bgcolor: "primary.main",
|
||||
}}
|
||||
>
|
||||
AI
|
||||
</Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
|
||||
Asistent
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
{usage && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Utraceno: ${usage.month_spend_usd.toFixed(2)} / $
|
||||
{usage.budget_usd.toFixed(2)}
|
||||
</Typography>
|
||||
)}
|
||||
{turns.length > 0 && (
|
||||
<Button
|
||||
variant="text"
|
||||
color="inherit"
|
||||
size="small"
|
||||
onClick={clearHistory}
|
||||
disabled={busy}
|
||||
sx={{ minWidth: 0, color: "text.secondary" }}
|
||||
>
|
||||
Vymazat
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Thread */}
|
||||
<Box
|
||||
ref={threadRef}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 1,
|
||||
maxHeight: 280,
|
||||
minHeight: 120,
|
||||
maxHeight: 360,
|
||||
overflowY: "auto",
|
||||
mb: 1,
|
||||
mb: 1.5,
|
||||
p: 1,
|
||||
borderRadius: 2,
|
||||
bgcolor: "action.hover",
|
||||
}}
|
||||
>
|
||||
{turns.length === 0 && !busy && (
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
textAlign: "center",
|
||||
color: "text.secondary",
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ color: "inherit" }}>
|
||||
{historyPending
|
||||
? "Načítám…"
|
||||
: "Zeptejte se, nebo přiložte fakturu (PDF) k automatickému importu."}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{turns.map((t, i) => (
|
||||
<Box
|
||||
key={i}
|
||||
@@ -218,76 +431,168 @@ export default function DashAssistant() {
|
||||
px: 1.5,
|
||||
py: 1,
|
||||
borderRadius: 2,
|
||||
bgcolor: t.role === "user" ? "primary.main" : "action.hover",
|
||||
color: t.role === "user" ? "common.white" : "text.primary",
|
||||
boxShadow: 1,
|
||||
bgcolor: t.role === "user" ? "primary.main" : "background.paper",
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
|
||||
{/* Color MUST sit on the Typography: GlobalStyles pins `p` to
|
||||
text.secondary, which beats a color merely inherited from the
|
||||
Box. An sx class on the element wins over that element rule. */}
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
whiteSpace: "pre-wrap",
|
||||
color: t.role === "user" ? "common.white" : "text.primary",
|
||||
}}
|
||||
>
|
||||
{t.content}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
{review.map((inv, idx) => (
|
||||
<Card key={inv.uid} variant="outlined" sx={{ p: 1.5 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{inv.file_name}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 1,
|
||||
mt: 0.5,
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
label="Dodavatel"
|
||||
value={inv.supplier_name}
|
||||
onChange={(e) => patch(idx, "supplier_name", e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
label="Číslo faktury"
|
||||
value={inv.invoice_number ?? ""}
|
||||
onChange={(e) => patch(idx, "invoice_number", e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
label="Částka"
|
||||
value={inv.amount}
|
||||
onChange={(e) => patch(idx, "amount", e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
label="Měna"
|
||||
value={inv.currency}
|
||||
onChange={(e) => patch(idx, "currency", e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
label="Sazba DPH %"
|
||||
value={inv.vat_rate}
|
||||
onChange={(e) => patch(idx, "vat_rate", e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
label="Datum vystavení"
|
||||
value={inv.issue_date ?? ""}
|
||||
onChange={(e) => patch(idx, "issue_date", e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", gap: 1, mt: 1 }}>
|
||||
<Button onClick={() => saveInvoice(inv, idx)} disabled={busy}>
|
||||
Uložit
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={() => setReview((r) => r.filter((_, i) => i !== idx))}
|
||||
disabled={busy}
|
||||
>
|
||||
Zahodit
|
||||
</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{busy && (
|
||||
<Box
|
||||
sx={{
|
||||
alignSelf: "flex-start",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
px: 1.5,
|
||||
py: 1,
|
||||
color: "text.secondary",
|
||||
}}
|
||||
>
|
||||
<CircularProgress size={14} />
|
||||
<Typography variant="caption">Pracuji…</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Pending invoices to confirm — rendered OUTSIDE the scrollable thread so
|
||||
the Uložit button is always reachable (the page scrolls if there are
|
||||
many), and editing a field never yanks the chat scroll. */}
|
||||
{review.length > 0 && (
|
||||
<Box sx={{ mb: 1.5 }}>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
sx={{ fontWeight: 600, color: "text.secondary", mb: 1 }}
|
||||
>
|
||||
Faktury k potvrzení ({review.length})
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
|
||||
{review.map((inv) => (
|
||||
<Card key={inv.uid} variant="outlined" sx={{ p: 1.5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
<Chip label="Faktura" size="small" color="primary" />
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
noWrap
|
||||
title={inv.file_name}
|
||||
>
|
||||
{inv.file_name}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: fieldCols,
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
label="Dodavatel"
|
||||
value={inv.supplier_name}
|
||||
onChange={(e) =>
|
||||
patch(inv.uid, "supplier_name", e.target.value)
|
||||
}
|
||||
/>
|
||||
<TextField
|
||||
label="Číslo faktury"
|
||||
value={inv.invoice_number}
|
||||
onChange={(e) =>
|
||||
patch(inv.uid, "invoice_number", e.target.value)
|
||||
}
|
||||
/>
|
||||
<TextField
|
||||
label="Částka"
|
||||
value={inv.amount}
|
||||
onChange={(e) => patch(inv.uid, "amount", e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
label="Měna"
|
||||
value={inv.currency}
|
||||
onChange={(e) => patch(inv.uid, "currency", e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
label="Sazba DPH %"
|
||||
value={inv.vat_rate}
|
||||
onChange={(e) => patch(inv.uid, "vat_rate", e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
label="Datum vystavení"
|
||||
value={inv.issue_date}
|
||||
onChange={(e) =>
|
||||
patch(inv.uid, "issue_date", e.target.value)
|
||||
}
|
||||
/>
|
||||
<TextField
|
||||
label="Datum splatnosti"
|
||||
value={inv.due_date}
|
||||
onChange={(e) => patch(inv.uid, "due_date", e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
label="Popis"
|
||||
value={inv.description}
|
||||
onChange={(e) =>
|
||||
patch(inv.uid, "description", e.target.value)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", gap: 1, mt: 1.5 }}>
|
||||
<Button onClick={() => saveInvoice(inv)} disabled={busy}>
|
||||
Uložit
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={() =>
|
||||
setReview((r) => r.filter((x) => x.uid !== inv.uid))
|
||||
}
|
||||
disabled={busy}
|
||||
>
|
||||
Zahodit
|
||||
</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Staged attachments */}
|
||||
{attachments.length > 0 && (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5, mb: 1 }}>
|
||||
{attachments.map((s) => (
|
||||
<Chip
|
||||
key={s.id}
|
||||
label={s.file.name}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
onDelete={busy ? undefined : () => removeAttachment(s.id)}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Composer */}
|
||||
<Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
|
||||
<input
|
||||
ref={fileRef}
|
||||
@@ -303,7 +608,7 @@ export default function DashAssistant() {
|
||||
onClick={() => fileRef.current?.click()}
|
||||
disabled={busy}
|
||||
>
|
||||
Přiložit fakturu
|
||||
Přiložit
|
||||
</Button>
|
||||
<TextField
|
||||
fullWidth
|
||||
@@ -313,11 +618,11 @@ export default function DashAssistant() {
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendChat();
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button onClick={sendChat} disabled={busy || !input.trim()}>
|
||||
<Button onClick={submit} disabled={!canSubmit}>
|
||||
Odeslat
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
@@ -16,6 +16,35 @@ import useDialogScrollLock from "../../ui/useDialogScrollLock";
|
||||
|
||||
const API_BASE = "/api/admin";
|
||||
|
||||
// Copy helper. navigator.clipboard is SECURE-CONTEXT ONLY (undefined over plain
|
||||
// HTTP on a LAN), so we fall back to the legacy execCommand path — which works
|
||||
// in insecure contexts — and report whether the copy actually succeeded. The
|
||||
// caller MUST gate its success toast on the returned boolean (otherwise it lies
|
||||
// to the user about copying 2FA codes / the TOTP secret).
|
||||
async function copyToClipboard(text: string): Promise<boolean> {
|
||||
try {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
}
|
||||
} catch {
|
||||
// fall through to the legacy path
|
||||
}
|
||||
try {
|
||||
const ta = document.createElement("textarea");
|
||||
ta.value = text;
|
||||
ta.style.position = "fixed";
|
||||
ta.style.opacity = "0";
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
const ok = document.execCommand("copy");
|
||||
document.body.removeChild(ta);
|
||||
return ok;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
interface DashProfileProps {
|
||||
totpEnabled: boolean;
|
||||
totpLoading: boolean;
|
||||
@@ -480,9 +509,10 @@ export default function DashProfile({
|
||||
</Box>
|
||||
<Box sx={{ mt: 1.5 }}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
navigator.clipboard?.writeText(backupCodes.join("\n"));
|
||||
alert.success("Kódy zkopírovány");
|
||||
onClick={async () => {
|
||||
const ok = await copyToClipboard(backupCodes.join("\n"));
|
||||
if (ok) alert.success("Kódy zkopírovány");
|
||||
else alert.error("Kopírování selhalo – zkopírujte ručně");
|
||||
}}
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
@@ -543,9 +573,11 @@ export default function DashProfile({
|
||||
>
|
||||
<span>{totpSecret}</span>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
navigator.clipboard?.writeText(totpSecret);
|
||||
alert.success("Klíč zkopírován");
|
||||
onClick={async () => {
|
||||
const ok = await copyToClipboard(totpSecret);
|
||||
if (ok) alert.success("Klíč zkopírován");
|
||||
else
|
||||
alert.error("Kopírování selhalo – zkopírujte ručně");
|
||||
}}
|
||||
size="small"
|
||||
title="Kopírovat"
|
||||
|
||||
@@ -19,9 +19,28 @@ export interface ExtractedInvoice {
|
||||
description: string | null;
|
||||
}
|
||||
|
||||
export interface StoredChatMessage {
|
||||
role: "user" | "assistant";
|
||||
content: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export const aiUsageOptions = () =>
|
||||
queryOptions({
|
||||
queryKey: ["ai", "usage"],
|
||||
queryFn: () => jsonQuery<AiUsage>("/api/admin/ai/usage"),
|
||||
staleTime: 30_000,
|
||||
});
|
||||
|
||||
export const aiHistoryOptions = () =>
|
||||
queryOptions({
|
||||
queryKey: ["ai", "history"],
|
||||
queryFn: () =>
|
||||
jsonQuery<{ messages: StoredChatMessage[] }>("/api/admin/ai/history"),
|
||||
// Within a mount the thread is seeded once and mutated locally, so don't
|
||||
// refetch on focus (staleTime Infinity). But gcTime 0 drops the cache on
|
||||
// unmount, so every remount re-reads the DB (the source of truth) — this
|
||||
// is what keeps a cleared/appended thread from resurrecting stale messages.
|
||||
staleTime: Infinity,
|
||||
gcTime: 0,
|
||||
});
|
||||
|
||||
@@ -3,7 +3,11 @@ import multipart from "@fastify/multipart";
|
||||
import { requirePermission } from "../../middleware/auth";
|
||||
import { success, error } from "../../utils/response";
|
||||
import { parseBody } from "../../schemas/common";
|
||||
import { AiChatSchema, AiBudgetSchema } from "../../schemas/ai.schema";
|
||||
import {
|
||||
AiChatSchema,
|
||||
AiBudgetSchema,
|
||||
AiHistoryAppendSchema,
|
||||
} from "../../schemas/ai.schema";
|
||||
import { logAudit } from "../../services/audit";
|
||||
import { config } from "../../config/env";
|
||||
import {
|
||||
@@ -14,6 +18,9 @@ import {
|
||||
setBudgetUsd,
|
||||
chat,
|
||||
extractInvoice,
|
||||
getChatHistory,
|
||||
appendChatMessages,
|
||||
clearChatHistory,
|
||||
type ExtractedInvoice,
|
||||
} from "../../services/ai.service";
|
||||
|
||||
@@ -123,4 +130,36 @@ export default async function aiRoutes(app: FastifyInstance): Promise<void> {
|
||||
return success(reply, { invoices: results });
|
||||
},
|
||||
);
|
||||
|
||||
// GET /api/admin/ai/history — this user's stored chat thread
|
||||
app.get(
|
||||
"/history",
|
||||
{ preHandler: requirePermission("ai.use") },
|
||||
async (request: FastifyRequest, reply: FastifyReply) => {
|
||||
const messages = await getChatHistory(request.authData!.userId);
|
||||
return success(reply, { messages });
|
||||
},
|
||||
);
|
||||
|
||||
// POST /api/admin/ai/history — append turns to this user's thread
|
||||
app.post(
|
||||
"/history",
|
||||
{ preHandler: requirePermission("ai.use") },
|
||||
async (request: FastifyRequest, reply: FastifyReply) => {
|
||||
const body = parseBody(AiHistoryAppendSchema, request.body);
|
||||
if ("error" in body) return error(reply, body.error, 400);
|
||||
await appendChatMessages(request.authData!.userId, body.data.messages);
|
||||
return success(reply, { ok: true });
|
||||
},
|
||||
);
|
||||
|
||||
// DELETE /api/admin/ai/history — clear this user's thread
|
||||
app.delete(
|
||||
"/history",
|
||||
{ preHandler: requirePermission("ai.use") },
|
||||
async (request: FastifyRequest, reply: FastifyReply) => {
|
||||
await clearChatHistory(request.authData!.userId);
|
||||
return success(reply, { ok: true });
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,6 +12,18 @@ export const AiChatSchema = z.object({
|
||||
.max(100, "Příliš mnoho zpráv"),
|
||||
});
|
||||
|
||||
export const AiHistoryAppendSchema = z.object({
|
||||
messages: z
|
||||
.array(
|
||||
z.object({
|
||||
role: z.enum(["user", "assistant"]),
|
||||
content: z.string().min(1).max(8000),
|
||||
}),
|
||||
)
|
||||
.min(1, "Žádné zprávy")
|
||||
.max(20, "Příliš mnoho zpráv"),
|
||||
});
|
||||
|
||||
export const AiBudgetSchema = z.object({
|
||||
budget_usd: z
|
||||
.union([z.number(), z.string()])
|
||||
|
||||
@@ -104,6 +104,50 @@ export async function assertBudgetAvailable(): Promise<{
|
||||
return null;
|
||||
}
|
||||
|
||||
// ── Chat history (server-side, permanent, per user) ───────────────────────
|
||||
export interface StoredChatMessage {
|
||||
role: string;
|
||||
content: string;
|
||||
created_at: Date;
|
||||
}
|
||||
|
||||
// Cap how many turns we read back / display. The full thread stays in the DB;
|
||||
// this only bounds a single GET payload (and, on the client, the model context).
|
||||
const HISTORY_LIMIT = 200;
|
||||
|
||||
/** This user's chat thread, oldest → newest, capped at HISTORY_LIMIT. */
|
||||
export async function getChatHistory(
|
||||
userId: number,
|
||||
): Promise<StoredChatMessage[]> {
|
||||
const rows = await prisma.ai_chat_messages.findMany({
|
||||
where: { user_id: userId },
|
||||
orderBy: { id: "desc" },
|
||||
take: HISTORY_LIMIT,
|
||||
select: { role: true, content: true, created_at: true },
|
||||
});
|
||||
return rows.reverse();
|
||||
}
|
||||
|
||||
/** Append turns to this user's thread (best-effort caller). */
|
||||
export async function appendChatMessages(
|
||||
userId: number,
|
||||
messages: { role: string; content: string }[],
|
||||
): Promise<void> {
|
||||
if (messages.length === 0) return;
|
||||
await prisma.ai_chat_messages.createMany({
|
||||
data: messages.map((m) => ({
|
||||
user_id: userId,
|
||||
role: m.role,
|
||||
content: m.content,
|
||||
})),
|
||||
});
|
||||
}
|
||||
|
||||
/** Wipe this user's thread. */
|
||||
export async function clearChatHistory(userId: number): Promise<void> {
|
||||
await prisma.ai_chat_messages.deleteMany({ where: { user_id: userId } });
|
||||
}
|
||||
|
||||
export interface ChatMessage {
|
||||
role: "user" | "assistant";
|
||||
content: string;
|
||||
|
||||
Reference in New Issue
Block a user