"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * AI Chat Demo Component
 *
 * A demonstration of using the native_aijs SDK integration
 */
const react_1 = require("react");
const useAI_js_1 = __importDefault(require("../../hooks/useAI.js"));
const AIChatDemo = ({ initialPrompt = '', initialSystemPrompt = 'You are a helpful assistant.', className = '', showModelSelector = true }) => {
    // Get AI capabilities from our hook
    const { chat, status, messages, isLoading, isStreaming, isError, error, cancel, reset } = (0, useAI_js_1.default)({
        initialConfig: {
            model: 'claude-3-haiku-20240307',
            temperature: 0.7,
            stream: true
        },
        onError: (err) => {
            console.error('AI Error:', err);
        }
    });
    // Component state
    const [inputValue, setInputValue] = (0, react_1.useState)(initialPrompt);
    const [selectedModel, setSelectedModel] = (0, react_1.useState)('claude-3-haiku-20240307');
    const messagesEndRef = (0, react_1.useRef)(null);
    // Available models
    const availableModels = [
        { id: 'claude-3-haiku-20240307', name: 'Claude 3 Haiku' },
        { id: 'claude-3-sonnet-20240229', name: 'Claude 3 Sonnet' },
        { id: 'claude-3-opus-20240229', name: 'Claude 3 Opus' },
        { id: 'gpt-3.5-turbo', name: 'GPT-3.5 Turbo' },
        { id: 'gpt-4', name: 'GPT-4' },
        { id: 'mistral-7b', name: 'Mistral 7B' }
    ];
    // Scroll to bottom when messages change
    (0, react_1.useEffect)(() => {
        if (messagesEndRef.current) {
            messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
        }
    }, [messages]);
    // Handle sending a message
    const handleSendMessage = async (e) => {
        e.preventDefault();
        if (!inputValue.trim() || isLoading || isStreaming)
            return;
        // Prepare message history
        const chatMessages = [
            { role: 'system', content: initialSystemPrompt },
            ...messages,
            { role: 'user', content: inputValue }
        ].filter(Boolean);
        // Clear input
        setInputValue('');
        try {
            // Send chat request
            await chat({
                messages: chatMessages,
                model: selectedModel,
                stream: true,
                temperature: 0.7,
                maxTokens: 1000
            });
        }
        catch (err) {
            console.error('Failed to send message:', err);
        }
    };
    // Handle model change
    const handleModelChange = (e) => {
        setSelectedModel(e.target.value);
    };
    // Handle cancellation
    const handleCancel = () => {
        cancel();
    };
    // Handle resetting the conversation
    const handleReset = () => {
        reset();
        setInputValue('');
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col h-full bg-white rounded-lg shadow-md ${className}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4 border-b", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold", children: "Native AI.js Chat Demo" }), showModelSelector && ((0, jsx_runtime_1.jsx)("select", { value: selectedModel, onChange: handleModelChange, className: "p-2 bg-white border rounded-md", disabled: isLoading || isStreaming, children: availableModels.map(model => ((0, jsx_runtime_1.jsx)("option", { value: model.id, children: model.name }, model.id))) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-grow overflow-y-auto p-4", children: [messages.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "text-center text-gray-500 mt-8", children: (0, jsx_runtime_1.jsx)("p", { children: "Send a message to start a conversation" }) })) : (messages.map((message, index) => {
                        // Skip system messages
                        if (message.role === 'system')
                            return null;
                        return ((0, jsx_runtime_1.jsx)("div", { className: `mb-4 ${message.role === 'user' ? 'text-right' : 'text-left'}`, children: (0, jsx_runtime_1.jsx)("div", { className: `inline-block max-w-3/4 p-3 rounded-lg ${message.role === 'user'
                                    ? 'bg-blue-100 text-blue-900'
                                    : 'bg-gray-100 text-gray-900'}`, children: message.content }) }, index));
                    })), (isLoading || isStreaming) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center text-gray-500 mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 bg-gray-500 rounded-full mr-1 animate-bounce" }), (0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 bg-gray-500 rounded-full mr-1 animate-bounce", style: { animationDelay: '0.2s' } }), (0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 bg-gray-500 rounded-full animate-bounce", style: { animationDelay: '0.4s' } })] })), isError && error && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-red-100 text-red-800 p-3 rounded-lg mb-4", children: [(0, jsx_runtime_1.jsxs)("p", { className: "font-semibold", children: ["Error: ", error.code] }), (0, jsx_runtime_1.jsx)("p", { children: error.message })] })), (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] }), (0, jsx_runtime_1.jsx)("form", { onSubmit: handleSendMessage, className: "border-t p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex space-x-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: "Type a message...", className: "flex-grow p-2 border rounded-md", disabled: isLoading }), (0, jsx_runtime_1.jsxs)("div", { className: "flex space-x-2", children: [(isLoading || isStreaming) ? ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleCancel, className: "px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600", children: "Cancel" })) : ((0, jsx_runtime_1.jsx)("button", { type: "submit", className: "px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:bg-blue-300", disabled: !inputValue.trim() || isLoading, children: "Send" })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleReset, className: "px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300", children: "Reset" })] })] }) })] }));
};
exports.default = AIChatDemo;
//# sourceMappingURL=AIChatDemo.js.map