import { AIMessage, Message, UserMessage, CopilotErrorEvent, } from "@copilotkit/shared"; import { CopilotChatSuggestion } from "../../types/suggestions"; import { ReactNode } from "react"; import { ImageData } from "@copilotkit/shared"; import type { InputContentSource } from "@copilotkit/shared"; import type { AttachmentsConfig, Attachment, AttachmentModality, } from "@copilotkit/shared"; // Re-export for backward compat export type { AttachmentsConfig, Attachment, AttachmentModality }; /** * Event hooks for CopilotKit chat events. * These hooks only work when publicApiKey is provided. */ export interface CopilotObservabilityHooks { /** * Called when a message is sent by the user */ onMessageSent?: (message: string) => void; /** * Called when the chat is minimized/closed */ onChatMinimized?: () => void; /** * Called when the chat is expanded/opened */ onChatExpanded?: () => void; /** * Called when a message is regenerated */ onMessageRegenerated?: (messageId: string) => void; /** * Called when a message is copied */ onMessageCopied?: (content: string) => void; /** * Called when feedback is given (thumbs up/down) */ onFeedbackGiven?: ( messageId: string, type: "thumbsUp" | "thumbsDown", ) => void; /** * Called when chat generation starts */ onChatStarted?: () => void; /** * Called when chat generation stops */ onChatStopped?: () => void; /** * Called when an error occurs in the chat * This enables chat-specific error handling UX while preserving system-wide error monitoring */ onError?: (errorEvent: CopilotErrorEvent) => void; } export interface ButtonProps {} export interface WindowProps { clickOutsideToClose: boolean; hitEscapeToClose: boolean; shortcut: string; children?: React.ReactNode; } export interface HeaderProps {} export interface SuggestionsProps { title: string; message: string; partial?: boolean; className?: string; onClick: (message: string) => void; } export type ComponentsMap< T extends Record = Record, > = { [K in keyof T]: React.FC<{ children?: ReactNode } & T[K]>; }; export interface MessagesProps { messages: Message[]; inProgress: boolean; children?: React.ReactNode; chatError?: ChatError | null; AssistantMessage: React.ComponentType; UserMessage: React.ComponentType; ErrorMessage?: React.ComponentType; RenderMessage: React.ComponentType; ImageRenderer: React.ComponentType; /** * Callback function to regenerate the assistant's response */ onRegenerate?: (messageId: string) => void; /** * Callback function when the message is copied */ onCopy?: (message: string) => void; /** * Callback function for thumbs up feedback */ onThumbsUp?: (message: Message) => void; /** * Callback function for thumbs down feedback */ onThumbsDown?: (message: Message) => void; /** * Map of message IDs to their feedback state */ messageFeedback?: Record; /** * A list of markdown components to render in assistant message. * Useful when you want to render custom elements in the message (e.g a reference tag element) */ markdownTagRenderers?: ComponentsMap; /** * @deprecated Use RenderMessage instead */ RenderTextMessage?: React.ComponentType; /** * @deprecated Use RenderMessage instead */ RenderActionExecutionMessage?: React.ComponentType; /** * @deprecated Use RenderMessage instead */ RenderAgentStateMessage?: React.ComponentType; /** * @deprecated Use RenderMessage instead */ RenderResultMessage?: React.ComponentType; /** * @deprecated Use RenderMessage instead */ RenderImageMessage?: React.ComponentType; } export interface Renderer { content: string; } export interface UserMessageProps { message?: UserMessage; ImageRenderer: React.ComponentType; /** * @deprecated use message instead * * The raw data from the assistant's response */ rawData: any; } export interface AssistantMessageProps { /** * The message content from the assistant */ message?: AIMessage; messages?: Message[]; /** * Indicates if this is the last message */ isCurrentMessage?: boolean; /** * Whether a response is loading, this is when the LLM is thinking of a response but hasn't finished yet. */ isLoading: boolean; /** * Whether a response is generating, this is when the LLM is actively generating and streaming content. */ isGenerating: boolean; /** * Callback function to regenerate the assistant's response */ onRegenerate?: () => void; /** * Callback function when the message is copied */ onCopy?: (message: string) => void; /** * Callback function for thumbs up feedback */ onThumbsUp?: (message: Message) => void; /** * Callback function for thumbs down feedback */ onThumbsDown?: (message: Message) => void; /** * The feedback state for this message ("thumbsUp" or "thumbsDown") */ feedback?: "thumbsUp" | "thumbsDown" | null; /** * A list of markdown components to render in assistant message. * Useful when you want to render custom elements in the message (e.g a reference tag element) */ markdownTagRenderers?: ComponentsMap; /** * A custom image rendering component to use instead of the default. */ ImageRenderer?: React.ComponentType; /** * @deprecated use message instead * * The raw data from the assistant's response */ rawData: any; /** * * @deprecated * * use `message.generativeUI()` instead. * * For example: * * ```tsx * const CustomAssistantMessage = ({ message }: AssistantMessageProps) => { * const subComponent = message?.generativeUI?.(); * return
{subComponent}
; * }; * * ``` */ subComponent?: React.JSX.Element; } export interface ErrorMessageProps { /** * The message content from the assistant */ error: ChatError; /** * Indicates if this is the last message */ isCurrentMessage?: boolean; /** * Callback function to regenerate the assistant's response */ onRegenerate?: () => void; /** * Callback function when the message is copied */ onCopy?: (message: string) => void; } export interface RenderMessageProps { message: Message; messages: Message[]; inProgress: boolean; index: number; isCurrentMessage: boolean; actionResult?: string; AssistantMessage?: React.ComponentType; UserMessage?: React.ComponentType; ImageRenderer?: React.ComponentType; /** * Callback function to regenerate the assistant's response */ onRegenerate?: (messageId: string) => void; /** * Callback function when the message is copied */ onCopy?: (message: string) => void; /** * Callback function for thumbs up feedback */ onThumbsUp?: (message: Message) => void; /** * Callback function for thumbs down feedback */ onThumbsDown?: (message: Message) => void; /** * Map of message IDs to their feedback state */ messageFeedback?: Record; /** * A list of markdown components to render in assistant message. * Useful when you want to render custom elements in the message (e.g a reference tag element) */ markdownTagRenderers?: ComponentsMap; } export interface InputProps { inProgress: boolean; onSend: (text: string) => Promise; isVisible?: boolean; onStop?: () => void; onUpload?: () => void; hideStopButton?: boolean; chatReady?: boolean; } export interface RenderSuggestionsListProps { suggestions: CopilotChatSuggestion[]; onSuggestionClick: (message: string) => void; isLoading: boolean; } /** * @deprecated Use `CopilotChatAttachmentRenderer` from `@copilotkit/react-core/v2` instead. * See https://docs.copilotkit.ai/migration-guides/migrate-attachments * @since 1.56.0 */ export interface ImageRendererProps { /** * @deprecated Use `source` (type `InputContentSource`) instead. * `image` only carried base64 image data. `source` supports both data and URL * sources for any modality. * See https://docs.copilotkit.ai/migration-guides/migrate-attachments * @since 1.56.0 */ image?: ImageData; /** * The content source for the image (new AG-UI format) */ source?: InputContentSource; /** * Optional content to display alongside the image */ content?: string; /** * Additional CSS class name for styling */ className?: string; } export interface ChatError { message: string; operation?: string; timestamp: number; }