@r2digisolutions/components 0.16.3 → 0.16.4

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),
@@ -220,7 +223,7 @@
 					{/if}
 				{/each}
 
-				{#if loading}
+				{#if loading && showLoadingBubble}
 					<div class="flex items-center gap-2">
 						<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"
@@ -236,14 +239,6 @@
 						</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>
@@ -254,8 +249,11 @@
 			<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 flex-1 rounded-xl 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',
+					listening ? 'border-red-400 ring-2 ring-red-500/20' : 'border-border'
+				]}
 				disabled={loading}
 				onkeydown={handleKeydown}
 				aria-label={placeholder}
@@ -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,39 @@
 
 	interface CommandPaletteProps {
 		open?: boolean;
+		query?: string;
 		items?: CommandItem[];
 		placeholder?: string;
 		emptyLabel?: string;
 		loading?: boolean;
+		voiceEnabled?: boolean;
+		listening?: 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,
+		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);
@@ -232,6 +244,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,21 @@ export interface CommandItem {
 }
 interface CommandPaletteProps {
     open?: boolean;
+    query?: string;
     items?: CommandItem[];
     placeholder?: string;
     emptyLabel?: string;
     loading?: boolean;
+    voiceEnabled?: boolean;
+    listening?: 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.16.4",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",