1import { test, expect } from '@playwright/test';
 2
 3test.describe('Scroll behavior', () => {
 4  test('shows scroll-to-bottom button when scrolled up, auto-scrolls when at bottom', async ({ page }) => {
 5    // Navigate to app
 6    await page.goto('http://localhost:9000');
 7    
 8    // Wait for the app to load
 9    await page.waitForSelector('[data-testid="message-input"]');
10    
11    // Send multiple messages to create scrollable content
12    const input = page.locator('[data-testid="message-input"]');
13    const sendButton = page.locator('[data-testid="send-button"]');
14    
15    // Send a message that generates multiple tool calls to create enough content
16    await input.fill('tool bash ls');
17    await sendButton.click();
18    
19    // Wait for agent to finish
20    await page.waitForSelector('[data-testid="agent-thinking"]', { state: 'hidden', timeout: 10000 });
21    
22    // Send more messages to ensure we have scrollable content
23    for (let i = 0; i < 3; i++) {
24      await input.fill(`echo message ${i}`);
25      await sendButton.click();
26      await page.waitForSelector('[data-testid="agent-thinking"]', { state: 'hidden', timeout: 10000 });
27    }
28    
29    // Get the messages container
30    const messagesContainer = page.locator('.messages-container');
31    
32    // Scroll up to the top
33    await messagesContainer.evaluate((el) => {
34      el.scrollTop = 0;
35    });
36    
37    // Wait a moment for scroll event to be processed
38    await page.waitForTimeout(200);
39    
40    // Verify scroll-to-bottom button appears
41    const scrollButton = page.locator('.scroll-to-bottom-button');
42    await expect(scrollButton).toBeVisible();
43    
44    // Click the button
45    await scrollButton.click();
46    
47    // Wait for scroll animation
48    await page.waitForTimeout(500);
49    
50    // Button should disappear
51    await expect(scrollButton).not.toBeVisible();
52    
53    // Send another message - should auto-scroll since we're at bottom
54    await input.fill('echo final message');
55    await sendButton.click();
56    
57    // Wait for response
58    await page.waitForSelector('[data-testid="agent-thinking"]', { timeout: 5000 });
59    
60    // Button should not appear since we're following the conversation
61    await expect(scrollButton).not.toBeVisible();
62  });
63});