@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.
42 lines (41 loc) • 1.86 kB
TypeScript
import { Dispatch, SetStateAction } from 'react';
import { ChatMessage } from '../../src/elements/chat-types';
import { AttachmentData } from '../../src/components/attachment-types';
import { AssistantStream } from '../../src/state';
export type { ChatMessage } from '../../src/elements/chat-types';
export interface UseKaiChatOptions {
/** Seed messages, read once at mount and copied. Later changes are ignored — drive updates through the returned ops. */
initialMessages?: ChatMessage[];
/** Seed suggestions, read once at mount and copied. Later changes are ignored. */
initialSuggestions?: string[];
onSubmit?: (detail: {
value: string;
attachments: AttachmentData[];
}) => void | Promise<void>;
}
/** Owns chat state in React and exposes ergonomic, fully-typed controlled operations. */
export interface KaiChatController {
messages: ChatMessage[];
setMessages: Dispatch<SetStateAction<ChatMessage[]>>;
suggestions: string[];
setSuggestions: Dispatch<SetStateAction<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;
/** Spread onto `<Chat {...chat.bind} />` — wires messages, loading, suggestions, and kai-submit. */
bind: {
messages: ChatMessage[];
loading: boolean;
suggestions: string[];
onSubmit: (event: CustomEvent<{
value: string;
attachments: AttachmentData[];
}>) => void;
};
}
export declare function useKaiChat(options?: UseKaiChatOptions): KaiChatController;