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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user