@kitn.ai/ui/dist/components/conversation-list.d.ts

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import { JSX } from 'solid-js';
import { ConversationSummary, ConversationGroup } from '../types';
/**
 * The collapsed-rail fallback: a floating reopen button shown when the
 * conversation sidebar is collapsed. Shared by `kai-workspace` (its collapsed
 * branch) and the standalone `kai-conversations` (collapsed mode), so the rail
 * collapses identically in both. Renders only the button; the host owns the
 * surrounding region (the workspace puts the thread beside it, the standalone
 * element stands alone). `onExpand` reopens the rail.
 */
export declare function CollapsedRail(props: {
    onExpand: () => void;
    class?: string;
}): JSX.Element;
export interface ConversationListProps {
    groups: ConversationGroup[];
    conversations: ConversationSummary[];
    activeId?: string;
    onSelect: (id: string) => void;
    onNewChat: () => void;
    onToggleSidebar?: () => void;
    /** Replaces the built-in title bar (toggle / "Chats" / New chat). */
    header?: JSX.Element;
    /** A row below the list (e.g. account / settings / usage). */
    footer?: JSX.Element;
    /** Replaces the built-in "no conversations yet" state. */
    empty?: JSX.Element;
    /** Dense single-line rows (a leading dot + title, no message count). */
    compact?: boolean;
    /** Fired whenever the built-in search box query changes (typing or a
     *  programmatic `clear()`). Lets the facade surface a `kai-search` event. */
    onSearchChange?: (query: string) => void;
    /** Receive the imperative controller once mounted. The `kai-conversations`
     *  facade uses it to focus / clear the internal search input. */
    controllerRef?: (controller: ConversationListController) => void;
    class?: string;
}
/** Imperative handle exposed via `controllerRef` — surfaces the internal search
 *  box to the `kai-conversations` facade (the searchQuery signal lives here). */
export interface ConversationListController {
    /** Focus the built-in search `<input>`. */
    focus(options?: FocusOptions): void;
    /** Clear the internal search query (resets the list filter). */
    clearSearch(): void;
}
export declare function ConversationList(props: ConversationListProps): JSX.Element;