@plteam/chat-ui/dist/views/message/MessageComponentSkeleton.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 MessageComponentBox from './MessageComponentBox';
import Stack from '@mui/material/Stack';
import Skeleton from '@mui/material/Skeleton';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
const UserSkeletonStyled = styled(Skeleton)(({ theme }) => ({
    width: '80%',
    height: 40,
    borderRadius: 24,
    marginRight: theme.spacing(1.5),
}));
const AssistantMessageComponentStyled = styled(MessageComponentBox)(({ theme }) => ({
    display: 'flex',
    flexDirection: 'column',
    gap: 4,
    paddingTop: theme.spacing(1),
}));
const AssistantRootStyled = styled(Box)(({ theme }) => ({
    width: '50%',
    padding: theme.spacing(0, 3),
}));
const MessageComponentSkeleton = ({ gap }) => {
    return (React.createElement(Stack, { width: "100%", gap: gap },
        React.createElement(MessageComponentBox, { isUser: true },
            React.createElement(UserSkeletonStyled, { variant: "rectangular" })),
        React.createElement(AssistantMessageComponentStyled, { isUser: false },
            React.createElement(AssistantRootStyled, null,
                React.createElement(Skeleton, { variant: "text" })),
            React.createElement(AssistantRootStyled, null,
                React.createElement(Skeleton, { variant: "text" })),
            React.createElement(AssistantRootStyled, null,
                React.createElement(Skeleton, { variant: "text" })),
            React.createElement(AssistantRootStyled, null,
                React.createElement(Skeleton, { variant: "text" })))));
};
export default MessageComponentSkeleton;