@plteam/chat-ui/dist/views/form/ChatTextField.js

CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript

import * as React from 'react';
import InputBase, { inputBaseClasses } from '@mui/material/InputBase';
import { useElementRef } from '../hooks/useElementRef';
import { useTablet } from '../../ui/Responsive';
import useEnterPress, { handleIgnoreEnterPress } from '../hooks/useEnterPress';
import SimpleScrollbar, { simpleBarClasses } from '../../ui/SimpleScrollbar';
import { useLocalizationContext } from '../core/LocalizationContext';
import TextFieldExpandButton from './TextFieldExpandButton';
import { motion } from '../../utils/materialDesign/motion';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import { ChatViewConstants } from '../../views/ChatViewConstants';
import { useChatContext } from '../../views/core/ChatGlobalContext';
const InputBaseStyled = styled(InputBase)(({ theme }) => ({
    height: '100%',
    [`&.${inputBaseClasses.root}`]: {
        padding: theme.spacing(1, 1.5),
        height: '100%',
    },
}));
const ChatTextField = ({ text, setText, onSendMessage, handleFileUpload, expand, setExpand, disabled }) => {
    const inputRef = useElementRef();
    const [height, setHeight] = React.useState(0);
    const locale = useLocalizationContext();
    const { enableFileAttachments } = useChatContext();
    const isTablet = useTablet();
    const onEnterPress = useEnterPress(onSendMessage);
    let inputProps = {};
    if (!isTablet) {
        inputProps = {
            autoFocus: true,
            tabIndex: -1
        };
    }
    React.useEffect(() => {
        setHeight(parseInt(inputRef.current?.style.height ?? '0'));
    });
    const showExpandButton = expand || height > 75;
    const toggleExpand = () => {
        setExpand(!expand);
        inputRef.current?.focus();
    };
    const onInputClick = () => {
        if (document.activeElement !== inputRef.current) {
            inputRef.current?.focus();
        }
    };
    const handlePaste = (event) => {
        // Bug in Mozilla, only one file can be pasted: https://bugzilla.mozilla.org/show_bug.cgi?id=864052
        if (event.clipboardData.files.length && enableFileAttachments) {
            event.preventDefault();
            handleFileUpload(event.clipboardData.files);
        }
    };
    return (React.createElement(Box, { width: `calc(100% - ${ChatViewConstants.INPUT_BUTTON_SIZE}px)`, height: "100%", sx: {
            [`& .${simpleBarClasses.content}`]: {
                height: '100%',
            },
            [`& .${simpleBarClasses.contentWrapper}`]: {
                height: expand ? '100% !important' : 'auto',
            },
        } },
        React.createElement(TextFieldExpandButton, { show: showExpandButton, expand: expand, onClick: toggleExpand }),
        React.createElement(SimpleScrollbar, { style: {
                transition: `min-height ${motion.duration.medium1} ease, max-height ${motion.duration.medium1} ease`,
                maxHeight: expand ? '80vh' : 160,
                minHeight: expand ? '80vh' : 0,
                width: '100%',
            } },
            React.createElement(InputBaseStyled, { fullWidth: true, multiline: true, placeholder: locale.textFieldPlaceholder, value: text, inputRef: inputRef, sx: {
                    [`&& .${inputBaseClasses.input}`]: {
                        alignSelf: 'flex-start',
                    },
                }, disabled: disabled, onClick: onInputClick, onPaste: handlePaste, onChange: (event) => {
                    setText(event.target.value);
                }, onKeyDown: !isTablet ? handleIgnoreEnterPress : undefined, onKeyUp: isTablet
                    ? undefined
                    : onEnterPress, ...inputProps }))));
};
export default ChatTextField;