@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.
39 lines (38 loc) • 1.7 kB
TypeScript
import { ChatMessage } from '../elements/chat-types';
import { AttachmentData } from '../components/attachments';
import { AssistantStream, SetMessages } from '../state';
export interface CreateKaiChatOptions {
/** Seed messages, read once at creation and copied. Later changes are ignored — drive updates through the returned ops. */
initialMessages?: ChatMessage[];
/** Seed suggestions, read once at creation and copied. Later changes are ignored. */
initialSuggestions?: string[];
onSubmit?: (detail: {
value: string;
attachments: AttachmentData[];
}) => void | Promise<void>;
}
/** Solid store: consumer-owned chat state + the same ergonomic ops as `useKaiChat`. */
export interface KaiChatStore {
messages: () => ChatMessage[];
setMessages: SetMessages;
suggestions: () => string[];
loading: () => boolean;
append: (msg: ChatMessage) => void;
update: (id: string, patch: Partial<ChatMessage> | ((m: ChatMessage) => ChatMessage)) => void;
remove: (id: string) => void;
addSuggestion: (s: string) => void;
removeSuggestion: (s: string) => void;
clearSuggestions: () => void;
streamAssistant: (init?: Partial<ChatMessage>) => AssistantStream;
handleSubmit: (event: CustomEvent<{
value: string;
attachments: AttachmentData[];
}>) => void;
/** Spread onto `<kai-chat {...chat.bind} />` (reactive getters). Wire submit via `on:kai-submit={chat.handleSubmit}`. */
bind: {
readonly messages: ChatMessage[];
readonly loading: boolean;
readonly suggestions: string[];
};
}
export declare function createKaiChat(options?: CreateKaiChatOptions): KaiChatStore;