// Animated Telegram-style chat — auto-plays a sequence of scenes.
const { useState, useEffect, useRef, useMemo } = React;
function ChatBubbleUser({ msg }) {
return (
{msg.name[0]}
{msg.name}
{msg.voice ? (
{Icons.voice({ width: 14, height: 14, style: { color: 'var(--text)' } })}
{Array.from({ length: 22 }).map((_, i) => (
))}
{msg.voice}
) : (
{msg.text}
)}
);
}
function ChatBubbleUserShort({ msg }) {
return (
);
}
function ChatBubblePhoto({ msg }) {
return (
{msg.name[0]}
{msg.name}
{Icons.image({ width: 14, height: 14, style: { color: 'var(--text-secondary)' } })}
{msg.label}
);
}
function Typing() {
return (
{Icons.mark({ width: 16, height: 16 })}
);
}
function BotBubble({ msg }) {
return (
{Icons.mark({ width: 16, height: 16 })}
);
}
function BotList({ msg }) {
return (
{Icons.mark({ width: 16, height: 16 })}
{msg.items.map((item, i) => (
{Icons.check({ width: 12, height: 12 })}
{item}
))}
);
}
function BotStatus({ msg }) {
return (
{Icons.mark({ width: 16, height: 16 })}
{msg.items.map((item, i) => (
{item.label}
{item.status}
))}
);
}
function BotAlert({ msg }) {
return (
{Icons.mark({ width: 16, height: 16 })}
{Icons.alert({ width: 14, height: 14 })}
octodus_bot · auto-detected
{msg.text}
);
}
function renderMsg(m, idx) {
switch (m.kind) {
case 'user': return ;
case 'user-short': return ;
case 'user-photo': return ;
case 'typing': return ;
case 'bot': return ;
case 'bot-list': return ;
case 'bot-status': return ;
case 'bot-alert': return ;
default: return null;
}
}
// Animated chat: builds up scene messages one by one, then advances scene.
function AnimatedChat({ tall = false, autoplay = true }) {
const [sceneIdx, setSceneIdx] = useState(0);
const [stepIdx, setStepIdx] = useState(0);
const scene = SCENES[sceneIdx];
const scrollRef = useRef(null);
useEffect(() => {
if (!autoplay) return;
const total = scene.messages.length;
if (stepIdx < total) {
const last = scene.messages[stepIdx];
// typing is faster, bot list/status is slower
let delay = 950;
if (last.kind === 'typing') delay = 1200;
if (last.kind === 'user' || last.kind === 'user-short' || last.kind === 'user-photo') delay = 750;
if (last.kind === 'bot-list' || last.kind === 'bot-status') delay = 1600;
const t = setTimeout(() => setStepIdx((i) => i + 1), delay);
return () => clearTimeout(t);
} else {
const t = setTimeout(() => {
setStepIdx(0);
setSceneIdx((s) => (s + 1) % SCENES.length);
}, 2200);
return () => clearTimeout(t);
}
}, [stepIdx, sceneIdx, autoplay, scene.messages.length]);
// Filter sequential typing — when next message after typing arrives, hide typing
const visible = useMemo(() => {
const out = [];
const slice = scene.messages.slice(0, stepIdx);
for (let i = 0; i < slice.length; i++) {
const m = slice[i];
if (m.kind === 'typing' && i < slice.length - 1) continue; // hide if a bot reply followed
out.push(m);
}
return out;
}, [scene, stepIdx]);
// Auto-scroll to bottom on new message
useEffect(() => {
const el = scrollRef.current;
if (el) el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
}, [visible.length, sceneIdx]);
return (
{/* Header */}
{Icons.mark({ width: 18, height: 18 })}
{scene.chip}
{/* Messages */}
{visible.map((m, i) => (
{renderMsg(m, i)}
))}
{/* Input row */}
Message @octodus_bot…
{/* Scene indicator dots */}
{SCENES.map((s, i) => (
))}
);
}
Object.assign(window, { AnimatedChat });