feat: Chat Form improvements

Author: allozaur

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ChatAttachmentsList } from '$lib/components/app';
-	import { ChatFormActionButtons, ChatFormFileInput, ChatFormHelperText, ChatFormTextarea } from '$lib/components/app';
+	import { ChatFormActionButtons, ChatFormFileInputInvisible, ChatFormHelperText, ChatFormTextarea } from '$lib/components/app';
 	import { inputClasses } from '$lib/constants/input-classes';
 	import { onMount } from 'svelte';
 	import { config } from '$lib/stores/settings.svelte';
@@ -34,7 +34,7 @@
 	const pasteLongTextToFileLength = $derived(Number(currentConfig.pasteLongTextToFileLen) || 2500);
 
 	let message = $state('');
-	let fileInputRef: ChatFormFileInput | undefined;
+	let fileInputRef: ChatFormFileInputInvisible | undefined;
 	let previousIsLoading = $state(isLoading);
 	let textareaRef: ChatFormTextarea | undefined;
 
@@ -137,7 +137,7 @@
 	}
 </script>
 
-<ChatFormFileInput bind:this={fileInputRef} onFileSelect={handleFileSelect} />
+<ChatFormFileInputInvisible bind:this={fileInputRef} onFileSelect={handleFileSelect} />
 
 <form
 	onsubmit={handleSubmit}
@@ -153,7 +153,7 @@
 			bind:this={textareaRef}
 			bind:value={message}
 			onKeydown={handleKeydown}
-			{disabled}
+			disabled={isLoading}
 		/>
 
 		<ChatFormActionButtons

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActionButtons.svelte

@@ -26,39 +26,41 @@
 <div class="flex items-center justify-between gap-1 {className}">
 	<Button
 		type="button"
-		variant="ghost"
-		class="text-muted-foreground hover:text-foreground h-8 w-8 rounded-full p-0"
+		class="text-muted-foreground bg-transparent hover:bg-foreground/10 hover:text-foreground h-8 w-8 rounded-full p-0"
 		disabled={disabled || isLoading}
 		onclick={onFileUpload}
 	>
+		<span class="sr-only">Attach files</span>
 		<Paperclip class="h-4 w-4" />
 	</Button>
 
-	<div>
+	<div class="flex gap-2">
 		{#if isLoading}
 			<Button
 				type="button"
-				variant="ghost"
 				onclick={onStop}
-				class="text-muted-foreground hover:text-destructive h-8 w-8 rounded-full p-0"
+				class="p-0 h-8 w-8 bg-transparent hover:bg-destructive/20"
 			>
-				<Square class="h-8 w-8" />
+				<span class="sr-only">Stop</span>
+				<Square class="h-8 w-8 fill-destructive stroke-destructive" />
 			</Button>
 		{:else}
 			<Button
 				type="button"
-				variant="ghost"
-				class="text-muted-foreground hover:text-foreground h-8 w-8 rounded-full p-0"
+				class="text-muted-foreground bg-transparent hover:bg-foreground/10 hover:text-foreground h-8 w-8 rounded-full p-0"
 				disabled={disabled || isLoading}
 				onclick={onMicClick}
 			>
+				<span class="sr-only">Start recording</span>
 				<Mic class="h-8 w-8" />
 			</Button>
+
 			<Button
 				type="submit"
 				disabled={!canSend || disabled || isLoading}
 				class="h-8 w-8 rounded-full p-0"
 			>
+				<span class="sr-only">Send</span>
 				<ArrowUp class="h-12 w-12" />
 			</Button>
 		{/if}

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormFileInput.svelte renamed to tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormFileInputInvisible.svelte

@@ -3,21 +3,21 @@
 	import { onMount } from 'svelte';
 
 	interface Props {
-		value?: string;
+		class?: string;
 		disabled?: boolean;
-		placeholder?: string;
 		onKeydown?: (event: KeyboardEvent) => void;
 		onPaste?: (event: ClipboardEvent) => void;
-		class?: string;
+		placeholder?: string;
+		value?: string;
 	}
 
 	let {
-		value = $bindable(''),
+		class: className = '',
 		disabled = false,
-		placeholder = 'Ask anything...',
 		onKeydown,
 		onPaste,
-		class: className = ''
+		placeholder = 'Ask anything...',
+		value = $bindable(''),
 	}: Props = $props();
 
 	let textareaElement: HTMLTextAreaElement | undefined;
@@ -48,11 +48,12 @@
 	<textarea
 		bind:this={textareaElement}
 		bind:value
+		class="placeholder:text-muted-foreground text-md max-h-32 min-h-[24px] w-full resize-none border-0 bg-transparent p-0 leading-6 outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
 		onkeydown={onKeydown}
 		oninput={(event) => autoResizeTextarea(event.currentTarget)}
 		onpaste={onPaste}
 		{placeholder}
-		class="placeholder:text-muted-foreground text-md max-h-32 min-h-[24px] w-full resize-none border-0 bg-transparent p-0 leading-6 outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
 		{disabled}
+		class:cursor-not-allowed={disabled}
 	></textarea>
 </div>

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormTextarea.svelte

@@ -7,7 +7,7 @@ export { default as ChatForm } from './chat/ChatForm/ChatForm.svelte';
 export { default as ChatFormTextarea } from './chat/ChatForm/ChatFormTextarea.svelte';
 export { default as ChatFormActionButtons } from './chat/ChatForm/ChatFormActionButtons.svelte';
 export { default as ChatFormHelperText } from './chat/ChatForm/ChatFormHelperText.svelte';
-export { default as ChatFormFileInput } from './chat/ChatForm/ChatFormFileInput.svelte';
+export { default as ChatFormFileInputInvisible } from './chat/ChatForm/ChatFormFileInputInvisible.svelte';
 
 export { default as ChatMessage } from './chat/ChatMessages/ChatMessage.svelte';
 export { default as ChatMessages } from './chat/ChatMessages/ChatMessages.svelte';

tools/server/webui/src/lib/components/app/index.ts

@@ -1,6 +1,7 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import ChatForm from '$lib/components/app/chat/ChatForm/ChatForm.svelte';
+	import { expect } from 'storybook/internal/test';
 
 	const { Story } = defineMeta({
 		title: 'Components/ChatForm',
@@ -11,4 +12,29 @@
 	});
 </script>
 
-<Story name="Default" args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }} />
+<Story
+  name="Default"
+  args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+  play={async ({ canvas, userEvent }) => {
+    const textarea = await canvas.findByRole('textbox');
+    const submitButton = await canvas.findByRole('button', { name: 'Send' });
+	
+	// Expect the input to be focused after the component is mounted
+	await expect(textarea).toHaveFocus();
+
+	// Expect the submit button to be disabled
+	await expect(submitButton).toBeDisabled();
+	
+    const text = 'What is the meaning of life?';
+
+    await userEvent.clear(textarea);
+    await userEvent.type(textarea, text);
+    
+	await expect(textarea).toHaveValue(text);
+  }}
+/>
+
+<Story
+  name="Loading"
+  args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', isLoading: true }}
+/>