import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import Box from '../box';
import { omitThemingProps, useStyleConfig, vui } from '../core';
import { Tag } from '../tag';
import { cs } from '../utils';
import { ChatInputStatus } from './chat.types';
import ChatInput from './chatInput';
import ChatMessage from './chatMessage';
/**
 * Displays a chat interface with messages and actions.
 */
export const Chat = vui((props, ref) => {
    const { className, children, inputStatus = ChatInputStatus.Default, messages, helpText, maxTextareaHeight = 120, processingMessage, suggestions, onNewTopicClick, onSuggestionClick, onSend, onStop, ...rest } = omitThemingProps(props);
    const styles = useStyleConfig('Chat', props);
    const messagesEndRef = useRef(null);
    const scrollDown = () => messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    useEffect(scrollDown, [messages, children]);
    return (_jsxs(Box, { className: cs('vui-chat', className), ref: ref, ...styles.chat, h: "100%", justifyContent: "space-between", ...rest, children: [_jsxs(Box, { className: cs('vui-chat-messages'), ...styles?.messages, children: [messages?.length ? messages.map((message, key) => _jsx(ChatMessage, { ...message }, key)) : children, _jsx("div", { ref: messagesEndRef })] }), _jsxs(Box, { column: true, children: [!!suggestions?.length && (_jsx(Box, { className: cs('vui-chat-suggestions'), ...styles?.suggestions, mb: "24px", mt: "8px", children: suggestions?.map(suggestion => (_jsx(Tag, { cursor: inputStatus === ChatInputStatus.Default ? 'pointer' : undefined, disabled: inputStatus !== ChatInputStatus.Default, mb: "6px", ml: "6px", onClick: () => onSuggestionClick?.(suggestion), children: suggestion }, suggestion))) })), _jsx(ChatInput, { helpText: helpText, maxTextareaHeight: maxTextareaHeight, onNewTopicClick: onNewTopicClick, onSend: onSend, onStop: onStop, processingMessage: processingMessage, status: inputStatus })] })] }));
});
Chat.Message = ChatMessage;
Chat.Input = ChatInput;
Chat.displayName = 'Chat';
export default Chat;
//# sourceMappingURL=chat.js.map