test: Storybook tests WIP

Author: allozaur

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

@@ -3,10 +3,7 @@
 	import { processFilesToChatUploaded } from '$lib/utils/process-uploaded-files';
 	import { serverStore } from '$lib/stores/server.svelte';
 	import { isFileTypeSupported } from '$lib/constants/supported-file-types';
-	import {
-		filterFilesByModalities,
-		generateModalityErrorMessage
-	} from '$lib/utils/modality-file-validation';
+	import { filterFilesByModalities } from '$lib/utils/modality-file-validation';
 	import { supportsVision, supportsAudio, serverError, serverLoading } from '$lib/stores/server.svelte';
 	import { ChatForm, ChatScreenHeader, ChatMessages, ServerInfo, ServerErrorSplash, ServerLoadingSplash } from '$lib/components/app';
 	import {

tools/server/webui/src/stories/ChatForm.stories.svelte

@@ -136,6 +136,45 @@
 />
 
 
+<Story
+  name="AudioModality"
+  args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+  play={async ({ canvas, userEvent }) => {
+    mockServerProps(mockConfigs.audioOnly);
+
+    await waitFor(() => {
+      const fileInput = document.querySelector('input[type="file"]');
+      const acceptAttr = fileInput?.getAttribute('accept');
+      return acceptAttr;
+    });
+
+    // Test initial file input state (should accept audio but not images)
+    const fileInput = document.querySelector('input[type="file"]');
+    const acceptAttr = fileInput?.getAttribute('accept');
+    console.log(acceptAttr);
+    await expect(fileInput).toHaveAttribute('accept');
+    await expect(acceptAttr).not.toContain('image/');
+    await expect(acceptAttr).toContain('audio/');
+
+    const fileUploadButton = canvas.getByText('Attach files');
+    await userEvent.click(fileUploadButton);
+
+    // Test that record button is enabled (audio support)
+    const recordButton = canvas.getAllByRole('button', { name: 'Start recording' })[1];
+    await expect(recordButton).not.toBeDisabled();
+
+    // Test that Images button is disabled (no vision support)
+    const imagesButton = document.querySelector('.images-button');
+    await expect(imagesButton).toHaveAttribute('data-disabled');
+
+    // Test that Audio button is enabled (audio support)
+    const audioButton = document.querySelector('.audio-button');
+    await expect(audioButton).not.toHaveAttribute('data-disabled');
+
+    console.log('✅ Audio modality: Audio/Recording enabled, Images disabled');
+  }}
+/>
+
 <Story
   name="FileAttachments"
   args={{ 

tools/server/webui/src/stories/ChatHeader.stories.svelte

@@ -3,7 +3,7 @@
 	import ChatMessage from '$lib/components/app/chat/ChatMessages/ChatMessage.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Components/ChatMessage',
+		title: 'Components/ChatScreen/ChatMessage',
 		component: ChatMessage,
 		parameters: {
 			layout: 'centered'

tools/server/webui/src/stories/ChatMessage.stories.svelte

@@ -1,6 +1,9 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import ChatSidebar from '$lib/components/app/chat/ChatSidebar/ChatSidebar.svelte';
+	import type { DatabaseConversation } from '$lib/types/database.d.ts';
+	import { waitFor, within, expect } from 'storybook/internal/test';
+	import { screen } from 'storybook/test';
 
 	const { Story } = defineMeta({
 		title: 'Components/ChatSidebar',
@@ -45,25 +48,57 @@
 	];
 </script>
 
-<Story name="Default">
-	<div class="bg-background h-screen w-80 border-r">
+<Story
+	asChild
+	name="Default"
+	play={async ({ canvas }) => {
+		const { chatStore } = await import('$lib/stores/chat.svelte');
+		
+		waitFor(() => setTimeout(() => {
+			chatStore.conversations = mockConversations;
+		}, 0));
+	}}
+>
+	<div class="bg-background h-screen w-[18rem]">
+
 		<ChatSidebar />
 	</div>
 </Story>
 
-<Story 
+<Story
+	asChild
 	name="SearchActive"
-	play={async ({ canvasElement }) => {
-		// Wait for component to mount
-		await new Promise(resolve => setTimeout(resolve, 100));
+	play={async ({ userEvent, canvasElement }) => {
+		let canvas = within(canvasElement);
+		const { chatStore } = await import('$lib/stores/chat.svelte');
 
-		// Find and interact with search input
-		const searchInput = canvasElement.querySelector('input[placeholder*="Search"]') as HTMLInputElement;
-		if (searchInput) {
-			searchInput.focus();
-			searchInput.value = 'Python';
-			searchInput.dispatchEvent(new Event('input', { bubbles: true }));
-		}
+		waitFor(() => setTimeout(() => {
+			chatStore.conversations = mockConversations;
+		}, 0));
+		
+		const searchTrigger = screen.getByText('Search conversations');
+		userEvent.click(searchTrigger);
+
+		// canvas = within(canvasElement);
+
+		// const searchInput = canvas.getAllByPlaceholderText('Search conversations...');
+		
+		console.log(canvasElement);
+
+		// await expect(canvas.getByRole('textbox')).toBeInTheDocument();
+	}}
+>
+	<div class="bg-background h-screen w-[18rem]">
+		<ChatSidebar />
+	</div>
+</Story>
+
+<Story 
+	name="Empty"
+	play={async ({ canvas }) => {
+		// Mock empty conversations store
+		const { chatStore } = await import('$lib/stores/chat.svelte');
+		chatStore.conversations = [];
 	}}
 >
 	<div class="bg-background h-screen w-80 border-r">