{"@context":"https://schema.org","@type":"Question","name":"Simple Chat App Interface with Avatar and Typing Indicator","text":"## Projects Challenge: Simple Chat App Interface with Avatar and Typing Indicator\n\nYour objective is to build a fully functional, highly interactive React component representing the target design mockup.\n\n### 🎨 Color Palette\n* `#B7D7CD`\n* `#C06C88`\n* `#411C56`\n\n### 📐 Target Design Mockup\nUse the visual mockup shown in the panel to guide your coordinate alignment, container proportions, and spacing.\n\n### 📌 Target Design SVG Source\nThe target geometry is defined by the following SVG vector graphic (viewable by the LLM judge):\n```xml\n\n```\n\n### ⚙️ Requirements\n1. Match the visual presentation (layout, alignment, borders, colors) of the mockup.\n2. Implement all necessary React state variables, event handlers, and input bindings to make the page interactive.\n3. Make sure all interactive controls (buttons, forms, checkboxes, sliders) update the view correctly.\n","educationalLevel":"Easy","about":["FRONTEND","CHAT_APP","CHAT_APP","frontend","react","projects","chat-app","color:#B7D7CD","color:#C06C88","color:#411C56"],"learningResourceType":"Interactive Challenge","potentialAction":{"@type":"SolveAction","target":"https://codecomplex.site/problems/simple-chat-app-interface-with-avatar-and-typing-indicator-easy-chat-app"}}