frontend/src/lib/ChatMessage.svelte

<script lang="ts">
	import type { Message, Chat } from '$lib/types';
	import { MessageType, Sender } from '$lib/types';

	export let message: Message;
</script>

<div class="flex flex-col gap-4 p-4">
	<img
		class="self-end max-h-[328px] rounded-xl bg-gray-200"
		src="https://huggingface.co/datasets/victor/assets/resolve/main/Frame%201.png"
		alt=""
	/>
	<p
		class="self-end rounded-3 -mt-2 rounded-t rounded-b-2xl bg-black dark:bg-white py-2 px-4 text-white dark:text-black"
	>
		{message.content}
	</p>
	<img
		class="max-h-[328px] self-start rounded-xl bg-gray-200"
		src="https://huggingface.co/datasets/victor/assets/resolve/main/Frame%202.png"
		alt=""
	/>
</div>