Debug and extend a streaming chat app

Scenario

You are given a small codebase for a web chat UI that calls an LLM API (similar to a ChatGPT-style interface). You can run it locally. During a 60-minute interview, you must debug issues and implement small features.

Assume a typical setup:

• Frontend chat UI (e.g., React/Vue) with a client-side store/state management layer.
• A backend (or direct client call) that invokes an LLM API.
• Responses may be streamed token-by-token.

Tasks

Bug 1: API key invalid

When starting the app and sending a message, the browser console (or network response) shows an error like api key invalid.

• Find the root cause.
• Fix the configuration so requests authenticate correctly.

Bug 2: Message renders as empty

After submitting a message, the UI receives a response but renders empty content.

• Inspect the response payload.
• Fix the parsing/rendering logic so the assistant text displays correctly.

Feature 1: Add a Clear button

Add a button that clears:

• the visible message history
• any stored conversation context
• and resets the chat state to an initial empty state

You are told the store already has an action/helper that can reset/initialize state—use it rather than re-implementing.

Feature 2: Add a Stop button for streaming

Add a button (like the “stop generating” square icon) that, while an assistant response is streaming, immediately stops/cancels the in-flight stream and leaves the partially-generated text as-is (or per your chosen UX, but be consistent).

Consider:

• state management changes (e.g., isStreaming, currentRequestId)
• request cancellation (e.g., AbortController)
• cleanup so future messages still work

What we are evaluating

• Your debugging workflow (repro, isolate, verify)
• Correctness of fixes
• Practical state management and cancellation handling
• Ability to reason about API contract mismatches (payload shape vs. assumptions)