/* =========================================================================
TelegramPhone — reusable JSX component set for Pippa's chat chrome.
Depends on telegram-chat.css and colors_and_type.css.
Exposes on window: TelegramPhone, StatusBar, ChatHeader, Bubble, Typing, InputBar, Icon
========================================================================= */
const { useEffect, useRef, useState } = React;
/* ---------- Icon primitives (inline SVG) ---------- */
/* Stroke-style. 24x24 viewBox. Color via currentColor. */
const ICONS = {
// chat chrome
chevronLeft: (
),
moreVertical: (
),
paperclip: (
),
mic: (
),
// status bar
// Android-style stepped signal bars (4 filled)
signal: (
),
// Android-style solid wifi fan
wifi: (
),
// Pill battery with "83" inside
battery: (
),
// Smiley for composer
smile: (
),
// design-block icons (larger outline)
bookOpen: (
),
toggleRight: (
),
bookmark: (
),
shield: (
),
};
function Icon({ name, ...rest }) {
const el = ICONS[name];
if (!el) return null;
return React.cloneElement(el, {
...rest,
width: rest.width || 24,
height: rest.height || 24,
fill: rest.fill || "none",
stroke: "currentColor",
strokeWidth: rest.strokeWidth || 2,
strokeLinecap: "round",
strokeLinejoin: "round",
});
}
/* ---------- Status bar ---------- */
function StatusBar({ time = "09:41" }) {
return (
{time}
);
}
/* ---------- Chat header ---------- */
function ChatHeader({ name = "Pippa", sub = "bot", avatar }) {
const initial = (avatar || name || "P").charAt(0).toUpperCase();
return (
);
}
/* ---------- Bubble ---------- */
function Bubble({ from, text, time, follow = false, visible = true, pos = 0 }) {
const isUser = from === "user";
const style = isUser ? { "--pos": pos } : undefined;
return (
{text}
{time}
{isUser && }
{isUser ? "You: " : "Pippa: "}{text}
);
}
/* ---------- Typing indicator ---------- */
function Typing({ visible = true }) {
return (
);
}
/* ---------- Input bar ---------- */
function InputBar() {
return (
);
}
/* ---------- Phone frame (composable) ---------- */
function TelegramPhone({ children, statusBarTime = "09:41" }) {
return (
{children}
);
}
Object.assign(window, {
TelegramPhone, StatusBar, ChatHeader, Bubble, Typing, InputBar, Icon, ICONS,
});