Live Chat Message Feed Component

Problem Description

A customer support platform team needs a live message feed component for their Svelte 5 app. The feed displays an ongoing conversation and auto-scrolls to show new messages, but it has a tricky UX requirement: if the user has scrolled up to read older messages, the view should not jump to the bottom when new messages arrive — it should preserve the scroll position instead. When the user is already at the bottom, new messages should naturally extend the list.

The component also needs to keep the browser tab title in sync with the number of unread messages (messages that arrived while the user was scrolled up), so agents can see at a glance whether there are new messages without looking at the page.

The team has been debugging some reactivity issues and wants the component to include reactive debug instrumentation on the messages list so they can observe updates during development.

The entire component must be written in Svelte 5 style with TypeScript.

Output Specification

Create the following files:

• src/lib/MessageFeed.svelte — The message feed component that:

  • Accepts a list of messages as a prop (each message has an id, author, text, and timestamp)
  • Accepts a callback prop for when the user sends a reply
  • Tracks internal state for the current reply text and unread count
  • Keeps the browser tab title in sync with unread message count (e.g., "(3) Support Chat")
  • Captures the scroll container's height before new messages are added (to handle scroll preservation)
  • Includes reactive debug instrumentation on the messages list
  • Shows a derived display string such as "3 unread messages" or "All caught up"

• src/routes/support/+page.svelte — A page that:

  • Holds the messages list and handles adding new messages (simulate with a "New Message" button that appends a mock message)
  • Uses the MessageFeed component, passing messages and a reply handler
  • Shows a log of sent replies below the feed

Both files should use Svelte 5 and TypeScript.