@deep-foundation/deepcase/imports/messanger.js

[](https://gitpod.io/#https://github.com/deep-foundation/deepcase) [](https://discord.gg/deep-

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Box, Button, Input, InputGroup, InputLeftElement, InputRightElement, Text, VStack } from '@chakra-ui/react';
const MotionBox = motion(Box);
const Message = ({ text }) => {
    const messageVariants = {
        hidden: { opacity: 0, y: 10 },
        visible: { opacity: 1, y: 0 },
    };
    return (_jsx(MotionBox, { initial: "hidden", animate: "visible", exit: "hidden", variants: messageVariants, transition: { duration: 0.3 }, bg: "blue.500", color: "white", borderRadius: "md", p: 2, my: 1, maxWidth: "60%", children: _jsx(Text, { children: text }) }));
};
export const MessagingInterface = () => {
    const [messages, setMessages] = useState([]);
    const [inputValue, setInputValue] = useState('');
    const messagesEndRef = useRef(null);
    const sendMessage = () => {
        if (inputValue.trim() !== '') {
            setMessages((prevMessages) => [...prevMessages, inputValue]);
            setInputValue('');
        }
    };
    const handleKeyPress = (event) => {
        if (event.key === 'Enter') {
            sendMessage();
        }
    };
    useEffect(() => {
        var _a;
        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
    }, [messages]);
    return (_jsxs(Box, { h: "40vh", display: "flex", flexDirection: "column", children: [_jsxs(VStack, { flex: "1", p: 4, overflowY: "auto", alignItems: "flex-start", spacing: 4, css: {
                    '&::-webkit-scrollbar': {
                        width: '4px',
                    },
                    '&::-webkit-scrollbar-track': {
                        background: '#f0f0f0',
                    },
                    '&::-webkit-scrollbar-thumb': {
                        background: '#888',
                        borderRadius: '2px',
                    },
                }, children: [_jsx(AnimatePresence, { children: messages.map((message, index) => (_jsx(Message, { text: message }, index))) }), _jsx("div", { ref: messagesEndRef })] }), _jsx(Box, { p: 4, children: _jsxs(InputGroup, { children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Box, { bg: "blue.500", borderRadius: "full", w: "2", h: "2" }) }), _jsx(Input, { value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyPress: handleKeyPress, placeholder: "Type your message", bg: "blue.100", borderRadius: "full", pl: 8 }), _jsx(InputRightElement, { width: "4.5rem", children: _jsx(Button, { h: "1.75rem", size: "sm", colorScheme: "blue", onClick: sendMessage, children: "Send" }) })] }) })] }));
};
//# sourceMappingURL=messanger.js.map