Allozaur/server model management v1 2

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

@@ -12,9 +12,20 @@ import type {
 	ApiContextSizeError,
 	ApiErrorResponse,
 	ApiLlamaCppServerProps,
-	ApiProcessingState
+	ApiProcessingState,
+	ApiRouterModelMeta,
+	ApiRouterModelsLoadRequest,
+	ApiRouterModelsLoadResponse,
+	ApiRouterModelsStatusRequest,
+	ApiRouterModelsStatusResponse,
+	ApiRouterModelsListResponse,
+	ApiRouterModelsUnloadRequest,
+	ApiRouterModelsUnloadResponse
 } from '$lib/types/api';
 
+import { ServerMode, ServerModelStatus } from '$lib/enums/server';
+import { ModelModality } from '$lib/enums/model';
+
 import type {
 	ChatMessageType,
 	ChatRole,
@@ -60,6 +71,14 @@ declare global {
 		ApiErrorResponse,
 		ApiLlamaCppServerProps,
 		ApiProcessingState,
+		ApiRouterModelMeta,
+		ApiRouterModelsLoadRequest,
+		ApiRouterModelsLoadResponse,
+		ApiRouterModelsStatusRequest,
+		ApiRouterModelsStatusResponse,
+		ApiRouterModelsListResponse,
+		ApiRouterModelsUnloadRequest,
+		ApiRouterModelsUnloadResponse,
 		ChatMessageData,
 		ChatMessagePromptProgress,
 		ChatMessageSiblingInfo,
@@ -75,6 +94,9 @@ declare global {
 		DatabaseMessageExtraTextFile,
 		DatabaseMessageExtraPdfFile,
 		DatabaseMessageExtraLegacyContext,
+		ModelModality,
+		ServerMode,
+		ServerModelStatus,
 		SettingsConfigValue,
 		SettingsFieldConfig,
 		SettingsConfigType,

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentPreview.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+	import { Button } from '$lib/components/ui/button';
 	import { FileText, Image, Music, FileIcon, Eye } from '@lucide/svelte';
 	import { FileTypeCategory, MimeTypeApplication } from '$lib/enums/files';
+	import { ModelModality } from '$lib/enums/model';
+	import { AttachmentType } from '$lib/enums/attachment';
+	import type { DatabaseMessageExtra } from '$lib/types/database';
 	import { convertPDFToImage } from '$lib/utils/pdf-processing';
-	import { Button } from '$lib/components/ui/button';
 	import { getFileTypeCategory } from '$lib/utils/file-type';
 
 	interface Props {
@@ -21,33 +24,36 @@
 	let displayName = $derived(uploadedFile?.name || attachment?.name || name || 'Unknown File');
 
 	let displayPreview = $derived(
-		uploadedFile?.preview || (attachment?.type === 'imageFile' ? attachment.base64Url : preview)
+		uploadedFile?.preview ||
+			(attachment?.type === AttachmentType.IMAGE ? attachment.base64Url : preview)
 	);
 
 	let displayType = $derived(
-		uploadedFile?.type ||
-			(attachment?.type === 'imageFile'
+		uploadedFile
+			? uploadedFile.type
+			: attachment?.type === AttachmentType.IMAGE
 				? 'image'
-				: attachment?.type === 'textFile'
+				: attachment?.type === AttachmentType.TEXT
 					? 'text'
-					: attachment?.type === 'audioFile'
-						? attachment.mimeType || 'audio'
-						: attachment?.type === 'pdfFile'
+					: attachment?.type === AttachmentType.AUDIO
+						? attachment.mimeType || ModelModality.AUDIO
+						: attachment?.type === AttachmentType.PDF
 							? MimeTypeApplication.PDF
-							: type || 'unknown')
+							: type || 'unknown'
 	);
 
 	let displayTextContent = $derived(
 		uploadedFile?.textContent ||
-			(attachment?.type === 'textFile'
+			(attachment?.type === AttachmentType.TEXT
 				? attachment.content
-				: attachment?.type === 'pdfFile'
+				: attachment?.type === AttachmentType.PDF
 					? attachment.content
 					: textContent)
 	);
 
 	let isAudio = $derived(
-		getFileTypeCategory(displayType) === FileTypeCategory.AUDIO || displayType === 'audio'
+		getFileTypeCategory(displayType) === FileTypeCategory.AUDIO ||
+			displayType === ModelModality.AUDIO
 	);
 
 	let isImage = $derived(
@@ -87,9 +93,9 @@
 
 			if (uploadedFile?.file) {
 				file = uploadedFile.file;
-			} else if (attachment?.type === 'pdfFile') {
+			} else if (attachment?.type === AttachmentType.PDF) {
 				// Check if we have pre-processed images
-				if (attachment.images && Array.isArray(attachment.images)) {
+				if (attachment.images && Array.isArray(attachment.images) && attachment.images.length > 0) {
 					pdfImages = attachment.images;
 					return;
 				}
@@ -237,7 +243,7 @@
 				<div class="w-full max-w-md text-center">
 					<Music class="mx-auto mb-4 h-16 w-16 text-muted-foreground" />
 
-					{#if attachment?.type === 'audioFile'}
+					{#if attachment?.type === AttachmentType.AUDIO}
 						<audio
 							controls
 							class="mb-4 w-full"

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

@@ -2,10 +2,13 @@
 	import { ChatAttachmentThumbnailImage, ChatAttachmentThumbnailFile } from '$lib/components/app';
 	import { Button } from '$lib/components/ui/button';
 	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
-	import { FileTypeCategory } from '$lib/enums/files';
 	import { getFileTypeCategory } from '$lib/utils/file-type';
+	import { FileTypeCategory } from '$lib/enums/files';
+	import { ModelModality } from '$lib/enums/model';
+	import { AttachmentType } from '$lib/enums/attachment';
 	import { DialogChatAttachmentPreview, DialogChatAttachmentsViewAll } from '$lib/components/app';
 	import type { ChatAttachmentDisplayItem, ChatAttachmentPreviewItem } from '$lib/types/chat';
+	import type { DatabaseMessageExtra } from '$lib/types/database';
 
 	interface Props {
 		class?: string;
@@ -68,7 +71,7 @@
 
 		// Add stored attachments (ChatMessage)
 		for (const [index, attachment] of attachments.entries()) {
-			if (attachment.type === 'imageFile') {
+			if (attachment.type === AttachmentType.IMAGE) {
 				items.push({
 					id: `attachment-${index}`,
 					name: attachment.name,
@@ -78,7 +81,7 @@
 					attachment,
 					attachmentIndex: index
 				});
-			} else if (attachment.type === 'textFile') {
+			} else if (attachment.type === AttachmentType.TEXT) {
 				items.push({
 					id: `attachment-${index}`,
 					name: attachment.name,
@@ -88,31 +91,30 @@
 					attachmentIndex: index,
 					textContent: attachment.content
 				});
-			} else if (attachment.type === 'context') {
-				// Legacy format from old webui - treat as text file
+			} else if (attachment.type === AttachmentType.AUDIO) {
 				items.push({
 					id: `attachment-${index}`,
 					name: attachment.name,
-					type: 'text',
+					type: attachment.mimeType || ModelModality.AUDIO,
 					isImage: false,
 					attachment,
-					attachmentIndex: index,
-					textContent: attachment.content
+					attachmentIndex: index
 				});
-			} else if (attachment.type === 'audioFile') {
+			} else if (attachment.type === AttachmentType.PDF) {
 				items.push({
 					id: `attachment-${index}`,
 					name: attachment.name,
-					type: attachment.mimeType || 'audio',
+					type: 'application/pdf',
 					isImage: false,
 					attachment,
 					attachmentIndex: index
 				});
-			} else if (attachment.type === 'pdfFile') {
+			} else if (attachment.type === AttachmentType.LEGACY_CONTEXT) {
+				// Legacy format from old webui - treat as text file
 				items.push({
 					id: `attachment-${index}`,
 					name: attachment.name,
-					type: 'application/pdf',
+					type: 'text',
 					isImage: false,
 					attachment,
 					attachmentIndex: index,

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsViewAll.svelte

@@ -5,8 +5,11 @@
 		DialogChatAttachmentPreview
 	} from '$lib/components/app';
 	import { FileTypeCategory } from '$lib/enums/files';
+	import { ModelModality } from '$lib/enums/model';
+	import { AttachmentType } from '$lib/enums/attachment';
 	import { getFileTypeCategory } from '$lib/utils/file-type';
 	import type { ChatAttachmentDisplayItem, ChatAttachmentPreviewItem } from '$lib/types/chat';
+	import type { DatabaseMessageExtra } from '$lib/types/database';
 
 	interface Props {
 		uploadedFiles?: ChatUploadedFile[];
@@ -52,7 +55,7 @@
 		}
 
 		for (const [index, attachment] of attachments.entries()) {
-			if (attachment.type === 'imageFile') {
+			if (attachment.type === AttachmentType.IMAGE) {
 				items.push({
 					id: `attachment-${index}`,
 					name: attachment.name,
@@ -62,7 +65,7 @@
 					attachment,
 					attachmentIndex: index
 				});
-			} else if (attachment.type === 'textFile') {
+			} else if (attachment.type === AttachmentType.TEXT) {
 				items.push({
 					id: `attachment-${index}`,
 					name: attachment.name,
@@ -72,31 +75,30 @@
 					attachmentIndex: index,
 					textContent: attachment.content
 				});
-			} else if (attachment.type === 'context') {
-				// Legacy format from old webui - treat as text file
+			} else if (attachment.type === AttachmentType.AUDIO) {
 				items.push({
 					id: `attachment-${index}`,
 					name: attachment.name,
-					type: 'text',
+					type: attachment.mimeType || ModelModality.AUDIO,
 					isImage: false,
 					attachment,
-					attachmentIndex: index,
-					textContent: attachment.content
+					attachmentIndex: index
 				});
-			} else if (attachment.type === 'audioFile') {
+			} else if (attachment.type === AttachmentType.PDF) {
 				items.push({
 					id: `attachment-${index}`,
 					name: attachment.name,
-					type: attachment.mimeType || 'audio',
+					type: 'application/pdf',
 					isImage: false,
 					attachment,
 					attachmentIndex: index
 				});
-			} else if (attachment.type === 'pdfFile') {
+			} else if (attachment.type === AttachmentType.LEGACY_CONTEXT) {
+				// Legacy format from old webui - treat as text file
 				items.push({
 					id: `attachment-${index}`,
 					name: attachment.name,
-					type: 'application/pdf',
+					type: 'text',
 					isImage: false,
 					attachment,
 					attachmentIndex: index,

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

@@ -253,9 +253,11 @@
 
 		<ChatFormActions
 			canSend={message.trim().length > 0 || uploadedFiles.length > 0}
+			hasText={message.trim().length > 0}
 			{disabled}
 			{isLoading}
 			{isRecording}
+			{uploadedFiles}
 			onFileUpload={handleFileUpload}
 			onMicClick={handleMicClick}
 			onStop={handleStop}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Mic } from '@lucide/svelte';
+	import { Mic, Square } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { supportsAudio } from '$lib/stores/server.svelte';
@@ -27,16 +27,18 @@
 			<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" />
+				{#if isRecording}
+					<Square class="h-4 w-4 animate-pulse fill-white" />
+				{:else}
+					<Mic class="h-4 w-4" />
+				{/if}
 			</Button>
 		</Tooltip.Trigger>