1<script module lang="ts">
 2	import { defineMeta } from '@storybook/addon-svelte-csf';
 3	import ChatSidebar from '$lib/components/app/chat/ChatSidebar/ChatSidebar.svelte';
 4	import { waitFor } from 'storybook/test';
 5	import { screen } from 'storybook/test';
 6
 7	const { Story } = defineMeta({
 8		title: 'Components/ChatSidebar',
 9		component: ChatSidebar,
10		parameters: {
11			layout: 'centered'
12		}
13	});
14
15	// Mock conversations for the sidebar
16	const mockConversations: DatabaseConversation[] = [
17		{
18			id: 'conv-1',
19			name: 'Getting Started with AI',
20			lastModified: Date.now() - 1000 * 60 * 5, // 5 minutes ago
21			currNode: 'msg-1'
22		},
23		{
24			id: 'conv-2',
25			name: 'Python Programming Help',
26			lastModified: Date.now() - 1000 * 60 * 60 * 2, // 2 hours ago
27			currNode: 'msg-2'
28		},
29		{
30			id: 'conv-3',
31			name: 'Creative Writing Ideas',
32			lastModified: Date.now() - 1000 * 60 * 60 * 24, // 1 day ago
33			currNode: 'msg-3'
34		},
35		{
36			id: 'conv-4',
37			name: 'This is a very long conversation title that should be truncated properly when displayed',
38			lastModified: Date.now() - 1000 * 60 * 60 * 24 * 3, // 3 days ago
39			currNode: 'msg-4'
40		},
41		{
42			id: 'conv-5',
43			name: 'Math Problem Solving',
44			lastModified: Date.now() - 1000 * 60 * 60 * 24 * 7, // 1 week ago
45			currNode: 'msg-5'
46		}
47	];
48</script>
49
50<Story
51	asChild
52	name="Default"
53	play={async () => {
54		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
55		
56		waitFor(() => setTimeout(() => {
57			conversationsStore.conversations = mockConversations;
58		}, 0));
59	}}
60>
61	<div class="flex-column h-full h-screen w-72 bg-background">
62		<ChatSidebar />
63	</div>
64</Story>
65
66<Story
67	asChild
68	name="SearchActive"
69	play={async ({ userEvent }) => {
70		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
71		
72		waitFor(() => setTimeout(() => {
73			conversationsStore.conversations = mockConversations;
74		}, 0));
75		
76		const searchTrigger = screen.getByText('Search conversations');
77		userEvent.click(searchTrigger);
78	}}
79>
80	<div class="flex-column h-full h-screen w-72 bg-background">
81		<ChatSidebar />
82	</div>
83</Story>
84
85<Story
86	asChild
87	name="Empty"
88	play={async () => {
89		// Mock empty conversations store
90		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
91		conversationsStore.conversations = [];
92	}}
93>
94	<div class="flex-column h-full h-screen w-72 bg-background">
95		<ChatSidebar />
96	</div>
97</Story>