@makolabs/ripple 0.4.1-0 → 1.0.1

package/dist/ai/MessageBox.svelte

@@ -0,0 +1,403 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { formatTime } from '../helper/date.js';
+	import { marked } from 'marked';
+	import { tv } from 'tailwind-variants';
+	import type { VariantColors } from '../index.js';
+	import { parseContentSegments } from './content-detector.js';
+	import MermaidRenderer from './MermaidRenderer.svelte';
+	import CodeRenderer from './CodeRenderer.svelte';
+
+	interface Props {
+		content: string;
+		isUser: boolean;
+		color?: VariantColors;
+		timestamp?: Date;
+		userMessageClass?: string;
+		aiMessageClass?: string;
+	}
+
+	let {
+		content,
+		isUser,
+		color = 'default',
+		timestamp,
+		userMessageClass = '',
+		aiMessageClass = ''
+	}: Props = $props();
+
+	const messageBox = tv({
+		base: 'min-w-fit max-w-[80%] w-auto px-4 py-3 rounded-md text-sm leading-relaxed shadow-sm',
+		variants: {
+			type: {
+				user: 'inline-block',
+				ai: 'bg-white border text-default-900'
+			},
+			color: {
+				default: {},
+				primary: {},
+				secondary: {},
+				info: {},
+				success: {},
+				warning: {},
+				danger: {}
+			}
+		},
+		compoundVariants: [
+			// User message variants
+			{ type: 'user', color: 'default', class: 'bg-default-500 text-white' },
+			{ type: 'user', color: 'primary', class: 'bg-primary-500 text-white' },
+			{ type: 'user', color: 'secondary', class: 'bg-secondary-500 text-white' },
+			{ type: 'user', color: 'info', class: 'bg-info-500 text-white' },
+			{ type: 'user', color: 'success', class: 'bg-success-500 text-white' },
+			{ type: 'user', color: 'warning', class: 'bg-warning-500 text-white' },
+			{ type: 'user', color: 'danger', class: 'bg-danger-500 text-white' },
+
+			// AI message variants - border colors
+			{ type: 'ai', color: 'default', class: 'border-default-200' },
+			{ type: 'ai', color: 'primary', class: 'border-primary-200' },
+			{ type: 'ai', color: 'secondary', class: 'border-secondary-200' },
+			{ type: 'ai', color: 'info', class: 'border-info-200' },
+			{ type: 'ai', color: 'success', class: 'border-success-200' },
+			{ type: 'ai', color: 'warning', class: 'border-warning-200' },
+			{ type: 'ai', color: 'danger', class: 'border-danger-200' }
+		]
+	});
+
+	let copyButtonRef: HTMLButtonElement | undefined = $state();
+	let showCopied = $state(false);
+
+	function renderMarkdown(text: string): string {
+		const result = marked(text);
+		return typeof result === 'string' ? result : '';
+	}
+
+	// Parse content into segments for enhanced rendering
+	const contentSegments = $derived(parseContentSegments(content));
+
+	async function copyToClipboard(text: string, asRichText = false) {
+		try {
+			if (asRichText) {
+				// Copy as rich text (HTML)
+				const htmlText = renderMarkdown(text);
+				const clipboardItem = new ClipboardItem({
+					'text/html': new Blob([htmlText], { type: 'text/html' }),
+					'text/plain': new Blob([text], { type: 'text/plain' })
+				});
+				await navigator.clipboard.write([clipboardItem]);
+			} else {
+				// Copy as plain text (markdown)
+				await navigator.clipboard.writeText(text);
+			}
+
+			showCopied = true;
+			setTimeout(() => {
+				showCopied = false;
+			}, 2000);
+		} catch (err) {
+			console.error('Failed to copy: ', err);
+		}
+	}
+
+	function handleCopyClick(event: MouseEvent) {
+		event.preventDefault();
+		copyToClipboard(content, false); // Single click = plain markdown
+	}
+
+	function handleCopyDoubleClick(event: MouseEvent) {
+		event.preventDefault();
+		copyToClipboard(content, true); // Double click = rich text
+	}
+</script>
+
+<div class="group relative flex flex-col {isUser ? 'justify-end' : 'justify-start'}">
+	<div
+		class={cn(
+			messageBox({
+				type: isUser ? 'user' : 'ai',
+				color: color as
+					| 'default'
+					| 'primary'
+					| 'secondary'
+					| 'info'
+					| 'success'
+					| 'warning'
+					| 'danger'
+			}),
+			!isUser && 'markdown-content',
+			isUser ? userMessageClass || '' : aiMessageClass || ''
+		)}
+	>
+		{#if isUser}
+			{content}
+		{:else}
+			<!-- Enhanced rendering for AI messages with Mermaid and code highlighting -->
+			{#each contentSegments as segment}
+				{#if segment.type === 'mermaid'}
+					<MermaidRenderer diagram={segment.content} />
+				{:else if segment.type === 'code'}
+					<CodeRenderer 
+						code={segment.content} 
+						language={segment.language ?? 'text'} 
+					/>
+				{:else if segment.type === 'text'}
+					<!-- Regular markdown content -->
+					{@html renderMarkdown(segment.content)}
+				{/if}
+			{/each}
+		{/if}
+	</div>
+
+	<div class="flex flex-row items-center gap-2 justify-between">
+		<!-- Timestamp below message bubble -->
+		{#if timestamp}
+			<div class={cn('mt-1 text-xs text-gray-500', isUser ? 'text-right ml-auto' : 'text-left mr-auto')}>
+				{formatTime(timestamp)}
+			</div>
+		{/if}
+
+		<!-- Copy button for AI messages -->
+		{#if !isUser}
+			<div class="mt-1 flex justify-start">
+				<button
+					bind:this={copyButtonRef}
+					onclick={handleCopyClick}
+					ondblclick={handleCopyDoubleClick}
+					class="flex items-center gap-1 rounded-md bg-gray-100 px-3 py-1 text-xs font-medium text-gray-600 opacity-0 transition-opacity duration-200 group-hover:opacity-100 hover:bg-gray-200 hover:text-gray-800"
+					title="Click: Copy markdown • Double-click: Copy rich text"
+				>
+					{#if showCopied}
+						<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							></path>
+						</svg>
+						Copied!
+					{:else}
+						<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+							></path>
+						</svg>
+						Copy
+					{/if}
+				</button>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* Custom markdown styling for AI messages */
+	:global(.markdown-content) {
+		line-height: 1.6;
+		color: rgb(55 65 81);
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+		max-width: 100%;
+	}
+
+	/* Headers */
+	:global(.markdown-content h1),
+	:global(.markdown-content h2),
+	:global(.markdown-content h3),
+	:global(.markdown-content h4),
+	:global(.markdown-content h5),
+	:global(.markdown-content h6) {
+		font-weight: 600;
+		margin: 1.25em 0 0.5em 0;
+		color: rgb(17 24 39);
+		line-height: 1.25;
+	}
+
+	:global(.markdown-content h1:first-child),
+	:global(.markdown-content h2:first-child),
+	:global(.markdown-content h3:first-child),
+	:global(.markdown-content h4:first-child),
+	:global(.markdown-content h5:first-child),
+	:global(.markdown-content h6:first-child) {
+		margin-top: 0;
+	}
+
+	:global(.markdown-content h1) {
+		font-size: 1.875em;
+	}
+	:global(.markdown-content h2) {
+		font-size: 1.5em;
+	}
+	:global(.markdown-content h3) {
+		font-size: 1.25em;
+	}
+	:global(.markdown-content h4) {
+		font-size: 1.125em;
+	}
+	:global(.markdown-content h5) {
+		font-size: 1em;
+	}
+	:global(.markdown-content h6) {
+		font-size: 0.875em;
+	}
+
+	/* Paragraphs */
+	:global(.markdown-content p) {
+		margin: 0.75em 0;
+		line-height: 1.6;
+	}
+
+	:global(.markdown-content p:first-child) {
+		margin-top: 0;
+	}
+
+	:global(.markdown-content p:last-child) {
+		margin-bottom: 0;
+	}
+
+	:global(.markdown-content p:only-child) {
+		margin: 0;
+	}
+
+	/* Typography */
+	:global(.markdown-content strong) {
+		font-weight: 600;
+		color: rgb(17 24 39);
+	}
+
+	:global(.markdown-content em) {
+		font-style: italic;
+	}
+
+	/* Code */
+	:global(.markdown-content code) {
+		background-color: rgb(243 244 246);
+		color: rgb(239 68 68);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+		font-size: 0.875em;
+		font-family:
+			ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+	}
+
+	:global(.markdown-content pre) {
+		background-color: rgb(31 41 55);
+		color: rgb(243 244 246);
+		padding: 1rem;
+		border-radius: 0.5rem;
+		overflow-x: auto;
+		margin: 1rem 0;
+		font-family:
+			ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+		font-size: 0.875em;
+		line-height: 1.5;
+		max-width: 100%;
+		white-space: pre-wrap;
+		word-break: break-all;
+	}
+
+	:global(.markdown-content pre code) {
+		background: none;
+		color: inherit;
+		padding: 0;
+		font-size: inherit;
+	}
+
+	/* Lists */
+	:global(.markdown-content ul),
+	:global(.markdown-content ol) {
+		margin: 0.75em 0;
+		padding-left: 1.5rem;
+	}
+
+	:global(.markdown-content ul) {
+		list-style-type: disc;
+	}
+
+	:global(.markdown-content ol) {
+		list-style-type: decimal;
+	}
+
+	:global(.markdown-content li) {
+		margin: 0.25em 0;
+		line-height: 1.5;
+	}
+
+	:global(.markdown-content li > ul),
+	:global(.markdown-content li > ol) {
+		margin: 0.25em 0;
+	}
+
+	/* Blockquotes */
+	:global(.markdown-content blockquote) {
+		border-left: 4px solid rgb(209 213 219);
+		padding: 0.5rem 1rem;
+		margin: 1rem 0;
+		background-color: rgb(249 250 251);
+		font-style: italic;
+		color: rgb(75 85 99);
+	}
+
+	:global(.markdown-content blockquote p) {
+		margin: 0.5em 0;
+	}
+
+	:global(.markdown-content blockquote p:first-child) {
+		margin-top: 0;
+	}
+
+	:global(.markdown-content blockquote p:last-child) {
+		margin-bottom: 0;
+	}
+
+	/* Links */
+	:global(.markdown-content a) {
+		color: rgb(37 99 235);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+
+	:global(.markdown-content a:hover) {
+		color: rgb(29 78 216);
+		text-decoration-thickness: 2px;
+	}
+
+	/* Horizontal rules */
+	:global(.markdown-content hr) {
+		border: none;
+		border-top: 1px solid rgb(229 231 235);
+		margin: 1.5rem 0;
+	}
+
+	/* Tables */
+	:global(.markdown-content table) {
+		border-collapse: collapse;
+		width: 100%;
+		margin: 1rem 0;
+		font-size: 0.875em;
+		max-width: 100%;
+		overflow-x: auto;
+		display: block;
+		white-space: nowrap;
+	}
+
+	:global(.markdown-content th),
+	:global(.markdown-content td) {
+		border: 1px solid rgb(229 231 235);
+		padding: 0.5rem 0.75rem;
+		text-align: left;
+	}
+
+	:global(.markdown-content th) {
+		background-color: rgb(249 250 251);
+		font-weight: 600;
+		color: rgb(17 24 39);
+	}
+
+	:global(.markdown-content tbody tr:nth-child(even)) {
+		background-color: rgb(249 250 251);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { VariantColors } from '../index.js';
+interface Props {
+    content: string;
+    isUser: boolean;
+    color?: VariantColors;
+    timestamp?: Date;
+    userMessageClass?: string;
+    aiMessageClass?: string;
+}
+declare const MessageBox: import("svelte").Component<Props, {}, "">;
+type MessageBox = ReturnType<typeof MessageBox>;
+export default MessageBox;

package/dist/ai/ThinkingDisplay.svelte

@@ -0,0 +1,275 @@
+<script lang="ts">
+	import { tv } from 'tailwind-variants';
+	import { onMount } from 'svelte';
+
+	interface ThinkingDisplayProps {
+		content: string;
+		isComplete?: boolean;
+		isVisible?: boolean;
+		class?: string;
+	}
+
+	let {
+		content,
+		isComplete = false,
+		isVisible = true,
+		class: className = ''
+	}: ThinkingDisplayProps = $props();
+
+	let isExpanded = $state(false);
+	let containerRef: HTMLDivElement | undefined = $state();
+	
+	// Parse thinking content into structured steps
+	const parsedSteps = $derived.by(() => {
+		if (!content) return [];
+		
+		// Split content by markdown headers or double asterisks
+		const sections = content.split(/\*\*([^*]+)\*\*/g);
+		const steps = [];
+		
+		// When split by regex with capture groups, we get: [text, title, text, title, ...]
+		for (let i = 0; i < sections.length; i++) {
+			if (i % 2 === 0) {
+				// Even indices are text content
+				const text = sections[i]?.trim();
+				if (text && text.length > 10) {
+					// Check if there's a title after this text
+					const title = sections[i + 1]?.trim();
+					steps.push({
+						title: title || 'Thinking...',
+						content: text,
+						isComplete: isComplete
+					});
+				}
+			} else {
+				// Odd indices are titles - check if there's content after
+				const title = sections[i]?.trim();
+				const nextContent = sections[i + 1]?.trim();
+				if (title && nextContent && nextContent.length > 10) {
+					steps.push({
+						title: title,
+						content: nextContent,
+						isComplete: isComplete
+					});
+					i++; // Skip the next content since we've processed it
+				}
+			}
+		}
+		
+		// If no structured content found, treat as single step
+		if (steps.length === 0 && content.trim()) {
+			steps.push({
+				title: isComplete ? 'Reasoning Complete' : 'Thinking...',
+				content: content.trim(),
+				isComplete: isComplete
+			});
+		}
+		
+		return steps;
+	});
+
+	// Find the longest/most descriptive title for collapsed view
+	const bestTitle = $derived.by(() => {
+		if (parsedSteps.length === 0) return 'Reasoning Complete';
+		
+		// Find the step with the longest title (most descriptive)
+		let longest = parsedSteps[0];
+		for (const step of parsedSteps) {
+			if (step.title.length > longest.title.length && step.title !== 'Thinking...') {
+				longest = step;
+			}
+		}
+		
+		return longest.title;
+	});
+
+	const thinkingContainer = tv({
+		base: 'relative mb-4 rounded-md border transition-all duration-200',
+		variants: {
+			state: {
+				thinking: 'border-blue-200 bg-blue-50/50',
+				complete: 'border-gray-200 bg-gray-50/50'
+			},
+			expanded: {
+				true: 'shadow-sm',
+				false: ''
+			}
+		}
+	});
+
+	const thinkingHeader = tv({
+		base: 'flex items-center justify-between p-3 cursor-pointer hover:bg-black/5 transition-colors rounded-t-md',
+		variants: {
+			state: {
+				thinking: 'text-blue-700',
+				complete: 'text-gray-700'
+			}
+		}
+	});
+
+	const thinkingContent = tv({
+		base: 'px-3 pb-3 pt-1 text-sm leading-relaxed transition-all duration-200',
+		variants: {
+			state: {
+				thinking: 'text-blue-800',
+				complete: 'text-gray-700'
+			},
+			expanded: {
+				true: 'max-h-none',
+				false: 'max-h-20 overflow-hidden'
+			}
+		}
+	});
+
+	const containerClasses = $derived(
+		thinkingContainer({
+			state: isComplete ? 'complete' : 'thinking',
+			expanded: isExpanded
+		})
+	);
+
+	const headerClasses = $derived(
+		thinkingHeader({
+			state: isComplete ? 'complete' : 'thinking'
+		})
+	);
+
+	const contentClasses = $derived(
+		thinkingContent({
+			state: isComplete ? 'complete' : 'thinking',
+			expanded: isExpanded
+		})
+	);
+
+	function toggleExpanded() {
+		isExpanded = !isExpanded;
+	}
+
+	// Don't auto-expand when complete - let user choose to expand
+	// $effect(() => {
+	// 	if (isComplete && parsedSteps.length > 1) {
+	// 		// Small delay to make the transition smoother
+	// 		setTimeout(() => {
+	// 			isExpanded = true;
+	// 		}, 300);
+	// 	}
+	// });
+
+</script>
+
+{#if isVisible && content}
+	<div bind:this={containerRef} class={`${containerClasses} ${className}`}>
+		<!-- Header -->
+		<div 
+			class={headerClasses} 
+			onclick={toggleExpanded} 
+			onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? toggleExpanded() : null}
+			role="button" 
+			tabindex="0"
+		>
+			<div class="flex items-center gap-2">
+				<!-- Thinking Icon -->
+				<div class="flex items-center gap-2">
+					{#if !isComplete}
+						<!-- Animated thinking dots -->
+						<div class="flex items-center gap-1">
+							<div class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse"></div>
+							<div class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
+							<div class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
+						</div>
+					{:else}
+						<!-- Completed icon -->
+						<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-500" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 1 1 7.072 0l-.548.547A3.37 3.37 0 0 0 14 18.469V19a2 2 0 1 1-4 0v-.531c0-.895-.356-1.754-.988-2.386z"/>
+						</svg>
+					{/if}
+					<span class="font-medium text-sm">
+						{isComplete ? bestTitle : 'Thinking...'}
+					</span>
+				</div>
+			</div>
+			
+			<!-- Expand/Collapse Icon -->
+			<svg 
+				class={`w-4 h-4 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`} 
+				fill="none" 
+				stroke="currentColor" 
+				viewBox="0 0 24 24"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+			</svg>
+		</div>
+
+		<!-- Content -->
+		{#if isExpanded}
+			<div class={contentClasses}>
+				<!-- Timeline Container -->
+				<div class="relative">
+					{#each parsedSteps as step, index}
+						<div class="relative flex">
+							<!-- Timeline Line and Icon -->
+							<div class="flex flex-col items-center mr-4">
+								<!-- Timeline Icon -->
+								<div class="flex items-center justify-center w-5 h-5 shrink-0 rounded-full bg-white border border-gray-300 z-10">
+									{#if step.isComplete && index === parsedSteps.length - 1}
+										<!-- Checkmark only for the last completed step -->
+										<svg class="w-3 h-3 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
+											<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+										</svg>
+									{:else if step.isComplete}
+										<!-- Simple filled circle for other completed steps -->
+										<div class="w-2.5 h-2.5 bg-gray-500 rounded-full"></div>
+									{:else}
+										<!-- Pulsing dot for in-progress step -->
+										<div class="w-2.5 h-2.5 bg-gray-400 rounded-full animate-pulse"></div>
+									{/if}
+								</div>
+								
+								<!-- Vertical Line (except for last item) -->
+								{#if index < parsedSteps.length - 1}
+									<div class="w-0.5 h-full min-h-8 bg-gray-200 mt-1"></div>
+								{/if}
+							</div>
+							
+							<!-- Step Content -->
+							<div class="flex-1 pb-6 last:pb-0">
+								<!-- Step Title -->
+								<div class="mb-2">
+									<h4 class="font-medium text-sm text-gray-800 leading-tight">
+										{step.title}
+									</h4>
+								</div>
+								
+								<!-- Step Description -->
+								<div class="text-sm text-gray-600 leading-relaxed">
+									{#if step.content.includes('•') || step.content.includes('-')}
+										<!-- Parse bullet points -->
+										<ul class="space-y-1">
+											{#each step.content.split('\n') as line}
+												{@const trimmedLine = line.trim()}
+												{#if trimmedLine.startsWith('•') || trimmedLine.startsWith('-')}
+													<li class="flex items-start">
+														<span class="w-1 h-1 bg-gray-400 rounded-full mt-2 mr-2 flex-shrink-0"></span>
+														<span>{trimmedLine.substring(1).trim()}</span>
+													</li>
+												{:else if trimmedLine && !trimmedLine.startsWith('•') && !trimmedLine.startsWith('-')}
+													<p class="mb-2">{trimmedLine}</p>
+												{/if}
+											{/each}
+										</ul>
+									{:else}
+										<p class="whitespace-pre-wrap">{step.content}</p>
+									{/if}
+									
+									{#if !step.isComplete && index === parsedSteps.length - 1}
+										<span class="inline-block w-0.5 h-4 bg-blue-500 animate-pulse ml-1"></span>
+									{/if}
+								</div>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,9 @@
+interface ThinkingDisplayProps {
+    content: string;
+    isComplete?: boolean;
+    isVisible?: boolean;
+    class?: string;
+}
+declare const ThinkingDisplay: import("svelte").Component<ThinkingDisplayProps, {}, "">;
+type ThinkingDisplay = ReturnType<typeof ThinkingDisplay>;
+export default ThinkingDisplay;