refactor: Cleanup

Author: allozaur

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

@@ -8,12 +8,12 @@
 	import { supportsAudio, supportsVision } from '$lib/stores/server.svelte';
 
 	interface Props {
+		class?: string;
 		disabled?: boolean;
 		onFileUpload?: (fileType?: FileTypeCategory) => void;
-		class?: string;
 	}
 
-	let { disabled = false, onFileUpload, class: className = '' }: Props = $props();
+	let { class: className = '', disabled = false, onFileUpload }: Props = $props();
 
 	const fileUploadTooltipText = $derived.by(() => {
 		return !supportsVision()
@@ -32,9 +32,9 @@
 			<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
 				<Tooltip.Trigger>
 					<Button
-						type="button"
 						class="file-upload-button h-8 w-8 rounded-full bg-transparent p-0 text-muted-foreground hover:bg-foreground/10 hover:text-foreground"
 						{disabled}
+						type="button"
 					>
 						<span class="sr-only">Attach files</span>
 

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
 	import { Mic } from '@lucide/svelte';
-	import { supportsAudio } from '$lib/stores/server.svelte';
+	import { Button } from '$lib/components/ui/button';
 	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { supportsAudio } from '$lib/stores/server.svelte';
 
 	interface Props {
 		class?: string;
@@ -25,16 +25,17 @@
 	<Tooltip.Root delayDuration={100}>
 		<Tooltip.Trigger>
 			<Button
-				type="button"
 				class="h-8 w-8 rounded-full p-0 {isRecording
 					? 'animate-pulse bg-red-500 text-white hover:bg-red-600'
 					: 'bg-transparent text-muted-foreground hover:bg-foreground/10 hover:text-foreground'} {!supportsAudio()
 					? 'cursor-not-allowed opacity-50'
 					: ''}"
 				disabled={disabled || isLoading || !supportsAudio()}
 				onclick={onMicClick}
+				type="button"
 			>
 				<span class="sr-only">{isRecording ? 'Stop recording' : 'Start recording'}</span>
+
 				<Mic class="h-4 w-4" />
 			</Button>
 		</Tooltip.Trigger>

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

@@ -3,22 +3,22 @@
 
 	interface Props {
 		accept?: string;
+		class?: string;
 		multiple?: boolean;
 		onFileSelect?: (files: File[]) => void;
-		class?: string;
 	}
 
 	let {
 		accept = $bindable(),
+		class: className = '',
 		multiple = true,
-		onFileSelect,
-		class: className = ''
+		onFileSelect
 	}: Props = $props();
 
 	let fileInputElement: HTMLInputElement | undefined;
 
 	// Use modality-aware accept string by default, but allow override
-	const finalAccept = $derived(accept ?? generateModalityAwareAcceptString());
+	let finalAccept = $derived(accept ?? generateModalityAwareAcceptString());
 
 	export function click() {
 		fileInputElement?.click();

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

@@ -49,11 +49,11 @@
 		bind:this={textareaElement}
 		bind:value
 		class="text-md max-h-32 min-h-12 w-full resize-none border-0 bg-transparent p-0 leading-6 outline-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0"
+		class:cursor-not-allowed={disabled}
+		{disabled}
 		onkeydown={onKeydown}
 		oninput={(event) => autoResizeTextarea(event.currentTarget)}
 		onpaste={onPaste}
 		{placeholder}
-		{disabled}
-		class:cursor-not-allowed={disabled}
 	></textarea>
 </div>

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte

@@ -7,39 +7,38 @@
 		ChatMessageThinkingBlock,
 		MarkdownContent
 	} from '$lib/components/app';
-	import { inputClasses } from '$lib/constants/input-classes';
-	import type { MessageSiblingInfo } from '$lib/utils/branching';
 	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { inputClasses } from '$lib/constants/input-classes';
+	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
+	import { getDeletionInfo, isLoading } from '$lib/stores/chat.svelte';
+	import type { MessageSiblingInfo } from '$lib/utils/branching';
 	import { copyToClipboard } from '$lib/utils/copy';
 	import { parseThinkingContent } from '$lib/utils/thinking';
-	import { getDeletionInfo } from '$lib/stores/chat.svelte';
-	import { isLoading } from '$lib/stores/chat.svelte';
-	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
 	import type { Component } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import MessageBranchingControls from './MessageBranchingControls.svelte';
 
 	interface Props {
 		class?: string;
 		message: DatabaseMessage;
-		siblingInfo?: MessageSiblingInfo | null;
 		onCopy?: (message: DatabaseMessage) => void;
 		onDelete?: (message: DatabaseMessage) => void;
-		onNavigateToSibling?: (siblingId: string) => void;
 		onEditWithBranching?: (message: DatabaseMessage, newContent: string) => void;
+		onNavigateToSibling?: (siblingId: string) => void;
 		onRegenerateWithBranching?: (message: DatabaseMessage) => void;
+		siblingInfo?: MessageSiblingInfo | null;
 	}
 
 	let {
 		class: className = '',
 		message,
-		siblingInfo = null,
 		onCopy,
 		onDelete,
-		onNavigateToSibling,
 		onEditWithBranching,
-		onRegenerateWithBranching
+		onNavigateToSibling,
+		onRegenerateWithBranching,
+		siblingInfo = null
 	}: Props = $props();
 
 	let showDeleteDialog = $state(false);
@@ -77,14 +76,24 @@
 		return message.content?.replace('<|channel|>analysis', '');
 	});
 
+	function handleCancelEdit() {
+		isEditing = false;
+		editedContent = message.content;
+	}
+
+	function handleConfirmDelete() {
+		onDelete?.(message);
+		showDeleteDialog = false;
+	}
+
 	async function handleCopy() {
 		await copyToClipboard(message.content, 'Message copied to clipboard');
 		onCopy?.(message);
 	}
 
-	function handleCancelEdit() {
-		isEditing = false;
-		editedContent = message.content;
+	async function handleDelete() {
+		deletionInfo = await getDeletionInfo(message.id);
+		showDeleteDialog = true;
 	}
 
 	function handleEdit() {
@@ -121,47 +130,39 @@
 		}
 		isEditing = false;
 	}
-
-	async function handleDelete() {
-		deletionInfo = await getDeletionInfo(message.id);
-		showDeleteDialog = true;
-	}
-
-	function handleConfirmDelete() {
-		onDelete?.(message);
-		showDeleteDialog = false;
-	}
 </script>
 
 {#if message.role === 'user'}
 	<div
+		aria-label="User message with actions"
 		class="group flex flex-col items-end gap-2 {className}"
 		role="group"
-		aria-label="User message with actions"
 	>
 		{#if isEditing}
 			<div class="w-full max-w-[80%]">
 				<textarea
 					bind:this={textareaElement}
 					bind:value={editedContent}
-					onkeydown={handleEditKeydown}
 					class="min-h-[60px] w-full resize-none rounded-2xl px-3 py-2 text-sm {inputClasses}"
+					onkeydown={handleEditKeydown}
 					placeholder="Edit your message..."
 				></textarea>
 
 				<div class="mt-2 flex justify-end gap-2">
-					<Button variant="outline" size="sm" class="h-8 px-3" onclick={handleCancelEdit}>
+					<Button class="h-8 px-3" onclick={handleCancelEdit} size="sm" variant="outline" >
 						<X class="mr-1 h-3 w-3" />
+
 						Cancel
 					</Button>
 
 					<Button
-						size="sm"
 						class="h-8 px-3"
 						onclick={handleSaveEdit}
 						disabled={!editedContent.trim() || editedContent === message.content}
+						size="sm"
 					>
 						<Check class="mr-1 h-3 w-3" />
+
 						Send
 					</Button>
 				</div>