import * as React from 'react';
import { CoreSlots, SlotsType } from './usePropsSlots';
import { ChatMessageOwner, Message, MessageFeedbackTagType, MessageModel, RatingType, MessageSentParams, FileAttachedParams } from '../../models';
import { SlotPropsType } from './SlotPropsType';
import { ApiRefType } from './useApiRef';
import { Thread } from '../../models';
import { ChatEventListeners } from './ChatEventListeners';
import { BeforeUserMessageSendFnType } from '../thread/useThreadSendMessage';
import { GetCurrentBranchFnType } from '../../models/ThreadMessages';
import { onShowAlertType } from '../../types/onShowAlertType';
import { IdType } from '../../types';
import { ToolType } from '../../types/ToolType';
import { LangKeys } from '../../locale/Localization';
import { AIModelType } from '../../types/AIModelType';
type RequiredProps
> = {
/**
* Threads list
* @required
*/
threads: DD[];
/**
* Callback fired when the user sends a message to the thread.
* @param message - User's message
*/
onUserMessageSent: (params: MessageSentParams) => void | Promise;
};
export type ChatPropsTypes> = {
/**
* You can customize the styles using styled-components or by passing your own classnames.
*/
className?: string;
/**
* Show loading component
*/
loading: boolean;
/**
* This thread will open immediately after chat initialization, if it's in the thread list.
* If it isn’t in the thread list or if the parameter is not provided, an empty thread will open.
*/
initialThread?: DD;
/**
* Load thread with message history if only id and title are passed in threads
*/
getFullThread?: (threadId: IdType) => DD | Promise;
/**
* Advanced function for forming a sequence of messages to implement custom functionality of branches
*/
getCurrentBranch?: GetCurrentBranchFnType;
/**
* You can create your own messages from the user and assistant before sending, according to your architecture,
* after which the Chat UI will adjust them to its format via an Adapter.
*/
beforeUserMessageSend?: BeforeUserMessageSendFnType;
/**
* Action buttons for the assistant's message.
*/
assistantActions?: React.JSXElementConstructor<{
message: Extract;
thread: DD;
}>[];
/**
* Runtime processing of the assistant's message.
* @param text
*/
processAssistantText?: ((text: string) => string);
/**
* Callback fired when the current thread changes
*/
onChangeCurrentThread?: ChatEventListeners<{
thread: DD;
}>;
/**
* Callback fired when message branch changes
*/
onChangeMessageBranch?: ChatEventListeners<{
message: DM;
}>;
/**
* Callback fired after message streaming is complete.
*/
onAssistantMessageTypingFinish?: ChatEventListeners<{
message: DM;
thread: DD;
}>;
/**
* Call when user starts new thread
*/
handleCreateNewThread?: () => DD;
/**
* Invoked when the user clicks the stop streaming button.
*/
handleStopMessageStreaming?: () => void;
/**
* This function defines pagination for the branching point of the chat.
*/
handleBranchPagination?: (currentMessage: MessageModel, messages: MessageModel[]) => MessageModel[];
/**
* Callback fired when first message sent
*/
onFirstMessageSent?: ChatEventListeners<{
thread: DD;
}>;
/**
* Callback fired when first message sent
*/
onThreadDeleted?: ChatEventListeners<{
thread: DD;
}>;
/**
* Callback fired when thread is renamed
*/
onThreadRenamed?: ChatEventListeners<{
thread: DD;
oldTitle: string;
newTitle: string;
}>;
/**
* Prefill textfield
*/
defaultTextFieldValue?: string;
/**
* Branching of the conversation after editing the user's message or updating the assistant's answer.
* Unlocks the "edit message" function for the user.
* Unlocks the "change model" or "reply again" function for the assistant.
*/
enableBranches?: boolean;
/**
* If callback is set, rating buttons appear. Callback fired when message rating sent
*/
onChangeMessageRating?: ChatEventListeners<{
message: DM;
rating: RatingType | undefined;
}>;
/**
* If callback is set, feedback window appear after rating button click. Callback fired when message feedback sent
*/
onSendMessageFeedback?: ChatEventListeners<{
message: DM;
feedback: string;
tags: MessageFeedbackTagType[];
}>;
/**
* List of "like" options in feedback window.
* @default messageFeedbackLikeOptions
*/
feedbackLikeOptions?: MessageFeedbackTagType[];
/**
* List of "dislike" options in feedback window.
* @default messageFeedbackDislikeOptions
*/
feedbackDislikeOptions?: MessageFeedbackTagType[];
/**
* A flag indicating whether message copying is disabled
*/
disableMessageCopying?: boolean;
/**
* Enable chat reasoning functionality
*/
enableReasoning?: boolean;
/**
* List of tools
*/
toolsList?: ToolType[];
/**
* Enable user's ability to add files in messages
*/
enableFileAttachments?: boolean;
/**
* Prevent the user from deleting/adding files during message editing
*/
disableFileAttachmentsEditing?: boolean;
/**
* Callback fired after file attach to message
*/
onFileAttached?: (params: FileAttachedParams) => void | Promise;
/**
* Callback fired after file detached from message
*/
onFileDetached?: (fileId: IdType) => void | Promise;
/**
* Acceptable file formats for attaching to a message.
* Check [MDN Docs](https://developer.mozilla.org/docs/Web/HTML/Reference/Attributes/accept) for more information.
* @example Array ['image', 'video'] | ['.png', '.mp4'] | ['image/*', 'video/*']
* @example String 'image/*, video/*' | '.png, .mp4'
* @default '*'
*/
acceptableFileFormat?: string | string[];
/**
* Maximum size of a single file in bytes.
* @default 2 GB
*/
maxFileSizeBytes?: number;
/**
* Maximum number of files in a single message.
* @default 20
*/
maxFileCount?: number;
/**
* Minimum height of the message container for user + assistant, so that the message from the user appears at the top
*/
getConversationBlockHeightMin?: (calculatedHeight: number) => number;
/**
* The function outputs the first message in the thread.
*/
initialThreadMessage?: (threadId: IdType) => {
text: string;
stream: boolean;
} | undefined;
/**
* If this function is present, the default snackbar will not be shown; instead, this function will be called.
*/
onShowAlert?: onShowAlertType;
/**
* Allows rendering arbitrary React components in markdown.
*/
customMarkdownComponents?: {
name: string;
component: React.ElementType;
skeletonHeight?: number;
}[];
/**
* Callback fired when active tool changed.
*/
onToolChanged?: (type: string | undefined) => void;
/**
* If the value is `true`, default markdown wrapper will be forced into `ltr` mode.
* @default false
*/
disableRtl?: boolean;
/**
* List of ai models.
*/
aiModelList?: AIModelType[];
/**
* Creates new thread when model is changed if `true`.
* @default false
*/
openNewThreadOnModelChange?: boolean;
/**
* Typing animation speed in milliseconds.
* @default 600
*/
typingSpeed?: number;
/**
* If the value is `true`, default markdown wrapper will be forced into `ltr` mode.
* @default false
*/
disableMessageReloading?: boolean;
} & RequiredProps;
export type ChatUsersProps> = Partial<{
/**
* ChatUI defaults to using the window for automatic conversation scrolling.
* if you have embedded the chat within your own component, supply the container's ref to allow for proper scroll management.
*/
scrollerRef: React.RefObject;
/**
* The components used for each slot inside. Can be instantiated with `useChatSlots`
*/
slots: Partial>;
/**
* The props used for each slot inside. Can be instantiated with `useChatSlots`
*/
slotProps: Partial>;
/**
* The components used for each core slot include Button, IconButton, etc. Can be instantiated with `useChatSlots` or `useChatCoreSlots`
*/
coreSlots: Partial;
/**
* The language in which the chat interface will be displayed.
*/
lang: LangKeys;
/**
* The ref object that allows ChatUI manipulation. Can be instantiated with `useChatContext`
*/
apiRef: React.MutableRefObject | null>;
}> & RequiredProps & Partial, 'slots' | 'coreSlots' | 'slotProps' | keyof RequiredProps>>;
export declare const useChatProps: >(userProps: ChatUsersProps) => ChatPropsTypes;
export {};