A
Anonymous

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

Generate a UI code for a chat application with two main sections: Main Chat Workspace (Right Side): This section should take up most of the screen width. It is used to display and send chat messages. Messages can be formatted using markdown (e.g., bold, italics, lists). Implement auto saving of message drafts into cookies, so that users don't lose their messages if they leave the page. Include a text input box for composing messages at the bottom. Display received messages above the input box with appropriate padding and scroll behavior for longer conversations. Menu Section (Left Side): This section should be a narrower sidebar taking up about 30% of the width. It will display a list of conversations. Each conversation entry should show the user’s name, a timestamp of the last message, and a short preview of the most recent message. Provide basic styles and layout for this conversation list, ensuring it's responsive for various screen sizes. Make sure to use ReactJS with hooks, and integrate localStorage or cookies to handle draft saving in the main chat section. The UI should be mobile responsive

Prompt
Component Preview

About

ChatApp - A responsive chat UI with a main workspace for messages, markdown support, auto-saving drafts, and a sidebar for conversatio. View and copy code!

Share

Last updated 1 month ago