@makolabs/ripple 0.4.0 → 0.5.0

package/dist/ai/ChatInput.svelte

@@ -0,0 +1,211 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { tv } from 'tailwind-variants';
+	import ComposeDropdown from './ComposeDropdown.svelte';
+	import type { VariantColors } from '../index.js';
+
+	interface ChatInputProps {
+		userInput: string;
+		textareaRef?: HTMLTextAreaElement;
+		placeholder: string;
+		isProcessing: boolean;
+		disabled: boolean;
+		isAdapterConfigured: boolean;
+		color?: VariantColors;
+		hasMessages: boolean;
+		thinkingMode?: boolean;
+		onSubmit: () => void;
+		onKeyDown: (event: KeyboardEvent) => void;
+		onThinkingToggle?: (enabled: boolean) => void;
+	}
+
+	let {
+		userInput = $bindable(),
+		textareaRef = $bindable(),
+		placeholder,
+		isProcessing,
+		disabled,
+		isAdapterConfigured,
+		color = 'primary',
+		hasMessages,
+		thinkingMode = $bindable(),
+		onSubmit,
+		onKeyDown,
+		onThinkingToggle
+	}: ChatInputProps = $props();
+
+	const textarea = tv({
+		base: 'flex-1 rounded-md text-sm placeholder-gray-400 focus:outline-none transition-all duration-200 bg-gray-200/60 border-0 resize-none',
+		variants: {
+			layout: {
+				empty: 'px-6 py-4 min-h-[52px] max-h-[120px]',
+				chat: 'px-6 py-3 min-h-[48px] max-h-[393px] overflow-y-auto'
+			},
+			state: {
+				disabled: 'bg-gray-100 cursor-not-allowed text-gray-500',
+				enabled: 'hover:bg-gray-200/80 focus:bg-white focus:ring-2 focus:shadow-md'
+			}
+		},
+		compoundVariants: [
+			{
+				state: 'enabled',
+				class: 'focus:ring-primary-500/20'
+			}
+		]
+	});
+
+	const sendButton = tv({
+		base: 'flex h-12 w-12 items-center justify-center rounded-full transition-all duration-200',
+		variants: {
+			state: {
+				disabled: 'bg-gray-200 text-gray-400 cursor-not-allowed',
+				enabled: 'text-white bg-primary-500 hover:bg-primary-600 focus:ring-2 focus:ring-primary-500/20'
+			}
+		}
+	});
+
+
+
+	const inputArea = tv({
+		variants: {
+			layout: {
+				empty: 'w-full max-w-3xl',
+				chat: 'sticky bottom-0 z-10 flex-shrink-0 bg-white/50 px-6 pt-2 pb-0 backdrop-blur-sm'
+			}
+		}
+	});
+
+	const inputContainer = tv({
+		base: 'flex items-end gap-3',
+		variants: {
+			layout: {
+				empty: '',
+				chat: 'mx-auto max-w-4xl'
+			}
+		}
+	});
+
+	// Computed classes
+	const textareaClasses = $derived(
+		textarea({
+			layout: hasMessages ? 'chat' : 'empty',
+			state: disabled || !isAdapterConfigured ? 'disabled' : 'enabled'
+		})
+	);
+
+	const sendButtonClasses = $derived(
+		sendButton({
+			state: disabled || !isAdapterConfigured || isProcessing || !userInput.trim() ? 'disabled' : 'enabled'
+		})
+	);
+
+
+
+	const inputAreaClasses = $derived(
+		inputArea({
+			layout: hasMessages ? 'chat' : 'empty'
+		})
+	);
+
+	const inputContainerClasses = $derived(
+		inputContainer({
+			layout: hasMessages ? 'chat' : 'empty'
+		})
+	);
+
+	// Auto-resize textarea functionality
+	function autoResizeTextarea() {
+		if (textareaRef) {
+			textareaRef.style.height = 'auto';
+			textareaRef.style.height = Math.min(textareaRef.scrollHeight, 393) + 'px';
+		}
+	}
+
+	// Watch for userInput changes and auto-resize
+	$effect(() => {
+		if (userInput !== undefined) {
+			// Small delay to ensure DOM is updated
+			setTimeout(autoResizeTextarea, 0);
+		}
+	});
+
+	// Conditional handlers for textarea based on layout
+	const textareaHandlers = $derived({
+		onkeydown: onKeyDown,
+		// Only add auto-resize handlers in chat layout (when messages exist)
+		...(hasMessages && {
+			oninput: autoResizeTextarea,
+			onpaste: () => setTimeout(autoResizeTextarea, 0)
+		})
+	});
+
+	function handleSubmit() {
+		onSubmit();
+	}
+
+	onMount(() => {
+		// Auto-focus textarea on mount if configured
+		if (browser && isAdapterConfigured) {
+			setTimeout(() => {
+				textareaRef?.focus();
+			}, 100);
+		}
+	});
+</script>
+
+<!-- Single Input Area (used by both layouts) -->
+<div class={inputAreaClasses}>
+	<div class={inputContainerClasses}>
+		<!-- Compose Dropdown -->
+		<ComposeDropdown
+			{disabled}
+			{isAdapterConfigured}
+			bind:thinkingMode
+			{onThinkingToggle}
+		/>
+
+		<textarea
+			bind:this={textareaRef}
+			bind:value={userInput}
+			{...textareaHandlers}
+			{placeholder}
+			class={textareaClasses}
+			rows={1}
+			disabled={isProcessing || disabled || !isAdapterConfigured}
+		></textarea>
+
+		<button
+			class={sendButtonClasses}
+			onclick={handleSubmit}
+			disabled={isProcessing || disabled || !userInput.trim() || !isAdapterConfigured}
+			aria-label="Send message"
+		>
+			{#if isProcessing}
+				<svg class="h-5 w-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+					/>
+				</svg>
+			{:else}
+				<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+					/>
+				</svg>
+			{/if}
+		</button>
+	</div>
+
+	<div class="mt-2 h-6 px-2">
+		{#if userInput.trim() && !isProcessing}
+			<p class="text-xs text-gray-500">Press Enter to send • Shift+Enter for new line</p>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,18 @@
+import type { VariantColors } from '../index.js';
+interface ChatInputProps {
+    userInput: string;
+    textareaRef?: HTMLTextAreaElement;
+    placeholder: string;
+    isProcessing: boolean;
+    disabled: boolean;
+    isAdapterConfigured: boolean;
+    color?: VariantColors;
+    hasMessages: boolean;
+    thinkingMode?: boolean;
+    onSubmit: () => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+    onThinkingToggle?: (enabled: boolean) => void;
+}
+declare const ChatInput: import("svelte").Component<ChatInputProps, {}, "thinkingMode" | "userInput" | "textareaRef">;
+type ChatInput = ReturnType<typeof ChatInput>;
+export default ChatInput;

package/dist/ai/CodeRenderer.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import Highlight from 'svelte-highlight';
+	import { HighlightAuto } from 'svelte-highlight';
+	
+	// Import common languages
+	import javascript from 'svelte-highlight/languages/javascript';
+	import typescript from 'svelte-highlight/languages/typescript';
+	import python from 'svelte-highlight/languages/python';
+	import java from 'svelte-highlight/languages/java';
+	import cpp from 'svelte-highlight/languages/cpp';
+	import csharp from 'svelte-highlight/languages/csharp';
+	import php from 'svelte-highlight/languages/php';
+	import ruby from 'svelte-highlight/languages/ruby';
+	import go from 'svelte-highlight/languages/go';
+	import rust from 'svelte-highlight/languages/rust';
+	import swift from 'svelte-highlight/languages/swift';
+	import kotlin from 'svelte-highlight/languages/kotlin';
+	import css from 'svelte-highlight/languages/css';
+	import html from 'svelte-highlight/languages/xml';
+	import json from 'svelte-highlight/languages/json';
+	import yaml from 'svelte-highlight/languages/yaml';
+	import sql from 'svelte-highlight/languages/sql';
+	import bash from 'svelte-highlight/languages/bash';
+	import powershell from 'svelte-highlight/languages/powershell';
+	import dockerfile from 'svelte-highlight/languages/dockerfile';
+	import markdown from 'svelte-highlight/languages/markdown';
+	
+	// Import a clean dark theme
+	import githubDark from 'svelte-highlight/styles/github-dark';
+
+	interface Props {
+		code: string;
+		language?: string;
+		class?: string;
+	}
+
+	let { code, language = 'text', class: className = '' }: Props = $props();
+
+	// Language mapping
+	const languageMap: Record<string, any> = {
+		javascript: javascript,
+		js: javascript,
+		typescript: typescript,
+		ts: typescript,
+		python: python,
+		py: python,
+		java: java,
+		cpp: cpp,
+		'c++': cpp,
+		csharp: csharp,
+		'c#': csharp,
+		php: php,
+		ruby: ruby,
+		rb: ruby,
+		go: go,
+		golang: go,
+		rust: rust,
+		rs: rust,
+		swift: swift,
+		kotlin: kotlin,
+		kt: kotlin,
+		css: css,
+		html: html,
+		xml: html,
+		json: json,
+		yaml: yaml,
+		yml: yaml,
+		sql: sql,
+		bash: bash,
+		sh: bash,
+		shell: bash,
+		powershell: powershell,
+		ps1: powershell,
+		dockerfile: dockerfile,
+		docker: dockerfile,
+		markdown: markdown,
+		md: markdown
+	};
+
+	const selectedLanguage = $derived(languageMap[language.toLowerCase()] || null);
+	const displayLanguage = $derived(language.toUpperCase());
+
+	let copied = $state(false);
+
+	async function copyCode() {
+		try {
+			await navigator.clipboard.writeText(code);
+			copied = true;
+			// Reset after 2 seconds
+			setTimeout(() => {
+				copied = false;
+			}, 2000);
+		} catch (err) {
+			console.error('Failed to copy code:', err);
+		}
+	}
+</script>
+
+<svelte:head>
+	{@html githubDark}
+</svelte:head>
+
+<div class="code-renderer my-4 overflow-hidden rounded-lg border border-gray-700 bg-gray-900 {className}">
+	<!-- Header -->
+	<div class="flex items-center justify-between bg-gray-800 px-4 py-2 border-b border-gray-700">
+		<span class="text-xs font-medium text-gray-300 uppercase tracking-wide">
+			{displayLanguage}
+		</span>
+		<button
+			onclick={copyCode}
+			class="flex items-center gap-1.5 rounded px-2 py-1 text-xs transition-all duration-200 {copied 
+				? 'text-green-400 border border-green-500 bg-green-500/10' 
+				: 'text-gray-400 hover:bg-gray-700 hover:text-gray-200'}"
+			title={copied ? "Copied!" : "Copy code"}
+		>
+			{#if copied}
+				<!-- Checkmark icon -->
+				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+				</svg>
+				Copied!
+			{:else}
+				<!-- Copy icon -->
+				<svg class="h-4 w-4" 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" />
+				</svg>
+				Copy
+			{/if}
+		</button>
+	</div>
+
+	<!-- Code Content -->
+	<div class="relative">
+		{#if selectedLanguage}
+			<Highlight language={selectedLanguage} {code} />
+		{:else}
+			<HighlightAuto {code} />
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* Override highlight.js styles for consistent theming */
+	:global(.code-renderer .hljs) {
+		color: #e6edf3 !important;
+		margin: 0 !important;
+		font-size: 0.875rem;
+		line-height: 1.6;
+		overflow-x: auto;
+	}
+
+	:global(.code-renderer pre) {
+		margin: 0 !important;
+		background: transparent !important;
+	}
+
+	/* Ensure consistent scrollbar styling */
+	:global(.code-renderer .hljs::-webkit-scrollbar) {
+		height: 8px;
+	}
+
+	:global(.code-renderer .hljs::-webkit-scrollbar-track) {
+		background: #21262d;
+	}
+
+	:global(.code-renderer .hljs::-webkit-scrollbar-thumb) {
+		background: #484f58;
+		border-radius: 4px;
+	}
+
+	:global(.code-renderer .hljs::-webkit-scrollbar-thumb:hover) {
+		background: #6e7681;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    code: string;
+    language?: string;
+    class?: string;
+}
+declare const CodeRenderer: import("svelte").Component<Props, {}, "">;
+type CodeRenderer = ReturnType<typeof CodeRenderer>;
+export default CodeRenderer;

package/dist/ai/ComposeDropdown.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+	import { tv } from 'tailwind-variants';
+	import Toggle from '../forms/Toggle.svelte';
+	import { Size } from '../variants.js';
+	import type { VariantColors } from '../index.js';
+
+	interface ComposeDropdownProps {
+		disabled?: boolean;
+		isAdapterConfigured?: boolean;
+		thinkingMode?: boolean;
+		onThinkingToggle?: (enabled: boolean) => void;
+	}
+
+	let {
+		disabled = false,
+		isAdapterConfigured = true,
+		thinkingMode = $bindable(false),
+		onThinkingToggle
+	}: ComposeDropdownProps = $props();
+
+	let isOpen = $state(false);
+	let dropdownRef: HTMLDivElement | undefined = $state();
+
+	// Mock models data - will be replaced with real data later
+	const models = [
+		{ id: 'gpt-4', name: 'GPT-4', provider: 'OpenAI' },
+		{ id: 'gpt-3.5-turbo', name: 'GPT-3.5 Turbo', provider: 'OpenAI' },
+		{ id: 'claude-3', name: 'Claude 3', provider: 'Anthropic' }
+	];
+
+	const plusButton = tv({
+		base: 'flex h-10 w-10 items-center justify-center rounded-full transition-all duration-200',
+		variants: {
+			state: {
+				disabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
+				enabled: 'bg-gray-200 text-gray-600 hover:bg-gray-300 hover:text-gray-800 focus:ring-2 focus:ring-gray-300/50'
+			}
+		}
+	});
+
+	const dropdown = tv({
+		base: 'absolute bottom-12 left-0 z-50 w-64 bg-white border border-gray-200 rounded-lg shadow-lg py-2',
+		variants: {
+			visible: {
+				true: 'opacity-100 scale-100',
+				false: 'opacity-0 scale-95 pointer-events-none'
+			}
+		}
+	});
+
+	const menuItem = tv({
+		base: 'flex items-center px-4 py-2 text-sm transition-colors',
+		variants: {
+			state: {
+				enabled: 'text-gray-700 hover:bg-gray-50 cursor-pointer',
+				disabled: 'text-gray-400 cursor-not-allowed'
+			},
+			layout: {
+				default: 'justify-between',
+				full: 'justify-start'
+			}
+		}
+	});
+
+	const plusButtonClasses = $derived(
+		plusButton({
+			state: disabled || !isAdapterConfigured ? 'disabled' : 'enabled'
+		})
+	);
+
+	const dropdownClasses = $derived(
+		dropdown({
+			visible: isOpen
+		})
+	);
+
+	function toggleDropdown() {
+		if (disabled || !isAdapterConfigured) return;
+		isOpen = !isOpen;
+	}
+
+	// Watch for thinkingMode changes and call the callback
+	$effect(() => {
+		onThinkingToggle?.(thinkingMode);
+	});
+
+	function closeDropdown() {
+		isOpen = false;
+	}
+
+	// Close dropdown when clicking outside
+	function handleClickOutside(event: MouseEvent) {
+		if (dropdownRef && !dropdownRef.contains(event.target as Node)) {
+			closeDropdown();
+		}
+	}
+
+	$effect(() => {
+		if (isOpen) {
+			document.addEventListener('click', handleClickOutside);
+			return () => {
+				document.removeEventListener('click', handleClickOutside);
+			};
+		}
+	});
+</script>
+
+<div class="relative" bind:this={dropdownRef}>
+	<!-- Plus Button -->
+	<button
+		class={plusButtonClasses}
+		onclick={toggleDropdown}
+		disabled={disabled || !isAdapterConfigured}
+		aria-label="Compose options"
+		aria-expanded={isOpen}
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="0.7em"
+			height="0.7em"
+			viewBox="0 0 20 20"
+			class="w-5 h-5"
+		>
+			<path fill="currentColor" d="M10 2.25a.75.75 0 0 1 .75.75v6.25H17a.75.75 0 0 1 0 1.5h-6.25V17a.75.75 0 0 1-1.5 0v-6.25H3a.75.75 0 0 1 0-1.5h6.25V3a.75.75 0 0 1 .75-.75"/>
+		</svg>
+	</button>
+
+	<!-- Dropdown Menu -->
+	<div class={dropdownClasses}>
+		<!-- Models Section -->
+		<div class="px-4 py-2 border-b border-gray-100">
+			<h3 class="text-xs font-medium text-gray-500 uppercase tracking-wide">Models</h3>
+		</div>
+		
+		{#each models as model}
+			<div class={menuItem({ state: 'disabled', layout: 'default' })}>
+				<div class="flex flex-col">
+					<span class="font-medium">{model.name}</span>
+					<span class="text-xs text-gray-400">{model.provider}</span>
+				</div>
+				<div class="text-xs text-gray-400">Disabled</div>
+			</div>
+		{/each}
+
+		<!-- Divider -->
+		<div class="border-t border-gray-100 my-2"></div>
+
+		<!-- Thinking Mode Option -->
+		<div class="px-4 py-2 border-b border-gray-100">
+			<h3 class="text-xs font-medium text-gray-500 uppercase tracking-wide">Options</h3>
+		</div>
+		
+		<div class={menuItem({ state: 'enabled', layout: 'full' }) + ' w-full cursor-pointer'}>
+			<div class="flex items-center justify-between w-full">
+				<div class="flex flex-col items-start">
+					<span class="font-medium">Thinking Mode</span>
+					<span class="text-xs text-gray-500">Show reasoning process</span>
+				</div>
+				<div class="flex items-center ml-4">
+					<Toggle
+						name="thinking-mode"
+						bind:value={thinkingMode}
+						size={Size.BASE}
+						color="primary"
+						class="ml-2"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,9 @@
+interface ComposeDropdownProps {
+    disabled?: boolean;
+    isAdapterConfigured?: boolean;
+    thinkingMode?: boolean;
+    onThinkingToggle?: (enabled: boolean) => void;
+}
+declare const ComposeDropdown: import("svelte").Component<ComposeDropdownProps, {}, "thinkingMode">;
+type ComposeDropdown = ReturnType<typeof ComposeDropdown>;
+export default ComposeDropdown;

package/dist/ai/MermaidRenderer.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { Mermaid } from '@friendofsvelte/mermaid';
+	import type { MermaidConfig } from '@friendofsvelte/mermaid';
+
+	interface Props {
+		diagram: string;
+		class?: string;
+	}
+
+	let { diagram, class: className = '' }: Props = $props();
+
+	// Mermaid configuration with multiple node colors like your image
+	const config: MermaidConfig = {
+		theme: 'base',
+		themeVariables: {
+			// Background and typography
+			background: '#ffffff',
+			fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+			fontSize: '14px',
+			
+			// Default node styling
+			primaryColor: '#E8F4FD',
+			primaryTextColor: '#2C3E50',
+			primaryBorderColor: '#B8D4F0',
+			
+			// Lines and connections
+			lineColor: '#7F8C8D',
+			textColor: '#2C3E50',
+			defaultLinkColor: '#7F8C8D',
+			edgeLabelBackground: '#ffffff',
+			
+			// Color scale for different node types (matching your image)
+			cScale0: '#E8F4FD',  // Light blue - Frontend code, Tauri build
+			cScale1: '#E8F5E8',  // Light green - Bundler, App binary
+			cScale2: '#FFF2E8',  // Light orange - Dist assets
+			cScale3: '#F0E8FF',  // Light purple - Rust code
+			cScale4: '#FFFDE8',  // Light yellow - Installer
+			cScale5: '#F8F8F8',  // Light gray - fallback
+			cScale6: '#E0E0E0',  // Medium gray - borders
+			cScale7: '#2C3E50',  // Dark text
+			cScale8: '#7F8C8D',  // Line color
+			cScale9: '#FFFFFF',  // White background
+			
+			// Node styling
+			nodeBorder: '#B8D4F0',
+			nodeTextColor: '#2C3E50'
+		},
+		flowchart: {
+			useMaxWidth: true,
+			htmlLabels: true,
+			curve: 'basis',
+			nodeSpacing: 50,
+			rankSpacing: 80,
+			padding: 20,
+			diagramPadding: 20
+		},
+		sequence: {
+			useMaxWidth: true,
+			actorMargin: 50
+		},
+		gantt: {
+			useMaxWidth: true
+		}
+	};
+</script>
+
+<div class="mermaid-rounded">
+	<Mermaid string={diagram} {config}>
+		{#snippet error(errorObj)}
+			<div class="rounded-lg border border-red-200 bg-red-50 p-4">
+				<div class="flex items-center gap-2 text-red-800">
+					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+					</svg>
+					<span class="font-medium">Failed to render Mermaid diagram</span>
+				</div>
+				<p class="mt-2 text-sm text-red-700">${errorObj.message}</p>
+			</div>
+		{/snippet}
+	</Mermaid>
+</div>
+
+<style>
+	/* Minimal CSS for rounded edges - only what config can't do */
+	:global(.mermaid-rounded .node rect) {
+		rx: 8px !important;
+		ry: 8px !important;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+interface Props {
+    diagram: string;
+    class?: string;
+}
+declare const MermaidRenderer: import("svelte").Component<Props, {}, "">;
+type MermaidRenderer = ReturnType<typeof MermaidRenderer>;
+export default MermaidRenderer;