@myrialabs/clopen 0.0.1

package/frontend/lib/components/chat/ChatInterface.svelte

@@ -0,0 +1,407 @@
+<!--
+  Modern Claude Code SDK Chat Interface
+  
+  Features:
+  - Real-time streaming with Server-Sent Events
+  - Modern AI-first design with solid backgrounds
+  - Proper SDK message handling
+  - Enhanced error handling and user feedback
+  - Responsive design with mobile optimization
+-->
+
+<script lang="ts">
+	import { sessionState, setCurrentSession, createNewChatSession, clearMessages, loadMessagesForSession } from '$frontend/lib/stores/core/sessions.svelte';
+	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+	import { appState } from '$frontend/lib/stores/core/app.svelte';
+	import { presenceState } from '$frontend/lib/stores/core/presence.svelte';
+	import { userStore } from '$frontend/lib/stores/features/user.svelte';
+	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import ChatMessages from './message/ChatMessages.svelte';
+	import ChatInput from './input/ChatInput.svelte';
+	import FloatingTodoList from './widgets/FloatingTodoList.svelte';
+	import TimelineModal from '$frontend/lib/components/checkpoint/TimelineModal.svelte';
+	// import TokenUsage from './widgets/TokenUsage.svelte'; // DISABLED
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import AvatarBubble from '$frontend/lib/components/common/AvatarBubble.svelte';
+	import Button from '$frontend/lib/components/common/Button.svelte';
+	import PageTemplate from '$frontend/lib/components/common/PageTemplate.svelte';
+	import Modal from '$frontend/lib/components/common/Modal.svelte';
+	import type { IconName } from '$shared/types/ui/icons';
+	import type { ChatSession } from '$shared/types/database/schema';
+	import { debug } from '$shared/utils/logger';
+	import ws from '$frontend/lib/utils/ws';
+
+	// Welcome state - don't show during restoration
+	const isWelcomeState = $derived(
+		sessionState.messages.length === 0 &&
+		!appState.isRestoring
+	);
+
+	// Check if we should show input (not during restoration)
+	const showInput = $derived(!appState.isRestoring);
+	
+	// Project-aware state
+	const hasActiveProject = $derived(projectState.currentProject !== null);
+	const projectName = $derived(projectState.currentProject?.name || 'No Project');
+
+	// Dynamic title for PageTemplate (static description)
+	const pageTitle = $derived(hasActiveProject ? `${projectName}` : 'No project selected');
+
+	// Scroll container for passing to PageTemplate
+	let scrollContainer: HTMLElement | undefined = $state();
+
+	// Session picker state
+	let showSessionPicker = $state(false);
+
+	// Active sessions for the current project (non-ended), sorted newest first
+	const activeSessions = $derived(
+		sessionState.sessions
+			.filter(s => s.project_id === projectState.currentProject?.id && !s.ended_at)
+			.sort((a, b) => new Date(b.started_at).getTime() - new Date(a.started_at).getTime())
+	);
+
+	// Check if another session has an active stream (for badge indicator)
+	const otherSessionsStreaming = $derived.by(() => {
+		const projectId = projectState.currentProject?.id;
+		const currentSessionId = sessionState.currentSession?.id;
+		if (!projectId) return false;
+		const status = presenceState.statuses.get(projectId);
+		if (!status?.streams) return false;
+		return status.streams.some(
+			(s: any) => s.status === 'active' && s.chatSessionId !== currentSessionId
+		);
+	});
+
+	// Get users in a specific chat session (excluding self)
+	function getSessionUsers(chatSessionId: string): { userId: string; userName: string }[] {
+		const projectId = projectState.currentProject?.id;
+		const currentUserId = userStore.currentUser?.id;
+		if (!projectId) return [];
+		const status = presenceState.statuses.get(projectId);
+		if (!status?.chatSessionUsers) return [];
+		const users = status.chatSessionUsers[chatSessionId] || [];
+		return currentUserId ? users.filter(u => u.userId !== currentUserId) : users;
+	}
+
+	function toggleSessionPicker() {
+		showSessionPicker = !showSessionPicker;
+	}
+
+	function closeSessionPicker() {
+		showSessionPicker = false;
+	}
+
+	async function switchToSession(session: ChatSession) {
+		if (session.id === sessionState.currentSession?.id) {
+			closeSessionPicker();
+			return;
+		}
+		await setCurrentSession(session);
+		closeSessionPicker();
+	}
+
+	// Extract short title from session (first user message text)
+	function getSessionShortTitle(session: ChatSession): string {
+		return session.title?.replace(/^Shared Chat - /, '').slice(0, 40) || 'New Chat';
+	}
+
+	// Checkpoints modal state
+	let showCheckpoints = $state(false);
+
+	function openCheckpoints() {
+		showCheckpoints = true;
+	}
+
+	function closeCheckpoints() {
+		showCheckpoints = false;
+	}
+
+	// Extract text from message content
+	function extractMessageText(message: any): string {
+		if (!('message' in message) || !message.message?.content) {
+			return '';
+		}
+		const content = message.message.content;
+
+		if (typeof content === 'string') {
+			return content;
+		} else if (Array.isArray(content)) {
+			// Find text content in array
+			for (const item of content) {
+				if (typeof item === 'string') {
+					return item;
+				} else if (typeof item === 'object' && item !== null) {
+					if ('text' in item && typeof (item as any).text === 'string') {
+						return (item as any).text;
+					}
+				}
+			}
+		}
+		return '';
+	}
+
+	// Process timeline messages with all necessary data
+	const timelineMessages = $derived(
+		sessionState.messages
+			.filter(m => {
+				if (m.type !== 'user') return false;
+				const text = extractMessageText(m);
+				return text.length > 0;
+			})
+			.map(msg => ({
+				id: msg.metadata?.message_id,
+				timestamp: msg.metadata?.created_at || '',
+				date: msg.metadata?.created_at ? new Date(msg.metadata.created_at).toLocaleDateString() : 'Unknown',
+				time: msg.metadata?.created_at ? new Date(msg.metadata.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : 'Unknown',
+				text: extractMessageText(msg)
+			}))
+	);
+
+	// Handle restore from timeline
+	async function handleTimelineRestore(messageId: string | undefined, messageTimestamp: string) {
+		if (!messageId) {
+			addNotification({
+				type: 'error',
+				title: 'Restore Failed',
+				message: 'Message ID not found',
+				duration: 3000
+			});
+			return;
+		}
+
+		try {
+			// Send restore request via WebSocket HTTP
+			await ws.http('snapshot:restore', {
+				messageId: messageId,
+				sessionId: sessionState.currentSession?.id || ''
+			});
+
+			// Close modal
+			showCheckpoints = false;
+
+			// Reload messages from database to update UI
+			if (sessionState.currentSession?.id) {
+				await loadMessagesForSession(sessionState.currentSession.id);
+			}
+
+			addNotification({
+				type: 'success',
+				title: 'Project Restored',
+				message: `Successfully restored to checkpoint at ${new Date(messageTimestamp).toLocaleTimeString()}`,
+				duration: 5000
+			});
+		} catch (error) {
+			debug.error('chat', 'Restore error:', error);
+			addNotification({
+				type: 'error',
+				title: 'Restore Failed',
+				message: error instanceof Error ? error.message : 'Unknown error',
+				duration: 5000
+			});
+		}
+	}
+
+	async function startNewChat() {
+		if (!hasActiveProject || !projectState.currentProject) {
+			addNotification({
+				type: 'warning',
+				title: 'No Project Selected',
+				message: 'Please select a project first',
+				duration: 3000
+			});
+			return;
+		}
+
+		// Clear messages for the local view
+		clearMessages();
+
+		// Create a new session (existing sessions stay active for other users)
+		const newSession = await createNewChatSession(projectState.currentProject.id);
+
+		if (newSession) {
+			await setCurrentSession(newSession);
+		} else {
+			addNotification({
+				type: 'error',
+				title: 'Failed to Create Session',
+				message: 'Could not create a new chat session',
+				duration: 3000
+			});
+		}
+	}
+	
+	// Check for active stream on mount only if needed
+	onMount(async () => {
+		debug.log('chat', 'Component mounted');
+		// WebSocket reconnection is handled automatically by ws client
+	});
+</script>
+
+<PageTemplate 
+	title={pageTitle}
+	description="AI-powered development assistant"
+	bind:scrollContainer
+>
+	{#snippet actions()}
+		<div class="flex items-center space-x-2">
+			<!-- Session Picker (only when multiple active sessions) -->
+			{#if activeSessions.length > 1}
+				<div class="relative">
+					<button
+						onclick={toggleSessionPicker}
+						class="flex items-center gap-1.5 px-2 sm:px-3 py-1.5 sm:py-2 text-xs sm:text-sm font-medium rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 hover:border-violet-500 dark:hover:border-violet-500 transition-all duration-200"
+					>
+						<Icon name="lucide:layers" class="w-3.5 h-3.5" />
+						<span class="hidden sm:inline max-w-[120px] truncate">{activeSessions.length} sessions</span>
+						{#if otherSessionsStreaming}
+							<span class="w-2 h-2 rounded-full bg-violet-500 animate-pulse"></span>
+						{/if}
+						<Icon name="lucide:chevron-down" class="w-3 h-3" />
+					</button>
+
+					{#if showSessionPicker}
+						<!-- Backdrop -->
+						<div class="fixed inset-0 z-40" onclick={closeSessionPicker}></div>
+
+						<!-- Dropdown -->
+						<div class="absolute top-full right-0 mt-1 z-50 w-72 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg overflow-hidden">
+							<div class="px-3 py-2 border-b border-slate-100 dark:border-slate-700">
+								<p class="text-xs font-medium text-slate-500 dark:text-slate-400">Active Sessions</p>
+							</div>
+							<div class="max-h-64 overflow-y-auto">
+								{#each activeSessions as session (session.id)}
+									{@const isCurrent = session.id === sessionState.currentSession?.id}
+									{@const projectId = projectState.currentProject?.id}
+									{@const status = projectId ? presenceState.statuses.get(projectId) : undefined}
+									{@const isStreaming = status?.streams?.some((s: any) => s.status === 'active' && s.chatSessionId === session.id) ?? false}
+									{@const sessionUsers = getSessionUsers(session.id)}
+									{@const sessionModel = session.model ? (session.model.includes(':') ? session.model.split(':')[1] : session.model) : ''}
+									<button
+										onclick={() => switchToSession(session)}
+										class="w-full text-left px-3 py-2.5 flex items-center gap-2.5 transition-colors duration-150
+											{isCurrent
+												? 'bg-violet-50 dark:bg-violet-900/20 text-violet-700 dark:text-violet-300'
+												: 'text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'}"
+									>
+										<div class="flex-1 min-w-0">
+											<div class="flex items-center gap-1.5">
+												<span class="w-1.5 h-1.5 rounded-full shrink-0 {isStreaming ? 'bg-emerald-500 animate-pulse' : isCurrent ? 'bg-green-500' : 'bg-slate-300 dark:bg-slate-600'}"></span>
+												<span class="text-sm font-medium truncate">{getSessionShortTitle(session)}</span>
+											</div>
+											<p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
+												{new Date(session.started_at).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+												{#if sessionModel}
+													<span class="text-slate-400 dark:text-slate-500">· {sessionModel}</span>
+												{/if}
+											</p>
+										</div>
+										{#if sessionUsers.length > 0}
+											<div class="flex items-center -space-x-1 shrink-0">
+												{#each sessionUsers.slice(0, 2) as user}
+													<AvatarBubble {user} size="sm" />
+												{/each}
+												{#if sessionUsers.length > 2}
+													<span class="w-4 h-4 rounded-full bg-slate-400 text-white text-5xs font-bold flex items-center justify-center border border-white dark:border-slate-800">
+														+{sessionUsers.length - 2}
+													</span>
+												{/if}
+											</div>
+										{/if}
+										{#if isStreaming}
+											<span class="shrink-0 flex items-center gap-1 px-1.5 py-0.5 text-3xs font-medium rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400">
+												<span class="w-1.5 h-1.5 rounded-full bg-violet-500 animate-pulse"></span>
+												AI
+											</span>
+										{/if}
+									</button>
+								{/each}
+							</div>
+						</div>
+					{/if}
+				</div>
+			{/if}
+
+			<!-- Restore Checkpoint button -->
+			{#if sessionState.messages.length > 0}
+				<Button variant="outline" onclick={openCheckpoints} class="rounded-lg px-2 sm:px-4 py-1.5 sm:py-2">
+					<Icon name="lucide:undo-2" class="w-3.5 h-3.5 sm:w-4 sm:h-4 sm:mr-2" />
+					<span class="hidden sm:inline">Restore</span>
+				</Button>
+			{/if}
+
+			<!-- New Chat button -->
+			<Button variant="outline" onclick={startNewChat} class="rounded-lg px-2 sm:px-4 py-1.5 sm:py-2">
+				<Icon name="lucide:plus" class="w-3.5 h-3.5 sm:w-4 sm:h-4 sm:mr-2" />
+				<span class="hidden sm:inline">New Chat</span>
+			</Button>
+		</div>
+	{/snippet}
+
+	<div class="flex flex-col h-[calc(100%+3rem)] -my-6 -mx-4">
+		{#if isWelcomeState && !appState.isRestoring}
+			<!-- Welcome state with modern design -->
+			<div class="flex-1 overflow-y-auto overflow-x-hidden">
+				<div class="min-h-full flex items-center justify-center p-4">
+					<div class="w-full max-w-4xl space-y-6 md:space-y-8 lg:space-y-10">
+						<!-- Modern hero section -->
+						<div class="text-center space-y-3 md:space-y-4 px-6">
+							<div class="space-y-3 md:space-y-4">
+								<h1 class="text-3xl md:text-4xl font-semibold text-slate-900 dark:text-slate-100">
+									Build apps & websites with AI
+								</h1>
+								<p class="md:text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
+									Describe your idea. Get production-ready code.
+								</p>
+							</div>
+						</div>
+
+						<!-- Input area integrated in welcome state -->
+						{#if showInput}
+							<div class="w-full px-4 space-y-4" in:fade={{ duration: 200, delay: 100 }}>
+								<ChatInput />
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		{:else}
+			<!-- Enhanced chat interface -->
+			<div class="flex-1 flex flex-col overflow-hidden">
+				<div class="flex-1 flex justify-center overflow-hidden">
+					<div class="w-full flex flex-col overflow-hidden">
+						<div class="flex-1 overflow-y-auto overflow-x-hidden">
+							<ChatMessages {scrollContainer} />
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Input area with SDK integration -->
+			{#if showInput}
+				<div
+					class="sticky bottom-0 flex-shrink-0 bg-gradient-to-t from-slate-50 via-slate-50 dark:from-slate-900 dark:via-slate-900 to-transparent"
+					in:fade={{ duration: 200, delay: 100 }}
+				>
+					<div class="flex justify-center">
+						<div class="w-full max-w-5xl px-4 pb-4 pt-2">
+							<ChatInput />
+						</div>
+					</div>
+				</div>
+			{/if}
+		{/if}
+	</div>
+
+	<!-- Floating TodoList (only shown when there's an active session with todos) -->
+	{#if sessionState.currentSession}
+		<FloatingTodoList />
+	{/if}
+
+	<!-- Checkpoint Timeline Modal -->
+	<TimelineModal
+		bind:isOpen={showCheckpoints}
+		onClose={closeCheckpoints}
+	/>
+</PageTemplate>

package/frontend/lib/components/chat/formatters/ErrorMessage.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	
+	const { errorText }: { errorText: string } = $props();
+	
+	// Categorize error types and provide suggestions
+	function getErrorInfo(text: string): { type: string; suggestion: string } {
+		if (text.includes('max_turns') || text.includes('maximum number of conversation turns')) {
+			return {
+				type: 'Task Completion Limit',
+				suggestion: 'Try breaking your request into smaller, more specific tasks.'
+			};
+		} else if (text.includes('timeout') || text.includes('timed out')) {
+			return {
+				type: 'Timeout Error',
+				suggestion: 'The operation took too long. Try with a simpler request.'
+			};
+		} else if (text.includes('permission') || text.includes('denied')) {
+			return {
+				type: 'Permission Error',
+				suggestion: 'Check file permissions and ensure you have access to the project directory.'
+			};
+		} else if (text.includes('API key') || text.includes('authentication')) {
+			return {
+				type: 'Authentication Error',
+				suggestion: 'Please check your Anthropic API key configuration.'
+			};
+		} else if (text.includes('git-bash') || text.includes('Git')) {
+			return {
+				type: 'Git Configuration Error',
+				suggestion: 'Ensure Git is installed and accessible in your system PATH.'
+			};
+		}
+		
+		return {
+			type: 'Error',
+			suggestion: ''
+		};
+	}
+	
+	const errorInfo = $derived(getErrorInfo(errorText));
+</script>
+
+<div class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+	<div class="flex items-start gap-3">
+		<Icon name="lucide:circle-alert" class="text-red-500 w-6 h-6 mt-0.5" />
+		<div class="flex-1">
+			<div class="font-bold text-red-700 dark:text-red-300 mb-2">{errorInfo.type}</div>
+			<div class="text-sm text-red-600 dark:text-red-400 leading-relaxed">{errorText}</div>
+			{#if errorInfo.suggestion}
+				<div class="mt-3 text-xs text-red-500 dark:text-red-400 bg-red-100 dark:bg-red-900/30 p-2 rounded border-l-2 border-red-400">
+					{errorInfo.suggestion}
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>

package/frontend/lib/components/chat/formatters/MessageFormatter.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+	import ErrorMessage from './ErrorMessage.svelte';
+	import TextMessage from './TextMessage.svelte';
+	import Tools from './Tools.svelte';
+	import Lightbox from '$frontend/lib/components/common/Lightbox.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
+	import { formatFileSize } from '../shared/utils';
+
+	import type { SDKMessage, SDKPartialAssistantMessage } from '$shared/types/messaging';
+	import type { SDKMessageFormatter } from '$shared/types/database/schema';
+
+	const { message }: { message: SDKMessageFormatter } = $props();
+
+	let lightboxOpen = $state(false);
+	let lightboxData = $state<{ type: 'image' | 'document', data: string, mediaType: string, fileName?: string }>({
+		type: 'image',
+		data: '',
+		mediaType: '',
+		fileName: ''
+	});
+
+	function openAttachment(type: 'image' | 'document', data: string, mediaType: string, fileName?: string) {
+		lightboxData = { type, data, mediaType, fileName };
+		lightboxOpen = true;
+	}
+
+	function closeLightbox() {
+		lightboxOpen = false;
+	}
+
+	type ContentElement = {
+		type: 'text' | 'tool_use' | 'error' | 'image' | 'document';
+		content: any;
+		fileName?: string;
+	};
+	
+	// Parse content into structured elements
+	function parseContent() {
+		const elements: ContentElement[] = [];
+
+		// Handle partial messages (streaming) — both text and reasoning
+		if (message.type === 'stream_event') {
+			if ('partialText' in message && message.partialText) {
+				elements.push({
+					type: 'text',
+					content: message.partialText
+				});
+			}
+			return elements;
+		}
+
+		// Handle reasoning messages (final, with metadata.reasoning flag)
+		if (message.metadata?.reasoning && message.type === 'assistant') {
+			const content = message.message.content;
+			if (Array.isArray(content)) {
+				for (const item of content) {
+					if (item.type === 'text') {
+						elements.push({ type: 'text', content: item.text });
+					}
+				}
+			}
+			return elements;
+		}
+
+
+		if (message.type === 'assistant') {
+			const content = message.message.content;
+			const elements: ContentElement[] = [];
+
+			for (const contentItem of content) {
+				if (contentItem.type === 'text') {
+					// Text block
+					elements.push({
+						type: 'text',
+						content: contentItem.text
+					});
+				} else if (contentItem.type === 'tool_use') {
+					// Tool use block (may contain embedded $result)
+					elements.push({
+						type: 'tool_use',
+						content: contentItem
+					});
+				}
+			}
+
+			return elements;
+		}
+
+		else if (message.type === 'user') {
+			const content = message.message.content;
+			// Get attachment filenames from metadata if available (now an array)
+			const attachmentFilenames = (message as any).attachmentFilenames || [];
+
+			// Handle array content (for tool_result and file attachments)
+			if (Array.isArray(content)) {
+				for (let i = 0; i < content.length; i++) {
+					const contentItem = content[i];
+
+					if (typeof contentItem === 'string') {
+						elements.push({
+							type: 'text',
+							content: contentItem
+						});
+					} else if (contentItem.type === 'text') {
+						elements.push({
+							type: 'text',
+							content: contentItem.text
+						});
+					} else if (contentItem.type === 'image') {
+						// Handle image attachments with filename from metadata
+						elements.push({
+							type: 'image',
+							content: contentItem,
+							fileName: attachmentFilenames[i] || undefined
+						});
+					} else if (contentItem.type === 'document') {
+						// Handle document attachments with filename from metadata
+						elements.push({
+							type: 'document',
+							content: contentItem,
+							fileName: attachmentFilenames[i] || undefined
+						});
+					}
+				}
+			} else {
+				// String content
+				elements.push({
+					type: 'text',
+					content: content
+				});
+			}
+
+			return elements;
+		}
+
+		return elements;
+	}
+	
+	// Main parsed content  
+	const parsedElements = $derived.by(parseContent);
+</script>
+
+{#each parsedElements as element}
+	{#if element.type === 'error'}
+		<ErrorMessage errorText={element.content} />
+	{:else if element.type === 'text'}
+		<TextMessage content={element.content} />
+	{:else if element.type === 'tool_use'}
+		<Tools toolInput={element.content} />
+	{:else if element.type === 'image'}
+		<div class="inline-block mr-2 mb-2">
+			<div class="flex flex-col gap-1">
+				{#if element.content.source?.type === 'base64'}
+					<button
+						onclick={() => openAttachment('image', element.content.source.data, element.content.source.media_type, element.fileName || 'Image')}
+						class="relative w-28 h-28 overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-100 dark:bg-slate-800 cursor-pointer hover:opacity-80 transition-opacity focus:outline-none focus:ring-2 focus:ring-violet-500"
+						aria-label="Click to view full image"
+					>
+						<img
+							src="data:{element.content.source.media_type};base64,{element.content.source.data}"
+							alt={element.fileName || "User uploaded content"}
+							class="absolute inset-0 w-full h-full object-cover"
+							loading="lazy"
+						/>
+						</button>
+				{:else}
+					<div class="w-28 h-28 flex items-center justify-center bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-750 rounded-lg border border-slate-200 dark:border-slate-700">
+						<svg class="w-12 h-12 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+						</svg>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{:else if element.type === 'document'}
+		<div class="inline-block mr-2 mb-2">
+			<div class="flex flex-col gap-1">
+				{#if element.content.source?.type === 'base64'}
+					<button
+						onclick={() => openAttachment('document', element.content.source.data, element.content.source.media_type, element.fileName || 'Document')}
+						class="relative w-28 h-28 overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 cursor-pointer hover:opacity-80 transition-opacity focus:outline-none focus:ring-2 focus:ring-violet-500"
+						aria-label="Click to view document"
+					>
+						<div class="absolute inset-0 flex flex-col items-center justify-center gap-1.5 p-2">
+							<Icon
+								name={element.fileName ? getFileIcon(element.fileName) : 'material:document'}
+								class="w-8 h-8 text-slate-600 dark:text-slate-400 flex-shrink-0"
+							/>
+							{#if element.fileName}
+								<span class="text-xs font-medium text-slate-700 dark:text-slate-300 line-clamp-2 w-full px-1 text-center leading-tight" title={element.fileName}>
+									{element.fileName}
+								</span>
+							{/if}
+							<span class="text-xs text-slate-500 dark:text-slate-400 -mt-0.5">
+								{formatFileSize(element.content.source.data.length * 0.75)}
+							</span>
+						</div>
+					</button>
+				{:else}
+					<div class="relative w-28 h-28 overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800">
+						<div class="absolute inset-0 flex flex-col items-center justify-center gap-1.5">
+							<Icon
+								name="material:document"
+								class="w-10 h-10 text-slate-600 dark:text-slate-400"
+							/>
+							<span class="text-xs font-medium text-slate-700 dark:text-slate-300">DOCUMENT</span>
+						</div>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+{/each}
+
+<!-- Lightbox for viewing attachments -->
+<Lightbox
+	bind:isOpen={lightboxOpen}
+	type={lightboxData.type}
+	mediaType={lightboxData.mediaType}
+	data={lightboxData.data}
+	fileName={lightboxData.fileName}
+	onClose={closeLightbox}
+/>