@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.
36 lines (35 loc) • 1.83 kB
TypeScript
import { ChatMessage, FeedbackVote } from '../elements/chat-types';
/** Detail shape emitted by the action row. `state` is present only for the
* toggleable feedback votes: `'on'` when a vote is set, `'off'` when cleared.
* Copy / regenerate / edit / custom actions omit it. */
export interface MessageActionDetail {
messageId: string;
action: string;
state?: 'on' | 'off';
}
export interface MessageFeedbackOptions {
/** Emit the `kai-message-action` detail (facade maps this to `dispatch` /
* `onMessageAction`). */
emit: (detail: MessageActionDetail) => void;
/** How long the copy check stays before auto-clearing. Defaults to 2000ms. */
copiedDuration?: number;
/** Container the copy/feedback toasts should be scoped to (the chat, by
* default) so they appear in-chat rather than at the page top. */
target?: () => HTMLElement | undefined;
}
export interface MessageFeedback {
/** Resolve the active vote for a message: a controlled `m.feedback` wins,
* else the facade's own optimistic map. */
resolveFeedback: (m: Pick<ChatMessage, 'id' | 'feedback'>) => FeedbackVote | undefined;
/** Whether a message's copy button should currently show its check. */
isCopied: (id: string) => boolean;
/** Route a clicked action through copy / vote / passthrough handling. */
handleAction: (m: Pick<ChatMessage, 'id' | 'content' | 'feedback'>, action: string) => void;
}
/**
* Create the action-row feedback controller for one message list (or one
* standalone message). Owns the optimistic `feedbackMap` + transient
* `copiedIds`, resolves the controlled-wins vote, and turns clicks into
* clipboard writes, toasts, and `kai-message-action` emissions.
*/
export declare function createMessageFeedback(opts: MessageFeedbackOptions): MessageFeedback;