@kitn.ai/ui
Version:
Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.
32 lines (31 loc) • 1.4 kB
TypeScript
import { Accessor, JSX } from 'solid-js';
export type ProseSize = 'xs' | 'sm' | 'base' | 'lg';
export interface ChatConfigValue {
/** Prose/text size for messages, markdown, and UI elements */
proseSize: Accessor<ProseSize>;
/** Shiki theme for code blocks */
codeTheme: Accessor<string>;
/** Node the kit's overlays portal into; undefined → document.body */
portalMount: Accessor<HTMLElement | undefined>;
/** Whether code blocks are syntax-highlighted; false → plain text, no Shiki loaded */
codeHighlight: Accessor<boolean>;
}
export interface ChatConfigProps {
proseSize?: ProseSize;
codeTheme?: string;
portalMount?: HTMLElement;
codeHighlight?: boolean;
children: JSX.Element;
}
/**
* Provides chat-wide appearance settings to all child components.
* Set once at the top level — MessageContent, Markdown, CodeBlock,
* ConversationList, and PromptInput all read from this.
*/
export declare function ChatConfig(props: ChatConfigProps): JSX.Element;
/** Read the current chat config. Returns defaults if no provider is present. */
export declare function useChatConfig(): ChatConfigValue;
/** Maps prose size to Tailwind prose class */
export declare function proseClass(size: ProseSize): string;
/** Maps prose size to a text class for non-prose elements (sidebar, input) */
export declare function textClass(size: ProseSize): string;