/* global React */
// IamaiMascot — drop-in React component for the IAMAI agent mascot.
//
// Props:
// state : "idle" | "thinking" | "speaking" | "success" (default: "idle")
// eyeTracking : boolean — eyes follow the cursor (default: true)
// blinkTrigger : any — any change in this value triggers a quick blink
// size : number — pixel size (square) (default: 320)
// tone : "cool" | "neutral" | "warm" — studio bg tint (default: "cool")
// showBg : boolean — draw the studio background + halo (default: true)
// className, style — passthroughs
//
// Imperative: also dispatches/listens for the custom event "iamai:blink"
// on the wrapper element so plain JS can trigger a blink:
// el.dispatchEvent(new CustomEvent('iamai:blink'))
// ============================================================
const { useEffect, useRef, useState, useMemo } = React;
// ─── geometry constants ───────────────────────────────────────
// The whole mascot draws into a 1000×1000 viewBox.
// Head squircle bbox after translate (290, 200) and our internal coords:
// head local box: 60..340 x 60..340 → after translate 350..630 x 260..540
// Eye centers (in head local coords): left (161, 200), right (239, 200)
// In viewBox coords with translate(290,200) + scale(1.15) about... we keep it simple:
// We'll build the head INLINE here so we have direct DOM refs to the eyes.
function StudioBg({ tone = "cool" }) {
const grads = {
neutral: { a: "#f4f5f8", b: "#e3e7ee", c: "#cdd2dc" },
cool: { a: "#f0f4fb", b: "#dde6f4", c: "#c2cee2" },
warm: { a: "#f7f5f1", b: "#ece7df", c: "#d4ccbf" },
};
const g = grads[tone] || grads.cool;
return (
);
}
// ─── the mascot itself ───────────────────────────────────────
function IamaiMascot({
state = "idle",
eyeTracking = true,
blinkTrigger,
size = 320,
tone = "cool",
showBg = true,
className = "",
style = {},
}) {
const wrapRef = useRef(null);
const leftEyeRef = useRef(null);
const rightEyeRef = useRef(null);
const [eyeOffset, setEyeOffset] = useState({ x: 0, y: 0 });
const [blink, setBlink] = useState(false);
// ─ Cursor tracking ─
useEffect(() => {
if (!eyeTracking) return;
const onMove = (e) => {
const el = wrapRef.current;
if (!el) return;
const r = el.getBoundingClientRect();
const cx = r.left + r.width / 2;
const cy = r.top + r.height * 0.42; // head sits high in the frame
const dx = (e.clientX - cx) / r.width; // ~ -0.5..0.5
const dy = (e.clientY - cy) / r.height;
// clamp & scale — eyes are pills, so vertical range is more generous
const maxX = 6, maxY = 14;
setEyeOffset({
x: Math.max(-maxX, Math.min(maxX, dx * maxX * 2)),
y: Math.max(-maxY, Math.min(maxY, dy * maxY * 2)),
});
};
window.addEventListener("mousemove", onMove);
return () => window.removeEventListener("mousemove", onMove);
}, [eyeTracking]);
// ─ Blink on trigger change + on custom event ─
useEffect(() => {
if (blinkTrigger === undefined) return;
setBlink(true);
const t = setTimeout(() => setBlink(false), 220);
return () => clearTimeout(t);
}, [blinkTrigger]);
useEffect(() => {
const el = wrapRef.current;
if (!el) return;
const handler = () => {
setBlink(true);
setTimeout(() => setBlink(false), 220);
};
el.addEventListener("iamai:blink", handler);
return () => el.removeEventListener("iamai:blink", handler);
}, []);
// ─ Random idle blinks every 4-7s ─
useEffect(() => {
let alive = true;
const loop = () => {
if (!alive) return;
const wait = 4000 + Math.random() * 3000;
setTimeout(() => {
if (!alive) return;
setBlink(true);
setTimeout(() => setBlink(false), 200);
loop();
}, wait);
};
loop();
return () => { alive = false; };
}, []);
// ─ State-derived motion params ─
const { floatDur, haloDur, headTiltDur, eyeBrightness } = useMemo(() => {
switch (state) {
case "thinking":
return { floatDur: 5.5, haloDur: 6, headTiltDur: 3.2, eyeBrightness: "thinking" };
case "speaking":
return { floatDur: 2.6, haloDur: 1.4, headTiltDur: 0, eyeBrightness: "bright" };
case "success":
return { floatDur: 3.0, haloDur: 2.0, headTiltDur: 0, eyeBrightness: "bright" };
case "idle":
default:
return { floatDur: 4.0, haloDur: 4.5, headTiltDur: 0, eyeBrightness: "normal" };
}
}, [state]);
const uid = useMemo(() => `m${Math.random().toString(36).slice(2, 8)}`, []);
// For "thinking", we offset eye opacity in alternation with a sine animation.
// For "speaking", brighter overall, faster halo.
// For "success", we trigger a quick squash on mount-of-state.
const [successPulse, setSuccessPulse] = useState(0);
useEffect(() => {
if (state === "success") {
setSuccessPulse((v) => v + 1);
// also fire a blink for the cute "✓" feel
setBlink(true);
setTimeout(() => setBlink(false), 240);
}
}, [state]);
// Eye scaleY: 1 normally, ~0.05 during blink, 0.6 during success squash flash.
// We animate scaleY via attribute since transform-box isn't reliable cross-browser.
// We do this with a CSS transition on a wrapping per eye.
return (
);
}
Object.assign(window, { IamaiMascot });