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