feat(odin): left sidebar + lazy conversation creation (claude.ai-style)
- Replace top tabs with a left sidebar (New chat + scrollable conversation list, per-row rename/delete menu, active highlight), chat on the right. - Fix duplicate-empty-conversations bug: "Nová konverzace" now just opens an empty composer; a DB row is created only on the first successful message (and a failed AI call no longer leaves an orphan conversation). Repeated clicks never spawn empties, and nothing empty survives a refresh. - Land on a fresh new chat on mount; deleting the open conversation returns to new chat. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
224
src/admin/components/odin/OdinSidebar.tsx
Normal file
224
src/admin/components/odin/OdinSidebar.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
import { useState } from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
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 OdinSidebarProps {
|
||||
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 OdinSidebar({
|
||||
conversations,
|
||||
activeId,
|
||||
busy,
|
||||
onSelect,
|
||||
onNew,
|
||||
onRename,
|
||||
onDelete,
|
||||
}: OdinSidebarProps) {
|
||||
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
|
||||
const [menuConv, setMenuConv] = useState<{
|
||||
id: number;
|
||||
title: string;
|
||||
} | null>(null);
|
||||
const [renameOpen, setRenameOpen] = useState(false);
|
||||
const [renameDraft, setRenameDraft] = useState("");
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
|
||||
const openMenu = (
|
||||
e: React.MouseEvent<HTMLElement>,
|
||||
conv: { id: number; title: string },
|
||||
) => {
|
||||
e.stopPropagation();
|
||||
setMenuConv(conv);
|
||||
setAnchorEl(e.currentTarget);
|
||||
};
|
||||
const closeMenu = () => setAnchorEl(null);
|
||||
|
||||
const handleRenameOpen = () => {
|
||||
closeMenu();
|
||||
setRenameDraft(menuConv?.title ?? "");
|
||||
setRenameOpen(true);
|
||||
};
|
||||
const handleRenameSubmit = () => {
|
||||
if (menuConv) onRename(menuConv.id, renameDraft.trim() || menuConv.title);
|
||||
setRenameOpen(false);
|
||||
};
|
||||
const handleDeleteOpen = () => {
|
||||
closeMenu();
|
||||
setDeleteOpen(true);
|
||||
};
|
||||
const handleDeleteConfirm = () => {
|
||||
if (menuConv) onDelete(menuConv.id);
|
||||
setDeleteOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: { xs: 184, sm: 232, md: 264 },
|
||||
flexShrink: 0,
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
borderRight: 1,
|
||||
borderColor: "divider",
|
||||
bgcolor: "action.hover",
|
||||
}}
|
||||
>
|
||||
{/* Brand + New chat */}
|
||||
<Box sx={{ p: 1.5, display: "flex", flexDirection: "column", gap: 1 }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1, px: 0.5 }}>
|
||||
<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 }}>
|
||||
Odin
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button fullWidth disabled={busy} onClick={onNew}>
|
||||
+ Nová konverzace
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Conversation list */}
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
overflowY: "auto",
|
||||
px: 1,
|
||||
pb: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 0.25,
|
||||
}}
|
||||
>
|
||||
{conversations.length === 0 && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{ px: 1, py: 1 }}
|
||||
>
|
||||
Zatím žádné konverzace.
|
||||
</Typography>
|
||||
)}
|
||||
{conversations.map((conv) => {
|
||||
const isActive = conv.id === activeId;
|
||||
return (
|
||||
<Box
|
||||
key={conv.id}
|
||||
onClick={() => !busy && onSelect(conv.id)}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 0.5,
|
||||
px: 1,
|
||||
py: 0.75,
|
||||
borderRadius: 1.5,
|
||||
cursor: busy ? "default" : "pointer",
|
||||
bgcolor: isActive ? "action.selected" : "transparent",
|
||||
"&:hover": {
|
||||
bgcolor: isActive ? "action.selected" : "action.hover",
|
||||
},
|
||||
"&:hover .odin-conv-menu": { opacity: 1 },
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
noWrap
|
||||
title={conv.title}
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
color: "text.primary",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{conv.title}
|
||||
</Typography>
|
||||
<IconButton
|
||||
className="odin-conv-menu"
|
||||
size="small"
|
||||
disabled={busy}
|
||||
onClick={(e) => openMenu(e, conv)}
|
||||
aria-label="Možnosti konverzace"
|
||||
title="Možnosti konverzace"
|
||||
sx={{
|
||||
flexShrink: 0,
|
||||
opacity: { xs: 1, md: 0 },
|
||||
transition: "opacity 0.15s",
|
||||
}}
|
||||
>
|
||||
⋮
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
|
||||
{/* Per-conversation 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 „${menuConv?.title ?? ""}"? Tuto akci nelze vrátit.`}
|
||||
confirmText="Smazat"
|
||||
confirmVariant="danger"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user