<script lang="ts">
	import { chatStore } from '$lib/stores/chat.svelte';
	import type { ChatMessage, ComparisonMessage } from '$lib/types';
	import MessageBubble from './MessageBubble.svelte';
	import ComparisonMessageBubble from './ComparisonMessageBubble.svelte';

	let scrollContainer: HTMLDivElement | undefined = $state();

	$effect(() => {
		// Scroll to bottom when messages change
		if (chatStore.messages.length && scrollContainer) {
			scrollContainer.scrollTop = scrollContainer.scrollHeight;
		}
	});
</script>

<div bind:this={scrollContainer} class="flex-1 overflow-y-auto p-4">
	{#if chatStore.messages.length === 0}
		<div class="flex h-full flex-col items-center justify-center">
			<div class="mb-4 rounded-full p-4" style="background-color: var(--color-surface);">
				<svg
					class="h-12 w-12"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
					style="color: var(--color-text-muted);"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="1.5"
						d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
					/>
				</svg>
			</div>
			<h2 class="mb-2 text-lg font-medium">Start a conversation</h2>
			<p class="max-w-md text-center text-sm" style="color: var(--color-text-muted);">
				Select a model from the sidebar and send a message to begin testing the mana-llm service.
			</p>
		</div>
	{:else}
		<div class="space-y-4">
			{#each chatStore.messages as message (message.id)}
				{#if message.role === 'comparison'}
					<ComparisonMessageBubble message={message as ComparisonMessage} />
				{:else}
					<MessageBubble message={message as ChatMessage} />
				{/if}
			{/each}
		</div>
	{/if}
</div>
