@r2digisolutions/components 0.16.3 → 0.17.0

package/dist/components/organisms/AssistantChat/AssistantChat.svelte

@@ -30,6 +30,8 @@
 		draft?: string;
 		loading?: boolean;
 		loadingLabel?: string;
+		/** When false, input stays disabled via `loading` but the spinner bubble is hidden (parent paints status in a message). */
+		showLoadingBubble?: boolean;
 		error?: string | null;
 		voiceEnabled?: boolean;
 		voiceOutput?: boolean;
@@ -63,6 +65,7 @@
 		draft = $bindable(''),
 		loading = false,
 		loadingLabel = 'Procesando…',
+		showLoadingBubble = true,
 		error = null,
 		voiceEnabled = true,
 		voiceOutput = $bindable(true),
@@ -131,25 +134,25 @@
 
 <div
 	class={[
-		'flex flex-col overflow-hidden rounded-2xl border border-border bg-surface-elevated shadow-xl',
-		'h-[min(560px,70vh)] w-full min-w-[320px] max-w-[420px]',
+		'rounded-2xl border-border bg-surface-elevated shadow-xl flex flex-col overflow-hidden border',
+		'h-[min(560px,70vh)] w-full max-w-[420px] min-w-[320px]',
 		className
 	]}
 	role="complementary"
 	aria-label={title}
 >
 	<!-- Header -->
-	<header class="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2.5">
+	<header class="gap-2 border-border px-3 py-2.5 flex shrink-0 items-center border-b">
 		<span
-			class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400"
+			class="h-7 w-7 rounded-lg bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400 flex shrink-0 items-center justify-center"
 			aria-hidden="true"
 		>
 			<Sparkles size={15} strokeWidth={2} />
 		</span>
 		<div class="min-w-0 flex-1">
-			<p class="truncate text-sm font-semibold text-primary">{title}</p>
+			<p class="text-sm font-semibold text-primary truncate">{title}</p>
 			{#if statusLabel}
-				<p class="truncate text-xs text-muted">{statusLabel}</p>
+				<p class="text-xs text-muted truncate">{statusLabel}</p>
 			{/if}
 		</div>
 		<IconButton variant="ghost" size="xs" label={newChatLabel} onclick={() => onnewchat?.()}>
@@ -161,22 +164,22 @@
 	</header>
 
 	<!-- Body -->
-	<div bind:this={scrollEl} class="min-h-0 flex-1 overflow-y-auto px-3 py-3">
+	<div bind:this={scrollEl} class="min-h-0 px-3 py-3 flex-1 overflow-y-auto">
 		{#if isEmpty}
-			<div class="flex flex-col items-center justify-center gap-4 py-8 text-center">
+			<div class="gap-4 py-8 flex flex-col items-center justify-center text-center">
 				<span
-					class="flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-50 text-brand-500 dark:bg-brand-950/30 dark:text-brand-400"
+					class="h-12 w-12 rounded-2xl bg-brand-50 text-brand-500 dark:bg-brand-950/30 dark:text-brand-400 flex items-center justify-center"
 					aria-hidden="true"
 				>
 					<Sparkles size={24} strokeWidth={1.5} />
 				</span>
 				<p class="text-sm text-muted">{emptyHint}</p>
 				{#if suggestions.length}
-					<div class="flex flex-wrap justify-center gap-2">
+					<div class="gap-2 flex flex-wrap justify-center">
 						{#each suggestions as suggestion (suggestion)}
 							<button
 								type="button"
-								class="rounded-full border border-border bg-surface px-3 py-1.5 text-xs text-secondary transition-colors hover:border-brand-400 hover:text-brand-600 dark:hover:text-brand-400"
+								class="border-border bg-surface px-3 py-1.5 text-xs text-secondary hover:border-brand-400 hover:text-brand-600 dark:hover:text-brand-400 rounded-full border transition-colors"
 								onclick={() => handleSuggestion(suggestion)}
 							>
 								{suggestion}
@@ -186,27 +189,27 @@
 				{/if}
 			</div>
 		{:else}
-			<div class="flex flex-col gap-3">
+			<div class="gap-3 flex flex-col">
 				{#each messages as message (message.id)}
 					{#if message.role === 'user'}
 						<div class="flex justify-end">
 							<div
-								class="max-w-[80%] rounded-2xl rounded-br-sm bg-brand-600 px-3.5 py-2.5 text-sm leading-relaxed text-white"
+								class="rounded-2xl rounded-br-sm bg-brand-600 px-3.5 py-2.5 text-sm leading-relaxed text-white max-w-[80%]"
 							>
 								{message.content}
 							</div>
 						</div>
 					{:else}
-						<div class="flex flex-col gap-1.5">
-							<div class="flex items-start gap-2">
+						<div class="gap-1.5 flex flex-col">
+							<div class="gap-2 flex items-start">
 								<span
-									class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400"
+									class="mt-0.5 h-6 w-6 bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400 flex shrink-0 items-center justify-center rounded-full"
 									aria-hidden="true"
 								>
 									<Sparkles size={12} strokeWidth={2} />
 								</span>
 								<div
-									class="max-w-[calc(100%-2rem)] rounded-2xl rounded-bl-sm bg-surface-overlay px-3.5 py-2.5 text-sm leading-relaxed text-primary"
+									class="rounded-2xl rounded-bl-sm bg-surface-overlay px-3.5 py-2.5 text-sm leading-relaxed text-primary max-w-[calc(100%-2rem)]"
 								>
 									{message.content}
 								</div>
@@ -220,48 +223,43 @@
 					{/if}
 				{/each}
 
-				{#if loading}
-					<div class="flex items-center gap-2">
+				{#if loading && showLoadingBubble}
+					<div class="gap-2 flex items-center">
 						<span
-							class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400"
+							class="h-6 w-6 bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400 flex shrink-0 items-center justify-center rounded-full"
 							aria-hidden="true"
 						>
 							<Sparkles size={12} strokeWidth={2} />
 						</span>
 						<div
-							class="flex items-center gap-2 rounded-2xl rounded-bl-sm bg-surface-overlay px-3.5 py-2.5"
+							class="gap-2 rounded-2xl rounded-bl-sm bg-surface-overlay px-3.5 py-2.5 flex items-center"
 						>
 							<LoaderCircle size={14} strokeWidth={2} class="animate-spin text-muted" />
 							<span class="text-xs text-muted">{loadingLabel}</span>
 						</div>
 					</div>
 				{/if}
-
-				{#if error}
-					<div
-						class="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600 dark:border-red-800/40 dark:bg-red-950/20 dark:text-red-400"
-					>
-						{error}
-					</div>
-				{/if}
 			</div>
 		{/if}
 	</div>
 
 	<!-- Footer -->
-	<footer class="shrink-0 border-t border-border px-3 py-2.5">
-		<div class="flex items-center gap-1.5">
+	<footer class="border-border px-3 py-2.5 shrink-0 border-t">
+		<div class="gap-1.5 flex items-center">
 			<input
 				type="text"
 				bind:value={draft}
-				{placeholder}
-				class="h-9 min-w-0 flex-1 rounded-xl border border-border bg-surface px-3 text-sm text-primary outline-none transition-shadow placeholder:text-muted focus:border-brand-400 focus:ring-2 focus:ring-brand-500/20"
+				placeholder={listening ? statusLabel || placeholder : placeholder}
+				class={[
+					'h-9 min-w-0 rounded-xl bg-surface px-3 text-sm text-primary placeholder:text-muted focus:border-brand-400 focus:ring-brand-500/20 flex-1 border transition-shadow outline-none focus:ring-2',
+					listening ? 'border-red-400 ring-red-500/20 ring-2' : 'border-border'
+				]}
 				disabled={loading}
 				onkeydown={handleKeydown}
 				aria-label={placeholder}
 			/>
 
-			<div class="flex shrink-0 items-center gap-0.5">
+			<div class="gap-0.5 flex shrink-0 items-center">
 				{#if voiceEnabled}
 					<IconButton
 						variant="ghost"
@@ -302,6 +300,10 @@
 			</div>
 		</div>
 
+		{#if error}
+			<p class="mt-1.5 px-1 text-xs text-red-600 dark:text-red-400">{error}</p>
+		{/if}
+
 		{#if footerExtra}
 			{@render footerExtra()}
 		{/if}

package/dist/components/organisms/AssistantChat/AssistantChat.svelte.d.ts

@@ -15,6 +15,8 @@ interface AssistantChatProps {
     draft?: string;
     loading?: boolean;
     loadingLabel?: string;
+    /** When false, input stays disabled via `loading` but the spinner bubble is hidden (parent paints status in a message). */
+    showLoadingBubble?: boolean;
     error?: string | null;
     voiceEnabled?: boolean;
     voiceOutput?: boolean;

package/dist/components/organisms/CommandPalette/CommandPalette.svelte

@@ -2,7 +2,9 @@
 	import type { Component } from 'svelte';
 	import { untrack } from 'svelte';
 	import Kbd from '../../atoms/Kbd/Kbd.svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
 	import { i18n } from '../../../utils/i18n.svelte';
+	import { Mic, MicOff } from '@lucide/svelte';
 
 	export type CommandIcon = Component<{
 		class?: string;
@@ -24,29 +26,42 @@
 
 	interface CommandPaletteProps {
 		open?: boolean;
+		query?: string;
 		items?: CommandItem[];
 		placeholder?: string;
 		emptyLabel?: string;
 		loading?: boolean;
+		voiceEnabled?: boolean;
+		listening?: boolean;
+		/** When false, opening keeps the current query (voice dictation). */
+		resetQueryOnOpen?: boolean;
+		micLabel?: string;
+		stopMicLabel?: string;
 		class?: string;
 		onselect?: (item: CommandItem) => void;
 		onclose?: () => void;
 		onquery?: (query: string) => void;
+		onmicclick?: () => void;
 	}
 
 	let {
 		open = $bindable(false),
+		query = $bindable(''),
 		items = [],
 		placeholder,
 		emptyLabel,
 		loading = false,
+		voiceEnabled = false,
+		listening = false,
+		resetQueryOnOpen = true,
+		micLabel = 'Hablar',
+		stopMicLabel = 'Parar micrófono',
 		class: className = '',
 		onselect,
 		onclose,
-		onquery
+		onquery,
+		onmicclick
 	}: CommandPaletteProps = $props();
-
-	let query = $state('');
 	let activeIndex = $state(0);
 	let dialogEl = $state<HTMLDialogElement | null>(null);
 	let listEl = $state<HTMLDivElement | null>(null);
@@ -129,9 +144,11 @@
 	$effect(() => {
 		if (!dialogEl) return;
 		if (open && !dialogEl.open) {
-			query = '';
+			if (resetQueryOnOpen) {
+				query = '';
+				untrack(() => onquery?.(''));
+			}
 			activeIndex = Math.max(0, firstEnabledIndex());
-			untrack(() => onquery?.(''));
 			ignoreBackdropUntil = Date.now() + 400;
 			dialogEl.showModal();
 		} else if (!open && dialogEl.open) {
@@ -232,6 +249,25 @@
 				oninput={onInput}
 				onkeydown={onKeydown}
 			/>
+			{#if voiceEnabled}
+				<IconButton
+					variant="ghost"
+					size="xs"
+					label={listening ? stopMicLabel : micLabel}
+					aria-pressed={listening}
+					onclick={(e) => {
+						e.stopPropagation();
+						onmicclick?.();
+					}}
+					class={listening ? 'text-red-500 hover:text-red-600' : 'text-muted'}
+				>
+					{#if listening}
+						<MicOff size={16} strokeWidth={2} />
+					{:else}
+						<Mic size={16} strokeWidth={2} />
+					{/if}
+				</IconButton>
+			{/if}
 			{#if loading}
 				<span
 					class="h-4 w-4 animate-spin border-border border-t-brand-500 shrink-0 rounded-full border-2"

package/dist/components/organisms/CommandPalette/CommandPalette.svelte.d.ts

@@ -17,15 +17,23 @@ export interface CommandItem {
 }
 interface CommandPaletteProps {
     open?: boolean;
+    query?: string;
     items?: CommandItem[];
     placeholder?: string;
     emptyLabel?: string;
     loading?: boolean;
+    voiceEnabled?: boolean;
+    listening?: boolean;
+    /** When false, opening keeps the current query (voice dictation). */
+    resetQueryOnOpen?: boolean;
+    micLabel?: string;
+    stopMicLabel?: string;
     class?: string;
     onselect?: (item: CommandItem) => void;
     onclose?: () => void;
     onquery?: (query: string) => void;
+    onmicclick?: () => void;
 }
-declare const CommandPalette: Component<CommandPaletteProps, {}, "open">;
+declare const CommandPalette: Component<CommandPaletteProps, {}, "open" | "query">;
 type CommandPalette = ReturnType<typeof CommandPalette>;
 export default CommandPalette;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.16.3",
+	"version": "0.17.0",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",