/* GTI SMS — Main React app Globals expected: API_DATA, GTI_CODE */ const { useState, useEffect, useMemo, useRef, useCallback } = React; /* ============================================ Icons (inline SVG) ============================================ */ const Icon = ({ name, size = 16 }) => { const paths = { search: <>, copy: <>, check: , play: , close: <>, chev: , link: <>, bolt: , book: <>, key: <>, alert: <>, gauge: <>, send: <>, wallet: <>, chart: <>, moon: , sun: <>, }; return ( {paths[name]} ); }; /* ============================================ Top bar ============================================ */ function TopBar({ onOpenSearch, theme, onToggleTheme }) { const logoSrc = theme === "dark" ? "assets/logo-gtisms-dark.png" : "assets/logo-gtisms-light.png"; return (
{ e.preventDefault(); window.GTI_NAV?.("overview"); }}> GTI SMS API v3
Status Dashboard
); } /* ============================================ Sidebar ============================================ */ function Sidebar({ current, onNavigate }) { return ( ); } /* ============================================ Search modal (Cmd+K) ============================================ */ function SearchModal({ open, onClose, onNavigate }) { const [q, setQ] = useState(""); const [selIdx, setSelIdx] = useState(0); const inputRef = useRef(null); useEffect(() => { if (open) { setQ(""); setSelIdx(0); setTimeout(() => inputRef.current?.focus(), 30); } }, [open]); const flatItems = useMemo(() => { const items = []; API_DATA.groups.forEach(g => { g.items.forEach(it => items.push({ ...it, group: g.title, groupId: g.id })); }); return items; }, []); const results = useMemo(() => { if (!q.trim()) return flatItems; const term = q.toLowerCase(); return flatItems.filter(it => it.title.toLowerCase().includes(term) || (it.path || "").toLowerCase().includes(term) || (it.method || "").toLowerCase().includes(term) || it.group.toLowerCase().includes(term) ); }, [q, flatItems]); // Reset selIdx if it overflows useEffect(() => { setSelIdx(0); }, [q]); const onKey = (e) => { if (e.key === "Escape") onClose(); if (e.key === "ArrowDown") { e.preventDefault(); setSelIdx(i => Math.min(i + 1, results.length - 1)); } if (e.key === "ArrowUp") { e.preventDefault(); setSelIdx(i => Math.max(i - 1, 0)); } if (e.key === "Enter" && results[selIdx]) { onNavigate(results[selIdx].id); onClose(); } }; if (!open) return null; return (
e.stopPropagation()}>
setQ(e.target.value)} onKeyDown={onKey} /> ESC
{results.length === 0 ? (
Nenhum resultado para "{q}"
) : ( <> {results.map((it, i) => (
setSelIdx(i)} onClick={() => { onNavigate(it.id); onClose(); }} > {it.method ? ( {it.method} ) : ( )} {it.title} {it.group}
))} )}
); } /* ============================================ Code Panel (right side of endpoint) ============================================ */ function CodePanel({ sample, response, lang, onLangChange, onTryIt }) { const [tab, setTab] = useState("req"); // req | resp const [copied, setCopied] = useState(false); const reqCode = useMemo(() => GTI_CODE.generateCode(lang, sample), [lang, sample]); const respCode = useMemo(() => GTI_CODE.responseSnippet(response), [response]); const displayed = tab === "req" ? reqCode : respCode; const html = tab === "req" ? GTI_CODE.highlightCode(reqCode, lang) : GTI_CODE.highlightJson(respCode); const onCopy = () => { navigator.clipboard.writeText(displayed).then(() => { setCopied(true); window.GTI_TOAST?.("Copiado para a área de transferência"); setTimeout(() => setCopied(false), 1200); }); }; return (
{tab === "req" ? (
{GTI_CODE.LANGS.map(l => ( ))}
) : (
)}
setTab(tab === "req" ? "resp" : "req")}> {tab === "req" ? "Ver resposta" : "Ver requisição"} {tab === "req" && ( {response.status} )}
); } function statusClass(code) { if (code >= 200 && code < 300) return "s2xx"; if (code >= 400 && code < 500) return "s4xx"; return "s5xx"; } /* ============================================ Endpoint view ============================================ */ function EndpointView({ endpoint, lang, onLangChange, onTryIt }) { const { method, path, title, desc, params, response, sample } = endpoint; const renderUrl = () => { // colorize path variables const parts = path.split(/(\{[^}]+\})/g); return ( {API_DATA.baseUrl.replace(/^https?:\/\//, "")} {parts.map((p, i) => p.startsWith("{") ? {p} : {p} )} ); }; return (

{title}

{desc}

{method}
{renderUrl()}
{renderParamGroup("Path parameters", params.path)} {renderParamGroup("Query parameters", params.query)} {renderParamGroup("Body parameters", params.body)} {endpoint.note && (
{endpoint.note.text} {endpoint.note.link && ( <> {endpoint.note.link.replace(/^https?:\/\//, "")} )}
)}
Headers obrigatórios
Authorization string
obrigatório
Token de acesso no formato Bearer {`{seu_token}`}.
Accept string
obrigatório
application/json
{params.body && (
Content-Type string
obrigatório
application/json
)} {endpoint.errorResponse && ( <>
Resposta de erro

Em caso de falha, a API responde com status: "error" e uma mensagem detalhada:
)}
); } function renderParamGroup(label, list) { if (!list || !list.length) return null; return ( <>
{label}
{list.map(p => (
{p.name} {p.type}
{p.required ? "obrigatório" : "opcional"}
{p.desc}
))} ); } /* ============================================ Try-it Drawer ============================================ */ function TryItDrawer({ endpoint, onClose }) { const [token, setToken] = useState(""); const [pathVars, setPathVars] = useState(() => { const out = {}; (endpoint.params.path || []).forEach(p => { out[p.name] = ""; }); return out; }); const [queryVars, setQueryVars] = useState(() => { const out = {}; (endpoint.params.query || []).forEach(p => { out[p.name] = ""; }); return out; }); const [bodyText, setBodyText] = useState(() => { return endpoint.sample.body ? JSON.stringify(endpoint.sample.body, null, 2) : ""; }); const [busy, setBusy] = useState(false); const [resp, setResp] = useState(null); const buildUrl = () => { let url = API_DATA.baseUrl + endpoint.path; Object.entries(pathVars).forEach(([k, v]) => { url = url.replace(`{${k}}`, encodeURIComponent(v || `{${k}}`)); }); const qs = Object.entries(queryVars).filter(([_, v]) => v).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join("&"); if (qs) url += "?" + qs; return url; }; const onSend = async () => { setBusy(true); setResp(null); const url = buildUrl(); const started = performance.now(); // SIMULATED RESPONSE — the API endpoint is not callable from the browser // (CORS + auth). We mock based on the endpoint's documented response. await new Promise(r => setTimeout(r, 420 + Math.random() * 280)); let simulated; if (!token.trim()) { simulated = { status: 401, body: { error: "AUTH_MISSING", message: "Header Authorization ausente." }, }; } else if (token.trim().length < 8) { simulated = { status: 401, body: { error: "AUTH_INVALID", message: "Token de acesso inválido ou expirado." }, }; } else { // Inject body when applicable let respBody = JSON.parse(JSON.stringify(endpoint.response.body)); try { const parsed = bodyText ? JSON.parse(bodyText) : null; if (parsed && respBody && respBody.data && typeof respBody.data === "object") { if (parsed.recipient) respBody.data.to = String(parsed.recipient).split(",")[0].trim(); if (parsed.message) respBody.data.message = parsed.message; } } catch {} simulated = { status: endpoint.response.status, body: respBody }; } const elapsed = Math.round(performance.now() - started); setResp({ ...simulated, elapsed, url, method: endpoint.method }); setBusy(false); }; return ( <>