<script lang="ts">
	import type { ChatMessage } from '$lib/stores/chat.svelte';
	import ToolCallCard from './ToolCallCard.svelte';

	interface Props {
		message: ChatMessage;
	}

	let { message }: Props = $props();

	let isUser = $derived(message.role === 'user');
</script>

<div class="flex {isUser ? 'justify-end' : 'justify-start'}">
	<div
		class="max-w-[85%] rounded-2xl px-4 py-2 {isUser
			? 'bg-primary-600 text-white'
			: 'bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-gray-100'}"
	>
		<!-- Tool calls (for assistant messages) -->
		{#if message.tool_calls && message.tool_calls.length > 0}
			<div class="mb-2 space-y-2">
				{#each message.tool_calls as tool, i}
					<ToolCallCard
						{tool}
						result={message.tool_results?.find((r) => r.tool_use_id === tool.id)?.result}
					/>
				{/each}
			</div>
		{/if}

		<!-- Message content -->
		{#if message.content}
			<div class="prose prose-sm max-w-none {isUser ? 'prose-invert' : 'dark:prose-invert'}">
				{@html message.content.replace(/\n/g, '<br>')}
			</div>
		{/if}
	</div>
</div>
