feat: UI/UX improvements

Author: allozaur

tools/server/public/index.html

@@ -23,7 +23,7 @@
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
 		"@internationalized/date": "^3.8.2",
-		"@lucide/svelte": "^0.525.0",
+		"@lucide/svelte": "^0.515.0",
 		"@playwright/test": "^1.49.1",
 		"@storybook/addon-a11y": "^9.0.17",
 		"@storybook/addon-docs": "^9.0.17",

tools/server/webui/package-lock.json

@@ -57,11 +57,6 @@
 		previewDialogOpen = true;
 	}
 
-	function closePreview() {
-		previewDialogOpen = false;
-		previewItem = null;
-	}
-
 	function getDisplayItems() {
 		const items: Array<{
 			id: string;
@@ -135,7 +130,7 @@
 </script>
 
 {#if displayItems.length > 0}
-	<div class="flex flex-wrap items-start gap-3 {className}">
+	<div class="flex flex-wrap items-start justify-end gap-3 {className}">
 		{#each displayItems as item (item.id)}
 			{#if item.isImage && item.preview}
 				<ChatAttachmentImagePreview
@@ -171,7 +166,6 @@
 {#if previewItem}
 	<ChatAttachmentPreviewDialog
 		bind:open={previewDialogOpen}
-		onClose={closePreview}
 		uploadedFile={previewItem.uploadedFile}
 		attachment={previewItem.attachment}
 		preview={previewItem.preview}

tools/server/webui/package.json

@@ -4,6 +4,7 @@
 	import { Square, Paperclip, Mic, ArrowUp, Upload, X } from '@lucide/svelte';
 	import type { ChatUploadedFile } from '$lib/types/chat.d.ts';
 	import { ChatAttachmentsList } from '$lib/components';
+	import { inputClasses } from '$lib/constants/input-classes';
 
 	interface Props {
 		class?: string;
@@ -39,15 +40,25 @@
 		event.preventDefault();
 		if (!message.trim() || disabled || isLoading) return;
 
-		const success = await onSend?.(message.trim(), uploadedFiles);
+		// Store the message and files before clearing
+		const messageToSend = message.trim();
+		const filesToSend = [...uploadedFiles];
 
-		if (success) {
-			message = '';
-			uploadedFiles = [];
+		// Clear the form immediately to hide message and attachments
+		message = '';
+		uploadedFiles = [];
 
-			if (textareaElement) {
-				textareaElement.style.height = 'auto';
-			}
+		if (textareaElement) {
+			textareaElement.style.height = 'auto';
+		}
+
+		// Send the message with the stored data
+		const success = await onSend?.(messageToSend, filesToSend);
+
+		// If sending failed, restore the form state
+		if (!success) {
+			message = messageToSend;
+			uploadedFiles = filesToSend;
 		}
 	}
 
@@ -57,15 +68,25 @@
 
 			if (!message.trim() || disabled || isLoading) return;
 
-			const success = await onSend?.(message.trim(), uploadedFiles);
+			// Store the message and files before clearing
+			const messageToSend = message.trim();
+			const filesToSend = [...uploadedFiles];
+
+			// Clear the form immediately to hide message and attachments
+			message = '';
+			uploadedFiles = [];
+
+			if (textareaElement) {
+				textareaElement.style.height = 'auto';
+			}
 
-			if (success) {
-				message = '';
-				uploadedFiles = [];
+			// Send the message with the stored data
+			const success = await onSend?.(messageToSend, filesToSend);
 
-				if (textareaElement) {
-					textareaElement.style.height = 'auto';
-				}
+			// If sending failed, restore the form state
+			if (!success) {
+				message = messageToSend;
+				uploadedFiles = filesToSend;
 			}
 		}
 	}
@@ -127,7 +148,7 @@
 
 <form
 	onsubmit={handleSubmit}
-	class="bg-muted/30 border-border/40 focus-within:border-primary/40 bg-background dark:bg-muted border-radius-bottom-none mx-auto max-w-4xl overflow-hidden rounded-3xl border {className}"
+	class="{inputClasses} border-radius-bottom-none mx-auto max-w-4xl overflow-hidden rounded-3xl {className}"
 >
 	<ChatAttachmentsList bind:uploadedFiles {onFileRemove} class="mb-3 px-5 pt-5" />
 

tools/server/webui/src/lib/components/chat/ChatAttachmentsList.svelte

@@ -289,7 +289,7 @@
 			class="z-999 sticky bottom-0 mx-auto mt-auto max-w-[56rem]"
 			in:slide={{ duration: 400, axis: 'y' }}
 		>
-			<div class="bg-background m-auto min-w-[56rem] rounded-t-3xl border-t pb-4">
+			<div class="bg-background m-auto min-w-[56rem] rounded-t-3xl pb-4">
 				<ChatForm
 					isLoading={isLoading()}
 					showHelperText={false}

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

@@ -11,7 +11,9 @@
 	let currentChatId = $derived(page.params.id);
 	let searchQuery = $state('');
 	let filteredConversations = $derived(
-		conversations().filter((conversation: { name: string }) => conversation.name.toLowerCase().includes(searchQuery.toLowerCase()))
+		conversations().filter((conversation: { name: string }) =>
+			conversation.name.toLowerCase().includes(searchQuery.toLowerCase())
+		)
 	);
 
 	async function selectConversation(id: string) {
@@ -27,22 +29,20 @@
 	}
 </script>
 
-<Sidebar.Header>
-	<div class="px-2 py-2">
+<Sidebar.Header class="px-0 pb-4">
+	<div class="py-2">
 		<a href="/">
 			<h1 class="text-xl font-semibold">llama.cpp</h1>
 		</a>
 	</div>
 </Sidebar.Header>
 
-<div class="px-2 pb-4">
-	<div class="relative">
-		<Search class="text-muted-foreground absolute left-2 top-2.5 h-4 w-4" />
-		<Input bind:value={searchQuery} placeholder="Search conversations..." class="pl-8" />
-	</div>
+<div class="relative pb-4">
+	<Search class="text-muted-foreground absolute left-2 top-2.5 h-4 w-4" />
+	<Input bind:value={searchQuery} placeholder="Search conversations..." class="pl-8" />
 </div>
 
-<div class="px-2 pb-4">
+<div class="pb-4">
 	<Button
 		href="/?new_chat=true"
 		class="border-muted-foreground/25 hover:bg-accent hover:border-accent-foreground/25 w-full justify-start gap-2 rounded-lg border-2 border-dashed bg-transparent transition-colors"
@@ -54,11 +54,11 @@
 	</Button>
 </div>
 
-<Sidebar.Group class="space-y-2">
+<Sidebar.Group class="space-y-2 p-0">
 	<Sidebar.GroupLabel>Conversations</Sidebar.GroupLabel>
 
 	<Sidebar.GroupContent>
-		<Sidebar.Menu class="space-y-2">
+		<Sidebar.Menu class="space-y-0.5">
 			{#each filteredConversations as conversation (conversation.id)}
 				<Sidebar.MenuItem>
 					<ChatSidebarConversationItem

tools/server/webui/src/lib/components/chat/ChatScreen.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import * as AlertDialog from '$lib/components/ui/alert-dialog';
-	import { Trash2, Pencil } from '@lucide/svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { Trash2, Pencil, MoreHorizontal } from '@lucide/svelte';
 	import type { DatabaseConversation } from '$lib/types/database';
 
 	interface Props {
@@ -22,6 +23,8 @@
 		showLastModified = false
 	}: Props = $props();
 
+	let showDeleteDialog = $state(false);
+
 	function formatLastModified(timestamp: number) {
 		const now = Date.now();
 		const diff = now - timestamp;
@@ -55,9 +58,9 @@
 </script>
 
 <button
-	class="hover:bg-accent group flex w-full cursor-pointer items-center justify-between space-x-3 rounded-lg p-3 text-left transition-colors {isActive
-		? 'bg-accent text-accent-foreground border-border border'
-		: 'border border-transparent'}"
+	class="hover:bg-foreground/10 group flex w-full cursor-pointer items-center justify-between space-x-3 rounded-lg px-3 py-1.5 text-left transition-colors {isActive
+		? 'bg-foreground/5 text-accent-foreground'
+		: ''}"
 	onclick={handleSelect}
 >
 	<div class="text flex min-w-0 flex-1 items-center space-x-3">
@@ -74,20 +77,36 @@
 		</div>
 	</div>
 
-	<div class="actions flex items-center space-x-1">
-		<Button size="sm" variant="ghost" class="h-6 w-6 p-0" onclick={handleEdit}>
-			<Pencil class="h-3 w-3" />
-		</Button>
-		<AlertDialog.Root>
-			<AlertDialog.Trigger onclick={handleDeleteClick}>
-				<Button
-					size="sm"
-					variant="ghost"
-					class="text-destructive hover:text-destructive h-6 w-6 p-0"
+	<div class="actions flex items-center">
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger
+				class="flex h-6 w-6 items-center justify-center rounded-md p-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+				onclick={(e) => e.stopPropagation()}
+			>
+				<MoreHorizontal class="h-3 w-3" />
+				<span class="sr-only">More actions</span>
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content align="end" class="w-48">
+				<DropdownMenu.Item onclick={handleEdit} class="flex items-center gap-2">
+					<Pencil class="h-4 w-4" />
+					Edit
+				</DropdownMenu.Item>
+				<DropdownMenu.Separator />
+				<DropdownMenu.Item
+					variant="destructive"
+					class="flex items-center gap-2"
+					onclick={(e) => {
+						e.stopPropagation();
+						showDeleteDialog = true;
+					}}
 				>
-					<Trash2 class="h-3 w-3" />
-				</Button>
-			</AlertDialog.Trigger>
+					<Trash2 class="h-4 w-4" />
+					Delete
+				</DropdownMenu.Item>
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+
+		<AlertDialog.Root bind:open={showDeleteDialog}>
 			<AlertDialog.Content>
 				<AlertDialog.Header>
 					<AlertDialog.Title>Delete Conversation</AlertDialog.Title>
@@ -110,12 +129,13 @@
 
 <style lang="postcss">
 	.actions {
-		button & {
+		& > * {
 			width: 0;
 			opacity: 0;
+			transition: all 0.2s ease;
 		}
 
-		button:hover & {
+		button:hover & > * {
 			width: auto;
 			opacity: 1;
 		}

tools/server/webui/src/lib/components/chat/ChatSidebar/ChatSidebar.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/ui/utils.js";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			{#if indeterminate}
+				<MinusIcon class="size-4" />
+			{:else}
+				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>

tools/server/webui/src/lib/components/chat/ChatSidebar/ChatSidebarConversationItem.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		portalProps,
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: DropdownMenuPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		class={cn(
+			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-dropdown-menu-content-available-height) origin-(--bits-dropdown-menu-content-transform-origin) border-border dark:border-border/20 z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md outline-none',
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPrimitive.Portal>