@hashbrownai/react/src/hooks/use-ui-chat.d.ts

React components for Hashbrown AI

import { Chat, type ModelInput, SystemPrompt, type TransportOrFactory } from '@hashbrownai/core';
import { ReactElement } from 'react';
import { ExposedComponent } from '../expose-component.fn';
/**
 * Represents a UI component in the chat schema with its properties and children.
 *
 * @public
 */
export interface UiChatSchemaComponent {
    /** The name of the component to render */
    $tag: string;
    /** Child components to render inside this component */
    $children: string | UiChatSchemaComponent[];
    /** Properties of the component */
    $props: Record<string, any>;
}
/**
 * The schema for UI components in the chat.
 *
 * @public
 */
export interface UiChatSchema {
    /** Array of UI components to render */
    ui: UiChatSchemaComponent[];
}
/**
 * A message from the assistant that includes rendered UI components.
 * Extends the base assistant message with UI-specific content.
 *
 * @public
 * @typeParam Tools - The set of tool definitions available to the chat.
 */
export type UiAssistantMessage<Tools extends Chat.AnyTool> = Chat.AssistantMessage<UiChatSchema, Tools> & {
    /** The rendered React elements from the assistant's response */
    ui: ReactElement[] | null;
};
/**
 * A message from the user in the UI chat.
 * Uses the standard user message type from the chat system.
 *
 * @public
 */
export type UiUserMessage = Chat.UserMessage;
/**
 * An error message in the UI chat.
 * Uses the standard error message type from the chat system.
 *
 * @public
 */
export type UiErrorMessage = Chat.ErrorMessage;
/**
 * Union type of all possible message types in the UI chat.
 * Can be an assistant message with UI components, a user message, or an error message.
 *
 * @public
 * @typeParam Tools - The set of tool definitions available to the chat.
 */
export type UiChatMessage<Tools extends Chat.AnyTool> = UiAssistantMessage<Tools> | UiErrorMessage | UiUserMessage;
/**
 * Options for the `useUiChat` hook.
 *
 * @public
 * @typeParam Tools - The set of tool definitions available to the chat.
 */
export interface UiChatOptions<Tools extends Chat.AnyTool> {
    /**
     * The LLM model to use for the chat.
     */
    model: ModelInput;
    /**
     * The system message to use for the chat.
     */
    system: string | SystemPrompt;
    /**
     * The components that can be rendered by the chat.
     */
    components: ExposedComponent<any>[];
    /**
     * The initial messages for the chat.
     * default: []
     */
    messages?: Chat.Message<UiChatSchema, Tools>[];
    /**
     * The tools to make available for the chat.
     * default: []
     */
    tools?: Tools[];
    /**
     * The debounce time between sends to the endpoint.
     * default: 150
     */
    debounceTime?: number;
    /**
     * The name of the hook, useful for debugging.
     */
    debugName?: string;
    /**
     * Optional transport override for this hook.
     */
    transport?: TransportOrFactory;
    /**
     * Optional thread identifier used to load or continue an existing conversation.
     */
    threadId?: string;
}
/**
 * This React hook creates a chat instance that can generate and render UI components.
 * The result object contains functions and state enabling you to send and receive messages and monitor the state of the chat.
 *
 * @public
 * @typeParam Tools - The set of tool definitions available to the chat.
 * @remarks
 * The `useUiChat` hook provides functionality for generating UI components through chat. This is particularly useful for:
 * - Dynamic UI generation
 * - Interactive chat interfaces
 * - Component-based responses
 * - Building chat-based UIs
 *
 * @returns An object containing chat state, functions to interact with the chat, and rendered UI components.
 *
 * @example
 * In this example, the LLM will respond with a UI component that can be rendered directly in your React application.
 * ```tsx
 * const { messages, sendMessage } = useUiChat({
 *   model: 'gpt-4o',
 *   system: 'You are a helpful assistant that can generate UI components.',
 *   components: [
 *     exposeComponent(Button, {
 *       name: 'Button',
 *       description: 'A clickable button component',
 *       props: {
 *         label: s.string('The text to display on the button'),
 *         onClick: s.function('Function to call when clicked')
 *       }
 *     })
 *   ]
 * });
 * ```
 */
export declare const useUiChat: <Tools extends Chat.AnyTool>(options: UiChatOptions<Tools>) => {
    messages: UiChatMessage<Tools>[];
    setComponents: import("react").Dispatch<import("react").SetStateAction<ExposedComponent<any>[]>>;
    lastAssistantMessage: UiAssistantMessage<Tools> | undefined;
    setMessages: (messages: Chat.Message<UiChatSchema, Tools>[]) => void;
    sendMessage: (message: Chat.Message<UiChatSchema, Tools>) => void;
    resendMessages: () => void;
    stop: (clearStreamingMessage?: boolean) => void;
    reload: () => void;
    error: Error | undefined;
    isReceiving: boolean;
    isSending: boolean;
    isGenerating: boolean;
    isRunningToolCalls: boolean;
    isLoading: boolean;
    exhaustedRetries: boolean;
    sendingError: Error | undefined;
    generatingError: Error | undefined;
    isLoadingThread: boolean;
    isSavingThread: boolean;
    threadLoadError: {
        error: string;
        stacktrace?: string;
    } | undefined;
    threadSaveError: {
        error: string;
        stacktrace?: string;
    } | undefined;
};