webui: Architecture and UI improvements (#19596)

2026-02-14 09:06:41 +01:00
parent 2d8015e8a4
commit baa12f3831
76 changed files with 1061 additions and 2818 deletions
@@ -0,0 +1,96 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ChatScreenForm from '$lib/components/app/chat/ChatScreen/ChatScreenForm.svelte';
+	import { expect } from 'storybook/test';
+	import jpgAsset from './fixtures/assets/1.jpg?url';
+	import svgAsset from './fixtures/assets/hf-logo.svg?url';
+	import pdfAsset from './fixtures/assets/example.pdf?raw';
+
+	const { Story } = defineMeta({
+		title: 'Components/ChatScreen/ChatScreenForm',
+		component: ChatScreenForm,
+		parameters: {
+			layout: 'centered'
+		}
+	});
+
+	let fileAttachments = $state([
+		{
+			id: '1',
+			name: '1.jpg',
+			type: 'image/jpeg',
+			size: 44891,
+			preview: jpgAsset,
+			file: new File([''], '1.jpg', { type: 'image/jpeg' })
+		},
+		{
+			id: '2',
+			name: 'hf-logo.svg',
+			type: 'image/svg+xml',
+			size: 1234,
+			preview: svgAsset,
+			file: new File([''], 'hf-logo.svg', { type: 'image/svg+xml' })
+		},
+		{
+			id: '3',
+			name: 'example.pdf',
+			type: 'application/pdf',
+			size: 351048,
+			file: new File([pdfAsset], 'example.pdf', { type: 'application/pdf' })
+		}
+	]);
+</script>
+
+<Story
+	name="Default"
+	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+	play={async (context) => {
+		const { canvas, userEvent } = context;
+		const textarea = await canvas.findByRole('textbox');
+		const submitButton = await canvas.findByRole('button', { name: 'Send' });
+
+		// Expect the input to be focused after the component is mounted
+		await expect(textarea).toHaveFocus();
+
+		// Expect the submit button to be disabled
+		await expect(submitButton).toBeDisabled();
+
+		const text = 'What is the meaning of life?';
+
+		await userEvent.clear(textarea);
+		await userEvent.type(textarea, text);
+
+		await expect(textarea).toHaveValue(text);
+
+		const fileInput = document.querySelector('input[type="file"]');
+		await expect(fileInput).not.toHaveAttribute('accept');
+	}}
+/>
+
+<Story name="Loading" args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', isLoading: true }} />
+
+<Story
+	name="FileAttachments"
+	args={{
+		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
+		uploadedFiles: fileAttachments
+	}}
+	play={async (context) => {
+		const { canvas } = context;
+		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();
+	}}
+/>