feat(odin): tabs, thread, review-card, composer components
Add four presentational components + shared types under src/admin/components/odin/ as props-driven building blocks for the multi-conversation Odin page (Task 6 wires state/queries). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
BOHA
113
src/admin/components/odin/InvoiceReviewCard.tsx
Normal file
113
src/admin/components/odin/InvoiceReviewCard.tsx
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
import Box from "@mui/material/Box";
|
||||||
|
import Typography from "@mui/material/Typography";
|
||||||
|
import Chip from "@mui/material/Chip";
|
||||||
|
import { Card, Button, TextField } from "../../ui";
|
||||||
|
import type { ReviewInvoice, EditableField } from "./types";
|
||||||
|
|
||||||
|
interface InvoiceReviewCardProps {
|
||||||
|
inv: ReviewInvoice;
|
||||||
|
busy: boolean;
|
||||||
|
onChange: (uid: string, field: EditableField, value: string) => void;
|
||||||
|
onSave: (inv: ReviewInvoice) => void;
|
||||||
|
onDiscard: (uid: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const fieldCols = { xs: "1fr", sm: "1fr 1fr" };
|
||||||
|
|
||||||
|
export default function InvoiceReviewCard({
|
||||||
|
inv,
|
||||||
|
busy,
|
||||||
|
onChange,
|
||||||
|
onSave,
|
||||||
|
onDiscard,
|
||||||
|
}: InvoiceReviewCardProps) {
|
||||||
|
return (
|
||||||
|
<Card variant="outlined" sx={{ p: 1.5 }}>
|
||||||
|
{/* Header: chip + filename */}
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* 2-column field grid */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateColumns: fieldCols,
|
||||||
|
gap: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
label="Dodavatel"
|
||||||
|
value={inv.supplier_name}
|
||||||
|
disabled={busy}
|
||||||
|
onChange={(e) => onChange(inv.uid, "supplier_name", e.target.value)}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Číslo faktury"
|
||||||
|
value={inv.invoice_number}
|
||||||
|
disabled={busy}
|
||||||
|
onChange={(e) => onChange(inv.uid, "invoice_number", e.target.value)}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Částka s DPH"
|
||||||
|
value={inv.amount}
|
||||||
|
disabled={busy}
|
||||||
|
onChange={(e) => onChange(inv.uid, "amount", e.target.value)}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Měna"
|
||||||
|
value={inv.currency}
|
||||||
|
disabled={busy}
|
||||||
|
onChange={(e) => onChange(inv.uid, "currency", e.target.value)}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Sazba DPH %"
|
||||||
|
value={inv.vat_rate}
|
||||||
|
disabled={busy}
|
||||||
|
onChange={(e) => onChange(inv.uid, "vat_rate", e.target.value)}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Datum vystavení"
|
||||||
|
value={inv.issue_date}
|
||||||
|
disabled={busy}
|
||||||
|
onChange={(e) => onChange(inv.uid, "issue_date", e.target.value)}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Datum splatnosti"
|
||||||
|
value={inv.due_date}
|
||||||
|
disabled={busy}
|
||||||
|
onChange={(e) => onChange(inv.uid, "due_date", e.target.value)}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Popis"
|
||||||
|
value={inv.description}
|
||||||
|
disabled={busy}
|
||||||
|
onChange={(e) => onChange(inv.uid, "description", e.target.value)}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<Box sx={{ display: "flex", gap: 1, mt: 1.5 }}>
|
||||||
|
<Button onClick={() => onSave(inv)} disabled={busy}>
|
||||||
|
Uložit
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
color="inherit"
|
||||||
|
onClick={() => onDiscard(inv.uid)}
|
||||||
|
disabled={busy}
|
||||||
|
>
|
||||||
|
Zahodit
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
82
src/admin/components/odin/OdinComposer.tsx
Normal file
82
src/admin/components/odin/OdinComposer.tsx
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
import Box from "@mui/material/Box";
|
||||||
|
import Chip from "@mui/material/Chip";
|
||||||
|
import { Button, TextField } from "../../ui";
|
||||||
|
import type { StagedFile } from "./types";
|
||||||
|
|
||||||
|
interface OdinComposerProps {
|
||||||
|
input: string;
|
||||||
|
attachments: StagedFile[];
|
||||||
|
busy: boolean;
|
||||||
|
canSubmit: boolean;
|
||||||
|
fileRef: React.RefObject<HTMLInputElement | null>;
|
||||||
|
onInput: (v: string) => void;
|
||||||
|
onFiles: (files: FileList | null) => void;
|
||||||
|
onRemoveAttachment: (id: string) => void;
|
||||||
|
onSubmit: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function OdinComposer({
|
||||||
|
input,
|
||||||
|
attachments,
|
||||||
|
busy,
|
||||||
|
canSubmit,
|
||||||
|
fileRef,
|
||||||
|
onInput,
|
||||||
|
onFiles,
|
||||||
|
onRemoveAttachment,
|
||||||
|
onSubmit,
|
||||||
|
}: OdinComposerProps) {
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
{/* Staged attachment chips */}
|
||||||
|
{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 : () => onRemoveAttachment(s.id)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Composer row */}
|
||||||
|
<Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
|
||||||
|
<input
|
||||||
|
ref={fileRef as React.RefObject<HTMLInputElement>}
|
||||||
|
type="file"
|
||||||
|
accept="application/pdf,image/*"
|
||||||
|
multiple
|
||||||
|
hidden
|
||||||
|
onChange={(e) => onFiles(e.target.files)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
color="inherit"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={() => fileRef.current?.click()}
|
||||||
|
>
|
||||||
|
Přiložit
|
||||||
|
</Button>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
placeholder="Napište zprávu…"
|
||||||
|
value={input}
|
||||||
|
onChange={(e) => onInput(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter" && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
onSubmit();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Button onClick={onSubmit} disabled={!canSubmit}>
|
||||||
|
Odeslat
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
164
src/admin/components/odin/OdinTabs.tsx
Normal file
164
src/admin/components/odin/OdinTabs.tsx
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import Box from "@mui/material/Box";
|
||||||
|
import Menu from "@mui/material/Menu";
|
||||||
|
import MenuItem from "@mui/material/MenuItem";
|
||||||
|
import IconButton from "@mui/material/IconButton";
|
||||||
|
import { Button, TextField, Modal, ConfirmDialog } from "../../ui";
|
||||||
|
|
||||||
|
interface OdinTabsProps {
|
||||||
|
conversations: { id: number; title: string }[];
|
||||||
|
activeId: number | null;
|
||||||
|
busy: boolean;
|
||||||
|
onSelect: (id: number) => void;
|
||||||
|
onNew: () => void;
|
||||||
|
onRename: (id: number, title: string) => void;
|
||||||
|
onDelete: (id: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function OdinTabs({
|
||||||
|
conversations,
|
||||||
|
activeId,
|
||||||
|
busy,
|
||||||
|
onSelect,
|
||||||
|
onNew,
|
||||||
|
onRename,
|
||||||
|
onDelete,
|
||||||
|
}: OdinTabsProps) {
|
||||||
|
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
|
||||||
|
const [renameOpen, setRenameOpen] = useState(false);
|
||||||
|
const [renameDraft, setRenameDraft] = useState("");
|
||||||
|
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||||
|
|
||||||
|
const activeConv = conversations.find((c) => c.id === activeId) ?? null;
|
||||||
|
|
||||||
|
const openMenu = (e: React.MouseEvent<HTMLElement>) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setAnchorEl(e.currentTarget);
|
||||||
|
};
|
||||||
|
const closeMenu = () => setAnchorEl(null);
|
||||||
|
|
||||||
|
const handleRenameOpen = () => {
|
||||||
|
closeMenu();
|
||||||
|
setRenameDraft(activeConv?.title ?? "");
|
||||||
|
setRenameOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRenameSubmit = () => {
|
||||||
|
if (activeId !== null) {
|
||||||
|
onRename(activeId, renameDraft.trim() || (activeConv?.title ?? ""));
|
||||||
|
}
|
||||||
|
setRenameOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteOpen = () => {
|
||||||
|
closeMenu();
|
||||||
|
setDeleteOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteConfirm = () => {
|
||||||
|
if (activeId !== null) {
|
||||||
|
onDelete(activeId);
|
||||||
|
}
|
||||||
|
setDeleteOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
gap: 0.5,
|
||||||
|
overflowX: "auto",
|
||||||
|
pb: 0.5,
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{conversations.map((conv) => {
|
||||||
|
const isActive = conv.id === activeId;
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
key={conv.id}
|
||||||
|
sx={{ display: "flex", alignItems: "center", flexShrink: 0 }}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
variant={isActive ? "contained" : "outlined"}
|
||||||
|
color={isActive ? "primary" : "inherit"}
|
||||||
|
disabled={busy}
|
||||||
|
onClick={() => onSelect(conv.id)}
|
||||||
|
>
|
||||||
|
{conv.title}
|
||||||
|
</Button>
|
||||||
|
{isActive && (
|
||||||
|
<IconButton
|
||||||
|
size="small"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={openMenu}
|
||||||
|
aria-label="Možnosti konverzace"
|
||||||
|
title="Možnosti konverzace"
|
||||||
|
sx={{ ml: 0.25 }}
|
||||||
|
>
|
||||||
|
⋮
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
variant="outlined"
|
||||||
|
color="inherit"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={onNew}
|
||||||
|
sx={{ flexShrink: 0 }}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Overflow menu */}
|
||||||
|
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={closeMenu}>
|
||||||
|
<MenuItem onClick={handleRenameOpen}>Přejmenovat</MenuItem>
|
||||||
|
<MenuItem onClick={handleDeleteOpen}>Smazat</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
|
||||||
|
{/* Rename modal */}
|
||||||
|
<Modal
|
||||||
|
isOpen={renameOpen}
|
||||||
|
onClose={() => setRenameOpen(false)}
|
||||||
|
onSubmit={handleRenameSubmit}
|
||||||
|
title="Přejmenovat konverzaci"
|
||||||
|
submitText="Přejmenovat"
|
||||||
|
maxWidth="xs"
|
||||||
|
>
|
||||||
|
<Box sx={{ pt: 1 }}>
|
||||||
|
<TextField
|
||||||
|
label="Název"
|
||||||
|
fullWidth
|
||||||
|
value={renameDraft}
|
||||||
|
onChange={(e) => setRenameDraft(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
e.preventDefault();
|
||||||
|
handleRenameSubmit();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
{/* Delete confirm */}
|
||||||
|
<ConfirmDialog
|
||||||
|
isOpen={deleteOpen}
|
||||||
|
onClose={() => setDeleteOpen(false)}
|
||||||
|
onConfirm={handleDeleteConfirm}
|
||||||
|
title="Smazat konverzaci"
|
||||||
|
message={`Opravdu chcete smazat konverzaci „${activeConv?.title ?? ""}"? Tuto akci nelze vrátit.`}
|
||||||
|
confirmText="Smazat"
|
||||||
|
confirmVariant="danger"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
158
src/admin/components/odin/OdinThread.tsx
Normal file
158
src/admin/components/odin/OdinThread.tsx
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
import Box from "@mui/material/Box";
|
||||||
|
import Typography from "@mui/material/Typography";
|
||||||
|
import CircularProgress from "@mui/material/CircularProgress";
|
||||||
|
import type { ChatTurn } from "./types";
|
||||||
|
|
||||||
|
interface OdinThreadProps {
|
||||||
|
turns: ChatTurn[];
|
||||||
|
busy: boolean;
|
||||||
|
loading: boolean;
|
||||||
|
threadRef: React.RefObject<HTMLDivElement | null>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Small Odin avatar shown to the left of assistant bubbles. */
|
||||||
|
function OdinAvatar({ size = 28 }: { size?: number }) {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
borderRadius: "50%",
|
||||||
|
bgcolor: "primary.main",
|
||||||
|
color: "common.white",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
fontWeight: 700,
|
||||||
|
fontSize: size * 0.5,
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
O
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function OdinThread({
|
||||||
|
turns,
|
||||||
|
busy,
|
||||||
|
loading,
|
||||||
|
threadRef,
|
||||||
|
}: OdinThreadProps) {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
ref={threadRef}
|
||||||
|
sx={{
|
||||||
|
flex: 1,
|
||||||
|
minHeight: 0,
|
||||||
|
overflowY: "auto",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 1.5,
|
||||||
|
p: 2,
|
||||||
|
bgcolor: "action.hover",
|
||||||
|
borderRadius: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Loading state — history is being fetched */}
|
||||||
|
{loading && (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
flex: 1,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="body2" sx={{ color: "text.secondary" }}>
|
||||||
|
Načítám…
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Empty state */}
|
||||||
|
{turns.length === 0 && !busy && !loading && (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
flex: 1,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
gap: 1.5,
|
||||||
|
textAlign: "center",
|
||||||
|
px: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<OdinAvatar size={44} />
|
||||||
|
<Typography variant="body2" sx={{ color: "text.secondary" }}>
|
||||||
|
Dobrý den, jsem Odin. Zeptejte se, nebo přiložte fakturu (PDF) k
|
||||||
|
importu.
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Message bubbles */}
|
||||||
|
{turns.map((t, i) => {
|
||||||
|
const isUser = t.role === "user";
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
key={i}
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "flex-end",
|
||||||
|
gap: 1,
|
||||||
|
alignSelf: isUser ? "flex-end" : "flex-start",
|
||||||
|
maxWidth: "80%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{!isUser && <OdinAvatar size={28} />}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
px: 1.5,
|
||||||
|
py: 1,
|
||||||
|
borderRadius: 2,
|
||||||
|
boxShadow: 1,
|
||||||
|
bgcolor: isUser ? "primary.main" : "background.paper",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 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: isUser ? "common.white" : "text.primary",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t.content}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Busy indicator */}
|
||||||
|
{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" sx={{ color: "inherit" }}>
|
||||||
|
Pracuji…
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
33
src/admin/components/odin/types.ts
Normal file
33
src/admin/components/odin/types.ts
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
export interface ChatTurn {
|
||||||
|
role: "user" | "assistant";
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ReviewInvoice {
|
||||||
|
uid: string;
|
||||||
|
supplier_name: string;
|
||||||
|
invoice_number: string;
|
||||||
|
amount: string;
|
||||||
|
currency: string;
|
||||||
|
vat_rate: string;
|
||||||
|
issue_date: string;
|
||||||
|
due_date: string;
|
||||||
|
description: string;
|
||||||
|
file_name: string;
|
||||||
|
file: File;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type EditableField =
|
||||||
|
| "supplier_name"
|
||||||
|
| "invoice_number"
|
||||||
|
| "amount"
|
||||||
|
| "currency"
|
||||||
|
| "vat_rate"
|
||||||
|
| "issue_date"
|
||||||
|
| "due_date"
|
||||||
|
| "description";
|
||||||
|
|
||||||
|
export interface StagedFile {
|
||||||
|
id: string;
|
||||||
|
file: File;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user