Files
Saxon Fletcher c33d255eba chore(studio): refine assistant empty states (#50191)
<img width="1062" height="712" alt="image"
src="https://github.com/user-attachments/assets/44c82e00-94b4-405a-b2ef-cbc08401c4db"
/>

<img width="1583" height="962" alt="image"
src="https://github.com/user-attachments/assets/b19b9fd8-24b1-48d6-8b31-11fba9911b9a"
/>


## What kind of change does this PR introduce?
UI refinement.

## What is the current behavior?
The assistant sidebar and Explorer chat use different empty states.

## What is the new behavior?
Share a centered empty state with chat-focused prompts, use-case icons,
and a “Use your own agent” footer. Simplify prompt cards and align
Explorer Home styling.

## Additional context
Studio typecheck, targeted ESLint, and Prettier pass. E2E selectors
updated; browser verification pending. Local build stopped after showing
no progress during compilation.

I have read CONTRIBUTING.md.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Redesigned Explorer and AI Assistant onboarding with project-focused
chat prompts.
* Added personalized chat template icons and updated suggested actions.
* Added an option to connect and use an external agent through Claude,
OpenAI, or Cursor.
  * Improved chat composer placement and empty-chat guidance.
* **Style**
* Action cards now support layouts without descriptions and adjust
alignment automatically.
* **Tests**
  * Updated end-to-end coverage for the revised assistant interface.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-10 13:39:21 +08:00

50 lines
1.6 KiB
TypeScript

import { expect } from '@playwright/test'
import { test } from '../utils/test.js'
import { toUrl } from '../utils/to-url.js'
test.describe('AI Assistant', async () => {
test('Can send a message to the assistant and receive a response', async ({ page, ref }) => {
// Skip the test if the OPENAI_API_KEY is not set
test.skip(!process.env.OPENAI_API_KEY, 'OPENAI_API_KEY is not set')
await page.goto(toUrl(`/project/${ref}`))
// Wait for the page to load
await expect(page.getByRole('heading', { level: 1 })).toBeVisible()
// Click the assistant button to open the assistant panel
await page.locator('#assistant-trigger').click()
// Wait for the assistant panel to be visible
await expect(page.getByRole('heading', { name: 'Chat with your project' })).toBeVisible()
// Type "hello" in the chat input
const chatInput = page.getByRole('textbox', {
name: 'Ask about your data, troubleshoot an issue, or explore your project...',
})
await chatInput.fill('hello')
const responsePromise = page.waitForResponse(
(response) =>
response.url().includes('/api/ai/sql/generate-v4') &&
response.request().method() === 'POST',
{ timeout: 60000 }
)
// Click the send message button
const sendButton = page.getByRole('button', { name: 'Send message' })
await sendButton.click()
// Wait for the API request to complete
const response = await responsePromise
// Verify the response was successful
expect(response.status()).toBe(200)
// AI response has values
const body = await response.text()
expect(body).toContain('data')
})
})