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>; 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({ export default function OdinThread({
turns, turns,
busy, busy,
@@ -188,7 +165,7 @@ export default function OdinThread({
maxWidth: "80%", maxWidth: "80%",
}} }}
> >
{!isUser && <OdinAvatar size={28} />} {!isUser && <OdinMark size={28} />}
<Box <Box
sx={{ sx={{
px: 1.5, 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 && ( {busy && (
<Box <Box
sx={{ sx={{
@@ -249,12 +227,11 @@ export default function OdinThread({
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: 1, gap: 1,
px: 1.5,
py: 1, py: 1,
color: "text.secondary", color: "text.secondary",
}} }}
> >
<OdinMark size={22} state="thinking" /> <OdinMark size={28} state="thinking" />
<Typography variant="caption" sx={{ color: "inherit" }}> <Typography variant="caption" sx={{ color: "inherit" }}>
Pracuji Pracuji
</Typography> </Typography>