import * as React from 'react';
/**
* apiblaze/react — . Drop it into your site next to (or
* instead of) ; it talks ONLY to your own backend route (which
* holds the same one CP widget key, mounted via createApiblazeGroups().handler).
*
* import { UsersGroupsWidget } from 'apiblaze/react';
*
*
* Who sees what: apiblaze authorizes the LOGGED-IN USER server-side — only a
* tenant admin (an email on the tenant's admin-emails allowlist) can manage.
* Anyone else gets the "admin access pending" panel; nothing in this component
* (or your page) can elevate them.
*
* Default view = flat groups + members (the right ceiling for a handful of
* admins). Delegation (per-group admins) and nesting (subgroups) are there,
* one level down. Strictly users + groups — no authorization-rule authoring.
*
* `endpoint` defaults to /api/apiblaze/groups.
*/
type UsersGroupsWidgetTheme = ApiKeyWidgetTheme;
interface UsersGroupsWidgetProps {
endpoint?: string;
theme?: UsersGroupsWidgetTheme;
/** Heading text. Default "Users & groups". */
title?: string;
/** Auto-expand the group with this NAME on first load (if it exists) — e.g.
* a demo landing the user on the group it just talked about. One-shot: the
* user can still collapse it; later refreshes don't force it back open. */
defaultOpenGroup?: string;
className?: string;
}
interface UsersGroupsWidgetHandle {
refresh: () => void;
}
declare const UsersGroupsWidget: React.ForwardRefExoticComponent>;
/**
* apiblaze/react — . The third widget face (with
* and ): a drop-in AI chat window for an API proxied
* through APIblaze, speaking the AI SDK UI Message Stream wire protocol
* (specs/chatwidget/sse/wire-compatibility-with-AI-SDK-UI.MD).
*
* Two integration modes (chatwidget_prd.md):
*
* MODE 1 — direct (JWT-door proxy; zero backend code). The end user is
* already logged into YOUR site; pass their session token and the proxy
* verifies it against the issuer you registered (iam_v2 §4.4):
*
* session.token} />
*
* MODE 2 — relay (api_key-door proxy). Mount createApiblazeChat() from
* apiblaze/server (it holds the key server-side) and point the widget at it:
*
*
*
* Zero runtime dependencies, inline styles, white-label through `theme` tokens —
* the same packaging discipline as the other two widgets. Producers who want a
* fully custom UI don't need this component at all: the endpoint speaks the
* standard protocol, so assistant-ui / useChat work directly against it.
*
* Safety properties this component RELIES ON (and never re-implements):
* tool calls execute server-side with the caller's own credential (OpenFGA
* applies), funding/quotas are the proxy's chat_sponsorship, and the system
* prompt (+ producer steering) is server-owned — nothing here can change it.
*/
interface ChatWidgetTheme {
/** Accent / primary action color (send button, launcher). */
accent?: string;
/** Text/icon color ON accent surfaces. Default #fff. */
accentText?: string;
/** Panel body color. */
surface?: string;
/** Header strip color. Defaults to `surface`. */
headerBackground?: string;
/** Primary text color. */
text?: string;
/** Secondary / muted text color. */
muted?: string;
/** Border + divider color. */
border?: string;
/** User bubble background / text. */
userBubble?: string;
userBubbleText?: string;
/** Assistant bubble background / text. */
assistantBubble?: string;
assistantBubbleText?: string;
/** Floating launcher colors (bubble mode). */
launcherBackground?: string;
launcherIcon?: string;
/** Corner radius of the panel, e.g. "16px". */
radius?: string;
/** Body font stack. */
fontFamily?: string;
/** Monospace stack for code. */
monoFontFamily?: string;
}
interface ChatWidgetProps {
/** MODE 2: your mounted createApiblazeChat() route. */
endpoint?: string;
/** MODE 1: project handle — the widget talks straight to {project}.mcp.{host}. */
project?: string;
/** MODE 1: returns the end user's CURRENT session JWT (your own issuer,
* registered on the proxy). Called per message so refreshed tokens win. */
getToken?: () => string | Promise;
/** MODE 1 extras. */
apiVersion?: string;
environment?: string;
host?: string;
/** 'bubble' = floating launcher (default) · 'inline' = a card in your layout. */
mode?: 'bubble' | 'inline';
/** Heading. Default "Chat". */
title?: string;
/** Emoji/short avatar in the header + launcher. Default "💬". */
avatar?: string;
/** First assistant message shown before any exchange. */
welcome?: string;
/** Suggested prompt chips (≤4 shown). */
suggestions?: string[];
/** Inline mode panel height. Default 560. */
height?: number;
/** Bubble mode: offset from the viewport edge, px. Default 20. */
offset?: number;
/** Bubble mode: z-index of launcher+panel. Default 2147483000. */
zIndex?: number;
/** Show the "powered by APIblaze" footer credit. Default true. */
branding?: boolean;
theme?: ChatWidgetTheme;
className?: string;
/** sessionStorage key override. DEFAULT derives from project/endpoint ONLY —
* on a shared machine that lets the next signed-in user read the previous
* user's transcript in the same tab, so pass a PER-USER key (e.g.
* `apiblaze-chat:myapp:${user.id}`) whenever your page has logins. Two
* widgets with the same key share (and clobber) one transcript. */
storageKey?: string;
/** Client-side per-message length hint (server enforces its own cap). Default 2000. */
maxMessageLength?: number;
}
interface ChatWidgetHandle {
open: () => void;
close: () => void;
clear: () => void;
}
declare const ChatWidget: React.ForwardRefExoticComponent>;
/**
* apiblaze/react — . Drop it into your site (e.g. resiresi.com);
* it talks ONLY to your own backend route (which holds the CP key). Shows the
* logged-in user their API keys as a simple list with one always-visible
* "Create key" action, plus per-key show / rotate / revoke.
*
* import { ApiKeyWidget } from 'apiblaze/react';
*
*
* Fully white-labelable through `theme` alone — every font and color is a token,
* so you can match your brand (including a dark "codebox" look) without forking
* the component. See ApiKeyWidgetTheme.
*
* `endpoint` defaults to /api/apiblaze/keys (where you mounted createApiblazeKeys().handler).
*/
interface ApiKeyWidgetTheme {
/** Accent / primary action color. */
accent?: string;
/** Text/icon color ON accent buttons. Default #fff. */
accentText?: string;
/** Page color behind the card. Default transparent. */
background?: string;
/** Card body color. */
surface?: string;
/** Header strip color. Defaults to `surface` when unset. */
headerBackground?: string;
/** Primary text color. */
text?: string;
/** Secondary / muted text color. */
muted?: string;
/** Border + divider color. */
border?: string;
/** Destructive (revoke) color. */
danger?: string;
/** Positive (copied) color. */
success?: string;
/** Corner radius of the card, e.g. "12px". */
radius?: string;
/** Body font stack. */
fontFamily?: string;
/** Monospace font stack for keys and secrets. */
monoFontFamily?: string;
}
interface ApiKeyWidgetProps {
endpoint?: string;
theme?: ApiKeyWidgetTheme;
/** Heading text. Default "Your API keys". */
title?: string;
className?: string;
}
interface ApiKeyWidgetHandle {
refresh: () => void;
}
declare const ApiKeyWidget: React.ForwardRefExoticComponent>;
export { ApiKeyWidget, type ApiKeyWidgetHandle, type ApiKeyWidgetProps, type ApiKeyWidgetTheme, ChatWidget, type ChatWidgetHandle, type ChatWidgetProps, type ChatWidgetTheme, UsersGroupsWidget, type UsersGroupsWidgetHandle, type UsersGroupsWidgetProps, type UsersGroupsWidgetTheme, ApiKeyWidget as default };