@state-less/leap-frontend/dist/server-components/examples/ChatApp.js

A collection of open source fullstack services powered by React Server

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Card, CardContent, TextField, CardActions, Button, Grid, ListItem, ListItemText, Box, Avatar, Chip, } from '@mui/material';
import { useComponent } from '@state-less/react-client';
import { useEffect, useRef, useState } from 'react';
import { Markdown } from '../../components/Markdown.js';
export const ChatApp = () => {
    const [items, setItems] = useState(10);
    const [room, { loading }] = useComponent('room-global', {
        props: {
            num: items,
        },
        preventUnload: true,
        sendUnmount: true,
        //data: component?.children?.[0],
    });
    const { messages = [], sendMessage } = room?.props || {};
    const [text, setText] = useState('');
    const [cancelled, setCancel] = useState(false);
    const ref = useRef(null);
    useEffect(() => {
        setTimeout(() => {
            ref.current?.scrollTo({
                top: ref.current?.scrollHeight,
            });
        }, 100);
    }, [loading]);
    return (_jsxs(Card, { children: [_jsx(CardContent, { children: _jsxs(Grid, { container: true, spacing: 1, children: [_jsxs(Grid, { item: true, xs: 9, children: [_jsx(Box, { sx: { display: 'flex', width: '100%' }, children: _jsxs(Button, { disabled: items >= room?.props?.total, onClick: () => setItems(items + 10), sx: { mx: 'auto' }, children: ["Load More ", items] }) }), _jsx(Box, { sx: {
                                        height: '500px',
                                        overflowY: 'scroll',
                                    }, ref: ref, children: _jsx(Box, { sx: {
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: 1,
                                        }, children: messages.map((message) => {
                                            return (_jsxs(Card, { children: [_jsx(CardContent, { children: _jsx(Markdown, { disablePadding: true, children: message?.message }) }), _jsxs(CardActions, { children: [new Date(message?.timestamp).toLocaleString(), _jsx(Chip, { sx: { ml: 'auto' }, avatar: _jsx(Avatar, { sx: { width: 24, height: 24 }, src: message?.author?.user?.strategies?.google
                                                                        ?.decoded?.picture }), label: message?.author?.user?.strategies?.google?.decoded
                                                                    ?.name || message?.author?.id })] })] }));
                                        }) }) }), _jsx(TextField, { fullWidth: true, rows: 3, multiline: true, value: text, onChange: (e) => setText(e.target.value), sx: { mt: 1 } })] }), _jsx(Grid, { item: true, xs: 3, children: room?.props?.clients?.map?.((client) => {
                                return (_jsx(ListItem, { children: _jsx(ListItemText, { primary: client?.user?.strategies?.google?.decoded?.name ||
                                            client?.id }) }));
                            }) })] }) }), _jsx(CardActions, { children: _jsx(Button, { disabled: text?.length < 3, onClick: () => {
                        sendMessage(text);
                        setText('');
                    }, children: "Send" }) })] }));
};