ui-svelte 0.2.11 → 0.2.13

package/dist/display/ChatBox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ChatState } from '../hooks/use-chat.svelte.js';
+	import type { ChatState, Message } from '../hooks/use-chat.svelte.js';
 	import {
 		Attach24RegularIcon,
 		Camera24RegularIcon,
@@ -8,27 +8,48 @@
 		Search24RegularIcon,
 		Send24RegularIcon
 	} from '../icons/index.js';
-	import { Avatar, Record, Audio, Button, Icon } from '../index.js';
+	import { Avatar, Record as RecordAudio, Audio, Button, Icon } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 	import type { Snippet } from 'svelte';
 
+	export interface PromptMessage {
+		id: string;
+		role: 'user' | 'assistant' | 'system';
+		content: string;
+		timestamp?: Date | string;
+		isStreaming?: boolean;
+		metadata?: Record<string, any>;
+	}
+
+	export interface PromptState {
+		messages: PromptMessage[];
+		isLoading: boolean;
+		isStreaming: boolean;
+		error: any;
+		sendMessage: (content: string) => Promise<void>;
+		stopGeneration?: () => void;
+	}
+
 	type Props = {
 		rootClass?: string;
-		chat: ChatState;
-		currentUserId: string;
-		variant?:
-			| 'primary'
-			| 'secondary'
-			| 'success'
-			| 'info'
-			| 'warning'
-			| 'danger'
-			| 'muted'
-			| 'outlined';
-		userName: string;
+		mode?: 'conversation' | 'prompt';
+		chat?: ChatState;
+		currentUserId?: string;
+		prompt?: PromptState;
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+		variant?: 'solid' | 'soft' | 'outlined';
+		userName?: string;
 		userAvatar?: string;
 		userStatus?: string;
+		showHeader?: boolean;
 		headerActions?: Snippet;
+		placeholder?: string;
+		showAttachments?: boolean;
+		showVoiceNote?: boolean;
+		showCamera?: boolean;
+		messageRenderer?: Snippet<[PromptMessage | Message]>;
+		assistantAvatar?: string;
+		assistantName?: string;
 		onVoiceNote?: (blob: Blob, url: string) => void;
 		onFileAttach?: (file: File) => void;
 		onCameraCapture?: () => void;
@@ -36,26 +57,68 @@
 
 	let {
 		rootClass,
+		mode = 'conversation',
 		chat,
-		currentUserId,
-		variant = 'primary',
-		userName,
+		currentUserId = '',
+		prompt,
+		color = 'primary',
+		variant = 'solid',
+		userName = '',
 		userAvatar,
 		userStatus = 'Online',
+		showHeader = true,
 		headerActions,
+		placeholder = 'Type a message...',
+		showAttachments = true,
+		showVoiceNote = true,
+		showCamera = false,
+		messageRenderer,
+		assistantAvatar,
+		assistantName = 'Assistant',
 		onVoiceNote,
 		onFileAttach,
 		onCameraCapture
 	}: Props = $props();
 
+	const colors = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		outlined: 'is-outlined'
+	};
+
 	let messageInput = $state('');
 	let messagesContainer: HTMLDivElement;
-	let fileInput: HTMLInputElement;
+	let fileInput = $state<HTMLInputElement>();
 	let isRecording = $state(false);
 
+	const isPromptMode = $derived(mode === 'prompt');
+	const messages = $derived(isPromptMode ? (prompt?.messages ?? []) : (chat?.messages ?? []));
+	const isLoading = $derived(
+		isPromptMode ? (prompt?.isLoading ?? false) : (chat?.isLoading ?? false)
+	);
+	const isSending = $derived(
+		isPromptMode ? (prompt?.isLoading ?? false) : (chat?.isSending ?? false)
+	);
+	const isStreaming = $derived(isPromptMode ? (prompt?.isStreaming ?? false) : false);
+	const hasMore = $derived(isPromptMode ? false : (chat?.hasMore ?? false));
+
 	function handleSend() {
 		if (messageInput.trim()) {
-			chat.sendMessage(messageInput);
+			if (isPromptMode && prompt) {
+				prompt.sendMessage(messageInput);
+			} else if (chat) {
+				chat.sendMessage(messageInput);
+			}
 			messageInput = '';
 			scrollToBottom();
 		}
@@ -79,7 +142,7 @@
 	function handleFileSelect(e: Event) {
 		const target = e.target as HTMLInputElement;
 		const file = target.files?.[0];
-		if (file) {
+		if (file && chat) {
 			if (onFileAttach) {
 				onFileAttach(file);
 			} else {
@@ -99,7 +162,7 @@
 	function handleRecordingComplete(blob: Blob, url: string) {
 		if (onVoiceNote) {
 			onVoiceNote(blob, url);
-		} else {
+		} else if (chat) {
 			chat.sendMessage('Voice note', 'voice', {
 				fileUrl: url,
 				fileName: 'voice-note.webm'
@@ -112,138 +175,214 @@
 		isRecording = !isRecording;
 	}
 
-	function formatTime(timestamp: Date | string) {
+	function formatTime(timestamp: Date | string | undefined) {
+		if (!timestamp) return '';
 		const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
 		return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
 	}
 
+	function isOwnMessage(message: PromptMessage | Message): boolean {
+		if (isPromptMode) {
+			return (message as PromptMessage).role === 'user';
+		}
+		return (message as Message).senderId === currentUserId;
+	}
+
+	function getMessageRole(
+		message: PromptMessage | Message
+	): 'user' | 'assistant' | 'system' | 'other' {
+		if (isPromptMode) {
+			return (message as PromptMessage).role;
+		}
+		return (message as Message).senderId === currentUserId ? 'user' : 'other';
+	}
+
 	$effect(() => {
-		if (chat.messages.length > 0) {
+		if (messages.length > 0) {
 			scrollToBottom();
 		}
 	});
 </script>
 
-<div class={cn('chatbox', `chatbox-${variant}`, rootClass)}>
-	<!-- Header -->
-	<div class="chatbox-header">
-		<div class="chatbox-header-start">
-			<Avatar src={userAvatar} alt={userName} size="sm" />
-			<div class="chatbox-header-center">
-				<div class="chatbox-header-name">{userName}</div>
-				<div class="chatbox-header-status">{userStatus}</div>
+<div
+	class={cn('chatbox', colors[color], variants[variant], isPromptMode && 'is-prompt', rootClass)}
+>
+	{#if showHeader && !isPromptMode}
+		<div class="chatbox-header">
+			<div class="chatbox-header-start">
+				<Avatar src={userAvatar} alt={userName} size="sm" />
+				<div class="chatbox-header-center">
+					<div class="chatbox-header-name">{userName}</div>
+					<div class="chatbox-header-status">{userStatus}</div>
+				</div>
+			</div>
+			<div class="chatbox-header-end">
+				{#if headerActions}
+					{@render headerActions()}
+				{:else}
+					<Button size="sm" {color} variant="ghost">
+						<Icon icon={Search24RegularIcon} />
+					</Button>
+					<Button size="sm" {color} variant="ghost">
+						<Icon icon={MoreVertical24RegularIcon} />
+					</Button>
+				{/if}
 			</div>
 		</div>
-		<div class="chatbox-header-end">
-			{#if headerActions}
-				{@render headerActions()}
-			{:else}
-				<Button size="sm" variant="ghost">
-					<Icon icon={Search24RegularIcon} />
-				</Button>
-				<Button size="sm" variant="ghost">
-					<Icon icon={MoreVertical24RegularIcon} />
-				</Button>
-			{/if}
-		</div>
-	</div>
+	{/if}
 
-	<!-- Messages -->
 	<div class="chatbox-messages" bind:this={messagesContainer}>
-		{#if chat.hasMore}
-			<button class="load-more-btn" onclick={() => chat.loadMore()} disabled={chat.isLoading}>
-				{chat.isLoading ? 'Loading...' : 'Load more messages'}
+		{#if hasMore && chat}
+			<button class="load-more-btn" onclick={() => chat?.loadMore()} disabled={isLoading}>
+				{isLoading ? 'Loading...' : 'Load more messages'}
 			</button>
 		{/if}
 
-		{#each chat.messages as message}
-			{@const isOwn = message.senderId === currentUserId}
-			<div class="message-wrapper" class:own={isOwn}>
-				<div class="message" class:own={isOwn}>
-					{#if message.type === 'image'}
+		{#each messages as message}
+			{@const isOwn = isOwnMessage(message)}
+			{@const role = getMessageRole(message)}
+			<div
+				class="message-wrapper"
+				class:own={isOwn}
+				class:assistant={role === 'assistant'}
+				class:system={role === 'system'}
+			>
+				{#if isPromptMode && role === 'assistant'}
+					<div class="message-avatar">
+						<Avatar src={assistantAvatar} alt={assistantName} size="sm" />
+					</div>
+				{/if}
+
+				<div
+					class="message"
+					class:own={isOwn}
+					class:assistant={role === 'assistant'}
+					class:system={role === 'system'}
+				>
+					{#if messageRenderer}
+						{@render messageRenderer(message)}
+					{:else if 'type' in message && message.type === 'image'}
 						<!-- svelte-ignore a11y_img_redundant_alt -->
 						<img src={message.metadata?.fileUrl} alt="Shared image" class="message-image" />
-					{:else if message.type === ('voice' as any)}
-						<Audio
-							src={message.metadata?.fileUrl || ''}
-							variant={isOwn ? variant : ('muted' as any)}
-						/>
-					{:else if message.type === 'file'}
+					{:else if 'type' in message && message.type === ('voice' as any)}
+						<Audio src={message.metadata?.fileUrl || ''} color={isOwn ? color : 'muted'} />
+					{:else if 'type' in message && message.type === 'file'}
 						<div class="message-file">
 							<span class="message-file-icon">📎</span>
 							<span class="message-file-name">{message.metadata?.fileName || 'File'}</span>
 						</div>
 					{:else}
-						<div class="message-content">{message.content}</div>
+						<div class="message-content">
+							{message.content}
+							{#if isPromptMode && (message as PromptMessage).isStreaming}
+								<span class="streaming-cursor">▊</span>
+							{/if}
+						</div>
 					{/if}
 
-					<div class="message-meta">
-						<span class="message-time">{formatTime(message.timestamp)}</span>
-						{#if isOwn}
-							<span class="message-status">
-								{#if message.status === 'sending'}⏱{/if}
-								{#if message.status === 'sent'}✓{/if}
-								{#if message.status === 'delivered'}✓✓{/if}
-								{#if message.status === 'read'}
-									<span class="message-status-read">✓✓</span>
-								{/if}
-								{#if message.status === 'error'}⚠{/if}
-							</span>
-						{/if}
-					</div>
+					{#if !isPromptMode || role !== 'system'}
+						<div class="message-meta">
+							<span class="message-time"
+								>{formatTime('timestamp' in message ? message.timestamp : undefined)}</span
+							>
+							{#if !isPromptMode && isOwn && 'status' in message}
+								<span class="message-status">
+									{#if message.status === 'sending'}⏱{/if}
+									{#if message.status === 'sent'}✓{/if}
+									{#if message.status === 'delivered'}✓✓{/if}
+									{#if message.status === 'read'}
+										<span class="message-status-read">✓✓</span>
+									{/if}
+									{#if message.status === 'error'}⚠{/if}
+								</span>
+							{/if}
+						</div>
+					{/if}
 				</div>
+
+				{#if isPromptMode && role === 'user'}
+					<div class="message-avatar">
+						<Avatar src={userAvatar} alt="You" size="sm" />
+					</div>
+				{/if}
 			</div>
 		{/each}
+
+		{#if isStreaming}
+			<div class="message-wrapper assistant">
+				<div class="message-avatar">
+					<Avatar src={assistantAvatar} alt={assistantName} size="sm" />
+				</div>
+				<div class="message assistant">
+					<div class="typing-indicator">
+						<span></span>
+						<span></span>
+						<span></span>
+					</div>
+				</div>
+			</div>
+		{/if}
 	</div>
 
-	<!-- Recording Overlay -->
-	{#if isRecording}
+	{#if isRecording && !isPromptMode}
 		<div class="chatbox-record-overlay">
-			<Record name="voice-note" {variant} onRecordingComplete={handleRecordingComplete} />
+			<RecordAudio name="voice-note" {color} onRecordingComplete={handleRecordingComplete} />
 		</div>
 	{/if}
 
-	<!-- Footer -->
 	<div class="chatbox-footer">
 		<label class="chatbox-input-wrapper">
 			<label class="flex-1">
 				<input
 					bind:value={messageInput}
-					placeholder="Type a message..."
+					{placeholder}
 					onkeydown={handleKeyPress}
-					disabled={chat.isSending}
+					disabled={isSending}
 					class="chatbox-input"
 				/>
 			</label>
 
-			<div class="chatbox-input-actions">
-				<Button size="sm" variant="ghost" onclick={toggleRecording}>
-					<Icon icon={Microphone2LinearIcon} />
+			{#if !isPromptMode}
+				<div class="chatbox-input-actions">
+					{#if showVoiceNote}
+						<Button size="sm" {color} variant="ghost" onclick={toggleRecording}>
+							<Icon icon={Microphone2LinearIcon} />
+						</Button>
+					{/if}
+					{#if showAttachments}
+						<Button size="sm" {color} variant="ghost" onclick={() => fileInput?.click()}>
+							<Icon icon={Attach24RegularIcon} />
+						</Button>
+						<input
+							type="file"
+							bind:this={fileInput}
+							onchange={handleFileSelect}
+							style="display: none"
+						/>
+					{/if}
+					{#if showCamera && onCameraCapture}
+						<Button size="sm" {color} variant="ghost" onclick={onCameraCapture}>
+							<Icon icon={Camera24RegularIcon} />
+						</Button>
+					{/if}
+				</div>
+			{/if}
+
+			{#if isPromptMode && isStreaming && prompt?.stopGeneration}
+				<Button size="sm" color="danger" variant="soft" onclick={() => prompt?.stopGeneration?.()}>
+					Stop
 				</Button>
-				<Button size="sm" variant="ghost" onclick={() => fileInput.click()}>
-					<Icon icon={Attach24RegularIcon} />
+			{:else}
+				<Button
+					size="sm"
+					{color}
+					variant={variant === 'outlined' ? 'outlined' : 'solid'}
+					onclick={handleSend}
+					isDisabled={isSending || !messageInput.trim()}
+				>
+					<Icon icon={Send24RegularIcon} />
 				</Button>
-				<input
-					type="file"
-					bind:this={fileInput}
-					onchange={handleFileSelect}
-					style="display: none"
-				/>
-				{#if onCameraCapture}
-					<Button size="sm" variant="ghost" onclick={onCameraCapture}>
-						<Icon icon={Camera24RegularIcon} />
-					</Button>
-				{/if}
-			</div>
-
-			<Button
-				size="sm"
-				{variant}
-				onclick={handleSend}
-				isDisabled={chat.isSending || !messageInput.trim()}
-			>
-				<Icon icon={Send24RegularIcon} />
-			</Button>
+			{/if}
 		</label>
 	</div>
 </div>

package/dist/display/ChatBox.svelte.d.ts

@@ -1,14 +1,41 @@
-import type { ChatState } from '../hooks/use-chat.svelte.js';
+import type { ChatState, Message } from '../hooks/use-chat.svelte.js';
 import type { Snippet } from 'svelte';
+export interface PromptMessage {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    timestamp?: Date | string;
+    isStreaming?: boolean;
+    metadata?: Record<string, any>;
+}
+export interface PromptState {
+    messages: PromptMessage[];
+    isLoading: boolean;
+    isStreaming: boolean;
+    error: any;
+    sendMessage: (content: string) => Promise<void>;
+    stopGeneration?: () => void;
+}
 type Props = {
     rootClass?: string;
-    chat: ChatState;
-    currentUserId: string;
-    variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'muted' | 'outlined';
-    userName: string;
+    mode?: 'conversation' | 'prompt';
+    chat?: ChatState;
+    currentUserId?: string;
+    prompt?: PromptState;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    variant?: 'solid' | 'soft' | 'outlined';
+    userName?: string;
     userAvatar?: string;
     userStatus?: string;
+    showHeader?: boolean;
     headerActions?: Snippet;
+    placeholder?: string;
+    showAttachments?: boolean;
+    showVoiceNote?: boolean;
+    showCamera?: boolean;
+    messageRenderer?: Snippet<[PromptMessage | Message]>;
+    assistantAvatar?: string;
+    assistantName?: string;
     onVoiceNote?: (blob: Blob, url: string) => void;
     onFileAttach?: (file: File) => void;
     onCameraCapture?: () => void;

package/dist/display/Chip.svelte

@@ -2,14 +2,16 @@
 	import { cn } from '../utils/class-names.js';
 	import type { Snippet } from 'svelte';
 	import type { IconData } from './Icon.svelte';
-	import { Icon } from '../index.js';
+	import { Icon, IconButton } from '../index.js';
+	import { Dismiss24RegularIcon } from '../icons/index.js';
 
 	type Props = {
 		children: Snippet;
 		onclose?: () => void;
 		type?: 'solid' | 'soft';
-		variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
-		size?: 'sm' | 'md' | 'lg';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft' | 'outlined' | 'overlay';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		class?: string;
 		startIcon?: IconData;
 		endIcon?: IconData;
@@ -20,40 +22,47 @@
 	const {
 		children,
 		onclose,
-		variant = 'primary',
-		size = 'sm',
+		color = 'primary',
+		variant = 'solid',
+		size = 'md',
 		class: className,
 		startIcon,
-		endIcon,
-		hasShadow,
-		isSolid
+		endIcon
 	}: Props = $props();
 
-	const variants = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
 		success: 'is-success',
 		info: 'is-info',
-		warning: 'is-warning',
-		danger: 'is-danger'
+		danger: 'is-danger',
+		warning: 'is-warning'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		outlined: 'is-outlined',
+		overlay: 'is-overlay'
 	};
 
 	const sizes = {
+		xs: 'is-xs',
 		sm: 'is-sm',
 		md: 'is-md',
-		lg: 'is-lg'
+		lg: 'is-lg',
+		xl: 'is-xl'
 	};
 </script>
 
-<button
-	onclick={() => onclose?.()}
+<div
 	class={cn(
 		'chip',
 		variants[variant],
 		sizes[size],
-		isSolid && 'is-solid',
-		hasShadow && 'has-shadow',
+		colors[color],
+		onclose && 'has-close',
 		className
 	)}
 >
@@ -64,4 +73,9 @@
 	{#if endIcon}
 		<Icon icon={endIcon} />
 	{/if}
-</button>
+	{#if onclose}
+		<button class="chip-close" onclick={() => onclose?.()}>
+			<Icon icon={Dismiss24RegularIcon} />
+		</button>
+	{/if}
+</div>

package/dist/display/Chip.svelte.d.ts

@@ -4,8 +4,9 @@ type Props = {
     children: Snippet;
     onclose?: () => void;
     type?: 'solid' | 'soft';
-    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
-    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft' | 'outlined' | 'overlay';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     class?: string;
     startIcon?: IconData;
     endIcon?: IconData;

package/dist/display/Code.svelte

@@ -13,16 +13,18 @@
 		darkTheme?: string;
 		disableCopy?: boolean;
 		hideLang?: boolean;
+		copyContent?: string;
 		class?: string;
 	};
 
 	let {
 		code,
 		lang,
-		lightTheme = 'catppuccin-latte',
+		lightTheme = 'github-light',
 		darkTheme = 'catppuccin-frappe',
 		disableCopy,
 		hideLang,
+		copyContent,
 		class: className
 	}: Props = $props();
 
@@ -46,7 +48,7 @@
 	const clipboard = useClipboard();
 
 	const handleCopy = () => {
-		clipboard.copy(code);
+		clipboard.copy(copyContent ?? code);
 	};
 </script>
 
@@ -59,14 +61,15 @@
 	{#if open}
 		{#if (!hover && !hideLang && !clipboard.copied) || (disableCopy && !hideLang)}
 			<div class="code-info">
-				<Chip variant="muted">{lang}</Chip>
+				<Chip color="muted" variant="solid" size="xs">{lang}</Chip>
 			</div>
 		{/if}
 		{#if (hover && !disableCopy) || clipboard.copied || (!disableCopy && hideLang)}
 			<div class="code-info">
 				<IconButton
 					onclick={handleCopy}
-					variant="muted"
+					variant="solid"
+					color="muted"
 					size="sm"
 					icon={clipboard.copied ? Checkmark24RegularIcon : Copy24RegularIcon}
 				/>

package/dist/display/Code.svelte.d.ts

@@ -5,6 +5,7 @@ type Props = {
     darkTheme?: string;
     disableCopy?: boolean;
     hideLang?: boolean;
+    copyContent?: string;
     class?: string;
 };
 declare const Code: import("svelte").Component<Props, {}, "">;