@kitn.ai/chat
Version:
Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.
34 lines (33 loc) • 1.71 kB
TypeScript
import { CardEnvelope, CardContext, CardPolicy } from '../primitives/card-contract';
export interface MountRemoteCardOptions {
/** Where to mount the iframe. */
container: HTMLElement;
/** The card to render (carried down as a `render` frame). */
envelope: CardEnvelope;
/** EXACT provider origin (https). Pinned for all origin checks. */
providerOrigin: string;
/** The provider URL the iframe frames (must be same-origin as providerOrigin). */
src: string;
/** Ambient context; theme/locale/conversationId/short-lived authToken. */
context: CardContext;
/** The SAME routing policy native cards use. resize/focus-edge are handled by the SDK. */
policy?: CardPolicy;
/** Override sandbox. Default: allow-scripts allow-forms allow-same-origin (NO allow-popups — H-G). */
sandbox?: string;
/** Cap auto-height (px); frame scrolls internally beyond it. */
maxHeight?: number;
/** Handshake timeout (ms). Default 5000. */
handshakeTimeoutMs?: number;
}
export interface RemoteCardHandle {
/** Push new ambient context (theme toggle, token refresh). Shallow top-level merge;
* `theme`/`a11y` replaced wholesale. Always sends a FULL resolved CardContext. */
updateContext(context: Partial<CardContext>): void;
/** Re-render with a new/updated envelope (same id = update). */
update(envelope: CardEnvelope): void;
/** Send `teardown`, stop listeners, remove the iframe. Idempotent. */
destroy(): void;
/** Current bridge state for the host to reflect in UI. */
state(): 'connecting' | 'open' | 'error' | 'closed';
}
export declare function mountRemoteCard(options: MountRemoteCardOptions): RemoteCardHandle;