test: Storybook cleanup

Author: allozaur

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

@@ -89,7 +89,7 @@
 
 				{#if filteredConversations.length === 0}
 					<div class="px-2 py-4 text-center">
-						<p class="text-muted-foreground text-sm">
+						<p class="text-muted-foreground text-sm p-4 mb-4">
 							{searchQuery.length > 0
 								? 'No results found'
 								: isSearchModeActive

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import ChatForm from '$lib/components/app/chat/ChatForm/ChatForm.svelte';
-	import { expect } from 'storybook/internal/test';
+	import { expect, screen } from 'storybook/internal/test';
 	import { mockServerProps, mockConfigs } from './fixtures/storybook-mocks';
 	import jpgAsset from './fixtures/assets/1.jpg?url';
   import svgAsset from './fixtures/assets/hf-logo.svg?url';
@@ -26,11 +26,11 @@
 		},
     {
       id: '2',
-      name: '1.svg',
+      name: 'hf-logo.svg',
       type: 'image/svg+xml',
       size: 1234,
       preview: svgAsset,
-      file: new File([''], '1.svg', { type: 'image/svg+xml' })
+      file: new File([''], 'hf-logo.svg', { type: 'image/svg+xml' })
     },
 		{
       id: '3',
@@ -169,6 +169,21 @@
   }}
   play={async ({ canvas }) => {
     mockServerProps(mockConfigs.bothModalities);
-    console.log('✅ File Attachments: Both modalities enabled');
+    
+    const jpgAttachment = canvas.getByAltText('1.jpg');
+    const svgAttachment = canvas.getByAltText('hf-logo.svg');
+    const pdfFileExtension = canvas.getByText('PDF');
+    const pdfAttachment = canvas.getByText('example.pdf');
+    const pdfSize = canvas.getByText('342.82 KB');
+    
+    await expect(jpgAttachment).toBeInTheDocument();
+    await expect(jpgAttachment).toHaveAttribute('src', jpgAsset);
+    
+    await expect(svgAttachment).toBeInTheDocument();
+    await expect(svgAttachment).toHaveAttribute('src', svgAsset);
+    
+    await expect(pdfFileExtension).toBeInTheDocument();
+    await expect(pdfAttachment).toBeInTheDocument();
+    await expect(pdfSize).toBeInTheDocument();
   }}
 />

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

@@ -59,7 +59,7 @@
 		}, 0));
 	}}
 >
-	<div class="bg-background h-screen w-[18rem]">
+	<div class="bg-background h-screen w-72 flex-column h-full">
 
 		<ChatSidebar />
 	</div>
@@ -78,30 +78,23 @@
 
 		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]">
+	<div class="bg-background h-screen w-72 flex-column h-full">
 		<ChatSidebar />
 	</div>
 </Story>
 
-<Story 
+<Story
+	asChild
 	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">
+	<div class="bg-background h-screen w-72 flex-column h-full">
 		<ChatSidebar />
 	</div>
 </Story>