Welcome to Our Modern Web Component

Import React, { useState, useEffect, useRef } from 'react'; import { FiSend, FiUser, FiMessageSquare } from 'react icons/fi'; const ChatbotUI = () => { const [messages, setMessages] = useState([]); const [inputValue, setInputValue] = useState(''); const [isTyping, setIsTyping] = useState(false); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }; useEffect(() => { scrollToBottom(); }, [messages]); const handleInputChange = (e) => { setInputValue(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); if (inputValue.trim()) { setMessages([...messages, { text: inputValue, sender: 'user' }]); setInputValue(''); setIsTyping(true); setTimeout(() => { setIsTyping(false); setMessages(prev => [...prev, { text: 'This is a sample response from the chatbot.', sender: 'bot' }]); }, 1500); } }; return ( <div className="flex flex col md:flex row h screen bg gray 100"> <div className="w full md:w 1/2 p 8"> <h1 className="text 4xl font bold mb 6 text indigo 600">Welcome to Our Modern Web Component</h1> <p className="text lg text gray 700 mb 4">Experience our cutting edge chatbot interface, designed for seamless interaction and accessibility.</p> <div className="bg white rounded lg shadow lg p 6"> <h2 className="text 2xl font semibold mb 4 text indigo 500">Key Features</h2> <ul className="list disc list inside text gray 700"> <li>Responsive design for all devices</li> <li>Accessibility focused interface</li> <li>Real time messaging capabilities</li> <li>Intuitive user prompts</li> <li>Smooth animations and transitions</li> </ul> </div> </div> <div className="w full md:w 1/2 p 4 bg white shadow lg rounded lg"> <div className="flex flex col h full"> <div className="flex 1 overflow y auto p 4" style={{maxHeight: 'calc(100vh 180px)'}}> {messages.map((message, index) => ( <div key={index} className={`flex ${message.sender === 'user' ? 'justify end' : 'justify start'} mb 4`}> <div className={`max w xs lg:max w md px 4 py 2 rounded lg ${message.sender === 'user' ? 'bg indigo 500 text white' : 'bg gray 200 text gray 800'}`}> <p className="text sm">{message.text}</p> </div> </div> ))} {isTyping && ( <div className="flex justify start mb 4"> <div className="bg gray 200 text gray 800 px 4 py 2 rounded lg"> <p className="text sm">Typing...</p> </div> </div> )} <div ref={messagesEndRef} /> </div> <form onSubmit={handleSubmit} className="mt 4"> <div className="flex items center"> <input type="text" value={inputValue} onChange={handleInputChange} placeholder="Type your message..." className="flex 1 p 2 border border gray 300 rounded l lg focus:outline none focus:ring 2 focus:ring indigo 500" /> <button type="submit" className="bg indigo 500 text white p 2 rounded r lg hover:bg indigo 600 focus:outline none focus:ring 2 focus:ring indigo 500" > <FiSend className="w 5 h 5" /> </button> </div> </form> </div> </div> </div> ); }; export default ChatbotUI;