fix(odin): brand mark as bubble avatar + aligned thinking indicator

Assistant bubbles use the animated OdinMark instead of the plain 'O'
circle; the 'Pracuji…' row drops its horizontal padding and matches the
28px mark size, so the thinking mark sits exactly in the avatar column.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-11 08:20:15 +02:00
parent 7582cf88f3
commit 3c6d175857

View File

@@ -30,29 +30,6 @@ interface OdinThreadProps {
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,
@@ -188,7 +165,7 @@ export default function OdinThread({
maxWidth: "80%",
}}
>
{!isUser && <OdinAvatar size={28} />}
{!isUser && <OdinMark size={28} />}
<Box
sx={{
px: 1.5,
@@ -241,7 +218,8 @@ export default function OdinThread({
);
})}
{/* Busy indicator */}
{/* Busy indicator — same 28px mark and zero row padding as the bubble
rows, so the thinking mark sits exactly in the avatar column. */}
{busy && (
<Box
sx={{
@@ -249,12 +227,11 @@ export default function OdinThread({
display: "flex",
alignItems: "center",
gap: 1,
px: 1.5,
py: 1,
color: "text.secondary",
}}
>
<OdinMark size={22} state="thinking" />
<OdinMark size={28} state="thinking" />
<Typography variant="caption" sx={{ color: "inherit" }}>
Pracuji
</Typography>