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:
14
src/routes/chat/+page.svelte
Normal file
14
src/routes/chat/+page.svelte
Normal 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>
|
||||
Reference in New Issue
Block a user