@copilotkit/react-ui

import * as react_jsx_runtime from 'react/jsx-runtime'; import { CopilotChatIcons, CopilotChatLabels } from './ChatContext.js'; import React__default from 'react'; import { ChatSuggestions, OnStopGeneration, OnReloadMessages, SystemMessageFunction } from '@copilotkit/react-core'; import { Message, CopilotErrorHandler } from '@copilotkit/shared'; import { ComponentsMap, AssistantMessageProps, UserMessageProps, ErrorMessageProps, MessagesProps, RenderMessageProps, RenderSuggestionsListProps, InputProps, ImageRendererProps, CopilotObservabilityHooks } from './props.js'; import '../../types/suggestions.js'; /** * Props for CopilotChat component. */ interface CopilotChatProps { /** * Custom instructions to be added to the system message. Use this property to * provide additional context or guidance to the language model, influencing * its responses. These instructions can include specific directions, * preferences, or criteria that the model should consider when generating * its output, thereby tailoring the conversation more precisely to the * user's needs or the application's requirements. */ instructions?: string; /** * Controls the behavior of suggestions in the chat interface. * * `auto` (default) - Suggestions are generated automatically: * - When the chat is first opened (empty state) * - After each message exchange completes * - Uses configuration from `useCopilotChatSuggestions` hooks * * `manual` - Suggestions are controlled programmatically: * - Use `setSuggestions()` to set custom suggestions * - Use `generateSuggestions()` to trigger AI generation * - Access via `useCopilotChat` hook * * `SuggestionItem[]` - Static suggestions array: * - Always shows the same suggestions * - No AI generation involved */ suggestions?: ChatSuggestions; /** * A callback that gets called when the in progress state changes. */ onInProgress?: (inProgress: boolean) => void; /** * A callback that gets called when a new message it submitted. */ onSubmitMessage?: (message: string) => void | Promise<void>; /** * A custom stop generation function. */ onStopGeneration?: OnStopGeneration; /** * A custom reload messages function. */ onReloadMessages?: OnReloadMessages; /** * A callback function to regenerate the assistant's response */ onRegenerate?: (messageId: string) => void; /** * A callback function when the message is copied */ onCopy?: (message: string) => void; /** * A callback function for thumbs up feedback */ onThumbsUp?: (message: Message) => void; /** * A callback function for thumbs down feedback */ onThumbsDown?: (message: Message) => void; /** * 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; /** * Icons can be used to set custom icons for the chat window. */ icons?: CopilotChatIcons; /** * Labels can be used to set custom labels for the chat window. */ labels?: CopilotChatLabels; /** * Enable image upload button (image inputs only supported on some models) */ imageUploadsEnabled?: boolean; /** * The 'accept' attribute for the file input used for image uploads. * Defaults to "image/*". */ inputFileAccept?: string; /** * A function that takes in context string and instructions and returns * the system message to include in the chat request. * Use this to completely override the system message, when providing * instructions is not enough. */ makeSystemMessage?: SystemMessageFunction; /** * Disables inclusion of CopilotKit’s default system message. When true, no system message is sent (this also suppresses any custom message from <code>makeSystemMessage</code>). */ disableSystemMessage?: boolean; /** * A custom assistant message component to use instead of the default. */ AssistantMessage?: React__default.ComponentType<AssistantMessageProps>; /** * A custom user message component to use instead of the default. */ UserMessage?: React__default.ComponentType<UserMessageProps>; /** * A custom error message component to use instead of the default. */ ErrorMessage?: React__default.ComponentType<ErrorMessageProps>; /** * A custom Messages component to use instead of the default. */ Messages?: React__default.ComponentType<MessagesProps>; /** * @deprecated - use RenderMessage instead */ RenderTextMessage?: React__default.ComponentType<RenderMessageProps>; /** * @deprecated - use RenderMessage instead */ RenderActionExecutionMessage?: React__default.ComponentType<RenderMessageProps>; /** * @deprecated - use RenderMessage instead */ RenderAgentStateMessage?: React__default.ComponentType<RenderMessageProps>; /** * @deprecated - use RenderMessage instead */ RenderResultMessage?: React__default.ComponentType<RenderMessageProps>; /** * @deprecated - use RenderMessage instead */ RenderImageMessage?: React__default.ComponentType<RenderMessageProps>; /** * A custom RenderMessage component to use instead of the default. * * **Warning**: This is a break-glass solution to allow for custom * rendering of messages. You are most likely looking to swap out * the AssistantMessage and UserMessage components instead which * are also props. */ RenderMessage?: React__default.ComponentType<RenderMessageProps>; /** * A custom suggestions list component to use instead of the default. */ RenderSuggestionsList?: React__default.ComponentType<RenderSuggestionsListProps>; /** * A custom Input component to use instead of the default. */ Input?: React__default.ComponentType<InputProps>; /** * A custom image rendering component to use instead of the default. */ ImageRenderer?: React__default.ComponentType<ImageRendererProps>; /** * A class name to apply to the root element. */ className?: string; /** * Children to render. */ children?: React__default.ReactNode; hideStopButton?: boolean; /** * Event hooks for CopilotKit chat events. * These hooks only work when publicApiKey is provided. */ observabilityHooks?: CopilotObservabilityHooks; /** * Custom error renderer for chat-specific errors. * When provided, errors will be displayed inline within the chat interface. */ renderError?: (error: { message: string; operation?: string; timestamp: number; onDismiss: () => void; onRetry?: () => void; }) => React__default.ReactNode; /** * Optional handler for comprehensive debugging and observability. */ onError?: CopilotErrorHandler; } type ImageUpload = { contentType: string; bytes: string; }; declare function CopilotChat({ instructions, suggestions, onSubmitMessage, makeSystemMessage, disableSystemMessage, onInProgress, onStopGeneration, onReloadMessages, onRegenerate, onCopy, onThumbsUp, onThumbsDown, markdownTagRenderers, Messages, RenderMessage, RenderSuggestionsList, Input, className, icons, labels, AssistantMessage, UserMessage, ImageRenderer, ErrorMessage, imageUploadsEnabled, inputFileAccept, hideStopButton, observabilityHooks, renderError, onError, RenderTextMessage, RenderActionExecutionMessage, RenderAgentStateMessage, RenderResultMessage, RenderImageMessage, }: CopilotChatProps): react_jsx_runtime.JSX.Element; declare function WrappedCopilotChat({ children, icons, labels, className, }: { children: React__default.ReactNode; icons?: CopilotChatIcons; labels?: CopilotChatLabels; className?: string; }): react_jsx_runtime.JSX.Element; export { CopilotChat, CopilotChatProps, ImageUpload, WrappedCopilotChat };