@plteam/chat-ui
Version:
CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript
33 lines (32 loc) • 1.44 kB
JavaScript
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { useChatSlots } from '../core/ChatSlotsContext';
import { ChatViewConstants } from '../ChatViewConstants';
import { chatClassNames } from '../core/chatClassNames';
const paddingSidesSx = 1.5;
const ThreadWidthBlockStyled = styled(Box)(({ theme }) => ({
boxSizing: 'border-box',
width: '100%',
padding: theme.spacing(0, paddingSidesSx, 1, paddingSidesSx),
backgroundColor: theme.palette.background.default,
alignItems: 'center',
'&:before': {
content: '""',
position: 'absolute',
top: -50,
bottom: 0,
width: `calc(100% - ${theme.spacing(paddingSidesSx * 2)})`,
height: 100,
pointerEvents: 'none',
zIndex: -1,
background: `linear-gradient(180deg, rgba(255,255,255, 0), ${theme.palette.background.default} 60%)`,
},
}));
const ChatTextFieldRow = ({ thread }) => {
const { slots, slotProps } = useChatSlots();
return (React.createElement(ThreadWidthBlockStyled, { id: ChatViewConstants.TEXT_FIELD_ROW_ID, className: chatClassNames.textFieldRoot },
React.createElement(slots.threadInputWrapper, { ...slotProps.threadInputWrapper },
React.createElement(slots.threadInput, { ...slotProps.threadInput, thread: thread }))));
};
export default ChatTextFieldRow;