import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { getClassNames } from '@websolutespa/bom-core';
import { useAutosizeTextArea, useLabel } from '@websolutespa/bom-mixer-hooks';
import { useLlm, useLlmView } from '@websolutespa/bom-mixer-llm';
import { useRef } from 'react';
import style from './page-textarea.module.scss';
export const PageTextarea = ()=>{
    const label = useLabel();
    const textAreaRef = useRef(null);
    const app = useLlm((state)=>state.app);
    const prompt = useLlm((state)=>state.prompt);
    const streaming = useLlm((state)=>state.streaming);
    const { setPrompt, clear } = useLlm((state)=>state.actions);
    const { send } = useLlmView((state)=>state.actions);
    useAutosizeTextArea(textAreaRef.current, prompt);
    const onSubmit = async (event)=>{
        event && event.preventDefault();
        if (!prompt) {
            return;
        }
        clear();
        await send(prompt, (response)=>{
        // console.log('PagePrompt.onChunk', response.chunks);
        }, (response)=>{
        // console.log('PagePrompt.onEnd', response);
        });
    };
    const onChange = (event)=>{
        const prompt = event.target?.value;
        setPrompt(prompt);
    };
    const onKeyDown = (event)=>{
        if (event.code == 'Enter' && !event.shiftKey) {
            onSubmit(event);
        }
    };
    return /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            /*#__PURE__*/ _jsx("label", {
                className: getClassNames(style.label),
                htmlFor: "llm-page-prompt__textarea",
                children: label('llm.prompt')
            }),
            /*#__PURE__*/ _jsx("textarea", {
                className: getClassNames(style.textarea, '-textarea'),
                ref: textAreaRef,
                id: "llm-page-prompt__textarea",
                name: "prompt",
                placeholder: app?.contents.promptPlaceholder,
                value: prompt,
                rows: 1,
                "aria-disabled": streaming,
                onKeyDown: onKeyDown,
                onChange: onChange
            })
        ]
    });
};

//# sourceMappingURL=page-textarea.js.map