Chat

                                                        
                                                        
                                                            import {
                                                            Avatar,
                                                            Card,
                                                            ChatBody,
                                                            ChatTextarea,
                                                            ChatBodyWrapper,
                                                            ChatFooter,
                                                            Container,
                                                            Divider,
                                                            Message,
                                                            MessageFooter,
                                                            MessageStatus,
                                                            Stack,
                                                            Typography
                                                        } from '@optimus-web/core';
                                                        
                                                        const MyChatComponent = () => {
                                                            const [value, setValue] = useState('');
                                                            const [disabled, setDisabled] = useState(true);
                                                        
                                                            const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
                                                                setValue(event.target.value);
                                                                setDisabled(event.target.value.length === 0);
                                                            };
                                                        
                                                            <Container width="600px">
                                                                <Card>
                                                                    <ChatBodyWrapper>
                                                                        <ChatBody>
                                                                            <Stack vertical spacing="100">
                                                                                <Divider>
                                                                                    <Typography textStyle="bodySmallStrong" variant="secondary">
                                                                                        <span>29/03/2024</span>
                                                                                    </Typography>
                                                                                </Divider>
                                                                                <Message
                                                                                    author="user"
                                                                                    authorName="Ocean Breeze Hotel"
                                                                                    avatar={
                                                                                        <Avatar
                                                                                            src=""
                                                                                            title="Ocean Breeze Hotel"
                                                                                            size="medium"
                                                                                        />
                                                                                    }
                                                                                    consecutiveMessage={true}
                                                                                    variant="default"
                                                                                >
                                                                                    Good afternoon! Welcome to Ocean Breeze Hotel.
                                                                                </Message>
                                                                                <Message
                                                                                    author="user"
                                                                                    avatar={
                                                                                        <Avatar
                                                                                            src=""
                                                                                            title="Ocean Breeze Hotel"
                                                                                            size="medium"
                                                                                        />
                                                                                    }
                                                                                    authorName="Ocean Breeze Hotel"
                                                                                    footer={
                                                                                        <MessageFooter
                                                                                            alignment="end"
                                                                                            time={<span>10:42 AM</span>}
                                                                                            status={<span>Sent</span>}
                                                                                            statusIcon={MessageStatus.Sent}
                                                                                            author="Ocean Breeze Hotel"
                                                                                        />
                                                                                    }
                                                                                    variant="default"
                                                                                >
                                                                                    We still have availability for those dates. Let me go ahead and book the room for you right now.
                                                                                </Message>
                                                                            </Stack>
                                                                        </ChatBody>
                                                                    </ChatBodyWrapper>
                                                                    <ChatFooter>
                                                                        <ChatTextarea
                                                                            onChange={handleChange}
                                                                            disabled={disabled}
                                                                            onKeyPress={() => true}
                                                                            onSubmit={() => true}
                                                                            value={value}
                                                                            name="textarea"
                                                                            placeholder="Type your message here"
                                                                            iconAccessibleText="Send"
                                                                            label="Type your message here"
                                                                            footerMessage="All the data is protected in this chat. It is powered by OpenAI, so inaccurate information is possible."
                                                                        />
                                                                    </ChatFooter>
                                                                </Card>
                                                            </Container>
                                                        }