App Chat - Copy this React, Tailwind Component to your project

<div className="group w full overflow auto min h [calc(100vh 56px 64px 20px 24px 56px 48px)"> {messages.length <= 0 ? ( pathname === "/dashboard" ? ( <AboutCard /> ) : ( <Loading /> // <h1>Loading</h1> ) ) : ( // <h1>Type something</h1> <div className="max w xl mx auto mt 10 mb 24 "> {messages.map((message, index) => ( <div key={index} className="whitespace pre wrap flex mb 5 "> <div className={`${ message.role === "user" ? "bg transparent ml auto" : "bg transparent" } p 2 rounded lg`} > {message.role === "user" ? ( <div className="flex justify center "> {message.content as string} <Avatar className="h 7 w 8 mx 2 "> <AvatarImage src="#" alt="Avatar" /> <AvatarFallback className=""> {getInitials(name)} </AvatarFallback> </Avatar> </div> ) : ( <div className="flex justify center "> <Avatar className="h 6 w 8 mx 2"> <AvatarImage src="#" alt="Avatar" /> <AvatarFallback className="">X</AvatarFallback> </Avatar> {message.content as string} </div> )} </div> </div> ))} <div ref={messagesEndRef} /> </div> )} {/* remove fixed */} <div className="inset x 0 bottom 10 mx auto fixed"> <div className="w full max w xl mx auto"> <Card className="p 2"> <form onSubmit={handleSubmit}> <div className="flex"> <Input type="text" value={input} onChange={(event) => { setInput(event.target.value); }} className="w [95%] mr 2 border 0 ring offset 0 focus visible:ring 0 focus visible:outline none focus:outline none focus:ring 0 ring 0 focus visible:border none border transparent focus:border transparent focus visible:ring none " placeholder="Ask me anything..." /> <Button disabled={!input.trim()}> <SendIcon /> </Button> </div> </form> </Card> </div> </div> </div> modify this code to app chat with the same value as i mention