refactor: Chat components and data structures

Refactors chat-related components for better organization and maintainability.

- Moves `ChatConversationsList` to `ChatSidebar` as `ChatSidebarConversationItem`.
- Updates data structures to use `Message` type from `database.d.ts` instead of `conversation.d.ts`.
- Standardizes props naming in `ChatForm` (`onsend` -> `onSend`, `onstop` -> `onStop`).
- Improves markdown rendering and code block enhancements in `MarkdownContent`.
- Updates database store import.

Author: allozaur

tools/server/webui/src/lib/app.d.ts

@@ -1,4 +1,12 @@
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
 export * from './types/chat';
-export * from './types/conversation';
 export * from './types/database';
 export * from './types/settings';

tools/server/webui/src/lib/components/MarkdownContent.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { remark } from 'remark';
-	import remarkGfm from 'remark-gfm';
 	import remarkBreaks from 'remark-breaks';
-	import remarkRehype from 'remark-rehype';
+	import remarkGfm from 'remark-gfm';
 	import rehypeHighlight from 'rehype-highlight';
+	import remarkRehype from 'remark-rehype';
 	import rehypeStringify from 'rehype-stringify';
 	import 'highlight.js/styles/github-dark.css';
 
@@ -26,20 +26,6 @@
 			.use(rehypeStringify); // Convert to HTML string
 	});
 
-	async function processMarkdown(text: string): Promise<string> {
-		try {
-			const result = await processor().process(text);
-			const html = String(result);
-
-			return enhanceCodeBlocks(html);
-		} catch (error) {
-			console.error('Markdown processing error:', error);
-			
-			// Fallback to plain text with line breaks
-			return text.replace(/\n/g, '<br>');
-		}
-	}
-
 	function enhanceCodeBlocks(html: string): string {
 		const tempDiv = document.createElement('div');
 		tempDiv.innerHTML = html;
@@ -100,6 +86,20 @@
 		return tempDiv.innerHTML;
 	}
 
+	async function processMarkdown(text: string): Promise<string> {
+		try {
+			const result = await processor().process(text);
+			const html = String(result);
+
+			return enhanceCodeBlocks(html);
+		} catch (error) {
+			console.error('Markdown processing error:', error);
+			
+			// Fallback to plain text with line breaks
+			return text.replace(/\n/g, '<br>');
+		}
+	}
+
 	function setupCopyButtons() {
 		if (!containerRef) return;
 

tools/server/webui/src/lib/components/ServerInfo.svelte

@@ -3,7 +3,6 @@
 	import { Server, Eye, Mic } from '@lucide/svelte';
 	import { serverStore } from '$lib/stores/server.svelte';
 
-	// Reactive server information
 	const props = $derived(serverStore.serverProps);
 	const model = $derived(serverStore.modelName);
 	const modalities = $derived(serverStore.supportedModalities);
@@ -19,14 +18,12 @@
 			</Badge>
 		{/if}
 
-		<!-- Context Length -->
 		{#if props.n_ctx}
 			<Badge variant="secondary" class="text-xs">
 				ctx: {props.n_ctx.toLocaleString()}
 			</Badge>
 		{/if}
 
-		<!-- Supported Modalities -->
 		{#if modalities.length > 0}
 			{#each modalities as modality}
 				<Badge variant="secondary" class="text-xs">

tools/server/webui/src/lib/components/ServerStatus.svelte

@@ -12,7 +12,6 @@
 
 	let { class: className = '', variant = 'header', showActions = false }: Props = $props();
 
-	// Real server status from store
 	const serverData = $derived(serverProps());
 	const loading = $derived(serverLoading());
 	const error = $derived(serverError());
@@ -34,13 +33,11 @@
 </script>
 
 <div class="flex items-center space-x-2 {className}">
-	<!-- Status Indicator -->
 	<div class="flex items-center space-x-2">
 		<div class="h-2 w-2 rounded-full {getStatusColor()}"></div>
 		<span class="text-muted-foreground text-sm">{getStatusText()}</span>
 	</div>
 
-	<!-- Server Info -->
 	{#if serverData && !error}
 		<Badge variant="outline" class="text-xs">
 			<Server class="mr-1 h-3 w-3" />
@@ -53,7 +50,6 @@
 		{/if}
 	{/if}
 
-	<!-- Error Action (if needed) -->
 	{#if showActions && error}
 		<Button variant="outline" size="sm" class="text-destructive">
 			<AlertTriangle class="mr-2 h-4 w-4" />

tools/server/webui/src/lib/components/chat/ChatConversations/ChatConversationsList.svelte

@@ -7,17 +7,17 @@
 		class?: string;
 		disabled?: boolean;
 		isLoading?: boolean;
-		onsend?: (message: string) => void;
-		onstop?: () => void;
+		onSend?: (message: string) => void;
+		onStop?: () => void;
 		showHelperText?: boolean;
 	}
 
 	let {
 		class: className,
 		disabled = false,
 		isLoading = false,
-		onsend,
-		onstop,
+		onSend,
+		onStop,
 		showHelperText = true
 	}: Props = $props();
 
@@ -28,7 +28,7 @@
 		event.preventDefault();
 		if (!message.trim() || disabled || isLoading) return;
 
-		onsend?.(message.trim());
+		onSend?.(message.trim());
 		message = '';
 
 		if (textareaElement) {
@@ -42,7 +42,7 @@
 
 			if (!message.trim() || disabled || isLoading) return;
 
-			onsend?.(message.trim());
+			onSend?.(message.trim());
 			message = '';
 
 			if (textareaElement) {
@@ -52,19 +52,17 @@
 	}
 
 	function handleStop() {
-		onstop?.();
+		onStop?.();
 	}
 </script>
 
 <form
 	onsubmit={handleSubmit}
 	class="bg-background dark:bg-muted border-radius-bottom-none mx-auto max-w-4xl overflow-hidden rounded-3xl {className}"
 >
-	<!-- Input Container -->
 	<div
 		class="bg-muted/30 border-border/40 focus-within:border-primary/40 flex-column relative min-h-[48px] items-center rounded-3xl border px-5 py-3 shadow-sm transition-all focus-within:shadow-md"
 	>
-		<!-- Text Input -->
 		<div class="flex-1">
 			<textarea
 				bind:this={textareaElement}
@@ -77,9 +75,7 @@
 			></textarea>
 		</div>
 
-		<!-- Actions Bar -->
 		<div class="flex items-center justify-between gap-1">
-			<!-- Left Actions -->
 			<Button
 				type="button"
 				variant="ghost"
@@ -121,7 +117,6 @@
 	</div>
 </form>
 
-<!-- Helper Text -->
 {#if showHelperText}
 	<div class="mt-4 flex items-center justify-center">
 		<p class="text-muted-foreground text-xs">