ui: Linting & Formatting scripts (#26819)

tools/ui/tests/stories/ChatMessage.stories.svelte

@@ -3,86 +3,86 @@
 	import ChatMessage from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Components/ChatScreen/ChatMessage',
 		component: ChatMessage,
 		parameters: {
 			layout: 'centered'
-		}
+		},
+		title: 'Components/ChatScreen/ChatMessage'
 	});
 
 	// Mock messages for different scenarios
 	const userMessage: DatabaseMessage = {
-		id: '1',
-		convId: 'conv-1',
-		type: 'message',
-		timestamp: Date.now() - 1000 * 60 * 5,
-		role: 'user',
+		children: [],
 		content: 'What is the meaning of life, the universe, and everything?',
+		convId: 'conv-1',
+		id: '1',
 		parent: '',
+		role: 'user',
 		thinking: '',
-		children: []
+		timestamp: Date.now() - 1000 * 60 * 5,
+		type: 'message'
 	};
 
 	const assistantMessage: DatabaseMessage = {
-		id: '2',
-		convId: 'conv-1',
-		type: 'message',
-		timestamp: Date.now() - 1000 * 60 * 3,
-		role: 'assistant',
+		children: [],
 		content:
 			'The answer to the ultimate question of life, the universe, and everything is **42**.\n\nThis comes from Douglas Adams\' "The Hitchhiker\'s Guide to the Galaxy," where a supercomputer named Deep Thought calculated this answer over 7.5 million years. However, the question itself was never properly formulated, which is why the answer seems meaningless without context.',
+		convId: 'conv-1',
+		id: '2',
 		parent: '1',
+		role: 'assistant',
 		thinking: '',
-		children: []
+		timestamp: Date.now() - 1000 * 60 * 3,
+		type: 'message'
 	};
 
 	const assistantWithReasoning: DatabaseMessage = {
-		id: '3',
-		convId: 'conv-1',
-		type: 'message',
-		timestamp: Date.now() - 1000 * 60 * 2,
-		role: 'assistant',
+		children: [],
 		content: "Here's the concise answer, now that I've thought it through carefully for you.",
+		convId: 'conv-1',
+		id: '3',
 		parent: '1',
+		role: 'assistant',
 		thinking:
 			"Let's consider the user's question step by step:\\n\\n1. Identify the core problem\\n2. Evaluate relevant information\\n3. Formulate a clear answer\\n\\nFollowing this process ensures the final response stays focused and accurate.",
-		children: []
+		timestamp: Date.now() - 1000 * 60 * 2,
+		type: 'message'
 	};
 	const rawOutputMessage: DatabaseMessage = {
-		id: '6',
-		convId: 'conv-1',
-		type: 'message',
-		timestamp: Date.now() - 1000 * 60,
-		role: 'assistant',
+		children: [],
 		content:
 			'<|channel|>analysis<|message|>User greeted me. Initiating overcomplicated analysis: Is this a trap? No, just a normal hello. Respond calmly, act like a helpful assistant, and do not start explaining quantum physics again. Confidence 0.73. Engaging socially acceptable greeting protocol...<|end|>Hello there! How can I help you today?',
+		convId: 'conv-1',
+		id: '6',
 		parent: '1',
+		role: 'assistant',
 		thinking: '',
-		children: []
+		timestamp: Date.now() - 1000 * 60,
+		type: 'message'
 	};
 
 	let processingMessage = $state({
-		id: '4',
-		convId: 'conv-1',
-		type: 'message',
-		timestamp: 0, // No timestamp = processing
-		role: 'assistant',
+		children: [],
 		content: '',
+		convId: 'conv-1',
+		id: '4',
 		parent: '1',
+		role: 'assistant',
 		thinking: '',
-		children: []
+		timestamp: 0, // No timestamp = processing
+		type: 'message'
 	});
 
 	let streamingMessage = $state({
-		id: '5',
-		convId: 'conv-1',
-		type: 'message',
-		timestamp: 0, // No timestamp = streaming
-		role: 'assistant',
+		children: [],
 		content: '',
+		convId: 'conv-1',
+		id: '5',
 		parent: '1',
+		role: 'assistant',
 		thinking: '',
-		children: []
+		timestamp: 0, // No timestamp = streaming
+		type: 'message'
 	});
 </script>
 
@@ -93,6 +93,7 @@
 	}}
 	play={async () => {
 		const { settingsStore } = await import('$lib/stores/settings.svelte');
+
 		settingsStore.updateConfig('showRawOutputSwitch', false);
 	}}
 />
@@ -105,6 +106,7 @@
 	}}
 	play={async () => {
 		const { settingsStore } = await import('$lib/stores/settings.svelte');
+
 		settingsStore.updateConfig('showRawOutputSwitch', false);
 	}}
 />
@@ -117,6 +119,7 @@
 	}}
 	play={async () => {
 		const { settingsStore } = await import('$lib/stores/settings.svelte');
+
 		settingsStore.updateConfig('showRawOutputSwitch', false);
 	}}
 />
@@ -129,6 +132,7 @@
 	}}
 	play={async () => {
 		const { settingsStore } = await import('$lib/stores/settings.svelte');
+
 		settingsStore.updateConfig('showRawOutputSwitch', true);
 	}}
 />
@@ -141,16 +145,18 @@
 	asChild
 	play={async () => {
 		const { settingsStore } = await import('$lib/stores/settings.svelte');
+
 		settingsStore.updateConfig('showRawOutputSwitch', false);
 		// Phase 1: Stream reasoning content in chunks
 		let reasoningText =
 			'I need to think about this carefully. Let me break down the problem:\n\n1. The user is asking for help with something complex\n2. I should provide a thorough and helpful response\n3. I need to consider multiple approaches\n4. The best solution would be to explain step by step\n\nThis approach will ensure clarity and understanding.';
-
 		let reasoningChunk = 'I';
 		let i = 0;
+
 		while (i < reasoningText.length) {
 			const chunkSize = Math.floor(Math.random() * 5) + 3; // Random 3-7 characters
 			const chunk = reasoningText.slice(i, i + chunkSize);
+
 			reasoningChunk += chunk;
 
 			// Update the reactive state directly
@@ -164,11 +170,13 @@
 			"Based on my analysis, here's the solution:\n\n**Step 1:** First, we need to understand the requirements clearly.\n\n**Step 2:** Then we can implement the solution systematically.\n\n**Step 3:** Finally, we test and validate the results.\n\nThis approach ensures we cover all aspects of the problem effectively.";
 
 		let contentChunk = '';
+
 		i = 0;
 
 		while (i < regularText.length) {
 			const chunkSize = Math.floor(Math.random() * 5) + 3; // Random 3-7 characters
 			const chunk = regularText.slice(i, i + chunkSize);
+
 			contentChunk += chunk;
 
 			// Update the reactive state directly
@@ -193,6 +201,7 @@
 	}}
 	play={async () => {
 		const { settingsStore } = await import('$lib/stores/settings.svelte');
+
 		settingsStore.updateConfig('showRawOutputSwitch', false);
 		// Import the chat store to simulate loading state
 		const { chatStore } = await import('$lib/stores/chat.svelte');