7db3a56fe8
Native avatars now draw the shared Oo rig with react-native-svg instead of a visor with two equal eyes, so the Oo eyes look the same on every surface. The robot/organic avatar setting is gone from web and mobile because every bot is now an Oo; uploaded pictures show on native too. Claude-Session: https://claude.ai/code/session_01EKuME5CgL1ddGGN7LGvtBj Co-authored-by: Claude <noreply@anthropic.com>
101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import type { OoMoment } from "@rakazo/core";
|
|
import {
|
|
ACTIVE_RUN_STATUSES,
|
|
DEFAULT_OO_AVATAR,
|
|
decodeOoAvatar,
|
|
ooIdentityShapeIndex,
|
|
ooMomentForStatus,
|
|
resolveOoColor,
|
|
} from "@rakazo/core";
|
|
import { memo, useMemo } from "react";
|
|
import { Image, View } from "react-native";
|
|
import { useI18n } from "../lib/i18n";
|
|
import { NativeSymbol } from "./native-symbol";
|
|
import { OoFigure } from "./oo-figure";
|
|
|
|
export const BotAvatar = memo(function BotAvatar({
|
|
color,
|
|
size = 54,
|
|
status,
|
|
identity,
|
|
moment,
|
|
still,
|
|
muted = false,
|
|
}: {
|
|
color: string;
|
|
size?: number;
|
|
status?: string;
|
|
identity?: string;
|
|
/** Explicit moment; wins over `status`. */
|
|
moment?: OoMoment;
|
|
still?: boolean;
|
|
muted?: boolean;
|
|
}) {
|
|
const { t } = useI18n();
|
|
const isWorking = ACTIVE_RUN_STATUSES.some((activeStatus) => activeStatus === status);
|
|
const picture = color.startsWith("data:image/") ? color : null;
|
|
const look = useMemo(() => decodeOoAvatar(color) ?? DEFAULT_OO_AVATAR, [color]);
|
|
const seed = identity || (picture ? "agent" : color) || "agent";
|
|
const body = resolveOoColor(seed, look.color).hex;
|
|
return (
|
|
<View style={{ width: size, height: size }}>
|
|
{picture ? (
|
|
<Image
|
|
source={{ uri: picture }}
|
|
style={{ width: size, height: size, borderRadius: size / 2 }}
|
|
/>
|
|
) : (
|
|
<OoFigure
|
|
avatar={look}
|
|
color={body}
|
|
fallbackShape={look.shape ?? ooIdentityShapeIndex(seed)}
|
|
moment={moment ?? ooMomentForStatus(status)}
|
|
size={size}
|
|
still={still}
|
|
/>
|
|
)}
|
|
{isWorking ? (
|
|
<View
|
|
accessibilityLabel={t("Working")}
|
|
style={{
|
|
position: "absolute",
|
|
right: muted ? undefined : 0,
|
|
left: muted ? 0 : undefined,
|
|
bottom: 0,
|
|
width: Math.max(6, Math.round(size * 0.18)),
|
|
height: Math.max(6, Math.round(size * 0.18)),
|
|
borderRadius: size,
|
|
backgroundColor: "#F5A03C",
|
|
}}
|
|
/>
|
|
) : null}
|
|
{muted ? (
|
|
<View
|
|
accessible
|
|
accessibilityLabel={t("Notifications silenced")}
|
|
style={{
|
|
position: "absolute",
|
|
right: -2,
|
|
bottom: -2,
|
|
width: Math.max(14, Math.round(size * 0.34)),
|
|
height: Math.max(14, Math.round(size * 0.34)),
|
|
borderRadius: size,
|
|
borderWidth: 2,
|
|
borderColor: "#000",
|
|
backgroundColor: "#242428",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<NativeSymbol
|
|
ios="bell.slash.fill"
|
|
android="notifications-off"
|
|
size={Math.max(8, Math.round(size * 0.17))}
|
|
color="#ECECEE"
|
|
/>
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
);
|
|
});
|