Machine Coding — Chat App

1. Learning Objectives

In this machine coding guide, you will build a real-time messaging Chat Client. By the end of this exercise, you will be able to:

• Establish reactive event streaming using RxJS Subject and Observable.
• Scroll viewports dynamically to bottom positions using template references.
• Coordinate typing status indicators with debounce operators.
• Expose clean, decoupled chat services to multiple components.
• Style bubble alignments for sending and receiving states.

2. What We Are Building & Design System

Under interview settings, you are tasked with building a web chat client. Requirements include:

• Messages Panel: Renders messages. Sent messages sit right (blue bubbles), received messages sit left (gray bubbles).
• Auto-Scroll: The message panel should automatically scroll to the bottom whenever a new message is sent or received.
• Mock Response Engine: Sending a message triggers a simulated bot reply after a 1.5-second delay.
• Typing Indicator: Displays a "... typing" message at the bottom while the bot is preparing a response.

3. Step-by-Step Implementation Guide

Step 1: Declare the Message Interface

Model messages sent between parties:

Step 2: Connect Message Streams

Inject RxJS subjects to model incoming message feeds. Map user sends to delayed reply timers:

Step 3: Handle Auto-Scrolling

Query the scroll area element using ElementRef, and adjust its scrollTop property to match scrollHeight limits whenever node lengths expand.

4. Full Working Code

Save this standalone component definition to build the chat console:

5. Reviewing the Build / Self-Correction Checks

Verify your chat console auto-scroll behaviors execute reliably:

• Check viewport scrolling: Type and send messages until they overflow the container. Confirm the panel automatically scrolls down to display the newest messages.
• Verify indicator timing: Verify that typing messages sets `isTyping = true` immediately, displaying the typing layout block, and then hides it clean when bot replies resolve.

6. Practice Exercises & Extensions

7. Summary & Next Steps

By building this chat console, you have structured reactive event sequences, managed viewport alignments, and integrated view auto-scrolling.

• Next, proceed to **Chapter 10 — Interview** to study typical test questions, complete tracking quizzes, and review cheatsheets.

---