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;
	export let loading: boolean = false;
</script>

<div class="flex flex-col gap-4 p-4">
	<div class={message.sender === Sender.USER ? 'self-end' : 'self-start'}>
		{#if loading}
			<div class="flex flex-col gap-2">
				<div class="w-32 h-8 bg-gray-200 rounded-xl animate-pulse" />
				<div class="w-32 h-8 bg-gray-200 rounded-xl animate-pulse" />
			</div>
		{:else if message.type === MessageType.TEXT}
			<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>
		{:else if message.type === MessageType.IMAGE}
			<img class="max-h-[328px] self-start rounded-xl bg-gray-200" src={message.content} alt="" />
		{/if}
	</div>
</div>