feat: add chat page layout with message list and bubble components

- Create /chat route with scrollable message list
- MessageBubble component with distinct user/assistant styles
- MessageList with auto-scroll-to-bottom on new messages
- Empty state display when no messages
- ChatMessage type definition in src/lib/types.ts
- Add browser globals to ESLint config for Svelte files

Closes #5

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shahondin1624
2026-03-12 11:25:08 +01:00
parent f2daa9cef2
commit 6df4c396b9
10 changed files with 125 additions and 3 deletions

View File

@@ -0,0 +1,14 @@
<script lang="ts">
import type { ChatMessage } from '$lib/types';
import MessageList from '$lib/components/MessageList.svelte';
let messages: ChatMessage[] = $state([]);
</script>
<div class="flex h-screen flex-col">
<header class="border-b border-gray-200 bg-white px-4 py-3">
<h1 class="text-lg font-semibold text-gray-900">Chat</h1>
</header>
<MessageList {messages} />
</div>