60f3d8eeda
Add theme switching with three modes (system/light/dark) using Tailwind v4 class-based dark mode. Theme preference is persisted in localStorage and defaults to the system's prefers-color-scheme. All components updated with dark: variants for consistent dark mode rendering including SVG elements. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
21 lines
718 B
Svelte
21 lines
718 B
Svelte
<script lang="ts">
|
|
import type { ChatMessage } from '$lib/types';
|
|
|
|
let { message }: { message: ChatMessage } = $props();
|
|
|
|
const isUser = $derived(message.role === 'user');
|
|
</script>
|
|
|
|
<div class="flex {isUser ? 'justify-end' : 'justify-start'} mb-3">
|
|
<div
|
|
class="max-w-[75%] rounded-2xl px-4 py-2.5 {isUser
|
|
? 'bg-blue-600 text-white rounded-br-md'
|
|
: 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-bl-md'}"
|
|
>
|
|
<p class="text-sm whitespace-pre-wrap">{message.content}</p>
|
|
<time class="mt-1 block text-xs {isUser ? 'text-blue-200' : 'text-gray-500 dark:text-gray-400'}">
|
|
{message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
|
</time>
|
|
</div>
|
|
</div>
|