@myrialabs/clopen 0.0.1

package/frontend/lib/components/chat/input/components/LoadingIndicator.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { appState } from '$frontend/lib/stores/core/app.svelte';
+	import { fly } from 'svelte/transition';
+
+	interface Props {
+		visibleLoadingText: string;
+		isWelcomeState: boolean;
+	}
+
+	const { visibleLoadingText, isWelcomeState }: Props = $props();
+</script>
+
+{#if appState.isLoading}
+	<div
+		class="absolute z-20 {isWelcomeState ? '-top-16' : '-top-14'} left-0 right-0 flex justify-center pointer-events-none"
+		transition:fly={{ y: 100, duration: 300 }}
+	>
+		<div class="flex items-center gap-2.5 px-4 py-2 bg-slate-100 dark:bg-slate-800 rounded-full border border-slate-300 dark:border-slate-600 shadow-sm">
+			<!-- Simple spinner -->
+			<svg class="animate-spin h-4 w-4 text-slate-700 dark:text-slate-300" viewBox="0 0 24 24">
+				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
+				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+			</svg>
+
+			<!-- Text with typewriter effect -->
+			<span class="text-sm font-medium text-slate-700 dark:text-slate-300 capitalize">
+				{visibleLoadingText}
+			</span>
+		</div>
+	</div>
+{/if}

package/frontend/lib/components/chat/input/composables/use-animations.svelte.ts

@@ -0,0 +1,201 @@
+import { onDestroy } from 'svelte';
+
+/**
+ * Composable for managing placeholder and loading text animations
+ * Combines placeholder typewriter effect and loading text rotation
+ */
+
+// ============================================================================
+// PLACEHOLDER ANIMATION
+// ============================================================================
+
+export function usePlaceholderAnimation(placeholderTexts: string[]) {
+	let currentPlaceholderIndex = $state(0);
+	let placeholderText = $state('');
+	let placeholderTypewriterInterval: number | null = null;
+	let placeholderRotationInterval: number | null = null;
+	let placeholderDeleteTimeout: number | null = null;
+
+	// Typewriter effect for placeholder
+	function typewritePlaceholder(text: string) {
+		if (placeholderTypewriterInterval) {
+			clearInterval(placeholderTypewriterInterval);
+		}
+
+		let currentIndex = 0;
+		placeholderText = '';
+
+		placeholderTypewriterInterval = window.setInterval(() => {
+			if (currentIndex < text.length) {
+				placeholderText = text.substring(0, currentIndex + 1);
+				currentIndex++;
+			} else {
+				clearInterval(placeholderTypewriterInterval!);
+				placeholderTypewriterInterval = null;
+			}
+		}, 20); // Typing speed
+	}
+
+	// Update placeholder with typewriter effect
+	function updatePlaceholder() {
+		const fullText = placeholderTexts[currentPlaceholderIndex];
+
+		// Clear any existing delete timeout
+		if (placeholderDeleteTimeout) {
+			clearTimeout(placeholderDeleteTimeout);
+		}
+
+		// Use a tracked timeout that can be cleared properly
+		placeholderDeleteTimeout = window.setTimeout(() => {
+			// Clear current text with backspace effect
+			let deleteInterval = window.setInterval(() => {
+				if (placeholderText.length > 0) {
+					placeholderText = placeholderText.substring(0, placeholderText.length - 1);
+				} else {
+					clearInterval(deleteInterval);
+					// Start typing new text
+					typewritePlaceholder(fullText);
+				}
+			}, 15); // Delete speed
+		}, 2000); // Wait 2 seconds before deleting
+	}
+
+	function startPlaceholderAnimation() {
+		// Clear any existing intervals first
+		stopPlaceholderAnimation();
+
+		currentPlaceholderIndex = Math.floor(Math.random() * placeholderTexts.length);
+		// Initial placeholder
+		const initialText = placeholderTexts[currentPlaceholderIndex];
+		typewritePlaceholder(initialText);
+
+		// Rotate placeholders
+		placeholderRotationInterval = window.setInterval(() => {
+			currentPlaceholderIndex = (currentPlaceholderIndex + 1) % placeholderTexts.length;
+			updatePlaceholder();
+		}, 7000); // Change every 7 seconds
+	}
+
+	function stopPlaceholderAnimation() {
+		if (placeholderTypewriterInterval) {
+			clearInterval(placeholderTypewriterInterval);
+			placeholderTypewriterInterval = null;
+		}
+		if (placeholderRotationInterval) {
+			clearInterval(placeholderRotationInterval);
+			placeholderRotationInterval = null;
+		}
+		if (placeholderDeleteTimeout) {
+			clearTimeout(placeholderDeleteTimeout);
+			placeholderDeleteTimeout = null;
+		}
+	}
+
+	function setStaticPlaceholder(text: string) {
+		stopPlaceholderAnimation();
+		placeholderText = text;
+	}
+
+	// Cleanup on destroy
+	onDestroy(() => {
+		stopPlaceholderAnimation();
+	});
+
+	return {
+		get placeholderText() {
+			return placeholderText;
+		},
+		startAnimation: startPlaceholderAnimation,
+		stopAnimation: stopPlaceholderAnimation,
+		setStaticPlaceholder
+	};
+}
+
+// ============================================================================
+// LOADING TEXT ANIMATION
+// ============================================================================
+
+export function useLoadingTextAnimation(loadingTexts: string[]) {
+	let currentLoadingText = $state('thinking');
+	let visibleLoadingText = $state('thinking');
+	let loadingTextIntervalId: number | null = null;
+	let typewriterIntervalId: number | null = null;
+
+	// Typewriter effect for smooth text transition
+	function animateTextTransition(newText: string) {
+		if (typewriterIntervalId) {
+			clearInterval(typewriterIntervalId);
+		}
+
+		const oldText = visibleLoadingText;
+		let deleteIndex = oldText.length;
+		let typeIndex = 0;
+		let isDeleting = true;
+
+		typewriterIntervalId = window.setInterval(() => {
+			if (isDeleting) {
+				// Delete characters
+				if (deleteIndex > 0) {
+					visibleLoadingText = oldText.substring(0, deleteIndex - 1);
+					deleteIndex--;
+				} else {
+					// Finished deleting, start typing
+					isDeleting = false;
+				}
+			} else {
+				// Type new characters
+				if (typeIndex < newText.length) {
+					visibleLoadingText = newText.substring(0, typeIndex + 1);
+					typeIndex++;
+				} else {
+					// Finished typing
+					clearInterval(typewriterIntervalId!);
+					typewriterIntervalId = null;
+				}
+			}
+		}, 50); // Adjust speed here (lower = faster)
+	}
+
+	function startLoadingAnimation() {
+		// Clear any existing intervals first to prevent duplication
+		stopLoadingAnimation();
+
+		// Start loading text rotation with typewriter effect
+		currentLoadingText = loadingTexts[Math.floor(Math.random() * loadingTexts.length)];
+		visibleLoadingText = currentLoadingText;
+		loadingTextIntervalId = window.setInterval(() => {
+			// Get a different text than the current one
+			let newText = currentLoadingText;
+			while (newText === currentLoadingText && loadingTexts.length > 1) {
+				newText = loadingTexts[Math.floor(Math.random() * loadingTexts.length)];
+			}
+			currentLoadingText = newText;
+			animateTextTransition(newText);
+		}, 15000);
+	}
+
+	function stopLoadingAnimation() {
+		// Clear loading text interval
+		if (loadingTextIntervalId) {
+			window.clearInterval(loadingTextIntervalId);
+			loadingTextIntervalId = null;
+		}
+		if (typewriterIntervalId) {
+			window.clearInterval(typewriterIntervalId);
+			typewriterIntervalId = null;
+		}
+	}
+
+	// Cleanup on destroy
+	onDestroy(() => {
+		stopLoadingAnimation();
+	});
+
+	return {
+		get visibleLoadingText() {
+			return visibleLoadingText;
+		},
+		startAnimation: startLoadingAnimation,
+		stopAnimation: stopLoadingAnimation
+	};
+}

package/frontend/lib/components/chat/input/composables/use-chat-actions.svelte.ts

@@ -0,0 +1,148 @@
+import { appState } from '$frontend/lib/stores/core/app.svelte';
+import { sessionState, loadMessagesForSession } from '$frontend/lib/stores/core/sessions.svelte';
+import { chatService } from '$frontend/lib/services/chat/chat.service';
+import { snapshotService } from '$frontend/lib/services/snapshot/snapshot.service';
+import { soundNotification } from '$frontend/lib/services/notification';
+import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+import { editModeState, cancelEdit } from '$frontend/lib/stores/ui/edit-mode.svelte';
+import { clearInput, setSkipNextRestore } from '$frontend/lib/stores/ui/chat-input.svelte';
+import { debug } from '$shared/utils/logger';
+import type { FileAttachment } from './use-file-handling.svelte';
+
+interface ChatActionsParams {
+	messageText: string;
+	attachedFiles: FileAttachment[];
+	clearAllAttachments: () => void;
+	adjustTextareaHeight: () => void;
+	focusTextarea: () => void;
+	startLoadingAnimation: () => void;
+	stopLoadingAnimation: () => void;
+	clearDraft: () => void;
+}
+
+export function useChatActions(params: ChatActionsParams) {
+	let isInputComposing = $state(false);
+
+	// Handle cancel edit
+	function handleCancelEdit() {
+		cancelEdit();
+		clearInput();
+		params.messageText = ''; // This won't work directly, need to pass setter
+		params.clearAllAttachments();
+		params.adjustTextareaHeight();
+	}
+
+	// Handle send message with SDK streaming
+	async function sendMessage(messageText: string, setMessageText: (value: string) => void) {
+		if ((!messageText.trim() && params.attachedFiles.length === 0) || appState.isLoading) return;
+
+		// Initialize sound notifications on first user interaction (browser policy requirement)
+		soundNotification.initialize();
+
+		const userMessage = messageText.trim();
+		const files = [...params.attachedFiles]; // Copy current attachments
+
+		// If in edit mode, restore to parent of edited message first
+		if (editModeState.isEditing) {
+			try {
+				// Restore to parent of edited message (if exists)
+				const restoreTargetId = editModeState.parentMessageId || editModeState.messageId;
+
+				if (restoreTargetId && sessionState.currentSession?.id) {
+					await snapshotService.restore(restoreTargetId, sessionState.currentSession.id);
+				}
+
+				// Reload messages from database to update UI
+				if (sessionState.currentSession?.id) {
+					await loadMessagesForSession(sessionState.currentSession.id);
+				}
+
+				// Exit edit mode
+				cancelEdit();
+			} catch (error) {
+				debug.error('chat', 'Edit restore error:', error);
+				addNotification({
+					type: 'error',
+					title: 'Edit Failed',
+					message: error instanceof Error ? error.message : 'Unknown error',
+					duration: 5000
+				});
+				return; // Don't send message if restore failed
+			}
+		}
+
+		// Clear input and attachments
+		// Set skip flag BEFORE clearing - prevents stale input restoration
+		// when ChatInput is remounted during welcome→chat transition
+		setSkipNextRestore(true);
+		params.clearDraft();
+		setMessageText('');
+		params.clearAllAttachments();
+		params.adjustTextareaHeight();
+
+		// Focus back to textarea
+		params.focusTextarea();
+
+		// Start loading text rotation with typewriter effect
+		params.startLoadingAnimation();
+
+		// Send message via WebSocket with file attachments
+		const attachedFiles = files
+			.filter(f => f.base64)
+			.map(f => ({
+				type: f.type,
+				data: f.base64!,
+				mediaType: f.file.type,
+				fileName: f.file.name
+			}));
+
+		await chatService.sendMessage(userMessage, {
+			attachedFiles: attachedFiles.length > 0 ? attachedFiles : undefined,
+			onStreamEnd: () => {
+				params.stopLoadingAnimation();
+			},
+			onError: () => {
+				params.stopLoadingAnimation();
+			}
+		});
+	}
+
+	// Cancel current request
+	async function cancelRequest() {
+		chatService.cancelRequest();
+		params.stopLoadingAnimation();
+	}
+
+	// Handle key press
+	function handleKeyPress(
+		event: KeyboardEvent,
+		messageText: string,
+		setMessageText: (value: string) => void
+	) {
+		if (event.key === 'Enter' && !event.shiftKey && !isInputComposing) {
+			event.preventDefault();
+			sendMessage(messageText, setMessageText);
+		}
+	}
+
+	// Handle composition events for international keyboards
+	function handleCompositionStart() {
+		isInputComposing = true;
+	}
+
+	function handleCompositionEnd() {
+		isInputComposing = false;
+	}
+
+	return {
+		get isInputComposing() {
+			return isInputComposing;
+		},
+		handleCancelEdit,
+		sendMessage,
+		cancelRequest,
+		handleKeyPress,
+		handleCompositionStart,
+		handleCompositionEnd
+	};
+}

package/frontend/lib/components/chat/input/composables/use-file-handling.svelte.ts

@@ -0,0 +1,216 @@
+import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+import { debug } from '$shared/utils/logger';
+
+// File attachments interface
+export interface FileAttachment {
+	id: string;
+	file: File;
+	type: 'image' | 'document';
+	base64?: string;
+	previewUrl?: string;
+}
+
+// Maximum file size (10MB)
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+// Supported file types - Images and PDF only
+const SUPPORTED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+const SUPPORTED_DOCUMENT_TYPES = ['application/pdf'];
+
+export function useFileHandling() {
+	let attachedFiles = $state<FileAttachment[]>([]);
+	let isDragging = $state(false);
+	let isProcessingFiles = $state(false);
+
+	function getFileType(mimeType: string): 'image' | 'document' {
+		if (SUPPORTED_IMAGE_TYPES.includes(mimeType)) return 'image';
+		return 'document';
+	}
+
+	async function fileToBase64(file: File): Promise<string> {
+		return new Promise((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onload = () => {
+				const base64 = reader.result as string;
+				// Remove the data:type/subtype;base64, prefix
+				const base64Data = base64.split(',')[1];
+				resolve(base64Data);
+			};
+			reader.onerror = reject;
+			reader.readAsDataURL(file);
+		});
+	}
+
+	async function processFiles(files: FileList | File[]) {
+		isProcessingFiles = true;
+		const fileArray = Array.from(files);
+
+		for (const file of fileArray) {
+			// Check file size
+			if (file.size > MAX_FILE_SIZE) {
+				addNotification({
+					type: 'error',
+					title: 'File Too Large',
+					message: `${file.name} exceeds the 10MB limit`,
+					duration: 3000
+				});
+				continue;
+			}
+
+			// Check if file type is supported
+			const isSupported = [...SUPPORTED_IMAGE_TYPES, ...SUPPORTED_DOCUMENT_TYPES].includes(
+				file.type
+			);
+			if (!isSupported) {
+				addNotification({
+					type: 'error',
+					title: 'Unsupported File Type',
+					message: `${file.name} is not supported. Only images (JPEG, PNG, GIF, WebP) and PDF documents are allowed.`,
+					duration: 4000
+				});
+				continue;
+			}
+
+			// Check for duplicates
+			if (attachedFiles.some((f) => f.file.name === file.name && f.file.size === file.size)) {
+				continue;
+			}
+
+			const fileType = getFileType(file.type);
+			const attachment: FileAttachment = {
+				id: crypto.randomUUID(),
+				file,
+				type: fileType
+			};
+
+			// Convert to base64
+			try {
+				attachment.base64 = await fileToBase64(file);
+
+				// Create preview URL for images
+				if (fileType === 'image') {
+					attachment.previewUrl = URL.createObjectURL(file);
+				}
+
+				attachedFiles = [...attachedFiles, attachment];
+			} catch (error) {
+				debug.error('chat', 'Error processing file:', error);
+				addNotification({
+					type: 'error',
+					title: 'File Processing Error',
+					message: `Failed to process ${file.name}`,
+					duration: 3000
+				});
+			}
+		}
+
+		isProcessingFiles = false;
+	}
+
+	function removeAttachment(id: string) {
+		const attachment = attachedFiles.find((f) => f.id === id);
+		if (attachment?.previewUrl) {
+			URL.revokeObjectURL(attachment.previewUrl);
+		}
+		attachedFiles = attachedFiles.filter((f) => f.id !== id);
+	}
+
+	function clearAllAttachments() {
+		attachedFiles.forEach((attachment) => {
+			if (attachment.previewUrl) {
+				URL.revokeObjectURL(attachment.previewUrl);
+			}
+		});
+		attachedFiles = [];
+	}
+
+	// File input handlers
+	function handleFileSelect(fileInputElement: HTMLInputElement | undefined) {
+		fileInputElement?.click();
+	}
+
+	async function handleFileInputChange(event: Event) {
+		const input = event.target as HTMLInputElement;
+		if (input.files && input.files.length > 0) {
+			await processFiles(input.files);
+			// Reset input so same file can be selected again
+			input.value = '';
+		}
+	}
+
+	// Drag and drop handlers
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault();
+		isDragging = true;
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		event.preventDefault();
+		isDragging = false;
+	}
+
+	async function handleDrop(event: DragEvent) {
+		event.preventDefault();
+		isDragging = false;
+
+		if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
+			await processFiles(event.dataTransfer.files);
+		}
+	}
+
+	// Paste handler for images and documents
+	async function handlePaste(event: ClipboardEvent) {
+		const items = event.clipboardData?.items;
+		if (!items) return;
+
+		const files: File[] = [];
+
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+
+			// Check if the item is a file
+			if (item.kind === 'file') {
+				const file = item.getAsFile();
+				if (file) {
+					files.push(file);
+				}
+			}
+		}
+
+		// Process the pasted files if any
+		if (files.length > 0) {
+			event.preventDefault(); // Prevent default paste behavior for files
+			await processFiles(files);
+		}
+		// If no files, let the default paste behavior handle text
+	}
+
+	return {
+		// State
+		get attachedFiles() {
+			return attachedFiles;
+		},
+		set attachedFiles(value: FileAttachment[]) {
+			attachedFiles = value;
+		},
+		get isDragging() {
+			return isDragging;
+		},
+		get isProcessingFiles() {
+			return isProcessingFiles;
+		},
+		// Methods
+		processFiles,
+		removeAttachment,
+		clearAllAttachments,
+		handleFileSelect,
+		handleFileInputChange,
+		handleDragOver,
+		handleDragLeave,
+		handleDrop,
+		handlePaste,
+		// Constants
+		SUPPORTED_IMAGE_TYPES,
+		SUPPORTED_DOCUMENT_TYPES
+	};
+}