@makolabs/ripple 0.4.0 → 0.5.0

package/dist/adapters/ai/types.js

@@ -0,0 +1,31 @@
+/**
+ * Error types for AI adapters
+ */
+export class AIAdapterError extends Error {
+    code;
+    adapter;
+    constructor(message, code, adapter) {
+        super(message);
+        this.code = code;
+        this.adapter = adapter;
+        this.name = 'AIAdapterError';
+    }
+}
+export class AIConfigurationError extends AIAdapterError {
+    constructor(message, adapter) {
+        super(message, 'CONFIGURATION_ERROR', adapter);
+        this.name = 'AIConfigurationError';
+    }
+}
+export class AINetworkError extends AIAdapterError {
+    constructor(message, adapter) {
+        super(message, 'NETWORK_ERROR', adapter);
+        this.name = 'AINetworkError';
+    }
+}
+export class AIRateLimitError extends AIAdapterError {
+    constructor(message, adapter) {
+        super(message, 'RATE_LIMIT_ERROR', adapter);
+        this.name = 'AIRateLimitError';
+    }
+}

package/dist/adapters/storage/BaseAdapter.js

@@ -87,7 +87,7 @@ export class BaseAdapter {
             }
         }
         // Count successes and failures
-        const succeeded = individualResults.filter(r => r.success).length;
+        const succeeded = individualResults.filter((r) => r.success).length;
         const failed = individualResults.length - succeeded;
         // Return batch import result
         return {
@@ -98,7 +98,7 @@ export class BaseAdapter {
                 succeeded,
                 failed
             },
-            results: individualResults.map(r => ({
+            results: individualResults.map((r) => ({
                 key: r.fileId || '',
                 success: r.success,
                 fileId: r.fileId,
@@ -125,21 +125,21 @@ export class BaseAdapter {
     // Helper method to get detailed status
     getDetailedStatus(status) {
         const statusMap = {
-            'pending': 'Waiting to start',
-            'pending_import': 'Preparing import',
-            'initializing': 'Initializing import',
-            'pending_file_retrieval': 'Retrieving file',
-            'retrieving_file': 'Downloading file',
-            'file_retrieved': 'File downloaded',
-            'loading_file_contents_to_db': 'Loading data',
-            'file_contents_loaded': 'Data loaded',
-            'ready_to_process': 'Ready for processing',
-            'validating_source_file_rows': 'Validating file',
-            'converting_to_business_objects': 'Converting data',
-            'processing': 'Processing data',
-            'completed': 'Import completed',
-            'failed': 'Import failed',
-            'partially_processed': 'Partially processed'
+            pending: 'Waiting to start',
+            pending_import: 'Preparing import',
+            initializing: 'Initializing import',
+            pending_file_retrieval: 'Retrieving file',
+            retrieving_file: 'Downloading file',
+            file_retrieved: 'File downloaded',
+            loading_file_contents_to_db: 'Loading data',
+            file_contents_loaded: 'Data loaded',
+            ready_to_process: 'Ready for processing',
+            validating_source_file_rows: 'Validating file',
+            converting_to_business_objects: 'Converting data',
+            processing: 'Processing data',
+            completed: 'Import completed',
+            failed: 'Import failed',
+            partially_processed: 'Partially processed'
         };
         return statusMap[status] || status;
     }
@@ -151,20 +151,20 @@ export class BaseAdapter {
         }
         // Otherwise, use status-based progress estimates
         const progressMap = {
-            'pending': 5,
-            'pending_import': 10,
-            'initializing': 15,
-            'pending_file_retrieval': 20,
-            'retrieving_file': 30,
-            'file_retrieved': 40,
-            'loading_file_contents_to_db': 50,
-            'file_contents_loaded': 60,
-            'ready_to_process': 70,
-            'validating_source_file_rows': 80,
-            'converting_to_business_objects': 90,
-            'completed': 100,
-            'failed': 0,
-            'partially_processed': 95
+            pending: 5,
+            pending_import: 10,
+            initializing: 15,
+            pending_file_retrieval: 20,
+            retrieving_file: 30,
+            file_retrieved: 40,
+            loading_file_contents_to_db: 50,
+            file_contents_loaded: 60,
+            ready_to_process: 70,
+            validating_source_file_rows: 80,
+            converting_to_business_objects: 90,
+            completed: 100,
+            failed: 0,
+            partially_processed: 95
         };
         return progressMap[status] || 50;
     }

package/dist/ai/AIChatInterface.svelte

@@ -0,0 +1,435 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { aiChatInterface } from './ai-chat-interface.js';
+	import MessageBox from './MessageBox.svelte';
+	import ChatInput from './ChatInput.svelte';
+	import ThinkingDisplay from './ThinkingDisplay.svelte';
+	import type { ChatMessage, ChatAction, VariantColors, StreamingCallback } from '../index.js';
+	import type { AIAdapter } from '../adapters/ai/index.js';
+
+	interface AIChatInterfaceProps {
+		adapter: AIAdapter;
+		title?: string;
+		subtitle?: string;
+		placeholder?: string;
+		color?: VariantColors;
+		disabled?: boolean;
+		loading?: boolean;
+		messages?: ChatMessage[];
+		class?: string;
+		context?: Record<string, unknown>;
+		showHeader?: boolean;
+	}
+
+	let {
+		adapter,
+		title = 'AI Assistant',
+		subtitle = 'How can I help you today?',
+		placeholder = 'Type your message...',
+		color = 'primary' as VariantColors,
+		disabled = false,
+		loading = false,
+		messages = $bindable([]),
+		class: className = '',
+		context = {},
+		showHeader = true
+	}: AIChatInterfaceProps = $props();
+
+	let userInput = $state('');
+	let isProcessing = $state(false);
+	let error = $state<string | null>(null);
+	let chatContainer: HTMLDivElement | undefined = $state();
+	let isAdapterConfigured = $state(false);
+	let textareaRef: HTMLTextAreaElement | undefined = $state();
+	let thinkingMode = $state(true);
+	let availableHeight = $state('100vh');
+
+	const { sendButton, background } = $derived(
+		aiChatInterface({
+			color: color as
+				| 'default'
+				| 'primary'
+				| 'secondary'
+				| 'info'
+				| 'success'
+				| 'warning'
+				| 'danger',
+			loading: loading || isProcessing,
+			disabled: disabled || !isAdapterConfigured
+		})
+	);
+
+	function generateId(): string {
+		return `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+	}
+
+	// Simple and reliable height calculation using native ResizeObserver
+	function findLayoutParent() {
+		if (!chatContainer) return null;
+		
+		let parent = chatContainer.parentElement;
+		while (parent && parent !== document.body) {
+			const style = window.getComputedStyle(parent);
+			// Look for containers with explicit height or overflow control
+			if (style.height !== 'auto' || style.overflow !== 'visible' || style.position !== 'static') {
+				return parent;
+			}
+			parent = parent.parentElement;
+		}
+		return document.body;
+	}
+
+	function updateAvailableHeight() {
+		const layoutParent = findLayoutParent();
+		if (layoutParent) {
+			const rect = layoutParent.getBoundingClientRect();
+			availableHeight = `${Math.max(rect.height, 300)}px`;
+		} else {
+			// Fallback: use full viewport since we couldn't find a layout parent
+			// This means the chat is likely the main content
+			availableHeight = `${Math.max(window.innerHeight, 300)}px`;
+		}
+	}
+
+	// Use ResizeObserver for efficient and accurate size tracking
+	$effect(() => {
+		if (typeof window !== 'undefined' && chatContainer) {
+			// Initial calculation
+			updateAvailableHeight();
+			
+			// Set up ResizeObserver for the layout parent
+			const layoutParent = findLayoutParent();
+			if (layoutParent && 'ResizeObserver' in window) {
+				const resizeObserver = new ResizeObserver(() => {
+					updateAvailableHeight();
+				});
+				
+				resizeObserver.observe(layoutParent);
+				
+				// Also observe viewport changes
+				const handleResize = () => updateAvailableHeight();
+				window.addEventListener('resize', handleResize);
+				
+				return () => {
+					resizeObserver.disconnect();
+					window.removeEventListener('resize', handleResize);
+				};
+			} else {
+				// Fallback for browsers without ResizeObserver
+				const handleResize = () => updateAvailableHeight();
+				window.addEventListener('resize', handleResize);
+				
+				return () => {
+					window.removeEventListener('resize', handleResize);
+				};
+			}
+		}
+	});
+
+	// Container classes for the main layout - use calculated height
+	const containerClasses = $derived(
+		cn(
+			'w-full flex flex-col',
+			messages.length === 0
+				? 'mx-auto max-w-4xl items-center justify-center px-6'
+				: 'overflow-hidden',
+			messages.length > 0 && background,
+			className
+		)
+	);
+
+
+
+	function addMessage(
+		type: 'chat' | 'action' | 'thinking',
+		content: string,
+		action?: ChatAction,
+		messageId?: string,
+		thinkingContent?: string,
+		isThinkingComplete?: boolean
+	): ChatMessage {
+		const message: ChatMessage = {
+			id: messageId || generateId(),
+			type,
+			content,
+			timestamp: new Date(),
+			action,
+			thinkingContent,
+			isThinkingComplete
+		};
+
+		messages = [...messages, message];
+
+		return message;
+	}
+
+	function updateMessageById(messageId: string, content: string, thinkingContent?: string, isThinkingComplete?: boolean): void {
+		messages = messages.map((msg) => 
+			msg.id === messageId 
+				? { 
+					...msg, 
+					content, 
+					...(thinkingContent !== undefined && { thinkingContent }),
+					...(isThinkingComplete !== undefined && { isThinkingComplete })
+				} 
+				: msg
+		);
+	}
+
+	async function handleSubmit() {
+		if (!userInput.trim() || isProcessing || disabled || !isAdapterConfigured) return;
+
+		const input = userInput.trim();
+		userInput = '';
+		error = null;
+		isProcessing = true;
+
+		try {
+			// Add user message with proper prefix
+			addMessage('chat', `User: ${input}`);
+
+			// Check if adapter supports streaming and use it
+			if (adapter.sendMessageStream) {
+				// Create streaming callback
+				const onStream: StreamingCallback = (response) => {
+					if (response.messageId) {
+						// Check if message exists, if not create it
+						const existingMessage = messages.find((msg) => msg.id === response.messageId);
+
+						if (!existingMessage) {
+							// Only create new streaming message if there's content or thinking content
+							if (response.content || response.thinkingContent) {
+								addMessage(
+									response.type, 
+									response.content, 
+									response.action, 
+									response.messageId,
+									response.thinkingContent,
+									response.isThinkingComplete
+								);
+							}
+						} else {
+							// Update existing message
+							updateMessageById(
+								response.messageId, 
+								response.content,
+								response.thinkingContent,
+								response.isThinkingComplete
+							);
+						}
+					}
+				};
+
+				// Send with streaming (include thinking mode context)
+				const contextWithThinking = { ...context, thinkingMode } as Record<string, unknown>;
+				await adapter.sendMessageStream(input, onStream, contextWithThinking);
+			} else {
+				// Fallback to regular sendMessage
+				const contextWithThinking = { ...context, thinkingMode } as Record<string, unknown>;
+				const response = await adapter.sendMessage(input, contextWithThinking);
+				addMessage(
+					response.type, 
+					response.content, 
+					response.action, 
+					undefined,
+					response.thinkingContent,
+					response.isThinkingComplete
+				);
+			}
+		} catch (err) {
+			console.error('AI request failed:', err);
+
+			let errorMessage = 'Something went wrong. Please try again.';
+
+			if (err instanceof Error) {
+				errorMessage = err.message;
+			}
+
+			addMessage('chat', `Sorry, ${errorMessage}`);
+
+			error = errorMessage;
+			setTimeout(() => {
+				error = null;
+			}, 5000);
+		} finally {
+			isProcessing = false;
+
+			// Auto-focus the input after response is complete
+			setTimeout(() => {
+				textareaRef?.focus();
+			}, 100);
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			handleSubmit();
+		}
+	}
+
+	function handleThinkingToggle(enabled: boolean) {
+		thinkingMode = enabled;
+		// You can add additional logic here when thinking mode changes
+		console.log('Thinking mode:', enabled ? 'enabled' : 'disabled');
+	}
+
+
+
+	// Check adapter configuration
+	$effect(() => {
+		if (adapter) {
+			isAdapterConfigured = adapter.isConfigured();
+
+			// Load existing history if available
+			if (adapter.getHistory && messages.length === 0) {
+				const history = adapter.getHistory();
+				if (history.length > 0) {
+					messages = history;
+				}
+			}
+		} else {
+			isAdapterConfigured = false;
+		}
+	});
+
+	// Simple auto-scroll to bottom
+	$effect(() => {
+		if (chatContainer && messages.length > 0) {
+			setTimeout(() => {
+				chatContainer?.scrollTo({ top: chatContainer.scrollHeight, behavior: 'smooth' });
+			}, 100);
+		}
+	});
+
+</script>
+
+<!-- Unified Layout Container -->
+<div class={containerClasses} bind:this={chatContainer} style="height: {availableHeight}">
+	<!-- Empty State Content (only shown when no messages) -->
+	{#if messages.length === 0}
+		<!-- Configuration Error -->
+		{#if !isAdapterConfigured}
+			<div class="mb-8 w-full max-w-2xl rounded-xl border border-amber-200 bg-amber-50 px-6 py-4">
+				<div class="flex items-center gap-3">
+					<div class="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100">
+						<svg
+							class="h-5 w-5 text-amber-600"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16c-.77.833.192 2.5 1.732 2.5z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h3 class="font-medium text-amber-900">Configuration Required</h3>
+						<p class="text-sm text-amber-700">
+							Please configure your AI adapter to start chatting.
+						</p>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Centered Content -->
+		<div class="mb-8 text-center">
+			<h1 class="mb-8 text-4xl font-medium text-gray-900">{title}</h1>
+			{#if subtitle}
+				<p class="mb-6 text-lg text-gray-600">{subtitle}</p>
+			{/if}
+		</div>
+	{:else}
+		<!-- Chat Layout Header -->
+		<div
+			class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between border-b border-gray-200 bg-white/50 px-6 py-3 backdrop-blur-sm"
+		>
+			<h1 class="text-sm font-medium text-gray-900">{title}</h1>
+			<div class="flex items-center gap-2">
+				{#if isAdapterConfigured}
+					<div
+						class="flex items-center gap-2 rounded-full bg-emerald-100/50 px-2 py-1 text-xs font-medium text-emerald-700"
+					>
+						<div class="h-1.5 w-1.5 rounded-full bg-emerald-500"></div>
+						Online
+					</div>
+				{:else}
+					<div
+						class="flex items-center gap-2 rounded-full bg-gray-100/50 px-2 py-1 text-xs font-medium text-gray-500"
+					>
+						<div class="h-1.5 w-1.5 rounded-full bg-gray-400"></div>
+						Offline
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Chat Messages Area -->
+		<main class="flex flex-1 flex-col overflow-y-auto">
+			<div class="mx-auto w-full max-w-4xl space-y-4 px-6 py-4 flex-1">
+				{#each messages as message (message.id)}
+					{@const isUser = message.content.startsWith('User:')}
+					{@const displayContent = isUser ? message.content.replace('User: ', '') : message.content}
+
+					<!-- Show thinking display for AI messages when thinking mode is enabled -->
+					{#if !isUser && message.thinkingContent}
+						<ThinkingDisplay 
+							content={message.thinkingContent}
+							isComplete={message.isThinkingComplete || false}
+							class="mb-2"
+						/>
+					{/if}
+
+					<!-- Only show message if it has content -->
+					{#if displayContent.trim()}
+						<div class={cn('mb-4 flex w-full', isUser ? 'justify-end' : 'justify-start')}>
+							<MessageBox content={displayContent} {isUser} {color} timestamp={message.timestamp} />
+						</div>
+					{/if}
+				{/each}
+
+				<!-- Typing Indicator -->
+				{#if isProcessing}
+					<div class="flex w-full justify-start">
+						<div
+							class="rounded-md border border-gray-200 bg-white/80 px-4 py-3 shadow-sm backdrop-blur-sm"
+						>
+							<div class="flex items-center space-x-1">
+								<div class="h-2 w-2 animate-bounce rounded-full bg-gray-400"></div>
+								<div
+									class="h-2 w-2 animate-bounce rounded-full bg-gray-400"
+									style="animation-delay: 0.1s"
+								></div>
+								<div
+									class="h-2 w-2 animate-bounce rounded-full bg-gray-400"
+									style="animation-delay: 0.2s"
+								></div>
+							</div>
+						</div>
+					</div>
+				{/if}
+			</div>
+		</main>
+	{/if}
+
+	<!-- Single Input Area (used by both layouts) -->
+	<ChatInput
+		bind:userInput
+		bind:textareaRef
+		bind:thinkingMode
+		placeholder={isAdapterConfigured ? placeholder : 'Configure AI adapter to start chatting...'}
+		{isProcessing}
+		{disabled}
+		{isAdapterConfigured}
+		{color}
+		hasMessages={messages.length > 0}
+		onSubmit={handleSubmit}
+		onKeyDown={handleKeyDown}
+		onThinkingToggle={handleThinkingToggle}
+	/>
+</div>

package/dist/ai/AIChatInterface.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ChatMessage, VariantColors } from '../index.js';
+import type { AIAdapter } from '../adapters/ai/index.js';
+interface AIChatInterfaceProps {
+    adapter: AIAdapter;
+    title?: string;
+    subtitle?: string;
+    placeholder?: string;
+    color?: VariantColors;
+    disabled?: boolean;
+    loading?: boolean;
+    messages?: ChatMessage[];
+    class?: string;
+    context?: Record<string, unknown>;
+    showHeader?: boolean;
+}
+declare const AiChatInterface: import("svelte").Component<AIChatInterfaceProps, {}, "messages">;
+type AiChatInterface = ReturnType<typeof AiChatInterface>;
+export default AiChatInterface;