import { ConversationUiCtrl, ConvoMarkdownEnableState, ConvoRagRenderer, FlatConvoConversation, FlatConvoMessage } from "@convo-lang/convo-lang";
import { ConversationStatusIndicatorProps } from "./ConversationStatusIndicator.js";
export type ConvoMessageIconRenderer = (msg: FlatConvoMessage) => string | any;
export interface ConvoMessageRenderOptions {
    ctrl: ConversationUiCtrl;
    flat: FlatConvoConversation | null;
    showSystemMessages?: boolean;
    showFunctions?: boolean;
    hideSuggestions?: boolean;
    showResults?: boolean;
    rowClassName?: string;
    ragRenderer?: ConvoRagRenderer;
    assistantIcon?: string;
    userIcon?: string;
    assistantIconRender?: ConvoMessageIconRenderer;
    userIconRender?: ConvoMessageIconRenderer;
    iconSize?: string;
    iconClassName?: string;
    callRenderer?: (msg: FlatConvoMessage, flat: FlatConvoConversation, ctrl: ConversationUiCtrl) => any;
    enableMarkdown?: ConvoMarkdownEnableState;
    markdownClassName?: string;
    messageClassName?: string;
    userClassName?: string;
    assistantClassName?: string;
    style: ConvoMessagesViewStyle;
}
export interface MessagesViewProps {
    ctrl?: ConversationUiCtrl;
    renderTarget?: string;
    ragRenderer?: ConvoRagRenderer;
    messageBottomPadding?: string;
    autoHeight?: boolean;
    hideSuggestions?: boolean;
    assistantIcon?: string;
    userIcon?: string;
    assistantIconRender?: ConvoMessageIconRenderer;
    userIconRender?: ConvoMessageIconRenderer;
    iconSize?: string;
    iconClassName?: string;
    callRenderer?: (msg: FlatConvoMessage, flat: FlatConvoConversation, ctrl: ConversationUiCtrl) => any;
    enableMarkdown?: ConvoMarkdownEnableState;
    markdownClassName?: string;
    messageClassName?: string;
    userClassName?: string;
    assistantClassName?: string;
    style?: ConvoMessagesViewStyle;
    statusIndicatorRenderer?: (props: ConversationStatusIndicatorProps) => any;
}
export declare function MessagesView({ renderTarget, ctrl: _ctrl, ragRenderer, messageBottomPadding, autoHeight, hideSuggestions, assistantIcon, userIcon, assistantIconRender, userIconRender, iconClassName, iconSize, callRenderer, enableMarkdown, markdownClassName, messageClassName, userClassName, assistantClassName, style, statusIndicatorRenderer }: MessagesViewProps): import("react/jsx-runtime").JSX.Element;
export type ConvoMessagesViewStyle = typeof defaultStyle;
declare const defaultStyle: import("@iyio/common").ParseAtDotStyle<"\n    @.root{\n        flex:1;\n        display:flex;\n        flex-direction:column;\n    }\n    @.root.autoHeight{\n        flex:unset;\n    }\n\n    @.list{\n        display:flex;\n        flex-direction:column;\n        gap:@@gap;\n        padding:@@padding @@padding @@messageBottomPadding @@padding;\n    }\n    @.msg{\n        padding:@@messagePadding;\n        border-radius:@@messageBorderRadius;\n        white-space:pre-wrap;\n        word-break:break-word;\n        font-size:@@fontSize;\n        max-width:@@maxMessageWidth;\n    }\n    @.msg.user{\n        color:@@userColor;\n        font-weight:@@userWeight;\n        background-color:@@userBackground;\n        border:@@userBorder;\n        margin-left:4rem;\n        align-self:flex-end;\n    }\n    @.msg.agent{\n        color:@@agentColor;\n        font-weight:@@agentWeight;\n        background-color:@@agentBackground;\n        border:@@agentBorder;\n        margin-right:4rem;\n        align-self:flex-start;\n    }\n\n    @.img{\n        border-radius:18px;\n        max-width:80%;\n    }\n    @.img.user{\n        margin-left:4rem;\n        align-self:flex-end;\n    }\n    @.img.agent{\n        margin-right:4rem;\n        align-self:flex-start;\n    }\n\n    @.data{\n        background-color:#3B3B3D99 !important;\n        font-size:0.8rem;\n        padding:0.5rem;\n    }\n    @.table{\n        display:grid;\n        grid-template-columns:auto auto 1fr;\n    }\n    @.table.singleItem{\n        display:flex;\n        flex-direction:column;\n    }\n    @.table > *{\n        padding:0.5rem 0.25rem;\n        border-bottom:1px solid #ffffff33;\n        align-items:center;\n        display:flex;\n    }\n    @.table > *:nth-last-child(-n+3){\n        border-bottom:none;\n    }\n    @.table.singleItem > *:first-child{\n        font-size:1rem;\n        font-weight:bold;\n        padding-bottom:0;\n    }\n    @.row{\n        display:flex;\n        flex-direction:column;\n        gap:@@gap;\n    }\n    @.row.fixedWidth{\n        width:@@rowWidth;\n        max-width:100%;\n        align-self:center;\n    }\n    @.rag{\n        background-color:#3B3B3D99 !important;\n    }\n    @.msg.suggestion{\n        background-color:@@suggestionBackgroundColor;\n        border:@@suggestionBorder;\n        padding:0;\n        display:flex;\n        flex-direction:column;\n        color:@@suggestionColor;\n        font-weight:@@suggestionWeight;\n    }\n    @.msg.agent.suggestion{\n    }\n    @.msg.user.suggestion{\n    }\n    @.suggestIcon{\n        fill:@@agentColor;\n    }\n    @.suggestBtn{\n        border-top:@@suggestionDivider;\n        padding:@@messagePadding;\n        transition:background-color 0.2s ease-in-out;\n        text-align:center;\n        justify-content:center;\n    }\n    @.suggestBtn:hover{\n        background-color:color-mix( in srgb, @@userBackground , transparent 50% );\n    }\n    @.suggestBtn:first-child{\n        border-top:none;\n        border-top-right-radius:calc( @@messageBorderRadius / 2 );\n        border-top-left-radius:calc( @@messageBorderRadius / 2 );\n    }\n    @.suggestBtn:last-child{\n        border-bottom-right-radius:calc( @@messageBorderRadius / 2 );\n        border-bottom-left-radius:calc( @@messageBorderRadius / 2 );\n    }\n    @.suggestTitles{\n        display:flex;\n        flex-direction:column;\n        margin-top:0.5rem;\n        margin-bottom:-0.5rem;\n        margin:0.5rem 0.5rem -0.5rem 0.5rem;\n        opacity:0.5;\n        font-size:0.9em;\n    }\n\n    /*------*/\n\n    @.textMsg{\n        display:flex;\n        gap:0.5rem;\n    }\n    @.textMsgContent{\n        display:flex;\n        flex-direction:column;\n        flex:1;\n    }\n">;
export {};