neura-sdk/dist/components/NeuraChat.js

TypeScript SDK for interacting with the Neura AI API

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback } from 'react';
import { NeuraStream } from './NeuraStream';
export const NeuraChat = ({ sessionId, userId, initialMessages = [], reasoningFormat, onNewMessage, renderMessage, renderInput, }) => {
    const [messages, setMessages] = useState(initialMessages);
    const [input, setInput] = useState('');
    const [isStreaming, setIsStreaming] = useState(false);
    const handleInputChange = useCallback((e) => {
        setInput(e.target.value);
    }, []);
    const handleSubmit = useCallback(() => {
        if (!input.trim())
            return;
        const userMessage = { role: 'user', content: input };
        setMessages((prev) => [...prev, userMessage]);
        onNewMessage?.(userMessage);
        setInput('');
        setIsStreaming(true);
    }, [input, onNewMessage]);
    const handleStreamComplete = useCallback((content) => {
        const assistantMessage = { role: 'assistant', content };
        setMessages((prev) => [...prev, assistantMessage]);
        onNewMessage?.(assistantMessage);
        setIsStreaming(false);
    }, [onNewMessage]);
    // Default message renderer
    const defaultRenderMessage = useCallback((message, index) => (_jsxs("div", { className: `message ${message.role}`, children: [_jsx("div", { className: "message-role", children: message.role }), _jsx("div", { className: "message-content", children: message.content })] }, index)), []);
    // Default input renderer
    const defaultRenderInput = useCallback((props) => (_jsxs("div", { className: "chat-input", children: [_jsx("textarea", { value: props.value, onChange: props.onChange, disabled: props.disabled, placeholder: "Type your message...", onKeyDown: (e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                        e.preventDefault();
                        props.onSubmit();
                    }
                } }), _jsx("button", { onClick: props.onSubmit, disabled: props.disabled, children: "Send" })] })), []);
    // Prepare the options for the stream
    const streamOptions = {
        messages: JSON.stringify(messages),
        sessionId,
        userId,
        stream: true,
        reasoningFormat,
    };
    return (_jsxs("div", { className: "neura-chat", children: [_jsxs("div", { className: "chat-messages", children: [messages.map((message, index) => (renderMessage || defaultRenderMessage)(message, index)), isStreaming && (_jsx(NeuraStream, { options: streamOptions, onComplete: handleStreamComplete, children: ({ fullText, loading }) => (loading ? (_jsxs("div", { className: "message assistant", children: [_jsx("div", { className: "message-role", children: "assistant" }), _jsx("div", { className: "message-content", children: fullText || 'Thinking...' })] })) : null) }))] }), (renderInput || defaultRenderInput)({
                value: input,
                onChange: handleInputChange,
                onSubmit: handleSubmit,
                disabled: isStreaming,
            })] }));
};